/* ==========================================================================
   VOLT DESIGN SYSTEM v4 — now with a full motion language
   Primary: rgb(161, 255, 20) · Themes: dark / light · Engine: GSAP + ScrollTrigger
   ========================================================================== */

:root, [data-theme="dark"] {
  --volt: rgb(161, 255, 20);
  --volt-hover: rgb(192, 255, 20);
  --volt-press: rgb(140, 224, 12);
  --volt-dim: rgba(161, 255, 20, 0.14);
  --ink: rgb(19, 19, 19);

  --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa;

  --bg: #0b0d08;
  --surface-1: #121509; --surface-2: #181c0f; --surface-3: #202614;
  --line: rgba(161,255,20,.13); --line-strong: rgba(161,255,20,.3);
  --text: #eef7de; --text-2: #aab89a; --text-3: #6e7a5c;

  --outline-color: var(--volt); --outline-ring: rgba(161,255,20,.5);
  --outline-fill: rgba(161,255,20,.07); --ghost-hover: rgba(161,255,20,.06);
  --moving-inner: #0e100a; --moving-text: var(--volt);
  --glow-1: rgba(161,255,20,.18); --glow-2: rgba(161,255,20,.32);
  --grid-line: rgba(161,255,20,.03); --orb: rgba(161,255,20,.08);
  --code-bg: #0e1109; --scrim: rgba(0,0,0,.7);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-xl: 25px; --fs-2xl: 31px; --fs-3xl: 39px; --fs-4xl: 54px;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .15s; --dur-base: .25s; --dur-slow: .5s;

  --el-1: 0 2px 8px rgba(0,0,0,.35); --el-2: 0 6px 20px rgba(0,0,0,.45); --el-3: 0 16px 48px rgba(0,0,0,.6);
}
[data-theme="light"] {
  --bg: #f7f9f2;
  --surface-1: #ffffff; --surface-2: #f1f4e7; --surface-3: #e8ecdb;
  --line: rgba(19,19,19,.1); --line-strong: rgba(19,19,19,.25);
  --text: #171a10; --text-2: #4d5641; --text-3: #838e72;
  --outline-color: var(--ink); --outline-ring: rgba(19,19,19,.35);
  --outline-fill: rgba(161,255,20,.25); --ghost-hover: rgba(161,255,20,.28);
  --moving-inner: #ffffff; --moving-text: var(--ink);
  --glow-1: rgba(120,200,0,.28); --glow-2: rgba(120,200,0,.45);
  --grid-line: rgba(19,19,19,.035); --orb: rgba(161,255,20,.2);
  --code-bg: #eef2e2; --scrim: rgba(19,19,19,.45);
  --el-1: 0 2px 8px rgba(19,19,19,.07); --el-2: 0 6px 20px rgba(19,19,19,.1); --el-3: 0 16px 48px rgba(19,19,19,.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Sora', sans-serif; font-size: var(--fs-base); line-height: 1.6;
  transition: background-color .4s ease, color .4s ease; overflow-x: hidden;
}
::selection { background: var(--volt); color: var(--ink); }

/* ---------- custom cursor ---------- */
.cursor {
  position: fixed; width: 12px; height: 12px; border-radius: 50%;
  background: var(--volt); mix-blend-mode: difference;
  pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
  transition: width .3s var(--ease-out), height .3s var(--ease-out);
}
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }

/* atmosphere */
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 80%);
}
.orb {
  position: fixed; top: -220px; left: 50%; transform: translateX(-50%);
  width: 720px; height: 480px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, var(--orb), transparent 65%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ---------- shell ---------- */
.shell { display: flex; position: relative; z-index: 1; }
.sidebar {
  position: sticky; top: 0; height: 100vh; width: 232px; flex-shrink: 0;
  border-right: 1px solid var(--line); padding: var(--sp-6) var(--sp-4);
  overflow-y: auto; background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px); opacity: 0;
}
.sidebar::-webkit-scrollbar { width: 0; }
.logo { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-8); }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--volt);
  display: grid; place-items: center; color: var(--ink); font-weight: 800; font-size: 16px;
  box-shadow: 0 0 18px var(--glow-1);
}
.logo-text { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.logo-text em { color: var(--volt); font-style: normal; }
.nav-group { margin-bottom: var(--sp-5); }
.nav-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; color:var(--text-3); text-transform:uppercase; margin-bottom:var(--sp-2); padding-left:var(--sp-3); }
.nav-link { display:block; padding:7px var(--sp-3); border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; font-size:13px; font-weight:500; transition:all var(--dur-fast) ease; border-left:2px solid transparent; }
.nav-link:hover { color:var(--text); background:var(--ghost-hover); }
.nav-link.active { color:var(--volt); border-left-color:var(--volt); background:var(--volt-dim); }
[data-theme="light"] .nav-link.active { color:var(--ink); background:var(--outline-fill); border-left-color:var(--ink); }

.content { flex:1; min-width:0; padding: var(--sp-8) var(--sp-12) var(--sp-10); max-width: 1000px; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-10); gap:var(--sp-4); flex-wrap:wrap; opacity:0; }
.badge-live { display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs); letter-spacing:.14em; border:1px solid var(--line); padding:6px 12px; border-radius:var(--r-full); background:color-mix(in srgb, var(--volt) 6%, transparent); }
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--volt); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(161,255,20,.5)} 50%{box-shadow:0 0 0 6px rgba(161,255,20,0)} }

.theme-toggle { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; height:34px; min-width:64px; padding:0 10px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface-1); color:var(--text-3); cursor:pointer; transition:border-color var(--dur-base) ease; }
.theme-toggle:hover { border-color:var(--volt); }
/* thumb size AND travel are derived from the track's padding box, so a thicker
   border (border-box shrinks the inner box) can never push it through the cap */
.toggle-thumb { position:absolute; top:3px; left:3px; height:calc(100% - 6px); aspect-ratio:1; border-radius:50%; background:var(--volt); color:var(--ink); display:grid; place-items:center; transition:transform .35s var(--ease-spring), left .35s var(--ease-spring); z-index:1; font-size:13px; }
[data-theme="light"] .toggle-thumb { left:calc(100% - 3px); transform:translateX(-100%); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 66vh; display: flex; flex-direction: column; justify-content: center; }
.hero h1 {
  font-size: clamp(42px, 6.5vw, var(--fs-4xl)); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.04;
}
.hero h1 .word { display: inline-block; overflow: hidden; padding-bottom: .1em; vertical-align: top; }
.hero h1 .word > span { display: inline-block; transform: translateY(110%); will-change: transform; }
.hero h1 em { color: var(--volt); font-style: normal; }
[data-theme="light"] .hero h1 em { -webkit-text-stroke: 1.2px var(--ink); }
.hero-sub { margin-top: var(--sp-4); color: var(--text-2); max-width: 520px; font-size: var(--fs-md); opacity: 0; transform: translateY(20px); }
.hero-cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; opacity: 0; transform: translateY(20px); }

/* floating component cards in hero */
.hero-stage { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 360px; height: 380px; pointer-events: none; }
.fcard {
  position: absolute; pointer-events: auto; will-change: transform;
  background: var(--surface-1); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--el-2);
  display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap;
}
@media (max-width: 1120px) { .hero-stage { display: none; } .hero { min-height: 50vh; } }

/* ---------- marquee belt ---------- */
.belt-wrap { margin-top: var(--sp-12); border-block: 1px solid var(--line); padding: var(--sp-4) 0; overflow: hidden; cursor: grab; opacity: 0; }
.belt-wrap:active { cursor: grabbing; }
.belt { display: flex; gap: var(--sp-4); width: max-content; will-change: transform; }
.belt-item {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); letter-spacing: .1em;
  color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 8px 16px; background: var(--surface-1); user-select: none;
}
.belt-item b { color: var(--volt); font-weight: 600; }
[data-theme="light"] .belt-item b { color: var(--ink); }

/* ---------- sections ---------- */
section { margin-top: var(--sp-20); scroll-margin-top: var(--sp-8); }
.sec-head { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-3); }
.sec-num { font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs); color:var(--volt); }
[data-theme="light"] .sec-num { color:#5a8a00; }
.sec-head h2 { font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.sec-rule { flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); transform-origin: left; }
.sec-desc { color:var(--text-2); max-width:660px; margin-bottom:var(--sp-8); }
h3.sub { font-size:var(--fs-md); font-weight:700; margin:var(--sp-8) 0 var(--sp-4); display:flex; align-items:center; gap:10px; }
h3.sub::before { content:''; width:14px; height:2px; background:var(--volt); border-radius:2px; }

.panel { border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--sp-8); background:linear-gradient(180deg, color-mix(in srgb, var(--volt) 3%, transparent), transparent); transition:border-color .4s ease; }
.row { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }
.stack { display:grid; gap:var(--sp-3); }

pre { background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); overflow-x:auto; margin-top:var(--sp-4); font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.7; color:var(--text-2); }
pre .k { color:var(--volt); } [data-theme="light"] pre .k { color:#5a8a00; }
pre .s { color:var(--warning); } [data-theme="light"] pre .s { color:#a16207; }
pre .c { color:var(--text-3); font-style:italic; }
code.inline { font-family:'JetBrains Mono',monospace; font-size:.85em; background:var(--code-bg); border:1px solid var(--line); padding:2px 7px; border-radius:6px; color:var(--text); }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--sp-4); }
.stat { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-6); background:var(--surface-1); }
.stat-num { font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.stat-num .accent { color:var(--volt); } [data-theme="light"] .stat-num .accent { color:#5a8a00; }
.stat-label { font-size:var(--fs-sm); color:var(--text-2); margin-top:6px; }

/* swatches */
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-3); }
.swatch { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:transform var(--dur-fast) var(--ease-spring); }
.swatch:hover { transform:translateY(-3px); }
.swatch-color { height:64px; }
.swatch-info { padding:var(--sp-2) var(--sp-3); background:var(--surface-1); }
.swatch-name { font-size:var(--fs-sm); font-weight:600; }
.swatch-val { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-3); }

/* type & spacing */
.type-row { display:flex; align-items:baseline; gap:var(--sp-6); padding:var(--sp-4) 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.type-meta { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-3); width:130px; flex-shrink:0; }
.space-row { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-2) 0; }
.space-bar { height:18px; background:var(--volt); border-radius:4px; box-shadow:0 0 12px var(--glow-1); transform-origin:left; }
.space-label { font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs); color:var(--text-2); width:120px; }

/* ---------- buttons ---------- */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; height:42px; padding:0 20px; font-size:var(--fs-base); font-family:inherit;
  font-weight:650; letter-spacing:.01em; border-radius:var(--r-md); border:none;
  cursor:pointer; white-space:nowrap; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.btn:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--volt); }
