/* ==========================================================================
   /zy/theme.css — sub2api v0.2.13 用户控制台「留白」主题（注入式，不改源码）
   --------------------------------------------------------------------------
   加载位置：反代注入到 </head> 前、官方 index-*.css 之后。
   覆盖策略：
     · 官方 dark 变体编译为 ".x:is(.dark *)"（特异性 0,2,0），本文件用 html.dark 前缀取胜；
     · 懒加载路由块的 scoped 样式（DataTable / TablePageLayout / AuthLayout / onboarding.css）
       在运行时追加到 <head> 末尾、排在本文件之后，所以那几处用 !important；
     · 元素的 class 列表是静态的（亮色类 + dark: 类同时存在），所以用亮色类做复合选择器
       （如 .card .rounded-lg.bg-emerald-100）再靠令牌翻转，一条规则两种模式都生效。
   不改动：侧栏宽度 w-64 / 72px、顶栏 64px、main 内边距（TablePageLayout 写死 calc(100vh - 64px - 4rem)）。
   不触碰：Chart.js canvas、.btn-stripe/.btn-alipay/.btn-wxpay/.btn-airwallex。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 字体（同源自托管，仅 Latin 子集；中文落到系统字体栈）
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/zy/fonts/Manrope-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/zy/fonts/Manrope-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/zy/fonts/Manrope-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/zy/fonts/Manrope-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/zy/fonts/JetBrainsMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/zy/fonts/JetBrainsMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 中文展示字体（子集，只含站点标题会出现的字；缺字落到系统楷体）：霞鹜文楷 = 页面标题，马善政 = 店名 */
@font-face {
  font-family: "LXGW WenKai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/zy/fonts/LXGWWenKai-Medium-sub.woff2") format("woff2");
}
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/zy/fonts/MaShanZheng-sub.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. 设计令牌（亮色在 :root，暗色在 html.dark；多数规则靠令牌翻转自动适配暗色）
   -------------------------------------------------------------------------- */
:root {
  --zy-kai: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --zy-brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  --zy-bg: #FFFFFF;
  --zy-surface: #FAFAF9;
  --zy-hover: #F5F5F4;              /* 补充：悬停底色，介于 surface 与 border 之间 */
  --zy-border: #E7E5E4;
  --zy-border-strong: #D6D3D1;
  --zy-text: #1C1917;
  --zy-text-2: #57534E;
  --zy-muted: #78716C;
  --zy-accent: #9A5B2E;
  --zy-accent-hover: #7F4A24;
  --zy-accent-soft: rgba(154, 91, 46, .10);
  --zy-success: #2F7A4F;
  --zy-warning: #A16207;
  --zy-danger: #B42318;
  --zy-success-soft: rgba(47, 122, 79, .08);
  --zy-warning-soft: rgba(161, 98, 7, .08);
  --zy-danger-soft: rgba(180, 35, 24, .08);
  --zy-code-bg: #F5F5F4;
  --zy-ink: #1C1917;
  --zy-ink-text: #FFFFFF;
  --zy-ink-hover: #292524;
  --zy-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  --zy-overlay: rgba(28, 25, 23, .40);
  --zy-sans: "Manrope", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --zy-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html.dark {
  --zy-bg: #0C0A09;
  --zy-surface: #161412;
  --zy-hover: #1F1C1A;
  --zy-border: #292524;
  --zy-border-strong: #44403C;
  --zy-text: #F5F5F4;
  --zy-text-2: #A8A29E;
  --zy-muted: #8A8178;
  --zy-accent: #D9A066;
  --zy-accent-hover: #E6B27F;
  --zy-accent-soft: rgba(217, 160, 102, .14);
  --zy-success: #6CC08B;
  --zy-warning: #E3B341;
  --zy-danger: #F0857A;
  --zy-success-soft: rgba(108, 192, 139, .12);
  --zy-warning-soft: rgba(227, 179, 65, .12);
  --zy-danger-soft: rgba(240, 133, 122, .12);
  --zy-code-bg: #141210;
  --zy-ink: #F5F5F4;
  --zy-ink-text: #0C0A09;
  --zy-ink-hover: #E7E5E4;
  --zy-shadow: 0 1px 2px rgba(0, 0, 0, .40);
  --zy-overlay: rgba(0, 0, 0, .60);
}

/* --------------------------------------------------------------------------
   2. 基础：字体、页面底色、默认边框色、选区
   -------------------------------------------------------------------------- */
html { font-family: var(--zy-sans); }                              /* 覆盖 preflight html,:host 的 font-family */
body, html.dark body {
  background-color: var(--zy-bg);
  color: var(--zy-text);
  font-family: var(--zy-sans);
  font-feature-settings: "tnum" 1;
}
.min-h-screen.bg-gray-50 { background-color: var(--zy-bg); }     /* AppLayout 根：纯白页面，不要 gray-50 */
code, kbd, samp, pre, .font-mono { font-family: var(--zy-mono); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--zy-ink); }

/* style.css @layer base: * { border-gray-200 dark:border-dark-700 } → *:is(.dark *) 特异性 0,1,0 */
*, ::before, ::after { border-color: var(--zy-border); }
/* 深色底色：官方 *:is(.dark *) 是 0,1,0；用同形选择器而不是 html.dark *（0,1,1 会压掉所有只写了亮色的边框工具类） */
*:is(.dark *) { border-color: var(--zy-border); --tw-ring-offset-color: var(--zy-bg); }
/* 上面两条在源码顺序上晚于工具类，等特异性会赢；把必须保留原值的边框工具类再声明一遍 */
.border-transparent, html.dark .border-transparent, html.dark .dark\:border-transparent { border-color: transparent; }
.border-t-transparent, html.dark .border-t-transparent { border-top-color: transparent; }
.border-b-transparent, html.dark .border-b-transparent { border-bottom-color: transparent; }
.border-l-transparent, html.dark .border-l-transparent { border-left-color: transparent; }
.border-r-transparent, html.dark .border-r-transparent { border-right-color: transparent; }
.border-white, html.dark .border-white { border-color: #fff; }
.border-current, html.dark .border-current { border-color: currentColor; }
/* Toast（Toast.vue 用的是裸工具类：rounded-lg shadow-lg bg-white border-l-4 border-*-500）：条纹改语义色 */
.border-green-500, html.dark .border-green-500, .border-emerald-500, html.dark .border-emerald-500 { border-color: var(--zy-success); }
.border-red-500, html.dark .border-red-500 { border-color: var(--zy-danger); }
.border-yellow-500, html.dark .border-yellow-500, .border-amber-500, html.dark .border-amber-500 { border-color: var(--zy-warning); }
.border-blue-500, html.dark .border-blue-500 { border-color: var(--zy-accent); }
.border-l-4.rounded-lg.shadow-lg, html.dark .border-l-4.rounded-lg.shadow-lg {
  box-shadow: var(--zy-shadow);
  border-top: 1px solid var(--zy-border);
  border-right: 1px solid var(--zy-border);
  border-bottom: 1px solid var(--zy-border);
  border-left-width: 3px;
  border-radius: 8px;
}

::selection,
.selection\:bg-primary-100::selection, .selection\:bg-primary-100 *::selection,
.selection\:bg-primary-200::selection, .selection\:bg-primary-200 *::selection,
.selection\:text-primary-900::selection, .selection\:text-primary-900 *::selection {
  background-color: var(--zy-accent-soft);
  color: var(--zy-text);
}
html.dark ::selection,
html.dark .dark\:selection\:bg-primary-200::selection, html.dark .dark\:selection\:bg-primary-200 *::selection,
html.dark .dark\:selection\:bg-primary-900\/60::selection, html.dark .dark\:selection\:bg-primary-900\/60 *::selection,
html.dark .dark\:selection\:text-primary-100::selection, html.dark .dark\:selection\:text-primary-100 *::selection {
  background-color: var(--zy-accent-soft);
  color: var(--zy-text);
}

/* --------------------------------------------------------------------------
   3. 去装饰：网格渐变背景、毛玻璃、发光、投影、文字渐变
   -------------------------------------------------------------------------- */
.bg-mesh-gradient { display: none; }
.glass, html.dark .glass {
  background-color: var(--zy-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--zy-border);
}
.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-xl {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.shadow-glow, .shadow-glass, .shadow-card,
.card.shadow, .card.shadow-sm, .card.shadow-md, .card.shadow-lg, .card.shadow-xl, .card.shadow-2xl,
.hover\:shadow:hover, .hover\:shadow-sm:hover, .hover\:shadow-md:hover, .hover\:shadow-lg:hover,
.hover\:shadow-xl:hover, .hover\:shadow-card-hover:hover,
.hover\:shadow-primary-500\/10:hover, .hover\:shadow-primary-500\/30:hover {
  box-shadow: none;
}
.shadow-primary-500\/20, .shadow-primary-500\/25, .shadow-primary-500\/30, .shadow-primary-600\/20,
html.dark .dark\:shadow-primary-500\/20 {
  --tw-shadow-color: transparent;
  --tw-shadow: 0 0 #0000;
  box-shadow: none;
}
main .shadow-sm, main .shadow { box-shadow: none; }
main .shadow-md, main .shadow-lg, main .shadow-xl, main .shadow-2xl { box-shadow: var(--zy-shadow); }
.table-wrapper thead.sticky { box-shadow: none; }

/* .text-gradient：全局 utilities 版 + AuthLayout scoped 版（懒加载块，需 !important） */
.text-gradient, h1.text-gradient {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--zy-text) !important;
}

/* 主色渐变工具类：全部去掉 background-image（.bg-gradient-to-* 与之同特异性且在前） */
.from-primary-50, .from-primary-400, .from-primary-500, .from-primary-600,
.to-primary-100, .to-primary-500, .to-primary-600, .via-primary-50\/30,
.hover\:from-primary-600:hover, .hover\:to-primary-700:hover,
.from-gray-50, .from-gray-100, .to-gray-100, .to-gray-200,
html.dark .dark\:from-primary-900\/20, html.dark .dark\:from-primary-900\/30, html.dark .dark\:from-primary-950\/40,
html.dark .dark\:to-primary-800\/20,
html.dark .dark\:from-dark-700, html.dark .dark\:from-dark-900, html.dark .dark\:from-dark-950,
html.dark .dark\:to-dark-600, html.dark .dark\:to-dark-700, html.dark .dark\:to-dark-800, html.dark .dark\:to-dark-950,
html.dark .dark\:via-dark-900 {
  background-image: none;
}
.from-primary-50, .from-gray-100,
html.dark .dark\:from-primary-900\/20, html.dark .dark\:from-primary-900\/30, html.dark .dark\:from-primary-950\/40,
html.dark .dark\:from-dark-700, html.dark .dark\:from-dark-900 {
  background-color: var(--zy-surface);
}
/* AuthLayout 的整页渐变底（from-gray-50 / dark:from-dark-950）→ 页面纯底色，登录卡靠发丝线区分 */
.from-gray-50, html.dark .dark\:from-dark-950 { background-color: var(--zy-bg); }
.from-primary-400, .from-primary-500, .from-primary-600 {           /* 头像、进度条等实心渐变 → 墨色 */
  background-color: var(--zy-ink);
  color: var(--zy-ink-text);
}
.from-primary-500 .text-white, .from-primary-600 .text-white { color: var(--zy-ink-text); }

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
/* 支付品牌按钮（.btn-stripe/.btn-alipay/.btn-wxpay/.btn-airwallex）保持官方样式，通用 .btn 规则一律绕开它们 */
.btn:not(.btn-stripe):not(.btn-alipay):not(.btn-wxpay):not(.btn-airwallex) {
  border-radius: 6px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:not(.btn-stripe):not(.btn-alipay):not(.btn-wxpay):not(.btn-airwallex):active { transform: none; }
.btn:not(.btn-stripe):not(.btn-alipay):not(.btn-wxpay):not(.btn-airwallex):focus { box-shadow: none; }
.btn:not(.btn-stripe):not(.btn-alipay):not(.btn-wxpay):not(.btn-airwallex):focus-visible { box-shadow: 0 0 0 3px var(--zy-accent-soft); }
.btn-sm { border-radius: 6px; }
.btn-icon { border-radius: 6px; }

.btn-primary, html.dark .btn-primary {
  background-image: none;
  background-color: var(--zy-ink);
  color: var(--zy-ink-text);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: none;
}
.btn-primary:hover, html.dark .btn-primary:hover {
  background-color: var(--zy-ink-hover);
  box-shadow: none;
}
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--zy-accent-soft); }

.btn-secondary, html.dark .btn-secondary {
  background-color: transparent;
  color: var(--zy-text);
  border: 1px solid var(--zy-border-strong);
  box-shadow: none;
}
.btn-secondary:hover, html.dark .btn-secondary:hover {
  background-color: var(--zy-hover);
  border-color: var(--zy-border-strong);
}

.btn-ghost, html.dark .btn-ghost { background-color: transparent; color: var(--zy-text-2); }
.btn-ghost:hover, html.dark .btn-ghost:hover { background-color: var(--zy-hover); color: var(--zy-text); }

