/* Estúdio Pixel — layout Sprout Lands */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  font-weight: var(--pix-font-weight);
  line-height: var(--pix-line-height);
  color: var(--sprout-ink);
  background: var(--sprout-bg);
  overflow: hidden;
}

.panel-title {
  font-size: var(--pix-font-md);
  line-height: var(--pix-line-height-tight);
  margin: 0 0 12px;
  padding-bottom: 8px;
  letter-spacing: 0.02em;
  color: var(--sprout-ink);
  border-bottom: 2px solid var(--sprout-panel-dark);
  box-shadow: 0 2px 0 var(--sprout-highlight);
}

.pix-tabs__btn span { pointer-events: none; }

/* Chevrons horizontais — mesmo glyph que chevron-up (padrão do dock) */
img[data-pix-icon="chevron-right"],
.pix-icon[data-pix-icon="chevron-right"] {
  transform: rotate(90deg);
  transform-origin: center center;
}

img[data-pix-icon="chevron-left"],
.pix-icon[data-pix-icon="chevron-left"] {
  transform: rotate(-90deg);
  transform-origin: center center;
}

/* Tabs horizontais (estilo Sprout — ligadas ao painel) */
.pix-tabs--studio {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  background: var(--sprout-panel-dark);
}

.pix-tabs--studio .pix-tabs__btn {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: var(--pix-radius) var(--pix-radius) 0 0;
  background: var(--sprout-panel-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  cursor: pointer;
  font-family: var(--pix-font);
  font-size: 12px;
  font-weight: var(--pix-font-weight);
  line-height: var(--pix-line-height);
  letter-spacing: 0;
  color: var(--sprout-ink-muted);
  box-shadow: none;
  overflow: visible;
}

.pix-tabs--studio .pix-tabs__btn span {
  display: block;
  width: max-content;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  line-height: var(--pix-line-height);
  overflow: visible;
}

.pix-tabs--studio .pix-tabs__btn.is-active {
  position: relative;
  z-index: 1;
  background: var(--sprout-panel-light);
  color: var(--sprout-ink);
  margin-bottom: 0;
  border: none;
  padding: 10px 8px 14px;
  box-shadow: none;
}

.pix-tabs--studio .pix-tabs__btn:not(.is-active):hover {
  color: var(--sprout-ink);
  background: var(--sprout-panel-light);
}

.pixel-studio {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--sprout-bg);
  flex-direction: column;
  --studio-rail-size: var(--pix-square, 42px);
  --studio-logo-size: 56px;
  --studio-bar-h: calc(12px + max(var(--studio-logo-size), var(--studio-rail-size)));
  --studio-rail-inset: 16px;
}

.pixel-studio__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--sprout-panel);
  border-bottom: 2px solid var(--sprout-border);
  box-shadow: var(--neo-raised);
  flex-shrink: 0;
  position: relative;
  z-index: 15;
}

.pixel-studio__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.pixel-studio__logo {
  display: block;
  flex-shrink: 0;
  width: var(--studio-logo-size);
  height: var(--studio-logo-size);
  line-height: 0;
  overflow: visible;
}

.pixel-studio__logo img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  object-fit: contain;
  object-position: left center;
}

.pixel-studio__bar-right {
  display: flex;
  align-items: center;
  gap: var(--pix-btn-gap);
  margin-left: auto;
}

.bar-menu {
  /* Mesmo tamanho que #studio-color-trigger (studio-control − 12px → 32px) */
  --bar-menu-compact: calc(var(--studio-control-size) - 12px);
  --bar-menu-inset: calc((var(--studio-rail-size) - var(--bar-menu-compact)) / 2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 0;
}

/* Contentor «Novo» em pressed — agrupa ícones da barra sem clique nem bounce */
.bar-menu__shell {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  cursor: default;
  pointer-events: none;
}

/* Bandeja — só fundo + stroke (não é .pix-btn: evita herdar pressed/hover nos filhos) */
.bar-menu__tray {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: max-content;
  min-width: 0;
  height: var(--studio-rail-size);
  min-height: var(--studio-rail-size);
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  background: var(--sprout-panel);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: none;
  transform: none;
  filter: none;
  overflow: hidden;
  transition: width 0.22s ease;
}

.bar-menu__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pix-btn-gap);
  flex: 0 0 auto;
  width: max-content;
  min-height: var(--studio-rail-size);
  padding: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  box-sizing: border-box;
  pointer-events: auto;
  transition:
    padding-left 0.22s ease,
    gap 0.22s ease,
    max-width 0.22s ease;
}

.bar-menu.is-open .bar-menu__actions {
  padding-left: var(--bar-menu-inset);
}

.bar-menu:not(.is-open) .bar-menu__tray {
  width: calc(var(--studio-rail-size) + 2px);
}

.bar-menu:not(.is-open) .bar-menu__actions {
  gap: 0;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  position: relative;
}

.bar-menu__shell .bar-menu__action {
  position: relative;
  pointer-events: auto;
}

.bar-menu__shell .bar-menu__action--compact {
  z-index: 1;
}

.bar-menu__shell #studio-panel-toggle {
  z-index: 2;
}

.bar-menu__shell .bar-menu__action--compact,
.bar-menu__shell #studio-panel-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 0;
  box-sizing: border-box;
  vertical-align: top;
}

.bar-menu__shell .bar-menu__action--compact {
  width: var(--bar-menu-compact);
  height: var(--bar-menu-compact);
  min-width: var(--bar-menu-compact);
  min-height: var(--bar-menu-compact);
  overflow: hidden;
  transition:
    width 0.22s ease,
    min-width 0.22s ease,
    opacity 0.18s ease,
    transform 0.22s ease,
    margin 0.22s ease;
}

.bar-menu:not(.is-open) .bar-menu__action--compact {
  position: absolute;
  width: 0;
  min-width: 0;
  height: 0;
  min-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: none;
  pointer-events: none;
}

.bar-menu.is-open .bar-menu__action--compact {
  width: var(--bar-menu-compact);
  min-width: var(--bar-menu-compact);
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.bar-menu__shell #studio-panel-toggle {
  width: var(--studio-rail-size);
  height: var(--studio-rail-size);
  min-width: var(--studio-rail-size);
  min-height: var(--studio-rail-size);
  margin-left: auto;
  margin-right: 0;
  align-self: center;
  transform: none;
  position: relative;
  left: 0;
}

.bar-menu:not(.is-open) .bar-menu__shell #studio-panel-toggle {
  margin-left: 0;
  width: calc(var(--studio-rail-size) + 2px);
  min-width: calc(var(--studio-rail-size) + 2px);
  left: -2px;
}

.bar-menu__drawer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: gap 0.18s ease;
}

.bar-menu__drawer:not([hidden]) {
  display: flex;
}

.bar-menu.is-open .bar-menu__drawer {
  gap: var(--pix-btn-gap);
}

.bar-menu__item {
  width: 0;
  min-width: 0;
  height: var(--studio-rail-size);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  flex-shrink: 0;
  transition:
    width 0.18s ease,
    min-width 0.18s ease,
    opacity 0.16s ease,
    visibility 0.16s ease;
}

.bar-menu__item:nth-child(2) {
  transition-delay: 0s;
}

.bar-menu.is-open .bar-menu__item {
  width: var(--studio-rail-size);
  min-width: var(--studio-rail-size);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
}

.bar-menu.is-open .bar-menu__item:nth-child(1) {
  transition-delay: 0s;
}

.bar-menu.is-open .bar-menu__item:nth-child(2) {
  transition-delay: 0.05s;
}

.bar-menu:not(.is-open) .bar-menu__item:nth-child(1) {
  transition-delay: 0.05s;
}

.bar-menu:not(.is-open) .bar-menu__item:nth-child(2) {
  transition-delay: 0s;
}

.bar-menu__item .pix-btn__face {
  width: var(--studio-rail-size);
  height: var(--studio-rail-size);
  min-width: var(--studio-rail-size);
  min-height: var(--studio-rail-size);
}

/* Som e ecrã inteiro — sempre visíveis na barra */
.bar-menu__action {
  flex-shrink: 0;
}

a.pix-btn,
a.studio-side-nav__btn {
  text-decoration: none;
  color: inherit;
}

