/* ============================================================================
 *  NEON GRID —— New API 科技感主题（深空霓虹 + 玻璃拟态 + 网格光晕）
 *  ---------------------------------------------------------------------------
 *  适用：QuantumNous/new-api v1.0.0-rc.x（shadcn + Tailwind v4 + oklch 变量体系）
 *  原理：新版前端把全部配色抽成 CSS 变量，本文件只覆盖变量 + 追加表现层样式，
 *        不改任何 React 组件，因此升级不会冲突。
 *
 *  三种用法：
 *   1) 改源码（推荐）
 *        cp neon-grid.css web/src/styles/
 *        在 web/src/main.tsx 的最后一行加： import './styles/neon-grid.css'
 *        然后 pnpm build
 *   2) 反向代理注入（不改源码）
 *        nginx: sub_filter '</head>' '<link rel="stylesheet" href="/custom.css"></head>';
 *   3) 做成后台可切换的预设
 *        把下面第 1 节的变量块贴进 web/src/styles/theme-presets.css，
 *        选择器改成 [data-theme-preset='neon-grid'] 与 .dark [data-theme-preset='neon-grid']，
 *        再到 web/src/lib/theme-customization.ts 的预设列表里注册 neon-grid。
 *
 *  调参入口：只改第 1 节里的 --neon-* 五个锚点色，整站配色自动跟着变。
 * ============================================================================ */

/* ==========================================================================
 * 0. 主题锚点（改这里就够了）
 * --------------------------------------------------------------------------
 *  当前 = 剑齿虎API 品牌配色（冰河蓝 + 獠牙琥珀 + 兽橙点缀）
 *  想换风格只改下面三个色相：
 *    · 冰河猛兽（默认，剑齿虎）  primary 235 / accent 78  / warn 78
 *    · 赛博紫青（通用科技风）    primary 288 / accent 195 / warn 78
 *    · 暗金商务                  primary 250 / accent 70  / warn 55
 * ========================================================================== */
:root,
:root.dark {
  --neon-hue-primary: 235; /* 主色相：冰河蓝（70=金 / 195=青 / 235=冰蓝 / 288=紫） */
  --neon-hue-accent: 78;   /* 强调色相：獠牙琥珀（只给 CTA / 关键数字 / 图表第二色） */
  --neon-hue-warn: 78;     /* 警告：琥珀（与强调同源，警示色天然合理） */
  --neon-chroma: 0.22;     /* 饱和强度：0.16 克制 / 0.22 标准 / 0.28 激进 */
  --neon-blur: 14px;       /* 玻璃模糊半径 */
}

/* ==========================================================================
 * 1. 变量覆盖
 *    四组选择器的组合是为了压过 [data-theme-preset] 与 .dark 祖先选择器：
 *      :root              → 默认主题
 *      body               → 有预设时变量落在 body 上
 *      body[preset]       → 用户切了别的预设
 *      html.dark body[preset] → 暗色 + 预设（特异性最高）
 * ========================================================================== */

