:root{--bg: #f6f5f2;--surface: #ffffff;--surface-2: #faf9f7;--text: #1b1b19;--muted: #6d6b66;--faint: #9c9a94;--line: #e6e4de;--line-strong: #d3d0c8;--brand: #b91c1c;--brand-dark: #8f1515;--brand-soft: #fdf2f2;--ok: #15803d;--ok-soft: #f0fdf4;--warn: #b45309;--wrong: #dc2626;--wrong-soft: #fef2f2;--gold: #b8860b;--silver: #8a8a8a;--bronze: #a06a3a;--r-sm: 8px;--r: 12px;--r-lg: 18px;--r-full: 999px;--shadow: 0 1px 2px rgba(20, 18, 14, .05), 0 8px 24px -12px rgba(20, 18, 14, .18);--shadow-sm: 0 1px 2px rgba(20, 18, 14, .06);--font: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;--mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}button:disabled{cursor:not-allowed}input,select,textarea{font-family:inherit;font-size:inherit}a{color:var(--brand)}h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:600}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--text)}.topbar .mark{width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}.topbar .spacer{flex:1}.mode-chip{font-size:12px;padding:3px 9px;border-radius:var(--r-full);border:1px solid var(--line-strong);color:var(--muted);background:var(--surface-2);white-space:nowrap}.mode-chip.live{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.page{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:28px 20px 64px}.page.wide{max-width:1400px}.page.narrow{max-width:560px}.stack{display:flex;flex-direction:column;gap:16px}.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}.grow{flex:1}.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}.card.pad-lg{padding:30px}.card.tint{background:var(--surface-2)}.card-title{font-size:15px;font-weight:600;margin-bottom:2px}.card-sub{font-size:13px;color:var(--muted)}.hr{height:1px;background:var(--line);border:0;margin:18px 0}.h1{font-size:26px;font-weight:600;letter-spacing:-.02em}.h2{font-size:19px;font-weight:600}.lede{color:var(--muted);font-size:15px;margin-top:6px}.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.tiny{font-size:12px}.mono{font-family:var(--mono)}.label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}.input{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.input.code{font-family:var(--mono);font-size:30px;letter-spacing:.24em;text-align:center;text-transform:uppercase;padding:16px 14px;font-weight:600}.field{margin-bottom:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--r);font-weight:500;font-size:15px;border:1px solid transparent;transition:background .15s,border-color .15s,transform .08s,opacity .15s;min-height:44px}.btn:active:not(:disabled){transform:translateY(1px)}.btn.primary{background:var(--brand);color:#fff}.btn.primary:hover:not(:disabled){background:var(--brand-dark)}.btn.ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text)}.btn.ghost:hover:not(:disabled){border-color:var(--faint);background:var(--surface-2)}.btn.ok{background:var(--ok);color:#fff}.btn.ok:hover:not(:disabled){filter:brightness(.92)}.btn.big{padding:16px 30px;font-size:17px;min-height:54px}.btn.block{width:100%}.btn:disabled{opacity:.45}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-full);font-size:13px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--muted)}.pill.brand{border-color:#f3c7c7;background:var(--brand-soft);color:var(--brand-dark)}.pill.ok{border-color:#bbf7d0;background:var(--ok-soft);color:var(--ok)}.pill.wrong{border-color:#fecaca;background:var(--wrong-soft);color:var(--wrong)}.pill.live{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}.dot.pulse{animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.28}}.code-display{font-family:var(--mono);font-size:68px;font-weight:600;letter-spacing:.16em;color:var(--brand);line-height:1;-webkit-user-select:all;user-select:all}.qr-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:inline-grid;place-items:center}.question-text{font-size:34px;font-weight:600;line-height:1.35;letter-spacing:-.01em}.question-text.student{font-size:24px}.options{display:grid;gap:12px}.options.two-col{grid-template-columns:1fr 1fr}@media(max-width:720px){.options.two-col{grid-template-columns:1fr}}.option{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);text-align:left;font-size:19px;transition:border-color .15s,background .15s,transform .08s;width:100%;min-height:64px}.option:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft)}.option:disabled{opacity:1;cursor:default}.option .key{width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--muted)}.option .opt-text{flex:1;min-width:0}.option .tally{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.option.selected{border-color:var(--brand);background:var(--brand-soft)}.option.selected .key{background:var(--brand);border-color:var(--brand);color:#fff}.option.correct{border-color:var(--ok);background:var(--ok-soft)}.option.correct .key{background:var(--ok);border-color:var(--ok);color:#fff}.option.wrong{border-color:var(--wrong);background:var(--wrong-soft)}.option.wrong .key{background:var(--wrong);border-color:var(--wrong);color:#fff}.option.dim{opacity:.5}.bar{height:6px;border-radius:var(--r-full);background:var(--line);overflow:hidden;margin-top:10px}.bar>i{display:block;height:100%;background:var(--brand);transition:width .4s ease}.bar.ok>i{background:var(--ok)}.countdown{display:flex;align-items:center;gap:14px}.ring{position:relative;flex:none}.ring svg{transform:rotate(-90deg);display:block}.ring .track{stroke:var(--line)}.ring .prog{stroke:var(--brand);transition:stroke-dashoffset .95s linear,stroke .3s;stroke-linecap:round}.ring.urgent .prog{stroke:var(--wrong)}.ring .num{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}.lb{display:flex;flex-direction:column;gap:6px}.lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r);background:var(--surface-2);border:1px solid transparent;transition:background .3s,transform .3s}.lb-row.me{background:var(--brand-soft);border-color:#f3c7c7}.lb-row .rank{width:26px;flex:none;text-align:center;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.lb-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-row .score{font-variant-numeric:tabular-nums;font-weight:600}.lb-row.p1{background:linear-gradient(90deg,#fdf6e3,var(--surface-2))}.lb-row.p1 .rank{color:var(--gold)}.lb-row.p2 .rank{color:var(--silver)}.lb-row.p3 .rank{color:var(--bronze)}.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}@media(max-width:900px){.grid-2{grid-template-columns:1fr}}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}.stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.stat .v{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}.banner{padding:14px 18px;border-radius:var(--r);font-size:14px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--muted)}.banner.warn{border-color:#fde68a;background:#fffbeb;color:#92400e}.banner.info{border-color:#bfdbfe;background:#eff6ff;color:#1e40af}.banner.err{border-color:#fecaca;background:var(--wrong-soft);color:#991b1b}.banner.ok{border-color:#bbf7d0;background:var(--ok-soft);color:#166534}.waiting{text-align:center;padding:40px 20px;color:var(--muted)}.result-hero{text-align:center;padding:34px 20px}.result-hero .big-num{font-size:62px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.list-plain{list-style:none;margin:0;padding:0}.list-plain li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}.list-plain li:last-child{border-bottom:none}.spinner{width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--surface-2)}