/* ============================================================================
   reference.css — 数趣实验室本地预览站页面样式

   视觉口径：2026-10-18 起全站切换《视觉设计规范 ·「阳光工坊」V1.0》
   （doc/plans/design-baseline-阳光工坊配色-2026-10-18.md）。
   2026-10-20 按用户批注整体转暖：墨绿主行动色退役，改用烘栗棕；
   浅豆绿 tint 退役，改用暖沙 tint；主橙点睛与米白纸底保留。
   - 纸感实底：页面米白 #FBF8F3，卡片白/卡纸 #F3EBDF；玻璃渐变磨砂整轮退役
     （无 backdrop-filter、无背景渐变、无 glass-* 变量）。
   - 质感签名：2.5px 墨褐描边 + 硬投影（同色偏移、无模糊）+ 大圆角 12–18px。
   - 主橙 #E07A3F 只「看见」（大图形/插画/点睛，禁压白字）；可点文字用深烘橙
     #A94F1D（米白底 5.19 AA）；主按钮烘栗棕 #7A4A2B 底白字（7.39 AA）。
   - 暖橙大面积色块一屏 ≤ 2 处（§3 体验温度配额）。
   对比度按规范 §4 实测表与 WCAG 2.1 公式核算。对标站仅作布局参考，
   其青蓝配色不复刻（AGENTS.md §2 红线）。
   ========================================================================== */

:root {
  /* ---- 阳光工坊 token（规范 §2；页面级无前缀） ---- */
  --paper: #FBF8F3;      /* 米白：页面底 */
  --card-paper: #F3EBDF; /* 卡纸面 */
  --forest: #7A4A2B;     /* 烘栗棕：主按钮/选中态/标题（原墨绿退役） */
  --forest-deep: #5E3A24;/* 深烘栗：hover/面板底色 */
  --orange: #E07A3F;     /* 视觉主橙：大图形/插画/点睛，禁压白字 */
  --baked: #A94F1D;      /* 深烘橙：链接/可点文字（米白底 5.19 AA） */
  --honey: #F2B33D;      /* 蜜黄：高亮/奖励，禁配白字 */
  --peach: #F8DCC5;      /* 浅杏：橙系 tint */
  --sage: #F6E3CE;       /* 暖沙：暖色 tint/选中底（原浅豆绿退役） */
  --moss: #6B6B2B;       /* 成功（暖橄榄） */
  --sunset: #E09B2D;     /* 警告（配墨褐字） */
  --tomato: #C94F3D;     /* 错误 */
  --denim: #8A5A3B;      /* 信息（暖陶棕） */
  --wood: #8C6A4F;       /* 木棕：输入框描边/装饰 */

  /* 兼容别名（旧 token 名保留，值切到暖色，避免散落引用断裂） */
  --brand: #7A4A2B;
  --brand-hover: #5E3A24;
  --brand-active: #4A2B18;
  --brand-soft: #F6E3CE;
  --brand-soft-hover: #EFD4B8;
  --brand-border: #E2C3A4;
  --brand-disabled: #B9A18C;

  --accent: #E07A3F;        /* 仅作填充，不承载文字、不作描边 */
  --accent-strong: #A94F1D;
  --accent-deep: #A94F1D;
  --accent-soft: #F8DCC5;
  --accent-soft-hover: #F2D0B4;
  --accent-text: #33261B;   /* 墨褐字压浅杏 11.18 AAA（禁白字压橙） */
  --accent-border: #EBD3BC;

  /* 背景与面 */
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --surface-sunken: #F3EBDF;
  --surface-hover: #F6EFE4;
  --surface-disabled: #EFE8DC;
  --scrim: rgba(51, 38, 27, 0.55); /* 遮罩：暖墨褐系，不用纯黑（规范 §6.4） */

  /* 文字 */
  --ink: #33261B;
  --ink-soft: #6B5D4F;
  --ink-faint: #7A6A57;    /* 米白底 5.18 AA（辅助小字下限） */
  --ink-disabled: #A2937F;
  --ink-inverse: #FFFFFF;

  /* 线 */
  --line: #E3D8C6;
  --line-strong: #D5C7B2;
  --border-input: #8C6A4F; /* 木棕，白底 4.86（非文字 3:1 达标） */

  /* 语义色 */
  --error: #C94F3D; --error-soft: #F9E4DE; --error-border: #EFC0B6;
  --warning: #8A5A08; --warning-soft: #FAF1D8; --warning-border: #E9D6A4;
  --success: #6B6B2B; --success-soft: #F1EDD8; --success-border: #D9D2A9;
  --info: #8A5A3B; --info-soft: #F4E8DE; --info-border: #E0C9B8;

  /* 焦点（规范 §6.6：墨褐描边环，环画在元素外的纸底上 13.83 AAA） */
  --focus: #33261B;
  --focus-inverse: #FFFFFF;
  --focus-ring-shadow: 0 0 0 3px rgba(51, 38, 27, 0.28);

  /* 硬投影（同色偏移、无模糊；源色 = 墨褐，规范 §3 规则 4） */
  --shadow-ink: rgba(51, 38, 27, 0.88);
  --hs-1: 2px 2px 0 var(--shadow-ink);
  --hs-2: 3px 3px 0 var(--shadow-ink);
  --hs-3: 5px 5px 0 var(--shadow-ink);
  --hs-4: 8px 8px 0 var(--shadow-ink);
  /* 兼容别名 */
  --shadow-1: 2px 2px 0 var(--shadow-ink);
  --shadow-2: 3px 3px 0 var(--shadow-ink);
  --shadow-3: 5px 5px 0 var(--shadow-ink);
  --shadow-4: 8px 8px 0 var(--shadow-ink);
  --shadow-card: var(--hs-2);

  /* 圆角（大圆角 12–18px） */
  --radius-sm: 8px;
  --radius-btn: 12px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* 字号阶梯 */
  --fs-display: clamp(28px, 2.4vw, 36px);
  --fs-h2: 22px;
  --fs-h3: 19px;
  --fs-card-title: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --lh-body: 1.65;
  --lh-title: 1.35;

  /* 间距 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* 仅使用本机中文字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
               "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;

  /* 兼容别名 */
  --card: var(--surface);
  --muted: var(--ink-soft);
}

* { box-sizing: border-box; }

/* hidden 属性必须压过任何显式 display 规则：否则隐藏的弹窗层/提示条/覆盖层
   虽然不可见却仍然占据 fixed 全屏区域并拦截所有点击（本轮实测到的真实缺陷） */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--bg); /* 阳光工坊：米白纸底，实底无渐变 */
  /* 2026-10-17：14px → 16px（01 §4 预留下轮方案落地；配套 .res-grid minmax 210px，三档视口实测） */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* 覆盖层 / 弹窗打开时锁定背景滚动：否则滚轮会滚动被遮住的底层列表（本轮实测到的交互缺陷） */
body.detail-open,
body.modal-open { overflow: hidden; }

/* ---- skip-link：默认移出屏幕，键盘聚焦时滑入（不得用 display:none，会脱离 Tab 序） ---- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  background: var(--forest); color: var(--ink-inverse);
  border: 2px solid var(--ink); border-radius: var(--radius-btn);
  box-shadow: var(--hs-1);
  padding: 10px 16px; min-height: 44px;
  display: inline-flex; align-items: center; font-weight: 600;
  transform: translateY(-64px); opacity: 0; pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.skip-link:focus-visible {
  transform: translateY(0); opacity: 1; pointer-events: auto;
  outline: 3px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--paper);
}
/* 程序化跳转目标获得焦点时不应显示焦点环（main[tabindex="-1"]） */
main:focus-visible, main:focus { outline: none; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--baked); }
code { background: rgba(51, 38, 27, 0.07); padding: 0.1em 0.35em; border-radius: var(--radius-sm); font-size: 0.92em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 0.6em; }
ol, ul { margin: 0; padding-left: 1.4em; }

/* ---- 焦点环（规范 §6.6）：3px 墨褐描边，环落在元素外的纸底上 ---- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* 深色实底（墨绿/墨褐/番茄红按钮）：环同样画在元素外纸底上，内嵌白环增强（墨绿底白 7.49 AA） */
.btn-primary:focus-visible,
.btn-dark:focus-visible,
.btn-pill-dark:focus-visible,
.grade-chip.is-active:focus-visible,
.toast :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}
.btn-primary.is-inferred:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.search-bar:focus-within { border-color: var(--forest); }
.search-bar.is-ai:focus-within { border-color: var(--baked); }

/* ---------- 布局骨架 ---------- */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.views { flex: 1; padding: 8px clamp(14px, 3vw, 34px) 48px; }
.view { max-width: 1180px; margin: 0 auto; }
.block { margin-bottom: 26px; }

/* ---------- 顶部导航共享品牌图形 ---------- */
.brand-mark { width: 30px; height: 30px; display: inline-block; flex: 0 0 30px; }
.brand-mark svg { width: 30px; height: 30px; display: block; }
.brand-text { font-weight: 700; white-space: nowrap; overflow: hidden; }

/* ---- 按钮质感（规范 §6.2）：2px 墨褐描边 + 硬投影；按压位移塌陷（≤ .08s）；
   禁用 = 卡纸底 + 虚线描边 + 淡墨字，不用 opacity ---- */
.btn-ghost {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-btn);
  box-shadow: var(--hs-1);
  padding: 10px 14px; min-height: 44px; color: var(--ink-soft);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.btn-sm { padding: 6px 14px; min-height: 44px; font-size: 12px; }
