:root{
--bg:#0a0a0c; --surface:rgba(var(--ink-rgb),.04); --surface-solid:#141418; --border:rgba(var(--ink-rgb),.08); --border-strong:rgba(var(--ink-rgb),.13);
--text:#b9b9c3; --text-dim:#71717f; --white:#f3f3f7;
--accent1:#ff5fa2; --accent2:#9a6cff; --accent:#b07cff;
--good:#46d39a; --warn:#f5b252; --bad:#ff6b81;
/* `--ink-rgb` is the base for translucent overlays (hovers, .on states, badge
fills): white on dark, black on light, so every overlay flips with the theme. */
--ink-rgb:255,255,255;
--field:#0e0e12; --code-bg:#0e0e12; --code-fg:#c9c9d4; --wlabel:#aab;
--mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--r:12px;
}
/* Light theme — flips the overlay ink + repaints surfaces/fields. Toggle adds
`.light` to ; the choice is persisted in localStorage. */
body.light{
--bg:#eceef3; --surface:#ffffff; --surface-solid:#ffffff;
--border:rgba(0,0,0,.11); --border-strong:rgba(0,0,0,.20);
--text:#43434e; --text-dim:#74747e; --white:#17171c;
--accent:#7a4df0;
--good:#0f9159; --warn:#b3720c; --bad:#d83a52;
--ink-rgb:0,0,0;
--field:#ffffff; --code-bg:#f1f1f6; --code-fg:#3a3a45; --wlabel:#5c5c68;
}
body.light .pill-primary{background:#22222b;color:#fff}
body.light .mono-block,body.light .kv,body.light .ctxcard pre{box-shadow:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent2);color:#fff}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px 80px}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-size:18px;font-weight:650;letter-spacing:-.02em;margin:0;color:var(--white);display:flex;align-items:center;gap:8px}
.brand .logomark{display:block;flex:none}
.brand .accent{background:linear-gradient(95deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{color:var(--text-dim);font-size:12.5px}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px}
.tabs button{background:none;color:var(--text-dim);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:550}
.tabs button.on{background:rgba(var(--ink-rgb),.09);color:var(--white)}
button{font-family:inherit;font-size:13px;cursor:pointer;border:none}
.pill{border-radius:999px;padding:8px 16px;font-weight:550;transition:.12s}
.pill-primary{background:var(--white);color:#0a0a0c}
.pill-primary:hover{transform:translateY(-1px)}
.pill-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.pill-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.pill-ghost:hover{border-color:var(--border-strong);color:var(--white)}
.pill-danger{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.pill-danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.pill-danger:disabled{opacity:.4;cursor:not-allowed}
/* Language context control (top bar) — the current language + its brief, as one unit */
.langctl{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;overflow:hidden}
.langctl .langdot{width:8px;height:8px;border-radius:50%;background:linear-gradient(95deg,var(--accent1),var(--accent2));margin-left:13px;flex:none}
.langctl .langpre{color:var(--text-dim);font-size:12px;padding-left:8px}
.langswitch{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--white);font-weight:600;font-size:13.5px;padding:9px 30px 9px 8px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 13px center}
.langswitch:focus{outline:none}
.projsel{appearance:none;-webkit-appearance:none;background-color:var(--surface);border:1px solid var(--border-strong);border-radius:999px;color:var(--white);font-weight:600;font-size:13px;padding:8px 30px 8px 14px;cursor:pointer;font-family:inherit;
background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}
.projsel:focus{outline:none;border-color:var(--accent)}
.fld{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit}
.fld:focus{outline:none;border-color:var(--accent)}
.fld.mono{font-family:var(--mono);font-size:12.5px;line-height:1.5}
.fld-l{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:6px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:none;color:var(--text-dim);padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.seg button.on{background:var(--accent);color:#fff}
.xbtn{background:transparent;border:none;color:var(--text-dim);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;border-radius:6px}
.xbtn:hover{color:var(--bad);background:rgba(var(--ink-rgb),.06)}
.projcard{padding:16px 18px}
.kindchip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(var(--ink-rgb),.06);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.kindchip.on{background:var(--accent);border-color:transparent;color:#fff}
.srcrow{display:flex;align-items:center;gap:10px;font-size:12.5px;background:rgba(var(--ink-rgb),.03);border:1px solid var(--border);border-radius:8px;padding:7px 11px}
.srcbranch{font-size:11px;font-weight:600;padding:1px 7px;border-radius:5px;background:rgba(var(--ink-rgb),.06);color:var(--text-dim);font-family:var(--mono)}
.gitconn{background:rgba(var(--ink-rgb),.03);border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.syncdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-dim)}
.syncdot.ok{background:#46d39a}
.syncdot.off{background:#e0a33e}
.syncdot.syncing{background:var(--accent);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.briefbtn2{background:rgba(var(--ink-rgb),.04);border:none;border-left:1px solid var(--border);color:var(--text);padding:9px 15px;font-weight:550;font-size:13px;cursor:pointer;white-space:nowrap}
.briefbtn2:hover{color:var(--white);background:rgba(var(--ink-rgb),.09)}
.briefbtn2.override{color:var(--text-dim)}
.scopechip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(var(--ink-rgb),.06);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.agnostic-note{background:rgba(var(--ink-rgb),.05);border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--text-dim);margin-bottom:14px}
/* Top-right: app-level nav (not tied to one language), sits with the brand */
.sys-tabs button.on{background:rgba(var(--ink-rgb),.09);color:var(--white)}
/* Workspace bar: the language selector leads the views that act on that language */
.langbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 0 18px;border-bottom:1px solid var(--border);margin-bottom:24px}
.langbar .langlabel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.lang-tabs{background:color-mix(in srgb,var(--accent2) 11%,var(--surface));border-color:color-mix(in srgb,var(--accent2) 32%,var(--border))}
.lang-tabs button.on{background:color-mix(in srgb,var(--accent2) 42%,transparent);color:#fff}
.modal-overlay{position:fixed;inset:0;background:#000a;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.modal{background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:18px;width:min(840px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 80px #000a}
.modal-head{padding:20px 24px 14px;border-bottom:1px solid var(--border)}
.modal-body{padding:22px 24px;overflow-y:auto;flex:1}
.modal-foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center}
.steps{display:flex;gap:6px;margin-top:12px}
.steps .dot{height:4px;flex:1;border-radius:2px;background:var(--border-strong)}
.steps .dot.on{background:var(--white)}
.steps .dot.done{background:var(--good)}
.modal-body{font-size:14.5px;line-height:1.55}
.wlabel{font-size:13px;font-weight:600;color:var(--wlabel);text-transform:uppercase;letter-spacing:.04em;margin:0 0 7px}
.winput{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);font-size:15px;font-family:inherit}
.winput:focus{outline:none;border-color:var(--border-strong)}
textarea.winput{resize:vertical;line-height:1.55}
.formality-opt{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1px solid var(--border);border-radius:11px;cursor:pointer;margin-bottom:9px;font-size:14.5px;color:var(--white)}
.formality-opt.on{border-color:var(--white);background:var(--surface)}
.term-card{border:1px solid var(--border);border-radius:11px;padding:12px 13px;margin-bottom:9px;background:rgba(var(--ink-rgb),.02)}
.term-card .chip{font-size:12.5px;padding:5px 11px}
.term-card .chip.on{background:#46d39a1e;border-color:#46d39a66;color:var(--good)}
.term-note{font-size:12.5px;color:var(--text-dim);background:rgba(var(--ink-rgb),.03);border-radius:7px;padding:6px 10px;line-height:1.45;margin-top:8px}
.termrow{display:flex;gap:8px;align-items:center}
.termrow .termlbl{font-size:12.5px;min-width:70px;flex:none}
.iconbtn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);border-radius:8px;width:30px;height:30px;flex:none;cursor:pointer}
.iconbtn:hover{color:var(--bad);border-color:#ff6b8155}
/* DecisionField default reference + customized tag */
.defhint{font-size:12px;color:var(--text-dim);margin-top:7px;line-height:1.45;background:rgba(var(--ink-rgb),.025);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.defhint .linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px;padding:0 0 0 8px;text-decoration:underline;text-underline-offset:2px}
.tagchg{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);border:1px solid #f5b25240;border-radius:999px;padding:1px 7px;margin-left:8px;vertical-align:middle}
/* derived quality-checks list (read-only) */
.checklist{list-style:none;display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.checklist li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--text);line-height:1.45}
.checklist .ck{color:var(--good);flex:none;font-weight:700}
.gloss-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:7px}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--border-strong);border-top-color:var(--white);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.row-field{display:flex;flex-direction:column;gap:6px}
label.lbl{font-size:12px;color:var(--text-dim)}
select,input,textarea{background:var(--field);border:1px solid var(--border);color:var(--white);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--accent)}
.launch{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.bar{height:8px;background:rgba(var(--ink-rgb),.06);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));transition:width .4s}
.bar.indet > i{width:14%;transition:none;animation:indet 1.8s ease-in-out infinite}
@keyframes indet{0%,100%{opacity:.3}50%{opacity:.85}}
.phase{font-size:12.5px;color:var(--text);margin-top:9px}
.phase .dim{color:var(--text-dim)}
.toolbar{display:flex;gap:10px;align-items:center;margin:24px 0 12px;flex-wrap:wrap}
.toolbar input.search{flex:1;min-width:200px}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer}
.chip.on{color:var(--white);border-color:var(--border-strong);background:rgba(var(--ink-rgb),.08)}
.grid{display:flex;flex-direction:column;gap:7px}
.tile{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) auto;gap:14px;align-items:center;
background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 15px;cursor:pointer;transition:.1s}
.tile:hover{border-color:var(--border-strong);background:rgba(var(--ink-rgb),.06)}
.tile .key{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .en{color:var(--text)} .tile .de{color:var(--white)}
.tile .arrow{color:var(--text-dim);text-align:center}
.tile .badges{display:flex;gap:6px;align-items:center;justify-self:end}
.b{font-size:10.5px;font-family:var(--mono);padding:2px 7px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.b.flag{color:var(--warn);border-color:#f5b25240} .b.over{color:var(--accent);border-color:#b07cff44}
.b.chg{color:var(--good);border-color:#46d39a40} .b.wide{color:var(--bad);border-color:#ff6b8140}
.st{font-size:10.5px;font-family:var(--mono);padding:2px 8px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
.st-not_translated{color:var(--text-dim)}
.st-ai_translated{color:#7aa2ff;border-color:#7aa2ff35;background:#7aa2ff12}
.st-deep_review_passed{color:#3fd1c7;border-color:#3fd1c735;background:#3fd1c712}
.st-quality_suggestion{color:var(--warn);border-color:#f5b25240;background:#f5b25212}
.st-human_confirmed{color:var(--good);border-color:#46d39a40;background:#46d39a14}
.tileconfirm{width:24px;height:24px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:12px;cursor:pointer;flex-shrink:0;line-height:1}
.tileconfirm:hover{border-color:var(--border-strong);color:var(--text)}
.tileconfirm.on{background:#46d39a1e;border-color:#46d39a66;color:var(--good)}
.ovr{color:var(--accent)!important}
.scrim{position:fixed;inset:0;background:#000000aa;backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.15s;z-index:5}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,94vw);background:var(--surface-solid);border-left:1px solid var(--border-strong);
transform:translateX(100%);transition:.2s cubic-bezier(.4,0,.2,1);z-index:6;overflow-y:auto;padding:26px}
.drawer.on{transform:none}
.drawer h2{font-family:var(--mono);font-size:12px;color:var(--text-dim);font-weight:500;margin:0 0 18px}
.big-de{font-size:22px;color:var(--white);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.src{font-size:15px;color:var(--text);margin-top:4px}
.sec{margin-top:24px}
.sec > .t{font-size:12px;font-weight:600;color:var(--white);margin-bottom:8px}
.sec p{margin:0;color:var(--text)}
.mono-block{font-family:var(--mono);font-size:11.5px;background:var(--code-bg);border:1px solid var(--border);border-radius:9px;padding:11px;white-space:pre-wrap;overflow:auto;color:var(--code-fg);max-height:260px}
.ctxcard{border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:9px}
.ctxcard .head{font-family:var(--mono);font-size:11px;color:var(--text-dim);padding:7px 10px;background:rgba(var(--ink-rgb),.03);border-bottom:1px solid var(--border)}
.ctxcard pre{margin:0;padding:10px;font-family:var(--mono);font-size:11px;color:var(--code-fg);overflow-x:auto;white-space:pre}
.kvs{display:flex;flex-wrap:wrap;gap:8px}
.kv{font-size:12px;font-family:var(--mono);background:var(--code-bg);border:1px solid var(--border);border-radius:7px;padding:5px 9px;color:var(--text)}
.kv b{color:var(--white);font-weight:600}
.prec{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)}
.prec .r{color:var(--white)} .prec .c{font-family:var(--mono);font-size:11px;color:var(--text-dim)}
.flagchip{font-size:11px;font-family:var(--mono);padding:3px 9px;border-radius:999px;background:#f5b25216;color:var(--warn);border:1px solid #f5b25230;margin:0 6px 6px 0;display:inline-block}
.flagchip.bad{background:#ff6b8118;color:var(--bad);border-color:#ff6b8130}
.flagchip.low{background:rgba(var(--ink-rgb),.05);color:var(--text-dim);border-color:var(--border)}
/* important flags as labels under the string (so they aren't lost among width badges) */
.flaglabels{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.flab{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em;white-space:nowrap;text-transform:uppercase}
.flab.bad{background:#ff6b8118;color:var(--bad);border:1px solid #ff6b8130}
.flab.warn{background:#f5b25216;color:var(--warn);border:1px solid #f5b25230}
.flab.low{background:rgba(var(--ink-rgb),.05);color:var(--text-dim);border:1px solid var(--border);font-weight:600}
.altcard{margin-top:8px;background:rgba(var(--ink-rgb),.03);border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:14px}
/* Unused page — namespace groups */
.nsgroup{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface)}
.nshead{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;user-select:none}
.nshead:hover{background:rgba(var(--ink-rgb),.03)}
.nshead .caret{color:var(--text-dim);font-size:11px;width:12px}
.nshead .nsname{font-weight:650;font-size:14px;font-family:var(--mono)}
.nsbody{padding:0 12px 12px;gap:8px}
details summary{cursor:pointer;color:var(--text-dim);font-size:12px}
details summary:hover{color:var(--white)}
.muted{color:var(--text-dim)} .empty{text-align:center;color:var(--text-dim);padding:60px 0}
.conf{font-family:var(--mono);font-size:12px}
.recent{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ritem{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;cursor:pointer}
.ritem:hover{border-color:var(--border-strong)} .ritem .ns{color:var(--white);font-weight:550} .ritem .st{font-family:var(--mono);color:var(--text-dim);font-size:11px}
.usage{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--text-dim)}
.usage .usd{font-family:var(--mono);color:var(--good);font-weight:600;font-size:12.5px}
.usage .umodel{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono)}
.usage .udot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.usage .utok{color:var(--text-dim)}
.usage .covered{font-family:inherit;font-size:10.5px;font-weight:600;color:var(--good);background:#46d39a14;border:1px solid #46d39a40;border-radius:999px;padding:2px 9px;white-space:nowrap}
.overbox{margin-top:10px;display:flex;flex-direction:column;gap:8px}
hr.div{border:none;border-top:1px solid var(--border);margin:28px 0 0}
.langrow{cursor:pointer;transition:.1s} .langrow:hover{border-color:var(--border-strong)}
.multibar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:rgba(var(--ink-rgb),.05);margin:10px 0 9px}
.multibar > span{height:100%}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px}
.leg .d{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.tracker{margin-bottom:16px;background:linear-gradient(180deg,#46d39a0d,transparent),var(--surface)}
.trk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.trk-big{font-size:38px;font-weight:750;color:var(--white);line-height:1;display:flex;align-items:baseline;gap:9px}
.trk-unit{font-size:13px;font-weight:500;color:var(--text-dim)}
.trk-ms{text-align:right;color:var(--text)}
.trk-bar{height:13px;position:relative;margin:14px 0 0}
.trk-bar > span{transition:width .35s cubic-bezier(.4,0,.2,1)}
.trk-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--bg)}
.reviewtile{align-items:start}
.reviewtile .de{line-height:1.35}
.rsugg{margin-top:6px;font-size:11.5px;color:var(--warn);background:#f5b2520f;border:1px solid #f5b25230;border-radius:7px;padding:5px 8px;line-height:1.35}
.approve{border:1px solid #46d39a55;background:#46d39a16;color:var(--good);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.1s}
.approve:hover{background:#46d39a26;border-color:#46d39a99}
.kbd{font-family:var(--mono);font-size:10.5px;background:rgba(var(--ink-rgb),.08);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--white)}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:15px;line-height:1;cursor:pointer;transition:.12s;flex:none}
.themebtn:hover{border-color:var(--border-strong);color:var(--white)}
.helpbtn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-size:12px;font-weight:700;line-height:1;cursor:pointer;flex:none;transition:.12s}
.helpbtn:hover{border-color:var(--accent);color:var(--accent)}
/* The run panel sliding in from the top when a run starts/finishes. */
@keyframes popin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.popin{animation:popin .22s cubic-bezier(.4,0,.2,1)}
.costnote{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text);background:#f5b25214;border:1px solid #f5b25240;border-radius:9px;padding:10px 12px}
.guide-item{padding:13px 0;border-top:1px solid var(--border);line-height:1.5}
.guide-item:first-child{border-top:none;padding-top:2px}
.guide-h{font-weight:650;color:var(--white);margin-bottom:4px;display:flex;align-items:center;gap:9px}
.guide-heavy{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:1px 8px}
/* Learned-rule toast — non-intrusive, bottom-right */
.rtoast{position:fixed;right:20px;bottom:20px;z-index:60;width:min(380px,calc(100vw - 40px));background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 18px 50px #00000055;padding:14px 15px;animation:rtin .25s cubic-bezier(.4,0,.2,1)}
@keyframes rtin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rt-h{display:flex;align-items:center;margin-bottom:9px}
.rt-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.rt-x{margin-left:auto;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px}
.rt-rule{color:var(--white);font-size:14px;line-height:1.45;font-weight:550}
.rt-ex{margin-top:9px}
.rt-ex summary{font-size:12px;color:var(--text-dim);cursor:pointer}
.rt-exrow{font-size:12.5px;margin-top:6px;color:var(--text);line-height:1.4}
.rt-exrow>span{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;color:var(--text-dim);margin-right:7px;letter-spacing:.04em}
.rt-old{color:var(--bad);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.rt-new{color:var(--good)}
.rt-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.rt-foot .pill{padding:7px 13px;font-size:13px}
.rt-status{display:flex;align-items:center;gap:9px;color:var(--text);font-size:13.5px;padding:4px 0}
.rt-spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--white);animation:spin .8s linear infinite;flex:none}
.rt-done{color:var(--good);font-size:14px;font-weight:550}.rt-done b{color:var(--white)}
.rt-err{color:var(--bad);font-size:12.5px;margin-top:6px}
/* ---- Auth: login / first-run gate ---- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.authloading{opacity:.6;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.85}}
.authcard{width:min(380px,94vw);background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:18px;padding:30px 28px;box-shadow:0 30px 80px #0007;display:flex;flex-direction:column;gap:14px}
.authbrand{display:flex;align-items:center;gap:10px;font:700 22px/1 -apple-system,Segoe UI,system-ui;letter-spacing:-.02em;color:var(--white)}
.authbrand .accent{background:linear-gradient(95deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.authcard h2{margin:6px 0 0;font-size:18px;font-weight:650;color:var(--white)}
.authnote{margin:0;color:var(--text-dim);font-size:13px;line-height:1.5}
.authfield{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-dim);font-weight:550}
.authfield input{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14.5px}
.authfield input:focus{outline:none;border-color:var(--accent)}
.autherr{background:color-mix(in srgb,var(--bad) 14%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad);border-radius:9px;padding:8px 11px;font-size:13px}
.authbtn{margin-top:4px;justify-content:center}
.authform{display:flex;flex-direction:column;gap:14px}
/* ---- Account menu (header) ---- */
.acctmenu{position:relative}
.acctbtn{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 12px 4px 4px;color:var(--text);font-size:13px;font-weight:550}
.acctbtn:hover{border-color:var(--border-strong)}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none}
.acctname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctscrim{position:fixed;inset:0;z-index:40}
.acctpop{position:absolute;right:0;top:calc(100% + 8px);z-index:41;width:210px;background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 18px 50px #0008;padding:6px;display:flex;flex-direction:column;gap:2px}
.acctpop-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.acctpop-head .apname{font-weight:600;color:var(--white);font-size:13.5px}
.acctpop-head .aprole{font-size:11.5px;color:var(--text-dim);text-transform:capitalize}
.acctpop button{text-align:left;padding:8px 10px;border-radius:8px;color:var(--text);font-size:13px}
.acctpop button:hover{background:rgba(var(--ink-rgb),.06)}
.acctpop .acctlogout{color:var(--bad)}
/* ---- Users modal ---- */
.userlist{display:flex;flex-direction:column;gap:8px}
.userrow{display:flex;align-items:center;gap:11px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:11px}
.userrow .uname{flex:1;font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px}
.youchip{font-size:10.5px;font-weight:600;color:var(--text-dim);background:rgba(var(--ink-rgb),.08);border-radius:6px;padding:1px 6px}
.rolesel{background:var(--surface-solid);border:1px solid var(--border);border-radius:8px;padding:5px 8px;color:var(--text);font-size:12.5px}
.rolesel:disabled{opacity:.5}
.rmuser{font-size:12.5px;color:var(--bad);padding:5px 10px;border-radius:8px;border:1px solid transparent}
.rmuser:hover{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.adduser{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}
.adduser input{flex:1;min-width:120px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 11px;color:var(--text);font-size:13.5px}
.adduser input:focus{outline:none;border-color:var(--accent)}
.adduser select{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px;color:var(--text);font-size:13px}