/* ==========================================================================
   北疆税盾 · 查账智训平台 — 设计系统 v2
   深色优先的现代科技风 · 明暗双主题 · 面向新生代训练者
   类名结构与 v1 保持 100% 兼容，所有视图 JS 无需改动
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* 品牌渐变 */
  --brand-1: #6366F1;
  --brand-2: #8B5CF6;
  --brand-3: #22D3EE;
  --grad: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);   /* 压暗以让白色文字达 5.70:1 */
  --grad-hover: linear-gradient(135deg, #7275F3 0%, #9A6FF8 100%);
  --grad-soft: linear-gradient(135deg, rgba(99,102,241,.15) 0%, rgba(139,92,246,.15) 100%);
  --grad-cyan: linear-gradient(135deg, #22D3EE 0%, #6366F1 100%);
  --grad-text: linear-gradient(135deg, #8B93FF 0%, #B794F6 100%);

  /* 语义色 */
  --success: #10B981;  --success-soft: rgba(16,185,129,.13);  --success-line: rgba(16,185,129,.28);
  --warn:    #F59E0B;  --warn-soft:    rgba(245,158,11,.13);  --warn-line:    rgba(245,158,11,.28);
  --danger:  #F43F5E;  --danger-soft:  rgba(244,63,94,.13);   --danger-line:  rgba(244,63,94,.28);
  --info:    #38BDF8;  --info-soft:    rgba(56,189,248,.13);  --info-line:    rgba(56,189,248,.28);
  --purple:  #A855F7;  --purple-soft:  rgba(168,85,247,.13);  --purple-line:  rgba(168,85,247,.28);
  --gold:    #F0B429;  --gold-soft:    rgba(240,180,41,.13);  --gold-line:    rgba(240,180,41,.28);
  /* 语义色「文字变体」——同一语义色当底色与当文字色的明度需求相反，故分两套。
     文字变体必须同时与卡片底、以及 13% 透明度的软底达标（校值见 _tools/pick-semantic.js）。 */
  --brand-text: #8B8CF8;  --success-text: #5EEAD4;  --warn-text:  #FCD34D;  --danger-text: #FDA4AF;
  --info-text:  #7DD3FC;  --purple-text:  #D8B4FE;  --gold-text:  #FDE68A;

  /* 圆角 */
  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* 间距 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px;

  /* 字号 */
  --fs-display: 30px; --fs-title: 21px; --fs-h1: 18px; --fs-h2: 15px;
  --fs-body: 14px; --fs-sm: 12.5px; --fs-xs: 11.5px;

  /* 动效 */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .22s;

  /* 布局 */
  --topbar-h: 62px;
  --sidebar-w: 234px;

  /* 字体 */
  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
          system-ui, sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. 主题：深色（默认）
   -------------------------------------------------------------------------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090D;
  --bg-2: #0C0E14;
  --surface: #12141C;
  --surface-2: #191C26;
  --surface-3: #222634;
  --surface-hi: #2A2F3F;
  --sidebar-bg: rgba(12,14,20,.86);
  --topbar-bg: rgba(12,14,20,.68);
  --text: #ECEFF5;
  --text-2: #A2AABA;
  --text-3: #909AAE;   /* 原 #6F7788 仅 4.09:1，不达 AA */
  --line: rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.045);
  --hover: rgba(255,255,255,.05);
  --active: rgba(99,102,241,.16);
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 4px 18px rgba(0,0,0,.42);
  --shadow-3: 0 18px 52px rgba(0,0,0,.62);
  --glow: 0 0 0 1px rgba(99,102,241,.32), 0 10px 34px rgba(99,102,241,.22);
  --ring: rgba(99,102,241,.42);
  --veil: rgba(4,5,8,.72);
  --code-bg: rgba(99,102,241,.13);
  --track: rgba(255,255,255,.07);
  /* 图表专用令牌 —— charts.js 的 SVG 表现属性直接引用（var() 在 fill/stroke 里可用）。
     网格线的可见度必须高于布局用的 --line-2（仅 4.5% 白，画在深底上等于看不见）。 */
  --chart-grid: rgba(255,255,255,.11);   /* 网格线 / 环形与仪表底轨 */
  --chart-base: rgba(148,163,184,.52);   /* 基准条（行业均值对比）等中性数据 */
  --chart-tick: rgba(162,170,186,.74);   /* 刻度数字（弱于类目标签） */
}

/* --------------------------------------------------------------------------
   3. 主题：浅色
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5FA;
  --bg-2: #EDEEF6;
  --surface: #FFFFFF;
  --surface-2: #F8F9FC;
  --surface-3: #EFF1F7;
  --surface-hi: #FFFFFF;
  --sidebar-bg: rgba(255,255,255,.9);
  --topbar-bg: rgba(255,255,255,.76);
  --text: #0E131F;
  --text-2: #5A6376;
  --text-3: #616A7E;   /* 原 #8A92A6 对白底仅 3.11:1；本值在最深的 --bg-2 上仍 4.69:1 */
  --line: rgba(14,19,31,.09);
  --line-2: rgba(14,19,31,.05);
  --hover: rgba(14,19,31,.035);
  --active: rgba(99,102,241,.1);
  --shadow-1: 0 1px 2px rgba(14,19,31,.05), 0 1px 3px rgba(14,19,31,.04);
  --shadow-2: 0 4px 16px rgba(14,19,31,.07);
  --shadow-3: 0 20px 54px rgba(14,19,31,.17);
  --glow: 0 0 0 1px rgba(99,102,241,.26), 0 10px 30px rgba(99,102,241,.16);
  --ring: rgba(99,102,241,.3);
  --veil: rgba(20,24,38,.42);
  --code-bg: rgba(99,102,241,.09);
  --track: rgba(14,19,31,.07);
  --chart-grid: rgba(14,19,31,.10);
  --chart-base: rgba(100,116,139,.46);
  --chart-tick: rgba(90,99,118,.78);
  --brand-text: #5456E0;  --success-text: #047857;  --warn-text:  #92610A;  --danger-text: #BE123C;
  --info-text:  #0369A1;  --purple-text:  #6D28D9;  --gold-text:  #8A6100;
}

