/* ============================================================
   锦融含章 ERP · UI v2 —— 移植「审批中心 · 墨青纸感」设计系统
   同源纪律: 品牌面=墨青海军(hero/登录), 操作面=品牌蓝;
   暖纸灰中性 9 阶 / 8pt 网格 / 字阶12-24 / 圆角10·14·20 /
   阴影三级 / 触控≥44px / tabular-nums / :focus-visible 焦点环
   分层: 1 tokens → 2 base → 3 chrome → 4 通用组件 → 5 页面 → 6 桌面
   ============================================================ */

/* ========== 1. DESIGN TOKENS ========== */
:root {
  --app-max: 720px;
  /* 品牌蓝 #2B6FFF 全阶 */
  --p50:#eef4ff; --p100:#d9e6ff; --p200:#b8d0ff; --p300:#8db1ff;
  --p400:#5c92ff; --p500:#2b6fff; --p600:#1f57d6; --p700:#17419f;
  --brand: var(--p600); --brand-strong: var(--p700);
  /* 墨青海军(品牌面) */
  --ink-950:#0a1c3d; --ink-900:#0d2348; --ink-800:#123063; --ink-700:#1a3f7e;
  --ink-glow: rgba(84,128,220,.38);
  /* 语义色 */
  --ok100:#dcfce9; --ok600:#16a34a; --ok700:#15803d;
  --warn100:#fef3c7; --warn600:#d97706; --warn700:#b45309;
  --dgr100:#fee2e2; --dgr600:#dc2626; --dgr700:#b91c1c;
  --info100:#e0f2fe; --info600:#0284c7;
  /* 暖纸灰 9 阶 */
  --n0:#ffffff; --n1:#fafaf7; --n2:#f3f3ee; --n3:#e6e5df;
  --n4:#cbc9c0; --n5:#96948a; --n6:#6b6960; --n7:#3a3933; --n8:#1c1b17;
  /* 8pt 间距 / 字阶 / 圆角 / 阴影 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px;
  --f12:12px; --f13:13px; --f15:15px; --f17:17px; --f20:20px; --f24:24px;
  --r-ctl:10px; --r-card:14px; --r-pop:20px; --r-xs:6px; --r-sm:8px; --r-pill:999px;
  --e1:0 1px 2px rgba(28,27,23,.05);
  --e2:0 1px 3px rgba(28,27,23,.07);
  --e3:0 2px 8px rgba(28,27,23,.12);
  --t-fast:.15s ease; --t-mid:.25s ease;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-btm:env(safe-area-inset-bottom,0px);
  --tabbar-h:56px;
  --bg:var(--n2); --card:var(--n0);
  --text:var(--n8); --text-2:var(--n7);
  --muted:var(--n6); --faint:var(--n5);
  --line:var(--n3); --line-strong:var(--n4);
}

/* ========== 2. BASE ========== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(110% 55% at 50% -8%, rgba(43,111,255,.15), transparent 55%),
    radial-gradient(60% 45% at 8% 0%, rgba(13,148,136,.07), transparent 60%),
    radial-gradient(70% 50% at 92% 100%, rgba(184,152,96,.05), transparent 60%),
    var(--bg);
  background-attachment:fixed,fixed,fixed,auto;
  color:var(--text); font-size:var(--f15); line-height:1.55;
  font-variant-numeric:tabular-nums;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-btm));
  overscroll-behavior-y:none; overflow-x:clip;
}
#app{max-width:var(--app-max);margin:0 auto;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--p500);outline-offset:2px;border-radius:4px}

/* ========== 3. CHROME: 顶栏(毛玻璃) ========== */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:var(--s3);
  padding:calc(var(--s2) + var(--safe-top)) var(--s4) var(--s2);
  background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  backdrop-filter:blur(18px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(43,111,255,.04);
}
.topbar .title{font-size:var(--f17);font-weight:600;flex:1;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.avatar-mini{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;cursor:pointer;
  background:var(--p600);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:var(--f13);font-weight:600;box-shadow:var(--e1);
}

/* ========== 3. CHROME: 底部导航(活动药丸) ========== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;max-width:var(--app-max);margin:0 auto;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  backdrop-filter:blur(18px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.5);
  padding-bottom:var(--safe-btm);
}
.tabbar a{
  flex:1;min-height:var(--tabbar-h);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  color:var(--n5);font-size:var(--f12);position:relative;transition:color var(--t-fast);
}
.tabbar a .ico{display:flex;transition:all var(--t-fast);border-radius:var(--r-sm);padding:2px 10px;font-size:var(--f15)}
.tabbar a.active{color:var(--brand);font-weight:600}
.tabbar a.active .ico{background:var(--p50)}
.tabbar a .dot{
  position:absolute;top:calc(var(--s1) + 2px);left:calc(50% + 8px);
  min-width:16px;height:16px;padding:0 4px;
  background:var(--dgr700);border-radius:var(--r-pill);
  color:#fff;font-size:var(--f12);line-height:16px;font-weight:600;
  box-shadow:0 0 0 2px #fff;font-variant-numeric:tabular-nums;
}

/* ========== 4. 布局/卡片 ========== */
.page{padding:var(--s4) var(--s4) var(--s6)}
.card{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-card);
  padding:var(--s4);margin-bottom:var(--s3);box-shadow:var(--e1);
}
.card h3{margin:0 0 var(--s3);font-size:var(--f15);font-weight:600;display:flex;align-items:center;gap:var(--s2)}
.section-title{
  font-size:var(--f13);color:var(--muted);font-weight:600;
  margin:var(--s5) var(--s1) var(--s2);display:flex;align-items:center;gap:var(--s2);
}
.section-title::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--brand);display:inline-block}