.btn:active:not(:disabled) { transform:scale(.96); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-sm { height:34px; padding:0 14px; font-size:var(--fs-sm); border-radius:10px; }
.btn-lg { height:52px; padding:0 28px; font-size:15.5px; border-radius:var(--r-lg); }
.btn-xl { height:62px; padding:0 36px; font-size:17px; border-radius:18px; }
.btn-icon { width:42px; padding:0; }
.btn-pill { border-radius:var(--r-full); }
.btn-solid { background:var(--volt); color:var(--ink); overflow:hidden; box-shadow:0 4px 20px var(--glow-1), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-solid:hover:not(:disabled) { background:var(--volt-hover); transform:translateY(-2px); box-shadow:0 8px 28px var(--glow-2), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-solid::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease-out); }
.btn-solid:hover::after { transform:translateX(120%); }
.btn-outline { background:transparent; color:var(--outline-color); box-shadow:inset 0 0 0 1.5px var(--outline-ring); }
.btn-outline:hover:not(:disabled) { box-shadow:inset 0 0 0 1.5px var(--outline-color), 0 0 24px var(--glow-1); background:var(--outline-fill); transform:translateY(-2px); }
.btn-secondary { background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line), var(--el-1); }
.btn-secondary:hover:not(:disabled) { background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line-strong), var(--el-2); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover:not(:disabled) { color:var(--text); background:var(--ghost-hover); }
.btn-danger { background:var(--danger); color:var(--ink); }
.btn-danger:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-2px); }
.btn-moving { background:transparent; padding:2px; overflow:hidden; }
.btn-moving .ring { position:absolute; inset:-60%; pointer-events:none; background:conic-gradient(from 0deg, transparent 250deg, var(--volt) 310deg, #eaffb0 340deg, transparent 360deg); animation:rotate 3.2s linear infinite; }
[data-theme="light"] .btn-moving .ring { background:conic-gradient(from 0deg, transparent 250deg, var(--volt) 310deg, #86c400 340deg, transparent 360deg); }
@keyframes rotate { to { transform:rotate(360deg); } }
.btn-moving:hover .ring { animation-duration:1.1s; }
.btn-moving .inner { position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; height:100%; width:100%; padding:0 20px; border-radius:10px; background:var(--moving-inner); color:var(--moving-text); transition:background var(--dur-base) ease; }
.btn-glow { background:var(--volt); color:var(--ink); }
.btn-glow::before { content:''; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; background:var(--volt); filter:blur(16px); animation:halo 2.6s ease-in-out infinite; }
@keyframes halo { 0%,100%{opacity:.35} 50%{opacity:.65} }
.btn-glow:hover:not(:disabled) { transform:translateY(-2px) scale(1.02); }
.magnetic { will-change: transform; }
.spin { animation:spin .8s linear infinite; display:inline-flex; }
@keyframes spin { to { transform:rotate(360deg); } }
.compass { transition:transform 1.2s cubic-bezier(.34,1.2,.4,1); display:inline-flex; }
.btn:hover .compass { transform:rotate(250deg); }

/* ---------- inputs ---------- */
.field { display:grid; gap:6px; max-width:360px; }
.field label { font-size:var(--fs-sm); font-weight:600; color:var(--text-2); }
.input, .textarea, .select { width:100%; font-family:inherit; font-size:var(--fs-base); color:var(--text); background:var(--surface-1); border:1.5px solid var(--line); border-radius:var(--r-md); padding:11px 14px; transition:border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
.input:focus, .textarea:focus, .select:focus { outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-dim), 0 0 20px var(--glow-1); }
.input.error { border-color:var(--danger); animation: shake .4s var(--ease-out); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.field .hint { font-size:var(--fs-xs); color:var(--text-3); }
.field .hint.error-text { color:var(--danger); }
.textarea { resize:vertical; min-height:88px; }
.select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size:5px 5px; background-repeat:no-repeat; cursor:pointer; }
.switch { position:relative; width:46px; height:26px; flex-shrink:0; cursor:pointer; }
.switch input { opacity:0; width:0; height:0; }
.switch .track { position:absolute; inset:0; border-radius:var(--r-full); background:var(--surface-3); border:1px solid var(--line); transition:all var(--dur-base) ease; }
.switch .track::before { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text-3); transition:all .35s var(--ease-spring); }
.switch input:checked + .track { background:var(--volt); border-color:var(--volt); box-shadow:0 0 16px var(--glow-1); }
.switch input:checked + .track::before { transform:translateX(20px); background:var(--ink); }
.check { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-base); }
.check input { appearance:none; width:20px; height:20px; border:1.5px solid var(--line-strong); border-radius:6px; display:grid; place-items:center; transition:all var(--dur-fast) var(--ease-spring); cursor:pointer; flex-shrink:0; }
.check input:checked { background:var(--volt); border-color:var(--volt); box-shadow:0 0 12px var(--glow-1); transform:scale(1.08); }
.check input:checked::before { content:'✓'; color:var(--ink); font-size:13px; font-weight:800; }
.check input[type="radio"] { border-radius:50%; }
.check input[type="radio"]:checked::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ink); }

/* chips, alerts, cards */
.chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; }
.chip-volt { background:var(--volt-dim); color:var(--volt); border:1px solid var(--line-strong); }
[data-theme="light"] .chip-volt { color:var(--ink); background:var(--outline-fill); }
.chip-success { background:color-mix(in srgb, var(--success) 15%, transparent); color:var(--success); }
.chip-warning { background:color-mix(in srgb, var(--warning) 15%, transparent); color:var(--warning); }
.chip-danger { background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
[data-theme="light"] .chip-success { color:#15803d; } [data-theme="light"] .chip-warning { color:#a16207; } [data-theme="light"] .chip-danger { color:#b91c1c; }
.alert { display:flex; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); border:1px solid; font-size:var(--fs-sm); align-items:flex-start; }
.alert b { display:block; font-size:var(--fs-base); margin-bottom:2px; }
.alert-info { border-color:color-mix(in srgb, var(--info) 40%, transparent); background:color-mix(in srgb, var(--info) 8%, transparent); }
.alert-success { border-color:color-mix(in srgb, var(--success) 40%, transparent); background:color-mix(in srgb, var(--success) 8%, transparent); }
.alert-danger { border-color:color-mix(in srgb, var(--danger) 40%, transparent); background:color-mix(in srgb, var(--danger) 8%, transparent); }
.alert-icon { font-size:16px; line-height:1.4; }

.card { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--el-1); will-change:transform; transform-style:preserve-3d; }
.card h4 { font-size:var(--fs-md); font-weight:700; margin-bottom:var(--sp-2); }
.card p { color:var(--text-2); font-size:var(--fs-sm); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-4); }
.card-icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--volt-dim); display:grid; place-items:center; margin-bottom:var(--sp-4); font-size:18px; }
.tilt { transition: box-shadow var(--dur-base) ease; }
.tilt:hover { box-shadow: var(--el-2), 0 0 30px var(--glow-1); }

/* tabs with sliding indicator */
.tabs { position:relative; display:inline-flex; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; gap:2px; }
.tab-glider { position:absolute; top:4px; height:calc(100% - 8px); background:var(--volt); border-radius:9px; box-shadow:0 2px 12px var(--glow-1); transition:left .35s var(--ease-spring), width .35s var(--ease-spring); z-index:0; }
.tab { position:relative; z-index:1; padding:8px 18px; border-radius:9px; border:none; background:transparent; color:var(--text-2); font-family:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:color var(--dur-base) ease; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--ink); }

