:root{
  --bg:#ffffff;--surface:#f2f5f8;--surface-2:#e6ebf1;--ink:#14213d;--ink-2:#4b5875;--ink-3:#8290a8;
  --line:#d9e0ea;--ok:#14b86c;--ok-bg:#e3f7ec;--bad:#e8553a;--bad-bg:#fdeae5;--sun:#f5c400;--sun-bg:#fff6cc;
  --blue:#2457e6;--blue-bg:#e6ecfc;--radius:14px;--tab-h:64px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0f1a2b;--surface:#17253a;--surface-2:#213149;--ink:#e8eef6;--ink-2:#b4c0d3;--ink-3:#7f8ea6;
  --line:#2a3a54;--ok:#2ecc80;--ok-bg:#12352a;--bad:#ff7a5c;--bad-bg:#3d2019;--sun:#ffd33d;--sun-bg:#3a3410;
  --blue:#6e93ff;--blue-bg:#1d2b4d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;-webkit-text-size-adjust:100%}
body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:800}
h2{font-size:1.25rem;font-weight:800}
h3{font-size:1.05rem;font-weight:700}
p{margin:.35rem 0}
.hidden{display:none!important}
.muted{color:var(--ink-2)}
.small{font-size:.9rem}
.screen{max-width:720px;margin:0 auto;padding:16px 16px 24px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 14px}
.topbar .who{display:flex;align-items:center;gap:10px;font-weight:700}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:1.5rem;position:relative}
.avatar.today::after{content:"";position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--bg)}
.iconbtn{width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:1.15rem}
.iconbtn:hover{background:var(--surface-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:var(--radius);font-weight:700;background:var(--surface);color:var(--ink);min-height:50px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--ink);color:var(--bg)}
[data-theme="dark"] .btn.primary{background:var(--ok);color:#06210f}
.btn.ok{background:var(--ok);color:#06210f}
.btn.block{width:100%}
.btn.ghost{background:transparent;border:2px solid var(--line)}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1}

/* user pick */
.pick{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:24px;text-align:center}
.pick h1{font-size:2rem}
.users{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.user-card{background:var(--surface);border-radius:24px;padding:26px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;border:3px solid transparent}
.user-card:hover{border-color:var(--ink)}
.user-card .big{font-size:3.6rem;line-height:1}
.user-card .sub{font-size:.9rem;font-weight:500;color:var(--ink-2)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.emoji-grid button{font-size:1.9rem;padding:8px;border-radius:12px;background:var(--surface)}
.emoji-grid button.sel{background:var(--sun-bg);outline:3px solid var(--sun)}

/* home */
.hero{padding:6px 0 18px}
.hero h1{font-size:2rem}
.today{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);background:var(--sun-bg);margin:14px 0}
.today.done{background:var(--ok-bg)}
.today .mark{font-size:1.6rem;line-height:1}
.today b{display:block}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--surface);border-radius:var(--radius);padding:12px 10px;text-align:center}
.stat .n{font-size:1.7rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.stat .l{font-size:.8rem;color:var(--ink-2)}
.days{display:flex;gap:6px;margin:10px 0 4px}
.day{flex:1;height:36px;border-radius:8px;background:var(--surface);display:grid;place-items:center;font-size:.7rem;color:var(--ink-3);position:relative}
.day.hit{background:var(--ok);color:#06210f;font-weight:700}
.day.now{outline:2px solid var(--ink)}
.next{margin-top:18px}
.next h2{margin-bottom:8px}
.nextitem{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius);background:var(--surface);width:100%;text-align:left;margin-bottom:10px}
.nextitem .k{font-size:.78rem;color:var(--ink-2)}
.nextitem .t{font-weight:700}
.nextitem .go{margin-left:auto;font-weight:800;color:var(--ok)}

/* lists */
.stage{margin:22px 0 8px}
.stage h2{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stage .cnt{font-size:.9rem;color:var(--ink-2);font-weight:600}
.track{display:flex;gap:3px;margin:8px 0 12px;height:6px}
.track i{flex:1;background:var(--surface-2);border-radius:3px}
.track i.done{background:var(--ok)}
.track i.part{background:var(--sun)}
.item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .rail{width:6px;align-self:stretch;border-radius:3px;background:var(--surface-2);flex:none}
.item.done .rail{background:var(--ok)}
.item.part .rail{background:var(--sun)}
.item.next .rail{background:var(--blue)}
.item .body{flex:1;min-width:0}
.item .title{font-weight:700}
.item .meta{font-size:.85rem;color:var(--ink-2)}
.item .badge{font-size:.75rem;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--blue-bg);color:var(--blue);white-space:nowrap}
.item .badge.ok{background:var(--ok-bg);color:var(--ok)}
.item .badge.sun{background:var(--sun-bg);color:#6b5600}
[data-theme="dark"] .item .badge.sun{color:var(--sun)}
.item .score{font-weight:800;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.item .score.good{color:var(--ok)}
.item .score.mid{color:#b58900}
.item .score.low{color:var(--bad)}

/* knowledge article */
.article{font-size:1.02rem}
.article h3{margin:22px 0 8px;font-size:1.05rem}
.article ul,.article ol{padding-left:1.25rem;margin:.3rem 0}
.article li{margin:.3rem 0}
.article table{border-collapse:collapse;width:100%;font-size:.84rem;line-height:1.3;margin:10px 0;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.article th{background:var(--surface)}
.article strong{font-weight:800}
.article code{background:var(--surface);padding:1px 5px;border-radius:5px}
.sticky-actions{position:sticky;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px);padding:10px 0;background:linear-gradient(transparent,var(--bg) 35%)}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600;padding:6px 0 10px}

/* quiz */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px}
.qhead .pos{font-weight:800;font-variant-numeric:tabular-nums}
.qhead .timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}
.qhead .timer.low{color:var(--bad)}
.progress{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:18px}
.progress i{display:block;height:100%;background:var(--ok);transition:width .25s}
.qtext{font-size:1.15rem;font-weight:700;margin:0 0 6px;line-height:1.35}
.qhint{font-size:.85rem;color:var(--ink-2);margin-bottom:14px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border-radius:var(--radius);background:var(--surface);border:2px solid transparent;width:100%;line-height:1.35}
.opt:hover{background:var(--surface-2)}
.opt .k{font-weight:800;color:var(--ink-2);min-width:1.4em}
.opt.sel{border-color:var(--ink)}
.opt.right{background:var(--ok-bg);border-color:var(--ok)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad)}
.opt.missed{border-color:var(--ok);border-style:dashed}
.opt:disabled{cursor:default}
.opt:disabled:hover{background:var(--surface)}
.opt.right:disabled:hover{background:var(--ok-bg)}
.opt.wrong:disabled:hover{background:var(--bad-bg)}
.feedback{margin-top:16px;padding:14px 16px;border-radius:var(--radius);border-left:6px solid var(--ok);background:var(--ok-bg)}
.feedback.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.feedback .verdict{font-weight:800;display:block;margin-bottom:4px}
.summary{text-align:center;padding:24px 0 10px}
.summary .big{font-size:4rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.summary .pct{font-size:1.2rem;color:var(--ink-2)}
.review{margin-top:20px}
.review .rq{padding:12px 0;border-bottom:1px solid var(--line)}
.review .rq .q{font-weight:700}
.review .rq .a{color:var(--ok);font-weight:600}
.review .rq .e{color:var(--ink-2);font-size:.92rem}

/* results */
.hist{margin:8px 0}
.hist .h{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0}
.calendar .c{aspect-ratio:1;border-radius:6px;background:var(--surface);font-size:.65rem;display:grid;place-items:center;color:var(--ink-3)}
.calendar .c.l1{background:#a7e8c8;color:#06210f}.calendar .c.l2{background:#5ed49a;color:#06210f}.calendar .c.l3{background:var(--ok);color:#06210f;font-weight:700}
.calendar .c.now{outline:2px solid var(--ink)}
.calendar .c.empty{background:transparent}

/* settings */
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.setting .btn{padding:10px 14px;min-height:0}
input[type=file]{display:none}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg);border-top:1px solid var(--line);z-index:10}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.75rem;font-weight:700;color:var(--ink-3)}
.tabs button .tab-ico{font-size:1.3rem;line-height:1}
.tabs button.active{color:var(--ink)}
[data-theme="dark"] .tabs button.active{color:var(--ok)}

.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 16px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:20;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}

.empty{padding:30px 10px;text-align:center;color:var(--ink-2)}
.tag{display:inline-block;font-size:.75rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);margin-right:6px;vertical-align:middle}
.tag.s{background:#dbeafe;color:#1e40af}.tag.r{background:#ede9fe;color:#5b21b6}.tag.w{background:#ffe4e6;color:#9f1239}
[data-theme="dark"] .tag.s{background:#1e3a8a;color:#bfdbfe}[data-theme="dark"] .tag.r{background:#4c1d95;color:#ddd6fe}[data-theme="dark"] .tag.w{background:#881337;color:#fecdd3}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (min-width:720px){body{font-size:18px}.tabs{max-width:720px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}