/* ============================================================
   ops-platform 设计系统 v2 · 海军蓝 + 香槟金
   ① 设计令牌  ② 桌面布局（左侧栏）  ③ 组件库  ④ 移动端 App Shell
   ------------------------------------------------------------
   配色与 psi-system/theme.css 同源，两系统视觉统一。
   设计理念：
     - 海军蓝为主色（结构 / 导航 / 按钮 / 标题）→ 沉稳、专业、可信。
     - 香槟金为「光感点缀」：一律以**发散渐变 / 光晕 / 发丝线**的形式出现，
       不用大块金色铺底。光落在深色上显贵，色铺满屏显俗。
     - 香槟金可见面积约 12%（较原 8% 上调），但全部是「光」不是「色块」。
     - 语义色（成功/警告/危险/提示）独立于品牌，保证状态传达不被品牌色干扰。
   ============================================================ */

/* ---------- ① 设计令牌 ---------- */
:root{
  /* —— 品牌·海军蓝（与 psi-system/theme.css 完全同色，两系统视觉统一） —— */
  --ops-navy:#0F3460;              /* 深海蓝：侧栏 / 底部 Tab Bar / 深色底（=psi --brand） */
  --ops-navy-2:#16355A;            /* 次级深底 / hover */
  --ops-navy-line:#1D4670;         /* 深底上的分割线 */
  --ops-primary:#214B7C;           /* 主色：按钮 / 激活态（=psi --brand-2） */
  --ops-primary-d:#1A3E69;         /* 主色加深（hover） */
  --ops-brand-grad:linear-gradient(135deg,#0F3460 0%,#214B7C 100%);
  --ops-brand-soft:#EEF3F9;        /* 品牌极浅底：选中 / 高亮背景 */
  --ops-brand-line:#C9D6E8;        /* 品牌浅描边 */

  /* —— 香槟金·光感点缀 —— */
  --ops-gold:#D4AF67;              /* 主金：描边 / 金线 / 强调 */
  --ops-gold-2:#E8CE94;            /* 亮金：渐变高光端 */
  --ops-gold-deep:#B8860B;         /* 暗金：金额 / 重要数值 */
  --ops-gold-soft:#FBF6EA;         /* 金极浅底 */
  --ops-gold-line:rgba(212,175,103,.42);

  /* —— 香槟金·发散光晕（radial，核心手法）—— */
  /* 左上角光源：用于深色区（侧栏 / 抽屉头 / 登录页） */
  --ops-glow-tl:radial-gradient(circle at 14% 0%,rgba(232,206,148,.30) 0%,rgba(212,175,103,.12) 32%,rgba(212,175,103,0) 64%);
  /* 右下角回光：与 tl 叠加形成「斜向对穿」的立体感 */
  --ops-glow-br:radial-gradient(circle at 96% 100%,rgba(212,175,103,.22) 0%,rgba(212,175,103,0) 58%);
  /* 发丝光线：横向，两端淡出 → 用于底栏顶边 / 卡片顶边 / 分隔 */
  --ops-glow-line:linear-gradient(90deg,rgba(212,175,103,0) 0%,rgba(232,206,148,.85) 50%,rgba(212,175,103,0) 100%);
  /* 金色竖条：卡片左缘 / 标题左缘 */
  --ops-glow-bar:linear-gradient(180deg,rgba(212,175,103,0) 0%,rgba(232,206,148,.95) 45%,rgba(212,175,103,.15) 100%);

  /* —— 中性灰阶 —— */
  --ops-ink:#16202B;               /* 主文字 */
  --ops-ink-2:#5B6B73;             /* 次级文字 */
  --ops-ink-3:#8B98A0;             /* 辅助 / 占位 */
  --ops-line:#DFE6EC;              /* 边框 */
  --ops-line-2:#EAEFF4;            /* 浅边框 / 浅底 */
  --ops-bg:#F5F7FA;                /* 页面背景 */
  --ops-surface:#FFFFFF;           /* 卡片 */

  /* —— 语义状态（独立于品牌） —— */
  --ops-ok:#2E7D50;                /* 成功 */
  --ops-warn:#E68936;              /* 警告 / 逾期 */
  --ops-danger:#D14343;            /* 危险 / 失败 */

  /* —— 形状与阴影 —— */
  --ops-r-sm:8px;
  --ops-r:12px;
  --ops-r-lg:16px;
  --ops-sh-1:0 1px 3px rgba(15,52,96,.07);
  --ops-sh-2:0 8px 24px rgba(15,52,96,.12);
  --ops-tabbar-h:58px;
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--ops-bg); color:var(--ops-ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* ---------- ② 桌面布局 ---------- */
.layout { display:flex; min-height:100vh; }

/* 侧栏：深海蓝底 + 左上角香槟金发散光（品牌区） */
#nav {
  width:210px; flex:0 0 210px; padding:16px 0;
  background:var(--ops-navy);
  background-image:var(--ops-glow-tl);
  background-repeat:no-repeat;
  color:#C6D6E6;
}
#nav .brand {
  margin-bottom:10px; padding:0 20px 14px;
  font-size:16px; font-weight:700; color:#fff;
  border-bottom:1px solid var(--ops-navy-line);
}
/* 品牌点：香槟金实心 + 金色光晕 */
#nav .brand::before {
  content:""; display:inline-block; width:8px; height:8px; margin-right:8px;
  border-radius:50%; background:var(--ops-gold);
  box-shadow:0 0 0 3px rgba(212,175,103,.18), 0 0 10px rgba(232,206,148,.55);
  vertical-align:middle;
}
#nav .nav-title {
  padding:12px 20px 4px; font-size:11px; letter-spacing:.6px;
  color:var(--ops-gold); text-transform:uppercase; opacity:.78;
}
#nav a {
  position:relative; display:flex; align-items:center; gap:10px;
  padding:10px 20px; color:#BFD3E6; font-size:14px; text-decoration:none;
}
#nav a:hover { background:var(--ops-navy-2); color:#fff; }
#nav a.active { background:var(--ops-primary); color:#fff; }
/* 激活项左缘金色发丝条 */
#nav a.active::before {
  content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px;
  border-radius:0 3px 3px 0; background:var(--ops-gold-2);
  box-shadow:0 0 8px rgba(232,206,148,.75);
}
#nav a.logout { margin-top:14px; padding-top:14px; color:#F3B0A3; border-top:1px solid var(--ops-navy-line); }
.ni { font-size:16px; }
#nav a.active .ni { filter:drop-shadow(0 0 6px rgba(232,206,148,.5)); }

