/* ══════════════════════════════════════════════════════════════════════════
   暖光AI · 品牌覆盖层 (brand.css)
   ──────────────────────────────────────────────────────────────────────────
   · 零侵入：不修改任何 bundle，**删除本文件即完全回滚**（注入层会自动跳过）
   · 注入方式：_serve.js → injectHtml() 在 </head> 前插入 <link rel="stylesheet" href="/brand.css">
   · 总开关：环境变量 XN_INJECT=0 可关闭全部注入
   ──────────────────────────────────────────────────────────────────────────
   为什么几乎每条都带 !important：
     PrimeVue 4 在**运行时**把主题 token 写成 documentElement 的内联 style
     （element.style.setProperty），普通样式表声明会被内联样式压过去。
     CSS 层叠里「作者样式表的 !important」优先于「作者内联的非 important」，
     所以只有 !important 才能真正覆盖。实测：不加时改了完全没反应。
   ──────────────────────────────────────────────────────────────────────────
   三套变量，缺一不可（实测教训）：
     ① --p-surface-0..950   PrimeVue 中性色板 —— 组件内部的底色/描边/次级文字全在这
     ② --app-*              应用外壳（侧栏/顶栏/主区/分隔线），huohu 自己加的
     ③ --radius-* / --font-sans   圆角（胶囊感的来源）与字体
   只改第 ② 层 = 「换了外壳没换里子」，这是之前「只换主色仍然一模一样」的原因。
   ──────────────────────────────────────────────────────────────────────────
   ★★★ 两个实测结论（2026-09-24，别再踩）★★★

   (1) **本站没有 Tailwind4 语义变量**。曾以为存在 --background/--card/--border/
       --foreground/--muted/--accent 并写了一整块覆盖 —— 实测
       全部 `getPropertyValue()` 返回 undefined，**纯死代码**，已删除。
       唯一真实存在的 Tailwind 风格变量是 --radius-sm..4xl。

   (2) **--p-surface-* 在明暗两套里顺序一致**：surface-0 最浅 → surface-950 最深。
       暗色不是把色阶反相，而是**整条向下压暗**。实测站点原生值：
         浅色  surface-0 #ffffff  →  surface-950 #020617
         暗色  surface-0 #ffffff  →  surface-950 #09090b
       而 **body 的页面底色用的就是 surface-950** —— 所以一旦把它反相成浅色，
       body 立刻变白，页面就成了「顶栏侧栏是黑的、主区是白的」半暗状态。
       这条踩过一次，改之前先想清楚顺序。
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   A 案 · 樱雾奶油（默认 / 浅色）
   暖白底 + 樱粉侧栏 + 玫瑰主色 + 大圆角 —— 柔和但不甜腻
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 字体：换掉 "Inter Variable"，直接用系统中文字体栈（不引外网字体，省 2Mbps 带宽） */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;

  /* ── ① PrimeVue 中性色板：暖粉灰（原版是冷灰 #f8fafc 系） */
  --p-surface-0: #fffdfe !important;
  --p-surface-50: #fdf1f6 !important;
  --p-surface-100: #fbe7ef !important;
  --p-surface-200: #f4dbe5 !important;
  --p-surface-300: #e8c9d8 !important;
  --p-surface-400: #d3b1c3 !important;
  --p-surface-500: #b392a4 !important;
  --p-surface-600: #8f7383 !important;
  --p-surface-700: #6d5663 !important;
  --p-surface-800: #4b3a44 !important;
  --p-surface-900: #2f242b !important;
  --p-surface-950: #1c151a !important;

  /* ── ② 应用外壳（侧栏-主区-顶栏 三层可辨，这是「有设计感」的关键） */
  --app-main-bg: #fbf6f8 !important;
  --app-sidebar-bg: #fdf1f6 !important;
  --app-header-bg: #fffbfd !important;
  --app-footer-bg: #fffbfd !important;
  --app-shell-border: #f4e2ec !important;
  --app-sidebar-rail-hover: #fbe7ef !important;
  --app-scrollbar-thumb: #eed6e2 !important;
  --app-scrollbar-thumb-hover: #e3c2d4 !important;
  --app-image-avatar-stroke: #ffffff !important;

  /* ── ③ 圆角：整体放大 → 胶囊感（原版 lg=.5rem / xl=.75rem / 2xl=1rem） */
  --radius-sm: .35rem !important;
  --radius-md: .55rem !important;
  --radius-lg: .9rem !important;
  --radius-xl: 1.2rem !important;
  --radius-2xl: 1.5rem !important;
  --radius-3xl: 1.9rem !important;
  --radius-4xl: 2.4rem !important;
}

