/* ============================================================================
 * 办公小助手 —— 鲜艳高对比度主题层（PC + 手机端共用）
 *
 * 加载顺序：**必须排在所有样式之后**（base.html / mobile/base.html 里都放在最后），
 * 这样这里重写的 :root 变量与组件规则才能盖住 app.css / mobile.css 的旧值。
 *
 * 设计取向：
 *   · 主色「电光蓝 #2563ff」+ 辅助「紫罗兰 #7c3aed」做渐变，高饱和、辨识度强
 *   · 正文近黑（#0b1220）、底色冷亮 → 文本对比度全部 ≥ 7:1（WCAG AAA）
 *   · 状态色高饱和：成功绿 / 警告橙 / 危险红，一眼分得清
 *   · 圆角、阴影、过渡统一令牌化，改一处全站变
 *
 * ⚠️ 不要在这里动 z-index：地图页的层叠是被精心排过的
 *    （见 mobile.css 顶部「层叠刻度总表」），改了会让弹窗被地图控件压住。
 * ========================================================================== */

:root {
  /* ---- 品牌色 ---- */
  --brand: #2563ff;
  --brand-600: #1b52f0;
  --brand-700: #1140d1;
  --brand-soft: #e8f0ff;
  --brand-soft-2: #d9e6ff;
  --accent: #7c3aed;
  --accent-soft: #f2eaff;
  --hot: #ff6a00;
  --hot-soft: #fff0e4;

  /* ---- 中性色（高对比）---- */
  --bg: #eef2f9;
  --bg-grad: linear-gradient(180deg, #f6f9ff 0%, #eaeff8 100%);
  --panel: #ffffff;
  --panel-2: #f7f9fd;
  --panel-3: #eff3fa;
  --border: #d8e0ee;
  --border-strong: #b6c3da;
  --text: #0b1220;
  --text-2: #33405a;
  --text-dim: #55627a;
  --text-mute: #8b97ad;

  /* ---- 状态色 ---- */
  --success: #00a870;
  --success-soft: #dff9ef;
  --warn: #ff8f1f;
  --warn-soft: #fff1de;
  --danger: #f5333f;
  --danger-soft: #ffe6e8;
  --info: #0ea5e9;
  --info-soft: #dcf3fd;

  /* 语义高亮：每天数据填报里「本周总合计」行的底色。
   * 纯黄 + 深色字是刻意的强对比标识，不要为了配色统一改成浅色。 */
  --mark-week: #ffff00;

  /* ---- 兼容旧变量名的映射 ----
   * app.css 里大量规则用的是 --primary / --head-bg / --hover / --sel 这些老名字，
   * 这里统一指向新值，就不用逐条改 app.css 了。 */
  --primary: var(--brand);
  --primary-hover: var(--brand-600);
  --head-bg: var(--brand-soft);
  --hover: var(--brand-soft);
  --sel: var(--brand-soft-2);
  --line: var(--border);

  /* ---- 形状 ---- */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 18, 32, .06);
  --shadow-2: 0 2px 6px rgba(11, 18, 32, .07), 0 10px 26px rgba(11, 18, 32, .07);
  --shadow-3: 0 8px 30px rgba(11, 18, 32, .14);
  --shadow-brand: 0 4px 14px rgba(37, 99, 255, .30);
  --ring: 0 0 0 3px rgba(37, 99, 255, .22);
  --t: 160ms cubic-bezier(.4, 0, .2, 1);

  --topbar-h: 56px;
}

/* ============================== 基础 ============================== */
html, body {
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
body { background-image: var(--bg-grad); background-attachment: fixed; }

h1, h2, h3, h4 { color: var(--text); letter-spacing: .2px; }

::selection { background: var(--brand); color: #fff; }

/* 统一焦点环：键盘可达性 + 视觉品质 */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 滚动条美化（Chromium / Safari） */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c3cee2, #aebbd4);
  border: 2px solid transparent; border-radius: 999px; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand), var(--accent)); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================== 顶栏 ============================== */
