/* =========================================================================
   采购中心 · 待办工作台（网页版）
   —— 复刻自桌面版的「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; }
/* 侧栏计数徽章：视觉上不再显示（用户反馈太占空间）。
   元素保留 —— app.js 里 `$('#badge-xxx').textContent = n` 是直赋，删了 DOM 会报错。 */
.nav-badge { display: none !important; }

/* ---- 侧栏折叠组（合同支付 → 付款计划 / 合同看板） ---- */
.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: 64px; 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: 10px; 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 的第二组（系统待办 / 个人待办）：
   桌面用 display:contents → 六张卡仍在同一个网格里，布局与原来完全一致；
   手机端 mobile.css 把它 display:none 掉，省掉一整行（约 100px）。 */
.kpi-extra { display: contents; }
.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; min-height: 250px; }
.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); }
/* 矮屏（1366×768 笔记本等）：不强行把两列压进一屏 —— 压到最后一张卡只剩 130px，
   「未来付款分布」会被 overflow:hidden 整块裁掉。改为让整页滚动，两列都保持可读高度。 */
@media (max-width: 1400px), (max-height: 850px) {
  #page-cockpit .content-grid { flex: 0 0 auto; grid-template-rows: auto; }
  #page-cockpit .content-grid > .panel { height: 520px; }
  .content-grid > div > .panel { flex: 0 0 auto; }
  .content-grid > div > .panel:last-child { min-height: 250px; order: -1; }
}

/* 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 卡内边距） */
/* 驾驶舱顶栏是两行（问候 + 摘要），比普通页高一点 */
.topbar.hero-mode { height: 74px; }
@media (max-height: 820px) {
  .topbar { height: 54px; }
  .topbar.hero-mode { height: 62px; }
  .page { padding-top: 6px; }
  .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;
  /* 旧浏览器（Win7 的 Chrome 109 / 不支持 color-mix）会丢弃下面那条 gradient，
     留下这条纯色兜底，柱子不会变成透明。 */
  background: var(--blue);
  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: var(--sel);
  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: var(--sel);
  background: linear-gradient(180deg, var(--sel), color-mix(in srgb, var(--sel) 55%, transparent));
}
/* 横向淡网格线，柱高更好读；第一条是不支持 color-mix 时的兜底 */
.bar-track {
  background-image: repeating-linear-gradient(to top, rgba(128, 128, 128, .14) 0 1px, transparent 1px 20px);
  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; } }
/* 旧浏览器（Chrome ≤110 / Safari ≤16.1）没有 color-mix：显式退回纯色，别让柱子整根透明 */
@supports not (color: color-mix(in srgb, #000, #fff)) {
  .bar { background: var(--blue); }
  .bar-col.today .bar { background: var(--sel); }
}

/* ---------------- 通用页头 / 工具行 ---------------- */
.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.ghost 是裸蓝字，直接摆在卡片头上像一段没样式的链接、还跟两行标题对不齐。
   这里收成小号描边按钮：默认灰字描边，悬停才变蓝并把箭头右移 2px。 */
.panel-head .btn.ghost {
  display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 9px 0 11px; flex: none;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--text2);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.panel-head .btn.ghost:hover {
  text-decoration: none;
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.panel-head .btn.ghost .ic { transition: transform .15s; opacity: .85; }
.panel-head .btn.ghost:hover .ic { transform: translateX(2px); opacity: 1; }
.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; }
/* 表格基础样式：**不在这里写 min-width**
   —— 原来这条 `table{min-width:860px}` 是为了给合同类的宽表格留出横向滚动空间，
     但它对所有 <table> 生效：万年历通书表、用户列表都被撑到 860px，
     已经踩过两次（`.wnl-tb` 白字落白底、`.usr-table` 手机按钮跑出屏幕）。
   现在把 860px 只给真正需要横向滚动的合同类表格，其余表格按容器自适应。 */
table { border-collapse: collapse; width: 100%; }
.pay-table, .fp-table, .as-table, .au-table { 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-wrap 是 pointer-events:none（让提示条不吃鼠标），
     子元素必须显式恢复，否则「撤销」按钮永远点不到（实测 elementFromPoint 命中的是顶栏）。 */
  pointer-events: auto;
}
.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; }
}

/* ============================ 系统设置页 ============================ */
/* 设置页：左侧目录 + 右侧分节内容 -------------------------------- */
/* 目录横排在顶部：滚动时吸顶，点哪个跳哪个，当前分组高亮 */
.set-shell { display: block; }
.set-nav {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 0 9px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--bg);                    /* 实底：滚动时内容不会从缝里透出来 */
}
.set-nav-t, .set-nav-foot { display: none; }
.set-nav-i {
  border: 0; background: none; cursor: pointer;
  padding: 7px 15px; border-radius: 8px; font: inherit; font-size: 13px;
  color: var(--text2); transition: background .15s, color .15s;
}
.set-nav-i:hover { background: var(--card2); color: var(--text); }
.set-nav-i.on { background: var(--blue-soft); color: var(--blue); font-weight: 650; }

#page-settings.active { padding-top: 0; }
.set-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* 顶部状态概览 */
.set-ov {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.set-ov-i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-ov-i .k { font-size: 10.5px; letter-spacing: .06em; color: var(--text3); }
.set-ov-i b { font-size: 15px; font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 6px; }
.set-ov-i i { font-style: normal; font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-ov-i b .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.set-ov-i .dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.set-ov-i .dot.off { background: var(--text3); }

/* 分节 */
.set-wrap { display: flex; flex-direction: column; gap: 30px; }
.set-sec { display: flex; flex-direction: column; gap: 14px; }
.set-sec-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.set-sec-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; color: var(--text); }
.set-sec-h::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--blue); flex: none; }
.set-sec-sub { margin: 0 0 0 11px; font-size: 11.5px; color: var(--text3); }

.set-grid { display: grid; gap: 14px; align-items: stretch; }
.set-grid.c1 { grid-template-columns: minmax(0, 1fr); }
.set-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-grid.c2 > .set-card.wide { grid-column: 1 / -1; }
.set-wrap .set-card { display: flex; flex-direction: column; width: 100%; margin: 0; }
.set-card > .set-body { flex: 1 1 auto; }
/* 这一张要允许内部浮动（flex 容器里浮动无效）→ 改成块级，用 margin 代替 gap */
.set-body.set-body-flow { display: block; }
.set-body-flow > * { margin: 0 0 11px; }
.set-body-flow > *:last-child { margin-bottom: 0; }

