/* ════════════════════════════════════════════════════════════════════════════
 * theme-fusion.css — 融合风格包（6 套 · 客户可自选）
 *
 * 来源：把收集到的 4 个抖音 UI 参考源拆成设计 DNA 重组后的 6 套新风格。
 *   1. ink-grid        墨白 · 极简栅格   ← 叨叨AI 留白/栅格纪律
 *   2. aurora-glass    流光玻璃          ← 西瓜同学 动效密度 + 极光渐变/毛玻璃
 *   3. warm-craft      暖木手作          ← 菜心 暖木配色（米杏+栗棕+苔绿）
 *   4. cyber-pop       赛博潮玩          ← 小龙 声波/爱心 + neo-brutalism 硬边框偏移阴影
 *   5. porcelain-soft  青瓷柔光          ← 东方低饱和（青瓷绿 + 砂金点缀）
 *   6. zitong-pro      紫瞳旗舰          ← 品牌紫+靛紫渐变深色玻璃（融合款）
 *
 * 命名空间：data-preset = ink-grid / aurora-glass / warm-craft / cyber-pop /
 *                          porcelain-soft / zitong-pro
 * 加载位置：必须在 theme-presets.css 之后（index.html 中紧随其后）。
 *
 * ⚠️ 两个必须记住的坑（否则皮肤「半生效」）：
 *   1) theme-zitong.css 的 `#tc-topbar` 是**写死的 #1f2227**，不吃令牌。
 *      浅色风格改 --topbar-bg 无效，必须用 [data-preset] 选择器直接覆盖背景 + 文字色，
 *      否则顶栏文字（base 里是 rgba(255,255,255,.9)）会变成「白底白字」。
 *   2) `--accent-rgb` 只在 theme-obsidian.css（dark）里定义，
 *      浅色风格必须自己补 --accent-rgb，否则所有 rgba(var(--accent-rgb),x) 失效。
 * ════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
 * 顶部：浅色风格的顶栏/侧栏 chrome 修正
 * 用 :is() 一次覆盖全部浅色预设（含既有 light-clean），避免逐套复制 7 行选择器。
 * ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"]:is(
  [data-preset="ink-grid"],
  [data-preset="warm-craft"],
  [data-preset="porcelain-soft"],
  [data-preset="light-clean"]
) #tc-topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
/* base 里顶栏内文字是白色系，浅色顶栏必须一并改深，否则「白底白字」 */
html[data-theme="light"]:is(
  [data-preset="ink-grid"],
  [data-preset="warm-craft"],
  [data-preset="porcelain-soft"],
  [data-preset="light-clean"]
) :is(#tc-topbar .tc-topbar-logo,
     #tc-topbar .tc-topbar-title,
     #tc-topbar a,
     #tc-topbar .tc-nav-link,
     #tc-topbar button,
     #tc-topbar .tc-topbar-right-v2,
     #tc-topbar span) {
  color: var(--text-primary) !important;
}
html[data-theme="light"]:is(
  [data-preset="ink-grid"],
  [data-preset="warm-craft"],
  [data-preset="porcelain-soft"],
  [data-preset="light-clean"]
) :is(#tc-topbar a:hover, #tc-topbar button:hover) {
  color: var(--accent) !important;
}
html[data-theme="light"]:is(
  [data-preset="ink-grid"],
  [data-preset="warm-craft"],
  [data-preset="porcelain-soft"],
  [data-preset="light-clean"]
) #tc-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
}

/* 兼容既有经典预设 light-clean：它的令牌文件里没有 --topbar-bg / --sidebar-bg，
 * 会被上面的浅色 chrome 规则取到空值（var() 解析失败 → 背景变透明）。这里补齐。 */