/* ========== 4. 按钮 ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:44px;border:none;border-radius:var(--r-ctl);
  padding:0 var(--s5);font-size:var(--f15);font-weight:600;
  background:var(--brand);color:#fff;cursor:pointer;
  box-shadow:0 1px 3px rgba(31,87,214,.3);
  transition:transform var(--t-fast),box-shadow var(--t-fast),opacity var(--t-fast),background var(--t-fast);
}
.btn:active{transform:scale(.97);background:var(--brand-strong)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--n0);color:var(--brand);border:1px solid var(--p200);box-shadow:var(--e1)}
.btn.ghost:active{background:var(--p50)}
.btn.danger{background:var(--dgr600);box-shadow:0 2px 8px rgba(220,38,38,.24)}
.btn.ok{background:var(--ok700)}
.btn.plain{background:var(--n2);color:var(--text-2);box-shadow:none}
.btn.sm{min-height:44px;padding:0 var(--s4);font-size:var(--f13);border-radius:var(--r-sm);box-shadow:none}
.btn[disabled]{opacity:.55;pointer-events:none}
.btnrow{display:flex;gap:var(--s2);flex-wrap:wrap}
.btnrow .btn{flex:1;min-width:100px}

/* ========== 4. 状态 chips(圆点+文字) ========== */
.st-chip{
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  font-size:var(--f12);font-weight:600;line-height:1;
  padding:5px 10px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums;
}
.st-chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.st-draft{background:var(--n2);color:var(--n6)}
.st-submitted{background:var(--p50);color:var(--p600)}
.st-approved,.st-paid,.st-closed,.st-posted{background:var(--ok100);color:var(--ok700)}
.st-rejected,.st-voided{background:var(--dgr100);color:var(--dgr700)}
.chip{display:inline-flex;align-items:center;gap:var(--s1);white-space:nowrap;
  background:var(--n2);color:var(--text-2);border-radius:var(--r-xs);
  padding:3px 8px;font-size:var(--f12);margin:0 var(--s1) var(--s1) 0;font-weight:500}
.chip.p{background:var(--p50);color:var(--p600)}
.chip.ok{background:var(--ok100);color:var(--ok700)}
.chip.dgr{background:var(--dgr100);color:var(--dgr700)}

