/* ============================================================
 * beautify.css v2 — new-api 面板美化层（反代注入，不改源码）
 *
 * v2 目标：解决「材质割裂」与「文字不好看」两个问题。
 *
 * 一、材质割裂的根因与修法
 *    v1 给每一层单独设不透明度（14/45/85/60/92），又给卡片单独加
 *    backdrop-filter —— 于是同一屏里出现 4 种以上「材质」：卡片按壁纸
 *    的明暗忽深忽浅、卡片里的 bg-muted 实心块又是另一档，读起来是
 *    「明暗斑块」而不是「层叠」。
 *    v2 改为：壁纸不虚化（虚化会把图压成色块，只加一点饱和度/对比度）+ 一层
 *    均匀遮蔽(scrim)，然后只有 4 档表面，且每层只与「它下面那一层」比较：
 *
 *      canvas  画布/沟槽   透明（壁纸+遮蔽层直接可见，不放正文）
 *      surface 侧边栏/内容区  85% / 83%（暗）
 *      raised  卡片/表格/表单 92% / 90%
 *      float   弹窗/菜单     97% / 95%
 *      inset   卡片内的浅色块 62%（相对卡片半透明 → 不产生硬边）
 *
 *    「可读性放在表面，不放在遮蔽层」是关键：遮蔽层只负责公开页里「直接落在
 *    画布上的正文」，面板/认证页用弱档（18% / 24%）—— 壁纸在沟槽里几乎原样
 *    可见（透出 82% / 76%），文字由 ≥85% 的表面兜住。
 *
 *    实测对比度（最坏情况：壁纸为纯黑/纯白极端块）：
 *      面板/认证页  surface 15.0:1 / 8.6:1，raised 17.1:1 / 10.3:1
 *                  次要文字 5.7:1 / 5.2:1 起（全部 ≥ WCAG AA）
 *      公开页画布   正文 5.3:1 / 6.0:1
 *    v1 在同样最坏情况下卡片上的次要文字只有 3.77:1（低于 AA），这正是
 *    「文字显示不好」的量化原因。
 *
 * 二、文字优化
 *    - 补全 CJK 字体栈：面板的 --font-sans 只有 Public Sans + 泛型
 *      sans-serif，中文字符会回落到浏览器默认中文字体 —— 同一行中英文
 *      两套字形/字重/x-height，这是最直接的割裂来源。
 *    - 抗锯齿、text-size-adjust、font-optical-sizing。
 *    - 全局 tabular-nums：数字列不再抖动（表格已自带，这里是兜住其余
 *      卡片/徽章/日志/时间戳）。
 *    - 标题 700 → 600：中文粗体压在毛玻璃上会糊。
 *    - 小字（表头/标签/描述）单独提一档对比度，并用主题色相推导，
 *      不再写死中性灰（写死的灰会被主题预设覆盖，导致明暗两套行为）。
 *
 * 三、级联前提（为什么不用 !important）
 *    面板样式表全部包在 @layer 里（Tailwind 4 的 theme/base/components/
 *    utilities），而未分层样式优先于任何分层样式；theme.css /
 *    theme-presets.css 虽未分层，但主题预设写在 <body data-theme-preset>
 *    上，属于「更靠近元素的声明」，所以凡是需要覆盖预设的变量，本文件
 *    都用 body 级双属性选择器（见「文字」一节）。
 * ============================================================ */

/* ============================================================
 * 0. 参数区：只改这一段就能整体换风格
 * ========================================================== */