/* --------------------------------------------------------------------------
   3.1 重点领域配色（10 色）
   --------------------------------------------------------------------------
   为什么按主题给两套明度：领域色既当「底色」（卡片顶边、圆点、图表色块）
   又当「前景色」（卡片标题文字），而同一个色值不可能同时在纯白底与近黑底上
   达到 4.5:1 —— 暖色（金/橙/橄榄）尤其做不到。实测数据：
     单套最优解在浅底仅 3.6~4.1:1（不达 AA）；
     拆成两套后深底最低 6.85:1、白底最低 4.56:1，全部通过 AA。
   数据层 data/domains.js 的 color 字段直接写 var(--dom-xxx)，
   内联 style 与 SVG fill 都能解析变量，故无需在 JS 里做主题分支。
   -------------------------------------------------------------------------- */
:root, [data-theme="dark"] {
  --dom-manufacture: #8b9bff;      /* 制造业 */
  --dom-tech: #35b3c7;             /* 先进技术服务 */
  --dom-platform: #6ba4ff;         /* 平台经济 */
  --dom-fake-invoice: #ff7b80;     /* 虚开发票 */
  --dom-hightech: #e0a94a;         /* 高新技术企业 */
  --dom-west: #a98bff;             /* 西部大开发 */
  --dom-preferential: #f09a50;     /* 套用优惠政策 */
  --dom-export: #34c08d;           /* 出口退税 */
  --dom-agri: #a3c24b;             /* 农产品加工 */
  --dom-characteristic: #c49b7c;   /* 特色产业 */
}
[data-theme="light"] {
  --dom-manufacture: #4a5be0;
  --dom-tech: #0b7183;
  --dom-platform: #2a66d0;
  --dom-fake-invoice: #c7333a;
  --dom-hightech: #9a6a17;
  --dom-west: #7141df;
  --dom-preferential: #b65e15;
  --dom-export: #0a7a53;
  --dom-agri: #5c7a12;
  --dom-characteristic: #7f5c40;
}

/* --------------------------------------------------------------------------
   4. 基础
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
::selection { background: rgba(99,102,241,.32); }
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: var(--r-xs); }
img, svg { vertical-align: middle; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--track); border-radius: var(--r-pill); border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--track) transparent; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes glowPulse { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

/* --------------------------------------------------------------------------
   5. 登录页
   -------------------------------------------------------------------------- */