@media (max-width: 1180px) {
  .set-nav { margin-bottom: 14px; }
}
@media (max-width: 860px) {
  .set-grid.c2 { grid-template-columns: minmax(0, 1fr); }
  /* 手机上概览收成两列，别一字排成四行 */
  .set-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; gap: 12px 10px; }
  .set-ov-i b { font-size: 14px; }
  .set-sec-h { font-size: 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 {
  float: right; width: 46%; margin: 0 0 10px 18px;
  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-card::after { content: ''; display: block; clear: both; }
@media (max-width: 720px) {
  .set-struct { float: none; width: auto; margin: 0; }
  .navvis-cols { columns: 1; column-rule: 0; }   /* 手机太窄，两列会挤成竖排字 */
}
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 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); }

/* ---- 手动存档 ---- */
.snap-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.snap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--card2);
}
.snap-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.snap-main b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.snap-note { font-size: 12px; color: var(--text2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-note.ph { color: var(--text3); }
.snap-meta { font-size: 11px; color: var(--text3); margin-left: auto; white-space: nowrap; }
.snap-btns { display: flex; gap: 6px; flex: none; }
.snap-btns .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.snap-empty {
  padding: 14px; text-align: center; font-size: 12.5px; color: var(--text3);
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* ============================ 滚动条统一 ============================
   规则：**平时隐藏，鼠标移到可滚动区域时才显示**（细胶囊滑块）。
   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; } }

/* ---------------- 单块渲染失败占位（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; }
}

/* ---------------- 工具库 · PDF 工具（iframe 内嵌单文件工具箱） ---------------- */
#page-pdf.active {
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
}
.pdf-tools-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.pdf-tools-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.pdf-tools-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pdf-tools-title b { font-size: 16px; font-weight: 650; color: var(--text); }
.pdf-tools-title span { font-size: 12px; color: var(--text3); }
.pdf-tools-frame {
  flex: 1 1 auto; min-height: 0; width: 100%;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
@media (max-width: 768px) {
  .pdf-tools-title span { display: none; }
}
.pdf-tools-cats {
  flex: none; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none;
}
.pdf-tools-cats::-webkit-scrollbar { display: none; }
.pdf-cat {
  flex: none; height: 34px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.pdf-cat:hover { background: var(--card); border-color: var(--line); color: var(--text); }
.pdf-cat em { font-style: normal; font-size: 11px; color: var(--text3); }
.pdf-cat.on {
  background: var(--card); border-color: var(--line); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.pdf-cat.on::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--cat-acc, var(--blue));
}
.pdf-cat.on em { color: var(--text2); opacity: 1; }

/* PDF 入口模式切换条（多模式合并入口） */
.pdf-entry-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
}
.pdf-entry-bar[hidden] { display: none; }
.pe-back {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px;
  background: transparent; color: var(--text3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.pe-back:hover { background: var(--blue-soft); color: var(--text); }
.pe-name {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-modes { display: flex; align-items: center; gap: 4px; flex: none; overflow-x: auto; scrollbar-width: none; }
.pe-modes::-webkit-scrollbar { display: none; }
.pe-mode {
  height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text2); font: inherit; font-size: 11.5px;
  cursor: pointer; white-space: nowrap;
}
.pe-mode:hover { background: var(--blue-soft); color: var(--text); }
.pe-mode.on {
  background: var(--acc-soft, var(--blue-soft)); border-color: var(--acc, var(--blue));
  color: var(--acc, var(--blue)); font-weight: 600;
}
@media (max-width: 768px) {
  .pdf-entry-bar { flex-wrap: wrap; gap: 6px; }
  .pe-name { flex: 1 1 100%; order: 2; padding-left: 4px; }
  .pe-modes { order: 3; flex: 1 1 100%; }
}

/* ---------------- PDF 工作区（打开一次 · 顶部菜单/功能带 · 左侧缩略图） ---------------- */
.pdf-tools-page { gap: 8px; }
.pdf-commandbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
/* 三段：左（打开 + 文件）｜中（视图 + 模式）｜右（页码 + 缩放 + 操作）。
   space-between 让左右两侧空隙相等，中间那段不会顶在一大片空白的一边 */
.pcb-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.pcb-c { display: flex; align-items: center; gap: 8px; flex: none; }
.pcb-r { display: flex; align-items: center; gap: 8px; flex: none; }
.pcb-open {
  height: 30px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--blue); color: #0D0D0D; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
[data-theme="light"] .pcb-open { color: #fff; }
.pcb-file {
  max-width: 280px; font-size: 12px; color: var(--text2); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcb-pager { display: flex; align-items: center; gap: 3px; }
.pcb-pager button {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--text2); cursor: pointer; font-size: 14px; line-height: 1;
}
.pcb-pager button:hover { background: var(--blue-soft); color: var(--text); }
.pcb-page {
  min-width: 58px; text-align: center; font-size: 11.5px; color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.pcb-page[data-action] { padding: 3px 5px; border-radius: 6px; cursor: text; }
.pcb-page[data-action]:hover { background: var(--blue-soft); color: var(--text); }
.pcb-page-edit {
  width: 62px; height: 26px; padding: 0 4px; text-align: center;
  border: 1px solid var(--blue); border-radius: 7px; background: var(--card);
  color: var(--text); font: inherit; font-size: 11.5px; outline: none;
  font-variant-numeric: tabular-nums;
}
.pcb-page-total { font-size: 11.5px; color: var(--text3); white-space: nowrap; }
.pcb-apply {
  height: 30px; max-width: 180px; padding: 0 14px;
  border: 1px solid var(--blue); border-radius: 8px; background: var(--blue);
  color: #0D0D0D; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="light"] .pcb-apply { color: #fff; }
.pcb-apply:disabled { opacity: .45; cursor: not-allowed; }
.pcb-apply.busy { opacity: .75; cursor: progress; animation: pcbPulse 1.1s ease-in-out infinite; }
@keyframes pcbPulse { 0%, 100% { opacity: .75; } 50% { opacity: .5; } }

.pdf-menubar {
  flex: none; display: flex; gap: 2px; overflow-x: auto;
  padding: 0 2px; border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.pdf-menubar::-webkit-scrollbar { display: none; }
.pdf-menu-tab {
  height: 34px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text2); font: inherit; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
}
.pdf-menu-tab:hover { color: var(--text); }
.pdf-menu-tab.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.pdf-ribbon {
  flex: none; display: flex; flex-wrap: wrap; align-items: stretch;
  padding: 6px 2px 7px; border-bottom: 1px solid var(--line);
}
.pdf-rgroup {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 12px; border-right: 1px solid var(--line);
}
.pdf-rgroup:last-child { border-right: 0; }
.prg-title { font-size: 10px; line-height: 1.2; color: var(--text3); white-space: nowrap; }
.prg-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.pdf-fn {
  height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text2); font: inherit; font-size: 11.5px;
  cursor: pointer; white-space: nowrap;
}
.pdf-fn:hover { background: var(--blue-soft); color: var(--text); }
.pdf-fn.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.pdf-fn:disabled { opacity: .4; cursor: not-allowed; }

.pdf-workspace { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.pdf-thumbs {
  flex: none; width: 150px; display: none; flex-direction: column; min-height: 0;
  padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.pdf-tools-page.has-file .pdf-thumbs { display: flex; }
.pt-head {
  position: sticky; top: 0; z-index: 1; padding: 2px 4px 8px;
  font-size: 11px; color: var(--text3); background: var(--card);
}
.pdf-thumb {
  display: block; width: 100%; margin-bottom: 6px; padding: 6px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  cursor: pointer; text-align: center;
}
.pdf-thumb canvas {
  display: block; width: 100%; height: auto; background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18); border-radius: 2px;
}
.pdf-thumb span { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text3); }
.pdf-thumb:hover { border-color: var(--line); }
.pdf-thumb.on { border-color: var(--blue); background: var(--blue-soft); }
.pt-loading, .pt-more { padding: 8px 4px; font-size: 11px; color: var(--text3); }
.pt-more-btn {
  display: block; width: 100%; padding: 8px 4px; border: 1px dashed var(--line);
  border-radius: 8px; background: transparent; color: var(--text2);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.pt-more-btn:hover { border-color: var(--blue); color: var(--blue); }
/* 缩略图宽度拖拽条 */
.pt-resize { flex: none; width: 8px; margin: 0 -4px; cursor: col-resize; border-radius: 4px; }
.pt-resize:hover, body.pdf-resizing .pt-resize { background: var(--blue-soft); }
body.pdf-resizing { cursor: col-resize; user-select: none; }
body.pdf-resizing iframe { pointer-events: none; }

.pdf-stage { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.pdf-stage.drag { outline: 2px dashed var(--blue); outline-offset: -2px; border-radius: 12px; }
/* 拖入 PDF 时的整窗提示（拖放监听挂在 window + 工具 iframe 上） */
body.pdf-drag-file::after {
  content: '松手打开这份 PDF';
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(10, 12, 16, .74);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  box-shadow: inset 0 0 0 3px var(--blue);
  color: var(--blue); font-size: 15px; font-weight: 600; letter-spacing: .5px;
}
.pdf-welcome {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  padding: 24px; text-align: center; background: var(--bg);
  border: 1px dashed var(--line); border-radius: 12px;
}
.pdf-tools-page.has-file .pdf-welcome { display: none; }
.pdf-tools-page.pdf-toolopen .pdf-welcome { display: none; }
.pdf-tools-page:not(.has-file):not(.pdf-toolopen) .pdf-tools-frame { opacity: 0; pointer-events: none; }
.pdf-tools-page.has-file .pdf-tools-frame { opacity: 1; }
.pdf-tools-page.pdf-toolopen .pdf-tools-frame { opacity: 1; pointer-events: auto; }

/* 卡片视图里操作工具时的返回条 */
.pdf-cardbar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.pdf-cardbar[hidden] { display: none; }
.pdf-cardbar-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcb-back, .pcb-toribbon {
  height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.pcb-back:hover, .pcb-toribbon:hover { border-color: var(--blue); color: var(--blue); }
.pw-icon { margin-bottom: 8px; font-size: 34px; }
.pw-inner h2 { margin: 0 0 8px; font-size: 20px; color: var(--text); }
.pw-inner p { max-width: 420px; margin: 0 auto 16px; font-size: 12.5px; line-height: 1.6; color: var(--text2); }
.pw-hint { margin-top: 12px; font-size: 11px; color: var(--text3); }

@media (max-width: 1100px) {
  .pdf-thumbs { display: none !important; }
  .pcb-file { max-width: 160px; }
}
@media (max-width: 768px) {
  .pdf-commandbar { flex-wrap: wrap; gap: 6px; }
  .pcb-file { flex: 1 1 100%; max-width: none; order: 3; }
  .pcb-pager { margin-left: 0; }
  .pcb-apply { margin-left: auto; }
  .pdf-ribbon { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pdf-ribbon::-webkit-scrollbar { display: none; }
}
.pdf-stage-loading {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: var(--bg); color: var(--text2);
  font-size: 12.5px; border-radius: 12px;
}
.pdf-stage-loading[hidden] { display: none; }

/* PDF 顶部缩放组（替代预览区内部工具条） */
.pcb-zoom { display: flex; align-items: center; gap: 2px; flex: none; }
.pcb-zoom[hidden] { display: none; }
.pcb-zoom button {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--text2); cursor: pointer; font-size: 14px; line-height: 1;
}
.pcb-zoom button:hover { background: var(--blue-soft); color: var(--text); }
.pcb-zoomval {
  min-width: 42px; text-align: center; font-size: 11.5px; color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.pcb-zoom .pcb-fit { width: auto; padding: 0 8px; font-size: 11px; }
.pdf-editor .pdf-mark-sec {
  font-size: 10px; letter-spacing: .08em; color: var(--text3);
  margin: 2px 0 -6px; padding: 0 2px;
}
.pdf-preview-inside .control-panel { display: flex; flex-direction: column; }
.pdf-preview-inside .control-panel > * { flex: 0 0 auto !important; }
.pdf-preview-inside .control-panel { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.pdf-preview-inside .control-panel::-webkit-scrollbar { width: 8px; }
.pdf-preview-inside .control-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
@media (max-width: 1200px) { .pcb-file { max-width: 180px; } }

/* 专注预览：隐藏侧栏/顶栏/菜单/缩略图，让整页最大化 */
.pcb-focus {  height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
.pcb-focus:hover { background: var(--blue-soft); color: var(--text); }
body.pdf-focus .sidebar,
body.pdf-focus .topbar,
body.pdf-focus .mtab,
body.pdf-focus .pdf-menubar,
body.pdf-focus .pdf-ribbon,
body.pdf-focus .pdf-thumbs { display: none !important; }
body.pdf-focus .main { padding: 0 !important; height: 100vh; }
body.pdf-focus #page-pdf.active { padding: 0 !important; }
body.pdf-focus .pdf-tools-page { height: 100vh; gap: 6px; padding: 6px; }
body.pdf-focus .pdf-commandbar { border-radius: 8px; }
body.pdf-focus .pdf-workspace { gap: 0; }
body.pdf-focus .pdf-welcome { border-radius: 0; }

/* 原生 PDF 阅读模式（第一阶段） */
.pcb-modes {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 2px; border: 1px solid var(--line); border-radius: 8px;
}
.pcb-modes[hidden] { display: none; }
.pcb-modes button {
  height: 24px; padding: 0 9px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text2); font: inherit; font-size: 11.5px;
  cursor: pointer; white-space: nowrap;
}
.pcb-modes button:hover { color: var(--text); }
.pcb-modes button.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }

.pdf-native-frame {
  display: none; flex: 1 1 auto; width: 100%; height: 100%; min-width: 0;
  border: 0; background: #0f1115;
}
.pdf-tools-page.pdf-reader .pdf-native-frame { display: block; }
.pdf-tools-page.pdf-reader .pdf-tools-frame { display: none !important; }
.pdf-tools-page:not(.pdf-reader) .pdf-native-frame { display: none !important; }

/* 视图切换：卡片视图 / 功能栏视图 */
.pcb-views {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 2px; border: 1px solid var(--line); border-radius: 8px;
}
.pcb-views[hidden] { display: none; }
.pcb-views button {
  height: 24px; padding: 0 9px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text2); font: inherit; font-size: 11.5px;
  cursor: pointer; white-space: nowrap;
}
.pcb-views button:hover { color: var(--text); }
.pcb-views button.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }

/* 卡片视图：藏掉功能区和缩略图，把工具箱首页（分类磁贴 + 入口卡）铺满舞台 */
.pdf-tools-page.pdf-cardview .pdf-native-frame { display: none !important; }
.pdf-tools-page.pdf-cardview .pdf-tools-frame { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
/* 卡片视图的欢迎页交给 .pdf-home / .pdf-toolopen 控制：
   万一卡片首页没渲染出来，至少还能看见「打开一份 PDF」，不是一片灰 */
.pdf-tools-page.pdf-home .pdf-welcome,
.pdf-tools-page.pdf-toolopen .pdf-welcome { display: none !important; }
.pdf-tools-page.pdf-cardview .pdf-menubar,
.pdf-tools-page.pdf-cardview .pdf-ribbon { display: none !important; }
.pdf-tools-page.pdf-cardview .pdf-thumbs { display: none !important; }

/* ================= PDF 卡片首页（父页面渲染，不依赖工具箱 iframe） ================= */
.pdf-cardhome {
  position: absolute; inset: 0; z-index: 4; overflow: auto;
  padding: 18px 20px 26px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.pdf-cardhome[hidden] { display: none; }
.pdf-tools-page.pdf-home .pdf-tools-frame,
.pdf-tools-page.pdf-home .pdf-native-frame,
.pdf-tools-page.pdf-home .pdf-welcome { display: none !important; }

.pdf-cardhome .wb-pdf-hero { padding: 4px 2px 18px; }
.pdf-cardhome .wb-pdf-kicker { font-size: 10.5px; letter-spacing: .16em; color: var(--text2); text-transform: uppercase; }
.pdf-cardhome .wb-pdf-hero h2 { font-size: 24px; line-height: 1.25; margin: 6px 0; color: var(--text); font-weight: 650; }
.pdf-cardhome .wb-pdf-hero p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text2); max-width: 640px; }
.pdf-cardhome .wb-pdf-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pdf-cardhome .wb-cta-open {
  height: 36px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--blue); color: #0D0D0D; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: filter .15s, transform .15s;
}
[data-theme="light"] .pdf-cardhome .wb-cta-open { color: #fff; }
.pdf-cardhome .wb-cta-open:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pdf-cardhome .wb-cta-tip { font-size: 12px; color: var(--text2); }
.pdf-cardhome .wb-pdf-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pdf-cardhome .wb-pdf-recent[hidden] { display: none; }
.pdf-cardhome .wr-tip { font-size: 11.5px; color: var(--text2); }
.pdf-cardhome .wr-chip {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.pdf-cardhome .wr-chip:hover { border-color: var(--blue); color: var(--blue); }
/* 每条最近打开带一个 × */
.pdf-cardhome .wr-item { display: inline-flex; align-items: stretch; }
.pdf-cardhome .wr-item .wr-chip { border-radius: 999px 0 0 999px; border-right: 0; }
.pdf-cardhome .wr-x {
  height: 28px; width: 24px; padding: 0; flex: none;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 999px 999px 0;
  background: var(--card); color: var(--text3); font-size: 13px; line-height: 1; cursor: pointer;
}
.pdf-cardhome .wr-item:hover .wr-x { color: var(--text2); }
.pdf-cardhome .wr-x:hover { background: var(--red-soft); color: var(--red); border-color: rgba(224,108,108,.45); }
.pdf-cardhome .wr-clear {
  height: 28px; padding: 0 11px; border: 1px dashed var(--line); border-radius: 999px;
  background: none; color: var(--text3); font: inherit; font-size: 11.5px; cursor: pointer;
}
.pdf-cardhome .wr-clear:hover { color: var(--red); border-color: rgba(224,108,108,.5); }

.pdf-cardhome .wb-pdf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pdf-cardhome .wb-pdf-tile {
  position: relative; text-align: left; padding: 18px 18px 16px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  font: inherit; cursor: pointer; overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pdf-cardhome .wb-pdf-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--acc); }
.pdf-cardhome .wb-pdf-tile:hover { transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 14px 32px rgba(0,0,0,.10); }
.pdf-cardhome .t-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pdf-cardhome .t-idx { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--acc); }
.pdf-cardhome .t-count { font-size: 11px; color: var(--acc); background: var(--acc-soft); padding: 3px 9px; border-radius: 999px; }
.pdf-cardhome .t-title { font-size: 17px; font-weight: 650; line-height: 1.3; margin-bottom: 6px; color: var(--text); }
.pdf-cardhome .t-desc { font-size: 12px; line-height: 1.55; color: var(--text2); min-height: 36px; }
.pdf-cardhome .t-tools { margin-top: 14px; font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.pdf-cardhome .t-go { margin-top: 14px; font-size: 11.5px; font-weight: 600; color: var(--acc); }

.pdf-cardhome .wb-pdf-cat-hero {
  display: flex; align-items: flex-end; gap: 18px; padding: 6px 2px 18px;
  border-bottom: 1px solid var(--line); margin-bottom: 18px; position: relative;
}
/* 返回分类：独立一行 + 实心描边按钮，别再做成不起眼的小文字链 */
.pdf-cardhome .wb-pdf-cat-top { display: flex; align-items: center; margin: 0 0 10px; }
.pdf-cardhome .h-back {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pdf-cardhome .h-back .h-back-arrow { font-size: 15px; line-height: 1; transition: transform .15s; }
.pdf-cardhome .h-back:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.pdf-cardhome .h-back:hover .h-back-arrow { transform: translateX(-2px); }
.pdf-cardhome .h-idx { font-size: 44px; line-height: .9; font-weight: 700; color: var(--acc); letter-spacing: -.03em; }
.pdf-cardhome .h-kicker { font-size: 10px; letter-spacing: .16em; color: var(--text2); text-transform: uppercase; }
.pdf-cardhome .h-main h2 { margin: 4px 0; font-size: 22px; line-height: 1.25; color: var(--text); font-weight: 650; }
.pdf-cardhome .h-main p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text2); }
.pdf-cardhome .h-count { margin-left: auto; text-align: right; color: var(--acc); }
.pdf-cardhome .h-count b { font-size: 28px; line-height: 1; }
.pdf-cardhome .h-count span { display: block; font-size: 11px; color: var(--text2); margin-top: 3px; }

.pdf-cardhome .wb-pdf-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.pdf-cardhome .wb-pdf-entry {
  position: relative; text-align: left; padding: 16px 16px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 150px; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pdf-cardhome .wb-pdf-entry:hover { transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 14px 32px rgba(0,0,0,.10); }
.pdf-cardhome .we-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--acc-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; flex: none; }
.pdf-cardhome .we-name { font-size: 15px; font-weight: 650; line-height: 1.35; margin-bottom: 5px; color: var(--text); }
.pdf-cardhome .we-desc { font-size: 11.5px; line-height: 1.55; color: var(--text2); }
.pdf-cardhome .we-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.pdf-cardhome .we-modes span { font-size: 10.5px; color: var(--acc); background: var(--acc-soft); padding: 2px 8px; border-radius: 999px; }
@media (max-width: 760px) {
  .pdf-cardhome { padding: 14px 12px 20px; }
  .pdf-cardhome .wb-pdf-hero h2 { font-size: 20px; }
  .pdf-cardhome .wb-pdf-cat-hero { gap: 12px; }
  .pdf-cardhome .h-idx { font-size: 34px; }
  .pdf-cardhome .h-count { display: none; }
}

/* ================= 工具库 · 公文排版 ================= */
#page-gongwen.active { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 18px; }
/* 公文排版落地页：重复的大标题与说明段已去掉（说明改到顶栏的悬浮提示），
   剩下的引导收成一张居中卡片，避免在大片空白里飘着。iframe 在 .gw-frame-wrap 里，不受影响。 */
.gw-shell {
  max-width: 560px; margin: 32px auto 0; padding: 22px 24px 24px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.gw-kicker { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); }
.gw-shell h2 { margin: 6px 0 8px; font-size: 24px; font-weight: 650; color: var(--text); }
.gw-shell p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text2); max-width: 620px; }
.gw-cta { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gw-open {
  height: 38px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--blue); color: #0D0D0D; font: inherit; font-size: 13.5px; font-weight: 650;
  cursor: pointer; transition: filter .15s, transform .15s;
}
[data-theme="light"] .gw-open { color: #fff; }
.gw-open:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gw-tip { font-size: 12px; color: var(--text3); }
.gw-points { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.gw-points li {
  font-size: 11.5px; color: var(--text2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; background: var(--card);
}
.gw-frame-wrap {
  position: relative; flex: 1 1 auto; min-height: 0; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg);
}
.gw-frame-wrap[hidden] { display: none; }
.gw-frame { display: block; width: 100%; height: 100%; border: 0; }
.gw-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text2); background: var(--bg);
}

/* 设置页 · 侧边栏显示：条目多，按列流动排，别竖着拉一长条 */
.navvis-cols {
  columns: 2; column-gap: 22px;
  column-rule: 1px solid var(--line-soft);
}
.navvis-grp { break-inside: avoid; -webkit-column-break-inside: avoid; padding-bottom: 6px; }
.navvis-g { margin: 6px 0 2px; font-size: 11px; color: var(--text3); letter-spacing: .04em; }
.navvis-grp:first-child .navvis-g { margin-top: 0; }
.navvis-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  font-size: 13px; color: var(--text); cursor: pointer; border-radius: 8px;
}
.navvis-row:hover { background: var(--blue-soft); }
.navvis-row input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; flex: none; }
.navvis-row.lock { cursor: default; opacity: .62; }
.navvis-row.lock:hover { background: transparent; }
.navvis-row em {
  font-style: normal; font-size: 10.5px; color: var(--text3);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: auto;
}
.nav-subitem[hidden], .nav-fold[hidden] { display: none !important; }

/* 公文排版 · 手机提示 */
.gw-mobile-tip {
  margin-top: 16px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--orange); color: var(--text2);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  font-size: 12px; line-height: 1.6;
}

