/* ==========================================================================
   粉梦皮肤 · skin-pink.css
   --------------------------------------------------------------------------
   服务范围：学生端「学习工具」三页
     · vocab.html        背单词
     · wrong-book.html   错题本
     · composition.html  作文分析

   启用条件：<html data-skin="pink">，由 js/skin.js 依据 localStorage
   键 suke-portal-theme-v1 写入（与门户首页同一个偏好，切换互相同步）。
   未启用时本文件的所有规则都不命中，页面维持现有浅色外观。

   设计原则（重要）：
     1. 只重着色「外壳」——底色、卡片、边框、文字、主色、按钮、焦点环。
     2. 语义色一律不动：绿=正确/已掌握、琥珀=待复习、红=错误/删除。
        错题本靠绿红表达对错，染成粉色等于毁掉功能。
     3. 作文分析的橙、背单词的玫红属于各自工具的身份色，
        通过映射到粉色谱系来统一，而不是简单覆盖成同一个色值。
   ========================================================================== */

/* ---------------------------------------------------------------- 令牌层
   覆盖 css/style.css 的 :root。选择器多一个属性限定，天然高于 :root，
   且只在 data-skin="pink" 时命中。色值经过 WCAG 对比度校验：
     --text   #5c2338 / #fff = 11.98:1
     --text-2 #7d4560 / #fff =  7.26:1
     --muted  #8a5570 / #fff =  5.81:1
     --primary#db2777 / #fff =  4.60:1 （门户的 #f06292 只有 3.06:1，不能用作正文链接）
   -------------------------------------------------------------------------- */
html[data-skin="pink"] {
  --bg: #fff1f7;
  --bg-soft: #ffe8f2;
  --surface: #ffffff;
  --surface-2: #fff8fb;

  --border: #f6dbe7;
  --border-2: #eec0d4;
  /* 交互态描边：深玫粉，比 --border-2 深一档，保持粉色身份不转灰 */
  --border-3: #c56d9c;

  --text: #5c2338;
  --text-2: #7d4560;
  --muted: #8a5570;

  --primary: #db2777;
  --primary-d: #a81b5c;
  --primary-l: #fde9f2;

  /* 粉色专用辅助色：浅底 / 描边 / 强调描边 */
  --pink-tint: #fdf0f7;
  --pink-tint-2: #fdeef6;
  --pink-line: #f6cfe1;

  /* 暖金保留（星级、提示），不与粉撞 */
  --accent: #d98324;
  --purple: #a855f7;

  /* 投影/圆环内部底色：跟随粉色底，避免出现白色或深色圆点 */
  --ring-core: #fff1f7;

  /* 阴影改为酒红调，避免粉色底上出现偏冷的藏青影子 */
  --shadow-sm: 0 1px 2px rgba(92, 35, 56, .06), 0 1px 3px rgba(92, 35, 56, .05);
  --shadow: 0 4px 14px rgba(92, 35, 56, .08), 0 1px 3px rgba(92, 35, 56, .05);
  --shadow-lg: 0 14px 40px rgba(92, 35, 56, .12);

  /* 弹层遮罩：酒红调，粉底上不出现冷蓝黑 */
  --overlay: rgba(92, 35, 56, .42);
}

/* ---------------------------------------------------------------- 共享外壳 */

/* 顶栏：白玻璃在粉底上会泛灰，改为粉白玻璃 */
html[data-skin="pink"] .topbar {
  background: rgba(255, 246, 251, .88);
  border-bottom-color: var(--border);
}

