/* flash — Flash Design System port (tokens + components + app layer).
   Dark is the default theme; light/clay are token swaps on [data-theme]. */

/* ---- fonts (self-hosted, latin subset; CSP forbids CDNs) ---- */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/Geist-Regular.woff2?v=3) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/Geist-Medium.woff2?v=3) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/Geist-SemiBold.woff2?v=3) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/GeistMono-Regular.woff2?v=3) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/GeistMono-Medium.woff2?v=3) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/GeistMono-SemiBold.woff2?v=3) format("woff2")}

/* ---- tokens: color ---- */
:root{
/* base — dark is the default theme */
--black:#0a0a0b;--white:#ffffff;
--gray-0:#0a0a0b;--gray-1:#111113;--gray-2:#17171a;--gray-3:#1f1f23;--gray-4:#2a2a30;--gray-5:#3f3f46;--gray-6:#86868e;--gray-7:#a0a0a8;--gray-8:#d4d4d8;--gray-9:#ededf0;
--green:#4cc38a;--amber:#f5b944;--red:#f2555a;
/* semantic */
--surface-page:var(--gray-0);--surface-raised:var(--gray-1);--surface-card:var(--gray-2);--surface-hover:var(--gray-3);--surface-active:var(--gray-4);
--text-body:var(--gray-9);--text-secondary:var(--gray-7);--text-muted:var(--gray-6);
--stroke:rgba(255,255,255,.08);--stroke-strong:rgba(255,255,255,.16);
--accent:#e8e8e8;--accent-hover:#ffffff;--accent-fg:#0a0a0b;
--good:var(--green);--warn:var(--amber);--bad:var(--red);
--good-dim:rgba(76,195,138,.14);--warn-dim:rgba(245,185,68,.14);--bad-dim:rgba(242,85,90,.14);
--ink-red:#e2777c;--ink-amber:#d5a94f;--ink-green:#5fba85;--ink-teal:#55b8b2;--ink-blue:#6aa5e0;--ink-purple:#a58ae0;--ink-pink:#d982b5;
--tint-red:rgba(242,85,90,.16);--tint-amber:rgba(245,185,68,.16);--tint-green:rgba(76,195,138,.16);--tint-teal:rgba(85,190,180,.16);--tint-blue:rgba(96,165,230,.16);--tint-purple:rgba(165,138,224,.18);--tint-pink:rgba(217,130,181,.18);
--link:var(--gray-9);--focus:rgba(255,255,255,.55);
}
[data-theme="light"]{
--surface-page:#fafafa;--surface-raised:#f4f4f5;--surface-card:#ffffff;--surface-hover:#f0f0f1;--surface-active:#e8e8ea;
--text-body:#18181b;--text-secondary:#52525b;--text-muted:#6d6d75;
--stroke:rgba(0,0,0,.09);--stroke-strong:rgba(0,0,0,.18);
--accent:#111113;--accent-hover:#000000;--accent-fg:#ffffff;
--good:#178d5c;--warn:#b57e10;--bad:#d43b40;
--good-dim:rgba(23,141,92,.1);--warn-dim:rgba(181,126,16,.12);--bad-dim:rgba(212,59,64,.1);
--ink-red:#c04347;--ink-amber:#9a6c10;--ink-green:#1d7a52;--ink-teal:#12756d;--ink-blue:#2f6cb3;--ink-purple:#6d4fb3;--ink-pink:#ad4a80;
--tint-red:rgba(212,59,64,.12);--tint-amber:rgba(181,126,16,.14);--tint-green:rgba(23,141,92,.11);--tint-teal:rgba(18,120,112,.12);--tint-blue:rgba(47,108,179,.11);--tint-purple:rgba(109,79,179,.11);--tint-pink:rgba(173,74,128,.12);
--link:#111113;--focus:rgba(0,0,0,.45);
}
[data-theme="clay"]{
--surface-page:#171310;--surface-raised:#1e1813;--surface-card:#241d16;--surface-hover:#2c241b;--surface-active:#372d21;
--text-body:#ede4d8;--text-secondary:#b5a894;--text-muted:#968b78;
--stroke:rgba(237,228,216,.08);--stroke-strong:rgba(237,228,216,.17);
--accent:#d9c5a7;--accent-hover:#e8d7bd;--accent-fg:#1a140e;
--good:#8aa86f;--warn:#d9a441;--bad:#c96b5a;
--good-dim:rgba(138,168,111,.14);--warn-dim:rgba(217,164,65,.14);--bad-dim:rgba(201,107,90,.14);
--ink-red:#cf7a6b;--ink-amber:#d2a24e;--ink-green:#96ac77;--ink-teal:#7fae9f;--ink-blue:#8fa3c6;--ink-purple:#ab93c9;--ink-pink:#c98aa4;
--tint-red:rgba(201,107,90,.16);--tint-amber:rgba(217,164,65,.15);--tint-green:rgba(138,168,111,.15);--tint-teal:rgba(127,174,159,.15);--tint-blue:rgba(143,163,198,.15);--tint-purple:rgba(171,147,201,.16);--tint-pink:rgba(201,138,164,.16);
--link:#ede4d8;--focus:rgba(237,228,216,.5);
}
[data-theme="mocha"]{
--surface-page:#2e261d;--surface-raised:#362d23;--surface-card:#3e3428;--surface-hover:#473c2e;--surface-active:#524635;
--text-body:#f2eadd;--text-secondary:#c4b7a2;--text-muted:#b1a895;
--stroke:rgba(242,234,221,.09);--stroke-strong:rgba(242,234,221,.18);
--accent:#e3d2b4;--accent-hover:#f0e2c9;--accent-fg:#241c12;
--good:#96b478;--warn:#e0ad4c;--bad:#d4796a;
--good-dim:rgba(150,180,120,.15);--warn-dim:rgba(224,173,76,.15);--bad-dim:rgba(212,121,106,.15);
--ink-red:#d98a7c;--ink-amber:#dcab55;--ink-green:#a0ba82;--ink-teal:#8bb6a7;--ink-blue:#9aaccb;--ink-purple:#b39cce;--ink-pink:#d094ac;
--tint-red:rgba(212,121,106,.16);--tint-amber:rgba(224,173,76,.16);--tint-green:rgba(150,180,120,.16);--tint-teal:rgba(139,182,167,.16);--tint-blue:rgba(154,172,203,.16);--tint-purple:rgba(179,156,206,.16);--tint-pink:rgba(208,148,172,.16);
--link:#f2eadd;--focus:rgba(242,234,221,.5);
}
[data-theme="taupe"]{
--surface-page:#2b2523;--surface-raised:#332c2a;--surface-card:#3a3230;--surface-hover:#433a37;--surface-active:#4e4441;
--text-body:#f0e9e6;--text-secondary:#c0b4ae;--text-muted:#ada49f;
--stroke:rgba(240,233,230,.09);--stroke-strong:rgba(240,233,230,.18);
--accent:#ddcdc2;--accent-hover:#ecdfd6;--accent-fg:#221c1a;
--good:#8fb381;--warn:#dda65c;--bad:#d3766e;
--good-dim:rgba(143,179,129,.15);--warn-dim:rgba(221,166,92,.15);--bad-dim:rgba(211,118,110,.15);
--ink-red:#d9877f;--ink-amber:#d9a75e;--ink-green:#9bb98d;--ink-teal:#89b3a6;--ink-blue:#97a9c8;--ink-purple:#b09aca;--ink-pink:#cf93ab;
--tint-red:rgba(211,118,110,.16);--tint-amber:rgba(221,166,92,.16);--tint-green:rgba(143,179,129,.16);--tint-teal:rgba(137,179,166,.16);--tint-blue:rgba(151,169,200,.16);--tint-purple:rgba(176,154,202,.16);--tint-pink:rgba(207,147,171,.16);
--link:#f0e9e6;--focus:rgba(240,233,230,.5);
}

