/* ============================================================================
   聚流平台 · 共享工艺层（business.css）
   ----------------------------------------------------------------------------
   四层分层架构（自上而下单向覆盖，禁止反向重定义）：
     ① 工艺令牌层   本文件 :root 原子令牌（全站唯一 :root 定义处）
     ② 基础组件层   类选择器，只引用令牌，不写 hex，不用 !important
     ③ 端主题层     theme-juliu.css / theme-ranshan.css，只覆盖语义别名
     ④ surface 层   各端 styles.css / 页面作用域，禁止重定义原子令牌
   断点速记（CSS 变量无法用于 @media，字面量在此固化，为全站唯一来源）：
     sm:640px   md:768px   lg:1024px   xl:1280px
   触控目标下限 --tap-min:44px：组件层一律写 var(--tap-min)（即 min-height:44px）。
   动画只允许 background-color / color / border-color / opacity /
   transform / box-shadow 参与过渡；禁止 width / height / top / left / margin。
   ========================================================================== */

/* ============================================================================
   分区一 · 工艺令牌层
   ========================================================================== */
:root {
  color-scheme: light;

  /* -- 圆角 · 6 级 -----------------------------------------------------------
     xs：徽章 / chip / .table-action；sm：按钮 / 输入框 / 导航项；
     md：卡片 / 面板 / 余额区；lg：dialog / bottom sheet；xl：登录卡；
     full：胶囊与开关。50% 只留给真圆（头像、spinner），方向性圆角保留复合字面值。 */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;
  --r-agent-panel: 18px;

  /* -- 间距 · 4px 栅格 9 级（组件层 padding / margin / gap 一律取自本级） ------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* -- 字号 · 8 级（全站最小 12px，禁止出现更小的正文字号） -------------------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  /* -- 行高 · 3 级 ------------------------------------------------------------ */
  --lh-tight: 1.35;   /* 标题 */
  --lh-normal: 1.6;   /* 正文 */
  --lh-loose: 1.75;   /* 长文本 */

  /* -- 字重 · 4 级（650 / 750 / 800 一律退役） --------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* -- 线宽（组件层唯一的边线 px 来源，随本层令牌化） --------------------------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* -- 中性灰阶（slate 系，0 到 900 共 12 档） ---------------------------------- */
  --n-0: #ffffff;
  --n-25: #fbfcfe;
  --n-50: #f6f8fb;
  --n-100: #eef2f7;
  --n-200: #e2e8f0;
  --n-300: #cbd5e1;
  --n-400: #94a3b8;
  --n-500: #64748b;
  --n-600: #475569;
  --n-700: #334155;
  --n-800: #1e293b;
  --n-900: #0f172a;

  /* -- 语义别名（端主题层只允许覆盖这一层） ------------------------------------- */
  --bg: var(--n-50);                /* 页面底色 */
  --surface: var(--n-0);            /* 卡片 / 面板 */
  --surface-muted: var(--n-25);     /* 弱底（表头 / 步骤卡） */
  --surface-sunken: var(--n-100);   /* 凹陷（次按钮 / 状态底） */
  --surface-inverse: var(--n-900);  /* 反色面（侧栏 / 金额块），恒为深色 */
  --line: var(--n-200);             /* 常规分隔线 */
  --line-strong: var(--n-300);      /* 强分隔 / 输入框描边 */
  --ink: var(--n-800);              /* 主文字 */
  --ink-secondary: var(--n-600);    /* 次级文字 / 表头 */
  --muted: var(--n-500);            /* 弱化文字 */
  --hint: var(--n-500);             /* 提示文字 */

  /* -- 语义状态色（Element UI 蓝绿黄红残留一律改用本组） ------------------------ */
  --danger: #c62f3f;
  --danger-soft: #fdeced;
  --danger-line: #f5c2c7;
  --warning: #96690a;
  --warning-soft: #fdf3d9;
  --warning-line: #efd28b;
  --success: #157347;
  --success-soft: #e7f6ee;
  --success-line: #a8ddc5;
  --info: #1f6feb;
  --info-soft: #e8f1fd;

  /* -- 品牌族默认值（端主题层可整体覆盖；默认 = 聚流蓝） ------------------------ */
  --brand: #3157d5;
  --brand-ink: #ffffff;
  --brand-hover: #2444b4;
  --brand-active: #1d3a99;
  --brand-soft: #eaf0ff;
  --brand-line: color-mix(in srgb, var(--brand) 25%, var(--line));

  /* -- 海拔 · 5 级 -------------------------------------------------------------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --elev-2: 0 4px 12px rgba(15, 23, 42, .07);
  --elev-3: 0 12px 32px rgba(15, 23, 42, .11);
  --elev-overlay: 0 24px 80px rgba(13, 25, 50, .28);

  /* -- 动效 ---------------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* -- 交互与无障碍 --------------------------------------------------------------- */
  --tap-min: 44px;
  --focus-ring-width: 3px;
  --focus-ring: var(--focus-ring-width) solid color-mix(in srgb, var(--brand) 32%, transparent);

  /* -- 字体族（删除 Windows 独有的 Bahnschrift / DengXian 作首选） ---------------- */
  --font-sans: "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-num: ui-monospace, "SF Mono", "Roboto Mono", "Cascadia Mono", Consolas, monospace;

  /* -- 兼容别名（旧 JS / HTML / CSS 仍引用这些名字，必须保留以防断链） ------------- */
  --primary: var(--brand);
  --primary-ink: var(--brand-ink);
  --primary-soft: var(--brand-soft);
  --panel: var(--surface);
  --shadow: var(--elev-1);
  --font-body: var(--font-sans);
}

