/* ================================================================
   Onomeo Cartoon-Zen — Digital Zen 设计升级层
   参考：stitch_cartoon_progress_interface（Stitch 输出的"修行学院"风格）
   · 米白底（rice paper）+ 极淡 dot 纹理
   · Electric Indigo #4648d4 主色 + Sunset Amber #fea619 辅色
   · Space Grotesk 标题 + Noto Sans SC 中文 + JetBrains Mono 标签
   · 大留白（80-120px section gap）+ glass-panel 浮卡
   · 在 luxe 主题模式下，luxe.css 会覆盖这些规则（luxe.css 后加载）
   ================================================================ */
:root {
  --zen-surface:        #f6f8f5;
  --zen-surface-lo:     #eef2ec;
  --zen-surface-md:     #e3e9e1;
  --zen-surface-hi:     #d6dfd3;
  --zen-on-surface:     #1a1c1c;
  --zen-on-surface-var: #464554;
  --zen-outline:        #767586;
  --zen-outline-var:    #c7c4d7;
  --zen-primary:        #4648d4;
  --zen-primary-hi:     #6063ee;
  --zen-primary-lo:     #e1e0ff;
  --zen-primary-dim:    rgba(70, 72, 212, .1);
  --zen-secondary:      #fea619;
  --zen-secondary-fix:  #ffddb8;
  --zen-tertiary:       #006c49;
  --zen-error:          #ba1a1a;
  --zen-error-bg:       #ffdad6;

  --zen-font-head:      'Space Grotesk', system-ui, sans-serif;
  --zen-font-body:      'Noto Sans SC', system-ui, sans-serif;
  --zen-font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --zen-shadow-soft:    0 4px 24px -4px rgba(70, 72, 212, .05),
                        0 12px 36px -12px rgba(0, 0, 0, .03);
  --zen-shadow-card:    0 2px 8px -2px rgba(70, 72, 212, .04),
                        0 8px 24px -8px rgba(0, 0, 0, .04);
  --zen-shadow-glow:    0 0 30px rgba(70, 72, 212, .18);
}

/* ── 暖米色底（仅 cartoon 模式生效，luxe 会覆盖） ── */
body {
  background-color: var(--zen-surface);
}

/* ── 侧边栏「升级 Plus」改为安静的次要样式：保留橙色身份，但不再用
   高饱和填充抢视线，让真正的导航更突出 ── */
.upgrade-pill {
  background: #fff1e4;
  color: #d96a3d;
  border: 0;
  box-shadow: 0 2px 0 0 #f0d3bf;
}
.upgrade-pill:hover  { filter: none; background: #ffe9d6; }
.upgrade-pill:active { box-shadow: 0 1px 0 0 #f0d3bf; transform: translateY(1px); }
.upgrade-pill .ic    { color: #f08a4b; }
/* 已付费状态：换成靛蓝色，传达"已开通"而不是"快买" */
.upgrade-pill.is-active {
  background: #e1e0ff;
  color: #4648d4;
  box-shadow: 0 2px 0 0 #c7c6f4;
}
.upgrade-pill.is-active:hover  { background: #d4d3ff; }
.upgrade-pill.is-active:active { box-shadow: 0 1px 0 0 #c7c6f4; }
.upgrade-pill.is-active .ic { color: #4648d4; }
/* 账号菜单里的会员状态条 */
.account-menu-plan {
  font-size: 13px; color: var(--zen-on-surface-var, #464554);
  padding: 4px 0 2px;
}
.account-menu-plan.is-paid {
  color: #4648d4; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   PROGRESS 页 · Digital Zen 重设计
   作用域：.view-progress 容器，避免污染其他页面
   ════════════════════════════════════════════════════════════════ */
.view-progress {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 16px 8px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .view-progress { gap: 60px; padding: 8px 0 60px; }
}

/* ── 标题区 ── */
.view-progress .page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
  align-items: stretch;
}
.view-progress .page-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

/* CURRENT STATE chip */
.view-progress .pg-state-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  background: rgba(70, 72, 212, .06);
  border: 1px solid rgba(70, 72, 212, .14);
  color: var(--zen-primary);
  font-family: var(--zen-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
}
.view-progress .pg-state-tag .ic {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

/* 大双语标题 */
.view-progress .page-title {
  font-family: var(--zen-font-head);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--zen-on-surface);
  margin: 0;
}
.view-progress .page-title .pg-title-en {
  display: block;
  font-family: var(--zen-font-head);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--zen-outline);
  letter-spacing: 0;
  margin-top: 8px;
}
.view-progress .page-sub {
  font-family: var(--zen-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--zen-on-surface-var);
  margin: 4px 0 0;
  max-width: 600px;
}

/* reset 按钮放头部右上（绝对定位） */
.view-progress .page-header {
  position: relative;
}
.view-progress #reset-btn {
  position: absolute;
  top: 6px;
  right: 0;
  padding: 9px 16px;
  font-family: var(--zen-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  background: transparent;
  color: var(--zen-error);
  border: 1px solid rgba(186, 26, 26, .25);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  box-shadow: none;
}
.view-progress #reset-btn:hover {
  background: var(--zen-error-bg);
  border-color: var(--zen-error);
}
.view-progress #reset-btn .ic {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}
@media (max-width: 700px) {
  .view-progress #reset-btn { position: static; align-self: flex-start; margin-top: 8px; }
}

/* ── Section h2 ── */
.view-progress .pg-section h2,
.view-progress .pg-section-head h2 {
  font-family: var(--zen-font-head);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--zen-on-surface);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.view-progress .pg-section h2 .ic,
.view-progress .pg-section-head h2 .ic {
  width: 22px;
  height: 22px;
  color: var(--zen-primary);
  stroke-width: 1.6;
}
/* h2 后面带英文小标签：用 .pg-section-en 包裹 */
.view-progress .pg-section-en {
  font-family: var(--zen-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--zen-outline);
  letter-spacing: .12em;
  margin-left: 8px;
  text-transform: uppercase;
}
.view-progress .pg-note {
  font-family: var(--zen-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--zen-on-surface-var);
  margin: 0 0 24px;
}

/* ── Hero 主数据带：玻璃浮卡 ── */
.view-progress .pg-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 56px;
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(199, 196, 215, .5);
  border-radius: 12px;
  box-shadow: var(--zen-shadow-soft);
}
@media (max-width: 900px) {
  .view-progress .pg-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 24px;
  }
}

.view-progress .pg-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.view-progress .pg-hero-ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(70, 72, 212, .1);
  color: var(--zen-primary);
  border-radius: 8px;
  margin-bottom: 16px;
}
.view-progress .pg-hero-ic .ic {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}
.view-progress .pg-hero-num {
  font-family: var(--zen-font-head);
  font-weight: 700;
  font-size: clamp(64px, 8.6vw, 108px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--zen-on-surface);
  font-variant-numeric: tabular-nums;
}
.view-progress .pg-hero-lbl {
  font-family: var(--zen-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--zen-outline);
  margin-top: 12px;
  text-transform: uppercase;
}

/* 副 mini stats（右侧） */
.view-progress .pg-hero-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  padding-left: 32px;
  border-left: 1px solid rgba(199, 196, 215, .6);
}
@media (max-width: 900px) {
  .view-progress .pg-hero-side {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(199, 196, 215, .6);
    padding-top: 24px;
  }
}
.view-progress .pg-mini {
  display: flex;
  align-items: center;
  gap: 18px;
}
.view-progress .pg-mini-ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(70, 72, 212, .08);
  color: var(--zen-primary);
  border-radius: 8px;
  flex-shrink: 0;
}
.view-progress .pg-mini-ic.flame {
  background: rgba(254, 166, 25, .14);
  color: #c97c00;
}
.view-progress .pg-mini-ic .ic {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.view-progress .pg-mini-num {
  font-family: var(--zen-font-head);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--zen-on-surface);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.view-progress .pg-mini-lbl {
  font-family: var(--zen-font-body);
  font-size: 14px;
  color: var(--zen-on-surface-var);
  margin-top: 6px;
}

/* ── Section 区块 ── */
.view-progress .pg-section {
  padding: 0;
  background: transparent;
  border: none;
}
.view-progress .pg-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.view-progress .pg-section-head h2 { margin: 0; }

.view-progress .pg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .view-progress .pg-grid-2 { grid-template-columns: 1fr; gap: 40px; }
}