/* ---- tokens: typography ---- */
:root{
--font-sans:"Geist",-apple-system,"Segoe UI",sans-serif;
--font-mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:16px;--text-lg:20px;--text-xl:26px;--text-2xl:34px;
--leading-tight:1.15;--leading-snug:1.35;--leading-body:1.55;
--track-tight:-0.02em;--track-normal:0;--track-wide:0.06em;
--w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:700;
}

/* ---- tokens: spacing & shape ---- */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
--r-sm:6px;--r-md:8px;--r-lg:12px;--r-full:999px;
--control-h-sm:28px;--control-h-md:34px;--control-h-lg:40px;
--content-max:1120px;
}

/* ---- tokens: effects ---- */
:root{
--dur-1:120ms;--dur-2:180ms;--ease:cubic-bezier(.3,.7,.4,1);
--shadow-card:none;--shadow-pop:0 8px 24px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
}
[data-theme="light"]{--shadow-card:0 1px 2px rgba(0,0,0,.05);--shadow-pop:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06)}

/* ---- base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--w-regular) var(--text-base)/var(--leading-body) var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;letter-spacing:var(--track-tight);line-height:var(--leading-tight)}
h1{font-size:var(--text-xl);font-weight:var(--w-semibold)}
h2{font-size:var(--text-lg);font-weight:var(--w-semibold)}
h3{font-size:var(--text-md);font-weight:var(--w-semibold)}
p{margin:0}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--stroke-strong);text-underline-offset:3px;transition:text-decoration-color var(--dur-1) var(--ease)}
a:hover{text-decoration-color:var(--text-body)}
code,pre{font-family:var(--font-mono);font-size:0.92em}
::selection{background:rgba(232,232,232,.25)}
[data-theme="light"] ::selection{background:rgba(17,17,19,.15)}
:root{accent-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* ---- components ---- */
.fl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h-md);padding:0 14px;border-radius:var(--r-sm);border:1px solid transparent;font:var(--w-medium) var(--text-base)/1 var(--font-sans);letter-spacing:0;cursor:pointer;white-space:nowrap;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);user-select:none;text-decoration:none}
.fl-btn:active{transform:translateY(0.5px)}
.fl-btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.fl-btn.htmx-request,form.htmx-request .fl-btn[type=submit],.fl-btn[data-busy]{opacity:.55;cursor:progress;pointer-events:none;animation:fl-busy 1.1s ease-in-out infinite}
@keyframes fl-busy{50%{opacity:.35}}
.fl-btn-primary{background:var(--accent);color:var(--accent-fg)}
.fl-btn-primary:hover{background:var(--accent-hover)}
.fl-btn-secondary{background:transparent;color:var(--text-body);border-color:var(--stroke-strong)}
.fl-btn-secondary:hover{background:var(--surface-hover)}
.fl-btn-ghost{background:transparent;color:var(--text-secondary)}
.fl-btn-ghost:hover{background:var(--surface-hover);color:var(--text-body)}
.fl-btn-danger{background:transparent;color:var(--bad);border-color:var(--stroke-strong)}
.fl-btn-danger:hover{background:var(--bad-dim);border-color:var(--bad)}
.fl-btn-sm{height:var(--control-h-sm);padding:0 10px;font-size:var(--text-sm)}
.fl-btn-lg{height:var(--control-h-lg);padding:0 18px}
.fl-iconbtn{width:var(--control-h-md);padding:0}
.fl-btn-sm.fl-iconbtn{width:var(--control-h-sm)}
.fl-input{display:block;width:100%;height:var(--control-h-md);padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--stroke-strong);background:transparent;color:var(--text-body);font:var(--w-regular) var(--text-base)/1 var(--font-sans);transition:border-color var(--dur-1) var(--ease)}
.fl-input::placeholder{color:var(--text-muted)}
.fl-input:hover{border-color:var(--text-muted)}
.fl-input:focus{outline:none;border-color:var(--text-secondary)}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
textarea.fl-input{height:auto;padding:8px 10px;line-height:var(--leading-snug);resize:vertical}
.fl-field{display:flex;flex-direction:column;gap:6px}
/* File picker: the native input stays in the tree (keyboard, required) but
   is visually hidden; the label is the button, the span the readout. */
