/* ==========================================================================
   AGENT ACADEMY — 瑞士国际主义风格设计系统
   原则：无衬线字体网格 · 严格左对齐 · 红色强调 · 大量留白 · 编号系统
   禁止：装饰性渐变、阴影、圆角柔化、手写体
   ========================================================================== */

:root {
  /* 色板：仅用中性灰阶 + 一个强调红 */
  --red: #E10600;
  --red-dark: #B30500;
  --ink: #111111;
  --ink-70: #4A4A4A;
  --ink-50: #767676;
  --ink-30: #A8A8A8;
  --line: #111111;
  --line-soft: #D8D8D8;
  --line-faint: #EDEDED;
  --paper: #FFFFFF;
  --paper-alt: #F5F5F5;
  --paper-warm: #FAFAF8;

  /* 网格 */
  --gutter: 24px;
  --maxw: 1440px;
  --col: calc((var(--maxw) - 11 * var(--gutter)) / 12);

  /* 字体：无衬线，中英混排优化 */
  --sans: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono",
          "PingFang SC", monospace;

  /* 字号阶梯（严格 1.25 比例） */
  --t-display: 72px;
  --t-h1: 44px;
  --t-h2: 30px;
  --t-h3: 21px;
  --t-body: 16px;
  --t-sm: 13px;
  --t-xs: 11px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--red); color: #fff; }

/* ============ 网格系统 ============ */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ============ 顶部导航 ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand span { color: var(--red); }

.nav { display: flex; gap: 28px; height: 100%; align-items: center; }
.nav a {
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ink-70);
  letter-spacing: 0.02em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .12s linear, border-color .12s linear;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); border-bottom-color: var(--red); font-weight: 500; }

.progress-pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  white-space: nowrap;
}
.progress-pill b { color: var(--ink); font-weight: 600; }

/* 移动端菜单开关 */
.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid var(--ink);
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}

/* ============ 编号标签（瑞士风格核心元素） ============ */
.eyebrow {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 14px;
}
.index-num {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sec-num {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ink-30);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============ 标题 ============ */
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}
h4 { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; }

p { color: var(--ink-70); }
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.01em;
}
strong { font-weight: 600; color: var(--ink); }

/* ============ 区块 ============ */
.section { padding: 96px 0; border-top: 2px solid var(--line); }
.section:first-of-type { border-top: none; }
.section-alt { background: var(--paper-alt); }

.sec-head {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 32px;
  margin-bottom: 56px;
  align-items: start;
}
.sec-head .body h2 { margin-bottom: 14px; }

