/* ============================================================
 * PressArchiver — application styles
 * Stage 11 / v0.5.50 extraction from pressarchiver_36_1_97.html
 * (file was named page_annotator_36_1_97.html before the
 * 2026-05-25 rename — see CLAUDE.md §7 history note).
 *
 * Concatenation of two former inline <style> blocks. The first
 * block (was HTML lines 14-580) holds editor + library tokens +
 * components; the second (was 1481-2093) holds auth/admin/queue/
 * settings overlays added during the SaaS migration.
 *
 * Extracting these unlocks strict CSP (script-src self, no
 * unsafe-inline) for the SPA. style-src still ships unsafe-inline
 * because of the many style="..." attributes in markup — that is
 * a separate (Stage 11.5?) cleanup.
 * ============================================================ */

/* ── Block 1 (editor + library core) ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Light theme */
  --bg:#f4f5f7;--surface:#ffffff;--s2:#f0f1f3;--border:#e2e4e9;
  --accent:#16a34a;--a2:#4f46e5;--a3:#db2777;
  --poly:#0891b2;--psel:#d97706;
  --text:#111827;--dim:#6b7280;
  --tb-bg:#ffffff;--tb-border:#e2e4e9;
  --lp-bg:#fafafa;--rp-bg:#ffffff;
  --canvas-bg:var(--paper-2);
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:12px}

