:root{--bg:#111;--fg:#eee;--mut:#aaa;--card:#1d1d1f;--ac:#ff8a5c;--ok:#4caf50;--ng:#ef5350}
.light{--bg:#fafafa;--fg:#111;--mut:#555;--card:#fff;--ac:#b23c00;--ok:#1b7a1f;--ng:#c62828}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Noto Sans TC","Hiragino Sans",system-ui,sans-serif;line-height:1.6}
header{position:sticky;top:0;background:var(--bg);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid #8884;z-index:2}
h1{font-size:1.15rem;margin:0;color:var(--ac)}nav{display:flex;gap:.3rem;flex:1}
button{font:inherit;color:var(--fg);background:var(--card);border:1px solid #8886;border-radius:.6rem;padding:.45rem .8rem;cursor:pointer}
button.on,button.pri{background:var(--ac);color:#fff;border-color:var(--ac)}.light button.on,.light button.pri{color:#fff}
main{max-width:860px;margin:auto;padding:1rem}.box{background:var(--card);border-radius:1rem;padding:1rem;margin-bottom:1rem;border:1px solid #8883}
.big{font-size:2.6rem;font-weight:700;color:var(--ac)}.mut{color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.k{padding:.6rem 0;text-align:center}.k b{display:block;font-size:1.7rem}.k small{color:var(--mut)}
.card{min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer}
.card .w{font-size:3rem}.row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem}
.opt{display:block;width:100%;text-align:left;margin:.35rem 0}.opt.ok{background:var(--ok);color:#fff}.opt.ng{background:var(--ng);color:#fff}
.bar{height:8px;background:#8884;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac)}
select{font:inherit;padding:.3rem;border-radius:.4rem;background:var(--card);color:var(--fg)}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}
nav button,#theme{white-space:nowrap;padding:.4rem .6rem}header{flex-wrap:nowrap}h1{white-space:nowrap}
header{flex-wrap:wrap}nav{order:3;flex-basis:100%;overflow-x:auto}nav button{flex:1}#theme{margin-left:auto}
#acct{margin-left:auto;white-space:nowrap;padding:.4rem .6rem}#acct+#theme{margin-left:0}dialog{background:var(--card);color:var(--fg);border:1px solid #8886;border-radius:1rem;padding:1.2rem;width:min(92vw,360px)}dialog::backdrop{background:#0008}dialog input{display:block;width:100%;font:inherit;margin:.4rem 0;padding:.55rem;border-radius:.5rem;border:1px solid #8886;background:var(--bg);color:var(--fg)}.err{color:var(--ng);min-height:1.2em;margin:.3rem 0}
.grid.y{grid-template-columns:repeat(3,1fr)}