/* =============================================================================
   SENOVA DS — "Ink & Ivory, Studio Cut"  (senova-ds.css)
   The Resend-grade component layer, built on senova-ui.css's tokens. Load AFTER
   senova-ui.css. Self-contained: adds the extended token set (design spec §1),
   the animated-icon motion (§2), and every component (§3). Both themes.
   ========================================================================== */

/* ----------------------------------------------------------------------- *
 * §1 — EXTENDED TOKENS
 * ----------------------------------------------------------------------- */
:root {
  --sn-ink-3:#75736D;                 /* corrected: 4.6:1 on ivory (was #8A8984) */
  --sn-hairline-strong:#D6D3C8;
  --sn-bg-deep:#141413;               /* cinematic floor (light-page media) */
  --sn-accent-glow:rgba(217,119,87,.14);

  --sn-ring:0 0 0 3px rgba(193,95,60,.30);
  --sn-ring-neutral:0 0 0 3px rgba(20,19,19,.10);

  --sn-hover:rgba(20,19,19,.04);
  --sn-active:rgba(20,19,19,.08);
  --sn-selected:rgba(193,95,60,.08);

  --sn-sidebar-bg:#F5F4EE;
  --sn-topbar-bg:rgba(250,249,245,.85);
  --sn-row-hover:rgba(20,19,19,.03);
  --sn-chip-bg:#EFEDE4;
  --sn-kbd-bg:#FFFFFF;
  --sn-kbd-border:#D6D3C8;
  --sn-code-bg:#F5F4EE;
  --sn-scrim:rgba(20,19,19,.44);
  --sn-tooltip-bg:#232220;
  --sn-tooltip-ink:#F5F4EF;

  --sn-success-soft:#E3EDE5; --sn-warn-soft:#F4EAD2; --sn-error-soft:#F6E1DB; --sn-info-soft:#EAE8DF;

  --sn-elev-0:none;
  --sn-elev-1:0 1px 2px rgba(20,19,19,.05);
  --sn-elev-2:0 1px 2px rgba(20,19,19,.04),0 8px 24px rgba(20,19,19,.07);
  --sn-elev-3:0 2px 6px rgba(20,19,19,.06),0 24px 64px rgba(20,19,19,.14);

  --sn-t-hover:120ms; --sn-t-press:80ms; --sn-t-micro:180ms;
  --sn-t-panel:320ms; --sn-t-toast-in:260ms; --sn-t-toast-out:180ms;
  --sn-ease:cubic-bezier(.2,.6,.2,1);
  --sn-ease-out:cubic-bezier(.16,1,.3,1);
  --sn-ease-in:cubic-bezier(.4,0,1,1);
  --sn-ease-spring:cubic-bezier(.34,1.4,.44,1);
}
[data-theme="studio"], [data-theme="dark"] {
  --sn-ink-3:#8B8880;
  --sn-hairline-strong:#3A3833;
  --sn-bg-deep:#0C0B0A;
  --sn-accent-glow:rgba(217,119,87,.16);

  --sn-ring:0 0 0 3px rgba(217,119,87,.32);
  --sn-ring-neutral:0 0 0 3px rgba(245,244,239,.10);

  --sn-hover:rgba(245,244,239,.05);
  --sn-active:rgba(245,244,239,.09);
  --sn-selected:rgba(217,119,87,.12);

  --sn-sidebar-bg:#161514;
  --sn-topbar-bg:rgba(18,17,16,.80);
  --sn-row-hover:rgba(245,244,239,.035);
  --sn-chip-bg:#2A2826;
  --sn-kbd-bg:#232220; --sn-kbd-border:#3A3833;
  --sn-code-bg:#1A1917;
  --sn-scrim:rgba(0,0,0,.60);
  --sn-tooltip-bg:#F5F4EF; --sn-tooltip-ink:#141413;

  --sn-success-soft:#1E2A21; --sn-warn-soft:#2E2617; --sn-error-soft:#33201B; --sn-info-soft:#242320;

  --sn-elev-1:0 1px 2px rgba(0,0,0,.30);
  --sn-elev-2:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35);
  --sn-elev-3:0 2px 6px rgba(0,0,0,.35),0 24px 64px rgba(0,0,0,.55);
}

/* ----------------------------------------------------------------------- *
 * §2 — ANIMATED ICONS
 * The moving part is .sn-ic__m (transform) or .sn-ic__d (draw). Animations
 * fire on hover of an interactive host, or the icon itself. Reduced-motion off.
 * ----------------------------------------------------------------------- */
