/*
 * joryea-web 样式表 —— 设计令牌 + 语义类名（ADR 0043 决策 3 第 1 步）
 *
 * # 这份文件是什么
 *
 * Rust 前端迁移的**样式单一事实源**。已迁的前端此前**完全无样式**
 * （全 crate 对 `text/css` / `.css` / `stylesheet` 0 命中），本文件把
 * 「设计令牌」与「语义类名的外观」落到 Rust 侧。
 * （已迁行数不在这儿抄一份 —— 那个数字归 `scripts/ci/migration-progress.sh`。）
 *
 * # 与 TS 侧的关系：**镜像，不是第二事实源**
 *
 * 令牌原件在 `packages/ui/src/styles/tokens.css`（Tailwind v4 的 `@theme`）。
 * 本文件把那些 `--color-*` / `--spacing-*` / `--text-*` / `--radius-*` /
 * `--duration-*` / `--ease-*` / `--font-*` 变量**原值照搬**为标准 CSS
 * 自定义属性（Tailwind v4 的 `@theme` 本来就是把它们发到 `:root` 上，
 * 所以这里不是「翻译」，是「同值换载体」）。
 *
 * 语义别名（`--jy-*`，含暗色翻转）**逐条照搬** TS 侧 `:root` / `.dark` 两段。
 * 差异只有一处：TS 侧把语义别名映射成 Tailwind 工具类（`@theme inline`），
 * Rust 侧没有 Tailwind，故那层映射不迁 —— 工具类的等价物在本文末的
 * 「工具类兼容层」里按语义类名给出。
 *
 * **取值不许在本文件里另造**：色值、间距、时长一律引令牌。
 *
 * # 语义类名的组织方案（**自洽方案，非待定**）
 *
 * 已迁页面用的是**语义类名**（`mall-home` / `panel-section` / `scope-notice` …），
 * 不是 Tailwind 工具类。所以本文件的类名按**「族」**组织，每族一套外观：
 *
 * | 族 | 约定 | 例子 |
 * | --- | --- | --- |
 * | 外壳 | `-page` / `-panel` / `-section` / `-shell` 收口布局 | `.orders-page` `.panel-section` |
 * | 卡片 | `-card` / `-card-head` / `-card-foot` 成组 | `.listing-card` `.card-head` |
 * | 行 | `-row` / `-list` 成组，行内元素靠 `-actions` / `-meta` 分区 | `.order-row` `.row-actions` |
 * | 键值 | `-entry` / `-list` / `-label` / `-value` 成对 | `.detail-entry` `.stat-label` |
 * | 徽标 | `.badge` + `.badge-<语义>`（语义色来自 `badge.rs` 的 BadgeVariant） | `.badge-pending` |
 * | 状态 | `.notice` / `.err` / `.ok` / `.empty` / `.pending` | `.scope-notice` |
 * | 动作 | `.btn` + `.btn-ghost` / `.btn-danger`；动作组 `-actions` | `.btn-ghost` |
 * | 排版 | `.hint` / `.muted` / `.caption` / `.overline` / `.mono` | `.hint` |
 *
 * **一条硬规矩**：类名**不按页面命名**（`mall-home` 这类页面根类除外），
 * 而是按**它在页面里的角色**命名。同一个角色在四个端给同一个类名，
 * 这样「一处改样式，四端同步」。
 *
 * # 暗色
 *
 * 暗色用 `.dark` 类（与 TS 侧一致：`html.dark`），语义别名在 `.dark` 里翻转。
 * Rust 侧目前不发 `dark` 类（主题切换属未迁域），但**令牌层已经备好**，
 * 切换一开就生效，不用改样式。
 *
 * # 断点
 *
 * 只用一条断点 `48rem`（与 TS 侧 Tailwind 的 `md` 同值），不引第二套。
 * 窄屏下数据表折成标签卡（`data-label` 由表头提供）。
 */

/* ══════════════════════════════════════════════════════════════════════════
 * 1. 令牌层（spacing / typography / color / motion / texture 五族）
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ---------- spacing：4pt 基数阶梯 + 语义别名 ---------- */
  --spacing: 0.25rem;
  --spacing-3xs: 0.25rem;
  --spacing-2xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* 容器：窄档（错误页/认证卡）到表单档到页面容器两档 */
  --container-narrow: 28rem;
  --container-form: 42rem;
  --container-content: 72rem;
  --container-wide: 88rem;

  /* ---------- 圆角 ---------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.75rem;
  --radius-pill: 980px;

  /* ---------- typography：字阶 Display 到 Overline ---------- */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Noto Sans Arabic", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Noto Sans Mono",
    monospace;

  --text-display-xl: clamp(2.75rem, 1.4rem + 4.4vw, 5rem);
  --text-display-xl--line-height: 1.3;
  --text-display-xl--letter-spacing: 0;
  --text-display-xl--font-weight: 600;

  --text-display: clamp(2.5rem, 1.6rem + 3.2vw, 3.5rem);
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: -0.02em;
  --text-display--font-weight: 700;

  --text-h1: 2.25rem;
  --text-h1--line-height: 1.15;
  --text-h1--letter-spacing: -0.01em;
  --text-h1--font-weight: 700;

  --text-h2: 1.75rem;
  --text-h2--line-height: 1.25;
  --text-h2--font-weight: 600;

  --text-h3: 1.25rem;
  --text-h3--line-height: 1.4;
  --text-h3--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.75;
  --text-body--font-weight: 400;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 400;

  --text-micro: 0.75rem;
  --text-micro--line-height: 1.2;
  --text-micro--letter-spacing: 0;
  --text-micro--font-weight: 600;

  --text-overline: 0.75rem;
  --text-overline--line-height: 1.2;
  --text-overline--letter-spacing: 0.08em;
  --text-overline--font-weight: 600;

  /* ---------- color：品牌色 13 级 + 中性色 14 级 ---------- */
  --color-brand-25: #f5f8ff;
  --color-brand-50: #eff4ff;
  --color-brand-100: #d5e3ff;
  --color-brand-200: #b4cdff;
  --color-brand-300: #8fb4ff;
  --color-brand-400: #6b9aff;
  --color-brand-500: #4a7dfb;
  --color-brand-600: #2e62e6;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;

  /* 强调色三档：按承载方式分档，各自达标 */
  --color-brand-accent: #0071e3;
  --color-brand-accent-strong: #0066cc;
  --color-brand-accent-on-ink: #2997ff;

  --color-neutral-0: #ffffff;
  --color-neutral-25: #fcfcfd;
  --color-neutral-50: #fafafc;
  --color-neutral-75: #f5f5f7;
  --color-neutral-100: #f4f4f6;
  --color-neutral-200: #e6e6eb;
  --color-neutral-300: #d4d4d8;
  --color-neutral-400: #a1a1a6;
  --color-neutral-500: #6f6f74;
  --color-neutral-600: #525257;
  --color-neutral-700: #3f3f42;
  --color-neutral-800: #28282a;
  --color-neutral-900: #18181a;
  --color-neutral-950: #111113;

  /* ---------- motion：时长 4 档 + 缓动 4 曲线 ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-expressive: 600ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-expressive: cubic-bezier(0.34, 1.3, 0.64, 1);

  --delay-stagger: 60ms;
  --scale-press: 0.98;

  /* ---------- texture ---------- */
  --texture-paper: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    color-mix(in srgb, var(--color-neutral-900) 2%, transparent) 3px 4px
  );
  --texture-fabric:
    repeating-linear-gradient(
      45deg,
      transparent 0 4px,
      color-mix(in srgb, var(--color-neutral-900) 2%, transparent) 4px 5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 4px,
      color-mix(in srgb, var(--color-neutral-900) 1%, transparent) 4px 5px
    );
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture-relief: linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 40%);

  /* ---------- 语义色：亮色 ---------- */
  --jy-bg: var(--color-neutral-75);
  --jy-surface: var(--color-neutral-0);
  --jy-surface-raised: var(--color-neutral-0);
  --jy-popover: var(--color-neutral-0);

  --jy-fg: var(--color-neutral-900);
  --jy-fg-muted: var(--color-neutral-600);
  --jy-fg-subtle: var(--color-neutral-500);

  --jy-border: var(--color-neutral-200);
  --jy-border-subtle: var(--color-neutral-100);
  --jy-border-strong: var(--color-neutral-300);
  --jy-input-border: var(--color-neutral-500);
  --jy-border-hover: var(--color-neutral-600);

  --jy-primary: var(--color-brand-accent);
  --jy-primary-hover: var(--color-brand-accent-strong);
  --jy-primary-fg: var(--color-neutral-0);
  --jy-primary-text: var(--color-brand-accent-strong);
  --jy-primary-on-ink: var(--color-brand-accent-on-ink);
  --jy-primary-soft: var(--color-brand-50);
  --jy-primary-soft-fg: var(--color-brand-800);
  --jy-focus: var(--color-brand-500);
  --jy-focus-soft: var(--color-brand-200);

  --jy-surface-ink: #000000;
  --jy-surface-ink-raised: #272729;
  --jy-fg-on-ink: #ffffff;
  --jy-fg-muted-on-ink: #a1a1a6;
  --jy-border-on-ink: rgb(255 255 255 / 0.14);

  --jy-overlay: rgb(24 24 26 / 0.5);

  --jy-skeleton-base: var(--color-neutral-100);
  --jy-skeleton-highlight: rgb(255 255 255 / 0.65);
  --jy-skeleton-gradient: linear-gradient(
    90deg,
    var(--jy-skeleton-base) 32%,
    var(--jy-skeleton-highlight) 50%,
    var(--jy-skeleton-base) 68%
  );

  --jy-danger-fg: #ffffff;
  --jy-warning-fg: #ffffff;

  --jy-success: #067647;
  --jy-success-bg: #ecfdf3;
  --jy-warning: #b54708;
  --jy-warning-bg: #fffaeb;
  --jy-danger: #b42318;
  --jy-danger-bg: #fef3f2;
  --jy-danger-solid: #b42318;
  --jy-danger-solid-fg: #ffffff;
  --jy-info: #175cd3;
  --jy-info-bg: #eff8ff;

  --jy-shadow-xs: 0 1px 2px rgb(24 24 26 / 0.06);
  --jy-shadow-card: 0 1px 3px rgb(24 24 26 / 0.08), 0 1px 2px rgb(24 24 26 / 0.04);
  --jy-shadow-pop: 0 12px 32px rgb(24 24 26 / 0.16);
  --jy-focus-ring: 0 0 0 3px var(--jy-focus-soft);
}