/* ================= PDF · 涂黑脱敏 / 文档体检 ================= */
.rd-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.rd-bar .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.rd-page { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
.rd-hint { font-size: 11.5px; color: var(--text3); flex: 1 1 auto; }
.rd-wrap { display: flex; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.rd-wrap canvas { display: block; max-width: 100%; cursor: crosshair; touch-action: none; border-radius: 4px; }
.rd-count { font-size: 11.5px; color: var(--text3); margin-top: 6px; }

.pdfs-report { margin-top: 10px; }
.ck-wait { font-size: 12.5px; color: var(--text3); padding: 10px 0; }
.ck-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ck-table th {
  width: 92px; text-align: left; vertical-align: top; font-weight: 500;
  color: var(--text3); padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.ck-table td { padding: 7px 0; color: var(--text); border-bottom: 1px solid var(--line-soft); line-height: 1.6; }
.ck-table tr:last-child th, .ck-table tr:last-child td { border-bottom: 0; }
.ck-warn { color: var(--orange); }
.ck-dim { color: var(--text3); }
.ck-end {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.7;
  background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--text);
}

/* PDF 弹窗：输出方式（数据文件夹 / 下载） */
.pdfs-out {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 11px;
  border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--card2);
}
.pdfs-out-t { font-size: 11.5px; color: var(--text3); flex: none; }
.pdfs-out-hint { font-size: 12px; color: var(--text2); flex: 1 1 auto; }
.pdfs-out select { height: 30px; font-size: 12.5px; flex: 1 1 220px; min-width: 0; }
.pdfs-out-conn { height: 26px; padding: 0 10px; font-size: 11.5px; flex: none; }

/* 生成进度条（PDF 各生成类功能共用） */
.pdfs-prog { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.pdfs-prog[hidden] { display: none; }
.pdfs-prog .bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--line-soft);
}
.pdfs-prog .bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--blue); transition: width .18s ease;
}
.pdfs-prog span {
  font-size: 11.5px; color: var(--text2); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ================= PDF 首页 · 常用功能 ================= */
.wb-pdf-fav { margin: 0 0 16px; }
.fav-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.fav-t { font-size: 13px; font-weight: 650; color: var(--text); letter-spacing: .02em; }
.fav-hint { font-size: 11.5px; color: var(--text3); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-add {
  flex: none; height: 26px; padding: 0 11px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text2);
}
.fav-add:hover { border-color: var(--blue); color: var(--blue); }

.fav-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fav-chip {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--card); transition: border-color .15s, transform .12s;
}
.fav-chip:hover { border-color: var(--acc, var(--blue)); transform: translateY(-1px); }
.fav-go {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px 7px 11px;
  border: 0; background: none; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.fav-ic { font-size: 14px; line-height: 1; }
.fav-nm { white-space: nowrap; }
.fav-x {
  flex: none; width: 24px; border: 0; border-left: 1px solid var(--line-soft);
  background: none; color: var(--text3); font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.fav-chip:hover .fav-x { opacity: 1; }
.fav-x:hover { background: var(--red-soft); color: var(--red); }
.fav-empty { font-size: 12px; color: var(--text3); }

/* 选择弹窗 */
.fav-pick { max-height: 48vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fav-opt {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--card2); color: var(--text); font: inherit; cursor: pointer;
}
.fav-opt[hidden] { display: none; }
.fav-opt:hover { border-color: var(--blue); }
.fav-opt.on { border-color: var(--blue); background: var(--blue-soft); }
.fo-ic { font-size: 14px; flex: none; }
.fo-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.fo-main b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-main em { font-style: normal; font-size: 10.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-mark { flex: none; font-size: 13px; color: var(--blue); }
@media (max-width: 720px) {
  .fav-pick { grid-template-columns: 1fr; }
  .fav-hint { display: none; }
}

/* 设置页 · 运行诊断 */
.diag-table { display: flex; flex-direction: column; gap: 2px; }
.diag-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 2px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.diag-row:last-child { border-bottom: 0; }
.diag-row .k { flex: none; width: 92px; color: var(--text3); }
.diag-row .v { flex: 1 1 auto; min-width: 0; color: var(--text); line-height: 1.6; word-break: break-word; }
.diag-row .v.warn { color: var(--orange); }
@media (max-width: 560px) {
  .diag-row { flex-direction: column; gap: 2px; }
  .diag-row .k { width: auto; }
}

/* ============================================================================
   驾驶舱 · 悬停动态
   ----------------------------------------------------------------------------
   和万年历那套保持一致：120~180ms、位移 ≤3px、只用 transform/opacity/filter，
   不动 width/height，避免重排。面板本身不加位移（太大，会晃）。
   ============================================================================ */
.kpi { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.kpi:hover { border-color: var(--text3); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
.kpi-ic { transition: transform .16s ease; }
.kpi:hover .kpi-ic { transform: scale(1.08); }

.content-grid > .panel { transition: border-color .18s ease, box-shadow .18s ease; }
.content-grid > .panel:hover { border-color: color-mix(in srgb, var(--text3) 55%, var(--line)); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.panel-head .btn { transition: background .14s ease, border-color .14s ease, transform .12s ease; }
.panel-head .btn:hover { transform: translateY(-1px); }

/* 支付概览的键值行 */
.sum-row { transition: background .14s ease, padding-left .14s ease; border-radius: 6px; }
.sum-row:hover { background: var(--hover); padding-left: 8px; }
.sum-row:hover .v { color: var(--blue); }
.sum-row .k, .sum-row .v { transition: color .14s ease; }

/* 待办与提醒的行 */
.todo-row { transition: background .14s ease, transform .14s ease, box-shadow .14s ease; }
.todo-row:hover { background: var(--hover); transform: translateX(3px); box-shadow: -3px 0 0 var(--blue); }

/* 未来付款分布：柱子只调亮度（transform 被入场动画占用，改不了） */
.bar-col:hover .bar { filter: brightness(1.18) saturate(1.06); }
.bar-col:hover .bar-val { color: var(--text); }
.bar-val, .bars .bar { transition: filter .15s ease, color .15s ease; }
.bars .bar-track { border-radius: 8px; transition: background .15s ease; }
.bar-col:hover .bar-track { background: color-mix(in srgb, var(--text3) 8%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .kpi, .kpi-ic, .content-grid > .panel, .panel-head .btn, .sum-row, .todo-row, .bars .bar, .bars .bar-track { transition: none; }
  .kpi:hover, .todo-row:hover, .panel-head .btn:hover { transform: none; }
}

/* ============================================================================
   系统设置 / 用户管理 · 悬停动态（与其它页统一手感）
   ============================================================================ */
.set-card { transition: border-color .18s ease, box-shadow .18s ease; }
.set-card:hover { border-color: color-mix(in srgb, var(--text3) 45%, var(--line)); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }
.set-line, .set-hint { transition: color .14s ease; }
.set-actions .btn { transition: transform .12s ease, background .14s ease, border-color .14s ease; }
.set-actions .btn:hover { transform: translateY(-1px); }

.usr-card { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.usr-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }

@media (prefers-reduced-motion: reduce) {
  .set-card, .set-actions .btn, .usr-card { transition: none; }
  .set-actions .btn:hover, .usr-card:hover { transform: none; }
}

/* ============================================================================
   悬停动效 · v2 收敛版（覆盖前面那版）
   ----------------------------------------------------------------------------
   上一版的问题（用户反馈"太丑"）：
     · 待办行加了 `translateX` + 左侧蓝条 → 像"被选中"，还盖住文字；
     · 概览行 hover 改 `padding-left` + 数值变蓝 → 二次布局 + 颜色跳变；
     · 卡片投影太重。
   这一版原则：**只做轻微抬升和一层很淡的底色，不改文字颜色、不做横向位移、不改内边距**。
   ============================================================================ */
.kpi { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.kpi:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .10); border-color: color-mix(in srgb, var(--text3) 40%, var(--line)); }
.kpi:hover .kpi-ic { transform: none; }

.content-grid > .panel:hover { border-color: color-mix(in srgb, var(--text3) 32%, var(--line)); box-shadow: none; }

.sum-row { transition: background .16s ease; border-radius: 6px; }
.sum-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); padding-left: 0; }
.sum-row:hover .v { color: inherit; }

.todo-row { transition: background .16s ease; }
.todo-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); transform: none; box-shadow: none; }

.bar-col:hover .bar { filter: brightness(1.08); }
.bar-col:hover .bar-track { background: transparent; }

.set-card:hover { border-color: color-mix(in srgb, var(--text3) 32%, var(--line)); box-shadow: 0 3px 10px rgba(0, 0, 0, .07); }
.set-actions .btn:hover { transform: none; }
.usr-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .10); }

