/* ============================================================
   课程共用样式 / 全站样式
   结构：
   1. 基础骨架（全站）
   2. 习题集模式（body.quizset）
   3. 标准组件库（从各页内联提取的通用组件）
   4. 讨论课模板（topbar 导航式讨论课，强调色 --accent）
   页面内联 <style> 中与「3. 标准组件库」等价的规则应删除；
   页面特有/同名异义/异色覆盖保留在页面内联。
   ============================================================ */

/* ============================================================
   1. 基础骨架
   ============================================================ */
body {
  font-family: -apple-system, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 920px;
  margin: 0 auto;
  padding: 12px;
  background: #f5f7fa;
  color: #333;
  line-height: 1.9;
  font-size: 16px;
}
article {
  background: #fff;
  border-radius: 12px;
  padding: 32px 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
}
h1 {
  color: #2c3e50;
  font-size: 1.8em;
  border-bottom: 3px solid #1a73e8;
  padding-bottom: 10px;
  margin-top: 0;
}
h2 {
  color: #1a73e8;
  font-size: 1.25em;
  margin: 32px 0 12px;
  padding-left: 10px;
  border-left: 4px solid #1a73e8;
}
section {
  margin: 20px 0;
}
ul, ol {
  padding-left: 24px;
  line-height: 2;
}
.example {
  background: #f0f7ff;
  border-left: 4px solid #1a73e8;
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 0 8px 8px 0;
}
.example p {
  margin: 6px 0;
}
.example .step {
  margin: 4px 0 4px 20px;
  color: #555;
}
.example .answer {
  color: #d32f2f;
  font-weight: bold;
}
.hint {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.95em;
}
.back {
  display: inline-block;
  margin-bottom: 16px;
  color: #1a73e8;
  text-decoration: none;
  font-size: 0.95em;
}
.back:hover { text-decoration: underline; }
.tip { color: #666; font-size: 0.9em; font-style: italic; }
.keyword { background: #e3f2fd; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.definition { background: #f3e5f5; padding: 2px 6px; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: center; word-break: break-word; overflow-wrap: break-word; }
th { background: #1a73e8; color: #fff; }

.qa {
  margin-top: 20px;
  list-style: none;
}
.qa * {
  color: #333;
  text-decoration: none;
}
.qa li p {
  margin-left: 1em;
}

/* ============================================================
   2. 习题集模式（body.quizset）
   页面 <body> 加 class="quizset" 即启用该风格：
   白底、题卡去四周边框只留底部边框、对错反馈仅底部边框变色。
   ============================================================ */
body.quizset { background: #fff; }
body.quizset article {
  background: #fff; border-radius: 0; box-shadow: none;
  padding: 20px 40px 64px;
}
body.quizset .quiz-question,
body.quizset .question-card,
body.quizset .calc-card,
body.quizset .solve-card,
body.quizset .fill-card,
body.quizset .example {
  background: #fff; border: none; border-bottom: 1px solid #e0e0e0;
  border-radius: 0; padding: 0 0 24px; margin: 0 0 18px;
}
body.quizset .quiz-question.correct,
body.quizset .question-card.correct,
body.quizset .calc-card.correct,
body.quizset .solve-card.correct,
body.quizset .fill-card.correct,
body.quizset .example.correct { border-bottom-color: #4caf50; }
body.quizset .quiz-question.wrong,
body.quizset .question-card.wrong,
body.quizset .calc-card.wrong,
body.quizset .solve-card.wrong,
body.quizset .fill-card.wrong,
body.quizset .example.wrong { border-bottom-color: #f44336; }
@media (max-width: 720px) {
  body.quizset article { padding: 8px 12px 48px; }
}

/* ============================================================
   3. 标准组件库（2026-08 从各页内联提取的通用组件）
   ============================================================ */
/* 3.1 标题层级 */
h4 { color: #555; margin: 18px 0 8px; font-size: 1em; }

/* 3.2 公式与要点框 */
.formula { text-align: center; margin: 16px 0; padding: 12px; background: #f8f9fa; border-radius: 8px; font-size: 1.1em; }
.formula-box { border: 2px solid #1a73e8; border-radius: 10px; padding: 16px 20px; margin: 16px 0; background: #f0f7ff; }
.formula-box p { margin: 6px 0; }
.key-point { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 12px 16px; margin: 12px 0; border-radius: 0 8px 8px 0; }
.note { background: #fff8e1; border-left: 4px solid #ffc107; padding: 12px 16px; margin: 12px 0; border-radius: 0 8px 8px 0; font-size: 0.95em; }

/* 3.3 布局栅格与对比表 */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-table th:first-child { min-width: 100px; }
@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
}

/* 3.4 交互选择题卡（有边框完整卡；quizset 页由 body.quizset 覆盖为无边框） */
.quiz-question,
.question-card {
  background: #fff; border: 2px solid #e0e0e0; border-radius: 10px;
  padding: 18px 22px; margin: 16px 0; transition: all 0.2s;
}
.quiz-question.correct,
.question-card.correct { border-color: #4caf50; }
.quiz-question.wrong,
.question-card.wrong { border-color: #f44336; }
.quiz-question .q-title,
.question-card .q-title { font-weight: bold; font-size: 1.05em; margin-bottom: 10px; color: #2c3e50; }
.quiz-question .q-no,
.solve-card .q-no { display: inline-block; min-width: 2.2em; color: #e65100; font-weight: bold; margin-right: 4px; }
.quiz-question .q-title .q-tag,
.quiz-question .q-tag,
.question-card .q-tag {
  display: inline-block; padding: 2px 12px; border-radius: 12px;
  font-size: 0.75em; margin-right: 8px; color: #fff;
}
.quiz-question .q-text,
.question-card .q-text { margin: 6px 0 10px; line-height: 1.7; color: #444; }
.quiz-question .options,
.question-card .options { display: flex; flex-direction: column; gap: 8px; }
.quiz-question .opt,
.question-card .opt {
  padding: 8px 14px; border: 2px solid #ddd; border-radius: 8px;
  cursor: pointer; transition: all 0.15s; background: #fafafa; user-select: none;
}
.quiz-question .opt:hover,
.question-card .opt:hover { background: #e3f2fd; border-color: #90caf9; }
.quiz-question .opt.selected,
.question-card .opt.selected { border-color: #1a73e8; background: #bbdefb; font-weight: bold; }
.quiz-question .opt.correct-opt,
.question-card .opt.correct-opt { border-color: #4caf50; background: #c8e6c9; font-weight: bold; }
.quiz-question .opt.wrong-opt,
.question-card .opt.wrong-opt { border-color: #f44336; background: #ffcdd2; }
.quiz-question .opt.disabled,
.question-card .opt.disabled { pointer-events: none; opacity: 0.7; }
.quiz-question .explain,
.question-card .explain {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  font-size: 0.93em; display: none;
}
.quiz-question .explain.show,
.question-card .explain.show { display: block; }
.quiz-question .explain.ok,
.question-card .explain.ok { background: #e8f5e9; border-left: 4px solid #4caf50; }
.quiz-question .explain.fail,
.question-card .explain.fail { background: #fbe9e7; border-left: 4px solid #f44336; }

/* 3.5 标签色板（q-tag） */
.q-tag.concept { background: #1a73e8; }
.q-tag.calc { background: #e67e22; }
.q-tag.comprehensive { background: #6a1b9a; }
.q-tag.graph { background: #8e24aa; }
.q-tag.choice { background: #1a73e8; }
.q-tag.tf { background: #e67e22; }
.q-tag.fill { background: #9c27b0; }
.q-tag.judge { background: #1a73e8; }
.q-tag.multi { background: #9c27b0; }
.q-tag.proof { background: #9c27b0; }
.q-tag.logic { background: #1a73e8; }
.q-tag.set { background: #00897b; }
.q-tag.gaokao { background: #3949ab; }
.q-tag.daily,
.q-tag.condition,
.q-tag.quant,
.q-tag.compound,
.q-tag.deduce,
.q-tag.induce { background: #1a73e8; }

/* 3.6 大题卡（计算/填空） */
.calc-card {
  background: #fff; border: 2px solid #e0e0e0; border-radius: 10px;
  padding: 18px 22px; margin: 16px 0; transition: all 0.2s;
}
.calc-card .q-title { font-weight: bold; font-size: 1.05em; margin-bottom: 10px; color: #2c3e50; }
.calc-card .q-title .q-tag,
.calc-card .q-tag {
  display: inline-block; padding: 1px 10px; border-radius: 12px;
  font-size: 0.75em; margin-right: 6px; color: #fff;
}
.calc-card .q-title .q-tag { background: #1a73e8; }
.calc-card .q-text { margin: 6px 0 10px; line-height: 1.8; color: #444; font-size: 1em; }
.calc-card .step-area,
.question-card .step-area {
  margin: 10px 0; padding: 10px 14px; border-radius: 8px;
  font-size: 0.93em; display: none; line-height: 1.8;
}
.calc-card .step-area.show,
.question-card .step-area.show { display: block; }
.calc-card .step-area.ok,
.question-card .step-area.ok { background: #e8f5e9; border-left: 4px solid #4caf50; }
.calc-card .step-area.fail,
.question-card .step-area.fail { background: #fbe9e7; border-left: 4px solid #f44336; }
.calc-card .step-area .step { margin: 4px 0; padding-left: 12px; border-left: 3px solid #bbb; }
.calc-card .step-area .answer { color: #2c3e50; font-weight: bold; margin: 6px 0 0; font-size: 1.05em; }
.calc-card .btn-toggle {
  display: inline-block; margin-top: 16px; padding: 6px 20px;
  border: 2px solid #1a73e8; color: #1a73e8; border-radius: 16px;
  background: #fff; cursor: pointer; font-size: 0.93em; transition: 0.15s;
}
.calc-card .btn-toggle:hover { background: #1a73e8; color: #fff; }

/* 3.7 输入组件 */
.fill-input, .calc-input {
  width: 100%; padding: 10px 14px; border: 2px solid #ddd; border-radius: 8px;
  font-size: 0.95em; outline: none; transition: border-color 0.15s;
  margin: 6px 0; box-sizing: border-box;
  font-family: 'Times New Roman', 'STIX', serif;
}
.fill-input:focus, .calc-input:focus { border-color: #1a73e8; }
.fill-input.correct-input, .calc-input.correct-input { border-color: #4caf50; background: #e8f5e9; }
.fill-input.wrong-input, .calc-input.wrong-input { border-color: #f44336; background: #fce4ec; }
.btn-check {
  padding: 6px 16px; background: #1a73e8; color: #fff; border: none;
  border-radius: 8px; cursor: pointer; font-size: 0.9em; transition: 0.15s;
}
.btn-check:hover { background: #1557b0; }
.btn-check:disabled { opacity: 0.5; cursor: default; }

/* 3.8 评分组件 */
.score-panel {
  text-align: center; padding: 16px; margin: 20px 0;
  background: #f0f7ff; border-radius: 10px; border: 2px solid #1a73e8;
}
.score-panel .score-num { font-size: 2em; font-weight: bold; color: #1a73e8; }
.score-panel .btn-reset {
  margin-left: 16px; padding: 8px 24px; border: 2px solid #1a73e8;
  color: #1a73e8; border-radius: 20px; background: #fff;
  cursor: pointer; font-size: 0.95em; transition: 0.15s;
}
.score-panel .btn-reset:hover { background: #1a73e8; color: #fff; }
.quiz-footer { text-align: center; margin: 36px 0 20px; padding-top: 24px; border-top: 2px solid #e0e0e0; }
.quiz-footer .score-box {
  display: inline-block; background: #1a73e8; color: #fff;
  padding: 14px 40px; border-radius: 30px; font-size: 1.4em; font-weight: bold; letter-spacing: 1px;
}
.quiz-footer .score-detail { margin: 10px 0 6px; font-size: 0.9em; color: #666; line-height: 1.7; }
.quiz-footer .btn-reset {
  display: inline-block; margin-top: 14px; padding: 10px 32px;
  border: 2px solid #1a73e8; color: #1a73e8; border-radius: 24px;
  background: #fff; cursor: pointer; font-size: 1em; transition: 0.15s;
}
.quiz-footer .btn-reset:hover { background: #1a73e8; color: #fff; }
#scoreDisplay {
  display: inline-block; background: #1a73e8; color: #fff;
  padding: 12px 32px; border-radius: 30px; font-size: 1.2em; font-weight: bold;
}
.reset-btn {
  display: inline-block; margin-top: 12px; padding: 8px 28px;
  border: 2px solid #1a73e8; color: #1a73e8; border-radius: 20px;
  background: #fff; cursor: pointer; font-size: 1em; transition: 0.15s;
}
.reset-btn:hover { background: #e3f2fd; }

/* 3.9 难度标签 */
.diff-tag { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 0.7em; margin-left: 6px; font-weight: normal; }
.diff-easy { background: #e8f5e9; color: #2e7d32; }
.diff-medium { background: #fff8e1; color: #f57f17; }
.diff-hard { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.diff-exam { background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; }

/* 3.10 综合题卡 */
.comp-question {
  background: #fff; border: 2px solid #ff7043; border-radius: 10px;
  padding: 20px 24px; margin: 20px 0;
  border-left: 6px solid #ff7043;
}
.comp-question h4 { margin-top: 0; color: #e65100; }

/* ============================================================
   4. 讨论课模板（topbar 导航式讨论课）
   强调色通过页面内联 :root { --accent: #xxx; } 控制；
   默认 #3949ab。science-thinking 等白底全宽变体保留自身 body/article。
   ============================================================ */
.course-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  margin: 14px 0 22px; padding: 12px 18px;
  background: #f8faff; border-radius: 10px; border: 1px solid #e0e8f0;
  font-size: 0.93em; color: #555;
}
.course-meta strong { color: var(--accent, #3949ab); }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
  border: 1px solid #e0e0e0; border-radius: 12px;
  padding: 8px 12px; margin: 0 0 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.topbar .tb-label { font-size: 0.8em; color: #888; margin-right: 4px; white-space: nowrap; }
.topbar a.chip {
  text-decoration: none; font-size: 0.8em; color: #555;
  padding: 4px 12px; border-radius: 14px; border: 1px solid #ddd;
  background: #fff; white-space: nowrap; transition: 0.15s;
}
.topbar a.chip:hover { border-color: var(--accent, #3949ab); color: var(--accent, #3949ab); }
.topbar a.chip.active { background: var(--accent, #3949ab); color: #fff; border-color: var(--accent, #3949ab); }
.topbar a.chip .tm { opacity: 0.75; font-size: 0.9em; }
.topbar .tb-progress { margin-left: auto; font-size: 0.8em; color: var(--accent, #3949ab); font-weight: bold; white-space: nowrap; }

section.sec {
  border: 2px solid #e0e0e0; border-radius: 12px;
  margin: 22px 0; padding: 20px 26px; scroll-margin-top: 64px;
}
section.sec.c-open { border-left: 6px solid #607d8b; }
section.sec.c-1 { border-left: 6px solid var(--accent, #3949ab); }
section.sec.c-2 { border-left: 6px solid #e65100; }
section.sec.c-3 { border-left: 6px solid #f57f17; }
section.sec.c-4 { border-left: 6px solid #9c27b0; }
section.sec.c-5 { border-left: 6px solid #00897b; }
section.sec.c-6 { border-left: 6px solid #2e7d32; }
section.sec.c-7 { border-left: 6px solid #6d4c41; }
section.sec.c-sum { border-left: 6px solid var(--accent, #3949ab); }

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.sec-head h2 { margin: 0; font-size: 1.22em; color: #2c3e50; }
.sec-head .time-badge {
  display: inline-block; background: var(--accent, #3949ab); color: #fff;
  padding: 2px 12px; border-radius: 12px; font-size: 0.8em; font-weight: bold;
}
.sec-head .subtitle { width: 100%; color: #777; font-size: 0.92em; margin: 0; }
.sec h3 { color: #2c3e50; margin: 20px 0 8px; font-size: 1.05em; }
.sec p { margin: 8px 0; }
.sec ul, .sec ol { margin: 8px 0; padding-left: 26px; }

.quote-box {
  background: #fafafa; border-left: 4px solid #bbb; border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 14px 0; color: #555; font-style: italic;
}
.quote-box .qsrc { display: block; text-align: right; font-size: 0.85em; color: #999; margin-top: 6px; font-style: normal; }

.kw-card {
  background: #f0f7ff; border: 1px solid #bbdefb; border-radius: 10px;
  padding: 12px 16px; margin: 12px 0; font-size: 0.95em;
}
.kw-card .kw-tag {
  display: inline-block; background: var(--accent, #3949ab); color: #fff;
  padding: 1px 10px; border-radius: 10px; font-size: 0.78em; margin-right: 8px;
}

.case-card {
  background: #f8faff; border: 1px solid #e0e8f0; border-radius: 10px;
  padding: 12px 16px; margin: 10px 0; font-size: 0.95em;
}
.case-card .case-title { font-weight: bold; color: var(--accent, #3949ab); }
.case-card .case-title.warn { color: #e65100; }

.interact {
  background: #fff8e1; border: 2px solid #ffc107; border-radius: 10px;
  padding: 14px 18px; margin: 16px 0;
}
.interact .it-title { font-weight: bold; color: #e65100; font-size: 0.98em; margin-bottom: 6px; }
.interact ul { margin: 4px 0; }
.interact .btn-ref {
  margin-top: 10px; padding: 4px 16px; border: 2px solid #e65100; color: #e65100;
  border-radius: 14px; background: #fff; cursor: pointer; font-size: 0.85em; transition: 0.15s;
}
.interact .btn-ref:hover { background: #fff3e0; }
.interact .btn-ref.open { background: #e65100; color: #fff; }
.interact .ref-box {
  display: none; margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  background: #fff; border-left: 4px solid #e65100; font-size: 0.9em; line-height: 1.8;
}
.interact .ref-box.show { display: block; }

.sec table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.93em; }
.sec th, .sec td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.sec th { background: #e8eaf6; color: #1a237e; }

.end-box {
  background: #e8eaf6; border: 2px solid var(--accent, #3949ab); border-radius: 10px;
  padding: 16px 20px; margin: 16px 0;
}
.foot-note { text-align: center; color: #aaa; font-size: 0.85em; margin-top: 26px; }

/* ============================================================
   5. 移动端适配：所有文字增大 2px
   基准 16px → 18px（em 相对字号等比放大）；
   各页面内联 @media 固定了 px 字号（p,li 15px / h1 22px / h2 18px /
   h3 16px），此处用两级选择器（特异性高于页面内联单级选择器）
   统一覆盖并同步 +2px。
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 18px; }
  /* !important 用于压过页面行内 style="font-size:.." 的固定 px（面包屑、元信息行等） */
  article p, article li { font-size: 17px !important; }
  article h1 { font-size: 24px !important; }
  article h2 { font-size: 20px !important; }
  article h3 { font-size: 18px !important; }
  /* 页面内联固定 px 的交互组件同步 +2px（两级选择器特异性已高于页面内联类选择器，
     无需 !important；不触碰 SVG 内 text，保证图形标注精度） */
  article .btn-sm, article .btn-hint, article .btn-ans, article .check-btn { font-size: 15px; }
  article .opt-btn, article .tf-btn, article .feedback,
  article .hint-box, article .ans-box { font-size: 16px; }
  article .fill-input, article .calc-input { font-size: 17px; }
  /* 内容与屏幕边缘的间距：左右 10px、底部 100px。
     两级选择器 + !important 压过各页内联的
     article { padding: ... !important }（特异性 0,0,2 > 0,0,1） */
  body article {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 100px !important;
  }
}