/* ---------- 语义色：暗色（同一套别名，翻转取值） ---------- */
/* ---------- CJK 排版覆盖（zh / ja / ko） ----------
 *
 *  母本 `packages/ui/src/styles/tokens.css` 有一整段 CJK 覆盖：拉丁字面约占
 *  em 框 0.72，CJK 字面填满 em 框（≈1.0），同一 line-height 下视觉行距
 *  相差近一倍（56px 档拉丁留白约 20px，CJK 仅 4.5px）；负字距压缩的又是
 *  CJK 的字腔本身。按 DESIGN.md「替换字体时行高上调 +0.02~0.06、减弱负字距」
 *  的规则外推到 CJK 字面比例。
 *
 *  **只覆盖大字号档**：h3 1.4 / caption 1.5 / body 1.75 已有足够行距，不动。
 *
 *  母本把覆盖写在 **utilities 层**（`:lang(zh) .text-display { … }`，因为
 *  它那侧是 Tailwind 工具类）；Rust 侧没有工具类，语义类名一律读**令牌**
 *  同一个效果落在**令牌**上（`:lang(zh) { --text-display--line-height: … }`），
 *  一处改、四个端同时生效。
 */
:lang(zh),
:lang(ja),
:lang(ko) {
  --text-display-xl--line-height: 1.3;
  --text-display-xl--letter-spacing: 0;
  --text-display--line-height: 1.32;
  --text-display--letter-spacing: 0;
  --text-h1--line-height: 1.32;
  --text-h1--letter-spacing: 0;
  --text-h2--line-height: 1.35;
  /* overline 档的 0.08em 字距是给拉丁全大写短标签的；CJK 字面已填满 em 框，
     再叠字距会散成「逐字分开」。 */
  --text-overline--letter-spacing: 0;
}

.dark {
  --jy-bg: var(--color-neutral-950);
  --jy-surface: #111927;
  --jy-surface-raised: #161e2e;
  --jy-popover: #161e2e;

  --jy-fg: var(--color-neutral-100);
  --jy-fg-muted: var(--color-neutral-300);
  --jy-fg-subtle: var(--color-neutral-400);

  --jy-border: #232f3e;
  --jy-border-subtle: #1b2433;
  --jy-border-strong: #324158;
  --jy-input-border: var(--color-neutral-400);
  --jy-border-hover: var(--color-neutral-300);

  --jy-primary: var(--color-brand-accent-on-ink);
  --jy-primary-hover: var(--color-brand-300);
  --jy-primary-fg: var(--color-neutral-950);
  --jy-primary-text: var(--color-brand-accent-on-ink);
  --jy-primary-on-ink: var(--color-brand-accent-on-ink);
  --jy-primary-soft: var(--color-brand-950);
  --jy-primary-soft-fg: var(--color-brand-200);
  --jy-focus: var(--color-brand-400);
  --jy-focus-soft: var(--color-brand-800);

  --jy-overlay: rgb(4 8 15 / 0.65);

  --jy-skeleton-base: #1b2433;
  --jy-skeleton-highlight: rgb(255 255 255 / 0.06);

  --jy-danger-fg: var(--color-neutral-950);
  --jy-warning-fg: var(--color-neutral-950);

  --jy-success: #75e0a7;
  --jy-success-bg: #12291c;
  --jy-warning: #fdb022;
  --jy-warning-bg: #2a1d08;
  --jy-danger: #f97066;
  --jy-danger-bg: #2e0e0b;
  --jy-danger-solid: #c0362c;
  --jy-danger-solid-fg: #ffffff;
  --jy-info: #84adff;
  --jy-info-bg: #10203e;

  --jy-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --jy-shadow-card: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
  --jy-shadow-pop: 0 12px 32px rgb(0 0 0 / 0.6);
  --jy-focus-ring: 0 0 0 3px var(--jy-focus-soft);
}

/* ---------- 进场预设（只用令牌组合，不写死时长） ---------- */
@keyframes jy-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes jy-pop-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes jy-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes jy-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes jy-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- 降级：允许动效时才动 ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2. 基础层（元素默认样式）
 *
 * 语义类名只管**角色**；元素本身的默认外观（标题层级、表格、链接、表单控件）
 * 在这里给一次。这样页面即使漏了语义类名，也不是「完全裸奔」。
 * ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Tailwind v4 preflight 的等价物 ----------
 *
 *  母本那侧由 `@import "tailwindcss"` 自带，本文件原先只补了 `box-sizing`，
 *  **漏了 margin/padding 的归零**，UA 默认值漏了进来：
 *  最典型的是 `figure { margin: 1em 40px }` —— 终端代码块整块右移 40px，
 *  且每块再叠 32px 上下边距（逐块累加，浏览器级比对量到的）。
 *
 *  Tailwind v4 的 preflight 是：
 *    `*, ::after, ::before, ::backdrop, ::file-selector-button {
 *       box-sizing: border-box; margin: 0; padding: 0; }`
 *  加上表单控件 `font: inherit`、替换元素 `display: block`。
 *
 *  ⚠ 元素选择器（`p` / `h2` / `figure` …）的特异性高于 `*`，
 *  语义类名更高，所以三层都能覆盖它，顺序仍是「令牌 → 语义类名 → 元素默认」。
 */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 表单控件继承字体（母本 preflight：`font: inherit`）。 */
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* 替换元素按块级排（母本 preflight：`display: block; vertical-align: middle`）。 */
img,
svg,
video,
canvas {
  display: block;
  vertical-align: middle;
}

html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  background-color: var(--jy-bg);
  color: var(--jy-fg);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*  母本 = Tailwind preflight：`h1..h6, p, figure, blockquote, dl, dd, hr` 的
 *  **外边距一律 0**（间距全靠显式工具类给）。
 *  此处原先给标题与段落留了 16px 下边距，与母本差一档，且**逐段累加**
 *  （浏览器级比对抓到的：对照母本逐元素几何时暴露）。 */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--jy-fg);
  line-height: 1.25;
  font-weight: 600;
}
h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); }
h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); }
h3 { font-size: var(--text-h3); line-height: var(--text-h3--line-height); }
h4, h5, h6 { font-size: var(--text-body); }

p { margin: 0; }

a {
  color: var(--jy-primary-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--jy-primary-hover); text-decoration: underline; }

/*  母本 = Tailwind preflight：`ol, ul, menu` 去掉列表样式与内外边距，`li` 无外边距。
 *  此处原先写成「列表带缩进 + 每个 li 有 4px 下边距」，与母本差一档，而且
 *  **逐项累加**（每多一项就多 4px），浏览器级比对抓到的。
 *  用 `:where()` 保持**零特异性**（与 Tailwind preflight 同形），语义类名随时能覆盖。 */
:where(ol, ul, menu) {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(li) {
  margin: 0;
}

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--jy-border);
}

img { max-width: 100%; height: auto; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

pre {
  overflow-x: auto;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background-color: var(--jy-surface-raised);
  border: 1px solid var(--jy-border);
}

blockquote {
  margin: 0;
  padding-inline-start: var(--spacing-sm);
  border-inline-start: 3px solid var(--jy-border-strong);
  color: var(--jy-fg-muted);
}

dl, dd { margin: 0; }
dt { font-weight: 600; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td {
  padding: var(--spacing-2xs) var(--spacing-xs);
  text-align: start;
  border-bottom: 1px solid var(--jy-border-subtle);
  vertical-align: top;
}
th { color: var(--jy-fg-muted); font-weight: 600; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

input, select, textarea {
  width: 100%;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border: 1px solid var(--jy-input-border);
  border-radius: var(--radius-sm);
  background-color: var(--jy-surface);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
input:hover, select:hover, textarea:hover { border-color: var(--jy-border-hover); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--jy-focus);
  outline-offset: 2px;
}
textarea { resize: vertical; min-height: 6rem; }

button {
  cursor: pointer;
  padding: var(--spacing-2xs) var(--spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--jy-primary);
  color: var(--jy-primary-fg);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
button:hover { background-color: var(--jy-primary-hover); }
button:active { transform: scale(var(--scale-press)); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

::selection {
  background-color: var(--jy-primary-soft);
  color: var(--jy-primary-soft-fg);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--jy-border-strong) transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 3. 外壳与布局
 * ══════════════════════════════════════════════════════════════════════════ */

.app {
  min-height: 100vh;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--spacing-md) var(--spacing-sm) var(--spacing-2xl);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 买家端站点外壳：页头 + 内容 + 页脚
 *
 * 母本对应 apps/mall/src/app/[locale]/layout.tsx 的三段结构
 * （SiteHeader / 内容 / SiteFooter）。三个 app 各有各的外壳，
 * 所以这一组类名只给买家端用 —— 车商与运营台走 .panel 那一套。
 * ══════════════════════════════════════════════════════════════════════════ */

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  padding-block: var(--spacing-sm);
  border-bottom: 1px solid var(--jy-border);
}

.site-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--jy-fg);
  text-decoration: none;
}

.site-header-nav {
  flex: 1 1 auto;
}

.site-header-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header-list a {
  color: var(--jy-fg-muted);
  font-weight: 500;
  text-decoration: none;
}

.site-header-list a:hover {
  color: var(--jy-fg);
}

.site-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-block: var(--spacing-md);
}

.site-footer {
  margin-block-start: var(--spacing-2xl);
  border-top: 1px solid var(--jy-border);
  background: var(--jy-surface);
  color: var(--jy-fg-muted);
}

.site-footer-grid {
  display: grid;
  gap: var(--spacing-md);
  max-width: var(--container-content);
  margin-inline: auto;
  padding-block: var(--spacing-lg);
}

@media (min-width: 48rem) {
  .site-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.site-footer-desc {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--jy-fg-muted);
}

.site-footer-facts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
}

