/* ══════════════════════════════════════════════════════════════════
   UNZEN — pure-black technical minimalism.
   Playfair Display (display, gradient-filled) + Inter (UI) + JetBrains Mono
   (labels, data). Colour is spent only on the mist gradient; everything else
   is white at varying opacity over black.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* ── palette ───────────────────────────────────────────────────────────
     Named after the mountain the brand is named after: volcanic rock, the
     steam above it, and the minerals in the water.

     BASALT  ground, opaque. Use for surfaces that must survive being exported,
             emailed or screenshotted, where alpha has nothing to sit on.
     VEIL    the same cool white at low alpha. This is what gives the black its
             blue cast; it is the house hairline and the house fill.
     STEAM   ink.
     MIST    the only chroma. Never a flat fill — it exists to be a gradient.
     Semantic colours are deliberately outside the mist range so that state can
     never be mistaken for decoration. */

  --basalt-0:#000000;  /* page */
  --basalt-1:#0a0b0c;  /* raised */
  --basalt-2:#121316;  /* panel */
  --basalt-3:#1a1c1f;  /* hover */
  --basalt-4:#24272b;  /* pressed, dividers on solid */

  --veil-1:rgba(214,235,253,.05);  /* fill, resting */
  --veil-2:rgba(214,235,253,.09);  /* fill, hover */
  --veil-3:rgba(214,235,253,.14);  /* hairline */
  --veil-4:rgba(214,235,253,.19);  /* border */
  --veil-5:rgba(214,235,253,.32);  /* border, hover */

  --steam-0:#ffffff;   /* max contrast, primary buttons */
  --steam-1:#f0f0f0;   /* body ink */
  --steam-2:#a0a0a0;   /* secondary */
  --steam-3:#6c6c6c;   /* muted, captions */
  --steam-4:#464a4d;   /* disabled, fine print */

  --spring:#a5f3fc;    /* mineral water */
  --iris:#c4b5fd;      /* the violet in steam at dusk */
  --sulfur:#fcd9a8;    /* the yellow in the rock */
  --mist:linear-gradient(115deg,var(--spring),var(--iris) 55%,var(--sulfur));

  --ok:#6ee7a8;
  --warn:#f5a524;
  --danger:#ff6b6b;
  --info:#7cc4ff;

  /* ── semantic aliases (what components actually reference) ───────────── */
  --bg:var(--basalt-0); --bg-2:var(--basalt-0);
  --surface:rgba(20,21,23,.60); --surface-2:rgba(24,26,29,.85); --surface-3:rgba(32,35,38,.9);
  --border:var(--veil-3); --border-2:var(--veil-4);
  --ink:var(--steam-1); --ink-2:var(--steam-2); --muted:var(--steam-3); --dim:var(--steam-4);
  --accent:var(--steam-0); --accent-deep:var(--steam-1); --accent-bg:rgba(214,235,253,.08);
  --on-accent:var(--basalt-0);
  --mist-1:var(--spring); --mist-2:var(--iris); --mist-3:var(--sulfur);
  --err:var(--danger);

  --glow:0 0 4px rgba(255,255,255,.06), 0 1px 14px rgba(255,255,255,.12), 0 3px 32px rgba(255,255,255,.18);

  --g-xs:8px; --g-sm:12px; --g-md:18px; --g-lg:28px; --g-xl:44px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sidenav-w:252px;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow:hidden;
  /* one low, wide light source behind the fold — no grain, no colour wash */
  background-image:
    radial-gradient(1200px 620px at 50% -20%, rgba(214,235,253,.055), transparent 62%),
    radial-gradient(900px 500px at 92% 8%, rgba(196,181,253,.035), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono)}
.hidden{display:none!important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px}
::selection{background:rgba(214,235,253,.22);color:#fff}

.serif{font-family:var(--serif)}
.label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.hint{color:var(--muted);font-size:12px}
.gradient-text{background:linear-gradient(115deg,var(--mist-1),var(--mist-2) 55%,var(--mist-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* page-load reveal */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}

/* ── shell ── */
.app{display:grid;grid-template-columns:var(--sidenav-w) 1fr;height:100vh}

/* ── sidebar ── */
.sidenav{background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--g-md) var(--g-sm) var(--g-sm);gap:3px}
.brand{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.03em;padding:6px 12px var(--g-lg);display:flex;align-items:center;gap:0;color:var(--ink)}
/* the symbol stands in for the U, so it is sized to the cap height of the
   letters beside it and carries a hair of optical spacing after it */
/* sized to Inter's cap height so it sits in the word like a real capital */
.brand-mark{height:.72em;width:auto;flex:none;margin-right:.055em}
.brand .dot{color:var(--accent)}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-weight:500;font-size:14.5px;transition:background .15s,color .15s}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.85}
.nav-item:hover{background:var(--surface);color:var(--ink)}
.nav-item.active{background:var(--surface-2);color:var(--ink)}
.nav-item.active svg{color:var(--accent);opacity:1}
.spacer{flex:1}
.chats-head{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 6px}
.newchat{background:var(--accent-bg);border:1px solid var(--border-2);color:var(--accent);border-radius:var(--r-sm);
  padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
.newchat:hover{background:var(--accent);color:var(--on-accent)}
.chat-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;min-height:40px;margin-bottom:8px}
.chat-row{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--r-sm);color:var(--ink-2);
  cursor:pointer;font-size:13px}
