/* ============================================================
   语文园地 · YuwenHome 专属样式（紫色绘本风，与英语主页同语言）
   结构：Hero（问候 + 大标题 + 吉祥物）→ 入口横卡
   科目识别色：语文紫（violet）+ 粉点缀
   ============================================================ */
/* impeccable-disable design-system-radius, design-system-font-size */

.zw-page {
  --zw-ink: #3A2B63;
  --zw-text: #584478;
  --zw-sub: #7C689C;
  --zw-faint: #A99BC4;
  --zw-violet: #7B55E0;
  --zw-violet-soft: #BFA8FF;
  --zw-violet-deep: #6A45C9;
  --zw-lilac: #EAE2F8;
  --zw-lilac-deep: #DCCCF7;
  --zw-cream: #FBF7FF;
  --zw-card: #FFFFFF;
  --zw-blush: #FDE7F1;
  --zw-berry: #E23D86;
  --zw-font: 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;

  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 20px 48px;
  overflow-x: clip;
}

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

.zw-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 22px 24px;
  border-radius: 30px 18px 30px 20px / 26px 30px 24px 32px;
  background: linear-gradient(150deg, #F8F4FF 0%, #F0E9FC 60%, var(--zw-lilac) 100%);
  box-shadow: 0 1px 2px rgba(106, 69, 201, 0.06), 0 12px 32px rgba(106, 69, 201, 0.12);
}

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

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

/* 大标题：语文 · 语文园地 */
.zw-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(--zw-ink);
  margin: 12px 0 6px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.zw-title-cn {
  font-family: 'Baloo 2', 'QTxiaotu', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 0.62em;
  color: var(--zw-violet);
  margin-left: 8px;
  white-space: nowrap;
}
/* 换行后分隔点不再需要（窄屏两行堆叠时隐藏） */
.zw-title-dot {
  white-space: pre;
}

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

/* 吉祥物：圆形头像 + Hi! 泡泡 */
.zw-mascot-wrap {
  position: relative;
  flex-shrink: 0;
  margin-right: 6px;
}
.zw-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(106, 69, 201, 0.22);
  animation: zw-float 3.6s ease-in-out infinite;
}
.zw-bubble {
  position: absolute;
  top: -8px;
  right: -12px;
  z-index: 2;
  background: var(--zw-card);
  border: 2px solid var(--zw-lilac-deep);
  color: var(--zw-violet-deep);
  font-family: var(--zw-font);
  font-size: 1.05rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 4px 12px rgba(106, 69, 201, 0.16);
  animation: zw-wobble 2.8s ease-in-out infinite;
}

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

/* ════════════════ 入口横卡 ════════════════ */

.zw-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.zw-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--zw-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 cubic-bezier(0.33,1,0.68,1),
              box-shadow 0.22s cubic-bezier(0.33,1,0.68,1);
}
.zw-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);
}
.zw-card:active { transform: translateY(-1px); }

/* 插画牌：每张卡一个专属淡色 */
.zw-card-art {
  width: 104px;
  height: 104px;
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zw-card--book .zw-card-art { background: var(--zw-lilac); }
.zw-card--poem .zw-card-art { background: var(--zw-blush); }
.zw-card-emoji {
  font-size: 48px;
  line-height: 1;
}

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

/* 右箭头圆钮 */
.zw-card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--zw-lilac);
  color: var(--zw-violet-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);
}
.zw-card:hover .zw-card-arrow {
  background: var(--zw-violet);
  color: #fff;
  transform: translateX(2px);
}
.zw-card-arrow svg { width: 20px; height: 20px; }

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

.zw-card:focus-visible {
  outline: 3px solid var(--zw-violet);
  outline-offset: 3px;
  border-radius: 12px;
}

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

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

@media (max-width: 420px) {
  .zw-hero { padding: 18px 14px 16px 18px; gap: 12px; }
  .zw-card-art { width: 86px; height: 86px; border-radius: 18px; }
  .zw-card { gap: 12px; }
}
/* ============================================================
   古诗目录导航 · Poems 专属样式（书本目录风，替代原卡片网格）
   结构：顶部搜索/筛选 → 按年级分组的目录行列表
   设计语言：延续全站紫粉绘本风；目录行 = 序号 + 诗题 + 朝代·作者
   ============================================================ */

