:root {
  /* ⚠️ 必须在这里就声明 color-scheme（2026-10-09 补）。
     只写在深色媒体查询里是不够的：浅色模式下浏览器拿不到「我支持深色」的
     声明，手机浏览器的「夜间模式/强制深色」（小米/华为/OPPO、Android Chrome
     自动深色）就会对页面做算法反色 —— 背景被强行压暗、文字反成撞色，
     结果就是用户报的「深色模式手机依然看不到字」。
     声明 light dark 等于告诉浏览器：别插手，我自己会处理。 */
  color-scheme: light dark;

  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #fbf7ef;
  --primary: #e86f3d;
  --primary-dark: #c9552a;
  --teal: #1d9e75;
  --teal-dark: #0f6e56;
  --amber: #ba7517;
  --red: #d23f3f;
  --text: #2c2c2a;
  /* ⚠️ 灰阶按 WCAG 对比度定档（2026-10-14 改）。旧 --text-3 #9a968b 在白底
     只有 2.95:1、米底 2.76:1，远低于正文门槛 4.5:1 —— 中文笔画密，
     低于 3:1 时小字号下就糊成一团（用户原话："灰色字体看起来很模糊"）。
     新值实测（白 / 米 / 中性底）：
       --text-1 #2c2c2a  13.99 / 13.09 / 12.40
       --text-2 #5c5952   6.99 /  6.54 /  6.19
       --text-3 #6f6c5b   5.29 /  4.95 /  4.69
     ⚠️ 小程序 app.wxss 是同一套值，两端必须一起改（那边用
     zhipei-miniapp/_audit_readability.py 验，这边同理）。 */
  --text-2: #5c5952;
  --text-3: #6f6c5b;
  /* ⚠️ --text-1 是 --text 的别名（2026-10-08 补）。
     客服弹层和页脚用的是 var(--text-1)，但这个变量从没定义过 ——
     CSS 里 var() 解析失败会退化成 initial（color 的 initial 是**黑色**），
     于是深色系统下弹层里的文字整片看不见。这里补上别名。 */
  --text-1: #2c2c2a;
  --border: #e8e2d6;
  --radius: 16px;
  --shadow: 0 2px 12px rgba(60, 45, 20, 0.06);
  --on-primary: #ffffff;
  --gold: #f5d78a;
  --gold-dim: #cbbf9a;
  /* 会员卡：刻意做成"黑金"深色卡（两个模式下都是这张脸，属于故意设计，
     不是漏了深色适配）。深色背景下 #2c2c2a 仍比 --bg(#17161a) 亮，边界清楚。 */
  --vip-bg: linear-gradient(135deg, #2c2c2a, #4a4a46);
  --purple: #534ab7;
  --tint-warn-bg: #fdf1ea;
  --tint-warn-fg: #b0511f;
  --tint-ok-bg: #eaf7ee;
  --tint-ok-fg: #2e7d4f;
  --tint-err-bg: #fdecec;
  --tint-err-fg: #c0392b;
  --tint-neutral-bg: #f4f1ea;
}

/* ==================== 深色模式 ====================
   2026-10-08 用户反馈：「暗色系统下背景字体看不到」。
   浏览器/微信内置浏览器会跟随系统的 prefers-color-scheme，这里换一套深色变量，
   所有页面都继承 —— 和小程序端 app.wxss 的深色方案保持一致，两端观感统一。 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161a;
    --surface: #232228;
    --surface-2: #2c2b32;
    --primary: #f08050;
    --primary-dark: #e86f3d;
    --teal: #35b98d;
    --teal-dark: #4fc79c;
    --amber: #e0a13f;
    --red: #ef6a6a;
    --text: #ececf0;
    --text-2: #b6b4bd;
    --text-3: #9a98a3;
    --text-1: #ececf0;
    --border: #3a3942;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --on-primary: #1a1a1e;
    --gold: #f5d78a;
    --gold-dim: #cbbf9a;
    --purple: #b18cf5;
    --tint-warn-bg: #3a2a22;
    --tint-warn-fg: #f0a878;
    --tint-ok-bg: #1f342a;
    --tint-ok-fg: #6fd3a4;
    --tint-err-bg: #3a2224;
    --tint-err-fg: #f08c8c;
    --tint-neutral-bg: #2f2e36;
}

  /* 系统原生控件（输入框、下拉、滚动条）也跟着变暗 */
  /* 深色媒体查询里再声明一次，确保跟随系统切换时立即生效 */
  :root { color-scheme: dark; }

  /* 头像/封面这类白底占位在深色下会突兀，压暗一点 */
  img, video { background: var(--surface-2); }
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* 顶栏 */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.brand-logo {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}
.logo {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.brand-text h1 { font-size: 15px; font-weight: 600; }
.brand-text p { font-size: 11px; color: var(--text-3); }
.mode-badge {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
.mode-badge.live { color: var(--teal-dark); border-color: var(--teal); background: var(--tint-ok-bg); }

.container { max-width: 760px; margin: 0 auto; padding: 20px; }

/* 场景页 */
.home-head { margin: 12px 0 20px; }
.home-head h2 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.home-head p { font-size: 14px; color: var(--text-2); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.scenario-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.scenario-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(60,45,20,.1); }
.scenario-card .cat {
  display: inline-block;
  font-size: 11px;
  color: var(--primary-dark);
  background: var(--tint-warn-bg);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.scenario-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.scenario-card .age { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
/* R56：课程专属场景的来源标注（按课程生成的练习，与课程内容强绑定） */
.scenario-card .src {
  display: inline-block;
  font-size: 11px;
  color: var(--teal-dark);
  background: var(--tint-ok-bg);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  margin-left: 6px;
}
/* 陪练页顶部：这个场景来自哪门课哪节课 */
.chat-src { font-size: 12px; color: var(--teal-dark); margin: 2px 0 0; }
/* 说明：line-clamp 的盒子高度是按 line-height 算的整数倍。
   不写死 line-height 时，浏览器用字体默认行高，容器高度会落在两行与三行之间，
   第三行只露出上半截 —— 所以这里显式给 line-height。
   ⚠️ 关键坑：全局是 box-sizing:border-box，max-height 把 padding 也算进去了。
   .ref 上下各有 6px padding（合计 12px），如果 max-height 只按"文字高"给，
   内容区就被 padding 吃掉一截，最后一行底部（中文下缘/descender）会被裁掉一点。
   所以 max-height 必须 = 行高×行数 + padding + 余量。
   2026-10-08 用户要求：参考话术直接**完整显示三行**，不再截断 ——
   改成不限制高度（去掉 line-clamp / max-height），有几行显示几行。 */
.scenario-card .goal {
  font-size: 13px;
  line-height: 1.5;
  max-height: 44px;               /* 13 × 1.5 × 2 = 39px，再留 5px 余量 */
  color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.scenario-card .ref {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--teal-dark);
  background: var(--tint-ok-bg);
  border-radius: 8px;
  padding: 6px 8px;
  /* 三行都显示：不设 max-height、不用 line-clamp，让文本自然撑开 */
  display: block;
  overflow: visible;
}

/* ---------- 未登录时的"只能看不能用"状态 ----------
   思路：卡片本身保持完整可读（内容照常展示，不做模糊、不做遮罩），
   只在右上角挂一个小锁标签 + 轻微降低饱和度 —— 让人一眼知道"点了要先登录"，
   但不会误以为是内容缺失或页面坏了。 */
.scenario-card, .course-card { position: relative; }
.scenario-card.locked, .course-card.locked { cursor: pointer; }
.scenario-card.locked:hover, .course-card.locked:hover {
  transform: none;                       /* 未登录不给"可点击"的悬浮反馈，避免误导 */
  box-shadow: var(--shadow);
}
.lock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  pointer-events: none;                  /* 别挡住卡片本身的点击 */
  white-space: nowrap;
}
/* 课程卡右上角本来是缩略图，锁标签要浮在图上才看得清 */
.course-card .lock-badge { background: rgba(255, 255, 255, .92); }

/* 筛选栏 */
.filter-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
/* 全站单行输入框统一行盒高度，避免手机端文字被裁成上半截 */
.filter-bar input[type="search"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 20px;
  height: 44px;                 /* 20 + 11×2 + 2×1 = 44 */
  background: var(--surface);
  outline: none;
}
.filter-bar input[type="search"]:focus { border-color: var(--primary); }
.dimension-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dimension-chips .d-chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s ease;
}
.dimension-chips .d-chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.dimension-chips .d-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.custom-btn {
  align-self: flex-start;
  margin-top: 4px;
  background: linear-gradient(120deg, #7f77dd, #534ab7);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.custom-btn:hover { opacity: .92; }
.result-info { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 16px; }
.hint-row { margin-bottom: 10px; }
.hint-box {
  margin-top: 8px;
  background: var(--surface-2);
  border: 1px dashed var(--amber);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--amber);
}

/* 陪练页 */
.view { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.chat-title { flex: 1; min-width: 0; }
.chat-title h2 { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title p { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.ghost-btn:hover { background: var(--surface); }
.primary-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.primary-btn:hover { background: var(--primary-dark); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  font-size: 12px;
  color: var(--teal-dark);
  background: var(--tint-ok-bg);
  padding: 4px 10px;
  border-radius: 999px;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 280px);
  min-height: 320px;
  overflow-y: auto;
  padding: 4px 2px 12px;
}

.msg { display: flex; gap: 10px; max-width: 78%; }
.msg.child { align-self: flex-start; }
.msg.parent { align-self: flex-end; flex-direction: row-reverse; }
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.bubble {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.child .bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 4px; }
.msg.parent .bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }

.coach-card {
  background: var(--surface-2);
  border: 1px solid #d9cff5;
  border-radius: var(--radius);
  padding: 16px;
  align-self: stretch;
  animation: fade .25s ease;
}
.coach-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.coach-head .tag { font-size: 12px; color: var(--purple); font-weight: 500; }
.score-ring {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  margin-left: auto;
}
.score-ring.good { background: var(--tint-ok-bg); color: var(--teal-dark); }
.score-ring.mid { background: var(--tint-warn-bg); color: var(--amber); }
.score-ring.bad { background: var(--tint-err-bg); color: var(--red); }

.coach-section { margin-bottom: 8px; }
.coach-section .label { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.coach-section ul { list-style: none; }
.coach-section li { font-size: 14px; color: var(--text); padding-left: 18px; position: relative; margin-bottom: 2px; }
.coach-section li::before { position: absolute; left: 0; font-weight: 600; }
.coach-section.strengths li::before { content: "✓"; color: var(--teal); }
.coach-section.improvements li::before { content: "△"; color: var(--amber); }

.golden {
  background: #fff;
  border: 1px dashed var(--primary);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.tip { font-size: 13px; color: var(--text-2); }

.input-bar {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 8px 0 4px;
}
.input-bar input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 20px;
  height: 46px;                 /* 20 + 12×2 + 2×1 = 46 */
  background: var(--surface);
  outline: none;
}
.input-bar input:focus { border-color: var(--primary); }
.send-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.send-btn:hover { background: var(--primary-dark); }
.send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 总结弹层 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 25, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.summary-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: fade .25s ease;
}
.summary-card h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.avg-score { font-size: 56px; font-weight: 600; line-height: 1; margin: 8px 0 4px; }
.avg-label { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.turn-scores { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.turn-pill {
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.summary-comment { font-size: 14px; color: var(--text-2); margin-bottom: 20px; }

/* 训练报告逐轮点评 */
.rounds {
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.round { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.round-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.round .score-ring { width: 40px; height: 40px; font-size: 15px; }
.round-say { font-size: 13px; color: var(--text-2); margin-bottom: 4px; word-break: break-word; }
.round-say.child { color: var(--text); }
.round .coach-section li { font-size: 13px; }
.round .golden { font-size: 13px; padding: 8px 10px; }

/* 自定义弹层 */
.custom-card { max-width: 460px; text-align: left; }
.custom-sub { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.custom-form { display: flex; flex-direction: column; gap: 6px; }
.custom-form label { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.custom-opt { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-opt .opt {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}
.custom-opt .opt.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 说明：输入框想「文字正好垂直居中」，高度必须 = 行盒 + 上下内边距 + 上下边框。
   之前写成 height:38px（= 20+8×2+2×1），但上下各只有 1px 边框、8px 内边距，
   多出来的 2px 全堆在下面 → 文字偏下。
   现在统一 20(行盒) + 8×2(padding) + 1×2(border) = 38px，边框改成上下各 1px。 */
.custom-form textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.7;
  min-height: 70px;
  resize: vertical;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.custom-form textarea:focus { border-color: var(--primary); }
.custom-form .custom-free {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;            /* 行盒 20px */
  height: 38px;                 /* 20 + 8×2 + 1×2 = 38，文字垂直居中 */
  font-family: inherit;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  vertical-align: middle;
}
.custom-form .custom-free:focus { border-color: var(--primary); border-style: solid; }
.custom-form .primary-btn { margin-top: 12px; }
.custom-close { margin-top: 12px; width: 100%; }

/* ---------- 顶栏登录入口（替代原来的模式徽章） ---------- */
.login-entry {
  margin-left: auto;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-family: inherit;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.login-entry:hover { background: var(--primary); color: #fff; }
.login-entry.on { border-color: var(--border); background: var(--surface-2); color: var(--text-2); }

/* ---------- 登录弹层 ---------- */
.login-card h2 { font-size: 19px; margin-bottom: 14px; }
.login-tabs {
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
}
.login-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-2);
  padding: 8px 0;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s;
}
.login-tab.active { background: var(--surface); color: var(--primary); font-weight: 500; }
.login-card #lgAccount,
.login-card #lgPassword,
.login-card #lgNickname {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  height: 38px;                 /* 20 + 8×2 + 1×2 = 38，文字垂直居中 */
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.login-card #lgAccount:focus,
.login-card #lgPassword:focus,
.login-card #lgNickname:focus { border-color: var(--primary); }
.login-card .primary-btn { margin-top: 4px; width: 100%; }
.login-msg {
  font-size: 13px;
  color: var(--red);
  margin: 2px 0 10px;
  line-height: 1.6;
}
.login-msg.ok { color: var(--teal-dark); }
/* 上下文提示（比如"场景可以随便看，开始陪练需要先登录"）用中性色，
   这不是错误，是说明，别用红色吓人 */
.login-msg.hint { color: var(--text-2); }
.login-user {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-user b { color: var(--text); }

@media (max-width: 520px) {
  .msg { max-width: 88%; }
  .chat-title h2 { font-size: 16px; }
}

/* 顶栏导航 */
.nav-tabs {
  display: flex;
  gap: 4px;
  margin: 0 auto;
}
.nav-tab {
  padding: 6px 14px;
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 18px;
  transition: all 0.15s;
  cursor: pointer;
}
.nav-tab:hover { color: var(--primary); }
.nav-tab.active {
  background: var(--primary);
  /* 用 --on-primary 而不是写死 #fff：深色模式下 --primary 会变亮，
     白字对比度掉到 2:1 出头就糊了（浅色模式两者都是白色，外观不变） */
  color: var(--on-primary);
  font-weight: 600;
}

/* 顶部导航加到 4 个 tab（陪练 / 课程 / 说明 / 我的）后，窄屏一行放不下：
   品牌 + 登录占第一行，导航换到第二行居中，别让它横向溢出被裁掉。
   （2026-10-12 新增「我的」时补的） */
@media (max-width: 560px) {
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 14px;
  }
  .nav-tabs {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .nav-tab { padding: 6px 10px; font-size: 13.5px; }
  .brand-logo { height: 32px; }
}

/* 课程页 */
.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 420px) {
  .course-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}
.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60, 45, 20, 0.10);
}
.course-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: var(--surface-2);
}
.course-thumb.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: var(--primary);
}
.course-meta-row { padding: 12px 14px 14px; }
.course-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-3);
}

/* 首页「活动与图片」板块 */
.act-home { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.act-head { margin: 0 2px 14px; }
.act-head h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.fight-ic { width: 24px; height: 24px; vertical-align: middle; margin-right: 8px; color: var(--primary); }
.act-head p { font-size: 13px; color: var(--text-2); }
.act-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  .act-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 420px) {
  .act-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.act-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}
.act-clickable { cursor: pointer; }
.act-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60, 45, 20, 0.10);
}
.act-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.act-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.act-body { padding: 12px 14px 14px; }
.act-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.act-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--primary);
}
.act-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.act-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  padding: 24px 0;
}
/* 日期已过的活动：颜色调暗 + 轻微去色，并标注「已结束」 */
.act-card.past { opacity: 0.5; filter: grayscale(0.35); }
.act-ended {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 课程详情弹层 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  overflow-y: auto;
}
.course-detail-card {
  position: relative;
  background: var(--surface);
  border-radius: 20px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 14px 24px 32px;  /* 顶部不再给绝对定位按钮预留 56px；按钮改 sticky 后自己占一行 */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
/* 关闭按钮：跟着卡片一起滚，但永远停在可视区顶部（家长下拉看课时随时找得到、点得到）。
   原来是 absolute —— 卡片自己就是滚动容器，按钮会被内容一起卷走，下拉半屏就找不着了。 */
.course-close {
  position: sticky;       /* 停在卡片可视区顶部 10px 处 */
  top: 10px;
  z-index: 20;            /* 永远在最上层，可点击 */
  display: block;
  width: fit-content;
  margin-left: auto;      /* 推到右侧（按钮默认 inline-block，不加这句 margin 不生效） */
  background: var(--surface-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
.detail-head { margin-bottom: 14px; }
.detail-cat { font-size: 13px; color: var(--text-3); }
.detail-title { font-size: 22px; font-weight: 700; margin-top: 6px; color: var(--text); }
.course-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  margin-bottom: 16px;
}
.detail-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 10px;
  margin-bottom: 18px;
}

/* 小故事动画 */
.story-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.story-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}
.story-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ghost-btn.small {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
}
.story-pos {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}
.story-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  margin-bottom: 12px;
}
.story-takeaway {
  font-size: 14px;
  line-height: 1.6;
  color: var(--teal-dark);
  background: var(--tint-ok-bg);
  border-radius: 10px;
  padding: 12px 14px;
}
.story-takeaway::before {
  content: "小提示 · ";
  font-weight: 600;
}
.lessons { display: flex; flex-direction: column; gap: 16px; }
.lesson-block { background: var(--surface); }
.lesson-head {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.lesson-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lesson-points li {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-2);
  padding: 4px 0 4px 18px;
  position: relative;
}
.lesson-points li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--primary);
  font-weight: bold;
}

