/* ============================================================
 * 中米星链工作台 · 全新 UI 设计体系 (ui-2026)
 * 设计基调：Quiet Precision —— 安静而精确
 *   1. 排版主导层级：字重降到 500/600，靠字号·字距·留白建立秩序
 *   2. 中性分层：投影去紫，紫只用于「激活 / 主行动 / 数据强调」
 *   3. 几何统一：圆角只有 14 / 10 / 8 / 全圆 四档
 *   4. 去掉拟物：按钮无高光无渐变，卡片无装饰光斑
 *   5. 数据优先：金额与统计启用等宽数字，纵向对齐稳定
 * 加载顺序：必须在 style.css 之后（脚本清单已保证），靠层叠覆盖，不改动原文件。
 * ============================================================ */

/* ============ 1. 设计变量 ============ */
:root {
  /* 画布：干净中性近白，去掉原来的淡紫底，界面更清透 */
  --bg: #F6F7F9;
  --bg-2: #EFF1F5;
  --bg-1: #FFFFFF;
  --card: #FFFFFF;
  --card-line: rgba(16, 20, 32, .06);

  /* 品牌：保留靛紫识别度，略降饱和更沉稳 */
  --ink: #211E38;
  --primary: #6D4AFF;
  --primary-2: #8B5CF6;
  --primary-3: #A78BFA;
  --grad: #6D4AFF;                    /* 原渐变改纯色，旧引用处自动变扁平 */
  --grad-deep: #2A2450;
  --grad-soft: #F1EEFF;
  --primary-weak: #F2EFFE;
  --primary-line: #DDD6FE;

  /* 文字阶梯：整体提亮对比，层级靠明度而非字重 */
  --text: #16141F;
  --text-2: #4E4A61;
  --text-3: #6B6780;
  --text-4: #95919F;

  --line: #EBECF0;
  --line-2: #E1E3E9;
  --hairline: rgba(16, 20, 32, .07);

  --green: #0E9F6E;
  --green-weak: #E7F6F0;
  --amber: #B45309;
  --amber-weak: #FDF3E5;
  --red: #D92D20;
  --red-weak: #FDECEA;
  --cyan: #0284C7;
  --cyan-weak: #E3F2FC;

  /* 几何：只有四档，杜绝随手取值 */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* 投影：中性多层，去掉品牌紫染色（原阴影泛紫显脏） */
  --shadow-sm: 0 1px 2px rgba(16, 20, 32, .04);
  --shadow: 0 1px 2px rgba(16, 20, 32, .04), 0 4px 12px rgba(16, 20, 32, .05);
  --shadow-lg: 0 8px 20px rgba(16, 20, 32, .08), 0 20px 44px rgba(16, 20, 32, .07);
  --shadow-brand: 0 4px 12px rgba(109, 74, 255, .22);

  --nav-h: 62px;
  --header-h: 56px;
}

:root[data-theme="dark"] {
  --bg: #0E0C16;
  --bg-2: #16132A;
  --bg-1: #1A1730;
  --card: #1A1730;
  --card-line: rgba(255, 255, 255, .07);

  --ink: #F4F2FF;
  --primary: #9B83FF;
  --primary-2: #B6A4FF;
  --primary-3: #CFC3FF;
  --grad: #9B83FF;
  --grad-deep: #0E0C16;
  --grad-soft: #241F42;
  --primary-weak: #241F42;
  --primary-line: #3A3266;

  --text: #F2F0FA;
  --text-2: #B4AFCB;
  --text-3: #918CAE;
  --text-4: #6E6A88;

  --line: #262244;
  --line-2: #2F2A52;
  --hairline: rgba(255, 255, 255, .08);

  --green: #3ECF9A;
  --green-weak: #12332A;
  --amber: #F0A93B;
  --amber-weak: #3A2A12;
  --red: #FF6B5E;
  --red-weak: #3A1A18;
  --cyan: #4CC3F0;
  --cyan-weak: #10293A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, .4), 0 22px 48px rgba(0, 0, 0, .35);
  --shadow-brand: 0 4px 14px rgba(155, 131, 255, .28);
}

