/* =====================================================================
   DESIGN TOKENS
   Every color/radius/space in this file resolves through a token below.
   Do not hardcode hex values elsewhere in the stylesheet — add a token
   to BOTH themes instead, or it will break on theme switch.
   js/theme.js sets --ui-scale, --ui-density and the --accent-* family
   at runtime; the rest are static per theme.
   ===================================================================== */
:root{
  /* structural tokens — theme-independent */
  --ui-scale:1;
  --ui-density:1;

  --radius-sm:3px;
  --radius-md:5px;
  --radius-lg:7px;

  --space-1:calc(2px * var(--ui-density));
  --space-2:calc(4px * var(--ui-density));
  --space-3:calc(6px * var(--ui-density));
  --space-4:calc(8px * var(--ui-density));
  --space-5:calc(12px * var(--ui-density));
  --space-6:calc(16px * var(--ui-density));

  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:calc(10px * var(--ui-scale));
  --text-sm:calc(11px * var(--ui-scale));
  --text-md:calc(12px * var(--ui-scale));
  --text-lg:calc(13px * var(--ui-scale));

  --h-topbar:calc(40px * var(--ui-scale));
  --h-doctabs:calc(30px * var(--ui-scale));
  --h-toolopts:calc(32px * var(--ui-scale));
  --h-statusbar:calc(24px * var(--ui-scale));
  --h-swatchstrip:calc(26px * var(--ui-scale));
  --w-toolbar:calc(40px * var(--ui-scale));
  --w-rightpanel:calc(252px * var(--ui-scale));
  --icon-size:calc(16px * var(--ui-scale));

  --dur-fast:.1s;
  --dur-base:.15s;
  --ease:cubic-bezier(.2,0,.2,1);

  /* Reference-derived typographic voice: thin, tracked-out, uppercase
     labels set against bold full-contrast content — the same contrast
     the reference uses between its spaced nav links and its heavy
     display headline. Applied to panel headers and field labels; NOT
     to body/value text, which stays at normal tracking and weight so
     dense numeric panels stay legible at small sizes. */
  --tracking-label:.7px;
  --weight-label:500;
  --weight-value:600;

  /* accent family — overwritten by js/theme.js at runtime */
  --accent:#e8e8e8;
  --accent-hover:#f5f5f5;
  --accent-active:#cfcfcf;
  --accent-subtle:#232323;
  --accent-border:#5a5a5a;
  --on-accent:#0d0d0d;
}

/* ---------- DARK (default) ---------- */
:root, :root[data-theme="dark"]{
  --bg-app:#141414;
  --bg-panel:#1b1b1b;
  --bg-panel-2:#202020;
  --bg-input:#242424;
  --bg-elevated:#242424;
  --bg-overlay:rgba(0,0,0,.55);

  --border:#333333;
  --border-soft:#2a2a2a;
  --border-strong:#454545;

  --text:#f2f2f2;
  --text-dim:#9a9a9a;
  --text-faint:#6b6b6b;

  --hover:#2c2c2c;
  --active:#3a3a3a;
  --active-border:#555555;
  --accent-line:#e8e8e8;

  --canvas-bg:#0d0d0d;
  --canvas-page:#ffffff;
  --scrollbar:#3a3a3a;
  --scrollbar-hover:#4a4a4a;
  --checker:#444444;

  --shadow-sm:0 2px 6px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:0 20px 60px rgba(0,0,0,.6);

  --handle-fill:#ffffff;
  --handle-stroke:#000000;
  --node-fill:#1a1a1a;
  --node-stroke:#ffffff;
  --guide-line:#e8e8e8;
  --node-accent:#9fd7ff;

  --danger:#f87171;
  --success:#4ade80;
  --warning:#fbbf24;

  /* Reference-derived: near-black recessed surface + soft glow, used
     sparingly for a small set of "elevated action" components (status
     pill, primary buttons) — not applied to general chrome, which stays
     at the app's normal density and contrast. */
  --surface-void:#050505;
  --glow-color:rgba(255,255,255,.28);
  --glow-ring:rgba(255,255,255,.16);

  color-scheme:dark;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"]{
  --tips-bg:#20262e;--tips-text:#f2f2f2;--tips-muted:#bec3ca;--tips-border:#39414a;--tips-badge:#4e5762;
  --bg-app:#f0f0f0;
  --bg-panel:#f7f7f7;
  --bg-panel-2:#ffffff;
  --bg-input:#ffffff;
  --bg-elevated:#ffffff;
  --bg-overlay:rgba(0,0,0,.35);

  --border:#d2d2d2;
  --border-soft:#e2e2e2;
  --border-strong:#b0b0b0;

  --text:#1a1a1a;
  --text-dim:#5c5c5c;
  --text-faint:#8a8a8a;

  --hover:#ebebeb;
  --active:#dcdcdc;
  --active-border:#b8b8b8;
  --accent-line:#1a1a1a;

  --canvas-bg:#c8c8c8;
  --canvas-page:#ffffff;
  --scrollbar:#c4c4c4;
  --scrollbar-hover:#aaaaaa;
  --checker:#cccccc;

  --shadow-sm:0 2px 6px rgba(0,0,0,.1);
  --shadow-md:0 8px 24px rgba(0,0,0,.14);
  --shadow-lg:0 20px 60px rgba(0,0,0,.18);

  --handle-fill:#ffffff;
  --handle-stroke:#333333;
  --node-fill:#ffffff;
  --node-stroke:#333333;
  --guide-line:#0066cc;
  --node-accent:#0066cc;

  --danger:#dc2626;
  --success:#16a34a;
  --warning:#d97706;

  /* The reference's dark chip reads as "elevated ink" against its own
     black page; on a light page a WHITE halo would be invisible, so the
     "glow" becomes a soft dark shadow instead — same intent (draw the
     eye, signal elevation), inverted for the surface it sits on. */
  --surface-void:#161616;
  --glow-color:rgba(0,0,0,.22);
  --glow-ring:rgba(0,0,0,.1);

  color-scheme:light;
}

/* canvas background override (Appearance > Canvas) */
:root[data-canvas-bg="light"]  { --canvas-bg:#e8e8e8; }
:root[data-canvas-bg="dark"]   { --canvas-bg:#0d0d0d; }
:root[data-canvas-bg="neutral"]{ --canvas-bg:#808080; }

/* Motion: honor the OS setting and the in-app override alike. */
:root[data-reduced-motion] *,
:root[data-reduced-motion] *::before,
:root[data-reduced-motion] *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Shared icon sizing — see js/icons.js for the drawing rules. */
.icon{width:var(--icon-size);height:var(--icon-size);flex-shrink:0;pointer-events:none;display:block;}

/* Consistent keyboard focus across every interactive control. Color is
   never the only signal: the ring has its own geometry and offset. */
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:var(--radius-sm);}
button:focus-visible,input:focus-visible,select:focus-visible,
[role="button"]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg-app);color:var(--text);
  font-family:var(--font-ui);font-size:var(--text-md);
  overflow:hidden;user-select:none;-webkit-user-select:none;}