.btn-login-link { background: none; border: none; color: var(--ink-soft); padding: 4px 8px; min-height: 44px; }
.btn-login-link:hover { color: var(--forest); background: var(--surface-hover); }
.btn-pill-dark {
  background: var(--ink); color: var(--ink-inverse); border: 2px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--hs-1);
  padding: 11px 18px; min-height: 44px; font-weight: 600;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-pill-dark:hover { background: #4A3A2C; }
.btn-pill-dark:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.btn-primary {
  background: var(--forest); color: var(--ink-inverse); border: 2px solid var(--ink); border-radius: var(--radius-btn);
  box-shadow: var(--hs-2); /* 主按钮 3px 3px 0（规范 §6.2） */
  padding: 11px 18px; min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-primary:hover { background: var(--forest-deep); }
.btn-primary:active { transform: translate(2.5px, 2.5px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.btn-primary svg, .btn-dark svg { width: 16px; height: 16px; }
.btn-primary.is-block { width: 100%; justify-content: center; }
.btn-primary.is-inferred { background: var(--warning-soft); color: var(--warning); border: 2px dashed var(--warning-border); box-shadow: none; }
.btn-primary.is-inferred:hover { background: #F5E9C8; }
.btn-primary.is-inferred:active { transform: none; }
.btn-dark {
  background: var(--ink); color: var(--ink-inverse); border: 2px solid var(--ink); border-radius: var(--radius-btn);
  box-shadow: var(--hs-1);
  padding: 11px 14px; min-height: 44px; font-weight: 600;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-dark:hover { background: #4A3A2C; }
.btn-dark:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.btn-more {
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--radius-pill); padding: 11px 26px; min-height: 44px; font-weight: 600;
  box-shadow: var(--hs-1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-more:hover { background: var(--sage); }
.btn-more:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.link-like { background: none; border: none; color: var(--baked); padding: 0; line-height: 24px; text-decoration: underline; }
.link-like:hover { color: var(--ink); }

/* 禁用态统一口径：卡纸底 + 虚线描边 + 淡墨字，禁止 opacity（规范 §6.2） */
.btn-primary:disabled, .btn-primary.is-disabled,
.btn-ghost:disabled, .btn-dark:disabled, .btn-pill-dark:disabled, .btn-more:disabled,
.grade-chip:disabled, .mode-option:disabled, .header-link:disabled, .btn-login-link:disabled,
.detail-close:disabled, .modal-x:disabled {
  background: var(--surface-disabled);
  color: var(--ink-disabled);
  border: 2px dashed var(--line-strong);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ---------- 通用区块 ---------- */
.card {
  background: var(--surface); border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: var(--hs-2); padding: 20px;
}
.section-title { font-size: var(--fs-h3); line-height: 1.4; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-title svg { width: 17px; height: 17px; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.state-note {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--surface); border: 2px solid var(--ink); border-left-width: 6px; border-left-color: var(--denim);
  border-radius: var(--radius-sm); padding: 9px 12px; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft);
  box-shadow: var(--hs-1);
}
.state-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--denim); }
/* 边界声明已按 2026-10-20 批注移除；保留占位说明避免误恢复 flex 排版 */
.static-boundary { display: block; }

/* ---------- 首屏品牌区（记忆点 #1：价值主张 + 原创剪纸风几何插画） ---------- */
.hero {
  display: flex; align-items: stretch; gap: clamp(20px, 4vw, 48px);
  margin: 0 0 10px; flex-wrap: wrap;
}
.hero-copy { flex: 1 1 440px; min-width: 0; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink-soft); margin-bottom: 12px;
}
.hero-kicker::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange);
}
.hero-title {
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.28; color: var(--ink);
  letter-spacing: 0.01em; font-weight: 800; margin-bottom: 14px;
}
/* 记忆点：蜜黄「荧光笔」划重点（蜜黄只配深色字 7.87 AAA） */
.hero-hl {
  background: var(--honey); color: var(--ink);
  padding: 0 0.16em; border-radius: 6px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero-sub { font-size: 16px; color: var(--ink-soft); max-width: 36em; margin: 0; }
/* 2026-10-21 批注：插画缩小到与文案等高，不再自己撑高整块（比例挂在容器上，宽度由等高反推） */
.hero-art {
  flex: 0 1 auto; min-width: 0; margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
  aspect-ratio: 380 / 270;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
/* 2026-10-20 批注：窄屏下插画不再整块换行独占一行，缩小后与大标题保持同一行 */
@media (max-width: 900px) {
  .hero-copy { flex: 1 1 0; } /* basis 归零：插画缩小后文案占剩余宽度，两者必同行 */
  .hero-art { flex-basis: clamp(140px, 26vw, 260px); min-width: 140px; aspect-ratio: auto; }
  .hero-art svg { width: 100%; height: auto; max-height: 100%; } /* 窄屏按宽度收，避免超出分配列宽 */
}

/* ---------- 已审课件品牌化入口卡（仅升级视觉，href 与数据口径不变） ---------- */
.accepted-entry { margin: 4px 0 20px; }
.accepted-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card-paper); border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: var(--hs-3);
  padding: 14px 18px; text-decoration: none; color: var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.accepted-card:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--shadow-ink); }
.accepted-card:active { transform: translate(2.5px, 2.5px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.accepted-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px;
  background: var(--forest); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow-ink);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-inverse);
}
.accepted-icon svg { width: 24px; height: 24px; }
.accepted-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accepted-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-soft); }
.accepted-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.accepted-sub { font-size: 12.5px; color: var(--ink-soft); }
.accepted-arrow {
  margin-left: auto; flex: 0 0 auto;
  font-size: 22px; font-weight: 800; color: var(--baked);
  transition: transform 0.15s ease;
}
.accepted-card:hover .accepted-arrow { transform: translateX(3px); }