/* ============================================================================
   分区二 · 基础组件层（只引用令牌；类名与既有 DOM / 测试契约保持一致）
   ========================================================================== */

/* -- 基础重置与文档底座 -------------------------------------------------------- */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: var(--fs-base)/var(--lh-normal) var(--font-sans); }
h1, h2, .brand { font-family: var(--font-display); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
/* 键盘焦点环：按钮与表单控件统一走 --focus-ring，链接同样受益 */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* -- 组件 1：按钮族（.primary/.secondary/.danger/.table-action/.btn-ghost）------
   五态齐全：hover / active / focus-visible / disabled / is-busy。 */
.primary,
.secondary,
.danger,
.table-action,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  font-weight: var(--fw-bold);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}
.primary { color: var(--brand-ink); background: var(--brand); }
.primary:hover { background: var(--brand-hover); }
.primary:active { background: var(--brand-active); transform: translateY(1px); }
.secondary { color: var(--ink); background: var(--surface-sunken); }
.secondary:hover { background: var(--line); }
.secondary:active { background: var(--line-strong); transform: translateY(1px); }
.danger { color: var(--n-0); background: var(--danger); }
.danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--n-900)); }
.danger:active { background: color-mix(in srgb, var(--danger) 76%, var(--n-900)); transform: translateY(1px); }
/* 幽灵按钮：透明底 + 品牌色文字，用于次级行动入口 */
.btn-ghost { color: var(--brand); background: transparent; }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-ghost:active { background: color-mix(in srgb, var(--brand) 24%, var(--surface)); transform: translateY(1px); }
/* 表格内行动按钮：chip 化（圆角取 --r-xs，内距取紧凑档） */
.table-action {
  min-height: var(--tap-min);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-xs);
  color: var(--brand);
  background: var(--brand-soft);
}
.table-action:hover { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
.table-action:active { background: color-mix(in srgb, var(--brand) 28%, var(--surface)); transform: translateY(1px); }
.table-action.danger { color: var(--danger); background: var(--danger-soft); }
.table-action.danger:hover { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.table-action.danger:active { background: color-mix(in srgb, var(--danger) 26%, var(--surface)); transform: translateY(1px); }
/* 禁用态：降透明度 + 禁用光标（同时覆盖原生按钮与链接式按钮） */
button:disabled, .primary:disabled, .secondary:disabled, .danger:disabled, .table-action:disabled, .btn-ghost:disabled {
  cursor: not-allowed;
  opacity: .55;
}
/* 忙碌态：内嵌 spinner（颜色跟随文字；端主题层可整体覆盖尺寸与动画） */
.is-busy { pointer-events: none; }
.is-busy::after {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: var(--bw-2) solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

/* -- 组件 2：卡片 / 面板 --------------------------------------------------------- */
.card,
.panel {
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--elev-1);
}
.card { padding: var(--s-4); }
.card small { color: var(--muted); }
.card strong {
  display: block; margin-top: var(--s-1); font-size: var(--fs-xl);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.card.balance-primary { grid-column: span 2; border-color: var(--brand-line); background: var(--brand-soft); }
.card.balance-primary strong { font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); }
.panel { margin-bottom: var(--s-4); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4); border-bottom: var(--bw-1) solid var(--line);
}
.panel-head h2 { margin: 0; font-size: var(--fs-md); }
.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.toolbar select { width: auto; min-width: 120px; }
.cards {
  display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-4);
}