/* ============ 2. 基础排版 ============ */
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}
/* 金额 / 统计统一等宽数字，纵向不再跳动 */
.mc-big, .mc-cell b, .recon-v, .stat-v, .kpi-v, .money,
.ds-kpi-v, .fn-amt, .pf-line b, .li-sub b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============ 3. 卡片：几何统一 + 去装饰 ============ */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 0 0 12px;
}
.mini-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--card-line);
}
.card-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .1px;
  margin: 0 0 12px;
}
.card-title .sub { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
/* 标题左侧竖条：渐变改纯色，更干净 */
.card-title.bar::before {
  width: 3px; height: 13px; border-radius: 2px;
  background: var(--primary); margin-right: 9px;
}

/* 金额卡：移除装饰光斑，强化数据表达 */
.money-card {
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-line);
  background: var(--card);
}
.money-card::after { display: none; }
.money-card > * { position: relative; z-index: 1; }
.mc-label { font-size: 12.5px; font-weight: 500; color: var(--text-3); letter-spacing: .2px; }
.mc-big {
  font-size: 30px; font-weight: 700; letter-spacing: -.6px;
  color: var(--text); margin: 4px 0 14px;
}
:root[data-theme="dark"] .mc-big { color: var(--text); }
.mc-cell { background: var(--bg-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.mc-cell b { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.mc-cell em { font-size: 11.5px; color: var(--text-3); }

/* ============ 4. 按钮：扁平化，去高光去渐变 ============ */
.btn {
  height: 46px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  background: var(--primary);
  color: #fff;
  box-shadow: none;
  transition: background-color .16s, transform .12s, opacity .16s;
}
.btn::before { display: none; }
.btn:active { transform: scale(.98); background: #5B3CE8; }
.btn.ghost { background: var(--primary-weak); color: var(--primary); font-weight: 500; }
.btn.ghost:active { background: var(--primary-line); }
.btn.line { background: var(--card); color: var(--text-2); border: 1px solid var(--line-2); font-weight: 500; }
.btn.line:active { background: var(--bg-2); }
.btn.gray { background: var(--bg-2); color: var(--text-2); font-weight: 500; }
.btn.danger { background: var(--red-weak); color: var(--red); font-weight: 500; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--radius-xs); font-weight: 500; }
.btn.fab {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--primary);
  box-shadow: 0 6px 14px rgba(109, 74, 255, .28), 0 12px 28px rgba(16, 20, 32, .14);
}

/* ============ 5. 表单：更轻的描边与聚焦环 ============ */
.field { margin-bottom: 14px; }
.field > label { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 7px; }
.field input, .field textarea, .field select,
.field-in {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color .16s, box-shadow .16s;
}
.field input, .field select { height: 46px; }
.field input:focus, .field textarea:focus, .field select:focus,
.field-in:focus {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, .12);
}
:root[data-theme="dark"] .field-in { background: var(--bg-1); }

/* ============ 6. 筛选片 / 标签：几何统一，字重下调 ============ */
.chips { gap: 8px; }
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  box-shadow: none;
  transition: background-color .16s, color .16s, border-color .16s;
}
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 500; }

.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: .1px;
}

/* ============ 7. 列表项：更清晰的层级 ============ */
.item-card {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-line);
}
.li-title { font-size: 14.5px; font-weight: 500; letter-spacing: .1px; }
.li-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.li-tags { gap: 6px; margin-top: 6px; }

/* ============ 8. 底部导航：去掉发光下划线，激活更克制 ============ */
.bottom-nav {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(16, 20, 32, .10), 0 2px 6px rgba(16, 20, 32, .06);
  padding: 6px;
}
.bottom-nav button { font-size: 11px; font-weight: 500; border-radius: 14px; padding: 8px 6px; color: var(--text-3); }
.bottom-nav button svg { stroke: var(--text-3); }
.bottom-nav button.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; box-shadow: none; }
.bottom-nav button.active svg { stroke: var(--primary); }
.bottom-nav button.active::after { display: none; }
:root[data-theme="dark"] .bottom-nav { background: rgba(26, 23, 48, .92); }

/* ============ 9. 弹窗：更轻的阴影与更利落的圆角 ============ */
.modal {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--card-line);
}
.modal-mask { background: rgba(16, 20, 32, .42); }

/* ============ 10. 电脑版外壳 ============ */
#ds-side, .ds-side {
  background: var(--card);
  border-right: 1px solid var(--line);
}
.ds-nav-item {
  border-radius: var(--radius-xs);
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color .14s, color .14s;
}
.ds-nav-item.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }
.ds-route { max-width: 1180px; }
.ds-kpi { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--card-line); }
.ds-kpi-v { font-size: 22px; font-weight: 600; letter-spacing: -.3px; }

/* ============ 11. 通用修饰 ============ */
.divider, .sep { background: var(--line); }
/* 焦点可见性：键盘导航友好 */
:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }

/* ============ 12. 修「显示不全」：数字绝不省略 ============
   原 style.css 对主金额/统计数字也加了 ellipsis，长金额会被截成「¥1,23…」。
   数字必须完整可读：改为自适应缩放字号 + 不截断。 */
.cm-hero .cm-big, .grp-cm, .hero .h-v, .hero .h-pill b, .total-bar b,
.vip-stats .vs b, .recon-v, .mc-big, .ds-kpi-v, .stat-v, .kpi-v,
.pf-line b, .fn-amt, .li-sub b {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
/* 主金额随屏宽自适应缩放，保证长数字也能完整显示 */
.cm-hero .cm-big { font-size: clamp(21px, 8vw, 34px); letter-spacing: -.8px; }
.grp-cm { font-size: clamp(15px, 5vw, 18px); }
.hero .h-v { font-size: clamp(17px, 5.4vw, 20px); }
.total-bar b { font-size: clamp(16px, 5vw, 18px); }
.vip-stats .vs b { font-size: clamp(15px, 4.6vw, 17px); }

/* 卡片标题：允许换行，避免「标题 + 右侧副信息」被裁掉 */
.card-title { flex-wrap: wrap; overflow: visible; }
.sec-hd { flex-wrap: wrap; }
.sec-hd h2 { font-weight: 600; font-size: 15px; }

/* 名称类保留省略，但给出 title 提示的视觉暗示（悬停可看全） */
.pc-name, .tpl-info span, .st-name, .rk-name, .aa-name, .ac-name, .vip-name {
  text-overflow: ellipsis;
}

/* ============ 13. 弹窗重构：移动端底部抽屉 / 电脑版居中对话框 ============ */
/* 移动端：加拖拽手柄，明确「可下拉关闭」 */
.modal::before {
  content: ''; display: block; width: 36px; height: 4px;
  border-radius: 999px; background: var(--line-2);
  margin: 8px auto 4px;
}
.modal { max-height: 90vh; }
.modal-hd { padding: 10px 0 14px; }
.modal-hd h3 { font-size: 17px; font-weight: 600; letter-spacing: .1px; }
/* 关闭按钮：热区从 ~30px 扩到 36px，且给出可点击背景 */
.modal-hd .close {
  width: 36px; height: 36px; margin-right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-2);
  font-size: 20px; line-height: 1; color: var(--text-3);
  transition: background-color .16s, color .16s;
}
.modal-hd .close:active { background: var(--line-2); color: var(--text); }