/* progress, skeleton, avatar, tooltip */
.progress { height:8px; border-radius:var(--r-full); background:var(--surface-3); overflow:hidden; max-width:300px; }
.progress .fill { height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--volt-press), var(--volt)); box-shadow:0 0 14px var(--glow-2); position:relative; overflow:hidden; transform-origin:left; }
.progress .fill::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); animation:shimmer 1.8s var(--ease-out) infinite; }
@keyframes shimmer { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
.skeleton { border-radius:var(--r-sm); background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:skel 1.4s ease infinite; }
@keyframes skel { from { background-position:200% 0; } to { background-position:-200% 0; } }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--surface-3); border:2px solid var(--line-strong); display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm); color:var(--text); }
.avatar-volt { background:var(--volt); color:var(--ink); border-color:transparent; box-shadow:0 0 16px var(--glow-1); }
.avatar-stack { display:flex; } .avatar-stack .avatar { margin-left:-10px; border-color:var(--bg); }
.avatar-stack .avatar:first-child { margin-left:0; }
.tt { position:relative; display:inline-flex; }
.tt .tip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px) scale(.9); background:var(--surface-3); border:1px solid var(--line-strong); color:var(--text); font-size:var(--fs-xs); font-weight:600; padding:6px 11px; border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:all .3s var(--ease-spring); box-shadow:var(--el-2); }
.tt:hover .tip { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ---------- overlay system: adaptive dialog, drawer, bottom sheet ---------- */
.scrim { position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(6px); z-index:100; opacity:0; pointer-events:none; transition:opacity var(--dur-base) ease; }
.scrim.open { opacity:1; pointer-events:auto; }

/* ADAPTIVE DIALOG — centered modal on desktop, bottom sheet on mobile.
   Same markup, same JS; the breakpoint does the work. */
.dialog-scrim { display:grid; place-items:center; }
.dialog {
  width:min(440px, calc(100vw - 40px));
  background:var(--surface-1); border:1px solid var(--line-strong);
  border-radius:var(--r-xl); padding:var(--sp-8);
  box-shadow:var(--el-3), 0 0 60px var(--glow-1);
  transform:scale(.9) translateY(24px);
  transition:transform .4s var(--ease-spring);
}
.dialog-scrim.open .dialog { transform:scale(1) translateY(0); }
.dialog h3, .sheet h3, .drawer h3 { font-size:var(--fs-lg); font-weight:700; margin-bottom:var(--sp-2); }
.dialog p, .sheet p, .drawer p { color:var(--text-2); font-size:var(--fs-sm); margin-bottom:var(--sp-6); }
.grabber { display:none; width:40px; height:4px; border-radius:var(--r-full); background:var(--line-strong); margin:0 auto var(--sp-5); }

@media (max-width: 640px) {
  /* the modal → bottom sheet morph */
  .dialog-scrim { place-items:end stretch; }
  .dialog {
    width:100%; max-width:none;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-bottom:none;
    padding:var(--sp-5) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .45s var(--ease-spring);
    touch-action:none;
  }
  .dialog-scrim.open .dialog { transform:translateY(0); }
  .dialog .grabber { display:block; }
  .dialog .row { flex-direction:column-reverse; align-items:stretch; }
  .dialog .row .btn { width:100%; height:48px; } /* thumb-size on mobile */
}

/* BOTTOM SHEET — always bottom-anchored, drag-to-dismiss on any viewport */
.sheet-scrim { display:grid; place-items:end center; }
.sheet {
  width:min(560px, 100vw); background:var(--surface-1);
  border:1px solid var(--line-strong); border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--sp-4) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom));
  box-shadow:var(--el-3), 0 0 60px var(--glow-1);
  transform:translateY(100%); will-change:transform;
  touch-action:none; cursor:grab;
}
.sheet:active { cursor:grabbing; }
.sheet .grabber { display:block; }
.sheet-scrim.open .sheet { transform:translateY(0); }
.sheet-scrim:not(.dragging) .sheet { transition:transform .45s var(--ease-spring); }
.sheet-list { display:grid; gap:2px; margin-top:var(--sp-2); }
.sheet-item { display:flex; align-items:center; gap:var(--sp-3); padding:13px var(--sp-3); border-radius:var(--r-md); background:transparent; border:none; color:var(--text); font-family:inherit; font-size:var(--fs-base); font-weight:600; cursor:pointer; text-align:left; transition:background var(--dur-fast) ease; }
.sheet-item:hover { background:var(--ghost-hover); }
.sheet-item.destructive { color:var(--danger); }
.sheet-item .ico { width:34px; height:34px; border-radius:10px; background:var(--volt-dim); display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.sheet-item.destructive .ico { background:color-mix(in srgb, var(--danger) 14%, transparent); }

/* DRAWER — side panel for nav, filters, detail views */
.drawer-scrim { display:block; }
.drawer {
  position:fixed; top:0; right:0; height:100dvh;
  width:min(380px, 88vw);
  background:var(--surface-1); border-left:1px solid var(--line-strong);
  box-shadow:var(--el-3);
  padding:var(--sp-6);
  transform:translateX(105%);
  transition:transform .45s var(--ease-out);
  display:flex; flex-direction:column; gap:var(--sp-2);
  overflow-y:auto;
}
.drawer-scrim.open .drawer { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.drawer-close { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-2); cursor:pointer; font-size:14px; transition:all var(--dur-fast) ease; }
.drawer-close:hover { color:var(--volt); border-color:var(--volt); transform:rotate(90deg); }
.drawer-link { display:flex; align-items:center; gap:var(--sp-3); padding:12px var(--sp-3); border-radius:var(--r-md); color:var(--text-2); text-decoration:none; font-size:var(--fs-base); font-weight:600; transition:all var(--dur-fast) ease; opacity:0; transform:translateX(24px); }
.drawer-scrim.open .drawer-link { opacity:1; transform:translateX(0); transition:all .5s var(--ease-out); }
.drawer-scrim.open .drawer-link:nth-child(1){transition-delay:.08s} .drawer-scrim.open .drawer-link:nth-child(2){transition-delay:.14s}
.drawer-scrim.open .drawer-link:nth-child(3){transition-delay:.2s} .drawer-scrim.open .drawer-link:nth-child(4){transition-delay:.26s}
.drawer-scrim.open .drawer-link:nth-child(5){transition-delay:.32s}
.drawer-link:hover { color:var(--text); background:var(--ghost-hover); }
.drawer-link.on { color:var(--volt); background:var(--volt-dim); }
[data-theme="light"] .drawer-link.on { color:var(--ink); background:var(--outline-fill); }
.toast {
  position:fixed; bottom:24px; left:50%; z-index:200;
  transform:translateX(-50%) translateY(120%);
  background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:12px 18px; display:flex; align-items:center; gap:10px; box-shadow:var(--el-3);
  font-size:var(--fs-sm); font-weight:600; transition:transform .45s var(--ease-spring);
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast .dot { width:8px; height:8px; border-radius:50%; background:var(--success); }

/* navbar */
.navbar-demo { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-5); box-shadow:var(--el-1); flex-wrap:wrap; }
.navbar-demo .links { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.navbar-demo .links a { color:var(--text-2); text-decoration:none; font-size:var(--fs-sm); font-weight:600; padding:7px 13px; border-radius:var(--r-sm); transition:all var(--dur-fast) ease; }
.navbar-demo .links a:hover { color:var(--text); background:var(--ghost-hover); }
.navbar-demo .links a.on { color:var(--volt); background:var(--volt-dim); }
[data-theme="light"] .navbar-demo .links a.on { color:var(--ink); background:var(--outline-fill); }

/* ---------- true-scale device frames ----------
   Inner frames are built at ACTUAL logical resolution (pt / dp = CSS px)
   then scaled down with transform — every measurement inside is real. */
.device-wrap { --ds: 0.52; position:relative; flex-shrink:0; }
.device { transform:scale(var(--ds)); transform-origin:top left; position:relative;
  background:var(--bg); border:2px solid var(--line-strong); box-shadow:var(--el-3); overflow:hidden;
  display:flex; flex-direction:column; font-family:'Sora',sans-serif; }
.device * { box-sizing:border-box; }
.device-label { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-3); letter-spacing:.08em; line-height:1.8; }
.device-label b { color:var(--text); display:block; font-size:12px; }

/* Hardware shells — the iPhone / Android mockup geometry from MagicUI
   (magicui.design/docs/components/iphone), redrawn on Volt tokens. The screen
   is punched out of the shell with a mask, so the true-scale frame above shows
   through it untouched, and the shell is sized FROM that screen rather than the
   other way round: --sw/--sh are logical pt/dp, --ds is the display scale. */
.phone { position:relative; flex-shrink:0; filter:drop-shadow(0 20px 44px rgba(0,0,0,.5)); }
.phone-screen { position:absolute; overflow:hidden; background:var(--bg); }
.phone-screen .device { border:0; border-radius:0; box-shadow:none; }
.phone-shell { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
/* rail takes the palette, the glass surround stays black like real hardware */
.phone-shell .ph-body { fill:var(--surface-3); stroke:var(--line-strong); stroke-width:1.25; }
.phone-shell .ph-inner { fill:#0b0b0b; }
.phone-shell .ph-speaker { fill:#2a2a2a; }
/* cutouts are holes in the glass — they stay black in every theme and remix */
.phone-shell .ph-cutout { fill:#0a0a0a; }
.phone-shell .ph-lens { fill:#1e1e1e; }
.phone-shell .ph-lens-in { fill:#333; }
/* iPhone: 433x882 shell, screen at 21.25,19.25 · 389.5x843.5 · r55.75 */
.phone-ios { width:calc(var(--sw) * var(--ds) / 0.899538); height:calc(var(--sh) * var(--ds) / 0.956349); }
.phone-ios > .phone-screen { left:4.9077%; top:2.1825%; width:89.9538%; height:95.6349%; border-radius:14.313% / 6.6096%; }
/* Android: 380x830 shell, screen at 9,14 · 360x800 · r33/25 */
.phone-android { width:calc(var(--sw) * var(--ds) / 0.947368); height:calc(var(--sh) * var(--ds) / 0.963855); }
.phone-android > .phone-screen { left:2.3684%; top:1.6867%; width:94.7368%; height:96.3855%; border-radius:9.1667% / 3.125%; }

/* iPhone 16 Pro — 402 x 874 pt, Dynamic Island 125x37pt */
.iphone { width:402px; height:874px; border-radius:55px; }
.ios-statusbar { height:59px; position:relative; display:flex; align-items:flex-end; justify-content:space-between; padding:0 32px 8px; font-size:16px; font-weight:600; }
.ios-navbar { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:17px; }
.ios-navbar .back { color:var(--volt); font-size:17px; }
[data-theme="light"] .ios-navbar .back { color:var(--ink); }
.ios-largetitle { padding:0 16px 8px; font-size:34px; font-weight:800; letter-spacing:-.02em; }
.ios-body { flex:1; padding:8px 16px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.ios-tabbar { height:49px; display:flex; border-top:1px solid var(--line); background:color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter:blur(20px); }
.ios-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10px; color:var(--text-3); }
.ios-tab.on { color:var(--volt); } [data-theme="light"] .ios-tab.on { color:var(--ink); }
.ios-tab .gl { font-size:22px; line-height:1; }
.ios-homearea { height:34px; display:grid; place-items:center; background:color-mix(in srgb, var(--surface-1) 88%, transparent); }
.home-indicator { width:134px; height:5px; border-radius:3px; background:var(--text); opacity:.85; }

/* Pixel 9 Pro — 427 x 952 dp, punch-hole, Material 3 metrics */
.pixel { width:427px; height:952px; border-radius:38px; }
.md-statusbar { height:52px; position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:15px; font-weight:600; }
.md-appbar { height:64px; display:flex; align-items:center; gap:16px; padding:0 16px; }
.md-appbar .t { font-size:22px; font-weight:600; }
.md-body { flex:1; padding:8px 16px; display:flex; flex-direction:column; gap:12px; overflow:hidden; position:relative; }
.md-fab { position:absolute; right:16px; bottom:16px; width:56px; height:56px; border-radius:16px; background:var(--volt); color:var(--ink); display:grid; place-items:center; font-size:24px; font-weight:700; box-shadow:0 8px 24px var(--glow-2); }
.md-navbar { height:80px; display:flex; border-top:1px solid var(--line); background:var(--surface-1); padding-top:12px; }
.md-navitem { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--text-3); }
.md-navitem .pill { width:64px; height:32px; border-radius:16px; display:grid; place-items:center; font-size:18px; }
.md-navitem.on { color:var(--text); }
.md-navitem.on .pill { background:var(--volt-dim); color:var(--volt); }
[data-theme="light"] .md-navitem.on .pill { color:var(--ink); background:var(--outline-fill); }
.md-gesture { height:24px; display:grid; place-items:center; background:var(--surface-1); }
.md-gesture i { width:108px; height:4px; border-radius:2px; background:var(--text); opacity:.7; display:block; }

/* measurement annotations */
.annot { position:absolute; left:100%; margin-left:10px; display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:16px; color:var(--text-3); white-space:nowrap; z-index:3; }
.annot::before { content:''; width:30px; height:1px; background:var(--line-strong); }
.annot b { color:var(--volt); font-weight:600; }
[data-theme="light"] .annot b { color:#5a8a00; }
.mini-card { background:var(--surface-1); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.mini-card .t { font-size:15px; font-weight:700; }
.mini-card .s { font-size:12.5px; color:var(--text-3); font-family:'JetBrains Mono',monospace; margin-top:2px; }

table.dt { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.dt th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); padding:10px 14px; border-bottom:1px solid var(--line-strong); }
.dt td { padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text-2); }
.dt td:first-child { color:var(--text); font-weight:600; }
.dt tr:hover td { background:var(--ghost-hover); }

/* principles */
.principle { display:flex; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--line); }
.principle .n { font-family:'JetBrains Mono',monospace; color:var(--volt); font-size:var(--fs-sm); flex-shrink:0; width:28px; }
[data-theme="light"] .principle .n { color:#5a8a00; }
.principle b { display:block; margin-bottom:2px; }
.principle span { color:var(--text-2); font-size:var(--fs-sm); }

/* motion lab */
.lab { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--sp-4); }
.lab-card { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.lab-stage { height:130px; display:grid; place-items:center; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--volt) 2%, transparent); position:relative; overflow:hidden; }
.lab-info { padding:var(--sp-4) var(--sp-5); }
.lab-info b { font-size:var(--fs-sm); display:block; }
.lab-info span { font-size:var(--fs-xs); color:var(--text-3); font-family:'JetBrains Mono',monospace; }
.lab-replay { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:var(--surface-1); color:var(--text-2); cursor:pointer; font-size:12px; display:grid; place-items:center; transition:all var(--dur-fast) ease; z-index:2; }
.lab-replay:hover { color:var(--volt); border-color:var(--volt); }
.demo-box { width:52px; height:52px; border-radius:var(--r-md); background:var(--volt); box-shadow:0 0 20px var(--glow-1); }
.demo-word { font-weight:800; font-size:22px; letter-spacing:-.02em; display:inline-block; overflow:hidden; padding-bottom:.1em; }
.demo-word > span { display:inline-block; }
.demo-dots { display:flex; gap:10px; }
.demo-dots i { width:16px; height:16px; border-radius:6px; background:var(--volt); display:block; }

/* ---------- empty states ---------- */
.empty {
  border:1.5px dashed var(--line-strong); border-radius:var(--r-xl);
  padding:var(--sp-10) var(--sp-6); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  background:color-mix(in srgb, var(--volt) 2%, transparent);
  min-height:230px; justify-content:center;
}
.empty.solid { border-style:solid; border-color:var(--line); background:var(--surface-1); }
.empty-ico {
  width:56px; height:56px; border-radius:var(--r-lg); display:grid; place-items:center;
  font-size:24px; background:var(--volt-dim); margin-bottom:var(--sp-2);
  box-shadow:0 0 24px var(--glow-1); will-change:transform;
}
.empty.is-error .empty-ico { background:color-mix(in srgb, var(--danger) 14%, transparent); box-shadow:none; }
.empty.is-muted .empty-ico { background:var(--surface-3); box-shadow:none; }
.empty h4 { font-size:var(--fs-md); font-weight:700; }
.empty p { font-size:var(--fs-sm); color:var(--text-2); max-width:280px; margin:0 0 var(--sp-3); }
.empty .meta { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-3); letter-spacing:.1em; margin-top:var(--sp-3); }
.empty-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:var(--sp-4); }

/* ---------- code blocks & syntax highlighting ---------- */
:root, [data-theme="dark"] {
  --tok-key: rgb(161,255,20);   /* keywords */
  --tok-str: #fbbf24;           /* strings */
  --tok-fn: #7dd3fc;            /* functions */
  --tok-num: #f0abfc;           /* numbers */
  --tok-com: #6e7a5c;           /* comments */
  --tok-punc: #8b997b;          /* punctuation */
  --tok-var: #eef7de;           /* identifiers */
  --line-hl: rgba(161,255,20,.07);
  --diff-add: rgba(74,222,128,.1); --diff-add-tok: #4ade80;
  --diff-del: rgba(248,113,113,.09); --diff-del-tok: #f87171;
}
[data-theme="light"] {
  --tok-key: #4f7d00; --tok-str: #a16207; --tok-fn: #0369a1;
  --tok-num: #a21caf; --tok-com: #838e72; --tok-punc: #6b7460; --tok-var: #171a10;
  --line-hl: rgba(120,200,0,.12);
  --diff-add: rgba(21,128,61,.1); --diff-add-tok: #15803d;
  --diff-del: rgba(185,28,28,.08); --diff-del-tok: #b91c1c;
}
.code-block { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--code-bg); margin-top:var(--sp-4); }
.code-head {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:9px var(--sp-4); border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--volt) 3%, var(--code-bg));
}
.code-dots { display:flex; gap:5px; }
.code-dots i { width:9px; height:9px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line-strong); }
.code-file { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-2); }
.code-lang { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; color:var(--text-3); text-transform:uppercase; border:1px solid var(--line); padding:2px 8px; border-radius:var(--r-full); }
.code-copy {
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); background:transparent; color:var(--text-3);
  font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 10px; border-radius:var(--r-sm);
  cursor:pointer; transition:all var(--dur-fast) ease;
}
.code-copy:hover { color:var(--volt); border-color:var(--volt); }
.code-copy.done { color:var(--success); border-color:var(--success); }
[data-theme="light"] .code-copy.done { color:#15803d; border-color:#15803d; }
.code-body { display:grid; grid-template-columns:auto 1fr; overflow-x:auto; padding:var(--sp-3) 0; font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.75; }
.code-gutter { text-align:right; padding:0 var(--sp-3); color:var(--text-3); opacity:.5; user-select:none; border-right:1px solid var(--line); }
.code-lines { padding:0 var(--sp-4); color:var(--tok-var); min-width:max-content; }
.code-lines .ln { display:block; padding:0 var(--sp-4); margin:0 calc(-1 * var(--sp-4)); white-space:pre; }
.code-lines .ln.hl { background:var(--line-hl); box-shadow:inset 2px 0 0 var(--volt); }
.code-lines .ln.add { background:var(--diff-add); }
.code-lines .ln.add::before { content:'+ '; color:var(--diff-add-tok); }
.code-lines .ln.del { background:var(--diff-del); opacity:.75; }
.code-lines .ln.del::before { content:'- '; color:var(--diff-del-tok); }
.tk-k { color:var(--tok-key); font-weight:600; } .tk-s { color:var(--tok-str); }
.tk-f { color:var(--tok-fn); } .tk-n { color:var(--tok-num); }
.tk-c { color:var(--tok-com); font-style:italic; } .tk-p { color:var(--tok-punc); }
/* terminal */
.term .code-lines { color:var(--text-2); }
.term .prompt { color:var(--tok-key); font-weight:600; }
.term .out { color:var(--text-3); }
.term .ok { color:var(--diff-add-tok); }
.tok-swatch { display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 10px; background:var(--code-bg); }
.tok-swatch i { width:12px; height:12px; border-radius:4px; display:inline-block; }

/* ---------- remix (style generator) ---------- */
.remix-btn {
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px;
  border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface-1);
  color:var(--text-2); font-family:inherit; font-size:12.5px; font-weight:650; cursor:pointer;
  transition:all var(--dur-base) ease;
}
.remix-btn:hover { border-color:var(--volt); color:var(--text); box-shadow:0 0 20px var(--glow-1); }
.remix-btn .die { display:inline-flex; font-size:15px; transition:transform .6s var(--ease-spring); }
.remix-btn:hover .die { transform:rotate(180deg); }
.remix-btn.rolling .die { animation:diceRoll .9s var(--ease-out) infinite; }
@keyframes diceRoll { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(220deg) scale(1.25)} 100%{transform:rotate(360deg) scale(1)} }
.remix-reset { display:none; width:34px; height:34px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface-1); color:var(--text-3); cursor:pointer; font-size:13px; transition:all var(--dur-fast) ease; }
.remix-reset.show { display:inline-grid; place-items:center; }
.remix-reset:hover { color:var(--volt); border-color:var(--volt); transform:rotate(-180deg); }
/* AI art-direction chip: on = the LLM writes the DNA, off = local synth engine */
.remix-ai {
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface-1);
  color:var(--text-3); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.1em;
  cursor:pointer; transition:all var(--dur-base) ease; white-space:nowrap;
}
.remix-ai:hover { color:var(--text); border-color:var(--volt); }
.remix-ai.on { color:var(--ink); background:var(--volt); border-color:var(--volt); box-shadow:0 0 18px var(--glow-1); }
.remix-ai .sp { font-size:12px; line-height:1; }
.remix-ai.on .sp { animation:spin 3.4s linear infinite; }
.remix-save {
  width:34px; height:34px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--surface-1); color:var(--text-3); cursor:pointer; font-size:14px;
  display:inline-grid; place-items:center; transition:all var(--dur-fast) ease;
}
.remix-save:hover { color:var(--volt); border-color:var(--volt); transform:scale(1.12); }
.remix-save.saved { color:var(--ink); background:var(--volt); border-color:var(--volt); }
.remix-lib {
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface-1);
  color:var(--text-2); font-family:inherit; font-size:12px; font-weight:650; cursor:pointer;
  transition:all var(--dur-base) ease; white-space:nowrap;
}
.remix-lib:hover { color:var(--text); border-color:var(--volt); }
.remix-lib b { color:var(--volt); font-family:'JetBrains Mono',monospace; font-size:11px; }
[data-theme="light"] .remix-lib b { color:var(--ink); }