.chat-row:hover{background:var(--surface);color:var(--ink)}
.chat-row.active{background:var(--surface-2);color:var(--ink)}
.chat-row .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row .x{opacity:0;color:var(--muted);font-size:12px}
.chat-row:hover .x{opacity:1} .chat-row .x:hover{color:var(--err)}
.acct{padding:12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.acct-top{display:flex;align-items:center;gap:10px}
.acct-av{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--accent),var(--accent-deep));flex:none}
.acct-who{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-cr{font-size:11px;color:var(--accent);letter-spacing:.02em}
.acct-links{margin-top:9px;font-size:12px;display:flex;gap:10px}
.acct-links a{color:var(--ink-2)}.acct-links a:hover{color:var(--ink)}

/* ── main ── */
.main{overflow-y:auto;height:100vh;position:relative}
.topbar{display:flex;align-items:center;gap:var(--g-md);padding:18px var(--g-lg);position:sticky;top:0;background:linear-gradient(var(--bg),rgba(16,15,13,.82));backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid var(--border)}
.topbar h1{font-family:var(--serif);font-size:19px;font-weight:500}
.topbar .sub{color:var(--muted);font-size:12px;margin-left:2px}
.mode-toolbar{margin-left:auto;display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px}
.mode-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);color:var(--ink-2);cursor:pointer;font-size:13px;font-weight:500}
.mode-btn svg{width:16px;height:16px}
.mode-btn:hover{color:var(--ink)}
.mode-btn.active{background:var(--accent);color:var(--on-accent)}

.view{display:none}.view.active{display:block}
.canvas{max-width:880px;margin:0 auto;padding:var(--g-xl) var(--g-lg) 80px;display:flex;flex-direction:column;gap:var(--g-lg);min-height:calc(100vh - 64px)}
.hero{text-align:center;margin-top:6vh}
.hero h2{font-family:var(--serif);font-size:clamp(32px,5vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.hero h2 em{font-style:italic;color:var(--accent)}
.hero p{color:var(--ink-2);margin-top:12px;font-size:15px}

/* ── composer ── */
.composer{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:16px 18px;
  transition:border-color .2s;position:relative;z-index:20}
.composer:focus-within{border-color:var(--accent)}
.results{position:relative;z-index:1}
.composer textarea{width:100%;background:transparent;border:none;resize:none;font-size:16px;line-height:1.55;min-height:52px;max-height:260px;font-family:var(--sans)}
.composer textarea::placeholder{color:var(--muted)}
.composer textarea:focus{outline:none}
.cbar{display:flex;align-items:center;gap:8px;margin-top:12px}
.cbar .grow{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--border-2);color:var(--ink)}
.chip svg{width:15px;height:15px}
.chip select{background:transparent;border:none;color:var(--ink);cursor:pointer;max-width:220px;
  appearance:none;padding-right:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a89f90' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
/* every dropdown options panel uses the dark surface (consistency) */
select option{background:var(--surface-2);color:var(--ink)}
.grid audio,.lib-item>audio{width:100%;display:block}
.lib-item.audio{padding:14px;display:flex;align-items:center;background:var(--surface)}
.chip.cost{color:var(--accent);border-color:var(--accent-bg);background:var(--accent-bg)}
.run{height:42px;padding:0 22px;border:none;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-family:var(--serif);font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.run:hover{background:var(--accent-deep)}
.run:disabled{opacity:.5;cursor:wait}
.run svg{width:16px;height:16px}

.suggest{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}

/* ── settings popover ── */
.pop-wrap{position:relative}
.popover{position:absolute;top:calc(100% + 10px);bottom:auto;left:0;width:330px;max-height:70vh;overflow-y:auto;
  background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:var(--g-md);box-shadow:0 20px 70px -20px rgba(0,0,0,.8);z-index:30;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column}
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg-btn{padding:7px 12px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--ink-2);transition:.12s}
.seg-btn:hover{color:var(--ink);border-color:var(--border-2)}
.seg-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.seg-aspect .seg-btn{display:flex;flex-direction:column;align-items:center;gap:6px}
.ar-box{border:1.5px solid currentColor;border-radius:2px;opacity:.85}
.ar-16-9,.ar-3-2,.ar-21-9{width:26px;height:15px}.ar-9-16,.ar-2-3,.ar-3-4{width:15px;height:26px}
.ar-1-1{width:20px;height:20px}.ar-4-3{width:24px;height:18px}
textarea.mini,input.mini{width:100%;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;font-size:13px}
textarea.mini{resize:vertical;min-height:52px}
/* on-brand file inputs (replace native 'Choose File') */
input[type=file]{font-size:12.5px;color:var(--ink-2);padding:7px 9px}
input[type=file]::file-selector-button{background:var(--surface-3);border:1px solid var(--border-2);color:var(--ink);
  border-radius:var(--r-sm);padding:6px 12px;margin-right:11px;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:500}
input[type=file]::file-selector-button:hover{border-color:var(--ink-2)}
.toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer}
.toggle input{accent-color:var(--accent)}

/* ── results ── */
.results-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--g-sm)}
.results-head h3{font-family:var(--serif);font-size:17px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--g-sm)}
.grid img{width:100%;border-radius:var(--r-md);border:1px solid var(--border);display:block;background:#000;transition:transform .2s}
.grid img:hover{transform:scale(1.012)}
.grid>.mp-video{aspect-ratio:1;border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden}
.grid>.mp-audio{grid-column:1/-1;max-width:520px}
.empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:46px 16px;font-size:13px;border:1px dashed var(--border);border-radius:var(--r-md)}
.status{font-size:13px;color:var(--ink-2);min-height:18px;text-align:center}
.status.err{color:var(--err)}