/* ---------- 会员营销区 ---------- */
.marketing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.marketing-title { font-size: var(--fs-h3); }
/* 标签：浅杏底 + 墨褐字（11.18 AAA）；主橙不承载文字 */
.tag-tag { background: var(--peach); color: var(--ink); border: 1.5px solid var(--accent-border); border-radius: var(--radius-pill); padding: 3px 12px; font-size: 12px; font-weight: 600; }
.marketing-body { display: flex; align-items: center; gap: clamp(12px, 3vw, 34px); flex-wrap: wrap; }
/* 层级：一张深色卡压画面——墨绿实底 + 墨褐描边 + 硬投影（无渐变光晕） */
.price-card {
  position: relative; overflow: hidden;
  background: var(--forest);
  color: var(--ink-inverse);
  border: 2.5px solid var(--ink); border-radius: var(--radius-md);
  box-shadow: var(--hs-2);
  padding: 14px 20px; min-width: 168px;
}
.price-card > * { position: relative; }
.price-label { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.price-value { font-size: 30px; font-weight: 800; color: #FFFFFF; line-height: 1.15; font-variant-numeric: tabular-nums; }
.price-symbol { font-size: 18px; margin-right: 2px; }
.price-count { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.price-count-note { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
/* 左右留 22px，避免 0% / 100% 两端节点的 translateX(-50%) 溢出卡片造成横向滚动 */
.ladder { position: relative; flex: 1 1 280px; min-width: 240px; height: 78px; margin: 0 22px; }
.ladder-line { position: absolute; top: 30px; left: 0; right: 0; height: 4px; background: var(--line-strong); border-radius: 2px; }
.ladder-fill { position: absolute; top: 30px; left: 0; height: 4px; background: var(--forest); border-radius: 2px; }
.ladder-node { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.ladder-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); margin: 23px auto 6px; border: 2px solid var(--ink); }
.ladder-node.is-current .ladder-dot { background: var(--orange); border-color: var(--ink); }
.ladder-at { display: block; font-size: 12px; color: var(--muted); }
.ladder-price { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.ladder-node.is-current .ladder-price { color: var(--forest); }
.marketing-cta { flex: 0 0 auto; }
.marketing-sub { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; }
.marketing-ladder-row { margin-top: 20px; }
/* 套餐卡 2×2（2026-10-22 参考站风格静态还原；演示文案，不发起支付） */
.pkg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
@media (max-width: 720px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 16px 18px 14px; min-width: 0;
  box-shadow: var(--hs-1);
}
.pkg-card--vip { background: linear-gradient(160deg, var(--peach), #FBEFD9); border-color: var(--accent-border); }
.pkg-scope { font-size: 11.5px; color: var(--muted); }
.pkg-badge {
  position: absolute; top: 12px; right: 14px;
  background: var(--forest); color: var(--ink-inverse); font-size: 11px; font-weight: 700;
  border-radius: var(--radius-pill); padding: 2px 10px; border: 1.5px solid var(--ink);
}
.pkg-badge--dark { background: var(--ink); }
.pkg-name { font-size: 17px; font-weight: 800; }
.pkg-valid { font-size: 12px; color: var(--muted); }
.pkg-price { margin-top: 2px; font-variant-numeric: tabular-nums; }
.pkg-price b { font-size: 24px; font-weight: 800; color: var(--ink); }
.pkg-price s { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.pkg-price-from { font-size: 12px; color: var(--muted); }
.pkg-save { display: flex; gap: 8px; }
.pkg-pill { background: var(--peach); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); padding: 1px 8px; font-size: 11px; color: var(--ink); }
.pkg-perks { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 2px; }
.pkg-perks span::before { content: '✓ '; color: var(--baked); font-weight: 700; }
.pkg-cta {
  margin-top: auto;
  background: var(--forest); color: var(--ink-inverse); border: 2px solid var(--ink);
  border-radius: var(--radius-btn); padding: 9px 14px; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
.pkg-cta:hover { background: var(--forest-deep); }
.pkg-cta:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.pkg-cta--vip { background: var(--baked); }
.pkg-cta--vip:hover { background: #8F4218; }
.guarantee { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* ---------- 需求入口 ---------- */
.request-entry-row {
  text-align: center; margin: 4px 0 24px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  width: fit-content; margin-left: auto; margin-right: auto; padding: 6px 18px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--hs-1);
}
.request-entry { font-size: 14px; }
.request-entry-demo { font-size: 12.5px; color: var(--muted); }

/* ---------- 搜索区 ---------- */
.search-bar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius-pill);
  padding: 6px 6px 6px 8px; box-shadow: var(--hs-2);
}
.search-bar.is-ai { border-color: var(--baked); }
.mode-select { position: relative; display: flex; align-items: center; }
.mode-current {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  padding: 10px 12px; min-height: 44px; font-weight: 600; color: var(--ink); border-radius: var(--radius-pill); white-space: nowrap;
}
.mode-current svg { width: 16px; height: 16px; }
.mode-options {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  list-style: none; margin: 0; padding: 6px; min-width: 300px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-md);
  box-shadow: var(--hs-2);
}
.mode-option { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 12px; color: var(--ink); }
.mode-option b { display: block; font-size: 14px; }
.mode-option span { display: block; font-size: 12px; color: var(--ink-soft); }
.mode-option.is-active { background: var(--sage); color: var(--forest); font-weight: 600; }
.mode-option:hover:not(.is-active) { background: var(--surface-hover); }
.search-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; border: none; background: transparent;
  padding: 8px 12px; font-size: 14px; color: var(--ink);
}
.search-input::placeholder { color: var(--ink-faint); }
.search-go { border-radius: var(--radius-pill); }
.search-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.search-hint b { color: var(--forest); }

/* ---------- 年级筛选（04 水滴分裂筛选 LIQUID SPLIT） ----------
   收起为一颗纸工胶囊；展开时选项从胶囊中心液态散出（gooey 窗口由 JS 在动画期挂 .is-goo）。
   选中项用墨绿底白字（7.49 AA，规范「选中态 = 墨绿底白字」）。 */
.grade-goo { position: relative; }
.grade-goo.is-goo { filter: url(#gooify); }
.grade-pill-main {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: var(--hs-1);
  border-radius: var(--radius-pill); padding: 10px 20px; min-height: 44px;
  font-weight: 700; color: var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.grade-pill-main:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.grade-pill-main svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.grade-goo.is-open .grade-pill-main { display: none; } /* 展开后胶囊已「分裂」为选项 */
/* 主橙圆点（点睛：非文字图形，与浅杏环 3:1+） */
.copper-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--peach); flex: 0 0 9px; }
.grade-options { display: flex; flex-wrap: wrap; gap: 10px; }
.grade-chip {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--hs-1);
  padding: 8px 16px; min-height: 44px; color: var(--ink-soft);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.grade-chip:hover { background: var(--peach); color: var(--ink); }
.grade-chip:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.grade-chip.is-active { background: var(--forest); border-color: var(--ink); color: var(--ink-inverse); font-weight: 700; }
.grade-chip.is-active:hover { background: var(--forest-deep); }

/* ---------- 资源网格 ---------- */
.grid-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.count-chip { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.count-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--forest); }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
/* 贴纸卡（记忆点 #2）：2px 墨褐描边 + 硬投影；hover 微抬（投影变大），
   按压位移塌陷（规范 §6.2 贴纸语法）。原 3D 倾斜 + 光斑已随玻璃风整轮退役。 */
.res-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-card);
  padding: 10px; box-shadow: var(--hs-3); overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: inherit; text-decoration: none; cursor: pointer;
}
@media (hover: hover) {
  .res-card:hover {
    transform: translate(-1px, -2px);
    box-shadow: 7px 8px 0 var(--shadow-ink);
  }
}
.res-card:active {
  transform: translate(2.5px, 2.5px);
  box-shadow: 0.5px 0.5px 0 var(--shadow-ink);
}
/* 课程入口按压反馈（2026-10-24 二轮）：点下去立即整页导航，反馈只表达「按到了」。
   不放大、不翻转、不做中间加载卡片；导航本身不等这 60ms。 */
.published-card.is-course-entering {
  transform: translate(2.5px, 2.5px) scale(0.995);
  box-shadow: 0.5px 0.5px 0 var(--shadow-ink);
  transition-duration: 60ms;
}
.res-cover { display: block; border-radius: 10px; overflow: hidden; background: var(--card-paper); border: 1.5px solid var(--line-strong); }
.res-cover svg { width: 100%; height: 118px; display: block; }
/* 首页课件区加载骨架（2026-10-23）：接口返回前占住栅格，避免空白被读成「卡住了」。
   纯装饰：卡片本身 aria-hidden，状态文案由 .gallery-match[role=status] 播报。 */
.res-card-skeleton { pointer-events: none; cursor: default; }
.res-card-skeleton .res-cover { height: 118px; }
.skeleton-block, .skeleton-line {
  background: linear-gradient(90deg, var(--card-paper) 25%, var(--surface) 37%, var(--card-paper) 63%);
  background-size: 400% 100%;
  animation: skeleton-sheen 1.2s ease-in-out infinite;
}
.skeleton-line { display: block; height: 12px; border-radius: 6px; }
.skeleton-line-title { height: 16px; width: 72%; }
.skeleton-line-short { width: 46%; }
@keyframes skeleton-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-block, .skeleton-line { animation: none; }
}
.res-badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.badge { border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 600; }
.badge-limited { background: var(--peach); color: var(--ink); border: 1.5px solid var(--baked); font-variant-numeric: tabular-nums; }
.badge-trial { background: var(--sage); color: var(--forest); border: 1.5px solid var(--brand-border); }
/* 推荐位徽标：蜜黄只配深色字（规范 §3，7.87 AAA），2px 墨褐描边 + 硬投影沿用贴纸语法 */
.badge-recommend { background: var(--honey); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow-ink); font-weight: 700; }
/* catalog-bridge.v1 审查边界标签（pending_review 条目必带，非 accepted 不得作为发布内容） */
.badge-review { background: var(--warning-soft); color: var(--warning); border: 1.5px dashed var(--warning-border); }
/* --info-soft 底上的文字只能使用 --ink / --info，禁止 --ink-soft / --ink-faint。 */
.package-meta { border: 1.5px solid var(--info-border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; background: var(--info-soft); color: var(--ink); overflow-wrap: anywhere; }
.package-meta p { margin: 2px 0; color: var(--ink); }
.res-title {
  font-size: var(--fs-card-title); font-weight: 600; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.res-tags { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.tag-subject, .tag-grade, .tag-module { border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; }
.tag-subject { background: var(--sage); color: var(--forest); font-weight: 600; }
.tag-grade { background: var(--card-paper); color: var(--ink-soft); }
.tag-module { background: var(--peach); color: var(--baked); }
.badge-member { background: var(--card-paper); color: var(--ink); border: 1.5px solid var(--ink-soft); }

/* ---------- 已上架课件主卡片区（2026-10-20 并入首页主网格） ---------- */
.published-gallery { scroll-margin-top: 88px; }
.gallery-head { align-items: center; }
.gallery-head .section-title { margin-bottom: 0; }
.gallery-note { margin: -2px 0 14px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.gallery-filters { margin: 0 0 8px; }
.gallery-filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 12px; }
/* 2026-10-20 批注：下拉上方悬空的「模块」文字标签移除（无障碍名改走 aria-label），
   搜索框与模块下拉同高同行；样式按本站贴纸语法统一：2px 描边 + 硬投影 + 内置图标。 */
.gallery-filter-row label { display: flex; flex-direction: column; min-width: 0; }
.gallery-search { flex: 1 1 320px; }
.gallery-module { flex: 0 1 220px; }
.gallery-filters input,
.gallery-filters select {
  min-height: 44px; padding: 8px 12px; font: inherit; color: var(--ink);
  background-color: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-btn);
  box-shadow: var(--hs-1);
  transition: border-color 0.15s ease;
}
.gallery-filters input:hover,
.gallery-filters select:hover { border-color: var(--ink-soft); }
.gallery-filters input:focus-visible,
.gallery-filters select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* 搜索框内置放大镜（内联 data URI，不引第三方素材） */
.gallery-filters input[type="search"] {
  padding-left: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4A2B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cline x1='16' y1='16' x2='21' y2='21'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 16px 16px;
}
/* 模块下拉：自绘墨褐箭头，替换原生外观 */
.gallery-filters select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4A2B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7,10 12,15 17,10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}

/* 年级筛选（2026-10-20 按用户批注：下拉改为胶囊按钮，沿用贴纸语法） */
.grade-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 10px 14px;
  background: var(--surface-hover); border: 1.5px solid var(--line); border-radius: var(--radius-card);
}
.grade-filter-head { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.module-filter { margin-top: 12px; }
.grade-filter-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--honey); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--hs-1);
}
.grade-filter-title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.grade-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-pill {
  appearance: none; min-height: 36px; padding: 5px 16px;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line-strong); border-radius: var(--radius-pill);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}