/* ---------- saved-style library ---------- */
.lib-drawer { width:min(560px, 94vw); }
.lib-tools { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.lib-grid { display:grid; gap:var(--sp-3); overflow-y:auto; padding-bottom:var(--sp-4); }
.style-card { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) ease; }
.style-card:hover { transform:translateY(-2px); box-shadow:var(--el-2); }
/* the preview paints itself from its OWN saved palette, so it stays truthful
   no matter which style is currently live */
.style-prev { padding:var(--sp-4) var(--sp-5); cursor:pointer; position:relative; overflow:hidden; }
.style-prev .pv-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.style-prev .pv-mark { width:26px; height:26px; display:grid; place-items:center; font-size:12px; font-weight:800; flex-shrink:0; }
.style-prev .pv-btn { height:24px; padding:0 11px; display:inline-grid; place-items:center; font-size:10.5px; font-weight:700; }
.style-prev .pv-card { height:24px; flex:1; border:1px solid; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 7px; }
.style-prev .pv-card i { display:block; height:2px; border-radius:1px; }
.style-prev .pv-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.style-prev .pv-name { font-size:19px; font-weight:800; line-height:1.15; }
.style-prev .pv-label { font-size:11.5px; margin-top:2px; }
.style-prev .pv-meta { font-size:9.5px; letter-spacing:.07em; margin-top:9px; text-transform:uppercase; }
.style-acts { display:flex; border-top:1px solid var(--line); }
.style-acts button {
  flex:1; height:34px; border:none; background:transparent; color:var(--text-2);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; cursor:pointer;
  transition:all var(--dur-fast) ease; text-transform:uppercase;
}
.style-acts button + button { border-left:1px solid var(--line); }
.style-acts button:hover { background:var(--ghost-hover); color:var(--text); }
.style-acts .kill:hover { color:var(--danger); }
.lib-empty { text-align:center; color:var(--text-3); font-size:var(--fs-sm); padding:var(--sp-10) var(--sp-4); }
/* WebGL background canvas — only in the DOM while a shader style is live */
#shaderBg { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; }
/* full-bleed accent wipe that hides the restyle mid-flight */
.style-wipe {
  position:fixed; inset:-2vh 0; z-index:300; pointer-events:none;
  background:var(--acc-grad, var(--volt)); will-change:transform;
}
.theme-flash { animation:themeFlash .5s var(--ease-out); }
@keyframes themeFlash { 0%{filter:saturate(0) brightness(1.4)} 100%{filter:none} }

/* ==========================================================================
   SHADCN-CLASS COMPONENTS — menus, command, disclosure, advanced forms,
   data table, charts, blocks. Every value is a token, so the Remix engine
   restyles all of it for free.
   ========================================================================== */

/* ---------- kbd ---------- */
.kbd {
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  min-width:20px; height:20px; padding:0 5px; font-family:'JetBrains Mono',monospace;
  font-size:10px; font-weight:600; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; line-height:1; white-space:nowrap;
}

/* ---------- menu surface shared by dropdown / context / menubar ---------- */
.menu {
  position:absolute; z-index:60; min-width:210px; padding:5px;
  background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--el-3); display:grid; gap:1px;
  opacity:0; transform:translateY(-6px) scale(.97); transform-origin:top left;
  pointer-events:none; transition:opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring);
}
.menu.open { opacity:1; transform:none; pointer-events:auto; }
.menu-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); padding:6px 9px 3px; }
.menu-item {
  display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px;
  border:none; background:transparent; border-radius:var(--r-sm); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--text-2); text-align:left;
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.menu-item:hover, .menu-item.hl { background:var(--ghost-hover); color:var(--text); }
.menu-item .ico { width:15px; text-align:center; opacity:.75; flex-shrink:0; }
.menu-item .sc { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-3); letter-spacing:.05em; }
.menu-item.destructive { color:var(--danger); }
.menu-item.destructive:hover { background:color-mix(in srgb, var(--danger) 14%, transparent); }
.menu-item[aria-checked="true"] .tick { color:var(--volt); }
.menu-item .tick { width:13px; font-size:11px; color:transparent; flex-shrink:0; }
.menu-sep { height:1px; background:var(--line); margin:4px 2px; }
.menu-sub { position:relative; }
.menu-sub > .menu { top:-6px; left:100%; margin-left:4px; }
.menu-sub:hover > .menu { opacity:1; transform:none; pointer-events:auto; }

.menu-anchor { position:relative; display:inline-flex; }

/* context-menu target */
.ctx-target {
  border:1.5px dashed var(--line-strong); border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6); text-align:center; color:var(--text-3);
  font-size:var(--fs-sm); user-select:none; cursor:context-menu;
  background:color-mix(in srgb, var(--volt) 3%, transparent);
}
.ctx-target b { color:var(--text-2); }

