/* ============================================================
   THEME A · 深 · 青松入基  (V3.3.0 可切换主题)
   ------------------------------------------------------------
   本文件 = V3.2.2 深色外壳叠加层 + 方案 A 配色。
   叠加层必须保留：纯净基线里 .modal/.timeline/.stat/.tab/.dropzone
   等约 28 处写死了白底，只有叠加层能把它们转成深色；方案 A 的
   变量覆写随后把「深空蓝」调成「青松入基」。
   加载顺序：app.css(基线) -> theme-a.css(本文件)
   卸载方式：换挂 theme-b.css 即可，不改动基线。
   ============================================================ */

/* ============================================================
   V3.2 外壳统一（深空蓝 · 与首页档位2同源）
   背景：侧边栏/登录页本就是深蓝，唯独内容区是白底浅灰 +
        首页通体深蓝 → 三种调性相撞（2026-09-30 截图确认）。
   策略：只覆写「外壳 + 内容区底色 + 组件表面」，加载顺序置于
        app.css 末尾，故无需改原文件，删除本段即完全回退。
        原始白色硬编码共 28 条，此处逐条对位覆盖（登录页除外，
        登录页本就是深色设计，不属内容区）。
   ============================================================ */
:root {
  --sk-bg:      radial-gradient(1100px 620px at 10% -4%, rgba(22,69,126,.92), transparent 60%),
                radial-gradient(900px 560px at 96% 100%, rgba(12,107,87,.50), transparent 62%),
                linear-gradient(158deg, #061229 0%, #0a1f42 52%, #071733 100%);
  --sk-card:    rgba(255,255,255,.072);
  --sk-card-2:  rgba(255,255,255,.095);
  --sk-ink:     #e8f1fb;
  --sk-ink-2:   #aec4db;
  --sk-ink-3:   #7b95b2;
  --sk-line:    rgba(120,190,255,.28);
  --sk-line-2:  rgba(120,190,255,.13);
  --sk-brand:   #5ac8fa;
  --sk-accent:  #2fd8a6;
  --sk-blur:    saturate(160%) blur(12px);
}

/* ---------- 1. 页面底色与文字 ---------- */
body { background: #061229; }
.main { background: var(--sk-bg); }
.content { background: transparent; color: var(--sk-ink); }

/* ---------- 2. 顶栏 ---------- */
.topbar {
  background: rgba(8,22,46,.78);
  border-bottom: 1px solid var(--sk-line-2);
  -webkit-backdrop-filter: var(--sk-blur);
  backdrop-filter: var(--sk-blur);
}
.topbar .title { color: var(--sk-ink); }
.topbar .crumb { color: var(--sk-ink-3); }
.topbar .btn { background: rgba(255,255,255,.08); color: var(--sk-ink); border-color: var(--sk-line-2); }
.topbar .btn:hover { background: rgba(255,255,255,.15); border-color: var(--sk-line); }
.user-chip { background: rgba(255,255,255,.08); border-color: var(--sk-line-2); color: var(--sk-ink); }
.user-chip:hover { border-color: var(--sk-line); box-shadow: 0 2px 10px rgba(90,200,250,.18); }
.user-chip .muted, .user-chip .small { color: var(--sk-ink-3); }

/* ---------- 3. 页头 ---------- */
.page-head h2 { color: var(--sk-ink); }
.page-head .desc { color: var(--sk-ink-2); }

/* ---------- 4. 卡片（原始 var(--card) 为 #fff） ---------- */
.card {
  background: var(--sk-card);
  border: 1px solid var(--sk-line-2);
  border-radius: 12px;
  -webkit-backdrop-filter: var(--sk-blur);
  backdrop-filter: var(--sk-blur);
  box-shadow: 0 4px 22px rgba(3,12,30,.32);
}
.card-head { border-bottom: 1px solid var(--sk-line-2); }
.card-head h3 { color: var(--sk-ink); }
.card-body { color: var(--sk-ink); }

/* ---------- 5. 统计卡（.stat / a.stat-click） ---------- */
.stat {
  background: var(--sk-card); border: 1px solid var(--sk-line-2);
  -webkit-backdrop-filter: var(--sk-blur); backdrop-filter: var(--sk-blur);
}
.stat:hover { border-color: var(--sk-line); }
a.stat-click.stat-active { background: rgba(90,200,250,.13); box-shadow: 0 0 0 2px var(--sk-brand) inset, 0 6px 20px rgba(3,12,30,.35); }
.stat .n, .stat b, .stat .v { color: var(--sk-ink); }
.stat .k, .stat .lbl, .stat .small { color: var(--sk-ink-3); }
.stat-go { color: var(--sk-ink-3); }

/* ---------- 6. 表格（真实类名是 table.tb） ---------- */
table.tb, .tbl { color: var(--sk-ink); }
table.tb thead th, .tbl thead th {
  background: rgba(255,255,255,.055); color: var(--sk-ink-2);
  border-bottom: 1px solid var(--sk-line); font-weight: 500;
}
table.tb tbody td, .tbl tbody td { border-bottom: 1px solid var(--sk-line-2); color: var(--sk-ink); }
table.tb tbody tr:hover, .tbl tbody tr:hover { background: rgba(255,255,255,.05); }
table.tb tr.unread td { background: rgba(239,159,39,.10); }
table.tb tr.tail-row td { background: rgba(255,255,255,.035); }
table.tb tr.tail-row:hover td { background: rgba(255,255,255,.07); }
table.tb tbody tr.overdue td { background: rgba(226,75,74,.12); }
table.tb tbody tr.overdue:hover td { background: rgba(226,75,74,.19); }
.empty { color: var(--sk-ink-3); }

/* ---------- 7. 子导航条 / 页签（.sub-bar / .tab） ---------- */
.sub-bar {
  background: var(--sk-card); border: 1px solid var(--sk-line-2);
  -webkit-backdrop-filter: var(--sk-blur); backdrop-filter: var(--sk-blur);
  box-shadow: 0 4px 18px rgba(3,12,30,.28);
}
.tab { background: rgba(255,255,255,.06); border-color: var(--sk-line-2); color: var(--sk-ink-2); }
.tab:hover { border-color: var(--sk-line); color: var(--sk-ink); text-decoration: none; }
.tab.on { background: linear-gradient(135deg, #1a7fd4, #14a37a); border-color: transparent; color: #fff; }
.tab.on:hover { color: #fff; }
a.more { color: var(--sk-brand); }
a.more:hover { color: #9adcff; }

/* ---------- 8. 按钮 ---------- */
.btn, .content .btn, .topbar .btn {
  background: rgba(255,255,255,.08); color: var(--sk-ink); border-color: var(--sk-line-2);
}
.btn:hover, .content .btn:hover { background: rgba(255,255,255,.15); border-color: var(--sk-line); color: var(--sk-ink); }
.btn.primary {
  background: linear-gradient(135deg, #1a7fd4, #14a37a);
  border-color: transparent; color: #fff;
}
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.danger { background: rgba(226,75,74,.18); color: #ffb3b1; border-color: rgba(226,75,74,.38); }
.btn.danger:hover { background: rgba(226,75,74,.28); color: #fff; }
.btn.sm { color: inherit; }

/* ---------- 9. 表单控件 ---------- */
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea,
.content input:not([type=checkbox]):not([type=radio]) {
  background: rgba(255,255,255,.07); color: var(--sk-ink); border: 1px solid var(--sk-line-2);
}
input:focus, select:focus, textarea:focus, .content input:focus {
  border-color: var(--sk-brand); box-shadow: 0 0 0 3.5px rgba(90,200,250,.15); background: rgba(255,255,255,.10);
}
input::placeholder, textarea::placeholder { color: var(--sk-ink-3); }
input[readonly], input:disabled, select:disabled { background: rgba(255,255,255,.035); color: var(--sk-ink-3); }
label, .field label, .content label { color: var(--sk-ink-2); }
.ro-line { background: rgba(255,255,255,.055); color: var(--sk-ink); border: 1px solid var(--sk-line-2); }

/* ---------- 10. 文字层级 ---------- */
.muted { color: var(--sk-ink-3); }
.sep { background: var(--sk-line-2); }
hr { border-color: var(--sk-line-2); }
.content a { color: var(--sk-brand); }
.mono, .code { color: #9adcff; }

/* ---------- 11. 提示条 ---------- */
.notice {
  background: rgba(90,200,250,.10); border: 1px solid rgba(90,200,250,.24);
  color: var(--sk-ink); border-radius: 10px;
}
.notice b, .notice strong { color: #fff; }

/* ---------- 12. 标签 ---------- */
.tag { background: rgba(255,255,255,.09); color: var(--sk-ink-2); border-color: var(--sk-line-2); }
.tag.brand { background: rgba(90,200,250,.16); color: #bfe8ff; }
.tag.ok { background: rgba(47,216,166,.15); color: #8cebca; }
.tag.danger { background: rgba(226,75,74,.17); color: #ffb3b1; }
.tag.warn { background: rgba(239,159,39,.17); color: #ffd79a; }

/* ---------- 13. 工具栏 / 其他面板 ---------- */
.toolbar { background: var(--sk-card); border-color: var(--sk-line-2); }
.dropzone { background: rgba(255,255,255,.045); border-color: var(--sk-line-2); color: var(--sk-ink-2); }
.preview-pane { background: rgba(255,255,255,.03); border-color: var(--sk-line-2); color: var(--sk-ink-2); }
.ds-box { background: rgba(255,255,255,.05); border-color: var(--sk-line-2); color: var(--sk-ink); }
.step-bar .step .n { background: rgba(255,255,255,.09); color: var(--sk-ink-2); }
.sys-btn:hover { background: rgba(255,255,255,.13); }

/* ---------- 14. 时间轴 ---------- */
.timeline { color: var(--sk-ink); }
.timeline li { border-left-color: var(--sk-line-2); }
.timeline li::before { background: var(--sk-brand); }
.timeline .t-head { color: var(--sk-ink); }
.timeline .t-meta { color: var(--sk-ink-3); }
.timeline .t-body { color: var(--sk-ink-2); }

/* ---------- 15. 描述列表 ---------- */
.dl { color: var(--sk-ink); }
.dl .k { color: var(--sk-ink-3); }
.dl .v { color: var(--sk-ink); }

/* ---------- 16. 弹窗 ---------- */
.modal, .modal-box, .modal-card {
  background: linear-gradient(158deg, #0b2246 0%, #08182f 100%);
  border: 1px solid var(--sk-line); color: var(--sk-ink);
  box-shadow: 0 24px 70px rgba(2,8,22,.68);
}
.modal-head { color: var(--sk-ink); border-bottom: 1px solid var(--sk-line-2); }
.modal-foot { border-top: 1px solid var(--sk-line-2); }
.modal-body { color: var(--sk-ink); }
.modal .x { color: var(--sk-ink-3); }

/* ---------- 17. 轻提示 ---------- */
.toast { background: rgba(10,28,56,.95); color: var(--sk-ink); border: 1px solid var(--sk-line-2); }

/* ---------- 18. 滚动条 ---------- */
.content ::-webkit-scrollbar-thumb { background: rgba(120,190,255,.30); }
.content ::-webkit-scrollbar-thumb:hover { background: rgba(120,190,255,.48); }
/* ============================================================
   PATCH 2（V3.2.2）—— 语义变量重定义 + 表格行 / 标签兜底

   起因：V3.2 只新增了 --sk-* 一套变量，却没有重定义原生的
        --brand-soft / --ok-soft / --info-soft / --grey-soft 等，
        于是凡引用这些变量的地方（.tag.info / .tag.grey /
        tr.tail-row …）在深色外壳下依然是浅色底。
        2026-09-30 用 tests/_probe_white.js 做 DOM 级扫描才暴露：
          · tr.overdue 整行 rgb(253,236,235)  面积 1178x59
          · .tag.grey / .tag.info 共 17 个亮底小标签
        （截图肉眼看「整体挺深」很容易漏掉这两类）

   策略：① 重定义 :root 语义变量 —— 治本，一处生效、全局跟随
        ② 仅对硬编码 hex 的表格行做显式覆盖 —— 变量管不到
   ============================================================ */

/* ---------- P2.1 语义变量：前景提亮、soft 底改半透明 ---------- */
:root {
  --brand:         #6fb3ff;
  --brand-2:       #5aa6f5;
  --brand-3:       #8fc6ff;
  --brand-soft:    rgba(90,200,250,.16);
  --brand-softer:  rgba(90,200,250,.08);

  --ink:    #e8f1fb;
  --ink-2:  #b6c9e0;
  --ink-3:  #8ba1be;

  --line:   rgba(120,190,255,.26);
  --line-2: rgba(120,190,255,.12);
  --bg:     #061229;
  --card:   rgba(255,255,255,.072);

  --ok:          #43c98d;
  --ok-soft:     rgba(63,185,138,.17);
  --warn:        #e8b04a;
  --warn-soft:   rgba(224,168,60,.17);
  --danger:      #ff7b72;
  --danger-soft: rgba(226,75,74,.17);
  --info:        #6ea8ff;
  --info-soft:   rgba(110,168,255,.17);
  --grey-soft:   rgba(150,170,200,.16);
}

/* ---------- P2.2 表格行状态（原始为硬编码浅色，变量覆盖不到） ---------- */
table.tb tbody tr.overdue,
table.tb tbody tr.overdue td {
  background: rgba(226,75,74,.14);
  color: var(--sk-ink);
}
table.tb tbody tr.overdue:hover,
table.tb tbody tr.overdue:hover td {
  background: rgba(226,75,74,.22);
}
table.tb tr.unread td {
  background: rgba(90,200,250,.12);
  font-weight: 600;
  color: var(--sk-ink);
}
tr.tail-row td {
  background: rgba(90,200,250,.09);
  color: var(--sk-ink-2);
}
tr.tail-row:hover td {
  background: rgba(90,200,250,.15);
}
table.tb tbody tr:hover td {
  background: rgba(120,190,255,.10);
}

/* ---------- P2.3 标签家族兜底（变量已改，此处防优先级意外） ---------- */
.tag {
  background: var(--grey-soft);
  color: var(--sk-ink-2);
}
.tag.brand  { background: var(--brand-soft);  color: #8fc6ff; }
.tag.ok     { background: var(--ok-soft);     color: #5ad6a0; }
.tag.warn   { background: var(--warn-soft);   color: #f0c274; }
.tag.danger { background: var(--danger-soft); color: #ff8b81; }
.tag.info   { background: var(--info-soft);   color: #7fb4ff; }
.tag.grey   { background: var(--grey-soft);   color: #9db2cc; }

/* ---------- P2.4 可读性修正：红徽标白字对比度 3.82:1 → 5.3:1 ---------- */
/* 实测（tests/_probe_contrast.js）：#e05252 底 + 11px 白字仅 3.82:1，
   WCAG AA 对正文要求 4.5:1。加深到 #c23b3b 后约 5.3:1，视觉上依旧醒目。
   铃铛徽标 #bell-badge 是 core.js 内联 style，已在源码里同步改色。 */
.nav-item .badge { background: #c23b3b; color: #fff; }
/* ============================================================
   PATCH 3（V3.2.2）—— 登录页统一深色

   更正一处早先的误判：V3.2 overlay 注释里写过
   「登录页本就是深色设计，不属内容区」，据此把登录页排除在外。
   2026-09-30 用 DOM 扫描实测发现是错的 —— 深色的只是
   .login-wrap 的全屏背景渐变，登录卡片 .login-card 本身是
   880x556 的纯白卡（bg=rgb(255,255,255)，白色像素占整页 8.3%），
   右侧表单区连输入框、头像圈全是浅底。
   结果就是：登录页白卡 → 登录后内容区深蓝，观感断裂。

   本补丁只动「卡片与右侧表单区」，左侧 .login-left 品牌区
   本就是深蓝渐变，保持不变。
   ============================================================ */

/* ---------- P3.1 卡片：白卡 → 深空蓝玻璃卡 ---------- */
.login-card {
  background: linear-gradient(150deg, rgba(13,34,68,.94) 0%, rgba(8,22,46,.97) 100%);
  border: 1px solid rgba(120,190,255,.18);
  box-shadow: 0 40px 90px rgba(2,12,32,.55), 0 12px 30px rgba(2,12,32,.30);
}

/* ---------- P3.2 右侧表单区：浅底深字 → 深底亮字 ---------- */
.login-right h2        { color: var(--sk-ink); }
.login-subtitle        { color: var(--sk-ink-3); }

.login-right .field label { color: var(--sk-ink-2); }
.login-right .field input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(120,190,255,.22);
  color: var(--sk-ink);
}
.login-right .field input::placeholder { color: var(--sk-ink-3); opacity: 1; }
.login-right .field input:hover { border-color: rgba(120,190,255,.40); }
.login-right .field input:focus {
  border-color: var(--sk-brand);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px rgba(90,200,250,.16);
}

/* 头像圈：浅底深蓝字 → 深底亮字 */
.login-avatar      { background: rgba(255,255,255,.10); color: var(--sk-brand); }
.login-avatar-txt  { color: var(--sk-ink); }

/* 记住我 / 忘记密码 / 电子签名声明 */
.login-remember        { color: var(--sk-ink-2); }
.login-remember input  { accent-color: var(--sk-brand); }
.login-row a           { color: var(--sk-brand); }
.login-esig            { color: var(--sk-ink-3); }
.pwd-eye               { color: var(--sk-ink-3); }
.pwd-eye:hover         { color: var(--sk-ink); }

/* 登录主按钮：原渐变偏暗，提亮并统一到 --sk 色系 */
.login-right .btn.primary.lg {
  background: linear-gradient(135deg, #1a7fd4 0%, #14a37e 100%);
  border: 1px solid rgba(120,190,255,.28);
  box-shadow: 0 10px 24px rgba(14,120,110,.30);
}
.login-right .btn.primary.lg:hover {
  box-shadow: 0 13px 28px rgba(14,120,110,.42);
}

:root{
  --sk-bg:linear-gradient(160deg,#04222c 0%,#06304a 100%); --sk-card:rgba(125,235,215,.055);
  --sk-ink:#e6f5f2; --sk-ink-2:#accbc6; --sk-ink-3:#a9ccc7;
  --sk-line:rgba(125,235,215,.20); --sk-line-2:rgba(125,235,215,.11);
  --sk-brand:#5fe3c8; --sk-accent:#34d399;
}
:root{
  --brand:#5fe3c8; --brand-2:#2fb8a8; --brand-3:#7ef0d2;
  --brand-soft:rgba(95,227,200,.16); --brand-softer:rgba(95,227,200,.09);
  --ink:#e6f5f2; --ink-2:#accbc6; --ink-3:#a9ccc7;
  --line:rgba(125,235,215,.20); --line-2:rgba(125,235,215,.11); --bg:linear-gradient(160deg,#04222c 0%,#06304a 100%); --card:rgba(125,235,215,.055);
  --ok:#4add9b; --ok-soft:rgba(67,201,141,.16); --warn:#f6bb4e; --warn-soft:rgba(232,176,74,.16);
  --danger:#ffb2a5; --danger-soft:rgba(255,123,114,.16); --info:#80ceff; --info-soft:rgba(111,179,255,.16);
  --grey-soft:rgba(160,190,190,.16);
  --grad-brand:linear-gradient(135deg,#0f8666 0%,#0b7171 100%);
}
.hm.t1{--hm-bg:radial-gradient(900px 520px at 12% 8%,#0d5f5a,transparent 62%),radial-gradient(700px 460px at 88% 92%,#0a4a6e,transparent 60%),linear-gradient(160deg,#04222c 0%,#06304a 100%);--hm-card:rgba(125,235,215,.055);--hm-ink:#e6f5f2;--hm-ink2:#accbc6;--hm-ink3:#a9ccc7;--hm-line:rgba(125,235,215,.22);--hm-line2:rgba(125,235,215,.11);--hm-brand:#5fe3c8;--hm-glow:rgba(95,227,200,.30);--hm-accent:#34d399}
.hm.t2{--hm-bg:radial-gradient(900px 520px at 12% 8%,#0d5f5a,transparent 62%),radial-gradient(700px 460px at 88% 92%,#0a4a6e,transparent 60%),linear-gradient(160deg,#04222c 0%,#06304a 100%);--hm-card:rgba(125,235,215,.055);--hm-ink:#e6f5f2;--hm-ink2:#accbc6;--hm-ink3:#a9ccc7;--hm-line:rgba(125,235,215,.22);--hm-line2:rgba(125,235,215,.11);--hm-brand:#5fe3c8;--hm-glow:rgba(95,227,200,.30);--hm-accent:#34d399}
.hm.t3{--hm-bg:radial-gradient(900px 520px at 12% 8%,#0d5f5a,transparent 62%),radial-gradient(700px 460px at 88% 92%,#0a4a6e,transparent 60%),linear-gradient(160deg,#04222c 0%,#06304a 100%);--hm-card:rgba(125,235,215,.055);--hm-ink:#e6f5f2;--hm-ink2:#accbc6;--hm-ink3:#a9ccc7;--hm-line:rgba(125,235,215,.22);--hm-line2:rgba(125,235,215,.11);--hm-brand:#5fe3c8;--hm-glow:rgba(95,227,200,.30);--hm-accent:#34d399}
.sidebar{background:linear-gradient(180deg,#04222c 0%,#06304a 100%);color:#cfeae4}
.nav-item.active{background:linear-gradient(90deg,rgba(18,166,126,.55),rgba(12,112,153,.42))}
.topbar{background:rgba(6,40,58,.86);border-bottom-color:rgba(125,235,215,.18)}
.sidebar .brand small{color:#cfeae4}
.side-foot{color:inherit;opacity:.72}
table.tb thead th,.tbl thead th{background:rgba(125,235,215,.07);color:#a6c4bf}
body{background:linear-gradient(160deg,#04222c 0%,#06304a 100%)}
html{background:#06304a}
.nav-item .badge{background:#c23b3b;color:#fff}
.tag{background:rgba(160,190,190,.16);color:#accbc6}
.tag.brand{background:rgba(95,227,200,.16);color:#5fe3c8}
.tag.ok{background:rgba(67,201,141,.16);color:#4add9b}
.tag.warn{background:rgba(232,176,74,.16);color:#f6bb4e}
.tag.danger{background:rgba(255,123,114,.16);color:#ffb2a5}
.tag.info{background:rgba(111,179,255,.16);color:#80ceff}
.tag.grey{background:rgba(160,190,190,.16);color:#a9ccc7}
.tagx.bad{background:rgba(255,123,114,.20);color:#ffa49c}
.hm-badge.mgr{background:transparent;color:#65f1d4;box-shadow:inset 0 0 0 1px #5fe3c8}
table.tb tbody tr.overdue,table.tb tbody tr.overdue td{background:rgba(226,75,74,.14);color:#e6f5f2}
table.tb tbody tr.overdue:hover,table.tb tbody tr.overdue:hover td{background:rgba(226,75,74,.22)}
table.tb tr.unread td{background:rgba(95,227,200,.16);color:#e6f5f2;font-weight:600}
tr.tail-row td{background:rgba(95,227,200,.09);color:#accbc6}
tr.tail-row:hover td{background:rgba(95,227,200,.16)}
table.tb tbody tr:hover td{background:rgba(125,235,215,.11)}
.btn.primary{background:var(--grad-brand);border:1px solid transparent}
.btn.primary:hover{filter:brightness(1.10)}
.user-chip .av{background:var(--grad-brand)}
.login-wrap{background:radial-gradient(640px 480px at 12% 14%,rgba(95,227,200,.16),transparent 68%),radial-gradient(720px 540px at 88% 86%,rgba(67,201,141,.16),transparent 66%),linear-gradient(160deg,#04222c 0%,#06304a 100%)}
.login-card{background:linear-gradient(150deg,rgba(125,235,215,.055) 0%,rgba(95,227,200,.09) 100%);border:1px solid rgba(125,235,215,.20);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.login-left{background:linear-gradient(135deg,#0f8666 0%,#0b7171 100%)}
.login-right h2{color:#e6f5f2}
.login-subtitle,.login-esig{color:#accbc6}
.login-right .field label{color:#accbc6}
.login-right .field input{background:rgba(95,227,200,.09);border-color:rgba(125,235,215,.20);color:#e6f5f2}
.login-avatar{background:rgba(95,227,200,.16);color:#5fe3c8}
.login-avatar-txt{color:#5fe3c8}
.login-eyebrow{color:#5fe3c8}
.login-meta,.login-footer{color:#a9ccc7}
.login-remember{color:#accbc6}
.login-avatar-ring{background:linear-gradient(135deg,#0f8666 0%,#0b7171 100%)}