button{font-family:inherit;font-size:var(--text-md);color:var(--text);background:transparent;border:none;cursor:pointer;}
input,select{font-family:inherit;font-size:var(--text-sm);color:var(--text);font-weight:var(--weight-value);background:var(--bg-input);
  border:1px solid var(--border);border-radius:3px;padding:3px 5px;}
input:focus,select:focus{outline:none;border-color:var(--accent);}
input[type=color]{padding:0;width:26px;height:22px;cursor:pointer;}
/* Precision slider system. The native range remains accessible and connected
   to existing property logic, but browser-default visuals are fully replaced. */
.pro-slider-range:not(.cp-hue-slider):not(.cp-alpha-slider){--slider-value:0%;appearance:none;-webkit-appearance:none;min-width:84px;height:20px;padding:0;background:transparent;cursor:pointer;touch-action:none;accent-color:transparent;}
.pro-slider-range:not(.cp-hue-slider):not(.cp-alpha-slider)::-webkit-slider-runnable-track{height:3px;border:0;border-radius:1px;background:linear-gradient(90deg,var(--accent) 0 var(--slider-value),var(--border-strong) var(--slider-value) 100%);}
.pro-slider-range:not(.cp-hue-slider):not(.cp-alpha-slider)::-moz-range-track{height:3px;border:0;border-radius:1px;background:linear-gradient(90deg,var(--accent) 0 var(--slider-value),var(--border-strong) var(--slider-value) 100%);}
.pro-slider-range::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;margin-top:-5.5px;border:1px solid var(--handle-stroke);border-radius:2px;background:var(--handle-fill);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform var(--dur-fast),border-color var(--dur-fast);}
.pro-slider-range::-moz-range-thumb{width:10px;height:14px;border:1px solid var(--handle-stroke);border-radius:2px;background:var(--handle-fill);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform var(--dur-fast),border-color var(--dur-fast);}
.pro-slider-range:hover::-webkit-slider-thumb,.pro-slider-range:focus-visible::-webkit-slider-thumb,.slider-dragging .pro-slider-range::-webkit-slider-thumb{border-color:var(--accent);transform:scale(1.12);}
.pro-slider-range:hover::-moz-range-thumb,.pro-slider-range:focus-visible::-moz-range-thumb,.slider-dragging .pro-slider-range::-moz-range-thumb{border-color:var(--accent);transform:scale(1.12);}
.pro-slider-range:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:2px;}
.pro-slider-range:disabled{opacity:.42;cursor:not-allowed}.pro-slider-range.at-min{--slider-min-state:1}.pro-slider-range.at-max{--slider-max-state:1}.pro-slider-range.is-modified::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--accent-subtle),0 1px 2px rgba(0,0,0,.35)}
.pro-slider-range.is-mixed:not(.cp-hue-slider):not(.cp-alpha-slider)::-webkit-slider-runnable-track{background:repeating-linear-gradient(90deg,var(--text-faint) 0 3px,var(--border-strong) 3px 6px)}.pro-slider-range.is-mixed:not(.cp-hue-slider):not(.cp-alpha-slider)::-moz-range-track{background:repeating-linear-gradient(90deg,var(--text-faint) 0 3px,var(--border-strong) 3px 6px)}
.pro-slider-value{width:52px!important;min-width:44px!important;height:var(--control-height)!important;min-height:var(--control-height)!important;padding:2px 5px!important;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;cursor:ew-resize;}
.pro-slider-value:focus{cursor:text}.pro-slider-value.is-scrubbing{border-color:var(--accent)!important;background:var(--active)!important;cursor:ew-resize;user-select:none}.pro-slider-unit{margin-left:-4px;color:var(--text-faint);font-size:var(--text-xs);white-space:nowrap;pointer-events:none}
@media(max-width:767px){.pro-slider-range:not(.cp-hue-slider):not(.cp-alpha-slider){height:32px;min-width:72px}}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover);}
#app{display:flex;flex-direction:column;height:100%;}
body.app-starting #app{visibility:hidden;opacity:0;pointer-events:none;}
body.app-ready #app{visibility:visible;opacity:1;}
#topbar{height:var(--h-topbar);background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 8px;flex-shrink:0;gap:2px;}
#logo{font-weight:600;letter-spacing:.3px;font-size:var(--text-lg);color:var(--text);padding:0 12px 0 4px;border-right:1px solid var(--border-soft);margin-right:4px;white-space:nowrap;}
.menu-item{position:relative;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);color:var(--text-dim);letter-spacing:.2px;}
.menu-item:hover,.menu-item.open{background:var(--hover);color:var(--text);}
.menu-dropdown{display:none;position:absolute;top:100%;left:0;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:4px;min-width:200px;padding:4px;z-index:var(--z-menu);box-shadow:var(--shadow-md);}
.menu-item.open .menu-dropdown{display:block;}
.menu-row{padding:6px 10px;border-radius:3px;display:flex;justify-content:space-between;color:var(--text);white-space:nowrap;gap:20px;}
.menu-row:hover{background:var(--hover);}.menu-row.disabled{color:var(--text-faint);pointer-events:none;}.menu-sep{height:1px;background:var(--border-soft);margin:4px 2px;}.menu-kbd{color:var(--text-faint);font-size:10px;}
#topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}.tb-btn{width:26px;height:26px;border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);}.tb-btn:hover{background:var(--hover);color:var(--text);}.tb-btn.disabled{opacity:.3;pointer-events:none;}#zoom-readout{width:52px;text-align:center;color:var(--text-dim);}#page-select{max-width:140px;}
#main{flex:1;display:flex;min-height:0;}
#lefttoolbar{width:var(--w-toolbar);background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:1px;flex-shrink:0;overflow-y:auto;}.tool-btn{width:30px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);position:relative;}.tool-btn:hover{background:var(--hover);color:var(--text);}.tool-btn.active{background:var(--active);color:var(--text);box-shadow:inset 0 0 0 1px var(--active-border),0 0 10px var(--glow-color);}.tool-btn svg{width:16px;height:16px;pointer-events:none;}.tool-sep{width:20px;height:1px;background:var(--border-soft);margin:5px 0;}.tool-flyout{position:fixed;z-index:var(--z-flyout);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:4px;padding:4px;display:flex;flex-direction:column;gap:1px;box-shadow:var(--shadow-md);}.tool-flyout button{display:flex;align-items:center;gap:7px;min-width:154px;height:28px;padding:0 7px;border-radius:3px;text-align:left;color:var(--text-dim);}.tool-flyout button:hover,.tool-flyout button.active{background:var(--active);color:var(--text);}.tool-flyout button svg{width:16px;height:16px;flex-shrink:0;}.brush-cursor{fill:var(--accent-subtle);stroke:var(--node-stroke);stroke-width:1;pointer-events:none;}.brush-cursor-center{stroke:var(--node-stroke);stroke-width:1;pointer-events:none;}
#canvasarea{flex:1;position:relative;background:var(--bg-app);display:flex;flex-direction:column;min-width:0;}#toolopts{height:var(--h-toolopts);background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:14px;flex-shrink:0;color:var(--text-dim);overflow-x:auto;}.opt-group{display:flex;align-items:center;gap:5px;white-space:nowrap;}.opt-group label{color:var(--text-faint);}#viewport-wrap{flex:1;position:relative;overflow:hidden;display:grid;grid-template-columns:18px 1fr;grid-template-rows:18px 1fr;}#corner{background:var(--bg-panel-2);border-right:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}#ruler-h{background:var(--bg-panel-2);border-bottom:1px solid var(--border-soft);position:relative;overflow:hidden;}#ruler-v{background:var(--bg-panel-2);border-right:1px solid var(--border-soft);position:relative;overflow:hidden;}#viewport{position:relative;overflow:auto;background:var(--canvas-bg);cursor:default;touch-action:none;}#viewport svg{display:block;}.ruler-tick{position:absolute;font-size:9px;color:var(--text-faint);}
#rightpanel{width:var(--w-rightpanel);background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}.panel-section{border-bottom:1px solid var(--border-soft);}.panel-header{padding:var(--space-4) var(--space-5);font-weight:var(--weight-label);color:var(--text-dim);letter-spacing:var(--tracking-label);text-transform:uppercase;font-size:var(--text-xs);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:color var(--dur-fast) var(--ease);}.panel-header:hover{color:var(--text);}.panel-body{padding:8px 10px;display:flex;flex-direction:column;gap:8px;}.panel-body.collapsed{display:none;}.row{display:flex;align-items:center;gap:6px;}.row label{width:16px;color:var(--text-faint);flex-shrink:0;font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;}.row input[type=number],.row input[type=text]{width:100%;min-width:0;}.row2{display:flex;gap:6px;}.row2 .field{flex:1;display:flex;align-items:center;gap:4px;min-width:0;}.field label{color:var(--text-faint);flex-shrink:0;font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;}.swatch{width:22px;height:22px;border-radius:3px;border:1px solid var(--border);cursor:pointer;flex-shrink:0;background-image:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;}.fill-type-btns{display:flex;gap:3px;}.fill-type-btns button{flex:1;padding:4px 0;border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-size:10px;}.fill-type-btns button.active{background:var(--active);color:var(--text);border-color:var(--active-border);}.stops-editor{display:flex;flex-direction:column;gap:4px;}.gradient-bar{height:16px;border-radius:3px;position:relative;border:1px solid var(--border);cursor:crosshair;}.stop-handle{position:absolute;top:-2px;width:8px;height:20px;border-radius:2px;border:1px solid var(--handle-stroke);transform:translateX(-4px);cursor:pointer;}.stop-handle.selected{outline:1px solid var(--accent);}.btn{padding:5px 8px;border:1px solid var(--border);border-radius:3px;color:var(--text-dim);display:flex;align-items:center;justify-content:center;gap:5px;}.btn:hover{background:var(--hover);color:var(--text);}.btn.full{width:100%;}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}.icon-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);}.icon-btn:hover{background:var(--hover);color:var(--text);}.icon-btn.active{background:var(--active);color:var(--text);border-color:var(--active-border);}.icon-btn svg{width:14px;height:14px;}
#layerlist{display:flex;flex-direction:column;gap:1px;max-height:260px;overflow-y:auto;}.layer-row{display:flex;align-items:center;gap:5px;padding:4px 4px 4px 6px;border-radius:3px;cursor:pointer;}.layer-row:hover{background:var(--hover);}.layer-row.selected{background:var(--active);}.layer-row.dragging{opacity:.4;}.layer-row .lname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}.layer-row.dim .lname{color:var(--text-faint);}.layer-row button{width:18px;height:18px;color:var(--text-faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}.layer-row button:hover{color:var(--text);background:var(--active);}.layer-row button[aria-pressed="true"]{color:var(--accent);}.layer-row .lindent{flex-shrink:0;}.layer-thumb{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-faint);}.layer-row.selected .layer-thumb{color:var(--text-dim);}
.layer-disclosure{width:14px;height:14px;flex-shrink:0;color:var(--text-faint);}
.layer-disclosure-spacer{visibility:hidden;pointer-events:none;}
.layer-rename-input{flex:1;min-width:0;font-size:var(--text-sm);padding:1px 4px;}
#statusbar{height:var(--h-statusbar);background:var(--bg-panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:16px;color:var(--text-faint);flex-shrink:0;letter-spacing:.2px;}#statusbar span b{color:var(--text);font-weight:var(--weight-value);}
.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);}.modal{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:6px;min-width:340px;max-width:560px;box-shadow:var(--shadow-lg);}.modal-header{padding:12px 16px;border-bottom:1px solid var(--border-soft);font-weight:600;display:flex;justify-content:space-between;}.modal-body{padding:16px;display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto;}.modal-footer{padding:12px 16px;border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end;gap:8px;}.modal-footer .btn{min-width:70px;}.proj-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:4px;}.proj-item:hover{background:var(--hover);}
#toasts{position:fixed;bottom:calc(var(--h-statusbar) + var(--h-swatchstrip) + var(--h-widgetrow) + 12px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:var(--z-toast);}.toast{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:5px;font-size:11.5px;box-shadow:var(--shadow-md);animation:toastin .15s ease;}@keyframes toastin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.sel-handle{fill:var(--handle-fill);stroke:var(--handle-stroke);stroke-width:1;cursor:pointer;}.sel-rotate{fill:var(--handle-fill);stroke:var(--handle-stroke);stroke-width:1;cursor:grab;}.marquee{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 2;}.node-anchor{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:1.4;cursor:pointer;}.node-anchor.selected{fill:var(--accent);}.node-handle{fill:var(--handle-stroke);stroke:var(--node-stroke);stroke-width:1.2;cursor:pointer;}.node-handle-line{stroke:var(--text-dim);stroke-width:1;}.smart-guide{stroke:var(--guide-line);stroke-width:.75;stroke-dasharray:2 2;pointer-events:none;}
#onboard{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-onboarding);}#onboard .modal{max-width:460px;}#onboard ol{margin:0;padding-left:18px;line-height:1.9;color:var(--text-dim);}#onboard ol b{color:var(--text);}
#doctabs{height:var(--h-doctabs);background:var(--bg-panel-2);border-bottom:1px solid var(--border);display:flex;align-items:stretch;flex-shrink:0;overflow-x:auto;padding:0 4px;gap:2px;}.doc-tab{display:flex;align-items:center;gap:6px;padding:0 10px;min-width:70px;max-width:180px;border-radius:5px 5px 0 0;color:var(--text-dim);cursor:pointer;position:relative;top:1px;border:1px solid transparent;white-space:nowrap;}.doc-tab .dt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.doc-tab:hover{background:var(--hover);color:var(--text);}.doc-tab.active{background:var(--bg-app);color:var(--text);border-color:var(--border);border-bottom-color:var(--bg-app);}.doc-tab .dt-close{opacity:.5;width:14px;height:14px;flex-shrink:0;border-radius:3px;display:flex;align-items:center;justify-content:center;}.doc-tab .dt-close:hover{opacity:1;background:var(--active);}.doc-tab-add{width:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-faint);border-radius:4px;align-self:center;height:22px;}.doc-tab-add:hover{background:var(--hover);color:var(--text);}
#swatchstrip{height:var(--h-swatchstrip);background:var(--bg-panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 8px;gap:4px;flex-shrink:0;}.swatch-indicator{display:flex;position:relative;width:20px;height:20px;flex-shrink:0;margin-right:6px;}.swatch-indicator .si-fill,.swatch-indicator .si-stroke{position:absolute;width:15px;height:15px;border-radius:2px;border:1px solid var(--handle-stroke);}.swatch-indicator .si-fill{left:0;top:0;z-index:2;}.swatch-indicator .si-stroke{left:6px;top:6px;background:transparent;z-index:1;}#swatch-scroll{display:flex;gap:3px;overflow-x:auto;flex:1;}.swatch-chip{width:17px;height:17px;border-radius:2px;border:1px solid var(--border);flex-shrink:0;cursor:pointer;}.swatch-chip:hover{outline:1px solid var(--accent);}
[hidden]{display:none !important;}
#viewport[data-tool="smooth"],#viewport[data-tool="smear"],#viewport[data-tool="twirl"],#viewport[data-tool="attract"],#viewport[data-tool="smudge"],#viewport[data-tool="roughen"]{cursor:crosshair;}
.node-endpoint-start,.node-endpoint-end{fill:none;stroke:var(--node-stroke);stroke-width:1;pointer-events:none;}.node-endpoint-start{stroke-dasharray:2 2;}.node-endpoint-end{stroke:var(--node-accent);}.node-marquee{fill:none;stroke:var(--node-accent);stroke-width:1;stroke-dasharray:3 2;pointer-events:none;}
.boolean-btn{width:auto;min-width:62px;padding:3px 6px;font-size:10px;}
.boolean-btn svg{width:14px;height:14px;flex-shrink:0;}.boolean-btn span{white-space:nowrap;}
.snap-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 8px;}
.snap-modes label{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:11px;white-space:nowrap;cursor:pointer;}
.snap-modes label:focus-within,.panel-body label:focus-within{outline:1px solid var(--accent-line);outline-offset:1px;}
.snap-modes input[type=checkbox]{flex-shrink:0;accent-color:var(--accent);cursor:pointer;}
.multi-select-header{color:var(--text-dim);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-label);}
.multi-select-note{color:var(--text-faint);font-size:var(--text-xs);line-height:1.4;margin-top:2px;}
@media (max-width:900px){
  #rightpanel{width:210px;}
  .snap-modes{grid-template-columns:1fr;}
}

