@charset "UTF-8";
/* ============================================================================
 * 赛博活佛 · new-api 全站覆盖主题   cyber-huofo-theme.css
 * ----------------------------------------------------------------------------
 * 目标版本：new-api v1.0.0-rc.41
 *   前端：React 19 + Tailwind CSS v4 + shadcn/ui「base-nova」（Base UI 组件）
 *   暗色：<html class="dark">；用户外观偏好挂在 <body data-theme-*>
 * 视觉来源：cyber-huofo/brand/（home.html / about.html / footer.html / logo.svg）
 *   纸白底 + 紫色网点，墨黑描边 + 无模糊硬投影（暗色下投影换成替身紫），
 *   黄金主按钮、品红强调、青色聚焦，900 字重的粗黑标题。
 *
 * 文件分四层，换风格时只动 §1 和 §4：
 *   §1 品牌变量 --chf-*            ← 颜色/字体/圆角/描边/阴影/装饰都在这里（亮色一块、暗色一块）
 *   §2 映射                        ← 把 --chf-* 接到 shadcn 的 --background/--primary/…（一般不用动）
 *   §3 组件结构（@layer chf）      ← data-slot 选择器，只读变量，不写死任何颜色
 *   §4 装饰层（@layer chf）        ← 网点底纹、顶栏衬底、选区、滚动条、空状态/错误页小彩蛋
 *
 * 为什么不用改源码也能盖住：
 *   · Tailwind v4 的工具类全在 @layer utilities 里。本文件的组件规则放在最后声明的
 *     @layer chf，永远压过工具类；应用自己少数「不分层」的规则（卡片悬停、按下缩放等）
 *     仍然优先，§3b 单独处理。
 *   · 应用主题变量（theme.css 的 :root / .dark，权重 0,1,0）用 html:root（0,1,1）覆盖，
 *     本文件早于或晚于应用 CSS 加载都生效。
 *   · 组件参数统一写成 property: var(--chf-x, revert-layer)：变量没定义时回退到应用原样
 *     （Chromium / Firefox / WebKit 已实测）。所以 §1 删掉某个变量 = 该处恢复原样。
 *   · 需要保留 Tailwind 聚焦环时用「条件组合」：--chf-_x: var(--tw-ring-shadow), var(--token);
 *     token 没定义整组失效 → 回退原样；定义了 → 聚焦环保留、再叠加 token。
 *   · 用户在「外观设置」里手动选的预设配色/圆角/字体（body[data-theme-*]）仍以用户为准。
 *
 * 首页/关于页（品牌包 HTML）在 Shadow DOM 里渲染，应用会把 <head> 里的样式表复制进去，
 * 所以本文件也会进入那棵树：这里不定义任何品牌包用到的类名，裸标签规则一律排除
 * .chf-home / .chf-about。自定义类名统一用 chf-t- 前缀，避免和品牌包的 chf- 类撞名。
 * ========================================================================== */

/* 与应用编译产物的层顺序一致，chf 永远排在最后（比 utilities 高，比不分层的规则低）。 */
@layer properties, theme, base, components, utilities, chf;

/* ============================================================================
 * §1 品牌变量 —— 亮色
 *    :where() 权重为 0：任何后续的 :root{} / .dark{} 都能直接改写它们。
 * ========================================================================== */
