:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1f2328;
  --muted: #5b636d;
  --primary: #2563eb;
  --primary-weak: #dbeafe;
  --ok: #15803d;
  --ok-weak: #dcfce7;
  --bad: #b91c1c;
  --bad-weak: #fee2e2;
  --warn: #b45309;
  --warn-weak: #fef3c7;
  --border: #d8dee4;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.brand {
  font-weight: 700; font-size: 16px; color: var(--primary);
  text-decoration: none; white-space: nowrap;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a {
  padding: 6px 12px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: 14px;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--bg); color: var(--text); }
.nav a.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }
.countdown {
  font-size: 13px; color: var(--warn); font-weight: 600;
  background: var(--warn-weak); padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
}

/* ---------- 主区 ---------- */
.app { max-width: 980px; margin: 0 auto; padding: 20px; }
.loading { text-align: center; color: var(--muted); padding: 60px 0; }
.error {
  background: var(--bad-weak); color: var(--bad);
  padding: 16px; border-radius: var(--radius); border: 1px solid #f5c2c2;
  margin: 12px 0;
}

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 16px;
}
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 12px; }
h4 { font-size: 15px; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- 首页 ---------- */
.hero { text-align: center; padding: 8px 0 4px; }
.hero .big { font-size: 30px; font-weight: 800; color: var(--primary); }
.stat-grid {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; text-align: center;
}
.stat .num { font-size: 24px; font-weight: 800; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font-size: 14px; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn:focus-visible, .opt:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- 刷题 ---------- */
.progress-bar {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap;
}
.progress-track {
  flex: 1; min-width: 120px; height: 8px; border-radius: 999px;
  background: #e5e9ef; overflow: hidden;
}
.progress-fill { height: 100%; background: var(--primary); transition: width .2s; }

.q-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.q-meta .tag {
  display: inline-block; background: var(--primary-weak); color: var(--primary);
  padding: 1px 8px; border-radius: 999px; margin-left: 6px; font-size: 11px;
}
.q-stem { font-size: 16px; line-height: 1.75; margin-bottom: 16px; white-space: pre-wrap; }

.opt {
  display: block; width: 100%; text-align: left;
  padding: 13px 16px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font-size: 14px; line-height: 1.6; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.opt:hover:not(:disabled) { background: var(--bg); border-color: var(--primary); }
.opt:disabled { cursor: default; }
.opt .key {
  display: inline-block; width: 22px; font-weight: 700; color: var(--muted);
}
.opt.picked { border-color: var(--primary); background: var(--primary-weak); }
.opt.ok { border-color: var(--ok); background: var(--ok-weak); }
.opt.ok .key { color: var(--ok); }
.opt.bad { border-color: var(--bad); background: var(--bad-weak); }
.opt.bad .key { color: var(--bad); }
.opt .mark { float: right; font-weight: 700; }
.opt.ok .mark { color: var(--ok); }
.opt.bad .mark { color: var(--bad); }

.tf-row { display: flex; gap: 12px; }
.tf-row .opt { text-align: center; font-size: 16px; font-weight: 600; }

.explain {
  margin-top: 16px; padding: 14px 16px;
  background: var(--bg); border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
}
.explain .verdict { font-weight: 700; margin-bottom: 6px; }
.explain .verdict.ok { color: var(--ok); }
.explain .verdict.bad { color: var(--bad); }
.explain .ans { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ---------- 采分点 ---------- */
.rubric-panel { margin-top: 16px; }
.rubric-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 8px; background: var(--card);
  cursor: pointer;
}
.rubric-item:hover { background: var(--bg); }
.rubric-item input { margin-top: 3px; flex-shrink: 0; }
.rubric-item .s { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.rubric-item.checked { border-color: var(--ok); background: var(--ok-weak); }
.penalties { border: 1px dashed #f0b4b4; border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.penalties legend { font-size: 12px; color: var(--bad); padding: 0 6px; }

.score-live {
  font-size: 17px; font-weight: 800; margin-top: 14px;
  padding: 12px 16px; background: var(--primary-weak);
  border-radius: 8px; color: var(--primary);
}
.score-live.bad { background: var(--bad-weak); color: var(--bad); }
.miss-alert { color: var(--bad); font-size: 13px; margin-top: 8px; }
.model-answer {
  margin-top: 14px; padding: 14px 16px; background: var(--bg);
  border-radius: 8px; white-space: pre-wrap; font-size: 14px; line-height: 1.8;
}

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td {
  border: 1px solid var(--border); padding: 8px 10px; text-align: left;
  vertical-align: top;
}
.tbl th { background: var(--bg); font-weight: 600; }

/* ---------- 速记卡 ---------- */
.flashcard {
  perspective: 1000px; height: 260px; margin-bottom: 16px; cursor: pointer;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .45s; transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card);
  box-shadow: var(--shadow); overflow: auto;
}
.flashcard-face.back { transform: rotateY(180deg); background: var(--primary-weak); }
.flashcard-face .fc-label { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.flashcard-face .fc-text { font-size: 16px; line-height: 1.8; white-space: pre-wrap; }

/* ---------- 模板 ---------- */
.tpl-block {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px; line-height: 1.7; margin: 10px 0;
}

/* ---------- 模考 ---------- */
.mock-timer {
  font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 10px 18px; border-radius: 8px; background: var(--card);
  border: 1px solid var(--border); display: inline-block;
}
.mock-timer.warn { background: var(--warn-weak); color: var(--warn); border-color: var(--warn); }
.mock-timer.danger { background: var(--bad-weak); color: var(--bad); border-color: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.opt-list { list-style: none; padding: 0; margin: 0; }
.result-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.result-row .id { font-family: monospace; color: var(--muted); min-width: 88px; }

/* ══════════════════════════════════════════════
   移动端适配（≤ 720px）
   核心问题：原 .nav 用 flex-wrap，窄屏上每个链接各占一行，
   把左侧撑满、正文被挤到右边。改为「单行横向可滑动」。
   ══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .app { padding: 10px 10px 40px; }

  /* 顶栏：品牌 + 倒计时一行，导航另起一行横向滚动 */
  .topbar {
    padding: 8px 10px 0;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .brand { font-size: 15px; flex: 1; }
  .countdown { font-size: 11px; padding: 3px 9px; order: 2; }

  .nav {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;          /* ← 关键：不换行 */
    overflow-x: auto;            /* ← 横向滑动 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox 隐藏滚动条 */
    gap: 2px;
    padding: 6px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto;              /* ← 关键：不被压缩 */
    padding: 6px 12px;
    font-size: 13.5px;
    white-space: nowrap;
    border-radius: 8px;
  }

  /* 正文区域不要再被挤压 */
  .app, .card, .topbar { max-width: 100%; }
  .card { padding: 14px 12px; }

  /* 题干更易读 */
  .q-stem { font-size: 16px; line-height: 1.7; }
  .q-meta { font-size: 12px; }

  /* 统计卡片两列 */
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .stat .num { font-size: 22px; }

  /* 选项：加大点击区域，符合 44px 触控规范 */
  .opt {
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.6;
    min-height: 52px;
    align-items: flex-start;
  }
  .opt .key-letter { font-size: 15px; }
  .tf-row { gap: 10px; }
  .tf-row .btn { min-height: 52px; font-size: 20px; flex: 1; }

  /* 按钮行：允许换行、按钮均分 */
  .btn-row { flex-wrap: wrap; gap: 8px; }
  .btn-row .btn { flex: 1 1 auto; min-width: 0; }
  .btn { min-height: 44px; font-size: 14px; }

  /* AI 讲解区 */
  .ai-head { flex-wrap: wrap; gap: 8px; }
  .ai-btn { flex: 1 1 auto; }

  /* 代码题：单元格头部紧凑 */
  .cell-head { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .cell-name { font-size: 12.5px; flex: 1 1 100%; order: 3; }
  .cell-run-btn { min-height: 34px !important; }
  .nb-code { font-size: 11.5px; line-height: 2; padding: 10px; }
  .nb-blank { min-width: 160px; font-size: 11.5px; }

  /* 单元格内填空讲解面板 */
  .cell-blanks { padding: 10px; }
  .cell-blank-head { gap: 6px; }
  .cb-prompt { flex: 1 1 100%; font-size: 12.5px; }
  .cb-btn { flex: 1 1 auto; min-height: 34px !important; }

  /* 表格横向滚动，避免撑破 */
  .table-wrap, table { display: block; overflow-x: auto; white-space: nowrap; }
  table thead, table tbody { display: table; width: 100%; }

  /* 多选题横幅 */
  .mc-banner { padding: 10px 12px; gap: 8px; }
  .mc-hint { font-size: 12.5px; }

  /* 完成提示框 */
  .ended-box { padding: 16px 12px; }
  .ended-title { font-size: 15px; }

  /* 弹性布局容器：一律改为纵向堆叠 */
  .row, .flex-row { flex-direction: column; align-items: stretch; }
}

/* 超窄屏（≤ 400px）进一步压缩 */
@media (max-width: 400px) {
  .topbar { padding: 6px 8px 0; }
  .brand { font-size: 14px; }
  .nav a { padding: 5px 10px; font-size: 13px; }
  .card { padding: 12px 10px; }
  .q-stem { font-size: 15px; }
  .stat .num { font-size: 19px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --card: #161b22; --text: #e6edf3; --muted: #9198a1;
    --border: #30363d; --primary: #4493f8; --primary-weak: #1c2d4a;
    --ok: #3fb950; --ok-weak: #17351f; --bad: #f85149; --bad-weak: #3d1a1a;
    --warn: #d29922; --warn-weak: #33270c;
  }
  .progress-track { background: #21262d; }
}

/* ---------- AI 讲解 ---------- */
.ai-box {
  margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
.ai-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.ai-title { font-weight: 700; font-size: 14px; }
.ai-meta {
  font-size: 11px; color: var(--muted);
  background: var(--primary-weak); color: var(--primary);
  padding: 2px 8px; border-radius: 999px;
}
.ai-btn { min-height: 34px !important; padding: 4px 12px !important; font-size: 13px !important; margin-left: auto; }
.ai-btn + .ai-btn { margin-left: 0; }
.ai-out {
  padding: 14px 16px; white-space: pre-wrap; font-size: 14px; line-height: 1.85;
  max-height: 460px; overflow-y: auto;
}
.ai-out .ai-loading { color: var(--muted); }

.explain-body { line-height: 1.8; }

/* ---------- 设置页 ---------- */
.setting-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.setting-row label { min-width: 110px; font-size: 14px; font-weight: 600; }
.setting-row input[type=text], .setting-row input[type=password], .setting-row select {
  flex: 1; min-width: 220px; min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 14px;
}
.hint-box {
  background: var(--warn-weak); color: var(--warn);
  padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.7;
  margin: 12px 0;
}
.ok-box {
  background: var(--ok-weak); color: var(--ok);
  padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.7;
}
.diag-out {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; white-space: pre-wrap; font-size: 14px; line-height: 1.85;
  max-height: 500px; overflow-y: auto; margin-top: 12px;
}

/* ---------- 题型徽章（区分单选/多选/判断） ---------- */
.type-badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  margin-right: 8px; vertical-align: middle;
}
.type-badge.t-sc { background: #dbeafe; color: #1d4ed8; }
.type-badge.t-tf { background: #e0e7ff; color: #4338ca; }
.type-badge.t-mc {
  background: #fef3c7; color: #b45309;
  border: 2px solid #f59e0b;          /* 多选题额外描边，最醒目 */
}
@media (prefers-color-scheme: dark) {
  .type-badge.t-sc { background:#1c2d4a; color:#7cb0ff; }
  .type-badge.t-tf { background:#25265a; color:#a5b4fc; }
  .type-badge.t-mc { background:#3b2708; color:#fbbf24; border-color:#b45309; }
}
.q-id { color: var(--muted); font-size: 12px; }

/* ---------- 多选题顶部提示条 ---------- */
.mc-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fffbeb; border: 2px solid #f59e0b; border-left-width: 6px;
  border-radius: 8px; padding: 10px 14px; margin: 6px 0 14px;
}
.mc-badge {
  background: #f59e0b; color: #fff; font-weight: 800; font-size: 13px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.mc-hint { font-size: 13px; color: #92400e; line-height: 1.6; }
.mc-hint b { color: #b45309; font-size: 15px; }
@media (prefers-color-scheme: dark) {
  .mc-banner { background:#2a1f06; border-color:#b45309; }
  .mc-hint { color:#fbbf24; }
  .mc-hint b { color:#f59e0b; }
}

/* ---------- 选项前的选择框（多选☐ / 单选○） ---------- */
.key-box, .key-radio {
  display: inline-block; width: 22px; font-size: 16px; line-height: 1;
  vertical-align: middle; margin-right: 2px;
}
.opt.is-mc .key-box { color: #b45309; }
.opt .key-letter {
  display: inline-block; width: 20px; font-weight: 700;
  color: var(--muted); vertical-align: middle;
}
.opt.picked .key-box, .opt.picked .key-radio { color: var(--primary); }
.opt.ok .key-box, .opt.ok .key-radio { color: var(--ok); }
.opt.bad .key-box, .opt.bad .key-radio { color: var(--bad); }

/* ---------- 多选确认按钮更醒目 ---------- */
#btn-confirm-mc {
  background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important;
  font-weight: 700;
}
#btn-confirm-mc:hover { filter: brightness(1.08); }

/* ---------- 练习结束提示 ---------- */
.ended-box {
  margin-top: 16px; padding: 22px 18px; text-align: center;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac; border-radius: var(--radius);
}
.ended-title { font-size: 17px; font-weight: 800; color: #15803d; margin-bottom: 8px; }
.ended-stat { font-size: 14px; color: #166534; margin-bottom: 16px; line-height: 1.7; }
.ended-box .btn-row { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  .ended-box { background: linear-gradient(135deg,#14261a 0%,#17351f 100%); border-color:#2d6a3f; }
  .ended-title { color:#4ade80; }
  .ended-stat { color:#86efac; }
}

/* ---------- 代码块 / 运行输出 ---------- */
.code-block {
  background: #0d1117; color: #c9d1d9;
  border: 1px solid #30363d; border-radius: 8px;
  padding: 14px 16px; margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow: auto;
}
.out-label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
#btn-run { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; font-weight: 700; }
#btn-run:hover { filter: brightness(1.1); }
#btn-run:disabled { opacity: .6; }

/* ---------- Notebook 式单元格 ---------- */
.cell-card {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 14px; overflow: hidden; background: var(--card);
}
.cell-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f1f3f6; border-bottom: 1px solid var(--border);
}
.cell-idx { font-family: monospace; color: var(--muted); font-size: 12px; }
.cell-name { font-size: 13px; font-weight: 600; flex: 1; }
.cell-run-btn {
  min-height: 28px !important; padding: 2px 12px !important; font-size: 12px !important;
  background: #16a34a !important; border-color: #16a34a !important; color: #fff !important;
}
.cell-run-btn:hover { filter: brightness(1.1); }
.cell-run-btn:disabled { opacity: .6; }

/* 代码区：长行自动折行，保证手机一屏能读完整
   —— 历史问题：早期用 pre-wrap 但填空框不折，导致
      clean = bookings.drop_duplicates(subset='booki… 被裁掉；
      后来改 pre+横滑，手机又看不出「还能滑」。
      最终方案：折行 + 填空框宽度自适应 + 续行缩进 */
.nb-code {
  margin: 0; padding: 12px 14px;
  background: #0d1117; color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; line-height: 2.1;
  /* 折行优先：手机上横滑体验差（看不出还有内容），
     改为自动折行 + 续行缩进，保证一屏能读完整 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.nb-blank-wrap {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}
.nb-blank {
  display: inline-block;
  min-width: 260px;
  padding: 2px 8px;
  background: #1c2128;
  color: #7ee787;
  border: 1px dashed #8b949e;
  border-radius: 4px;
  font-family: inherit; font-size: 12.5px;
  outline: none;
}
.nb-blank:focus {
  border-color: #58a6ff; border-style: solid;
  background: #161b22; box-shadow: 0 0 0 2px rgba(88,166,255,.25);
}
.nb-blank::placeholder { color: #6e7681; font-style: italic; }

.hl-kw { color: #ff7b72; }
.hl-str { color: #a5d6ff; }
.hl-comment { color: #8b949e; font-style: italic; }
.hl-num { color: #79c0ff; }

.cell-out { border-top: 1px solid var(--border); padding: 10px 14px; background: #0d1117; }
.cell-out .out-label { color: #8b949e; }
.cell-out-pre {
  margin: 0; color: #c9d1d9; font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap;
  max-height: 300px; overflow: auto;
}
@media (prefers-color-scheme: dark) {
  .cell-head { background: #1c2128; }
  .nb-blank { background: #161b22; }
}

/* ---------- 单元格内的填空讲解面板 ---------- */
.cell-blanks {
  border-top: 1px solid var(--border);
  background: var(--card);
  padding: 12px 14px;
}
.cell-blank-item { margin-bottom: 12px; }
.cell-blank-item:last-child { margin-bottom: 0; }
.cell-blank-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0;
}
.cb-idx {
  background: var(--primary-weak, #eef2ff); color: var(--primary, #4338ca);
  font-size: 11px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.cb-prompt { flex: 1; font-size: 13px; line-height: 1.5; min-width: 200px; }
.cb-score {
  font-size: 11px; color: var(--muted);
  background: var(--bg); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.cb-btn {
  min-height: 28px !important; padding: 2px 10px !important;
  font-size: 12px !important; white-space: nowrap;
}
.cb-answer {
  margin-top: 6px; padding: 10px 12px;
  background: #f0fdf4; border-left: 4px solid #22c55e; border-radius: 6px;
  font-size: 13px; line-height: 1.7;
}
.cb-answer code {
  display: block; font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px; color: #065f46; white-space: pre-wrap;
  word-break: break-word; background: transparent;
}
.cb-explain { margin-top: 8px; color: #166534; font-size: 12.5px; }
.cell-blank-item .ai-out {
  margin-top: 8px; padding: 10px 12px; white-space: pre-wrap;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12.5px; line-height: 1.7; max-height: 420px; overflow: auto;
}
@media (prefers-color-scheme: dark) {
  .cb-answer { background: #14261a; border-left-color: #22c55e; }
  .cb-answer code { color: #86efac; }
  .cb-explain { color: #bbf7d0; }
  .cell-blank-item .ai-out { background: #161b22; }
  .cb-idx { background: #1e1b4b; color: #a5b4fc; }
}

/* ══════════════════════════════════════════════
   代码单元格：长行可读性修复
   问题：长代码 + 内联填空框混排时，右侧被裁掉
   方案：代码区横滑 + 视觉提示 + 填空框自适应
   ══════════════════════════════════════════════ */

/* 横滑提示：右侧渐隐，暗示还有内容 */
.cell-body {
  position: relative;
}
.cell-body::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(13,17,23,.85));
  opacity: 0;
  transition: opacity .2s;
}
.cell-body:hover::after { opacity: 1; }

/* 填空框：不撑破行，宽度随内容但设上限 */
.nb-blank {
  min-width: 120px;
  max-width: min(420px, 60vw);
}
/* 已填内容较长时，让框内文字可滚动查看，而不是被裁 */
.nb-blank:not(:placeholder-shown) {
  text-overflow: ellipsis;
}

/* 移动端：代码字号与行距再优化，横滑手势更顺 */
@media (max-width: 720px) {
  .nb-code {
    font-size: 12px;
    line-height: 1.95;
    padding: 12px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .nb-blank {
    min-width: 110px;
    max-width: 68vw;
    font-size: 12px;
    padding: 3px 8px;
  }
  /* 移动端把横向滚动条做得可见一点，提示可滑动 */
  .nb-code::-webkit-scrollbar {
    height: 6px;
  }
  .nb-code::-webkit-scrollbar-thumb {
    background: #30363d; border-radius: 3px;
  }
  .nb-code::-webkit-scrollbar-track {
    background: #161b22;
  }
}

/* 答案区：长代码一律换行完整显示，绝不裁切 */
.cb-answer code {
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.75;
}

/* 运行输出：长行也保证完整可见 */
.cell-out-pre, .code-block {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════
   富文本强调样式（**加粗** / ==高亮== / `代码` / 【标题】）
   ══════════════════════════════════════════════ */
.rich-body strong,
.explain-body strong,
.q-stem strong {
  font-weight: 800;
  color: var(--text);
  /* 加粗再加一条细下划线，视觉更明确（不只是字重） */
  border-bottom: 2px solid var(--primary-weak, #c7d2fe);
  padding-bottom: 1px;
}

.rich-body mark,
.explain-body mark,
.q-stem mark {
  background: linear-gradient(180deg, transparent 55%, #fde68a 55%);
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

.rich-body code,
.explain-body code,
.q-stem code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
  background: #eef2ff;
  color: #3730a3;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}

.rich-head {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-weak, #eef2ff);
  padding: 1px 8px;
  border-radius: 4px;
  margin: 6px 0 4px;
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  .rich-body strong, .explain-body strong, .q-stem strong {
    border-bottom-color: #4338ca;
  }
  .rich-body mark, .explain-body mark, .q-stem mark {
    background: linear-gradient(180deg, transparent 55%, #78350f 55%);
    color: #fde68a;
  }
  .rich-body code, .explain-body code, .q-stem code {
    background: #1e1b4b; color: #c7d2fe; border-color: #3730a3;
  }
  .rich-head { background: #1e1b4b; color: #a5b4fc; }
}