:root {
  --panel-w: 272px;
  --ui-bg: rgba(18,18,18,0.92);
  --ui-border: rgba(255,255,255,0.07);
  --ui-text: #bbb;
  --ui-text-hi: #fff;
  --ui-accent: #5a8eff;
  --ui-input-bg: #1a1a1a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#111; color:var(--ui-text); font:11px/1.4 'Helvetica Neue',system-ui,sans-serif; overflow:hidden; height:100vh; user-select:none; }

/* ── Layout ── */
.app { display:flex; height:100vh; }
.panel {
  width:var(--panel-w); min-width:var(--panel-w); height:100vh;
  background:var(--ui-bg); backdrop-filter:blur(16px);
  border-right:1px solid var(--ui-border);
  overflow-y:auto; overflow-x:hidden; z-index:10;
  transition:margin-left 0.25s ease;
  scrollbar-width:thin; scrollbar-color:#333 transparent;
}
.panel.hidden { margin-left:calc(-1 * var(--panel-w)); }
/* Style panel — RIGHT-side panel, populated by init.js with the moved
   data-tab="style" sections. Same width/scroll treatment as the main
   panel, but mirrored: left-border instead of right, and .hidden slides
   it OFF the right edge (margin-right negative) instead of the left. */
.panel-style {
  width:var(--panel-w); min-width:var(--panel-w); height:100vh;
  background:var(--ui-bg); backdrop-filter:blur(16px);
  border-right:none;
  border-left:1px solid var(--ui-border);
  overflow-y:auto; overflow-x:hidden; z-index:10;
  transition:margin-right 0.25s ease;
  scrollbar-width:thin; scrollbar-color:#333 transparent;
}
/* Override the inherited .panel.hidden rule (margin-left negative) — for
   the right-side panel we want margin-right negative so it slides off
   the right edge. !important + same specificity needed to win against
   the .panel.hidden cascade rule. */
.panel-style.hidden { margin-left:0 !important; margin-right:calc(-1 * var(--panel-w)); }
.panel-style-body { display:flex; flex-direction:column; }
/* Hide the Style tab in the main tab bar — Style is its own panel now. */
.panel-tab[data-tab="style"] { display:none !important; }
/* Right column: canvas area on top, contextual bar at bottom */
.canvas-col { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; height:100vh; }

/* ── Floating creation toolbar (Figma-style) ─────────────────────────
   Lives between canvas-wrap and the context-bar inside canvas-col,
   pulled up via negative margin so it appears to float OVER the bottom
   of the canvas. .canvas-col is position:relative so the toolbar's
   absolute positioning anchors to it. Each tool delegates to the
   existing creation buttons in the left panel — see init.js wiring. */
.canvas-col { position:relative; }
.creation-toolbar {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:122px; /* clear the 110px context-bar + 12px breathing */
  display:flex; align-items:center; gap:2px; padding:4px;
  background:rgba(20,20,20,0.92); backdrop-filter:blur(12px);
  border:1px solid var(--ui-border); border-radius:9px;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  z-index:300; user-select:none;
}
.ct-tool {
  background:transparent; border:none; color:#ddd;
  padding:6px 10px; border-radius:5px; cursor:pointer;
  font:500 12px sans-serif; letter-spacing:0.02em;
  display:flex; align-items:center; gap:4px;
}
.ct-tool:hover { background:rgba(255,255,255,0.08); color:#fff; }
.ct-tool.is-active { background:rgba(80,140,255,0.22); color:#fff; }
.ct-caret { font-size:9px; opacity:0.6; }
.ct-divider { width:1px; height:20px; background:rgba(255,255,255,0.12); margin:0 3px; }
/* Dropdown menus — anchored to their tool, opening upward since the
   toolbar lives at the bottom of the canvas. */
.ct-menu {
  display:none; position:absolute; bottom:100%; margin-bottom:6px;
  background:#1a1a1a; border:1px solid var(--ui-border); border-radius:5px;
  padding:3px; min-width:120px; box-shadow:0 4px 14px rgba(0,0,0,0.55);
  z-index:301;
}
.ct-menu.open { display:block; }
.ct-menu-item {
  padding:5px 10px; cursor:pointer; font-size:11px; color:#ddd; border-radius:3px;
}
.ct-menu-item:hover { background:rgba(255,255,255,0.08); color:#fff; }
.canvas-wrap { flex:1; position:relative; display:flex; align-items:center; justify-content:center; background:#222; overflow:hidden; min-height:0; }
canvas { background:#fff; }

/* ── Contextual bottom bar ── */
.context-bar {
  height:110px; min-height:110px; flex-shrink:0;
  background:var(--ui-bg); backdrop-filter:blur(16px);
  border-top:1px solid var(--ui-border);
  display:flex; align-items:stretch; padding:10px 14px; gap:14px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:#333 transparent;
}
.context-bar .ctx-label {
  font-size:9px; text-transform:uppercase; letter-spacing:0.08em;
  color:#666; font-weight:600; padding-right:10px;
  border-right:1px solid var(--ui-border); flex-shrink:0;
  align-self:center;
}
.context-bar .ctx-rows {
  display:flex; flex-direction:column; gap:6px; flex:1; min-width:0;
  justify-content:center;
}
.context-bar .ctx-row {
  display:flex; align-items:center; gap:14px; min-height:32px; flex-wrap:nowrap;
}
.context-bar .ctx-group {
  display:flex; flex-direction:column; gap:2px; min-width:0; flex-shrink:0;
  align-items:flex-start;
}
.context-bar .ctx-group-label { font-size:9px; color:#666; text-transform:uppercase; letter-spacing:0.06em; line-height:1; }
.context-bar .ctx-group input[type=range] { width:100px; }
.context-bar .ctx-group .row { display:flex; align-items:center; gap:6px; height:16px; }
.context-bar .ctx-group .val { color:var(--ui-text-hi); font-size:10px; font-variant-numeric:tabular-nums; min-width:30px; text-align:right; }
.context-bar .ctx-empty { color:#555; font-size:11px; font-style:italic; align-self:center; }
.context-bar .btn { padding:4px 9px; height:24px; line-height:1; display:inline-flex; align-items:center; font-size:10px; }
.context-bar .btn-row { display:flex; gap:4px; flex-wrap:nowrap; align-items:center; }
.context-bar .ctx-divider { width:1px; height:26px; background:var(--ui-border); flex-shrink:0; align-self:center; }
.context-bar .pill { padding:3px 8px; font-size:9px; }
.context-bar .pill-row { display:flex; gap:3px; flex-wrap:nowrap; align-items:center; margin:0; }
.context-bar label.ctx-chk {
  display:flex; align-items:center; gap:4px; font-size:10px; color:#aaa; cursor:pointer; white-space:nowrap;
}
canvas.has-shadow { box-shadow:0 0 40px rgba(0,0,0,0.5); }

/* ── Panel Header ── */
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 8px; position:sticky; top:0; background:var(--ui-bg); z-index:2;
  border-bottom:1px solid var(--ui-border);
}
.panel-header h1 { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--ui-text-hi); }
.panel-header .toggle { background:none; border:none; color:var(--ui-text); cursor:pointer; font-size:16px; padding:2px 4px; }

/* ── Canvas toolbar grouping ── */
.canvas-toolbar .toolbar-group { display:inline-flex; align-items:center; gap:4px; position:relative; }
.canvas-toolbar .toolbar-sep   { display:inline-block; width:1px; height:18px; background:#333; margin:0 6px; vertical-align:middle; }
/* Primary export action — PNG is the common case, so it stands out */
.canvas-toolbar .btn-primary {
  background:#4a9eff; color:#fff; font-weight:600;
  border-color:#4a9eff; transition:background 0.12s, border-color 0.12s;
}
.canvas-toolbar .btn-primary:hover { background:#5aaeff; border-color:#5aaeff; }
/* Reset per-button inline backgrounds to let the group share styling */
.canvas-toolbar .toolbar-export .btn:not(.btn-primary) {
  background:rgba(255,255,255,0.04); color:#ddd;
}
.canvas-toolbar .toolbar-export .btn:not(.btn-primary):hover {
  background:rgba(255,255,255,0.08);
}

/* ── Animation timeline ── */
.timeline-panel {
  position:absolute; left:0; right:0; bottom:0; z-index:400;
  background:rgba(18,18,18,0.95); border-top:1px solid #333;
  padding:8px 12px 10px; color:#ddd;
  font:500 11px/1.4 'Helvetica Neue', Arial, sans-serif;
  backdrop-filter:blur(4px);
}
.timeline-controls { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.timeline-controls input[type="number"] {
  background:#1a1a1a; border:1px solid #333; color:#ddd;
  padding:2px 4px; font:500 11px sans-serif; border-radius:2px;
}
.timeline-loop-lbl { display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:#aaa; font-size:10px; }
.timeline-duration { display:inline-flex; align-items:center; gap:4px; font-size:10px; }
.timeline-track {
  position:relative; height:24px; background:#0a0a0a;
  border:1px solid #2a2a2a; border-radius:3px;
  cursor:pointer; overflow:hidden;
}
.timeline-track::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0, transparent 49px, #222 49px, #222 50px);
}
.timeline-scrubber {
  position:absolute; top:0; bottom:0; left:0; width:2px;
  background:#4a9eff; pointer-events:none; transition:left 0.06s linear;
  box-shadow:0 0 6px rgba(74,158,255,0.6);
}
.timeline-kfs { position:absolute; inset:0; pointer-events:none; }
.timeline-kf {
  position:absolute; top:50%; transform:translate(-50%, -50%);
  width:10px; height:10px; background:#ffcc00; border:1px solid #ff9900;
  border-radius:50%; pointer-events:auto; cursor:pointer;
  transition:transform 0.1s, background 0.1s;
}
.timeline-kf:hover { background:#ffffff; transform:translate(-50%, -50%) scale(1.3); }
.timeline-kf.active { background:#ffffff; box-shadow:0 0 8px rgba(255,255,255,0.6); }

/* ── Right-click context menu ── */
.ctx-menu {
  position:fixed; z-index:9999; min-width:170px;
  background:#1a1a1a; border:1px solid #333; border-radius:6px;
  padding:4px 0; box-shadow:0 6px 18px rgba(0,0,0,0.5);
  font:500 12px/1 'Helvetica Neue', Arial, sans-serif;
  user-select:none;
}
.ctx-menu .ctx-item {
  padding:7px 14px; color:#ddd; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  white-space:nowrap;
}
.ctx-menu .ctx-item:hover { background:rgba(80,140,255,0.18); color:#fff; }
.ctx-menu .ctx-item.disabled { color:#555; cursor:default; pointer-events:none; }
.ctx-menu .ctx-item .ctx-shortcut { color:#666; font-size:10px; }
.ctx-menu .ctx-divider { height:1px; background:#333; margin:4px 0; }

/* ── Marquee selection rect ── (drawn on canvas; this just adds cursor) */
.canvas-wrap.marquee-active { cursor:crosshair; }
/* Text tool active — Figma "T" mode. Cursor turns into a text I-beam to
   telegraph that the next click/drag creates a textbox. */
.canvas-wrap.text-tool-active { cursor:text; }

/* ── Rulers — Illustrator-style guides; toggled by Cmd+R ── */
.ruler {
  position:absolute; background:#1a1a1a; color:#888;
  font:9px/1 'Helvetica Neue', Arial, sans-serif;
  z-index:40; user-select:none; pointer-events:auto;
  /* Tick marks via repeating-linear-gradient — every 50px a longer line. */
}
.ruler-h {
  top:0; left:20px; right:0; height:20px;
  border-bottom:1px solid #333;
  background-image:
    repeating-linear-gradient(to right,
      transparent 0, transparent 49px,
      rgba(255,255,255,0.18) 49px, rgba(255,255,255,0.18) 50px),
    repeating-linear-gradient(to right,
      transparent 0, transparent 9px,
      rgba(255,255,255,0.08) 9px, rgba(255,255,255,0.08) 10px);
  cursor:ns-resize;
}
.ruler-v {
  top:20px; left:0; bottom:0; width:20px;
  border-right:1px solid #333;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 49px,
      rgba(255,255,255,0.18) 49px, rgba(255,255,255,0.18) 50px),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 9px,
      rgba(255,255,255,0.08) 9px, rgba(255,255,255,0.08) 10px);
  cursor:ew-resize;
}
.ruler-corner {
  position:absolute; top:0; left:0; width:20px; height:20px;
  background:#1a1a1a; border-right:1px solid #333; border-bottom:1px solid #333;
  z-index:41;
}

/* ── Gravity ON/OFF toggle (panel header) ── */
.gravity-toggle {
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid #333; color:#bbb;
  font:600 10px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing:0.08em; padding:5px 9px;
  border-radius:14px; cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.gravity-toggle:hover { color:#fff; border-color:#555; }
.gravity-toggle .gravity-toggle-led {
  width:8px; height:8px; border-radius:50%;
  background:#ff6b3c; box-shadow:0 0 5px rgba(255,107,60,0.7);
  transition:background 0.15s, box-shadow 0.15s;
}
.gravity-toggle.is-off .gravity-toggle-led {
  background:#3aa463; box-shadow:0 0 5px rgba(58,164,99,0.6);
}

/* ── Top-level tab bar for the sidebar ── */
.panel-tabs {
  /* Each tab takes its natural content width and the row distributes any
     remaining panel space evenly around them. Total natural width of the
     5 stock labels is ~259px and the panel is 272px, so they fit without
     ellipsis and the extra 13px breathes as equal side-padding. */
  display:flex; gap:0; padding:0; background:var(--ui-bg);
  border-bottom:1px solid var(--ui-border); position:sticky; top:44px; z-index:2;
  max-width:100%; overflow:hidden;
  justify-content:space-around;
}
.panel-tab {
  /* `flex:0 0 auto` — take natural content width, don't grow, don't shrink.
     Fallback ellipsis kept for safety in case a future translation or
     label-rename makes a tab wider than the panel. */
  flex:0 0 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
  background:none; border:none; color:#777;
  font:500 10px/1 'Helvetica Neue', Arial, sans-serif;
  text-transform:uppercase; letter-spacing:0.04em; padding:10px 3px;
  cursor:pointer;
  border-bottom:2px solid transparent; transition:color 0.15s, border-color 0.15s;
}
.panel-tab:hover { color:#aaa; }
.panel-tab.active { color:var(--ui-text-hi); border-bottom-color:#4a9eff; }
/* Hide sections whose data-tab doesn't match the active tab */
.panel[data-active-tab="compose"]  .section:not([data-tab="compose"]),
.panel[data-active-tab="style"]    .section:not([data-tab="style"]),
.panel[data-active-tab="behavior"] .section:not([data-tab="behavior"]),
.panel[data-active-tab="effects"]  .section:not([data-tab="effects"]),
.panel[data-active-tab="export"]   .section:not([data-tab="export"]) { display:none; }

/* ── Sections ── */
.section { border-bottom:1px solid var(--ui-border); }
.section-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; cursor:pointer; font-size:10px; text-transform:uppercase;
  letter-spacing:0.08em; color:#666; font-weight:600;
}
.section-head:hover { color:#999; }
.section-head .arrow { transition:transform 0.2s; font-size:8px; }
.section.collapsed .section-head .arrow { transform:rotate(-90deg); }
.section.collapsed .section-body { display:none; }
.section-body { padding:4px 14px 12px; }

/* ── Sub-headings inside sections (e.g. Tube / Text / Background inside Color) ──
   Visually subordinate to .section-head: smaller, lighter, no caps treatment,
   slightly indented. Reads as nested rather than competing as a top-level header. */
.sub-head {
  font-size:10px; font-weight:500;
  color:#888; letter-spacing:0;
  margin-top:12px; margin-bottom:4px; padding-top:8px; padding-left:2px;
  border-top:1px dashed rgba(255,255,255,0.06);
  text-transform:none;
}
.sub-head:first-child { margin-top:0; padding-top:0; border-top:none; }

/* ── Controls ── */
.ctrl { margin-bottom:6px; }
.ctrl-label { display:flex; justify-content:space-between; margin-bottom:3px; color:#777; font-size:10px; }
.ctrl-label .val { color:var(--ui-text-hi); font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; height:3px; -webkit-appearance:none; background:#333; border-radius:2px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer; }
textarea, .text-input { width:100%; background:var(--ui-input-bg); border:1px solid #333; color:#fff; padding:7px 8px; font-size:11px; font-family:inherit; resize:vertical; min-height:40px; border-radius:3px; }
select { width:100%; background:var(--ui-input-bg); border:1px solid #333; color:#fff; padding:5px 8px; font-size:11px; border-radius:3px; outline:none; cursor:pointer; -webkit-appearance:none; }

/* ── Buttons ── */
.btn { background:#222; border:1px solid #444; color:#ccc; padding:5px 10px; font-size:10px; cursor:pointer; border-radius:3px; transition:all 0.12s; font-family:inherit; }
.btn:hover { background:#333; color:#fff; border-color:#555; }
.btn.active { background:var(--ui-accent); border-color:var(--ui-accent); color:#fff; }
.btn-row { display:flex; gap:4px; flex-wrap:wrap; }
.btn-sm { padding:3px 7px; font-size:9px; }
.pill-row { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:6px; }
.pill {
  padding:3px 8px; font-size:9px; border-radius:10px; cursor:pointer;
  border:1px solid #444; background:transparent; color:#888; transition:all 0.12s; font-family:inherit;
}
.pill:hover { color:#ccc; border-color:#666; }
.pill.active { background:#fff; color:#111; border-color:#fff; }

/* ── Pill semantic sub-styles ── */
/* Mode-change pills (exclusive single-choice): fill modes, color modes,
   text layouts, bg modes, layer layout pickers. Active state uses the
   accent blue to signal "this is the current mode you're in".
   Targeted by data-attribute pattern so we don't have to touch every HTML
   row. The data attributes ARE the semantic marker. */
.pill-row .pill[data-spagbg].active,
.pill-row .pill[data-colormode].active,
.pill-row .pill[data-textanim].active,
.pill-row .pill[data-textlayout].active,
.pill-row .pill[data-bgmode].active,
.pill-row .pill[data-bgpattern].active,
.pill-row .pill[data-shapepattern].active,
.pill-row .pill[data-textmask].active,
.pill-row .pill[data-case].active,
.pill-row .pill[data-textalign].active,
.pill-row .pill[data-textpathside].active,
.pill-row .pill[data-spawnshape].active,
.pill-row .pill[data-spawnpos].active,
.pill-row .pill[data-spawnentry].active,
.pill-row .pill[data-bgfit].active {
  background:#4a9eff; color:#fff; border-color:#4a9eff;
}
/* Action pills (additive/one-shot): Shape adders, preset selectors, burst
   count etc. White active persists for "last used" state. (No change from default.) */

/* ── Font Shelf ── */
.font-shelf { display:flex; gap:4px; flex-wrap:wrap; margin:6px 0; }
.font-chip {
  padding:3px 8px; font-size:9px; border-radius:3px; cursor:pointer;
  background:#222; border:1px solid #444; color:#aaa; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.font-chip.active { border-color:var(--ui-accent); color:#fff; }
.font-chip .x { margin-left:4px; color:#666; cursor:pointer; }
.font-chip .x:hover { color:#f66; }

/* ── Color ── */
.color-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.color-row span { color:#666; font-size:9px; min-width:24px; }
/* Standardize ALL color swatches to a consistent 22x22. Previously swatches
   varied from 20 to 28px across Stroke, Tube Color, Text, BG, etc — noisy. */
.color-row input[type=color],
input[type=color] {
  width:22px; height:22px; border:1px solid #444; background:none; cursor:pointer;
  padding:0; border-radius:3px; flex-shrink:0;
}
input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
input[type=color]::-webkit-color-swatch { border:none; border-radius:2px; }
.palette-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; margin-bottom:6px; }
.palette-group-label {
  font-size:9px; text-transform:uppercase; letter-spacing:0.1em;
  color:#666; margin-top:6px; margin-bottom:3px;
}
.palette-group-label:first-child { margin-top:0; }
.palette-swatch {
  width:100%; height:18px; border-radius:3px; cursor:pointer; border:2px solid transparent;
  display:flex; overflow:hidden;
}
.palette-swatch:hover { border-color:#666; }
.palette-swatch.active { border-color:#fff; }
.palette-swatch div { flex:1; }

/* ── Custom Color Picker ── */
.cpick-popup { position:absolute; z-index:1000; background:#222; border:1px solid #555; border-radius:6px; padding:8px; box-shadow:0 4px 16px rgba(0,0,0,0.6); width:200px; }
.cpick-sv { position:relative; width:100%; height:140px; border-radius:3px; cursor:crosshair; }
.cpick-sv-dot { position:absolute; width:12px; height:12px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 2px rgba(0,0,0,0.8); pointer-events:none; transform:translate(-50%,-50%); }
.cpick-hue { position:relative; width:100%; height:14px; margin-top:6px; border-radius:3px; cursor:crosshair; background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cpick-hue-marker { position:absolute; top:-1px; width:6px; height:16px; border:2px solid #fff; border-radius:2px; box-shadow:0 0 2px rgba(0,0,0,0.8); pointer-events:none; transform:translateX(-50%); }
.cpick-hex { margin-top:6px; display:flex; align-items:center; gap:4px; }
.cpick-hex input { width:100%; background:#1a1a1a; border:1px solid #444; color:#fff; font-size:11px; padding:2px 4px; border-radius:3px; font-family:monospace; }
.cpick-swatches { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
.cpick-swatch { width:16px; height:16px; border-radius:2px; cursor:pointer; border:1px solid #444; transition:transform 0.1s; }
.cpick-swatch:hover { transform:scale(1.25); border-color:#999; }
.cpick-hsl { margin-top:4px; display:flex; gap:2px; align-items:center; }
.cpick-hsl span { color:#888; font-size:10px; font-family:monospace; }
.cpick-hsl input { width:38px; background:#1a1a1a; border:1px solid #444; color:#fff; font-size:10px; padding:1px 3px; border-radius:2px; font-family:monospace; text-align:center; }

/* ── Effects Chain ── */
.fx-chain { display:flex; flex-direction:column; gap:4px; }
.fx-item {
  display:flex; align-items:center; gap:6px; padding:5px 8px;
  background:#1a1a1a; border:1px solid #333; border-radius:3px;
}
.fx-item .fx-name { flex:1; font-size:10px; color:#ccc; }
.fx-item .fx-val { font-size:9px; color:#888; width:40px; text-align:right; }
.fx-item input[type=range] { flex:2; margin:0; }
.fx-item .fx-remove { background:none; border:none; color:#555; cursor:pointer; font-size:12px; padding:0 2px; }
.fx-item .fx-remove:hover { color:#f66; }

/* ── Shuffle Bar ── */
.shuffle-bar {
  position:sticky; bottom:0; padding:10px 14px;
  background:var(--ui-bg); border-top:1px solid var(--ui-border);
  display:flex; gap:6px; align-items:center;
}
.shuffle-bar .btn { flex:1; text-align:center; }
.shuffle-history { display:flex; gap:3px; align-items:center; margin-left:auto; }
.shuffle-history .dot { width:6px; height:6px; border-radius:50%; background:#333; cursor:pointer; }
.shuffle-history .dot.current { background:var(--ui-accent); }

/* ── Canvas Toolbar ── */
.canvas-toolbar {
  position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:5;
}
.panel-open-btn {
  position:absolute; top:10px; left:10px; z-index:5;
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.15);
  color:#fff; width:28px; height:28px; border-radius:4px; cursor:pointer;
  font-size:14px; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.panel-open-btn.visible { display:flex; }
.canvas-toolbar .btn { font-size:10px; backdrop-filter:blur(8px); background:rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.15); }

/* ── Locks ── */
.lock-btn { background:none; border:none; cursor:pointer; font-size:10px; padding:1px 3px; color:#555; }
.lock-btn.locked { color:var(--ui-accent); }

/* ── Layers ── */
.layer-item {
  display:flex; align-items:center; gap:6px; padding:5px 8px;
  background:#1a1a1a; border:1px solid #333; border-radius:3px;
  margin-bottom:3px; cursor:pointer; font-size:10px; color:#888;
}
.layer-item.selected { border-color:var(--ui-accent); color:#fff; background:#1e2a3a; }
.layer-item .layer-vis { font-size:12px; cursor:pointer; opacity:0.5; }
.layer-item .layer-vis.on { opacity:1; }
.layer-item .layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; }
.layer-item .layer-mode { font-size:8px; color:#555; text-transform:uppercase; }

/* hide file inputs */
input[type=file] { display:none; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }