/* ============================================================================
 * ClickSplice — "Apple" Theme Skin
 * ----------------------------------------------------------------------------
 * 纯 CSS 覆盖层。不修改任何 TSX / 路由 / 接口 / 业务逻辑，只替换配色与视觉
 * 质感，因此追踪器全部功能 100% 保留。
 *
 * 加载方式（不改源码即可生效）：
 *   1) 把本文件放到 client/public/apple-theme.css
 *   2) 在 client/index.html 的 </head> 前加一行
 *        <link rel="stylesheet" href="/apple-theme.css" />
 *   回滚＝删掉那一行。
 *
 * 设计依据：Apple Human Interface Guidelines
 *   · 字体      SF Pro（-apple-system / BlinkMacSystemFont 在 macOS 上直接命中）
 *   · 材质      saturate(180%) blur(20px) 毛玻璃导航 —— Apple 最标志性的手法
 *   · 分层      靠 surface tint + 分层阴影，而不是靠边框
 *   · 分隔线    0.5px 发丝线（Retina 上正好 1 物理像素）
 *   · 强调色    单一 systemBlue，其余全部为语义色
 *   · 圆角      卡片 14px / 控件 8-10px / CTA 980px 胶囊
 *
 * 主题映射：
 *   :root  → Apple Light（浅色，主推）
 *   .dark  → Apple Dark Mode（真黑 + #0A84FF）
 *   项目自带的主题切换按钮因此原生可用，语义不被破坏。
 * ========================================================================== */

/* ==========================================================================
 * 1. Apple 语义色板（直接用系统色命名，谁都认得）
 * ======================================================================== */
:root {
  /* --- systemGray 阶梯（Apple 的灰度是成体系的） --- */
  --a-gray6: #f2f2f7;
  --a-gray5: #e5e5ea;
  --a-gray4: #d1d1d6;
  --a-gray3: #c7c7cc;
  --a-gray2: #aeaeb2;
  --a-gray: #8e8e93;
  --a-gray-2: #636366;
  --a-gray-3: #48484a;
  --a-gray-4: #3a3a3c;
  --a-gray-5: #2c2c2e;
  --a-gray-6: #1c1c1e;

  /* --- Apple 网页/系统强调色 --- */
  --a-blue: #007aff; /* iOS systemBlue —— 控件强调 */
  --a-blue-web: #0071e3; /* apple.com 的 CTA 蓝 */
  --a-blue-hover: #0077ed;
  --a-green: #34c759;
  --a-red: #ff3b30;
  --a-orange: #ff9500;
  --a-yellow: #ffcc00;
  --a-purple: #af52de;
  --a-pink: #ff2d55;
  --a-teal: #30b0c7;
  --a-indigo: #5856d6;
  --a-mint: #00c7be;
  --a-brown: #a2845e;

  /* --- 分层阴影：Apple 的阴影永远是低透明度 + 多层 --- */
  --a-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --a-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --a-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  --a-shadow-4: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);

  --a-r-sm: 8px;
  --a-r-md: 10px;
  --a-r-lg: 14px;
  --a-r-xl: 18px;
  --a-r-pill: 980px;

  /* Apple 的缓动接近 ease-out，比 ColorHarbor 的 expo 更"软" */
  --a-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --a-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* 图表系列色（供属性选择器用 var() 引用，一套规则同时适配明暗） */
  --a-c-visits: #007aff;
  --a-c-clicks: #ff9500;
  --a-c-conversions: #5856d6;
  --a-c-revenue: #30b0c7;
  --a-c-cost: #ff3b30;
  --a-c-profit: #34c759;
  --a-c-avgrev: #8e8e93;
  --a-c-epc: #ff2d55;
  --a-c-epv: #af52de;
  --a-c-roi: #ff9f0a;
  --a-c-cr: #a2845e;
  --a-c-ctr: #00c7be;
}

/* ==========================================================================
 * 2. Apple Light —— 主推
 * ======================================================================== */
:root {
  /* ---------- 2.1 项目 shadcn 层 ---------- */
  --radius: 12px;

  --background: #f5f5f7; /* Apple 页面底：极浅冷灰，不是纯白 */
  --foreground: #1d1d1f; /* Apple 正文黑，比 #000 柔 */

  --card: #ffffff;
  --card-foreground: #1d1d1f;

  --popover: #ffffff;
  --popover-foreground: #1d1d1f;

  --primary: var(--a-blue-web);
  --primary-foreground: #ffffff;

  --secondary: var(--a-gray6);
  --secondary-foreground: #1d1d1f;

  --muted: var(--a-gray6);
  --muted-foreground: #6e6e73; /* Apple 次要文字 */

  --accent: rgba(0, 122, 255, 0.08);
  --accent-foreground: var(--a-blue);

  --destructive: var(--a-red);
  --destructive-foreground: #ffffff;

  --border: rgba(0, 0, 0, 0.09);
  --input: rgba(0, 0, 0, 0.12);
  --ring: var(--a-blue);

  /* ---------- 2.2 项目语义令牌层 ---------- */
  --page-bg: #f5f5f7;
  --surface: #ffffff;
  --surface-secondary: #fafafa;
  --surface-elevated: #ffffff;
  --table-header: #fafafa;
  --surface-hover: rgba(0, 0, 0, 0.025);
  --surface-active: rgba(0, 0, 0, 0.05);
  --totals-bg: #fafafa;

  /* 顶栏：半透明浅色 + 毛玻璃，这是 Apple 最强的识别符号 */
  --nav-bg: rgba(251, 251, 253, 0.72);
  --nav-active: rgba(0, 122, 255, 0.1);
  --nav-hover: rgba(0, 0, 0, 0.035);
  --nav-text: #1d1d1f;
  --nav-text-strong: var(--a-blue);
  --nav-muted: #86868b;
  --nav-border: rgba(0, 0, 0, 0.08);

  --border-strong: rgba(0, 0, 0, 0.16);

  --text: #1d1d1f;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #86868b;

  --primary-hover: #006edb;
  --primary-soft: rgba(0, 122, 255, 0.1);
  --accent-soft: rgba(0, 122, 255, 0.1);
  --accent-fg: var(--a-blue);
  /* Apple 的界面基本是单一强调色：正负/状态用 systemGreen / systemRed，
     但「刷新、选中、推荐」这类操作性高亮统一走蓝，不跟状态色抢语义。 */
  --success-action: var(--a-blue-web);
  --success-action-hover: var(--a-blue-hover);

  /* 财务语义：用 iOS systemGreen / systemRed，保持正负可辨 */
  --positive-text: #248a3d; /* 浅色底上用压暗的绿，保证对比度 */
  --negative-text: #d70015;
  --positive-row-bg: rgba(52, 199, 89, 0.1);
  --negative-row-bg: rgba(255, 59, 48, 0.09);
  --positive-bg: var(--positive-row-bg);
  --negative-bg: var(--negative-row-bg);
  --positive-bg-hover: rgba(52, 199, 89, 0.16);
  --negative-bg-hover: rgba(255, 59, 48, 0.15);

  /* 选中行：Apple 的列表选中是浅蓝，不是黄色 */
  --selected-row-bg: rgba(0, 122, 255, 0.1);
  --row-selected-bg: rgba(0, 122, 255, 0.1);
  --row-selected-bg-hover: rgba(0, 122, 255, 0.16);

  --success: var(--a-green);
  --danger: var(--a-red);
  --warning: var(--a-orange);

  color-scheme: light;
}

