/* =====================================================================
   🌸 可爱主题色板（底层变量透传，不自带浮钮）
   选色 UI 已并入 💎 主题切换面板（theme-switcher.js）。本文件只保留把可爱色
   透传到全站主色 / 整屏底色 / 卡片表面的 html:root 规则。浮钮 2026-08-15 移除。
   ===================================================================== */

/* ---- 关键：把可爱色同步成全局主色 + 整屏底色 + 卡片表面 ----
   非口语界面（听写/填空/ SST 等）的主按钮、进度条、标签、导航高亮都用
   --color-primary 系列；页面大底色用 --color-bg；卡片/按钮/输入框的「白底」
   用 --color-surface / --color-elevated。
   这里用 !important 压过 cream-theme / pte-theme-studio 里对这些变量的定义，
   让所有做题界面的「白色部分」也跟随 🌸 选中的可爱色，实现「整屏现场变色」。
   卡片表面 = white 与可爱色的 color-mix（不透明，主动带上色调），保证即使底色
   极浅（--spk-accent-light 已经接近白色）也能看出卡片已染色。
   注：--warm-bg / --warm-surface 仅 velorah 暗色模板使用，不在此覆盖，避免破坏暗色。
   当 --spk-accent 未设置时回退到奶油森林绿 / 奶油暖底，保持原有默认观感。 */
/* ★ 仅在「可爱色被选中」(data-spk-active) 时才整屏染色；选模板/调色板时本块不生效，
   底色交还给 cream-palettes.css（模板/调色板）。否则 html:root 的 !important 会
   无条件压过调色板，导致「右侧主页面换不动 / 原色丢失」。 */