.grade-pill:hover { background: var(--sage); border-color: var(--ink-soft); transform: translate(-1px, -1px); }
.grade-pill[aria-pressed="true"] {
  background: var(--forest); color: var(--ink-inverse);
  border-color: var(--ink); box-shadow: var(--hs-1);
}
.grade-pill[aria-pressed="true"]:hover { background: var(--forest-deep); }
.grade-pill:active { transform: translate(1px, 1px); box-shadow: none; }
.grade-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.gallery-match { min-height: 20px; margin: 12px 0 14px; font-size: 12.5px; color: var(--ink-soft); }
.gallery-error {
  border: 2px solid var(--ink); border-radius: 14px; padding: 16px 18px;
  background: var(--warning-soft); color: var(--ink); box-shadow: var(--hs-2);
}
.gallery-error-detail { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.published-card .res-cover svg { height: 132px; }
.load-more-row { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.empty-state {
  background: var(--surface); border: 2px dashed var(--ink-soft); border-radius: 16px;
  padding: 34px 20px; text-align: center;
}
.empty-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.empty-title svg { width: 18px; height: 18px; }

/* ---------- 详情覆盖层（就地放大：白纸主面板 + 硬投影；遮罩深墨绿、无模糊） ---------- */
.detail-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim);
  padding: clamp(10px, 2.5vw, 30px);
  overflow: auto;
}
.detail-overlay.is-flip-exit { pointer-events: none; } /* 收回动画期间拦截二次操作 */
.detail-pane {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 420px);
  gap: 0; background: var(--surface); border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: var(--hs-4); overflow: hidden;
  min-height: min(660px, calc(100vh - 60px));
}
.detail-preview { background: transparent; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-title { font-weight: 700; color: var(--ink-soft); }
/* 层级：stage 用卡纸实底 + 墨褐描边（不用滤镜，避免拖累课件运行性能） */
.preview-stage {
  position: relative; flex: 1 1 auto; min-height: 300px;
  background: var(--card-paper); border: 2px solid var(--ink); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.preview-art { position: absolute; inset: 0; opacity: 0.35; }
.preview-art svg { width: 100%; height: 100%; display: block; }
.preview-unimplemented {
  position: relative; z-index: 1;
  background: var(--forest-deep); color: var(--ink-inverse);
  border: 2px solid var(--ink); border-radius: var(--radius-pill);
  padding: 10px 22px; font-weight: 700; letter-spacing: 0.05em;
  box-shadow: 3px 3px 0 rgba(51, 38, 27, 0.45);
}
.preview-notes { max-height: 220px; overflow: auto; }
.preview-notes h4 { font-size: 13px; margin: 12px 0 6px; color: var(--ink-soft); }
.observed-list { font-size: 12.5px; color: var(--ink-soft); }
.observed-list li { margin-bottom: 4px; }

.detail-info {
  background: var(--paper); border-left: 2px solid var(--ink);
  padding: 18px 20px; overflow: auto; min-width: 0;
}
.detail-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-close {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink-soft);
  box-shadow: var(--hs-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.detail-close:hover { background: var(--surface-hover); color: var(--ink); }
.detail-close:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.detail-close svg { width: 18px; height: 18px; }
.detail-title { font-size: var(--fs-h2); line-height: 1.4; margin: 12px 0 8px; }
.info-subtitle { font-size: 14px; margin: 16px 0 8px; color: var(--ink); }
.info-text { font-size: 13.5px; color: var(--ink-soft); }
.usage-lead { font-size: 13px; color: var(--ink); background: var(--sage); border: 1.5px solid var(--brand-border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 8px; }
.info-usage { font-size: 13px; color: var(--ink-soft); padding-left: 1.3em; }
.info-usage li { margin-bottom: 5px; }
.detail-cta { margin: 18px 0 10px; }
.detail-cta .btn-primary { width: 100%; justify-content: center; }
.cta-foot { margin: 8px 0 0; }
.detail-notfound { display: block; padding: 60px 20px; }
.notfound-box { text-align: center; max-width: 420px; margin: 0 auto; }
.notfound-box .btn-primary { margin-top: 14px; }

/* 其余资源缩为底部缩略条；点击缩略图切换主视图（replaceState，不整页刷新） */
.detail-strip {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 70; display: flex; gap: 10px; align-items: stretch;
  max-width: min(940px, calc(100vw - 32px)); overflow-x: auto; padding: 10px 12px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: var(--hs-2);
}
.detail-thumb {
  flex: 0 0 auto; width: 132px; text-align: left;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 12px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; min-height: 44px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.detail-thumb:hover { border-color: var(--ink); }
.detail-thumb.is-current { border-color: var(--baked); box-shadow: 2px 2px 0 var(--shadow-ink); }
.detail-thumb .t-cover { display: block; border-radius: 8px; overflow: hidden; background: var(--card-paper); }
.detail-thumb .t-cover svg { width: 100%; height: 42px; display: block; }
.detail-thumb .t-title {
  font-size: 12px; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.detail-thumb.is-current .t-title { color: var(--ink); font-weight: 700; }

/* ---------- 我的 ---------- */
/* 2026-10-21 参照站「我的」页布局重排：页头 + 账户概览（身份 + 指标条）+ 分区卡片。
   宽度放宽到 720px，指标条一行 4 张；沿用既有的手绘描边 card / btn / state-note 体系。 */
.my-head { max-width: 720px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.my-head .section-title { margin-bottom: 4px; }
.my-head .muted { margin: 0; }
.my-card { max-width: 720px; margin: 0 auto 18px; }
.my-request-card { max-width: 720px; margin: 0 auto 18px; }
.my-request-card .muted { margin: 0 0 14px; }
.my-membership { max-width: 720px; margin: 0 auto 18px; }
.my-membership .plan-list { margin-top: 14px; }
.my-records { max-width: 720px; margin: 0 auto 18px; }
.my-records .info-subtitle { margin-top: 0; }

.my-identity { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.my-avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sage); border: 2px solid var(--ink); box-shadow: var(--hs-1);
  font-size: 22px; font-weight: 700; color: var(--forest);
}
.my-avatar--guest { background: var(--surface); color: var(--ink-soft); }
.my-identity-body { min-width: 0; }
.my-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.my-name strong { font-size: 20px; color: var(--ink); }
.my-vip-pill {
  padding: 1px 10px; border-radius: var(--radius-pill);
  background: var(--peach); border: 1.5px solid var(--baked); color: var(--baked);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.my-vip-pill.is-none { background: var(--surface); border-color: var(--line-strong); color: var(--ink-soft); }
.my-phone { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

.my-metrics { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.my-metric {
  display: grid; gap: 2px; padding: 10px 12px;
  background: var(--card-paper); border: 1.5px solid var(--line-strong);
  border-radius: 12px; min-width: 0;
}
.my-metric__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); }
.my-metric__value { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.my-metric__value.is-code { font-size: 13px; }
.my-metric__hint { font-size: 11px; line-height: 1.3; color: var(--ink-soft); overflow-wrap: anywhere; }

.my-tabs { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.my-tab {
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--radius-pill); padding: 6px 16px; min-height: 40px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--hs-1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.my-tab:hover { background: var(--surface-hover); color: var(--ink); }
.my-tab:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.my-tab.is-current { background: var(--sage); color: var(--forest); font-weight: 700; }
.my-empty {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px;
  background: var(--surface); border: 2px dashed var(--line-strong); border-radius: 12px;
  font-size: 13px; line-height: 1.55; color: var(--ink-soft);
}
.my-empty svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--denim); }

.my-actions { display: flex; gap: 12px; margin: 16px 0 4px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .my-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .my-avatar { width: 48px; height: 48px; font-size: 19px; }
}

/* ---------- 我的：账户中心重设计（me-redesign 2026-10-24） ----------
   桌面主次两列（账户∥签到、邀请∥兑换、学习∥需求），768px 折叠纵向；
   内容上限放宽到 1120px（02 页面规范 §2.1）。沿用手绘描边与按压反馈 token。 */
.my-head, .my-card, .my-request-card, .my-membership, .my-records,
.my-checkin, .my-growth, .my-redeem, .my-learning, .my-feedback { max-width: 1120px; margin-left: auto; margin-right: auto; }
.my-checkin .info-subtitle, .my-growth .info-subtitle, .my-redeem .info-subtitle,
.my-learning .info-subtitle, .my-request-card .info-subtitle, .my-feedback .info-subtitle { margin-top: 0; }

.my-top-grid, .my-growth-grid, .my-secondary-grid {
  max-width: 1120px; margin: 0 auto 18px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch;
}
.my-growth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.my-top-grid > .card, .my-growth-grid > .card, .my-secondary-grid > .card { margin: 0; min-width: 0; }
@media (max-width: 860px) {
  .my-top-grid, .my-growth-grid, .my-secondary-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 预设头像（原创 SVG；未知 preset 回退首字） */
.my-avatar--preset { background: var(--accent-soft); padding: 6px; }
.my-avatar--preset svg { width: 100%; height: 100%; display: block; }
.my-avatar--preset .pa-main { fill: var(--accent); }
.my-avatar--preset .pa-accent { stroke: var(--accent-strong); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.my-avatar--preset .pa-accent-fill { fill: var(--accent-strong); }
.my-member-line { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* 资料编辑（默认收起；白名单字段） */
.profile-editor { margin: 12px 0 4px; padding: 14px; background: var(--card-paper); border: 2px solid var(--line-strong); border-radius: 12px; display: grid; gap: 12px; }
.profile-editor__row { display: grid; gap: 6px; }
.profile-editor__label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); }
.profile-editor__input {
  font: inherit; font-size: 15px; color: var(--ink); padding: 10px 12px; min-height: 44px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 10px;
}
.profile-editor__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.profile-editor__hint { font-size: 11.5px; color: var(--ink-faint); }
.profile-editor__error { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger, #A93B2A); }
.profile-editor__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-option {
  width: 48px; height: 48px; padding: 4px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 12px;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.avatar-option svg { width: 100%; height: 100%; display: block; }
.avatar-option .pa-main { fill: var(--accent); }
.avatar-option .pa-accent { stroke: var(--accent-strong); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.avatar-option .pa-accent-fill { fill: var(--accent-strong); }
.avatar-option:hover { transform: translateY(-1px); border-color: var(--ink); }
.avatar-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.avatar-option.is-current { border-color: var(--ink); background: var(--accent-soft); box-shadow: var(--hs-1); }

/* 每日签到 */
.checkin-card { display: grid; gap: 10px; }
.checkin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.checkin-cum { margin: 0; font-size: 14px; color: var(--ink-soft); }
.checkin-cum strong { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.checkin-next { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.checkin-month { text-align: right; display: grid; gap: 2px; padding: 8px 12px; background: var(--honey); border: 2px solid var(--ink); border-radius: 12px; }
.checkin-month__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.checkin-month__value { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.checkin-progress { height: 10px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.checkin-progress span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.checkin-awarded { margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--accent-soft); border: 1.5px solid var(--accent-border); border-radius: 10px; }
.checkin-capnote { margin: 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink); background: var(--card-paper); border: 1.5px dashed var(--line-strong); border-radius: 10px; }
.checkin-btn { min-height: 44px; }
.checkin-btn:disabled { opacity: 0.72; cursor: default; }
.checkin-rule { margin: 0; }

/* 记录标签徽标与福利次级入口 */
.my-tab__badge {
  margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700;
}
.my-secondary { margin-top: 14px; }
.my-secondary > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); user-select: none;
}
.my-secondary > summary:hover { color: var(--ink); }
.my-secondary[open] > summary { margin-bottom: 8px; }

/* 反馈（表单 + 历史） */
.my-feedback-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
@media (max-width: 860px) { .my-feedback-grid { grid-template-columns: minmax(0, 1fr); } }
.feedback-form { display: grid; gap: 12px; padding: 14px; background: var(--card-paper); border: 2px solid var(--line-strong); border-radius: 12px; }
.feedback-form__row { display: grid; gap: 6px; }
.feedback-form__label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); }
.feedback-form__select, .feedback-form__textarea {
  font: inherit; font-size: 14px; color: var(--ink); padding: 10px 12px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 10px;
}
.feedback-form__textarea { resize: vertical; min-height: 96px; }
.feedback-form__select:focus-visible, .feedback-form__textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.feedback-form__hint { font-size: 11.5px; color: var(--ink-faint); }
.feedback-form__file { font-size: 12.5px; color: var(--ink-soft); }
.feedback-form__error { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger, #A93B2A); }
.feedback-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.feedback-thumb img { width: 56px; height: 56px; object-fit: cover; border: 1.5px solid var(--line-strong); border-radius: 8px; display: block; }
.my-feedback-warn { font-size: 12.5px; color: var(--danger, #A93B2A); font-weight: 600; }
.my-feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.my-feedback-item { padding: 12px 14px; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 12px; display: grid; gap: 6px; }
.my-feedback-item.is-unread { border-color: var(--accent); background: var(--accent-soft); }
.my-feedback-item__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.my-feedback-item__type { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--card-paper); border: 1.5px solid var(--line-strong); color: var(--ink-soft); }
.my-feedback-item__status { font-size: 12px; color: var(--ink-soft); }
.my-feedback-item__content { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.my-unread-badge { padding: 1px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
.my-feedback-replies { display: grid; gap: 8px; }
.my-feedback-reply { padding: 10px 12px; background: var(--card-paper); border: 1.5px solid var(--line-strong); border-radius: 10px; }
.my-feedback-reply p { margin: 4px 0; font-size: 13px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.my-feedback-reply__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); }

/* 收银台弹窗：两步（渠道选择 → 二维码/跳转） */
.cashier-channel-step { display: grid; gap: 10px; margin: 12px 0; }
.cashier-channel-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cashier-channel-btns .btn-primary { min-height: 48px; flex: 1 1 180px; }
.cashier-channel-btns .btn-primary.is-off { opacity: 0.6; cursor: not-allowed; }
.pay-qr-step { display: grid; gap: 10px; justify-items: center; }
.pay-alipay-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .avatar-option:hover { transform: none; }
}

/* ---------- 弹窗 ---------- */
.modal-layer { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-mask { position: absolute; inset: 0; background: var(--scrim); }
.modal {
  position: relative; background: var(--surface); border: 2.5px solid var(--ink); border-radius: 16px;
  width: min(480px, 100%); max-height: calc(100vh - 60px); overflow: auto;
  padding: 20px 22px 18px; box-shadow: var(--hs-4);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-title { font-size: var(--fs-h3); }
.modal-x {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); color: var(--ink-soft);
  box-shadow: var(--hs-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.modal-x:hover { background: var(--surface-hover); color: var(--ink); }
.modal-x:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.modal-x svg { width: 16px; height: 16px; }
.field { display: block; margin-bottom: 12px; position: relative; }
.field > span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 44px; border: 2px solid var(--border-input); border-radius: var(--radius-btn); padding: 10px 12px;
  font: inherit; color: var(--ink); background: var(--surface);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--forest); }
.field input:disabled,
.field textarea:disabled,
.field input[type="file"]:disabled {
  background: var(--surface-disabled);
  color: var(--ink-disabled);
  border: 2px dashed var(--line-strong);
  cursor: not-allowed;
}
.field-inline { position: absolute; right: 10px; bottom: 8px; background: none; border: none; color: var(--muted); font-size: 12px; padding: 4px 6px; min-height: 24px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 14px; }
.modal-foot { display: flex; justify-content: space-between; margin-top: 12px; }
.plan-list { list-style: none; padding: 0; margin: 0 0 14px; }
.plan {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--line-strong); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px;
  background: var(--surface);
}
.plan:hover { border-color: var(--forest); }
.plan.is-hot { border-color: var(--baked); background: var(--peach); }
.plan-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.plan-name { font-weight: 700; }
.plan-tag { background: var(--baked); color: var(--ink-inverse); border: 1.5px solid var(--ink); border-radius: var(--radius-pill); padding: 1px 8px; font-size: 12px; margin-left: 6px; white-space: nowrap; }
.plan-desc { font-size: 12px; color: var(--muted); }
.plan-price { font-size: 17px; font-weight: 800; white-space: nowrap; flex: 0 0 auto; }
.plan .btn-dark, .plan .btn-ghost { flex: 0 0 auto; white-space: nowrap; }
.plan-benefits { font-size: 13px; color: var(--ink-soft); }
.tick-list { list-style: none; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 支付方式 / VIP 权益弹窗（2026-10-21 静态还原参考交互；不发起支付、无真实二维码） ---------- */
.pay-summary { font-size: 13.5px; color: var(--ink-soft); margin: 2px 0 14px; }
.pay-amount { color: var(--baked); font-size: 15px; }
.pay-methods { display: grid; gap: 10px; margin-bottom: 14px; }
.pay-method {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  transition: border-color .15s ease, transform .1s ease;
}
.pay-method:hover { border-color: var(--forest); transform: translateY(-1px); }
.pay-method:active { transform: translate(1px, 1px); }
.pay-ic {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  border: 1.5px solid var(--ink);
}
.pay-ic-alipay { background: #E8F0FE; color: #1B5BD7; }
.pay-ic-wechat { background: #E5F6EC; color: #1AAD4A; }
.pay-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-main b { font-size: 14.5px; }
.pay-main small { color: var(--muted); font-size: 12px; }
.pay-arrow { color: var(--muted); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.pay-notice { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.pay-lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; }
.pay-scope-tag { display: inline-block; background: var(--peach); border: 1.5px solid var(--accent-border); border-radius: var(--radius-pill); padding: 1px 9px; font-size: 12px; margin-right: 6px; color: var(--ink); }
.pay-benefit-list { margin: 0 0 14px; display: grid; gap: 10px; }
.pay-benefit-list dt { font-weight: 700; font-size: 13.5px; }
.pay-benefit-list dd { margin: 0; font-size: 12.5px; color: var(--muted); }
.pay-tier { border: 2px solid var(--line-strong); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; background: var(--surface); display: grid; gap: 10px; }
.pay-tier-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.pay-tier-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.pay-tier-row.is-hot { background: linear-gradient(180deg, var(--peach), #FBEFD9); border: 1.5px solid var(--accent-border); border-radius: var(--radius-sm); padding: 10px 12px; }
.pay-tier-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.pay-tier-price { font-size: 22px; font-weight: 800; color: var(--baked); }
.pay-tier-orig { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.pay-tier-price-col { display: flex; align-items: baseline; }
.pay-hot-tag { display: inline-block; margin-left: 8px; background: var(--baked); color: var(--ink-inverse); border-radius: var(--radius-pill); padding: 1px 8px; font-size: 11px; }
.pay-cta.is-block { width: 100%; margin-bottom: 8px; }

/* ---------- 帮助弹窗（2026-10-20 帮助模块；同轮按贴纸风格升级：粘性标题、目录锚点、贴纸章图标、FAQ 平滑展开） ---------- */
.modal.is-wide { width: min(780px, 100%); padding-top: 0; }
/* 长内容区：标题吸顶（锚点跳转的落点用 scroll-margin 补偿）+ 区块内平滑滚动。
   padding-top 归零 + 标题栏自身补回 18px 上内距：吸顶时标题栏与滚动口顶边齐平，
   滚动内容只会从标题栏下方经过，不会从上方 20px 露出被切断的残行（本轮实测缺陷）。 */
.modal.is-wide { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .modal.is-wide { scroll-behavior: auto; }
}
.modal.is-wide .modal-head {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -22px 14px; padding: 18px 22px 12px;
  background: var(--surface); border-bottom: 2px dashed var(--line-strong);
  border-radius: 13.5px 13.5px 0 0;
}
.modal.is-wide [id^="help-sec"] { scroll-margin-top: 84px; }
/* 身份切换条（2026-10-23）：孩子/家长/教师/豆包 四个自包含面板，选中态 = 墨褐实底反白 */
.help-aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.help-aud__tab {
  display: flex; align-items: center; gap: 8px;
  min-height: 54px; min-width: 0; padding: 6px 10px;
  border: 2px solid var(--ink); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); text-align: left;
  box-shadow: var(--hs-1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.help-aud__tab:hover { background: var(--brand-soft); }
.help-aud__tab:active { transform: translate(2px, 2px); box-shadow: 0.5px 0.5px 0 var(--shadow-ink); }
.help-aud__tab.is-current { background: var(--brand); color: var(--ink-inverse); }
.help-aud__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  background: var(--brand-soft); border: 2px solid var(--ink); color: var(--brand);
  transform: rotate(-3deg);
}
.help-aud__tab.is-current .help-aud__ico { background: var(--ink-inverse); border-color: var(--ink-inverse); transform: none; }
.help-aud__ico svg { width: 16px; height: 16px; }
.help-aud__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.help-aud__label b { font-size: 13px; }
.help-aud__label small { font-size: 11px; font-weight: 400; opacity: 0.88; overflow-wrap: break-word; }
.help-panel { min-width: 0; }
.help-panel[hidden] { display: none; }
.help-lead { font-size: 13.5px; color: var(--ink); margin: 0 0 12px; overflow-wrap: break-word; }
.help-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.help-card {
  border: 2px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 12px 14px 10px; background: var(--surface); min-width: 0;
  box-shadow: var(--hs-1); transition: border-color 0.15s ease;
}
.help-card:hover { border-color: var(--brand); }
.help-card li, .help-boundary li, .faq-a { overflow-wrap: break-word; }
/* 贴纸章图标：暖纸底圆章 + 2px 墨褐描边 + 硬投影；奇偶交替微倾角（-3°/+2°）呼应手作贴纸风 */
.help-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 8px; color: var(--ink); }
.help-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  background: var(--brand-soft); border: 2px solid var(--ink);
  color: var(--brand); box-shadow: var(--hs-1);
}
.help-ico svg { width: 15px; height: 15px; }
.help-card:nth-child(odd) .help-ico { transform: rotate(-3deg); }
.help-card:nth-child(even) .help-ico { transform: rotate(2deg); }
.help-boundary .help-ico, .help-faq-title .help-ico { transform: rotate(-2deg); }
.help-card h3 svg, .help-boundary h3 svg, .help-faq-title svg { width: 17px; height: 17px; color: var(--brand); flex: 0 0 17px; }
.help-card ul, .help-boundary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.help-card li, .help-boundary li { position: relative; padding-left: 14px; }
.help-card li::before, .help-boundary li::before {
  content: ''; position: absolute; left: 0; top: 6.5px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand); border: 1.5px solid var(--ink);
}
.help-card code, .faq-a code {
  background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 4px;
  padding: 0 4px; font-size: 11.5px; overflow-wrap: anywhere;
}
.help-boundary {
  border: 2px solid var(--ink); border-radius: var(--radius-md); padding: 12px 14px;
  background: var(--brand-soft); margin-bottom: 12px; box-shadow: var(--hs-1);
}
.help-boundary-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-boundary-cols > div { min-width: 0; }
.help-ok, .help-no { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; margin: 0 0 6px; }
.help-ok { color: var(--success); }
.help-no { color: var(--baked); }
.help-ok svg, .help-no svg { width: 16px; height: 16px; flex: 0 0 16px; }
.help-faq-title { margin: 0 0 8px; }
.help-faq { border: 2px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); box-shadow: var(--hs-1); }
.help-faq details + details { border-top: 2px solid var(--line-strong); }
.help-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--ink);
  transition: background 0.15s ease;
}
.help-faq summary:hover { background: var(--surface-hover); }
.help-faq summary::-webkit-details-marker { display: none; }
/* 展开/收起圆章：收起=纸底加号，展开=墨褐底白减号（白字 7.39:1） */
.help-faq summary::after {
  content: '+'; width: 26px; height: 26px; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--brand-soft); color: var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1; box-shadow: var(--hs-1);
}
.help-faq details[open] summary::after { content: '−'; background: var(--brand); color: var(--ink-inverse); }
.help-faq details[open] summary { background: var(--brand-soft); }
/* FAQ 平滑展开（渐进增强，Chrome 129+；reduced-motion 用户不加载动画） */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .modal.is-wide { interpolate-size: allow-keywords; }
    .help-faq details::details-content {
      height: 0; overflow: clip;
      transition: content-visibility 0.25s allow-discrete, block-size 0.25s ease;
    }
    .help-faq details[open]::details-content { height: auto; }
  }
}
.faq-a { padding: 2px 12px 10px; font-size: 12.5px; color: var(--ink-soft); }
.faq-a b { color: var(--ink); }
.help-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.help-kbd {
  display: inline-block; border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 0 5px; font-size: 11px; font-family: inherit; background: var(--surface);
  box-shadow: 1px 1px 0 var(--shadow-ink);
}
@media (max-width: 720px) {
  .help-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-sections, .help-boundary-cols { grid-template-columns: 1fr; }
}
.tick-list li::before { content: "✓ "; color: var(--moss); font-weight: 700; }
@media (max-width: 560px) {
  .plan { flex-wrap: wrap; justify-content: space-between; }
  .plan-main { flex: 1 1 100%; }
}

/* ---------- 提示条 ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90;
  max-width: min(560px, calc(100vw - 40px));
  background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius-md); padding: 12px 18px;
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px;
  box-shadow: 4px 4px 0 rgba(51, 38, 27, 0.35);
}
.toast svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; }
/* 警告 = 落日黄底 + 墨褐字（规范 §6.5，白字压落日黄不达标） */
.toast.is-warn { background: var(--sunset); color: var(--ink); }
.toast.is-success { background: var(--moss); }
.toast.is-error { background: var(--tomato); }
/* 入场动效：keyframes 必须保留基础 transform 的 translateX(-50%)，否则会从右侧闪入 */
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast { animation: toast-in 0.22s ease-out; }

/* ---- 动效兜底：用户偏好减少动效时全部关闭（含 res-card 位移 / toast / 状态图标 / skip-link / 液态胶囊 / 翻转层） ---- */
@media (prefers-reduced-motion: reduce) {
  .res-card, .skip-link { transition: none; }
  .res-card:hover { transform: none; }
  .res-card:active, .btn-primary:active, .btn-ghost:active, .btn-dark:active,
  .btn-pill-dark:active, .btn-more:active, .grade-chip:active, .grade-pill-main:active,
  .detail-close:active, .modal-x:active, .accepted-card:active { transform: none; }
  .published-card.is-course-entering { transform: none; }
  .accepted-card, .accepted-arrow { transition: none; }
  .accepted-card:hover { transform: none; }
  .nav-pill { transition: none; }
  .grade-pill-main svg, .detail-thumb { transition: none; }
  .toast { animation: none; }
  .courseware-state-icon { animation: none; }
}

/* ============================================================================
   响应式：沿用既有 900px / 720px / 560px 断点
   ========================================================================== */
@media (max-width: 900px) {
  .marketing-body { flex-direction: column; align-items: stretch; }
  .marketing-cta .btn-primary { width: 100%; justify-content: center; }
  .detail-pane { grid-template-columns: 1fr; }
  .detail-info { border-left: none; border-top: 2px solid var(--ink); }
}

@media (max-width: 560px) {
  .res-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .gallery-filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .gallery-search, .gallery-module { flex: 1 1 auto; }
  .grade-filter { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .grade-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .module-filter .grade-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-pill { padding: 5px 4px; }
  .search-bar { flex-wrap: wrap; border-radius: var(--radius-card); padding: 8px; }
  .mode-select { flex: 1 1 100%; justify-content: space-between; }
  .mode-options { left: 0; right: 0; min-width: 0; }
  .search-input { flex: 1 1 auto; }
  .price-value { font-size: 26px; }
  .accepted-card { padding: 12px 14px; gap: 10px; }
  .accepted-arrow { display: none; }
}

/* ==========================================================================
   B01 准备轮（2026-10-14）追加：详情内课件运行容器状态样式
   仅作用于 .preview-stage 的非默认 data-courseware-state 状态；
   unsupported（默认态）无新样式，已接受布局与视觉不变。
   状态由 B03 运行框架 / B05 访问决定（均待契约）经 detail-overlay.js 状态机驱动后出现。
   ========================================================================== */
.courseware-state-box {
  position: relative; z-index: 1; max-width: 78%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 28px; border-radius: var(--radius-md);
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: var(--hs-2);
  text-align: center;
}
.courseware-state-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.courseware-state-msg { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 40em; }
.courseware-state-actions { display: flex; gap: 8px; margin-top: 6px; }
/* 状态图标（2026-10-17 补第四状态通道，形状互不相同：i / 勾 / X / 三角；色随标题语义色，P4 不靠单通道） */
.courseware-state-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--ink); }
.courseware-state-icon svg { width: 24px; height: 24px; display: block; }
.preview-stage[data-courseware-state="loading"] .courseware-state-title,
.preview-stage[data-courseware-state="loading"] .courseware-state-icon { color: var(--info); }
.preview-stage[data-courseware-state="loading"] .courseware-state-icon { animation: cw-spin 1.1s linear infinite; }
.preview-stage[data-courseware-state="ready"] .courseware-state-title,
.preview-stage[data-courseware-state="ready"] .courseware-state-icon { color: var(--moss); }
.preview-stage[data-courseware-state="error"] .courseware-state-title,
.preview-stage[data-courseware-state="error"] .courseware-state-icon { color: var(--tomato); }
.preview-stage[data-courseware-state="error"] .courseware-state-box { border-color: var(--tomato); }
.preview-stage[data-courseware-state="forbidden"] .courseware-state-title,
.preview-stage[data-courseware-state="forbidden"] .courseware-state-icon { color: var(--warning); }
.preview-stage[data-courseware-state="forbidden"] .courseware-state-box { border-color: var(--warning); }
@keyframes cw-spin { to { transform: rotate(360deg); } }
/* not_open 用 --ink-soft 而非 --ink-faint：.courseware-state-title 是 15px/700，
   未达 WCAG 大字号门槛（≥18.66px 粗体），须按正文 4.5:1 判定。
   --ink-faint 对米白仅 5.18:1（PASS）但弱于 --ink-soft 5.38:1 的层次区分；
   「能力未开放」本就是降级/中性语义，用弱化文字色比语义色更准确。 */
.preview-stage[data-courseware-state="not_open"] .courseware-state-title,
.preview-stage[data-courseware-state="not_open"] .courseware-state-icon { color: var(--ink-soft); }

/* ==========================================================================
   B01 接线轮（2026-10-14）追加：联调演示控件与演示条（仅 ?platform=demo / ?cw-access=1 时渲染）
   正常旅程不出现；不改动已接受布局。
   ========================================================================== */
.platform-demo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; border: 2px dashed var(--info-border); border-radius: var(--radius-btn);
  background: var(--info-soft); color: var(--ink);
}
.platform-demo .demo-badge {
  font-size: 12px; font-weight: 700; color: var(--info);
  border: 1.5px solid var(--info-border); border-radius: var(--radius-pill); padding: 2px 8px; background: var(--surface);
}
.platform-demo .demo-view { font-size: 12px; color: var(--ink); }
.platform-demo-view { background: var(--info-soft); border: 2px dashed var(--info-border); border-radius: var(--radius-btn); padding: 10px 12px; color: var(--ink); }
.platform-demo-view pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; }
.access-demo-json {
  white-space: pre-wrap; word-break: break-all; margin: 6px 0;
  font-size: 12px; color: var(--ink-soft);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
}

/* 2026-10-16：统一顶部导航；品牌、主导航、辅助入口与账号同行。
   2026-10-18 阳光工坊轮：顶栏纸底 + 2.5px 墨褐底边；01 液态高亮块保留滑动动效，
   质感改为浅豆绿贴纸胶囊（2px 墨褐描边 + 硬投影），当前项文字用墨绿加粗。 */
.shell { display: block; min-height: 100dvh; }
.topbar {
  display: block; position: sticky; top: 0; z-index: 40; padding: 0 28px;
  background: var(--paper); border-bottom: 2.5px solid var(--ink);
}
.header-inner { max-width: 1180px; margin: auto; min-height: 84px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.header-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.brand-text { font-size: var(--fs-h3); line-height: 1.4; }
.brand-subtitle { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 400; letter-spacing: 1px; }
.header-nav { display: flex; gap: 6px; align-items: center; margin-left: auto; position: relative; }
.header-link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-pill); padding: 10px 16px; min-height: 44px;
  color: var(--ink-soft); white-space: nowrap; font-weight: 500; line-height: 1.2; text-align: center;
}
.header-link:hover { color: var(--forest); }
.header-link.is-current { color: var(--forest); font-weight: 700; background: transparent; }
/* 2026-10-24 三页独立路由：主导航/品牌/账号入口由 <button> 改为真实 <a href>
   （components/routes.js 给出地址；普通左键由 reference.js 拦截为无刷新切换）。
   补齐锚点的 UA 默认样式复位与盒模型，视觉与原按钮一致：
   锚点是 inline，min-height/padding 需要弹性盒才能生效；visited 态必须跟随主题色。 */
a.header-link { display: inline-flex; align-items: center; text-decoration: none; }
a.header-link:visited, a.header-brand:visited { color: inherit; }
a.header-link.is-current:visited { color: var(--forest); }
a.header-brand { text-decoration: none; color: inherit; }
a.account-chip { text-decoration: none; }

/* 「我的」当前页标记（2026-10-24 独立验收 P2 修复）：
   /me 为当前页时账号入口与主导航 is-current 同语义——墨绿底白字，:visited 不回退紫色 */
.account-chip.is-current {
  background: var(--forest); border-color: var(--forest); color: #fff;
}
a.account-chip.is-current:visited { color: #fff; }
/* 01 LIQUID PILL：当前项贴纸胶囊底。位置与高度由 nav-frame.js 按当前项实测写入
   （left/top/width/height），切换时沿 bezier 过冲滑动（移动中宽度差自然拉长、到位弹性回弹）。 */
.nav-pill {
  position: absolute; top: 0; left: 0; width: 0; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--sage); border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  opacity: 0; pointer-events: none;
  transition: left 0.34s cubic-bezier(0.3, 1.32, 0.4, 1), width 0.34s cubic-bezier(0.3, 1.32, 0.4, 1), opacity 0.2s ease;
}
.nav-pill.is-instant { transition: none; }
.header-account { display: flex; align-items: center; gap: 12px; }
.views { padding-top: 28px; padding-bottom: 48px; }
.header-inner > .platform-demo { flex-basis: 100%; }
/* 桌面不显示 Dock 把手（导航仍在页头一行内） */
.nav-dock-toggle { display: none; }
@media (max-width: 720px) {
 .topbar { padding: 12px 16px 0; }
 .header-inner { min-height: 0; gap: 12px; }
 .header-brand { flex: 1; }
 .brand-text { font-size: 17px; }
 .header-account { gap: 8px; }
 /* 2026-10-27：导航不再折行占第二排，改为底部悬浮 Dock（macOS 停靠栏式），可收缩到右侧边。
    只改定位与外观，导航 DOM / 选中逻辑不变；topbar 因此恢复单行。 */
 .header-nav {
   position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
   transform: translateX(-50%);
   width: auto; max-width: calc(100vw - 24px); margin: 0; gap: 2px;
   padding: 6px 8px; justify-content: center;
   background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px;
   box-shadow: var(--hs-3); z-index: 60;
   transition: transform 0.22s ease, opacity 0.18s ease;
 }
 .header-nav .header-link {
   flex: 0 0 auto; padding: 8px 14px;
   transition: transform 0.18s ease, color 0.15s ease;
 }
 /* Dock 的悬停放大：模仿桌面停靠栏的「图标放大」，按压回落 */
 .header-nav .header-link:hover { transform: translateY(-3px) scale(1.06); }
 .header-nav .header-link:active { transform: scale(0.96); }
 .nav-dock-toggle {
   display: inline-flex; align-items: center; justify-content: center;
   width: 34px; height: 34px; margin-left: 2px; padding: 0;
   background: var(--card-paper); border: 2px solid var(--ink); border-radius: 50%;
   color: var(--ink); cursor: pointer; flex: 0 0 auto;
 }
 .nav-dock-toggle svg { width: 16px; height: 16px; display: block; transition: transform 0.2s ease; }
 /* 收缩态：贴住屏幕右侧，只留一个圆形把手 */
 .header-nav.is-collapsed {
   left: auto; right: 0; transform: none;
   padding: 5px 6px 5px 0; border-radius: 14px 0 0 14px; border-right: 0;
 }
 .header-nav.is-collapsed .header-link,
 .header-nav.is-collapsed .nav-pill { display: none; }
 .header-nav.is-collapsed .nav-dock-toggle { margin-left: 0; }
 .header-nav.is-collapsed .nav-dock-toggle svg { transform: rotate(180deg); }
 /* 下滑时整条滑出屏幕下沿（上滑或回到顶部自动出现）；收缩态单独一套位移 */
 .header-nav.is-dock-hidden { transform: translateX(-50%) translateY(calc(100% + 26px)); opacity: 0; pointer-events: none; }
 .header-nav.is-collapsed.is-dock-hidden { transform: translateY(calc(100% + 26px)); }
 .views { padding-top: 20px; padding-bottom: 104px; }
 .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
 .published-gallery { scroll-margin-top: 142px; }
}

/* ==========================================================================
   2026-10-20 本地真实账号（登录/注册/改密/退出）与页脚
   仅新增类，不改既有类；错误文字严格使用方案指定番茄红 #C94F3D。
   ========================================================================== */
.auth-deviation {
  margin: 2px 0 12px; padding: 8px 10px;
  border-left: 3px solid var(--denim); border-radius: 6px;
  background: var(--info-soft); color: var(--ink);
  font-size: 12px; line-height: 1.6;
}
/* 白底 + #C94F3D：实测 4.50:1（AA 普通文字下限），因此不再叠 error-soft 底 */
.auth-error {
  margin: 8px 0 0; padding: 8px 10px;
  border: 1.5px solid var(--error-border); border-left: 5px solid var(--error);
  border-radius: 8px; background: var(--surface);
  color: var(--error); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.request-success { padding: 4px 0 2px; }
.request-success .empty-title { justify-content: flex-start; margin-bottom: 10px; }
.request-success p { margin: 0 0 10px; }
.request-success code { overflow-wrap: anywhere; }
.account-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 14px; border: 2px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--sage); color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums; box-shadow: var(--hs-1);
}
.account-summary {
  margin: 6px 0 0;
}
.account-line { display: flex; gap: 12px; margin: 6px 0; font-size: 14px; color: var(--ink); }
.account-label { flex: 0 0 5em; color: var(--ink-soft); }
.account-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.site-footer {
  border-top: 2.5px solid var(--ink); background: var(--paper);
  padding: 28px 28px calc(30px + env(safe-area-inset-bottom));
}
.site-footer-inner {
  max-width: 1180px; margin: auto; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  color: var(--ink-soft); font-size: 14px; line-height: 1.6; text-align: center;
}
.site-footer-links {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 28px; margin: 0 0 4px;
}
.site-footer-links a { color: var(--ink-soft); text-decoration: none; }
.site-footer-links a:hover { color: var(--baked); text-decoration: underline; }
.site-footer-copy, .site-footer-icp { margin: 0; }
@media (max-width: 560px) {
  .account-chip { padding: 6px 10px; font-size: 13px; }
  .site-footer { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
  .site-footer-inner { font-size: 13px; }
  .site-footer-links { gap: 8px 18px; }
}

/* ============================================================================
   主页面转场（2026-10-24 二轮，components/view-transition.js）
   只动主内容区（<main id="main-content">）：顶部导航与站点背景保持稳定。
   旧内容 60ms 淡出 → 同步换视图 → 新内容 160ms 从 translateY(6px)/opacity:0 淡入。
   类名与时长由 view-transition.js 增删，这里只负责表现；不弹跳、不旋转、不缩放整页，
   也不给列表卡片逐个加入场动画。
   ========================================================================== */
.views.is-view-leaving {
  opacity: 0;
  transition: opacity 60ms linear;
}
.views.is-view-entering {
  opacity: 0;
  transform: translateY(6px);
}
.views.is-view-animating {
  transition: opacity 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .views.is-view-leaving,
  .views.is-view-entering,
  .views.is-view-animating {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* 视图切换后的焦点落点（2026-10-24 独立验收 P2 修复，reference.js focusMainContent）：
   main 是区域容器而非交互控件，程序化聚焦只为键盘位置记忆（tabindex="-1"），
   不画整个区域的焦点框；交互控件的 :focus-visible 不受影响 */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
}

/* ==========================================================================
   知识点目录（2026-10-22，knowledge-taxonomy.js）
   沿用「阳光工坊」贴纸语法：2px 墨褐描边 + 硬投影 + 大圆角 + 纸底；
   选中态 = sage 暖沙底 + ink 加粗（与 .grade-pill[aria-pressed] / nav-pill 一致的选中语言），
   逐级缩进用左边距表达层级。桌面 280px 树 + 1fr 课件区；≤720px 折叠为单列。
   ========================================================================== */
.taxonomy-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  margin: 6px 0 16px; scroll-margin-top: 100px;
}
.taxonomy-head .section-title { flex: 1 1 auto; min-width: 0; }
.taxonomy-head .section-note { font-size: 12px; font-weight: 500; color: var(--ink-faint); }
/* 教材版本下拉（2026-10-27）：贴纸胶囊语法，原生 select 保留键盘与读屏能力 */
.edition-picker { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.edition-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.edition-select {
  appearance: none; -webkit-appearance: none;
  min-height: 36px; padding: 6px 32px 6px 12px;
  background-color: var(--card-paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--hs-1); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='7,10 12,15 17,10' fill='none' stroke='%2333261B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
}
.edition-select:hover { background-color: var(--brand-soft); }
.edition-select:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow-ink); }
/* 待开发版本占位 */
.taxonomy-pending {
  background: var(--surface); border: 2px dashed var(--ink-soft); border-radius: 16px;
  padding: 34px 22px; text-align: center;
}
.taxonomy-pending strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.taxonomy-pending p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
/* 目录面板顶部操作指引（小字，与树节点之间用虚线分隔） */
.taxonomy-tree-note {
  margin: 0 0 10px; padding: 0 6px 8px; font-size: 12px; line-height: 1.5;
  color: var(--ink-faint); border-bottom: 1px dashed var(--line);
}
.taxonomy-cols {
  display: grid; grid-template-columns: clamp(300px, 24%, 460px) minmax(0, 1fr); gap: 18px; align-items: start;
}
/* 树面板：白卡纸底 + 2.5px 描边 + 硬投影（同 .card） */
.taxonomy-tree {
  background: var(--surface); border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: var(--hs-3); padding: 12px 10px;
  max-height: calc(100vh - 130px); overflow: auto;
}
/* 节点头部（年级/单元可展开行） */
.kp-node { margin: 2px 0; }
.kp-node-head {
  width: 100%; display: flex; align-items: center; gap: 6px;
  background: transparent; border: 2px solid transparent; border-radius: 10px;
  padding: 8px 10px; min-height: 40px; text-align: left; font: inherit;
  color: var(--ink-soft); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kp-node-head:hover { background: var(--surface-hover); color: var(--ink); }
.kp-node-name { flex: 1 1 auto; min-width: 0; }
/* 层级一：年级 = 独立贴纸卡（卡纸底 + 墨褐描边 + 硬投影）；展开后整条转深底白字（7.39 AA） */
.kp-grade { margin: 12px 0 6px; }
.kp-grade:first-of-type { margin-top: 4px; }
.kp-grade-head {
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink);
  background: var(--card-paper); border-color: var(--ink); border-radius: 12px;
  box-shadow: var(--hs-1); min-height: 44px;
}
.kp-grade-head:hover { background: var(--brand-soft-hover); color: var(--ink); }
.kp-grade.open > .kp-grade-head { background: var(--forest); border-color: var(--ink); color: var(--ink-inverse); }
.kp-grade.open > .kp-grade-head:hover { background: var(--forest-deep); }
.kp-grade.open > .kp-grade-head .kp-chev { color: var(--ink-inverse); }
/* 折叠箭头（2026-10-27 用户批注）：不要外圈，靠箭头本身加粗加大来醒目 */
.kp-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  background: none; border: 0; border-radius: 0; color: var(--ink);
}
.kp-chev svg { width: 20px; height: 20px; display: block; transition: transform 0.2s ease; transform: rotate(-90deg); }
.kp-chev svg polyline { stroke-width: 3; }
.kp-node.open > .kp-node-head .kp-chev svg { transform: rotate(0deg); }
.kp-node-head:hover .kp-chev { color: var(--baked); }
.kp-grade.open > .kp-grade-head:hover .kp-chev { color: var(--ink-inverse); }
.kp-node-count {
  margin-left: auto; flex: 0 0 auto;
  background: var(--card-paper); border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.kp-grade-head .kp-node-count {
  background: var(--paper); border: 2px solid var(--ink); color: var(--ink);
  font-size: 12px; padding: 0 9px;
}
.kp-grade.open > .kp-grade-head .kp-node-count {
  background: transparent; border-color: rgba(255, 255, 255, 0.7); color: var(--ink-inverse);
}
/* 层级二：学期 = 可折叠带（橙色短杠 + 收尾横线 + 知识点计数） */
.kp-sem { margin: 10px 0 2px; }
.kp-sem-head {
  font-size: 13.5px; font-weight: 800; color: var(--baked);
  min-height: 38px; padding: 6px 6px; gap: 8px; letter-spacing: 0.04em;
}
.kp-sem-head::before {
  content: ""; order: 1; flex: 0 0 14px; width: 14px; height: 3px; border-radius: 2px; background: var(--orange);
}
.kp-sem-head::after {
  content: ""; order: 3; flex: 1 1 auto; height: 0; border-top: 1.5px solid var(--line-strong);
}
.kp-sem-head .kp-chev { order: 0; }
.kp-sem-head .kp-sem-name { order: 2; }
.kp-sem-head .kp-node-count { order: 4; margin-left: 0; }
.kp-sem > .kp-node-body { margin-left: 6px; padding-left: 6px; border-left: 2px dashed var(--brand-border); }
/* 层级三：单元 = 加粗墨色行，展开项加暖沙底提示当前位置 */
.kp-unit > .kp-node-head { font-size: 13.5px; font-weight: 700; color: var(--ink); min-height: 38px; padding: 7px 8px; }
.kp-unit > .kp-node-head .kp-node-name { line-height: 1.35; }
.kp-unit.open > .kp-node-head { background: var(--sage); color: var(--forest); }
.kp-node-body { margin-left: 15px; padding-left: 2px; border-left: 2px dashed var(--line-strong); }
.kp-grade > .kp-node-body { margin-left: 10px; padding-left: 8px; border-left-color: var(--brand-border); }
/* 层级四：叶（知识点）= 圆点引导 + 13px 常规字 */
.kp-node-body[role="group"] { display: block; }
.kp-leaf {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 2px solid transparent; border-radius: 10px;
  padding: 5px 9px; min-height: 34px; text-align: left; font: inherit; cursor: pointer;
  color: var(--ink-soft); font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kp-leaf::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
}
.kp-leaf:hover { background: var(--surface-hover); color: var(--ink); }
.kp-leaf:hover::before { background: var(--baked); }
.kp-leaf-name { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
/* 选中叶子：sage 底 + 描边 + 加粗 + 硬投影（选中态统一语言），圆点转主橙 */
.kp-leaf.is-current {
  background: var(--sage); border-color: var(--ink); color: var(--forest); font-weight: 700;
  box-shadow: var(--hs-1);
}
.kp-leaf.is-current::before { background: var(--orange); }
/* 收起/展开：body 折叠 */
.kp-node:not(.open) > .kp-node-body { display: none; }

/* 右侧课件区 */
.taxonomy-detail {}
/* 单列（≤720px）时详情默认是空占位：只在选中知识点后才出现 */
@media (max-width: 720px) {
  .taxonomy-detail.is-blank { display: none; }
}
.kp-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: var(--card-paper); border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 9px 14px; font-size: 13px; margin-bottom: 16px; color: var(--ink-soft);
}
.kp-crumb { color: var(--ink-soft); }
.kp-crumb-sep { color: var(--ink-faint); flex: 0 0 auto; }
.kp-crumb-current { color: var(--forest); font-weight: 700; }
.kp-crumb-muted { color: var(--ink-faint); font-size: 13px; }

.kp-course-count { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.kp-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); gap: 14px; justify-content: start; }
/* 目录里的课件卡比资源库小一号（2026-10-27 用户批注：卡片再小一点） */
.kp-course-card { padding: 8px; gap: 6px; }
.kp-course-card .res-cover svg { height: 96px; }
.kp-course-card .res-title { font-size: 16px; }
.kp-empty {
  background: var(--surface); border: 2px dashed var(--ink-soft); border-radius: 16px;
  padding: 34px 20px; text-align: center;
}
.kp-empty p { margin: 0; color: var(--ink-soft); font-weight: 600; }

/* ---- 三类分组展示（2026-10-24）---- */
.kp-groups { display: flex; flex-direction: column; gap: 16px; }
.kp-group {
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px;
  padding: 14px 16px;
}
.kp-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kp-group-title { font-size: 16px; font-weight: 800; color: var(--forest); margin: 0; }
.kp-group-count {
  margin-left: auto; flex: 0 0 auto;
  background: var(--card-paper); border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.kp-group-desc { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.kp-group-note {
  background: var(--peach); border: 1.5px solid var(--accent-border); border-radius: 12px;
  padding: 10px 14px; font-size: 13px; color: var(--baked); font-weight: 600; margin: 0 0 14px;
}
/* 拓展应用折叠区 */
.kp-group-extension { background: var(--card-paper); }
.kp-ext-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: transparent; border: 2px solid transparent; border-radius: 10px;
  padding: 8px 10px; min-height: 40px; text-align: left; font: inherit; cursor: pointer;
  color: var(--forest); transition: background 0.15s ease;
}
.kp-ext-toggle:hover { background: var(--surface-hover); }
.kp-ext-title { font-size: 16px; font-weight: 800; flex: 1 1 auto; }
.kp-ext-hint { font-size: 12px; color: var(--ink-faint); flex: 0 0 auto; }
.kp-group-body { margin-top: 8px; }

/* 类别文字标签（不只靠颜色，文字常显） */
.tag-relation { border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; font-weight: 700; }
.kp-tag-direct { background: var(--forest); color: #FBF8F3; }
.kp-tag-partial { background: var(--honey); color: var(--ink); }
.kp-tag-extension { background: var(--sage); color: var(--forest); }

/* 卡片教学范围（常显，不靠悬浮/省略号） */
.kp-course-scope {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1.5px dashed var(--line);
  font-size: 12px; line-height: 1.5; color: var(--ink-soft);
}

/* 响应式：>1040 两栏；721–1040 两栏但左树逐级收窄；≤720 单列，目录与详情二选一（不再把长目录压在上面） */
@media (max-width: 1040px) {
  .taxonomy-cols { grid-template-columns: 288px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .taxonomy-cols { grid-template-columns: 268px minmax(0, 1fr); gap: 14px; }
  /* 左树收窄后单元名更容易折行，行内边距与计数胶囊同步收紧，避免两字一行 */
  .kp-unit > .kp-node-head { font-size: 13px; padding: 7px 6px; gap: 5px; }
  .kp-unit .kp-node-count { font-size: 10.5px; padding: 0 6px; }
}
@media (max-width: 720px) {
  .taxonomy-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .taxonomy-tree { max-height: none; }
  .taxonomy-head { scroll-margin-top: 142px; }
  /* 单列不分页：详情直接内联在所选知识点下方（同页、不跳转），其余知识点继续往下排 */
  .taxonomy-tree .taxonomy-detail {
    margin: 6px 0 12px; padding: 10px 10px 12px;
    background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--hs-1);
  }
  .taxonomy-tree .taxonomy-detail .kp-breadcrumb { margin-bottom: 12px; }
}
@media (max-width: 560px) {
  .kp-node-body { margin-left: 10px; }
  /* 窄屏：版本下拉独占一行，左标签 + 右侧可选框，点击区更宽 */
  .taxonomy-head { gap: 8px; }
  .edition-picker { width: 100%; }
  .edition-select { flex: 1 1 auto; }
  .kp-group { padding: 10px 12px; }
  .kp-groups { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-chev svg, .kp-leaf, .kp-node-head, .kp-ext-toggle,
  .header-nav, .header-nav .header-link, .nav-dock-toggle svg { transition: none; }
}

/* ============================================================================
   卡片展开 / 返回收回（2026-10-24 三轮，components/course-entry.js）
   同源跨文档 View Transition：两端各把「卡片」和「课件舞台」包成同名外框
   `course-hero`，浏览器只形变这个外框，卡片文字/封面与 iframe 里的课件内容
   都不参与拉伸（各自只随 root 做 220ms 交叉淡入）。
   减少动效时整条跨文档转场关闭，退回原来的一次直达。
   ========================================================================== */
@view-transition {
  navigation: auto;
}
::view-transition-group(course-hero) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
::view-transition-old(course-hero),
::view-transition-new(course-hero) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: linear;
}
/* 外框只是一块同外观的纯色盒子：位置/尺寸来自元素当前视口矩形，内容一律不复制 */
.course-vt-frame {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2147483000;
}
/* 过渡结束后 100ms 交班：外框淡出，露出真实卡片 / 真实 iframe */
.course-vt-frame.is-handover {
  opacity: 0;
  transition: opacity 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  .course-vt-frame.is-handover { transition: none; }
}


/* ===== 「我的」页分块状态与邀请/兑换（me-recovery 2026-10-24） =====
   追加段：只新增选择器，不改既有规则，避免与并行动效轮改动冲突。 */
.my-state {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
  color: var(--ink-soft, #6B5D4F);
}
/* me-recovery：分块状态里的语义图标与 .my-empty 同口径（未约束会把 SVG 撑满整行） */
.my-state svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--denim, #4a6b8a); }
.my-redeem-result svg { width: 16px; height: 16px; flex: 0 0 16px; }
.my-state[data-my-state="error"] { color: #A94F1D; }
.my-state-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line, #E3D8C6);
  border-top-color: var(--orange, #E07A3F);
  animation: my-spin 0.9s linear infinite;
  flex: 0 0 14px;
}
@keyframes my-spin { to { transform: rotate(360deg); } }
.redeem-form { display: flex; gap: 8px; margin: 8px 0; }
.redeem-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--line, #E3D8C6);
  border-radius: 10px;
  font: inherit;
  background: var(--surface, #fff);
  color: inherit;
}
.redeem-input:focus-visible { outline: 3px solid var(--orange, #E07A3F); outline-offset: 1px; }
.my-redeem-result { margin: 6px 0 10px; font-size: 13.5px; }
.my-redeem-result[data-tone="success"] { color: #2F5D50; }
.my-redeem-result[data-tone="error"] { color: #B3401F; }
.my-redeem-result[data-tone="info"] { color: var(--ink-soft, #6B5D4F); }
.invite-box { margin: 8px 0 12px; }
.invite-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.12em;
  font-size: 18px;
  color: var(--baked, #A94F1D);
}
.invite-link {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1.5px dashed var(--line, #E3D8C6);
  border-radius: 10px;
  font: 13px ui-monospace, SFMono-Regular, Consolas, monospace;
  background: var(--surface, #fff);
  color: var(--ink-soft, #6B5D4F);
}
.my-child-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.my-chip {
  padding: 6px 14px;
  border: 1.5px solid var(--line, #E3D8C6);
  border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.my-chip.is-current { border-color: var(--orange, #E07A3F); color: var(--baked, #A94F1D); font-weight: 700; }
.my-chip:focus-visible { outline: 3px solid var(--orange, #E07A3F); outline-offset: 2px; }
.my-balance { margin: 4px 0 8px; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
  .my-state-spinner { animation: none; }
}

/* ===== 用户批注（2026-10-25）：记录/反馈默认收起的头部与按钮布局 ===== */
.my-records-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.my-records-head .info-subtitle { margin: 0; }
.my-request-inline { margin-top: 16px; padding-top: 12px; border-top: 1.5px dashed var(--line, #E3D8C6); }
.my-request-inline .btn-primary { margin-top: 8px; }
.my-feedback-form-col [data-feedback-detail] { margin-top: 8px; }