.fl-file{display:flex;align-items:center;gap:10px;min-width:0}
.fl-file input[type="file"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fl-file input[type="file"]:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.fl-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-file-name.has-file{color:var(--text-body)}
[data-fl-drop]{transition:border-color var(--dur-2) var(--ease)}
[data-fl-drop].is-drag{border-color:var(--accent)}
.fl-label{font:var(--w-medium) var(--text-sm)/1 var(--font-sans);color:var(--text-body)}
.fl-hint{font-size:var(--text-xs);color:var(--text-muted)}
.fl-select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236e6e76" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
select.fl-select option{background:var(--surface-card);color:var(--text-body)}
.fl-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--text-base);color:var(--text-body)}
.fl-check input{appearance:none;margin:0;width:16px;height:16px;border:1px solid var(--stroke-strong);border-radius:4px;display:grid;place-items:center;transition:all var(--dur-1) var(--ease);cursor:pointer;flex:none}
.fl-check input[type="radio"]{border-radius:50%}
.fl-check input:hover{border-color:var(--text-muted)}
.fl-check input:checked{background:var(--accent);border-color:var(--accent)}
.fl-check input[type="checkbox"]:checked::after{content:"";width:9px;height:9px;background:var(--accent-fg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.fl-check input[type="radio"]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-fg)}
.fl-card{background:var(--surface-card);border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.fl-card-pad{padding:var(--sp-5)}
.fl-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--r-full);border:1px solid var(--stroke-strong);font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);letter-spacing:.02em;color:var(--text-secondary);white-space:nowrap;max-width:100%}
.fl-badge-wrap{height:auto;min-height:20px;padding:3px 8px;white-space:normal;line-height:1.3}
.fl-badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.fl-badge-good{color:var(--good);border-color:transparent;background:var(--good-dim)}
.fl-badge-warn{color:var(--warn);border-color:transparent;background:var(--warn-dim)}
.fl-badge-bad{color:var(--bad);border-color:transparent;background:var(--bad-dim)}
.fl-badge-accent{color:var(--accent-fg);background:var(--accent);border-color:transparent}
.fl-table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.fl-table th{text-align:left;font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-muted);padding:0 12px 10px;border-bottom:1px solid var(--stroke-strong);white-space:nowrap}
.fl-table td{padding:13px 12px;border-bottom:1px solid var(--stroke);vertical-align:top}
.fl-table tbody tr{transition:background var(--dur-1) var(--ease)}
.fl-table tbody tr:hover{background:var(--surface-hover)}
.fl-table .num{font-family:var(--font-mono);font-size:var(--text-sm);white-space:nowrap}
.fl-table .nowrap{white-space:nowrap}
.fl-table-scroll{display:block;overflow-x:auto}
.shell>main,.fl-table,.fl-table-scroll{scrollbar-width:thin;scrollbar-color:var(--surface-active) transparent}
.shell>main::-webkit-scrollbar,.fl-table::-webkit-scrollbar,.fl-table-scroll::-webkit-scrollbar{width:8px;height:8px;background:transparent}
.shell>main::-webkit-scrollbar-thumb,.fl-table::-webkit-scrollbar-thumb,.fl-table-scroll::-webkit-scrollbar-thumb{background:var(--surface-active);border-radius:var(--r-full)}
.shell>main::-webkit-scrollbar-thumb:hover,.fl-table::-webkit-scrollbar-thumb:hover,.fl-table-scroll::-webkit-scrollbar-thumb:hover{background:var(--stroke-strong)}
.fl-dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50;animation:fl-fade var(--dur-2) var(--ease)}
.fl-dialog{width:min(440px,calc(100vw - 32px));background:var(--surface-card);border:1px solid var(--stroke-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:var(--sp-6);animation:fl-rise var(--dur-2) var(--ease)}
.fl-sidebar{display:flex;flex-direction:column;width:220px;flex:none;height:100%;background:var(--surface-raised);border-right:1px solid var(--stroke);padding:var(--sp-4) var(--sp-3)}
.fl-sidebar-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);font:var(--w-medium) var(--text-base)/1 var(--font-sans);color:var(--text-secondary);cursor:pointer;text-decoration:none;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.fl-sidebar-item:hover{background:var(--surface-hover);color:var(--text-body)}
.fl-sidebar-item[data-active="true"]{background:var(--surface-active);color:var(--text-body)}
.fl-sidebar-item svg{width:15px;height:15px;flex:none;opacity:.75}
.fl-chip-agent{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:var(--r-full);background:var(--surface-active);font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-secondary);white-space:nowrap}
.fl-chip-agent svg{width:9px;height:9px}
.fl-stat{display:flex;flex-direction:column;gap:6px}
.fl-stat .fl-stat-value{font:var(--w-semibold) var(--text-2xl)/1 var(--font-mono);letter-spacing:var(--track-tight);color:var(--text-body)}
.fl-stat .fl-stat-label{font-size:var(--text-sm);color:var(--text-muted)}
.fl-bars{display:flex;align-items:flex-end;gap:3px;height:100%}
.fl-bars .fl-bar{flex:1;min-height:2px;border-radius:2px 2px 0 0;background:var(--surface-active);transition:background var(--dur-1) var(--ease)}
.fl-bars .fl-bar[data-hot="true"]{background:var(--accent)}
/* Number fields: no native spinner (it fights the flat look); mobile
   still gets the numeric keyboard from type=number. */