/* -- 组件 3：表单 ----------------------------------------------------------------- */
label {
  display: grid; gap: var(--s-2); margin: var(--s-4) 0;
  color: var(--ink-secondary); font-weight: var(--fw-semibold);
}
input,
select,
textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  border: var(--bw-1) solid var(--line-strong);
  border-radius: var(--r-sm);
  outline: none;
  color: var(--ink);
  background: var(--surface);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
/* 焦点：焦点环来自全局 :focus-visible 规则，这里补充描边变色 */
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand); }
/* 错误态钩子：表单校验方对控件置 aria-invalid 即可点亮 */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { min-height: 96px; resize: vertical; }
/* 选择控件不继承文本输入框的整行宽度和最小高度。 */
input:is([type="checkbox"],[type="radio"]){width:20px;height:20px;min-height:0;padding:0;flex-shrink:0;accent-color:var(--brand);cursor:pointer}
.form-toggle{display:grid;grid-template-columns:1fr auto;align-items:center;min-height:var(--tap-min);gap:var(--s-2) var(--s-4);margin:var(--s-2) 0;padding:var(--s-2) 0;font-weight:var(--fw-medium);color:var(--ink)}
.form-toggle small{grid-column:1/-1;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
.form-toggle input[role="switch"]{appearance:none;width:44px;height:26px;min-height:0;border:var(--bw-1) solid var(--line-strong);border-radius:var(--r-full);background:var(--line-strong);position:relative}
.form-toggle input[role="switch"]::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--r-full);background:var(--surface);transition:transform var(--dur-fast) var(--ease-standard)}
.form-toggle input[role="switch"]:checked{background:var(--brand);border-color:var(--brand-line)}
.form-toggle input[role="switch"]:checked::before{transform:translateX(18px);background:var(--brand-ink)}
.form-toggle input:disabled{cursor:not-allowed;opacity:.55}
.form-choice-group{border:0;padding:0;margin:var(--s-4) 0;min-width:0}
.form-choice-group legend{font-weight:var(--fw-medium);color:var(--ink);margin-bottom:var(--s-2)}
.form-choice-row{display:flex;align-items:center;gap:var(--s-3);min-height:48px;margin:var(--s-2) 0;padding:var(--s-3);border:var(--bw-1) solid var(--line);border-radius:var(--r-md);background:var(--surface-muted);font-weight:var(--fw-regular);cursor:pointer}
.form-choice-row:has(input:checked){background:var(--brand-soft);border-color:var(--brand-line)}
.form-choice-row span{overflow-wrap:anywhere;color:var(--ink)}
.form-fixed{display:flex;justify-content:space-between;align-items:center;min-height:var(--tap-min);font-weight:var(--fw-medium)}
.form-fixed strong{color:var(--ink);font-weight:var(--fw-medium)}
.form-context{color:var(--muted);font-size:var(--fs-sm);margin:var(--s-3) 0}
.error { min-height: var(--s-5); color: var(--danger); font-size: var(--fs-sm); }