:where(:root) {
  /* —— 品牌原色（与 brand/home.html 的 --ink/--purple/… 同值）—— */
  --chf-c-ink: #121016;
  --chf-c-purple: #6c2bd9;
  --chf-c-magenta: #e6007e;
  --chf-c-gold: #ffc93c;
  --chf-c-cyan: #00b8a9;
  --chf-c-paper: #fff7e6;
  --chf-c-night: #1b1030;

  /* —— 表面 —— */
  --chf-bg: var(--chf-c-paper);            /* 页面底（品牌纸白）           → --background */
  --chf-surface: #ffffff;                  /* 卡片、表格、输入框面板        → --card */
  --chf-surface-raised: #ffffff;           /* 弹窗、菜单、下拉              → --popover */
  --chf-subtle: #f7ebd3;                   /* 静音底：标签页底、骨架、代码块 → --muted */
  --chf-subtle-strong: #efe5ff;            /* 次级按钮/次级徽章底（淡替身紫）→ --secondary */
  --chf-sidebar: #fbefd6;                  /* 控制台侧栏（比页面略深的纸色）→ --sidebar */

  /* —— 文字与线 —— */
  --chf-ink: var(--chf-c-ink);             /* 正文                          → --foreground */
  --chf-ink-soft: #5b5266;                 /* 次要文字（纸白上 6.9:1）       → --muted-foreground */
  --chf-ink-faint: #6a6076;                /* 三级文字：替换应用里半透明的次要字（纸白上 5.5:1） */
  --chf-line: #e3d7c3;                     /* 细分隔线：表格行、分组线       → --border */
  --chf-line-input: #8e8399;               /* 开关未选中的轨道等             → --input */

  /* —— 品牌强调 —— */
  --chf-accent: var(--chf-c-purple);       /* 主色：开关/复选/进度/文字链接  → --primary */
  --chf-on-accent: #ffffff;                /* 主色上的字（7.0:1）            → --primary-foreground */
  --chf-accent-ink: #5a1fc2;               /* 淡紫底上的紫字                 → --secondary-foreground */
  --chf-accent-soft: #fff0c4;              /* 悬停/选中/菜单高亮（荧光笔金） → --accent */
  --chf-highlight: var(--chf-c-gold);      /* 主按钮、激活标签页、高光 */
  --chf-highlight-hover: #ffd45f;          /* 主按钮悬停 */
  --chf-on-highlight: var(--chf-c-ink);
  --chf-pop: var(--chf-c-magenta);         /* 品红：下划线、指示条、小标记 */
  --chf-focus: #008e82;                    /* 聚焦描边（青，纸白上 3.9:1）    → --ring */

  /* —— 状态（都按「当文字用」校过 AA）—— */
  --chf-danger: #c4005e;   --chf-on-danger: #ffffff;
  --chf-success: #00776c;  --chf-on-success: #ffffff;
  --chf-warning: #9a5b00;  --chf-on-warning: #ffffff;
  --chf-info: #5a1fc2;     --chf-on-info: #ffffff;
  --chf-neutral: #6f657d;  --chf-on-neutral: #ffffff;

  /* —— 图表 —— */
  --chf-chart-1: #6c2bd9;
  --chf-chart-2: #e6007e;
  --chf-chart-3: #e39b00;
  --chf-chart-4: #00a396;
  --chf-chart-5: #3d3270;

  /* —— 表格、骨架 —— */
  --chf-table-head-bg: #f7ebd3;
  --chf-table-head-hover: #f1e1c2;
  --chf-row-hover: #fff6da;
  --chf-row-selected: #f1e8ff;
  --chf-skeleton: #f3e6cc;
  --chf-skeleton-hi: #fbf3e3;

  /* —— 字体 —— */
  --chf-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    "Source Han Sans SC", system-ui, sans-serif;           /* 与品牌包正文同一套 */
  --chf-font-display: "CHF Display", "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;                          /* 标题：Noto Sans SC 900 子集（fonts.css） */
  --chf-font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* —— 形状：圆角 10px（按钮/输入 10px，卡片 14px，徽章胶囊，和品牌包一致）—— */
  --chf-radius: 0.625rem;

  /* —— 描边与硬投影（无模糊）—— */
  --chf-stroke: var(--chf-c-ink);          /* 面板/控件外框 */
  --chf-stroke-w: 2px;
  --chf-field-line: var(--chf-c-ink);      /* 输入框边框（需 ≥3:1） */
  --chf-field-bg: #ffffff;                 /* 输入框底 */
  --chf-outline-line: var(--chf-c-ink);    /* 描边按钮边框 */
  --chf-shadow-ink: var(--chf-c-ink);      /* 硬投影颜色；暗色换替身紫 */
  --chf-shadow-1: 2px 2px 0 0 var(--chf-shadow-ink);
  --chf-shadow-2: 4px 4px 0 0 var(--chf-shadow-ink);
  --chf-shadow-3: 6px 6px 0 0 var(--chf-shadow-ink);

  /* —— 装饰 —— */
  --chf-dots: rgb(108 43 217 / 0.16);      /* 漫画网点，与品牌首页同参数 */
  --chf-rays: rgb(108 43 217 / 0.12);      /* 集中线 */
  --chf-overlay: rgb(20 12 34 / 0.5);      /* 弹窗遮罩 */
  --chf-overlay-dots: rgb(255 201 60 / 0.16);
  --chf-scrollbar: #c9bce3 transparent;
  --chf-empty-quip: "四大皆空" / "";       /* 空状态小字（读屏不念） */

  /* —— 彩蛋脚本 cyber-huofo-fx.js 读这些（词库来自 brand/copy.md 第 9 节）—— */
  --chf-fx-words: "功德 +1|功德 +1|功德 +1|功德 +1|欧拉欧拉欧拉！|木鱼已敲，请求已发|功德 +10086|施主，缘分到了";
  --chf-fx-combo: "功德 +";
  --chf-fx-429: "这个 429，是替身攻击！";
  --chf-fx-offline: "心诚则灵，网不好则不灵";
  --chf-fx-color: var(--chf-c-gold);
  --chf-fx-outline: var(--chf-c-ink);

  /* —— 应用自带的悬停/按下动效：保留，只换成品牌硬投影 —— */
  --chf-card-shadow-hover: 0 0 0 var(--chf-stroke-w) var(--chf-stroke), 6px 6px 0 0 var(--chf-shadow-ink);
  --chf-card-lift: translate(-1px, -1px);
  --chf-press: scale(0.98);
}

