/* ============================================================
   钢材开单系统 · 深色工业数据驾驶舱主题（2026-09-10 UI 换肤）
   规范来源：《钢材ERP_UI设计提示词》按本系统结构适配
   - 70% 深蓝灰底 + 20% 蓝色系 + 10% 状态色点缀
   - 发光克制：仅数字/选中边框/指示灯带微弱辉光
   - 零 JS 逻辑改动：仅 CSS 层；EP 组件经 --el-* 变量整体换肤
   ============================================================ */

/* ---------- 1) Element Plus 全局变量覆写（深色调色板） ---------- */
:root {
  color-scheme: dark; /* 原生控件（日期/滚动条）同步深色 */

  /* 主色：青（发光主色） */
  --el-color-primary: #06b6d4;
  --el-color-primary-light-3: #0f8ba3;
  --el-color-primary-light-5: #0b6478;
  --el-color-primary-light-7: #084453;
  --el-color-primary-light-8: #073644;
  --el-color-primary-light-9: #062834;
  --el-color-primary-dark-2: #0593ad;

  /* 状态色 */
  --el-color-success: #10b981;
  --el-color-success-light-3: #0e8f71;
  --el-color-success-light-5: #0b6b56;
  --el-color-success-light-7: #084740;
  --el-color-success-light-8: #073933;
  --el-color-success-light-9: #062b27;
  --el-color-success-dark-2: #0c8767;

  --el-color-warning: #f59e0b;
  --el-color-warning-light-3: #c4801c;
  --el-color-warning-light-5: #935d1a;
  --el-color-warning-light-7: #613c17;
  --el-color-warning-light-8: #4a2d15;
  --el-color-warning-light-9: #332010;
  --el-color-warning-dark-2: #c47e0d;

  --el-color-danger: #ef4444;
  --el-color-error: #ef4444;
  --el-color-danger-light-3: #bd3c3f;
  --el-color-danger-light-5: #8c2e32;
  --el-color-danger-light-7: #5a2025;
  --el-color-danger-light-8: #421a1f;
  --el-color-danger-light-9: #2b1316;
  --el-color-danger-dark-2: #c73838;
  --el-color-error-light-3: #bd3c3f;
  --el-color-error-light-5: #8c2e32;
  --el-color-error-light-7: #5a2025;
  --el-color-error-light-8: #421a1f;
  --el-color-error-light-9: #2b1316;
  --el-color-error-dark-2: #c73838;

  --el-color-info: #3b82f6;
  --el-color-info-light-3: #3068c4;
  --el-color-info-light-5: #244c91;
  --el-color-info-light-7: #18315e;
  --el-color-info-light-8: #132548;
  --el-color-info-light-9: #0d1a31;
  --el-color-info-dark-2: #3269cc;

  /* 背景 */
  --el-bg-color: #131c2b;
  --el-bg-color-page: #0d1117;
  --el-bg-color-overlay: #1a2434;

  /* 文字（2026-09-22 对比度治理：placeholder/disabled 由过暗提亮，满足 ≥4.5:1） */
  --el-text-color-primary: #f1f5f9;
  --el-text-color-regular: #cbd5e1;
  --el-text-color-secondary: #94a3b8;
  --el-text-color-placeholder: #8aa0b8;   /* 原 #64748b(≈2.9:1) → 提亮到 ≈5.5:1 */
  --el-text-color-disabled: #7c8aa0;       /* 原 #475569(≈2.2:1) → 提亮到 ≈4.9:1 */

  /* 边框 */
  --el-border-color: #33415a;
  --el-border-color-light: #2b3850;
  --el-border-color-lighter: #243145;
  --el-border-color-extra-light: #1e2a3c;
  --el-border-color-dark: #3d4d68;
  --el-border-color-darker: #465876;

  /* 填充 */
  --el-fill-color: #1e2a3c;
  --el-fill-color-light: #243349;
  --el-fill-color-lighter: #202d42;
  --el-fill-color-extra: #1b2738;
  --el-fill-color-dark: #293a52;
  --el-fill-color-darker: #2e405a;
  --el-fill-color-blank: #131c2b;

  /* 表格（表头/悬停行/当前行） */
  --el-table-header-bg-color: #16202e;
  --el-table-row-hover-bg-color: #1e2a3c;
  --el-table-current-row-bg-color: #1e2a3c;

  /* 遮罩/阴影 */
  --el-mask-color: rgba(2, 6, 16, .7);
  --el-mask-color-extra-light: rgba(2, 6, 16, .35);
  --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .32);
  --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, .24);
  --el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, .18);

  /* 禁用态 */
  --el-disabled-bg-color: #1b2738;
  --el-disabled-text-color: #7c8aa0;
  --el-disabled-border-color: #243145;
}

