/* ============ C 语言学习站 · HoppyPy 风格 ============ */
:root {
  --bg: #f6f7fd;
  --surface: #ffffff;
  --surface-2: #f0f2fa;
  --surface-3: #e8ebf8;
  --border: #e4e7f3;
  --text: #1d2438;
  --text-2: #6a7299;
  --primary: #6366f1;
  --primary-2: #8b5cf6;
  --accent: #22d3ee;
  --grad-main: linear-gradient(120deg, #6366f1, #8b5cf6 55%, #d946ef);
  --grad-soft: linear-gradient(120deg, rgba(99, 102, 241, .10), rgba(139, 92, 246, .10), rgba(217, 70, 239, .10));
  --success: #10b981;
  --danger: #ef4444;
  --warn: #f59e0b;

  /* ---- 代码区(浅色主题:浅底深字)---- */
  --code-bg: #f5f7fc;
  --code-text: #1f2937;
  --code-gutter-bg: rgba(15, 23, 42, .04);
  --code-gutter-text: #94a3b8;
  --code-caret: #111827;
  --code-selection: rgba(99, 102, 241, .28);
  --tok-kw: #7c3aed;
  --tok-type: #1d4ed8;
  --tok-num: #b45309;
  --tok-str: #15803d;
  --tok-comment: #6b7280;
  --tok-pp: #c2410c;
  --tok-op: #0e7490;
  --tok-blank-bg: rgba(245, 158, 11, .18);
  --tok-blank-text: #b45309;
  --out-err: #b91c1c;
  --out-ok: #047857;
  --out-meta: #64748b;
  --step-text: #334155;
  --step-active-bg: rgba(245, 158, 11, .16);
  --step-active-text: #92400e;
  --step-active-ln: #b45309;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(30, 41, 80, .05), 0 6px 20px rgba(30, 41, 80, .07);
  --shadow-lg: 0 12px 40px rgba(99, 102, 241, .18);
  --topbar-h: 58px;
}
[data-theme="dark"] {
  --bg: #0d1224;
  --surface: #161d36;
  --surface-2: #1d2647;
  --surface-3: #252f57;
  --border: #2a3458;
  --text: #e6e9f5;
  --text-2: #9aa3c8;
  --primary: #818cf8;
  --primary-2: #a78bfa;
  --accent: #22d3ee;
  --grad-main: linear-gradient(120deg, #6366f1, #a855f7 55%, #ec4899);
  --grad-soft: linear-gradient(120deg, rgba(99, 102, 241, .16), rgba(168, 85, 247, .16), rgba(236, 72, 153, .16));
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  --code-bg: #0a0f1e;
  --code-text: #e2e8f0;
  --code-gutter-bg: rgba(255, 255, 255, .03);
  --code-gutter-text: #475569;
  --code-caret: #e2e8f0;
  --code-selection: rgba(99, 102, 241, .5);
  --tok-kw: #c792ea;
  --tok-type: #82aaff;
  --tok-num: #f78c6c;
  --tok-str: #c3e88d;
  --tok-comment: #5c7a9e;
  --tok-pp: #ff9d5c;
  --tok-op: #89ddff;
  --tok-blank-bg: rgba(245, 158, 11, .28);
  --tok-blank-text: #fbbf24;
  --out-err: #fda4af;
  --out-ok: #34d399;
  --out-meta: #64748b;
  --step-text: #cbd5e1;
  --step-active-bg: rgba(245, 158, 11, .22);
  --step-active-text: #fde68a;
  --step-active-ln: #fbbf24;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  transition: background .25s, color .25s;
}
code, pre, .mono, textarea, .editor { font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; white-space: nowrap; cursor: pointer; }
/* 窄屏：顶栏那排按钮排不下时会让整页横向溢出（所有卡片右边被裁），
   所以这里让导航自己横向滚动、并把占地方的文字收起来，页面宽度就稳住了 */
@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .topbar .brand span:not(.logo) { display: none; }
  .topbar .topnav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav button { flex: 0 0 auto; }
  .topbar-right #userArea { display: none; }
}
.brand:hover .logo { transform: rotate(-8deg) scale(1.05); }
.logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-main);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: -1px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .4);
  transition: transform .2s;
}
.topnav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.topnav button {
  border: 0; background: transparent; color: var(--text-2);
  padding: 8px 15px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: all .18s; white-space: nowrap;
}
.topnav button:hover { background: var(--surface-2); color: var(--text); }
.topnav button.active {
  background: var(--grad-main); color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, .35);
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
/* 小圆角标签:`badge-tcc` 仍用于"已完成"标记;顶栏的引擎徽章已去掉(学生不需要那个开关) */
.badge { font-size: 12px; padding: 3px 11px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.badge-tcc { background: rgba(16, 185, 129, .14); color: var(--success); }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.icon-btn:hover { background: var(--surface-2); transform: translateY(-1px); }

.main { min-height: calc(100vh - var(--topbar-h)); padding: 30px 26px 90px; }
.content { max-width: 1060px; margin: 0 auto; }

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 44px 44px 38px; margin-bottom: 34px;
  background: var(--grad-main); color: #fff;
  box-shadow: var(--shadow-lg);
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); 
}
.hero::before {
  content: ""; position: absolute; right: 90px; bottom: -110px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}
.hero h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.3; position: relative; z-index: 1; }
.hero p { margin: 0 0 20px; font-size: 16px; opacity: .94; max-width: 560px; position: relative; z-index: 1; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-stat .num { font-size: 24px; font-weight: 800; }
.hero-stat .lbl { font-size: 13px; opacity: .85; }

/* 整体进度条 */
.progress-strip {
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; box-shadow: var(--shadow);
}
.progress-strip .ps-label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.progress-strip .ps-bar { flex: 1; height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress-strip .ps-fill {
  height: 100%; border-radius: 999px;
  background: var(--grad-main);
  transition: width .6s ease;
}
.progress-strip .ps-num { font-size: 13px; color: var(--text-2); white-space: nowrap; }

/* ---------- 课程卡片网格 ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.course-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.course-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.course-card .cc-banner {
  height: 96px; display: flex; align-items: center; gap: 14px;
  padding: 0 22px; color: #fff; position: relative; overflow: hidden;
}
.course-card .cc-banner .cc-emoji { font-size: 40px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.course-card .cc-banner .cc-ch { font-weight: 700; font-size: 14px; opacity: .95; }
.course-card .cc-banner::after {
  content: ""; position: absolute; right: -34px; top: -44px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.course-card .cc-body { padding: 18px 20px 16px; display: flex; flex-direction: column; flex: 1; }
.course-card .cc-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
/* 卡片简介:最多两行(内容侧已压到 ~50 字,这里再兜一道,防止以后又写长) */
.course-card .cc-desc {
  margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card .cc-progress { margin-bottom: 12px; }
.course-card .cc-progress .cp-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.course-card .cc-progress .cp-bar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.course-card .cc-progress .cp-fill { height: 100%; border-radius: 999px; background: var(--grad-main); transition: width .5s; }
.course-card .cc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-meta .chip {
  font-size: 12px; color: var(--text-2); background: var(--surface-2);
  padding: 2px 10px; border-radius: 999px;
}
/* 首页卡片的知识点关键词:比普通 chip 略小、颜色淡一点,一眼可扫 */
.course-card .cc-keys { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.cc-keys .chip-key {
  font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--grad-soft, rgba(99,102,241,.10));
  border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px;
}
.course-card .cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--grad-main); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 12px;
  transition: filter .15s, transform .15s;
}
.course-card:hover .cc-btn { filter: brightness(1.06); }
.course-card .cc-btn.done-state { background: var(--surface-3); color: var(--text-2); }

/* ---------- 互动课程页(左右分栏) ---------- */
.lesson-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: start;
  /* 整节课(侧栏 + 正文)统一收在一个阅读宽度里并居中:
     这样"段落 / 提示框 / 表格 / 对比栏 / 代码区"共享同一条右边线,页面不会一段长一段短。
     宽度从 1060 → 1200 是给正文列留出约 900px:中文 15px 下每行 ≈ 55 字,读起来最舒服。 */
  max-width: 1200px; margin: 0 auto; }
.lesson-nav {
  position: sticky; top: calc(var(--topbar-h) + 18px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px 12px;
}
.lesson-nav .ln-back {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--text-2); cursor: pointer; padding: 6px 10px; border-radius: 8px; margin-bottom: 6px;
  transition: all .15s;
}
.lesson-nav .ln-back:hover { background: var(--surface-2); color: var(--text); }
.lesson-nav .ln-title { font-size: 15px; font-weight: 800; padding: 4px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.lesson-nav .ln-title small { display: block; font-weight: 600; color: var(--text-2); font-size: 12px; margin-top: 2px; }
/* 章节名称下面的"本章关键词"(取代原来的"课程大纲对应 / 二级大纲对应"两行) */
.lesson-nav .ln-keys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lesson-nav .ln-keys .chip-key {
  font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: var(--grad-soft, rgba(99,102,241,.10));
  border: 1px solid var(--border); padding: 1px 9px; border-radius: 999px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* 左侧章节目录:默认全部展开,卡片内部不出现滚动条(整页滚动就能看到所有章节)。
   如果某一章小节特别多、目录高过屏幕,JS 会给它加 .tall:此时取消吸顶,
   让它随页面一起滚动 —— 这样底部的章节照样够得到,并且始终没有嵌套滚动条。 */
.ln-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lesson-nav.tall { position: static; }
.ln-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--text-2); transition: all .15s;
}
.ln-item:hover { background: var(--surface-2); color: var(--text); }
.ln-item.active { background: var(--grad-soft); color: var(--primary); font-weight: 700; }
.ln-item .ln-ico { flex-shrink: 0; font-size: 15px; }
.ln-item .ln-txt { flex: 1; line-height: 1.4; }
.ln-item .ln-mark { flex-shrink: 0; font-size: 12px; color: var(--success); }
.ln-item.done .ln-txt { color: var(--text-2); }
.ln-item.doing .ln-mark { color: var(--warn); }
.ln-item.active .ln-mark { color: var(--primary); }

/* ---------- 章节目录:分组折叠(第 0 章等长章节) ---------- */
.ln-progress { padding: 0 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.ln-progress .lnp-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.ln-progress .lnp-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.ln-progress .lnp-bar i { display: block; height: 100%; background: var(--grad-main); border-radius: 999px; transition: width .5s; }
.ln-list.grouped { gap: 4px; }
.ln-group { list-style: none; }
.ln-group-head {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 9px; border-radius: 9px; background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; color: var(--text); transition: background .15s;
}
.ln-group-head:hover { background: var(--surface-3); }
.ln-group .lng-caret { font-size: 10px; color: var(--text-2); transition: transform .18s; }
.ln-group:not(.open) .lng-caret { transform: rotate(-90deg); }
.ln-group .lng-name { flex: 1; }
.ln-group .lng-count { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.ln-group.all-done .lng-count { color: var(--success); }
.ln-group.all-done .lng-name::after { content: ' ✓'; color: var(--success); }
.ln-group .ln-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); margin-left: 12px; }
.ln-group:not(.open) .ln-sub { display: none; }
.ln-group .ln-sub .ln-item { font-size: 12.5px; padding: 6px 8px; }