/* ── chat ── (stream scrolls internally; dock always below — no overlap) */
#view-chat.active{display:flex;flex-direction:column;height:100vh}
.chat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:760px;margin:0 auto;padding:var(--g-lg) var(--g-lg) 0}
.chat-stream{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:18px}
.msg{padding:12px 16px;border-radius:14px;white-space:pre-wrap;max-width:80%;font-size:15px;line-height:1.6}
.msg.user{background:rgba(214,235,253,.07);border:1px solid var(--border-2);align-self:flex-end}
.msg.bot{background:var(--surface);border:1px solid var(--border);align-self:flex-start;white-space:normal;position:relative}
.chat-dock{padding:12px 0 18px;background:transparent;flex:none}
/* rendered markdown in bot bubbles */
.md{white-space:normal}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:0 0 10px}
.md h1,.md h2,.md h3,.md h4{font-family:var(--serif,Georgia,serif);font-weight:600;line-height:1.3;margin:14px 0 8px}
.md h1{font-size:1.45em}.md h2{font-size:1.28em}.md h3{font-size:1.14em}.md h4{font-size:1em}
.md ul,.md ol{margin:6px 0 10px;padding-left:22px}.md li{margin:3px 0}
.md a{color:var(--accent);text-decoration:underline}
.md blockquote{margin:8px 0;padding:4px 14px;border-left:3px solid var(--accent);color:var(--ink-2)}
.md code{background:var(--bg-2);border:1px solid var(--border);border-radius:5px;padding:.1em .4em;font-family:var(--mono,ui-monospace,monospace);font-size:.88em}
.codeblock{margin:10px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.cb-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.cb-lang{font-family:var(--mono,monospace);font-size:11px;color:var(--muted);text-transform:lowercase}
.copy-code{background:none;border:none;color:var(--ink-2);font-size:12px;cursor:pointer;font-weight:600}
.copy-code:hover{color:var(--accent)}
.codeblock pre{margin:0;padding:12px 14px;overflow-x:auto}
.codeblock code{background:none;border:none;padding:0;font-size:13px;line-height:1.55;color:var(--ink)}
/* per-message hover actions */
.msg-actions{display:flex;gap:2px;margin-top:8px;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions,.msg-actions:focus-within{opacity:1}
.msg.user .msg-actions{justify-content:flex-end}
.ma{background:none;border:1px solid transparent;border-radius:7px;color:var(--ink-2);cursor:pointer;
  width:28px;height:26px;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ma:hover{background:var(--surface-2);color:var(--accent);border-color:var(--border)}
.run.stop{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2)}
.run.stop:hover{background:var(--surface-3);color:var(--accent)}
.run.stop svg{width:15px;height:15px}
/* starter example prompts */
.starter{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.starter:empty{display:none}
.starter-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:12.5px;padding:6px 12px;cursor:pointer;transition:.15s;font-family:var(--sans)}
.starter-chip:hover{border-color:var(--accent);color:var(--ink)}
/* enhance button busy state */
#enhanceBtn.busy{opacity:.6;pointer-events:none}
#enhanceBtn.busy span::after{content:'…'}
/* persona select styled as a chip */
.chip-select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:13px;padding:7px 11px;cursor:pointer;font-family:var(--sans);max-width:180px}
.chip-select:hover{border-color:var(--accent)}
/* "use as input" indicator in studio uploads */
.used-input{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--accent);
  background:var(--accent-bg);border-radius:var(--r-md);font-size:13px;color:var(--ink)}
.used-input img{width:42px;height:42px;object-fit:cover;border-radius:8px}
/* saved / favorite prompts */
.saved-prompts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
.saved-prompts:empty{display:none}
.saved-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-right:2px}
.saved-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-bg);border:1px solid var(--border-2);
  border-radius:var(--r-pill);font-size:12.5px;padding:5px 6px 5px 12px;color:var(--ink)}
.saved-chip .sp-t{cursor:pointer}.saved-chip:hover{border-color:var(--accent)}
.saved-chip .sp-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px;line-height:1}
.saved-chip .sp-x:hover{color:var(--accent)}
/* library NSFW blur (privacy when screen is visible to others) */
#libGrid.blurred img,#libGrid.blurred video{filter:blur(18px);transition:filter .18s}
#libGrid.blurred .lib-card:hover img,#libGrid.blurred .lib-card:hover video{filter:none}
#libBlur.on{color:var(--accent);border-color:var(--accent)}

/* studio composer uploads (visible, not buried in settings) */
.uploads{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.uploads:empty{display:none}

/* ══════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY (shared across all pages)
   ══════════════════════════════════════════════════════════════════ */
/* buttons — Resend's move: no fill, a 2px translucent edge, and light
   spilling out from under the element instead of a drop shadow. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-lg);border:1px solid var(--border-2);background:transparent;color:var(--ink-2);
  font-size:14px;font-weight:600;cursor:pointer;transition:color .16s,border-color .16s,background .16s,box-shadow .16s;
  white-space:nowrap}
.btn:hover{color:var(--ink);border-color:rgba(214,235,253,.32);background:rgba(214,235,253,.04)}
.btn:focus-visible{outline:2px solid var(--mist-1);outline-offset:2px}
.btn-primary{background:#fff;color:#000;border-color:transparent;box-shadow:var(--glow)}
.btn-primary:hover{background:#f0f0f0;color:#000;border-color:transparent}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{border-color:transparent;background:rgba(214,235,253,.06)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--r-md)}
.btn-lg{height:48px;padding:0 20px;font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* inputs */
.input,.select,.textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;font-size:14px;color:var(--ink);transition:border-color .15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent)}
.textarea{resize:vertical;min-height:80px;line-height:1.55;font-family:var(--sans)}
.select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89f90' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.field-row{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}

/* switch toggle */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:22px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--border-2);transition:.18s;flex:none;position:relative}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-2);transition:.18s}
.switch input:checked+.track{background:var(--accent-bg);border-color:var(--accent)}
.switch input:checked+.track::after{transform:translateX(16px);background:var(--accent)}