/* -- 组件 4：原生 dialog ----------------------------------------------------------- */
dialog {
  width: min(34rem, calc(100% - var(--s-8)));
  max-height: calc(100vh - var(--s-8));
  padding: 0; border: 0; border-radius: var(--r-lg);
  color: var(--ink); background: var(--surface);
  box-shadow: var(--elev-overlay);
}
dialog::backdrop { background: color-mix(in srgb, var(--surface-inverse) 55%, transparent); }
dialog form > header,
dialog footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); border-bottom: var(--bw-1) solid var(--line);
}
dialog form > header h2 { margin: 0; font-size: var(--fs-lg); }
dialog form > header button {
  min-width: var(--tap-min); min-height: var(--tap-min); border: 0;
  color: var(--muted); background: transparent; font-size: var(--fs-2xl);
  transition: color var(--dur-fast) var(--ease-standard);
}
dialog form > header button:hover { color: var(--ink); }
#dialogFields { max-height: 60vh; overflow: auto; padding: var(--s-1) var(--s-5); }
#detailFields { max-height: 65vh; overflow: auto; padding: var(--s-2) var(--s-5) var(--s-4); }
.detail-row { padding: var(--s-2) 0; border-bottom: var(--bw-1) solid var(--line); }
.detail-row small { display: block; margin-bottom: var(--s-1); color: var(--muted); }
.detail-row pre { margin: 0; white-space: pre-wrap; word-break: break-all; font: inherit; }
dialog footer { justify-content: flex-end; gap: var(--s-2); border-top: var(--bw-1) solid var(--line); border-bottom: 0; }
.confirmation-dialog { width: min(28rem, calc(100% - var(--s-8))); }
.risk-symbol { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: var(--n-0); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1; }
.status.order-risk { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--danger); background: var(--danger-soft); border: var(--bw-1) solid var(--danger); font-weight: var(--fw-semibold); white-space: nowrap; }
.status.order-risk .risk-symbol { width: 20px; height: 20px; }
.order-risk-notice, .confirmation-risk { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-inline-start: 4px solid var(--danger); background: var(--danger-soft); color: var(--ink); }
.order-risk-notice strong { display: block; font-size: var(--fs-md); }
.order-risk-notice p { margin: var(--s-2) 0 0; line-height: var(--lh-normal); }
.confirmation-dialog .confirmation-risk { margin: var(--s-5); }
.confirmation-dialog .confirmation-risk p { padding: 0; }
.confirmation-dialog p { margin: 0; padding: var(--s-5); white-space: pre-line; line-height: var(--lh-normal); overflow-wrap: anywhere; }

