/* 冀学通 · 河北初中智能题库 —— 样式表
   设计目标：中文优先、手机端友好、打印试卷时干净利落 */

:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#e8f0ff;
  --accent:#f59e0b;
  --ok:#16a34a;
  --ok-soft:#e7f8ec;
  --bad:#dc2626;
  --bad-soft:#fdeaea;
  --bg:#f4f6fb;
  --card:#ffffff;
  --line:#e4e8f0;
  --text:#1c2434;
  --muted:#6b7686;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,30,60,.06), 0 6px 20px rgba(20,30,60,.06);
  --font:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.7; -webkit-text-size-adjust:100%;
}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.35}
h1{font-size:1.5rem}
h2{font-size:1.2rem}
h3{font-size:1.05rem}
p{margin:.4em 0}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
/* hidden 属性必须无条件生效。
   否则任何带 display 的规则都会把它顶掉——.modal-root{display:flex} 就是这样：
   那个半透明遮罩会永远铺满整屏，表现为"页面能看，但点不动、也打不了字"。
   回归测试：tests/_probe-inject.js（真实命中测试）。 */
[hidden]{display:none !important}
/* 第二道保险：没有任何内容的遮罩层/提示层永远不参与布局。
   就算以后 [hidden] 规则被误删，'没弹窗却被挡住整页'这种事也不会再发生。 */
