:root{--bg:#faf8f4;--fg:#1f2328;--mut:#6b7280;--card:#fff;--line:#e5e1d8;--acc:#0b5cad;--acc2:#e8f1fb;--ok:#1a7f37;--bad:#c62828;--warn:#b26a00}
@media(prefers-color-scheme:dark){:root{--bg:#14161a;--fg:#e8e8e8;--mut:#98a0a8;--card:#1e2126;--line:#31363d;--acc:#6cb2ff;--acc2:#1b2a3b;--ok:#4cc26b;--bad:#ff7b72;--warn:#e3a34a}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif}
#app{max-width:780px;margin:0 auto;padding:16px 16px calc(90px + env(safe-area-inset-bottom))}
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
#tabs a{flex:1;max-width:156px;text-align:center;padding:8px 0 6px;color:var(--mut);text-decoration:none;font-size:11px;line-height:1.2}
#tabs a b{display:block;font-size:20px;font-weight:400}#tabs a.on{color:var(--acc)}#tabs a i{font-style:normal;background:var(--bad);color:#fff;border-radius:9px;padding:0 5px;font-size:10px;margin-left:2px}
h1{font-size:24px;margin:6px 0 4px}h2{font-size:17px;margin:28px 0 10px;border-left:4px solid var(--acc);padding-left:10px}h3{font-size:16px;margin:14px 0 6px}
.mut{color:var(--mut);font-size:13px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.en{font-weight:600;font-size:17px}.zh{color:var(--mut);font-size:14px}.note{font-size:13px;color:var(--mut);margin-top:4px}
button,.btn{font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:9px;padding:6px 12px;min-height:34px}
button:hover{border-color:var(--acc)}button.pri{background:var(--acc);border-color:var(--acc);color:#fff}button.pri.dk{color:#0b1a2a}button.ghost{border:none;background:none;color:var(--mut);padding:4px 8px}
button.on{color:#e8a200}button:disabled{opacity:.5}
input,textarea,select{font:inherit;width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--fg)}
textarea{min-height:120px;resize:vertical}
.opt{display:block;width:100%;text-align:left;margin:6px 0;white-space:normal}.opt.ok{border-color:var(--ok);background:rgba(26,127,55,.13)}.opt.bad{border-color:var(--bad);background:rgba(198,40,40,.13)}
.exp{margin-top:8px;padding:9px 11px;border-radius:9px;background:var(--acc2);font-size:14px;white-space:pre-wrap}
.talk{white-space:pre-wrap;font-size:16.5px;line-height:1.8}.talk .w{cursor:pointer;border-radius:3px}.talk .w:hover,.talk .w:active{background:var(--acc2)}
.pill{display:inline-block;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--acc2);color:var(--acc);margin-right:4px}
.seg{display:flex;gap:6px;overflow-x:auto;margin:8px 0}.seg button.on{background:var(--acc2);border-color:var(--acc);color:var(--acc)}
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}#sheet>div{background:var(--bg);width:100%;max-width:780px;max-height:88vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#222;color:#fff;padding:8px 16px;border-radius:99px;font-size:14px;z-index:30}
#toast[hidden]{display:none}
.fc{text-align:center;padding:32px 16px;min-height:200px}.fc .t{font-size:26px;font-weight:700}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.diff del{color:var(--bad)}.diff ins{color:var(--ok);text-decoration:none;font-weight:600}
.login{max-width:340px;margin:18vh auto 0;text-align:center}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--acc)}
.rec.live{border-color:var(--bad);color:var(--bad)}