/* ui.css — 全站统一样式（阶段 1，2026-11-02）
   五个模块（首页、温哥华/卡加库存、能不能上车、GAZY、仓库任务）共用这一套：颜色、字号、间距、圆角、组件。
   新组件都用 ui- 开头，不跟旧样式冲突；只有挂了这个文件、body 加了 class="ui" 的页面才生效。
   阶段 1 还没有页面挂它。样板页：/ui-kit.html（只在本机看，不上线）。 */

:root {
  /* — 颜色（指令单色板） — */
  --ui-bg: #F8FAFC;          /* 页面背景 */
  --ui-surface: #FFFFFF;     /* 内容区 */
  --ui-surface-2: #F1F5F9;   /* 表头、次要底色 */
  --ui-border: #E2E8F0;      /* 边框 */
  --ui-border-strong: #CBD5E1;
  --ui-title: #0F172A;       /* 标题 */
  --ui-text: #334155;        /* 正文 */
  --ui-muted: #5B6675;       /* 辅助说明：白底 5.8，浅灰底 5.5，都过 4.5 */
  --ui-brand: #0F766E;       /* 主色：主要按钮、选中 */
  --ui-brand-hover: #115E59;
  --ui-brand-press: #134E4A;
  --ui-brand-soft: #F0FDFA;  /* 选中底色 */
  --ui-brand-line: #99F6E4;

  /* — 状态色：底色 + 字色，都配文字或图标 — */
  --ui-danger: #B42318;  --ui-danger-bg: #FEF3F2;  --ui-danger-line: #FECDCA;
  --ui-warn: #8A4B00;    --ui-warn-bg: #FFF6E5;    --ui-warn-line: #FEDF89;
  --ui-ok: #05603A;      --ui-ok-bg: #ECFDF3;      --ui-ok-line: #ABEFC6;
  --ui-info: #1D4ED8;    --ui-info-bg: #EFF6FF;    --ui-info-line: #BFDBFE;
  --ui-neutral: #334155; --ui-neutral-bg: #F1F5F9; --ui-neutral-line: #E2E8F0;

  /* — 字体与字号：6 档 — */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --ui-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ui-fs-xs: 12px;   /* 角标、表头 */
  --ui-fs-sm: 13px;   /* 辅助说明 */
  --ui-fs-md: 14px;   /* 正文、表格 */
  --ui-fs-lg: 16px;   /* 小标题、重要数据 */
  --ui-fs-xl: 20px;   /* 页面标题 */
  --ui-fs-2xl: 24px;  /* 首页标题、大数字 */

  /* — 间距、圆角、高度、阴影 — */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 20px; --ui-s6: 24px; --ui-s8: 32px;
  --ui-r-sm: 6px;   /* 标签、小控件 */
  --ui-r-md: 8px;   /* 按钮、输入框 */
  --ui-r-lg: 12px;  /* 面板、弹窗 */
  --ui-h-sm: 32px; --ui-h-md: 36px; --ui-h-lg: 40px;
  --ui-shadow-pop: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08); /* 只给弹窗、侧边面板 */

  /* — 页面宽度 — */
  --ui-w-data: 1600px;  /* 库存、GAZY、任务 */
  --ui-w-hub: 1280px;   /* 首页 */
  --ui-w-form: 720px;   /* 表单阅读宽度 */
  --ui-gutter: 32px;
  --ui-topbar-h: 56px;
}
@media (max-width: 1279px) { :root { --ui-gutter: 24px; } }
@media (max-width: 719px)  { :root { --ui-gutter: 16px; --ui-topbar-h: 52px; } }

/* ═══ 基础 ═══ */
.ui, .ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
body.ui {
  margin: 0; background: var(--ui-bg); color: var(--ui-text);
  font-family: var(--ui-font); font-size: var(--ui-fs-md); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* 中文标点不落在行首、词不拆开 */
  line-break: strict; word-break: normal; overflow-wrap: break-word;
}
@media (max-width: 719px) { body.ui { font-size: 15px; } }
.ui :focus { outline: none; }
.ui :focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; border-radius: var(--ui-r-sm); }
a { color: var(--ui-brand); text-underline-offset: 3px; }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-font-mono); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ui-sm-only { display: none !important; }
@media (max-width: 719px) { .ui-sm-only { display: revert !important; } }
.ui-copyable { user-select: all; -webkit-user-select: all; cursor: text; }
.ui-muted { color: var(--ui-muted); }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.25em; }
.ui-icon--sm { width: 16px; height: 16px; vertical-align: -3px; }
.ui-icon--lg { width: 24px; height: 24px; }

