/* Some Bridge · 共享组件层
 * 所有颜色/字体/间距均引用 tokens.css 的 :root 变量，本文件不出现裸色值。 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html.auth-checking body { visibility: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

img { display: block; max-width: 100%; }
/* 组件的 display 会盖掉 UA 的 [hidden]，这里补回来 */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--fg); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── 排版 ─────────────────────────────────────────────── */
/* 中文标题走 CJK 行高下限 1.3：--leading-tight(1.0) 是拉丁字距余量下的值，
 * 汉字撑满 em 框，1.0 会让多行标题直接相撞。同理负字距只适用于拉丁文，
 * 中文本身就在固定字身框上，负字距只会挤压而不会收紧。 */
.display {
  font-family: var(--font-display), "Noto Serif SC", "Songti SC", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}
.d-hero  { font-size: var(--text-4xl); }
.d-lg    { font-size: var(--text-3xl); }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1 { font-size: var(--text-2xl); letter-spacing: -0.32px; }
h2 { font-size: var(--text-xl); letter-spacing: -0.2px; }
h3 { font-size: var(--text-lg); }
p  { margin: 0; line-height: 1.7; }

.eyebrow {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;  /* ALL CAPS 需要 ≥0.06em 正字距，否则字怀相撞 */
  color: var(--muted);
  margin: 0;
}
.lead { font-size: var(--text-lg); color: var(--fg-2); }
.body-muted { color: var(--muted); }
.body-sm { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono), ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* ─── 容器 ─────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-gutter-desktop);
  padding-right: var(--container-gutter-desktop);
}

/* ─── 顶栏 ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar .container {
  height: 60px;
  display: flex; align-items: center; gap: var(--space-8);
}
/* 品牌锁定：Sunbridge 企业字标 │ 产品名「名刺」
 * 企业标识保持原始字标不做改动，产品名走展示衬线，中间一道细分隔线拉开层级——
 * 公司在前、产品在后，这是企业级产品标准的双层署名方式。 */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; color: var(--fg); }
.brand:hover { color: var(--fg); }
.brand:hover .brand-name { text-decoration: underline; text-underline-offset: 4px; }
.brand-logo { display: block; height: 24px; width: auto; flex: none; }
.brand-div { width: 1px; height: 20px; background: var(--border); flex: none; }
.brand-name {
  font-family: var(--font-display), "Noto Serif SC", "Songti SC", serif;
  font-size: 20px; line-height: 1.3; letter-spacing: 0.06em; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav a {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--fg-2);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.nav a:hover { background: color-mix(in oklab, var(--accent), white 92%); color: var(--accent); }
.nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.nav a[aria-current="page"]:hover { background: var(--accent); color: var(--accent-on); }
.topbar-tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); color: var(--fg-2); white-space: nowrap; }
.user-avatar {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: block; overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: 50%;
  background: linear-gradient(145deg, var(--surface), var(--border-soft));
}
.user-avatar svg, .user-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--fg-2);
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.icon-btn:hover { background: color-mix(in oklab, var(--accent), white 92%); color: var(--accent); }
/* 小图标按钮：视觉尺寸保持紧凑，用居中的透明覆盖层把点击目标补到 44px */
.icon-btn, .more-btn, .x-btn { position: relative; }
.icon-btn::after, .more-btn::after, .x-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.avatar {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--fg); color: var(--bg);
  display: grid; place-items: center; font-size: var(--text-sm); letter-spacing: 0.4px;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-error { color: color-mix(in oklab, var(--danger), black 24%); font-size: var(--text-sm); min-height: 1.5em; }
.form-success { color: color-mix(in oklab, var(--success), black 24%); font-size: var(--text-sm); }

/* ─── 页头 ─────────────────────────────────────────────── */
.page { padding: var(--space-8) 0 72px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.page-head .title-block { max-width: 720px; }
.page-head h1 { margin-top: 6px; }
.page-head .lead { margin-top: 8px; font-size: var(--text-base); color: var(--muted); }

.crumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); margin-bottom: 14px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }

/* ─── 按钮 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}
.btn-sm { min-height: 36px; padding: 0 14px; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--accent-on); }
.btn-primary:active { background: var(--accent-active); color: var(--accent-on); }
.btn-secondary { border-color: var(--border); color: var(--fg); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent), white 94%); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { color: var(--accent); background: color-mix(in oklab, var(--accent), white 92%); }
.btn[disabled] { opacity: 0.42; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--fg); color: var(--bg); border-color: transparent; }
.btn-secondary[disabled]:hover { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-danger { color: color-mix(in oklab, var(--danger), black 22%); border-color: var(--border); }
.btn-danger:hover {
  background: color-mix(in oklab, var(--danger), white 92%);
  border-color: color-mix(in oklab, var(--danger), black 10%);
  color: color-mix(in oklab, var(--danger), black 34%);
}
.btn-danger-solid {
  background: color-mix(in oklab, var(--danger), black 14%);
  border-color: transparent;
  color: white;
}
.btn-danger-solid:hover {
  background: color-mix(in oklab, var(--danger), black 28%);
  color: white;
}

/* ─── 卡片 / 面板 ───────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.panel-head {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.surface { background: var(--surface); }

/* ─── 统计块 ───────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px var(--space-6) 20px;
  background: var(--bg);
}
.stat .k { font-size: var(--text-sm); color: var(--muted); }
.stat .v {
  font-family: var(--font-display), "Noto Serif SC", serif;
  font-size: 38px; line-height: 1.1; letter-spacing: -0.8px; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat .v small { font-size: 15px; letter-spacing: 0; color: var(--muted); margin-left: 4px; font-family: var(--font-body), sans-serif; }
.stat .s { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; line-height: 1.5; }
.stat.is-alert { border-color: color-mix(in oklab, var(--danger), white 72%); }
.stat.is-alert .v { color: color-mix(in oklab, var(--danger), black 26%); }

/* ─── 表单 ─────────────────────────────────────────────────
 * 控件外观必须挂在元素本身，不能只挂在 .field 后代上：
 * 筛选栏、分页器里的 select 都是裸控件，之前只被全局 select 规则
 * 摘掉了原生外观却没拿到盒子样式，渲染成没有边框和高度的裸框。 */
.field { display: block; }
.field label { display: block; font-size: var(--text-sm); color: var(--fg-2); margin-bottom: 7px; }

.input,
.field input[type="text"], .field input[type="search"], .field input[type="email"], .field input[type="password"], .field textarea,
select {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg);
  color: var(--fg);
  font-size: var(--text-base);
  transition: border-color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
/* 块级控件铺满容器；select 默认按内容宽度，避免在 flex 工具栏里挤爆兄弟元素 */
.input,
.field input[type="text"], .field input[type="search"], .field input[type="email"], .field input[type="password"], .field textarea,
.field select { width: 100%; }

select {
  width: auto;
  max-width: 100%;
  cursor: pointer;
  appearance: none;
  /* 纯 CSS 下拉箭头：两个 5px 直角三角形拼成 ▼，跟随 currentColor */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.field textarea { min-height: 88px; resize: vertical; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder {
  color: color-mix(in oklab, var(--muted), black 26%);
}
.input:hover, select:hover,
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-2); }
/* 只读态：降饱和的填充 + 更浅的边框，让"不可改"在看清内容前就被感知 */
.field input[readonly] { background-color: var(--surface); color: var(--fg-2); border-color: var(--border-soft); cursor: default; }
.field input[readonly]:hover { border-color: var(--border-soft); }
.field-help { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; }

.search-wrap { position: relative; flex: 1 1 300px; max-width: 400px; }
.search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: color-mix(in oklab, var(--muted), black 26%); pointer-events: none; }
.search-wrap input { padding-left: 40px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; margin: 0; }

/* ─── 分段控件 ─────────────────────────────────────────── */
.segmented { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); }
.segmented button {
  min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--fg-2); font-size: var(--text-sm); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.segmented button:hover { background: color-mix(in oklab, var(--accent), white 90%); color: var(--accent); }
.segmented button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.segmented button[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-on); }