/* ---------- 页脚（客服 + 备案号） ---------- */
.site-footer {
  margin-top: 48px;
  padding: 24px 16px 32px;
  border-top: 1px solid #ececec;
  text-align: center;
}
.footer-inner { max-width: 680px; margin: 0 auto; }
.footer-line {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3, #999);
}
.footer-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.footer-line a:hover { color: var(--text-1, #333); }
.footer-icp { margin-top: 10px; }
@media (max-width: 560px) {
  .site-footer { margin-top: 32px; padding: 20px 14px 28px; }
  .footer-line { font-size: 11.5px; }
}

/* ==================== 使用说明页（可爱风） ==================== */
.gd-page { padding-bottom: 20px; }

/* 顶部欢迎卡 */
.gd-hero {
  text-align: center;
  padding: 32px 20px 34px;
  margin-bottom: 18px;
  background: linear-gradient(160deg, #fff1e2 0%, #ffe8f0 100%);
  border: 1px solid #ffe0cc;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.gd-hero::before,
.gd-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.gd-hero::before { width: 130px; height: 130px; top: -50px; right: -35px; }
.gd-hero::after  { width: 80px;  height: 80px;  bottom: -32px; left: -18px; }
.gd-hero-emoji {
  font-size: 60px;
  line-height: 1;
  margin-bottom: 12px;
  animation: gdBob 2.4s ease-in-out infinite;
}
@keyframes gdBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.gd-hero-title {
  font-size: 27px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.gd-hero-sub { font-size: 15px; color: var(--primary); margin-bottom: 14px; }
.gd-hero-note {
  display: inline-block;
  font-size: 13px;
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 6px 18px;
}

/* 一句话说明 */
.gd-intro {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px dashed #ffd9bd;
  border-radius: 16px;
  padding: 16px 16px;
  margin-bottom: 26px;
}
.gd-intro-icon { font-size: 27px; line-height: 1.3; flex-shrink: 0; }
.gd-intro-text { font-size: 14.5px; color: var(--text-2); line-height: 1.85; }
.gd-intro-text .hl { color: var(--primary-dark); font-weight: 600; }

/* 段落标题 */
.gd-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 14px 4px; }
.gd-section-emoji { font-size: 21px; }
.gd-section-title { font-size: 18px; font-weight: 700; color: var(--text); }

/* 步骤时间轴 */
.gd-steps { margin-bottom: 28px; }
.gd-step { display: flex; gap: 13px; }
.gd-step-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.gd-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffa76b, #e86f3d);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 7px rgba(232, 111, 61, 0.28);
}
.gd-step-line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  margin: 5px 0;
  background: repeating-linear-gradient(
    180deg, #f0d9c4 0, #f0d9c4 5px, transparent 5px, transparent 10px
  );
}
.gd-step-body {
  flex: 1;
  background: var(--surface);
  border: 1px solid #f3ece1;
  border-radius: 15px;
  padding: 15px 15px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 9px rgba(180, 140, 100, 0.06);
}
.gd-step-title { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.gd-step-desc { font-size: 14px; color: var(--text-2); line-height: 1.78; }
.gd-step-tip {
  margin-top: 9px;
  font-size: 13px;
  color: var(--primary);
  background: var(--surface-2);
  border-left: 3px solid #ffc79a;
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  line-height: 1.72;
}

/* 功能卡片 */
.gd-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.gd-feature {
  background: var(--surface);
  border: 1px solid #f3ece1;
  border-radius: 15px;
  padding: 15px 14px;
  box-shadow: 0 2px 9px rgba(180, 140, 100, 0.06);
}
.gd-feature-icon { font-size: 28px; line-height: 1; margin-bottom: 9px; }
.gd-feature-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.gd-feature-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.72; }

/* 小贴士 */
.gd-tips {
  background: linear-gradient(160deg, #f0fbf6 0%, #eaf7ff 100%);
  border: 1px solid #d6f0e4;
  border-radius: 16px;
  padding: 17px 16px;
  margin-bottom: 22px;
}
.gd-tip-row { display: flex; gap: 8px; margin-bottom: 9px; }
.gd-tip-row:last-child { margin-bottom: 0; }
.gd-tip-dot {
  color: var(--teal);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
}
.gd-tip-text { font-size: 13.5px; color: var(--teal-dark); line-height: 1.75; flex: 1; }

/* 温馨提醒 */
.gd-notice {
  background: var(--surface-2);
  border: 1px solid #f5e6cf;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 28px;
}
.gd-notice-title { font-size: 14.5px; font-weight: 700; color: var(--tint-warn-fg); margin-bottom: 7px; }
.gd-notice-text { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }

/* 底部 */
.gd-foot { text-align: center; padding-bottom: 12px; }
.gd-go-btn {
  width: 100%;
  max-width: 340px;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  box-shadow: 0 6px 18px rgba(232, 111, 61, 0.3);
}
.gd-foot-tip {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-3);
  padding: 8px;
  cursor: pointer;
}

/* 首页新手引导条 */
.guide-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(120deg, #fff2e3 0%, #ffe9f2 100%);
  border: 1px solid #ffdfc9;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(232, 111, 61, 0.1);
  transition: transform 0.15s, box-shadow 0.15s;
}
.guide-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(232, 111, 61, 0.16);
}
.guide-bar-emoji {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  animation: gdWobble 2.6s ease-in-out infinite;
}
@keyframes gdWobble {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-4px); }
}
.guide-bar-mid { flex: 1; min-width: 0; }
.guide-bar-title { font-size: 15px; font-weight: 700; color: var(--primary-dark); margin-bottom: 2px; }
.guide-bar-sub { font-size: 12.5px; color: var(--primary); }
.guide-bar-arrow { font-size: 24px; color: var(--primary); line-height: 1; flex-shrink: 0; }