/* Botões ícone do header (fora do bar-menu shell; shell sobrescreve abaixo) */
.pixel-studio__bar-right .pix-btn--icon .pix-btn__face {
  width: var(--studio-rail-size);
  height: var(--studio-rail-size);
  min-width: var(--studio-rail-size);
  min-height: var(--studio-rail-size);
}

/* bar-menu — cada botão com hover/pressed só na sua face */
.bar-menu__shell .bar-menu__action.pix-btn--icon > .pix-btn__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border-radius: var(--pix-radius-sm);
  box-sizing: border-box;
  transform: none;
  pointer-events: auto;
  background: var(--pix-fill);
  box-shadow: var(--neo-raised);
}

.bar-menu__shell .bar-menu__action--compact.pix-btn--icon:hover:not(:disabled) > .pix-btn__face {
  background: var(--pix-highlight);
}

.bar-menu__shell .bar-menu__action--compact.pix-btn--icon:active:not(:disabled) > .pix-btn__face {
  background: var(--pix-shade);
  box-shadow: none;
}

.bar-menu__shell .bar-menu__action--compact.is-pressed > .pix-btn__face,
.bar-menu__shell .bar-menu__action--compact[aria-pressed="true"] > .pix-btn__face {
  background: var(--pix-selected-bg);
  box-shadow: var(--pix-selected-shadow);
}

.bar-menu__shell #studio-panel-toggle.pix-btn--icon > .pix-btn__face {
  border-radius: var(--pix-radius);
  background: var(--pix-fill);
  box-shadow: var(--neo-raised);
}

.bar-menu__shell #studio-panel-toggle.pix-btn--icon:hover:not(:disabled) > .pix-btn__face {
  background: var(--pix-highlight);
}

.bar-menu__shell #studio-panel-toggle.is-pressed > .pix-btn__face,
.bar-menu__shell #studio-panel-toggle[aria-expanded="true"] > .pix-btn__face {
  background: var(--pix-selected-bg);
  box-shadow: var(--pix-selected-shadow);
}

.bar-menu__shell .bar-menu__action--compact .pix-icon,
.bar-menu__shell #studio-panel-toggle .pix-icon {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--pix-icon-size) * var(--bar-menu-compact) / var(--studio-control-size));
  height: calc(var(--pix-icon-size) * var(--bar-menu-compact) / var(--studio-control-size));
  min-width: calc(var(--pix-icon-size) * var(--bar-menu-compact) / var(--studio-control-size));
  min-height: calc(var(--pix-icon-size) * var(--bar-menu-compact) / var(--studio-control-size));
  max-width: calc(var(--pix-icon-size) * var(--bar-menu-compact) / var(--studio-control-size));
  max-height: calc(var(--pix-icon-size) * var(--bar-menu-compact) / var(--studio-control-size));
  margin: 0;
  position: static;
  transform: none;
}

.bar-menu__shell #studio-panel-toggle .pix-icon {
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
  min-width: var(--pix-icon-size);
  min-height: var(--pix-icon-size);
  max-width: var(--pix-icon-size);
  max-height: var(--pix-icon-size);
}

.pixel-studio__bar-right .pix-btn--bar-label:not(.bar-menu__shell) .pix-btn__face,
.pixel-studio__bar .pix-btn--bar-label:not(.bar-menu__shell) .pix-btn__face {
  height: var(--studio-rail-size);
  min-height: var(--studio-rail-size);
  min-width: var(--studio-rail-size);
  padding: 0 12px;
}

.pixel-studio__bar .pix-btn--bar-icon-label .pix-btn__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
}

.pixel-studio__bar .pix-btn--bar-icon-label .pix-btn__label {
  letter-spacing: 0.02em;
}

.pixel-studio__workspace {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--studio-canvas-chrome, #0e1113);
}

/* Navegação (zoom / pan / grelha) — coluna com painel recolhível (web + mobile) */
.nav-mobile-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.nav-mobile-toggle.nav-tool {
  background: var(--sprout-panel-dark);
  box-shadow: var(--neo-inset);
}

.nav-mobile-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: var(--studio-control-size);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: calc(var(--studio-control-size) * 4 + 18px);
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease,
    gap 0.24s ease,
    visibility 0s linear 0s;
}

.pixel-studio.is-nav-mobile-collapsed .nav-mobile-panel {
  max-height: 0;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    gap 0.24s ease,
    visibility 0s linear 0.32s;
}

.pixel-studio__nav-tools {
  position: fixed;
  left: var(--studio-rail-inset);
  top: 50%;
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: var(--studio-control-size);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(-50%);
  pointer-events: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.nav-tool {
  width: var(--studio-control-size);
  height: var(--studio-control-size);
  min-width: var(--studio-control-size);
  min-height: var(--studio-control-size);
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--pix-option-fill);
  color: var(--sprout-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: var(--neo-raised);
}

.nav-tool:hover {
  background: var(--sprout-highlight);
  color: var(--sprout-ink);
}

.nav-tool.is-active {
  color: var(--sprout-ink);
}

.pixel-studio.is-panel-collapsed .pixel-studio__nav-tools {
  left: var(--studio-rail-inset);
}

@media (min-width: 901px) {
  .pixel-studio.is-panel-collapsed .pixel-studio__right {
    transform: translateX(100%);
    pointer-events: none;
  }

  .pixel-studio:not(.is-panel-collapsed) .pixel-studio__right {
    transform: translateX(0);
  }
}

.pixel-studio__coords {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  font-size: var(--pix-font-xs);
  font-weight: var(--pix-font-weight);
  color: var(--sprout-ink-muted);
  letter-spacing: 0.02em;
  text-align: center;
  background: var(--sprout-panel-dark);
  border: none;
  border-top: 2px solid var(--sprout-border);
  border-radius: 0;
}

/* Canvas preenche o workspace (o header já está fora desta área) */
#studio-canvas.pixel-studio__center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: var(--studio-panel-w, 336px);
  z-index: 1;
  display: block;
  min-width: 0;
  min-height: 0;
  background: var(--studio-canvas-chrome, #0e1113);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  /* Cursores Kenney aplicados em js/studio-cursors.js + pixel-studio.js */
}

@media (min-width: 901px) {
  #studio-canvas.pixel-studio__center {
    transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pixel-studio:not(.is-panel-collapsed) #studio-canvas.pixel-studio__center {
    transition-duration: 0.36s;
  }
}

.pixel-studio.is-panel-collapsed #studio-canvas.pixel-studio__center {
  right: 0;
}

/* Painel do dock no desktop não altera o grid do footer */
.dock-mobile-primary-row {
  display: none;
}

.dock-mobile-toggle {
  display: none;
}

.dock-mobile-panel {
  display: contents;
}

.dock-tools-mobile-bar {
  display: none;
}

/* Dock — ferramentas em cima, cores em baixo; recolhe até só ferramentas */
.pixel-studio__dock {
  --dock-tool-size: var(--studio-control-size);
  --dock-grid-gap: var(--pix-btn-gap);
  --dock-swatch-size: 24px;
  --color-mode-swatch-size: calc(var(--dock-swatch-size) - 2px);
  --dock-grid-cols:
    var(--dock-tool-size)
    var(--dock-tool-size)
    2px
    repeat(5, var(--dock-tool-size))
    2px
    repeat(3, var(--dock-tool-size))
    var(--dock-tool-size);
  --dock-colors-end: 12;
  --dock-clear-col: 12;
  --dock-pin-col: 13;
  position: fixed;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: var(--dock-grid-cols);
  column-gap: var(--dock-grid-gap);
  grid-template-rows: auto 0fr;
  row-gap: 0;
  padding: 10px 12px;
  background: var(--sprout-panel);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius) var(--pix-radius) 0 0;
  box-shadow: var(--neo-raised);
  max-width: min(720px, calc(100vw - var(--studio-panel-w, 300px) - 32px));
  transform: translateX(-50%);
  pointer-events: auto;
  overflow: hidden;
  transition: grid-template-rows 0.24s ease, gap 0.24s ease, left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.pixel-studio.is-dock-syncing .pixel-studio__dock {
  transition: grid-template-rows 0.24s ease, gap 0.24s ease;
}