/* 电脑版：居中对话框，四角全圆，缩放淡入（底部抽屉在宽屏很怪） */
@media (min-width: 768px) {
  .modal-mask { align-items: center; padding: 28px 20px; }
  .modal {
    border-radius: 16px;
    max-height: 84vh;
    padding: 6px 22px 22px;
    box-shadow: var(--shadow-lg);
    animation: modalPop .22s cubic-bezier(.2, .9, .3, 1);
  }
  .modal::before { display: none; }
  .modal-hd { padding: 16px 0 14px; }
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .modal, .btn, .card, .chip { animation: none !important; transition: none !important; }
}

/* ============ 14. 交互增强 ============ */
/* 图标按钮热区补足 */
.ic-btn {
  min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: background-color .15s, color .15s;
}
/* 仅对支持 hover 的指针设备加悬停反馈，避免移动端「粘滞 hover」 */
@media (hover: hover) and (pointer: fine) {
  .card, .mini-card { transition: box-shadow .18s, border-color .18s; }
  .card:hover, .mini-card:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); }
  .item-card { transition: box-shadow .16s, background-color .16s; }
  .item-card:hover { box-shadow: var(--shadow); background: var(--bg-2); }
  .chip:hover { border-color: var(--primary-3); color: var(--primary); }
  .chip:not(.active):hover { background: var(--primary-weak); }
  .btn:hover { filter: brightness(1.05); }
  .btn.line:hover, .btn.gray:hover { background: var(--bg-2); filter: none; }
  .ds-nav-item:hover { background: var(--bg-2); }
  .ds-nav-item.active:hover { background: var(--primary-weak); }
  .ic-btn:hover { background: var(--bg-2); }
  .modal-hd .close:hover { background: var(--line-2); color: var(--text); }
  .bottom-nav button:hover { color: var(--primary); }
}
/* 统一按压反馈 */
.card:active, .item-card:active { transform: scale(.995); }
/* 桌面端滚动条细化，避免默认粗条破坏精致感 */
@media (min-width: 768px) {
  .app-view::-webkit-scrollbar, .modal::-webkit-scrollbar,
  #ds-main::-webkit-scrollbar, .ds-side::-webkit-scrollbar { width: 10px; height: 10px; }
  .app-view::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb,
  #ds-main::-webkit-scrollbar-thumb, .ds-side::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: 999px; border: 3px solid transparent;
    background-clip: content-box;
  }
  .app-view::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }
}

/* ============ 15. 小屏兜底（≤360px 紧凑机型） ============ */
@media (max-width: 360px) {
  .app-view { padding-left: 12px; padding-right: 12px; }
  .card { padding: 13px; }
  .mc-big { font-size: 26px; }
  .cm-hero .cm-big { font-size: clamp(19px, 8vw, 30px); }
  .modal { padding-left: 14px; padding-right: 14px; }
}

/* ============ 16. 电脑端响应式侧栏（.side-nav 体系）覆盖 ============
   原 style.css 在 ≥768px 用 .side-nav 充当左侧栏，需同步新设计语言
   （旧版激活态仍是 700 字重 + 投影，未纳入 ui-2026 体系） */
.app-header h1 { font-weight: 600; letter-spacing: -.1px; }
.side-nav .sn-brand b { font-weight: 600; letter-spacing: .2px; }
.side-nav .sn-gt { font-weight: 600; letter-spacing: .9px; color: var(--text-4); }
.side-nav button { font-weight: 500; }
.side-nav button.active {
  background: var(--primary-weak); color: var(--primary); font-weight: 600;
  box-shadow: none;
}
.side-nav .sn-dot { background: var(--red); box-shadow: none; }
.side-nav .sn-logo { box-shadow: none; }
/* 桌面模式主区顶栏：半透明条改为中性，去掉淡紫染色 */
@media (min-width: 768px) {
  .app-header { background: rgba(246, 247, 249, .82); border-bottom: 1px solid var(--line); }
  :root[data-theme="dark"] .app-header { background: rgba(20, 18, 28, .82); }
  /* 桌面端侧栏品牌区与分组更克制 */
  .side-nav .sn-brand { padding: 6px 8px 16px; }
}

