/* =========================================================================
   采购中心 · 待办工作台（网页版）
   —— 复刻自桌面版的「Minimal 深色」设计体系，并补充浅色主题。
   色板取自桌面版 ui_theme：底 #0D0D0D / 卡片 #151515 / 浮层 #1A1A1A /
   边框 #262626 / 主文字 #EDEDED / 次文字 #8C8C8C；强调色 蓝/绿/橙/红/青。
   ========================================================================= */

/* ---------------- 主题变量 ---------------- */
:root {
  /* 刘海屏 / 灵动岛：viewport-fit=cover 会把页面顶到状态栏下面，顶部必须自己留出安全区 */
  --safe-top:  env(safe-area-inset-top, 0px);
  --bg:        #0D0D0D;
  --card:      #151515;
  --card2:     #1A1A1A;
  --hover:     #1F1F1F;
  --line:      #262626;
  --line-soft: #1F1F1F;
  --text:      #EDEDED;
  --text2:     #8C8C8C;
  --text3:     #595959;
  --blue:   #3B82F6;
  --green:  #72A57C;
  --orange: #D9A45B;
  --red:    #E06C6C;
  --cyan:   #5B9BD5;
  --purple: #9B7EDE;
  --blue-soft:   rgba(59, 130, 246, .14);
  --green-soft:  rgba(114, 165, 124, .16);
  --orange-soft: rgba(217, 164, 91, .15);
  --red-soft:    rgba(224, 108, 108, .15);
  --cyan-soft:   rgba(91, 155, 213, .15);
  --sel:      #56d364;              /* 行选中/勾选语义色（用户指定） */
  --sel-text: #0b2f13;              /* 选中行上的深色文字 */
  --purple-soft: rgba(155, 126, 222, .15);
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 10px 32px rgba(0, 0, 0, .4);
  --scroll-thumb: #333333;
}
[data-theme="light"] {
  --bg:        #F3F4F6;
  --card:      #FFFFFF;
  --card2:     #F8F9FB;
  --hover:     #F1F3F5;
  --line:      #E4E7EB;
  --line-soft: #EEF0F2;
  --text:      #1F2328;
  --text2:     #6B7280;
  --text3:     #9CA3AF;
  --blue:   #2563EB;
  --green:  #3E8E5A;
  --sel:      #2DA44E;              /* 浅色主题下用更深的绿，保证对比度 */
  --sel-text: #ffffff;
  --orange: #B97E2C;
  --red:    #D14D4D;
  --cyan:   #2E7CBF;
  --purple: #7C5CD6;
  --blue-soft:   rgba(37, 99, 235, .10);
  --green-soft:  rgba(62, 142, 90, .12);
  --orange-soft: rgba(185, 126, 44, .13);
  --red-soft:    rgba(209, 77, 77, .10);
  --cyan-soft:   rgba(46, 124, 191, .11);
  --purple-soft: rgba(124, 92, 214, .12);
  --shadow: 0 10px 28px rgba(15, 23, 42, .10);
  --scroll-thumb: #C9CDD3;
}

