/* ============================================================================
 * ClickSplice — UI Consistency Layer  (2026-09-22)
 * ----------------------------------------------------------------------------
 * 纯 CSS 覆盖层，叠加在 apple-theme 之后加载。不触碰任何 TSX / 路由 / 接口 /
 * 业务逻辑，所以追踪器功能 100% 保留，回滚＝删掉一行 <link>。
 *
 * 本层做四件事：
 *   1) 按钮统一      —— 一套令牌统一圆角/高度/字号/间距/反馈，用颜色区分主次
 *   2) 页面平铺      —— 去掉左右留白与宽度上限，工作区贴到浏览器边沿
 *   3) 移除模糊遮罩  —— 弹窗背景不再 backdrop-filter 模糊
 *   4) 子弹窗层级    —— 修复 Create Lander / Create Offer 被父弹窗盖住
 *
 * ⚠️ 选择器安全原则（血泪教训，见 apple-theme 9.6）：
 *    绝不用 button[class*="outline"] 这种子串匹配 —— Tailwind 类名里必然含
 *    outline-none / text-primary / dark:border-input，会把所有按钮误伤成同一种。
 *    这里统一用 [class~="..."] 整词匹配、元素选择器、data-* 属性选择器。
 * ========================================================================== */

/* ==========================================================================
 * 0. 按钮令牌 —— 想整体换风格，只改这一块
 * ======================================================================== */