/* 标题层级：三档就够 */
.ui-h1 { margin: 0; font-size: var(--ui-fs-xl); line-height: 1.3; font-weight: 650; color: var(--ui-title); letter-spacing: -0.01em; }
.ui-h2 { margin: 0; font-size: var(--ui-fs-lg); line-height: 1.4; font-weight: 650; color: var(--ui-title); }
.ui-h3 { margin: 0; font-size: var(--ui-fs-md); line-height: 1.45; font-weight: 600; color: var(--ui-title); }
.ui-sub { margin: 2px 0 0; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-eyebrow { font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-muted); letter-spacing: .02em; }

/* ═══ 页面框架 ═══ */
.ui-page { width: 100%; max-width: calc(var(--ui-w-data) + var(--ui-gutter) * 2); margin: 0 auto; padding: var(--ui-s6) var(--ui-gutter) var(--ui-s8); }
.ui-page--hub { max-width: calc(var(--ui-w-hub) + var(--ui-gutter) * 2); }
.ui-page--form { max-width: calc(var(--ui-w-form) + var(--ui-gutter) * 2); }
.ui-pagehead { display: flex; align-items: flex-end; gap: var(--ui-s4); flex-wrap: wrap; margin-bottom: var(--ui-s5); }
.ui-pagehead > :first-child { flex: 1 1 320px; min-width: 0; }
.ui-pagehead-actions { display: flex; gap: var(--ui-s2); flex-wrap: wrap; align-items: center; }
.ui-crumb { display: flex; align-items: center; gap: 6px; font-size: var(--ui-fs-sm); color: var(--ui-muted); margin-bottom: 4px; }
.ui-crumb a { color: var(--ui-muted); text-decoration: none; }
.ui-crumb a:hover { color: var(--ui-brand); text-decoration: underline; }

/* 两栏：左边摘要、右边列表（GAZY、任务用） */
.ui-split { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: var(--ui-s5); align-items: start; }
.ui-split > .ui-split-side { position: sticky; top: calc(var(--ui-topbar-h) + var(--ui-s4)); }
@media (max-width: 1023px) { .ui-split { grid-template-columns: minmax(0, 1fr); } .ui-split > .ui-split-side { position: static; } }
.ui-grid { display: grid; gap: var(--ui-s4); grid-template-columns: repeat(auto-fill, minmax(var(--ui-grid-min, 240px), 1fr)); }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-s4); }
.ui-row { display: flex; align-items: center; gap: var(--ui-s2); flex-wrap: wrap; }

/* 面板：白底细边，不叠阴影，不套卡片 */
.ui-panel { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); }
.ui-panel-head { display: flex; align-items: center; gap: var(--ui-s3); padding: var(--ui-s3) var(--ui-s4); border-bottom: 1px solid var(--ui-border); min-height: 52px; }
.ui-panel-head > .ui-h2, .ui-panel-head > .ui-h3 { flex: 1; min-width: 0; }
.ui-panel-body { padding: var(--ui-s4); }
.ui-panel-foot { padding: var(--ui-s3) var(--ui-s4); border-top: 1px solid var(--ui-border); display: flex; gap: var(--ui-s2); justify-content: flex-end; }
.ui-divider { height: 1px; background: var(--ui-border); border: 0; margin: var(--ui-s4) 0; }