@media (min-width: 901px) {
  .pixel-studio:not(.is-panel-collapsed) .pixel-studio__dock {
    transition: grid-template-rows 0.24s ease, gap 0.24s ease, left 0.36s cubic-bezier(0.4, 0, 0.2, 1),
      max-width 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (hover: hover) {
  .pixel-studio__dock:hover,
  .pixel-studio__dock:focus-within,
  .pixel-studio__dock.is-dock-pinned,
  .pixel-studio__dock.is-shapes-menu-open,
  .pixel-studio__dock.is-color-picker-open {
    grid-template-rows: auto auto;
    row-gap: var(--pix-btn-gap);
    overflow: visible;
  }
}

@media (hover: none) {
  .pixel-studio__dock {
    grid-template-rows: auto auto;
    row-gap: var(--pix-btn-gap);
    overflow: visible;
  }
}

.dock-grid--dock-reveal {
  overflow: hidden;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.pixel-studio__dock.is-dock-pinned {
  grid-template-rows: auto auto;
  row-gap: var(--pix-btn-gap);
  overflow: visible;
}

.pixel-studio__dock.is-dock-pinned .dock-grid--dock-reveal {
  opacity: 1;
  visibility: visible;
  max-height: none;
  overflow: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s;
}

@media (hover: hover) {
  .pixel-studio__dock:hover .dock-grid--dock-reveal,
  .pixel-studio__dock:focus-within .dock-grid--dock-reveal,
  .pixel-studio__dock.is-dock-pinned .dock-grid--dock-reveal,
  .pixel-studio__dock.is-shapes-menu-open .dock-grid--dock-reveal,
  .pixel-studio__dock.is-color-picker-open .dock-grid--dock-reveal {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0s;
  }
}

@media (hover: none) {
  .dock-grid--dock-reveal {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
  }
}

.pixel-studio.is-panel-collapsed .pixel-studio__dock {
  max-width: min(720px, calc(100vw - 32px));
}

.dock-grid--colors {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.dock-grid--tools {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  width: 100%;
  overflow: visible;
  scrollbar-width: thin;
  padding: 0;
  box-sizing: border-box;
}

.pixel-studio__dock.is-dock-pinned .dock-grid--tools,
.pixel-studio__dock:hover .dock-grid--tools,
.pixel-studio__dock:focus-within .dock-grid--tools,
.pixel-studio__dock.is-shapes-menu-open .dock-grid--tools,
.pixel-studio__dock.is-color-picker-open .dock-grid--tools {
  overflow: visible;
}

.dock-hud--top {
  display: contents;
}

.dock-hud-colors {
  grid-column: 1 / var(--dock-colors-end);
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--dock-tool-size);
  min-height: var(--dock-tool-size);
  align-self: center;
  padding: 4px;
  background: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: var(--neo-inset);
  overflow: visible;
}

.dock-layer-actions {
  display: contents;
}

.dock-mobile-secondary-bar__spacer {
  display: none;
}

.dock-tools-secondary-tail {
  display: contents;
}

.dock-mobile-secondary-bar {
  display: contents;
}

#studio-clear {
  grid-column: var(--dock-clear-col);
}

#studio-dock-pin {
  grid-column: var(--dock-pin-col);
}

#studio-dock-layer-add {
  grid-column: var(--dock-clear-col);
  align-self: center;
}

#studio-dock-layer-del {
  grid-column: var(--dock-pin-col);
  align-self: center;
}

/* Fill / stroke + paleta rápida — uma fila */
.color-mode__left {
  display: flex;
  align-items: center;
  gap: var(--dock-grid-gap);
  width: fit-content;
  height: fit-content;
  max-width: fit-content;
  flex: 0 0 auto;
}

.color-mode-stack {
  --color-mode-offset: 8px;
  position: relative;
  width: calc(var(--color-mode-swatch-size) + var(--color-mode-offset));
  height: calc(var(--color-mode-swatch-size) + var(--color-mode-offset));
  flex: 0 0 auto;
  align-self: center;
  overflow: visible;
}

.color-mode-swatch {
  position: absolute;
  margin: 0;
  width: var(--color-mode-swatch-size);
  height: var(--color-mode-swatch-size);
  padding: 0;
  box-sizing: border-box;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--sprout-panel-light);
  cursor: pointer;
  overflow: hidden;
  transform: none;
}

.color-mode-swatch--stroke {
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  z-index: 1;
}

.color-mode-swatch--fill {
  left: var(--color-mode-offset);
  top: 0;
  bottom: auto;
  right: auto;
  z-index: 2;
}

.color-mode-swatch.is-front {
  z-index: 3;
}

.color-mode-swatch__inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pix-radius-sm) - 2px);
  background: #fff;
  box-sizing: border-box;
  box-shadow: var(--neo-raised);
}

.color-mode-swatch__inner--empty {
  background:
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  background-color: #fff;
}

.dock-swatches-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dock-grid-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dock-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dock-grid-gap);
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--dock-swatch-size);
  min-height: var(--dock-swatch-size);
}

.dock-hud-btn,
.dock-hud-tool {
  width: var(--dock-tool-size);
  height: var(--dock-tool-size);
  min-width: var(--dock-tool-size);
  min-height: var(--dock-tool-size);
  flex-shrink: 0;
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  color: var(--sprout-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--neo-raised);
}

.dock-hud-btn:hover,
.dock-hud-tool:hover {
  background: var(--sprout-highlight);
}

.dock-hud-btn:disabled,
.dock-hud-btn--danger:disabled,
.dock-hud-tool.dock-hud-btn--danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dock-hud-btn--danger:hover:not(:disabled),
.dock-hud-tool.dock-hud-btn--danger:hover:not(:disabled) {
  background: var(--pix-quit-fill);
}

.dock-hud .pix-icon,
.dock-hud-btn > .pix-icon,
.dock-hud-btn > .dock-tool-icon,
.dock-layer-actions .pix-icon,
.dock-layer-actions .dock-tool-icon,
.dock-tool-icon {
  display: block;
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
  min-width: var(--pix-icon-size);
  min-height: var(--pix-icon-size);
  max-width: var(--pix-icon-size);
  max-height: var(--pix-icon-size);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  flex-shrink: 0;
}

.dock-layer-actions .dock-tool-icon,
.dock-layer-actions .pix-icon {
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
  min-width: var(--pix-icon-size);
  min-height: var(--pix-icon-size);
  max-width: var(--pix-icon-size);
  max-height: var(--pix-icon-size);
  transform: none;
}

.studio-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 11rem;
  padding: 4px;
  margin: 0;
  list-style: none;
  background: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: var(--pix-shadow-lg);
  font-family: var(--pix-font);
  font-size: var(--pix-font-xs);
}

.studio-context-menu[hidden] {
  display: none !important;
}

.studio-context-menu__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--pix-radius);
  background: transparent;
  color: var(--sprout-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.studio-context-menu__item:hover:not(:disabled) {
  background: var(--sprout-highlight);
}

.studio-context-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.layer-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sprout-panel-dark);
  box-shadow: 0 2px 0 var(--sprout-highlight);
}

.layer-panel-head__title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  box-shadow: none;
  flex: 1;
  min-width: 0;
  font-size: var(--pix-font-md);
  line-height: var(--pix-line-height);
}

.layer-panel-head__merge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel);
  color: var(--sprout-ink-muted);
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  font-weight: var(--pix-font-weight-bold);
  line-height: var(--pix-line-height);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.layer-panel-head__merge:hover:not(:disabled) {
  color: var(--sprout-ink);
}

.layer-panel-head__merge.is-active {
  color: var(--sprout-active-dark);
}

.layer-panel-head__merge:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Shared retro drop: seed → width → height → content ── */
.pix-drop {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  font-family: var(--pix-font);
  font-size: var(--pix-font-xs);
  --pix-drop-gap: 6px;
}

.pix-drop:not([hidden]) {
  pointer-events: auto;
}

.pix-drop[hidden] {
  display: none !important;
}

.pix-drop--anchor-end {
  transform: translateX(-100%);
}

.pix-drop--anchor-start {
  transform: none;
}