/* ---------- Appearance panel ---------- */
.appearance-group{display:flex;flex-direction:column;gap:var(--space-2);}
.appearance-group > .ag-label{color:var(--text-faint);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.5px;}
.seg{display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.seg button{flex:1;padding:var(--space-2) 0;font-size:var(--text-sm);color:var(--text-dim);
  background:transparent;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  border-right:1px solid var(--border);}
.seg button:last-child{border-right:none;}
.seg button:hover{background:var(--hover);color:var(--text);}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600;}
.accent-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;}
.accent-dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);
  cursor:pointer;flex-shrink:0;position:relative;
  transition:transform var(--dur-fast) var(--ease);}
.accent-dot:hover{transform:scale(1.12);}
/* Selected accent is marked by a ring AND a checkmark, so the state is
   never communicated by color alone. */
.accent-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg-panel),0 0 0 3px var(--accent);}
.accent-dot[aria-pressed="true"]::after{content:"";position:absolute;inset:0;margin:auto;
  width:6px;height:3px;border-left:1.5px solid var(--on-accent);border-bottom:1.5px solid var(--on-accent);
  transform:rotate(-45deg) translate(1px,-1px);}
.contrast-note{color:var(--text-faint);font-size:var(--text-xs);line-height:1.4;}
.contrast-note[data-level="warn"]{color:var(--warning);}

