:root[data-palette="shu"][data-theme="dark"]{--bg:#141210;--surface:#1c1916;--surface2:#26221d;--border:#363029;--text:#ece5d8;--muted:#a39887;--accent:#e8643f;--accent-fg:#e8643f;--on-accent:#1a0d07;--ok:#8dbb6a;--bad:#e0566a;--warn:#d9a441;--info:#79a8cc;--n5:#e8643f;--n4:#d9a441;--n3:#8dbb6a;--n2:#79a8cc;--n1:#b58bd1;--shadow-c:rgb(0 0 0 / .45);--on-color:var(--bg);color-scheme:dark}
:root[data-palette="shu"][data-theme="light"]{--bg:#f4eee3;--surface:#fbf8f2;--surface2:#efe7d9;--border:#dcd0bc;--text:#241f1a;--muted:#6b6053;--accent:#bf3f28;--accent-fg:#bf3f28;--on-accent:#ffffff;--ok:#4a7a33;--bad:#b02e48;--warn:#9c6c0d;--info:#386a91;--n5:#bf3f28;--n4:#9c6c0d;--n3:#4a7a33;--n2:#386a91;--n1:#7a53a0;--shadow-c:color-mix(in srgb,var(--text) 12%,transparent);--on-color:var(--surface);color-scheme:light}
:root[data-palette="ai"][data-theme="dark"]{--bg:#0e1419;--surface:#151d24;--surface2:#1d2832;--border:#2a3a47;--text:#e3ebf0;--muted:#8ea2b0;--accent:#5aaad8;--accent-fg:#5aaad8;--on-accent:#06121a;--ok:#5cc19a;--bad:#ec7c6c;--warn:#e6b85c;--info:#a99be8;--n5:#ec7c6c;--n4:#e6b85c;--n3:#5cc19a;--n2:#5aaad8;--n1:#a99be8;--shadow-c:rgb(0 0 0 / .45);--on-color:var(--bg);color-scheme:dark}
:root[data-palette="ai"][data-theme="light"]{--bg:#eef3f6;--surface:#ffffff;--surface2:#e3ebf1;--border:#c9d6df;--text:#14222d;--muted:#526878;--accent:#21618e;--accent-fg:#21618e;--on-accent:#ffffff;--ok:#22774f;--bad:#b5402e;--warn:#8f6511;--info:#5c4fae;--n5:#b5402e;--n4:#8f6511;--n3:#22774f;--n2:#21618e;--n1:#5c4fae;--shadow-c:color-mix(in srgb,var(--text) 12%,transparent);--on-color:var(--surface);color-scheme:light}
:root[data-palette="matcha"][data-theme="dark"]{--bg:#11140f;--surface:#181c15;--surface2:#21271c;--border:#30392a;--text:#e6eadc;--muted:#9aa58b;--accent:#a8cc5e;--accent-fg:#a8cc5e;--on-accent:#141a08;--ok:#6fd09a;--bad:#e47d6c;--warn:#d9b25a;--info:#7fb2c9;--n5:#e47d6c;--n4:#d9b25a;--n3:#a8cc5e;--n2:#7fb2c9;--n1:#b79ad6;--shadow-c:rgb(0 0 0 / .45);--on-color:var(--bg);color-scheme:dark}
:root[data-palette="matcha"][data-theme="light"]{--bg:#f1f2e9;--surface:#fbfbf6;--surface2:#e7eadb;--border:#d1d6bf;--text:#1e2318;--muted:#5c674c;--accent:#56751b;--accent-fg:#56751b;--on-accent:#ffffff;--ok:#24794a;--bad:#ad412e;--warn:#876811;--info:#2f6c88;--n5:#ad412e;--n4:#876811;--n3:#56751b;--n2:#2f6c88;--n1:#6c549a;--shadow-c:color-mix(in srgb,var(--text) 12%,transparent);--on-color:var(--surface);color-scheme:light}
:root[data-palette="yozakura"][data-theme="dark"]{--bg:#151118;--surface:#1d1821;--surface2:#28212d;--border:#3a2f41;--text:#f0e6ee;--muted:#ab9aaa;--accent:#f28db2;--accent-fg:#f28db2;--on-accent:#2a0f1b;--ok:#8fd19e;--bad:#ff8a73;--warn:#f0c674;--info:#8ab4f0;--n5:#f28db2;--n4:#f0c674;--n3:#8fd19e;--n2:#8ab4f0;--n1:#c4a1f0;--shadow-c:rgb(0 0 0 / .45);--on-color:var(--bg);color-scheme:dark}
:root[data-palette="yozakura"][data-theme="light"]{--bg:#f8f0f3;--surface:#fffafc;--surface2:#f1e3ea;--border:#e1ccd6;--text:#2b1a24;--muted:#715c68;--accent:#b03a68;--accent-fg:#b03a68;--on-accent:#ffffff;--ok:#2c7944;--bad:#b23e29;--warn:#8a6110;--info:#375fa3;--n5:#b03a68;--n4:#8a6110;--n3:#2c7944;--n2:#375fa3;--n1:#7046a3;--shadow-c:color-mix(in srgb,var(--text) 12%,transparent);--on-color:var(--surface);color-scheme:light}
:root,:root[data-palette="kokuban"][data-theme="dark"]{--bg:#121414;--surface:#1a1d1d;--surface2:#242828;--border:#353b3b;--text:#e9ecea;--muted:#9aa3a0;--accent:#f2cf5b;--accent-fg:#f2cf5b;--on-accent:#1b1603;--ok:#6fd08c;--bad:#f07b7b;--warn:#f2a65b;--info:#7cc0e8;--n5:#f07b7b;--n4:#f2a65b;--n3:#f2cf5b;--n2:#6fd08c;--n1:#7cc0e8;--shadow-c:rgb(0 0 0 / .45);--on-color:var(--bg);color-scheme:dark}
:root[data-palette="kokuban"][data-theme="light"]{--bg:#f3f4f1;--surface:#ffffff;--surface2:#eaece8;--border:#d2d6d1;--text:#1a1d1c;--muted:#5a6360;--accent:#f2c94c;--accent-fg:#7d5300;--on-accent:#1d1a0e;--ok:#287744;--bad:#b03838;--warn:#965710;--info:#24648c;--n5:#b03838;--n4:#965710;--n3:#7d5300;--n2:#287744;--n1:#24648c;--shadow-c:color-mix(in srgb,var(--text) 12%,transparent);--on-color:var(--surface);color-scheme:light}
/* Theme tokens above: one block per palette x mode (values from the theme palette sketch, ticket 18); bare :root = Kokuban dark default. Aliases + phase colors below. */
/* Card maturity stages (Stats): fixed, validated per mode, not palette-derived. Sequential ramp s1..s4 = one hue (accent-fg) over surface2. */
:root,:root[data-theme="dark"]{--m-new:#9085e9;--m-learn:#d95926;--m-young:#3987e5;--m-mature:#199e70}
:root[data-theme="light"]{--m-new:#4a3aa7;--m-learn:#eb6834;--m-young:#2a78d6;--m-mature:#1baf7a}
:root{--s1:color-mix(in oklch,var(--accent-fg) 22%,var(--surface2));--s2:color-mix(in oklch,var(--accent-fg) 45%,var(--surface2));--s3:color-mix(in oklch,var(--accent-fg) 72%,var(--surface2));--s4:var(--accent-fg)}
/* Thin scrollbar tinted from the active palette: muted thumb, accent on hover. Standard props (Firefox, Chrome 121+) + WebKit fallback. */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
*:hover{scrollbar-color:color-mix(in srgb,var(--accent-fg) 70%,transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-fg)}
:root{--radius:8px;--btn-again:var(--bad);--btn-hard:var(--warn);--btn-good:var(--ok);--btn-easy:var(--info);--level-n5:var(--n5);--level-n4:var(--n4);--level-n3:var(--n3);--level-n2:var(--n2);--level-n1:var(--n1);--shadow:0 2px 12px var(--shadow-c)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.app{display:flex;flex-direction:column;min-height:100vh}
.storage-warning{background:var(--bad);color:var(--on-color);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;font-size:0.85rem;gap:8px}
.storage-warning-msg{display:flex;align-items:center;gap:10px}
.storage-warning .jelly{filter:drop-shadow(0 0 1.5px var(--on-color)) drop-shadow(0 1px 2px rgb(0 0 0/.35))}
.storage-warning-dismiss{background:transparent;border:1px solid currentColor;color:inherit;padding:2px 10px;border-radius:var(--radius);cursor:pointer;font-size:0.8rem}
/* Navbar (sketch option A): brand · tabs · gear. <640px: tabs → fixed bottom bar */
.header{background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);padding:0 16px;height:60px;display:flex;align-items:center;gap:22px;position:relative;z-index:20}
.brand{font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;font-size:1.15rem;font-weight:600;white-space:nowrap;display:flex;align-items:baseline;gap:6px}
/* Jelly mascot colours per palette (both modes). Bare :root = Kokuban lemon. l=centre, m=body, d=edge, g=base glow, rim=outline, eye */
:root,:root[data-palette="kokuban"]{--jl:#fff1a0;--jm:#f2cf5b;--jd:#c9971c;--jg:#fff8d6;--jrim:#fffbe8;--jeye:#2b2005}
:root[data-palette="shu"]{--jl:#ffb89a;--jm:#ee6f45;--jd:#b8401f;--jg:#ffe3d6;--jrim:#fff1ea;--jeye:#2d0f06}
:root[data-palette="ai"]{--jl:#a8e0ff;--jm:#5bb4ee;--jd:#2a76b8;--jg:#e0f4ff;--jrim:#eef9ff;--jeye:#0c2438}
:root[data-palette="matcha"]{--jl:#dcff9a;--jm:#9fdc4a;--jd:#5f9a1c;--jg:#f0ffd0;--jrim:#f8ffe8;--jeye:#142405}
:root[data-palette="yozakura"]{--jl:#ffd6ea;--jm:#f59cc8;--jd:#c4659a;--jg:#ffeaf4;--jrim:#fff5fa;--jeye:#35122a}
.jelly{flex:none;overflow:visible}
.brand .jelly{align-self:center;margin-right:2px}
.jelly-wob{transform-origin:50% 100%;animation:jelly-wob 3.2s ease-in-out infinite}
@keyframes jelly-wob{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@media (prefers-reduced-motion:reduce){.jelly-wob{animation:none}}
.qz-ring .qz-jelly{position:absolute;inset:0;display:grid;place-items:center}
.qz-ring .qz-jelly svg{width:84px;height:84px}
.mock-estimate-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.mock-estimate-head .mock-estimate-total{margin-bottom:0}
.rv-caught{display:flex;align-items:center;gap:10px}
.stats-empty .jelly{display:block;margin:0 auto 6px}
.review-empty-icon .jelly{display:block;margin:0 auto}
.brand small{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:0.7rem;color:var(--muted);font-weight:500}
.nav-tabs{display:flex;gap:4px;align-self:stretch}
.tab{border:0;background:transparent;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:0.86rem;white-space:nowrap;padding:0 12px;position:relative;min-height:44px}
.tab:hover{color:var(--text)}
.tab[aria-current="page"]{color:var(--text);font-weight:600}
.tab[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.tab svg{display:none}
.tab ruby{ruby-align:center}
.tab rt{color:inherit;opacity:0.75}
.icon-btn{margin-left:auto;width:44px;height:44px;flex-shrink:0;border-radius:var(--radius);border:1px solid transparent;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.streak{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:0.82rem;font-weight:650;color:var(--warn);font-variant-numeric:tabular-nums;white-space:nowrap}
.streak+.icon-btn,.streak+.pop-wrap,.pop-wrap+.icon-btn{margin-left:0}
.icon-btn:hover,.icon-btn[aria-current="page"]{background:var(--surface2);color:var(--text)}
.tab svg,.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill{font-size:0.66rem;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:639px){
  .header{height:54px;gap:10px}
  .app{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .nav-tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--surface);border-top:1px solid var(--border);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tab{flex-direction:column;justify-content:center;gap:3px;font-size:0.7rem;padding:6px 0;min-height:52px}
  .tab svg{display:block}
  .tab[aria-current="page"]{color:var(--accent-fg)}
  .tab[aria-current="page"]::after{display:none}
  .tab .pill{position:absolute;top:2px;left:calc(50% + 6px)}
}
.data-btn,.tts-rate-select,.theme-select,.theme-toggle{min-height:44px}
.tts-rate-select,.theme-select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:3px 4px;font-size:0.8rem;cursor:pointer;font-family:inherit}
.data-btn,.theme-toggle{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:3px 8px;font-size:0.8rem;cursor:pointer;white-space:nowrap;font-family:inherit}
.data-btn:hover,.theme-toggle:hover{background:var(--border)}
a.data-btn{display:inline-flex;align-items:center;text-decoration:none}
.theme-toggle{min-width:64px}
.theme-toggle[aria-checked="true"]{border-color:var(--accent-fg);color:var(--accent-fg)}
/* Settings view */
.settings{max-width:640px;margin:0 auto}
.settings-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.settings-head h2{font-size:1.3rem}
.back-btn{min-height:44px;padding:0 14px;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:8px;cursor:pointer;font-family:inherit;font-size:0.85rem}
.back-btn:hover{background:var(--surface2)}
.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 20px;margin-bottom:14px}
.settings-section h3{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:6px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 0;font-size:0.92rem}
.setting-hint{font-size:0.85rem;color:var(--muted)}
.setting-btns{display:flex;gap:8px}
/* Settings → Sync */
.sync-input{flex:1 1 220px;max-width:340px;min-height:44px;padding:6px 10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:var(--radius);font-size:0.9rem;font-family:inherit}
.sync-input:focus{outline:2px solid var(--accent-fg);outline-offset:1px}
.sync-input[aria-invalid="true"]{border-color:var(--bad)}
.sync-check{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.sync-check input{width:18px;height:18px;accent-color:var(--accent-fg)}
.sync-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;font-size:0.9rem}
.sync-form-err{color:var(--bad);font-size:0.88rem;padding:6px 0}
.sync-who{overflow-wrap:anywhere}
.credits{list-style:none;display:grid;gap:2px}
.credits li{padding:8px 0;border-top:1px solid var(--border);font-size:0.9rem;color:var(--muted);line-height:1.4}
.credits li:first-child{border-top:0}
.credits a{color:var(--accent-fg);text-underline-offset:2px}
/* Settings → already known (ticket 37) */
.import-h{font-size:0.92rem;margin:14px 0 4px}
.import-hist{list-style:none}
.quick-sort .level-progress-bar{width:100%;margin:8px 0 4px}
.qs-card{text-align:center;padding:24px 8px;margin:8px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.qs-kind{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.qs-front{font-size:3rem;line-height:1.3;overflow-wrap:anywhere}
.qs-done{padding:20px 0;text-align:center}
.qs-btns{justify-content:center;flex-wrap:wrap;margin:8px 0}
.qs-btns button{min-height:44px;min-width:110px}
.paste-text{width:100%;min-height:110px;padding:8px 10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:var(--radius);font-size:0.9rem;font-family:inherit;resize:vertical}
.paste-group{border:1px solid var(--border);border-radius:8px;padding:6px 12px;margin:8px 0}
.paste-group legend{font-weight:600;font-size:0.88rem;padding:0 4px}
.paste-list{list-style:none;max-height:220px;overflow-y:auto}
.paste-list label{display:flex;align-items:baseline;gap:4px;padding:3px 0;cursor:pointer}
.known-btn{display:block;margin:12px auto 0}
.sync-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.sync-dot.sync-synced{background:var(--ok)}
.sync-dot.sync-syncing,.sync-dot.sync-connecting{background:var(--info)}
.sync-dot.sync-offline{background:var(--warn)}
.sync-dot.sync-error{background:var(--bad)}
.icon-btn{position:relative}
.icon-btn .sync-dot{position:absolute;top:9px;right:9px;box-shadow:0 0 0 2px var(--surface)}
/* Overview level ramp (sketch option B) */
.ramp{position:relative;margin-top:30px;display:grid;gap:3px}
.ramp-bars{display:flex;gap:3px;height:10px}
.ramp-bars i{border-radius:3px;position:relative;overflow:hidden;background:color-mix(in srgb,var(--lv) 22%,var(--surface2))}
.ramp-bars b{position:absolute;inset:0 auto 0 0;background:var(--lv)}
.ramp-lbl{display:flex;gap:3px;font-size:0.64rem;color:var(--muted);font-weight:650;letter-spacing:0.03em}
.ramp-lbl span{overflow:hidden}
.ramp-here{position:absolute;top:-26px;left:clamp(28px,var(--here),calc(100% - 28px));transform:translateX(-50%);font-size:0.7rem;font-weight:700;background:var(--text);color:var(--bg);padding:1px 7px;border-radius:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ramp-here::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);border:4px solid transparent;border-bottom:0;border-top-color:var(--text)}
.ramp-meta{font-size:0.85rem;color:var(--muted);margin:8px 0 16px}
.main{flex:1;padding:20px;max-width:900px;margin:0 auto;width:100%}
.main.wide{max-width:1120px}
.day-card{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.day-header{padding:20px 24px 16px;border-bottom:2px solid var(--border)}
.day-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.day-num{font-size:2rem;font-weight:800;color:var(--text)}
.phase-badge{padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;color:var(--on-color)}
.week-badge{padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:500;background:var(--surface2);color:var(--muted)}
.complete-badge{padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;background:var(--ok);color:var(--on-color)}
.day-title{font-size:1.4rem;font-weight:700;color:var(--text);line-height:1.3}
.day-body{padding:20px 24px}
.section{margin-bottom:20px}
.section-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px}
.intro-text{font-size:0.95rem;line-height:1.6;color:var(--text);padding:12px 16px;background:var(--surface2);border-radius:8px;border-left:3px solid var(--accent-fg)}
.vocab-table{width:100%;border-collapse:separate;border-spacing:0 4px}
.vocab-table thead tr{background:none}
.vocab-table th{padding:4px 12px;font-size:0.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;background:none}
.vocab-table tbody tr{background:var(--surface2);border-radius:6px}
.vocab-table td{padding:8px 12px;font-size:0.9rem}
.vocab-table td:first-child{font-size:1.1rem;font-weight:600;color:var(--text);border-radius:6px 0 0 6px}
.vocab-table td:last-child{color:var(--ok);font-weight:500;border-radius:0 6px 6px 0}
.vocab-table td:nth-child(2):not(:last-child){color:var(--muted);font-size:0.85rem}
/* Vocabulary: grouped cover-and-test list */
.vocab-btn{padding:5px 12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:var(--radius);font-family:inherit;font-size:0.8rem;cursor:pointer}
.vocab-btn:hover{border-color:var(--accent-fg)}
.vocab-group{margin-top:14px}
.vocab-group:first-of-type{margin-top:0}
.vocab-cols-grp{font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text)}
.vocab-cols.quiet span{visibility:hidden}
.vocab-list{list-style:none;display:grid;gap:4px}
.vocab-cols,.vocab-row{display:grid;grid-template-columns:minmax(92px,1.1fr) minmax(88px,1fr) minmax(0,2fr) 44px;align-items:center;gap:10px}
.vocab-cols{margin-bottom:2px;padding:0 4px 0 12px;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.vocab-row{background:var(--surface2);border-radius:6px;padding:4px 4px 4px 12px}
.vocab-jp{font-size:1.25rem;font-weight:600;line-height:1.2}
.vocab-cell{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 10px 0 0;border:1px dashed transparent;border-radius:6px;background:transparent;color:inherit;font-family:inherit;text-align:left}
.vocab-reading{font-size:1rem;color:var(--text)}
.vocab-meaning{font-size:0.9rem;font-weight:500;color:var(--ok)}
.vocab-none{color:var(--muted);opacity:0.5}
.vocab-cell.covered{padding:0 10px;border-color:var(--border);background:repeating-linear-gradient(135deg,var(--surface) 0 6px,var(--surface2) 6px 12px);color:var(--muted);cursor:pointer}
.vocab-cell.covered:hover{border-color:var(--accent-fg)}
.vocab-tap{font-size:0.75rem;font-weight:400}
.vocab-usage{color:var(--muted);font-weight:400}
.pos-chip{font-size:0.68rem;font-weight:600;padding:1px 7px;border-radius:99px;border:1px solid var(--border);color:var(--muted)}
.speak-btn-row{width:44px;height:44px;padding:0;border-radius:var(--radius)}
.speak-btn-row:hover{background:var(--surface)}
@media (max-width:560px){.vocab-cols{display:block}.vocab-cols span{display:none}.vocab-row{grid-template-columns:1fr 1fr 44px;row-gap:2px}.vocab-col-meaning{grid-column:1 / -1;grid-row:2}}
.read-list .vocab-row{grid-template-columns:minmax(92px,1.1fr) minmax(0,3fr) 44px}
@media (max-width:560px){.read-list .vocab-row{grid-template-columns:1fr 44px}}
.grammar-card{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:20px}
.grammar-rail{padding-right:20px;border-right:1px solid var(--border)}
.grammar-pattern{font-size:1.5rem;font-weight:700;line-height:1.25;color:var(--accent-fg);overflow-wrap:anywhere}
.grammar-alt{display:block}
.grammar-alt+.grammar-alt{margin-top:2px;font-size:1.05rem;font-weight:600;opacity:0.85}
.grammar-meaning{margin:6px 0 12px;font-size:0.9rem}
.grammar-form{font-size:0.8rem;line-height:1.5;color:var(--muted)}
.grammar-form b{display:block;margin-bottom:2px;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase}
.grammar-steps{margin-bottom:14px}
.grammar-steps ul{list-style:none;display:grid;gap:4px;font-size:0.88rem;color:var(--text)}
.grammar-steps li{padding:6px 10px;border-radius:6px;background:var(--surface2)}
.grammar-notes{margin-bottom:14px;font-size:0.88rem;line-height:1.6;text-wrap:pretty}
.grammar-examples{display:grid;gap:10px}
.grammar-example{font-size:0.9rem}
.grammar-example .jp{font-size:1.05rem;font-weight:600;color:var(--text)}
.grammar-example mark{background:none;color:var(--accent-fg);font-weight:700;border-bottom:2px solid color-mix(in srgb,var(--accent-fg) 45%,transparent)}
.grammar-example .en{color:var(--muted);font-size:0.85rem;margin-top:2px}
.example-list{display:grid;gap:10px}
.example-card{display:flex;align-items:center;gap:8px;padding:10px 6px 10px 18px;background:var(--surface2);border-radius:12px}
.example-text{flex:1;min-width:0}
.example-text .jp{font-size:1.35rem;font-weight:600;letter-spacing:0.02em;line-height:2}
.example-text .jp rt{font-size:0.55em;font-weight:400;color:var(--muted)}
.example-text .en{color:var(--muted);font-size:0.9rem}
.example-speak{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.example-speak:hover{color:var(--accent-fg);background:var(--surface)}
.example-speak:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px}
.example-speak svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.example-text .jp{font-size:1.15rem}}
@media (max-width:560px){.grammar-card{grid-template-columns:1fr}.grammar-rail{padding:0 0 14px;border-right:0;border-bottom:1px solid var(--border)}}
.practice-box{background:color-mix(in srgb,var(--warn) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,var(--surface));border-radius:8px;padding:12px 16px;font-size:0.9rem;line-height:1.6;color:var(--text);white-space:pre-line}
.nav-bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px 10px;border-top:1px solid var(--border);background:var(--surface2);gap:12px}
.nav-edge{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--border)}
.nav-edge i{display:block;height:100%;background:var(--ok)}
.nav-arrow{justify-self:start;min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--muted);font:inherit;font-size:1.1rem;cursor:pointer}
.nav-arrow:hover:not(:disabled){border-color:var(--accent-fg);color:var(--text)}
.nav-arrow:disabled{opacity:0.3;cursor:not-allowed}
.nav-mid{text-align:center;line-height:1.35;min-width:0}
.nav-mid b{display:block;font-size:0.9rem}
.nav-mid b span,.nav-status,.nav-pace{color:var(--muted)}
.nav-mid b span{font-weight:400}
.nav-status{font-size:0.8rem}
.nav-pace{font-size:0.72rem}
.nav-ok{color:var(--ok);font-weight:600}
.nav-link{background:none;border:0;padding:0 2px;min-height:24px;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nav-link:hover{color:var(--text)}
.nav-act{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.nav-skip{min-height:44px;padding:0 10px;border:0;border-radius:var(--radius);background:none;color:var(--muted);font:inherit;font-size:0.85rem;cursor:pointer}
.nav-skip:hover{color:var(--text);background:var(--surface)}
.nav-btn{min-height:44px;padding:0 20px;border-radius:var(--radius);border:none;cursor:pointer;font-family:inherit;font-size:0.9rem;font-weight:600;white-space:nowrap}
.nav-btn.next{background:var(--accent);color:var(--on-accent)}
.nav-btn.next:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text))}
@media (max-width:720px){.nav-bar{grid-template-columns:44px 1fr auto}.nav-mid{text-align:left}.nav-act{display:contents}.nav-act .nav-btn{grid-column:1/-1}.nav-pace{display:none}}
/* Units + Stats tabs (ticket 28): shared card */
.overview,.stats{display:grid;gap:14px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px 16px;min-width:0}
.panel-h{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.panel-h .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500;font-size:0.76rem}
.linkish{border:0;background:none;color:var(--accent-fg);cursor:pointer;font:inherit;font-weight:600;padding:2px 0}
/* Units tab: course strip (ramp + pace) and per-level unit grids */
.course{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:end}
.course .ramp{margin-top:26px}
.course .ramp-meta{margin:0}
.course .ramp-meta p+p{margin-top:2px}
.course .ramp-meta strong{color:var(--text)}
.level-section+.level-section{margin-top:14px}
.level-section h3{font-size:0.9rem;font-weight:800;min-width:2.2em;color:var(--lv)}
.unit-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px;margin-top:8px}
.unit-row{width:100%;height:100%;min-height:44px;display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-left:3px solid var(--lv);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:0.84rem;text-align:left;cursor:pointer}
.unit-row:hover{background:var(--surface2)}
.unit-row.current{outline:2px solid var(--text);outline-offset:-1px}
.unit-row.next{background:color-mix(in oklab,var(--lv) 14%,var(--surface))}
.unit-row.done{background:color-mix(in srgb,var(--ok) 11%,var(--surface));border-color:color-mix(in srgb,var(--ok) 45%,var(--border));border-left-color:var(--ok)}
.unit-row.done:hover{background:color-mix(in srgb,var(--ok) 18%,var(--surface))}
.unit-row.done .unit-num{color:var(--ok)}
.unit-row.skipped{background:repeating-linear-gradient(135deg,var(--surface) 0 6px,var(--surface2) 6px 12px);color:var(--muted)}
.unit-row.skipped:hover{background:var(--surface2)}
.unit-row.skipped .unit-num{opacity:.7}
.unit-skipped{font-size:0.64rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:1px 6px;white-space:nowrap}
.unit-row .week-badge{padding:1px 8px;font-size:0.66rem;font-weight:700}
.overview .qz-entry{margin:0}
.up-next p{margin-top:4px;font-size:0.82rem;color:var(--muted)}
.lv-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.lv-card{display:flex;flex-direction:column;gap:3px;min-height:84px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.lv-card b{font-size:1.05rem;color:var(--lv)}
.lv-card small{font-size:0.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lv-card .level-progress-bar{display:block;width:100%;margin-top:auto}
.lv-card .level-progress-fill{display:block}
.lv-card[aria-pressed="true"]{border-color:var(--lv);box-shadow:0 0 0 1px var(--lv)}
.lv-card:disabled{opacity:0.5;cursor:default}
.lv-card:disabled b{color:var(--muted)}
.unit-fold-li{grid-column:1/-1}
.unit-fold,.unit-showall{width:100%;min-height:44px;border:1px dashed var(--border);border-radius:8px;background:none;color:var(--muted);font:inherit;font-size:0.82rem;cursor:pointer}
.unit-fold{display:flex;align-items:center;gap:8px;padding:0 10px;text-align:left}
.unit-showall{margin-top:8px;border-style:solid;background:var(--surface2);color:var(--text);font-weight:600}
.unit-fold:hover,.unit-showall:hover{border-color:var(--text);color:var(--text)}
@media(max-width:620px){.lv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.unit-num{font-variant-numeric:tabular-nums;color:var(--muted);min-width:1.6em}
.unit-title{flex:1;min-width:0}
.unit-next{font-size:0.66rem;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--lv);color:var(--on-color)}
.unit-done{color:var(--ok);font-weight:700}
/* Stats tab: KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{display:grid;gap:2px;align-content:start}
.kpi .lbl{font-size:0.72rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-size:1.75rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;line-height:1.15}
.kpi .val small{font-size:0.9rem;font-weight:600;color:var(--muted);margin-left:3px}
.kpi .ctx{font-size:0.78rem;color:var(--muted)}
.kpi .ctx b{color:var(--text);font-weight:600}
.kpi .spark{margin-top:6px;width:100%;height:28px;overflow:visible}
.kpi .cta{margin-top:8px;justify-self:start;border:0;background:var(--accent);color:var(--on-accent);border-radius:8px;padding:6px 14px;min-height:36px;font:inherit;font-weight:650;font-size:0.8rem;cursor:pointer}
.kpi .cta:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text))}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
@media(max-width:900px){.two,.course{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Upcoming reviews: overdue + 14 day columns */
.fc{height:150px;display:grid;grid-template-columns:44px repeat(14,minmax(0,1fr));gap:2px;align-items:end;padding-top:14px}
.fc-col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px 4px 0 0}
.fc-col i{display:block;border-radius:4px 4px 0 0;background:var(--s3);min-height:2px}
.fc-col.today i{background:var(--s4)}
.fc-col.over i{background:var(--warn)}
.fc-col:hover i,.fc-col:focus-visible i{filter:brightness(1.15)}
.fc-col:focus-visible{outline:2px solid var(--accent-fg);outline-offset:1px}
.fc-col .v{font-size:0.66rem;text-align:center;color:var(--text);font-weight:650;font-variant-numeric:tabular-nums;margin-bottom:2px;min-height:1.2em}
.fc-x{display:grid;grid-template-columns:44px repeat(14,minmax(0,1fr));gap:2px;font-size:0.62rem;color:var(--muted);text-align:center;margin-top:4px;white-space:nowrap}
.fc-x .t{color:var(--text);font-weight:650}
.fc-x .o{color:var(--warn);font-weight:650}
@media(max-width:639px){.fc,.fc-x{grid-template-columns:40px repeat(14,minmax(0,1fr))}.fc-x .wd{visibility:hidden}}
/* Card maturity: stacked bars */
.stack{display:flex;gap:2px;height:18px;border-radius:5px;overflow:hidden}
.stack i{display:block;height:100%;min-width:2px}
.stack i:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.legend div{font-size:0.74rem;color:var(--muted)}
.legend b{display:block;font-size:1.05rem;color:var(--text);font-variant-numeric:tabular-nums}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.types{display:grid;gap:8px;margin-top:14px}
.trow{display:grid;grid-template-columns:64px minmax(0,1fr) 48px;align-items:center;gap:10px;font-size:0.78rem}
.trow .n{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.trow .stack{height:10px;border-radius:3px}
/* Study activity heatmap: fixed 13px cells, scrolls on narrow screens */
.hm-scroll{overflow-x:auto;padding:3px}
.hm-grid{display:grid;grid-template-columns:28px max-content;gap:3px 6px;width:max-content}
.hm-months,.hm{display:grid;grid-auto-flow:column;grid-auto-columns:13px;gap:3px}
.hm-months{font-size:0.62rem;color:var(--muted);white-space:nowrap;height:14px}
.hm-days{display:grid;grid-template-rows:repeat(7,13px);gap:3px;font-size:0.6rem;line-height:13px;color:var(--muted)}
.hm{grid-template-rows:repeat(7,13px)}
.hm i,.hm-foot .sw i{display:block;width:13px;height:13px;border-radius:3px;background:var(--surface2)}
.hm i.l1,.sw i.l1{background:var(--s1)}
.hm i.l2,.sw i.l2{background:var(--s2)}
.hm i.l3,.sw i.l3{background:var(--s3)}
.hm i.l4,.sw i.l4{background:var(--s4)}
.hm i.future{background:transparent}
.hm i.today{outline:2px solid var(--text);outline-offset:1px}
.hm-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:0.74rem;color:var(--muted)}
.hm-foot .sw{display:flex;gap:3px}
.hm-foot .sw i{width:11px;height:11px}
.hm-foot .sum{margin-left:auto}
.hm-foot .sum b{color:var(--text)}
.stats-empty{font-size:0.84rem;color:var(--muted);padding:18px 4px;text-align:center}
.stats-empty b{color:var(--text);display:block;margin-bottom:2px}
/* Shared chart tooltip: one element, follows the pointer / sits over the focused mark */
.chart-tip{position:fixed;left:0;top:0;pointer-events:none;z-index:20;background:var(--text);color:var(--bg);font-size:0.74rem;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;transform:translate(-50%,calc(-100% - 8px));transition:opacity .1s}
.chart-tip.on{opacity:1}
table.data{width:100%;border-collapse:collapse;font-size:0.78rem;margin-top:10px;font-variant-numeric:tabular-nums}
table.data th,table.data td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--border)}
table.data th{color:var(--muted);font-weight:600}
@media(prefers-reduced-motion:reduce){.chart-tip,.level-progress-fill{transition:none}}
@media(max-width:600px){
  .day-title{font-size:1.1rem}
  .main{padding:12px}
}

/* Stroke order */
.stroke-viewer{margin-top:8px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;text-align:center}
.stroke-viewer svg{max-width:100%;height:auto;max-height:120px}
/* KanjiVG SVGs hardcode stroke:#000 inline; !important beats that so strokes follow the theme */
.stroke-viewer svg g{stroke:var(--text)!important}
.stroke-viewer svg text{fill:var(--muted)}
.stroke-loading{font-size:0.75rem;color:var(--muted);padding:8px}
.stroke-error{font-size:0.75rem;color:var(--bad);padding:8px;text-align:center}
.stroke-retry-btn{margin-top:4px;padding:4px 12px;font-size:0.75rem;border:1px solid var(--bad);background:var(--surface);color:var(--bad);border-radius:var(--radius);cursor:pointer}
.stroke-retry-btn:hover{background:color-mix(in srgb,var(--bad) 10%,var(--surface))}

/* Lesson Kanji section: rows (default) and focus layouts */
.kj-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kj-title{display:flex;align-items:center;gap:8px}
.kj-info{position:relative;display:inline-flex}
.kj-info-btn{width:20px;height:20px;padding:0;border:1px solid var(--muted);border-radius:50%;background:none;color:var(--muted);font:italic 700 0.7rem Georgia,serif;cursor:help;text-transform:none}
.kj-info-btn:hover,.kj-info-btn:focus-visible{color:var(--accent-fg);border-color:var(--accent-fg)}
.kj-pop{display:none;position:absolute;z-index:10;top:calc(100% + 8px);left:0;width:min(340px,80vw);padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--text);font-size:0.8rem;font-weight:400;line-height:1.5;text-transform:none;letter-spacing:0}
.kj-pop p+p{margin-top:8px}
.kj-pop .kj-tag{margin-right:4px}
.kj-info:hover .kj-pop,.kj-info:focus-within .kj-pop{display:block}
.kj-toggle{text-transform:none;letter-spacing:0;font-weight:400;margin:-4px 0}
.kj-row{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--border)}
.kj-row:first-of-type{border-top:0;padding-top:4px}
.kj-big{font-size:3.6rem;line-height:1;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 0 8px}
.kj-count{font-size:0.75rem;color:var(--muted);text-align:center;margin-top:6px}
.kj-meaning{font-size:1rem;margin-bottom:6px}
.kj-rd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:6px 0}
.kj-tag{font-size:0.68rem;font-weight:700;padding:2px 7px;border-radius:4px;border:1px solid currentColor;min-width:34px;text-align:center}
.kj-tag.kun{color:var(--info)}
.kj-tag.on{color:var(--bad)}
.kj-reading{font-size:1.15rem}
.kj-reading small{font-size:0.8em;color:var(--muted)}
.kj-reading.extra{color:var(--muted)}
.kj-sub{font-size:0.75rem;color:var(--muted);margin:14px 0 8px}
.kj-word-list{display:grid;gap:4px}
.kj-word{display:flex;align-items:baseline;gap:8px;padding:2px 0}
.kj-word-jp{font-size:1.2rem}
.kj-word-jp mark{background:none;color:var(--accent-fg);font-weight:700}
.kj-word-rd,.kj-word-gl{font-size:0.8rem;color:var(--muted)}
.kj-stroke-btn{margin-top:12px}
.kj-stroke-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.kj-stroke{max-width:240px}
.kj-stroke svg{max-height:200px}
.kj-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.kj-chip{position:relative;width:64px;height:64px;font-size:2rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;cursor:pointer}
.kj-chip[aria-selected=true]{border-color:var(--accent-fg);box-shadow:0 0 0 1px var(--accent-fg)}
.kj-check{position:absolute;top:2px;right:6px;font-size:0.7rem;color:var(--ok)}
.kj-focus{display:grid;grid-template-columns:200px 1fr;gap:24px}
.kj-stage .kj-big{font-size:5rem}
.kj-stage .kj-stroke{max-width:none}
.kj-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:0.8rem;color:var(--muted)}
@media (max-width:560px){.kj-focus{grid-template-columns:1fr}.kj-stage{max-width:240px}.kj-row{grid-template-columns:72px 1fr}.kj-big{font-size:2.8rem}}

/* Lesson Kana section: gojuon chart, Learn / Practice */
.mode-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;text-transform:none;letter-spacing:0;font-weight:400}
.mode-count{font-size:0.8rem;color:var(--muted)}
.mode-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.mode-seg button{padding:5px 14px;border:0;background:var(--surface2);color:var(--muted);font-family:inherit;font-size:0.8rem;cursor:pointer}
.mode-seg button+button{border-left:1px solid var(--border)}
.mode-seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.kn-chart{display:grid;gap:6px;align-items:center}
.kn-col{font-size:0.7rem;color:var(--muted);text-align:center}
.kn-rowlab{font-size:0.9rem;color:var(--muted);text-align:center}
.kn-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 6px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;cursor:pointer}
.kn-tile:hover{border-color:var(--accent-fg)}
.kn-tile.sel{border-color:var(--accent-fg);box-shadow:0 0 0 1px var(--accent-fg)}
.kn-k{font-size:1.9rem;line-height:1.1}
.kn-r{font-size:0.78rem;color:var(--muted)}
.stroke-thumb{width:100%;max-width:104px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2px}
.stroke-thumb svg{display:block;width:100%;height:auto}
.stroke-thumb svg g{stroke:var(--text)!important}
.stroke-thumb svg text{fill:var(--muted)}
.kn-tile.cover{min-height:76px;padding:6px 2px;gap:2px}
.kn-tile.cover .kn-r{min-height:1.2em;font-size:0.8rem;font-weight:600;color:var(--accent-fg)}
.kn-tile.covered .kn-r{width:56%;min-height:1em;margin-top:4px;border-radius:4px;color:transparent;background:repeating-linear-gradient(135deg,var(--surface) 0 5px,var(--surface2) 5px 10px)}
.kn-mk{position:absolute;top:6px;right:7px;display:flex;gap:4px}
.kn-mk i,.kn-grp>i{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.kn-mk .irr,.kn-grp>i.irr{background:var(--warn)}
.kn-mk .like,.kn-grp>i.like{background:var(--info)}
.kn-watch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:0.8rem;color:var(--muted)}
.kn-watch b{font-weight:600;color:var(--text)}
.kn-grp{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-right:6px}
.kn-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;color:var(--text);font-size:0.85rem}
.kn-chip-k{font-size:1.15rem}
.kn-chip-k.later{opacity:0.45}
.kn-chip.hl{border-color:var(--accent-fg);box-shadow:0 0 0 1px var(--accent-fg)}
@media (max-width:560px){.kn-k{font-size:1.5rem}.kn-chart{gap:4px}.kn-tile{padding:6px 2px}}

/* Lesson note: headline + quiet lines in a tinted box */
.unit-note{margin-bottom:20px;padding:14px 18px 16px;background:color-mix(in srgb,var(--accent-fg) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent-fg) 28%,var(--border));border-radius:12px}
.unit-note-label{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-fg)}
.unit-note-label svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.unit-note-head{margin-bottom:4px;font-size:1.02rem;font-weight:600;line-height:1.45;text-wrap:pretty}
.unit-note-line{font-size:0.85rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
.unit-note-line+.unit-note-line{margin-top:6px}

/* Typing tip */
.typing-tip-box{background:color-mix(in srgb,var(--info) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--info) 45%,var(--surface));border-radius:8px;padding:12px 16px}
.typing-examples{font-family:'Courier New',monospace;font-size:0.95rem;color:var(--text);line-height:1.8;word-break:break-all}
.typing-note{color:var(--bad);font-size:0.82rem;margin-top:6px;font-weight:600}
.typing-hint{color:var(--muted);font-size:0.78rem;margin-top:6px;font-style:italic;border-top:1px solid color-mix(in srgb,var(--info) 30%,var(--surface));padding-top:6px}
/* Exercises */
.exercise-box{background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:16px 18px}
.ex-count{font-size:0.78rem;color:var(--muted);font-weight:400;margin-left:6px;text-transform:none;letter-spacing:0}
.ex-prompt{font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px}
.ex-question{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:16px;text-align:center;line-height:1.2;min-height:2.4rem}
.ex-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ex-option{padding:11px 14px;border:2px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;cursor:pointer;font-size:0.95rem;text-align:left;transition:border-color 0.15s,background 0.15s;font-family:inherit;line-height:1.3}
.ex-option:hover:not(:disabled){background:var(--border);border-color:var(--muted)}
.ex-option:disabled{cursor:default}
.ex-option.correct{background:color-mix(in srgb,var(--ok) 15%,var(--surface))!important;border-color:var(--ok)!important;color:var(--text)}
.ex-option.wrong{background:color-mix(in srgb,var(--bad) 15%,var(--surface))!important;border-color:var(--bad)!important;color:var(--text)}
.ex-typing-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.ex-input{flex:1;min-width:120px;padding:10px 14px;border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;font-size:1rem;outline:none;font-family:inherit}
.ex-input:focus{border-color:var(--accent-fg)}
.ex-input:disabled{background:var(--surface2)}
.ex-check-btn{padding:10px 18px;background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.9rem;white-space:nowrap;font-family:inherit;transition:background 0.15s}
.ex-check-btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 85%,var(--text))}
.ex-check-btn:disabled{opacity:0.35;cursor:not-allowed}
.ex-question.sentence{font-size:1.35rem;line-height:1.9}
.ex-note{font-size:0.9rem;color:var(--muted);text-align:center;margin:-8px 0 14px}
.ex-u{text-decoration:underline 2px var(--accent);text-underline-offset:0.3em}
.ex-options + .ex-note{margin:12px 0 0;text-align:left}
.ex-hint{font-size:0.78rem;color:var(--muted);margin-top:6px}
.pending-line{font-size:0.85rem;color:var(--muted);margin-top:14px}
.ex-retry-btn{padding:8px 22px;background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:600;font-family:inherit}
.ex-retry-btn:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text))}
.ex-options+.ex-options,.ex-options+.ex-typing-row,.ex-typing-row+.ex-typing-row{margin-top:8px}