[data-theme="light"][data-preset="light-clean"] {
  --topbar-bg: #ffffff;
  --sidebar-bg: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 1. 墨白 · 极简栅格（叨叨AI）— 几乎不用阴影，靠 1px 描边与留白分层
 * ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"][data-preset="ink-grid"] {
  --bg-primary: #fafafb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f5f5f8;
  --bg-hover: #f0f0f4;
  --bg-card: #ffffff;
  --border: #e8e8ee;
  --border-light: #f1f1f5;
  --text-primary: #17171c;
  --text-secondary: #57575f;
  --text-muted: #8f8f99;
  --text-white: #ffffff;
  --accent: #1d1d24;
  --accent-rgb: 29,29,36;
  --accent-dim: #000000;
  --accent-glow: rgba(29,29,36,0.10);
  --accent-text: #1d1d24;
  --purple: #1d1d24;
  --purple-bg: rgba(29,29,36,0.06);
  --success: #12b76a;  --success-bg: rgba(18,183,106,0.10);
  --danger:  #f04438;  --danger-bg:  rgba(240,68,56,0.10);
  --warning: #f79009;  --warning-bg: rgba(247,144,9,0.12);
  --info:    #2e90fa;  --info-bg:    rgba(46,144,250,0.10);
  --sidebar-bg: #ffffff;
  --sidebar-active: rgba(29,29,36,0.06);
  --topbar-bg: #ffffff;
  --banner-bg: #ffffff;
  --radius: 10px;  --radius-lg: 14px;  --radius-pill: 99px;
  --shadow-sm: 0 1px 2px rgba(17,17,28,0.05);
  --shadow-md: 0 4px 14px -6px rgba(17,17,28,0.14);
  --shadow-lg: 0 18px 44px -18px rgba(17,17,28,0.22);
}
/* 极简风：卡片靠描边不靠阴影，标题字重拉高 */
[data-preset="ink-grid"] .tc-card,
[data-preset="ink-grid"] .card,
[data-preset="ink-grid"] .panel {
  box-shadow: none !important;
}
[data-preset="ink-grid"] h1,
[data-preset="ink-grid"] h2,
[data-preset="ink-grid"] h3 { letter-spacing: -0.2px; }

