/* ============================================================
   CREATIVE CANVAS — paint app styles.
   Ported from os/_mockups/cc-paint-v5.html <style> block.
   All rules scoped under [data-cat="create"] to avoid leaking into other
   cat-apps or the OS desktop, EXCEPT .ghost / .tool-cursor / .toast / .cc-ctx-menu
   which are appended to document.body (position:fixed) and must stay global.
   The mockup :root vars are rescoped under [data-cat="create"] so they don't
   override the OS palette. Titlebar + .app grid rules dropped — OS chrome owns
   the title bar and #cat-app-grid is the app root.
   ============================================================ */

[data-cat="create"] #cat-app-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  height: 100%;
  width: 100%;
  min-height: 0;
}
[data-cat="create"] .cc-app {
  display: grid;
  grid-template-rows: 38px 1fr 40px 22px;
  height: 100%;
  width: 100%;
  background: var(--bg-darkest);
  min-height: 0;
}

  [data-cat="create"] {
    --bg-darkest: #060608;
    --bg-dark:    #0e0e12;
    --bg-mid:     #18181f;
    --bg-card:    #22222b;
    --border:     #303040;
    --border-lit: #4a4a60;
    --text:       #d8d8e8;
    --text-dim:   #7a7a90;
    --pink:    #FF2E9E;
    --cyan:    #00F0FF;
    --lime:    #C6F542;
    --purple:  #B580FF;
    --yellow:  #F5FF00;
    --green:   #00FF6E;
    --orange:  #FF6B1A;
    --magenta: #FF00C8;
    --ice:     #80DFFF;
    --canvas-bg: #050507;
    --canvas-grid: rgba(255,255,255,0.05);
  }

  [data-cat="create"] * { box-sizing: border-box; margin: 0; padding: 0; }


  /* ===== CUSTOM SCROLLBAR (sketchbook-style diagonal stripes) ===== */
  [data-cat="create"] * { scrollbar-width: thin; scrollbar-color: var(--bg-card) var(--bg-darkest); }

  [data-cat="create"] ::-webkit-scrollbar { width: 12px; height: 12px; }

  [data-cat="create"] ::-webkit-scrollbar-track {
    background-color: var(--bg-darkest);
    background-image: repeating-linear-gradient(
      45deg,
      transparent 0 4px,
      rgba(255,255,255,0.035) 4px 8px
    );
    border-left: 1px solid var(--border);
  }

  [data-cat="create"] ::-webkit-scrollbar-thumb {
    background-color: var(--bg-card);
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255,46,158,0.18) 0 4px,
      rgba(0,240,255,0.10) 4px 8px
    );
    border: 1px solid var(--border-lit);
  }

  [data-cat="create"] ::-webkit-scrollbar-thumb:hover {
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255,46,158,0.4) 0 4px,
      rgba(0,240,255,0.25) 4px 8px
    );
    border-color: var(--pink);
  }

  [data-cat="create"] ::-webkit-scrollbar-corner { background: var(--bg-darkest); }


  /* HEADER BAR — "design your page" + save */
  [data-cat="create"] .headerbar {
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    padding: 0 10px;
  }

  [data-cat="create"] .headerbar .tagline {
    font-family: 'Geologica'; font-weight: 700; font-size: 11px;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-dim);
    flex: 1;
  }

  [data-cat="create"] .headerbar .tagline b { color: var(--lime); }

  [data-cat="create"] .headerbar .save-state {
    font-family: 'JetBrains Mono'; font-size: 9px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim);
    transition: color .2s;
  }

  [data-cat="create"] .headerbar.dirty .save-state { color: var(--yellow); }

  [data-cat="create"] .headerbar.dirty .save-state::before { content: '●  '; color: var(--yellow); }

  /* PAGE SLOTS — three numbered save slots so kids can keep multiple designs. */
  [data-cat="create"] .page-slots {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
  }

  [data-cat="create"] .page-slots .slots-lbl {
    font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim);
    margin-right: 2px;
  }

  [data-cat="create"] .slot-btn {
    width: 24px; height: 24px;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-dim);
    font: inherit;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: border-color .1s, color .1s, background .1s, transform .1s;
  }

  [data-cat="create"] .slot-btn:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }

  [data-cat="create"] .slot-btn.active { background: var(--cyan); border-color: var(--cyan); color: var(--bg-darkest); }

  /* Mark a slot that has saved data so kids see which pages are filled. */
  [data-cat="create"] .slot-btn.has-data { border-style: solid; }

  [data-cat="create"] .slot-btn:not(.has-data):not(.active) { border-style: dashed; }

  [data-cat="create"] .save-page-btn {
    background: var(--pink); color: #fff;
    border: 2px solid var(--pink);
    font-family: 'Geologica'; font-weight: 900; font-size: 11px;
    letter-spacing: 2.5px; text-transform: uppercase;
    padding: 5px 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .15s, transform .1s;
  }

  [data-cat="create"] .save-page-btn svg { width: 14px; height: 14px; }

  [data-cat="create"] .save-page-btn:hover { background: #fff; color: var(--pink); }

  [data-cat="create"] .save-page-btn:active { transform: translate(1px, 1px); }

  [data-cat="create"] .save-page-btn.flash {
    background: var(--green); border-color: var(--green); color: var(--bg-darkest);
    animation: savedFlash 1.4s ease-out;
  }

  @keyframes savedFlash {
    0%   { transform: scale(0.95); }
    25%  { transform: scale(1.08); }
    50%  { transform: scale(1); }
  }


  /* WORKSPACE */
  [data-cat="create"] .workspace { display: grid; grid-template-columns: 96px 188px 1fr 230px; min-height: 0; background: var(--bg-darkest); }


  /* TOOLBOX */
  [data-cat="create"] .toolbox {
    background: var(--bg-mid);
    border-right: 1px solid var(--border);
    padding: 4px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start;
  }

  [data-cat="create"] .toolbox h6 {
    grid-column: 1 / -1;
    font-family: 'JetBrains Mono'; font-size: 8px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-dim);
    margin: 8px 0 4px;
  }

  [data-cat="create"] .tool {
    width: 100%; aspect-ratio: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text);
    transition: background .1s, color .1s, border-color .1s, box-shadow .1s;
  }

  [data-cat="create"] .tool:hover { background: var(--bg-darkest); color: var(--pink); border-color: var(--pink); }

  [data-cat="create"] .tool.sel { background: var(--cyan); color: var(--bg-darkest); border-color: var(--cyan); }

  [data-cat="create"] .tool svg { width: 60%; height: 60%; pointer-events: none; }


  [data-cat="create"] .brush-size { grid-column: 1 / -1; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }

  [data-cat="create"] .brush-size .lbl { font-size: 8px; letter-spacing: 1.5px; color: var(--text-dim); }

  [data-cat="create"] .brush-size .opts { display: flex; gap: 2px; }

  [data-cat="create"] .brush-opt {
    flex: 1; aspect-ratio: 1;
    background: var(--bg-card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }

  [data-cat="create"] .brush-opt:hover { border-color: var(--cyan); }

  [data-cat="create"] .brush-opt.sel { background: var(--bg-darkest); border-color: var(--cyan); }

  [data-cat="create"] .brush-opt .dot { background: var(--text); border-radius: 50%; }

  [data-cat="create"] .brush-opt.sel .dot { background: var(--cyan); }

  /* Stamp-size buttons share visuals with brush-opt. Square dot to read as a stamp tile. */
  [data-cat="create"] .stamp-opt {
    width: 24px; height: 24px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  [data-cat="create"] .stamp-opt:hover { border-color: var(--cyan); }

  [data-cat="create"] .stamp-opt.sel { background: var(--bg-darkest); border-color: var(--cyan); }

  [data-cat="create"] .stamp-opt .dot { background: var(--text); }

  [data-cat="create"] .stamp-opt.sel .dot { background: var(--cyan); }


  [data-cat="create"] .glow-toggle {
    grid-column: 1 / -1; margin-top: 8px; padding: 5px 6px;
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-darkest); border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'JetBrains Mono'; font-size: 9px; letter-spacing: 1.5px;
    cursor: pointer; user-select: none;
  }

  [data-cat="create"] .glow-toggle .box {
    width: 13px; height: 13px;
    background: var(--bg-darkest); border: 1.5px solid var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; flex-shrink: 0; color: var(--text);
  }

  [data-cat="create"] .glow-toggle.on { color: var(--pink); border-color: var(--pink); }

  [data-cat="create"] .zoom-row {
    grid-column: 1 / -1; margin-top: 6px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
  }

  [data-cat="create"] .zoom-row .zoom-btn {
    height: 22px; aspect-ratio: auto;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono'; font-weight: 700; font-size: 13px;
  }

  [data-cat="create"] .zoom-row .zoom-btn:hover { color: var(--pink); border-color: var(--pink); }

  [data-cat="create"] .zoom-row .zoom-level {
    background: var(--bg-darkest); border: 1px solid var(--border);
    color: var(--cyan);
    font-family: 'JetBrains Mono'; font-size: 9px; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  [data-cat="create"] .zoom-row .zoom-level:hover { color: var(--lime); }

  [data-cat="create"] .glow-toggle.on .box { border-color: var(--pink); color: var(--pink); }

  [data-cat="create"] .glow-toggle.on .box::before { content: '✓'; }


  /* STAMP PICKER */
  [data-cat="create"] .stamps-panel {
    background: var(--bg-dark); padding: 5px;
    border-right: 1px solid var(--border); overflow-y: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    align-content: start;
  }

  [data-cat="create"] .stamps-panel h5,
[data-cat="create"] .stamps-panel .hint { grid-column: 1 / -1; }

  [data-cat="create"] .stamps-panel h5 {
    font-family: 'JetBrains Mono'; font-size: 9px; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 8px; padding: 6px;
    background: var(--bg-darkest); color: var(--cyan);
    border: 1px solid var(--border);
  }

  [data-cat="create"] .stamps-panel .hint {
    font-size: 9px; line-height: 1.5; color: var(--text-dim);
    margin-bottom: 10px; letter-spacing: 0.5px; padding: 0 2px;
  }

  [data-cat="create"] .stamps-panel .hint .k { color: var(--lime); }

  [data-cat="create"] .stamps-panel .stamp-search {
    grid-column: 1 / -1;
    width: 100%; box-sizing: border-box;
    padding: 6px 8px; margin: 0 0 6px 0;
    background: var(--bg-darkest); color: var(--text);
    border: 1.5px solid var(--border); border-radius: 0;
    font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.5px;
    outline: none;
  }

  [data-cat="create"] .stamps-panel .stamp-search:focus { border-color: var(--cyan); }

  [data-cat="create"] .stamps-panel .stamp-search::placeholder { color: var(--text-dim); opacity: 0.7; }

  [data-cat="create"] .stamp-pick {
    width: 100%; padding: 4px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    transition: border-color .1s, transform .1s, box-shadow .1s;
  }

  [data-cat="create"] .stamp-pick:hover { border-color: var(--cyan); transform: translate(-1px, -1px); }

  [data-cat="create"] .stamp-pick.sel { border: 2px solid var(--pink); background: var(--bg-darkest); }

  [data-cat="create"] .stamp-pick .preview { aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center; }

  [data-cat="create"] .stamp-pick .preview svg { width: 80%; height: 80%; color: var(--text); transition: color .1s; }

  [data-cat="create"] .stamp-pick:hover .preview svg { color: var(--cyan); }

  [data-cat="create"] .stamp-pick.sel .preview svg { color: var(--pink); }

  [data-cat="create"] .stamp-pick .nm {
    font-family: 'Geologica'; font-weight: 700; font-size: 8px;
    text-align: center; letter-spacing: 0px;
    color: var(--text); text-transform: uppercase;
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }


  /* CANVAS AREA */
  [data-cat="create"] .canvas-wrap {
    background: var(--bg-darkest);
    padding: 12px; position: relative; overflow: auto;
  }

  [data-cat="create"] .canvas-paper {
    position: relative; width: 100%; height: 100%;
    background: var(--canvas-bg);
    background-image: radial-gradient(circle, var(--canvas-grid) 1px, transparent 1.5px);
    background-size: 32px 32px;
    box-shadow:
      0 0 0 1px var(--pink),
      2px 2px 0 var(--purple),
      4px 4px 0 var(--cyan);
    overflow: hidden;
  }

  [data-cat="create"] .canvas-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

  [data-cat="create"] .canvas-paper.tool-stamp canvas { cursor: cell; }

  [data-cat="create"] .canvas-paper.tool-select canvas { cursor: default; }

  /* Tools with custom-rendered cursors hide the system cursor */
  [data-cat="create"] .canvas-paper.tool-brush canvas,
[data-cat="create"] .canvas-paper.tool-pencil canvas,
[data-cat="create"] .canvas-paper.tool-eraser canvas,
[data-cat="create"] .canvas-paper.tool-bucket canvas { cursor: none; }


  /* Custom tool cursor */
  .tool-cursor {
    position: fixed; pointer-events: none; z-index: 5000; display: none;
    transform: translate(-50%, -50%);
  }

  .tool-cursor.ring {
    border-radius: 50%;
    border: 1.5px solid #fff;
    background: transparent;
    mix-blend-mode: difference;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  }

  .tool-cursor.bucket-cur {
    width: 22px; height: 22px;
    color: var(--text);
    /* Hot point = paint drop (≈ SVG coords 20,19 of viewBox 24). Override the default
       center-anchor so the drop tip lands at the click coordinate. */
    transform: translate(-83.3%, -79.2%);
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)) drop-shadow(0 0 1px rgba(255,255,255,0.5));
  }

  .tool-cursor.bucket-cur svg { width: 100%; height: 100%; display: block; }

  [data-cat="create"] .stamp-layer { position: absolute; inset: 0; pointer-events: none; }


  /* PLACED STAMPS — color follows --stamp-color */
  [data-cat="create"] .stamp-layer .placed {
    position: absolute;
    width: 100px; height: 100px;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    pointer-events: none;
  }

  [data-cat="create"] .stamp-layer .placed .stamp-canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }

  [data-cat="create"] .stamp-layer .placed > svg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    color: var(--stamp-color, #fff);
    display: block;
    overflow: visible;
    pointer-events: none;
    /* Paper-cut sticker offset — hides SVG anti-aliasing fringe and gives each placed
       stamp a tactile white border like a die-cut decal. Scoped to the direct-child stamp
       SVG so it doesn't bleed onto the rotate handle's own SVG. */
    filter: url(#cc-sticker);
  }

  [data-cat="create"] .stamp-layer .placed.glow > svg {
    /* Glow stacks on top of the sticker offset. */
    filter: url(#cc-sticker) drop-shadow(0 0 6px var(--stamp-color)) drop-shadow(0 0 12px var(--stamp-color));
  }

  [data-cat="create"] .stamp-layer .placed > svg * { pointer-events: none; }


  /* SVG strokes become interactive only in select/eraser mode. Scope to the main stamp
     SVG (direct child) so we don't break the rotate handle's own pointer behavior. */
  [data-cat="create"] .canvas-paper.tool-select .placed > svg * { pointer-events: fill; cursor: grab; }

  [data-cat="create"] .canvas-paper.tool-eraser .placed > svg * { pointer-events: fill; cursor: not-allowed; }

  [data-cat="create"] .canvas-paper.tool-select .placed:hover > svg { color: var(--cyan); }

  [data-cat="create"] .canvas-paper.tool-eraser .placed:hover > svg { color: var(--pink); }

  [data-cat="create"] .stamp-layer .placed.dragging > svg { color: var(--cyan); }


  /* LABEL = THE CLICKABLE LINK BUTTON */
  [data-cat="create"] .stamp-layer .placed .label {
    position: absolute;
    left: 50%; bottom: -20px;
    transform: translateX(-50%);
    padding: 5px 12px;
    background: var(--bg-darkest);
    color: var(--stamp-color, #fff);
    border: 2px solid var(--stamp-color, #fff);
    font-family: 'Geologica', sans-serif;
    font-weight: 900; font-size: 11px;
    letter-spacing: 2px; text-transform: uppercase;
    box-shadow: 2px 2px 0 var(--stamp-color, #fff);
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    transition: transform .1s, box-shadow .1s;
    user-select: none;
  }

  [data-cat="create"] .stamp-layer .placed.glow .label {
    box-shadow: 2px 2px 0 var(--stamp-color), 0 0 14px var(--stamp-color);
  }

  [data-cat="create"] .stamp-layer .placed .label:hover {
    transform: translateX(-50%) translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--stamp-color, #fff);
    background: var(--stamp-color, #fff);
    color: var(--bg-darkest);
  }

  [data-cat="create"] .stamp-layer .placed .label::after { content: ' ↗'; opacity: 0.6; transition: opacity .15s; }
  [data-cat="create"] .stamp-layer .placed .label:hover::after { opacity: 1; }


  /* ROTATE HANDLE — visible whenever Select tool is on, not hover-gated. Bigger and
     more pill-like so kids spot it instantly. */
  [data-cat="create"] .stamp-layer .placed .rotate-handle {
    position: absolute;
    top: -18px; right: -18px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--cyan);
    border: 2.5px solid var(--bg-darkest);
    color: var(--bg-darkest);
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 0 1.5px var(--cyan), 0 2px 6px rgba(0,0,0,0.5);
    transition: opacity .12s, transform .1s, background .1s;
    z-index: 6;
  }

  [data-cat="create"] .stamp-layer .placed .rotate-handle svg {
    width: 22px; height: 22px; pointer-events: none;
    /* The lucide rotate-cw glyph has its arrowhead at the top + open arc at the bottom,
       which makes the visual mass sit above the geometric center. Nudge down slightly
       so the icon looks centered inside the round handle. */
    transform: translate(-0.5px, 1.5px);
  }

  /* Handles appear only on the SELECTED stamp now — keeps the canvas calm even with
     many stamps placed. `rotating` state forces the rotate handle visible during a drag
     even if selection happens to change. */
  [data-cat="create"] .canvas-paper.tool-select .placed.selected .rotate-handle,
[data-cat="create"] .stamp-layer .placed.rotating .rotate-handle {
    opacity: 1; pointer-events: auto;
  }

  [data-cat="create"] .stamp-layer .placed .rotate-handle:hover { background: var(--pink); transform: scale(1.1); }

  [data-cat="create"] .stamp-layer .placed.rotating .rotate-handle { cursor: grabbing; background: var(--pink); transform: scale(1.1); }


  /* TRASH HANDLE — mirror of the rotate handle on the top-left. Same visibility rule
     (only in Select tool). One click deletes the stamp. */
  [data-cat="create"] .stamp-layer .placed .trash-handle {
    position: absolute;
    top: -18px; left: -18px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--pink);
    border: 2.5px solid var(--bg-darkest);
    color: var(--bg-darkest);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 0 1.5px var(--pink), 0 2px 6px rgba(0,0,0,0.5);
    transition: opacity .12s, transform .1s, background .1s;
    z-index: 6;
  }

  [data-cat="create"] .stamp-layer .placed .trash-handle svg { width: 22px; height: 22px; pointer-events: none; }

  [data-cat="create"] .canvas-paper.tool-select .placed.selected .trash-handle { opacity: 1; pointer-events: auto; }

  [data-cat="create"] .stamp-layer .placed .trash-handle:hover { background: #ff0044; transform: scale(1.1); }


  /* RECOLOR PALETTE — mini swatch row below the selected stamp.
     Only visible on the selected stamp in Select mode. */
  [data-cat="create"] .stamp-layer .placed .recolor-palette {
    position: absolute;
    left: 50%; bottom: -38px;
    transform: translateX(-50%);
    display: flex; flex-direction: row; gap: 4px;
    padding: 5px 6px;
    background: var(--bg-darkest);
    border: 2px solid var(--cyan);
    box-shadow: 2px 2px 0 var(--pink), 0 4px 12px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    z-index: 6;
    white-space: nowrap;
  }

  [data-cat="create"] .canvas-paper.tool-select .placed.selected .recolor-palette {
    opacity: 1; pointer-events: auto;
  }

  /* Drop the palette while the stamp is being dragged/rotated so it doesn't lag in flight. */
  [data-cat="create"] .stamp-layer .placed.dragging .recolor-palette,
[data-cat="create"] .stamp-layer .placed.rotating .recolor-palette { opacity: 0; pointer-events: none; }

  [data-cat="create"] .stamp-layer .placed .rc-sw {
    width: 16px; height: 16px;
    border: 1.5px solid var(--bg-darkest);
    box-shadow: 0 0 0 1px var(--text-dim);
    cursor: pointer;
    padding: 0;
    transition: transform .08s;
  }

  [data-cat="create"] .stamp-layer .placed .rc-sw:hover { transform: scale(1.25); box-shadow: 0 0 0 1.5px var(--cyan); }


  /* STAMP CONTEXT MENU — appears on right-click of a placed stamp in Select mode. */
  .cc-ctx-menu {
    position: fixed;
    z-index: 9999;
    background: var(--bg-darkest);
    border: 2px solid var(--cyan);
    box-shadow: 3px 3px 0 var(--pink), 0 6px 18px rgba(0,0,0,0.55);
    padding: 4px;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    font-family: 'JetBrains Mono', monospace;
  }

  .cc-ctx-menu button {
    background: transparent;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 11px;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    letter-spacing: 0.5px;
  }

  .cc-ctx-menu button:hover { background: var(--cyan); color: var(--bg-darkest); }

  .cc-ctx-menu button[data-act="del"]:hover { background: var(--pink); color: var(--white); }


  /* LANDING ANIMATION */
  [data-cat="create"] .stamp-layer .placed.landing {
    animation: stampPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes stampPop {
    0%   { transform: translate(-50%, -50%) scale(2.4) rotate(calc(var(--rot, 0deg) - 14deg)); opacity: 0; }
    55%  { transform: translate(-50%, -50%) scale(1.15) rotate(calc(var(--rot, 0deg) + 5deg)); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
  }


  /* PARTICLE EFFECTS */
  [data-cat="create"] .fx {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform, opacity;
  }

  [data-cat="create"] .fx-blob,
[data-cat="create"] .fx-dust,
[data-cat="create"] .fx-smoke,
[data-cat="create"] .fx-pixel-c { border-radius: 50%; }

  [data-cat="create"] .fx-dust { opacity: 0.7; }

  [data-cat="create"] .fx-smoke { opacity: 0.4; filter: blur(3px); }

  [data-cat="create"] .fx-blob { box-shadow: 0 0 8px currentColor; }

  [data-cat="create"] .fx-pixel { border-radius: 0; box-shadow: 0 0 4px currentColor; }

  [data-cat="create"] .fx-cube { border-radius: 1px; box-shadow: inset -3px -3px 0 rgba(0,0,0,0.4), 0 0 6px currentColor; }

  [data-cat="create"] .fx-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); box-shadow: 0 0 8px currentColor; }

  [data-cat="create"] .fx-line { border-radius: 1px; box-shadow: 0 0 6px currentColor; }

  [data-cat="create"] .fx-flash {
    position: absolute; inset: 0; pointer-events: none;
    animation: fxFlash 380ms ease-out forwards;
    opacity: 0;
  }

  @keyframes fxFlash {
    0% { opacity: 0; }
    20% { opacity: 0.85; }
    100% { opacity: 0; }
  }

  [data-cat="create"] .fx-animated { animation: fxOut var(--dur, 700ms) ease-out forwards; }

  @keyframes fxOut {
    0%   { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2) rotate(var(--rot, 0deg)); opacity: 0; }
  }

  [data-cat="create"] .fx-rise { animation: fxRise var(--dur, 1000ms) ease-out forwards; }

  @keyframes fxRise {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    20%  { transform: translate(calc(-50% + var(--tx) * 0.2), calc(-50% + var(--ty) * 0.2)) scale(1); opacity: 0.7; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.6); opacity: 0; }
  }

  [data-cat="create"] .fx-fall { animation: fxFall var(--dur, 700ms) cubic-bezier(.55,.085,.68,.53) forwards; }

  @keyframes fxFall {
    0%   { transform: translate(-50%, -50%) scale(0.6) rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.9) rotate(var(--rot, 0deg)); opacity: 0; }
  }

  [data-cat="create"] .fx-sketch { animation: fxSketch var(--dur, 600ms) ease-out forwards; }

  @keyframes fxSketch {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(var(--rot, 0deg)); opacity: 1; }
    50%  { transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); opacity: 0; }
  }


  /* GHOST PREVIEW */
  .ghost {
    position: fixed; pointer-events: none;
    width: 100px; height: 100px;
    transform: translate(-50%, -50%);
    opacity: 0.45; z-index: 1000; display: none;
  }

  .ghost.show { display: block; }

  .ghost svg { width: 100%; height: 100%; }


  /* LINKS PANEL */
  [data-cat="create"] .links { background: var(--bg-dark); border-left: 1px solid var(--border); overflow-y: auto; }

  [data-cat="create"] .links h5 {
    font-family: 'JetBrains Mono'; font-size: 9px; letter-spacing: 2px;
    text-transform: uppercase; padding: 8px;
    background: var(--bg-darkest); color: var(--lime);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
  }

  [data-cat="create"] .links .row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; cursor: pointer;
    border-bottom: 1px dotted var(--border);
    background: transparent; color: var(--text);
    transition: background .1s, transform .1s, color .1s;
  }

  [data-cat="create"] .links .row .info { padding-right: 2px; }

  [data-cat="create"] .links .row .arrow { margin-left: -2px; }

  [data-cat="create"] .links .row:hover { background: var(--bg-card); transform: translateX(-2px); color: var(--lime); box-shadow: 2px 0 0 var(--lime); }

  [data-cat="create"] .links .row .thumb {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
  }

  [data-cat="create"] .links .row .thumb svg { width: 100%; height: 100%; display: block; }

  [data-cat="create"] .links .row:hover .thumb { color: var(--bg-darkest); }

  [data-cat="create"] .links .row .info { flex: 1; min-width: 0; }

  [data-cat="create"] .links .row .nm { font-family: 'Geologica'; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; }

  [data-cat="create"] .links .row .meta { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-top: 1px; text-transform: uppercase; }

  [data-cat="create"] .links .row .arrow { opacity: 0.4; }

  [data-cat="create"] .links .row:hover .arrow { opacity: 1; }


  /* SWATCHES */
  [data-cat="create"] .swatches {
    background: var(--bg-mid);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px;
  }

  [data-cat="create"] .swatches .label-text {
    font-family: 'JetBrains Mono'; font-size: 9px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-dim);
  }

  [data-cat="create"] .swatches .active-col {
    width: 28px; height: 28px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border);
  }

  [data-cat="create"] .swatches .grid { display: flex; gap: 3px; }

  [data-cat="create"] .sw {
    width: 26px; height: 26px;
    border: 1.5px solid var(--border);
    cursor: pointer; transition: box-shadow .1s, transform .1s;
  }

  [data-cat="create"] .sw:hover { transform: translateY(-1px); }

  [data-cat="create"] .sw.sel { box-shadow: inset 0 0 0 2px var(--bg-darkest), inset 0 0 0 3px #fff; transform: translateY(-2px); }

  [data-cat="create"] .color-picker-wrap {
    width: 26px; height: 26px;
    border: 1.5px solid var(--border);
    position: relative; overflow: hidden;
    cursor: pointer;
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    transition: transform .1s, border-color .1s;
    margin-left: 6px;
  }

  [data-cat="create"] .color-picker-wrap:hover { border-color: #fff; transform: translateY(-1px); }

  [data-cat="create"] .clear-bg-btn {
    margin-left: 6px;
    display: flex; align-items: center; gap: 4px;
    background: transparent;
    border: 1.5px solid var(--text-dim);
    color: var(--text-dim);
    padding: 4px 8px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    transition: border-color .1s, color .1s, transform .1s;
  }

  [data-cat="create"] .clear-bg-btn svg { width: 12px; height: 12px; }

  [data-cat="create"] .clear-bg-btn:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-1px); }

  /* Hide the button when there's nothing to clear so it doesn't look broken. */
  [data-cat="create"] .clear-bg-btn.disabled { opacity: 0.35; pointer-events: none; }

  [data-cat="create"] .color-picker-wrap::after {
    content: '+'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: 18px;
    text-shadow: 0 0 3px #000;
    pointer-events: none;
  }

  [data-cat="create"] .color-picker-wrap input[type="color"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
  }


  /* STATUS */
  [data-cat="create"] .statusbar {
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    font-size: 10px; color: var(--text-dim);
    font-family: 'JetBrains Mono'; letter-spacing: 1px;
  }

  [data-cat="create"] .statusbar span {
    padding: 2px 8px; border: 1px solid var(--border);
    background: var(--bg-darkest);
  }

  [data-cat="create"] .statusbar .grow { flex: 1; border: 0; background: transparent; }


  /* TOAST */
  .toast {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-darkest);
    border: 2px solid var(--cyan);
    color: var(--cyan);
    padding: 12px 24px;
    font-family: 'JetBrains Mono'; font-size: 11px;
    letter-spacing: 2.5px; text-transform: uppercase;
    opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none; z-index: 2000;
  }

  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .toast.green { border-color: var(--green); color: var(--green); }