html[data-spk-active] {
  --color-primary: var(--spk-accent, #2f4a3c) !important;
  --color-primary-hover: var(--spk-accent-hover, #26402f) !important;
  --color-primary-soft: var(--spk-accent-light, #e6eee4) !important;
  --color-bg: var(--spk-accent-light, #f9e8da) !important; /* 整屏底色跟随可爱色 */
  /* 白色表面（卡片/输入框/次级按钮）改为「white 与可爱色的混合」→ 淡彩浅卡 */
  --color-surface: color-mix(in srgb, white 50%, var(--spk-accent, #fffdf8) 50%) !important;
  --color-elevated: color-mix(in srgb, white 35%, var(--spk-accent, #fffdf8) 65%) !important;
}

/* ---- 工具栏白底按钮：pte-theme-studio.css 里 .xj-show-text-btn / .xj-qset-btn 等
   写死了 background:#ffffff !important，单纯改变量盖不掉。这里直接用变量重写。 ---- */
.xj-show-text-btn,
.xj-edit-btn,
.xj-qset-btn,
.vocab-btn,
.xj-qsettings-reset,
.dict-input {
  background-color: var(--color-surface) !important;
}

/* ---- 熊老师金句气泡：practice.html 里 .xq-bubble 写死 #FFFDF6（米白）、.xq-avatar 写死 #FFF6E8（奶油），
   不是纯 #fff，属性选择器抓不到，必须精确覆盖。同时 .xq-bubble::before 的小三角要跟随同一颜色。 ---- */
.xq-bubble {
  background-color: var(--color-surface) !important;
  border-color: color-mix(in srgb, var(--color-primary) 30%, white) !important;
}
.xq-bubble::before {
  border-right-color: var(--color-surface) !important;
}
.xq-avatar {
  background-color: color-mix(in srgb, white 70%, var(--spk-accent, #fff6e8) 30%) !important;
}

/* ---- 答题输入框（随可爱色染色的白底）----
   .sst-editor 是 SST 答题区，本质是一个 contenteditable 的 DIV（不是 textarea/input），
   之前的「textarea/input」兜底抓不到它，所以它仍是 rgba(255,252,247,.90) 的米白 → 显白。
   这里单独点名染色；同时把它的靛蓝描边换成主色描边，避免粉/绿底配靛蓝边发飘。
   .xj-input 是 WFD 答题 textarea（理论上被 textarea 规则覆盖，这里显式点名更稳妥）；
   .fib-blank:focus 是 FIB 空格聚焦时的回白；.wm-ctrl-btn.main 是听写主播放按钮（白圆）；
   .login-box 是登录弹窗白卡。 ---- */
.sst-editor {
  background-color: var(--color-surface) !important;
  border-color: color-mix(in srgb, var(--color-primary) 25%, white) !important;
}
.xj-input,
.fib-blank:focus,
.wm-ctrl-btn.main,
.login-box {
  background-color: var(--color-surface) !important;
}

/* ---- 整屏练习容器：.fib-train（FIB 练习屏）与 .xj-train（WFD/听写练习屏）都用
   var(--xj-card-bg, #fff) 画整屏白底（pte_card_color 默认 'white'），把已染色的页面底色盖白了。
   这里改回 --color-bg（即可爱色的浅色调页面底，theme-picker.css 已用 !important 覆写过），
   让整屏练习区也跟随可爱色、不再白；内部卡片仍用更深的 --color-surface，层次保留。 ---- */
.fib-train,
.xj-train {
  background-color: var(--color-bg) !important;
}

/* ---- 兜底：practice.html 里大量 inline style="background:#fff" 的按钮/卡片 ----
   属性选择器 + !important 可以覆盖不带 !important 的内联样式（inline specificity 1,0,0,0
   不带 !important 时输给 !important 样式规则）。注意：[style*="background:#fff"] 会匹配任何
   十六进制颜色以 #fff 开头的（包括 #fff0f4、#fffdf6 等浅色），所以覆盖范围更广。 */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"] {
  background-color: var(--color-surface) !important;
}

/* ---- 终极兜底：把任何样式表里 .practice-card / .card / textarea / input / select / button
   凡是「白底」的全部按变量重写，覆盖 pte-theme-studio.css / cream-theme.css 里的硬编码。
   注：故意排除 .fav-fam-badge（红/黄状态徽章），保留功能色不被配色吃掉。 ---- */
.practice-card,
.card,
textarea,
input[type="text"],
input[type="search"],
select,
.secondary,
.btn-outline,
.btn-ghost,
.we-tab,
.subskill-list,
.writing-errors,
.history-panel,
.stat-chip,
.xj-qsettings-panel,
.fib-blank,
.fibd-select,
.fib-passage-wrap,
.fib-answer-content,
.fib-bottom-bar,
.fib-options-pool,
.fib-list-item,
.fib-btn {
  background-color: var(--color-surface) !important;
}

/* ---- ★ 无色模式钉值块（2026-08-15 v2：无色=透明玻璃，熊老师定义）----
   clearThemePicker 只移除 <html> 内联 --spk-* 变量，但 speaking-app.css 的 :root
   写死了 --spk-accent 样式表默认值，内联一清它就顶上来，上面 html:root 里的
   var(--spk-accent, fallback) 永远拿不到 fallback——曾因此「选了无色还是紫」。
   clearThemePicker 现在会给 <html> 打 data-spk-none="1"，这里把全站变量显式钉值。
   v1 钉成米白奶油被驳回：「无色就是透明色」——表面必须半透明 + backdrop 模糊，
   让 velorah 星夜壁纸（或其他主题底）透出来。
   特异性 html[data-spk-none] = html:root = (0,1,1)，靠文件顺序靠后胜出，必须放最后。 */
html[data-spk-none] {
  --color-primary: #2f4a3c !important;
  --color-primary-hover: #26402f !important;
  --color-primary-soft: rgba(230, 238, 228, 0.70) !important;
  --color-bg: rgba(255, 253, 248, 0.42) !important;
  --color-surface: rgba(255, 253, 248, 0.42) !important;
  --color-elevated: rgba(255, 253, 248, 0.55) !important;
}

/* 无色玻璃感：主要容器加 backdrop 模糊，透出底层壁纸/底色 */
html[data-spk-none] .card,
html[data-spk-none] .practice-card,
html[data-spk-none] .xq-bubble,
html[data-spk-none] .xq-avatar,
html[data-spk-none] .header,
html[data-spk-none] .bottom-nav,
html[data-spk-none] #pte-pk-feed-banner,
html[data-spk-none] .fib-train,
html[data-spk-none] .xj-train,
html[data-spk-none] .sst-editor,
html[data-spk-none] textarea,
html[data-spk-none] input[type="text"],
html[data-spk-none] input[type="search"],
html[data-spk-none] select,
html[data-spk-none] .btn-outline,
html[data-spk-none] .btn-ghost,
html[data-spk-none] .secondary,
html[data-spk-none] .login-box {
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}

/* ---- ★ 无色·无框全透明变体（2026-08-15）：data-spk-none="clear" ----
   与 glass 互斥：填充透明、去掉边框/阴影/模糊，壁纸 100% 透出，无任何框感。
   变量钉值同组特异性，靠顺序靠后覆盖 glass 的 --color-* 钉值。 */
html[data-spk-none="clear"] {
  --color-bg: transparent !important;
  --color-surface: transparent !important;
  --color-elevated: transparent !important;
}

html[data-spk-none="clear"] .card,
html[data-spk-none="clear"] .practice-card,
html[data-spk-none="clear"] .feature-card,
html[data-spk-none="clear"] .hero-card,
html[data-spk-none="clear"] .hm-card,
html[data-spk-none="clear"] .hm-hero,
html[data-spk-none="clear"] .hm-pk-card,
html[data-spk-none="clear"] .hm-banner,
html[data-spk-none="clear"] .hm-section,
html[data-spk-none="clear"] .stat-chip,
html[data-spk-none="clear"] .we-tab,
html[data-spk-none="clear"] .subskill-list,
html[data-spk-none="clear"] .xq-bubble,
html[data-spk-none="clear"] .xq-avatar,
html[data-spk-none="clear"] .header,
html[data-spk-none="clear"] .bottom-nav,
html[data-spk-none="clear"] #pte-pk-feed-banner,
html[data-spk-none="clear"] .fib-train,
html[data-spk-none="clear"] .xj-train,
html[data-spk-none="clear"] .sst-editor,
html[data-spk-none="clear"] textarea,
html[data-spk-none="clear"] input[type="text"],
html[data-spk-none="clear"] input[type="search"],
html[data-spk-none="clear"] select,
html[data-spk-none="clear"] .btn-outline,
html[data-spk-none="clear"] .btn-ghost,
html[data-spk-none="clear"] .secondary,
html[data-spk-none="clear"] .login-box,
html[data-spk-none="clear"] .spk-app,
html[data-spk-none="clear"] .spk-card,
html[data-spk-none="clear"] .spk-panel {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}