/* -- 组件 5：表格 ------------------------------------------------------------------- */
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td {
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw-1) solid var(--line); text-align: left;
}
th {
  color: var(--ink-secondary); background: var(--surface-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
tbody tr { transition: background-color var(--dur-fast) var(--ease-standard); }
tbody tr:hover { background: var(--surface-muted); }

/* -- 组件 6：通知分级（基础=警示，ok=成功，warn=警示，bad=危险） ---------------------- */
.notice {
  margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  border: var(--bw-1) solid var(--warning-line);
  color: var(--warning); background: var(--warning-soft);
}
.notice.ok { border-color: var(--success-line); color: var(--success); background: var(--success-soft); }
.notice.warn { border-color: var(--warning-line); color: var(--warning); background: var(--warning-soft); }
.notice.bad { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
/* toast 宿主（business-app.js toast() 惰性创建，脱离文档流的浮层容器）：
   z-index 120 不与既有层冲突（business 移动侧栏 20 / agent 45·50·60 / merchant 20；
   原生 dialog 走 top layer 不参与比较） */
.toast-host {
  position: fixed; top: var(--s-4); right: var(--s-4); z-index: 120;
  display: grid; gap: var(--s-2);
  width: min(360px, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast-host .notice { margin-bottom: 0; pointer-events: auto; }

/* -- 组件 7：空态 / 加载态 -------------------------------------------------------------
   图标位沿用 agent 端验证过的 mask 实践：真实 vendor 图标文件 + currentColor 上色，
   全站禁用内联 SVG 数据 URI。 */
.empty,
.loading {
  padding: var(--s-12) var(--s-5);
  color: var(--muted);
  text-align: center;
}
.empty { display: grid; justify-items: center; gap: var(--s-2); }
.empty::before {
  content: ""; display: block;
  width: var(--s-12); height: var(--s-12);
  color: var(--n-300); background: currentColor;
  mask: url("/vendor/bootstrap-icons-1.13.1/receipt.svg") center/contain no-repeat;
}
.empty strong { color: var(--ink-secondary); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.empty p { margin: 0; }
/* 独立 spinner（圆形，50% 只留给真圆） */
.spinner {
  display: inline-block; width: var(--s-6); height: var(--s-6); border-radius: 50%;
  border: var(--bw-2) solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: spin 800ms linear infinite;
}
/* 骨架行：滑光动画走 transform，不触碰布局属性 */
.skeleton-row {
  position: relative; overflow: hidden; height: var(--s-4);
  margin: var(--s-2) 0; border-radius: var(--r-xs); background: var(--surface-sunken);
}
.skeleton-row::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--n-0) 65%, transparent), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
/* 全站唯一的旋转 / 滑光关键帧副本 */
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes shimmer { to { transform: translateX(100%); } }

/* -- 保留 / 迁移：登录壳 ---------------------------------------------------------------- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6); }
.login-card {
  width: min(432px, 100%); padding: var(--s-10); border-radius: var(--r-xl);
  border: var(--bw-1) solid var(--line);
  background: var(--surface); box-shadow: var(--elev-3);
}
.login-card h1 { margin: var(--s-4) 0 var(--s-1); text-align: center; font-size: var(--fs-2xl); }
.login-card > p { margin: 0 0 var(--s-6); color: var(--muted); text-align: center; }
.login-card .eyebrow { margin: var(--s-4) 0 0; text-align: center; }
.login-card .primary { width: 100%; min-height: calc(var(--tap-min) + var(--s-1)); }
.login-logo { display: block; width: 80px; height: 80px; margin: 0 auto; border-radius: var(--r-xl); }
.login-note { display: block; margin-top: var(--s-4); color: var(--muted); text-align: center; }
.first-password-dialog {
  width: min(432px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: var(--r-xl);
  color: var(--ink); background: var(--surface); overflow: auto;
}
.first-password-dialog::backdrop { background: rgb(15 23 42 / 28%); }
.first-password-dialog .login-card { width: 100%; box-shadow: none; }
.first-password-dialog h1 { margin: 0 0 var(--s-6); }
.first-password-dialog small { color: var(--muted); font-weight: var(--fw-regular); }
.first-password-logout {
  display: block; width: 100%; min-height: var(--tap-min); margin-top: var(--s-2);
  border: 0; border-radius: var(--r-md); background: transparent;
  color: var(--ink-secondary); font: inherit; cursor: pointer;
}
.first-password-logout:hover { background: var(--surface-sunken); }
.merchant-mark,
.brand span {
  display: grid; place-items: center;
  color: var(--n-0); background: var(--brand); font-weight: var(--fw-bold);
}
.merchant-mark { width: 58px; height: 58px; margin: auto; border-radius: var(--r-lg); font-size: var(--fs-2xl); }

/* -- 保留 / 迁移：应用壳与导航 ------------------------------------------------------------ */
.app { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
aside {
  position: sticky; top: 0; height: 100vh; padding: var(--s-6) var(--s-4);
  color: var(--n-0); background: var(--surface-inverse);
}
.brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-6); }
.brand img,
.brand span {
  width: 44px; height: 44px; border-radius: var(--r-md); object-fit: cover;
}
.brand img { background: var(--n-0); }
.brand strong { display: block; font-size: var(--fs-lg); }
.brand small { display: block; color: var(--n-400); }
nav { display: grid; gap: var(--s-1); }
nav button,
.logout {
  width: 100%; min-height: var(--tap-min); padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm); color: var(--n-300);
  background: transparent; text-align: left; font-weight: var(--fw-semibold);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
nav button:hover,
nav button.active {
  color: var(--n-0);
  background: color-mix(in srgb, var(--n-0) 12%, transparent);
}
.logout {
  position: absolute; bottom: var(--s-5); left: var(--s-4);
  width: calc(100% - var(--s-8)); color: var(--danger-line);
}

/* -- 保留 / 迁移：工作区与页眉 -------------------------------------------------------------- */
.workspace { min-width: 0; padding: var(--s-6) var(--s-8); }
.workspace > header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-5);
}
.workspace h1 { margin: 0; font-size: var(--fs-2xl); }
.workspace header p:not(.eyebrow) { margin: var(--s-1) 0 0; color: var(--muted); }
/* 眉题：去掉历史 !important 与 11px 越界字号，回归令牌 */
.eyebrow {
  margin: 0 0 var(--s-1); color: var(--brand); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); letter-spacing: .13em; text-transform: uppercase;
}

