/* =====================================================================
   baoXiao 报销/请款系统 · WebDesign 设计系统
   风格：黑白极简（Monochrome Minimal）
   原则：
     1. 只用黑白灰 + 唯一功能色（危险红，仅用于删除/红冲）
     2. 4px 间距栅格，所有间距/尺寸必须是 4 的倍数
     3. 数字一律等宽字体 + tabular-nums，保证纵向对齐
     4. 移动优先，≥768px 进入 PC 布局；无魔法数，无重复标记
   ===================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 颜色（黑白灰阶） */
  --ink: #111111;          /* 主文字 / 主色 */
  --ink-2: #444444;        /* 次级文字 */
  --ink-3: #767676;        /* 辅助文字 */
  --ink-4: #a3a3a3;        /* 占位/最弱 */
  --line: #e6e6e6;         /* 常规分割线 */
  --line-2: #111111;       /* 强调线（表头底线） */
  --bg: #ffffff;           /* 卡片/内容底 */
  --bg-page: #f7f7f5;      /* 页面底 */
  --bg-sub: #fafafa;       /* 次级底（hover、表头） */
  --danger: #c1272d;       /* 唯一功能色：删除/红冲 */

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* 字号 */
  --fz-xs: 11px; --fz-sm: 12px; --fz-md: 13px; --fz-bd: 14px; --fz-lg: 16px; --fz-xl: 20px; --fz-2xl: 24px;

  /* 间距（4px 栅格） */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* 控件 */
  --ctrl-h: 40px;          /* PC 控件高度 */
  --ctrl-h-m: 44px;        /* 移动端控件高度（触控） */
  --r: 6px;                /* 常规圆角 */
  --r-lg: 10px;            /* 弹窗圆角 */

  /* 版式 */
  --side-w: 224px;         /* PC 侧栏宽 */
  --content-w: 1040px;     /* PC 内容最大宽 */
  --mobile-w: 560px;       /* 移动内容最大宽（小平板居中，不再写死 480） */
  --tabbar-h: 56px;        /* 移动底部标签高 */
  --nav-h: 52px;           /* 移动顶部导航高 */
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fz-bd);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::placeholder { color: var(--ink-4); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
[hidden] { display: none !important; }

/* ---------- 3. 工具类 ---------- */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-4); }
.strong { font-weight: 600; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.m-only { display: none; }
@media (min-width: 768px) {
  .m-only { display: revert; }
  .d-only { display: none; }
}
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.money::before { content: "¥"; font-size: 0.78em; color: var(--ink-3); margin-right: 1px; }
.money-lg { font-size: 22px; font-weight: 600; }
.money-lg::before { font-size: 0.7em; font-weight: 400; }

/* ---------- 4. 应用框架：PC 侧栏 + 移动底栏 ---------- */
.shell { min-height: 100vh; }

/* 4.1 PC 侧栏 */
.side {
  display: none;
  position: fixed; inset: 0 auto 0 0; width: var(--side-w);
  background: var(--ink); color: #fff;
  flex-direction: column;
}
.side-brand { padding: var(--s5) var(--s4) var(--s4); border-bottom: 1px solid #2c2c2c; }
.side-brand .zh { font-size: var(--fz-lg); font-weight: 700; letter-spacing: 0.04em; }
.side-brand .en { display: block; margin-top: 2px; font-size: var(--fz-xs); letter-spacing: 0.28em; color: #8a8a8a; font-family: var(--mono); }
.side-nav { flex: 1; padding: var(--s3) var(--s2); display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-radius: var(--r);
  color: #b5b5b5; font-size: var(--fz-bd); transition: background 0.15s, color 0.15s;
}
.side-nav a .glyph { width: 20px; text-align: center; font-size: var(--fz-md); }
.side-nav a:hover { color: #fff; background: #1f1f1f; }
.side-nav a.active { color: #fff; background: #ffffff14; font-weight: 600; }
.side-nav a.active .glyph { color: #fff; }
.side-user { padding: var(--s4); border-top: 1px solid #2c2c2c; display: flex; align-items: center; gap: var(--s3); }
.side-user .name { font-size: var(--fz-bd); font-weight: 600; color: #fff; }
.side-user .meta { display: block; font-size: var(--fz-xs); color: #8a8a8a; margin-top: 1px; }
.side-user .logout { margin-left: auto; font-size: var(--fz-sm); color: #8a8a8a; padding: 4px 6px; border-radius: 4px; }
.side-user .logout:hover { color: #fff; background: #1f1f1f; }
.side-user .avatar { width: 36px; height: 36px; font-size: var(--fz-md); background: #fff; color: var(--ink); }

/* 4.2 移动顶栏 */
.topnav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h); background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4);
}
.topnav .back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-left: -8px; border-radius: 6px; font-size: 18px; color: var(--ink); }
.topnav .back:hover { background: var(--bg-sub); }
.topnav .title { flex: 1; text-align: center; font-size: var(--fz-lg); font-weight: 600; }
.topnav .side-slot { min-width: 32px; display: flex; justify-content: flex-end; gap: var(--s2); }

/* 4.3 主区与内容容器 */
.main { min-height: 100vh; display: flex; flex-direction: column; }
.content {
  flex: 1; width: 100%; max-width: var(--mobile-w);
  margin: 0 auto; padding: var(--s4) var(--s4) calc(var(--tabbar-h) + var(--s6));
}
.has-tabbar .content { padding-bottom: calc(var(--tabbar-h) + var(--s6)); }
.no-tabbar .content { padding-bottom: var(--s7); }

/* 4.4 移动底部标签栏 */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--mobile-w);
  height: var(--tabbar-h); z-index: 40;
  background: var(--bg); border-top: 1px solid var(--line);
  display: flex;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--ink-3); font-size: 10px; letter-spacing: 0.02em;
}
.tabbar a .glyph { font-size: 17px; line-height: 1; }
.tabbar a.active { color: var(--ink); font-weight: 600; }

/* 4.5 PC 断点：侧栏出现、底栏消失、内容加宽 */
@media (min-width: 768px) {
  .side { display: flex; }
  .main { margin-left: var(--side-w); }
  .topnav { display: none; }
  .tabbar { display: none; }
  .content {
    max-width: var(--content-w);
    padding: var(--s6) var(--s6) var(--s7);
    margin: 0;
  }
}

/* ---------- 5. 页头（页面标题区，替代移动 topnav 标题） ---------- */
.pagehead {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
}
.pagehead h1 { font-size: var(--fz-xl); font-weight: 700; letter-spacing: 0.01em; }
.pagehead .sub { display: block; margin-top: 2px; font-size: var(--fz-sm); color: var(--ink-3); font-weight: 400; }
.pagehead .spacer { flex: 1; }
.pagehead-side { display: flex; align-items: center; gap: var(--s2); }

/* 移动端：标题已由 topnav 呈现，页头仅保留（标题在移动端隐藏，操作下沉到内容区） */
@media (max-width: 767px) {
  .pagehead { margin-bottom: 0; display: none; }
  .pagehead--keep { display: flex; margin-bottom: var(--s4); }
  .pagehead--keep h1 { font-size: var(--fz-lg); }
}
.head-link { font-size: var(--fz-bd); color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--r); }
.head-link:hover { background: var(--bg-sub); color: var(--ink); }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--ctrl-h); padding: 0 var(--s4);
  border-radius: var(--r); border: 1px solid transparent;
  font-size: var(--fz-bd); font-weight: 500; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #333; }
.btn-outline { background: var(--bg); border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--bg-sub); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-sub); color: var(--ink); }
.btn-danger-outline { background: var(--bg); border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover { background: #fdf3f3; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a81f24; }
.btn-sm { height: 32px; padding: 0 var(--s3); font-size: var(--fz-md); }
.btn-lg { height: 48px; font-size: var(--fz-lg); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
@media (max-width: 767px) {
  .btn { height: var(--ctrl-h-m); }
  .btn-sm { height: 36px; }
}

/* ---------- 7. 徽章 / 胶囊 / 标签（全黑白：实底/描边/虚线 + 符号区分） ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  border: 1px solid var(--ink); border-radius: 4px;
  font-size: var(--fz-sm); color: var(--ink); background: var(--bg);
  white-space: nowrap; line-height: 1;
}
.badge .sym { font-size: 10px; }
.badge--draft { border-style: dashed; border-color: var(--ink-3); color: var(--ink-2); }
.badge--defer { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); background: var(--bg-sub); }
.badge--done { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge--warn { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge--neutral { border-color: var(--line); color: var(--ink-3); background: var(--bg); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 3px;
  font-size: var(--fz-xs); color: var(--ink-2); background: var(--bg-sub);
  border: 1px solid var(--line); white-space: nowrap; line-height: 1;
}
.chip--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--outline { background: var(--bg); border-color: var(--ink-2); color: var(--ink-2); }
.chip--dashed { background: var(--bg); border-style: dashed; border-color: var(--ink-4); color: var(--ink-3); }
.proj-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  font-family: var(--mono); font-size: var(--fz-xs); font-weight: 600;
  background: var(--ink); color: #fff; border-radius: 3px; letter-spacing: 0.04em;
}
.proj-chip--outline { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }

/* ---------- 8. 卡片 / 分区块 ---------- */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card + .card, .section + .section { margin-top: var(--s4); }
.section-title {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
}
.section-title h2 { font-size: var(--fz-bd); font-weight: 600; }
.section-title .count { font-family: var(--mono); font-size: var(--fz-sm); color: var(--ink-3); }
.section-title .rule { flex: 1; height: 1px; background: var(--line); }

/* ---------- 9. 筛选胶囊行（分段控件） ---------- */
.pills { display: flex; gap: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; background: var(--bg); width: max-content; max-width: 100%; overflow-x: auto; }
.pills button, .pills a {
  height: 32px; padding: 0 var(--s3); border-radius: 4px;
  font-size: var(--fz-md); color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pills .n { font-family: var(--mono); font-size: var(--fz-xs); color: var(--ink-4); }
.pills button.active { background: var(--ink); color: #fff; }
.pills button.active .n { color: #ffffffa8; }
.pills button:not(.active):hover { background: var(--bg-sub); }
.pills-row { margin-bottom: var(--s4); }

/* 下划线式标签（页面级二选一：统计/管理视角切换） */
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.tabs button, .tabs a {
  position: relative; padding: var(--s2) 2px var(--s3); margin-bottom: -1px;
  font-size: var(--fz-bd); color: var(--ink-3);
}
.tabs button.active { color: var(--ink); font-weight: 600; }
.tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }

/* ---------- 10. 表单 ---------- */
.form { display: flex; flex-direction: column; gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > .label { font-size: var(--fz-md); font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.field > .label .req { color: var(--ink-3); font-weight: 400; }
.field .help { font-size: var(--fz-sm); color: var(--ink-3); line-height: 1.5; }
.input, .select, textarea.input {
  width: 100%; height: var(--ctrl-h);
  padding: 0 var(--s3);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--fz-bd); color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
textarea.input { height: auto; padding: var(--s3); resize: vertical; line-height: 1.6; }
.input:hover, .select:hover { border-color: var(--ink-3); }
.input:focus, .select:focus { outline: none; border-color: var(--ink); background: #fff; }
.input[readonly] { background: var(--bg-sub); color: var(--ink-2); }
.input--error { border-color: var(--danger); }
.form-error { font-size: var(--fz-md); color: var(--danger); }
@media (max-width: 767px) { .input, .select { height: var(--ctrl-h-m); } }

/* PC 双列表单 */
@media (min-width: 768px) {
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
  .form-grid .span-2 { grid-column: span 2; }
}

/* 表单动作区：移动端上下全宽；PC 右对齐（删除甩最左，取消居中，保存主按钮收尾） */
.form-actions { display: flex; flex-direction: column; gap: var(--s2); }
.form-actions .btn { width: 100%; }
@media (min-width: 768px) {
  .form-actions { flex-direction: row; justify-content: flex-end; align-items: center; }
  .form-actions .btn { width: auto; min-width: 128px; }
  .form-actions .btn-primary { order: 3; }
  .form-actions .btn-outline { order: 2; }
  .form-actions .btn-danger-outline { order: 1; margin-right: auto; }
}

/* 10.1 复选行 */
.check { display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; margin-top: 3px; border: 1px solid var(--ink-2); border-radius: 3px; background: #fff; flex: none; display: grid; place-content: center; cursor: pointer; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { content: "✓"; color: #fff; font-size: 12px; line-height: 1; }
.check .txt { font-size: var(--fz-bd); }

/* 10.2 下拉选择（Combobox 静态演示） */
.combo { position: relative; }
.combo .input { padding-right: 36px; cursor: pointer; }
.combo .caret { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; font-size: 10px; }
.combo .addon { position: absolute; right: var(--ctrl-h); top: 1px; bottom: 1px; width: var(--ctrl-h); border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink-2); border-radius: 0 var(--r) var(--r) 0; }
.combo .addon:hover { background: var(--bg-sub); color: var(--ink); }
.combo-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--bg); border: 1px solid var(--ink); border-radius: var(--r);
  max-height: 264px; overflow: auto; display: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.combo.open .combo-menu { display: block; }
.combo-menu li { padding: 10px var(--s3); font-size: var(--fz-bd); display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
.combo-menu li:hover { background: var(--bg-sub); }
.combo-menu li.sel { background: var(--bg-sub); font-weight: 600; }
.combo-menu .sub { margin-left: auto; font-size: var(--fz-sm); color: var(--ink-3); }

/* 10.3 多选制片（标签胶囊） */
.tagbox { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); min-height: var(--ctrl-h); align-items: center; }
.tagbox:focus-within { border-color: var(--ink); }
.tagbox .tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; background: var(--ink); color: #fff; border-radius: 4px; font-size: var(--fz-md); }
.tagbox .tag button { width: 20px; height: 20px; border-radius: 3px; color: #ffffffa8; font-size: 12px; display: grid; place-content: center; }
.tagbox .tag button:hover { color: #fff; background: #ffffff26; }
.tagbox .hint { font-size: var(--fz-sm); color: var(--ink-4); padding: 0 4px; }

/* ---------- 11. 明细行（日期 / 说明 / 金额） ---------- */
.items-head, .items-row { display: grid; grid-template-columns: 132px 1fr 108px 36px; gap: var(--s2); align-items: center; }
.items-head { padding: 0 0 var(--s2); font-size: var(--fz-sm); color: var(--ink-3); }
.items-head .c-amt, .items-row .c-amt { text-align: right; }
.items-row { padding: var(--s1) 0; }
.items-row .del { width: 36px; height: 36px; display: grid; place-content: center; border-radius: var(--r); color: var(--ink-3); font-size: 15px; }
.items-row .del:hover { background: var(--bg-sub); color: var(--danger); }
.items-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--ink); margin-top: var(--s3); padding-top: var(--s3); }
.items-total .t { font-size: var(--fz-md); color: var(--ink-2); }
.items-add { margin-top: var(--s3); }
@media (max-width: 520px) {
  .items-head { display: none; }
  .items-row {
    grid-template-columns: 1fr 116px 32px;
    grid-template-areas: "date amt del" "desc desc desc";
    row-gap: var(--s2);
    align-items: center;
  }
  .items-row .c-date { grid-area: date; }
  .items-row .c-amt { grid-area: amt; }
  .items-row .c-desc { grid-area: desc; }
  .items-row .del { grid-area: del; width: 32px; height: 32px; }
}

/* ---------- 12. 附件选择器 ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 96px; border: 1px dashed var(--ink-3); border-radius: var(--r);
  color: var(--ink-3); font-size: var(--fz-md); cursor: pointer; background: var(--bg);
  padding: var(--s4); text-align: center;
}
.dropzone:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-sub); }
.dropzone .big { font-size: 20px; }
.file-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.file-row .thumb { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 4px; display: grid; place-content: center; background: var(--bg-sub); color: var(--ink-3); flex: none; font-size: 15px; }
.file-row .meta { flex: 1; min-width: 0; }
.file-row .name { font-size: var(--fz-bd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .sub { font-size: var(--fz-sm); color: var(--ink-3); font-family: var(--mono); }
.file-row .rm { width: 32px; height: 32px; display: grid; place-content: center; color: var(--ink-3); border-radius: var(--r); }
.file-row .rm:hover { color: var(--danger); background: var(--bg-sub); }

/* ---------- 13. 列表：PC 表格 / 移动卡片（单一标记自适应） ---------- */
.doc-no { font-weight: 600; color: var(--ink); }
/* 单号弱化版（列表中作为次要信息）：灰色等宽常规字重 */
.doc-no--muted { font-weight: 400; color: var(--ink-3); font-family: var(--mono); font-size: var(--fz-md); }
a.doc-no--muted:hover { color: var(--ink); }
.table td .sub, .t-main .sub { display: block; font-size: var(--fz-sm); color: var(--ink-3); margin-top: 1px; line-height: 1.5; }
/* 项目名在前、单号在后（我递交的/我要审批）：项目名为主文字/主色 #111111 粗体主识别，单号块级换行。
   选择器用 .sub.sub--main 抬高特异性，压过 .table td .sub (0,2,1) 的灰色规则 */
.t-main .sub.sub--main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fz-bd); color: #111111; font-weight: 700; margin-top: 0; line-height: 1.5; }
.t-main a.doc-no--muted { display: block; margin-top: 1px; }
.t-main .sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-wrap { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fz-bd); }
.table th {
  text-align: left; font-size: var(--fz-sm); font-weight: 500; color: var(--ink-3);
  padding: var(--s3) var(--s4); background: var(--bg-sub);
  border-bottom: 1px solid var(--ink); white-space: nowrap;
}
.table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.rowlink { cursor: pointer; transition: background 0.12s; }
.table tbody tr.rowlink:hover { background: var(--bg-sub); }
.table .amt { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.amt { text-align: right; }

/* 移动端：表格折叠为卡片行（data-label 标注字段，保持对齐） */
@media (max-width: 767px) {
  .table-wrap { border: none; background: transparent; }
  .table, .table thead, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s2); }
  .table tbody tr.rowlink:active { background: var(--bg-sub); }
  .table td { border: none; padding: 3px 0; display: flex; align-items: center; gap: var(--s2); }
  .table td::before {
    content: attr(data-label); flex: none; width: 64px;
    font-size: var(--fz-sm); color: var(--ink-4);
  }
  .table td.t-main::before { display: none; }
  .table td.t-main { display: block; padding: 2px 0 var(--s2); }
  .table td.amt { justify-content: space-between; }
  .table td.amt::before { width: auto; }
}

/* 简易卡片列表（无需表格语义处使用） */
.rows { display: flex; flex-direction: column; }
.rows .row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--bg); }
.rows .row:first-child { border-radius: var(--r) var(--r) 0 0; }
.rows .row:last-child { border-bottom: none; border-radius: 0 0 var(--r) var(--r); }
.rows .row:hover { background: var(--bg-sub); }

/* ---------- 14. 状态提示 / 空状态 / 加载 ---------- */
.notice { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 2px solid var(--ink); border-radius: var(--r); background: var(--bg); font-size: var(--fz-md); color: var(--ink-2); margin-bottom: var(--s4); line-height: 1.6; }
.notice .sym { flex: none; font-weight: 700; color: var(--ink); }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.notice--danger { border-left-color: var(--danger); }

.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--ink-4); font-size: var(--fz-md); background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r); }
.loadline { text-align: center; padding: var(--s4); font-size: var(--fz-sm); color: var(--ink-4); font-family: var(--mono); }

