/* NCRE 三级信息安全技术 · 刷题站
   设计取向：纸张/油墨，靠留白与字重建立层级，不用渐变与阴影 */
:root{
  --ink:#1b1a18; --ink2:#57534d; --ink3:#8b857c;
  --paper:#faf8f5; --card:#fff; --rule:#e6e1d9; --rule2:#d3ccc0;
  --accent:#12554c; --accentSoft:#e7f0ee;
  --ok:#1d6a3a; --okSoft:#e9f3ec;
  --no:#a3341f; --noSoft:#fbeeea;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 16px 92px}

header{padding:24px 0 14px}
h1{font-size:18px;font-weight:600;margin:0;letter-spacing:.01em}
.sub{font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.75}
.sub b{color:var(--accent);font-weight:600}

nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);
  display:flex;gap:2px;margin:14px -16px 20px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:0 0 auto;appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 12px 10px;font:inherit;font-size:14px;color:var(--ink2);cursor:pointer;white-space:nowrap}
nav button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
nav button i{font-style:normal;font-size:11px;color:var(--ink3);margin-left:4px}

.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:15px}
select,input[type=text],input[type=search]{appearance:none;font:inherit;font-size:13.5px;color:var(--ink);
  background:var(--card);border:1px solid var(--rule2);border-radius:3px;padding:7px 10px;min-width:0}
select{padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 51%,calc(100% - 9px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type=text],input[type=search]{flex:1;min-width:130px}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.meter{margin-left:auto;font-size:12.5px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.meter b{color:var(--ink);font-weight:600}

.btn{appearance:none;font:inherit;font-size:13.5px;cursor:pointer;border:1px solid var(--rule2);
  background:var(--card);color:var(--ink2);border-radius:3px;padding:7px 13px;transition:border-color .12s,color .12s}
.btn:hover{border-color:var(--ink3);color:var(--ink)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.btn.solid:hover{background:#0d423b;border-color:#0d423b;color:#fff}
.btn:disabled{opacity:.4;cursor:default}
.grow{flex:1}

.card{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:19px 19px 16px}
.card+.card{margin-top:11px}
.qhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:11px;font-size:12px;color:var(--ink3)}
.tag{color:var(--accent);background:var(--accentSoft);border-radius:2px;padding:2px 7px;letter-spacing:.01em}
.tag.src{color:var(--ink2);background:#f0ece5}
.tag.err{color:var(--no);background:var(--noSoft)}
.stem{font-size:16px;line-height:1.72;margin:0 0 15px;text-wrap:pretty}
.blankbox{font-size:16px;line-height:1.9;margin:0 0 14px;white-space:pre-wrap;text-wrap:pretty}

.opt{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  border:1px solid var(--rule);background:var(--card);border-radius:3px;
  padding:11px 12px;margin-bottom:7px;font:inherit;font-size:15px;line-height:1.6;
  cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--rule2);background:#fdfcfb}
.opt .k{flex:0 0 20px;height:20px;margin-top:2px;border-radius:50%;border:1px solid var(--rule2);
  font-size:11.5px;line-height:18px;text-align:center;color:var(--ink3);font-weight:600}
.opt.ok{border-color:var(--ok);background:var(--okSoft)}
.opt.ok .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.no{border-color:var(--no);background:var(--noSoft)}
.opt.no .k{background:var(--no);border-color:var(--no);color:#fff}
.opt.dim{opacity:.6}
.lock .opt{cursor:default}
.lock .opt:hover{border-color:var(--rule);background:var(--card)}
.lock .opt.ok:hover{border-color:var(--ok);background:var(--okSoft)}
.lock .opt.no:hover{border-color:var(--no);background:var(--noSoft)}

.inp{font:inherit;font-size:15px;padding:9px 11px;width:100%;border:1px solid var(--rule2);
  border-radius:3px;background:var(--card);color:var(--ink)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.inp.ok{border-color:var(--ok);background:var(--okSoft)}
.inp.no{border-color:var(--no);background:var(--noSoft)}
.blankrow{display:flex;gap:9px;align-items:center;margin-bottom:9px}
.blankrow label{flex:0 0 auto;font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.blankrow .inp{flex:1}

.verdict{margin-top:13px;padding-top:13px;border-top:1px solid var(--rule);font-size:14px}
.verdict .line{font-weight:600;margin-bottom:5px}
.verdict .line.ok{color:var(--ok)}
.verdict .line.no{color:var(--no)}
.verdict .expl{color:var(--ink2);line-height:1.72;text-wrap:pretty}
.verdict .expl em{font-style:normal;color:var(--accent);font-weight:600}
.verdict .kv{font-size:13px;color:var(--ink2);margin-top:4px}

.foot{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-bottom:18px}
.cell{border:1px solid var(--rule);border-radius:3px;padding:11px 12px;background:var(--card)}
.cell .n{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.cell .l{font-size:11.5px;color:var(--ink3);margin-top:3px}
.bars{margin-bottom:18px}
.row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.row .name{flex:0 0 42%;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .track{flex:1;height:6px;background:#efece6;border-radius:3px;overflow:hidden}
.row .fillbar{height:100%;background:var(--accent)}
.row .pct{flex:0 0 44px;text-align:right;color:var(--ink3);font-variant-numeric:tabular-nums}

.note{background:var(--card);border:1px solid var(--rule);border-radius:3px;margin-bottom:10px;overflow:hidden}
.note>summary{padding:12px 15px;cursor:pointer;font-size:14.5px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.note>summary::-webkit-details-marker{display:none}
.note>summary::after{content:"＋";color:var(--ink3);font-weight:400}
.note[open]>summary::after{content:"－"}
.note>summary:hover{background:#fdfcfb}
.note .body{padding:0 15px 14px;border-top:1px solid var(--rule)}
.note .body p{margin:11px 0 0;font-size:13.5px;line-height:1.78;color:var(--ink2);text-wrap:pretty}
mark{background:#fff2c4;color:inherit;padding:0 1px}

.empty{color:var(--ink3);font-size:14px;padding:32px 0;text-align:center;line-height:1.9}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:13px;padding:9px 16px;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:99}
.toast.show{opacity:.94}
.spin{color:var(--ink3);font-size:13px;padding:26px 0;text-align:center}

@media(max-width:520px){
  .wrap{padding:0 13px 84px}
  h1{font-size:16.5px}
  .card{padding:15px 14px 13px}
  .stem{font-size:15.5px}
  .opt{font-size:14.5px;padding:10px 11px}
  nav{margin:12px -13px 17px;padding:0 13px}
  .row .name{flex-basis:38%}
}