/* -- 保留 / 迁移：状态徽章与零散工具类 --------------------------------------------------------- */
.status {
  display: inline-block; padding: var(--s-1) var(--s-2); border-radius: var(--r-full);
  color: var(--ink-secondary); background: var(--surface-sunken); font-size: var(--fs-xs);
}
.status.ok { color: var(--success); background: var(--success-soft); }
.status.warn { color: var(--warning); background: var(--warning-soft); }
.status.bad { color: var(--danger); background: var(--danger-soft); }
.actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.positive { color: var(--success); }
.negative { color: var(--danger); }
.money {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
}
.doc-download {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-weight: var(--fw-bold); text-decoration: none;
}
.collection-verification {
  display: grid; justify-items: start; gap: var(--s-1); min-width: 150px;
}
.collection-verification small {
  max-width: 240px; color: var(--muted); line-height: var(--lh-normal); white-space: normal;
}

/* -- 保留 / 迁移：充值视图 ----------------------------------------------------------------------- */
.recharge-body { display: grid; gap: var(--s-4); padding: var(--s-4); }
.recharge-lead { margin: 0; color: var(--muted); }
.recharge-countdown { color: var(--ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.recharge-amount {
  padding: var(--s-4); border-radius: var(--r-md); text-align: center;
  color: var(--n-0); background: var(--surface-inverse);
}
.recharge-amount small { display: block; color: var(--n-300); }
.recharge-amount strong {
  display: block; margin-top: var(--s-1);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
  font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.recharge-warning {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: var(--fw-bold);
  border: var(--bw-1) solid var(--warning-line);
  color: var(--warning); background: var(--warning-soft); white-space: pre-line;
}
.recharge-qr { display: grid; justify-items: center; gap: var(--s-2); }
.recharge-qr img {
  display: block; width: 216px; height: 216px; max-width: 100%;
  border: var(--s-2) solid var(--n-0); border-radius: var(--r-sm);
}
.recharge-qr code {
  max-width: 100%; padding: var(--s-2); border-radius: var(--r-sm);
  background: var(--surface-sunken); font-family: var(--font-num);
  overflow-wrap: anywhere; text-align: center;
}
.recharge-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.recharge-actions .table-action { min-height: var(--tap-min); flex: 1 1 170px; }

/* -- 保留 / 迁移：买 U 教程与官方指引 --------------------------------------------------------------- */
/* 容器类（DOM 为 section.panel.buy-usdt-guide，视觉跟随 .panel，显式占满面板宽） */
.buy-usdt-guide { width: 100%; }
.buy-usdt-guide-body { display: grid; gap: var(--s-4); padding: var(--s-4); }
.buy-usdt-jump {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); width: max-content; max-width: 100%;
  color: var(--brand); font-weight: var(--fw-bold); text-underline-offset: 3px;
}
.buy-usdt-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3);
  margin: 0; padding: 0; list-style: none; counter-reset: guide;
}
.buy-usdt-steps li {
  display: grid; align-content: start; gap: var(--s-2); min-width: 0;
  padding: var(--s-3); border-radius: var(--r-md);
  border: var(--bw-1) solid var(--line); background: var(--surface-muted);
}
.buy-usdt-step-visual {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--r-lg); color: var(--brand); background: var(--brand-soft);
}
.buy-usdt-step-visual svg {
  width: 34px; height: 34px; fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.buy-usdt-steps small { display: block; color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.buy-usdt-steps strong { display: block; margin-top: var(--s-1); font-size: var(--fs-md); }
.buy-usdt-steps p { margin: var(--s-1) 0 0; color: var(--muted); }
.official-guide-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
}
.official-guide-card {
  padding: var(--s-3); border: var(--bw-1) solid var(--line); border-radius: var(--r-md);
}
.official-guide-card h3 { margin: 0 0 var(--s-2); font-size: var(--fs-md); }
.official-guide-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
}
.official-guide-link {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--brand); background: var(--brand-soft);
  font-weight: var(--fw-bold); text-align: center; text-decoration: none;
}
.official-guide-link:hover,
.official-guide-link:focus-visible {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
}
.buy-usdt-disclaimer { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ============================================================================
   响应式与无障碍（断点只取顶部速记的字面量：640 / 768 / 1024 / 1280）
   ========================================================================== */

/* 减少动画偏好：全站动画与过渡立即失能（字面量被契约测试锁定，必须保留） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* lg 及以下：四列卡片收两列，侧栏收窄 */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .buy-usdt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app { grid-template-columns: 184px minmax(0, 1fr); }
  aside { padding: var(--s-4) var(--s-3); }
  .workspace { padding: var(--s-5); }
}