/* ═══ 页头 + 顶部导航 ═══ */
.ui-topbar { position: sticky; top: 0; z-index: 40; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
.ui-topbar-in { max-width: calc(var(--ui-w-data) + var(--ui-gutter) * 2); margin: 0 auto; padding: 0 var(--ui-gutter); height: var(--ui-topbar-h); display: flex; align-items: center; gap: var(--ui-s5); }
.ui-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ui-title); flex: none; }
/* 11/3 换成用户给的正式 logo（矢量，GFL 三个字母）；span 里的「GFL」留给读屏软件，屏幕上不显示 */
.ui-brand-mark { display: block; flex: none; width: 80px; height: 22px; background: url(/icons/gfl-mark.svg) left center / contain no-repeat; color: transparent; font-size: 0; overflow: hidden; }
.ui-brand-name { font-size: 16px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.ui-nav { display: flex; align-items: stretch; gap: 2px; height: 100%; flex: 1; min-width: 0; }
.ui-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--ui-s3); color: var(--ui-text); text-decoration: none; font-size: var(--ui-fs-md); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.ui-nav-link .ui-icon { width: 18px; height: 18px; color: var(--ui-muted); }
.ui-nav-link:hover { color: var(--ui-title); background: var(--ui-surface-2); }
.ui-nav-link[aria-current="page"] { color: var(--ui-brand); border-bottom-color: var(--ui-brand); font-weight: 600; }
.ui-nav-link[aria-current="page"] .ui-icon { color: var(--ui-brand); }
.ui-nav-link .ui-count { margin-left: 2px; }
.ui-account { display: flex; align-items: center; gap: var(--ui-s2); flex: none; }
.ui-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; padding: 0 var(--ui-s1); }
.ui-user-name { font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-title); white-space: nowrap; }
.ui-user-role { font-size: var(--ui-fs-xs); color: var(--ui-muted); white-space: nowrap; }
.ui-btn.ui-menu-btn { display: none; }
.ui-mobile-nav { display: none; }
/* 1280 以下：导航只留图标 + 字，系统名不显示，只留 logo */
@media (max-width: 1279px) { .ui-brand-name { display: none; } .ui-nav-link { padding: 0 10px; } .ui-topbar-in { gap: var(--ui-s3); } }
@media (max-width: 1099px) { .ui-nav-link .ui-icon { display: none; } .ui-user { display: none; } }
/* 窄屏：导航收进菜单 */
@media (max-width: 899px) {
  .ui-nav { display: none; }
  .ui-brand-name { display: block; font-size: 16px; }
  .ui-topbar-in { justify-content: space-between; }
  .ui-btn.ui-menu-btn { display: inline-flex; }
  .ui-account .ui-hide-narrow { display: none; }
  .ui-topbar[data-open] .ui-mobile-nav { display: block; }
  .ui-mobile-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-pop); padding: var(--ui-s2) var(--ui-gutter) var(--ui-s4); max-height: calc(100vh - var(--ui-topbar-h)); overflow: auto; }
  .ui-mobile-nav a { display: flex; align-items: center; gap: var(--ui-s3); min-height: 48px; padding: 0 var(--ui-s2); color: var(--ui-text); text-decoration: none; font-size: 16px; border-radius: var(--ui-r-md); }
  .ui-mobile-nav a[aria-current="page"] { background: var(--ui-brand-soft); color: var(--ui-brand); font-weight: 600; }
  .ui-mobile-nav .ui-mobile-user { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-s2); padding: var(--ui-s3) var(--ui-s2) 0; margin-top: var(--ui-s2); border-top: 1px solid var(--ui-border); font-size: var(--ui-fs-sm); color: var(--ui-muted); }
}