/* ─────────────────────────────────────────────────────────────────────
   A 案 · 设计语言（token 覆盖不到的「观感」部分）
   ───────────────────────────────────────────────────────────────────── */

/* 侧栏：奶油纸底 + 暖光晕，做出「手账本」的材质而不是平涂
   ★★★【2026-09-26 改·配合 home-theme.js 的「奶油手账」改造】
   为什么必须在这里改、而不是在 home-theme.js 里覆盖：
     本选择器 `html:not(.dark) aside` 的**特指度高于** home-theme.js 的 `aside.fixed`
     （类型+伪类+类型 vs 类型+类），两边都带 !important 时**本文件赢**。
     实测：只改 home-theme.js 时侧栏照样是粉的，就是被这条压掉了。
     ⇒ 侧栏底色属于「设计语言」层，归 brand.css 管；home-theme.js 不再插手这一条。 */
html:not(.dark) aside {
  background-image:
    radial-gradient(560px 320px at 0% -4%, rgba(255, 222, 180, .56), rgba(255, 222, 180, 0) 66%),
    radial-gradient(420px 280px at 100% 100%, rgba(255, 228, 238, .34), rgba(255, 228, 238, 0) 68%),
    repeating-linear-gradient(90deg, rgba(196, 166, 140, .026) 0 1px, rgba(0, 0, 0, 0) 1px 22px) !important;
  background-color: #fdf6ec !important;
  border-right-color: #e8d8c4 !important;
  box-shadow: 2px 0 10px -6px rgba(150, 116, 92, .22) !important;
}

