:root{
  --bg:#e9eef3; --panel:#ffffff; --text:#1f3a5f; --muted:#5b6f86; --line:#c9d3de; --accent:#f2b705; --btn:#1f3a5f; --btnText:#fff; --err:#b3261e;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --display:"Baloo 2","Be Vietnam Pro","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#141b24; --panel:#1d2733; --text:#e6edf5; --muted:#9fb0c3; --line:#34445a; --btn:#f2b705; --btnText:#1b1b1b; --err:#ffb4ab; }
}
:root[data-theme="dark"]{ --bg:#141b24; --panel:#1d2733; --text:#e6edf5; --muted:#9fb0c3; --line:#34445a; --btn:#f2b705; --btnText:#1b1b1b; --err:#ffb4ab; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}

/* Controls */
.controls{max-width:210mm;margin:16px auto;padding:16px 18px;background:var(--panel);border-radius:10px;border:1px solid var(--line)}
.controls h1{font-family:var(--display);font-size:1.5rem;margin:0 0 4px}
.controls p{margin:0 0 12px;color:var(--muted);font-size:.9rem;line-height:1.5}
.row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end;margin-bottom:12px}
.row.hidden{display:none}
label{display:flex;flex-direction:column;font-size:.85rem;gap:4px;color:var(--muted)}
label.grow{flex:1;min-width:220px}
input,select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text);min-width:110px}
input[type=number]{width:120px}
select option{color:#000}
input[type=color]{min-width:0;width:64px;height:34px;padding:2px}
.check{flex-direction:row;align-items:center;gap:6px;color:var(--text)}
.check input{min-width:0}
.hidden{display:none}
button{font:inherit;font-weight:600;padding:8px 16px;border-radius:6px;border:0;background:var(--btn);color:var(--btnText);cursor:pointer}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.controls .err{color:var(--err);margin:10px 0 0;font-weight:600}
.controls .err:empty{display:none}

/* Paper */
.scroller{overflow-x:auto;padding:0 8px 24px}
.page{width:210mm;min-height:297mm;margin:0 auto 16px;background:#fff;color:#1f3a5f;padding:11mm 12mm;box-shadow:0 2px 10px rgba(20,40,70,.18);display:flex;flex-direction:column;font-family:var(--sans)}
.head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #1f3a5f;padding-bottom:3mm;margin-bottom:3mm}
.head h2{font-family:var(--display);font-size:20pt;line-height:1;margin:0}
.head .sub{font-size:9pt;color:#5b6f86;margin-top:1mm}
.head .site{font-size:8pt;color:#9fb0c3;margin-top:.5mm}
.meta{font-size:10pt;text-align:right;line-height:1.9}
.meta span{display:inline-block;border-bottom:1px dotted #5b6f86;min-width:52mm;text-align:left;padding-left:2mm;font-weight:600;color:#1f3a5f}
.guide{font-size:8.5pt;color:#5b6f86;margin:0 0 2.5mm;line-height:1.45}
.prob{flex:1;display:flex;flex-direction:column;border:1.5px solid #1f3a5f;border-radius:3mm;margin-bottom:3mm;overflow:hidden;min-height:46mm}
.prob:last-child{margin-bottom:0}
.q{display:flex;align-items:center;gap:3mm;padding:1.5mm 3mm;background:var(--qbg,#fdf3d0);color:var(--qfg,#1f3a5f);border-bottom:1.5px solid #1f3a5f}
.num{font-family:var(--display);font-weight:700;width:7mm;height:7mm;border-radius:50%;background:var(--nbg,#1f3a5f);color:var(--nfg,#fff);display:grid;place-items:center;font-size:11pt}
.expr{font-family:var(--display);font-weight:700;font-size:17pt;letter-spacing:.5px}
.cells{flex:1;display:grid;grid-template-columns:25% 25% 35% 15%}
.cell{border-right:1px dashed #9fb0c3;padding:1.5mm 2mm;display:flex;flex-direction:column}
.cell:last-child{border-right:0;background:#f5f8fb}
.lbl{font-size:8pt;font-weight:600;color:#5b6f86}
.est{margin:auto 0 1.5mm;font-family:var(--display);font-size:11pt;line-height:2.1;color:#9fb0c3;white-space:nowrap;text-align:left;padding-left:1mm}
.est b{display:inline-block;width:12mm;border-bottom:1px solid #9fb0c3;vertical-align:baseline}
.est b.wide{width:22mm}
.grid{margin:auto;display:grid;grid-template-columns:repeat(var(--cols),var(--sz));grid-auto-rows:var(--sz)}
.grid div{border:.5px solid #d3dce6}
.grid .op{border:0}
.grid .carry{border-style:dotted;height:calc(var(--sz) * .66);align-self:end}
.grid .bar{border-top:2px solid #1f3a5f}
.lines{margin-top:auto;display:flex;flex-direction:column;gap:5.2mm;padding-bottom:1.5mm}
.lines div{border-bottom:1px dotted #9fb0c3}
.result{margin:auto;width:24mm;height:13mm;border:2px solid #1f3a5f;border-radius:2mm;background:#fff}
.mark{margin:1.2mm auto 0;width:7mm;height:7mm;border:1.5px solid #1f3a5f;border-radius:1mm;background:#fff}
.headR{display:flex;align-items:flex-end;gap:5mm}
.score{display:flex;flex-direction:column;align-items:center;font-size:9pt;font-weight:600}
.score .sbox{display:flex;align-items:flex-end;justify-content:flex-end;width:26mm;height:14mm;border:2px solid #1f3a5f;border-radius:2mm;padding:0 1.5mm .5mm;font-family:var(--display);font-size:17pt;line-height:1;font-weight:700;color:#5b6f86}

/* Answer key */
.key table{width:100%;border-collapse:collapse;font-size:10pt;margin-bottom:5mm}
.key th,.key td{border:1px solid #c9d3de;padding:1.2mm 2mm;text-align:left}
.key th{background:#fdf3d0}
.key .tag{font-size:8pt;color:#5b6f86}
.key h3{font-family:var(--display);margin:3mm 0 1.5mm;font-size:13pt}

@media print{
  @page{size:A4;margin:0}
  :root{padding:0}
  body{background:#fff}
  .controls{display:none}
  .scroller{padding:0;overflow:visible}
  .page{margin:0;box-shadow:none;break-after:page;page-break-after:always;height:297mm}
  .page:last-child{break-after:auto;page-break-after:auto}
  .q,.cell:last-child,.key th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}