/* ---------------- 基础 ---------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
.mono, .num { font-variant-numeric: tabular-nums; }

.app { display: flex; height: 100vh; min-height: 0; }

/* ---------------- 侧栏 ---------------- */
.sidebar {
  width: 234px; flex: none;
  background: var(--bg);
  border-right: 1px solid var(--line-soft);
  padding: calc(22px + var(--safe-top)) 12px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 22px; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark:not(:has(img)) {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--blue); color: #0D0D0D;
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
[data-theme="light"] .brand-mark { color: #fff; }
.brand-text strong, .brand-text span { display: block; }
.brand-text strong { font-size: 15px; letter-spacing: .4px; }
.brand-text span { color: var(--text2); font-size: 12px; margin-top: 1px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group {
  color: var(--text3); font-size: 11px; letter-spacing: 1px;
  padding: 18px 12px 7px;
}
.nav-item {
  width: 100%; background: none; border: 0; border-radius: 8px;
  color: var(--text2); padding: 9px 12px; text-align: left;
  display: flex; align-items: center; gap: 10px;
  position: relative; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active { background: var(--card2); color: var(--text); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--green);
}
.nav-ic { display: inline-flex; color: var(--text2); }
.nav-item.active .nav-ic, .nav-item:hover .nav-ic { color: var(--green); }
.nav-label { flex: 1; font-size: 13px; }
.nav-badge {
  font-size: 11px; color: var(--text2);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 8px; min-width: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-badge { color: var(--text); }

/* ---- 侧栏折叠组（合同支付 → 付款计划 / 合同看板） ---- */
.nav-fold { display: flex; flex-direction: column; gap: 2px; }
.nav-fold-head { width: 100%; }
.nav-caret { display: inline-flex; align-items: center; color: var(--text2); transition: transform .18s; }
.nav-fold-head:hover .nav-caret { color: var(--text); }
.nav-fold.collapsed .nav-caret { transform: rotate(-90deg); }
.nav-sub { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 3px 28px; }
.nav-fold.collapsed .nav-sub { display: none; }
.nav-subitem {
  position: relative; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--text3); font-size: 12.5px; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-subitem:hover { background: var(--card); color: var(--text2); }
.nav-subitem.active { background: var(--card2); color: var(--text); }
.nav-subitem.active::before {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 13px; border-radius: 2px; background: var(--green);
}

.sidebar-foot {
  margin-top: auto; padding: 13px 11px 4px;
  border-top: 1px solid var(--line-soft);
  color: var(--text3); font-size: 11px;
}
.foot-line { display: flex; align-items: center; gap: 6px; }
.foot-line.dd-click { cursor: pointer; border-radius: 5px; }
.foot-line.dd-click:hover { color: var(--text2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.foot-note { margin-top: 5px; }

/* ---------------- 主区 ---------------- */
/* 外壳：整屏高度，主区不再随内容长高 —— 内容区自己滚（窗口再小也不会被裁掉） */
.main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--safe-top) 48px 0 30px; }
/* 右侧 48px / 左侧 30px（2026-10-17 用户在三档对比中选定 48px）。
   滚动条位置由浏览器固定在窗口最右侧，这里通过右侧内边距控制「内容距窗口边缘的距离」。 */
.topbar { flex: none; }
.topbar {
  height: 84px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.eyebrow { font-size: 11px; letter-spacing: 1.4px; color: var(--text3); text-transform: uppercase; }
.topbar h1 { font-size: 21px; margin: 3px 0 0; font-weight: 650; }
.topbar-lead { display: flex; flex-direction: column; min-width: 0; }

/* 驾驶舱：问候语 + 摘要搬进顶栏（原来的大块 hero 取消 → 省下一屏纵向空间） */
.topbar.hero-mode .topbar-lead { justify-content: center; }
.topbar.hero-mode #page-title { order: -1; margin: 0; font-size: 22px; letter-spacing: .2px; }
.topbar.hero-mode #page-eyebrow {
  margin-top: 4px; font-size: 12.5px; letter-spacing: 0; text-transform: none;
  color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar.hero-mode #page-eyebrow b { color: var(--text); font-weight: 600; }
.tb-date { font-size: 12.5px; color: var(--blue); white-space: nowrap; margin-right: 4px; font-variant-numeric: tabular-nums; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.icon-btn {
  width: 34px; height: 34px; border: 1px solid var(--line);
  background: var(--card); color: var(--text2); border-radius: 8px;
  /* 用 flex 而不是 grid：Safari 对 <button> 上的 display:grid 支持有缺陷，
     place-items:center 经常不生效，图标会退回左对齐（手机上尤其明显）。
     padding 显式归零，避免通用 button 的 1px 6px 把内容挤偏。 */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; flex: none;
  transition: color .15s, border-color .15s;
}
.icon-btn > svg, .icon-btn > .ic { display: block; flex: none; margin: auto; }
.icon-btn { text-align: center; }   /* 万一某浏览器不认 flex，至少不会左对齐 */
.icon-btn:hover { color: var(--text); border-color: var(--text3); }
.avatar {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--blue);
  background: var(--blue); color: #0D0D0D; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; flex: none;
}
[data-theme="light"] .avatar { color: #fff; }

.page { display: none; padding-top: 22px; animation: pageIn .22s ease; }
.page::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* 老浏览器（Win7）同样隐藏页面滚动条 */
.page.active {
  display: block; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; padding-bottom: 34px;
  /* 页面滚动条一律不显示（用户要求：右侧那条一直不显示）；页面仍可用滚轮 / 键盘 / 触摸板滚动 */
  scrollbar-width: none;
}
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------- 驾驶舱 · 问候头 ---------------- */
.hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: 4px 2px 18px;
}
.hero h2 { margin: 0 0 4px; font-size: 23px; font-weight: 650; }

/* ---------------- KPI 卡 ---------------- */
.kpi-grid {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;
  transition: border-color .15s;
}
.kpi:hover { border-color: var(--text3); }
.kpi-ic {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
}
.kpi-body { min-width: 0; }
.kpi-label { color: var(--text2); font-size: 12px; white-space: nowrap; }
.kpi-value {
  font-size: 25px; font-weight: 650; line-height: 1.25; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--text2); margin-left: 3px; }
.kpi-note { color: var(--text3); font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- 布局网格 ---------------- */
.content-grid {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, .88fr);
  align-items: stretch;   /* 两列等高，避免右列底部留一块空白 */
}
/* 左列：面板撑满行高，待办列表占住剩余空间（列表内部滚动，随窗口高度自动伸缩） */
.content-grid > .panel { display: flex; flex-direction: column; min-height: 0; }
.content-grid > .panel .todo-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
/* 右列：两张卡纵向排列，最后一张（未来付款分布）吃掉剩余高度，柱状图跟着长高 */
.content-grid > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.content-grid > div > .panel + .panel { margin-top: 0; }
.content-grid > div > .panel:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.content-grid > div > .panel:last-child .bars { flex: 1 1 auto; align-items: stretch; }
.content-grid > div > .panel:last-child .bar-col { height: 100%; justify-content: flex-end; }
/* 必须给轨道一个确定高度：柱子高度是百分比，父级 auto 会塌成 3px */
.content-grid > div > .panel:last-child .bar-track { height: 96px; flex: 0 0 auto; }

/* 驾驶舱：整页按「剩余高度」伸缩 —— 窗口高就铺满，窗口矮就自动压缩
   （待办列表内部滚动、柱状图变矮），任何窗口尺寸都不会被裁切。 */
/* ⚠️ 必须挂 .active：否则 ID 特异性(1-0-0)穿透 `.page { display: none }`(0-1-0)，
   驾驶舱在切走后仍常显、把其它页面挤压成一条。 */
#page-cockpit.active { display: flex; flex-direction: column; gap: 18px; }
#page-cockpit .kpi-grid { flex: none; margin-bottom: 0; }
/* ⚠️ 网格行也要约束成 1fr：只设容器高度，行仍是 auto → 内容不肯缩，矮窗口就被顶出去 */
#page-cockpit .content-grid { flex: 1 1 auto; min-height: 300px; grid-template-rows: minmax(0, 1fr); }

/* KPI 卡：宽窗口 6 列一行 → 中窗口 3+3 → 窄窗口 2+2+2（换行整齐，不留孤卡） */
@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 单列堆叠（窄窗口）：退回普通块流，两块按内容各占各的高度，靠页面滚动 */
@media (max-width: 980px) {
  #page-cockpit .content-grid { display: block; min-height: 0; }
  .content-grid > .panel { display: block; }
  .content-grid > div { display: block; }
  .content-grid > .panel + div { margin-top: 16px; }
  .content-grid > div > .panel + .panel { margin-top: 16px; }
  .content-grid > .panel .todo-scroll { max-height: 46vh; }
  .content-grid > div > .panel:last-child { min-height: 0; display: block; }
  .content-grid > div > .panel:last-child .bars { min-height: 150px; }
  .content-grid > div > .panel:last-child .bar-col { height: auto; }
  .content-grid > div > .panel:last-child .bar-track { height: 82px; flex: none; }
}

/* 窗口偏矮：整体收紧一档（顶栏 / 页头留白 / KPI 卡内边距） */
@media (max-height: 820px) {
  .topbar { height: 72px; }
  .page { padding-top: 14px; }
  .kpi-grid { gap: 10px; }
  .kpi { padding: 11px 13px; }
  #page-cockpit { gap: 12px; }
  .content-grid { gap: 12px; }
  .content-grid > div { gap: 12px; }
}
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.panel + .panel { margin-top: 16px; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 18px 12px;
}
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.panel-head .sub { color: var(--text3); font-size: 11.5px; margin-top: 2px; }
.muted { color: var(--text2); font-size: 12px; }

/* ---------------- 待办列表（驾驶舱合并列表） ---------------- */
.tabs { display: inline-flex; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.tabs button {
  border: 0; background: none; color: var(--text2); font-size: 12px;
  padding: 5px 12px; border-radius: 6px; transition: background .15s, color .15s;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }

.todo-scroll { max-height: 560px; overflow-y: auto; padding: 0 10px 10px; }
/* ---- 驾驶舱「待办与提醒」左滑：查看 / 跳转 / 已完成 ---- */
.sw-wrap { position: relative; border-radius: 9px; overflow: hidden; }
.sw-wrap + .sw-wrap .todo-row { border-top: 1px solid var(--line-soft); }
.sw-acts {
  position: absolute; top: 0; right: 0; bottom: 0; display: none; z-index: 2;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.22, .8, .24, 1);
}
body.is-phone .sw-acts, body.is-tablet .sw-acts, body.is-touch .sw-acts { display: flex; }
.sw-wrap.open .sw-acts { transform: none; }
.sw-wrap.dragging .sw-acts { transition: none; }
.sw-btn {
  width: 52px; border: 0; padding: 0; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; letter-spacing: .2px; transition: filter .12s;
}
.sw-btn.v { background: var(--blue); }
.sw-btn.j { background: #5A6270; }
.sw-btn.d { background: var(--green); }
.sw-btn:active { filter: brightness(1.22); }
.sw-card { touch-action: pan-y; }
/* 展开时按钮覆盖右侧；把原来的箭头藏掉，避免和按钮叠在一起 */
.sw-wrap.open .todo-go { opacity: 0; }

.todo-row {
  display: flex; gap: 11px; align-items: stretch;
  padding: 11px 10px 11px 8px; border-radius: 9px;
  cursor: pointer; position: relative;
  transition: background .15s;
}
.todo-row:hover { background: var(--hover); }
.todo-row + .todo-row { border-top: 1px solid var(--line-soft); }
.todo-row:hover + .todo-row, .todo-row:hover { border-top-color: transparent; }
.stripe { width: 3px; border-radius: 3px; flex: none; }
.todo-body { flex: 1; min-width: 0; }
/* ⚠️ 原来 flex-wrap: wrap + 标题没给 min-width:0 —— flex 项的「最小宽度」等于 nowrap 文本的
   整段宽度，撑不下就整块折到第二行（标签独占一行）。改成不换行 + 标题弹性截断，永远一行。 */
.todo-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.todo-line1 .chip { flex: none; }
.todo-title {
  font-size: 13.5px; font-weight: 550; flex: 1 1 auto; min-width: 0; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-line2 { color: var(--text2); font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 系统待办：第一行合同名（主），第二行「合同号 · 节点」，第三行说明 —— 三级信息各归其位 */
.todo-sub {
  color: var(--text2); font-size: 12px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-sub::before { content: ''; }
.todo-desc {
  color: var(--text3); font-size: 11.5px; margin-top: 4px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-side {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 5px; flex: none;
  /* 行尾信息（到期 / 等级 / 日期 / 箭头）默认收起，悬停该行时才淡入（用户要求：不悬停不显示） */
  opacity: 0; transform: translateX(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.todo-row:hover .todo-side, .todo-row:focus-within .todo-side { opacity: 1; transform: none; }
.todo-date { color: var(--text3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.todo-go { color: var(--text3); display: inline-flex; transition: color .15s, transform .15s; }
.todo-row:hover .todo-go { color: var(--blue); transform: translateX(2px); }
/* 个人待办勾选框：默认整体滑出收起（margin 抵消自身宽度+间隙 → 不占位，
   内容与系统待办左对齐）；悬停该行时滑入淡入，内容平滑让位（用户要求） */
.todo-row .checkbox {
  align-self: center; margin-top: 0;
  margin-left: -30px; opacity: 0; pointer-events: none;
  transition: margin-left .18s ease, opacity .18s ease, border-color .15s, background .15s, color .15s;
}
.todo-row:hover .checkbox, .todo-row:focus-within .checkbox {
  margin-left: 0; opacity: 1; pointer-events: auto;
}

/* 来源 / 等级 / 到期 徽章 */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 6px; padding: 2px 7px; font-size: 11px; line-height: 1.5;
  font-weight: 500; white-space: nowrap;
}
.chip-sys  { background: var(--blue-soft);  color: var(--blue); }
.chip-per  { background: var(--green-soft); color: var(--green); }
.chip-cat  { background: var(--card2); color: var(--text2); border: 1px solid var(--line); }
.lv-high { background: var(--red-soft);    color: var(--red); }
.lv-mid  { background: var(--orange-soft); color: var(--orange); }
.lv-low  { background: var(--cyan-soft);   color: var(--cyan); }
.due-over { background: var(--red-soft);    color: var(--red); }
.due-today{ background: var(--orange-soft); color: var(--orange); }
.due-soon { background: var(--cyan-soft);   color: var(--cyan); }
.due-none { background: var(--card2);       color: var(--text3); border: 1px solid var(--line); }
.st-done  { background: var(--green-soft);  color: var(--green); }

/* 空态 */
.empty {
  padding: 40px 20px; text-align: center; color: var(--text3); font-size: 13px;
}
.empty .empty-ic { margin-bottom: 8px; color: var(--text3); opacity: .8; }

/* ---------------- 支付概览（右侧栏） ---------------- */
.sum-list { padding: 2px 18px 14px; }
.sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.sum-row:first-child { border-top: 0; }
.sum-row .k { color: var(--text2); font-size: 12.5px; }
.sum-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.progress { height: 6px; border-radius: 5px; background: var(--card2); overflow: hidden; margin: 2px 0 4px; }
.progress > i { display: block; height: 100%; border-radius: 5px; background: var(--green); transition: width .4s ease; }

/* 未来付款分布柱状图 */
.bars { display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px 16px; min-height: 150px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-val { font-size: 10.5px; color: var(--text3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { width: 100%; display: flex; align-items: flex-end; justify-content: center; height: 82px; }
.bar {
  width: 58%; max-width: 30px; border-radius: 8px 8px 3px 3px; min-height: 3px;
  background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 55%, transparent));
  transform-origin: bottom;
  /* 用 forwards（不是 both）：万一动画未启动/被暂停，柱子仍按 height 正常显示 */
  animation: barGrow .62s cubic-bezier(.2, .8, .25, 1) forwards;
  transition: filter .15s, opacity .15s;
}
@keyframes barGrow { from { transform: scaleY(.08); opacity: .4; } to { transform: scaleY(1); opacity: .95; } }
.bar-col:hover .bar { filter: brightness(1.22) saturate(1.1); }
/* 同组高亮（bd_挂悬停 会给 [data-g] 加 .bd-on） */
.pay-chart .bar-col.bd-on .bar { filter: brightness(1.28) saturate(1.15); }
.bar-col.today .bar { background: linear-gradient(180deg, var(--sel), color-mix(in srgb, var(--sel) 52%, transparent)); }
.bar-x { font-size: 11px; color: var(--text2); display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.bar-x .mo { white-space: nowrap; }
.bar-x .mo-tag { font-size: 9.5px; color: var(--sel); font-weight: 600; letter-spacing: .2px; }
.bar-col.today .bar-x .mo { color: var(--sel); font-weight: 600; }
/* 浅色主题下当天柱用深一档绿 */
[data-theme="light"] .bar-col.today .bar { background: linear-gradient(180deg, var(--sel), color-mix(in srgb, var(--sel) 55%, transparent)); }
/* 横向淡网格线，柱高更好读 */
.bar-track {
  background-image: repeating-linear-gradient(to top, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 20px);
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { .bar { animation: none !important; } }

/* ---------------- 通用页头 / 工具行 ---------------- */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-bottom: 16px;
}
.page-head h2 { margin: 0 0 3px; font-size: 20px; font-weight: 650; }
.page-head .sub { color: var(--text2); font-size: 12.5px; }
.head-actions { display: flex; gap: 9px; flex: none; }

.hint-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  color: var(--text2); border-radius: var(--radius-sm);
  padding: 9px 13px; font-size: 12.5px; margin-bottom: 16px;
}
.hint-bar .ic { color: var(--blue); flex: none; }
.hint-bar b { color: var(--text); font-weight: 600; }

.toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }

input[type="text"], input[type="date"], input[type="number"], input[type="search"], select, textarea {
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 11px; outline: none; transition: border-color .15s;
  color: var(--text);
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
input::placeholder, textarea::placeholder { color: var(--text3); }
input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="date"] { color-scheme: light; }

.btn {
  border-radius: var(--radius-sm); padding: 8px 14px; border: 1px solid transparent;
  font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;   /* ⚠️ 别让「标记完成 / 生成支付申请」被挤成两行 */
  transition: filter .15s, border-color .15s, color .15s;
}
.btn.primary { background: var(--blue); border-color: var(--blue); color: #0D0D0D; font-weight: 600; }
[data-theme="light"] .btn.primary { color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--card2); border-color: var(--line); color: var(--text); }
.btn.secondary:hover { border-color: var(--text3); }
.btn.ghost { background: none; border: 0; color: var(--blue); padding: 4px 6px; font-size: 12.5px; }
.btn.ghost:hover { text-decoration: underline; }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.danger:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- 合同卡条（合同支付页） ---------------- */

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 860px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
thead th {
  color: var(--text3); font-size: 11px; font-weight: 500; letter-spacing: .4px;
  background: var(--card2); position: sticky; top: 0; z-index: 1;
}
tbody td { font-size: 13px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.ops { white-space: nowrap; text-align: right; }

.op {
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: none;
  color: var(--text3); display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.op:hover { color: var(--blue); background: var(--blue-soft); }
.op.danger:hover { color: var(--red); background: var(--red-soft); }
.op.ok:hover { color: var(--green); background: var(--green-soft); }

.tr-flash td { animation: flashBg 2.4s ease; }
@keyframes flashBg {
  0% { background: color-mix(in srgb, var(--blue) 26%, transparent); }
  100% { background: transparent; }
}

/* ---------------- 个人待办 ---------------- */



.checkbox {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--text3); border-radius: 6px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; padding: 0; line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}
.checkbox:hover { border-color: var(--green); }
.checkbox.checked { background: var(--green); border-color: var(--green); color: #0D0D0D; }
[data-theme="light"] .checkbox.checked { color: #fff; }

/* ---------------- 弹窗 ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 20px 20px; z-index: 60; backdrop-filter: blur(2px);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  width: min(560px, 100%); box-shadow: var(--shadow);
  max-height: 84vh; overflow-y: auto;
  animation: modalIn .18s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0;
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.modal-body { padding: 14px 20px 20px; }
.modal-x {
  width: 30px; height: 30px; border-radius: 7px; border: 0; background: none;
  color: var(--text2); display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.modal-x:hover { background: var(--hover); color: var(--text); }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 12px; color: var(--text2); }
.field label b { color: var(--red); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; }
.field textarea { resize: vertical; min-height: 64px; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; flex-wrap: wrap; }

.detail-list { display: grid; gap: 9px; }
.detail-row { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
/* ⚠️ 标签列原来只有 56px，「付款条款说明 / 币种 / 本位币金额」这类 6 字标签会折成两行 —— 加宽到 92px */
.detail-row .dk { color: var(--text2); flex: none; width: 92px; white-space: nowrap; }
.detail-row .dv { flex: 1; min-width: 0; word-break: break-word; }
.detail-detail {
  background: var(--card2); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; color: var(--text2); line-height: 1.65;
}

/* ---------------- Toast ---------------- */
.toast-wrap {
  /* 移入顶栏：紧挨在「切换深浅色」按钮左边（不再浮动遮挡内容） */
  position: static; display: flex; flex-direction: row-reverse; gap: 6px;
  align-items: center; max-width: 360px; pointer-events: none;
}
.toast {
  background: var(--card2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); padding: 9px 16px; font-size: 13px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px;
  animation: toastIn .2s ease;
}
.toast.ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.toast.warn { border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.toast.ok .ic { color: var(--green); }
.toast.warn .ic { color: var(--orange); }
.toast .toast-undo {
  margin-left: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer;
  color: var(--blue); background: var(--blue-soft); border: 1px solid transparent; border-radius: 999px;
}
.toast .toast-undo:hover { filter: brightness(1.1); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transition: opacity .25s; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 980px) {
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .main { padding: 0 16px 30px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 6px; }
  .page-head { flex-direction: column; align-items: flex-start; }
}

/* ============================ 系统设置页 ============================ */
/* 瀑布流：由 app.js 的「设置页瀑布流」按最矮列分配卡片（见下方 .set-col） */
.set-wrap { display: flex; align-items: flex-start; gap: 0 14px; }
.set-col { flex: 1 1 0; min-width: 0; }
.set-wrap > .set-card, .set-col > .set-card { display: block; width: 100%; margin: 0 0 14px; }
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.set-head { display: flex; align-items: center; gap: 11px; }
.set-head .ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.set-head h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.set-head .sub { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.set-pill { margin-left: auto; flex: none; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text3); }
.set-pill.ok { color: var(--green); border-color: rgba(114, 165, 124, .5); background: var(--green-soft); }
.set-pill.warn { color: var(--orange); border-color: rgba(217, 164, 91, .5); background: var(--orange-soft); }
.set-body { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.set-line { font-size: 12.5px; color: var(--text2); line-height: 1.75; }
.set-line b { color: var(--text); }
.set-struct { font-size: 11.5px; line-height: 1.8; color: var(--text2); background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 11px 13px; white-space: pre-wrap; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.set-kpi { background: var(--card2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 9px 11px; }
.set-kpi b { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.set-kpi span { font-size: 11px; color: var(--text3); }
.set-hint { font-size: 11.5px; color: var(--text3); line-height: 1.7; }
.btn.danger { background: var(--red-soft); border-color: rgba(224, 108, 108, .45); color: var(--red); }
.btn.danger:hover { background: rgba(224, 108, 108, .24); }
@media (max-width: 900px) { .set-wrap { grid-template-columns: 1fr; } }

/* ============================ 滚动条统一 ============================
   规则：**平时隐藏，鼠标移到可滚动区域时才显示**（细胶囊滑块）。
   Chromium 按 `color-scheme` 决定原生滚动条明暗；不设标准属性 `scrollbar-width / scrollbar-color`
   —— 一旦设置，新版 Chromium 会忽略下面的 ::-webkit-scrollbar（而 Win7 的老 Chromium ≤109 本就只认它）。
   注：新版 Edge/Chrome 在 Windows 用「悬浮式滚动条」，本身就平时不可见（且忽略 webkit 自定义），
   所以这套规则主要对老浏览器生效；两边的最终观感一致：不碍眼、移入即显现。 */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: transparent;                       /* 平时隐藏 */
  border: 2px solid transparent; border-radius: 999px; background-clip: content-box;
}
/* 鼠标移到该可滚动区域（或其子元素）上时才显现 */
*:hover::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover {
  background: var(--text2);                      /* 纯色兜底 */
  background: color-mix(in srgb, var(--text2) 80%, transparent);
  border: 2px solid transparent; border-radius: 999px; background-clip: content-box;
}

/* ---- 顶栏左侧组（侧栏折叠按钮 + 标题） ---- */
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-left .topbar-lead { min-width: 0; }

/* ---- 侧栏折叠（收窄为图标栏） ---- */
.sidebar { transition: width .22s ease, padding .22s ease; }
body.sidebar-mini .sidebar { width: 70px; padding-left: 9px; padding-right: 9px; }
body.sidebar-mini .brand { padding: 0 0 20px; justify-content: center; }
body.sidebar-mini .brand-text,
body.sidebar-mini .nav-label,
body.sidebar-mini .nav-badge,
body.sidebar-mini .nav-caret,
body.sidebar-mini .nav-sub,
body.sidebar-mini .sidebar-foot { display: none !important; }
body.sidebar-mini .nav-group {
  height: 1px; padding: 0; margin: 12px 10px; font-size: 0; color: transparent;
  background: var(--line-soft); overflow: hidden;
}
body.sidebar-mini .nav-item { justify-content: center; padding: 11px 0; }
body.sidebar-mini .nav-fold-head { justify-content: center; }

/* ---- 顶栏标题后的小字（原合同支付页头副标题）与工具栏分隔线 ---- */
.title-sub { font-size: 11.5px; font-weight: 400; color: var(--text3); margin-left: 10px; letter-spacing: 0; }
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; flex: 0 0 auto; }

/* ---- 弹窗尺寸档位（原先只加了类名、没有样式，导致一律 560px 塞不下按钮）---- */
.modal.pt-wide { width: min(780px, 100%); }
.modal.pt-mid { width: min(680px, 100%); }
.modal.pt-small { width: min(460px, 100%); }

/* ---------------- 下拉框美化（2026-10-17） ----------------
   原生 select 的弹层无法用 CSS 完全重绘，但可以用 color-scheme 让它跟随深色主题，
   再统一外观（自绘 chevron 箭头 / 统一高度 / 圆角 / hover / focus 光环）。 */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  color-scheme: dark;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
select:hover { border-color: var(--text3); background-color: color-mix(in srgb, var(--card2) 55%, var(--hover)); }
select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
select option { background: var(--card2); color: var(--text); padding: 6px 10px; }
[data-theme="light"] { color-scheme: light; }
[data-theme="light"] select { color-scheme: light; }
[data-theme="light"] select option { background: #fff; color: var(--text); }

/* 驾驶舱付款分布图：悬浮卡（与看板观感一致） */
.pay-chart { position: relative; }
.pay-tipcard {
  position: absolute; z-index: 6; pointer-events: none;
  min-width: 130px; padding: 8px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
[data-theme="light"] .pay-tipcard { box-shadow: 0 12px 28px rgba(31, 41, 55, .16); }
.pay-tipcard.show { opacity: 1; transform: none; }
.pay-tipcard .pt-h { font-size: 12px; font-weight: 650; color: var(--text); margin-bottom: 3px; }
.pay-tipcard .pt-r { font-size: 11.5px; color: var(--text2); line-height: 1.55; font-variant-numeric: tabular-nums; }

/* 顶栏内的提示条：更紧凑，单行不换行（超出省略） */.top-actions .toast {
  padding: 5px 11px; font-size: 12px; border-radius: 8px; gap: 6px;
  max-width: 320px; white-space: nowrap; overflow: hidden; box-shadow: none;
  animation: toastInTop .18s ease;
}
.top-actions .toast span { overflow: hidden; text-overflow: ellipsis; }
.top-actions .toast .toast-undo { font-size: 11.5px; padding: 1px 7px; }
@keyframes toastInTop { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1280px) { .top-actions .toast { max-width: 220px; } }
@media (max-width: 1080px) { .top-actions .toast-wrap { display: none; } }

/* ---------------- 备份提醒条（顶栏下方，按需出现，不常驻） ---------------- */
.backup-tip {
  display: flex; align-items: center; gap: 10px; flex: none;
  margin: 10px 0 0; padding: 8px 10px 8px 12px;
  border: 1px solid var(--orange-soft); background: var(--orange-soft);
  border-radius: var(--radius); font-size: 12.5px; color: var(--text);
  animation: btIn .22s ease;
}
.backup-tip[hidden] { display: none; }
.backup-tip .bt-ic { display: inline-flex; color: var(--orange); flex: none; }
.backup-tip .bt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-tip .bt-text b { color: var(--orange); font-variant-numeric: tabular-nums; }
.backup-tip .bt-go {
  flex: none; padding: 4px 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--orange); background: transparent; color: var(--orange);
  font-size: 12px; font-family: inherit;
}
.backup-tip .bt-go:hover { background: var(--orange); color: #1A1206; }
.backup-tip .bt-x {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text2); cursor: pointer; font-size: 15px; line-height: 1;
}
.backup-tip .bt-x:hover { background: var(--hover); color: var(--text); }
@keyframes btIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .backup-tip { align-items: flex-start; }
  .backup-tip .bt-text { white-space: normal; }
}

/* ---------------- 单块渲染失败占位（renderAll 的容错兜底） ---------------- */
.render-error {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 18px 0; padding: 18px 20px;
  border: 1px solid var(--red-soft); background: var(--red-soft);
  border-radius: var(--radius);
}
.render-error .re-ic { color: var(--red); flex: none; margin-top: 1px; }
.render-error .re-body { flex: 1; min-width: 0; }
.render-error .re-t { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.render-error .re-m {
  font-size: 12px; color: var(--text2); font-family: ui-monospace, Consolas, monospace;
  word-break: break-all; line-height: 1.6; margin-bottom: 6px;
}
.render-error .re-h { font-size: 12px; color: var(--text3); line-height: 1.6; }
.render-error .btn { flex: none; }

/* ============================ 全局规则：一排按钮放不下时只留图标（2026-10-18） ============================
   由 app.js 的 FitBar 在「这一行装不下」时给按钮加 .fit-icon 并移除文字（title 保留原文字）。
   这里只负责把收成图标后的左右留白收窄，让按钮变成 ~28px 的方形，点击区域不变。 */
.btn.fit-icon { padding-left: 7px; padding-right: 7px; gap: 0; justify-content: center; }
.ccx-tools .btn.fit-icon,
.pay-bulkbar .btn.fit-icon,
.pay-filters .btn.fit-icon,
.set-actions .btn.fit-icon,
.form-actions .btn.fit-icon { padding: 0 7px; }
.pay-colset-btn.fit-icon, .pay-clear.fit-icon, .pay-addbtn.fit-icon { padding: 0 7px; }

/* 侧栏底部提示：外网模式下可点（解锁 / 锁定金额） */
.foot-note.wb-clickable { cursor: pointer; transition: color .15s; }
.foot-note.wb-clickable:hover { color: var(--accent); text-decoration: underline; }
/* 外网模式：表格/看板里的 *** 提示可点（解锁） */
html[data-wb="extranet"] .pay-table td { cursor: default; }
html[data-wb="extranet"] .pay-table td .wb-masked-amt { cursor: not-allowed; }

/* ============================ 账号 / 登录（auth.js，2026-10-18） ============================ */
/* 未登录时整页锁住滚动，只留登录卡 */
body.auth-locked { overflow: hidden; }
/* .nav-item 自己带 display:flex，会盖掉 [hidden] 的 display:none —— 管理员的「用户管理」靠它隐藏 */
.nav-item[hidden], .nav-subitem[hidden] { display: none !important; }

.auth-mask {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(130% 110% at 50% -10%, var(--card2) 0%, var(--bg) 58%);
  animation: authIn .22s ease;
}
@keyframes authIn { from { opacity: 0 } to { opacity: 1 } }

.auth-card {
  width: 100%; max-width: 372px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 26px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.auth-logo {
  width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--card2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.auth-logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-brand-t { display: flex; flex-direction: column; line-height: 1.35; }
.auth-brand-t strong { font-size: 14px; color: var(--text); font-weight: 650; }
.auth-brand-t span { font-size: 11.5px; color: var(--text2); }

.auth-card h2 { font-size: 18px; font-weight: 680; color: var(--text); margin: 0 0 6px; }
.auth-sub { font-size: 12.5px; color: var(--text2); line-height: 1.6; margin: 0 0 18px; }

.auth-f { display: block; margin-bottom: 12px; }
.auth-f > span { display: block; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.auth-f input {
  width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  font-size: 13.5px; font-family: inherit; outline: none;
  transition: border-color .15s;
}
.auth-f input:focus { border-color: var(--text3); }   /* 按项目约定：不要蓝色光环 */
.auth-f input::placeholder { color: var(--text3); }

.auth-err { min-height: 17px; font-size: 12px; color: var(--red); line-height: 1.5; margin: 2px 0 8px; }

.auth-go { width: 100%; height: 40px; justify-content: center; font-size: 14px; }
.auth-go[disabled] { opacity: .65; cursor: default; }

/* 跳过登录：游客只用本机数据，不上传云端 */
.auth-guest {
  width: 100%; height: 34px; margin-top: 9px;
  background: transparent; color: var(--text2);
  border: 1px solid transparent; border-radius: 9px;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: color .15s, background .15s;
}
.auth-guest:hover { color: var(--text); background: var(--hover); }

/* 连续登录失败 3 次后出现的重置入口（只在登录页，且要二次确认） */
.auth-reset {
  display: block; width: 100%; margin-top: 6px; padding: 7px 4px;
  background: none; border: 0; color: var(--text2);
  font-size: 11.5px; font-family: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-reset:hover { color: var(--orange); }

.auth-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--text3); text-align: center; }

/* 管理员头像：换成橙色边框区分（普通用户保持主题蓝） */
.avatar.is-admin { border-color: var(--orange); background: var(--orange); color: #16110A; }
[data-theme="light"] .avatar.is-admin { color: #fff; }

/* ---- 右上角「采」展开的账号面板 ---- */
.acct-body { padding-top: 4px; }
.acct-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.acct-av {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue); border: 1px solid var(--line);
}
.acct-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-id b { font-size: 15px; color: var(--text); }
.acct-id span { font-size: 12px; color: var(--text2); }
.acct-pill {
  margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--green-soft); color: var(--green); border: 1px solid transparent;
}
.acct-pill.adm { background: var(--orange-soft); color: var(--orange); }

.acct-sec { border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.acct-sec-h { font-size: 12px; color: var(--text2); font-weight: 600; }
.acct-f { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 10px; }
.acct-f > span { font-size: 12.5px; color: var(--text2); text-align: right; }
.acct-f input, .acct-f select {
  height: 34px; padding: 0 10px; box-sizing: border-box; width: 100%;
  background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-family: inherit; outline: none;
}
.acct-f input:focus, .acct-f select:focus { border-color: var(--text3); }
.acct-f input[readonly] { color: var(--text3); background: var(--hover); }
.acct-err { min-height: 16px; font-size: 12px; color: var(--red); padding-left: 78px; }
.acct-note { font-size: 11.5px; color: var(--text3); line-height: 1.6; padding-left: 78px; }
.acct-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.acct-actions #acct-logout { margin-right: auto; }

/* ---- 侧栏「用户管理」页 ---- */
.usr-card .set-body { padding: 0; }
.usr-wrap { width: 100%; overflow-x: auto; }
.usr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.usr-table th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text2);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--card2); position: sticky; top: 0; z-index: 1;
}
.usr-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text); white-space: nowrap; }
.usr-table tr:last-child td { border-bottom: 0; }
.usr-table tr:hover td { background: var(--hover); }
.usr-table tbody tr[data-no] { cursor: pointer; }        /* 点行 = 切换账号 */
.usr-table tbody tr.is-me { cursor: default; }           /* 当前账号点了没意义 */
/* 当前账号只留一条左侧竖线：整行染色太抢眼，颜色也太多 */
.usr-table tr.is-me td.ut-no { box-shadow: inset 3px 0 0 var(--blue); }
.usr-table .ut-no { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; letter-spacing: .2px; }
.usr-table .ut-name { font-weight: 600; }
.usr-table .ut-time { color: var(--text2); font-size: 12px; }
.usr-table td.ut-av { display: none; }   /* 首字母头像只在手机列表里出现 */
.usr-table .ut-act { text-align: right; }
/* 角色：纯文字。彩色胶囊在这里只会增加噪音（一屏里会有 4~5 种颜色） */
.ut-r { font-size: 11.5px; color: var(--text3); }
.ut-r.adm { color: var(--text2); font-weight: 550; }
/* 「我」「仅本机」：小号灰字，跟在姓名 / 工号后面，不占胶囊的视觉重量 */
.ut-self { margin-left: 5px; font-size: 10.5px; font-weight: 400; color: var(--text3); }
.ut-self::before { content: ' ·  '; }
.ut-local { margin-left: 6px; font-size: 10.5px; color: var(--orange); }
.ut-warn { color: var(--orange); }
/* 操作按钮不描边：文字按钮更轻，删除默认也是灰的，按下去才红 */
.ut-btn {
  height: 26px; padding: 0 9px; margin-left: 2px;
  background: transparent; color: var(--text2);
  border: 0; border-radius: 6px;
  font-size: 12px; font-family: inherit; cursor: pointer;
  transition: color .15s, background .15s;
}
.ut-btn:hover { color: var(--text); background: var(--hover); }
.ut-btn.danger { color: var(--text3); }
.ut-btn.danger:hover { color: var(--red); background: var(--red-soft); }
.ut-btn[disabled] { color: var(--text3); opacity: .45; cursor: default; background: none !important; }
/* 卡头：标题 + 右侧灰字数量，不用彩色图标和绿胶囊 */
.usr-head { align-items: flex-start; }
.usr-head .sub { margin-top: 3px; }
.usr-count { font-size: 11.5px; color: var(--text3); margin-left: auto; padding-top: 3px; }
/* 底部说明：比正文更淡，不抢列表的视线 */
.usr-tip .set-hint { color: var(--text3); line-height: 1.75; }
.usr-tip .set-hint + .set-hint { margin-top: 2px; }
.ut-btn[disabled] { opacity: .4; cursor: default; }
.ut-lock { font-size: 11.5px; color: var(--text3); margin-left: 8px; }
.usr-tip { border-top: 1px solid var(--line-soft); padding-top: 12px !important; display: flex; flex-direction: column; gap: 5px; }

/* 手机端：登录卡贴边、账号面板单列、用户列表改成卡片（横向表格在 390px 上根本划不动） */
@media (max-width: 767px) {
  .auth-mask { padding: 16px; align-items: flex-start; padding-top: max(48px, 12vh); }
  .auth-card { max-width: 100%; padding: 22px 20px 16px; border-radius: 14px; }
  /* iOS 上输入框 < 16px 会在获得焦点时把整页放大，登录页必踩 —— 这里强制 16px */
  .auth-f input { font-size: 16px; height: 42px; }
  .acct-f { grid-template-columns: 58px 1fr; gap: 8px; }
  .acct-f input, .acct-f select { font-size: 16px; height: 38px; }
  .acct-err, .acct-note { padding-left: 66px; }

  /* 用户列表 = 通讯录式两行卡：左侧首字头像，右侧角色 + 操作。
     原来是三行 + 右边一大片空白，390px 上一屏只放得下两张，太占地方。 */
  .usr-wrap { overflow: visible; }
  .usr-table thead { display: none; }
  /* ⚠️ 全局有 `table { min-width: 860px }`（给合同表格横向滚动用的），
     这里必须显式归零，否则手机上的账号列表会被撑到 860px、右侧按钮直接跑出屏幕。 */
  .usr-table { min-width: 0; width: 100%; }
  .usr-table, .usr-table tbody, .usr-table tr, .usr-table td { display: block; width: 100%; }
  .usr-card .set-body { padding: 8px 0 !important; }
  .usr-table tr {
    position: relative; display: grid;
    margin: 0 12px 8px; padding: 10px 12px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "av name role" "av no act";
    column-gap: 11px; row-gap: 4px; align-items: center;
    border: 1px solid var(--line-soft); border-radius: 11px; background: var(--card2);
  }
  /* 当前账号：只留左侧一条竖线，其余和普通行一样（整块染色会让一屏里出现两种底色） */
  .usr-table tr.is-me::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--blue);
  }
  .usr-table td {
    border: 0; padding: 0; margin: 0; white-space: normal;
    text-align: left !important;
    background: transparent;   /* 不加 !important：否则会把下面头像的底色一起盖掉 */
  }

  /* 首字头像：撑住左侧、也让人一眼认人 */
  .usr-table td.ut-av {
    grid-area: av; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 11px;
    background: var(--hover); color: var(--text2);
    font-size: 14px; font-weight: 650; line-height: 1;
  }

  .usr-table td.ut-name {
    grid-area: name; font-size: 15px; font-weight: 650; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .usr-table td.ut-no {
    grid-area: no; display: flex; align-items: center; gap: 5px; min-width: 0;
    font-size: 12px; color: var(--text3); font-family: inherit; letter-spacing: 0;
  }

  .usr-table td.ut-role { grid-area: role; justify-self: end; align-self: center; }
  .usr-table td.ut-role .ut-r { font-size: 11px; }
  .usr-table td.ut-role .ut-r.adm { color: var(--text2); }
  .usr-table td.ut-time { display: none; }

  .usr-table td.ut-act {
    grid-area: act; justify-self: end; align-self: center; margin: 0; padding: 0; border: 0;
    display: flex; align-items: center; gap: 6px;
  }
  .usr-table td.ut-act .ut-btn {
    height: 24px; line-height: 1; padding: 0 8px; border-radius: 6px; margin: 0;
    border: 0; background: transparent;
    font-size: 11.5px; color: var(--text2);
  }
  .usr-table td.ut-act .ut-btn.danger { color: var(--text3); }
  .usr-table td.ut-act .ut-btn.sw { display: none; }     /* 手机上点整行就是切换，不用再放按钮 */
  .usr-table td.ut-act .ut-btn:active { background: var(--hover); }
  .usr-table td.ut-act .ut-btn.danger:active { color: var(--red); }
  .ut-lock { font-size: 11px; margin-left: 0; white-space: nowrap; }
}