:root {
  --btn-r: 8px;            /* 统一圆角（改成 980px 即全站胶囊） */
  --btn-r-sm: 6px;
  --btn-h: 30px;           /* 标准高度 */
  --btn-h-sm: 26px;        /* 紧凑（导航 / 行内动作） */
  --btn-px: 11px;          /* 左右内边距 */
  --btn-px-sm: 8px;
  --btn-gap: 6px;
  --btn-fs: 12.5px;
  --btn-fs-sm: 12px;
  --btn-fw: 500;

  /* 中性（次级） */
  --btn-face: #ffffff;
  --btn-face-hover: var(--a-gray6, #f2f2f7);
  --btn-face-active: var(--a-gray5, #e5e5ea);
  --btn-ink: var(--foreground, #1d1d1f);
  --btn-line: rgba(0, 0, 0, 0.1);

  /* 主色 */
  --btn-solid: var(--a-blue-web, #0071e3);
  --btn-solid-hover: var(--a-blue-hover, #0077ed);
  --btn-solid-active: #006edb;
  --btn-solid-ink: #ffffff;

  /* 危险 */
  --btn-danger: var(--a-red, #ff3b30);
  --btn-danger-soft: rgba(255, 59, 48, 0.1);
  --btn-danger-line: rgba(255, 59, 48, 0.32);

  /* 透明（弱操作） */
  --btn-quiet-hover: rgba(0, 0, 0, 0.05);
  --btn-quiet-active: rgba(0, 0, 0, 0.08);

  --btn-disabled-op: 0.42;
  --btn-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
.dark {
  --btn-face: #1c1c1e;
  --btn-face-hover: #2c2c2e;
  --btn-face-active: #3a3a3c;
  --btn-ink: #f5f5f7;
  --btn-line: rgba(84, 84, 88, 0.6);

  --btn-solid: #0a84ff;
  --btn-solid-hover: #3d9bff;
  --btn-solid-active: #0a6ed4;

  --btn-danger: #ff453a;
  --btn-danger-soft: rgba(255, 69, 58, 0.16);
  --btn-danger-line: rgba(255, 69, 58, 0.45);

  --btn-quiet-hover: rgba(255, 255, 255, 0.08);
  --btn-quiet-active: rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
 * 1. 按钮 —— 统一形态
 *    「统一」＝同一套圆角 / 高度 / 字号 / 内边距 / 反馈曲线，
 *    再靠颜色区分 primary / default / danger / quiet 四种角色。
 * ======================================================================== */

/* ---- 1.0 收尾：圆角只允许两种 —— 标准 8px / 紧凑 6px ----
 *    实测线上还残存 980px 胶囊、7px、4px、0px 四种，
 *    来自各页面自己写的 component class（.is-active / .is-danger /
 *    .maxconv-inline-edit / 设置页 tab / 语言切换 …）。
 *    这里统一收口，只保留两套：常规控件 8px，紧凑控件 6px。
 *
 *    ⚠️ 选择器为什么要写得这么丑 —— 特异性军备竞赛：
 *    apple-theme 里有两条同样带 !important 的胶囊规则：
 *      button[class~="bg-primary"] …                        (0,1,1)
 *      button[class~="border"][class~="bg-transparent"] …   (0,2,1)
 *    朴素的 `html button`（0,0,2）就算带了 !important 也压不住它们。
 *    所以这里用一个**永不命中的 id 反选** `:not(#__unused)` 把特异性顶到
 *    id 级 —— 作者样式表里再没有别的东西能赢它。
 *    紧凑档各自写成 (1,1,3)（与常规档同分），靠"排在后面"取胜。 */
html body button[class]:not(#__unused),
html body button:not([class]):not(#__unused),
html body input[type="button"]:not(#__unused),
html body input[type="submit"]:not(#__unused),
html body a[role="button"]:not(#__unused) {
  border-radius: var(--btn-r) !important;
}
html body button.maxconv-nav-item:not(#__unused),
html body button.maxconv-th-sort:not(#__unused),
html body button.maxconv-th-filter:not(#__unused),
html body button.maxconv-datetime-seg:not(#__unused),
html body button.icon-btn:not(#__unused),
html body button.link-action:not(#__unused) {
  border-radius: var(--btn-r-sm) !important;
}

/* ---- 1.1 通用骨架：尺寸、字体、反馈 ---- */
.maxconv-tool-btn,
.maxconv-create-btn,
[data-slot="button"],
button.geo-selector-trigger,
button.link-action,
button.icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--btn-gap) !important;
  min-height: var(--btn-h) !important;
  padding: 0 var(--btn-px) !important;
  border-radius: var(--btn-r) !important;
  font-family: inherit !important;
  font-size: var(--btn-fs) !important;
  font-weight: var(--btn-fw) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 0.14s var(--btn-ease),
    border-color 0.14s var(--btn-ease),
    color 0.14s var(--btn-ease),
    box-shadow 0.14s var(--btn-ease),
    opacity 0.14s var(--btn-ease) !important;
}
.maxconv-tool-btn > svg,
.maxconv-create-btn > svg,
[data-slot="button"] > svg,
button.link-action > svg,
button.icon-btn > svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

/* 方形图标按钮：保持正方形，别被拉成胶囊 */
button.icon-btn {
  width: var(--btn-h-sm) !important;
  height: var(--btn-h-sm) !important;
  min-height: var(--btn-h-sm) !important;
  padding: 0 !important;
  border-radius: var(--btn-r-sm) !important;
}

/* ---- 1.2 default：白面 + 发丝描边（工具栏主力） ---- */
.maxconv-tool-btn,
button.geo-selector-trigger,
[data-slot="button"] {
  background: var(--btn-face) !important;
  color: var(--btn-ink) !important;
  border: 1px solid var(--btn-line) !important;
  box-shadow: var(--a-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.04)) !important;
}
.maxconv-tool-btn:hover:not(:disabled),
button.geo-selector-trigger:hover:not(:disabled),
[data-slot="button"]:hover:not(:disabled) {
  background: var(--btn-face-hover) !important;
}
.maxconv-tool-btn:active:not(:disabled),
button.geo-selector-trigger:active:not(:disabled),
[data-slot="button"]:active:not(:disabled) {
  background: var(--btn-face-active) !important;
}

/* ---- 1.3 primary：实色 —— 整词匹配，避免误伤 outline-none ---- */
.maxconv-create-btn,
[data-slot="button"][class~="bg-primary"],
button[class~="bg-primary"] {
  background: var(--btn-solid) !important;
  color: var(--btn-solid-ink) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(0, 113, 227, 0.24) !important;
}
.maxconv-create-btn:hover:not(:disabled),
[data-slot="button"][class~="bg-primary"]:hover:not(:disabled),
button[class~="bg-primary"]:hover:not(:disabled) {
  background: var(--btn-solid-hover) !important;
}
.maxconv-create-btn:active:not(:disabled),
[data-slot="button"][class~="bg-primary"]:active:not(:disabled),
button[class~="bg-primary"]:active:not(:disabled) {
  background: var(--btn-solid-active) !important;
}

/* ---- 1.4 danger ---- */
.maxconv-tool-btn.is-danger,
[data-slot="button"][class~="bg-destructive"],
button[class~="bg-destructive"] {
  background: var(--btn-face) !important;
  color: var(--btn-danger) !important;
  border: 1px solid var(--btn-danger-line) !important;
}
.maxconv-tool-btn.is-danger:hover:not(:disabled) {
  background: var(--btn-danger-soft) !important;
}
[data-slot="button"][class~="bg-destructive"]:hover:not(:disabled),
button[class~="bg-destructive"]:hover:not(:disabled) {
  background: var(--btn-danger) !important;
  color: #fff !important;
}

/* ---- 1.5 quiet：透明底的弱操作（+ Create Lander / 行内链接式按钮） ---- */
button.link-action,
button.icon-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--a-blue, #007aff) !important;
  min-height: var(--btn-h-sm) !important;
  padding: 0 var(--btn-px-sm) !important;
  font-size: var(--btn-fs-sm) !important;
  border-radius: var(--btn-r-sm) !important;
}
button.link-action:hover:not(:disabled),
button.icon-btn:hover:not(:disabled) {
  background: var(--btn-quiet-hover) !important;
}
button.link-action:active:not(:disabled),
button.icon-btn:active:not(:disabled) {
  background: var(--btn-quiet-active) !important;
}
button.icon-btn {
  color: var(--muted-foreground, #6e6e73) !important;
}
button.icon-btn.is-danger {
  color: var(--btn-danger) !important;
}
button.icon-btn.is-danger:hover:not(:disabled) {
  background: var(--btn-danger-soft) !important;
}

/* ---- 1.6 选中态统一成「主色淡染」，不再各自为政 ---- */
.maxconv-tool-btn.is-active,
.maxconv-nav-item.is-active,
.maxconv-th-sort.is-sorted,
[data-slot="button"][data-active="true"],
[data-slot="button"][data-state="active"],
button[data-active="true"],
button[data-state="active"] {
  background: var(--accent, rgba(0, 122, 255, 0.08)) !important;
  color: var(--accent-foreground, #007aff) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* ---- 1.7 焦点环 / 禁用态 ---- */
.maxconv-tool-btn:focus-visible,
.maxconv-create-btn:focus-visible,
[data-slot="button"]:focus-visible,
button.link-action:focus-visible,
button.icon-btn:focus-visible,
button.geo-selector-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28) !important;
}
.maxconv-tool-btn:disabled,
.maxconv-create-btn:disabled,
[data-slot="button"]:disabled,
button.link-action:disabled,
button.icon-btn:disabled,
.maxconv-tool-btn[disabled],
[data-slot="button"][disabled],
button[aria-disabled="true"] {
  opacity: var(--btn-disabled-op) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ---- 1.8 顶部导航：同为按钮，也要进同一家族（只是更紧凑） ---- */
.maxconv-nav-item {
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: var(--btn-r-sm) !important;
  font-size: var(--btn-fs-sm) !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition:
    background-color 0.14s var(--btn-ease),
    color 0.14s var(--btn-ease) !important;
}
.maxconv-nav-item:hover {
  background: var(--btn-quiet-hover) !important;
}
/* 顶栏里的每一个可点元素都进同一套度量（品牌、导航、More、头像…） */
.maxconv-topnav button,
.maxconv-topnav a[role="button"] {
  font-size: var(--btn-fs-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--btn-r-sm) !important;
  transition:
    background-color 0.14s var(--btn-ease),
    color 0.14s var(--btn-ease) !important;
}

/* ---- 1.9 表头排序 / 日期段：给一点呼吸感，但保持轻量 ---- */
.maxconv-th-sort,
.maxconv-th-filter,
.maxconv-datetime-seg {
  border-radius: var(--btn-r-sm) !important;
  transition:
    background-color 0.14s var(--btn-ease),
    color 0.14s var(--btn-ease) !important;
}
.maxconv-th-sort:hover,
.maxconv-th-filter:hover,
.maxconv-datetime-seg:hover {
  background: var(--btn-quiet-hover) !important;
}

/* ---- 1.10 弹窗里的 Save / Cancel 也统一 ---- */
[data-slot="dialog-footer"] button,
.editor-shell [data-slot="dialog-footer"] button {
  min-height: var(--btn-h) !important;
  border-radius: var(--btn-r) !important;
  font-size: var(--btn-fs) !important;
}

/* ==========================================================================
 * 2. 页面平铺 —— 左右贴到浏览器边沿
 *
 *    实测（CDP 拉的是真实命中规则，不是猜的）留白来自四条规则：
 *      a) main, .main-content, [role="main"]
 *           padding-left/right: clamp(12px, 1.5vw, 20px) !important
 *      b) .app-frame :is(.dense-workbench-page, .campaign-ops-workspace,
 *                        .manager-main, .traffic-source-main, .logs-main,
 *                        .dashboard-page)
 *           padding-inline: var(--page-padding) !important      ← 16px
 *      c) .dense-workbench-page  padding: 0 16px 16px !important
 *      d) .entity-workspace / .files-workspace 各自的 padding
 *    全是 !important，所以这里也只能 !important，并用 html 前缀抬特异性。
 *    顺便把 .app-frame 的 width:100vw 换成 100% —— 100vw 含滚动条，
 *    会让右边缘被裁掉约 15px。
 * ======================================================================== */
html,
html body {
  max-width: none !important;
  --page-padding: 0px !important;
}
html .app-frame {
  --page-padding: 0px !important;
  width: 100% !important;
  max-width: none !important;
}
html main,
html .main-content,
html [role="main"],
html .app-frame .dense-workbench-page,
html .app-frame .campaign-ops-workspace,
html .app-frame .manager-main,
html .app-frame .traffic-source-main,
html .app-frame .logs-main,
html .app-frame .dashboard-page,
html .app-frame .entity-workspace,
html .app-frame .files-workspace,
html .app-frame .settings-workspace,
html .app-frame :is(.dense-workbench-page, .campaign-ops-workspace, .manager-main, .traffic-source-main, .logs-main, .dashboard-page, .entity-workspace, .files-workspace, .settings-workspace) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ==========================================================================
 * 3. 弹窗 —— 去掉背景模糊遮罩
 *    apple-theme 里给 body 直属的 overlay 加了 saturate(180%) blur(12px)。
 *    这里用更高特异性（多一个 html 祖先）把它覆盖掉，只保留一层轻暗。
 *    想要完全无遮罩：把下面 background 改成 transparent。
 * ======================================================================== */
html body > div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.18) !important;
}
html.dark body > div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.5) !important;
}
/* 面板自身也不许再毛玻璃 */
[role="dialog"],
[role="alertdialog"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
 * 4. 子弹窗层级 —— 修复 "+ Create Lander" / "+ Create Offer" 点了没反应
 *
 * 根因：Create Campaign 编辑器是 z-index 60 的全屏面板；
 *       它里面再弹出的 Create Lander / Create Offer 用的是 Radix 默认的
 *       z-50 —— 于是子弹窗被自己的父弹窗完全盖住，
 *       elementFromPoint 打下去命中的是父面板，看起来就是"点了没反应"。
 *
 * 修法：所有 portal 出来的层都是 body 的直接子元素，
 *       按 DOM 顺序给"第二层及以上"整体抬升：
 *         父面板 60  <  子遮罩 79  <  子弹窗 80
 *       这样既不改第一层弹窗的任何行为，又能无限层叠。
 * ======================================================================== */
html body > div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper])
  ~ div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper]) {
  z-index: 79 !important;
}
html body > [role="dialog"] ~ [role="dialog"],
html body > [role="dialog"] ~ [role="alertdialog"] {
  z-index: 80 !important;
}
/* 三层以上继续抬 */
html body > [role="dialog"] ~ [role="dialog"] ~ [role="dialog"] {
  z-index: 90 !important;
}
html body > div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper])
  ~ div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper])
  ~ div[data-state="open"]:not([role]):not([data-radix-popper-content-wrapper]) {
  z-index: 89 !important;
}

/* ==========================================================================
 * 5. 子弹窗外观对齐 —— 让它和 Landers/Offers 页面的「Create Lander / Create Offer」
 *    长得一样
 *
 *    实测两个弹窗的差异：
 *      · 独立版  宽 820  圆角 12px  padding 0    按钮 Cancel / Save
 *      · 嵌套版  宽 1024 圆角 18px  padding 14px 按钮 Cancel / Save / Close
 *    这里把嵌套版的外壳收敛到独立版的尺寸，并去掉多余的 Close
 *    （Cancel 已经能关，两个关闭按钮是重复的）。
 *
 *    ⚠️ 字段集（Tags、{click_id} 宏 chip、Offer 的 payout 区块）是组件级差异，
 *       CSS 加不出来，需要改源码才能完全一致。
 * ======================================================================== */
html body > [role="dialog"] ~ [role="dialog"] {
  width: 50rem !important;          /* = 800px，与独立版实测宽度一致 */
  max-width: calc(100vw - 2rem) !important;
  border-radius: 12px !important;
  padding: 0 !important;
}
/* 独立版没有右上角的 X（只有 Cancel / Save），嵌套版多一个 —— 对齐掉 */
html body > [role="dialog"] ~ [role="dialog"] > button[data-slot="dialog-close"] {
  display: none !important;
}

/* ==========================================================================
 * 6. 顶部导航收紧
 *    上一轮我把导航项内边距从 5px 提到 9px，结果整条顶栏变松了。
 *    这里收到 5px，并把导航容器自身的列间距归零。
 * ======================================================================== */
html .maxconv-topnav {
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
html body button.maxconv-nav-item:not(#__unused) {
  padding-left: 5px !important;
  padding-right: 5px !important;
  min-height: 22px !important;
}

/* ==========================================================================
 * 7. 右侧 30px 空白 —— "左边贴了，右边没贴"的真凶
 *
 *    html 和 body 各自写了
 *        overflow-y: scroll;  scrollbar-gutter: stable;
 *    两个都**常驻**预留滚动条槽，于是右边一共被吃掉 30px（实测像素：左 0 / 右 30）。
 *    去掉 body 那份 → 剩 15px；两份都去掉 → 0px。
 *
 *    为什么这里用"把滚动条宽度设成 0"而不是改 overflow：
 *      · 这两条属性在作者样式表里都带 !important 且选择器权重更高，
 *        内联非 important 都压不过，改了也白发；
 *      · 真把 overflow-y 改成 auto/important 又会顶掉弹窗的 scroll-lock，
 *        弹窗打开时背景能滚。
 *    所以只把 html / body 这两层滚动条的宽度归零（滚动照样能用），
 *    页面内部的滚动容器（表格等）不受影响，仍然有可见滚动条。
 * ======================================================================== */
html::-webkit-scrollbar,
html body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
html,
html body {
  scrollbar-width: none !important;   /* Firefox */
}

/* ==========================================================================
 * 8. 日期范围弹层（Date Range / Timezone）—— 2026-09-22 第二轮补充
 *
 *    组件：client/src/components/tracker/DateTimeRangeControl.tsx
 *    两个毛病都是覆盖层自己"用力过猛"造成的，不是应用 bug：
 *
 *    8.1 顶部两个标签挤成一团
 *        apple-theme 8.6 用一条全局 [role="tablist"] 把**任何** tablist 都改造
 *        成 iOS 分段控件，且 display:inline-flex 没加 !important（靠加载顺序
 *        赢过组件的 display:flex）。这组件的 tablist 本该是整宽标签条，被这么
 *        一改就收缩到内容宽度 —— 实测 164.5px / 弹层 320px，两个标签各剩 79px，
 *        连 "Date Range" 都放不下，直接换行。
 *        → 只在这一个组件内还原成整宽标签条，其余页面 tablist 不受影响。
 *
 *    8.2 日历里看不出选了哪几天
 *        日期格是 shadcn 的 [data-slot="button"]，被 cs-ux 1.1 / 1.2 当成普通
 *        按钮刷成「白面 + 发丝描边 + 投影」；而 react-day-picker 的区间高亮走
 *        Tailwind 的 data-[range-start=true]:bg-primary（**没有** !important），
 *        正好被那几条 !important 压掉。结果整个日历是一格一格的白卡片，选中的
 *        区间完全不可见。
 *        → 先把日期格还原成无底色的 ghost 单元，再用 data-range-* 把
 *          「起点 / 区间 / 终点」画成一条连续色带。
 *
 *    ⚠️ 这里大量使用 :not(#__csdr) 这个永不命中的 id 反选，只为抬特异性。
 *       因为 cs-ux 自己的收尾规则
 *           html body button[class]:not(#__unused) { border-radius: … !important }
 *       权重是 (1,2,3)，比它低的规则哪怕写了 !important 也照样输。
 *       （同 apple-theme 9.6 的教训：特异性军备竞赛只能靠 id 反选破解。）
 * ======================================================================== */

/* ---- 8.1 标签页：撑满整宽 / 文字不换行 / 下划线式指示 ---- */

/* 标签条的底色要分主题：浅色用比弹层深一档的 --muted，
   暗色的 --muted 和弹层同色（都是 #2c2c2e），用了就分不出条与面板，
   所以暗色改成用 --card（#1c1c1e）压深一档，选中项用 --popover 提亮。 */
:root {
  --csdr-tabstrip-bg: var(--muted);
  --csdr-tab-active-bg: var(--card);
}
.dark {
  --csdr-tabstrip-bg: var(--card);
  --csdr-tab-active-bg: var(--popover);
}

/* 容器：apple-theme 的分段控件外壳（inline-flex + 2px padding + 灰圆角块）
   在这里换回"整宽标签条"。 */
.maxconv-datetime-popover .maxconv-datetime-tabs[role="tablist"] {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--csdr-tabstrip-bg) !important;
  box-shadow: none !important;
}

/* 两个标签等分整宽；图标与文字同排，禁止换行。 */
.maxconv-datetime-popover .maxconv-datetime-tabs button[role="tab"]:not(#__csdr) {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  gap: 7px !important;
  justify-content: center !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted-foreground) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transition:
    color 0.14s var(--btn-ease, ease),
    background-color 0.14s var(--btn-ease, ease) !important;
}

.maxconv-datetime-popover .maxconv-datetime-tabs button[role="tab"]:hover:not(.is-active):not(#__csdr) {
  background: color-mix(in srgb, var(--csdr-tab-active-bg) 60%, transparent) !important;
  color: var(--foreground) !important;
}

.maxconv-datetime-popover .maxconv-datetime-tabs button[role="tab"].is-active:not(#__csdr) {
  color: var(--foreground) !important;
  background: var(--csdr-tab-active-bg) !important;
  border-bottom-color: var(--primary) !important;
  box-shadow: none !important;
}

/* ---- 8.2 日历：日期格回到 ghost 形态 ---- */

.maxconv-datetime-popover .maxconv-datetime-calendar button[data-day]:not(#__csdr) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--foreground) !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

/* 星期表头 */
.maxconv-datetime-popover .maxconv-datetime-calendar .rdp-weekday {
  color: var(--muted-foreground) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* 暗色下有一条
       .dark tbody tr { background-color: var(--surface) !important }
   是给数据表做行底色的，可日历也是 <table> —— 于是"每周"都被刷成一条横带。
   浅色没有这条规则，所以只有暗色会花。这里让日历的行让位。 */
.dark .maxconv-datetime-popover .maxconv-datetime-calendar tbody tr:not(#__csdr) {
  background: transparent !important;
}

/* 非本月 / 不可选：用 opacity 弱化而不是 color-mix，
   因为暗色下 --muted-foreground 本身已经是 60% 透明，再乘一次就看不见了。 */
.maxconv-datetime-popover .maxconv-datetime-calendar .rdp-outside > button:not(#__csdr),
.maxconv-datetime-popover .maxconv-datetime-calendar .rdp-disabled > button:not(#__csdr) {
  color: var(--muted-foreground) !important;
  opacity: 0.45 !important;
}

/* hover 反馈只给"未选中"的日期，避免和区间色打架 */
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-day]:hover:not(:disabled):not([data-range-start="true"]):not([data-range-end="true"]):not([data-range-middle="true"]):not(#__csdr) {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

/* 今天：一圈描边即可，不必整块灰底（否则和区间色抢视觉） */
.maxconv-datetime-popover .maxconv-datetime-calendar td.rdp-today {
  background: transparent !important;
}
.maxconv-datetime-popover .maxconv-datetime-calendar td.rdp-today > button[data-day]:not([data-range-start="true"]):not([data-range-end="true"]):not(#__csdr) {
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* ---- 8.3 选中区间：画成一条连续色带 ---- */

/* 色带中间段的底色 / 字色单独提成令牌，因为要过对比度：
   浅色下 #d6e8fb 底 + #0071e3 字只有 3.5:1，12.5px 小字不达标（AA 要 4.5:1）。 */
:root {
  --csdr-band-bg: color-mix(in srgb, var(--primary) 18%, var(--card));
  --csdr-band-ink: color-mix(in srgb, var(--primary) 72%, var(--foreground));
}
.dark {
  --csdr-band-bg: color-mix(in srgb, var(--primary) 30%, var(--card));
  --csdr-band-ink: color-mix(in srgb, var(--primary) 55%, #ffffff);
}

/* td 自带 bg-accent（calendar.tsx 给 range_start / range_end 的 classNames），
   方格底会从按钮的圆角外侧露出来，这里统一让位。 */
.maxconv-datetime-popover .maxconv-datetime-calendar td.rdp-range_start,
.maxconv-datetime-popover .maxconv-datetime-calendar td.rdp-range_middle,
.maxconv-datetime-popover .maxconv-datetime-calendar td.rdp-range_end {
  background: transparent !important;
}

/* 区间中间：主色淡染，且左右不圆角 —— 相邻格子接成一条带 */
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-range-middle="true"]:not(#__csdr) {
  background: var(--csdr-band-bg) !important;
  color: var(--csdr-band-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* 起点 / 终点：实心主色 */
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-range-start="true"]:not(#__csdr),
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-range-end="true"]:not(#__csdr) {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* 端点圆角：单日两侧都圆；跨天时只圆朝外那一侧 */
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-range-start="true"][data-range-end="true"]:not(#__csdr) {
  border-radius: 8px !important;
}
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-range-start="true"]:not([data-range-end="true"]):not(#__csdr) {
  border-radius: 8px 0 0 8px !important;
}
.maxconv-datetime-popover .maxconv-datetime-calendar button[data-range-end="true"]:not([data-range-start="true"]):not(#__csdr) {
  border-radius: 0 8px 8px 0 !important;
}

/* ---- 8.4 底部：补一个"N 天"读数（内容由 cs-ux.js 写到 data-csdr-days） ---- */
.maxconv-datetime-footer::before {
  content: attr(data-csdr-days);
  margin-right: auto;
  align-self: center;
  padding-left: 2px;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
 * 9. Dashboard 复查修正（2026-09-22 第三轮）
 *
 *    这一轮先做了体检，结论都来自实测而不是观感（视口 1088 与 1512 各测一遍）：
 *
 *    9.1 白底面板左右贴死视口，描边和圆角被裁
 *        应用自己给 main 写了 padding-inline: clamp(12px,1.5vw,20px)，
 *        本层第 2 节为了「页面平铺」把它归零了。对表格类页面（整行贴边）没问题，
 *        但 Dashboard 是一整页卡片：实测 .overview-panel / .dash-chart-card /
 *        .performer-list 的 box 都是 x=0 / right=视口宽，14px 圆角和 1px 描边
 *        正好压在视口边缘上，看起来像被裁掉。
 *        → 只把 Dashboard 的内边距要回来，表格类页面保持贴边不变。
 *
 *    9.2 指标卡的数值和标签不在同一条左边线上
 *        apple-theme 的注释写着「标签与数值共用一个起始边」，但数值上有应用留下的
 *        padding: 8px 9px 9px —— 实测字形 x：标签 41px、数值 35px，差了 6px。
 *        同一个 padding 还让卡片虚高：卡高 90.2px，内容只有约 58px，底部一片死白。
 *        把 padding 归零，两个毛病一起消掉（卡高回落到 ~71px）。
 *
 *    9.3 图表 tooltip 比图表本身还高 90px
 *        12 条序列 → 13 行 → wrapper 实测 h=344.1px，而 .dash-chart-wrap 只有
 *        260px，于是 tooltip 往下压住图例、再溢出到 Performers 区。
 *        改成两列网格（6 行，约 173px），回到图表内部；顺便把层级提到图例之上。
 *
 *    9.4 图例 12 个 chip 全被刷成蓝底蓝字
 *        12 条序列默认全部开启 → 12 个 .is-active → 12 个同一块蓝色，
 *        连成一条横带。真正带颜色语义的是每个 chip 里的色点，却被蓝底淹没。
 *        → 开启＝中性（白底 + 发丝描边 + 深字），关闭＝淡出。
 *          颜色只留给色点，和卡片、tooltip 里的色点也就能对上号了。
 * ======================================================================== */

/* ---- 9.1 给 Dashboard 要回左右内边距 ---- */
:root {
  --csdb-gutter: clamp(12px, 1.4vw, 18px);
}
html .app-frame main.traditional-dashboard-page {
  padding-left: var(--csdb-gutter) !important;
  padding-right: var(--csdb-gutter) !important;
}

/* ---- 9.2 指标卡：数值归位到「标签文字的左边线」 ----
   实测字形 x：标签 41px、数值 35px。归零 padding 只能让数值退到色点那条线（26px），
   仍然和标签文字差 15px。A/B 各渲染一张 3x 放大图对比后选了对齐标签文字 ——
   数字和「VISITS」的 V 共用一条竖线，视线不用往回跳。
   缩进不是写死的 15px，而是由色点尺寸 + 间距算出来：将来改色点大小，
   数值会跟着走，不会又错位。 */
:root {
  --csdb-dot: 8px;
  --csdb-dot-gap: 7px;
}
.traditional-dashboard-page .metric-card-label {
  gap: var(--csdb-dot-gap) !important;
}
.traditional-dashboard-page .metric-card-label::before {
  width: var(--csdb-dot) !important;
  height: var(--csdb-dot) !important;
}
.traditional-dashboard-page .metric-card-value {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: calc(var(--csdb-dot) + var(--csdb-dot-gap)) !important;
  margin-top: 3px !important;
  margin-bottom: 0 !important;
}

/* ---- 9.3 tooltip：收进图表内 + 抬到图例之上 ---- */
.recharts-tooltip-wrapper {
  z-index: 40 !important;
}
.recharts-default-tooltip {
  min-width: 280px !important;
  max-width: min(420px, 80vw) !important;
}
.recharts-tooltip-item-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.recharts-tooltip-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  list-style: none !important;
}

/* ---- 9.4 图例：颜色只交给色点 ---- */
.dash-chart-legend button {
  background: var(--card) !important;
  color: var(--text-secondary) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
}
.dark .dash-chart-legend button {
  background: var(--card) !important;
}
.dash-chart-legend button:hover {
  background: var(--muted) !important;
}
.dash-chart-legend button.is-active {
  background: var(--card) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
}
.dash-chart-legend button:not(.is-active) {
  opacity: 0.45;
}