/* ============================================================================
 * qqhotmail.com · Phase 3 效果预览 / structure.css
 *
 * 本文件是【结构几何的唯一来源】：所有列宽、gutter、区块高度、栅格跨列、
 * 断点阈值、分隔条、触摸目标、阅读容器上限，全部集中定义在 §A 的 STRUCT.* 段。
 * 三个 palette-*.html 不含任何 <style> / 内联尺寸；切换 data-palette 时
 * DOM 与 class 零改动，只由 ./tokens.css 的 Value 集（源 spec/tokens.css）+ 本文件 §B 的
 * 「皮肤合成变量」(全部由既有 token 组合而成，不引入新的色值/几何数值) 生效。
 *
 * 依据：
 *   00-design-brief.md §3/§4        约束基线、三套速览
 *   01-visual-spec.md  §2/§3/§5/§7  全量 Token、组件视觉规格、分层、九画面脚本
 *   02-ux-architecture.md §2/§3/§5/§6 精确 px 骨架、断点、a11y、29 区块
 *   03-block-manifest.md            29 区块 ID / 顺序 / 几何 / 字段集
 *   04-structure-diff.md             S* → 区块 ID 语义映射（22 项差异）
 *   05-implementation-baseline.md   优先级裁决 + 12 条验收
 *
 * 优先级（主理人裁决）：结构几何/区块ID/顺序/字段集/断点/a11y → ux-design；
 *                       色值/字阶/圆角/阴影/图标/示例数据/识别点 → visual-architect。
 * ========================================================================== */

/* ===========================================================================
 * §A  STRUCT.* 结构常量（唯一来源 · 02-ux-architecture.md §2 / §7.1, 03 §5）
 *     三套 A/B/C × 三端 admin/sales/me 完全一致，任何皮肤规则不得覆写。
 * ======================================================================== */
:root {
  /* --- 三端设计基准画面 --- */
  --STRUCT-view-admin-w: 1440px;  --STRUCT-view-admin-h: 900px;
  --STRUCT-view-sales-w: 1366px;  --STRUCT-view-sales-h: 768px;
  --STRUCT-view-me-w: 390px;      --STRUCT-view-me-h: 844px;

  /* --- 通用 --- */
  --STRUCT-divider: 1px;                 /* 分隔条统一 1px，计入总宽/高 */
  --STRUCT-topbar-h: 48px;
  --STRUCT-content-pad: 24px;
  --STRUCT-grid-cols: 12;
  --STRUCT-nav-depth: 2;
  --STRUCT-read-max: 680px;              /* 阅读容器最大宽 (02 §5.6) */
  --STRUCT-touch: 44px;                  /* 触摸目标下限 (02 §5.4) */
  /* STRUCT.modal.width：04 §0.2.2 明确「Phase 2 未给数值、不补数值、不影响九首屏」。
     九个基准画面无常驻弹窗，故本文件不定义该常量、不引入任何弹窗宽度数值。 */

  /* --- /admin 运营仪表盘 1440×900 (02 §2.1) --- */
  --STRUCT-admin-sidebar-w: 216px;
  --STRUCT-admin-sidebar-collapsed: 56px;
  --STRUCT-admin-main-w: 1224px;         /* 1440 - 216 */
  --STRUCT-admin-content-w: 1176px;      /* 1224 - 24*2 */
  --STRUCT-admin-head-h: 56px;
  --STRUCT-admin-kpi-h: 188px;
  --STRUCT-kpi-card-w: 285px;
  --STRUCT-kpi-card-h: 88px;
  --STRUCT-kpi-gutter: 12px;
  --STRUCT-grid-gutter: 16px;
  --STRUCT-col8-w: 779px;                /* 8 栅 */
  --STRUCT-col4-w: 381px;                /* 4 栅 */
  --STRUCT-trend-h: 240px;
  --STRUCT-lower-h: 264px;
  --STRUCT-section-gap: 16px;
  --STRUCT-lower-alert-h: 120px;
  --STRUCT-lower-audit-h: 128px;   /* 120 + 16 + 128 = 264 */

  /* --- /sales 工作台 1366×768 (02 §2.2 / 03 §2) --- */
  --STRUCT-sales-a-w: 232px;
  --STRUCT-sales-b-w: 320px;
  --STRUCT-sales-read-w: 563px;
  --STRUCT-sales-rail-w: 248px;
  --STRUCT-sales-body-h: 720px;          /* 768 - 48 */
  --STRUCT-sales-a-tree-h: 260px;
  --STRUCT-sales-a-filter-h: 212px;
  --STRUCT-sales-a-todo-h: 160px;
  --STRUCT-sales-a-foot-h: 88px;
  --STRUCT-sales-b-head-h: 48px;
  --STRUCT-sales-b-list-h: 632px;
  --STRUCT-sales-b-page-h: 40px;
  --STRUCT-sales-ctx-h: 56px;
  --STRUCT-sales-read-body-h: 600px;
  --STRUCT-sales-read-foot-h: 64px;
  --STRUCT-sales-card-h: 168px;
  --STRUCT-sales-timeline-h: 440px;
  --STRUCT-sales-rail-foot-h: 56px;
  --STRUCT-sales-item-h: 72px;           /* 会话条目基准 H72 */

  /* --- /me 收件箱 390×844 (02 §2.3 / 03 §3) --- */
  --STRUCT-me-top-h: 56px;
  --STRUCT-me-quota-h: 32px;
  --STRUCT-me-chip-h: 44px;
  --STRUCT-me-list-h: 622px;
  --STRUCT-me-tab-h: 90px;               /* H56 + 安全区 34 */
  --STRUCT-me-tab-bar-h: 56px;
  --STRUCT-me-safe: 34px;
  --STRUCT-me-slot: 78px;                /* 390 / 5 */
  --STRUCT-me-compose: 48px;
  --STRUCT-me-item-h: 76px;              /* 会话条目 H76 */

  /* --- 断点阈值（结构常量，集中定义；九个基准画面按设计基准渲染，不引入断点差异） --- */
  --STRUCT-bp-admin-min: 1280px;
  --STRUCT-bp-admin-base: 1440px;
  --STRUCT-bp-admin-wide: 1600px;
  --STRUCT-bp-sales-min: 1280px;
  --STRUCT-bp-sales-base: 1366px;
  --STRUCT-bp-sales-wide: 1600px;
  --STRUCT-bp-me-narrow: 360px;
  --STRUCT-bp-me-base: 390px;
  --STRUCT-bp-me-large: 430px;
  --STRUCT-bp-me-tablet: 768px;
  --STRUCT-bp-me-desktop: 1024px;
}

/* ===========================================================================
 * §B  皮肤「合成变量」—— 只由 tokens.css 既有 Key 组合，不引入新的色值 / 几何数值
 *     这是三套可辨差异（非只换主色）的落点：卡片边界策略、光源分工、面积渐变、
 *     高光条、进度条端帽、状态标记宽度、hover / 选中底。
 * ======================================================================== */