.pix-drop--grow-up {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pix-drop--grow-up.pix-drop--anchor-end {
  align-items: flex-end;
}

.pix-drop--grow-up.pix-drop--anchor-start {
  align-items: flex-start;
}

.dock-shapes-drop__seed,
.dock-lasso-drop__seed,
.layer-merge-drop__seed,
.layer-popover__seed,
.color-picker-drop__seed {
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  background: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  box-shadow: var(--pix-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s steps(2);
}

.pix-drop--anchor-end .dock-shapes-drop__seed,
.pix-drop--anchor-end .dock-lasso-drop__seed,
.pix-drop--anchor-end .layer-merge-drop__seed,
.pix-drop--anchor-end .layer-popover__seed,
.pix-drop--anchor-end .color-picker-drop__seed {
  right: 0;
  left: auto;
}

.pix-drop--anchor-start .dock-shapes-drop__seed,
.pix-drop--anchor-start .dock-lasso-drop__seed,
.pix-drop--anchor-start .layer-merge-drop__seed,
.pix-drop--anchor-start .layer-popover__seed,
.pix-drop--anchor-start .color-picker-drop__seed {
  left: 0;
  right: auto;
}

.pix-drop--grow-up .dock-shapes-drop__seed,
.pix-drop--grow-up .dock-lasso-drop__seed,
.pix-drop--grow-up .color-picker-drop__seed {
  top: auto;
  bottom: 0;
}

.pix-drop.is-seed-only .dock-shapes-drop__seed,
.pix-drop.is-seed-only .dock-lasso-drop__seed,
.pix-drop.is-seed-only .layer-merge-drop__seed,
.pix-drop.is-seed-only .layer-popover__seed,
.pix-drop.is-seed-only .color-picker-drop__seed {
  opacity: 1;
}

.pix-drop.is-width-open .dock-shapes-drop__seed,
.pix-drop.is-height-open .dock-shapes-drop__seed,
.pix-drop.is-content-visible .dock-shapes-drop__seed,
.pix-drop.is-width-open .dock-lasso-drop__seed,
.pix-drop.is-height-open .dock-lasso-drop__seed,
.pix-drop.is-content-visible .dock-lasso-drop__seed,
.pix-drop.is-width-open .layer-merge-drop__seed,
.pix-drop.is-height-open .layer-merge-drop__seed,
.pix-drop.is-content-visible .layer-merge-drop__seed,
.pix-drop.is-width-open .layer-popover__seed,
.pix-drop.is-height-open .layer-popover__seed,
.pix-drop.is-content-visible .layer-popover__seed,
.pix-drop.is-width-open .color-picker-drop__seed,
.pix-drop.is-height-open .color-picker-drop__seed,
.pix-drop.is-content-visible .color-picker-drop__seed {
  opacity: 0;
}

.dock-shapes-drop__card,
.dock-lasso-drop__card,
.layer-merge-drop__card,
.layer-popover__card,
.color-picker-drop__card {
  width: 4px;
  max-width: 4px;
  max-height: 4px;
  overflow: hidden;
  background: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: var(--pix-shadow-lg);
  opacity: 0;
  transition:
    width 0.22s steps(8),
    max-width 0.22s steps(8),
    max-height 0.26s steps(10),
    opacity 0.1s steps(2);
}

.pix-drop--anchor-end .dock-shapes-drop__card,
.pix-drop--anchor-end .dock-lasso-drop__card,
.pix-drop--anchor-end .layer-merge-drop__card,
.pix-drop--anchor-end .layer-popover__card,
.pix-drop--anchor-end .color-picker-drop__card {
  margin-left: auto;
  margin-right: 0;
}

.pix-drop--anchor-start .dock-shapes-drop__card,
.pix-drop--anchor-start .dock-lasso-drop__card,
.pix-drop--anchor-start .layer-merge-drop__card,
.pix-drop--anchor-start .layer-popover__card,
.pix-drop--anchor-start .color-picker-drop__card {
  margin-right: auto;
  margin-left: 0;
}

.pix-drop.is-seed-only .dock-shapes-drop__card,
.pix-drop.is-seed-only .dock-lasso-drop__card,
.pix-drop.is-seed-only .layer-merge-drop__card,
.pix-drop.is-seed-only .layer-popover__card,
.pix-drop.is-seed-only .color-picker-drop__card {
  opacity: 0;
  width: 4px;
  max-width: 4px;
  max-height: 4px;
}

.pix-drop.is-width-open .dock-shapes-drop__card,
.pix-drop.is-width-open .dock-lasso-drop__card,
.pix-drop.is-width-open .layer-merge-drop__card,
.pix-drop.is-width-open .layer-popover__card,
.pix-drop.is-width-open .color-picker-drop__card {
  width: 100%;
  max-width: 100%;
  max-height: 4px;
  opacity: 1;
  transition:
    width 0.22s steps(8),
    max-width 0.22s steps(8),
    max-height 0s,
    opacity 0.1s steps(2);
}

.pix-drop.is-height-open .dock-shapes-drop__card,
.pix-drop.is-height-open .dock-lasso-drop__card,
.pix-drop.is-height-open .layer-merge-drop__card,
.pix-drop.is-height-open .layer-popover__card,
.pix-drop.is-height-open .color-picker-drop__card,
.pix-drop.is-content-visible .dock-shapes-drop__card,
.pix-drop.is-content-visible .dock-lasso-drop__card,
.pix-drop.is-content-visible .layer-merge-drop__card,
.pix-drop.is-content-visible .layer-popover__card,
.pix-drop.is-content-visible .color-picker-drop__card {
  width: 100%;
  max-width: 100%;
  max-height: 320px;
  opacity: 1;
  transition:
    width 0s,
    max-width 0s,
    max-height 0.26s steps(10),
    opacity 0.1s steps(2);
}

.pix-drop.is-height-open .color-picker-drop__card,
.pix-drop.is-content-visible .color-picker-drop__card {
  max-height: min(38rem, calc(100dvh - 3rem));
}

.dock-shapes-drop__items,
.dock-lasso-drop__items,
.layer-merge-drop__content,
.layer-popover__items,
.color-picker-drop__content {
  opacity: 0;
  transition: opacity 0.16s ease;
}

.pix-drop.is-content-visible .dock-shapes-drop__items,
.pix-drop.is-content-visible .dock-lasso-drop__items,
.pix-drop.is-content-visible .layer-merge-drop__content,
.pix-drop.is-content-visible .layer-popover__items,
.pix-drop.is-content-visible .color-picker-drop__content {
  opacity: 1;
}

.dock-shapes-drop,
.dock-lasso-drop {
  width: fit-content;
  max-width: min(100%, calc(100vw - 16px));
}

.dock-shapes-drop.is-content-visible,
.dock-lasso-drop.is-content-visible {
  transition: bottom 0.24s ease, left 0.24s ease, transform 0.24s ease;
}

@media (prefers-reduced-motion: reduce) {
  .dock-shapes-drop.is-content-visible,
  .dock-lasso-drop.is-content-visible {
    transition: none;
  }

  .color-picker-drop.is-content-visible {
    transition: none;
  }
}

/* Color picker — drop ancorado ao swatch do dock */
.color-picker-drop {
  --dock-swatch-size: 24px;
  --color-picker-body-h: 15rem;
  width: 21.5rem;
  max-width: min(21.5rem, calc(100vw - 16px));
}

.pix-drop.is-content-visible .color-picker-drop__card {
  overflow-x: hidden;
  overflow-y: auto;
}

.color-picker-drop.is-content-visible {
  transition: bottom 0.24s ease, left 0.24s ease, top 0.24s ease, transform 0.24s ease;
}

.color-picker-drop.is-panel-centered {
  display: block;
}

.color-picker-drop.is-panel-centered.is-content-visible {
  transition: top 0.24s ease, left 0.24s ease;
}

.color-picker-drop.is-panel-centered.pix-drop--grow-up {
  flex-direction: column;
  justify-content: flex-start;
}

.color-picker-drop__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.color-picker-drop.is-library-disabled [data-color-picker-tab="library"] {
  display: none;
}

.color-picker-drop.is-opacity-disabled .color-picker-drop__opacity {
  display: none;
}

.color-picker-drop.is-eyedropper-disabled .color-picker-drop__eyedropper {
  display: none;
}

.color-picker-drop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 6px;
  box-sizing: border-box;
}

.color-picker-drop__title {
  margin: 0;
  font-family: var(--pix-font);
  font-size: var(--pix-font-md);
  line-height: var(--pix-line-height-tight);
  color: var(--sprout-ink);
}

.color-picker-drop__close {
  --color-picker-compact-icon: calc(28px - 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  color: var(--sprout-ink);
  cursor: pointer;
  box-shadow: var(--neo-raised);
  flex-shrink: 0;
}

.color-picker-drop__close .pix-icon {
  width: var(--color-picker-compact-icon);
  height: var(--color-picker-compact-icon);
  min-width: var(--color-picker-compact-icon);
  min-height: var(--color-picker-compact-icon);
  max-width: var(--color-picker-compact-icon);
  max-height: var(--color-picker-compact-icon);
}

.color-picker-drop__close:hover {
  background: var(--sprout-highlight);
}

.color-picker-drop__tabs {
  display: flex;
  gap: 4px;
  margin: 0 8px 8px;
  padding: 4px;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  box-sizing: border-box;
}

.color-picker-drop__tab {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  border: 2px solid transparent;
  border-radius: var(--pix-radius);
  background: transparent;
  font-family: var(--pix-font);
  font-size: 12px;
  font-weight: var(--pix-font-weight);
  line-height: var(--pix-line-height);
  letter-spacing: 0;
  color: var(--sprout-ink-muted);
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
  transition: background 0.12s steps(2), color 0.12s steps(2), border-color 0.12s steps(2);
}

.color-picker-drop__tab.is-active {
  color: var(--sprout-ink);
}

.color-picker-drop__tab:hover:not(.is-active) {
  color: var(--sprout-ink);
}

.color-picker-drop__body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: var(--color-picker-body-h);
  min-height: var(--color-picker-body-h);
  max-height: var(--color-picker-body-h);
  box-sizing: border-box;
}

.color-picker-drop__panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.color-picker-drop__panel.is-active {
  display: flex;
}

.color-picker-drop__panel[data-color-picker-panel="sliders"].is-active {
  overflow-y: auto;
}

.color-picker-drop__grid {
  display: grid;
  gap: 3px;
  padding: 0 8px;
  box-sizing: border-box;
}

.color-picker-drop__grid--material {
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  margin-bottom: 0;
}

.color-picker-drop__panel[data-color-picker-panel="library"] {
  align-items: stretch;
}

.color-picker-drop__panel[data-color-picker-panel="library"] .color-picker-drop__hint {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  box-sizing: border-box;
}

.color-picker-drop__grid--library {
  --library-slot-min: var(--dock-swatch-size);
  --library-slot-gap: 6px;
  --custom-palette-plus: calc((var(--library-slot-min) - 12px) * 1.5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--library-slot-min), 1fr));
  grid-auto-rows: auto;
  gap: var(--library-slot-gap);
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 0 8px;
  justify-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
}