/* 驾驶舱「未来付款分布」：面板被拉到整列高时，柱子跟着长高，别留一块空卡片 */
.content-grid > div > .panel:last-child .bars { flex: 1 1 auto; align-items: stretch; min-height: 150px; }
.content-grid > div > .panel:last-child .bar-col { height: auto; justify-content: flex-end; }
.content-grid > div > .panel:last-child .bar-track { height: auto; flex: 1 1 auto; min-height: 56px; }

/* 矮窗口（≤850 高）时，右列曾把面板改成 `flex: 0 0 auto`，导致「未来付款分布」只有 250px、
   下面空出一大块。这里把它改回"吃掉剩余高度"，配上面那条 .bars 拉伸规则就填满了。 */
.content-grid > div > .panel:last-child { flex: 1 1 auto; }

/* 图表主体（.pay-chart）原来 `flex: 0 1 auto` 不长，卡片被拉高后底部就空一截 —— 让它吃掉剩余高度 */
.content-grid > div > .panel:last-child .pay-chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.content-grid > div > .panel:last-child .pay-chart .bars { flex: 1 1 auto; height: auto; }

/* ============================================================================
   行悬停 · v3「渐变淡出」（替代整块填灰）
   ----------------------------------------------------------------------------
   问题：`--hover`(#1F1F1F) 铺满整行 + 同时把上下分隔线隐藏 → 变成一块**实心灰补丁**，
   在 #151515 的卡片上边界很硬，看着"脏"。
   改法：只从左侧起一层很淡的渐变，到 70% 处完全透明 —— 没有硬边、不断线，
   像"光标所在行被轻轻托起"，而不是刷了一块漆。
   ============================================================================ */