/* ---------------------------- 浅色：冷白科技 ---------------------------- */
:root,
body,
body[data-theme-preset] {
  --background: oklch(0.982 0.006 265);
  --foreground: oklch(0.19 0.028 265);
  --card: oklch(1 0 0 / 0.82);
  --card-foreground: oklch(0.19 0.028 265);
  --popover: oklch(0.995 0.004 265);
  --popover-foreground: oklch(0.19 0.028 265);

  --primary: oklch(0.58 calc(var(--neon-chroma) * 0.9) var(--neon-hue-primary));
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.94 0.012 265);
  --secondary-foreground: oklch(0.32 0.05 265);
  --muted: oklch(0.955 0.008 265);
  --muted-foreground: oklch(0.5 0.02 265);
  --accent: color-mix(in oklch, var(--primary) 10%, var(--background));
  --accent-foreground: oklch(0.24 0.04 265);

  --destructive: oklch(0.6 0.22 22);
  --destructive-foreground: oklch(0.99 0 0);
  --success: oklch(0.62 0.16 158);
  --success-foreground: oklch(0.99 0 0);
  --warning: oklch(0.75 calc(var(--neon-chroma) * 0.7) var(--neon-hue-warn));
  --warning-foreground: oklch(0.18 0 0);
  --info: oklch(0.6 calc(var(--neon-chroma) * 0.8) var(--neon-hue-accent));
  --info-foreground: oklch(0.99 0 0);
  --neutral: oklch(0.7 0.01 265);
  --neutral-foreground: oklch(0.2 0 0);

  --border: color-mix(in oklch, var(--foreground) 12%, transparent);
  --input: color-mix(in oklch, var(--foreground) 16%, transparent);
  --ring: oklch(0.62 var(--neon-chroma) var(--neon-hue-primary));

  --chart-1: oklch(0.62 var(--neon-chroma) var(--neon-hue-primary));
  --chart-2: oklch(0.66 var(--neon-chroma) var(--neon-hue-accent));
  --chart-3: oklch(0.64 0.2 330);
  --chart-4: oklch(0.7 0.16 158);
  --chart-5: oklch(0.74 0.15 var(--neon-hue-warn));
  --overview-accent-1: var(--chart-1);
  --overview-accent-2: var(--chart-2);
  --overview-accent-3: var(--chart-3);

  --sidebar: oklch(0.975 0.008 265);
  --sidebar-foreground: oklch(0.24 0.03 265);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: color-mix(in oklch, var(--primary) 12%, var(--background));
  --sidebar-accent-foreground: oklch(0.3 0.06 265);
  --sidebar-border: color-mix(in oklch, var(--foreground) 10%, transparent);
  --sidebar-ring: var(--ring);

  --skeleton-base: oklch(0.955 0.008 265);
  --skeleton-highlight: oklch(0.99 0.004 265);
  --table-row: transparent;
  --table-header: color-mix(in oklch, var(--foreground) 3%, transparent);
  --table-header-hover: color-mix(in oklch, var(--foreground) 5%, transparent);
  --table-disabled: color-mix(in oklch, var(--foreground) 4%, transparent);
  --table-disabled-hover: color-mix(in oklch, var(--foreground) 6%, transparent);
  --table-disabled-border: color-mix(in oklch, var(--foreground) 18%, transparent);

  --radius: 0.75rem;
  --font-ui-sans: 'Inter', 'Geist', 'HarmonyOS Sans SC', 'MiSans', 'PingFang SC',
    'Microsoft YaHei', system-ui, -apple-system, sans-serif;
}

/* ---------------------------- 暗色：深空霓虹 ---------------------------- */
:root.dark,
html.dark body,
html.dark body[data-theme-preset] {
  color-scheme: dark;

  --background: oklch(0.21 0.026 252);
  --foreground: oklch(0.965 0.012 250);
  --card: oklch(0.262 0.028 252 / 0.78);
  --card-foreground: oklch(0.965 0.012 250);
  --popover: oklch(0.285 0.03 252 / 0.97);
  --popover-foreground: oklch(0.965 0.012 250);

  --primary: oklch(0.7 calc(var(--neon-chroma) * 1.05) var(--neon-hue-primary));
  --primary-foreground: oklch(0.16 0.03 252);
  --secondary: oklch(0.312 0.03 252);
  --secondary-foreground: oklch(0.93 0.02 255);
  --muted: oklch(0.292 0.026 252);
  --muted-foreground: oklch(0.795 0.02 252);
  --accent: color-mix(in oklch, var(--primary) 20%, var(--background));
  --accent-foreground: oklch(0.985 0.01 250);

  --destructive: oklch(0.68 0.2 22);
  --destructive-foreground: oklch(0.99 0 0);
  --success: oklch(0.76 0.17 160);
  --success-foreground: oklch(0.14 0.02 160);
  --warning: oklch(0.82 calc(var(--neon-chroma) * 0.72) var(--neon-hue-warn));
  --warning-foreground: oklch(0.16 0.02 78);
  --info: oklch(0.76 calc(var(--neon-chroma) * 0.85) var(--neon-hue-accent));
  --info-foreground: oklch(0.14 0.02 195);
  --neutral: oklch(0.72 0.012 260);
  --neutral-foreground: oklch(0.16 0 0);

  --border: oklch(0.74 0.06 252 / 0.3);
  --input: oklch(0.74 0.06 252 / 0.38);
  --ring: oklch(0.78 calc(var(--neon-chroma) * 0.9) var(--neon-hue-accent));

  --chart-1: oklch(0.78 var(--neon-chroma) var(--neon-hue-accent));
  --chart-2: oklch(0.72 calc(var(--neon-chroma) * 1.1) var(--neon-hue-primary));
  --chart-3: oklch(0.76 0.19 330);
  --chart-4: oklch(0.82 0.16 158);
  --chart-5: oklch(0.86 0.14 var(--neon-hue-warn));
  --overview-accent-1: var(--chart-1);
  --overview-accent-2: var(--chart-2);
  --overview-accent-3: var(--chart-3);

  --sidebar: oklch(0.19 0.024 252 / 0.92);
  --sidebar-foreground: oklch(0.95 0.012 255);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: oklch(0.16 0.03 252);
  --sidebar-accent: color-mix(in oklch, var(--primary) 22%, var(--background));
  --sidebar-accent-foreground: oklch(0.97 0.02 285);
  --sidebar-border: oklch(0.74 0.06 252 / 0.28);
  --sidebar-ring: var(--ring);

  --skeleton-base: oklch(0.295 0.028 252);
  --skeleton-highlight: oklch(0.4 0.05 252 / 0.8);
  --table-row: transparent;
  --table-header: color-mix(in oklch, var(--foreground) 7%, transparent);
  --table-header-hover: color-mix(in oklch, var(--foreground) 10%, transparent);
  --table-disabled: color-mix(in oklch, var(--foreground) 8%, transparent);
  --table-disabled-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
  --table-disabled-border: color-mix(in oklch, var(--foreground) 22%, transparent);
}