#login-view {
  position: fixed; inset: 0; display: flex; align-items: stretch; z-index: 200;
  background:
    radial-gradient(1000px 620px at 14% 18%, rgba(99,102,241,.30), transparent 62%),
    radial-gradient(880px 560px at 82% 82%, rgba(139,92,246,.24), transparent 58%),
    radial-gradient(620px 420px at 62% 8%, rgba(34,211,238,.14), transparent 60%),
    #06070B;
  overflow: hidden;
}
#login-view::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 74%);
}
.login-left {
  flex: 1.3; padding: 60px 68px; color: #fff; display: flex; flex-direction: column;
  justify-content: center; position: relative; z-index: 1; min-width: 0;
}
.login-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 44px; }
.login-brand .mark {
  width: 58px; height: 58px; border-radius: var(--r-lg); flex: 0 0 58px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(99,102,241,.3);
}
.login-title {
  font-size: 44px; font-weight: 700; letter-spacing: .5px; margin: 0 0 14px; line-height: 1.2;
  background: linear-gradient(120deg, #FFFFFF 15%, #C7CCFF 55%, #A78BFA 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-sub { font-size: 16px; color: rgba(255,255,255,.62); letter-spacing: .5px; }
.login-quote {
  margin-top: 36px; padding: 16px 20px; color: rgba(255,255,255,.68); font-size: 14px;
  line-height: 1.95; max-width: 560px; border-radius: var(--r);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid var(--brand-1);
  backdrop-filter: blur(14px);
}
.login-feats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.login-feat {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill); padding: 6px 15px; font-size: 13px; color: rgba(255,255,255,.82);
  backdrop-filter: blur(12px); transition: var(--dur) var(--ease);
}
.login-feat:hover { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.5); transform: translateY(-2px); }
.login-stats { display: flex; gap: 38px; margin-top: 42px; flex-wrap: wrap; }
.login-stat b {
  display: block; font-size: 32px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-stat span { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .4px; }

.login-right {
  width: 470px; flex: 0 0 470px; display: flex; flex-direction: column; justify-content: center;
  padding: 42px 46px; position: relative; z-index: 1; overflow-y: auto;
  background: rgba(255,255,255,.055);
  border-left: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(28px) saturate(160%);
}
.login-right h2 {
  font-size: var(--fs-title); margin: 0 0 7px; color: #fff; font-weight: 600; letter-spacing: .3px;
}
.login-right .hint { font-size: var(--fs-sm); color: rgba(255,255,255,.48); margin-bottom: 22px; line-height: 1.7; }
.demo-accounts { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 15px; }
.demo-accounts .t { font-size: var(--fs-sm); color: rgba(255,255,255,.44); margin-bottom: 11px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.demo-chip {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: 8px 11px;
  cursor: pointer; background: rgba(255,255,255,.045); transition: var(--dur) var(--ease);
  text-align: left; color: #fff; line-height: 1.45;
}
.demo-chip:hover {
  border-color: rgba(99,102,241,.65); background: rgba(99,102,241,.18);
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(99,102,241,.24);
}
.demo-chip b { display: block; font-size: 13px; color: #fff; font-weight: 600; }
.demo-chip span { font-size: 11px; color: rgba(255,255,255,.5); font-family: var(--mono); }
@media (max-width: 1080px) {
  .login-right { width: 400px; flex: 0 0 400px; padding: 40px 32px; }
  .login-left { padding: 44px 40px; }
  .login-title { font-size: 34px; }
}
@media (max-width: 860px) {
  #login-view { flex-direction: column; overflow-y: auto; }
  .login-right { width: 100%; flex: 1 0 auto; border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
  .login-left { padding: 36px 28px; }
}

/* --------------------------------------------------------------------------
   6. 表单
   -------------------------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: var(--fs-sm); color: var(--text-2);
  margin-bottom: 7px; font-weight: 500; letter-spacing: .2px;
}
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 13px; background: var(--surface-2); color: var(--text);
  transition: var(--dur) var(--ease); font-size: var(--fs-body);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--ring); outline: none;
  background: var(--surface);
}
.textarea { resize: vertical; min-height: 82px; line-height: 1.72; }
.select {
  appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%238A92A6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
select option { background: var(--surface); color: var(--text); }
.form-error {
  background: var(--danger-soft); color: var(--danger-text); border: 1px solid var(--danger-line);
  border-radius: var(--r-sm); padding: 9px 13px; font-size: var(--fs-sm); margin-bottom: 13px; display: none;
}
.form-error.show { display: block; animation: fadeUp .2s var(--ease-out); }
#login-form .input {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); color: #fff;
}
#login-form .input::placeholder { color: rgba(255,255,255,.32); }
#login-form .input:focus { background: rgba(255,255,255,.1); border-color: var(--brand-1); }
#login-form .field label { color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------------------
   7. 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 17px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--surface-2); color: var(--text); cursor: pointer;
  font-size: var(--fs-body); transition: var(--dur) var(--ease);
  white-space: nowrap; font-weight: 500; line-height: 1.42; position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 2px 10px rgba(99,102,241,.28); }
.btn-primary:hover { background: var(--grad-hover); box-shadow: 0 6px 22px rgba(99,102,241,.42); }
.btn-deep { background: var(--brand-2); color: #fff; }
.btn-deep:hover { box-shadow: 0 6px 20px rgba(139,92,246,.4); }
.btn-gold { background: linear-gradient(135deg, #F0B429, #E89B14); color: #2A1D00; font-weight: 600; }
.btn-gold:hover { box-shadow: 0 6px 20px rgba(240,180,41,.36); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { box-shadow: 0 6px 20px rgba(244,63,94,.38); }
.btn-ghost { border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand-1); color: var(--brand-text); background: var(--active); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); border-radius: var(--r-xs); gap: 5px; }
.btn-lg { padding: 13px 24px; font-size: var(--fs-h2); border-radius: var(--r); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   8. 应用外壳
   -------------------------------------------------------------------------- */
#app-view { display: none; height: 100%; flex-direction: column; }
#app-view.active { display: flex; }
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: var(--topbar-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 20px; gap: 20px; z-index: 60; position: relative;
}
.topbar .brand { display: flex; align-items: center; gap: 11px; min-width: 218px; }
.topbar .brand .mark {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: 0 0 36px;
  background: var(--grad); display: grid; place-items: center; color: #fff;
  box-shadow: 0 3px 14px rgba(99,102,241,.36);
}
.topbar .brand b {
  font-size: 16px; letter-spacing: .4px; font-weight: 650; color: var(--text);
  display: block; line-height: 1.2;
}
.topbar .brand span { font-size: 10.5px; color: var(--text-3); display: block; letter-spacing: .2px; }
.topnav { display: flex; gap: 3px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  color: var(--text-2); padding: 8px 14px; border-radius: var(--r-sm); font-size: 13.5px;
  white-space: nowrap; text-decoration: none; transition: var(--dur) var(--ease); font-weight: 500;
}
.topnav a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.topnav a.on {
  background: var(--grad-soft); color: var(--text); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.32);
}
.topbar-right { display: flex; align-items: center; gap: 9px; }
.tb-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm); background: transparent;
  border: 1px solid var(--line); color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; position: relative; transition: var(--dur) var(--ease);
}
.tb-icon:hover { background: var(--hover); color: var(--text); border-color: var(--text-3); }
.tb-icon .dot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--surface);
  animation: pulse 2.4s var(--ease) infinite;
}
.tb-user {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 4px 11px 4px 4px; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: var(--dur) var(--ease);
}
.tb-user:hover { background: var(--hover); border-color: var(--line); }
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: 13px; font-weight: 650; color: #fff; background: var(--grad); flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(99,102,241,.32);
}
.tb-user .nm { font-size: 13px; line-height: 1.25; font-weight: 500; color: var(--text); }
.tb-user .rl { font-size: 10.5px; color: var(--text-3); line-height: 1.2; }