/* ---------- Reference-informed components: pill, status, primary glow ----------
   Extracted from a dark marketing-hero reference (dot badge, hairline
   border, soft glow on primary buttons). Applied only to a small set of
   "elevated action" elements — the toolbar/panel density and proportions
   elsewhere are unchanged, since a spacious hero layout would work against
   a dense professional tool. */

.pill{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-5);
  border-radius:999px;border:1px solid var(--border);
  background:var(--surface-void);color:var(--text-dim);
  font-size:var(--text-sm);white-space:nowrap;
}
.pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--text-faint);}

/* Save-status indicator (topbar). Dot color + text both carry the state,
   so it never depends on color alone. */
#save-status{margin-left:var(--space-4);cursor:default;}
#save-status[data-state="saved"] .pill-dot{background:var(--success);}
#save-status[data-state="saving"] .pill-dot{background:var(--accent);animation:pulse-dot 1.1s ease-in-out infinite;}
#save-status[data-state="unsaved"] .pill-dot{background:var(--warning);}
#save-status[data-state="error"] .pill-dot{background:var(--danger);}
#save-status[data-state="error"]{border-color:var(--danger);color:var(--danger);}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.75);}}

/* Primary action button: dark ink fill, hairline border, soft glow on
   hover/focus. Reserved for the single most important action in a given
   context (a modal's confirm button, not every button — see .btn below
   for the default, low-emphasis treatment everything else keeps). */
.btn.primary{
  background:var(--surface-void);color:var(--text);
  border-color:var(--border-strong);
  box-shadow:0 0 0 1px var(--glow-ring);
  transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.btn.primary:hover{box-shadow:0 0 0 1px var(--glow-ring),0 0 14px var(--glow-color);border-color:var(--text-dim);}
.btn.primary:focus-visible{box-shadow:0 0 0 1px var(--glow-ring),0 0 14px var(--glow-color);}

/* ---------- Color picker ---------- */
.cp-anchor-swatch{width:26px;height:22px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;flex-shrink:0;
  background-image:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%);
  background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:transparent;background-blend-mode:normal;}