/* ==========================================================================
 * 2. 底色：网格 + 双色光晕（整站的"科技感地基"）
 * ========================================================================== */
html.dark body {
  background-color: var(--background);
  background-image:
    /* 顶部主光晕（主色） */
    radial-gradient(1000px 520px at 50% -12%, oklch(0.7 0.24 var(--neon-hue-primary) / 0.24), transparent 68%),
    /* 右上强调光晕（青色） */
    radial-gradient(760px 460px at 88% 4%, oklch(0.8 0.19 var(--neon-hue-accent) / 0.15), transparent 70%),
    /* 左下兽橙补光（剑齿虎的"血性"点缀，透明度压低避免脏） */
    radial-gradient(680px 420px at 4% 92%, oklch(0.74 0.19 45 / 0.13), transparent 72%),
    /* 细网格：横 */
    linear-gradient(to right, oklch(1 0 0 / 0.028) 1px, transparent 1px),
    /* 细网格：竖 */
    linear-gradient(to bottom, oklch(1 0 0 / 0.028) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    48px 48px,
    48px 48px;
  background-attachment: fixed;
}

/* 浅色下光晕淡一些，避免发灰 */
html:not(.dark) body {
  background-color: var(--background);
  background-image:
    radial-gradient(900px 460px at 50% -14%, oklch(0.78 0.16 var(--neon-hue-primary) / 0.14), transparent 70%),
    linear-gradient(to right, oklch(0 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0 0 0 / 0.035) 1px, transparent 1px);
  background-size:
    auto,
    48px 48px,
    48px 48px;
  /* 原来是 background-attachment: fixed —— 固定背景会让每次滚动都重绘
   * 整个视口的背景层，是控制台长页面滚动的掉帧主因之一。
   * 网格本身是 48px 平铺，用 scroll 视觉上完全一样，开销归零。 */
  background-attachment: scroll;
}

/* 让页面骨架透明，露出网格（Tailwind 字面类名稳定，可用 ~= 匹配） */
html.dark body [class~='bg-background'],
html.dark body [class~='bg-card'] {
  background-color: oklch(0.208 0.026 266 / 0.55);
}

/* ==========================================================================
 * 3. 玻璃拟态：卡片 / 弹层 / 侧栏 / 顶栏
 *    shadcn 新版组件带 data-slot，语义稳定；同时用 class 兜底。
 * ========================================================================== */
html.dark :is([data-slot='card'], .card) {
  background-color: oklch(0.208 0.026 266 / 0.6);
  backdrop-filter: blur(var(--neon-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--neon-blur)) saturate(150%);
  border: 1px solid oklch(0.72 0.06 280 / 0.22);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / 0.06) inset,
    0 18px 48px -24px oklch(0.1 0 0 / 0.9);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* 卡片 hover：主色描边 + 外发光（不要把每个卡片都做，会糊） */
html.dark :is([data-slot='card'], .card):hover {
  border-color: oklch(0.75 0.2 var(--neon-hue-primary) / 0.45);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / 0.08) inset,
    0 0 0 1px oklch(0.75 0.2 var(--neon-hue-primary) / 0.18),
    0 22px 60px -28px oklch(0.7 0.24 var(--neon-hue-primary) / 0.55);
}

