:root {
  color-scheme: light;
  --ink: #17151d;
  --muted: #706c7d;
  --panel: #fffaf0;
  --panel-glass: rgba(255, 250, 240, 0.96);
  --paper: #fdfbf6;
  --line: #ded7ca;
  --accent: #2ec4b6;
  --coral: #f25f5c;
  --app-bg: #ece7dc;
  --surface-wash: #f7f0e4;
  --button-bg: #f7f0e4;
  --button-hover: #ffffff;
  --button-border: #bfb6a8;
  --active-text: #fffaf0;
  --input-bg: #fffdf8;
  --progress-bg: #d9d0c0;
  --checker-bg: #cfc8bc;
  --checker-mark: rgba(0, 0, 0, 0.045);
  --selection-stroke: #15131b;
  --selection-fill: rgba(46, 196, 182, 0.14);
  --shadow: 0 18px 44px rgba(31, 28, 42, 0.16);
  --soft-highlight: rgba(255, 255, 255, 0.74);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f7f2e8;
  --muted: #b9b0c8;
  --panel: #211e2a;
  --panel-glass: rgba(33, 30, 42, 0.96);
  --paper: #fdfbf6;
  --line: #423b51;
  --app-bg: #15131b;
  --surface-wash: #211e2a;
  --button-bg: #2a2634;
  --button-hover: #373142;
  --button-border: #5d536d;
  --active-text: #101015;
  --input-bg: #191620;
  --progress-bg: #3a3347;
  --checker-bg: #2b2634;
  --checker-mark: rgba(255, 255, 255, 0.055);
  --selection-stroke: #f7f2e8;
  --selection-fill: rgba(46, 196, 182, 0.2);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --soft-highlight: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(46, 196, 182, 0.18), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(242, 95, 92, 0.16), transparent 26%),
    linear-gradient(135deg, var(--app-bg), var(--surface-wash));
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button,
input {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 10px var(--studio-width, 292px);
  gap: 8px;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 12px;
}

.app-shell.panel-floating {
  grid-template-columns: 72px minmax(0, 1fr);
}

body.left-handed .app-shell {
  grid-template-columns: var(--studio-width, 292px) 10px minmax(0, 1fr) 72px;
}

body.left-handed .settings-panel {
  order: 1;
}

body.left-handed .panel-splitter {
  order: 2;
}

body.left-handed .stage-wrap {
  order: 3;
}

body.left-handed .tool-rail {
  order: 4;
}

body.left-handed .app-shell.panel-floating {
  grid-template-columns: minmax(0, 1fr) 72px;
}

body.left-handed .app-shell.panel-floating .stage-wrap {
  order: 1;
}

body.left-handed .app-shell.panel-floating .tool-rail {
  order: 2;
}

.panel-splitter {
  align-self: stretch;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 3px, var(--line) 3px 7px, transparent 7px 10px);
  cursor: ew-resize;
  touch-action: none;
}

.panel-splitter:hover,
.panel-splitter.active {
  background:
    linear-gradient(90deg, transparent 0 2px, var(--accent) 2px 8px, transparent 8px 10px);
}

.tool-rail,
.settings-panel,
.top-bar {
  background: var(--panel-glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.12);
}

.tool-rail {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border-radius: 8px;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.tool-rail::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tool-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.tool,
.icon-button {
  --tool-accent: var(--accent);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 18%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tool-accent) 16%, var(--button-bg)), var(--button-bg));
  color: var(--tool-accent);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 1px 0 var(--soft-highlight), 0 6px 18px rgba(31, 28, 42, 0.08);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.tool:hover,
.icon-button:hover,
.canvas-actions button:hover,
.shape-actions button:hover,
.selection-actions button:hover,
.panel-tab:hover,
.section-head button:hover,
.brush-preset:hover,
.layer-actions button:hover,
.layer-row:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tool-accent, var(--accent)) 24%, var(--button-hover)), var(--button-hover));
  border-color: color-mix(in srgb, var(--tool-accent, var(--accent)) 48%, var(--button-border));
  box-shadow: inset 0 1px 0 var(--soft-highlight), 0 10px 22px rgba(31, 28, 42, 0.13);
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.tool.active {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tool-accent) 88%, #ffffff 8%), var(--tool-accent));
  color: #fffdf8;
  border-color: color-mix(in srgb, var(--tool-accent) 70%, var(--ink));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tool-accent) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.icon-button.danger {
  color: var(--coral);
}

.tool-mini-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(2, minmax(46px, auto));
  gap: 6px;
  max-width: 190px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: var(--panel-glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.12);
}

.tool-mini-menu[hidden] {
  display: none;
}

.tool-mini-menu button {
  --tool-accent: var(--accent);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 78px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--tool-accent) 12%, var(--button-bg));
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.tool-mini-menu button:hover,
.tool-mini-menu button:focus-visible {
  background: color-mix(in srgb, var(--tool-accent) 24%, var(--button-hover));
  border-color: color-mix(in srgb, var(--tool-accent) 52%, var(--button-border));
}

.tool-mini-menu button.active {
  background: var(--tool-accent);
  color: #fffdf8;
}

.tool-mini-menu[data-input="pen"],
.tool-mini-menu[data-input="touch"] {
  grid-template-columns: repeat(2, minmax(84px, auto));
  gap: 8px;
  max-width: min(250px, calc(100vw - 20px));
  padding: 10px;
}

.tool-mini-menu[data-input="pen"] button,
.tool-mini-menu[data-input="touch"] button {
  min-width: 84px;
  min-height: 44px;
}

.tool.press-hold,
.rail-action.press-hold {
  outline: 3px solid color-mix(in srgb, var(--tool-accent, var(--accent)) 42%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tool-accent, var(--accent)) 16%, transparent);
}

.tool-mini-menu .tool-icon,
.tool-mini-menu .bucket-icon {
  justify-self: center;
  width: 20px;
  height: 20px;
  color: var(--tool-accent);
  transform-origin: center;
}

.tool-mini-menu button.active .tool-icon,
.tool-mini-menu button.active .bucket-icon {
  color: #fffdf8;
}

.mini-text-icon {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 6px;
  color: var(--tool-accent);
  font-size: 9px;
  line-height: 1;
  font-weight: 950;
}

