/* theme.css — VIDEZ design system.
 * "NEON TERMINAL": Apple-TV-grade layout & motion wearing a cyberpunk skin —
 * true-black canvas, cinematic depth (soft shadow + faint neon rim), generous
 * editorial spacing, big sans display titles paired with mono terminal readouts,
 * cyan primary + magenta accent used with restraint. Content provides the color;
 * chrome stays quiet until you touch it. */

:root{
  /* deeper, truer black for TV-grade contrast */
  --bg:#060609; --bg-2:#0a0a10; --bg-3:#0e0e16;
  --panel:rgba(255,255,255,0.024);
  --panel-2:rgba(255,255,255,0.045);
  --panel-hi:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.16);

  --text:#f3f5fb; --text-dim:#9aa1b4; --text-faint:#5b6178;

  --cyan:#3ee7ff;  --cyan-rgb:62,231,255;
  --pink:#ff4d94;  --pink-rgb:255,77,148;
  --violet:#a97bff; --violet-rgb:169,123,255;
  --on-accent:#03060a;

  /* squared/retro corners (terminal), tiny softening only on large surfaces */
  --r-sm:0px; --r-md:1px; --r-lg:3px; --r-xl:6px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --touch:46px;
  /* Apple-grade easing */
  --tr:220ms cubic-bezier(.22,.61,.18,1); --tr-fast:130ms cubic-bezier(.22,.61,.18,1);
  --ease:cubic-bezier(.22,.61,.18,1);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --shadow-card:0 18px 44px -20px rgba(0,0,0,.85), 0 6px 16px -10px rgba(0,0,0,.7);
  --shadow-pop:0 34px 80px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--cyan-rgb),.22), 0 0 42px -8px rgba(var(--cyan-rgb),.28);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); font-family:var(--font); font-size:15px; line-height:1.55;
  background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1100px 620px at 84% -8%, rgba(var(--pink-rgb),0.07), transparent 60%),
    radial-gradient(1000px 640px at 2% -6%, rgba(var(--cyan-rgb),0.06), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(var(--violet-rgb),0.05), transparent 60%);
  background-attachment:fixed;
}
/* CRT signal: scanlines + faint aperture-grille tint + edge vignette. pointer-events:none, and
   z-index sits ABOVE the UI but BELOW fullscreen video (z 99999) so a maximized movie stays clean. */
body::before{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.17) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(var(--cyan-rgb),.022) 0 1px, rgba(var(--pink-rgb),.022) 1px 2px, transparent 2px 3px),
    radial-gradient(130% 120% at 50% 50%, transparent 66%, rgba(0,0,0,.46) 100%);
  opacity:.92;
}
body > *{ position:relative; z-index:1; }
h1,h2,h3{ margin:0; font-weight:650; letter-spacing:-.015em; }
a{ color:var(--cyan); text-decoration:none; }
::selection{ background:rgba(var(--cyan-rgb),0.30); color:#fff; }
img{ max-width:100%; display:block; }

/* keyboard / D-pad focus — essential for a TV/car remote */
:focus-visible{ outline:none; }
.focusable:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, .poster:focus-visible{
  outline:2px solid rgba(var(--cyan-rgb),.9); outline-offset:3px;
  box-shadow:0 0 0 4px rgba(var(--cyan-rgb),.18);
}

/* ---- type helpers ---- */
/* phosphor bloom: lit mono type glows faintly like a CRT readout */
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:var(--pink); font-weight:600;
  text-shadow:0 0 7px rgba(var(--pink-rgb),.45), 0 0 2px rgba(var(--pink-rgb),.6); }
.eyebrow-dim{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--text-faint); }
.title-xl{ font-weight:750; font-size:clamp(34px,5.4vw,68px); letter-spacing:-.025em; line-height:1.0; }
.title-lg{ font-weight:700; font-size:clamp(22px,2.8vw,32px); letter-spacing:-.02em; }
.text-dim{ color:var(--text-dim); } .text-faint{ color:var(--text-faint); } .mono{ font-family:var(--mono); }
.text-gradient,.hl{ color:var(--text); }
.readout{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--text-dim); display:inline-flex; align-items:center; gap:10px; }
.readout .sep{ opacity:.35; }
.badge{ text-shadow:0 0 6px rgba(var(--cyan-rgb),.28); }
.glow-cyan{ color:var(--cyan); text-shadow:0 0 8px rgba(var(--cyan-rgb),.5), 0 0 2px rgba(var(--cyan-rgb),.7); }
.glow-pink{ color:var(--pink); text-shadow:0 0 8px rgba(var(--pink-rgb),.5), 0 0 2px rgba(var(--pink-rgb),.7); }
/* subtle analog chromatic split for big display titles (kept to 1px so it reads as texture) */
.aberrate{ text-shadow:-1px 0 rgba(var(--pink-rgb),.5), 1px 0 rgba(var(--cyan-rgb),.5); }
/* CSS-only terminal boot line — types once on load, blinking caret */
.boot{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); white-space:nowrap; overflow:hidden; border-right:2px solid var(--cyan); max-width:0;
  text-shadow:0 0 8px rgba(var(--cyan-rgb),.5); animation:type 1.1s steps(30,end) forwards, blink 1.15s steps(1) infinite; }