/* sm 及以下：侧栏转为底部导航条 */
@media (max-width: 640px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .login-shell { padding: var(--s-4); }
  .login-card { padding: var(--s-6) var(--s-5); }
  .app { display: block; }
  .app aside {
    position: fixed; z-index: 20; right: 0; bottom: 0; left: 0;
    top: auto; height: auto; padding: var(--s-2);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
    border-top: var(--bw-1) solid var(--line); background: var(--surface);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
  }
  .brand,
  .logout { display: none; }
  nav { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button {
    flex: 1 0 auto; width: auto; min-width: 72px; padding: var(--s-2);
    color: var(--muted); text-align: center; font-size: var(--fs-xs); white-space: nowrap;
  }
  nav button:hover,
  nav button.active { color: var(--brand); background: var(--brand-soft); }
  .workspace { padding: var(--s-4) var(--s-3); }
  .workspace > header { align-items: flex-start; }
  .workspace h1 { font-size: var(--fs-xl); }
  .cards { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .card { padding: var(--s-3); }
  .card strong { font-size: var(--fs-lg); }
  .panel-head { flex-direction: column; align-items: flex-start; }
  .panel-head .toolbar { width: 100%; }
  .panel-head .toolbar > * { flex: 1; }
  .actions { min-width: 180px; }
  .buy-usdt-steps,
  .official-guide-grid,
  .official-guide-links { grid-template-columns: 1fr; }
}

/* 客服前台由代理与商户共用，随各端主题呈现，避免共享结构漏掉样式。 */
.agent-support{padding:var(--s-6);margin-bottom:var(--s-4);background:var(--surface);border-radius:var(--r-lg)}
.service-hours{color:var(--ink-secondary);font-size:var(--fs-base);line-height:var(--lh-normal);padding-block:var(--s-3)}
.support-toolbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding-bottom:var(--s-3);border-bottom:var(--bw-1) solid var(--line)}
.support-toolbar h2{margin-right:auto;font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
.support-toolbar select{max-width:280px}
.support-conversation{min-height:240px;max-height:440px;overflow-y:auto;padding:var(--s-4) 0;overscroll-behavior:contain}
.support-message{max-width:82%;width:fit-content;margin-bottom:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-muted)}
.support-message.is-own{margin-left:auto;background:var(--brand-soft)}
.support-message small{color:var(--muted);font-size:var(--fs-sm)}
.support-message p{margin:var(--s-2) 0 0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;line-height:var(--lh-normal)}
.support-connection{min-height:var(--s-5);color:var(--warning);font-size:var(--fs-sm)}
.support-composer{display:grid;grid-template-columns:1fr auto;gap:var(--s-3);border-top:var(--bw-1) solid var(--line);padding-top:var(--s-4)}
.support-composer textarea{grid-column:1/-1;width:100%;resize:vertical;min-height:100px}
.support-composer input{width:100%}
.support-composer button{min-width:96px}
@media(max-width:640px){
  .agent-support{padding:var(--s-4)}
  .support-toolbar select{max-width:100%;flex:1}
  .support-message{max-width:92%}
  .support-composer{grid-template-columns:1fr}
  .support-composer button{width:100%}
}
/* 商户与管理方身份入口不占业务导航，窄屏允许换行。 */
.workspace > header:has(.account-identity) { flex-wrap: wrap; justify-content: flex-start; gap: 16px; }
.workspace > header:has(.account-identity) > div:has(#viewTitle) { order: -1; margin-right: auto; }
.account-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 16px; min-height: 44px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.account-identity span { font-size: var(--fs-sm); color: var(--muted); }
.account-center { padding: 24px; max-width: 760px; }
.account-center h2 { margin: 0 0 20px; }
.account-facts { margin: 0 0 24px; }
.account-facts > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.account-facts dt { color: var(--muted); }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.api-doc-body { display: block; min-height: 100vh; background: var(--bg); color: var(--ink); }
.api-doc-top { display: flex; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--line); background: var(--surface); }
.api-doc-root { max-width: 1180px; margin: 0 auto; padding: 32px; }
.api-doc-heading { display: block; padding: 0 0 24px; }
.api-doc-heading h1 { font-size: var(--fs-2xl); }
.api-doc-layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 32px; align-items: start; }
.api-doc-nav { display: grid; position: sticky; top: 24px; gap: 4px; }
.api-doc-nav a { padding: 12px; border-radius: var(--r-md); color: var(--ink-secondary); text-decoration: none; }
.api-doc-nav a:hover, .api-doc-nav a:focus-visible { background: var(--surface); color: var(--brand); }
.api-doc-article { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.api-doc-article section { scroll-margin-top: 24px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.api-doc-article section:last-child { border-bottom: 0; margin-bottom: 0; }
.api-doc-article h2 { margin: 0 0 20px; font-size: var(--fs-xl); }
.api-doc-article p { line-height: 1.8; overflow-wrap: anywhere; }
.api-doc-article pre { padding: 16px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.7; }
.api-doc-table { overflow-x: auto; margin: 20px 0; }
.api-doc-table table { width: 100%; table-layout: fixed; }
.api-doc-table th, .api-doc-table td { white-space: normal; overflow-wrap: anywhere; padding: 12px; vertical-align: top; text-align: left; }
.api-doc-table th:first-child { width: 38%; }
@media (max-width: 768px) {
  .api-doc-top, .api-doc-root { padding: 16px; }
  .api-doc-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .api-doc-nav { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .api-doc-article { padding: 16px; }
}