.site-footer-fact {
  display: flex;
  flex-direction: column;
}

.site-footer-fact dt {
  font-size: var(--text-caption);
  color: var(--jy-fg-subtle);
}

.site-footer-fact dd {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--jy-fg-muted);
}

.site-footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.site-footer-title {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--jy-fg-subtle);
}

.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-list a {
  color: var(--jy-fg-muted);
  text-decoration: none;
}

.site-footer-list a:hover {
  color: var(--jy-fg);
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  justify-content: space-between;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-block: var(--spacing-sm);
  border-top: 1px solid var(--jy-border);
  font-size: var(--text-caption);
  color: var(--jy-fg-subtle);
}

.site-footer-bottom p {
  margin: 0;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  padding-block: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--jy-border);
}
.site-nav a { color: var(--jy-fg-muted); font-weight: 500; }
.site-nav a:hover { color: var(--jy-fg); }

.logo {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--jy-fg);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list li { margin: 0; }

/* 运营台侧栏的分组之间留点间距（母本是竖排侧栏，
   Rust 侧是横排，分组挨太近会看成一坨）。 */
.nav-group { margin-block-start: var(--spacing-sm); }

/* 评分分布条（原生 progress 元素；无 JS 也能显示占比）。 */
/* 买家端订单评价区（母本 apps/mall/src/components/order-review.tsx）。 */
.order-review {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.rating-bar {
  width: 100%;
  height: var(--spacing-xs);
  accent-color: var(--jy-fg);
}

/* 「编辑」开关（原生 details/summary 承载，不写一行 JS 也能展开收起）。 */
.edit-toggle {
  cursor: pointer;
  color: var(--jy-fg-muted);
  font-weight: 500;
}

.edit-toggle:hover { color: var(--jy-fg); }



.session-link {
  margin-inline-start: auto;
  font-size: var(--text-caption);
  color: var(--jy-fg-subtle);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/*  **skip link**（跳到主内容）：默认视觉隐藏，**聚焦时**显形。
    键盘用户的第一站就是它 —— 隐藏但可聚焦（不是 display:none，
    那样它就不可聚焦了，跳过导航的口子反而没了）。 */
.skip-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  margin: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background-color: var(--jy-surface);
  color: var(--jy-fg);
}

.panel-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
}

.panel-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  padding-block-end: var(--spacing-xs);
  border-bottom: 1px solid var(--jy-border);
}

.panel-footer {
  padding-block-start: var(--spacing-xs);
  border-top: 1px solid var(--jy-border);
  color: var(--jy-fg-subtle);
  font-size: var(--text-caption);
}

.nav-item {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  color: var(--jy-fg-muted);
  font-weight: 500;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.nav-item:hover {
  background-color: var(--jy-bg);
  color: var(--jy-fg);
  text-decoration: none;
}
.nav-item.is-active {
  background-color: var(--jy-primary-soft);
  color: var(--jy-primary-soft-fg);
}

/* 页面根容器：一律「上下留白 + 收窄到内容档」 */
.admin-commission, .admin-credits, .admin-dealer-applications,
.admin-openapp-credentials, .admin-orders, .admin-payouts,
.admin-service-catalog, .admin-service-orders, .admin-service-provider-orgs,
.admin-usage-products, .admin-vehicle-photos, .catalog-page, .contract-panel,
.credits-page, .dealer-applications-page, .home-body, .inquiries-page,
.inspections-page, .logistics-workbench, .mall-home, .mall-inquiries,
.mall-browse, .mall-favorites, .dealer-onboarding, .dealer-overview,
.listing-new-page, .service-catalog-page,
.mall-listings, .mall-logistics, .mall-notifications, .mall-orders,
.mall-quotes-overview, .mall-service-catalog, .mall-service-orders,
.mall-service-request, .mall-auth-form, .mall-inquiry-form, .mall-order-form,
.my-catalog-page, .openapp-page, .orders-page, .payouts-page,
.service-orders-page, .service-parts-page, .settlement-page, .svc-orgs-page,
.value-added-page, .vehicle-photos, .waybill-panel, .waybills,
.my-service-orders, .quotes-panel, .service-request-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: var(--container-content);
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 4. 排版
 * ══════════════════════════════════════════════════════════════════════════ */

.hint {
  color: var(--jy-fg-subtle);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.muted, .text-fg-muted {
  color: var(--jy-fg-muted);
}

.caption, .text-caption {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.overline {
  color: var(--jy-fg-subtle);
  font-size: var(--text-overline);
  font-weight: var(--text-overline--font-weight);
  letter-spacing: var(--text-overline--letter-spacing);
  line-height: var(--text-overline--line-height);
}

.mono, .font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.break-all { word-break: break-all; }
.underline { text-decoration: underline; }

.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;
}

/* 小节标题 */
.section-head, .actions-title, .card-head, .card-foot,
.panel-section, .key-list-title, .notification-title, .order-head,
.quote-title, .quotes-title, .contract-title, .proof-title,
.service-request-title, .waybill-title, .waybill-subtitle,
.service-card-head, .listing-head, .order-no, .waybill-no,
.report-no, .seller-name, .sku-name, .trust-label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: baseline;
  justify-content: space-between;
}

.section-head, .actions-title, .card-head, .card-foot, .key-list-title,
.notification-title, .quote-title, .quotes-title, .contract-title,
.proof-title, .service-request-title, .waybill-title, .service-card-head,
.listing-head {
  font-weight: 600;
}

.card-foot {
  color: var(--jy-fg-subtle);
  font-size: var(--text-caption);
  font-weight: 400;
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-lg);
  background-color: var(--jy-surface);
}

.order-no, .waybill-no, .report-no {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--jy-fg-muted);
}

.seller-name { font-weight: 600; }
.sku-name { font-weight: 500; }
.trust-label { color: var(--jy-fg-muted); font-size: var(--text-caption); }

.overline + .stat-value { margin-top: var(--spacing-3xs); }

/* ══════════════════════════════════════════════════════════════════════════
 * 5. 反馈与状态
 * ══════════════════════════════════════════════════════════════════════════ */

.notice, .scope-notice, .pending-note {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background-color: var(--jy-bg);
  color: var(--jy-fg-muted);
}

.scope-notice {
  border-inline-start: 3px solid var(--jy-info);
  background-color: var(--jy-info-bg);
  color: var(--jy-fg);
}

.pending-note {
  border-inline-start: 3px solid var(--jy-warning);
  background-color: var(--jy-warning-bg);
  color: var(--jy-fg);
}

.err {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--jy-danger);
  border-radius: var(--radius-md);
  background-color: var(--jy-danger-bg);
  color: var(--jy-danger);
}

.ok, .opened-result {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--jy-success);
  border-radius: var(--radius-md);
  background-color: var(--jy-success-bg);
  color: var(--jy-success);
}

/* 母本 StatusView（packages/ui/src/components/status-view.tsx）：
   `mx-auto flex w-full max-w-narrow flex-col items-center gap-sm py-2xl text-center` */
.status-view {
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: var(--container-narrow);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding-block: var(--spacing-2xl);
  text-align: center;
}

/* 母本 `p max-w-prose text-body text-fg-muted`（状态页说明） */
.status-view p {
  max-width: 65ch;
  color: var(--jy-fg-muted);
}

/* 母本 `h1 text-h2 text-fg`（状态页标题） */
.status-view h1 {
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  color: var(--jy-fg);
}

/* 母本 `p text-h1 font-bold text-primary`（状态码大字，品牌化视觉锚点） */
.status-code {
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  font-weight: 700;
  color: var(--jy-primary);
}

/* 母本 `p text-caption text-danger`（字段级红字） */
.field-error {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--jy-danger);
}
.empty, .empty-state {
  padding: var(--spacing-lg) var(--spacing-sm);
  border: 1px dashed var(--jy-border-strong);
  border-radius: var(--radius-lg);
  color: var(--jy-fg-subtle);
  text-align: center;
}

.pending {
  color: var(--jy-warning);
  font-weight: 600;
}

.contract-missing, .contract-unavailable, .logistics-unavailable,
.waybill-unavailable, .proof-none, .quote-expired {
  color: var(--jy-fg-subtle);
  font-style: italic;
}

.contract-pending, .quote-valid-left, .relax-suggestion {
  color: var(--jy-warning);
}