@keyframes type{ to{ max-width:40ch; } }
/* inline blinking cursor for status/console text */
.cur-inline{ display:inline-block; width:8px; height:1em; margin-left:5px; vertical-align:-2px; background:var(--cyan);
  box-shadow:0 0 10px rgba(var(--cyan-rgb),.7); animation:blink 1.15s steps(1) infinite; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--touch); padding:0 var(--s5);
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--tr), background var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ border-color:var(--line-2); background:var(--panel-2); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-lg{ min-height:56px; padding:0 var(--s6); font-size:13px; letter-spacing:.16em; }
.btn-sm{ min-height:38px; padding:0 var(--s4); font-size:11px; }
.btn-block{ width:100%; }
/* primary = filled neon cyan (the hero "Play") */
.btn-primary{ color:var(--on-accent); font-weight:700;
  background:linear-gradient(180deg,#7ff0ff,var(--cyan)); border-color:transparent;
  box-shadow:0 8px 26px -10px rgba(var(--cyan-rgb),.6); }
.btn-primary:hover{ background:linear-gradient(180deg,#9df4ff,#54eaff); box-shadow:0 12px 34px -8px rgba(var(--cyan-rgb),.75); transform:translateY(-1px); }
/* nested sub-text on the neon fill stays solid near-black (never dimmed to a washed teal) */
.btn-primary small, .btn-primary .sub{ color:var(--on-accent); opacity:1; font-weight:500; }

/* ---- corner-bracket frame (retro targeting-reticle) — no extra markup ---- */
.framed{ position:relative; }
.framed::before, .framed::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; z-index:2; }
.framed::before{ top:-1px; left:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); box-shadow:-2px -2px 12px -4px rgba(var(--cyan-rgb),.6); }
.framed::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); box-shadow:2px 2px 12px -4px rgba(var(--cyan-rgb),.6); }
.btn-neon{ color:var(--cyan); border-color:rgba(var(--cyan-rgb),0.45); background:rgba(var(--cyan-rgb),.05); }
.btn-neon:hover{ border-color:var(--cyan); background:rgba(var(--cyan-rgb),0.11); box-shadow:0 0 24px -6px rgba(var(--cyan-rgb),.4); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:rgba(255,255,255,.05); }
.btn-ghost:hover{ color:#fff; background:rgba(255,255,255,.1); border-color:var(--line-2); }
.btn.on, .btn[aria-pressed="true"]{ color:var(--cyan); border-color:rgba(var(--cyan-rgb),0.6); background:rgba(var(--cyan-rgb),0.1); }

/* ---- chips (filters) ---- */
.chip{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:38px; padding:0 var(--s4);
  border:1px solid var(--line); border-radius:var(--r-pill); font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--text-dim);
  cursor:pointer; background:transparent; transition:color var(--tr), border-color var(--tr), background var(--tr);
}
.chip:hover{ color:var(--text); border-color:var(--line-2); background:var(--panel); }
.chip.is-active, .chip[aria-selected="true"]{ color:var(--on-accent); background:var(--cyan); border-color:transparent; font-weight:700; }

/* ---- badges / status dots ---- */
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }

/* ---- surfaces ---- */
.glass, .panel, .card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.glass-strong{ background:var(--panel-2); border-color:var(--line); }
.panel{ padding:var(--s5); }
/* dashed rules read as terminal chrome, not a modern design-system hairline */
.divider{ height:0; border:0; border-top:1px dashed var(--line-2); margin:var(--s5) 0; }
.divider-label{ display:flex; align-items:center; gap:var(--s3); font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-faint); margin:var(--s5) 0; }
.divider-label::before, .divider-label::after{ content:""; flex:1; border-top:1px dashed var(--line-2); }

/* ---- inputs / search (squared = terminal, not pill) ---- */
.input, input[type="text"], input[type="search"]{
  min-height:var(--touch); padding:0 var(--s4); font:inherit; color:var(--text); caret-color:var(--cyan);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.input::placeholder{ color:var(--text-faint); }
.input:focus, input:focus{ outline:none; border-color:rgba(var(--cyan-rgb),0.55); background:var(--panel-2); box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.12); }
.search{ position:relative; }
.search .ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:15px; }
.search input{ padding-left:42px; }