.color-picker-drop__grid--library .dock-swatch,
.color-picker-drop__grid--library .color-picker-drop__slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  justify-self: stretch;
  align-self: stretch;
}

.color-picker-drop__grid button:not(.dock-swatch) {
  aspect-ratio: 1;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: var(--pix-radius);
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

#studio-color-picker-grid button,
#studio-color-picker-grid button.is-active,
#studio-color-picker-grid button:hover,
#studio-color-picker-grid button:focus,
#studio-color-picker-grid button:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
}

.color-picker-drop__grid button:not(.dock-swatch):hover {
  filter: brightness(1.08);
  z-index: 1;
}

.color-picker-drop__slider-preview {
  width: calc(100% - 16px);
  height: 36px;
  margin: 0 8px 10px;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: #fff;
  box-sizing: border-box;
}

.color-picker-drop__slider-field {
  display: block;
  width: 100%;
  padding: 0 8px 10px;
  margin-bottom: 0;
  box-sizing: border-box;
}

.color-picker-drop__slider-field .layer-slider__head {
  margin-bottom: 6px;
}

.color-picker-drop__range {
  display: block;
  width: 100%;
}

.color-picker-drop__range--no-fill .pix-range__fill {
  display: none;
}

.color-picker-drop__range-track--hue {
  background: linear-gradient(
    90deg,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  ) !important;
}

.color-picker-drop__opacity {
  padding: 14px 8px 10px;
  margin-top: 4px;
  box-sizing: border-box;
  border-top: 2px solid var(--sprout-panel-dark);
}

.color-picker-drop__opacity-slider {
  margin-bottom: 0;
}

.color-picker-drop__opacity-track {
  background-color: transparent !important;
}

.color-picker-drop__opacity-track .pix-range__fill {
  display: none;
}

.color-picker-drop__grid--library .color-picker-drop__slot.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--sprout-panel-light);
  border: 2px dashed var(--sprout-ink-muted);
  border-radius: var(--pix-radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.color-picker-drop__grid--library .color-picker-drop__slot.is-empty:hover {
  border-color: var(--sprout-ink);
  background: var(--sprout-highlight);
}


.color-picker-drop__hint {
  margin: 4px 8px 10px;
  padding-top: 4px;
  font-size: var(--pix-font-xs);
  line-height: 1.3;
  color: var(--sprout-ink-muted);
}

.color-picker-drop__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 14px;
  border-top: 2px solid var(--sprout-border);
  box-sizing: border-box;
  flex-shrink: 0;
  --color-picker-footer-control: 28px;
  --color-picker-compact-icon: calc(var(--color-picker-footer-control) - 12px);
  --color-picker-footer-icon: var(--color-picker-compact-icon);
}

.color-picker-drop__current {
  flex-shrink: 0;
  width: var(--color-picker-footer-control);
  height: var(--color-picker-footer-control);
  aspect-ratio: 1;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-sizing: border-box;
  box-shadow: var(--neo-raised);
}

.color-picker-drop__hex {
  flex: 1;
  min-width: 0;
  height: var(--color-picker-footer-control);
  padding: 0 8px;
  font-size: var(--pix-font-xs);
  letter-spacing: 0.02em;
}

.color-picker-drop__eyedropper {
  flex-shrink: 0;
  width: var(--color-picker-footer-control);
  height: var(--color-picker-footer-control);
  min-width: var(--color-picker-footer-control);
  min-height: var(--color-picker-footer-control);
  padding: 0;
  border-radius: 50%;
}

.color-picker-drop__eyedropper .pix-icon {
  width: var(--color-picker-footer-icon);
  height: var(--color-picker-footer-icon);
  min-width: var(--color-picker-footer-icon);
  min-height: var(--color-picker-footer-icon);
  max-width: var(--color-picker-footer-icon);
  max-height: var(--color-picker-footer-icon);
}

.dock-shapes-drop__items,
.dock-lasso-drop__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  box-sizing: border-box;
  width: fit-content;
}

.dock-shapes-drop__items button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dock-shapes-drop__icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 1;
}

.dock-shapes-drop__items button span {
  flex: 1 1 auto;
}

.layer-merge-drop {
  width: 17rem;
  max-width: min(17rem, calc(100vw - 16px));
}

.layer-merge-drop__hint {
  margin: 0 0 8px;
  font-size: var(--pix-font-xs);
  color: var(--sprout-ink-muted);
}

.layer-merge-drop__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.layer-merge-drop__actions .pix-btn {
  display: flex;
  width: 100%;
}

.layer-merge-drop__actions .pix-btn--wide .pix-btn__face {
  width: 100%;
  box-sizing: border-box;
}

.layer-name-row {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--pix-btn-gap);
}

.layer-name-row .layer-name-input,
.layer-name-row .layer-name-input--plain {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.layer-name-input--plain {
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--sprout-panel-light);
  cursor: default;
  pointer-events: none;
  display: flex;
  align-items: center;
  height: var(--layer-row-control-size);
  min-height: var(--layer-row-control-size);
  box-sizing: border-box;
  padding: 0 8px;
  box-shadow: var(--neo-raised);
}

.studio-layers li.is-background .layer-name-input--plain {
  color: var(--sprout-ink);
}

.layer-lock-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--sprout-active-dark);
}

.layer-bg-color {
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--sprout-panel);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--neo-raised);
  -webkit-appearance: none;
  appearance: none;
}

.layer-bg-color:hover {
  filter: brightness(1.05);
}

.layer-bg-color.is-bg-transparent {
  background-image: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) !important;
  background-size: 8px 8px !important;
  background-color: transparent !important;
}

.studio-layers li.is-background {
  cursor: default;
}

.studio-layers li.is-background .layer-bg-color {
  flex-shrink: 0;
}

.layer-lock-icon .pix-icon {
  width: var(--layer-row-icon-size);
  height: var(--layer-row-icon-size);
  min-width: var(--layer-row-icon-size);
  min-height: var(--layer-row-icon-size);
  max-width: var(--layer-row-icon-size);
  max-height: var(--layer-row-icon-size);
}