/* menubar */
.menubar { display:inline-flex; align-items:center; gap:2px; padding:4px; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); }
.mb-item { position:relative; }
.mb-trig { padding:6px 11px; border:none; background:transparent; border-radius:var(--r-sm); color:var(--text-2); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all var(--dur-fast) ease; }
.mb-trig:hover, .mb-item.on .mb-trig { background:var(--ghost-hover); color:var(--text); }
.mb-item > .menu { top:calc(100% + 6px); left:0; }

/* ---------- command palette (⌘K) ---------- */
.cmdk-scrim { display:grid; place-items:start center; padding-top:12vh; }
.cmdk {
  width:min(560px, calc(100vw - 32px)); background:var(--surface-1);
  border:1px solid var(--line-strong); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--el-3), 0 0 60px var(--glow-1);
  transform:scale(.96) translateY(-10px); transition:transform .34s var(--ease-spring);
}
.cmdk-scrim.open .cmdk { transform:none; }
.cmdk-top { display:flex; align-items:center; gap:10px; padding:0 var(--sp-4); border-bottom:1px solid var(--line); }
.cmdk-top .mag { color:var(--text-3); font-size:14px; }
.cmd-input { flex:1; height:52px; border:none; background:transparent; color:var(--text); font-family:inherit; font-size:15px; outline:none; }
.cmd-input::placeholder { color:var(--text-3); }
.cmd-list { max-height:min(52vh, 380px); overflow-y:auto; padding:var(--sp-2); }
.cmd-list::-webkit-scrollbar { width:8px; }
.cmd-list::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:99px; }
.cmd-group-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); padding:9px 10px 4px; }
.cmd-item {
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 10px;
  border:none; background:transparent; border-radius:var(--r-sm); cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500; color:var(--text-2); text-align:left;
}
.cmd-item .ico { width:18px; text-align:center; opacity:.8; }
.cmd-item .sc { margin-left:auto; display:flex; gap:3px; }
.cmd-item[aria-selected="true"] { background:var(--volt-dim); color:var(--text); box-shadow:inset 2px 0 0 var(--volt); }
.cmd-empty { padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--text-3); font-size:var(--fs-sm); }
.cmdk-foot { display:flex; align-items:center; gap:var(--sp-4); padding:9px var(--sp-4); border-top:1px solid var(--line); font-size:11px; color:var(--text-3); }
.cmdk-foot span { display:inline-flex; align-items:center; gap:5px; }

/* ---------- accordion / collapsible ---------- */
.acc { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.acc-item + .acc-item { border-top:1px solid var(--line); }
.acc-trig {
  display:flex; align-items:center; gap:var(--sp-3); width:100%; padding:15px var(--sp-5);
  border:none; background:transparent; color:var(--text); font-family:inherit;
  font-size:var(--fs-base); font-weight:650; text-align:left; cursor:pointer;
  transition:background var(--dur-fast) ease;
}
.acc-trig:hover { background:var(--ghost-hover); }
.acc-trig .chev { margin-left:auto; color:var(--text-3); transition:transform var(--dur-base) var(--ease-spring); font-size:11px; }
.acc-item.open .acc-trig .chev { transform:rotate(180deg); color:var(--volt); }
.acc-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease-out); }
.acc-item.open .acc-body { grid-template-rows:1fr; }
.acc-body > div { overflow:hidden; }
.acc-body p { padding:0 var(--sp-5) var(--sp-5); color:var(--text-2); font-size:var(--fs-sm); margin:0; }

/* ---------- popover / hover card ---------- */
.pop-anchor { position:relative; display:inline-flex; }
.pop {
  position:absolute; top:calc(100% + 10px); left:0; z-index:60; width:290px;
  background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--el-3); padding:var(--sp-5);
  opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
  transition:opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring);
}
.pop.open { opacity:1; transform:none; pointer-events:auto; }
.pop h5 { font-size:var(--fs-sm); font-weight:700; margin-bottom:3px; }
.pop p { font-size:var(--fs-xs); color:var(--text-2); margin-bottom:var(--sp-3); }
.hovercard { position:absolute; top:calc(100% + 8px); left:0; z-index:60; width:280px; padding:var(--sp-4); background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--el-3); opacity:0; transform:translateY(-6px); pointer-events:none; transition:all var(--dur-base) var(--ease-out); }
.pop-anchor:hover .hovercard { opacity:1; transform:none; }
.hc-link { color:var(--volt); text-decoration:none; font-weight:650; border-bottom:1px dashed var(--line-strong); }
[data-theme="light"] .hc-link { color:var(--acc-deep, var(--ink)); }

/* ---------- scroll area ---------- */
.scrollarea { height:170px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); background:var(--surface-1); scrollbar-width:thin; }
.scrollarea::-webkit-scrollbar { width:7px; }
.scrollarea::-webkit-scrollbar-track { background:transparent; }
.scrollarea::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:99px; }
.scrollarea::-webkit-scrollbar-thumb:hover { background:var(--volt); }
.sa-row { padding:8px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--text-2); display:flex; gap:var(--sp-3); }
.sa-row:last-child { border-bottom:none; }
.sa-row b { color:var(--text); font-weight:600; min-width:52px; font-family:'JetBrains Mono',monospace; font-size:11px; }

/* ---------- resizable ---------- */
.rsz { display:flex; height:180px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-1); user-select:none; }
.rsz-pane { padding:var(--sp-4); font-size:var(--fs-sm); color:var(--text-2); overflow:hidden; min-width:0; }
.rsz-pane b { display:block; color:var(--text); font-size:var(--fs-xs); font-family:'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.rsz-handle { width:9px; flex-shrink:0; background:var(--surface-2); cursor:col-resize; position:relative; transition:background var(--dur-fast) ease; }
.rsz-handle::after { content:''; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:2px; height:22px; border-radius:2px; background:var(--line-strong); }
.rsz-handle:hover, .rsz-handle.drag { background:var(--volt-dim); }
.rsz-handle:hover::after, .rsz-handle.drag::after { background:var(--volt); }

/* ---------- carousel ---------- */
.carousel { position:relative; }
.car-view { overflow:hidden; border-radius:var(--r-lg); }
.car-track { display:flex; gap:var(--sp-3); transition:transform .5s var(--ease-out); }
.car-slide { flex:0 0 calc(33.333% - var(--sp-3) * 2 / 3); min-width:0; }
.car-slide .ratio { display:grid; place-items:center; font-size:26px; font-weight:800; color:var(--ink); }
.car-btn { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:var(--r-full); border:1px solid var(--line-strong); background:var(--surface-1); color:var(--text); cursor:pointer; display:grid; place-items:center; box-shadow:var(--el-2); z-index:2; transition:all var(--dur-fast) ease; }
.car-btn:hover:not(:disabled) { border-color:var(--volt); color:var(--volt); }
.car-btn:disabled { opacity:.35; cursor:not-allowed; }
.car-btn.prev { left:-14px; } .car-btn.next { right:-14px; }
.car-dots { display:flex; gap:6px; justify-content:center; margin-top:var(--sp-4); }
.car-dots i { width:6px; height:6px; border-radius:99px; background:var(--line-strong); cursor:pointer; transition:all var(--dur-base) var(--ease-spring); }
.car-dots i.on { width:20px; background:var(--volt); }
.ratio { aspect-ratio:16/9; border-radius:var(--r-md); background:var(--acc-grad, var(--volt)); }
.ratio.sq { aspect-ratio:1; }
.sep { height:1px; background:var(--line); margin:var(--sp-5) 0; }
.sep.v { width:1px; height:auto; align-self:stretch; margin:0 var(--sp-4); }

/* ---------- fields, input groups, button groups ---------- */
.fld { display:grid; gap:5px; }
.fld-lab { font-size:var(--fs-sm); font-weight:650; color:var(--text); display:flex; align-items:center; gap:7px; }
.fld-lab .req { color:var(--danger); }
.fld-desc { font-size:var(--fs-xs); color:var(--text-3); }
.fld-err { font-size:var(--fs-xs); color:var(--danger); display:flex; align-items:center; gap:5px; }
.fld-ok { font-size:var(--fs-xs); color:var(--success); display:flex; align-items:center; gap:5px; }

.igroup { display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; transition:border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.igroup:focus-within { border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-dim); }
.igroup > input { flex:1; min-width:0; border:none; background:transparent; color:var(--text); font-family:inherit; font-size:var(--fs-base); padding:11px 12px; outline:none; }
.igroup > input::placeholder { color:var(--text-3); }
/* flex, not grid — a grid addon stacks multi-child content like ⌘ + K */
.igroup-addon { display:flex; align-items:center; gap:4px; padding:0 12px; background:var(--surface-2); color:var(--text-3); font-family:'JetBrains Mono',monospace; font-size:12px; white-space:nowrap; }
.igroup-addon.plain { background:transparent; }
.igroup .btn { border-radius:0; height:auto; }

.bgroup { display:inline-flex; }
.bgroup > .btn { border-radius:0; }
.bgroup > .btn:first-child { border-radius:var(--r-md) 0 0 var(--r-md); }
.bgroup > .btn:last-child { border-radius:0 var(--r-md) var(--r-md) 0; }
.bgroup > .btn + .btn { margin-left:1px; }
.bgroup > .btn-split { padding:0 11px; }

/* ---------- toggle group ---------- */
.tgroup { display:inline-flex; gap:3px; padding:4px; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); }
.tg-item { padding:7px 13px; border:none; background:transparent; border-radius:var(--r-sm); color:var(--text-3); font-family:inherit; font-size:var(--fs-sm); font-weight:650; cursor:pointer; transition:all var(--dur-fast) ease; display:inline-flex; align-items:center; gap:6px; }
.tg-item:hover { color:var(--text); background:var(--ghost-hover); }
.tg-item.on { background:var(--volt); color:var(--ink); box-shadow:0 1px 8px var(--glow-1); }

/* ---------- combobox ---------- */
.combo { position:relative; max-width:320px; }
.combo-trig { display:flex; align-items:center; gap:var(--sp-2); width:100%; height:42px; padding:0 12px; background:var(--surface-1); border:1.5px solid var(--line); border-radius:var(--r-md); color:var(--text); font-family:inherit; font-size:var(--fs-base); cursor:pointer; transition:all var(--dur-base) ease; }
.combo-trig:hover { border-color:var(--line-strong); }
.combo.open .combo-trig { border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-dim); }
.combo-trig .chev { margin-left:auto; color:var(--text-3); font-size:10px; transition:transform var(--dur-base) ease; }
.combo.open .combo-trig .chev { transform:rotate(180deg); }
.combo-trig .ph { color:var(--text-3); }
.combo-panel { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--el-3); overflow:hidden; opacity:0; transform:translateY(-6px); pointer-events:none; transition:all var(--dur-base) var(--ease-out); }
.combo.open .combo-panel { opacity:1; transform:none; pointer-events:auto; }
.combo-search { width:100%; height:38px; padding:0 12px; border:none; border-bottom:1px solid var(--line); background:transparent; color:var(--text); font-family:inherit; font-size:13px; outline:none; }
.combo-list { max-height:190px; overflow-y:auto; padding:5px; }
.combo-opt { display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; border:none; background:transparent; border-radius:var(--r-sm); color:var(--text-2); font-family:inherit; font-size:13px; text-align:left; cursor:pointer; }
.combo-opt:hover, .combo-opt.hl { background:var(--ghost-hover); color:var(--text); }
.combo-opt .tick { margin-left:auto; color:var(--volt); opacity:0; font-size:11px; }
.combo-opt.sel .tick { opacity:1; }
.combo-opt .flag { font-size:15px; }