:root {
  /* ---- 黄金比例 φ = 1.618（保留） ---- */
  --bf-phi: 1.618;
  --bf-phi-inv: 0.618;

  /* 间距节奏：0.382 / 0.618 / 1 / 1.618 rem */
  --bf-s1: 0.382rem;
  --bf-s2: 0.618rem;
  --bf-s3: 1rem;
  --bf-s4: 1.618rem;

  /* ---- 字体：面板 --font-sans 缺 CJK 回落，这里补全 ----
     Public Sans 管拉丁/西文，system-ui 兜其它文种，之后才是各平台中文黑体。
     --font-body 由面板按「字体轴」(sans/serif) 切换，serif 轴自带完整 CJK
     衬线栈，所以只需修 --font-sans。 */
  --font-sans:
    'Public Sans Variable', 'Public Sans',
    system-ui, -apple-system, 'Segoe UI', Roboto,
    'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'OPPO Sans',
    'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC',
    'Microsoft YaHei UI', 'Microsoft YaHei',
    'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei',
    sans-serif;

  /* ---- 背景层：壁纸 + 均匀遮蔽 ---- */
  --bf-img: url('https://t.alcy.cc/moez');

  /* 壁纸处理：默认只加一点饱和度/对比度让画面更"立"，不模糊、不缩放
     （虚化会把壁纸压成色块）。想要磨砂就把 blur 和 scale 一起打开，
     scale 是为了藏住模糊产生的边缘。 */
  --bf-bg-filter: saturate(108%) contrast(101%);
  --bf-bg-scale: none;

  /* 均匀遮蔽分两档（用 --background 自身色相，不是纯黑 rgba）：
     - 默认档给公开页：正文可能直接落在壁纸上，遮蔽要重一些；
     - 弱档给面板/认证页（html.nhs-panel / html.nhs-auth）：那里正文都在
       ≥85% 的表面或玻璃卡上，遮蔽可以很轻 —— 壁纸在沟槽里几乎原样可见。
     调小 = 壁纸更抢眼，调大 = 文字更稳。 */
  --bf-scrim-a: 52%;
  --bf-scrim-weak: 18%;

  /* ---- 四档表面不透明度（唯一材质语言） ----
     这一档才是文字可读性的来源。降它会同时增加「壁纸透出量」和
     「卡片上的壁纸纹理噪点」，所以要一起看。 */
  --bf-a-surface: 85%;
  --bf-a-raised: 92%;
  --bf-a-float: 97%;
  --bf-a-inset: 62%;

  /* ---- 毛玻璃刻度：只给「下面真的有东西在动」的层用 ----
     壁纸层不再整张虚化，卡片也不需要 backdrop-filter（它只会让卡片
     看起来像「洞」，还更慢）；真正需要模糊的是浮层和 sticky 顶栏。 */
  --bf-blur-2: 8px;
  --bf-blur-3: 12px;

  /* ---- 圆角与描边 ---- */
  --bf-radius: calc(var(--radius, 1rem) * 1.05);
  --bf-radius-lg: calc(var(--radius, 1rem) * 1.4);
  --bf-hairline: color-mix(in oklch, var(--border, #e5e7eb) 72%, transparent);
  --bf-card-shadow: 0 1px 2px rgba(2, 6, 23, 0.05),
    0 10px 28px -18px rgba(2, 6, 23, 0.25);
  --bf-card-shadow-hover: 0 2px 6px rgba(2, 6, 23, 0.07),
    0 20px 44px -20px rgba(2, 6, 23, 0.32);

  /* ---- 可选：主色按钮对比度（全局，默认关闭） ----
     主题默认 --primary(#3ea4ec) 压白字只有 2.71:1，低于 WCAG AA 4.5:1；
     登录页的提交按钮就是这一档。打开下面两行会同时影响按钮、链接、徽章、
     图表等所有用到主色的地方 —— 属于全站设计决策，所以默认不动。
     实测 oklch(0.55 0.16 250) ≈ rgb(0,116,202)，白字 4.83:1。
     注意：主题预设会把 --primary 写在 <body data-theme-preset> 上，
     要压过它需要 body 级双属性选择器，见「文字」一节。
     --primary: oklch(0.55 0.16 250);
     --primary-foreground: oklch(1 0 0); */
}

/* 小字专用文字色：由主题自身的 muted/foreground 推导，保持主题色相，
   只把对比度抬一档（表头、标签、描述这类 12-13px 文字最吃这个）。
   定义在 html 上、消费在 body 上，避免自定义属性自引用。 */
html {
  --bf-text-soft: color-mix(
    in oklch,
    var(--muted-foreground) 86%,
    var(--foreground)
  );
}

.dark {
  /* 暗色档：壁纸亮部最容易把亮色文字洗掉，所以遮蔽比浅色略重、表面略实 */
  --bf-scrim-a: 62%;
  --bf-scrim-weak: 24%;
  --bf-a-surface: 83%;
  --bf-a-raised: 90%;
  --bf-a-float: 95%;
  --bf-a-inset: 62%;

  --bf-hairline: color-mix(in oklch, var(--border, #334155) 62%, transparent);
  --bf-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.45),
    0 14px 34px -20px rgba(0, 0, 0, 0.75);
  --bf-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.5),
    0 24px 52px -22px rgba(0, 0, 0, 0.85);
}

/* 高对比度偏好：直接给实心表面，放弃通透换可读性 */
@media (prefers-contrast: more) {
  :root {
    --bf-a-surface: 100%;
    --bf-a-raised: 100%;
    --bf-a-float: 100%;
    --bf-a-inset: 100%;
    /* 两档遮蔽都收起来：表面已经全实，壁纸只作为底纹存在 */
    --bf-scrim-a: 88%;
    --bf-scrim-weak: 60%;
  }
}

/* ============================================================
 * 1. 背景层：壁纸（可调 filter）+ 均匀遮蔽
 *    壁纸在 z-index:-2，遮蔽层在 -1，内容永远在最上面。
 * ========================================================== */
html,
body {
  background-color: transparent;
}

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--bf-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: var(--bf-bg-filter);
  transform: var(--bf-bg-scale);
}

/* 均匀遮蔽：用 --background 自身色相，而不是纯黑 rgba（纯黑会把画面去色，
   和面板的主题色相打架；浅色主题下纯黑遮蔽还会把暗部压得更黑，反而伤深色文字）。
   默认档保证「画布上的正文」可读；面板/认证页用弱档，把壁纸放出来。 */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--background) var(--bf-scrim-a), transparent);
}