/* ==========================================================================
 * 3. Apple Dark Mode —— 真黑 + 分层灰
 * ======================================================================== */
.dark,
[data-theme="dark"] {
  --background: #000000; /* Apple 的 OLED 真黑 */
  --foreground: #f5f5f7;

  --card: #1c1c1e; /* systemGray6 dark —— 分组单元 */
  --card-foreground: #f5f5f7;

  --popover: #2c2c2e;
  --popover-foreground: #f5f5f7;

  --primary: #0a84ff; /* systemBlue dark */
  --primary-foreground: #ffffff;

  --secondary: #2c2c2e;
  --secondary-foreground: #f5f5f7;

  --muted: #2c2c2e;
  --muted-foreground: rgba(235, 235, 245, 0.6);

  --accent: rgba(10, 132, 255, 0.16);
  --accent-foreground: #0a84ff;

  --destructive: #ff453a;
  --destructive-foreground: #ffffff;

  --border: rgba(84, 84, 88, 0.5); /* Apple separator dark */
  --input: rgba(84, 84, 88, 0.65);
  --ring: #0a84ff;

  --page-bg: #000000;
  --surface: #1c1c1e;
  --surface-secondary: #161618;
  --surface-elevated: #2c2c2e;
  --table-header: #242426;
  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-active: rgba(255, 255, 255, 0.08);
  --totals-bg: #242426;

  --nav-bg: rgba(22, 22, 23, 0.72);
  --nav-active: rgba(10, 132, 255, 0.18);
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-text: #f5f5f7;
  --nav-text-strong: #0a84ff;
  --nav-muted: #86868b;
  --nav-border: rgba(84, 84, 88, 0.4);

  --border-strong: rgba(120, 120, 128, 0.6);

  --text: #f5f5f7;
  --text-primary: #f5f5f7;
  --text-secondary: rgba(235, 235, 245, 0.6);
  --text-muted: rgba(235, 235, 245, 0.3);

  --primary-hover: #3d9bff;
  --primary-soft: rgba(10, 132, 255, 0.18);
  --accent-soft: rgba(10, 132, 255, 0.18);
  --accent-fg: #0a84ff;
  --success-action: #0a84ff;
  --success-action-hover: #3d9bff;

  --positive-text: #30d158;
  --negative-text: #ff453a;
  --positive-row-bg: rgba(48, 209, 88, 0.14);
  --negative-row-bg: rgba(255, 69, 58, 0.14);
  --positive-bg: var(--positive-row-bg);
  --negative-bg: var(--negative-row-bg);
  --positive-bg-hover: rgba(48, 209, 88, 0.2);
  --negative-bg-hover: rgba(255, 69, 58, 0.2);

  --selected-row-bg: rgba(10, 132, 255, 0.22);
  --row-selected-bg: rgba(10, 132, 255, 0.22);
  --row-selected-bg-hover: rgba(10, 132, 255, 0.3);

  --success: #30d158;
  --danger: #ff453a;
  --warning: #ff9f0a;

  /* 暗底上换成 Apple 的 dark 语义色，保证亮度够 */
  --a-blue: #0a84ff;
  --a-blue-web: #0a84ff;
  --a-blue-hover: #3d9bff;
  --a-green: #30d158;
  --a-red: #ff453a;
  --a-orange: #ff9f0a;
  --a-yellow: #ffd60a;
  --a-purple: #bf5af2;
  --a-pink: #ff375f;
  --a-teal: #40c8e0;
  --a-indigo: #5e5ce6;
  --a-mint: #66d4cf;
  --a-brown: #ac8e68;
  --a-gray: #98989d;

  --a-c-visits: #0a84ff;
  --a-c-clicks: #ff9f0a;
  --a-c-conversions: #5e5ce6;
  --a-c-revenue: #40c8e0;
  --a-c-cost: #ff453a;
  --a-c-profit: #30d158;
  --a-c-avgrev: #98989d;
  --a-c-epc: #ff375f;
  --a-c-epv: #bf5af2;
  --a-c-roi: #ffd60a;
  --a-c-cr: #ac8e68;
  --a-c-ctr: #66d4cf;

  --a-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --a-shadow-2: 0 2px 10px rgba(0, 0, 0, 0.6);
  --a-shadow-3: 0 14px 36px rgba(0, 0, 0, 0.7);
  --a-shadow-4: 0 28px 68px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

/* ==========================================================================
 * 4. 基础层：字体、字距、渲染
 * ======================================================================== */
html,
body {
  background: var(--background) !important;
}
body {
  color: var(--foreground);
  /* SF Pro 优先。macOS / iOS 上 -apple-system 直接命中系统字体，
     这是"像苹果"最重要的一条 —— 比任何配色都管用。 */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Inter, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  /* Apple 的字距略紧，正文 -0.01em 是安全值 */
  letter-spacing: -0.01em;
  font-feature-settings: "kern" 1;
}

/* 大字号收紧字距 —— Apple 排版的核心手法 */
h1,
[class*="page-title"],
[class*="masthead"] h1 {
  letter-spacing: -0.022em !important;
}

/* 数字用 SF Mono，保持 Apple 的一致观感 */
code,
kbd,
samp,
pre,
.tabular-nums,
.numeric-cell {
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, "Ubuntu Mono", monospace !important;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.01em;
}

/* 选中态用系统蓝 */
::selection {
  background: rgba(0, 122, 255, 0.22) !important;
  color: inherit;
}
.dark ::selection {
  background: rgba(10, 132, 255, 0.32) !important;
}

/* 滚动条：Apple 是覆盖式细条，默认几乎不可见 */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4) !important;
  background-clip: content-box !important;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.24) !important;
  background-clip: content-box !important;
}
* {
  scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
}

/* ==========================================================================
 * 5. 毛玻璃导航 —— Apple 的招牌
 *    关键词是 saturate(180%) blur(20px)，只写 blur 会显得发灰发死。
 * ======================================================================== */
.global-nav,
.app-frame > header,
[class*="global-nav"] {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid var(--nav-border) !important;
  box-shadow: none !important;
}