/* ── 进度条 ── */
.view-progress .bar {
  background: var(--zen-surface-md);
  border: none;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
}
.view-progress .bar > i {
  background: linear-gradient(90deg, var(--zen-primary) 0%, var(--zen-primary-hi) 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(70, 72, 212, .25);
}

/* ── CEFR 行 ── */
.view-progress .cefr-row {
  grid-template-columns: 64px 1fr 110px !important;
  padding: 14px 0;
  border-bottom: 1px solid rgba(199, 196, 215, .35);
  gap: 18px;
}
.view-progress .cefr-row:last-child { border-bottom: none; }
.view-progress .cefr-label {
  font-family: var(--zen-font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid var(--zen-outline-var) !important;
  border-radius: 4px !important;
  padding: 4px 0 !important;
  letter-spacing: .12em !important;
  color: var(--zen-on-surface-var) !important;
}
.view-progress .cefr-track {
  height: 6px !important;
  background: var(--zen-surface-md) !important;
  border-radius: 999px !important;
}
.view-progress .cefr-track > i {
  background: linear-gradient(90deg, var(--zen-primary), var(--zen-primary-hi)) !important;
}
.view-progress .cefr-num {
  font-family: var(--zen-font-mono) !important;
  font-size: 13px !important;
  color: var(--zen-on-surface-var) !important;
  letter-spacing: .04em !important;
}
.view-progress .cefr-A1 .cefr-label,
.view-progress .cefr-A2 .cefr-label { color: var(--zen-primary) !important; border-color: rgba(70, 72, 212, .35) !important; }
.view-progress .cefr-B1 .cefr-label,
.view-progress .cefr-B2 .cefr-label { color: #c97c00 !important; border-color: rgba(254, 166, 25, .4) !important; }
.view-progress .cefr-C1 .cefr-label,
.view-progress .cefr-C2 .cefr-label { color: var(--zen-tertiary) !important; border-color: rgba(0, 108, 73, .4) !important; }

/* ── Bests grid（个人最佳） ── */
.view-progress .bests-grid { gap: 24px !important; }
.view-progress .best-card {
  background: rgba(255, 255, 255, .7) !important;
  border: 1px solid rgba(199, 196, 215, .5) !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  box-shadow: var(--zen-shadow-card) !important;
  text-align: left !important;
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.view-progress .best-card:hover {
  border-color: rgba(70, 72, 212, .35) !important;
  box-shadow: 0 4px 20px rgba(70, 72, 212, .12) !important;
  transform: translateY(-2px);
}
.view-progress .best-ic {
  background: rgba(70, 72, 212, .08) !important;
  color: var(--zen-primary) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  margin: 0 0 14px !important;
}
.view-progress .best-ic.orange { background: rgba(254, 166, 25, .14) !important; color: #c97c00 !important; }
.view-progress .best-ic.mint { background: rgba(0, 108, 73, .12) !important; color: var(--zen-tertiary) !important; }
.view-progress .best-ic.yellow { background: rgba(254, 166, 25, .14) !important; color: #c97c00 !important; }
.view-progress .best-ic.sky { background: rgba(70, 72, 212, .1) !important; color: var(--zen-primary) !important; }
.view-progress .best-ic .ic {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.8 !important;
}
.view-progress .best-num {
  font-family: var(--zen-font-head) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--zen-on-surface) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
}
.view-progress .best-lbl {
  font-family: var(--zen-font-body) !important;
  font-size: 14px !important;
  color: var(--zen-on-surface) !important;
  font-weight: 500 !important;
}
.view-progress .best-sub {
  font-family: var(--zen-font-mono) !important;
  font-size: 12px !important;
  color: var(--zen-outline) !important;
  margin-top: 6px !important;
  letter-spacing: .04em !important;
}

/* ── 设置行 ── */
.view-progress .pg-set-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.view-progress .pg-set-row label {
  font-family: var(--zen-font-body);
  font-size: 15px;
  color: var(--zen-on-surface);
}
.view-progress .pg-set-input {
  padding: 10px 14px !important;
  border-radius: 6px !important;
  border: 1px solid var(--zen-outline-var) !important;
  background: #fff !important;
  color: var(--zen-on-surface) !important;
  font-family: var(--zen-font-mono) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 96px;
  text-align: center;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.view-progress .pg-set-input:focus {
  border-color: var(--zen-primary) !important;
  box-shadow: 0 0 0 3px rgba(70, 72, 212, .15) !important;
}
.view-progress .pg-set-row .btn {
  background: var(--zen-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(70, 72, 212, .2) !important;
  font-family: var(--zen-font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  padding: 10px 18px !important;
  border-radius: 6px !important;
}
.view-progress .pg-set-row .btn:hover {
  background: var(--zen-primary-hi) !important;
}

/* ── Trend chart 空态 ── */
.view-progress .trend-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 64px 24px 48px;
  text-align: center;
  background: rgba(255, 255, 255, .6);
  border-radius: 12px;
  box-shadow: var(--zen-shadow-soft);
}
.view-progress .trend-empty-title {
  font-family: var(--zen-font-head);
  font-size: 24px;
  font-weight: 600;
  color: var(--zen-on-surface);
}
.view-progress .trend-empty-sub {
  font-family: var(--zen-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--zen-on-surface-var);
  max-width: 460px;
}
.view-progress .trend-empty-goal {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 12px 0 6px;
  padding: 16px 32px;
  background: rgba(70, 72, 212, .04);
  border-radius: 10px;
}
.view-progress .trend-empty-goal-lbl {
  font-family: var(--zen-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--zen-primary);
  text-transform: uppercase;
}
.view-progress .trend-empty-goal-val {
  font-family: var(--zen-font-head);
  font-size: 36px;
  font-weight: 700;
  color: var(--zen-on-surface);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.view-progress .trend-empty-goal-unit {
  font-family: var(--zen-font-mono);
  font-size: 13px;
  margin-left: 6px;
  letter-spacing: .12em;
  color: var(--zen-outline);
  text-transform: uppercase;
}
.view-progress .trend-empty-dots {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.view-progress .trend-empty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--zen-surface-hi);
  border: 1px solid var(--zen-outline-var);
}
.view-progress .trend-empty-dot.on {
  background: var(--zen-primary);
  border-color: var(--zen-primary);
  box-shadow: 0 0 8px rgba(70, 72, 212, .4);
}

/* ── Trend chart 配色 ── */
.view-progress .trend-chart .baseline { stroke: var(--zen-outline-var); }
.view-progress .trend-chart .bar { fill: var(--zen-primary); opacity: .35; }
.view-progress .trend-chart .line { stroke: var(--zen-primary); stroke-width: 2.2; fill: none; }
.view-progress .trend-chart .dot { fill: var(--zen-primary); }
.view-progress .trend-chart .grad-top { stop-color: var(--zen-primary); stop-opacity: .35; }
.view-progress .trend-chart .grad-bot { stop-color: var(--zen-primary); stop-opacity: 0; }
.view-progress .trend-chart .tick text { fill: var(--zen-outline); font-family: var(--zen-font-mono); font-size: 11px; }
.view-progress .trend-chart .tick line { stroke: var(--zen-outline-var); }

.view-progress .trend-legend {
  font-family: var(--zen-font-mono);
  font-size: 12px;
  color: var(--zen-outline);
  letter-spacing: .04em;
}
.view-progress .trend-legend .lg-bar { background: var(--zen-primary); opacity: .35; }
.view-progress .trend-legend .lg-line { background: var(--zen-primary); }
.view-progress .trend-legend .lg-dot { background: var(--zen-primary); }

/* ════════════════════════════════════════════════════════════════
   DICT 词典页 · Duolingo 风重做
   ・ 打开就有「今日推荐」词卡铺满，不是空盒
   ・ 分类 chip 多色 + 图标，点击立刻显示该类词
   ・ 词卡：单词大字 + 词性 + 释义 + 底部一行（蓝喇叭 + 4 颗掌握度点）
   ・ 卡片用 0 2px 0 灰 的 "3D 卡牌感"，无 border
   ・ 底部「最近查过」列表式（不占大空间）
   作用域：.view-dict 容器
   ════════════════════════════════════════════════════════════════ */
.view-dict {
  --dict-page-bg:    var(--zen-surface);
  --dict-card-bg:    #ffffff;
  --dict-card-shadow: 0 2px 0 0 #e8e6f0;
  --dict-card-shadow-hover: 0 6px 0 0 #d6d3e6;
  --dict-text:       var(--zen-on-surface);
  --dict-text-dim:   var(--zen-on-surface-var);
  --dict-text-mute:  var(--zen-outline);

  /* 每个分类一个色（按 THEME_META.color 的对应）*/
  --c-yellow: #f7c948;  --c-yellow-bg: #fff5d6;
  --c-sky:    #3da9fc;  --c-sky-bg:    #def0ff;
  --c-orange: #ff8a3d;  --c-orange-bg: #ffe2ce;
  --c-grape:  #8b5cf6;  --c-grape-bg:  #ece1ff;
  --c-pink:   #ff7aa2;  --c-pink-bg:   #ffd9e4;
  --c-mint:   #34c38f;  --c-mint-bg:   #d4f4e3;
  --c-teal:   #14b8a6;  --c-teal-bg:   #ccf3ee;
  --c-amber:  #fea619;  --c-amber-bg:  #ffe7c2;
}

.view-dict {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 8px 80px;
  font-family: var(--zen-font-body);
  color: var(--dict-text);
}

/* ── Hero 头部 ── */
.view-dict .dict-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.view-dict .dict-hero-left { flex: 1; min-width: 0; }
.view-dict .dict-hero .page-title {
  font-family: var(--zen-font-head);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--dict-text);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.view-dict .dict-hero .page-title .ic { width: 22px; height: 22px; color: var(--zen-primary); }
.view-dict .dict-hero-sub {
  font-size: 14px; color: var(--dict-text-dim); margin: 4px 0 0;
}
.view-dict .dict-count-pill {
  background: var(--c-mint);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: .02em;
  box-shadow: 0 2px 0 0 #1d9b6b;
}

/* ── 搜索框（视觉降权） ── */
.view-dict .dict-search-row {
  margin-bottom: 14px;
}
.view-dict .dict-input-wrap {
  display: flex; align-items: center;
  background: var(--zen-surface-lo);
  border: 0 !important;
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  transition: background .15s, box-shadow .15s;
}
.view-dict .dict-input-wrap:focus-within {
  background: #ffffff;
  box-shadow: 0 0 0 2px var(--zen-primary), 0 2px 0 0 #d6d3e6;
}
.view-dict .dict-input-ic {
  position: static !important;
  transform: none !important;
  display: flex; align-items: center;
  margin-right: 10px;
  color: var(--dict-text-mute);
}
.view-dict .dict-input-ic .ic { width: 18px; height: 18px; }
.view-dict .dict-input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font-family: var(--zen-font-body);
  font-size: 15px;
  color: var(--dict-text) !important;
  padding: 0 !important;
}
.view-dict .dict-input::placeholder { color: var(--dict-text-mute); }
.view-dict .dict-clear {
  background: transparent !important;
  border: 0 !important;
  color: var(--dict-text-mute);
  font-size: 20px;
  padding: 4px 6px;
  cursor: pointer;
}
.view-dict .dict-clear:hover { color: var(--zen-primary) !important; }

/* ── 分类 chip 行 ── */
.view-dict .dict-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.view-dict #dict-theme-chips { display: contents; }
.view-dict .dict-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  font-family: var(--zen-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--dict-text);
  background: var(--zen-surface-md);
  box-shadow: 0 2px 0 0 #d6d3e6;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.view-dict .dict-chip-ic { display: inline-flex; align-items: center; }
.view-dict .dict-chip-ic .ic { width: 14px; height: 14px; }
.view-dict .dict-chip:hover { transform: translateY(-1px); }
.view-dict .dict-chip:active { transform: translateY(1px); box-shadow: 0 0 0 0 #d6d3e6; }

/* 主题各色（is-active 时填实色 + 白字 + 加深底影） */
.view-dict .dict-chip[data-color="yellow"]            { background: var(--c-yellow-bg); color: #8a6b00; box-shadow: 0 2px 0 0 #d8b432; }
.view-dict .dict-chip[data-color="yellow"].is-active  { background: var(--c-yellow); color: #fff; box-shadow: 0 2px 0 0 #b08c20; }
.view-dict .dict-chip[data-color="sky"]               { background: var(--c-sky-bg);    color: #14589a; box-shadow: 0 2px 0 0 #2c8ad8; }
.view-dict .dict-chip[data-color="sky"].is-active     { background: var(--c-sky);    color: #fff; box-shadow: 0 2px 0 0 #1973bb; }
.view-dict .dict-chip[data-color="orange"]            { background: var(--c-orange-bg); color: #a44608; box-shadow: 0 2px 0 0 #db6a2a; }
.view-dict .dict-chip[data-color="orange"].is-active  { background: var(--c-orange); color: #fff; box-shadow: 0 2px 0 0 #b6541d; }
.view-dict .dict-chip[data-color="grape"]             { background: var(--c-grape-bg);  color: #4a2a99; box-shadow: 0 2px 0 0 #6e3fd4; }
.view-dict .dict-chip[data-color="grape"].is-active   { background: var(--c-grape);  color: #fff; box-shadow: 0 2px 0 0 #5a30b2; }
.view-dict .dict-chip[data-color="pink"]              { background: var(--c-pink-bg);   color: #a13363; box-shadow: 0 2px 0 0 #db5e8a; }
.view-dict .dict-chip[data-color="pink"].is-active    { background: var(--c-pink);   color: #fff; box-shadow: 0 2px 0 0 #b1466e; }
.view-dict .dict-chip[data-color="mint"]              { background: var(--c-mint-bg);   color: #15784f; box-shadow: 0 2px 0 0 #28a376; }
.view-dict .dict-chip[data-color="mint"].is-active    { background: var(--c-mint);   color: #fff; box-shadow: 0 2px 0 0 #1d8762; }
.view-dict .dict-chip[data-color="amber"]             { background: var(--c-amber-bg);  color: #a4630a; box-shadow: 0 2px 0 0 #db8c2a; }
.view-dict .dict-chip[data-color="amber"].is-active   { background: var(--c-amber);  color: #fff; box-shadow: 0 2px 0 0 #b87217; }

/* ── 主区：分类标题 + 词卡网格 ── */
.view-dict .dict-category-pane {
  margin-bottom: 24px;
}
.view-dict .dict-category-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.view-dict .dict-cat-title {
  font-family: var(--zen-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--dict-text);
  margin: 0;
}
.view-dict .dict-cat-more {
  font-size: 13px;
  color: var(--zen-primary);
  text-decoration: none;
  font-weight: 600;
}
.view-dict .dict-cat-more:hover { text-decoration: underline; }

.view-dict .dict-word-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .view-dict .dict-word-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .view-dict .dict-word-grid { grid-template-columns: 1fr; } }

/* ── 词卡 ── */
.view-dict .dict-card {
  position: relative;
  background: var(--dict-card-bg);
  border: 0 !important;
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: var(--dict-card-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
  display: flex; flex-direction: column;
  min-height: 132px;
}
.view-dict .dict-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dict-card-shadow-hover);
}
.view-dict .dict-card:active {
  transform: translateY(0);
  box-shadow: 0 0 0 0 #d6d3e6;
}
.view-dict .dict-card-fav {
  position: absolute;
  top: 10px; right: 10px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #d6d3e6;
  transition: color .15s, transform .15s;
}
.view-dict .dict-card-fav:hover { color: var(--c-yellow); transform: scale(1.15); }
.view-dict .dict-card-fav .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.view-dict .dict-card.is-fav .dict-card-fav { color: var(--c-yellow); }
.view-dict .dict-card-w {
  font-family: var(--zen-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--dict-text);
  letter-spacing: -.005em;
  line-height: 1.2;
  margin-right: 22px;
}
.view-dict .dict-card-pos {
  font-family: var(--zen-font-mono);
  font-size: 11px;
  color: var(--dict-text-mute);
  letter-spacing: .04em;
  margin-top: 2px;
  text-transform: lowercase;
}
.view-dict .dict-card-def {
  font-size: 14px;
  color: var(--dict-text-dim);
  line-height: 1.45;
  margin-top: 6px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.view-dict .dict-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
}
.view-dict .dict-card-speaker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--c-sky);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 0 0 #1973bb;
  transition: transform .1s ease, box-shadow .1s ease;
}
.view-dict .dict-card-speaker:hover { transform: translateY(-1px); }
.view-dict .dict-card-speaker:active { transform: translateY(2px); box-shadow: 0 0 0 0 #1973bb; }
.view-dict .dict-card-speaker .ic { width: 16px; height: 16px; }

/* 4 颗掌握度点 */
.view-dict .dict-mastery {
  display: inline-flex; align-items: center; gap: 4px;
}
.view-dict .dict-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e6e3f0;
  transition: background .15s;
}
.view-dict .dict-dot.on { background: var(--c-amber); }

.view-dict .dict-empty {
  font-size: 14px;
  color: var(--dict-text-mute);
  padding: 24px 0;
  grid-column: 1 / -1;
  text-align: center;
}

/* ── 底部「最近查过」列表 ── */
.view-dict .dict-recent-pane {
  margin-top: 12px;
  background: var(--dict-card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--dict-card-shadow);
}
.view-dict .dict-recent-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.view-dict .dict-recent-title {
  font-family: var(--zen-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--dict-text);
  margin: 0;
}
.view-dict .dict-recent-list {
  display: flex; flex-direction: column;
}
.view-dict .dict-recent-row {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  padding: 10px 4px;
  border-bottom: 1px solid #eeece8;
  cursor: pointer;
  font-family: var(--zen-font-body);
  font-size: 14px;
  color: var(--dict-text);
  transition: background .12s;
}
.view-dict .dict-recent-row:last-child { border-bottom: 0; }
.view-dict .dict-recent-row:hover { background: var(--zen-surface-lo); }
.view-dict .dict-recent-row-w { font-weight: 700; color: var(--dict-text); }
.view-dict .dict-recent-row-def {
  color: var(--dict-text-dim);
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 2px;
}
.view-dict .dict-recent-row-st {
  font-size: 13px;
  color: var(--dict-text-mute);
  font-family: var(--zen-font-mono);
}
.view-dict .dict-recent-row-st.is-done { color: var(--c-mint); font-weight: 700; }
.view-dict .dict-recent-empty {
  font-size: 14px;
  color: var(--dict-text-mute);
  text-align: center;
  padding: 12px 0;
}

/* ── 搜索结果 pane（搜索时显示）—— 用旧 dict-item，保留极简兼容 ── */
.view-dict .dict-search-pane .dict-status {
  font-size: 14px;
  color: var(--dict-text-mute);
  margin-bottom: 10px;
}
.view-dict .dict-search-pane .dict-item {
  background: var(--dict-card-bg);
  border: 0 !important;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--dict-card-shadow);
}

/* ================================================================
   PROGRESS DASHBOARD · 仪表盘风（cartoon 主题专属）
   作用域：.view-progress.pg-dashboard
   ================================================================ */
/* 仪表盘页单独突破 .main 的全局 1180px 上限，铺得更开（其他页面不受影响） */
.main:has(> .view-progress.pg-dashboard) {
  max-width: 1600px;
  padding-left: 24px;
  padding-right: 24px;
}
.view-progress.pg-dashboard {
  display: block !important;
  gap: 0 !important;
  padding: 20px !important;
  max-width: 100%;
  margin: 0 auto;
  color: #3a2e1e;
  font-family: 'Nunito Sans', 'PingFang SC', 'Helvetica Neue', sans-serif;
}
.view-progress.pg-dashboard .page-header { display: none; }

/* --- 页头 --- */
.pgd-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.pgd-title { font-size: 24px; font-weight: 900; }
.pgd-sub   { font-size: 13px; color: #9b8e7a; margin-top: 2px; }
.pgd-level-badge {
  background: linear-gradient(135deg, #ff8a65, #ffb347);
  color: #fff; font-weight: 900; font-size: 14px;
  padding: 6px 14px; border-radius: 99px;
  border-bottom: 3px solid #e05a2b;
  white-space: nowrap; margin-left: auto;
}

/* --- 双栏 Grid --- */
.pgd-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  align-items: start;
}

/* 左侧主区：两列网格，英雄卡和本周 XP 横跨整行，
   每日任务 / 为你推荐 并排，把横向空白填掉 */
.pgd-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  align-content: start;
}
.pgd-main > .pgd-hero,
.pgd-main > .pgd-card.pgd-sun,
.pgd-main > .pgd-trend-card,
.pgd-main > .pgd-theme-card,
.pgd-main > .pgd-cefr-card { grid-column: 1 / -1; }
.pgd-main > .pgd-hero,
.pgd-main > .pgd-card { margin-bottom: 0; }

/* 窄屏：回退成单列，避免挤成一团 */
@media (max-width: 1080px) {
  .pgd-layout,
  .pgd-main { grid-template-columns: 1fr; }
}

/* --- 压感卡片基础 --- */
.pgd-card {
  background: #fffdf8;
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 0 0 #e8dfc8, 0 10px 22px -12px rgba(90, 78, 45, .18);
}
.pgd-card:last-child { margin-bottom: 0; }
/* 卡片底色统一为暖米白：不再整张卡铺色、不描边，
   颜色只保留在卡内的图标 / 数字上做点缀 */
.pgd-coral,
.pgd-sky,
.pgd-grape,
.pgd-mint,
.pgd-sun { background: #fffdf8; }

.pgd-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.pgd-card-title { font-size: 16px; font-weight: 900; }
.pgd-link { font-size: 13px; color: #5b8dee; font-weight: 700; cursor: pointer; }

/* --- 英雄卡 --- */
.pgd-hero {
  background: #fffdf8;
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: 0 2px 0 0 #e8dfc8, 0 10px 22px -12px rgba(90, 78, 45, .18);
  display: flex; align-items: center; gap: 22px;
}
.pgd-ring-wrap {
  position: relative; width: 76px; height: 76px; flex-shrink: 0;
}
/* SVG 跟随 wrapper 缩放（viewBox 已是 0 0 100 100，纯 CSS 控制尺寸） */
.pgd-ring-wrap svg { display: block; width: 100%; height: 100%; }
/* 圆环填充动画：入场时从 251 平滑过渡到目标 offset */
#pgd-ring-arc { transition: stroke-dashoffset .85s cubic-bezier(.34, 1.06, .35, 1); }
/* 达成 100% 时柔和金光脉冲两次 */
#pgd-ring-arc.is-done { animation: pgd-ring-glow 1.4s ease-in-out 2; }
@keyframes pgd-ring-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 184, 0, .35)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 184, 0, .9)); }
}
.pgd-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.pgd-ring-big { font-size: 18px; font-weight: 900; color: #ff8a65; }
.pgd-ring-sub { font-size: 10px; color: #9b8e7a; font-weight: 700; }
.pgd-hero-meta { flex: 1; }
.pgd-hero-title { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.pgd-hero-msg   { font-size: 13px; color: #9b8e7a; margin-bottom: 10px; }
.pgd-bar-track { height: 10px; background: #ffe0cc; border-radius: 99px; overflow: hidden; }
.pgd-bar-fill  { height: 100%; background: linear-gradient(90deg,#ff8a65,#ffb347); border-radius: 99px; transition: width .4s; }
.pgd-hero-stats { display: flex; justify-content: space-between; gap: 18px; margin-top: 14px; }
.pgd-stat { flex: 1; }
.pgd-stat-n   { font-size: 22px; font-weight: 900; }
.pgd-stat-l   { font-size: 12px; color: #9b8e7a; font-weight: 600; }
/* 三个统计数字统一成同一个深色：数字就是数字，不靠随机配色区分 */
.pgd-n-coral,
.pgd-n-sun,
.pgd-n-sky    { color: #3d3a34; }

/* --- 每日任务 --- */
.pgd-refresh-pill {
  font-size: 12px; color: #9b8e7a; background: #ffe8d8;
  padding: 3px 10px; border-radius: 99px; font-weight: 700;
}
.pgd-task-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 2px dashed #ffe0cc;
}
.pgd-task-row:first-of-type { border-top: none; }
.pgd-task-ic {
  width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid rgba(0,0,0,.10);
}
.pgd-ic-coral { background: #ff8a65; color: #fff; }
.pgd-ic-sky   { background: #5b8dee; color: #fff; }
.pgd-ic-grape { background: #ab47bc; color: #fff; }
.pgd-task-body strong { font-size: 14px; font-weight: 800; display: block; margin-bottom: 4px; }
.pgd-task-bar { height: 7px; background: #e7d8c2; border-radius: 99px; overflow: hidden; }
.pgd-task-bar i { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.pgd-bar-coral { background: linear-gradient(90deg,#ff8a65,#ffb347); }
.pgd-bar-sky   { background: linear-gradient(90deg,#5b8dee,#80d8ff); }
.pgd-bar-grape { background: linear-gradient(90deg,#ab47bc,#ce93d8); }
.pgd-pill {
  font-size: 12px; font-weight: 800; white-space: nowrap;
  background: #fff; border-radius: 99px; padding: 3px 9px;
  border: 2px solid currentColor;
}
.pgd-pill-coral { color: #ff8a65; }
.pgd-pill-sky   { color: #5b8dee; }
.pgd-pill-grape { color: #ab47bc; }

/* --- 为你推荐 --- */
/* 让推荐卡在 grid row 里 stretch 到和"每日任务"同高，避免下方留白 */
.pgd-main > .pgd-rec-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.pgd-rec-card > .pgd-rec-grid { flex: 1; }
.pgd-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pgd-rec {
  border-radius: 16px; padding: 14px;
  border: 2px solid transparent; border-bottom-width: 4px;
  cursor: pointer; transition: transform .12s;
}
.pgd-rec:hover { transform: translateY(-2px); }
.pgd-rec-a { background: #fff9f0; border-color: #ffc5a8; border-bottom-color: #ffa07a; }
.pgd-rec-b { background: #eef6ff; border-color: #b8d8ff; border-bottom-color: #80b8ff; }
.pgd-rec-ic { margin-bottom: 7px; }
.pgd-rec strong { font-size: 14px; font-weight: 800; display: block; margin-bottom: 3px; }
.pgd-rec small  { font-size: 13px; color: #9b8e7a; }
.pgd-rec-tag {
  display: inline-block; margin-top: 7px;
  font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
}
.pgd-rec-tag-a { background: #ffe0cc; color: #ff8a65; }
.pgd-rec-tag-b { background: #d8eaff; color: #5b8dee; }

/* --- 本周 XP 柱状图 --- */
.pgd-week-total {
  font-size: 13px; font-weight: 800; color: #ffc820;
  background: #fffbe8; padding: 3px 10px; border-radius: 99px;
  border: 2px solid #ffe08a;
}
.pgd-week-days {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 4px;
}
.pgd-day-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.pgd-day-bar-wrap { width: 100%; height: 48px; display: flex; align-items: flex-end; }
.pgd-day-bar {
  width: 100%; border-radius: 8px 8px 0 0; transition: height .3s;
}
.pgd-day-bar.done    { background: linear-gradient(180deg,#ff8a65,#ffb347); }
.pgd-day-bar.partial { background: linear-gradient(180deg,#ffc5a8,#ffdcc8); }
.pgd-day-bar.empty   { background: #efe8d8; height: 4px !important; border-radius: 4px; }
.pgd-day-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.pgd-day-circle.done    { background: #ff8a65; color: #fff; border: 2px solid #e05a2b; }
.pgd-day-circle.partial { background: #ffc5a8; color: #3a2e1e; }
.pgd-day-circle.empty   { background: #efe8d8; color: #9b8e7a; }
.pgd-day-circle.today   { outline: 3px solid #5b8dee; outline-offset: 2px; }
.pgd-day-letter { font-size: 12px; color: #9b8e7a; font-weight: 700; }

/* --- 右侧栏：联赛排行榜 --- */
.pgd-league-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.pgd-gem {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg,#b388ff,#7c4dff);
  border-bottom: 3px solid #5e35b1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pgd-league-name { font-size: 16px; font-weight: 900; }
.pgd-league-more { font-size: 13px; color: #5b8dee; font-weight: 700; margin-left: auto; cursor: pointer; }
.pgd-rank-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.pgd-rank-num { width: 18px; font-size: 13px; font-weight: 900; color: #9b8e7a; text-align: center; }
.pgd-rank-top { color: #ffc820; }
.pgd-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex-shrink: 0;
  border: 2px solid rgba(0,0,0,.06);
}
.pgd-rank-name { flex: 1; font-size: 13px; font-weight: 700; }
.pgd-rank-xp   { font-size: 13px; font-weight: 900; color: #ff8a65; }
.pgd-rank-me {
  background: #fff9f0; border-radius: 10px;
  border: 2px solid #ffc5a8;
  padding: 5px 8px; margin-top: 4px;
  display: flex; align-items: center; gap: 9px;
}
.pgd-rank-me-name { font-weight: 900; }

/* --- 右侧栏：成就 --- */
.pgd-ach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 2px dashed #efe8d8;
}
.pgd-ach-row:first-of-type { border-top: none; }
.pgd-ach-ic {
  width: 38px; height: 38px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid rgba(0,0,0,.10); flex-shrink: 0;
}
.pgd-ach-body strong { font-size: 13px; font-weight: 800; display: block; }
.pgd-ach-body small  { font-size: 12px; color: #9b8e7a; }
.pgd-ach-prog { margin-top: 4px; height: 5px; background: #efe8d8; border-radius: 99px; overflow: hidden; }
.pgd-ach-prog i { display: block; height: 100%; border-radius: 99px; transition: width .3s; }

/* --- 右侧栏：好友动态 --- */
.pgd-friend-row {
  display: flex; gap: 10px; padding: 7px 0;
  border-top: 2px dashed #efe8d8;
}
.pgd-friend-row:first-of-type { border-top: none; }
.pgd-friend-body { flex: 1; font-size: 13px; }
.pgd-friend-body strong { font-weight: 800; }
.pgd-friend-sub { font-size: 12px; color: #9b8e7a; margin-top: 2px; }
.pgd-xp-pill {
  display: inline-block; background: #fff3e0; color: #ff8a65;
  font-weight: 800; font-size: 12px; padding: 1px 6px; border-radius: 99px;
  border: 1.5px solid #ffc5a8;
}

/* --- 邀请好友 --- */
.pgd-invite {
  background: #fffdf8;
  border-radius: 18px;
  box-shadow: 0 2px 0 0 #e8dfc8, 0 10px 22px -12px rgba(90, 78, 45, .18);
  padding: 18px; text-align: center;
}
.pgd-invite-ic { color: #ff8a65; margin-bottom: 7px; display: flex; justify-content: center; }
.pgd-invite strong { font-size: 15px; font-weight: 900; display: block; margin-bottom: 3px; }
.pgd-invite p { font-size: 13px; color: #9b8e7a; margin-bottom: 12px; }
.pgd-invite-btn {
  background: #ff8a65; color: #fff; font-weight: 900; font-size: 14px;
  border: none; border-radius: 12px; border-bottom: 4px solid #e05a2b;
  padding: 9px 18px; cursor: pointer; width: 100%; font-family: inherit;
}
.pgd-invite-btn:hover { background: #f07050; }

/* ── 深度数据区（并入左侧主区网格） ── */
.pgd-note {
  font-size: 13px;
  color: #9b8e7a;
  line-height: 1.6;
  margin: 10px 0 0;
}
.pgd-trend-card .trend-legend { font-size: 13px; color: #9b8e7a; }

/* 主题掌握度 / CEFR：通栏卡片内部自动分多列，避免一高一矮 */
.pgd-theme-card #theme-bars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px 28px;
}
.pgd-cefr-card #cefr-bars {
  display: block;
}

/* ── 各主题掌握度卡通版：图标染色 + 进度条上色 ── */
.pgd-theme-card .theme-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background .18s;
}
.pgd-theme-card .theme-row:hover {
  background: rgba(255, 245, 225, .55);
}
.pgd-theme-card .theme-ic-wrap {
  width: 36px; height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: var(--th-tint, #f1ece0);
  color: var(--th-color, #9b8e7a);
}
.pgd-theme-card .theme-ic-wrap .ic {
  width: 18px; height: 18px;
  stroke-width: 2.2;
}
.pgd-theme-card .theme-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pgd-theme-card .theme-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pgd-theme-card .theme-name {
  font-size: 14px;
  font-weight: 600;
  color: #4a4232;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pgd-theme-card .theme-meta {
  font-size: 13px;
  color: #9b8e7a;
  font-family: var(--zen-font-body);
  white-space: nowrap;
}
.pgd-theme-card .theme-meta-tot,
.pgd-theme-card .theme-meta-have {
  color: #6b6354;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pgd-theme-card .theme-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 240, 230, .6);
  overflow: hidden;
  position: relative;
}
.pgd-theme-card .theme-bar.empty {
  background: transparent;
  background-image: linear-gradient(to right, rgba(180, 165, 130, .28) 50%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  background-position: center;
}
.pgd-theme-card .theme-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--th-color, #58cc02), var(--th-color-d, #4ba902));
  transition: width .5s ease;
}

/* 各主题色 token：用 server/data/themes.js 里 m.color 对应 */
.pgd-theme-card .theme-yellow { --th-tint: #fff2c2; --th-color: #dba800; --th-color-d: #b88a00; }
.pgd-theme-card .theme-sky    { --th-tint: #ddf4ff; --th-color: #1cb0f6; --th-color-d: #1899d6; }
.pgd-theme-card .theme-orange { --th-tint: #ffeacc; --th-color: #ff9600; --th-color-d: #e08600; }
.pgd-theme-card .theme-grape  { --th-tint: #f1e0ff; --th-color: #ce82ff; --th-color-d: #a560d3; }
.pgd-theme-card .theme-pink   { --th-tint: #ffdcef; --th-color: #ff86d0; --th-color-d: #e86bb9; }
.pgd-theme-card .theme-mint   { --th-tint: #d7f7c2; --th-color: #58cc02; --th-color-d: #4ba902; }

/* ── CEFR 卡通版：单色透明度梯度的"地铁线" ── */
.pgd-cefr-card .cefr-overview {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}
.pgd-cefr-card .cefr-stack {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(245, 240, 230, .35);
  gap: 3px;
}
.pgd-cefr-card .cefr-seg {
  position: relative;
  height: 100%;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: filter .2s;
}
.pgd-cefr-card .cefr-seg:hover { filter: brightness(1.06); }
.pgd-cefr-card .cefr-seg-lbl {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-family: var(--zen-font-mono);
  color: #fff;
  letter-spacing: .04em;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.pgd-cefr-card .cefr-seg > i {
  position: absolute; inset: 0;
  display: block;
  background: rgba(255, 255, 255, .55);
  mix-blend-mode: overlay;
  transition: width .4s ease;
}
/* Onomeo 绿单色梯度：A1 浅→C2 深 */
.pgd-cefr-card .cefr-seg-A1 { background: #cfe8c3; }
.pgd-cefr-card .cefr-seg-A2 { background: #a8d695; }
.pgd-cefr-card .cefr-seg-B1 { background: #82c068; }
.pgd-cefr-card .cefr-seg-B2 { background: #65a847; }
.pgd-cefr-card .cefr-seg-C1 { background: #4f8d33; }
.pgd-cefr-card .cefr-seg-C2 { background: #3a7022; }
/* 较浅的段需要深一点字色才看得清 */
.pgd-cefr-card .cefr-seg-A1 .cefr-seg-lbl,
.pgd-cefr-card .cefr-seg-A2 .cefr-seg-lbl {
  color: #2e5419;
  text-shadow: none;
}

.pgd-cefr-card .cefr-summary {
  font-size: 13px;
  color: #9b8e7a;
  font-family: var(--zen-font-body);
  line-height: 1.7;
}
.pgd-cefr-card .cefr-summary b {
  color: #4a4232;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   HOME · 清新淡绿重设计（对齐设计稿）
   ════════════════════════════════════════════════════════════════ */

/* ── 阶段卡：隐藏 A5 编码，浅绿胶囊背景 ── */
.sb-stage {
  background: #eef7ec;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
}
.sb-stage::after { display: none; }
.sb-stage-id { display: none; }
.sb-stage-art { display: none; }
.sb-stage-cap { color: #6b7a6f; font-size: 12px; }
.sb-stage-cn  { color: #1f2a22; font-weight: 800; font-size: 18px; }
.sb-stage-sub { color: #8a9990; font-size: 12px; margin-top: 2px; }

/* ── 主内容三栏底色统一为同一个 off-white ── */
.app, .content, .aside-right { background: var(--zen-surface); }
.sidebar { background: var(--zen-surface); border-right: 1px solid rgba(20, 30, 22, .05); }
.aside-right { border-left: 1px solid rgba(20, 30, 22, .05); }

/* ── 问候 hero ── */
.home-greet { font-size: 32px; font-weight: 800; color: #1f2a22; }
.home-sub   { font-size: 14px; color: #8a9990; }
.home-hero-deco { width: 240px; height: 130px; opacity: .9; }

/* ── stat 卡：白底大圆角，数字+单位同行 ── */
.home-stat {
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(20, 30, 22, .03), 0 6px 18px -12px rgba(20, 30, 22, .12);
}
.home-stat-num {
  font-size: 24px;
  font-weight: 800;
  color: #1f2a22;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.home-stat-unit {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: #4a5a4f;
}
.home-stat-cap { color: #8a9990; font-size: 13px; }
.home-stat-ic  { width: 44px; height: 44px; border-radius: 12px; }
.home-stat-ic .ic { width: 22px; height: 22px; }
.home-stat[data-tone="mint"]   .home-stat-ic { background: #e0f5d4; color: #3aa64a; }
.home-stat[data-tone="coral"]  .home-stat-ic { background: #ffe6dd; color: #ff7a59; }
.home-stat[data-tone="grape"]  .home-stat-ic { background: #ece1ff; color: #8b5cf6; }
.home-stat[data-tone="yellow"] .home-stat-ic { background: #fff1c2; color: #f5b41a; }

/* ── CTA：胶囊状，宽度跟随主区，去掉双层阴影 ── */
.home-cta {
  width: 100%;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 17px;
  background: #2bcc4e;
  box-shadow: 0 6px 18px -8px rgba(43, 204, 78, .55);
}
.home-cta:hover { background: #25b945; }
.home-cta:active { transform: translateY(1px); box-shadow: 0 3px 10px -6px rgba(43, 204, 78, .5); }
.home-cta-ic { width: 22px; height: 22px; }
.home-cta-ic .ic { width: 12px; height: 12px; }

/* ── 学习路径卡 ── */
.home-path {
  background: #fff;
  border-radius: 18px;
  padding: 14px 28px 10px;
  box-shadow: 0 1px 2px rgba(20, 30, 22, .03), 0 6px 18px -12px rgba(20, 30, 22, .12);
}
.home-path-head { margin-bottom: 6px; }
.home-step { padding: 6px 4px 0; gap: 0; }
.home-path-ttl { font-size: 16px; color: #1f2a22; }
.home-path-ttl .ic { color: #3aa64a; }
.home-path-more {
  background: #f1f5ef;
  color: #4a5a4f;
  font-size: 12.5px;
  padding: 5px 12px;
}
.home-path-more:hover { background: #e3ecdf; color: #1f2a22; }

/* ── 节点之间的波浪曲线（三次贝塞尔正弦波） ── */
.home-path-row::before {
  top: 30px;
  left: 8%;
  right: 8%;
  height: 56px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 60' preserveAspectRatio='none'><path d='M30 30 C 80 6, 130 54, 180 30 S 280 6, 330 30 S 430 54, 480 30 S 580 6, 630 30 S 730 54, 870 30' fill='none' stroke='%23b7e8b9' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  opacity: 1;
  z-index: 0;
}

/* 节点圆形：彩色淡底 + 8px 白环（盖住下面的曲线） + 浮起阴影 */
.step-circle {
  width: 80px; height: 80px;
  margin-top: 14px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 8px #fff, 0 10px 28px -8px rgba(20, 30, 22, .12);
}
.step-circle::before, .step-circle::after { display: none; }
.step-circle .ic { width: 32px; height: 32px; }
.step-glyph { width: 40px; height: 40px; display: block; }
.step-num {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  font-size: 13px;
  background: #2bcc4e;
  border: none;
  box-shadow: 0 2px 6px -1px rgba(43, 204, 78, .45);
  z-index: 3;
}
.step-name { font-size: 15px; color: #1f2a22; margin-top: 12px; font-weight: 700; }
.step-tip  { font-size: 12.5px; color: #9aa39d; margin-top: 2px; }

/* 极淡的彩色背景，参考 Tailwind *-50 色阶 */
.home-step[data-tone="mint"]   .step-circle { background: #ecfdf3; color: #3aa64a; }
.home-step[data-tone="sky"]    .step-circle { background: #eef6ff; color: #4aa3e8; }
.home-step[data-tone="grape"]  .step-circle { background: #f5f1ff; color: #8b5cf6; }
.home-step[data-tone="yellow"] .step-circle { background: #fff8e0; color: #e0a01a; }

/* ── 学习小贴士：白底 + 浅紫灯泡 ── */
.home-tip {
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 22, .03), 0 6px 18px -12px rgba(20, 30, 22, .12);
  border-radius: 14px;
  padding: 14px 20px;
}
.home-tip-ic {
  background: #ece1ff;
  color: #8b5cf6;
  border-radius: 50%;
  width: 38px; height: 38px;
}
.home-tip-ttl { color: #1f2a22; font-size: 13.5px; }
.home-tip-txt { color: #8a9990; font-size: 13px; }
.home-tip-arrow { color: #b8c4bb; }

/* ── 右侧 aside 卡 ── */
.aside-card {
  background: #fff;
  border: none;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(20, 30, 22, .03), 0 6px 18px -12px rgba(20, 30, 22, .12);
}
.aside-card-ttl { color: #1f2a22; font-size: 14px; }
.aside-card-tag { background: #fff1c2; color: #e0a01a; border-radius: 999px; padding: 2px 10px; font-size: 12px; }

.aside-goal .aside-card-ic { background: #e0f5d4; color: #3aa64a; }
.aside-goal-ring { width: 152px; height: 152px; margin: 6px auto 4px; }
.aside-goal-ring .agr-track { stroke: #eef2ec; stroke-width: 11; }
.aside-goal-ring .agr-fill  { stroke: #2bcc4e; stroke-width: 11; }
.aside-goal-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  font-size: 36px;
  color: #2bcc4e;
  font-weight: 800;
}
.aside-goal-num i { color: #2bcc4e; font-size: 18px; font-weight: 700; }
.aside-goal-meta { color: #1f2a22; font-size: 14px; }
.aside-goal-meta strong { color: #1f2a22; }
.aside-goal-tip { color: #8a9990; font-size: 12.5px; }
.aside-goal-detail {
  border: 1px solid #e3ecdf;
  background: #fff;
  color: #4a5a4f;
  border-radius: 12px;
  font-size: 13px;
}
.aside-goal-detail:hover { background: #f1f5ef; color: #1f2a22; }

.aside-card .aside-card-ic { background: #fff5d6; color: #f5b41a; }
.aside-idiom-p { color: #2bcc4e; font-size: 19px; font-weight: 700; }
.aside-idiom-m { color: #1f2a22; font-size: 14px; font-weight: 700; }
.aside-idiom-ex {
  background: #f1f5ef;
  border-radius: 10px;
  padding: 10px 12px;
  color: #4a5a4f;
  font-size: 12.5px;
}
.aside-idiom-speak { background: transparent; color: #8a9990; }
.aside-idiom-speak:hover { background: #fff1c2; color: #e0a01a; }
.aside-idiom-btn {
  background: #fff;
  border: 1px solid #e3ecdf;
  color: #4a5a4f;
  border-radius: 999px;
  font-size: 12.5px;
  padding: 6px 12px;
}
.aside-idiom-btn:hover { background: #f1f5ef; border-color: #d4e0d0; color: #1f2a22; }

.aside-card:has(.aside-streak-row) .aside-card-ic { background: #ffe6dd; color: #ff7a59; }
.aside-streak-tip { color: #8a9990; font-size: 12.5px; }
.aside-streak-dot {
  background: #fff;
  border: 1.5px solid #e3ecdf;
  color: transparent;
}
.aside-streak-dot.is-done {
  background: #2bcc4e;
  border-color: #2bcc4e;
  color: #fff;
}
.aside-streak-lbl { color: #8a9990; font-size: 11px; }

/* ── 首页"为你推荐"卡 ── */
.scene-pick {
  background: #fff;
  border-radius: 18px;
  padding: 18px 22px 20px;
  box-shadow: 0 1px 2px rgba(20, 30, 22, .03), 0 6px 18px -12px rgba(20, 30, 22, .12);
}
.scene-pick.hide { display: none; }
.scene-pick-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.scene-pick-eyebrow { font-size: 14px; font-weight: 800; color: #1f2a22; }
.scene-pick-sub { font-size: 12.5px; color: #8a9990; }
.scene-pick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.scene-pick-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: #f1f5ef;
  color: #1f2a22;
  border-radius: 999px;
  font-size: 13.5px;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.scene-pick-chip:hover { background: #e3ecdf; transform: translateY(-1px); }
.scene-pick-chip-ic { width: 18px; height: 18px; display: grid; place-items: center; color: #3aa64a; }
.scene-pick-chip-ic .ic { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════
   FLASHCARDS · 卡通版背单词皮（仅 cartoon 主题生效）
   - luxe 主题下 luxe.css 在后加载会覆盖这里
   - 命名空间：html[data-theme="cartoon"] .lxfc-page（背单词页根容器，天然作用域隔离）
   - 自定义变量 --fcc-*（flashcard-cartoon），不污染全局
   ════════════════════════════════════════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page {
  --fcc-bg-page:      #f3faff;
  --fcc-surface:      #ffffff;
  --fcc-surface-soft: #f4fbff;
  --fcc-surface-sky:  #e3f3fc;
  --fcc-surface-sky2: #f0faff;
  --fcc-surface-cream:#fff7eb;
  --fcc-surface-warm: #fff5ec;

  --fcc-ink:          #1c2b33;
  --fcc-ink-soft:     #5a6a73;
  --fcc-ink-faint:    #93a3ac;

  --fcc-brand:        #2a78b3;
  --fcc-brand-soft:   #cfe8f6;
  --fcc-brand-soft-2: #e5f3fb;
  --fcc-primary:      #ff8a65;
  --fcc-primary-deep: #d96a3d;
  --fcc-warn:         #f4b14e;
  --fcc-warn-soft:    #fff1d6;
  --fcc-warn-deep:    #b27326;
  --fcc-bad:          #f4a3a0;
  --fcc-bad-soft:     #ffe6e3;
  --fcc-bad-deep:     #c85a52;
  --fcc-good:         #9dd6a4;
  --fcc-good-soft:    #e2f5e4;
  --fcc-good-deep:    #4f8d57;

  --fcc-shadow-card:  0 1px 0 rgba(20,60,90,.04),
                      0 18px 36px -22px rgba(20,60,90,.18);
  --fcc-shadow-stage: 0 2px 0 rgba(20,60,90,.04),
                      0 30px 60px -32px rgba(20,60,90,.22);
  --fcc-shadow-pill:  0 1px 0 rgba(20,60,90,.05),
                      0 10px 24px -16px rgba(20,60,90,.2);

  --fcc-r-md:  16px;
  --fcc-r-lg:  22px;
  --fcc-r-xl:  28px;
  --fcc-r-2xl: 32px;

  --fcc-font-head:  'Nunito Sans', 'Noto Sans SC', system-ui, sans-serif;
  --fcc-font-body:  'Quicksand', 'Noto Sans SC', system-ui, sans-serif;
  --fcc-font-label: 'Lexend', 'Noto Sans SC', system-ui, sans-serif;
}

/* ── 整页接管（卡通主题下也要隐藏全局侧栏，让背单词页占满） ── */
html[data-theme="cartoon"] body.lxfc-mode .sidebar,
html[data-theme="cartoon"] body.lxfc-mode .aside-right,
html[data-theme="cartoon"] body.lxfc-mode .aside-toggle,
html[data-theme="cartoon"] body.lxfc-mode .main-footer { display: none !important; }
html[data-theme="cartoon"] body.lxfc-mode .app {
  display: block !important;
  grid-template-columns: none !important;
}
html[data-theme="cartoon"] body.lxfc-mode .main {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
html[data-theme="cartoon"] body.lxfc-mode #view { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
html[data-theme="cartoon"] body.lxfc-mode #view.view-enter { animation: none !important; }

/* ── 页面整体背景与字体 ── */
html[data-theme="cartoon"] .lxfc-page {
  min-height: 100vh;
  padding: 18px 32px 32px;
  background:
    radial-gradient(1200px 700px at 18% -10%, #e7f4fb 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #fff1de 0%, transparent 55%),
    var(--fcc-bg-page);
  color: var(--fcc-ink);
  font-family: var(--fcc-font-body);
  font-size: 15px;
  line-height: 1.5;
}

/* ════════════════════════════
   顶栏
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 10px 14px 10px 10px;
  margin-bottom: 22px;
  background: transparent;
  border: 0;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: inherit;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 28%, #ffd07a 0%, #ffb255 55%, #f59134 100%);
  box-shadow: 0 2px 0 #d97a2c, 0 10px 22px -10px rgba(245,145,52,.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: static;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-logo::before { content: none; }
html[data-theme="cartoon"] .lxfc-page .lxfc-logo-en {
  font-family: var(--fcc-font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-brand-name {
  font-family: var(--fcc-font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--fcc-brand);
  letter-spacing: 0.2px;
  text-shadow: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-brand-sep {
  width: 1px; height: 22px;
  background: #dbe7ee;
  margin: 0 4px;
  display: inline-block;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-brand-page {
  font-family: var(--fcc-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--fcc-ink);
  letter-spacing: 0;
}

/* —— 今日目标胶囊 —— */
html[data-theme="cartoon"] .lxfc-page .lxfc-goal {
  justify-self: center;
  display: flex; align-items: center; gap: 14px;
  background: #ffffff;
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  box-shadow: var(--fcc-shadow-pill);
  min-width: 480px;
  border: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--fcc-brand-soft);
  color: var(--fcc-brand);
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-ic .ic { width: 20px; height: 20px; stroke-width: 2; }
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-label {
  font-family: var(--fcc-font-label);
  font-weight: 500;
  font-size: 14px;
  color: var(--fcc-ink-soft);
  letter-spacing: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-count {
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 14px;
  color: var(--fcc-ink);
  display: inline-flex; align-items: baseline; gap: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-now  { color: var(--fcc-ink); font-weight: 700; }
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-slash{ color: var(--fcc-ink-faint); margin: 0 3px; }
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-all  { color: var(--fcc-ink-soft); font-size: 14px; }
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-bar {
  flex: 1;
  height: 8px;
  background: #eaf2f7;
  border-radius: 999px;
  overflow: hidden;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffb59e 0%, var(--fcc-primary) 100%);
  border-radius: 999px;
}

/* —— 右上动作按钮 —— */
html[data-theme="cartoon"] .lxfc-page .lxfc-actions {
  display: flex; gap: 10px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-act {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px;
  background: #ffffff;
  border-radius: 999px;
  border: 0;
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 14px;
  color: var(--fcc-ink);
  box-shadow: var(--fcc-shadow-pill);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-act:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(20,60,90,.05), 0 14px 26px -16px rgba(20,60,90,.25); }
html[data-theme="cartoon"] .lxfc-page .lxfc-act-ic { display: inline-flex; color: var(--fcc-ink-soft); }
html[data-theme="cartoon"] .lxfc-page .lxfc-act-ic .ic { width: 18px; height: 18px; stroke-width: 2; }
html[data-theme="cartoon"] .lxfc-page .lxfc-act-tx { font-size: 14px; }
html[data-theme="cartoon"] .lxfc-page #lxfc-act-search .lxfc-act-ic { color: var(--fcc-ink-soft); }
html[data-theme="cartoon"] .lxfc-page #lxfc-act-tts    .lxfc-act-ic { color: var(--fcc-brand); }
html[data-theme="cartoon"] .lxfc-page #lxfc-act-setting .lxfc-act-ic { color: var(--fcc-good-deep); }
html[data-theme="cartoon"] .lxfc-page #lxfc-act-more   .lxfc-act-ic { color: var(--fcc-warn-deep); }

/* ════════════════════════════
   练习区 + 三栏布局
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-practice {
  flex: 1;
  padding: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-practice.hide { display: none; }

html[data-theme="cartoon"] .lxfc-page .lxfc-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  max-width: 1880px;
  margin: 0 auto;
}

/* ════════════════════════════
   左栏：今日词库
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-side-l {
  background: var(--fcc-surface);
  border-radius: var(--fcc-r-2xl);
  padding: 22px 18px 16px;
  box-shadow: var(--fcc-shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 720px;
  position: relative;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-side-l::before { content: none; }

html[data-theme="cartoon"] .lxfc-page .lxfc-side-l-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 14px;
  border: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-side-l-title {
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 14px;
  color: var(--fcc-ink-soft);
  letter-spacing: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-side-l-count {
  color: var(--fcc-ink);
  font-weight: 700;
  font-size: 14px;
  margin-left: 6px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-pill-btn {
  font-family: var(--fcc-font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--fcc-brand);
  background: var(--fcc-brand-soft-2);
  padding: 5px 12px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-pill-btn:hover {
  background: var(--fcc-brand-soft);
  color: var(--fcc-brand);
  border: 0;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-wordlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  background: transparent;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wordlist::before { content: none; }

html[data-theme="cartoon"] .lxfc-page .lxfc-wd {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--fcc-r-lg);
  font-family: var(--fcc-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--fcc-ink);
  cursor: pointer;
  transition: background .15s ease;
  background: transparent;
  position: static;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wd:hover { background: #f3f9fd; }
html[data-theme="cartoon"] .lxfc-page .lxfc-wd:not(:last-child)::before { content: none; }

html[data-theme="cartoon"] .lxfc-page .lxfc-wd-no {
  font-family: var(--fcc-font-label);
  font-size: 12px;
  font-weight: 600;
  color: var(--fcc-ink-faint);
  letter-spacing: 0.04em;
  opacity: 1;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-w {
  color: inherit;
  font-weight: 600;
  opacity: 1;
  margin: 0;
}

/* 列表行右侧的状态图标占位（done/circ/now 用统一的小圆点容器） */
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-ic-done,
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-ic-circ,
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-ic-now {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #cfdde5;
  background: transparent;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  color: transparent;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-ic-done .ic,
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-ic-circ .ic,
html[data-theme="cartoon"] .lxfc-page .lxfc-wd-ic-now .ic { display: none; }

/* 当前学习行：浅蓝高亮 */
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-current {
  background: linear-gradient(180deg, #d6ecf8 0%, #cfe5f4 100%);
  color: var(--fcc-brand);
  box-shadow: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-current::after { content: none; }
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-current .lxfc-wd-no { color: var(--fcc-brand); }
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-current .lxfc-wd-w  { color: var(--fcc-brand); }
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-current .lxfc-wd-ic-now {
  background: #fff;
  border-color: var(--fcc-brand);
}

/* 已完成行：灰文 + 绿对勾圆 */
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-done .lxfc-wd-no { color: var(--fcc-ink-faint); }
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-done .lxfc-wd-w  { color: var(--fcc-ink-soft); }
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-done .lxfc-wd-ic-done {
  background: var(--fcc-good);
  border-color: var(--fcc-good);
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-done .lxfc-wd-ic-done::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 38%, #fff 38%, #fff 46%, transparent 46%) no-repeat 50% 60% / 8px 2px,
    linear-gradient(-45deg, transparent 38%, #fff 38%, #fff 46%, transparent 46%) no-repeat 35% 50% / 4px 2px;
}

/* "查看全部"底部按钮 */
html[data-theme="cartoon"] .lxfc-page .lxfc-view-all {
  width: 100%;
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px;
  background: #f6fafd;
  border-radius: var(--fcc-r-lg);
  border: 0;
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 13px;
  color: var(--fcc-ink-soft);
  cursor: pointer;
  transition: background .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-view-all:hover { background: #ecf4f9; color: var(--fcc-brand); border: 0; }
html[data-theme="cartoon"] .lxfc-page .lxfc-view-all-ic { display: inline-flex; color: var(--fcc-brand); }
html[data-theme="cartoon"] .lxfc-page .lxfc-view-all-ic .ic { width: 18px; height: 18px; }

/* ════════════════════════════
   中栏：单词卡 + 评分按钮
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* —— 卡片舞台：浅蓝渐变 + 远景插画背景 —— */
html[data-theme="cartoon"] .lxfc-page .lxfc-card-stage {
  position: relative;
  border-radius: var(--fcc-r-2xl);
  overflow: hidden;
  padding: 28px 32px 0;
  min-height: 480px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, var(--fcc-surface-sky) 0%, var(--fcc-surface-sky2) 55%, #fff7e8 95%, var(--fcc-surface-cream) 100%);
  box-shadow: var(--fcc-shadow-stage);
}
/* 在舞台底部用纯 CSS 画"远景草丘"作背景插画
   设计走查 #2 #3：原版 170px 占了卡片 1/3，远树小花抢戏让中心词显弱
   改为 100px + 去小花 + 远树缩小，保留"开阔感"意图但不挡主体 */
html[data-theme="cartoon"] .lxfc-page .lxfc-card-stage::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100px;
  background:
    /* 远树（更小、更靠下） */
    radial-gradient(circle at 14% 72%, #86c275 0 16px, transparent 17px),
    radial-gradient(circle at 86% 76%, #7cba6c 0 18px, transparent 19px),
    /* 草丘渐变（透明区上移，让草丘更薄一层） */
    linear-gradient(180deg, transparent 0%, transparent 50%, #bbe1ad 65%, #a8d899 100%);
  pointer-events: none;
  z-index: 0;
}
/* 远云 */
html[data-theme="cartoon"] .lxfc-page .lxfc-card-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 14px;
  height: 60px;
  background:
    radial-gradient(ellipse 56px 18px at 12% 30%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 36px 16px at 18% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 48px 16px at 78% 22%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 30px 13px at 84% 14%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 32px 12px at 50% 10%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 0;
}
/* 屏蔽 luxe 默认 blob */
html[data-theme="cartoon"] .lxfc-page .lxfc-card-stage .fc-blob { display: none !important; }

/* —— 卡片本体：透明背景（让舞台的渐变和插画透出） —— */
html[data-theme="cartoon"] .lxfc-page .flashwrap.lxfc-cardwrap {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 0;
  margin-top: 0;
  display: flex; align-items: stretch; justify-content: center;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-cardwrap .fc-tilt {
  width: 100%;
  max-width: 100%;
  display: flex;
}
html[data-theme="cartoon"] .lxfc-page .flashcard.fc-card.lxfc-card {
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  min-height: 320px;
  padding: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-card .face {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  display: block !important;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-card .face::before,
html[data-theme="cartoon"] .lxfc-page .lxfc-card .face::after { display: none !important; }
/* 隐藏背面，正面统一处理 reveal 切换由 luxe 接管的逻辑 */
html[data-theme="cartoon"] .lxfc-page .lxfc-card .face.back { display: none !important; }
html[data-theme="cartoon"] .lxfc-page .lxfc-card.flipped .inner { transform: none !important; }
html[data-theme="cartoon"] .lxfc-page .lxfc-card .inner { transform-style: flat !important; }

/* "高考核心词"小标签 */
html[data-theme="cartoon"] .lxfc-page .lxfc-card-tag {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  color: var(--fcc-brand);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 13px;
  z-index: 3;
  border: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-card-tag-ic { display: inline-flex; color: var(--fcc-warn); }
html[data-theme="cartoon"] .lxfc-page .lxfc-card-tag-ic .ic { width: 14px; height: 14px; }
html[data-theme="cartoon"] .lxfc-page .lxfc-card-tag-tx { font-size: 13px; letter-spacing: 0; }

/* 右上动作按钮：收藏/重点 双层小卡 */
html[data-theme="cartoon"] .lxfc-page .fc-actions.lxfc-actions-tr {
  position: absolute;
  top: 0; right: 0;
  display: flex; gap: 10px;
  z-index: 3;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-stack {
  width: 56px;
  height: auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px !important;
  background: rgba(255,255,255,.9) !important;
  border: 0 !important;
  border-radius: var(--fcc-r-md) !important;
  box-shadow: 0 1px 0 rgba(20,60,90,.04), 0 8px 18px -12px rgba(20,60,90,.18) !important;
  font-family: var(--fcc-font-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--fcc-ink-soft) !important;
  cursor: pointer;
  transition: transform .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-stack:hover { transform: translateY(-1px); background: #fff !important; color: var(--fcc-ink) !important; }
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-stack .ic { width: 22px; height: 22px; stroke-width: 2; }
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-fav .ic  { color: var(--fcc-warn); }
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-fav.on .ic,
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-stack.on .ic { color: #ffb43b; fill: #ffd97a; }
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-mark .ic { color: var(--fcc-brand); }
html[data-theme="cartoon"] .lxfc-page .lxfc-iconbtn-tx { font-size: 11px; color: inherit; }

/* —— 卡正面内容 —— */
html[data-theme="cartoon"] .lxfc-page .fc-front-inner.lxfc-front-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 64px 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-word-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word {
  font-family: var(--fcc-font-head) !important;
  font-weight: 800 !important;
  color: var(--fcc-brand) !important;
  font-size: 88px !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  text-shadow: none !important;
  margin: 0 !important;
}
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="1"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="2"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="3"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="4"] { font-size: 108px !important; }
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="8"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="9"] { font-size: 76px !important; }
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="10"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="11"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="12"] { font-size: 66px !important; }
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="13"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="14"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="15"],
html[data-theme="cartoon"] .lxfc-page .fc-card .word.lxfc-word[data-len="16"] { font-size: 56px !important; }

html[data-theme="cartoon"] .lxfc-page .lxfc-speakbtn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--fcc-brand) !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(20,60,90,.05), 0 6px 14px -10px rgba(20,60,90,.4) !important;
  transition: transform .15s ease !important;
  cursor: pointer;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-speakbtn:hover { transform: scale(1.08); background: #fff !important; }
html[data-theme="cartoon"] .lxfc-page .lxfc-speakbtn .ic { width: 18px; height: 18px; }

html[data-theme="cartoon"] .lxfc-page .lxfc-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--fcc-font-body);
  font-size: 18px;
  color: var(--fcc-ink-soft);
  margin: 0;
}
html[data-theme="cartoon"] .lxfc-page .fc-card .pron.lxfc-pron {
  color: var(--fcc-ink-soft) !important;
  font-size: 18px !important;
  letter-spacing: 0.5px;
  font-style: normal;
  margin: 0 !important;
}
html[data-theme="cartoon"] .lxfc-page .fc-card .pos.lxfc-pos {
  color: var(--fcc-ink-soft) !important;
  font-size: 18px !important;
  font-style: italic;
  margin: 0 !important;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-def {
  font-family: var(--fcc-font-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--fcc-ink);
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 720px;
  width: 100%;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-ex-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(4px);
  border-radius: var(--fcc-r-lg);
  padding: 12px 16px;
  border: 0;
  max-width: 720px;
  width: 100%;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-tag {
  flex: 0 0 auto;
  background: var(--fcc-brand-soft-2);
  color: var(--fcc-brand);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--fcc-font-label);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-body { display: flex; flex-direction: column; gap: 4px; text-align: left; flex: 1; min-width: 0; }
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-en {
  font-family: var(--fcc-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fcc-ink);
  line-height: 1.45;
  margin: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-en em {
  color: var(--fcc-primary-deep);
  font-style: italic;
  font-weight: 700;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-cn {
  font-family: var(--fcc-font-body);
  font-size: 13px;
  color: var(--fcc-ink-soft);
  line-height: 1.5;
  margin: 0;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic {
  background: rgba(255,247,235,.85);
  backdrop-filter: blur(4px);
  border-radius: var(--fcc-r-lg);
  padding: 12px 16px;
  border: 0;
  max-width: 720px;
  width: 100%;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic.is-hidden { display: none; }
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-ic { display: inline-flex; color: var(--fcc-warn-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-ic .ic { width: 16px; height: 16px; }
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-title {
  font-family: var(--fcc-font-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--fcc-warn-deep);
}
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-body {
  font-family: var(--fcc-font-body);
  font-size: 13px;
  color: var(--fcc-ink-soft);
  line-height: 1.5;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-body p { margin: 0; }
html[data-theme="cartoon"] .lxfc-page .lxfc-mnemonic-body p + p { margin-top: 2px; color: var(--fcc-ink-faint); }

html[data-theme="cartoon"] .lxfc-page .fc-tap-hint.lxfc-taphint {
  font-family: var(--fcc-font-label);
  font-size: 13px;
  color: var(--fcc-ink-faint);
  margin-top: 8px;
  text-align: center;
  letter-spacing: 0;
}

/* 翻面前隐藏释义/例句/记忆，露出"点击查看"提示 —— 与 luxe 行为一致 */
html[data-theme="cartoon"] .lxfc-page .fc-card:not(.is-revealed) .face.front .lxfc-def,
html[data-theme="cartoon"] .lxfc-page .fc-card:not(.is-revealed) .face.front .lxfc-ex-row,
html[data-theme="cartoon"] .lxfc-page .fc-card:not(.is-revealed) .face.front .lxfc-mnemonic { display: none !important; }
html[data-theme="cartoon"] .lxfc-page .fc-card.is-revealed .face.front .lxfc-taphint { display: none !important; }

/* 揭示动画：三块内容错峰从下方浮入 + 淡入（对齐金箔风行为） */
@keyframes fcc-reveal-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-revealed .face.front .lxfc-def {
  display: block;
  animation: fcc-reveal-rise .42s cubic-bezier(.2,.7,.2,1) both;
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-revealed .face.front .lxfc-ex-row {
  display: flex;
  animation: fcc-reveal-rise .42s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .09s;
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-revealed .face.front .lxfc-mnemonic {
  display: block;
  animation: fcc-reveal-rise .48s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .18s;
}

/* 卡片点击瞬间给点轻反馈（点下沉一下，松开回弹），跟 3D 评分按钮节奏一致 */
html[data-theme="cartoon"] .lxfc-page .fc-card {
  transition: transform .12s cubic-bezier(.2,.7,.2,1);
}
html[data-theme="cartoon"] .lxfc-page .fc-card:active {
  transform: scale(.985);
}
/* 翻面瞬间，大单词词形和提示行也轻轻浮动一下，整张卡片有"被翻动"的感觉 */
@keyframes fcc-word-settle {
  0%   { transform: translateY(-4px); }
  60%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-revealed .face.front .lxfc-word-row {
  animation: fcc-word-settle .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fcc-meta-fade {
  from { opacity: .55; }
  to   { opacity: 1; }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-revealed .face.front .lxfc-meta-row {
  animation: fcc-meta-fade .35s ease both;
}

/* ════════════════════════════
   三色评分按钮（3D pressable）
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .rating.fc-rating.lxfc-rating {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 4px 4px 0;
  background: transparent;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 20px;
  min-height: 72px;
  border: 0;
  border-radius: 20px;
  font-family: var(--fcc-font-head);
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6);
  position: relative;
  flex: 0 0 auto;
}
/* 用纯 CSS 画三种小圆脸（不依赖外部图标，也不用 emoji） */
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face::before,
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face::after {
  content: '';
  position: absolute;
}
/* 眼睛：所有脸通用，两个小圆点 */
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face[data-face]::before {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  top: 12px;
  left: 11px;
  box-shadow: 14px 0 0 currentColor;
}
/* 嘴：用 border 画弧 */
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face[data-face="sad"]::after {
  width: 12px; height: 8px;
  bottom: 8px; left: 12px;
  border-top: 2px solid currentColor;
  border-radius: 12px 12px 0 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face[data-face="meh"]::after {
  width: 12px; height: 2px;
  bottom: 11px; left: 12px;
  background: currentColor;
  border-radius: 2px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face[data-face="happy"]::after {
  width: 12px; height: 8px;
  bottom: 8px; left: 12px;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 12px 12px;
}
/* 如果 SVG icon 渲染了，也藏掉（用 CSS 画的脸即可） */
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-face .ic { display: none; }

html[data-theme="cartoon"] .lxfc-page .lxfc-rate-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-tx-main {
  font-family: var(--fcc-font-head);
  font-weight: 800;
  font-size: 18px;
  color: inherit;
  letter-spacing: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-tx-sub {
  font-family: var(--fcc-font-label);
  font-weight: 500;
  font-size: 13px;
  color: inherit;
  opacity: 0.72;
  letter-spacing: 0;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-rate-no {
  background: var(--fcc-bad-soft);
  color: var(--fcc-bad-deep);
  box-shadow: 0 4px 0 #f0c2bd;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-no .lxfc-rate-face { background: #fbd2cf; color: var(--fcc-bad-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-no:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #f0c2bd; }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-no:active { transform: translateY(2px); box-shadow: 0 0 0 #f0c2bd; }

html[data-theme="cartoon"] .lxfc-page .lxfc-rate-mid {
  background: var(--fcc-warn-soft);
  color: var(--fcc-warn-deep);
  box-shadow: 0 4px 0 #f0d8a7;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-mid .lxfc-rate-face { background: #f7dfa6; color: var(--fcc-warn-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-mid:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #f0d8a7; }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-mid:active { transform: translateY(2px); box-shadow: 0 0 0 #f0d8a7; }

html[data-theme="cartoon"] .lxfc-page .lxfc-rate-ok {
  background: var(--fcc-good-soft);
  color: var(--fcc-good-deep);
  box-shadow: 0 4px 0 #b8e0bd;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-ok .lxfc-rate-face { background: #c6e9c9; color: var(--fcc-good-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-ok:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b8e0bd; }
html[data-theme="cartoon"] .lxfc-page .lxfc-rate-ok:active { transform: translateY(2px); box-shadow: 0 0 0 #b8e0bd; }

/* —— 快捷键提示 —— */
html[data-theme="cartoon"] .lxfc-page .fc-tip-row.lxfc-kbd-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px;
  font-family: var(--fcc-font-label);
  font-size: 13px;
  color: var(--fcc-ink-soft);
  margin: 6px 0 0;
  padding: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-kbd-label { color: var(--fcc-ink-faint); letter-spacing: 0; opacity: 1; }
html[data-theme="cartoon"] .lxfc-page .lxfc-kbd-row kbd {
  font-family: var(--fcc-font-label);
  font-size: 12px;
  color: var(--fcc-ink);
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(20,60,90,.08), inset 0 0 0 1px #e7eef3;
  border: 0;
}

/* ════════════════════════════
   右栏：学习统计 + 例句
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-side-r {
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0;
  background: transparent;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-card,
html[data-theme="cartoon"] .lxfc-page .lxfc-related-card {
  background: var(--fcc-surface);
  border-radius: var(--fcc-r-2xl);
  padding: 22px 22px 18px;
  box-shadow: var(--fcc-shadow-card);
  border: 0;
}

html[data-theme="cartoon"] .lxfc-page .lxfc-stat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  border: 0;
  padding: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-title {
  font-family: var(--fcc-font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--fcc-ink);
  letter-spacing: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-link-btn {
  font-family: var(--fcc-font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--fcc-ink-soft);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-link-btn:hover { color: var(--fcc-brand); }

html[data-theme="cartoon"] .lxfc-page .lxfc-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-cell {
  background: #f6fafd;
  border-radius: var(--fcc-r-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-cell-head {
  display: flex; align-items: center; gap: 8px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-ic { display: inline-flex; }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-ic .ic { width: 16px; height: 16px; stroke-width: 2; }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-ic-mastered { color: var(--fcc-brand); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-ic-streak   { color: var(--fcc-primary-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-ic-acc      { color: var(--fcc-good-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-ic-left     { color: var(--fcc-warn-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-label {
  font-family: var(--fcc-font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--fcc-ink-soft);
  letter-spacing: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-num {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--fcc-font-head);
  font-weight: 800;
  color: var(--fcc-brand);
  font-size: 32px;
  line-height: 1;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-cell:nth-child(2) .lxfc-stat-num { color: var(--fcc-primary-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-cell:nth-child(3) .lxfc-stat-num { color: var(--fcc-good-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-cell:nth-child(4) .lxfc-stat-num { color: var(--fcc-warn-deep); }
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-unit {
  font-family: var(--fcc-font-label);
  font-weight: 500;
  font-size: 13px;
  color: var(--fcc-ink-soft);
}

/* —— 例句卡 tab + 列表 —— */
html[data-theme="cartoon"] .lxfc-page .lxfc-related-card { padding: 18px 22px 18px; }

html[data-theme="cartoon"] .lxfc-page .lxfc-tabs {
  display: flex; gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  background: #f4faff;
  border-radius: 999px;
  border: 0;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-tab {
  flex: 1;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--fcc-font-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--fcc-ink-soft);
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-tab:hover { color: var(--fcc-ink); }
html[data-theme="cartoon"] .lxfc-page .lxfc-tab.is-on {
  background: #ffffff;
  color: var(--fcc-brand);
  box-shadow: 0 1px 0 rgba(20,60,90,.05), 0 6px 12px -8px rgba(20,60,90,.2);
}
html[data-theme="cartoon"] .lxfc-page .lxfc-tab.is-on::after { content: none; }

html[data-theme="cartoon"] .lxfc-page .lxfc-tab-panel { min-height: 110px; display: flex; flex-direction: column; }
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-list {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-item {
  display: grid;
  grid-template-columns: 8px 1fr 28px;
  column-gap: 10px;
  align-items: start;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-dot {
  width: 5px; height: 5px;
  margin-top: 9px;
  background: var(--fcc-brand);
  border-radius: 50%;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-text .lxfc-ex-en {
  font-family: var(--fcc-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fcc-ink);
  line-height: 1.45;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-text .lxfc-ex-en em {
  color: var(--fcc-primary-deep);
  font-weight: 700;
  font-style: italic;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-text .lxfc-ex-cn {
  font-family: var(--fcc-font-body);
  font-size: 13px;
  color: var(--fcc-ink-soft);
  line-height: 1.5;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-speak {
  width: 26px; height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--fcc-brand-soft-2);
  color: var(--fcc-brand);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-speak:hover { background: var(--fcc-brand-soft); color: var(--fcc-brand); border: 0; }
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-speak .ic { width: 14px; height: 14px; }

html[data-theme="cartoon"] .lxfc-page .lxfc-empty-line {
  text-align: center;
  padding: 20px 0;
  color: var(--fcc-ink-faint);
  font-size: 13px;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-more-btn {
  width: 100%;
  margin-top: 16px;
  padding: 11px 14px;
  background: #f6fafd;
  border: 0;
  border-radius: var(--fcc-r-lg);
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 13px;
  color: var(--fcc-ink-soft);
  cursor: pointer;
  transition: background .15s ease;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-more-btn:hover { background: #ecf4f9; color: var(--fcc-brand); border: 0; }

/* ════════════════════════════
   底栏：模式切换
   ════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 32px auto 0;
  padding: 0 32px;
  max-width: 1880px;
  background: transparent;
  border-top: 0;
  border-radius: var(--fcc-r-2xl);
  background: #ffffff;
  box-shadow: var(--fcc-shadow-card);
  overflow: hidden;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px;
  text-decoration: none;
  color: var(--fcc-ink-soft);
  font-family: var(--fcc-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  position: relative;
  background: transparent;
  transition: background .15s ease, color .15s ease;
  box-shadow: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode:hover { color: var(--fcc-brand); background: #f4faff; }
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode.is-on {
  color: var(--fcc-brand);
  background: var(--fcc-brand-soft-2);
  box-shadow: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode.is-on::after { content: none; }
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode-ic { display: inline-flex; color: inherit; }
html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode-ic .ic { width: 18px; height: 18px; stroke-width: 2; }

/* ════════════════════════════
   响应式：窄屏退化
   ════════════════════════════ */
@media (max-width: 1280px) {
  html[data-theme="cartoon"] .lxfc-page .lxfc-topbar { grid-template-columns: 1fr; gap: 12px; padding: 14px 8px; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-actions { justify-content: flex-start; flex-wrap: wrap; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-goal { min-width: 0; width: 100%; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-grid { grid-template-columns: 1fr; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-side-l, html[data-theme="cartoon"] .lxfc-page .lxfc-side-r { order: 2; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-main { order: 1; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-side-l { min-height: 0; }
}
@media (max-width: 720px) {
  html[data-theme="cartoon"] .lxfc-page { padding: 12px 14px 18px; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-rating { grid-template-columns: 1fr; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-modebar { padding: 0; }
  html[data-theme="cartoon"] .lxfc-page .lxfc-modebar .lxfc-mode { font-size: 13px; padding: 14px 8px; }
}

/* ════════════════════════════════════════════════════════════════
   多邻国式动效（A 弹入 / C 答对 / D 答错 / F 朗读 ripple）
   ════════════════════════════════════════════════════════════════ */

/* A. 卡片弹入：spring overshoot，每次 showCard 由 JS 加 .fcc-enter 触发 */
@keyframes fcc-card-enter {
  0%   { opacity: 0; transform: translateY(20px) scale(.92); }
  60%  { opacity: 1; transform: translateY(0)    scale(1.04); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.fcc-enter {
  animation: fcc-card-enter .42s cubic-bezier(.2,.7,.2,1) both;
}

/* C. 答对：卡片绿色光晕脉冲 + 高光横扫 */
@keyframes fcc-right-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(80,180,100,0); }
  40%      { box-shadow: 0 0 0 8px rgba(80,180,100,.18), 0 0 40px rgba(80,180,100,.25); }
}
@keyframes fcc-sheen {
  0%   { transform: translateX(-110%) skewX(-12deg); opacity: 0; }
  30%  { opacity: .9; }
  100% { transform: translateX(120%)  skewX(-12deg); opacity: 0; }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-right .face.front {
  animation: fcc-right-flash .35s ease;
  position: relative;
  z-index: 1;
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-right .face.front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
  animation: fcc-sheen .5s cubic-bezier(.2,.7,.2,1);
}

/* D. 答错：卡片左右抖 4 次 + 红色光晕脉冲 */
@keyframes fcc-shake-x {
  0%, 100%  { transform: translateX(0); }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px); }
}
@keyframes fcc-wrong-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,90,80,0); }
  40%      { box-shadow: 0 0 0 8px rgba(200,90,80,.16), 0 0 40px rgba(200,90,80,.22); }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-wrong {
  animation: fcc-shake-x .32s cubic-bezier(.36,.07,.19,.97);
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-wrong .face.front {
  animation: fcc-wrong-flash .32s ease;
}

/* 模糊：黄色光晕脉冲一下（中性反馈，不抖不闪） */
@keyframes fcc-meh-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,177,78,0); }
  40%      { box-shadow: 0 0 0 8px rgba(244,177,78,.18), 0 0 40px rgba(244,177,78,.22); }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.is-meh .face.front {
  animation: fcc-meh-flash .32s ease;
}

/* 评分按钮：被点时整体 pop 一下（缩-涨-回正） */
@keyframes fcc-btn-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(.96); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
html[data-theme="cartoon"] .lxfc-page .lxfc-rate.is-bouncing {
  animation: fcc-btn-pop .32s cubic-bezier(.2,.7,.2,1);
}

/* F. 朗读按钮 ripple：点击时按钮外扩半透环 */
@keyframes fcc-ripple {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(2.4);  opacity: 0; }
}
html[data-theme="cartoon"] .lxfc-page .lxfc-speakbtn { position: relative; overflow: visible; }
html[data-theme="cartoon"] .lxfc-page .lxfc-speakbtn.is-rippling::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fcc-brand-soft);
  z-index: 0;
  animation: fcc-ripple .6s cubic-bezier(.2,.7,.2,1) forwards;
  pointer-events: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-speakbtn .ic { position: relative; z-index: 1; }
/* 右栏例句行的小朗读按钮也来一份 ripple */
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-speak { position: relative; overflow: visible; }
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-speak.is-rippling::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fcc-brand-soft);
  z-index: 0;
  animation: fcc-ripple .55s cubic-bezier(.2,.7,.2,1) forwards;
  pointer-events: none;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-ex-speak .ic { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════
   Duo 风扩展（B 单词 spring / G 进度条 pump / 数字翻牌 / +1 气泡飞）
   ════════════════════════════════════════════════════════════════ */

/* B. 大单词 spring 弹入（卡片 fcc-enter 时联动，略晚于卡片本身） */
@keyframes fcc-word-pop {
  0%   { transform: scale(.6);  opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
html[data-theme="cartoon"] .lxfc-page .fc-card.fcc-enter .word.lxfc-word {
  animation: fcc-word-pop .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .08s;
  display: inline-block;
  transform-origin: center center;
}

/* G. 顶部进度条 spring 涨：fill 加 .is-pumping 时 scaleY 突涨突落 */
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-bar > i {
  transition: width .42s cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}
@keyframes fcc-bar-pump {
  0%   { transform: scaleY(1); }
  35%  { transform: scaleY(1.7); }
  100% { transform: scaleY(1); }
}
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-bar > i.is-pumping {
  animation: fcc-bar-pump .42s cubic-bezier(.2,.7,.2,1);
}

/* 数字翻牌：is-bumping 时数字 spring 一下并染绿 */
@keyframes fcc-num-bump {
  0%   { transform: translateY(0)    scale(1); }
  35%  { transform: translateY(-4px) scale(1.2); color: var(--fcc-good-deep); }
  100% { transform: translateY(0)    scale(1); }
}
html[data-theme="cartoon"] .lxfc-page .lxfc-stat-num > span.is-bumping,
html[data-theme="cartoon"] .lxfc-page .lxfc-goal-now.is-bumping,
html[data-theme="cartoon"] .lxfc-page .lxfc-side-l-count.is-bumping {
  display: inline-block;
  animation: fcc-num-bump .4s cubic-bezier(.2,.7,.2,1);
}

/* +1 小气泡飞起（点"认识"时从按钮飞向右栏统计） */
@keyframes fcc-xp-fly {
  0%   { transform: translate(-50%, 0)               scale(.8); opacity: 0; }
  18%  { transform: translate(-50%, -8px)            scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -120px)) scale(.6); opacity: 0; }
}
.fcc-xp-bubble {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(180deg, #b3e5b8 0%, #9dd6a4 100%);
  color: #2b6e36;
  font-family: 'Nunito Sans', 'Noto Sans SC', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(79,141,87,.45);
  animation: fcc-xp-fly 1.1s cubic-bezier(.4,0,.2,1) forwards;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   学完一组的庆祝（empty 状态）
   ════════════════════════════════════════════════════════════════ */
@keyframes fcc-trophy-pop {
  0%   { transform: scale(0)   rotate(-18deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(6deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
@keyframes fcc-cele-rise {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
@keyframes fcc-star-twinkle {
  0%, 100% { transform: scale(.6) rotate(0deg);   opacity: .35; }
  50%      { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty {
  text-align: center;
  padding: 56px 32px 48px;
  background: var(--fcc-surface);
  border-radius: var(--fcc-r-2xl);
  box-shadow: var(--fcc-shadow-card);
  position: relative;
  overflow: hidden;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty #empty-ic {
  animation: fcc-trophy-pop .55s cubic-bezier(.2,.7,.2,1) both;
  color: var(--fcc-warn);
  margin-bottom: 16px !important;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty #empty-ic .ic {
  color: var(--fcc-warn);
  filter: drop-shadow(0 4px 10px rgba(244,177,78,.4));
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty h3 {
  font-family: var(--fcc-font-head);
  font-size: 26px !important;
  color: var(--fcc-good-deep);
  margin: 0 0 10px;
  animation: fcc-cele-rise .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .14s;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty p.muted {
  color: var(--fcc-ink-soft);
  font-size: 15px;
  margin: 0 0 22px;
  animation: fcc-cele-rise .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .24s;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--fcc-primary);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--fcc-font-label);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 0 var(--fcc-primary-deep);
  animation: fcc-cele-rise .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: .34s;
  transition: transform .12s ease, box-shadow .12s ease;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--fcc-primary-deep);
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty .btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--fcc-primary-deep);
}
/* 两颗装饰小星（左上 + 右上），错峰闪光，不抢戏 */
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty::before,
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle, #ffd980 30%, transparent 70%) center/100% 100% no-repeat,
    linear-gradient(45deg, transparent 46%, #ffd980 46% 54%, transparent 54%) center/12px 4px no-repeat,
    linear-gradient(-45deg, transparent 46%, #ffd980 46% 54%, transparent 54%) center/12px 4px no-repeat;
  border-radius: 50%;
  animation: fcc-star-twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty::before {
  top: 16%; left: 16%;
  animation-delay: 0s;
}
html[data-theme="cartoon"] .lxfc-page #empty.lxfc-empty::after {
  top: 22%; right: 18%;
  animation-delay: 1.1s;
}

/* ════════════════════════════════════════════════════════════════
   左栏列表行：错题再现的小红点（曾被点"不认识"的词）
   ════════════════════════════════════════════════════════════════ */
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-wrong-prev .lxfc-wd-no {
  position: relative;
}
html[data-theme="cartoon"] .lxfc-page .lxfc-wd.is-wrong-prev .lxfc-wd-no::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fcc-bad-deep);
  box-shadow: 0 0 0 2px rgba(200,90,82,.18);
}

/* ════════════════════════════════════════════════════════════════
   QUIZ 页 · cartoon 模式下整体限宽 + 顶部状态条紧贴卡片头（设计走查 #9）
   原状：心心+连击在右上、第 X 题+得分在卡片右上，两组隔 100px 视觉分散
   修法：限宽 920px 居中 + 收紧 page-header 与卡片间距，让状态信息形成连续带
   ════════════════════════════════════════════════════════════════ */
[data-theme="cartoon"] .view-quiz {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px;
}
[data-theme="cartoon"] .view-quiz .page-header {
  margin-bottom: 14px;
}
[data-theme="cartoon"] .view-quiz #quiz-practice .row.mb-12 {
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════
   QUIZ 连连看 · 左右列默认色区分（设计走查 #8 增强）
   状态机本来就完整（selected/matched/wrong/shake/burst 都在 style.css），
   只是默认态左右同色，新用户一眼看不出"哪边是源/目标"。
   左列英文 = 浅蓝 t-sky（保持默认）；右列中文 = 浅紫 t-grape。
   luxe 主题没有 -def 选择器，不会被影响。
   ════════════════════════════════════════════════════════════════ */
[data-theme="cartoon"] .match-cell-def:not(.selected):not(.matched):not(.wrong) {
  background: var(--t-grape, #f1e0ff);
}

/* ════════════════════════════════════════════════════════════════
   LISTEN 页 · cartoon 模式下的布局收敛（设计走查 #13 #14 #15 #16 #17）
   问题：1920×1080 主区下方 80% 空白；返回/tabs/主练习区横向撑满 → 孤岛感
   方案：整个 .view-listen 容器限宽居中（790px），所有子元素跟随
   边界：用 [data-theme="cartoon"] 隔离，不影响 luxe（luxe 自有 grid 布局）
        splash 是 position:fixed，max-width 不会成为它的包含块，安全
   ════════════════════════════════════════════════════════════════ */
[data-theme="cartoon"] .view-listen {
  max-width: 790px;
  margin: 0 auto;
  padding: 0 16px;
}
/* "提交 / 看答案 / 下一句"按钮组孤零零贴在输入框左边（设计走查 #15）
   改成左右贴齐输入框、提交按钮稍微做主 CTA 视觉强调 */
.view-listen #tab-listen .row.mt-12,
.view-listen #tab-speak .row.mt-12 {
  margin-top: 20px;
  gap: 12px;
}
/* 顶部"播放 / 慢速 / 已听 X 次"层次乱（设计走查 #16）
   播放按钮主、慢速副、计数最弱 —— 按 visual weight 排序就行 */
.view-listen #tab-listen > .row:not(.mt-12),
.view-listen #tab-speak > .row:not(.mt-12) {
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.view-listen #tab-listen #play-count,
.view-listen #tab-speak #play-count {
  font-size: 13px;
  opacity: .7;
}
/* 输入框下划线风跟整个 Duolingo 圆角风对不上（设计走查 #17）
   换成圆角 + 浅灰底 + focus 时蓝色边 */
.view-listen .input-spell {
  background: var(--panel, #fff);
  border: 2px solid var(--border, #e5e5e5);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.view-listen .input-spell:focus {
  outline: none;
  border-color: var(--c-sky, #1cb0f6);
  box-shadow: 0 0 0 3px rgba(28, 176, 246, .12);
}

/* ════════════════════════════════════════════════════════════════
   卡通主题 · 彩色图标（Duolingo 风：每个图标一个品牌色）
   icon() 给每个 svg 加 .ic-c-<名字>；这里按色系分组上色。
   luxe 主题没有这些规则 → 图标自动退回 currentColor（暗金/单色）。
   注意：① 更高优先级的局部规则（如 #empty-ic .ic）仍然赢，故意保留；
        ② 实色按钮里的图标用 color:inherit 兜底，跟按钮文字同色不抢色。
   ════════════════════════════════════════════════════════════════ */
html[data-theme="cartoon"] :is(.ic-c-home,.ic-c-leaf,.ic-c-sprout,.ic-c-chart,.ic-c-thumbsUp,.ic-c-userPlus,.ic-c-play) { color: #58cc02; }
html[data-theme="cartoon"] :is(.ic-c-compass,.ic-c-globe,.ic-c-book,.ic-c-bookOpen,.ic-c-search,.ic-c-mail,.ic-c-speaker,.ic-c-volume,.ic-c-plane,.ic-c-clock,.ic-c-clipboard,.ic-c-users,.ic-c-faceSad) { color: #1cb0f6; }
html[data-theme="cartoon"] :is(.ic-c-headphones,.ic-c-mic,.ic-c-sparkles,.ic-c-brain,.ic-c-feather,.ic-c-grid,.ic-c-eye) { color: #ce82ff; }
html[data-theme="cartoon"] :is(.ic-c-cards,.ic-c-flame,.ic-c-zap,.ic-c-coffee,.ic-c-package,.ic-c-utensils,.ic-c-alert) { color: #ff9600; }
html[data-theme="cartoon"] :is(.ic-c-star,.ic-c-trophy,.ic-c-crown,.ic-c-bulb,.ic-c-award,.ic-c-smile,.ic-c-faceHappy) { color: #e8b500; }
html[data-theme="cartoon"] :is(.ic-c-heart,.ic-c-target,.ic-c-calendar) { color: #ff5a7e; }
html[data-theme="cartoon"] :is(.ic-c-user,.ic-c-briefcase,.ic-c-cpu) { color: #4648d4; }
html[data-theme="cartoon"] :is(.ic-c-gear,.ic-c-lock,.ic-c-trash,.ic-c-faceMeh,.ic-c-speakerMute) { color: #97a0b5; }
/* 实色按钮里的图标：跟按钮文字同色，避免品牌色撞在彩底上 */
html[data-theme="cartoon"] button .ic,
html[data-theme="cartoon"] .btn .ic { color: inherit; }

/* ════════════════════════════════════════════════════════════════
   双风格图标 · 调色板（彩色插画 .ic-i 用 --i1..--i4 + 描边 --iln）
   见 js/app.js 的 ICI。马克笔线描 .ic-m 不在这里——它走 currentColor
   跟随上下文，无需配色规则。
   ════════════════════════════════════════════════════════════════ */
/* luxe：所有彩色插画统一收成金色调（亮金 / 中金 / 暗金 / 米白 / 描边） */
html[data-theme="luxe"] .ic-i{
  --i1:#F5C518;--i2:#CF9F2C;--i3:#7C5E1B;--i4:#FFF1C4;--iln:#241a06;
}
/* cartoon：默认暖色兜底（暂无专属配色的插画图标用这套） */
html[data-theme="cartoon"] .ic-i{
  --i1:#ff9f43;--i2:#ffce6b;--i3:#e0612e;--i4:#fff3d8;--iln:#2b2117;
}
/* cartoon：每个图标专属配色 —— 让导航五颜六色、不单调 */
html[data-theme="cartoon"] .ic-c-home{--i1:#ff7a63;--i2:#ffce6b;--i3:#46b1a8;--i4:#bce8fb;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-compass{--i1:#1cb0f6;--i2:#bfe8fb;--i3:#ff7a63;--i4:#fff3d0;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-cards{--i1:#ff9600;--i2:#ffce6b;--i3:#e0612e;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-headphones{--i1:#8a7bf0;--i2:#ffce6b;--i3:#5a4ad0;--i4:#ffffff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-book{--i1:#3fb55a;--i2:#6dd07f;--i3:#2c8a42;--i4:#eafce8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-user{--i1:#ff7aa0;--i2:#ffe0cf;--i3:#e0577f;--i4:#ffffff;--iln:#2b2117;}
/* batch 2 —— 成就 / 物件 */
html[data-theme="cartoon"] .ic-c-trophy{--i1:#ffc83d;--i2:#e8a01e;--i3:#b8780f;--i4:#fff3c4;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-star{--i1:#ffd23f;--i2:#ffb800;--i3:#d99200;--i4:#fff6cf;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-flame{--i1:#ff8a3d;--i2:#ff6b35;--i3:#e0451f;--i4:#ffd98a;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-zap{--i1:#ffc619;--i2:#ff9600;--i3:#d97800;--i4:#fff0b0;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-crown{--i1:#ffc83d;--i2:#e8a01e;--i3:#b8780f;--i4:#ce82ff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-award{--i1:#1cb0f6;--i2:#0e8fce;--i3:#ff5a7e;--i4:#fff3c4;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-target{--i1:#ff5a7e;--i2:#e0445f;--i3:#b8203a;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-sparkles{--i1:#ce82ff;--i2:#a85ce0;--i3:#7b3fb0;--i4:#f0d8ff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-heart{--i1:#ff5a7e;--i2:#e0445f;--i3:#b8203a;--i4:#ffd1dc;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-bulb{--i1:#ffd23f;--i2:#ffb800;--i3:#ff9600;--i4:#fff6cf;--iln:#2b2117;}
/* batch 3 —— 物件类（续） */
html[data-theme="cartoon"] .ic-c-globe{--i1:#1cb0f6;--i2:#3fb55a;--i3:#0e8fce;--i4:#dff2ff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-calendar{--i1:#1cb0f6;--i2:#0e8fce;--i3:#0a6fa0;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-clock{--i1:#ff9f43;--i2:#ffce6b;--i3:#e0451f;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-brain{--i1:#ff8fb0;--i2:#ff7aa0;--i3:#d9577f;--i4:#ffd1dc;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-leaf{--i1:#58cc02;--i2:#3fb55a;--i3:#2c8a42;--i4:#eafce8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-sprout{--i1:#58cc02;--i2:#7dd957;--i3:#2c8a42;--i4:#eafce8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-package{--i1:#e0945a;--i2:#f0b888;--i3:#b87038;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-coffee{--i1:#a96b3f;--i2:#e8d4b8;--i3:#7a4a28;--i4:#9b8c7a;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-camera{--i1:#4aa3b8;--i2:#3a8090;--i3:#2b3340;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-plane{--i1:#1cb0f6;--i2:#0e8fce;--i3:#0a6fa0;--i4:#dff2ff;--iln:#2b2117;}
/* batch 4 —— 物件类（收尾） */
html[data-theme="cartoon"] .ic-c-briefcase{--i1:#4648d4;--i2:#3537a8;--i3:#26277a;--i4:#ffce6b;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-chart{--i1:#1cb0f6;--i2:#ff9600;--i3:#58cc02;--i4:#ffffff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-cpu{--i1:#7c6df0;--i2:#5a4ad0;--i3:#ff9600;--i4:#e8e4ff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-utensils{--i1:#ff9600;--i2:#c0c6d0;--i3:#e0612e;--i4:#fff3d8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-mail{--i1:#1cb0f6;--i2:#0e8fce;--i3:#0a6fa0;--i4:#dff2ff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-bookOpen{--i1:#1cb0f6;--i2:#58cc02;--i3:#2c8a42;--i4:#eafce8;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-users{--i1:#ff7aa0;--i2:#1cb0f6;--i3:#e0577f;--i4:#ffffff;--iln:#2b2117;}
html[data-theme="cartoon"] .ic-c-userPlus{--i1:#ff7aa0;--i2:#58cc02;--i3:#e0577f;--i4:#ffffff;--iln:#2b2117;}