.todo-row {
  transition: background .16s ease;
  border-radius: 8px;
  background: transparent;
}
.todo-row:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text) 7%, transparent) 0%,
    color-mix(in srgb, var(--text) 3%, transparent) 42%,
    transparent 72%);
  transform: none;
  box-shadow: none;
}
/* 保留分隔线：整块填灰时才需要隐藏，渐变不需要 */
.todo-row:hover,
.todo-row:hover + .todo-row { border-top-color: var(--line-soft); }

/* 支付概览的键值行同样处理 */
.sum-row { background: transparent; }
.sum-row:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text) 7%, transparent) 0%,
    transparent 70%);
}

/* 列表分批后的「显示更多」——驾驶舱待办列表 / 看板超期表共用同一套观感 */
.list-more {
  display: block;
  width: 100%;
  margin: 8px 0 4px;
  padding: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.list-more:hover {
  background: var(--hover);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  color: var(--text);
}

/* 浏览器版本提示（color-mix 不支持时的一次性提醒）
   不放进顶栏的 .toast-wrap：那个容器在 ≤1080px 会被 display:none 隐藏。
   纵向位置用 JS 量出来的 --toast-top（顶栏底边 + 8px），顶栏四档高度和刘海安全区都能自适应。 */
.ver-warn {
  position: fixed; top: var(--toast-top, 74px); right: 16px; z-index: 9998;
  max-width: min(380px, calc(100vw - 32px));
  transition: opacity .25s;
}
.ver-warn.out { opacity: 0; }
.ver-warn .toast {
  align-items: flex-start; line-height: 1.55; pointer-events: auto;
  max-width: 100%;
}
.ver-warn .toast > span { word-break: break-word; }
.ver-warn .ver-close {
  flex: none; margin: 1px 0 0 4px; padding: 0; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--text3); cursor: pointer;
}
.ver-warn .ver-close:hover { background: var(--hover); color: var(--text); }
@media (max-width: 767px) { .ver-warn { right: 12px; } }