.btn-danger, .btn-success, .btn-warning,
html.dark .btn-danger, html.dark .btn-success, html.dark .btn-warning {
  background-image: none;
  color: #FFFFFF;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: none;
}
.btn-danger { background-color: var(--zy-danger); }
.btn-success { background-color: var(--zy-success); }
.btn-warning { background-color: var(--zy-warning); }
.btn-danger:hover, .btn-success:hover, .btn-warning:hover { box-shadow: none; }
.btn-danger:hover { background-color: color-mix(in srgb, var(--zy-danger) 88%, #000); }
.btn-success:hover { background-color: color-mix(in srgb, var(--zy-success) 88%, #000); }
.btn-warning:hover { background-color: color-mix(in srgb, var(--zy-warning) 88%, #000); }
html.dark .btn-danger, html.dark .btn-success, html.dark .btn-warning { color: var(--zy-ink-text); }

/* --------------------------------------------------------------------------
   5. 输入框
   -------------------------------------------------------------------------- */
.input, html.dark .input {
  border-radius: 6px;
  background-color: var(--zy-bg);
  border-color: var(--zy-border-strong);
  color: var(--zy-text);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.input::placeholder, html.dark .input::placeholder { color: var(--zy-muted); }
.input:focus, html.dark .input:focus {
  border-color: var(--zy-accent);
  box-shadow: 0 0 0 3px var(--zy-accent-soft);
  --tw-ring-color: var(--zy-accent-soft);
}
.input:disabled, html.dark .input:disabled { background-color: var(--zy-surface); color: var(--zy-muted); }
.input-error, html.dark .input-error { border-color: var(--zy-danger); }
.input-error:focus, html.dark .input-error:focus {
  border-color: var(--zy-danger);
  box-shadow: 0 0 0 3px var(--zy-danger-soft);
}
.input-label, html.dark .input-label { color: var(--zy-text); font-size: 13px; font-weight: 500; }
.input-hint, html.dark .input-hint { color: var(--zy-muted); }

/* --------------------------------------------------------------------------
   6. 卡片 / 统计卡
   -------------------------------------------------------------------------- */
.card, .stat-card {
  background-color: var(--zy-bg);
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: none;
  transition: background-color .15s, border-color .15s;
}
html.dark .card, html.dark .stat-card { background-color: var(--zy-surface); border-color: var(--zy-border); }
.card-header, html.dark .card-header { border-color: var(--zy-border); }
.stat-icon { border-radius: 8px; }
.stat-icon-primary, .stat-icon-success, .stat-icon-warning, .stat-icon-danger,
html.dark .stat-icon-primary, html.dark .stat-icon-success, html.dark .stat-icon-warning, html.dark .stat-icon-danger {
  background-color: var(--zy-surface);
  color: var(--zy-text-2);
  border: 1px solid var(--zy-border);
}
.stat-value, html.dark .stat-value { color: var(--zy-text); font-weight: 600; }
.stat-label, html.dark .stat-label { color: var(--zy-text-2); }

/* 卡片内的彩色图标块（UserDashboardStats / RecentUsage / QuickActions）：
   仅限 rounded-lg / rounded-xl 的方块，不碰 rounded-full 的状态胶囊、.badge、.btn-*、teal-* 平台色。
   复合选择器 (0,3,0) 同时压过 .dark\:bg-*-900\/30:is(.dark *) (0,2,0)，两种模式都生效。 */
.card .rounded-lg.bg-primary-100, .card .rounded-xl.bg-primary-100,
.card .rounded-lg.bg-emerald-100, .card .rounded-xl.bg-emerald-100,
.card .rounded-lg.bg-blue-100,    .card .rounded-xl.bg-blue-100,
.card .rounded-lg.bg-green-100,   .card .rounded-xl.bg-green-100,
.card .rounded-lg.bg-purple-100,  .card .rounded-xl.bg-purple-100,
.card .rounded-lg.bg-amber-100,   .card .rounded-xl.bg-amber-100,
.card .rounded-lg.bg-indigo-100,  .card .rounded-xl.bg-indigo-100,
.card .rounded-lg.bg-violet-100,  .card .rounded-xl.bg-violet-100,
.card .rounded-lg.bg-rose-100,    .card .rounded-xl.bg-rose-100,
.card .rounded-lg.bg-sky-100,     .card .rounded-xl.bg-sky-100 {
  background-color: var(--zy-surface);
  border: 1px solid var(--zy-border);
  border-radius: 8px;
}
/* 图标块里的图标颜色保留官方（emerald/blue/purple…），只把底色压成中性 */
/* 统计卡里的彩色数字（余额 emerald / 今日消费 purple / RPM·TPM violet）保留官方颜色——用户 10-07 要求文字颜色不动 */

/* 仪表盘 RecentUsage / QuickActions 的列表行：rounded-xl bg-gray-50 … dark:bg-dark-800/50 */
.card .rounded-xl.bg-gray-50 {
  background-color: var(--zy-bg);
  border: 1px solid var(--zy-border);
  border-radius: 8px;
  transition: background-color .15s, border-color .15s;
}
.card .rounded-xl.bg-gray-50:hover {
  background-color: var(--zy-hover);
  border-color: var(--zy-border-strong);
}
.group:hover .group-hover\:scale-105, .group:hover .group-hover\:scale-110 { transform: none; }

/* --------------------------------------------------------------------------
   7. 侧栏
   -------------------------------------------------------------------------- */
.sidebar, html.dark .sidebar {
  background-color: var(--zy-bg);
  border-right: 1px solid var(--zy-border);
}
.sidebar-header, html.dark .sidebar-header { border-bottom-color: var(--zy-border); }
.sidebar-logo {                                     /* a.sidebar-logo.rounded-xl.shadow-glow（AppSidebar 模板） */
  border-radius: 9999px;
  box-shadow: none;
}
.sidebar-brand-title, html.dark .sidebar-brand-title { color: var(--zy-text); font-family: var(--zy-brush); font-size: 20px; font-weight: 400; letter-spacing: .02em; }
.sidebar-brand-title:hover, html.dark .sidebar-brand-title:hover { color: var(--zy-text); }
.sidebar-link, html.dark .sidebar-link {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 6px;
  color: var(--zy-text-2);
  font-weight: 500;
  transition: color .15s, background-color .15s;
}
.sidebar-link:hover, html.dark .sidebar-link:hover {
  background-color: var(--zy-hover);
  color: var(--zy-text);
}
/* 官方 .sidebar-link 为 display:flex + overflow:hidden（无 position），指示条放在链接盒内 left:0 才不会被裁掉 */
.sidebar-link-active, html.dark .sidebar-link-active {
  position: relative;
  background-color: var(--zy-surface);
  color: var(--zy-text);
  font-weight: 500;
}
.sidebar-link-active:hover, html.dark .sidebar-link-active:hover {
  background-color: var(--zy-hover);
  color: var(--zy-text);
}
.sidebar-link-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--zy-accent);
}
.sidebar-section-title, html.dark .sidebar-section-title {
  color: var(--zy-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
}
.sidebar .border-t.border-gray-100 { border-color: var(--zy-border); }

/* --------------------------------------------------------------------------
   8. 顶栏（header.glass，高度 64px 不动）
   -------------------------------------------------------------------------- */
header.glass, html.dark header.glass {
  background-color: var(--zy-bg);
  border-bottom: 1px solid var(--zy-border);
}
header.glass h1, html.dark header.glass h1 {
  font-family: var(--zy-kai);
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
  color: var(--zy-text);
}
header.glass .bg-primary-50 {                        /* 余额胶囊：rounded-xl bg-primary-50 dark:bg-primary-900/20 */
  background-color: var(--zy-surface);
  border: 1px solid var(--zy-border);
  border-radius: 6px;
}
/* 余额胶囊里的文字与图标颜色保留官方 */
header.glass .h-8.w-8.rounded-xl { border-radius: 9999px; }        /* 用户头像 → 圆形 */
header.glass .shadow-lg { box-shadow: var(--zy-shadow); }

/* --------------------------------------------------------------------------
   9. 表格（.table 组件类 + DataTable / TablePageLayout 懒加载 scoped 样式）
   -------------------------------------------------------------------------- */
.table-container, html.dark .table-container { border-radius: 8px; border-color: var(--zy-border); }
.table th, html.dark .table th {
  background-color: var(--zy-bg);
  color: var(--zy-muted);
  font-size: 12px;
  font-weight: 500;
  border-bottom-color: var(--zy-border);
}
html.dark .table th { background-color: var(--zy-surface); }
.table td, html.dark .table td { border-bottom-color: var(--zy-border); }   /* 单元格文字颜色不动（金额绿、模型名蓝等保留） */
.table tbody tr:hover, html.dark .table tbody tr:hover { background-color: var(--zy-hover); }

/* DataTable.vue：thead.table-header.bg-gray-50.dark:bg-dark-800 + th.sticky-header-cell（scoped，晚于本文件加载） */
thead.table-header, .sticky-header-cell { background-color: var(--zy-bg) !important; }
html.dark thead.table-header, html.dark .sticky-header-cell { background-color: var(--zy-surface) !important; }
.sticky-header-cell {
  color: var(--zy-muted) !important;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--zy-border);
}
tbody .sticky-col { background-color: var(--zy-bg) !important; }
html.dark tbody .sticky-col { background-color: var(--zy-surface) !important; }
tbody tr:hover .sticky-col, html.dark tbody tr:hover .sticky-col { background-color: var(--zy-hover) !important; }   /* 悬停行的固定列跟着变色，不留缝 */

/* TablePageLayout.vue：.card.table-scroll-container（scoped 带 rounded-2xl / shadow-sm / dark:bg-dark-800） */
.card.table-scroll-container {
  border-radius: 10px !important;
  border-color: var(--zy-border) !important;
  background-color: var(--zy-bg) !important;
  box-shadow: none !important;
}
html.dark .card.table-scroll-container { background-color: var(--zy-surface) !important; }
.table-scroll-container thead {
  background-color: var(--zy-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.dark .table-scroll-container thead { background-color: var(--zy-surface) !important; }
.table-scroll-container th { font-size: 12px !important; border-bottom-color: var(--zy-border) !important; }
.table-scroll-container td { border-bottom-color: var(--zy-border) !important; }   /* 文字颜色不动 */
.table-page-layout.mobile-mode .table-scroll-container { border-color: transparent !important; background-color: transparent !important; }

/* --------------------------------------------------------------------------
   10. 徽章
   -------------------------------------------------------------------------- */
.badge {
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
/* 徽章只改形状（4px 圆角），颜色一律保留官方 */

/* --------------------------------------------------------------------------
   11. 下拉 / 弹窗 / Toast / 标签页 / 进度 / 空状态 / 代码 / 骨架
   -------------------------------------------------------------------------- */
.dropdown, html.dark .dropdown {
  background-color: var(--zy-bg);
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  box-shadow: var(--zy-shadow);
  animation: none;
}
html.dark .dropdown { background-color: var(--zy-surface); }
.dropdown-item, html.dark .dropdown-item { color: var(--zy-text-2); }
.dropdown-item:hover, html.dark .dropdown-item:hover { background-color: var(--zy-hover); color: var(--zy-text); }

.modal-overlay, html.dark .modal-overlay {
  background-color: var(--zy-overlay);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.modal-content, html.dark .modal-content {
  background-color: var(--zy-bg);
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  box-shadow: var(--zy-shadow);
}
html.dark .modal-content { background-color: var(--zy-surface); }
.modal-header, .modal-footer, html.dark .modal-header, html.dark .modal-footer { border-color: var(--zy-border); }
.modal-title, html.dark .modal-title { color: var(--zy-text); font-size: 16px; font-weight: 600; }

/* Toast.vue 不用 .toast 类（裸工具类），见第 2 节的 .border-l-4.rounded-lg.shadow-lg 规则 */

/* 标签页改为下划线式 */
.tabs, html.dark .tabs {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  gap: 4px;
  border-bottom: 1px solid var(--zy-border);
}
.tab, html.dark .tab {
  border-radius: 0;
  margin-bottom: -1px;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  color: var(--zy-text-2);
  transition: color .15s, border-color .15s;
}
.tab:hover, html.dark .tab:hover { color: var(--zy-text); }
.tab-active, html.dark .tab-active {
  background-color: transparent;
  color: var(--zy-text);
  border-bottom-color: var(--zy-ink);
  box-shadow: none;
}

.progress, html.dark .progress { background-color: var(--zy-border); border-radius: 2px; }

/* 空状态（EmptyState.vue：div.empty-state > div.h-20.w-20.rounded-2xl.bg-gray-100.dark:bg-dark-800） */
.empty-state > .rounded-2xl.bg-gray-100 {
  background-color: var(--zy-surface);
  border: 1px solid var(--zy-border);
  border-radius: 10px;
}
.empty-state-icon, html.dark .empty-state-icon { color: var(--zy-muted); }
.empty-state-title, html.dark .empty-state-title { color: var(--zy-text); font-size: 15px; font-weight: 600; }
.empty-state-description, html.dark .empty-state-description { color: var(--zy-text-2); }

.code, html.dark .code {
  font-family: var(--zy-mono);
  background-color: var(--zy-code-bg);
  color: var(--zy-text);
  border: 1px solid var(--zy-border);
  border-radius: 4px;
}
.skeleton, html.dark .skeleton { background-color: var(--zy-border); }
.page-title, html.dark .page-title { color: var(--zy-text); font-size: 20px; line-height: 28px; font-weight: 600; }
.page-description, html.dark .page-description { color: var(--zy-text-2); }
.markdown-body a, html.dark .markdown-body a { color: var(--zy-accent); text-decoration-color: var(--zy-accent-soft); }
.markdown-body a:hover, html.dark .markdown-body a:hover { color: var(--zy-accent-hover); text-decoration-color: var(--zy-accent); }

/* --------------------------------------------------------------------------
   12. 登录 / 注册（AuthLayout.vue）
   -------------------------------------------------------------------------- */
.blur-3xl, .blur-2xl { display: none; }                               /* 三个光斑 */
.bg-\[size\:64px_64px\] { display: none; }                            /* 网格纹理层（grep：仅 AuthLayout 使用） */
.card-glass, html.dark .card-glass {
  background-color: var(--zy-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--zy-border);
  border-radius: 12px;
  box-shadow: none;
}
html.dark .card-glass { background-color: var(--zy-surface); }
.card-glass.rounded-2xl { border-radius: 12px; }
/* Logo 盒：div.h-16.w-16.rounded-2xl.shadow-lg.shadow-primary-500/30 > img[alt=Logo] */
.h-16.w-16.rounded-2xl.shadow-primary-500\/30 {
  height: 44px;
  width: 44px;
  margin-bottom: 12px;
  border-radius: 9999px;
  box-shadow: none;
}
h1.text-gradient { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 4px; }
h1.text-gradient + p, html.dark h1.text-gradient + p { font-size: 13px; color: var(--zy-text-2); }

/* --------------------------------------------------------------------------
   13. 兑换页英雄区（RedeemView.vue：div.card.overflow-hidden > div.bg-gradient-to-br.from-primary-500.to-primary-600）
   -------------------------------------------------------------------------- */
.card > .bg-gradient-to-br.from-primary-500 {
  background-image: none;
  background-color: var(--zy-surface);
  color: var(--zy-text);
}
.card > .bg-gradient-to-br.from-primary-500 .text-white { color: var(--zy-text); }
.card > .bg-gradient-to-br.from-primary-500 .text-primary-100 { color: var(--zy-text-2); }
.card > .bg-gradient-to-br.from-primary-500 .bg-white\/20 {
  background-color: var(--zy-bg);
  border: 1px solid var(--zy-border);
  border-radius: 10px;
}
.card > .bg-gradient-to-br.from-primary-500 .bg-white\/20 .text-white { color: var(--zy-text-2); }

/* --------------------------------------------------------------------------
   14. 工具类映射 · 主色（teal）→ 墨色 / 强调色
   -------------------------------------------------------------------------- */
/* 14a 浅色底（tint）→ surface */
.bg-primary-50, .bg-primary-50\/40, .bg-primary-50\/50, .bg-primary-50\/60, .bg-primary-50\/70, .bg-primary-50\/80,
.bg-primary-100, .bg-primary-200\/50, .bg-primary-300\/10, .bg-primary-400\/10, .bg-primary-400\/20,
.bg-primary-500\/10, .bg-primary-500\/15, .bg-primary-900\/10,
.peer:checked ~ .peer-checked\:bg-primary-50\/60,
html.dark .dark\:bg-primary-400\/10, html.dark .dark\:bg-primary-500\/10, html.dark .dark\:bg-primary-500\/15,
html.dark .dark\:bg-primary-800\/40, html.dark .dark\:bg-primary-900\/10, html.dark .dark\:bg-primary-900\/20,
html.dark .dark\:bg-primary-900\/25, html.dark .dark\:bg-primary-900\/30, html.dark .dark\:bg-primary-900\/40,
html.dark .dark\:bg-primary-950, html.dark .dark\:bg-primary-950\/20, html.dark .dark\:bg-primary-950\/40,
html.dark .peer:checked ~ .dark\:peer-checked\:bg-primary-500\/10 {
  background-color: var(--zy-surface);
}
.hover\:bg-primary-50:hover, .hover\:bg-primary-50\/50:hover, .hover\:bg-primary-100:hover, .hover\:bg-primary-200:hover,
.group:hover .group-hover\:bg-primary-50,
html.dark .dark\:hover\:bg-primary-800:hover, html.dark .dark\:hover\:bg-primary-900\/20:hover,
html.dark .dark\:hover\:bg-primary-900\/30:hover, html.dark .dark\:hover\:bg-primary-900\/50:hover,
html.dark .group:hover .dark\:group-hover\:bg-primary-500\/10 {
  background-color: var(--zy-hover);
}
/* 14b 实心主色 → 墨色（文字随之用 ink-text） */
.bg-primary-500, .bg-primary-600,
.peer:checked ~ .peer-checked\:bg-primary-500, .peer:checked ~ .peer-checked\:bg-primary-600,
html.dark .dark\:bg-primary-600 {
  background-color: var(--zy-ink);
  color: var(--zy-ink-text);
}
.bg-primary-500 .text-white, .bg-primary-600 .text-white { color: var(--zy-ink-text); }
.hover\:bg-primary-600:hover, .hover\:bg-primary-700:hover,
html.dark .dark\:hover\:bg-primary-500:hover {
  background-color: var(--zy-ink-hover);
}
.bg-primary-400, html.dark .dark\:bg-primary-300 { background-color: var(--zy-accent); }   /* 小状态点 */

/* 14c 文字：主色文字（链接、激活态等）保留官方青色 —— 用户 10-07 要求所有文字颜色不改 */

/* 14d 边框 */
.border-primary-100, .border-primary-100\/80, .border-primary-200, .border-primary-200\/80,
.hover\:border-primary-200:hover, .hover\:border-primary-300:hover,
html.dark .dark\:border-primary-400\/25, html.dark .dark\:border-primary-400\/30, html.dark .dark\:border-primary-500\/20,
html.dark .dark\:border-primary-700, html.dark .dark\:border-primary-700\/50, html.dark .dark\:border-primary-800,
html.dark .dark\:border-primary-800\/50, html.dark .dark\:border-primary-900\/40, html.dark .dark\:border-primary-900\/50,
html.dark .dark\:hover\:border-primary-700:hover, html.dark .dark\:hover\:border-primary-800:hover {
  border-color: var(--zy-border-strong);
}
.border-primary-300, .border-primary-400, .border-primary-500, .border-primary-600, .border-primary-600\/25,
.hover\:border-primary-400:hover, .hover\:border-primary-500:hover,
.focus\:border-primary-300:focus, .focus\:border-primary-400:focus, .focus\:border-primary-500:focus,
.focus-within\:border-primary-300:focus-within, .focus-within\:border-primary-500:focus-within,
html.dark .dark\:border-primary-400, html.dark .dark\:border-primary-500, html.dark .dark\:border-primary-600,
html.dark .dark\:hover\:border-primary-400:hover, html.dark .dark\:hover\:border-primary-500:hover, html.dark .dark\:hover\:border-primary-500\/30:hover,
html.dark .dark\:focus\:border-primary-500:focus, html.dark .dark\:focus\:border-primary-600:focus,
html.dark .dark\:focus-within\:border-primary-700:focus-within {
  border-color: var(--zy-accent);
}
.peer:checked ~ .peer-checked\:border-primary-500,
html.dark .peer:checked ~ .dark\:peer-checked\:border-primary-500,
html.dark .peer:checked ~ .peer-checked\:dark\:border-primary-500 {
  border-color: var(--zy-ink);
}
.hover\:border-l-primary-500:hover { border-left-color: var(--zy-accent); }
.border-t-primary-600, html.dark .dark\:border-t-primary-400 { border-top-color: var(--zy-text); }   /* 加载圈 */

/* 14e 焦点环 → 3px accent-soft 由 --tw-ring-color 承担 */
.ring-primary-100, .ring-primary-200\/80, .ring-primary-500\/20, .ring-primary-500\/40,
.focus\:ring-primary-100:focus, .focus\:ring-primary-300:focus, .focus\:ring-primary-400:focus, .focus\:ring-primary-500:focus,
.focus\:ring-primary-500\/20:focus, .focus\:ring-primary-500\/30:focus, .focus\:ring-primary-500\/40:focus,
.focus-visible\:ring-primary-500:focus-visible, .focus-visible\:ring-primary-500\/30:focus-visible,
.focus-within\:ring-primary-500:focus-within,
.group:hover .group-hover\:ring-primary-100,
.peer:checked ~ .peer-checked\:ring-primary-500, .peer:focus ~ .peer-focus\:ring-primary-300,
html.dark .dark\:ring-primary-500\/20, html.dark .dark\:ring-primary-700\/50, html.dark .dark\:ring-primary-900, html.dark .dark\:ring-primary-900\/40,
html.dark .dark\:focus\:ring-primary-600:focus, html.dark .dark\:focus\:ring-primary-900\/40:focus,
html.dark .peer:focus ~ .dark\:peer-focus\:ring-primary-800,
html.dark .group:hover .dark\:group-hover\:ring-primary-500\/20 {
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--zy-accent);   /* ring-1/ring-2 的细环用实色才看得见；3px 柔环只给 .input */
}
.peer:focus-visible ~ .peer-focus-visible\:outline-primary-500 { outline-color: var(--zy-accent); }

/* 14f 杂项 */
.accent-primary-600 { accent-color: var(--zy-ink); }
.hover\:decoration-primary-400:hover { text-decoration-color: var(--zy-accent); }

/* --------------------------------------------------------------------------
   15. 工具类映射 · 亮色中性灰 → 令牌
   -------------------------------------------------------------------------- */
.bg-gray-50, .bg-gray-50\/30, .bg-gray-50\/40, .bg-gray-50\/50, .bg-gray-50\/60, .bg-gray-50\/70, .bg-gray-50\/80,
.bg-gray-100 { background-color: var(--zy-surface); }
.bg-gray-200, .bg-gray-200\/60, .bg-gray-200\/70, .bg-gray-200\/80 { background-color: var(--zy-border); }
.bg-gray-300 { background-color: var(--zy-border-strong); }
.hover\:bg-gray-50:hover, .hover\:bg-gray-50\/40:hover, .hover\:bg-gray-50\/70:hover, .hover\:bg-gray-50\/80:hover,
.hover\:bg-gray-100:hover, .hover\:bg-gray-100\/80:hover { background-color: var(--zy-hover); }
.hover\:bg-gray-200:hover, .hover\:bg-gray-200\/70:hover { background-color: var(--zy-border); }

.border-gray-50, .border-gray-100, .border-gray-100\/50, .border-gray-100\/70, .border-gray-100\/80,
.border-gray-200, .border-gray-200\/50, .border-gray-200\/60, .border-gray-200\/80, .border-b-gray-200,
.divide-gray-100 > :not([hidden]) ~ :not([hidden]), .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--zy-border);
}
.border-gray-300, .border-gray-400, .border-gray-400\/70,
.hover\:border-gray-200:hover, .hover\:border-gray-300:hover, .hover\:border-gray-400:hover { border-color: var(--zy-border-strong); }
.ring-gray-200 { --tw-ring-color: var(--zy-border); }

.text-gray-950, .text-gray-900, .text-gray-800,
.hover\:text-gray-900:hover, .hover\:text-gray-700:hover { color: var(--zy-text); }
.text-gray-700, .text-gray-600, .text-gray-500,
.hover\:text-gray-600:hover, .hover\:text-gray-500:hover { color: var(--zy-text-2); }
.text-gray-400 { color: var(--zy-muted); }
.text-gray-300 { color: var(--zy-border-strong); }
html.dark .text-gray-300 { color: var(--zy-muted); }   /* 深色下 border-strong 几乎看不见 */
/* 彩色状态文字（0 启用 / 使用记录金额 / RPM 等）一律保留官方颜色，不再压灰 */
/* 公告铃铛 / 弹窗里的彩色渐变面板与彩色投影 */
.from-indigo-100\/30, .from-blue-400\/20, .from-amber-400\/20, .from-purple-400\/20,
.to-indigo-500\/20, .to-orange-500\/20, .to-pink-500\/20 { background-image: none; background-color: var(--zy-surface); }
.shadow-blue-500\/30, .shadow-amber-500\/30, .shadow-purple-500\/30 { --tw-shadow-color: transparent; box-shadow: none; }
/* 滚动条：中性色 */
* { scrollbar-color: var(--zy-border-strong) transparent; }
*::-webkit-scrollbar-thumb, *:hover::-webkit-scrollbar-thumb { background-color: var(--zy-border-strong); }
*::-webkit-scrollbar-track { background: transparent; }
.table-wrapper::-webkit-scrollbar-thumb { background-color: var(--zy-border-strong) !important; }
.table-wrapper::-webkit-scrollbar-track { background: transparent !important; }
.placeholder-gray-400::placeholder, .placeholder\:text-gray-400::placeholder,
input::placeholder, textarea::placeholder { color: var(--zy-muted); }

/* --------------------------------------------------------------------------
   16. 工具类映射 · 暗色中性（dark:*，全部 html.dark 前缀以压过 :is(.dark *)）
   -------------------------------------------------------------------------- */
html.dark .dark\:bg-dark-950, html.dark .dark\:bg-dark-950\/60,
html.dark .dark\:bg-dark-900, html.dark .dark\:bg-dark-900\/20, html.dark .dark\:bg-dark-900\/30, html.dark .dark\:bg-dark-900\/40,
html.dark .dark\:bg-dark-900\/50, html.dark .dark\:bg-dark-900\/60, html.dark .dark\:bg-dark-900\/70, html.dark .dark\:bg-dark-900\/90,
html.dark .dark\:bg-dark-900\/95, html.dark .dark\:focus\:bg-dark-900:focus {
  background-color: var(--zy-bg);
}
html.dark .dark\:bg-dark-800, html.dark .dark\:bg-dark-800\/30, html.dark .dark\:bg-dark-800\/40, html.dark .dark\:bg-dark-800\/50,
html.dark .dark\:bg-dark-800\/60, html.dark .dark\:bg-dark-800\/70, html.dark .dark\:bg-dark-800\/80, html.dark .dark\:\!bg-dark-800,
html.dark .dark\:bg-gray-800, html.dark .dark\:bg-gray-800\/80, html.dark .dark\:bg-gray-900, html.dark .dark\:bg-gray-900\/30,
html.dark .dark\:supports-\[backdrop-filter\]\:bg-dark-800\/95,
html.dark .dark\:focus\:bg-dark-800:focus {
  background-color: var(--zy-surface);
}
/* dark-700 在官方是「比卡片亮一档」的轨道/分隔/悬停底，对应亮色的 bg-gray-200 → 用 border 色，放在 surface 卡片里仍看得见 */
html.dark .dark\:bg-dark-700, html.dark .dark\:bg-dark-700\/20, html.dark .dark\:bg-dark-700\/30, html.dark .dark\:bg-dark-700\/40,
html.dark .dark\:bg-dark-700\/50, html.dark .dark\:bg-dark-700\/60, html.dark .dark\:bg-dark-700\/70, html.dark .dark\:bg-dark-700\/95 {
  background-color: var(--zy-border);
}
html.dark .dark\:\!bg-dark-800 { background-color: var(--zy-surface) !important; }
html.dark .dark\:bg-dark-600, html.dark .dark\:bg-dark-600\/70, html.dark .dark\:bg-dark-500,
html.dark .dark\:bg-gray-700, html.dark .dark\:bg-gray-600, html.dark .dark\:bg-gray-500, html.dark .dark\:bg-gray-500\/20 {
  background-color: var(--zy-border-strong);
}
html.dark .dark\:hover\:bg-dark-800:hover, html.dark .dark\:hover\:bg-dark-800\/40:hover, html.dark .dark\:hover\:bg-dark-800\/50:hover,
html.dark .dark\:hover\:bg-dark-800\/55:hover, html.dark .dark\:hover\:bg-dark-800\/60:hover, html.dark .dark\:hover\:bg-dark-800\/70:hover,
html.dark .dark\:hover\:bg-dark-700:hover, html.dark .dark\:hover\:bg-dark-700\/30:hover, html.dark .dark\:hover\:bg-dark-700\/40:hover,
html.dark .dark\:hover\:bg-dark-700\/50:hover, html.dark .dark\:hover\:bg-dark-700\/60:hover,
html.dark .dark\:hover\:bg-gray-700:hover, html.dark .dark\:hover\:bg-gray-800\/50:hover {
  background-color: var(--zy-hover);
}
html.dark .dark\:hover\:bg-dark-600:hover, html.dark .dark\:hover\:bg-dark-500:hover { background-color: var(--zy-border-strong); }

html.dark .dark\:border-dark-800, html.dark .dark\:border-dark-800\/50,
html.dark .dark\:border-dark-700, html.dark .dark\:border-dark-700\/50, html.dark .dark\:border-dark-700\/60,
html.dark .dark\:border-dark-700\/70, html.dark .dark\:border-dark-700\/80, html.dark .dark\:border-dark-600\/60,
html.dark .dark\:border-b-dark-700\/60, html.dark .dark\:border-gray-800, html.dark .dark\:border-r-gray-800,
html.dark .dark\:border-b-gray-700, html.dark .dark\:border-b-gray-900, html.dark .dark\:border-t-gray-700,
html.dark .dark\:divide-dark-600 > :not([hidden]) ~ :not([hidden]), html.dark .dark\:divide-dark-700 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-dark-700\/60 > :not([hidden]) ~ :not([hidden]), html.dark .dark\:divide-dark-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--zy-border);
}
html.dark .dark\:border-dark-600, html.dark .dark\:border-dark-500, html.dark .dark\:border-dark-400,
html.dark .dark\:border-gray-500, html.dark .dark\:border-gray-600,
html.dark .dark\:border-b-dark-600, html.dark .dark\:border-t-dark-600,
html.dark .dark\:hover\:border-dark-400:hover, html.dark .dark\:hover\:border-dark-500:hover, html.dark .dark\:hover\:border-dark-600:hover,
html.dark .dark\:hover\:border-gray-600:hover {
  border-color: var(--zy-border-strong);
}
html.dark .dark\:ring-dark-600, html.dark .dark\:ring-dark-700, html.dark .dark\:ring-dark-800,
html.dark .dark\:ring-white\/10, html.dark .dark\:ring-gray-500\/30 { --tw-ring-color: var(--zy-border); }

html.dark .dark\:text-white, html.dark .dark\:text-gray-50, html.dark .dark\:text-gray-100, html.dark .dark\:text-dark-100,
html.dark .dark\:hover\:text-white:hover,
html.dark .dark\:hover\:text-gray-200:hover, html.dark .dark\:hover\:text-gray-300:hover,
html.dark .dark\:hover\:text-dark-200:hover, html.dark .dark\:hover\:text-dark-300:hover {
  color: var(--zy-text);
}
html.dark .dark\:text-gray-200, html.dark .dark\:text-gray-300, html.dark .dark\:text-dark-200, html.dark .dark\:text-dark-300,
html.dark .dark\:text-gray-400, html.dark .dark\:text-dark-400, html.dark .dark\:hover\:text-dark-400:hover {
  color: var(--zy-text-2);
}
html.dark .dark\:text-gray-500, html.dark .dark\:text-dark-500, html.dark .dark\:text-gray-600, html.dark .dark\:text-dark-600,
html.dark .dark\:text-dark-700, html.dark .dark\:text-dark-800, html.dark .dark\:disabled\:text-dark-600:disabled {
  color: var(--zy-muted);
}
html.dark .dark\:placeholder-gray-500::placeholder, html.dark .dark\:placeholder\:text-dark-400::placeholder,
html.dark .dark\:placeholder\:text-dark-500::placeholder, html.dark .dark\:placeholder\:text-gray-500::placeholder {
  color: var(--zy-muted);
}

/* --------------------------------------------------------------------------
   17. 圆角：仅在 main / 卡片语境里收紧内联工具类，不碰 .rounded-full
   -------------------------------------------------------------------------- */
main .rounded-2xl { border-radius: 10px; }
main .rounded-xl { border-radius: 8px; }
main .btn, main .btn-icon { border-radius: 6px; }
main .btn-sm { border-radius: 6px; }
main .input { border-radius: 6px; }
main .card, main .modal-content { border-radius: 10px; }

/* --------------------------------------------------------------------------
   18. 新手引导气泡（driver.js + onboarding.css，懒加载且全 !important，需更高特异性 + !important）
   -------------------------------------------------------------------------- */
html .driver-popover.theme-tour-popover {
  background-color: var(--zy-bg) !important;
  border: 1px solid var(--zy-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--zy-shadow) !important;
  color: var(--zy-text) !important;
  font-family: var(--zy-sans) !important;
}
html.dark .driver-popover.theme-tour-popover { background-color: var(--zy-surface) !important; border-color: var(--zy-border) !important; }
html .driver-popover-title-text, html.dark .driver-popover-title-text { color: var(--zy-text) !important; font-size: 16px !important; font-weight: 600 !important; }
html .theme-tour-popover .driver-popover-description, html.dark .theme-tour-popover .driver-popover-description { color: var(--zy-text-2) !important; }
html .theme-tour-popover .driver-popover-footer, html.dark .theme-tour-popover .driver-popover-footer {
  background-color: var(--zy-surface) !important;
  border-top-color: var(--zy-border) !important;
}
html .theme-tour-popover .driver-popover-next-btn {
  background-color: var(--zy-ink) !important;
  color: var(--zy-ink-text) !important;
  box-shadow: none !important;
}
html .theme-tour-popover .driver-popover-next-btn:hover { background-color: var(--zy-ink-hover) !important; }
html .theme-tour-popover .driver-popover-prev-btn, html.dark .theme-tour-popover .driver-popover-prev-btn {
  background-color: var(--zy-bg) !important;
  border-color: var(--zy-border-strong) !important;
  color: var(--zy-text-2) !important;
  box-shadow: none !important;
}
html .theme-tour-popover .driver-popover-prev-btn:hover, html.dark .theme-tour-popover .driver-popover-prev-btn:hover {
  background-color: var(--zy-hover) !important;
  color: var(--zy-text) !important;
}
html .driver-active-element { outline: 3px solid var(--zy-accent-soft) !important; border-radius: 6px !important; }
html .driver-popover-arrow-side-left.driver-popover-arrow, html.dark .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--zy-border) !important; }
html .driver-popover-arrow-side-right.driver-popover-arrow, html.dark .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--zy-border) !important; }
html .driver-popover-arrow-side-top.driver-popover-arrow, html.dark .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--zy-border) !important; }
html .driver-popover-arrow-side-bottom.driver-popover-arrow, html.dark .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--zy-border) !important; }