.sn-ic { width:1.25em; height:1.25em; display:inline-block; vertical-align:middle; flex:none; overflow:visible; }
.sn-ic__m, .sn-ic__m1, .sn-ic__m2, .sn-ic__m3, .sn-ic__m4, .sn-ic__spin, .sn-ic__wand {
  transition:transform var(--sn-t-micro) var(--sn-ease-spring), opacity var(--sn-t-micro) var(--sn-ease);
  transform-origin:12px 12px; transform-box:view-box;
}
.sn-ic__d, .sn-ic__d1, .sn-ic__d2, .sn-ic__d3, .sn-ic__dot {
  transition:stroke-dashoffset 300ms var(--sn-ease), opacity var(--sn-t-micro) var(--sn-ease);
}
/* draw prep — normalized pathLength=1 */
.sn-ic__d { stroke-dasharray:1; stroke-dashoffset:0; }

/* The hover scope: any interactive parent, or the icon itself. */
/* Each icon defines its own hovered transform below. */
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic,
.sn-ic:hover { }

/* helper so per-icon rules stay terse: HOST = the :is() list */
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--home .sn-ic__m, .sn-ic--home:hover .sn-ic__m { transform:translateY(-1.5px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--spark .sn-ic__m, .sn-ic--spark:hover .sn-ic__m { transform:scale(1.35); opacity:1; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--spark .sn-ic__spin, .sn-ic--spark:hover .sn-ic__spin { transform:rotate(9deg); }
.sn-ic--spark .sn-ic__m { transform:scale(.4); opacity:.4; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--image .sn-ic__d, .sn-ic--image:hover .sn-ic__d { animation:sn-redraw 480ms var(--sn-ease); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--video .sn-ic__m, .sn-ic--video:hover .sn-ic__m { transform:translateX(1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--library .sn-ic__m, .sn-ic--library:hover .sn-ic__m { transform:translate(.8px,.8px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--folder .sn-ic__m, .sn-ic--folder:hover .sn-ic__m { opacity:1; transform:translateY(-1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--settings .sn-ic__m, .sn-ic--settings:hover .sn-ic__m { transform:rotate(30deg); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--billing .sn-ic__m, .sn-ic--billing:hover .sn-ic__m { animation:sn-coin 460ms var(--sn-ease); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--apikey .sn-ic__m, .sn-ic--apikey:hover .sn-ic__m { transform:rotate(12deg); transform-origin:7px 12px; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--connect .sn-ic__m1, .sn-ic--connect:hover .sn-ic__m1 { transform:translateX(1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--connect .sn-ic__m2, .sn-ic--connect:hover .sn-ic__m2 { transform:translateX(-1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--connect .sn-ic__m, .sn-ic--connect:hover .sn-ic__m { opacity:1; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--search .sn-ic__d, .sn-ic--search:hover .sn-ic__d { animation:sn-redraw 420ms var(--sn-ease); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--filter .sn-ic__m1, .sn-ic--filter:hover .sn-ic__m1 { transform:translateX(3px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--filter .sn-ic__m2, .sn-ic--filter:hover .sn-ic__m2 { transform:translateX(-3px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--filter .sn-ic__m3, .sn-ic--filter:hover .sn-ic__m3 { transform:translateX(4px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--plus .sn-ic__m, .sn-ic--plus:hover .sn-ic__m { transform:rotate(90deg); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--download .sn-ic__m, .sn-ic--download:hover .sn-ic__m { transform:translateY(2px); opacity:.7; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--upload .sn-ic__m, .sn-ic--upload:hover .sn-ic__m { transform:translateY(-2px); opacity:.7; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--copy .sn-ic__m, .sn-ic--copy:hover .sn-ic__m { transform:translate(-1.2px,-1.2px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--trash .sn-ic__m, .sn-ic--trash:hover .sn-ic__m { transform:translateY(-1px) rotate(7deg); transform-origin:19px 6.4px; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--more .sn-ic__d1, .sn-ic--more:hover .sn-ic__d1 { transform:scale(1.35); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--more .sn-ic__d2, .sn-ic--more:hover .sn-ic__d2 { transform:scale(1.35); transition-delay:60ms; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--more .sn-ic__d3, .sn-ic--more:hover .sn-ic__d3 { transform:scale(1.35); transition-delay:120ms; }
.sn-ic--more .sn-ic__d1,.sn-ic--more .sn-ic__d2,.sn-ic--more .sn-ic__d3 { transform-box:view-box; transition:transform 150ms var(--sn-ease-spring); }
.sn-ic--more .sn-ic__d1{transform-origin:5.5px 12px}.sn-ic--more .sn-ic__d2{transform-origin:12px 12px}.sn-ic--more .sn-ic__d3{transform-origin:18.5px 12px}
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--chevronDown .sn-ic__m, .sn-ic--chevronDown:hover .sn-ic__m { transform:translateY(1.5px); }
.sn-ic--chevronDown.is-open .sn-ic__m { transform:rotate(180deg); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--chevronRight .sn-ic__m, .sn-ic--chevronRight:hover .sn-ic__m { transform:translateX(1.5px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--close .sn-ic__m, .sn-ic--close:hover .sn-ic__m { transform:rotate(90deg) scale(.92); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--check .sn-ic__d, .sn-ic--check:hover .sn-ic__d { animation:sn-redraw 340ms var(--sn-ease); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--play .sn-ic__m, .sn-ic--play:hover .sn-ic__m { transform:translateX(1px) scale(1.05); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--lens .sn-ic__m, .sn-ic--lens:hover .sn-ic__m { transform:rotate(15deg); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--wand .sn-ic__m, .sn-ic--wand:hover .sn-ic__m { opacity:1; transform:scale(1.15); transform-origin:18px 5.5px; transition-delay:80ms; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--wand .sn-ic__wand, .sn-ic--wand:hover .sn-ic__wand { transform:translate(.5px,-.5px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--user .sn-ic__m, .sn-ic--user:hover .sn-ic__m { transform:translateY(-.75px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--help .sn-ic__d, .sn-ic--help:hover .sn-ic__d { animation:sn-redraw 380ms var(--sn-ease); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--external .sn-ic__m, .sn-ic--external:hover .sn-ic__m { transform:translate(1px,-1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--sun .sn-ic__m, .sn-ic--sun:hover .sn-ic__m { transform:rotate(22.5deg); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--moon .sn-ic__m, .sn-ic--moon:hover .sn-ic__m { transform:rotate(-10deg); transform-origin:12px 12px; }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--grid .sn-ic__m1, .sn-ic--grid:hover .sn-ic__m1 { transform:translate(-1px,-1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--grid .sn-ic__m4, .sn-ic--grid:hover .sn-ic__m4 { transform:translate(1px,1px); }
.sn-ic--grid rect{transform-box:view-box;transition:transform 180ms var(--sn-ease-spring)}
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--scene .sn-ic__m1, .sn-ic--scene:hover .sn-ic__m1 { transform:translateY(-1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--scene .sn-ic__m2, .sn-ic--scene:hover .sn-ic__m2 { transform:translateY(1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--voice .sn-ic__m, .sn-ic--voice:hover .sn-ic__m { transform:translateY(-1px); }
:is(.snh,a,button,label,summary,[role=menuitem],.sn-nav-item,.sn-row):hover .sn-ic--collapse .sn-ic__m, .sn-ic--collapse:hover .sn-ic__m { transform:translateX(-1.5px); }

@keyframes sn-redraw { 0%{stroke-dashoffset:1} 100%{stroke-dashoffset:0} }
@keyframes sn-coin { 0%{transform:scaleX(1)} 45%{transform:scaleX(.14)} 100%{transform:scaleX(1)} }
@keyframes sn-spark-pulse { 0%,100%{transform:scale(.4);opacity:.35} 50%{transform:scale(1.3);opacity:1} }
.sn-ic--spark.is-generating .sn-ic__m { animation:sn-spark-pulse 1.2s var(--sn-ease) infinite; }

@media (prefers-reduced-motion:reduce) {
  .sn-ic__m,.sn-ic__m1,.sn-ic__m2,.sn-ic__m3,.sn-ic__m4,.sn-ic__spin,.sn-ic__wand,.sn-ic__d,.sn-ic--grid rect,.sn-ic--more circle { transition:none !important; animation:none !important; transform:none !important; }
  .sn-ic--spark .sn-ic__m { opacity:1; transform:none; }
  .sn-ic--connect .sn-ic__m,.sn-ic--folder .sn-ic__m,.sn-ic--wand .sn-ic__m { opacity:1; }
}

/* ----------------------------------------------------------------------- *
 * §3.1 — BUTTONS (refines senova-ui.css .sn-btn to the Resend density)
 * ----------------------------------------------------------------------- */
.sn-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:32px; padding:0 12px; border:1px solid transparent; border-radius:8px;
  font:500 .875rem/1 var(--sn-sans); letter-spacing:0; text-decoration:none; cursor:pointer;
  transition:background var(--sn-t-hover) var(--sn-ease), border-color var(--sn-t-hover) var(--sn-ease), color var(--sn-t-hover) var(--sn-ease), transform var(--sn-t-press) var(--sn-ease), box-shadow var(--sn-t-hover) var(--sn-ease);
  white-space:nowrap; -webkit-user-select:none; user-select:none;
}
.sn-btn:active { transform:scale(.985); }
.sn-btn:focus-visible { outline:none; box-shadow:var(--sn-ring-neutral); }
.sn-btn-sm { height:28px; padding:0 10px; font-size:.8125rem; border-radius:7px; }
.sn-btn-lg { height:40px; padding:0 16px; font-size:.9375rem; }
.sn-btn-primary { background:var(--sn-ink); color:var(--sn-bg); border-color:var(--sn-ink); }
.sn-btn-primary:hover { opacity:.9; background:var(--sn-ink); }
[data-theme="studio"] .sn-btn-primary { background:#F5F4EF; color:#141413; border-color:#F5F4EF; }
.sn-btn-accent { background:var(--sn-accent); color:#FFF8F5; border-color:var(--sn-accent); }
.sn-btn-accent:hover { background:var(--sn-accent-ink); border-color:var(--sn-accent-ink); }
.sn-btn-accent:focus-visible { box-shadow:var(--sn-ring); }
.sn-btn-secondary { background:var(--sn-surface); color:var(--sn-ink); border-color:var(--sn-hairline-strong); box-shadow:var(--sn-elev-1); }
.sn-btn-secondary:hover { background:var(--sn-bg-raised); border-color:var(--sn-hairline-strong); }
.sn-btn-ghost { background:transparent; color:var(--sn-ink-2); border-color:transparent; box-shadow:none; }
.sn-btn-ghost:hover { background:var(--sn-hover); color:var(--sn-ink); }
.sn-btn-danger { background:transparent; color:var(--sn-error); border-color:transparent; }
.sn-btn-danger:hover { background:var(--sn-error-soft); }
.sn-btn[disabled], .sn-btn:disabled { opacity:.5; pointer-events:none; }
.sn-btn .sn-ic { width:1em; height:1em; }
.sn-btn-icon { width:32px; height:32px; padding:0; }
.sn-btn-icon.sn-btn-sm { width:28px; height:28px; }

/* kbd chip inside a button */
.sn-btn kbd, .sn-kbd-in {
  display:inline-flex; align-items:center; margin-left:4px; padding:2px 5px; border-radius:5px;
  font:500 .6875rem/1 var(--sn-mono); letter-spacing:.02em;
}
.sn-btn-primary kbd, .sn-btn-accent kbd { background:rgba(255,255,255,.16); color:inherit; opacity:.85; }
[data-theme="studio"] .sn-btn-primary kbd { background:rgba(20,19,19,.12); }
.sn-btn-secondary kbd, .sn-btn-ghost kbd, .sn-btn-danger kbd { background:var(--sn-kbd-bg); border:1px solid var(--sn-kbd-border); color:var(--sn-ink-2); }

/* standalone kbd */
.sn-kbd {
  display:inline-flex; align-items:center; padding:2px 6px; border-radius:5px;
  background:var(--sn-kbd-bg); border:1px solid var(--sn-kbd-border); border-bottom-width:2px;
  font:500 .6875rem/1 var(--sn-mono); color:var(--sn-ink-2);
}

/* ----------------------------------------------------------------------- *
 * §3.2 — INPUTS
 * ----------------------------------------------------------------------- */
.sn-field { display:flex; flex-direction:column; gap:6px; }
.sn-label { font:500 .8125rem/1 var(--sn-sans); color:var(--sn-ink-2); }
.sn-input, .sn-textarea, .sn-select {
  width:100%; height:32px; padding:0 12px; border-radius:var(--sn-r-input);
  background:var(--sn-surface); border:1px solid var(--sn-hairline-strong);
  font:.875rem/1 var(--sn-sans); color:var(--sn-ink);
  transition:border-color var(--sn-t-hover) var(--sn-ease), box-shadow var(--sn-t-hover) var(--sn-ease);
}
.sn-input::placeholder, .sn-textarea::placeholder { color:var(--sn-ink-3); }
.sn-input:hover, .sn-textarea:hover, .sn-select:hover { border-color:#C7C4B8; }
[data-theme="studio"] .sn-input:hover, [data-theme="studio"] .sn-textarea:hover { border-color:#4A4741; }
.sn-input:focus, .sn-textarea:focus, .sn-select:focus { outline:none; border-color:var(--sn-accent); box-shadow:var(--sn-ring); }
.sn-input-lg { height:40px; }
.sn-textarea { height:auto; min-height:96px; padding:10px 12px; line-height:1.55; resize:vertical; }
.sn-field.is-error .sn-input, .sn-field.is-error .sn-textarea { border-color:var(--sn-error); box-shadow:0 0 0 3px rgba(179,64,46,.18); }
.sn-field-msg { font:.8125rem/1.4 var(--sn-sans); color:var(--sn-error); display:flex; gap:6px; align-items:center; }
.sn-input-icon { position:relative; }
.sn-input-icon > .sn-ic { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--sn-ink-3); pointer-events:none; }
.sn-input-icon .sn-input { padding-left:34px; }
.sn-input-affix { display:flex; align-items:stretch; border:1px solid var(--sn-hairline-strong); border-radius:var(--sn-r-input); background:var(--sn-surface); overflow:hidden; transition:border-color var(--sn-t-hover),box-shadow var(--sn-t-hover); }
.sn-input-affix:focus-within { border-color:var(--sn-accent); box-shadow:var(--sn-ring); }
.sn-input-affix .sn-affix { display:flex; align-items:center; padding:0 10px; background:var(--sn-bg-raised); color:var(--sn-ink-2); font:.8125rem var(--sn-mono); }
.sn-input-affix .sn-affix + .sn-input { border-left:1px solid var(--sn-hairline); }
.sn-input-affix .sn-input { border:none; box-shadow:none; border-radius:0; }
.sn-input-affix .sn-input:focus { box-shadow:none; }

/* ----------------------------------------------------------------------- *
 * §3.3 — MENUS / DROPDOWNS
 * ----------------------------------------------------------------------- */
.sn-menu {
  min-width:200px; background:var(--sn-surface); border:1px solid var(--sn-hairline);
  border-radius:10px; box-shadow:var(--sn-elev-2); padding:4px;
  animation:sn-menu-in 160ms var(--sn-ease-out);
}
@keyframes sn-menu-in { from{opacity:0; transform:translateY(-4px) scale(.98)} to{opacity:1; transform:none} }
.sn-menu-item {
  display:flex; align-items:center; gap:8px; height:32px; padding:0 8px; border-radius:6px;
  font:.875rem/1 var(--sn-sans); color:var(--sn-ink-2); cursor:pointer; text-decoration:none; border:none; background:none; width:100%; text-align:left;
  transition:background var(--sn-t-hover) var(--sn-ease), color var(--sn-t-hover) var(--sn-ease);
}
.sn-menu-item:hover, .sn-menu-item:focus-visible { background:var(--sn-hover); color:var(--sn-ink); outline:none; }
.sn-menu-item .sn-ic { width:16px; height:16px; color:var(--sn-ink-3); }
.sn-menu-item.is-selected { color:var(--sn-ink); }
.sn-menu-item .sn-menu-check { margin-left:auto; width:16px; height:16px; color:var(--sn-accent); opacity:0; }
.sn-menu-item.is-selected .sn-menu-check { opacity:1; }
.sn-menu-item.is-danger { color:var(--sn-error); }
.sn-menu-item.is-danger:hover { background:var(--sn-error-soft); }
.sn-menu-sep { height:1px; background:var(--sn-hairline); margin:4px -4px; }

/* ----------------------------------------------------------------------- *
 * §3.4 — DATA TABLE
 * ----------------------------------------------------------------------- */
.sn-table-wrap { border:1px solid var(--sn-hairline); border-radius:12px; background:var(--sn-surface); overflow:clip; }
.sn-table-toolbar { display:flex; align-items:center; gap:8px; height:52px; padding:0 16px; border-bottom:1px solid var(--sn-hairline); }
.sn-table-toolbar .sn-input-icon { width:240px; }
.sn-table-toolbar .sn-input { background:var(--sn-bg); height:30px; }
.sn-table-toolbar .sn-spacer { flex:1; }
.sn-table { width:100%; border-collapse:collapse; }
.sn-table thead th {
  height:40px; padding:0 16px; text-align:left; background:var(--sn-bg-raised);
  border-bottom:1px solid var(--sn-hairline);
  font:500 .75rem/40px var(--sn-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--sn-ink-3); white-space:nowrap;
}
.sn-table thead th.is-sortable { cursor:pointer; user-select:none; }
.sn-table thead th .sn-sort { display:inline-block; margin-left:6px; opacity:0; transition:opacity var(--sn-t-hover),transform var(--sn-t-micro); }
.sn-table thead th:hover .sn-sort { opacity:.4; }
.sn-table thead th.is-sorted { color:var(--sn-ink-2); }
.sn-table thead th.is-sorted .sn-sort { opacity:1; }
.sn-table tbody td { height:48px; padding:0 16px; border-bottom:1px solid var(--sn-hairline); font:.875rem/1.4 var(--sn-sans); color:var(--sn-ink); vertical-align:middle; }
.sn-table tbody tr:last-child td { border-bottom:none; }
.sn-table tbody tr { transition:background var(--sn-t-hover) var(--sn-ease); }
.sn-table tbody tr:hover { background:var(--sn-row-hover); }
.sn-table td.sn-td-muted { color:var(--sn-ink-2); }
.sn-table td.sn-td-mono { font:.8125rem var(--sn-mono); color:var(--sn-ink-2); }
.sn-table .sn-rowmenu { opacity:0; transition:opacity var(--sn-t-hover); }
.sn-table tbody tr:hover .sn-rowmenu { opacity:1; }
.sn-status { display:inline-flex; align-items:center; gap:7px; font:.8125rem var(--sn-sans); color:var(--sn-ink-2); }
.sn-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--sn-ink-3); }
.sn-status.ok::before { background:var(--sn-success); }
.sn-status.warn::before { background:var(--sn-warn); }
.sn-status.err::before { background:var(--sn-error); }
.sn-table-foot { display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 16px; border-top:1px solid var(--sn-hairline); }
.sn-table-foot .sn-pageinfo { font:.8125rem var(--sn-sans); color:var(--sn-ink-2); }
.sn-table-foot .sn-pager { display:flex; gap:6px; }

/* ----------------------------------------------------------------------- *
 * §3.5 — MODAL
 * ----------------------------------------------------------------------- */
.sn-scrim { position:fixed; inset:0; z-index:1200; background:var(--sn-scrim); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:grid; place-items:center; padding:16px; animation:sn-fade 200ms var(--sn-ease); }
@keyframes sn-fade { from{opacity:0} to{opacity:1} }
.sn-modal { width:min(480px,calc(100vw - 32px)); background:var(--sn-surface); border:1px solid var(--sn-hairline); border-radius:16px; box-shadow:var(--sn-elev-3); animation:sn-modal-in 240ms var(--sn-ease-out); }
@keyframes sn-modal-in { from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none} }
.sn-modal-head { position:relative; padding:20px 24px 0; }
.sn-modal-title { font:600 1.125rem/1.3 var(--sn-serif); color:var(--sn-ink); margin:0; }
.sn-modal-x { position:absolute; top:16px; right:16px; }
.sn-modal-body { padding:16px 24px; font:.875rem/1.55 var(--sn-sans); color:var(--sn-ink-2); }
.sn-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px 24px 20px; border-top:1px solid var(--sn-hairline); margin-top:8px; }

/* ----------------------------------------------------------------------- *
 * §3.6 — VERTICAL STEPPER
 * ----------------------------------------------------------------------- */
.sn-stepper { list-style:none; margin:0; padding:0; }
.sn-stepper li { position:relative; display:grid; grid-template-columns:28px 1fr; gap:16px; padding-bottom:32px; }
.sn-stepper li:last-child { padding-bottom:0; }
.sn-stepper li::before { content:""; position:absolute; left:13.5px; top:32px; bottom:0; width:1px; background:var(--sn-hairline); }
.sn-stepper li:last-child::before { display:none; }
.sn-stepper li.is-complete::before { background:var(--sn-ink-2); }
.sn-step__node { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--sn-surface); border:1px solid var(--sn-hairline-strong); font:600 .8125rem var(--sn-sans); color:var(--sn-ink-3); z-index:1; }
.sn-stepper li.is-active .sn-step__node { border-color:var(--sn-accent); color:var(--sn-accent); box-shadow:0 0 0 4px var(--sn-accent-soft); }
.sn-stepper li.is-complete .sn-step__node { background:var(--sn-ink); border-color:var(--sn-ink); color:var(--sn-bg); }
[data-theme="studio"] .sn-stepper li.is-complete .sn-step__node { background:#F5F4EF; border-color:#F5F4EF; color:#141413; }
.sn-step__node .sn-ic { width:15px; height:15px; }
.sn-step__body h4 { font:600 .9375rem/1.3 var(--sn-sans); color:var(--sn-ink); margin:4px 0 0; }
.sn-stepper li:not(.is-active):not(.is-complete) .sn-step__body h4 { color:var(--sn-ink-3); }
.sn-step__body p { font:.875rem/1.55 var(--sn-sans); color:var(--sn-ink-2); margin:6px 0 0; }
.sn-step__extra { margin-top:12px; }

/* ----------------------------------------------------------------------- *
 * §3.7 — CARDS
 * ----------------------------------------------------------------------- */
.sn-card { background:var(--sn-surface); border:1px solid var(--sn-hairline); border-radius:12px; padding:20px; box-shadow:var(--sn-elev-1); }
.sn-card-hover { transition:box-shadow var(--sn-t-micro) var(--sn-ease), transform var(--sn-t-micro) var(--sn-ease), border-color var(--sn-t-micro) var(--sn-ease); cursor:pointer; }
.sn-card-hover:hover { box-shadow:var(--sn-elev-2); transform:translateY(-1px); border-color:var(--sn-hairline-strong); }
.sn-media-card { position:relative; border-radius:var(--sn-r-media); overflow:clip; padding:0; background:var(--sn-bg-deep); border:1px solid var(--sn-hairline); box-shadow:var(--sn-elev-1); }
.sn-media-card > img, .sn-media-card > video { display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--sn-t-panel) var(--sn-ease); }
.sn-media-card:hover > img, .sn-media-card:hover > video { transform:scale(1.012); }
.sn-media-card .sn-media-overlay { position:absolute; inset:auto 0 0 0; padding:28px 12px 12px; background:linear-gradient(transparent,rgba(12,11,10,.78)); color:#F5F4EF; opacity:0; transform:translateY(6px); transition:opacity var(--sn-t-micro),transform var(--sn-t-micro); }
.sn-media-card:hover .sn-media-overlay { opacity:1; transform:none; }
.sn-media-card .sn-media-prompt { font:.8125rem/1.4 var(--sn-sans); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sn-media-card .sn-media-meta { margin-top:6px; font:.6875rem var(--sn-mono); color:rgba(245,244,239,.65); display:flex; gap:8px; }
.sn-media-actions { position:absolute; top:8px; right:8px; display:flex; gap:6px; opacity:0; transition:opacity var(--sn-t-micro); }
.sn-media-card:hover .sn-media-actions { opacity:1; }
.sn-media-actions button { width:28px; height:28px; display:grid; place-items:center; border:none; border-radius:8px; background:rgba(20,19,19,.55); backdrop-filter:blur(6px); color:#F5F4EF; cursor:pointer; }
.sn-media-actions button:hover { background:rgba(20,19,19,.75); }

/* ----------------------------------------------------------------------- *
 * §3.8 — CODE BLOCK
 * ----------------------------------------------------------------------- */
.sn-code { background:var(--sn-code-bg); border:1px solid var(--sn-hairline); border-radius:12px; overflow:clip; }
.sn-code-tabs { position:relative; display:flex; align-items:center; height:40px; padding:0 8px; border-bottom:1px solid var(--sn-hairline); }
.sn-code-tab { height:40px; padding:0 12px; border:none; background:none; font:500 .8125rem var(--sn-sans); color:var(--sn-ink-3); cursor:pointer; position:relative; }
.sn-code-tab.is-active { color:var(--sn-ink); }
.sn-code-tab.is-active::after { content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:1.5px; background:var(--sn-accent); border-radius:2px; }
.sn-code-copy { margin-left:auto; }
.sn-code pre { margin:0; padding:16px 20px; font:.8125rem/1.65 var(--sn-mono); color:var(--sn-ink); tab-size:2; overflow-x:auto; }
.sn-code .tok-key { color:var(--sn-accent-ink); }
.sn-code .tok-str { color:var(--sn-success); }
.sn-code .tok-com { color:var(--sn-ink-3); font-style:italic; }
.sn-code .tok-num { color:var(--sn-warn); }
.sn-code .tok-pun { color:var(--sn-ink-2); }

/* ----------------------------------------------------------------------- *
 * §3.9 — TOAST
 * ----------------------------------------------------------------------- */
.sn-toasts { position:fixed; right:24px; bottom:24px; z-index:1400; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; }
.sn-toast { pointer-events:auto; min-width:280px; max-width:380px; background:var(--sn-surface); border:1px solid var(--sn-hairline); border-radius:10px; padding:12px 14px; box-shadow:var(--sn-elev-3); display:flex; gap:10px; align-items:flex-start; animation:sn-toast-in var(--sn-t-toast-in) var(--sn-ease-out); }
@keyframes sn-toast-in { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.sn-toast.is-out { animation:sn-toast-out var(--sn-t-toast-out) var(--sn-ease-in) forwards; }
@keyframes sn-toast-out { to{opacity:0; transform:translateX(16px)} }
.sn-toast .sn-ic { width:18px; height:18px; margin-top:1px; }
.sn-toast.ok .sn-ic { color:var(--sn-success); }
.sn-toast.err .sn-ic { color:var(--sn-error); }
.sn-toast-title { font:500 .875rem/1.3 var(--sn-sans); color:var(--sn-ink); }
.sn-toast-msg { font:.8125rem/1.4 var(--sn-sans); color:var(--sn-ink-2); margin-top:2px; }

/* ----------------------------------------------------------------------- *
 * §3.10 — SIDEBAR NAV ITEM
 * ----------------------------------------------------------------------- */
.sn-nav-item {
  display:flex; align-items:center; gap:10px; height:32px; padding:0 10px; border-radius:8px;
  font:500 .875rem/1 var(--sn-sans); color:var(--sn-ink-2); text-decoration:none; border:1px solid transparent;
  transition:background var(--sn-t-hover) var(--sn-ease), color var(--sn-t-hover) var(--sn-ease);
}
.sn-nav-item .sn-ic { width:16px; height:16px; color:var(--sn-ink-3); }
.sn-nav-item:hover { background:var(--sn-hover); color:var(--sn-ink); }
.sn-nav-item:hover .sn-ic { color:var(--sn-ink-2); }
.sn-nav-item.is-active { background:var(--sn-surface); border-color:var(--sn-hairline); box-shadow:var(--sn-elev-1); color:var(--sn-ink); }
.sn-nav-item.is-active .sn-ic { color:var(--sn-accent); }
.sn-nav-label { font:600 .6875rem/1 var(--sn-sans); text-transform:uppercase; letter-spacing:.06em; color:var(--sn-ink-3); padding:16px 10px 6px; }

/* ----------------------------------------------------------------------- *
 * §3.11 — TOP BAR + workspace switcher
 * ----------------------------------------------------------------------- */
.sn-topbar { display:flex; align-items:center; gap:12px; height:56px; padding:0 20px; background:var(--sn-topbar-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--sn-hairline); position:sticky; top:0; z-index:100; }
.sn-ws { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 8px 0 6px; border-radius:8px; border:none; background:none; cursor:pointer; color:var(--sn-ink); font:500 .875rem var(--sn-sans); transition:background var(--sn-t-hover); }
.sn-ws:hover { background:var(--sn-hover); }
.sn-ws-avatar { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; background:linear-gradient(135deg,#C15F3C,#8A4A2E); color:#fff; font:600 .6875rem var(--sn-sans); }
.sn-topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.sn-toplink { display:inline-flex; align-items:center; gap:5px; font:500 .8125rem var(--sn-sans); color:var(--sn-ink-2); text-decoration:none; transition:color var(--sn-t-hover); }
.sn-toplink:hover { color:var(--sn-ink); }
.sn-toplink .sn-ic { width:14px; height:14px; }
.sn-topdiv { width:1px; height:20px; background:var(--sn-hairline); }

/* ----------------------------------------------------------------------- *
 * §3.12 — BADGES, SEGMENTED, TOOLTIP
 * ----------------------------------------------------------------------- */
.sn-badge { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:999px; font:500 .6875rem/1 var(--sn-sans); letter-spacing:.02em; background:var(--sn-chip-bg); color:var(--sn-ink-2); }
.sn-badge.ok { background:var(--sn-success-soft); color:var(--sn-success); }
.sn-badge.warn { background:var(--sn-warn-soft); color:var(--sn-warn); }
.sn-badge.err { background:var(--sn-error-soft); color:var(--sn-error); }
.sn-badge.accent { background:var(--sn-accent-soft); color:var(--sn-accent-ink); }
.sn-badge .dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.sn-seg { display:inline-flex; align-items:center; gap:2px; padding:2px; background:var(--sn-bg-raised); border:1px solid var(--sn-hairline); border-radius:8px; }
.sn-seg button { height:26px; padding:0 12px; border:none; background:none; border-radius:6px; font:500 .8125rem var(--sn-sans); color:var(--sn-ink-2); cursor:pointer; transition:color var(--sn-t-hover); }
.sn-seg button.is-active { background:var(--sn-surface); box-shadow:var(--sn-elev-1); color:var(--sn-ink); }
[data-sn-tooltip] { position:relative; }
[data-sn-tooltip]::after { content:attr(data-sn-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(2px); background:var(--sn-tooltip-bg); color:var(--sn-tooltip-ink); padding:5px 9px; border-radius:6px; font:500 .75rem var(--sn-sans); white-space:nowrap; box-shadow:var(--sn-elev-2); opacity:0; pointer-events:none; transition:opacity 140ms var(--sn-ease),transform 140ms var(--sn-ease); z-index:1500; }
[data-sn-tooltip]:hover::after { opacity:1; transform:translateX(-50%); transition-delay:.35s; }

/* ----------------------------------------------------------------------- *
 * §3.13 — EMPTY STATE
 * ----------------------------------------------------------------------- */
.sn-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; max-width:360px; margin:0 auto; padding:48px 0; }
.sn-empty-ic { width:48px; height:48px; border-radius:50%; background:var(--sn-bg-raised); display:grid; place-items:center; color:var(--sn-ink-3); margin-bottom:16px; }
.sn-empty-ic .sn-ic { width:24px; height:24px; }
.sn-empty h4 { font:600 1.125rem/1.3 var(--sn-serif); color:var(--sn-ink); margin:0; }
.sn-empty p { font:.875rem/1.55 var(--sn-sans); color:var(--sn-ink-2); margin:8px 0 16px; }
.sn-empty.glow .sn-empty-ic { box-shadow:0 0 48px var(--sn-accent-glow); }

/* utility */
.sn-hstack { display:flex; align-items:center; gap:var(--sn-3,12px); }
.sn-vstack { display:flex; flex-direction:column; gap:var(--sn-3,12px); }