/* badge */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border)}
.badge-accent{background:var(--accent-bg);color:var(--accent);border-color:var(--border-2)}
.badge-ok{background:rgba(124,200,140,.12);color:#7cc88c;border-color:rgba(124,200,140,.3)}
.badge-warn{background:rgba(232,180,90,.12);color:#e8b45a;border-color:rgba(232,180,90,.3)}

/* card (generic) */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--g-lg)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--g-md)}
.panel-head h3{font-family:var(--serif);font-size:18px;font-weight:500}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(5,4,3,.66);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:20px;animation:fade .15s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);max-width:460px;width:100%;
  padding:var(--g-lg);box-shadow:0 30px 90px -20px rgba(0,0,0,.8);animation:rise .25s both}
.modal h3{font-family:var(--serif);font-size:21px;font-weight:500;margin-bottom:8px}
.modal p{color:var(--ink-2);margin-bottom:var(--g-lg)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* toast */
.toast-host{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-md);padding:11px 18px;font-size:13.5px;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.7);display:flex;align-items:center;gap:10px;animation:rise .25s both;max-width:90vw}
.toast.ok{border-color:rgba(124,200,140,.4)} .toast.ok::before{content:"✓";color:#7cc88c}
.toast.err{border-color:rgba(224,138,124,.4)} .toast.err::before{content:"!";color:var(--err);font-weight:700}
.toast.info::before{content:"›";color:var(--accent)}

/* tooltip */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--bg-2);color:var(--ink);border:1px solid var(--border-2);padding:5px 9px;border-radius:var(--r-sm);font-size:11.5px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:60}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%)}

/* dropdown menu */
.menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-md);
  padding:6px;min-width:180px;box-shadow:0 16px 50px -16px rgba(0,0,0,.7);z-index:40}
.menu-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-size:13.5px}
.menu-item:hover{background:var(--surface-3);color:var(--ink)}
.menu-sep{height:1px;background:var(--border);margin:5px 4px}

/* ── landing ────────────────────────────────────────────────────────────
   Layout after invideo.io: centred serif hero, product frame, alternating
   feature rows, asymmetric bento, statement band, proof, pricing. */

.announce{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:9px 20px;font-size:13px;background:var(--basalt-2);border-bottom:1px solid var(--border);
  color:var(--ink-2)}
.announce .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--basalt-0);background:var(--mist);border-radius:var(--r-pill);padding:3px 9px}
.announce b{color:var(--ink);font-weight:500}
.announce a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* nav menus — invideo's nav is a centred row of dropdown triggers with the
   account actions pinned right. Measured: 13.5px links, 8px/12px padding,
   6px radius. */
.nav-menu{display:none;align-items:center;gap:2px}
@media(min-width:1000px){.nav-menu{display:flex}}
.nav-item-lp{position:relative}
.nav-trig{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:var(--r-sm);
  border:0;background:none;color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:.15s;
  font-family:inherit}
.nav-trig:hover{color:var(--ink);background:var(--veil-1)}
.nav-trig svg{width:12px;height:12px;opacity:.6;transition:transform .18s}
.nav-item-lp.open .nav-trig{color:var(--ink);background:var(--veil-1)}
.nav-item-lp.open .nav-trig svg{transform:rotate(180deg)}
.nav-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:250px;padding:8px;border:1px solid var(--border-2);border-radius:12px;
  background:rgba(10,11,12,.97);backdrop-filter:blur(16px);
  box-shadow:0 24px 70px -22px rgba(0,0,0,.9);display:none;z-index:120}
.nav-item-lp.open .nav-pop{display:block}
.nav-pop a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:13.5px;
  transition:.14s}
.nav-pop a:hover{background:var(--veil-2);color:var(--ink)}
.nav-pop a b{display:block;color:var(--ink);font-weight:500;font-size:13.5px;margin-bottom:2px}
.nav-pop a span{display:block;color:var(--muted);font-size:12px;line-height:1.45}

/* hero */
/* Hero grid: two 1px gradient layers on a 22px cell, masked so it dissolves
   before it reaches the content below. Drawn in veil white, not pure white, so
   it belongs to the same cool-black as every other hairline. */