html.dark :is([data-slot='dialog-content'], [data-slot='popover-content'], [data-slot='dropdown-menu-content'], [data-slot='sheet-content'], [data-slot='select-content']) {
  background-color: oklch(0.19 0.026 266 / 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid oklch(0.72 0.08 285 / 0.3);
  box-shadow: 0 28px 80px -32px oklch(0 0 0 / 0.95);
}

/* 顶栏 / 侧栏：玻璃 + 底部发光细线 */
html.dark :is(header, [data-slot='sidebar'], aside) {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

html.dark header {
  background-color: oklch(0.15 0.022 265 / 0.72);
  border-bottom: 1px solid oklch(0.72 0.1 285 / 0.18);
  box-shadow: 0 8px 32px -24px oklch(0.7 0.24 var(--neon-hue-primary) / 0.8);
}

/* ==========================================================================
 * 4. 按钮：主按钮霓虹渐变 + 扫光；次按钮玻璃
 * ========================================================================== */
html.dark [data-slot='button'] {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

html.dark [data-slot='button']:hover {
  transform: translateY(-1px);
}
html.dark [data-slot='button']:active {
  transform: translateY(0) scale(0.99);
}

/* 主按钮（default variant） */
html.dark [data-slot='button'][data-variant='default'],
html.dark [data-slot='button'][data-variant='primary'] {
  background-image: linear-gradient(
    135deg,
    oklch(0.72 0.24 var(--neon-hue-primary)) 0%,
    oklch(0.7 0.22 268) 45%,
    oklch(0.78 0.2 var(--neon-hue-accent)) 100%
  );
  color: oklch(0.14 0.03 265);
  font-weight: 600;
  border: 1px solid oklch(1 0 0 / 0.16);
  box-shadow:
    0 0 0 1px oklch(0.7 0.24 var(--neon-hue-primary) / 0.35),
    0 12px 34px -14px oklch(0.7 0.24 var(--neon-hue-primary) / 0.85);
}

/* 扫光：45° 高光条，hover 时划过 */
html.dark [data-slot='button'][data-variant='default']::after,
html.dark [data-slot='button'][data-variant='primary']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    oklch(1 0 0 / 0.42) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
html.dark [data-slot='button'][data-variant='default']:hover::after,
html.dark [data-slot='button'][data-variant='primary']:hover::after {
  transform: translateX(120%);
}

/* 次要/幽灵按钮 */
html.dark [data-slot='button'][data-variant='outline'],
html.dark [data-slot='button'][data-variant='secondary'] {
  background-color: oklch(1 0 0 / 0.04);
  border: 1px solid oklch(0.75 0.1 285 / 0.3);
}
html.dark [data-slot='button'][data-variant='outline']:hover,
html.dark [data-slot='button'][data-variant='secondary']:hover {
  background-color: oklch(0.7 0.22 var(--neon-hue-primary) / 0.14);
  border-color: oklch(0.78 0.2 var(--neon-hue-primary) / 0.55);
  box-shadow: 0 0 22px -6px oklch(0.7 0.24 var(--neon-hue-primary) / 0.6);
}

/* ==========================================================================
 * 5. 输入 / 选择：聚焦霓虹环
 * ========================================================================== */
html.dark :is(input, textarea, [data-slot='select-trigger'], [data-slot='input']) {
  background-color: oklch(1 0 0 / 0.035);
  border-color: oklch(0.75 0.08 285 / 0.26);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html.dark :is(input, textarea, [data-slot='select-trigger'], [data-slot='input']):focus,
html.dark :is(input, textarea, [data-slot='select-trigger'], [data-slot='input']):focus-visible {
  outline: none;
  border-color: oklch(0.8 0.19 var(--neon-hue-accent) / 0.8);
  box-shadow:
    0 0 0 3px oklch(0.8 0.19 var(--neon-hue-accent) / 0.16),
    0 0 24px -8px oklch(0.8 0.19 var(--neon-hue-accent) / 0.7);
}

/* ==========================================================================
 * 6. 文字：标题渐变、代码/数字等宽、链接霓虹
 * ========================================================================== */
html.dark h1 {
  background-image: linear-gradient(
    100deg,
    oklch(0.98 0.01 250) 0%,
    oklch(0.9 0.12 285) 42%,
    oklch(0.86 0.16 var(--neon-hue-accent)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

html.dark :is(h2, h3) {
  letter-spacing: -0.012em;
}

/* 数字/代码：等宽 + 表格数字对齐（统计看板立刻"专业"起来） */
html.dark :is(code, kbd, pre, samp, [class~='tabular-nums'], [class~='font-mono']) {
  font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

html.dark a {
  text-decoration-color: oklch(0.8 0.19 var(--neon-hue-accent) / 0.5);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
html.dark a:hover {
  color: oklch(0.86 0.15 var(--neon-hue-accent));
}

::selection {
  background: oklch(0.7 0.24 var(--neon-hue-primary) / 0.35);
  color: oklch(0.99 0 0);
}

/* ==========================================================================
 * 7. 表格 / 徽标 / 骨架屏
 * ========================================================================== */
html.dark tbody tr {
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
html.dark tbody tr:hover {
  background-color: oklch(0.7 0.24 var(--neon-hue-primary) / 0.07);
  box-shadow: inset 2px 0 0 0 oklch(0.8 0.2 var(--neon-hue-primary) / 0.8);
}

/* 状态徽标（在线/正常）加呼吸光 */
html.dark [class*='bg-success'],
html.dark [data-status='success'] {
  box-shadow: 0 0 0 3px oklch(0.76 0.17 160 / 0.14);
}
html.dark [class*='bg-destructive'] {
  box-shadow: 0 0 0 3px oklch(0.68 0.2 22 / 0.16);
}

/* 骨架屏：青色高光扫过，比灰块高级很多 */
html.dark [data-slot='skeleton'],
html.dark [class*='animate-pulse'] {
  background-image: linear-gradient(
    90deg,
    oklch(0.24 0.026 266) 0%,
    oklch(0.36 0.06 285 / 0.85) 50%,
    oklch(0.24 0.026 266) 100%
  );
  background-size: 200% 100%;
  animation: neon-shimmer 1.4s ease-in-out infinite;
}
@keyframes neon-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
 * 8. 滚动条 / 分割线 / 焦点环
 * ========================================================================== */
html.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark ::-webkit-scrollbar-track {
  background: oklch(0.16 0.02 265);
}
html.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    oklch(0.62 0.2 var(--neon-hue-primary) / 0.7),
    oklch(0.7 0.18 var(--neon-hue-accent) / 0.6)
  );
  border-radius: 999px;
  border: 2px solid oklch(0.16 0.02 265);
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    oklch(0.72 0.24 var(--neon-hue-primary)),
    oklch(0.8 0.2 var(--neon-hue-accent))
  );
}

html.dark :focus-visible {
  outline: 2px solid oklch(0.8 0.19 var(--neon-hue-accent) / 0.85);
  outline-offset: 2px;
}

/* ==========================================================================
 * 9. 可选增强：给首页 hero 区域加"扫描线"（只在带 data-neon-hero 的容器内）
 *    在 web/src/features/home/index.tsx 的根节点加 data-neon-hero 即启用。
 * ========================================================================== */
html.dark [data-neon-hero] {
  position: relative;
  isolation: isolate;
}
html.dark [data-neon-hero]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    oklch(1 0 0 / 0.026) 0px,
    oklch(1 0 0 / 0.026) 1px,
    transparent 1px,
    transparent 4px
  );
  mask-image: radial-gradient(closest-side at 50% 40%, black, transparent 88%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 40%, black, transparent 88%);
  opacity: 0.7;
}

/* ==========================================================================
 * 10. 无障碍：尊重系统的"减少动效"
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.dark *,
  html.dark *::before,
  html.dark *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
 * 11. 动态流光
 * --------------------------------------------------------------------------
 *  原则（照这个写才不会卡）：
 *    · 只动 transform / opacity / background-position —— 走合成层，不触发布局；
 *    · 所有覆盖层一律 pointer-events: none，不吃点击；
 *    · 全部挂在 html.dark 下，且被文件末尾的 prefers-reduced-motion 统一降级；
 *    · 不用 JS 驱动，避免和 React 的重渲染打架。
 * ========================================================================== */

/* ---- 11.0 漂移光斑：三团高斯模糊的大色块，在页面底层缓慢游走 ----
 * 这是整页"活着"的主要来源。用 transform 驱动（合成层），不用背景重绘，
 * z-index:-1 让它落在 body 背景之上、正文之下，不干扰任何内容。 */
html.dark body::before {
  content: '';
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, oklch(0.72 0.26 var(--neon-hue-primary) / 0.5), transparent 72%),
    radial-gradient(closest-side, oklch(0.86 0.22 var(--neon-hue-accent) / 0.3), transparent 72%),
    radial-gradient(closest-side, oklch(0.72 0.24 300 / 0.34), transparent 72%);
  background-size: 62% 62%, 50% 50%, 56% 56%;
  background-position: 18% 26%, 82% 60%, 55% 88%;
  background-repeat: no-repeat;
  filter: blur(38px);
  animation: neon-blob 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes neon-blob {
  0% {
    transform: translate3d(-7%, -5%, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(6%, 4%, 0) scale(1.14) rotate(7deg);
  }
  100% {
    transform: translate3d(-3%, 7%, 0) scale(1.05) rotate(-6deg);
  }
}

/* ---- 11.1 背景极光：三层径向渐变漂移 ----
 * 原来 body 的 background-image 是静止的。这里放大图层尺寸 + no-repeat，
 * 再让 background-position 在 200% 的范围内来回走，光晕就有了呼吸和流动。 */
html.dark body {
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size:
    200% 200%,
    180% 180%,
    170% 170%,
    48px 48px,
    48px 48px;
  animation: neon-aurora 14s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes neon-aurora {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      0% 100%,
      0 0,
      0 0;
  }
  50% {
    background-position:
      55% 38%,
      42% 16%,
      26% 72%,
      0 0,
      0 0;
  }
  100% {
    background-position:
      100% 60%,
      0% 44%,
      68% 12%,
      0 0,
      0 0;
  }
}

/* ---- 11.2 顶部扫描光带：一条高光沿页面顶边跑 ---- */
html.dark::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9998;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    oklch(0.72 0.24 var(--neon-hue-primary) / 0.85) 34%,
    oklch(0.88 0.2 var(--neon-hue-accent) / 1) 50%,
    oklch(0.72 0.24 var(--neon-hue-primary) / 0.85) 66%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: neon-scanline 4.5s linear infinite;
}
@keyframes neon-scanline {
  0% {
    background-position: -130% 0;
  }
  100% {
    background-position: 130% 0;
  }
}

/* ---- 11.3 全屏斜向扫光：已关闭 ----
 * 原效果：html.dark::before 铺满视口（fixed inset:0 / z-index 9997 /
 * screen 混合 / 105deg 渐变），每 8 秒从左上到右下横扫一遍整页。
 * 在控制台这种长时间停留的界面上就是「时不时闪一下」，已彻底移除。
 *
 * 想恢复的话，把下面这段取消注释即可：
 *
 * html.dark::before {
 *   content: '';
 *   position: fixed; inset: 0; z-index: 9997;
 *   pointer-events: none;
 *   background-image: linear-gradient(105deg,
 *     transparent 34%,
 *     oklch(1 0 0 / 0.075) 46%,
 *     oklch(0.88 0.18 var(--neon-hue-accent) / 0.085) 52%,
 *     transparent 64%);
 *   background-size: 320% 100%;
 *   background-repeat: no-repeat;
 *   mix-blend-mode: screen;
 *   animation: neon-sweep 8s ease-in-out infinite;
 * }
 * @keyframes neon-sweep {
 *   0%, 10% { background-position: -180% 0; }
 *   58%, 100% { background-position: 180% 0; }
 * }
 */

/* ---- 11.4 标题文字流光：渐变在字面里流动 ---- */
html.dark h1 {
  background-size: 220% 100%;
  animation: neon-textflow 9s ease-in-out infinite alternate;
}
@keyframes neon-textflow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ---- 11.5 主按钮：渐变本身在流动（和 hover 扫光互不干扰） ---- */
html.dark [data-slot='button'][data-variant='default'],
html.dark [data-slot='button'][data-variant='primary'] {
  background-size: 200% 200%;
  animation: neon-btnflow 6s ease-in-out infinite;
}
@keyframes neon-btnflow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ---- 11.6 卡片流光描边：hover 时一圈光沿边缘转 ----
 * conic-gradient + mask 做 1px 描边，@property 让角度可动画。
 * 不支持 @property 的浏览器会退化成静止描边，不影响功能。 */
@property --neon-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

html.dark :is([data-slot='card'], .card) {
  position: relative;
}
html.dark :is([data-slot='card'], .card)::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--neon-angle),
    transparent 0%,
    oklch(0.72 0.24 var(--neon-hue-primary) / 0.95) 10%,
    oklch(0.88 0.2 var(--neon-hue-accent) / 0.95) 20%,
    transparent 32%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: neon-border-spin 4.5s linear infinite;
}
html.dark :is([data-slot='card'], .card):hover::after {
  opacity: 1;
}
@keyframes neon-border-spin {
  to {
    --neon-angle: 360deg;
  }
}

/* ---- 11.7 输入框聚焦：光晕呼吸 ---- */
html.dark :is(input, textarea, [data-slot='input'], [data-slot='select-trigger']):focus,
html.dark :is(input, textarea, [data-slot='input'], [data-slot='select-trigger']):focus-visible {
  animation: neon-focus-breathe 2.6s ease-in-out infinite;
}
@keyframes neon-focus-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 3px oklch(0.8 0.19 var(--neon-hue-accent) / 0.16),
      0 0 18px -8px oklch(0.8 0.19 var(--neon-hue-accent) / 0.55);
  }
  50% {
    box-shadow:
      0 0 0 4px oklch(0.8 0.19 var(--neon-hue-accent) / 0.26),
      0 0 30px -6px oklch(0.8 0.19 var(--neon-hue-accent) / 0.9);
  }
}

/* ---- 11.8 当前导航项：底部光条呼吸 ---- */
html.dark [aria-current='page'] {
  animation: neon-nav-breathe 3.2s ease-in-out infinite;
}
@keyframes neon-nav-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(0.7 0.24 var(--neon-hue-primary) / 0);
  }
  50% {
    box-shadow: 0 0 14px -2px oklch(0.7 0.24 var(--neon-hue-primary) / 0.55);
  }
}