/* ============================================================================
 * §1 品牌变量 —— 暗色（与 brand 的 .dark .chf-home 同值）
 * ========================================================================== */
:where(:root.dark) {
  --chf-bg: #140c22;
  --chf-surface: #21143a;
  --chf-surface-raised: #291a47;
  --chf-subtle: #2a1b4a;
  --chf-subtle-strong: #34215c;
  --chf-sidebar: #100919;

  --chf-ink: var(--chf-c-paper);
  --chf-ink-soft: #b9aecb;
  --chf-ink-faint: #9a8fae;
  --chf-line: rgb(255 247 230 / 0.12);
  --chf-line-input: #7c68a8;

  --chf-accent: #9d6bff;
  --chf-on-accent: var(--chf-c-ink);
  --chf-accent-ink: #e3d5ff;
  --chf-accent-soft: #3d2370;
  --chf-pop: #ff4fa3;
  --chf-focus: #2ee6d6;

  --chf-danger: #ff6fa8;   --chf-on-danger: var(--chf-c-ink);
  --chf-success: #3ddccb;  --chf-on-success: var(--chf-c-ink);
  --chf-warning: var(--chf-c-gold); --chf-on-warning: var(--chf-c-ink);
  --chf-info: #a98bff;     --chf-on-info: var(--chf-c-ink);
  --chf-neutral: #a79bbd;  --chf-on-neutral: var(--chf-c-ink);

  --chf-chart-1: #9d6bff;
  --chf-chart-2: #ff4fa3;
  --chf-chart-3: #ffc93c;
  --chf-chart-4: #2ee6d6;
  --chf-chart-5: #c9b8ff;

  --chf-table-head-bg: #2a1a48;
  --chf-table-head-hover: #33215a;
  --chf-row-hover: #2c1a50;
  --chf-row-selected: #382266;
  --chf-skeleton: #2a1b4a;
  --chf-skeleton-hi: #3a2860;

  --chf-stroke: #05030a;                   /* 品牌暗色：近黑描边 */
  --chf-field-line: #7c68a8;               /* 输入框在暗底上要 ≥3:1，改用薰衣草紫 */
  --chf-field-bg: #170e2b;
  --chf-outline-line: var(--chf-c-gold);   /* 同品牌 .dark .chf-b2：描边按钮换金边 */
  --chf-shadow-ink: var(--chf-c-purple);   /* 品牌暗色：硬投影是替身紫 */

  --chf-dots: rgb(255 201 60 / 0.1);
  --chf-rays: rgb(108 43 217 / 0.22);
  --chf-overlay: rgb(5 3 10 / 0.62);
  --chf-scrollbar: #4b3577 transparent;
  --chf-fx-outline: #05030a;
}

/* ============================================================================
 * §2 映射：shadcn 语义变量 ← --chf-*   （一般不用动）
 *    写在 html:root（0,1,1）上，压过应用 theme.css 的 :root / .dark（0,1,0）。
 *    亮暗色由 §1 的变量自己切换，这里只有一块。
 * ========================================================================== */
html:root {
  --background: var(--chf-bg);
  --foreground: var(--chf-ink);
  --card: var(--chf-surface);
  --card-foreground: var(--chf-ink);
  --popover: var(--chf-surface-raised);
  --popover-foreground: var(--chf-ink);
  --primary: var(--chf-accent);
  --primary-foreground: var(--chf-on-accent);
  --secondary: var(--chf-subtle-strong);
  --secondary-foreground: var(--chf-accent-ink);
  --muted: var(--chf-subtle);
  --muted-foreground: var(--chf-ink-soft);
  --accent: var(--chf-accent-soft);
  --accent-foreground: var(--chf-ink);
  --destructive: var(--chf-danger);
  --destructive-foreground: var(--chf-on-danger);
  --success: var(--chf-success);
  --success-foreground: var(--chf-on-success);
  --warning: var(--chf-warning);
  --warning-foreground: var(--chf-on-warning);
  --info: var(--chf-info);
  --info-foreground: var(--chf-on-info);
  --neutral: var(--chf-neutral);
  --neutral-foreground: var(--chf-on-neutral);
  --border: var(--chf-line);
  --input: var(--chf-line-input);
  --ring: var(--chf-focus);
  --chart-1: var(--chf-chart-1);
  --chart-2: var(--chf-chart-2);
  --chart-3: var(--chf-chart-3);
  --chart-4: var(--chf-chart-4);
  --chart-5: var(--chf-chart-5);
  --overview-accent-1: var(--chf-chart-1);
  --overview-accent-2: var(--chf-chart-4);
  --overview-accent-3: var(--chf-chart-2);
  --sidebar: var(--chf-sidebar);
  --sidebar-foreground: var(--chf-ink);
  --sidebar-primary: var(--chf-accent);
  --sidebar-primary-foreground: var(--chf-on-accent);
  --sidebar-accent: var(--chf-accent-soft);
  --sidebar-accent-foreground: var(--chf-ink);
  --sidebar-border: var(--chf-line);
  --sidebar-ring: var(--chf-focus);
  --skeleton-base: var(--chf-skeleton);
  --skeleton-highlight: var(--chf-skeleton-hi);
  --table-header: var(--chf-table-head-bg);
  --table-header-hover: var(--chf-table-head-hover);
  --radius: var(--chf-radius);
  --font-sans: var(--chf-font-body);
  --font-mono: var(--chf-font-mono);
}