.fl-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.fl-input[type=number]::-webkit-inner-spin-button,.fl-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fl-progress{height:4px;border-radius:var(--r-full);background:var(--surface-active);overflow:hidden}
.fl-progress>div{height:100%;border-radius:inherit;background:var(--accent);transition:width var(--dur-2) var(--ease)}
@keyframes fl-fade{from{opacity:0}}
@keyframes fl-rise{from{opacity:0;transform:translateY(6px)}}

/* ---- app layer ---- */
html,body{height:100%}
.shell{display:flex;height:100vh}
.shell>main{flex:1;overflow-y:auto}
.page{max-width:880px;margin:0 auto;padding:44px 40px;display:flex;flex-direction:column;gap:var(--sp-6)}
.page-wide{max-width:fit-content;min-width:min(100%,520px)}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.page section{display:flex;flex-direction:column;gap:var(--sp-3)}
.page section>h2{font-size:var(--text-md)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>.fl-input{flex:1;min-width:160px}
.field-cols{display:flex;gap:16px}
.field-cols>*{flex:1}
.card-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);flex-wrap:wrap}

.wordmark{display:flex;align-items:center;gap:9px;padding:4px 10px 14px;color:var(--text-body);text-decoration:none}
.wordmark svg{width:18px;height:18px;flex:none}
.wordmark span{font:var(--w-semibold) 17px/1 var(--font-sans);letter-spacing:var(--track-tight)}
.fl-sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar-section{font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-muted);padding:16px 10px 6px}
.nav-drawer{display:contents}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0}
.nav-burger{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);color:var(--text-secondary);cursor:pointer}
.nav-burger svg{width:20px;height:20px}
.nav-burger:hover{background:var(--surface-hover);color:var(--text-body)}
.nav-toggle:focus-visible+.nav-burger{outline:2px solid var(--focus);outline-offset:2px}
.sidebar-foot{margin-top:auto;padding:10px}
.sidebar-foot button{appearance:none;background:none;border:none;padding:0;font:var(--w-regular) var(--text-sm)/1 var(--font-sans);color:var(--text-muted);cursor:pointer;transition:color var(--dur-1) var(--ease)}
.sidebar-foot button:hover{color:var(--text-body)}

.mono{font-family:var(--font-mono)}
.muted{color:var(--text-secondary)}
.small{font-size:var(--text-sm)}
kbd{font:var(--w-medium) var(--text-xs)/1 var(--font-mono);color:var(--text-muted);background:none;border:none;padding:0}

.study-col{max-width:640px;display:flex;flex-direction:column;gap:var(--sp-4)}
.study-card{padding:40px 32px;display:flex;flex-direction:column;gap:var(--sp-5);min-height:220px}
.study-card .front{font-size:var(--text-lg);font-weight:var(--w-medium);letter-spacing:-0.01em}
.study-back{border-top:1px solid var(--stroke);padding-top:var(--sp-5);color:var(--text-secondary);line-height:var(--leading-body)}
/* Rich backs stack lines with <br>; give them rhythm and let the audio
   pill breathe instead of sitting flush against the text. */
.study-back .card-rich{line-height:1.8}
.card-rich .fl-audio{margin:10px 0}
.study-done{max-width:640px;text-align:center;padding:56px 24px;display:flex;flex-direction:column;gap:14px;align-items:center}
.grade-hard{color:var(--warn)}
.stats-bars{height:110px}

.auth{max-width:380px;margin:12vh auto 0;padding:0 var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;text-align:center}
.auth .wordmark{padding:0}
.auth .wordmark svg{width:28px;height:28px}
.auth .wordmark span{font-size:21px}
.auth .fl-card{width:100%}
.auth .fl-btn{width:100%}
.error{color:var(--bad);font-size:var(--text-sm);margin-top:10px}
.error:empty{display:none}
.token-box{font:var(--w-regular) var(--text-sm)/var(--leading-snug) var(--font-mono);white-space:nowrap;overflow-x:auto;min-width:0;background:var(--surface-active);border:1px solid var(--stroke);padding:12px;border-radius:var(--r-md);user-select:all;text-align:left}

@media (max-width:720px){
  .shell{flex-direction:column;height:auto;min-height:100vh}
  .fl-sidebar{position:relative;width:100%;height:auto;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--stroke);padding:8px 12px}
  .wordmark{padding:4px 10px}
  .nav-burger{display:inline-flex;margin-left:auto}
  .nav-drawer{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--surface-raised);border-bottom:1px solid var(--stroke);box-shadow:var(--shadow-pop);padding:8px 12px 12px}
  .nav-toggle:checked~.nav-drawer{display:block}
  .sidebar-foot{margin-top:4px}
  .page{padding:24px 16px}
  .stat-grid{grid-template-columns:1fr}
  .field-cols{flex-direction:column}
  .fl-table{display:block;overflow-x:auto}
  .auth{margin-top:8vh}
}

