:root{--bg:#f8fafc;--fg:#14213d;--card:#fff;--ac:#1d4ed8;--mut:#566178;--bd:#d3dbe8;--err:#b42318;--ok:#15803d}
@media (prefers-color-scheme:dark){:root{--bg:#0f172a;--fg:#e6ecf8;--card:#1a2542;--ac:#7ea6ff;--mut:#a3b0cc;--bd:#2f3d62;--err:#fda29b;--ok:#86efac}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,sans-serif}
header,main,aside,footer,nav,.about{max-width:680px;margin:0 auto;padding:0 16px}
h1{font-size:1.5rem;margin:16px 0 4px}h2{font-size:1.1rem;margin:20px 0 8px}
.sub{color:var(--mut);margin:0 0 8px}
.warn,.card{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px 14px;margin:10px 0}
.warn{border-left:4px solid var(--ac);font-size:.9rem}
.about{font-size:.9rem;color:var(--mut)}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
nav button{flex:1;min-width:90px;padding:9px;border:1px solid var(--bd);background:var(--card);color:var(--fg);border-radius:6px;font:inherit}
nav button.on{background:var(--ac);color:var(--bg);border-color:var(--ac)}
label{display:block;margin:8px 0;font-size:.9rem;color:var(--mut)}
input{display:block;width:100%;padding:9px;margin-top:3px;border:1px solid var(--bd);border-radius:6px;background:var(--card);color:var(--fg);font:inherit}
.row3{display:flex;gap:10px}.row3 label{flex:1}
button{padding:11px 16px;border-radius:6px;border:1px solid var(--bd);background:var(--card);color:var(--fg);font:inherit;cursor:pointer;margin:4px 4px 4px 0}
button.primary,.btn{background:var(--ac);color:var(--bg);border-color:var(--ac)}
button.danger{color:var(--err);border-color:var(--err)}
button[disabled]{opacity:.5}
.btn{display:inline-block;padding:11px 16px;border-radius:6px;text-decoration:none}
.err{color:var(--err);min-height:1.2em;margin:4px 0}.small{font-size:.85rem;color:var(--mut)}
.clock{font-size:3rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;margin:8px 0 0}
.phase{text-align:center;color:var(--mut);margin-bottom:8px}
.phase.rec{color:var(--err);font-weight:700}
#item{font-size:1.15rem;line-height:1.6;min-height:5em}
#item svg{width:100%;height:auto;display:block}
.bar{height:8px;background:var(--bd);border-radius:4px;margin-top:8px;overflow:hidden}.bar div{height:100%;width:0;background:var(--ac)}
.score{font-size:2.4rem;font-weight:700}
.miss{color:var(--err)}
table{width:100%;border-collapse:collapse;font-size:.9rem;margin:8px 0}th,td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--bd)}
footer{font-size:.8rem;color:var(--mut);padding-bottom:32px}