.topbar {
  height: var(--topbar-h);
  padding: 0 14px;
  gap: 10px;
  background: linear-gradient(100deg, #1f4dff 0%, #2563ff 38%, #7c3aed 100%);
  border-bottom: none;
  box-shadow: 0 2px 14px rgba(31, 77, 255, .32);
}
.topbar::after {
  /* 底部一道亮色细线，让顶栏和页面有明确分隔 */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.05));
  pointer-events: none;
}
.topbar .brand {
  font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 7px; margin-right: 6px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}
.topbar .brand::before {
  content: '📋'; font-size: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.topbar nav { gap: 4px; }
.topbar nav a {
  color: rgba(255, 255, 255, .88);
  font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--t), color var(--t), box-shadow var(--t), transform var(--t);
  position: relative;
}
.topbar nav a:hover {
  background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none;
  transform: translateY(-1px);
}
.topbar nav a.active {
  background: #fff; color: var(--brand-700); font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.topbar nav a.active:hover { transform: none; }
.topbar nav a .ic { font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.topbar nav a.active .ic { filter: none; }
/* 主导航（业务页）与次导航（配置/管理）之间的分隔线 */
.nav-sep {
  flex: none; width: 1px; height: 18px; margin: 0 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.5), rgba(255,255,255,.05));
}

.topbar .user-box { color: rgba(255, 255, 255, .92); gap: 8px; }
.topbar .user-box a { color: #fff; font-weight: 500; }
.topbar .user-box .badge {
  background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255,255,255,.4);
}
.topbar .user-box .btn.sm {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45);
  color: #fff; border-radius: var(--radius-pill);
}
.topbar .user-box .btn.sm:hover { background: rgba(255, 255, 255, .3); }

/* 默认密码告警条 */
.topbar + div[style*="background:#c0392b"] {
  background: linear-gradient(90deg, #d92027, #f5333f) !important;
  font-weight: 500;
}

/* ============================== 页面 / 卡片 ============================== */
.page { padding: 16px; gap: 12px; }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  background: var(--panel);
  transition: box-shadow var(--t), transform var(--t);
}
.card:hover { box-shadow: var(--shadow-2); }
.card + .card { margin-top: 12px; }