.modal-root:empty,.toast-root:empty{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 8px rgba(20,30,60,.04);flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.logo{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;font-weight:700;font-size:19px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.05rem;letter-spacing:.5px}
.brand-text em{font-style:normal;font-size:.72rem;color:var(--muted);letter-spacing:.3px}
.quick-search{display:flex;gap:8px;flex:1 1 320px;max-width:560px}
.quick-search input{
  flex:1;min-width:0;padding:13px 18px;border:1.5px solid #cfd8e6;border-radius:12px;
  font-family:inherit;font-size:1.05rem;background:#fff;color:#000;font-weight:500;
}
.quick-search input::placeholder{color:#8b95a6;font-weight:400}
.quick-search input:focus{outline:3px solid var(--primary-soft);border-color:var(--primary);background:#fff;color:#000}
.quick-search .btn{padding:13px 24px;font-size:1rem}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.role-select{
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;
  font-family:inherit;font-size:.85rem;color:var(--text);
}

/* ---------- 导航 ---------- */
.tabs{
  display:flex;gap:4px;padding:8px 18px 0;background:#fff;border-bottom:1px solid var(--line);
  overflow-x:auto;position:sticky;top:57px;z-index:29;
}
.tabs a{
  padding:9px 15px;border-radius:10px 10px 0 0;color:var(--muted);font-size:.92rem;
  white-space:nowrap;border:1px solid transparent;border-bottom:none;
}
.tabs a:hover{color:var(--primary);background:#f8fafc}
.tabs a.active{color:var(--primary);font-weight:600;background:var(--primary-soft);border-color:#dbe6ff}

/* ---------- 布局 ---------- */
.view{padding:20px 18px 40px;max-width:1180px;margin:0 auto}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.spacer{flex:1}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
}
.card.tight{padding:12px}
.card h2,.card h3{display:flex;align-items:center;gap:8px}
.section-title{
  display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:1.1rem;font-weight:700;
}
.section-title::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--primary)}
.section-title:first-child{margin-top:4px}

/* ---------- 按钮与表单 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);
  font-family:inherit;font-size:.92rem;cursor:pointer;transition:.15s;line-height:1.3;
}
.btn:hover{border-color:#c9d4e8;background:#f8fafc}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.bad{background:#fff;border-color:#f3c9c9;color:var(--bad)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:#eef2f8;color:var(--text)}
.btn.sm{padding:6px 11px;font-size:.84rem;border-radius:9px}
.btn.lg{padding:12px 26px;font-size:1rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.block{width:100%}

label.field{display:block;margin-bottom:10px}
label.field > span.lab{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
input[type=text],input[type=search],input[type=number],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-family:inherit;font-size:.92rem;color:var(--text);
}
textarea{min-height:90px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}
.checkline{display:inline-flex;align-items:center;gap:6px;margin:0 12px 8px 0;font-size:.9rem;cursor:pointer}
.checkline input{width:auto}

/* 搜索框：加大尺寸，文字统一用黑色，输入更醒目 */
#homeSearchInput,#searchInput,#paper-pool-q{
  padding:16px 20px;font-size:1.1rem;color:#000;font-weight:500;
  border:1.5px solid #cfd8e6;border-radius:12px;background:#fff;
}
#homeSearchInput::placeholder,#searchInput::placeholder,#paper-pool-q::placeholder{color:#8b95a6;font-weight:400}
#homeSearchInput:focus,#searchInput:focus{outline:3px solid var(--primary-soft);color:#000}
#homeSearch .btn{padding:16px 26px;font-size:1.05rem}
#searchForm .btn.primary{padding:14px 26px;font-size:1.02rem}

/* 选项块 */
.opt-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.opt{
  display:flex;gap:10px;align-items:flex-start;padding:10px 13px;border:1px solid var(--line);
  border-radius:11px;background:#fff;cursor:pointer;transition:.15s;
}
.opt:hover{border-color:#c9d4e8;background:#fbfcff}
.opt input{margin-top:5px;flex:none}
.opt .tag-key{
  flex:none;width:24px;height:24px;border-radius:8px;background:#eef2f8;color:var(--muted);
  display:grid;place-items:center;font-weight:700;font-size:.82rem;
}
.opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.opt.sel .tag-key{background:var(--primary);color:#fff}
.opt.correct{border-color:#a9e0bd;background:var(--ok-soft)}
.opt.correct .tag-key{background:var(--ok);color:#fff}
.opt.wrong{border-color:#f0bcbc;background:var(--bad-soft)}
.opt.wrong .tag-key{background:var(--bad);color:#fff}
.opt-body{flex:1;min-width:0}

/* ---------- 题目标签 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  background:#eef2f8;color:#48546a;font-size:.76rem;line-height:1.6;white-space:nowrap;
}
.chip.k{background:#eef4ff;color:#2b4fbb}
.chip.s{background:#fff3e0;color:#9a5b00}
.chip.t{background:#f0ecff;color:#5b3ec0}
.chip.ok{background:var(--ok-soft);color:#12703f}
.chip.bad{background:var(--bad-soft);color:#a51d1d}
.chip.line{border:1px solid var(--line);background:#fff;color:var(--muted)}
.chip.d1{background:#e7f8ec;color:#12703f}
.chip.d2{background:#eef4ff;color:#2b4fbb}
.chip.d3{background:#fff3e0;color:#9a5b00}
.chip.d4{background:#fdeaea;color:#a51d1d}

/* ---------- 题目卡片 ---------- */
.qcard{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px;box-shadow:var(--shadow)}
.qhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.qno{font-weight:700;color:var(--primary);font-size:.95rem}
.stem{font-size:1rem;line-height:1.85;overflow-wrap:anywhere}
.stem .blank{display:inline-block;min-width:70px;border-bottom:1.5px solid #9aa7bd;margin:0 4px}
.ansbox{
  margin-top:12px;padding:12px 14px;border-radius:11px;background:#f8fafc;border:1px dashed #d6dfec;
}
.ansbox.ok{background:var(--ok-soft);border-color:#b6e3c6}
.ansbox.bad{background:var(--bad-soft);border-color:#f2c4c4}
.ansbox h4{margin:0 0 6px;font-size:.92rem;display:flex;gap:8px;align-items:center}
.explain{font-size:.93rem;line-height:1.8;overflow-wrap:anywhere}
.kp-note{
  margin-top:10px;padding:11px 13px;border-radius:11px;background:#fffaf0;border:1px solid #f6e3bd;
}
.kp-note h4{margin:0 0 4px;font-size:.9rem;color:#8a5a00}
.kw-hl{background:#fff2b8;border-radius:4px;padding:0 2px;box-shadow:inset 0 -2px 0 #ffd54d}

/* ---------- 表格 ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
table.tbl th{background:#f4f7fc;font-weight:600;color:#3c4a60}
table.tbl tr:nth-child(even) td{background:#fafbfe}

/* ---------- 统计条 ---------- */
.bar{height:8px;border-radius:6px;background:#eaeff7;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--primary)}
.bar > i.ok{background:var(--ok)}
.bar > i.warn{background:var(--accent)}
.bar > i.bad{background:var(--bad)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-size:1.6rem;line-height:1.15;font-weight:700}
.kpi{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.kpi b{font-size:1.5rem}

/* ---------- 数学公式渲染 ---------- */
.m{font-family:"Cambria Math",Cambria,"Times New Roman",Georgia,serif;font-size:1.03em}
.frac{display:inline-flex;flex-direction:column;vertical-align:-0.55em;text-align:center;margin:0 .15em;line-height:1.15}
.frac > .num{border-bottom:1.4px solid currentColor;padding:0 .22em}
.frac > .den{padding:0 .22em}
.sqrt{display:inline-flex;align-items:stretch}
.sqrt > .rad{white-space:nowrap}
.sqrt > .rad-ov{border-top:1.4px solid currentColor;padding:0 .18em 0 .1em;margin-top:.12em}
.xarrow{display:inline-flex;flex-direction:column;align-items:center;vertical-align:-0.5em;margin:0 .2em;line-height:1}
.xarrow > .lab{font-size:.7em}
.xarrow > .sym{font-size:1.15em;margin-top:-.15em}
.sub,.sup{font-size:.72em}
.msup{display:inline-block;transform:translateY(-.35em)}
.text-in{font-family:var(--font);font-size:.94em}

/* ---------- 弹窗 ---------- */
.modal-root{position:fixed;inset:0;background:rgba(18,26,45,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal{background:#fff;border-radius:16px;max-width:720px;width:100%;max-height:86vh;overflow:auto;padding:20px;box-shadow:0 18px 60px rgba(10,20,50,.3)}
.modal h3{margin-top:0}
.toast-root{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:#1c2434;color:#fff;padding:9px 16px;border-radius:999px;font-size:.88rem;
  box-shadow:0 8px 24px rgba(0,0,0,.2);animation:tin .2s ease-out;
}
.toast.ok{background:#12703f}
.toast.bad{background:#a51d1d}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 进度 ---------- */
.progress{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.progress .bar{flex:1}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pager button{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:.85rem;cursor:pointer;color:var(--text);
}
.pager button.cur{border-color:var(--primary);background:var(--primary);color:#fff}
.pager button.done{border-color:#b6e3c6;background:var(--ok-soft);color:#12703f}
.pager button.err{border-color:#f2c4c4;background:var(--bad-soft);color:#a51d1d}

/* ---------- 答案输入区 ---------- */
.answer-area{margin-top:12px}
.blank-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.blank-row .no{flex:none;font-size:.85rem;color:var(--muted);width:44px}
.blank-row input{flex:1}
.hint{font-size:.83rem;color:var(--muted);margin-top:6px}
.kbd{
  display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;background:#f8fafc;font-size:.78rem;font-family:ui-monospace,Consolas,monospace;
}

/* ---------- 试卷 ---------- */
.paper-page{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 30px;box-shadow:var(--shadow)}
.paper-title{text-align:center;font-size:1.35rem;font-weight:700;margin-bottom:4px}
.paper-sub{text-align:center;color:var(--muted);font-size:.88rem;margin-bottom:14px}
.paper-meta{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 2px;font-size:.88rem;margin-bottom:16px}
.paper-sec{margin:18px 0 8px;font-weight:700}
.paper-q{margin-bottom:14px;font-size:.95rem;line-height:1.85}
.paper-q .stem{display:inline}
.paper-opts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 0 0}
.paper-opts span{white-space:nowrap}
.paper-ans-line{height:0}
.answer-key h3{margin-top:18px}

/* ---------- 提示条 ---------- */
.banner{padding:11px 14px;border-radius:11px;background:var(--primary-soft);border:1px solid #d3e0ff;font-size:.88rem;color:#27437f}
.banner.warn{background:#fff8e8;border-color:#f3e0b5;color:#7a5100}
.banner.tip{background:#f1f7ff;border-color:#d6e4f7;color:#2c4a73}

/* ---------- 底部 ---------- */
.footer{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 22px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);background:#fff;
}

/* ---------- 打印 ---------- */
.print-root{display:none}
@media print{
  body{background:#fff;font-size:12pt}
  .no-print,.topbar,.tabs,.footer,.toast-root,.modal-root{display:none !important}
  .view{display:none !important}
  .print-root{display:block !important}
  .paper-page{border:none;box-shadow:none;padding:0;border-radius:0}
  .paper-q{page-break-inside:avoid}
  @page{size:A4;margin:16mm 14mm}
}

/* ---------- 手机端 ---------- */
@media (max-width:720px){
  .view{padding:14px 12px 34px}
  .tabs{top:auto;position:static;padding:6px 10px}
  .tabs a{padding:8px 12px;font-size:.88rem}
  .brand-text em{display:none}
  .topbar{padding:8px 12px;gap:8px}
  .quick-search{order:3;flex-basis:100%}
  h1{font-size:1.25rem}
  .paper-page{padding:16px}
  .modal{padding:16px}
}