/* ---- landing (signed-out /) ---- */
.ld-page{min-height:100vh;display:flex;flex-direction:column;background:var(--surface-page);color:var(--text-body)}
.ld-wrap{max-width:1040px;width:100%;margin:0 auto;padding:0 32px;box-sizing:border-box}
.ld-header{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.ld-header-actions{display:flex;align-items:center;gap:10px}
.ld-header-actions a,.ld-cta-row a,.ld-cta-card a{text-decoration:none}
.ld-brand{display:flex;align-items:center;gap:10px}
.ld-brand svg{width:22px;height:22px}
.ld-brand-name{font:var(--w-semibold) 16px/1 var(--font-sans);letter-spacing:var(--track-tight)}
.ld-hero{padding:96px 0 72px}
.ld-eyebrow{font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px}
.ld-title{font-size:clamp(40px,7vw,64px);line-height:1.06;font-weight:var(--w-semibold);letter-spacing:var(--track-tight);margin:0;max-width:820px;text-wrap:balance}
.ld-dim{color:var(--text-muted)}
.ld-stack{display:grid}
.ld-sizer{grid-area:1/1;visibility:hidden}
.ld-live{grid-area:1/1}
.ld-cycle{display:inline-block;transition:opacity 200ms ease-out,transform 200ms ease-out}
.ld-cycle-out{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.ld-cycle{transition:none}.ld-cycle-out{transform:none}}
.ld-sub{font-size:18px;line-height:1.6;color:var(--text-secondary);max-width:560px;margin:24px 0 0;text-wrap:pretty}
.ld-cta-row{display:flex;align-items:center;gap:14px;margin-top:32px}
.ld-fine{font-size:13px;color:var(--text-muted)}
.ld-section{padding-bottom:88px}
.ld-section-lg{padding-bottom:96px}
.ld-mono-dim{font:var(--w-regular) var(--text-2xs)/1.5 var(--font-mono);color:var(--text-muted)}
/* ---- landing demo card: animated chat (landing.js) ---- */
.ld-dm{position:relative;overflow:hidden}
.ld-dm [hidden]{display:none!important}
.ld-dm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 28px;border-bottom:1px solid var(--stroke)}
.ld-dm-head-left{display:flex;align-items:baseline;gap:10px}
.ld-dm-title{font-size:14px;font-weight:var(--w-semibold)}
.ld-dm-head-right{display:flex;align-items:center;gap:14px}
.ld-dm-nav{display:flex;align-items:center;gap:8px}
.ld-dm-navbtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--text-secondary);background:transparent;border:1px solid var(--stroke-strong);border-radius:6px;cursor:pointer;transition:background 120ms ease-out,color 120ms ease-out}
.ld-dm-navbtn:hover{background:var(--surface-hover);color:var(--text-body)}
.ld-dm-num{white-space:nowrap}
/* min-height reserves the tallest scenario so rows appearing never move
   the page scroll; bumped further on narrow screens where text wraps. */
.ld-dm-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:20px;min-height:340px;box-sizing:border-box}
.ld-dm-rows{display:flex;flex-direction:column;gap:20px}
.ld-dm-claude{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:520px;animation:fl-rise 240ms ease-out both}
.ld-dm-ctext{font-size:15px;line-height:1.55;color:var(--text-body);min-height:23px}
.ld-dm-cursor{display:inline-block;width:7px;height:15px;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:ld-blink 900ms steps(1) infinite}
.ld-dm-user{display:flex;justify-content:flex-end;animation:fl-rise 240ms ease-out both}
.ld-dm-bubble{display:flex;align-items:flex-start;gap:12px;background:var(--surface-hover);border:1px solid var(--stroke);border-radius:12px;padding:12px 16px;max-width:440px}
.ld-dm-mic{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--stroke-strong);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}
.ld-dm-mic.ld-dm-listening{background:var(--surface-active)}
.ld-dm-col{display:flex;flex-direction:column;gap:6px;min-height:30px;justify-content:center}
.ld-dm-wave{display:flex;align-items:center;gap:3px;height:14px}
.ld-dm-wave span{width:3px;height:14px;border-radius:2px;background:var(--text-secondary);animation:ld-wave 800ms ease-in-out infinite}
.ld-dm-wave span:nth-child(2){animation-delay:120ms}
.ld-dm-wave span:nth-child(3){animation-delay:240ms}
.ld-dm-wave span:nth-child(4){animation-delay:60ms}
.ld-dm-wave span:nth-child(5){animation-delay:180ms}
.ld-dm-utext{font-size:14px;line-height:1.55;color:var(--text-body)}
.ld-dm-voice{font-style:italic}
.ld-dm-caret{display:inline-block;width:1.5px;height:13px;background:var(--text-muted);margin-left:1px;vertical-align:-2px}
.ld-dm-resrow{display:flex;align-items:center;gap:10px;animation:fl-rise 240ms ease-out both}
.ld-dm-check{width:22px;height:22px;border-radius:50%;background:var(--good-dim);border:1px solid var(--good);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;animation:ld-pop 320ms cubic-bezier(.2,.9,.3,1.4) both}
.ld-dm-badge{font:var(--w-medium) 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--good);background:var(--good-dim);border-radius:999px;padding:3px 9px;white-space:nowrap}
/* ---- landing study tour + imported-deck demo (landing.js) ---- */
.ld-tour [hidden]{display:none!important}
.ld-tour-stage .card-rich img{max-height:150px}
.ld-tour-sub{font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:560px;margin:-16px 0 24px}
.ld-tour{position:relative;background:var(--surface-raised);border:1px solid var(--stroke);border-radius:var(--r-lg);overflow:hidden}
.ld-tour-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-bottom:1px solid var(--stroke)}
.ld-tour-deck{display:flex;align-items:center;gap:10px}
.ld-tour-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:16px}
.ld-tour-stage{display:flex;flex-direction:column;gap:16px;min-height:312px}
.ld-tour-cursor{position:absolute;left:0;top:0;z-index:2;pointer-events:none;transition:transform 650ms cubic-bezier(.3,.7,.3,1);filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.ld-tour-cursor svg{transition:transform 120ms ease-out}
.ld-tour-cursor.ld-tour-pressing svg{transform:scale(.82)}
.ld-tour-press{background:var(--surface-active)!important}
.ld-tour-done{padding:40px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;min-height:220px;box-sizing:border-box}
.ld-tour-restart.spinning svg{animation:ld-spin 480ms ease}
@keyframes ld-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes ld-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ld-wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes ld-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ld-dm-claude,.ld-dm-user,.ld-dm-resrow,.ld-dm-check,.ld-dm-cursor,.ld-dm-wave span{animation:none}
}
.ld-h2{font-size:26px;font-weight:var(--w-semibold);letter-spacing:var(--track-tight);margin:0 0 28px}
.ld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ld-step-num{font:var(--w-regular) var(--text-2xs)/1 var(--font-mono);color:var(--text-muted);margin-bottom:12px}
.ld-step-title{font-size:16px;font-weight:var(--w-semibold);letter-spacing:-0.01em;margin-bottom:8px}
.ld-step-body{font-size:14px;line-height:1.6;color:var(--text-secondary)}
.ld-list{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.6;color:var(--text-secondary)}
.ld-list li{position:relative;padding-left:22px;margin-bottom:6px}
.ld-list li::before{content:"✓";position:absolute;left:0;top:1px;font-size:12px;color:var(--text-muted)}
.ld-list-note{margin-top:10px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.ld-cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ld-cta-title{font-size:20px;font-weight:var(--w-semibold);letter-spacing:var(--track-tight);margin-bottom:6px}
.ld-cta-sub{font-size:14px;color:var(--text-secondary)}
.ld-footer{border-top:1px solid var(--stroke);margin-top:auto}
.ld-footer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px}
.ld-brand-dim{color:var(--text-muted);gap:8px}
.ld-brand-dim svg{width:16px;height:16px;opacity:.6}
.ld-footer-name{font-size:13px}
@media (max-width:719px){
  .ld-wrap{padding-left:20px;padding-right:20px}
  .ld-hero{padding:56px 0 48px}
  .ld-section{padding-bottom:56px}
  .ld-section-lg{padding-bottom:64px}
  .ld-dm-body{min-height:440px}
}
@media (max-width:559px){
  /* Demo head on one line: drop the context label, forbid wrapping. */
  .ld-dm-head{flex-wrap:nowrap;padding:14px 20px}
  .ld-dm-ctx{display:none}
  .ld-dm-head-left{min-width:0}
  .ld-dm-head-left .ld-mono-dim{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Grade buttons share one row on phones (real study screen and the
     landing tour alike); kbd hints mean nothing on touch. */
  .grade-row{flex-wrap:nowrap;gap:8px}
  .grade-row .fl-btn{flex:1 1 0;min-width:0;padding:0 8px}
  .grade-row kbd{display:none}
}

/* ---- stats heatmap ---- */
.hm-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--surface-active) transparent}
.hm-months{display:flex;width:max-content;margin-bottom:6px;font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-muted)}
.hm-months span{flex:none;overflow:hidden;white-space:nowrap}
.hm-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,10px);grid-auto-columns:10px;gap:3px;width:max-content}
.hm-cell{width:10px;height:10px;border-radius:2px;background:var(--surface-active)}
.hm-cell[data-level="1"]{background:color-mix(in srgb,var(--good) 25%,var(--surface-active))}
.hm-cell[data-level="2"]{background:color-mix(in srgb,var(--good) 45%,var(--surface-active))}
.hm-cell[data-level="3"]{background:color-mix(in srgb,var(--good) 70%,var(--surface-active))}
.hm-cell[data-level="4"]{background:var(--good)}
.hm-cell[data-future="true"][data-level="1"]{background:color-mix(in srgb,var(--text-secondary) 20%,var(--surface-active))}
.hm-cell[data-future="true"][data-level="2"]{background:color-mix(in srgb,var(--text-secondary) 40%,var(--surface-active))}
.hm-cell[data-future="true"][data-level="3"]{background:color-mix(in srgb,var(--text-secondary) 60%,var(--surface-active))}
.hm-cell[data-future="true"][data-level="4"]{background:color-mix(in srgb,var(--text-secondary) 85%,var(--surface-active))}
.hm-cell[data-today="true"]{outline:1px solid var(--accent)}
.hm-legend{margin:14px 0 0;font-size:13px;color:var(--text-muted)}
.hm-legend span{color:var(--good);font-family:var(--font-mono);font-size:var(--text-sm)}
.fl-stat-sub{font-size:16px;color:var(--text-muted);font-weight:var(--w-regular);margin-left:4px}