/* ---------- 2) 全局页面底色（深炭黑→深海蓝渐变） ---------- */
body {
  margin: 0;
  min-height: 100vh;
  /* !important：覆盖部分页面内联 style 里写死的浅色 body（如采购发票/物流库），
     从源头杜绝「点开子栏目整页白闪」；新增页面不得再硬编码浅色 body。 */
  background: linear-gradient(160deg, #0d1117 0%, #131c2b 100%) !important;
  background-attachment: fixed;
  /* !important：覆盖部分页面内联 body{color:#2c3e50} 等浅色页遗留的深字（否则深字压深底几乎不可见） */
  color: #cbd5e1 !important;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 3) EP 组件深色深修（变量覆盖不到的死角） ---------- */
/* 加载遮罩：EP 默认白底，强制深色 */
.el-loading-mask { background-color: rgba(13, 17, 23, .72); }
/* 表格：固定列/斑马纹/表头兜底 */
.el-table { background-color: transparent; }
.el-table tr, .el-table th.el-table__cell { background-color: var(--el-bg-color); }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--el-fill-color-lighter); }
.el-table__body-wrapper::-webkit-scrollbar,
.el-table__inner-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.el-table__inner-wrapper::-webkit-scrollbar-thumb { background: #33415a; border-radius: 4px; }
.el-table__body-wrapper::-webkit-scrollbar-track,
.el-table__inner-wrapper::-webkit-scrollbar-track { background: transparent; }
/* 卡片/弹窗/消息框 */
.el-card { --el-card-bg-color: rgba(30, 41, 59, .6); border: 1px solid rgba(34, 211, 238, .14); backdrop-filter: blur(6px); }
.el-dialog { --el-dialog-bg-color: #16202e; border: 1px solid rgba(148, 163, 184, .14); }
.el-message-box { --el-messagebox-bg-color: #16202e; border: 1px solid rgba(148, 163, 184, .14); }
/* 分页器 */
.el-pagination { --el-pagination-bg-color: transparent; --el-pagination-button-disabled-bg-color: #1b2738; }
/* 全局滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #33415a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #465876; }
::-webkit-scrollbar-track { background: transparent; }
/* 原生 date/select 控件文字色 */
input[type="date"], select { color: #cbd5e1; background-color: #1a2434; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); }

/* ---------- 3.1) 页面内联浅色卡片/区域兜底（强制深色，防点开即白闪） ----------
   部分页面（财务账龄/明细/单据等）在自身 <style> 里写死了浅色卡片背景
   (#fafcff / #fff / #f5f7fa)。这些内联样式位于 nav-shell.css 之后、会覆盖上面的深色，
   导致点开该类子栏目时露白闪。这里统一兜底为深色，且对新增页面同样生效（防复发）。
   仅覆盖「背景色」类属性，不动任何布局/逻辑。 */
.stat-card,
.statement-head { background-color: #1b2738 !important; border-color: #33415a !important; }
.total-row td { background-color: #1b2738 !important; }
.rate-row .rate-item { background-color: #16202e !important; }
/* 表格白底兜底：物流库等页面写死 .el-table{background:#fff}，强制透明沿用深色表体 */
.el-table { background-color: transparent !important; }

/* ---------- 3.2) 采购/库存/销售 列表·表单页 布局深色兜底（强制覆盖页面内联浅色） ----------
   这些页（采购订单/进货/退货、销售出/退/订/发票/对账单/报表、库存余额等）自身 <style>
   仍写死浅色：.grid-area/#fff、.toolbar/#f0f4fa、.form-area/#e1f0ff、.footer-bar/#f0f4fa、
   .link-area/#fee、.app-wrap/#e8eef5、.badge/#fff+金边、.card/#f7f9fc，以及 EP 表头浅色。
   内联样式位于 nav-shell.css 之后、会覆盖上面的深色，导致点开子栏目右页露白。
   此处统一兜底为深色 + 保留语义（草稿角标用深色金系），且对新增页面同样生效（防复发）。
   仅覆盖「背景/边框/文字色」，不动任何布局/逻辑。 */
.grid-area,
.app-wrap { background-color: transparent !important; }
.toolbar,
.footer-bar { background-color: #1b2738 !important; border-color: #33415a !important; }
.form-area { background-color: #16202e !important; border-color: #33415a !important; }
.link-area { background-color: rgba(245, 108, 108, .12) !important; border-color: rgba(245, 108, 108, .4) !important; }
/* 标题角标：保留「草稿」金系语义，改深色金（原 #fff+#d2a861+#5a4400） */
.badge { background: rgba(210, 168, 97, .16) !important; border: 1px solid rgba(210, 168, 97, .45) !important; color: #e0c089 !important; }
/* KPI/信息卡片兜底（部分页面 .card 仍为浅色，如库存余额） */
.card { background: rgba(30, 41, 59, .6) !important; border: 1px solid rgba(34, 211, 238, .14) !important; color: #cbd5e1 !important; }
/* 表格表头兜底（EP 默认浅色，强制深色；同时上面 :root 已设 --el-table-header-bg-color） */
.el-table th.el-table__cell { background-color: #16202e !important; }

/* ---------- 3.3) 全站文字对比度兜底（2026-09-22 对比度治理） ----------
   根因：部分页面自身 <style> 写死浅色文字色（如标签/表头用 #2c3e50 深灰），而本主题是深底。
   §3.2 已用 !important 把 body/卡片背景强制深色，但内联文字色仍深 → 文字几乎不可见（r≈1.5）。
   以下按「语义角色」统一兜底为深主题文字色，仅改 color，不动背景/布局；对新增页面同样生效（防复发）。
   注意：切勿在 .cell 上用 !important 强改颜色——会误杀表格内红色「逾期」等状态色，故只针对
   表头、标签、标题等「不可能出现状态色」的语义角色。 */
/* ① 主按钮：仅「实心+启用」态亮青底配白字对比度仅 2.43:1（「新增/保存」看不清）→ 改深字。
   link/plain/disabled 态按钮无青色填充（透明/深底），深字会反成不可见，故排除这三类。 */
.el-button--primary:not(.is-link):not(.is-plain):not(.is-disabled),
.el-button--primary:not(.is-link):not(.is-plain):not(.is-disabled):focus,
.el-button--primary:not(.is-link):not(.is-plain):not(.is-disabled):hover,
.el-button--primary:not(.is-link):not(.is-plain):not(.is-disabled):active { color: #06222a !important; font-weight: 600; }
.el-button--primary:not(.is-link):not(.is-plain):not(.is-disabled) i,
.el-button--primary:not(.is-link):not(.is-plain):not(.is-disabled) svg { color: #06222a !important; }
/* ② 表单标签 / 通用 .lbl（采购·销售·库存列表·表单页遗留深灰标签字） */
.lbl, .label,
.form-row .lbl, .form-area .lbl,
.el-form-item__label,
.el-descriptions__label { color: var(--el-text-color-regular) !important; }
/* ③ 表格表头文字（内联写死 #2c3e50 的深灰表头字） */
.el-table th.el-table__cell,
.el-table th.el-table__cell .cell { color: var(--el-text-color-primary) !important; }
/* ④ 卡片/面板标题兜底 */
.card .title, .panel-title, .section-title,
.grid-area .title, .form-area .title { color: var(--el-text-color-primary) !important; }
/* ⑤ 标签（el-tag）：深主题下强制「彩色文字 + 半透明深底」，杜绝「青字压青底」等
   同色 fg/bg（ratio=1 完全不可见），同时保留各标签的类型文字色语义。仅改背景/边框，不动文字色。 */
.el-tag {
  background-color: color-mix(in srgb, currentColor 14%, #16202e) !important;
  border-color: color-mix(in srgb, currentColor 38%, transparent) !important;
}

/* ============================================================
   全局左侧导航壳（五主页面：基础档案/采购/库存/销售/财务）
   以下选择器结构与换肤前完全一致，仅调整视觉配色
   ============================================================ */
#nav-shell {
  position: fixed; left: 0; top: 0; bottom: 0; width: 220px; z-index: 100;
  background: #0f1620; color: #94a3b8; overflow-y: auto; overflow-x: hidden;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size: 13px;
  border-right: 1px solid rgba(148, 163, 184, .1);
  box-shadow: 1px 0 12px rgba(0, 0, 0, .35);
}
#nav-shell::-webkit-scrollbar { width: 6px; }
#nav-shell::-webkit-scrollbar-thumb { background: #243145; border-radius: 3px; }

#nav-shell .ns-logo {
  padding: 14px 16px; font-size: 15px; font-weight: 700; color: #f1f5f9;
  background: #0b121c; border-bottom: 1px solid rgba(148, 163, 184, .08); letter-spacing: 1px;
}
#nav-shell .ns-logo small {
  display: block; font-size: 12px; font-weight: 400; color: #8aa0b8;
  margin-top: 3px; letter-spacing: 0;
}
/* 品牌青色指示点（微弱辉光，克制） */
#nav-shell .ns-logo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee; margin-right: 8px; vertical-align: 1px;
  box-shadow: 0 0 8px rgba(34, 211, 238, .55);
}

/* 顶部固定入口：首页仪表盘（不随模块过滤，始终置顶） */
#nav-shell .ns-dash-link {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 12px 6px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: #e2f7fb;
  background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(59, 130, 246, .10));
  border: 1px solid rgba(34, 211, 238, .30); border-radius: 9px;
  box-shadow: 0 0 12px rgba(34, 211, 238, .10);
  transition: background .15s, box-shadow .15s, border-color .15s;
}
#nav-shell .ns-dash-link:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, .26), rgba(59, 130, 246, .16));
  color: #ffffff; border-color: rgba(34, 211, 238, .5);
}
#nav-shell .ns-dash-link.cur {
  border-color: #22d3ee; color: #fff;
  box-shadow: 0 0 16px rgba(34, 211, 238, .32);
}
#nav-shell .ns-dash-ico { display: inline-block; width: 18px; text-align: center; color: #22d3ee; font-size: 15px; }

/* ============ 6 模块·首页仪表盘风格卡片（2026-09-10）============
   每个模块按 data-key 注入强调色 --c（与 dashboard.html KPI 调色板一致）：
   archive=青 / purchase=蓝 / stock=绿 / sale=橙 / fin=紫。
   卡片化：渐变玻璃 + 左侧 3px 强调竖条 + 展开后与子面板拼成一张连通卡。 */
#nav-shell .ns-mod[data-key="archive"]  { --c: #22d3ee; }
#nav-shell .ns-mod[data-key="purchase"] { --c: #3b82f6; }
#nav-shell .ns-mod[data-key="stock"]    { --c: #10b981; }
#nav-shell .ns-mod[data-key="sale"]     { --c: #f59e0b; }
#nav-shell .ns-mod[data-key="fin"]      { --c: #a855f7; }

#nav-shell .ns-mod { margin-bottom: 2px; }
#nav-shell .ns-mod-hd {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin: 6px 10px 0; padding: 9px 10px 9px 11px;
  background: linear-gradient(150deg, rgba(30,41,59,.55), rgba(17,25,38,.55));
  border: 1px solid rgba(148,163,184,.10);
  border-left: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer; user-select: none; position: relative;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#nav-shell .ns-mod-hd:hover {
  background: linear-gradient(150deg, rgba(30,41,59,.78), rgba(17,25,38,.78));
  border-color: color-mix(in srgb, var(--c, #94a3b8) 30%, rgba(148,163,184,.22));
  border-left-color: var(--c, #94a3b8);
}
#nav-shell .ns-mod.active > .ns-mod-hd {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--c, #22d3ee) 18%, transparent),
              color-mix(in srgb, var(--c, #22d3ee) 6%, transparent));
  border-color: color-mix(in srgb, var(--c, #22d3ee) 45%, rgba(148,163,184,.18));
  border-left-color: var(--c, #22d3ee);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--c, #22d3ee) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--c, #22d3ee) 8%, transparent);
}
#nav-shell .ns-mod.open > .ns-mod-hd {
  border-radius: 10px 10px 0 0;
  border-bottom-color: transparent;
}
#nav-shell .ns-mod.open.active > .ns-mod-hd { border-bottom-color: transparent; }

#nav-shell .ns-name {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #e2e8f0; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#nav-shell .ns-mod.active .ns-name { color: #f1f5f9; }
#nav-shell .ns-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--c, #475569) 30%, #0b121c),
              color-mix(in srgb, var(--c, #475569) 12%, #0b121c));
  border: 1px solid color-mix(in srgb, var(--c, #475569) 40%, transparent);
  color: var(--c, #94a3b8);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c, #475569) 18%, transparent);
}
#nav-shell .ns-mod.active .ns-ico {
  box-shadow: 0 0 14px color-mix(in srgb, var(--c, #22d3ee) 40%, transparent);
}

/* 右侧徽章+箭头容器：直接子 span 自动命中，无须 JS 改类 */
#nav-shell .ns-mod-hd > span:last-child { display: flex; align-items: center; gap: 7px; flex: none; }
#nav-shell .ns-badge {
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 2px 7px; border-radius: 999px;
  color: var(--c, #94a3b8);
  background: color-mix(in srgb, var(--c, #475569) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #475569) 28%, transparent);
}
#nav-shell .ns-arrow { display: inline-block; font-size: 9px; color: #64748b; transition: transform .15s; flex: none; }
#nav-shell .ns-mod.open .ns-arrow { transform: rotate(90deg); color: #94a3b8; }
#nav-shell .ns-mod.active .ns-arrow { color: #cbd5e1; }

/* 子栏目面板：与 header 拼成一张展开卡（圆角下 + 共用边线） */
#nav-shell .ns-subs {
  display: none;
  margin: 0 10px 4px;
  background: linear-gradient(180deg, rgba(22,32,46,.70), rgba(13,19,28,.70));
  border: 1px solid rgba(148,163,184,.10);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 4px 6px 6px;
}
#nav-shell .ns-mod.open .ns-subs { display: block; }
#nav-shell .ns-mod.open.active .ns-subs { border-color: color-mix(in srgb, var(--c, #22d3ee) 30%, rgba(148,163,184,.18)); }

#nav-shell .ns-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; margin: 1px 0;
  color: #94a3b8; text-decoration: none; font-size: 12.5px;
  border-left: 2px solid transparent; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#nav-shell .ns-sub:hover { background: rgba(148,163,184,.06); color: #f1f5f9; }
/* 子页选中：青色（与模块强调色解耦 —— 模块用 --c，子页用青色作为「当前页」统一指示） */
#nav-shell .ns-sub.cur {
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(34,211,238,.04));
  color: #f1f5f9; border-left-color: #22d3ee;
  box-shadow: inset 0 0 8px rgba(34,211,238,.06);
}
#nav-shell .ns-sub .no { display: inline-block; width: 18px; color: #7c8aa0; font-size: 12px; flex: none; }

/* ---------- 栏目拖动排序 ---------- */
/* 按住/长按后上下拖动。触屏要禁掉系统长按菜单与文字选中，否则长按会弹菜单、拖不动。 */
#nav-shell .ns-sub {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* 被拖起的项：留在原位充当「占位」，半透明 + 虚线框 */
#nav-shell .ns-sub.ns-dragging {
  opacity: .45;
  background: #131c2b;
  border-left-color: #22d3ee;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .45);
}
/* 插入位置指示线 */
#nav-shell .ns-drop-line {
  height: 0;
  margin: 1px 0;
  border-top: 2px solid #22d3ee;
  box-shadow: 0 0 6px rgba(34, 211, 238, .8);
  pointer-events: none;
}
/* 拖动期间：光标提示 + 禁掉整页文字选中，避免拖出蓝色选区 */
body.ns-dragging-on,
body.ns-dragging-on * { cursor: grabbing !important; }
body.ns-dragging-on { -webkit-user-select: none; user-select: none; }
/* 保存失败提示（2s 后自动移除） */
#nav-shell .ns-order-tip {
  padding: 4px 10px; margin: 4px 8px 0; font-size: 11px;
  color: #f87171; background: #2b1316; border-left: 3px solid #ef4444;
}

/* 挂了导航壳的页面：整体右移 + 顶部留出全局栏高度，旧的平铺顶部导航由侧边栏取代 */
body.nav-shell-on { margin-left: 220px !important; margin-top: 60px !important; }
body.nav-shell-on > .top-nav,
body.nav-shell-on > nav.top-nav { display: none !important; }

/* ---------- 顶部全局栏（搜索 + 通知 + 用户菜单） ---------- */
#ns-topbar {
  position: fixed; top: 0; left: 220px; right: 0; height: 60px; z-index: 900;
  background: rgba(13, 19, 28, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  display: flex; align-items: center; padding: 0 20px;
}
#ns-topbar .ns-topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#ns-topbar .ns-search { position: relative; display: flex; align-items: center; width: min(440px, 42%); }
#ns-topbar .ns-search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  background: rgba(30, 41, 59, .7); border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px; color: #cbd5e1; font-size: 13px; outline: none;
}
#ns-topbar .ns-search input::placeholder { color: #64748b; }
#ns-topbar .ns-search input:focus { border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34, 211, 238, .15); }
#ns-topbar .ns-search-ico { position: absolute; left: 11px; color: #64748b; font-size: 16px; pointer-events: none; }
#ns-topbar .ns-topbar-right { display: flex; align-items: center; gap: 18px; }
#ns-topbar .ns-bell, #ns-topbar .ns-user {
  position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #cbd5e1;
}
#ns-topbar .ns-bell-ico { font-size: 18px; line-height: 1; }
#ns-topbar .ns-bell-dot {
  position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, .7);
}
#ns-topbar .ns-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none;
}
#ns-topbar .ns-user-name { font-size: 13px; color: #e2e8f0; }
#ns-topbar .ns-user-arrow { font-size: 10px; color: #64748b; transition: transform .15s; }
#ns-topbar .ns-user.open .ns-user-arrow { transform: rotate(180deg); }
#ns-topbar .ns-pop {
  position: absolute; top: 44px; right: 0; min-width: 250px; z-index: 1000;
  background: rgba(17, 25, 38, .98); border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); padding: 8px;
}
#ns-topbar .ns-pop[hidden] { display: none; }
#ns-topbar .ns-pop-hd {
  padding: 6px 10px 8px; font-size: 12px; color: #64748b;
  border-bottom: 1px solid rgba(148, 163, 184, .1); margin-bottom: 4px;
}
#ns-topbar .ns-pop-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
#ns-topbar .ns-pop-list li {
  padding: 8px 10px; font-size: 12.5px; color: #cbd5e1; line-height: 1.5;
  border-bottom: 1px solid rgba(148, 163, 184, .06);
}
#ns-topbar .ns-pop-list li:last-child { border-bottom: none; }
#ns-topbar .ns-pop-item { display: block; padding: 9px 12px; font-size: 13px; color: #cbd5e1; text-decoration: none; border-radius: 6px; }
#ns-topbar .ns-pop-item:hover { background: rgba(148, 163, 184, .08); color: #fff; }
#ns-topbar .ns-pop-user-hd {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .1); margin-bottom: 4px;
}
#ns-topbar .ns-avatar-lg {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none;
}
#ns-topbar .ns-pop-user-name { font-size: 14px; color: #f1f5f9; }
#ns-topbar .ns-pop-user-role { font-size: 11px; color: #64748b; }
[v-cloak] { display: none; }

/* 管理员专属：侧栏底部「系统管理」 —— 与基础档案同构（2026-09-10）
   完全复用 .ns-mod / .ns-mod-hd / .ns-name / .ns-ico / .ns-arrow / .ns-subs 六大样式，
   仅追加 ① data-key="admin" → 红色 --c ② 子项 .ns-sub-danger 红色危险强调。
   点击/折叠/箭头旋转/默认展开 全部由 .ns-mod 通用 CSS 接管，零特例。
   注：用 .ns-sub-danger 而非 .ns-sub 是为了 initDrag 不把它纳为可拖排序项（admin 只有 1 项无意义）。 */
#nav-shell .ns-mod[data-key="admin"] { --c: #ef4444; }

/* 危险子项：与 .ns-sub 同构 + ↺ 前缀 + 红色 hover（与基础档案子项视觉等高，仅配色/动作不同） */
#nav-shell .ns-sub-danger {
  display: flex; align-items: center; gap: 8px;
  color: #f87171; cursor: pointer;
}
#nav-shell .ns-sub-danger::before {
  content: "↺";
  display: inline-block; width: 14px; text-align: center;
  font-size: 13px; flex: none; color: #ef4444;
}
#nav-shell .ns-sub-danger:hover {
  background: linear-gradient(90deg, rgba(239,68,68,.18), rgba(239,68,68,.04));
  color: #fca5a5; border-left-color: #ef4444;
  box-shadow: inset 0 0 8px rgba(239,68,68,.08);
}