/* ═══ 按钮：主要 / 次要 / 文字 / 危险 ═══ */
.ui-btn {
  --b-bg: var(--ui-surface); --b-fg: var(--ui-title); --b-line: var(--ui-border-strong); --b-hover: var(--ui-surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ui-h-md); padding: 0 14px; border-radius: var(--ui-r-md);
  border: 1px solid var(--b-line); background: var(--b-bg); color: var(--b-fg);
  font: inherit; font-size: var(--ui-fs-md); font-weight: 550; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; position: relative;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ui-btn:hover { background: var(--b-hover); }
.ui-btn:active { transform: translateY(0.5px); }
.ui-btn .ui-icon { width: 18px; height: 18px; }
.ui-btn--primary { --b-bg: var(--ui-brand); --b-fg: #fff; --b-line: var(--ui-brand); --b-hover: var(--ui-brand-hover); }
.ui-btn--primary:active { background: var(--ui-brand-press); }
.ui-btn--danger { --b-bg: var(--ui-surface); --b-fg: var(--ui-danger); --b-line: var(--ui-danger-line); --b-hover: var(--ui-danger-bg); }
.ui-btn--danger-solid { --b-bg: var(--ui-danger); --b-fg: #fff; --b-line: var(--ui-danger); --b-hover: #912018; }
.ui-btn--ghost { --b-bg: transparent; --b-fg: var(--ui-brand); --b-line: transparent; --b-hover: var(--ui-brand-soft); padding: 0 10px; }
.ui-btn--quiet { --b-bg: transparent; --b-fg: var(--ui-text); --b-line: transparent; --b-hover: var(--ui-surface-2); padding: 0 10px; }
.ui-btn--sm { height: var(--ui-h-sm); padding: 0 10px; font-size: var(--ui-fs-sm); }
.ui-btn--lg { height: var(--ui-h-lg); padding: 0 18px; }
.ui-btn--icon { width: var(--ui-h-md); padding: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--ui-h-sm); }
.ui-btn--block { width: 100%; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--ui-surface-2); color: var(--ui-muted); border-color: var(--ui-border); transform: none; }
.ui-btn[aria-busy="true"] { cursor: progress; color: transparent !important; }
.ui-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--b-fg); border-right-color: transparent; animation: ui-spin .7s linear infinite;
}
.ui-btn--primary[aria-busy="true"]::after { border-color: #fff; border-right-color: transparent; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-btn-group { display: inline-flex; gap: var(--ui-s2); flex-wrap: wrap; }

/* ═══ 标签：状态（有颜色、带图标）≠ 属性（中性灰）≠ 按钮 ═══ */
.ui-status {
  --t-fg: var(--ui-neutral); --t-bg: var(--ui-neutral-bg);
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: var(--ui-r-sm); background: var(--t-bg); color: var(--t-fg);
  font-size: var(--ui-fs-sm); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.ui-status .ui-icon { width: 14px; height: 14px; }
.ui-status--danger { --t-fg: var(--ui-danger); --t-bg: var(--ui-danger-bg); }
.ui-status--warn { --t-fg: var(--ui-warn); --t-bg: var(--ui-warn-bg); }
.ui-status--ok { --t-fg: var(--ui-ok); --t-bg: var(--ui-ok-bg); }
.ui-status--info { --t-fg: var(--ui-info); --t-bg: var(--ui-info-bg); }
.ui-attr {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px;
  border-radius: 4px; background: var(--ui-surface-2); color: var(--ui-text);
  font-size: var(--ui-fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.ui-attr b { font-weight: 650; color: var(--ui-title); }
.ui-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ui-danger); color: #fff; font-size: var(--ui-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ui-count--muted { background: var(--ui-surface-2); color: var(--ui-text); }
.ui-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }

/* ═══ 表单与筛选 ═══ */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-label { font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-title); }
.ui-label .ui-req { color: var(--ui-danger); margin-left: 2px; }
.ui-hint { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-error-text { font-size: var(--ui-fs-sm); color: var(--ui-danger); display: flex; gap: 4px; align-items: flex-start; }
.ui-input, .ui-select, .ui-textarea {
  width: 100%; height: var(--ui-h-md); padding: 0 12px; font: inherit; font-size: var(--ui-fs-md); color: var(--ui-title);
  background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-md);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .04);
}
.ui-textarea { height: auto; min-height: 88px; padding: 8px 12px; resize: vertical; line-height: 1.5; }
.ui-input::placeholder, .ui-textarea::placeholder { color: #64748B; }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: #94A3B8; }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { outline: none; border-color: var(--ui-brand); box-shadow: 0 0 0 3px rgba(15, 118, 110, .18); border-radius: var(--ui-r-md); }
.ui-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-input:disabled, .ui-select:disabled { background: var(--ui-surface-2); color: var(--ui-muted); cursor: not-allowed; }
.ui-select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.ui-search { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-search .ui-icon { position: absolute; left: 11px; width: 18px; height: 18px; color: var(--ui-muted); pointer-events: none; }
.ui-search .ui-input { padding-left: 36px; }
.ui-search .ui-search-clear { position: absolute; right: 4px; }
.ui-toolbar { display: flex; align-items: center; gap: var(--ui-s3); flex-wrap: wrap; margin-bottom: var(--ui-s3); }
.ui-toolbar .ui-search { flex: 1 1 280px; max-width: 420px; }
.ui-toolbar-end { margin-left: auto; display: flex; gap: var(--ui-s2); align-items: center; flex-wrap: wrap; }
.ui-filter { display: flex; align-items: center; gap: var(--ui-s2); }
.ui-filter > .ui-label { font-weight: 500; color: var(--ui-muted); white-space: nowrap; }

/* 分段控件：几个里只能选一个（日期范围、库存视图） */
.ui-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--ui-surface-2); border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); }
.ui-seg-opt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-text); font: inherit; font-size: var(--ui-fs-sm); font-weight: 550; cursor: pointer; white-space: nowrap; }
.ui-seg-opt:hover { color: var(--ui-title); background: rgba(255, 255, 255, .6); }
.ui-seg-opt[aria-pressed="true"], .ui-seg-opt[aria-selected="true"] { background: var(--ui-surface); color: var(--ui-brand); font-weight: 650; box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 1px var(--ui-border); }
.ui-seg-opt .ui-count { height: 18px; min-width: 18px; }

