/* ============================================================
   AS 经济选择题题库 — 清爽蓝色主题
   重写说明：原 navy(#1d3a5f) 深重配色改为明亮 royal-blue 体系，
   白色卡片 + 柔和阴影 + 更大留白；保留全部类名，app.js 逻辑不受影响。
   ============================================================ */
:root{
  --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-300:#93c5fd;
  --blue-100:#dbeafe; --blue-50:#eff6ff;
  --ink:#1f2937; --ink-2:#374151; --muted:#6b7280;
  --line:#e6eaf1; --bg:#f4f7fb; --card:#ffffff;
  --green:#16a34a; --red:#dc2626; --amber:#d97706;
  --shadow-sm:0 1px 2px rgba(30,64,120,.06);
  --shadow:0 1px 3px rgba(30,64,120,.06), 0 8px 22px rgba(30,64,120,.08);
  --radius:12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.5;
}
a { color: var(--blue-600); }
button { cursor: pointer; font-family: inherit; }
.muted { color: var(--muted); font-weight: 400; }

.mini {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font-size: 12px; color: var(--ink-2); transition: .15s;
}
.mini:hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-700); }

.primary {
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: #fff; border: none; border-radius: 9px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,99,235,.28); transition: .15s;
}
.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary.ghost { background: #fff; color: var(--blue-700); border: 1px solid var(--blue-600); box-shadow: none; }
.primary.ghost:hover { background: var(--blue-50); transform: none; }

/* ===== 布局 ===== */
#app { display: flex; min-height: 100vh; }
#sidebar {
  width: 290px; flex: 0 0 290px;
  background: linear-gradient(180deg, var(--blue-700), #1540a8);
  color: #eaf1ff; padding: 20px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.brand h1 { font-size: 20px; margin: 0 0 2px; letter-spacing: .5px; }
.brand p { margin: 0 0 16px; color: #bcd0ff; font-size: 12px; }
.filter-tools { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-tools .mini { background: rgba(255,255,255,.12); color: #eaf1ff; border-color: rgba(255,255,255,.25); }
.filter-tools .mini:hover { background: rgba(255,255,255,.22); border-color: #fff; color: #fff; }
.filter-tools .hk-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #ffe1a8; font-weight: 600; margin-left: 2px; cursor: pointer; white-space: nowrap; }
.filter-tools .hk-toggle input { accent-color: #f0a92e; }

/* 话题树 */
.unit-block { margin-bottom: 14px; }
.unit-title {
  font-weight: 700; font-size: 13px; margin: 0 0 6px; color: #dce8ff;
  display: flex; justify-content: space-between; align-items: center;
}
.unit-title small { color: #a9c2ff; font-weight: 400; }
.topic-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px;
  background: rgba(255,255,255,.06); margin-bottom: 4px;
}
.topic-row:hover { background: rgba(255,255,255,.16); }
.topic-row input { accent-color: #7dd3fc; }
.chapter-select {
  width: 100%;
  margin: 6px 0 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.chapter-select option { color: #1e293b; background: #fff; }
.topic-row .cnt { margin-left: auto; color: #bcd0ff; font-size: 11px; }
.sidebar-foot { margin-top: 18px; font-size: 11.5px; color: #bcd0ff; }
.legend { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dot.fig { background: #7dd3fc; }
.dot.flag { background: #fbbf24; }
.dot.star { background: #f0a92e; }
.hk-toggle {
  display: flex; align-items: center; gap: 8px; margin: 12px 2px 4px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #b45309, #f0a92e);
  box-shadow: 0 2px 8px rgba(245,160,40,.4);
  user-select: none;
}
.hk-toggle input { accent-color: #fff; width: 17px; height: 17px; margin: 0; }
/* 侧栏「真题卷」筛选下拉 */
.hk-toggle.paper-filter { background: linear-gradient(135deg, #1e3a8a, #2563eb); box-shadow: 0 2px 8px rgba(37,99,235,.35); flex-wrap: wrap; }
.hk-toggle.paper-filter select {
  flex: 1; min-width: 0; margin: 0; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35);
  background: #fff; color: #1e3a8a; font-size: 12px; font-weight: 600; cursor: pointer;
}
.hk-toggle.paper-filter span { white-space: nowrap; }

/* 工具栏 */
#toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; box-shadow: var(--shadow-sm);
}
.tb-left { font-size: 14px; }
.tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rand { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #445; }
.rand input { width: 52px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }

/* 题目列表 */
#list { padding: 18px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-content: start; }
.qcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px;
  display: flex; gap: 10px; box-shadow: var(--shadow-sm); transition: .15s;
}
.qcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.qcard.sel { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.qcard input[type=checkbox] { accent-color: var(--blue-600); width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; }
.qbody { flex: 1; min-width: 0; }
.qmeta { font-size: 11px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tag { background: var(--blue-50); color: var(--blue-700); border-radius: 5px; padding: 1px 7px; font-size: 10.5px; }
.tag.fig { background: #e0f2fe; color: #0369a1; }
.tag.flag { background: #fef3c7; color: #b45309; }
.tag.star { background: #fff3d6; color: #b9700a; border: 1px solid #f0c46a; font-weight: 700; box-shadow: 0 0 0 1px rgba(245,180,60,.25); }
.stem { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; margin-bottom: 8px; }
.opts { list-style: none; margin: 0; padding: 0; }
.opts li { font-size: 13px; padding: 3px 0; color: #2a2a2a; }
.opts li b { display: inline-block; width: 18px; color: var(--blue-700); font-weight: 700; }
.qfig { max-width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; margin-top: 4px; }
.qtable-wrap { max-width: 100%; margin: 6px 0 8px; }
.qtable { border-collapse: collapse; margin: 0; font-size: 12px; background: #fff; width: 100%; max-width: 100%; table-layout: auto; }
.qtable th, .qtable td { border: 1px solid #cfd8e3; padding: 3px 7px; text-align: left; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.qtable th { background: var(--blue-50); font-weight: 600; color: var(--blue-700); }
.qtable td { text-align: center; font-variant-numeric: tabular-nums; }
.qnote { font-size: 11px; color: #b45309; background: #fef6e7; border-radius: 5px; padding: 5px 8px; margin-top: 6px; }

/* ===== 试卷排版（仿 CIE 真题，黑白不变） ===== */
#paperRoot { display: none; }
body.preview #app { display: none; }
body.preview #paperRoot { display: block; padding: 20px 0 80px; background: var(--bg); }
.preview-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--blue-700), #1540a8); padding: 11px 18px; box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.preview-bar .mini { background: rgba(255,255,255,.14); color: #eaf1ff; border-color: rgba(255,255,255,.28); }
.preview-bar .mini:hover { background: rgba(255,255,255,.24); }
.preview-bar .pv-hint { color: #cfe0ff; font-size: 12px; }
.preview-bar .primary { text-decoration: none; display: inline-block; }
.pdf-frame { display: block; width: 100%; height: calc(100vh - 60px); border: 0; background: #525659; }
.paper-page {
  background: #fff; color: #000; width: 210mm; min-height: 297mm; margin: 0 auto;
  padding: 18mm 16mm; box-sizing: border-box; font-family: "Times New Roman", Georgia, serif;
  font-size: 11pt; line-height: 1.35; position: relative;
}
.paper-head { display: table; width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.paper-head .cell { display: table-cell; vertical-align: top; padding: 4px 8px; border: 1px solid #000; }
.paper-head .l { width: 52%; font-size: 10pt; }
.paper-head .r { width: 48%; text-align: right; }
.paper-head .r .code { font-weight: 700; font-size: 12pt; }
.paper-docline { font-size: 9pt; color: #333; margin: 4px 0 14px; }
.paper-instr { border: 1px solid #000; padding: 8px 10px; font-size: 9.5pt; margin-bottom: 12px; }
.paper-instr h4 { margin: 0 0 4px; text-transform: uppercase; font-size: 10pt; letter-spacing: .5px; }
.paper-instr p { margin: 2px 0; }
.paper-mid { display: flex; align-items: stretch; gap: 14px; margin-bottom: 12px; }
.paper-mid .paper-instr { flex: 1 1 auto; margin-bottom: 0; }
.examiner-box {
  flex: 0 0 190px; align-self: flex-start; border: 1px solid #000; font-size: 8pt;
  padding: 3px 4px; background: #fff;
}
.examiner-box .et { font-weight: 700; text-align: center; margin-bottom: 4px; letter-spacing: .3px; }
.examiner-box .egrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px 4px; }
.examiner-box .ec { white-space: nowrap; display: flex; align-items: center; gap: 2px; }
.examiner-box .ec .tick { width: 9px; height: 9px; border: 1px solid #000; display: inline-block; }
.paper-qlist { column-count: 2; column-gap: 16px; }
.pq { break-inside: avoid; margin-bottom: 12px; padding-bottom: 6px; }
.pq .qno { font-weight: 700; }
.pq .qstem { white-space: pre-wrap; margin: 2px 0 3px; }
.pq .qfig { max-width: 88mm; max-height: 80mm; display: block; margin: 4px 0; }
/* 试卷里的表格：宽度与题目栏对齐、字号缩小、允许换行，保证双栏排版放得下 */
.pq .qtable-wrap { margin: 3px 0 4px; }
.pq .qtable { font-size: 8pt; width: 100%; }
.pq .qtable th, .pq .qtable td { padding: 1px 3px; }
.pq .qtable th { font-size: 8pt; }
.pq .popts { margin: 2px 0 0; padding: 0; list-style: none; }
.pq .popts li { padding: 1px 0; }
.pq .popts li b { display: inline-block; width: 16px; }
.key-page { font-family: "Times New Roman", serif; }
.key-page h3 { text-align: center; }
.keytable { width: 100%; border-collapse: collapse; }
.keytable th, .keytable td { border: 1px solid #000; padding: 3px 6px; font-size: 10pt; }
.keytable .ans { font-weight: 700; text-align: center; }

/* ===== 打印 ===== */
@media print {
  body { background: #fff; }
  #app { display: none !important; }
  #paperRoot { display: block !important; }
  .preview-bar { display: none !important; }
  body.preview #paperRoot { padding: 0; }
  .paper-page { width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none; }
  .qtable-wrap { overflow: visible !important; }
  .qtable { width: 100% !important; }
  .qtable th, .qtable td { white-space: normal !important; }
}

/* ===== 顶部导航 ===== */
#topnav {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: #fff; padding: 0 18px; height: 54px;
  position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 10px rgba(30,64,120,.25);
}
#topnav .nav-brand { font-weight: 700; font-size: 16px; letter-spacing: .5px; white-space: nowrap; }
#topnav .nav-ver {
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px; opacity: .72;
  background: rgba(255,255,255,.16); border-radius: 5px; padding: 2px 6px;
  vertical-align: middle; margin-left: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#topnav .nav-tabs { display: flex; gap: 6px; }
#topnav .nav-tab {
  background: rgba(255,255,255,.12); border: 1px solid transparent; color: #eaf1ff;
  padding: 7px 15px; border-radius: 8px; font-size: 13.5px; font-weight: 600; transition: .15s;
}
#topnav .nav-tab:hover { background: rgba(255,255,255,.24); color: #fff; }
#topnav .nav-tab.active { background: #fff; color: var(--blue-700); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
#topnav .nav-right { margin-left: auto; font-size: 12.5px; color: #dbe7ff; white-space: nowrap; }
#topnav .nav-right b { color: #fff; }

/* 视图切换 */
.view-panel { display: none; }
body.mode-practice #app,
body.mode-wrong #app,
body.mode-stats #app,
body.mode-search #app { display: none; }
body.mode-practice #view-practice,
body.mode-wrong #view-wrong,
body.mode-stats #view-stats,
body.mode-search #view-search { display: block; }
body.preview #topnav { display: none; }

/* ===== 通用面板 ===== */
.view-panel { padding: 22px 26px 48px; max-width: 1180px; margin: 0 auto; }
.subhead { margin-bottom: 18px; }
.subhead h2 { margin: 0 0 5px; font-size: 20px; color: var(--blue-700); }
.subhead p { margin: 0; font-size: 13px; line-height: 1.6; }

/* ===== 在线刷题 ===== */
.practice-layout { display: flex; gap: 22px; align-items: flex-start; }
.practice-side {
  flex: 0 0 270px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; position: sticky; top: 70px; box-shadow: var(--shadow);
}
.practice-side .field { margin-bottom: 15px; }
.practice-side label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.practice-side .field.check label { font-weight: 400; display: flex; align-items: center; gap: 6px; }
.practice-side input[type=text], .practice-side input[type=number], .practice-side select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
  font-family: inherit; background: #fff; transition: .15s;
}
.practice-side input[type=text]:focus, .practice-side input[type=number]:focus, .practice-side select:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.practice-side input[type=number] { width: 92px; }
.practice-side small { display: block; margin-top: 5px; font-size: 11px; }
.practice-side .primary { width: 100%; margin-top: 4px; }
/* 真题卷三联动下拉 */
#paperScope { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
#paperScope select { width: 100%; }
#paperScope small { margin-top: 0; color: var(--ink-3, #889); }
.server-note { margin-top: 12px; font-size: 11.5px; padding: 8px 10px; border-radius: 8px; display: none; }
.server-note.on { display: block; background: #e7f6ec; color: #15803d; }
.server-note.off { display: block; background: #f3f5f8; color: #667; }

.practice-main { flex: 1; min-width: 0; }
.quiz-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  margin-bottom: 14px; box-shadow: var(--shadow-sm); transition: .15s;
}
.quiz-card:hover { box-shadow: var(--shadow); }
.quiz-card .qmeta { font-size: 11px; color: var(--muted); margin-bottom: 7px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.quiz-card .qstem { font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 10px; }
.quiz-card .qfig { max-width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; margin-top: 4px; }
.quiz-opts { list-style: none; margin: 0; padding: 0; }
.quiz-opts li { margin: 0; }
.quiz-opts label.opt {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px solid #e3e9f0;
  border-radius: 9px; margin-bottom: 7px; cursor: pointer; font-size: 13.5px; transition: .12s; background: #fcfdff;
}
.quiz-opts label.opt:hover { background: var(--blue-50); border-color: var(--blue-300); }
.quiz-opts label.opt input { margin-top: 3px; accent-color: var(--blue-600); }
.quiz-opts label.opt b { display: inline-block; width: 18px; color: var(--blue-700); font-weight: 700; }
.quiz-card.submitted label.opt { cursor: default; }
.quiz-card .result-tag { font-size: 12px; font-weight: 700; margin-left: auto; }
.quiz-card.correct { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,.12); }
.quiz-card.correct .result-tag { color: var(--green); }
.quiz-card.wrong { border-color: var(--red); box-shadow: 0 0 0 2px rgba(220,38,38,.1); }
.quiz-card.wrong .result-tag { color: var(--red); }
.quiz-opts label.opt.reveal-correct { background: #e7f6ec; border-color: var(--green); }
.quiz-opts label.opt.reveal-wrong { background: #fdeaea; border-color: var(--red); }
/* 行式选项表（which-row 表格题）：与题干 [Table] 表头同款表格样式 */
.qtable td.optcell { width: 42px; text-align: center; font-weight: 700; color: var(--blue-700); }
.qtable td.optcell label { display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-weight: 700; color: var(--blue-700); }
.qtable td.optcell input { accent-color: var(--blue-600); margin: 0; }
.qtable tr.opt { cursor: pointer; }
.qtable tr.opt:hover td { background: var(--blue-50); }
.qtable tr.opt.reveal-correct td { background: #e7f6ec; }
.qtable tr.opt.reveal-wrong td { background: #fdeaea; }
.quiz-card.submitted .qtable tr.opt { cursor: default; }
.quiz-exp {
  margin-top: 12px; padding: 10px 13px; background: var(--blue-50); border-left: 3px solid var(--blue-600);
  border-radius: 6px; font-size: 12.5px; line-height: 1.65; color: #2c3e50;
}
.quiz-exp b { color: var(--blue-700); }
.quiz-summary {
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700)); color: #fff; border-radius: 14px;
  padding: 18px 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.quiz-summary .big { font-size: 32px; font-weight: 800; }
.quiz-summary .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.quiz-summary .cum { font-size: 12.5px; opacity: .92; margin-top: 6px; }
.quiz-summary .acts .mini { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.quiz-summary .acts .mini:hover { background: rgba(255,255,255,.28); }
.quiz-summary .acts .primary { background: #fff; color: var(--blue-700); }

/* ===== 错题本 ===== */
.wrong-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.wrong-toolbar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.wrong-toolbar .primary { margin-left: 0; }
.wrong-empty, .stats-empty { text-align: center; color: var(--muted); padding: 44px 0; font-size: 14px; }
.wrong-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.wrong-card .qmeta { font-size: 11px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.wrong-card .qstem { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; margin-bottom: 7px; }
.wrong-card .opts { list-style: none; margin: 0 0 8px; padding: 0; }
.wrong-card .opts li { font-size: 13px; padding: 1px 0; }
.wrong-card .opts li b { display: inline-block; width: 16px; color: var(--blue-700); }
.wrong-card .opts li.ans { color: var(--green); font-weight: 700; }
.wrong-card .wrong-acts { display: flex; gap: 8px; }
.quiz-card.wrong-redo { border-left: 4px solid var(--red); }
.quiz-card.wrong-redo .wrong-result { display: inline-flex; align-items: center; }
.result-inline { font-weight: 700; font-size: 12.5px; margin-left: 4px; }
.result-inline.ok { color: var(--green); }
.result-inline.no { color: var(--red); }

/* ===== 统计 ===== */
.stats-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.stats-tabs .stab { background: #fff; border: 1px solid var(--line); color: var(--ink-2); padding: 8px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; transition: .15s; }
.stats-tabs .stab:hover { border-color: var(--blue-300); }
.stats-tabs .stab.active { background: linear-gradient(180deg, var(--blue-600), var(--blue-700)); color: #fff; border-color: var(--blue-700); }
.stat-overview { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; min-width: 150px; flex: 1; box-shadow: var(--shadow-sm); }
.stat-card .label { font-size: 12px; color: var(--muted); }
.stat-card .value { font-size: 28px; font-weight: 800; color: var(--blue-700); }
.stat-card .value small { font-size: 13px; color: var(--muted); font-weight: 400; }
.stat-section-title { font-size: 15px; font-weight: 700; color: var(--blue-700); margin: 18px 0 12px; }
.stat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.stat-row .name { flex: 0 0 230px; color: #2a2a2a; }
.stat-bar { flex: 1; height: 18px; background: #eef2f8; border-radius: 6px; overflow: hidden; position: relative; }
.stat-bar .fill { height: 100%; background: linear-gradient(90deg,#22c55e,#4ade80); }
.stat-bar .fill.low { background: linear-gradient(90deg,#ef4444,#f87171); }
.stat-bar .fill.mid { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.stat-row .pct { flex: 0 0 64px; text-align: right; color: #445; font-variant-numeric: tabular-nums; }
.stat-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.stat-table th, .stat-table td { border-bottom: 1px solid #eef2f8; padding: 9px 11px; font-size: 12.5px; text-align: left; }
.stat-table th { background: var(--blue-50); color: var(--blue-700); font-weight: 700; }
.stat-table tr:last-child td { border-bottom: none; }
.stat-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-table tr.weak td { background: #fdf0f0; }

/* ============ 反馈功能 ============ */
.quiz-foot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.fb-btn { font-size: 12px; color: #b45309; background: #fff8e6; border: 1px solid #f0d98a; border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.fb-btn:hover { background: #ffefc2; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20,35,60,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { width: min(520px, 92vw); max-height: 88vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(20,40,70,.3); }
.modal-head { padding: 15px 18px; background: linear-gradient(180deg, var(--blue-600), var(--blue-700)); color: #fff; font-weight: 700; border-radius: 14px 14px 0 0; }
.modal-head .tag { background: rgba(255,255,255,.22); margin-left: 8px; }
.modal-body { padding: 16px 18px; }
.fb-qstem { background: var(--blue-50); border: 1px solid #e3e8ef; border-radius: 9px; padding: 11px 13px; margin-bottom: 14px; font-size: 13px; }
.fb-field { margin-bottom: 14px; }
.fb-label { font-weight: 700; color: var(--blue-700); margin-bottom: 6px; font-size: 13px; }
.fb-types { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; }
.fb-types label { cursor: pointer; }
#fbSuggest { padding: 7px 11px; border: 1px solid #cfd8e3; border-radius: 7px; font-size: 14px; }
#fbComment { width: 100%; box-sizing: border-box; border: 1px solid #cfd8e3; border-radius: 9px; padding: 9px 11px; font-size: 13px; resize: vertical; font-family: inherit; }
.modal-foot { padding: 13px 18px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #eef2f8; }

#toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px); background: var(--blue-700); color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 1100; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.fb-summary { font-size: 13.5px; color: #445; margin-bottom: 12px; }
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-row { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.fb-row.mismatch { border-color: #e7b3b0; background: #fdf4f3; }
.fb-row-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12px; color: #667; }
.fb-type { background: var(--blue-50); color: var(--blue-700); padding: 2px 9px; border-radius: 6px; font-weight: 700; }
.fb-row.mismatch .fb-type { background: #f6dedb; color: #b13a32; }
.fb-sid { font-weight: 700; color: var(--ink-2); }
.fb-time { margin-left: auto; color: #99a; }
.fb-q { font-size: 13px; color: #2a2a2a; margin-bottom: 6px; }
.fb-detail { font-size: 12.5px; color: #445; }
.fb-detail b { color: #b13a32; }
.fb-comment { margin-top: 6px; font-size: 13px; color: var(--blue-700); background: var(--blue-50); border-left: 3px solid var(--blue-600); padding: 7px 11px; border-radius: 5px; }

/* ===== 教师端视图 ===== */
body.mode-teacher #app { display: none; }
body.mode-teacher #view-teacher { display: block; }
.tea-table td:first-child { font-weight: 600; color: var(--blue-700); }
.code-gen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.code-gen input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.code-gen input[type=number] { width: 92px; }
.code-gen input[type=text] { width: 180px; text-transform: uppercase; letter-spacing: 1px; }
.code-val { font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1px; }

/* ===== 登录 / 注册 / 教师门禁 ===== */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(22, 45, 80, .55); backdrop-filter: blur(2px); padding: 16px;
}
.auth-card {
  width: 360px; max-width: 100%; background: #fff; border-radius: 16px; padding: 22px 24px 20px;
  box-shadow: 0 18px 50px rgba(20, 40, 80, .28); animation: authIn .2s ease;
}
@keyframes authIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.auth-brand { text-align: center; font-weight: 800; font-size: 19px; color: var(--blue-700); letter-spacing: .5px; margin-bottom: 14px; }
.auth-tabs { display: flex; gap: 4px; background: #f1f4f9; padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; border: none; background: transparent; padding: 8px 6px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #667; transition: .15s; font-family: inherit;
}
.auth-tab.active { background: #fff; color: var(--blue-700); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.auth-pane label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 10px 0 5px; }
.auth-pane input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: #fff; transition: .15s;
}
.auth-pane input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.auth-pane .primary { width: 100%; margin-top: 16px; }
.auth-msg { margin-top: 10px; font-size: 12.5px; min-height: 16px; text-align: center; }
.auth-msg.err { color: #c0392b; }
.auth-msg.ok { color: #15803d; }
.auth-foot { margin-top: 14px; font-size: 11.5px; color: #889; text-align: center; line-height: 1.5; }
.nav-user { color: #fff; font-weight: 700; }
.nav-btn {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); color: #fff; cursor: pointer;
  padding: 4px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; font-family: inherit; transition: .15s;
}
.nav-btn:hover { background: rgba(255,255,255,.32); }


/* —— 难度标签 / 反复错标记 —— */
.tag.lv { background: #eef2f7; color: #4b5563; border: 1px solid #dde4ec; }
.tag.repeat { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; font-weight: 700; }

/* —— 相似题推荐面板 —— */
.sim-panel { margin: 10px 0 2px; border: 1px dashed #c7d7ea; border-radius: 10px; padding: 10px 12px; background: #fbfdff; }
.sim-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.sim-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; border-top: 1px dashed #e6eef8; }
.sim-item:first-of-type { border-top: none; }
.sim-stem { flex: 1 1 auto; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-item .mini, .sim-all { flex: none; }
.sim-sub { font-size: 11.5px; color: #8592a3; margin: -2px 0 6px; line-height: 1.5; }
.sim-item .tag.lv { flex: none; font-size: 10.5px; padding: 1px 6px; }
.sim-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.sim-all { margin-top: 8px; }
.wrong-acts { flex-wrap: wrap; }

/* —— 教师端学生反馈 —— */
.fb-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
.fb-badge:empty { display: none; }
.fb-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.fb-filters .mini.active { background: var(--ink, #1f2937); color: #fff; border-color: transparent; }
.fb-row.fb-done { opacity: .55; }
.fb-topic { font-size: 11.5px; color: var(--muted); }
.fb-row-head .fb-toggle-done { margin-left: auto; flex: none; }

/* —— 班级易错题 → 重练卷 —— */
.hard-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 10px; }
.hard-hint { font-size: 11.5px; }
.stat-table th.chk, .stat-table td.chk { width: 28px; text-align: center; padding-left: 2px; padding-right: 2px; }

/* —— 搜题 / 查题 —— */
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.search-bar input[type="search"] {
  flex: 1 1 320px; min-width: 200px; box-sizing: border-box; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff;
}
.search-bar input[type="search"]:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.search-bar select {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px;
  font-family: inherit; background: #fff; color: var(--ink-2);
}
.search-meta { font-size: 12.5px; min-height: 18px; margin-bottom: 12px; }
.search-card {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px 12px;
  margin-bottom: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.search-card .sc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.search-card .sc-id { font-weight: 800; font-size: 13.5px; color: var(--blue-700); letter-spacing: .3px; }
.search-card .sc-meta { font-size: 11.5px; color: var(--muted); }
.search-card .sc-hit { margin-left: auto; font-size: 11px; color: #6b7a90; background: #f1f5fb; border-radius: 999px; padding: 2px 9px; }
.search-card .sc-ans {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  background: #e8f7ee; color: #15803d; border: 1px solid #b7e4c9; border-radius: 999px; padding: 3px 10px;
}
.search-card .qstem { font-size: 13.5px; line-height: 1.65; color: var(--ink); margin-bottom: 8px; }
.search-opts { list-style: none; margin: 0 0 8px; padding: 0; }
.search-opts li {
  display: flex; gap: 8px; font-size: 13px; line-height: 1.55; padding: 4px 8px; border-radius: 7px; color: var(--ink-2);
}
.search-opts li b { flex: none; width: 16px; color: #7b8794; }
.search-opts li.correct { background: #e8f7ee; color: #14532d; font-weight: 600; }
.search-opts li.correct b { color: #15803d; }
.search-opts li.correct::after { content: "✓"; color: #15803d; font-weight: 800; margin-left: auto; }
.search-exp { font-size: 12.5px; line-height: 1.7; color: #33475b; background: #f7fafd; border-left: 3px solid #c7d7ea; border-radius: 0 8px 8px 0; padding: 8px 11px; }
.search-exp b { color: var(--blue-700); }
.search-empty { padding: 32px 12px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 720px) {
  #topnav { gap: 8px; padding: 0 10px; height: auto; min-height: 54px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  #topnav .nav-tabs { flex-wrap: wrap; gap: 5px; }
  #topnav .nav-tab { padding: 6px 11px; font-size: 12.5px; }
  .search-bar input[type="search"] { flex: 1 1 100%; }
  .search-card { padding: 12px; }
}