.contract-signed-at, .contract-countdown {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.dispute-context {
  padding: var(--spacing-xs);
  border-inline-start: 3px solid var(--jy-danger);
  background-color: var(--jy-danger-bg);
  color: var(--jy-fg);
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 6. 按钮与动作组
 * ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  /*  母本 `buttonStyles` 的主变体**没有边框**（Tailwind preflight 的
   *  `button { font: inherit }` 让它继承正文的 line-height 1.75）。
   *  此前这条写的「透明边框 + line-height 1.4」让所有按钮比母本
   *  **矮 4px**（2px 边框 + 行高差），浏览器级比对抓到的，全局修。 */
  border: 0;
  /*  母本 `buttonStyles` 的圆角档是 `rounded-md`，即令牌层的 `--radius-md`。
   *  （此前写的是 `--radius-sm`，与母本差一档，浏览器级比对抓到的） */
  border-radius: var(--radius-md);
  background-color: var(--jy-primary);
  color: var(--jy-primary-fg);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:hover {
  background-color: var(--jy-primary-hover);
  color: var(--jy-primary-fg);
  text-decoration: none;
}
.btn:active { transform: scale(var(--scale-press)); }

/* secondary 变体（母本 `buttonStyles` 的 secondary：`border border-input-border
   bg-surface-raised text-fg hover:border-border-hover hover:bg-surface`）。
   静止边界用 input-border（达标档），hover 才升到 border-hover ——
   反过来用 border-strong 会把边界拉回不达标档（母本 R7-C L-10 的原话）。 */
.btn-secondary {
  border: 1px solid var(--jy-input-border);
  background-color: var(--jy-surface-raised);
  color: var(--jy-fg);
}
.btn-secondary:hover {
  border-color: var(--jy-border-hover);
  background-color: var(--jy-surface);
  color: var(--jy-fg);
}

/* lg 尺寸（母本 `buttonStyles({size:"lg"})`：`px-md py-xs text-body`）。
   仓内 `.btn` 是 md 档（`px-sm py-2xs`）。 */
.btn-lg {
  padding: var(--spacing-xs) var(--spacing-md);
}

/* 母本 ghost 变体：`bg-transparent text-fg hover:bg-surface`（**无边框**）。 */
.btn-ghost {
  background-color: transparent;
  color: var(--jy-fg);
}
.btn-ghost:hover {
  background-color: var(--jy-surface);
  color: var(--jy-fg);
}

.btn-danger {
  background-color: var(--jy-danger-solid);
  color: var(--jy-danger-solid-fg);
}
.btn-danger:hover { background-color: var(--jy-danger); color: var(--jy-danger-solid-fg); }

.row-actions, .order-actions, .service-actions, .quote-actions,
.detail-actions, .logistics-actions, .my-service-actions,
.listing-actions, /*  fixed 档接单：价面在上、按钮在下（一口价不可议，所以没有价格输入框）。 */
.service-fixed-accept {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-block: var(--spacing-2xs);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
}

.actions-title {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--text-overline--letter-spacing);
}

.cursor-pointer { cursor: pointer; }


/* ══════════════════════════════════════════════════════════════════════════
 * 7. 卡片
 * ══════════════════════════════════════════════════════════════════════════ */

.card, .bill-card, .category-card, .inspection-card, .inquiry-card,
.listing-card, .plan-card, .quote-card, .queue-card, .service-card,
.service-sku-card, .usage-card, .value-card, .waybill-card, .seller-card,
.my-service-card, .stat-card, .contract-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-lg);
  background-color: var(--jy-surface);
  box-shadow: var(--jy-shadow-xs);
}

.card:hover, .listing-card:hover, .service-card:hover {
  border-color: var(--jy-border-strong);
  box-shadow: var(--jy-shadow-card);
}

.card-head {
  padding-block-end: var(--spacing-2xs);
  border-block-end: 1px solid var(--jy-border-subtle);
}

.card-foot {
  padding-block-start: var(--spacing-2xs);
  border-block-start: 1px solid var(--jy-border-subtle);
}

.contract-card-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.contract-card.contract-voided {
  opacity: 0.6;
}

.listing-grid, .category-grid, .value-grid, .quote-cards,
.overview-entries,
.quote-compare, .price-sample-grid, .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--spacing-sm);
}

.listing-filters, .filters, .filter-tabs, .sku-filters,
.orders-filter, .inquiries-filter, .notification-filter,
.payouts-filter, .settlement-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
}

.filter-tabs, .box-tab, .inbox-tabs {
  border-bottom: 1px solid var(--jy-border);
  gap: var(--spacing-sm);
}

/* 母本 window-select 的两个布局锚点（母本第 147 条）：
   ① 容器右对齐（母本口径 justify-end）；
   ② 字段容器窄档（母本口径 w-32 ≈ 8rem）—— 不然 select 被通用规则的
      width:100% 拉满整行，窗口筛选器会横贯整行。 */
.window-filter {
  justify-content: flex-end;
}

.window-filter .field {
  width: 8rem;
  margin-block-end: 0;
}

.box-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  color: var(--jy-fg-muted);
  font-weight: 500;
}
.box-tab:hover { background-color: var(--jy-bg); color: var(--jy-fg); text-decoration: none; }

.filter-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  color: var(--jy-fg-muted);
  font-weight: 500;
}
.filter-tab:hover { background-color: var(--jy-bg); color: var(--jy-fg); text-decoration: none; }
.filter-tab.filter-tab-active {
  background-color: var(--jy-primary-soft);
  color: var(--jy-primary-soft-fg);
}

.direction-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 8. 表格
 * ══════════════════════════════════════════════════════════════════════════ */

.data-table, .items-table, .quote-table, .recon-table, .settlement-table,
.spec-table, .value-added-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--jy-surface);
  font-variant-numeric: tabular-nums;
}

.data-table caption, .items-table caption, .quote-table caption,
.recon-table caption, .settlement-table caption, .spec-table caption,
.value-added-table caption, .caption {
  padding: var(--spacing-2xs) var(--spacing-xs);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  text-align: start;
}

.data-table th, .items-table th, .quote-table th, .recon-table th,
.settlement-table th, .spec-table th, .value-added-table th {
  padding: var(--spacing-2xs) var(--spacing-xs);
  background-color: var(--jy-bg);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}

.data-table td, .items-table td, .quote-table td, .recon-table td,
.settlement-table td, .spec-table td, .value-added-table td {
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-block-start: 1px solid var(--jy-border-subtle);
  vertical-align: top;
}

.data-table tbody tr:hover, .items-table tbody tr:hover,
.quote-table tbody tr:hover, .recon-table tbody tr:hover,
.settlement-table tbody tr:hover, .value-added-table tbody tr:hover {
  background-color: var(--jy-bg);
}

.spec-row th {
  width: 12rem;
  color: var(--jy-fg-muted);
  font-weight: 500;
  white-space: normal;
}

.recon-row td, .rule-row td, .sector-row td { vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════════════════
 * 9. 表单
 * ══════════════════════════════════════════════════════════════════════════ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin-block-end: var(--spacing-sm);
}

.field > label, .field-label {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  font-weight: 600;
}

/* 快捷入口卡：链接块（整卡可点），标题进卡片内容 */
.overview-entry {
  display: block;
  padding: var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background: var(--jy-surface-raised);
  text-decoration: none;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--spacing-sm);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: flex-end;
}

.cascade-form, .order-form, .quote-form, .inquiry-form, .dispute-form,
.reject-form, .cancel-form, .listing-form, .login-form, .register-form,
.auth-form, .mall-auth-form, .mall-inquiry-form, .mall-order-form,
.photo-upload-form, .photo-delete-form, .photo-sort-form,
.capability-patch-form, .catalog-create, .category-form, .credits-form,
.generate-bill-form, .org-open-form, .openapp-create-form,
.openapp-edit-form, .create-rule-form, .usage-create-form,
.usage-org-price-form, .service-complete-form, .service-deliverable-form,
.service-redeliver-form,
.service-quote-form, .service-reject-form, .service-request-form,
.service-fixed-accept-form,
.waybill-register, .waybill-assignment-form, .waybill-exception-form,
.logistics-accept-form, .logistics-decline-form, .logistics-exception-form,
.inspection-form, .inspection-register, .reply-form, .sku-form,
.credits-form-body, .inquiry-form-body, .service-request-form,
.waybill-assignment-fields, .waybill-fields, .order-fields,
.service-fields, .inspection-fields, .logistics-fields,
.inquiry-form-body, .service-request-markets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: var(--container-form);
}

.form-actions {
  padding-block-start: var(--spacing-2xs);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 10. 徽标与芯片
 * ══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-3xs) var(--spacing-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--jy-bg);
  color: var(--jy-fg-muted);
  font-size: var(--text-micro);
  font-weight: var(--text-micro--font-weight);
  line-height: var(--text-micro--line-height);
  white-space: nowrap;
}

.badge-row, .scope-badges, .seller-badges, .chip-row, .chip-group,
.listing-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-3xs);
  align-items: center;
}

.badge-neutral { background-color: var(--jy-bg); color: var(--jy-fg-muted); }
.badge-info { background-color: var(--jy-info-bg); color: var(--jy-info); }
.badge-success { background-color: var(--jy-success-bg); color: var(--jy-success); }
.badge-warning { background-color: var(--jy-warning-bg); color: var(--jy-warning); }
.badge-danger { background-color: var(--jy-danger-bg); color: var(--jy-danger); }
.badge-brand { background-color: var(--jy-primary-soft); color: var(--jy-primary-soft-fg); }
.badge-pending { background-color: var(--jy-warning-bg); color: var(--jy-warning); }
.badge-active { background-color: var(--jy-success-bg); color: var(--jy-success); }
.badge-draft { background-color: var(--jy-bg); color: var(--jy-fg-muted); }
.badge-sold { background-color: var(--jy-info-bg); color: var(--jy-info); }
.badge-inactive { background-color: var(--jy-bg); color: var(--jy-fg-subtle); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-3xs) var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-pill);
  background-color: var(--jy-surface);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.chip:hover { border-color: var(--jy-border-hover); color: var(--jy-fg); text-decoration: none; }

