:root{--bg:#f6f4ff;--card:#fff;--ink:#26215c;--mute:#5d5a7a;--acc:#6b4fd8;--acc2:#e8e2ff;--err:#b3261e;--ok:#0f6e56;--line:#d9d4f2}
@media(prefers-color-scheme:dark){:root{--bg:#14122b;--card:#1f1c3d;--ink:#eeebff;--mute:#a9a5cc;--acc:#9a84ff;--acc2:#2d2958;--err:#ff8a80;--ok:#5dcaa5;--line:#3a3570}}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--ink)}
main{max-width:760px;margin:0 auto;padding:20px 16px 48px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:16px 0}
h1{font-size:1.5rem;margin:.2em 0}h2{font-size:1.15rem;margin:.2em 0 .6em}
label{display:block;margin:12px 0 4px;font-weight:600;font-size:.9rem}
input,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--bg);color:var(--ink)}
button{font:inherit;padding:12px 18px;border:0;border-radius:10px;background:var(--acc);color:#fff;font-weight:600;cursor:pointer}
button.ghost{background:var(--acc2);color:var(--ink)}button:disabled{opacity:.5}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}.row>*{flex:1}
.err{color:var(--err);margin:10px 0 0}.ok{color:var(--ok)}.mute{color:var(--mute);font-size:.9rem}
.hidden{display:none!important}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.num{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;text-align:center;cursor:pointer;color:var(--ink)}
.num b{display:block;font-size:1.6rem;color:var(--acc)}.num img{width:100%;max-width:120px;background:#fff;border-radius:12px}
.big{text-align:center}.big img{width:min(70vw,300px);background:#fff;border-radius:20px}.big .n{font-size:4rem;font-weight:800;color:var(--acc);line-height:1}
.big .w{font-size:2rem;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.scroll{overflow-x:auto}