/* ---- connect page ---- */
.cn-brand-link{text-decoration:none;color:var(--text-body)}
.cn-main{flex:1;padding-bottom:96px}
.cn-hero{padding:64px 0 40px;max-width:640px}
.cn-title{font-size:clamp(32px,5vw,44px);line-height:1.1;font-weight:var(--w-semibold);letter-spacing:var(--track-tight);margin:0}
.cn-stack{display:flex;flex-direction:column;gap:16px;max-width:640px}
.cn-card{display:flex;flex-direction:column;gap:16px}
.cn-card-title{font-size:17px;font-weight:var(--w-semibold);letter-spacing:-0.01em;margin-bottom:6px}
.cn-card-body{font-size:14px;line-height:1.6;color:var(--text-secondary)}
.cn-card-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cn-card-actions a{text-decoration:none}
.cn-alt{font-size:13px;color:var(--text-muted);text-decoration:underline;text-decoration-color:var(--stroke-strong);text-underline-offset:3px}
.cn-mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-body)}
.cn-token{user-select:all}
.cn-manual{padding:4px 8px}
.cn-manual>*+*{margin-top:12px}
.ld-cta-link{color:inherit;text-decoration:underline;text-decoration-color:var(--stroke-strong);text-underline-offset:3px}
.ld-cta-link:hover{color:var(--text-body)}
.ld-footer-link{color:inherit;text-decoration:none}
.ld-footer-link:hover{color:var(--text-body);text-decoration:underline}

/* ---- AI connect chips (sidebar + dashboard) ---- */
.ai-stack{display:inline-flex;align-items:center;flex:none}
.ai-chip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface-active);border:1px solid var(--stroke-strong);margin-left:-6px}
.ai-chip:first-child{margin-left:0}
.ai-chip svg{width:11px;height:11px;color:var(--text-body)}
.sidebar-connect .ai-stack{margin-left:auto}
.connect-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;color:inherit;transition:background var(--dur-1) var(--ease)}
.connect-cta-wrap{position:relative}
.connect-cta-wrap .connect-cta{padding-right:56px}
.connect-cta-x{position:absolute;top:50%;right:14px;transform:translateY(-50%);margin:0}
.connect-cta-x button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:0;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.connect-cta-x button:hover{background:var(--surface-active);color:var(--text-body)}
.connect-cta:hover{background:var(--surface-hover);color:inherit}
.connect-cta-title{font-size:15px;font-weight:var(--w-semibold);letter-spacing:-0.01em;margin-bottom:4px}
.connect-cta-sub{font-size:13px;color:var(--text-secondary)}