/* ---------- input OTP ---------- */
.otp { display:flex; gap:8px; }
.otp-slot {
  width:44px; height:52px; text-align:center; font-family:'JetBrains Mono',monospace;
  font-size:19px; font-weight:600; color:var(--text); background:var(--surface-1);
  border:1.5px solid var(--line); border-radius:var(--r-md); outline:none; caret-color:var(--volt);
  transition:all var(--dur-fast) ease;
}
.otp-slot:focus { border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-dim); transform:translateY(-2px); }
.otp-slot.filled { border-color:var(--line-strong); background:var(--surface-2); }
.otp-sep { align-self:center; color:var(--text-3); }
.otp.done .otp-slot { border-color:var(--success); }

/* ---------- slider ---------- */
.sld-wrap { max-width:340px; display:grid; gap:9px; }
.sld-head { display:flex; align-items:baseline; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-2); }
.sld-head b { font-family:'JetBrains Mono',monospace; color:var(--volt); font-size:var(--fs-base); }
[data-theme="light"] .sld-head b { color:var(--acc-deep, var(--ink)); }
.sld { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--surface-3); outline:none; }
.sld::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--volt); border:2px solid var(--bg); box-shadow:0 0 0 1px var(--line-strong), 0 2px 10px var(--glow-1); cursor:grab; transition:transform var(--dur-fast) var(--ease-spring); }
.sld::-webkit-slider-thumb:hover { transform:scale(1.18); }
.sld::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(.94); }
.sld::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--volt); border:2px solid var(--bg); cursor:grab; }
/* two-thumb range: two stacked natives sharing a track */
.sld-range { position:relative; height:18px; }
.sld-range .track { position:absolute; top:6px; left:0; right:0; height:6px; border-radius:99px; background:var(--surface-3); }
.sld-range .fillseg { position:absolute; top:6px; height:6px; border-radius:99px; background:var(--acc-grad, var(--volt)); }
/* both natives must be un-styled by the UA, or the thumbs come back OS-blue */
.sld-range input {
  -webkit-appearance:none; appearance:none;
  position:absolute; top:0; left:0; width:100%; height:18px; margin:0;
  background:transparent; pointer-events:none; outline:none;
}
.sld-range input::-webkit-slider-runnable-track { background:transparent; height:18px; }
.sld-range input::-moz-range-track { background:transparent; height:18px; }
.sld-range input::-webkit-slider-thumb {
  -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:var(--volt); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--line-strong), 0 2px 10px var(--glow-1); cursor:grab;
  transition:transform var(--dur-fast) var(--ease-spring);
}
.sld-range input::-webkit-slider-thumb:hover { transform:scale(1.18); }
.sld-range input::-moz-range-thumb { pointer-events:auto; width:18px; height:18px; border-radius:50%; background:var(--volt); border:2px solid var(--bg); cursor:grab; }

/* ---------- calendar / date picker ---------- */
.cal { width:284px; padding:var(--sp-4); background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--el-2); }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.cal-head b { font-size:var(--fs-sm); font-weight:700; }
.cal-nav { width:26px; height:26px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--text-2); cursor:pointer; font-size:11px; transition:all var(--dur-fast) ease; }
.cal-nav:hover { border-color:var(--volt); color:var(--volt); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-3); text-align:center; padding-bottom:5px; letter-spacing:.06em; }
.cal-day { aspect-ratio:1; border:none; background:transparent; border-radius:var(--r-sm); color:var(--text-2); font-family:inherit; font-size:12px; font-weight:550; cursor:pointer; transition:all var(--dur-fast) ease; }
.cal-day:hover:not(:disabled) { background:var(--ghost-hover); color:var(--text); }
.cal-day.mute { color:var(--text-3); opacity:.45; }
.cal-day.today { box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--text); }
.cal-day.sel { background:var(--volt); color:var(--ink); font-weight:750; box-shadow:0 2px 10px var(--glow-1); }
.cal-day.in-range { background:var(--volt-dim); color:var(--text); border-radius:0; }
.cal-day:disabled { opacity:.25; cursor:not-allowed; }
.datepick-trig { display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 14px; background:var(--surface-1); border:1.5px solid var(--line); border-radius:var(--r-md); color:var(--text); font-family:inherit; font-size:var(--fs-base); cursor:pointer; transition:all var(--dur-base) ease; }
.datepick-trig:hover { border-color:var(--line-strong); }
.datepick-trig .ico { color:var(--text-3); }
.datepick { position:relative; }
.datepick > .cal { position:absolute; top:calc(100% + 8px); left:0; z-index:60; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:all var(--dur-base) var(--ease-spring); }
.datepick.open > .cal { opacity:1; transform:none; pointer-events:auto; }

/* ---------- item / spinner ---------- */
.item-row { display:flex; align-items:center; gap:var(--sp-4); padding:13px var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-1); transition:all var(--dur-fast) ease; }
.item-row:hover { border-color:var(--line-strong); transform:translateX(2px); }
.item-row .media { width:38px; height:38px; border-radius:var(--r-sm); background:var(--volt-dim); display:grid; place-items:center; font-size:17px; flex-shrink:0; }
.item-row .body { min-width:0; flex:1; }
.item-row .body b { display:block; font-size:var(--fs-sm); font-weight:650; }
.item-row .body span { font-size:var(--fs-xs); color:var(--text-3); }
.spinner-ring { width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--volt); animation:spin .7s linear infinite; display:inline-block; }
.spinner-dots { display:inline-flex; gap:4px; }
.spinner-dots i { width:6px; height:6px; border-radius:50%; background:var(--volt); animation:sdBounce 1.1s var(--ease-out) infinite; }
.spinner-dots i:nth-child(2) { animation-delay:.14s } .spinner-dots i:nth-child(3) { animation-delay:.28s }
@keyframes sdBounce { 0%,80%,100%{transform:translateY(0);opacity:.45} 40%{transform:translateY(-6px);opacity:1} }
.spinner-bar { width:86px; height:4px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.spinner-bar i { display:block; width:40%; height:100%; border-radius:99px; background:var(--acc-grad, var(--volt)); animation:sbSlide 1.2s var(--ease-out) infinite; }
@keyframes sbSlide { from{transform:translateX(-100%)} to{transform:translateX(250%)} }

/* ---------- breadcrumb & pagination ---------- */
.crumb { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:var(--fs-sm); }
.crumb a { color:var(--text-3); text-decoration:none; transition:color var(--dur-fast) ease; }
.crumb a:hover { color:var(--volt); }
.crumb .sepr { color:var(--text-3); opacity:.5; font-size:11px; }
.crumb b { color:var(--text); font-weight:650; }
.pager { display:flex; align-items:center; gap:5px; }
.pager-btn { min-width:32px; height:32px; padding:0 9px; border:1px solid var(--line); background:var(--surface-1); color:var(--text-2); border-radius:var(--r-sm); font-family:'JetBrains Mono',monospace; font-size:11.5px; cursor:pointer; transition:all var(--dur-fast) ease; }
.pager-btn:hover:not(:disabled) { border-color:var(--volt); color:var(--volt); }
.pager-btn.on { background:var(--volt); color:var(--ink); border-color:var(--volt); font-weight:700; }
.pager-btn:disabled { opacity:.35; cursor:not-allowed; }
.pager-gap { color:var(--text-3); padding:0 3px; }

/* ---------- data table ---------- */
.dtable-wrap { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-1); }
.dtable-tools { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.dtable-tools .grow { flex:1; }
.dtable-scroll { overflow-x:auto; }
table.dtable { width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:620px; }
.dtable th { text-align:left; padding:10px var(--sp-4); border-bottom:1px solid var(--line-strong); font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; }
.dtable th.sortable { cursor:pointer; user-select:none; transition:color var(--dur-fast) ease; }
.dtable th.sortable:hover { color:var(--volt); }
.dtable th .arrow { opacity:0; margin-left:5px; font-size:9px; }
.dtable th.asc .arrow, .dtable th.desc .arrow { opacity:1; color:var(--volt); }
.dtable th.desc .arrow { display:inline-block; transform:rotate(180deg); }
.dtable td { padding:11px var(--sp-4); border-bottom:1px solid var(--line); color:var(--text-2); }
.dtable tbody tr:last-child td { border-bottom:none; }
.dtable tbody tr { transition:background var(--dur-fast) ease; }
.dtable tbody tr:hover { background:var(--ghost-hover); }
.dtable tbody tr.sel { background:var(--volt-dim); }
.dtable td.num { font-family:'JetBrains Mono',monospace; text-align:right; color:var(--text); }
.dtable td.name { color:var(--text); font-weight:600; }
.dtable .cellchk { width:34px; }
.dtable-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line); flex-wrap:wrap; }
.dtable-count { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); }
.rowmenu-btn { width:26px; height:26px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--text-3); cursor:pointer; transition:all var(--dur-fast) ease; }
.rowmenu-btn:hover { border-color:var(--line); color:var(--text); background:var(--surface-2); }

/* ---------- charts ----------
   Series colours come from the live palette (accent, secondary accent, muted
   ink). Because that palette is generated at runtime it can't be validated
   ahead of time, so identity is NEVER carried by colour alone: every multi-
   series chart ships a legend, direct end labels, and a dashed second series. */
.chart-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-1); padding:var(--sp-5); }
.chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.chart-title { font-size:var(--fs-sm); font-weight:700; }
.chart-sub { font-size:var(--fs-xs); color:var(--text-3); margin-top:2px; }
.chart-hero { font-family:'JetBrains Mono',monospace; font-size:var(--fs-xl); font-weight:700; line-height:1; }
.chart-delta { font-size:var(--fs-xs); color:var(--success); font-family:'JetBrains Mono',monospace; }
.chart-delta.down { color:var(--danger); }
.chart-legend { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-3); font-size:var(--fs-xs); color:var(--text-2); }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.chart-legend i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.chart-legend i.dash { background:repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.chart-svg { display:block; width:100%; overflow:visible; }
.chart-svg text { font-family:'JetBrains Mono',monospace; font-size:9px; fill:var(--text-3); }
.chart-grid line { stroke:var(--line); stroke-width:1; }
.chart-tip {
  position:absolute; z-index:20; pointer-events:none; opacity:0;
  background:var(--surface-3); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:7px 10px; font-size:11px; color:var(--text); box-shadow:var(--el-2);
  transform:translate(-50%, -120%); transition:opacity var(--dur-fast) ease; white-space:nowrap;
}
.chart-tip.show { opacity:1; }
.chart-tip b { font-family:'JetBrains Mono',monospace; }
.chart-tip .k { display:flex; align-items:center; gap:6px; }
.chart-tip .k i { width:8px; height:8px; border-radius:2px; }
.chart-hold { position:relative; }
.gauge-wrap { display:flex; align-items:center; gap:var(--sp-5); }
.gauge-num { font-family:'JetBrains Mono',monospace; font-size:var(--fs-2xl); font-weight:700; line-height:1; }
.gauge-lab { font-size:var(--fs-xs); color:var(--text-3); margin-top:4px; }

/* ---------- blocks ---------- */
.blk { border:1px solid var(--line-strong); border-radius:var(--r-xl); overflow:hidden; background:var(--bg); box-shadow:var(--el-2); }
.blk-bar { display:flex; align-items:center; gap:var(--sp-2); padding:9px var(--sp-4); border-bottom:1px solid var(--line); background:var(--surface-2); }
.blk-bar .dots { display:flex; gap:5px; }
.blk-bar .dots i { width:9px; height:9px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line-strong); }
.blk-bar .path { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-3); }
.blk-bar .tag { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); border:1px solid var(--line); padding:2px 8px; border-radius:var(--r-full); }