/* ---- layout ---- */
.container{ max-width:1680px; margin:0 auto; padding:0 clamp(20px,4vw,64px); }
.stack{ display:flex; flex-direction:column; gap:var(--s4); }
.row-flex{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.grow{ flex:1; } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---- top nav ---- */
.topnav{ display:flex; align-items:center; gap:clamp(20px,3vw,48px); padding:var(--s4) clamp(20px,4vw,64px);
  position:sticky; top:0; z-index:40; background:linear-gradient(180deg, rgba(6,6,9,.86), rgba(6,6,9,.55) 70%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); }
.topnav.scrolled{ background:rgba(6,6,9,.9); border-bottom:1px solid var(--line); }
.brand{ font-weight:750; font-size:20px; letter-spacing:.34em; color:var(--text); white-space:nowrap; display:inline-flex; align-items:center; }
.brand b{ color:var(--cyan); font-weight:750; text-shadow:0 0 18px rgba(var(--cyan-rgb),.5); }
.brand .cur{ width:9px; height:17px; margin-left:5px; background:var(--cyan); box-shadow:0 0 12px rgba(var(--cyan-rgb),.7); animation:blink 1.15s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.navlinks{ display:flex; gap:var(--s5); }
.navlink{ position:relative; padding:6px 2px; color:var(--text-dim); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; cursor:pointer; background:none; border:0; }
.navlink:hover{ color:var(--text); }
.navlink.active{ color:var(--text); }
.navlink.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--cyan); box-shadow:0 0 12px rgba(var(--cyan-rgb),.7); }

/* ---- content rows ---- */
.rowsec{ margin:var(--s8) 0; }
.rowhead{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 var(--s4); }
.rowhead h2{ font-family:var(--mono); font-size:clamp(14px,1.25vw,17px); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
.rowhead h2::before{ content:"// "; color:var(--cyan); text-shadow:0 0 8px rgba(var(--cyan-rgb),.5); }
.rowhead .count, .rowhead .seeall{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.rowhead .seeall{ cursor:pointer; transition:color var(--tr); } .rowhead .seeall:hover{ color:var(--cyan); }
.track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(230px,22vw,300px); gap:clamp(12px,1.3vw,22px);
  overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; padding:6px 0 var(--s4);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; scroll-padding-left:2px; }
.track::-webkit-scrollbar{ height:6px; }
.track::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:var(--r-pill); }
.track::-webkit-scrollbar-track{ background:transparent; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(14px,1.4vw,24px); }

/* ---- poster card ---- */
.poster{ position:relative; scroll-snap-align:start; cursor:pointer; border:0; background:none; padding:0; text-align:left;
  transition:transform var(--tr); will-change:transform; }