/* ============ 首页 Hero ============ */
.hero { padding: 88px 0 80px; border-bottom: 2px solid var(--line); }
.hero-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.hero-main { grid-column: span 8; }
.hero-side { grid-column: span 4; padding-left: 8px; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { max-width: 30em; }

.hero-meta {
  border-top: 2px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
}
.hero-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.hero-meta-row dt { color: var(--ink-50); letter-spacing: 0.02em; }
.hero-meta-row dd { color: var(--ink); font-weight: 600; }

/* 红色大块强调 */
.stat-block {
  border-top: 2px solid var(--red);
  padding-top: 18px;
  margin-top: 36px;
}
.stat-num {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 8px;
}

/* ============ 按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s linear, border-color .12s linear;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 8px 14px; font-size: var(--t-xs); }

/* ============ 卡片（无阴影，1px 边框） ============ */
.card {
  border: 1px solid var(--line-soft);
  background: var(--paper);
  padding: 26px;
  height: 100%;
}
.card-hover { transition: border-color .12s linear; }
.card-hover:hover { border-color: var(--ink); }
.card-num {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: var(--t-sm); }

.card-link { text-decoration: none; display: block; color: inherit; }

/* ============ 学习路径 ============ */
.path-row {
  display: grid;
  grid-template-columns: 72px 1fr 200px;
  gap: 28px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .1s linear;
}
.path-row:last-child { border-bottom: 1px solid var(--line-soft); }
.path-row:hover { background: var(--paper-alt); }
.path-row .stage-num {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink-30);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.path-row.active .stage-num { color: var(--red); }
.path-row h3 { margin-bottom: 6px; }
.path-row p { font-size: var(--t-sm); }

/* 进度条（纯色块，无渐变） */
.bar {
  height: 6px;
  background: var(--line-faint);
  position: relative;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--red);
  transition: width .3s ease;
}
.bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-50);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ============ 对照表 ============ */
.compare-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
table.compare th {
  text-align: left;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 600;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.compare th:nth-child(2) { color: var(--red); }
table.compare td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: top;
  color: var(--ink-70);
}
table.compare td:first-child { color: var(--ink); font-weight: 500; }
table.compare code, .mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-alt);
  padding: 2px 5px;
  display: inline-block;
  line-height: 1.5;
}
table.compare code.j { color: #7A4E00; background: #FFF6E5; }
table.compare code.p { color: #0A5C36; background: #E8F5EE; }
table.compare tr:hover td { background: var(--paper-warm); }

/* ============ 提示条 ============ */
.note {
  border-left: 4px solid var(--red);
  padding: 16px 20px;
  background: var(--paper-alt);
  margin: 22px 0;
  font-size: var(--t-sm);
  color: var(--ink-70);
}
.note b { color: var(--ink); }
.note-title {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 6px;
}
.note-plain { border-left-color: var(--ink); }
.note-plain .note-title { color: var(--ink); }

/* ============ 代码块 ============ */
.code-block {
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--ink);
  margin: 20px 0;
  overflow: hidden;
}
.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.code-head .lang { color: var(--red); font-weight: 600; }
pre.code {
  padding: 18px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  tab-size: 4;
}
pre.code .k { color: #A31515; font-weight: 600; }
pre.code .s { color: #0A5C36; }
pre.code .n { color: #7A4E00; }
pre.code .c { color: var(--ink-30); font-style: italic; }
pre.code .f { color: #0B5394; }

/* ============ 章节 / 课程列表 ============ */
.lesson-item {
  border-top: 1px solid var(--line-soft);
  padding: 22px 0;
}
.lesson-item:last-child { border-bottom: 1px solid var(--line-soft); }
.lesson-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: start;
}
.lesson-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-30);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.lesson-item.done .lesson-num { color: var(--red); }
.lesson-item h3 { margin-bottom: 7px; }
.lesson-item p { font-size: var(--t-sm); }
.lesson-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  color: var(--ink-50);
  font-weight: 600;
}
.tag-red { border-color: var(--red); color: var(--red); }
.tag-solid { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 完成勾选按钮 */
.done-btn {
  background: none;
  border: 2px solid var(--line-soft);
  color: var(--ink-50);
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s linear;
  flex-shrink: 0;
}
.done-btn:hover { border-color: var(--ink); color: var(--ink); }
.done-btn.on { background: var(--red); border-color: var(--red); color: #fff; }

/* ============ 前置知识 / 难度 ============ */
.prereq {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-faint);
  font-size: var(--t-sm);
}
.prereq:last-child { border-bottom: 1px solid var(--line-faint); }
.prereq dt {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding-top: 2px;
  font-weight: 600;
}
.prereq dd { color: var(--ink-70); }

.diff {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.diff i {
  width: 16px;
  height: 6px;
  background: var(--line-soft);
  display: block;
}
.diff i.on { background: var(--red); }

/* ============ 代码实验室 ============ */
.lab { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.lab-editor { grid-column: span 7; }
.lab-panel { grid-column: span 5; }

.editor-wrap {
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  height: 520px;
}
.editor-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  flex-shrink: 0;
}
.editor-bar .dots { display: flex; gap: 5px; }
.editor-bar .dots i {
  width: 8px; height: 8px; background: var(--line-soft); display: block;
}
.editor-bar .dots i:first-child { background: var(--red); }

textarea.editor {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  padding: 16px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  background: var(--paper-warm);
  color: var(--ink);
  tab-size: 4;
}
textarea.editor:focus { background: #fff; }

.editor-foot {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.editor-foot .spacer { margin-left: auto; }
.editor-status {
  font-size: var(--t-xs);
  color: var(--ink-50);
  letter-spacing: 0.04em;
}
.editor-status.err { color: var(--red); font-weight: 600; }

/* 输出面板 */
.panel-box {
  border: 1px solid var(--line-soft);
  background: var(--paper);
  margin-bottom: 20px;
}
.panel-head {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-head .red { color: var(--red); }
.panel-body { padding: 14px; }
.panel-body.scroll {
  max-height: 260px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 状态流转面板：紧凑排布，避免大片留白 */
#flowBox .panel-body { max-height: 340px; min-height: 0; }
.out-line { color: var(--ink); }
.out-empty { color: var(--ink-30); font-style: italic; }

.err-box {
  background: #FFF2F2;
  border-left: 4px solid var(--red);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--red-dark);
}

/* 状态流转时间线 */
.flow { padding: 0; }
.flow-step {
  position: relative;
  padding: 9px 0 9px 26px;
  border-left: 2px solid var(--line-soft);
  margin-left: 7px;
}
.flow-step:last-child { border-left-color: transparent; }
.flow-dot {
  position: absolute;
  left: -6px;
  top: 11px;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border: 2px solid var(--red);
}
.flow-step.end .flow-dot { background: var(--red); }
.flow-step.route { border-left-color: var(--red); }
.flow-step.route .flow-dot { border-radius: 0; background: var(--red); }
.flow-name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}
.flow-meta {
  font-size: 11px;
  color: var(--ink-50);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.flow-delta {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--paper-alt);
  border-left: 2px solid var(--red);
  padding: 6px 9px;
  color: var(--ink-70);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.flow-key { color: var(--red); font-weight: 600; }
.flow-val { color: #0A5C36; }

/* 图结构可视化 */
.graph-canvas {
  border: 1px solid var(--line-soft);
  background: var(--paper-warm);
  padding: 18px;
  overflow-x: auto;
}
.graph-node-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.gnode {
  border: 2px solid var(--ink);
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--paper);
}
.gnode.start { border-color: var(--red); color: var(--red); }
.gnode.end { background: var(--ink); color: #fff; border-color: var(--ink); }
.gnode.cond { border-style: dashed; border-color: var(--red); color: var(--red); }
.garrow {
  font-family: var(--mono);
  color: var(--ink-30);
  font-size: 15px;
  padding: 0 2px;
}

/* 收藏 */
.fav-btn {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--ink-50);
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--sans);
}
.fav-btn:hover { border-color: var(--ink); color: var(--ink); }
.fav-btn.on { background: var(--red); color: #fff; border-color: var(--red); }

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--ink);
  color: #fff;
  padding: 13px 20px;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  border-left: 4px solid var(--red);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s linear;
  z-index: 300;
  max-width: 340px;
}
.toast.show { opacity: 1; }

/* ============ 进度页 ============ */
.prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.prog-item {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.prog-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.prog-label {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 10px;
  margin-bottom: 14px;
}
.prog-item.accent { border-top-color: var(--red); }
.prog-item.accent .prog-num { color: var(--red); }

/* 路径可视化 */
.timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 0; }
.tl-item {
  position: relative;
  padding: 20px 0 20px 32px;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 24px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 2px solid var(--ink-30);
}
.tl-item.done::before { background: var(--red); border-color: var(--red); }
.tl-item h4 { margin-bottom: 6px; }
.tl-item p { font-size: var(--t-sm); }
.tl-stage {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 8px;
}

/* ============ 杂项 ============ */
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 48px; }
.mb-m { margin-bottom: 28px; }
.mb-l { margin-bottom: 48px; }
.rule { height: 2px; background: var(--ink); margin: 40px 0; }
.rule-red { height: 2px; background: var(--red); margin: 40px 0; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

details.acc { border-top: 1px solid var(--line-soft); }
details.acc:last-child { border-bottom: 1px solid var(--line-soft); }
details.acc summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: var(--t-body);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::before {
  content: '+';
  font-family: var(--mono);
  color: var(--red);
  font-weight: 700;
  font-size: 18px;
  width: 16px;
}
details.acc[open] summary::before { content: '−'; }
details.acc .acc-body { padding: 0 0 20px 28px; }

.view { display: none; }
.view.active { display: block; }

/* 练习条目 */
.exercise {
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--red);
  padding: 22px;
  margin: 24px 0;
  background: var(--paper);
}
.exercise-num {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 12px;
}
.exercise p { font-size: var(--t-sm); margin-bottom: 14px; }

/* ============ 页脚 ============ */
.site-footer {
  border-top: 2px solid var(--ink);
  padding: 48px 0 28px;
  background: var(--paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1.1fr 1.2fr;
  gap: 32px 40px;
}
.footer-brand p {
  margin-top: 12px;
  max-width: 420px;
  font-size: var(--t-sm);
  color: var(--ink-70);
  line-height: 1.7;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--t-sm);
}
.footer-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-col a:hover { border-bottom-color: var(--red); }
.footer-note {
  font-size: var(--t-xs);
  color: var(--ink-50);
  letter-spacing: 0.02em;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ============ 响应式 ============ */
@media (max-width: 1100px) {
  :root { --t-display: 54px; --t-h1: 36px; --t-h2: 26px; }
  .hero-main { grid-column: span 12; }
  .hero-side { grid-column: span 12; padding-left: 0; margin-top: 40px; }
  .lab-editor, .lab-panel { grid-column: span 12; }
  .prog-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-head { grid-template-columns: 56px 1fr; gap: 20px; }
}

@media (max-width: 820px) {
  :root { --gutter: 18px; --t-display: 40px; --t-h1: 28px; --t-h2: 22px; }
  .section { padding: 60px 0; }
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    height: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line-faint); }
  .nav a.active { border-bottom-color: var(--red); }
  .progress-pill { display: none; }
  .path-row { grid-template-columns: 48px 1fr; gap: 16px; }
  .path-row .path-prog { grid-column: span 2; margin-top: 10px; }
  .lesson-head { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .lesson-num { font-size: 20px; }
  .prereq { grid-template-columns: 1fr; gap: 5px; }
  .prog-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-head { grid-template-columns: 1fr; gap: 12px; }
  .hero { padding: 52px 0 44px; }
  .editor-wrap { height: 400px; }
  .stat-num { font-size: 40px; }
  .prog-num { font-size: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .prog-grid { grid-template-columns: 1fr; }
  .prereq { padding: 9px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* 打印 */
@media print {
  .topbar, .editor-foot, .done-btn, .fav-btn { display: none; }
  .view { display: block !important; }
}