/* ========== 4. 表单 ========== */
.field{margin-bottom:var(--s4)}
.field label{display:flex;align-items:center;gap:5px;font-size:var(--f13);color:var(--text-2);font-weight:600;margin-bottom:var(--s2)}
.field label .req{color:var(--dgr600);margin-left:2px;font-weight:700}
.field input,.field select,.field textarea{
  width:100%;min-height:40px;border:1.5px solid var(--line);
  border-radius:var(--r-ctl);padding:var(--s2) var(--s3);
  font-size:16px;background:var(--n1);color:var(--text);font-family:inherit;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand);background:var(--card);
  box-shadow:0 0 0 3px rgba(43,111,255,.14);
}
.field .hint{font-size:var(--f12);color:var(--faint);margin-top:var(--s1)}
.row2{display:flex;gap:var(--s2);flex-wrap:wrap}
.row2 .field{flex:1 1 150px;min-width:0}

/* ========== 4. 分段 tab ========== */
.seg{display:flex;background:var(--n2);border-radius:var(--r-ctl);padding:3px;margin-bottom:var(--s3);gap:2px}
.seg button{flex:1;min-height:44px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);font-size:var(--f13);font-weight:500;
  cursor:pointer;font-family:inherit;transition:all var(--t-fast);white-space:nowrap;padding:0 var(--s2)}
.seg button.active{background:var(--card);color:var(--brand);font-weight:600;box-shadow:var(--e1)}

/* ========== 4. 列表行 ========== */
.lrow{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s2);border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--t-fast);
}
.lrow:active{background:var(--n2)}
.lrow + .lrow{border-top:1px solid var(--n2)}
.lrow .l-main{flex:1;min-width:0}
.lrow .l-t{font-size:var(--f15);font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .l-s{font-size:var(--f12);color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .l-r{text-align:right;flex-shrink:0}
.lrow .l-amt{font-size:var(--f15);font-weight:700;font-variant-numeric:tabular-nums}

/* ========== 4. 统计卡(驾驶舱) ========== */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.stat{
  background:var(--card);border-radius:var(--r-card);padding:var(--s4);
  box-shadow:var(--e1);
}
.stat .n{font-size:var(--f24);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.stat .t{font-size:var(--f12);color:var(--muted);margin-top:2px}
.stat.warn .n{color:var(--warn700)}
.stat.bad .n{color:var(--dgr700)}
.stat.brand .n{color:var(--brand)}

/* ========== 4. 表格(桌面兜底) ========== */
table{width:100%;border-collapse:collapse;font-size:var(--f13)}
th{color:var(--muted);font-weight:500;text-align:left;padding:var(--s2);border-bottom:1px solid var(--line)}
td{padding:10px var(--s2);border-bottom:1px solid var(--n2);font-variant-numeric:tabular-nums}

/* ========== 4. 空态 / toast / 弹层 ========== */
.empty{text-align:center;padding:var(--s12) var(--s6);color:var(--muted)}
.empty .e-t{font-size:var(--f15);font-weight:600;color:var(--text-2);margin-bottom:var(--s1)}
.toast-wrap{position:fixed;top:calc(var(--s8) + var(--safe-top));left:50%;transform:translateX(-50%);
  z-index:99;display:flex;flex-direction:column;gap:var(--s2);align-items:center;
  width:max-content;max-width:86vw;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:var(--s2);
  background:rgba(12,20,38,.62);color:#fff;
  padding:var(--s2) var(--s4);border-radius:var(--r-ctl);
  font-size:var(--f13);box-shadow:var(--e3);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  animation:toast-in .22s ease;max-width:86vw;
}
.toast.err{background:rgba(129,24,24,.68)}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.96)}}
.mask{position:fixed;inset:0;background:rgba(10,28,61,.32);
  -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
  z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s ease}