/* ---- 11.9 减少动效：把上面这些一并关掉 ----
 * 文件末尾的 html.dark * 规则管不到 html 自身的伪元素，这里单独补。 */
@media (prefers-reduced-motion: reduce) {
  html.dark::after,
  html.dark body,
  html.dark body::before,
  html.dark h1,
  html.dark [data-slot='button'][data-variant='default'],
  html.dark [data-slot='button'][data-variant='primary'],
  html.dark :is([data-slot='card'], .card)::after,
  html.dark [aria-current='page'] {
    animation: none !important;
  }
}

/* ==========================================================================
 * 12. 浅色：对齐设计稿 theme/preview.html
 * --------------------------------------------------------------------------
 *  preview.html 是这套 token 的浅色参考实现，骨架是：
 *    · 白卡片 + 极细 hairline 边框 + 柔和投影（不要重阴影）
 *    · 侧栏当前项：左侧 2.5px 渐变光条 + 极淡的主色横向渐变
 *    · 顶栏当前项：底部 2px 渐变下划线 + 光晕
 *    · 分隔线统一 rgba(15,23,42,.06) 这一档，比纯灰干净
 *
 *  之前这些只写在 html.dark 里，浅色下全是 New API 的默认样式，
 *  所以浅色看起来"没主题"。这一节专门补浅色。
 * ========================================================================== */