/* 品牌标：沿用门户粉色皮肤的渐变逻辑（粉 → 玫 → 金） */
html[data-skin="pink"] .brand-mark {
  background: linear-gradient(140deg, #f9a8c9, #db2777 55%, #e8a33c);
  box-shadow: 0 3px 10px rgba(219, 39, 119, .30);
}

/* 主按钮：原阴影写死 rgba(37,99,235)，蓝影子配粉按钮会脏 */
html[data-skin="pink"] .btn.primary {
  box-shadow: 0 2px 9px rgba(219, 39, 119, .28);
}

/* 提示条：深藏青在粉色语境里过重，改酒红 */
html[data-skin="pink"] .toast {
  background: #4a1b2e;
}

/* 焦点环统一走主色，这里只需确保描边不残留蓝色 */
html[data-skin="pink"] .btn:focus-visible,
html[data-skin="pink"] button:focus-visible,
html[data-skin="pink"] a:focus-visible,
html[data-skin="pink"] input:focus-visible,
html[data-skin="pink"] select:focus-visible,
html[data-skin="pink"] textarea:focus-visible {
  outline-color: var(--primary);
}

/* ---------------------------------------------------------------- 蓝色残留归零
   三页里用于「信息/选中态」的浅蓝底色（原设计借用了主色蓝的浅调）。
   逐条改写为粉调，选择器与各页内联样式一一对应，便于日后核对。
   -------------------------------------------------------------------------- */

/* 背单词页 */
html[data-skin="pink"] .vb-pos {
  color: var(--primary-d); background: var(--primary-l); border-color: var(--pink-line);
}
html[data-skin="pink"] .vb-example {
  background: var(--pink-tint); border-color: var(--pink-line);
}
html[data-skin="pink"] .vb-example.ex-sayable::after {
  color: var(--primary-d); border-color: var(--pink-line);
}
html[data-skin="pink"] .vb-lane.b5 {
  background: var(--pink-tint-2); border-color: var(--pink-line);
}
html[data-skin="pink"] .pill.learning {
  color: var(--primary-d); background: var(--primary-l); border-color: var(--pink-line);
}

/* 错题本页 */
html[data-skin="pink"] .wb-selects select.on {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .pill.work {
  color: var(--primary-d); background: var(--primary-l); border-color: var(--pink-line);
}
html[data-skin="pink"] .tag.type {
  color: var(--primary-d); background: var(--primary-l); border-color: var(--pink-line);
}
html[data-skin="pink"] .tag-editor label.chk {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .opt.click:hover {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .why {
  background: var(--pink-tint); border-color: var(--pink-line); color: var(--primary-d);
}
html[data-skin="pink"] .sel-chip.on {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .wb-hero {
  background: linear-gradient(135deg, #fdedf5 0%, #fbeaf3 100%);
}
html[data-skin="pink"] .wb-pills button.active {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .wb-add-cards button.primary {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .sec-title.grouped .n {
  background: var(--pink-tint-2);
}
html[data-skin="pink"] .rv-hint-pick {
  color: var(--primary-d); background: var(--pink-tint-2); border-color: var(--pink-line);
}

/* ---------------------------------------------------------------- 交互态与模块容器
   以下两类颜色必须跟着皮肤走：
     · 交互反馈色（悬停 / 聚焦 / 朗读中）——它们和主色是同一套语言
     · 模块容器色（双人对战卡、阅读页、变式训练卡）——整块面板留在蓝色系会格外突兀

   刻意保留原色的只有「状态标签」（见下方说明），因为它们的职责是区分，
   统一成粉色会让「学习中 / 已会 / 已掌握」三者失去差别。
   -------------------------------------------------------------------------- */

/* 背单词 · 例句朗读（2026-11-01 新增功能） */
html[data-skin="pink"] .vb-example.ex-sayable:hover {
  background: var(--pink-tint); border-color: var(--pink-line);
  box-shadow: 0 2px 8px rgba(219, 39, 119, .12);
}
html[data-skin="pink"] .vb-example.ex-sayable:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
html[data-skin="pink"] .vb-example.ex-sayable.saying {
  background: #fbe4f0; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, .20);
}
html[data-skin="pink"] .vb-example.ex-sayable.saying::after {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
html[data-skin="pink"] .vb-ls-opt.on {
  background: var(--pink-tint-2);
}

/* 背单词 · 双人对战（原为独立靛蓝色系，映射到酒红粉，保持"冷静"的观感层级） */
html[data-skin="pink"] .vb-battle-card {
  background: linear-gradient(135deg, #fdf0f7, #fbe4f0);
  border-color: #f3c9dd;
}
html[data-skin="pink"] .vb-bt-left .t,
html[data-skin="pink"] .vb-bt-top .t,
html[data-skin="pink"] .vb-bt-code,
html[data-skin="pink"] .vb-bt-score b,
html[data-skin="pink"] .vb-read-pop .g {
  color: #6b2340;
}
html[data-skin="pink"] .vb-bt-left .d,
html[data-skin="pink"] .vb-bt-line,
html[data-skin="pink"] .vb-read-count {
  color: #8f2f57;
}
html[data-skin="pink"] .vb-bt-q .word,
html[data-skin="pink"] .vb-read-item .t,
html[data-skin="pink"] .vb-read-title {
  color: #4a1b2e;
}

/* 背单词 · 阅读页可点词 */
html[data-skin="pink"] .rd-w:hover {
  background: var(--pink-tint);
}
html[data-skin="pink"] .rd-w.has {
  border-bottom-color: #eaa8c8;
}

/* 错题本 · 变式训练卡与 AI 标注 */
html[data-skin="pink"] .variant-card {
  background: #fdf4f9; border-color: var(--pink-line);
}
html[data-skin="pink"] .variant-card .ai-tag {
  color: var(--primary-d);
}

/* 状态标签的刻意保留（不做主题化，保证区分度）：
     .pill.new      紫  #6d4bd8   新词
     .pill.learning 粉  ← 仅此一枚随皮肤走（它代表"正在学"，与主色同义）
     .pill.known    靛  #3730a3   已会（与 learning 拉开距离，故保持原色）
     .pill.due      琥珀          待复习
     .pill.mastered 绿            已掌握
   错题本同理：.pill.late 红 / .pill.done 绿 / .pill.due 琥珀 / .pill.off 灰 全部保留。 */

/* ---------------------------------------------------------------- 作文分析
   该页调色板已于 2026-11-02 令牌化（css/composition.css 顶部的 --cz-*）。
   这里只替换令牌值，不动任何规则 —— 一处映射，全页换肤。
   橙 → 粉的映射保持原有明暗层次，不压平层次。
   -------------------------------------------------------------------------- */
html[data-skin="pink"] {
  /* 品牌色：深玫 → 主粉 → 浅粉，与门户粉梦的渐变节奏一致 */
  --cz-brand: #db2777;
  --cz-brand-soft: #ec6ba0;
  --cz-brand-deep: #b81f63;
  --cz-brand-ink: #c21f6b;
  --cz-gold: #f7a8c4;
  --cz-gold-2: #ee5f96;

  /* 底色阶梯：暖白 → 粉白 */
  --cz-bg-1: #fff1f7;
  --cz-bg-2: #fffafc;
  --cz-bg-3: #ffe9f2;
  --cz-bg-4: #fdeef6;
  --cz-bg-5: #fdeef6;
  --cz-bg-6: #fffbfd;
  --cz-bg-7: #fdeaf3;
  --cz-bg-8: #fdeef5;
  --cz-bg-9: #fff7fb;

  /* 描边：暖沙 → 粉沙 */
  --cz-line-1: #f5cfe0;
  --cz-line-2: #f0c3d8;
  --cz-line-3: #f2c8dc;
  --cz-line-4: #f6d3e2;
  --cz-line-5: #f3d5e2;
  --cz-line-6: #f5d2e1;
  --cz-line-7: #f2c8dc;
  --cz-line-8: #f3d0e0;
  --cz-line-9: #f6d6e4;
  --cz-line-10: #f7dbe8;

  /* 暖色文字：棕 → 酒红 */
  --cz-ink-1: #4a1b2e;
  --cz-ink-2: #5c2338;
  --cz-ink-3: #5c2338;
  --cz-ink-4: #7a2f4e;
  --cz-ink-5: #8f2f57;
  --cz-ink-6: #8f2f57;
  --cz-ink-7: #8a2b53;
  --cz-ink-8: #a81b5c;
  --cz-ink-9: #b81f63;
  --cz-ink-10: #9c6a80;

  /* 半透明阴影通道 */
  --cz-rgb-brand: 219, 39, 119;
  --cz-rgb-brand-deep: 184, 31, 99;
  --cz-rgb-gold: 247, 168, 196;
  --cz-rgb-ink-3: 92, 35, 56;
  --cz-rgb-ink-1: 74, 27, 46;
  --cz-rgb-bg-1: 255, 241, 247;
}

/* ---------------------------------------------------------------- 皮肤切换按钮
   三个工具页顶栏各挂一个，与门户首页的切换按钮语义一致：
   按钮显示「将要切换到的」主题名。
   -------------------------------------------------------------------------- */
.skin-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: background .16s, border-color .16s, box-shadow .16s, transform .1s;
  white-space: nowrap; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* 悬停：与顶栏 .btn 同一套反馈（只变底色与描边，文字不动） */
.skin-btn:hover { border-color: var(--border-3); background: var(--surface-2); }
.skin-btn:active { transform: translateY(1px); }
.skin-btn[aria-pressed="true"] {
  border-color: var(--primary); color: var(--primary-d); background: var(--primary-l);
}
/* 粉梦已按下时 :hover 会被上面的 [aria-pressed] 覆盖，单独补一档更深的描边 */
.skin-btn[aria-pressed="true"]:hover {
  border-color: var(--primary-d);
  box-shadow: var(--shadow-sm);
}
.skin-btn .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #f9a8c9, #db2777);
}
html[data-skin="pink"] .skin-btn .dot { background: linear-gradient(135deg, #cbd5e1, #7b879c); }
.skin-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 560px) {
  /* 窄屏只留色点，避免顶栏挤压；但点击区不能跟着缩成 23px 高，
     否则手指按不准、1px 位移也看不出来。用 min-* 撑到 36px。 */
  .skin-btn { padding: 6px 12px; min-width: 36px; min-height: 36px; font-size: 12px; }
  .skin-btn .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .skin-btn { transition: none; }
}

/* --------------------------------------------------------- 背单词 · 手写板
   手写带（整本默写与试拼写共用同一套 .dq-* 结构）在默认皮肤下是蓝色描边，
   粉梦皮肤里跟随皮肤改成粉色；两处一起生效，避免同一页出现两种色系。
   只改外壳，不做任何交互或尺寸调整。 */
html[data-skin="pink"] .dq-write { border-color: #cf7ba3; background: #fff4f9; }
html[data-skin="pink"] .dq-write.has-ink { border-style: solid; border-color: #b45d86; background: #fdeef6; }
html[data-skin="pink"] .dq-write.is-open {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(219, 39, 119, .06);
}
html[data-skin="pink"] .dq-ink-tools button:active { background: var(--primary-l); }