.tool[data-tool="brush"] { --tool-accent: #2ec4b6; }
.tool[data-tool="eraser"] { --tool-accent: #ff8fab; }
.tool[data-tool="smudge"] { --tool-accent: #8b5cf6; }
.tool[data-tool="liquify"] { --tool-accent: #4dabf7; }
.tool[data-tool="eyedropper"] { --tool-accent: #ffbf46; }
.tool[data-tool="fill"] { --tool-accent: #0ead69; }
.tool[data-tool="line"] { --tool-accent: #f25f5c; }
.tool[data-tool="rect"] { --tool-accent: #7057ff; }
.tool[data-tool="ellipse"] { --tool-accent: #ff7a00; }
.tool[data-tool="speechBubble"] { --tool-accent: #ffbf46; }
.tool[data-tool="captionBox"] { --tool-accent: #2ec4b6; }
.tool[data-tool="text"] { --tool-accent: #f25f5c; }
.tool[data-tool="selectRect"] { --tool-accent: #1f7a8c; }
.tool[data-tool="selectEllipse"] { --tool-accent: #0ead69; }
.tool[data-tool="lasso"] { --tool-accent: #b388ff; }
.tool[data-tool="polygonLasso"] { --tool-accent: #7057ff; }
.tool[data-tool="magicWand"] { --tool-accent: #ffbf46; }
.tool[data-tool="moveSelection"] { --tool-accent: #6bcf63; }
.rail-action { --tool-accent: #1f7a8c; }

.tool-icon {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
}

.tool-icon::before,
.tool-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.icon-brush::before {
  left: 10px;
  top: 1px;
  width: 7px;
  height: 22px;
  border-radius: 7px;
  background: currentColor;
  transform: rotate(38deg);
}

.icon-brush::after {
  left: 2px;
  bottom: 1px;
  width: 12px;
  height: 8px;
  border-radius: 8px 8px 3px 3px;
  background: currentColor;
  transform: rotate(38deg);
}

.icon-eraser::before {
  left: 4px;
  top: 7px;
  width: 18px;
  height: 12px;
  border-radius: 4px;
  background: currentColor;
  transform: rotate(-24deg);
}

.icon-eraser::after {
  left: 14px;
  top: 14px;
  width: 9px;
  height: 4px;
  border-radius: 3px;
  background: var(--button-bg);
  transform: rotate(-24deg);
}

.icon-smudge::before,
.icon-liquify::before {
  inset: 4px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.icon-smudge::after,
.icon-liquify::after {
  left: 6px;
  top: 11px;
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor;
}

.icon-liquify::before {
  border-radius: 45% 55% 50% 50%;
  transform: rotate(24deg);
}

.icon-eyedropper::before {
  left: 11px;
  top: 1px;
  width: 6px;
  height: 23px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(42deg);
}

.icon-eyedropper::after {
  left: 2px;
  bottom: 2px;
  width: 10px;
  height: 7px;
  border-radius: 0 0 8px 8px;
  border: 3px solid currentColor;
  border-top: 0;
  transform: rotate(42deg);
}

.bucket-icon {
  position: relative;
  display: block;
  width: 25px;
  height: 22px;
  transform: rotate(-24deg);
}

.bucket-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 15px;
  height: 13px;
  border: 3px solid currentColor;
  border-top-width: 4px;
  border-radius: 3px 3px 6px 6px;
}

.bucket-icon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  background: currentColor;
  transform: rotate(-18deg);
}

.icon-line::before {
  left: 4px;
  top: 12px;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-38deg);
}

.icon-rect::before,
.icon-select::before {
  inset: 5px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.icon-select::before {
  border-style: dashed;
}

.icon-ellipse::before {
  inset: 5px 4px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.icon-bubble::before {
  left: 3px;
  top: 4px;
  width: 20px;
  height: 15px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.icon-bubble::after {
  right: 2px;
  bottom: 3px;
  width: 10px;
  height: 9px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-16deg);
}

.icon-caption::before {
  inset: 5px 3px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.icon-caption::after {
  left: 8px;
  top: 12px;
  width: 12px;
  height: 3px;
  border-top: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.icon-text::before {
  left: 3px;
  top: 4px;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.icon-text::after {
  left: 10px;
  top: 4px;
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: currentColor;
}

.icon-lasso::before {
  left: 3px;
  top: 5px;
  width: 18px;
  height: 13px;
  border: 3px solid currentColor;
  border-radius: 58% 42% 52% 48%;
  transform: rotate(-12deg);
}

.icon-lasso::after {
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(42deg);
}

.icon-move::before {
  left: 12px;
  top: 3px;
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: currentColor;
}

.icon-move::after {
  left: 3px;
  top: 12px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 999px transparent;
}

.icon-deselect::before {
  inset: 4px;
  border: 3px dashed currentColor;
  border-radius: 4px;
}

.icon-deselect::after {
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border: 2px solid var(--button-bg);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 42%, currentColor 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, currentColor 43% 57%, transparent 58%),
    color-mix(in srgb, var(--button-bg) 82%, currentColor);
}

.icon-clear-slate::before {
  left: 5px;
  top: 7px;
  width: 16px;
  height: 15px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 3px 3px 6px 6px;
}

.icon-clear-slate::after {
  left: 3px;
  top: 3px;
  width: 20px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 4px -4px 0 -1px currentColor, 5px 13px 0 -1px currentColor;
  transform: rotate(-7deg);
}

.stage-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 12px;
}

.top-bar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 14px;
  border-radius: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand h1,
.brand p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-layer-hint {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-height: 22px;
  margin-top: 4px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--input-bg));
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.mascot-logo {
  --tool-accent: #ff8fab;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, #ff8fab 42%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 62% 26%, rgba(255, 255, 255, 0.68), transparent 22%),
    linear-gradient(145deg, #ffd166, #ff8fab);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px rgba(255, 143, 171, 0.22);
  cursor: pointer;
}

.starfish {
  position: relative;
  display: block;
  width: 31px;
  height: 31px;
  background:
    radial-gradient(circle at 33% 34%, #ffd166 0 6%, transparent 7%),
    radial-gradient(circle at 66% 30%, #ffd166 0 5%, transparent 6%),
    radial-gradient(circle at 54% 63%, #ffd166 0 5%, transparent 6%),
    #ff8fab;
  clip-path: polygon(50% 0, 64% 31%, 99% 16%, 76% 48%, 97% 84%, 59% 71%, 31% 100%, 35% 62%, 0 54%, 34% 39%);
  filter: drop-shadow(0 2px 0 rgba(111, 51, 78, 0.18));
}

.starfish::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #ffb3c8;
}

.starfish.big {
  width: 96px;
  height: 96px;
  background:
    radial-gradient(circle at 30% 30%, #ffd166 0 5%, transparent 6%),
    radial-gradient(circle at 64% 28%, #ffd166 0 4%, transparent 5%),
    radial-gradient(circle at 72% 58%, #ffd166 0 4%, transparent 5%),
    radial-gradient(circle at 42% 70%, #ffd166 0 4%, transparent 5%),
    radial-gradient(circle at 50% 42%, #ffc2d2 0 20%, transparent 21%),
    #ff8fab;
}

.starfish-eye {
  position: absolute;
  z-index: 1;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3b2430;
}

.starfish.big .starfish-eye {
  top: 38px;
  width: 9px;
  height: 9px;
}

.eye-left {
  left: 12px;
}

.eye-right {
  right: 11px;
}

.starfish.big .eye-left {
  left: 37px;
}

.starfish.big .eye-right {
  right: 34px;
}

.starfish-smile {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 17px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #3b2430;
  border-radius: 0 0 999px 999px;
}

.starfish.big .starfish-smile {
  left: 38px;
  top: 52px;
  width: 23px;
  height: 12px;
  border-bottom-width: 4px;
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: 20px;
  line-height: 1.05;
}

p {
  color: var(--muted);
  font-size: 13px;
}

.file-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.file-actions::-webkit-scrollbar {
  height: 8px;
}

.file-actions::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.file-actions > * {
  flex: 0 0 auto;
}

.top-history-button {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: var(--button-bg);
}

.top-live-indicators {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 50px;
  z-index: 5;
}

.top-color-chip,
.top-size-chip {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(21, 19, 27, 0.28), 0 6px 18px rgba(31, 28, 42, 0.12);
  opacity: 1;
  visibility: visible;
}

.top-color-chip {
  background: #15131b;
  position: relative;
  overflow: hidden;
}

.top-size-chip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.84), transparent 38%),
    var(--input-bg);
}

.top-chip-label {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  max-width: calc(100% - 8px);
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.88);
  color: #15131b;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.top-size-chip #topSizeDot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 4px 12px rgba(31, 28, 42, 0.18);
}

.top-size-chip output {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.top-quick-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 10px;
  width: min(210px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.1);
}

.top-quick-popover[hidden] {
  display: none;
}

.top-quick-popover label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.top-quick-popover input[type="color"] {
  justify-self: end;
  width: 54px;
  min-height: 38px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.size-quick-popover label {
  grid-template-columns: auto auto;
}

.size-quick-popover input[type="range"] {
  grid-column: 1 / -1;
}

.top-quick-swatches,
.top-size-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.top-quick-swatches button,
.top-size-steps button {
  min-height: 34px;
  border: 1px solid var(--button-border);
  border-radius: 7px;
  background: var(--swatch, var(--button-bg));
  color: var(--ink);
  cursor: pointer;
}

.top-size-steps {
  grid-template-columns: 1fr 1fr;
}

.top-size-steps button {
  font-size: 20px;
  font-weight: 900;
}

.top-tool,
.top-save {
  display: grid;
  place-items: center;
  min-width: 72px;
  height: 50px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 76%, #ffffff 8%), var(--accent));
  color: #fffdf8;
  cursor: pointer;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 8px 20px rgba(46, 196, 182, 0.16);
}

.top-tool {
  border-color: var(--line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--coral) 12%, var(--button-bg)), var(--button-bg));
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--soft-highlight);
}

.top-tool:hover,
.top-save:hover {
  transform: translateY(-1px);
  background: var(--button-hover);
  color: var(--ink);
}

.proof-toggle.recording {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 18%, var(--button-bg));
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(242, 95, 92, 0.16);
}

.file-select {
  appearance: auto;
  padding: 0 26px 0 12px;
}

.file-hidden-input {
  display: none;
}

.theme-toggle {
  min-width: 72px;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #7057ff 14%, var(--button-bg)), var(--button-bg));
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: var(--button-hover);
  border-color: var(--button-border);
}

.top-view-controls {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 34px minmax(48px, auto) 34px repeat(6, 34px);
  gap: 4px;
  align-items: center;
  min-height: 50px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  box-shadow: inset 0 1px 0 var(--soft-highlight);
  position: sticky;
  right: 0;
  z-index: 6;
}

.top-view-controls output {
  min-width: 48px;
  text-align: center;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.top-view-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, var(--button-bg)), var(--button-bg));
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.top-view-button:hover {
  transform: translateY(-1px);
  background: var(--button-hover);
  border-color: var(--button-border);
}

.top-view-button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--button-bg));
}

.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: block;
  padding: 18px;
  background: transparent;
  pointer-events: none;
}

.tour-backdrop[hidden] {
  display: none;
}

.tour-card {
  position: fixed;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  width: min(620px, calc(100vw - 28px));
  padding: 18px;
  border: 1px solid color-mix(in srgb, #ff8fab 36%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 191, 70, 0.26), transparent 32%),
    var(--panel-glass);
  box-shadow: 0 26px 70px rgba(23, 21, 29, 0.26);
  transition: left 220ms ease, top 220ms ease, transform 220ms ease;
  animation: tourHop 260ms ease both;
  pointer-events: auto;
}

.tour-card::before {
  content: "";
  position: absolute;
  left: 42px;
  top: -12px;
  width: 24px;
  height: 24px;
  border-left: 1px solid color-mix(in srgb, #ff8fab 36%, var(--line));
  border-top: 1px solid color-mix(in srgb, #ff8fab 36%, var(--line));
  background: var(--panel-glass);
  transform: rotate(45deg);
}

@keyframes tourHop {
  from {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.tour-highlight {
  position: relative;
  z-index: 45;
  outline: 3px solid #ffbf46;
  outline-offset: 5px;
  box-shadow: 0 0 0 10px rgba(255, 191, 70, 0.22), 0 0 34px rgba(255, 143, 171, 0.42) !important;
  animation: tourPulse 900ms ease-in-out infinite alternate;
}

@keyframes tourPulse {
  from {
    outline-offset: 4px;
  }
  to {
    outline-offset: 8px;
  }
}

.tour-mascot {
  display: grid;
  place-items: center;
  width: 120px;
  min-height: 132px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 65% 25%, rgba(255, 255, 255, 0.82), transparent 18%),
    linear-gradient(145deg, rgba(255, 191, 70, 0.34), rgba(255, 143, 171, 0.28));
  animation: starbyBob 1500ms ease-in-out infinite alternate;
}

@keyframes starbyBob {
  from {
    transform: rotate(-1deg) translateY(0);
  }
  to {
    transform: rotate(1deg) translateY(-4px);
  }
}

.tour-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.tour-kicker {
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tour-copy h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
}

.tour-copy p {
  font-size: 15px;
  line-height: 1.45;
}

.tour-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
}

.tour-actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.tour-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

#tourNext {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 76%, #ffffff 8%), var(--accent));
  color: #fffdf8;
}

.flow-backdrop {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(23, 21, 29, 0.12);
}

.flow-backdrop[hidden],
.flow-panel[hidden] {
  display: none;
}

.flow-orbit {
  position: relative;
  width: min(340px, calc(100vw - 36px));
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--panel-glass) 0 34%, transparent 35%),
    conic-gradient(from -18deg, rgba(46, 196, 182, 0.24), rgba(255, 191, 70, 0.26), rgba(242, 95, 92, 0.23), rgba(112, 87, 255, 0.24), rgba(46, 196, 182, 0.24));
  box-shadow: var(--shadow);
}

.flow-center,
.flow-choice {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-glass);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(31, 28, 42, 0.16);
}

.flow-center {
  inset: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
}

.flow-choice {
  width: 82px;
  height: 82px;
}

.flow-color { left: 50%; top: 3%; transform: translateX(-50%); }
.flow-canvas { right: 8%; top: 18%; }
.flow-export { right: 8%; bottom: 18%; }
.flow-layers { left: 50%; bottom: 3%; transform: translateX(-50%); }
.flow-brushes { left: 8%; bottom: 18%; }
.flow-focus { left: 8%; top: 18%; }

.flow-panel {
  position: fixed;
  z-index: 39;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  box-shadow: var(--shadow);
}

.flow-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.flow-panel-head h2,
.flow-panel-head p {
  margin: 0;
}

.flow-panel-head p {
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-panel-head button,
.flow-grid button,
#flowResizeCanvas,
#estimateExport,
#flowDownloadExport {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.flow-panel-body,
.flow-section {
  display: grid;
  gap: 12px;
}

.flow-section[hidden] {
  display: none;
}

.flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.flow-status {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.flow-status.warn {
  border-color: color-mix(in srgb, #ffbf46 62%, var(--line));
  background: color-mix(in srgb, #ffbf46 18%, var(--input-bg));
  color: var(--ink);
}

.flow-status.danger {
  border-color: color-mix(in srgb, var(--coral) 68%, var(--line));
  background: color-mix(in srgb, var(--coral) 16%, var(--input-bg));
  color: var(--ink);
}

.flow-section label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.flow-section label > span,
.flow-section label > output {
  color: var(--ink);
}

.flow-section input,
.flow-section select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  padding: 0 10px;
}

.flow-section input[type="range"] {
  min-height: auto;
  padding: 0;
}

.flow-check {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.flow-check input {
  width: 20px;
  min-height: 20px;
}

.export-presets button:nth-child(1) { border-color: rgba(46, 196, 182, 0.48); }
.export-presets button:nth-child(2) { border-color: rgba(255, 191, 70, 0.52); }
.export-presets button:nth-child(3) { border-color: rgba(112, 87, 255, 0.45); }
.export-presets button:nth-child(4) { border-color: rgba(242, 95, 92, 0.42); }
.export-presets button:nth-child(5) { border-color: rgba(34, 153, 84, 0.38); }
.export-presets button:nth-child(6) { border-color: rgba(13, 138, 188, 0.38); }

.export-estimate {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 76%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.flow-color-wheel {
  justify-self: center;
  width: min(220px, 70vw);
  aspect-ratio: 1;
  border: 8px solid var(--button-bg);
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 8%, transparent 9%),
    conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  cursor: crosshair;
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px rgba(31, 28, 42, 0.14);
}

.flow-hex-readout {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.flow-hex-readout span {
  width: 42px;
  height: 42px;
  border: 1px solid var(--button-border);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.flow-hex-readout output {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.flow-adjust {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--input-bg) 86%, transparent);
}

.flow-adjust button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.flow-adjust-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.flow-preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.flow-preset-row button {
  min-height: 34px;
  font-size: 12px;
}

.flow-adjust-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.flow-adjust-actions button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 24%, var(--button-bg));
}

.flow-grid button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 26%, var(--button-bg));
}

body.focus-mode .tool-rail,
body.focus-mode .settings-panel,
body.focus-mode .panel-splitter {
  display: none;
}

body.focus-mode .app-shell {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

body.focus-mode .stage-wrap {
  gap: 0;
}

body.focus-mode .top-bar {
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  min-height: 56px;
  border-radius: 0;
}

body.focus-mode .brand h1 {
  font-size: 18px;
}

body.focus-mode .file-actions {
  gap: 5px;
}

.focus-dock {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: 14px;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(44px, auto));
  justify-content: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-glass) 92%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.1);
  transform: translateX(-50%);
}

body.focus-mode .focus-dock {
  display: grid;
}

.focus-dock button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--button-border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.focus-dock button.active,
.focus-dock button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 24%, var(--button-bg));
}

body.large-touch-targets .focus-dock button {
  min-width: 54px;
  min-height: 52px;
}

body.large-touch-targets .focus-dock {
  grid-template-columns: repeat(auto-fit, minmax(54px, auto));
  gap: 8px;
  max-width: min(720px, calc(100% - 20px));
}

body.large-touch-targets .tool,
body.large-touch-targets .icon-button {
  width: 58px;
  height: 58px;
}

body.large-touch-targets button,
body.large-touch-targets select,
body.large-touch-targets input {
  min-height: 48px;
}

body.large-touch-targets .top-tool,
body.large-touch-targets .top-save,
body.large-touch-targets .theme-toggle,
body.large-touch-targets .top-color-chip,
body.large-touch-targets .top-size-chip {
  min-width: 54px;
  min-height: 54px;
}

body.large-touch-targets .top-view-button {
  width: 42px;
  height: 42px;
}

body.large-touch-targets .top-view-controls {
  grid-template-columns: 42px minmax(54px, auto) 42px repeat(6, 42px);
}

body.large-touch-targets .top-quick-popover {
  min-width: min(360px, calc(100vw - 24px));
}

body.large-touch-targets .top-quick-swatches button,
body.large-touch-targets .puck-swatches button,
body.large-touch-targets .swatch,
body.large-touch-targets .recent-color,
body.large-touch-targets #color,
body.large-touch-targets .palette-pipette {
  width: 38px;
  min-height: 38px;
}

body.large-touch-targets .swatch-row,
body.large-touch-targets .recent-colors {
  grid-template-columns: repeat(auto-fill, 38px);
  gap: 8px;
}

body.large-touch-targets .panel-tab {
  min-height: 54px;
  font-size: 14px;
}

body.large-touch-targets .section-jump select {
  min-height: 50px;
  font-size: 13px;
}

body.large-touch-targets .component-tray {
  scroll-padding-block: 12px;
}

body.large-touch-targets .layer-row {
  grid-template-columns: 58px 62px minmax(0, 1fr) auto;
  min-height: 78px;
  padding: 9px;
}

body.large-touch-targets .visibility-toggle {
  width: 58px;
  height: 44px;
}

body.large-touch-targets .layer-thumb {
  width: 62px;
  height: 48px;
}

body.large-touch-targets .layer-group-header {
  min-height: 46px;
}

body.large-touch-targets .layer-group-header button,
body.large-touch-targets .layer-blend-quick button,
body.large-touch-targets .layer-preset-actions button,
body.large-touch-targets .group-presets button,
body.large-touch-targets .stack-presets button,
body.large-touch-targets .group-stack-presets button,
body.large-touch-targets .stamp-item-actions button {
  min-height: 44px;
}

body.large-touch-targets .tool-mini-menu {
  grid-template-columns: repeat(2, minmax(92px, auto));
  gap: 8px;
  max-width: min(270px, calc(100vw - 20px));
  padding: 10px;
}

body.large-touch-targets .tool-mini-menu button {
  min-width: 92px;
  min-height: 48px;
  font-size: 12px;
}

body.large-touch-targets .comfort-puck {
  gap: 10px;
  padding: 10px;
}

body.large-touch-targets .puck-handle,
body.large-touch-targets .puck-eyedrop,
body.large-touch-targets .puck-step,
body.large-touch-targets .puck-close {
  min-height: 44px;
}

body.large-touch-targets .comfort-puck input[type="color"] {
  width: 52px;
  min-height: 44px;
}

body.large-touch-targets .app-shell {
  grid-template-columns: 82px minmax(0, 1fr) 10px var(--studio-width, 312px);
}

body.left-handed.large-touch-targets .app-shell {
  grid-template-columns: var(--studio-width, 312px) 10px minmax(0, 1fr) 82px;
}

body.large-touch-targets .app-shell.panel-floating {
  grid-template-columns: 82px minmax(0, 1fr);
}

body.left-handed.large-touch-targets .app-shell.panel-floating {
  grid-template-columns: minmax(0, 1fr) 82px;
}

.file-pick input {
  display: none;
}

.canvas-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(45deg, var(--checker-mark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-mark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-mark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-mark) 75%);
  background-color: var(--checker-bg);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 29, 0.2);
}

.canvas-frame.image-drop-ready {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--accent) 72%, white),
    inset 0 0 0 999px color-mix(in srgb, var(--accent) 16%, transparent);
}

.drop-image-hint {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.drop-image-hint[hidden] {
  display: none;
}

.comfort-puck {
  position: absolute;
  z-index: 8;
  left: 24px;
  top: 132px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background: var(--panel-glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.1);
  touch-action: none;
}

.comfort-puck[hidden] {
  display: none;
}

.reference-view {
  position: absolute;
  z-index: 14;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(280px, calc(100% - 36px));
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: var(--panel-glass);
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.1);
  touch-action: none;
}

.reference-view[hidden] {
  display: none;
}

.reference-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  color: var(--muted);
  cursor: grab;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.reference-view-head:active {
  cursor: grabbing;
}

.reference-view-head button {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.reference-view canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(45deg, var(--checker-mark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-mark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-mark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-mark) 75%);
  background-color: var(--checker-bg);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  cursor: grab;
}

.reference-view canvas:active {
  cursor: grabbing;
}

.reference-view-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
}

.reference-zoom-actions {
  display: grid;
  grid-template-columns: 34px minmax(52px, 1fr) 34px auto;
  align-items: center;
  gap: 6px;
}

.reference-view-actions button,
.reference-zoom-actions button,
.reference-load-button {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--button-border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.reference-zoom-actions output {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.reference-view-actions button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--button-bg));
}

.reference-view-actions input {
  display: none;
}

.size-puck {
  top: 208px;
  grid-template-columns: auto 34px 42px minmax(96px, 1fr) 34px 34px;
  min-width: min(360px, calc(100% - 20px));
}

.puck-handle,
.puck-eyedrop,
.puck-step,
.puck-close {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--button-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, var(--button-bg));
  color: var(--ink);
  cursor: grab;
  font-size: 12px;
  font-weight: 900;
}

.puck-eyedrop,
.puck-step,
.puck-close {
  cursor: pointer;
}

.puck-close {
  width: 34px;
  padding: 0;
  color: var(--coral);
}

.puck-swatches {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.puck-swatches button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, var(--ink) 14%);
  border-radius: 8px;
  background: var(--swatch);
  cursor: pointer;
}

.puck-swatches button.active {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 1px;
}

.comfort-puck input[type="color"] {
  width: 44px;
  min-height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.comfort-puck output {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: none;
  background: var(--paper);
  box-shadow: 0 22px 64px rgba(31, 28, 42, 0.25);
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  transform-origin: center center;
}

.reference-view canvas {
  position: static;
  left: auto;
  top: auto;
  max-width: 100%;
  box-shadow: none;
  transform: none;
}

.selection-overlay {
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.cursor-preview {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--cursor-color, rgba(23, 21, 29, 0.75));
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle, var(--cursor-fill, transparent) 0 34%, transparent 36%),
    radial-gradient(circle, transparent var(--cursor-hardness, 52%), var(--cursor-soft, rgba(23, 21, 29, 0.12)) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.68),
    0 0 var(--cursor-glow, 0) var(--cursor-color, rgba(23, 21, 29, 0.35));
  z-index: 7;
}

.cursor-preview::before,
.cursor-preview::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.cursor-preview::before {
  inset: var(--cursor-inner, 24%);
  border: 1px solid var(--cursor-color, rgba(23, 21, 29, 0.55));
  border-radius: inherit;
  opacity: var(--cursor-inner-opacity, 0);
}

.cursor-preview::after {
  left: 50%;
  top: calc(100% + 6px);
  min-width: max-content;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  transform: translateX(-50%);
  opacity: var(--cursor-label-opacity, 0);
  content: attr(data-cursor);
}

.cursor-preview.cursor-brush {
  --cursor-color: #2ec4b6;
}

.cursor-preview.cursor-eraser {
  --cursor-color: #ff8fab;
  --cursor-fill: rgba(255, 143, 171, 0.16);
  --cursor-inner-opacity: 0.82;
  border-style: dashed;
}

.cursor-preview.cursor-smudge {
  --cursor-color: #8b5cf6;
  --cursor-fill: rgba(139, 92, 246, 0.12);
  --cursor-inner-opacity: 0.78;
  --cursor-glow: 10px;
}

.cursor-preview.cursor-liquify {
  --cursor-color: #4dabf7;
  --cursor-fill: rgba(77, 171, 247, 0.1);
  --cursor-inner-opacity: 0.9;
  --cursor-label-opacity: 1;
}

.cursor-preview.cursor-select,
.cursor-preview.cursor-shape {
  --cursor-color: #7057ff;
  --cursor-inner-opacity: 0;
  border-radius: 8px;
}

.cursor-preview.cursor-tip-square {
  border-radius: 5px;
}

.cursor-preview.cursor-tip-bristle {
  --cursor-color: #7c4a28;
  --cursor-fill: rgba(124, 74, 40, 0.1);
  border-radius: 44% 56% 48% 52%;
}

.cursor-preview.cursor-tip-bristle::before {
  inset: 18%;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 18%, var(--cursor-color, #7c4a28) 20% 24%, transparent 26% 42%, var(--cursor-color, #7c4a28) 44% 48%, transparent 50% 68%, var(--cursor-color, #7c4a28) 70% 74%, transparent 76%),
    linear-gradient(0deg, transparent 0 28%, rgba(255, 255, 255, 0.42) 30% 34%, transparent 36%);
  opacity: 0.72;
}

.cursor-preview.cursor-tip-rake {
  --cursor-color: #8a5a44;
  --cursor-fill: rgba(138, 90, 68, 0.1);
  border-radius: 32% / 48%;
}

.cursor-preview.cursor-tip-rake::before {
  inset: 14% 18%;
  border: 0;
  background:
    linear-gradient(90deg, var(--cursor-color, #8a5a44) 0 8%, transparent 10% 22%, var(--cursor-color, #8a5a44) 24% 32%, transparent 34% 46%, var(--cursor-color, #8a5a44) 48% 56%, transparent 58% 70%, var(--cursor-color, #8a5a44) 72% 80%, transparent 82%);
  opacity: 0.72;
}

.cursor-preview.cursor-tip-fan {
  --cursor-color: #b56576;
  --cursor-fill: rgba(181, 101, 118, 0.1);
  border-radius: 76% 76% 28% 28%;
}

.cursor-preview.cursor-tip-fan::before {
  inset: 15% 16%;
  border: 0;
  background:
    linear-gradient(68deg, transparent 0 44%, var(--cursor-color, #b56576) 46% 50%, transparent 52%),
    linear-gradient(90deg, transparent 0 44%, var(--cursor-color, #b56576) 46% 50%, transparent 52%),
    linear-gradient(112deg, transparent 0 44%, var(--cursor-color, #b56576) 46% 50%, transparent 52%);
  opacity: 0.68;
}

.cursor-preview.cursor-tip-cloud {
  --cursor-color: #6ecbff;
  --cursor-fill: rgba(110, 203, 255, 0.16);
  --cursor-glow: 12px;
  border-style: dotted;
}

.cursor-preview.cursor-tip-cloud::before {
  inset: 15%;
  border: 0;
  background:
    radial-gradient(circle at 30% 54%, var(--cursor-color, #6ecbff) 0 13%, transparent 15%),
    radial-gradient(circle at 50% 36%, var(--cursor-color, #6ecbff) 0 16%, transparent 18%),
    radial-gradient(circle at 70% 56%, var(--cursor-color, #6ecbff) 0 12%, transparent 14%);
  opacity: 0.46;
}

.cursor-preview.cursor-tip-splatter {
  --cursor-color: #e85d75;
  --cursor-fill: rgba(232, 93, 117, 0.08);
  border-style: dashed;
}

.cursor-preview.cursor-tip-splatter::before {
  inset: 8%;
  border: 0;
  background:
    radial-gradient(circle at 32% 35%, var(--cursor-color, #e85d75) 0 6%, transparent 8%),
    radial-gradient(circle at 63% 28%, var(--cursor-color, #e85d75) 0 4%, transparent 6%),
    radial-gradient(circle at 72% 65%, var(--cursor-color, #e85d75) 0 7%, transparent 9%),
    radial-gradient(circle at 42% 72%, var(--cursor-color, #e85d75) 0 3%, transparent 5%);
  opacity: 0.74;
}

.cursor-preview.cursor-tip-halftone {
  --cursor-color: #212529;
  --cursor-fill: rgba(33, 37, 41, 0.08);
}

.cursor-preview.cursor-tip-halftone::before {
  inset: 14%;
  border: 0;
  background-image: radial-gradient(circle, var(--cursor-color, #212529) 0 18%, transparent 20%);
  background-size: 5px 5px;
  opacity: 0.38;
}

.cursor-preview.cursor-tip-scratch {
  border-radius: 45% 12% 45% 12%;
}

.cursor-preview.cursor-tip-grain {
  --cursor-color: #6c584c;
  --cursor-fill: rgba(108, 88, 76, 0.08);
  border-style: dotted;
}

.cursor-preview.cursor-tip-grain::before {
  inset: 9%;
  border: 0;
  background-image: radial-gradient(circle, var(--cursor-color, #6c584c) 0 12%, transparent 14%);
  background-size: 4px 5px;
  opacity: 0.42;
}

.cursor-preview.cursor-tip-flat {
  --cursor-color: #2f6f73;
  --cursor-fill: rgba(46, 196, 182, 0.12);
  border-radius: 24% / 42%;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.cursor-preview.cursor-tip-flat::before {
  inset: 37% 10%;
  border: 0;
  border-radius: 999px;
  background: var(--cursor-color, #2f6f73);
  opacity: 0.54;
}

.cursor-preview.cursor-tip-leaf {
  --cursor-color: #0ead69;
  --cursor-fill: rgba(14, 173, 105, 0.12);
  border-radius: 70% 12% 70% 12%;
  transform: translate(-50%, -50%) rotate(-34deg);
}

.cursor-preview.cursor-tip-leaf::before {
  inset: 18%;
  border: 0;
  border-radius: 70% 12% 70% 12%;
  background: linear-gradient(135deg, transparent 0 48%, var(--cursor-color, #0ead69) 50% 54%, transparent 56%);
  opacity: 0.72;
}

.cursor-preview.cursor-tip-sparkle {
  border-radius: 30% 70% 34% 66%;
}

.cursor-preview.cursor-tip-decor {
  --cursor-color: #c77dff;
  --cursor-fill: rgba(199, 125, 255, 0.11);
  border-radius: 34% 66% 38% 62%;
  border-style: dashed;
}

.cursor-preview.cursor-tip-decor::before {
  inset: 16%;
  border: 0;
  background:
    radial-gradient(circle at 26% 50%, var(--cursor-color, #c77dff) 0 10%, transparent 12%),
    radial-gradient(circle at 50% 50%, var(--cursor-color, #c77dff) 0 11%, transparent 13%),
    radial-gradient(circle at 74% 50%, var(--cursor-color, #c77dff) 0 10%, transparent 12%),
    linear-gradient(90deg, transparent 0 16%, var(--cursor-color, #c77dff) 18% 82%, transparent 84%);
  opacity: 0.54;
}

.cursor-preview.cursor-tip-strand {
  --cursor-color: #15131b;
  --cursor-fill: rgba(21, 19, 27, 0.08);
  border-radius: 42% 58% 46% 54%;
}

.cursor-preview.cursor-tip-strand::before {
  inset: 15%;
  border: 0;
  background:
    linear-gradient(96deg, transparent 0 15%, var(--cursor-color, #15131b) 17% 20%, transparent 22% 36%, var(--cursor-color, #15131b) 38% 41%, transparent 43% 58%, var(--cursor-color, #15131b) 60% 63%, transparent 65%),
    linear-gradient(78deg, transparent 0 24%, rgba(255, 255, 255, 0.5) 26% 30%, transparent 32%);
  opacity: 0.72;
}

.cursor-preview.cursor-tip-scale {
  --cursor-color: #0ead69;
  --cursor-fill: rgba(14, 173, 105, 0.1);
  border-radius: 50%;
}

.cursor-preview.cursor-tip-scale::before {
  inset: 12%;
  border: 0;
  background:
    radial-gradient(ellipse at 28% 36%, transparent 0 32%, var(--cursor-color, #0ead69) 34% 38%, transparent 40%),
    radial-gradient(ellipse at 58% 38%, transparent 0 32%, var(--cursor-color, #0ead69) 34% 38%, transparent 40%),
    radial-gradient(ellipse at 43% 66%, transparent 0 32%, var(--cursor-color, #0ead69) 34% 38%, transparent 40%);
  opacity: 0.78;
}

.cursor-preview.cursor-tip-petal {
  --cursor-color: #ff8fab;
  --cursor-fill: rgba(255, 143, 171, 0.12);
  border-radius: 70% 18% 68% 20%;
}

.cursor-preview.cursor-tip-petal::before {
  inset: 12%;
  border: 0;
  background:
    radial-gradient(ellipse at 36% 54%, var(--cursor-color, #ff8fab) 0 15%, transparent 17%),
    radial-gradient(ellipse at 57% 42%, var(--cursor-color, #ff8fab) 0 17%, transparent 19%),
    radial-gradient(ellipse at 66% 66%, var(--cursor-color, #ff8fab) 0 13%, transparent 15%);
  opacity: 0.58;
}

.cursor-preview.cursor-tip-lace {
  --cursor-color: #c77dff;
  --cursor-fill: rgba(199, 125, 255, 0.08);
  border-style: dashed;
}

.cursor-preview.cursor-tip-lace::before {
  inset: 12%;
  border: 0;
  background:
    radial-gradient(circle at 25% 50%, transparent 0 17%, var(--cursor-color, #c77dff) 19% 23%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 0 17%, var(--cursor-color, #c77dff) 19% 23%, transparent 25%),
    radial-gradient(circle at 75% 50%, transparent 0 17%, var(--cursor-color, #c77dff) 19% 23%, transparent 25%);
  opacity: 0.74;
}

.cursor-preview.cursor-tip-chain {
  --cursor-color: #ffbf46;
  --cursor-fill: rgba(255, 191, 70, 0.1);
  border-radius: 38% 62% 38% 62%;
}

.cursor-preview.cursor-tip-chain::before {
  inset: 12%;
  border: 0;
  background:
    radial-gradient(ellipse at 34% 48%, transparent 0 20%, var(--cursor-color, #ffbf46) 22% 28%, transparent 30%),
    radial-gradient(ellipse at 64% 52%, transparent 0 20%, var(--cursor-color, #ffbf46) 22% 28%, transparent 30%);
  opacity: 0.78;
}

.cursor-preview.cursor-tip-imported {
  --cursor-color: #5f3dc4;
  --cursor-fill: rgba(95, 61, 196, 0.1);
  border-style: double;
  border-radius: 30% 70% 42% 58%;
}

.cursor-preview.cursor-tip-imported::before {
  inset: 14%;
  border: 0;
  background:
    linear-gradient(135deg, transparent 0 46%, var(--cursor-color, #5f3dc4) 48% 52%, transparent 54%),
    radial-gradient(circle at 35% 38%, var(--cursor-color, #5f3dc4) 0 10%, transparent 12%),
    radial-gradient(circle at 67% 66%, var(--cursor-color, #5f3dc4) 0 12%, transparent 14%);
  opacity: 0.56;
}

.cursor-preview.cursor-liquify-line-push {
  --cursor-color: #00a6fb;
}

.cursor-preview.cursor-liquify-line-push::before,
.cursor-preview.cursor-liquify-push::before {
  inset: 16% 10%;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 16%, var(--cursor-color, #4dabf7) 18% 54%, transparent 56%),
    linear-gradient(45deg, transparent 0 48%, var(--cursor-color, #4dabf7) 50% 55%, transparent 57%),
    linear-gradient(-45deg, transparent 0 48%, var(--cursor-color, #4dabf7) 50% 55%, transparent 57%);
  opacity: 0.62;
}

.cursor-preview.cursor-liquify-pinch::before {
  inset: 15%;
  border-color: var(--cursor-color, #4dabf7);
  box-shadow:
    -5px 0 0 -3px var(--cursor-color, #4dabf7),
    5px 0 0 -3px var(--cursor-color, #4dabf7);
  opacity: 0.7;
}

.cursor-preview.cursor-liquify-bloat::before {
  inset: 31%;
  border-color: var(--cursor-color, #4dabf7);
  box-shadow: 0 0 0 5px rgba(77, 171, 247, 0.18);
  opacity: 0.82;
}

.cursor-preview.cursor-liquify-twirl::before {
  inset: 18%;
  border: 2px solid transparent;
  border-top-color: var(--cursor-color, #4dabf7);
  border-right-color: var(--cursor-color, #4dabf7);
  border-radius: 50%;
  opacity: 0.72;
}

.cursor-preview.cursor-liquify-smooth::before {
  inset: 17%;
  border: 0;
  background:
    linear-gradient(90deg, transparent 0 15%, var(--cursor-color, #4dabf7) 18% 82%, transparent 85%),
    linear-gradient(0deg, transparent 0 28%, rgba(77, 171, 247, 0.32) 30% 35%, transparent 37% 58%, rgba(77, 171, 247, 0.32) 60% 65%, transparent 67%);
  opacity: 0.72;
}

.cursor-preview.cursor-liquify-ripple::before {
  inset: 10%;
  border: 0;
  background:
    radial-gradient(circle, transparent 0 31%, var(--cursor-color, #4dabf7) 33% 36%, transparent 38% 55%, var(--cursor-color, #4dabf7) 57% 60%, transparent 62%);
  opacity: 0.58;
}

.selection-box {
  position: absolute;
  border: 2px dashed var(--selection-stroke);
  background: var(--selection-fill);
  box-shadow: 0 0 0 1px rgba(255, 250, 240, 0.85), inset 0 0 0 1px rgba(255, 250, 240, 0.85);
  pointer-events: none;
}

.transform-float {
  position: absolute;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  box-shadow: 0 14px 38px rgba(23, 21, 29, 0.24);
  transform: translate(-50%, -100%);
  pointer-events: auto;
}

.transform-float[hidden] {
  display: none;
}

.transform-float button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.transform-float button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.trace-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.settings-panel {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: auto;
  padding: 14px;
  border-radius: 8px;
  min-width: 260px;
}

.settings-panel.floating {
  position: fixed;
  z-index: 18;
  left: calc(100vw - 340px);
  top: 84px;
  width: 320px;
  height: min(720px, calc(100vh - 108px));
  height: min(720px, calc(100dvh - 108px));
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
}

.app-shell.panel-floating .panel-splitter {
  display: none;
}

.settings-panel.floating .panel-resize-handle {
  display: grid;
}

.panel-resize-handle {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  place-items: center;
  width: 54px;
  height: 54px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 8px 0 8px 0;
  background: var(--button-bg);
  color: var(--muted);
  cursor: nwse-resize;
  touch-action: none;
  font-size: 12px;
  font-weight: 900;
}

.panel-resize-handle::before {
  content: "";
  width: 22px;
  height: 22px;
  background:
    linear-gradient(135deg, transparent 0 48%, currentColor 49% 53%, transparent 54%),
    linear-gradient(135deg, transparent 0 62%, currentColor 63% 67%, transparent 68%),
    linear-gradient(135deg, transparent 0 76%, currentColor 77% 81%, transparent 82%);
}

.panel-dock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: grab;
  touch-action: none;
}

.panel-dock-bar:active {
  cursor: grabbing;
}

.panel-dock-bar div {
  display: flex;
  gap: 6px;
}

.panel-dock-bar button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
}

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-items: start;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--input-bg) 78%, transparent);
}

.panel-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.panel-tab.active {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #ffffff 8%), var(--accent));
  color: #fffdf8;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow: 0 8px 18px rgba(46, 196, 182, 0.18);
}

.tab-panel {
  display: none;
  min-height: 0;
}

.tab-panel.active {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}

.section-jump {
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--input-bg));
}

.section-jump[data-section-jump-panel="brush"] {
  grid-column: 1;
}

.section-jump[data-section-jump-panel="layers"] {
  grid-column: 2;
}

.section-jump[data-section-jump-panel="canvas"] {
  grid-column: 3;
}

.section-jump[data-section-jump-panel="render"] {
  grid-column: 4;
}

.section-jump:not(.active) {
  display: none;
}

.section-jump.active {
  display: grid;
}

.section-jump.hover-open {
  z-index: 14;
  box-shadow: 0 12px 24px rgba(21, 19, 27, 0.16);
}

.section-jump span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.section-jump select {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.section-jump.hover-open select {
  min-height: min(260px, 42vh);
}

.section-jump-highlight {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.component-tray {
  position: relative;
  min-height: 56px;
  max-height: none;
  overflow: auto;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.component-tray.section-hidden {
  display: none !important;
}

.component-tray > .section-head {
  grid-column: 1 / -1;
}

.tray-resize-handle {
  display: none;
}

.panel-resize-handle:hover {
  background: var(--button-hover);
  color: var(--ink);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head h2 {
  margin: 0;
  font-size: 14px;
}

.section-head button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
}

.mini-actions {
  display: flex;
  gap: 6px;
}

.symmetry-center-actions {
  flex-wrap: wrap;
}

.symmetry-center-actions button.active {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.brush-panel {
  display: grid;
  gap: 10px;
  min-height: 112px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.brush-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-height: none;
  overflow: auto;
}

.brush-family-card {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 78%, var(--input-bg));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.brush-family-card span {
  font-size: 13px;
  font-weight: 900;
}

.brush-family-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.brush-family-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--button-hover));
  box-shadow: inset 3px 0 0 var(--accent);
}

.brush-family-heading {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.favorite-brush-panel,
.secret-brush-panel {
  display: grid;
  gap: 10px;
  min-height: 96px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.secret-brush-panel {
  border-color: color-mix(in srgb, #ffbf46 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, #7057ff 14%, transparent), transparent 48%),
    linear-gradient(315deg, color-mix(in srgb, #2ec4b6 16%, transparent), transparent 48%),
    var(--input-bg);
}

.secret-brush-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.secret-brush-panel button {
  border-color: color-mix(in srgb, #ffbf46 54%, var(--line));
  background: color-mix(in srgb, #ffbf46 18%, var(--button-bg));
}

.favorite-brush-list {
  display: grid;
  gap: 8px;
}

.brush-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.brush-library-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.brush-reset-filter {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.brush-library-tools {
  display: grid;
  gap: 10px;
}

.brush-library-tools input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.brush-pack-filter {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.brush-pack-filter select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-weight: 900;
}

.brush-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brush-filter-row button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.brush-filter-row button.active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: var(--accent);
  color: #fffdf8;
}

.brush-library-list .brush-preset {
  min-height: 74px;
}

.brush-preset {
  display: grid;
  gap: 4px;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.brush-mini-preview,
.active-brush-preview canvas {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background: var(--input-bg);
  box-shadow: inset 0 1px 0 var(--soft-highlight);
}

.brush-mini-preview {
  height: 34px;
}

.active-brush-preview {
  overflow: hidden;
  border-radius: 8px;
}

.active-brush-preview canvas {
  display: block;
  height: auto;
}

.brush-preset.active {
  border-color: var(--accent);
  background: var(--button-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.brush-preset.rich {
  grid-template-columns: minmax(0, 1fr) auto;
}

.brush-preset.rich .brush-meta,
.brush-preset.rich .brush-tags {
  grid-column: 1 / -1;
}

.brush-favorite {
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffbf46 22%, var(--button-bg));
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.brush-favorite.active {
  background: #ffbf46;
  color: #17151d;
}

.brush-tags {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.brush-empty {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

.brush-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brush-meta {
  color: var(--muted);
  font-size: 11px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 21, 29, 0.38);
}

.modal-backdrop[hidden] {
  display: none;
}

.proof-confirm-backdrop {
  z-index: 42;
  background: rgba(23, 21, 29, 0.5);
}

.brush-modal,
.brush-library-modal,
.hotkeys-modal,
.new-project-modal,
.ocr-modal,
.pdf-modal,
.proof-confirm-modal,
.proof-modal,
.text-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(620px, 100%);
  max-height: min(720px, 92vh);
  max-height: min(720px, 92dvh);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(23, 21, 29, 0.34);
}

.brush-modal {
  overflow: hidden;
}

.proof-confirm-modal {
  grid-template-rows: auto auto;
  width: min(420px, 100%);
  max-height: none;
}

.proof-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.proof-confirm-actions button.danger {
  border-color: var(--coral);
  background: var(--coral);
  color: #fffaf0;
}

.brush-modal .wizard-step.active {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.brush-library-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, 100%);
}

.hotkeys-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, 100%);
}

.hotkey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hotkey-grid div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.hotkey-row.listening {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.hotkey-grid kbd {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--button-bg);
  color: var(--ink);
  font: 900 13px/1 var(--font);
}

.hotkey-grid span,
.hotkey-capture,
.hotkeys-tip {
  font-size: 12px;
  font-weight: 800;
}

.hotkey-grid button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.hotkey-capture {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--muted);
}

.hotkeys-tip {
  margin: 0;
  color: var(--muted);
}

.proof-modal {
  grid-template-rows: auto auto auto auto auto auto auto;
  width: min(560px, 100%);
}

.ocr-modal {
  grid-template-rows: auto minmax(180px, 1fr) auto;
  width: min(620px, 100%);
}

.pdf-modal {
  grid-template-rows: auto auto auto auto;
  width: min(520px, 100%);
}

.pdf-page-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.pdf-page-controls button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.pdf-page-count {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ocr-modal textarea {
  width: 100%;
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  resize: vertical;
  font: 700 13px/1.5 var(--font);
}

.new-project-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(560px, 100%);
}

.text-modal {
  grid-template-rows: auto minmax(140px, 1fr) auto;
  width: min(520px, 100%);
}

.text-modal textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
}

.new-project-grid {
  display: grid;
  gap: 12px;
}

.size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.new-project-presets,
.recent-size-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.new-project-presets button,
.recent-size-list button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 850;
}

.new-project-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.confirm-new-project {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--coral) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--coral) 10%, var(--input-bg));
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.modal-head h2,
.wizard-step h3 {
  margin: 0;
}

.modal-head h2 {
  font-size: 22px;
}

.modal-head p,
.proof-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.proof-clock {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.proof-clock strong {
  color: var(--coral);
  font-size: 42px;
  line-height: 1;
}

.proof-clock span,
.proof-stats {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.proof-meter {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: var(--progress-bg);
}

.proof-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--sun), var(--coral));
  transition: width 180ms ease;
}

.proof-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.proof-settings {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 10px;
}

.proof-preset-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.proof-preset-row button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
}

.proof-preset-row button:hover,
.proof-preset-row button:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--button-hover));
}

.proof-settings label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.proof-settings select,
.proof-settings input {
  min-height: 38px;
}

.proof-settings select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.proof-badge-toggle,
.proof-badge-text {
  grid-column: 1 / -1;
}

.proof-badge-text input {
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-weight: 800;
}

.proof-replay {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.proof-replay canvas {
  position: static;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffdf8;
  box-shadow: none;
  transform: none;
}

.proof-scrub,
.proof-export-panel {
  display: grid;
  gap: 8px;
}

.proof-scrub output,
.proof-export-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.proof-replay-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.proof-export-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
}

.proof-export-panel label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.proof-export-panel select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.proof-export-panel p {
  grid-column: 1 / -1;
}

.proof-replay-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.proof-export-panel button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background: var(--accent);
  color: var(--active-text);
  cursor: pointer;
  font-weight: 900;
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.wizard-progress span {
  height: 6px;
  border-radius: 999px;
  background: var(--progress-bg);
}

.wizard-progress span.active {
  background: var(--accent);
}

.wizard-step {
  display: none;
  gap: 14px;
}

.wizard-step.active {
  display: grid;
}

.wizard-step input[type="text"],
.wizard-step select,
.wizard-step input[type="file"],
#colorHex {
  grid-column: 1 / -1;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.wizard-step input[type="file"] {
  padding: 10px;
}

.file-row {
  align-items: center;
}

.tip-image-tools {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-wash);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tip-image-tools button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--button-bg);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.image-tip-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-tip-options .check-row {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-wash);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.choice-grid button,
.modal-actions button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
}

.choice-grid button.active,
.choice-grid button:hover,
.modal-actions button:hover {
  background: var(--button-hover);
  border-color: var(--accent);
}

.creator-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.creator-preview canvas {
  position: static;
  width: 100%;
  height: auto;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
}

.brush-modal > .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -16px -16px;
  padding: 10px 16px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.proof-actions {
  position: sticky;
  bottom: -16px;
  z-index: 3;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 -16px -16px;
  padding: 10px 16px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.text-actions {
  grid-template-columns: 1fr 1.4fr;
}

@media (max-width: 560px) {
  .proof-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.brush-library-actions {
  grid-template-columns: 1fr 1fr;
}

.color-tray {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.color-tray-head {
  display: grid;
  grid-template-columns: auto 34px 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 26px);
  gap: 6px;
}

.recent-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, 26px);
  gap: 6px;
}

.palette-tools,
.harmony-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.palette-tools input,
.palette-tools select,
#layerBlendMode {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.layer-blend-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.layer-preset-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.layer-blend-quick button,
.layer-preset-actions button {
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--button-bg)), var(--button-bg));
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.layer-preset-actions button {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--coral) 9%, var(--button-bg)), var(--button-bg));
}

.layer-blend-quick button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--button-hover));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.layer-mode-hint {
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.palette-tools select {
  grid-column: 1 / -1;
}

.swatch,
.recent-color,
#color,
.palette-pipette {
  width: 26px;
  aspect-ratio: 1;
  min-height: 26px;
  border: 1px solid var(--button-border);
  border-radius: 5px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.swatch.active,
.recent-color.active,
.palette-pipette.active,
#color:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.palette-pipette {
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--button-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

#color {
  padding: 0;
  overflow: hidden;
}

#colorHex {
  min-height: 34px;
  padding: 0 10px;
}

label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--accent);
}

.toggle-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.toggle-line input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.pressure-curve-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.smudge-control-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: var(--input-bg);
}

.pressure-curve-panel.compact {
  padding: 8px;
}

.pressure-curve-head {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.pressure-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.pressure-preset-row button {
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.pressure-preset-row button:hover {
  background: var(--button-hover);
}

.stylus-status {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.canvas-actions,
.shape-actions,
.selection-actions,
.nudge-pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.canvas-actions,
.shape-actions,
.selection-actions {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.canvas-actions {
  grid-template-columns: 1fr 1fr;
}

.shape-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comic-panel .shape-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-presets,
.stack-presets,
.group-stack-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.stack-presets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-stack-presets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
}

.group-presets button.active {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.snapshot-info {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 72%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.project-safety {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.project-safety input[type="text"] {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.autosave-warning {
  border-color: color-mix(in srgb, #ffbf46 58%, var(--line));
  background: color-mix(in srgb, #ffbf46 15%, var(--button-bg));
  color: var(--ink);
}

.comic-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.comic-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 42%, transparent);
}

.bubble-tail-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 42%, transparent);
}

.bubble-tail-pad button:first-child,
.bubble-tail-pad button:last-child {
  grid-column: 2;
}

.trace-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trace-presets button:first-child {
  grid-column: 1 / -1;
}

.transform-panel,
.symmetry-panel,
.liquify-panel,
.trace-panel,
.text-panel,
.comic-panel,
.gradient-panel,
.pattern-panel,
.outline-panel,
.stamp-panel,
.view-position-panel,
.bucket-options,
.render-assist,
.canvas-size-panel,
.upscale-panel,
.animation-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.compact-head h2 {
  font-size: 13px;
}

.nudge-pad {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.view-nudge-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.view-nudge-pad button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.view-nudge-pad button:first-child,
.view-nudge-pad button:last-child {
  grid-column: 2;
}

.transform-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-actions #download,
.canvas-actions #downloadTransparent,
.canvas-actions #downloadJpeg,
.canvas-actions #downloadWebp {
  grid-column: 1 / -1;
}

.canvas-actions button,
.shape-actions button,
.comic-edit-actions button,
.bubble-tail-pad button,
.group-presets button,
.comic-presets button,
.trace-presets button,
.bucket-options button,
.render-assist button,
.gradient-panel button,
.pattern-panel button,
.outline-panel button,
.stamp-panel button,
.animation-panel button,
.selection-actions button,
.transform-panel button,
.symmetry-panel button,
.liquify-panel button,
.trace-panel button,
.canvas-size-panel button,
.harmony-tools button,
.palette-tools button,
.layer-actions button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
}

.shape-actions button.active {
  background: var(--ink);
  color: var(--active-text);
  border-color: var(--ink);
}

.selection-actions button:disabled,
.gradient-panel button:disabled,
.outline-panel button:disabled,
.stamp-panel button:disabled,
.animation-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.gradient-actions,
.gradient-color-row,
.gradient-preset-row,
.pattern-actions,
.auto-fill-colors,
.render-rail-controls,
.render-preset-row,
.render-palette-row,
.render-palette-tools,
.render-action-row,
.rerender-action-row,
.render-visibility-row,
.render-opacity-row,
.rail-preview-actions,
.direction-wheel,
.render-steps,
.outline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.render-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pattern-library-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.pattern-library-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
}

.pattern-library-item img {
  grid-row: span 3;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(128, 128, 128, 0.16) 25%, transparent 25% 75%, rgba(128, 128, 128, 0.16) 75%),
    linear-gradient(45deg, rgba(128, 128, 128, 0.16) 25%, transparent 25% 75%, rgba(128, 128, 128, 0.16) 75%);
  background-position: 0 0, 7px 7px;
  background-size: 14px 14px;
}

.pattern-library-item span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-library-item small {
  color: var(--muted);
  font-size: 10px;
}

.pattern-library-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.pattern-library-actions button {
  min-height: 30px !important;
  padding: 5px 7px;
  font-size: 10px;
}

.rerender-action-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rail-preview-actions {
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.direction-wheel {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.direction-wheel button {
  min-height: 36px;
  font-size: 18px;
  line-height: 1;
}

.direction-wheel button.active {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: #15131b;
}

.render-steps {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.render-steps span {
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--button-bg));
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.render-assist .section-head,
.render-assist label,
.render-assist .stamp-hint,
.render-assist .auto-fill-colors,
.render-assist .render-rail-controls,
.render-assist .render-preset-row,
.render-assist .render-palette-row,
.render-assist .render-palette-tools,
.render-assist .rail-preview-actions,
.render-assist .direction-wheel,
.render-assist .rerender-action-row,
.render-assist .render-visibility-row,
.render-assist .render-opacity-row,
.render-assist .render-action-row {
  grid-column: 1 / -1;
}

.pattern-panel .section-head,
.pattern-panel .pattern-actions,
.pattern-panel label,
.pattern-panel .stamp-hint {
  grid-column: 1 / -1;
}

.auto-fill-colors label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

.auto-fill-colors input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
}

.render-rail-controls {
  grid-template-columns: 1fr;
}

.render-rail-controls label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
  align-items: center;
}

.render-rail-controls input {
  grid-column: 1 / -1;
}

.render-preset-row,
.render-palette-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.render-preset-row button,
.render-palette-row button {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    var(--button-bg);
  font-size: 12px;
}

.render-palette-tools {
  grid-template-columns: minmax(0, 1fr) auto;
}

.render-palette-tools input,
.render-palette-tools select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-weight: 800;
}

.render-palette-tools select {
  grid-column: 1 / -1;
}

.render-visibility-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.render-visibility-row button {
  min-height: 36px;
  font-size: 12px;
}

.render-opacity-row {
  grid-template-columns: 1fr;
}

.render-opacity-row label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
  align-items: center;
}

.render-opacity-row input {
  grid-column: 1 / -1;
}

.gradient-preset-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pattern-preset-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pattern-preset-actions button {
  min-height: 34px !important;
  padding: 6px 8px;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    var(--button-bg) !important;
  font-size: 11px;
}

.gradient-panel select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.stamp-library-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 72px;
}

.stamp-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stamp-file-actions button {
  min-height: 38px;
}

.stamp-folder-actions {
  display: grid;
  gap: 8px;
}

.stamp-folder-actions button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--button-bg));
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.stamp-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stamp-organizer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stamp-library-status {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-wash);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.stamp-reference-block {
  display: grid;
  gap: 8px;
}

.mood-board-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, var(--button-bg));
}

.mood-board-block textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}

.mood-board-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mood-color-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 6px;
  align-items: center;
}

.mood-color {
  min-height: 30px !important;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 52%),
    var(--mood-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.stamp-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.stamp-subhead strong {
  font-size: 12px;
}

.stamp-subhead span {
  color: var(--muted);
  font-size: 11px;
}

.stamp-reference-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.stamp-reference-heading {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stamp-panel select,
.stamp-panel input[type="search"] {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.stamp-item {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.stamp-type-icon {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(23, 21, 29, 0.18);
  pointer-events: none;
}

.stamp-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.stamp-item.reference {
  background: color-mix(in srgb, var(--button-bg) 82%, #f8fbff);
}

.stamp-item img {
  width: 100%;
  height: 58px;
  object-fit: contain;
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(128, 128, 128, 0.18) 25%, transparent 25% 75%, rgba(128, 128, 128, 0.18) 75%),
    linear-gradient(45deg, rgba(128, 128, 128, 0.18) 25%, transparent 25% 75%, rgba(128, 128, 128, 0.18) 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.stamp-item span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stamp-item small {
  display: -webkit-box;
  min-height: 30px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.stamp-item-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.stamp-item-actions button {
  min-height: 28px !important;
  padding: 4px 5px;
  font-size: 10px;
}

.stamp-delete {
  min-height: 28px !important;
  padding: 4px 6px;
  font-size: 10px;
}

.stamp-favorite {
  border-color: color-mix(in srgb, #ffbf46 42%, var(--line)) !important;
}

.stamp-favorite.active {
  background: #ffbf46 !important;
  color: #17151d !important;
}

.stamp-hint {
  margin: 0;
  font-size: 11px;
}

.transform-panel button:disabled,
.transform-panel input:disabled,
.symmetry-panel input:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.symmetry-panel select,
.liquify-panel select,
.text-panel select,
.upscale-panel select {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.upscale-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.upscale-options button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.upscale-options button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--button-hover));
}

.upscale-result {
  margin: 0;
  padding: 9px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 64%, transparent);
  color: var(--muted);
  font-weight: 800;
}

.upscale-gauge {
  display: grid;
  gap: 6px;
}

.upscale-gauge-bar {
  overflow: hidden;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--progress-bg);
}

.upscale-gauge-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--sun, #ffbf46), var(--coral));
  transition: width 180ms ease;
}

#upscaleGaugeText {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.animation-actions,
.animation-timeline-actions,
.animation-export-actions,
.animation-build-actions,
.animation-time-actions {
  display: grid;
  gap: 8px;
}

.animation-actions {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.animation-timeline-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.animation-export-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.animation-build-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.animation-time-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.animation-nudge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.animation-nudge button:first-child,
.animation-nudge button:last-child {
  grid-column: 2;
}

.animation-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding-right: 2px;
}

.animation-frame {
  display: grid;
  gap: 5px;
  min-height: 86px !important;
  padding: 6px;
  text-align: center;
}

.animation-frame.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--button-hover));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.animation-frame.dragging {
  opacity: 0.48;
  transform: scale(0.96);
}

.animation-frame img {
  width: 100%;
  height: 54px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(128, 128, 128, 0.14) 25%, transparent 25% 75%, rgba(128, 128, 128, 0.14) 75%),
    linear-gradient(45deg, rgba(128, 128, 128, 0.14) 25%, transparent 25% 75%, rgba(128, 128, 128, 0.14) 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.animation-frame span {
  font-size: 11px;
  font-weight: 900;
}

.animation-frame small {
  min-height: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.animation-empty,
.animation-selected-info,
.animation-status {
  margin: 0;
  padding: 9px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 64%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.animation-empty {
  grid-column: 1 / -1;
}

.animation-selected-info {
  display: block;
}

.layers-panel {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 10px;
  min-height: min(640px, calc(100vh - 230px));
  max-height: min(780px, calc(100vh - 178px));
  min-height: min(640px, calc(100dvh - 230px));
  max-height: min(780px, calc(100dvh - 178px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

#layersPanel.active {
  min-height: min(720px, calc(100vh - 180px));
  min-height: min(720px, calc(100dvh - 180px));
}

#layersPanel.active .layers-panel.component-tray {
  max-height: min(780px, calc(100vh - 178px));
  max-height: min(780px, calc(100dvh - 178px));
}

.layers-panel .section-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}

.layer-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.layer-actions button {
  width: auto;
  min-height: 34px;
  padding: 0 6px;
  font-size: 12px;
}

.layer-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.layer-actions button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--button-hover));
  color: var(--ink);
}

.layer-list {
  display: grid;
  gap: 6px;
  min-height: 220px;
  max-height: none;
  overflow: auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 36%, transparent);
}

.layer-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "vis thumb name badge"
    "vis thumb meta meta";
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  min-height: 64px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--ink) 12%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 86%, var(--panel) 14%);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.layer-row.tagged::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--layer-tag);
}

.layer-row > * {
  position: relative;
  z-index: 1;
}

.layer-group-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, auto);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--input-bg));
}

.layer-group-header.collapsed {
  border-style: dashed;
  background: color-mix(in srgb, var(--button-bg) 76%, var(--panel) 24%);
}

.layer-group-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-group-header button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.layer-thumb {
  grid-area: thumb;
  display: block;
  width: 52px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, var(--ink) 14%);
  border-radius: 6px;
  background:
    linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.06) 75%);
  background-color: var(--input-bg);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  object-fit: contain;
}

.layer-row.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--button-hover));
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.layer-row.solo {
  border-color: color-mix(in srgb, var(--coral) 72%, var(--line));
  background: color-mix(in srgb, var(--coral) 12%, var(--button-bg));
  box-shadow: inset 4px 0 0 var(--coral), 0 0 0 1px color-mix(in srgb, var(--coral) 34%, transparent);
}

.layer-row.active.solo {
  box-shadow: inset 4px 0 0 var(--coral), inset 8px 0 0 var(--accent);
}

.layer-row.dragging {
  opacity: 0.5;
  transform: scale(0.985);
}

.layer-row.drop-before {
  box-shadow: inset 0 4px 0 var(--accent), 0 -2px 0 var(--accent);
}

.layer-row.drop-after {
  box-shadow: inset 0 -4px 0 var(--accent), 0 2px 0 var(--accent);
}

.layer-row.clipping {
  border-color: color-mix(in srgb, #ffbf46 62%, var(--line));
  box-shadow: inset 4px 0 0 #ffbf46;
}

.layer-row.active.clipping {
  box-shadow: inset 4px 0 0 #ffbf46, inset 8px 0 0 var(--accent);
}

.layer-row.locked {
  border-style: dashed;
}

.layer-row.hidden-layer {
  opacity: 0.62;
}

.visibility-toggle {
  grid-area: vis;
  display: grid;
  place-items: center;
  width: 46px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, var(--ink) 14%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--input-bg) 78%, var(--button-hover));
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.layer-name {
  grid-area: name;
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-properties,
.paper-properties,
.snapshot-properties {
  display: grid;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-bg) 62%, transparent);
}

.layer-name-input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.layer-meta {
  grid-area: meta;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.layer-mode-badge {
  grid-area: badge;
  align-self: start;
  max-width: 82px;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--input-bg));
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-theme="dark"] .layers-panel {
  background: #121019;
  border-color: #665b78;
}

body[data-theme="dark"] .layer-list {
  background: #0d0c12;
  border-color: #6d627e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .layer-row {
  border-color: #746784;
  background: #302a3b;
  color: #fff7ea;
}

body[data-theme="dark"] .layer-group-header {
  border-color: #40e0d0;
  background: rgba(64, 224, 208, 0.1);
}

body[data-theme="dark"] .layer-group-title,
body[data-theme="dark"] .layer-group-header button {
  color: #fff7ea;
}

body[data-theme="dark"] .layer-row.active {
  border-color: #40e0d0;
  background: #23423f;
  box-shadow: inset 5px 0 0 #40e0d0, 0 0 0 1px rgba(64, 224, 208, 0.5);
}

body[data-theme="dark"] .layer-thumb,
body[data-theme="dark"] .visibility-toggle {
  border-color: #807391;
  background-color: #1a1722;
}

body[data-theme="dark"] .visibility-toggle {
  color: #fff7ea;
  background: #252030;
}

body[data-theme="dark"] .layer-name {
  color: #fff7ea;
}

body[data-theme="dark"] .layer-meta {
  color: #d4cbe2;
}

body[data-theme="dark"] .layer-mode-hint,
body[data-theme="dark"] .layer-mode-badge {
  border-color: #40e0d0;
  background: rgba(64, 224, 208, 0.12);
  color: #fff7ea;
}

body[data-theme="dark"] .active-layer-hint {
  border-color: #40e0d0;
  background: rgba(64, 224, 208, 0.12);
  color: #fff7ea;
}

body[data-theme="dark"] .layer-properties,
body[data-theme="dark"] .paper-properties,
body[data-theme="dark"] .snapshot-properties,
body[data-theme="dark"] .project-safety {
  background: #181520;
  border-color: #665b78;
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .stage-wrap {
    gap: 8px;
  }

  .top-bar {
    grid-template-columns: minmax(140px, 0.34fr) minmax(0, 1fr);
    min-height: 66px;
    padding: 8px 10px;
  }

  .brand {
    gap: 8px;
  }

  .mascot-logo {
    width: 40px;
    height: 40px;
  }

  .top-tool,
  .top-save,
  .theme-toggle {
    min-width: 58px;
    height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }

  .file-select {
    min-width: 118px;
  }

  .top-live-indicators {
    min-height: 44px;
  }

  .top-color-chip,
  .top-size-chip {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .top-view-controls {
    grid-template-columns: 30px minmax(42px, auto) 30px repeat(6, 30px);
    min-height: 44px;
    padding: 4px;
  }

  .top-view-button {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .top-view-controls output {
    min-width: 42px;
    font-size: 11px;
  }

  .top-quick-popover {
    position: fixed;
    top: 74px;
    left: 12px;
  }

  .panel-splitter {
    display: none;
  }

  .settings-panel {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-items: stretch;
    padding: 10px;
  }

  .settings-panel.floating {
    grid-column: auto;
    width: min(360px, calc(100vw - 16px));
    height: min(620px, calc(100vh - 16px));
    height: min(620px, calc(100dvh - 16px));
  }

  .swatch-row,
  .recent-colors {
    grid-template-columns: repeat(auto-fill, 26px);
  }

  .canvas-actions {
    grid-template-columns: 1fr 1fr;
  }

  .shape-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

.selection-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.selection-feather {
  grid-column: 1 / -1;
}

  .tab-panel,
  .layers-panel {
    grid-column: 1 / -1;
  }

  .layer-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 220px;
    max-height: min(520px, 52vh);
    max-height: min(520px, 52dvh);
  }

  .layer-blend-quick {
    grid-template-columns: repeat(6, minmax(76px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .layer-preset-actions {
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .brush-panel {
    grid-column: 1 / -1;
  }

  .brush-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: none;
  }

  .brush-library-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-card {
    grid-template-columns: 1fr;
  }

  .tour-mascot {
    width: 100%;
    min-height: 104px;
  }
}

@media (max-width: 720px) {
  .focus-dock {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    width: min(360px, calc(100% - 24px));
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .tool-rail {
    grid-row: 1;
    grid-template-columns: repeat(24, 46px);
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    min-width: 0;
    padding: 8px;
    scroll-padding-inline: 8px;
    touch-action: pan-x;
  }

  .tool,
  .icon-button {
    width: 46px;
    height: 46px;
  }

  .tour-card {
    gap: 12px;
    padding: 14px;
  }

  .tour-copy h2 {
    font-size: 23px;
  }

  .tour-actions {
    grid-template-columns: 1fr 1fr;
  }

  .new-project-presets,
  .recent-size-list,
  .size-row {
    grid-template-columns: 1fr;
  }

  #tourSkip {
    grid-column: 1 / -1;
  }

  .stage-wrap {
    grid-row: 2;
    gap: 8px;
  }

  .top-bar {
    grid-template-columns: minmax(86px, 0.25fr) minmax(0, 1fr);
    min-height: 58px;
    padding: 8px;
  }

  .brand {
    gap: 6px;
  }

  .brand p {
    display: none;
  }

  .brand .active-layer-hint {
    display: none;
  }

  .mascot-logo {
    width: 36px;
    height: 36px;
  }

  h1 {
    font-size: 15px;
  }

  .file-actions {
    gap: 6px;
    padding-bottom: 2px;
  }

  .file-actions::-webkit-scrollbar {
    height: 6px;
  }

  .top-tool,
  .top-save,
  .theme-toggle {
    min-width: 52px;
    height: 40px;
    padding: 0 7px;
    font-size: 11px;
  }

  .file-select {
    min-width: 106px;
    max-width: 126px;
  }

  .top-live-indicators {
    min-height: 40px;
  }

  .top-color-chip,
  .top-size-chip {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .top-chip-label {
    font-size: 7px;
  }

  .top-size-chip output {
    font-size: 9px;
  }

  .top-view-controls {
    position: relative;
    right: auto;
    grid-template-columns: 28px 38px 28px repeat(6, 28px);
    min-height: 40px;
    padding: 4px;
  }

  .top-view-button {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 11px;
  }

  .top-view-controls output {
    min-width: 38px;
    font-size: 10px;
  }

  .top-quick-popover {
    top: 70px;
    width: min(210px, calc(100vw - 24px));
  }

  .canvas-frame {
    min-height: 260px;
  }

  .settings-panel {
    grid-row: 3;
    grid-template-columns: 1fr;
    max-height: 54vh;
    max-height: 54dvh;
    overflow: auto;
  }

  .settings-panel.floating {
    grid-row: auto;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    left: 8px;
    top: 72px;
  }

  .swatch-row,
  .brush-panel,
  .canvas-actions,
  .shape-actions,
  .selection-actions,
  .tab-panel,
  .layers-panel {
    grid-column: 1 / -1;
  }

  .brush-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .brush-library-list {
    grid-template-columns: 1fr;
  }

  .layer-list {
    grid-template-columns: 1fr;
    min-height: 220px;
    max-height: min(520px, 52dvh);
  }

  .layer-blend-quick {
    grid-template-columns: repeat(6, minmax(82px, 1fr));
  }

  .layer-preset-actions {
    grid-template-columns: repeat(7, minmax(82px, 1fr));
  }
}

@media (max-width: 600px) {
  .top-bar {
    grid-template-columns: 1fr;
  }

  .brand {
    display: none;
  }

  .file-actions {
    width: 100%;
  }

  .settings-panel {
    max-height: 48vh;
    max-height: 48dvh;
  }
}