:root { /* 跨套默认，保证任何 data-palette 下变量均有定义 */
  --skin-card-bg: var(--surface-1);
  --skin-card-bd: var(--bw) solid var(--border);
  --skin-card-shadow: var(--shadow-0);
  --skin-card-r: var(--card-r);
  --skin-panel-bg: var(--surface-2);
  --skin-hover: var(--surface-3);
  --skin-selected: var(--brand-soft);
  --skin-select-bar-w: var(--bw-strong);
  --skin-select-bar-r: 0px;
  --skin-kpi-highlight: transparent;
  --skin-flow-mail: var(--brand);
  --skin-flow-customer: var(--brand);
  --skin-area-top: 0;
  --skin-area-bottom: 0;
  --skin-row-line: var(--bw) solid var(--border);
  --skin-bar-rx: 3px;
  --skin-bar-h: 6px;
  --skin-tl-node: 8px;
  --skin-chip-bd: var(--bw) solid var(--border);
  --skin-tab-indicator: var(--bw-strong) solid var(--brand);
  --skin-list-card-bd: var(--bw) solid var(--border);
  --skin-list-card-shadow: var(--shadow-0);
  --skin-section-divider: var(--bw) solid var(--border);
  --skin-kpi-number-font: var(--font-mono);
  --skin-kpi-number-weight: var(--fw-display);
  --skin-icon-glow: none;
}

/* ---- A 钢青台账：白卡 + 1px 细线 + 零阴影 + 零渐变 ---- */
:root[data-palette="A"] {
  --skin-card-bg: var(--surface-1);
  --skin-card-bd: var(--bw) solid var(--border);
  --skin-card-shadow: var(--shadow-0);        /* none，硬禁用项 1 */
  --skin-panel-bg: var(--surface-2);
  --skin-hover: var(--surface-3);
  --skin-selected: var(--brand-soft);
  --skin-select-bar-w: var(--bw-strong);
  --skin-select-bar-r: 0px;
  --skin-kpi-highlight: transparent;          /* A 无顶部高光条 */
  --skin-flow-mail: var(--brand);
  --skin-flow-customer: var(--brand);         /* A 灰度 90%+，不做双光源 */
  --skin-area-top: .08;                       /* 面积图 8% 线性渐变（唯一允许的渐变） */
  --skin-area-bottom: .08;
  --skin-row-line: var(--bw) solid var(--border);   /* 仅横向，无竖线无斑马纹 */
  --skin-bar-rx: 3px;
  --skin-bar-h: 6px;
  --skin-tl-node: 8px;
  --skin-chip-bd: var(--bw) solid var(--border);
  --skin-tab-indicator: var(--bw-strong) solid var(--brand);  /* 直角底部指示条 */
  --skin-list-card-bd: var(--bw) solid var(--border);
  --skin-list-card-shadow: var(--shadow-0);
  --skin-section-divider: var(--bw) solid var(--border);
  --skin-kpi-number-font: var(--font-mono);   /* 32px 等宽 KPI 数字 */
  --skin-kpi-number-weight: var(--fw-display);
  --skin-icon-glow: none;
}

/* ---- B 午夜仪表：深底表面亮度阶梯 + 青/紫双光源 + KPI 顶部 1px 高光条 ---- */
:root[data-palette="B"] {
  --skin-card-bg: var(--surface-1);
  --skin-card-bd: var(--bw) solid var(--border);
  --skin-card-shadow: var(--shadow-1);        /* inset 0 1px 0 顶部微高光，非外阴影 */
  --skin-panel-bg: var(--surface-2);
  --skin-hover: var(--surface-3);
  --skin-selected: var(--brand-soft);
  --skin-select-bar-w: var(--bw-strong);
  --skin-select-bar-r: 0px;
  --skin-kpi-highlight: var(--brand);         /* KPI 顶部 1px 高光条 */
  --skin-flow-mail: var(--brand);             /* 青 = 邮件流 */
  --skin-flow-customer: var(--accent);        /* 紫 = 客户流 */
  --skin-area-top: .18;                       /* 面积渐变 18% → 0% */
  --skin-area-bottom: 0;
  --skin-row-line: var(--bw) solid var(--border);
  --skin-bar-rx: 3px;
  --skin-bar-h: 6px;
  --skin-tl-node: 8px;
  --skin-chip-bd: var(--bw) solid var(--border-strong);
  --skin-tab-indicator: var(--bw-strong) solid var(--brand);
  --skin-list-card-bd: var(--bw) solid var(--border);
  --skin-list-card-shadow: var(--shadow-1);
  --skin-section-divider: var(--bw) solid var(--border);
  --skin-kpi-number-font: var(--font-mono);
  --skin-kpi-number-weight: var(--fw-display);  /* 500，禁 >=700 */
  --skin-icon-glow: var(--icon-glow);
}

/* ---- C 暖砂信笺：暖砂底 + 无边框浮起卡 + 大圆角柔和阴影 + 主动留白 ---- */
:root[data-palette="C"] {
  --skin-card-bg: var(--surface-1);
  --skin-card-bd: none;                       /* 硬禁用项 7：禁 1px 细线切分卡片 */
  --skin-card-shadow: var(--shadow-1);
  --skin-panel-bg: var(--surface-2);
  --skin-hover: var(--brand-softer);
  --skin-selected: var(--brand-soft);
  --skin-select-bar-w: 4px;                   /* 4px 圆头竖条 (01 §3.6) */
  --skin-select-bar-r: 2px;
  --skin-kpi-highlight: transparent;
  --skin-flow-mail: var(--brand);             /* 赤陶 = 待办 / CTA */
  --skin-flow-customer: var(--accent);        /* 墨绿 = 已回复 / 成功 */
  --skin-area-top: 0;                         /* 硬禁用项 2：无面积渐变 */
  --skin-area-bottom: 0;
  --skin-row-line: var(--bw) solid var(--border);   /* 表格仍允许仅横向行线 (01 §3.3) */
  --skin-bar-rx: 5px;
  --skin-bar-h: 10px;
  --skin-tl-node: 10px;
  --skin-chip-bd: none;
  --skin-tab-indicator: none;                 /* 胶囊底，无底部指示条 */
  --skin-list-card-bd: none;
  --skin-list-card-shadow: var(--shadow-1);
  --skin-section-divider: none;               /* 靠留白 + 表面色差分区 */
  --skin-kpi-number-font: var(--font-sans);   /* 硬禁用项 1：衬线禁入 KPI */
  --skin-kpi-number-weight: var(--fw-display);
  --skin-icon-glow: none;
}

