/* ========================================================================
   cv-anim.css · 批1 手感层 + 全局基建
   仅在沙盒 camvocab-动效实验-v5.2.0。消费 app 令牌(--accent/--surface/--ink…)，
   浅/深两套底色自动适配；增强现有全局类，命名前缀 cv-anim-；不改业务逻辑。
   尊重 app 的 html.cv-reduce-motion 与系统 prefers-reduced-motion。
   点位：A1 按钮 · A2 开关 · A3 输入 · A7 分段 · A6 Toast · A5 骨架(工具)
   ======================================================================== */

/* ── 基座：奖励点睛(双主题, 仅奖励处用) + 缓动 ── */
:root{
  --cv-reward:#f59e6b;
  --cv-reward-strong:#e5824a;
  --cv-spring:cubic-bezier(.34,1.4,.5,1);   /* 回弹 */
  --cv-ease:cubic-bezier(.3,.7,.4,1);
}
html.cv-dark{
  --cv-reward:#ffb27a;
  --cv-reward-strong:#ff9d5c;
}

/* ═══════════ A1 · 按钮 ═══════════ */
/* 主 CTA：靛蓝渐变 + 按压下沉回弹(手感之王) */
.primary-action{
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 92%) !important;
  transition:transform .18s var(--cv-spring), box-shadow .22s var(--cv-ease),
             background .2s ease, filter .2s ease !important;
}
.primary-action:hover{ transform:translateY(-2px) !important; filter:brightness(1.03); }
.primary-action:active{
  transform:translateY(1px) scale(.985) !important;
  box-shadow:0 3px 10px -2px var(--accent-glow) !important;
  transition-duration:.06s !important;
}
/* 次按钮 / 药丸按钮 / 图标按钮：轻按压 */
.secondary-action, .pill-button, .icon-button{
  transition:transform .18s var(--cv-spring), box-shadow .2s var(--cv-ease),
             background .18s ease, border-color .18s ease !important;
}
.secondary-action:active, .pill-button:active{ transform:translateY(1px) scale(.985) !important; transition-duration:.06s !important; }
.icon-button:active{ transform:scale(.9) !important; transition-duration:.06s !important; }

/* ═══════════ A3 · 输入框聚焦柔光 ═══════════ */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus,
select:focus{
  box-shadow:0 0 0 3px var(--accent-glow) !important;
  border-color:var(--accent) !important;
  transition:box-shadow .18s var(--cv-ease), border-color .18s ease !important;
}
.search-box{ transition:box-shadow .2s var(--cv-ease), border-color .2s ease; }
.search-box:focus-within{
  box-shadow:0 0 0 3px var(--accent-glow) !important;
  border-color:var(--accent) !important;
}

/* ═══════════ A7 · 分段切换：平滑 + 按压反馈 ═══════════ */
.segmented-control span, .segmented-control button, .segmented-control label,
.settings-seg button, .swipe-seg button, .words-mode-toggle .wm-btn{
  transition:background .24s var(--cv-ease), color .2s ease,
             box-shadow .24s var(--cv-ease), transform .12s var(--cv-spring) !important;
}
.settings-seg button:active, .swipe-seg button:active, .words-mode-toggle .wm-btn:active,
.segmented-control span:active, .segmented-control button:active, .segmented-control label:active{
  transform:scale(.955) !important;
}

/* ═══════════ A2 · 开关：果冻拨杆(设置抽屉 + 登录记住我) ═══════════ */
.setting-check input[type=checkbox],
.auth-row-options input[type=checkbox]{
  -webkit-appearance:none !important; appearance:none !important;
  position:relative !important; box-sizing:border-box !important;
  width:42px !important; height:24px !important; min-width:42px !important;
  flex:0 0 auto !important; vertical-align:middle !important;
  margin:0 9px 0 0 !important; padding:0 !important;
  border-radius:999px !important; background:var(--surface-3) !important;
  border:1px solid var(--hairline) !important; box-shadow:none !important;
  cursor:pointer !important;
  transition:background .3s var(--cv-spring), border-color .2s ease !important;
}
.setting-check input[type=checkbox]::before,
.auth-row-options input[type=checkbox]::before{
  content:""; position:absolute; top:1px; left:1px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.32);
  transition:transform .34s var(--cv-spring), width .18s var(--cv-spring) !important;
}
.setting-check input[type=checkbox]:checked,
.auth-row-options input[type=checkbox]:checked{
  background:var(--accent) !important; border-color:var(--accent) !important;
}
.setting-check input[type=checkbox]:checked::before,
.auth-row-options input[type=checkbox]:checked::before{ transform:translateX(18px); }
/* 拨动时滑块短暂拉伸=果冻感 */
.setting-check input[type=checkbox]:active::before,
.auth-row-options input[type=checkbox]:active::before{ width:24px; }
.setting-check input[type=checkbox]:checked:active::before,
.auth-row-options input[type=checkbox]:checked:active::before{ transform:translateX(14px); width:24px; }
.setting-check input[type=checkbox]:focus-visible,
.auth-row-options input[type=checkbox]:focus-visible{ box-shadow:0 0 0 3px var(--accent-glow) !important; }