.scope-option {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-3xs) var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-sm);
  background-color: var(--jy-surface);
}

.scope-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.read-dot, .unread-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--jy-border-strong);
}
.unread-dot { background-color: var(--jy-primary); }

.text-info { color: var(--jy-info); }

/* ══════════════════════════════════════════════════════════════════════════
 * 11. 列表与行
 * ══════════════════════════════════════════════════════════════════════════ */

.listing-list, .order-list, .quote-list, .inquiry-list,
.notification-list, .event-list, .exception-list, .logistics-list,
.key-list, .sku-list, .service-list, .service-order-list, .usage-list,
.bill-list, .funds-list, .material-list, .message-list, .plan-list,
.catalog-list, .related-listings, .trust-list, .queue-card-list,
.settlement-entries, .value-list, .invoice-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 车商结算页的提现区（母本 payout-section 的对应块）。 */
.settlement-section {  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.payout-balances {  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.payout-balance {  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.payout-amount {  font-size: var(--text-h2);
  font-variant-numeric: tabular-nums;
}

.payout-apply {  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.payout-form {  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

.payout-list {  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.payout-row {  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.listing-row, .order-row, .quote-row, .inquiry-row, .notification-row,
.event-row, .exception-row, .logistics-row, .sku-row, .service-order-row,
.usage-product-row, .bill-row, .message-row, .logistics-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  border-block-end: 1px solid var(--jy-border-subtle);
}

.listing-row:last-child, .order-row:last-child, .quote-row:last-child,
.inquiry-row:last-child, .notification-row:last-child,
.event-row:last-child, .exception-row:last-child, .logistics-row:last-child,
.sku-row:last-child, .service-order-row:last-child,
.usage-product-row:last-child, .bill-row:last-child,
.message-row:last-child {
  border-block-end: 0;
}

.listing-row > *, .order-row > *, .quote-row > *, .inquiry-row > *,
.notification-row > *, .event-row > *, .exception-row > *,
.logistics-row > *, .sku-row > *, .service-order-row > *,
.usage-product-row > *, .bill-row > *, .message-row > * {
  flex: 1 1 auto;
  min-width: 0;
}

.logistics-row-head {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  font-weight: 600;
}

.listing-meta, .order-meta, .detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.orders-toolbar, .inquiries-toolbar, .notification-toolbar,
.orders-body, .inquiries-body, .logistics-body, .notifications-body,
.mall-browse-body, .listing-new-form,
.service-orders-body, .quotes-body, .bills-section, .bills-results,
.credits-forms, .credits-org-search, .bill-query, .catalog-gate,
.related-listings, .service-materials, .value-added-credits,
.value-added-plans, .value-added-purchases, .value-added-usage,
.settlement-bills, .settlement-credits, .settlement-credits-section,
.settlement-subscriptions, .usage-org-prices, .home-contact,
.home-categories, .home-featured, .home-trust, .home-value-props,
/* 母本 `scroll-mt-xl`（锚点跳转后目标不被吸顶元素盖住） */
.home-categories,
.home-value-props {
  scroll-margin-top: var(--spacing-xl);
}

.sectors, .sector-rows, .categories-section, .rules-section,
.photos-section, .skus-section, .patch-records, .recon-discrepancies,
.payouts-queue, .status-breakdown, .queue-card-list, .catalog-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 12. 时间线与事件
 * ══════════════════════════════════════════════════════════════════════════ */

.timeline-list, .event-list, .service-timeline, .order-timeline,
.contract-timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-node {
  position: relative;
  padding-inline-start: var(--spacing-md);
  padding-block-end: var(--spacing-2xs);
  border-inline-start: 2px solid var(--jy-border);
}

.timeline-node::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 0.4rem;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--jy-primary);
}

.timeline-row, .contract-timeline-row, .order-event, .contract-timeline-side {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: baseline;
  justify-content: space-between;
}

.contract-timeline-title {
  font-weight: 600;
}

.order-events, .order-event { display: flex; flex-direction: column; gap: var(--spacing-3xs); }

/* ══════════════════════════════════════════════════════════════════════════
 * 13. 详情与键值
 * ══════════════════════════════════════════════════════════════════════════ */

.detail-list, .key-list, .detail-entry, .entry, .key-row,
.order-details-row, .service-request-attachment-label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--spacing-3xs);
  border-block-end: 1px solid var(--jy-border-subtle);
}

.detail-list, .key-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.detail-entry > *, .entry > *, .key-row > * {
  flex: 0 1 auto;
}

.detail-entry > :first-child, .entry > :first-child, .key-row > :first-child {
  flex: 0 0 12rem;
  color: var(--jy-fg-muted);
}

.key-list-block {
  padding-block: var(--spacing-2xs);
}

.detail-desc {
  color: var(--jy-fg);
  white-space: pre-wrap;
}

.detail-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--spacing-2xs);
}

.detail-images img, .photo-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--jy-border);
}

.photo-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.vehicle-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  border: 1px dashed var(--jy-border-strong);
  border-radius: var(--radius-md);
  color: var(--jy-fg-subtle);
  text-align: center;
}

.vehicle-placeholder-icon { font-size: var(--text-h2); }
.vehicle-placeholder-label { font-size: var(--text-caption); }

.material-key, .proof-key {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--jy-fg-muted);
  word-break: break-all;
}

.secret-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 14. 统计与金额
 * ══════════════════════════════════════════════════════════════════════════ */

.stat, .stat-card, .hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding: var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-lg);
  background-color: var(--jy-surface);
}

.stat-grid, .stats-list, .hero-stats, .hero-stat-list, .settlement-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--spacing-sm);
}

.stat-label, .overline {
  color: var(--jy-fg-subtle);
  font-size: var(--text-overline);
  font-weight: var(--text-overline--font-weight);
  letter-spacing: var(--text-overline--letter-spacing);
}

.stat-value, .stat-amount, .hero-stat-value, .balance, .amount,
.total, .price, .price-value, .quote-price {
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat-note { color: var(--jy-fg-subtle); font-size: var(--text-caption); }

.unit {
  color: var(--jy-fg-subtle);
  font-size: var(--text-caption);
}

.total { color: var(--jy-fg); }
.amount { color: var(--jy-fg); }
.balance { display: flex; align-items: baseline; gap: var(--spacing-3xs); }

.org {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--jy-fg-muted);
}

.price-sample, .price-sample-grid { color: var(--jy-fg-muted); }
.home-price-demo { color: var(--jy-fg-muted); }

/* ══════════════════════════════════════════════════════════════════════════
 * 15. 合同
 * ══════════════════════════════════════════════════════════════════════════ */

.contract-panel, .contract-body, .contract-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contract-block {
  padding: var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background-color: var(--jy-surface);
}

.contract-block-title {
  font-weight: 600;
  margin-block-end: var(--spacing-3xs);
}

.contract-block-title-en, .contract-en {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.contract-block-body-en, .contract-en-note {
  color: var(--jy-fg-muted);
}

.contract-summary, .contract-terms {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.contract-hash {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--jy-fg-subtle);
  word-break: break-all;
}

.contract-authority { color: var(--jy-fg-muted); font-size: var(--text-caption); }
.contract-sign { color: var(--jy-fg); font-weight: 600; }
.contract-version { color: var(--jy-fg-subtle); font-size: var(--text-caption); }

/* ══════════════════════════════════════════════════════════════════════════
 * 16. 报价
 * ══════════════════════════════════════════════════════════════════════════ */

.quotes-panel, .quotes-overview, .quote-compare, .quote-compare-row,
.quote-cards, .quote-form, .quote-hint {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.quote-compare-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2xs) 0;
  border-block-end: 1px solid var(--jy-border-subtle);
}

.quote-hint { color: var(--jy-fg-subtle); font-size: var(--text-caption); }
.quote-requote { color: var(--jy-info); font-weight: 600; }
.quote-version { color: var(--jy-fg-subtle); font-size: var(--text-caption); }
.quotes-history { display: flex; flex-direction: column; gap: var(--spacing-2xs); }
.quotes-overview-row { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs); align-items: baseline; }

/* ══════════════════════════════════════════════════════════════════════════
 * 17. 运单
 * ══════════════════════════════════════════════════════════════════════════ */

.waybill-panel, .waybill-list, .waybill-exceptions, .waybill-assignment,
.waybill-exception-block, .waybill-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.waybill-exception-block {
  padding: var(--spacing-xs);
  border: 1px solid var(--jy-danger);
  border-radius: var(--radius-md);
  background-color: var(--jy-danger-bg);
}

.waybill-mode, .waybill-ready {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.waybill-empty {
  padding: var(--spacing-md);
  color: var(--jy-fg-subtle);
  text-align: center;
}

.waybill-advance, .logistics-expand, .logistics-gate-card,
.service-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 18. 结算 / 账单 / 用量 / 增值
 * ══════════════════════════════════════════════════════════════════════════ */

.settlement-page, .credits-page, .usage-products, .value-added-page,
.payouts-page, .openapp-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.payout-row, .recon-row, .rule-row, .sector-row, .status-breakdown,
.usage-org-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
  justify-content: space-between;
}

.settlement-table tbody tr:hover { background-color: var(--jy-bg); }