.global-nav a,
.global-nav button {
  border-radius: var(--a-r-sm) !important;
  transition: color 0.2s var(--a-ease), background 0.2s var(--a-ease) !important;
}
.global-nav a:hover,
.global-nav button:hover {
  color: var(--nav-text) !important;
  background: var(--nav-hover) !important;
}

/* 激活项：Apple 用浅色药丸高亮，不用下划线 */
.global-nav a[aria-current="page"],
.global-nav a.active,
.global-nav [data-active="true"],
.global-nav [aria-selected="true"] {
  color: var(--a-blue) !important;
  background: var(--nav-active) !important;
  font-weight: 600 !important;
}
/* 清掉 ColorHarbor 那套底部指示条样式（如果同时挂着） */
.global-nav a[aria-current="page"]::after,
.global-nav a.active::after,
.global-nav [aria-selected="true"]::after {
  content: none !important;
}

/* ==========================================================================
 * 6. 卡面 / 面板 / 弹层
 *    Apple：靠白面 + 分层阴影浮起来，边框只留发丝级
 *
 *    ⚠️ 这里必须用 [class~="x"]（整词匹配），不能用 [class*="x"]（子串匹配）。
 *       子串匹配是本次踩到的坑："metric-card-label" / "metric-card-value"
 *       里同样含有 "card"，于是卡片的标签和数值也被当成卡片，被套上边框、
 *       圆角和阴影，在每张 KPI 卡里渲染出一层不存在的内框。
 * ======================================================================== */
[class~="metric-card"],
[class~="MetricCard"],
[class~="kpi-card"],
[class~="stat-card"],
[class~="summary-card"],
[class~="dash-chart-card"],
[class~="overview-panel"],
[class~="performer-list"] {
  background: var(--surface) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-shadow-1) !important;
  transition: box-shadow 0.3s var(--a-ease-soft), transform 0.3s var(--a-ease-soft) !important;
}
[class~="metric-card"]:hover,
[class~="MetricCard"]:hover,
[class~="kpi-card"]:hover,
[class~="stat-card"]:hover,
[class~="overview-panel"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--a-shadow-2) !important;
}

/* --- 6.1 弹窗 ------------------------------------------------------------
 * ⚠️ 这个项目的弹窗**没有独立的遮罩元素**：`role="dialog"` 那个 DIV 自己就是
 *    面板（position:fixed，portal 到 body，内层才是标题/正文/页脚）。
 *
 *    所以它必须被当成「不透明面板」来上色。之前套用 shadcn 的
 *    「overlay = [role=dialog] / panel = 它的直接子 div」惯例，结果是：
 *      · 面板被涂上半透明黑 → 弹窗发灰、能透出后面的表格
 *      · 标题块和正文块各自被套上白底+边框+18px圆角+大阴影 → 双层方框
 *    原始设计本来就是「不透明白面板 + 柔和阴影」，没有遮罩层。
 * ---------------------------------------------------------------------- */
[role="dialog"],
[role="alertdialog"] {
  background: var(--popover) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--a-r-xl) !important;
  box-shadow: var(--a-shadow-4) !important;
  color: var(--foreground) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 防御：万一将来某个弹窗改用真正的独立遮罩层（有 data-state 但没 role），
   再给它上模糊。这条对现有弹窗不匹配，属于零风险兜底。 */
body > div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper]) {
  background: rgba(0, 0, 0, 0.3) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
}
.dark body > div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper]) {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Radix / shadcn 弹出层 */
[data-radix-popper-content-wrapper] > *,
[role="menu"],
[role="listbox"] {
  background: var(--popover) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--a-r-md) !important;
  box-shadow: var(--a-shadow-3) !important;
  color: var(--foreground) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
}
[role="menuitem"]:hover,
[role="option"]:hover,
[role="menuitem"][data-highlighted],
[cmdk-item][data-selected="true"] {
  background: var(--a-blue) !important;
  color: #fff !important;
}

/* ==========================================================================
 * 7. 表格 —— Apple 的列表语言：无竖线、0.5px 横线、行高更舒展
 * ======================================================================== */
table,
[role="table"],
[class*="data-table"],
[class*="DataTable"] {
  border-color: var(--border) !important;
  border-collapse: separate;
  border-spacing: 0;
}

thead,
th {
  background: var(--table-header) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  font-weight: 600 !important;
  /* Apple 的表头是小号全大写式微标签 */
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
}

td {
  border-color: var(--border) !important;
  color: var(--foreground);
}

/* 干掉竖向格线，Apple 的列表只有横线 */
table td + td,
table th + th,
[class*="data-table"] [role="cell"] + [role="cell"] {
  border-left-color: transparent !important;
  border-left-width: 0 !important;
}

tbody tr:hover > td,
[role="row"]:hover > [role="cell"],
[class*="table-row"]:hover {
  background: var(--surface-hover) !important;
}

[class*="totals"],
tfoot,
[class*="summary-row"] {
  background: var(--totals-bg) !important;
  font-weight: 600 !important;
}

/* 正负财务值：单元格级限定，避免染到表头 / 图例 / 面板标题 */
td[class*="positive"],
td[class*="profit"],
td[class*="revenue"],
td[data-tone="positive"],
.metric-card-value.is-positive,
[class*="financial-value"][data-sign="positive"] {
  color: var(--positive-text) !important;
}
td[class*="negative"],
td[class*="cost"],
td[class*="loss"],
td[data-tone="negative"],
.metric-card-value.is-negative,
[class*="financial-value"][data-sign="negative"] {
  color: var(--negative-text) !important;
}

/* ==========================================================================
 * 8. 控件
 *
 * ⚠️ 按钮的选择器必须用**整词匹配** [class~="x"]，不能用子串匹配 [class*="x"]。
 *    这个项目的按钮是 Tailwind 工具类堆出来的，一个 className 上百个字符，
 *    里面必然含有 "outline-none"、"text-primary"、"ring-primary" 这类片段：
 *      [class*="outline"]  → 命中 outline-none，把**所有**按钮都变成次级按钮
 *      [class*="primary"]  → 命中 text-primary，也会误伤
 *    主/次按钮的真实区分是：
 *      主按钮 = class 含 bg-primary + text-primary-foreground
 *      次按钮 = class 含 border + bg-transparent（shadcn 的 outline variant）
 * ======================================================================== */

/* --- 8.1 主按钮：Apple 的 CTA 是实心蓝 + 980px 胶囊 --- */
button[class~="bg-primary"],
button[class~="btn-primary"],
button[class~="app-btn-primary"],
.maxconv-create-btn,
[data-variant="default"] {
  background: var(--a-blue-web) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--a-r-pill) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  transition: background 0.2s var(--a-ease), transform 0.12s var(--a-ease) !important;
}
button[class~="bg-primary"]:hover,
button[class~="btn-primary"]:hover,
button[class~="app-btn-primary"]:hover,
.maxconv-create-btn:hover,
[data-variant="default"]:hover {
  background: var(--a-blue-hover) !important;
}
button[class~="bg-primary"]:active,
button[class~="btn-primary"]:active,
.maxconv-create-btn:active,
[data-variant="default"]:active {
  transform: scale(0.97);
}