/* 多选：带勾的方块，跟标签、按钮都不一样 */
.ui-checks { display: flex; flex-wrap: wrap; gap: var(--ui-s2); }
.ui-check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 8px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-md); background: var(--ui-surface); font-size: var(--ui-fs-sm); color: var(--ui-text); cursor: pointer; user-select: none; }
.ui-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-check-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #94A3B8; display: grid; place-items: center; flex: none; background: var(--ui-surface); }
.ui-check-box svg { width: 12px; height: 12px; opacity: 0; color: #fff; }
/* 勾本身不靠 :has（老的 360/QQ 浏览器内核不认）；整块变色是锦上添花 */
.ui-check input:checked + .ui-check-box { background: var(--ui-brand); border-color: var(--ui-brand); }
.ui-check input:checked + .ui-check-box svg { opacity: 1; }
.ui-check input:focus-visible + .ui-check-box { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
.ui-check:has(input:checked) { border-color: var(--ui-brand); background: var(--ui-brand-soft); color: var(--ui-title); }
.ui-check:has(input:disabled) { cursor: not-allowed; opacity: .6; }

/* 页内分页签（库存 / 录货 / 统计 / 设置） */
.ui-tabs { display: flex; gap: var(--ui-s1); border-bottom: 1px solid var(--ui-border); margin-bottom: var(--ui-s4); overflow-x: auto; scrollbar-width: none; }
.ui-tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--ui-s3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: var(--ui-fs-md); font-weight: 550; color: var(--ui-muted); cursor: pointer; white-space: nowrap; }
.ui-tab:hover { color: var(--ui-title); }
.ui-tab[aria-selected="true"] { color: var(--ui-brand); border-bottom-color: var(--ui-brand); font-weight: 650; }

/* ═══ 表格（宽屏表格，手机自动变卡片） ═══ */
.ui-table-wrap { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); overflow: auto; }
.ui-table-wrap--scroll { max-height: var(--ui-table-max, min(640px, calc(100vh - 220px))); } /* 长列表：表头固定，表格自己滚 */
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ui-fs-md); color: var(--ui-text); }
.ui-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-muted);
  background: var(--ui-surface-2); padding: 0 var(--ui-s3); height: 38px; border-bottom: 1px solid var(--ui-border); white-space: nowrap;
}
.ui-table td { padding: 10px var(--ui-s3); border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table th.ui-num, .ui-table td.ui-num { text-align: right; }
.ui-table td.ui-strong { font-weight: 650; color: var(--ui-title); }
.ui-table tbody tr:hover td { background: #F8FAFC; }
.ui-table tbody tr[data-href], .ui-table tbody tr[data-open] { cursor: pointer; }
.ui-table tbody tr[aria-selected="true"] td { background: var(--ui-brand-soft); }
.ui-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--ui-brand); }
.ui-table .ui-cell-sub { display: block; font-size: var(--ui-fs-xs); color: var(--ui-muted); margin-top: 1px; }
.ui-table-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-s3); padding: 10px var(--ui-s3); font-size: var(--ui-fs-sm); color: var(--ui-muted); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-table--dense td { padding-top: 7px; padding-bottom: 7px; }
/* 手机：每行变一张卡片；第一格当卡片标题，其余是「名称 值」两列 */
@media (max-width: 719px) {
  .ui-table-wrap.ui-cards-sm { background: transparent; border: 0; border-radius: 0; overflow: visible; max-height: none; }
  .ui-cards-sm .ui-table, .ui-cards-sm .ui-table tbody, .ui-cards-sm .ui-table tr, .ui-cards-sm .ui-table td { display: block; width: 100%; }
  .ui-cards-sm .ui-table thead { display: none; }
  .ui-cards-sm .ui-table tbody { display: flex; flex-direction: column; gap: var(--ui-s2); }
  .ui-cards-sm .ui-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--ui-s3); padding: var(--ui-s3) var(--ui-s4); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); }
  .ui-cards-sm .ui-table tbody tr:hover td { background: none; }
  .ui-cards-sm .ui-table td { padding: 0; border: 0; text-align: left !important; min-width: 0; }
  .ui-cards-sm .ui-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--ui-fs-xs); color: var(--ui-muted); font-weight: 500; margin-bottom: 1px; }
  .ui-cards-sm .ui-table td.ui-card-title { grid-column: 1 / -1; font-size: var(--ui-fs-lg); display: flex; justify-content: space-between; align-items: baseline; gap: var(--ui-s2); padding-bottom: 6px; border-bottom: 1px solid var(--ui-border); margin-bottom: 2px; }
  .ui-cards-sm .ui-table td.ui-card-title::before { display: none; }
  .ui-cards-sm .ui-table td.ui-card-wide { grid-column: 1 / -1; }
  .ui-cards-sm .ui-table td.ui-hide-sm { display: none; }
  .ui-cards-sm .ui-table tr[aria-selected="true"] { border-color: var(--ui-brand); }
  .ui-cards-sm .ui-table tr[aria-selected="true"] td { background: none; box-shadow: none !important; }
  .ui-cards-sm .ui-table-foot { border: 0; background: none; padding: var(--ui-s2) 0; }
}