/* ===========================================================================
 * §C  基础重置与预览外壳（预览控制台，不属于九个基准画面）
 * ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #e9ecf0;
  color: #1f2733;
  font-family: Inter, system-ui, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
button { font: inherit; cursor: pointer; }
a { color: inherit; }
svg { display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 预览顶栏 */
.pv-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 10px 20px;
  background: #10161f; color: #e8edf4;
  border-bottom: 1px solid #2a3545;
}
.pv-brand { display: flex; align-items: baseline; gap: 10px; margin-right: 8px; }
.pv-brand b { font-size: 15px; letter-spacing: .01em; }
.pv-brand span { font-size: 12px; color: #93a3b8; }
.pv-group { display: flex; align-items: center; gap: 6px; }
.pv-group > .pv-label { font-size: 11px; color: #8496ad; letter-spacing: .08em; margin-right: 4px; }
.pv-btn {
  appearance: none; border: 1px solid #344256; background: #1a2432; color: #c5d2e2;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; line-height: 18px;
  white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pv-btn:hover { background: #25334a; color: #fff; }
.pv-btn:focus-visible { outline: 2px solid #6cc4d8; outline-offset: 2px; }
:root[data-palette="A"] [data-set-palette="A"],
:root[data-palette="B"] [data-set-palette="B"],
:root[data-palette="C"] [data-set-palette="C"],
:root[data-role="admin"]:not([data-view-state="detail"]) [data-set-role="admin"],
:root[data-role="sales"]:not([data-view-state="detail"]) [data-set-role="sales"],
:root[data-role="me"]:not([data-view-state="detail"]) [data-set-role="me"],
:root[data-view-state="detail"] [data-set-detail="1"] {
  background: #3d6f8b; border-color: #63a5c2; color: #fff; font-weight: 600;
}
:root[data-palette="B"] [data-set-palette="B"] { background: #17707e; border-color: #3fc8d8; }
:root[data-palette="C"] [data-set-palette="C"] { background: #96502e; border-color: #d98a63; }
[data-set-detail] { display: none; }
:root[data-palette="B"] [data-set-detail] { display: inline-block; }
.pv-hint { margin-left: auto; font-size: 11px; color: #8496ad; }

/* 调性说明条：三套文案同处 DOM，由 :root[data-palette] 纯 CSS 切换 */
.tone-note {
  display: none; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 20px; background: #f6f8fa; border-bottom: 1px solid #d8dee6;
}
:root[data-palette="A"] .tone-note[data-for="A"],
:root[data-palette="B"] .tone-note[data-for="B"],
:root[data-palette="C"] .tone-note[data-for="C"] { display: flex; }
.tone-swatch { width: 34px; height: 34px; border-radius: 6px; flex: none; background: var(--brand); border: 1px solid rgba(0,0,0,.08); }
.tone-name { font-size: 16px; font-weight: 700; }
.tone-name small { font-weight: 400; font-size: 11px; letter-spacing: .1em; color: #6b7785; margin-left: 8px; }
.tone-desc { font-size: 13px; color: #3d4753; }
.tone-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #5b6875; }
.tone-meta b { font-family: ui-monospace, monospace; }
.tone-cost { color: #9a4a2f; }

/* 舞台 / 缩放 */
.pv-main { padding: 20px; }
.pv-stage { max-width: 1600px; margin: 0 auto; }
.view-cap {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #2b3644;
}
.view-cap .tag-role {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px; background: #dce4ec; color: #2b4d61;
}
.view-cap .tag-size { font-size: 12px; font-weight: 400; color: #6b7785; }
.view-cap .tag-note { font-size: 12px; font-weight: 400; color: #8a6b52; }
.stage-clip {
  --s: 1;
  position: relative; overflow: hidden;
  width: calc(var(--fw) * var(--s));
  height: calc(var(--fh) * var(--s));
  border: 1px solid #b9c3cf;
  background: var(--bg-app, #fff);
  box-shadow: 0 2px 10px rgba(20,30,45,.10);
}
.view[data-end="admin"] .stage-clip { --fw: var(--STRUCT-view-admin-w); --fh: var(--STRUCT-view-admin-h); }
.view[data-end="sales"] .stage-clip { --fw: var(--STRUCT-view-sales-w); --fh: var(--STRUCT-view-sales-h); }
.view[data-end="me"]    .stage-clip { --fw: var(--STRUCT-view-me-w);    --fh: var(--STRUCT-view-me-h); }
.frame {
  position: absolute; top: 0; left: 0;
  width: var(--fw); height: var(--fh);
  transform: scale(var(--s)); transform-origin: top left;
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-1);
  font-family: var(--font-sans), var(--font-cn);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.view-foot { margin: 10px 0 26px; font-size: 12px; color: #6b7785; max-width: 980px; }
.pv-footer { padding: 16px 20px 30px; font-size: 12px; color: #6b7785; border-top: 1px solid #d8dee6; }
.pv-footer code { font-family: ui-monospace, monospace; background: #dfe5ec; padding: 1px 5px; border-radius: 3px; }

/* 只显示当前端：纯属性驱动，不切换任何 class */
.view { display: none; }
:root[data-role="admin"] .view[data-end="admin"],
:root[data-role="sales"] .view[data-end="sales"],
:root[data-role="me"]    .view[data-end="me"] { display: block; }

/* ===========================================================================
 * §D  通用原子（图标 / 按钮 / 徽章 / 状态点 / 卡片 / 表格行）
 * ======================================================================== */
/* 语义化工具类：只用 tokens.css 既有间距档，不引入任何新数值；
   目的是让 palette-*.html 不含任何 style 属性（结构几何唯一来源）。 */
.spacer { flex: 1; }
.u-flex1 { flex: 1; }
.u-mlauto { margin-left: auto; }
.u-mt8 { margin-top: var(--sp-8); }
.u-mt12 { margin-top: var(--sp-12); }
.u-mt16 { margin-top: var(--sp-16); }
.u-pl24 { padding-left: var(--sp-24); }
.u-barmargin { margin: var(--sp-2) 0 var(--sp-8); }
.u-warn { color: var(--warning); }
.u-inline { display: inline-block; vertical-align: middle; }
.row-plain { border: 0; padding: 0; min-height: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: var(--icon-size-md); height: var(--icon-size-md);
  flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: var(--icon-cap);
  stroke-linejoin: var(--icon-join);
}
.ico-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.ico-ok { color: var(--success); }
.ico-warn { color: var(--warning); }
.ico-danger { color: var(--danger); }
.ico-info { color: var(--info); }
.ico-brand { color: var(--brand); }
.ico-muted { color: var(--text-3); }
.ico-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
:root[data-palette="B"] .ico.is-active { filter: drop-shadow(var(--skin-icon-glow)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h); padding: 0 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: 600;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: var(--brand-on); border: var(--bw) solid transparent; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-outline { background: var(--skin-card-bg); color: var(--text-1); border: var(--bw) solid var(--border); }
.btn-outline:hover { background: var(--skin-hover); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--brand); border: var(--bw) solid transparent; }
.btn-ghost:hover { background: var(--brand-soft); }
.btn:focus-visible, .hit:focus-visible, .nav-item:focus-visible, .chip:focus-visible,
.tab-slot:focus-visible, .row-sel:focus-visible {
  outline: var(--bw-strong) solid var(--focus-border); outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
/* 高密度后台图标按钮视觉可小，点击热区 44×44 (02 §5.4) */
.hit { display: inline-flex; align-items: center; justify-content: center;
       min-width: var(--STRUCT-touch); min-height: var(--STRUCT-touch);
       background: transparent; border: 0; color: inherit; padding: 0; }

.card {
  background: var(--skin-card-bg);
  border: var(--skin-card-bd);
  box-shadow: var(--skin-card-shadow);
  border-radius: var(--skin-card-r);
  padding: var(--card-pad);
  overflow: hidden;
  position: relative;
}
.card-flex { display: flex; flex-direction: column; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--sp-4); min-height: var(--lh-h3); }
.chart-box { flex: 1; min-height: 0; position: relative; }
.chart-data { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--text-2); font-variant-numeric: tabular-nums; }
.card-t { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); margin: 0; }
.card-sub { font-size: var(--fs-caption); color: var(--text-2); }

/* 标签 / 徽章 */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px; border-radius: var(--r-sm);
  /* 中文标签不小于 12px（B 硬禁用项 6「禁止中文 <12px」） */
  font-size: max(12px, var(--fs-micro)); font-weight: var(--fw-micro); line-height: 1;
  white-space: nowrap;
}
:root[data-palette="C"] .tag { height: 24px; padding: 0 10px; border-radius: 12px; font-size: var(--fs-micro); }
.tag-neutral { background: var(--surface-3); color: var(--text-2); border: var(--bw) solid var(--border); }
:root[data-palette="C"] .tag-neutral { border: 0; background: var(--surface-2); }
.tag-brand { background: var(--brand-soft); color: var(--brand); border: var(--bw) solid var(--border); }
:root[data-palette="C"] .tag-brand { border: 0; }
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-warning { background: var(--warning-soft); color: var(--warning); }
.tag-danger  { background: var(--danger-soft);  color: var(--danger); }
.tag-info    { background: var(--info-soft);    color: var(--info); }
.tag-solid   { background: var(--brand); color: var(--brand-on); border: 0; }
:root[data-palette="B"] .tag-customer { background: var(--accent); color: var(--accent-on); border: 0; }

/* 状态点（形状冗余）+ 图标 + 文案 + 位置 + 颜色 四重冗余 */
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
:root[data-palette="C"] .dot { width: 8px; height: 8px; }
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-danger  { background: var(--danger); }
.dot-info    { background: var(--info); }
.dot-unread  { background: var(--brand); }
:root[data-palette="B"] .dot-unread,
:root[data-palette="B"] .dot-danger { box-shadow: var(--skin-icon-glow); }
.dot-overdue { background: var(--danger); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }
.micro {
  font-family: var(--font-sans);
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-micro);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
:root[data-palette="B"] .micro { letter-spacing: .06em; }
:root[data-palette="C"] .micro { letter-spacing: .06em; }
.cap { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }

/* 长邮件阅读容器：a11y 硬下限 16px 等效 / 行高 >=1.5 / max-width 680 (02 §5.6) */
.prose {
  font-size: max(16px, var(--fs-body));
  line-height: 1.7;
  max-width: var(--STRUCT-read-max);
  color: var(--text-1);
}
.prose p { margin: 0 0 1em; }
.prose blockquote {
  margin: 0 0 1em; padding: 8px 12px;
  border-left: var(--bw-strong) solid var(--border-strong);
  background: var(--surface-2); color: var(--text-2);
}

/* 通用行 / 选中 / hover / 告警 */
.row {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--row-h);
  border-bottom: var(--skin-row-line);
  padding: 0 8px;
}
.row:last-child { border-bottom: 0; }
.row-hover:hover { background: var(--skin-hover); }
.row.is-selected {
  background: var(--skin-selected);
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand);
}
.row.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--warning);
}
.row.is-danger {
  background: var(--danger-soft);
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--danger);
}
.sec-marker { border-left: var(--bw-strong) solid var(--danger); }

/* ===========================================================================
 * §E  /admin 运营仪表盘 —— 9 个区块，顺序 TOP/NAV/HEAD/KPI/TREND-01/
 *     TREND-02/TABLE-01/ALERT-01/AUDIT-01 (03 §1 / 04 §1)
 * ======================================================================== */
.frame-admin { display: flex; flex-direction: column; }

/* ADM-TOP-01 */
.adm-top {
  height: var(--STRUCT-topbar-h); flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--STRUCT-content-pad);
  background: var(--surface-1);
  border-bottom: var(--skin-section-divider);
}
.adm-top .logo { display: flex; align-items: center; gap: 8px; font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.adm-top .logo .ico { color: var(--brand); }
.adm-top .search {
  display: flex; align-items: center; gap: 8px;
  height: var(--input-h); min-width: 280px; padding: 0 10px;
  background: var(--surface-3); color: var(--text-3);
  border: var(--bw) solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-caption);
}
.adm-top .spacer { flex: 1; }
.adm-top .top-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-2); }
.adm-top .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: var(--brand-on);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 700;
}
.adm-top .bell { position: relative; }
.adm-top .bell .badge-n {
  position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px;
  border-radius: 7px; background: var(--danger); color: var(--danger-on);
  font-size: 9px; line-height: 14px; text-align: center; font-weight: 700;
}

.adm-body { display: flex; flex: 1; min-height: 0; }

/* ADM-NAV-01 */
.adm-nav {
  width: var(--STRUCT-admin-sidebar-w); flex: none;
  height: 100%; overflow: hidden;
  background: var(--surface-1);
  border-right: var(--skin-section-divider);
  padding: 8px 0;
}
.nav-group { padding: 0 8px; margin-top: var(--sp-16); }
.nav-group:first-child { margin-top: 0; }
.nav-gt {
  font-size: var(--fs-micro); font-weight: var(--fw-micro); color: var(--text-3);
  letter-spacing: .06em; padding: 0 8px 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav-gt .risk { color: var(--danger); font-size: 9px; letter-spacing: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--nav-item-h); padding: 0 8px;
  border-radius: var(--r-sm); color: var(--text-2);
  font-size: var(--fs-body); cursor: pointer;
  border-left: var(--bw-strong) solid transparent;
}
.nav-item .ico { color: var(--text-3); }
.nav-item:hover { background: var(--skin-hover); color: var(--text-1); }
.nav-item.is-active {
  background: var(--skin-selected); color: var(--brand); font-weight: 600;
  border-left: var(--skin-select-bar-w) solid var(--brand);
  border-radius: 0 var(--skin-select-bar-r) var(--skin-select-bar-r) 0;
}
.nav-item.is-active .ico { color: var(--brand); }
.nav-item .nav-count { margin-left: auto; font-size: var(--fs-micro); color: var(--text-3); }

.adm-main { width: var(--STRUCT-admin-main-w); flex: none; display: flex; flex-direction: column; min-height: 0; }
/* ADM-HEAD-01 */
.adm-head {
  height: var(--STRUCT-admin-head-h); flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--STRUCT-content-pad);
  border-bottom: var(--skin-section-divider);
}
.adm-head h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); }
.adm-head .spacer { flex: 1; }
.adm-head .last { font-size: var(--fs-caption); color: var(--text-3); }

.adm-content {
  flex: 1; min-height: 0;
  width: var(--STRUCT-admin-main-w);
  padding: var(--STRUCT-section-gap) var(--STRUCT-content-pad) 0;
  display: flex; flex-direction: column; gap: var(--STRUCT-section-gap);
  overflow: hidden;
}

/* ADM-KPI-01 —— 8 卡 4×2，W285×H88，gutter12，顺序 01–08 恒定 (02 §6.1 / 04 ADM-D8) */
.adm-kpi {
  height: var(--STRUCT-admin-kpi-h); flex: none;
  display: grid; grid-template-columns: repeat(4, var(--STRUCT-kpi-card-w));
  grid-template-rows: repeat(2, var(--STRUCT-kpi-card-h));
  gap: var(--STRUCT-kpi-gutter);
}
.kpi-card {
  position: relative; overflow: hidden;
  background: var(--skin-card-bg);
  border: var(--skin-card-bd);
  box-shadow: var(--skin-card-shadow);
  border-radius: var(--skin-card-r);
  padding: 8px 12px;
  display: flex; flex-direction: column; justify-content: center;
}
.kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--skin-kpi-highlight);
}
.kpi-card .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-card .kpi-num {
  font-family: var(--skin-kpi-number-font);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: var(--skin-kpi-number-weight);
  color: var(--text-1); letter-spacing: -.02em;
}
:root[data-palette="B"] .kpi-card .kpi-num { color: var(--brand); }
.kpi-card .kpi-cn { font-size: var(--fs-caption); color: var(--text-2); }
.kpi-card .kpi-delta { font-size: var(--fs-micro); display: inline-flex; align-items: center; gap: 2px; }
.kpi-card .kpi-delta.up { color: var(--success); }
.kpi-card .kpi-delta.down { color: var(--danger); }
.kpi-card .kpi-mini { font-size: var(--fs-micro); color: var(--text-3); }