/* --------------------------------------------------------------------------
   19. 动效：去位移/缩放，尊重系统减少动态偏好
   -------------------------------------------------------------------------- */
.hover\:-translate-y-0\.5:hover, .hover\:-translate-y-1:hover, .hover\:scale-105:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;   /* 加载圈等循环动画保留，只去过渡 */
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   20. 新手上手条（guide.js 生成的 .zy-onb）与侧栏外链箭头 .zy-ext
   -------------------------------------------------------------------------- */
.zy-onb {
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  background-color: var(--zy-bg);
  overflow: hidden;
  font-family: var(--zy-sans);
}
html.dark .zy-onb { background-color: var(--zy-surface); }
.zy-onb__hd {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--zy-border);
}
.zy-onb__title { margin: 0; font-family: var(--zy-kai); font-size: 18px; font-weight: 500; color: var(--zy-text); line-height: 1.4; }
.zy-onb__close {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--zy-text-2); white-space: nowrap;
}
.zy-onb__close:hover { color: var(--zy-text); }
.zy-onb__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zy-onb__st { padding: 16px 20px 18px; border-right: 1px solid var(--zy-border); min-width: 0; }
.zy-onb__st:last-child { border-right: 0; }
.zy-onb__n { font-family: var(--zy-mono); font-size: 12px; color: var(--zy-muted); line-height: 1.6; }
.zy-onb__st--cur .zy-onb__n {
  display: inline-block; color: var(--zy-accent); background-color: var(--zy-accent-soft);
  border-radius: 4px; padding: 1px 6px;
}
.zy-onb__t { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--zy-text); line-height: 1.4; }
.zy-onb__ck { color: var(--zy-success); flex: none; }
.zy-onb__st--done .zy-onb__tt { color: var(--zy-muted); text-decoration: line-through; text-decoration-color: var(--zy-border-strong); }
.zy-onb__d { margin: 4px 0 0; font-size: 13px; color: var(--zy-text-2); line-height: 1.6; min-height: 2.6em; }
.zy-onb__st--done .zy-onb__d { color: var(--zy-muted); }
.zy-onb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; height: 32px; padding: 0 12px; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s;
}
.zy-onb__btn--ink { background-color: var(--zy-ink); color: var(--zy-ink-text); }
.zy-onb__btn--ink:hover { background-color: var(--zy-ink-hover); color: var(--zy-ink-text); }
.zy-onb__btn--ghost { background-color: transparent; color: var(--zy-text); border-color: var(--zy-border-strong); }
.zy-onb__btn--ghost:hover { background-color: var(--zy-hover); color: var(--zy-text); }
.zy-onb__st--done .zy-onb__btn--ghost { color: var(--zy-text-2); }
.zy-onb__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--zy-accent-soft); }
@media (max-width: 1023px) {
  .zy-onb__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zy-onb__st:nth-child(2) { border-right: 0; }
  .zy-onb__st:nth-child(n+3) { border-top: 1px solid var(--zy-border); }
}
@media (max-width: 639px) {
  .zy-onb__row { grid-template-columns: minmax(0, 1fr); }
  .zy-onb__st { border-right: 0; }
  .zy-onb__st:nth-child(n+2) { border-top: 1px solid var(--zy-border); }
  .zy-onb__d { min-height: 0; }
}
.zy-ext { margin-left: 6px; color: var(--zy-muted); font-size: 12px; }