/* ============================================================
   宋本 · 一葉 —— 共享基础层（/yuwen/* 页面通用）

   设计语言 = 宋刻本的版式秩序：版框 / 版心 / 鱼尾 / 界行 / 竖排 / 朱印。
   本文件分三段，被 YuwenHome / Textbook / Poems 三个页面共用：

     ① 主题层  —— 色板 + 纸底 + 共享顶栏 / 页脚换肤
        ★ 跨页面改动全限定在 [data-skin="yuwen-songben"] 下。JS 侧由
          useSongben.js 往 <html> 挂该属性，只有挂了的页面生效，
          其他板块（英语/数学/打卡…）零影响。
     ② 通用元件 —— .sb-page / .sb-vert / .sb-seal / .back-btn 皮肤
     ③ 目录页版式 —— .sb-cap 版框页头 / .sb-toc 目次 / .sb-sel 换册
        / .sb-note 说明条 / .sb-empty 空态

   素材全部是真实的公版原件（克利夫兰艺术博物馆 / 大都会博物馆），无生成图。
   ============================================================ */
/* impeccable-disable design-system-radius, design-system-font-size */
/* ════════════════ ① 主题层 ════════════════ */
/* ── 色板：竹纸与墨朱 ── */
[data-skin="yuwen-songben"] {
  --sb-ink: #221F19;
  --sb-ink-2: #4C463A;
  --sb-ink-3: #837A69;
  --sb-ink-4: #A79E8C;
  --sb-zhu: #A63A2C;
  --sb-rule: rgba(34, 31, 25, 0.86);
  --sb-rule-soft: rgba(34, 31, 25, 0.5);
  --sb-hair: rgba(34, 31, 25, 0.16);
  --sb-fill: rgba(255, 253, 246, 0.44);
  --sb-fill-2: rgba(255, 254, 249, 0.34);
  --sb-panel: rgba(255, 253, 246, 0.72);
  --sb-lift: rgba(255, 255, 255, 0.5);
  --sb-shadow: 0 20px 46px -30px rgba(50, 40, 20, 0.55);
  --sb-shadow-hi: 0 24px 48px -28px rgba(50, 40, 20, 0.62);
  --sb-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'Source Han Serif SC', 'SimSun', serif;
  --sb-sans: 'Optima', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* 夜空主题下的「夜读」：深墨底 + 米色字 + 提亮朱红 */
[data-skin="yuwen-songben"][data-theme="dark"] {
  --sb-ink: #EAE0CA;
  --sb-ink-2: #C6BAA1;
  --sb-ink-3: #9A8E78;
  /* 深色下 -4 承担「朝代·作者」「凡 N 首」「页脚细注」等次要信息，
     原来的 #776C58 在深墨底上只有 ~3.5:1，读不清 → 提到 ~4.7:1 */
  --sb-ink-4: #8C8069;
  --sb-zhu: #D4574A;
  --sb-rule: rgba(234, 224, 202, 0.76);
  --sb-rule-soft: rgba(234, 224, 202, 0.42);
  --sb-hair: rgba(234, 224, 202, 0.15);
  --sb-fill: rgba(255, 246, 225, 0.055);
  --sb-fill-2: rgba(255, 246, 225, 0.04);
  --sb-panel: rgba(32, 27, 22, 0.86);
  --sb-lift: rgba(255, 246, 225, 0.06);
  --sb-shadow: 0 20px 46px -30px rgba(0, 0, 0, 0.8);
  --sb-shadow-hi: 0 24px 48px -28px rgba(0, 0, 0, 0.85);
}

/* ── 纸底（全页） ── */
/* 顶掉全站白底；body::before/after 是既有的固定全屏层（z-index:0），
   #root 内的内容都在 z-index:1 之上，所以直接改这两层最省事、也不动层叠关系。 */
[data-skin="yuwen-songben"] body {
  background-color: #F3EBDC;
  background-image: none;
}

/* 层① 纸纤维细颗粒（overlay，只与下面的纸面混合）
   层② 真绢纸纹 512px 无缝瓦片
   层③④ 四角岁月水渍 */
[data-skin="yuwen-songben"] body::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    url("/yuwen/songben/paper.jpg"),
    radial-gradient(130% 100% at 0% 0%, rgba(152, 126, 80, 0.15), transparent 44%),
    radial-gradient(120% 90% at 100% 100%, rgba(142, 116, 72, 0.13), transparent 48%);
  background-size: 220px 220px, 512px 512px, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal, normal;
  opacity: 1;
  mix-blend-mode: normal;
}
[data-skin="yuwen-songben"] body::after {
  background:
    radial-gradient(58% 40% at 96% 4%, rgba(158, 132, 86, 0.10), transparent 62%),
    radial-gradient(46% 34% at 4% 92%, rgba(158, 132, 86, 0.09), transparent 64%),
    radial-gradient(96% 72% at 50% 46%, transparent 58%, rgba(122, 100, 62, 0.09) 100%);
}

[data-skin="yuwen-songben"][data-theme="dark"] body {
  background-color: #141110;
}
[data-skin="yuwen-songben"][data-theme="dark"] body::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    url("/yuwen/songben/paper.jpg"),
    radial-gradient(130% 100% at 0% 0%, rgba(120, 92, 52, 0.16), transparent 46%),
    linear-gradient(176deg, #201C17 0%, #16130F 46%, #0E0C0A 100%);
  background-size: 220px 220px, 512px 512px, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  /* 纸纹改用 soft-light 压进墨底，只留织纹的微光 */
  background-blend-mode: overlay, soft-light, normal, normal;
}
[data-skin="yuwen-songben"][data-theme="dark"] body::after {
  background:
    radial-gradient(58% 40% at 96% 4%, rgba(196, 158, 96, 0.07), transparent 62%),
    radial-gradient(46% 34% at 4% 92%, rgba(196, 158, 96, 0.06), transparent 64%),
    radial-gradient(96% 72% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.35) 100%);
}

/* ── 顶栏：也换成宋本样式 ── */
[data-skin="yuwen-songben"] .hero-header {
  align-items: baseline;
  font-family: var(--sb-serif);
  padding: calc(22px * var(--hero-scale)) calc(48px * var(--hero-scale)) calc(12px * var(--hero-scale));
  border-bottom: 1px solid var(--sb-rule);
}
/* 版框的双边：主细线下面再压一道更淡的线 */
[data-skin="yuwen-songben"] .hero-header::after {
  content: "";
  position: absolute;
  left: calc(48px * var(--hero-scale));
  right: calc(48px * var(--hero-scale));
  bottom: -4px;
  height: 1px;
  background: var(--sb-hair);
}
[data-skin="yuwen-songben"] .hero-header .header-site-title {
  font-family: var(--sb-serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--sb-ink);
}
[data-skin="yuwen-songben"] .hero-header .header-nav {
  gap: 26px;
  font-size: 0.86rem;
  letter-spacing: 0.18em;
}
[data-skin="yuwen-songben"] .hero-header .header-nav a {
  font-family: var(--sb-serif);
  color: var(--sb-ink-2);
}
[data-skin="yuwen-songben"] .hero-header .header-nav a:hover { color: var(--sb-zhu); }
[data-skin="yuwen-songben"] .hero-header .header-nav a.active { color: var(--sb-ink); font-weight: 600; }
/* 当前板块：小朱点（宋本的"书耳"提示） */
[data-skin="yuwen-songben"] .hero-header .header-nav a.active::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--sb-zhu);
  margin-left: 7px;
  vertical-align: middle;
}
[data-skin="yuwen-songben"] .hero-header .icon-btn,
[data-skin="yuwen-songben"] .hero-header .header-burger {
  border-color: var(--sb-hair);
  background: var(--sb-panel);
  color: var(--sb-ink-2);
}
[data-skin="yuwen-songben"] .hero-header .icon-btn:hover {
  border-color: var(--sb-rule-soft);
  color: var(--sb-zhu);
}
[data-skin="yuwen-songben"] .hero-header .header-burger span { background: var(--sb-ink-2); }
[data-skin="yuwen-songben"] .header-burger-panel {
  background: var(--sb-panel);
  border-color: var(--sb-hair);
  font-family: var(--sb-serif);
}
[data-skin="yuwen-songben"] .header-burger-panel .burger-item { color: var(--sb-ink-2); }
[data-skin="yuwen-songben"] .header-burger-panel .burger-item:hover,
[data-skin="yuwen-songben"] .header-burger-panel .burger-item.active {
  background: rgba(166, 58, 44, 0.09);
  color: var(--sb-zhu);
}
/* 页脚（全站 Footer 是内联色，得用 !important 压） */
[data-skin="yuwen-songben"] footer:not(.sb-colophon) {
  color: var(--sb-ink-4) !important;
  font-family: var(--sb-serif);
}

/* ════════════════ ② 通用元件 ════════════════ */
/* 页面容器 */
[data-skin="yuwen-songben"] .sb-page {
  position: relative;
  z-index: 1;
  font-family: var(--sb-serif);
  color: var(--sb-ink);
  padding-bottom: 26px;
}

/* 竖排通用 */
[data-skin="yuwen-songben"] .sb-vert { writing-mode: vertical-rl; text-orientation: upright; }

/* 朱印：透明底原印，尺寸三档 */
[data-skin="yuwen-songben"] .sb-seal { display: block; height: auto; }
[data-skin="yuwen-songben"] .sb-seal--hero { width: 62px; opacity: 0.92; }
[data-skin="yuwen-songben"] .sb-seal--sm { width: 34px; opacity: 0.85; }
[data-skin="yuwen-songben"] .sb-seal--md { width: 44px; opacity: 0.9; }

/* 书耳：竖排小签，标卷次（首页在大门上，内页在版框内右上角） */
[data-skin="yuwen-songben"] .sb-ear {
  position: absolute;
  top: 16px;
  right: 16px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  color: var(--sb-zhu);
  background: var(--sb-panel);
  border: 1px solid rgba(166, 58, 44, 0.42);
  padding: 7px 3px;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}

/* 返回按钮：紫粉胶囊 → 宋本小签（全站 .back-btn，只在 yuwen 页覆盖） */
[data-skin="yuwen-songben"] .back-btn {
  background: var(--sb-panel);
  border: 1px solid var(--sb-rule-soft);
  border-radius: 0;
  color: var(--sb-ink-2);
  font-family: var(--sb-serif);
  font-weight: 400;
  letter-spacing: 0.16em;
  box-shadow: none;
  backdrop-filter: none;
  padding: 7px 14px;
}
[data-skin="yuwen-songben"] .back-btn:hover {
  background: var(--sb-panel);
  border-color: var(--sb-zhu);
  color: var(--sb-zhu);
  transform: translateX(-3px);
}

/* ════════════════ ③ 目录页版式（Textbook / Poems 共用） ════════════════ */
/* ── 版框页头：外粗 + 内细，与首页书叶同一套边框语言 ── */
[data-skin="yuwen-songben"] .sb-cap {
  position: relative;
  margin-top: 30px;
  border: 2px solid var(--sb-ink);
  background: var(--sb-fill);
  box-shadow: 0 1px 0 var(--sb-lift) inset, var(--sb-shadow);
}
[data-skin="yuwen-songben"] .sb-cap-in {
  position: relative;
  border: 1px solid var(--sb-rule);
  margin: 5px;
  padding: 26px 32px 22px;
  display: flex;
  align-items: flex-end;
  gap: 26px;
  background: var(--sb-fill-2);
}
[data-skin="yuwen-songben"] .sb-cap-txt { flex: 1 1 auto; min-width: 0; }
[data-skin="yuwen-songben"] .sb-cap-kind {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.44em;
  color: var(--sb-zhu);
  margin-bottom: 12px;
}
[data-skin="yuwen-songben"] .sb-cap-title {
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.22;
  color: var(--sb-ink);
  text-shadow: 0 1px 0 var(--sb-lift);
  margin: 0 0 11px;
}
[data-skin="yuwen-songben"] .sb-cap-sub {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--sb-ink-3);
}
[data-skin="yuwen-songben"] .sb-cap-sub b { color: var(--sb-zhu); font-weight: 600; }
/* 版框下的第二道界线（版心"界行"的呼应） */
[data-skin="yuwen-songben"] .sb-cap::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -5px;
  height: 1px;
  background: var(--sb-hair);
}
[data-skin="yuwen-songben"] .sb-cap-mark { flex: 0 0 auto; align-self: flex-end; }

/* ── 卷次标题：卷一 · 一年级 ────── 凡 12 首 ── */
[data-skin="yuwen-songben"] .sb-toc-group { margin-top: 30px; }
[data-skin="yuwen-songben"] .sb-toc-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sb-rule-soft);
  font-weight: 600;
}
[data-skin="yuwen-songben"] .sb-toc-vol { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--sb-zhu); flex: 0 0 auto; }
[data-skin="yuwen-songben"] .sb-toc-grade { font-size: 1.04rem; letter-spacing: 0.22em; color: var(--sb-ink); }
[data-skin="yuwen-songben"] .sb-toc-count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--sb-ink-4);
}

/* ── 目次册子：细框 + 纸色底 ── */
[data-skin="yuwen-songben"] .sb-toc {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--sb-fill);
  border: 1px solid var(--sb-rule);
  box-shadow: 0 1px 0 var(--sb-lift) inset, var(--sb-shadow);
}

/* ── 目次行：序号 · 篇名 · 引导点 · 右注 ── */
[data-skin="yuwen-songben"] .sb-toc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 9px 18px;
  text-decoration: none;
  color: var(--sb-ink);
  border-bottom: 1px solid var(--sb-hair);
  transition: background 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), color 0.3s;
}
[data-skin="yuwen-songben"] .sb-toc li:last-child .sb-toc-row { border-bottom: 0; }
[data-skin="yuwen-songben"] .sb-toc-row:hover { background: rgba(166, 58, 44, 0.055); }

/* 序号：默认细方框；可点击 = 设为目标时转朱印实底
   宽度固定 30px，「十五」这类两字序号也放得下，整列才排得齐 */
[data-skin="yuwen-songben"] .sb-toc-no {
  flex: 0 0 auto;
  min-width: 30px;
  height: 25px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sb-ink-2);
  background: transparent;
  border: 1px solid var(--sb-hair);
  user-select: none;
  transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s;
}
[data-skin="yuwen-songben"] .sb-toc-no.is-click { cursor: pointer; }
[data-skin="yuwen-songben"] .sb-toc-no.is-click:hover { border-color: var(--sb-zhu); color: var(--sb-zhu); transform: scale(1.1); }
[data-skin="yuwen-songben"] .sb-toc-no.is-target {
  color: #F6EEDE;
  background: var(--sb-zhu);
  border-color: var(--sb-zhu);
}
[data-skin="yuwen-songben"] .sb-toc-no.is-target:hover { color: #F6EEDE; transform: scale(1.06); }
[data-skin="yuwen-songben"][data-theme="dark"] .sb-toc-no.is-target { color: #1B1714; }

/* 篇名 */
[data-skin="yuwen-songben"] .sb-toc-name {
  flex: 0 0 auto;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.3s;
}
[data-skin="yuwen-songben"] .sb-toc-row:hover .sb-toc-name { color: var(--sb-zhu); }

/* 引导点：宋本目录「篇名 …… 页码」的点点线 */
[data-skin="yuwen-songben"] .sb-toc-lead {
  flex: 1 1 auto;
  min-width: 14px;
  height: 1em;
  background-image: radial-gradient(circle, var(--sb-ink-4) 1px, transparent 1.2px);
  background-size: 7px 7px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 4px);
  opacity: 0.5;
}

/* 右注：页数 / 朝代·作者 */
[data-skin="yuwen-songben"] .sb-toc-note {
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--sb-ink-3);
  white-space: nowrap;
}

/* 右侧组：标签 + 箭头 */
[data-skin="yuwen-songben"] .sb-toc-right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[data-skin="yuwen-songben"] .sb-toc-arrow {
  flex-shrink: 0;
  color: var(--sb-ink-4);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), color 0.3s;
}
[data-skin="yuwen-songben"] .sb-toc-row:hover .sb-toc-arrow { color: var(--sb-zhu); transform: translateX(3px); }

/* ── 换册控件：年级 / 学期做成宋本方签（替代紫粉下拉） ── */
[data-skin="yuwen-songben"] .sb-sel {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--sb-hair);
}
[data-skin="yuwen-songben"] .sb-sel-row { display: flex; align-items: center; gap: 16px; }
[data-skin="yuwen-songben"] .sb-sel-row + .sb-sel-row { margin-top: 10px; }
[data-skin="yuwen-songben"] .sb-sel-label {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--sb-ink-3);
}
[data-skin="yuwen-songben"] .sb-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
[data-skin="yuwen-songben"] .sb-chip {
  font-family: var(--sb-serif);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--sb-ink-2);
  background: var(--sb-fill);
  border: 1px solid var(--sb-rule-soft);
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
[data-skin="yuwen-songben"] .sb-chip:hover { border-color: var(--sb-zhu); color: var(--sb-zhu); }
[data-skin="yuwen-songben"] .sb-chip.is-on { background: var(--sb-zhu); border-color: var(--sb-zhu); color: #F6EEDE; }
[data-skin="yuwen-songben"][data-theme="dark"] .sb-chip.is-on { color: #1B1714; }
/* 尚未配册的年级：虚线框 + 淡字，一眼看出哪些册有内容 */
[data-skin="yuwen-songben"] .sb-chip.is-todo { border-style: dashed; color: var(--sb-ink-4); }
[data-skin="yuwen-songben"] .sb-chip.is-todo:hover { color: var(--sb-zhu); }
[data-skin="yuwen-songben"] .sb-chip:focus-visible { outline: 2px solid var(--sb-zhu); outline-offset: 2px; }

/* ── 说明条 / 细注 ── */
[data-skin="yuwen-songben"] .sb-note {
  margin: 22px 0 0;
  font-size: 0.8rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--sb-ink-2);
}
[data-skin="yuwen-songben"] .sb-note b { color: var(--sb-zhu); font-weight: 600; }
[data-skin="yuwen-songben"] .sb-note-warn { color: var(--sb-zhu); }
[data-skin="yuwen-songben"] .sb-fine {
  margin: 22px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--sb-ink-4);
  text-align: center;
}

/* ── 空态：一枚朱印 + 宋体提示（不用卡通，保持纸面一致） ── */
[data-skin="yuwen-songben"] .sb-empty {
  margin-top: 34px;
  padding: 46px 24px 42px;
  border: 1px solid var(--sb-rule-soft);
  background: var(--sb-fill);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
[data-skin="yuwen-songben"] .sb-empty-txt {
  margin: 0;
  font-size: 0.86rem;
  line-height: 2.1;
  letter-spacing: 0.1em;
  color: var(--sb-ink-2);
}
[data-skin="yuwen-songben"] .sb-empty-txt b { color: var(--sb-zhu); font-weight: 600; }

/* ── 课本页：单元块 ── */
[data-skin="yuwen-songben"] .sb-unit { margin-top: 26px; }
[data-skin="yuwen-songben"] .sb-unit-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sb-rule-soft);
  font-weight: 600;
}
[data-skin="yuwen-songben"] .sb-unit-no { flex: 0 0 auto; font-size: 1.04rem; letter-spacing: 0.22em; color: var(--sb-ink); }
[data-skin="yuwen-songben"] .sb-unit-theme { font-size: 0.76rem; letter-spacing: 0.16em; color: var(--sb-ink-3); }
[data-skin="yuwen-songben"] .sb-unit-flag {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--sb-zhu);
}
[data-skin="yuwen-songben"] .sb-unit-goal {
  margin: 0 0 12px;
  padding-left: 13px;
  border-left: 2px solid var(--sb-hair);
  font-size: 0.76rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--sb-ink-3);
  white-space: pre-line;
}

/* ── 搜索框：宋本皮肤（SearchBox 是共享组件，这里只给它套一层 .sb-search） ── */
[data-skin="yuwen-songben"] .sb-search { margin-top: 22px; }
[data-skin="yuwen-songben"] .sb-search .input {
  font-family: var(--sb-serif);
  color: var(--sb-ink);
  background: var(--sb-fill);
  border: 1px solid var(--sb-rule-soft);
  border-radius: 0;
  padding: 10px 14px 10px 46px;
  letter-spacing: 0.06em;
  box-shadow: none;
  backdrop-filter: none;
}
[data-skin="yuwen-songben"] .sb-search .input::placeholder { color: var(--sb-ink-4); }
[data-skin="yuwen-songben"] .sb-search .input:focus { border-color: var(--sb-zhu); box-shadow: none; }
/* 放大镜是内联 color，只能 !important 压（外壳内仅此一个 span） */
[data-skin="yuwen-songben"] .sb-search span { color: var(--sb-ink-4) !important; }
/* 夜读：占位符与放大镜提到 -3，否则在深墨底上几乎看不见 */
[data-skin="yuwen-songben"][data-theme="dark"] .sb-search .input::placeholder,
[data-skin="yuwen-songben"][data-theme="dark"] .sb-search span { color: var(--sb-ink-3) !important; }

/* ════════════════ 响应式 ════════════════ */
/* 顶栏字距变宽后，中窄屏要给导航松绑，免得挤破一行 */
[data-skin="yuwen-songben"] @media (max-width: 1200px) {
  [data-skin="yuwen-songben"] .hero-header .header-nav { gap: 17px; letter-spacing: 0.1em; font-size: 0.8rem; }
  [data-skin="yuwen-songben"] .hero-header .header-site-title { letter-spacing: 0.2em; }
}

@media (max-width: 820px) {
  [data-skin="yuwen-songben"] .sb-cap { margin-top: 22px; }
  [data-skin="yuwen-songben"] .sb-cap-in { padding: 20px 20px 18px; gap: 18px; }
}

@media (max-width: 560px) {
  [data-skin="yuwen-songben"] .sb-cap-in { padding: 18px 16px 16px; }
  [data-skin="yuwen-songben"] .sb-cap-kind { letter-spacing: 0.3em; margin-bottom: 9px; }
  [data-skin="yuwen-songben"] .sb-cap-sub { font-size: 0.73rem; line-height: 1.85; }
  [data-skin="yuwen-songben"] .sb-seal--hero { width: 50px; }
  /* 窄屏书耳改横排小签，否则会跟标题抢位置 */
[data-skin="yuwen-songben"] .sb-ear { writing-mode: horizontal-tb; padding: 3px 8px; font-size: 0.58rem; letter-spacing: 0.18em; }
  [data-skin="yuwen-songben"] .sb-sel { padding-left: 13px; }
  [data-skin="yuwen-songben"] .sb-sel-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  [data-skin="yuwen-songben"] .sb-toc-row { padding: 8px 13px; gap: 10px; }
  /* 目次行窄屏：收起引导点 + 篇名允许折行。
     篇名/右注都是 nowrap 的 flex:0 0 auto，不给收缩余地的话，
     「快乐读书吧：读读童话故事」这类长篇名会把箭标顶出屏幕（实测溢出 11px）。 */
[data-skin="yuwen-songben"] .sb-toc-lead { display: none; }
  [data-skin="yuwen-songben"] .sb-toc-name { font-size: 0.96rem; flex: 1 1 auto; min-width: 0; white-space: normal; }
  [data-skin="yuwen-songben"] .sb-toc-group { margin-top: 24px; }
}

@media (max-width: 420px) {
  /* 极窄屏：让位给篇名，右注再收一档（引导点已在 560px 档收起） */
[data-skin="yuwen-songben"] .sb-toc-note { font-size: 0.72rem; }
  [data-skin="yuwen-songben"] .sb-toc-name { font-size: 0.92rem; }
  [data-skin="yuwen-songben"] .sb-toc-no { min-width: 26px; height: 23px; font-size: 0.72rem; }
}
/* ============================================================
   语文首页 · 宋本一葉（YuwenHome 专属样式）

   设计语言 = 宋刻本的版式秩序：版框 / 版心 / 鱼尾 / 界行 / 竖排 / 朱印。
   本页结构：书叶（一叶两面，中间是版心）→ 两叶入口 → 落款。

   ★ 主题层（色板 / 纸底 / 共享顶栏 / 页脚）与通用元件、目录页版式，
     已抽到同目录的 songben.css，由 YuwenHome / Textbook / Poems 共用。
     本文件只放**首页专属**的书叶、两叶入口与落款 —— 与 songben.css
     的选择器互不重叠，所以两个文件的加载顺序不影响层叠。
   ★ 素材全部是真实的公版原件（克利夫兰艺术博物馆 / 大都会博物馆）：
     · 书影 = 《十竹斋书画谱》明崇祯六年（1633）饾版套印本
     · 两叶插图 = 同谱花鸟页 / 清供页
     · 朱印 = 从宋人《花鸟图》等原迹上抠下的透明底原印
   ============================================================ */
/* impeccable-disable design-system-radius, design-system-font-size */
/* ════════════════ 书叶：版框 / 版心 / 鱼尾 ════════════════ */
[data-skin="yuwen-songben"] .sb-leaf {
  margin-top: 34px;
  border: 2px solid var(--sb-ink);            /* 四周双边：外粗 */
  background: var(--sb-fill);
  box-shadow: 0 1px 0 var(--sb-lift) inset, var(--sb-shadow);
}
[data-skin="yuwen-songben"] .sb-leaf-in {
  border: 1px solid var(--sb-rule);           /* 内细 */
  margin: 5px;
  display: flex;
  align-items: stretch;
}

/* —— 左半叶 —— */
[data-skin="yuwen-songben"] .sb-half { flex: 1 1 0; min-width: 0; display: flex; gap: 26px; }
[data-skin="yuwen-songben"] .sb-half--l { padding: 34px 28px 30px 30px; align-items: flex-start; justify-content: space-between; }
[data-skin="yuwen-songben"] .sb-half--r { padding: 34px 34px 30px 28px; align-items: flex-start; justify-content: space-between; gap: 20px; }

[data-skin="yuwen-songben"] .sb-bookplate { width: 200px; flex: 0 0 auto; margin: 0; }
[data-skin="yuwen-songben"] .sb-bookplate img {
  width: 100%;
  display: block;
  border: 1px solid var(--sb-rule-soft);
  outline: 1px solid var(--sb-hair);
  outline-offset: 3px;
  filter: sepia(0.06) contrast(1.04);
  box-shadow: 0 14px 28px -18px rgba(40, 32, 18, 0.78);
}
[data-skin="yuwen-songben"] .sb-bookplate figcaption {
  margin: 10px 0 0;
  font-size: 0.67rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--sb-ink-3);
}
[data-skin="yuwen-songben"] .sb-bookplate figcaption b {
  font-weight: 500;
  color: var(--sb-ink-2);
  display: block;
  letter-spacing: 0.12em;
}

/* 竖排题款：一行到底（折行会把「二年级」断开），并靠到左半叶底部——留白走对角，不显得空 */
[data-skin="yuwen-songben"] .sb-half-meta {
  padding-top: 2px;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  line-height: 2;
  color: var(--sb-ink-2);
  margin: 0;
  white-space: nowrap;
  align-self: flex-end;
}
[data-skin="yuwen-songben"] .sb-half-meta b { font-weight: 600; color: var(--sb-ink); }
[data-skin="yuwen-songben"] .sb-half-meta span { color: var(--sb-zhu); }

/* —— 版心：鱼尾 + 书名 + 界行 + 叶次 —— */
[data-skin="yuwen-songben"] .sb-banxin {
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid var(--sb-rule);
  border-right: 1px solid var(--sb-rule);
  padding: 12px 0;
  background: linear-gradient(90deg, var(--sb-hair), transparent 48%, var(--sb-hair));
}
[data-skin="yuwen-songben"] .sb-yuwei { width: 30px; height: 22px; flex: 0 0 auto; display: block; }
[data-skin="yuwen-songben"] .sb-yuwei svg { width: 100%; height: 100%; display: block; fill: var(--sb-ink); }
[data-skin="yuwen-songben"] .sb-yuwei--b { margin-top: auto; }
[data-skin="yuwen-songben"] .sb-bx-title {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: var(--sb-ink);
  margin: 16px 0;
  white-space: nowrap;
}
[data-skin="yuwen-songben"] .sb-bx-leaf { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--sb-ink-3); white-space: nowrap; }
[data-skin="yuwen-songben"] .sb-bx-rule { width: 1px; flex: 1; min-height: 12px; background: var(--sb-hair); margin: 14px 0; }

/* —— 右半叶：序 / 副题 / 书名 / 朱印 —— */
/* 序：竖排两列，高度给够一行 12 字即可；<br> 明确断行，width 限住列数 */
[data-skin="yuwen-songben"] .sb-xu {
  font-size: 0.77rem;
  letter-spacing: 0.18em;
  line-height: 2.2;
  color: var(--sb-ink-2);
  height: 186px;
  max-width: 84px;
  margin: 0;
  white-space: nowrap;
}
[data-skin="yuwen-songben"] .sb-descbox { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 4px; }
/* 副题：写成双行小注（用一个 <br> 明确断行），比让它自己折行更可控 */
[data-skin="yuwen-songben"] .sb-desc-col {
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  line-height: 2.05;
  color: var(--sb-ink-2);
  max-height: 152px;
  margin: 0;
  white-space: nowrap;
}
[data-skin="yuwen-songben"] .sb-desc-col em { font-style: normal; color: var(--sb-ink-4); font-size: 0.74rem; }
[data-skin="yuwen-songben"] .sb-title-col {
  font-size: clamp(2.6rem, 7.6vw, 3.7rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--sb-ink);
  text-shadow: 0 1px 0 var(--sb-lift);
  margin: 0;
}

/* 深色下书影是"深蓝书在深墨底上"，边框要实一点才看得出图版的边界 */
[data-skin="yuwen-songben"][data-theme="dark"] .sb-bookplate img {
  border-color: rgba(234, 224, 202, 0.34);
  outline-color: rgba(234, 224, 202, 0.12);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.9);
}

/* ════════════════ 两叶入口 ════════════════ */
[data-skin="yuwen-songben"] .sb-leaves { margin-top: 58px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

[data-skin="yuwen-songben"] .sb-lf {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  border: 2px solid var(--sb-ink);
  background: var(--sb-fill);
  padding: 5px;
  transition: box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
[data-skin="yuwen-songben"] .sb-lf-in {
  border: 1px solid var(--sb-rule);
  padding: 24px 22px 22px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  position: relative;
  background: var(--sb-fill-2);
}
[data-skin="yuwen-songben"] .sb-lf-art { flex: 0 0 170px; }
[data-skin="yuwen-songben"] .sb-lf-art img {
  width: 100%;
  display: block;
  border: 1px solid var(--sb-rule-soft);
  filter: sepia(0.05) contrast(1.02);
  transition: filter 0.5s, transform 0.65s cubic-bezier(0.2, 0.8, 0.3, 1);
}
[data-skin="yuwen-songben"] .sb-lf-body { flex: 1; min-width: 0; padding-top: 1px; }
[data-skin="yuwen-songben"] .sb-lf-kind { font-size: 0.66rem; letter-spacing: 0.44em; color: var(--sb-zhu); display: block; margin-bottom: 13px; }
[data-skin="yuwen-songben"] .sb-lf-name { font-size: 1.72rem; font-weight: 600; letter-spacing: 0.16em; margin: 0 0 12px; line-height: 1.25; }
[data-skin="yuwen-songben"] .sb-lf-name small {
  display: block;
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--sb-ink-4);
  margin-top: 7px;
}
[data-skin="yuwen-songben"] .sb-lf-note { font-size: 0.82rem; line-height: 1.98; color: var(--sb-ink-2); margin: 0; letter-spacing: 0.04em; }
[data-skin="yuwen-songben"] .sb-lf-tags { margin-top: 15px; display: flex; flex-wrap: wrap; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--sb-ink-3); }
[data-skin="yuwen-songben"] .sb-lf-tags span { padding: 0 10px; border-left: 1px solid var(--sb-hair); }
[data-skin="yuwen-songben"] .sb-lf-tags span:first-child { padding-left: 0; border-left: 0; }

/* 书耳：版框内右上角的小签，hover 转朱 */
[data-skin="yuwen-songben"] .sb-lf-ear {
  position: absolute;
  top: 5px;
  right: 5px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  color: var(--sb-zhu);
  background: var(--sb-panel);
  border: 1px solid rgba(166, 58, 44, 0.42);
  padding: 7px 3px;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
[data-skin="yuwen-songben"] .sb-lf:hover { transform: translateY(-3px); box-shadow: var(--sb-shadow-hi); }
[data-skin="yuwen-songben"] .sb-lf:hover .sb-lf-art img { filter: sepia(0) contrast(1.06) saturate(1.12); transform: scale(1.025); }
[data-skin="yuwen-songben"] .sb-lf:hover .sb-lf-ear { background: var(--sb-zhu); color: #F6EEDE; border-color: var(--sb-zhu); }
/* 右下角小朱印：hover 才浮出来 */
[data-skin="yuwen-songben"] .sb-lf-mark { position: absolute; left: 24px; bottom: 2px; opacity: 0; transition: opacity 0.45s; }
[data-skin="yuwen-songben"] .sb-lf:hover .sb-lf-mark, [data-skin="yuwen-songben"] .sb-lf:focus-visible .sb-lf-mark { opacity: 0.9; }

/* 键盘聚焦：用朱红细框，别让全站的紫色 outline 落在纸面上 */
[data-skin="yuwen-songben"] .sb-lf:focus-visible {
  outline: 2px solid var(--sb-zhu);
  outline-offset: 3px;
}

/* ════════════════ 落款 ════════════════ */
[data-skin="yuwen-songben"] .sb-colophon {
  margin-top: 62px;
  padding-top: 18px;
  border-top: 1px solid var(--sb-hair);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
[data-skin="yuwen-songben"] .sb-cl-txt { font-size: 0.78rem; letter-spacing: 0.22em; color: var(--sb-ink-2); }
[data-skin="yuwen-songben"] .sb-cl-sp { flex: 1; min-width: 20px; }
[data-skin="yuwen-songben"] .sb-cl-fine { font-size: 0.67rem; letter-spacing: 0.1em; color: var(--sb-ink-4); line-height: 1.95; max-width: 580px; }

/* ════════════════ 响应式 ════════════════ */
[data-skin="yuwen-songben"] @media (max-width: 900px) {
  [data-skin="yuwen-songben"] .sb-xu { display: none; }
}

@media (max-width: 820px) {
  [data-skin="yuwen-songben"] .sb-leaf-in { flex-direction: column; }
  [data-skin="yuwen-songben"] .sb-half--l { display: none; }
  [data-skin="yuwen-songben"] .sb-banxin {
    flex: 0 0 auto;
    flex-direction: row;
    border: 0;
    border-bottom: 1px solid var(--sb-rule);
    padding: 0 16px;
    height: 46px;
    gap: 16px;
    background: none;
  }
  [data-skin="yuwen-songben"] .sb-yuwei { display: none; }
  [data-skin="yuwen-songben"] .sb-bx-title { margin: 0; letter-spacing: 0.24em; }
  [data-skin="yuwen-songben"] .sb-bx-rule { width: 1px; height: 16px; flex: 0 0 auto; margin: 0; }
  [data-skin="yuwen-songben"] .sb-bx-leaf { margin-left: auto; letter-spacing: 0.16em; }
  [data-skin="yuwen-songben"] .sb-half--r { padding: 26px 22px 24px; justify-content: flex-start; gap: 26px; }
  [data-skin="yuwen-songben"] .sb-leaves { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 560px) {
  [data-skin="yuwen-songben"] .sb-leaf { margin-top: 22px; }
  [data-skin="yuwen-songben"] .sb-half--r { gap: 18px; }
  [data-skin="yuwen-songben"] .sb-title-col { font-size: 2.5rem; letter-spacing: 0.1em; }
  [data-skin="yuwen-songben"] .sb-desc-col { font-size: 0.74rem; letter-spacing: 0.2em; max-height: 140px; }
  [data-skin="yuwen-songben"] .sb-seal--hero { width: 50px; }
  [data-skin="yuwen-songben"] .sb-lf-in { flex-direction: column; gap: 16px; padding: 20px 18px; }
  [data-skin="yuwen-songben"] .sb-lf-art { flex: 0 0 auto; width: 132px; }
  [data-skin="yuwen-songben"] .sb-lf-name { font-size: 1.5rem; }
  /* 手机上竖排书耳改成横排小签，否则会跟标题抢位置 */
[data-skin="yuwen-songben"] .sb-lf-ear { writing-mode: horizontal-tb; padding: 3px 8px; font-size: 0.58rem; letter-spacing: 0.18em; }
  [data-skin="yuwen-songben"] .sb-cl-fine { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="yuwen-songben"] .sb-lf, [data-skin="yuwen-songben"] .sb-lf-art img { transition: none !important; }
}
/* ============================================================
   课本辅导 · Textbook 专属样式（宋本 · 目次叶）

   结构性样式（版框页头 / 换册方签 / 卷次标题 / 目次行 / 空态）
   全部在 songben.css 里，与古诗页共用。本文件只放**课本页独有**的部分：
   附录块（识字表 / 写字表 / 词语表）与正文单元做视觉区分。
   ============================================================ */
/* 附录块：标题转赭石，一眼看出这块不是课文 */
[data-skin="yuwen-songben"] .sb-unit.is-appendix .sb-unit-no { color: #8A6A22; }
[data-skin="yuwen-songben"][data-theme="dark"] .sb-unit.is-appendix .sb-unit-no { color: #D3B06A; }

/* 附录没有学习目标，块与块之间收紧一点，不至于散 */
[data-skin="yuwen-songben"] .sb-unit.is-appendix { margin-top: 30px; }
/* ============================================================
   通用版语文页 · 专属样式（layout: plain）

   这些类（.pl-*）只在通用版外壳里出现，和宋本的 .sb-* 是两套、
   由 SkinRoute 分流渲染，永远不会同时上屏，所以不需要 [data-skin] 前缀。

   配色**一律取全站变量**（--violet-* / --pink-* / --amber* / --text-* …）→
   天然跟随全站主题，也自动跟随深浅色模式，不用单独写夜配色。
   ============================================================ */

/* 通用版页面外层：唯一的「这是通用版」标记（回归脚本靠它判断切没切干净）
   + min-width:0 防止卡在 grid/flex 容器里被内容撑宽 */
.pl-page { min-width: 0; }

/* ── 年级分组 ── */
.pl-toc-group { margin-top: 16px; }
.pl-toc-group:first-child { margin-top: 0; }
.pl-toc-cap {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px;
}
.pl-toc-grade { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.pl-toc-count { font-size: var(--fs-xs); color: var(--text-3); }
/* 分组小图标（跟 .section-title .title-icon 同一套配色，但要能独立用） */
.pl-toc-icon {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 10px 20px 11px 18px / 10px 15px 11px 14px;
  background: linear-gradient(140deg, var(--violet-100), var(--pink-100));
  color: var(--violet-600);
  display: inline-flex; align-items: center; justify-content: center;
}

.pl-toc { list-style: none; margin: 0; padding: 0; }
.pl-toc li + li { border-top: 1px dashed var(--violet-100); }

/* ── 一条目录行 ── */
.pl-toc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur, 0.2s) var(--ease, ease);
}
.pl-toc-row:hover { background: var(--violet-50); }

/* 序号：可点，用来设为打卡目标 */
.pl-no {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 800;
  background: var(--violet-50);
  color: var(--violet-600);
  border: 1px solid var(--violet-100);
  cursor: pointer;
  transition: transform var(--dur, 0.2s) var(--ease, ease), border-color var(--dur, 0.2s);
}
.pl-no:hover { border-color: var(--violet-400); transform: scale(1.08); }
.pl-no.is-target {
  background: linear-gradient(135deg, var(--violet-500), var(--pink-500));
  color: #fff;
  border-color: transparent;
}

.pl-name { font-weight: 800; color: var(--ink); flex: 0 1 auto; }
.pl-meta { color: var(--text-2); font-size: var(--fs-sm); flex: 0 0 auto; }
.pl-lead { flex: 1 1 auto; min-width: 8px; }
.pl-right { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pl-arrow { color: var(--violet-400); }

/* ── 「上次提交」复习小签：紫（刚背过）→ 琥珀（4~9 天）→ 粉（该复习了） ── */
.pl-last {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.pl-last.is-fresh { color: var(--violet-600); background: var(--violet-50); }
.pl-last.is-mid   { color: #8A5A0A; background: var(--amber-soft); }
.pl-last.is-due   { color: var(--pink-600); background: var(--pink-50); }
.pl-last-ago { opacity: 0.75; }

/* ── 窄屏：收起「几天前」，保住篇名 ── */
@media (max-width: 420px) {
  .pl-last-ago { display: none; }
  .pl-toc-row { gap: 8px; padding: 10px 4px; }
}

/* ============================================================
   诗页（PlainPoem）
   ============================================================ */

/* ── 诗 + 注释：宽屏左右两栏，窄屏上下堆叠 ── */
.pl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.pl-poem-body { padding-right: 20px; }
.pl-anno {
  padding-left: 20px;
  border-left: 1px dashed var(--violet-100);
}
@media (max-width: 720px) {
  .pl-split { grid-template-columns: 1fr; }
  .pl-poem-body { padding: 0 0 16px; }
  .pl-anno {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px dashed var(--violet-100);
  }
}

/* ── 古诗动画的视频容器 ── */
.pl-video-box {
  margin-top: 10px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #0b1b2b;
}
.pl-video-box video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #04121f;
}

/* ── 扩展阅读链接 ── */
.pl-ref-list { list-style: none; margin: 0; padding: 0; }
.pl-ref-item { border-bottom: 1px dashed var(--violet-100); }
.pl-ref-item:last-child { border-bottom: 0; }
.pl-ref-link { color: var(--violet-600); font-weight: 700; text-decoration: none; }
.pl-ref-link:hover { color: var(--violet-500); text-decoration: underline; }

/* ============================================================
   换册方签（PlainTextbook）
   ============================================================ */
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip {
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--violet-100);
  background: var(--card-solid, #fff);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur, 0.2s), color var(--dur, 0.2s), transform var(--dur, 0.2s);
}
.pl-chip:hover { border-color: var(--violet-300); color: var(--violet-600); transform: translateY(-1px); }
.pl-chip.is-on {
  background: linear-gradient(135deg, var(--violet-500), var(--pink-500));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}
/* 该册还没配图 → 虚线 + 淡字，不用点进去才知道是空的 */
.pl-chip.is-todo { border-style: dashed; opacity: 0.55; }

/* 课本目次的序号只是展示，不可点（古诗目录那个是可以点着设打卡目标的） */
.pl-no.is-plain { cursor: default; }
.pl-no.is-plain:hover { border-color: var(--violet-100); transform: none; }
/* ============================================================
   古诗目录导航 · Poems 专属样式（宋本 · 目次叶）

   结构性样式（版框页头 / 卷次标题 / 目次行 / 序号 / 引导点 / 空态）
   全部在 songben.css 里，与课本页共用。本文件只放**古诗页独有**的三块：

     ① 分栏：卷次块两栏排（宽屏 2 栏 / 窄屏 1 栏）
     ② 「上次提交」复习标签：三档配色改成宋本矿物色（青绿 / 赭石 / 朱）
     ③ 筛选栏三件套的宋本皮肤（.filter-bar / .select-filter / .filter-reset）
   ============================================================ */
/* ── ① 分栏：卷次块两栏排列 ──
   断点取 900px：768px（iPad 竖屏）时两栏每栏只剩 ~347px，
   装不下「篇名 + 朝代·作者 + 箭标」，会把箭标顶出屏幕（实测溢出 7px）。 */
[data-skin="yuwen-songben"] .poem-toc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 30px;
  align-items: start;
}
@media (max-width: 900px) {
  [data-skin="yuwen-songben"] .poem-toc-grid { grid-template-columns: 1fr; }
}

/* ── ② 复习标签：篇名后的小签，标上次提交日期 ──
   分档：≤3 天刚背过（青绿） / 4~9 天（赭石） / ≥10 天该复习了（朱） */
[data-skin="yuwen-songben"] .poem-last-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
[data-skin="yuwen-songben"] .poem-last-date { letter-spacing: 0.02em; }
/* 距今天数：弱化一档 */
[data-skin="yuwen-songben"] .poem-last-ago { opacity: 0.72; }

[data-skin="yuwen-songben"] .poem-last-tag.is-fresh {
  color: #3E6B52;
  background: rgba(62, 107, 82, 0.10);
  border-color: rgba(62, 107, 82, 0.32);
}
[data-skin="yuwen-songben"] .poem-last-tag.is-mid {
  color: #8A6A22;
  background: rgba(138, 106, 34, 0.10);
  border-color: rgba(138, 106, 34, 0.32);
}
[data-skin="yuwen-songben"] .poem-last-tag.is-due {
  color: var(--sb-zhu);
  background: rgba(166, 58, 44, 0.10);
  border-color: rgba(166, 58, 44, 0.34);
}
/* 深色夜读：底色是深墨，三档整体提亮 */
[data-skin="yuwen-songben"][data-theme="dark"] .poem-last-tag.is-fresh {
  color: #86BF9C; background: rgba(134, 191, 156, 0.12); border-color: rgba(134, 191, 156, 0.32);
}
[data-skin="yuwen-songben"][data-theme="dark"] .poem-last-tag.is-mid {
  color: #D3B06A; background: rgba(211, 176, 106, 0.12); border-color: rgba(211, 176, 106, 0.32);
}
[data-skin="yuwen-songben"][data-theme="dark"] .poem-last-tag.is-due {
  color: var(--sb-zhu); background: rgba(212, 87, 74, 0.13); border-color: rgba(212, 87, 74, 0.34);
}

/* ── ③ 筛选栏三件套：紫粉下拉 → 宋本小签 ── */
[data-skin="yuwen-songben"] .sb-filter-bar { margin: 16px 0 4px; }

[data-skin="yuwen-songben"] .filter-label {
  font-family: var(--sb-serif);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--sb-ink-3);
  margin-bottom: 6px;
}

[data-skin="yuwen-songben"] .select-filter {
  font-family: var(--sb-serif);
  color: var(--sb-ink);
  background-color: var(--sb-fill);
  /* 箭头换成朱色（原全局样式是紫色 %237B55E0） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A63A2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-position: right 13px center;
  border: 1px solid var(--sb-rule-soft);
  border-radius: 0;
  padding: 9px 36px 9px 14px;
  letter-spacing: 0.08em;
  backdrop-filter: none;
}
[data-skin="yuwen-songben"] .select-filter:hover { border-color: var(--sb-zhu); }
[data-skin="yuwen-songben"] .select-filter:focus {
  border-color: var(--sb-zhu);
  box-shadow: none;
}

[data-skin="yuwen-songben"] .filter-reset {
  font-family: var(--sb-serif);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--sb-zhu);
  background: transparent;
  border: 1px dashed rgba(166, 58, 44, 0.45);
  border-radius: 0;
  padding: 6px 13px;
}
[data-skin="yuwen-songben"] .filter-reset:hover {
  background: rgba(166, 58, 44, 0.07);
  border-color: var(--sb-zhu);
}

/* ── 朝代·作者：紧跟诗题、与诗题同靠左（2026-09 调整） ──
   旧行序：诗题 ……(引导点撑开)…… 朝代·作者 [标签] →，右注被引导点推到行末；
   新行序（Poems.jsx）：诗题 朝代·作者 ……(引导点撑开)…… [标签] →。
   ≤560px 引导点收起（songben.css），改由右注自身 flex:1 撑开剩余空间，
   朝代·作者仍紧跟诗题，右侧组（标签+箭标）依旧贴行末。 */
[data-skin="yuwen-songben"] .poem-toc-row .poem-toc-meta { margin-left: 2px; }

@media (max-width: 560px) {
  /* 篇名不再抢宽度（songben.css 给了 flex:1 1 auto 会把作者推到右边），
     改回按内容收缩；右注接管 flex:1，文字左对齐 → 作者紧跟诗题 */
[data-skin="yuwen-songben"] .poem-toc-row .poem-toc-title { flex: 0 1 auto; }
  [data-skin="yuwen-songben"] .poem-toc-row .poem-toc-meta { flex: 1 1 auto; }
}

/* ── 窄屏：让位给篇名（引导点在 songben.css 里已收起） ── */
[data-skin="yuwen-songben"] @media (max-width: 420px) {
  [data-skin="yuwen-songben"] .poem-last-ago { display: none; }
  [data-skin="yuwen-songben"] .filter-label { letter-spacing: 0.2em; }
}
/* ============================================================
   古诗详情页 · 宋本诗叶（/yuwen/poems/:poemId）

   与语文首页 / 目录页同一套「宋本 · 一葉」语言：版框（外粗内细）/ 界行 /
   朱印 / 宽字距宋体。主题层（色板、纸底、顶栏、页脚）在 songben.css，
   本文件只补两件事：

     ① 诗叶版式  —— .sb-poem* 新类，本页专属
     ② 通用件换皮 —— 覆盖全站类（.card / .btn / .tag / .section-title /
        .anno-* / .placeholder / .audio-player），一律带
        [data-skin="yuwen-songben"] 前缀，只在挂了宋本主题的页面生效

   ⚠️ 旧类名（.poem-text / .poem-split / .anno-row / .card / .placeholder）
      被 scripts/verify-word-lookup.mjs 与 scripts/verify-poem-page.mjs 选中，
      JSX 里一律「新类名 + 旧类名」双写，只加不删。
   ============================================================ */
/* impeccable-disable design-system-radius, design-system-font-size */
/* ════════════════ ① 诗叶（版框） ════════════════ */
[data-skin="yuwen-songben"] .sb-poem {
  position: relative;
  margin-top: 30px;
  border: 2px solid var(--sb-ink);
  background: var(--sb-fill);
  box-shadow: 0 1px 0 var(--sb-lift) inset, var(--sb-shadow);
}
[data-skin="yuwen-songben"] .sb-poem-in {
  position: relative;
  border: 1px solid var(--sb-rule);
  margin: 5px;
  background: var(--sb-fill-2);
}
/* 版框下的第二道界线（与目录页页头同一手法） */
[data-skin="yuwen-songben"] .sb-poem::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -5px;
  height: 1px;
  background: var(--sb-hair);
}

/* ── 诗题区：类目小字 / 诗题 / 朝代·作者 ── */
[data-skin="yuwen-songben"] .sb-poem-head {
  position: relative;
  padding: 26px 30px 18px;
  text-align: center;
  border-bottom: 1px solid var(--sb-rule);
}
[data-skin="yuwen-songben"] .sb-poem-kind {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.46em;
  color: var(--sb-zhu);
  margin-bottom: 12px;
}
[data-skin="yuwen-songben"] .sb-poem-title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4.4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  /* 字距加宽后最后一个字右侧会多出一格，往左补回来才是真居中 */
  text-indent: 0.24em;
  line-height: 1.24;
  color: var(--sb-ink);
  text-shadow: 0 1px 0 var(--sb-lift);
}
[data-skin="yuwen-songben"] .sb-poem-meta {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  color: var(--sb-ink-3);
}
[data-skin="yuwen-songben"] .sb-poem-meta .tag { margin-left: 10px; }

/* 书耳：竖排小签标类目（窄屏在 songben.css 里已统一转横排） */
[data-skin="yuwen-songben"] .sb-poem .sb-ear { top: 14px; right: 14px; }

/* ── 分栏：左诗右注 ──
   .poem-split 的 grid 与 ≤640px 堆叠由 theme.css 负责，这里只换皮。
   原内联的 border-right / background 已移到本文件（内联会压住 CSS）。 */
[data-skin="yuwen-songben"] .poem-split-left {
  border-right: 1px solid var(--sb-rule-soft);
}
[data-skin="yuwen-songben"] .poem-split-right {
  background: var(--sb-fill);
}
@media (max-width: 640px) {
  /* theme.css 的 .poem-split-left 用 !important 写了 dashed 紫线，覆盖须同级 */
[data-skin="yuwen-songben"] .poem-split-left {
    border-right: none !important;
    border-bottom: 1px solid var(--sb-rule-soft) !important;
  }
}

/* ── 诗句：拼音小字在上，汉字宽字距在下，逐字对位 ──
   对位原理：.sb-poem-line 自己当网格，n 条固定轨道（1em 字宽 + 0.3em 字距）。
   汉字行占第 2 行横跨全部轨道，拼音格占第 1 行、各自在轨道里居中。
   轨道在行容器上定义 → em 按汉字字号解析，两行严格同宽同列。
   注意：网格必须定义在这里而不能定义在 0.68rem 的拼音行上——
   var() 里的 em 在使用处解析，会按拼音字号缩水。 */
[data-skin="yuwen-songben"] .sb-poem-body {
  padding: 26px 22px 22px;
  text-align: center;
  /* 竖列排布：诗叶比诗长时，让音频带沉到栏底，不留一块空白 */
  display: flex;
  flex-direction: column;
}
[data-skin="yuwen-songben"] .sb-poem-text {
  font-family: var(--sb-serif);
  color: var(--sb-ink);
  margin-bottom: 24px;
  /* 诗比栏短时与沉底的音频带平分剩余空白 → 诗身落在栏中央，不顶头 */
  margin-top: auto;
}
[data-skin="yuwen-songben"] .sb-poem-line { margin: 0; }
[data-skin="yuwen-songben"] .sb-poem-line + .sb-poem-line { margin-top: 12px; }
[data-skin="yuwen-songben"] .sb-poem-line {
  /* 每字步长 = 1em 字宽 + 字距。拼音拥挤的诗（--sb-py-maxpair 大）自动把字距
     撑宽给拼音腾地方——课本的排法；系数 0.18 ≈ 0.6(拼音倍数)×0.62(音节宽/字母)÷2。
     常规诗（maxpair ≤ 6）保持 0.3em 的宋本宽字距不变。 */
  --sb-hz-step: max(1.3em, calc(0.18 * var(--sb-py-maxpair, 8) * 1em));
  display: grid;
  grid-template-columns: repeat(var(--sb-py-cols, 7), var(--sb-hz-step));
  justify-content: center;
  font-size: clamp(1.16rem, 2.6vw, 1.42rem);
  line-height: 1.5;
  letter-spacing: calc(var(--sb-hz-step) - 1em);
  text-indent: 0;
}
/* 汉字行：盒宽钉死为「(n-1)×步长 + 1em」（= 轨道区 − 尾字距），禁止折行。
   居中后每个字形的中心与所在轨道的中心严格重合。
   （不能依赖内容自动撑宽——亚像素取整会让内容比轨道区宽出一丝就折行） */
[data-skin="yuwen-songben"] .sb-poem-hz {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: center;
  white-space: nowrap;
  width: calc((var(--sb-py-cols, 7) - 1) * var(--sb-hz-step) + 1em);
  margin-top: 2px;
  font-family: var(--sb-serif);
  font-weight: 600; /* 加粗一档：纸底细宋在屏上偏瘦，诗身要压得住版框 */
  color: var(--sb-ink);
}
/* 拼音行：只当分组容器（划词探针数它），盒子交给 display:contents，
   拼音格直接落进上面的轨道；字体属性照样沿元素树继承下来。
   不在这里定字号——em 要按汉字字号（行容器）解析，见 .sb-poem-pyc。 */
[data-skin="yuwen-songben"] .sb-poem-py {
  display: contents;
  font-family: var(--sb-sans);
  /* 必须显式继承汉字字号：theme.css 的 .poem-pinyin 基础皮给了个小的
     var(--fs-sm)，漏进来会把下面 .sb-poem-pyc 的 0.6em 整个缩小 */
  font-size: inherit;
  line-height: 1.4;
  letter-spacing: normal; /* 不吃行容器给的 0.3em 字距 */
  text-indent: 0;
  color: var(--sb-ink-4);
}
[data-skin="yuwen-songben"] .sb-poem-pyc {
  grid-row: 1;
  justify-self: center; /* 音节在自己轨道里居中 → 恰好压在下方汉字头顶 */
  white-space: nowrap;  /* 长音节溢出轨道时向两侧对称伸展，不串位 */
  font-size: 0.6em;     /* 汉字的 0.6 倍，课本注音的醒目字号 */
}

/* ── 注释栏 ── */
[data-skin="yuwen-songben"] .sb-poem-anno { padding: 26px 22px 22px; }
[data-skin="yuwen-songben"] .sb-poem-anno-cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sb-rule-soft);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--sb-ink);
}
[data-skin="yuwen-songben"] .sb-poem-anno-cap::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--sb-zhu);
  flex: 0 0 auto;
  align-self: center;
}

/* ── 诗叶底部的音频带（贴栏底：内容不足时 margin-top 自动撑开） ── */
[data-skin="yuwen-songben"] .sb-poem-audio {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--sb-hair);
}

/* ── 卷末藏印 ── */
[data-skin="yuwen-songben"] .sb-poem-seal {
  display: flex;
  justify-content: center;
  padding: 13px 0 17px;
  border-top: 1px solid var(--sb-hair);
  background: var(--sb-fill);
}

/* ════════════════ ② 通用件换皮（仅宋本页面） ════════════════ */
/* 卡片：玻璃圆角 → 纸面方框（题解 / 译文 / 动画 / 伴读 / 赏析 / 扩展阅读…） */
[data-skin="yuwen-songben"] .card {
  background: var(--sb-fill);
  border: 1px solid var(--sb-rule-soft);
  border-radius: 0;
  box-shadow: 0 1px 0 var(--sb-lift) inset, var(--sb-shadow);
  backdrop-filter: none;
  transition: none;
}
/* 取消全站的悬浮上浮 + 加阴影（纸面不动） */
[data-skin="yuwen-songben"] .card:hover {
  transform: none;
  box-shadow: 0 1px 0 var(--sb-lift) inset, var(--sb-shadow);
}
/* 猫耳：宋本纸面上不出现 */
[data-skin="yuwen-songben"] .card-cat::before,
[data-skin="yuwen-songben"] .card-cat::after { display: none; }

/* 区块标题：朱点 + 界行 */
[data-skin="yuwen-songben"] .section-title {
  gap: 11px;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--sb-ink);
  margin: 22px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sb-rule-soft);
}
[data-skin="yuwen-songben"] .section-title .title-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--sb-zhu);
}
[data-skin="yuwen-songben"] .section-title .title-icon svg { width: 17px; height: 17px; }

/* 小签（年级 / 古文小课堂的词性等） */
[data-skin="yuwen-songben"] .tag {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--sb-hair);
  color: var(--sb-ink-3);
  font-family: var(--sb-serif);
  font-weight: 400;
  letter-spacing: 0.12em;
  backdrop-filter: none;
}
/* 朱色变体（一词多义等强调签），JSX 里挂 .sb-tag-zhu */
[data-skin="yuwen-songben"] .tag.sb-tag-zhu {
  border-color: rgba(166, 58, 44, 0.42);
  color: var(--sb-zhu);
}
[data-skin="yuwen-songben"][data-theme="dark"] .tag.sb-tag-zhu {
  border-color: rgba(212, 87, 74, 0.45);
}

/* 按钮：胶囊 → 宋本方签 */
[data-skin="yuwen-songben"] .btn {
  border-radius: 0;
  font-family: var(--sb-serif);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  min-height: 42px;
  padding: 9px 20px;
  box-shadow: none;
  backdrop-filter: none;
}
[data-skin="yuwen-songben"] .btn:hover { transform: none; filter: none; }
[data-skin="yuwen-songben"] .btn-primary {
  background: var(--sb-zhu);
  color: #F6EEDE;
}
[data-skin="yuwen-songben"] .btn-primary:hover { background: #8E2F23; }
[data-skin="yuwen-songben"][data-theme="dark"] .btn-primary { color: #1B1714; }
[data-skin="yuwen-songben"] .btn-ghost {
  background: var(--sb-fill);
  border: 1px solid var(--sb-rule-soft);
  color: var(--sb-ink-2);
}
[data-skin="yuwen-songben"] .btn-ghost:hover {
  background: var(--sb-fill);
  border-color: var(--sb-zhu);
  color: var(--sb-zhu);
}

/* 词语注释行 */
[data-skin="yuwen-songben"] .anno-row { border-bottom: 1px solid var(--sb-hair); }
[data-skin="yuwen-songben"] .anno-word {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--sb-hair);
  color: var(--sb-ink-2);
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* 古文小课堂的词：转朱 */
[data-skin="yuwen-songben"] .anno-usage .anno-word {
  background: transparent;
  border-color: rgba(166, 58, 44, 0.42);
  color: var(--sb-zhu);
}
[data-skin="yuwen-songben"][data-theme="dark"] .anno-usage .anno-word {
  border-color: rgba(212, 87, 74, 0.45);
}

/* 通假字块：琥珀虚线框 → 纸面朱框 */
[data-skin="yuwen-songben"] .anno-tongjia {
  background: var(--sb-fill);
  border: 1px dashed rgba(166, 58, 44, 0.42);
  border-radius: 0;
  color: var(--sb-ink-2);
}
[data-skin="yuwen-songben"][data-theme="dark"] .anno-tongjia {
  border-color: rgba(212, 87, 74, 0.45);
}
[data-skin="yuwen-songben"] .anno-tongjia b,
[data-skin="yuwen-songben"] .anno-tongjia h3 { color: var(--sb-zhu); }

/* 古诗动画：视频框 */
[data-skin="yuwen-songben"] .sb-video-box {
  margin: 12px 0 0;
  background: #14110C;
  border: 1px solid var(--sb-rule-soft);
  overflow: hidden;
}
[data-skin="yuwen-songben"] .sb-video-box video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0A0906; }

/* 扩展阅读链接 */
[data-skin="yuwen-songben"] .sb-ref-list { list-style: none; margin: 0; padding: 0; }
[data-skin="yuwen-songben"] .sb-ref-item { border-bottom: 1px solid var(--sb-hair); }
[data-skin="yuwen-songben"] .sb-ref-item:last-child { border-bottom: none; }
[data-skin="yuwen-songben"] .sb-ref-link {
  color: var(--sb-zhu);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
[data-skin="yuwen-songben"] .sb-ref-link:hover { color: #8E2F23; }
[data-skin="yuwen-songben"][data-theme="dark"] .sb-ref-link:hover { color: #E4756A; }

/* 空态 / 整理中提示（保留旧 .placeholder 类名做双写） */
[data-skin="yuwen-songben"] .placeholder {
  color: var(--sb-ink-3);
  font-family: var(--sb-serif);
  letter-spacing: 0.08em;
}
[data-skin="yuwen-songben"] .placeholder h2 { color: var(--sb-ink); letter-spacing: 0.16em; }

/* 音频播放器：原生控件换不了皮，只把上下留白与暖色滤镜调一下 */
[data-skin="yuwen-songben"] .audio-player audio {
  width: 100%;
  height: 36px;
  filter: sepia(0.28) saturate(0.86) contrast(0.96);
}
[data-skin="yuwen-songben"][data-theme="dark"] .audio-player audio {
  filter: sepia(0.3) saturate(0.7) brightness(0.86);
}
/* 音频待上传的提示签（内联色已挪到 .tag 皮肤） */
[data-skin="yuwen-songben"] .audio-player .tag { margin: 0; }

/* ── 跟读录音（FollowUp 是共享组件，样式全内联 + 也用于阅读打卡页
      → 只加锚点类，宋本页面上用 !important 压，其它板块零影响） ── */
[data-skin="yuwen-songben"] .fu-rec {
  background: var(--sb-zhu) !important;
  color: #F6EEDE !important;
  border-radius: 0 !important;
  font-family: var(--sb-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  padding: 10px 24px !important;
  box-shadow: none !important;
}
[data-skin="yuwen-songben"] .fu-rec:disabled {
  background: var(--sb-ink-4) !important;
  color: #F3EBDC !important;
}
[data-skin="yuwen-songben"][data-theme="dark"] .fu-rec { color: #1B1714 !important; }
[data-skin="yuwen-songben"][data-theme="dark"] .fu-rec:disabled { color: #141110 !important; }

[data-skin="yuwen-songben"] .fu-stop {
  background: var(--sb-ink) !important;
  color: #F3EBDC !important;
  border-radius: 0 !important;
  font-family: var(--sb-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  padding: 10px 24px !important;
}
[data-skin="yuwen-songben"][data-theme="dark"] .fu-stop { color: #141110 !important; }

[data-skin="yuwen-songben"] .fu-rec-time {
  color: var(--sb-zhu) !important;
  font-family: var(--sb-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}
[data-skin="yuwen-songben"] .fu-err {
  color: var(--sb-zhu) !important;
  font-family: var(--sb-serif) !important;
}
[data-skin="yuwen-songben"] .fu-tag {
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--sb-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
}
[data-skin="yuwen-songben"] .fu-tag-bad {
  border-color: rgba(166, 58, 44, 0.42) !important;
  color: var(--sb-zhu) !important;
}
[data-skin="yuwen-songben"] .fu-tag-warn {
  border-color: var(--sb-hair) !important;
  color: var(--sb-ink-3) !important;
}

/* 「已审核」小签（全站类 .points-chip，无内联色 → 直接换皮） */
[data-skin="yuwen-songben"] .points-chip {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(166, 58, 44, 0.42);
  color: var(--sb-zhu);
  font-family: var(--sb-serif);
  font-weight: 400;
  letter-spacing: 0.12em;
  backdrop-filter: none;
}

/* ════════════════ ③ 响应式 ════════════════ */
[data-skin="yuwen-songben"] @media (max-width: 820px) {
  [data-skin="yuwen-songben"] .sb-poem { margin-top: 22px; }
  [data-skin="yuwen-songben"] .sb-poem-head { padding: 22px 20px 16px; }
  [data-skin="yuwen-songben"] .sb-poem-body,
  [data-skin="yuwen-songben"] .sb-poem-anno { padding: 20px 18px 18px; }
}

@media (max-width: 560px) {
  [data-skin="yuwen-songben"] .sb-poem-head { padding: 20px 16px 14px; }
  [data-skin="yuwen-songben"] .sb-poem-body,
  [data-skin="yuwen-songben"] .sb-poem-anno { padding: 18px 14px 16px; }
  [data-skin="yuwen-songben"] .sb-poem-kind { letter-spacing: 0.36em; margin-bottom: 9px; }
  [data-skin="yuwen-songben"] .sb-poem-meta { font-size: 0.94rem; }
  /* 诗题字距在窄屏收一档，免得「七步诗」这类三字题撑满一行 */
[data-skin="yuwen-songben"] .sb-poem-title { letter-spacing: 0.16em; text-indent: 0.16em; }
  /* 窄屏：拼音收到 0.5 倍、字距下限收一档，最宽的诗行也装得下 */
  [data-skin="yuwen-songben"] .sb-poem-line { --sb-hz-step: max(1.2em, calc(0.16 * var(--sb-py-maxpair, 8) * 1em)); }
  [data-skin="yuwen-songben"] .sb-poem-pyc { font-size: 0.55em; }
}
/* 🗺️ 地图通用样式：容器 + 矢量层 + 叠加层 + 缩放控件。
   具体地图自己的样式（标记、地名、信息卡等）各自另写。
   容器底色走 --mc-bg，调用方可以覆盖（历史地图用古纸色）。 */

.mc-canvas {
  position: relative;
  overflow: hidden;
  background: var(--mc-bg, #dbe7d2); /* 海/底色 */
  border-radius: 14px;
  border: 2px solid var(--mc-border, #efe6d2);
  touch-action: pan-y; /* 竖着滑=滚动页面，横着拖=平移地图 */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* 内阴影：让贴边被裁切的地名看起来是"画面边缘"，弱化突兀感 */
  box-shadow: inset 0 0 26px rgba(74, 59, 42, 0.12);
}
.mc-canvas.is-dragging { cursor: grabbing; }

.mc-vector-wrap,
.mc-overlay { position: absolute; inset: 0; }
.mc-vector-wrap { pointer-events: none; }
.mc-vector-wrap path { vector-effect: non-scaling-stroke; }
.mc-overlay { pointer-events: none; overflow: visible; }

/* 缩放/复位按钮 */
.mc-ctrl {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-ctrl button {
  width: 34px;
  height: 34px;
  border: 1.5px solid #d8cdb4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #6b5a3a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.mc-ctrl button:hover { background: #fff; }
/* 当前缩放倍数：给"缩放到底有没有生效"一个明确的反馈 */
.mc-zoomval {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: #6b5a3a;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #d8cdb4;
  border-radius: 8px;
  padding: 1px 6px;
  letter-spacing: 0.5px;
  user-select: none;
}

/* 右下角数据来源署名 */
.mc-attr {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 30;
  font-size: 11px;
  color: #6b6b5a;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 6px;
  padding: 1px 8px;
  pointer-events: none;
}
/* 🗺️ PoemRouteMap 诗词人生路线互动地图
   容器 / 矢量层 / 叠加层 / 缩放控件的样式都在通用文件里
   （src/common/map/map-canvas.css，.mc-* 前缀）。
   这里只写"这张地图特有"的部分：地名标注、点位标记、下方故事卡。 */

/* 人生路线虚线：缩放时线宽保持不变 */
.prmap-route { vector-effect: non-scaling-stroke; }

/* 地名标注（省名/海名/城市名，画在底图之上） */
.prmap-prov {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px;
  line-height: 1;
  color: #84795e;
  letter-spacing: 2px;
  text-shadow: 0 0 3px #f4efdf, 0 0 3px #f4efdf, 0 0 2px #f4efdf;
  pointer-events: none;
  white-space: nowrap;
}
.prmap-prov.prmap-sea {
  color: #6f8f96;
  letter-spacing: 3px;
  font-size: 11.5px;
}
.prmap-city {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 700;
  color: #5d4a2a;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px #fff;
  pointer-events: none;
  white-space: nowrap;
}
.prmap-city.gold { color: #a3650e; }

/* 数字圆点标记 */
.prmap-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: #e8843c;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.15s;
}
.prmap-mark.gold {
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-width: 3px;
  background: #d9901f;
}
.prmap-mark.is-active {
  box-shadow: 0 0 0 5px rgba(232, 132, 60, 0.45), 0 1px 5px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) scale(1.25);
}

/* 地图下方的点位故事卡 */
.prmap-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff9ec;
  border: 2px solid #f2d9a0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}
.prmap-info .no {
  flex: 0 0 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8843c;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.prmap-info .no.gold { background: #d9901f; }
.prmap-info .txt { flex: 1; min-width: 0; }
.prmap-info .txt b { color: #6b4f2a; font-size: 16px; }
.prmap-info .txt .year {
  color: #b0731c;
  font-size: 13.5px;
  margin-left: 8px;
}
.prmap-info .txt p {
  margin: 4px 0 0;
  color: #6b5a3a;
  line-height: 1.8;
  font-size: 14.5px;
}
.prmap-info-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a08d5f;
  font-size: 13px;
}
.prmap-info-nav button {
  width: 30px;
  height: 30px;
  border: 1.5px solid #ecd9ac;
  border-radius: 50%;
  background: #fffdf6;
  color: #b0731c;
  font-size: 14px;
  cursor: pointer;
}
.prmap-info-nav button:hover { background: #fdf3dc; }
/* 📜 PoemStory 图文详解页样式
   ────────────────────────────────────────────────────────────────
   改版说明（按 taste-skill 的「改版协议」走，2026-09-15）：
   · 模式 = redesign-preserve：不动信息架构、不动文案、不动锚点 id（#ch1 / #ch2），
     只做视觉现代化。品牌已确立的「暖纸 + 绿」继续沿用（skill 里"品牌色优先于通用建议"）。
   · 开工前先审计：正文 16.5px/行高1.85 偏挤、卡片 2px 描边偏重、封面画被 88% 白蒙住等于看不见、
     照片宽度在 860/640 之间跳、小档案标签云参差、"——"出现在封面副题这种设计位。
   · 三个旋钮（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY）取 5 / 4 / 3：
     编辑型长文，变化度中、动效求"流体 CSS"级、密度要透气。
   · 色彩锁定：全页只有一个强调色 = 品牌绿；琥珀色只用于「轶事 / 存疑 / 引文」这一种语义，
     别的区块不许借。这是本文件里唯一允许的第二色，规则写死在这里。
   · 形状锁定：卡片 20px、内嵌块 14px、小件 10px；胶囊只给导航和结论按钮。
   · 动效只做两件有理由的事：滚到可见时介质（画/地图）轻微落定（叙事）、导航条显示阅读进度（反馈）。
     全部只在 `prefers-reduced-motion: no-preference` 下生效，且用 CSS 滚动驱动动画实现，
     不挂 window scroll 监听。 */

.pstory {
  /* ── 本页设计令牌（局部作用域，不动 theme.css） ── */
  --ps-ink: #3f3226;          /* 正文墨色（不用纯黑） */
  --ps-ink-2: #6b5a45;        /* 次级文字 */
  --ps-ink-3: #7d6c55;        /* 图注 / 微信息（对纸白 5.1:1，过 AA） */
  --ps-card: #fffefb;         /* 卡片纸白（不用纯白） */
  --ps-tint: #f4f8f0;         /* 淡绿底 */
  --ps-line: #ebe2cf;         /* 发丝线 */
  --ps-line-2: #d9e6cd;       /* 淡绿描边 */
  --ps-green: #3e8e5a;        /* 主色：品牌绿 */
  --ps-green-dp: #2d6a45;     /* 深绿（标题 / 导航） */
  --ps-green-lt: #eef6e8;     /* 淡绿面 */
  --ps-green-br: #bcd9ac;     /* 淡绿线 */
  --ps-amber: #8a5d10;        /* 次色：仅「轶事 / 存疑 / 引文」语义（对暖底 5.3:1） */
  --ps-amber-lt: #fdf7e9;
  --ps-amber-br: #efdcb1;
  --ps-r-lg: 20px;
  --ps-r-md: 14px;
  --ps-r-sm: 10px;
  --ps-shadow: 0 12px 32px rgba(96, 74, 44, 0.07);
  --ps-shadow-img: 0 12px 28px rgba(96, 74, 44, 0.11);
  /* 引文用楷体：中文没有真正的斜体，系统 KaiTi / Kaiti SC 是书刊引文的正确做法
     （且是系统字体，不像 QTxiaotu 那样缺字） */
  --ps-kai: "Kaiti SC", "KaiTi", "STKaiti", "Kaiti TC", "DFKai-SB", var(--font);

  max-width: 980px;
  margin: 0 auto;
  color: var(--ps-ink);
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: 0.01em;
}
.pstory * { box-sizing: border-box; }

/* ═══════════ 封面 ═══════════
   原来的做法：整幅画当背景 + 88% 白蒙层 + 标题居中浮在上面 → 画看不见，标题也没落点。
   改成「绢本画带 + 纸面标题锁」：画按原色铺一条带子，标题落在纸面上，左右分栏不对称。 */
.pstory-hero {
  position: relative;
  margin-top: 4px;
  background: var(--ps-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r-lg);
  box-shadow: var(--ps-shadow);
  overflow: hidden;
}
.pstory-hero-band { position: relative; line-height: 0; }
.pstory-hero-band img {
  display: block;
  width: 100%;
  height: 208px;
  object-fit: cover;
  object-position: center 36%;
}
/* 画带下沿淡淡融进纸面，避免硬切一刀 */
.pstory-hero-band::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 44px;
  background: linear-gradient(rgba(255, 254, 251, 0), rgba(255, 254, 251, 0.92));
  pointer-events: none;
}

/* 没配到合适的画时（配图宁缺毋滥）就不出画带，纸面顶部多留一点白，标题别贴边 */
.pstory-hero.is-noimg .pstory-hero-body { padding-top: 30px; }

.pstory-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 30px;
  padding: 22px 34px 15px;
}
.pstory-hero h1 {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  color: var(--ps-green-dp);
  letter-spacing: 3px;
  text-wrap: balance;
}
.pstory-hero .sub {
  margin: 9px 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ps-ink-2);
}
.pstory-hero .sub b { color: var(--ps-green); font-weight: 700; }

/* 元信息 = 定义列表（标签 / 值），不再是三颗胶囊 */
.pstory-hero-meta {
  display: grid;
  gap: 7px;
  padding-bottom: 2px;
}
.pstory-hero-meta div {
  display: grid;
  grid-template-columns: 3.6em minmax(0, 1fr);
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.pstory-hero-meta dt { color: var(--ps-ink-3); letter-spacing: 0.06em; }
.pstory-hero-meta dd { margin: 0; color: var(--ps-ink-2); }

.pstory-hero-credit {
  display: block;
  margin: 0 34px;
  padding: 9px 0 14px;
  border-top: 1px solid var(--ps-line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ps-ink-3);
}

/* ═══════════ 吸顶快速导航 ═══════════
   结构：标签 + 章节按钮（带当前章节高亮）+ 右侧回诗文页 + 底部阅读进度线。
   进度线用 CSS 滚动驱动动画（animation-timeline: scroll），不挂 scroll 监听。 */
.pstory-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: 16px;
  /* 比原来的 #3e8e5a 压深一档：浅绿底上的白字只有 4.15:1，不达 AA */
  background: linear-gradient(#357a4c, #2b6440);
  border-radius: var(--ps-r-md);
  box-shadow: 0 8px 22px rgba(58, 74, 52, 0.18);
  overflow: hidden;
}
.pstory-nav .in {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
}
.pstory-nav-label {
  color: #eaf7ea;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-right: 6px;
  flex: 0 0 auto;
}
.pstory-nav a,
.pstory-nav button {
  color: #eaf7ea;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* 悬停是"压深"不是"提亮"：提亮会把底色调浅，白字对比度反而掉到 4.4 以下 */
.pstory-nav a:hover,
.pstory-nav button:hover { background: rgba(0, 0, 0, 0.14); color: #fff; }
.pstory-nav button:active { transform: translateY(1px); }
/* 当前章节：浅底深字（6.2:1），比"半透明白底 + 白字"更清楚也更稳 */
.pstory-nav button.is-active {
  background: #eaf7ea;
  border-color: #eaf7ea;
  color: #235235;
  font-weight: 700;
}
.pstory-nav button.is-active:hover { background: #fff; color: #235235; }
.pstory-nav .home {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border-color: rgba(255, 255, 255, 0.42);
  color: #eaf7ea;
  font-size: 13.5px;
}
.pstory-nav .home:hover { background: rgba(0, 0, 0, 0.14); border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.pstory-nav-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #eaf7ea);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pstory-nav-progress {
      animation: ps-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes ps-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ═══════════ 章节卡 ═══════════ */
.pstory-chapter {
  background: var(--ps-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r-lg);
  box-shadow: var(--ps-shadow);
  padding: 32px 38px 30px;
  margin: 30px 0 0;
  scroll-margin-top: 76px;
}
.pstory-chapter h2 {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  font-size: 26px;
  color: var(--ps-green-dp);
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ps-line);
  /* 标题一律用全站正文字体：QTxiaotu 是人工子集，"认识诗人""白居易"等字缺失，
     缺哪个字哪个字就回落系统字体，一个标题里会冒出两种字形。 */
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pstory-chnum {
  background: var(--ps-green-dp);
  color: #fff;
  border-radius: var(--ps-r-sm);
  padding: 2px 13px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.pstory-chapter h3 {
  position: relative;
  color: #5a4227;
  font-size: 19.5px;
  line-height: 1.6;
  margin: 34px 0 10px;
  padding-left: 15px;
  letter-spacing: 0.01em;
}
.pstory-chapter h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.26em;
  bottom: 0.26em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--ps-green-br), var(--ps-green));
}
/* 正文行宽收到 42 字左右：原来一行能排 55+ 个汉字，读起来费眼。
   图片和地图仍然是整栏宽度，于是形成"图文两档宽度"的编辑版式节奏。 */
.pstory-chapter p { margin: 13px 0; max-width: 42em; }
.pstory-chapter p:first-child { margin-top: 0; }
/* 小号灰字：代表作下面那类补充说明 */
.pstory-chapter p.pstory-small { color: #8a7a5a; font-size: 14.5px; }

.pstory-lead {
  position: relative;
  font-size: 17px;
  line-height: 1.9;
  color: #5c4a2f;
  background: var(--ps-green-lt);
  border: 0;
  border-radius: var(--ps-r-md);
  padding: 14px 20px 14px 22px;
  margin: 18px 0 4px;
  max-width: 42em;
}
.pstory-lead::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ps-green);
}

/* ═══════════ 人物小档案 ═══════════ */
.pstory-profile {
  display: grid;
  grid-template-columns: minmax(190px, 244px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin: 20px 0 4px;
}
.pstory-profile .info { min-width: 0; }
/* 肖像在图与文同排时不要外间距，交给网格 gap 控节奏 */
.pstory-profile .pstory-fig { margin: 0; }
/* 大标题下第一块内容不再重复加顶部间距 */
.pstory-profile .info h3 { margin-top: 0; }
/* 没有存世画像的诗人（如曾几）：小档案整栏排，不留一个空栏 */
.pstory-profile.is-solo { grid-template-columns: minmax(0, 1fr); }

/* 标签 / 值网格：原来是参差不齐的标签云，现在每格等宽 */
.pstory-fact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
}
.pstory-fact > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: var(--ps-tint);
  border: 1px solid var(--ps-line-2);
  border-radius: var(--ps-r-sm);
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #3c6a2c;
}
.pstory-fact > span em {
  font-style: normal;
  flex: 0 0 auto;
  font-size: 12.5px;
  color: #5f7350;
  letter-spacing: 0.04em;
}
/* 代表作那组没有标签：改回紧凑胶囊（按网格拉伸会把短书名拉成一条空条） */
.pstory-fact.is-titles { display: flex; flex-wrap: wrap; }
.pstory-fact.is-titles > span { flex: 0 0 auto; justify-content: center; padding: 6px 18px; font-size: 14.5px; }

/* ═══════════ 轶事 / 引文 / 小贴士（琥珀色语义区） ═══════════ */
.pstory-story {
  background: var(--ps-amber-lt);
  border: 1px solid var(--ps-amber-br);
  border-radius: var(--ps-r-md);
  padding: 16px 20px 14px;
  margin: 18px 0;
}
.pstory-story b.t {
  display: block;
  margin-bottom: 6px;
  color: var(--ps-amber);
  font-size: 16.5px;
}
.pstory-story p { margin: 9px 0; max-width: 42em; }
.pstory-story p:last-child { margin-bottom: 0; }
/* 课本小贴士：同一形状、不同语义色（绿） */
.pstory-story.is-tip {
  background: var(--ps-green-lt);
  border-color: var(--ps-line-2);
}
.pstory-story.is-tip b.t { color: var(--ps-green-dp); }

/* 引文：中文没有真斜体，用楷体 + 左侧细线，比 faux italic 正 */
.pstory-quote {
  font-family: var(--ps-kai);
  font-style: normal;
  font-size: 17.5px;
  line-height: 1.9;
  color: #7a4f18;
  padding-left: 14px;
  border-left: 2px solid var(--ps-amber-br);
  margin: 12px 0;
  max-width: 42em;
}

/* ═══════════ 生平四阶段 ═══════════ */
.pstory-life { display: grid; gap: 13px; margin: 16px 0 4px; }
.pstory-life .life-item {
  position: relative;
  background: linear-gradient(180deg, #fcfdfa, var(--ps-card));
  border: 1px solid #e7efe0;
  border-radius: var(--ps-r-md);
  padding: 15px 20px 13px 22px;
}
.pstory-life .life-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ps-green-br);
}
.pstory-life .life-item > b {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  color: var(--ps-green-dp);
  font-size: 16.5px;
  line-height: 1.6;
  margin-bottom: 7px;
}
.life-no {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ps-green-dp);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.life-year {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ps-ink-3);
  letter-spacing: 0.04em;
  background: #f7f4ec;
  border-radius: var(--ps-r-sm);
  padding: 1px 9px;
}
.pstory-life .life-item p { margin: 7px 0; max-width: 42em; }
.pstory-life .life-item p:last-child { margin-bottom: 0; }

/* ═══════════ 人生路线时间轴 ═══════════ */
.pstory-timeline {
  border-left: 2px solid var(--ps-green-br);
  margin: 16px 0 8px 9px;
  padding-left: 22px;
}
.pstory-tl-item { position: relative; margin-bottom: 14px; max-width: 42em; }
.pstory-tl-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ps-green);
  box-shadow: 0 0 0 3px var(--ps-card), 0 0 0 4px var(--ps-green-br);
}
.pstory-tl-item b { color: var(--ps-green-dp); }

/* ═══════════ 插图与图注 ═══════════
   原来同一页里图片宽度在 860 / 640 之间跳，节奏是乱的；现在统一整栏，
   图注也从"米色盒子"改成"一条发丝线 + 小字"，重量降下来，画更突出。 */
.pstory-fig { margin: 26px 0; max-width: none; }
.pstory-fig.wide { max-width: none; }
.pstory-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ps-r-md);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-img);
  background: var(--ps-card);
}
.pstory-fig figcaption {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ps-ink-3);
  background: none;
  border-top: 1px solid var(--ps-line);
  border-radius: 0;
  padding: 10px 2px 0;
  margin-top: 12px;
  text-align: left;
  max-width: 46em;
}
.pstory-captag {
  display: inline-block;
  background: none;
  color: var(--ps-green-dp);
  border: 1px solid var(--ps-green-br);
  border-radius: 6px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 8px;
}

/* ═══════════ 存疑标记 ═══════════ */
.pstory-doubt {
  display: inline-block;
  background: var(--ps-amber-lt);
  color: var(--ps-amber);
  border: 1px solid var(--ps-amber-br);
  border-radius: 6px;
  padding: 0 7px;
  font-size: 12.5px;
  line-height: 1.7;
  transform: scale(0.96);
  transform-origin: left center;
}

/* ═══════════ 底部返回 ═══════════ */
.pstory-backrow { text-align: center; margin: 32px 0 12px; }
.pstory-backrow a {
  display: inline-block;
  color: var(--ps-green-dp);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  background: var(--ps-green-lt);
  border: 1px solid var(--ps-green-br);
  border-radius: 999px;
  padding: 9px 24px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.pstory-backrow a:hover { background: #e3f0d8; }
.pstory-backrow a:active { transform: translateY(1px); }

/* ═══════════ 滚动显现（介质与阶段卡） ═══════════
   有理由的动效：长文里让画 / 地图 / 阶段卡随滚动轻微落定，讲的是"内容按顺序展开"。
   用 animation-timeline: view() 实现：零 JS、不挂 scroll 监听、不改变布局高度
   （只动 transform / opacity，所以不会影响 ScrollRestoration 的滚动位置记忆）。
   不支持的浏览器（@supports 之外）直接静态呈现，不半吊子。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ps-reveal {
      animation: ps-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
  }
}
@keyframes ps-reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* 打印、整页截图这类"一次性渲染整页"的场景，动画进度取不到，下方内容会全是空白。
   给 <html> 加上 .ps-no-reveal 就关掉显现动画（截图脚本用这个钩子）。 */
.ps-no-reveal .ps-reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media print {
  .ps-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ═══════════ 窄屏 ═══════════ */
@media (max-width: 860px) {
  .pstory-hero-body { padding: 18px 20px 12px; }
  .pstory-hero h1 { font-size: 32px; letter-spacing: 2px; }
  .pstory-hero-credit { margin: 0 20px; }
  .pstory-chapter { padding: 24px 20px 22px; }
}

@media (max-width: 640px) {
  .pstory { font-size: 16.5px; line-height: 1.9; }
  .pstory-hero-band img { height: 132px; }
  .pstory-hero-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 16px 10px;
  }
  .pstory-hero h1 { font-size: 27px; letter-spacing: 1.5px; }
  .pstory-hero .sub { font-size: 15.5px; }
  /* 元信息在手机上横排一行，标签藏在视觉里（值本身已经说清楚了） */
  .pstory-hero-meta { grid-auto-flow: column; gap: 14px; }
  .pstory-hero-meta div { grid-template-columns: auto; gap: 2px; }
  .pstory-hero-meta dt { font-size: 11px; }
  .pstory-hero-meta dd { font-size: 12.5px; }
  .pstory-hero-credit { margin: 0 16px; padding-bottom: 12px; }

  /* 导航挤成一行：去掉"快速导航"标签，按钮文字压缩 */
  .pstory-nav { margin-top: 12px; border-radius: var(--ps-r-sm); }
  .pstory-nav .in { padding: 8px 10px; gap: 2px; }
  .pstory-nav-label { display: none; }
  .pstory-nav a,
  .pstory-nav button { font-size: 13px; padding: 5px 10px; }
  .pstory-nav .home { font-size: 12.5px; padding: 5px 10px; }

  .pstory-chapter { padding: 20px 16px 18px; margin-top: 22px; }
  .pstory-chapter h2 { font-size: 20px; gap: 10px; padding-bottom: 12px; }
  .pstory-chnum { font-size: 13px; padding: 1px 10px; }
  .pstory-chapter h3 { font-size: 17.5px; margin-top: 26px; }
  .pstory-chapter p,
  .pstory-lead,
  .pstory-quote,
  .pstory-fig figcaption,
  .pstory-life .life-item p,
  .pstory-tl-item { max-width: none; }
  .pstory-profile { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pstory-profile figure { max-width: 236px !important; }
  .pstory-fact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pstory-fact > span { font-size: 13.5px; padding: 5px 10px; }
  .life-year { margin-left: 0; }
  .pstory-fig { margin: 20px 0; }
}
/* 地理首页 — 看地图 · 青绿地图风 */

.dl-page { max-width: 1080px; }

/* ── Hero：问候 + 大标题 + 地球仪 ── */
.dl-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  margin: 6px 0 22px;
  background: #f2f6f1;
  border: 2px solid #d8e4d6;
  border-radius: 18px;
}
.dl-hello {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #6f8a78;
}
.dl-hello-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5c9a78;
}
.dl-title {
  margin: 8px 0 6px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #2f4a3c;
}
.dl-title-cn {
  margin-left: 8px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #7d9a88;
}
.dl-title-dot { margin: 0 4px; color: #b9cdbe; }
.dl-sub { margin: 0; font-size: 14.5px; color: #6f8a78; }
.dl-mascot-wrap { flex-shrink: 0; }
.dl-globe {
  display: block;
  font-size: 74px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(63, 107, 90, 0.22));
}

/* ── 入口卡片 ── */
.dl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.dl-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 2px solid #e2e8df;
  border-radius: 16px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
a.dl-card:hover {
  transform: translateY(-2px);
  border-color: #a8c4b0;
  box-shadow: 0 6px 18px rgba(63, 107, 90, 0.12);
}
.dl-card.is-soon { opacity: 0.72; cursor: default; }
.dl-card-art {
  flex: 0 0 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  border-radius: 14px;
}
.dl-card--history .dl-card-art { background: #e6efe6; }
.dl-card--world .dl-card-art { background: #e6eef4; }
.dl-card--terrain .dl-card-art { background: #f0e8dc; }
.dl-card-body { flex: 1; min-width: 0; }
.dl-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #2f4a3c;
}
.dl-card-en {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #9db0a4;
}
.dl-card-desc {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #71837a;
}
.dl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.dl-tag {
  padding: 2px 9px;
  font-size: 11.5px;
  color: #5f8570;
  background: #f0f5f0;
  border: 1px solid #dce8de;
  border-radius: 999px;
}
.dl-card-arrow {
  flex-shrink: 0;
  align-self: center;
  color: #a8c4b0;
}
.dl-card-arrow svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
  .dl-hero { padding: 18px 20px; }
  .dl-title { font-size: 26px; }
  .dl-globe { font-size: 54px; }
}
/* 🗺️ 历史地图页（地理板块）
   古地图配色：宣纸米黄 + 青绿标题 + 赭石强调。
   容器/控件的通用样式在 src/common/map/map-canvas.css。 */

.hmap-page { max-width: 1180px; }

/* ── 页头 ── */
/* 上方三块（页头/朝代轴/工具条）都在抢地图的高度，间距一律压紧 */
.hmap-head { margin: 2px 0 10px; }
.hmap-h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #35463c;
}
.hmap-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #6f7a70;
}

/* ── 朝代轴 ── */
/* 22 个朝代必须一眼全看到 —— 所以换行，不做横向滚动
   （横向滚动会把明清民国现代藏到屏幕外，等于没"体现各个朝代"） */
.hmap-axis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid #e2d9be;
}
.hmap-dyn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 54px;
  padding: 5px 9px 6px;
  font-family: inherit;
  color: #6b5a3a;
  background: #fffdf6;
  border: 1.5px solid #ded4b8;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.13s;
}
.hmap-dyn b { font-size: 15px; line-height: 1.2; font-weight: 700; }
.hmap-dyn span { font-size: 10.5px; letter-spacing: 0.2px; color: #a2937a; }
.hmap-dyn:hover { border-color: #9fb097; transform: translateY(-1px); }
.hmap-dyn.is-on {
  color: #fff;
  background: #3f6b5a;
  border-color: #35594b;
  box-shadow: 0 2px 8px rgba(63, 107, 90, 0.28);
}
.hmap-dyn.is-on span { color: rgba(255, 255, 255, 0.82); }

/* ── 工具条（民国时间片 / 叠加开关） ── */
.hmap-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 34px;
  margin: 8px 0 8px;
}
.hmap-tools-fill { flex: 1; }
.hmap-tools-hint {
  margin-left: auto;
  font-size: 12.5px;
  color: #9a8a68;
}
.hmap-sheets { display: flex; gap: 6px; flex-wrap: wrap; }
.hmap-sheet {
  padding: 5px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #6b5a3a;
  background: #fffdf6;
  border: 1.5px solid #ded4b8;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.hmap-sheet:hover { border-color: #9fb097; }
.hmap-sheet.is-on {
  color: #fff;
  background: #8a6a3c;
  border-color: #7a5d34;
}

.hmap-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  background: #fffdf6;
  border: 1.5px solid #ded4b8;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
}
.hmap-switch input { accent-color: #3f6b5a; cursor: pointer; }
.hmap-switch span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.25;
  color: #6b5a3a;
}
.hmap-switch em {
  font-style: normal;
  font-size: 10.5px;
  color: #a2937a;
}

/* ── 主体：地图在上、朝代介绍在下 ──
   原来是 `1fr 268px` 两栏，右侧那 268px 全被信息卡吃掉。
   改成单列后地图吃满整个内容宽度（1100px 里从 818 → 1100，约 +34% 宽）。 */
.hmap-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* ── 画布 ── */
.hmap-stage { min-width: 0; }
.hmap-canvas {
  --mc-bg: #f3ecd9;      /* 宣纸色：栅格图透明处露出来的底 */
  --mc-border: #cfc5a8;
  /* 地图尽量大：跟着视口高度走（上方页头 + 朝代轴 + 工具条约 290px），
     再扣 30px 让下面的朝代介绍露一点头（否则整屏被地图占满，
     会以为"介绍卡没了"）。卡在 460~820px：矮屏不至于滚半天，大屏也不会空成一片。 */
  height: clamp(460px, calc(100vh - 320px), 820px);
}

/* 栅格瓦片：平滑缩放，别出现像素边 */
.hmap-tiles image { image-rendering: auto; }

/* 矢量面（民国 / 现代 / CHGIS 叠加） */
.hmap-shape {
  fill: #f7f2e2;
  stroke: #b9a878;
  stroke-width: 0.8;
  pointer-events: auto;
  transition: fill 0.12s;
}
.hmap-shape:hover { fill: #ecdfb8; }
/* 叠在栅格图上时改成半透明描边，不遮挡底图 */
.hmap-shape.is-overlay {
  fill: rgba(192, 101, 58, 0.13);
  stroke: rgba(176, 82, 44, 0.75);
  stroke-width: 0.7;
}
.hmap-shape.is-overlay:hover { fill: rgba(192, 101, 58, 0.28); }

/* 地名标注 */
.hmap-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0 2px;
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: 0.5px;
  color: #6b5a34;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(255, 253, 246, 0.62);
  border-radius: 3px;
}

/* ── 朝代介绍（地图下方，横向两栏：左＝档案，右＝正文） ── */
.hmap-side {
  display: grid;
  grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
  gap: 4px 34px;
  padding: 15px 18px 17px;
  background: #fffdf6;
  border: 1px solid #e2d9be;
  border-radius: 14px;
}
.hmap-side-facts,
.hmap-side-read { min-width: 0; }
.hmap-side-head { margin-bottom: 10px; }
.hmap-side-head h2 {
  margin: 0 0 3px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #35594b;
}
.hmap-side-span { font-size: 12.5px; color: #9a8a68; }

.hmap-facts { margin: 0 0 12px; }
.hmap-facts > div {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px dashed #ece3c9;
}
.hmap-facts > div:first-child { border-top: 0; }
.hmap-facts dt {
  flex: 0 0 62px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #a2937a;
}
.hmap-facts dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #4a4433;
}

.hmap-note-txt {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5c5545;
}
.hmap-fact {
  margin: 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #6b5a34;
  background: #f6efdb;
  border-left: 3px solid #c9a961;
  border-radius: 0 8px 8px 0;
}
.hmap-fact b {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  letter-spacing: 1px;
  color: #a8843a;
}

/* ── 遮罩 / 提示 ── */
.hmap-mask {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-size: 15px;
  color: #6b6349;
  background: rgba(247, 244, 235, 0.9);
  border-radius: 12px;
}
.hmap-mask--err {
  flex-direction: column;
  gap: 8px;
  text-align: center;
  color: #8a5a34;
}
.hmap-mask--err b { font-size: 16px; }
.hmap-mask--err span {
  max-width: 400px;
  font-size: 13.5px;
  line-height: 1.8;
}

.hmap-toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 30;
  transform: translateX(-50%);
  max-width: 82%;
  padding: 7px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: #6b5a34;
  background: rgba(255, 253, 246, 0.94);
  border: 1px solid #e2d9be;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(120, 100, 60, 0.13);
  pointer-events: none;
}

/* ── 页脚说明 ── */
.hmap-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: #9a9484;
}

@media (max-width: 900px) {
  .hmap-canvas { height: clamp(380px, calc(100vh - 300px), 580px); }
  /* 介绍一律落在地图下方（原来手机上用 order:-1 提到地图上面，现在统一放下） */
  .hmap-side { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hmap-h1 { font-size: 22px; }
  .hmap-tools-hint { margin-left: 0; }
}
/* 🌏 三维地球外壳页（地理板块）
   地球本体是 public/dili-world/index.html，这里只是给它一个干净的容器。
   iframe 高度吃掉页头和站点头之后剩余的全部视口 —— 地球页内部是
   100vh 的全屏布局，容器越矮它的左侧控制台越挤。 */

.wg-page { max-width: 1420px; }

.wg-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 2px 0 10px;
}

.wg-h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #35463c;
}

.wg-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #6f7a70;
}

.wg-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 210px);
  min-height: 600px;
  border: 1px solid rgba(53, 70, 60, 0.14);
  border-radius: 16px;
  background: #06101f;   /* 加载未完成时地球页自己的深色底透出来，不闪白 */
  overflow: hidden;
}
/* ============================================================
   英语角 · YingyuHome 专属样式（粉调绘本风）
   register=product · palette=blush-pink+cream+plum
   type=QTxiaotu 展示体 + 系统正文 · layout=hero + 横卡
   engine=CSS-only（吉祥物漂浮 / 单词入场）· 明亮 · 轻盈

   本文件是页面级独立设计系统：--yh-* token 即其完整词汇表，
   圆角与字号为该词汇表的一部分，故豁免全局 DESIGN.md 的
   radius / font-size 比对（值都集中在下方色板块声明）。
   ============================================================ */
/* impeccable-disable design-system-radius, design-system-font-size */

.yh-page {
  /* ── 页面专属色板（英语=粉，暖白打底） ── */
  --yh-ink: #33235B;
  --yh-text: #584478;
  --yh-sub: #7C689C;
  --yh-faint: #A99BC4;
  --yh-pink: #F05A9C;
  --yh-pink-soft: #FB9BC4;
  --yh-berry: #E23D86;
  --yh-blush: #FDE7F1;
  --yh-blush-deep: #F5C4DB;
  --yh-cream: #FFF7FB;
  --yh-card: #FFFFFF;
  --yh-mint: #DFF2E6;
  --yh-mint-ink: #3E8E67;
  --yh-lilac: #EAE2F8;
  --yh-lilac-ink: #7C5BC4;
  --yh-butter: #FDF1DC;
  --yh-amber-ink: #A06A08;
  --yh-amber-deep: #C08A1E;
  --yh-gold: #F5B84B;
  --yh-font: 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --yh-hero-a: #FFF4FA;
  --yh-hero-b: #FFE9F3;
  --yh-blush-soft: #FFF0F7;
  --yh-art-warm: #FFF3E0;

  position: relative;
  padding-bottom: 8px;
  /* 装饰层最多探到内边距，绝不撑出横向滚动 */
  overflow-x: clip;
}

/* ════════════════ Hero：问候 + 标题 + 吉祥物 ════════════════ */

.yh-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 18px 20px 22px;
  border-radius: 30px 18px 30px 20px / 26px 30px 24px 32px;
  background: linear-gradient(150deg, var(--yh-hero-a) 0%, var(--yh-hero-b) 60%, var(--yh-blush) 100%);
  box-shadow: 0 1px 2px rgba(226, 61, 134, 0.05), 0 12px 32px rgba(226, 61, 134, 0.10);
}

.yh-hero-text {
  flex: 1;
  min-width: 0;
}

/* 问候泡泡：Hello, 小狗！ */
.yh-hello {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--yh-card);
  border: 1.5px solid var(--yh-blush-deep);
  color: var(--yh-berry);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  padding: 9px 13px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(226, 61, 134, 0.09);
  position: relative;
}
.yh-hello-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yh-pink);
  flex-shrink: 0;
}
/* 泡泡小尾巴 */
.yh-hello::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--yh-card);
  border-right: 1.5px solid var(--yh-blush-deep);
  border-bottom: 1.5px solid var(--yh-blush-deep);
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

/* 大标题：English 英语角 */
.yh-title {
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: clamp(2.35rem, 9vw, 3.1rem);
  line-height: 1.04;
  color: var(--yh-ink);
  margin: 12px 0 6px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.yh-title-cn {
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 0.62em;
  color: var(--yh-pink);
  margin-left: 8px;
  white-space: nowrap;
}
/* 换行后分隔点不再需要（窄屏两行堆叠时隐藏） */
.yh-title-dot {
  white-space: pre;
}

.yh-sub {
  color: var(--yh-sub);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* 吉祥物：圆形头像 + Hi! 泡泡 */
.yh-mascot-wrap {
  position: relative;
  flex-shrink: 0;
  margin-right: 6px;
}
.yh-mascot {
  width: clamp(104px, 29vw, 150px);
  height: clamp(104px, 29vw, 150px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(226, 61, 134, 0.20);
  animation: yh-float 3.6s ease-in-out infinite;
}
.yh-bubble {
  position: absolute;
  top: -8px;
  right: -12px;
  z-index: 2;
  background: var(--yh-card);
  border: 2px solid var(--yh-blush-deep);
  color: var(--yh-berry);
  font-family: var(--yh-font);
  font-size: 1.05rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 4px 12px rgba(226, 61, 134, 0.15);
  /* impeccable-disable-next-line bounce-easing: 泡泡的轻盈摇摆，绘本动画的拟人感 */
  animation: yh-wobble 2.8s ease-in-out infinite;
}

@keyframes yh-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes yh-wobble {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}

/* ════════════════ 区块标题 ════════════════ */

.yh-block {
  margin-top: 26px;
}
.yh-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.yh-block-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px 28px 14px 24px / 12px 20px 14px 18px;
  background: linear-gradient(140deg, var(--yh-blush-soft), var(--yh-blush));
  color: var(--yh-berry);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.yh-block-icon svg {
  width: 18px;
  height: 18px;
}
.yh-block-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--yh-ink);
  margin: 0;
}
.yh-block-line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--yh-blush-deep), transparent);
  margin-left: 4px;
}

/* ════════════════ 今日单词 ════════════════ */

.yh-daily-card {
  background: var(--yh-card);
  border-radius: 26px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(124, 104, 156, 0.05), 0 10px 26px rgba(124, 104, 156, 0.10);
  border: 1.5px solid rgba(240, 90, 156, 0.10);
}

.yh-daily-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yh-blush);
  color: var(--yh-berry);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.yh-daily-tag em {
  font-style: normal;
  color: var(--yh-sub);
  font-weight: 600;
}

.yh-daily-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

/* 首字母大牌：粉色渐变方块 */
.yh-daily-letter {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--yh-pink-soft), var(--yh-berry));
  color: #fff;
  font-family: var(--yh-font);
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(226, 61, 134, 0.25);
}

.yh-daily-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.yh-daily-word {
  font-family: var(--yh-font);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--yh-ink);
  /* impeccable-disable-next-line bounce-easing: 单词弹跳入场，孩子喜欢的小俏皮 */
  animation: yh-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.15s;
}
.yh-daily-phonetic {
  color: var(--yh-sub);
  font-size: 0.88rem;
  margin-top: 3px;
}

.yh-daily-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.yh-daily-cn {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--yh-text);
}

.yh-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yh-card);
  border: 2px solid var(--yh-pink);
  color: var(--yh-berry);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur, 0.22s) var(--ease, cubic-bezier(0.33,1,0.68,1)),
              box-shadow var(--dur, 0.22s) var(--ease, cubic-bezier(0.33,1,0.68,1)),
              background var(--dur, 0.22s) var(--ease, cubic-bezier(0.33,1,0.68,1));
}
.yh-play:hover {
  background: var(--yh-blush);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(240, 90, 156, 0.22);
}
.yh-play:active { transform: translateY(0); }
.yh-play svg { width: 18px; height: 18px; }

@keyframes yh-pop {
  from { opacity: 0; transform: scale(0.82) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ════════════════ 三个入口卡片 ════════════════ */

.yh-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.yh-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--yh-card);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(124, 104, 156, 0.05), 0 10px 26px rgba(124, 104, 156, 0.09);
  border: 1.5px solid rgba(124, 104, 156, 0.10);
  text-decoration: none;
  transition: transform 0.22s var(--ease, cubic-bezier(0.33,1,0.68,1)),
              box-shadow 0.22s var(--ease, cubic-bezier(0.33,1,0.68,1));
}
.yh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(124, 104, 156, 0.06), 0 18px 40px rgba(124, 104, 156, 0.16);
}
.yh-card:active { transform: translateY(-1px); }

/* 插画牌：每张卡一个专属淡色，图与底色融为一体 */
.yh-card-art {
  width: 104px;
  height: 104px;
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.yh-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yh-card--pig .yh-card-art  { background: var(--yh-blush); }
.yh-card--tree .yh-card-art { background: var(--yh-mint); }
.yh-card--book .yh-card-art { background: var(--yh-lilac); }

.yh-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.yh-card-title {
  font-family: 'ZCOOL KuaiLe', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--yh-ink);
  margin: 0;
}
.yh-card-en {
  color: var(--yh-sub);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.yh-card-desc {
  color: var(--yh-text);
  font-size: 0.92rem;
  margin: 2px 0 0;
}
.yh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.yh-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--yh-berry);
  background: var(--yh-blush);
  padding: 3px 9px;
  border-radius: 999px;
}
.yh-card--tree .yh-tag { color: var(--yh-mint-ink); background: var(--yh-mint); }
.yh-card--book .yh-tag { color: var(--yh-lilac-ink); background: var(--yh-lilac); }

/* 右箭头圆钮 */
.yh-card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yh-blush);
  color: var(--yh-berry);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s var(--ease, cubic-bezier(0.33,1,0.68,1)),
              transform 0.22s var(--ease, cubic-bezier(0.33,1,0.68,1));
}
.yh-card:hover .yh-card-arrow {
  background: var(--yh-pink);
  color: #fff;
  transform: translateX(2px);
}
.yh-card-arrow svg { width: 20px; height: 20px; }

/* ════════════════ 字母彩带 ════════════════ */

.yh-alpha {
  margin-top: 26px;
  background: var(--yh-card);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(124, 104, 156, 0.05), 0 10px 26px rgba(124, 104, 156, 0.09);
  border: 1.5px solid rgba(124, 104, 156, 0.10);
}
.yh-alpha-hint {
  color: var(--yh-sub);
  font-size: 0.92rem;
  margin: 0 0 12px;
}
.yh-alpha-hint b {
  color: var(--yh-berry);
  font-weight: 800;
  font-size: 1.1rem;
}
.yh-alpha-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yh-letter {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--yh-cream);
  color: var(--yh-sub);
  font-family: var(--yh-font);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid transparent;
}
.yh-letter.is-today {
  background: linear-gradient(145deg, var(--yh-pink), var(--yh-berry));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 14px rgba(226, 61, 134, 0.30);
  /* impeccable-disable-next-line bounce-easing: 今日字母弹跳醒目，呼应单词入场 */
  animation: yh-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.25s;
}

/* ════════════════ 可访问性与响应式 ════════════════ */

:is(.yh-card, .yh-play):focus-visible {
  outline: 3px solid var(--yh-berry);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .yh-mascot, .yh-bubble, .yh-daily-word, .yh-letter.is-today {
    animation: none !important;
  }
  .yh-card, .yh-play { transition: none !important; }
}

/* 标题在约 525px 以下会横排折行带孤点，改为规整两行堆叠 */
@media (max-width: 560px) {
  .yh-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .yh-title-cn { margin-left: 0; }
  .yh-title-dot { display: none; }
}

@media (max-width: 420px) {
  .yh-hero { padding: 18px 14px 16px 18px; gap: 12px; }
  .yh-card-art { width: 86px; height: 86px; border-radius: 18px; }
  .yh-card { gap: 12px; }
  .yh-daily-row { gap: 11px; }
  .yh-daily-side { gap: 8px; }
}

/* ════════════════ 夜空深色主题 ════════════════ */
[data-theme="dark"] .yh-page {
  --yh-ink: #F0E8FC;
  --yh-text: #C6B9E2;
  --yh-sub: #A293C9;
  --yh-faint: #7E6FA3;
  --yh-pink: #FF8FC0;
  --yh-pink-soft: #E8A3C4;
  --yh-berry: #FF6FAE;
  --yh-blush: rgba(255, 143, 192, 0.14);
  --yh-blush-deep: rgba(255, 143, 192, 0.28);
  --yh-cream: #261B3C;
  --yh-card: #2B2144;
  --yh-mint: rgba(62, 142, 103, 0.18);
  --yh-mint-ink: #8FD4AE;
  --yh-lilac: #3A2E63;
  --yh-lilac-ink: #B79CFF;
  --yh-butter: rgba(232, 160, 32, 0.15);
  --yh-amber-ink: #F0C070;
  --yh-amber-deep: #E8B95E;
  --yh-gold: #F7C46E;
  --yh-hero-a: #2C2038;
  --yh-hero-b: #261A2E;
  --yh-blush-soft: #32203A;
  --yh-art-warm: rgba(240, 176, 74, 0.15);
}/* ============================================================================
   英语角 · 酷洛米掌机（皮肤 id: yingyu-kuromi / layout: 'kuromi'）
   ----------------------------------------------------------------------------
   由独立 demo 页 kuromi/src/k2-side.html 移植而来（方案 B：卡片在机器右侧纵向）。

   ★ 三条移植规矩（改这份文件前先读）：
     ① **每条选择器都带 `[data-skin="yingyu-kuromi"]` 前缀**
        —— 皮肤是**板块级**的：切到这套皮肤后整个 /yingyu/* 都挂这个属性，
           裸规则会污染小猪佩奇、牛津树那些页。前缀 = 只在这套皮肤下生效。
     ② **类名一律 `km-` 开头 + `@keyframes` 一律 `km-` 前缀**
        —— 原 demo 里的 `.title` / `.card` / `.hero` / `.hot` 跟全站同名，
           不带前缀会以更高优先级覆盖 theme.css 的同名类。
     ③ **body 层样式全部改挂 `.km-page`**
        —— 原 demo 直接写 body（整页浅紫底、字体、居中）。
           这里是嵌在顶栏下面的内容区，改 body 会连顶栏一起染紫。
   ========================================================================== */

@font-face {
  font-family: 'KuromiCN';
  src: url('/yingyu-kuromi/fonts/kuromi-cn.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'PressStartKM';
  src: url('/yingyu-kuromi/fonts/press-start.woff2') format('woff2');
  font-display: swap;
}

/* ===== 页面容器（原 body 的角色） ===== */
[data-skin="yingyu-kuromi"] .km-page {
  --p1: #8a5cc4; --p2: #b987e0; --p3: #e3cdf5;
  --pk: #f0629f; --pk2: #ff9ec9; --pk3: #ffd6ea;
  --ink: #43305e; --sub: #9d8ab8;

  position: relative;
  overflow: clip;              /* 裁掉水印/探头的溢出，防横向滚动条 */
  isolation: isolate;
  margin: 0 0 10px;
  border-radius: 26px;
  padding: clamp(26px, 3.6vw, 44px) clamp(14px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px);
  font-family: "YouYuan", "幼圆", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 560px at 50% -12%, #ffffff 0%, transparent 58%),
    radial-gradient(760px 520px at -10% 40%, #fbe6f5 0%, transparent 62%),
    radial-gradient(820px 560px at 108% 62%, #e9dcfb 0%, transparent 60%),
    linear-gradient(180deg, #f7f2fc, #eee4f9 60%, #e7dbf6);
  box-shadow: 0 18px 44px rgba(120, 80, 170, .16);
}
[data-skin="yingyu-kuromi"] .km-page * { box-sizing: border-box }

/* ===== 背景水印（12 张均匀铺满容器） ===== */
[data-skin="yingyu-kuromi"] .km-wm {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
[data-skin="yingyu-kuromi"] .km-wm img {
  --r: 0deg;
  position: absolute; opacity: .075; filter: saturate(.65);
  transform: rotate(var(--r));
  animation: km-wmf 13s ease-in-out infinite;
}
@keyframes km-wmf { 0%, 100% { translate: 0 0 } 50% { translate: 0 -18px } }

/* ===== 标题 ===== */
[data-skin="yingyu-kuromi"] .km-hero {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2.4vw, 24px); margin-bottom: 24px;
}
[data-skin="yingyu-kuromi"] .km-deco {
  width: clamp(46px, 7.2vw, 92px);
  filter: drop-shadow(0 7px 12px rgba(122, 74, 168, .3));
}
[data-skin="yingyu-kuromi"] .km-deco.km-dl { animation: km-d1 5s ease-in-out infinite }
[data-skin="yingyu-kuromi"] .km-deco.km-dr { animation: km-d2 5.6s ease-in-out infinite }
@keyframes km-d1 { 0%, 100% { transform: rotate(-12deg) translateY(0) } 50% { transform: rotate(-3deg) translateY(-9px) } }
@keyframes km-d2 { 0%, 100% { transform: rotate(11deg) translateY(0) } 50% { transform: rotate(2deg) translateY(-8px) } }

[data-skin="yingyu-kuromi"] .km-title {
  margin: 0;
  font-family: 'KuromiCN', "YouYuan", "幼圆", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 54px);
  letter-spacing: .08em; line-height: 1.2; color: #7b4fb8;
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
    0 6px 0 #dcc3f3, 0 10px 18px rgba(120, 70, 170, .32);
  animation: km-titleBob 4.2s ease-in-out infinite;
}
/* 「英语」两字：换更粗的黑体系 */
[data-skin="yingyu-kuromi"] .km-title .km-en {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-weight: 800;
}
@keyframes km-titleBob {
  0%, 100% { transform: translateY(0) rotate(-.5deg) }
  50% { transform: translateY(-6px) rotate(.5deg) }
}
/* 「掌机」两字：黄色 sticker 字（白描边 + 金底立体 + 轻轻摆动） */
[data-skin="yingyu-kuromi"] .km-title .km-ylw {
  font-style: normal; color: #ffcf1f;
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
    0 6px 0 #dc9d00, 0 11px 20px rgba(170, 112, 0, .42);
  animation: km-ylwBob 1.9s ease-in-out infinite; display: inline-block;
}
@keyframes km-ylwBob {
  0%, 100% { transform: translateY(0) rotate(-1.6deg) }
  50% { transform: translateY(-6px) rotate(1.6deg) }
}

/* ===== 舞台：机器居中，卡片统一在机器下方横排 ===== */
[data-skin="yingyu-kuromi"] .km-scene {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.2vw, 26px); width: 100%; max-width: 1240px; margin: 0 auto;
}
[data-skin="yingyu-kuromi"] .km-scene--landscape .km-gbwrap { width: min(680px, 92vw) }

/* ===== 真机 GBC ===== */
[data-skin="yingyu-kuromi"] .km-gbwrap {
  position: relative; flex: none; width: min(520px, 46vw); user-select: none;
}
[data-skin="yingyu-kuromi"] .km-shell {
  width: 100%; display: block;
  filter: drop-shadow(0 26px 44px rgba(91, 61, 143, .35));
}

/* ===== 复古 LCD 屏 ===== */
[data-skin="yingyu-kuromi"] .km-lcd {
  position: absolute; left: 22.7%; top: 10.4%; width: 55.1%; height: 29.1%;
  border-radius: 3px; overflow: hidden; isolation: isolate;
  /* LCD 调色板：随壳切换（见 data-shell 覆盖） */
  --lcd-bg1: #4a3b63; --lcd-bg2: #2c2043; --lcd-bg3: #170f24;
  --ink: #ffe9ff; --ink-2: #b9a6e0; --glow: rgba(226, 164, 255, .95);
  --snake: #8fe6a0; --snake-head: #e9fff0; --snake-glow: rgba(143, 230, 160, .55);
  --accent: #ff9ed2; --accent-glow: rgba(255, 158, 210, .95);
  --grid: rgba(255, 255, 255, .045); --over: rgba(13, 8, 22, .82);
  background: radial-gradient(118% 108% at 50% -6%, var(--lcd-bg1) 0%, var(--lcd-bg2) 46%, var(--lcd-bg3) 100%);
  box-shadow:
    inset 0 0 0 2px #0d0816,
    inset 0 0 16px 3px rgba(0, 0, 0, .8),
    inset 0 11px 22px rgba(0, 0, 0, .7),
    inset 0 -8px 18px rgba(0, 0, 0, .55);
}
[data-skin="yingyu-kuromi"] .km-lcd::before {
  content: ''; position: absolute; inset: 0; z-index: 11; pointer-events: none; border-radius: inherit;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .26), inset 0 -1px 1px rgba(255, 255, 255, .1),
    inset 1px 0 1px rgba(255, 255, 255, .15), inset -1px 0 1px rgba(255, 255, 255, .1);
}
[data-skin="yingyu-kuromi"] .km-petmid {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; perspective: 560px;
}
/* 动图精灵条：外层裁切出「一帧窗口」，内层整条平移，steps() 逐帧推进 */
[data-skin="yingyu-kuromi"] .km-strip {
  position: relative; height: 88%; aspect-ratio: 1; width: auto; overflow: hidden;
}
[data-skin="yingyu-kuromi"] .km-sprite {
  position: absolute; left: 0; top: 0; height: 100%;
  width: calc(var(--n, 1) * 100%); display: block;
  filter: brightness(1.3) contrast(1.06) saturate(1.16);
  animation: km-spriteRun calc(var(--n, 1) * .085s) steps(var(--n, 1)) infinite;
}
@keyframes km-spriteRun { from { transform: translateX(0) } to { transform: translateX(-100%) } }
/* 默认静止：定在第 1 帧；按了按键（方向键 / A 键）才摘掉 .km-rest → 逐帧播放 */
[data-skin="yingyu-kuromi"] .km-strip.km-rest .km-sprite { animation-play-state: paused }
[data-skin="yingyu-kuromi"] .km-strip.km-flipin { animation: km-fin .32s cubic-bezier(.3, 1.25, .5, 1) }
@keyframes km-fin {
  0% { transform: rotateY(-88deg) scale(.6); opacity: .15 }
  100% { transform: none; opacity: 1 }
}
/* 屏幕效果层 */
[data-skin="yingyu-kuromi"] .km-scan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .62;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .46) 0 1px, rgba(255, 255, 255, .035) 1px 2px, transparent 2px 3px);
}
[data-skin="yingyu-kuromi"] .km-pxg {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .62;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .075) .65px, transparent .95px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px);
  background-size: 3px 3px, 3px 3px;
}
[data-skin="yingyu-kuromi"] .km-vig {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(112% 94% at 50% 44%, transparent 32%, rgba(5, 2, 11, .72) 100%),
    linear-gradient(180deg, rgba(5, 2, 11, .4) 0%, transparent 13%, transparent 86%, rgba(5, 2, 11, .46) 100%);
}
[data-skin="yingyu-kuromi"] .km-glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .11) 13%,
      transparent 29%, transparent 58%, rgba(255, 255, 255, .09) 76%, transparent 93%),
    linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, transparent 11%);
}
[data-skin="yingyu-kuromi"] .km-sweep {
  position: absolute; z-index: 7; left: -70%; top: -180%; width: 240%; height: 62%;
  transform: rotate(17deg); pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .17), transparent);
  animation: km-sweep 6.8s ease-in-out infinite;
}
@keyframes km-sweep { 0% { top: -180% } 52%, 100% { top: 210% } }
[data-skin="yingyu-kuromi"] .km-hud {
  position: absolute; z-index: 8; right: 6%; bottom: 7%;
  font-family: 'PressStartKM', monospace;
  font-size: clamp(6px, 1.05vw, 9px); color: #f6d9ff; opacity: .8; letter-spacing: .03em;
  text-shadow: 0 0 5px rgba(226, 164, 255, .95), 0 1px 0 rgba(0, 0, 0, .6);
}
[data-skin="yingyu-kuromi"] .km-lcd.km-flash::after {
  content: ''; position: absolute; inset: 0; z-index: 12; background: #fff;
  animation: km-flz .42s ease-out;
}
@keyframes km-flz { 0% { opacity: 0 } 28% { opacity: .9 } 100% { opacity: 0 } }
[data-skin="yingyu-kuromi"] .km-lcd.km-magic {
  box-shadow:
    inset 0 0 0 2px #140e1e, inset 0 9px 18px rgba(0, 0, 0, .62),
    inset 0 -6px 14px rgba(0, 0, 0, .45), inset 0 0 40px rgba(206, 147, 216, .6),
    0 0 26px rgba(206, 147, 216, .5);
}

/* ===== 屏幕内粒子 =====
   ⚠️ 粒子宿主独立成层：粒子是命令式 append 进来的，放进 React 认领的子节点中间
      会被后续 diff 挤位/误删。整层 z-index:9，恰好落在玻璃高光 ::before(11) 之下，
      跟原 demo 的堆叠顺序一致。 */
[data-skin="yingyu-kuromi"] .km-fxlayer {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
}
[data-skin="yingyu-kuromi"] .km-pfall {
  position: absolute; top: -14%; z-index: 9; pointer-events: none; line-height: 1;
  animation: km-fallX 2.3s linear forwards;
}
@keyframes km-fallX {
  0% { top: -14%; opacity: 0; transform: translateX(0) rotate(0) }
  10% { opacity: 1 }
  100% { top: 112%; opacity: 0; transform: translateX(var(--dx, 0)) rotate(50deg) }
}
[data-skin="yingyu-kuromi"] .km-prone {
  position: absolute; bottom: -14%; z-index: 9; pointer-events: none; line-height: 1;
  animation: km-riseX 2.1s ease-out forwards;
}
@keyframes km-riseX {
  0% { bottom: -14%; opacity: 0 }
  12% { opacity: 1 }
  100% { bottom: 112%; opacity: 0; transform: translateX(var(--dx, 0)) }
}
[data-skin="yingyu-kuromi"] .km-ppop {
  position: absolute; left: 50%; top: 50%; z-index: 9; pointer-events: none; line-height: 1;
  animation: km-popX .85s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
@keyframes km-popX {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0 }
  30% { opacity: 1 }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.1); opacity: 0 }
}
[data-skin="yingyu-kuromi"] .km-prip {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid #ffb3d9; z-index: 9; pointer-events: none;
  animation: km-ripX 1.1s ease-out forwards;
}
@keyframes km-ripX {
  0% { opacity: .9 }
  100% { width: 280px; height: 280px; margin: -140px 0 0 -140px; opacity: 0 }
}
[data-skin="yingyu-kuromi"] .km-psweepx {
  position: absolute; left: 0; right: 0; top: -30%; height: 26%; z-index: 10; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 210, 240, .85), transparent);
  animation: km-swX .8s ease-in-out forwards;
}
@keyframes km-swX {
  0% { top: -30%; opacity: 0 }
  20% { opacity: 1 }
  100% { top: 112%; opacity: 0 }
}

/* ===== 实体键热区（按真机图精确定位） ===== */
[data-skin="yingyu-kuromi"] .km-hot {
  position: absolute; background: transparent; border: none; cursor: pointer; z-index: 9;
  padding: 0; -webkit-tap-highlight-color: transparent;
  transition: background .16s, box-shadow .16s;
}
[data-skin="yingyu-kuromi"] .km-hot::after { content: ''; position: absolute; inset: -6px }   /* 触控扩大区 */
[data-skin="yingyu-kuromi"] .km-hot:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 12px rgba(255, 255, 255, .28) }
[data-skin="yingyu-kuromi"] .km-hot:active { background: rgba(255, 255, 255, .3) }
[data-skin="yingyu-kuromi"] .km-hot.km-up { left: 15.6%; top: 59.3%; width: 10.6%; height: 6.6%; border-radius: 6px }
[data-skin="yingyu-kuromi"] .km-hot.km-down { left: 15.6%; top: 68.7%; width: 10.6%; height: 6.6%; border-radius: 6px }
[data-skin="yingyu-kuromi"] .km-hot.km-left { left: 7.2%; top: 63.9%; width: 8.5%; height: 6.8%; border-radius: 6px }
[data-skin="yingyu-kuromi"] .km-hot.km-right { left: 25.3%; top: 63.9%; width: 8.5%; height: 6.8%; border-radius: 6px }
[data-skin="yingyu-kuromi"] .km-hot.km-a { left: 78.8%; top: 61.6%; width: 11.8%; height: 7.0%; border-radius: 50% }
[data-skin="yingyu-kuromi"] .km-hot.km-b { left: 61.0%; top: 64.6%; width: 12.5%; height: 7.4%; border-radius: 50% }

/* ===== 卡片区：机器右侧纵向三个 ===== */
/* 探头从圆盘右侧横向钻出 → 纵向不再需要替探头留 105px。
   ⚠️ 但 hover 时卡片往上顶 4 层：`.km-card` 鼠标 3D 倾斜 translateY(-12px)
      + 盘体 translateY(-5px) + scale(1.04) 上沿 3.3px + 紫色光环外扩 10px ≈ 30px
      → 间距小于它，环就会盖住上一张卡的「名牌」词条。取 48px（实测余量 ≈17px）。 */
[data-skin="yingyu-kuromi"] .km-cartzone { position: relative; z-index: 4; flex: none; width: auto; text-align: center }

[data-skin="yingyu-kuromi"] .km-cards {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(16px, 2.6vw, 40px); perspective: 1200px; margin-bottom: 0;
}
[data-skin="yingyu-kuromi"] .km-card {
  /* 卡带造型细节多（凸包/压印/金印/产品码），166px 下读不出来，抬到 182px */
  width: clamp(140px, 12.6vw, 182px); cursor: pointer; position: relative;
  transform-style: preserve-3d; text-decoration: none;
}

/* — 圆形卡带：全息圆盘 + 卡通探头 — */
[data-skin="yingyu-kuromi"] .km-disk { display: flex; flex-direction: column; align-items: center }
[data-skin="yingyu-kuromi"] .km-diskbody {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center;
  animation: km-cfloat 4.4s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
[data-skin="yingyu-kuromi"] .km-disk:nth-child(2) .km-diskbody { animation-delay: .5s }
[data-skin="yingyu-kuromi"] .km-disk:nth-child(3) .km-diskbody { animation-delay: 1s }
@keyframes km-cfloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -6px } }
[data-skin="yingyu-kuromi"] .km-disk:hover .km-diskbody { transform: translateY(-5px) scale(1.04) }
/* 圆盘本体 z=2 压住探头（探头 z=1）→ 升起时才有「从盘后钻出来」的错觉 */
[data-skin="yingyu-kuromi"] .km-diskbody::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 34% 24%, #ffffff 0%, #fbf6ff 50%, #efe0fc 100%);
  border: 2px solid #e2ccf5;
  box-shadow: 0 14px 28px rgba(91, 61, 143, .24), inset 0 5px 12px #fff, inset 0 -9px 18px rgba(196, 166, 232, .42);
  transition: box-shadow .35s;
}
/* 悬停：盘体本身也发紫光，与外围光环叠成「紫色光环围绕」 */
[data-skin="yingyu-kuromi"] .km-disk:hover .km-diskbody::before {
  box-shadow:
    0 0 0 2px rgba(178, 132, 255, .5),
    0 0 30px 9px rgba(150, 80, 255, .42),
    0 24px 46px rgba(240, 111, 168, .36),
    inset 0 5px 12px #fff, inset 0 -9px 18px rgba(196, 166, 232, .42);
}
[data-skin="yingyu-kuromi"] .km-diskpic {
  position: relative; z-index: 3; width: 64%; height: 64%; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(120, 80, 170, .3));
  transition: transform .34s cubic-bezier(.2, 1.4, .4, 1);
}
[data-skin="yingyu-kuromi"] .km-disk:hover .km-diskpic { transform: scale(1.12) rotate(-5deg) }
/* ⚠️ 「跟随鼠标的高光层」已删除 —— 那块 55% 不透明度的白光斑会压住小主题图。
   外圈紫色光环保留（见下）。 */
/* 悬停：圆盘外围一圈旋转的紫色光环
   做法 = conic 紫渐变 + 径向 mask 把中心挖空（只留最外 5px）→ 得到一个「环」
   ⚠️ 旋转用独立 `rotate:`、缩放用独立 `scale:` —— 共用 transform 会互相覆盖 */
[data-skin="yingyu-kuromi"] .km-diskbody::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; z-index: 0;
  pointer-events: none; opacity: 0; scale: .88;
  transition: opacity .38s ease, scale .4s cubic-bezier(.2, 1.3, .4, 1);
  background: conic-gradient(from 0deg,
    #d9b8ff, #9a6cf5, #f2a6ff, #a97cff, #7b3ff2, #e6ccff, #d9b8ff);
  -webkit-mask-image: radial-gradient(circle farthest-side, transparent calc(100% - 5px), #000 calc(100% - 2px));
  mask-image: radial-gradient(circle farthest-side, transparent calc(100% - 5px), #000 calc(100% - 2px));
}
[data-skin="yingyu-kuromi"] .km-disk:hover .km-diskbody::after {
  opacity: 1; scale: 1; animation: km-ringspin 3.6s linear infinite;
}
@keyframes km-ringspin { to { rotate: 360deg } }
/* 圆盘顶部挂绳孔 */
[data-skin="yingyu-kuromi"] .km-chip {
  position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  width: 19px; height: 19px; border-radius: 50%;
  background: #f8f0ff; border: 3px solid #d9bdf1; z-index: 5; box-shadow: inset 0 0 0 2px #fff;
}
/* 卡通探头：默认整只藏在圆盘后（盘 z=2 压住它 z=1），悬停时从「圆盘右侧」横向钻出。
   ⚠️ 终点位移 30px 是量出来的：左缘必须让开「紫色光环外扩 10px + drop-shadow 渗色」，
      实测左缘−盘右缘 = 27px 才不蹭到圆盘（只求「左缘出盘右缘」时是 0px、会伸进光环里）。 */
[data-skin="yingyu-kuromi"] .km-peek {
  position: absolute; left: 50%; top: 100%; height: 106px; width: auto; max-width: 142px;
  object-fit: contain; z-index: 1; pointer-events: none;
  transform: translateX(-50%) translateY(-86%) scale(.72); opacity: 0;
  transition: opacity .28s ease, transform .44s cubic-bezier(.2, 1.5, .4, 1);
  filter: drop-shadow(0 8px 14px rgba(91, 61, 143, .35));
}
[data-skin="yingyu-kuromi"] .km-disk:hover .km-peek {
  opacity: 1;
  transform: translateX(-50%) translateY(-18%) scale(1) rotate(4deg);
}
/* 名牌 */
[data-skin="yingyu-kuromi"] .km-diskname {
  position: relative; z-index: 6; display: inline-block; margin: 0 0 12px;
  padding: 5px 18px; border-radius: 999px; background: #fff; border: 1.5px solid #ecd7f8;
  color: #5b3d8f; font-size: 15px; font-weight: 400; letter-spacing: .1em;
  box-shadow: 0 6px 14px rgba(120, 80, 170, .16);
}

/* ===== 窄屏 ===== */
@media (max-width: 900px) {
  [data-skin="yingyu-kuromi"] .km-gbwrap { width: min(440px, 78vw) }
  [data-skin="yingyu-kuromi"] .km-card { width: min(158px, 42vw) }
}
@media (max-width: 820px) {
  [data-skin="yingyu-kuromi"] .km-page { padding: 22px 10px 26px; border-radius: 20px }
  [data-skin="yingyu-kuromi"] .km-gbwrap { width: min(440px, 76vw) }
  [data-skin="yingyu-kuromi"] .km-card { width: min(158px, 42vw) }
}
/* ══════ 游戏模式：选卡带 + 贪吃蛇（LCD 内叠层，颜色走 --lcd 调色板随壳切换） ══════ */
[data-skin="yingyu-kuromi"] .km-lcd[data-shell="gameboy"] {
  --lcd-bg1: #aabf3f; --lcd-bg2: #95ad2b; --lcd-bg3: #7f9718;
  --ink: #0f380f; --ink-2: #4a6330; --glow: rgba(15, 56, 15, .25);
  --snake: #0f380f; --snake-head: #2d4a2d; --snake-glow: rgba(15, 56, 15, .35);
  --accent: #d34a6a; --accent-glow: rgba(211, 74, 106, .6);
  --grid: rgba(15, 56, 15, .14); --over: rgba(50, 64, 20, .5);
}
[data-skin="yingyu-kuromi"] .km-lcd[data-shell="playdate"] {
  --lcd-bg1: #fdfaf0; --lcd-bg2: #f7f2e2; --lcd-bg3: #eee7d2;
  --ink: #3a3226; --ink-2: #8a7f63; --glow: rgba(0, 0, 0, .12);
  --snake: #33302a; --snake-head: #111; --snake-glow: rgba(0, 0, 0, .3);
  --accent: #f0a11a; --accent-glow: rgba(240, 161, 26, .6);
  --grid: rgba(0, 0, 0, .07); --over: rgba(255, 252, 242, .6);
}
[data-skin="yingyu-kuromi"] .km-mode {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5%;
}
[data-skin="yingyu-kuromi"] .km-cartbig {
  width: 30%; image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(255, 182, 240, .45));
}
[data-skin="yingyu-kuromi"] .km-selname {
  font-family: 'PressStartKM', monospace; font-size: clamp(8px, 1.8vw, 13px);
  color: var(--ink); letter-spacing: .06em;
  text-shadow: 0 0 6px var(--glow), 0 1px 0 rgba(0, 0, 0, .25);
}
[data-skin="yingyu-kuromi"] .km-seldots { display: flex; gap: 5px; }
[data-skin="yingyu-kuromi"] .km-seldots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); opacity: .4;
}
[data-skin="yingyu-kuromi"] .km-seldots i.on { background: var(--accent); opacity: 1; box-shadow: 0 0 5px var(--accent-glow); }
[data-skin="yingyu-kuromi"] .km-selhint, [data-skin="yingyu-kuromi"] .km-ghint {
  font-family: 'PressStartKM', monospace; font-size: clamp(5px, 1vw, 7.5px); color: var(--ink-2);
}
[data-skin="yingyu-kuromi"] .km-game { padding: 4% 5%; justify-content: flex-start; gap: 3%; }
[data-skin="yingyu-kuromi"] .km-gtop {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-family: 'PressStartKM', monospace; font-size: clamp(6px, 1.15vw, 9px); color: var(--ink);
  text-shadow: 0 0 5px var(--glow);
}
[data-skin="yingyu-kuromi"] .km-board {
  position: relative; width: 100%; flex: 1; min-height: 0;
  border: 1px solid var(--accent); border-radius: 3px; opacity: .96;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px calc(100% / var(--rows, 8))),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(100% / var(--cols, 16)));
  overflow: hidden;
}
[data-skin="yingyu-kuromi"] .km-sn {
  position: absolute; width: calc(100% / var(--cols, 16)); height: calc(100% / var(--rows, 8));
  background: var(--snake); border-radius: 2px;
  box-shadow: 0 0 4px var(--snake-glow);
}
[data-skin="yingyu-kuromi"] .km-snhead {
  background: var(--snake-head);
  box-shadow: 0 0 7px var(--snake-glow);
}
[data-skin="yingyu-kuromi"] .km-fd {
  position: absolute; width: calc(100% / var(--cols, 16)); height: calc(100% / var(--rows, 8));
  display: grid; place-items: center; font-size: clamp(7px, 1.3vw, 11px);
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
[data-skin="yingyu-kuromi"] .km-gover {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6%;
  background: var(--over);
}
[data-skin="yingyu-kuromi"] .km-gover b {
  font-family: 'PressStartKM', monospace; font-size: clamp(9px, 2vw, 15px); color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
[data-skin="yingyu-kuromi"] .km-gover i {
  font-family: 'PressStartKM', monospace; font-style: normal;
  font-size: clamp(7px, 1.4vw, 10px); color: var(--ink);
}
[data-skin="yingyu-kuromi"] .km-gover em {
  font-family: 'PressStartKM', monospace; font-style: normal;
  font-size: clamp(5px, 1vw, 7.5px); color: var(--ink-2);
}

/* Playdate 虚拟 SELECT/START 药丸（壳上没有，画两颗） */
[data-skin="yingyu-kuromi"] .km-hot.km-vpill {
  background: rgba(120, 84, 10, .28); border: 1.5px solid rgba(120, 84, 10, .45);
  box-shadow: inset 0 1px 2px rgba(255, 235, 170, .6), 0 1px 2px rgba(80, 55, 0, .3);
}
[data-skin="yingyu-kuromi"] .km-hot.km-vpill i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'PressStartKM', monospace; font-style: normal; font-size: 6px;
  color: rgba(90, 60, 5, .75); letter-spacing: .04em; pointer-events: none;
}
[data-skin="yingyu-kuromi"] .km-hot.km-vpill:hover { background: rgba(120, 84, 10, .42) }
[data-skin="yingyu-kuromi"] .km-hot.km-vpill:active { background: rgba(120, 84, 10, .6) }

/* 选卡画面：贪吃蛇的像素封面 */
[data-skin="yingyu-kuromi"] .km-cartart {
  position: relative; width: 40%; aspect-ratio: 6 / 5;
  border: 1px solid var(--accent); border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px calc(100% / var(--rows, 5))),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(100% / var(--cols, 6)));
  overflow: hidden;
}
[data-skin="yingyu-kuromi"] .km-ca {
  position: absolute; width: calc(100% / var(--cols, 6)); height: calc(100% / var(--rows, 5));
  background: var(--snake); border-radius: 2px; box-shadow: 0 0 4px var(--snake-glow);
}
[data-skin="yingyu-kuromi"] .km-cah { background: var(--snake-head); box-shadow: 0 0 6px var(--snake-glow); }
[data-skin="yingyu-kuromi"] .km-cafd {
  position: absolute; width: calc(100% / var(--cols, 6)); height: calc(100% / var(--rows, 5));
  display: grid; place-items: center; font-size: clamp(7px, 1.2vw, 10px);
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* 换壳小游戏：每台壳的牌子（2×2 格，带名字） */
[data-skin="yingyu-kuromi"] .km-target {
  position: absolute; width: calc(200% / var(--cols, 16)); height: calc(200% / var(--rows, 8));
  display: grid; place-items: center;
  border: 1.5px solid var(--accent); border-radius: 3px;
  background: var(--grid); animation: km-tgpulse 1.4s ease-in-out infinite;
}
[data-skin="yingyu-kuromi"] .km-target i {
  font-family: 'PressStartKM', monospace; font-style: normal; font-size: clamp(5px, 0.9vw, 8px);
  color: var(--ink); letter-spacing: .04em; text-shadow: 0 0 4px var(--glow);
}
@keyframes km-tgpulse {
  0%, 100% { box-shadow: 0 0 3px var(--accent-glow); }
  50% { box-shadow: 0 0 10px var(--accent-glow); }
}

/* 卡片下方留白：悬停时人物向下弹出所需 */
[data-skin="yingyu-kuromi"] .km-cartzone { padding-bottom: 118px }

/* 选壳界面：大字（不再用像素小字） */
[data-skin="yingyu-kuromi"] .km-selname--big {
  font-family: 'KuromiCN', 'YouYuan', '幼圆', 'Microsoft YaHei', sans-serif;
  font-size: clamp(16px, 3vw, 26px); font-weight: 700;
  color: var(--ink); letter-spacing: .18em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
[data-skin="yingyu-kuromi"] .km-shellsel .km-cartbig {
  width: auto; height: auto; max-width: 46%; max-height: 62%; object-fit: contain;
}

/* ══════ 卡带造型：GBC 真卡 CGB-002（57×65.5mm）+ 半透明彩壳 + 满幅标签 ══════
   三层叠出实体感：
     ① .km-inner 壳内腔——绿色 PCB / 黑芯片 / 纽扣电池 / 底部金手指，隔着塑料看得见
     ② .km-case 塑料本身——纵向光泽 + 左右厚度面，半透明所以透出 ①
     ③ .km-label 满幅贴纸——主题色底 + 主图窗 + 名称条 + 金印 + 产品码 + 全息扫光
   ⚠️ 壳色/标签色全走 --c / --lab-* 变量，按 data-tint 分档（真机三种透明壳色）。
   ⚠️ 字号一律用 cqw（容器 = .km-cartbody）：卡片宽度走 clamp，写 px 会在窄屏糊掉。 */
[data-skin="yingyu-kuromi"] .km-cartbody {
  /* 兜底档 = 透明紫，与 GBC 机壳同色系。
     --c* 给不透明的凸包用；--cr* 是同色的 RGB 三元组，给需要"透明"的壳用。 */
  --c: #a06cf0; --c-dk: #5a2fa8; --c-lt: #e2c8ff;
  --cr: 160, 108, 240; --crl: 226, 200, 255; --crd: 90, 47, 168;
  --lab-1: #5b3aa8; --lab-2: #b490f2;

  position: relative; width: 100%;
  aspect-ratio: 57 / 65.5;          /* 真卡比例；旧的 10/11 偏胖，别改回去 */
  container-type: inline-size;      /* 子元素要用 cqw，必须留 */
  animation: km-cfloat 4.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 20px rgba(91, 61, 143, .26));
}
[data-skin="yingyu-kuromi"] .km-cartbody[data-tint="pink"] {
  --c: #ff5aa6; --c-dk: #a81f5e; --c-lt: #ffc4de; --cr: 255,90,166; --crl: 255,196,222; --crd: 168,31,94;
  --lab-1: #dc2c80; --lab-2: #ffa8d4;
}
[data-skin="yingyu-kuromi"] .km-cartbody[data-tint="teal"] {
  --c: #16b8a6; --c-dk: #0a6b60; --c-lt: #a6f0e5; --cr: 22,184,166; --crl: 166,240,229; --crd: 10,107,96;
  --lab-1: #0e8a7b; --lab-2: #6fe4d4;
}
[data-skin="yingyu-kuromi"] .km-cartbody[data-tint="blue"] {
  --c: #6f5cf2; --c-dk: #3323a6; --c-lt: #c6beff; --cr: 111,92,242; --crl: 198,190,255; --crd: 51,35,166;
  --lab-1: #4a38c9; --lab-2: #a99fff;
}

/* ① 壳内腔：绿色 PCB + 走线 + 芯片 + 纽扣电池 + 金手指 */
[data-skin="yingyu-kuromi"] .km-inner {
  position: absolute; left: 1.5%; right: 1.5%; top: 6%; bottom: 1%; z-index: 1;
  overflow: hidden; border-radius: 5cqw 5cqw 8cqw 8cqw;
  background:
    repeating-linear-gradient(0deg, rgba(190, 255, 210, .07) 0 .45cqw, transparent .45cqw 7.5cqw),
    repeating-linear-gradient(90deg, rgba(190, 255, 210, .05) 0 .45cqw, transparent .45cqw 6.5cqw),
    linear-gradient(168deg, #3f9c77 0%, #2c7a58 55%, #1c5640 100%);
}
[data-skin="yingyu-kuromi"] .km-ic {
  position: absolute; border-radius: 2cqw;
  background: linear-gradient(152deg, #33333d, #131319);
  box-shadow: inset 0 .5cqw 0 rgba(255, 255, 255, .16), 0 .4cqw 1cqw rgba(0, 0, 0, .45);
}
[data-skin="yingyu-kuromi"] .km-ic-a { left: 12%; top: 34%; width: 40%; height: 13% }
/* B 片特意留在标签下沿之外（卡带 85%~95% 那段露出来的壳里），
   否则整张卡的「壳内腔」完全看不见，白做了。 */
[data-skin="yingyu-kuromi"] .km-ic-b { right: 13%; bottom: 7.5%; width: 24%; height: 5.5% }
[data-skin="yingyu-kuromi"] .km-cell {
  position: absolute; left: 15%; bottom: 24%; width: 27%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f4f6f9, #b7bec8 52%, #7d848e 100%);
  box-shadow: inset 0 -1cqw 1.6cqw rgba(0, 0, 0, .35), 0 0 0 .4cqw rgba(255, 255, 255, .12);
}
[data-skin="yingyu-kuromi"] .km-trace {
  position: absolute; right: 7%; bottom: 24%; width: 36%; height: 28%; opacity: .75;
  background-image: radial-gradient(circle at 50% 50%, rgba(215, 255, 225, .5) 0 .45cqw, transparent .6cqw);
  background-size: 3.4cqw 3.4cqw;
}
/* 金手指：真卡在 PCB 最下沿、而且是朝下的那面，正视角只隔着壳看到窄窄一条。
   ⚠️ 别做宽做亮——一旦超过卡带高 6% 就退化成「金属栅栏」，是假的元凶。 */
[data-skin="yingyu-kuromi"] .km-pins {
  position: absolute; left: 11%; right: 11%; bottom: 0; height: 5%;
  background: repeating-linear-gradient(90deg,
    #d9a92e 0 1.1cqw, #ffdf8e 1.1cqw 2.1cqw, #b98a26 2.1cqw 2.5cqw);
  box-shadow: 0 -.8cqw 1.6cqw rgba(0, 0, 0, .3);
}
/* PCB 下沿：金手指上方压一道暗边，绿板才有「边界」而不是糊成一条 */
[data-skin="yingyu-kuromi"] .km-inner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 5%; height: 1.4cqw;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .06));
}

/* ② 壳体塑料：半透明彩壳，压在内腔上；纵向光泽做出圆柱面反光
   ⚠️ 类名用 km-case 不是 km-shell —— .km-shell 已被掌机机壳那张大图占用（见文件上方）。 */
[data-skin="yingyu-kuromi"] .km-case {
  position: absolute; left: 0; right: 0; top: 5.5%; bottom: 0; z-index: 2;
  border-radius: 4cqw 4cqw 5cqw 5cqw;
  background:
    linear-gradient(101deg,
      rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .2) 13%, rgba(255, 255, 255, 0) 30%,
      rgba(0, 0, 0, .04) 55%, rgba(255, 255, 255, .22) 76%, rgba(0, 0, 0, .14) 100%),
    /* ⚠️ 这里必须是 rgba 而不是实色/opacity：真卡是「近乎无色的透明彩膜」，
       用实色会把下面的 PCB 压成一块死塑料。alpha 全程 ≤ .62，PCB 才透得出来。 */
    linear-gradient(172deg,
      rgba(var(--crl), .38) 0%, rgba(var(--cr), .46) 42%, rgba(var(--crd), .46) 100%);
  box-shadow:
    inset 0 0 0 .3cqw rgba(255, 255, 255, .55),
    inset 0 1cqw 2cqw rgba(255, 255, 255, .3),
    inset 0 -2cqw 3cqw rgba(0, 0, 0, .22);
}
/* 左右两条厚度面：塑料壳的侧边 */
[data-skin="yingyu-kuromi"] .km-case::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0 .7cqw, rgba(255, 255, 255, 0) 1.6cqw calc(100% - 1.6cqw),
    rgba(0, 0, 0, .3) calc(100% - .7cqw) 100%);
}

/* ③ 顶部凸包：GBC 卡的捏手处（DMG 卡顶部是平的，这里别画错）。
   真卡上这段约占卡带宽 64%、高 10%，是"捏住往外拔"的地方。 */
[data-skin="yingyu-kuromi"] .km-bump {
  position: absolute; left: 18%; right: 18%; top: 0; height: 10%; z-index: 3;
  border-radius: 46% 46% 14% 14% / 92% 92% 10% 10%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .1) 62%, rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--c-lt), var(--c) 56%, var(--c-dk));
  box-shadow: inset 0 .5cqw 1cqw rgba(255, 255, 255, .55), inset 0 -1cqw 2cqw rgba(0, 0, 0, .22);
}
/* 凸包上的厂标压印 */
[data-skin="yingyu-kuromi"] .km-bump i {
  position: absolute; left: 4%; right: 4%; top: 38%;
  font-family: 'PressStartKM', monospace; font-size: 3.2cqw; font-style: normal;
  font-weight: 400; letter-spacing: .02em;
  text-align: center; color: rgba(255, 255, 255, .78); white-space: nowrap;
  text-shadow: 0 .4cqw .6cqw rgba(0, 0, 0, .35), 0 -.4cqw .6cqw rgba(255, 255, 255, .25);
}

/* ④ 标签贴纸：满幅印刷，圆角严丝合缝嵌在壳上。
   四周留出 9.5% / 16% / 20% 的壳面，半透明塑料下的 PCB 才有地方露出来。 */
[data-skin="yingyu-kuromi"] .km-label {
  position: absolute; left: 9.5%; right: 9.5%; top: 15.5%; bottom: 15%; z-index: 4;
  border-radius: 3.4cqw; overflow: hidden;
  background: radial-gradient(130% 96% at 50% -6%, var(--lab-2) 0%, var(--lab-1) 76%);
  box-shadow:
    0 .4cqw 1cqw rgba(0, 0, 0, .3),
    inset 0 0 0 .3cqw rgba(255, 255, 255, .38),
    0 0 0 .5cqw rgba(40, 20, 70, .14);
}
/* 名称条：压在标签顶部的深色横幅 */
[data-skin="yingyu-kuromi"] .km-label-name {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: 2.2cqw 4% 3.5cqw; font-size: 8cqw; font-weight: 700; line-height: 1.2;
  letter-spacing: .06em; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .22) 62%, rgba(0, 0, 0, .06));
  text-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .55);
}
[data-skin="yingyu-kuromi"] .km-label-en {
  position: absolute; left: 0; right: 0; top: 17%; z-index: 3;
  font-family: 'PressStartKM', monospace; font-size: 3cqw; font-style: normal;
  font-weight: 400; letter-spacing: .04em;
  color: rgba(255, 255, 255, .88); text-align: center; text-transform: uppercase;
  text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .5);
}
/* 主图窗：白底内嵌画框，把三张风格不同的素材统一到同一个「插图位」。
   ⚠️ 这里必须是 block 不是 grid/flex：img 的 height:100% 相对 grid area 时，
      行轨道是 auto → 百分比高度解析成 auto → 图片按原始尺寸撑出去盖住底部金印。 */
[data-skin="yingyu-kuromi"] .km-label-art {
  position: absolute; left: 10%; right: 10%; top: 24%; bottom: 21%; z-index: 2;
  box-sizing: border-box; padding: 3%;
  background: linear-gradient(180deg, #fff, #f2f3f8);
  border-radius: 2.6cqw;
  box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .9), 0 .6cqw 1.6cqw rgba(0, 0, 0, .28);
}
[data-skin="yingyu-kuromi"] .km-label-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
/* 底部信息带：左金印、中厂牌、右产品码 */
[data-skin="yingyu-kuromi"] .km-label::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0));
}
[data-skin="yingyu-kuromi"] .km-seal {
  position: absolute; left: 4.5%; bottom: 4%; z-index: 4;
  width: 11cqw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff6cf, #f0c14b 40%, #b07d15 76%, #7d5708 100%);
  box-shadow: 0 0 0 .35cqw rgba(255, 255, 255, .42), 0 .6cqw 1.4cqw rgba(0, 0, 0, .35);
}
[data-skin="yingyu-kuromi"] .km-seal::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  border: .3cqw solid rgba(120, 80, 0, .5); background: rgba(255, 255, 255, .28);
}
[data-skin="yingyu-kuromi"] .km-label-brand {
  position: absolute; left: 19%; bottom: 4.6%; z-index: 4;
  font-family: 'PressStartKM', monospace; font-size: 3.2cqw; font-style: normal;
  font-weight: 400; color: rgba(255, 255, 255, .92); text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .45);
}
[data-skin="yingyu-kuromi"] .km-label-code {
  position: absolute; right: 5%; bottom: 4.6%; z-index: 4;
  font-family: 'PressStartKM', monospace; font-size: 2.7cqw; font-style: normal; letter-spacing: .02em;
  color: rgba(255, 255, 255, .84); text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .45);
}
/* 全息斜光带：默认停在左侧，悬停扫过整张贴纸 */
[data-skin="yingyu-kuromi"] .km-holo {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(112deg,
    transparent 24%, rgba(255, 255, 255, .55) 36%, rgba(190, 240, 255, .4) 43%,
    rgba(255, 214, 255, .45) 50%, rgba(255, 255, 255, .3) 56%, transparent 68%);
  mix-blend-mode: screen; transform: translateX(-46%);
  transition: transform .62s cubic-bezier(.3, .8, .3, 1);
}
[data-skin="yingyu-kuromi"] .km-disk:hover .km-holo { transform: translateX(46%) }

/* 前后壳分模线：真卡前壳底缘那道横线，落在标签下方露出的壳面上 */
[data-skin="yingyu-kuromi"] .km-seam {
  position: absolute; left: 2%; right: 2%; bottom: 13.5%; height: .35cqw; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .38) 12%, rgba(0, 0, 0, .38) 88%, transparent);
  box-shadow: 0 .4cqw .6cqw rgba(255, 255, 255, .25);
}

/* 探头：压在卡带上层、完全弹到卡带下方 */
[data-skin="yingyu-kuromi"] .km-cartbody .km-peek {
  top: 99%; left: 50%; z-index: 6;
  transform: translateX(-50%) translateY(-92%) scale(.72); opacity: 0;
}
[data-skin="yingyu-kuromi"] .km-disk:hover .km-cartbody .km-peek {
  transform: translateX(-50%) translateY(-4%) scale(1) rotate(4deg);
}
[data-skin="yingyu-kuromi"] .km-disk:hover .km-cartbody {
  transform: translateY(4px) rotate(-1.2deg);
}

[data-skin="yingyu-kuromi"] .km-lcd[data-shell="gb1989"] {
  --lcd-bg1: #35544a; --lcd-bg2: #29443c; --lcd-bg3: #1d332c;
  --ink: #d8f0e0; --ink-2: #8fb3a0; --glow: rgba(216, 240, 224, .3);
  --snake: #b8f5c0; --snake-head: #eafff0; --snake-glow: rgba(184, 245, 192, .5);
  --accent: #ffd166; --accent-glow: rgba(255, 209, 102, .55);
  --grid: rgba(216, 240, 224, .07); --over: rgba(20, 40, 34, .68);
}
/* ============================================================
   Peppa Pig Homepage — 忠实复刻 https://www.peppapig.com/en-us
   布局/颜色/形状/动画/曲线 均按官方 DOM 测量数据实现
   ============================================================ */

@font-face {
  font-family: 'QTxiaotu';
  src: url('/fonts/QTxiaotu.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --ph-pink: #9D2986;        /* Peppa 粉 */
  --ph-purple: #B822C3;      /* Peppa 紫 */
  --ph-sky: #00B6EE;         /* 天蓝 */
  --ph-deep-blue: #2977BC;   /* 深蓝 */
  --ph-white: #FFFFFF;
  --ph-black: #0A0A0A;
}

/* ===== 页面容器（官方 max-w-[1920px] mx-auto） =====
   官方原版：内容 max-width 1920px + margin auto 居中，滚动条在浏览器窗口最右侧。
   overflow-x 必须用 clip（不是 hidden）：clip 只裁水平溢出、不产生滚动容器，
   永远由窗口滚动 → 滚动条永远贴在屏幕最右（宽屏也一样）。
   【坑】hidden 会把 overflow-y 计算成 auto，一旦盒子高度被约束（如未来加了
   height/100vh）就变成内部滚动容器，滚动条落在居中盒子的右边缘 = 宽屏上
   "在中间"，这是错误观感。clip 无此风险。
   波浪曲线是各 section 的背景 contain，铺满 1920 内容宽，与 .ph-page 的
   overflow 无关——改这里不影响波浪。 */
.ph-page {
  max-width: 1920px;
  margin: 0 auto;
  background: var(--ph-white);
  font-family: 'QTxiaotu', 'Fredoka One', 'Comic Sans MS', cursive;
  overflow-x: clip;
}

/* ============================================================
   顶栏（全站统一 SiteHeader）：背景透明，佩奇 hero 天空透上来
   浮在 hero 图上方：hero 负 margin 上移，天空从顶栏后面透出
   ============================================================ */
.ph-topbar {
  position: relative;
  z-index: 30;
  background: transparent;
  /* 顶栏与全站主页一致：覆盖 .ph-page 的 QTxiaotu 卡通字体继承，
     导航文字（首页/语文/英语/数学/打卡）恢复 Inter 全站字体 */
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* ============================================================
   Hero（官方：1179×480，top:18% left:18%，无按钮）
   ============================================================ */
.ph-hero {
  position: relative;
  aspect-ratio: 2.452 / 1; /* 官方 hero：高 = 宽/2.452，随节宽等比缩放（实测 1183→482 / 1903→776 / 1920→783）；波浪缺口内容据此与官方一致 */
  margin-top: -120px; /* 上移让 hero 顶部天空透到透明顶栏后面（原为 -60px 与官方导航重叠，导航已删除） */
}

.ph-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/peppa-home/hero-family-desktop.webp');
  background-size: cover;
  background-position: center;
}

.ph-hero-container {
  position: absolute;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.ph-hero-blob {
  position: relative;
}

.ph-hero-blob-img {
  display: block;
  width: auto;
  max-height: 220px;
}

/* 文字叠加（官方：绝对居中，w-[85%]，pt-6） */
.ph-hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  padding-top: 24px;
  text-align: center;
  color: var(--ph-white);
}

.ph-hero-text h1 {
  font-family: 'Baloo 2', 'QTxiaotu', 'Fredoka One', 'Comic Sans MS', cursive;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: var(--ph-white); /* 官方标题白字（全站 theme.css 的 h1{color:--ink} 会覆盖继承色，必须在此显式声明） */
}

.ph-hero-text p {
  font-family: 'Baloo 2', 'QTxiaotu', 'Fredoka One', 'Comic Sans MS', cursive;
  font-size: 16px;
  font-weight: 400;
  margin: 6px 0 0;
  line-height: 1.25;
}

/* ============================================================
   波浪曲线合成 · 成功经验（先读这里，别再做错）
   ------------------------------------------------------------
   每一处"图片间波浪线"都由 4 条铁律组成，缺一不可：

   1) 曲线必须是 伪元素（::before/::after）+ position:absolute
      + z-index:1 + pointer-events:none，横向撑满整节（left:0;right:0）。
      曲线要盖在相邻节的背景之上，所以 z-index 必须 ≥ 相邻节的背景层。
   2) 曲线要溢出 ~94px 伸进相邻节（after 用 top:calc(100%-1px)+height:95px，
      before 用 top:-94px+height:95px），造成"波浪压在下一节上"的效果。
   3) 【最容易错】所在 section 绝不能残留非 none 的 transform！
      滚动显现动画 .ph-scroll-reveal 结束时必须 transform:none
      （不能用 translateY(0)）—— 否则 section 生成层叠上下文，
      把本节的曲线困在自身里，被相邻节背景盖住 = 波浪"乱"。
   4) background-size 与页面宽度必须匹配 ——"波浪铺满整页宽度"是成功的核心：
      - 页面 max-width ≤1920（当前"成功版"）：用 contain，1920×94 的曲线
        刚好铺满整页，与官方完全一致。
      - 页面一旦放宽超过 ~1940px：contain 会被"限高"，曲线只剩 ~1940px 宽
        停在中间、左右各露 ~250px 硬边 = 波浪"乱"（上次翻车根因）。
        此时必须改成 100% auto（按宽度等比铺满；≤1920 时与 contain 渲染
        完全一致）。.ph-page 的 overflow-x 保持 clip（裁水平溢出、窗口滚动，
        滚动条在最右，不影响波浪）。
      - after 曲线（从本节底边向下压）：background-position 50% 0%
      - before 曲线（从本节顶边向上伸）：background-position 50% 100%
   5) 【同样会翻车】各节高度必须用 aspect-ratio 随节宽等比缩放（官方做法）：
      - 官方各节高/宽比值恒定（1183、1903、2560 三档验证）：hero 1/2.452、
        youtube 1/2、app 1/2.27、characters 1/1.879、car 1/4.99。
      - 页面 max-width 1920，所以宽屏（>1920 视口）下节宽恒为 1920，高 =
        1920/比值（hero 783、youtube 960…）。不要用 vw —— vw 在 >1920 视口
        会跟着视口无限变大，节高就错了。
      - 若写成固定 px（如 480/590/520/628/237，只对 1183 成立），宽视口下
        节背景的 cover 裁切位置就与官方不同 → 波浪缺口里露出的"下一节背景"
        不是官方那片 → 观感"乱"。必须先改节高，波浪本身不用动。
      - 【例外】car 是最后一段、下方没有波浪，节高不影响任何波浪缺口；
        故 car 保留固定 237px 紧凑观感（用户认可），不必随宽度放大。
   ------------------------------------------------------------ */

/* Hero 底部波浪曲线（官方 Home-BSA_After_Curve.webp，95px，从 hero 底边向下溢出 94px 盖住 youtube 顶部） */
.ph-hero::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  height: 95px;
  background-image: url('/peppa-home/curve-after-hero-official.webp');
  background-size: contain;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   YouTube（官方：1179×590，标题左对齐 10%）
   ============================================================ */
.ph-youtube {
  position: relative;
  aspect-ratio: 2 / 1; /* 官方 youtube：高 = 宽/2（实测 1183→592 / 1903→952 / 1920→960） */
  overflow: hidden;
}

.ph-youtube-bg {
  position: absolute;
  inset: 0;
  background-image: url('/peppa-home/youtube-bg.webp');
  background-size: cover;
  background-position: center;
}

.ph-youtube-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  z-index: 2;
}

.ph-youtube-title {
  color: var(--ph-white);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.1;
  padding-left: 10%;
  margin: 0;
}

/* ============================================================
   App（内容已移除，保留官方高度：app-bg.webp 是 1920×846 全幅设计图，
   cover 只有在官方 2.27:1 比例下才完整显示。高度一旦压缩，
   背景图被垂直裁成一条，波浪曲线缺口处背景断裂 = 波浪线异常。）
   ============================================================ */
.ph-app {
  position: relative;
  aspect-ratio: 2.27 / 1; /* 官方 app：高 = 宽/2.27（实测 1183→522 / 1903→839 / 1920→846） */
}

.ph-app-bg {
  position: absolute;
  inset: 0;
  background-image: url('/peppa-home/app-bg.webp');
  background-size: cover;
  background-position: center;
}

/* App 顶部波浪曲线（官方 Home-WOP-Before.webp，95px，向上溢出 94px 盖住 youtube 底部） */
.ph-app::before {
  content: "";
  position: absolute;
  top: -94px;
  left: 0;
  right: 0;
  height: 95px;
  background-image: url('/peppa-home/curve-before-app-official.webp');
  background-size: contain;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* App 底部波浪曲线（官方 Home-WOP-After.webp，96px，向下溢出 95px 盖住 characters 顶部） */
.ph-app::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  height: 96px;
  background-image: url('/peppa-home/curve-after-app-official.webp');
  background-size: contain;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   Characters（官方：1179×628，天蓝背景，粉字，Arrow 缩放动画）
   ============================================================ */
.ph-characters {
  position: relative;
  aspect-ratio: 1.879 / 1; /* 官方 characters：高 = 宽/1.879（实测 1183→630 / 1903→1013 / 1920→1022） */
  background-color: var(--ph-sky);
  overflow: hidden;
}

.ph-characters-bg {
  position: absolute;
  inset: 0;
  background-image: url('/peppa-home/char-section-bg.webp');
  background-size: cover;
  background-position: center;
}

.ph-characters-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 23%;
  z-index: 2;
  text-align: center;
}

.ph-characters-title {
  color: var(--ph-pink);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.ph-characters-subtitle {
  color: var(--ph-pink);
  font-size: 22px;
  font-weight: 400;
  margin: 10px 0 0;
}

.ph-characters-figure {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.ph-characters-img {
  width: 388px;
  height: 350px;
  object-fit: cover;
}

/* Arrow（官方：70×70，字符图右下，缩放动画，中心在字符中心右侧 +42px） */
.ph-characters-arrow {
  position: absolute;
  bottom: 4px;
  left: calc(50% + 7px);
  width: 70px;
  height: 70px;
  display: block;
  animation: ph-arrow-zoom 2s ease-in-out infinite;
}

.ph-characters-arrow img {
  width: 100%;
  height: 100%;
}

@keyframes ph-arrow-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ============================================================
   Car（官方：1179×237，car.webp 从左向右行驶）
   注意：car 是最后一段、下方没有波浪，节高不影响任何波浪缺口，
   故保留固定 237px 紧凑观感（不随宽度放大，用户认可）。
   ============================================================ */
.ph-car {
  position: relative;
  height: 237px;
  overflow: hidden;
}

.ph-car-bg {
  position: absolute;
  inset: 0;
  background-image: url('/peppa-home/car-bg.webp');
  background-size: cover;
  background-position: center;
}

.ph-car-track {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 1196px;
  height: 140px;
}

.ph-car-track img {
  position: absolute;
  top: 0;
  left: -300px;
  width: 261px;
  height: 140px;
  animation: ph-car-drive 10s linear infinite;
}

@keyframes ph-car-drive {
  0% { left: -300px; }
  100% { left: 1250px; }
}

/* ============================================================
   Footer（官方：深蓝 #2977BC，三栏：Hasbro / 链接 / ESRB）
   ============================================================ */
.ph-footer-container {
  background-color: var(--ph-deep-blue);
  color: var(--ph-white);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px;
}

.ph-footer-logo {
  width: 86px;
  flex-shrink: 0;
}

.ph-footer-logo img {
  width: 86px;
  height: 86px;
}

.ph-footer-body {
  flex: 1;
  min-width: 0;
}

.ph-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ph-footer-links a {
  color: var(--ph-white);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}

.ph-footer-links a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.ph-footer-discl {
  font-size: 12px;
  margin-top: 14px;
}

.ph-footer-copy {
  font-size: 12.8px;
  line-height: 1.5;
  margin-top: 12px;
  opacity: 0.92;
}

.ph-footer-esrb {
  width: 132px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

.ph-footer-esrb img {
  width: 86px;
  height: auto;
}

/* ============================================================
   滚动显现动画（官方 framer-motion whileInView 效果）
   只用 opacity 淡入，不用 translateY —— 位移会让各节之间出现
   30px 间隙，波浪曲线（各节 ::before/::after）跟着错位 = 波浪线异常。
   纯淡入既保留动画感，又保证波浪永远贴在节边界上。
   ============================================================ */
.ph-scroll-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ph-scroll-reveal.revealed {
  opacity: 1;
}

/* ============================================================
   响应式
   ============================================================ */
@media (min-width: 768px) {
  .ph-hero-container {
    top: 18%;
    left: 17%;
    transform: none;
  }

  .ph-hero-blob-img {
    max-height: 190px;
  }
}

@media (min-width: 1024px) {
  .ph-hero-blob-img {
    max-height: 250px;
  }

  .ph-characters-title {
    font-size: 45px;
  }
}

@media (min-width: 1280px) {
  .ph-hero-container {
    left: 20%;
  }

  .ph-hero-blob-img {
    max-height: 300px;
  }

  .ph-hero-text h1 {
    font-size: 38px;
  }

  .ph-hero-text p {
    font-size: 20px;
  }

  .ph-youtube-title {
    font-size: 49px;
  }

  .ph-characters-title {
    font-size: 45px;
  }

  .ph-youtube-cta {
    font-size: 18px;
  }
}

/* ── 手机横屏（矮视口）：欢迎卡片与文字按视口高度等比缩放 ──
   横屏后视口宽 ≥768 会命中桌面样式：卡片 max-height 190px 固定、h1 28px 固定，
   而 hero 高 = 宽/2.452 ≈ 88% 屏高 → 卡片占近半屏（用户报"整个屏幕都是卡片"）。
   换算基准：卡片图自然比 1.78（高/宽 0.5627），卡高 36vh → 卡宽 64vh；
   文字保持竖屏同款比例：h1=7%卡宽=4.5vh、p=3.5%卡宽=2.25vh。
   平板横屏（如 iPad 高 768px）与桌面不受 max-height:500px 限制保护 */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .ph-hero-blob-img {
    max-height: 36vh; /* 390 高→140px（36% 屏高，原固定 190px 占 49%）、360 高→130px */
  }

  .ph-hero-text {
    padding-top: 24px;
    padding-top: 4.5vh;
  }

  .ph-hero-text h1 {
    font-size: 28px;
    font-size: clamp(12px, 4.5vh, 28px);
  }

  .ph-hero-text p {
    font-size: 16px;
    font-size: clamp(7px, 2.25vh, 16px);
  }
}

@media (max-width: 1023px) {
  .ph-youtube-title {
    font-size: 35px;
  }

  .ph-characters-subtitle {
    font-size: 22px;
  }
}

/* 移动端 */
@media (max-width: 767px) {
  .ph-hero {
    aspect-ratio: 1600 / 1520; /* bg hero-bg-mobile.webp 自然比（0.95）。官方移动 hero 高=节宽×370/390(bg 等比)：aspect-ratio 从节实际宽度推高 → 320节宽303→288、390节宽373→354，与官方逐宽度一致。不用 vw（vw 含滚动条，320 视口会得 304 而非 288） */
    margin-top: 0; /* 移动端顶栏下方正常排列（不重叠：hero 竖构图顶部有角色，重叠会遮字；桌面才用负 margin 透天空） */
  }

  /* 官方移动版所有背景用专用移动素材 + object-fit:fill（整图铺满、不裁边）——
     cover 会裁掉左右内容（用户报"YouTube 节左右的小猪和草坪看不到"的根因） */
  .ph-hero-bg {
    background-image: url('/peppa-home/hero-bg-mobile.webp'); /* 官方移动专用 PeppaPigProductsBSAGeorgeHearingAidSwitched_Mobile */
    background-size: 100% 100%;
  }

  .ph-hero-container {
    top: 23%;
    left: 6%; /* 官方 blob：left 6%、宽 88%（@390 = 343×193，@373 = 328×185） */
    width: 88%;
    transform: none;
  }

  .ph-hero-blob-img {
    width: 100%; /* 官方 blob 随容器宽等比缩放（w-[88%]），高度按图比例 */
    height: auto;
    max-height: none;
  }

  /* 欢迎卡片整体等比缩放（不依赖容器查询单位！老 iOS Safari 不支持 cqw，
     会让 clamp 整条失效回退成 28px/16px——比官方还大且不缩放，用户报"没法等比缩放"的根因）。
     卡片恒为 88% 视口宽 → 卡片的 7% = 6.16vw、3.5% = 3.08vw，
     用 min(官方上限, Nvw)：≥390px 手机保持官方尺寸，<390px 严格等比缩小。
     每条前面保留 px 回退声明，min() 都不支持的极老浏览器也不劣化 */
  .ph-hero-text {
    width: 90%;
    padding-top: 24px;
    padding-top: min(24px, 6.16vw);
  }

  .ph-hero-text h1 {
    font-size: 24px;
    font-size: min(24px, 6.16vw); /* 官方 24px@390，随卡片等比缩放 */
    line-height: 1.4;
  }

  .ph-hero-text p {
    font-size: 12px;
    font-size: min(12px, 3.08vw); /* 官方 12px@390，随卡片等比缩放 */
  }

  .ph-youtube {
    aspect-ratio: 430 / 275; /* bg youtube-bg-mobile.webp 自然比（0.6395）。官方移动 yt 高≈节宽×0.6406（同原理，见 hero 注释） */
  }

  .ph-youtube-bg {
    background-image: url('/peppa-home/youtube-bg-mobile.webp'); /* 官方移动专用 mblyoutube.webp */
    background-size: 100% 100%;
  }

  /* 选季区移动端高度自适应（本 section 现用于季卡，4 卡堆叠远超
     固定 430/275 高度，若保持固定高度会被 overflow:hidden 裁掉下半。
     仅覆盖本 section，桌面端保持官方固定比例不变） */
  .ph-youtube.ph-season-section {
    aspect-ratio: auto;
    overflow: visible;
    padding: 40px 0 48px;
  }
  .ph-youtube.ph-season-section .ph-youtube-content {
    position: relative;
    inset: auto;
  }
  .ph-youtube.ph-season-section .ph-youtube-bg {
    background-size: 100% 100%;
  }

  .ph-youtube-content {
    gap: 12px; /* 官方 gap-3：标题底→缩略图顶 ≈ 12px（y457→y469） */
  }

  .ph-youtube-title {
    font-size: 16px; /* 官方 16/700 */
    width: 165px; /* 官方标题盒 195px 宽(50%)但官方字体更宽 → 文字在 "on" 后换两行；我们 QTxiaotu 窄 20%，盒子收到 165px 才能在同样位置换行 */
    margin-left: 10%; /* 官方标题距左 10%（x39） */
    padding-left: 0;
    text-wrap: normal; /* 官方 white-space: normal，贪心换行；balance 会把两行强行平衡成别的断点 */
  }

  .ph-app {
    aspect-ratio: 401 / 377; /* 官方移动 app 比例，背景图完整显示 */
  }

  .ph-app-bg {
    background-image: url('/peppa-home/app-bg-mobile.webp'); /* 官方移动专用 Home-WOP-BG-Mobile.webp */
    background-size: 100% 100%;
  }

  .ph-characters {
    aspect-ratio: 800 / 467; /* bg chars-bg-mobile.webp 自然比（0.5838）。官方移动 chars 高≈节宽×0.5845 */
    margin-bottom: -4px; /* 官方 -mb-1：car 上拉 4px 重叠进 chars 底部波浪缺口（官方 car 顶=chars 底-4） */
    overflow: visible; /* 桌面 overflow:hidden 会裁掉官方设计里的内容上下探：标题上探进 app 波浪缺口、图/箭头下探进 car（官方同款） */
  }

  .ph-characters-bg {
    background-image: url('/peppa-home/chars-bg-mobile.webp'); /* 官方移动专用 mtc-mob 1.webp */
    background-size: 100% 100%;
  }

  .ph-characters-content {
    padding: 0 6%;
  }

  .ph-characters-title {
    font-size: 18px; /* 官方 18 粉 */
  }

  .ph-characters-subtitle {
    font-size: 10px; /* 官方 10 粉 */
    margin-top: 6px;
  }

  .ph-characters-img {
    width: 155px; /* 官方图 155×140 */
    height: 140px;
  }

  .ph-characters-arrow {
    width: 33px; /* 官方箭头 33×33，中心在图中心右 16px */
    height: 33px;
    left: calc(50% - 1px);
    bottom: 2px;
  }

  .ph-car {
    height: auto; /* 中和桌面 height:237px，否则 aspect-ratio 会用 237 反推宽度爆掉 */
    aspect-ratio: 3088 / 620; /* bg car-bg-mobile.webp 自然比（0.2008）。官方移动 car 高≈节宽×0.2011 */
  }

  .ph-car-bg {
    background-image: url('/peppa-home/car-bg-mobile.webp'); /* 官方移动专用 Home-Car-BG.webp */
    background-size: 100% 100%;
  }

  .ph-car-track {
    bottom: 11px; /* 官方车顶 y7（78-11-60=7） */
    height: 60px;
  }

  .ph-car-track img {
    width: 112px; /* 官方车 112×60 */
    height: 60px;
  }

  .ph-footer-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 20px;
    text-align: center;
  }

  .ph-footer-links {
    justify-content: center;
    gap: 8px 16px;
  }

  .ph-footer-esrb {
    justify-content: center;
  }
}

/* 官方缩略图默认档 max-h-[80px]，vs 断点（≥361px）升到 max-h-[100px]。
   窄屏（≤360px）必须缩到 162×80，否则 202×100 的固定缩略图在 360px 屏上大 25% */
@media (max-width: 360px) {
  /* chars：官方 @320 图 122×110、箭头 25×25（vs 断点 ≥361 才用 140/33） */
  .ph-characters-img {
    width: 122px;
    height: 110px;
  }
  .ph-characters-arrow {
    width: 25px;
    height: 25px;
  }
}

/* ============================================================
   选季区 · 只改卡片样式（背景/标题/布局结构保持原样）
   卡片为横向 banner：左侧角色图 + 右侧「Peppa Pig / Season X」，
   4 张卡 2×2 居中，尺寸以「不超出粉色背景范围」为准。
   ============================================================ */
.ph-youtube-content.ph-season-content {
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 8%;
}

/* 2×2 大卡片栅格（居中、有上限，不超出粉底范围） */
.ph-season-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;          /* 卡片间距加大，布局更舒展 */
  row-gap: 36px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* 横向 banner 卡片 */
.ph-season-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 26px;
  /* 奶油底 + 顶部淡粉高光，贴合佩奇粉紫世界 */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3FA 100%);
  color: var(--ph-pink);
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(157, 41, 134, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ph-season-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 34px rgba(157, 41, 134, 0.26);
}

.ph-season-card:focus-visible {
  outline: 3px solid var(--ph-white);
  outline-offset: 3px;
}

/* 左侧角色图（圆角方框） */
.ph-season-art {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  overflow: hidden;
  background: #FEEAF3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-season-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右侧文案 */
.ph-season-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ph-season-brand {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--ph-pink);
  white-space: nowrap;
}
.ph-season-en {
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-purple);
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* 中屏：卡片稍小 */
@media (max-width: 1023px) {
  .ph-youtube-content.ph-season-content { gap: 22px; }
  .ph-season-grid { max-width: 580px; gap: 18px; }
  .ph-season-art { width: 80px; height: 80px; }
  .ph-season-brand { font-size: 22px; }
}

/* 移动端：单列、铺满、不超出粉底 */
@media (max-width: 767px) {
  .ph-youtube-content.ph-season-content { gap: 20px; padding: 0 6%; }
  .ph-season-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .ph-season-card { padding: 16px 18px; gap: 14px; }
  .ph-season-art { width: 72px; height: 72px; border-radius: 16px; }
  .ph-season-brand { font-size: 20px; }
  .ph-season-en { font-size: 12px; margin-top: 6px; }
}

/* 超窄屏：brand 再收一点 */
@media (max-width: 360px) {
  .ph-season-brand { font-size: 17px; }
  .ph-season-art { width: 64px; height: 64px; }
}

/* ============================================================
   Weather Hunters 风格季卡（PBS Kids CharacterCard 复刻，三层）
   ------------------------------------------------------------
   严格按 pbskids.org 实测配方：
   - 卡片 aspect-ratio 2.3333:1（7:3）
   - 背景层：absolute inset 0、圆角、overflow hidden（背景Container）
   - logo 层：右侧 ~55-60% 卡高、垂直居中（PBS logo 层语义）
   - 角色层：absolute bottom:0 left:25% translateX(-50%)，
     height 127.778% 弹出卡顶，clip-path 左下角跟圆角
   - hover：角色长高 140% + ::after 高亮描边 #e4276a（PBS 实测值）
   ------------------------------------------------------------ */
.ph-season-card--wh {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  aspect-ratio: 2.3333 / 1; /* 卡片本体 7:3，等比缩放 */
  overflow: visible;        /* 角色弹出需要，不能被裁 */
}
.ph-season-card--wh:hover {
  transform: translateY(-4px);
}

.ph-wh-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* 背景场景层（对应 PBS backgroundContainer）：铺满、圆角、裁切内部 */
.ph-wh-bg {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #cdeaf7;
}
.ph-wh-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 太阳独立层（透明 PNG，CSS 精确定位右上角）：
   背景图 1900x816 中太阳原在 (61%,31%)，translate(17%,-6%) 移到 (78%,25%) */
.ph-wh-sun {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(17%, -6%);
  pointer-events: none;
  z-index: 1;
}

/* logo 文字层（大模型生成，PEPPA PIG 蓝 + SEASON 1 黄 + 白包边，2.44:1）：
   右侧云朵上方，文字完整不截断 */
.ph-wh-logo {
  position: absolute;
  left: 64%;            /* 文字中心移到云朵中心(62%)附近 */
  top: 56%;             /* 略向下，避开右上太阳 */
  transform: translate(-50%, -50%);
  width: 46%;           /* 占卡宽 46%，文字高约卡高 33% */
  height: auto;
  pointer-events: none;
  z-index: 3;
}

/* 角色立绘层（用户提供的小猪佩奇，竖版比例）：
   底部对齐、探出卡顶（115%）、hover 长高到 120% */
.ph-wh-char {
  position: absolute;
  bottom: 0;
  left: 25%;
  transform: translateX(-50%);
  height: 115%;
  width: auto;
  max-width: none;
  pointer-events: none;
  transition: height 0.15s ease-out, width 0.15s ease-out;
  clip-path: inset(0 round 0 0 0 26px); /* 左下角跟随卡片圆角（PBS 同款） */
  z-index: 2;
}
.ph-season-card--wh:hover .ph-wh-char {
  height: 120%;
  clip-path: inset(0 0 1px round 0 0 0 34px);
}

/* hover 高亮描边（按用户要求：玫红 → 白色 10px 光晕；角色穿过时自然遮挡，不被切断） */
.ph-wh-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.ph-season-card--wh:hover .ph-wh-card::after,
.ph-season-card--wh:focus-visible .ph-wh-card::after {
  box-shadow: 0 0 0 0 var(--ph-white), 0 0 0 10px #ffffff, 0 0 0 0 rgba(0, 0, 0, 1);
}

/* 手机端：等比缩小，圆角与弹出幅度略收 */
@media (max-width: 767px) {
  .ph-season-card--wh { border-radius: 16px; }
  .ph-wh-bg { border-radius: 16px; }
  .ph-wh-logo { height: 44%; }
  .ph-wh-char {
    height: 106%;
    clip-path: inset(0 round 0 0 0 16px);
  }
  .ph-season-card--wh:hover .ph-wh-char {
    height: 112%;
    clip-path: inset(0 0 1px round 0 0 0 22px);
  }
  .ph-season-card--wh:hover .ph-wh-card::after {
    box-shadow: 0 0 0 0 var(--ph-white), 0 0 0 6px #ffffff, 0 0 0 0 rgba(0, 0, 0, 1);
  }
}

/* ============================================================
   学习单元 · 三套视觉（绘本书页 / 闯关小径 / 沉浸剧场）
   全部复用网站紫粉水彩令牌，仅结构/节奏不同。
   ============================================================ */

/* —— 共享：视频区 —— */
.lu-video { margin: 18px 0; }
.lu-video video {
  display: block;
  width: 100%;
  max-height: 54vh;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: var(--shadow-2);
}
.lu-video-placeholder { display: block; }
.lu-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #463267, #2A1F4A);
  box-shadow: var(--shadow-2);
}
.lu-video-frame img { width: 100%; height: 100%; object-fit: cover; }
.lu-video-frame > .cat-mascot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.lu-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.9;
}
.lu-video-play { pointer-events: none; }
.lu-video-play svg {
  width: 58px; height: 58px;
  padding: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.lu-video-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.lu-video-note strong { color: var(--ink); }
.lu-video-netdisk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1.5px solid rgba(200,175,225,0.5);
  color: var(--violet-600);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lu-video-netdisk:hover { border-color: var(--violet-300); transform: translateY(-2px); }

/* —— 共享：台词块 —— */
.lu-script { display: flex; flex-direction: column; gap: 2px; }
.lu-script-line { padding: 12px 14px; }
.lu-script-en { margin: 0; font-weight: 700; color: var(--ink); font-size: var(--fs-md); }
.lu-script-cn { margin: 3px 0 0; color: var(--text-2); font-size: var(--fs-sm); }

/* —— 共享：句型块 —— */
.lu-patterns { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lu-pattern { padding: 16px 18px; }
.lu-pattern-chip {
  display: inline-block;
  font-weight: 800;
  color: var(--pink-600);
  font-size: var(--fs-md);
  margin-bottom: 6px;
}
.lu-pattern-explain { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.lu-pattern-example {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.lu-pattern-example svg { flex-shrink: 0; color: var(--amber); margin-top: 2px; }

/* —— 共享：单词翻翻卡 —— */
.lu-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lu-flip {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 800px;
  font-family: inherit;
}
.lu-flip-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  display: block;
}
.lu-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius);
  backface-visibility: hidden;
  padding: 10px;
  text-align: center;
}
.lu-flip-front {
  background: linear-gradient(160deg, #fff, var(--violet-50));
  border: 1.5px solid var(--violet-100);
  box-shadow: var(--shadow-1);
}
.lu-flip-word { font-size: var(--fs-lg); font-weight: 800; color: var(--violet-600); }
.lu-flip-phonetic { font-size: var(--fs-sm); color: var(--text-3); }
.lu-flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.lu-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--pink-500), var(--pink-600));
  color: #fff;
  box-shadow: var(--shadow-pink);
}
.lu-flip-meaning { font-size: var(--fs-md); font-weight: 800; }
.lu-flip-example { font-size: var(--fs-xs); opacity: 0.92; }

/* —— 共享：练习 —— */
.lu-quiz { display: flex; flex-direction: column; gap: 22px; }
.lu-quiz-item { }
.lu-quiz-q { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.lu-quiz-index {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--violet-100);
  color: var(--violet-600);
  font-size: var(--fs-xs);
  font-weight: 800;
  vertical-align: middle;
}
.lu-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.lu-quiz-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--violet-100);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.lu-quiz-letter { color: var(--violet-500); font-weight: 800; }
.lu-quiz-opt[data-state="picked"] { border-color: var(--violet-400); background: var(--violet-50); }
.lu-quiz-opt[data-state="right"] { border-color: #4CAF50; background: #EAF7EC; color: #2E7D32; }
.lu-quiz-opt[data-state="wrong"] { border-color: #F44336; background: #FDECEC; color: #D32F2F; }
.lu-quiz-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 22px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  box-shadow: var(--shadow-pink);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.lu-quiz-check:hover { transform: translateY(-2px); }
.lu-quiz-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-weight: 800;
}
.lu-quiz-feedback svg { color: var(--amber); }
.lu-quiz-feedback.ok { color: #2E7D32; }
.lu-quiz-feedback.no { color: #D32F2F; }
.lu-quiz-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.lu-quiz-note svg { color: var(--violet-500); }

/* —— 共享：评论区 —— */
.lu-comment { margin-top: 4px; }
.lu-comment .comment-section { margin-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════
   变体一 · 绘本书页
   ═══════════════════════════════════════════════════════════ */
.lu-book { display: flex; flex-direction: column; }

.lu-book-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--violet-50), var(--pink-50));
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.lu-book-hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--pink-200), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.lu-book-cover {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  border-radius: var(--radius-organic);
  overflow: hidden;
  background: linear-gradient(150deg, var(--pink-200), var(--pink-100));
  box-shadow: var(--shadow-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lu-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.lu-book-head { position: relative; z-index: 1; }
.lu-book-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--pink-600);
  font-size: var(--fs-xs);
  font-weight: 800;
  box-shadow: var(--shadow-1);
}
.lu-book-title { margin: 10px 0 0; font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.lu-book-cn { color: var(--text-2); font-weight: 700; margin-left: 10px; }
.lu-book-desc { margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-sm); }

.lu-book-section {
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
}
.lu-book-headrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lu-book-headrow h3 { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.lu-headicon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 12px 28px 14px 24px / 12px 20px 14px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--violet-100), var(--pink-100));
  color: var(--violet-600);
}
.lu-headicon svg { width: 18px; height: 18px; }
.lu-hint-txt { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }

/* 台词 → 对话气泡，深浅交替 */
.lu-book .lu-script-line {
  border-radius: var(--radius);
  background: var(--violet-50);
  margin-bottom: 8px;
}
.lu-book .lu-script-line:nth-child(even) { background: var(--pink-50); }

/* ═══════════════════════════════════════════════════════════
   变体二 · 闯关小径
   ═══════════════════════════════════════════════════════════ */
.lu-quest { display: flex; flex-direction: column; gap: 20px; }

.lu-quest-top {
  text-align: center;
  padding: 18px 20px 6px;
}
.lu-quest-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--violet-100), var(--pink-100));
  color: var(--violet-600);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.lu-quest-title { margin: 10px 0 0; font-size: var(--fs-2xl); }
.lu-quest-sub { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-md); }

.lu-quest-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 4px;
}
.lu-quest-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
}
.lu-quest-num {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--violet-100);
  color: var(--violet-600);
  font-weight: 800;
  box-shadow: var(--shadow-1);
}
.lu-quest-lab { font-size: var(--fs-xs); font-weight: 700; }

.lu-quest-station {
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.lu-quest-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--violet-50), var(--pink-50));
  border-bottom: 1px solid rgba(255,255,255,0.7);
}
.lu-quest-medal {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 14px 30px 16px 26px / 14px 22px 16px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--violet-500), var(--pink-500));
  color: #fff;
  box-shadow: var(--shadow-1);
}
.lu-quest-medal svg { width: 20px; height: 20px; }
.lu-quest-title2 { font-weight: 800; color: var(--ink); font-size: var(--fs-md); }
.lu-quest-body { padding: 20px; }
.lu-quest-body .lu-script-line {
  border-radius: var(--radius-sm);
  background: var(--violet-50);
  margin-bottom: 6px;
  padding: 10px 14px;
}
.lu-quest-body .lu-script-line:nth-child(even) { background: var(--pink-50); }

/* ═══════════════════════════════════════════════════════════
   变体三 · 沉浸剧场
   ═══════════════════════════════════════════════════════════ */
.lu-theater { }
.lu-theater-hero {
  position: relative;
  width: 92%;
  margin: 0 auto 26px;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.lu-theater-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #463267, #2A1F4A);
}
.lu-theater-bg img { width: 100%; height: 100%; object-fit: cover; }
.lu-theater-bg .cat-mascot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: none;
}
.lu-theater-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,40,0.15), rgba(20,14,40,0.72) 78%);
}
.lu-theater-head {
  position: absolute;
  left: 26px; right: 26px; bottom: 24px;
  color: #fff;
  z-index: 2;
}
.lu-theater-tag {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.lu-theater-title { margin: 10px 0 0; font-size: var(--fs-2xl); color: #fff; }
.lu-theater-sub { margin: 4px 0 0; color: rgba(255,255,255,0.85); font-size: var(--fs-md); }
.lu-theater-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  box-shadow: var(--shadow-pink);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.lu-theater-play:hover { transform: translateY(-2px); }

.lu-theater-body { padding: 0 14px; }
.lu-theater-section { margin: 30px 0; }
.lu-theater-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.lu-theater-h::before, .lu-theater-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pink-200), transparent);
}
.lu-theater-h span { padding: 0 4px; }

.lu-theater-script { }
.lu-theater-line { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px dashed var(--pink-100); }
.lu-theater-en { font-weight: 800; color: var(--ink); font-size: var(--fs-lg); }
.lu-theater-cn { color: var(--text-2); font-size: var(--fs-base); }

.lu-theater-words { display: flex; flex-wrap: wrap; gap: 12px; }
.lu-theater-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--violet-50);
  border: 1px solid var(--violet-100);
  color: var(--violet-600);
}
.lu-theater-word b { font-size: var(--fs-md); font-weight: 800; }
.lu-theater-word em { font-style: normal; color: var(--text-3); font-size: var(--fs-xs); }
.lu-theater-word i { font-style: normal; color: var(--text); font-size: var(--fs-sm); }

.lu-theater-patterns { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lu-theater-pattern { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--violet-50); }
.lu-theater-pattern b { font-size: var(--fs-lg); color: var(--pink-600); }
.lu-theater-pattern p { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.lu-theater-pattern span { display: block; margin-top: 8px; color: var(--ink); font-size: var(--fs-sm); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 720px) {
  .lu-words { grid-template-columns: repeat(2, 1fr); }

  .lu-book-hero { flex-direction: column; text-align: center; padding: 22px; }
  .lu-book-cover { width: 120px; height: 120px; }
  .lu-book-title { font-size: var(--fs-xl); }
  .lu-book-cn { display: block; margin: 4px 0 0; }
  .lu-book-desc { font-size: var(--fs-xs); }

  .lu-quest-steps { grid-template-columns: repeat(5, 1fr); }
  .lu-quest-num { width: 30px; height: 30px; }
  .lu-quest-title { font-size: var(--fs-xl); }

  .lu-theater-hero { width: 100%; aspect-ratio: 4 / 3; max-height: none; }
  .lu-theater-head { left: 18px; right: 18px; bottom: 16px; }
  .lu-theater-title { font-size: var(--fs-xl); }
  .lu-theater-en { font-size: var(--fs-md); }
}
/* 🎧 加入磨耳朵按钮 + 确认弹框 */

.xt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--pink-300, #FBB3D0);
  border-radius: var(--radius-pill, 999px);
  background: var(--pink-50, #FFF5F9);
  color: var(--pink-600, #E23D86);
  font-size: var(--fs-sm, 0.9rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.xt-btn:hover {
  background: var(--pink-100, #FEEAF3);
  box-shadow: var(--shadow-pink, 0 2px 6px rgba(240, 90, 156, 0.07));
  transform: translateY(-1px);
}
.xt-btn:active { transform: translateY(0); }
.xt-btn.is-done {
  border-color: #9BD4A8;
  background: #F1FBF3;
  color: #3E8E52;
}
.xt-btn-icon { font-size: 1.05em; line-height: 1; }

/* ---------- 蒙版 + 卡片 ----------
   弹框由 portal 挂到 body（见 XuntingButton.jsx），所以这里要和「全站层」比大小：
   右侧悬浮列 9999、划词浮标 10001 —— 弹框是模态，取 10050 稳稳盖住 */
.xt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(61, 48, 38, 0.35);
  backdrop-filter: blur(2px);
  animation: xt-fade 0.16s ease-out;
}
@keyframes xt-fade { from { opacity: 0 } to { opacity: 1 } }

.xt-dialog {
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 22px 18px;
  border-radius: var(--radius-lg, 24px);
  background: var(--card-solid, #FFFFFF);
  box-shadow: var(--shadow-3, 0 16px 36px rgba(91, 64, 153, 0.11));
  animation: xt-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes xt-pop { from { opacity: 0; transform: scale(0.94) translateY(8px) } to { opacity: 1; transform: none } }

.xt-title {
  margin: 0 0 10px;
  font-size: var(--fs-md, 1.25rem);
  color: var(--text, #4A3968);
}
.xt-desc {
  margin: 0 0 12px;
  font-size: var(--fs-sm, 0.9rem);
  line-height: 1.6;
  color: var(--text-2, #77659C);
}
.xt-desc b { color: var(--pink-600, #E23D86); }

/* 本集信息 */
.xt-ep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm, 12px);
  background: var(--violet-50, #F7F1FF);
  font-size: var(--fs-sm, 0.9rem);
}
.xt-ep-season {
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--violet-100, #EFE7FB);
  color: var(--violet-600, #6A45C9);
  font-size: var(--fs-xs, 0.8rem);
}
.xt-ep-no { color: var(--text-3, #A99BC4); font-size: var(--fs-xs, 0.8rem); }
.xt-ep-title { color: var(--text, #4A3968); font-weight: 600; }
.xt-ep-cn { color: var(--text-2, #77659C); font-size: var(--fs-xs, 0.8rem); }

.xt-warn {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 12px);
  background: #FFF6E8;
  color: #A6651B;
  font-size: var(--fs-xs, 0.8rem);
  line-height: 1.55;
}
.xt-note {
  margin: 0;
  color: var(--text-3, #A99BC4);
  font-size: var(--fs-xs, 0.8rem);
}
.xt-file {
  padding: 10px 12px;
  margin: 0 0 10px;
  border-radius: var(--radius-sm, 12px);
  background: var(--violet-50, #F7F1FF);
  color: var(--text, #4A3968);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-xs, 0.8rem);
  word-break: break-all;
}
.xt-err {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 12px);
  background: var(--coral-soft, #FDF0EB);
  color: #B5453A;
  font-size: var(--fs-sm, 0.9rem);
  line-height: 1.55;
}
.xt-raw {
  max-height: 140px;
  margin: 0 0 10px;
  padding: 8px 10px;
  overflow: auto;
  border-radius: var(--radius-sm, 12px);
  background: #F6F3F8;
  color: var(--text-3, #A99BC4);
  font-size: 0.72rem;
  white-space: pre-wrap;
}

/* 复制中 */
.xt-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  color: var(--text-2, #77659C);
  font-size: var(--fs-sm, 0.9rem);
}
.xt-spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--pink-200, #FDD7E8);
  border-top-color: var(--pink-500, #F05A9C);
  border-radius: 50%;
  animation: xt-rotate 0.7s linear infinite;
}
@keyframes xt-rotate { to { transform: rotate(360deg) } }

/* 底部按钮 */
.xt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.xt-ghost,
.xt-primary {
  padding: 9px 20px;
  border-radius: var(--radius-pill, 999px);
  font-family: inherit;
  font-size: var(--fs-sm, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.xt-ghost {
  border: 1.5px solid var(--card-border, rgba(220, 200, 235, 0.45));
  background: transparent;
  color: var(--text-2, #77659C);
}
.xt-primary {
  border: none;
  background: linear-gradient(135deg, var(--pink-500, #F05A9C), var(--violet-500, #7B55E0));
  color: #fff;
}
.xt-primary:hover:not(:disabled),
.xt-ghost:hover:not(:disabled) { transform: translateY(-1px); }
.xt-ghost:disabled,
.xt-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* 手机 / iPad：弹框贴底，好点 */
@media (max-width: 640px) {
  .xt-backdrop { align-items: flex-end; padding: 0; }
  .xt-dialog {
    max-width: none;
    border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    animation: xt-slide 0.22s ease-out;
  }
  @keyframes xt-slide { from { transform: translateY(100%) } to { transform: none } }
  .xt-actions { justify-content: stretch; }
  .xt-ghost, .xt-primary { flex: 1; }
}
/* 🐷 佩奇「口语星球」精讲课单集页（PeppaCourse.jsx）
   顶部海报：复刻佩奇故事页 /peppa-home/vhd/index.html 的 .hero-panel
   （同一张 title-panel.png 底图 + CSS 叠加「季·集」和英文标题），
   尺寸/t定位都沿用故事页那一套，保证两处视觉完全一致。
   下面视频：和每集佩奇原始视频同款的 16:9 黑边播放框。 */

.pc-page {
  padding-bottom: 24px;
}

/* ---------- 海报 ---------- */
.pc-hero-panel {
  position: relative;
  width: 66.667%;
  margin: 4px auto 0;
  max-width: 800px;
  container-type: inline-size;
}

.pc-hero-panel img.panel-bg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.1);
  border: 2px solid #cfe8f5;
}

.pc-hero-panel .panel-season {
  position: absolute;
  left: 4%;
  top: 0.5%;
  font-family: "Baloo 2", "ZCOOL KuaiLe", var(--font);
  font-size: clamp(14px, 5.652cqw, 34.67px);
  font-weight: 900;
  color: #0e7490;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    -0.0577em -0.0577em 0 #fff, 0.0577em -0.0577em 0 #fff, -0.0577em 0.0577em 0 #fff, 0.0577em 0.0577em 0 #fff,
    -0.0769em 0 0 #fff, 0.0769em 0 0 #fff, 0 -0.0769em 0 #fff, 0 0.0769em 0 #fff,
    0 0.1538em 0.3462em rgba(14, 116, 144, 0.35);
}

.pc-hero-panel .panel-title {
  position: absolute;
  left: 61.5%;
  top: 37%;
  font-family: "Baloo 2", "ZCOOL KuaiLe", var(--font);
  font-size: clamp(13px, 5.217cqw, 32px);
  font-weight: 900;
  color: #0e7490;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    -0.0625em -0.0625em 0 #fff, 0.0625em -0.0625em 0 #fff, -0.0625em 0.0625em 0 #fff, 0.0625em 0.0625em 0 #fff,
    -0.0833em 0 0 #fff, 0.0833em 0 0 #fff, 0 -0.0833em 0 #fff, 0 0.0833em 0 #fff,
    0 0.1667em 0.375em rgba(14, 116, 144, 0.35);
}

/* 海报下方：中文标题 + 节数 */
.pc-sub {
  margin: 14px 0 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-2, #64748b);
  font-size: var(--fs-sm, 14px);
}

/* ---------- 视频列表 ---------- */
.pc-videos {
  margin-top: 22px;
  display: grid;
  gap: 22px;
}

.pc-video-box {
  background: var(--card, #fff);
  border: 2px solid var(--line, #f1e3c3);
  border-radius: var(--radius-md, 18px);
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(30, 41, 59, 0.06));
}

.pc-video-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #334155);
}

.pc-video-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pink-400, #f472b6);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 播放框：和佩奇原始视频一样的 16:9 黑底 shell */
.pc-video-shell {
  border-radius: 12px;
  overflow: hidden;
  background: #04121f;
}

.pc-video-shell video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #04121f;
}

/* ---------- 移动端 ---------- */
@media (max-width: 767px) {
  .pc-hero-panel {
    width: 100%;
  }

  .pc-video-box {
    padding: 12px 12px 14px;
  }
}
/* 🐷 佩奇剧集目录（Season.jsx）
   目录式列表：两列排布，每行 = 集数徽章 + 英文/中文标题 + 箭头。
   点整行跳单集页；hover 粉色高亮，风格贴合佩奇世界。 */

.ep-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  background: var(--card, #fff);
  border: 2px solid var(--line, #f1e3c3);
  border-radius: var(--radius-md, 18px);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(30, 41, 59, 0.06));
}

/* 目录行：外层容器托住「行身链接」+ 右侧精讲课图标，
   两者是并列的 <a>，不能互相嵌套（嵌套 <a> 是非法 HTML 且点不准） */
.ep-toc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 0;
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ep-toc-row:hover {
  background: var(--pink-50, #fdf2f8);
}

/* 行身：占满剩余宽度，原来的 hover 位移挪到它身上 */
.ep-toc-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.ep-toc-row:hover .ep-toc-link {
  transform: translateX(3px);
}

/* 🎬 精讲课入口：小圆按钮，行 hover 时同步变深 */
.ep-course-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink-500, #ec4899);
  background: var(--pink-50, #fdf2f8);
  border: 1.5px solid var(--pink-200, #fbcfe8);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ep-course-btn:hover {
  background: var(--pink-400, #f472b6);
  border-color: var(--pink-400, #f472b6);
  color: #fff;
  transform: scale(1.08);
}

/* 说明行里那个小图标示范 */
.ep-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--pink-50, #fdf2f8);
  border: 1px solid var(--pink-200, #fbcfe8);
  color: var(--pink-500, #ec4899);
  font-size: 8px;
  vertical-align: -1px;
}

/* 集数徽章 */
.ep-toc-num {
  flex: none;
  min-width: 58px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--pink-400, #f472b6);
  border-radius: 999px;
  padding: 3px 8px;
  letter-spacing: 0.02em;
}

.ep-toc-row:hover .ep-toc-num {
  background: var(--pink-500, #ec4899);
}

/* 英文 + 中文标题 */
.ep-toc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ep-toc-title {
  font-weight: 800;
  color: var(--ink, #334155);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep-toc-cn {
  color: var(--text-3, #94a3b8);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 箭头 */
.ep-toc-arrow {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--text-4, #cbd5e1);
  transition: color 0.15s ease, transform 0.15s ease;
}

.ep-toc-row:hover .ep-toc-arrow {
  color: var(--pink-500, #ec4899);
  transform: translateX(2px);
}

/* 移动端：单列 */
@media (max-width: 767px) {
  .ep-toc {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }

  .ep-toc-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .ep-toc-title {
    white-space: normal;
  }
}
/* ============================================================
   牛津阅读树主题导航页（/yingyu/ort） v2
   视觉语言取自牛津大学出版社官方：
     --ot-navy  #12284C   OUP 深藏青（区块底/正文主色）
     --ot-lime  #B6BB00   ORT logo 树冠原始色（取自 ort-logo.svg）
     --ot-brown #5A2C1A   ORT logo 树干原始色
     --ot-sky   #329BD2   ORT logo 文字蓝
     --ot-cream #FBFAF7   官方米白底
   版式：米白底 + 深蓝大字 + 草绿强调 + 手绘涂鸦；级别色带用官方 Book Band 标准色。
   动效：见文末「动效」段与 prefers-reduced-motion 降级。
   ============================================================ */

.ot-page {
  --ot-navy: #12284C;
  --ot-navy-2: #1B3563;
  --ot-lime: #B6BB00;
  --ot-brown: #5A2C1A;
  --ot-sky: #329BD2;
  --ot-cream: #FBFAF7;
  --ot-cream-2: #F4F2EC;
  --ot-grass: #A6CE39;
  --ot-grass-deep: #6F8F16;
  --ot-ink: #182338;
  --ot-text: #46536E;

  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  background: var(--ot-cream);
  color: var(--ot-ink);
  font-family: var(--font);
  overflow-x: clip;
}

/* 顶栏：与佩奇页同款——透明、浮在内容之上 */
.ot-topbar {
  position: relative;
  z-index: 30;
  background: transparent;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* 顶部阅读进度条（sticky，避免被 .ot-page 的 overflow 裁掉） */
.ot-progress {
  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
  height: 3px;
  margin-bottom: -3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--ot-lime), var(--ot-grass), var(--ot-sky), var(--ot-lime));
  background-size: 300% 100%;
  animation: otHue 6s linear infinite;
}

/* ══════════════════════════════════════════
   通用：滚动渐显（用独立的 translate 属性，避免和 transform 抢）
   ══════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .72s cubic-bezier(.22, .8, .3, 1), translate .72s cubic-bezier(.22, .8, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ══════════════════════════════════════════
   模块 ① 海报
   ══════════════════════════════════════════ */
.ot-hero {
  position: relative;
  background:
    radial-gradient(1100px 560px at 80% 26%, rgba(182, 187, 0, .14), transparent 68%),
    radial-gradient(900px 520px at 8% 84%, rgba(50, 155, 210, .10), transparent 68%),
    var(--ot-cream);
  overflow: hidden;
}

/* 练习本格纹：呼应牛津的分级练习本 */
.ot-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(18, 40, 76, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 40, 76, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(1200px 720px at 62% 46%, #000 34%, transparent 80%);
  pointer-events: none;
}

.ot-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 40px 132px;
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: center;
  gap: 48px;
}

.ot-hero-copy { min-width: 0; }
.ot-hero-copy > * { animation: otRise .8s cubic-bezier(.22, .8, .3, 1) both; }
.ot-hero-copy > :nth-child(1) { animation-delay: .05s; }
.ot-hero-copy > :nth-child(2) { animation-delay: .13s; }
.ot-hero-copy > :nth-child(3) { animation-delay: .21s; }
.ot-hero-copy > :nth-child(4) { animation-delay: .29s; }
.ot-hero-copy > :nth-child(5) { animation-delay: .37s; }

.ot-hero-logo { display: block; width: 76px; height: auto; margin: 0 0 18px; }

.ot-hero-title {
  margin: 0 0 20px;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .015em;
  color: var(--ot-navy);
}
.ot-hero-accent { color: var(--ot-grass-deep); }

.ot-hero-sub {
  margin: 0 0 30px;
  max-width: 34em;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.8;
  color: var(--ot-text);
}

.ot-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.ot-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: translate .28s var(--ease, ease), box-shadow .28s ease,
              background .28s ease, border-color .28s ease;
}
.ot-btn:hover { translate: 0 -2px; }

.ot-btn--primary {
  background: var(--ot-navy);
  color: #fff;
  box-shadow: 0 8px 20px rgba(18, 40, 76, .22);
}
.ot-btn--primary:hover { background: var(--ot-navy-2); box-shadow: 0 12px 28px rgba(18, 40, 76, .3); }

.ot-btn--ghost { background: #fff; color: var(--ot-navy); border-color: rgba(18, 40, 76, .2); }
.ot-btn--ghost:hover { border-color: var(--ot-navy); box-shadow: 0 10px 24px rgba(18, 40, 76, .14); }

.ot-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .94rem;
  color: var(--ot-text);
}
.ot-hero-facts li { display: flex; align-items: baseline; gap: 7px; }
.ot-hero-facts strong { font-size: 1.32rem; font-weight: 900; color: var(--ot-navy); }

/* ── Hero 插画 ── */
.ot-hero-art {
  position: relative;
  justify-self: end;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 340px;
}
.ot-hero-figure {
  display: block;
  width: 100%;
  max-width: 552px;
  height: auto;
  position: relative;
  z-index: 2;
  transform: translateY(var(--py, 0));
  animation: otFloat 6.4s ease-in-out infinite, otPopIn .9s cubic-bezier(.22, .8, .3, 1) both;
  filter: drop-shadow(0 26px 44px rgba(18, 40, 76, .18));
}

/* 背后的虚线光环：缓慢自转 */
.ot-hero-halo {
  position: absolute;
  width: min(430px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(18, 40, 76, .13);
  animation: otSpin 46s linear infinite;
}
.ot-hero-halo::after {
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 68%);
}

/* 魔法钥匙 */
.ot-key { display: block; overflow: visible; }
.ot-hero-key {
  position: absolute;
  left: 1%;
  bottom: 4%;
  width: 84px;
  z-index: 3;
  animation: otKeyBob 5.2s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 214, 92, .9)) drop-shadow(0 8px 18px rgba(150, 104, 8, .35));
}

/* 星光 */
.ot-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFE680;
  box-shadow: 0 0 10px 3px rgba(255, 214, 92, .7);
  animation: otTwinkle 2.6s ease-in-out infinite;
}
.ot-spark--a { top: 22%; left: 8%; animation-delay: .1s; }
.ot-spark--b { top: 12%; right: 22%; animation-delay: .9s; width: 7px; height: 7px; }
.ot-spark--c { bottom: 26%; left: 20%; animation-delay: 1.6s; width: 6px; height: 6px; }

/* ── 手绘涂鸦 ── */
.ot-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ot-doodle { position: absolute; transform: translateY(var(--py, 0)); }
.ot-doodle--burst { width: 66px; top: 13%; left: 3.5%; color: #F4C9C9; animation: otSpin 30s linear infinite; }
.ot-doodle--rings { width: 84px; bottom: 17%; left: 6%; color: var(--ot-sky); opacity: .5; }
.ot-doodle--plus { width: 24px; top: 11%; right: 13%; color: var(--ot-grass); }
.ot-doodle--star { width: 28px; bottom: 30%; right: 5%; color: var(--ot-lime); opacity: .85; animation: otPulse 3.4s ease-in-out infinite; }

.ot-hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 92px;
  display: block;
  z-index: 1;
}

/* ══════════════════════════════════════════
   模块 ② 分级导航（深蓝底 · 6 张图卡）
   ══════════════════════════════════════════ */
.ot-levels {
  position: relative;
  background:
    radial-gradient(900px 460px at 12% 8%, rgba(166, 206, 57, .13), transparent 66%),
    radial-gradient(760px 420px at 92% 88%, rgba(50, 155, 210, .14), transparent 66%),
    var(--ot-navy);
  padding: 22px 40px 132px;
  scroll-margin-top: 12px;
}

.ot-section-head { max-width: 1200px; margin: 0 auto 42px; text-align: center; }
.ot-section-head--left { text-align: left; }

.ot-eyebrow {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ot-grass);
}
.ot-section-title {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.24;
  color: var(--ot-navy);
}
.ot-section-sub {
  margin: 0 auto;
  max-width: 44em;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--ot-text);
}
.ot-section-head--left .ot-section-sub { margin-left: 0; }
.ot-levels .ot-section-title { color: #fff; }
.ot-levels .ot-section-sub { color: rgba(255, 255, 255, .74); }

.ot-level-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

/* 图卡：图片占满，只留一个大号级别数字 */
.ot-level-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin-top: calc(var(--dy, 0) * 1px);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #0B1730;
  box-shadow: 0 10px 26px rgba(3, 9, 22, .38);
  transform: perspective(900px) translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.22, .8, .3, 1), box-shadow .38s ease;
  will-change: transform;
}
.ot-level-card:hover { --lift: -7px; box-shadow: 0 26px 48px rgba(3, 9, 22, .5); }
.ot-level-card:focus-visible { outline: 3px solid var(--ot-grass); outline-offset: 3px; }

.ot-level-media { position: absolute; inset: 0; display: block; }
.ot-level-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .8s cubic-bezier(.22, .8, .3, 1);
}
.ot-level-card:hover .ot-level-media img { scale: 1.08; }

/* 底部压暗 + 书带色描边 */
.ot-level-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 14, 30, .30) 0%, rgba(6, 14, 30, 0) 34%, rgba(6, 14, 30, .58) 78%, rgba(6, 14, 30, .86) 100%);
  pointer-events: none;
}
.ot-level-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--band) 62%, transparent);
  z-index: 3;
  pointer-events: none;
}

/* 指针追光 */
.ot-level-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(320px 220px at var(--glare-x, 50%) var(--glare-y, 50%),
              rgba(255, 255, 255, .34), transparent 62%);
  pointer-events: none;
}
.ot-level-card:hover .ot-level-glare { opacity: 1; }

/* 大号级别数字 */
.ot-level-num {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 16px;
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--band);
  color: var(--band-ink);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  box-shadow: 0 6px 16px rgba(3, 9, 22, .34);
  transition: scale .38s cubic-bezier(.22, .8, .3, 1);
}
.ot-level-card:hover .ot-level-num { scale: 1.12; }

/* 底部信息：静息只露一条边，hover 才滑上来 */
.ot-level-ribbon {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: translateY(calc(100% - 42px));
  transition: transform .44s cubic-bezier(.22, .8, .3, 1);
}
.ot-level-card:hover .ot-level-ribbon { transform: translateY(0); }
.ot-level-band {
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.ot-level-cn {
  font-size: .82rem;
  font-weight: 700;
  color: var(--band);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.ot-level-hover {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  bottom: 46px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .34s ease .06s, translate .34s cubic-bezier(.22, .8, .3, 1) .06s;
}
.ot-level-card:hover .ot-level-hover { opacity: 1; translate: 0 0; }
.ot-level-note { font-size: .9rem; font-weight: 800; line-height: 1.5; color: #fff; }
.ot-level-meta { font-size: .76rem; color: rgba(255, 255, 255, .72); }

.ot-level-foot {
  max-width: 1200px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ot-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88);
  font-size: .88rem;
  font-weight: 700;
}
.ot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ot-grass);
  font-weight: 800;
  font-size: .94rem;
  text-decoration: none;
}
.ot-link:hover { text-decoration: underline; }

.ot-levels-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 62px;
  display: block;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   模块 ③ 系列导航（米白底 · 6 张角色卡）
   ══════════════════════════════════════════ */
.ot-series {
  position: relative;
  background:
    radial-gradient(760px 420px at 88% 10%, rgba(50, 155, 210, .09), transparent 66%),
    radial-gradient(700px 400px at 6% 90%, rgba(166, 206, 57, .12), transparent 66%),
    var(--ot-cream);
  padding: 84px 40px 92px;
}
.ot-series .ot-section-head { text-align: left; max-width: 1200px; }
.ot-series .ot-section-sub { margin-left: 0; }

.ot-series-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ot-series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 20px 24px;
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sc) 22%, #fff) 0%, #fff 62%);
  border: 1px solid color-mix(in srgb, var(--sc) 26%, transparent);
  box-shadow: 0 6px 20px rgba(18, 40, 76, .07);
  rotate: var(--rot, 0deg);
  transform: perspective(900px) translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .38s cubic-bezier(.22, .8, .3, 1), rotate .38s cubic-bezier(.22, .8, .3, 1),
              box-shadow .38s ease, border-color .38s ease;
  will-change: transform;
}
.ot-series-card:hover {
  --lift: -8px;
  rotate: 0deg;
  border-color: color-mix(in srgb, var(--sc) 55%, transparent);
  box-shadow: 0 22px 44px rgba(18, 40, 76, .16);
}
.ot-series-card:focus-visible { outline: 3px solid var(--sc); outline-offset: 3px; }

/* 角色圆窗 */
.ot-series-disc {
  position: relative;
  width: min(174px, 68%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--sc) 16%, #fff);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--sc) 30%, transparent),
              inset 0 0 0 5px #fff,
              inset 0 0 0 7px color-mix(in srgb, var(--sc) 45%, transparent);
  animation: otBreathe 5.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 260ms);
  transition: scale .45s cubic-bezier(.22, .8, .3, 1), rotate .45s cubic-bezier(.22, .8, .3, 1);
}
.ot-series-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.ot-series-card:hover .ot-series-disc { scale: 1.07; rotate: -3deg; }

/* 系列名小签（静息唯一文字，保持轻） */
.ot-series-tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--sc);
  color: #fff;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sc) 38%, transparent);
}
.ot-series-en {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: color-mix(in srgb, var(--sc) 78%, #12284C);
  min-height: 1.1em;
  opacity: 0;
  translate: 0 4px;
  transition: opacity .32s ease, translate .32s ease;
}
.ot-series-card:hover .ot-series-en { opacity: 1; translate: 0 0; }

.ot-series-glare {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(260px 200px at var(--glare-x, 50%) var(--glare-y, 50%),
              rgba(255, 255, 255, .6), transparent 60%);
  pointer-events: none;
}
.ot-series-card:hover .ot-series-glare { opacity: 1; }

.ot-series-note {
  max-width: 1200px;
  margin: 26px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--ot-text);
}

/* ══════════════════════════════════════════
   模块 ④ 魔法钥匙冒险带
   ══════════════════════════════════════════ */
.ot-ride {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EAF6FD 0%, #DCEFF9 52%, #EAF6FD 100%);
  min-height: 560px;
  padding-top: 26px;
}

.ot-ride-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(340px 160px at 14% 20%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(420px 180px at 78% 12%, rgba(255, 255, 255, .8), transparent 72%);
  pointer-events: none;
}

/* 飘云 */
.ot-ride-clouds { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ot-cloud {
  position: absolute;
  color: #fff;
  opacity: .92;
  filter: drop-shadow(0 8px 12px rgba(18, 40, 76, .07));
  animation: otDrift linear infinite;
}
.ot-cloud--1 { width: 158px; top: 40%; left: 6%;  animation-duration: 52s; }
.ot-cloud--2 { width: 104px; top: 56%; left: 34%; opacity: .78; animation-duration: 68s; animation-delay: -14s; }
.ot-cloud--3 { width: 214px; top: 30%; left: 62%; opacity: .72; animation-duration: 84s; animation-delay: -32s; }
.ot-cloud--4 { width: 86px;  top: 66%; left: 82%; opacity: .82; animation-duration: 58s; animation-delay: -44s; }
.ot-cloud--5 { width: 132px; top: 22%; left: 20%; opacity: .66; animation-duration: 76s; animation-delay: -60s; }

/* 彩虹：进入视口后自绘 */
.ot-ride-rainbow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.ot-ride-rainbow path {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: otDraw 2.6s cubic-bezier(.4, 0, .2, 1) .3s forwards;
}
.ot-ride-rainbow path:nth-child(2) { animation-delay: .42s; }
.ot-ride-rainbow path:nth-child(3) { animation-delay: .54s; }
.ot-ride-rainbow path:nth-child(4) { animation-delay: .66s; }
.ot-ride-rainbow path:nth-child(5) { animation-delay: .78s; }
.ot-ride-rainbow path:nth-child(6) { animation-delay: .9s; }

/* 飞行中的魔法钥匙 */
.ot-fly {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  z-index: 4;
  animation: otKeyFly 15s cubic-bezier(.45, 0, .55, 1) infinite;
  filter: drop-shadow(0 0 12px rgba(245, 193, 60, .85));
  pointer-events: none;
}
.ot-fly-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFF0B8;
  box-shadow: 0 0 12px 4px rgba(255, 214, 92, .8);
  z-index: 3;
  pointer-events: none;
  animation: otTwinkle 2.2s ease-in-out infinite;
}
.ot-fly-spark--1 { top: 34%; left: 24%; animation-delay: .2s; }
.ot-fly-spark--2 { top: 22%; left: 52%; animation-delay: 1.1s; width: 7px; height: 7px; }
.ot-fly-spark--3 { top: 46%; left: 74%; animation-delay: .7s; width: 12px; height: 12px; }

/* 书名走马灯 */
.ot-ticker {
  position: relative;
  z-index: 5;
  width: 112%;
  margin: 6px 0 0 -6%;
  rotate: -1.4deg;
  background: var(--ot-navy);
  border-block: 3px solid var(--ot-lime);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(18, 40, 76, .16);
}
.ot-ticker-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  padding: 11px 0;
  animation: otMarquee 42s linear infinite;
}
.ot-ticker:hover .ot-ticker-track { animation-play-state: paused; }
.ot-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .92);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ot-ticker-key { width: 16px; flex: none; opacity: .95; }

/* 草地 + 插画 */
.ot-ride-grass {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 64px;
  height: 112px;
  background:
    radial-gradient(60px 24px at 18% 22%, rgba(255, 255, 255, .28), transparent 70%),
    linear-gradient(180deg, #B4D64A 0%, #8FBA2E 100%);
}
.ot-ride-art {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 106px;
  transform: translateX(-50%);
  width: min(470px, 44vw);
}
.ot-ride-art img {
  display: block;
  width: 100%;
  height: auto;
  animation: otFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 16px 26px rgba(18, 40, 76, .18));
}

/* 路面 */
.ot-ride-road {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: #43536B;
  display: flex;
  align-items: center;
}
.ot-ride-dash {
  flex: 1;
  height: 5px;
  margin: 0 24px;
  border-radius: 999px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .82) 0 46px, transparent 46px 92px);
  animation: otRoad 1.1s linear infinite;
}

/* ══════════════════════════════════════════
   页脚
   ══════════════════════════════════════════ */
.ot-foot { background: #0D1D38; padding: 44px 40px 48px; }
.ot-foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.ot-foot-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(182, 187, 0, .18);
  color: var(--ot-lime);
  margin-bottom: 4px;
}
.ot-foot-title { margin: 0; font-size: .98rem; font-weight: 800; color: rgba(255, 255, 255, .92); }
.ot-foot-note {
  margin: 0;
  max-width: 52em;
  font-size: .82rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .52);
}

/* ══════════════════════════════════════════
   动效关键帧
   ══════════════════════════════════════════ */
@keyframes otRise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes otPopIn { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes otFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes otSpin { to { rotate: 360deg; } }
@keyframes otPulse { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.22; opacity: 1; } }
@keyframes otTwinkle {
  0%, 100% { opacity: .25; scale: .6; }
  50% { opacity: 1; scale: 1.15; }
}
/* 系列角色圆窗的轻微呼吸：让整块区域"活着" */
@keyframes otBreathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
@keyframes otKeyBob {
  0%, 100% { translate: 0 0; rotate: -9deg; }
  50% { translate: 0 -13px; rotate: 9deg; }
}
@keyframes otHue { to { background-position: 300% 0; } }
@keyframes otRoad { to { background-position: -92px 0; } }
@keyframes otMarquee { from { translate: 0 0; } to { translate: -50% 0; } }
@keyframes otDraw { to { stroke-dashoffset: 0; } }
/* 云朵横向飘过（left 用百分比，随容器宽度缩放） */
@keyframes otDrift { from { left: -24%; } to { left: 114%; } }
/* 魔法钥匙掠过天空：沿弧线飞行 */
@keyframes otKeyFly {
  0%   { left: -7%;  top: 66%; rotate: -18deg; scale: .78; opacity: 0; }
  7%   { opacity: 1; }
  22%  { left: 17%;  top: 30%; rotate: 10deg;  scale: 1; }
  42%  { left: 39%;  top: 55%; rotate: -8deg;  scale: 1.06; }
  62%  { left: 61%;  top: 24%; rotate: 14deg;  scale: 1; }
  82%  { left: 83%;  top: 50%; rotate: -6deg;  scale: .96; }
  93%  { opacity: 1; }
  100% { left: 107%; top: 32%; rotate: 8deg;   scale: .78; opacity: 0; }
}

/* ══════════════════════════════════════════
   响应式
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ot-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 4px 28px 116px; }
  .ot-hero-art { justify-self: center; }
  .ot-hero-figure { margin: 0 auto; max-width: 440px; }
  .ot-level-grid { grid-template-columns: repeat(2, 1fr); }
  .ot-series-grid { grid-template-columns: repeat(2, 1fr); }
  .ot-levels, .ot-series { padding-left: 28px; padding-right: 28px; }
  .ot-ride-art { width: min(360px, 48vw); }
}

@media (max-width: 768px) {
  .ot-hero-inner { padding: 0 20px 104px; }
  .ot-hero-title { font-size: clamp(2.05rem, 10vw, 2.7rem); }
  .ot-hero-logo { width: 62px; margin-bottom: 14px; }
  .ot-br-desktop { display: none; }
  .ot-hero-wave { height: 56px; }
  .ot-hero-facts { gap: 8px 18px; font-size: .88rem; }
  .ot-hero-facts strong { font-size: 1.14rem; }
  .ot-hero-key { width: 48px; right: 4%; bottom: 2%; }
  .ot-doodle--burst, .ot-doodle--rings, .ot-doodle--plus { display: none; }
  .ot-doodle--star { bottom: 30%; right: 5%; width: 20px; }

  .ot-levels { padding: 18px 20px 104px; }
  .ot-series { padding: 60px 20px 70px; }
  .ot-level-grid { grid-template-columns: 1fr; gap: 16px; }
  .ot-level-card { margin-top: 0; aspect-ratio: 16 / 11; }
  .ot-series-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .ot-ride { min-height: 460px; }
  .ot-ride-road { height: 56px; }
  .ot-ride-grass { height: 84px; bottom: 56px; }
  .ot-ride-art { width: min(300px, 68vw); bottom: 92px; }
  .ot-fly { width: 40px; }
  .ot-ticker-item { font-size: .84rem; }
  .ot-series-card { padding: 20px 12px 18px; gap: 11px; }
  .ot-series-tag { font-size: .76rem; padding: 4px 10px; text-align: center; }
  .ot-series-disc { width: 76%; }
}

/* 触屏没有 hover：书带信息常显，说明文字（会与书带重叠）直接不渲染 */
@media (hover: none) {
  .ot-level-ribbon { transform: translateY(0); }
  .ot-level-hover { display: none; }
  .ot-series-en { opacity: 1; translate: 0 0; }
}

/* ♿ 系统开启"减少动态"：全部动画关掉，直接呈现终态 */
@media (prefers-reduced-motion: reduce) {
  .ot-page *,
  .ot-page *::before,
  .ot-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ot-ride-rainbow path { stroke-dashoffset: 0; }
  .ot-fly { display: none; }
  .ot-cloud { animation: none; }
  [data-reveal] { opacity: 1; translate: none; }
}
/* ============================================================
   电子书板块 · 绘本书架风（Ebook / EbookSeries / EbookReader）
   沿用全局 token：紫粉主色 + 暖白底，圆角大、阴影有偏移。
   Winnie 系列用紫（女巫袍）+ 琥珀（温妮的红发）做点缀。
   ============================================================ */
/* impeccable-disable design-system-radius, design-system-font-size */

.ebook-page {
  padding-bottom: 10px;
}

/* 区块标题右侧的小字：阅读角 / 女巫温妮 */
.ebook-title-cn {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  margin-left: 2px;
  white-space: nowrap;
}

.ebook-intro {
  color: var(--text-2);
  margin: -4px 0 14px;
  font-size: var(--fs-sm);
}

/* ═══════════════ 书架入口卡 ═══════════════ */

.ebook-shelf {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ebook-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-1);
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.ebook-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
a.ebook-entry:active { transform: translateY(-1px); }
a.ebook-entry:focus-visible {
  outline: 3px solid var(--violet-500);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* 封面：略微倾斜，像摆在书架上的书 */
.ebook-entry-cover {
  position: relative;
  width: 108px;
  height: 142px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(91, 64, 153, 0.28);
  background: linear-gradient(160deg, var(--violet-100), var(--violet-50));
  transform: rotate(-2.5deg);
}
.ebook-entry-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 封面角标：几本 */
.ebook-entry-pages {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--violet-600);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  letter-spacing: 0.02em;
}

.ebook-entry-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ebook-entry-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ebook-entry-cn {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pink-600);
}
.ebook-entry-desc {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin: 2px 0 0;
}
.ebook-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.ebook-entry-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--violet-600);
  background: var(--violet-100);
  padding: 3px 10px;
  border-radius: 999px;
}
.ebook-entry-tag:nth-child(2) {
  color: #8a5a06;
  background: var(--amber-soft);
}

/* 右箭头圆钮 */
.ebook-entry-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--violet-100);
  color: var(--violet-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ebook-entry:hover .ebook-entry-arrow {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  color: #fff;
  transform: translateX(2px);
}
.ebook-entry-arrow svg { width: 20px; height: 20px; }

/* 新书预告：虚线占位，不可点 */
.ebook-entry--soon {
  border-style: dashed;
  border-color: var(--violet-200);
  opacity: 0.85;
}
.ebook-entry-cover--soon {
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet-300);
  background: var(--violet-50);
  box-shadow: none;
}

/* ═══════════════ 书目页：12 张书卡 ═══════════════ */

.ebook-count-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin: -2px 0 16px;
}

.ebook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ebook-book-card {
  display: block;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ebook-book-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.ebook-book-card:active { transform: translateY(-1px); }
.ebook-book-card:focus-visible {
  outline: 3px solid var(--violet-500);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.ebook-book-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(160deg, var(--violet-100), var(--violet-50));
  box-shadow: 0 4px 12px rgba(91, 64, 153, 0.16);
}
.ebook-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s var(--ease);
}
.ebook-book-card:hover .ebook-book-cover img {
  transform: scale(1.04);
}
.ebook-book-no {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--violet-600);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  letter-spacing: 0.04em;
}
.ebook-book-title {
  margin: 9px 2px 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ebook-book-cn {
  margin: 2px 2px 0;
  font-size: 0.78rem;
  color: var(--text-2);
}

/* ═══════════════ 阅读页 ═══════════════ */

.ebook-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ebook-reader-title {
  margin: 18px 0 10px;
}
.ebook-reader-no {
  display: inline-flex;
  align-items: center;
  background: var(--amber-soft);
  color: #8a5a06;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* PDF 逐页渲染器（pdf.js）：手机/电脑通用的滑动翻页 */
.pdf-wrap {
  position: relative;
}

.pdf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  background: var(--card);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius-lg);
}
.pdf-loading-text {
  margin: 0;
  color: var(--text-2);
  font-weight: 700;
}
.pdf-loading-bar {
  width: min(240px, 60%);
  height: 8px;
  border-radius: 999px;
  background: var(--violet-100);
  overflow: hidden;
}
.pdf-loading-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-400), var(--violet-500));
  transition: width 0.25s var(--ease);
}

.pdf-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
}

.pdf-page {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(91, 64, 153, 0.18);
}
/* 未渲染页的占位框（padding-top 撑高度，兼容旧 iOS） */
.pdf-page-ph {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, var(--violet-100), var(--violet-50));
}
.pdf-page-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  animation: pdf-shimmer 1.6s linear infinite;
}
@keyframes pdf-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.pdf-page-no {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-3);
  font-weight: 700;
  font-size: 0.95rem;
}
.pdf-page-canvas {
  display: none; /* 画好后由组件切到 block */
  width: 100%;
  height: auto;
}

/* 正在看的页码浮标 */
.pdf-indicator {
  position: sticky;
  bottom: 14px;
  margin: -34px auto 0;
  width: fit-content;
  display: block;
  background: rgba(56, 42, 85, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.pdf-scroll-fail {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-2);
  background: var(--card);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius-lg);
}
.pdf-scroll-fail p { margin: 0; }

.ebook-raw-link {
  color: var(--violet-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}

.ebook-pdf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  background: var(--card);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  text-align: center;
}
.ebook-pdf-error > svg { color: var(--violet-300); }
.ebook-pdf-error p { margin: 0; font-weight: 700; color: var(--text); }
.ebook-pdf-error-sub { font-weight: 400 !important; color: var(--text-2) !important; font-size: var(--fs-sm); }
.ebook-pdf-error .btn { margin-top: 10px; }

/* 上一本 / 目录 / 下一本 */
.ebook-nav {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 16px;
}
.ebook-nav-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}
.ebook-nav-spacer { flex: 1; }

/* 底部提示条 */
.ebook-foot-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  margin: 18px auto 0;
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.ebook-foot-note svg { width: 14px; height: 14px; color: var(--pink-500); }

/* ═══════════════ 响应式 ═══════════════ */

@media (max-width: 640px) {
  .ebook-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .ebook-entry { padding: 13px; gap: 12px; }
  .ebook-entry-cover { width: 86px; height: 114px; }
  .ebook-entry-title { font-size: 1.12rem; }
  .pdf-scroll { padding: 7px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ebook-entry, .ebook-book-card, .ebook-book-cover img, .ebook-entry-arrow { transition: none !important; }
  .pdf-page-ph::after { animation: none !important; }
  .pdf-loading-bar span { transition: none !important; }
}
/* ============================================================
   数学角 · ShuxueHome 专属样式（琥珀金调绘本风）
   register=product · palette=amber-gold+cream+violet-accent
   type=QTxiaotu 展示体 + 系统正文 · layout=hero + 横卡
   engine=CSS-only（吉祥物漂浮 / 数字入场）· 明亮 · 轻盈
   ============================================================ */

.sh-page {
  --sh-ink: #3D2B0A;
  --sh-text: #5C4418;
  --sh-sub: #8A7040;
  --sh-faint: #B8A46A;
  --sh-amber: #E8A020;
  --sh-amber-soft: #F5B84B;
  --sh-amber-deep: #C08A1E;
  --sh-blush: #FDF1DC;
  --sh-blush-deep: #F0D4A0;
  --sh-cream: #FFFAF0;
  --sh-card: #FFFFFF;
  --sh-violet: #7B55E0;
  --sh-violet-soft: #9C7BFF;
  --sh-success: #2E7D32;
  --sh-font: 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --sh-hero-a: #FFF9F0;
  --sh-hero-b: #FFF3E0;
  --sh-mint: #E8F5E9;
  --sh-ring: rgba(255, 255, 255, 0.92);
  --sh-ring-soft: rgba(255, 255, 255, 0.85);

  position: relative;
  padding-bottom: 8px;
  overflow-x: clip;
}

/* ════════════════ Hero ════════════════ */

.sh-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 18px 20px 22px;
  border-radius: 30px 18px 30px 20px / 26px 30px 24px 32px;
  background: linear-gradient(150deg, var(--sh-hero-a) 0%, var(--sh-hero-b) 60%, var(--sh-blush) 100%);
  box-shadow: 0 1px 2px rgba(232, 160, 32, 0.05), 0 12px 32px rgba(232, 160, 32, 0.12);
}

.sh-hero-text {
  flex: 1;
  min-width: 0;
}

/* 问候泡泡 */
.sh-hello {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sh-card);
  border: 1.5px solid var(--sh-blush-deep);
  color: var(--sh-amber-deep);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  padding: 9px 13px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(232, 160, 32, 0.12);
  position: relative;
}
.sh-hello-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-amber);
  flex-shrink: 0;
}
.sh-hello::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--sh-card);
  border-right: 1.5px solid var(--sh-blush-deep);
  border-bottom: 1.5px solid var(--sh-blush-deep);
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

/* 大标题 */
.sh-title {
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: clamp(2.35rem, 9vw, 3.1rem);
  line-height: 1.04;
  color: var(--sh-ink);
  margin: 12px 0 6px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.sh-title-cn {
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 0.62em;
  color: var(--sh-amber);
  margin-left: 8px;
  white-space: nowrap;
}

.sh-sub {
  color: var(--sh-sub);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* 吉祥物 */
.sh-mascot-wrap {
  position: relative;
  flex-shrink: 0;
  margin-right: 6px;
}
.sh-mascot {
  width: clamp(104px, 29vw, 150px);
  height: clamp(104px, 29vw, 150px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 4px solid var(--sh-ring);
  box-shadow: 0 10px 26px rgba(232, 160, 32, 0.22);
  animation: sh-float 3.6s ease-in-out infinite;
}
.sh-bubble {
  position: absolute;
  top: -8px;
  right: -12px;
  z-index: 2;
  background: var(--sh-card);
  border: 2px solid var(--sh-blush-deep);
  color: var(--sh-amber-deep);
  font-family: var(--sh-font);
  font-size: 1.05rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 4px 12px rgba(232, 160, 32, 0.18);
  animation: sh-wobble 2.8s ease-in-out infinite;
}

@keyframes sh-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes sh-wobble {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}

/* ════════════════ 入口卡片 ════════════════ */

.sh-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}

.sh-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sh-card);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(138, 112, 64, 0.05), 0 10px 26px rgba(138, 112, 64, 0.09);
  border: 1.5px solid rgba(138, 112, 64, 0.10);
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.33,1,0.68,1),
              box-shadow 0.22s cubic-bezier(0.33,1,0.68,1);
}
.sh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(138, 112, 64, 0.06), 0 18px 40px rgba(138, 112, 64, 0.16);
}
.sh-card:active { transform: translateY(-1px); }

/* 插画牌 */
.sh-card-art {
  width: 104px;
  height: 104px;
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--sh-ring-soft);
}
.sh-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sh-card--aoshu .sh-card-art { background: var(--sh-blush); }
.sh-card--grading .sh-card-art { background: var(--sh-mint); }
.sh-card-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 46px;
  line-height: 1;
}

.sh-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sh-card-title {
  font-family: 'ZCOOL KuaiLe', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--sh-ink);
  margin: 0;
}
.sh-card-desc {
  color: var(--sh-text);
  font-size: 0.92rem;
  margin: 2px 0 0;
}
.sh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.sh-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sh-amber-deep);
  background: var(--sh-blush);
  padding: 3px 9px;
  border-radius: 999px;
}
.sh-card--grading .sh-tag { color: var(--sh-success); background: var(--sh-mint); }

/* 右箭头 */
.sh-card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sh-blush);
  color: var(--sh-amber-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s cubic-bezier(0.33,1,0.68,1),
              transform 0.22s cubic-bezier(0.33,1,0.68,1);
}
.sh-card:hover .sh-card-arrow {
  background: var(--sh-amber);
  color: #fff;
  transform: translateX(2px);
}
.sh-card-arrow svg { width: 20px; height: 20px; }

/* ════════════════ 响应式 ════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sh-mascot, .sh-bubble { animation: none !important; }
  .sh-card { transition: none !important; }
}

@media (max-width: 560px) {
  .sh-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .sh-title-cn { margin-left: 0; }
}

@media (max-width: 420px) {
  .sh-hero { padding: 18px 14px 16px 18px; gap: 12px; }
  .sh-card-art { width: 86px; height: 86px; border-radius: 18px; }
  .sh-card { gap: 12px; }
}

/* ════════════════ 错题本通用样式 ════════════════ */

/* modal 遮罩 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: var(--card);
  border-radius: 24px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-3);
  animation: modalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* number input 隐藏上下箭头 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ════════════════ 夜空深色主题 ════════════════ */
[data-theme="dark"] .sh-page {
  --sh-ink: #F5EAD3;
  --sh-text: #DCC9A2;
  --sh-sub: #B3A078;
  --sh-faint: #8A7A55;
  --sh-amber: #F0B04A;
  --sh-amber-soft: #F7C46E;
  --sh-amber-deep: #E8B95E;
  --sh-blush: rgba(232, 160, 32, 0.15);
  --sh-blush-deep: rgba(232, 160, 32, 0.28);
  --sh-cream: #2A2338;
  --sh-card: #2E2740;
  --sh-violet: #A88BFF;
  --sh-violet-soft: #9C7BFF;
  --sh-success: #86C88A;
  --sh-hero-a: #2A2438;
  --sh-hero-b: #241E30;
  --sh-mint: rgba(134, 200, 138, 0.15);
  --sh-ring: rgba(255, 255, 255, 0.16);
  --sh-ring-soft: rgba(255, 255, 255, 0.12);
}
/* ════════════════ 口算逐题模式（kq2：一题一大卡 + 数字键盘） ════════════════ */

.kq2-wrap { margin-bottom: 20px; }

.kq2-qcard {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 18px;
}
.kq2-charwrap {
  position: relative;
  flex-shrink: 0;
  width: clamp(96px, 24vw, 140px);
  display: flex;
  align-items: center;
}
.kq2-char {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid var(--amber-soft, #FDF1DC);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  display: block;
}
.kq2-charbubble {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--amber, #E8A020);
  color: #fff;
  font-family: 'ZCOOL KuaiLe', 'QTxiaotu', sans-serif;
  font-size: 0.85rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.kq2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.kq2-idx { color: var(--text-2, #77659C); font-size: 0.95rem; }
.kq2-idx b { color: var(--amber, #E8A020); font-size: 1.1rem; }
.kq2-expression {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kq2-expr {
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', sans-serif;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  font-weight: 800;
  color: var(--ink, #3D3026);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.kq2-eq { font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--text-3, #A99BC4); }
.kq2-answer {
  min-width: clamp(96px, 24vw, 150px);
  padding: 6px 14px;
  text-align: center;
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', sans-serif;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--amber, #E8A020);
  background: rgba(232, 160, 32, 0.10);
  border: 3px dashed var(--amber, #E8A020);
  border-radius: 16px;
  min-height: 1.3em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kq2-answer.ok { color: var(--success, #2E7D32); border-color: var(--success, #2E7D32); background: #E8F5E9; border-style: solid; }
.kq2-answer.bad { color: #C62828; border-color: #C62828; background: #FDECEA; border-style: solid; }

.kq2-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.kq2-dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; flex: 1; }
.kq2-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--card-border, rgba(200,175,225,0.5));
}
.kq2-dots i.filled { background: var(--amber, #E8A020); opacity: 0.45; }
.kq2-dots i.on {
  background: var(--amber, #E8A020);
  transform: scale(1.35);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.25);
}

.kq2-pad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.kq2-key {
  min-height: 54px;
  border-radius: 14px;
  border: 2px solid var(--card-border, rgba(220,200,235,0.45));
  background: var(--card, #fff);
  color: var(--ink, #3D3026);
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s var(--ease, ease), box-shadow 0.1s;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.kq2-key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }
.kq2-del { font-size: 1.05rem; color: #C62828; border-color: rgba(198, 40, 40, 0.35); }

/* 🍎 iPad 防误触（WebKit 真机 quirk，桌面无感）：
   1) 长按/双击答案与算式文本会弹出系统"拷贝·查询·分享"菜单 —— 菜单盖在页面上时，
      后续点按会先被系统菜单吃掉，表现成「输入了答案，点按钮没反应」；
   2) 没设 touch-action 的元素上快速连点会被判成双击缩放，那一击 click 不派发。 */
.kq2-answer, .kq2-expression, .kq2-qcard, .kq2-dots {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.kq2-dots i, .kq2-nav button, .kq2-startbtn { touch-action: manipulation; }

@media (max-width: 480px) {
  .kq2-qcard { flex-direction: column; align-items: center; text-align: center; }
  .kq2-charwrap { width: clamp(110px, 34vw, 150px); }
  .kq2-main { width: 100%; }
  .kq2-expression { justify-content: center; }
  .kq2-pad { grid-template-columns: repeat(5, 1fr); }
  .kq2-del { grid-column: span 1; }
}

/* ════════════ kq2 v3：角色举牌 + 题牌框体 + 两排圆点 + 两排键盘 ════════════ */

.kq2-qcard {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 18px 14px 18px 6px;
}
/* 角色徽章：统一圆角框 + 黄描边，风格/大小一致 */
.kq2-charwrap {
  position: relative;
  flex-shrink: 0;
  width: clamp(110px, 26vw, 150px);
  z-index: 2;
}
.kq2-charbadge {
  display: block;
  border-radius: 22px;
  border: 4px solid var(--amber, #E8A020);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transform: rotate(-2deg);
  background: var(--card, #fff);
}
.kq2-char {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.kq2-charbubble {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--amber, #E8A020);
  color: #fff;
  font-family: 'ZCOOL KuaiLe', 'QTxiaotu', sans-serif;
  font-size: 0.85rem;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  z-index: 3;
}
/* 举牌连接件：徽章 → 题牌 的小桥 */
.kq2-tail {
  position: absolute;
  right: -14px;
  top: 50%;
  width: 26px;
  height: 18px;
  transform: translateY(-50%) skewX(-12deg);
  background: var(--amber, #E8A020);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
/* 题牌框体：角色手里举着的板子 */
.kq2-frame {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--card, #fff);
  border: 3px solid var(--amber, #E8A020);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  margin-left: -4px;
}
.kq2-frame .kq2-idx { margin: 0; }
.kq2-frame .kq2-expression { margin: 0; }

/* 两排进度圆点：红=未做 绿=已答 黄=当前 */
.kq2-dots {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  margin: 16px 0;
}
.kq2-dotrow { display: flex; gap: 9px; justify-content: center; }
.kq2-dotrow i {
  width: 12px; height: 12px; border-radius: 50%;
  background: #FF6B7A;                     /* 红：未做 */
  cursor: pointer;
  transition: transform 0.15s var(--ease, ease), box-shadow 0.15s;
}
.kq2-dotrow i.ok { background: #2ED573; } /* 绿：已答 */
.kq2-dotrow i.on {
  background: #FFD100;                     /* 黄：当前 */
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.30);
}
.kq2-dotrow i:hover { transform: scale(1.25); }

/* 两排键盘：1-5 / 6-0+删除，等宽 6 列 */
.kq2-pad { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.kq2-padrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kq2-padfill { visibility: hidden; }

/* 倒计时黄卡标签（逐题模式） */
.kq2-timer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--amber, #E8A020);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  border-radius: 999px;
  padding: 8px 18px;
  border: 2.5px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-variant-numeric: tabular-nums;
}

/* ── 开始挑战卡里的「上次练习」记录条（只展示最近一次，不做历史列表） ── */
.kq2-lastrec {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--amber-soft, #FDF1DC);
  border: 2px dashed var(--amber, #E8A020);
  border-radius: 14px;
  padding: 8px 16px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.kq2-lastrec-tag {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: var(--amber, #E8A020);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.04em;
}
.kq2-lastrec-day { font-weight: 800; color: var(--ink); font-size: 0.95rem; }
.kq2-lastrec-acc { font-weight: 900; font-size: 1.25rem; }
.kq2-lastrec-meta { color: var(--text-2); font-size: 0.88rem; }
.kq2-lastrec-empty { color: var(--text-3); font-size: 0.9rem; }

/* ── 未开始时的「候场舞台」：蛋仔角色浮动 + 漂浮算术符号（纯 CSS 动效，无额外资源） ── */
.kq2-stage {
  position: relative;
  height: 214px;
  max-width: 470px;
  margin: 2px auto 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;          /* 纯装饰，别吃掉按钮/文字的点击 */
}
.kq2-stage-hero {
  position: relative;
  z-index: 3;
  width: 152px;
  height: 200px;
  border-radius: 24px;
  overflow: hidden;
  background: #FFF8EC;
  border: 3px solid var(--amber, #E8A020);
  box-shadow: 0 10px 22px rgba(120, 80, 20, 0.18);
  animation: kq2-hero-float 3.4s ease-in-out infinite;
}
.kq2-stage-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kq2-stage-ground {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 134px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(120, 80, 20, 0.22), rgba(120, 80, 20, 0) 72%);
  animation: kq2-ground-pulse 3.4s ease-in-out infinite;
}
.kq2-fl {
  position: absolute;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--amber, #E8A020);
  opacity: 0.45;
  user-select: none;
  animation: kq2-fl-float 5s ease-in-out infinite;
}
.kq2-fl.f1 { left: 6%;   top: 13%; font-size: 1.5rem; animation-duration: 4.6s; }
.kq2-fl.f2 { left: 13%;  top: 51%; font-size: 1.8rem; animation-duration: 5.4s; animation-delay: 0.5s; }
.kq2-fl.f3 { left: 3%;   top: 77%; font-size: 1.3rem; animation-duration: 6s;   animation-delay: 1.1s; }
.kq2-fl.f4 { right: 6%;  top: 11%; font-size: 1.6rem; animation-duration: 5s;   animation-delay: 0.3s; }
.kq2-fl.f5 { right: 14%; top: 49%; font-size: 1.9rem; animation-duration: 5.8s; animation-delay: 0.9s; }
.kq2-fl.f6 { right: 3%;  top: 79%; font-size: 1.2rem; animation-duration: 6.4s; animation-delay: 1.5s; }
.kq2-fl.f7 { left: 27%;  top: 5%;  font-size: 1.1rem; animation-duration: 5.2s; animation-delay: 1.8s; opacity: 0.3; }
.kq2-fl.f8 { right: 27%; top: 3%;  font-size: 1.1rem; animation-duration: 6.2s; animation-delay: 0.7s; opacity: 0.3; }
@keyframes kq2-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes kq2-ground-pulse {
  0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 0.9; }
  50%      { transform: translateX(-50%) scaleX(0.8); opacity: 0.5; }
}
@keyframes kq2-fl-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-12px) rotate(6deg); }
}

/* 标题 / 说明 / 按钮（原来写死在 JSX 内联样式里，挪进 CSS 媒体查询才能生效） */
.kq2-stage-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 1.3rem;
}
.kq2-stage-titleicon { color: var(--amber, #E8A020); line-height: 0; }
.kq2-stage-desc { color: var(--text-2, #77659C); margin: 0 0 6px; }
.kq2-stage-desc b { color: var(--amber, #E8A020); }
.kq2-stage-tips { color: var(--text-3, #A99BC4); font-size: 0.9rem; margin: 0 0 22px; }
.kq2-startbtn {
  min-width: 180px;
  min-height: 52px;
  font-size: 1.15rem;
  animation: kq2-btn-pulse 2.6s ease-in-out infinite;
}
@keyframes kq2-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 160, 32, 0.45); }
  50%      { box-shadow: 0 0 0 13px rgba(232, 160, 32, 0); }
}

@media (max-width: 640px) {
  .kq2-stage { height: 164px; }
  .kq2-stage-hero { width: 110px; height: 146px; border-radius: 18px; }
  .kq2-stage-ground { width: 96px; }
  .kq2-fl.f1, .kq2-fl.f4 { font-size: 1.2rem; }
  .kq2-fl.f2, .kq2-fl.f5 { font-size: 1.4rem; }
  .kq2-fl.f3, .kq2-fl.f6, .kq2-fl.f7, .kq2-fl.f8 { font-size: 1rem; }
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .kq2-stage-hero,
  .kq2-stage-ground,
  .kq2-fl,
  .kq2-startbtn { animation: none; }
}
/**
 * Swiper 14.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 26, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode {
  .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}
.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
}

.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
}



:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }

  ::slotted(svg),
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  ::slotted(.swiper-navigation-icon),
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}

:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  .swiper-scrollbar-disabled > &,
  &.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > &,
  &.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > &,
  &.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}


/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  > img,
  > svg,
  > canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}
/* Zoom container styles end */

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}


/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}




.swiper-thumbs {
  .swiper-slide-thumb-active {
    /* Styles for active thumb slide */
  }
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}


.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    pointer-events: auto;
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    .swiper-slide {
      pointer-events: none;
    }
  }
  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }

  .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;

    &:before {
      content: "";
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      filter: blur(50px);
    }
  }
}
.swiper-cube {
  .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
}
/* Cube slide shadows start */
.swiper-cube {
  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}
/* Cube slide shadows end */

.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}
/* Flip slide shadows start */
.swiper-flip {
  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}
/* Flip slide shadows end */

.swiper-coverflow {
}

.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
}

.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards {
  .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
}
/* ============================================================
   🎪 蛋仔派对数学 · 版式级皮肤主页（EggyHome）
   移植自 demo/math-homes/eggy/eggy-ticket.html（v6 定稿）
   类名全部 eg- 前缀（板块级皮肤，避免污染同板块其他页）
   交互：Swiper coverflow 卡墙（npm swiper）· Velocity（npm velocity-animate）
   题目：直接 import 本工程题库 src/shuxue/data/kousuan.json（4000 题）
   ============================================================ */

/* ── 门票 ── */
.eg-page {
  --eg-night1: #241033;
  --eg-night2: #3d1145;
  --eg-paper: #FFF6DC;
  --eg-yellow: #FFD100;
  --eg-red: #FF4757;
  --eg-green: #2ED573;
  --eg-ink: #2B2038;
  --eg-ink-soft: #6B5A75;

  position: relative;
  min-height: calc(100dvh - 64px);
  overflow-x: clip;
  color: #FFF6DC;
  font-family: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background:
    radial-gradient(3px 3px at 12% 20%, rgba(255, 209, 0, 0.35) 40%, transparent 41%),
    radial-gradient(2px 2px at 78% 12%, rgba(255, 255, 255, 0.28) 40%, transparent 41%),
    radial-gradient(3px 3px at 88% 62%, rgba(255, 71, 87, 0.30) 40%, transparent 41%),
    radial-gradient(2px 2px at 22% 76%, rgba(255, 255, 255, 0.22) 40%, transparent 41%),
    radial-gradient(3px 3px at 55% 8%,  rgba(255, 209, 0, 0.25) 40%, transparent 41%),
    linear-gradient(160deg, var(--eg-night1), var(--eg-night2));
}
.eg-stage { max-width: 1000px; margin: 0 auto; padding: clamp(14px, 3vh, 36px) 20px 50px; }

.eg-marquee { display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: clamp(0.78rem, 1.5vw, 0.92rem); letter-spacing: 0.26em; color: rgba(255, 246, 220, 0.75); }
.eg-marquee::before, .eg-marquee::after { content: ""; flex: 1; max-width: 150px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 220, 0.4)); }
.eg-marquee::after { transform: scaleX(-1); }

/* ── 门票 ── */
.eg-ticket { display: flex; margin: clamp(16px, 3vh, 32px) auto 0; width: min(920px, 100%);
  transform: rotate(-1.6deg); position: relative;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); }
.eg-tmain { flex: 1; background: var(--eg-paper); color: var(--eg-ink); border-radius: 18px 4px 4px 18px;
  padding: clamp(14px, 2.4vw, 26px) clamp(14px, 2.4vw, 30px); position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(43, 32, 56, 0.05) 1px, transparent 1.2px); background-size: 14px 14px; }
.eg-thead { display: flex; align-items: center; gap: 12px; }
.eg-thead .eg-logo { height: 40px; border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 4px 10px rgba(43, 32, 56, 0.25); }
.eg-thead h1 { font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.1; margin: 0; color: var(--eg-ink); }
.eg-thead .eg-sub { font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-size: 0.58rem; letter-spacing: 0.3em; color: var(--eg-ink-soft); margin-top: 3px; }
.eg-thead .eg-gateno { margin-left: auto; font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; border: 2px solid var(--eg-ink); border-radius: 6px;
  padding: 5px 9px; transform: rotate(2deg); background: var(--eg-yellow); white-space: nowrap; }

.eg-twindow { margin-top: 13px; border: 3px solid var(--eg-ink); border-radius: 10px; overflow: hidden;
  aspect-ratio: 1000 / 380; position: relative; background: #111; }
.eg-twindow img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-twindow .eg-filmtag { position: absolute; left: 10px; bottom: 10px; background: var(--eg-yellow); color: var(--eg-ink);
  font-size: 0.72rem; padding: 4px 12px; border-radius: 999px; transform: rotate(-1deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); letter-spacing: 0.1em; }
.eg-twindow .eg-lucky { position: absolute; right: 10px; top: 10px; background: var(--eg-red); color: #fff;
  font-size: 0.72rem; padding: 4px 12px; border-radius: 999px; transform: rotate(2deg); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }

.eg-tfoot { display: flex; align-items: flex-end; gap: 16px; margin-top: 13px; }
.eg-serial { font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem); letter-spacing: 0.08em; }
.eg-serial em { font-style: normal; color: #C2410C; }
.eg-serial-label { font-size: 0.62rem; color: var(--eg-ink-soft); letter-spacing: 0.22em; margin-top: 3px;
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; }
.eg-barcode { margin-left: auto; height: 38px; width: min(200px, 34%);
  background: repeating-linear-gradient(90deg, var(--eg-ink) 0 2px, transparent 2px 5px, var(--eg-ink) 5px 6px, transparent 6px 11px, var(--eg-ink) 11px 14px, transparent 14px 17px);
  border-radius: 2px; }

.eg-tstub { flex: none; width: clamp(130px, 18vw, 185px); background: var(--eg-yellow);
  border-radius: 4px 18px 18px 4px; color: var(--eg-ink); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 18px 10px; text-align: center; }
.eg-tstub::before { content: ""; position: absolute; left: -2px; top: 10px; bottom: 10px;
  border-left: 3px dashed rgba(43, 32, 56, 0.4); }
.eg-tstub .eg-mascot { width: 76px; height: 76px; border-radius: 20px;
  box-shadow: 0 6px 14px rgba(43, 32, 56, 0.3); transform: rotate(-3deg); }
.eg-tstub .eg-stubno { font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; }
.eg-tstub .eg-keep { font-size: 0.74rem; color: rgba(43, 32, 56, 0.65); letter-spacing: 0.24em; }
.eg-tstub .eg-admit { background: var(--eg-ink); color: var(--eg-yellow); border-radius: 999px; padding: 5px 14px; font-size: 0.76rem; letter-spacing: 0.2em; }

/* 敲章 */
.eg-stamp { position: absolute; top: 38%; left: 50%; z-index: 5; width: 180px; height: 180px;
  border-radius: 50%; border: 6px double var(--eg-red); color: var(--eg-red);
  display: grid; place-items: center; text-align: center; font-size: 1.45rem; letter-spacing: 0.2em;
  line-height: 1.5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 71, 87, 0.10) 55%, rgba(255, 71, 87, 0.02));
  text-shadow: 0 2px 0 rgba(255, 71, 87, 0.15); }
.eg-stamp small { display: block; font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-size: 0.6rem; letter-spacing: 0.3em; }

/* ── 七张角色票卡：Swiper coverflow 卡墙 ── */
.eg-rack { margin: clamp(18px, 3.5vh, 38px) auto 0; width: min(980px, 100%); overflow: hidden; padding: 10px 0 26px; }
.eg-rack .swiper { padding: 10px 0 24px; }
.eg-rack .swiper-slide { width: clamp(190px, 22vw, 245px); height: auto; }

.eg-gate { position: relative; aspect-ratio: 3 / 4.35; perspective: 1300px; cursor: pointer; outline: none; border-radius: 18px; }
.eg-gate:focus-visible { box-shadow: 0 0 0 3px var(--eg-yellow); }
.eg-gatein { position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.3, 1); }
.eg-gate.eg-flipped .eg-gatein { transform: rotateY(180deg); }
.eg-face { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; overflow: hidden; border: 4px solid #FFF9E8;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); }
.eg-face.eg-front { background: linear-gradient(180deg, #33255A, #1E1638); }
.eg-face.eg-front img.eg-char { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-gate .eg-chip { position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.22em; color: var(--eg-ink); background: var(--eg-yellow);
  border-radius: 999px; padding: 5px 13px; transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
.eg-gate .eg-name { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 3; text-align: center;
  font-size: clamp(1.25rem, 2.3vw, 1.5rem); letter-spacing: 0.14em; color: var(--eg-ink);
  background: var(--eg-yellow); border: 3px solid #FFF9E8; border-radius: 999px;
  padding: 7px 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }

/* 居中卡特效：边框流光（Magic UI BorderBeam 配方）+ 悬浮呼吸 */
@property --eg-beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.eg-gate.eg-center .eg-face.eg-front::before {
  content: ""; position: absolute; inset: -4px; z-index: 6; border-radius: 20px; padding: 3px;
  background: conic-gradient(from var(--eg-beam-angle),
    transparent 0deg, transparent 300deg, #FFD100 330deg, #FFF9E0 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: eg-beam-spin 2.8s linear infinite; pointer-events: none;
}
@keyframes eg-beam-spin { to { --eg-beam-angle: 360deg; } }
@keyframes eg-gate-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes eg-gate-shadow { 0%, 100% { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 30px 50px rgba(0, 0, 0, 0.62); } }
.eg-gate.eg-center .eg-face.eg-front {
  animation: eg-gate-float 3.2s ease-in-out infinite, eg-gate-shadow 3.2s ease-in-out infinite;
}

/* 背面：考题 */
.eg-face.eg-back { transform: rotateY(180deg); background: var(--eg-paper); color: var(--eg-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; gap: 9px; }
.eg-face.eg-back .eg-qlabel { font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-size: 0.58rem;
  letter-spacing: 0.3em; color: var(--eg-ink-soft); }
.eg-face.eg-back .eg-q { font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); letter-spacing: 0.05em; }
.eg-face.eg-back .eg-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 225px; }
.eg-face.eg-back .eg-ans button {
  font-family: 'Space Grotesk', 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.02rem;
  color: var(--eg-ink); background: transparent; border: 2.5px solid var(--eg-ink); border-radius: 9px;
  padding: 8px 0; cursor: pointer; transition: transform 0.12s, background 0.12s; }
.eg-face.eg-back .eg-ans button:hover { transform: translateY(-2px); background: rgba(43, 32, 56, 0.07); }
.eg-face.eg-back .eg-ans button.eg-right { background: var(--eg-green); border-color: transparent; color: #fff; }
.eg-face.eg-back .eg-ans button.eg-wrong { background: var(--eg-red); border-color: transparent; color: #fff; }
.eg-face.eg-back .eg-hint { font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-size: 0.62rem;
  color: var(--eg-ink-soft); letter-spacing: 0.18em; }

/* 撕副券 */
.eg-torn { position: fixed; z-index: 90; pointer-events: none; width: clamp(130px, 18vw, 185px); height: 160px;
  border-radius: 4px 18px 18px 4px; background: var(--eg-yellow); display: grid; place-items: center;
  color: var(--eg-ink); font-size: 0.82rem; letter-spacing: 0.3em; }

/* 建设中提示 */
.eg-note { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 90;
  background: var(--eg-paper); color: var(--eg-ink); border-radius: 999px; padding: 12px 26px;
  font-size: 0.95rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); letter-spacing: 0.1em; }

footer.eg-footer { margin-top: 34px; text-align: center; font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  font-size: 0.7rem; color: rgba(255, 246, 220, 0.5); line-height: 1.9; }
footer.eg-footer a { color: rgba(255, 246, 220, 0.8); }

@media (prefers-reduced-motion: reduce) {
  .eg-gate.eg-center .eg-face.eg-front { animation: none; }
  .eg-gate.eg-center .eg-face.eg-front::before { animation: none;
    background: conic-gradient(from 40deg, transparent 0 300deg, #FFD100 330deg, #FFF9E0 352deg, transparent 360deg); }
}
@media (max-width: 760px) {
  .eg-ticket { flex-direction: column; transform: rotate(0); }
  .eg-tmain { border-radius: 18px 18px 4px 4px; }
  .eg-tstub { width: auto; border-radius: 4px 4px 18px 18px; flex-direction: row; justify-content: center; padding: 10px; }
  .eg-tstub::before { left: 10px; right: 10px; top: -2px; bottom: auto;
    border-left: none; border-top: 3px dashed rgba(43, 32, 56, 0.4); }
  .eg-rack .swiper-slide { width: clamp(160px, 46vw, 210px); }
  .eg-barcode { width: 30%; }
}
/* 口算数据统计页 — 沿用数学板块（蛋仔）主题变量，只加图表与表格的版式 */
.kqs-modes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.kqs-mode {
  min-width: 60px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--card-border, #EADFC8);
  background: var(--card, #fff);
  color: var(--text-2, #8A8A8A);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.kqs-mode:hover { transform: translateY(-1px); }
.kqs-mode.on {
  background: var(--amber, #E8A020);
  border-color: var(--amber, #E8A020);
  color: #fff;
  box-shadow: 0 6px 16px rgba(232, 160, 32, .32);
}
.kqs-modes-hint { color: var(--text-3, #A9A29A); font-size: .86rem; margin-left: 4px; }

/* 汇总 KPI 卡 */
.kqs-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.kqs-kpi {
  background: var(--card, #fff);
  border: 1.5px solid var(--card-border, #EADFC8);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
}
.kqs-kpi-v {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink, #2B2B2B);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.kqs-kpi-l { color: var(--text-2, #8A8A8A); font-size: .84rem; margin-top: 2px; }
.kqs-kpi-s { color: var(--text-3, #A9A29A); font-size: .76rem; margin-top: 2px; }
.kqs-kpi.is-ok .kqs-kpi-v { color: #2ED573; }
.kqs-kpi.is-warn .kqs-kpi-v { color: #E8A020; }
.kqs-kpi.is-bad .kqs-kpi-v { color: #C62828; }

/* 图表卡 */
.kqs-card { padding: 16px 16px 10px; margin-bottom: 18px; }
.kqs-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.kqs-title { margin: 0; font-size: 1.1rem; color: var(--ink, #2B2B2B); }
.kqs-sub { color: var(--text-3, #A9A29A); font-size: .84rem; }
.kqs-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* SVG 元素配色（内联 class，故可用 var） */
.kqs-grid { stroke: var(--card-border, #EADFC8); stroke-width: 1; }
.kqs-axis { fill: var(--text-3, #A9A29A); font-size: 12px; font-variant-numeric: tabular-nums; }
.kqs-bar { fill: var(--amber, #E8A020); opacity: .85; }
.kqs-bar-g:hover .kqs-bar { opacity: 1; }
.kqs-line { fill: none; stroke: #2ED573; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.kqs-area { fill: #2ED573; opacity: .13; }
.kqs-dot { fill: #fff; stroke: #E8A020; stroke-width: 3; }
.kqs-dot.ok { stroke: #2ED573; }
.kqs-val { fill: var(--text-2, #8A8A8A); font-size: 11px; font-weight: 700; }
.kqs-ref { stroke: #C62828; stroke-width: 2; stroke-dasharray: 6 5; opacity: .55; }
.kqs-ref-label { fill: #C62828; font-size: 11px; font-weight: 700; opacity: .8; }

/* 明细表 */
.kqs-table { margin-top: 6px; }
.kqs-tr {
  display: grid;
  grid-template-columns: 1.3fr .8fr 1.1fr 1.1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px dashed var(--card-border, #EADFC8);
  font-size: .92rem;
  color: var(--ink, #2B2B2B);
  font-variant-numeric: tabular-nums;
}
.kqs-tr:last-child { border-bottom: none; }
.kqs-th { color: var(--text-3, #A9A29A); font-size: .8rem; font-weight: 700; }
.kqs-td-key { font-weight: 800; }
.kqs-ok { color: #2ED573; font-weight: 800; }
.kqs-warn { color: #E8A020; font-weight: 800; }
.kqs-bad { color: #C62828; font-weight: 800; }
.kqs-foot { color: var(--text-2, #8A8A8A); font-size: .9rem; text-align: center; padding: 4px 0 8px; }

@media (max-width: 640px) {
  .kqs-kpis { grid-template-columns: repeat(2, 1fr); }
  .kqs-tr { grid-template-columns: 1.1fr .7fr 1fr 1fr; font-size: .86rem; }
  .kqs-mode { min-width: 54px; min-height: 40px; padding: 0 12px; }
  .kqs-modes-hint { width: 100%; margin-left: 0; }
}

/* 空状态图标 */
.kqs-emptyicon { color: var(--amber, #E8A020); line-height: 0; margin-bottom: 10px; }

/* 剔除异常数据（正确率 < 50%）时的说明条 */
.kqs-clean {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-3, #A9A29A);
}
.kqs-clean b { color: var(--text-2, #C9C2B8); font-weight: 800; }
/* 生活数学 · 蛋仔时间规划师（糖果蛋仔风） */
.lmt-page{
  --lmt-yellow:#ffd100; --lmt-yellow-deep:#f5b800; --lmt-red:#ff4757; --lmt-green:#2ed573;
  --lmt-ink:#3d1145; --lmt-cream:#fff9e8;
  position:relative;min-height:100vh;color:var(--lmt-ink);overflow-x:hidden;
  font-family:"Baloo 2","ZCOOL KuaiLe","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,209,0,.22) 0 110px, transparent 120px),
    radial-gradient(circle at 88% 16%, rgba(255,143,177,.25) 0 90px, transparent 100px),
    radial-gradient(circle at 80% 85%, rgba(79,168,245,.18) 0 130px, transparent 140px),
    linear-gradient(160deg,#ffeef5 0%, #fff9e8 45%, #e9f6ff 100%);
}
.lmt-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lmt-stars i{position:absolute;display:block;animation:lmt-float 5s ease-in-out infinite;opacity:.75}
@keyframes lmt-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(20deg)}}
.lmt-spark{position:absolute;pointer-events:none;z-index:5;font-size:18px;animation:lmt-spark 1s ease-out forwards}
@keyframes lmt-spark{0%{opacity:1;transform:translateY(0) scale(.5) rotate(0)}
  100%{opacity:0;transform:translateY(-70px) scale(1.4) rotate(120deg)}}

.lmt-head{position:relative;text-align:center;padding:1.6rem 1rem .6rem}
.lmt-head h1{font-size:2.3rem;letter-spacing:.06em;color:var(--lmt-ink);
  text-shadow:0 3px 0 var(--lmt-yellow),0 6px 18px rgba(61,17,69,.2)}
.lmt-head h1 img{width:60px;vertical-align:-16px;border-radius:16px;
  box-shadow:0 6px 14px rgba(61,17,69,.25);animation:lmt-bob 3s ease-in-out infinite}
@keyframes lmt-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.lmt-head p{color:#a4526b;margin-top:.4rem;font-size:1.05rem}
.lmt-back{position:absolute;left:1.2rem;top:1.6rem;color:#fff;text-decoration:none;font-weight:700;
  background:linear-gradient(135deg,#ff8fb1,#ff4757);border-radius:999px;padding:.4rem 1rem;
  box-shadow:0 4px 0 #d63846;transition:transform .15s}
.lmt-back:hover{transform:translateY(-3px)}

.lmt-layout{position:relative;max-width:1180px;margin:0 auto;padding:1rem 1.4rem 3.5rem;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.6rem;align-items:start}
@media (max-width:900px){.lmt-layout{grid-template-columns:1fr}}

.lmt-clock-card{position:relative;background:rgba(255,255,255,.75);border:4px solid var(--lmt-yellow);
  border-radius:30px;padding:1.4rem;box-shadow:0 14px 40px rgba(61,17,69,.18)}
.lmt-stamp{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:2;
  background:linear-gradient(135deg,#ff8fb1,#ff4757);color:#fff;padding:.3rem 1.3rem;border-radius:999px;font-weight:800;
  box-shadow:0 4px 0 #d63846;white-space:nowrap}
.lmt-clock{width:100%;display:block;filter:drop-shadow(0 10px 24px rgba(61,17,69,.22))}
.lmt-finish{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:.9rem;flex-wrap:wrap;text-align:center;
  background:linear-gradient(90deg,#ffd100,#ffb63f);color:var(--lmt-ink);border-radius:18px;padding:.7rem 1rem;
  box-shadow:0 5px 0 #dfa400;font-weight:800}
.lmt-big{font-size:2rem;font-weight:800;letter-spacing:.04em}
.lmt-pill{background:rgba(61,17,69,.18);border-radius:999px;padding:.15rem .8rem;font-size:.95rem}

.lmt-panel{background:rgba(255,255,255,.75);border:4px solid rgba(255,209,0,.9);
  border-radius:30px;padding:1.3rem;box-shadow:0 14px 40px rgba(61,17,69,.18)}
.lmt-panel h2{font-size:1.3rem;color:var(--lmt-ink);margin-bottom:.9rem}
.lmt-panel h2 small{display:block;font-size:.78rem;color:#b06a80;font-weight:400;margin-top:.15rem}
.lmt-count{font-size:.85rem;color:#e2597a}
.lmt-mt{margin-top:1.4rem}
.lmt-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.lmt-act-wrap{position:relative}
.lmt-act{width:100%;border:none;cursor:pointer;border-radius:18px;padding:.75rem .8rem;text-align:left;
  color:#4a2c00;font-family:inherit;font-weight:700;font-size:1.02rem;line-height:1.25;position:relative;
  box-shadow:0 4px 0 rgba(61,17,69,.22);transition:transform .15s,box-shadow .15s}
.lmt-act:hover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 8px 0 rgba(61,17,69,.22)}
.lmt-act:active{transform:translateY(0)}
.lmt-em{font-size:1.5rem;display:block;margin-bottom:.15rem}
.lmt-min{font-weight:800;opacity:.75;font-size:.85rem}
.lmt-dot{position:absolute;top:.5rem;right:.6rem;width:14px;height:14px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.9)}
.lmt-tools{position:absolute;top:-8px;right:-6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.lmt-act-wrap:hover .lmt-tools{opacity:1}
.lmt-tools button{border:2px solid #fff;border-radius:10px;background:var(--lmt-ink);color:#fff;
  width:28px;height:28px;cursor:pointer;font-size:.8rem;line-height:1;box-shadow:0 2px 6px rgba(61,17,69,.3)}
.lmt-tools button:hover{background:var(--lmt-red)}
/* 编辑态卡片 */
.lmt-editing{display:flex;flex-direction:column;gap:.4rem;cursor:default}
.lmt-editing:hover{transform:none}
.lmt-page .lmt-addrow input:focus,.lmt-page .lmt-editing input:focus{border-color:var(--lmt-yellow);box-shadow:none}
.lmt-e-em{flex:0 0 2.4rem;text-align:center}
.lmt-e-min{flex:0 0 auto}
.lmt-e-btns{display:flex;gap:.4rem}
.lmt-e-btns button{flex:1;border:none;border-radius:10px;padding:.35rem;font-family:inherit;font-weight:800;
  cursor:pointer;background:var(--lmt-ink);color:#fff}
.lmt-e-btns button:last-child{background:rgba(61,17,69,.35)}

.lmt-addrow{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.lmt-page input:not([type="checkbox"]):not([type="radio"]):not(.lmt-e-em){
  border:2px solid rgba(61,17,69,.18);border-radius:12px;padding:.6rem .8rem;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--lmt-ink);outline:none;
  box-shadow:none}
.lmt-page .lmt-addrow input:not([type="checkbox"]):not([type="radio"]){
  flex:1;min-width:110px;background:#fff;color:var(--lmt-ink)}
.lmt-page .lmt-addrow input.lmt-min-in{flex:0 0 90px}
.lmt-addrow button{border:none;background:linear-gradient(135deg,#ffd100,#ffb63f);color:var(--lmt-ink);
  font-family:inherit;font-weight:800;border-radius:12px;padding:.6rem 1.1rem;cursor:pointer;
  box-shadow:0 4px 0 #dfa400;transition:transform .15s}
.lmt-addrow button:hover{transform:translateY(-3px)}
.lmt-addrow button:active{transform:translateY(0);box-shadow:0 1px 0 #dfa400}

.lmt-plan{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:0}
.lmt-plan li{display:flex;align-items:center;gap:.45rem;background:#fff;border:2px solid rgba(61,17,69,.1);
  border-radius:14px;padding:.5rem .7rem;animation:lmt-popin .3s ease}
@keyframes lmt-popin{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.lmt-plan li.lmt-role-head{border-color:var(--lmt-yellow);background:linear-gradient(90deg,#fffbe8,#fff)}
.lmt-plan li.lmt-role-tail{border-color:#c9b7f5;background:linear-gradient(90deg,#f6f1ff,#fff)}
.lmt-sw{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 2px rgba(61,17,69,.15)}
.lmt-nm{flex:1;font-weight:700}
.lmt-tm{font-size:.9rem;color:#b06a80;white-space:nowrap}
.lmt-plan button{border:none;background:rgba(61,17,69,.08);color:var(--lmt-ink);width:26px;height:26px;border-radius:8px;
  cursor:pointer;font-size:.85rem;line-height:1;flex:none;transition:background .15s}
.lmt-plan button:hover:not(:disabled){background:rgba(61,17,69,.2)}
.lmt-plan button:disabled{opacity:.3;cursor:not-allowed}
.lmt-plan button.on{background:var(--lmt-yellow);box-shadow:0 0 0 2px var(--lmt-ink) inset}
.lmt-plan .lmt-del:hover{background:var(--lmt-red);color:#fff}
.lmt-empty{color:#b06a80;text-align:center;padding:1.2rem;font-size:.95rem;list-style:none}
.lmt-clearbar{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;gap:.6rem;flex-wrap:wrap}
.lmt-hint{color:#b06a80;font-size:.85rem}
.lmt-clearbar button{border:none;background:rgba(61,17,69,.1);color:var(--lmt-ink);border-radius:12px;
  padding:.45rem .9rem;font-family:inherit;cursor:pointer;font-weight:700}
.lmt-clearbar button:hover{background:var(--lmt-red);color:#fff}

/* ── 盘面选择 ── */
.lmt-dials{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;justify-content:center}
.lmt-dial{display:inline-flex;align-items:center;gap:.35rem;border:2px solid rgba(61,17,69,.15);
  background:#fff;border-radius:999px;padding:.3rem .8rem .3rem .45rem;font-family:inherit;font-weight:700;
  font-size:.9rem;color:var(--lmt-ink);cursor:pointer;transition:transform .15s,border-color .15s}
.lmt-dial:hover{transform:translateY(-2px)}
.lmt-dial.on{border-color:var(--lmt-yellow);background:#fffbe8;box-shadow:0 0 0 2px var(--lmt-yellow)}
.lmt-dial-face{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid #ddd}

/* ── 队首任务倒计时条 ── */
.lmt-run{display:flex;align-items:center;gap:.8rem;margin-top:.8rem;background:#fff;
  border:3px solid var(--lmt-yellow);border-radius:18px;padding:.6rem 1rem;flex-wrap:wrap;justify-content:center}
.lmt-run-time{font-size:1.7rem;font-weight:800;color:var(--lmt-red);font-variant-numeric:tabular-nums;min-width:5.2rem;text-align:center}
.lmt-run-name{font-weight:700;color:var(--lmt-ink);flex:1;text-align:center}
.lmt-run-go{border:none;border-radius:12px;padding:.55rem 1.2rem;font-family:inherit;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,#2ed573,#1fa65b);color:#fff;box-shadow:0 4px 0 #157a41;transition:transform .15s}
.lmt-run-go:hover:not(:disabled){transform:translateY(-3px)}
.lmt-run-go:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.lmt-run-stop{border:none;border-radius:12px;padding:.55rem 1rem;font-family:inherit;font-weight:800;cursor:pointer;
  background:rgba(61,17,69,.12);color:var(--lmt-ink)}
.lmt-run-stop:hover{background:var(--lmt-red);color:#fff}

/* ── 完成弹窗 ── */
.lmt-modal-mask{position:fixed;inset:0;z-index:50;background:rgba(43,29,69,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;animation:lmt-popin .25s ease}
.lmt-modal{background:#fff;border:5px solid var(--lmt-yellow);border-radius:28px;padding:2rem 2.4rem;
  text-align:center;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lmt-modal img{width:96px;border-radius:24px;box-shadow:0 8px 20px rgba(61,17,69,.25)}
.lmt-modal h3{font-size:1.8rem;color:var(--lmt-ink);margin:.6rem 0 .3rem}
.lmt-modal p{color:#a4526b;font-weight:700;margin-bottom:1.2rem}
.lmt-modal button{border:none;border-radius:999px;padding:.7rem 2rem;font-family:inherit;font-weight:800;font-size:1.1rem;
  cursor:pointer;background:linear-gradient(135deg,#ffd100,#ffb63f);color:var(--lmt-ink);box-shadow:0 5px 0 #dfa400}
.lmt-modal button:hover{transform:translateY(-2px)}

/* ── 我的计划独占整宽 ── */
.lmt-plan-panel{max-width:1180px;margin:.2rem auto 3.5rem;width:calc(100% - 2.8rem)}
.lmt-plan-panel .lmt-plan li{padding:.6rem .9rem}
/* ============================================================
   数学小游戏共享样式（琥珀金 · 明亮绘本风）
   gm- 前缀 = game module。HUD / 卡牌翻转 / 陨石 / 弹窗
   ============================================================ */

.gm-page {
  --gm-amber: #E8A020;
  --gm-amber-deep: #C08A1E;
  --gm-ink: #3D2B0A;
  --gm-text: #5C4418;
  --gm-sub: #8A7040;
  --gm-blush: #FDF1DC;
  --gm-blush-deep: #F0D4A0;
  --gm-card: #FFFFFF;
  --gm-good: #2E7D32;
  --gm-bad: #C62828;
  --gm-sky-top: #BFE3FF;
  --gm-sky-mid: #E3F2FF;
  --gm-grass: #A8D08D;

  position: relative;
}

/* ── HUD 顶栏 ── */
.gm-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--gm-card);
  border: 1.5px solid var(--gm-blush-deep);
  border-radius: 18px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(138, 112, 64, 0.08);
}
.gm-hud-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  color: var(--gm-ink);
  background: var(--gm-blush);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.95rem;
  white-space: nowrap;
}
.gm-hud-item svg { width: 16px; height: 16px; }
.gm-hud-spacer { flex: 1; }
.gm-paw { color: var(--gm-amber); }
.gm-paw.lost { color: #D8CBAE; }

/* ── 通用按钮（≥48px 触控） ── */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border: none;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  background: var(--gm-amber);
  color: #fff;
  box-shadow: 0 4px 0 var(--gm-amber-deep), 0 8px 18px rgba(232, 160, 32, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gm-btn:hover { transform: translateY(-2px); }
.gm-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gm-amber-deep); }
.gm-btn--ghost {
  background: var(--gm-card);
  color: var(--gm-amber-deep);
  border: 2px solid var(--gm-blush-deep);
  box-shadow: 0 3px 0 var(--gm-blush-deep);
}
.gm-btn--big { font-size: 1.2rem; padding: 14px 34px; border-radius: 20px; }

/* ── 开始/结束遮罩弹窗 ── */
.gm-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(61, 43, 10, 0.35);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 26px;
}
.gm-overlay-panel {
  background: var(--gm-card);
  border-radius: 26px;
  padding: 30px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(61, 43, 10, 0.3);
  animation: gmPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gmPop {
  from { opacity: 0; transform: scale(0.85) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.gm-overlay-title {
  font-family: 'ZCOOL KuaiLe', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1.7rem;
  color: var(--gm-ink);
  margin: 0 0 8px;
}
.gm-overlay-sub { color: var(--gm-sub); margin: 0 0 20px; line-height: 1.6; }
.gm-stars { font-size: 2.2rem; letter-spacing: 6px; color: var(--gm-amber); margin-bottom: 10px; }
.gm-stars .dim { color: #E2D8C2; }

/* ── 抢10：卡牌 ── */
.gm-mt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 380px;      /* 限制牌桌宽度，避免桌面端卡牌过大 */
  margin: 0 auto;
}
@media (max-width: 560px) {
  .gm-mt-grid { max-width: 320px; gap: 7px; }
}
.gm-cardbox {
  position: relative;
  aspect-ratio: 1 / 1.1;
  perspective: 600px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  min-height: 48px;
}
.gm-cardface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  backface-visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}
.gm-cardface--back {
  background: linear-gradient(150deg, #F7B84B, var(--gm-amber));
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(232, 160, 32, 0.35);
  border: 2.5px solid rgba(255, 255, 255, 0.55);
}
.gm-cardface--back::after {
  content: "?";
  font-size: 1.3rem;
}
.gm-cardface--front {
  background: var(--gm-card);
  color: var(--gm-ink);
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  border: 2.5px solid var(--gm-blush-deep);
  transform: rotateY(180deg);
  box-shadow: 0 3px 8px rgba(138, 112, 64, 0.15);
}
.gm-cardbox.open .gm-cardface--back { transform: rotateY(180deg); }
.gm-cardbox.open .gm-cardface--front { transform: rotateY(0deg); }
.gm-cardbox.done { pointer-events: none; }
.gm-cardbox.done .gm-cardface--front {
  border-color: var(--gm-good);
  color: var(--gm-good);
  background: #EFF9F0;
  animation: gmBounce 0.4s ease;
}
@keyframes gmBounce {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(0deg) scale(1.12); }
  100% { transform: rotateY(0deg) scale(1); }
}
.gm-cardbox.shake .gm-cardface--front { animation: gmShake 0.4s ease; }
@keyframes gmShake {
  0%, 100% { transform: rotateY(0deg) translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ── 口诀闯关：题面与选项 ── */
.gm-q-panel {
  background: var(--gm-card);
  border: 2px solid var(--gm-blush-deep);
  border-radius: 26px;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(138, 112, 64, 0.10);
}
.gm-q-main {
  font-family: 'ZCOOL KuaiLe', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  color: var(--gm-ink);
  line-height: 1.2;
  margin: 0;
}
.gm-q-main .hole {
  display: inline-block;
  min-width: 1.4em;
  border-bottom: 4px solid var(--gm-amber);
  color: var(--gm-amber);
}
.gm-q-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.gm-q-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #EFE5CE;
}
.gm-q-dot.ok { background: var(--gm-good); }
.gm-q-dot.no { background: var(--gm-bad); }
.gm-q-dot.cur { background: var(--gm-amber); }
.gm-opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gm-opt {
  min-height: 64px;
  border-radius: 18px;
  border: 2.5px solid var(--gm-blush-deep);
  background: var(--gm-card);
  color: var(--gm-ink);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.gm-opt:hover { transform: translateY(-2px); border-color: var(--gm-amber); }
.gm-opt.good { background: #EFF9F0; border-color: var(--gm-good); color: var(--gm-good); }
.gm-opt.bad { background: #FDECEA; border-color: var(--gm-bad); color: var(--gm-bad); animation: gmShake 0.4s ease; }
.gm-opt:disabled { cursor: default; }

/* ── 陨石口算 ── */
.gm-field {
  position: relative;
  height: clamp(380px, 62vh, 560px);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--gm-sky-top) 0%, var(--gm-sky-mid) 70%, #F3FBFF 100%);
  border: 2px solid #CFE8FA;
  box-shadow: inset 0 -40px 60px rgba(168, 208, 141, 0.25);
}
.gm-cloud {
  position: absolute;
  width: 90px;
  height: 30px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  opacity: 0.8;
}
.gm-cloud::before, .gm-cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.gm-cloud::before { width: 40px; height: 40px; top: -18px; left: 14px; }
.gm-cloud::after { width: 30px; height: 30px; top: -12px; right: 18px; }
.gm-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12%;
  background: var(--gm-grass);
  border-top: 4px solid #8FBF72;
}
.gm-meteor {
  position: absolute;
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, #FFD98A, var(--gm-amber));
  color: #5C3A00;
  font-weight: 800;
  font-size: 1.25rem;
  padding: 12px 18px;
  border-radius: 18px 18px 20px 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 16px rgba(232, 160, 32, 0.4);
  white-space: nowrap;
  z-index: 5;
  animation: gmFlicker 1.1s ease-in-out infinite;
}
@keyframes gmFlicker {
  0%, 100% { box-shadow: 0 6px 16px rgba(232, 160, 32, 0.4); }
  50% { box-shadow: 0 6px 26px rgba(255, 170, 40, 0.75); }
}
.gm-boom {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE9A8 0%, #FFB13D 55%, transparent 72%);
  animation: gmBoom 0.45s ease-out forwards;
  pointer-events: none;
  z-index: 6;
}
@keyframes gmBoom {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
.gm-crash {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--gm-bad);
  font-weight: 800;
  font-size: 1.2rem;
  animation: gmRise 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 6;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 10px;
  border-radius: 12px;
}
@keyframes gmRise {
  from { opacity: 1; margin-top: 0; }
  to   { opacity: 0; margin-top: -50px; }
}
.gm-input-bar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.gm-input-bar input {
  flex: 1;
  min-height: 56px;
  border: 3px solid var(--gm-blush-deep);
  border-radius: 18px;
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  color: var(--gm-ink);
  outline: none;
  background: var(--gm-card);
  appearance: textfield;
  -moz-appearance: textfield;
}
.gm-input-bar input:focus { border-color: var(--gm-amber); }
.gm-input-bar input.shake { animation: gmShake 0.35s ease; border-color: var(--gm-bad); }
.gm-input-bar input::-webkit-outer-spin-button,
.gm-input-bar input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gm-combo {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 8;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gm-amber-deep);
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(61, 43, 10, 0.12);
}

/* ── 模式选择（抢10 / 口诀关卡选择） ── */
.gm-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .gm-modes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.gm-mode {
  min-height: 52px;
  border-radius: 16px;
  border: 2px solid var(--gm-blush-deep);
  background: var(--gm-card);
  color: var(--gm-text);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.gm-mode.active {
  background: var(--gm-amber);
  border-color: var(--gm-amber-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(232, 160, 32, 0.35);
}
.gm-mode:disabled { opacity: 0.55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .gm-meteor, .gm-boom, .gm-crash, .gm-overlay-panel, .gm-cardface { animation: none !important; transition: none !important; }
}
/* ============================================================
   打卡页 · 口算练习 + 积分提示
   ============================================================ */

/* ── 口算练习 ── */
.quiz-box {
  background: var(--violet-50);
  border: 1px dashed var(--violet-300);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 10px;
  animation: quizIn 0.3s var(--ease);
}
@keyframes quizIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.quiz-result {
  font-size: var(--fs-sm);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.quiz-result.pass { background: var(--violet-100); color: var(--violet-600); }
.quiz-result.fail { background: var(--pink-100); color: #b0245a; }

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.quiz-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1.5px solid var(--violet-200);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quiz-item.right { border-color: var(--violet-400); background: var(--violet-50); }
.quiz-item.wrong { border-color: var(--pink-300); background: var(--pink-100); }
.quiz-item .quiz-q { font-weight: 700; color: var(--ink); white-space: nowrap; }
.quiz-item .quiz-input {
  width: 64px;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--card-solid);
  border: 1.5px solid var(--violet-200);
  border-radius: 8px;
  padding: 4px 6px;
  outline: none;
}
.quiz-item .quiz-input:focus { border-color: var(--violet-500); }
.quiz-item .quiz-input:disabled { opacity: 0.7; }
.quiz-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.quiz-item.right svg { color: var(--violet-500); }
.quiz-item.wrong svg { color: var(--pink-500); }

@media (max-width: 640px) {
  .quiz-grid { grid-template-columns: 1fr; }
}

/* ── 积分提示（任务卡 +1 分 / 今日已得） ── */
.points-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}
.points-chip svg { width: 12px; height: 12px; }
.today-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--amber);
  font-size: var(--fs-sm);
}
.today-points svg { width: 16px; height: 16px; }

/* ── 个人资料：积分卡片 ── */
.points-card {
  width: 100%;
  background: linear-gradient(140deg, var(--violet-50), var(--amber-soft));
  border: 1px solid rgba(232, 160, 32, 0.35);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.points-coin {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--amber-2), var(--amber));
  color: #fff;
  box-shadow: 0 4px 14px rgba(232, 160, 32, 0.35);
}
.points-coin svg { width: 28px; height: 28px; }
.points-balance { font-size: 1.7rem; font-weight: 900; color: var(--ink); line-height: 1.1; }
.points-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 700; }

.points-log {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.points-log li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px dashed var(--violet-100);
  font-size: var(--fs-sm);
}
.points-log li:last-child { border-bottom: none; }
.points-log .pl-date { color: var(--text-3); font-size: var(--fs-xs); width: 74px; flex-shrink: 0; }
.points-log .pl-reason { flex: 1; color: var(--text); min-width: 0; }
.points-log .pl-delta { font-weight: 800; color: var(--amber); white-space: nowrap; }
.points-log .pl-delta.plus::before { content: '+'; }

/* ── 今日进度卡 · 已完成/进行中任务列表 ── */
.goal-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.goal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.6);
}
.goal-item.done { background: var(--violet-50); }
.goal-check {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--violet-200);
  color: #fff;
  background: var(--card-solid);
}
.goal-item.done .goal-check {
  background: linear-gradient(140deg, var(--pink-500), var(--pink-600));
  border-color: transparent;
}
.goal-check svg { width: 12px; height: 12px; }
.goal-label { font-weight: 800; color: var(--ink); }
.goal-item:not(.done) .goal-label { color: var(--text-2); }
.goal-note { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }

/* ── 打卡页顶部两栏：今日进度卡（左，窄一点） + 家长公告牌（右） ── */
.checkin-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
/* 卡变窄了，左右内边距稍微收一点，内容不至于挤 */
.checkin-top > .card { padding: 20px 18px; }
.checkin-top .goal-note { text-align: right; }

@media (max-width: 860px) {
  .checkin-top { grid-template-columns: 1fr; }
}

/* ── 📌 家长公告牌 ── */
.notice-board {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(150deg, var(--amber-soft), var(--card-solid) 58%);
  border-color: rgba(232, 160, 32, 0.32);
}
.notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.notice-pin {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--amber-2), var(--amber));
  color: #fff;
  box-shadow: 0 3px 10px rgba(232, 160, 32, 0.3);
}
.notice-pin svg { width: 16px; height: 16px; }
.notice-title { color: var(--ink); font-weight: 900; }
.notice-time {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
}
.notice-body {
  margin-top: 10px;
  flex: 1;
  min-height: 0;
  max-height: 420px;
  overflow-y: auto;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}
.notice-body .notice-p { margin: 0; }
.notice-h {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--ink);
}
.notice-li {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 0;
}
.notice-li > span:last-child { flex: 1; min-width: 0; }
.notice-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
  background: var(--amber);
}
.notice-quote {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(232, 160, 32, 0.1);
  font-weight: 700;
}
.notice-hr {
  border: none;
  border-top: 1px dashed rgba(232, 160, 32, 0.45);
  margin: 8px 0;
}
.notice-empty {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

@media (max-width: 860px) {
  .notice-body { max-height: 300px; }
}
[data-theme="dark"] .notice-board { border-color: rgba(240, 176, 74, 0.35); }
[data-theme="dark"] .notice-quote { background: rgba(240, 176, 74, 0.14); }
[data-theme="dark"] .notice-hr { border-top-color: rgba(240, 176, 74, 0.4); }

/* ── 牛听听听力时长 · 点状图 ── */
.listening-chart {
  position: relative;
  width: 100%;
  overflow: visible;
}
.listening-chart svg { width: 100%; height: auto; display: block; }
.listening-dot { cursor: pointer; }

/* 悬浮窗 */
.listening-tooltip {
  position: absolute;
  transform: translate(-50%, -145%);
  pointer-events: none;
  z-index: 20;
  background: var(--card-solid);
  border: 1px solid var(--violet-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  animation: toastIn 0.15s var(--ease);
}
.listening-tooltip b { color: var(--ink); font-size: var(--fs-sm); }
.listening-tooltip span { color: var(--amber); font-weight: 800; font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .listening-chart { overflow-x: auto; }
  .listening-chart svg { min-width: 560px; }
}

/* 夜空深色主题补丁（其余颜色已走全局令牌，自动适配） */
[data-theme="dark"] .quiz-result.fail { color: #FF8FB8; }
[data-theme="dark"] .goal-item { background: rgba(255, 255, 255, 0.08); }
/* ============================================================
   积分商城 · 商品列表 / 商品详情 / 订单 / 积分管理
   语言继承全站：水彩紫粉 · 玻璃卡片 · 有机圆角
   ============================================================ */

/* ────────── 商城首页 · 商品网格（淘宝式卡片） ────────── */
.shop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: linear-gradient(140deg, var(--violet-50), var(--amber-soft));
  border: 1px solid rgba(232, 160, 32, 0.28);
  border-radius: var(--radius-xl);
  margin-bottom: 20px;
}
.shop-hero h2 { margin: 0; font-family: 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', serif; color: var(--ink); }
.shop-hero .shop-hero-title { font-family: 'ZCOOL KuaiLe', 'QTxiaotu', 'PingFang SC', sans-serif; font-size: 2.1rem; letter-spacing: 1px; }
.shop-hero .shop-hero-sub { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.shop-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-solid);
  border: 1px solid rgba(232, 160, 32, 0.35);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: 800;
  color: var(--amber);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
}
.shop-balance-chip svg { width: 16px; height: 16px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none;
  color: inherit;
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--violet-300); }
.shop-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--violet-50);
  display: block;
}
.shop-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.shop-card-title {
  font-weight: 800;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.shop-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
}
.shop-price-points {
  color: var(--amber);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
}
.shop-price-unit { color: var(--amber); font-weight: 800; font-size: var(--fs-xs); }
.shop-price-from { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.shop-card-variants {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ────────── 商品详情（电商式：左图右信息） ────────── */
.shop-detail {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: 28px;
  align-items: start;
}
.shop-detail-gallery {
  display: flex;
  gap: 12px;
  position: sticky;
  top: 90px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow-2);
}
/* 左侧缩略图列（淘宝式） */
.shop-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  flex-shrink: 0;
}
.shop-thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--violet-50);
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-thumb.active { border-color: var(--violet-500); }
.shop-thumb:hover { border-color: var(--violet-300); }
/* 右侧大图 */
.shop-gallery-main {
  flex: 1;
  min-width: 0;
  position: relative;
}
.shop-detail-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--violet-50);
  display: block;
}
.shop-gallery-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(60, 44, 96, 0.72);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(2px);
}
.shop-detail-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.shop-detail-title { margin: 0; font-size: var(--fs-xl); font-weight: 900; color: var(--ink); line-height: 1.3; }
.shop-detail-desc { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }

/* ────────── 板块切换（Tab：商品介绍 / 参数信息 / 图文详情） ────────── */
.shop-sections {
  margin-top: 28px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.shop-section-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 2px solid var(--card-border);
  flex-wrap: wrap;
}
.shop-section-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 3px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.shop-section-tab svg { width: 15px; height: 15px; }
.shop-section-tab:hover { color: var(--violet-600); }
.shop-section-tab.active {
  color: var(--violet-600);
  border-bottom-color: var(--violet-500);
}
.shop-section-body { padding: 20px 22px; }
.shop-section-panel { min-height: 60px; }
.shop-intro-text { margin: 0 0 16px; color: var(--text-2); line-height: 1.9; font-size: var(--fs-sm); }
.shop-intro-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.shop-intro-imgs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--card-border);
}
/* 参数表 */
.shop-params-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.shop-params-table th {
  width: 30%;
  text-align: left;
  padding: 10px 14px;
  background: var(--violet-50);
  color: var(--text-2);
  font-weight: 700;
  border-bottom: 1px solid var(--card-border);
}
.shop-params-table td {
  padding: 10px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}
/* 图文详情：整图流（淘宝式） */
.shop-detail-imgs { display: flex; flex-direction: column; gap: 12px; }
.shop-detail-imgs img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  background: var(--violet-50);
}

/* 价格卡 */
.shop-price-card {
  background: linear-gradient(140deg, var(--amber-soft), var(--violet-50));
  border: 1px solid rgba(232, 160, 32, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.shop-price-now { display: flex; align-items: baseline; gap: 4px; }
.shop-price-now .big { font-size: 2rem; font-weight: 900; color: var(--amber); line-height: 1; }
.shop-price-now .unit { font-size: var(--fs-sm); font-weight: 800; color: var(--amber); }
.shop-price-yuan { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.shop-price-total { margin-left: auto; color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }

/* 规格选择（淘宝 SKU 式卡片按钮） */
.shop-spec-block { display: flex; flex-direction: column; gap: 8px; }
.shop-spec-label { font-size: var(--fs-sm); font-weight: 800; color: var(--text-2); }
.shop-spec-list { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-spec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--violet-200);
  background: var(--card-solid);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.shop-spec-btn small { color: var(--text-3); font-weight: 700; font-size: var(--fs-xs); }
.shop-spec-btn:hover { border-color: var(--violet-400); }
.shop-spec-btn.selected {
  border-color: var(--violet-500);
  background: var(--violet-50);
  color: var(--violet-600);
  box-shadow: 0 0 0 2px rgba(123, 85, 224, 0.18);
}
.shop-spec-btn.selected small { color: var(--violet-600); }

/* 数量 */
.shop-qty { display: flex; align-items: center; gap: 12px; }
.shop-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--violet-200);
  background: var(--card-solid);
  color: var(--violet-600);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.shop-qty-btn:hover:not(:disabled) { border-color: var(--violet-500); background: var(--violet-50); }
.shop-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-qty-num { min-width: 36px; text-align: center; font-weight: 900; color: var(--ink); font-size: var(--fs-md); }

/* 下单按钮 */
.shop-order-btn {
  min-height: 56px;
  font-size: var(--fs-md);
  width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--amber-2), var(--amber));
  border: none;
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(232, 160, 32, 0.35);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.shop-order-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(232, 160, 32, 0.45); }
.shop-order-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.shop-order-btn svg { width: 20px; height: 20px; }
.shop-order-hint { text-align: center; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }

/* ────────── 订单 ────────── */
.shop-orders { display: flex; flex-direction: column; gap: 10px; }
.shop-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}
.shop-order-main { flex: 1; min-width: 0; }
.shop-order-title { font-weight: 800; color: var(--ink); font-size: var(--fs-base); }
.shop-order-sub { font-size: var(--fs-xs); color: #77659C; margin-top: 2px; }
.shop-order-points { font-weight: 900; color: var(--amber); white-space: nowrap; }
.shop-order-status { border-radius: var(--radius-pill); padding: 3px 12px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.shop-order-status.pending { background: var(--amber-soft); color: #8a5a0a; }
.shop-order-status.shipped { background: var(--violet-100); color: var(--violet-600); }
.shop-order-status.done { background: #e6f4ea; color: #1e7d34; }
.shop-order-status.cancelled { background: var(--pink-100); color: #a01f50; }
.shop-order-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ────────── 积分管理页 ────────── */
.points-admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.points-admin-tab {
  border: 1.5px solid var(--violet-200);
  background: var(--card-solid);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.points-admin-tab:hover { border-color: var(--violet-400); }
.points-admin-tab.active { border-color: var(--violet-500); background: var(--violet-50); color: var(--violet-600); }

.ratio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--violet-50);
  border: 1px dashed var(--violet-300);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.ratio-card .input { width: 110px; height: 46px; text-align: center; font-weight: 800; color: var(--ink); }
.ratio-card .btn { min-height: 46px; }

/* 淘宝同步面板 */
.tb-sync-card { align-items: flex-start; flex-direction: column; background: var(--amber-soft, #fff8e8); border-color: var(--amber-300, #f0d9a0); }
.tb-sync-card code { background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 6px; font-size: var(--fs-xs); }
.tb-sync-result {
  width: 100%;
  background: rgba(255,255,255,.75);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.tb-qr-modal img { display: block; margin: 0 auto; }

/* 响应式 */
@media (max-width: 820px) {
  .shop-detail { grid-template-columns: 1fr; }
  .shop-detail-gallery { position: static; }
}
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .shop-card-title { font-size: var(--fs-sm); }
  .shop-gallery-thumbs { max-height: 320px; }
  .shop-thumb { width: 44px; height: 44px; }
  .shop-section-tabs { padding: 8px 10px 0; }
  .shop-section-tab { padding: 8px 12px; font-size: var(--fs-xs); }
}

/* ────────── 商品管理页（管理员） ────────── */
.shop-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.shop-admin-pagesize {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 700;
}
.shop-admin-pagesize button {
  border: 1.5px solid var(--violet-200);
  background: var(--card-solid);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.shop-admin-pagesize button:hover { border-color: var(--violet-400); }
.shop-admin-pagesize button.active { border-color: var(--violet-500); background: var(--violet-50); color: var(--violet-600); }
.shop-admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.shop-admin-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--violet-50);
  color: var(--text-2);
  font-weight: 800;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.shop-admin-table td { padding: 10px 12px; border-top: 1px solid var(--card-border); vertical-align: middle; }
.shop-admin-prod { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.shop-admin-prod img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); background: var(--violet-50); flex-shrink: 0; }
.shop-admin-prod .t { font-weight: 800; color: var(--ink); line-height: 1.35; }
.shop-admin-prod .s { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.shop-admin-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.shop-admin-tag.on { background: #e6f4ea; color: #1e7d34; }
.shop-admin-tag.off { background: var(--pink-100); color: #a01f50; }
.shop-admin-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-admin-ops .ar-btn { padding: 4px 10px; font-size: var(--fs-xs); }
.shop-admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: var(--fs-sm); color: var(--text-2); }
.shop-admin-pager .ar-btn { padding: 6px 16px; }
/* ============================================================
   登录 / 个人资料 / 账号管理 —— 共用样式
   语言继承全站：水彩紫粉 · 玻璃卡片 · 有机圆角 · 猫耳点缀
   ============================================================ */

/* ────────── 头像 ────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--violet-100);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(91, 64, 153, 0.18);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback {
  background: linear-gradient(140deg, var(--violet-500), var(--pink-500));
  color: #fff;
  font-weight: 800;
  line-height: 1;
}

/* ────────── 启动加载屏（恢复登录状态时） ────────── */
.auth-loading {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-2);
  font-weight: 700;
}

/* 首页右上角的头像按钮（原来是静态图，现在换成登录用户的头像） */
.hero-header .header-avatar {
  padding: 0;
  background: transparent;
}
.hero-header .header-avatar .avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
@media (max-width: 768px) {
  .hero-header .header-avatar .avatar {
    width: 34px !important;
    height: 34px !important;
    border-width: 2px;
  }
}

/* ────────── 离线提示条 ────────── */
.offline-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amber-soft);
  color: #8a5a0a;
  border: 1px solid rgba(232, 160, 32, 0.45);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--shadow-2);
}
.offline-banner svg { width: 15px; height: 15px; }

/* ============================================================
   登录页
   ============================================================ */
.login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 48px;
  overflow: hidden;
}
.login-stage {
  position: relative;
  width: min(430px, 100%);
  z-index: 2;
  animation: loginIn 0.6s var(--ease);
}
/* 矮屏幕（横屏手机/小笔记本）：允许上下滚动，避免卡片被裁掉 */
@media (max-height: 760px) {
  .login-page { overflow-y: auto; align-items: flex-start; }
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 门口迎客的乔治（去白底立绘，替换原紫色小猫） */
.login-mascot {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-bottom: -30px;
}
.login-mascot.celebrate { transform: scale(1.06); transition: transform 0.4s var(--ease); }
.login-george {
  height: 156px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(91, 64, 153, 0.30));
  animation: bob 3.6s ease-in-out infinite;
}

/* 玻璃猫耳卡 */
.login-card {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px 64px 34px 56px / 30px 44px 30px 48px;
  box-shadow: 0 2px 8px rgba(91, 64, 153, 0.06), 0 18px 44px rgba(91, 64, 153, 0.12);
  padding: 40px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-head { text-align: center; }
.login-title {
  font-family: 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', serif;
  font-size: 1.9rem;
  font-weight: 700;
  /* 固定紫墨色：站点主题文件末尾有其他主题覆盖 --ink，登录页要保持紫粉身份 */
  color: #382A55;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.login-sub {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}

/* 表单字段 */
.auth-fields { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  padding-left: 4px;
}
.auth-input { position: relative; display: block; }
.auth-input .input { height: 52px; padding-left: 46px; padding-right: 46px; }
/* 占位符用 --text-2 系（全站 --text-3 对比度不足 4.5:1，登录页不达标） */
.auth-input .input::placeholder { color: #77659C; opacity: 0.85; }
.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.auth-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.auth-eye:hover { color: var(--violet-600); background: var(--violet-50); }

/* 记住我（自绘勾选框） */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 600;
}
.auth-remember input {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.auth-remember-box {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid var(--violet-300);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.auth-remember-box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
.auth-remember input:checked + .auth-remember-box {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  border-color: transparent;
}
.auth-remember input:checked + .auth-remember-box svg { opacity: 1; transform: scale(1); }
.auth-remember input:focus-visible + .auth-remember-box {
  outline: 3px solid var(--violet-300);
  outline-offset: 2px;
}

/* 错误气泡 */
.auth-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--pink-100);
  color: #b0245a;
  font-size: var(--fs-sm);
  font-weight: 700;
  animation: authShake 0.4s var(--ease);
}
.auth-error svg { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 登录按钮 */
.login-submit { min-height: 54px; font-size: var(--fs-md); margin-top: 2px; }
.login-spinner {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: authSpin 0.8s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

.login-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 0;
  color: #77659C;
  font-size: var(--fs-xs);
}
.login-note svg { width: 14px; height: 14px; }

/* 登录页浮块用固定水彩珊瑚色（主题文件末尾的 --coral 被其他主题覆盖成砖红） */
.login-page .floating-blob.coral {
  background: radial-gradient(circle at 40% 40%, #F0A0A8, #F8C0B0);
}

/* ============================================================
   导航栏：右上角个人入口
   ============================================================ */
.user-menu { position: relative; margin-left: auto; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid rgba(220, 200, 240, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.user-chip:hover { box-shadow: var(--shadow-2); border-color: var(--violet-300); }
.user-chip .user-name {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-sm);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip .user-chevron { color: var(--text-3); transition: transform var(--dur) var(--ease); }
.user-chip.open .user-chevron { transform: rotate(180deg); }

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 8px;
  z-index: 60;
  animation: menuIn 0.22s var(--ease);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--violet-100);
  margin-bottom: 6px;
}
.user-menu-head .um-name { font-weight: 800; color: var(--ink); font-size: var(--fs-base); line-height: 1.3; }
.user-menu-head .um-sub { font-size: var(--fs-xs); color: #77659C; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.user-menu-item svg { width: 17px; height: 17px; color: var(--text-2); }
.user-menu-item:hover { background: var(--violet-50); color: var(--violet-600); }
.user-menu-item:hover svg { color: var(--violet-600); }
.user-menu-item.danger { color: #b0245a; }
.user-menu-item.danger svg { color: #c96a8f; }
.user-menu-item.danger:hover { background: var(--pink-100); color: #a01f50; }
.user-menu-item.danger:hover svg { color: #a01f50; }

/* ============================================================
   个人资料页
   ============================================================ */
.profile-card {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 34px 28px 28px;
}
.profile-avatar {
  position: relative;
  margin-top: 8px;
}
.profile-avatar .avatar { border: 3px solid #fff; box-shadow: var(--shadow-2); }
.avatar-edit-btn {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: linear-gradient(140deg, var(--violet-500), var(--pink-500));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.avatar-edit-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-2); }
.avatar-edit-btn svg { width: 15px; height: 15px; }
.profile-avatar input[type='file'] { display: none; }

.profile-role { display: flex; gap: 8px; justify-content: center; margin-top: -8px; }
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-weight: 800;
}
.role-tag svg { width: 13px; height: 13px; }
.role-tag.admin { background: var(--pink-100); color: #a01f50; }
.role-tag.user { background: var(--violet-100); color: var(--violet-600); }

.profile-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.profile-fields .auth-field { gap: 6px; }
.profile-fields .input { height: 52px; }
.profile-fields .input[readonly] { background: var(--violet-50); color: var(--text-3); cursor: not-allowed; }
.field-hint { font-size: var(--fs-xs); color: #77659C; margin: -4px 0 0 4px; }

.profile-save { min-height: 54px; font-size: var(--fs-md); width: 100%; }

/* 退出登录 */
.profile-logout { margin-top: 14px; }
.profile-logout-btn {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(201, 106, 143, 0.45);
  color: #b0245a;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 800;
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.profile-logout-btn:hover {
  background: var(--pink-100);
  border-color: #b0245a;
  box-shadow: var(--shadow-1);
}
.profile-logout .field-hint { margin: 8px 0 0; }

/* 保存成功提示 */
.auth-toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-solid);
  color: var(--ink);
  border: 1px solid var(--violet-200);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-weight: 800;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-3);
  animation: toastIn 0.3s var(--ease);
}
.auth-toast svg { width: 16px; height: 16px; color: var(--success, #2e7d32); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   管理员：账号管理页
   ============================================================ */
.admin-create {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 18px;
}
.admin-create .field-full { grid-column: 1 / -1; }
.admin-create .field-full:first-child { grid-column: 1 / -1; }
.admin-create .auth-label { padding-left: 4px; }
.admin-create .input, .admin-create select.input { height: 48px; }
.admin-create select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2377659C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.admin-create .btn { grid-column: 1 / -1; min-height: 50px; }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease);
}
.admin-row:hover { box-shadow: var(--shadow-2); }
.admin-row .ar-info { min-width: 0; flex: 1; }
.admin-row .ar-name { font-weight: 800; color: var(--ink); font-size: var(--fs-base); line-height: 1.3; }
.admin-row .ar-username { font-size: var(--fs-xs); color: #77659C; }
.admin-row .ar-date { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.admin-row .ar-actions { display: flex; gap: 6px; flex-shrink: 0; }

.ar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--card-border);
  background: var(--card-solid);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ar-btn svg { width: 13px; height: 13px; }
.ar-btn:hover { border-color: var(--violet-300); color: var(--violet-600); }
.ar-btn.warn { color: #a01f50; }
.ar-btn.warn:hover { border-color: var(--pink-300); color: #a01f50; background: var(--pink-100); }
.ar-btn.confirm { background: var(--pink-500); color: #fff; border-color: transparent; }

/* 行内展开：重置密码 */
.admin-inline {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--violet-50);
  border: 1px dashed var(--violet-300);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.admin-inline .auth-field { flex: 1; margin: 0; }
.admin-inline .input { height: 46px; }
.admin-inline .btn { min-height: 46px; flex-shrink: 0; }

/* 空状态 */
.admin-empty {
  text-align: center;
  color: #77659C;
  padding: 24px;
  font-size: var(--fs-sm);
}

/* ============================================================
   打卡审核 · 按天分组 / 分页 / 确认弹框
   ============================================================ */
.review-day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: var(--ink);
  font-size: var(--fs-md);
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--violet-200);
}
.review-day-header svg { width: 16px; height: 16px; color: var(--violet-400); }

.review-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 18px 0 6px;
}
.review-pager .input { font-weight: 700; color: var(--ink); }

.role-tag.rejected {
  background: var(--pink-100);
  color: #b0245a;
}

.review-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(56, 42, 85, 0.4);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalIn 0.2s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.review-modal {
  width: min(420px, 100%);
  background: var(--card-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 24px 26px;
  animation: modalCardIn 0.25s var(--ease);
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 640px) {
  .login-card { padding: 34px 20px 20px; border-radius: 24px 48px 26px 44px / 24px 36px 24px 38px; }
  .login-title { font-size: 1.6rem; }
  .user-chip .user-name { max-width: 72px; }
  .admin-create { grid-template-columns: 1fr; }
  .admin-create .field-full, .admin-create .field-full:first-child { grid-column: 1; }
  .admin-inline { flex-direction: column; align-items: stretch; }
  .admin-row { flex-wrap: wrap; }
  .admin-row .ar-actions { width: 100%; justify-content: flex-end; }
  .admin-row .ar-date { display: none; }
}

/* 减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .login-stage, .login-mascot, .user-menu-panel, .auth-error,
  .auth-toast, .login-spinner, .login-mascot.celebrate, .login-george {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   夜空深色主题
   ============================================================ */
[data-theme="dark"] .avatar { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .hero-header .header-avatar .avatar { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .offline-banner { color: #F0C070; }
[data-theme="dark"] .login-card { background: rgba(42, 33, 70, 0.82); border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .login-title { color: #F1EAFD; }
[data-theme="dark"] .auth-input .input::placeholder { color: #A293C9; }
[data-theme="dark"] .auth-error { color: #FF8FB8; }
[data-theme="dark"] .login-note { color: #A293C9; }
[data-theme="dark"] .login-page .floating-blob.coral { background: radial-gradient(circle at 40% 40%, rgba(240, 145, 122, 0.65), rgba(232, 168, 147, 0.45)); }
[data-theme="dark"] .user-chip { background: rgba(42, 33, 70, 0.8); border-color: rgba(150, 125, 200, 0.28); }
[data-theme="dark"] .user-menu-panel { background: rgba(30, 24, 52, 0.96); border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .user-menu-head .um-sub { color: #A293C9; }
[data-theme="dark"] .user-menu-item.danger { color: #FF8FB8; }
[data-theme="dark"] .user-menu-item.danger svg { color: #E86A9F; }
[data-theme="dark"] .user-menu-item.danger:hover { color: #FFA9D2; background: rgba(255, 111, 174, 0.12); }
[data-theme="dark"] .user-menu-item.danger:hover svg { color: #FFA9D2; }
[data-theme="dark"] .profile-avatar .avatar { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .avatar-edit-btn { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .role-tag.admin { color: #FF8FC0; }
[data-theme="dark"] .field-hint { color: #A293C9; }
[data-theme="dark"] .profile-logout-btn { color: #FF8FB8; background: rgba(255, 111, 174, 0.08); }
[data-theme="dark"] .profile-logout-btn:hover { border-color: #FF8FB8; }
[data-theme="dark"] .admin-row .ar-username { color: #A293C9; }
[data-theme="dark"] .ar-btn.warn { color: #FF8FC0; }
[data-theme="dark"] .ar-btn.warn:hover { color: #FFA9D2; }
[data-theme="dark"] .admin-empty { color: #A293C9; }
[data-theme="dark"] .role-tag.rejected { color: #FF8FB8; }
[data-theme="dark"] .review-modal-mask { background: rgba(10, 8, 20, 0.6); }
[data-theme="dark"] .auth-toast svg { color: #86C88A; }
/* ⚙️ 系统设置页（仅管理员） */

.st-hint {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
  margin: 0 0 6px;
}

/* 一行 = 一个板块 */
.st-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--violet-100);
}
.st-row:last-child { border-bottom: none; padding-bottom: 2px; }

.st-row-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 7px;
}
.st-row-label {
  font-weight: 900;
  font-size: 15px;
  color: var(--text);
}
.st-row-note {
  font-size: 11.5px;
  color: var(--text-2);
}
.st-row-go {
  font-size: 12px;
  color: var(--violet-600);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.st-row-go:hover { text-decoration: underline; }

/* 皮肤选项卡 */
.st-skins {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.st-skin {
  flex: 1 1 190px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 11px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .15s, background .15s, transform .1s;
}
.st-skin:hover { border-color: var(--violet-200); }
.st-skin:active { transform: scale(.985); }
.st-skin:disabled { opacity: .55; cursor: default; }
.st-skin.is-on {
  border-color: var(--violet-500);
  background: var(--violet-50);
}

.st-skin-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--violet-600);
}
.st-swatch {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .14);
  flex: none;
}
.st-skin-name {
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--text);
  flex: 1 1 auto;
}
.st-skin-desc {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.55;
}

.st-only {
  align-self: center;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .st-row { grid-template-columns: 1fr; gap: 8px; }
  .st-row-head {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding-top: 0;
  }
  /* 手机上一张卡占一行：说明文字不挤成四行，手指也点得准 */
  .st-skin { flex: 1 1 100%; max-width: none; }
  .st-only { align-self: flex-start; }
}
/* ============================================================
   鐚尗瀛︿範灞?路 姘村僵娴佸姩涓婚 v3
   璇█锛氭按褰╂檿鏌?路 鏈夋満褰㈢姸 路 鑹插潡娓楅€?路 鏄熷厜鐐圭紑
   鍏ㄧ珯璁捐浠ょ墝 鈥斺€?鎯虫敼閰嶈壊鍙敼杩欎竴涓枃浠躲€?
   ============================================================ */

/* 鈹€鈹€ 鍗冨浘灏忓厰浣擄紙QTxiaotu锛夛細鎶婃湰鏈虹壒娈婂瓧浣撳祵鍏ョ綉椤碉紝
     璁╂墜鏈?鍏朵粬鐢佃剳涔熻兘鐪嬪埌鍚屾鏍囬瀛椾綋銆傚瓧浣撴枃浠跺凡鍦ㄦ瀯寤烘椂
     瀛愰泦鍖栧帇缂╋紙鍙繚鐣欍€岀帇灏忕嫍鐨勫涔犲眿銆嶇瓑鐢ㄥ埌鐨勫瓧锛夆攢鈹€ */
@font-face {
  font-family: 'QTxiaotu';
  src: url('/fonts/QTxiaotu.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ────────── 文字 ────────── */
  --text: #4A3968;
  --text-2: #77659C;
  --text-3: #A99BC4;
  --ink: #3D3026;

  /* ────────── 紫色系（主色·水彩晕染）────────── */
  --violet-600: #6A45C9;
  --violet-500: #7B55E0;
  --violet-400: #9C7BFF;
  --violet-300: #BFA8FF;
  --violet-200: #DCCCF7;
  --violet-100: #EFE7FB;
  --violet-50:  #F7F1FF;

  /* ────────── 粉色系（辅助·流动渗透）────────── */
  --pink-600: #E23D86;
  --pink-500: #F05A9C;
  --pink-400: #F789B8;
  --pink-300: #FBB3D0;
  --pink-200: #FDD7E8;
  --pink-100: #FEEAF3;
  --pink-50:  #FFF5F9;

  /* ────────── 珊瑚/桃色（水彩中间调·色块过渡）────────── */
  --coral: #E07B5F;
  --coral-soft: #FDF0EB;
  --peach: #F8C0B0;
  --peach-soft: #FDF0EB;

  /* ────────── 底色与卡片 ────────── */
  --bg: #FEFCFB;
  --bg-soft: #F7F1FF;
  --card: rgba(255,255,255,0.82);
  --card-border: rgba(220,200,235,0.45);
  --card-solid: #FFFFFF;

  /* ────────── 阴影：柔和深度，不是硬框 ────────── */
  --shadow-1: 0 1px 3px rgba(91,64,153,0.04), 0 2px 10px rgba(91,64,153,0.05);
  --shadow-2: 0 2px 6px rgba(91,64,153,0.06), 0 8px 24px rgba(91,64,153,0.08);
  --shadow-3: 0 4px 10px rgba(91,64,153,0.08), 0 16px 36px rgba(91,64,153,0.11);
  --shadow-pink: 0 2px 6px rgba(240,90,156,0.07), 0 8px 24px rgba(240,90,156,0.12);

  /* ────────── 圆角（有机不对称系统）────────── */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* 有机圆角：上下左右不对等，模拟手绘水彩边缘 */
  --radius-organic: 28px 72px 36px 64px / 28px 48px 32px 56px;
  --radius-blob: 30% 70% 70% 30% / 30% 30% 70% 70%;

  /* ────────── 字号阶梯 ────────── */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.06rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.5rem;

  /* ────────── 间距 ────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;

  /* ────────── 字体 ────────── */
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",system-ui,sans-serif;

  /* ────────── 动效 ────────── */
  --ease: cubic-bezier(0.33,1,0.68,1);
  --dur: 0.22s;
  --dur-slow: 0.4s;

  /* ────────── 琥珀金 ────────── */
  --amber: #E8A020;
  --amber-2: #F5B84B;
  --amber-soft: #FDF1DC;

  /* ────────── 科目色 ────────── */
  --subject-yuwen: var(--violet-500);
  --subject-yuwen-soft: var(--violet-100);
  --subject-yingyu: var(--pink-500);
  --subject-yingyu-soft: var(--pink-100);
  --subject-shuxue: #E8A020;
  --subject-shuxue-soft: #FDF1DC;
  --subject-checkin: #E23D86;
  --subject-checkin-soft: var(--pink-100);

  /* 兼容旧变量名 */
  --primary: var(--violet-500);
  --primary-dark: var(--violet-600);
  --primary-light: var(--violet-300);
  --pink: var(--pink-500);
  --pink-deep: var(--pink-600);
  --pink-light: var(--pink-200);
  --text-light: var(--text-2);
  --shadow: var(--shadow-2);
  --shadow-hover: var(--shadow-pink);
  --hero-scale: 1;

  /* ── Hero（CozyPaws 浅绿）令牌 ── */
  --hero-bg: #F0FDF1;
  --hero-ink: #1a3d1a;
  --hero-ink-2: #2a5a2a;
  --hero-nav: #666;
  --hero-muted: #555;
  --hero-accent: #E86A10;
  --hero-accent-deep: #d45e0d;
  --hero-panel: rgba(255,255,255,0.7);
  --hero-panel-strong: rgba(255,255,255,0.94);
  --hero-panel-border: rgba(255,255,255,0.9);
  --hero-card: #ffffff;
  --hero-ink-line: rgba(26,61,26,0.3);
  --hero-line: rgba(0,0,0,0.12);
  --hero-line-strong: rgba(0,0,0,0.2);

  /* ── 科目 paw 卡底色 ── */
  --paw-yuwen: #EDE4FA;
  --paw-yingyu: #FDE8F0;
  --paw-shuxue: #FDF3E0;
  --paw-checkin: #FDE8E4;

}

/* ============================================================
   夜空主题（深色模式）：暖紫夜空底 + 提亮强调色
   挂在 [data-theme="dark"] 上，由 src/common/theme.jsx 切换
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* 文字 */
  --text: #D9CEEF;
  --text-2: #A89ACD;
  --text-3: #7E6FA3;
  --ink: #F1EAFD;

  /* 紫色系（深色底上整体提亮） */
  --violet-600: #B79CFF;
  --violet-500: #A88BFF;
  --violet-400: #9C7BFF;
  --violet-300: #7A5FD0;
  --violet-200: #56449A;
  --violet-100: #3A2E63;
  --violet-50:  #2C2350;

  /* 粉色系 */
  --pink-600: #FF6FAE;
  --pink-500: #FF8FC0;
  --pink-400: #FFA9D2;
  --pink-300: #D98BB0;
  --pink-200: #6B3A55;
  --pink-100: #4A2A3E;
  --pink-50:  #3A2233;

  /* 珊瑚/桃色 */
  --coral: #F0917A;
  --coral-soft: rgba(224,123,95,0.16);
  --peach: #E8A893;
  --peach-soft: rgba(248,192,176,0.14);

  /* 底色与卡片 */
  --bg: #1A142E;
  --bg-soft: #221A3E;
  --card: rgba(42,33,70,0.82);
  --card-border: rgba(150,125,200,0.28);
  --card-solid: #292047;

  /* 阴影：黑紫基调，比浅色更深 */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.30), 0 2px 10px rgba(0,0,0,0.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.40);
  --shadow-3: 0 4px 10px rgba(0,0,0,0.40), 0 16px 36px rgba(0,0,0,0.50);
  --shadow-pink: 0 2px 6px rgba(255,143,192,0.10), 0 8px 24px rgba(255,143,192,0.16);

  /* 琥珀金 */
  --amber: #F0B04A;
  --amber-2: #F7C46E;
  --amber-soft: rgba(232,160,32,0.16);

  /* 科目色 */
  --subject-yuwen: var(--violet-500);
  --subject-yuwen-soft: rgba(156,123,255,0.16);
  --subject-yingyu: var(--pink-500);
  --subject-yingyu-soft: rgba(255,143,192,0.14);
  --subject-shuxue: #F0B04A;
  --subject-shuxue-soft: rgba(232,160,32,0.15);
  --subject-checkin: #FF6FAE;
  --subject-checkin-soft: rgba(255,111,174,0.14);

  /* Hero（夜绿） */
  --hero-bg: #1B2420;
  --hero-ink: #D9EBD9;
  --hero-ink-2: #A9C7AA;
  --hero-nav: #9FAF9F;
  --hero-muted: #8FA08F;
  --hero-accent: #FF8C3A;
  --hero-accent-deep: #F07A20;
  --hero-panel: rgba(30,40,34,0.72);
  --hero-panel-strong: rgba(22,30,24,0.96);
  --hero-panel-border: rgba(255,255,255,0.14);
  --hero-card: #253028;
  --hero-ink-line: rgba(217,235,217,0.30);
  --hero-line: rgba(255,255,255,0.16);
  --hero-line-strong: rgba(255,255,255,0.30);

  /* 科目 paw 卡底色（深色半透明） */
  --paw-yuwen: rgba(156,123,255,0.16);
  --paw-yingyu: rgba(255,143,192,0.14);
  --paw-shuxue: rgba(240,176,74,0.15);
  --paw-checkin: rgba(255,111,174,0.14);
}

/* 深色下的水彩画布：淡色铺底压暗，色块变成夜光 */
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 900px 700px at 8% -5%, rgba(130,80,195,0.16), transparent 55%),
    radial-gradient(ellipse 750px 580px at 94% -2%, rgba(230,105,145,0.12), transparent 52%),
    radial-gradient(ellipse 620px 500px at 88% 44%, rgba(240,155,168,0.09), transparent 58%),
    radial-gradient(ellipse 580px 460px at 12% 52%, rgba(175,138,218,0.12), transparent 55%),
    radial-gradient(ellipse 700px 420px at 52% 92%, rgba(225,128,162,0.09), transparent 55%),
    radial-gradient(ellipse 380px 300px at 28% 22%, rgba(145,82,200,0.10), transparent 62%),
    radial-gradient(ellipse 1000px 600px at 50% 50%, rgba(90,60,140,0.08), transparent 60%);
}
[data-theme="dark"] body::after {
  background:
    radial-gradient(ellipse 500px 380px at 82% 62%, rgba(245,175,170,0.07), transparent 60%),
    radial-gradient(ellipse 440px 350px at 18% 68%, rgba(185,148,222,0.08), transparent 58%),
    radial-gradient(ellipse 350px 280px at 78% 12%, rgba(240,140,170,0.06), transparent 60%);
}

/* 主题切换时的平滑过渡（背景/文字/边框颜色渐变） */
body, .card, .btn, .chip, .hero-page, .header-burger-panel {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body, .card, .btn, .chip, .hero-page, .header-burger-panel { transition: none; }
}
/* ============================================================
   姘村僵鐢诲竷锛氬灞傛檿鏌撹壊鍧楋紝鍥哄畾涓嶅姩
   鍍忔按褰╃焊涓婄殑婀跨敾娉曗€斺€旇壊鍧楄竟缂樼浉浜掓笚閫?
   ============================================================ */

/* 姘村僵鑹插潡灞傦細鐢ㄧ粷瀵瑰畾浣?+ 鏈夋満鍦嗚 + 澶фā绯婃ā鎷熸按褰╂檿鏌?*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 1. 澶у潡娣辩传锛堝乏涓婏級 */
    radial-gradient(ellipse 900px 700px at 8% -5%, rgba(130,80,195,0.08), transparent 55%),
    /* 2. 绮夌孩鏅曟煋锛堝彸涓婏級 */
    radial-gradient(ellipse 750px 580px at 94% -2%, rgba(230,105,145,0.07), transparent 52%),
    /* 3. 鐝婄憵/妗冭壊杩囨浮锛堝彸涓級 */
    radial-gradient(ellipse 620px 500px at 88% 44%, rgba(240,155,168,0.06), transparent 58%),
    /* 4. 钖拌。鑽夋贰绱紙宸︿腑锛?*/
    radial-gradient(ellipse 580px 460px at 12% 52%, rgba(175,138,218,0.07), transparent 55%),
    /* 5. 鏆栫矇锛堝簳閮ㄤ腑澶級 */
    radial-gradient(ellipse 700px 420px at 52% 92%, rgba(225,128,162,0.06), transparent 55%),
    /* 6. 灏忓潡娴撶传鐐圭紑锛堝乏渚т笁鍒嗕箣涓€澶勶級 */
    radial-gradient(ellipse 380px 300px at 28% 22%, rgba(145,82,200,0.05), transparent 62%),
    /* 7. 鏋佹贰绮夎壊閾哄簳 */
    radial-gradient(ellipse 1000px 600px at 50% 50%, rgba(250,235,242,0.10), transparent 60%);
}

/* 绗簩灞傦細鏇撮泦涓殑姘村僵鑹插潡锛屾ā鎷熺敾绗旇Е鎰?*/
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 涓彸鐨勭強鐟氳壊鍧椻€斺€斿拰鍙傝€冨浘閲岄偅鐗囩矇姗樺搴?*/
    radial-gradient(ellipse 500px 380px at 82% 62%, rgba(245,175,170,0.08), transparent 60%),
    /* 涓乏鍋忎笅鐨勮柊琛ｈ崏鑹插潡 */
    radial-gradient(ellipse 440px 350px at 18% 68%, rgba(185,148,222,0.07), transparent 58%),
    /* 鍙充笂鏂圭殑绮夎壊楂樺厜 */
    radial-gradient(ellipse 350px 280px at 78% 12%, rgba(240,140,170,0.06), transparent 60%);
}

/* ============================================================
   鍩虹
   ============================================================ */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  position: relative;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* 纭繚鎵€鏈夊唴瀹瑰湪姘村僵鑹插潡涔嬩笂 */
#root, .container, .page-enter {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }

p { margin: 0 0 0.8em; }

a { color: var(--violet-600); text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--violet-300);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 12px 20px 56px;
}

.page-enter { animation: pageIn 0.5s var(--ease); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-enter, .cat-mascot, .subject-card, .btn,
  .floating-blob, .sparkle, .hero-blob {
    animation: none !important; transition: none !important;
  }
}

/* ============================================================
   鐚挭鍚夌ゥ鐗?
   ============================================================ */
.cat-mascot {
  display: block;
  filter: drop-shadow(0 8px 18px rgba(91,64,153,0.15));
  animation: bob 3.6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.cat-mascot.still { animation: none; filter: none; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-5px) rotate(-1deg); }
  60%      { transform: translateY(-8px) rotate(1deg); }
}

/* ============================================================
   姘村僵鏈夋満褰㈢姸锛氭诞鍔ㄧ殑鑹插潡锛圝SX 涓斁缃級
   ============================================================ */
.floating-blob {
  position: absolute;
  border-radius: var(--radius-blob);
  filter: blur(50px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: blobFloat 8s ease-in-out infinite;
}
.floating-blob.purple {
  background: radial-gradient(circle at 40% 40%, var(--violet-400), var(--violet-300));
}
.floating-blob.pink {
  background: radial-gradient(circle at 40% 40%, var(--pink-400), var(--pink-300));
}
.floating-blob.coral {
  background: radial-gradient(circle at 40% 40%, var(--coral), var(--peach));
}
.floating-blob.small {
  filter: blur(35px);
  opacity: 0.45;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(15px, -10px) scale(1.04); }
  50%      { transform: translate(-8px, -18px) scale(0.97); }
  75%      { transform: translate(-12px, 6px) scale(1.02); }
}

/* ============================================================
   鏄熷厜 / 闂儊鐐圭紑
   ============================================================ */
.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  animation: sparkleTwinkle 2.5s ease-in-out infinite;
}
.sparkle svg {
  display: block;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(1) rotate(0deg); }
  30%      { opacity: 1;    transform: scale(1.25) rotate(20deg); }
  60%      { opacity: 0.5;  transform: scale(0.9) rotate(-10deg); }
}

/* ============================================================
   鎸夐挳
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  touch-action: manipulation; /* iPad 快速连点别被判成双击缩放（那一击 click 会被吃掉） */
  -webkit-tap-highlight-color: transparent;
}
/* ⚠️ :hover 必须关进 (hover:hover)：iPad/Safari 首次点按会被当成 hover，
   带 transform 的 hover 会吃掉这一击 click —— 表现「电脑好好的，iPad 点了没反应」。 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary { background: linear-gradient(135deg, var(--violet-500), var(--violet-600)); box-shadow: var(--shadow-2); }
.btn-pink    { background: linear-gradient(135deg, var(--pink-500), var(--pink-600)); box-shadow: var(--shadow-pink); }
.btn-ghost {
  background: var(--card);
  color: var(--violet-600);
  border: 1.5px solid rgba(200,175,225,0.5);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: var(--violet-300); background: rgba(255,255,255,0.92); }
.btn-block { width: 100%; }

/* ============================================================
   鍗＄墖锛堢幓鐠冭川鎰?+ 鏈夋満鍦嗚锛?
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* 鐚€冲崱鐗?*/
.card-cat { position: relative; }
.card-cat::before,
.card-cat::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 40px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M8 32 Q0 6 20 2 Q36 0 34 18 Q33 30 22 32 Q14 33 8 32 Z' fill='%23FDD7E8'/%3E%3Cpath d='M13 28 Q8 12 20 8 Q30 7 29 17 Q28 26 20 27 Q15 28 13 28 Z' fill='%23F789B8'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(91,64,153,0.08));
  transition: transform 0.3s var(--ease);
}
.card-cat::before { left: 24px; }
.card-cat::after  { right: 24px; transform: scaleX(-1); }
.card-cat:hover::before { transform: rotate(-8deg) translateY(-2px); }
.card-cat:hover::after  { transform: scaleX(-1) rotate(-8deg) translateY(-2px); }

/* ============================================================
   绉戠洰鍏ュ彛鍗★紙鏈夋満閫犲瀷路鐜荤拑璐ㄦ劅锛?
   ============================================================ */
.subject-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px 20px;
  border-radius: var(--radius-organic);
  border: 1px solid rgba(220,200,240,0.4);
  background: var(--card);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.subject-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-3);
  border-color: rgba(190,160,225,0.55);
}

.subject-card .subject-emoji {
  width: 64px;
  height: 64px;
  border-radius: 24px 56px 30px 48px / 24px 40px 28px 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(120,70,180,0.18);
  transition: border-radius 0.4s var(--ease);
}
.subject-card:hover .subject-emoji {
  border-radius: 38px 68px 38px 58px / 32px 48px 34px 52px;
}

.subject-card .subject-emoji svg { width: 34px; height: 34px; }

.subject-card .subject-title { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.subject-card .subject-desc  { font-size: var(--fs-sm); color: var(--text-2); }

.subject-yuwen   .subject-emoji { background: linear-gradient(140deg, #9C7BFF, #6A45C9); }
.subject-yuwen   { --sub-acc: var(--violet-500); }
.subject-yingyu  .subject-emoji { background: linear-gradient(140deg, #F789B8, #E23D86); }
.subject-yingyu  { --sub-acc: var(--pink-500); }
.subject-shuxue  .subject-emoji { background: linear-gradient(140deg, var(--amber-2), var(--amber)); }
.subject-shuxue  { --sub-acc: #E8A020; }
.subject-checkin .subject-emoji { background: linear-gradient(140deg, #FBB3D0, var(--pink-600)); }
.subject-checkin { --sub-acc: var(--pink-600); }

.subject-card .subject-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.subject-card .subject-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sub-acc);
  opacity: 0.45;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.subject-card:hover .subject-arrow { transform: translate(5px, -50%); opacity: 1; }

/* 鍗＄墖鑳屽悗鐨勫厜鏅曗€斺€斾唬鏇跨‖杈规 */
.subject-card::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--sub-acc), transparent 70%);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.subject-card:hover::after { opacity: 0.14; }

/* ============================================================
   椤堕儴瀵艰埅
   ============================================================ */
.nav-bar {
  position: static;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.9);
}
.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.nav-logo .logo-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--violet-400), var(--pink-500));
  box-shadow: var(--shadow-1);
}
.nav-logo .logo-badge svg { width: 26px; height: 26px; color: #fff; }

/* ============================================================
   杩斿洖鎸夐挳
   ============================================================ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid rgba(200,175,225,0.4);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  color: var(--violet-600);
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.back-btn:hover { background: rgba(255,255,255,0.9); transform: translateX(-3px); }
.back-btn svg { width: 16px; height: 16px; }

/* ============================================================
   鏍囩 / chip
   ============================================================ */
.chip {
  display: inline-block;
  background: var(--card);
  color: var(--text-2);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  user-select: none;
}
.chip:hover { border-color: var(--violet-300); color: var(--violet-600); }
.chip.active {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-1);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.65);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.tag svg { width: 13px; height: 13px; }

/* ============================================================
   杈撳叆妗?
   ============================================================ */
.input, .textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--violet-200);
  border-radius: var(--radius);
  padding: 11px 16px;
  outline: none;
  width: 100%;
  backdrop-filter: blur(8px);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 4px rgba(190,160,225,0.3);
}
.textarea { min-height: 96px; resize: vertical; }

/* ============================================================
   鐖嵃鍒楄〃
   ============================================================ */
.paw-list { list-style: none; padding: 0; margin: 0; }
.paw-list li {
  position: relative;
  padding: 9px 0 9px 32px;
  font-size: var(--fs-base);
  color: var(--text);
}
.paw-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3Zm11 0c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3ZM12 8c1.8 0 3.2 1.4 3.2 3.2S13.8 14.4 12 14.4 8.8 13 8.8 11.2 10.2 8 12 8Zm-8.2 4c1.5 0 2.7 1.2 2.7 2.7s-1.2 2.7-2.7 2.7S1.1 16.2 1.1 14.7 2.3 12 3.8 12Zm16.4 0c1.5 0 2.7 1.2 2.7 2.7s-1.2 2.7-2.7 2.7-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7ZM12 16c2 0 3.6 1.6 3.6 3.6S14 23.2 12 23.2 8.4 21.6 8.4 19.6 10 16 12 16Z' fill='%23BFA8FF'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.75;
}

/* ============================================================
   缃戞牸甯冨眬
   ============================================================ */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   寤鸿涓?/ 绌虹姸鎬?
   ============================================================ */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 20px;
  color: var(--text-2);
}
.placeholder h2 { color: var(--ink); }

/* ============================================================
   闊抽鎾斁鍣?/ 瑙嗛
   ============================================================ */
.audio-player audio { width: 100%; }
.audio-player audio::-webkit-media-controls-panel { background: var(--violet-50); }

.video-box {
  background: linear-gradient(160deg, #463267, #2A1F4A);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.video-box video { display: block; width: 100%; max-height: 62vh; background: #000; }

/* ============================================================
   鍖哄潡鏍囬
   ============================================================ */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--ink);
  margin: 22px 0 14px;
}
.section-title .title-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px 28px 14px 24px / 12px 20px 14px 18px;
  background: linear-gradient(140deg, var(--violet-100), var(--pink-100));
  color: var(--violet-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-title .title-icon svg { width: 18px; height: 18px; }

/* ============================================================
   鑳￠』鍒嗛殧绾?
   ============================================================ */
.cat-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--pink-300);
  font-size: var(--fs-sm);
}
.cat-divider::before, .cat-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink-200), transparent);
}

/* ============================================================
   棣栭〉锛氭按褰┞锋湁鏈郝锋祦鍔?鑻遍泟鍖?
   涓嶆槸纭鐭╁舰鈥斺€旀槸鑹插潡娓楅€忋€佸舰鐘朵氦铻嶇殑鐢?
   ============================================================ */
.hero-canvas {
  position: relative;
  min-height: 280px;
  margin-bottom: var(--space-5);
  overflow: visible;
}

/* 澶у潡姘村僵鑹插潡鈥斺€旂粷瀵瑰畾浣嶅湪 hero 鐢诲竷閲?*/
.hero-blob {
  position: absolute;
  border-radius: var(--radius-blob);
  filter: blur(55px);
  opacity: 0.52;
  pointer-events: none;
  z-index: 0;
}
.hero-blob.purple-main {
  width: 420px; height: 280px;
  top: -30px; left: -60px;
  background: radial-gradient(circle at 45% 40%, rgba(140,95,210,0.7), rgba(160,120,225,0.35));
  animation: heroBlobFloat 9s ease-in-out infinite;
}
.hero-blob.pink-main {
  width: 380px; height: 260px;
  top: 20px; right: -50px;
  background: radial-gradient(circle at 40% 40%, rgba(235,130,160,0.65), rgba(245,165,185,0.3));
  animation: heroBlobFloat 7.5s ease-in-out infinite reverse;
}
.hero-blob.coral-wash {
  width: 340px; height: 220px;
  bottom: -20px; right: 20%;
  background: radial-gradient(circle at 45% 45%, rgba(242,165,160,0.55), rgba(248,195,180,0.25));
  animation: heroBlobFloat 8.2s ease-in-out infinite;
}
.hero-blob.lavender-wash {
  width: 300px; height: 200px;
  top: 60px; left: 30%;
  background: radial-gradient(circle at 50% 50%, rgba(185,150,222,0.5), rgba(200,170,228,0.2));
  animation: heroBlobFloat 10s ease-in-out infinite reverse;
}
@keyframes heroBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(18px, -14px) scale(1.05); }
  66%      { transform: translate(-10px, 10px) scale(0.96); }
}

/* 鑻遍泟鍖虹殑鍐呭鍗♀€斺€旂幓鐠冭川鎰燂紝娴湪鑹插潡涔嬩笂 */
.hero-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 30px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 28px 72px 36px 64px / 28px 48px 32px 56px;
  box-shadow: 0 2px 8px rgba(91,64,153,0.05), 0 12px 36px rgba(91,64,153,0.09);
}

.hero-card .hero-text { z-index: 2; }
.hero-card h1 {
  margin-bottom: 4px;
  background: linear-gradient(135deg, #5B3A8A, #8B5FBF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-card p { color: var(--text-2); margin: 0; font-size: var(--fs-base); }

.hero-card .hero-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(220,200,240,0.35);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 700;
  margin-top: 12px;
  backdrop-filter: blur(6px);
}

.hero-card .hero-mascot {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* 鑻遍泟鍖烘暎钀界殑鏄熸槦 */
.hero-star {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  animation: starGlow 3s ease-in-out infinite;
  color: #D4B8F0;
}
.hero-star.bright { color: #F2D080; animation-duration: 2.2s; }
@keyframes starGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  40%      { opacity: 1;   transform: scale(1.3); }
  70%      { opacity: 0.55; transform: scale(0.85); }
}

/* 绉戠洰鍗″尯鍩熺殑娴姩搴曡壊鍧?*/
.subjects-canvas {
  position: relative;
}
.subjects-canvas .bg-blob {
  position: absolute;
  border-radius: var(--radius-blob);
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.subjects-canvas .bg-blob.pink-glow {
  width: 350px; height: 280px;
  top: -40px; right: -30px;
  background: radial-gradient(circle at 40% 40%, rgba(240,140,170,0.55), transparent);
}
.subjects-canvas .bg-blob.purple-glow {
  width: 320px; height: 250px;
  bottom: -30px; left: -20px;
  background: radial-gradient(circle at 50% 50%, rgba(160,120,215,0.5), transparent);
}

/* ============================================================
   杩涘害鏉?
   ============================================================ */
.progress {
  position: relative;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--violet-50);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.progress .progress-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--violet-500), var(--pink-500));
  transition: width var(--dur-slow) var(--ease);
}

/* 璇楀彞姝ｆ枃 */
.poem-text {
  font-size: var(--fs-lg);
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.poem-pinyin { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; }

/* ============================================================
   棣栭〉 Hero 鈥?CozyPaws 蹇犲疄澶嶅埢
   閰嶈壊: 娣＄矇 #F0FDF1 / 娣辩豢鏂囧瓧 #1a3d1a / 姗?#E86A10
   鍙傝€?CozyPaws pet store hero section 鎻愮ず璇?
   ============================================================ */

/* 鈹€鈹€ 瀛椾綋宸ュ叿绫?鈹€鈹€ */
.font-serif-display { font-family: 'QTxiaotu', serif; }
.font-ui { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }

/* 鈹€鈹€ 鍔ㄧ敾鍏抽敭甯?鈹€鈹€ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes textReveal {
  from { opacity: 0; transform: translateY(40px) skewY(3deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wordPop {
  0%   { opacity: 0; transform: translateY(60px) scale(0.7) rotate(-4deg); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.04) rotate(1deg); filter: blur(0); }
  80%  { transform: translateY(2px) scale(0.98) rotate(-0.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes photoReveal {
  from { opacity: 0; transform: translateY(80px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-fade-up        { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.animate-fade-in        { animation: fadeIn 0.6s ease-out both; }
.animate-slide-up       { animation: slideUp 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.animate-slide-in-left  { animation: slideInLeft 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.animate-slide-in-right { animation: slideInRight 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.animate-text-reveal    { animation: textReveal 1s cubic-bezier(0.16,1,0.3,1) both; }
.animate-word-pop       { animation: wordPop 0.9s cubic-bezier(0.34,1.56,0.64,1) both; opacity: 0; }
.animate-scale-in       { animation: scaleIn 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.animate-photo-reveal   { animation: photoReveal 1.1s cubic-bezier(0.16,1,0.3,1) both; }

/* 鈹€鈹€ 寤惰繜闃舵 鈹€鈹€ */
.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-600  { animation-delay: 0.6s; }
.delay-700  { animation-delay: 0.7s; }
.delay-800  { animation-delay: 0.8s; }
.delay-900  { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1.0s; }
.delay-1100 { animation-delay: 1.1s; }
.delay-1200 { animation-delay: 1.2s; }

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?Hero 瀹瑰櫒锛氳嚜鐒堕珮搴︼紝鍐呭涓嶆埅鏂?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.hero-page {
  /* 楂樺害鑷€傚簲鍐呭锛岃秴瀹藉睆绛夋瘮缂╂斁鐢?--hero-scale 鎺у埗 */
  display: flex;
  flex-direction: column;
  background: var(--hero-bg);

  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  max-width: calc(1440px * var(--hero-scale));
  margin: 0 auto;
}
/* 瓒呭灞忕瓑姣旂缉鏀撅細1280px 璧凤紝鏈€澶?1.5x锛屾墍鏈夊厓绱犲悓姝ユ斁澶?*/

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?Header 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.hero-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px * var(--hero-scale)) calc(48px * var(--hero-scale));
  position: relative;
  z-index: 30;
}
.hero-header .header-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.hero-header .header-logo img {
  width: calc(205px * var(--hero-scale)); height: calc(52px * var(--hero-scale));
}

/* 鏂囧瓧鐗?Logo锛氱帇灏忕嫍鐨勫涔犲眿 鈥?涓婃捣鎽╃櫥浣?*/
.hero-header .header-site-title {
  font-family: 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--hero-ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.hero-header .header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.875rem;
  font-weight: 500;
}
.hero-header .header-nav a {
  color: var(--hero-nav);
  text-decoration: none;
  transition: color 0.2s;
}
.hero-header .header-nav a:hover { color: var(--hero-ink); }
.hero-header .header-nav a.active { color: var(--hero-ink); font-weight: 600; }

/* ── 移动端汉堡菜单（≤1024px 显示；宽屏隐藏） ── */
.hero-header .header-burger {
  display: none; /* 默认隐藏，媒体查询里显示 */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px 8px;
  border: 1px solid rgba(200, 175, 225, 0.5);
  border-radius: var(--radius-md, 12px);
  background: var(--hero-panel);
  box-shadow: var(--shadow-1, 0 1px 4px rgba(0,0,0,0.06));
  cursor: pointer;
  flex-shrink: 0;
}
.hero-header .header-burger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--ink, var(--hero-ink));
  border-radius: 2px;
  transition: transform 0.25s var(--ease, ease), opacity 0.25s;
}
.hero-header .header-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hero-header .header-burger.open span:nth-child(2) { opacity: 0; }
.hero-header .header-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* 下拉菜单面板 */
.header-burger-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 16px;
  min-width: 168px;
  background: var(--hero-panel-strong);
  backdrop-filter: blur(18px);
  border: 1px solid var(--hero-panel-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-3, 0 8px 30px rgba(0,0,0,0.12));
  padding: 8px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: burgerIn 0.22s var(--ease, ease);
}
@keyframes burgerIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.header-burger-panel .burger-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #444);
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, color 0.2s;
}
.header-burger-panel .burger-item:hover { background: var(--violet-50, #f3eeff); color: var(--violet-600, #5b3aa0); }
.header-burger-panel .burger-item.active { color: var(--hero-ink); background: var(--violet-50, #f3eeff); }

.hero-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-header .header-actions .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--hero-line);
  background: var(--hero-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--hero-muted);
  position: relative;
}
.hero-header .header-actions .icon-btn:hover {
  background: var(--hero-card);
  border-color: var(--hero-line-strong);
}
.hero-header .header-actions .icon-btn.accent {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: #fff;
}
.hero-header .header-actions .icon-btn.accent:hover {
  background: var(--hero-accent-deep);
}
.hero-header .header-actions .icon-btn .badge {
  position: absolute;
  top: -1px; right: -1px;
  transform: translate(30%, -30%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--hero-accent);
  border: 2px solid var(--hero-bg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hero-header .header-avatar {
  width:40px;height:40px;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  border: 2px solid var(--hero-panel-border);
  box-shadow:0 2px 10px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.04);
}
.hero-header .header-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?Hero 涓讳綋锛堝浘鐗囧尯锛岃嚜鐒跺睍绀轰笉鎴柇锛?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.hero-main {
  flex: 1;
  position: relative;
  min-height: 0;
  z-index: 1;
  overflow: visible;
}

/* 鏂囧瓧灞傦細flex 瀛愬厓绱狅紝鍗犳嵁绌洪棿锛屼繚璇佹爣棰樺缁堝湪濂冲澶撮《 */
.hero-text-layer {
  flex-shrink: 0;
  text-align: center;
  padding: calc(clamp(1.5rem, 4vh, 3.2rem) * var(--hero-scale)) calc(48px * var(--hero-scale)) calc(clamp(2rem, 5vh, 4rem) * var(--hero-scale)));
  position: relative;
}
.hero-text-layer h1 {
  font-family: 'QTxiaotu', serif;
  color: var(--hero-ink);
  font-size: calc(clamp(36px, 5vw, 56px) * var(--hero-scale));
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}
.hero-text-layer h1 .word {
  display: inline-block;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?娴姩鍗＄墖 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.hero-float-card {
  position: absolute;
  z-index: 4;
  background: var(--hero-card);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.hero-float-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.12);
}

/* 宸﹀崱 */
.hero-card-left {
  top: calc(50px * var(--hero-scale));
  left: calc(48px * var(--hero-scale));
  width: calc(clamp(160px, 14vw, 260px) * var(--hero-scale));
}
.hero-card-left .card-image {
  aspect-ratio: 260/257;
  overflow: hidden;
  position: relative;
}
.hero-card-left .card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-card-left .card-arrow-btn {
  position: absolute;
  bottom: -18px;
  right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--hero-ink);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--hero-ink-line);
  transition: transform 0.2s, background 0.2s;
}
.hero-card-left .card-arrow-btn:hover { background: var(--hero-ink-2); transform: scale(1.08); }
.hero-card-left .card-info {
  padding: 20px 16px 16px;
}
.hero-card-left .card-info .card-label {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  color: var(--hero-muted);
  font-weight: 500;
}
.hero-card-left .card-info .card-price {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  font-weight: 700;
  color: var(--hero-ink);
}

/* 鍙冲崱 */
.hero-card-right {
  top: 50px;
  right: 48px;
  width: clamp(120px, 10vw, 177px);
}
.hero-card-right .card-image {
  aspect-ratio: 177/287;
  overflow: hidden;
  position: relative;
}
.hero-card-right .card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-card-right .play-btn {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--hero-ink);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--hero-ink-line);
  transition: transform 0.2s, background 0.2s;
}
.hero-card-right .play-btn:hover { background: var(--hero-ink-2); transform: translateX(-50%) scale(1.08); }
.hero-card-right .card-info {
  padding: 12px 14px 14px;
}
.hero-card-right .card-info .card-label {
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  color: var(--hero-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?搴曢儴鍥剧墖鏉★紙閿氬畾搴曢儴锛屽浘鐗囪嚜鐒堕珮搴︿笉鎴柇锛?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.hero-bottom-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}
.hero-bottom-strip .strip-panel {
  flex: 1;
  position: relative;
}
.hero-bottom-strip .strip-panel.center {
  flex: 1.265;
}
.hero-bottom-strip .strip-panel img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 闈㈡澘鍙犲姞灞?*/
.strip-overlay {
  position: absolute;
  bottom: clamp(20px, 4vh, 50px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.strip-panel.left .strip-overlay   { left:  clamp(20px, 3vw, 48px); }
.strip-panel.center .strip-overlay { left: 50%; transform: translateX(-50%); text-align: center; flex-direction: column; }
.strip-panel.right .strip-overlay  { right: clamp(20px, 3vw, 48px); }

/* 缁熻寰界珷 */
.stat-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hero-panel-strong);
  backdrop-filter: blur(10px);
  border-radius: 40px;
  padding: 8px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stat-badge .stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1;
}
.stat-badge .stat-label {
  font-size: 0.8rem;
  color: var(--hero-nav);
  font-weight: 500;
}
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack .avatar-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--hero-panel-border);
  background: #eee;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.avatar-stack .avatar-circle:first-child { margin-left: 0; }
.avatar-stack .avatar-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.avatar-stack .avatar-circle.plus {
  background: var(--hero-ink);
  color: #fff;
}

/* 涓ぎ鐧借壊鏍囬 */
.center-heading {
  font-family: 'QTxiaotu', serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin: 0;
  line-height: 1.2;
}
.center-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hero-accent);
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(232,106,16,0.35);
  transition: transform 0.2s, background 0.2s;
  white-space: nowrap;
}
.center-btn:hover { background: var(--hero-accent-deep); transform: translateY(-2px); }

/* 鏄熺骇 */
.star-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hero-panel-strong);
  backdrop-filter: blur(10px);
  border-radius: 40px;
  padding: 8px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-weight: 700;
  color: var(--hero-ink);
  font-size: 1.1rem;
}
.star-badge .star-icon {
  color: var(--hero-accent);
  fill: var(--hero-accent);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?鍝嶅簲寮忥細骞虫澘 (md~lg) 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
@media (max-width: 1024px) {
  .hero-header { padding: 14px 24px; }
  .hero-header .header-nav { display: none; }
  .hero-header .header-burger { display: flex; }
  .hero-header .header-logo img { width: 130px; height: 33px; }
  .hero-text-layer { padding: 2rem 24px 0; }
  .hero-text-layer h1 { font-size: clamp(42px, 8vw, 56px); }
  .hero-card-left {
    top: 80px; left: 16px;
    width: 160px;
  }
  .hero-card-right {
    top: 80px; right: 16px;
    width: 120px;
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?鍝嶅簲寮忥細鎵嬫満 (< md) 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
@media (max-width: 768px) {
  .hero-page { height: auto; overflow: visible; }
  .hero-header {
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  .hero-header .header-nav { display: none; }
  .hero-header .header-logo img { width: 130px; height: 33px; }

  .hero-header .header-actions .icon-btn {
    width: 34px; height: 34px;
  }
  .hero-header .header-avatar {
    width: 34px; height: 34px;
  }

  .hero-main { overflow: visible; flex: auto; }

  .hero-text-layer {
    padding: 24px 20px 0;
    text-align: center;
  }
  .hero-text-layer h1 { font-size: 36px; }

  /* 鍗＄墖骞舵帓 */
  .hero-cards-row {
    display: flex;
    gap: 12px;
    padding: 20px 16px 0;
    position: relative;
    z-index: 4;
  }
  .hero-card-left, .hero-card-right {
    position: static;
    flex: 1;
    width: auto;
  }
  .hero-card-left .card-image { aspect-ratio: 1/1; }
  .hero-card-right .card-image { aspect-ratio: 3/4; }

  /* 缁熻琛?*/
  .hero-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 16px;
    position: relative;
    z-index: 4;
  }
  .hero-stats-row .stat-divider {
    width: 1px; height: 30px;
    background: var(--hero-line);
  }

  /* 搴曢儴鍥?*/
  .hero-bottom-strip {
    position: relative;
    margin-top: 16px;
  }

  .center-heading { font-size: 1.1rem; }
  .center-btn { padding: 10px 20px; font-size: 0.85rem; }
  .stat-badge { padding: 6px 14px; }
  .stat-badge .stat-value { font-size: 1.2rem; }

  .hero-float-card.desktop-only { display: none; }
}

/* 妗岄潰闅愯棌绉诲姩甯冨眬 */
@media (min-width: 769px) {
  .hero-cards-row { display: none; }
  .hero-stats-row { display: none; }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?涓嬫柟锛氱鐩崱鍖哄煙 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.subjects-section {
  padding: 48px 48px 64px;
  background: var(--hero-bg);
}
.subjects-section .subjects-inner {
  max-width: 900px;
  margin: 0 auto;
}
.subjects-section .section-heading {
  font-family: 'QTxiaotu', serif;
  font-size: 2rem;
  color: var(--hero-ink);
  margin-bottom: 24px;
  text-align: center;
}

@media (max-width: 768px) {
  .subjects-section { padding: 32px 20px 60px; }
  .subjects-section .section-heading { font-size: 1.5rem; }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?鍝嶅簲寮忔樉绀哄伐鍏?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
@media (max-width: 640px)  { .hide-on-mobile { display: none !important; } }
@media (min-width: 641px)  { .show-on-desktop { display: flex !important; } }

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?鍑忓急鍔ㄦ晥 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
@media (prefers-reduced-motion: reduce) {
  .animate-word-pop,
  .animate-fade-up,
  .animate-fade-in,
  .animate-slide-up,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-text-reveal,
  .animate-scale-in,
  .animate-photo-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?
   3D 绉戠洰鍗＄墖 鈥?閫忚鍊炬枩 + 浣撶Н鍘氬害 + 灏忕尗鎺㈠ご
   鍙傝€?3D bank card cylinder carousel 鐨勯€忚/灞傚彔鎶€娉?
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/

/* 鈹€鈹€ 3D 鍗＄墖缃戞牸 鈹€鈹€ */
.cards-3d-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  perspective: 1200px;
  position: relative;
  z-index: 1;
}

/* 鈹€鈹€ 姣忓紶鍗＄殑 3D 瀹瑰櫒 鈹€鈹€ */
.card-3d-wrapper {
  position: relative;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  cursor: pointer;
  /* 榛樿 transform 鐢?JS 閫氳繃 CSS 鍙橀噺璁剧疆 */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.card-3d-wrapper:hover {
  transition: transform 0.08s ease-out;
}

/* 鈹€鈹€ 3D 鍘氬害灞傚彔锛? 灞傛ā鎷熺湡瀹炰綋绉級 鈹€鈹€ */
.card-3d-slice {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* 鈹€鈹€ 灏忕尗鎺㈠ご鍏冪礌 鈹€鈹€ */
.cat-peeker {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-size: 38px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
.cat-peeker.left {
  left: -18px;
  top: 50%;
  animation: catPeekLeft 3.5s ease-in-out infinite;
}
.cat-peeker.right {
  right: -18px;
  top: 50%;
  animation: catPeekRight 3.5s ease-in-out infinite;
}
.cat-peeker.dog { animation-delay: 1.2s; }

@keyframes catPeekLeft {
  0%   { transform: translateY(-55%) rotate(-15deg) translateX(-30px); opacity: 0; }
  18%  { transform: translateY(-55%) rotate(-15deg) translateX(0); opacity: 1; }
  82%  { transform: translateY(-55%) rotate(-15deg) translateX(0); opacity: 1; }
  100% { transform: translateY(-55%) rotate(-15deg) translateX(-30px); opacity: 0; }
}
@keyframes catPeekRight {
  0%   { transform: translateY(-55%) rotate(15deg) scaleX(-1) translateX(-30px); opacity: 0; }
  18%  { transform: translateY(-55%) rotate(15deg) scaleX(-1) translateX(0); opacity: 1; }
  82%  { transform: translateY(-55%) rotate(15deg) scaleX(-1) translateX(0); opacity: 1; }
  100% { transform: translateY(-55%) rotate(15deg) scaleX(-1) translateX(-30px); opacity: 0; }
}

/* 鈹€鈹€ 鍗＄墖姝ｉ潰锛堟渶椤跺眰锛?鈹€鈹€ */
.card-3d-front {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}
.card-3d-wrapper:hover .card-3d-front {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.10),
    0 20px 48px rgba(0,0,0,0.14);
}

/* 鍗＄墖椤堕儴鑹叉潯 */
.card-3d-front .card-3d-stripe {
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}
.card-3d-front.yuwen  .card-3d-stripe { background: linear-gradient(90deg, #9C7BFF, #6A45C9); }
.card-3d-front.yingyu .card-3d-stripe { background: linear-gradient(90deg, #F789B8, #E23D86); }
.card-3d-front.shuxue .card-3d-stripe { background: linear-gradient(90deg, #F5B84B, #E8A020); }
.card-3d-front.checkin .card-3d-stripe { background: linear-gradient(90deg, #FBB3D0, #F06292); }

/* 鍗＄墖涓讳綋 */
.card-3d-front .card-3d-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px 18px;
  gap: 4px;
}
.card-3d-front .card-3d-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: #fff;
}
.card-3d-front.yuwen  .card-3d-icon { background: linear-gradient(140deg, #9C7BFF, #6A45C9); }
.card-3d-front.yingyu .card-3d-icon { background: linear-gradient(140deg, #F789B8, #E23D86); }
.card-3d-front.shuxue .card-3d-icon { background: linear-gradient(140deg, #F5B84B, #E8A020); }
.card-3d-front.checkin .card-3d-icon { background: linear-gradient(140deg, #FBB3D0, #F06292); }

.card-3d-front .card-3d-icon svg { width: 28px; height: 28px; }

.card-3d-front .card-3d-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a3d1a;
  line-height: 1.2;
}
.card-3d-front .card-3d-desc {
  font-size: 0.82rem;
  color: #777;
  font-weight: 500;
}
.card-3d-front .card-3d-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.card-3d-front .card-3d-tag {
  display: inline-flex;
  align-items: center;
  background: #F0F5F0;
  color: #5A7A5A;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* 绠ご鎸囩ず */
.card-3d-front .card-3d-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #1a3d1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.card-3d-wrapper:hover .card-3d-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* 鈹€鈹€ 涓績 overlay 瀛椾綋淇 鈹€鈹€ */
.hero-bottom-strip .center-heading {
  font-family: 'QTxiaotu', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

/* 鈹€鈹€ 鍝嶅簲寮忥細3D 鍗＄墖 鈹€鈹€ */
@media (max-width: 768px) {
  .cards-3d-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    perspective: 800px;
  }
  .card-3d-wrapper { height: 170px; }
  .cat-peeker { font-size: 30px; }
  .cat-peeker.left  { left: -12px; }
  .cat-peeker.right { right: -12px; }
}
@media (max-width: 640px) {
  .cards-3d-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    perspective: 800px;
  }
  .card-3d-wrapper { height: 180px; }
  .card-3d-front .card-3d-body { padding: 10px 14px 14px; }
  .card-3d-front .card-3d-title { font-size: 1rem; }
  .card-3d-front .card-3d-desc { font-size: 0.72rem; }
  .card-3d-front .card-3d-icon { width: 40px; height: 40px; border-radius: 12px; }
  .card-3d-front .card-3d-icon svg { width: 22px; height: 22px; }
  .card-3d-front .card-3d-tag { font-size: 0.68rem; padding: 2px 10px; }
}

/* ============================================================
   鐖嵃鎸夐敭鍗＄墖 鈥?鍙傝€冨浘娣¤壊绯婚鏍?+ 鐚嫍涓婚 + 鎮诞鍔ㄧ敾
   鏇夸唬鏃?3D 鍗＄墖锛岀敤浜庨椤电鐩叆鍙?
   ============================================================ */

/* 鈹€鈹€ 2 鍒楃綉鏍?鈹€鈹€ */
.paw-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* 鈹€鈹€ 澶栧眰瀹瑰櫒锛堢粰鎺㈠ご瑙掕壊鐢級 鈹€鈹€ */
.paw-card-wrapper {
  position: relative;
}

/* 鈹€鈹€ 鍗＄墖涓讳綋锛氭贰鑹插簳銆佸ぇ鍦嗚銆乫lex 鍒?鈹€鈹€ */
.paw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 28px 22px 22px;
  cursor: pointer;
  min-height: 190px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.33,1,0.68,1),
              box-shadow 0.35s cubic-bezier(0.33,1,0.68,1);
}

/* 鈹€鈹€ 鍚勭鐩贰鑹茶儗鏅?+ 鍒濆闃村奖 鈹€鈹€ */
.paw-card.yuwen  { background: var(--paw-yuwen); box-shadow: 0 2px 12px rgba(123,85,224,0.10); }
.paw-card.yingyu { background: var(--paw-yingyu); box-shadow: 0 2px 12px rgba(240,90,156,0.10); }
.paw-card.shuxue { background: var(--paw-shuxue); box-shadow: 0 2px 12px rgba(232,160,32,0.10); }
.paw-card.checkin { background: var(--paw-checkin); box-shadow: 0 2px 12px rgba(226,61,134,0.10); }

/* 鎮诞锛氫笂娴?+ 闃村奖鍔犳繁 */
.paw-card:hover {
  transform: translateY(-8px);
}
.paw-card.yuwen:hover  { box-shadow: 0 8px 32px rgba(123,85,224,0.18); }
.paw-card.yingyu:hover { box-shadow: 0 8px 32px rgba(240,90,156,0.18); }
.paw-card.shuxue:hover { box-shadow: 0 8px 32px rgba(232,160,32,0.18); }
.paw-card.checkin:hover { box-shadow: 0 8px 32px rgba(226,61,134,0.18); }

/* 鈹€鈹€ 鑳屾櫙鍏夋檿锛堝彸涓嬭锛?鈹€鈹€ */
.paw-card::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.06;
  transition: opacity 0.35s cubic-bezier(0.33,1,0.68,1);
}
.paw-card.yuwen::after  { background: radial-gradient(circle at 30% 30%, #7B55E0, transparent 70%); }
.paw-card.yingyu::after { background: radial-gradient(circle at 30% 30%, #F05A9C, transparent 70%); }
.paw-card.shuxue::after { background: radial-gradient(circle at 30% 30%, #E8A020, transparent 70%); }
.paw-card.checkin::after { background: radial-gradient(circle at 30% 30%, #E23D86, transparent 70%); }
.paw-card:hover::after { opacity: 0.16; }

/* 鈹€鈹€ 宸︿笂瑙掑渾褰㈢埅鍗版寜閽?鈹€鈹€ */
.paw-card-corner {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s cubic-bezier(0.33,1,0.68,1);
}
.paw-card-corner svg { width: 15px; height: 15px; }

.paw-card.yuwen  .paw-card-corner { background: #7B55E0; }
.paw-card.yingyu .paw-card-corner { background: #F05A9C; }
.paw-card.shuxue .paw-card-corner { background: #E8A020; }
.paw-card.checkin .paw-card-corner { background: #E23D86; }

.paw-card:hover .paw-card-corner {
  transform: rotate(22deg) scale(1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* 鈹€鈹€ 鐚?鐙楄楗板浘鏍?鈹€鈹€ */
.paw-card-deco {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
  margin-top: 2px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.paw-card-deco svg { width: 50px; height: 50px; display: block; }

.paw-card.yuwen  .paw-card-deco { color: #7B55E0; }
.paw-card.yingyu .paw-card-deco { color: #F05A9C; }
.paw-card.shuxue .paw-card-deco { color: #E8A020; }
.paw-card.checkin .paw-card-deco { color: #E23D86; }

.paw-card:hover .paw-card-deco {
  transform: translateY(-5px) rotate(-6deg);
}

/* 鈹€鈹€ 鏂囧瓧鍐呭 鈹€鈹€ */
.paw-card .paw-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
}
.paw-card .paw-card-desc {
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 10px;
}
.paw-card .paw-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.paw-card .paw-card-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.68);
  color: var(--text-2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* 鈹€鈹€ 鐚?鐙楁帰澶磋鑹诧紙SVG 鐗堬紝鏇夸唬 emoji锛?鈹€鈹€ */
.paw-peeker {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.33,1,0.68,1);
}
.paw-peeker svg { display: block; }

.paw-peeker.left {
  left: -16px;
  top: 50%;
  transform: translateY(-60%);
}
.paw-peeker.right {
  right: -16px;
  top: 50%;
  transform: translateY(-60%) scaleX(-1);
}

.paw-card-wrapper:hover .paw-peeker {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.paw-card-wrapper:hover .paw-peeker.left {
  transform: translateY(-60%) translateX(-6px);
}
.paw-card-wrapper:hover .paw-peeker.right {
  transform: translateY(-60%) scaleX(-1) translateX(-6px);
}

/* 鈹€鈹€ 鍝嶅簲寮?鈹€鈹€ */
@media (max-width: 768px) {
  .paw-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .paw-card { min-height: 160px; padding: 24px 18px 18px; }
  .paw-card-corner { width: 30px; height: 30px; top: 12px; left: 12px; }
  .paw-card-corner svg { width: 13px; height: 13px; }
  .paw-card-deco { width: 42px; height: 42px; }
  .paw-card-deco svg { width: 42px; height: 42px; }
  .paw-card .paw-card-title { font-size: 1.1rem; }
  .paw-card .paw-card-desc { font-size: 0.8rem; }
}

@media (max-width: 640px) {
  .paw-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .paw-card { min-height: 170px; padding: 22px 14px 14px; }
  .paw-card-corner { width: 28px; height: 28px; top: 10px; left: 10px; }
  .paw-card-corner svg { width: 12px; height: 12px; }
  .paw-card-deco { width: 36px; height: 36px; margin-bottom: 4px; }
  .paw-card-deco svg { width: 36px; height: 36px; }
  .paw-card .paw-card-title { font-size: 0.95rem; }
  .paw-card .paw-card-desc { font-size: 0.7rem; }
  .paw-card .paw-card-tag { font-size: 0.65rem; padding: 3px 10px; }
  .paw-peeker { display: none; }
}

/* 鍑忓急鍔ㄦ晥 */
@media (prefers-reduced-motion: reduce) {
  .paw-card,
  .paw-card-corner,
  .paw-card-deco,
  .paw-card::after,
  .paw-peeker {
    transition: none !important;
    animation: none !important;
  }
  .paw-card:hover { transform: none; }
  .paw-card:hover .paw-card-corner { transform: none; }
  .paw-card:hover .paw-card-deco { transform: none; }
  .paw-card-wrapper:hover .paw-peeker { transform: none; }
}

/* ============================================================
   绉戠洰鍏ュ彛鍗?鈥?宸︽枃鍙冲浘鎷兼帴椋庢牸锛堥紶鏍囨嫾鍥撅級
   ============================================================ */
.subject-card-image {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.35s cubic-bezier(0.33,1,0.68,1),
              box-shadow 0.35s cubic-bezier(0.33,1,0.68,1);
  cursor: pointer;
}
.subject-card-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
}
.subject-card-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 800 / 300;
  object-fit: cover;
  object-position: left;
}
.card-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(156,123,255,0.08), rgba(226,61,134,0.08));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.subject-card-image:hover .card-hover-overlay {
  opacity: 1;
}
.card-hover-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(30,30,50,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.subject-card-image:hover .card-hover-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.card-hover-arrow svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   鑻辫瀛愰〉 路 Picture Book 涓婚
   register=product 路 A=warm-paper+coral 路 B=QTxiaotu display 路
   C=asymmetric storybook layout 路 D=CSS-only hand-drawn motion 路 E=paper+ink
   SOUL=7 SPECTACLE=4 DENSITY=6
*/


/* 鈹€鈹€ 鑻辫瀛愰〉 路 Picture Book 涓婚鑹叉澘 鈹€鈹€ */
.pb-page {
  --paper:       #FDF6EC;
  --paper-dark:  #F5E6D3;
  --coral-light: #F2C4B4;
  --forest:      #5A8F5E;
  --forest-soft: #E8F5E9;
  --sky:         #5B8FBF;
  --sky-soft:    #E3F2FD;
  --grape:       #8B6AAF;
  --grape-soft:  #F3EEFA;
  --ink-light:   #7A6B5D;
  --cream:       #FFFAF5;
}

/* 鈹€鈹€ 椤甸潰瀹瑰櫒锛氭殩绾歌壊 鈹€鈹€ */
.pb-page {
  position: relative;
  min-height: 100dvh;
  background: var(--paper);
  overflow: hidden;
  color: var(--ink);
}

/* 鈹€鈹€ 鑳屾櫙灞?鈹€鈹€ */
.pb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 娉㈡氮搴曡竟 */
.pb-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  opacity: 0.5;
}

/* 瑁呴グ瀛楁瘝鍗扮珷 */
.pb-letter-stamp {
  position: absolute;
  font-family: 'QTxiaotu', serif;
  font-weight: 700;
  opacity: 0.12;
  pointer-events: none;
  animation: pbLetterFloat 7s ease-in-out infinite;
  line-height: 1;
}
@keyframes pbLetterFloat {
  0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%     { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 6deg)); }
}

/* 灏忚楗扮偣 */
.pb-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0.15;
  animation: pbDotPulse 4s ease-in-out infinite;
}
@keyframes pbDotPulse {
  0%,100% { transform: scale(1); opacity: 0.15; }
  50%     { transform: scale(1.4); opacity: 0.25; }
}

/* 鈹€鈹€ 涓诲唴瀹瑰尯 鈹€鈹€ */
.pb-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 鈹€鈹€ Hero 鈹€鈹€ */
.pb-hero {
  text-align: center;
  padding: 16px 0 4px;
  animation: pageIn 0.6s cubic-bezier(0.33,1,0.68,1) both;
}
.pb-hero-emblem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1.5px solid var(--coral-light);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  color: var(--ink-light);
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(224,123,95,0.10);
}
.pb-hero-emblem svg { opacity: 0.7; }
.pb-title {
  font-family: 'QTxiaotu', serif;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.pb-title-en { color: var(--coral); }
.pb-title-cn { color: var(--ink); }
.pb-subtitle {
  font-size: 1rem;
  color: var(--ink-light);
  margin: 0 0 12px;
}
.pb-title-underline {
  width: 200px;
  margin: 0 auto;
  color: var(--coral-light);
  opacity: 0.7;
}
.pb-title-underline svg {
  width: 100%;
  height: 12px;
}

/* 鈹€鈹€ 姣忔棩鍗曡瘝 鈹€鈹€ */
.pb-daily {
  background: var(--cream);
  border: 2px dashed var(--coral-light);
  border-radius: 20px;
  padding: 18px 24px;
  width: 100%;
  max-width: 620px;
  box-shadow: 0 2px 12px rgba(224,123,95,0.08);
  animation: pageIn 0.6s cubic-bezier(0.33,1,0.68,1) 0.08s both;
  position: relative;
}
.pb-daily::before {
  content: '';
  position: absolute;
  top: -3px; left: 20px;
  width: 16px; height: 16px;
  background: var(--paper);
  border-left: 2px dashed var(--coral-light);
  border-top: 2px dashed var(--coral-light);
  transform: rotate(45deg);
}
.pb-daily-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pb-daily-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--coral);
  background: var(--coral-soft);
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pb-daily-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--coral-light), transparent);
}
.pb-daily-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pb-daily-icon-wrap {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--coral-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  animation: bob 3.5s ease-in-out infinite;
}
.pb-daily-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.pb-daily-word {
  font-family: 'QTxiaotu', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.pb-daily-phonetic {
  font-size: 0.82rem;
  color: var(--ink-light);
  font-style: italic;
}
.pb-daily-cn {
  font-size: 0.95rem;
  color: var(--coral);
  font-weight: 600;
  flex-shrink: 0;
  padding: 4px 12px;
  background: var(--coral-soft);
  border-radius: var(--radius-sm);
}
.pb-audio-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--coral-light);
  background: var(--cream);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.pb-audio-btn:hover {
  background: var(--coral-soft);
  transform: scale(1.1);
}

/* 鈹€鈹€ 涓夊紶鍏ュ彛鍗＄墖 鈹€鈹€ */
.pb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  animation: pageIn 0.6s cubic-bezier(0.33,1,0.68,1) 0.16s both;
}
@media (max-width: 680px) {
  .pb-cards { grid-template-columns: 1fr; max-width: 340px; }
}
.pb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  padding: 24px 16px 20px;
  border: 2px solid transparent;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.33,1,0.68,1), box-shadow 0.35s cubic-bezier(0.33,1,0.68,1);
  animation: cardPop 0.5s cubic-bezier(0.33,1,0.68,1) both;
}
.pb-card:nth-child(1) { animation-delay: 0.2s; }
.pb-card:nth-child(2) { animation-delay: 0.3s; }
.pb-card:nth-child(3) { animation-delay: 0.4s; }
@keyframes cardPop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}
.pb-card--pig  { background: linear-gradient(155deg, #FFF5F3, #FFE8E2); border-color: rgba(224,123,95,0.25); transform: rotate(-1.2deg); }
.pb-card--pig:hover { transform: rotate(0deg) translateY(-4px); }
.pb-card--tree { background: linear-gradient(155deg, #F0F9F1, #E0F0E4); border-color: rgba(90,143,94,0.25); transform: rotate(0.8deg); }
.pb-card--tree:hover { transform: rotate(0deg) translateY(-4px); }
.pb-card--book { background: linear-gradient(155deg, #F0F5FC, #E0EBF8); border-color: rgba(91,143,191,0.25); transform: rotate(-0.6deg); }
.pb-card--book:hover { transform: rotate(0deg) translateY(-4px); }

.pb-card-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.pb-card-stamp {
  font-size: 2.6rem;
  line-height: 1;
  animation: bob 4s ease-in-out infinite;
}
.pb-card-body h2 {
  font-family: 'QTxiaotu', serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.2;
}
.pb-card--pig .pb-card-body h2  { color: var(--coral); }
.pb-card--tree .pb-card-body h2 { color: var(--forest); }
.pb-card--book .pb-card-body h2 { color: var(--sky); }
.pb-card-body p { font-size: 0.82rem; color: var(--ink-light); margin: 0 0 8px; }
.pb-card-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.pb-tag {
  font-size: 0.7rem;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.pb-card--pig .pb-tag  { background: var(--coral-soft); color: var(--coral); }
.pb-card--tree .pb-tag { background: var(--forest-soft); color: var(--forest); }
.pb-card--book .pb-tag { background: var(--sky-soft);  color: var(--sky); }
.pb-card-arrow {
  position: absolute;
  bottom: 10px; right: 12px;
  font-size: 1.3rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.2s, transform 0.2s;
}
.pb-card:hover .pb-card-arrow { opacity: 0.5; transform: translateX(0); }

/* 鈹€鈹€ 瀛楁瘝鏉?鈹€鈹€ */
.pb-alphabet {
  width: 100%;
  max-width: 680px;
  background: var(--cream);
  border: 1.5px solid var(--paper-dark);
  border-radius: var(--radius-pill);
  padding: 14px 20px;
  box-shadow: var(--shadow-1);
  animation: pageIn 0.6s cubic-bezier(0.33,1,0.68,1) 0.24s both;
}
.pb-alpha-intro {
  font-family: 'QTxiaotu', serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--ink-light);
  text-align: center;
  line-height: 2;
  display: block;
}

/* 鈹€鈹€ 鍑忓皯鍔ㄦ晥 鈹€鈹€ */
@media (prefers-reduced-motion: reduce) {
  .pb-letter-stamp, .pb-dot, .pb-daily-icon-wrap, .pb-card-stamp { animation: none !important; }
  .pb-card, .pb-card-arrow, .pb-audio-btn { transition: none !important; }
  .pb-card:hover { transform: none; }
  .pb-card--pig, .pb-card--tree, .pb-card--book { transform: none; }
}

/* 鈹€鈹€ 鍗曢泦鍙傝€冪粯鏈唴宓?frame锛坋pisode with reference field锛夆攢鈹€ */
/* 鏃犺竟妗嗘棤闃村奖锛氬唴瀹圭洿鎺ヨ瀺鍏ラ〉闈紝鍙繚鐣欓〉闈㈡渶鍙充晶婊氬姩鏉?*/
.ep-reference-frame {
  margin-top: 20px;
  overflow: visible;
}
.ep-reference-frame iframe {
  display: block;
  width: 100%;
  border: none;
  /* 楂樺害鐢?React 鍔ㄦ€佹祴閲忓唴瀹瑰悗鍐呰仈璁剧疆锛坕frame 鑷韩涓嶆粴鍔紝鏁撮〉鍞竴婊氬姩鏉★級 */
}
/* 鍙充晶鎮诞鎸夐挳鍒楋細闅愯棌涓枃 + 鐢熻瘝鏈紝婊氬姩鍏ㄧ▼鍙 */
.ep-float-col {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
/* 甯告偓娴?闅愯棌涓枃"鎸夐挳锛氫笌鐢熻瘝鏈寜閽悓灏哄锛?8x86锛夛紝鏂囧瓧绾靛悜灞呬腑 */
.ep-float-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: #555;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  box-shadow: 0 4px 14px rgba(30, 41, 59, .12);
  transition: all .2s;
  font-family: inherit;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* ⚠️ :hover 只在"真能悬停"的设备上生效（同 .ep-lookup-tip：iPad 首次点按会被当成 hover 而吃掉 click） */
@media (hover: hover) and (pointer: fine) { .ep-float-btn:hover { background: #fff; border-color: rgba(0, 0, 0, 0.2); color: #0e7490; } }
/* 中文隐藏激活态：红色圆底 */
.ep-float-btn.is-hidden { background: #f43f5e; border-color: #f43f5e; color: #fff; }
@media (hover: hover) and (pointer: fine) { .ep-float-btn.is-hidden:hover { background: #e11d48; border-color: #e11d48; } }
/* 鐢熻瘝鏈偓娴寜閽細涓庨殣钘忎腑鏂囨寜閽悓灏哄锛?8x86锛夛紝鏂囧瓧绾靛悜鎺掑垪 */
/* 搜索按钮激活态（词典面板打开时） */
.ep-float-btn.is-active { background: #fff; border-color: #0e7490; color: #0e7490; }
/* 划词确认浮标：选中文字后先出这个小按钮（**不弹面板**），点了才弹词典面板。
   为什么要两段式：面板自己跳出来会即时挡住鼠标/手指，用户就没法把选区拖大改小了。 */
.ep-lookup-tip {
  position: fixed;
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 13px;
  border: none;
  border-radius: 999px;
  background: #0e7490;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(14, 116, 144, .34);
  transform: translate(-50%, 0); /* 默认贴在选区下沿（用户要求：浮标在高亮下方） */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* 长按别弹系统"拷贝/查询"菜单，免得抢走触摸 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: ep-tip-in .16s ease-out;
}
/* 选区贴着屏幕底、下方放不下时翻到上方：top 已是选区上沿，往上平移整颗浮标高度 */
.ep-lookup-tip.is-above { transform: translate(-50%, -100%); }
/* ⚠️ :hover 只在"真能悬停"的设备上生效：iPad/Safari 上首次点按会被当成 hover，
   带 :hover 的规则会吃掉这一次 click（安卓/桌面不受影响）→ 点浮标没反应。 */
@media (hover: hover) and (pointer: fine) { .ep-lookup-tip:hover { background: #0c6580; } }
.ep-lookup-tip:active { background: #0b5b73; }
.ep-lookup-tip svg { flex: none; opacity: .92; }
@keyframes ep-tip-in { from { opacity: 0; } to { opacity: 1; } }
/* 词典面板打开时的极淡蒙版：全屏 click-catcher，点它即关面板（z-index 低于悬浮列，按钮/面板仍可用） */
.ep-dict-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, .08);
  cursor: default;
  animation: ep-tip-in .12s ease-out;
}
/* 悬浮词典面板：贴在按钮列左侧，面板内直接查词典 + 收藏，不跳页 */
.ep-dict-pop {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: min(480px, calc(100vw - 90px));
  max-height: min(72vh, 640px);
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(30, 41, 59, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.ep-dict-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 2px solid #f1e5c8;
  background: #fffdf5;
  flex: none;
}
.ep-dict-pop-form { flex: 1; display: flex; gap: 8px; min-width: 0; }
.ep-dict-pop-form input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: #334155;
}
.ep-dict-pop-form input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, .15); }
.ep-dict-pop-form button {
  border: none;
  border-radius: 999px;
  background: #0e7490;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  flex: none;
  transition: background .15s;
}
.ep-dict-pop-form button:hover { background: #0c6580; }
.ep-dict-pop-close {
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 15px;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 8px;
  flex: none;
  line-height: 1;
}
.ep-dict-pop-close:hover { background: #f1f5f9; color: #475569; }
/* 当前词 + 收藏条 */
.ep-dict-pop-fav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1.5px dashed #f1e5c8;
  flex: none;
}
.ep-dict-pop-word { font-weight: 900; font-size: 16px; color: #0e7490; overflow-wrap: anywhere; }
.ep-dict-pop-favbtn {
  border: 1.5px solid #fbbf24;
  background: #fffbeb;
  color: #b45309;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  flex: none;
  transition: all .15s;
}
.ep-dict-pop-favbtn:hover { background: #fef3c7; }
.ep-dict-pop-favbtn.is-saved { background: #fbbf24; color: #fff; border-color: #fbbf24; }
.ep-dict-pop-favbtn.is-saved:hover { background: #f59e0b; }
/* 词典结果滚动区 */
.ep-dict-pop-body { overflow-y: auto; padding: 12px; flex: 1; min-height: 0; }
.ep-dict-pop-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13.5px;
  padding: 26px 0;
  line-height: 2;
}
/* 鍥炲埌椤剁鎮诞鎸夐挳锛氫笌鐢熻瘝鏈寜閽悓灏哄锛岀澶村悜涓?*/
.ep-top-float svg { transform: rotate(-90deg); } /* arrow 图标旋转为向上 */
@media (max-width: 640px) {
  .ep-float-col { top: auto; bottom: 16px; transform: none; }
  /* 小屏：面板改为贴着按钮列往上展开。
     不能沿用 top:50%+translateY(-50%) —— 那样面板会有一截掉到屏幕外面（底部被截），
     看上去就像"弹了但没弹"。 */
  .ep-dict-pop {
    top: auto;
    bottom: 0;
    transform: none;
    right: 52px;
    width: calc(100vw - 76px);
    max-height: min(66vh, 560px);
  }
}
/* ============================================================
   鍙よ瘲璇嶆敞瑙ｅ尯锛堣鎯呴〉锛?
   ============================================================ */
.anno-row {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--violet-100);
  align-items: flex-start;
}
.anno-row:last-child { border-bottom: none; }
.anno-word {
  flex-shrink: 0;
  min-width: 72px;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(140deg, var(--violet-100), var(--pink-100));
  color: var(--violet-600);
  font-weight: 800;
  border-radius: 12px 24px 14px 20px / 12px 18px 14px 16px;
  padding: 3px 12px;
}
.anno-tongjia {
  background: var(--amber-soft);
  border: 1.5px dashed var(--amber);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 12px;
  font-size: var(--fs-base);
  line-height: 1.9;
}
.anno-tongjia b { color: #B5730E; font-weight: 800; }
.anno-usage .anno-word {
  background: linear-gradient(140deg, var(--amber-soft), var(--pink-100));
  color: #B5730E;
}

/* ============================================================
   鍙よ瘲璇嶇瓫閫夛紙鍒楄〃椤典笅鎷夛級
   ============================================================ */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 4px;
}
@media (max-width: 560px) {
  .filter-bar { grid-template-columns: 1fr; }
}
.filter-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 5px;
}
.select-filter {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background-color: var(--card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237B55E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 2px solid var(--violet-200);
  border-radius: var(--radius);
  padding: 11px 40px 11px 16px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.select-filter:hover { border-color: var(--violet-300); }
.select-filter:focus {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 4px rgba(190,160,225,0.3);
}
.filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--violet-600);
  background: var(--violet-50);
  border: 1.5px dashed var(--violet-300);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  user-select: none;
}
.filter-reset:hover { background: var(--violet-100); }

/* ============================================================
   瀛愰〉闈㈤《鏍忓鍣紙鑳屾櫙閫忔槑锛岃鍏ㄧ珯姘村僵鏅曟煋閫忎笂鏉ワ級
   ============================================================ */
.site-header-wrap {
  /* 淇锛氬師鏉ョ敤瀹炲績 var(--bg) 浼氭尅浣?body 涓婄殑姘村僵鏅曟煋锛屽舰鎴愮櫧鑹叉í甯?*/
  background: transparent;
  max-width: calc(1440px * var(--hero-scale));
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .site-header-wrap { max-width: none; }
}

/* 鈹€鈹€ 椤舵爮鍦嗗舰鍥炬爣锛氭偓鍋滃皬鎻愮ず 鈹€鈹€ */
.header-actions .icon-btn,
.header-actions .header-avatar {
  position: relative;
}
.header-actions .icon-btn::after,
.header-actions .header-avatar::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(26, 61, 26, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.header-actions .icon-btn:hover::after,
.header-actions .header-avatar:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════ 口算练习 modal + input 样式 ════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: var(--card);
  border-radius: 24px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-3);
  animation: modalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 隐藏 number input 上下箭头 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ════════════════ 口算练习题目网格 ════════════════ */
/* 桌面 4 列：第1列乘法 | 第2列除法 | 第3列加法 | 第4列减法（题库按此列序生成） */
.kq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
/* 手机降为 2 列：行顺序仍是 乘、除、加、减 循环 */
@media (max-width: 720px) {
  .kq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* ============================================================
   古诗详情页 · 左诗右注分栏
   ============================================================ */
.poem-split-left  { border-right: 1px dashed var(--violet-100); }
@media (max-width: 640px) {
  .poem-split { grid-template-columns: 1fr !important; }
  .poem-split-left { border-right: none !important; border-bottom: 1px dashed var(--violet-100); }
}

/* ── 跟读录音：脉冲红点 ── */
@keyframes followupPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ---------- 🔍 划词查词：选中任意词 → 自动弹右侧词典面板（见 WordLookup.jsx） ----------
   面板/悬浮按钮样式复用 .ep-float-col / .ep-dict-pop（本文件「单集参考绘本内嵌 iframe」一节） */
/* ============================================================
   🎪 蛋仔派对数学主题（shuxue-eggy）· 配色级皮肤
   锚点：<html data-skin="shuxue-eggy">（由 SkinProvider 写入）
   世界：深夜嘉年华紫红幕布 + 票纸奶白 + 蛋仔官方黄
   范围：/shuxue/* 全部页面（数学角主页、口算、批改、错题本、游戏）
   原则：只换外观不动 DOM —— 顶栏与顶部开关排完整保留；
         每条选择器都带 [data-skin="shuxue-eggy"] 前缀，切回
         shuxue-default 时零残留。
   素材：public/shuxue-eggy/（官方角色裁剪 + Logo，源自 party.163.com）
   ============================================================ */

/* ── 1. 全站变量层：把紫粉水彩换成嘉年华夜 ── */
[data-skin="shuxue-eggy"] {
  /* 文字：票纸奶白系 */
  --text: #F3EBDD;
  --text-2: #C9B8D9;
  --text-3: #9A8AB8;
  --ink: #FFF6DC;

  /* 主色：蛋仔官方黄（票纸/药丸/按钮） */
  --violet-600: #E8B400;
  --violet-500: #FFD100;
  --violet-400: #FFE066;
  --violet-300: #FFEB99;
  --violet-200: rgba(255, 209, 0, 0.32);
  --violet-100: rgba(255, 209, 0, 0.18);
  --violet-50:  rgba(255, 209, 0, 0.10);

  /* 辅助：闸机红绿灯 + 幕布紫 */
  --pink-600: #FF4757;
  --pink-500: #FF6B7A;
  --pink-400: #FF8FA0;
  --pink-300: #FFB3BE;
  --pink-200: rgba(255, 71, 87, 0.30);
  --pink-100: rgba(255, 71, 87, 0.16);
  --pink-50:  rgba(255, 71, 87, 0.09);

  /* 底色与卡片：夜幕玻璃 */
  --bg: #1D1030;
  --bg-soft: #241638;
  --card: rgba(44, 28, 66, 0.66);
  --card-border: rgba(255, 209, 0, 0.22);
  --card-solid: #2B1D45;

  /* 阴影：夜里更深 */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.34), 0 16px 36px rgba(0, 0, 0, 0.42);
  --shadow-pink: 0 2px 6px rgba(255, 71, 87, 0.16), 0 8px 24px rgba(255, 71, 87, 0.20);
  --shadow: var(--shadow-2);
  --shadow-hover: var(--shadow-pink);

  /* 科目色：数学 = 蛋仔黄 */
  --subject-shuxue: #FFD100;
  --subject-shuxue-soft: rgba(255, 209, 0, 0.15);
  --amber: #FFD100;
  --amber-2: #FFE066;
  --amber-soft: rgba(255, 209, 0, 0.14);

  /* Hero 令牌（顶栏用） */
  --hero-bg: transparent;
  --hero-ink: #FFF6DC;
  --hero-ink-2: #E8D9C0;
  --hero-nav: #BBA9D6;
  --hero-muted: #9A8AB8;
  --hero-accent: #FFD100;
  --hero-accent-deep: #E8B400;
  --hero-panel: rgba(44, 28, 66, 0.55);
  --hero-panel-strong: rgba(44, 28, 66, 0.85);
  --hero-panel-border: rgba(255, 209, 0, 0.22);
  --hero-card: rgba(44, 28, 66, 0.66);

  /* 兼容旧名 */
  --primary: #FFD100;
  --primary-dark: #E8B400;
  --primary-light: #FFE066;
  --pink: #FF6B7A;
  --pink-deep: #FF4757;
  --pink-light: rgba(255, 107, 122, 0.30);
  --text-light: var(--text-2);
}

/* ── 2. 页面底色：深夜嘉年华幕布 + 星点 bokeh ── */
[data-skin="shuxue-eggy"] body {
  background:
    radial-gradient(3px 3px at 12% 18%, rgba(255, 209, 0, 0.35) 40%, transparent 41%),
    radial-gradient(2px 2px at 78% 10%, rgba(255, 255, 255, 0.30) 40%, transparent 41%),
    radial-gradient(3px 3px at 88% 60%, rgba(255, 71, 87, 0.30) 40%, transparent 41%),
    radial-gradient(2px 2px at 20% 74%, rgba(255, 255, 255, 0.22) 40%, transparent 41%),
    radial-gradient(3px 3px at 55% 6%,  rgba(255, 209, 0, 0.25) 40%, transparent 41%),
    radial-gradient(2px 2px at 40% 46%, rgba(255, 107, 122, 0.22) 40%, transparent 41%),
    linear-gradient(160deg, #241033 0%, #3D1145 100%);
  background-attachment: fixed;
}
/* 原水彩装饰层 → 换成极光淡紫幕布晕 */
[data-skin="shuxue-eggy"] body::before {
  background:
    radial-gradient(ellipse 900px 700px at 8% -5%, rgba(155, 93, 229, 0.16), transparent 55%),
    radial-gradient(ellipse 750px 580px at 94% -2%, rgba(255, 71, 87, 0.10), transparent 52%),
    radial-gradient(ellipse 620px 500px at 88% 44%, rgba(139, 92, 246, 0.12), transparent 58%),
    radial-gradient(ellipse 580px 460px at 12% 52%, rgba(45, 212, 191, 0.07), transparent 55%),
    radial-gradient(ellipse 700px 420px at 52% 92%, rgba(255, 209, 0, 0.06), transparent 55%);
}
[data-skin="shuxue-eggy"] body::after {
  background:
    radial-gradient(ellipse 500px 380px at 82% 62%, rgba(255, 209, 0, 0.06), transparent 60%),
    radial-gradient(ellipse 440px 350px at 18% 68%, rgba(155, 93, 229, 0.10), transparent 58%),
    radial-gradient(ellipse 350px 280px at 78% 12%, rgba(255, 107, 122, 0.08), transparent 60%);
}

/* ── 3. 顶栏（顶部开关排原样保留，只换夜幕装）── */
[data-skin="shuxue-eggy"] .hero-header {
  background: rgba(36, 16, 51, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 209, 0, 0.22);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
[data-skin="shuxue-eggy"] .header-site-title {
  color: #FFF6DC;
  text-shadow: 0 2px 10px rgba(255, 209, 0, 0.25);
}
[data-skin="shuxue-eggy"] .header-nav a { color: #BBA9D6; }
[data-skin="shuxue-eggy"] .header-nav a:hover,
[data-skin="shuxue-eggy"] .header-nav a.active { color: #FFD100; }
[data-skin="shuxue-eggy"] .header-nav a.active { font-weight: 700; }
[data-skin="shuxue-eggy"] .icon-btn { color: #E8D9C0; }
[data-skin="shuxue-eggy"] .icon-btn:hover { background: rgba(255, 209, 0, 0.14); color: #FFD100; }
[data-skin="shuxue-eggy"] .header-burger-panel {
  background: rgba(36, 16, 51, 0.96);
  border: 1px solid rgba(255, 209, 0, 0.25);
}
[data-skin="shuxue-eggy"] .burger-item { color: #F3EBDD; }
[data-skin="shuxue-eggy"] .burger-item.active { color: #FFD100; }

/* ── 4. 全站通用件：卡片 / 按钮 / 标题 ── */
[data-skin="shuxue-eggy"] .card {
  background: rgba(44, 28, 66, 0.66);
  border: 1.5px solid rgba(255, 209, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-skin="shuxue-eggy"] .btn-primary {
  background: linear-gradient(135deg, #FFE066, #FFD100 55%, #F0B400);
  color: #2B2038;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(255, 209, 0, 0.28);
}
[data-skin="shuxue-eggy"] .btn-primary:hover { box-shadow: 0 12px 30px rgba(255, 209, 0, 0.40); }
[data-skin="shuxue-eggy"] .btn-ghost {
  background: rgba(44, 28, 66, 0.55);
  color: #F3EBDD;
  border: 1.5px solid rgba(255, 209, 0, 0.30);
}
[data-skin="shuxue-eggy"] .btn-ghost:hover {
  border-color: rgba(255, 209, 0, 0.65);
  background: rgba(255, 209, 0, 0.10);
}
[data-skin="shuxue-eggy"] .section-title { color: #FFF6DC; }
[data-skin="shuxue-eggy"] .section-title .title-icon {
  background: rgba(255, 209, 0, 0.14);
  color: #FFD100;
}
[data-skin="shuxue-eggy"] .chip {
  background: rgba(255, 209, 0, 0.14);
  color: #FFE066;
}
[data-skin="shuxue-eggy"] .progress { background: rgba(255, 209, 0, 0.14); }
[data-skin="shuxue-eggy"] .progress-bar {
  background: linear-gradient(90deg, #FFD100, #FF8FA0);
  box-shadow: 0 0 12px rgba(255, 209, 0, 0.45);
}
[data-skin="shuxue-eggy"] .modal-content {
  background: #2B1D45;
  border: 1.5px solid rgba(255, 209, 0, 0.25);
  color: #F3EBDD;
}
[data-skin="shuxue-eggy"] input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(29, 16, 48, 0.6);
  border: 1.5px solid rgba(255, 209, 0, 0.28);
  color: #FFF6DC;
}
[data-skin="shuxue-eggy"] input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: #FFD100;
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.18);
  outline: none;
}

/* ── 5. 数学角主页（ShuxueHome）已在版式级皮肤下由 EggyHome 渲染，此处不再覆盖 ── */

/* ── 6. 口算页小件：答题卡与弹窗已在第 4 节覆盖，这里补口算专属 ── */
[data-skin="shuxue-eggy"] .kq-grid .card {
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
[data-skin="shuxue-eggy"] .kq-grid .card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 209, 0, 0.5);
}
[data-skin="shuxue-eggy"] .modal-overlay { background: rgba(12, 4, 24, 0.72); }

/* ── 7. 口算逐题模式（kq2）：嘉年华夜场装 ── */
[data-skin="shuxue-eggy"] .kq2-qcard {
  border: 1.5px solid rgba(255, 209, 0, 0.26);
  background: rgba(44, 28, 66, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-skin="shuxue-eggy"] .kq2-char {
  border-color: rgba(255, 209, 0, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 209, 0, 0.15);
}
[data-skin="shuxue-eggy"] .kq2-charbubble {
  background: var(--eg-yellow, #FFD100);
  color: #2B2038;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-skin="shuxue-eggy"] .kq2-expr { color: #FFF6DC; text-shadow: 0 2px 12px rgba(255, 209, 0, 0.18); }
[data-skin="shuxue-eggy"] .kq2-answer {
  color: #FFD100;
  border-color: rgba(255, 209, 0, 0.65);
  background: rgba(255, 209, 0, 0.10);
}
[data-skin="shuxue-eggy"] .kq2-answer.ok { color: #7FE8A0; border-color: #2ED573; background: rgba(46, 213, 115, 0.14); }
[data-skin="shuxue-eggy"] .kq2-answer.bad { color: #FF8A80; border-color: #FF4757; background: rgba(255, 71, 87, 0.14); }
[data-skin="shuxue-eggy"] .kq2-key {
  background: rgba(44, 28, 66, 0.72);
  border-color: rgba(255, 209, 0, 0.30);
  color: #FFF6DC;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
[data-skin="shuxue-eggy"] .kq2-key:active { background: rgba(255, 209, 0, 0.16); }
[data-skin="shuxue-eggy"] .kq2-del { color: #FF8A80; border-color: rgba(255, 71, 87, 0.40); }
[data-skin="shuxue-eggy"] .kq2-dots i { background: rgba(255, 209, 0, 0.22); }
[data-skin="shuxue-eggy"] .kq2-dots i.filled { background: #FFD100; opacity: 0.4; }
[data-skin="shuxue-eggy"] .kq2-dots i.on { background: #FFD100; box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.25); }
[data-skin="shuxue-eggy"] .kq2-idx { color: #BBA9D6; }
[data-skin="shuxue-eggy"] .kq2-idx b { color: #FFD100; }

/* ── 8. kq2 v3：蛋仔夜场配色（角色徽章/题牌/圆点/键盘） ── */
[data-skin="shuxue-eggy"] .kq2-charbadge {
  border-color: #FFD100;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 209, 0, 0.18);
  background: #2B1D45;
}
[data-skin="shuxue-eggy"] .kq2-charbubble {
  background: #FFD100;
  color: #2B2038;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
[data-skin="shuxue-eggy"] .kq2-tail { background: #FFD100; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
[data-skin="shuxue-eggy"] .kq2-frame {
  background: rgba(44, 28, 66, 0.72);
  border-color: #FFD100;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-skin="shuxue-eggy"] .kq2-frame .kq2-idx { color: #BBA9D6; }
[data-skin="shuxue-eggy"] .kq2-frame .kq2-idx b { color: #FFD100; }
[data-skin="shuxue-eggy"] .kq2-expr { color: #FFF6DC; text-shadow: 0 2px 12px rgba(255, 209, 0, 0.18); }
[data-skin="shuxue-eggy"] .kq2-answer {
  color: #FFD100;
  border-color: rgba(255, 209, 0, 0.65);
  background: rgba(255, 209, 0, 0.10);
}
[data-skin="shuxue-eggy"] .kq2-answer.ok { color: #7FE8A0; border-color: #2ED573; background: rgba(46, 213, 115, 0.14); border-style: solid; }
[data-skin="shuxue-eggy"] .kq2-answer.bad { color: #FF8A80; border-color: #FF4757; background: rgba(255, 71, 87, 0.14); border-style: solid; }
/* 圆点：红/绿/黄 在夜色下提亮 */
[data-skin="shuxue-eggy"] .kq2-dotrow i { background: #FF6B7A; }
[data-skin="shuxue-eggy"] .kq2-dotrow i.ok { background: #2ED573; }
[data-skin="shuxue-eggy"] .kq2-dotrow i.on {
  background: #FFD100;
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.28), 0 0 14px rgba(255, 209, 0, 0.5);
}
/* 计时器：蛋仔黄卡标签 */
[data-skin="shuxue-eggy"] .kq2-timer {
  background: linear-gradient(135deg, #FFE066, #FFD100 55%, #F0B400);
  color: #2B2038;
  border: 3px solid #FFF9E8;
  box-shadow: 0 8px 24px rgba(255, 209, 0, 0.35), 0 4px 0 rgba(0, 0, 0, 0.25);
  font-size: 1.2rem;
  padding: 9px 20px;
}
[data-skin="shuxue-eggy"] .kq2-key {
  background: rgba(44, 28, 66, 0.72);
  border-color: rgba(255, 209, 0, 0.30);
  color: #FFF6DC;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
[data-skin="shuxue-eggy"] .kq2-key:active { background: rgba(255, 209, 0, 0.16); }
[data-skin="shuxue-eggy"] .kq2-del { color: #FF8A80; border-color: rgba(255, 71, 87, 0.40); }