/* --- 8.2 次级按钮：Apple 的 tinted 按钮（浅蓝底 + 蓝字） --- */
button[class~="border"][class~="bg-transparent"],
button[class~="btn-outline"],
button[class~="app-btn"],
[data-variant="outline"],
[data-variant="secondary"] {
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--a-blue) !important;
  border: none !important;
  border-radius: var(--a-r-pill) !important;
  font-weight: 500 !important;
  transition: background 0.2s var(--a-ease) !important;
}
button[class~="border"][class~="bg-transparent"]:hover,
button[class~="btn-outline"]:hover,
button[class~="app-btn"]:hover,
[data-variant="outline"]:hover,
[data-variant="secondary"]:hover {
  background: rgba(0, 122, 255, 0.14) !important;
  color: var(--a-blue) !important;
}
.dark button[class~="border"][class~="bg-transparent"],
.dark button[class~="app-btn"],
.dark [data-variant="outline"],
.dark [data-variant="secondary"] {
  background: rgba(10, 132, 255, 0.18) !important;
  color: #0a84ff !important;
}

/* --- 8.3 危险按钮 --- */
[class~="is-danger"],
[class~="btn-danger"],
[data-variant="destructive"] {
  background: rgba(255, 59, 48, 0.1) !important;
  color: var(--a-red) !important;
  border: none !important;
  border-radius: var(--a-r-pill) !important;
}
[class~="is-danger"]:hover,
[class~="btn-danger"]:hover,
[data-variant="destructive"]:hover {
  background: rgba(255, 59, 48, 0.16) !important;
}

/* --- 8.4 输入 / 选择 / 文本域：Apple 的输入框是浅灰填充 + 无边框 ---
   同样别用 [class*="input"]：Tailwind 的 dark:border-input / bg-input
   会把普通按钮也卷进来。用元素选择器 + 精确类名/槽名。 */
input,
textarea,
select,
[role="combobox"],
[data-slot="input"],
[data-slot="select-trigger"],
[class~="input"],
[class~="app-input"],
[class~="search-input"] {
  background: var(--a-gray6) !important;
  color: var(--foreground) !important;
  border: 1px solid transparent !important;
  border-radius: var(--a-r-sm) !important;
  transition: background 0.2s var(--a-ease), box-shadow 0.2s var(--a-ease),
    border-color 0.2s var(--a-ease) !important;
}
.dark input,
.dark textarea,
.dark select,
.dark [role="combobox"],
.dark [data-slot="input"],
.dark [class~="input"] {
  background: #1c1c1e !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}
/* 聚焦：Apple 是蓝描边 + 极淡外环 */
input:focus,
textarea:focus,
select:focus,
[role="combobox"]:focus,
[data-slot="input"]:focus-within,
[class~="input"]:focus-within {
  background: var(--surface) !important;
  border-color: var(--a-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15) !important;
  outline: none !important;
}
.dark input:focus,
.dark textarea:focus,
.dark [data-slot="input"]:focus-within,
.dark [class~="input"]:focus-within {
  background: #2c2c2e !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22) !important;
}

/* --- 8.5 复选 / 单选 / 开关 --- */
[role="checkbox"][data-state="checked"],
[role="radio"][data-state="checked"],
[role="switch"][data-state="checked"],
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--a-blue) !important;
  border-color: var(--a-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* --- 8.6 分段控件（Apple 的 segmented control） --- */
[role="tablist"] {
  background: var(--a-gray6) !important;
  border: none !important;
  border-radius: var(--a-r-sm) !important;
  padding: 2px !important;
  gap: 2px !important;
  display: inline-flex;
}
.dark [role="tablist"] {
  background: #1c1c1e !important;
}
[role="tab"] {
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: background 0.2s var(--a-ease), box-shadow 0.2s var(--a-ease) !important;
}
[role="tab"][data-state="active"],
[role="tab"][aria-selected="true"] {
  background: var(--surface) !important;
  color: var(--foreground) !important;
  box-shadow: var(--a-shadow-1) !important;
  border: none !important;
}

/* --- 8.7 徽章 / 状态标签 --- */
[class*="badge"],
[class*="Badge"],
[class*="status-chip"],
[class*="pill"] {
  border-radius: var(--a-r-pill) !important;
  border: none !important;
  background: var(--a-gray6) !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}
.dark [class*="badge"],
.dark [class*="Badge"],
.dark [class*="status-chip"],
.dark [class*="pill"] {
  background: #2c2c2e !important;
}
[class*="badge"][class*="success"],
[class*="badge"][class*="active"],
[class*="status"][data-state="active"] {
  background: rgba(52, 199, 89, 0.14) !important;
  color: #248a3d !important;
}
.dark [class*="badge"][class*="success"],
.dark [class*="status"][data-state="active"] {
  background: rgba(48, 209, 88, 0.2) !important;
  color: #30d158 !important;
}

/* --- 8.8 链接 / 焦点环 --- */
a {
  color: inherit;
  transition: color 0.2s var(--a-ease) !important;
}
a:hover {
  color: var(--a-blue) !important;
}
:focus-visible {
  outline: 4px solid rgba(0, 122, 255, 0.3) !important;
  outline-offset: 0 !important;
  border-radius: var(--a-r-sm);
}

/* ==========================================================================
 * 9. 图表：把 recharts 的写死色值换成 Apple 系统色
 *    stroke/stop-color/fill 是 SVG 呈现属性，CSS 声明优先级更高 —— 无需改 TSX。
 *    值走 var()，所以同一套规则自动适配亮/暗。
 * ======================================================================== */
[stroke="#60a5fa"] { stroke: var(--a-c-visits) !important; }
[stroke="#f59e0b"] { stroke: var(--a-c-clicks) !important; }
[stroke="#312e81"] { stroke: var(--a-c-conversions) !important; }
[stroke="#15803d"] { stroke: var(--a-c-revenue) !important; }
[stroke="#ef4444"] { stroke: var(--a-c-cost) !important; }
[stroke="#22c55e"] { stroke: var(--a-c-profit) !important; }
[stroke="#64748b"] { stroke: var(--a-c-avgrev) !important; }
[stroke="#ec4899"] { stroke: var(--a-c-epc) !important; }
[stroke="#a855f7"] { stroke: var(--a-c-epv) !important; }
[stroke="#f97316"] { stroke: var(--a-c-roi) !important; }
[stroke="#ca8a04"] { stroke: var(--a-c-cr) !important; }
[stroke="#0f766e"] { stroke: var(--a-c-ctr) !important; }

stop[stop-color="#60a5fa"] { stop-color: var(--a-c-visits) !important; }
stop[stop-color="#22c55e"] { stop-color: var(--a-c-profit) !important; }

/* 网格与坐标轴：Apple 的图表网格极浅 */
.recharts-cartesian-grid line,
.recharts-cartesian-axis-line {
  stroke: var(--border) !important;
}
.recharts-cartesian-axis-tick text,
.recharts-text {
  fill: var(--text-muted) !important;
}
.recharts-default-tooltip,
.recharts-tooltip-wrapper > div {
  background: var(--popover) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--a-r-md) !important;
  box-shadow: var(--a-shadow-3) !important;
  color: var(--foreground) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
}