.adm-row {
  display: grid; grid-template-columns: var(--STRUCT-col8-w) var(--STRUCT-col4-w);
  gap: var(--STRUCT-grid-gutter);
}
.adm-row-trend { height: var(--STRUCT-trend-h); flex: none; }
.adm-row-lower { height: var(--STRUCT-lower-h); flex: none; }
.adm-right {
  display: grid; grid-template-rows: var(--STRUCT-lower-alert-h) var(--STRUCT-lower-audit-h);
  gap: var(--STRUCT-grid-gutter); min-height: 0;
}
.adm-row > .card, .adm-right > .card { min-height: 0; }
/* 05 §6-11：L2 密度须在 L1 容器几何内消化，超出部分用区块内部滚动处理，
   不改区块高度、不新增区块。滚动归属符合 02 §0.4「只有表格体/列表内部滚动」。 */
.adm-right > .card { overflow-y: auto; scrollbar-width: thin; }

/* 图表通用 */
.chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-sample { width: 18px; height: 0; border-top: var(--bw-strong) solid var(--chart-1); }
.legend-sample.b { border-top-color: var(--chart-2); }
.legend-sample.c { border-top-color: var(--chart-3); }
.legend-sample.dash { border-top-style: dashed; }
.legend-sample.dotted { border-top-style: dotted; }
.legend-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-1); }
.legend-mark.sq { border-radius: 0; background: var(--chart-2); }
.legend-mark.tri { border-radius: 0; background: var(--chart-3); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-svg .grid-line { stroke: var(--border); stroke-width: 1; }
.chart-svg .axis-txt { fill: var(--text-3); font-size: 11px; font-family: var(--font-mono); }
.chart-svg .ln-recv { stroke: var(--chart-1); stroke-width: 2; fill: none; }
.chart-svg .ln-send { stroke: var(--chart-2); stroke-width: 2; fill: none; stroke-dasharray: 6 4; }
.chart-svg .ln-3 { stroke: var(--chart-3); stroke-width: 2; fill: none; stroke-dasharray: 2 3; }
.chart-svg .area-stop-top { stop-color: var(--chart-1); stop-opacity: var(--skin-area-top); }
.chart-svg .area-stop-bottom { stop-color: var(--chart-1); stop-opacity: var(--skin-area-bottom); }
.chart-svg .mk-recv { fill: var(--chart-1); }
.chart-svg .mk-send { fill: var(--chart-2); }
.chart-svg .mk-3 { fill: var(--chart-3); }
.svg-bar-track { fill: var(--border); }
.svg-bar-fill { fill: var(--brand); }
.svg-bar-rx { rx: var(--skin-bar-rx); }

/* 表格（仅横向行线、无竖线、无斑马纹；数值列右对齐） */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tbl th {
  text-align: left; height: var(--row-h); padding: 0 8px;
  font-size: var(--fs-caption); font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border-bottom: var(--skin-row-line);
  white-space: nowrap;
}
.tbl td {
  height: var(--row-h); padding: 0 8px;
  border-bottom: var(--skin-row-line); color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover { background: var(--skin-hover); }
.tbl tbody tr.is-selected { background: var(--skin-selected); box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand); }
.tbl tbody tr.is-warning { background: var(--warning-soft); color: var(--warning); }
.tbl-scroll { overflow: hidden; }
.tbl-scroll-inner { max-height: 100%; overflow: hidden; }
.st-name { display: inline-flex; align-items: center; gap: 6px; }

/* ADM-TABLE-01 内部两栏：左 = 域名健康 DNS 检测态，右 = 队列/死信 + 租户配额示例数据
   (04 ADM-D3 字段拆并 / ADM-D4 租户配额不单独成块，归入既有区块) */
.tbl-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--STRUCT-kpi-gutter); flex: 1; min-height: 0; }
.tbl-half { min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.sub-t { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-4);
  font-size: var(--fs-micro); font-weight: 600; color: var(--text-2); letter-spacing: .04em; }