html.nhs-panel::after,
html.nhs-auth::after {
  background-color: color-mix(in srgb, var(--background) var(--bf-scrim-weak), transparent);
}

/* ============================================================
 * 2. 四档表面
 * ========================================================== */

/* 画布：面板最外层（inset 变体下 Tailwind 用变体类 has-data-[variant=inset]:bg-sidebar
   铺了一层不透明底色，变体类名 != .bg-sidebar，必须按语义兜住）。
   这里保持透明，让壁纸在沟槽里透出来 —— 该层不放正文。 */
[data-slot='sidebar-wrapper']:has([data-variant='inset']) {
  background-color: transparent;
}

/* surface：侧边栏与内容区用同一档，沟槽两侧不再出现两种材质 */
.bg-sidebar {
  background-color: color-mix(
    in oklch,
    var(--sidebar, var(--card, #ffffff)) var(--bf-a-surface),
    transparent
  );
}

/* 内容区用 --background 而不是 --sidebar */
[data-slot='sidebar-inset'],
.bg-background {
  background-color: color-mix(
    in oklch,
    var(--background, #ffffff) var(--bf-a-surface),
    transparent
  );
}

/* raised：数据容器（卡片/表格/表单）—— 文字主要活在这里 */
.bg-card {
  background-color: color-mix(in oklch, var(--card, #ffffff) var(--bf-a-raised), transparent);
}

/* float：浮层 */
.bg-popover {
  background-color: color-mix(
    in oklch,
    var(--popover, var(--card, #ffffff)) var(--bf-a-float),
    transparent
  );
}

[data-slot='dialog-content'],
[data-slot='alert-dialog-content'],
[data-slot='sheet-content'],
[data-slot='drawer-content'],
[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'],
[data-slot='navigation-menu-content'] {
  background-color: color-mix(
    in oklch,
    var(--popover, var(--card, #ffffff)) var(--bf-a-float),
    transparent
  );
  -webkit-backdrop-filter: blur(var(--bf-blur-3)) saturate(150%);
  backdrop-filter: blur(var(--bf-blur-3)) saturate(150%);
  border-color: var(--bf-hairline);
}

/* 遮罩层：弹窗背后的内容虚化（瞬态，开销可接受） */
[data-slot='dialog-overlay'],
[data-slot='alert-dialog-overlay'],
[data-slot='sheet-overlay'],
[data-slot='drawer-overlay'] {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ============================================================
 * 3. 消除硬块：卡片内部的浅色块改为「相对上一层」半透明
 *    这是 v1 最明显的割裂点 —— 实心 bg-muted 条压在 85% 卡片上，
 *    同一段次要文字在卡片上是 4.0:1、在实心条上是 5.8:1。
 * ========================================================== */
.bg-muted {
  background-color: color-mix(in oklch, var(--bf-block, var(--muted, #f5f5f5)) var(--bf-a-inset), transparent);
}

.bg-secondary {
  background-color: color-mix(in oklch, var(--secondary, #eeeeee) var(--bf-a-inset), transparent);
}

/* .bg-accent 保持实心：本主题里 --accent == --primary，它多用于选中/悬停态，
   半透明会削弱 accent-foreground（白字压主色）的对比度，这类地方不该动。 */

/* ============================================================
 * 4. 文字
 * ========================================================== */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-optical-sizing: auto;
}

body {
  /* --font-body 由面板的字体轴驱动（sans → var(--font-sans)，serif → var(--font-serif)），
     这里只保证它拿到补全 CJK 之后的 --font-sans。 */
  font-family: var(--font-body, var(--font-sans));
  /* 数字等宽：日志/用量/金额/时间戳不再左右抖动 */
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    'kern' 1,
    'liga' 1,
    'calt' 1;
}

/* 标题：700 → 600（中文粗体在毛玻璃上容易糊成一团），轻微负字距只在
   拉丁文有收益，-0.008em 对中文也安全。 */
:is(h1, h2, h3, h4, h5, h6),
[data-slot='card-title'],
[data-slot='dialog-title'],
[data-slot='alert-dialog-title'],
[data-slot='sheet-title'],
[data-slot='drawer-title'] {
  font-weight: 600;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

/* 正文段落避免最后一行只剩一个字 */
p,
[data-slot='card-description'],
[data-slot='field-description'] {
  text-wrap: pretty;
}

/* 小字提一档对比度。
   注意用 body 级双属性选择器：主题预设在 <body data-theme-preset> 上重写
   --muted-foreground，特异性 (0,2,0)，普通 :root/.dark 覆盖会被它压掉，
   于是「默认主题」和「选了预设」会出现两套文字颜色 —— v1 就是这个毛病。 */
body,
body[data-theme-preset],
body[data-theme-preset][data-theme-preset] {
  --muted-foreground: var(--bf-text-soft);
  /* 卡片内的浅色块（表头、骨架、空态）颜色。
     浅色主题里 --muted(#f5f5f5) 与 --card(#fff) 本来就只差一点点，卡片做实
     之后照搬 --muted 会整块消失；这里把它朝 --foreground 拉 8%，让浅色块
     自带边界，不再依赖「卡片有多透」。
     实测色块:卡片对比 = 1.11（浅）/ 1.13（暗），与主题原生色块的 1.09/1.07
     同档 —— 看得见，但不是硬边。 */
  --bf-block: color-mix(in oklch, var(--muted) 92%, var(--foreground));
}

[data-slot='table-header'] th,
[data-slot='sidebar-group-label'],
[data-slot='label'],
[data-slot='card-description'],
[data-slot='field-description'],
[data-slot='breadcrumb'] {
  color: var(--bf-text-soft, var(--muted-foreground));
}

/* 选中 / 光标 / 占位符 / 焦点 */
::selection {
  background-color: color-mix(in oklch, var(--primary, #3b82f6) 24%, transparent);
  color: var(--foreground);
}
:is(input, textarea, select) {
  caret-color: var(--primary, #3b82f6);
}
::placeholder {
  color: var(--bf-text-soft, var(--muted-foreground));
}
:focus-visible {
  outline-color: color-mix(in oklch, var(--ring, var(--primary, #3b82f6)) 70%, transparent);
}

/* ============================================================
 * 5. 卡片 / 表格
 * ========================================================== */
[data-slot='card'] {
  border-radius: var(--bf-radius);
  box-shadow:
    0 0 0 1px var(--bf-hairline),
    var(--bf-card-shadow);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

[data-slot='card']:has(a, button):hover {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--primary, #3b82f6) 30%, var(--bf-hairline)),
    var(--bf-card-shadow-hover);
  transform: translateY(-1px);
}

[data-slot='card-header'] {
  padding-bottom: calc(var(--bf-s2) * 0.6);
}

[data-slot='table-container'] {
  border-radius: var(--bf-radius);
}

[data-slot='table-header'] th {
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-slot='table-row'] {
  transition: background-color 0.18s ease;
}

[data-slot='table-row']:hover {
  background-color: color-mix(in oklch, var(--muted, #f1f5f9) 48%, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--muted-foreground, #94a3b8) 32%, transparent)
    transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: color-mix(in oklch, var(--muted-foreground, #94a3b8) 32%, transparent);
}
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in oklch, var(--primary, #3b82f6) 55%, transparent);
}

/* ============================================================
 * 6. 侧边栏 / 顶栏
 * ========================================================== */
[data-slot='sidebar-container'] {
  border-inline-end-color: var(--bf-hairline);
}

[data-slot='sidebar-menu-button'] {
  border-radius: calc(var(--radius, 1rem) * 0.8);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

[data-slot='sidebar-menu-button'][data-active] {
  background-image: linear-gradient(
    90deg,
    color-mix(in oklch, var(--primary, #3b82f6) 20%, transparent),
    color-mix(in oklch, var(--primary, #3b82f6) 4%, transparent)
  );
  box-shadow: inset 2px 0 0 0 var(--primary, #3b82f6);
}

/* 顶栏是 sticky + bg-transparent：不加底衬的话，正文会从它下面滚过去，
   文字叠文字 —— 这是面板里最容易「看着乱」的地方。
   它是全站唯一真正需要 backdrop-filter 的层（下面确实有内容在动）。 */
[data-slot='sidebar-wrapper'] header {
  background-color: color-mix(
    in oklch,
    var(--background, #ffffff) calc(var(--bf-a-raised) + 4%),
    transparent
  );
  -webkit-backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
  backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
  border-bottom: 1px solid var(--bf-hairline);
}

/* ============================================================
 * 7. 交互反馈
 * ========================================================== */
[data-slot='button'] {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

[data-slot='button']:active {
  transform: translateY(1px);
}

/* ============================================================
 * 8. 注入的赞助组件：视觉全部在这里
 *    sponsor.js 只负责结构与显隐，颜色/圆角/间距/字号一律走本文件，
 *    用 html 前缀提权（0,2,1 与 0,1,1），保证压过脚本里的兜底样式。
 * ========================================================== */

/* ---- 概览页卡片 ---- */
html #nhs-support-card {
  padding: var(--bf-s4) calc(var(--bf-s4) * 1.05);
  border-radius: var(--bf-radius-lg);
  background-color: color-mix(in oklch, var(--card, #ffffff) var(--bf-a-raised), transparent);
  border: 1px solid var(--bf-hairline);
  box-shadow:
    0 0 0 1px var(--bf-hairline),
    var(--bf-card-shadow);
}

html #nhs-support-card .nhs-card-title {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.008em;
}

html #nhs-support-card .nhs-card-sub {
  margin: 6px 0 0;
  max-width: 560px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bf-text-soft, var(--muted-foreground));
}

/* ---- 弹窗 ---- */
html #nhs-popup {
  background-color: color-mix(in srgb, var(--background, #ffffff) 58%, transparent);
  -webkit-backdrop-filter: blur(var(--bf-blur-3)) saturate(160%);
  backdrop-filter: blur(var(--bf-blur-3)) saturate(160%);
}

html #nhs-popup .nhs-modal {
  border-radius: var(--bf-radius-lg);
  padding: 26px 24px 20px;
  background-color: color-mix(in oklch, var(--card, #ffffff) var(--bf-a-float), transparent);
  border: 1px solid var(--bf-hairline);
  -webkit-backdrop-filter: blur(var(--bf-blur-3)) saturate(155%);
  backdrop-filter: blur(var(--bf-blur-3)) saturate(155%);
  color: var(--card-foreground, var(--foreground));
}

html #nhs-popup .nhs-head {
  text-align: center;
}

html #nhs-popup .nhs-eyebrow,
html #nhs-support-card .nhs-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--primary, #2563eb);
  background-color: color-mix(in oklch, var(--primary, #2563eb) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--primary, #2563eb) 30%, transparent);
}

html #nhs-popup .nhs-title {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--foreground);
}

html #nhs-popup .nhs-sub {
  margin: 8px auto 0;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--bf-text-soft, var(--muted-foreground));
}

html #nhs-popup .nhs-hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--bf-text-soft, var(--muted-foreground));
}

html #nhs-popup .nhs-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  color: var(--bf-text-soft, var(--muted-foreground));
  background-color: color-mix(in oklch, var(--muted, #f1f5f9) 55%, transparent);
  border: 1px solid var(--bf-hairline);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

html #nhs-popup .nhs-close:hover {
  color: var(--foreground);
  background-color: color-mix(in oklch, var(--muted, #f1f5f9) 85%, transparent);
  transform: scale(1.06);
}

/* ---- 二维码块：与卡片同族材质，不再自带 backdrop-filter ---- */
html .nhs-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

html .nhs-qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  border-radius: calc(var(--radius, 1rem) * 1.2);
  border: 1px solid var(--bf-hairline);
  background-color: color-mix(in oklch, var(--muted, #f1f5f9) var(--bf-a-inset), transparent);
}

html .nhs-qr {
  display: block;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid var(--bf-hairline);
}

html .nhs-qr.is-broken {
  background-color: color-mix(in oklch, var(--muted, #f1f5f9) 70%, transparent);
}

html .nhs-qr-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground);
}

html .nhs-qr-tip {
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--bf-text-soft, var(--muted-foreground));
}

/* 卡片里的二维码块更紧凑 */
html #nhs-support-card .nhs-qr-grid-sm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

html #nhs-support-card .nhs-qr {
  max-width: 112px;
  border-radius: 10px;
}

html #nhs-support-card .nhs-qr-box {
  padding: 12px 10px;
}

@media (min-width: 900px) {
  /* 文字区 : 二维码区 = 1.618 : 1 */
  html #nhs-support-card {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    align-items: center;
  }
  html #nhs-support-card .nhs-qr-grid-sm {
    display: flex;
  }
  html #nhs-support-card .nhs-qr-box {
    flex: 1;
  }
  html #nhs-support-card .nhs-qr {
    max-width: 150px;
  }
}

/* 小屏：收紧间距，保证弹窗不超过一屏 */
@media (max-width: 480px) {
  html #nhs-popup .nhs-modal {
    padding: 20px 16px 16px;
  }
  html #nhs-popup .nhs-title {
    font-size: 17px;
  }
  html #nhs-popup .nhs-sub {
    font-size: 12.5px;
    line-height: 1.7;
    margin-top: 6px;
  }
  html #nhs-popup .nhs-hint {
    margin-top: 12px;
    font-size: 11.5px;
  }
  html .nhs-qr-grid {
    gap: 10px;
    margin-top: 16px;
  }
  html .nhs-qr-box {
    padding: 10px 8px;
  }
  html .nhs-qr {
    max-width: 126px;
  }
  html .nhs-qr-name {
    font-size: 12.5px;
  }
  html .nhs-qr-tip {
    font-size: 11.5px;
  }
  html #nhs-support-card {
    padding: var(--bf-s3) calc(var(--bf-s3) * 1.05);
    gap: 12px;
  }
  html #nhs-support-card .nhs-card-title {
    font-size: 16px;
  }
  html #nhs-support-card .nhs-card-sub {
    font-size: 12.5px;
  }
  html #nhs-support-card .nhs-qr {
    max-width: 128px;
  }
}

/* 小屏且屏幕够高：弹窗二维码竖排放大，更好扫（卡片不受影响） */
@media (max-width: 480px) and (min-height: 720px) {
  html #nhs-popup .nhs-qr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html #nhs-popup .nhs-qr {
    max-width: 170px;
  }
}

/* 矮屏（横屏手机 / 小窗）：尽量一屏放下，放不下也能滚动 */
@media (max-height: 600px) {
  html #nhs-popup .nhs-modal {
    padding: 16px 16px 14px;
  }
  html #nhs-popup .nhs-title {
    font-size: 16px;
    margin-top: 8px;
  }
  html #nhs-popup .nhs-sub {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 4px;
  }
  html #nhs-popup .nhs-hint {
    margin-top: 10px;
    font-size: 11px;
  }
  html .nhs-qr-grid {
    gap: 10px;
    margin-top: 12px;
  }
  html .nhs-qr-box {
    padding: 8px 6px;
    gap: 4px;
  }
  html .nhs-qr {
    max-width: 96px;
  }
}

/* 触屏：关闭按钮放大到 44px 触控目标 */
@media (max-width: 640px), (pointer: coarse) {
  html #nhs-popup .nhs-close {
    width: 44px;
    height: 44px;
    top: 8px;
    inset-inline-end: 8px;
  }
}

/* ============================================================
 * 9. 登录 / 注册 / 找回密码（html.nhs-auth）
 *    这些页面没有面板外壳，表单直接落在壁纸上：文字对比度完全取决于
 *    壁纸那一块是明是暗。所以这里只做一件事 —— 把 480px 表单列做成一块
 *    浮层玻璃板，文字从此有稳定的底；顺带统一页面上几种控件的高度与材质。
 *    html.nhs-auth 由 sponsor.js 按路由打标记（CSS 拿不到路径）。
 * ========================================================== */

/* 短屏（手机键盘弹起 / 横屏）允许滚动，别把表单顶出可视区 */
html.nhs-auth #root > .grid.h-svh {
  height: auto;
  min-height: 100svh;
}

/* 表单列 = 浮层玻璃板 */
html.nhs-auth .container > div {
  padding: calc(var(--bf-s4) * 1.15) var(--bf-s4);
  border-radius: var(--bf-radius-lg);
  /* 88% 而不是 97%：让壁纸透一点进来有存在感；浅模糊让透进来的那 12%
     是柔和的色块而不是清晰图像，正文才不会被壁纸细节干扰。 */
  background-color: color-mix(in oklch, var(--card, #ffffff) 88%, transparent);
  border: 1px solid var(--bf-hairline);
  box-shadow:
    0 0 0 1px var(--bf-hairline),
    0 28px 64px -34px rgba(2, 6, 23, 0.5);
  -webkit-backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
  backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
  animation: nhs-auth-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 640px) {
  html.nhs-auth .container > div {
    padding: calc(var(--bf-s4) * 1.5) calc(var(--bf-s4) * 1.4);
  }
}

.dark .nhs-auth .container > div,
html.dark.nhs-auth .container > div {
  background-color: color-mix(in oklch, var(--card, #ffffff) 86%, transparent);
}

/* 窄屏：卡片不贴屏幕边（容器本身没有内边距），短屏靠上面的 height:auto 滚动 */
@media (max-width: 639px) {
  html.nhs-auth .container > div {
    max-width: calc(100% - 1.5rem);
    margin-inline: auto;
    padding: calc(var(--bf-s4) * 0.9) var(--bf-s4);
  }
}

@keyframes nhs-auth-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 左上角品牌：玻璃胶囊，别让 logo 和站名裸奔在壁纸上 */
html.nhs-auth .grid.h-svh > a[href='/'] {
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background-color: color-mix(in oklch, var(--card, #ffffff) var(--bf-a-float), transparent);
  border: 1px solid var(--bf-hairline);
  box-shadow: var(--bf-card-shadow);
  -webkit-backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
  backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
}

html.nhs-auth .grid.h-svh > a[href='/'] h1 {
  font-weight: 600;
  letter-spacing: -0.008em;
}

html.nhs-auth .grid.h-svh > a[href='/'] img {
  box-shadow: 0 0 0 1px var(--bf-hairline);
}

html.nhs-auth h2 {
  text-wrap: balance;
}

/* 「OR」分隔标签用的是 bg-background，在玻璃板上会成为另一种材质，
   这里跟卡片同档，让它融进去（否则是一条突兀的色块） */
html.nhs-auth .bg-background {
  background-color: color-mix(in oklch, var(--card, #ffffff) var(--bf-a-float), transparent);
}

/* 输入框：给字段自己的底，避免「半透明套半透明」看不清边界 */
html.nhs-auth [data-slot='input'] {
  height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: calc(var(--radius, 1rem) * 0.75);
  background-color: color-mix(in oklch, var(--bf-block, var(--muted, #f5f5f5)) 70%, transparent);
  border-color: color-mix(in oklch, var(--border, #e5e7eb) 85%, transparent);
}

html.nhs-auth [data-slot='input']:focus-visible {
  background-color: color-mix(in oklch, var(--card, #ffffff) 92%, transparent);
}

/* 全宽 CTA 统一 44px：同一张卡里，提交按钮(h-8)和第三方登录按钮(h-11)
   原本差一档高度，视觉上很碎。密码框里那个显示/隐藏按钮不是 w-full，
   不受影响。 */
html.nhs-auth form [data-slot='button'].w-full {
  height: 2.75rem;
  border-radius: calc(var(--radius, 1rem) * 0.75);
}

/* ============================================================
 * 10. 分流统计页（html.nhs-flow = /dashboard/flow）
 *     这页是「一张大图 + 一圈 12px 小标签 + 密集数字」的组合，文字问题集中在三处：
 *       1. VChart 的 HTML tooltip —— 全页信息密度最高的地方，它自带内联样式
 *          （11px + 主题字体 + 白底方角），是唯一必须用 !important 的地方；
 *       2. 筛选区的 text-xs 标签，中文下 12px 偏小、行高偏紧；
 *       3. 数字列（额度/Token/请求数）需要等宽对齐。
 *     需要说清的边界：Sankey 图里的节点名、连线数值是 **canvas 绘制**，
 *     CSS 改不到（canvas 文本用的是绘制时传入的 font，与页面字体无关）。
 *     这里能保证的是它所在的表面足够稳（raised 档），以及 tooltip 可读。
 * ========================================================== */

/* ---- 1. 图表 tooltip（VChart DOM tooltip：内联样式 → 必须 !important） ---- */
html.nhs-flow [vchart-tooltip-id] {
  font-family: var(--font-body, var(--font-sans)) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-variant-numeric: tabular-nums;
  padding: 10px 12px !important;
  border-radius: calc(var(--radius, 1rem) * 0.6) !important;
  border: 1px solid var(--bf-hairline) !important;
  background-color: color-mix(
    in oklch,
    var(--popover, var(--card, #ffffff)) var(--bf-a-float),
    transparent
  ) !important;
  color: var(--popover-foreground, var(--foreground)) !important;
  box-shadow: 0 12px 32px -14px rgba(2, 6, 23, 0.4) !important;
  -webkit-backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
  backdrop-filter: blur(var(--bf-blur-2)) saturate(150%);
}

/* 列内容也可能各自带内联字号，一起兜住 */
html.nhs-flow
  [vchart-tooltip-id]
  :is(
    .vchart-tooltip-title,
    .vchart-tooltip-column,
    .vchart-tooltip-key,
    .vchart-tooltip-value,
    .vchart-tooltip-shape
  ) {
  font-family: var(--font-body, var(--font-sans)) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

html.nhs-flow [vchart-tooltip-id] .vchart-tooltip-title {
  font-weight: 600;
  letter-spacing: -0.006em;
  margin-bottom: 6px;
}

html.nhs-flow [vchart-tooltip-id] .vchart-tooltip-content-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

html.nhs-flow [vchart-tooltip-id] .vchart-tooltip-key {
  font-weight: 600;
}

html.nhs-flow [vchart-tooltip-id] .vchart-tooltip-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ---- 2. 筛选区小标签：12px → 12.5px，行高松一档，字重提一档 ---- */
html.nhs-flow .text-xs {
  font-size: 0.78rem;
  line-height: 1.5;
}

html.nhs-flow .text-muted-foreground.font-medium {
  font-weight: 600;
}

/* ---- 3. 数字：额度 / Token / 请求数一律等宽对齐 ---- */
html.nhs-flow .font-mono,
html.nhs-flow [vchart-tooltip-id] .vchart-tooltip-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ---- 4. 图表的空态 / 错误态：说明文字比默认略大一点，读起来不费劲 ---- */
html.nhs-flow [data-slot='empty-description'],
html.nhs-flow [data-slot='alert-description'] {
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* ============================================================
 * 11. 动效与移动端降级
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-slot='card'],
  [data-slot='card']:has(a, button):hover,
  [data-slot='button'],
  [data-slot='table-row'],
  html #nhs-popup .nhs-modal {
    transition: none;
    transform: none;
  }
  html.nhs-auth .container > div {
    animation: none;
  }
}

/* 触屏/窄屏：浮层再各自 backdrop-filter 收益低、滚动开销高 */
@media (max-width: 640px), (pointer: coarse) {
  [data-slot='dialog-content'],
  [data-slot='alert-dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='drawer-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='combobox-content'],
  [data-slot='hover-card-content'],
  [data-slot='context-menu-content'],
  [data-slot='menubar-content'],
  [data-slot='navigation-menu-content'],
  [data-slot='sidebar-wrapper'] header,
  html #nhs-popup,
  html #nhs-popup .nhs-modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ============================================================
 * 12. 可选：全局字体（霞鹜文楷）
 *     先在反代注入行里补字体 CDN，再打开下面这段。注意面板信息密度高，
 *     楷体 + 全局加粗会明显降低可读性。
 *
html, body, button, input, textarea, select, [data-slot='button'] {
  font-family: 'LXGW WenKai', var(--font-body), sans-serif;
}
*/