.cp-anchor-swatch:hover{outline:1px solid var(--accent-line);}
.color-picker{position:relative;z-index:var(--z-popover);display:flex;flex-direction:column;gap:var(--space-3);width:100%;min-width:0;overflow:hidden;
  padding:var(--space-4);margin:var(--space-2) 0;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);}
.color-picker.cp-floating{position:fixed;width:280px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;z-index:var(--z-flyout);margin:0;}
.cp-swatch-row{display:flex;gap:2px;height:28px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);}
.cp-swatch{flex:1;border:none;cursor:default;}
.cp-swatch-prev{cursor:pointer;}
.cp-sv-area{position:relative;height:120px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:crosshair;touch-action:none;
  background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--sv-hue,0),100%,50%));}
.cp-sv-area:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.cp-sv-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--handle-fill);box-shadow:0 0 0 1px var(--handle-stroke);
  transform:translate(-6px,-6px);pointer-events:none;}
.cp-slider-row{display:flex;align-items:center;min-width:0;}
.cp-hue-slider,.cp-alpha-slider{width:100%;height:20px;min-width:120px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:none;}
.cp-hue-slider::-webkit-slider-runnable-track{height:10px;border-radius:5px;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border:1px solid var(--border);}
.cp-hue-slider::-moz-range-track{height:10px;border-radius:5px;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border:1px solid var(--border);}
.cp-alpha-slider::-webkit-slider-runnable-track{height:10px;border-radius:5px;border:1px solid var(--border);
  background-image:linear-gradient(to right,transparent,var(--alpha-color,var(--text))),linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%);
  background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0px;}
.cp-alpha-slider::-moz-range-track{height:10px;border-radius:5px;border:1px solid var(--border);
  background-image:linear-gradient(to right,transparent,var(--alpha-color,var(--text)));}
.cp-hue-slider::-webkit-slider-thumb,.cp-alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--handle-fill);border:2px solid var(--handle-stroke);margin-top:-3px;cursor:pointer;}
.cp-hue-slider::-moz-range-thumb,.cp-alpha-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--handle-fill);border:2px solid var(--handle-stroke);cursor:pointer;}
.cp-mode-tabs{width:100%;}
.cp-fields{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.cp-fields .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:6px}.cp-fields .field{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0}.cp-fields .field label{order:0;width:auto}.cp-fields .field input{order:1;width:100%;min-width:0;text-align:center}
.cp-hsl-controls{display:flex;flex-direction:column;gap:6px}.cp-hsl-row{display:grid;grid-template-columns:14px minmax(60px,1fr) 48px 12px;align-items:center;gap:5px}.cp-hsl-row label{color:var(--text-faint);font-size:var(--text-xs)}.cp-hsl-row input[type=range]{width:100%;min-width:0}.cp-hsl-value{width:48px!important;min-width:0!important;text-align:right}.cp-hsl-row>span{color:var(--text-faint);font-size:var(--text-xs)}
.cp-approx-note{color:var(--text-faint);font-size:var(--text-xs);line-height:1.4;}
.cp-empty-state{color:var(--text-faint);font-size:var(--text-xs);line-height:1.5;padding:var(--space-3) 0;}
.cp-empty-state code{font-family:var(--font-mono);background:var(--bg-input);padding:1px 4px;border-radius:3px;}
.cp-tools-row{display:flex;gap:var(--space-2);}
.cp-hex-input{flex:1;text-transform:lowercase;}
.cp-recent-row{display:flex;gap:4px;flex-wrap:wrap;}
.cp-recent-chip{width:18px;height:18px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;padding:0;}
.cp-recent-chip:hover{outline:1px solid var(--accent-line);}
.cp-pantone-search{width:100%;}
.cp-pantone-results{display:flex;gap:4px;flex-wrap:wrap;margin-top:var(--space-2);}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:auto}.btn:disabled:hover{background:transparent;color:var(--text-dim)}

/* ---------- Palettes panel ---------- */
.palette-list{display:flex;flex-direction:column;gap:1px;max-height:140px;overflow-y:auto;}
.palette-list-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;}
.palette-list-item:hover{background:var(--hover);}
.palette-list-item.selected{background:var(--active);}
.palette-list-item .lname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:var(--text-sm);}
.palette-list-item button{width:18px;height:18px;color:var(--text-faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
.palette-list-item button:hover{color:var(--text);background:var(--active);}
.palette-list-item button[aria-pressed="true"]{color:var(--accent);}
.palette-mini-row{display:flex;gap:1px;flex-shrink:0;}
.palette-mini-swatch{width:8px;height:14px;border-radius:1px;display:inline-block;}
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:4px;}
.palette-chip{width:22px;height:22px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;padding:0;}
.palette-chip:hover{outline:1px solid var(--accent-line);}
.palette-chip.dragging{opacity:.4;}

/* =====================================================================
   RESPONSIVE SYSTEM
   Breakpoints mirror js/responsive.js's BREAKPOINTS constant — mobile
   <768px, tablet 768-1199px, desktop >=1200px. [data-breakpoint] is set
   by that module; media queries here are the CSS-only fallback for the
   same boundaries (before JS runs, or if JS is disabled) and must stay
   numerically identical to it.
   ===================================================================== */
:root{
  --tips-bg:#20262e;--tips-text:#f2f2f2;--tips-muted:#bec3ca;--tips-border:#39414a;--tips-badge:#4e5762;
  --touch-min:44px;
  --touch-comfortable:48px;
  --h-bottom-toolbar:60px;
  --h-drawer-handle:28px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
}

/* ---------- mobile bottom toolbar ---------- */
#mobile-bottom-toolbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  background:var(--bg-panel);border-top:1px solid var(--border);
  padding:var(--space-2) var(--space-2) calc(var(--space-2) + var(--safe-b)) var(--space-2);
  align-items:center;gap:var(--space-2);overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
#mobile-bottom-toolbar .mbt-btn{
  min-width:var(--touch-comfortable);min-height:var(--touch-comfortable);
  flex-shrink:0;border-radius:var(--radius-md);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
}
#mobile-bottom-toolbar .mbt-btn.active{background:var(--active);color:var(--text);}
#mobile-bottom-toolbar .mbt-btn .icon{width:22px;height:22px;}
#mobile-bottom-toolbar .mbt-more{border-left:1px solid var(--border-soft);margin-left:var(--space-1);padding-left:var(--space-3);}