.dns-line {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-4) 4px; border-bottom: var(--skin-row-line);
  font-size: var(--fs-caption); min-height: 0;
}
.dns-line:last-child { border-bottom: 0; }
.dns-line .k { width: 40px; flex: none; font-family: var(--font-mono); color: var(--text-2); font-weight: 600; }
.dns-line .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-line .ico { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.dns-line.is-warning {
  background: var(--warning-soft); color: var(--warning);
  box-shadow: inset var(--bw-strong) 0 0 var(--warning);
}
.stat-line { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: var(--sp-4) 4px; border-bottom: var(--skin-row-line); font-size: var(--fs-caption); }
.stat-line .sv { font-variant-numeric: tabular-nums; font-weight: 600; }
.mini-row {
  display: grid; grid-template-columns: 1fr 54px 48px; gap: 4px; align-items: center;
  padding: var(--sp-4) 4px; border-bottom: var(--skin-row-line); font-size: var(--fs-micro);
}
.mini-row:last-child { border-bottom: 0; }
.mini-row .mn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-row .mq, .mini-row .ms { text-align: right; font-variant-numeric: tabular-nums; }
.mini-row.is-selected { background: var(--skin-selected);
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand); }

/* 告警 / 审计 */
.alert-box {
  border-left: var(--bw-strong) solid var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-sm); padding: 6px 8px;
}
.alert-box .alert-t { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-caption); color: var(--danger); }
.alert-box .alert-d { font-size: var(--fs-caption); color: var(--text-2); margin-top: 2px; }
.ok-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: max(12px, var(--fs-micro)); line-height: var(--lh-micro); color: var(--success); }
.audit-line {
  display: flex; align-items: center; gap: 8px;
  padding: var(--sp-4) 0; min-height: 0; border-bottom: var(--skin-row-line);
  font-size: var(--fs-caption);
}
.audit-line:last-child { border-bottom: 0; }
.audit-line .ts { font-family: var(--font-mono); color: var(--text-3); flex: none; }
.audit-line .who { color: var(--text-2); flex: none; }
.audit-line .what { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===========================================================================
 * §F  /sales 工作台 —— 14 区块；顶层 3 栏 + 栏C 内 2 子 pane (03 §2 / 04 §2)
 * ======================================================================== */
.frame-sales { display: flex; flex-direction: column; }
.sl-top {
  height: var(--STRUCT-topbar-h); flex: none;
  display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: var(--surface-1); border-bottom: var(--skin-section-divider);
}
.sl-top .logo { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-h3); font-size: var(--fs-h3); }
.sl-top .logo .ico { color: var(--brand); }
.sl-top .search { display: flex; align-items: center; gap: 8px; height: var(--input-h); min-width: 300px;
  padding: 0 10px; background: var(--surface-3); color: var(--text-3);
  border: var(--bw) solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-caption); }