/* ══════════════════════════════════════════════════════════════════════════
 * 2. 流光玻璃（西瓜同学）— 极光渐变底 + 毛玻璃卡片 + 渐变描边
 * ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"][data-preset="aurora-glass"] {
  --bg-primary: #191430;
  --bg-secondary: rgba(255,255,255,0.075);
  --bg-tertiary: rgba(255,255,255,0.055);
  --bg-hover: rgba(255,255,255,0.12);
  --bg-card: rgba(255,255,255,0.075);
  --border: rgba(255,255,255,0.14);
  --border-light: rgba(255,255,255,0.10);
  --text-primary: #f3f0ff;
  --text-secondary: #bfb8de;
  --text-muted: #8e86b4;
  --text-white: #ffffff;
  --accent: #7c5cff;
  --accent-rgb: 124,92,255;
  --accent-dim: #5a3fd6;
  --accent-glow: rgba(124,92,255,0.42);
  --accent-text: #b9a6ff;
  --purple: #7c5cff;
  --purple-bg: rgba(124,92,255,0.20);
  --success: #34d399;  --success-bg: rgba(52,211,153,0.16);
  --danger:  #fb7185;  --danger-bg:  rgba(251,113,133,0.16);
  --warning: #fbbf24;  --warning-bg: rgba(251,191,36,0.16);
  --info:    #22d3ee;  --info-bg:    rgba(34,211,238,0.16);
  --sidebar-bg: rgba(255,255,255,0.05);
  --sidebar-active: rgba(124,92,255,0.24);
  --topbar-bg: rgba(255,255,255,0.05);
  --banner-bg: #241d40;
  --radius: 18px;  --radius-lg: 22px;  --radius-pill: 99px;
  --shadow-sm: 0 4px 14px -8px rgba(0,0,0,0.5);
  --shadow-md: 0 10px 34px -14px rgba(0,0,0,0.62);
  --shadow-lg: 0 24px 60px -22px rgba(0,0,0,0.75);
}
/* 极光底：铺在内容区，不动布局层级 */
[data-preset="aurora-glass"] #tc-main-layout,
[data-preset="aurora-glass"] #tc-content-area {
  background:
    radial-gradient(1100px 560px at 12% -6%,  rgba(124,92,255,0.30), transparent 62%),
    radial-gradient(900px 520px at 88% 14%,  rgba(34,211,238,0.20), transparent 62%),
    radial-gradient(700px 480px at 50% 108%, rgba(230,57,124,0.14), transparent 64%),
    #191430 !important;
}
/* 毛玻璃 + 顶部渐变描边 */
[data-preset="aurora-glass"] :is(.tc-card, .card, .panel, .module-card) {
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  position: relative;
}
[data-preset="aurora-glass"] :is(.tc-card, .card, .panel)::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124,92,255,0.55), rgba(34,211,238,0.28), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
[data-preset="aurora-glass"] #tc-sidebar,
[data-preset="aurora-glass"] #tc-topbar {
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 3. 暖木手作（菜心）— 米杏底 + 栗棕主色 + 苔绿辅助，纸张木器手感
 * ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"][data-preset="warm-craft"] {
  --bg-primary: #f8f2e9;
  --bg-secondary: #fffbf5;
  --bg-tertiary: #f4ebdd;
  --bg-hover: rgba(138,94,59,0.10);
  --bg-card: #fffbf5;
  --border: #e6d8c3;
  --border-light: #f0e6d6;
  --text-primary: #3a2c1e;
  --text-secondary: #6b5540;
  --text-muted: #a08c74;
  --text-white: #fff9f1;
  --accent: #8a5e3b;
  --accent-rgb: 138,94,59;
  --accent-dim: #6e4930;
  --accent-glow: rgba(138,94,59,0.20);
  --accent-text: #7a5233;
  --purple: #5f7a52;
  --purple-bg: rgba(95,122,82,0.12);
  --success: #5f7a52;  --success-bg: rgba(95,122,82,0.13);
  --danger:  #c14a35;  --danger-bg:  rgba(193,74,53,0.12);
  --warning: #c9862a;  --warning-bg: rgba(201,134,42,0.14);
  --info:    #4a7a8c;  --info-bg:    rgba(74,122,140,0.12);
  --sidebar-bg: #fffbf5;
  --sidebar-active: rgba(138,94,59,0.13);
  --topbar-bg: #fffbf5;
  --banner-bg: #fffbf5;
  --radius: 16px;  --radius-lg: 20px;  --radius-pill: 99px;
  --shadow-sm: 0 2px 6px -2px rgba(90,66,42,0.14);
  --shadow-md: 0 6px 20px -8px rgba(90,66,42,0.26);
  --shadow-lg: 0 20px 46px -18px rgba(90,66,42,0.30);
}
/* 主按钮用「不对称圆角」，呼应手作木器的圆润感 */
[data-preset="warm-craft"] .btn-primary,
[data-preset="warm-craft"] .tc-btn-primary {
  border-radius: var(--radius) var(--radius-lg) var(--radius) var(--radius-lg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 4. 赛博潮玩（小龙）— 电光青 + 霓虹品红，neo-brutalism 硬边框 + 实心偏移阴影
 * ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"][data-preset="cyber-pop"] {
  --bg-primary: #0b0b12;
  --bg-secondary: #14141f;
  --bg-tertiary: #1c1c2a;
  --bg-hover: rgba(0,229,192,0.10);
  --bg-card: #14141f;
  --border: #2c2c3d;
  --border-light: #232331;
  --text-primary: #ededf5;
  --text-secondary: #a8a8be;
  --text-muted: #6e6e86;
  --text-white: #ffffff;
  --accent: #00e5c0;
  --accent-rgb: 0,229,192;
  --accent-dim: #00b89a;
  --accent-glow: rgba(0,229,192,0.30);
  --accent-text: #5cf2d9;
  --purple: #ff3d8b;
  --purple-bg: rgba(255,61,139,0.14);
  --success: #00e5c0;  --success-bg: rgba(0,229,192,0.14);
  --danger:  #ff3d8b;  --danger-bg:  rgba(255,61,139,0.16);
  --warning: #ffc043;  --warning-bg: rgba(255,192,67,0.16);
  --info:    #4d9dff;  --info-bg:    rgba(77,157,255,0.16);
  --sidebar-bg: #0b0b12;
  --sidebar-active: rgba(0,229,192,0.16);
  --topbar-bg: #14141f;
  --banner-bg: #14141f;
  --radius: 9px;  --radius-lg: 12px;  --radius-pill: 99px;
  /* 实心偏移阴影 —— neo-brutalism 的标志 */
  --shadow-sm: 2px 2px 0 0 #2c2c3d;
  --shadow-md: 4px 4px 0 0 #2c2c3d;
  --shadow-lg: 6px 6px 0 0 #2c2c3d;
}
[data-preset="cyber-pop"] :is(.tc-card, .card, .panel, .module-card) {
  border-width: 1.5px !important;
}
[data-preset="cyber-pop"] :is(.tc-card, .card, .panel):hover {
  box-shadow: var(--shadow-md) !important;
  transform: translate(-1px, -1px);
}
[data-preset="cyber-pop"] :is(.btn-primary, .tc-btn-primary) {
  box-shadow: 4px 4px 0 0 #ff3d8b !important;
  color: #06110f !important;
  letter-spacing: 0.2px;
}
[data-preset="cyber-pop"] :is(.btn-primary, .tc-btn-primary):hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 0 #ff3d8b !important;
}
[data-preset="cyber-pop"] .tc-topbar-title,
[data-preset="cyber-pop"] h1,
[data-preset="cyber-pop"] h2 { letter-spacing: 0.2px; }