.app-body { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--line);
  overflow-y: auto; padding: 14px 12px 44px;
}
.side-group {
  padding: 16px 10px 7px; font-size: 10.5px; color: var(--text-3);
  letter-spacing: .8px; font-weight: 600; text-transform: uppercase;
}
.sidebar a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; color: var(--text-2);
  font-size: 13.5px; text-decoration: none; border-radius: var(--r-sm);
  transition: var(--dur) var(--ease); position: relative; margin-bottom: 1px; font-weight: 450;
}
.sidebar a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.sidebar a.on {
  background: var(--grad-soft); color: var(--text); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.3);
}
.sidebar a.on::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--grad);
  box-shadow: 0 0 12px rgba(99,102,241,.66);
}
.sidebar a .ico { width: 17px; display: grid; place-items: center; flex: 0 0 17px; opacity: .85; }
.sidebar a.on .ico { opacity: 1; color: var(--brand-text); }
.sidebar a .badge {
  margin-left: auto; background: var(--danger); color: #fff; font-size: 10px;
  border-radius: var(--r-pill); padding: 1px 7px; font-weight: 600;
}

.main { flex: 1; overflow-y: auto; padding: 24px 28px 56px; min-width: 0; }
.main > * { animation: fadeUp .3s var(--ease-out) both; }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h1 {
  font-size: var(--fs-title); margin: 0 0 6px; color: var(--text);
  font-weight: 650; letter-spacing: -.3px;
}
.page-head p { margin: 0; font-size: var(--fs-sm); color: var(--text-3); max-width: 940px; line-height: 1.72; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 12px; }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--brand-text); }
.breadcrumb span { margin: 0 6px; opacity: .6; }

/* --------------------------------------------------------------------------
   9. 栅格
   -------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.g2 { grid-column: span 2; } .g3 { grid-column: span 3; } .g4 { grid-column: span 4; }
.g5 { grid-column: span 5; } .g6 { grid-column: span 6; } .g7 { grid-column: span 7; }
.g8 { grid-column: span 8; } .g9 { grid-column: span 9; } .g12 { grid-column: span 12; }
@media (max-width: 1500px) { .g3 { grid-column: span 4; } }
@media (max-width: 1200px) {
  .g2, .g3, .g4 { grid-column: span 6; }
  .g5, .g6, .g7, .g8, .g9 { grid-column: span 12; }
}
@media (max-width: 820px) { .grid > * { grid-column: span 12 !important; } }

/* --------------------------------------------------------------------------
   10. 卡片 / KPI
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.card-head h3 {
  margin: 0; font-size: var(--fs-h2); color: var(--text); font-weight: 600;
  display: flex; align-items: center; gap: 9px; letter-spacing: -.1px;
}
.card-head h3 svg { color: var(--brand-text); }
.card-head .sub { font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; }
.card-body { padding: 20px; }
.card-body.tight { padding: 14px 16px; }
.card-foot {
  padding: 13px 20px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}

.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow-1); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  background: radial-gradient(520px 200px at 100% 0%, rgba(99,102,241,.09), transparent 70%);
}
.kpi:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.34); box-shadow: var(--shadow-2); }
.kpi .lbl {
  font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 7px;
  font-weight: 500; position: relative; z-index: 1;
}
.kpi .val {
  font-size: 29px; font-weight: 700; color: var(--text); line-height: 1.2; margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.9px; position: relative; z-index: 1;
}
.kpi .val small { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.kpi .foot {
  font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px;
  margin-top: 4px; position: relative; z-index: 1;
}
.kpi .ico {
  position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--grad-soft); color: var(--brand-text);
  border: 1px solid rgba(99,102,241,.22);
}
.kpi.gold .ico { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-line); }
.kpi.green .ico { background: var(--success-soft); color: var(--success-text); border-color: var(--success-line); }
.kpi.red .ico { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); }
.kpi.orange .ico { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
.trend-up { color: var(--success-text); font-weight: 600; }
.trend-down { color: var(--danger-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. 标签 / 徽标
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 1.6;
  white-space: nowrap; font-weight: 500; border: 1px solid transparent;
}
.tag-blue   { background: var(--active);       color: var(--brand-text);   border-color: rgba(99,102,241,.26); }
.tag-gold   { background: var(--gold-soft);    color: var(--gold-text);    border-color: var(--gold-line); }
.tag-green  { background: var(--success-soft); color: var(--success-text); border-color: var(--success-line); }
.tag-orange { background: var(--warn-soft);    color: var(--warn-text);    border-color: var(--warn-line); }
.tag-red    { background: var(--danger-soft);  color: var(--danger-text);  border-color: var(--danger-line); }
.tag-gray   { background: var(--hover);        color: var(--text-2); border-color: var(--line); }
.tag-purple { background: var(--purple-soft);  color: var(--purple-text);  border-color: var(--purple-line); }
[data-theme="light"] .tag-blue   { color: #4F46E5; }
[data-theme="light"] .tag-gold   { color: #A16207; }
[data-theme="light"] .tag-green  { color: #047857; }
[data-theme="light"] .tag-orange { color: #B45309; }
[data-theme="light"] .tag-red    { color: #BE123C; }
[data-theme="light"] .tag-purple { color: #7E22CE; }
.tag-solid-red   { background: #BE123C; color: #fff; }
.tag-solid-orange{ background: var(--warn);    color: #2A1D00; }
.tag-solid-green { background: #047857; color: #fff; }

.lv {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs);
  font-weight: 600; padding: 2px 8px; border-radius: var(--r-xs);
}
.lv-高 { background: var(--danger-soft);  color: var(--danger-text); }
.lv-中 { background: var(--warn-soft);    color: var(--warn-text); }
.lv-低 { background: var(--success-soft); color: var(--success-text); }
[data-theme="light"] .lv-高 { color: #BE123C; }
[data-theme="light"] .lv-中 { color: #B45309; }
[data-theme="light"] .lv-低 { color: #047857; }
.dot-sq { width: 8px; height: 8px; border-radius: 2.5px; display: inline-block; }

.diff { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.diff i { width: 6px; height: 6px; border-radius: 50%; background: var(--track); display: inline-block; }
.diff.高 i { background: var(--danger); box-shadow: 0 0 7px rgba(244,63,94,.6); }
.diff.中 i { background: var(--warn); }
.diff.低 i { background: var(--success); }

/* --------------------------------------------------------------------------
   12. 表格
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); }
table.tb {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; background: transparent;
}
table.tb thead th {
  background: var(--surface-2); color: var(--text-3); font-weight: 600; text-align: left;
  padding: 10px 12px; white-space: nowrap; font-size: var(--fs-xs);
  letter-spacing: .5px; position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line); backdrop-filter: blur(10px);
}
table.tb thead th.sortable { cursor: pointer; user-select: none; transition: color var(--dur) var(--ease); }
table.tb thead th.sortable:hover { color: var(--brand-text); }
table.tb tbody td {
  padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle;
  transition: background var(--dur) var(--ease);
}
/* 未设 width 的列（由 UI.table 标记 .col-flex）：给最小宽度，
   避免被浏览器压到 min-content（中文会变成每行一个字）。 */