/* ── 年级分组块 ── */
.poem-toc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  align-items: start;
}
@media (max-width: 720px) {
  .poem-toc-grid { grid-template-columns: 1fr; }
}

.poem-toc-group {
  margin-top: 18px;
}

.poem-toc-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--violet-600);
}

.poem-toc-group-title::after {
  content: "";
  flex: 1;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet-200), transparent);
}

.poem-toc-count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--pink-400);
  background: var(--pink-100);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ── 目录列表容器（一本"册子"） ── */
.poem-toc {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--card);
  border: 1.5px solid var(--violet-100);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(123, 85, 224, 0.05), 0 8px 20px rgba(123, 85, 224, 0.07);
  overflow: hidden;
}

/* ── 目录行：序号 + 诗题 + 朝代·作者 + 箭头 ── */
.poem-toc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px dashed var(--violet-100);
  transition: background var(--dur) var(--ease);
}
.poem-toc li:last-child .poem-toc-row {
  border-bottom: none;
}
.poem-toc-row:hover {
  background: linear-gradient(90deg, var(--violet-50), var(--pink-50));
}
.poem-toc-row:hover .poem-toc-title {
  color: var(--violet-600);
}

/* 序号：目录式编号 */
.poem-toc-no {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--violet-500);
  background: var(--violet-100);
  border-radius: 50%;
}

/* 诗题：目录主条目 */
.poem-toc-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}

/* 朝代 · 作者：次要信息 */
.poem-toc-meta {
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧箭头 */
.poem-toc-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--violet-300);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.poem-toc-row:hover .poem-toc-arrow {
  color: var(--violet-600);
  transform: translateX(3px);
}

/* ── 触屏可点性：行高 ≥ 44px ── */
.poem-toc-row {
  min-height: 48px;
}

/* ── 窄屏适配 ── */
@media (max-width: 420px) {
  .poem-toc-row { padding: 11px 12px; gap: 10px; }
  .poem-toc-title { font-size: 1rem; }
  .poem-toc-no { width: 24px; height: 24px; }
}
/* ============================================================
   英语角 · 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;

  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, #FFF4FA 0%, #FFE9F3 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, #FFF0F7, 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--textbook .yh-card-art { background: #FFF3E0; }
.yh-card-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 46px;
  line-height: 1;
}

.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; }
}
/* ============================================================
   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); }
}
/* 🐷 佩奇剧集目录（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));
}

/* 目录行 */
.ep-toc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

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

/* 集数徽章 */
.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;
  }
}
/* ============================================================
   电子书板块 · 绘本书架风（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; }
}
/* ============================================================
   沪教版教材 · Textbook 页面样式
   粉色绘本风 + 绿色单元卡 + 暖橙册卡
   ============================================================ */