/* 图例：容器内联样式必须 !important，且严格限定作用域 */
.dash-chart-legend button > i[style*="rgb(96, 165, 250)"] { background-color: var(--a-c-visits) !important; }
.dash-chart-legend button > i[style*="rgb(245, 158, 11)"] { background-color: var(--a-c-clicks) !important; }
.dash-chart-legend button > i[style*="rgb(49, 46, 129)"]  { background-color: var(--a-c-conversions) !important; }
.dash-chart-legend button > i[style*="rgb(21, 128, 61)"]  { background-color: var(--a-c-revenue) !important; }
.dash-chart-legend button > i[style*="rgb(239, 68, 68)"]  { background-color: var(--a-c-cost) !important; }
.dash-chart-legend button > i[style*="rgb(34, 197, 94)"]  { background-color: var(--a-c-profit) !important; }
.dash-chart-legend button > i[style*="rgb(100, 116, 139)"]{ background-color: var(--a-c-avgrev) !important; }
.dash-chart-legend button > i[style*="rgb(236, 72, 153)"] { background-color: var(--a-c-epc) !important; }
.dash-chart-legend button > i[style*="rgb(168, 85, 247)"] { background-color: var(--a-c-epv) !important; }
.dash-chart-legend button > i[style*="rgb(249, 115, 22)"] { background-color: var(--a-c-roi) !important; }
.dash-chart-legend button > i[style*="rgb(202, 138, 4)"]  { background-color: var(--a-c-cr) !important; }
.dash-chart-legend button > i[style*="rgb(15, 118, 110)"] { background-color: var(--a-c-ctr) !important; }

.dash-chart-legend button > i {
  border-radius: 50% !important; /* Apple 的图例点是圆的 */
  width: 9px !important;
  height: 9px !important;
}
/* 图例按钮做成 Apple 的 toggle chip */
.dash-chart-legend button {
  background: var(--a-gray6) !important;
  color: var(--text-secondary) !important;
  border: none !important;
  border-radius: var(--a-r-pill) !important;
  font-weight: 500 !important;
  transition: background 0.2s var(--a-ease), color 0.2s var(--a-ease) !important;
}
.dark .dash-chart-legend button {
  background: #1c1c1e !important;
}
.dash-chart-legend button:hover {
  background: var(--a-gray5) !important;
}
.dark .dash-chart-legend button:hover {
  background: #2c2c2e !important;
}
.dash-chart-legend button.is-active {
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--a-blue) !important;
}
.dark .dash-chart-legend button.is-active {
  background: rgba(10, 132, 255, 0.22) !important;
  color: #0a84ff !important;
}
.dash-chart-legend button b {
  color: inherit !important;
  font-weight: 600 !important;
  opacity: 0.7;
}