.lp-hero{position:relative;max-width:1200px;margin:0 auto;padding:15vh 24px 0;text-align:center}
.hero-grid{position:absolute;inset:0 0 -620px 0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(214,235,253,.035) 1px, transparent 1px),
    linear-gradient(rgba(214,235,253,.035) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:0 -4px, 0 -4px;
  -webkit-mask-image:linear-gradient(#000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(#000 0%, #000 62%, transparent 100%)}
/* a brighter copy, lit through a soft radial window, so the grid is not flat */
.hero-grid::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(214,235,253,.11) 1px, transparent 1px),
    linear-gradient(rgba(214,235,253,.11) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:0 -4px, 0 -4px;
  -webkit-mask-image:radial-gradient(700px 360px at 50% 26%, #000 0%, transparent 72%);
  mask-image:radial-gradient(700px 360px at 50% 26%, #000 0%, transparent 72%)}
.lp-hero h1{font-family:var(--serif);font-size:clamp(40px,6.3vw,80px);font-weight:400;line-height:1.02;
  letter-spacing:-.025em;max-width:15ch;margin:0 auto;
  background:linear-gradient(168deg,#fff 38%,rgba(255,255,255,.5));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-hero h1 em{font-style:italic}
.lp-hero p{color:var(--ink-2);font-size:clamp(15px,1.35vw,17.5px);line-height:1.6;
  max-width:52ch;margin:26px auto 34px}
.lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the chips sit where invideo puts collaborator cursors. Same device, but they
   carry model names, because this product has no multiplayer to point at. */
.hero-chips{position:absolute;inset:0;pointer-events:none;display:none}
@media(min-width:1080px){.hero-chips{display:block}}
.hero-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2);
  background:var(--basalt-2);border:1px solid var(--border-2);border-radius:var(--r-pill);
  padding:6px 12px;white-space:nowrap;animation:chipIn .7s cubic-bezier(.2,.7,.2,1) both}
.hero-chip i{width:5px;height:5px;border-radius:50%;background:var(--mist-1);flex:none}
.hero-chip:nth-child(2) i{background:var(--mist-2)}
.hero-chip:nth-child(3) i{background:var(--mist-3)}
.hero-chip:nth-child(4) i{background:var(--mist-1)}
@keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-chip{animation:none}}
.hc-1{top:16%;left:4%;animation-delay:.35s}
.hc-2{top:30%;right:3%;animation-delay:.5s}
.hc-3{bottom:24%;left:9%;animation-delay:.65s}
.hc-4{bottom:16%;right:8%;animation-delay:.8s}

/* product frame under the hero */
.lp-frame{position:relative;max-width:1240px;margin:66px auto 0;padding:0 24px}
.frame{border:1px solid var(--border-2);border-radius:18px;overflow:hidden;background:var(--basalt-1);
  box-shadow:0 40px 120px -50px rgba(214,235,253,.22)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--basalt-2)}
.frame-tab{font-size:12.5px;color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);white-space:nowrap}
.frame-tab.on{color:var(--ink);background:var(--veil-2)}
.frame-body{aspect-ratio:16/9;display:grid;place-items:center;
  background:radial-gradient(700px 320px at 50% 0%, rgba(214,235,253,.05), transparent 70%)}
.frame-ph{text-align:center;color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.frame-ph svg{width:34px;height:34px;margin:0 auto 12px;display:block;opacity:.5}

/* Studio mock. Built from our own components rather than a screenshot, so it
   stays truthful when the product changes and costs nothing to load. */
/* the frame body centres a placeholder; the mock must instead fill it */
.frame-body.has-mock{display:block;aspect-ratio:auto;place-items:stretch;min-height:0}
.mock-studio{display:grid;grid-template-columns:270px minmax(0,1fr);width:100%;
  height:100%;min-height:430px;text-align:left}
@media(max-width:820px){.mock-studio{grid-template-columns:1fr}
  .mock-side{display:none}}
.mock-side{border-right:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:14px}
.mock-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.mock-model{display:flex;align-items:center;gap:8px;border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:9px 11px;font-size:12.5px;color:var(--ink)}
.mock-model .dot-ok{width:6px;height:6px;border-radius:50%;background:var(--mist-1);flex:none}
.mock-badge{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mist-1);border:1px solid rgba(165,243,252,.3);
  border-radius:var(--r-pill);padding:2px 6px}
.mock-msg{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-1);
  padding:11px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.mock-msg.me{background:var(--veil-2);color:var(--ink);border-color:var(--border-2)}
.mock-main{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;min-height:0}
@media(max-width:560px){.mock-grid{grid-template-columns:repeat(2,1fr)}}
.mock-tile{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-1);
  position:relative;overflow:hidden;min-height:92px;
  background-image:radial-gradient(120% 90% at 30% 10%, rgba(214,235,253,.07), transparent 70%)}
.mock-tile:nth-child(2){background-image:radial-gradient(120% 90% at 70% 20%, rgba(196,181,253,.10), transparent 70%)}
.mock-tile:nth-child(3){background-image:radial-gradient(120% 90% at 40% 80%, rgba(252,217,168,.08), transparent 70%)}
.mock-tile:nth-child(5){background-image:radial-gradient(120% 90% at 60% 40%, rgba(165,243,252,.09), transparent 70%)}
.mock-tile span{position:absolute;left:9px;bottom:8px;font-family:var(--mono);font-size:9.5px;
  color:var(--muted)}
.mock-bar{display:flex;align-items:center;gap:9px;border:1px solid var(--border-2);
  border-radius:var(--r-md);background:var(--basalt-1);padding:10px 12px}
.mock-bar .ph{flex:1;font-size:12.5px;color:var(--muted)}
.mock-run{font-size:11.5px;font-weight:600;color:var(--basalt-0);background:var(--steam-0);
  border-radius:var(--r-sm);padding:5px 11px}

/* sections */
.lp-sect{max-width:1200px;margin:0 auto;padding:110px 24px}
.lp-sect.tight{padding-top:70px}
.lp-sect h2{font-family:var(--serif);font-size:clamp(30px,4vw,52px);font-weight:400;
  letter-spacing:-.02em;line-height:1.04;max-width:18ch}
.lp-sect.center{text-align:center}
.lp-sect.center h2{margin-inline:auto}
.lp-sect .lead{color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:56ch;margin-top:18px}
.lp-sect.center .lead{margin-inline:auto}