.layer-hover-zone {
  position: absolute;
  right: calc(var(--layer-row-control-size) + 2px);
  top: 0;
  bottom: 0;
  width: calc(var(--layer-row-control-size) - 4px);
  z-index: 1;
}

.layer-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0;
  flex: 0 0 auto;
  width: max-content;
  height: var(--layer-row-control-size);
  margin-left: auto;
  z-index: 2;
  transition: gap 0.18s ease;
}

.layer-actions .layer-lock--compact,
.layer-actions .layer-menu {
  pointer-events: auto;
}

.layer-lock--compact {
  flex-shrink: 0;
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--sprout-panel);
  color: var(--sprout-ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--neo-raised);
}

.layer-lock--compact:hover:not(:disabled) {
  background: var(--sprout-panel);
  color: var(--sprout-ink);
}

.layer-lock--compact.is-active {
  color: var(--sprout-ink);
}

.layer-lock--compact .pix-icon {
  width: var(--layer-row-icon-size);
  height: var(--layer-row-icon-size);
  min-width: var(--layer-row-icon-size);
  min-height: var(--layer-row-icon-size);
  max-width: var(--layer-row-icon-size);
  max-height: var(--layer-row-icon-size);
}

.layer-actions .layer-menu {
  display: none;
  width: var(--layer-row-control-size);
  min-width: var(--layer-row-control-size);
  height: var(--layer-row-control-size);
  min-height: var(--layer-row-control-size);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--pix-radius-sm);
  background: var(--sprout-panel);
  color: var(--sprout-ink-muted);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  flex-shrink: 0;
  box-sizing: border-box;
  transition:
    opacity 0.16s ease,
    visibility 0.16s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}

.layer-actions .layer-lock--compact {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease;
}

.layer-name-row--has-actions:has(.layer-hover-zone:hover) .layer-actions,
.layer-name-row--has-actions:has(.layer-actions:hover) .layer-actions,
.layer-name-row--has-actions.is-revealed .layer-actions {
  gap: var(--pix-btn-gap);
}

.layer-name-row--has-actions:has(.layer-hover-zone:hover) .layer-actions .layer-menu,
.layer-name-row--has-actions:has(.layer-actions:hover) .layer-actions .layer-menu,
.layer-name-row--has-actions.is-revealed .layer-actions .layer-menu {
  display: inline-flex;
  width: var(--layer-row-control-size);
  min-width: var(--layer-row-control-size);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: var(--neo-raised);
}

.layer-actions .layer-menu:hover {
  color: var(--sprout-ink);
}

.layer-lock--compact:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.layer-merge-drop__content {
  padding: 10px;
}

.layer-popover {
  width: 11.5rem;
  max-width: min(11.5rem, calc(100vw - 16px));
}

.layer-popover__items {
  padding: 4px;
}

.layer-popover__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--pix-radius);
  background: transparent;
  color: var(--sprout-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.layer-popover__item:hover:not(:disabled) {
  background: var(--sprout-highlight);
}

.layer-popover__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.layer-merge-pick {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.layer-merge-pick--spacer {
  pointer-events: none;
}

.layer-merge-pick__input {
  width: 16px;
  height: 16px;
  accent-color: var(--sprout-active-dark);
  cursor: pointer;
}

.studio-layers li.is-merge-pick {
  cursor: default;
}

.layer-alpha {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel);
  color: var(--sprout-ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.layer-alpha.is-active,
#studio-layer-alpha-lock.is-active {
  border-color: var(--sprout-border);
}

.layer-alpha .pix-icon {
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
}

.dock-shapes-toggle.is-open .dock-tool-icon {
  filter: var(--pix-icon-filter-active);
  opacity: var(--pix-icon-opacity-active);
  mix-blend-mode: var(--pix-icon-blend-active);
}

.dock-tool-icon--direct {
  color: var(--sprout-ink);
}

.dock-hud-sep {
  width: 2px;
  height: calc(var(--dock-tool-size) - 8px);
  align-self: center;
  flex-shrink: 0;
  background: var(--sprout-border);
  margin: 0;
}

.dock-pin:not([aria-pressed="true"]),
.dock-hud-tool:not(.is-active):not(.is-open):not(.is-shape-active):not(.dock-color-trigger) {
  box-shadow: var(--neo-raised);
}

@media (hover: none) {
  .dock-pin {
    visibility: hidden;
    pointer-events: none;
  }
}

.dock-swatch {
  width: var(--dock-swatch-size);
  height: var(--dock-swatch-size);
  padding: 0;
  box-sizing: border-box;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--neo-raised);
  -webkit-appearance: none;
  appearance: none;
}

.dock-swatch:hover {
  filter: brightness(1.05);
}

.dock-hud-tool.dock-color-trigger {
  border: none;
  border-bottom: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: none;
}

.dock-hud-tool.dock-color-trigger[aria-expanded="true"] {
  box-shadow: var(--pix-selected-shadow);
}

.dock-color-trigger {
  position: relative;
  width: calc(var(--dock-tool-size) - 12px);
  height: calc(var(--dock-tool-size) - 12px);
  min-width: calc(var(--dock-tool-size) - 12px);
  min-height: calc(var(--dock-tool-size) - 12px);
}

.dock-hud-tool.dock-color-trigger:hover,
.dock-color-trigger:hover {
  filter: brightness(1.05);
}

.dock-color-trigger.is-dark-bg .dock-tool-icon,
.dock-color-trigger.is-dark-bg .pix-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
  mix-blend-mode: normal;
}

/* Menu de formas */
.dock-shapes {
  flex-shrink: 0;
  position: relative;
}

.dock-grid--tools:has(.dock-shapes-toggle.is-open) {
  overflow: visible;
}

.dock-shapes-menu button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  white-space: nowrap;
  color: var(--sprout-ink);
  font-family: var(--pix-font);
  font-size: var(--pix-font-xs);
  line-height: 1.35;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dock-shapes-menu button:hover {
  background: transparent;
  color: var(--sprout-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dock-shapes-menu button.is-active {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--sprout-ink);
  font-weight: 700;
  text-decoration: none;
}

/* Controles por layer — altura natural; scroll unificado no painel */
.layer-active-controls {
  flex-shrink: 0;
  margin: 0;
  border-top: 2px dashed var(--sprout-border);
  background: var(--sprout-panel-light);
}

.layer-active-controls[hidden] {
  display: none !important;
}

.layer-resize {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed var(--sprout-panel-dark);
}

.layer-resize .panel-title {
  margin-bottom: 8px;
}

.layer-resize[hidden] {
  display: none;
}

.layer-slider {
  display: block;
  width: 100%;
  font-size: var(--pix-font-xs);
  color: var(--sprout-ink);
  margin-bottom: 12px;
}

.layer-slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pix-btn-gap);
  width: 100%;
  margin-bottom: 6px;
}

.layer-slider__label {
  color: var(--sprout-ink);
  font-weight: var(--pix-font-weight-bold);
  letter-spacing: 0.02em;
}

.layer-slider__val {
  margin-left: auto;
  font-size: var(--pix-font-sm);
  color: var(--sprout-ink-muted);
  text-align: right;
  flex-shrink: 0;
  min-width: 2.5em;
}

.layer-slider input[type="range"] {
  display: block;
  width: 100%;
}

.panel-hint {
  margin: 0;
  font-size: var(--pix-font-xs);
  color: var(--sprout-ink-muted);
  line-height: 1.45;
}

.studio-layers { list-style: none; margin: 0; padding: 0; }

.studio-layers li {
  display: flex;
  align-items: center;
  gap: var(--pix-btn-gap);
  padding: 10px;
  border-radius: var(--pix-radius);
  border: 2px solid var(--sprout-border);
  margin-bottom: 8px;
  font-size: var(--pix-font-sm);
  cursor: pointer;
  background: var(--sprout-panel);
  color: var(--sprout-ink-muted);
  box-shadow: var(--neo-raised);
}

.studio-layers li:not(.is-background):not(.is-locked):not(.is-merge-pick) {
  cursor: grab;
}

.studio-layers.is-layer-dragging {
  user-select: none;
  position: relative;
}

.studio-layers.is-layer-dragging,
.studio-layers.is-layer-dragging li.is-dragging {
  cursor: grabbing;
}