html:not(.dark) {
  --hair: rgba(15, 23, 42, 0.06);
  --hair-strong: rgba(15, 23, 42, 0.1);
  --neon-blue: 56, 189, 248;
  --neon-amber: 255, 176, 32;
}

/* ---- 12.1 底色：冷白 + 一层极淡的主色雾 ---- */
html:not(.dark) body {
  background-color: oklch(0.978 0.004 250);
  background-image:
    radial-gradient(900px 460px at 50% -14%, rgba(var(--neon-blue), 0.1), transparent 70%),
    radial-gradient(680px 400px at 96% 2%, rgba(var(--neon-amber), 0.05), transparent 72%);
  background-repeat: no-repeat, no-repeat;
  /* 原来这里是 background-attachment: fixed。
   * 固定背景会让浏览器在每一次滚动时重绘整个视口的背景层，
   * 是长表格/控制台滚动掉帧的元凶之一。
   * 改成默认的 scroll，并用固定像素高度把渐变锁在页面顶部，
   * 观感和原来基本一致，但滚动不再触发背景重绘。 */
  background-size: 100% 820px, 100% 620px;
  background-position: top center, top right;
  background-attachment: scroll;
}

/* ---- 12.2 侧栏：白底 + hairline 右边线 + 渐变发丝光 ---- */
html:not(.dark) [data-slot='sidebar'],
html:not(.dark) [data-slot='sidebar-container'],
html:not(.dark) aside {
  background-color: #fff;
  border-right: 1px solid var(--hair);
}