/* ---------- 15. 信息详情行（label/value 两栏对齐） ---------- */
.kv { display: grid; grid-template-columns: 88px 1fr; row-gap: var(--s3); column-gap: var(--s4); }
.kv > .k { font-size: var(--fz-md); color: var(--ink-3); align-self: baseline; }
.kv > .v { font-size: var(--fz-bd); min-width: 0; overflow-wrap: anywhere; }
.kv > .v .sub { display: block; font-size: var(--fz-sm); color: var(--ink-3); margin-top: 1px; }
.kv .divider { grid-column: 1 / -1; height: 1px; background: var(--line); }
@media (min-width: 768px) {
  .kv { grid-template-columns: 96px 1fr 96px 1fr; column-gap: var(--s4); }
  .kv .divider { grid-column: 1 / -1; }
}

/* ---------- 16. 审批历史（时间线） ---------- */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 var(--s5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -19px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink);
}
.tl-item.tl-dim::before { border-color: var(--ink-4); }
.tl-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.tl-head .act { font-weight: 600; font-size: var(--fz-bd); }
.tl-head .who { font-size: var(--fz-sm); color: var(--ink-3); }
.tl-head .when { margin-left: auto; font-family: var(--mono); font-size: var(--fz-sm); color: var(--ink-4); white-space: nowrap; }
.tl-note { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--bg-sub); border-radius: 4px; font-size: var(--fz-md); color: var(--ink-2); }
.tl-spec { margin-top: var(--s2); font-size: var(--fz-sm); color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; }
.tl-att { margin-top: var(--s2); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fz-sm); color: var(--ink-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 4px; }