@keyframes fade-in{from{opacity:0}}
.sheet{
  position:relative;background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  width:100%;max-width:var(--app-max);
  border-radius:var(--r-pop) var(--r-pop) 0 0;
  padding:var(--s2) var(--s4) calc(var(--s4) + var(--safe-btm));
  max-height:82vh;overflow-y:auto;animation:sheet-up var(--t-mid) ease;
  box-shadow:var(--e3);border-top:1px solid rgba(255,255,255,.5);
}
@keyframes sheet-up{from{transform:translateY(40%);opacity:.6}}
.sheet .grabber{width:36px;height:4px;border-radius:2px;background:var(--n4);margin:var(--s1) auto var(--s3)}
.sheet h3{margin:0 0 var(--s3);font-size:var(--f17);font-weight:700;display:flex;align-items:center;gap:var(--s2)}

/* ========== 5. 登录(品牌时刻:墨青全幅) ========== */
.login-wrap{
  min-height:100vh;margin-bottom:calc((var(--tabbar-h) + var(--safe-btm)) * -1);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(84,128,220,.38), transparent 60%),
    repeating-radial-gradient(circle at 50% 115%, transparent 0 46px, rgba(255,255,255,.045) 46px 47px),
    linear-gradient(180deg, var(--ink-950), var(--ink-800) 78%, var(--ink-700));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s8) var(--s5);color:#dbe6ff;
}
.login-brand{text-align:center;margin-bottom:var(--s8)}
.login-brand .co{font-size:var(--f13);letter-spacing:.5em;color:#8fb0ee;margin-bottom:var(--s3)}
.login-brand .prod{font-size:var(--f24);font-weight:700;letter-spacing:.3em;color:#fff}
.login-brand .pos{font-size:var(--f12);color:#7f9bd6;margin-top:var(--s2);letter-spacing:.15em}
.login-card{
  width:100%;max-width:460px;background:rgba(255,255,255,.92);
  border-radius:var(--r-pop);padding:var(--s6);box-shadow:var(--e3);
}
.login-card .field label{color:var(--text-2)}
.login-foot{margin-top:var(--s6);font-size:var(--f12);color:#627aad;text-align:center}

/* ========== 5. 单据详情头卡(墨青 hero) ========== */
.doc-hero{
  background:
    radial-gradient(120% 70% at 85% -20%, rgba(84,128,220,.35), transparent 60%),
    linear-gradient(160deg, var(--ink-900), var(--ink-800));
  border-radius:var(--r-card);padding:var(--s5);color:#e8efff;margin-bottom:var(--s3);
}
.doc-hero .d-no{font-size:var(--f12);color:#9db8ea;letter-spacing:.06em}
.doc-hero .d-t{font-size:var(--f20);font-weight:700;margin:var(--s1) 0 var(--s2);line-height:1.35}
.doc-hero .d-meta{font-size:var(--f12);color:#9db8ea;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.doc-hero .d-amt{font-size:var(--f24);font-weight:700;margin-top:var(--s3);font-variant-numeric:tabular-nums}
.doc-hero .st-chip{position:absolute;right:var(--s5);top:var(--s5)}
.doc-hero{position:relative}
.doc-hero .acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.doc-hero .acts .btn{flex:1;min-width:110px}
.doc-hero .acts .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none}
.doc-hero .acts .btn.ghost:active{background:rgba(255,255,255,.24)}

/* 比价基准卡 */
.bl-flag{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  background:var(--dgr100);color:var(--dgr700);font-size:var(--f12);font-weight:600;
  padding:2px 8px;border-radius:var(--r-xs)}
.bl-ok{background:var(--ok100);color:var(--ok700)}

/* ========== 6. 桌面适配 ========== */
@media (min-width:768px){
  .login-wrap{border-radius:0}
  .page{padding:var(--s6) var(--s6) var(--s8)}
}

/* ========== 7. 页面骨架(自审批中心 v67 同源移植) ========== */
/* 仪表问候桥接头 */
.dash-greet{
  position:relative;overflow:hidden;background:var(--n0);color:var(--text);
  margin:calc(var(--s4) * -1) calc(var(--s4) * -1) 0;
  padding:calc(var(--s5)) var(--s4) var(--s4);
  border-radius:0 0 var(--r-pop) var(--r-pop);
  border-bottom:1px solid var(--n3);
}
.dash-greet .dg-row{display:flex;align-items:center;gap:var(--s3)}
.dash-greet .dg-ava{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--ink-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--f17);font-weight:700}
.dash-greet .dg-info{flex:1;min-width:0}
.dash-greet .hi{font-size:var(--f20);font-weight:800;margin:0 0 3px;letter-spacing:.4px}
.dash-greet .sub{font-size:var(--f13);color:var(--n6);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dash-greet .role-pill{display:inline-flex;align-items:center;font-size:var(--f12);font-weight:500;background:var(--n2);border:1px solid var(--n3);border-radius:var(--r-pill);padding:1px 8px;color:var(--n7)}
/* 统计条:3 列,首卡墨青升维 */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);position:relative;z-index:2;margin:var(--s3) var(--s1) var(--s4)}
.stat-card{background:var(--card);border-radius:var(--r-card);padding:var(--s4) var(--s2);text-align:center;box-shadow:var(--e2);transition:transform var(--t-fast),box-shadow var(--t-fast);cursor:pointer}
.stat-card:active{transform:scale(.97)}
.stat-card .num{font-size:var(--f24);font-weight:800;line-height:1.15;letter-spacing:-.5px}
.stat-card .lbl{font-size:var(--f12);color:var(--muted);margin-top:3px;font-weight:500}
.stat-card.n-blue .num{color:var(--p600)} .stat-card.n-green .num{color:var(--ok600)}
.stat-card.n-amber .num{color:var(--warn600)} .stat-card.n-red .num{color:var(--dgr600)}
.stat-card:first-child{background:var(--ink-800)}
.stat-card:first-child .num{color:#fff;font-weight:800}
.stat-card:first-child .lbl{color:rgba(255,255,255,.78)}
/* 快捷 4 彩格 */
.tpl-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.tpl-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);text-decoration:none;color:var(--text);cursor:pointer;transition:transform var(--t-fast);border:none;background:none;font-family:inherit;padding:var(--s2) 0;min-height:64px;border-radius:var(--r-sm)}
.tpl-item:active{transform:scale(.95);background:var(--n1)}
.tpl-item .nm{font-size:var(--f12);color:var(--text-2);white-space:nowrap;font-weight:500}
.tpl-ico{width:44px;height:44px;border-radius:var(--r-ctl);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;background:var(--tbg,var(--p50));color:var(--tc,var(--brand))}
.c-blue{--tbg:var(--p50);--tc:var(--p600)} .c-green{--tbg:var(--ok100);--tc:var(--ok700)}
.c-amber{--tbg:var(--warn100);--tc:var(--warn700)} .c-violet{--tbg:#f1effe;--tc:#7c3aed}
/* 列表卡 inst-card */
.inst-card{background:var(--card);border-radius:var(--r-card);padding:var(--s3) var(--s4);margin-bottom:var(--s3);cursor:pointer;display:flex;gap:var(--s3);align-items:flex-start;transition:box-shadow var(--t-fast),transform var(--t-fast);position:relative;box-shadow:var(--e1)}
.inst-card:active{box-shadow:var(--e2);transform:scale(.99)}
.inst-card .body{flex:1;min-width:0}
.inst-card .t{font-weight:600;font-size:var(--f15);color:var(--text);padding-right:var(--s2);margin-bottom:var(--s1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inst-card .m{color:var(--muted);font-size:var(--f12);display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.inst-card .side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);flex-shrink:0}
.inst-card .hl{color:var(--p600);font-weight:700;font-size:var(--f15)}
/* 详情 hero(墨青品牌面) */
.detail-hero{position:relative;overflow:hidden;background:var(--ink-900);color:#fff;border-radius:var(--r-card);margin-bottom:var(--s4);padding:var(--s5) var(--s4) var(--s4);box-shadow:var(--e2)}
.detail-hero h2{font-size:var(--f20);margin:var(--s2) 0;line-height:1.35;font-weight:700}
.detail-hero .meta{font-size:var(--f12);color:rgba(255,255,255,.82);display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s1)}
.detail-hero .st-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--f12);font-weight:600;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);border-radius:var(--r-pill);padding:4px 10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.detail-hero .st-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.detail-hero .pillrow{display:flex;gap:6px;flex-wrap:wrap}
.stamp{position:absolute;top:var(--s4);right:var(--s4);z-index:2;transform:rotate(-12deg);border:2.5px solid currentColor;border-radius:var(--r-sm);padding:var(--s1) var(--s2);font-size:var(--f17);font-weight:800;letter-spacing:3px;opacity:.92;line-height:1.3;background:rgba(255,255,255,.08)}
.stamp.ok{color:#6ee7a0;box-shadow:inset 0 0 0 1.5px rgba(110,231,160,.4)}
.stamp.no{color:#fda4a4;box-shadow:inset 0 0 0 1.5px rgba(253,164,164,.4)}
.detail-hero .d-amt{font-size:var(--f24);font-weight:800;margin-top:var(--s3);font-variant-numeric:tabular-nums}
.detail-hero .acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.detail-hero .acts .btn{flex:1;min-width:110px}
.detail-hero .acts .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none}
.detail-hero .acts .btn.ghost:active{background:rgba(255,255,255,.24)}
/* 发起人卡 */
.who-card{display:flex;align-items:center;gap:var(--s3)}
.who-card .info{flex:1;min-width:0}
.who-card .nm{font-size:var(--f15);font-weight:600}
.who-card .dept{font-size:var(--f12);color:var(--muted);margin-top:2px}
/* kv 键值行(详情信息) */
.kv{display:flex;font-size:var(--f13);padding:var(--s2) 0;border-bottom:1px dashed var(--line);gap:var(--s2)}
.kv:last-child{border-bottom:none}
.kv .k{width:96px;color:var(--muted);flex-shrink:0}
.kv .v{flex:1;word-break:break-all;color:var(--text);text-align:right}
.kv .v.amount{font-size:var(--f17);font-weight:700;color:var(--p600)}
/* 竖向时间线 */
.tl-wrap{position:relative;padding-left:var(--s5)}
.tl-wrap::before{content:'';position:absolute;left:15px;top:var(--s2);bottom:var(--s2);width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:var(--s3)}
.tl-item .tdot{position:absolute;left:-26px;top:0;width:24px;height:24px;border-radius:50%;background:var(--n2);border:2px solid var(--n4);display:flex;align-items:center;justify-content:center;color:var(--n5);box-sizing:border-box;z-index:1;font-size:11px}
.tl-item.act-create .tdot,.tl-item.act-submit .tdot,.tl-item.act-resubmit .tdot{background:var(--p50);border-color:var(--p500);color:var(--p500)}
.tl-item.act-approve .tdot,.tl-item.act-post .tdot,.tl-item.act-pay .tdot{background:var(--ok100);border-color:var(--ok600);color:var(--ok600)}
.tl-item.act-reject .tdot,.tl-item.act-void .tdot{background:var(--dgr100);border-color:var(--dgr600);color:var(--dgr600)}
.tl-item .meta{font-size:var(--f13);color:var(--text-2)}
.tl-item .meta b{font-weight:600}
.tl-item .ts{font-size:var(--f12);color:var(--faint)}
.cmt-bubble{background:var(--n1);border-radius:2px var(--r-sm) var(--r-sm) var(--r-sm);padding:var(--s1) var(--s2);margin-top:var(--s1);font-size:var(--f12);color:var(--text-2);display:inline-flex;gap:4px;align-items:flex-start;max-width:100%}
/* 表单提交按钮 spinner */
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.plain{background:var(--n2);color:var(--text-2);box-shadow:none}

/* ========== 8. 登录页·测试账号区(临时,DEMO 模式) ========== */
.demo-zone{width:100%;max-width:460px;margin-top:var(--s5)}
.demo-zone .dz-lbl{display:flex;align-items:center;gap:6px;font-size:var(--f12);color:#7f9bd6;margin-bottom:var(--s2);justify-content:center}
.demo-zone .dz-row{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.demo-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  color:#dbe6ff;border-radius:var(--r-pill);padding:8px 14px;
  font-size:var(--f12);font-weight:500;cursor:pointer;font-family:inherit;
  transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.demo-chip:active{transform:scale(.96);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.36)}
.demo-chip .r{font-size:11px;color:#8fb0ee}

/* ========== 9. 流程进度(节点步进) ========== */
.fsteps{display:flex;flex-direction:column;gap:0}
.fstep{position:relative;padding:0 0 var(--s4);padding-left:var(--s5)}
.fstep:last-child{padding-bottom:0}
.fstep::before{content:'';position:absolute;left:11px;top:18px;bottom:-2px;width:2px;background:var(--line)}
.fstep:last-child::before{display:none}
.fstep .fdot{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--n2);border:2px solid var(--n4);color:var(--n5);
  display:flex;align-items:center;justify-content:center;font-size:12px;box-sizing:border-box;z-index:1}
.fstep .fname{font-weight:600;font-size:var(--f13)}
.fstep .fwho{font-size:var(--f12);color:var(--muted);margin-top:1px}
.fstep.st-done .fdot{background:var(--ok100);border-color:var(--ok600);color:var(--ok600)}
.fstep.st-done .fname{color:var(--text-2)}
.fstep.st-current .fdot{background:var(--p50);border-color:var(--p500);color:var(--p500);box-shadow:0 0 0 4px rgba(43,111,255,.12)}
.fstep.st-rejected .fdot{background:var(--dgr100);border-color:var(--dgr600);color:var(--dgr600)}
/* 待办卡上的快捷动作 */
.task-acts{display:flex;gap:var(--s2);margin-top:var(--s2)}
.task-acts .btn{flex:1;min-width:64px}

/* ========== 10. 壳常驻:tab 即时反馈 + 骨架加载 ========== */
.tabbar a:active{background:rgba(43,111,255,.06)}
.loading{padding:48px 16px;text-align:center;color:var(--faint);font-size:13px}
.loading .spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--n3);border-top-color:var(--brand);animation:spin .8s linear infinite;display:inline-block;margin-right:8px;vertical-align:-4px}

/* ========== 11. 附件 + AI 审查(自审批中心 ai-card 同源) ========== */
.att-row{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px dashed var(--line);font-size:var(--f13)}
.att-row:last-child{border-bottom:none}
.att-row .a-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-row .a-size{color:var(--faint);font-size:var(--f12);flex-shrink:0}
.ai-card{position:relative;overflow:hidden}
.ai-card .riskband{position:absolute;left:0;top:0;bottom:0;width:4px}
.ai-card.risk-pass .riskband{background:var(--ok600)}
.ai-card.risk-warn .riskband{background:var(--warn600)}
.ai-card.risk-fail .riskband{background:var(--dgr600)}
.ai-card.risk-warn{background:#fffdf4}
.ai-card.risk-fail{background:#fff5f5}
.v-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--f12);font-weight:700;border-radius:var(--r-sm);padding:3px 8px}
.v-pass{background:var(--ok100);color:var(--ok700)}
.v-warn{background:var(--warn100);color:var(--warn700)}
.v-fail{background:var(--dgr100);color:var(--dgr700)}
.finding{display:flex;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px dashed var(--line);font-size:var(--f13);align-items:flex-start}
.finding:last-child{border-bottom:none}
.finding .f-ico{margin-top:1px;flex-shrink:0;font-size:12px;font-weight:700;border-radius:var(--r-xs);padding:1px 6px}
.sev-high{background:var(--dgr100);color:var(--dgr700)}
.sev-medium{background:var(--warn100);color:var(--warn700)}
.sev-low{background:var(--n2);color:var(--n6)}
.finding .f-msg{color:var(--text)}
.finding .f-clause{color:var(--faint);font-size:var(--f12);background:var(--n1);border-radius:var(--r-xs);padding:1px 6px;margin-top:2px;display:inline-block}
.finding .f-sug{color:var(--text-2);margin-top:2px}
.finding .f-basis{color:var(--faint);font-size:var(--f12);margin-top:1px}