/* Start quiz banner */
.quiz-start-section{margin-bottom:20px}
.quiz-start-box{background:linear-gradient(135deg,color-mix(in srgb,var(--info) 9%,transparent),color-mix(in srgb,var(--accent) 9%,transparent));border:2px dashed color-mix(in srgb,var(--accent-fg) 25%,transparent);border-radius:10px;padding:18px 20px;text-align:center}
.quiz-start-title{font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:4px}
.quiz-start-hint{font-size:0.8rem;color:var(--muted);margin-bottom:14px}
.quiz-start-btn{padding:11px 28px;background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;cursor:pointer;font-size:0.95rem;font-weight:700;font-family:inherit;transition:background 0.15s,transform 0.1s}
.quiz-start-btn:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text));transform:translateY(-1px)}
.speak-btn{background:none;border:none;cursor:pointer;font-size:0.85rem;padding:0 0 0 5px;opacity:0.5;transition:opacity 0.15s;vertical-align:middle}
.speak-btn:hover{opacity:1}
.speak-btn-char{display:block;margin:2px auto 0;font-size:0.75rem}
.ex-listen-btn{padding:14px 28px;background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--radius);cursor:pointer;font-size:1.3rem;font-family:inherit;transition:background 0.15s,transform 0.1s}
.ex-listen-btn:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text));transform:scale(1.05)}
.ex-listen-btn:disabled{opacity:0.5;cursor:default;transform:none}
/* Listening dialogues (listen_dialog) */
.link-btn{background:none;border:none;padding:0;color:var(--accent-fg);text-decoration:underline;cursor:pointer;font:inherit}
/* Review mode */
.review-wrap{max-width:500px;margin:0 auto;padding:8px}
.review-progress{text-align:center;font-size:0.85rem;color:var(--muted);margin-bottom:12px}
.review-card{background:var(--surface);border-radius:14px;box-shadow:0 3px 16px var(--shadow-c);padding:32px 24px;text-align:center;cursor:pointer;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:box-shadow 0.2s}
.review-card:hover{box-shadow:0 4px 20px var(--shadow-c)}
.review-card-type{font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:4px}
.review-card-front{font-size:2.8rem;font-weight:700;color:var(--text);line-height:1.1}
.review-card-back{margin-top:8px}
.review-reading{font-size:1.2rem;color:var(--muted);margin-bottom:4px}
.review-meaning{font-size:1.5rem;font-weight:700;color:var(--ok)}
.review-card-hint{font-size:0.85rem;color:var(--muted);font-style:italic}
.review-flip-hint{text-align:center;font-size:0.78rem;color:var(--muted);margin-top:8px}
.review-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.review-btns--3{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.review-btn{padding:12px 8px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:0.9rem;font-family:inherit;transition:opacity 0.15s,transform 0.1s}
.review-btn:hover{opacity:0.85;transform:translateY(-1px)}
.review-btn.again{background:var(--btn-again);color:var(--on-color)}
.review-btn.hard{background:var(--btn-hard);color:var(--on-color)}
.review-btn.good{background:var(--btn-good);color:var(--on-color)}
.review-btn.easy{background:var(--btn-easy);color:var(--on-color)}
.review-empty{text-align:center;padding:60px 20px;background:var(--surface);border-radius:12px;box-shadow:var(--shadow)}
.review-empty-icon{font-size:3rem;margin-bottom:12px}
.review-empty-title{font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:6px}
.review-empty-sub{font-size:0.9rem;color:var(--muted)}
/* TTS speak button */
.speak-btn{background:none;border:none;cursor:pointer;font-size:0.9rem;opacity:0.5;padding:0 0 0 6px;vertical-align:middle;transition:opacity 0.15s}
.speak-btn:hover{opacity:1}
/* Review view */
.review-wrap{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:24px;max-width:480px;margin:0 auto}
.review-progress{text-align:center;font-size:0.8rem;color:var(--muted);margin-bottom:16px}
.review-card{background:linear-gradient(135deg,var(--surface2),var(--surface));border:2px solid var(--border);border-radius:14px;padding:32px 24px;text-align:center;cursor:pointer;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:border-color 0.2s}
.review-card:hover{border-color:var(--muted)}
.review-char{font-size:3.5rem;font-weight:700;color:var(--text);line-height:1}
.review-speak{background:none;border:none;font-size:1.4rem;cursor:pointer;opacity:0.6;padding:0;transition:opacity 0.15s}
.review-speak:hover{opacity:1}
.review-tap{font-size:0.8rem;color:var(--muted);margin-top:8px}
.review-back{border-top:1px solid var(--border);padding-top:14px;width:100%}
.review-answer{font-size:1.4rem;font-weight:600;color:var(--ok);margin-bottom:4px}
.review-reading{font-size:0.9rem;color:var(--muted)}
.review-done{text-align:center;padding:40px 20px}
.review-done-icon{font-size:3rem;margin-bottom:12px}
.review-done-title{font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:6px}
.review-done-sub{font-size:0.9rem;color:var(--muted)}
/* Furigana (ruby annotation) */
ruby{display:ruby}
rt{font-size:0.6em;color:var(--accent-fg);font-weight:400;letter-spacing:0.02em}
.vocab-table td:first-child ruby{font-size:1.1rem}
.vocab-table td:first-child rt{font-size:0.6em}
/* Passage / reading comprehension */
.passage-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:12px;line-height:1.9;font-size:1rem;color:var(--text)}
.exercise-box .passage-box{white-space:pre-line;text-align:left}
.passage-box ruby rt{font-size:0.55em;color:var(--accent-fg)}
.passage-en{color:var(--muted);font-size:0.85rem;margin-top:10px;border-top:1px dashed var(--border);padding-top:10px;line-height:1.6}
.passage-questions{margin-top:12px}
.passage-q{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:8px}
.passage-q-jp{font-weight:600;color:var(--text);margin-bottom:2px}
.passage-q-en{font-size:0.82rem;color:var(--muted)}
/* Furigana toggle */
.furi{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-bottom:10px;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:99px;background:transparent;font:inherit;font-size:0.78rem;color:var(--muted);cursor:pointer}
.furi:hover{color:var(--text);border-color:var(--muted)}
.furi i{width:26px;height:16px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);position:relative;transition:background .15s}
.furi i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.furi[aria-pressed="true"]{color:var(--text)}
.furi[aria-pressed="true"] i{background:color-mix(in srgb,var(--accent) 30%,var(--surface2));border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.furi[aria-pressed="true"] i::after{transform:translateX(10px);background:var(--accent-fg)}
@media (prefers-reduced-motion:reduce){.furi i,.furi i::after{transition:none}}
.hide-furigana rt{visibility:hidden}
.level-progress-item{display:flex;align-items:center;gap:10px;font-size:0.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.level-progress-bar{width:120px;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.level-progress-fill{height:100%;border-radius:3px;background:var(--lv);transition:width 0.3s}

/* ── Timed quizzes + mock exams (ticket 18) ── */
.quiz-timed-note{display:block;margin-top:6px;color:var(--text)}
.ex-timer{float:right;font-size:0.85rem;font-variant-numeric:tabular-nums;color:var(--text);text-transform:none;letter-spacing:0}
.ex-timer.low{color:var(--bad);font-weight:700}
.mock{display:flex;flex-direction:column;gap:12px}
.mock-back{align-self:flex-start}
.mock-parts{margin:8px 0 12px;padding-left:20px;line-height:1.7}
.mock-bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mock-bar .ex-timer{float:none;font-size:1rem}
.mock-nav{display:flex;flex-wrap:wrap;gap:6px}
.mock-nav-btn{min-width:34px;height:34px;border:2px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);cursor:pointer;font:inherit;font-size:0.85rem;position:relative}
.mock-nav-btn.answered{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.mock-nav-btn.flagged::after{content:"⚑";position:absolute;top:-8px;right:-5px;font-size:0.7rem;color:var(--warn)}
.mock-nav-btn.now{border-color:var(--accent)}
.mock-option.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.mock-opt-n{display:inline-block;min-width:1.4em;font-weight:700;color:var(--muted)}
.mock-actions{justify-content:space-between;flex-wrap:wrap}
.mock-flag.on{border-color:var(--warn);color:var(--warn)}
.mock-submit{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mock-estimate{border:2px solid var(--border);border-radius:var(--radius);padding:12px 16px;background:var(--surface)}
.mock-estimate.pass{border-color:var(--ok)}
.mock-estimate.fail{border-color:var(--bad)}
.mock-estimate-total{font-size:1.1rem;margin-bottom:6px}
.mock-estimate ul{margin:0 0 8px;padding-left:20px;line-height:1.7}
.mock-note{font-size:0.8rem;color:var(--muted);margin:6px 0 0}
.mock-table{border-collapse:collapse;width:100%;font-size:0.85rem}
.mock-table th,.mock-table td{border-bottom:1px solid var(--border);padding:5px 8px;text-align:left}
.mock-missed{padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:0.9rem}
.mock-history ul{padding-left:20px;font-size:0.85rem;line-height:1.8}
.diagnostic p{margin:0 0 10px;font-size:0.9rem}
.btn-outline{min-height:44px;padding:0 22px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font:inherit;font-size:0.9rem;font-weight:600;cursor:pointer}
.btn-outline:hover{border-color:var(--text)}

/* ── Quiz layer (sketch: .scratch/quiz-interface-sketch). Start opens .ql over the app, page scroll locked ── */
body.quiz-open{overflow:hidden}
.ql{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--bg);container-type:inline-size;animation:ql-rise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ql-rise{from{transform:translateY(24px);opacity:0}}
.ql svg:where(:not(.jelly)){width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ql button:focus-visible,.ql input:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px}
.ql button{font:inherit;cursor:pointer}
:where(.ql) button{color:inherit}
.ql button:disabled{cursor:default}
.qz-top{display:flex;align-items:center;gap:12px;padding:10px 14px}
.qz-x{width:44px;height:44px;flex:none;border:0;border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center}
.qz-x:hover{background:var(--surface2);color:var(--text)}
.qz-prog{flex:1;display:flex;gap:4px}
.qz-seg{flex:1;height:8px;border-radius:99px;background:var(--surface2);transition:background .25s}
.qz-seg.ok{background:var(--ok)}
.qz-seg.bad{background:var(--bad)}
.qz-seg.now{background:color-mix(in srgb,var(--accent) 55%,var(--surface2))}
.qz-meta{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.qz-snd{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center}
.qz-snd:hover{background:var(--surface2);color:var(--text)}
.qz-snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qz-timer{display:inline-flex;align-items:center;gap:4px;color:var(--text);font-weight:600}
.qz-timer.low{color:var(--bad)}
.qz-timer svg{width:16px;height:16px}
.qz-again{font-size:0.72rem;font-weight:600;border:1px solid var(--border);border-radius:99px;padding:1px 8px}
.qz-main{flex:1;overflow:auto;padding:8px 20px 28px;display:flex;flex-direction:column}
.qz-col{flex:1 0 auto;width:100%;max-width:640px;margin:0 auto}
.qz-col.wide{max-width:960px}
.qz-prompt{font-size:1rem;font-weight:600;margin:14px 0 6px}
.qz-big,.qz-sent,.qz-slots,.qz-passage,.qz-solved,.qz-script,.qz-tile,.qz-answerline{font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif}
.qz-big{font-size:5.5rem;line-height:1.15;text-align:center;padding:18px 0 26px;overflow-wrap:anywhere}
.qz-big.md{font-size:3.4rem;line-height:1.3}
.qz-big.sm{font-size:2rem;line-height:1.4}
.qz-big rt{font-size:0.2em;color:var(--accent-fg)}
.qz-sent{font-size:1.75rem;line-height:2.3;text-align:center;padding:14px 0 2px}
.qz-gloss{text-align:center;color:var(--muted);font-size:0.95rem;margin-bottom:22px}
.qz-blank{display:inline-block;min-width:3em;text-align:center;border-bottom:3px solid var(--accent);margin:0 0.2em;color:var(--accent-fg);line-height:1.5}
.qz-blank.ok{color:var(--ok);border-color:var(--ok)}
.qz-blank.bad{color:var(--bad);border-color:var(--bad)}
.qz-slots{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;vertical-align:middle;margin:0 0.3em}
.qz-slot{min-width:3.4em;min-height:52px;padding:0 10px;border:2px dashed var(--border);border-radius:10px;display:inline-grid;place-items:center;font-size:1.05rem;color:var(--muted)}
.qz-slot.star{border-style:solid;border-color:var(--accent);color:var(--accent-fg);font-weight:700}
.qz-slot.star.f{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.qz-slot.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--text)}
.qz-slot.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--text)}
.qz-solved{text-align:center;margin:-8px 0 20px;font-size:1.15rem;color:var(--ok)}
.qz-opts{display:grid;gap:10px}
.qz-opts.g2{grid-template-columns:1fr 1fr}
.qz-opts.g1{grid-template-columns:1fr}
.qz-opt{min-height:64px;display:flex;align-items:center;gap:12px;padding:10px 16px;border:2px solid var(--border);border-radius:12px;background:var(--surface);font-size:1.15rem;text-align:left;transition:border-color .12s,background .12s}
.qz-opt:hover:not(:disabled){border-color:var(--muted)}
.ql kbd{flex:none;width:26px;height:26px;border:1px solid var(--border);border-radius:6px;display:grid;place-items:center;font:600 0.75rem/1 inherit;color:var(--muted);background:var(--bg)}
.qz-opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.qz-opt.sel kbd{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.qz-opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--surface))}
.qz-opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,var(--surface))}
.qz-opt.dim{opacity:0.5}
.qz-answerline{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;min-height:70px;padding:10px 4px 14px;margin-bottom:18px;border-bottom:2px solid var(--border)}
.qz-answerline.ok{border-color:var(--ok)}
.qz-answerline.bad{border-color:var(--bad)}
.qz-tile{min-height:48px;padding:0 16px;border:2px solid var(--border);border-radius:10px;background:var(--surface);font-size:1.1rem}
.qz-tile:hover:not(:disabled){border-color:var(--muted)}
.qz-tile.used{visibility:hidden}
.qz-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 0}
.qz-bank .qz-tile{background:var(--surface2)}
.qz-hint{text-align:center;font-size:0.8rem;color:var(--muted);margin-top:14px}
.qz-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:6px}
.qz-pair>div{display:grid;gap:10px;align-content:start}
.qz-pc{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;border:2px solid var(--border);border-radius:12px;background:var(--surface);font-size:1.3rem;text-align:left}
.qz-pc.r{font-size:1.05rem}
.qz-pc.focus{border-color:var(--accent)}
.qz-pc.linked{border-color:var(--p);background:color-mix(in srgb,var(--p) 10%,var(--surface))}
.qz-pc.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface))}
.qz-pc.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.qz-pc .pn{width:24px;height:24px;border-radius:50%;background:var(--p,var(--muted));color:var(--on-color);display:grid;place-items:center;font-size:0.75rem;font-weight:700;flex:none}
.qz-pc[data-n="1"]{--p:var(--accent)}
.qz-pc[data-n="2"]{--p:var(--info)}
.qz-pc[data-n="3"]{--p:var(--warn)}
.qz-pc[data-n="4"]{--p:var(--n1)}
.qz-input{display:block;width:100%;max-width:360px;margin:0 auto 6px;min-height:64px;padding:0 16px;text-align:center;font-size:1.9rem;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-family:inherit;outline:none}
.qz-input:focus{border-color:var(--accent)}
.qz-input.ok{border-color:var(--ok)}
.qz-input.bad{border-color:var(--bad)}
.qz-input:disabled{opacity:1}
.qz-player{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 20px}
.qz-play{width:92px;height:92px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.qz-play:disabled{opacity:0.4}
.qz-play svg{width:38px;height:38px}
.qz-play.on{animation:qz-pulse 1s ease-in-out infinite}
@keyframes qz-pulse{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 25%,transparent)}}
.qz-pips{display:flex;gap:6px;align-items:center;font-size:0.82rem;color:var(--muted)}
.qz-pip{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.qz-pip.off{background:var(--border)}
.qz-warn{font-size:0.85rem;color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin:0 0 14px;background:var(--surface)}
.qz-warn.qz-other{margin:14px 0 0;color:inherit}
.qz-script{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:1.1rem}
.qz-script>div{display:flex;gap:12px;padding:2px 0}
.qz-script .who{min-width:4.8em;font-size:0.8rem;color:var(--muted);padding-top:0.3em;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.qz-script .en{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:0.88rem;color:var(--muted);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.qz-srow{display:flex;gap:8px}
.qz-srow .qz-opt{flex:1}
.qz-rp{width:60px;flex:none;border:2px solid var(--border);border-radius:12px;background:var(--surface);display:grid;place-items:center}
.qz-rp:hover:not(:disabled){border-color:var(--muted)}
.qz-rp:disabled{opacity:0.4}
.qz-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.qz-split>div:last-child{padding-top:14px}
.qz-passage{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-top:14px;font-size:1.2rem;line-height:2.1;white-space:pre-line}
.qz-passage rt{font-size:0.55em;color:var(--accent-fg)}
.qz-split .qz-passage{margin-top:8px}

/* the dock: Skip + Check, then feedback + Continue */
.qz-dock{border-top:1px solid var(--border);background:var(--surface);padding:12px 20px calc(12px + env(safe-area-inset-bottom));transition:background .2s}
.qz-in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:12px;min-height:56px}
.qz-dock.right{background:color-mix(in srgb,var(--ok) 14%,var(--surface));border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}
.qz-dock.wrong{background:color-mix(in srgb,var(--bad) 13%,var(--surface));border-color:color-mix(in srgb,var(--bad) 40%,var(--border))}
.qz-sp{flex:1}
.qz-keys{font-size:0.78rem;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.qz-keys kbd{width:auto;min-width:26px;padding:0 6px}
.qz-fb{flex:1;min-width:0;line-height:1.35}
.qz-fb b{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.qz-dock.right .qz-fb b{color:var(--ok)}
.qz-dock.wrong .qz-fb b{color:var(--bad)}
.qz-fb .ans{font-size:1rem;margin-top:2px}
.qz-fb p{font-size:0.84rem;color:var(--muted);margin-top:2px}
.qz-btn{min-height:48px;padding:0 28px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:0.95rem;white-space:nowrap}
.qz-btn:disabled{opacity:0.35}
.qz-btn.ok{background:var(--ok);color:var(--on-color)}
.qz-btn.bad{background:var(--bad);color:var(--on-color)}
.qz-gb{min-height:48px;min-width:48px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--muted);font-size:0.9rem;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.qz-gb:hover:not(:disabled){color:var(--text);border-color:var(--muted)}
.qz-gb:disabled{opacity:0.4}
.qz-scrim{position:absolute;inset:0;background:rgb(0 0 0 / .5);display:grid;place-items:center;padding:20px;z-index:5}
.qz-dlg{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;max-width:340px;box-shadow:var(--shadow)}
.qz-dlg b{display:block;margin-bottom:4px}
.qz-dlg p{font-size:0.88rem;color:var(--muted);margin-bottom:16px}
.qz-row{display:flex;gap:8px;justify-content:flex-end}

/* result */
.qz-res{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:22px 0 8px}
.qz-ring{position:relative;width:140px;height:140px}
.qz-ring>svg{width:100%;height:100%;transform:rotate(-90deg)}
.qz-ring>svg circle{fill:none;stroke-width:10}
.qz-ring .t{stroke:var(--surface2)}
.qz-ring .v{stroke-linecap:round}
.qz-ring .v.pass{stroke:var(--ok)}
.qz-ring .v.fail{stroke:var(--bad)}
.qz-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.7rem;font-variant-numeric:tabular-nums}
.qz-verdict{font-size:1.25rem}
.qz-verdict.pass{color:var(--ok)}
.qz-verdict.fail{color:var(--bad)}
.qz-res p{color:var(--muted);font-size:0.9rem;margin-top:4px}
.qz-res .qz-timeup{font-weight:600;color:var(--bad)}
.qz-parts{list-style:none;margin:6px 0 0;padding:0;font-size:0.9rem}
.qz-parts li{margin-top:2px}
.qz-parts li.pass{color:var(--ok)}
.qz-parts li.fail{color:var(--bad);font-weight:600}
.qz-miss-h{font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:22px 0 6px}
.qz-miss{list-style:none}
.qz-miss li{display:grid;grid-template-columns:minmax(3.2em,auto) 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:0.95rem}
.qz-miss .q{font-size:1.4rem;font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif}
.qz-miss .a{color:var(--ok);font-weight:600}
.qz-more{font-size:0.82rem;color:var(--muted);padding:8px 0}
@media (prefers-reduced-motion:reduce){.ql{animation:none}.qz-seg{transition:none}.qz-play.on{animation:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)}}

/* phone-width layer: answers sink to the bottom of the question area when the page doesn't scroll
   (margin-top:auto is 0 once the content is taller than the area); the dock stacks, Continue full width */
@container (max-width:520px){
  .ql kbd,.qz-dock .qz-keys{display:none}
  .qz-big{font-size:4.5rem}
  .qz-big.md{font-size:2.8rem}
  .qz-sent{font-size:1.45rem}
  .qz-res{grid-template-columns:1fr;justify-items:center;text-align:center}
  .qz-col{display:flex;flex-direction:column}
  .qz-col>.qz-opts,.qz-col>.qz-bank,.qz-col>.qz-pair{margin-top:auto}
  .qz-col>.qz-pair{padding-top:6px}
  .qz-col>.qz-split{flex:1;display:flex;flex-direction:column}
  .qz-split>div:last-child{flex:1;display:flex;flex-direction:column}
  .qz-split>div:last-child>.qz-opts{margin-top:auto}
  .qz-in{flex-wrap:wrap;row-gap:12px}
  .qz-dock.right .qz-fb,.qz-dock.wrong .qz-fb{flex:1 1 0}
  .qz-dock.right .qz-gb,.qz-dock.wrong .qz-gb{align-self:flex-start}
  .qz-dock.right .qz-btn,.qz-dock.wrong .qz-btn{flex:1 1 100%}
  .qz-dock.resd .qz-sp{display:none}
  .qz-dock.resd .qz-gb{flex:1}
  .qz-dock.resd .qz-btn{flex:1 1 100%}
}

/* Quiz entry on the stage page: gradient card, the one filled button until the stage is passed (sketch: .scratch/quiz-entry-sketch) */
.ql:focus{outline:none}
.qz-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:18px 0 20px;padding:20px 22px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--info) 15%,var(--surface)),color-mix(in srgb,var(--accent) 18%,var(--surface)))}
.qz-entry .txt{flex:1 1 260px;min-width:0}
.up-next .txt{flex-basis:170px}
.qz-entry .eyebrow{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-fg);margin-bottom:2px}
.qz-entry h3{font-size:1.25rem;line-height:1.3}
.qz-entry .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.qz-entry .chip{font-size:0.78rem;color:var(--text);background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--border);border-radius:99px;padding:2px 10px}
.qz-entry .note{font-size:0.8rem;color:var(--muted);margin-top:8px}
.qz-cta{min-height:56px;padding:0 30px 0 22px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:700;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .12s,box-shadow .12s}
.qz-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent)}
.qz-cta svg{width:20px;height:20px;fill:currentColor;stroke:none}
.qz-cta.quiet{padding:0 26px;background:transparent;color:var(--text);border:2px solid var(--accent);box-shadow:none}
.qz-cta.quiet:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:none;transform:none}
@media (prefers-reduced-motion:reduce){.qz-cta{transition:none}.qz-cta:hover{transform:none}}
@media (max-width:720px){.qz-cta{flex:1 1 100%}}