.sl-top .spacer { flex: 1; }
.sl-top .top-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-2); }
.sl-top .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand);
  color: var(--brand-on); display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 700; }

.sl-body { display: flex; flex: 1; min-height: 0; height: var(--STRUCT-sales-body-h); }
.col-a { width: var(--STRUCT-sales-a-w); flex: none; display: flex; flex-direction: column;
  border-right: var(--STRUCT-divider) solid var(--border); background: var(--surface-1); min-height: 0; }
.col-b { width: var(--STRUCT-sales-b-w); flex: none; display: flex; flex-direction: column;
  border-right: var(--STRUCT-divider) solid var(--border); background: var(--surface-1); min-height: 0; }
.col-c { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-app); }

.blk { overflow: hidden; padding: 8px 10px; }
.blk-t { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: var(--fs-micro); font-weight: var(--fw-micro); color: var(--text-3);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.a-tree { height: var(--STRUCT-sales-a-tree-h); flex: none; overflow: hidden; }
.a-filter { height: var(--STRUCT-sales-a-filter-h); flex: none; overflow: hidden; }
.a-todo { height: var(--STRUCT-sales-a-todo-h); flex: none; overflow: hidden; }
.a-foot { height: var(--STRUCT-sales-a-foot-h); flex: none; overflow: hidden; }
.tree-item { display: flex; align-items: center; gap: 8px; min-height: var(--nav-item-h);
  padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-body); color: var(--text-2); cursor: pointer; }
.tree-item:hover { background: var(--skin-hover); color: var(--text-1); }
.tree-item.is-active { background: var(--skin-selected); color: var(--brand); font-weight: 600;
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand); }
.tree-item .cnt { margin-left: auto; font-size: var(--fs-micro); color: var(--text-3); }
.tree-sub { padding-left: 16px; font-size: var(--fs-caption); color: var(--text-3); }
.filter-item { display: flex; align-items: center; gap: 8px; min-height: var(--nav-item-h);
  padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-body); color: var(--text-2); cursor: pointer; }
.filter-item .cnt { margin-left: auto; font-size: var(--fs-micro); }
.filter-item:hover { background: var(--skin-hover); }
.filter-item.is-active { background: var(--skin-selected); color: var(--brand); font-weight: 600;
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand); }
.todo-card { padding: 8px; border-radius: var(--r-sm); background: var(--danger-soft);
  border-left: var(--bw-strong) solid var(--danger); margin-bottom: 6px; }
.todo-card .t1 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: 600; color: var(--danger); }
.todo-card .t2 { font-size: var(--fs-caption); color: var(--text-2); }
.link-item { display: flex; align-items: center; gap: 8px; min-height: var(--nav-item-h);
  font-size: var(--fs-body); color: var(--text-2); }

