:root{--bg:#fbf7f1;--card:#fff;--ink:#1d1b19;--mute:#7a736b;--red:#b3261e;--line:#e8e0d5;--ok:#2e7d32;
--t1:#d9381e;--t2:#2e7d32;--t3:#1565c0;--t4:#7b1fa2;--t5:#8a8a8a}
@media (prefers-color-scheme:dark){:root{--bg:#161412;--card:#221f1c;--ink:#f2ece4;--mute:#a39a8f;--line:#38332d;--red:#ff6b5e;
--t1:#ff7a63;--t2:#6fcf74;--t3:#6aa9ff;--t4:#d08bff;--t5:#9a9a9a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 "Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
padding-bottom:calc(64px + env(safe-area-inset-bottom))}
main{max-width:560px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 16px 24px}
h1{font-size:22px;margin:4px 0 2px}h2{font-size:17px;margin:20px 0 8px}
.sub{color:var(--mute);font-size:14px;margin:0 0 14px}
#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom)}
#tabs a{flex:1;text-align:center;padding:14px 4px;color:var(--mute);text-decoration:none;font-size:14px}
#tabs a.on{color:var(--red);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
.step{display:flex;align-items:center;gap:12px;padding:14px;margin:8px 0;background:var(--card);border:1px solid var(--line);
border-radius:14px;color:inherit;text-decoration:none}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-weight:700;flex:none}
.step.done .n{background:var(--ok);color:#fff}
.step .t{flex:1}.step .t b{display:block}.step .t span{color:var(--mute);font-size:13px}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:14px;font-size:17px;font-weight:600;background:var(--red);color:#fff;margin:10px 0}
.btn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn[disabled]{opacity:.4}
.row{display:flex;gap:8px}.row .btn{margin:6px 0}
.big{font-size:64px;text-align:center;margin:14px 0 2px;line-height:1.15}
.py{text-align:center;font-size:24px;margin:2px 0}
.vi{text-align:center;font-size:20px;margin:6px 0;color:var(--ink)}
.hint{text-align:center;color:var(--mute);margin:16px 0}
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}.t4{color:var(--t4)}.t5{color:var(--t5)}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:6px 0 14px}.bar i{display:block;height:100%;background:var(--red)}
.top{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:14px}
.top a{color:var(--mute);text-decoration:none}
.opt{display:block;width:100%;text-align:left;padding:14px;margin:8px 0;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:17px;color:var(--ink)}
.opt.ok{background:#2e7d3222;border-color:var(--ok)}.opt.bad{background:#b3261e22;border-color:var(--red)}
.wl{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.wl .h{font-size:22px;min-width:84px}.wl .p{min-width:110px}.wl .m{color:var(--mute);font-size:14px}
.tag{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 5px;color:var(--mute)}
.stats{display:flex;gap:8px}.stats div{flex:1;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 4px}
.stats b{display:block;font-size:22px}.stats span{font-size:12px;color:var(--mute)}
input[type=number],select{font-size:16px;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.set{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.top h1{margin:0}
.dl{cursor:pointer}.dl .zh{font-size:22px}.dl small{display:inline-block;background:var(--line);border-radius:6px;padding:0 6px;margin-right:6px;color:var(--mute)}
.dl .py2{margin-top:2px}.dl.cur{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset}.dl.me{background:#b3261e12}
#tabs a{font-size:12.5px;padding:14px 2px}
/* In ấn */
.sheet{display:none}
@media print{
  body{background:#fff;color:#000;padding:0}#tabs,#app>*:not(.sheet){display:none!important}
  .sheet{display:block}main{padding:0;max-width:none}
  .pg{page-break-after:always;padding:6mm}.pg h2{font-size:15pt;margin:0 0 4mm}
  table.pt{width:100%;border-collapse:collapse}table.pt td{border:1px solid #999;padding:3mm;font-size:13pt;height:12mm}
  .grid{display:flex;flex-wrap:wrap;gap:0}.gc{width:17mm;height:17mm;border:1px solid #444;position:relative;
  background:linear-gradient(to right,transparent 49.5%,#bbb 49.5%,#bbb 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,#bbb 49.5%,#bbb 50.5%,transparent 50.5%);
  font-size:26pt;text-align:center;line-height:17mm;color:#bbb}.gc.ref{color:#000}
  .t1,.t2,.t3,.t4,.t5{color:#000}
}