/* ══════════════════════════════════════════════════════════════════════════
 * 5. 青瓷柔光 — 东方低饱和：青瓷绿为主，砂金只用于等级/标签
 * ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"][data-preset="porcelain-soft"] {
  --bg-primary: #f4f9f8;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eff7f5;
  --bg-hover: rgba(46,140,128,0.09);
  --bg-card: #ffffff;
  --border: #dbe9e6;
  --border-light: #e9f2f0;
  --text-primary: #1d3531;
  --text-secondary: #4c6b65;
  --text-muted: #8aa5a0;
  --text-white: #ffffff;
  --accent: #2e8c80;
  --accent-rgb: 46,140,128;
  --accent-dim: #237064;
  --accent-glow: rgba(46,140,128,0.18);
  --accent-text: #237064;
  --purple: #c9a227;
  --purple-bg: rgba(201,162,39,0.14);
  --success: #2e8c80;  --success-bg: rgba(46,140,128,0.11);
  --danger:  #c05a4a;  --danger-bg:  rgba(192,90,74,0.11);
  --warning: #c9a227;  --warning-bg: rgba(201,162,39,0.14);
  --info:    #3f7fa6;  --info-bg:    rgba(63,127,166,0.11);
  --sidebar-bg: #ffffff;
  --sidebar-active: rgba(46,140,128,0.12);
  --topbar-bg: #ffffff;
  --banner-bg: #ffffff;
  --radius: 14px;  --radius-lg: 18px;  --radius-pill: 99px;
  --shadow-sm: 0 2px 6px -2px rgba(29,53,49,0.10);
  --shadow-md: 0 6px 18px -9px rgba(29,53,49,0.20);
  --shadow-lg: 0 20px 46px -20px rgba(29,53,49,0.26);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 6. 紫瞳旗舰（融合款）— 品牌紫 + 靛紫渐变深色玻璃 + 卡片顶部品牌光带
 * ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"][data-preset="zitong-pro"] {
  --bg-primary: #101016;
  --bg-secondary: #1b1b25;
  --bg-tertiary: #22222e;
  --bg-hover: rgba(230,57,124,0.12);
  --bg-card: #1b1b25;
  --border: #2a2a38;
  --border-light: #232330;
  --text-primary: #f4f4f8;
  --text-secondary: #b4b4c4;
  --text-muted: #7c7c90;
  --text-white: #ffffff;
  --accent: #e6397c;
  --accent-rgb: 230,57,124;
  --accent-dim: #c22a64;
  --accent-glow: rgba(230,57,124,0.34);
  --accent-text: #f06ca0;
  --purple: #7c5cff;
  --purple-bg: rgba(124,92,255,0.16);
  --success: #34d399;  --success-bg: rgba(52,211,153,0.14);
  --danger:  #f87171;  --danger-bg:  rgba(248,113,113,0.14);
  --warning: #fbbf24;  --warning-bg: rgba(251,191,36,0.14);
  --info:    #60a5fa;  --info-bg:    rgba(96,165,250,0.14);
  --sidebar-bg: #131320;
  --sidebar-active: rgba(230,57,124,0.18);
  --topbar-bg: #16161f;
  --banner-bg: #1b1b25;
  --radius: 14px;  --radius-lg: 18px;  --radius-pill: 99px;
  --shadow-sm: 0 2px 8px -4px rgba(0,0,0,0.8);
  --shadow-md: 0 10px 30px -16px rgba(0,0,0,0.85);
  --shadow-lg: 0 26px 60px -24px rgba(0,0,0,0.9);
}
/* 卡片顶部一道品牌光带 */
[data-preset="zitong-pro"] :is(.tc-card, .card, .panel, .module-card) {
  position: relative;
}
[data-preset="zitong-pro"] :is(.tc-card, .card, .panel, .module-card)::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,57,124,0.75), rgba(124,92,255,0.55), transparent);
  pointer-events: none;
}
[data-preset="zitong-pro"] .tc-topbar-logo,
[data-preset="zitong-pro"] .ts-gear-btn {
  background: linear-gradient(135deg, #e6397c, #7c5cff) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 融合风格统一接管页面的「电影感背景」
 *
 * 结构（index.html 的 #tc-main-layout 内）：
 *   <video id="tc-main-bg-video" opacity=".35">  ｜  <div id="tc-main-bg-dim"> 深色渐变遮罩 z-index:1
 * 两者**始终渲染**（不像 #tc-home-bg-video 那样受 body.is-home-page 控制），
 * 后果有两类：
 *   a) 浅色风格：遮罩把浅色底一路压暗（rgba(13,16,23,.7)→1），页面看着「底色还是黑」——
 *      ⚠️ 因为它是 pointer-events:none，用 elementFromPoint 排查会被跳过，只能靠「全屏覆盖层扫描」定位。
 *   b) aurora-glass：遮罩盖在 #tc-main-layout 的极光渐变之上，渐变完全看不见。
 * 6 套融合风格各自都有明确的页面底，故统一隐藏，交由各自令牌/渐变接管。
 * （经典预设不受影响，仍保留原有的电影感背景视频。）
 * ══════════════════════════════════════════════════════════════════════════ */