/* ============================ 同步进度条 ============================
   替代原来那串「已从云端载入最新数据」「已同步其它设备的改动」的 toast ——
   以前每开一次页面右上角就飘一条，既不知道在干什么、也不知道要等多久。
   现在是一条压在顶栏下沿的 2px 进度条：有确定阶段就推进，等回应就流动，
   完成变绿淡出。全宽 fixed，不用管侧栏宽度 / 折叠 / 手机抽屉，也不挤压布局。
   纵向位置复用 --toast-top（由 app.js 的 同步顶栏高度() 用 ResizeObserver 维护），
   减去 8px 正好落在顶栏底边上，盖住那条 1px 分隔线。 */
.sync-bar {
  position: fixed; left: 0; right: 0;
  top: calc(var(--toast-top, 72px) - 8px);
  height: 2px; z-index: 9997;
  background: transparent; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.sync-bar.on { opacity: 1; }
.sync-bar > i {
  display: block; height: 100%; width: 0;
  background: var(--blue);
  transition: width .35s ease, background-color .2s ease;
}
.sync-bar.done > i { background: var(--green); }
/* 不知道要等多久（等服务端回应）：让一小段来回流动，别让人以为卡死了 */
.sync-bar.idle > i {
  width: 34% !important;
  animation: syncflow 1.15s ease-in-out infinite;
}
@keyframes syncflow {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(305%); }
}
@media (prefers-reduced-motion: reduce) {
  .sync-bar.idle > i { animation: none; width: 100% !important; opacity: .45; }
}