/* 侧栏当前项：左侧光条 + 横向渐变（设计稿的标志性细节） */
html:not(.dark) [data-slot='sidebar-menu-button'][data-status='active'] {
  position: relative;
  background-image: linear-gradient(
    90deg,
    rgba(var(--neon-blue), 0.13),
    rgba(var(--neon-blue), 0.025)
  );
  color: var(--foreground);
  font-weight: 600;
}
html:not(.dark) [data-slot='sidebar-menu-button'][data-status='active']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5px;
  height: 16px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, var(--primary), var(--ring));
  box-shadow: 0 0 10px rgba(var(--neon-blue), 0.8);
  pointer-events: none;
}

/* ---- 12.3 顶栏：白底 + hairline 底边 ----
 * 原来这里是 rgba(255,255,255,.78) + backdrop-filter: blur(18px) saturate(180%)。
 * 顶栏是 sticky 的，backdrop-filter 要求浏览器每一帧都把它背后的内容
 * 重新采样、模糊一遍 —— 滚动和路由切换时这是最重的一处开销，
 * 而 78% 的白底其实几乎看不出模糊。改成 94% 实色，
 * 视觉上只差一点点通透感，合成开销直接归零。 */
html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--hair);
}

/* 顶栏当前项：底部渐变下划线 + 光晕 */
html:not(.dark) header nav a[data-status='active'] {
  position: relative;
  color: var(--foreground);
  font-weight: 600;
}
html:not(.dark) header nav a[data-status='active']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--primary), var(--ring));
  box-shadow: 0 0 12px rgba(var(--neon-blue), 0.7);
  pointer-events: none;
}