.tb-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #F8BBD0;
  background: #FCE4EC;
  color: #C2185B;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform .15s ease, background .15s ease;
  line-height: 1;
}
.tb-speak:hover { transform: scale(1.12); background: #F8BBD0; }
.tb-speak:active { transform: scale(.95); }

/* ── 音色选择器 ── */
.tb-voice-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #F5F5F5;
  border: 2px solid #E0E0E0;
  border-radius: 14px;
}
.tb-voice-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #616161;
  font-size: .9rem;
}
.tb-voice-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 2px solid #E0E0E0;
  background: #FFF;
  color: #424242;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: .9rem;
  transition: all .15s ease;
  line-height: 1.25;
}
.tb-voice-btn small { font-weight: 400; font-size: .72rem; color: #9E9E9E; }
.tb-voice-btn:hover { border-color: #FFB74D; }
.tb-voice-btn.is-active {
  border-color: #FF9800;
  background: #FFF3E0;
  color: #E65100;
  box-shadow: 0 2px 8px rgba(255, 152, 0, .25);
}
.tb-voice-btn.is-active small { color: #F57C00; }

/* ── 单元详情 ── */
.tb-unit-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border: 2px solid #FFE082;
  border-radius: 20px;
}
.tb-unit-emoji { font-size: 40px; }
.tb-unit-title { margin: 0; font-size: 1.4rem; color: #4E342E; }
.tb-unit-cn { margin: 2px 0 0; color: #8D6E63; font-size: .92rem; }

.tb-sec { margin-bottom: 22px; }
.tb-sec-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #6D4C41;
}

/* 单词卡 */
.tb-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tb-word-card {
  background: #FFF;
  border: 2px solid #C8E6C9;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tb-word-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 4px;
  border: 1px solid #E8F5E9;
}
.tb-word-en {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 800;
  color: #2E7D32;
  font-size: 1.02rem;
}
.tb-word-cn { color: #8D6E63; font-size: .9rem; }

/* Chant 韵文 */
.tb-sec-hint { font-size: .8rem; color: #A1887F; font-weight: 400; margin-left: 6px; }
.tb-chant-img {
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0 auto 14px;
  border-radius: 16px;
  border: 2px solid #FFE0B2;
  box-shadow: var(--shadow);
}
.tb-chant-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tb-chant-line {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF8E1;
  border: 2px solid #FFE082;
  border-radius: 12px;
  padding: 10px 14px;
}
.tb-chant-text { font-size: 1.05rem; color: #4E342E; font-weight: 700; }
.tb-chant-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.tb-chant-step {
  background: #FFF;
  border: 2px solid #FFE0B2;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}
.tb-chant-step img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.tb-chant-step b { display: block; margin-top: 5px; color: #4E342E; font-size: .92rem; }
.tb-chant-step span { color: #A1887F; font-size: .8rem; }

/* 短语 */
.tb-phrases { display: flex; flex-direction: column; gap: 8px; }
.tb-phrase {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF;
  border: 2px solid #BBDEFB;
  border-radius: 12px;
  padding: 10px 14px;
}
.tb-phrase b { color: #1565C0; }
.tb-phrase-cn { margin-left: auto; color: #8D6E63; font-size: .88rem; }

/* 句型 */
.tb-sentences { display: flex; flex-direction: column; gap: 8px; }
.tb-sentence {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF;
  border: 2px solid #FFE0B2;
  border-left: 6px solid #FFB74D;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1.02rem;
  color: #4E342E;
  font-weight: 600;
}
/* ============================================================
   数学角 · 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;

  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, #FFF9F0 0%, #FFF3E0 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 rgba(255, 255, 255, 0.92);
  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 rgba(255, 255, 255, 0.85);
}
.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: #E8F5E9; }
.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: #E8F5E9; }

/* 右箭头 */
.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;
}
/* ============================================================
   数学小游戏共享样式（琥珀金 · 明亮绘本风）
   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: 10px;
}
@media (max-width: 560px) {
  .gm-mt-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
}
.gm-cardbox {
  position: relative;
  aspect-ratio: 3 / 3.6;
  perspective: 600px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  min-height: 64px;
}
.gm-cardface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  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.5rem;
  box-shadow: 0 4px 10px rgba(232, 160, 32, 0.35);
  border: 2.5px solid rgba(255, 255, 255, 0.55);
}
.gm-cardface--back::after {
  content: "?";
  font-size: 1.6rem;
}
.gm-cardface--front {
  background: var(--gm-card);
  color: var(--gm-ink);
  font-size: clamp(1.1rem, 4.5vw, 1.7rem);
  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; }

/* ── 牛听听听力时长 · 点状图 ── */
.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; }
}
/* ============================================================
   登录 / 个人资料 / 账号管理 —— 共用样式
   语言继承全站：水彩紫粉 · 玻璃卡片 · 有机圆角 · 猫耳点缀
   ============================================================ */

/* ────────── 头像 ────────── */
.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;
  }
}
/* ============================================================
   鐚尗瀛︿範灞?路 姘村僵娴佸姩涓婚 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: #382A55;

  /* 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ 绱壊绯伙紙涓昏壊路姘村僵鏅曟煋锛夆攢鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
  --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: #F0A0A8;
  --coral-soft: #FBE8EB;
  --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;
}

/* ============================================================
   姘村僵鐢诲竷锛氬灞傛檿鏌撹壊鍧楋紝鍥哄畾涓嶅姩
   鍍忔按褰╃焊涓婄殑婀跨敾娉曗€斺€旇壊鍧楄竟缂樼浉浜掓笚閫?
   ============================================================ */

/* 姘村僵鑹插潡灞傦細鐢ㄧ粷瀵瑰畾浣?+ 鏈夋満鍦嗚 + 澶фā绯婃ā鎷熸按褰╂檿鏌?*/
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);
}
.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: #F0FDF1;

  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: #1a3d1a;
  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: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.hero-header .header-nav a:hover { color: #1a3d1a; }
.hero-header .header-nav a.active { color: #1a3d1a; 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: rgba(255, 255, 255, 0.8);
  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, #1a3d1a);
  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: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  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: #1a3d1a; 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 rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #555;
  position: relative;
}
.hero-header .header-actions .icon-btn:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.2);
}
.hero-header .header-actions .icon-btn.accent {
  background: #E86A10;
  border-color: #E86A10;
  color: #fff;
}
.hero-header .header-actions .icon-btn.accent:hover {
  background: #d45e0d;
}
.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: #E86A10;
  border: 2px solid #F0FDF1;
  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 #fff;
  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: #1a3d1a;
  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: #fff;
  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: #1a3d1a;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26,61,26,0.3);
  transition: transform 0.2s, background 0.2s;
}
.hero-card-left .card-arrow-btn:hover { background: #2a5a2a; 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: #555;
  font-weight: 500;
}
.hero-card-left .card-info .card-price {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  font-weight: 700;
  color: #1a3d1a;
}

/* 鍙冲崱 */
.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: #1a3d1a;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26,61,26,0.3);
  transition: transform 0.2s, background 0.2s;
}
.hero-card-right .play-btn:hover { background: #2a5a2a; 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: #555;
  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: rgba(255,255,255,0.9);
  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: #1a3d1a;
  line-height: 1;
}
.stat-badge .stat-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack .avatar-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  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: #1a3d1a;
  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: #E86A10;
  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: #d45e0d; transform: translateY(-2px); }

/* 鏄熺骇 */
.star-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.9);
  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: #1a3d1a;
  font-size: 1.1rem;
}
.star-badge .star-icon {
  color: #E86A10;
  fill: #E86A10;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?鍝嶅簲寮忥細骞虫澘 (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: rgba(0,0,0,0.12);
  }

  /* 搴曢儴鍥?*/
  .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: #F0FDF1;
}
.subjects-section .subjects-inner {
  max-width: 900px;
  margin: 0 auto;
}
.subjects-section .section-heading {
  font-family: 'QTxiaotu', serif;
  font-size: 2rem;
  color: #1a3d1a;
  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: #EDE4FA; box-shadow: 0 2px 12px rgba(123,85,224,0.10); }
.paw-card.yingyu { background: #FDE8F0; box-shadow: 0 2px 12px rgba(240,90,156,0.10); }
.paw-card.shuxue { background: #FDF3E0; box-shadow: 0 2px 12px rgba(232,160,32,0.10); }
.paw-card.checkin { background: #FDE8E4; 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; }
}
:root {
  --text: #4A3968;
  --text-2: #77659C;
  --text-3: #A99BC4;
  --ink: #382A55;

  /* 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ 绱壊绯伙紙涓昏壊路姘村僵鏅曟煋锛夆攢鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
  --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: #F0A0A8;
  --coral-soft: #FBE8EB;
  --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;
}

/* ============================================================
   姘村僵鐢诲竷锛氬灞傛檿鏌撹壊鍧楋紝鍥哄畾涓嶅姩
   鍍忔按褰╃焊涓婄殑婀跨敾娉曗€斺€旇壊鍧楄竟缂樼浉浜掓笚閫?
   ============================================================ */

/* 姘村僵鑹插潡灞傦細鐢ㄧ粷瀵瑰畾浣?+ 鏈夋満鍦嗚 + 澶фā绯婃ā鎷熸按褰╂檿鏌?*/
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);
}
.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: #F0FDF1;

  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: #1a3d1a;
  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: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.hero-header .header-nav a:hover { color: #1a3d1a; }
.hero-header .header-nav a.active { color: #1a3d1a; 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: rgba(255, 255, 255, 0.8);
  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, #1a3d1a);
  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: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  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: #1a3d1a; 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 rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #555;
  position: relative;
}
.hero-header .header-actions .icon-btn:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.2);
}
.hero-header .header-actions .icon-btn.accent {
  background: #E86A10;
  border-color: #E86A10;
  color: #fff;
}
.hero-header .header-actions .icon-btn.accent:hover {
  background: #d45e0d;
}
.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: #E86A10;
  border: 2px solid #F0FDF1;
  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 #fff;
  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: #1a3d1a;
  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: #fff;
  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: #1a3d1a;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26,61,26,0.3);
  transition: transform 0.2s, background 0.2s;
}
.hero-card-left .card-arrow-btn:hover { background: #2a5a2a; 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: #555;
  font-weight: 500;
}
.hero-card-left .card-info .card-price {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  font-weight: 700;
  color: #1a3d1a;
}