.openapp-list, .openapp-row, .service-sku-list, .service-sku-group,
.queue-card, .catalog-list, .plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.queue-card {
  padding: var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background-color: var(--jy-surface);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 19. 服务 / 卖家 / 组织
 * ══════════════════════════════════════════════════════════════════════════ */

.service-card-head, .service-request-panel, .service-request-provider,
.service-order-detail, .service-detail, .inspection-detail,
.logistics-detail, .seller-card, .svc-orgs-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.service-request-subtitle {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.service-request-markets {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.service-materials { gap: var(--spacing-3xs); }
.trust-list { gap: var(--spacing-3xs); }
.trust-row { display: flex; gap: var(--spacing-2xs); align-items: baseline; }

/* ══════════════════════════════════════════════════════════════════════════
 * 20. 认证与登录
 * ══════════════════════════════════════════════════════════════════════════ */

.login, .register, .auth-form, .mall-auth-form, .inquiry-login,
.login-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--spacing-md);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-lg);
  background-color: var(--jy-surface);
}

.auth-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin-block-end: var(--spacing-sm);
}

.auth-header h1 { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
 * 21. 首页与品牌区
 * ══════════════════════════════════════════════════════════════════════════ */

.mall-home, .home-body {
  gap: var(--spacing-lg);
}

.home-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: var(--radius-3xl);
  background: var(--texture-paper), var(--jy-surface);
  border: 1px solid var(--jy-border);
}

.hero-stats, .hero-stat-list { gap: var(--spacing-sm); }
.home-value-props { gap: var(--spacing-sm); }
.home-categories { gap: var(--spacing-sm); }
.home-featured { gap: var(--spacing-sm); }
.home-trust { gap: var(--spacing-sm); }
.home-contact { gap: var(--spacing-2xs); }

/* ══════════════════════════════════════════════════════════════════════════
 * 22. 工具类兼容层
 *
 * 已迁页面里残留少量 TS 侧 Tailwind 工具类（ADR 0043 决策 3 第 4 步会逐页
 * 改写成语义类名）。本层给出它们的**等价物**，让这些页面在改写之前也
 * 不是「无样式」。改写完成后本层可整段删除。
 * ══════════════════════════════════════════════════════════════════════════ */

.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.gap-3-xs { gap: var(--spacing-3xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.block { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
 * 23. 其余语义类名（按族补齐）
 *
 * 上面 2–22 节给的是**族**的骨架；本节把其余已迁页面用到的类名逐个落位。
 * 每条都给出真实外观，不留占位。
 * ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 页面根与分区 ---------- */
.commission-page,
.my-catalog,
.orders,
.inquiries,
.inspections,
.settlement,
.value-added,
.service-parts,
.listings-body,
.mall-contract,
.payouts-recon,
.quotes-form,
.pager,
.pagination {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pager, .pagination {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-sm);
}

.pager-gap {
  width: var(--spacing-md);
  color: var(--jy-fg-subtle);
  text-align: center;
}

.pager-next, .pager-prev {
  padding: var(--spacing-2xs) var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-sm);
  background-color: var(--jy-surface);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}
.pager-next:hover, .pager-prev:hover {
  border-color: var(--jy-border-hover);
  color: var(--jy-fg);
  text-decoration: none;
}

/* ---------- 详情块 ---------- */
.inquiry-detail,
.listing-detail,
.order-detail,
.review-block,
.seller-signals,
.logistics-inbox,
.logistics-advance-group,
.service-request-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.seller-signals {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
}

.review-block {
  padding: var(--spacing-sm);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background-color: var(--jy-surface);
}

.listing-link {
  color: var(--jy-primary-text);
  font-weight: 500;
}

.listing-price, .detail-price {
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- 合同补充 ---------- */
.contract-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--spacing-2xs);
  border-block-end: 1px solid var(--jy-border-subtle);
}

.contract-block-body {
  color: var(--jy-fg);
  white-space: pre-wrap;
}

.contract-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

/* ---------- 询盘 / 检测 ---------- */
.inquiry-head, .inspection-head, .waybill-head, .usage-head,
.logistics-title, .my-service-orders-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
}

.inquiry-intent {
  color: var(--jy-fg);
  font-weight: 500;
}

.inquiry-message {
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  background-color: var(--jy-bg);
  white-space: pre-wrap;
}

.inquiry-message-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding-block: var(--spacing-2xs);
  border-block-end: 1px solid var(--jy-border-subtle);
}

.inquiry-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.inquiry-sent {
  color: var(--jy-fg-subtle);
  font-size: var(--text-caption);
}

.inspection-items, .inspection-list, .inspection-photos {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.inspection-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--spacing-2xs);
}

/* ---------- 订单与结算补充 ---------- */
.order-total, .order-funds, .order-escrow, .order-remittance,
.order-proof, .receipt, .ledger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--spacing-3xs);
  border-block-end: 1px solid var(--jy-border-subtle);
}

.order-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order-proof, .receipt, .ledger {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.dispute-outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
}

.quote-delivery {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.subscribe-confirm, .usage-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background-color: var(--jy-bg);
}

.waybill-exception {
  color: var(--jy-danger);
  font-size: var(--text-caption);
}

/* ---------- 角色与域内标记 ---------- */
.buyer {
  color: var(--jy-primary-text);
  font-weight: 600;
}

.cascade {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
}

.category-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-3xs);
  border-block-end: 1px solid var(--jy-border-subtle);
}

/* ---------- 工具类兼容层（补） ---------- */
.inline-block { display: inline-block; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
 * 24. 窄屏（唯一断点 48rem，与 TS 侧 md 同值）
 *
 * 数据表折成标签卡：标签由表头写进 `data-label`，这里只负责排版。
 * ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 47.999rem) {
  .app { padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xl); }

  .fields, .listing-grid, .category-grid, .value-grid, .quote-cards,
  .quote-compare, .price-sample-grid, .photo-grid {
    grid-template-columns: 1fr;
  }

  .detail-entry > :first-child, .entry > :first-child, .key-row > :first-child {
    flex-basis: 100%;
  }

  .data-table, .items-table, .quote-table, .recon-table, .settlement-table,
  .spec-table, .value-added-table {
    display: block;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .data-table thead, .items-table thead, .quote-table thead,
  .recon-table thead, .settlement-table thead, .spec-table thead,
  .value-added-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .data-table tbody, .data-table tr, .items-table tbody, .items-table tr,
  .quote-table tbody, .quote-table tr, .recon-table tbody, .recon-table tr,
  .settlement-table tbody, .settlement-table tr, .spec-table tbody,
  .spec-table tr, .value-added-table tbody, .value-added-table tr {
    display: block;
  }

  .data-table tr, .items-table tr, .quote-table tr, .recon-table tr,
  .settlement-table tr, .spec-table tr, .value-added-table tr {
    margin-block-end: var(--spacing-sm);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border: 1px solid var(--jy-border);
    border-radius: var(--radius-md);
    background-color: var(--jy-surface);
  }

  .data-table td, .items-table td, .quote-table td, .recon-table td,
  .settlement-table td, .spec-table td, .value-added-table td {
    display: flex;
    gap: var(--spacing-2xs);
    justify-content: space-between;
    border-block-start: 0;
    padding: var(--spacing-3xs) 0;
  }

  .data-table td::before, .items-table td::before, .quote-table td::before,
  .recon-table td::before, .settlement-table td::before,
  .spec-table td::before, .value-added-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--jy-fg-muted);
    font-size: var(--text-caption);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * 10. 开放门户（open-portal 族）
 *
 * # 口径：**母本的 Tailwind 类就是规格**
 *
 * 母本 `apps/open-portal/src/app/page.tsx` 用 Tailwind 工具类排版
 * （`mx-auto max-w-content px-sm md:px-md` / `text-h2 text-fg` /
 * `grid gap-md sm:grid-cols-2` / `op-terminal` …），本节把它们**逐条翻译**成
 * 语义类名。翻译依据只有两处：母本那一行的类名，和本文件的令牌层
 * （`--spacing-*` / `--text-*` / `--radius-*` / `--jy-*`）。
 * **不引入 Tailwind**，也不在本文另造取值。
 *
 * # 断点
 *
 * 只用仓内那一条 `48rem`。母本用了 Tailwind 的 `sm`(40rem) / `md`(48rem) /
 * `lg`(64rem)，本节**全部折到 48rem**（仓内既定口径，见文件头「断点」节）。
 * 与母本的差别只出现在 40–64rem 区间：侧边锚点栏提前出现、
 * 能力卡与流程的列数提前切换。**这是已知偏差，不是漏做。**
 *
 * # 类名
 *
 * 角色名（`.hero` / `.cap-card` / `.terminal` …）驱动外观；
 * 母本自己的钩子类（`op-hero-surface` / `op-cap-card` / `op-terminal` /
 * `op-terminal-dot` / `op-timeline` / `op-timeline-line`）**同元素并挂** ——
 * 那是母本测试断言的契约（`apps/open-portal/src/app/page.test.tsx`），
 * 留着它，母本用例可以 1:1 搬过来。
 */

/* 共享外壳的 `<main class="app">` 带内边距（24px/16px）；开放门户是**独立 app**
   （ADR 0045），母本那页是**满幅**的 Hero，没有这道内边距。
   外壳里出现门户时把内边距抵消（`:has()` 是标准 CSS，2023 起全浏览器可用）。 */
/* ⚠ 连 `max-width` 与外边距一起放开：共享外壳限宽 88rem 且居中，
   不放开的话门户的 Hero 只有 1408px 宽（母本是**满幅** 1440）。 */
.app:has(.open-portal) {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

/* ── 页面外壳 ───────────────────────────────────────────────────────────── */

/* 母本 `<body class="min-h-dvh bg-background font-sans text-fg antialiased">` */
.open-portal {
  min-height: 100dvh;
  background-color: var(--jy-bg);
  color: var(--jy-fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* 母本 `Container`：`mx-auto w-full max-w-content px-sm md:px-md` */
.open-container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-content);
  padding-inline: var(--spacing-sm);
}

@media (min-width: 48rem) {
  .open-container {
    padding-inline: var(--spacing-md);
  }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* 母本 `relative overflow-hidden border-b border-border-on-ink` */
.open-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--jy-border-on-ink);
}