/* ============ 17. 首页/工作台数据卡片深度覆盖 ============
   原 style.css 中：
   - .kpi-card 靠彩色渐变背景区分，整体喧闹；
   - .kc-v / .ds-kpi-v 字重 800，与整体 500/600 体系冲突；
   - .dash-box 用 --bg 融入画布，缺乏层级；
   - .ds-fn-bar 粗重且用旧 --grad；
   这里改为：卡片统一中性底，仅在图标/数值颜色上做语义区分。 */

/* 移动端 KPI 卡片：去掉渐变，统一卡片 */
.kpi-card, .kpi-card.accent-cyan, .kpi-card.accent-green, .kpi-card.accent-amber, .kpi-card.accent-red {
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.kpi-card .kc-t { font-weight: 500; }
.kpi-card .kc-v, .kpi-card .kc-v .count { font-weight: 600; letter-spacing: -.4px; }
.kpi-card .kc-v .pre { font-weight: 600; color: var(--text-3); }
.kpi-card .kc-s { font-weight: 500; }

/* 分区标题 */
.sec-label { font-weight: 600; letter-spacing: .2px; }

/* 经营驾驶舱小卡片 */
.dash-box {
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
}
.dash-box .dash-t { font-weight: 500; }
.dc-pay-bar, .dc-goal-bar { background: var(--bg-2); border-radius: var(--radius-xs); overflow: hidden; }
.dc-pay-bar i, .dc-goal-bar i { background: var(--primary-2); border-radius: var(--radius-xs); }

/* 电脑端 KPI */
.ds-kpi { box-shadow: var(--shadow); }
.ds-kpi-t { font-weight: 500; }
.ds-kpi-v { font-weight: 600; letter-spacing: -.4px; }

/* 电脑端漏斗条 */
.ds-fn-bar { height: 14px; background: var(--bg-2); border-radius: var(--radius-xs); }
.ds-fn-bar i { background: var(--primary-2); border-radius: var(--radius-xs); }
.ds-fn b { font-weight: 600; }

/* 功能导航分组标题 */
.ds-app-gt { font-weight: 600; letter-spacing: .4px; }

/* ============ 18. 业务页深度统一（列表/卡片/统计） ============
   原 style.css 在业务页残留的「旧语言」：
   - 列表项左条用硬编码 linear-gradient（紫→粉、绿→橙等），喧闹且不统一；
   - .stat .v / .amt / .proj-card .pc-* 仍是 800/700 字重，与 500/600 体系冲突；
   - 首页业务指标卡是「内联」linear-gradient，class 覆盖压不住，需 !important；
   - .board-card .bc-h 700 字重。
   统一为：左条用语义纯色、字重收敛到 600/700、几何对齐新体系。 */

/* 列表项左条：渐变改语义纯色（覆盖原硬编码 linear-gradient） */
.item-card::before { background: var(--line-2); }
.item-card.p-high::before { background: var(--red); }
.item-card.p-normal::before { background: var(--primary); }
.item-card.p-low::before { background: var(--text-4); }
.item-card.is-done::before { background: var(--green); }
.item-card.due-today::before { background: var(--amber); }
.item-card.rb-pending::before { background: var(--amber); }
.item-card.rb-submitted::before { background: var(--cyan); }
.item-card.rb-done::before { background: var(--green); }
.item-card.rb-rejected::before { background: var(--red); }
.item-card.kind-in::before { background: var(--green); }
.item-card.kind-out::before { background: var(--red); }
.item-card.grp::before { background: var(--primary); }
.item-card.cm::before { background: var(--primary-2); }
.item-card.insp-item::before { background: var(--primary); }

/* 进度项目卡：收敛字重 + 几何对齐 */
.proj-card { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); border: 1px solid var(--card-line); }
.proj-card:active { box-shadow: var(--shadow); }
.pc-name { font-weight: 600; letter-spacing: -.2px; }
.pc-pct { font-weight: 700; letter-spacing: -.5px; }
.pc-ft b { font-weight: 600; }
.beads i.on { background: var(--primary-2); }

/* 统计数字：800 → 700，保持强调但不喧闹 */
.stat { border-radius: var(--radius); border: 1px solid var(--card-line); }
.stat .v { font-weight: 700; letter-spacing: -.4px; }
.stat .v.in { color: var(--green); }
.stat .v.out { color: var(--red); }
.stat .v.net { color: var(--primary); }
.amt { font-weight: 700; letter-spacing: -.4px; }
.amt.in { color: var(--green); }
.amt.out { color: var(--red); }

/* 看板标题：700 → 600，左条纯色品牌 */
.board-card .bc-h { font-weight: 600; }
.board-card .bc-h::before { background: var(--primary); }

/* 分区标题 */
.sec-hd h2 { font-weight: 600; letter-spacing: -.2px; }
.sec-hd .more { font-weight: 600; }

/* 首页业务指标卡：中和「内联」linear-gradient（内联需 !important） */
.kpi-card { background: var(--card) !important; }

/* 分组筛选段：字重收敛 */
.grp-seg button { font-weight: 500; border-radius: 999px; }
.grp-seg button.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }

/* 模板行 / 入口格：圆角对齐 */
.tpl-row { border-radius: var(--radius-sm); }
.tool-cell, .hd-cell, .sc-item { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); border: 1px solid var(--card-line); }
.hd-cell { background: var(--card); }

/* 迷你统计数字 */
.mini-stats b { font-weight: 700; }