table.tb th.col-flex, table.tb td.col-flex { min-width: 158px; }
table.tb tbody tr:last-child td { border-bottom: none; }
table.tb tbody tr:hover td { background: var(--hover); }
table.tb tbody tr.sel td { background: var(--active); }
table.tb tbody tr.flag-row td { background: rgba(245,158,11,.09); }
table.tb tbody tr.flag-row:hover td { background: rgba(245,158,11,.15); }
table.tb tbody tr.danger-row td { background: rgba(244,63,94,.08); }
table.tb tbody tr.danger-row:hover td { background: rgba(244,63,94,.14); }
table.tb .num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: -.2px;
}
table.tb .ctr { text-align: center; }
table.tb.zebra tbody tr:nth-child(even) td { background: var(--line-2); }
table.tb.zebra tbody tr:nth-child(even):hover td { background: var(--hover); }
table.tb.compact tbody td, table.tb.compact thead th { padding: 6px 9px; }
table.tb.compact th.col-flex, table.tb.compact td.col-flex { min-width: 96px; }
table.tb .rowno { color: var(--text-3); font-family: var(--mono); font-size: 11.5px; width: 46px; }
.tb-act { display: flex; gap: 4px; white-space: nowrap; }
.tb-act button {
  background: none; border: none; color: var(--brand-text); cursor: pointer;
  padding: 3px 7px; font-size: 12.5px; border-radius: var(--r-xs);
  transition: var(--dur) var(--ease); font-weight: 500;
}
.tb-act button:hover { background: var(--active); }
.tb-act button.del { color: var(--danger-text); }
.tb-act button.del:hover { background: var(--danger-soft); }

table.lt thead th { background: var(--surface-2); color: var(--text-2); position: static; }
tr.total-row td {
  background: var(--surface-2) !important; font-weight: 700; color: var(--text);
  border-top: 1px solid rgba(99,102,241,.34) !important;
}

/* --------------------------------------------------------------------------
   13. 工具条 / 筛选
   -------------------------------------------------------------------------- */
.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.search-box { position: relative; }
.search-box .input { padding-left: 34px; min-width: 210px; }
.search-box svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .select { min-width: 122px; width: auto; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 5px 13px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; font-size: var(--fs-sm); color: var(--text-2);
  transition: var(--dur) var(--ease); font-weight: 500;
}
.chip:hover { border-color: var(--brand-1); color: var(--brand-text); }
.chip.on {
  background: var(--grad); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 3px 12px rgba(99,102,241,.34);
}