/* Legal pages (/terms, /privacy): readable long-form text in the auth shell. */
.legal{max-width:560px;text-align:left;display:flex;flex-direction:column;gap:12px}
.legal h1{font-size:24px}
.legal h3{margin-top:8px}
.legal p{font-size:var(--text-sm);line-height:1.55;color:var(--text-body)}

/* ---- rich cards (imported Anki content, restyled in our design) ----
   Semantic structure only survives import; everything renders in Flash
   tokens so every theme stays clean. Plain-text cards keep their line
   breaks via pre-line. */
.study-card .front,.study-back{white-space:pre-line}
/* Block flow, not flex: imported HTML is inline-heavy and flex-column
   would shatter inline runs onto separate lines. */
.card-rich{white-space:normal}
.card-rich p,.card-rich div{margin:0 0 var(--sp-2)}
.card-rich p:last-child,.card-rich div:last-child{margin-bottom:0}
.card-rich ul,.card-rich ol{margin:0 0 var(--sp-2);padding-left:1.3em}
.card-rich li{margin:2px 0}
.card-rich hr{border:none;border-top:1px solid var(--stroke);margin:var(--sp-2) 0;width:100%}
.card-rich table{border-collapse:collapse;font-size:var(--text-sm)}
.card-rich td,.card-rich th{border:1px solid var(--stroke);padding:4px 10px;text-align:left}
.card-rich th{font-weight:var(--w-semibold);color:var(--text-secondary)}
.card-rich code,.card-rich pre,.editor-field code,.editor-field pre{background:var(--surface-raised);border-radius:var(--r-sm);padding:1px 5px}
.card-rich pre{padding:10px 12px;overflow-x:auto}
.card-rich img,.card-rich video{max-width:100%;border-radius:var(--r-md)}
.card-rich audio{width:100%;max-width:360px}
/* Custom audio player (ui.js enhances every card <audio>; native controls
   remain the no-JS fallback). */
.fl-audio-hidden{display:none!important}
.fl-audio{display:inline-flex;align-items:center;gap:10px;background:var(--surface-raised);border:1px solid var(--stroke);border-radius:var(--r-full);padding:5px 14px 5px 5px;max-width:280px;width:100%;vertical-align:middle}
.fl-audio-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-fg);border:none;cursor:pointer;padding:0;transition:background var(--dur-1) var(--ease)}
.fl-audio-btn:hover{background:var(--accent-hover)}
.fl-audio-track{flex:1;height:3px;border-radius:var(--r-full);background:var(--surface-active);overflow:hidden;min-width:40px}
.fl-audio-fill{display:block;height:100%;width:0%;border-radius:inherit;background:var(--accent)}
.fl-audio-time{font:var(--w-regular) var(--text-2xs)/1 var(--font-mono);color:var(--text-muted);flex-shrink:0;min-width:30px;text-align:right}
.cloze-blank{background:var(--warn-dim);color:var(--text-body);border-radius:var(--r-sm);padding:0 6px;font-weight:var(--w-semibold)}
/* Native collapsible (hint filter / translated reveal patterns). */
.card-rich details{margin:var(--sp-2) 0}
.card-rich summary{cursor:pointer;color:var(--text-secondary);font-size:var(--text-sm);user-select:none;width:fit-content}
.card-rich summary:hover{color:var(--text-body)}
.card-rich details[open]>summary{margin-bottom:var(--sp-1)}
/* Deck rows: no interactive widget inside the table — flatten to
   "label: content". */
.card-rich-row details{display:inline;margin:0}
.card-rich-row details>*{display:inline}
.card-rich-row summary{display:inline;list-style:none;color:var(--text-muted);pointer-events:none}
.card-rich-row summary::after{content:": "}
.card-rich-row details>:not(summary){display:inline}
/* Imported color intent, remapped to the palette: hl-* = text color,
   hl-bg-* = highlight tint. Tokens per theme. */