/* 窄屏适配 */
@media (max-width: 560px) {
  .gd-hero { padding: 26px 16px 28px; }
  .gd-hero-emoji { font-size: 52px; }
  .gd-hero-title { font-size: 23px; }
  .gd-features { grid-template-columns: 1fr; }
  .gd-step-body { padding: 13px 13px 12px; }
  .gd-go-btn { max-width: 100%; }
}

/* ==================== 预约咨询师 ==================== */
.sc-wrap { max-width: 760px; margin: 0 auto; padding: 0 0 40px; }

.sc-head-card {
  background: linear-gradient(135deg, #fff3e8 0%, #ffe9d6 100%);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  margin-bottom: 18px;
  border: 1px solid #f5d9bf;
}
.sc-head-card h2 { font-size: 20px; color: var(--tint-warn-fg); margin-bottom: 6px; }
.sc-head-card p { font-size: 13.5px; color: var(--primary); line-height: 1.7; }

.sc-step { margin-bottom: 20px; }
.sc-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.sc-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.sc-loading { color: var(--text-3); font-size: 13.5px; text-align: center; padding: 16px 0; line-height: 1.8; }

/* 咨询师卡片 */
.sc-counselors { display: flex; flex-direction: column; gap: 12px; }
.sc-c-card {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  cursor: pointer;
  transition: all .18s;
  box-shadow: var(--shadow);
}
.sc-c-card:hover { border-color: #f0c9a8; transform: translateY(-2px); }
.sc-c-card.active { border-color: var(--primary); background: var(--surface-2); }
.sc-c-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffd9b8, #ffc59b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--tint-warn-fg);
  font-weight: 700;
}
.sc-c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-c-info { flex: 1; min-width: 0; }
.sc-c-name { font-size: 16px; font-weight: 700; color: var(--text); }
.sc-c-title { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.sc-c-tags { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.sc-c-tags i {
  font-style: normal;
  font-size: 11.5px;
  background: var(--tint-warn-bg);
  color: var(--tint-warn-fg);
  padding: 2px 8px;
  border-radius: 20px;
}
.sc-c-intro { font-size: 12.5px; color: var(--text-3); margin-top: 7px; line-height: 1.6; }
.sc-c-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
}

/* 日期条 */
.sc-dates {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.sc-date {
  flex: 0 0 auto;
  min-width: 62px;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 13px;
  padding: 9px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.sc-date:hover:not(:disabled) { border-color: #f0c9a8; }
.sc-date.active { border-color: var(--primary); background: var(--surface-2); }
.sc-date:disabled, .sc-date.off { opacity: .42; cursor: not-allowed; }
.sc-date-wd { font-size: 11.5px; color: var(--text-2); }
.sc-date-md { font-size: 15px; font-weight: 700; color: var(--text); }
.sc-date-n { font-size: 10.5px; color: var(--teal); }
.sc-date.off .sc-date-n { color: var(--red); }

/* 时段格子 */
.sc-slot-day { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.sc-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 9px; }
.sc-slot {
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 11px;
  padding: 11px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.25;
}
.sc-slot:hover:not(:disabled) { border-color: var(--primary); background: var(--surface-2); }
.sc-slot.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.sc-slot .ss { font-size: 10px; font-weight: 500; color: var(--text-3); }
/* 已过期 / 已被约：灰色、不可点（时间仍显示，方便一眼看到全天） */
.sc-slot.past, .sc-slot.booked {
  color: var(--text-3);
  background: var(--surface-2);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: .7;
}
.sc-slot.active .ss { color: rgba(255,255,255,.85); }
/* 触屏长按中的按压反馈 */
.sc-slot.pressing { border-color: var(--primary); background: var(--surface-2); transform: scale(.94); }
.sc-slot-hint { font-size: 12px; color: var(--text-3); margin-top: 9px; }
.sc-slot-hint.flash { color: var(--primary); font-weight: 600; }
/* 电脑端（有精确指针、可悬停）不需要长按，隐藏提示 */
@media (hover: hover) and (pointer: fine) { .sc-slot-hint { display: none; } }

/* 表单 */
.sc-form { display: flex; flex-direction: column; gap: 6px; }
.sc-form label { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.sc-form input, .sc-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.sc-form input {
  line-height: 20px;
  height: 46px;                 /* 20 + 11×2 + 2×2 = 46 */
}
.sc-form input:focus, .sc-form textarea:focus { border-color: var(--primary); }
.sc-form textarea { min-height: 84px; resize: vertical; line-height: 1.7; }
.sc-form .primary-btn { margin-top: 16px; }

/* 确认方式 / 微信号选择：胶囊选项（radio 被 .sc-form input 全局样式命中，需重置） */
.sc-method { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sc-method-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px; border: 2px solid var(--border); border-radius: 12px;
  font-size: 14px; color: var(--text-2); cursor: pointer;
  margin-top: 0; background: var(--surface); flex: 1; min-width: 140px;
  transition: border-color .15s, color .15s, background .15s;
}
.sc-method-opt input[type="radio"] {
  width: auto; height: auto; padding: 0; margin: 0;
  border: none; background: none; flex: none;
}
.sc-method-opt.on {
  border-color: var(--primary); color: var(--primary);
  background: var(--tint-ok-bg);
}

.sc-picked {
  margin-top: 12px;
  background: var(--tint-ok-bg);
  border: 1px solid #c3e9d8;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--teal-dark);
}
.sc-picked b { color: var(--teal-dark); }

.sc-empty {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.9;
}
.sc-empty a { color: var(--primary); font-weight: 700; }

.sc-notice {
  margin-top: 22px;
  background: var(--surface-2);
  border-left: 3px solid #f0c9a8;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.8;
}

/* 页脚按钮 */
.footer-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.footer-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 22px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.footer-btn:hover { border-color: var(--primary); background: var(--surface-2); }

/* 顶部 logo 可点击回主页 */
.brand { cursor: pointer; }
.brand:active { transform: scale(.97); }
.brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 10px; }

/* ==================== 联系客服弹层 ==================== */
.contact-card {
  width: 100%;
  max-width: 340px;
  margin: auto;
  padding: 24px 22px 18px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
  animation: ctPop .22s ease-out;
}
@keyframes ctPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-title {
  margin: 0 0 18px;
  font-size: 17px;
  text-align: center;
  color: var(--text-1);
}
.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: var(--bg);
}
.contact-label { font-size: 13px; color: var(--text-3); flex-shrink: 0; }
.contact-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  text-align: right;
  text-decoration: none;
}
a.contact-value { color: var(--primary); }

/* 客服弹层：登录后预约区 + 我的预约 */
.ct-my-appt { margin-top: 10px; }
.ct-my-appt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.ct-appt-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.ct-appt-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
}
.ct-appt-c { font-size: 14px; font-weight: 600; color: var(--text-1); }
.ct-appt-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}
.ct-appt-st { font-weight: 600; }
/* 预约状态色走变量：写死色号在深色模式下对比度会掉（--amber / --teal 都有深色配套值） */
.ct-st-pending { color: var(--amber); }
.ct-st-confirmed { color: var(--primary); }
.ct-st-done { color: var(--teal); }
.ct-st-canceled { color: var(--text-3); }
.ct-appt-loading, .ct-appt-empty { font-size: 12px; color: var(--text-3); margin: 0; }
.ct-login-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--bg);
  font-size: 12px;
  color: var(--text-3);
}
.ct-login-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: 13px;
  font-weight: 600;
}
.contact-book-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
}
.contact-close-btn {
  width: 100%;
  margin-top: 9px;
  padding: 11px;
  border-radius: 13px;
  font-size: 14px;
}