.card-head {
  padding: 11px 14px;
  background: linear-gradient(180deg, #fbfcff, #f4f7fd);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}
.card-head::before {
  /* 左侧品牌色竖条 —— 卡片头的视觉锚点 */
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.card-head h3 { font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.card-body { padding: 14px; }

/* ============================== 按钮 ============================== */
.btn {
  height: 34px; padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform var(--t);
}
.btn:hover { background: var(--panel-3); color: var(--text); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.btn.primary:hover { background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); color: #fff; }
.btn.danger { border-color: #f7b5ba; color: var(--danger); background: #fff; }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn.sm { height: 28px; padding: 0 11px; font-size: 12px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================== 表单控件 ============================== */
input[type=text], input[type=password], input[type=number], input[type=search],
input[type=date], select, textarea {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
  font-size: 13px;
  transition: border-color var(--t), box-shadow var(--t);
}
input:hover, select:hover, textarea:hover { border-color: #9fb0cd; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: var(--ring); outline: none;
}
input::placeholder { color: var(--text-mute); }
textarea { min-height: 64px; padding: 8px 11px; line-height: 1.6; }

label.field { color: var(--text-dim); font-weight: 500; }
.cfg-text { border-color: var(--border-strong); border-radius: var(--radius-sm); }
.cfg-text:focus { box-shadow: var(--ring); }

/* ============================== 表格 ============================== */
table.tbl { border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tbl th, table.tbl td {
  border: none; border-bottom: 1px solid var(--border);
  padding: 8px 11px;
}
table.tbl th {
  background: linear-gradient(180deg, #f4f7fd, #e9f0fb);
  color: var(--text);
  font-weight: 700; letter-spacing: .3px;
  position: sticky; top: 0;
  box-shadow: inset 0 -2px 0 var(--brand-soft-2);
  white-space: nowrap;
}
table.tbl td { color: var(--text-2); }
table.tbl tbody tr { transition: background var(--t); }
table.tbl tbody tr:nth-child(even) { background: #fafcff; }
table.tbl tbody tr:hover { background: var(--brand-soft); }
table.tbl tbody tr:hover td { color: var(--text); }

/* ============================== 虚拟滚动网格（大表） ============================== */
.grid-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.ghead {
  background: linear-gradient(180deg, #f4f7fd 0%, #e7eefb 100%);
  color: var(--text); font-weight: 700; letter-spacing: .2px;
  border-right-color: var(--border);
  border-bottom: 2px solid var(--brand-soft-2) !important;
}
.growno {
  background: linear-gradient(180deg, #f4f7fd, #e9f0fb);
  color: var(--text-dim); font-weight: 600;
  border-right-color: var(--border);
}
.gcell {
  background: #fff; color: var(--text-2);
  border-right-color: #eaeff7; border-bottom-color: #eaeff7;
  font-size: 13px;
}
.gcell.sel { background: var(--brand-soft-2); color: var(--text); }
.gcell.hit { background: #fff4cf; color: #7a4b00; }
.gcell.cur { outline: 2px solid var(--brand); outline-offset: -2px; }
.gcell input {
  border: 2px solid var(--brand); border-radius: 2px;
  box-shadow: var(--ring); background: #fff; color: var(--text);
}
.gcorner {
  background: linear-gradient(180deg, #f4f7fd, #e7eefb);
  border-right: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--brand-soft-2);
}

/* ============================== 弹窗 ============================== */
.modal-mask { background: rgba(11, 18, 32, .52); backdrop-filter: blur(3px); padding: 24px; }
.modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border);
  animation: modal-in 180ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  padding: 13px 16px;
  background: linear-gradient(180deg, #fbfcff, #f3f7fd);
  border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700;
}
.modal-body { padding: 16px; }
.modal-foot {
  padding: 12px 16px; background: var(--panel-2);
  border-top: 1px solid var(--border);
}
.x { color: var(--text-mute); font-size: 22px; }
.x:hover { color: var(--danger); }

/* ============================== 提示 / 徽章 ============================== */
.toast {
  top: 72px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  background: rgba(11, 18, 32, .94);
  box-shadow: var(--shadow-2);
  animation: toast-in 200ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translateX(-50%); } }
.toast.ok { background: linear-gradient(135deg, #00a870, #00c48a); }
.toast.err { background: linear-gradient(135deg, #e0121f, #f5333f); }

.badge { background: var(--panel-3); color: var(--text-2); font-weight: 600; border-radius: var(--radius-pill); padding: 2px 10px; }
.badge.ok   { background: var(--success-soft); color: #00794f; }
.badge.warn { background: var(--warn-soft);   color: #b35a00; }
.badge.err  { background: var(--danger-soft); color: #c8141f; }

.muted { color: var(--text-dim); }
.empty { color: var(--text-mute); padding: 48px; }

/* ============================== 统计卡片 ============================== */
.stat-row { gap: 12px; }
.stat {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 18px; min-width: 116px;
  background: linear-gradient(160deg, #ffffff 0%, #f7faff 100%);
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.stat .n {
  font-size: 24px; font-weight: 700; line-height: 1.15;
  background: linear-gradient(135deg, var(--brand-700), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-700);
}
.stat .l { color: var(--text-dim); font-size: 12px; font-weight: 500; margin-top: 2px; }

.stat-grid { gap: 12px; }
.stat-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 18px;
  background: linear-gradient(160deg, #ffffff 0%, #f8faff 100%);
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.stat-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.stat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.stat-label { color: var(--text-dim); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.stat-value, .stat-num {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, var(--brand-700), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-700);
}
.stat-num.ok   { background: none; -webkit-text-fill-color: currentColor; color: var(--success); }
.stat-num.warn { background: none; -webkit-text-fill-color: currentColor; color: var(--warn); }
.stat-num.err  { background: none; -webkit-text-fill-color: currentColor; color: var(--danger); }
.stat-sub { color: var(--text-dim); }
.stat-sub b { color: var(--text); font-weight: 700; }

/* ============================== 标签 / 分段控件 ============================== */
label.chip, .chip {
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: var(--radius-pill); padding: 4px 12px;
  color: var(--text-2); font-weight: 500;
  transition: border-color var(--t), background var(--t), color var(--t);
}
label.chip:hover, .chip:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-700); }

.chip-btn {
  border: 1px solid var(--border); background: #fff;
  border-radius: var(--radius-sm); padding: 5px 14px;
  color: var(--text-dim); font-weight: 500;
  transition: all var(--t);
}
.chip-btn:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); }
.chip-btn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: var(--shadow-brand);
}

/* ============================== 右键菜单 ============================== */
.ctx-menu {
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-3); padding: 5px; background: #fff;
  animation: modal-in 120ms ease-out;
}
.ctx-menu button { border-radius: 6px; font-weight: 500; padding: 8px 12px; }
.ctx-menu button:hover { background: var(--brand-soft); color: var(--brand-700); }
.ctx-menu hr { border-top-color: var(--border); }

/* ============================== 协作光标 ============================== */
.rt-member {
  background: var(--brand-soft); border-color: var(--brand-soft-2);
  color: var(--text-2); font-weight: 600; border-radius: var(--radius-pill);
  padding: 2px 10px 2px 6px;
}
.rt-member.editing { border-color: var(--brand); box-shadow: var(--ring); }

/* ============================== 手机端 ============================== */
html.m-root body { background-image: var(--bg-grad); }
html.m-root { --mtop-h: 52px; }

.m-top {
  background: linear-gradient(100deg, #1f4dff 0%, #2563ff 45%, #7c3aed 100%);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(31, 77, 255, .3);
  padding-left: 6px; padding-right: 4px;
}
.m-top .m-title { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.m-top .m-title small { color: rgba(255, 255, 255, .82); }
.m-ico { color: #fff; border-radius: 12px; }
.m-ico:active { background: rgba(255, 255, 255, .22); }
.m-ico.m-dot[data-n]:not([data-n="0"])::after {
  background: var(--hot); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

/* 底部 Tab：激活项图标上浮 + 渐变胶囊 */
.m-tabs {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(11, 18, 32, .08);
  padding-bottom: var(--msafe-b);
  height: calc(var(--mtab-h) + var(--msafe-b));
}
.m-tab { color: var(--text-mute); font-weight: 500; transition: color var(--t), transform var(--t); }
.m-tab svg { transition: transform var(--t); }
.m-tab:active { transform: scale(.94); }
.m-tab.on { color: var(--brand-700); font-weight: 700; }
.m-tab.on svg { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 2px 6px rgba(37, 99, 255, .45)); }
.m-tab.on::before {
  /* 激活项顶部一道渐变指示条 */
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* 手机端卡片 / 按钮 */
.m-card, .m-sec {
  border-radius: var(--radius-lg);
}
.m-btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.m-btn:active { transform: scale(.98); }
.m-btn.pri, .m-btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  box-shadow: var(--shadow-brand);
}
.m-tag {
  border-radius: var(--radius-pill); font-weight: 600;
  background: var(--brand-soft); color: var(--brand-700);
}
.m-tag.pri { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; }

/* 手机端表格面板：更清晰的斑马纹与表头 */
.m-sheet-tb th, .m-tbl th {
  background: linear-gradient(180deg, #f4f7fd, #e7eefb) !important;
  color: var(--text); font-weight: 700;
}
.m-sheet-tb tbody tr:nth-child(even), .m-tbl tbody tr:nth-child(even) { background: #fafcff; }

/* ---- 手机端卡片列表 ---- */
.m-list { gap: 9px; }
.m-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  padding: 12px 13px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.m-card:active { transform: scale(.985); box-shadow: var(--shadow-1); background: var(--brand-soft); }
.m-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft-2); }
.m-card .m-h { font-weight: 700; color: var(--text); }
.m-card .m-n { color: var(--brand-700); font-weight: 700; }

/* ---- 分节标题：左侧渐变竖条 + 计数徽章 ---- */
.m-sec {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text);
  padding-left: 10px; position: relative;
  margin-top: 4px;
}
.m-sec::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
/* ⚠️ 必须写成 .m-sec .m-sec-n（0,2,0）：mobile.css:114 有同特异性规则
   .m-sec .m-sec-n { color: var(--text-dim); font-weight:400 }，若这里只写
   .m-sec-n（0,1,0）会被压住 → 渐变底 + 暗灰字 = 低对比度（2026-09-18 用户反馈）。
   本文件加载在 mobile.css 之后，同特异性即按顺序胜出 → 白字 + 加粗。 */
.m-sec .m-sec-n {
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
  font-weight: 700; border-radius: var(--radius-pill); padding: 1px 9px; font-size: 12px;
}

/* ---- 手机端统计卡 ---- */
.m-stat {
  border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(160deg, #ffffff, #f8faff);
  box-shadow: var(--shadow-1);
}
.m-stat .m-n, .m-grid2 .m-n {
  background: linear-gradient(135deg, var(--brand-700), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-700);
  font-weight: 700;
}

/* ---- 状态标签：高饱和、一眼分得清 ---- */
.m-tag.ok   { background: var(--success-soft); color: #00794f; font-weight: 700; }
.m-tag.warn { background: var(--warn-soft); color: #a85400; font-weight: 700; }
.m-tag.err  { background: var(--danger-soft); color: #c8141f; font-weight: 700; }
.m-tag.pri  { background: var(--brand-soft); color: var(--brand-700); font-weight: 700; }

/* ---- 底部抽屉：顶部一线渐变 + 头部更清晰 ---- */
.m-sheet { border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(11, 18, 32, .22); }
.m-sheet::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.m-sh-head {
  font-weight: 700; font-size: 16px;
  background: linear-gradient(180deg, #fbfcff, #f4f7fd);
  border-bottom: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
}
.m-sh-foot { border-top: 1px solid var(--border); background: var(--panel-2); }

/* ---- 输入框 / 工具行 ---- */
.m-search input, .m-field input, .m-field select, .m-field textarea { border-radius: 10px; }
.m-search input { border-color: var(--border-strong); }
.m-chip, .m-chips .m-chip {
  border: 1px solid var(--border); background: #fff; border-radius: var(--radius-pill);
  font-weight: 600; color: var(--text-2);
}
.m-chip.on {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border-color: transparent; color: #fff; box-shadow: var(--shadow-brand);
}
.m-more { padding: 14px 0 4px; }
.m-tblpage { border-radius: var(--radius-sm); }

/* 手机端按钮变体（.primary 上面已给渐变；这里补 ghost / on / block） */
.m-btn { min-height: 38px; font-size: 13.5px; padding: 0 14px; }
.m-btn.block { width: 100%; }
.m-btn.ghost { background: var(--panel-2); border-color: var(--border); color: var(--text-2); }
.m-btn.on {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-700); font-weight: 700;
}

/* 工具行：贴顶时半透明毛玻璃，滚动内容从下面穿过，层次更清楚 */
.m-tools {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(11, 18, 32, .05);
}
.m-tools .m-trow { gap: 8px; }

/* 详情面板里的信息行：标签浅、值重，扫读更快 */
.m-iw .kv { border-bottom: 1px dashed var(--border); padding: 7px 0; }
.m-iw .kv:last-child { border-bottom: none; }
.m-iw .kv.hazard { background: var(--danger-soft); border-radius: var(--radius-sm); padding: 7px 9px; }
.m-iw .kv.risk { background: var(--warn-soft); border-radius: var(--radius-sm); padding: 7px 9px; }
.m-iw h4 {
  font-size: 14px; font-weight: 700; color: var(--text);
  padding-left: 9px; position: relative; margin: 12px 0 6px;
}
.m-iw h4::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.m-iw .btns button, .m-iw .btns a { border-radius: var(--radius-sm); font-weight: 600; }

/* ============================== 排版密度与操作体验 ==============================
 * 目标：同一屏里多放控件、少占纵向空间，但不牺牲可点性
 * （小按钮 28px 高 + 8px 间距 = 36px 有效触控带，鼠标端绰绰有余）。 */
.card-head {
  padding: 8px 12px;
  gap: 8px;
  row-gap: 6px;
}
.card-head h3 { margin-right: 2px; }
/* 同一张卡片的第二、三行工具栏：靠一条细线区分，而不是再加边框与阴影 */
.card-head + .card-head {
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: linear-gradient(180deg, #fafcff, #f5f8fd);
}
.card-head + .card-head::before { display: none; }
.card-head .muted { font-size: 12px; white-space: nowrap; }

/* 卡片头里的控件统一次高度，避免高矮不齐 */
.card-head input[type=text], .card-head input[type=date], .card-head select { height: 30px; }
.card-head input[type=date] { width: 132px; padding: 0 6px; }
.card-head .btn { height: 30px; }
.card-head .btn.sm { height: 28px; }

/* 表格：数字/日期列用等宽数字，纵向对齐、一眼比对 */
table.tbl td, table.tbl th { font-variant-numeric: tabular-nums; }
.gcell, .growno { font-variant-numeric: tabular-nums; }

/* 行悬停时给首列一点强调，长表格里更好定位「我在看哪一行」 */
table.tbl tbody tr:hover td:first-child { color: var(--brand-700); font-weight: 600; }

/* ============================== 表格全屏拓展 / 恢复原始尺寸 ==============================
 * 四处共用：PC 企业台账 `/`、在线工作簿 `/spreadsheet` 拓的是 `.page.full`（工具栏 + 表格整体）；
 * 手机端 `/m`、`/m/sheet` 拓的是 `.m-body`（表格面板，所以切换按钮必须放进去，否则全屏后没退出入口）。
 * ⚠️ 用 position:fixed 做「假全屏」而不是 Fullscreen API：iOS Safari / 微信 webview 对非 video
 *    元素不支持 requestFullscreen，fixed 铺满在哪都能用。
 * ⚠️ z-index 900：压住 topbar(100)，但低于 modal(1000)/toast(2000)/右键菜单(9999)，
 *    保证全屏下弹窗、提示、右键菜单仍浮在表格之上。
 * ⚠️ PC 侧工具栏有 5 行 card-head，不限高会把表格挤没影 —— 给它一个上限让它自己滚。 */
.tbl-expand {
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100% !important; height: 100% !important;
  max-height: none !important; margin: 0 !important; padding: 8px !important;
  border: none !important; border-radius: 0 !important;
  z-index: 900;
  background: var(--bg, #f4f6f9);
  overflow: hidden !important;
  display: flex; flex-direction: column;
}
.tbl-expand > .card { flex: none; max-height: 45vh; overflow: auto; }
/* 全屏态 = 干净看数据：隐藏工具栏各行（搜索/筛选/结构/数据/视图…），
   第一行也只保留标题、实时徽标与「还原尺寸」按钮，其余编辑控件全部隐藏。 */
.tbl-expand > .card > .card-head:not(:first-child) { display: none !important; }
.tbl-expand > .card > .card-head:first-child > :not(h3):not(#btn-full):not(.rt-badge):not(.spacer):not([style]) { display: none !important; }
html.has-tbl-full, html.has-tbl-full body { overflow: hidden; }

/* 工具栏按钮之间用轻微的分隔，而不是全靠留白 */
.toolbar > .btn + .btn { margin-left: -2px; }

/* 键盘焦点在表格里也要看得见 */
.grid-scroll:focus-within { box-shadow: inset 0 0 0 2px var(--brand-soft-2); }

/* ============================== 响应式 ============================== */
@media (max-width: 768px) {
  .topbar { padding: 0 8px; }
  .page { padding: 10px; }
  .card { border-radius: var(--radius); }
  .stat .n, .stat-value, .stat-num { font-size: 22px; }
}