.hl-red{color:var(--ink-red)}.hl-amber{color:var(--ink-amber)}.hl-green{color:var(--ink-green)}.hl-teal{color:var(--ink-teal)}.hl-blue{color:var(--ink-blue)}.hl-purple{color:var(--ink-purple)}.hl-pink{color:var(--ink-pink)}
.hl-bg-red{background:var(--tint-red)}.hl-bg-amber{background:var(--tint-amber)}.hl-bg-green{background:var(--tint-green)}.hl-bg-teal{background:var(--tint-teal)}.hl-bg-blue{background:var(--tint-blue)}.hl-bg-purple{background:var(--tint-purple)}.hl-bg-pink{background:var(--tint-pink)}
.hl-bg-red,.hl-bg-amber,.hl-bg-green,.hl-bg-teal,.hl-bg-blue,.hl-bg-purple,.hl-bg-pink{border-radius:var(--r-sm);padding:0 4px;color:var(--text-body)}
.media-ref{display:inline-flex;align-items:center;gap:5px;background:var(--surface-raised);border:1px solid var(--stroke);border-radius:var(--r-full);padding:1px 10px;font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.media-ref::before{content:"🖼";font-size:10px}
.media-ref[data-kind="audio"]::before{content:"🔊"}
.media-ref[data-kind="video"]::before{content:"🎬"}
.card-rich-row{gap:2px;font-size:inherit}
.card-rich-row img{max-height:48px;width:auto;border-radius:var(--r-sm)}

/* typed-answer study flow */
.type-input{max-width:320px}
.type-diff{font-size:var(--text-md);letter-spacing:0.02em}
.type-ok{color:var(--good)}
.type-bad{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}

/* import advanced options: tucked away, zero friction on the main path */
.fl-advanced summary{cursor:pointer;font-size:var(--text-sm);color:var(--text-muted);user-select:none}
.fl-advanced summary:hover{color:var(--text-secondary)}
.fl-advanced-body{display:flex;flex-direction:column;gap:10px;padding:10px 0 0 2px;font-size:var(--text-sm)}

/* KaTeX inherits our theme text color; keep sizing tame inside cards */
.katex{font-size:1.06em}
.cloze-answer{background:var(--good-dim);color:var(--text-body);border-radius:var(--r-sm);padding:0 6px;font-weight:var(--w-semibold)}
.cloze-answer-block{display:block;background:var(--good-dim);border-left:3px solid var(--good);border-radius:var(--r-sm);padding:6px 12px;margin:var(--sp-2) 0;font-weight:var(--w-medium)}

/* ---- card editor (deck page Advanced mode + edit dialog) ---- */
.editor{display:flex;flex-direction:column;gap:12px}
.editor-advanced[hidden],[data-quick-fields][hidden]{display:none}
.editor-top{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.editor-type{flex:1;max-width:300px}
.editor-siblings{margin-bottom:8px}
.editor-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:4px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--surface-raised)}
.editor-tool{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-sm);height:var(--control-h-sm);border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);cursor:pointer;padding:0;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.editor-tool:hover{background:var(--surface-hover);color:var(--text-body)}
.editor-tool.is-active{background:var(--surface-active);color:var(--text-body)}
.editor-tool svg{width:15px;height:15px}
.editor-sep{width:1px;height:18px;background:var(--stroke-strong);margin:0 4px}
.editor-grow{flex:1}
.editor-hues{position:relative}
.editor-hues>summary{list-style:none}
.editor-hues>summary::-webkit-details-marker{display:none}
.editor-hues[open]>summary{background:var(--surface-active);color:var(--text-body)}
.editor-hues-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:60;display:flex;gap:4px;padding:6px;background:var(--surface-card);border:1px solid var(--stroke-strong);border-radius:var(--r-md);box-shadow:var(--shadow-pop);animation:fl-rise var(--dur-1) var(--ease)}
.editor-swatch{width:26px;height:26px;border:1px solid var(--stroke);border-radius:var(--r-sm);background:transparent;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;font:var(--w-semibold) var(--text-sm)/1 var(--font-sans);transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.editor-swatch:hover{border-color:var(--stroke-strong);transform:translateY(-1px)}
.editor-swatch.is-clear{color:var(--text-muted)}
.editor-field{min-height:84px;padding:8px 10px;border:1px solid var(--stroke-strong);border-radius:var(--r-sm);background:transparent;color:var(--text-body);font:var(--w-regular) var(--text-base)/var(--leading-snug) var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere;outline:none;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.editor-field:focus{border-color:var(--accent)}
.editor-field.is-drag{border-color:var(--accent);border-style:dashed;background:var(--surface-hover)}
.editor-field:empty::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}
.editor-field[hidden]{display:none}
.editor-field p,.editor-field div{margin:0}
.editor-field ul,.editor-field ol{margin:4px 0;padding-left:1.3em}
.editor-field img,.editor-field video{max-width:100%;max-height:220px;border-radius:var(--r-md);display:block;margin:6px 0}
.editor-field audio{width:100%;max-width:360px;display:block;margin:6px 0}
.editor-field table{border-collapse:collapse}
.editor-field td,.editor-field th{border:1px solid var(--stroke);padding:4px 10px}
.editor-uploading{display:inline-block;padding:2px 8px;border-radius:var(--r-full);background:var(--surface-raised);color:var(--text-muted);font-size:var(--text-xs);animation:fl-pulse 1.2s ease-in-out infinite}
@keyframes fl-pulse{50%{opacity:.5}}
.editor-source{font-family:var(--font-mono);font-size:var(--text-sm)}
.editor-source[hidden]{display:none}
.editor-hint kbd{font:var(--w-medium) var(--text-2xs)/1 var(--font-mono);padding:2px 5px;border:1px solid var(--stroke-strong);border-bottom-width:2px;border-radius:4px;background:var(--surface-raised);color:var(--text-secondary)}
.editor-typed-hint,.editor-cloze-only,.editor-reversed-only{display:none}
[data-type="basic_typed"] .editor-typed-hint{display:block}
[data-type="cloze"] .editor-cloze-only{display:inline}
[data-type="cloze"] .editor-toolbar .editor-cloze-only{display:inline-flex}
[data-type="basic_reversed"] .editor-reversed-only{display:inline}
.editor-status{margin:0;font-size:var(--text-sm);color:var(--bad)}
.editor-status[hidden]{display:none}
.editor-error{padding:8px 12px;border:1px solid var(--bad);border-radius:var(--r-sm);background:var(--bad-dim);color:var(--bad);font-size:var(--text-sm)}
.editor-dialog{width:min(780px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:14px}
.editor-dialog-head{display:flex;align-items:center;justify-content:space-between}
.editor-kind{margin-left:6px;vertical-align:middle}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 4px}

/* ---- community / sharing ---- */
.preview-col{display:flex;flex-direction:column;gap:var(--sp-4)}
/* joined chevron pair: one pill, single divider between the two */
.fl-seg{display:inline-flex}
.fl-seg>.fl-btn{border-radius:0}
.fl-seg>.fl-btn:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.fl-seg>.fl-btn:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;margin-left:-1px}
.listing-desc{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.share-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap;margin:24px 0}
.share-cta{display:flex;flex-direction:column;gap:8px;max-width:320px}
.fl-badge-toast{transition:opacity .4s ease}
.fl-badge-toast.is-gone{opacity:0}
.save-note{font-size:var(--text-sm);color:var(--text-muted);align-self:center}