/* 常驻悬浮「客服」按钮：所有屏幕（手机 + 桌面网页版）都显示。
   手机端原为解决登录后找不到客服入口；桌面端家长同样需要一个随时可点的客服入口。 */
.float-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.float-contact:active { transform: scale(0.94); }

/* 说明页底部入口 */
.gd-foot-links { display: flex; flex-direction: column; gap: 7px; align-items: center; margin-top: 10px; }

@media (max-width: 560px) {
  .sc-wrap { padding: 0 0 30px; }
  .sc-head-card { padding: 18px 16px; }
  .sc-head-card h2 { font-size: 18px; }
  .sc-c-card { padding: 13px; gap: 11px; }
  .sc-c-avatar { width: 50px; height: 50px; font-size: 19px; }
  .sc-slot-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 7px; }
  .sc-slot { padding: 10px 2px; font-size: 13.5px; }
  .sc-date { min-width: 56px; }
}

/* ===== 员工在手机上看家长端时的「回后台」悬浮入口 =====
   只有 localStorage 里存在【有效】的后台登录凭证时才由 app.js 插入，家长看不到。
   放在左下角，避免和右下角的「客服」悬浮按钮重叠。 */
.staff-fab {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.staff-fab:active { opacity: 0.88; }
.staff-fab .sf-ic { font-size: 16px; }

/* ==========================================================================
   「我的」页 —— 对齐小程序 pages/mine
   --------------------------------------------------------------------------
   R38 只把工具箱搬来了，账号区（用户卡 / 会员卡 / 9 宫格 / 测评记录）整个是缺的，
   用户 2026-10-12 指出「小程序本身就有我的，你没搬过来」。这一段补的就是它。
   全部走主题变量 —— 深色模式自动适配，不写死色号。
   ========================================================================== */

/* ---------- 未登录 ---------- */
.mp-login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
}
.mp-login-avatar { font-size: 44px; line-height: 1.1; }
.mp-login-text { font-size: 14px; color: var(--text-2); margin: 10px 0 18px; }
.mp-login-btn { width: 60%; margin: 0 auto; }