/* ---------------- 首屏骨架（脚本就绪前先占位） ----------------
   线上首字节 ~0.4s、首屏绘制 ~0.8s，但真正渲染出内容要等 app.js 解析完（~1.7s）。
   这段空窗期原来只有一个空壳，加几块骨架让"正在加载"看得见。renderCockpit 会整块覆盖掉。 */
.boot-sk { padding: 18px 0 0; }
.sk-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sk-kpis i { display: block; height: 84px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.sk-panel { margin-top: 16px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.sk-panel b { display: block; width: 120px; height: 14px; border-radius: 7px; background: var(--card2); }
.sk-panel i { display: block; height: 46px; margin-top: 10px; border-radius: 10px; background: var(--card2); }
.boot-sk i, .boot-sk b { position: relative; overflow: hidden; }
.boot-sk i::after, .boot-sk b::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent);
  transform: translateX(-100%); animation: skShine 1.3s ease-in-out infinite;
}
@keyframes skShine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .boot-sk i::after, .boot-sk b::after { animation: none; } }
@media (max-width: 1023px) { .sk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sk-kpis i:nth-child(n+5) { display: none; }   /* 手机只渲染 4 张 KPI */
  .sk-kpis i { height: 76px; }
}

/* ================= 更新日志（照 GitHub「发布」页：左边目录 + 右边版本卡片流） =================
   左边是目录：点一条就**滚到**对应卡片（不是替换内容）；滚动时左侧自动跟着高亮。
   ★ 别退回「只有一张详情」或「全宽平铺」：前者看不到历史，后者行太长。 */
.cl-page { max-width: 1000px; margin: 0 auto; }

/* 顶部工具栏 */
.cl-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 2px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.cl-top-l { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cl-count { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--text3); }
.cl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-acts .btn { height: 32px; padding: 0 13px; font-size: 12.5px; text-decoration: none; }

/* 左目录 + 右卡片流 */
.cl-body {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: 22px; margin-top: 16px; align-items: start;
}
.cl-list { position: sticky; top: 6px; display: flex; flex-direction: column; gap: 3px; }
.cl-li {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--text2);
  transition: background .13s, border-color .13s, color .13s;
}
.cl-li:hover { background: var(--card2); }
.cl-li.on { background: var(--card2); border-color: var(--line); color: var(--text); }
.cl-li-v { display: block; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-li.on .cl-li-v { color: var(--blue); }
.cl-li-sub { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text3); font-variant-numeric: tabular-nums; }