/* 顶栏：暖奶油半透明 + 细描边（配合首页手账风） */
html:not(.dark) header[class*="bg-app-header"] {
  background-color: rgba(253, 248, 242, .72) !important;
  background-image: linear-gradient(180deg, rgba(255, 252, 246, .80), rgba(251, 244, 234, .66)) !important;
  backdrop-filter: saturate(150%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(10px) !important;
  box-shadow: 0 1px 0 rgba(198, 168, 146, .28) !important;
}

/* 发现页卡片：拍立得式白边 + 悬浮抬起
   ★★★【2026-09-26 改·配合 home-theme.js 的「奶油手账」改造】
   原为 `border-radius:18px` + 统一 `translateY(-3px)`。
   现在卡片的完整外观（白边/padding/阴影/手写体标题）由 home-theme.js 负责，
   本文件不再声明圆角与 hover 位移，避免**同一属性两处声明互相打架**
   （实测：两边都写时以特指度高者为准，改一处另一处看着像失效，很难查）。
   ⇒ 这里只保留「网格级」的兜底，且不再与 home-theme.js 重叠。 */
html:not(.dark) [class*="hh-card-grid"] img {
  border-radius: 8px !important;
}

/* 主操作按钮（有文字的）做胶囊；纯图标按钮保持圆形 */
html:not(.dark) .p-button:not(.p-button-icon-only):not(.p-button-rounded):not(.p-button-text) {
  border-radius: 999px !important;
}

/* 滚动条：细、跟主题走 */
/* ★ 必须 :not(.dark) 限定 —— 否则这条会跟暗色的 html 背景「拼特异性」，
   现在虽然靠 html.dark 更高特异性压住了，但那是脆的，写明更安全。 */
html:not(.dark) { background: #fbf6f8 !important; }   /* 防横向溢出时露出 html 白底 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   B 案 · 夜航霓虹（html.dark / 暗色主题）
   站点右上角自带月亮图标 → 点击即加 .dark 类，本方案直接生效，无需另做切换器
   四家源站全是浅色系 —— 走暗色是最彻底的「不像他们」
   ═══════════════════════════════════════════════════════════════════════ */
html.dark {
  /* ★ color-scheme + html 底：没有这两条，原生控件（滚动条/下拉箭头/日期选择）
     仍是浅色，且页面横向溢出时右上角会露出 html 的白色背景 */
  color-scheme: dark !important;
  background: #0a0912 !important;

  /* ── 中性色板：**保持原生的明度顺序**（0 最浅 → 950 最深），整条压暗 + 偏紫。
       千万别反相！body 的页面底色就是 surface-950，反相 = 页面变白。
       括号内为站点原生值，改的时候对照着来：
         surface-0 #ffffff / 50 #fafafa / 100 #f4f4f5 / 200 #e4e4e7 / 300 #d4d4d8
         surface-400 #a1a1aa / 500 #71717a / 600 #52525b / 700 #3f3f46
         surface-800 #27272a / 900 #18181b / 950 #09090b                */
  --p-surface-0: #f8f6fc !important;
  --p-surface-50: #f0eef7 !important;
  --p-surface-100: #e6e4f0 !important;
  --p-surface-200: #cfccdf !important;
  --p-surface-300: #aeabc4 !important;
  --p-surface-400: #83809c !important;
  --p-surface-500: #605e79 !important;
  --p-surface-600: #474563 !important;
  --p-surface-700: #2f2d49 !important;
  --p-surface-800: #1e1c30 !important;
  --p-surface-900: #131122 !important;
  --p-surface-950: #0a0912 !important;

  /* ── 应用外壳（原生：main #0e0e10 / sidebar #0c0c14 / header #0d0d0f，
        原生 **侧栏比主区略深** —— 保持这个关系，三层才分得开） */
  --app-main-bg: #12111c !important;
  --app-sidebar-bg: #0c0b14 !important;
  --app-header-bg: #0e0d17 !important;
  --app-footer-bg: #0e0d17 !important;
  --app-shell-border: rgba(47, 45, 73, .75) !important;
  --app-sidebar-rail-hover: rgba(71, 69, 99, .5) !important;
  --app-scrollbar-thumb: #2f2d49 !important;
  --app-scrollbar-thumb-hover: #474563 !important;
  --app-image-avatar-stroke: #1e1c30 !important;

  /* 主色在暗底上要提亮，否则发闷（浅色 #ec4899 → 暗色 #f472b6） */
  --p-primary-color: #f472b6 !important;
}

/* B 案 · 设计语言 */
html.dark aside {
  background-image: linear-gradient(180deg, #16141f 0%, #0c0b14 45%, #09080f 100%) !important;
  border-right-color: rgba(47, 45, 73, .75) !important;
}
html.dark header[class*="bg-app-header"] {
  background-color: #0e0d17 !important;
  box-shadow: 0 1px 0 rgba(47, 45, 73, .75) !important;
}
html.dark [class*="hh-card-grid"] > * {
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6) !important;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease !important;
}
html.dark [class*="hh-card-grid"] > *:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px -24px rgba(244, 114, 182, .55) !important;
}
html.dark [class*="hh-card-grid"] img { border-radius: 16px !important; }

/* ── 暗色下补齐 PrimeVue 组件表面（下拉/输入/弹窗/菜单不会自己跟过来）
     ★ 这里必须写**字面色值**，不能用 var(--card) —— 本站没有 --card 这个变量，
       var() 解析失败会回落成 transparent，弹窗就会变成「看得见底下内容」的鬼影。 */
html.dark .p-select,
html.dark .p-select-panel,
html.dark .p-inputtext,
html.dark .p-textarea,
html.dark .p-dialog,
html.dark .p-popover,
html.dark .p-menu,
html.dark .p-overlaypanel,
html.dark .p-autocomplete-panel,
html.dark .p-dropdown,
html.dark .p-dropdown-panel {
  background: #16141f !important;
  color: #e8e6f2 !important;
  border-color: #2f2d49 !important;
}
html.dark .p-select-label,
html.dark .p-inputtext,
html.dark .p-menu-item-link {
  color: #e8e6f2 !important;
}
html.dark .p-select-option,
html.dark .p-menu-item-label {
  color: #d9d7e6 !important;
}
html.dark .p-menu-item:not(.p-disabled) .p-menu-item-link:hover,
html.dark .p-select-option:hover {
  background: #221f33 !important;
  color: #f9a8d4 !important;
}

/* ── 卡片内 iframe（opening_html）：白卡贴在黑底上会割裂，给一层柔和描边 */
html.dark iframe[class*="chat-html-frame"],
html.dark iframe[class*="chat-floating"] {
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px #2f2d49, 0 14px 40px -24px rgba(244, 114, 182, .4);
}

/* ═══════════════════════════════════════════════════════════════════════
   品牌标记（2026-09-24 换标）
   ───────────────────────────────────────────────────────────────────────
   母题是**横向构图**（墨迹宽高比 1.72:1），而侧栏槽位是方形：
     <span class="flex size-8 … rounded-lg bg-surface-0 dark:bg-surface-900">
       <img class="size-6 …" src="…/logo-mark-light.png">
   原站位图是近方形（251×261），撑得满；新标记在 24px 方槽里只剩
   22×13 px 的墨迹，存在感掉一档。所以把 <img> 的槽位放大一档
   （24 → 32px，即 size-6 → size-8），让它撑满外层 32px 的 chip。

   ★ 不动外层 chip 的 size-8：那玩意儿参与侧栏布局，改了会推挤导航。
   ★ 图片本身是 1:1 透明画布，`object-fit: fill`（Tailwind `size-*` 的默认）
     不会产生拉伸变形。
   ★ 只按 src 命中新资产名匹配，绝不误伤卡封面等其它 <img>。
   ═══════════════════════════════════════════════════════════════════════ */
img[src*="/brand/logo-mark-"] {
  width: 2rem !important;   /* 32px = size-8，与外层 chip 同宽 */
  height: 2rem !important;
  object-fit: contain !important;
}

/* AboutPage 的锁定组合：新组合比原站 "huohu.ai" 短（中文 4 字），
   h-12 下宽度从 214 变成 171 —— 给一档高度补偿，视觉重量回到同一水平。 */
img[src*="/brand/logo-lockup"] {
  height: 3.25rem !important;   /* 52px（原 h-10.5/md:h-12 = 42/48） */
}
@media (max-width: 767px) {
  img[src*="/brand/logo-lockup"] {
    height: 2.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   原站品牌橙残留 → 品牌粉（2026-09-24）
   ───────────────────────────────────────────────────────────────────────
   上一轮换肤只改了 PrimeVue 的 primary token（橙→粉），但站点自己的 CSS 里
   有几处**写死的 Tailwind 橙**，不吃 token，所以一直是橙的。真机实测：
   侧栏「发现」选中项的图标计算色 = rgb(236,101,8) = #ec6508。

   定位到的两处**纯品牌色**（都要换）：
     .sidebar-menu-button-active   侧栏选中项：橙字 + orange-100→orange-50 渐变
     .browser-compat-*             浏览器兼容提示条：橙底按钮 + 橙图标

   ★ 故意**不动**的橙色（换掉会破坏语义，不是品牌残留）：
     MinePage .wheel-* / .lottery-*   抽奖转盘的金橙色 = 「奖品/幸运」的通用语义色
     :root 里的 --color-orange-*      Tailwind 44 个色族整族都在，属于 token 定义
     HomePage .home-stage:before      首页 hero 的橙色径向光晕（装饰，待定）

   色阶对应关系（照原橙的层级平移，不是随手挑色）：
     light  #ec6508 → #ec4899 (primary)   #ffedd5→#fce7f3 (pink-100)
                                          #fff7ed→#fdf2f8 (pink-50)
     dark   #fb923c → #f472b6 (accent)    #fa612d2e→#ec48992e (同 alpha 结构)
     compat #c2410c → #be185d (pink-700)  #ea580c → #db2777 (pink-600)

   ★ 选择器**故意不带** Vue 的 scoped 属性（[data-v-xxxxxxxx]）：那个 hash
     每次重建都会变，写死就脆。原规则是「作者非 important」，而这里是
     「作者 !important」，按层叠规则一定赢，不依赖顺序也不需要匹配特异性。
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar-menu-button-active {
  color: #ec4899 !important;
  background: linear-gradient(90deg, #fce7f3 0%, #fdf2f8 100%) !important;
}
html.dark .sidebar-menu-button-active,
.dark .sidebar-menu-button-active {
  color: #f472b6 !important;
  background: linear-gradient(90deg, #ec48992e 0%, #ec489914 100%) !important;
}

.browser-compat-icon {
  color: #be185d !important;
  background: #fce7f3 !important;
}
.browser-compat-button-primary {
  color: #fff !important;
  background: #db2777 !important;
  border-color: #db2777 !important;
}
html.dark .browser-compat-icon,
.dark .browser-compat-icon {
  color: #f472b6 !important;
  background: #ec489929 !important;
}
html.dark .browser-compat-button-primary,
.dark .browser-compat-button-primary {
  color: #500724 !important;
  background: #f472b6 !important;
  border-color: #f472b6 !important;
}