/* ============================================================================
 * §3 组件结构（只读变量）
 * ========================================================================== */
@layer chf {
  /* ---------- 3.1 标题：卡片/弹窗/抽屉/浮层/空状态 ---------- */
  :is([data-slot='card-title'], [data-slot='dialog-title'], [data-slot='alert-dialog-title'],
      [data-slot='sheet-title'], [data-slot='drawer-title'], [data-slot='popover-title'],
      [data-slot='empty-title']) {
    font-family: var(--chf-font-title, var(--chf-font-display, revert-layer));
    font-weight: var(--chf-title-weight, 900);
    letter-spacing: var(--chf-title-tracking, 0.01em);
  }

  /* ---------- 3.2 应用页面标题 h1/h2（品牌包容器内一律不碰）---------- */
  :is(h1, h2):not(:where(.chf-home, .chf-about) *):not(.font-mono) {
    font-family: var(--chf-font-heading, var(--chf-font-display, revert-layer));
    font-weight: var(--chf-heading-weight, 900);
    font-style: var(--chf-heading-style, italic);   /* 品牌标题是斜的：用斜体而不是 skew，不会把按钮/图标一起拉歪 */
    letter-spacing: var(--chf-heading-tracking, 0.01em);
  }
  /* 大号头图标题（模型广场、默认首页、错误页数字）：金字 + 墨黑描边 + 品红/墨黑叠影，同品牌 h1 */
  :is(h1, h2):not(:where(.chf-home, .chf-about) *):is([class*='text-[clamp('], .text-\[7rem\]) {
    color: var(--chf-c-gold);
    -webkit-text-stroke: 0.06em var(--chf-c-ink);
    paint-order: stroke fill;
    text-shadow: 0.06em 0.06em 0 var(--chf-c-magenta), 0.11em 0.11em 0 var(--chf-c-ink);
    letter-spacing: 0.02em;
  }

  /* ---------- 3.3 站点名（公共顶栏 + 控制台顶栏 + 登录页左上角）---------- */
  .\@container\/system-brand span.truncate:not(.font-mono),
  a.absolute.top-4.left-4 > h1 {
    font-family: var(--chf-font-brand, var(--chf-font-display, revert-layer));
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0.04em;
  }
  /* 标志是圆角方形（品牌规定），登录页原来裁成圆形会切掉佛光 */
  a.absolute.top-4.left-4 img.rounded-full { border-radius: 22%; }

  /* ---------- 3.4 按钮 ---------- */
  .group\/button {
    font-weight: var(--chf-btn-weight, 800);
    letter-spacing: var(--chf-btn-tracking, 0.02em);
  }
  /* 主按钮：黄金底 + 墨黑字 + 墨黑描边 + 硬投影（品牌 .chf-b1）。悬停上浮、按下压进投影。
   * 拼接在一起的按钮组（button-group）不加投影和位移，免得一格一格错位。 */
  .group\/button.bg-primary {
    background-color: var(--chf-btn-bg, var(--chf-highlight));
    color: var(--chf-btn-ink, var(--chf-on-highlight));
    transition: background-color 0.12s, box-shadow 0.08s, translate 0.08s;
  }
  .group\/button.bg-primary:not([data-slot='button-group'] > *) {
    --chf-_btn: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
      0 0 0 var(--chf-stroke-w) var(--chf-stroke), var(--chf-btn-shadow, 3px 3px 0 0 var(--chf-shadow-ink));
    box-shadow: var(--chf-_btn, revert-layer);
  }
  .group\/button.bg-primary:hover:not(:disabled) {
    background-color: var(--chf-btn-bg-hover, var(--chf-highlight-hover));
  }
  .group\/button.bg-primary:hover:not(:disabled):not([data-slot='button-group'] > *) {
    --chf-_btn-h: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
      0 0 0 var(--chf-stroke-w) var(--chf-stroke), 5px 5px 0 0 var(--chf-shadow-ink);
    box-shadow: var(--chf-_btn-h, revert-layer);
  }
  /* 描边/次级按钮：面板底 + 描边 + 小硬投影（品牌 .chf-b2；暗色描边换金色） */
  .group\/button:is(.border-border, .bg-secondary):not([data-slot='button-group'] > *):not(.h-6, .h-7, .size-6, .size-7) {
    --chf-_btn2: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--chf-btn2-shadow, 2px 2px 0 0 var(--chf-shadow-ink));
    box-shadow: var(--chf-_btn2, revert-layer);
  }
  .group\/button.border-border { border-color: var(--chf-outline-line); }
  .group\/button.bg-secondary { border-color: var(--chf-stroke); }
  /* 文字链接按钮：品红下划线（品牌链接写法） */
  .group\/button.underline-offset-4 {
    text-decoration-color: var(--chf-pop);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .group\/button:is(.bg-primary, .border-border, .bg-secondary):hover:not(:disabled):not(:active):not([data-slot='button-group'] > *) {
      translate: var(--chf-btn-lift, -1px -1px);
    }
    .group\/button.bg-primary:active:not(:disabled):not([data-slot='button-group'] > *) { translate: 2px 2px; }
  }
  .group\/button.bg-primary:active:not(:disabled):not([data-slot='button-group'] > *) {
    --chf-_btn-a: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 var(--chf-stroke-w) var(--chf-stroke);
    box-shadow: var(--chf-_btn-a, revert-layer);
  }

  /* ---------- 3.5 输入类控件 ----------
   * 表单里的控件会被 FormControl 改写成 data-slot='form-control'，所以再用 .border-input 认一次
   * （复选/单选/开关也带这个类，按 role 排除）。 */
  :is([data-slot='input'], [data-slot='textarea'], [data-slot='select-trigger'],
      [data-slot='native-select'], [data-slot='input-group'], [data-slot='combobox-trigger'],
      [data-slot='input-otp-slot'],
      [data-slot='form-control'].border-input:not([role='checkbox'], [role='radio'], [role='switch'])
     ):not([data-slot='input-group'] *) {
    border-color: var(--chf-field-line);
  }
  :is([data-slot='input'], [data-slot='textarea'], [data-slot='select-trigger'],
      [data-slot='native-select'], [data-slot='input-group'],
      [data-slot='form-control'].border-input:not([role='checkbox'], [role='radio'], [role='switch'])
     ).border:not([data-slot='input-group'] *) {
    border-width: var(--chf-field-border-w, var(--chf-stroke-w));
  }
  :is([data-slot='input'], [data-slot='textarea'], [data-slot='select-trigger'],
      [data-slot='native-select'], [data-slot='input-group'],
      [data-slot='form-control'].border-input:not([role='checkbox'], [role='radio'], [role='switch'])
     ):not([data-slot='input-group'] *):not(:disabled) {
    background-color: var(--chf-field-bg, revert-layer);
  }
  :is([data-slot='input'], [data-slot='textarea'], [data-slot='form-control'].border-input):is([aria-invalid='true']),
  [data-slot='input-group']:has([aria-invalid='true']) {
    border-color: var(--destructive);
  }
  :is([data-slot='checkbox'], [data-slot='radio-group-item'],
      [data-slot='form-control']:is([role='checkbox'], [role='radio'])):not([data-checked]) {
    border-color: var(--chf-field-line);
    border-width: var(--chf-stroke-w);
  }
  [data-slot='switch'] {
    --chf-_sw: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 var(--chf-switch-ring, 1.5px) var(--chf-stroke);
    box-shadow: var(--chf-_sw, revert-layer);
  }

  /* ---------- 3.6 面板：卡片 ---------- */
  [data-slot='card'].ring-foreground\/10 { --tw-ring-color: var(--chf-card-stroke, var(--chf-stroke)); }
  [data-slot='card'].ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--chf-card-stroke-w, var(--chf-stroke-w)) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    --chf-_card: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--chf-card-shadow, var(--chf-shadow-2));
    box-shadow: var(--chf-_card, revert-layer);
  }
  /* 卡片套卡片：里面那层只留描边，不再叠投影 */
  [data-slot='card'] [data-slot='card'].ring-1 {
    --chf-_card: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
  }
  [data-slot='card-footer'] { border-top-color: var(--chf-line); }

  /* 控制台里不是 Card 组件、自己写的面板（仪表盘各块 rounded-2xl border bg-card shadow-xs），
   * 数据表外框（rounded-lg border overflow-hidden，里面直接是表格）：同样做成漫画分格。 */
  .rounded-2xl.border.bg-card.shadow-xs,
  .bg-card.overflow-hidden.rounded-lg.border,
  .overflow-hidden.rounded-lg.border:has([data-slot='table']),
  .bg-card.rounded-xl.border,
  .space-y-2.rounded-xl.border.p-3\.5 {
    border-color: var(--chf-stroke);
    border-width: var(--chf-stroke-w);
    --chf-_pnl: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--chf-panel-shadow, var(--chf-shadow-2));
    box-shadow: var(--chf-_pnl, revert-layer);
  }
  /* 表格上方的筛选条：只描边、不加投影 */
  .bg-card\/50.rounded-lg.border { border-color: var(--chf-stroke); border-width: var(--chf-stroke-w); }
  /* 其它自定义的「像输入框」的触发器（日期范围等）：认 border-input 类 */
  .border.border-input:not([role='checkbox'], [role='radio'], [role='switch']):not([data-slot='input-group'] *) {
    border-color: var(--chf-field-line);
    border-width: var(--chf-field-border-w, var(--chf-stroke-w));
  }

  /* ---------- 3.7 浮层：弹出框/菜单/下拉/悬停卡片 ---------- */
  :is([data-slot='popover-content'], [data-slot='hover-card-content'], [data-slot='dropdown-menu-content'],
      [data-slot='dropdown-menu-sub-content'], [data-slot='context-menu-content'],
      [data-slot='context-menu-sub-content'], [data-slot='menubar-content'], [data-slot='select-content'],
      [data-slot='combobox-content']).ring-foreground\/10 {
    --tw-ring-color: var(--chf-pop-stroke, var(--chf-stroke));
  }
  :is([data-slot='popover-content'], [data-slot='hover-card-content'], [data-slot='dropdown-menu-content'],
      [data-slot='dropdown-menu-sub-content'], [data-slot='context-menu-content'],
      [data-slot='context-menu-sub-content'], [data-slot='menubar-content'], [data-slot='select-content'],
      [data-slot='combobox-content']).ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--chf-stroke-w) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    --chf-_pop: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--chf-pop-shadow, var(--chf-shadow-2));
    box-shadow: var(--chf-_pop, revert-layer);
  }

  /* ---------- 3.8 弹窗/确认框/侧板/抽屉 ---------- */
  :is([data-slot='dialog-content'], [data-slot='alert-dialog-content']).ring-foreground\/10 {
    --tw-ring-color: var(--chf-dialog-stroke, var(--chf-stroke));
  }
  :is([data-slot='dialog-content'], [data-slot='alert-dialog-content']).ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--chf-stroke-w) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    --chf-_dlg: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--chf-dialog-shadow, var(--chf-shadow-3));
    box-shadow: var(--chf-_dlg, revert-layer);
  }
  :is([data-slot='sheet-content'], [data-slot='drawer-content']) { border-color: var(--chf-stroke); }
  [data-slot='sheet-content'][data-side='right'] { border-left-width: var(--chf-stroke-w); box-shadow: -6px 0 0 0 var(--chf-shadow-ink); }
  [data-slot='sheet-content'][data-side='left'] { border-right-width: var(--chf-stroke-w); box-shadow: 6px 0 0 0 var(--chf-shadow-ink); }
  [data-slot='sheet-content'][data-side='bottom'] { border-top-width: var(--chf-stroke-w); box-shadow: 0 -6px 0 0 var(--chf-shadow-ink); }
  [data-slot='sheet-content'][data-side='top'] { border-bottom-width: var(--chf-stroke-w); box-shadow: 0 6px 0 0 var(--chf-shadow-ink); }
  /* 遮罩：夜紫半透明 + 金色网点（像漫画的网点纸），不做模糊，保持干脆 */
  :is([data-slot='dialog-overlay'], [data-slot='alert-dialog-overlay'], [data-slot='sheet-overlay'],
      [data-slot='drawer-overlay']) {
    background-color: var(--chf-overlay, revert-layer);
    background-image: radial-gradient(var(--chf-overlay-dots) 1.4px, transparent 1.6px);
    background-size: 12px 12px;
    backdrop-filter: var(--chf-overlay-filter, none);
    -webkit-backdrop-filter: var(--chf-overlay-filter, none);
  }

  /* ---------- 3.9 标签页 ---------- */
  [data-slot='tabs-list'].bg-muted {
    --chf-_tabs: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 var(--chf-stroke-w) var(--chf-stroke);
    box-shadow: var(--chf-_tabs, revert-layer);
  }
  [data-slot='tabs-list']:not([data-variant='line']) > [data-slot='tabs-trigger'][data-active] {
    --chf-_tab: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 var(--chf-stroke-w) var(--chf-stroke);
    background-color: var(--chf-tab-active-bg, var(--chf-highlight));
    color: var(--chf-tab-active-ink, var(--chf-on-highlight));
    border-color: transparent;
    box-shadow: var(--chf-_tab, revert-layer);
  }
  [data-slot='tabs-trigger'] { font-weight: 800; }
  [data-slot='tabs-list'][data-variant='line'] > [data-slot='tabs-trigger'][data-active]::after {
    background-color: var(--chf-pop);
  }

  /* ---------- 3.10 徽章 ---------- */
  [data-slot='badge'] { font-weight: 800; letter-spacing: 0.02em; }
  [data-slot='badge'].border-transparent { border-color: color-mix(in oklab, currentColor 32%, transparent); }

  /* ---------- 3.11 表格 ---------- */
  [data-slot='table-head'] {
    font-weight: 800;
    color: var(--chf-ink);
    letter-spacing: 0.02em;
  }
  [data-slot='table-header'] > [data-slot='table-row'] {
    border-bottom: var(--chf-stroke-w) solid var(--chf-stroke);
  }
  [data-slot='table-body'] > [data-slot='table-row']:hover { background-color: var(--chf-row-hover, revert-layer); }
  [data-slot='table-body'] > [data-slot='table-row'][data-state='selected'] {
    background-color: var(--chf-row-selected, revert-layer);
  }

  /* ---------- 3.12 控制台侧栏 ---------- */
  :is([data-slot='sidebar-menu-button'], [data-slot='sidebar-menu-sub-button'])[data-active]:not([data-active='false']) {
    --chf-_nav: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), inset 3px 0 0 0 var(--chf-nav-indicator, var(--chf-pop));
    box-shadow: var(--chf-_nav, revert-layer);
    font-weight: 800;
  }
  [data-slot='sidebar-inset'] {
    --chf-_inset: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
      0 0 0 var(--chf-stroke-w) var(--chf-stroke), var(--chf-shadow-2);
  }
  @media (min-width: 768px) {
    [data-slot='sidebar-wrapper']:has([data-variant='inset']) [data-slot='sidebar-inset'] {
      box-shadow: var(--chf-_inset, revert-layer);
    }
  }

  /* ---------- 3.13 顶栏 ---------- */
  /* 公共顶栏滚动后的悬浮条：面板底 + 描边 + 硬投影 */
  header.fixed.top-0 nav.backdrop-blur-2xl {
    --tw-ring-shadow: 0 0 0 var(--chf-stroke-w) var(--chf-stroke);
    --chf-_hdr: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--chf-shadow-1);
    background-color: color-mix(in oklab, var(--chf-surface) 86%, transparent);
    box-shadow: var(--chf-_hdr, revert-layer);
  }
  /* 当前页：加粗 + 品红下划线（应用用 text-foreground 标当前页） */
  header.fixed.top-0 nav a.text-foreground:not(.text-muted-foreground) {
    font-weight: 900;
    text-decoration: underline 3px var(--chf-pop);
    text-underline-offset: 7px;
  }

  /* ---------- 3.14 登录/注册：表单区做成一格漫画面板（≥640px）---------- */
  @media (min-width: 640px) {
    .relative.grid.h-svh > .container > .sm\:w-\[480px\] {
      background-color: var(--chf-surface);
      border-radius: calc(var(--radius) * 1.4);
      box-shadow: 0 0 0 var(--chf-stroke-w) var(--chf-stroke), var(--chf-shadow-3);
    }
  }

  /* ---------- 3.15 其它小件 ---------- */
  [data-slot='tooltip-content'] { box-shadow: 2px 2px 0 0 var(--chf-pop); font-weight: 600; }
  [data-slot='progress-indicator'] {
    background-image: linear-gradient(90deg, var(--chf-c-gold), var(--chf-c-magenta));
  }
  [data-slot='avatar'] { box-shadow: 0 0 0 2px var(--chf-highlight); }   /* 佛光圈 */
  [data-slot='kbd'] { box-shadow: 0 0 0 1px var(--chf-stroke), 0 1px 0 1px var(--chf-stroke); }
  [data-slot='empty'].border-dashed { border-color: color-mix(in oklab, var(--chf-ink) 35%, transparent); border-width: var(--chf-stroke-w); }
  [data-slot='skeleton'] { border-radius: calc(var(--radius) * 0.6); }

  /* ---------- 3.16 对比度兜底 ----------
   * 应用里很多次要文字是「次要色再打七折」（text-muted-foreground/70 之类），落在纸白底上不到 4.5:1。
   * 换成不透明的三级文字色；/40 以下的多为装饰或禁用态，不动。 */
  :is(.text-muted-foreground\/45, .text-muted-foreground\/50, .text-muted-foreground\/60,
      .text-muted-foreground\/70, .text-muted-foreground\/80) { color: var(--chf-ink-faint); }
  :is(.text-foreground\/55, .text-foreground\/60, .text-foreground\/70, .text-foreground\/75,
      .text-foreground\/80, .text-foreground\/85, .text-foreground\/90, .text-sidebar-foreground\/70) {
    color: var(--chf-ink-soft);
  }
  /* 亮色下，应用直接用 Tailwind 调色板写的状态文字（琥珀/绿/红/蓝 500–600）多数达不到 AA，
   * 统一到品牌的状态色（同色系、≥4.5:1）。暗色下应用自己会换 400 档，不动。 */
  :root:not(.dark) :is(.text-amber-500, .text-amber-600, .text-yellow-600, .text-orange-500) { color: var(--chf-warning); }
  :root:not(.dark) :is(.text-emerald-500, .text-emerald-600, .text-green-500, .text-green-600) { color: var(--chf-success); }
  :root:not(.dark) :is(.text-red-500, .text-red-600, .text-rose-500, .text-rose-600) { color: var(--chf-danger); }
  :root:not(.dark) :is(.text-blue-500, .text-blue-600, .text-sky-500) { color: var(--chf-info); }

  /* 提示条（sonner）：它的样式是运行时注入的、不分层，所以这里用分层的 !important 去压 */
  .toaster [data-sonner-toast][data-styled='true'] {
    border: var(--chf-stroke-w) solid var(--chf-stroke) !important;
    box-shadow: var(--chf-shadow-2) !important;
  }
}