/* --------------------------------------------------------------------------
   14. 标签页 / 分页
   -------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: 3px; border-bottom: 1px solid var(--line);
  margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: none; padding: 10px 15px; cursor: pointer; color: var(--text-2);
  font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: var(--dur) var(--ease); font-weight: 500;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--brand-text); border-bottom-color: var(--brand-1); font-weight: 600; }
.pill-tabs {
  display: inline-flex; background: var(--surface-2); border-radius: var(--r-sm);
  padding: 3px; gap: 3px; border: 1px solid var(--line);
}
.pill-tabs button {
  border: none; background: none; padding: 6px 15px; border-radius: var(--r-xs);
  cursor: pointer; font-size: 13px; color: var(--text-2); transition: var(--dur) var(--ease);
}
.pill-tabs button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }

.pager {
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  padding: 14px 2px 0; flex-wrap: wrap;
}
.pager .info { font-size: var(--fs-sm); color: var(--text-3); margin-right: auto; }
.pager button {
  min-width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-xs); cursor: pointer; font-size: 13px; color: var(--text-2);
  transition: var(--dur) var(--ease);
}
.pager button:hover:not(:disabled) { border-color: var(--brand-1); color: var(--brand-text); background: var(--active); }
.pager button.on { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.pager button:disabled { opacity: .38; cursor: not-allowed; }
.pager .size { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); }
.pager .size select { width: auto; padding: 5px 28px 5px 9px; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   15. 进度 / 迷你可视化
   -------------------------------------------------------------------------- */
