/* ==========================================================================
   考试通用练习系统 · 浅色主题（浅背景 + 深文字）
   ========================================================================== */
:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --line:#e5e7eb;
  --line-strong:#d1d5db;
  --text:#1f2328;
  --text-2:#57606a;
  --text-3:#8b949e;
  --accent:#2f6feb;
  --accent-soft:#eaf1fe;
  --ok:#1a7f37;
  --ok-soft:#e8f5ec;
  --bad:#cf222e;
  --bad-soft:#fdecee;
  --warn:#9a6700;
  --warn-soft:#fff8e5;
  --radius:10px;
  --radius-sm:7px;
  --shadow:0 1px 2px rgba(31,35,40,.06), 0 4px 12px rgba(31,35,40,.05);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.strong{font-weight:600}
.hint{color:var(--text-3);font-weight:400;font-style:normal;font-size:12.5px}
.sep{color:var(--text-3);margin:0 6px}
em{font-style:normal}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:11px 22px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px}
.brand-mark{
  display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,#2f6feb,#5b8def);color:#fff;font-size:14px;font-weight:700;
}
.ver{font:11px/1 var(--mono);color:var(--text-3);padding:3px 6px;border:1px solid var(--line);border-radius:5px}
.topbar-right{display:flex;align-items:center;gap:12px}
.conn{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3)}
.conn i{width:7px;height:7px;border-radius:50%;background:var(--text-3);display:block}
.conn.on i{background:var(--ok)}
.conn.off i{background:var(--bad)}

/* ---------- 容器与面板 ---------- */
main{max-width:920px;margin:0 auto;padding:26px 22px 70px}
.panel{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.panel-head{margin-bottom:20px}
.panel-head h1{font-size:21px;margin:0 0 5px;font-weight:650}
.sub{margin:0;color:var(--text-2);font-size:13.5px}

/* ---------- 按钮 ---------- */
.btn{
  font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;
  border-radius:var(--radius-sm);padding:8px 15px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);transition:.15s;
}
.btn:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#2560d4;border-color:#2560d4}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:11px 26px;font-size:14.5px}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-close{border:0;background:none;font-size:24px;line-height:1;color:var(--text-3);cursor:pointer;padding:0 4px}

/* ---------- 模式选择 ---------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}
.mode{
  display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  padding:13px 15px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);font:inherit;color:var(--text);transition:.15s;
}
.mode b{font-size:14px;font-weight:600}
.mode em{font-size:12.5px;color:var(--text-3);line-height:1.45}
.mode:hover{border-color:var(--line-strong)}
.mode.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.mode.active em{color:var(--text-2)}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:13px;font-weight:550;color:var(--text-2)}
.field input[type=text],.field input[type=number],.field select{
  font:inherit;font-size:14px;padding:8px 11px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);width:100%;
}
.field input:focus,.field select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.checkline{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);margin:6px 0 14px;cursor:pointer}

/* ---------- 题型筛选 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  cursor:pointer;font-size:13px;padding:5px 13px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);transition:.15s;
}
.chip:hover{border-color:var(--text-3)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:550}
.chip .cnt{opacity:.65;font-size:11.5px;margin-left:4px}

/* ---------- 题库元信息 ---------- */
.bank-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--text-2);
  padding:11px 14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:18px;
}
.bank-meta b{font-weight:600;color:var(--text)}
.bank-meta .meta-warn{color:var(--warn)}
.bank-meta .meta-warn b{color:var(--warn)}
.setup-actions{display:flex;align-items:center;gap:14px}
.warn-text{font-size:13px;color:var(--bad)}