/* alternating feature rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.row2.flip .row2-text{order:2}
@media(max-width:880px){.row2{grid-template-columns:1fr;gap:32px}.row2.flip .row2-text{order:0}}
.row2 h2{font-size:clamp(28px,3.4vw,46px)}
.row2 p{color:var(--ink-2);font-size:15.5px;line-height:1.65;margin-top:16px;max-width:46ch}
.textlink{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;
  font-weight:500;color:var(--ink);border-bottom:1px solid var(--border-2);padding-bottom:3px;
  transition:border-color .16s}
.textlink:hover{border-color:var(--ink)}
.visual{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--basalt-2);
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.visual .frame-ph{padding:20px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.bento .cell{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--basalt-2);
  padding:28px;display:flex;flex-direction:column;gap:9px;min-height:190px}
.bento .cell.wide{grid-column:span 6;min-height:230px}
.bento .cell.half{grid-column:span 3}
.bento .cell.third{grid-column:span 2}
@media(max-width:880px){.bento{grid-template-columns:repeat(2,1fr)}
  .bento .cell.wide{grid-column:span 2}.bento .cell.half,.bento .cell.third{grid-column:span 1}}
@media(max-width:520px){.bento{grid-template-columns:1fr}
  .bento .cell.wide,.bento .cell.half,.bento .cell.third{grid-column:span 1}}
.bento h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.bento .cell.wide h3{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em}
.bento p{color:var(--ink-2);font-size:13.5px;line-height:1.6}
.bento .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.bento .grow{flex:1}

/* statement band */
.band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:radial-gradient(900px 340px at 50% 120%, rgba(196,181,253,.07), transparent 70%)}
.band .lp-sect{padding-block:120px}
.band h2{font-family:var(--serif);font-size:clamp(32px,4.6vw,60px);max-width:20ch}

/* proof numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-top:1px solid var(--border-2);padding-top:20px;text-align:left}
.stat b{display:block;font-family:var(--serif);font-size:42px;font-weight:400;letter-spacing:-.02em;
  line-height:1}
.stat span{display:block;color:var(--ink-2);font-size:13.5px;margin-top:8px}

/* segmented toggle */
.seg-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);
  border:1px solid var(--border-2);background:var(--basalt-2);margin:26px auto 0}
.seg-toggle button{border:0;background:none;color:var(--ink-2);font-size:13.5px;font-weight:500;
  padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;transition:.16s}
.seg-toggle button.on{background:var(--veil-2);color:var(--ink)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;text-align:left}
@media(max-width:980px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--basalt-2);padding:28px 24px;display:flex;flex-direction:column}
.price-card.pop{border-color:var(--veil-5)}
.price-pop{position:absolute;top:-9px;right:20px;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--basalt-0);background:var(--steam-0);
  border-radius:var(--r-pill);padding:3px 9px}
.price-name{font-size:17px;font-weight:600;letter-spacing:-.015em}
.price-for{color:var(--muted);font-size:13px;margin-top:2px}
.price-amt{font-size:40px;font-weight:500;letter-spacing:-.035em;margin:18px 0 0;
  font-variant-numeric:tabular-nums}
.price-amt span{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.price-note{color:var(--muted);font-size:12px;margin-top:4px}
.price-box{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-1);
  padding:14px;margin:18px 0;font-size:13px;color:var(--ink-2);min-height:74px}
.price-box b{color:var(--ink);font-weight:500}
.price-perks{list-style:none;display:grid;gap:9px;margin:18px 0 0}
.price-perks li{position:relative;padding-left:20px;color:var(--ink-2);font-size:13px;line-height:1.5}
.price-perks li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--veil-5)}
.price-card .btn{margin-top:22px}

/* credits explainer + comparison table (Venice's pricing page shape) */
.credit-note{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
@media(max-width:760px){.credit-note{grid-template-columns:1fr}}
.credit-note div{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-2);padding:18px 20px}
.credit-note b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:400}
.credit-note span{color:var(--ink-2);font-size:13.5px;line-height:1.55}

.cmp-wrap{overflow-x:auto;margin-top:56px;border:1px solid var(--border);border-radius:var(--r-lg)}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left;min-width:640px}
.cmp th,.cmp td{padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:middle}
.cmp thead th{font-size:14px;font-weight:600;color:var(--ink);background:var(--basalt-2);
  position:sticky;top:0}
.cmp thead th:first-child{font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cmp tbody th{font-weight:400;color:var(--ink-2)}
.cmp td{color:var(--ink);font-variant-numeric:tabular-nums}
.cmp tr.group th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--basalt-1);padding-top:16px;padding-bottom:10px}
.cmp .yes{color:var(--mist-1)}
.cmp .no{color:var(--dim)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}

/* footer */
.lp-footer{border-top:1px solid var(--border);padding:52px 24px 72px}
.lp-footer-in{max-width:1200px;margin:0 auto;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.lp-disclaimer{color:var(--dim);font-size:12px;line-height:1.65;max-width:70ch;margin-top:26px}
.lp-disclaimer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* email verification banner */
.verify-bar{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:9px 16px;font-size:13px;color:var(--ink);
  background:rgba(214,235,253,.05);border-bottom:1px solid var(--border-2)}
.verify-bar svg{width:16px;height:16px;color:var(--mist-1);flex:none}
.verify-bar form{display:inline;margin:0}
.verify-resend{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;padding:0;font-size:13px}
.verify-resend:hover{color:var(--accent-deep)}
.lang-btn{background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 12px;
  cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);line-height:1;display:inline-flex;align-items:center;gap:6px;transition:.16s}
.lang-btn:hover{border-color:var(--border-2);color:var(--ink);background:rgba(214,235,253,.04)}
/* CJK: the display serif has no kana or hanzi, so those scripts fall back to a
   system face that sets much wider. Ease the size and let the browser break
   lines the way Japanese actually breaks them. */
:lang(ja) .lp-hero h1,:lang(zh) .lp-hero h1{
  font-size:clamp(34px,5.4vw,64px);line-height:1.24;letter-spacing:0;
  line-break:strict;word-break:normal;overflow-wrap:normal}
:lang(ja) .lp-principle,:lang(zh) .lp-principle{font-size:clamp(22px,2.7vw,32px);line-height:1.5}
:lang(ja) .lp-sect h2,:lang(zh) .lp-sect h2{letter-spacing:0;line-height:1.32}
:lang(ja) .label,:lang(ja) .price-name,:lang(ja) .feat h3{letter-spacing:.02em}