/* ---------- tool drawer (mobile "More Tools") ---------- */
#tool-drawer-overlay{
  display:none;position:fixed;inset:0;z-index:900;background:var(--bg-overlay);
}
#tool-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:901;max-height:78vh;
  background:var(--bg-panel);border-top:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-b));
  overflow-y:auto;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:var(--space-4);
}
.drawer-handle{width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:var(--space-2) auto;flex-shrink:0;}
.drawer-title{display:flex;align-items:center;justify-content:space-between;}
.drawer-title h2{font-size:var(--text-lg);font-weight:600;color:var(--text);margin:0;}
.drawer-close{width:var(--touch-min);height:var(--touch-min);border-radius:50%;color:var(--text-dim);display:flex;align-items:center;justify-content:center;}
.drawer-category-label{color:var(--text-faint);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-label);margin-bottom:var(--space-2);}
.drawer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:var(--space-2);}
.drawer-btn{
  min-height:var(--touch-comfortable);border-radius:var(--radius-md);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:var(--space-2);color:var(--text-dim);
}
.drawer-btn.active{background:var(--active);color:var(--text);border-color:var(--active-border);}
.drawer-btn .icon{width:20px;height:20px;}
.drawer-btn span{font-size:var(--text-xs);text-align:center;line-height:1.2;}

/* ---------- bottom sheet (mobile properties/layers panel) ---------- */
:root[data-breakpoint="mobile"] #rightpanel{
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  width:auto;max-height:70vh;
  background:var(--bg-panel);border-top:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-lg);
  transform:translateY(calc(100% - var(--h-drawer-handle) - var(--safe-b) - 2px));
  transition:transform var(--dur-base) var(--ease);
  padding-bottom:var(--safe-b);
}
:root[data-breakpoint="mobile"] #rightpanel.sheet-open{ transform:translateY(0); }
.sheet-handle{ display:none; width:100%; padding:var(--space-2) 0; background:transparent; border:none; cursor:pointer; }
:root[data-breakpoint="mobile"] .sheet-handle{ display:flex; align-items:center; justify-content:center; }
.sheet-handle::after{ content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--border-strong); }

/* ---------- mobile/tablet shell restructuring ---------- */
@media (max-width: 767px){
  #lefttoolbar{ display:none; }
  #mobile-bottom-toolbar{ display:flex; }
  #main{ padding-bottom:var(--h-bottom-toolbar); }
  #topbar{ padding-left:calc(8px + var(--safe-l)); padding-right:calc(8px + var(--safe-r)); padding-top:var(--safe-t); height:auto; min-height:var(--h-topbar); flex-wrap:wrap; }
  #logo{ display:none; } /* reclaim space for essential controls on a small phone */
  #menus{ order:3; width:100%; }
  #topbar-right{ gap:var(--space-2); }
  #topbar-right .tb-btn{ min-width:var(--touch-min); min-height:var(--touch-min); }
  #swatchstrip, #statusbar{ display:none; } /* redundant with the bottom sheet + toolbar on a small phone */
  .modal{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; margin:0; }
  .modal-body{ max-height:none; flex:1; }
}

@media (min-width: 768px) and (max-width: 1199px){
  /* Tablet: keep the persistent desktop layout (spec explicitly wants
     tablet to use the larger screen, not the mobile layout) but touch-
     size the controls, since tablets are touch-primary, and trim the
     right panel width a little so the canvas keeps more room. */
  #mobile-bottom-toolbar, #tool-drawer-overlay, #tool-drawer{ display:none; }
  :root{ --w-rightpanel:min(252px, 28vw); }
  .tool-btn{ width:36px; height:34px; }
  .icon-btn, .tb-btn{ min-width:var(--touch-min); min-height:var(--touch-min); }
  .layer-row{ min-height:var(--touch-min); }
}

/* Touch targets: applied whenever the CURRENT input is coarse (a real
   touch/pen interaction happened), not just by breakpoint — a touch-
   screen laptop at a wide window is still "desktop" layout but still
   benefits from slightly larger hit targets once the user actually
   touches it. See js/responsive.js's coarse-pointer note. */
:root.is-touch .tool-btn{ width:var(--touch-min); height:var(--touch-min); }
:root.is-touch .icon-btn{ width:var(--touch-min); height:var(--touch-min); }
:root.is-touch .layer-row{ min-height:var(--touch-min); }
:root.is-touch .swatch-chip{ width:24px; height:24px; }
:root.is-touch .palette-chip{ width:28px; height:28px; }
:root.is-touch input, :root.is-touch select{ min-height:32px; }
:root.is-touch .cp-recent-chip{ width:24px; height:24px; }