.b-head { height: var(--STRUCT-sales-b-head-h); flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border-bottom: var(--skin-section-divider); }
.b-head .t { font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.b-head .spacer { flex: 1; }
.b-list { height: var(--STRUCT-sales-b-list-h); flex: none; overflow: hidden; }
.b-page { height: var(--STRUCT-sales-b-page-h); flex: none; display: flex; align-items: center;
  justify-content: center; gap: 8px; font-size: var(--fs-caption); color: var(--text-3);
  border-top: var(--skin-section-divider); }
.thread {
  position: relative; display: flex; gap: 8px;
  height: var(--STRUCT-sales-item-h); padding: var(--sp-4) 10px;
  border-bottom: var(--skin-row-line); cursor: pointer; overflow: hidden;
}
/* 条目槽 H72 恒定；行内容用紧凑行高在槽内消化（05 §6-11） */
.thread .th-r1, .thread .th-from, .thread .th-time { line-height: var(--lh-caption); }
.thread .th-sub, .thread .th-snip { line-height: var(--lh-micro); }
.thread .th-flags { margin-top: 0; line-height: 1; }
.thread .th-flags .tag { height: 18px; padding: 0 5px; font-size: 12px; }
:root[data-palette="C"] .thread .th-flags .tag { height: 18px; padding: 0 5px; border-radius: 9px; }
.thread .th-flags .ico { width: 12px; height: 12px; }
.thread:hover { background: var(--skin-hover); }
.thread.is-selected { background: var(--skin-selected); box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand); }
.thread .th-av { width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.thread .th-main { flex: 1; min-width: 0; }
.thread .th-r1 { display: flex; align-items: center; gap: 6px; }
.thread .th-from { font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .th-time { margin-left: auto; flex: none; font-size: var(--fs-micro); color: var(--text-3); font-family: var(--font-mono); }
.thread .th-sub { font-size: var(--fs-caption); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .th-snip { font-size: var(--fs-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .th-flags { display: flex; gap: 4px; margin-top: 3px; }

.c-ctx { height: var(--STRUCT-sales-ctx-h); flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: var(--surface-1); border-bottom: var(--skin-section-divider); }
.c-ctx .ctx-subject { font-size: var(--fs-h3); font-weight: var(--fw-h3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.c-ctx .spacer { flex: 1; }
.c-lower { flex: 1; display: flex; min-height: 0; }
.c-read { width: var(--STRUCT-sales-read-w); flex: none; display: flex; flex-direction: column;
  border-right: var(--STRUCT-divider) solid var(--border); background: var(--skin-card-bg); min-height: 0; }
.c-rail { width: var(--STRUCT-sales-rail-w); flex: none; display: flex; flex-direction: column;
  background: var(--bg-app); min-height: 0; }

/* SL-C-02 主阅读正文 */
.read-body { height: var(--STRUCT-sales-read-body-h); flex: none; overflow: hidden;
  padding: var(--card-pad); background: var(--skin-card-bg); }
:root[data-palette="B"] .read-body { background: var(--surface-1); }
.mail-hd { border-bottom: var(--skin-section-divider); padding-bottom: 10px; margin-bottom: 12px; }
.mail-hd .subject { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); margin: 0 0 6px; }
.mail-hd .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-2); }
.mail-hd .meta .from { font-weight: 600; color: var(--text-1); }
.mail-hd .meta .spacer { flex: 1; }
.attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 6px 10px; border: var(--skin-card-bd); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: var(--fs-caption); }
.hist-fold { display: flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 6px 0; border-top: var(--skin-row-line); font-size: var(--fs-caption); color: var(--text-3); }
/* 写信区（覆盖式全局层的字段，作为 S3 内容静态呈现） */
.compose-vars { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.compose-vars .tag { font-family: var(--font-mono); }
.read-foot { height: var(--STRUCT-sales-read-foot-h); flex: none; display: flex; align-items: center;
  gap: 8px; padding: 0 12px; border-top: var(--skin-section-divider); background: var(--surface-1); }
.read-foot .qr { flex: 1; height: var(--input-h); display: flex; align-items: center; gap: 6px;
  padding: 0 10px; border: var(--bw) solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-3); font-size: var(--fs-caption); color: var(--text-3); }

/* SL-C-04 客户卡片 / SL-C-05 时间线 / SL-C-06 底部操作 */
.cust-card { height: var(--STRUCT-sales-card-h); flex: none; padding: var(--card-pad);
  background: var(--skin-card-bg); border: var(--skin-card-bd);
  box-shadow: var(--skin-card-shadow); border-radius: var(--skin-card-r);
  margin: 0 8px; overflow: hidden; }   /* S-1：去掉 8px 上边距，三子项合计 168+440+56=664 = .c-lower 可用高 */
:root[data-palette="A"] .cust-card { background: var(--surface-2); }
/* B 双光源：客户卡左竖条用紫（--accent），邮件流用青（--brand） */
:root[data-palette="B"] .cust-card { border-left: var(--bw-strong) solid var(--accent); }
.cust-hd { display: flex; align-items: center; gap: 8px; }
.cust-av { width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  background: var(--brand-soft); color: var(--brand); font-size: var(--fs-caption); }
.cust-name { font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.cust-line { display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: var(--fs-caption); color: var(--text-2); }
.cust-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tl-wrap { height: var(--STRUCT-sales-timeline-h); flex: none; position: relative; overflow: hidden;
  margin: 0 8px; padding: 4px 0 4px 0; }   /* S-1：同上，客户子栏下沿 SL-C-06 不再被 .frame 裁切 */
.tl-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 100%; }
.tl-rail line { stroke: var(--border); stroke-width: 1; }
.tl-node { position: absolute; left: 0; top: 8px; width: 16px; height: 16px; }
.tl-node circle { r: 4px; stroke: var(--surface-1); stroke-width: 2; }
:root[data-palette="C"] .tl-node circle { r: 5px; }
.tl-node-done { fill: var(--success); }
.tl-node-pending { fill: var(--skin-flow-mail); }
.tl-node-create { fill: var(--skin-flow-customer); }
.tl-row { display: flex; gap: 10px; min-height: var(--row-h); align-items: flex-start;
  padding: 4px 0 4px 22px; position: relative; }
.tl-row .tl-time { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); flex: none; width: 62px; }
.tl-row .tl-txt { font-size: var(--fs-caption); color: var(--text-1); }
.tl-row .tl-kind { font-size: var(--fs-micro); color: var(--text-2); }
:root[data-palette="B"] .tl-row.is-create .tl-txt { color: var(--accent); }
.cust-foot { height: var(--STRUCT-sales-rail-foot-h); flex: none; display: flex; align-items: center;
  gap: 6px; padding: 0 8px; }

/* ===========================================================================
 * §G  /me 收件箱 —— 6 区块；390×844 (03 §3 / 04 §3)
 * ======================================================================== */
.frame-me { position: relative; display: flex; flex-direction: column; }
.me-top {
  height: var(--STRUCT-me-top-h); flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; background: var(--surface-1); border-bottom: var(--skin-section-divider);
}
.me-top .acct { display: flex; flex-direction: column; min-width: 0; }
.me-top .acct .a1 { font-size: var(--fs-caption); font-weight: 600; display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-top .acct .a2 { font-size: var(--fs-micro); color: var(--text-3); }
.me-top .spacer { flex: 1; }
.me-top .me-search {
  display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1;
  height: var(--input-h); padding: 0 8px; border: var(--bw) solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-3);
  font-size: var(--fs-micro); overflow: hidden; white-space: nowrap;
}
.me-top .me-search .ico { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.me-top .me-search span { overflow: hidden; text-overflow: ellipsis; }
.me-top .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand);
  color: var(--brand-on); display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 700; flex: none; }

/* ME-QUOTA-01 H32 常驻条 (04 ME-D1：几何以 ux 为准，内部视觉以 visual 为准) */
.me-quota {
  height: var(--STRUCT-me-quota-h); flex: none;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 0 12px; overflow: hidden;
  background: var(--skin-card-bg); border-bottom: var(--skin-section-divider);
  font-size: max(12px, var(--fs-micro)); color: var(--text-2);
}
.q-line { display: flex; align-items: center; gap: 6px; line-height: 1.15; white-space: nowrap; }
.q-line > * { white-space: nowrap; }
.me-quota .q-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-1); }
.me-quota .q-rel { color: var(--brand); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.me-quota .q-act { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.me-quota .q-act .ico { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.q-track svg { width: 100%; height: var(--skin-bar-h); }
.q-bar-freeze svg { width: 100%; height: var(--skin-bar-h); }

.me-chip {
  height: var(--STRUCT-me-chip-h); flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; overflow-x: auto; overflow-y: hidden; background: var(--bg-app);
  border-bottom: var(--skin-section-divider); scrollbar-width: none;
}
.me-chip::-webkit-scrollbar { display: none; }
.me-chip .chip-cap {
  font-family: var(--font-display);        /* C 下为 --font-display 衬线；A/B 为无衬线 (02 §2C 字阶) */
  font-size: var(--fs-h3); font-weight: var(--fw-h2); color: var(--text-1);
  margin-right: 4px; flex: none;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-sm);
  border: var(--skin-chip-bd); background: var(--surface-1); color: var(--text-2);
  font-size: var(--fs-caption); white-space: nowrap;
}
.chip .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.chip:hover { background: var(--skin-hover); }
.chip.is-active {
  background: var(--skin-selected); color: var(--brand); font-weight: 600;
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
:root[data-palette="C"] .chip { border-radius: 12px; }
:root[data-palette="C"] .chip.is-active { border-radius: 12px; }
.chip.is-label { border-style: dashed; }

.me-list { height: var(--STRUCT-me-list-h); flex: none; overflow: hidden; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 6px; background: var(--bg-app); }
.mail-item {
  position: relative; flex: none; height: var(--STRUCT-me-item-h);
  display: flex; gap: 10px; align-items: center; padding: 0 12px;
  background: var(--skin-card-bg); border: var(--skin-list-card-bd);
  box-shadow: var(--skin-list-card-shadow); border-radius: var(--skin-card-r);
  overflow: hidden; cursor: pointer;
}
.mail-item:hover { background: var(--skin-hover); }
.mail-item.is-selected { background: var(--skin-selected);
  box-shadow: inset var(--skin-select-bar-w) 0 0 var(--brand); }
.mail-av { width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 700; color: var(--brand-on); background: var(--brand); }
.mail-av.v2 { background: var(--accent); color: var(--accent-on); }
.mail-av.v3 { background: var(--highlight); color: var(--text-1); }
.mail-main { flex: 1; min-width: 0; }
/* 条目槽 H76 恒定（STRUCT）；四行内容用紧凑行高在槽内消化，不撑破容器 */
.mail-r1, .mail-from, .mail-time { line-height: var(--lh-caption); }
.mail-sub, .mail-snip { line-height: var(--lh-micro); }
.mail-flags { display: flex; align-items: center; gap: 4px; margin-top: 0; line-height: 1; }
.mail-flags .ico { width: 12px; height: 12px; }
.mail-flags .cap { font-size: 12px; line-height: 1; }
.flag-tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 18px; padding: 0 5px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap;
}
:root[data-palette="C"] .flag-tag { border-radius: 9px; }
.flag-brand { background: var(--brand-soft); color: var(--brand); }
.flag-neutral { background: var(--surface-3); color: var(--text-2); }
.flag-warn { background: var(--warning-soft); color: var(--warning); }
.flag-tag .ico { width: 12px; height: 12px; }
.mail-r1 { display: flex; align-items: center; gap: 6px; }
.mail-from { font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-time { margin-left: auto; font-size: var(--fs-micro); color: var(--text-3); font-family: var(--font-mono); flex: none; }
.mail-sub { font-size: var(--fs-caption); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snip { font-size: var(--fs-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-flags { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.mail-unread { font-weight: 700; }
.mail-star { color: var(--highlight); }

.me-tab {
  height: var(--STRUCT-me-tab-h); flex: none; position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface-1); border-top: var(--skin-section-divider);
  padding-bottom: var(--STRUCT-me-safe);
}
.tab-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: var(--STRUCT-touch); min-height: var(--STRUCT-touch);
  background: transparent; border: 0; color: var(--text-3);
  font-size: var(--fs-micro); padding: 0;
}
.tab-slot .ico { width: var(--icon-size-md); height: var(--icon-size-md); }
.tab-slot[aria-current="page"], .tab-slot.is-active { color: var(--brand); font-weight: 700;
  border-top: var(--skin-tab-indicator); }
:root[data-palette="C"] .tab-slot[aria-current="page"],
:root[data-palette="C"] .tab-slot.is-active { border-top: 0; }
:root[data-palette="C"] .tab-slot[aria-current="page"] .ico,
:root[data-palette="C"] .tab-slot.is-active .ico { background: var(--brand-soft); border-radius: 10px; }
.tab-compose { position: relative; }
.tab-compose .compose-btn {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: var(--STRUCT-me-compose); height: var(--STRUCT-me-compose); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--brand-on); border: 0;
  box-shadow: var(--skin-list-card-shadow);   /* A = none（零阴影硬禁用项） */
}
.tab-compose .lbl { margin-top: 26px; }

/* ===========================================================================
 * §H  ME-READ-02 阅读层：同一容器实例；B 以 data-surface="read" 局部覆写
 *     X-01 裁决 (a)：作为九个基准画面之外的补充画面，不改九个画面的区块顺序 / 几何。
 *     仅在 :root[data-role="me"][data-view-state="detail"] 时可见。
 *     亮阅读窗只占内容区，上/下深色 chrome 保持可见 → 「暗外壳 + 亮阅读窗」。
 * ======================================================================== */
.me-read {
  display: none;
  position: absolute;
  top: var(--STRUCT-me-top-h); bottom: var(--STRUCT-me-tab-h); left: 0; right: 0;
  z-index: 5; flex-direction: column;
  background: var(--surface-1); color: var(--text-1);
  border-top: var(--bw) solid var(--border);
  border-bottom: var(--bw) solid var(--border);
}
:root[data-role="me"][data-view-state="detail"] .me-read { display: flex; }
/* data-surface="read" 作用域：只用 tokens.css 的 --read-* 三值，不引入新色值；
   窗内一律用中性墨色，绝不在浅底上使用 B 的提亮语义色（B 硬禁用项 5）。 */
.me-read[data-surface="read"] {
  background: var(--read-bg);
  color: var(--read-text);
  border-color: var(--read-border);
  /* 浅色阅读窗内把次级文字 / 次级表面 / 边框一并切到纸面层，
     否则 B 的提亮 --text-2 (#9FB0C0) 落在浅底上不达 AA，且违反 B 硬禁用项 5。
     全部复用 tokens.css 的 --read-* 三值，不新增任何色值。 */
  --text-1: var(--read-text);
  --text-2: var(--read-text);
  --text-3: var(--read-text);
  --surface-2: var(--read-bg);
  --border: var(--read-border);
  --border-strong: var(--read-border);
}
.me-read[data-surface="read"] * { color: inherit; }
.me-read[data-surface="read"] .read-top,
.me-read[data-surface="read"] .read-bottom { background: transparent; border-color: var(--read-border); }
.me-read[data-surface="read"] .read-btn {
  background: transparent; color: var(--read-text); border: var(--bw) solid var(--read-border);
}
.me-read[data-surface="read"] .read-quote { background: transparent; border-left: var(--bw-strong) solid var(--read-border); }
.me-read[data-surface="read"] .read-attach { background: transparent; border: var(--bw) solid var(--read-border); }
.read-top { height: var(--STRUCT-me-top-h); flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-bottom: var(--bw) solid var(--border); }
.read-top .rt-t { font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.read-top .spacer { flex: 1; }
.read-scroll { flex: 1; min-height: 0; overflow: hidden; padding: var(--card-pad); }
.read-scroll .subject { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); margin: 0 0 10px; }
.read-scroll .meta { font-size: var(--fs-caption); color: var(--text-2); display: flex; gap: 8px; flex-wrap: wrap; }
.read-quote { margin: 12px 0; padding: 8px 12px; background: var(--surface-2);
  border-left: var(--bw-strong) solid var(--border-strong); font-size: var(--fs-caption); }
.read-attach { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
  font-size: var(--fs-caption); }
.read-bottom { height: var(--STRUCT-sales-rail-foot-h); flex: none; display: flex; align-items: center;
  gap: 8px; padding: 0 12px; border-top: var(--bw) solid var(--border); }
.read-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--STRUCT-touch); padding: 0 14px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-1); border: var(--bw) solid var(--border);
  font-size: var(--fs-body); }

/* 02 §0.3(3)：A/C 下 ME-READ-02 继承全局 surface，不做局部浅色翻转。
   data-surface="read" 在三套 DOM 中静态存在（保证「切换 data-palette 后 DOM 零改动」），
   其纸面层效果只在 B 下生效；A/C 用 CSS-wide 关键字 inherit 把变量退回父级，
   不新增任何色值、不新增任何 DOM 分支。 */
:root:not([data-palette="B"]) .me-read[data-surface="read"] {
  --surface-1: inherit; --surface-2: inherit;
  --text-1: inherit; --text-2: inherit; --text-3: inherit;
  --border: inherit; --border-strong: inherit;
  background: var(--surface-1); color: var(--text-1); border-color: var(--border);
}
:root:not([data-palette="B"]) .me-read[data-surface="read"] .read-top,
:root:not([data-palette="B"]) .me-read[data-surface="read"] .read-bottom {
  background: transparent; border-color: var(--border);
}
:root:not([data-palette="B"]) .me-read[data-surface="read"] .read-btn,
:root:not([data-palette="B"]) .me-read[data-surface="read"] .read-quote,
:root:not([data-palette="B"]) .me-read[data-surface="read"] .read-attach {
  background: var(--surface-2); color: var(--text-1);
  border-color: var(--border); border-left-color: var(--border);
}

/* ===========================================================================
 * §I  预览注解（不属于九个基准画面；用于呈现 D-M5 / D-M6 等二级页数据）
 * ======================================================================== */
.pv-annot { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed #b9c3cf;
  border-radius: 6px; background: #f6f8fa; font-size: 12px; color: #5b6875; max-width: 980px; }
.pv-annot b { color: #2b3644; }
.pv-annot code { font-family: ui-monospace, monospace; background: #e5eaf0; padding: 0 4px; border-radius: 3px; }

/* ===========================================================================
 * §J  状态与可访问性
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}