/* ================= ⭐ 星图(首页集星面板)=================
   一章三格,拿到的星点亮成金色、没拿到的留暗框;一格一章,点一下直接进那一章。
   为什么要它:章节星级在卡片上只是一行小字,学生没有"在集星"的感觉;
   星图把 15~36 颗星摆成一张图,点亮的过程本身就是反馈(不再需要"每章一枚三星徽章")。 */
.star-board {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 22px;
}
.star-board .sb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.star-board .sb-title { font-weight: 800; font-size: 14px; }
.star-board .sb-count { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.star-board .sb-count b { color: var(--primary); font-size: 15px; }
.star-board .sb-bar { flex: 1; min-width: 120px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.star-board .sb-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .5s; }
.star-board .sb-note { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.star-board .sb-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-ch {
  display: flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px 6px 10px; font-size: 13px; color: var(--text-2);
  transition: transform .15s, border-color .15s, background .15s;
}
.sb-ch:hover { transform: translateY(-2px); border-color: var(--primary); }
.sb-ch .sb-ico { font-size: 15px; }
.sb-ch .sb-name { font-weight: 700; color: var(--text); }
.sb-ch .sb-stars { letter-spacing: 1px; font-size: 13px; }
.sb-ch.has { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); }
.sb-ch.has .sb-stars { color: #d97706; }
.sb-ch.full { border-color: rgba(245, 158, 11, .8); background: linear-gradient(120deg, rgba(245,158,11,.18), rgba(251,191,36,.10)); }
.sb-ch.full .sb-name::after { content: ' 🏅'; }

.lesson-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 42%); gap: 22px; align-items: start; min-width: 0; }
.lesson-main.no-right { grid-template-columns: minmax(0, 1fr); }
.lesson-left { min-width: 0; }
.lesson-right { position: sticky; top: calc(var(--topbar-h) + 18px); min-width: 0; }

/* ---------- 底部弹出子窗体(自由练习) ---------- */
.practice-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 150;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-main); color: #fff; border: 0;
  padding: 13px 22px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 700; font-family: inherit;
  box-shadow: 0 6px 24px rgba(99, 102, 241, .45);
  transition: transform .15s, filter .15s;
}
.practice-fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.practice-fab:active { transform: translateY(0); }

.sheet-overlay {
  position: fixed; inset: 0; z-index: 380;
  background: rgba(10, 14, 30, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 1000px; max-height: 80vh;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 44px rgba(0, 0, 0, .32);
  display: flex; flex-direction: column; overflow: hidden;
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet-head {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); font-weight: 700;
}
.sheet-head .sheet-title { font-size: 16px; }
.sheet-head .sheet-sub { color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.sheet-head .spacer { flex: 1; }
.sheet-close {
  border: 0; background: transparent; color: var(--text-2);
  font-size: 16px; cursor: pointer; padding: 5px 11px; border-radius: 8px;
}
.sheet-close:hover { background: var(--surface-3); color: var(--text); }
.sheet-body { padding: 16px 20px 22px; overflow: auto; }
@media (max-width: 640px) {
  .sheet { max-height: 88vh; }
  .sheet-head { padding: 11px 14px; }
  .sheet-head .sheet-sub { display: none; }
  .sheet-body { padding: 12px 14px 18px; }
  .practice-fab { right: 16px; bottom: 16px; padding: 12px 18px; }
}

.lesson-crumb {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 12px;
}
.lesson-crumb .crumb-ch { color: var(--primary); font-weight: 700; cursor: pointer; }
.lesson-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 30px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.lesson-card h2 { margin: 0 0 16px; font-size: 22px; display: flex; align-items: center; gap: 12px; }
.lesson-card h2 .sec-no {
  font-size: 12px; color: #fff; background: var(--grad-main);
  padding: 3px 11px; border-radius: 999px; font-weight: 700; flex-shrink: 0;
}
/* ---------- 正文排版:段落、列表、小标题 ----------
   中文正文按"行距 1.9、段间距 14px、行宽不超过 ~46 个汉字"排,读起来不累。
   细则见 docs/内容样式.md「排版规范」。 */
.lesson-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.9; }
.lesson-card > p:last-child, .lesson-card div > p:last-child { margin-bottom: 0; }
.lesson-card ul, .lesson-card ol { padding-left: 24px; margin: 12px 0 16px; }
.lesson-card li { margin: 8px 0; line-height: 1.85; font-size: 14.5px; }
.lesson-card li::marker { color: var(--primary); font-weight: 700; }
.lesson-card h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 30px 0 12px; padding-left: 11px; font-size: 17px; line-height: 1.5;
  border-left: 4px solid var(--primary); border-radius: 3px;
}
.lesson-card h3:first-child { margin-top: 6px; }
.lesson-card h4 { margin: 22px 0 8px; font-size: 15.5px; }
/* 行宽不再逐元素限制(那会让"段落、提示框"和"表格、代码区"右边缘参差不齐),
   改为在 .lesson-layout 上统一限宽(见上面),列内所有块自动同宽。 */
/* 段落里的强调:高亮底色,让"关键结论"一眼能扫到 */
.lesson-card p strong, .lesson-card li strong { color: var(--text); }
.lesson-card p mark, .lesson-card li mark {
  background: rgba(245, 158, 11, .18); color: inherit; padding: 0 4px; border-radius: 4px;
}
.lesson-card blockquote {
  margin: 14px 0; padding: 11px 16px;
  border-left: 4px solid var(--accent);
  background: var(--surface-2); border-radius: 0 10px 10px 0;
  color: var(--text-2);
}
/* ================= 提示框家族(.tip / .quickcheck)=================
   统一几何:同宽(占满正文列)、同圆角、同内边距、同左侧强调条,只有配色与图标不同 ——
   这样"重点 / 提示 / 扩展 / 考点"几种框排在一起也不会显得长短不一、忽大忽小。 */