@media (max-width: 767px){
  .tool-btn, .icon-btn, .tb-btn{ width:var(--touch-comfortable); height:var(--touch-comfortable); }
  .layer-row{ min-height:var(--touch-comfortable); }
  .swatch-chip{ width:28px; height:28px; }
  .palette-chip{ width:32px; height:32px; }
  input, select, .btn{ min-height:36px; }
}
/* Node controls retain their screen-space stroke weight at every canvas zoom. */
#nodeOverlay .node-anchor,#nodeOverlay .node-handle,#nodeOverlay .node-handle-line,#nodeOverlay .node-endpoint-start,#nodeOverlay .node-endpoint-end,#nodeOverlay .node-marquee{vector-effect:non-scaling-stroke}
#nodeOverlay .node-anchor{stroke-width:1;fill:var(--node-fill)}
#nodeOverlay .node-anchor.selected{fill:var(--accent);stroke:var(--node-stroke)}
#nodeOverlay .node-handle{stroke-width:1}
#nodeOverlay .node-handle-line{stroke-width:1;pointer-events:none;opacity:.7}
.modal.palette-generator { width: min(900px, calc(100vw - 32px)); min-width:0; max-width:900px; }
.pg-controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.pg-controls label { display:flex; gap:6px; align-items:center; }
.pg-controls input { width:60px; }
.pg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin-bottom:16px; }
.pg-column { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pg-column input { width:100%; text-align:center; }
.pg-swatch { height:160px; border-radius:var(--radius-md); border:1px solid var(--border); }
@media (max-width:600px) { .pg-swatch { height:85px; } }
.harmony-wheel { width:100%; max-width:260px; align-self:center; touch-action:none; cursor:crosshair; }
.harmony-swatches { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.harmony-swatch { height:36px; border:2px solid var(--border); border-radius:var(--radius-sm); }
.harmony-swatch[aria-pressed="true"] { border-color:var(--text); }
.harmony-sliders .row { display:flex; justify-content:space-between; gap:8px; }
.harmony-sliders input { min-width:0; width:60%; }
#canvas-colors { position:relative; display:flex; flex-direction:column; align-items:stretch; flex-shrink:0; min-width:0; background:var(--bg-panel); border-top:1px solid var(--border); }
#bottom-color-controls { order:1; display:flex; align-items:center; gap:4px; height:var(--h-widgetrow); min-width:0; padding:0 8px; border-bottom:1px solid var(--border-soft); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; flex-shrink:0; }
#bottom-color-controls::-webkit-scrollbar { display:none; }
#bottom-color-controls > * { flex-shrink:0; }
#bottom-color-controls .btn { height:24px; min-height:24px; padding:0 8px; gap:5px; font-size:11px; color:var(--text-dim); background:transparent; border-color:transparent; }
#bottom-color-controls .btn:hover, #bottom-color-controls .btn[aria-expanded="true"] { background:var(--hover); color:var(--text); }
#canvas-colors #swatchstrip { order:2; flex:0 0 auto; width:100%; min-width:0; display:flex; height:var(--h-swatchstrip); border-top:0; }
#canvas-colors .swatch-chip { width:22px; height:22px; }
#color-tools-drawer:not([hidden]) { display:block; position:absolute; right:0; bottom:100%; width:min(660px,100%); max-height:min(300px,45vh); overflow:auto; z-index:var(--z-panel); padding:10px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-bottom:0; border-radius:var(--radius-md) var(--radius-md) 0 0; box-shadow:var(--shadow-md); }
#color-tools-drawer .panel-header { display:none; }
#color-tools-drawer #pb-harmony { display:grid; grid-template-columns:200px minmax(140px,1fr) minmax(150px,1fr); gap:8px; }
#color-tools-drawer .harmony-wheel { grid-column:1; grid-row:1 / span 5; width:180px; }
@media(max-width:600px) { #color-tools-drawer #pb-harmony { grid-template-columns:120px minmax(130px,1fr); } #color-tools-drawer .harmony-wheel { width:120px; } }
#canvas-colors .swatch-chip { border-radius:0; width:20px; height:22px; }
#canvas-colors #swatch-scroll { gap:0; padding-bottom:2px; }
.swatch-none { background:var(--bg-panel); color:var(--text); font-size:20px; line-height:16px; }
.color-hover-card { position:fixed; z-index:var(--z-tooltip); width:190px; max-width:calc(100vw - 16px); box-sizing:border-box; padding:8px; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-md); pointer-events:none; font-size:var(--text-sm); }
.color-hover-card[hidden] { display:none; }
.color-hover-preview { height:40px; border:1px solid var(--border-soft); border-radius:var(--radius-md); margin-bottom:6px; }
.color-hover-name { display:block; margin-bottom:5px; }
.color-hover-card dl { display:grid; grid-template-columns:auto 1fr; gap:4px 8px; margin:0 0 5px; }
.color-hover-card dt { font-weight:600; }
.color-hover-card dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.color-hover-card small { display:block; color:var(--text-dim); font-size:var(--text-xs); line-height:1.3; }
.color-hover-meaning { margin:6px 0 4px; padding-top:5px; border-top:1px solid var(--border-soft); line-height:1.3; }

.design-tips-trigger { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--bg-input); border-radius:var(--radius-sm); }
.design-tips-trigger svg { width:14px; height:14px; }
.design-tips-trigger:hover { background:var(--hover); }
.design-tips-trigger[aria-expanded="true"] { color:var(--accent); border-color:var(--accent-border); background:var(--active); }
.design-tips-panel { position:absolute; right:16px; bottom:18px; z-index:var(--z-panel); width:296px; max-width:calc(100% - 40px); max-height:calc(100% - 40px); overflow:auto; box-sizing:border-box; padding:20px; background:var(--tips-bg); color:var(--tips-text); border:1px solid var(--tips-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); opacity:0; transform:translateY(6px); transition:opacity .16s ease,transform .16s ease; pointer-events:none; }
.design-tips-panel[hidden] { display:none; }
.design-tips-panel { display:flex; flex-direction:column; overflow:hidden; }
.design-tips-header, .design-tips-subtitle, .design-tips-more { flex-shrink:0; }
.design-tips-panel .design-tips-list { min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--tips-badge) transparent; padding-right:8px; }
.design-tips-list::-webkit-scrollbar { width:5px; }
.design-tips-list::-webkit-scrollbar-track { background:transparent; }
.design-tips-list::-webkit-scrollbar-thumb { background:var(--tips-badge); border-radius:var(--radius-sm); }
.design-tips-list::-webkit-scrollbar-thumb:hover { background:var(--tips-muted); }
.design-tips-panel.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }
.design-tips-header { display:flex; align-items:center; gap:9px; }
.design-tips-header svg { width:18px; height:18px; }
.design-tips-header h2 { margin:0; font-size:var(--text-lg); font-weight:600; }
.design-tips-close { margin-left:auto; padding:3px; color:var(--tips-muted); display:flex; }
.design-tips-close svg { width:14px; height:14px; }
.design-tips-subtitle { color:var(--tips-muted); line-height:1.5; margin:12px 0 24px; font-size:var(--text-sm); }
.design-tips-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; }
.design-tips-list li { display:grid; grid-template-columns:18px 28px 1fr; gap:8px; align-items:start; }
.design-tips-number { border-radius:50%; background:var(--tips-badge); text-align:center; line-height:18px; font-size:var(--text-xs); }
.design-tips-item-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--tips-border); }
.design-tips-item-icon svg { width:18px; height:18px; }
.design-tips-item-title { padding:0; font-size:var(--text-sm); font-weight:600; color:var(--tips-text); text-align:left; }
.design-tips-item-title:hover { text-decoration:underline; }
.design-tips-list p { margin:5px 0 0; font-size:var(--text-sm); line-height:1.5; }
.design-tips-list a { color:var(--tips-muted); font-size:var(--text-xs); }
.design-tips-more { width:100%; border-top:1px solid var(--tips-border); margin-top:20px; padding:14px 0 0; text-align:left; color:var(--tips-muted); font-size:var(--text-sm); }
@media(max-width:1000px) { .design-tips-panel { width:270px; padding:16px; right:10px; bottom:10px; } .design-tips-list { gap:18px; } }
@media(max-width:600px) { .design-tips-panel { right:8px; bottom:8px; width:280px; max-width:calc(100% - 30px); max-height:calc(100% - 30px); } }
@media(prefers-reduced-motion:reduce) { .design-tips-panel { transition:none; } }
#brand-tools { position:fixed; top:52px; right:16px; bottom:52px; z-index:var(--z-panel); width:440px; max-width:calc(100vw - 24px); background:var(--bg-panel); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:flex; flex-direction:column; }
#brand-tools header { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--border); }
#brand-tools header svg { width:16px; height:16px; }
#brand-tools nav { display:flex; flex-wrap:wrap; gap:4px; padding:8px; border-bottom:1px solid var(--border); }
#brand-tools nav button { padding:5px 8px; font-size:var(--text-sm); border-radius:var(--radius-sm); }
#brand-tools nav button[aria-pressed="true"] { background:var(--active); color:var(--accent); }
.brand-body { padding:12px; overflow:auto; flex:1; min-height:0; }
.brand-body h3 { margin:0 0 12px; font-size:var(--text-lg); }
.brand-field { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:8px 0; font-size:var(--text-sm); }
.brand-field input,.brand-field select,.brand-field textarea { max-width:220px; width:55%; }
.brand-field textarea { min-height:70px; resize:vertical; }
.brand-body .btn { margin:3px; }
.brand-body fieldset { border:1px solid var(--border); margin:10px 0; padding:8px; }
.brand-record { padding:8px 0; border-bottom:1px solid var(--border-soft); }
.brand-status { margin:0; padding:8px 12px; border-top:1px solid var(--border); min-height:24px; font-size:var(--text-sm); }
.brand-sections { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0; }
.brand-sections label { font-size:var(--text-sm); }
.brand-grid-preview { background:var(--canvas-bg); border:1px solid var(--border); }