/* 母本 `op-hero-surface absolute inset-0 bg-surface-ink` */
.open-hero-surface,
.op-hero-surface {
  position: absolute;
  inset: 0;
  background-color: var(--jy-surface-ink);
}

/* 母本 `op-hero-grid absolute inset-0 bg-[linear-gradient(...)] bg-[size:36px_36px]
   opacity-[0.10] [mask-image:radial-gradient(80%_100%_at_50%_0%,black_25%,transparent_80%)]` */
.open-hero-grid,
.op-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--jy-fg-on-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--jy-fg-on-ink) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.1;
  mask-image: radial-gradient(80% 100% at 50% 0%, black 25%, transparent 80%);
}

/* 母本 `Container className="relative py-2xl"` */
.open-hero-inner {
  position: relative;
  padding-block: var(--spacing-2xl);
}

/* 母本徽标 `inline-flex items-center gap-3xs rounded-full px-xs py-3xs
   text-overline uppercase bg-primary-soft text-primary-soft-fg` */
.open-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  border-radius: var(--radius-pill);
  padding: var(--spacing-3xs) var(--spacing-xs);
  background-color: var(--jy-primary-soft);
  color: var(--jy-primary-soft-fg);
  font-size: var(--text-overline);
  line-height: var(--text-overline--line-height);
  letter-spacing: var(--text-overline--letter-spacing);
  font-weight: var(--text-overline--font-weight);
  text-transform: uppercase;
}

/* 母本 `h1 mt-md max-w-prose text-display text-fg-on-ink` */
.open-hero-title {
  margin-top: var(--spacing-md);
  max-width: 65ch;
  color: var(--jy-fg-on-ink);
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-weight: var(--text-display--font-weight);
}