.main { flex:1; min-width:0; padding:24px 28px; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.topbar h1 { margin:0; font-size:20px; color:var(--ops-navy); }
.topbar .sub { color:var(--ops-ink-2); font-size:13px; }

/* ---------- ③ 组件库 ---------- */
.btn {
  padding:8px 16px; border:none; border-radius:7px;
  background:var(--ops-primary); color:#fff; font-size:13px;
  font-family:inherit; cursor:pointer; transition:background .15s ease, box-shadow .15s ease;
}
.btn:hover { background:var(--ops-primary-d); box-shadow:0 4px 12px rgba(33,75,124,.24); }
.btn.ghost { background:var(--ops-line-2); color:var(--ops-ink); }
.btn.ghost:hover { background:#DEE6EC; box-shadow:none; }
.btn.danger { background:#D9534B; }
.btn.danger:hover { background:#C63A22; }
.btn.sm { padding:5px 10px; font-size:12px; border-radius:6px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* 统计卡：顶部一道香槟金发散发丝线 + 左缘金竖条 = 金色「光」而非「块」 */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:22px; }
.card {
  position:relative; overflow:hidden;
  padding:16px 18px; background:var(--ops-surface);
  border-radius:var(--ops-r); box-shadow:var(--ops-sh-1);
}
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--ops-glow-line); opacity:.75;
}
.card::after {
  content:""; position:absolute; top:10px; bottom:10px; left:0; width:2px;
  border-radius:0 2px 2px 0; background:var(--ops-glow-bar);
}
.card .k { color:var(--ops-ink-2); font-size:13px; }
.card .v { margin-top:6px; font-size:26px; font-weight:700; color:var(--ops-navy); overflow-wrap:anywhere; }
.card .v small { font-size:13px; font-weight:400; color:var(--ops-ink-2); }
.card .ct {
  margin:0 0 10px; padding-bottom:8px; font-size:14px; font-weight:700;
  border-bottom:1px solid var(--ops-line-2);
}
.card .cb .btn { width:100%; margin-top:10px; }

.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.grid3 > .card { margin:0; }

.section {
  position:relative; margin-bottom:18px; padding:18px;
  background:var(--ops-surface); border-radius:var(--ops-r); box-shadow:var(--ops-sh-1);
}
/* 区块标题左缘香槟金竖条 */
.section h2 {
  position:relative; margin:0 0 14px; padding-left:11px; font-size:15px; color:var(--ops-navy);
}
.section h2::before {
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px;
  border-radius:2px; background:var(--ops-gold); box-shadow:0 0 6px rgba(212,175,103,.45);
}
.section h3 { margin:14px 0 8px; font-size:14px; color:var(--ops-navy); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:9px 10px; text-align:left; border-bottom:1px solid var(--ops-line-2); }
th { background:#F8FAFC; color:var(--ops-ink-2); font-weight:600; }
tr:hover td { background:#FAFCFE; }

.tag { display:inline-block; padding:2px 8px; border-radius:10px; background:var(--ops-line-2); color:#45525E; font-size:12px; white-space:nowrap; }
.tag.green  { background:#E3F6EF; color:#0A8F6E; }
.tag.orange { background:#FDEEDE; color:#C2691A; }
.tag.red    { background:#FDE6E1; color:#C63A22; }
.tag.gold   { background:var(--ops-gold-soft); color:var(--ops-gold-deep); border:1px solid var(--ops-gold-line); }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; padding:5px 12px;
  border:1px solid transparent; border-radius:999px;
  background:var(--ops-line-2); color:#45525E; font-size:12px;
  cursor:pointer; user-select:none; transition:all .15s ease;
}
.chip:hover { background:#E0E8EE; }
.chip.on {
  background:var(--ops-brand-soft); color:var(--ops-primary);
  border-color:var(--ops-gold-line); font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(212,175,103,.25);
}

.lab { margin-bottom:8px; color:var(--ops-ink-2); font-size:13px; font-weight:600; }
.hint, .muted { color:var(--ops-ink-3); font-size:12px; }
.err { margin-top:6px; color:#D9534B; font-size:12px; white-space:pre-wrap; }
.up { margin-top:12px; padding:12px; background:#F7F9FB; border:1px dashed #CFD8DD; border-radius:var(--ops-r-sm); }
.brand { font-weight:700; }
.empty { padding:26px; color:#9AA6B0; font-size:13px; text-align:center; }
/* 状态徽章：factory.html 一直在用 `class="st st_<status>"`，但这里从来没定义过
   → 代码以为在渲染徽章，实际只是裸文本。补上，顺手把「已采纳/不采纳」也纳入。 */
.st { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; line-height:18px;
      white-space:nowrap; background:#EEF2F5; color:#5A6771; border:1px solid transparent; }
.st_pending, .st_image_pending, .st_video_pending { background:#FFF6E5; color:#A8752A; }
.st_producing { background:#E8F1FA; color:#21557F; }
.st_ready { background:#EAF4EC; color:#2F7A46; }
.st_done { background:#E7F4EC; color:#2C7A48; border-color:#CBE6D6; }
.st_failed, .st_rejected { background:#FDECEA; color:#B4443B; }
.st_adopted { background:#E7F4EC; color:#2C7A48; border-color:#CBE6D6; }
.st_retired { background:#F1F2F4; color:#8A939B; }

input, select, textarea {
  width:100%; padding:8px 10px; border:1px solid #D7DEE2; border-radius:7px;
  font-size:13px; font-family:inherit; background:#fff;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--ops-primary); box-shadow:0 0 0 3px rgba(33,75,124,.10);
}
label { display:block; margin:10px 0 4px; color:var(--ops-ink-2); font-size:12px; }
.row { display:flex; flex-wrap:wrap; gap:10px; }
.row > div { flex:1; min-width:140px; }
.filter { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.filter input { max-width:240px; }

#modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
#modal .mask { position:absolute; inset:0; background:rgba(15,52,96,.45); }
#modal .box { position:relative; width:460px; max-width:92vw; max-height:88vh; overflow:auto; padding:22px; background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
#modal .mtitle { margin-bottom:10px; font-size:16px; font-weight:700; color:var(--ops-navy); }
#modal .mfoot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; text-align:right; }

/* 登录页：海军蓝底 + 双香槟金发散光晕（对角光源） */
.login-wrap {
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px;
  background-color:var(--ops-navy);
  background-image:
    var(--ops-glow-tl),
    var(--ops-glow-br),
    var(--ops-brand-grad);
  background-repeat:no-repeat;
}
.login-card {
  position:relative; width:340px; padding:34px 30px; background:#fff;
  border-radius:var(--ops-r-lg); box-shadow:0 18px 50px rgba(15,52,96,.35);
  overflow:hidden;
}
/* 顶边香槟金发散发丝光（用伪元素，避免 border-image 吃掉圆角） */
.login-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ops-glow-line);
}
.login-card h1 { margin:0 0 4px; font-size:20px; color:var(--ops-navy); }
.login-card .tip { margin-bottom:18px; color:var(--ops-ink-2); font-size:13px; }
.login-card .btn { width:100%; padding:11px; font-size:15px; }

/* 移动端专用元素：桌面隐藏 */
.ab-menu, .drawer, .seg { display:none; }

/* ============================================================
   ④ 移动端 App Shell（≤768px）
   ============================================================ */
@media (max-width: 768px) {
  .layout { display:block; min-height:auto; }

  /* --- 侧栏 → 底部 Tab Bar（顶边一道香槟金发丝光） --- */
  #nav.tabbar {
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:stretch; gap:2px; width:100%;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background-color:var(--ops-navy);
    background-image:var(--ops-glow-tl);
    background-repeat:no-repeat;
    border-top:1px solid var(--ops-navy-line);
    box-shadow:0 -2px 14px rgba(15,52,96,.28);
  }
  /* 顶边金线：从中间亮、两端淡出 */
  #nav.tabbar::before {
    content:""; position:absolute; top:-1px; left:0; right:0; height:1.5px;
    background:var(--ops-glow-line);
  }
  #nav.tabbar .brand, #nav.tabbar .nav-title, #nav.tabbar a.logout { display:none; }
  #nav.tabbar a.tab {
    position:relative; display:flex; flex:1 1 0; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; min-width:0;
    padding:6px 2px; border-radius:10px; color:#93AEC9; text-decoration:none;
  }
  #nav.tabbar a.tab .ti { font-size:19px; line-height:1; }
  #nav.tabbar a.tab .tl { font-size:11px; line-height:1.2; }
  /* 选中态：金色光，而非整块色 */
  #nav.tabbar a.tab.active {
    background:rgba(212,175,103,.13); color:var(--ops-gold-2);
  }
  #nav.tabbar a.tab.active .ti { filter:drop-shadow(0 0 7px rgba(232,206,148,.65)); }
  #nav.tabbar a.tab.active::after {
    content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    width:24px; height:2px; border-radius:2px; background:var(--ops-gold-2);
    box-shadow:0 0 8px rgba(232,206,148,.8);
  }

  /* --- 主内容区 --- */
  .main { padding:12px 12px calc(14px + var(--ops-tabbar-h) + env(safe-area-inset-bottom)); }

  /* --- App Bar --- */
  .main > .topbar {
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; gap:10px;
    margin:-12px -12px 12px; padding:10px 12px;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--ops-line);
  }
  /* App Bar 底边金色发丝光 */
  .main > .topbar::after {
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
    background:var(--ops-glow-line); opacity:.6;
  }
  .main > .topbar > div { flex:1 1 auto; min-width:0; }
  .main > .topbar h1 { font-size:17px; line-height:1.3; }
  .main > .topbar .sub { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; font-size:11.5px; line-height:1.45; }
  .main > .topbar > .btn { flex:0 0 auto; padding:9px 13px; font-size:13px; }

  .ab-menu { display:inline-flex; flex:0 0 38px; flex-direction:column; justify-content:center; gap:4px; width:38px; height:38px; padding:0 9px; background:var(--ops-brand-soft); border:none; border-radius:10px; cursor:pointer; }
  .ab-menu span { display:block; height:2px; border-radius:2px; background:var(--ops-primary); }
  .ab-menu:active { background:#E2E8EA; }

  /* --- 域内分段控件 --- */
  .seg { display:flex; gap:4px; margin:0 0 12px; padding:4px; background:#E8EEF4; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .seg::-webkit-scrollbar { display:none; }
  .seg a { flex:1 0 auto; min-width:74px; padding:8px 10px; border-radius:9px; color:#4A5B63; font-size:13px; text-align:center; text-decoration:none; white-space:nowrap; }
  /* 分段选中：白底 + 底部金线 */
  .seg a.on {
    position:relative; background:#fff; color:var(--ops-navy); font-weight:600;
    box-shadow:0 1px 3px rgba(15,52,96,.12);
  }
  .seg a.on::after {
    content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:3px;
    width:20px; height:2px; border-radius:2px; background:var(--ops-gold);
  }

  /* --- 区块与表单 --- */
  /* 看板统计卡：手机端一行两个，压缩纵向长度（长数字靠 overflow-wrap 折行防溢出） */
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
  .card { padding:12px 13px; }
  .card .k { font-size:12px; line-height:1.35; }
  .card .v { font-size:19px; margin-top:5px; line-height:1.25; }
  .card .v small { font-size:11px; }
  .grid3 { grid-template-columns:1fr; }
  .section { margin-bottom:14px; padding:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .section h2 { font-size:15px; }
  .section table { min-width:520px; }
  .section::-webkit-scrollbar { height:6px; }
  .section::-webkit-scrollbar-thumb { background:var(--ops-gold-line); border-radius:3px; }

  #planDist, #contentOv { display:flex; flex-wrap:wrap; gap:10px; }
  #planDist .card, #contentOv .card { flex:1 1 calc(50% - 5px) !important; min-width:120px !important; max-width:none !important; }

  input, select, textarea { padding:11px 12px; font-size:16px; }
  .btn { padding:10px 14px; font-size:14px; }
  .filter { flex-wrap:wrap; }
  .filter input { max-width:100%; }
  .row { gap:10px; }
  .row > div { flex-basis:100%; min-width:0; }
  .tag { padding:3px 9px; }
  .chips { gap:6px; }
  .chip { padding:7px 13px; font-size:13px; }

  /* --- 卡片列表（由 ops.js 生成） --- */
  .mlist { display:flex; flex-direction:column; gap:10px; }
  .mcard {
    position:relative; overflow:hidden;
    padding:13px 14px; background:#fff;
    border:1px solid var(--ops-line); border-radius:14px;
    box-shadow:0 1px 3px rgba(15,52,96,.06);
  }
  .mcard::before {
    content:""; position:absolute; top:0; left:0; bottom:0; width:2px;
    background:var(--ops-glow-bar); opacity:.8;
  }
  .mc-top { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
  .mc-title { flex:1 1 auto; min-width:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--ops-navy); }
  .mc-badge { flex:0 0 auto; }
  .mc-body { display:flex; flex-direction:column; gap:6px; }
  .mc-row { display:flex; align-items:flex-start; gap:10px; font-size:13px; }
  .mc-k { flex:0 0 66px; color:var(--ops-ink-3); }
  .mc-v { flex:1 1 auto; min-width:0; color:#37474F; overflow-wrap:anywhere; }
  .mc-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--ops-line); }
  table.m-hidden { display:none; }

  /* --- 模态框 → 底部抽屉式 --- */
  #modal { align-items:flex-end; }
  #modal .box { position:relative; width:100%; max-width:100%; max-height:88vh; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; overflow:auto; animation:sheetIn .22s ease; }
  /* 抽屉顶边金线（伪元素，保圆角） */
  #modal .box::before {
    content:""; position:absolute; top:0; left:0; right:0; height:2.5px;
    background:var(--ops-glow-line); border-radius:18px 18px 0 0;
  }
  #modal .mfoot { position:sticky; bottom:0; padding-top:12px; background:#fff; }
  #modal .mfoot .btn { flex:1; padding:12px; font-size:15px; }
  @keyframes sheetIn { from { transform:translateY(14px); opacity:.6 } to { transform:none; opacity:1 } }

  /* --- toast 避让底部 Tab --- */
  #toast { top:auto !important; bottom:calc(var(--ops-tabbar-h) + 18px + env(safe-area-inset-bottom)) !important; }

  /* --- 侧滑抽屉 --- */
  .drawer.show { display:block; }
  .drawer-mask { position:fixed; inset:0; z-index:70; background:rgba(15,52,96,.5); }
  .drawer-panel { position:fixed; top:0; bottom:0; left:0; z-index:71; display:flex; flex-direction:column; width:78vw; max-width:320px; padding-top:env(safe-area-inset-top); background:#fff; box-shadow:4px 0 24px rgba(0,0,0,.28); animation:drawerIn .22s ease; }
  @keyframes drawerIn { from { transform:translateX(-100%) } to { transform:none } }
  /* 抽屉头：海军蓝 + 香槟金发散光晕 */
  .drawer-head {
    position:relative; overflow:hidden;
    padding:18px 18px 14px; color:#fff;
    background-color:var(--ops-navy);
    background-image:var(--ops-glow-tl);
    background-repeat:no-repeat;
  }
  .drawer-head::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:var(--ops-glow-line);
  }
  .dh-t { font-size:17px; font-weight:700; }
  .dh-s { margin-top:3px; color:var(--ops-gold-2); font-size:11.5px; opacity:.85; }
  .drawer-body { flex:1; overflow:auto; padding:8px 0 12px; }
  .dg { margin-bottom:6px; }
  .dg-t { padding:12px 18px 4px; color:var(--ops-gold-deep); font-size:11px; letter-spacing:.5px; opacity:.75; }
  .drawer-body a { display:flex; align-items:center; gap:10px; padding:12px 18px; color:var(--ops-ink); font-size:14.5px; text-decoration:none; }
  /* 抽屉选中：品牌浅底 + 左缘金竖条 */
  .drawer-body a.on { position:relative; background:var(--ops-brand-soft); color:var(--ops-primary); font-weight:600; }
  .drawer-body a.on::before {
    content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
    border-radius:0 3px 3px 0; background:var(--ops-gold);
  }
  .drawer-body a .dgi { width:20px; text-align:center; }
  .drawer-foot { padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--ops-line); }
  .dg-out { display:block; padding:12px; border-radius:10px; background:#FDEEEC; color:#C63A22; font-size:14px; font-weight:600; text-align:center; text-decoration:none; }
  body.drawer-open { overflow:hidden; }

  /* --- 登录页 --- */
  .login-card { width:100%; max-width:380px; padding:26px 22px; }
  .login-card h1 { font-size:19px; }
}

@media (max-width: 380px) {
  #nav.tabbar a.tab .tl { font-size:10.5px; }
  .card { padding:11px 12px; }
  .card .k { font-size:11.5px; }
  .card .v { font-size:17px; }
  .mc-k { flex-basis:58px; }
}