.studio-layers.is-layer-dragging li {
  position: relative;
}

.studio-layers li.is-dragging {
  opacity: 0.95;
  cursor: grabbing;
  box-shadow:
    0 6px 0 var(--sprout-border),
    0 10px 16px rgba(54, 66, 72, 0.22);
  background: var(--sprout-panel-light);
}

.studio-layers li.is-drop-target {
  border-color: var(--sprout-active-dark);
  box-shadow:
    0 0 0 2px var(--sprout-active),
    var(--neo-raised);
}

.layer-drag {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 32px;
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: var(--neo-inset);
}

/* Arrastar oculto por defeito — o olho fica à esquerda */
.layer-drag[draggable="true"] {
  width: 0;
  min-width: 0;
  margin: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    width 0.14s ease,
    min-width 0.14s ease,
    margin 0.14s ease,
    opacity 0.12s ease,
    border-width 0s linear 0.08s;
}

/* Background: slot vazio (0px) para o olho alinhar com as outras rows em repouso */
.layer-drag--placeholder {
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (hover: hover) {
  .studio-layers li:not(.is-background):hover .layer-drag[draggable="true"],
  .studio-layers li.is-dragging .layer-drag[draggable="true"] {
    width: 28px;
    min-width: 28px;
    border-width: 2px;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none) {
  .studio-layers li:not(.is-background) .layer-drag[draggable="true"] {
    width: 28px;
    min-width: 28px;
    border-width: 2px;
    opacity: 0.65;
    pointer-events: auto;
  }
}

.layer-drag[draggable="true"]:hover {
  background: var(--sprout-highlight);
}

.layer-drag[draggable="true"]:active {
  cursor: grabbing;
}

.layer-drag .pix-icon {
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
}

.studio-layers li.is-active {
  --layer-active-stroke: color-mix(in srgb, var(--sprout-border) 50%, transparent);
  border-color: var(--layer-active-stroke);
  background: var(--sprout-panel-light);
  color: var(--sprout-ink);
  box-shadow: none;
}

.studio-layers li.is-active .layer-bg-color {
  border-color: var(--layer-active-stroke);
}

.studio-layers li.is-active .layer-eye,
.studio-layers li.is-active .layer-lock,
.studio-layers li.is-active .layer-name-input,
.studio-layers li.is-active .layer-drag[draggable="true"],
.studio-layers li.is-active .layer-actions .layer-menu {
  border-color: var(--layer-active-stroke);
}

.layer-eye,
.layer-lock.layer-lock--compact,
.layer-bg-color {
  width: var(--layer-row-control-size);
  min-width: var(--layer-row-control-size);
  height: var(--layer-row-control-size);
  min-height: var(--layer-row-control-size);
  flex: 0 0 var(--layer-row-control-size);
  box-sizing: border-box;
}

.layer-eye {
  padding: 0;
  border: 2px solid var(--sprout-border);
  background: var(--sprout-panel-light);
  cursor: pointer;
  border-radius: var(--pix-radius-sm);
  box-shadow: var(--neo-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.layer-eye:hover { background: var(--sprout-highlight); }

.layer-eye .pix-icon {
  width: var(--layer-row-icon-size);
  height: var(--layer-row-icon-size);
  min-width: var(--layer-row-icon-size);
  min-height: var(--layer-row-icon-size);
  max-width: var(--layer-row-icon-size);
  max-height: var(--layer-row-icon-size);
}

.layer-name-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: var(--layer-row-control-size);
  min-height: var(--layer-row-control-size);
  box-sizing: border-box;
  padding: 0 8px;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--sprout-panel-light);
  font-family: var(--pix-font);
  font-size: var(--pix-font-xs);
  line-height: var(--pix-line-height);
  color: var(--sprout-ink);
  text-transform: none;
}

.layer-name-input:focus {
  outline: none;
  border-color: var(--sprout-border);
  box-shadow: none;
}

.layer-name-input:read-only {
  opacity: 0.85;
  cursor: default;
}

.layer-lock {
  flex: 0 0 auto;
  border: 2px solid var(--sprout-border);
  background: var(--sprout-panel-light);
  cursor: pointer;
  border-radius: var(--pix-radius);
  box-shadow: var(--neo-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.layer-lock:hover:not(:disabled) {
  filter: brightness(1.05);
}

.layer-lock:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.studio-layers li.is-locked:not(.is-background) {
  border-color: var(--sprout-overlay-soft);
}

.studio-layers li.is-locked:not(.is-active) {
  cursor: default;
}

:root {
  --studio-panel-w: 336px;
  --layer-row-control-size: 32px;
  --layer-row-icon-size: calc(var(--layer-row-control-size) - 12px);
}

.pixel-studio__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: var(--studio-panel-w);
  background: var(--sprout-panel);
  border-left: 2px solid var(--sprout-border);
  box-shadow: none;
  position: fixed;
  right: 0;
  top: var(--studio-bar-h);
  height: calc(100dvh - var(--studio-bar-h));
  max-height: calc(100dvh - var(--studio-bar-h));
  z-index: 10;
  overflow: hidden;
  transform: translateX(0);
  transform-origin: right center;
  transition: transform 0.22s steps(4);
  outline: none;
}

.pixel-studio__panel-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.studio-side-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pix-btn-gap);
  padding: 10px 10px 8px;
  background: var(--sprout-panel);
  border-bottom: 2px solid var(--sprout-border);
  flex-shrink: 0;
}

.studio-side-nav__btn {
  flex: 1 1 100%;
  min-width: 0;
}

.studio-side-nav__btn .pix-btn__face {
  width: 100%;
  height: var(--studio-rail-size);
  min-height: var(--studio-rail-size);
  padding: 0 10px;
  box-sizing: border-box;
}

.studio-side-nav .pix-btn--bar-label .pix-btn__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.studio-side-nav .pix-btn__label {
  letter-spacing: 0.02em;
}

.pixel-studio__panel-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: min-content;
  overflow: visible;
}

.studio-panel-footer,
.pixel-studio__right > .pixel-studio__coords {
  flex-shrink: 0;
}

.studio-panel-footer {
  display: flex;
  flex-direction: column;
  gap: var(--pix-btn-gap);
  margin: 8px 14px 10px;
}

.studio-panel-footer .pix-btn--wide {
  width: 100%;
  margin: 0;
}

.studio-panel-footer .pix-btn--wide .pix-btn__face {
  width: 100%;
}

.pixel-studio__panel-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  background: var(--sprout-panel-light);
}

.studio-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: visible;
  min-height: 0;
}

.studio-panel.is-active { display: flex; }

.studio-panel[data-panel="layer"] {
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
}

.studio-panel-scroll--layer {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  --studio-layer-panel-inset-x: 14px;
  --studio-layer-panel-padding-top: 12px;
}

.studio-panel-scroll--layer .layer-panel-head {
  margin: 0 0 12px;
  padding: var(--studio-layer-panel-padding-top) var(--studio-layer-panel-inset-x) 8px;
}

.studio-panel-scroll--layer .studio-layers-scroll {
  padding: 0 var(--studio-layer-panel-inset-x) 8px;
}

.studio-panel-scroll--layer .layer-active-controls {
  padding: 12px var(--studio-layer-panel-inset-x) 10px;
}

.studio-layers-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

@media (min-width: 901px) {
  .dock-tool--mobile-extra,
  .dock-hud-sep--mobile-extra,
  .dock-mobile-primary-row,
  .dock-tools-mobile-bar {
    display: none !important;
  }

  .pixel-studio__panel-content > .studio-panel[data-panel="layer"].is-active {
    flex: 0 0 auto;
    min-height: auto;
  }
}

.studio-panel[data-panel="layer"] .layer-active-controls {
  flex-shrink: 0;
}

.studio-preview-wrap {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: #ffffff;
  box-shadow: var(--neo-inset);
  overflow: hidden;
}

#studio-preview,
.studio-preview {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--studio-preview-aspect, 1);
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-panel-drawer-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--sprout-border);
  background: var(--sprout-panel);
  flex-shrink: 0;
}

.studio-panel-drawer-head__title {
  margin: 0;
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  color: var(--sprout-ink);
}

.studio-panel-drawer-head__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  cursor: pointer;
  box-shadow: var(--neo-raised);
  box-sizing: border-box;
}

.studio-panel-drawer-head__close:hover {
  background: var(--sprout-highlight);
}