/* ---------- 17. 底部动作栏 / 底部合计栏 ---------- */
.actionbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--mobile-w); z-index: 45;
  background: var(--bg); border-top: 1px solid var(--ink);
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  display: flex; gap: var(--s2); align-items: center;
}
.actionbar .grow { flex: 1; }
.actionbar .hint { font-size: var(--fz-sm); color: var(--ink-3); }
.actionbar .btn { flex: 1; min-width: 0; }
.has-actionbar .content, .has-actionbar.has-tabbar .content { padding-bottom: 120px; }
@media (min-width: 768px) {
  .actionbar { left: var(--side-w); right: 0; width: auto; transform: none; max-width: none; padding: var(--s4) var(--s6); }
  .actionbar .btn { flex: none; min-width: 128px; }
  .has-actionbar .content { padding-bottom: 140px; }
}
.totalbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: var(--tabbar-h); width: 100%; max-width: var(--mobile-w); z-index: 44;
  background: var(--ink); color: #fff;
  padding: var(--s3) var(--s4);
  display: flex; align-items: baseline; gap: var(--s3);
}
.totalbar .lbl { font-size: var(--fz-md); color: #b5b5b5; }
.totalbar .cnt { margin-left: auto; font-size: var(--fz-sm); color: #b5b5b5; font-family: var(--mono); }
.totalbar .money { color: #fff; }
.totalbar .money::before { color: #8a8a8a; }
@media (min-width: 768px) {
  .totalbar { left: var(--side-w); right: 0; width: auto; transform: none; max-width: none; bottom: 0; padding: var(--s4) var(--s6); }
}

/* ---------- 18. 弹窗（PC 居中 / 移动底部抽屉） ---------- */
.modal-mask { position: fixed; inset: 0; z-index: 60; background: rgba(17, 17, 17, 0.45); display: none; }
.modal-mask.open { display: block; }
.modal {
  position: fixed; z-index: 61; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--mobile-w);
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  max-height: 86vh; overflow: auto;
}
.modal-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.modal-head h3 { font-size: var(--fz-lg); font-weight: 700; flex: 1; }
.modal-head .x { width: 32px; height: 32px; display: grid; place-content: center; border-radius: 6px; color: var(--ink-3); font-size: 16px; }
.modal-head .x:hover { background: var(--bg-sub); color: var(--ink); }
.modal-body { font-size: var(--fz-bd); color: var(--ink-2); line-height: 1.7; }
.modal-foot { display: flex; gap: var(--s2); margin-top: var(--s5); }
.modal-foot .btn { flex: 1; }
@media (min-width: 768px) {
  .modal {
    bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: 480px; max-width: 90vw; border-radius: var(--r-lg);
    padding: var(--s5); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
  }
  .modal-foot { justify-content: flex-end; }
  .modal-foot .btn { flex: none; min-width: 96px; }
}

/* ---------- 19. 悬浮新建按钮（FAB） ---------- */
.fab-wrap { position: fixed; right: max(var(--s4), calc(50% - var(--mobile-w) / 2 + var(--s4))); bottom: calc(var(--tabbar-h) + var(--s4)); z-index: 46; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 22px;
  display: grid; place-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s;
}
.fab:hover { transform: scale(1.05); }
.fab-menu { display: none; flex-direction: column; gap: var(--s2); }
.fab-wrap.open .fab-menu { display: flex; }
.fab-menu a {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--bg); border: 1px solid var(--ink); border-radius: 24px;
  height: 40px; padding: 0 var(--s4) 0 6px; font-size: var(--fz-bd); font-weight: 500;
}
.fab-menu a .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-content: center; font-size: 13px; }
@media (min-width: 768px) {
  .fab-wrap { right: var(--s6); bottom: var(--s6); }
}

/* ---------- 20. 搜索框 ---------- */
.search { position: relative; margin-bottom: var(--s4); }
.search .input { padding-left: 36px; }
.search .sym { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 14px; pointer-events: none; }
.search .clear { position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: none; place-content: center; color: var(--ink-3); background: var(--bg-sub); }
.search.has-value .clear { display: grid; }

/* ---------- 21. 统计卡片（分桶） ---------- */
.stat-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.stat-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.stat-head .name { font-size: var(--fz-lg); font-weight: 600; }
.stat-role { display: flex; gap: 4px; margin-left: auto; }
.buckets { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 560px) { .buckets { grid-template-columns: 1fr 1fr; } }
.bucket { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.bucket-title { padding: var(--s2) var(--s3); font-size: var(--fz-sm); font-weight: 600; color: var(--ink-2); background: var(--bg-sub); border-bottom: 1px solid var(--line); display: flex; }
.bucket-title .money { margin-left: auto; }
.stat-line { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3); font-size: var(--fz-md); color: var(--ink-2); cursor: pointer; }
.stat-line .money { margin-left: auto; }
.stat-line .cnt { font-family: var(--mono); font-size: var(--fz-sm); color: var(--ink-4); width: 52px; text-align: right; }
.stat-line .caret { font-size: 10px; color: var(--ink-4); transition: transform 0.15s; width: 12px; }
.stat-line.open .caret { transform: rotate(90deg); }
.stat-sub { display: none; border-top: 1px dashed var(--line); margin: 0 var(--s3); }
.stat-sub.open { display: block; }
.stat-sub .line { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; font-size: var(--fz-sm); color: var(--ink-3); border-bottom: 1px dashed var(--line); }
.stat-sub .line:last-child { border-bottom: none; }
.stat-sub .line .money { margin-left: auto; }
.stat-total { display: flex; align-items: baseline; padding: var(--s2) var(--s3) var(--s3); font-size: var(--fz-md); }
.stat-total .money { margin-left: auto; font-weight: 600; }
@media (min-width: 768px) {
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

/* ---------- 22. 用户卡片（用户管理） ---------- */
.user-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 640px) { .user-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.user-card { display: flex; gap: var(--s3); padding: var(--s4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff; display: grid; place-content: center;
  font-size: var(--fz-lg); font-weight: 600;
}
.avatar--outline { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }
.user-card .info { flex: 1; min-width: 0; }
.user-card .nm { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.user-card .nm b { font-size: var(--fz-bd); }
.user-card .id { font-size: var(--fz-sm); color: var(--ink-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.user-card .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--s2); }
.user-card .ops { display: flex; flex-direction: column; gap: var(--s2); justify-content: center; }

/* ---------- 23. 单据卡片（移动端首页列表） ---------- */
.bill-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s2); display: block; }
.bill-card:active { background: var(--bg-sub); }
.bill-card .r1 { display: flex; align-items: center; gap: var(--s2); }
.bill-card .r1 .proj { font-size: var(--fz-md); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-card .r1 .amt { margin-left: auto; }
.bill-card .r2 { display: flex; align-items: center; gap: var(--s2); margin-top: 6px; font-size: var(--fz-sm); color: var(--ink-3); flex-wrap: wrap; }
.bill-card .no { position: absolute; right: var(--s4); bottom: var(--s2); font-family: var(--mono); font-size: var(--fz-xs); color: var(--ink-4); }

/* ---------- 24. 登录页 ---------- */
.login-shell { min-height: 100vh; display: flex; flex-direction: column; }
.login-hero { background: var(--ink); color: #fff; padding: var(--s7) var(--s5) var(--s6); }
.login-hero .t1 { font-size: 28px; font-weight: 700; letter-spacing: 0.06em; }
.login-hero .t2 { margin-top: var(--s2); font-size: var(--fz-bd); color: #b5b5b5; }
.login-hero .mark { margin-bottom: var(--s5); font-family: var(--mono); font-size: var(--fz-sm); letter-spacing: 0.3em; color: #8a8a8a; }
.login-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s5) var(--s4); }
.login-card { width: 100%; max-width: 360px; }
.login-div { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0; color: var(--ink-4); font-size: var(--fz-sm); }
.login-div::before, .login-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (min-width: 768px) {
  .login-shell { flex-direction: row; }
  .login-hero { width: 42%; max-width: 520px; padding: var(--s7); display: flex; flex-direction: column; justify-content: space-between; }
  .login-hero .t1 { font-size: 36px; }
  .login-body { padding: var(--s6); }
}

/* ---------- 25. 演示辅助（原型专用，不参与实际设计） ---------- */
.demo-note { font-size: var(--fz-xs); color: var(--ink-4); border: 1px dashed var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); margin-bottom: var(--s4); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.demo-note b { color: var(--ink-3); font-weight: 600; }
.demo-switch { display: inline-flex; gap: 2px; }
.demo-switch button { height: 24px; padding: 0 8px; border-radius: 4px; font-size: var(--fz-xs); color: var(--ink-3); border: 1px solid var(--line); }
.demo-switch button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* =====================================================================
   应用实现追加段（设计系统 base.css 之外，真实应用需要的少量补充）
   ===================================================================== */

/* 附件查看弹窗 */
.viewer-body { display: flex; align-items: center; justify-content: center; background: var(--bg-sub); border-radius: var(--r); overflow: auto; padding: var(--s2); }
.viewer-body img { max-width: 100%; max-height: 68vh; display: block; }
.viewer-body iframe { width: 100%; height: 68vh; border: none; display: block; background: #fff; }

/* 组件内菜单复用（多选制片的下拉） */
.tagbox-wrap { position: relative; }

/* 分桶行「暂无分类」 */
.stat-sub .line.empty { color: var(--ink-4); }

/* 单选胶囊组（弹窗内） */
.pills--full { width: 100%; }
.pills--full > button { flex: 1; }