/* ─── 标签页 ───────────────────────────────────────────── */
.tabs { display: flex; align-items: stretch; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.tabs button {
  position: relative; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 46px;
  padding: 12px 2px 13px; font-size: var(--text-sm);
  color: color-mix(in oklab, var(--muted), black 26%);
  transition: color var(--motion-fast) var(--ease-standard);
}
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; transition: background var(--motion-fast) var(--ease-standard);
}
.tabs button:hover { color: var(--accent); }
.tabs button[aria-selected="true"] { color: var(--fg); }
.tabs button[aria-selected="true"]::after { background: var(--fg); }

.tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}
/* 让标签条撑满整行高度，这样选中下划线始终落在行底的分隔线上，
 * 分页器换行把行撑高时也不会浮在半空 */
.tabs-row .tabs { border-bottom: 0; align-self: stretch; }

/* ─── 徽标 ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); line-height: 1.5; white-space: nowrap;
  border: 1px solid var(--border-soft); background: var(--surface); color: var(--fg-2);
}
.badge-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex: none; }
.badge-muted { color: var(--muted); }
.badge-ok      { background: color-mix(in oklab, var(--success), white 90%); border-color: color-mix(in oklab, var(--success), white 76%); color: color-mix(in oklab, var(--success), black 34%); }
.badge-run     { background: color-mix(in oklab, var(--accent),  white 91%); border-color: color-mix(in oklab, var(--accent),  white 78%); color: color-mix(in oklab, var(--accent),  black 18%); }
.badge-warn    { background: color-mix(in oklab, var(--warn),    white 82%); border-color: color-mix(in oklab, var(--warn),    white 66%); color: color-mix(in oklab, var(--warn),    black 52%); }
.badge-fail    { background: color-mix(in oklab, var(--danger),  white 90%); border-color: color-mix(in oklab, var(--danger),  white 76%); color: color-mix(in oklab, var(--danger),  black 32%); }
.tag {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: var(--text-xs); color: var(--fg-2); background: var(--bg);
}

/* ─── 进度条 ───────────────────────────────────────────── */
.bar { height: 6px; border-radius: var(--radius-pill); background: var(--border-soft); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
/* 只有"正在识别"的实时进度条需要过渡；列表里的静态进度条不参与动画。 */
.bar.is-live > i { transition: width var(--motion-base) var(--ease-standard); }
.bar.is-done > i { background: var(--success); }
.bar.is-fail > i { background: var(--danger); }
/* 原色 warn 在浅色轨道上不足 3:1，压暗后才够非文本对比度 */
.bar.is-warn > i { background: color-mix(in oklab, var(--warn), black 32%); }

/* ─── 名片图（UI 拟真渲染，非真人素材） ────────────────── */
/* 这 18 处缩略图是"用户扫进来的名片"，属于产品数据，不用生成图替换：
 * 生成图会捏造不存在的公司标识，且在 68×40 的尺寸下卡面文字必成乱码。
 * 改为用一层落影 + 顶边高光把它做成"纸质实物"的读感。 */
.card-face {
  position: relative; display: flex; overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  width: 128px; height: 74px; flex: none;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--fg), transparent 90%),
              inset 0 1px 0 color-mix(in oklab, white, transparent 45%);
}
.card-face .cf-band { width: 7px; flex: none; background: var(--fg); }
.card-face.cf-top { flex-direction: column; }
.card-face.cf-top .cf-band { width: 100%; height: 8px; }
.card-face .cf-body { padding: 8px 9px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.card-face .cf-co { display: block; font-size: 7px; color: var(--muted); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-face .cf-name { display: block; font-size: 11px; color: var(--fg); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-face .cf-rules { display: flex; flex-direction: column; gap: 2.5px; margin-top: 3px; }
.card-face .cf-rules i { display: block; height: 1.5px; border-radius: var(--radius-pill); background: var(--border); }
.card-face .cf-rules i:nth-child(1) { width: 62%; }
.card-face .cf-rules i:nth-child(2) { width: 48%; }
.card-face .cf-rules i:nth-child(3) { width: 55%; }
.cf-a .cf-band { background: color-mix(in oklab, var(--accent), black 26%); }
.cf-b .cf-band { background: color-mix(in oklab, var(--success), black 24%); }
.cf-c .cf-band { background: var(--fg-2); }
.cf-d .cf-band { background: color-mix(in oklab, var(--danger), black 26%); }
.cf-e .cf-band { background: color-mix(in oklab, var(--muted), black 22%); }
.cf-f .cf-band { background: color-mix(in oklab, var(--warn), black 30%); }

.card-face.cf-xl { width: 100%; height: auto; aspect-ratio: 91 / 55; border-radius: var(--radius-sm); }
.card-face.cf-xl .cf-band { width: 16px; }
.card-face.cf-xl.cf-top .cf-band { width: 100%; height: 18px; }
.card-face.cf-xl .cf-body { padding: var(--space-6); gap: 6px; }
.card-face.cf-xl .cf-co { font-size: var(--text-sm); }
.card-face.cf-xl .cf-name { font-size: 26px; letter-spacing: 2px; }
.card-face.cf-xl .cf-meta { display: block; font-size: var(--text-xs); color: var(--muted); line-height: 1.7; margin-top: 8px; }
.card-face.cf-md { width: 168px; height: 98px; }
.card-face.cf-md .cf-name { font-size: 13px; }
.card-face.cf-md .cf-co { font-size: 8px; }

/* ─── 数据表 ───────────────────────────────────────────── */
.table { width: 100%; }
.trow {
  display: grid; align-items: start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-soft);
}
.thead {
  font-size: var(--text-xs); color: var(--muted);
  padding-top: 11px; padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
}
.tbody .trow { cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); }
.tbody .trow:hover { background: var(--surface); }
a.trow, a.trow:hover { color: var(--fg); }
a.trow:hover .cell-strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tbody .trow.is-selected { background: color-mix(in oklab, var(--accent), white 94%); }
.tbody .trow:last-child { border-bottom: 0; }
.cell { min-width: 0; }
.cell-strong { font-size: var(--text-base); }
.cell-sub { display: block; font-size: var(--text-sm); color: var(--muted); margin-top: 3px; }
.cell-strong { display: block; }
.link-co { font-size: var(--text-sm); color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); }
.link-co:hover { color: var(--accent); text-decoration-color: var(--accent); }
.contact-line { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--fg-2); }
.contact-line + .contact-line { margin-top: 5px; }
.contact-line svg { color: var(--muted); flex: none; }
.contact-line a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); overflow-wrap: anywhere; }
.contact-line a:hover { text-decoration-color: var(--accent); }