/* language picker menu — portalled to <body>, so nothing can clip it */
.lang-menu{position:fixed;z-index:200;min-width:190px;padding:6px;
  background:rgba(10,11,12,.96);backdrop-filter:blur(14px);
  border:1px solid var(--border-2);border-radius:var(--r-md);
  box-shadow:0 20px 60px -18px rgba(0,0,0,.9)}
.lang-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:.14s}
.lang-item:hover{background:rgba(214,235,253,.07);color:var(--ink)}
.lang-item.on{color:var(--ink);background:rgba(214,235,253,.05)}
.lang-item.on::after{content:"";float:right;width:5px;height:5px;border-radius:50%;
  background:var(--mist-1);margin-top:7px}

.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.admin-nav a{padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--ink-2);font-size:13px;font-weight:500}
.admin-nav a:hover{border-color:var(--border-2);color:var(--ink)}
.admin-nav a.on{background:#fff;border-color:#fff;color:#000}
.check-row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);margin:4px 0 14px;cursor:pointer}
.check-row input{width:16px;height:16px;accent-color:var(--accent)}
.legal{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.legal h1{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:-.02em;margin-bottom:6px}
.legal h2{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:30px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:14px;margin-bottom:8px}
.legal ul{padding-left:20px}

/* custom dropdown (csel) */
.csel{position:relative;display:inline-block}
.csel-trigger{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:8px 13px;color:var(--ink);cursor:pointer;font-size:13px;max-width:260px;font-family:var(--sans)}
.csel-trigger:hover{border-color:var(--border-2)}
.csel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-trigger svg{width:12px;height:12px;color:var(--ink-2);flex:none}
.csel-menu{position:fixed;min-width:250px;max-width:340px;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:0 18px 54px -16px rgba(0,0,0,.75);z-index:120;
  padding:6px;max-height:min(360px,60vh);display:flex;flex-direction:column}
.csel-search{margin:4px 4px 6px;padding:8px 11px;background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--ink);font-size:13px;outline:none}
.csel-search:focus{border-color:var(--accent)}
.csel-list{overflow-y:auto}
.csel-opt{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--ink-2)}
.csel-opt>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-opt:hover{background:var(--surface-3);color:var(--ink)}
.csel-opt.active{color:var(--accent)}
.csel-badge{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 7px;border-radius:var(--r-pill);flex:none;border:1px solid transparent}
.csel-badge.unc{background:rgba(122,162,255,.12);color:#8ab0ff;border-color:rgba(122,162,255,.32)}
.csel-badge.e2ee{background:var(--accent-bg);color:var(--accent);border-color:var(--border-2)}
.csel-badge.priv{background:rgba(168,140,255,.12);color:#b69cff;border-color:rgba(168,140,255,.3)}
.csel-badge.anon{background:rgba(124,200,140,.12);color:#7cc88c;border-color:rgba(124,200,140,.3)}
.csel-badge.filtered{background:rgba(214,138,90,.14);color:#d6a06a;border-color:rgba(214,138,90,.34)}

/* admin stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px}
.stat .v{font-family:var(--serif);font-size:26px;font-weight:500}
.stat .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media(max-width:760px){.admin-cols{grid-template-columns:1fr}}
.inline-form{display:flex;gap:6px;align-items:center}
.inline-form input{width:74px;padding:5px 8px;font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--ink)}

/* billing */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 28px}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.popular{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plan-pop{position:absolute;top:-10px;left:22px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:3px 9px;border-radius:var(--r-pill)}
.plan h3{font-family:var(--serif);font-size:22px;font-weight:500}
.plan .tag{font-size:12px;color:var(--muted)}
.plan .price{font-family:var(--serif);font-size:30px;font-weight:500}
.plan .price small{font-size:13px;color:var(--ink-2);font-family:var(--sans)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2);flex:1}
.plan li{display:flex;gap:8px} .plan li::before{content:"›";color:var(--accent)}
.plan.current{opacity:.7}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:28px}
.pack{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;text-align:center}
.pack .c{font-family:var(--serif);font-size:24px} .pack .p{color:var(--ink-2);font-size:13px;margin:4px 0 12px}
.htable{width:100%;border-collapse:collapse;font-size:13px}
.htable th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--border)}
.htable td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--ink-2)}
.htable .amt{color:var(--accent);font-family:ui-monospace,monospace}
.htable .amt.plus{color:#7cc88c}

/* standalone pages (auth, profile, billing, legal) */
.page{min-height:100vh;overflow-y:auto;display:block}
.page-nav .brand{padding:0;font-size:18px}
.page-nav{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}
.page-nav .brand{font-size:21px;padding:0}
.page-nav .grow{flex:1}
.page-wrap{max-width:560px;margin:0 auto;padding:48px 24px 80px}
.page-wrap.wide{max-width:1040px}
.page-wrap.bare{max-width:none;padding:0}
.page-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px}
.page-title{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.page-sub{color:var(--ink-2);margin-bottom:28px}
.field-row label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.alert{padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:14px;border:1px solid}
.alert-error{background:var(--err-bg);border-color:rgba(224,138,124,.4);color:var(--err)}
.alert-success,.alert-message{background:rgba(110,231,168,.08);border-color:rgba(110,231,168,.3);color:var(--ok)}
.kv{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);font-size:14px}
.kv:last-child{border-bottom:none} .kv .k{color:var(--ink-2)}
.auth-alt{text-align:center;margin-top:18px;font-size:13.5px;color:var(--ink-2)}

