/* Sprout Valley — texturas UI (mantém stroke + fill do design system) */

.sprout-ui .pix-btn__face,
.sprout-ui .dock-hud-tool,
.sprout-ui .dock-hud-btn,
.sprout-ui .nav-tool,
.sprout-ui .layer-eye,
.sprout-ui .layer-lock,
.sprout-ui .layer-actions .layer-menu {
  border: 2px solid var(--sprout-border);
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Fill + stroke por variante */
.sprout-ui .pix-btn--play .pix-btn__face {
  background-color: var(--pix-play-fill);
}

.sprout-ui .pix-btn--pause .pix-btn__face {
  background-color: var(--pix-pause-fill);
}

.sprout-ui .pix-btn--quit .pix-btn__face {
  background-color: var(--pix-quit-fill);
}

.sprout-ui .pix-btn--setting .pix-btn__face {
  background-color: var(--pix-setting-fill);
}

.sprout-ui .pix-btn--option .pix-btn__face {
  background-color: var(--pix-option-fill);
}

.sprout-ui .dock-hud-tool,
.sprout-ui .dock-hud-btn,
.sprout-ui .nav-tool {
  background-color: var(--sprout-panel-light);
  border-radius: var(--pix-radius);
}

.sprout-ui .dock-hud-tool.is-active,
.sprout-ui .dock-hud-tool.is-shape-active,
.sprout-ui .dock-pin[aria-pressed="true"],
.sprout-ui .dock-shapes-toggle.is-open,
.sprout-ui .dock-shapes-toggle.is-shape-active,
.sprout-ui .nav-tool.is-active,
.sprout-ui .nav-tool[aria-pressed="true"] {
  background-color: var(--pix-selected-bg);
  box-shadow: var(--pix-selected-shadow);
  border-color: var(--sprout-border);
}

.sprout-ui .dock-hud-tool.is-open {
  background-color: var(--sprout-active);
  border-color: var(--sprout-border);
}

.sprout-ui .layer-eye,
.sprout-ui .layer-lock,
.sprout-ui .layer-actions .layer-menu {
  background-color: var(--sprout-panel-light);
  border-radius: var(--pix-radius-sm);
}

.sprout-ui .dock-hud-tool.dock-color-trigger {
  border-radius: var(--pix-radius-sm);
}

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

.sprout-ui .pix-tabs--studio .pix-tabs__btn {
  background-color: var(--sprout-panel-dark);
  border: none;
  border-radius: 0;
}

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

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

.sprout-ui .pix-btn:hover:not(:disabled) .pix-btn__face {
  filter: brightness(1.04);
}

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

.sprout-ui .dock-hud-tool:hover .pix-icon,
.sprout-ui .dock-hud-btn:hover .pix-icon,
.sprout-ui .nav-tool:hover .pix-icon {
  opacity: 1;
}

/* Som — desligado: botão levantado; ligado: pressionado */
#studio-sound-toggle .pix-btn__face {
  background-color: var(--pix-option-fill);
  box-shadow: var(--neo-raised);
}

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

#studio-sound-toggle.is-pressed .pix-icon,
#studio-sound-toggle[aria-pressed="true"] .pix-icon {
  filter: var(--pix-icon-filter);
  opacity: var(--pix-icon-opacity-active);
}

/* Som desligado — ícone com opacidade reduzida */
#studio-sound-toggle[aria-pressed="false"] .pix-icon {
  opacity: 0.55;
}

/* ── Sliders (layer panel) ── */
.sprout-ui .layer-slider .pix-range__track {
  background: var(--ep-tertiary-cream-dark);
  border: 2px solid var(--sprout-border);
  height: var(--range-track-h, 12px);
}

.sprout-ui .layer-slider .pix-range__track::before {
  display: none;
}

.sprout-ui .layer-slider .pix-range__fill {
  background: var(--ep-primary-blue);
  background-image: none;
}

.sprout-ui .layer-slider input[type="range"]::-webkit-slider-thumb {
  width: var(--range-thumb-w, 14px);
  height: var(--range-thumb-h, 18px);
  margin-top: calc((var(--range-track-h, 12px) - var(--range-thumb-h, 18px)) / 2);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--ep-tertiary-cream-light);
  background-image: none;
}

.sprout-ui .layer-slider input[type="range"].is-pressed::-webkit-slider-thumb,
.sprout-ui .layer-slider input[type="range"]:active::-webkit-slider-thumb {
  width: calc(var(--range-thumb-w, 14px) + 2px);
  height: calc(var(--range-thumb-h, 18px) + 2px);
  margin-top: calc((var(--range-track-h, 12px) - var(--range-thumb-h, 18px) - 2px) / 2);
}

.sprout-ui .layer-slider input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb-w, 14px);
  height: var(--range-thumb-h, 18px);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--ep-tertiary-cream-light);
  background-image: none;
}

.sprout-ui .layer-slider input[type="range"].is-pressed::-moz-range-thumb,
.sprout-ui .layer-slider input[type="range"]:active::-moz-range-thumb {
  width: calc(var(--range-thumb-w, 14px) + 2px);
  height: calc(var(--range-thumb-h, 18px) + 2px);
}

/* ── Painéis e modais ── */
.dock-hud-colors,
.studio-modal__card,
.layer-merge-drop__card,
.layer-popover__card,
.dock-shapes-drop__card,
.dock-lasso-drop__card {
  background-color: var(--sprout-panel-light);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background-image: url("assets/sprout-ui/panels/empty.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.dock-shapes-drop__card,
.dock-lasso-drop__card,
.layer-popover__card,
.layer-merge-drop__card {
  background-image: url("assets/sprout-ui/panels/empty-dark.png");
}

/* ── Swatches ≤32px ── */
.dock-swatch {
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background-color: var(--sprout-panel-light);
  image-rendering: pixelated;
}

.color-mode-swatch {
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background-color: var(--sprout-panel-light);
  image-rendering: pixelated;
}

.studio-palette .custom-palette-slot.is-filled,
.custom-palette-slot.is-filled {
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background-color: var(--sprout-panel-light);
  image-rendering: pixelated;
}


.studio-panel[data-panel="colors"] .panel-hint {