/* ── TOOLBAR ── */
#tb{height:38px;background:var(--tb-bg);border-bottom:1px solid var(--tb-border);display:flex;align-items:center;gap:2px;padding:0 10px;flex-shrink:0;overflow-x:auto;user-select:none;box-shadow:var(--shadow)}
.sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0}
.btn{height:26px;padding:0 8px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--dim);cursor:pointer;font-family:'Inter',sans-serif;font-size:11px;font-weight:400;white-space:nowrap;display:flex;align-items:center;gap:4px;flex-shrink:0;transition:all .12s}
.btn:hover{background:var(--s2);color:var(--text);border-color:var(--border)}
.btn.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.btn.on2{background:var(--a2);border-color:var(--a2);color:#fff;font-weight:600}
.btn.on3{background:var(--a3);border-color:var(--a3);color:#fff;font-weight:600}
.btn.onp{background:var(--poly);border-color:var(--poly);color:#fff;font-weight:600}
.btn.on-aid{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:600}
.btn.del{color:#dc2626;border-color:transparent}.btn.del:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626}
/* H/V pill toggles next to Find Separators. Hidden native checkbox drives
   the visual state via :has(input:checked). */
.hv-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border:1px solid var(--border);border-radius:4px;background:var(--surface);font-size:10px;font-weight:700;color:var(--dim);cursor:pointer;user-select:none;transition:all .12s;letter-spacing:.05em}
.hv-toggle input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.hv-toggle:has(input:checked){background:rgba(249,115,22,.18);border-color:#f97316;color:#c2410c}
.hv-toggle:hover{border-color:#f97316}
/* Cleanup section buttons — quiet outlined rows. */
.btn.cleanup-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:auto;padding:7px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:500;font-size:11px;border-radius:5px}
.btn.cleanup-item:hover{background:var(--s2);border-color:var(--a2)}
.cleanup-badge{margin-left:auto;background:rgba(249,115,22,.18);color:#c2410c;font-weight:700;font-size:10px;padding:1px 8px;border-radius:10px;min-width:22px;text-align:center}
/* Danger Zone — bordered card with explicit destruction warning. */
.danger-zone{border:1px solid rgba(220,38,38,.3);border-radius:8px;padding:10px 12px;background:rgba(220,38,38,.04);display:flex;flex-direction:column;gap:6px}
.danger-zone-title{display:flex;align-items:center;gap:6px;color:#dc2626;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.danger-zone-subtitle{font-size:10px;color:var(--dim);font-style:italic;margin-top:-2px}
.btn.danger-action{width:100%;border:1px solid #dc2626;background:var(--surface);color:#dc2626;font-weight:600;font-size:11px;padding:7px;justify-content:center;border-radius:5px}
.btn.danger-action:hover{background:rgba(220,38,38,.08)}
.btn.dirty{border-color:#f59e0b;color:#d97706;animation:pulse-dirty 2s infinite}
@keyframes pulse-dirty{0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.3)}50%{box-shadow:0 0 0 4px rgba(217,119,6,0)}}
/* Save-button pulse for unsaved rotation in Scans Prep — green halo to
   match the button's accent without overriding its bg/border/color. */
.btn.save-unsaved{animation:pulse-save 1.6s ease-in-out infinite}
@keyframes pulse-save{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
.btn:disabled{opacity:.38;pointer-events:none}
.lbl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;flex-shrink:0}
.tbnum{width:50px;height:28px;background:var(--s2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:inherit;font-size:11px;text-align:center;padding:0 4px;flex-shrink:0}
.tbnum:focus{outline:none;border-color:var(--poly)}

/* ── MAIN LAYOUT ── */
#main{display:flex;flex:1;overflow:hidden}

/* ── LEFT PANEL ── */
#lp{width:240px;min-width:160px;max-width:400px;background:var(--lp-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:relative;transition:width .15s}
#lp.collapsed{width:0;min-width:0;overflow:hidden}
#lpResizer{position:absolute;right:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;background:transparent}
#lpResizer:hover{background:rgba(79,70,229,.15)}
/* LP toggle — before #lp in DOM, always visible */
/* _36_1_23: the old narrow toggle strips (lpToggle, ctxStrip, rpToggle)
   were ambiguous visually — they looked like decorative borders. Replaced
   with explicit chevron buttons inside each panel header. Old strips
   hidden but kept in DOM so any caller wiring against them still no-ops
   cleanly. The new headers carry the chevron behaviour. */
#lpToggle, #ctxStrip, #rpToggle { display: none !important; }
/* Header-mounted chevron — used in lpHdr, ctxHdr, rph (all three panels). */
.pa-hdr-chev{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:4px;background:var(--surface);cursor:pointer;font-size:11px;color:var(--text);user-select:none;transition:all .12s;flex-shrink:0;padding:0;font-family:inherit}
.pa-hdr-chev:hover{background:var(--s2);border-color:var(--accent);color:var(--accent)}
/* New compact header for the Library (#lp) panel — title + chevron. */
#lpHdr{padding:6px 8px;border-bottom:1px solid var(--border);background:var(--s2);display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
#lpHdr .lp-hdr-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* When collapsed, hide the title text — leave only the chevron centered. */
#lp.lp-closed #lpHdr{justify-content:center;padding:6px 4px}
#lp.lp-closed #lpHdr .lp-hdr-title{display:none}
/* When ctxPanel/rp are collapsed, headers shrink to chevron only too. */
#ctxPanel.ctx-closed #ctxHdr{justify-content:center;padding:6px 4px}
#ctxPanel.ctx-closed #ctxHdr > *:not(.pa-hdr-chev){display:none}
#rp.rp-closed #rph{justify-content:center;padding:8px 4px}
#rp.rp-closed #rph > *:not(.pa-hdr-chev){display:none}
/* RP resizer + toggle */
#rpResizer{position:absolute;left:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;background:transparent}
#rpResizer:hover{background:rgba(79,70,229,.15)}
/* RP toggle — between #cw and #rp in DOM */
#rpToggle{width:13px;flex-shrink:0;background:var(--border);border-left:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--dim);z-index:11;transition:background .1s;user-select:none}
#rpToggle:hover{background:var(--s2);color:var(--text)}
.lpt{padding:10px 14px 5px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:600}
.mb{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;border-left:3px solid transparent;transition:all .12s;font-size:11px;color:var(--dim);border-radius:0}
.mb:hover{background:var(--s2);color:var(--text)}
.mb.on{border-left-color:var(--accent);background:rgba(22,163,74,.07);color:var(--accent);font-weight:700}
.mb.onp{border-left-color:var(--poly);background:rgba(8,145,178,.07);color:var(--poly);font-weight:700}
.mi{font-size:15px}.ml{line-height:1.3}.ms{font-size:9px;color:var(--dim);font-weight:400}

/* ── CANVAS ── */
#cw{flex:1;overflow:hidden;position:relative;background:var(--canvas-bg);background-image:radial-gradient(circle at 1px 1px,var(--rule-2) 1px,transparent 0);background-size:20px 20px}
#ci{position:absolute;transform-origin:0 0}
#img{display:block;user-select:none;pointer-events:none}
#svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
#svg *{pointer-events:auto}
/* _36_1_60: SVG number badges (region number, group reading-order number)
   should never capture the mouse or be text-selectable. Without this rule
   the `#svg *{pointer-events:auto}` override above re-enables interaction
   on the <text> elements; the browser then treats them like normal text
   and a click-drag through them paints a text selection (blue highlight)
   on the digits. None of our <text> elements have click handlers, so it
   is safe to make every SVG text element inert. */
#svg text{pointer-events:none;user-select:none;-webkit-user-select:none}
.rr{fill:rgba(22,163,74,.1);stroke:#16a34a;stroke-width:1.5;cursor:pointer}
.rr:hover{fill:rgba(22,163,74,.2)}
.rr.sel{fill:rgba(79,70,229,.15);stroke:#4f46e5;stroke-width:2.5}
.rl{fill:#16a34a;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700}
/* Region type dropdown */
.reg-type-sel{height:28px;padding:0 7px;background:var(--surface);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:inherit;font-size:11px;cursor:pointer;min-width:0;box-shadow:var(--shadow)}
.reg-type-sel:focus{outline:none;border-color:var(--accent)}
.reg-type-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0}
.lp2{fill:none;stroke:#db2777;stroke-width:3.5;stroke-linecap:round;cursor:pointer}
.lp2.sel{stroke:#ea580c;stroke-width:4.5}
.ll{fill:#db2777;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700}
.lh{fill:#ea580c;stroke:#fff;stroke-width:1;cursor:crosshair}
.rh{fill:#4f46e5;stroke:#fff;stroke-width:1;cursor:pointer}
.ps{fill:rgba(8,145,178,.07);stroke:#0891b2;stroke-width:1.5;cursor:pointer}
.ps:hover{fill:rgba(8,145,178,.18)}
.ps.bh{fill:rgba(8,145,178,.25);stroke:#0891b2;stroke-width:2.5}
.ps.sel{fill:rgba(217,119,6,.1);stroke:#d97706;stroke-width:2}
.ps.msel{fill:rgba(8,145,178,.15);stroke:#0891b2;stroke-width:2;stroke-dasharray:4 2}
.ph{fill:#d97706;stroke:#fff;stroke-width:1;cursor:pointer}
/* ── RIGHT PANEL ── */
#rp{width:280px;min-width:160px;max-width:480px;background:var(--rp-bg);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;position:relative;transition:width .15s}
/* _36_1_22: collapsed = narrow strip with just the region count number, so
   the user always sees how many regions exist even when the structure list
   is hidden. Click the rpToggle chevron to expand back. */
#rp.rp-closed{width:54px;min-width:54px}
#rp.rp-closed > *:not(.rp-mini){display:none !important}
#rp .rp-mini{display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:14px 4px;flex:1;min-height:0}
#rp.rp-closed .rp-mini{display:flex}
#rp .rp-mini-cnt{font-size:24px;font-weight:700;color:var(--accent);line-height:1}
#rp .rp-mini-lbl{font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;text-align:center}
/* rpToggle mirrors lpToggle on the right edge. */
#rpToggle{width:13px;flex-shrink:0;background:var(--border);border-left:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--dim);z-index:11;transition:background .1s;user-select:none}
#rpToggle:hover{background:var(--s2);color:var(--text)}
#rph{padding:10px 14px;border-bottom:1px solid var(--border);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);display:flex;align-items:center;justify-content:space-between;background:var(--s2)}
#rpl{flex:1;overflow-y:auto;padding:8px}
#rpl::-webkit-scrollbar{width:4px}
#rpl::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#rpl::-webkit-scrollbar-track{background:transparent}

/* Region cards in right panel */
.pr{border-radius:7px;border:1px solid var(--border);margin-bottom:4px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.prh{display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:grab;user-select:none;transition:background .1s}
.prh:hover{background:var(--s2)}.prh.sel{background:rgba(79,70,229,.08);border-color:var(--a2)}
.prn{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prns{flex:1;font-size:11px;color:var(--text)}
.prl{padding:0 8px 6px 28px}
.plr{display:flex;flex-direction:row;align-items:flex-start;gap:6px;padding:3px 4px 5px;border-radius:4px}
.plr:hover{background:rgba(219,39,119,.05)}.plr.sel{background:rgba(219,39,119,.1)}
.plt{display:flex;align-items:center;cursor:grab;user-select:none;flex-shrink:0;padding-top:4px}
.pln{width:16px;height:16px;border-radius:50%;background:var(--a3);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pta{flex:1;padding:3px 6px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:inherit;font-size:10px;resize:none;min-height:26px;line-height:1.4;overflow:hidden;min-width:0}
.pta:focus{outline:none;border-color:var(--a3)}
.pta::placeholder{color:var(--dim);font-style:italic}
.do{border-top:2px solid var(--accent)}

/* Organizer groups */
.org-group{border-radius:6px;border:1px solid rgba(219,39,119,.2);margin-bottom:6px;background:rgba(219,39,119,.03);overflow:hidden}
.org-group-hdr{display:flex;align-items:center;gap:6px;padding:5px 8px;cursor:pointer;user-select:none;background:rgba(219,39,119,.06);border-bottom:1px solid rgba(219,39,119,.12);transition:background .1s}
.org-group-hdr:hover{background:rgba(219,39,119,.1)}
.org-group-arrow{font-size:9px;color:var(--a3);width:12px;flex-shrink:0;transition:transform .15s}
.org-group-body{padding:4px 4px 4px 8px}
.org-group-body.collapsed{display:none}
#ni{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none}
#ni .ic{font-size:48px;opacity:.3}
#ni p{color:var(--dim);font-size:13px}
#bc{position:fixed;pointer-events:none;z-index:9999;display:none;overflow:visible}
#cm{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:4px;z-index:1000;display:none;min-width:200px;box-shadow:0 8px 30px rgba(0,0,0,.14)}
.ci2{padding:7px 12px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text)}
.ci2:hover{background:rgba(8,145,178,.08);color:var(--poly)}
#dlg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:none;align-items:center;justify-content:center}
#dlg.on{display:flex}
.db{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:280px;box-shadow:0 20px 60px rgba(0,0,0,.14)}
.dt{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--poly)}
.di{width:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:inherit;font-size:13px;margin-bottom:14px}
.di:focus{outline:none;border-color:var(--poly)}
.dbs{display:flex;gap:8px;justify-content:flex-end}
.dbt{padding:6px 16px;border-radius:6px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:12px;background:var(--s2);color:var(--text)}
.dbt.ok{background:var(--poly);color:#fff;border-color:var(--poly);font-weight:700}

/* ── VERIFIER ── */
.mb.onv{border-left-color:#d97706;background:rgba(217,119,6,.07);color:#d97706;font-weight:700}
/* _36_1_31: Verifier line row — CSS grid puts the number circle on the
   left and the meta label + textarea stacked to its right. .vr-line-top
   uses display:contents so its two children (.vr-num + meta div) become
   direct grid items without changing the JS template. */
.vr-line-row{display:grid;grid-template-columns:15px 1fr;column-gap:6px;row-gap:2px;align-items:start;padding:4px 6px 5px;border-radius:5px;cursor:pointer;margin-bottom:2px}
.vr-line-row:hover{background:rgba(217,119,6,.06)}
.vr-line-row.sel{background:rgba(217,119,6,.12);outline:1px solid rgba(217,119,6,.3)}
.vr-line-top{display:contents}
.vr-num{grid-column:1;grid-row:1;width:15px;height:15px;border-radius:50%;background:var(--ink-4);color:#fff;font-family:var(--mono);font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:4px}
.vr-line-top > div:not(.vr-num){grid-column:2;grid-row:1;font-size:10px;color:var(--ink-3);line-height:1.5;padding-top:1px}
.vr-ta{grid-column:2;grid-row:2;width:100%;padding:4px 7px;background:var(--paper);border:1px solid var(--rule);border-radius:5px;color:var(--ink-2);font-family:var(--mono);resize:none;min-height:24px;line-height:1.4;overflow:hidden;font-size:10.5px}
.vr-ta:focus{outline:none;border-color:var(--accent);background:var(--cream);color:var(--ink)}
.vr-ta::placeholder{color:var(--ink-4);font-style:italic}
/* Rich-conf preview div (inserted when word/glyph highlighting is on) — same
   slot as the textarea so it sits to the right of the number circle. */
.vr-line-row > div[style*="border:1px solid"]{grid-column:2;grid-row:2}
/* Inline text overlay on canvas */
#vOverlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.vt-box{position:absolute;pointer-events:auto;background:rgba(255,255,255,.92);border:1px solid #d97706;border-radius:3px;padding:1px 4px;white-space:nowrap;display:flex;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.vt-input{background:transparent;border:none;color:#78350f;font-family:'JetBrains Mono',monospace;outline:none;padding:0;white-space:nowrap;min-width:20px}

/* ── DETECT / OCR CONFIG MODAL ── */
#cfgDlg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#cfgDlg.on{display:flex}
#aidCfgDlg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#aidCfgDlg.on{display:flex}
/* _36_1_26: per-engine OCR settings modal — same skeleton as cfgDlg. */
#ocrCfgDlg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#ocrCfgDlg.on{display:flex}
/* _36_1_27: Auto Grouping settings modal. */
#groupingCfgDlg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#groupingCfgDlg.on{display:flex}
/* Inline info chip — appears next to a setting label, shows native browser
   tooltip with a human-readable explanation on hover. */
.cfg-info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--border);color:var(--text);font-size:9px;font-weight:700;cursor:help;margin-left:4px;user-select:none;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.cfg-info:hover{background:#a78bfa;color:#fff}
/* Tab bar inside cfgDlg — switches between Separators&Noise / YOLO10 / Google Cloud. */
.cfg-tabs{display:flex;border-bottom:1px solid var(--border);margin:-4px 0 8px;gap:0}
.cfg-tab{flex:1;padding:8px 4px;text-align:center;cursor:pointer;font-size:11px;font-weight:600;color:var(--dim);border-bottom:2px solid transparent;transition:all .12s;user-select:none;background:transparent;border-top:none;border-left:none;border-right:none;font-family:inherit}
.cfg-tab:hover{color:var(--text)}
.cfg-tab.active{color:#d97706;border-bottom-color:#d97706}
#ocrDlg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#ocrDlg.on{display:flex}
#promptDlg,#twoPassPromptDlg,#aidPromptDlg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#promptDlg.on,#twoPassPromptDlg.on,#aidPromptDlg.on{display:flex}
.cfg-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 24px 18px;width:320px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.cfg-title{font-size:13px;font-weight:700;color:#d97706;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.cfg-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cfg-lbl{width:72px;font-size:11px;color:var(--dim);flex-shrink:0}
.cfg-hint{font-size:9px;color:var(--dim);margin-left:4px;flex:1;text-align:right;font-style:italic}
.cfg-inp{flex:1;height:28px;padding:0 8px;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:inherit;font-size:12px}
.cfg-inp:focus{outline:none;border-color:#d97706}
.cfg-sep{height:1px;background:var(--border);margin:12px 0}
.cfg-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.cfg-btn{padding:6px 16px;border-radius:6px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:12px;background:var(--s2);color:var(--text)}
.cfg-btn.ok{background:#d97706;color:#fff;border-color:#d97706;font-weight:700}
.cfg-btn.ok:hover{background:#b45309}
.cfg-btn.ok-green{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.cfg-btn.ok-green:hover{filter:brightness(1.1)}
.cfg-status{font-size:10px;color:var(--dim);margin-top:8px;min-height:14px;text-align:center}

/* ── EXTRA LIGHT THEME POLISH ── */
/* Scrollbars */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9ca3af}

/* propsSec inputs */
#propsSec input[type=number],#propsSec select{background:var(--surface);color:var(--text);border-color:var(--border)}

/* orgPanel inputs */
#orgPanel input[type=number]{background:var(--surface);color:var(--text);border-color:var(--border)}

/* rpOrgCtrl */
#rpOrgCtrl{background:var(--s2)}

/* Thin accent line top of toolbar for visual pop */
#tb::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--a2),var(--poly));opacity:.7}
#tb{position:relative}

/* Active mode badge on left panel mode buttons */
.mb.on .ms{color:rgba(22,163,74,.7)}
.mb.onp .ms{color:rgba(8,145,178,.7)}
.mb.onv .ms{color:rgba(217,119,6,.7)}

/* Right panel header */
#rph{font-weight:600;letter-spacing:.05em}

/* Flash messages */
.tb-flash{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;animation:fadeInOut 3s forwards}
@keyframes fadeInOut{0%{opacity:0;transform:translateY(-4px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* Overlap btn warning style */
#bOverlap.has-overlaps{color:#dc2626;background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.3)}

/* ══════════════════════════════════════════════════
   REDESIGN v30.9 — new layout components
══════════════════════════════════════════════════ */

/* ── TOOLBAR REDESIGN ── */
#tb{position:relative}
#tb::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#16a34a 0%,#4f46e5 45%,#0891b2 100%);opacity:.65;z-index:1}
/* Breadcrumb */
#breadcrumb{display:flex;align-items:center;gap:3px;flex-shrink:0;margin-right:2px}
#breadcrumb .bc-item{font-size:11px;color:#6b7280;cursor:pointer;white-space:nowrap;font-weight:400;font-family:'Inter',sans-serif;transition:color .1s}
#breadcrumb .bc-item:hover{color:var(--text)}
#breadcrumb .bc-item.cur{color:#4f46e5;font-weight:600;cursor:default}
#breadcrumb .bc-sep{font-size:10px;color:#d1d5db;line-height:1}
/* Accent button pairs (Auto + ⚙, OCR + ⚙) */
.acc-group{display:flex;flex-shrink:0}
.acc-btn{height:26px;padding:0 9px;border-radius:5px 0 0 5px;border:1px solid;border-right:none;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;transition:filter .1s}
.acc-btn:hover{filter:brightness(1.08)}
.acc-cfg{height:26px;width:22px;padding:0;border-radius:0 5px 5px 0;border:1px solid;font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s}
/* Toolbar btn for Save (green left-radius) */
.btn.acc-save{border-radius:5px 0 0 5px;border-right:none;color:#16a34a;border-color:#16a34a28;background:rgba(22,163,74,.08);font-weight:600}
.btn.acc-save:hover{background:rgba(22,163,74,.15)}
/* Solo variant of acc-save (no grouped METS sibling): all-around radius. */
.btn.acc-save-solo{border-radius:5px;border:1px solid #16a34a28;color:#16a34a;background:rgba(22,163,74,.08);font-weight:600}
.btn.acc-save-solo:hover:not(:disabled){background:rgba(22,163,74,.15)}
/* Counter chip next to the Save button. Greys out when nothing pending,
   amber + bold when dirty (mirrors the .dirty pulse on the button). */
.save-count{font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;letter-spacing:.02em;white-space:nowrap;transition:color .15s}
.save-count.dirty{color:#d97706;font-weight:700}

/* (Left rail removed in v35.5.5 — modes now driven by toolbar buttons) */

/* ── BULK MODE ── */
#bulkView{position:absolute;inset:0;display:none;flex-direction:column;background:var(--canvas-bg);background-image:radial-gradient(circle at 1px 1px,var(--rule-2) 1px,transparent 0);background-size:20px 20px;z-index:2}
#bulkHeader{flex-shrink:0;padding:10px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--a2)}
#bulkGrid{flex:1;overflow-y:auto;padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}
.bulk-card{cursor:pointer;border-radius:8px;border:2px solid var(--border);overflow:hidden;background:var(--surface);width:120px;flex-shrink:0;box-shadow:var(--shadow);transition:border-color .12s,transform .1s}
.bulk-card:hover{border-color:var(--a2);transform:translateY(-2px)}
.lpPageRow.bulk-sel{background:rgba(79,70,229,.09)!important;border-left-color:var(--a2)!important}
.lpPageRow.bulk-sel .thumb{border-color:var(--a2)}
.bulk-chk-wrap{position:absolute;bottom:3px;right:3px;width:16px;height:16px;background:rgba(255,255,255,.85);border-radius:3px;display:flex;align-items:center;justify-content:center}
.bulk-chk{width:13px;height:13px;accent-color:var(--a2);cursor:pointer;margin:0}
.lpPageRow .thumb{position:relative}

#lp{width:120px;min-width:0;background:var(--lp-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .18s cubic-bezier(.4,0,.2,1)}
/* _36_1_22: collapsed = narrow strip (~46px) with mini-thumb stack instead of width:0.
   Full-size content is hidden via the `.lp-mini-only` rule below; the .lp-mini
   container takes over. Same pattern is reused on ctxPanel + rp.
   _36_1_24: !important because #lpIssues / #ctxInner / #rpl carry inline
   style="display:flex" which beats unmarked CSS selectors — children would
   stay visible alongside the mini view otherwise. */
#lp.lp-closed{width:46px}
#lp.lp-closed > *:not(.lp-mini){display:none !important}
#lp .lp-mini{display:none;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 6px;overflow-y:auto;flex:1;min-height:0}
#lp.lp-closed .lp-mini{display:flex}
/* _36_1_24: real thumbnail image inside the tile (was an empty white box).
   `object-fit:cover` keeps the aspect-ratio centred even on wide pages. */
#lp .lp-mini-thumb{width:36px;height:50px;border:1px solid var(--border);border-radius:4px;background:var(--surface);position:relative;cursor:pointer;flex-shrink:0;overflow:hidden;transition:border-color .12s}
#lp .lp-mini-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#lp .lp-mini-thumb:hover{border-color:var(--accent)}
#lp .lp-mini-thumb.lp-mini-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#lp .lp-mini-thumb .lp-mini-dot{position:absolute;left:3px;bottom:3px;width:8px;height:8px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
#lp .lp-mini-thumb .lp-mini-dot.st-todo{background:#fbbf24}
#lp .lp-mini-thumb .lp-mini-dot.st-progress{background:#f59e0b}
#lp .lp-mini-thumb .lp-mini-dot.st-done{background:#22c55e}
#lp .lp-mini-thumb .lp-mini-dot.st-none{background:#94a3b8}
#lp .lpt{display:none}/* hide old mode label */
/* lpToggle re-enabled — rail removed */
/* #lpToggle display:none removed */
.acc-btn.aid-on{background:rgba(124,58,237,.22)!important;font-weight:700}
/* hide old lpResizer */
#lpResizer{display:none!important}
/* Library panel inner — show as flex column */
#lpIssues{display:flex!important;flex-direction:column;flex:1;min-height:0;border-top:none!important}
#lpIssuesList{flex:1;overflow-y:auto;padding:6px}
/* Page thumbnails: single column, centered */
.lpPageRow{border-left:none;flex-direction:column;padding:4px 4px;gap:2px;align-items:center;border-radius:6px;border:1px solid transparent;margin-bottom:4px;transition:all .12s}
.lpPageRow:hover{background:var(--s2);border-color:var(--border)}
.lpPageRow.cur{background:rgba(79,70,229,.07);border-color:rgba(79,70,229,.3)}
.lpPageRow .thumb{width:90px;height:66px;flex-shrink:0;border-radius:4px;overflow:hidden;background:var(--s2);border:1px solid var(--border);box-shadow:var(--shadow);position:relative}
/* Status indicator inside the thumb — bottom-left, matches libIssueStatusDot */
.lpPageRow .thumb .lpThumbStatus{position:absolute;bottom:4px;left:4px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.2);z-index:2}
.lpPageRow .thumb img{width:100%;height:100%;object-fit:cover}
.lpPageRow .info{width:100%;text-align:center}
.lpPageRow .pname{font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.lpPageRow .pstat{font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpPageRow .sdot{display:none}/* dot shown inline with status text */
/* Issue row in lib panel */
.lpIssueRow{padding:4px 8px;font-size:10px;border-left:none}
/* Mini header above the page list — replaces the multi-issue row UI now that
   the panel only shows the current issue. */
.lpIssueMini{padding:6px 10px;border-bottom:1px solid var(--border);background:var(--s2);display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text);font-weight:600}
.lpIssueMini .lab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpIssueMini .selall-wrap{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--dim);cursor:pointer;flex-shrink:0;font-weight:400}
.lpIssueMini .iss-selall{width:11px;height:11px;accent-color:var(--a2);cursor:pointer;margin:0}

/* ── CONTEXT PANEL (202px tool settings) ── */
#ctxPanel{width:202px;min-width:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .18s cubic-bezier(.4,0,.2,1)}
/* _36_1_22: collapsed = mini-strip with only the View visibility checkboxes,
   so visualisation knobs (Show Regions / Baselines / Polygons / Groups /
   Numbers) stay one click away even when the full Segmentation/OCR/Grouping
   panel is hidden. */
#ctxPanel.ctx-closed{width:54px}
#ctxPanel.ctx-closed > *:not(.ctx-mini){display:none !important}
#ctxPanel .ctx-mini{display:none;flex-direction:column;gap:8px;padding:8px 4px;align-items:center;font-size:9px;color:var(--dim);overflow-y:auto;flex:1;min-height:0}
#ctxPanel.ctx-closed .ctx-mini{display:flex}
#ctxPanel .ctx-mini-row{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;cursor:pointer;user-select:none;padding:3px 0;border-radius:4px;transition:background .1s}
#ctxPanel .ctx-mini-row:hover{background:rgba(148,163,184,.08)}
#ctxPanel .ctx-mini-row input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer}
#ctxPanel .ctx-mini-row span{font-size:8px;letter-spacing:.02em;text-align:center;line-height:1.1}
#ctxHdr{padding:9px 13px 7px;background:var(--s2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-shrink:0}
#ctxHdr .ctx-hdr-ico{font-size:14px}
#ctxHdr .ctx-hdr-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);flex:1}
/* Context panel inner width = 202px, does not shrink */
#ctxInner{width:202px;display:flex;flex-direction:column;flex:1;overflow:hidden}
/* _36_1_26: active mode panel takes remaining height and scrolls when its
   settings overflow. Header (#ctxHdr) and Visibility row (#ctxVisibility)
   stay pinned. min-height:0 is required for the flex child to actually
   honor overflow inside a column flex container. */
#segSec, #ocrSec, #groupingSec, #strPanel, #exportSec{flex:1 1 auto;min-height:0;overflow-y:auto}
#ctxVisibility{flex-shrink:0}

/* propsSec restyled for ctx panel */
#propsSec{padding:10px 13px 10px!important;background:transparent!important;border-bottom:none!important;gap:8px!important}
#propsSec .lbl{font-size:9px}
/* orgPanel restyled for ctx panel */
#orgPanel{padding:10px 13px!important;background:transparent!important;border-bottom:none!important;gap:7px!important}

/* Context section: visibility + extras in ctx panel */
#ctxVrExtra{padding:8px 13px;display:none;flex-direction:column;gap:6px;border-top:1px solid var(--border)}
.ctx-sec-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:600;margin-bottom:2px}
.ctx-vis-row{display:flex;align-items:center;gap:6px;padding:2px 0}
.ctx-vis-row .btn{height:24px;font-size:10px;padding:0 7px;flex:1;justify-content:center}
.ctx-vis-row .btn:disabled{opacity:.35;cursor:default;pointer-events:none}
/* Brush/eraser row in ctx */
.ctx-tool-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ctx-tool-row .lbl{width:46px}
/* Verifier sliders */
#ctxVrExtra .vr-range-row{margin-bottom:8px}
#ctxVrExtra .vr-range-row .vr-range-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:3px}

/* ── CONTEXT STRIP (9px toggle) ── */
#ctxStrip{width:9px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--border);border-right:1px solid var(--border);transition:background .1s;user-select:none}
#ctxStrip:hover{background:var(--s2);color:var(--text)}
#ctxStrip span{font-size:8px;color:var(--dim);writing-mode:vertical-rl}

/* ── FLOATING BOTTOM TOOLBAR (Figma-style pill) ── */
#floatBar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1px;background:rgba(255,255,255,.97);border:1px solid var(--border);border-radius:12px;padding:4px 6px;box-shadow:0 4px 24px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);backdrop-filter:blur(10px);z-index:10;user-select:none}
.ftool{width:32px;height:32px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:#4b5563;font-size:15px;font-family:'Inter',sans-serif;font-weight:400;transition:all .1s;position:relative;flex-shrink:0}
.ftool:hover{background:#f3f4f6;color:#111827}
.ftool:disabled{opacity:.35;cursor:not-allowed}
.ftool.ft-on{background:rgba(79,70,229,.09);color:#4f46e5;outline:2px solid rgba(79,70,229,.25);outline-offset:1px;font-weight:700}
.ftool.ft-on2{background:rgba(22,163,74,.09);color:#16a34a;outline:2px solid rgba(22,163,74,.25);outline-offset:1px;font-weight:700}
.ftool.ft-on3{background:rgba(219,39,119,.09);color:#db2777;outline:2px solid rgba(219,39,119,.25);outline-offset:1px;font-weight:700}
.ftool.ft-onp{background:rgba(8,145,178,.09);color:#0891b2;outline:2px solid rgba(8,145,178,.25);outline-offset:1px;font-weight:700}
.ftool.ft-org{color:#7c3aed}
.ftool.ft-org.ft-on{background:rgba(124,58,237,.09);color:#7c3aed;outline-color:rgba(124,58,237,.25)}
.ftool.ft-aid{color:#a855f7}
.ftool.ft-aid.ft-on{background:rgba(168,85,247,.09);color:#a855f7;outline:2px solid rgba(168,85,247,.25);outline-offset:1px;font-weight:700}
/* Straighten (deskew) tool — teal accent */
.ftool.ft-str{color:#0d9488}
.ftool.ft-str.ft-on{background:rgba(13,148,136,.09);color:#0d9488;outline:2px solid rgba(13,148,136,.25);outline-offset:1px;font-weight:700}
/* Scans Prep toolbar button active state */
.acc-btn.sp-active{background:rgba(13,148,136,.22)!important;font-weight:700}
.acc-cfg.sp-active{background:rgba(13,148,136,.22)!important}
.ftool.ft-warn{color:#dc2626}
.ftool.ft-warn.ft-active{background:rgba(220,38,38,.09);color:#dc2626}
.ftool.ft-del{color:#dc2626}
.fsep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
/* Brush/Eraser tool wrap: button + chevron-config + popover-above */
.ftool-wrap{display:inline-flex;align-items:center;position:relative;gap:1px}
.ftool-cfg{width:14px;height:22px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--dim);cursor:pointer;font-size:8px;padding:0;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all .12s}
.ftool-cfg:hover{color:var(--text);background:rgba(0,0,0,.04)}
.fb-pop{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px;box-shadow:0 4px 12px rgba(0,0,0,.16);z-index:60;flex-direction:column;gap:6px;min-width:130px;font-family:inherit}
.fb-pop-hdr{display:flex;align-items:center;gap:6px}
.fb-pop-title{font-size:10px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.06em;flex:1}
.fb-pop-x{background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.fb-pop-row{display:flex;align-items:center;gap:6px}
/* Tooltip on ftool */
.ftool-tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#111827;color:#fff;border-radius:5px;padding:3px 8px;font-size:10px;white-space:nowrap;pointer-events:none;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.2);font-family:'Inter',sans-serif}
.ftool-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#111827}

/* ── STATUS BAR ── */
#statusBar{height:22px;background:var(--s2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:14px;flex-shrink:0}
#statusBar .sb-item{font-size:9px;color:var(--dim);font-family:'JetBrains Mono',monospace;white-space:nowrap;display:flex;align-items:center;gap:4px}
#statusBar .sb-item .sb-val{color:#4f46e5;font-weight:700}
#statusBar .sb-file{color:var(--dim);font-size:9px;font-family:'JetBrains Mono',monospace;margin-left:auto}

/* ── HIDE OLD LEFT PANEL MODE BUTTONS AND SPACER ── */
#lpSpacer{display:none!important}
/* Hide the old mode section label (.lpt) inside #lp */
#lp > .lpt{display:none}
#lp > .mb{display:none}

/* ── rpOrgCtrl still in right panel ── */
#rpOrgCtrl{display:flex}

/* ── Mode badge on canvas ── */
#modeBadge{position:absolute;bottom:62px;left:12px;background:rgba(15,18,32,.72);color:#e2e8f0;border-radius:6px;padding:4px 10px;font-size:10px;font-family:'JetBrains Mono',monospace;backdrop-filter:blur(6px);letter-spacing:.04em;pointer-events:none;z-index:5}

/* ── Override mono font only for data fields ── */
.pta,.vr-ta,.vt-input,.di,.cfg-inp,.tbnum{font-family:'JetBrains Mono',monospace!important}
.prns,.prn,.pln{font-family:'Inter',sans-serif}
#rph,#rpl{font-family:'Inter',sans-serif}
.pr,.prh{font-family:'Inter',sans-serif}

/* ════════════════════════════════════════════════════════════════════════
   AUTH VIEW (v0.5.34 / _36_1_87) — full-screen split for unauthenticated
   users. Brand pane on the left, form panel on the right. Body class
   `authActive` hides the main app entirely so the splash + form take over.
   ════════════════════════════════════════════════════════════════════════ */
#authView{position:fixed;inset:0;z-index:9999;background:#f7f8fa;display:none;font-family:'Inter',sans-serif;color:#0f172a}
#authView.on{display:flex}
body.authActive #tb,
body.authActive #wrap,
body.authActive #libOverlay,
body.authActive #settingsOverlay,
body.authActive #cfgDlg,
body.authActive #aidCfgDlg,
body.authActive #segCfgDlg{display:none!important}
.authBrand{flex:1 1 50%;background:linear-gradient(135deg,#1e293b 0%,#0b1220 100%);color:#e2e8f0;display:flex;align-items:center;justify-content:center;padding:48px 56px;position:relative;overflow:hidden}
.authBrand::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(56,189,248,.16) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(16,185,129,.12) 0%,transparent 55%);pointer-events:none}
.authBrandInner{max-width:520px;position:relative;z-index:1}
.authBrandLogo{display:inline-flex;align-items:center;gap:12px;margin-bottom:48px;font-size:18px;font-weight:600;letter-spacing:-0.01em;color:#f1f5f9}
.authBrandLogoIcon{width:32px;height:32px;border-radius:7px;background:linear-gradient(135deg,#22d3ee 0%,#3b82f6 100%);display:inline-flex;align-items:center;justify-content:center;color:#0f172a;font-weight:800;font-size:16px}
.authBrandTitle{font-size:44px;font-weight:700;letter-spacing:-0.025em;margin-bottom:20px;line-height:1.1;color:#f8fafc}
.authBrandTagline{font-size:22px;line-height:1.45;font-weight:300;color:#cbd5e1;max-width:460px}
.authBrandFootnote{position:absolute;bottom:24px;left:56px;font-size:11px;color:#64748b;z-index:1}
.authFormPane{flex:1 1 50%;display:flex;align-items:center;justify-content:center;padding:48px;background:#ffffff;overflow-y:auto}
.authPanel{width:100%;max-width:380px}
.authPanel[hidden]{display:none!important}
.authTitle{margin:0 0 8px;font-size:26px;font-weight:600;color:#0f172a;letter-spacing:-0.02em}
.authIntro{margin:0 0 24px;font-size:14px;color:#475569;line-height:1.55}
.authIntro code{background:#f1f5f9;padding:1px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#0f172a}
.authForm{display:flex;flex-direction:column;gap:16px}
.authForm[hidden]{display:none!important}
.authLabel{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#334155;font-weight:500}
.authInput{height:42px;padding:0 14px;border:1px solid #cbd5e1;border-radius:7px;font-size:14px;font-family:'Inter',sans-serif;background:#fff;color:#0f172a;outline:none;transition:border-color .15s,box-shadow .15s}
.authInput:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.authInput:disabled{background:#f1f5f9;cursor:not-allowed}
.authCheck{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569;cursor:pointer;user-select:none}
.authCheck input{margin:0;cursor:pointer}
.authBtn{height:42px;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,opacity .15s,transform .05s;letter-spacing:-0.005em}
.authBtnPrimary{background:#2563eb;color:#fff}
.authBtnPrimary:hover{background:#1d4ed8}
.authBtnPrimary:active{transform:translateY(1px)}
.authBtnPrimary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.authMsg{font-size:13px;min-height:18px;line-height:1.4;color:#475569}
.authMsg.authError{color:#dc2626}
.authMsg.authSuccess{color:#059669}
.authLinkRow{display:flex;justify-content:center;margin-top:4px;font-size:13px;gap:16px}
.authLink{color:#2563eb;text-decoration:none;cursor:pointer}
.authLink:hover{text-decoration:underline}
.authDivider{height:1px;background:#e2e8f0;margin:8px 0}
/* Stack on small screens — brand pane shrinks to a header strip */
@media (max-width:860px){
  #authView{flex-direction:column}
  .authBrand{flex:0 0 auto;padding:32px 28px;min-height:180px}
  .authBrandLogo{margin-bottom:18px}
  .authBrandTitle{font-size:30px;margin-bottom:10px}
  .authBrandTagline{font-size:16px;line-height:1.4}
  .authBrandFootnote{position:static;margin-top:18px;color:#94a3b8}
  .authFormPane{flex:1 1 auto;padding:36px 28px}
}

/* ── Verify-email banner (v0.5.36 / _36_1_88) ──
   Amber strip below the toolbar, shown only while the active user has
   email_verified_at === NULL. Triggers off `body.unverified`. */
#verifyBanner{display:none;align-items:center;gap:12px;padding:10px 16px;background:#fef3c7;color:#78350f;border-bottom:1px solid #f59e0b;font-size:13px;font-family:'Inter',sans-serif;flex-shrink:0}
body.unverified #verifyBanner{display:flex}
body.authActive #verifyBanner{display:none!important}
.verifyBanner__ico{font-size:16px}
.verifyBanner__msg{flex:1;line-height:1.4}
.verifyBanner__msg code{background:rgba(120,53,15,.12);padding:1px 6px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:12px}
.verifyBanner__btn{height:28px;padding:0 12px;border:1px solid #92400e;border-radius:4px;background:#fff;color:#78350f;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .12s}
.verifyBanner__btn:hover:not(:disabled){background:#fef3c7}
.verifyBanner__btn:disabled{opacity:.6;cursor:not-allowed}
.verifyBanner__status{font-size:12px;color:#78350f;min-width:120px}
.verifyBanner__status.ok{color:#065f46}
.verifyBanner__status.err{color:#991b1b}

/* ── Block 2 (auth, admin, queue, settings overlays) ───────────── */
/* ── LIBRARY MODAL ── */
.libOverlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.libOverlay.on{display:flex}
.libWin{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:min(1500px,96vw);height:min(86vh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.18)}
.libHead{padding:14px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;background:var(--s2)}
.libHeadIco{width:32px;height:32px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--poly)}
.libHeadT{flex:1;min-width:0}
.libHeadT h2{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.libHeadT p{margin:2px 0 0;font-size:11px;color:var(--dim)}
.libHeadAct{display:flex;gap:6px;align-items:center}
.libX{background:var(--bg);border:1px solid var(--border);color:var(--dim);width:30px;height:30px;border-radius:6px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.libX:hover{color:var(--text);border-color:var(--accent)}
.libBody{flex:1;display:flex;overflow:hidden;min-height:0}
.libSide{width:280px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.libSideH{padding:10px 16px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.libNpList{padding:0 8px}
.libNpScroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.libNpItem{display:flex;gap:10px;padding:10px;border-radius:8px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:all .12s;align-items:flex-start}
.libNpItem:hover{background:var(--bg)}
.libNpItem.sel{background:rgba(79,70,229,.06);border-color:var(--a2)}
.libNpIco{width:26px;height:26px;border-radius:5px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:var(--dim)}
.libNpT{flex:1;min-width:0}
.libNpName{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libNpSub{font-size:9px;color:var(--dim);margin-top:2px}
.libNpMeta{font-size:9px;color:var(--dim);margin-top:3px;font-family:inherit}
.libNpAdd{padding:10px;margin:8px;border:1px dashed var(--border);border-radius:8px;text-align:center;cursor:pointer;color:var(--dim);font-size:11px;transition:all .12s}
.libNpAdd:hover{border-color:var(--a2);color:var(--a2)}
/* User-info chip at the bottom of the Library left panel: avatar + email
   + Settings button. Single source of profile context for the user; the
   button calls Router.navigate('/settings/...') and the router catches it. */
.libUserChip{display:flex;align-items:center;gap:8px;padding:9px 10px;margin:4px 8px 8px;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.02);transition:background .12s}
.libUserChip:hover{background:rgba(34,211,238,.06)}
.libUserAvatar{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.libUserBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.libUserEmail{font-size:11px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libUserSettingsBtn{align-self:flex-start;background:none;border:none;color:var(--dim);font-size:10px;cursor:pointer;padding:0;font-family:inherit;text-transform:none;letter-spacing:0;transition:color .12s}
.libUserSettingsBtn:hover{color:#22d3ee}

/* Settings overlay — fullscreen modal with sidebar tabs + scrollable
   right pane. Opened via route /settings (and any sub-route under it).
   Mirrors the existing libOverlay pattern so the visual language is shared. */
#settingsOverlay{position:fixed;inset:0;background:var(--bg);z-index:3000;display:none;flex-direction:column;font-family:'Inter',sans-serif}
#settingsOverlay.visible{display:flex}
/* Global-admin panel — reuses .settingsHdr / .settingsSide / .settingsMain
   scaffolding via shared classes. _36_1_93 / Stage 8. */
#adminOverlay{position:fixed;inset:0;background:var(--bg);z-index:3000;display:none;flex-direction:column;font-family:'Inter',sans-serif}
#adminOverlay.visible{display:flex}
/* Impersonation banner: persistent, top of viewport, above all overlays
   (incl. settings/admin which sit at z-index 3000). */
#impersonationBanner{position:fixed;top:0;left:0;right:0;z-index:4000;background:#f59e0b;color:#78350f;border-bottom:1px solid #d97706;padding:6px 14px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600}
#impersonationBanner[hidden]{display:none}
.impBannerInner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px}
.impBannerIcon{font-size:14px}
#bImpStop{margin-left:auto;background:#78350f;color:#fde68a;border:none;padding:4px 12px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
#bImpStop:hover{background:#451a03}
/* Admin Users / Orgs tables. */
.admList{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);font-size:12px}
/* Users-table columns: email | org(s) | status | created | actions. The
   actions column auto-fits whatever buttons are present (Impersonate /
   Make admin / Delete / Restore) so nothing gets clipped on the right. */
.admListHdr{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(180px,1fr) 110px 100px minmax(220px,auto);gap:10px;padding:10px 14px;background:rgba(0,0,0,.03);border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.admListRow{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(180px,1fr) 110px 100px minmax(220px,auto);gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);align-items:center}
.admOrgCell{display:flex;flex-direction:column;gap:1px;min-width:0}
.admOrgName{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admOrgSlug{font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admOrgMore{font-size:10px;color:var(--dim);font-style:italic}
.admListRow:last-child{border-bottom:none}
.admListRow:hover{background:rgba(34,211,238,.04)}
.admListRow.deleted{opacity:.55}
.admBadge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.admBadgeAdmin{background:#fef3c7;color:#78350f}
.admBadgeVerified{background:rgba(34,211,238,.18);color:#0e7490}
.admBadgeDeleted{background:#fee2e2;color:#991b1b}
.admActions{display:flex;gap:6px}
.admBtn{padding:4px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.admBtn:hover{border-color:#22d3ee;color:#0e7490}
.admBtn:disabled{opacity:.4;cursor:not-allowed}
.admBtnDanger{color:#dc2626;border-color:rgba(220,38,38,.3)}
.admBtnDanger:hover{background:#fef2f2;border-color:#dc2626;color:#dc2626}
.admSearch{display:flex;gap:10px;margin-bottom:14px;align-items:center}
.admSearch input{flex:1;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text);font-family:inherit;font-size:12px}
.admEmpty{padding:20px;text-align:center;color:var(--dim);font-style:italic;font-size:12px}
/* Stage 12b — Credits / Pricing / System Settings admin tabs. */
.admSub{margin:0 0 14px 0;font-size:11px;color:var(--dim);line-height:1.45}
.admSub code{background:rgba(34,211,238,.08);padding:1px 5px;border-radius:3px;font-size:10px;color:#0e7490;font-family:'JetBrains Mono',monospace}
.admGroupH{margin:18px 0 8px 0;font-size:11px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.admBalance{font-family:'JetBrains Mono',monospace;font-weight:700;color:#16a34a;font-size:13px}
.admBalanceZero{color:#dc2626}
.admPriceCell{font-family:'JetBrains Mono',monospace}
.admPriceVal{font-weight:700;color:var(--text)}
.admPriceInput,.admSettingInput{width:90%;padding:3px 7px;border:1px solid #22d3ee;border-radius:4px;background:#fff;color:var(--text);font-family:inherit;font-size:12px}
.admBtnPri{background:#22d3ee;color:#0f0f13;border-color:#22d3ee;font-weight:700}
.admBtnPri:hover{background:#0e7490;color:#fff;border-color:#0e7490}
.admBtnPri:disabled{opacity:.5}
/* Expanded org-detail panel under a Credits-tab row. */
.admDetailBlock{padding:14px 18px 18px;background:rgba(34,211,238,.04);border-bottom:1px solid var(--border)}
.admDetailH{font-size:11px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.admDetailTbl{width:100%;border-collapse:collapse;font-size:11px;background:var(--surface);border:1px solid var(--border);border-radius:5px;overflow:hidden}
.admDetailTbl th{background:rgba(0,0,0,.04);padding:6px 9px;text-align:left;font-weight:600;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.admDetailTbl td{padding:5px 9px;border-bottom:1px solid var(--border);vertical-align:top}
.admDetailTbl tr:last-child td{border-bottom:none}
/* Grant-credits modal. */
.admModalBackdrop{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.admModal{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:22px 24px;min-width:380px;max-width:480px;box-shadow:0 24px 64px rgba(0,0,0,.55);font-family:inherit}
.admModalH{margin:0 0 6px 0;font-size:14px;font-weight:700;color:var(--text)}
.admModalSub{font-size:12px;color:var(--dim);margin-bottom:14px}
.admField{display:flex;flex-direction:column;gap:4px;margin-bottom:11px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.admField input[type=text],.admField input[type=date]{height:30px;padding:0 9px;border:1px solid var(--border);border-radius:5px;background:#fff;color:var(--text);font-family:inherit;font-size:12px;text-transform:none;letter-spacing:normal;font-weight:normal}
.admField input[type=text]:focus,.admField input[type=date]:focus{border-color:#22d3ee;outline:none}
.admFieldset{border:1px solid var(--border);border-radius:6px;padding:8px 11px;margin-bottom:11px}
.admFieldset legend{font-size:10px;color:var(--dim);padding:0 5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.admRadioRow{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;text-transform:none;letter-spacing:normal;font-weight:normal;font-size:12px;color:var(--text)}
.admRadioRow label{display:flex;align-items:center;gap:4px;cursor:pointer}
.admRadioRow input[type=date]{height:26px;font-size:11px;padding:0 7px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text);font-family:inherit}
.admRadioRow input[type=date]:disabled{opacity:.4;cursor:not-allowed}
.admModalErr{min-height:16px;font-size:11px;color:#dc2626;margin-bottom:9px;font-weight:500}
.admModalBtns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.admSettingValCell{font-size:12px;color:var(--text)}
.settingsHdr{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.settingsHdr h2{margin:0;font-size:16px;font-weight:700;color:var(--text);flex:1}
.settingsHdrCloseBtn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text);padding:5px 12px;font-size:11px;cursor:pointer;font-family:inherit}
.settingsHdrCloseBtn:hover{border-color:var(--a2);color:var(--a2)}
.settingsBody{flex:1;display:flex;min-height:0;overflow:hidden}
.settingsSide{width:200px;border-right:1px solid var(--border);background:rgba(0,0,0,.02);padding:14px 0;flex-shrink:0;display:flex;flex-direction:column}
.settingsTab{display:flex;align-items:center;gap:9px;padding:9px 18px;cursor:pointer;color:var(--text);font-size:12px;border:none;background:none;text-align:left;font-family:inherit;transition:background .12s}
.settingsTab:hover{background:rgba(34,211,238,.08)}
.settingsTab.active{background:rgba(34,211,238,.14);color:#0e7490;font-weight:600;border-left:3px solid #22d3ee;padding-left:15px}
.settingsTab[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.settingsTab .soon{font-size:9px;color:var(--dim);margin-left:auto;text-transform:uppercase;letter-spacing:.06em}
.settingsMain{flex:1;overflow-y:auto;padding:22px 28px;background:var(--bg)}
.settingsSectionH{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--text)}
/* Members tab (v0.5.38 / _36_1_90) */
.memInviteCard{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:18px}
.memInviteCard h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--text)}
.memInviteForm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.memInviteForm input[type="email"]{flex:1;min-width:180px;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text)}
.memInviteForm select{height:30px;padding:0 8px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text)}
.memInviteForm button{height:30px;padding:0 14px;border:none;border-radius:5px;background:var(--a2);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
.memInviteForm button:hover:not(:disabled){background:#4338ca}
.memInviteForm button:disabled{opacity:.6;cursor:not-allowed}
.memInviteStatus{font-size:12px;color:var(--dim);margin-top:8px;min-height:16px}
.memInviteStatus.ok{color:#065f46}
.memInviteStatus.err{color:#dc2626}
.memTable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:12px}
.memTable th{background:rgba(0,0,0,.03);text-align:left;padding:8px 14px;font-weight:600;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.memTable td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.memTable tr:last-child td{border-bottom:none}
.memTable tr.self td{background:rgba(34,211,238,.05)}
.memRoleSelect{height:26px;padding:0 6px;border:1px solid var(--border);border-radius:4px;font-size:11px;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text)}
.memActionBtn{height:26px;padding:0 10px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);font-size:11px;cursor:pointer;font-family:'Inter',sans-serif;margin-left:6px}
.memActionBtn:hover{border-color:#dc2626;color:#dc2626}
.memActionBtn:disabled{opacity:.45;cursor:not-allowed}
.memActionBtn.del{color:#dc2626;border-color:#fecaca}
.memActionBtn.del:hover{background:#fef2f2;border-color:#dc2626}
.memTime{color:var(--dim);font-size:11px}
.memInvitesList{margin-top:24px}
.memInviteRow{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:6px;margin-bottom:6px;font-size:12px}
.memInviteRow .em{flex:1}
.memInviteRow .rl{padding:1px 8px;background:rgba(34,211,238,.12);color:#0e7490;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.memInviteRow .exp{font-size:11px;color:var(--dim)}
.memReadOnly{padding:12px 14px;background:#fef3c7;border:1px solid #f59e0b;border-radius:7px;color:#78350f;font-size:12px;line-height:1.5}
/* Settings → Security tab (_36_1_92 / v0.5.44 — Stage 7). */
.secCard{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:18px}
.secCard h4{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--text)}
.secHint{margin:0 0 12px;font-size:11px;color:var(--dim);line-height:1.5}
.secSessList{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.secSessRow{display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,.02);border:1px solid var(--border);border-radius:6px;font-size:12px}
.secSessMeta{flex:1;min-width:0}
.secSessLine{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secSessSub{font-size:10px;color:var(--dim);margin-top:2px}
.secTag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-left:6px}
.secTagCurrent{background:rgba(34,211,238,.18);color:#0e7490}
.secSessFooter{display:flex;justify-content:flex-end}
.secEmpty{padding:14px;text-align:center;color:var(--dim);font-size:12px;font-style:italic}
.secForm{display:flex;flex-direction:column;gap:10px}
.secForm label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.secForm input{height:30px;padding:0 10px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text);font-family:inherit;font-size:12px;text-transform:none;letter-spacing:0;font-weight:400}
.secForm input:focus{border-color:#22d3ee;outline:none}
.secFormRow{display:flex;align-items:center;gap:12px;margin-top:4px}
.secFormMsg{font-size:11px}
.secBtn{padding:6px 14px;border:1px solid #22d3ee;background:#22d3ee;color:#0f0f13;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer}
.secBtn:hover{background:#06b6d4;border-color:#06b6d4}
.secBtn:disabled{opacity:.5;cursor:not-allowed}
.secBtnGhost{background:transparent;color:var(--text);border-color:var(--border)}
.secBtnGhost:hover{background:rgba(0,0,0,.04);border-color:var(--dim)}
.secBtnDanger{color:#dc2626;border-color:rgba(220,38,38,.4)}
.secBtnDanger:hover{background:#fef2f2;border-color:#dc2626}
.settingsToolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.settingsToolbar select{height:28px;padding:0 8px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text);font-family:inherit;font-size:11px}
.actList{display:flex;flex-direction:column;gap:0}
.actDateHdr{padding:10px 0 6px;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-weight:700;border-bottom:1px solid var(--border);margin-bottom:6px}
.actRow{padding:10px 12px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:start;font-size:12px}
.actRow:hover{background:rgba(34,211,238,.04)}
.actTime{font-family:'JetBrains Mono',monospace;color:var(--dim);font-size:11px}
.actBody{min-width:0}
.actAction{font-weight:600;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.01em}
.actAction.ok{color:#16a34a}
.actAction.fail{color:#dc2626}
.actAction.neutral{color:var(--text)}
.actTarget{font-size:11px;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actUsage{font-size:10px;color:var(--dim);margin-top:3px;font-family:'JetBrains Mono',monospace}
.actUsage .num{color:var(--text);font-weight:600}
.actLoadMore{padding:12px;text-align:center;cursor:pointer;color:var(--dim);font-size:11px;border:1px dashed var(--border);border-radius:6px;margin:14px 0;background:none;width:100%;font-family:inherit}
.actLoadMore:hover{border-color:var(--a2);color:var(--a2)}
.actEmpty{padding:40px;text-align:center;color:var(--dim);font-size:12px}

/* Left-panel filter input — instant case-insensitive substring match. */
.libNpFilterWrap{padding:4px 10px 8px}
.libNpFilter{width:100%;height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:11px;outline:none;transition:border-color .12s;box-sizing:border-box}
.libNpFilter:focus{border-color:var(--a2)}
.libNpFilter::placeholder{color:var(--dim)}

/* Recent section header — distinct from the main "All" header. */
.libRecentH{padding:6px 16px 2px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);display:flex;align-items:center;gap:6px}
.libRecentH .dot{width:5px;height:5px;border-radius:50%;background:var(--a2)}
.libRecentList{padding:0 8px 8px}
.libRecentList:empty{display:none}
/* Stronger separator between Recent and All — labelled rule, not just a hairline */
.libAllSep{display:flex;align-items:center;gap:8px;margin:6px 12px 4px;font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:600}
.libAllSep::before,.libAllSep::after{content:'';flex:1;height:1px;background:var(--border)}

/* Cover thumbnail in compact card — replaces the emoji icon for newspapers
   that have at least one page. Aspect ratio mimics a newspaper portrait. */
.libNpIco.cover{width:36px;height:48px;padding:0;overflow:hidden}
.libNpIco.cover img{width:100%;height:100%;object-fit:cover;display:block}

/* "View ALL newspapers" button — bottom of the left panel.
   The .on state mirrors the active library-mode look so users can see the
   button is currently engaged (right panel showing the grid). */
.libNpViewAll{margin:6px 8px 0;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .12s}
.libNpViewAll:hover{border-color:var(--a2);color:var(--a2)}
.libNpViewAll.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* View ALL grid view — alphabet jumper, filters, cards. */
.libAllHead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.libAlphaBar{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.libAlphaBtn{height:26px;min-width:26px;padding:0 6px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:all .1s;display:flex;align-items:center;justify-content:center}
.libAlphaBtn:hover{border-color:var(--a2);color:var(--a2)}
.libAlphaBtn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.libAlphaBtn.all{padding:0 12px}
.libYearWrap{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--dim)}
.libYearWrap input{width:64px;height:26px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-family:inherit;font-size:11px;outline:none}
.libYearWrap input:focus{border-color:var(--a2)}
.libSortSel{height:26px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-family:inherit;font-size:11px;cursor:pointer;outline:none}
.libSortSel:focus{border-color:var(--a2)}
.libGridCount{font-size:11px;color:var(--dim);white-space:nowrap}

.libAllGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.libAllCard{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .12s;display:flex;flex-direction:column}
.libAllCard:hover{border-color:var(--a2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.libAllCardCover{aspect-ratio:3/4;background:var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:32px;border-bottom:1px solid var(--border)}
.libAllCardCover img{width:100%;height:100%;object-fit:cover;display:block}
.libAllCardBody{padding:10px 12px}
.libAllCardName{font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libAllCardSub{font-size:10px;color:var(--dim);margin-top:3px}
.libAllPager{margin:24px 0;display:flex;justify-content:center}
.libAllPagerBtn{height:32px;padding:0 16px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-family:inherit;font-size:11px;cursor:pointer}
.libAllPagerBtn:hover{border-color:var(--a2);color:var(--a2)}
.libAllEmpty{text-align:center;padding:48px 0;color:var(--dim);font-size:12px}

/* Year ribbon + year-grouped issue sections — Step 4 of the Media Library
   redesign. The ribbon sits above the grid; clicking a year scrolls to its
   section. Sections are collapsible so a newspaper with decades of data
   stays scannable. */
.libYearRibbon{display:flex;gap:4px;flex-wrap:wrap;padding:0 0 18px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.libYearChip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:all .12s;white-space:nowrap}
.libYearChip:hover{border-color:var(--a2);color:var(--a2)}
.libYearChip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.libYearChip .ct{font-size:9px;color:var(--dim);font-weight:500;background:var(--bg);padding:1px 6px;border-radius:6px;min-width:16px;text-align:center}
.libYearChip.on .ct{background:rgba(255,255,255,.18);color:rgba(255,255,255,.9)}

.libYearGroup{margin:22px 0 12px}
.libYearGroup:first-of-type{margin-top:8px}
.libYearGroupH{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:6px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.libYearGroupH .chev{font-size:9px;color:var(--dim);transition:transform .14s;width:10px;text-align:center}
.libYearGroup.collapsed .libYearGroupH .chev{transform:rotate(-90deg)}
.libYearGroupH h4{margin:0;font-size:13px;font-weight:700;color:var(--text);letter-spacing:.03em}
.libYearGroupH .ct{font-size:10px;color:var(--dim);font-weight:500}
.libYearGroup.collapsed .libIssuesGrid{display:none}
.libMain{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.libMainH{padding:14px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border)}
.libMainHT{flex:1;min-width:0}
.libMainHT h3{margin:0;font-size:14px;font-weight:700;color:var(--text)}
.libMainHT p{margin:2px 0 0;font-size:10px;color:var(--dim)}
/* _36_1_38: breadcrumbs inside the big page title (vcl-h1, 28px serif).
   Inherit the parent typography so "ALL › Aachener Anzeiger" reads at the
   same weight/size as "All newspapers" on the View ALL page — the chips
   only differ by color (dim for parents, default for current). */
#libMainTitle .libCrumb{font:inherit;color:var(--dim);cursor:pointer;transition:color .12s,text-decoration-color .12s;text-decoration:underline transparent}
#libMainTitle .libCrumb:hover{color:var(--accent);text-decoration-color:currentColor}
#libMainTitle .libCrumbSep{font:inherit;font-weight:400;color:var(--dim);margin:0 8px;opacity:.55}
/* Breadcrumb in the right-panel title: "ALL › Newspaper Name". Same font
   family and size as the title itself — distinguished only by weight and
   color so the ancestor reads as a dim ancestor link, not a separate tag. */
.libMainHT h3 .libCrumb{font:inherit;font-weight:600;color:var(--dim);cursor:pointer;transition:color .12s}
.libMainHT h3 .libCrumb:hover{color:var(--a2);text-decoration:underline}
.libMainHT h3 .libCrumbSep{font:inherit;font-weight:400;color:var(--dim);margin:0 6px}
.libFilters{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.libFilt{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--border);background:var(--bg);color:var(--dim);cursor:pointer;font-family:inherit;font-size:10px;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:all .12s}
.libFilt:hover{border-color:var(--accent);color:var(--text)}
.libFilt.on{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:700}
.libFilt .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.libFilt .dot.to_do{background:#64748b}
.libFilt .dot.in_progress{background:#f59e0b}
.libFilt .dot.done{background:#6ee7b7}
.libViewTog{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px}
.libViewTog button{width:28px;height:22px;border:0;border-radius:4px;background:transparent;color:var(--dim);cursor:pointer;font-family:inherit;font-size:12px;display:flex;align-items:center;justify-content:center}
.libViewTog button.on{background:var(--s2);color:var(--text)}
.libMainBody{flex:1;overflow:auto;padding:18px 22px;background:var(--bg)}
.libIssuesGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.libIssueCard{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .12s;display:flex;flex-direction:column}
.libIssueCard:hover{border-color:var(--a2);transform:translateY(-2px)}
.libIssueCardTop{position:relative;aspect-ratio:3/4;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.libIssueCardTop img{width:100%;height:100%;object-fit:cover}
.libIssueCardTop .pageCount{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:10px;padding:3px 8px;border-radius:10px;font-weight:600}
.libIssueCardTop .emptyMark{color:var(--dim);font-size:11px}
/* Status indicator on the issue thumbnail — bottom-left, mirrors the
   pageCount badge in the bottom-right. White ring + soft shadow keep it
   visible on both pale and dark cover images. */
.libIssueCardTop .libIssueStatusDot{position:absolute;bottom:8px;left:8px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.2);z-index:3}
/* _36_1_38: page-card "p.N" badge — sits right next to the status dot in
   the bottom-left of the thumb. Tight pill so a 3-digit ordinal still
   leaves room for the Edit button to the right. */
.libIssueCardTop .libPageNum{position:absolute;bottom:6px;left:26px;height:18px;display:flex;align-items:center;padding:0 7px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;font-weight:600;border-radius:9px;letter-spacing:.02em;backdrop-filter:blur(2px);z-index:2}
/* _36_1_38: page-card Edit pill — like the issue-card variant, but with
   no gear on the right so the pill extends to the right edge. The "left"
   offset clears the status-dot + "p.N" badge cluster. */
.libPageCard .libIssueCardTop .libIssueCardEdit{position:absolute;bottom:6px;left:80px;right:6px;height:24px;border-radius:6px;border:1px solid var(--border);background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:5px;backdrop-filter:blur(2px);z-index:2;transition:background .12s,border-color .12s}
.libPageCard .libIssueCardTop .libIssueCardEdit:hover{background:rgba(99,179,237,.85);border-color:var(--a2)}
.libIssueCardBody{padding:10px 12px}
.libIssueTitle{font-size:12px;font-weight:700;color:var(--text);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.libIssueTitle .num{color:var(--accent)}
.libIssueTitle .date{color:var(--dim);font-weight:400;font-size:11px}
/* v0.5.13 / _36_1_62: orange "draft" badge for issues with is_draft=true.
   Set by the new chunked-upload flow on placeholder issues that still
   need a real date / number; cleared automatically when the user adds a
   date via Edit. Sized to sit inline with the title row. */
.libIssueDraftBadge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;background:rgba(251,146,60,.18);color:#fb923c;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid rgba(251,146,60,.35)}
/* _36_1_65: solid orange overlay strip across the bottom of a draft
   issue's thumbnail. Layered under the bottom-row buttons (Edit / ⚙ /
   status dot — those sit at z-index:2-3 in .libIssueCardTop) so the
   user can still click them; the strip occupies the space behind them
   and the rest of the thumbnail width. Used by _makeIssueCard when
   iss.is_draft is true. */
.libIssueDraftOverlay{position:absolute;left:0;right:0;bottom:38px;height:24px;background:rgba(251,146,60,.92);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.25)}
/* _36_1_65: dedicated "Unsorted Drafts" section docked above the main
   issues grid in renderIssues. Mirrors the visual treatment of the
   legacy inbox strip at the bottom but uses full-size libIssueCards. */
.libDraftsSection{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.libDraftsSectionH{font-size:11px;color:var(--dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.libDraftsSectionH .ct{color:#fb923c;font-weight:700}
/* _36_1_75: phantom-section uses the same libDraftsSection shell but
   gets a stronger visual treatment — cyan left-border + slightly
   larger heading — so an in-flight upload draws the eye even on a
   newspaper that has many existing drafts/issues above the fold. */
#libPhantomSection .libDraftsSection{
  border-left:3px solid #38bdf8;
  background:rgba(56,189,248,.05);
  padding:8px 0 18px 14px;
  border-radius:0 8px 8px 0;
  margin-bottom:24px;
}
#libPhantomSection .libDraftsSectionH{font-size:12px;color:var(--text);letter-spacing:.06em}
#libPhantomSection .libDraftsSectionH .ct{color:#38bdf8;font-size:13px}
.libIssueStatuses{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.libIssueStatus{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:var(--dim);background:var(--bg);padding:2px 6px;border-radius:8px}
.libIssueStatus .dot{width:6px;height:6px;border-radius:50%}
.libStatusNew{background:var(--s2);color:var(--dim);border:1px dashed var(--border)!important}
/* Table view */
.libIssuesTable{width:100%;border-collapse:collapse;font-size:11px}
.libIssuesTable th{text-align:left;padding:10px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:500;border-bottom:1px solid var(--border)}
.libIssuesTable td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.libIssuesTable tr.row{cursor:pointer;transition:background .1s}
.libIssuesTable tr.row:hover{background:var(--s2)}
.libIssuesTable .readyBar{display:inline-flex;align-items:center;gap:8px}
.libIssuesTable .readyBarBg{width:120px;height:5px;background:var(--s2);border-radius:3px;overflow:hidden}
.libIssuesTable .readyBarFg{height:100%;background:var(--accent);border-radius:3px}
/* Empty state */
.libEmpty{text-align:center;padding:60px 20px;color:var(--dim)}
.libEmpty .ico{font-size:40px;opacity:.4;margin-bottom:10px}
.libEmpty .t{font-size:13px;margin-bottom:6px;color:var(--text)}
.libEmpty .s{font-size:11px}

/* ── UPLOAD MODAL ── */
.upWin{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(1200px,94vw);height:min(80vh,760px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.upTabs{display:flex;gap:6px;padding:0 22px;border-bottom:1px solid var(--border);background:var(--s2)}
.upTab{padding:12px 16px;background:transparent;border:0;color:var(--dim);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;white-space:nowrap}
.upTab:hover{color:var(--text)}
.upTab.on{color:var(--text);border-bottom-color:var(--text)}
.upTab .sub{font-size:9px;color:var(--dim);font-weight:400;text-transform:lowercase}
.upBody{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.upFoot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.upBtn{height:34px;padding:0 18px;border-radius:7px;border:1px solid var(--border);background:var(--s2);color:var(--text);cursor:pointer;font-family:inherit;font-size:12px;font-weight:600}
.upBtn:hover{border-color:var(--accent)}
.upBtn.prim{background:var(--text);color:var(--bg);border-color:var(--text)}
.upBtn.prim:disabled{opacity:.35;cursor:not-allowed}
/* _36_1_67: two-step upload wizard layout. */
.upWizardStep{flex:1;display:flex;flex-direction:column;min-height:0}
.upStagedRow{display:flex;align-items:center;gap:12px;justify-content:center;padding:0 22px 12px;font-size:11px;color:var(--text)}
.upStagedRow #upStagedCount{font-weight:600}
.upRouteH{padding:18px 22px 6px;font-size:13px;font-weight:600;color:var(--text)}
.upRouteOpt{display:flex;flex-direction:column;gap:4px;padding:12px 22px;border-top:1px solid var(--border);cursor:pointer;background:var(--s2)}
.upRouteOpt:hover{background:var(--bg)}
.upRouteOpt input[type=radio]{margin-right:8px;cursor:pointer}
.upRouteLbl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text)}
.upRouteHint{font-size:10px;color:var(--dim);margin-left:24px;line-height:1.4}
.upRouteErr{margin:10px 22px;padding:10px 12px;border-radius:6px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#f87171;font-size:11px;line-height:1.45}
/* Drag & drop pane */
.upDrop{flex:1;margin:22px;border:2px dashed var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);transition:all .15s;padding:40px 20px;text-align:center}
.upDrop.hot{border-color:var(--a2);background:rgba(129,140,248,.06)}
.upDrop .ico{width:52px;height:52px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--dim)}
.upDrop .t{font-size:14px;font-weight:600;color:var(--text)}
.upDrop .s{font-size:11px;color:var(--dim);max-width:440px;line-height:1.5}
/* Inbox pane */
.upInbox{flex:1;display:flex;overflow:hidden;min-height:0}
.upInboxL{flex:1;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.upInboxR{width:50%;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.upInboxH{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--s2)}
.upInboxH .cnt{background:var(--bg);padding:1px 7px;border-radius:10px;font-size:9px;color:var(--dim)}
.upInboxH .hint{margin-left:auto;font-size:10px;color:var(--dim)}
.upInboxGrid{flex:1;overflow-y:auto;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start}
.upInboxCard{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:grab;transition:all .12s;user-select:none}
.upInboxCard:hover{border-color:var(--a2)}
.upInboxCard.sel{border-color:var(--a3);box-shadow:0 0 0 2px rgba(244,114,182,.2)}
.upInboxCard.drag{opacity:.4}
.upInboxCard .th{aspect-ratio:3/4;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.upInboxCard .th img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.upInboxCard .nm{padding:5px 7px;font-size:9px;color:var(--dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit}
.upIssuesList{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.upIssueBin{border:1px solid var(--border);border-radius:8px;padding:12px 14px;background:var(--bg);transition:all .15s}
.upIssueBin.hot{border-color:var(--a2);background:rgba(129,140,248,.08)}
.upIssueBin .t{font-size:12px;font-weight:700;color:var(--text);display:flex;gap:6px;align-items:baseline;margin-bottom:3px}
.upIssueBin .t .num{color:var(--accent)}
.upIssueBin .hint{font-size:10px;color:var(--dim)}
.upIssueNew{padding:12px 14px;border:1px dashed var(--border);border-radius:8px;text-align:left;color:var(--dim);cursor:pointer;font-family:inherit;font-size:12px;display:flex;align-items:center;gap:8px;background:transparent}
.upIssueNew:hover{border-color:var(--a2);color:var(--a2)}

/* _36_1_68: tiny toast stack in the bottom-right corner, used by the
   async upload queue (Upload queued / Upload done / Upload failed)
   and any other transient one-line notification. */
#toastStack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none;max-width:340px}
.toastItem{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;pointer-events:auto;animation:toastIn .25s ease}
.toastItem.ok{border-color:#22c55e;background:rgba(34,197,94,.08)}
.toastItem.err{border-color:#ef4444;background:rgba(239,68,68,.08)}
.toastItem .toastMsg{flex:1;line-height:1.35}
.toastItem .toastLink{background:transparent;border:0;color:var(--accent);cursor:pointer;font-family:inherit;font-size:11px;text-decoration:underline;padding:0}
.toastItem .toastLink:hover{color:#fff}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* _36_1_68: card overlay shown when an upload_files job targets a
   newspaper or issue. Card stays in layout, becomes click-blocked,
   gets a spinner + label until the job finishes. */
.libIssueCard.is-uploading{pointer-events:none;opacity:.85}
/* _36_1_74: newspaper-level upload — visual hint only, NO click block.
   The card stays clickable so the user can enter the newspaper and
   watch the phantom + per-draft spinners inside. */
.libAllCard.is-uploading{opacity:.85}
.libNpItem.is-uploading{opacity:.85}
/* _36_1_70: phantom card for an in-flight upload_files job whose
   target is the currently-viewed newspaper or issue. Frontend-only,
   lives only while UploadQueue.getActiveJobs() returns the job. */
.libIssueCardPhantom{background:var(--surface);border:1px dashed var(--a2);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;pointer-events:none;animation:phantomFade .35s ease}
.libIssueCardPhantom .libIssueCardTop{aspect-ratio:3/4;background:repeating-linear-gradient(45deg,var(--bg) 0 10px,var(--s2) 10px 20px);display:flex;align-items:center;justify-content:center;position:relative}
.libIssueCardPhantom .libIssueCardBody{padding:10px 12px}
.libIssueCardPhantom .phantomTitle{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.libIssueCardPhantom .phantomSub{font-size:10px;color:var(--dim);margin-top:4px;line-height:1.4;word-break:break-all}
.libIssueCardPhantom .phantomPct{margin-top:6px;font-size:10px;color:var(--text);font-weight:600}
.libPagePhantom{background:var(--surface);border:1px dashed var(--a2);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;pointer-events:none;animation:phantomFade .35s ease}
.libPagePhantom .libIssueCardTop{aspect-ratio:3/4;background:repeating-linear-gradient(45deg,var(--bg) 0 10px,var(--s2) 10px 20px);position:relative}
.libPagePhantom .phantomFn{padding:6px 8px;font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
@keyframes phantomFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.libIssueCard.is-uploading .libIssueCardTop::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:5;pointer-events:none}
.libIssueCardUploading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;pointer-events:none;text-align:center}
.libIssueCardUploading .spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:libSpin .9s linear infinite}
@keyframes libSpin{to{transform:rotate(360deg)}}

/* _36_1_78 (v0.5.22) — segment_batch overlays. Mirrors the upload
   .is-uploading styling but lives on per-PAGE objects (page cards in
   the Library page grid, lpPageRow rows in the editor left panel,
   and the main canvas wrapper #cw when the open page is in flight). */
.libPageCard.is-processing{pointer-events:none;opacity:.85}
.libPageCard.is-processing .libIssueCardTop{position:relative}
.libPageCard.is-processing .libIssueCardTop::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.40);z-index:5;pointer-events:none}
.lpPageRow.is-processing{pointer-events:none;opacity:.78}
.lpPageRow.is-processing .thumb{position:relative}
.lpPageRow.is-processing .thumb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.40);z-index:2;border-radius:inherit}
.lpPageRow.is-processing .thumb::before{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;z-index:3;animation:libSpin .9s linear infinite;margin:-11px 0 0 -11px}
#cwProcessingOverlay{position:absolute;inset:0;background:rgba(15,15,19,.55);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;pointer-events:auto;backdrop-filter:blur(1px)}
#cwProcessingOverlay .spin{width:52px;height:52px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:libSpin .9s linear infinite}
#cwProcessingOverlay .sublabel{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:none;color:rgba(255,255,255,.78)}
.libCardProcessing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;pointer-events:none;text-align:center}
.libCardProcessing .spin{width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:libSpin .9s linear infinite}

/* _36_1_68: Queue table in main content area. Reuses libIssuesTable look. */
.libQueueTable{width:100%;border-collapse:collapse;font-size:11px}
.libQueueTable th{text-align:left;padding:10px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:500;border-bottom:1px solid var(--border)}
.libQueueTable td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.libQueueStatus{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px}
.libQueueStatus.s-pending{background:rgba(148,163,184,.18);color:#94a3b8}
.libQueueStatus.s-running{background:rgba(56,189,248,.18);color:#38bdf8}
.libQueueStatus.s-done{background:rgba(34,197,94,.18);color:#22c55e}
.libQueueStatus.s-failed{background:rgba(239,68,68,.18);color:#ef4444}
.libQueueStatus.s-cancelled{background:rgba(148,163,184,.12);color:var(--dim)}
.libQueueOpenBtn{background:transparent;border:1px solid var(--border);border-radius:5px;padding:3px 10px;font-size:10px;color:var(--accent);cursor:pointer;font-family:inherit}
.libQueueOpenBtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.libQueueCancelBtn{background:transparent;border:1px solid var(--border);border-radius:5px;padding:3px 10px;font-size:10px;color:#f87171;cursor:pointer;font-family:inherit;margin-left:4px}
.libQueueCancelBtn:hover{background:#ef4444;color:#fff;border-color:#ef4444}

/* ── NEWSPAPER CREATE DIALOG ── */
.npDlgWin{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:min(440px,94vw);padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.npDlgWin h3{margin:0 0 16px;font-size:14px;color:var(--text)}
/* Wide variant for extended newspaper / issue settings dialogs.
   Scrolls internally so the footer stays visible on small screens. */
.npDlgWinXl{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:min(720px,96vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.npDlgWinXl > h3{margin:0;padding:18px 22px 14px;font-size:14px;color:var(--text);border-bottom:1px solid var(--border)}
.npDlgWinXl .dlgBody{padding:14px 22px 6px;overflow-y:auto;flex:1;min-height:0}
.npDlgWinXl .dlgFoot{padding:12px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.dlgSection{margin:8px 0 14px}
.dlgSectionT{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--a2);font-weight:600;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px dashed var(--border)}
.dlgSection:first-child .dlgSectionT{margin-top:0}
.dlgHint{font-size:10px;color:var(--dim);margin:-4px 0 8px;font-style:italic}
.dlgInvalid{border-color:#f87171 !important}
.dlgValidMsg{display:none;font-size:10px;color:#f87171;margin-top:3px}
.dlgValidMsg.on{display:block}
/* Multi-value rows (identifiers, alt titles, additional languages) */
.dlgMultiRow{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.dlgMultiRow > select,.dlgMultiRow > input{height:30px;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:inherit;font-size:11px;padding:0 8px;box-sizing:border-box}
.dlgMultiAdd{background:transparent;border:1px dashed var(--border);color:var(--dim);border-radius:5px;padding:5px 10px;cursor:pointer;font-family:inherit;font-size:11px}
.dlgMultiAdd:hover{border-color:var(--a2);color:var(--a2)}
.dlgMultiDel{background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.dlgMultiDel:hover{background:rgba(248,113,113,.15);color:#f87171}
/* _36_1_38: issue-card gear button — bottom-RIGHT (was bottom-left) and
   ALWAYS visible (was hover-only). Replaces the old "N p." page-count
   badge that used to sit in this spot. */
.libIssueCardOpt{position:absolute;bottom:6px;right:6px;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;backdrop-filter:blur(2px);z-index:3}
.libIssueCardOpt:hover{background:rgba(99,179,237,.7);border-color:var(--a2)}
/* _36_1_38: Edit pill — wide button between the status dot (bottom-left)
   and the gear (bottom-right). Tap target stretches across the bottom of
   the thumb so the "open this issue" affordance is obvious. */
.libIssueCardTop .libIssueCardEdit{position:absolute;bottom:6px;left:34px;right:34px;height:24px;border-radius:6px;border:1px solid var(--border);background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:5px;backdrop-filter:blur(2px);z-index:2;transition:background .12s,border-color .12s}
.libIssueCardTop .libIssueCardEdit:hover{background:rgba(99,179,237,.85);border-color:var(--a2)}
.npField{margin-bottom:12px}
.npField label{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.npField input{width:100%;height:34px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:inherit;font-size:12px;padding:0 10px;box-sizing:border-box}
.npField input:focus{outline:none;border-color:var(--a2)}
.npRow{display:flex;gap:10px}
.npRow .npField{flex:1}

/* ── LP ISSUES TREE ── */
.lpIssueRow{padding:5px 12px;font-size:11px;color:var(--dim);cursor:pointer;display:flex;gap:6px;align-items:center;border-left:3px solid transparent;user-select:none;transition:all .1s}
.lpIssueRow:hover{background:var(--s2);color:var(--text)}
.lpIssueRow.open{color:var(--text);font-weight:600}
.lpIssueRow .chev{font-size:9px;width:10px;display:inline-block;transition:transform .12s}
.lpIssueRow.open .chev{transform:rotate(90deg)}
.lpIssueRow .date{font-weight:600;color:var(--accent);font-size:10px}
.lpIssueRow .pc{margin-left:auto;font-size:9px;color:var(--dim);background:var(--bg);padding:1px 5px;border-radius:8px}
.lpPageRow{display:flex;flex-direction:column;gap:4px;padding:6px 10px 6px 10px;cursor:pointer;align-items:flex-start;border-left:3px solid transparent;transition:all .12s}
.lpPageRow:hover{background:var(--s2)}
.lpPageRow.cur{background:rgba(79,70,229,.06);border-left-color:var(--a2)}
.lpPageRow .thumb{width:90px;height:120px;background:var(--bg);border:1px solid var(--border);border-radius:3px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.lpPageRow .thumb img{width:100%;height:100%;object-fit:cover}
.lpPageRow .info{flex:1;min-width:0}
.lpPageRow .pname{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpPageRow .pstat{font-size:9px;color:var(--dim)}
.lpPageRow .sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-left:auto}
.sdot-to_do{background:#64748b}
.sdot-in_progress{background:#f59e0b}
.sdot-done{background:#6ee7b7}

/* Page workflow status pill in the annotator top bar — shown when a page is
   loaded, hidden otherwise. Sits to the right of the zoom controls and
   before the filename, where the current-page context lives. */
.pageStatusWrap{position:relative;display:flex;align-items:center;margin-right:10px;flex-shrink:0}
.pageStatusBtn{height:24px;padding:0 9px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .12s}
.pageStatusBtn:hover{border-color:var(--a2)}
.pageStatusBtn .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pageStatusBtn .chev{font-size:8px;color:var(--dim);margin-left:1px}
/* position:fixed so the dropdown isn't clipped by #tb's overflow-x:auto
   (which, by the CSS "either-axis-auto-implies-other-axis-auto" quirk,
   silently turns into overflow-y:auto too and chops vertical popovers).
   JS positions left/top against the trigger's bounding rect on each open. */
.pageStatusMenu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.12);padding:4px;min-width:140px;z-index:9999}
.pageStatusOpt{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;color:var(--text);text-align:left}
.pageStatusOpt:hover{background:var(--bg)}
.pageStatusOpt .dot{width:8px;height:8px;border-radius:50%}

/* Status counter pills (under newspaper name in sidebar) */
.libNpStatuses{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.libNpStatus{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:var(--dim);background:var(--bg);padding:1px 5px 1px 4px;border-radius:8px;line-height:1.4}
.libNpStatus .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
/* Progress stripe on issue cards (multi-color segmented bar like Library-05) */
.libIssueBar{display:flex;height:3px;margin-top:6px;border-radius:2px;overflow:hidden;background:var(--bg)}
.libIssueBar .seg{height:100%}
/* Same bar but in left-panel under issue row */
.lpIssueBar{display:flex;height:3px;margin:0 10px 4px 28px;border-radius:2px;overflow:hidden;background:var(--bg)}
.lpIssueBar .seg{height:100%}
/* Delete menu (×) on sidebar hover */
.libNpItem{position:relative}
.libNpDel{width:22px;height:22px;border-radius:5px;border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0}
.libNpDel:hover{background:rgba(248,113,113,.15);color:#f87171}
.libNpOpt{width:22px;height:22px;border-radius:5px;border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0}
.libNpOpt:hover{background:var(--bg);color:var(--text)}
.libNpActions{display:none;gap:2px;align-items:center;flex-shrink:0}
.libNpItem:hover .libNpActions,.libNpItem.sel .libNpActions{display:flex}
/* ── Library as fullscreen page ── */
#libOverlay{background:var(--bg);backdrop-filter:none;align-items:stretch;justify-content:stretch}
#libOverlay .libWin{width:100%;height:100%;border-radius:0;border:0;box-shadow:none}
.libLogo{font-size:16px;font-weight:800;letter-spacing:-.4px;color:var(--text);display:flex;align-items:center;gap:6px;user-select:none}
.libLogo em{color:var(--accent);font-style:normal}
.libIssueCard{position:relative}
.libIssueCardDel{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:13px;display:none;align-items:center;justify-content:center;font-family:inherit;padding:0;backdrop-filter:blur(2px);z-index:2}
.libIssueCard:hover .libIssueCardDel{display:flex}
.libIssueCardDel:hover{background:rgba(248,113,113,.8);border-color:#f87171}
/* Search bar */
.libSearchWrap{padding:8px 12px;border-bottom:1px solid var(--border);background:var(--s2)}
.libSearchIn{width:100%;height:30px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:0 10px 0 28px;color:var(--text);font-family:inherit;font-size:11px;box-sizing:border-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16' y2='16'/></svg>");background-repeat:no-repeat;background-position:9px center}
.libSearchIn:focus{outline:none;border-color:var(--a2)}
/* Library-path display + change button */
.libRootBar{padding:6px 22px;border-top:1px solid var(--border);background:var(--bg);display:flex;align-items:center;gap:10px;font-size:10px;color:var(--dim);flex-shrink:0}
.libRootBar code{color:var(--a2);background:transparent;font-family:inherit}
.libRootBar button{margin-left:auto;height:22px;padding:0 8px;border-radius:4px;border:1px solid var(--border);background:var(--s2);color:var(--dim);cursor:pointer;font-family:inherit;font-size:10px}
.libRootBar button:hover{border-color:var(--a2);color:var(--a2)}
/* Confirm dialog */
.confirmDlg{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(400px,94vw);padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.14)}
.confirmDlg h3{margin:0 0 10px;font-size:14px;color:var(--text)}
.confirmDlg p{margin:0 0 18px;font-size:11px;color:var(--dim);line-height:1.5}
.confirmDlg .danger{background:#dc2626;color:#fff;border-color:#dc2626;font-weight:700}
.confirmDlg .danger:hover{filter:brightness(1.1)}

/* Version History side panel (toggled by the 🕘 button in the Save cluster).
   Fixed-position sidebar overlaying the right edge of the editor — does
   NOT push canvas; layered above instead. */
#verPanel{position:fixed;top:38px;right:0;bottom:0;width:320px;z-index:140;background:var(--surface);border-left:1px solid var(--border);box-shadow:-6px 0 18px rgba(0,0,0,.08);flex-direction:column;display:none}
#verPanel .ver-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
#verPanel .ver-hdr h3{margin:0;font-size:13px;font-weight:700;color:var(--text)}
#verPanel .ver-hdr button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:16px;padding:0 4px;line-height:1}
#verPanel #verList{flex:1;overflow-y:auto;padding:6px 0}
.ver-date-hdr{padding:8px 14px 4px;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.ver-item{display:block;width:100%;background:none;border:none;border-bottom:1px solid var(--border);padding:8px 14px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text);transition:background .12s}
.ver-item:hover{background:rgba(22,163,74,.07)}
.ver-item.is-current{background:rgba(22,163,74,.10)}
.ver-row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ver-row2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.ver-time{font-size:12px;font-weight:600;color:var(--text);font-family:'JetBrains Mono',monospace}
.ver-user{font-size:10px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.ver-counts{font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace}
.ver-cur{font-size:9px;color:#16a34a;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(22,163,74,.12);padding:1px 6px;border-radius:3px}
/* v0.5.56 / Stage 12c-A — balance chip in library sidebar, billing
   toast notifications, and per-activity credit-cost chip. */
.libBalanceChip{color:#16a34a;font-family:'JetBrains Mono',monospace;font-weight:600}
.libBalanceChip:hover{color:#15803d;background:rgba(22,163,74,.08)}
.libBalanceChip.libBalanceLow{color:#d97706}
.libBalanceChip.libBalanceLow:hover{color:#b45309;background:rgba(217,119,6,.08)}
.libBalanceChip.libBalanceCrit{color:#dc2626;animation:libBalancePulse 1.6s ease-in-out infinite}
.libBalanceChip.libBalanceCrit:hover{color:#991b1b;background:rgba(220,38,38,.08)}
@keyframes libBalancePulse{0%,100%{opacity:1}50%{opacity:.55}}
/* Per-entry credit-cost chip in Activity Log. */
.actCostChip{display:inline-block;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:700;color:#dc2626;background:rgba(220,38,38,.10);border-radius:3px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em}
/* Toast notification (bottom-right) — single-instance, click-to-dismiss. */
.billingToast{position:fixed;bottom:24px;right:24px;z-index:10000;max-width:380px;min-width:240px;padding:14px 16px 14px 18px;border-radius:8px;background:var(--surface);color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.25);border-left:4px solid var(--dim);font-size:13px;line-height:1.45;display:flex;align-items:flex-start;gap:10px;font-family:inherit;animation:billingToastSlideIn .22s ease-out}
.billingToastBody{flex:1;word-wrap:break-word;white-space:pre-line}
.billingToastClose{flex:0 0 auto;background:none;border:none;color:var(--dim);font-size:18px;font-weight:700;cursor:pointer;padding:0;line-height:1;font-family:inherit}
.billingToastClose:hover{color:var(--text)}
.billingToastInfo{border-left-color:#22d3ee}
.billingToastWarn{border-left-color:#d97706;background:#fffbeb;color:#78350f}
.billingToastWarn .billingToastClose{color:#92400e}
.billingToastError{border-left-color:#dc2626;background:#fef2f2;color:#7f1d1d}
.billingToastError .billingToastClose{color:#991b1b}
@keyframes billingToastSlideIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
/* v0.5.59 / Stage 12c-B-1 — bulk-cost confirmation modal. */
.costConfirmModal{min-width:380px;max-width:440px}
.costConfirmBody{margin:4px 0 14px}
.costConfirmGrid{display:flex;flex-direction:column;gap:7px;font-size:12px;background:rgba(34,211,238,.04);border:1px solid var(--border);border-radius:6px;padding:12px 14px}
.costRow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;color:var(--text)}
.costRow span:first-child{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.costRow em{font-style:normal;color:var(--dim);font-size:10px}
.costRowTotal{font-size:13px}
.costRowTotal strong{color:#dc2626;font-family:'JetBrains Mono',monospace;font-size:14px}
.costRow.costRowBad strong{color:#dc2626}
.costRow strong{font-family:'JetBrains Mono',monospace}
.costSep{border-top:1px solid var(--border);margin:2px -14px}
/* v0.5.62 / Stage 12c-B-4 — per-engine price chip in radio labels. */
.enginePriceChip{margin-left:auto;padding:0 6px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#dc2626;background:rgba(220,38,38,.08);border-radius:3px;letter-spacing:.02em;flex-shrink:0;line-height:14px}
/* v0.5.65 — editor save-cluster balance chip (right of Version-History button). */
.editorBalanceChip{display:inline-flex;align-items:center;gap:5px;padding:0 9px;height:24px;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.25);border-radius:5px;color:#16a34a;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;user-select:none;line-height:1;letter-spacing:.02em;transition:background .12s,border-color .12s}
.editorBalanceChip:hover{background:rgba(22,163,74,.18);border-color:rgba(22,163,74,.45)}
.editorBalanceChip.editorBalanceLow{color:#d97706;background:rgba(217,119,6,.10);border-color:rgba(217,119,6,.25)}
.editorBalanceChip.editorBalanceLow:hover{background:rgba(217,119,6,.18);border-color:rgba(217,119,6,.45)}
.editorBalanceChip.editorBalanceCrit{color:#dc2626;background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.30);animation:libBalancePulse 1.6s ease-in-out infinite}
.editorBalanceChip.editorBalanceCrit:hover{background:rgba(220,38,38,.20);border-color:rgba(220,38,38,.5)}