/* ── library (redesigned gallery) ── */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lib-card{position:relative;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface);aspect-ratio:1}
.lib-card img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .25s}
.lib-card:hover img{transform:scale(1.04)}
.lib-card video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
/* music card */
.lib-card.music{aspect-ratio:auto;display:flex;flex-direction:column;gap:12px;padding:16px;justify-content:center}
.lib-card.music .mico{width:42px;height:42px;border-radius:11px;background:var(--accent-bg);display:grid;place-items:center}
.lib-card.music .mico svg{width:22px;height:22px;color:var(--accent)}
.lib-card.music audio{width:100%}
.lib-card.music .m-model{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* hover overlay */
.lib-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:9px;
  opacity:0;transition:opacity .18s;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 30%,transparent 65%,rgba(0,0,0,.62))}
.lib-card:hover .lib-ov{opacity:1}
.lib-card.music .lib-ov{position:static;opacity:1;flex-direction:row;align-items:center;justify-content:space-between;padding:0;background:none;pointer-events:auto}
.lib-ov-top{display:flex;align-items:flex-start;justify-content:space-between;pointer-events:auto}
.lib-ov-bot{font-size:11px;color:#e8e2d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}
.lib-acts{display:flex;gap:6px;pointer-events:auto}
.lib-acts a,.lib-acts button{width:28px;height:28px;border-radius:7px;background:rgba(0,0,0,.55);border:1px solid var(--border-2);
  color:#fff;display:grid;place-items:center;cursor:pointer;font-size:13px;text-decoration:none}
.lib-acts a:hover{border-color:var(--accent);color:var(--accent)}
.lib-acts .del:hover{border-color:var(--err);color:var(--err)}
/* ── custom media players ── */
.mp-play,.mp-fs{cursor:pointer;border:none;display:grid;place-items:center}
.mp-play svg{width:14px;height:14px} .mp-fs svg{width:16px;height:16px}
.mp-seek{flex:1;height:5px;background:var(--surface-3);border-radius:3px;cursor:pointer;position:relative;min-width:40px}
.mp-fill{height:100%;background:var(--accent);border-radius:3px;width:0}
.mp-time{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:36px;text-align:right;flex:none}
/* audio */
.mp-audio{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 12px;width:100%}
.mp-audio .mp-play{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);flex:none}
/* video */
.mp-video{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
.mp-video video{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}
.mp-big{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(2px)}
.mp-big svg{width:22px;height:22px}
.mp-video.playing .mp-big{display:none}
.mp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:9px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .15s}
.mp-video:hover .mp-bar,.mp-video:not(.playing) .mp-bar{opacity:1}
.mp-bar .mp-play{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;flex:none}
.mp-bar .mp-seek{background:rgba(255,255,255,.28)} .mp-bar .mp-fill{background:#fff}
.mp-bar .mp-time{color:#fff} .mp-fs{background:none;color:#fff;flex:none}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:grid;place-items:center;padding:40px;cursor:zoom-out;animation:fade .15s both}
.lightbox img,.lightbox video{max-width:92vw;max-height:92vh;border-radius:var(--r-md);box-shadow:0 20px 80px rgba(0,0,0,.6)}

/* generation progress (pending tile) */
.gen-card{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.gen-card.err{border-color:#7a3b34}
.gen-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--border-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.gen-meta{display:flex;flex-direction:column;align-items:center;gap:2px}
.gen-label{font-size:12.5px;color:var(--ink-2)}
.gen-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.gen-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--surface-3);overflow:hidden}
.gen-bar>i{position:absolute;left:-40%;width:40%;height:100%;background:var(--accent);border-radius:2px;animation:slide 1.15s ease-in-out infinite}
@keyframes slide{0%{left:-40%}60%{left:60%}100%{left:110%}}

/* chat typing / reasoning indicator */
.msg.loading{color:var(--muted);display:flex;align-items:center}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
.typing-label{font-size:12.5px;color:var(--muted);margin-right:8px}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* gallery lightbox (full viewer) */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;display:flex;flex-direction:column;animation:fade .15s both}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:46px 76px 8px;min-height:0}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;border-radius:var(--r-md);object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lb-stage .lb-audio{width:min(560px,90%)}
.lb-x,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);z-index:2;line-height:1}
.lb-x{top:18px;right:18px;width:40px;height:40px;font-size:17px}
.lb-prev,.lb-next{top:46%;transform:translateY(-50%);width:46px;height:46px;font-size:26px}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}
.lb-panel{flex:none;max-height:36vh;overflow-y:auto;padding:14px 24px 24px;display:flex;flex-direction:column;gap:13px;align-items:center}
.lb-prompt{max-width:760px;width:100%;text-align:center}
.lb-model{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.lb-ptext{font-size:14px;color:#e8e2d6;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.lb-ptext.muted{color:var(--muted)}
.lb-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lib-acts .ex{cursor:pointer}

/* skeleton / spinner */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;
  animation:shimmer 1.3s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.spinner{width:16px;height:16px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.navtoggle{display:none} .nav-backdrop{display:none}
.navtoggle svg{width:20px;height:20px}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidenav{position:fixed;inset:0 auto 0 0;width:250px;z-index:55;transform:translateX(-100%);transition:transform .2s}
  .sidenav.open{transform:none}
  .navtoggle{display:grid;position:fixed;top:12px;left:12px;z-index:60;width:42px;height:42px;place-items:center;
    background:var(--surface);border:1px solid var(--border);border-radius:11px;color:var(--ink);cursor:pointer}
  .nav-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50}
  .topbar{padding-left:64px}
  .chat-wrap{padding-top:58px}
  .canvas{padding:64px var(--g-md) 80px}
}