/* Compact brand workspace dock. */
.modal.arrange-dialog { width:min(700px,calc(100vw - var(--space-6)*2)); min-width:0; max-width:700px; max-height:calc(100dvh - var(--space-6)*2); display:flex; flex-direction:column; }
.arrange-dialog .modal-body { overflow:auto; min-height:0; }
.arrange-workflow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-5); }
.arrange-field { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin:var(--space-3) 0; font-size:var(--text-sm); }
.arrange-field input,.arrange-field select { width:65%; min-width:0; }
.arrange-controls > label:not(.arrange-field) { display:flex; gap:var(--space-3); font-size:var(--text-sm); margin:var(--space-3) 0; }
.arrange-dialog [hidden] { display:none!important; }
#pa-preview { display:block; width:100%; height:320px; background:var(--canvas-bg); border:1px solid var(--border); }
#pa-summary { white-space:pre-line; font-size:var(--text-sm); line-height:1.6; }
#pa-status { font-size:var(--text-sm); }
@media(max-width:600px){.arrange-workflow{grid-template-columns:1fr;}#pa-preview{height:220px;}.arrange-dialog .modal-footer{flex-shrink:0;}}
.modal.export-dialog { width:min(700px,calc(100vw - var(--space-6)*2)); min-width:0; max-width:700px; max-height:calc(100dvh - var(--space-6)*2); display:flex; flex-direction:column; }
.export-dialog .modal-body { overflow:auto; min-height:0; padding:var(--space-5); }
.export-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--space-6); }
.export-settings section { margin-bottom:var(--space-5); }
.export-settings h4 { margin:0 0 var(--space-3); font-size:var(--text-sm); font-weight:600; }
.export-field { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin:var(--space-3) 0; font-size:var(--text-sm); }
.export-field > input:not([type="checkbox"]),.export-field > select { width:58%; min-width:0; }
.export-field input[type="checkbox"] { margin-left:auto; }
.export-boards { display:flex; flex-direction:column; gap:var(--space-2); max-height:110px; overflow:auto; font-size:var(--text-sm); }
.export-boards label { display:flex; align-items:center; gap:var(--space-3); }
.export-format-current { display:flex; justify-content:space-between; gap:var(--space-4); align-items:center; font-size:var(--text-sm); }
.export-format-current span { white-space:pre-line; color:var(--text-dim); }
.export-format-browser { margin-top:var(--space-4); border:1px solid var(--border); padding:var(--space-4); }
.export-format-list { max-height:180px; overflow:auto; }
.export-format-option { display:flex; gap:var(--space-2); margin:var(--space-2) 0; }
.export-format-option button:first-child { flex:1; justify-content:flex-start; }
.export-format-option button[aria-pressed="true"] { background:var(--active); color:var(--accent); }
.export-settings details { border-top:1px solid var(--border); padding-top:var(--space-4); }
.export-settings summary { cursor:pointer; font-size:var(--text-sm); margin-bottom:var(--space-4); }
.export-output { min-width:0; }
.export-preview { height:250px; overflow:auto; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background-color:var(--bg-panel); background-image:conic-gradient(var(--checker) 25%,transparent 0 50%,var(--checker) 0 75%,transparent 0); background-size:16px 16px; }
.export-preview img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center; }
.export-preview img:not([src]) { display:none; }
.export-summary { white-space:pre-line; font-size:var(--text-sm); line-height:1.7; border-top:1px solid var(--border); padding-top:var(--space-4); }
.export-warning,#export-feedback { font-size:var(--text-sm); color:var(--text-dim); line-height:1.5; }
.export-dialog [hidden] { display:none!important; }
.export-dialog .modal-footer { flex-shrink:0; }
.export-dialog .modal-footer #export-feedback { flex:1; margin:0; min-width:0; }
.export-settings > section > .btn { margin:var(--space-2) 0; }
@media(max-width:600px){.modal.export-dialog{width:calc(100vw - var(--space-4)*2);height:auto;max-height:calc(100dvh - var(--space-4)*2);}.export-layout{grid-template-columns:1fr;}.export-preview{height:180px;}.export-dialog .modal-footer{position:sticky;bottom:0;background:var(--bg-panel-2);}}
#viewport[data-tool="knife"] { cursor:crosshair; }
#rightpanel.brand-open { width:360px; overflow:hidden; }
#rightpanel.brand-open > :not(#brand-tools) { display:none; }
#rightpanel #brand-tools { position:static; width:100%; max-width:none; height:100%; min-height:0; border:0; border-radius:0; box-shadow:none; flex:1; }
#brand-tools nav { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
#brand-tools nav button { padding:8px 2px; font-size:11px; }
#brand-tools nav .brand-field { grid-column:1/-1; margin:5px 3px 0; }
.brand-modes { display:flex; border:1px solid var(--border); border-radius:6px; padding:3px; margin:12px 0; }
.brand-modes button { flex:1; padding:7px 3px; border-radius:4px; font-size:12px; }
.brand-modes button[aria-pressed="true"],.brand-grid-cards button[aria-pressed="true"] { background:var(--active); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.brand-grid-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; max-height:300px; overflow-y:auto; scrollbar-width:thin; }
.brand-grid-cards button svg { width:64px; height:64px; color:var(--text-dim); }
.brand-grid-cards[hidden] { display:none; }
.brand-grid-cards button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 3px; border:1px solid var(--border); border-radius:6px; font-size:11px; }
.brand-grid-cards button span { font-size:28px; line-height:32px; color:var(--accent); }
.brand-customize { border:1px solid var(--border); border-radius:6px; padding:10px; margin:12px 0; }
.brand-customize summary { cursor:pointer; font-weight:600; }
.brand-grid-preview { border-radius:6px; }
.brand-body .brand-generate { width:100%; margin:12px 0; padding:10px; background:var(--accent); color:#fff; border:0; border-radius:6px; font-weight:600; }
.brand-body { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
@media(max-width:700px){#rightpanel.brand-open{width:min(360px,100vw);}}
/* Preflight shares modal and theme tokens with export. */
.preflight-dialog{width:min(700px,95vw);}
#preflight-report{max-height:50vh;overflow:auto;}
.preflight-issue{padding:10px 0;border-top:1px solid var(--border-soft);}
.preflight-issue p{margin:0 0 8px;color:var(--text);line-height:1.5;}

.preflight-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}