:root{--font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--tap: 44px;--bar-h: 76px;--t-fast: .12s cubic-bezier(.2, .8, .2, 1);--t-med: .22s cubic-bezier(.2, .8, .2, 1);--bg: #f5f4f0;--bg-elev: #ffffff;--bg-sunk: #ecebe6;--text: #14181d;--text-dim: #5a6470;--text-mute: #8a939e;--line: #dcd8cf;--line-soft: #e7e3da;--accent: #1b6ce6;--action: #1a5fcc;--warn: #b56c00;--ok: #15803d;--ok-bg: #dcfce7;--ok-border: #86efac;--bad: #b91c1c;--bad-bg: #fee2e2;--bad-border:#fca5a5;--accent-bg: color-mix(in srgb, var(--accent) 9%, var(--bg-elev));--shadow-sm: 0 1px 0 rgba(20, 24, 29, .06);--shadow-md: 0 6px 18px rgba(20, 24, 29, .12)}:root[data-theme=dark]{--bg: #0b0d10;--bg-elev: #14181d;--bg-sunk: #090b0e;--text: #e8ecf1;--text-dim: #9aa3ad;--text-mute: #6a7480;--line: #232a32;--line-soft: #1a2027;--accent: #6fb1ff;--action: #9ad1ff;--warn: #f1b86b;--ok: #7ee0a3;--ok-bg: color-mix(in srgb, #34d27e 16%, var(--bg-elev));--ok-border: color-mix(in srgb, #34d27e 40%, var(--bg-elev));--bad: #f6a39b;--bad-bg: color-mix(in srgb, #f0584c 18%, var(--bg-elev));--bad-border:color-mix(in srgb, #f0584c 42%, var(--bg-elev));--accent-bg: color-mix(in srgb, var(--accent) 12%, var(--bg-elev));--shadow-sm: 0 1px 0 rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html,body,#app{height:100%}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:contain;touch-action:manipulation}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}h1,h2,h3{margin:0;font-weight:600}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.app{display:flex;flex-direction:column;height:100%;max-width:720px;margin:0 auto}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top,0)) 12px 12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line-soft)}.brand{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.counts{display:flex;gap:6px}.count{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:999px;background:var(--bg-sunk);border:1px solid var(--line-soft);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}.count svg{width:14px;height:14px}.count__dot{width:7px;height:7px;border-radius:50%}.count--ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)}.count--bad{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad)}.count--rem .count__dot{background:var(--text-mute)}.iconbtn,.icon-btn{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--text);transition:background var(--t-fast);flex:none}.iconbtn:hover,.icon-btn:hover{background:var(--bg-sunk)}.iconbtn:active,.icon-btn:active{background:var(--line-soft)}.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px 16px calc(var(--bar-h) + env(safe-area-inset-bottom,0) + 24px)}.review-banner{display:inline-flex;align-items:center;margin-bottom:16px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--warn) 14%,var(--bg-elev));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--bg-elev));color:var(--warn);font-size:12px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;animation:fade .18s ease}.card{animation:fade .18s ease}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.qcard{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px 18px;display:flex;flex-direction:column;gap:14px}.qhead{display:flex;align-items:center;gap:10px}.qnum{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--text-dim);background:var(--bg-sunk);border:1px solid var(--line-soft);padding:4px 7px 4px 11px;border-radius:999px;font-variant-numeric:tabular-nums;transition:background var(--t-fast),color var(--t-fast)}.qnum:hover{background:var(--line-soft);color:var(--text)}.qnum:active{transform:translateY(1px)}.qnum svg{color:var(--text-mute)}.qtext{margin:0}.thumb{display:block;width:100%;padding:0;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--bg-elev);box-shadow:var(--shadow-sm);overflow:hidden;cursor:zoom-in;position:relative}.thumb img{display:block;width:100%;height:auto}.thumb-hint{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:600;color:#fff;background:#0009;padding:3px 9px;border-radius:999px}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000eb;z-index:100;display:grid;place-items:center;padding:16px;cursor:zoom-out;animation:fade .15s ease}.lightbox img{max-width:100%;max-height:100%;object-fit:contain}.lightbox-close{position:fixed;top:max(env(safe-area-inset-top,0),16px);right:16px;width:44px;height:44px;border-radius:50%;background:#ffffff24;color:#fff;font-size:26px;line-height:1}.answer{margin-top:22px;background:var(--accent-bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px 18px;transform-origin:top;animation:reveal .22s cubic-bezier(.2,.8,.2,1)}@keyframes reveal{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.answer__head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.answer__icon{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.answer-text,.qtext{font-size:19px;line-height:1.5;letter-spacing:-.005em;white-space:pre-wrap}.qtext{font-weight:500}.answer-text{font-weight:400}.answer-text{margin:0;color:var(--text)}.answer__meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}.meta{font-size:13px;font-weight:400;letter-spacing:0;color:var(--text-dim);margin:6px 0 0;line-height:1.5}.meta:first-child{margin-top:0}.meta-label{display:inline-block;font-weight:700;color:var(--text);margin-right:6px}.actionbar{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-top:1px solid var(--line-soft);max-width:720px;margin:0 auto}.actionbar__row{display:flex;gap:10px}.actionbar__hint{display:none}@media(hover:hover)and (pointer:fine)and (min-width:1024px){.actionbar__hint{display:flex;justify-content:center;gap:16px;font-size:11px;color:var(--text-mute);letter-spacing:.01em}.actionbar__hint b{color:var(--text-dim);font-weight:700;margin-right:3px}}.btn{flex:1;height:52px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-elev);color:var(--text);font-size:15px;font-weight:600;transition:transform var(--t-fast),filter var(--t-fast)}.btn svg{flex:none;width:23px;height:23px}.btn:active{transform:translateY(1px);filter:brightness(.97)}.btn.correct{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)}.btn.incorrect{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad)}.btn.show{background:var(--bg-sunk)}.btn.show[aria-pressed=true]{background:var(--accent-bg);border-color:color-mix(in srgb,var(--accent) 40%,var(--bg-elev));color:var(--accent)}.screen{display:flex;height:100%}.center{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;padding:24px}.content>.center{min-height:100%}.done-check{width:84px;height:84px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:44px;margin-bottom:8px}:root[data-theme=dark] .done-check{color:#0b0d10}.muted{color:var(--text-dim)}.small{font-size:13px}.btn.ghost{flex:0 0 auto;height:44px;padding:0 20px;background:var(--bg-sunk);margin-top:12px}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s ease}.sheet{width:100%;max-width:720px;background:var(--bg-elev);border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:var(--shadow-md);max-height:88dvh;overflow-y:auto;animation:slideup .22s cubic-bezier(.2,.8,.2,1)}@keyframes slideup{0%{transform:translateY(100%)}to{transform:none}}.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 8px 18px}.sheet__title{font-size:16px;font-weight:600}.sheet__body{padding:8px 18px calc(24px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:20px}.sheet--tall{height:85dvh;max-height:85dvh;display:flex;flex-direction:column;overflow:hidden}.qlist{list-style:none;margin:0;padding:2px 8px calc(16px + env(safe-area-inset-bottom,0));overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}.qrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border-radius:var(--r-md)}.qrow:hover{background:var(--bg-sunk)}.qrow[aria-current=true]{background:var(--accent-bg)}.qrow__status{flex:none;width:20px;display:grid;place-items:center}.qrow__status svg{width:16px;height:16px}.qrow[data-status=correct] .qrow__status{color:var(--ok)}.qrow[data-status=incorrect] .qrow__status{color:var(--bad)}.qrow__dot{width:7px;height:7px;border-radius:50%;background:var(--text-mute);opacity:.5}.qrow__num{flex:none;width:28px;text-align:right;font-size:13px;font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums}.qrow__text{flex:1;min-width:0;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qrow[aria-current=true] .qrow__text{font-weight:600}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#00000080;display:grid;place-items:center;padding:24px;animation:fade .15s ease}.dialog{width:100%;max-width:360px;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:20px;animation:pop .18s cubic-bezier(.2,.8,.2,1)}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}.dialog__title{font-size:17px;font-weight:600;margin-bottom:8px}.dialog__msg{font-size:14px;line-height:1.5;color:var(--text-dim);margin:0 0 18px}.dialog__actions{display:flex;justify-content:flex-end;gap:8px}.stat-row{display:flex;gap:10px}.stat{flex:1;background:var(--bg-sunk);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px;text-align:center}.stat b{display:block;font-size:22px;font-variant-numeric:tabular-nums}.stat span{font-size:12px;color:var(--text-dim)}.section__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.seg{--n: 2;--seg-gap: 6px;--seg-pad: 4px;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--seg-gap);padding:var(--seg-pad);background:var(--bg-sunk);border-radius:var(--r-md);border:1px solid var(--line-soft);isolation:isolate}.seg:before{content:"";position:absolute;top:var(--seg-pad);bottom:var(--seg-pad);left:var(--seg-pad);width:calc((100% - var(--seg-pad) * 2 - var(--seg-gap) * (var(--n) - 1)) / var(--n));border-radius:8px;background:var(--bg-elev);box-shadow:0 1px 2px #00000014,0 0 0 1px var(--line) inset;transition:transform var(--t-med),opacity var(--t-med),scale var(--t-med);pointer-events:none;z-index:0}.seg--3{--n: 3}.seg[data-pos="1"]:before{transform:translate(calc(100% + var(--seg-gap)))}.seg[data-pos="2"]:before{transform:translate(calc((100% + var(--seg-gap)) * 2))}.seg__opt{position:relative;z-index:1;height:44px;border-radius:8px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--text-dim);transition:color var(--t-med)}.seg__opt[data-active=true]{color:var(--text)}.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--bg-sunk);text-align:left;width:100%}.switch__text{display:flex;flex-direction:column;gap:2px}.switch__label{font-size:15px;font-weight:600;color:var(--text)}.switch__hint{font-size:12px;color:var(--text-dim)}.switch__track{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--line);transition:background var(--t-med)}.switch__thumb{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--bg-elev);box-shadow:0 1px 3px #00000040;transition:transform var(--t-med)}.switch[data-on=true] .switch__track{background:var(--accent)}.switch[data-on=true] .switch__thumb{transform:translate(18px)}.actions{display:flex;flex-direction:column;gap:0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}.row+.row{border-top:1px solid var(--line-soft)}.row__text{display:flex;flex-direction:column;gap:2px}.row__text b{font-size:15px}.row__text small{font-size:12px;color:var(--text-dim)}.pill-btn{flex:none;height:38px;padding:0 16px;border-radius:var(--r-md);background:var(--bg-sunk);border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:600;transition:background var(--t-fast),transform var(--t-fast)}.pill-btn:hover:not(:disabled){background:var(--line-soft)}.pill-btn:active{transform:translateY(1px)}.pill-btn:disabled{opacity:.6;cursor:default}.pill-btn.danger{background:var(--bad);border-color:transparent;color:#fff}.pill-btn.danger-outline{background:transparent;border-color:var(--bad);color:var(--bad)}:root[data-theme=dark] .pill-btn.danger{color:#0b0d10}.confirm{display:flex;gap:8px}.ok{color:var(--ok)}.bad{color:var(--bad)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}