/* 骨架屏 */
[class*="skeleton"],
[class*="Skeleton"] {
  background: linear-gradient(
    90deg,
    var(--a-gray6) 0%,
    var(--a-gray5) 50%,
    var(--a-gray6) 100%
  ) !important;
}
.dark [class*="skeleton"],
.dark [class*="Skeleton"] {
  background: linear-gradient(90deg, #1c1c1e 0%, #2c2c2e 50%, #1c1c1e 100%) !important;
}

/* ==========================================================================
 * 10. Dashboard KPI 卡片
 *
 *     index.css 里这套卡片有两代定义互相打架，真正生效的那代用一个 `--metric`
 *     变量驱动卡片的着色。而 `.tone-*` 给的 --metric 是 #3978f6 / #159a62 /
 *     #d97706 这类非系统色。
 *
 *     ⚠️ --metric 的覆盖**必须是全局的**，不能只在 .traditional-dashboard-page 下。
 *        「Customize metrics」弹窗里的 .metric-tone-chip 也在用 var(--metric)，
 *        但它渲染在那个页面容器之外 —— 之前作用域写窄了，弹窗里的小色块
 *        一直是原始的 #3978F6 蓝色。
 * ======================================================================== */
.tone-blue    { --metric: #007aff !important; }
.tone-amber   { --metric: #ff9500 !important; }
.tone-orange  { --metric: #ff9500 !important; }
.tone-violet  { --metric: #af52de !important; }
.tone-purple  { --metric: #af52de !important; }
.tone-green   { --metric: #34c759 !important; }
.tone-mint    { --metric: #00c7be !important; }
.tone-emerald { --metric: #00c7be !important; }
.tone-red     { --metric: #ff3b30 !important; }
.tone-pink    { --metric: #ff2d55 !important; }
.tone-peach   { --metric: #ff9500 !important; }
.tone-teal    { --metric: #30b0c7 !important; }

.dark .tone-blue    { --metric: #0a84ff !important; }
.dark .tone-amber,
.dark .tone-orange,
.dark .tone-peach   { --metric: #ff9f0a !important; }
.dark .tone-violet,
.dark .tone-purple  { --metric: #bf5af2 !important; }
.dark .tone-green   { --metric: #30d158 !important; }
.dark .tone-mint,
.dark .tone-emerald { --metric: #66d4cf !important; }
.dark .tone-red     { --metric: #ff453a !important; }
.dark .tone-pink    { --metric: #ff375f !important; }
.dark .tone-teal    { --metric: #40c8e0 !important; }

/* 卡面本体：四边均匀发丝线 + Apple 分层阴影，去掉那根彩色左边框 */
.traditional-dashboard-page .metric-card[class*="tone-"] {
  border: 0.5px solid var(--border) !important;
  border-left: 0.5px solid var(--border) !important;
  border-top: 0.5px solid var(--border) !important;
  border-radius: var(--a-r-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--a-shadow-1) !important;
  transition: box-shadow 0.3s var(--a-ease-soft), border-color 0.3s var(--a-ease-soft) !important;
}
.traditional-dashboard-page .metric-card[class*="tone-"]:hover {
  border-color: color-mix(in srgb, var(--metric) 30%, var(--border)) !important;
  box-shadow: var(--a-shadow-2) !important;
}

/* 标题行：去掉内边距，由卡片统一控制留白 */
.traditional-dashboard-page .metric-card-top {
  background: transparent !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
 * 卡片标签：小圆点 + 大写小字，替代原来的浅色药丸。
 * 12 张卡片各顶一个 12% 淡色的圆角药丸，看起来像贴纸，颜色还互相撞
 * （应用只有 9 个 tone 要分给 12 个指标）。改成「一个色点 + 中性大写标签」，
 * 颜色信息保留但克制得多，这也是 Apple 分类列表的惯用手法。
 * ------------------------------------------------------------------------ */
.traditional-dashboard-page .metric-card-label {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.traditional-dashboard-page .metric-card-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--metric);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric) 15%, transparent);
  flex: none;
}

/* 图标底也走 --metric，做成 Apple 的圆角方块 */
.traditional-dashboard-page .metric-card-icon {
  color: var(--metric) !important;
  background: color-mix(in srgb, var(--metric) 12%, transparent) !important;
  border-radius: 9px !important;
}

/* 数值：放大 + 收紧字距，让它成为卡片的主角。
   原来数字是右对齐、标签在左，一张卡里视线要从左上跳到右下；
   改成左对齐后标签与数值共用一个起始边，「标签在上、数值在下」读起来是
   一条竖线 —— 这也是 Apple 指标卡的常规排法。 */
.traditional-dashboard-page .metric-card-value {
  color: var(--foreground) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.1 !important;
  text-align: left !important;
}
.traditional-dashboard-page .metric-card-note {
  color: var(--text-muted) !important;
}

/* 弹窗右上角的关闭按钮：让它保持"裸 ✕"，别被次级按钮的 tinted 样式染成蓝圆点 */
[role="dialog"] button[aria-label*="lose" i],
[role="alertdialog"] button[aria-label*="lose" i],
[role="dialog"] button:has(> svg.lucide-x),
[role="dialog"] button[data-slot="dialog-close"] {
  background: transparent !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--text-secondary) !important;
}
[role="dialog"] button[aria-label*="lose" i]:hover,
[role="alertdialog"] button[aria-label*="lose" i]:hover,
[role="dialog"] button:has(> svg.lucide-x):hover,
[role="dialog"] button[data-slot="dialog-close"]:hover {
  background: var(--a-gray6) !important;
  color: var(--foreground) !important;
}
.dark [role="dialog"] button[aria-label*="lose" i]:hover,
.dark [role="dialog"] button:has(> svg.lucide-x):hover,
.dark [role="dialog"] button[data-slot="dialog-close"]:hover {
  background: #2c2c2e !important;
}

/* 弹窗里的指标色块：跟上同一套 --metric，并统一成圆形 */
.metric-tone-chip {
  border-radius: 50% !important;
  width: 9px !important;
  height: 9px !important;
}
.metric-picker-row {
  border-radius: var(--a-r-sm) !important;
  transition: background 0.2s var(--a-ease) !important;
}
.metric-picker-row:hover {
  background: var(--a-gray6) !important;
}
.dark .metric-picker-row:hover {
  background: #2c2c2e !important;
}

/* ==========================================================================
 * 10b. Dashboard 图表区
 *      图表是页面上最大的一块（1440 宽下 300px 高）。数据稀疏时它就是一大片
 *      空白白色，把整页重心压得很低、看起来很空。小幅收高 + 让图例更规整。
 * ======================================================================== */

/* 只在桌面收高：应用在 max-width:800px 下另有 height:230px 的覆盖，别抢 */
@media (min-width: 801px) {
  .dash-chart-wrap {
    height: min(26vw, 260px) !important;
    min-height: 190px !important;
  }
}

/* 图表卡与 Overview 面板用同一套圆角/描边/间距，避免两块面板各自为政 */
.dash-chart-card {
  padding: 16px 0 8px !important;
  border-radius: var(--a-r-lg) !important;
}
.traditional-dashboard-chart {
  margin-top: 14px !important;
}
.overview-panel {
  margin-top: 14px !important;
}

/* 图例：12 个 chip 挤在一行会换行，收小尺寸、拉开行距、居中排布 */
.dash-chart-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px 6px !important;
  padding: 14px 16px 2px !important;
}
.dash-chart-legend button {
  padding: 3px 10px !important;
  font-size: 11px !important;
  gap: 5px !important;
  line-height: 1.4 !important;
}
.dash-chart-legend button > i {
  flex: none !important;
}

/* ==========================================================================
 * 11. 全局硬编码清扫
 * ======================================================================== */
/* 残留浅色块统一压成面板色（浅色主题下这条几乎不生效，暗色下兜底） */
.dark [style*="background: rgb(255"][style*="color"],
.dark [style*="background:#fff"],
.dark [style*="background: #fff"] {
  background: var(--surface) !important;
  color: var(--foreground) !important;
}
/* 遗留浅色重置层 */
[class*="home-reset"],
[class*="legacy-reset"] {
  background: var(--page-bg) !important;
}
/* 分隔线 / 边框统一到发丝线 */
hr,
[class*="divider"],
[class*="separator"] {
  border-color: var(--border) !important;
  background-color: var(--border) !important;
}
/* 侧边栏 / 抽屉 */
[class*="sidebar"],
[class*="Sidebar"],
[class*="drawer"] {
  background: var(--surface-secondary) !important;
  border-color: var(--border) !important;
}
/* 空状态 / 加载态 */
[class*="empty-state"],
[class*="EmptyState"],
[class*="loading-state"] {
  color: var(--text-secondary) !important;
}
/* Toast：Apple 的通知是毛玻璃圆角条 */
[data-sonner-toast],
[class*="toast"] {
  background: var(--popover) !important;
  border: 0.5px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-shadow-3) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
}
[data-sonner-toast][data-type="success"] {
  border-color: rgba(52, 199, 89, 0.4) !important;
}

/* ==========================================================================
 * 12. 公共营销站（public-home.css，作用域 .mkt-page）
 *     它自带 --mkt-* 令牌，换变量即可整站跟随。
 * ======================================================================== */
.mkt-page {
  --mkt-bg: #ffffff;
  --mkt-bg-2: #fbfbfd; /* apple.com 的产品页底色 */
  --mkt-panel: #f5f5f7;
  --mkt-panel-2: #fafafa;
  --mkt-border: rgba(0, 0, 0, 0.08);
  --mkt-border-strong: rgba(0, 0, 0, 0.16);
  --mkt-text: #1d1d1f;
  --mkt-muted: #6e6e73;
  --mkt-accent: #0071e3;
  --mkt-accent-bright: #0071e3;
  --mkt-green: #34c759;
  --mkt-red: #ff3b30;

  background: #ffffff !important; /* Apple 营销页是纯白，不用灰底 */
  background-image: none !important; /* 干掉原来的网格纹理 */
  color: #1d1d1f !important;
}
.dark .mkt-page {
  --mkt-bg: #000000;
  --mkt-bg-2: #0a0a0a;
  --mkt-panel: #1c1c1e;
  --mkt-panel-2: #161618;
  --mkt-border: rgba(255, 255, 255, 0.12);
  --mkt-text: #f5f5f7;
  --mkt-muted: #86868b;
  --mkt-accent: #0a84ff;
  --mkt-accent-bright: #0a84ff;
  background: #000000 !important;
  background-image: none !important;
  color: #f5f5f7 !important;
}
.mkt-header {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
}
.dark .mkt-header {
  background: rgba(22, 22, 23, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.mkt-mark {
  color: #0071e3 !important;
}
.dark .mkt-mark {
  color: #0a84ff !important;
}
.mkt-nav a:hover {
  color: #0071e3 !important;
  background: rgba(0, 113, 227, 0.06) !important;
}
/* Apple 的主 CTA 就是蓝色胶囊，字重 400，不加阴影 */
.mkt-btn-primary {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: var(--a-r-pill) !important;
  font-weight: 400 !important;
}
.mkt-btn-primary:hover {
  background: #0077ed !important;
  border-color: #0077ed !important;
  box-shadow: none !important;
}
.mkt-btn-outline {
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  color: #1d1d1f !important;
  border-radius: var(--a-r-pill) !important;
  background: transparent !important;
}
.mkt-btn-outline:hover {
  border-color: #0071e3 !important;
  color: #0071e3 !important;
  background: transparent !important;
}
.dark .mkt-btn-outline {
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #f5f5f7 !important;
}
.mkt-page [class*="preview-tabs"] button.is-active {
  background: rgba(0, 113, 227, 0.1) !important;
  color: #0071e3 !important;
}
/* 大写 eyebrow 是 Apple 营销页的固定句式 */
.mkt-eyebrow {
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}

/* ==========================================================================
 * 13. 登录 / 注册页
 * ======================================================================== */
.login-page,
.dark .login-page {
  background: var(--a-gray6) !important;
}
.dark .login-page {
  background: #000000 !important;
}
.login-panel,
.dark .login-panel {
  background: var(--surface) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--a-r-xl) !important;
  box-shadow: var(--a-shadow-3) !important;
}
.login-brand {
  color: var(--a-blue) !important;
}
.login-heading h1,
.dark .login-heading h1,
.login-form label,
.dark .login-form label {
  color: var(--foreground) !important;
  letter-spacing: -0.022em !important;
}
.login-heading p {
  color: var(--text-secondary) !important;
}
.login-switch,
.dark .login-switch {
  color: var(--text-secondary) !important;
}
.login-switch-link {
  color: var(--a-blue) !important;
}

/* ==========================================================================
 * 15. 全量令牌兜底
 *     构建产物里的自定义属性比源码多得多（部署的 dist 比 /root/client/src 新）。
 *     把 dist 的 CSS 里**所有颜色类自定义属性**抽出来逐个比对后，发现还有几套
 *     令牌没被覆盖，它们会让局部保持旧配色：
 *
 *       --action-green*  8 个   驱动 Refresh 等"操作类"按钮（Refresh 一直是绿的）
 *       --row-pos/neg*   6 个   浅色模式下的财务行底色，与 --positive-row-bg 是两套
 *       --adm-*         23 个   后台管理控制台有自己一整套深蓝绿主题，完全独立
 *       --primary 家族    5 个   dist 的基线主色其实是绿色 #16a34a，不是蓝
 *       --font-sans/--font-ui   字体栈，Tailwind 的 font-sans 读的是它
 *
 *     这一节把所有颜色令牌一次性接管，兜住前面没提到的一切。
 * ======================================================================== */

/* --- 15.1 字体栈：让 Tailwind 的 font-* 工具类也用上 SF Pro --- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ui: var(--font-sans);
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Ubuntu Mono", monospace;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

/* --- 15.2 "操作绿" 家族 → Apple 蓝（刷新 / 选中 / 推荐这类操作性高亮） --- */
:root,
.dark,
[data-theme="dark"] {
  --action-green: var(--a-blue-web);
  --action-green-hover: var(--a-blue-hover);
  --action-green-fg: #ffffff;
  --action-green-line: color-mix(in srgb, var(--a-blue) 45%, transparent);
  --action-green-text: var(--a-blue-web);
  --action-green-soft: rgba(0, 113, 227, 0.1);
  --action-green-soft-hover: rgba(0, 113, 227, 0.16);
  --action-green-ring: rgba(0, 113, 227, 0.28);
}

.dark,
[data-theme="dark"] {
  --action-green: #0a84ff;
  --action-green-hover: #3d9bff;
  --action-green-line: rgba(10, 132, 255, 0.45);
  --action-green-text: #0a84ff;
  --action-green-soft: rgba(10, 132, 255, 0.2);
  --action-green-soft-hover: rgba(10, 132, 255, 0.28);
  --action-green-ring: rgba(10, 132, 255, 0.35);
}

/* --- 15.3 primary / ring / focus 家族（dist 基线是绿色 #16a34a） --- */
:root {
  --primary: var(--a-blue-web);
  --primary-hover: var(--a-blue-hover);
  --primary-fg: #ffffff;
  --primary-foreground: #ffffff;
  --primary-soft: rgba(0, 113, 227, 0.1);
  --primary-ring: rgba(0, 113, 227, 0.2);
  --ring: var(--a-blue);
  --focus-ring: rgba(0, 122, 255, 0.28);
}
.dark {
  --primary: #0a84ff;
  --primary-hover: #3d9bff;
  --primary-soft: rgba(10, 132, 255, 0.2);
  --primary-ring: rgba(10, 132, 255, 0.3);
  --ring: #0a84ff;
  --focus-ring: rgba(10, 132, 255, 0.35);
}

/* --- 15.4 财务行底色：--row-* 与 --positive-row-bg 是两套，都要接 --- */
:root {
  --row-pos: rgba(52, 199, 89, 0.1);
  --row-pos-hover: rgba(52, 199, 89, 0.16);
  --row-pos-text: var(--positive-text);
  --row-neg: rgba(255, 59, 48, 0.09);
  --row-neg-hover: rgba(255, 59, 48, 0.15);
  --row-neg-text: var(--negative-text);
  --success: var(--a-green);
  --success-soft: rgba(52, 199, 89, 0.12);
  --danger: var(--a-red);
  --danger-soft: rgba(255, 59, 48, 0.1);
  --warning: var(--a-orange);
  --warning-soft: rgba(255, 149, 0, 0.12);
  --amber: var(--a-orange);
  /* 结构性面 */
  --panel-bg: var(--surface);
  --surface-sunken: #eef0f2;
  --border-muted: var(--border);
  --border-soft: var(--border);
  --border-hairline: rgba(0, 0, 0, 0.09);
  --shadow-raise: var(--a-shadow-1);
  --shadow-overlay: var(--a-shadow-3);
  /* 顶栏那根高光线在浅色下应该很轻 */
  --nav-accent-line: rgba(0, 0, 0, 0.1);
}

.dark {
  --row-pos: rgba(48, 209, 88, 0.14);
  --row-pos-hover: rgba(48, 209, 88, 0.2);
  --row-neg: rgba(255, 69, 58, 0.14);
  --row-neg-hover: rgba(255, 69, 58, 0.2);
  --success: #30d158;
  --success-soft: rgba(48, 209, 88, 0.16);
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.16);
  --warning: #ff9f0a;
  --warning-soft: rgba(255, 159, 10, 0.16);
  --amber: #ff9f0a;
  --panel-bg: var(--surface);
  --surface-sunken: #131315;
  --border-hairline: rgba(84, 84, 88, 0.5);
  --shadow-raise: var(--a-shadow-1);
  --shadow-overlay: var(--a-shadow-3);
  --nav-accent-line: rgba(255, 255, 255, 0.18);
}

/* --- 15.5 后台管理控制台：--adm-* 是一整套独立主题，单独接管 --- */
:root {
  --adm-bg: #f5f5f7;
  --adm-panel: #ffffff;
  --adm-panel-2: #fafafa;
  --adm-border: rgba(0, 0, 0, 0.09);
  --adm-border-strong: rgba(0, 0, 0, 0.18);
  --adm-border-faint: rgba(0, 0, 0, 0.05);
  --adm-text: #1d1d1f;
  --adm-muted: #6e6e73;
  --adm-placeholder: rgba(110, 110, 115, 0.6);
  --adm-accent: #0071e3;
  --adm-accent-bright: #0077ed;
  --adm-accent-strong: #006edb;
  --adm-on-accent: #ffffff;
  --adm-green: #34c759;
  --adm-red: #ff3b30;
  --adm-amber: #ff9500;
  --adm-topbar-bg: rgba(251, 251, 253, 0.8);
  --adm-hover: rgba(0, 113, 227, 0.08);
  --adm-tab-active-bg: rgba(0, 113, 227, 0.12);
  --adm-tab-active-text: #0071e3;
  --adm-row-hover: rgba(0, 0, 0, 0.025);
  --adm-backdrop: rgba(0, 0, 0, 0.32);
  --adm-shadow: var(--a-shadow-4);
}
.dark {
  --adm-bg: #000000;
  --adm-panel: #1c1c1e;
  --adm-panel-2: #161618;
  --adm-border: rgba(84, 84, 88, 0.5);
  --adm-border-strong: rgba(120, 120, 128, 0.6);
  --adm-border-faint: rgba(84, 84, 88, 0.3);
  --adm-text: #f5f5f7;
  --adm-muted: rgba(235, 235, 245, 0.6);
  --adm-placeholder: rgba(235, 235, 245, 0.3);
  --adm-accent: #0a84ff;
  --adm-accent-bright: #3d9bff;
  --adm-accent-strong: #0a84ff;
  --adm-on-accent: #ffffff;
  --adm-green: #30d158;
  --adm-red: #ff453a;
  --adm-amber: #ff9f0a;
  --adm-topbar-bg: rgba(22, 22, 23, 0.8);
  --adm-hover: rgba(10, 132, 255, 0.18);
  --adm-tab-active-bg: rgba(10, 132, 255, 0.22);
  --adm-tab-active-text: #0a84ff;
  --adm-row-hover: rgba(255, 255, 255, 0.04);
  --adm-backdrop: rgba(0, 0, 0, 0.55);
  --adm-shadow: var(--a-shadow-4);
}

/* --- 15.6 启动加载器的字形（硬编码 #2a3650，是旧的海军蓝） --- */
.oll-glyph {
  color: #1d1d1f !important;
}
.dark .oll-glyph {
  color: #f5f5f7 !important;
}

/* ==========================================================================
 * 16. 绿系状态字面量统一
 *     构建产物里有一批状态标签把颜色**写成了字面量**（不是变量），令牌覆盖不到：
 *       .domain-status.is-active      color:#047857; background:#ecfdf5
 *       .converted-tag / .status-tag.is-valid / .log-result.is-success
 *       .traffic-quality-cell.is-human strong / .system-status
 *       .log-tabs button.is-active b  color:#14663a; background:#d3eedd
 *       .events-table tr.is-conversion td  background:#ecfdf5
 *       .module-state.is-active
 *     dist 里同时存在 #047857 / #15803d / #059669 / #16a34a 四五个绿，深浅不一。
 *     Apple 只有一个 systemGreen，所以这里统一到一套绿。
 * ======================================================================== */
:root {
  --a-success-text: #248a3d; /* 浅底上压暗，保证对比度 */
  --a-success-tint: rgba(52, 199, 89, 0.12);
  --a-success-line: rgba(52, 199, 89, 0.32);
}
.dark {
  --a-success-text: #30d158;
  --a-success-tint: rgba(48, 209, 88, 0.16);
  --a-success-line: rgba(48, 209, 88, 0.35);
}

.default-domain,
.system-status,
.converted-tag,
.log-result.is-success,
.status-tag.is-valid,
.traffic-quality-cell.is-human strong,
.domain-status.is-active,
.domain-status.is-verified,
.module-state.is-active {
  color: var(--a-success-text) !important;
}
.default-domain,
.converted-tag,
.log-result.is-success,
.status-tag.is-valid,
.domain-status.is-active,
.domain-status.is-verified,
.module-state.is-active,
.events-table tr.is-conversion td {
  background: var(--a-success-tint) !important;
  border-color: var(--a-success-line) !important;
}
.log-tabs button.is-active b {
  color: var(--a-success-text) !important;
  background: var(--a-success-tint) !important;
}

/* 同一个「推荐」切换按钮，浅色规则用变量（已被改成蓝），深色规则却写死绿
   （border #22c55e73 / background #16a34a29 / color #6ee7a0），导致明暗不一致。
   统一到蓝。 */
.domain-method-toggle.is-selected {
  border-color: rgba(0, 122, 255, 0.4) !important;
  background: rgba(0, 113, 227, 0.1) !important;
  color: var(--a-blue-web) !important;
}
.dark .domain-method-toggle.is-selected {
  border-color: rgba(10, 132, 255, 0.45) !important;
  background: rgba(10, 132, 255, 0.2) !important;
  color: #0a84ff !important;
}

/* ==========================================================================
 * 17. 动效 —— Apple 用短促、克制的过渡，不做夸张弹跳
 * ======================================================================== */
@keyframes a-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 同样必须整词匹配，否则卡片的标签/数值也会被逐个做入场动画 */
[class~="metric-card"],
[class~="MetricCard"],
[class~="kpi-card"],
[class~="stat-card"] {
  animation: a-fade-up 0.4s var(--a-ease-soft) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}