/* 字段列表（详情里「名称 值」对齐） */
.ui-dl { display: grid; grid-template-columns: var(--ui-dl-label, 6.5em) minmax(0, 1fr); gap: 10px var(--ui-s5); margin: 0; font-size: var(--ui-fs-md); }
.ui-dl dt { color: var(--ui-muted); font-weight: 500; }
.ui-dl dd { margin: 0; color: var(--ui-title); min-width: 0; }
.ui-dl--cols { grid-template-columns: repeat(2, var(--ui-dl-label, 6.5em) minmax(0, 1fr)); }
@media (max-width: 719px) { .ui-dl--cols { grid-template-columns: var(--ui-dl-label, 6.5em) minmax(0, 1fr); } }
.ui-section + .ui-section { margin-top: var(--ui-s5); padding-top: var(--ui-s5); border-top: 1px solid var(--ui-border); }
.ui-section > .ui-h3 { margin-bottom: var(--ui-s3); display: flex; align-items: center; gap: 8px; }

/* ═══ 空状态 / 加载 / 出错 ═══ */
.ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px var(--ui-s5); color: var(--ui-muted); }
.ui-empty-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-surface-2); color: var(--ui-muted); margin-bottom: 6px; }
.ui-empty-icon .ui-icon { width: 22px; height: 22px; }
.ui-empty-title { font-size: var(--ui-fs-lg); font-weight: 650; color: var(--ui-title); }
.ui-empty-text { font-size: var(--ui-fs-md); max-width: 420px; }
.ui-empty .ui-btn-group { margin-top: var(--ui-s3); justify-content: center; }
.ui-empty--inline { flex-direction: row; text-align: left; padding: var(--ui-s4); gap: var(--ui-s3); }
.ui-empty--inline .ui-empty-icon { margin: 0; }
.ui-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--ui-muted); font-size: var(--ui-fs-md); }
.ui-loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ui-border-strong); border-top-color: var(--ui-brand); animation: ui-spin .7s linear infinite; }
.ui-skel { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #EEF2F6 25%, #F6F8FA 50%, #EEF2F6 75%); background-size: 200% 100%; animation: ui-skel 1.2s ease infinite; }
@keyframes ui-skel { to { background-position: -200% 0; } }

/* ═══ 提醒：短标题 + 关键数据，详细原文收起来 ═══ */
.ui-alert {
  --a-fg: var(--ui-info); --a-bg: var(--ui-info-bg); --a-line: var(--ui-info-line);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--ui-s3); align-items: start;
  padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r-lg); background: var(--a-bg); border: 1px solid var(--a-line); color: var(--ui-text);
}
.ui-alert > .ui-icon { color: var(--a-fg); width: 20px; height: 20px; margin-top: 1px; }
.ui-alert-title { font-weight: 650; color: var(--ui-title); font-size: var(--ui-fs-md); }
.ui-alert-body { grid-column: 2 / -1; font-size: var(--ui-fs-md); }
.ui-alert-actions { grid-column: 3; grid-row: 1; display: flex; gap: var(--ui-s2); }
.ui-alert--danger { --a-fg: var(--ui-danger); --a-bg: var(--ui-danger-bg); --a-line: var(--ui-danger-line); }
.ui-alert--warn { --a-fg: #B54708; --a-bg: var(--ui-warn-bg); --a-line: var(--ui-warn-line); }
.ui-alert--ok { --a-fg: var(--ui-ok); --a-bg: var(--ui-ok-bg); --a-line: var(--ui-ok-line); }
.ui-alert--plain { --a-bg: var(--ui-surface); --a-line: var(--ui-border); }
.ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--ui-s3); margin: 4px 0 0; }
.ui-kv dt { color: var(--ui-muted); }
.ui-kv dd { margin: 0; color: var(--ui-title); font-variant-numeric: tabular-nums; }
.ui-kv dd.ui-bad { color: var(--ui-danger); font-weight: 600; }
/* 「查看来源」「另有 N 项」：原生 details，不靠 JS */
.ui-more { margin-top: 6px; }
.ui-more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: var(--ui-fs-sm); font-weight: 550; color: var(--ui-brand); padding: 2px 0; border-radius: 4px; }
.ui-more > summary::-webkit-details-marker { display: none; }
.ui-more > summary .ui-icon { width: 16px; height: 16px; transition: transform .15s ease; }
.ui-more[open] > summary .ui-icon { transform: rotate(90deg); }
.ui-more-body { margin-top: 6px; padding: 10px 12px; border-radius: var(--ui-r-md); background: rgba(255, 255, 255, .7); border: 1px solid var(--ui-border); font-size: var(--ui-fs-sm); color: var(--ui-text); }
.ui-more-body pre, .ui-source { margin: 0; font-family: var(--ui-font-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--ui-text); }
/* 一条记录的待处理列表：最重要的一条在前，其余收起 */
.ui-issues { display: flex; flex-direction: column; gap: 6px; }
.ui-issue { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ui-fs-md); }
.ui-issue .ui-icon { width: 18px; height: 18px; margin-top: 2px; }
.ui-issue--danger .ui-icon { color: var(--ui-danger); }
.ui-issue--warn .ui-icon { color: #B54708; }
.ui-issue--info .ui-icon { color: var(--ui-info); }

/* 只读说明：替代无解释的灰色勾选框 */
.ui-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-readonly .ui-icon { width: 16px; height: 16px; }

/* 数据新鲜度：每个来源单独标时间，旧了变黄 */
.ui-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-sm); color: var(--ui-text); white-space: nowrap; }
.ui-fresh::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #12B76A; flex: none; }
.ui-fresh--stale::before { background: #F79009; }
.ui-fresh--dead::before { background: var(--ui-danger); }
.ui-fresh b { font-weight: 600; color: var(--ui-title); }

/* ═══ 统计数字：标明范围 ═══ */
.ui-stats { display: grid; gap: var(--ui-s3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ui-stat { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); padding: var(--ui-s3) var(--ui-s4); min-width: 0; }
.ui-stat-label { font-size: var(--ui-fs-sm); color: var(--ui-muted); font-weight: 500; }
.ui-stat-value { font-size: var(--ui-fs-2xl); font-weight: 700; color: var(--ui-title); font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 2px; }
.ui-stat-value small { font-size: var(--ui-fs-md); font-weight: 500; color: var(--ui-muted); margin-left: 4px; }
.ui-stat-scope { font-size: var(--ui-fs-xs); color: var(--ui-muted); margin-top: 2px; }
.ui-stat--danger .ui-stat-value { color: var(--ui-danger); }
.ui-stat--warn .ui-stat-value { color: var(--ui-warn); }

/* ═══ 侧边面板（电脑从右边滑出，手机从底部弹出）和弹窗 ═══ */
.ui-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: rgba(15, 23, 42, .32); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ui-backdrop[data-open] { opacity: 1; pointer-events: auto; }
.ui-drawer {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-pop); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
}
.ui-drawer[data-open] { transform: none; visibility: visible; }
.ui-drawer--wide { width: min(720px, 100vw); }
.ui-drawer-head { display: flex; align-items: flex-start; gap: var(--ui-s3); padding: var(--ui-s4) var(--ui-s5); border-bottom: 1px solid var(--ui-border); }
.ui-drawer-head > div { flex: 1; min-width: 0; }
.ui-drawer-body { flex: 1; overflow: auto; padding: var(--ui-s5); overscroll-behavior: contain; }
.ui-drawer-foot { display: flex; gap: var(--ui-s2); justify-content: flex-end; padding: var(--ui-s3) var(--ui-s5); border-top: 1px solid var(--ui-border); padding-bottom: calc(var(--ui-s3) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 719px) {
  .ui-drawer, .ui-drawer--wide { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; transform: translateY(100%); }
  .ui-drawer::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--ui-border-strong); margin: 8px auto 0; flex: none; }
  .ui-drawer-head { padding: var(--ui-s3) var(--ui-s4); }
  .ui-drawer-body { padding: var(--ui-s4); }
  .ui-drawer-foot { padding-left: var(--ui-s4); padding-right: var(--ui-s4); }
  .ui-drawer-foot .ui-btn { flex: 1; height: var(--ui-h-lg); }
}
.ui-modal { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(440px, calc(100vw - 32px)); transform: translate(-50%, -48%); opacity: 0; visibility: hidden;
  background: var(--ui-surface); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-pop); transition: opacity .15s ease, transform .15s ease; }
.ui-modal[data-open] { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.ui-modal-body { padding: var(--ui-s5); }
.ui-modal-foot { display: flex; justify-content: flex-end; gap: var(--ui-s2); padding: 0 var(--ui-s5) var(--ui-s5); }

/* ═══ 提示条 ═══ */
.ui-toast-host { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ui-toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--ui-r-md); background: var(--ui-title); color: #fff; font-size: var(--ui-fs-md); box-shadow: var(--ui-shadow-pop); max-width: min(560px, calc(100vw - 32px)); }
.ui-toast .ui-icon { width: 18px; height: 18px; }
.ui-toast--danger .ui-icon { color: #FDA29B; }
.ui-toast--ok .ui-icon { color: #75E0A7; }

/* 减少动画（系统设置了「减少动态效果」时） */
/* 手机：输入框字号 ≥16px（iOS 聚焦小字号输入框会放大整页），高度够手指按 */
@media (max-width: 719px) {
  .ui-input, .ui-select, .ui-textarea { font-size: 16px; }
  .ui-input, .ui-select { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui *, .ui *::before, .ui *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}