/* 母本 `p mt-sm max-w-prose text-body text-fg-muted-on-ink` */
.open-hero-tagline {
  margin-top: var(--spacing-sm);
  max-width: 65ch;
  color: var(--jy-fg-muted-on-ink);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

/* 母本 `div mt-lg flex flex-wrap items-center gap-sm` */
.open-hero-actions {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ── 布局（侧边锚点栏 + 内容列） ─────────────────────────────────────────── */

/* 母本 `Container className="grid gap-xl py-2xl lg:grid-cols-[16rem_minmax(0,1fr)]"` */
.open-layout {
  display: grid;
  gap: var(--spacing-xl);
  padding-block: var(--spacing-2xl);
}

@media (min-width: 48rem) {
  .open-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

/* 母本 `nav hidden lg:block` */
.open-anchor-nav {
  display: none;
}

@media (min-width: 48rem) {
  .open-anchor-nav {
    display: block;
  }
}

/* 母本 `ul sticky top-xl flex list-none flex-col gap-3xs p-0` */
.open-anchor-list {
  position: sticky;
  top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 母本 `a block rounded-md px-sm py-2xs text-body text-fg-muted no-underline
   hover:bg-surface hover:text-fg` */
.open-anchor-link {
  display: block;
  border-radius: var(--radius-md);
  padding: var(--spacing-2xs) var(--spacing-sm);
  color: var(--jy-fg-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.open-anchor-link:hover {
  background-color: var(--jy-surface);
  color: var(--jy-fg);
}

/* 母本 `div flex min-w-0 flex-col gap-2xl` */
.open-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  min-width: 0;
}

/* ── 区块 ───────────────────────────────────────────────────────────────── */

/* 母本 `section scroll-mt-xl` */
.open-section {
  scroll-margin-top: var(--spacing-xl);
}

/* 母本 `h2 text-h2 text-fg` */
.open-section-title {
  color: var(--jy-fg);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  font-weight: var(--text-h2--font-weight);
}

/* 母本 `p mt-sm max-w-prose text-body text-fg-muted` */
.open-lead {
  margin-top: var(--spacing-sm);
  max-width: 65ch;
  color: var(--jy-fg-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

/* ── 能力四卡 ───────────────────────────────────────────────────────────── */

/* 母本 `div mt-lg grid gap-md sm:grid-cols-2` */
.open-cap-grid {
  margin-top: var(--spacing-lg);
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 48rem) {
  .open-cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 母本 `op-cap-card rounded-xl border border-border bg-surface-raised shadow-card
   hover:-translate-y-1 hover:border-border-strong hover:shadow-pop
   motion-reduce:transition-none motion-reduce:hover:translate-y-0` */
.open-cap-card,
.op-cap-card {
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-xl);
  background-color: var(--jy-surface-raised);
  box-shadow: var(--jy-shadow-card);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.open-cap-card:hover,
.op-cap-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--jy-border-strong);
  box-shadow: var(--jy-shadow-pop);
}

@media (prefers-reduced-motion: reduce) {
  .open-cap-card,
  .op-cap-card {
    transition: none;
  }

  .open-cap-card:hover,
  .op-cap-card:hover {
    transform: none;
  }
}

/* 母本 `div p-md pt-2xs text-body text-fg-muted` */
.open-cap-body {
  padding: var(--spacing-md);
  padding-top: var(--spacing-2xs);
  color: var(--jy-fg-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

/* 母本 `span inline-flex items-center gap-3xs rounded-full px-xs py-3xs
   text-overline uppercase bg-info-bg text-info` */
.open-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  border-radius: var(--radius-pill);
  padding: var(--spacing-3xs) var(--spacing-xs);
  background-color: var(--jy-info-bg);
  color: var(--jy-info);
  font-size: var(--text-overline);
  line-height: var(--text-overline--line-height);
  letter-spacing: var(--text-overline--letter-spacing);
  font-weight: var(--text-overline--font-weight);
  text-transform: uppercase;
}

/* 母本 `h3 mt-2xs text-h3 text-fg` */
.open-cap-title {
  margin-top: var(--spacing-2xs);
  color: var(--jy-fg);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--text-h3--font-weight);
}

/* 母本 `p mt-3xs text-caption text-fg-muted` */
.open-cap-text {
  margin-top: var(--spacing-3xs);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* ── 快速开始（终端代码块） ─────────────────────────────────────────────── */

/* 母本 `div mt-lg flex flex-col gap-md` */
.open-blocks {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 母本 `h3 text-h3 text-fg` */
.open-block-title {
  color: var(--jy-fg);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--text-h3--font-weight);
}

/* 母本 `figure op-terminal overflow-hidden rounded-lg border border-border
   bg-neutral-950 shadow-card` */
.open-terminal,
.op-terminal {
  overflow: hidden;
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-neutral-950);
  box-shadow: var(--jy-shadow-card);
}

/* 母本 `figcaption flex items-center gap-2xs border-b border-white/10
   bg-white/5 px-sm py-2xs` */
.open-terminal-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  padding: var(--spacing-2xs) var(--spacing-sm);
}

/* 母本 `span flex items-center gap-3xs` */
.open-terminal-dots {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xs);
}

/* 母本 `span op-terminal-dot size-3 rounded-full bg-[#ff5f57]`（三色取母本原值） */
.open-terminal-dot,
.op-terminal-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background-color: #ff5f57;
}

.open-terminal-dots .open-terminal-dot:nth-child(2) {
  background-color: #febc2e;
}

.open-terminal-dots .open-terminal-dot:nth-child(3) {
  background-color: #28c840;
}

/* 母本 `span font-mono text-caption text-neutral-300` */
.open-terminal-title {
  color: var(--color-neutral-300);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* 母本 `pre overflow-x-auto p-md font-mono text-caption leading-relaxed
   text-neutral-100` */
/*  ⚠ 必须把仓内那条**通用 `pre` 规则**（浅底 + 1px 边框 + 圆角）清掉：
   母本的 `pre` 没有底色与边框（Tailwind preflight 只归零边距），
   那条通用规则是给「独立代码块」用的兜底，落到终端块里会多出
   1px 边框（每块 2px 高、1px 宽的偏移）且把深底盖成浅底。 */
.open-terminal-code {
  overflow-x: auto;
  margin: 0;
  padding: var(--spacing-md);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-neutral-100);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.625;
}

/* 母本备注 `ul mt-md flex list-none flex-col gap-2xs p-0 text-caption
   text-fg-muted` */
.open-notes {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin-block-end: 0;
  padding: 0;
  list-style: none;
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* ── 接入流程（时间轴） ─────────────────────────────────────────────────── */

/* 母本 `ol op-timeline mt-lg grid list-none grid-cols-1 p-0 md:grid-cols-4` */
.open-timeline,
.op-timeline {
  margin-top: var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .open-timeline,
  .op-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 母本 `li relative flex gap-sm pb-lg last:pb-0 md:flex-col md:gap-xs
   md:pb-0 md:pr-md` */
.open-step {
  position: relative;
  display: flex;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-lg);
}

.open-step:last-child {
  padding-bottom: 0;
}

@media (min-width: 48rem) {
  .open-step {
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-bottom: 0;
    padding-right: var(--spacing-md);
  }
}

/* 母本 `span op-timeline-line absolute left-3.5 top-9 h-[calc(100%-2.25rem)]
   w-px bg-border-strong md:left-9 md:top-3.5 md:h-px md:w-[calc(100%-2.25rem)]` */
.open-step-line,
.op-timeline-line {
  position: absolute;
  left: 0.875rem;
  top: 2.25rem;
  height: calc(100% - 2.25rem);
  width: 1px;
  background-color: var(--jy-border-strong);
}

@media (min-width: 48rem) {
  .open-step-line,
  .op-timeline-line {
    left: 2.25rem;
    top: 0.875rem;
    height: 1px;
    width: calc(100% - 2.25rem);
  }
}

/* 母本 `span relative z-10 flex size-7 shrink-0 items-center justify-center
   rounded-full bg-primary text-caption font-semibold text-primary-fg
   ring-4 ring-background` */
.open-step-index {
  position: relative;
  z-index: 10;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--jy-primary);
  color: var(--jy-primary-fg);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  font-weight: 600;
  box-shadow: 0 0 0 4px var(--jy-bg);
}

/* 母本 `div min-w-0` */
.open-step-body {
  min-width: 0;
}

/* 母本 `h3 text-h3 text-fg` */
.open-step-title {
  color: var(--jy-fg);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--text-h3--font-weight);
}

/* 母本 `p mt-3xs text-caption text-fg-muted` */
.open-step-desc {
  margin-top: var(--spacing-3xs);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

/* 母本 `div mt-lg flex flex-col gap-2xs` */
.open-faq-list {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

/* 母本 `details group rounded-md border border-border bg-surface px-sm py-xs` */
.open-faq-item {
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-md);
  background-color: var(--jy-surface);
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* 母本 `summary flex cursor-pointer list-none items-center justify-between
   gap-2xs text-body font-medium text-fg marker:hidden` */
.open-faq-question {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  color: var(--jy-fg);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 500;
}

.open-faq-question::-webkit-details-marker {
  display: none;
}

/* 母本 chevron `size-4 shrink-0 text-fg-muted transition-transform
   duration-(--duration-fast) ease-standard group-open:rotate-180` */
.open-faq-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--jy-fg-muted);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.open-faq-item[open] .open-faq-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .open-faq-chevron {
    transition: none;
  }
}

/* 母本 `p mt-2xs text-caption text-fg-muted` */
.open-faq-answer {
  margin-top: var(--spacing-2xs);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* ── 页脚 ───────────────────────────────────────────────────────────────── */

/* 母本 `footer border-t border-border bg-surface` */
.open-footer {
  border-top: 1px solid var(--jy-border);
  background-color: var(--jy-surface);
}

/* 母本 `Container className="py-2xl"` */
.open-footer-inner {
  padding-block: var(--spacing-2xl);
}

/* 母本 `div grid gap-xl md:grid-cols-2` */
.open-footer-grid {
  display: grid;
  gap: var(--spacing-xl);
}

@media (min-width: 48rem) {
  .open-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 母本 `h2 text-h3 text-fg` */
.open-footer-title {
  color: var(--jy-fg);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--text-h3--font-weight);
}

/* 母本 `p mt-2xs max-w-prose text-caption text-fg-muted` */
.open-footer-body {
  margin-top: var(--spacing-2xs);
  max-width: 65ch;
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* 母本 `a mt-md inline-block rounded-md px-sm py-2xs text-body text-primary
   underline-offset-4 no-underline hover:underline` */
.open-contact-link {
  display: inline-block;
  margin-top: var(--spacing-md);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xs) var(--spacing-sm);
  color: var(--jy-primary-text);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.open-contact-link:hover {
  text-decoration: underline;
}

/* 母本 `ul mt-2xs flex list-none flex-col gap-3xs p-0` */
.open-footer-links {
  margin-top: var(--spacing-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

/* 母本 `a text-caption text-fg-muted underline-offset-4 hover:text-fg hover:underline` */
.open-footer-link {
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.open-footer-link:hover {
  color: var(--jy-fg);
  text-decoration: underline;
}

/* 母本 `p mt-xl border-t border-border pt-md text-caption text-fg-subtle` */
.open-copyright {
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--jy-border);
  padding-top: var(--spacing-md);
  color: var(--jy-fg-subtle);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* 运营台「AI 用量」页（母本 ai-usage-client.tsx） */
.admin-ai-usage {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-ai-usage-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「流动性」页（母本 liquidity-client.tsx） */
.admin-liquidity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-liquidity-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「上架表现」页（母本 listing-performance-client.tsx） */
.admin-listing-performance {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-listing-performance-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「防私联复核」页（母本 leak-review-client.tsx） */
.admin-leak-review {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-leak-review-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「发品审核」页（母本 listings-review-client.tsx） */
.admin-listings-review {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-listings-review-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「制裁筛查」页（母本 sanctions-client.tsx） */
.admin-sanctions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-sanctions-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「退订复核」页（母本 subscriptions-client.tsx） */
.admin-subscriptions-review {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-subscriptions-review-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台「认证审核」页（母本 verifications-client.tsx） */
.admin-verifications {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-verifications-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 运营台登录页（母本 admin/src/app/login） */
.admin-login {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: var(--container-form);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md);
}

/* 车商「站内通知」页：筛选条与筛选片（母本 notifications-client.tsx） */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-pill);
  padding: var(--spacing-3xs) var(--spacing-sm);
  color: var(--jy-fg-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.filter-chip:hover {
  color: var(--jy-fg);
  border-color: var(--jy-border-hover);
}

/* 车商「站内通知」页：区块与行 */
.notifications {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.row-title {
  font-weight: var(--text-body--font-weight);
}

.row-unread {
  background: var(--jy-primary-soft);
}

/* ── 移动端抽屉（原生 details/summary；**宽屏隐藏，窄屏才出现**）────────
   母本用 Radix Dialog + 汉堡按钮；这边用原生 details —— 形态不同、
   目的相同（窄屏能导航、能登出），而且不引一行 JS。

   **导航项与桌面同源**（同一个渲染函数出来的），所以抽屉里的链接
   不会与桌面漂移 —— 这不是靠自觉，是没有第二份数据。

   桌面导航（.site-header-nav / .panel-nav）在窄屏隐藏，
   抽屉按钮（.site-drawer-toggle / .panel-drawer-toggle）接管导航。 */
.site-drawer,
.panel-drawer {
  display: none;
}

.site-drawer-toggle,
.panel-drawer-toggle {
  cursor: pointer;
  list-style: none;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border: 1px solid var(--jy-border);
  border-radius: var(--radius-sm);
  color: var(--jy-fg);
  background-color: var(--jy-surface);
  user-select: none;
}

.site-drawer-toggle::-webkit-details-marker,
.panel-drawer-toggle::-webkit-details-marker {
  display: none;
}

.site-drawer-nav,
.panel-drawer-nav {
  padding-block-start: var(--spacing-xs);
}

.site-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.site-drawer-list a,
.panel-drawer-nav a {
  color: var(--jy-fg);
  text-decoration: none;
}

.site-drawer-list a:hover,
.panel-drawer-nav a:hover {
  color: var(--jy-primary);
}

@media (max-width: 47.999rem) {
  /* 窄屏：桌面导航收起，抽屉按钮接管。 */
  .site-header-nav,
  .panel-nav {
    display: none;
  }

  .site-drawer,
  .panel-drawer {
    display: block;
    width: 100%;
  }
}

/* ── 车源详情页的买家可见块（母本同款）────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  color: var(--jy-fg-muted);
  text-decoration: none;
  align-self: flex-start;
}

.back-link:hover {
  color: var(--jy-fg);
}

.detail-specs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.detail-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--jy-border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--jy-surface);
}

.review-rating {
  font-weight: 600;
  color: var(--jy-fg);
}

.review-comment {
  color: var(--jy-fg-muted);
  white-space: pre-line;
}

.review-time {
  color: var(--jy-fg-subtle);
}

.review-reply {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding-inline-start: var(--spacing-xs);
  border-inline-start: 2px solid var(--jy-border);
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3xs);
}

.detail-inspection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--jy-border-subtle);
  border-radius: var(--radius-sm);
}

.detail-inspection-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.detail-inquiry,
.detail-order {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* 母本 `scroll-mt-2xl`（锚点跳转后目标不被吸顶元素盖住） */
.detail-inquiry {
  scroll-margin-top: var(--spacing-2xl);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 追加：第二十五批新增视图的类（错误边界页 / 组织选择器 / 材料预览 / 报价面板）
 *
 * 母本那几个类（`max-w-narrow`、`text-h1`、`text-primary`、`text-h2`、
 * `text-fg-muted`）是 **Tailwind 字面类**，Rust 侧用**自己的类串层** —— 形态差异，
 * 不对拍字面；但**每个用到的类名都必须在样式表里有规则**（否则页面无样式，
 * 且 `style.rs` 那道自检会红）。
 * ══════════════════════════════════════════════════════════════════════════ */

/* 运营台错误边界页（母本 `app/error.tsx` 的 `PanelError`） */
.admin-error-boundary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-block-start: var(--spacing-sm);
}

/* 重试 / 返回两级入口：按钮是**母本契约**（`type="button"`），链接是 SSR 下
   **真能走**的那条出路（无 JS 时按钮没有动作） */
.retry-link,
.back-home-link {
  color: var(--jy-primary);
  text-decoration: underline;
}

/* 佐证材料预览页（母本 `verifications-client` 的材料预览面） */
.admin-material-preview-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-material-preview {
  max-width: 100%;
  border: 1px solid var(--jy-border-subtle);
  border-radius: var(--radius-sm);
}

/* 组织选择器（母本 `components/org-selector`） */
.org-selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;
}

.masked-org-id {
  color: var(--jy-fg-muted);
}

.change-org-link,
.clear-org-link {
  color: var(--jy-primary);
  text-decoration: underline;
}

/* 报价面板（母本 `inquiries/quotes-panel`）：有效期与有效性两行 */
.quote-valid-until,
.quote-valid {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--jy-fg-muted);
}

.quote-valid {
  color: var(--jy-success);
}
/* 第二十七批新增的三个类（运营台服务目录确认面 / 处置行内表单 / 凭据轮换确认） */
.confirm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.disposition-form {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.rotate-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}