/* 鍙冲崱 */
.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: #1a3d1a;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26,61,26,0.3);
  transition: transform 0.2s, background 0.2s;
}
.hero-card-right .play-btn:hover { background: #2a5a2a; 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: #555;
  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: rgba(255,255,255,0.9);
  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: #1a3d1a;
  line-height: 1;
}
.stat-badge .stat-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack .avatar-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  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: #1a3d1a;
  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: #E86A10;
  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: #d45e0d; transform: translateY(-2px); }

/* 鏄熺骇 */
.star-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.9);
  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: #1a3d1a;
  font-size: 1.1rem;
}
.star-badge .star-icon {
  color: #E86A10;
  fill: #E86A10;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?鍝嶅簲寮忥細骞虫澘 (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: rgba(0,0,0,0.12);
  }

  /* 搴曢儴鍥?*/
  .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: #F0FDF1;
}
.subjects-section .subjects-inner {
  max-width: 900px;
  margin: 0 auto;
}
.subjects-section .section-heading {
  font-family: 'QTxiaotu', serif;
  font-size: 2rem;
  color: #1a3d1a;
  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: #EDE4FA; box-shadow: 0 2px 12px rgba(123,85,224,0.10); }
.paw-card.yingyu { background: #FDE8F0; box-shadow: 0 2px 12px rgba(240,90,156,0.10); }
.paw-card.shuxue { background: #FDF3E0; box-shadow: 0 2px 12px rgba(232,160,32,0.10); }
.paw-card.checkin { background: #FDE8E4; 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 涓婚鑹叉澘 鈹€鈹€ */
:root {
  --paper:       #FDF6EC;
  --paper-dark:  #F5E6D3;
  --coral:       #E07B5F;
  --coral-light: #F2C4B4;
  --coral-soft:  #FDF0EB;
  --forest:      #5A8F5E;
  --forest-soft: #E8F5E9;
  --sky:         #5B8FBF;
  --sky-soft:    #E3F2FD;
  --grape:       #8B6AAF;
  --grape-soft:  #F3EEFA;
  --ink:         #3D3026;
  --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;
}
.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; }
.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-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; }
}
/* ============================================================
   鍙よ瘲璇嶆敞瑙ｅ尯锛堣鎯呴〉锛?
   ============================================================ */
.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); }
}

/* ---------- ⭐ 划词收藏（古诗/其他页面，与绘本同款） ---------- */
.sel-pop {
  position: fixed; z-index: 3000; display: none;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff;
  border: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800;
  cursor: pointer; box-shadow: 0 4px 14px rgba(14,165,233,.45);
  font-family: inherit; white-space: nowrap; line-height: 1.4;
  transform: translate(-50%, 34px);
}
.sel-pop:active { transform: translate(-50%, 37px) scale(.96); }
.word-toast {
  position: fixed; z-index: 3001;
  background: rgba(15,23,42,.88); color: #fff; padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; opacity: 0; transition: opacity .25s;
  pointer-events: none; font-family: inherit; white-space: nowrap;
  transform: translateX(-50%);
}
.word-toast.show { opacity: 1; }