/* ============================================================================
 * §3b 应用自己「不分层」的动效：保留行为，换成品牌参数（默认值 = 品牌硬投影）
 * ========================================================================== */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  html:root [data-slot='card']:not([data-card-hover='false']):hover {
    transform: var(--chf-card-lift);
    box-shadow: var(--chf-card-shadow-hover);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html:root :is(button, [role='button']):not(:disabled):active { transform: var(--chf-press); }
}

/* ============================================================================
 * §4 装饰层（换风格时可整段替换）
 * ========================================================================== */
@layer chf {
  /* 4.1 页面网点：固定在最底层（z-index:-1），只在空白处露出来，不挡任何内容。
   *     首页/关于页的品牌片段自带底色和网点，会把它盖住，不会出现两层网点。 */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--chf-dots) 1.6px, transparent 1.8px);
    background-size: 12px 12px;
  }

  /* 4.2 公共顶栏衬底：顶栏透明、浮在内容上（64px）。加一条从页面底色淡出的渐变，
   *     首页/关于页头图上的光芒、拟声字从顶栏下面经过时，文字依然清楚。滚动出悬浮条后隐藏。 */
  header.fixed.top-0::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 84px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--background) 94%, transparent) 0%,
      color-mix(in oklab, var(--background) 72%, transparent) 62%,
      transparent 100%);
    transition: opacity 0.3s;
  }
  header.fixed.top-0:has(nav.backdrop-blur-2xl)::before { opacity: 0; }

  /* 4.3 空状态：图标后面一圈集中线 + 一行「四大皆空」小字（读屏不念） */
  [data-slot='empty-icon'] {
    background-image: repeating-conic-gradient(var(--chf-rays) 0deg 6deg, transparent 6deg 15deg);
  }
  [data-slot='empty-description']::after {
    content: var(--chf-empty-quip, none);
    display: block;
    margin-top: 0.4em;
    font-family: var(--chf-font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 0.85em;
    letter-spacing: 0.3em;
    color: var(--chf-accent);
    opacity: 0.75;
  }

  /* 4.4 错误页大数字旁边的「ゴゴゴゴ」（装饰，读屏不念） */
  h1.text-\[7rem\] { position: relative; display: inline-block; }
  h1.text-\[7rem\]::after {
    content: "ゴゴゴゴ" / "";
    position: absolute;
    left: 100%;
    top: 0.15em;
    margin-left: 0.15em;
    font-size: 0.28em;
    line-height: 1;
    color: var(--chf-accent);
    -webkit-text-stroke: 0.05em var(--chf-bg);
    text-shadow: none;
    writing-mode: vertical-rl;
    white-space: nowrap;
    pointer-events: none;
  }

  /* 4.5 选区、滚动条、聚焦 */
  ::selection { background-color: var(--chf-c-gold); color: var(--chf-c-ink); }
  :root { color-scheme: light; }
  :root.dark { color-scheme: dark; }
  *:not(.hover-scrollbar):not(.no-scrollbar) { scrollbar-color: var(--chf-scrollbar); }
  :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex='-1']),
         [role='button'], [role='tab'], [role='switch'], [role='checkbox'], [role='radio']):focus-visible {
    outline: 2px solid var(--chf-focus);
    outline-offset: 2px;
  }

  /* 4.6 主题自己的工具类（chf-t- 前缀，避免与品牌包撞名；彩蛋脚本也用它们）*/
  .chf-t-display { font-family: var(--chf-font-display); font-weight: 900; }
  .chf-t-panel {
    background: var(--card);
    color: var(--card-foreground);
    border-radius: calc(var(--radius) * 1.4);
    box-shadow: 0 0 0 var(--chf-stroke-w) var(--chf-stroke), var(--chf-shadow-2);
  }
}

/* 减少动画：只关掉本文件自己加的过渡（位移本来就只在 no-preference 下才有）。
 * 注意不能清 translate：Tailwind v4 的 -translate-y-1/2 等定位也用这个属性。 */
@media (prefers-reduced-motion: reduce) {
  @layer chf {
    .group\/button.bg-primary { transition: none; }
    header.fixed.top-0::before { transition: none; }
  }
}