/* ===== tokens (PRD 6.1: unchanged from the VHS shelf spec) ===== */
:root{
  --paper:#EDEBE6; --sheet:#F4F2ED; --ink:#141414; --muted:#6D6A63; --cobalt:#1F3FB0;
  --rule:rgba(20,20,20,.9); --ease:cubic-bezier(.2,.8,.2,1);
  --ok:#1E6B45; --bad:#C23A22; --warn:#B7791F;
  --H:min(46vh,31vw);
  --sans:"Inter Tight","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,"Noto Serif SC","Songti SC","SimSun",serif;
  --cn:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif; /* dynamic Chinese (questions, answers) */
}
@media (max-width:767px){:root{--H:min(60vw,40svh)}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
body.noscroll{overflow:hidden;user-select:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
@media (pointer:fine){html.shelf-mode,html.shelf-mode body,html.shelf-mode button,html.shelf-mode a{cursor:none}}

/* ===== paper grain: fixed 220x220 feTurbulence tile, multiply, opacity .55 ===== */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .22 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
body.calm .grain{opacity:.28}
html.lite .grain{display:none}

/* ===== label system ===== */
.lbl{font-family:var(--sans);font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase}
.box{display:inline-flex;align-items:center;height:21px;padding:0 8px;border:1px solid var(--rule);text-decoration:none;white-space:nowrap}
a.box:hover,button.box:hover{background:var(--ink);color:var(--paper)}
.cobalt{color:var(--cobalt)}
.muted{color:var(--muted)}

/* ===== top bar shared by every page ===== */
.bar{position:fixed;left:0;right:0;top:0;height:84px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:30}
.bar .l{justify-self:start;display:flex;gap:8px}.bar .r{justify-self:end}
.logo{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--cobalt);text-decoration:none}
.logo b{font:700 22px/1 "Noto Serif SC","Songti SC",serif;letter-spacing:.04em}
.logo i{font:600 9px/1 var(--sans);letter-spacing:.34em;padding-left:.34em;font-style:normal}
@media (max-width:767px){.bar{height:64px;padding:0 16px}.logo b{font-size:17px}.logo i{font-size:7.5px}.lbl{font-size:9px}.bar .r.hide-m{display:none}}

/* ===== inner pages ===== */
.page{max-width:1120px;margin:0 auto;padding:108px 32px 72px;position:relative;z-index:1}
@media (max-width:767px){.page{padding:84px 16px 56px}}
.page h1{font:400 clamp(30px,4vw,48px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 6px}
.page h2{font:400 24px/1.2 var(--serif);margin:0 0 12px;letter-spacing:-.01em}
.page .sub{margin:0 0 28px}
.page p{line-height:1.7}
.cn{font-family:var(--cn)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:820px){.grid2,.grid3,.grid4{grid-template-columns:1fr 1fr}}@media (max-width:560px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);background:rgba(244,242,237,.6);padding:20px;position:relative}
.card h3{margin:0 0 8px;font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.stat{font:400 40px/1 var(--serif);letter-spacing:-.02em}
.stat small{font:600 10.5px var(--sans);letter-spacing:.09em;color:var(--muted);margin-left:6px}
.rule{height:1px;background:var(--rule);border:0;margin:24px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;border:1px solid var(--rule);font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.btn.pri{background:var(--cobalt);border-color:var(--cobalt);color:#fff}.btn.pri:hover:not(:disabled){background:var(--ink);border-color:var(--ink)}
.btn.line{border-color:var(--cobalt);color:var(--cobalt)}.btn.line:hover:not(:disabled){background:var(--cobalt);color:#fff}
.btn.sm{min-height:30px;padding:0 12px;font-size:10px}
.btn.danger{border-color:var(--bad);color:var(--bad)}.btn.danger:hover:not(:disabled){background:var(--bad);color:#fff}
.btn:disabled{color:#9a968d;border-color:#b9b5ab;background:transparent}
.btn.tip{position:relative}

label.f{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin:0 0 7px}
.in,select.in,textarea.in{width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--rule);background:var(--sheet);font:400 15px/1.5 var(--cn);color:var(--ink);border-radius:0}
textarea.in{resize:vertical;min-height:140px}
.in:focus{outline:2px solid var(--cobalt);outline-offset:-1px}
.field{margin:0 0 18px}
.hint{font-size:12.5px;color:var(--muted);line-height:1.6;margin:6px 0 0;font-family:var(--cn)}
.chk{display:flex;gap:10px;align-items:flex-start;font:400 14px/1.6 var(--cn);cursor:pointer}
.chk input{margin-top:4px;accent-color:var(--cobalt);width:16px;height:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--rule);font:500 13px var(--cn);cursor:pointer;user-select:none;transition:background .3s var(--ease),color .3s var(--ease)}
.pill[aria-pressed=true],.pill.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

table.tbl{width:100%;border-collapse:collapse;font:400 14px/1.5 var(--cn)}
.tbl th{font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid rgba(20,20,20,.14);vertical-align:top}
.tbl tr:hover td{background:rgba(31,63,176,.04)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:rgba(244,242,237,.6)}
.tag{display:inline-block;padding:2px 8px;border:1px solid currentColor;font:600 10px/1.4 var(--sans);letter-spacing:.08em}
.tag.ok{color:var(--ok)}.tag.bad{color:var(--bad)}.tag.warn{color:var(--warn)}.tag.blue{color:var(--cobalt)}
.bar-meter{height:8px;background:rgba(20,20,20,.1);position:relative}
.bar-meter i{position:absolute;left:0;top:0;bottom:0;background:var(--cobalt);transform-origin:left;display:block}
.nav-tabs{display:flex;gap:0;margin:0 0 28px;border-bottom:1px solid var(--rule);overflow-x:auto}
.nav-tabs a{padding:12px 18px;font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.nav-tabs a.on{border-color:var(--cobalt);color:var(--cobalt)}

/* ===== toast / modal: slide + clip only, never opacity ===== */
#toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--paper);padding:12px 18px;font:500 14px/1.5 var(--cn);max-width:min(92vw,520px);overflow:hidden}
.toast.err{background:var(--bad)}
.toast span{display:block}
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.4);display:grid;place-items:center;padding:16px}
.modal{background:var(--sheet);border:1px solid var(--ink);width:min(680px,100%);max-height:92vh;overflow:auto;padding:28px 28px 24px;position:relative}
.modal.wide{width:min(980px,100%)}
.modal h2{margin-top:0}
.modal .x{position:absolute;right:14px;top:12px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .8s linear infinite;vertical-align:-2px}
@keyframes rot{to{transform:rotate(360deg)}}
.skeleton{height:18px;background:linear-gradient(90deg,rgba(20,20,20,.07),rgba(20,20,20,.14),rgba(20,20,20,.07));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.spin,.skeleton{animation:none}}

/* ===== question UI (practice / exam) ===== */
.qwrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
@media (max-width:900px){.qwrap{grid-template-columns:1fr}.qcard-side{order:-1}}
.qmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.qmask{overflow:hidden}
.qstem{font:400 20px/1.7 var(--cn);margin:0 0 22px}
.opt{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--rule);background:rgba(244,242,237,.55);margin:0 0 10px;font:400 16px/1.6 var(--cn);min-height:52px;transition:background .25s var(--ease),border-color .25s var(--ease)}
.opt b{font:600 12px/1.9 var(--sans);letter-spacing:.06em;min-width:18px}
.opt:hover:not(:disabled){background:rgba(31,63,176,.08);border-color:var(--cobalt)}
.opt.sel{border-color:var(--cobalt);background:rgba(31,63,176,.1)}
.opt.right{border-color:var(--ok);background:rgba(30,107,69,.12)}.opt.wrong{border-color:var(--bad);background:rgba(194,58,34,.1)}
.opt .mk{margin-left:auto;font:700 16px/1.4 var(--sans)}
.opt.right .mk{color:var(--ok)}.opt.wrong .mk{color:var(--bad)}
.opt:disabled{cursor:default;color:inherit}
.blanks{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.blank{display:flex;align-items:center;gap:10px}.blank .in{max-width:420px}
.verdict{display:flex;gap:10px;align-items:center;margin:14px 0 8px;font:600 15px/1.4 var(--cn)}
.verdict.ok{color:var(--ok)}.verdict.bad{color:var(--bad)}
.analysis{border-left:3px solid var(--cobalt);padding:8px 0 8px 16px;margin:14px 0;font:400 15px/1.8 var(--cn);white-space:pre-wrap;background:rgba(31,63,176,.04)}
.ai-box{border:1px dashed var(--cobalt);padding:14px 16px;margin:14px 0;font:400 15px/1.8 var(--cn);white-space:pre-wrap}
.qcard-side{position:sticky;top:100px}
.qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.qgrid button{height:36px;border:1px solid var(--rule);font:600 12px var(--sans);position:relative}
.qgrid button.done{background:rgba(31,63,176,.14)}.qgrid button.cur{outline:2px solid var(--cobalt);outline-offset:1px}
.qgrid button.flag::after{content:"";position:absolute;right:2px;top:2px;border:5px solid transparent;border-top-color:var(--bad);border-right-color:var(--bad)}
.qgrid button.right{background:rgba(30,107,69,.2)}.qgrid button.wrong{background:rgba(194,58,34,.2)}
.timer{font:400 44px/1 var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer.low{color:var(--bad)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font:12px var(--cn);color:var(--muted);margin-top:10px}
.footbar{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:28px;flex-wrap:wrap}

/* ===== sheet-open transition for results ===== */
.sheet-in{animation:none}

/* ===== footer (inner pages) ===== */
.foot{position:fixed;left:32px;right:32px;bottom:26px;display:flex;justify-content:space-between;z-index:5;pointer-events:none}
.foot a{pointer-events:auto;text-decoration:none}
@media (max-width:900px),(max-height:760px){.foot{display:none}}
.print-only{display:none}
@media print{.bar,.foot,.grain,.no-print{display:none!important}.page{padding:0}}