/* review hub */
.rv-wrap{max-width:640px;background:none;box-shadow:none;padding:8px}
.rv-due{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.rv-due strong{font-size:2.4rem;line-height:1;margin-right:8px}
.rv-due span{color:var(--muted);font-size:0.9rem}
.rv-due .ex-retry-btn{min-height:44px}
.rv-due .ex-retry-btn:disabled{opacity:.4;cursor:default}
.rv-caught{margin-top:10px;color:var(--muted);font-size:0.9rem}
.rv-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rv-chip{min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--muted);font:inherit;font-size:0.85rem;cursor:pointer}
.rv-chip[aria-pressed="true"]{background:var(--surface2);color:var(--text);font-weight:600;border-color:var(--muted)}
.rv-h{font-size:0.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:20px 0 8px}
.rv-fc{display:flex;align-items:flex-end;gap:8px;height:110px}
.rv-fc div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:0.72rem;color:var(--muted)}
.rv-fc i{display:block;width:100%;background:var(--surface2);border-radius:5px 5px 0 0;border:1px solid var(--border);border-bottom:0}
.rv-fc .today i{background:color-mix(in srgb,var(--accent) 60%,var(--surface2));border-color:var(--accent)}
.rv-mat{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:6px 0}
.rv-mat i{display:block}
.rv-leg{display:flex;gap:14px;font-size:0.78rem;color:var(--muted);flex-wrap:wrap}
.rv-back{background:none;color:var(--muted);padding:0 4px;min-height:44px;font-weight:500}
.rv-back:hover{background:none;color:var(--text)}
.rv-hub .pending-line{margin-top:16px;padding:6px 14px;border:1px dashed var(--border);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rv-hub .pending-line .ex-retry-btn{background:none;color:var(--muted);text-decoration:underline;font-weight:400;font-size:0.85rem;min-height:44px;padding:0 6px}
.rv-hub .pending-line .ex-retry-btn:hover{background:none;color:var(--text)}

/* Achievement toasts (ticket 08): bottom-right on desktop, above the bottom tab bar on phones */
.toast-stack{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:min(340px,calc(100vw - 32px))}
.toast{display:flex;align-items:center;gap:10px;text-align:left;font-family:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;cursor:pointer;box-shadow:var(--shadow);animation:toast-slam .28s cubic-bezier(.2,1.4,.4,1)}
.toast-body{display:flex;flex-direction:column;min-width:0}
.toast-kicker{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.toast-sub{font-size:.75rem;color:var(--muted)}
.toast-stamp{flex:none;width:40px;height:40px;display:grid;place-items:center;font-size:1.3rem;font-weight:700;border-radius:4px;background:var(--surface2);color:var(--accent-fg);border:1px dashed currentColor}
.toast-more{justify-content:center;color:var(--muted)}
.toast-legendary{border:2px solid #d9a441;background:linear-gradient(110deg,var(--surface) 35%,color-mix(in srgb,#d9a441 30%,var(--surface)) 50%,var(--surface) 65%) 0 0/250% 100%;animation:toast-slam .28s cubic-bezier(.2,1.4,.4,1),toast-shimmer 2.4s linear infinite}
@keyframes toast-slam{from{transform:scale(1.35);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-shimmer{to{background-position:-250% 0}}
@media(max-width:639px){.toast-stack{right:8px;left:8px;max-width:none;bottom:calc(64px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.toast,.toast-legendary{animation:none}}

/* Achievements screen + stamps (components/stamp.js). Ink is per stamp, never the palette:
   two precomputed inks (--ink-d / --ink-l) and the theme picks one. */
.stamp{--ink:var(--ink-d);--stamp-gold:oklch(0.82 0.13 85);color:var(--ink);display:block;width:100%;height:auto;overflow:visible}
:root[data-theme="light"] .stamp{--ink:var(--ink-l);--stamp-gold:oklch(0.62 0.13 75)}
.stamp.earned{filter:drop-shadow(0 1px 2px rgb(0 0 0 / .35))}
.stamp.locked{color:var(--muted)}
.stamp-wrap{display:block;width:84px;margin:0 auto 6px}
.achievements{display:grid;gap:14px}
.ach-title{font-size:1.05rem;margin:0 0 8px}
.ach-bar{height:6px;border-radius:99px;background:var(--surface2);overflow:hidden}
.ach-bar i{display:block;height:100%;background:var(--ok)}
.ach-empty{color:var(--muted)}
.ach-jp{font-size:0.95rem;color:var(--text)}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px 10px}
.ach{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.ach.locked .ach-name,.ach.locked .ach-desc{color:var(--muted)}
.ach-name{font-size:0.82rem;line-height:1.25}
.ach-desc{font-size:0.74rem;color:var(--muted);line-height:1.3}
.ach-meta{font-size:0.68rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── Welcome + placement test (ticket 39): reuse the quiz layer (.ql); pl- = this flow only ── */
.pl-layer .qz-main{overflow:auto}
.ql .qz-col.pl-col{max-width:760px;padding-bottom:24px}
.pl-brand{display:inline-flex;align-items:center;gap:8px;font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;font-weight:600}
.pl-h1{font-size:1.6rem;line-height:1.25;margin:18px 0 6px}
.pl-sub{color:var(--muted);margin-bottom:16px;max-width:62ch}
.pl-facts{list-style:none;display:grid;gap:8px;margin-bottom:20px}
.pl-facts li{display:grid;grid-template-columns:2ch 1fr;gap:8px;font-size:0.94rem}
.pl-facts li::before{content:"・";color:var(--accent-fg);font-weight:700}
.pl-field{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:8px 0 2px;font-size:0.92rem}
.pl-field .theme-select{font-size:0.9rem;padding:3px 10px}
.pl-field input[type=range]{width:min(320px,100%);accent-color:var(--accent-fg)}
.pl-note{font-size:0.85rem;color:var(--muted);margin:4px 0 6px;max-width:62ch}
.pl-note.bad{color:var(--bad)}
.pl-fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.pl-choice{text-align:left;display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}
.pl-choice:hover{border-color:var(--accent)}
.pl-choice b{font-size:1.02rem}
.pl-choice span{color:var(--muted);font-size:0.88rem}
.ql .pl-link{border:0;background:none;color:var(--muted);text-decoration:underline;min-height:44px;padding:0 10px}
.ql .pl-link:hover{color:var(--text)}
.pl-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 10px}
.pl-bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;display:block;align-self:center}
.pl-fill{display:block;height:100%;background:var(--accent);transition:width .25s}
.pl-rail{display:flex;flex-wrap:wrap;gap:3px;margin:12px 0 8px}
.pl-seg{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--surface2)}
.pl-seg.marked{background:var(--info)}
.pl-seg.done{background:var(--ok)}
.pl-seg.hole{background:var(--warn)}
.pl-seg.start{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.pl-legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:0.78rem;color:var(--muted);margin-bottom:14px}
.pl-legend .pl-seg{margin-right:5px;vertical-align:-1px;width:10px;height:10px}
.pl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.pl-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.pl-stat b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.pl-stat span{font-size:0.8rem;color:var(--muted)}
.pl-how{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:0.86rem;margin-top:12px}
.pl-how summary{cursor:pointer;color:var(--muted)}
.pl-how table{border-collapse:collapse;width:100%;margin-top:8px}
.pl-how th,.pl-how td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left;font-size:0.84rem;vertical-align:top}
.pl-how th{color:var(--muted);font-weight:500}
.pl-how .ok{color:var(--ok)}
.pl-how .no{color:var(--bad)}
@media (max-width:640px){.pl-fork,.pl-stats{grid-template-columns:1fr}.pl-h1{font-size:1.35rem}}

/* PWA (ticket 42): install card, update toast. Gradient from the palette's own accent tokens. */
.install-card{margin-bottom:14px;padding:18px 20px;border-radius:14px;color:var(--on-accent);background:radial-gradient(120% 140% at 100% 0%,color-mix(in oklch,var(--accent) 70%,white) 0,transparent 55%),linear-gradient(135deg,var(--accent),color-mix(in oklch,var(--accent) 82%,var(--on-accent)));box-shadow:0 6px 18px var(--shadow-c)}
.install-card h3{font-size:1.15rem;text-transform:none;letter-spacing:0;color:inherit;margin-bottom:4px}
.install-lead,.install-ios{font-size:0.95rem;line-height:1.45;color:inherit}
.install-ios{margin-top:10px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--on-accent) 16%,transparent);font-weight:600}
.install-btn{margin-top:12px;min-height:44px;padding:8px 22px;border:0;border-radius:99px;font:inherit;font-weight:700;cursor:pointer;background:var(--on-accent);color:var(--accent)}
.install-btn:hover{filter:brightness(1.12)}
.install-btn:focus-visible{outline:3px solid var(--on-accent);outline-offset:3px}
.install-card.installed{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}
.install-card.installed h3{color:var(--accent-fg)}
.install-quiet{margin-bottom:14px}
.update-stack{bottom:auto;top:16px;right:16px}
.toast-update{cursor:default;border-color:var(--accent-fg)}
.toast-update .toast-body{flex:1}
@media(max-width:639px){.update-stack{top:8px;bottom:auto}}

/* Settings danger zone + clear-all-data dialog (ticket 43) */
.danger-zone{border-color:var(--bad)}
.danger-zone h3{color:var(--bad)}
.data-btn.danger-btn{border-color:var(--bad);color:var(--bad);background:transparent}
.data-btn.danger-btn:hover:not(:disabled){background:var(--bad);color:var(--on-color)}
.data-btn.danger-btn.solid{background:var(--bad);color:var(--on-color)}
.data-btn.danger-btn:disabled{opacity:0.45;cursor:not-allowed}
.data-btn:focus-visible,.sync-input:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px}
.reset-scrim{position:fixed;inset:0;z-index:120;background:rgb(0 0 0 / .55);display:grid;place-items:center;padding:16px}
.reset-dlg{background:var(--surface);color:var(--text);border:1px solid var(--bad);border-radius:14px;padding:20px;max-width:420px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.reset-dlg h2{font-size:1.1rem;color:var(--bad)}
.reset-dlg p{font-size:0.88rem;color:var(--muted)}
.reset-dlg .reset-sync{color:var(--text)}
.reset-label{font-size:0.88rem}
.reset-row{display:flex;gap:8px;justify-content:flex-end}
.reset-dlg .sync-input{flex:none;max-width:none;width:100%}
.reset-dlg>.data-btn{align-self:flex-start}

/* Donation jar (components/donate.js): heart popover + Settings section */
.pop-wrap{position:relative;margin-left:auto;flex-shrink:0}
.pop-wrap>.icon-btn{margin-left:0}
.icon-btn.heart[aria-expanded="true"]{background:var(--surface2);color:var(--text)}
.icon-btn.heart[aria-expanded="true"] svg{fill:var(--accent-fg);stroke:var(--accent-fg)}
.pop{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:16px;z-index:30;animation:pop-in .18s cubic-bezier(.2,1.3,.4,1)}
.pop::before{content:"";position:absolute;top:-6px;right:15px;width:10px;height:10px;background:var(--surface);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pop{animation:none}}
@media(max-width:639px){.pop-wrap{position:static}.pop{left:12px;right:12px;width:auto}.pop::before{display:none}}
.dj-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dj-title{font-size:1rem;font-weight:700}
.dj-gloss{font-size:0.78rem;color:var(--muted);margin:-2px 0 8px}
.dj-body{font-size:0.88rem;max-width:42ch}
.dj-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.dj-btn{flex:1 1 120px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:var(--radius);font-size:0.88rem;font-weight:600;text-decoration:none;cursor:pointer}
.dj-btn:hover{border-color:var(--accent-fg)}
.dj-btn img{width:18px;height:18px;flex-shrink:0}
.dj-fine{font-size:0.76rem;color:var(--muted);margin-top:10px}
.dj-thanks{font-size:0.88rem;font-weight:600;color:var(--ok);margin-top:10px}
.settings-section .dj-btn{flex:0 1 auto}
.ask{margin:18px 0 0;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.ask .txt strong{display:block;font-size:0.92rem}
.ask .txt span{font-size:0.84rem;color:var(--muted)}
.ask .acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ask .acts .dj-btns{margin-top:0}
.ask .dj-btn{flex:0 0 auto}
.ask .dj-thanks{grid-column:1 / -1;margin-top:0}
.dj-quiet{border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:0.7rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 8px;margin-left:auto}
.dj-quiet:hover{color:var(--text)}
@media(max-width:639px){.ask{grid-template-columns:1fr}.ask .acts{grid-column:auto}}
.pop-wrap+.icon-btn{margin-left:-18px}
@media(max-width:639px){.pop-wrap+.icon-btn{margin-left:-6px}}
.ask .dj-quiet{font-size:0.7rem}