/* 卡片流：一个版本一张卡 */
.cl-feed { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cl-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 18px 20px 8px; scroll-margin-top: 14px;
  transition: border-color .15s;
}
.cl-card:hover { border-color: color-mix(in srgb, var(--text3) 40%, var(--line)); }
.cl-card.now { border-color: color-mix(in srgb, var(--blue) 38%, var(--line)); }

.cl-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
.cl-ch-l { min-width: 0; }
.cl-ch h2 {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 750; letter-spacing: -.2px; font-variant-numeric: tabular-nums;
}
.cl-latest {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px; color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 52%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}
.cl-ch-meta { margin-top: 6px; font-size: 12px; color: var(--text3); line-height: 1.6; }
.cl-ch-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-mini {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: 7px; border: 1px solid var(--line); background: transparent;
  color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; text-decoration: none;
  transition: border-color .13s, color .13s, background .13s;
}
.cl-mini:hover { border-color: var(--blue); color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, transparent); }
.cl-mini[disabled] { opacity: .45; cursor: not-allowed; }
.cl-mini[disabled]:hover { border-color: var(--line); color: var(--text2); background: transparent; }

/* 对比面板 */
.cl-diff {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card2);
  font-size: 12.5px; line-height: 1.75; color: var(--text2);
}
.cl-diff a { color: var(--blue); text-decoration: none; }
.cl-diff a:hover { text-decoration: underline; }

/* 卡片正文 */
.cl-cbody { padding: 2px 0 10px; }
.cl-gs { margin-top: 12px; }
.cl-g + .cl-g { margin-top: 14px; }
.cl-gt {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--text2);
  margin-bottom: 5px;
}
.cl-gt i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cl-gt i.add { background: var(--green); }
.cl-gt i.opt { background: var(--blue); }
.cl-gt i.fix { background: var(--orange); }
.cl-gt i.misc { background: var(--text3); }
.cl-g ul { margin: 0; padding-left: 19px; }
.cl-g li { font-size: 13px; line-height: 1.72; color: var(--text2); padding: 1px 0; }
.cl-g li::marker { color: var(--text3); }

/* 资产（只有最新那张卡有） */
.cl-assets { margin-top: 15px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.cl-assets summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text2);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.cl-assets summary::-webkit-details-marker { display: none; }
.cl-assets summary::before { content: '▸'; color: var(--text3); font-size: 11px; }
.cl-assets[open] summary::before { content: '▾'; }
.cl-assets-n {
  font-size: 10.5px; font-weight: 600; padding: 0 7px; line-height: 17px; height: 17px;
  border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: var(--text3);
}
.cl-assets ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cl-assets li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px;
  color: var(--text2); text-decoration: none; font-size: 12.5px; transition: border-color .13s, color .13s;
}
.cl-assets li a:hover { border-color: var(--blue); color: var(--blue); }
.cl-af { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-an { flex: none; font-size: 11.5px; color: var(--text3); }

.cl-tip {
  margin: 22px 2px 0; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.75; color: var(--text3);
}
.cl-tip code { background: var(--card2); padding: 1px 5px; border-radius: 4px; }
.cl-tip b { color: var(--text2); }

/* 编辑弹窗 */
#modal-box.cl-ed-box { width: min(700px, 94vw); }
.cl-ed { padding: 4px 2px 2px; }
.cl-ed-h { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.cl-ed-tip { margin: 0 0 12px; font-size: 11.5px; line-height: 1.7; color: var(--text3); }
.cl-ed-tip code { background: var(--card2); padding: 1px 5px; border-radius: 4px; }
.cl-ed-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-ed-row label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.cl-ed-row input { width: 150px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); color: var(--text); font: inherit; font-size: 12.5px; }
.cl-ed textarea {
  width: 100%; min-height: 320px; max-height: 46vh; padding: 11px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--text);
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.75; resize: vertical;
}
.cl-ed-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* 窄屏：目录变一行横滑胶囊，卡片占满 */
@media (max-width: 900px) {
  .cl-body { grid-template-columns: 1fr; gap: 12px; }
  .cl-list {
    position: static; flex-direction: row; gap: 6px;
    overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .cl-list::-webkit-scrollbar { height: 0; }
  .cl-li { flex: 0 0 auto; width: auto; padding: 7px 12px; }
}
@media (max-width: 767px) {
  .cl-acts { width: 100%; }
  .cl-acts .btn { flex: 1 1 auto; height: 34px; justify-content: center; }
  .cl-card { padding: 14px 14px 6px; border-radius: 12px; }
  .cl-ch h2 { font-size: 17px; }
  .cl-ch-acts { width: 100%; }
  .cl-mini { flex: 1 1 auto; justify-content: center; height: 30px; }
  .cl-g li { font-size: 12.5px; line-height: 1.7; }
  .cl-assets li a { font-size: 12px; }
  .cl-af { font-size: 11px; }
}

/* ---------------- 自绘 tooltip（替代原生 title 气泡） ----------------
   原生 title 的配色跟浏览器/系统主题走，页面切主题后会出现「深色页面白框、浅色页面黑框」，
   所以统一改成这个：永远用页面自己的 --card / --text / --line。 */
.wb-tip {
  position: fixed; z-index: 9500; pointer-events: none;
  max-width: 280px; padding: 6px 10px; border-radius: 8px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
  font-size: 12px; line-height: 1.55; letter-spacing: .1px;
  white-space: pre-line; word-break: break-word;   /* title 里的 \n 保留成换行，和原生气泡一致 */
  opacity: 0; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}
.wb-tip.on { opacity: 1; transform: none; }

/* 设置页 · 侧栏折叠：一行一个分组，右边一个状态按钮 */
.set-fold-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.set-fold-row > span { min-width: 0; color: var(--text2); }
.set-fold-row > span b { color: var(--text); font-weight: 600; }
.set-fold-row .btn { flex: none; height: 28px; padding: 0 12px; font-size: 12px; }

/* 弹窗底部按钮：原来 .form-actions 在 .modal-body 外面、没有任何内边距，
   按钮直接贴着弹窗右/下边框（用户反馈"太靠近边框，很难看"）。 */
#modal-box > .form-actions {
  padding: 0 20px 18px;
  margin-top: -2px;
  justify-content: flex-end;
  gap: 10px;
}
#modal-box > .form-actions > .btn { min-width: 84px; justify-content: center; }
/* 左侧放「删除这条」这种次要按钮时仍靠左 */
#modal-box > .form-actions > .btn[style*="margin-right:auto"] { margin-right: auto !important; min-width: 0; }
@media (max-width: 767px) {
  #modal-box > .form-actions { padding: 0 14px 14px; }
  #modal-box > .form-actions > .btn { min-width: 0; }
}