.poster .art{ position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:#04050b; box-shadow:var(--shadow-card); transition:border-color var(--tr), box-shadow var(--tr), filter var(--tr); }
/* procedural neon art when there's no poster image: two hash-placed glows + perspective grid */
.poster .art[data-gen]{
  background:
    radial-gradient(120% 120% at var(--gx,25%) 8%, hsla(var(--h1,190),95%,62%,.55), transparent 46%),
    radial-gradient(130% 130% at var(--gx2,85%) 108%, hsla(var(--h2,320),90%,60%,.5), transparent 52%),
    linear-gradient(150deg, #0a0b14, #05060c 60%);
}
.poster .art[data-gen]::before{ content:""; position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; mask-image:linear-gradient(0deg, #000 0%, transparent 62%); opacity:.5; transition:opacity var(--tr); }
.poster .art .imgfill{ position:absolute; inset:0; background:center/cover no-repeat; }
.poster .art::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, rgba(4,5,10,.82) 0%, rgba(4,5,10,.06) 44%, transparent 66%); }
.poster:hover{ transform:translateY(-6px) scale(1.035); z-index:5; }
.poster:hover .art{ border-color:rgba(var(--cyan-rgb),.6); box-shadow:var(--shadow-pop); filter:saturate(1.08) brightness(1.04); }
.poster:hover .art[data-gen]::before{ opacity:.85; }
/* watermark title inside generated art, for identity even before hover */
.poster .genlabel{ position:absolute; z-index:3; left:14px; right:14px; top:13px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.poster .top{ position:absolute; top:11px; right:12px; z-index:4; display:flex; gap:6px; align-items:center; }
.poster .play-badge{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--tr); }
.poster:hover .play-badge{ opacity:1; }
.poster .play-badge span{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--on-accent); background:linear-gradient(180deg,#7ff0ff,var(--cyan));
  box-shadow:0 10px 30px -8px rgba(var(--cyan-rgb),.7); padding-left:3px; }
.poster .body{ padding:var(--s3) 2px 0; }
.poster .ptitle{ font-weight:650; font-size:14.5px; letter-spacing:-.01em; line-height:1.25; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.poster .pmeta{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--text-faint); margin-top:5px; }
.statusdot{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 9px currentColor; display:inline-block; }
/* resume progress (Continue Watching) */
.prog{ position:absolute; left:0; right:0; bottom:0; z-index:3; height:4px; background:rgba(0,0,0,.55); }
.prog > i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),#9df4ff); box-shadow:0 0 10px rgba(var(--cyan-rgb),.8); }

/* local-mode hover action buttons on a card */
.poster .acts{ display:none; gap:6px; }
.poster:hover .acts{ display:flex; }
.poster .acts button, .poster .acts label{ width:30px; height:30px; min-height:30px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; cursor:pointer; color:var(--text);
  background:rgba(4,6,12,.82); border:1px solid var(--line); border-radius:var(--r-md); backdrop-filter:blur(6px); }
.poster .acts button:hover, .poster .acts label:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ---- stat rail card (diagnostics etc.) ---- */
.stat{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:var(--s4); }
.stat .lbl{ display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:12px; letter-spacing:.04em; }
.stat .val{ font-size:24px; font-weight:700; letter-spacing:-.01em; margin-top:6px; }
.stat .val small{ color:var(--text-faint); font-size:13px; font-weight:400; }

@media (max-width:640px){
  .title-xl{ font-size:clamp(30px,9vw,42px); }
  .track{ grid-auto-columns:clamp(150px,44vw,190px); }
  .rowsec{ margin:var(--s6) 0; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } html{ scroll-behavior:auto; } }

/* ---- back-compat aliases (player/watch/share styled against old names) — DO NOT REMOVE ---- */
:root{
  --bg-base:var(--bg); --bg-deep:#040406; --bg-raised:var(--bg-2); --bg-elevated:var(--bg-3);
  --surface:var(--panel); --surface-2:var(--panel-2); --surface-hi:var(--panel-hi);
  --text-on-accent:var(--on-accent);
  --accent-1:var(--cyan); --accent-2:var(--pink); --accent-1-rgb:var(--cyan-rgb); --accent-2-rgb:var(--pink-rgb);
  --grad:linear-gradient(120deg,var(--cyan),var(--pink)); --gradient-accent:linear-gradient(120deg,var(--cyan),var(--pink));
  --gradient-accent-soft:linear-gradient(120deg,rgba(var(--cyan-rgb),.14),rgba(var(--pink-rgb),.14));
  --grad-soft:var(--gradient-accent-soft);
  --glass-fill:var(--panel); --glass-fill-strong:var(--panel-2); --glass-fill-hover:var(--panel-hi);
  --glass-blur:10px; --glass-blur-strong:16px;
  --top-hi:inset 0 1px 0 rgba(255,255,255,0.04);
  --inner-highlight:inset 0 1px 0 rgba(255,255,255,0.04); --inner-highlight-strong:inset 0 1px 0 rgba(255,255,255,0.08);
  --inner-hairline:inset 0 0 0 1px var(--line);
  --shadow-sm:0 2px 10px rgba(0,0,0,.4); --shadow-md:0 12px 30px -14px rgba(0,0,0,.7); --shadow-lg:0 24px 60px -22px rgba(0,0,0,.85); --shadow-xl:var(--shadow-lg);
  --glow-cyan:0 0 0 1px rgba(var(--cyan-rgb),.4), 0 0 20px rgba(var(--cyan-rgb),.25);
  --glow-accent:var(--glow-cyan); --glow-accent-soft:0 0 16px rgba(var(--cyan-rgb),.2); --glow-focus:var(--glow-cyan); --glow-red:var(--glow-cyan);
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-xl:var(--r-xl); --radius-pill:var(--r-pill);
  --space-1:var(--s1); --space-2:var(--s2); --space-3:var(--s3); --space-4:var(--s4); --space-5:var(--s5); --space-6:var(--s6); --space-7:var(--s7); --space-8:var(--s8);
  --transition:var(--tr); --transition-fast:var(--tr-fast);
  --font-sans:var(--font); --font-mono:var(--mono); --acc:var(--cyan); --freeze:var(--pink); --red:var(--pink); --red-rgb:var(--pink-rgb); --on-accent:var(--on-accent);
}
.row{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.stack-sm{ display:flex; flex-direction:column; gap:var(--s2); } .stack-lg{ display:flex; flex-direction:column; gap:var(--s5); }
.center{ text-align:center; }
.field{ min-height:var(--touch); padding:0 var(--s4); font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); }
.field:focus{ outline:none; border-color:rgba(var(--cyan-rgb),.5); }
.progress{ height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); overflow:hidden; }
.progress-fill, .progress > [data-fill]{ height:100%; background:var(--cyan); }
.is-interactive{ cursor:pointer; transition:transform var(--tr), border-color var(--tr); }
.is-interactive:hover{ transform:translateY(-3px); border-color:rgba(var(--cyan-rgb),.4); }
.badge-solid{ color:var(--cyan); } .badge-neutral{ opacity:.7; }