/* ---- 12.4 卡片：白底 + hairline + 柔和双层投影 ---- */
html:not(.dark) :is([data-slot='card'], .card) {
  background-color: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px -14px rgba(15, 23, 42, 0.14);
  /* 只过渡真正会变的两个属性。原来的 transform 过渡没有任何 hover 规则用到它，
   * 却会让浏览器给每张卡片预留一个合成层，卡片一多就是白白吃显存。 */
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
html:not(.dark) :is([data-slot='card'], .card):hover {
  border-color: rgba(var(--neon-blue), 0.34);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 14px 36px -16px rgba(var(--neon-blue), 0.45);
}

/* ---- 12.5 弹层：白底 + 更明确的投影 ---- */
html:not(.dark) :is(
    [data-slot='dialog-content'],
    [data-slot='popover-content'],
    [data-slot='dropdown-menu-content'],
    [data-slot='sheet-content'],
    [data-slot='select-content']
  ) {
  background-color: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 18px 50px -20px rgba(15, 23, 42, 0.28);
}

/* ---- 12.6 输入框：白底 + hairline，聚焦蓝色环 ---- */
html:not(.dark) :is(input, textarea, [data-slot='input'], [data-slot='select-trigger']) {
  background-color: #fff;
  border-color: var(--hair-strong);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html:not(.dark) :is(input, textarea, [data-slot='input'], [data-slot='select-trigger']):focus,
html:not(.dark) :is(input, textarea, [data-slot='input'], [data-slot='select-trigger']):focus-visible {
  outline: none;
  border-color: rgba(var(--neon-blue), 0.7);
  box-shadow:
    0 0 0 3px rgba(var(--neon-blue), 0.16),
    0 0 18px -8px rgba(var(--neon-blue), 0.6);
}

/* ---- 12.7 表格：表头淡灰、行分隔 hairline ---- */
html:not(.dark) thead tr {
  background-color: rgba(15, 23, 42, 0.025);
}
html:not(.dark) tbody tr {
  border-color: var(--hair);
}
html:not(.dark) tbody tr:hover {
  background-color: rgba(var(--neon-blue), 0.05);
}

/* ---- 12.8 品牌图标：给 logo 一圈渐变描边（设计稿的 brand-mark 质感） ---- */
html:not(.dark) header img[alt='徽标'] {
  border-radius: 9px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.07),
    0 2px 8px -3px rgba(var(--neon-blue), 0.4);
}

/* ==========================================================================
 * 13. 打印/导出场景降级（避免深底白字打印成一片黑）
 * ========================================================================== */
@media print {
  html.dark body {
    background: #fff !important;
    color: #111 !important;
  }
}