.lesson-card .tip, .lesson-card .quickcheck {
  box-sizing: border-box; width: 100%;
  margin: 16px 0; padding: 13px 16px 13px 17px; border-radius: 12px;
  border: 1px solid transparent; border-left: 4px solid transparent;
  font-size: 14px; line-height: 1.8;
}
.lesson-card .tip strong { color: var(--warn); }
/* 提示框题头:统一成"一行标题"的样子(没有题头的旧内容由 renderer 自动补一个) */
.lesson-card .tip .tip-title {
  display: flex; align-items: center; gap: 6px; font-weight: 800; margin-bottom: 4px;
}
.lesson-card .tip p { margin: 6px 0 0; }
.lesson-card .tip p:first-child { margin-top: 0; }
/* 变体:只改配色 */
.lesson-card .tip {
  background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .35); border-left-color: var(--warn);
}
.lesson-card .tip-info { background: rgba(99, 102, 241, .1); border-color: rgba(99, 102, 241, .35); border-left-color: var(--primary); }
.lesson-card .tip-info strong, .lesson-card .tip-info .tip-title { color: var(--primary); }
.lesson-card .tip-warn { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); border-left-color: var(--danger); }
.lesson-card .tip-warn strong, .lesson-card .tip-warn .tip-title { color: var(--danger); }
.lesson-card .tip-think { background: rgba(6, 182, 212, .1); border-color: rgba(6, 182, 212, .35); border-left-color: #0891b2; }
.lesson-card .tip-think strong, .lesson-card .tip-think .tip-title { color: #0891b2; }
.lesson-card .tip-fact { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .35); border-left-color: #d97706; }
/* 考点提示(二级考纲原文对得上的地方):与其他提示框同一套几何,只靠"虚线标签 + 主色"区分 */
.lesson-card .tip-exam { background: rgba(99, 102, 241, .08); border-color: rgba(99, 102, 241, .45); border-left-color: var(--primary); }
.lesson-card .tip-exam .tip-title { color: var(--primary); }
.lesson-card .tip-exam .tip-title::after {
  content: ''; flex: 1; height: 0; border-top: 1px dashed rgba(99, 102, 241, .5); margin-left: 4px;
}

/* ================= 课程正文展示块 =================
   讲解课不该只有纯文字。下面这套块可以自由组合,用法见 docs/内容样式.md:
   .flow 流程条 / .blocks 图标卡片组 / .timeline 时间线 /
   .compare 对比栏 / .annot 代码解剖 / .checklist 勾选清单 / .quickcheck 想一想  */
/* 紧凑流程条:整体居中,块之间用小箭头连起来(适合"结构示意 / 链条") */
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 6px; margin: 18px auto 20px; }
.flow .f-step {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 9px 14px; font-size: 14px; font-weight: 700; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.flow .f-step:hover { transform: translateY(-2px); border-color: var(--primary); }
.flow .f-step.hl {
  background: linear-gradient(180deg, rgba(99,102,241,.16), rgba(99,102,241,.08));
  border-color: rgba(99,102,241,.45); color: var(--primary);
}
.flow .f-arrow { color: var(--primary); font-weight: 800; opacity: .75; font-size: 15px; }

/* 卡片组用 auto-fill:最后一行不满时,卡片保持同样宽度,不会被拉宽成"一张超长卡" */
.blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 16px 0 18px; }
.blocks .block {
  border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; background: var(--surface-2);
}
.blocks .block .b-ico { display: block; font-size: 19px; margin-bottom: 6px; }
.blocks .block .b-title { display: block; font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.blocks .block .b-text { font-size: 13px; color: var(--text-2); line-height: 1.65; }
.blocks .block.accent { border-color: rgba(99, 102, 241, .45); background: rgba(99, 102, 241, .08); }

.timeline { margin: 14px 0 18px 8px; padding-left: 20px; border-left: 2px solid var(--border); }
.timeline .tl-item { position: relative; padding: 0 0 14px 4px; }
.timeline .tl-item::before {
  content: ''; position: absolute; left: -27px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--grad-main); box-shadow: 0 0 0 3px var(--surface);
}
.timeline .tl-year { font-weight: 800; color: var(--primary); margin-right: 8px; }
.timeline .tl-text { font-size: 14px; }
.timeline .tl-item.hl::before { background: linear-gradient(120deg, #f59e0b, #ef4444); }
.timeline .tl-item.hl .tl-year { color: var(--danger); }
.timeline .tl-item:last-child { padding-bottom: 0; }

.compare { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 14px 0 16px; }
.compare .cmp-col { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.compare .cmp-head { padding: 8px 12px; font-weight: 800; font-size: 13.5px; color: #fff; background: var(--grad-main); }
.compare .cmp-col.bad .cmp-head { background: linear-gradient(120deg, #ef4444, #b91c1c); }
.compare .cmp-col.good .cmp-head { background: linear-gradient(120deg, #10b981, #047857); }
.compare .cmp-body { padding: 10px 13px; font-size: 13.5px; color: var(--text-2); line-height: 1.75; }
.compare .cmp-body ul { padding-left: 18px; margin: 4px 0; }

.annot { margin: 14px 0 16px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.annot pre {
  margin: 0; padding: 12px 14px; background: var(--code-bg); color: var(--code-text);
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.7; overflow-x: auto;
}
.annot .an-list { padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--border); font-size: 13.5px; }
.annot .an-list:first-child { border-top: 0; }
.annot .an-item { margin: 5px 0; color: var(--text-2); line-height: 1.7; }
.annot .an-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 7px; border-radius: 50%;
  background: var(--grad-main); color: #fff; font-size: 11.5px; font-weight: 800; vertical-align: 1px;
}

.checklist { list-style: none; padding: 0; margin: 12px 0 14px; }
.checklist li { position: relative; padding-left: 26px; margin: 7px 0; font-size: 14px; }
.checklist li::before { content: '✓'; position: absolute; left: 4px; top: 0; color: #10b981; font-weight: 800; }

/* 想一想:与提示框同一套几何,可点开(《details》) */
.quickcheck {
  background: rgba(99, 102, 241, .06); border-color: rgba(99, 102, 241, .3); border-left-color: var(--primary);
  cursor: pointer;
}
.quickcheck summary { cursor: pointer; font-weight: 700; font-size: 14.5px; }
.quickcheck summary::marker { color: var(--primary); }
.quickcheck .qc-a { font-size: 13.5px; color: var(--text-2); line-height: 1.8; margin-top: 8px; }
.quickcheck[open] { background: rgba(99, 102, 241, .09); }

/* 公式 / 需要突出的那句话(例如"数据结构 + 算法 = 程序") */
.formula {
  margin: 18px 0; padding: 18px 20px; text-align: center;
  font-size: 18px; font-weight: 800; letter-spacing: .5px; line-height: 1.7;
  background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,.04));
  border: 1px solid rgba(99, 102, 241, .35); border-left: 4px solid var(--primary); border-radius: 14px;
}
.formula em { font-style: normal; color: var(--primary); }
.formula code { background: rgba(255,255,255,.35); }


/* ============ 可视化区块(先导篇风格) ============ */
.lesson-card h3 { margin: 20px 0 8px; font-size: 16.5px; line-height: 1.5; }
.lesson-card h4 { margin: 16px 0 6px; font-size: 15px; }
/* 主线步骤条(0.1 输入→处理→存储→输出 的那种):整体居中、卡片带图标与一句话说明、
   序号自动生成(CSS 计数器,内容里不用手写 ①②③)、进场有轻微动效。
   什么时候用它、什么时候用紧凑的 .flow,见 docs/内容样式.md「块一览」。 */
.viz-flow {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
  gap: 10px 8px; margin: 22px auto 24px; counter-reset: vizstep;
}
.viz-step {
  position: relative; flex: 1 1 150px; min-width: 132px; max-width: 240px;
  text-align: center; padding: 18px 12px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.viz-step:hover { transform: translateY(-3px); border-color: var(--primary); }
/* 自动序号:左上角小圆牌 */
.viz-step::before {
  counter-increment: vizstep; content: counter(vizstep);
  position: absolute; top: -9px; left: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-main); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.viz-step .vs-ico { font-size: 30px; display: block; margin-bottom: 7px; line-height: 1.15; }
.viz-step .vs-name { font-weight: 800; font-size: 15px; display: block; }
.viz-step .vs-en { font-size: 11px; color: var(--text-2); display: block; margin-top: 2px; letter-spacing: .3px; }
.viz-step .vs-desc { font-size: 12.5px; color: var(--text-2); display: block; margin-top: 7px; line-height: 1.55; }
.viz-arrow {
  align-self: center; color: var(--primary); font-size: 17px; font-weight: 800;
  width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;
  background: rgba(99, 102, 241, .10);
}
@media (max-width: 560px) { .viz-arrow { transform: rotate(90deg); } }
/* 轻微进场动效(依次浮现):尊重"减少动态效果"的系统设置 */
@keyframes vizIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.viz-step { animation: vizIn .34s ease-out both; }
.viz-step:nth-of-type(1) { animation-delay: .02s; }
.viz-step:nth-of-type(2) { animation-delay: .10s; }
.viz-step:nth-of-type(3) { animation-delay: .18s; }
.viz-step:nth-of-type(4) { animation-delay: .26s; }
.viz-step:nth-of-type(5) { animation-delay: .34s; }
.viz-step:nth-of-type(6) { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .viz-step { animation: none; }
  .flow .f-step:hover, .viz-step:hover { transform: none; }
}

/* 卡片组 */
.viz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0; }
.viz-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  background: var(--surface-2);
}
.viz-card .vc-ico { font-size: 22px; }
.viz-card .vc-title { font-weight: 800; margin: 5px 0 4px; font-size: 15px; }
.viz-card .vc-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.viz-card.accent-a { background: var(--grad-soft); border-color: rgba(99,102,241,.3); }
.viz-card.accent-b { background: rgba(6,182,212,.09); border-color: rgba(6,182,212,.3); }
.viz-card.accent-c { background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.3); }

/* 层级堆叠:用户 → 应用软件 → 操作系统 → 硬件 */
.viz-stack { display: flex; flex-direction: column; gap: 7px; margin: 18px 0; }
.viz-layer {
  border-radius: 12px; padding: 11px 16px; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 10px; color: #fff;
}
.viz-layer .vl-sub { font-weight: 500; font-size: 12.5px; opacity: .88; margin-left: auto; text-align: right; }
.viz-layer.l1 { background: linear-gradient(120deg, #8b5cf6, #6366f1); }
.viz-layer.l2 { background: linear-gradient(120deg, #06b6d4, #3b82f6); }
.viz-layer.l3 { background: linear-gradient(120deg, #10b981, #06b6d4); }
.viz-layer.l4 { background: linear-gradient(120deg, #64748b, #475569); }

/* 编号步骤条 */
.viz-steps { counter-reset: vs; margin: 18px 0; padding: 0; list-style: none; }
.viz-steps li {
  position: relative; padding: 9px 0 9px 42px; font-size: 14px;
  border-bottom: 1px dashed var(--border);
}
.viz-steps li:last-child { border-bottom: 0; }
.viz-steps li::before {
  counter-increment: vs; content: counter(vs);
  position: absolute; left: 0; top: 8px; width: 26px; height: 26px;
  border-radius: 8px; background: var(--grad-main); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.viz-steps .vs-actor { font-weight: 700; color: var(--primary); }
.inline-code {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 6px; font-size: .92em; color: var(--primary);
}

/* ================= 阅读体验升级:编号要点 / 代码块 / 表格 =================
   背景:早期内容里常把 ①②③ 或者一串分号挤在一个段落里,读起来很累;
   代码又和正文混在一行里。这三个块就是为了解决它们(见 docs/内容样式.md「排版规范」)。 */

/* ---- ① .points 编号要点:一个要点一行,序号做成圆形徽章 ---- */
.points { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 18px; }
.points .pt {
  display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 14px;
}
.points .pt-no {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-main); color: #fff; font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.points .pt > div { font-size: 14px; line-height: 1.8; color: var(--text-2); }
.points .pt b, .points .pt strong { color: var(--text); font-weight: 800; }
.points .pt.accent { border-color: rgba(99, 102, 241, .45); background: rgba(99, 102, 241, .07); }
.points .pt.warn { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .06); }
.points .pt.warn .pt-no { background: linear-gradient(120deg, #ef4444, #b91c1c); }

/* ---- ② .code-fig 代码图示:正文里展示"一段代码"时用它,不再和文字挤在一行 ---- */
.code-fig {
  margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--surface-2);
}
.code-fig .cf-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.code-fig .cf-head .cf-tag {
  font-size: 11px; font-weight: 800; color: #fff; background: var(--grad-main);
  padding: 1px 8px; border-radius: 999px;
}
/* 静态代码块:内容里写 <pre class="code-block">,渲染时用 highlightC 上色(见 js/lesson-types.js) */
pre.code-block {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.75; white-space: pre; tab-size: 4;
  background: var(--code-bg); color: var(--code-text);
}
/* ---- 只读代码视图:行号槽 + 高亮代码(单步预测的题目代码、代码解剖……)----
   与运行区(编辑器)同一套配色,让"能跑的代码"和"只看不跑的代码"长得像一家人。 */
.code-view {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.cv-gutter {
  padding: 12px 10px 12px 12px; text-align: right; white-space: pre;
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.75;
  color: var(--text-2); opacity: .6; user-select: none;
  background: rgba(99, 102, 241, .06); border-right: 1px solid var(--border);
}
pre.cv-code {
  margin: 0; padding: 12px 14px; overflow-x: auto; white-space: pre; tab-size: 4;
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.75; background: none; color: inherit;
}
/* 代码解剖里的代码视图:交给外层 .annot 的圆角与边框 */
.annot .code-view { border: 0; border-radius: 0; }
.stepquiz-code .code-view { margin-top: 2px; }
/* 找不同的两段代码:也换成"代码底 + 高亮" */
.diff-code {
  margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.75; overflow-x: auto; white-space: pre;
  background: var(--code-bg); color: var(--code-text);
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}
/* 语法着色:编辑器 / 代码图示 / 只读代码视图 / 找不同 共用同一套 token 颜色 */
.code-block .tok-kw, .cv-code .tok-kw, .diff-code .tok-kw { color: var(--tok-kw); font-weight: 600; }
.code-block .tok-type, .cv-code .tok-type, .diff-code .tok-type { color: var(--tok-type); }
.code-block .tok-num, .cv-code .tok-num, .diff-code .tok-num { color: var(--tok-num); }
.code-block .tok-str, .cv-code .tok-str, .diff-code .tok-str { color: var(--tok-str); }
.code-block .tok-comment, .cv-code .tok-comment, .diff-code .tok-comment { color: var(--tok-comment); font-style: italic; }
.code-block .tok-pp, .cv-code .tok-pp, .diff-code .tok-pp { color: var(--tok-pp); }
.code-block .tok-op, .cv-code .tok-op, .diff-code .tok-op { color: var(--tok-op); }
.code-block .tok-blank, .cv-code .tok-blank, .diff-code .tok-blank {
  background: var(--tok-blank-bg); color: var(--tok-blank-text);
  border-bottom: 2px solid #f59e0b; padding: 0 3px;
}
/* 单步执行播放器里的代码行也上色(它自己带行号槽) */
.step-line .tx .tok-kw { color: var(--tok-kw); font-weight: 600; }
.step-line .tx .tok-type { color: var(--tok-type); }
.step-line .tx .tok-num { color: var(--tok-num); }
.step-line .tx .tok-str { color: var(--tok-str); }
.step-line .tx .tok-comment { color: var(--tok-comment); font-style: italic; }
.step-line .tx .tok-pp { color: var(--tok-pp); }
.step-line .tx .tok-op { color: var(--tok-op); }
.step-line .tx .tok-blank { background: var(--tok-blank-bg); color: var(--tok-blank-text); border-bottom: 2px solid #f59e0b; }
/* 对比栏里的代码块:去掉外边距,贴着栏目边缘 */
.compare .cmp-body .code-fig { margin: 8px 0 4px; border-radius: 10px; }
.compare .cmp-body .code-fig .cf-head { display: none; }
.compare .cmp-body pre.code-block { font-size: 12.5px; padding: 10px 12px; }
/* 行内代码:与 .inline-code 统一成一套(monospace + 淡紫底 + 圆角) */
.lesson-card code, .inline-code, .tip code, .qc-a code, .points code {
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  background: rgba(99, 102, 241, .10); border: 1px solid rgba(99, 102, 241, .2);
  padding: 1px 6px; border-radius: 7px; font-size: .9em; font-weight: 600;
  color: var(--primary); white-space: normal;
}
.code-fig code, pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; font-weight: inherit; }

/* ---- ③ 表格:表头分层、斑马纹、单元格留白、窄屏可横向滚动 ---- */
.tbl-wrap { margin: 16px 0; overflow-x: auto; border-radius: 12px; }
table.tbl {
  border-collapse: separate; border-spacing: 0; width: 100%; margin: 0;
  font-size: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
table.tbl th, table.tbl td { border: 0; border-top: 1px solid var(--border); padding: 11px 14px; text-align: left; vertical-align: top; }
table.tbl thead th, table.tbl tr:first-child th { border-top: 0; }
table.tbl th {
  background: var(--surface-2); font-weight: 800; font-size: 13.5px; color: var(--text);
  border-bottom: 2px solid rgba(99, 102, 241, .35); white-space: nowrap;
}
table.tbl td { line-height: 1.75; color: var(--text-2); }
table.tbl tbody tr:nth-child(even) td, table.tbl tr:nth-child(even) td { background: rgba(99, 102, 241, .035); }
table.tbl td:first-child { color: var(--text); font-weight: 700; }
table.tbl code { white-space: nowrap; }
table.tbl .tbl-note { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
@media (max-width: 620px) {
  table.tbl { font-size: 13px; }
  table.tbl th, table.tbl td { padding: 9px 11px; }
}

/* 表格填空(pickfill/tablefill 用)沿用同一套样式 */
.tf-table { width: 100%; margin-top: 6px; }

.lesson-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 10px 18px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); transition: all .15s;
}
.pager-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.pager-btn.primary { background: var(--grad-main); color: #fff; border: 0; }
.pager-btn.primary:hover { filter: brightness(1.08); color: #fff; }

/* ---------- 运行区(右侧面板) ---------- */
.run-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
/* 运行面板头部:左侧是示例切换标签,右侧是"运行 / 单步执行"按钮。
   一节里合并了多个示例时标签会很长(第 11 章 11.1 有 4 个、第 12 章 12.2 有 5 个),
   所以:换行而不是硬挤 —— 标签在自己的区域内换行,按钮永不收缩、文字不折行。 */
.run-panel .rp-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px;
}
.run-panel .rp-head .rp-ico { font-size: 16px; }
.run-panel .rp-head .spacer { flex: 1; }
.run-panel .rp-head .ex-switch {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.run-panel .rp-head .run-btn { flex: 0 0 auto; white-space: nowrap; }
.run-panel .rp-body { padding: 14px; }
.run-panel .rp-tip { font-size: 12px; color: var(--text-2); padding: 8px 16px 12px; }

/* 内联示例:运行区直接嵌在正文中间(见 0.6「你的第一个 C 程序」) */
.example-inline { margin: 18px 0 16px; }
.example-inline .run-panel { box-shadow: none; border-color: var(--border); }
.example-inline .run-panel .rp-tip { padding-bottom: 10px; }

/* ---------- 示例代码块(嵌入) ---------- */
.example-block { margin: 16px 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.example-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.example-head .ex-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.example-head .ex-title::before { content: "▸"; color: var(--accent); }
.example-head .spacer { flex: 1; }
.run-btn {
  border: 0; background: var(--grad-main); color: #fff; font-weight: 700;
  padding: 8px 18px; border-radius: 10px; cursor: pointer; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
  box-shadow: 0 3px 10px rgba(99, 102, 241, .3);
}
.run-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.run-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* 服务器真实编译按钮:仅在服务器提供该能力时显示(body.has-server 由 runner.js 添加) */
.server-btn { display: none; background: linear-gradient(120deg, #0ea5e9, #6366f1); }
body.has-server .server-btn { display: inline-flex; }
.server-tip { display: none; }
body.has-server .server-tip { display: inline; }
.stdin-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface); border-top: 1px solid var(--border); font-size: 13px; }
.stdin-row label { color: var(--text-2); white-space: nowrap; font-weight: 600; }
.stdin-row input {
  flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 6px 11px; border-radius: 8px; font-family: inherit; font-size: 13px;
}
.stdin-row input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.stdout {
  background: var(--code-bg); color: var(--code-text);
  padding: 14px 16px; margin: 0; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto;
  display: none;
}
.stdout.show { display: block; }
.stdout.err { color: var(--out-err); }
.stdout .meta { color: var(--out-meta); font-size: 12px; margin-bottom: 8px; }
.stdout.ok .meta { color: var(--out-ok); }
.expect-row { padding: 7px 14px 11px; font-size: 13px; color: var(--text-2); }
.expect-row summary { cursor: pointer; user-select: none; font-weight: 600; }
.expect-row pre { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; white-space: pre-wrap; }

/* ---------- 代码编辑器 ---------- */
.editor-box { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--code-bg); }
.editor-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-2);
}
.editor-bar .dots { display: flex; gap: 5px; }
.editor-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.editor-bar .dots i:nth-child(1) { background: #f87171; }
.editor-bar .dots i:nth-child(2) { background: #fbbf24; }
.editor-bar .dots i:nth-child(3) { background: #34d399; }
.editor-bar .fname { margin-left: 8px; font-weight: 600; }
.editor-wrap { position: relative; display: flex; background: var(--code-bg); }
.editor-gutter {
  width: 46px; flex-shrink: 0; overflow: hidden;
  background: var(--code-gutter-bg);
  color: var(--code-gutter-text); text-align: right; padding: 12px 8px 12px 0;
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.6; user-select: none;
  white-space: pre;
}
.editor-scroll { position: relative; flex: 1; min-width: 0; }

/* ---------- 代码编辑器的两层重叠(底层 <pre> 高亮 + 上层透明 <textarea>) ----------
   ⚠️ 这两层只要"字宽度量"有一点点不一样,光标与选区就会和看到的字符错位
   (曾经踩过:.editor-ta 写了 font-family: inherit → 退回正文字体,和等宽的高亮层
   每个字符宽度都不同,点哪儿都不是哪儿)。
   所以:所有影响字符宽度的属性统一写在这条共享规则里,要改就两层一起改。 */
.editor-pre, .editor-ta {
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.6; font-weight: 400;
  letter-spacing: normal; word-spacing: normal;
  font-variant-ligatures: none;   /* 连字(-> != 之类)会把多字符合成一个字形,必然错位 */
  font-kerning: none;
  tab-size: 4; -moz-tab-size: 4;
  white-space: pre;               /* 两层都不折行,靠同步横向滚动 */
  margin: 0; padding: 12px 14px;
}
.editor-pre {
  min-height: 120px;
  color: var(--code-text);
  /* overflow 不能省:必须是"可被程序滚动的容器",JS 才能把 textarea 的
     scrollTop/scrollLeft 同步过来,否则长行横向滚动时高亮层不动 → 错位 */
  overflow: hidden;
}
.editor-pre .tok-kw { color: var(--tok-kw); font-weight: 600; }
.editor-pre .tok-type { color: var(--tok-type); }
.editor-pre .tok-num { color: var(--tok-num); }
.editor-pre .tok-str { color: var(--tok-str); }
.editor-pre .tok-comment { color: var(--tok-comment); font-style: italic; }
.editor-pre .tok-pp { color: var(--tok-pp); }
.editor-pre .tok-op { color: var(--tok-op); }
.editor-pre .tok-blank {
  background: var(--tok-blank-bg);
  color: var(--tok-blank-text); border-bottom: 2px solid #f59e0b;
  border-radius: 3px; font-weight: 700;
}
.editor-ta {
  position: absolute; inset: 0;
  background: transparent; color: transparent; caret-color: var(--code-caret);
  border: 0; outline: 0; resize: none; overflow: auto;
  /* 字体/字号/行高/内边距/空白处理都由上面的共享规则给出,这里不要再覆盖 */
}
.editor-ta::selection { background: var(--code-selection); color: transparent; }
.editor-ta:focus { box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .6); }

/* ---------- 测验 ---------- */
.quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 30px; box-shadow: var(--shadow); }
.quiz-card h2 { margin: 0 0 6px; font-size: 22px; }
.quiz-card .quiz-sub { color: var(--text-2); font-size: 14px; margin: 0 0 18px; }
.q-item { padding: 16px 0; border-top: 1px solid var(--border); }
.q-item:first-of-type { border-top: 0; }
.q-text { font-weight: 700; margin-bottom: 12px; font-size: 15px; }
.q-text code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .92em; color: var(--primary); }
.q-opts { display: flex; flex-direction: column; gap: 8px; }
.q-opt {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px;
  cursor: pointer; transition: all .15s; font-size: 14px;
}
.q-opt:hover { background: var(--surface-2); border-color: var(--primary); }
.q-opt .tag {
  font-weight: 800; color: var(--text-2); min-width: 20px; height: 20px;
  border: 1.5px solid var(--border); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.q-opt.selected { border-color: var(--primary); background: var(--grad-soft); }
.q-opt.selected .tag { background: var(--primary); border-color: var(--primary); color: #fff; }
/* 选项文字保留空格(有些题目靠"前面/后面有没有空格"来区分,HTML 默认会把空格折叠掉) */
.q-opt .q-opt-txt { white-space: pre-wrap; }
/* 选项与解析里的内联标记(课程内容会写 <code>/<strong>):与题干的 <code> 保持同一套样式 */
.q-opt code, .q-explain code, .q-explain strong {
  background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .92em; color: var(--primary);
}
.q-explain strong { background: transparent; font-weight: 700; }
.q-opt.correct { border-color: var(--success); background: rgba(16, 185, 129, .1); }
.q-opt.correct .tag { background: var(--success); border-color: var(--success); color: #fff; }
.q-opt.wrong { border-color: var(--danger); background: rgba(239, 68, 68, .08); }
.q-opt.wrong .tag { background: var(--danger); border-color: var(--danger); color: #fff; }
.q-opt.locked { pointer-events: none; opacity: .78; }
.q-feedback { margin-top: 10px; font-size: 14px; border-radius: 10px; padding: 10px 14px; display: none; }
.q-feedback.show { display: block; }
.q-feedback.good { background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .35); }
.q-feedback.bad { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); }
.q-feedback .q-explain { color: var(--text-2); margin-top: 4px; font-size: 13px; }

/* 章末测验的混合题型:题干前的题型标签 + 填空/计算/输出预测的作答行 + 作答进度 */
.q-text .q-type {
  display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--primary);
  background: rgba(99, 102, 241, .12); border: 1px solid rgba(99, 102, 241, .3);
  border-radius: 999px; padding: 1px 8px; margin-right: 5px; transform: translateY(-1px);
}
.quiz-card .quiz-progress {
  font-size: 12.5px; color: var(--text-2); margin: -6px 0 10px; font-weight: 700;
}
.quiz-result .score-detail { font-size: 13px; color: var(--text-2); margin: 6px 0 12px; }
.qz-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.qz-line .qz-eq { color: var(--text-2); font-weight: 700; font-size: 13.5px; }
.qz-in {
  flex: 1; min-width: 180px; max-width: 420px; padding: 9px 12px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
}
.qz-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.qz-in.ok { border-color: var(--success); background: rgba(16, 185, 129, .08); }
.qz-in.bad { border-color: var(--danger); background: rgba(239, 68, 68, .08); }
.qz-submit { flex-shrink: 0; }
.q-multichoice .q-opt.selected { border-color: var(--primary); background: var(--grad-soft); }
.q-multichoice .q-opt.selected .tag { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ================= 扩展互动方式:计算题 / 多选 / 表格填空 / 找不同 / 选填 / 单步预测 =================
   见 docs/互动方式扩展方案.md */
.sheet-card .sheet-body-list { margin-top: 6px; }
.sheet-btns { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.sheet-result { display: none; margin-top: 12px; }
.sheet-result.show { display: block; }
.sheet-items { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sheet-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 13.5px;
}
.sheet-item.si-ok { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .06); }
.sheet-item.si-bad { border-color: rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .06); }
.sheet-item .si-q { font-weight: 600; }
.sheet-item .si-ans { color: var(--text-2); }
.sheet-item .si-exp { flex-basis: 100%; color: var(--text-2); font-size: 13px; }
.sheet-item .si-exp code, .sheet-item .si-ans code {
  background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .92em; color: var(--primary);
}

/* 计算题 / 单步预测的作答行 */
.calc-item { padding: 12px 0; border-top: 1px dashed var(--border); }
.calc-item:first-child { border-top: 0; }
.calc-q { font-weight: 600; margin-bottom: 8px; font-size: 14.5px; }
.calc-q code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .92em; color: var(--primary); }
.calc-line { display: flex; align-items: center; gap: 8px; }
.calc-eq { color: var(--text-2); font-weight: 700; }
.calc-in {
  width: 190px; max-width: 60vw; padding: 8px 12px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
}
.calc-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.calc-in.ok { border-color: var(--success); background: rgba(16, 185, 129, .08); }
.calc-in.bad { border-color: var(--danger); background: rgba(239, 68, 68, .08); }
.calc-unit { color: var(--text-2); font-size: 13px; }

/* 多选:选中态用主色,判分后与单选一致(对=绿、错=红) */
.mc-opt.selected { border-color: var(--primary); background: var(--grad-soft); }
.mc-opt.selected .tag { background: var(--primary); border-color: var(--primary); color: #fff; }
.mc-submit { margin-top: 10px; }
.mc-item .q-feedback { display: none; }
.mc-item .q-feedback.show { display: block; }

/* 表格填空 */
.tf-table { width: 100%; margin-top: 6px; }
.tf-table td { vertical-align: middle; }
.tf-cell { white-space: nowrap; }
.tf-in {
  width: 130px; max-width: 40vw; padding: 6px 10px; font-size: 14px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.tf-in:focus { outline: none; border-color: var(--primary); }
.tf-in.ok { border-color: var(--success); background: rgba(16, 185, 129, .08); }
.tf-in.bad { border-color: var(--danger); background: rgba(239, 68, 68, .08); }
.tf-row-bad td { background: rgba(239, 68, 68, .05); }
.tf-unit { color: var(--text-2); font-size: 12.5px; margin-left: 4px; }

/* 找不同 */
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
@media (max-width: 720px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-col { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.diff-head { padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--border); }
.diff-code { margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.diff-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.diff-pick {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.diff-pick:hover { border-color: var(--primary); }
.diff-pick.picked { border-color: var(--primary); background: var(--grad-soft); }
.diff-pick.correct { border-color: var(--success); background: rgba(16, 185, 129, .12); color: var(--success); }
.diff-pick.wrong { border-color: var(--danger); background: rgba(239, 68, 68, .1); color: var(--danger); }
.diff-pick.locked { pointer-events: none; opacity: .8; }
.diff-reason { margin-top: 6px; }

/* 选填:候选片段 */
.pick-bank {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2);
}
.pick-bank .pk-title { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pk-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer;
}
.pk-chip:hover { border-color: var(--primary); background: var(--grad-soft); }

/* 单步预测:只读代码块 */
.stepquiz-code { margin-bottom: 12px; }
.sq-code-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--text-2); font-weight: 700; }
.sq-code-head .spacer { flex: 1; }
.code-static {
  margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; line-height: 1.65; overflow-x: auto; white-space: pre;
}

.quiz-result { text-align: center; padding: 10px 0 4px; }
.quiz-result .score-big { font-size: 42px; font-weight: 800; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quiz-result .score-sub { color: var(--text-2); margin-bottom: 14px; }
.quiz-result .quiz-retry { margin-bottom: 6px; }

/* ---------- 挑战 ---------- */
.challenge-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 24px 26px; box-shadow: var(--shadow);
  border-top: 3px solid var(--accent);
}
.challenge-card h3 { margin: 0 0 10px; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.challenge-card .ch-desc { color: var(--text-2); margin: 0 0 14px; }

/* ---------- 练习台 / 示例库 ---------- */
.playground-layout { display: flex; flex-direction: column; gap: 16px; }
.pg-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); }
.pg-panel h3 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.pg-output {
  background: var(--code-bg); color: var(--code-text); border-radius: 12px;
  padding: 16px; font-size: 13.5px; line-height: 1.6; min-height: 200px; max-height: 460px; overflow: auto;
  white-space: pre-wrap; word-break: break-all; margin: 0;
}
.pg-output .meta { color: var(--out-meta); margin-bottom: 10px; font-size: 12px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ex-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; cursor: pointer; transition: all .18s; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.ex-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.ex-card .ex-tag {
  align-self: flex-start; font-size: 12px; color: var(--primary); background: var(--grad-soft);
  padding: 2px 11px; border-radius: 999px; font-weight: 700;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.ex-card h4 { margin: 0; font-size: 15px; }
.ex-card p { margin: 0; color: var(--text-2); font-size: 13px; flex: 1; }
.ex-card .ex-load { color: var(--primary); font-size: 13px; font-weight: 700; }
.examples-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.examples-head h1 { margin: 0; }
.examples-head .filter { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.filter-btn.active { background: var(--grad-main); color: #fff; border-color: transparent; }
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.active:hover { color: #fff; }

/* ---------- 关于页 ---------- */
.page-head { margin-bottom: 26px; }
.page-head .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--primary); font-weight: 700;
  background: var(--grad-soft); padding: 4px 13px; border-radius: 999px; margin-bottom: 12px;
}
.page-head h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.3; }
.page-head .summary { color: var(--text-2); font-size: 15px; margin: 0; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 18px 0; }
/* 关于页底部：折叠的"最近更新"与一行技术栈说明 */
.about-more { padding: 0; }
.about-more > summary {
  cursor: pointer; padding: 16px 22px; font-size: 15px; color: var(--text-2);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.about-more > summary::-webkit-details-marker { display: none; }
.about-more > summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
.about-more[open] > summary::after { transform: rotate(180deg); }
.about-more > *:not(summary) { margin: 0 22px 16px; }
.about-foot { margin: 16px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.8; }
.about-foot code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; color: var(--primary); }
.about-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); }
.about-card h3 { margin: 0 0 8px; font-size: 16px; }
.about-card p { margin: 6px 0; font-size: 14px; color: var(--text-2); }
.about-card code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 13px; color: var(--primary); }
/* 关于页的"最近更新"时间线 */
.about-log { list-style: none; padding: 0; margin: 10px 0 0; }
.about-log li {
  position: relative; padding: 0 0 12px 18px; font-size: 14px; color: var(--text-2); line-height: 1.7;
}
.about-log li::before {
  content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--grad-main);
}
.about-log li::after {
  content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--border);
}
.about-log li:last-child { padding-bottom: 0; }
.about-log li:last-child::after { display: none; }
.about-log strong { color: var(--text); }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--border); background: var(--surface);
  text-align: center; padding: 20px; color: var(--text-2); font-size: 13px;
}

/* ================= 登录 / 账号 ================= */
.login-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #d946ef 100%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow: auto;
}
.login-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: 20px; padding: 30px 30px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; margin-bottom: 6px; }
.login-sub { color: var(--text-2); font-size: 13.5px; margin: 0 0 20px; line-height: 1.7; }
.login-sub b { color: var(--primary); }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.login-field input {
  width: 100%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 11px 14px; border-radius: 11px; font-size: 15px; font-family: inherit;
}
.login-field input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.login-btn {
  width: 100%; border: 0; background: var(--grad-main); color: #fff;
  padding: 13px; border-radius: 12px; font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: inherit; margin-top: 6px;
  box-shadow: 0 6px 20px rgba(99, 102, 241, .35);
}
.login-btn:hover { filter: brightness(1.07); }
.login-btn:disabled { opacity: .6; cursor: wait; }
.login-btn.ghost { background: var(--surface-2); color: var(--text-2); box-shadow: none; }
.login-msg { display: none; font-size: 13.5px; padding: 9px 13px; border-radius: 10px; margin-bottom: 12px; }
.login-msg.show { display: block; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); color: var(--danger); }
.login-tip { text-align: center; color: var(--text-2); font-size: 12.5px; margin: 14px 0 0; }
/* 游客浏览入口 */
.login-btn.ghost#loginGuest { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--primary); }
.login-note {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  background: var(--grad-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
/* ---------- 小号按钮(全站统一)----------
   用它的人:顶栏游客区的「🔑 登录」、我的报告页的导出/导入/登录、教师后台的一排操作按钮。
   历史事故:这里只写了 `.btn-sm.primary`,于是**裸 `.btn-sm` 什么都没写** ——
   那些按钮直接露出浏览器默认按钮(灰底 3D 边框、字体也不对),和整站风格明显不符(老师反馈)。 */
.btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 10px; font-size: 13px; font-weight: 700;
  font-family: inherit; line-height: 1.5; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn-sm:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-sm:active { transform: translateY(0); }
.btn-sm:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-sm.primary { background: var(--grad-main); color: #fff; border: 0; box-shadow: 0 3px 10px rgba(99, 102, 241, .3); }
.btn-sm.primary:hover { background: var(--grad-main); color: #fff; border: 0; filter: brightness(1.08); }

/* 游客状态顶栏 */
.guest-bar { display: inline-flex; align-items: center; gap: 8px; }
.guest-tag {
  font-size: 12.5px; padding: 3px 10px; border-radius: 99px; cursor: help;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.guest-bar .btn-sm { white-space: nowrap; }

/* 顶栏用户菜单 */
.usermenu { position: relative; }
.usermenu-btn {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 5px 11px 5px 5px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13.5px;
}
.usermenu-btn:hover { background: var(--surface-2); }
.um-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad-main); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.um-name { font-weight: 600; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-caret { color: var(--text-2); font-size: 10px; }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .18); padding: 8px;
  display: none; z-index: 300;
}
.usermenu-pop.show { display: block; }
.um-info { padding: 6px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.um-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.um-row span { color: var(--text-2); }
.um-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--text); padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; font-family: inherit;
}
.um-item:hover { background: var(--surface-2); }
.um-item.danger { color: var(--danger); }

/* ================= 排行榜 ================= */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 18px; box-shadow: var(--shadow);
}
.lb-row.me { border-color: var(--primary); background: var(--grad-soft); }
.lb-row.idle { opacity: .62; }

/* ---------- 排行榜 v2：榜单切换 / 领奖台 / 我的名次卡 / 追赶目标 ---------- */
.lb-boards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lb-board {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 13.5px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.lb-board:hover { border-color: var(--primary); color: var(--primary); }
.lb-board.on { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.lb-note { margin: 0 0 14px; font-size: 12.5px; color: var(--text-2); }

/* 领奖台：每张都是完整的圆角卡片（不要"直角+地面线"，那会让人以为卡片被下面截断了） */
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 6px 0 26px; }
.lb-pod {
  flex: 1 1 0; min-width: 0; max-width: 210px; text-align: center; padding: 16px 12px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow);
}
.lb-pod-1 { padding-top: 22px; border-color: var(--primary); }
/* 班里人少时别让单张卡孤零零地悬在中间：按人数放宽 */
.lb-podium.c1 .lb-pod { max-width: 360px; padding: 24px 20px; }
.lb-podium.c2 .lb-pod { max-width: 260px; }
.lb-pod.me { border-color: var(--primary); background: var(--grad-soft); }
.lb-pod-medal { font-size: 30px; line-height: 1.1; }
.lb-pod-name { font-weight: 800; margin-top: 4px; font-size: 15px; }
.lb-pod-val { font-weight: 800; font-size: 20px; color: var(--primary); margin-top: 4px; }
.lb-pod-val span { font-size: 12px; color: var(--text-2); font-weight: 600; }
.lb-pod-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

.lb-unit { font-size: 11px; color: var(--text-2); font-weight: 600; }
.lb-mine {
  margin-top: 20px; padding: 16px 18px; border-radius: 16px; text-align: center;
  border: 1px solid var(--primary); background: var(--grad-soft);
}
.lb-mine-main { font-size: 15px; }
.lb-mine-rank b { font-size: 22px; color: var(--primary); }
.lb-mine-of { color: var(--text-2); font-size: 13px; }
.lb-mine-chase { margin-top: 8px; font-size: 14px; }
.lb-mine-chase b { color: var(--primary); }
.lb-mine-chase.good { color: var(--success, #2c9468); font-weight: 700; }
.lb-mine .lb-go { margin-top: 12px; }
.lb-mine-hint { margin-top: 10px; font-size: 12px; color: var(--text-2); }

.lb-rank { font-size: 17px; font-weight: 800; width: 34px; text-align: center; }
.lb-name { font-weight: 700; min-width: 90px; }
.lb-me {
  font-size: 11px; background: var(--primary); color: #fff;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px; font-weight: 700;
}
.lb-lv { font-size: 12.5px; color: var(--text-2); min-width: 52px; }
.lb-bar { flex: 1; height: 9px; background: var(--surface-3); border-radius: 999px; overflow: hidden; min-width: 60px; }
.lb-bar i { display: block; height: 100%; background: var(--grad-main); border-radius: 999px; }
.lb-xp { font-weight: 800; font-size: 14px; min-width: 78px; text-align: right; }
.lb-sub { font-size: 12px; color: var(--text-2); min-width: 84px; text-align: right; }
.lb-mine { text-align: center; margin-top: 18px; color: var(--text-2); font-size: 14px; }
.lb-mine b { color: var(--primary); font-size: 17px; }

@media (max-width: 640px) {
  /* 窄屏：领奖台换行成独立卡片（不再有"地面线"），列表行折成两行，避免横向溢出被裁 */
  .lb-podium { flex-wrap: wrap; gap: 8px; border-bottom: 0; }
  .lb-pod { flex: 1 1 45%; max-width: none; padding: 12px 8px; border: 1px solid var(--border); border-radius: 14px; }
  .lb-pod-1 { padding-top: 12px; }
  .lb-pod-val { font-size: 17px; }
  .lb-pod-sub { display: none; }
  .lb-row { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .lb-name { min-width: 0; flex: 1 1 auto; }
  .lb-lv { min-width: 0; }
  .lb-bar { flex: 1 1 100%; order: 5; }
  .lb-xp { min-width: 0; }
  .lb-sub { display: none; }
  .lb-mine { padding: 14px 12px; }
  .lb-mine-of { display: block; margin-top: 2px; }
  .rp-rank { align-items: flex-start; row-gap: 6px; }
  .rp-rank-more { margin-left: 0; }
}

/* ---------- 教师端：账号管理 v2 ---------- */
.acc-import { padding: 0; }
.acc-import > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.acc-import > summary::-webkit-details-marker { display: none; }
.acc-import > summary::after { content: '▾'; margin-left: auto; color: var(--text-2); transition: transform .2s; }
.acc-import[open] > summary::after { transform: rotate(180deg); }
.acc-import > *:not(summary) { margin: 0 16px 12px; }
.acc-import .t-textarea { width: calc(100% - 32px); }
.acc-preview { max-height: 340px; overflow: auto; }
.acc-row-create td { background: rgba(53, 179, 126, .07); }
.acc-row-reset td { background: rgba(230, 160, 40, .08); }
.acc-row-skip td { opacity: .65; }
.acc-row-warn td { background: rgba(230, 160, 40, .06); }
.acc-row-err td { background: rgba(224, 83, 83, .09); }
.acc-result { border-color: var(--primary); }
.acc-pw { font-family: Consolas, "Courier New", monospace; letter-spacing: .4px; }
.acc-st {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.acc-st-ok { background: rgba(53, 179, 126, .16); color: #2c9468; }
.acc-st-warn { background: rgba(230, 160, 40, .18); color: #b4770c; }
.acc-st-new { background: rgba(120, 130, 170, .16); color: var(--text-2); }
.acc-chip { border-radius: 999px; }
.acc-chip.on { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.acc-tick { width: 34px; text-align: center; }
.acc-checkall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.acc-checkall input { width: 15px; height: 15px; }

/* 首页游客提示条（首次进站不再弹登录框，改用它说明"进度不保存"） */
.guest-tip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--primary); background: var(--grad-soft);
  font-size: 14px; box-shadow: var(--shadow);
}
.guest-tip .gt-ico { font-size: 18px; }
.guest-tip .gt-txt { flex: 1 1 240px; min-width: 0; }
.guest-tip .btn-sm { flex: 0 0 auto; }

/* 管理后台：概览卡片与小工具条 */
.adm-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.adm-row { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: 13.5px; }
.adm-k { color: var(--text-2); }
.adm-v { font-weight: 700; text-align: right; }
.adm-logline { font-size: 13px; margin: 4px 0; }
.t-select-sm { padding: 4px 8px; font-size: 12.5px; }

/* ================= 教师后台 ================= */
.t-loading, .t-empty { padding: 40px; text-align: center; color: var(--text-2); font-size: 14px; }
.t-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.t-toolbar2 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.t-spacer { flex: 1; }
.t-label { font-weight: 600; color: var(--text-2); font-size: 14px; }
.t-select, .t-input, .t-search {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 8px 12px; border-radius: 10px; font-size: 14px; font-family: inherit;
}
.t-search { min-width: 240px; }
.t-select:focus, .t-input:focus, .t-search:focus { outline: 0; border-color: var(--primary); }
.t-hint { color: var(--text-2); font-size: 13px; line-height: 1.7; }
.t-textarea {
  width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 12px 14px; border-radius: 12px; font-size: 14px; font-family: Consolas, monospace;
  resize: vertical; line-height: 1.7;
}
.t-textarea:focus { outline: 0; border-color: var(--primary); }
.t-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.t-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow); text-align: center;
}
.t-stat .ts-ico { font-size: 20px; }
.t-stat .ts-val { font-size: 20px; font-weight: 800; margin: 2px 0; }
.t-stat .ts-label { font-size: 12.5px; color: var(--text-2); }
.t-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.t-tab {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit;
}
.t-tab:hover { background: var(--surface-2); }
.t-tab.active { background: var(--grad-main); color: #fff; border-color: transparent; }
.t-body { min-height: 200px; }
.t-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.t-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.t-table th, .t-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.t-table th {
  background: var(--surface-2); font-weight: 700; position: sticky; top: 0;
  cursor: pointer; user-select: none; font-size: 13px;
}
.t-table th.sorted { color: var(--primary); }
.t-table tbody tr:hover { background: var(--surface-2); }
.t-table tbody tr:last-child td { border-bottom: 0; }
.t-dim { color: var(--text-2); font-size: 12.5px; white-space: normal; }
.t-warn { color: var(--danger); font-weight: 700; }
.t-stars { letter-spacing: -2px; }
.t-link { color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: none; }
.t-link:hover { text-decoration: underline; }
.t-ops { display: flex; gap: 6px; }
.t-op {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-family: inherit;
}
.t-op:hover { border-color: var(--primary); color: var(--primary); }
.t-op.danger:hover { border-color: var(--danger); color: var(--danger); }
.t-empty-cell { text-align: center; color: var(--text-2); padding: 30px !important; }
.t-q { white-space: normal; max-width: 460px; font-size: 13px; }
.t-form { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
.t-formrow { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.t-formrow label { min-width: 76px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.t-modal-sub { font-size: 15px; margin: 20px 0 10px; }
.t-bars { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.t-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.t-bar-label { min-width: 170px; }
.t-bar { flex: 1; height: 14px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.t-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 999px; }
.t-bar-num { min-width: 60px; text-align: right; color: var(--text-2); }
.t-modal { background: rgba(10, 14, 30, .55); align-items: flex-start; padding: 40px 16px; }
.t-modal-card {
  width: 100%; max-width: 900px; background: var(--surface); border-radius: 18px;
  padding: 22px 26px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); max-height: 86vh; overflow: auto;
}
.t-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 16px; }
.t-modal-head b { font-size: 18px; }
.t-modal-head span { color: var(--text-2); font-size: 13.5px; }
.t-modal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.t-modal-stats .t-stat { padding: 10px 8px; }
.t-modal-stats .ts-val { font-size: 17px; }
.t-wronglist { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.9; color: var(--text-2); }

/* ---------- 教师端：薄弱点分析 v2 ---------- */
.t-ana-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.t-ana-dims { display: flex; flex-wrap: wrap; gap: 8px; }
.t-ana-dim {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 13.5px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.t-ana-dim:hover { border-color: var(--primary); color: var(--primary); }
.t-ana-dim.on { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.t-weak {
  display: inline-block; min-width: 34px; padding: 3px 8px; border-radius: 8px;
  font-weight: 700; font-size: 13.5px; text-align: center;
}
.t-weak.ok { background: rgba(53, 179, 126, .16); color: #2c9468; }
.t-weak.mid { background: rgba(230, 160, 40, .18); color: #b4770c; }
.t-weak.bad { background: rgba(224, 83, 83, .18); color: #c94444; }
.t-bar-mini { display: block; height: 5px; margin-top: 5px; min-width: 54px; }
.t-bar-mini i { display: block; height: 100%; border-radius: 3px; background: var(--grad-main); }
.t-table details summary { cursor: pointer; color: var(--primary); }
.t-table details > div { max-width: 220px; white-space: normal; line-height: 1.7; }

@media (max-width: 640px) {
  .um-name { display: none; }
  .t-bar-label { min-width: 110px; font-size: 12.5px; }
  .t-search { min-width: 150px; flex: 1; }
  .lb-sub { display: none; }
}

/* ---------- 游戏化:等级条 / 徽章墙 ---------- */
.home-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 22px; }
.wb-list { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 错题本 v2：概览 + 工具条 + 按章分组 + 就地重做 ---------- */
.wb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.wb-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); text-align: center;
}
.wb-stat b { font-size: 22px; line-height: 1.2; }
.wb-stat span { font-size: 12px; color: var(--text-2); }

.wb-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 12px 14px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  position: sticky; top: 8px; z-index: 5;
}
.wb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-bar .wb-chip {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.wb-bar .wb-chip:hover { border-color: var(--primary); color: var(--primary); }
.wb-bar .wb-chip.on { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.wb-bar-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wb-select, .wb-search {
  height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit;
}
.wb-search { min-width: 168px; }
.wb-select:focus, .wb-search:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.wb-count { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.wb-toggle {
  height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); font-size: 13px; cursor: pointer; font-family: inherit;
}
.wb-toggle.on { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }

.wb-group { margin-bottom: 18px; }
.wb-group-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  padding-left: 4px; font-size: 15px;
}
.wb-group-title { font-weight: 700; }
.wb-group-head::before { content: ''; width: 4px; height: 15px; border-radius: 2px; background: var(--grad-main); }
.wb-group-n { font-size: 12px; color: var(--text-2); font-weight: 400; }
.wb-items { display: flex; flex-direction: column; gap: 12px; }

.wb-item { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 14px 16px; }
.wb-item[hidden] { display: none; }
.wb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.wb-chip-type { background: var(--grad-soft); color: var(--primary); font-weight: 700; }
.wb-where { font-size: 12.5px; color: var(--text-2); }
.wb-times {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 99, 99, .12); color: #e05353;
}
.wb-when { margin-left: auto; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.wb-q { font-size: 15px; line-height: 1.75; margin-bottom: 10px; }
.wb-q code, .wb-explain code { padding: 1px 5px; border-radius: 6px; background: var(--code-bg, rgba(127,127,127,.14)); font-size: .92em; }

.wb-opts { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-opt {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; line-height: 1.6;
}
.wb-opt b {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; text-align: center;
  line-height: 20px; font-size: 12px; background: var(--grad-soft); color: var(--primary);
}
.wb-opt.right { border-color: #35b37e; background: rgba(53, 179, 126, .10); }
.wb-opt.wrong { border-color: #e05353; background: rgba(224, 83, 83, .10); }
.wb-opt em { font-style: normal; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.wb-tag-right { background: rgba(53, 179, 126, .18); color: #2c9468; }
.wb-tag-mine { background: rgba(224, 83, 83, .18); color: #c94444; }

.wb-answer { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.wb-mine b { color: #c94444; }
.wb-right-ans b { color: #2c9468; }
.wb-explain {
  margin: 8px 0 2px; padding: 10px 12px; border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0; background: var(--bg); font-size: 13.5px; line-height: 1.75;
}
.wb-explain-h { font-weight: 700; color: var(--primary); margin-right: 6px; }

.wb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wb-redo-box {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--bg);
}
.wb-redo-box[hidden] { display: none; }
.wb-redo-opt {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: 14px; line-height: 1.6; cursor: pointer; font-family: inherit;
}
.wb-redo-opt:hover { border-color: var(--primary); }
.wb-redo-opt b {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; text-align: center;
  line-height: 20px; font-size: 12px; background: var(--grad-soft); color: var(--primary);
}
.wb-redo-opt.on { border-color: var(--primary); background: var(--grad-soft); }
.wb-redo-opt.locked { cursor: default; opacity: .92; }
.wb-redo-opt.right { border-color: #35b37e; background: rgba(53, 179, 126, .12); }
.wb-redo-opt.wrong { border-color: #e05353; background: rgba(224, 83, 83, .12); }
.wb-redo-fb { font-size: 13.5px; }
.wb-redo-fb.good { color: #2c9468; font-weight: 700; }
.wb-redo-fb.bad { color: #c94444; }
.wb-link {
  align-self: flex-start; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--primary); font-size: 13px; font-family: inherit; text-decoration: underline;
}
.wb-none { text-align: center; color: var(--text-2); }

.wb-empty { text-align: center; padding: 34px 18px; }
.wb-empty-ico { font-size: 40px; margin: 0 0 6px; }
.wb-empty-hint { color: var(--text-2); font-size: 13.5px; }
.wb-empty-hint a { color: var(--primary); cursor: pointer; text-decoration: underline; }
.wb-empty-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 720px) {
  .wb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-bar { position: static; }
  .wb-bar-right { width: 100%; }
  .wb-search { flex: 1 1 100%; }
}

.progress-strip .ps-level {
  font-weight: 800; font-size: 15px; white-space: nowrap;
  background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 徽章墙:首页里紧跟在"星图"下面,默认折叠成一行。
   老师定的位置:等级条 → 星图 → 徽章墙(收起)→ 章节卡片 —— 游戏化信息排成一条,
   收起的徽章墙只占一行,不会把课程卡片顶下去;点开才铺开看全部徽章。
   上边距留给星图自己的下边距(22px),所以这里只写下边距。 */
.badge-wall {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px 18px; margin: 0 0 26px;
}
.badge-wall > summary.bw-title {
  font-weight: 800; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; margin-bottom: 0;
  list-style: none; outline: none;
}
.badge-wall > summary.bw-title::-webkit-details-marker { display: none; }
.badge-wall > summary.bw-title::before {
  content: "▸"; color: var(--accent); font-weight: 700; transition: transform .15s;
}
.badge-wall[open] > summary.bw-title { margin-bottom: 12px; }
.badge-wall[open] > summary.bw-title::before { content: "▾"; }
.badge-wall > summary.bw-title:hover { color: var(--accent); }
.badge-wall .bw-hint { font-weight: 600; font-size: 12px; color: var(--text-2); margin-left: auto; }
.badge-wall .bw-title .bw-count { font-weight: 700; font-size: 12.5px; color: var(--text-2); margin-left: 6px; }
.badge-wall .bw-sub { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin: 4px 0 8px; }
.badge-wall .bw-sub .bw-count { font-weight: 700; font-size: 11.5px; color: var(--text-2); opacity: .8; margin-left: 4px; }
.badge-wall .bw-sub + .bw-list { margin-bottom: 12px; }
.badge-wall .bw-list { display: flex; gap: 8px; flex-wrap: wrap; }
.bw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600;
}
.bw-badge .bw-ico { font-size: 15px; }
.bw-badge.locked { opacity: .42; filter: grayscale(1); }
.bw-badge.locked .bw-ico { filter: grayscale(1); }

/* ---------- 提示气泡 ----------
   同一个时刻可能同时冒出好几条（比如"拿到 XP"和"解锁徽章"），所以用一个竖向栈把它们排开，
   而不是各自 fixed 到同一个位置（那样会叠在一起看不清）。 */
.toast-stack {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
  z-index: 500; pointer-events: none; width: max-content; max-width: min(92vw, 640px);
}
.toast {
  background: var(--text); color: var(--bg);
  padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  max-width: 100%; text-align: center;
  transition: opacity .4s, transform .4s;
  animation: toast-in .22s ease;
}
.toast.out { opacity: 0; transform: translateY(12px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 单步执行播放器 ---------- */
.step-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 14, 30, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.step-box {
  width: min(920px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
}
.step-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 15px;
}
.step-head .step-counter { color: var(--text-2); font-weight: 600; font-size: 13px; margin-left: auto; }
.step-head .step-fn {
  font-size: 13px; font-weight: 700; color: var(--primary);
  background: var(--surface-3); border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
.step-head .step-close {
  margin-left: auto; border: 0; background: transparent; color: var(--text-2);
  font-size: 16px; cursor: pointer; padding: 4px 10px; border-radius: 8px;
}
.step-head .step-close:hover { background: var(--surface-3); color: var(--text); }
.step-body { display: grid; grid-template-columns: 1fr 300px; min-height: 0; flex: 1; }
@media (max-width: 760px) { .step-body { grid-template-columns: 1fr; } .step-side { border-left: 0 !important; border-top: 1px solid var(--border); } }
.step-code {
  padding: 14px 16px; overflow: auto; background: var(--code-bg);
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; line-height: 1.7;
}
.step-line { display: flex; border-radius: 6px; padding: 0 8px; }
.step-line .ln {
  width: 34px; flex-shrink: 0; text-align: right; margin-right: 12px;
  color: var(--code-gutter-text); user-select: none;
}
.step-line .tx { white-space: pre; color: var(--step-text); }
.step-line.active { background: var(--step-active-bg); outline: 1px solid rgba(245, 158, 11, .5); }
.step-line.active .ln { color: var(--step-active-ln); font-weight: 700; }
.step-line.active .tx { color: var(--step-active-text); }
.step-side { border-left: 1px solid var(--border); padding: 14px 16px; overflow: auto; min-height: 200px; }
.step-sub { font-size: 12px; font-weight: 800; color: var(--text-2); margin: 8px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.step-vars { width: 100%; border-collapse: collapse; font-size: 13px; }
.step-vars td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.step-vars .vn { color: var(--text-2); width: 40%; }
.step-vars .vv { font-family: Consolas, monospace; color: var(--primary); font-weight: 600; }
.step-out {
  background: var(--code-bg); color: var(--code-text); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; margin: 0; min-height: 48px;
  white-space: pre-wrap; word-break: break-all;
}
.step-ctrl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.step-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.step-btn:hover { border-color: var(--primary); color: var(--primary); }
.step-btn.primary { background: var(--grad-main); color: #fff; border: 0; }
.step-tip { color: var(--text-2); font-size: 12px; margin-left: auto; }

/* ---------- 练习反馈 / 检查结果 ---------- */
.wk-feedback { margin-top: 10px; font-size: 14px; }
.wk-good, .wk-bad {
  border-radius: 10px; padding: 10px 14px; margin-top: 8px;
}
.wk-good { background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .35); }
.wk-bad { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); }
.wk-sub { color: var(--text-2); margin-top: 4px; font-size: 13px; }
.grade-result { margin-top: 8px; }
.grade-pass, .grade-fail { font-weight: 700; margin-bottom: 8px; }
.grade-pass { color: var(--success); }
.grade-fail { color: var(--danger); }
.grade-case { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 6px 0; font-size: 13px; }
.grade-case.case-ok { border-color: rgba(16,185,129,.4); }
.grade-case.case-bad { border-color: rgba(239,68,68,.4); }
.grade-case .case-title { font-weight: 700; }
.grade-case .case-detail { color: var(--text-2); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }

/* ---------- 输出预测答案区 ---------- */
.trace-answer { margin: 14px 0; }
.trace-answer input {
  width: 100%; max-width: 340px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 9px 13px; border-radius: 10px; font-size: 14px;
}
.trace-answer input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* ---------- 乱序拼装 ---------- */
.reorder-pool, .reorder-target {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-top: 12px;
  background: var(--surface-2);
}
.reorder-target { background: var(--code-bg); }
.reorder-hint { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.reorder-chip {
  display: inline-block; margin: 3px; padding: 5px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  font-family: Consolas, monospace; font-size: 12.5px; transition: all .12s;
}
.reorder-chip:hover { border-color: var(--primary); }
.reorder-chip.picked { background: var(--grad-soft); border-color: var(--primary); color: var(--primary); }
.reorder-line {
  color: var(--code-text); font-family: Consolas, monospace; font-size: 12.5px;
  padding: 1px 4px; line-height: 1.6;
}

/* ---------- 配对连线 ---------- */
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px;
  cursor: pointer; font-size: 13.5px; transition: all .12s; background: var(--surface);
}
.match-item:hover { border-color: var(--primary); }
.match-item.sel { border-color: var(--primary); background: var(--grad-soft); font-weight: 700; }
.match-item.paired { border-color: var(--success); background: rgba(16,185,129,.1); color: var(--success); }
.match-status { font-size: 13px; color: var(--text-2); margin-top: 8px; }

/* ---------- 记忆卡 ---------- */
.fc-deck { margin: 16px 0; }
.fc-card {
  position: relative; height: 190px; cursor: pointer;
  transform-style: preserve-3d; transition: transform .4s; margin-bottom: 12px;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; padding: 20px; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.fc-front { background: var(--grad-main); color: #fff; }
.fc-back { background: var(--surface); transform: rotateY(180deg); }
.fc-label { font-size: 12px; opacity: .75; margin-bottom: 8px; font-weight: 700; }
.fc-text { font-size: 15px; line-height: 1.6; }

/* ---------- 示例切换 / 运行面板 ---------- */
.ex-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  padding: 4px 11px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
  flex: 0 0 auto; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.ex-chip.active { background: var(--grad-main); color: #fff; border-color: transparent; }
.step-btn-run { background: linear-gradient(120deg, #0ea5e9, #6366f1); box-shadow: 0 3px 10px rgba(14, 165, 233, .3); }
.step-btn-run:hover { filter: brightness(1.08); }
.check-btn { background: linear-gradient(120deg, #10b981, #06b6d4); box-shadow: 0 3px 10px rgba(16, 185, 129, .3); }
.check-btn:hover { filter: brightness(1.08); }

/* ---------- 课程目录底部 ---------- */
.ln-foot {
  margin-top: 10px; padding: 8px 10px 2px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); text-align: center;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120, 130, 170, .35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 170, .55); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 我的学习报告(学生) ---------- */
.rp-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px; margin: 0 0 20px;
}
.rp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 12px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 2px; box-shadow: var(--shadow);
}
.rp-ico { font-size: 20px; line-height: 1.2; }
.rp-num { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.rp-lbl { font-size: 12px; color: var(--text-2); }
.rp-rank {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--grad-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 0 0 20px; font-size: 14.5px;
}
.rp-rank b { color: var(--primary); font-size: 17px; }
.rp-rank-ico { font-size: 20px; }
.rp-rank-more {
  margin-left: auto; color: var(--primary); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.rp-rank-more:hover { text-decoration: underline; }
.rp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.rp-title { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.rp-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 28px minmax(110px, 1.4fr) minmax(50px, 2fr) 62px 62px 128px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; cursor: pointer; transition: border-color .2s, transform .2s;
}
.rp-row:hover { border-color: var(--primary); transform: translateY(-1px); }
.rp-emoji { font-size: 18px; text-align: center; }
.rp-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--grad-main); border-radius: 99px; }
.rp-val, .rp-star, .rp-quiz { font-size: 12.5px; color: var(--text-2); text-align: right; white-space: nowrap; }
.rp-quiz { text-align: left; line-height: 1.3; white-space: normal; }
.rp-quiz i { font-style: normal; display: block; font-weight: 700; color: var(--text); }
@media (max-width: 640px) {
  .rp-row { grid-template-columns: 24px 1fr auto; grid-auto-rows: auto; }
  .rp-bar { grid-column: 2 / -1; }
  .rp-star, .rp-quiz { text-align: left; }
}

/* ---------- 章节锁定(待开放) ---------- */
.lock-panel {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px dashed var(--border);
}
.lock-head { font-weight: 800; font-size: 15.5px; margin-bottom: 6px; }
.lock-tip { margin: 0 0 12px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.lock-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lock-item {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; padding: 5px 12px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
/* 待开放章节里"怎么才能自己解锁"的小字 */
.lock-need {
  font-style: normal; font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
  background: var(--grad-soft); color: var(--primary);
}
/* 待开放章节：只把"下一个可解锁"的章单独拎出来显示进度条，其余只列名字 */
.lock-next {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--grad-soft); border: 1px solid var(--primary);
}
.lock-next-tag { font-size: 12px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.lock-next-name { font-size: 13.5px; font-weight: 700; }
.lock-next-bar { flex: 0 1 220px; min-width: 80px; max-width: 220px; height: 7px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.lock-next-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.lock-next-meta { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.rp-row.locked { opacity: .55; }
.rp-self{display:inline-block;margin-left:8px;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--grad-soft);color:var(--primary);vertical-align:middle}
.rp-row.self-study{background:var(--grad-soft);border-color:var(--primary)}
.rp-row.locked:hover { border-color: var(--border); transform: none; }

/* 教师后台:章节开放设置(小号按钮见上面「小号按钮(全站统一)」一节) */
.lock-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
/* 学生详情里的"转入班级" */
.t-movebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.t-movebox .t-select { min-width: 200px; }
.t-movebox .t-hint { margin: 0; }
.lock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.lock-cell {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); transition: all .18s;
}
.lock-cell:hover { border-color: var(--primary); }
.lock-cell.on { background: var(--grad-soft); border-color: var(--primary); }
.lock-cell input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.lc-ico { font-size: 17px; }
.lc-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.lc-meta { font-size: 12px; color: var(--text-2); }

/* 教师后台:成绩册(按章计分) */
.gb-table { font-size: 13px; }
.gb-table th, .gb-table td { text-align: center; white-space: nowrap; }
.gb-table .gb-sticky { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.gb-table .gb-sticky2 { position: sticky; left: 78px; background: var(--surface); z-index: 2; }
.gb-table td.gb-hi { background: rgba(16, 185, 129, .16); color: var(--success); font-weight: 700; }
.gb-table td.gb-mid { background: rgba(99, 102, 241, .13); color: var(--primary); font-weight: 700; }
.gb-table td.gb-low { background: rgba(245, 158, 11, .14); color: var(--warn); font-weight: 700; }
.gb-table td.gb-bad { background: rgba(239, 68, 68, .12); color: var(--danger); font-weight: 700; }
.gb-table td.gb-off { color: var(--text-2); background: var(--surface-2); }
.gb-self{display:inline-block;margin-left:4px;font-size:10px;padding:0 4px;border-radius:99px;background:var(--grad-soft);color:var(--primary);vertical-align:middle}
.gb-legend { display: inline-block; padding: 1px 8px; border-radius: 6px; margin-right: 4px; font-weight: 700; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .lesson-main { grid-template-columns: 1fr; }
  .lesson-right { position: static; }
  .lesson-nav { position: static; }
  .lesson-layout { grid-template-columns: 1fr; }
  .ln-list { max-height: none; }
}
@media (max-width: 640px) {
  .main { padding: 18px 14px 60px; }
  .hero { padding: 30px 24px; }
  .hero h1 { font-size: 24px; }
  .lesson-card { padding: 20px 18px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .brand { font-size: 15px; }
  .topnav button { padding: 7px 10px; font-size: 13px; }
  .course-grid { grid-template-columns: 1fr; }
}

/* 管理端：常驻错误提示（建号重名等失败必须留在页面上，不能一闪而过） */
.adm-err{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 0 12px;padding:10px 14px;
  border-radius:10px;border:1px solid #e5484d55;background:#e5484d14;color:#c62a2f;font-size:14px;line-height:1.5}
.adm-err-x{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;padding:0 2px}
.t-dim{color:var(--text-2);font-size:13px}

/* 教师端：班级管理 */
.cls-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.cls-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cls-name{flex:1}
.cls-cnt{color:var(--text-2);font-size:13px}
.cls-msg{margin:0 0 10px;padding:9px 12px;border-radius:9px;background:#2ea04316;color:#1a7f37;font-size:14px}
.cls-msg.err{background:#e5484d14;color:#c62a2f}
.cls-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin:10px 0}
.cls-chk{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:14px}

.lock-scope{margin-bottom:12px}

.gb-star{display:block;font-size:11px;line-height:1.1;letter-spacing:-1px;opacity:.9}

.gb-slot{display:inline-block;font-style:normal;font-size:10px;line-height:1;opacity:.22}
.gb-slot.on{opacity:1}

.sb-slot{display:inline-block;font-style:normal;font-size:11px;opacity:.28;margin-right:1px}
.sb-slot.on{opacity:1}
.sb-star-tip{display:none}

/* 页脚备案号（工信部要求：首页底部展示备案号并链接到 beian.miit.gov.cn） */
.footer-line{line-height:1.7}
.footer-beian{margin-top:6px;font-size:12px;opacity:.85}
.footer-beian a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.footer-beian a:hover{opacity:.8}