html:is(
  [data-preset="ink-grid"],
  [data-preset="aurora-glass"],
  [data-preset="warm-craft"],
  [data-preset="cyber-pop"],
  [data-preset="porcelain-soft"],
  [data-preset="zitong-pro"]
) :is(#tc-main-bg-video, #tc-main-bg-dim) {
  display: none !important;
}
/* 隐藏背景视频后，首页的 #tc-main-layout 不再需要为视频预留透明度 */
html:is(
  [data-preset="ink-grid"],
  [data-preset="aurora-glass"],
  [data-preset="warm-craft"],
  [data-preset="cyber-pop"],
  [data-preset="porcelain-soft"],
  [data-preset="zitong-pro"]
) body.is-home-page #tc-main-layout {
  background: var(--bg-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 内容区顶部欢迎横幅
 * theme-obsidian.css 原为 `linear-gradient(var(--accent-glow), transparent)` +
 * `color: var(--text-primary)`：半透明底 + 浅色文字，最终对比度取决于「背后是什么」，
 * 换肤后极易变成浅底浅字（aurora-glass 实测发糊）。
 * 这里统一改为**不透明**底（--banner-bg）：不透明意味着 computed 值 == 最终渲染值，
 * 对比度可被确定性断言，不再依赖背景。
 * ══════════════════════════════════════════════════════════════════════════ */
html:is(
  [data-preset="ink-grid"],
  [data-preset="aurora-glass"],
  [data-preset="warm-craft"],
  [data-preset="cyber-pop"],
  [data-preset="porcelain-soft"],
  [data-preset="zitong-pro"]
) #tc-content-area > div[style*="min-height:100px"] {
  background: var(--banner-bg) !important;
  border: 1px solid rgba(var(--accent-rgb),0.26) !important;
  color: var(--text-primary) !important;
}
html:is(
  [data-preset="ink-grid"],
  [data-preset="aurora-glass"],
  [data-preset="warm-craft"],
  [data-preset="cyber-pop"],
  [data-preset="porcelain-soft"],
  [data-preset="zitong-pro"]
) #tc-content-area > div[style*="min-height:100px"] > span {
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 通用：让换肤过程平滑（避免大色差闪跳）
 * ══════════════════════════════════════════════════════════════════════════ */
html[data-preset] :is(body, #tc-sidebar, #tc-topbar, .tc-card, .card, .panel, .module-card) {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/* 动效可访问性：尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  [data-preset] :is(.tc-card, .card, .panel, .module-card):hover { transform: none !important; }
}