.bar { height: 7px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad); transition: width .45s var(--ease-out); }
.bar.green > i { background: linear-gradient(90deg, #059669, #10B981); }
.bar.orange > i { background: linear-gradient(90deg, #D97706, #F59E0B); }
.bar.red > i { background: linear-gradient(90deg, #E11D48, #F43F5E); }
.bar.gold > i { background: linear-gradient(90deg, #D99A0B, #F0B429); }
.bar-row { display: flex; align-items: center; gap: 9px; }
.bar-row .txt { font-size: 12px; font-family: var(--mono); color: var(--text-2); min-width: 40px; text-align: right; }

.mini-bar { display: inline-flex; align-items: center; gap: 7px; width: 100%; }
.mini-bar .track { flex: 1; height: 6px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; min-width: 40px; }
.mini-bar .track i { display: block; height: 100%; background: var(--grad); border-radius: var(--r-pill); }
.mini-bar .v { font-size: 12px; font-family: var(--mono); color: var(--text-2); }
.spark { display: block; }

.score-ring { position: relative; display: inline-grid; place-items: center; }
.score-ring .txt { position: absolute; text-align: center; }
.score-ring .txt b {
  display: block; font-size: 24px; color: var(--text); line-height: 1.1;
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.score-ring .txt span { font-size: var(--fs-xs); color: var(--text-3); }

/* --------------------------------------------------------------------------
   16. 三栏工作台
   -------------------------------------------------------------------------- */
.wb { display: grid; grid-template-columns: 252px 1fr 362px; gap: 14px; align-items: start; }
@media (max-width: 1560px) { .wb { grid-template-columns: 226px 1fr 324px; } }
@media (max-width: 1320px) {
  .wb { grid-template-columns: 1fr; }
  .wb > .wb-col { max-height: none !important; }
}
.wb-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column;
}
.wb-col.maxh { max-height: calc(100vh - 158px); }
.wb-head {
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 600; color: var(--text); display: flex;
  align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto;
}
.wb-body { overflow: auto; padding: 12px 14px; flex: 1; min-height: 0; }
.wb-body.flush { padding: 0; }

/* --------------------------------------------------------------------------
   17. 科目树
   -------------------------------------------------------------------------- */
.tree { font-size: 13px; }
.tree-node { user-select: none; }
.tree-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  border-radius: var(--r-xs); cursor: pointer; transition: var(--dur) var(--ease);
}
.tree-item:hover { background: var(--hover); }
.tree-item.on { background: var(--active); color: var(--text); font-weight: 600; }
.tree-item .caret { width: 12px; color: var(--text-3); font-size: 10px; transition: transform var(--dur) var(--ease); }
.tree-item .caret.open { transform: rotate(90deg); }
.tree-item .code { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.tree-children { margin-left: 14px; border-left: 1px solid var(--line-2); padding-left: 3px; }
.tree-badge { margin-left: auto; font-size: 11px; color: var(--text-3); font-family: var(--mono); }

/* --------------------------------------------------------------------------
   18. AI 面板 / 对话
   -------------------------------------------------------------------------- */
.ai-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ai-seg {
  display: flex; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap; background: var(--surface-2);
}
.ai-tab {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: var(--fs-xs); cursor: pointer; color: var(--text-2);
  transition: var(--dur) var(--ease); font-weight: 500;
}
.ai-tab:hover { border-color: var(--brand-1); color: var(--brand-text); }
.ai-tab.on {
  background: var(--grad); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 3px 11px rgba(99,102,241,.32);
}
.chat-log { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg-2); min-height: 180px; }
.msg { margin-bottom: 14px; display: flex; gap: 9px; animation: fadeUp .26s var(--ease-out) both; }
.msg .av {
  width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; flex: 0 0 28px; background: var(--surface-3);
}
/* 头像配色变体。★ 关键：文字色必须与底色明暗配对 ——
   白字压金色底只有 1.8:1（不可读），必须换深色字；靛/蓝/绿底则配白字。
   选择器写成 .av.av-x（两个类）以与 .msg .av / .avatar 同权重，靠书写顺序覆盖。 */
.av.av-ai   { background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #fff; }
.av.av-ent  { background: linear-gradient(135deg,#0369A1,#4F46E5); color: #fff; }
.av.av-me   { background: linear-gradient(135deg,#047857,#065F46); color: #fff; }
.av.av-team { background: linear-gradient(135deg,#2563EB,#4F46E5); color: #fff; }
.av.av-ok   { background: linear-gradient(135deg,#047857,#065F46); color: #fff; }
.av.av-warn { background: linear-gradient(135deg,#B45309,#92400E); color: #fff; }
.av.av-bad  { background: linear-gradient(135deg,#BE123C,#881337); color: #fff; }
.av.av-lead { background: linear-gradient(135deg,#F5C24A,#DFA01A); color: #2A1D00; }
.msg .bubble {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px var(--r) var(--r) var(--r);
  padding: 10px 13px; font-size: 13px; line-height: 1.78; max-width: 100%;
  word-break: break-word; white-space: pre-wrap; color: var(--text);
}
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble {
  background: var(--grad); color: #fff; border-color: transparent;
  border-radius: var(--r) 4px var(--r) var(--r);
}
.msg .meta { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 4px; }
.chat-input { border-top: 1px solid var(--line-2); padding: 11px 12px; background: var(--surface); flex: 0 0 auto; }
.chat-input textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px;
  resize: none; height: 58px; font-size: 13px; background: var(--surface-2); color: var(--text);
  transition: var(--dur) var(--ease);
}
.chat-input textarea:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--ring); outline: none; background: var(--surface); }
.chat-input .row { display: flex; gap: 7px; margin-top: 8px; align-items: center; }
.quick-ask { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.quick-ask button {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: var(--fs-xs); cursor: pointer; color: var(--text-2);
  transition: var(--dur) var(--ease);
}
.quick-ask button:hover { border-color: var(--brand-1); color: var(--brand-text); background: var(--active); }

/* --------------------------------------------------------------------------
   19. 原始单据模拟
   -------------------------------------------------------------------------- */
.doc-sim {
  background: #FFFDF7; border: 1px solid #E8DFC8; border-radius: var(--r-sm);
  padding: 16px 18px; font-size: 12.5px; color: #4A4030; position: relative;
  box-shadow: 0 2px 14px rgba(0,0,0,.1);
}
.doc-sim::after {
  content: '脱敏仿真单据'; position: absolute; right: 11px; top: 9px; font-size: 10px;
  color: #B9A87C; border: 1px solid #E0D3AE; border-radius: var(--r-xs); padding: 1px 6px;
}
.doc-sim h4 { margin: 0 0 11px; font-size: 14px; text-align: center; letter-spacing: 3px; color: #6B5A32; font-weight: 600; }
.doc-sim table { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc-sim td, .doc-sim th { border: 1px solid #E0D5BB; padding: 5px 8px; }
.doc-sim .seal {
  position: absolute; right: 28px; bottom: 18px; width: 90px; height: 90px;
  border: 2.5px solid rgba(200,60,60,.55); border-radius: 50%; color: rgba(200,60,60,.72);
  display: grid; place-items: center; text-align: center; font-size: 10px;
  line-height: 1.35; transform: rotate(-12deg); font-weight: 700;
}
.doc-sim.bank { background: #F6FAFF; border-color: #CFE0F2; color: #2A3A4D; }
.doc-sim.bank::after { color: #8FAECB; border-color: #CFE0F2; }
.doc-sim.bank h4 { color: #1E40AF; }
.doc-sim.bank td, .doc-sim.bank th { border-color: #D9E6F4; }
.doc-sim.contract { background: #FCFCFA; border-color: #E0E0D8; color: #3A3A34; }
.doc-sim.contract td, .doc-sim.contract th { border-color: #E4E4DC; }

/* --------------------------------------------------------------------------
   20. 弹层 / 抽屉
   -------------------------------------------------------------------------- */
.mask {
  position: fixed; inset: 0; background: var(--veil); z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mask.show { display: flex; animation: fadeIn .18s var(--ease); }
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); width: 100%; max-width: 720px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: fadeUp .26s var(--ease-out) both;
}
.modal.wide { max-width: 1120px; }
.modal.narrow { max-width: 480px; }
.modal-head {
  padding: 16px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-head h3 { margin: 0; font-size: var(--fs-h1); color: var(--text); font-weight: 600; }
.modal-head .close {
  border: none; background: transparent; font-size: 20px; color: var(--text-3);
  cursor: pointer; line-height: 1; padding: 3px 8px; border-radius: var(--r-xs);
  transition: var(--dur) var(--ease);
}
.modal-head .close:hover { background: var(--danger-soft); color: var(--danger-text); }
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 96vw;
  background: var(--surface); z-index: 310; box-shadow: var(--shadow-3);
  transform: translateX(102%); transition: transform .3s var(--ease-out);
  display: flex; flex-direction: column; border-left: 1px solid var(--line);
}
.drawer.show { transform: translateX(0); }
.drawer-head {
  padding: 16px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2);
}
.drawer-head h3 { margin: 0; font-size: var(--fs-h1); color: var(--text); font-weight: 600; }
.drawer-head .close {
  border: none; background: var(--hover); color: var(--text-2); font-size: 18px;
  cursor: pointer; border-radius: var(--r-xs); padding: 2px 9px; line-height: 1.6;
  transition: var(--dur) var(--ease);
}
.drawer-head .close:hover { background: var(--danger-soft); color: var(--danger-text); }
.drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; }

/* --------------------------------------------------------------------------
   21. 提示 / 空态 / 加载
   -------------------------------------------------------------------------- */
#toasts { position: fixed; top: 78px; right: 24px; z-index: 400; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand-1);
  border-radius: var(--r-sm); box-shadow: var(--shadow-3); padding: 12px 17px;
  font-size: 13px; min-width: 250px; max-width: 430px; color: var(--text);
  animation: slideIn .26s var(--ease-out); backdrop-filter: blur(10px);
}
.toast.ok   { border-left-color: var(--success-text); }
.toast.err  { border-left-color: var(--danger-text); }
.toast.warn { border-left-color: var(--warn-text); }

.empty { text-align: center; padding: 52px 20px; color: var(--text-3); }
.empty .ic { opacity: .3; margin-bottom: 10px; display: flex; justify-content: center; }
.empty p { margin: 5px 0 0; font-size: var(--fs-sm); }
.loading { text-align: center; padding: 44px; color: var(--text-3); font-size: var(--fs-sm); }
.spinner {
  width: 28px; height: 28px; border: 2.5px solid var(--track); border-top-color: var(--brand-1);
  border-radius: 50%; animation: spin .72s linear infinite; margin: 0 auto 12px;
}

/* --------------------------------------------------------------------------
   22. 描述列表 / 时间线 / 白板 / 提示条
   -------------------------------------------------------------------------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 9px 16px; font-size: 13px; }
.dl dt { color: var(--text-3); white-space: nowrap; }
.dl dd { margin: 0; color: var(--text); word-break: break-word; }
.dl.two { grid-template-columns: max-content 1fr max-content 1fr; }
@media (max-width: 760px) { .dl.two { grid-template-columns: max-content 1fr; } }

.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1.5px;
  background: linear-gradient(180deg, var(--brand-1), transparent);
}
.tl-item { position: relative; padding: 0 0 16px 10px; font-size: 13px; }
.tl-item::before {
  content: ''; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--brand-1);
}
.tl-item.gold::before  { border-color: var(--gold-text); }
.tl-item.green::before { border-color: var(--success-text); }
.tl-item .tm { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--mono); }
.tl-item .tx { color: var(--text); }

.whiteboard {
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r);
  position: relative; overflow: hidden; min-height: 320px;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 20px 20px;
}

.alert {
  border-radius: var(--r-sm); padding: 12px 16px; font-size: 13px; display: flex;
  gap: 10px; align-items: flex-start; line-height: 1.72; border: 1px solid transparent;
}
.alert.info   { background: var(--info-soft);    color: var(--info-text);  border-color: var(--info-line); }
.alert.warn   { background: var(--warn-soft);    color: var(--warn-text);  border-color: var(--warn-line); }
.alert.danger { background: var(--danger-soft);  color: #FDA4AF; border-color: var(--danger-line); }
.alert.ok     { background: var(--success-soft); color: #6EE7B7; border-color: var(--success-line); }
.alert.gold   { background: var(--gold-soft);    color: var(--gold-text);  border-color: var(--gold-line); }
[data-theme="light"] .alert.info   { color: #0369A1; }
[data-theme="light"] .alert.warn   { color: #92400E; }
[data-theme="light"] .alert.danger { color: #9F1239; }
[data-theme="light"] .alert.ok     { color: #065F46; }
[data-theme="light"] .alert.gold   { color: #854D0E; }

.stat-line { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.stat-line > div { display: flex; flex-direction: column; }
.stat-line b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.5px; }
.stat-line span { font-size: var(--fs-xs); color: var(--text-3); }

/* --------------------------------------------------------------------------
   23. 工具类
   -------------------------------------------------------------------------- */
.muted { color: var(--text-3); }
.sm { font-size: var(--fs-sm); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.bold { font-weight: 600; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 24px; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 8px; } .mb2 { margin-bottom: 16px; }
.flex { display: flex; } .between { justify-content: space-between; } .around { align-items: center; }
.gap1 { gap: 8px; } .gap2 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.hr { height: 1px; background: var(--line-2); margin: 16px 0; border: 0; }
.scroll-y { overflow-y: auto; }
.nowrap-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.pointer { cursor: pointer; }
.link { color: var(--brand-text); cursor: pointer; }
.link:hover { text-decoration: underline; }
code.k {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 1px 6px; font-family: var(--mono); font-size: 12px; color: var(--brand-text);
}

/* --------------------------------------------------------------------------
   24. 打印 / 导出
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .sidebar, .page-actions, .no-print { display: none !important; }
  .main { padding: 0; overflow: visible; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #DDD; break-inside: avoid; }
  .kpi { box-shadow: none; border-color: #DDD; }
}