/* ============================================================================
 * 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 */
}