/* 管理员专属：侧栏底部「系统管理」 结束 */

/* ---------- 三级菜单：财务等分组（二级类目 → 具体功能） ---------- */
#nav-shell .ns-group { border-top: 1px dashed rgba(148, 163, 184, .08); margin: 2px 0; }
#nav-shell .ns-group:first-child { border-top: none; }
#nav-shell .ns-group-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px 5px 14px; cursor: pointer; user-select: none;
  color: #cbd5e1; font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  border-radius: 5px;
}
#nav-shell .ns-group-hd:hover { color: #f1f5f9; background: rgba(148, 163, 184, .05); }
#nav-shell .ns-group-arrow { display: inline-block; font-size: 9px; color: #64748b; transition: transform .15s; }
#nav-shell .ns-group.open .ns-group-arrow { transform: rotate(90deg); color: #94a3b8; }
#nav-shell .ns-group-subs { display: none; padding: 1px 0 2px; }
#nav-shell .ns-group.open .ns-group-subs { display: block; }
#nav-shell .ns-group-subs .ns-sub { padding-left: 22px; }

/* === 多任务工作区 workspace.html 宿主模式 === */
#ns-workspace {
  position: fixed; top: 60px; left: 220px; right: 0; bottom: 0;
  display: flex; flex-direction: column; background: #0d1117;
}
#ns-taskbar {
  height: 38px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; background: #131c2b; border-bottom: 1px solid #2b3850;
}
#ns-taskbar .ns-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; flex: 1; height: 100%; }
#ns-taskbar .ns-tabs::-webkit-scrollbar { height: 4px; }
#ns-taskbar .ns-tabs::-webkit-scrollbar-thumb { background: #243145; border-radius: 3px; }
.ns-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; margin: 0 2px;
  background: #1b2738; color: #94a3b8;
  border: 1px solid #2b3850; border-radius: 4px 4px 0 0;
  font-size: 12px; cursor: pointer; white-space: nowrap; user-select: none;
}
.ns-tab:hover { color: #cbd5e1; border-color: #3b4a63; }
.ns-tab.active { background: #16202e; color: #22d3ee; border-color: #22d3ee; border-bottom-color: #16202e; }
.ns-tab .ns-tab-close { font-size: 14px; line-height: 1; color: #64748b; }
.ns-tab .ns-tab-close:hover { color: #ef4444; }
.ns-taskbar-actions { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 10px; }
.ns-tb-btn {
  height: 26px; padding: 0 10px; font-size: 12px;
  background: #1b2738; color: #cbd5e1;
  border: 1px solid #2b3850; border-radius: 4px; cursor: pointer;
}
.ns-tb-btn:hover { background: #243145; color: #22d3ee; border-color: #22d3ee; }

#ns-panes { position: relative; flex: 1; overflow: hidden; background: #0d1117; }
#ns-panes.tiled { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 8px; overflow: auto; }
#ns-panes .ns-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #475569; font-size: 14px; pointer-events: none;
}
.ns-pane {
  background: #16202e; border: 1px solid #2b3850; border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.ns-pane.active { border-color: #22d3ee; box-shadow: 0 8px 30px rgba(34,211,238,.18); }
.ns-pane-hd {
  height: 30px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; background: #1b2738; border-bottom: 1px solid #2b3850;
  cursor: move; user-select: none;
}
.ns-pane-hd .ns-pane-title { font-size: 12px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-pane-hd .ns-pane-close { font-size: 16px; line-height: 1; color: #64748b; cursor: pointer; padding: 0 4px; }
.ns-pane-hd .ns-pane-close:hover { color: #ef4444; }
.ns-pane-iframe { flex: 1; width: 100%; border: 0; background: #0d1117; display: block; }
/* 平铺模式：用 !important 覆盖层叠模式写入的内联样式 */
#ns-panes.tiled .ns-pane {
  position: relative !important; top: auto !important; left: auto !important;
  width: calc(50% - 12px) !important; height: calc(50% - 12px) !important;
  flex: 0 0 calc(50% - 12px); min-height: 240px;
}
/* 嵌入模式：任务面板内的页面铺满，不渲染导航壳 */
body.ns-embed { margin: 0 !important; padding: 0 !important; }

/* === 面板放大/还原 + 右下角拖拽改大小 === */
.ns-pane-hd .ns-pane-actions { display: inline-flex; align-items: center; gap: 4px; }
.ns-pane-hd .ns-pane-max { font-size: 14px; line-height: 1; color: #64748b; cursor: pointer; padding: 0 4px; }
.ns-pane-hd .ns-pane-max:hover { color: #22d3ee; }
.ns-pane.maximized { border-color: #22d3ee; box-shadow: 0 8px 30px rgba(34,211,238,.22); }
.ns-pane-resize {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px;
  cursor: nwse-resize; z-index: 5; opacity: .55;
  background: linear-gradient(135deg, transparent 0 46%, #64748b 46% 56%, transparent 56% 66%, #64748b 66% 76%, transparent 76%);
}
.ns-pane-resize:hover { opacity: 1; }
.ns-pane.maximized .ns-pane-resize { display: none; }