/* login block */
.blk-login { display:grid; grid-template-columns:1fr 1fr; min-height:430px; }
.blk-login .form-side { padding:var(--sp-10) var(--sp-8); display:flex; flex-direction:column; justify-content:center; gap:var(--sp-4); }
.blk-login .art-side { position:relative; background:var(--acc-grad, var(--volt)); overflow:hidden; display:grid; place-items:center; }
.blk-login .art-side::after { content:''; position:absolute; inset:0; background-image:radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1.2px, transparent 1.3px); background-size:16px 16px; opacity:.5; }
.blk-login .art-quote { position:relative; z-index:1; padding:var(--sp-8); color:var(--ink); font-size:var(--fs-lg); font-weight:700; line-height:1.35; max-width:320px; }
.blk-login .art-quote small { display:block; margin-top:var(--sp-4); font-size:var(--fs-xs); font-weight:600; opacity:.75; font-family:'JetBrains Mono',monospace; }
.blk-login h4 { font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em; }
.blk-login .muted { color:var(--text-2); font-size:var(--fs-sm); }
.oauth-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.divider-txt { display:flex; align-items:center; gap:var(--sp-3); color:var(--text-3); font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; }
.divider-txt::before, .divider-txt::after { content:''; flex:1; height:1px; background:var(--line); }
@media (max-width: 780px) { .blk-login { grid-template-columns:1fr; } .blk-login .art-side { min-height:150px; } }

/* dashboard block */
.blk-dash { display:grid; grid-template-columns:auto 1fr; min-height:520px; }
.dash-side { width:196px; border-right:1px solid var(--line); padding:var(--sp-4); display:flex; flex-direction:column; gap:2px; background:var(--surface-1); transition:width .38s var(--ease-out); overflow:hidden; }
.dash-side.mini { width:56px; }
.dash-side .brand { display:flex; align-items:center; gap:9px; margin-bottom:var(--sp-4); }
.dash-side .brand b { font-size:14px; font-weight:800; white-space:nowrap; }
.dash-side.mini .brand b, .dash-side.mini .dash-link span, .dash-side.mini .dash-lab { opacity:0; pointer-events:none; }
.dash-lab { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); padding:var(--sp-3) 9px 4px; white-space:nowrap; transition:opacity .2s ease; }
.dash-link { display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; font-size:13px; font-weight:550; cursor:pointer; transition:all var(--dur-fast) ease; white-space:nowrap; border:none; background:transparent; font-family:inherit; text-align:left; }
.dash-link .ico { width:16px; flex-shrink:0; text-align:center; }
.dash-link span { transition:opacity .2s ease; }
.dash-link:hover { background:var(--ghost-hover); color:var(--text); }
.dash-link.on { background:var(--volt-dim); color:var(--volt); box-shadow:inset 2px 0 0 var(--volt); }
[data-theme="light"] .dash-link.on { color:var(--acc-deep, var(--ink)); background:var(--outline-fill); }
.dash-main { min-width:0; display:flex; flex-direction:column; }
.dash-top { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.dash-body { padding:var(--sp-5); display:grid; gap:var(--sp-4); }
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:var(--sp-3); }
.kpi { border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); background:var(--surface-1); }
.kpi .lab { font-size:var(--fs-xs); color:var(--text-3); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.kpi .val { font-family:'JetBrains Mono',monospace; font-size:var(--fs-lg); font-weight:700; margin-top:6px; }
.kpi .spark { margin-top:8px; }
.dash-cols { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--sp-4); }
@media (max-width: 900px) { .dash-cols { grid-template-columns:1fr; } .blk-dash { grid-template-columns:1fr; } .dash-side { width:100%; border-right:none; border-bottom:1px solid var(--line); } .dash-side.mini { width:100%; } }

/* pricing block */
.blk-price { padding:var(--sp-8); display:grid; gap:var(--sp-6); }
.price-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:var(--sp-4); }
.price-card { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); background:var(--surface-1); display:grid; gap:var(--sp-3); align-content:start; position:relative; }
.price-card.feat { border-color:var(--volt); box-shadow:0 0 0 1px var(--volt), 0 12px 40px var(--glow-1); }
.price-card .plan { font-size:var(--fs-sm); font-weight:700; letter-spacing:.02em; }
.price-card .amt { font-family:'JetBrains Mono',monospace; font-size:var(--fs-2xl); font-weight:700; line-height:1; }
.price-card .amt small { font-size:var(--fs-xs); color:var(--text-3); font-weight:500; }
.price-card ul { list-style:none; display:grid; gap:8px; font-size:var(--fs-sm); color:var(--text-2); }
.price-card li { display:flex; gap:9px; align-items:flex-start; }
.price-card li .yes { color:var(--volt); flex-shrink:0; }
[data-theme="light"] .price-card li .yes { color:var(--acc-deep, var(--ink)); }
.price-badge { position:absolute; top:-9px; right:var(--sp-5); font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; background:var(--volt); color:var(--ink); padding:3px 9px; border-radius:var(--r-full); }

/* sonner-style stacked toasts */
.sonner { position:fixed; bottom:22px; right:22px; z-index:210; display:grid; gap:9px; justify-items:end; pointer-events:none; }
.sonner-toast {
  display:flex; align-items:flex-start; gap:10px; min-width:270px; max-width:340px;
  padding:12px 14px; background:var(--surface-1); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--el-3); pointer-events:auto;
  transform:translateY(14px) scale(.96); opacity:0;
  transition:transform .42s var(--ease-spring), opacity .3s ease;
}
.sonner-toast.in { transform:none; opacity:1; }
.sonner-toast.out { transform:translateX(110%); opacity:0; }
.sonner-toast .ic { width:18px; text-align:center; flex-shrink:0; }
.sonner-toast .tx { min-width:0; }
.sonner-toast b { display:block; font-size:var(--fs-sm); font-weight:650; }
.sonner-toast span { font-size:var(--fs-xs); color:var(--text-2); }
.sonner-toast.ok .ic { color:var(--success); } .sonner-toast.err .ic { color:var(--danger); }
.sonner-toast.warn .ic { color:var(--warning); } .sonner-toast.info .ic { color:var(--info); }
.sonner-toast .x { margin-left:auto; border:none; background:transparent; color:var(--text-3); cursor:pointer; font-size:12px; padding:0 2px; }
.sonner-toast .x:hover { color:var(--text); }

/* generic small helpers for the new sections */
.demo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(290px,100%),1fr)); gap:var(--sp-5); align-items:start; }
.demo-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-3); display:block; }
.shadcn-note { font-size:var(--fs-xs); color:var(--text-3); font-family:'JetBrains Mono',monospace; }

/* footer */
footer { margin-top:var(--sp-20); padding:var(--sp-6) 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:var(--sp-3); font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs); color:var(--text-3); }
.footer-swatch { width:12px; height:12px; border-radius:4px; background:var(--volt); box-shadow:0 0 12px var(--glow-2); }
footer span:last-child { margin-left:auto; }

