/* ============================================================================
   驿讯 · 设计系统（方案 A：物流后台风）
   ----------------------------------------------------------------------------
   口径：主管 2026-09-17 选定「A 物流后台风」+ 手机/电脑自识别切换
     · 桌面端：深色顶栏 + 横向导航 + 完整信息（密集表格）
     · 手机端：紧凑标题栏 + **底部 tab**（核心功能）+ 只保留核心信息
   落地：改这一个文件 = 全站页面统一生效。规范详见 docs/UI设计规范-v0.2.md
   ========================================================================== */

:root {
  /* ---- 主色（方案 A） ---- */
  --pri: #1e4e8c;          /* 主色：按钮 / 激活态 / 链接 */
  --pri-hover: #173d6e;
  --pri-d: #14335c;        /* 深色栏（顶栏 / 侧栏） */
  --pri-soft: #e8f0fa;     /* 浅蓝底 */
  --pri-line: #cddcef;

  /* 🔴 兼容别名：顾客端 m.css 与旧 H5 端 h5.css 仍在用旧变量名。
     改名时必须留别名，否则颜色会静默失效（2026-09-17 踩过：顾客端头部不可读）。 */
  --brand: var(--pri);
  --brand-soft: var(--pri-soft);
  --brand-line: var(--pri-line);

  /* ---- 中性 ---- */
  --ink: #1b1f24;
  --ink-2: #5b636d;
  --ink-3: #6b7480;      /* 对比度已校正：4.37:1 on 页面底 */
  --line: #e2e6ec;
  --line-2: #eef1f5;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-2: #f7f9fb;

  /* ---- 状态色（低饱和） ---- */
  --ok: #1f7a45;   --ok-soft: #e7f5ec;
  --warn: #96601a; --warn-soft: #fdf3e3;
  --bad: #b42318;  --bad-soft: #fdeceb;
  --muted-soft: #f1f3f5;

  /* ---- 动效（克制、统一：菜单与按钮 150ms，浮层面板 200ms） ---- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---- 形状 ---- */
  --radius: 4px;
  --shadow: 0 1px 2px rgba(20, 30, 45, 0.05), 0 4px 14px rgba(20, 30, 45, 0.06);

  /* ---- 排版 ---- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- 间距与尺寸 ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --topbar-h: 48px;
  --tabbar-h: 56px;        /* 手机端底部 tab 高度 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hint { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.meta { color: var(--ink-3); font-size: 12px; }
.note { color: var(--ink-2); font-size: 12.5px; }
.sub { color: var(--ink-3); font-size: 12.5px; }
.sev { font-weight: 600; }
.risk { color: var(--bad); font-weight: 600; }
.muted { color: var(--ink-3); font-size: 12px; }

/* ============================ 顶栏 / 导航 / 底部 tab ============================ */

.topbar {
  background: var(--pri-d);
  color: #fff;
  padding: 0 var(--sp-5);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 15px;
  white-space: nowrap;
}

.brand small { color: #a9c0dd; font-weight: 400; margin-left: var(--sp-2); font-size: 12.5px; }

/* 桌面：横向导航（激活=白底高亮块） */
.nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: var(--topbar-h);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 2px;
}

.nav::-webkit-scrollbar { display: none; }

.nav a,
.navlink {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  color: #c6d6ea;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }

.nav a.active,
.navlink.active {
  color: #fff;
  font-weight: 600;
  background: var(--pri);
  border-bottom-color: #7fa8d8;
}

/* 菜单分组标签（业务菜单与系统管理分开） */
.nav .nav-group {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  color: #8ea9c9;
  font-size: 12px;
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  margin-left: var(--sp-2);
}

/* 会话栏（右上角，深色底上的浅色文字） */
.sessionbar {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 12.5px;
  color: #c6d6ea;
}

.sessionbar-who { color: #fff; font-weight: 600; }
.sessionbar-scope {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #b9cbe2;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 2px 6px;
}
.sessionbar-link { color: #a9c9ee; }
.sessionbar .btn-ghost { height: 28px; padding: 0 10px; font-size: 12.5px; background: transparent; color: #dbe6f5; border-color: rgba(255, 255, 255, 0.3); }
.sessionbar .btn-ghost:hover { color: #fff; border-color: #fff; }
.sessionbar .btn-ghost { transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }

/* 页内用户条（旧页面用，已并入顶栏，保留样式兜底） */
#sessionbar { margin-bottom: var(--sp-4); }
#sessionbar .sessionbar {
  justify-content: flex-end;
  color: var(--ink-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
#sessionbar .sessionbar-who { color: var(--ink); }
#sessionbar .sessionbar-scope { background: var(--muted-soft); color: var(--ink-3); }
#sessionbar .sessionbar-link { color: var(--pri); }
#sessionbar .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }

/* ============================ 页面骨架 ============================ */

.wrap { max-width: 1240px; margin: 0 auto; padding: var(--sp-5); }
.wrap-narrow { max-width: 620px; margin: 0 auto; padding: var(--sp-4); }

.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.pagehead-extra { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.page-title { font-size: 19px; font-weight: 700; margin: 0 0 var(--sp-1); color: var(--ink); letter-spacing: 0.2px; }
.page-sub { color: var(--ink-3); margin: 0; font-size: 12.5px; line-height: 1.7; }

.footer {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

.kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--pri);
  background: var(--pri-soft);
  border: 1px solid var(--pri-line);
  border-radius: 3px;
  padding: 1px 7px;
  margin-bottom: var(--sp-2);
}

/* ============================ 卡片 / 面板 ============================ */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.panel-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }

.grid { display: grid; gap: var(--sp-3); }
.grid-2 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.detail { color: var(--ink-2); font-size: 12.5px; }

/* ============================ 指标卡 ============================ */

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}

.metric-label { color: var(--ink-3); font-size: 12px; margin-bottom: var(--sp-1); }
.metric-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--pri-d); }
.metric-note { color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }

/* ============================ 表格（桌面=完整信息） ============================ */

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

th {
  color: #43526b;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  background: #eef2f7;
  text-align: left;
  white-space: nowrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  color: var(--ink);
}

tbody tr:nth-child(even) td { background: #fafbfc; }
tbody tr td { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover td { background: var(--pri-soft); }

.table-scroll {
  overflow: auto;
  max-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.table-scroll table { border-collapse: separate; border-spacing: 0; }
.table-scroll th { position: sticky; top: 0; z-index: 1; }

/* ============================ 标签 / 状态 ============================ */

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 2px;
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tag-ok { background: var(--ok-soft); color: var(--ok); border-color: #c9e6d4; }
.tag-warn { background: var(--warn-soft); color: var(--warn); border-color: #f0dcb8; }
.tag-bad { background: var(--bad-soft); color: var(--bad); border-color: #eecfca; }
.tag-muted { background: var(--muted-soft); color: var(--ink-3); border-color: var(--line); }
.tag-test { background: var(--pri-soft); color: var(--pri); border-color: var(--pri-line); }
.tag-replay { background: #f1eef7; color: #5b4a80; border-color: #e0d9ec; }
.tag-real { background: #e7f5ec; color: var(--ok); border-color: #c9e6d4; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 11.5px; background: var(--muted-soft); color: var(--ink-2); border: 1px solid var(--line); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.dot-on { background: #2f8f5b; }
.dot-off { background: #b9544a; }
.dot-warn { background: #c08a2a; }
.dot-idle { background: #a9afaa; }

.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin: var(--sp-3) 0 0; }

/* ============================ 空态 / 提示 ============================ */

.empty { padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--ink-3); }
.empty-title { font-weight: 600; color: var(--ink-2); }
.empty-hint { font-size: 12.5px; margin-top: var(--sp-2); }

.todo { border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel-2); padding: var(--sp-5); text-align: center; }
.todo-title { font-weight: 700; color: var(--warn); }
.todo-sub { margin-top: var(--sp-2); color: var(--ink-2); }
.todo-note { margin-top: var(--sp-3); font-size: 12.5px; color: var(--ink-3); }

.banner {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: 12.5px;
  line-height: 1.75;
  background: var(--panel-2);
  color: var(--ink-2);
}

.banner-info { background: var(--pri-soft); border-color: var(--pri-line); border-left-color: var(--pri); color: #1c3f70; }
.banner-warn { background: var(--warn-soft); border-color: #f0dcb8; border-left-color: #c08a2a; color: #6b4f16; }

.alert-box { border: 1px solid #eecfca; border-left: 3px solid var(--bad); border-radius: var(--radius); background: var(--bad-soft); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.alert-code { font-family: var(--mono); font-size: 11.5px; color: var(--bad); font-weight: 700; }
.alert-msg { margin-top: var(--sp-1); color: var(--ink); }
.alert-hint { margin-top: var(--sp-2); font-size: 12.5px; color: var(--ink-2); }

.keybar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: 12.5px; }
.keybar-label { color: var(--ink-3); }
.keybar-state { color: var(--ink-3); margin-left: auto; }

/* ============================ 按钮 / 表单 ============================ */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

button:hover, .btn:hover { border-color: var(--pri); color: var(--pri); text-decoration: none; }

.btn-primary, button.btn-primary { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn-primary:hover, button.btn-primary:hover { background: var(--pri-hover); border-color: var(--pri-hover); color: #fff; }

.btn-ghost { background: #fff; }
/* 按下反馈：底色轻变，150ms（与 hover 同一 token） */
button:active, .btn:active { background: var(--panel-2); border-color: var(--pri); }
.btn-primary:active, button.btn-primary:active { background: var(--pri-hover); border-color: var(--pri-hover); }
.btn-lg { height: 40px; padding: 0 var(--sp-5); font-size: 14px; }
button[disabled], .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.field { display: block; margin-bottom: var(--sp-4); }
.field > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }

input[type="text"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #ccd3da;
  border-radius: var(--radius);
  padding: 7px 10px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(30, 78, 140, 0.1);
}

/* 浮层/面板出现（「更多」面板等）统一 200ms 上滑淡入 */
@keyframes yx-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.yx-rise { animation: yx-rise var(--dur-base) var(--ease); }

/* 无障碍：用户在系统里关掉动效时，一切静止 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

input[type="checkbox"], input[type="radio"] { width: auto; }

/* ============================ 移动端专用（/m/ 顾客端） ============================ */

.m-body { background: var(--bg); }
.m-top { background: var(--pri-d); color: #fff; padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.m-brand { font-weight: 700; font-size: 17px; letter-spacing: 0.5px; }
.h5-meta { font-size: 12.5px; color: var(--ink-3); margin-top: var(--sp-1); }
.h5-section-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: var(--sp-4) 0 var(--sp-2); }
.h5-big-code { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: 2px; color: var(--pri-d); }
.h5-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.h5-code { font-family: var(--mono); font-weight: 700; color: var(--pri-d); }

.pickup-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.receipt-img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.receipt-placeholder { padding: var(--sp-5); text-align: center; color: var(--ink-3); background: var(--panel-2); border: 1px dashed var(--line); border-radius: var(--radius); font-size: 12.5px; }

/* 🔴 这是**未读数角标**（红点）用的类：display:inline-block + min-width。
 * 千万不要把它加到卡片/容器上 —— 会把整块缩成内容宽度（2026-09-17 顾客端未读通知卡的坑）。
 * 卡片状态请用 .unread-card。 */
.unread { display: inline-block; min-width: 18px; text-align: center; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11.5px; line-height: 18px; }

/* ============================ 演示标识（仅联调） ============================ */

.demo-badge-bar { background: var(--warn-soft); border-bottom: 1px solid #f0dcb8; color: #6b4f16; font-size: 12.5px; padding: 6px var(--sp-5); text-align: center; }
.demo-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; background: var(--warn-soft); color: #6b4f16; border: 1px solid #f0dcb8; font-size: 12px; margin-bottom: var(--sp-4); }

.nav-cross-wrap { margin-top: var(--sp-5); }
.nav-cross { display: inline-block; margin-right: var(--sp-3); font-size: 13px; }

/* ============================ 信息密度工具（手机端保留核心） ============================ */

/* 次要列：桌面显示，手机隐藏 */
.col-opt { }
/* 仅桌面 / 仅手机 */
.only-desktop { }
.only-mobile { display: none; }

/* 手机端并列信息压成一行 */
.kv-inline { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; font-size: 12.5px; }

/* ============================ 响应式：≤ 860px 切手机端 ============================ */

/* ============================================================================
   视图模式：自动（默认）/ 手机 / 电脑
   ----------------------------------------------------------------------------
   手机版样式在 style-mobile.css，由 shared/app.js 的 setupViewMode() 控制生效条件：
     自动   → media="(max-width: 860px)"  （按屏幕宽度自适应）
     手机端 → media="all"                 （无视宽度，强制手机版）
     电脑端 → media="not all"             （关闭手机样式，显示完整信息）
   ========================================================================== */

/* 强制电脑端：窄屏下保底宽度，改为横向滚动，避免把表格挤变形 */
html[data-view="desktop"] body {
  min-width: 1080px;
}

/* 顶栏右侧用户区：用户信息 + 视图切换（整改批次 A） */
.topbar-user {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* 视图切换按钮：一个按钮，显示当前模式，点一下切到另一边（无「自动」选项） */
.view-switch {
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  background: transparent;
  color: #dbe6f5;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.view-switch:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* 「站点切换」：只列有权限的驿站（批次 F，一人多站） */
.yx-user-box { display: flex; align-items: center; }
.station-switch-wrap { display: inline-flex; align-items: center; gap: 4px; }
.station-switch-wrap .page-sub { color: #c6d6ea; }
.station-switch {
  height: 28px;
  max-width: 160px;
  padding: 0 var(--sp-2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.station-switch:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.station-switch option { color: var(--ink); background: var(--panel); }

/* 没有顶栏的页面（登录页等）：悬浮在右上角 */
.view-switch-floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  background: var(--panel);
  color: var(--ink-2);
  border-color: var(--line);
  box-shadow: 0 2px 10px rgba(20, 30, 45, 0.12);
}

.view-switch-floating:hover { color: var(--pri); border-color: var(--pri); background: var(--panel); }

/* 设备 → 平台账号（采集管理 / 运营中心层级） */
.device-block { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.device-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--panel-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.device-head .grow { flex: 1 1 auto; min-width: 0; }
.device-accounts { padding: var(--sp-3); border-top: 1px solid var(--line); }
.station-block { margin-bottom: var(--sp-4); }

/* ============================ 文档类页面 ============================ */

.doc { max-width: 900px; margin: 0 auto; padding: var(--sp-5); }
.doc h1 { font-size: 21px; font-weight: 700; }
.doc h2 { font-size: 16px; font-weight: 700; margin-top: var(--sp-6); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.doc h3 { font-size: 14px; font-weight: 700; margin-top: var(--sp-5); }
.doc p, .doc li { color: var(--ink-2); line-height: 1.85; }
.doc code { font-family: var(--mono); font-size: 12.5px; background: var(--muted-soft); padding: 1px 5px; border-radius: 2px; }

/* 文档正文补充排版：引用 / 代码块 / 表格 / 列表（/status/ 方案说明页用） */
.doc h4 { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: var(--sp-4) 0 var(--sp-2); }
.doc .doc-back { margin-bottom: var(--sp-3); font-size: 12.5px; }
.doc .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.doc .meta span { font-size: 12px; }
.doc hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
.doc ul, .doc ol { margin: var(--sp-3) 0; padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel-2);
  border-left: 3px solid var(--pri);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-2);
  font-size: 13px;
}
.doc blockquote p { margin: var(--sp-1) 0; font-size: 13px; }
.doc pre {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.doc pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.7; }
.doc .card { margin-bottom: var(--sp-3); }
.doc .callout {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--pri-soft);
  border-left: 3px solid var(--pri);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--pri-d);
  font-size: 13px;
  line-height: 1.8;
}
.doc .doc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 13.5px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.doc .doc-row:last-child { border-bottom: none; }
.doc .doc-row span { color: var(--ink-3); font-size: 12px; }
.doc .table-scroll { margin: var(--sp-4) 0; }

/* ============================ 组件工具类（替代页面行内 style） ============================ */

.yx-field-inline { margin-bottom: 0; }
.yx-between { justify-content: space-between; }
.yx-between-baseline { justify-content: space-between; align-items: baseline; }
.yx-mt-2 { margin-top: var(--sp-2); }
.yx-mt-3 { margin-top: var(--sp-3); }
.yx-mt-4 { margin-top: var(--sp-4); }
.yx-mb-0 { margin-bottom: 0; }
.yx-mb-2 { margin-bottom: var(--sp-2); }
.yx-ml-2 { margin-left: var(--sp-2); }
.yx-w-80 { width: 80px; }
.yx-hidden { display: none; }
.yx-pre-wrap { white-space: pre-wrap; }
.yx-panel-accent { border-left: 3px solid var(--pri); }
.yx-cell-wide { min-width: 260px; }

/* 采集记录「原始字段」展开：等宽、可换行、不撑破表格 */
.raw-json {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  max-height: 320px;
  overflow: auto;
}
.raw-row td { background: var(--panel-2); }

/* 角色权限勾选矩阵 */
.perm-group { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.perm-group:last-child { border-bottom: none; }
.perm-group-title { font-weight: 700; font-size: 13px; margin-bottom: var(--sp-2); }
.perm-item { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--sp-4) var(--sp-2) 0; font-size: 13px; }

/* 「更多」折叠菜单（采集管理行操作；2026-09-17 主管反馈操作按钮太乱） */
.yx-more { display: inline-block; position: relative; vertical-align: top; }
.yx-more > summary { list-style: none; cursor: pointer; display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 13px; color: var(--ink-2); }
.yx-more > summary::-webkit-details-marker { display: none; }
.yx-more[open] > summary { border-color: var(--pri); color: var(--pri); }
.yx-more-body { position: absolute; right: 0; z-index: 30; margin-top: 6px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 20px rgba(20, 51, 92, 0.12); display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.yx-more-body button, .yx-more-body select { width: 100%; }

/* ============================ 绑定管理（批次 J：绑定码卡片 + 弹窗） ============================ */

/* 本站绑定码卡片：左边码与二维码，右边说明 / 链接 / 重置 */
.bindcode { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: flex-start; }
.bindcode-main { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.bindcode-value { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: 8px; color: var(--pri-d); line-height: 1.1; }
.bindcode-qr { width: 148px; height: 148px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.bindcode-qr svg { display: block; width: 100%; height: 100%; }
.bindcode-side { flex: 1 1 280px; min-width: 0; }
.bindcode-desc { color: var(--ink-3); font-size: 12.5px; margin-bottom: var(--sp-2); }
.bindcode-link { font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; word-break: break-all; }

/* 轻量弹窗：确认 / 原因输入（页面用 bindings-ui.js 的 YX.bindDialog 打开） */
.modal-mask { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(15, 20, 25, 0.45); }
.modal { width: 100%; max-width: 420px; padding: var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-3); }
.modal-text { color: var(--ink-2); font-size: 12.5px; line-height: 1.75; margin-bottom: var(--sp-3); }
.modal-error { min-height: 18px; margin-top: var(--sp-2); color: var(--bad); font-size: 12.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }

/* 工具类补位 */
.yx-ml-auto { margin-left: auto; }