/* ---------- 用户卡 ---------- */
.mp-user {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mp-av {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
/* 两层叠着：字母垫底、图片盖在上面。图片加载失败会把自己删掉，
   露出底下的字母 —— 这就是小程序里 avatarFailed 那套兜底（iPhone 锁定模式会拦图）。 */
.mp-av-letter { position: relative; z-index: 0; }
.mp-av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* 头像右下角的相机标：提示"这里能点"，但不挡脸 */
.mp-av-edit {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.mp-user-mid { flex: 1; min-width: 0; }
.mp-nick {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-phone { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.mp-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: 6px;
}
.mp-tag.is { color: var(--amber); background: var(--tint-warn-bg); }
.mp-count { text-align: center; flex-shrink: 0; padding-left: 10px; }
.mp-count-num { font-size: 24px; font-weight: 700; color: var(--primary); line-height: 1.1; }
.mp-count-label { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* R44：原来的 .mp-staff（员工专属卡片 +「回到工作台」按钮）已整块删除。
   员工/管理员现在和家长用同一套渲染，回后台有 bindStaffBack() 插的悬浮按钮。 */

/* ---------- 会员卡 ---------- */
.mp-vip {
  margin-top: 12px;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--vip-bg);
  color: var(--gold);
}
.mp-vip-left { font-size: 15px; font-weight: 600; }
.mp-vip-right { font-size: 13px; }
.mp-vip.is-member { background: var(--tint-warn-bg); color: var(--amber); }

/* ---------- 12 个功能入口（4 列自动换行，与小程序 pages/mine 逐字逐序一致） ---------- */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 14px;
}
.mp-func {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 2px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mp-func:active { background: var(--surface-2); }
.mp-func-ic { font-size: 21px; line-height: 1.1; }
.mp-func-name { font-size: 11.5px; color: var(--text-2); }

/* ---------- 空态 ---------- */
/* ⚠️ .mp-sec-title（区块小标题）R43 已删除：它只服务"我的测评记录"那个标题，
   而那个列表已经搬进宫格点开的弹层里，弹层自带 <h2>，没人再用这个类了。 */
.mp-empty { text-align: center; color: var(--text-3); font-size: 14px; padding: 30px 0; }

/* ---------- 测评记录 ---------- */
.mp-rec-list { display: flex; flex-direction: column; gap: 9px; }
.mp-rec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
.mp-rec:active { background: var(--surface-2); }
.mp-rec-ic { font-size: 21px; flex-shrink: 0; }
.mp-rec-mid { flex: 1; min-width: 0; }
.mp-rec-title {
  font-size: 14.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-rec-time { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.mp-rec-score { font-size: 20px; font-weight: 700; flex-shrink: 0; }
.mp-rec-score.good { color: var(--teal); }
.mp-rec-score.mid { color: var(--amber); }
.mp-rec-score.bad { color: var(--red); }

/* ---------- 底部按钮区 ---------- */
.mp-actions { margin-top: 18px; }

/* ---------- 「我的」页底部的小方框 ----------
   R41 时「情绪急救」和「预约面对面咨询」都还是这种小方框；
   R42 用户要求"跟上面的小框放一起、一个大小，放在关于我们前面" ——
   两者都挪进了 .mp-grid 变成普通格子，这里只剩「退出登录」一个。
   ⚠️ 退出登录**不放 emoji**（用户明确要求），所以文字直接居中排。 */
.mine-mini {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
  font: inherit;
  font-size: 14.5px;
  color: var(--text-2);
  cursor: pointer;
}
.mine-mini:active { background: var(--surface-2); }

/* ==========================================================================
   弹层通用（会员中心 / 报告 / 详情 / FAQ / 关于）
   ========================================================================== */
.mp-card {
  text-align: left;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.mp-card h2 { text-align: center; }
.mp-x {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.4;
  z-index: 1;
}
.mp-btn { width: 100%; margin-top: 18px; }
.mp-note { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 10px; }

/* 报告：4 个数字卡 */
.mp-rep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}
.mp-rep-card {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
}
.mp-rep-num { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1.15; }
.mp-rep-label { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.mp-tips { background: var(--surface-2); border-radius: 12px; padding: 14px; }
.mp-tips-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.mp-tip { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-top: 5px; }

/* FAQ */
.mp-faq { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mp-faq:last-child { border-bottom: none; }
.mp-faq-q { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mp-faq-a { font-size: 13px; color: var(--text-2); line-height: 1.65; }

/* 关于我们 */
.mp-about-logo { text-align: center; font-size: 44px; line-height: 1.1; margin: 6px 0 8px; }
.mp-about-name { text-align: center; font-size: 16px; font-weight: 600; color: var(--text); }
.mp-about-ver { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.mp-about-desc {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 16px 0;
  text-indent: 2em;
}
.mp-about-list { background: var(--surface-2); border-radius: 12px; padding: 2px 14px; }
.mp-about-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mp-about-row:last-child { border-bottom: none; }
.mp-about-key { color: var(--text-2); flex-shrink: 0; }
.mp-about-val { color: var(--text); font-weight: 600; text-align: right; }

/* ---------- 测评详情：陪练逐轮 ---------- */
.mp-rd-head { margin-bottom: 14px; }
.mp-rd-name { font-size: 15.5px; font-weight: 600; color: var(--text); }
.mp-rd-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.mp-rounds { display: flex; flex-direction: column; gap: 10px; }
.mp-round { border: 1px solid var(--border); border-radius: 12px; padding: 13px; }
.mp-round-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mp-round-score { color: var(--primary); font-size: 18px; font-weight: 700; }
.mp-say { font-size: 13px; color: var(--text-2); margin-top: 7px; line-height: 1.55; }
.mp-say.child { color: var(--text); }
.mp-coach-sec { margin-top: 8px; }
.mp-sec-label { font-size: 12px; color: var(--teal); font-weight: 600; }
.mp-coach-sec + .mp-coach-sec .mp-sec-label { color: var(--amber); }
.mp-sec-item { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.mp-golden {
  font-size: 13px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px;
  margin-top: 9px;
  color: var(--text);
  line-height: 1.6;
}
.mp-comment { font-size: 13.5px; color: var(--text-2); margin-top: 14px; line-height: 1.7; }
.mp-advice { font-size: 13px; color: var(--text-2); margin-top: 9px; line-height: 1.65; }

/* ---------- 测评详情：评估维度 ---------- */
.mp-rd-level { font-size: 21px; font-weight: 700; color: var(--primary); text-align: center; margin: 4px 0 14px; }
.mp-dims { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
/* 维度块：允许收缩，否则长维度名会把弹层顶宽（手机上横向溢出） */
.mp-dim { min-width: 0; }
.mp-dim-name { font-size: 13.5px; color: var(--text); margin-bottom: 5px; }
.mp-dim-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.mp-dim-fill { height: 100%; background: var(--teal); border-radius: 999px; }
.mp-dim-level { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* ==========================================================================
   会员中心
   ========================================================================== */
.mp-crown { text-align: center; font-size: 40px; line-height: 1.1; }
.mp-vip-title { text-align: center; font-size: 16px; font-weight: 600; color: var(--text); margin-top: 6px; }
.mp-vip-desc {
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  margin: 6px 0 16px;
  line-height: 1.6;
}
.mp-price-card {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.mp-price-label { font-size: 12.5px; color: var(--text-3); }
.mp-price { font-size: 16px; color: var(--primary); font-weight: 600; margin-top: 4px; }
.mp-price-num { font-size: 38px; font-weight: 700; line-height: 1.1; }
.mp-price-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.mp-benefits { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.mp-benefit { font-size: 13.5px; color: var(--text-2); }
.mp-vip-done {
  background: var(--tint-warn-bg);
  color: var(--amber);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* ==========================================================================
   认知评估页（对齐小程序 pages/assessment）
   ========================================================================== */
.as-wrap { max-width: 672px; margin: 0 auto; padding: 16px 16px 40px; }
.as-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.as-head-mid { flex: 1; min-width: 0; }
.as-head-mid h2 { font-size: 18px; font-weight: 600; color: var(--text); }
.as-head-mid p { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.as-prog { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.as-prog-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .25s ease; }
.as-prog-text { font-size: 12px; color: var(--text-3); text-align: right; margin-top: 5px; }
.as-q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 12px;
}
.as-q-text { font-size: 16px; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.as-opts { display: flex; flex-direction: column; gap: 9px; }
.as-opt {
  text-align: left;
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
}
.as-opt:active { background: var(--surface-2); }
/* 答题反馈：对=绿底，错=红底；正确项同时高亮，让人知道该选什么 */
.as-opt.correct { background: var(--tint-ok-bg); border-color: var(--tint-ok-fg); color: var(--tint-ok-fg); font-weight: 600; }
.as-opt.wrong { background: var(--tint-err-bg); border-color: var(--tint-err-fg); color: var(--tint-err-fg); }
.as-nav { margin-top: 12px; }
.as-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 12px;
}
.as-level { font-size: 22px; font-weight: 700; color: var(--primary); text-align: center; }
.as-score { font-size: 40px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.15; }
.as-full { font-size: 15px; color: var(--text-3); font-weight: 400; }
.as-comment { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin: 14px 0 18px; }
.as-advice-box { background: var(--surface-2); border-radius: 12px; padding: 14px; margin-top: 16px; }
.as-advice { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-top: 5px; }
.as-restart { width: 100%; margin-top: 18px; }
.as-loading { text-align: center; color: var(--text-3); font-size: 14px; padding: 40px 0; }

@media (max-width: 560px) {
  .as-wrap { padding: 12px 12px 34px; }
  .mp-card { max-height: 92vh; padding: 22px 18px; }
}

/* ==================== 孩子档案 + 续聊（P2，与小程序对齐） ==================== */
/* 自定义 / 孩子档案 并排 */
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-btn.archive {
  background: var(--primary);
  color: var(--on-primary);
}

/* 续聊条：上次没练完，从断开处接着聊 */
.resume-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
}
.resume-bar:hover { border-color: var(--primary); }
.rb-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  line-height: 28px;
  text-align: center;
  flex-shrink: 0;
}
.rb-mid { flex: 1; min-width: 0; }
.rb-title { font-size: 14px; font-weight: 700; color: var(--text-1, var(--text)); }
.rb-sub {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rb-arrow { font-size: 20px; color: var(--text-3); line-height: 1; }

/* 档案弹层里的输入框（不复用 .custom-free，避免与自定义弹层的联动脚本互相踩） */
.custom-form .pf-free {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  height: 38px;
  font-family: inherit;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
}
.custom-form .pf-free:focus { border-color: var(--primary); }
.custom-form .pf-free::placeholder { color: var(--text-3); }

/* 档案弹层内的提示 / 推荐结果 */
.pf-msg { font-size: 12.5px; padding: 8px 10px; border-radius: 10px; line-height: 1.6; }
.pf-msg.ok { background: var(--tint-ok-bg, var(--surface-2)); color: var(--teal); }
.pf-msg.err { background: var(--tint-err-bg, var(--surface-2)); color: var(--red); }
.pf-result {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pf-result-title { font-size: 13.5px; font-weight: 700; color: var(--text-1, var(--text)); margin-bottom: 8px; }
.pf-course { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.pf-course:last-child { border-bottom: none; }
.pf-course-title { font-size: 13.5px; font-weight: 600; color: var(--text-1, var(--text)); }
.pf-course-meta { font-size: 12px; color: var(--text-2); }

/* ==================== 课程详情 · 新课纲版式（R53） ====================
   设计原则：克制、留白、层次靠间距和边框，不靠阴影和渐变。
   全部走主题变量 —— 这个段落会被「无硬编码色号」检查扫到，写死色号会红。 */
.cd { padding: 4px 2px 8px; }
.cd-head { padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.cd-cat { font-size: 12px; color: var(--primary); letter-spacing: .02em; margin-bottom: 6px; }
.cd-title { font-size: 21px; font-weight: 500; line-height: 1.35; color: var(--text-1); margin: 0 0 10px; }
.cd-desc { font-size: 13.5px; line-height: 1.75; color: var(--text-2); margin: 0; }

/* 这门课只改一个动作 —— 全页最醒目的东西 */
.cd-action {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  background: var(--tint-warn-bg);
}
.cd-action-label { font-size: 11.5px; color: var(--primary); letter-spacing: .06em; margin-bottom: 7px; }
.cd-action-text { font-size: 16.5px; font-weight: 500; line-height: 1.55; color: var(--text-1); }

/* 工具条：听这门课 */
.cd-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cd-listen-btn {
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.cd-listen-btn.playing { background: var(--primary); color: var(--on-primary); }
.cd-toolbar-meta { font-size: 12px; color: var(--text-3); }
/* 这行也接了"听整门课"，给个手型 —— 家长看到"3 节 · 约 5 分钟"一定会去点它 */
.cd-toolbar-meta.is-clickable { cursor: pointer; }
.cd-toolbar-meta.is-clickable:active { opacity: .7; }
/* 点过之后自己要"亮"：这行字是入口，必须给反馈，不能安静地开始播 */
.cd-toolbar-meta.is-on { color: var(--primary); font-weight: 600; }
.cd-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--tint-ok-bg);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.cdp-done { color: var(--tint-ok-fg); }
.cdp-streak { color: var(--tint-ok-fg); }
.cdp-sep { color: var(--text-3); }

/* 目录 */
.cd-toc { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.cd-toc-head { font-size: 12px; color: var(--text-3); letter-spacing: .04em; margin-bottom: 10px; }
.cd-toc-item { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--text-1); }
.cd-toc-no { font-size: 11.5px; color: var(--primary); font-variant-numeric: tabular-nums; }
.cd-toc-t { flex: 1; }

/* 单节 */
.cd-lesson { border-top: 1px solid var(--border); padding: 22px 0 8px; }
.cd-lesson-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cd-no {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  background: var(--tint-warn-bg);
  border-radius: 6px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.cd-lesson-head h3 { flex: 1; font-size: 17px; font-weight: 500; color: var(--text-1); margin: 0; line-height: 1.4; }
.cd-audio-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.cd-audio-btn.playing { border-color: var(--primary); color: var(--primary); }

/* 「当前节」高亮（R53）：点过朗读的那一节要一直亮着，停了也不熄。
   只改字色和号牌，不加整块底色 —— 大色块一多，整页就不像课程了。 */
.cd-audio-btn.is-current {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--tint-warn-bg);
}
.cd-lesson.is-current .cd-lesson-head h3 { color: var(--primary); }
.cd-lesson.is-current .cd-no,
.cd-lesson.is-playing .cd-no { background: var(--primary); color: var(--on-primary); }

/* 跟读稿（R53b）：朗读时字跟着一个一个亮，家长抬眼就知道读到哪。
   三态：未读=弱灰、已读=正文色、正在读=主色+淡底。 */
.cd-read {
  margin: 16px 0 6px;
  padding: 14px 16px 16px;
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
}
.cd-read-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--primary);
  letter-spacing: .04em;
}
.cd-read-tip { color: var(--text-3); letter-spacing: 0; }
.cd-read-body {
  font-size: 15px;
  line-height: 2.05;
  color: var(--text-3);
  word-break: break-word;
}
.cd-rb { transition: color .16s ease, background-color .16s ease; }
.cd-rb.done { color: var(--text-1); }
.cd-rb.now {
  color: var(--primary);
  font-weight: 600;
  background: var(--tint-warn-bg);
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.cd-hook {
  margin: 0 0 14px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--border);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}
.cd-principle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 12px;
}
.cd-principle span { font-size: 11px; font-weight: 400; color: var(--text-3); letter-spacing: .06em; }
.cd-min {
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--tint-warn-bg);
}
.cd-min-label { font-size: 11px; color: var(--primary); letter-spacing: .06em; }
.cd-min p { margin: 6px 0 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--text-1); }

.cd-block-h {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .04em;
  margin: 20px 0 10px;
}
.cd-block-h.warn { color: var(--tint-err-fg); }

.cd-how { margin: 0; padding-left: 20px; }
.cd-how li { font-size: 14px; line-height: 1.8; color: var(--text-1); margin-bottom: 7px; }
.cd-pitfalls { margin: 0; padding-left: 0; list-style: none; }
.cd-pitfalls li {
  position: relative;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-2);
  background: var(--tint-err-bg);
  border-radius: 8px;
  padding: 9px 12px 9px 30px;
  margin-bottom: 7px;
}
.cd-pitfalls li::before {
  content: "✕";
  position: absolute;
  left: 11px;
  top: 9px;
  font-size: 11px;
  color: var(--tint-err-fg);
}
.cd-stuck { margin: 0; padding-left: 0; list-style: none; }
.cd-stuck li {
  position: relative;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-1);
  padding: 7px 0 7px 24px;
  border-bottom: 1px dashed var(--border);
}
.cd-stuck li:last-child { border-bottom: none; }
.cd-stuck li::before {
  content: "→";
  position: absolute;
  left: 4px;
  top: 7px;
  font-size: 12px;
  color: var(--primary);
}

/* 照着说：错 / 对 / 为什么 */
.cd-script { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.cd-script-row { display: flex; gap: 10px; padding: 11px 14px; align-items: flex-start; }
.cd-script-row.bad { background: var(--tint-err-bg); }
.cd-script-row.good { background: var(--tint-ok-bg); }
.cd-tag {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  margin-top: 2px;
}
.cd-script-row.bad .cd-tag { color: var(--tint-err-fg); border: 1px solid var(--tint-err-fg); }
.cd-script-row.good .cd-tag { color: var(--tint-ok-fg); border: 1px solid var(--tint-ok-fg); }
.cd-script-row p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-1); }
.cd-script-row.bad p { color: var(--text-2); }
.cd-script-why {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-2);
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* 小剧场 */
.cd-case { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface-2); }
.cd-case-scene { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; line-height: 1.7; }
.cd-dialog { display: flex; flex-direction: column; gap: 9px; }
.cd-line { display: flex; gap: 9px; align-items: flex-start; }
.cd-who {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-3);
  width: 34px;
  padding-top: 3px;
}
.cd-line p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  padding: 8px 12px;
  border-radius: 10px;
  max-width: 82%;
}
.cd-line.parent p { background: var(--surface); border: 1px solid var(--border); color: var(--text-1); }
.cd-line.child p { background: var(--tint-neutral-bg); color: var(--text-1); }
.cd-line.wrong p { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.cd-line.wrong .cd-who { color: var(--tint-err-fg); }
.cd-case-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tint-ok-fg);
}
.cd-story-video { width: 100%; border-radius: var(--radius); background: var(--surface-2); margin-bottom: 18px; }

/* 这一节的演绎视频（R53）：每节挂自己的片子，说明文字放右下角，不抢正文 */
.cd-story-video-wrap { margin: 16px 0 6px; }
.cd-story-video-wrap .cd-story-video { margin-bottom: 6px; }
.cd-story-cap { font-size: 11.5px; color: var(--text-3); text-align: right; }

/* 今天的小尝试 */
.cd-task {
  margin-top: 18px;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  padding: 15px 16px;
  background: var(--surface);
}
.cd-task-label { font-size: 11.5px; color: var(--primary); letter-spacing: .06em; margin-bottom: 7px; }
.cd-task-text { margin: 0 0 8px; font-size: 14.5px; font-weight: 500; line-height: 1.65; color: var(--text-1); }
.cd-task-tip { font-size: 12.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 12px; }
.cd-task-btn {
  width: 100%;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-size: 13.5px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.cd-task-btn.done { background: var(--tint-ok-bg); border-color: var(--tint-ok-fg); color: var(--tint-ok-fg); }

.cd-lesson-foot { display: flex; justify-content: center; margin-top: 14px; }
.cd-more-btn {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 10px;
}
.cd-orig { padding: 4px 0 0; }
.cd-orig p { font-size: 13px; line-height: 1.85; color: var(--text-2); margin: 0 0 10px; }

/* 底部：练一遍 */
.cd-practice {
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  text-align: center;
}
.cd-practice-title { font-size: 16px; font-weight: 500; color: var(--text-1); margin-bottom: 8px; }
.cd-practice p { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 0 0 14px; }
.cd-practice .primary-btn { width: 100%; }

/* 课程卡片上的一句话动作 */
.course-action { font-size: 12px; line-height: 1.6; color: var(--primary); margin-top: 6px; }

@media (max-width: 560px) {
  .cd-title { font-size: 19px; }
  .cd-action-text { font-size: 15.5px; }
  .cd-lesson-head h3 { font-size: 16px; }
  .cd-line p { max-width: 100%; }
}