/* 列表内标签字重 */
.li-tags .tag { font-weight: 500; }

/* ============ 19. 窄屏实测修复：Hero 卡 / 多选按钮 / 登录背景 ============
   390/360 实测发现：
   - 首页 .hero 仍是深紫渐变 + 浮动光斑 + 渐变流动动画，视觉最重；
   - 任务页 .lvt-btn 被设成 34×34，导致「多选」二字竖排换行；
   - 登录页 .auth-bg 紫色径向光晕过强。
   统一压平。 */

/* Hero 卡片：去渐变/去光斑/去动画，改为纯色品牌 */
.hero {
  background: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
  animation: none;
  color: #fff;
}
.hero::before, .hero::after { display: none; }
.hero .h-title { font-size: 22px; font-weight: 600; letter-spacing: .3px; }
.hero .h-greet { font-weight: 500; opacity: .92; }
.hero .h-v { font-weight: 700; letter-spacing: -.3px; }
.hero .h-cell {
  background: rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hero .h-pill {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero .h-pill b { font-weight: 700; }
.hero .h-pill span { opacity: .9; }

/* 任务页「多选」按钮：基座把 .lvt-btn 设成 34×34 图标按钮，但业务页放了文字，导致竖排 */
.lvt-btn {
  width: auto; min-width: 34px; height: 34px;
  padding: 0 10px; gap: 5px;
  white-space: nowrap; font-size: 13px; font-weight: 500;
  color: var(--text-2); border-radius: var(--radius-xs);
  background: var(--card); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
.lvt-btn.active { background: var(--primary-weak); color: var(--primary); border-color: var(--primary-line); }

/* 登录页：弱化紫色光晕，logo 与标题字重收敛 */
.auth-bg { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(109, 74, 255, .06), transparent 70%); }
.auth-logo-lg { background: var(--primary); box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .3); }
.auth-h { font-weight: 700; }
.auth-card-t { font-weight: 600; }
.auth-card { border-radius: var(--radius); border: 1px solid var(--card-line); box-shadow: var(--shadow); }

/* ============ 20. 字重统一：基座残留 800 → 600/700 ============
   基座 style-base.css 仍有约 50 处 font-weight:800，分布在金额/统计/标题，
   与 Quiet Precision 体系（500/600）冲突。统一收敛：
   · 数字 / 金额 / 统计强调 → 700
   · 标题 / 条目名称 / 辅助文字 → 600
   · 保持头像缩写字母等极小面积强调不变 */

/* 主金额 / 分组金额 / 总金额 */
.cm-hero .cm-big,
.grp-cm,
.total-bar b {
  font-weight: 700 !important;
}

/* VIP / 客户 / 排名 / 应用入口 */
.vip-name,
.vip-stats .vs b,
.rk-cm,
.rk-no,
.all-apps-entry .aa-head b,
.apps-ghead b {
  font-weight: 700;
}

/* 计时器 / 倒计时 / 小统计 */
.t-num,
.t-colon,
.ms b,
.cal-cell.today,
.cal-cell.sel {
  font-weight: 700;
}

/* 数字输入/计算结果 / 大金额 */
.amount-big,
.calc-result,
.draw-lv,
.ring-t {
  font-weight: 700;
}

/* 动态首页 / 仪表盘数字 */
.dy-hero-pct,
.dy-num b,
.dy-home-sub b {
  font-weight: 700;
}

/* 首页功能入口标题 / 数值 */
.feature .f-title,
.feature .f-v {
  font-weight: 700;
}

/* 弹窗标题 / 订单摘要标题 */
.modal-hd h3,
.ob-title {
  font-weight: 600;
}

/* 投影项目卡名已 600；确保其他 800 标题也收敛 */
.pc-name { font-weight: 600; }

/* 移动端列表条目副标题金额强调 */
.li-sub b { font-weight: 700; }

/* ============ 21. 组件细节补全 ============
   · 空状态 / 无数据提示居中收敛
   · 标签 chip 在业务页保持统一圆角
   · 搜索栏/工具栏在深色模式下背景正确 */
.empty-tip,
.no-data,
.placeholder {
  color: var(--text-3);
  font-weight: 500;
  text-align: center;
}
.empty-tip svg,
.no-data svg,
.placeholder svg {
  opacity: .5;
}

/* 深色模式下的输入框、卡片、hero 适配 */
:root[data-theme="dark"] .hero .h-cell,
:root[data-theme="dark"] .hero .h-pill {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] .field-in,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea {
  background: var(--bg-1);
  border-color: var(--line-2);
}

/* ============ 22. 登录界面升级（视觉 + 层级 + 品牌感） ============
   目标：把登录页从「可用」提升到「品牌信任感」：
   · Logo 更大、阴影更柔和，强化第一视觉锚点
   · 卡片留白更充分，输入框 focus 态与体系一致
   · 按钮去渐变、去 scale 动画，扁平主行动
   · 页脚与法律链接排版更克制
   · PC 端卡片更宽、视觉重心居中；深色模式输入框不再浅灰突兀 */

.auth-screen {
  justify-content: center;
  padding: 5vh 18px 40px;
}

/* Logo：放大 + 柔和投影 */
.auth-logo-lg {
  width: 74px; height: 74px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(109, 74, 255, .22), 0 4px 8px rgba(109, 74, 255, .10);
}
.auth-logo-lg svg, .auth-logo-lg img {
  width: 40px; height: 40px;
}

/* 品牌标题：收敛字重，靠字号建立层级 */
.auth-h {
  font-size: 23px; font-weight: 700; letter-spacing: -.2px;
  color: var(--text); margin-top: 16px;
}
.auth-sub {
  font-size: 13px; font-weight: 500; letter-spacing: .2px;
  color: var(--text-3); margin-top: 8px;
}

/* 登录卡片：统一新体系的白底卡片 */
.auth-card {
  width: 100%; max-width: 360px;
  margin-top: 28px; padding: 24px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.auth-card-t {
  font-size: 15px; font-weight: 600;
  color: var(--text); margin-bottom: 18px;
  text-align: center;
}

/* 输入框：白底 + 描边 + focus 环，与全局 field 一致 */
.auth-ico-field {
  height: 50px;
  padding: 0 14px;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.auth-ico-field:focus-within {
  border-color: var(--primary-2);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, .12);
}
.auth-ic { color: var(--text-4); transition: color .16s; }
.auth-ico-field:focus-within .auth-ic { color: var(--primary); }
.auth-ico-field input {
  font-size: 15px; font-weight: 500; color: var(--text);
}
.auth-ico-field input::placeholder { color: var(--text-4); }

/* 登录按钮：扁平 + 按压反馈 */
.auth-btn {
  height: 50px;
  border-radius: var(--radius-sm);
  font-size: 15.5px; font-weight: 600; letter-spacing: .3px;
  background: var(--primary); color: #fff;
  box-shadow: none;
  transition: background-color .16s, transform .12s;
}
.auth-btn:active { background: #5B3CE8; transform: scale(.99); }

/* 注册/登录切换 */
.auth-toggle {
  display: block;
  margin-top: 14px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  text-align: center;
}
.auth-toggle a, .auth-toggle .link {
  color: var(--primary); font-weight: 600;
  text-decoration: none;
}
.auth-toggle a:hover { text-decoration: underline; }

/* 游客入口：改为次按钮样式，避免像纯文本链接 */
.auth-skip {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 500;
  color: var(--primary);
  background: var(--primary-weak);
  border-radius: var(--radius-sm);
  transition: background-color .16s;
}
.auth-skip:active { background: var(--primary-line); opacity: 1; }

/* 页脚：收敛字号与层级 */
.auth-foot {
  margin-top: 18px;
  font-size: 11px; font-weight: 500;
  color: var(--text-4); line-height: 1.8;
}
.auth-foot a {
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color .16s, border-color .16s;
}
.auth-foot a:hover { color: var(--primary); border-color: var(--primary-3); }

/* 深色模式：输入框与卡片不再突兀 */
:root[data-theme="dark"] .auth-logo-lg {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 4px 8px rgba(109, 74, 255, .15);
}
:root[data-theme="dark"] .auth-card {
  background: var(--card);
  border-color: var(--card-line);
}
:root[data-theme="dark"] .auth-ico-field {
  background: var(--bg-1);
  border-color: var(--line-2);
}
:root[data-theme="dark"] .auth-ico-field:focus-within {
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(155, 131, 255, .16);
}
:root[data-theme="dark"] .auth-ico-field input { color: var(--text); }
:root[data-theme="dark"] .auth-ico-field input::placeholder { color: var(--text-4); }
:root[data-theme="dark"] .auth-h { color: var(--text); }
:root[data-theme="dark"] .auth-sub { color: var(--text-3); }
:root[data-theme="dark"] .auth-skip { background: var(--primary-weak); }
:root[data-theme="dark"] .auth-skip:active { background: var(--primary-line); }

/* PC 端：更大的卡片与居中视觉重心 */
@media (min-width: 768px) {
  .auth-screen { padding: 0; min-height: 100vh; }
  .auth-card { max-width: 400px; padding: 32px; margin-top: 32px; }
  .auth-h { font-size: 26px; }
  .auth-sub { font-size: 14px; }
  .auth-logo-lg { width: 80px; height: 80px; border-radius: 24px; }
  .auth-logo-lg svg, .auth-logo-lg img { width: 44px; height: 44px; }
}

/* ============ 23. 交互界面升级（卡片/列表/空态/弹窗/FAB） ============
   在已有 Quiet Precision 基础上做细节打磨：
   · Hero 卡片信息层级更明确
   · KPI/工具卡片按压反馈一致
   · 空状态留白与按钮节奏更好
   · 列表项行高与内边距统一
   · 弹窗/抽屉顶部手柄更清晰
   · Toast 与 FAB 视觉收敛 */

/* Hero 卡片：标题/日期/登录 CTA 层级 */
.hero .h-title { font-size: 20px; font-weight: 600; }
.hero .h-greet { font-size: 13px; font-weight: 500; opacity: .9; }
.hero .h-cell {
  padding: 10px 14px;
  min-height: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero .h-cell b { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.hero .h-cell span { font-size: 11.5px; opacity: .86; margin-top: 3px; }
.hero .h-cell.login-cell {
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .25);
}

/* 金额卡：统一字重与字号 */
.money-card .mc-big { font-size: 28px; font-weight: 700; }

/* KPI 卡片：按压反馈 */
.kpi-card, .money-card, .dash-box, .stat {
  transition: transform .12s, box-shadow .18s, border-color .16s;
}
.kpi-card:active, .money-card:active, .dash-box:active, .stat:active { transform: scale(.985); }
.kpi-card .kc-v { font-size: 24px; font-weight: 600; letter-spacing: -.4px; }

/* 业务运营 / 功能入口格：统一卡片化 + 按压反馈 */
.tool-cell, .hd-cell, .sc-item, .menu-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  transition: transform .12s, box-shadow .16s, border-color .16s;
}
.tool-cell:active, .hd-cell:active, .sc-item:active, .menu-card:active {
  transform: scale(.985);
  background: var(--bg-2);
}
.tool-cell .t-title, .hd-cell .h-title, .sc-item .sc-title { font-weight: 600; }
.tool-cell .t-sub, .hd-cell .h-sub, .sc-item .sc-sub { font-weight: 500; }

/* 空状态：更舒展 */
.empty-tip, .no-data, .placeholder {
  padding: 38px 20px;
}
.empty-tip svg, .no-data svg, .placeholder svg {
  width: 56px; height: 56px;
  margin-bottom: 14px;
}
.empty-tip .btn, .no-data .btn {
  margin-top: 18px;
}

/* 列表项：统一内边距与按压 */
.item-card {
  padding: 14px 14px 14px 16px;
  transition: transform .12s, box-shadow .16s, background-color .16s;
}
.item-card:active { transform: scale(.995); }
.item-card .li-title { font-size: 14.5px; font-weight: 500; }
.item-card .li-sub { line-height: 1.55; }

/* 弹窗/抽屉：手柄更明显，内容区呼吸感 */
.modal {
  padding: 10px 18px 22px;
}
.modal::before {
  width: 40px; height: 5px;
  background: var(--line-2);
  margin: 8px auto 10px;
}
.modal-hd {
  padding: 8px 0 16px;
}
.modal-hd h3 { font-size: 17px; font-weight: 600; }

/* Toast / 全局提示 */
.toast {
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  padding: 12px 16px;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }

/* FAB：更利落的圆角 */
.btn.fab {
  width: 54px; height: 54px;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(109, 74, 255, .28);
}
.btn.fab:active { transform: scale(.94); }

/* 顶部标题栏：统一高度与字号 */
.app-header {
  height: var(--header-h);
  padding: 0 14px;
  background: rgba(246, 247, 249, .82);
  border-bottom: 1px solid var(--line);
}
.app-header h1 { font-size: 16px; font-weight: 600; }
:root[data-theme="dark"] .app-header { background: rgba(20, 18, 28, .82); }

/* 标签 chip：业务页统一 */
.chip { font-weight: 500; }
.chip.active { font-weight: 600; }

/* 按钮统一：去除旧渐变残留 */
.btn.auth-btn, .btn.fab {
  background: var(--primary);
}

/* 深色模式交互补充 */
:root[data-theme="dark"] .tool-cell,
:root[data-theme="dark"] .hd-cell,
:root[data-theme="dark"] .sc-item,
:root[data-theme="dark"] .menu-card {
  background: var(--card);
  border-color: var(--card-line);
}
:root[data-theme="dark"] .tool-cell:active,
:root[data-theme="dark"] .hd-cell:active,
:root[data-theme="dark"] .sc-item:active,
:root[data-theme="dark"] .menu-card:active { background: var(--bg-2); }
:root[data-theme="dark"] .hero .h-cell.login-cell {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .18);
}
:root[data-theme="dark"] .toast { background: var(--card); border-color: var(--card-line); }

/* 小屏紧凑：保持可点区域 */
@media (max-width: 360px) {
  .auth-card { padding: 20px; }
  .auth-ico-field { height: 48px; padding: 0 12px; }
  .tool-cell, .hd-cell, .sc-item { padding: 12px; }
}

/* ============================================================
 * 24. 桌面端菜单栏改到顶部
 * ============================================================ */

@media (min-width: 768px) {
  /* 桌面布局：从"左侧边栏"改为"顶部导航 + 内容区" */
  #app {
    flex-direction: column;
  }

  /* 顶部导航容器：替代左侧 side-nav */
  .side-nav {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    flex: 0 0 auto;
    height: var(--header-h);
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 14px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow: visible;
    z-index: 25;
  }

  /* 品牌区：左侧固定 */
  .side-nav .sn-brand {
    flex: 0 0 auto;
    padding: 0 16px 0 0;
    margin-right: 4px;
    border-right: 1px solid var(--line);
  }
  .side-nav .sn-brand b { font-size: 15px; font-weight: 600; }

  /* 分组：横向排列，每一项是一级菜单 */
  .side-nav .sn-group {
    position: relative;
    margin: 0;
  }
  .side-nav .sn-gt {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-2);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .side-nav .sn-gt:hover {
    background: var(--bg-2);
    color: var(--text);
  }

  /* 下拉面板：悬停/聚焦时显示具体页面 */
  .side-nav .sn-group .sn-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 180px;
    max-width: 260px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 30;
  }
  .side-nav .sn-group:hover .sn-panel,
  .side-nav .sn-group:focus-within .sn-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* 下拉项按钮 */
  .side-nav .sn-panel button {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    text-align: left;
    background: transparent;
    transition: background .12s, color .12s;
  }
  .side-nav .sn-panel button:hover { background: var(--bg-2); color: var(--text); }
  .side-nav .sn-panel button.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }

  /* 隐藏侧边栏原分组标题与竖向按钮（会被 sn-panel 替代） */
  .side-nav .sn-group > button { display: none; }

  /* 版本号：放在最右侧 */
  .side-nav .sn-ver {
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    font-size: 11px;
    color: var(--text-4);
  }

  /* 桌面端只保留顶部导航一条标题栏：页面标题栏（.app-header）不再重复显示，
     当前页面由顶部导航高亮与内容区卡片标题体现；移动端（<768px）不受影响 */
  .app-header { display: none; }

  /* 内容区：顶部导航已占用一行，内容紧跟其后 */
  .app-view {
    padding: 14px 28px 32px;
    max-width: none;
  }

  /* 深色模式适配 */
  :root[data-theme="dark"] .side-nav {
    background: rgba(20, 18, 28, .92);
    border-bottom-color: var(--line);
  }
  :root[data-theme="dark"] .side-nav .sn-panel { background: var(--card); border-color: var(--line); }
}