@media (max-width: 900px) {
  .sidebar { display:none; }
  .content { padding:var(--sp-6) var(--sp-4) var(--sp-8); }
}
/* ---------- mobile pass ---------- */
/* grids must never force wider-than-viewport tracks */
.swatch-grid { grid-template-columns:repeat(auto-fill, minmax(min(150px, 44vw), 1fr)); }
.card-grid, .empty-grid { grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.lab { grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.stats { grid-template-columns:repeat(auto-fit, minmax(min(150px, 42vw), 1fr)); }
/* wide tables scroll inside their panel instead of blowing the page out */
.panel:has(table.dt) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.panel table.dt { min-width:540px; }
@media (max-width: 640px) {
  html { scroll-padding-top: var(--sp-4); }
  .content { padding:var(--sp-5) var(--sp-3) var(--sp-8); }
  section { margin-top:var(--sp-12); }
  .hero { min-height:auto; padding-top:var(--sp-4); }
  .hero-sub { font-size:var(--fs-base); }
  .hero-cta .btn { flex:1; min-width:0; }
  .topbar { margin-bottom:var(--sp-6); }
  .sec-head h2 { white-space:normal; font-size:var(--fs-lg); }
  .panel { padding:var(--sp-5) var(--sp-4); border-radius:var(--r-lg); }
  pre { font-size:11px; padding:var(--sp-3) var(--sp-4); }
  .code-body { font-size:11.5px; }
  .type-row { gap:var(--sp-2); }
  .type-row .type-meta { width:100%; }
  .stat-num { font-size:var(--fs-2xl); }
  .toast { width:calc(100vw - 24px); justify-content:center; text-align:center; }
  .device-wrap { --ds: 0.44; }
  .annot { font-size:19px; }
  .btn, .sheet-item { min-height:44px; } /* thumb-size everything interactive */
  .tabs { max-width:100%; overflow-x:auto; }
  .navbar-demo .links { order:3; width:100%; }
  .belt-wrap { margin-top:var(--sp-8); }
  .empty { min-height:200px; padding:var(--sp-8) var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== GENERATED STYLE LAYER — Vapor Cathedral ===== */

/* Vapor Cathedral — Swiss Grid · synth · plain/flat/hairline/round/none/snappy */
[data-theme]{
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:21px;
  --sp-6:25px; --sp-8:33px; --sp-10:41px; --sp-12:49px; --sp-16:66px; --sp-20:82px;
  --fs-xs:10.4px; --fs-sm:12.4px; --fs-base:14.4px; --fs-md:17.6px; --fs-lg:23.6px;
  --fs-xl:28.9px; --fs-2xl:35.4px; --fs-3xl:42.1px; --fs-4xl:51.6px;
  --ease-out:cubic-bezier(.2,.9,.25,1); --ease-spring:cubic-bezier(.3,1.4,.5,1);
  --dur-fast:0.1s; --dur-base:0.18s; --dur-slow:0.34s;
  --el-1:none; --el-2:none; --el-3:none;
  --acc-grad:oklch(0.611 0.196 37.0); --acc-deep:oklch(0.450 0.170 37.0); --stamp:oklch(0.140 0.030 37.0);
}
[data-theme="light"]{
  --volt:oklch(0.611 0.196 37.0); --volt-hover:oklch(0.561 0.196 37.0); --volt-press:oklch(0.541 0.186 37.0); --volt-dim:oklch(0.611 0.196 37.0 / 0.180);
  --ink:oklch(0.985 0.012 37.0); --bg:oklch(0.970 0.009 37.0); --surface-1:oklch(0.992 0.008 37.0); --surface-2:oklch(0.935 0.009 37.0); --surface-3:oklch(0.895 0.010 37.0);
  /* semantics keep their hue anchors but adopt this palette's chroma + lightness */
  --success:oklch(0.520 0.180 150.0); --warning:oklch(0.580 0.190 85.0);
  --danger:oklch(0.540 0.196 25.0); --info:oklch(0.540 0.170 245.0);
  --line:oklch(0.611 0.137 37.0 / 0.130); --line-strong:oklch(0.611 0.157 37.0 / 0.280); --text:oklch(0.190 0.018 37.0); --text-2:oklch(0.420 0.018 37.0); --text-3:oklch(0.580 0.014 37.0);
  --outline-color:oklch(0.450 0.170 37.0); --outline-ring:oklch(0.611 0.196 37.0 / 0.050); --outline-fill:oklch(0.611 0.196 37.0 / 0.200);
  --ghost-hover:oklch(0.611 0.196 37.0 / 0.160); --moving-inner:oklch(0.992 0.008 37.0); --moving-text:oklch(0.140 0.030 37.0);
  --glow-1:oklch(0.611 0.196 37.0 / 0.018); --glow-2:oklch(0.611 0.196 37.0 / 0.032); --grid-line:oklch(0.611 0.157 37.0 / 0.050); --orb:oklch(0.611 0.196 37.0 / 0.160);
  --code-bg:oklch(0.925 0.009 37.0); --scrim:oklch(0.080 0.000 0.0 / 0.450);
  --tok-key:oklch(0.450 0.170 37.0); --tok-str:oklch(0.520 0.140 97.0);
  --tok-fn:oklch(0.500 0.130 237.0); --tok-num:oklch(0.500 0.160 337.0);
  --tok-com:oklch(0.580 0.014 37.0); --tok-punc:oklch(0.580 0.014 37.0); --tok-var:oklch(0.190 0.018 37.0); --line-hl:oklch(0.611 0.196 37.0 / 0.100);
}
/* keep the other mode coherent instead of stranding it on the old palette */
[data-theme="dark"]{
  --volt:oklch(0.611 0.196 37.0); --volt-hover:oklch(0.561 0.196 37.0); --volt-press:oklch(0.541 0.186 37.0); --volt-dim:oklch(0.611 0.196 37.0 / 0.160); --ink:oklch(0.985 0.012 37.0);
  --bg:oklch(0.160 0.009 37.0); --surface-1:oklch(0.190 0.007 37.0);
  --surface-2:oklch(0.220 0.009 37.0); --surface-3:oklch(0.260 0.009 37.0);
  --line:oklch(0.900 0.020 37.0 / 0.120); --line-strong:oklch(0.920 0.020 37.0 / 0.300);
  --text:oklch(0.945 0.018 37.0); --text-2:oklch(0.740 0.018 37.0); --text-3:oklch(0.560 0.014 37.0);
  --code-bg:oklch(0.190 0.009 37.0); --orb:oklch(0.611 0.196 37.0 / 0.180); --grid-line:oklch(0.611 0.157 37.0 / 0.060);
  --glow-1:oklch(0.611 0.196 37.0 / 0.018); --glow-2:oklch(0.611 0.196 37.0 / 0.031); --tok-key:oklch(0.611 0.196 37.0); --tok-var:oklch(0.945 0.018 37.0);
}

/* ---- typography ---- */
body[data-theme], [data-theme] .device{ font-family:'Familjen Grotesk', system-ui, sans-serif; }
[data-theme] h1,[data-theme] h2,[data-theme] h3,[data-theme] h4,[data-theme] .logo-text,[data-theme] .hero h1,
[data-theme] .stat-num,[data-theme] .demo-word,[data-theme] .ios-largetitle,[data-theme] .md-appbar .t{
  font-family:'Familjen Grotesk', system-ui, sans-serif; letter-spacing:-0.036em; text-transform:uppercase; font-weight:700;
}
[data-theme] pre,[data-theme] code,[data-theme] .code-body,[data-theme] .type-meta,[data-theme] .nav-label,
[data-theme] .sec-num,[data-theme] .badge-live,[data-theme] .belt-item,[data-theme] .space-label,[data-theme] .hero-meta,
[data-theme] .dt th,[data-theme] .code-file,[data-theme] .code-lang,[data-theme] .code-copy,[data-theme] .empty .meta,
[data-theme] .tok-swatch,[data-theme] footer,[data-theme] .annot,[data-theme] .device-label,[data-theme] .mini-card .s,
[data-theme] .lab-info span,[data-theme] .principle .n,[data-theme] .swatch-val{ font-family:'Source Code Pro', ui-monospace, monospace !important; }
[data-theme] .btn{ border-radius:var(--r-md); font-family:'Familjen Grotesk', system-ui, sans-serif;
  text-transform:uppercase; letter-spacing:.08em; }
[data-theme="light"] .hero h1 em{ -webkit-text-stroke:0; }


/* ---- atmosphere ---- */
[data-theme] .grid-bg{background-image:none;animation:none;}
[data-theme] .orb{ background:radial-gradient(ellipse, var(--orb), transparent 65%); width:614px; height:542px; }
body::after{ content:''; position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E"); background-size:200px 200px; mix-blend-mode:multiply; }

/* ---- surface material + border logic ---- */
/* PATCHED: the export hardcoded the LIGHT --surface-1 literal here under the
   theme-agnostic [data-theme] selector, so cards/panels/dialogs could never
   repaint in dark mode (breaks spec rule 4). Restored to the token; the light
   theme resolves it to the exact same value, so light mode is unchanged. */
[data-theme] .menu,[data-theme] .cmdk,[data-theme] .pop,[data-theme] .hovercard,[data-theme] .acc,[data-theme] .scrollarea,[data-theme] .rsz,[data-theme] .igroup,[data-theme] .tgroup,[data-theme] .combo-trig,[data-theme] .combo-panel,[data-theme] .otp-slot,[data-theme] .cal,[data-theme] .datepick-trig,[data-theme] .item-row,[data-theme] .dtable-wrap,[data-theme] .chart-card,[data-theme] .kpi,[data-theme] .price-card,[data-theme] .menubar,[data-theme] .kbd,[data-theme] .blk,[data-theme] .sonner-toast,[data-theme] .pager-btn,[data-theme] .card,[data-theme] .panel,[data-theme] .stat,[data-theme] .fcard,[data-theme] .navbar-demo,[data-theme] .lab-card,[data-theme] .code-block,[data-theme] .mini-card,[data-theme] .tabs,[data-theme] .swatch,[data-theme] .empty.solid,[data-theme] .tok-swatch,[data-theme] .toast,[data-theme] .dialog,[data-theme] .sheet,[data-theme] .drawer,[data-theme] .badge-live,[data-theme] .belt-item,[data-theme] .remix-btn,[data-theme] .remix-reset,[data-theme] .remix-ai,[data-theme] .theme-toggle,[data-theme] .input,[data-theme] .textarea,[data-theme] .select,[data-theme] .btn-secondary{background:var(--surface-1);box-shadow:none;backdrop-filter:none;}
[data-theme] .menu,[data-theme] .cmdk,[data-theme] .pop,[data-theme] .hovercard,[data-theme] .acc,[data-theme] .scrollarea,[data-theme] .rsz,[data-theme] .igroup,[data-theme] .tgroup,[data-theme] .combo-trig,[data-theme] .combo-panel,[data-theme] .otp-slot,[data-theme] .cal,[data-theme] .datepick-trig,[data-theme] .item-row,[data-theme] .dtable-wrap,[data-theme] .chart-card,[data-theme] .kpi,[data-theme] .price-card,[data-theme] .menubar,[data-theme] .blk,[data-theme] .sonner-toast,[data-theme] .ctx-target,[data-theme] .card,[data-theme] .panel,[data-theme] .stat,[data-theme] .fcard,[data-theme] .navbar-demo,[data-theme] .lab-card,[data-theme] .code-block,[data-theme] .mini-card,[data-theme] .tabs,[data-theme] .swatch,[data-theme] .tok-swatch,[data-theme] .toast,[data-theme] .dialog,[data-theme] .sheet,[data-theme] .badge-live,[data-theme] .belt-item,[data-theme] .remix-btn,[data-theme] .remix-reset,[data-theme] .remix-ai,[data-theme] .theme-toggle,[data-theme] .input,[data-theme] .textarea,[data-theme] .select,[data-theme] .code-copy,[data-theme] .lab-replay,[data-theme] .drawer-close{border-width:1px;border-style:solid;border-color:var(--line);}
[data-theme] .sidebar{ border-right-width:1px; border-right-style:solid; }
[data-theme] .code-block,[data-theme] .toast,[data-theme] .dialog,[data-theme] .sheet{ overflow:hidden; }

/* ---- accent surfaces ---- */
[data-theme] .btn-solid{ background:oklch(0.611 0.196 37.0); color:var(--ink);
  box-shadow:none; }
[data-theme] .btn-solid:hover:not(:disabled){ transform:translateY(-2px);
  box-shadow:none; }
[data-theme] .btn-solid::after{ display:none; }
[data-theme] .logo-mark{ background:oklch(0.611 0.196 37.0); border-radius:20px; color:var(--ink);
  box-shadow:none; }
[data-theme] .footer-swatch,[data-theme] .demo-box,[data-theme] .demo-dots i,[data-theme] .space-bar,
[data-theme] .tab-glider,[data-theme] .md-fab{ background:oklch(0.611 0.196 37.0); }
[data-theme] .progress .fill{ background:linear-gradient(90deg,oklch(0.541 0.186 37.0),oklch(0.611 0.196 37.0)); }
[data-theme] .btn-moving .ring{ background:conic-gradient(from 0deg, transparent 250deg, oklch(0.611 0.196 37.0) 310deg, oklch(0.571 0.180 150.0) 340deg, transparent 360deg); }
[data-theme] .card-icon,[data-theme] .empty-ico,[data-theme] .sheet-item .ico{ background:var(--volt-dim); border-radius:18px; }
[data-theme] h3.sub::before{ background:oklch(0.611 0.196 37.0); }
[data-theme] ::selection{ background:oklch(0.611 0.196 37.0); color:oklch(0.985 0.012 37.0); }
[data-theme] .cursor{ width:12px;height:12px;border-radius:50%;background:oklch(0.611 0.196 37.0);mix-blend-mode:difference;border:none;filter:none; }
@keyframes pulse{ 0%,100%{box-shadow:0 0 0 0 oklch(0.611 0.196 37.0 / 0.045)} 50%{box-shadow:0 0 0 6px oklch(0.611 0.196 37.0 / 0.000)} }
@keyframes halo{ 0%,100%{opacity:0.10} 50%{opacity:0.30} }
@keyframes themeFlash{ 0%{filter:saturate(.25) brightness(0.82) hue-rotate(23deg)} 100%{filter:none} }

/* ---- accents the base sheet hardcoded green in light mode ---- */
[data-theme="light"] .sec-num,[data-theme="light"] .principle .n,[data-theme="light"] .stat-num .accent,
[data-theme="light"] .annot b,[data-theme="light"] pre .k,[data-theme="light"] .belt-item b,
[data-theme="light"] .ios-navbar .back,[data-theme="light"] .ios-tab.on,[data-theme="light"] .nav-link.active,
[data-theme="light"] .navbar-demo .links a.on,[data-theme="light"] .drawer-link.on,[data-theme="light"] .chip-volt,
[data-theme="light"] .md-navitem.on .pill{ color:var(--acc-deep); }
[data-theme="light"] .chip-success,[data-theme="light"] .code-copy.done{ color:var(--success); }
[data-theme="light"] .chip-warning{ color:var(--warning); }
[data-theme="light"] .chip-danger{ color:var(--danger); }
/* the AI chip's own accent state has to outrank the generated surface material */
[data-theme] .remix-ai.on{ background:oklch(0.611 0.196 37.0); color:oklch(0.985 0.012 37.0); border-color:var(--volt); }