/* ─── 批量操作条 ───────────────────────────────────────── */
.bulkbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-6);
  background: var(--fg); color: var(--bg);
  border-radius: var(--radius-pill);
}
.bulkbar .btn-ghost { color: var(--bg); }
.bulkbar .btn-ghost:hover { background: color-mix(in oklab, var(--bg), transparent 82%); color: var(--bg); }
.bulkbar .count { font-size: var(--text-sm); margin-right: auto; }

/* ─── 分页 ─────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted); flex-wrap: wrap; }
.pager select { min-width: 118px; font-size: var(--text-sm); }
.pager .nav-btn {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--fg-2);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.pager .nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.pager .nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pager .nav-btn[disabled]:hover { border-color: var(--border); color: var(--fg-2); }

/* ─── 抽屉 ─────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in oklab, var(--fg), transparent 62%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(520px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform var(--motion-base) var(--ease-standard);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.drawer-body { padding: var(--space-6); overflow-y: auto; flex: 1; }
.drawer-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-soft); display: flex; gap: var(--space-3); }

.deflist { display: grid; grid-template-columns: 92px 1fr; gap: 12px var(--space-4); font-size: var(--text-sm); }
.deflist dt { color: var(--muted); }
.deflist dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }

/* ─── 删除确认模态框 ───────────────────────────────────── */
body.has-modal { overflow: hidden; }
.confirm-modal {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: auto; padding: 24px;
  border: 0; background: transparent; color: var(--fg); overflow: auto;
}
.confirm-modal:not([open]) { display: none; }
.confirm-modal[open] { display: grid; place-items: center; }
.confirm-modal::backdrop { background: color-mix(in oklab, var(--fg), transparent 58%); }
.confirm-dialog {
  position: relative; width: min(460px, 100%); padding: 28px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  box-shadow: 0 28px 80px color-mix(in oklab, var(--fg), transparent 76%);
}
.confirm-dialog h2 { font-size: var(--text-xl); line-height: 1.25; }
.confirm-dialog p { margin-top: 12px; color: color-mix(in oklab, var(--muted), black 34%); line-height: 1.65; }
.confirm-dialog .form-error { color: color-mix(in oklab, var(--danger), black 24%); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ─── 空态 ─────────────────────────────────────────────── */
.empty { padding: 64px var(--space-6); text-align: center; color: var(--muted); }
.empty h3 { color: var(--fg); margin-bottom: 8px; }

/* ─── 深色区块（全幅视觉断点） ─────────────────────────── */
.band {
  background: color-mix(in oklab, var(--accent), black 74%);
  color: var(--bg);
  border-radius: var(--radius-md);
  padding: 56px var(--space-12);
}
.band .eyebrow { color: color-mix(in oklab, var(--bg), transparent 38%); }
.band a.btn-secondary { color: var(--bg); border-color: color-mix(in oklab, var(--bg), transparent 62%); }
.band a.btn-secondary:hover { background: color-mix(in oklab, var(--bg), transparent 86%); color: var(--bg); border-color: var(--bg); }
.band a.btn-primary { background: var(--bg); color: color-mix(in oklab, var(--accent), black 74%); }
.band a.btn-primary:hover { background: var(--accent); color: var(--accent-on); }
.band :focus-visible { outline-color: var(--bg); }

/* ─── 页脚 ─────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border-soft); padding: var(--space-6) 0 var(--space-12); color: var(--muted); font-size: var(--text-xs); }
.foot-support { text-align: center; }

/* ─── 后台任务完成提醒 ─────────────────────────────────── */
.task-toast-host { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.task-toast { position: relative; display: grid; gap: 5px; padding: 18px 52px 18px 20px; border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: var(--radius-sm); background: var(--bg); box-shadow: 0 18px 50px color-mix(in oklab, var(--fg), transparent 82%); }
.task-toast.is-fail { border-left-color: var(--danger); }
.task-toast strong { font-size: var(--text-base); }
.task-toast span { color: var(--fg-2); font-size: var(--text-sm); }
.task-toast a { width: max-content; margin-top: 3px; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; }
.task-toast button { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; color: var(--muted); cursor: pointer; }
.task-toast button:hover { background: var(--surface); color: var(--fg); }

/* ─── 次要文本对比度 ───────────────────────────────────────
 * --muted (Muted Slate) 在纯白上约 2.9:1，达不到正文 4.5:1 的门槛。
 * token 值不动（品牌契约），只在"承载信息的次要文本"这一用法上压暗，
 * 保留冷灰紫色相的同时把对比度抬到 ~4.6:1。
 * 名片缩略图里的 .cf-co 属于图像内容，不在此列。 */
.body-muted, .cell-sub, .field-help, .eyebrow, .badge-muted,
.stat .k, .stat .s, .deflist dt, .foot, .pager, .crumb, .crumb a,
.empty, .mini-row .m, .qm, .zoom-note, .queue-note {
  color: color-mix(in oklab, var(--muted), black 26%);
}
.crumb a:hover { color: var(--accent); }

/* ─── 减弱动效 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 响应式 ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .container { padding-left: var(--container-gutter-tablet); padding-right: var(--container-gutter-tablet); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .container { padding-left: var(--container-gutter-phone); padding-right: var(--container-gutter-phone); }
  .topbar .container { gap: var(--space-4); }
  .brand { gap: var(--space-2); }
  .brand-logo { height: 21px; }
  .brand-name { font-size: 18px; }
  .nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 10px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .band { padding: var(--space-8) var(--space-6); }
  .d-hero { font-size: 40px; }
  .d-lg { font-size: 32px; }
  .topbar-tools { gap: var(--space-2); }
  .user-name { max-width: 88px; }
  .topbar-tools .btn { padding: 0 10px; }
  .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* 极窄屏优先保住企业字标，产品名让位给导航 */
  .brand-div, .brand-name { display: none; }
}