/* ============ 25. 电脑版外壳：左侧栏 → 顶部导航（desktop.html） ============ */
/* 与第 16/24 节（.side-nav 体系）同一设计语言，但作用于 #ds-side，仅电脑版外壳生效 */
html[data-mode="desktop"] #app { flex-direction: column; }

/* 顶部导航容器：替代左侧 #ds-side */
html[data-mode="desktop"] #ds-side {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  height: var(--header-h);
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  border-right: none;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 246, 251, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  /* 必须 visible：一旦出现非 visible 的 overflow，另一轴会被强制为 auto，
     56px 高的导航条会把向下伸出的下拉面板裁掉 */
  overflow: visible;
  z-index: 25;
}

/* 顶栏内容行：品牌 + 分组 */
html[data-mode="desktop"] #ds-side .ds-nav-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* 品牌区：左侧固定，右侧分隔线 */
html[data-mode="desktop"] #ds-side .ds-brand {
  flex: 0 0 auto;
  padding: 0 16px 0 0;
  margin-right: 4px;
  border-right: 1px solid var(--line);
}

/* 分组：横向排列，每一项是一级菜单 */
html[data-mode="desktop"] #ds-side .ds-nav-group {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
}
html[data-mode="desktop"] #ds-side .ds-gt {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
html[data-mode="desktop"] #ds-side .ds-gt:hover { background: var(--bg-2); color: var(--text); }
html[data-mode="desktop"] #ds-side .ds-caret { font-size: 9px; opacity: .6; margin-left: 1px; }