/* ═══════════ A6 · Toast 统一四态 ═══════════ */
.cv-anim-toast{
  position:fixed; left:50%; top:22px; transform:translate(-50%,-150%);
  z-index:99999; display:flex; align-items:center; gap:10px;
  max-width:min(90vw,420px); padding:12px 15px;
  border-radius:14px; background:var(--surface); color:var(--ink);
  border:1px solid var(--hairline); box-shadow:var(--shadow-lg);
  font-size:14px; font-weight:600; line-height:1.4;
  opacity:0; pointer-events:auto; cursor:pointer;
  transition:transform .42s var(--cv-spring), opacity .3s ease;
}
.cv-anim-toast.cv-anim-in{ transform:translate(-50%,0); opacity:1; }
.cv-anim-toast-ic{
  width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; color:#fff; font-size:12px; font-weight:800;
}
.cv-anim-toast-ic .ic{ width:12px; height:12px; stroke-width:2.1; }
.cv-anim-toast--success{ border-left:3px solid var(--green); }
.cv-anim-toast--success .cv-anim-toast-ic{ background:var(--green); }
.cv-anim-toast--info{ border-left:3px solid var(--accent); }
.cv-anim-toast--info .cv-anim-toast-ic{ background:var(--accent); }
.cv-anim-toast--warn{ border-left:3px solid #e0a53a; }
.cv-anim-toast--warn .cv-anim-toast-ic{ background:#e0a53a; }
.cv-anim-toast--error{ border-left:3px solid var(--red); }
.cv-anim-toast--error .cv-anim-toast-ic{ background:var(--red); }
/* 顺带升级已有 swipeToast 观感(不改其调用) */
.swipe-toast{
  border-radius:14px !important;
  box-shadow:var(--shadow-lg) !important;
  border:1px solid var(--hairline) !important;
}

/* ═══════════ A5 · 列表骨架工具(基于现有 cv-shimmer 关键帧) ═══════════ */
.cv-anim-skel{ display:flex; flex-direction:column; gap:12px; }
.cv-anim-skel-row{
  display:flex; align-items:center; gap:12px; padding:14px;
  border-radius:14px; background:var(--surface); border:1px solid var(--hairline);
}
.cv-anim-skel-lines{ flex:1; display:flex; flex-direction:column; gap:8px; }
.cv-anim-skel-av{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; }
.cv-anim-skel-bar{ height:12px; border-radius:6px; }
.cv-anim-skel-bar.sm{ width:45%; }
.cv-anim-skel-bar.md{ width:70%; }
.cv-anim-skel-av, .cv-anim-skel-bar{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:280% 100%;
  animation:cv-shimmer 1.25s linear infinite;
}

/* ═══════════ 减弱动效：app 设置 + 系统偏好下停掉本层动画 ═══════════ */
html.cv-reduce-motion .primary-action, html.cv-reduce-motion .secondary-action,
html.cv-reduce-motion .pill-button, html.cv-reduce-motion .icon-button,
html.cv-reduce-motion input, html.cv-reduce-motion textarea, html.cv-reduce-motion select,
html.cv-reduce-motion .search-box, html.cv-reduce-motion .segmented-control *,
html.cv-reduce-motion .settings-seg button, html.cv-reduce-motion .swipe-seg button,
html.cv-reduce-motion .words-mode-toggle .wm-btn,
html.cv-reduce-motion .setting-check input[type=checkbox],
html.cv-reduce-motion .setting-check input[type=checkbox]::before,
html.cv-reduce-motion .auth-row-options input[type=checkbox],
html.cv-reduce-motion .auth-row-options input[type=checkbox]::before,
html.cv-reduce-motion .cv-anim-toast,
html.cv-reduce-motion .cv-anim-skel-av, html.cv-reduce-motion .cv-anim-skel-bar,
html.cv-reduce-motion .swipe-review[data-mode="word"] .swp2-flipcard .swp2-inner{
  transition-duration:.01ms !important; animation-duration:.01ms !important;
}
@media (prefers-reduced-motion:reduce){
  .primary-action, .secondary-action, .pill-button, .icon-button,
  input, textarea, select, .search-box, .segmented-control *,
  .settings-seg button, .swipe-seg button, .words-mode-toggle .wm-btn,
  .setting-check input[type=checkbox], .setting-check input[type=checkbox]::before,
  .auth-row-options input[type=checkbox], .auth-row-options input[type=checkbox]::before,
  .cv-anim-toast, .cv-anim-skel-av, .cv-anim-skel-bar,
  .swipe-review[data-mode="word"] .swp2-flipcard .swp2-inner{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   批2 · 奖励层 (由 cv-reward.js 解耦挂接;不改 app.js 业务逻辑)
   B2 答题反馈 · B3 结果卡 · B5 难词毕业 · B6 录音 · B4 打卡
   暖橙 --cv-reward 只在奖励/庆祝点睛;答对绿用 app 的 --green。
   ═══════════════════════════════════════════════════════════════════════ */

/* —— B2 答题反馈 —— */
@keyframes cv-b2-pop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes cv-b2-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.cv-b2-correct-anim{animation:cv-b2-pop .42s var(--cv-spring)}
.cv-b2-wrong-anim{animation:cv-b2-shake .5s ease}
.cv-b2-check{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;width:20px;height:20px;
  border-radius:50%;background:var(--green,#3fa87a);color:#fff;font-size:12px;font-weight:800;line-height:1;
  vertical-align:middle;animation:cv-b2-pop .44s var(--cv-spring) .06s both}
.cv-b2-check .ic{ width:12px; height:12px; stroke-width:2.2; }

/* —— B3 结果卡:分数环 + 分维度卡 stagger —— */
@property --cv-b3-deg{syntax:'<angle>';inherits:false;initial-value:0deg}
.cv-b3-ring{--cv-b3-deg:0deg;position:relative;width:128px;height:128px;border-radius:50%;margin:2px auto 16px;
  display:grid;place-items:center;
  background:conic-gradient(var(--cv-reward) var(--cv-b3-deg), color-mix(in srgb,var(--ink,#2c2a35) 12%,transparent) 0deg);
  transition:--cv-b3-deg 1.1s cubic-bezier(.3,.7,.4,1)}
.cv-b3-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--surface,#fff)}
.cv-b3-ring-in{position:relative;text-align:center;line-height:1.1}
.cv-b3-ring-num{font-size:30px;font-weight:800;color:var(--ink,#2c2a35);font-variant-numeric:tabular-nums}
.cv-b3-ring-sub{font-size:11.5px;color:var(--muted,#8888a0);margin-top:3px}
.cv-b3-stagger{animation:cv-b2-pop .5s var(--cv-ease) both}

/* —— B5 难词毕业:椭圆描边 + 勾(覆盖层,独立于卡片) —— */
.cv-b5-ov{position:fixed;z-index:99997;pointer-events:none}
.cv-b5-ov svg{overflow:visible;display:block}
.cv-b5-ell{fill:none;stroke:var(--accent,#544bc4);stroke-width:3.6;stroke-linecap:round;
  stroke-dasharray:560;stroke-dashoffset:560;animation:cv-b5-draw 1s cubic-bezier(.4,.9,.5,1) forwards}
@keyframes cv-b5-draw{to{stroke-dashoffset:0}}
.cv-b5-tick{transform:scale(0);transform-origin:center;opacity:0;animation:cv-b2-pop .42s var(--cv-spring) .68s forwards}

/* —— B6 录音:红胶囊闪烁 + 外圈波纹 + 计时 —— */
@keyframes cv-b6-blink{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes cv-b6-ripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.3);opacity:0}}
.cv-b6-recording{position:relative;background:var(--red,#e0664e) !important;border-color:var(--red,#e0664e) !important;
  color:#fff !important;animation:cv-b6-blink 1s ease-in-out infinite}
.cv-b6-recording::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--red,#e0664e);
  animation:cv-b6-ripple 1.4s ease-out infinite;pointer-events:none}
.cv-b6-timer{display:inline-block;margin-left:8px;font-variant-numeric:tabular-nums;font-weight:700}

/* —— B4 打卡:弹卡 + 连续天数气泡 —— */
@keyframes cv-b4-pop{0%{transform:scale(.66);opacity:0}55%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.cv-b4-pop{animation:cv-b4-pop .6s var(--cv-spring)}
/* 打卡完成时弹出的「🔥 连续N」气泡。原来 top:-9px 顶出卡片上沿、又压在右侧按钮上方 → 悬空错位。
   改成卡内右上角一枚干净的小药丸(不顶出、加底衬更像徽章),2.6s 后自动消失。 */
.cv-b4-streak{position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px;font-weight:800;color:var(--cv-reward);
  background:var(--surface);border:1px solid var(--hairline-soft);border-radius:999px;padding:2px 8px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  animation:cv-b4-pop .6s var(--cv-spring) both;z-index:20;pointer-events:none}
.cv-b4-streak .ic{width:14px;height:14px;flex:none}
.cv-b4-streak span{line-height:1}
.swipe-toast .ic{width:16px;height:16px;margin-left:3px;vertical-align:-3px}

/* —— 批2 reduced-motion 降级 —— */
html.cv-reduce-motion .cv-b2-correct-anim, html.cv-reduce-motion .cv-b2-wrong-anim,
html.cv-reduce-motion .cv-b2-check, html.cv-reduce-motion .cv-b3-ring,
html.cv-reduce-motion .cv-b3-stagger, html.cv-reduce-motion .cv-b5-ell,
html.cv-reduce-motion .cv-b5-tick, html.cv-reduce-motion .cv-b6-recording,
html.cv-reduce-motion .cv-b6-recording::after, html.cv-reduce-motion .cv-b4-pop,
html.cv-reduce-motion .cv-b4-streak{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
@media (prefers-reduced-motion:reduce){
  .cv-b2-correct-anim,.cv-b2-wrong-anim,.cv-b2-check,.cv-b3-ring,.cv-b3-stagger,
  .cv-b5-ell,.cv-b5-tick,.cv-b6-recording,.cv-b6-recording::after,.cv-b4-pop,.cv-b4-streak{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   难词库手机端重排 (方案A · 行动优先) — 只调布局,不改数据逻辑
   ═══════════════════════════════════════════════════════════════════════ */
#view-wrong .cvw-head{display:flex;flex-direction:column;gap:10px}
#view-wrong .cvw-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view-wrong .cvw-top h2{font-size:19px;font-weight:800;margin:0;letter-spacing:-.01em;flex:0 0 auto;white-space:nowrap}
#view-wrong .cvw-top .cvw-due{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
#view-wrong .cvw-due{font-size:12px;font-weight:700;white-space:nowrap;border-radius:999px;padding:5px 11px;
  color:var(--cv-reward-strong,#e5824a);background:var(--cv-reward-100,#fdeadd);
  font-variant-numeric:tabular-nums}
#view-wrong .cvw-due-empty{color:var(--muted);background:var(--surface-2)}
#view-wrong .cvw-info{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--hairline);background:var(--surface);color:var(--muted);
  font-style:italic;font-weight:700;font-size:13px;cursor:pointer;line-height:1}
#view-wrong .cvw-info:hover{border-color:var(--accent);color:var(--accent)}
#view-wrong .cvw-intro{font-size:12.5px;color:var(--muted);line-height:1.55;
  background:var(--surface-2);border-radius:10px;padding:10px 12px}
#view-wrong .cvw-intro[hidden]{display:none}
#view-wrong .cvw-intro-x{margin-left:6px;color:var(--accent);font-weight:700;
  background:none;border:none;cursor:pointer;font:inherit;font-size:12.5px;white-space:nowrap}
#view-wrong .cvw-actions{display:flex;flex-direction:column;gap:8px}
#view-wrong .cvw-cta{font-size:15px;padding:14px}
#view-wrong .cvw-row{display:flex;gap:8px;align-items:stretch}
/* 覆盖 styles.css 给 .secondary-action 的 width:100%(否则挤爆一行);难词测验取内容宽,开关占余下 */
#view-wrong .cvw-quiz{flex:0 1 auto !important;width:auto !important;white-space:nowrap;padding-left:20px;padding-right:20px}
#view-wrong .cvw-switch{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--hairline);border-radius:11px;background:var(--surface);
  padding:9px 12px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink)}
#view-wrong .cvw-switch-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-wrong .cvw-switch-track{width:34px;height:19px;border-radius:999px;background:var(--surface-3);
  position:relative;flex:0 0 auto;transition:background .2s ease}
#view-wrong .cvw-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s var(--cv-spring,ease)}
#view-wrong .cvw-switch.is-on{border-color:color-mix(in srgb,var(--green,#3fa87a) 40%,transparent)}
#view-wrong .cvw-switch.is-on .cvw-switch-track{background:var(--green,#3fa87a)}
#view-wrong .cvw-switch.is-on .cvw-switch-track::after{transform:translateX(15px)}
html.cv-reduce-motion #view-wrong .cvw-switch-track,
html.cv-reduce-motion #view-wrong .cvw-switch-track::after{transition-duration:.01ms !important}
/* 关键:覆盖全局"内容优先"(ultimate .view-grid>aside{order:2})——难词库让控制头置顶,词表在下 */
#view-wrong .view-grid > aside.cvw-head{ order:1 !important; }
#view-wrong .view-grid > section{ order:2 !important; }

/* ═══ 禁止双指/双击缩放(保留滚动)——顶/底栏不再因缩放跳动 ═══ */
html{ touch-action:pan-x pan-y; }

/* ═══ 首页加载态卡片宽度对齐(修复"老鼠跑轮框比加载后窄") ═══
   .today-focus-layout 是 grid-template-columns:minmax(0,1fr),但 1fr 只有在容器"确定宽度"时才铺满;
   手机端它没有确定宽度(refine.css 的 width:100% 只在 @min-width:1181px 桌面生效),于是 1fr 退化成
   按"内容"定宽 → 加载态内容短("正在同步老师作业…"/老鼠) → 整框被 shrink-wrap 成很窄;加载后内容多才变宽。
   这里给首页容器链补上"全宽",让加载态和加载后一样宽。 */
body[data-view="today"] #view-today,
body[data-view="today"] .today-focus-layout,
body[data-view="today"] .today-plan-card{ width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

/* ═══ B1 词卡翻面(批3):刷卡"只显单词"模式点卡翻面——正面=单词,背面=单词+释义+例句。
   关键架构:外层 .swp2-card 保持平面(参与上下滑动、可命中点击),只翻内层 .swp2-inner;
   操作栏(.swp2-actions)在 inner 外的平面上——始终可点(翻不回来/例句点不到 的根因就是旧版把整卡旋转,
   旋转层让点击落到轨道上)。严格限定 data-mode=word 才翻;"单词+释义"(both)模式两面平铺、不翻。 ═══ */
.swp2-flipcard .swp2-inner{ position:relative; width:100%; flex:1 1 auto; }
.swp2-flipcard .swp2-face{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.swp2-rev-word{ display:none; }
.swp2-play-ex{
  margin-top:2px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--hairline-soft, rgba(0,0,0,.16)); background:var(--surface); color:var(--accent);
  padding:7px 15px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer;
}
.swp2-play-ex .ic{ width:15px; height:15px; }
/* 导航提示改为文档流(原 absolute 会压在操作按钮上);只首卡有,自然落在操作栏下方,不再重叠 */
.swipe-review .swp2-flipcard .swp2-nav{ position:static; margin-top:6px; }

/* —— WORD 模式:只给"当前这张"卡片(.swp2-at,由 swipePosition 标记)启用 3D 翻面上下文;
   其余卡片保持平面 → 上下滑动的合成负担与 both 模式一致,一样顺滑。 —— */
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at{ perspective:1400px; }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-inner{
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.72,.3,1);
}
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at.on .swp2-inner{ transform:rotateY(180deg); }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-face{
  position:absolute; inset:0; padding:8px 26px; box-sizing:border-box;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-back{ transform:rotateY(180deg); }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-rev{ opacity:1 !important; visibility:visible !important; margin:0; }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-rev-word{ display:block; font-size:24px; font-weight:700; color:var(--ink); letter-spacing:.3px; margin-bottom:8px; }
/* 非当前卡:平面,只显正面(背面藏起),零 3D 开销 */
.swipe-review[data-mode="word"] .swp2-flipcard:not(.swp2-at) .swp2-back{ display:none; }
/* 例句朗读只在"当前卡翻到背面"时出现;操作栏在平面上,按钮始终可命中 */
.swipe-review[data-mode="word"] .swp2-play-ex{ display:none; }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at.on .swp2-play-ex{ display:inline-flex; }
/* 翻到背面(操作栏多一个"朗读例句")时,隐藏首卡的"滑一次走一个"提示,避免叠字 */
.swipe-review[data-mode="word"] .swp2-flipcard.on .swp2-nav{ display:none; }

/* —— BOTH 模式:两面平铺、不翻;隐藏背面重复的小号单词与"点一下看释义"提示 —— */
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-face{ position:static; }
.swipe-review[data-mode="both"] .swp2-rev-word{ display:none; }
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-flip{ display:none; }
/* 徽章默认 absolute(top:26px),平铺后前面板不再撑满整卡→徽章会压到单词上。both 模式下让徽章回到文档流,叠在单词上方。 */
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-badges{ position:static; margin:0 0 12px; }
/* both 模式底部有"朗读例句"按钮,首卡的"滑一次走一个"提示会被压叠,隐掉(提示在 word 模式正面仍在) */
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-nav{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   C 登录页(批3 · 场景层)
   C1 输入=手账缝线虚线描边 + focus 高亮 + 错误 shake + 校验提示(shake/提示由 cv-anim.js 派发)
   C3 整页背景=象牙+淡靛 缓慢流动氛围
   C4 登录|注册 tab=白胶囊滑动(与 A7 分段统一)
   仅作用于 .auth-screen;登录后 #authScreen display:none 自动消失。
   ═══════════════════════════════════════════════════════════════════════ */

/* —— C3 整页背景缓慢流动(fixed 铺满视口,不撑滚动区、不裁剪长表单) —— */
.auth-screen{ position:relative; }
.auth-screen::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 24%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    radial-gradient(34% 40% at 84% 78%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 64%),
    radial-gradient(30% 34% at 74% 16%, color-mix(in srgb, var(--surface-3) 65%, transparent), transparent 60%);
  animation:cv-auth-flow 34s ease-in-out infinite alternate;
  will-change:transform;
}
.auth-screen > *{ position:relative; z-index:1; }
@keyframes cv-auth-flow{
  0%  { transform:translate3d(-3%,-2%,0) rotate(0deg)  scale(1.06); }
  50% { transform:translate3d(2%,3%,0)   rotate(6deg)  scale(1.13); }
  100%{ transform:translate3d(4%,-1%,0)  rotate(-4deg) scale(1.07); }
}

/* —— C4 登录|注册 tab 白胶囊滑动 —— */
.auth-tabs{ position:relative; }
.auth-tabs::before{
  content:''; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px); border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow-sm);
  transition:transform .34s cubic-bezier(.34,1.28,.42,1);
  z-index:0;
}
.auth-tabs:has(#showRegisterBtn.active)::before{ transform:translateX(100%); }
.auth-tabs button{ position:relative; z-index:1; }
/* 让滑动胶囊成为唯一指示物:去掉 active 按钮自带的底色/阴影(保留字色变化) */
.auth-tabs button.active{ background:transparent !important; box-shadow:none !important; }

/* —— C1 输入 手账缝线虚线描边 —— */
.auth-form input, .auth-form select,
.wechat-bind-panel input{
  border-style:dashed !important;
  border-width:1.5px !important;
  border-color:color-mix(in srgb, var(--accent) 24%, var(--hairline)) !important;
}
.auth-form input:focus, .auth-form select:focus,
.wechat-bind-panel input:focus{
  border-style:solid !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px var(--accent-soft) !important;
}
/* —— C1 校验错误:shake + 玫红虚线(玫红=[[cv-rose]] 点睛,仅提示,不与奖励暖橙冲突) —— */
.auth-form input.cv-auth-bad, .auth-form select.cv-auth-bad{
  border-style:dashed !important;
  border-color:var(--cv-rose, #c2385a) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cv-rose, #c2385a) 16%, transparent) !important;
  animation:cv-auth-shake .46s cubic-bezier(.36,.07,.19,.97);
}
@keyframes cv-auth-shake{
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}
.cv-auth-hint{
  display:block; margin-top:6px; font-size:12px; font-weight:600;
  color:var(--cv-rose, #c2385a); letter-spacing:.2px;
}

/* —— C 减弱动效降级 —— */
html.cv-reduce-motion .auth-screen::before,
html.cv-reduce-motion .auth-tabs::before,
html.cv-reduce-motion .auth-form input.cv-auth-bad,
html.cv-reduce-motion .auth-form select.cv-auth-bad{
  animation-duration:.01ms !important; transition-duration:.01ms !important;
}
@media (prefers-reduced-motion:reduce){
  .auth-screen::before, .auth-tabs::before,
  .auth-form input.cv-auth-bad, .auth-form select.cv-auth-bad{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   B7 写作框(批3 · 场景层)
   写作 textarea focus=边框呼吸微光;标题行右侧=靛蓝铅笔 EDIT 按钮(点击聚焦并滚入视野)
   仅 compose 那个 textarea(#writingOcrText)加 EDIT;只读回看 textarea 不呼吸(:not([readonly]))
   ═══════════════════════════════════════════════════════════════════════ */
.writing-textarea-label textarea:focus:not([readonly]){
  border-color:var(--accent) !important;
  outline:none !important;
  animation:cv-b7-breathe 2.4s ease-in-out infinite;
}
@keyframes cv-b7-breathe{
  0%,100%{ box-shadow:0 0 0 2px var(--accent-soft), 0 0 8px 0 rgba(84,75,196,.12); }
  50%    { box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 16px 2px rgba(84,75,196,.22); }
}

/* 标题行:标题 + 右侧 EDIT */
.cv-b7-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* 靛蓝铅笔 EDIT 按钮 */
.cv-b7-edit{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:0 14px; min-height:34px;
  font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:#fff; border:none; border-radius:999px; cursor:pointer;
  background-image:linear-gradient(to top, var(--accent) 0%, var(--accent-2) 150%);
  box-shadow:0 2px 8px rgba(84,75,196,.28), 0 0 0 0 var(--accent-soft);
  transition:box-shadow .35s var(--ease,ease), transform .12s var(--ease,ease);
}
.cv-b7-edit:hover{ box-shadow:0 2px 10px rgba(84,75,196,.30), 0 0 0 3px var(--accent-soft); }
.cv-b7-edit:active{ transform:scale(.93); transition:transform .1s ease; }
.cv-b7-edit:focus-visible{ outline:none; box-shadow:0 2px 10px rgba(84,75,196,.30), 0 0 0 4px var(--accent-soft); }
.cv-b7-pencil{ width:15px; height:15px; display:block; overflow:visible; transform-origin:50% 50%; }
.cv-b7-edit:hover .cv-b7-pencil{ animation:cv-b7-write .6s ease-in-out infinite; }
@keyframes cv-b7-write{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(1px,-1px) rotate(-6deg); }
  50%{ transform:translate(1.6px,0) rotate(0deg); }
  75%{ transform:translate(1px,1px) rotate(6deg); }
}
@keyframes cv-b7-stroke{
  0%{ stroke-dashoffset:10; opacity:.55; } 55%{ stroke-dashoffset:0; opacity:.9; } 100%{ stroke-dashoffset:0; opacity:0; }
}

/* —— B7 减弱动效降级 —— */
html.cv-reduce-motion .writing-textarea-label textarea:focus:not([readonly]),
html.cv-reduce-motion .cv-b7-edit .cv-b7-pencil{ animation-duration:.01ms !important; }
@media (prefers-reduced-motion:reduce){
  .writing-textarea-label textarea:focus:not([readonly]),
  .cv-b7-edit .cv-b7-pencil{ animation-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A4 学习背景库(批3 · 场景层)
   html[data-bg] body::after 铺一层淡纸纹(z-index:-1,压在氛围洗色 body::before[-2] 之上、
   内容之下)。全部象牙底 + 淡靛低对比;深色下换稍亮靛蓝。设置里卡片单选,default=纯净(无 data-bg)。
   纯静态,无动画。
   ═══════════════════════════════════════════════════════════════════════ */
html[data-bg]{ --cv-bg-ink:rgba(84,75,196,.12); --cv-bg-ink-2:rgba(84,75,196,.07); }
html.cv-dark[data-bg]{ --cv-bg-ink:rgba(160,152,244,.11); --cv-bg-ink-2:rgba(160,152,244,.06); }
html[data-bg] body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-repeat:repeat;
}
/* 点阵纸:细密圆点 */
html[data-bg="dots"] body::after{
  background-image:radial-gradient(var(--cv-bg-ink) 1.4px, transparent 1.6px);
  background-size:22px 22px;
}
/* 作业本:方格线 */
html[data-bg="grid"] body::after{
  background-image:
    linear-gradient(var(--cv-bg-ink-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--cv-bg-ink-2) 1px, transparent 1px);
  background-size:26px 26px;
}
/* 象牙波点:大号交错圆点 */
html[data-bg="polka"] body::after{
  background-image:
    radial-gradient(var(--cv-bg-ink) 5px, transparent 6px),
    radial-gradient(var(--cv-bg-ink) 5px, transparent 6px);
  background-size:48px 48px; background-position:0 0, 24px 24px;
}
/* 米色折纸:交错斜向折痕 */
html[data-bg="origami"] body::after{
  background-image:
    repeating-linear-gradient(45deg, var(--cv-bg-ink-2) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, var(--cv-bg-ink-2) 0 1px, transparent 1px 44px);
}

/* —— A4 设置里的背景单选卡 —— */
.bg-picker{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; margin-top:8px;
  --cv-bg-ink:rgba(84,75,196,.18); --cv-bg-ink-2:rgba(84,75,196,.11);
}
html.cv-dark .bg-picker{ --cv-bg-ink:rgba(160,152,244,.20); --cv-bg-ink-2:rgba(160,152,244,.12); }
.bg-swatch{
  display:flex; flex-direction:column; gap:6px; padding:6px; cursor:pointer;
  border-radius:14px; border:1.5px solid var(--hairline); background:var(--surface);
  transition:border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .1s var(--ease,ease);
}
.bg-swatch:active{ transform:scale(.97); }
.bg-swatch.active{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.bg-swatch-prev{
  display:block; height:44px; border-radius:9px;
  background-color:var(--surface-2,var(--bg)); background-repeat:repeat;
  border:1px solid var(--hairline-soft,rgba(0,0,0,.05));
}
.bg-swatch-name{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  font-size:12px; font-weight:700; color:var(--ink);
}
.bg-swatch .swatch-check{ opacity:0; color:var(--accent); font-weight:900; }
.bg-swatch.active .swatch-check{ opacity:1; }
.cv-bgsw-none{ background-image:none; }
.cv-bgsw-dots{ background-image:radial-gradient(var(--cv-bg-ink) 1.4px, transparent 1.6px); background-size:11px 11px; }
.cv-bgsw-grid{
  background-image:linear-gradient(var(--cv-bg-ink-2) 1px,transparent 1px),linear-gradient(90deg,var(--cv-bg-ink-2) 1px,transparent 1px);
  background-size:12px 12px;
}
.cv-bgsw-polka{
  background-image:radial-gradient(var(--cv-bg-ink) 3px,transparent 4px),radial-gradient(var(--cv-bg-ink) 3px,transparent 4px);
  background-size:20px 20px; background-position:0 0,10px 10px;
}
.cv-bgsw-origami{
  background-image:repeating-linear-gradient(45deg,var(--cv-bg-ink-2) 0 1px,transparent 1px 12px),repeating-linear-gradient(-45deg,var(--cv-bg-ink-2) 0 1px,transparent 1px 12px);
}

/* ═══════════════════════════════════════════════════════════════════════
   成长档案 · 涂鸦手账皮肤(2026-07,仅 #view-growth) —— 沿用 B9 手绘语言,
   吸引小孩子:手绘歪边框(马克笔轮廓+蜡笔偏移投影)+ 波浪下划线 + 暖色涂鸦点缀。
   克制不杂乱:图表/列表内部保持干净,只在卡框/标题/角落做手账感。
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --cv-icon-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}
#view-growth{
  --cv-icon-pencil:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M13%2021h8M15%205l4%204m2.174-2.188a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22%2F%3E%3C%2Fsvg%3E");
  --cv-icon-sparkles:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594zM20%202v4m2-2h-4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cv-icon-flower:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%205a3%203%200%201%201%203%203m-3-3a3%203%200%201%200-3%203m3-3v1M9%208a3%203%200%201%200%203%203M9%208h1m5%200a3%203%200%201%201-3%203m3-3h-1m-2%203v-1%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2010v12m0%200c4.2%200%207-1.667%207-5c-4.2%200-7%201.667-7%205m0%200c-4.2%200-7-1.667-7-5c4.2%200%207%201.667%207%205%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cv-icon-star:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M11.525%202.295a.53.53%200%200%201%20.95%200l2.31%204.679a2.12%202.12%200%200%200%201.595%201.16l5.166.756a.53.53%200%200%201%20.294.904l-3.736%203.638a2.12%202.12%200%200%200-.611%201.878l.882%205.14a.53.53%200%200%201-.771.56l-4.618-2.428a2.12%202.12%200%200%200-1.973%200L6.396%2021.01a.53.53%200%200%201-.77-.56l.881-5.139a2.12%202.12%200%200%200-.611-1.879L2.16%209.795a.53.53%200%200%201%20.294-.906l5.165-.755a2.12%202.12%200%200%200%201.597-1.16z%22%2F%3E%3C%2Fsvg%3E");
  --cv-icon-heart:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M2%209.5a5.5%205.5%200%200%201%209.591-3.676a.56.56%200%200%200%20.818%200A5.49%205.49%200%200%201%2022%209.5c0%202.29-1.5%204-3%205.5l-5.492%205.313a2%202%200%200%201-3%20.019L5%2015c-1.5-1.5-3-3.2-3-5.5%22%2F%3E%3C%2Fsvg%3E");
  --cv-icon-sun:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2m0%2016v2M4.93%204.93l1.41%201.41m11.32%2011.32l1.41%201.41M2%2012h2m16%200h2M6.34%2017.66l-1.41%201.41M19.07%204.93l-1.41%201.41%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* 内容卡:手绘马克笔歪边框(左右两种朝向交替=手账贴纸感)+ 蜡笔偏移投影 */
#view-growth .growth-grid > .surface-card,
#view-growth > .growth-archive .growth-grid > .surface-card{
  border:2.5px solid color-mix(in srgb, var(--accent) 32%, var(--surface));
  border-radius:24px 10px 22px 12px / 12px 22px 10px 24px;
  box-shadow:5px 6px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  position:relative; overflow:visible;
}
#view-growth .growth-grid > .surface-card:nth-child(even){
  border-radius:10px 24px 12px 22px / 22px 12px 24px 10px;
}
/* 章节标题:手绘波浪下划线(更粗更明显)+ eyebrow 前铅笔涂鸦 */
#view-growth .section-head h3{
  display:inline-block;
  text-decoration:underline wavy var(--joy, #f59e6b);
  text-decoration-thickness:3px; text-underline-offset:6px; text-decoration-skip-ink:none;
}
#view-growth .section-head .eyebrow::before{
  content:""; width:16px; height:16px; margin-right:5px; color:var(--joy, #f59e6b);
  display:inline-block; vertical-align:-3px; background:currentColor; transform:rotate(-8deg);
  -webkit-mask:var(--cv-icon-pencil) center/contain no-repeat; mask:var(--cv-icon-pencil) center/contain no-repeat;
}
/* 卡片双角手绘涂鸦(右上一颗、左下一颗;不同卡换不同图案+颜色,手账贴纸密度) */
#view-growth .growth-grid > .surface-card::after{
  content:""; position:absolute; top:-11px; right:16px; width:20px; height:20px;
  color:var(--joy, #f59e6b); background:currentColor; transform:rotate(-12deg); opacity:.95; pointer-events:none;
  -webkit-mask:var(--cv-doodle-after, var(--cv-icon-sparkles)) center/contain no-repeat;
  mask:var(--cv-doodle-after, var(--cv-icon-sparkles)) center/contain no-repeat;
}
#view-growth .growth-grid > .surface-card::before{
  content:""; position:absolute; bottom:-10px; left:18px; width:17px; height:17px;
  color:#f0a6c0; background:currentColor; transform:rotate(10deg); opacity:.9; pointer-events:none; z-index:1;
  -webkit-mask:var(--cv-doodle-before, var(--cv-icon-flower)) center/contain no-repeat;
  mask:var(--cv-doodle-before, var(--cv-icon-flower)) center/contain no-repeat;
}
#view-growth .growth-grid > .surface-card:nth-child(2){ --cv-doodle-after:var(--cv-icon-star); --cv-doodle-before:var(--cv-icon-pencil); }
#view-growth .growth-grid > .surface-card:nth-child(2)::after{ color:#f5c04e; }
#view-growth .growth-grid > .surface-card:nth-child(2)::before{ color:var(--accent-2, #9a7df0); }
#view-growth .growth-grid > .surface-card:nth-child(3){ --cv-doodle-after:var(--cv-icon-heart); --cv-doodle-before:var(--cv-icon-sparkles); }
#view-growth .growth-grid > .surface-card:nth-child(3)::after{ color:#f0889b; width:17px; height:17px; }
#view-growth .growth-grid > .surface-card:nth-child(3)::before{ color:var(--joy, #f59e6b); }
/* hero:歪边框 + 标题波浪下划线(浅暖,压在深底上) */
#view-growth .growth-hero{
  border-radius:26px 12px 24px 14px / 14px 24px 12px 26px;
  box-shadow:6px 8px 0 rgba(84,75,196,.24);
}
#view-growth .growth-hero .growth-hero-head h2{
  text-decoration:underline wavy rgba(255,214,150,.72); text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-skip-ink:none;
}
/* hero:右上手绘太阳光芒涂鸦 + 左上星簇(米黄暖色,点缀不抢) */
#view-growth .growth-hero{ position:relative; overflow:visible; }
#view-growth .growth-hero::after{
  content:""; position:absolute; top:-12px; left:22px; width:28px; height:28px;
  color:rgba(255,222,160,.92); background:currentColor; transform:rotate(-6deg); pointer-events:none;
  -webkit-mask:var(--cv-icon-sparkles) center/contain no-repeat; mask:var(--cv-icon-sparkles) center/contain no-repeat;
}
#view-growth .growth-hero::before{
  content:""; position:absolute; top:-14px; right:20px; width:24px; height:24px;
  color:rgba(255,214,120,.95); background:currentColor; transform:rotate(8deg); pointer-events:none; z-index:2;
  -webkit-mask:var(--cv-icon-sun) center/contain no-repeat; mask:var(--cv-icon-sun) center/contain no-repeat;
}
/* 4 个 stat 卡:手账贴纸歪角(交替朝向) */
#view-growth .growth-stat{ border-radius:18px 8px 16px 8px / 8px 16px 8px 18px; }
#view-growth .growth-stat:nth-child(even){ border-radius:8px 18px 8px 16px / 16px 8px 18px 8px; }
/* 数据卡极轻"手贴"旋转(交替方向,幅度很小不破网格) */
#view-growth .growth-grid > .surface-card{ transform:rotate(-0.5deg); }
#view-growth .growth-grid > .surface-card:nth-child(even){ transform:rotate(0.5deg); }
/* 减弱动效无影响(本皮肤纯静态) */

/* 老师端学生总表"掌握"头牌数:暖色点睛(成就),白底上取较深暖色保证可读 */
.cv-tea-master{ color:#bf6a2a; font-weight:850; font-size:15px; font-variant-numeric:tabular-nums; }
html.cv-dark .cv-tea-master{ color:var(--joy, #f59e6b); }

/* ═══ 首页成长入口条:学过 + 掌握 双数(让学生心里有数)。掌握=成就,用暖色点睛(方向A) ═══ */
.home-growth-stats{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; margin-top:3px; }
.hg-stat{ font-size:12px; color:var(--muted); display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
.hg-stat b{ font-size:16px; font-weight:850; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.hg-stat--master b{ color:var(--joy, #f59e6b); }
.hg-stat--dim{ color:var(--muted-2, var(--muted)); }
.hg-stat--dim, .hg-stat--dim b{ font-weight:600; }

/* ═══ 精学顶部工具条(Q3):精学|刷卡 + 词卡范围「只学新词|全部单词」两条常显选择条 ═══ */
.cv-study-topbar{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 10px; }
.cv-study-topbar .words-mode-toggle{ margin:0; }
.cv-study-topbar .cv-study-scope{ margin:0; }
@media (min-width:721px){
  .cv-study-topbar{ flex-direction:row; justify-content:center; flex-wrap:wrap; }
}