/* ---------- 答题 ---------- */
.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.quiz-head-mid{font-size:13.5px;color:var(--text-2);flex:1;text-align:center}
.timer{font:600 17px/1 var(--mono);color:var(--text);padding:6px 11px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);min-width:74px;text-align:center}
.timer.warning{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.progress{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:11px}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .25s}
.qnum-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.qnum{
  width:29px;height:29px;border-radius:7px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text-2);font:13px/1 var(--mono);
  display:grid;place-items:center;cursor:pointer;transition:.12s;
}
.qnum:hover{border-color:var(--accent)}
.qnum.current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.qnum.done-ok{background:var(--ok-soft);border-color:#a9d8b8;color:var(--ok)}
.qnum.done-bad{background:var(--bad-soft);border-color:#f0b6bb;color:var(--bad)}

.qbody{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow)}
.qmeta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.tag{font-size:12px;font-weight:550;padding:3px 9px;border-radius:5px;background:var(--accent-soft);color:var(--accent)}
.tag-ghost{background:var(--surface-2);color:var(--text-3);border:1px solid var(--line)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.qstem{font-size:16px;line-height:1.75;margin-bottom:18px;white-space:pre-wrap}
.qstem strong{font-weight:650;color:#0d1117}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface);transition:.13s;
}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt .letter{
  flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:600 12px/1 var(--mono);background:var(--surface-2);color:var(--text-2);
  border:1px solid var(--line-strong);margin-top:1px;
}
.opt .otext{flex:1;min-width:0;padding-top:1px}
.opt.selected{border-color:var(--accent);background:var(--accent-soft)}
.opt.selected .letter{background:var(--accent);color:#fff;border-color:var(--accent)}
.opt.correct{border-color:#7bc396;background:var(--ok-soft)}
.opt.correct .letter{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:#f0a3aa;background:var(--bad-soft)}
.opt.wrong .letter{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt.locked{cursor:default}
.opt.locked:hover{border-color:var(--line-strong);background:var(--surface)}
.opt.correct.locked:hover{border-color:#7bc396;background:var(--ok-soft)}
.opt.wrong.locked:hover{border-color:#f0a3aa;background:var(--bad-soft)}

.blanks{display:flex;flex-direction:column;gap:12px}
.blank-line{display:flex;align-items:center;gap:11px}
.blank-line .bno{flex:0 0 62px;font-size:12.5px;color:var(--text-3);font-family:var(--mono)}
.blank-line input{
  flex:1;font:inherit;font-size:15px;padding:9px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
}
.blank-line input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.blank-inline{
  display:inline-block;min-width:110px;font:inherit;font-size:15px;padding:2px 9px;
  border:0;border-bottom:2px solid var(--accent);background:var(--accent-soft);
  border-radius:4px 4px 0 0;color:var(--text);margin:0 4px;
}
.blank-inline:focus{outline:none;background:#dfe9fd}
.blank-inline.ok{border-bottom-color:var(--ok);background:var(--ok-soft)}
.blank-inline.bad{border-bottom-color:var(--bad);background:var(--bad-soft)}

.qactions{display:flex;gap:11px;margin-top:20px;align-items:center}
/* 「下一题」紧跟在「提交答案」右侧（比通用间距略大一点，便于区分"作答"与"翻页"两组动作） */
.qactions #btn-next{margin-left:7px}

.answer{margin-top:18px;padding:15px 17px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.answer .a-head{font-weight:600;margin-bottom:9px;display:flex;flex-wrap:wrap;gap:14px;font-size:14px}
.answer .a-head .ok{color:var(--ok)}
.answer .a-head .bad{color:var(--bad)}
.answer .a-body{color:var(--text-2);font-size:14px;line-height:1.75;white-space:pre-wrap}
.answer .a-point{
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-strong);
  font-size:13px;color:var(--text-3);
}
.answer .wrongbook-action{margin-top:12px}

/* ---------- 结果 ---------- */
.result-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.rcard .k{font-size:12.5px;color:var(--text-3);margin-bottom:5px}
.rcard .v{font:650 22px/1.2 var(--mono)}
.rcard .v.ok{color:var(--ok)}
.rcard .v.bad{color:var(--bad)}
.result-section{margin-bottom:24px}
.result-section h3{font-size:15px;margin:0 0 12px;font-weight:600}
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:140px 1fr 62px;gap:11px;align-items:center;font-size:13px}
.bar-track{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:99px}
.bar-fill.ok{background:var(--ok)}
.bar-fill.bad{background:var(--bad)}
.bar-val{text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.wrong-list{display:flex;flex-direction:column;gap:9px}
.wrong-item{
  padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface);
  border:1px solid var(--line);cursor:pointer;transition:.13s;
}
.wrong-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.wrong-item .wi-head{display:flex;gap:9px;align-items:center;margin-bottom:5px;font-size:12.5px;color:var(--text-3)}
.wrong-item .wi-stem{font-size:13.5px;line-height:1.6}
.empty{color:var(--text-3);font-size:13.5px;padding:14px 0}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(31,35,40,.42);
  display:grid;place-items:center;padding:22px}
.modal-card{background:var(--surface);border-radius:13px;width:min(680px,100%);
  max-height:88vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(31,35,40,.2)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:16px;margin:0;font-weight:620}
.modal-body{padding:18px 20px;overflow:auto;flex:1}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
.modal-step p.hint{margin:0 0 12px}

.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--surface-2);padding:30px;text-align:center;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dz-icon{font-size:26px;color:var(--accent);margin-bottom:6px}
.dz-text{font-size:13.5px;color:var(--text-2);line-height:1.7}
.file-chosen{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.file-name{font-weight:550;font-size:13.5px;word-break:break-all;flex:1}
.parse-summary{margin-bottom:16px}
.sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px}
.sum-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.sum-card .k{font-size:11.5px;color:var(--text-3);margin-bottom:3px}
.sum-card .v{font:600 17px/1.2 var(--mono)}
.issue-box{margin:14px 0;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden}
.issue-error{background:var(--bad-soft);border-color:#f0a3aa}
.issue-warn{background:var(--warn-soft);border-color:#e8d08a}
.issue-new{background:var(--ok-soft);border-color:#a9d8b8}
.issue-update{background:var(--accent-soft);border-color:#bcd3fb}
.issue-box .ib-head{padding:9px 13px;font-weight:600;font-size:13px}
.issue-box .ib-list{padding:0 13px 11px;font-size:12.5px;line-height:1.7;color:var(--text-2)}
.issue-box .ib-list div{font-family:var(--mono);font-size:12px;padding:2px 0}
.preview-box{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.preview-box summary{padding:10px 13px;cursor:pointer;font-size:13px;font-weight:550;background:var(--surface-2)}
.preview-box #preview-list{padding:12px 14px}
.pv-item{padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.pv-item:last-child{border-bottom:0}
.pv-item .pv-q{line-height:1.6;margin-bottom:4px}
.pv-item .pv-a{font-family:var(--mono);font-size:12px;color:var(--text-3)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:80;
  background:#1f2328;color:#fff;font-size:13.5px;padding:11px 20px;border-radius:9px;
  box-shadow:0 8px 26px rgba(31,35,40,.28);max-width:80vw}
.toast.ok{background:#1a7f37}
.toast.bad{background:#cf222e}

.loading{text-align:center;color:var(--text-3);padding:40px 0;font-size:13.5px}

/* ---------- 续答提示条 ---------- */
.resume-box{
  border:1px solid #bcd3fb;background:var(--accent-soft);border-radius:var(--radius);
  padding:13px 16px;margin-bottom:18px;
}
.resume-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.resume-icon{font-size:19px;color:var(--accent);line-height:1}
.resume-text{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.resume-text b{font-size:14px;font-weight:620}
.resume-text span{font-size:12.5px;color:var(--text-2);font-family:var(--mono)}

/* ---------- 缩减卷说明 ---------- */
.reduced-note{
  display:flex;gap:9px;align-items:flex-start;
  border:1px solid #e8d08a;background:var(--warn-soft);border-radius:var(--radius-sm);
  padding:10px 13px;margin-bottom:16px;font-size:12.5px;line-height:1.65;color:var(--text-2);
}
.reduced-note b{color:var(--warn)}
.reduced-note .rn-icon{flex:0 0 auto;font-size:14px;color:var(--warn);line-height:1.5}

/* ---------- 题库管理 ---------- */
.modal-card.modal-wide{width:min(860px,100%)}
.badge{
  display:inline-block;min-width:18px;padding:1px 6px;border-radius:99px;
  background:var(--line);color:var(--text-2);font:600 11.5px/1.6 var(--mono);text-align:center;
}
.admin-list{display:flex;flex-direction:column;gap:11px}
.bank-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:13px 15px;transition:.15s;
}
.bank-card.disabled{background:var(--surface-2);border-style:dashed}
.bank-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.bank-card-name{font-size:14.5px;font-weight:620;flex:1;min-width:140px}
.bank-card-id{font:12px/1 var(--mono);color:var(--text-3)}
.bank-card-meta{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:9px}
.bank-card-meta b{font-weight:600;color:var(--text)}
.bank-actions{display:flex;gap:8px;flex-wrap:wrap}
.bank-edit{
  margin-top:11px;padding:12px 13px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.bank-edit .form-grid{margin-bottom:6px}
.bank-edit-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:8px}
.danger-box{
  margin-top:11px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--bad-soft);border:1px solid #f0a3aa;font-size:12.5px;line-height:1.7;color:var(--text-2);
}
.danger-box b{color:var(--bad)}
.danger-box ul{margin:6px 0 10px;padding-left:19px}
.danger-box .danger-actions{display:flex;gap:9px;justify-content:flex-end}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-danger:hover{background:#b31d29;border-color:#b31d29}
.admin-trash{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.admin-trash>summary{padding:11px 14px;cursor:pointer;font-size:13.5px;font-weight:560;background:var(--surface-2);
  display:flex;align-items:center;gap:8px}
.admin-trash>p.hint{margin:0;padding:11px 14px 0}
#admin-trash{padding:11px 14px}
.trash-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-2);
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px dashed var(--line);
}
.trash-head b{font-weight:600;color:var(--text)}
.trash-head .trash-warn{color:var(--warn);font-weight:550}
.trash-head button{margin-left:auto}
.trash-item{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);
  border:1px solid var(--line);margin-bottom:8px;
}
.trash-item:last-child{margin-bottom:0}
.trash-item.pending{background:var(--surface);border-color:#f0a3aa}
.trash-item .ti-name{flex:1;min-width:160px;font-size:13.5px}
.trash-item .ti-meta{font-size:12px;color:var(--text-3);font-family:var(--mono)}
.trash-item .ti-actions{display:flex;gap:8px;align-items:center}
.trash-item .danger-box{flex:1 0 100%;margin-top:10px}

@media (max-width:720px){
  .modes{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .result-cards{grid-template-columns:repeat(2,1fr)}
  .sum-grid{grid-template-columns:repeat(2,1fr)}
  .bar-row{grid-template-columns:96px 1fr 56px}
  main{padding:18px 14px 60px}
  .topbar-right{flex-wrap:wrap;gap:8px}
}

/* ---------- 不可用的模式卡片（按能力声明收敛） ---------- */
.mode:disabled,.mode.off{
  cursor:not-allowed;opacity:.55;background:var(--surface-2);
}
.mode:disabled:hover,.mode.off:hover{border-color:var(--line)}
.mode.off.active{background:var(--surface-2);box-shadow:none;border-color:var(--line)}

/* ---------- 访问码输入框（等宽 + 字距，便于核对） ---------- */
#access-input{
  font-family:var(--mono);font-size:17px;letter-spacing:2px;text-align:center;
}
#access-error:empty{min-height:0}