/* 下拉面板：悬停/聚焦时显示具体页面 */
html[data-mode="desktop"] #ds-side .ds-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  max-width: 260px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 30;
}
html[data-mode="desktop"] #ds-side .ds-nav-group:hover .ds-panel,
html[data-mode="desktop"] #ds-side .ds-nav-group:focus-within .ds-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 下拉项（复用 .ds-nav-item 基础排版） */
html[data-mode="desktop"] #ds-side .ds-panel .ds-nav-item {
  width: 100%;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  transition: background .12s, color .12s;
}
html[data-mode="desktop"] #ds-side .ds-panel .ds-nav-item:hover { background: var(--bg-2); color: var(--text); }
html[data-mode="desktop"] #ds-side .ds-panel .ds-nav-item.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }

/* 隐藏原左侧栏脚注（已被顶部版本号替代） */
html[data-mode="desktop"] #ds-side .ds-nav-foot { display: none; }
/* 防止遗留 .collapsed 折叠态影响顶部导航 */
html[data-mode="desktop"] #ds-side.collapsed { width: 100%; flex-basis: auto; }

/* 版本号：放在最右侧 */
html[data-mode="desktop"] #ds-side .ds-ver {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 0 0 12px;
  font-size: 11px;
  color: var(--text-4);
  white-space: nowrap;
}

/* 子页面标题栏（#ds-topbar）保持全宽，位于顶部导航下方 */
html[data-mode="desktop"] #ds-col { height: auto; flex: 1 1 auto; min-height: 0; }

/* 电脑版外壳同样只保留一条标题栏：面包屑重复显示页面名，隐藏之；
   顶栏保留全局搜索与手机版入口 */
html[data-mode="desktop"] #ds-topbar .ds-crumbs { display: none; }

/* 窄屏回落：保持横向顶部导航（可横向滚动），不再收成 64px 竖条 */
@media (max-width: 900px) {
  html[data-mode="desktop"] #ds-side { width: 100%; flex-basis: auto; }
  html[data-mode="desktop"] #ds-side .ds-brand-meta { display: none; }
  html[data-mode="desktop"] #ds-side .ds-nav-gt { display: flex; }
  html[data-mode="desktop"] #ds-side .ds-nav-t { display: block; }
}

/* 深色模式适配 */
:root[data-theme="dark"] html[data-mode="desktop"] #ds-side {
  background: rgba(20, 18, 28, .92);
  border-bottom-color: var(--line);
}
:root[data-theme="dark"] html[data-mode="desktop"] #ds-side .ds-panel {
  background: var(--card);
  border-color: var(--line);
}