.studio-file-import {
  width: 100%;
  margin-top: 12px;
}

/* Modal — abre como pix-drop centrado */
.studio-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

.studio-modal:not([hidden]) {
  pointer-events: auto;
}

.studio-modal[hidden] {
  display: none !important;
}

.studio-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--sprout-overlay);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: auto;
}

.studio-modal:not([hidden]) .studio-modal__backdrop.is-visible {
  opacity: 1;
}

.studio-modal__drop {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.studio-modal__drop:not([hidden]) {
  pointer-events: auto;
}

.studio-modal__seed {
  width: 4px;
  height: 4px;
  background: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  box-shadow: var(--pix-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s steps(2);
  flex-shrink: 0;
}

.studio-modal__drop.is-seed-only .studio-modal__seed {
  opacity: 1;
}

.studio-modal__drop.is-width-open .studio-modal__seed,
.studio-modal__drop.is-height-open .studio-modal__seed,
.studio-modal__drop.is-content-visible .studio-modal__seed {
  opacity: 0;
}

.studio-modal__card {
  width: 4px;
  max-width: 100%;
  max-height: 4px;
  overflow: hidden;
  background: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: var(--pix-shadow-lg);
  opacity: 0;
  transition:
    width 0.22s steps(8),
    max-width 0.22s steps(8),
    max-height 0.26s steps(10),
    opacity 0.1s steps(2);
}

.studio-modal__drop.is-seed-only .studio-modal__card {
  opacity: 0;
  width: 4px;
  max-width: 4px;
  max-height: 4px;
}

.studio-modal__drop.is-width-open .studio-modal__card {
  width: 100%;
  max-width: 100%;
  max-height: 4px;
  opacity: 1;
  transition:
    width 0.22s steps(8),
    max-width 0.22s steps(8),
    max-height 0s,
    opacity 0.1s steps(2);
}

.studio-modal__drop.is-height-open .studio-modal__card,
.studio-modal__drop.is-content-visible .studio-modal__card {
  width: 100%;
  max-width: 100%;
  max-height: 480px;
  opacity: 1;
  transition:
    width 0s,
    max-width 0s,
    max-height 0.26s steps(10),
    opacity 0.1s steps(2);
}

.studio-modal__panel {
  width: 100%;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.studio-modal__drop.is-content-visible .studio-modal__panel {
  opacity: 1;
}

.studio-modal__text {
  margin: 0 0 12px;
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  color: var(--sprout-ink-muted);
  line-height: 1.45;
}

.studio-modal__option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  cursor: pointer;
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  color: var(--sprout-ink);
  box-sizing: border-box;
}

.studio-modal__checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sprout-active-dark);
  cursor: pointer;
  flex-shrink: 0;
}

.studio-modal__option-label {
  line-height: var(--pix-line-height);
  letter-spacing: 0.02em;
}

.studio-modal__actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.studio-modal__actions .pix-btn--wide {
  display: flex;
  flex: 1;
  min-width: 0;
  width: auto;
}

.studio-modal__actions .pix-btn--wide .pix-btn__face {
  width: 100%;
  box-sizing: border-box;
}

.studio-modal__actions .pix-btn--wide .pix-btn__label {
  white-space: normal;
  text-align: center;
  line-height: var(--pix-line-height);
}

.studio-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.panel-title--section {
  margin-top: 18px;
}

.studio-custom-palette {
  --dock-swatch-size: 24px;
  --custom-palette-plus: calc((var(--dock-swatch-size) - 12px) * 1.5);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.custom-palette-slot {
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border-radius: var(--pix-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sprout-panel-light);
  -webkit-appearance: none;
  appearance: none;
}

.custom-palette-slot.is-empty {
  border: 2px dashed var(--sprout-ink-muted);
  box-shadow: none;
}

.custom-palette-slot.is-empty:hover {
  border-color: var(--sprout-ink);
  background: var(--sprout-highlight);
}

.custom-palette-slot__plus {
  display: block;
  font-family: var(--pix-font);
  font-size: var(--custom-palette-plus);
  line-height: 1;
  color: var(--pix-icon-color);
  pointer-events: none;
  user-select: none;
}

.custom-palette-slot.is-empty:hover .custom-palette-slot__plus,
.color-picker-drop__grid--library .color-picker-drop__slot.is-empty:hover .custom-palette-slot__plus {
  color: var(--sprout-ink);
}


.custom-palette-slot.is-filled {
  border: 2px solid var(--sprout-border);
  box-shadow: var(--neo-raised);
}

.custom-palette-slot.is-filled:hover {
  filter: brightness(1.06);
}

.studio-panel[data-panel="colors"] .panel-hint {
  margin-top: 10px;
  margin-bottom: 0;
}

.studio-resize {
  display: flex;
  align-items: center;
  gap: var(--pix-btn-gap);
  flex-wrap: wrap;
  width: 100%;
}

.studio-resize input.pix-input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  text-align: center;
}

.studio-resize .pix-btn--wide {
  flex: 1 1 100%;
}

.studio-resize span {
  font-size: var(--pix-font-md);
  color: var(--sprout-ink);
}

.studio-resize__sep {
  flex: 0 0 auto;
  padding: 0 2px;
  color: var(--sprout-ink-muted);
}

.studio-resize--layer,
.studio-resize--doc {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.studio-resize--doc .studio-resize__sep {
  flex: 0 0 auto;
}

.studio-resize__row {
  display: flex;
  align-items: center;
  gap: var(--pix-btn-gap);
  width: 100%;
}

.studio-resize--layer .studio-resize__input--dim {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.studio-resize__row--size {
  flex-wrap: nowrap;
}

.studio-resize__aspect {
  flex: 0 0 var(--studio-control-size);
  align-self: center;
}

.studio-resize__aspect .pix-btn__face {
  width: var(--studio-control-size);
  min-width: var(--studio-control-size);
  height: var(--studio-control-size);
  min-height: var(--studio-control-size);
  padding: 0;
}

.studio-resize__aspect-icon {
  display: block;
}

.sprout-ui .studio-resize__aspect.is-active .pix-btn__face,
.sprout-ui .studio-resize__aspect.is-pressed .pix-btn__face,
.sprout-ui .studio-resize__aspect[aria-pressed="true"] .pix-btn__face {
  background: var(--pix-selected-bg);
  border-color: var(--sprout-border);
  box-shadow: var(--pix-selected-shadow);
}

.sprout-ui .studio-resize__aspect:not(.is-active):not(.is-pressed):not([aria-pressed="true"]) .studio-resize__aspect-icon {
  opacity: 0.45;
}

.studio-resize__apply {
  display: block;
  width: 100%;
  flex: 0 0 auto;
}

.studio-resize__apply.pix-btn--wide {
  flex: 0 0 auto;
}

.studio-resize__apply .pix-btn__face {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.studio-resize__apply .pix-btn__label {
  line-height: 1;
}

.studio-panel .pix-btn--wide { width: 100%; }
.studio-panel .pix-btn--wide .pix-btn__face { width: 100%; }

.pixel-studio__save,
.pixel-studio__new {
  flex-shrink: 0;
}

/* Raio 10px — controlos quadrados ≥ 36px (40–44px: fechar painel, header, nav, dock) */
.studio-panel-drawer-head__close,
.pixel-studio__bar-right .pix-btn--icon .pix-btn__face,
.nav-tool,
.dock-hud-tool,
.dock-hud-btn,
.dock-mobile-toggle.dock-hud-tool {
  border-radius: var(--pix-radius);
}

/* Raio 5px — botões e swatches ≤32px (--pix-control-size-sm) */
.bar-menu__shell .bar-menu__action--compact.pix-btn--icon > .pix-btn__face,
.dock-swatch,
.dock-color-trigger,
.dock-hud-tool.dock-color-trigger,
.layer-eye,
.layer-lock,
.layer-lock--compact,
.layer-bg-color,
.layer-drag,
.layer-actions .layer-menu,
.layer-alpha,
.color-picker-drop__close,
.color-picker-drop__current,
.color-picker-drop__grid button:not(.dock-swatch),
.color-picker-drop__grid--library .dock-swatch,
.color-picker-drop__grid--library .color-picker-drop__slot {
  border-radius: var(--pix-radius-sm);
}

.color-picker-drop__grid--material button {
  border-radius: 0 !important;
}