/* ============================================================================
   交付皮肤 v2「石墨」— 2026-10-05
   ---------------------------------------------------------------------------
   定位：加载于 theme.css / hero-unify.css / refine.css **之后**的一层纯覆盖。
        只改颜色、圆角、阴影、层级观感；不动任何布局尺寸、不动 DOM 结构、
        不碰各工序自己的主题色（合成蓝/氨解青/接酯金/纯化绿/分装粉是功能色，保留）。

   三套配色，切换只需给 <html> 加一个属性（默认 A，不用加属性）：
     A 石墨·靛蓝（默认）   —— 深石墨侧栏 + 靛蓝点缀，克制、现代
     B 深空·青玉           —— 更冷的墨黑 + 青玉绿，仪器感
     C 晨白·极简           —— 浅色侧栏 + 靛蓝，办公风、白天灯下更柔和
   记忆：localStorage['ot.skin'] = 'B' / 'C'（theme-toggle.js 会在载入时写到 <html data-skin>）

   为什么深色模式（<html data-theme="dark">）只吃"结构"不吃"配色"：
     深色模式本来就有一套自己的色板（tokens.css），这次交付以浅色为主，
     所以配色覆盖统一加 `html:not([data-theme="dark"])` 前缀 —— 深色模式保持原样，
     零回归风险；侧栏本来就是深色，两套模式共用同一套深色处理。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 皮肤变量
   ------------------------------------------------------------------------- */
:root {
  /* 点缀色 */
  --sk-accent: #898989;
  --sk-accent-2: #9d9d9d;
  --sk-accent-deep: #636363;
  --sk-accent-soft: rgba(167,167,167, .13);
  --sk-grad: linear-gradient(135deg, #8e8e8e 0%, #6d6d6d 100%);

  /* 侧栏：默认**浅色**（用户明确："左栏这个黑乎乎的页面我实在是接受不了"）。
     层次靠「类目轨浅灰底 + 1px 分隔线 + 面板白底」，不是白对白。
     B = 深空·青玉（深侧栏）；C = 石墨（深侧栏 + 靛蓝）—— 想回深色一档切。 */
  --sk-rail-1: #FFFFFF;
  --sk-rail-2: #FFFFFF;
  --sk-rail-line: #ebebeb;
  --sk-rail-txt: #4f4f4f;
  --sk-rail-txt-2: #6b6b6b;
  --sk-rail-txt-hi: #1c1c1c;
  --sk-rail-hover: #f6f6f6;
  --sk-rail-pin-bg: rgba(167,167,167, .05);
  --sk-rail-field: #f5f5f5;
  --sk-rail-field-focus: #FFFFFF;
  --sk-rail-badge: rgba(28,28,28, .08);
  --sk-rail-rail-bg: #f7f7f7;
  --sk-rail-thumb: #d5d5d5;
  --sk-rail-thumb-hover: #9e9e9e;

  /* 内容区（仅浅色模式使用） */
  --sk-page: #f6f6f6;
  --sk-page-2: #efefef;
  --sk-card: #FFFFFF;
  --sk-soft: #fafafa;
  --sk-line: #ececec;
  --sk-line-2: #f3f3f3;
  --sk-ink: #1c1c1c;
  --sk-ink-2: #5a5a5a;
  --sk-ink-3: #808080;

  /* 顶部指挥带 */
  --sk-band-1: #191919;
  --sk-band-2: #2d2d2d;
  --sk-band-3: #404040;
  --sk-band-glow: rgba(173,173,173, .34);
  --sk-band-txt: #9d9d9d;

  /* 语义色（比原来收一档，减少"花"） */
  --sk-ok: #10B981;
  --sk-warn: #E8930C;
  --sk-danger: #EF4444;
  --sk-info: #7d7d7d;

  /* 形状与阴影 */
  --sk-r: 10px;
  --sk-r-lg: 16px;
  --sk-sh-1: 0 1px 2px rgba(28,28,28, .05);
  --sk-sh-2: 0 6px 18px -10px rgba(28,28,28, .24);
  --sk-sh-3: 0 18px 46px -30px rgba(28,28,28, .45);
}

/* B 深空·青玉（深侧栏 + 青玉点缀） */
html[data-skin="B"] {
  --sk-accent: #14B8A6;
  --sk-accent-2: #5EEAD4;
  --sk-accent-deep: #0E7490;
  --sk-accent-soft: rgba(20, 184, 166, .14);
  --sk-grad: linear-gradient(135deg, #22C7B4 0%, #0E7490 100%);
  --sk-rail-1: #060F11;
  --sk-rail-2: #0E1B1E;
  --sk-rail-line: rgba(255, 255, 255, .08);
  --sk-rail-txt: #9BB0B4;
  --sk-rail-txt-2: #647B7F;
  --sk-rail-txt-hi: #EAF7F5;
  --sk-rail-hover: rgba(255, 255, 255, .06);
  --sk-rail-pin-bg: rgba(255, 255, 255, .04);
  --sk-rail-field: rgba(255, 255, 255, .055);
  --sk-rail-field-focus: rgba(255, 255, 255, .09);
  --sk-rail-badge: rgba(255, 255, 255, .12);
  --sk-rail-rail-bg: rgba(255, 255, 255, .035);
  --sk-rail-thumb: rgba(255, 255, 255, .16);
  --sk-rail-thumb-hover: rgba(255, 255, 255, .26);
}

/* C 晨白·极简（浅色侧栏，白天强光下最柔和；层次靠轨底色 + 分隔线） */
/* C 石墨（深侧栏 + 靛蓝）—— 想要回到"深色左栏"就切这一档 */
html[data-skin="C"] {
  --sk-rail-1: #101010;
  --sk-rail-2: #202020;
  --sk-rail-line: rgba(255, 255, 255, .08);
  --sk-rail-txt: #8e8e8e;
  --sk-rail-txt-2: #686868;
  --sk-rail-txt-hi: #f4f4f4;
  --sk-rail-hover: rgba(255, 255, 255, .06);
  --sk-rail-pin-bg: rgba(255, 255, 255, .04);
  --sk-rail-field: rgba(255, 255, 255, .055);
  --sk-rail-field-focus: rgba(255, 255, 255, .09);
  --sk-rail-badge: rgba(255, 255, 255, .10);
  --sk-rail-rail-bg: rgba(255, 255, 255, .035);
  --sk-rail-thumb: rgba(255, 255, 255, .14);
  --sk-rail-thumb-hover: rgba(255, 255, 255, .24);
}

/* ---------------------------------------------------------------------------
   2. 变量桥：把老变量接到新皮肤上（app.css / theme.css 里 800+ 处 var() 一起跟着变）
   ------------------------------------------------------------------------- */
html:not([data-theme="dark"]) {
  --brand: var(--sk-accent-deep);
  --brand-2: var(--sk-accent);
  --brand-glow: var(--sk-accent-soft);
  --grad: var(--sk-grad);
  --bg-0: var(--sk-page);
  --bg-1: var(--sk-page-2);
  --line: var(--sk-line);
  --line-strong: #e4e4e4;
  --shadow: var(--sk-sh-2);
  --txt: var(--sk-ink);
  --txt-2: var(--sk-ink-2);
  --txt-3: var(--sk-ink-3);
  --panel: #fff;
  --panel-2: var(--sk-soft);
  --panel-solid: #fff;
  --card: #fff;
  --cyan: var(--sk-accent);
  --cyan-bright: var(--sk-accent-2);
  --bio: var(--sk-ok);
  --amber: var(--sk-warn);

  --ui-brand-600: var(--sk-accent);
  --ui-brand-700: var(--sk-accent-deep);
  --ui-brand-500: var(--sk-accent-2);
  --ui-brand-900: var(--sk-accent-deep);
  --ui-brand-100: #f7f7f7;
  --ui-brand-050: #fafafa;
  --ui-bg-page: var(--sk-page);
  --ui-bg-card: #fff;
  --ui-bg-soft: var(--sk-soft);
  --ui-line-200: var(--sk-line);
  --ui-line-100: var(--sk-line-2);
  --ui-ink-900: var(--sk-ink);
  --ui-ink-700: #474747;
  --ui-ink-500: var(--sk-ink-2);
  --ui-ink-400: var(--sk-ink-3);
  --ui-ink-300: #9a9a9a;
  --ui-ok-solid: var(--sk-ok);
  --ui-warn-solid: var(--sk-warn);
  --ui-danger-solid: var(--sk-danger);
  --ui-sh-1: var(--sk-sh-1);
  --ui-sh-2: var(--sk-sh-2);
  --ui-sh-3: var(--sk-sh-3);
  --ui-ring: 0 0 0 3px var(--sk-accent-soft);
  --ui-r-2: var(--sk-r);
  --ui-r-3: 12px;
  --ui-r-4: var(--sk-r-lg);
}

/* ---------------------------------------------------------------------------
   3. 页面底 + 粒子层（浅色模式）
   ------------------------------------------------------------------------- */
html:not([data-theme="dark"]) body { background: var(--sk-page); }
html:not([data-theme="dark"]) .bg-glow {
  background:
    radial-gradient(1200px 700px at 0% -12%, rgba(167,167,167, .07), transparent 55%),
    radial-gradient(900px 620px at 102% -6%, rgba(20, 184, 166, .05), transparent 52%),
    linear-gradient(180deg, #f7f7f7, #f0f0f0 58%, #f7f7f7);
}
html:not([data-theme="dark"]) canvas#particles { opacity: .32; }

/* ---------------------------------------------------------------------------
   4. 侧栏（两套模式共用；C 皮肤会把它变成浅色）
   ------------------------------------------------------------------------- */
.sidebar {
  width: 258px;
  background: linear-gradient(180deg, var(--sk-rail-1), var(--sk-rail-2));
  border-right: 1px solid var(--sk-rail-line);
  box-shadow: 10px 0 34px -26px rgba(15,15,15, .85);
  padding: 16px 12px 12px;
  gap: 4px;
  backdrop-filter: none;
}
.sidebar::before { display: none; }   /* 老主题那圈蓝光晕去掉，深色底靠渐变就够 */

/* 品牌区 */
.sidebar .brand {
  padding: 2px 6px 14px;
  gap: 12px;
  border-bottom: 1px solid var(--sk-rail-line);
  margin-bottom: 10px;
}
.sidebar .logo {
  width: 38px; height: 38px;
  background: var(--sk-grad);
  border: 0;
  box-shadow: 0 8px 20px -8px var(--sk-accent);
}
.sidebar .brand h1 {
  color: var(--sk-rail-txt-hi);
  font-size:14px;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: none;
}
.sidebar .brand .sub {
  display: block;
  color: var(--sk-rail-txt-2);
  font-size: 11px;
  letter-spacing: 1.1px;
  margin-top: 4px;
  white-space: nowrap;
}

/* 搜索框（新增：43 个入口，输入即筛） */
.sidebar .nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 10px;
  padding: 0 10px;
  height: 34px;
  border-radius: var(--sk-r);
  background: var(--sk-rail-field);
  border: 1px solid var(--sk-rail-line);
  color: var(--sk-rail-txt-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sidebar .nav-search svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.sidebar .nav-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  color: var(--sk-rail-txt-hi);
  font: inherit; font-size:12px;
}
.sidebar .nav-search input::placeholder { color: var(--sk-rail-txt-2); }
.sidebar .nav-search input::-webkit-search-cancel-button { display: none; }
.sidebar .nav-search button {
  flex: none; width: 18px; height: 18px; line-height: 1;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sk-rail-badge); color: var(--sk-rail-txt);
  font-size: 11px; padding: 0;
}
/* ★ 2026-10-05 修：上面那条 display:grid 的优先级高过 UA 的 [hidden]，
   导致"清空搜索"按钮在输入框为空时也一直亮着（用户截图里那个 ✕）。 */
.sidebar .nav-search button[hidden] { display: none !important; }
.sidebar .nav-search button:hover { background: var(--sk-rail-hover); color: var(--sk-rail-txt-hi); }
.sidebar .nav-search:focus-within {
  background: var(--sk-rail-field-focus);
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px var(--sk-accent-soft);
}

/* 置顶「产线作业」—— 每天必点的五道工序，常驻不折叠 */
.sidebar .nav-pin {
  margin: 0 0 8px;
  padding: 8px 6px 8px;
  border-radius: 12px;
  background: var(--sk-rail-pin-bg);
  border: 1px solid var(--sk-rail-line);
}
.sidebar .nav-pin .np-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 8px 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--sk-rail-txt-2);
}
.sidebar .nav-pin .np-h em {
  font-style: normal; font-weight: 600;
  font-size: 11px; letter-spacing: .5px;
  color: var(--sk-rail-txt-2); opacity: .7;
  margin-left: auto;
}

/* 条目 */
.sidebar .nav-item {
  padding: 10px 10px;
  border-radius: var(--sk-r);
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-rail-txt);
  gap: 10px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar .nav-item svg { width: 17px; height: 17px; opacity: .74; }
/* 条目名一律单行：两级面板比原来窄，换行会把行高撑乱（实测「重合登记」被折成两行） */
.sidebar .nav-item > span:not(.nav-badge) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sidebar .nav-item .nav-badge { flex: none; margin-left: auto; }
.sidebar .nav-item:hover {
  background: var(--sk-rail-hover);
  color: var(--sk-rail-txt-hi);
  transform: none;
}
.sidebar .nav-item:hover::after { transform: none; }
.sidebar .nav-item.active {
  background: linear-gradient(90deg, var(--sk-accent-soft), rgba(255, 255, 255, 0));
  color: var(--sk-rail-txt-hi);
  border-color: var(--sk-rail-line);
  box-shadow: inset 0 0 0 1px var(--sk-accent-soft);
}
.sidebar .nav-item.active svg { opacity: 1; color: var(--sk-accent); }
.sidebar .nav-item.active::before {
  left: -12px; top: 22%; bottom: 22%; width: 3px;
  border-radius:4px;
  background: var(--sk-accent);
  box-shadow: 0 0 12px var(--sk-accent);
}
.sidebar .nav-item.active::after { display: none; }

/* 五道工序的状态点（一眼分清走到哪一步） */
.sidebar .nav-pin .nav-item[data-stage]::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  margin-left: auto; flex: none;
  background: var(--sk-stage, var(--sk-accent));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}
.sidebar .nav-pin .nav-item[data-stage="synthesis"]    { --sk-stage: #8e8e8e; }
.sidebar .nav-pin .nav-item[data-stage="ammonolysis"]  { --sk-stage: #22B8CF; }
.sidebar .nav-pin .nav-item[data-stage="coupling"]     { --sk-stage: #F0A020; }
.sidebar .nav-pin .nav-item[data-stage="purification"] { --sk-stage: #10B981; }
.sidebar .nav-pin .nav-item[data-stage="dispensing"]   { --sk-stage: #EC4899; }
.sidebar .nav-pin .nav-item[data-stage] { padding-right: 12px; }

/* 分组标题：去掉 5/6/3 那种计数噪音，只留可点折叠的小标 */
.sidebar .nav-group { margin-top: 10px; }
.sidebar .nav-group > .gt {
  font-size:11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--sk-rail-txt-2);
  padding: 6px 10px;
  margin: 0 4px 4px;
  border-radius: 8px;
}
.sidebar .nav-group > .gt:hover { background: var(--sk-rail-hover); color: var(--sk-rail-txt); }
.sidebar .nav-group > .gt .ng-caret { width: 11px; height: 11px; opacity: .8; }
.sidebar .nav-group > .gt .ng-count { display: none; }
.sidebar .nav-group.collapsed > .gt { opacity: .78; }
.sidebar .nav-group.collapsed > .gt:hover { opacity: 1; }

/* 侧栏滚到底部：联通状态 / 全部展开 / 退出 */
.sidebar .side-foot { border-top: 1px solid var(--sk-rail-line); padding-top: 10px; }
.sidebar .conn { color: var(--sk-rail-txt-2); font-size:11px; }
.sidebar .btn-ghost {
  color: var(--sk-rail-txt);
  background: var(--sk-rail-field);
  border: 1px solid var(--sk-rail-line);
  border-radius:8px;
  font-weight: 600;
}
.sidebar .btn-ghost:hover { background: var(--sk-rail-field-focus); color: #fff; box-shadow: none; }
.sidebar .btn-ghost:hover { color: var(--sk-rail-txt-hi); }
.sidebar .nav-search button:hover { background: var(--sk-rail-hover); color: var(--sk-rail-txt-hi); }
.sidebar nav::-webkit-scrollbar-thumb,
.sidebar .nav-panel::-webkit-scrollbar-thumb { background: var(--sk-rail-thumb); }
.sidebar nav::-webkit-scrollbar-thumb:hover,
.sidebar .nav-panel::-webkit-scrollbar-thumb:hover { background: var(--sk-rail-thumb-hover); }

/* 搜索命中态：只留匹配项，组头自动收起 */
.sidebar nav.is-filtering .nav-item { display: none; }
.sidebar nav.is-filtering .nav-item.is-hit { display: flex; }
.sidebar nav.is-filtering .nav-group.collapsed .nav-item.is-hit { display: flex; }
.sidebar nav.is-filtering .nav-group > .gt,
.sidebar nav.is-filtering .nav-pin > .np-h { display: flex; }
.sidebar nav.is-filtering .nav-group.is-empty { display: none; }
.sidebar .nav-empty {
  padding: 14px 10px; text-align: center;
  font-size: 12px; color: var(--sk-rail-txt-2);
}

/* ---------------------------------------------------------------------------
   5. 顶栏（浅色模式）
   ------------------------------------------------------------------------- */
html:not([data-theme="dark"]) .topbar {
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--sk-line);
  box-shadow: none;
  padding: 12px 20px;
  backdrop-filter: blur(10px);
}
html:not([data-theme="dark"]) .crumb .mt { font-size:16px; letter-spacing: .3px; color: var(--sk-ink); }
html:not([data-theme="dark"]) .crumb .ms { color: var(--sk-ink-3); letter-spacing: 1.3px; font-size: 11px; }
html:not([data-theme="dark"]) .clock .t { font-size: 18px; color: var(--sk-ink); }
html:not([data-theme="dark"]) .clock .d { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .tbtn {
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  color: var(--sk-ink-2);
  border-radius:8px;
}
html:not([data-theme="dark"]) .tbtn:hover {
  background: var(--ui-bg-card);
  border-color: #e0e0e0;
  color: var(--sk-ink);
  box-shadow: var(--sk-sh-1);
}
html:not([data-theme="dark"]) .tbtn.primary {
  background: var(--sk-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -8px var(--sk-accent);
}

/* ---------------------------------------------------------------------------
   6. 顶部指挥带 + KPI（浅色模式里最抢眼的一块）
   ------------------------------------------------------------------------- */
html:not([data-theme="dark"]) .ov-hero-band {
  border-radius: var(--sk-r-lg);
  background: linear-gradient(125deg, var(--sk-band-1) 0%, var(--sk-band-2) 48%, var(--sk-band-3) 100%);
  box-shadow: 0 22px 50px -34px rgba(23,23,23, .85), inset 0 1px 0 rgba(255, 255, 255, .10);
}
html:not([data-theme="dark"]) .ov-hero-band::after {
  background: radial-gradient(circle, var(--sk-band-glow), transparent 62%);
}
html:not([data-theme="dark"]) .ov-hero-top { color: var(--sk-band-txt); }
html:not([data-theme="dark"]) .ov-kpi-d {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
}
html:not([data-theme="dark"]) .ov-kpi-d.tone-a {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(248, 113, 113, .30);
}
html:not([data-theme="dark"]) .ov-kpi-d .k-lb { color: var(--sk-band-txt); letter-spacing: .3px; }
html:not([data-theme="dark"]) .ov-kpi-d .k-vl b { letter-spacing: -1.4px; font-weight: 800; }
html:not([data-theme="dark"]) .ov-kpi-d .k-sb,
html:not([data-theme="dark"]) .ov-kpi-d .k-cap { color: #8e8e8e; }
html:not([data-theme="dark"]) .ov-band i {
  width: 3px; height: 14px; border-radius:4px;
  background: var(--sk-grad);
}
html:not([data-theme="dark"]) .ov-band h4 { color: #282828; }

/* ---------------------------------------------------------------------------
   7. 卡片 / 表格 / 胶囊（浅色模式）
   ------------------------------------------------------------------------- */
html:not([data-theme="dark"]) .ov3-card {
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
  box-shadow: var(--sk-sh-1);
  background: var(--ui-bg-card);
}
html:not([data-theme="dark"]) .ov3-card:hover {
  border-color: #e4e4e4;
  box-shadow: var(--sk-sh-2);
}
html:not([data-theme="dark"]) .ov3-h .ov3-ico {
  border-radius:8px;
  background: var(--sk-accent-soft);
  color: var(--sk-accent-deep);
}
/* 顶部那排预警/提示卡：把原来的红黄重色压柔 */
html:not([data-theme="dark"]) .ov-alert,
html:not([data-theme="dark"]) .al-card,
html:not([data-theme="dark"]) .alert-card {
  border-radius: 14px;
  box-shadow: var(--sk-sh-1);
}
html:not([data-theme="dark"]) .ov-cal { border-top-color: var(--sk-line-2); }

/* 通用面板：让 ui.css / design-system.css 的组件跟着新皮肤走 */
html:not([data-theme="dark"]) .ui-card,
html:not([data-theme="dark"]) .ui-panel,
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .card {
  border-color: var(--sk-line);
  background: var(--ui-bg-card);
}

/* 滚动条 */
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: #d2d2d2; border-radius: 8px; }
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: #9a9a9a; }

/* ---------------------------------------------------------------------------
   8. 概览页：视图页签 + 行动条 + 预警卡（把老海军蓝换成靛蓝）
   ------------------------------------------------------------------------- */
html:not([data-theme="dark"]) .ov-tabs {
  background: var(--ui-bg-card);
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  box-shadow: var(--sk-sh-1);
  padding: 8px 12px;
}
html:not([data-theme="dark"]) .ov-tabs-lb { color: var(--sk-ink-3); font-weight: 800; }
html:not([data-theme="dark"]) .ov-tabs-note { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-tabs button {
  background: var(--sk-soft);
  border: 1px solid transparent;
  border-radius: 10px;
}
html:not([data-theme="dark"]) .ov-tabs button b { color: var(--sk-ink-2); font-weight: 700; }
html:not([data-theme="dark"]) .ov-tabs button i { color: #949494; }
html:not([data-theme="dark"]) .ov-tabs button:hover { background: #f5f5f5; border-color: var(--sk-line); }
html:not([data-theme="dark"]) .ov-tabs button:hover b { color: var(--sk-ink); }
html:not([data-theme="dark"]) .ov-tabs button.on {
  background: var(--sk-grad);
  border-color: transparent;
  box-shadow: 0 8px 18px -12px var(--sk-accent);
}
html:not([data-theme="dark"]) .ov-tabs button.on b { color: #fff; }
html:not([data-theme="dark"]) .ov-tabs button.on i { color: rgba(255, 255, 255, .72); }

/* 行动条：三张结论卡，原来红/黄底很抢眼，压成"白底 + 左侧色条 + 淡淡底色" */
html:not([data-theme="dark"]) .ov-act-c {
  background: var(--ui-bg-card);
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  box-shadow: var(--sk-sh-1);
}
html:not([data-theme="dark"]) .ov-act-c:hover { box-shadow: var(--sk-sh-2); }
html:not([data-theme="dark"]) .ov-act-tx b { color: #282828; }
html:not([data-theme="dark"]) .ov-act-tx i { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .bp-alert {
  border: 1px solid var(--sk-line);
  border-radius: 14px !important;
  box-shadow: var(--sk-sh-1);
}

/* 通用胶囊/标签：统一描边与底色，去掉五花八门的蓝 */
html:not([data-theme="dark"]) .badge,
html:not([data-theme="dark"]) .pill,
html:not([data-theme="dark"]) .chip {
  border-radius: var(--sk-r-pill);
}

/* 主按钮（若有 .ui-btn / .btn-primary）：统一到新渐变 */
html:not([data-theme="dark"]) .ui-btn.is-primary,
html:not([data-theme="dark"]) .btn-primary {
  background: var(--sk-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px var(--sk-accent);
}

/* ===========================================================================
   9. ★ 2026-10-05 第二版：顶部那条深色"指挥舱"改成浅色卡片
   ---------------------------------------------------------------------------
   用户原话：「这种颜色真的没办法交付」。实测原因：页面本身是白的（采样 #fafbfb），
   但顶部压着一条 300px 高的深藏青大色块，浅卡片跟它硬拼在一起，整页就被拖成"老气"。
   改法：拆掉深色底 —— 宽色带 → 白底细边卡片；深色瓷片 → 浅底瓷片；带上的白字改回深字。
   保留：KPI 上的迷你走势图、进度条、逾期那张的淡红调（信息层级不能丢）。
   ========================================================================= */
html:not([data-theme="dark"]) .ov-hero-band {
  background: var(--ui-bg-card);
  border: 1px solid var(--sk-line);
  box-shadow: var(--sk-sh-1);
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) .ov-hero-band::after { display: none; }   /* 去掉右上那团蓝光 */
html:not([data-theme="dark"]) .ov-hero-top { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-hero-top b { color: var(--sk-ink); }
html:not([data-theme="dark"]) .ov-hero-top label { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-hero-top .badge {
  background: #f5f5f5 !important; color: var(--sk-ink-2) !important; border-color: var(--sk-line) !important;
}
html:not([data-theme="dark"]) .ov-hero-top .ov-hero-tag {
  background: var(--sk-accent-soft); border-color: transparent; color: var(--sk-accent-deep);
}
html:not([data-theme="dark"]) .ov-hero-top .tbtn {
  background: var(--ui-bg-card); border-color: var(--sk-line); color: var(--sk-ink-2);
}
html:not([data-theme="dark"]) .ov-kpi-d {
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  backdrop-filter: none;
}
html:not([data-theme="dark"]) .ov-kpi-d.tone-a { background: #FEF7F7; border-color: #F7DEDE; }
html:not([data-theme="dark"]) .ov-kpi-d .k-lb { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-kpi-d .k-vl b { color: var(--sk-ink); }
html:not([data-theme="dark"]) .ov-kpi-d .k-vl span { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-kpi-d .k-sb { color: var(--sk-ink-2); }
html:not([data-theme="dark"]) .ov-kpi-d .k-sb b { color: var(--sk-ink); }
html:not([data-theme="dark"]) .ov-kpi-d .k-cap { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-kpi-d .k-bar { background: rgba(28,28,28, .08); }
html:not([data-theme="dark"]) .ov-delta {
  color: var(--sk-ink-2); background: #f5f5f5; border-color: var(--sk-line);
}
html:not([data-theme="dark"]) .ov-delta b { color: var(--sk-ink); }
html:not([data-theme="dark"]) .ov-delta i { color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-delta.up { color: #0E9F6E; }
html:not([data-theme="dark"]) .ov-delta.down { color: #E02424; }
/* 深色带上那几个"实拍/本地台账"胶囊按钮 */
html:not([data-theme="dark"]) .ov-hero-top .ovz-strip,
html:not([data-theme="dark"]) .ov-hero-top .ov-hero-tag,
html:not([data-theme="dark"]) .ov-hero-top button {
  box-shadow: none;
}

/* ===========================================================================
   10. ★ 2026-10-05 第二版：侧栏改「类目轨 + 列表」两级结构
   ---------------------------------------------------------------------------
   交互（nav-collapse.js 负责建结构，这里只管长什么样）：
     · 左轨 62px：7 个类目图标（产线作业 / 生产监控 / 订单与交期 / 质量与异常 /
       物料与设备 / 现场事务 / 数据与报表 / 排班与系统），当前类目高亮
     · 右列：该类目的条目列表，一次最多 7 条 —— 43 项永远不会再排成一堵墙
     · 点左轨切类目；点条目照旧进页面；搜索框跨类目筛，命中直接跳
   ========================================================================= */
.sidebar .nav-body { display: flex; flex: 1; min-height: 0; gap: 6px; margin-top: 2px; }

.sidebar .nav-rail {
  flex: none; width: 62px; display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0; overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--sk-rail-line);
  /* 默认（浅色侧栏）：轨道铺一层很淡的灰，和白色面板形成两层 —— 这是浅色下唯一的分隔手段。
     深色档（B 青玉 / C 石墨）**不铺**：铺了就跟面板差一个色阶，接缝看着像没画完
     （用户："左栏这个颜色不对劲"）。 */
  background: var(--sk-rail-rail-bg);
  border-radius: 0;
  scrollbar-width: none;
}
html[data-skin="B"] .sidebar .nav-rail,
html[data-skin="C"] .sidebar .nav-rail { background: transparent; }
.sidebar .nav-rail::-webkit-scrollbar { width: 0; }
.sidebar .nr-btn {
  position: relative; width: 100%; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--sk-rail-txt-2); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .2px;
  padding: 6px 2px; transition: background .15s, color .15s;
}
.sidebar .nr-btn svg { width: 19px; height: 19px; opacity: .9; }
.sidebar .nr-btn:hover { background: var(--sk-rail-hover); color: var(--sk-rail-txt-hi); }
/* 选中的类目：浅色轨用"浮起来的小白块"；深色轨（B/C）用"半透明白块" */
.sidebar .nr-btn.on {
  background: var(--ui-bg-card); color: var(--sk-accent-deep);
  box-shadow: 0 1px 2px rgba(28,28,28, .07);
}
html[data-skin="B"] .sidebar .nr-btn.on,
html[data-skin="C"] .sidebar .nr-btn.on {
  background: rgba(255, 255, 255, .10); color: var(--sk-rail-txt-hi); box-shadow: none;
}
.sidebar .nr-btn.on svg { opacity: 1; }
.sidebar .nr-btn.on::before {
  content: ""; position: absolute; left: -4px; top: 14px; bottom: 14px; width: 3px;
  border-radius:4px; background: var(--sk-accent);
}
html[data-skin="C"] .sidebar .nr-btn.on::before { background: var(--sk-accent); }
.sidebar .nr-btn .nr-dot {
  position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: #E04553; display: none;
}
.sidebar .nr-btn.has-badge .nr-dot { display: block; }

.sidebar .nav-panel {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; padding-right: 2px;
}
.sidebar .nav-panel-h {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 8px 10px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--sk-rail-txt-2);
  border-bottom: 1px solid var(--sk-rail-line); margin-bottom: 6px;
}
.sidebar .nav-panel-h i { font-style: normal; font-size:11px; color: var(--sk-rail-txt-2); opacity: .6; margin-left: auto; letter-spacing: 0; }

/* C 皮肤（浅色侧栏）下的轨道 */

/* 搜索命中时：面板临时变成"跨类目结果列表" */
.sidebar .nav-panel.is-search .nav-panel-h { display: none; }
/* ⚠ 只"藏没命中的"，不给命中的强设 display —— 权限不足的条目是 app.js 用
   inline style.display='none' 藏起来的，强设会把它放出来。 */
.sidebar .nav-panel.is-search .nav-item:not(.is-hit) { display: none !important; }
.sidebar .nav-panel.is-search .nav-cat { margin-bottom: 2px; }

/* nav 本身变成"轨道 + 列表"的容器（原来它是整块滚动区） */
.sidebar nav { display: flex; flex-direction: column; overflow: hidden; padding-right: 0; }

/* ===========================================================================
   11. ★ 2026-10-05 第三版：把剩下几页的"实心彩色块"也收成浅色
   ---------------------------------------------------------------------------
   巡检发现（`_qctest/block-scan.cjs`）这几处还是老视觉：
     · .sp-hero     发货出库页头   —— 实心蓝渐变横幅
     · .sp-kpi-card 发货出库/工序看板/中间质检的状态卡 —— 高饱和实心色卡
     · .rework-hero 返工处理页头   —— 占了 24% 屏的深蓝横幅（还带网格与光斑）
     · .am-hero     系统管理页头   —— 占 13% 屏的深蓝横幅
     · .fl-verdict.is-bad 跨工段对账的结论卡 —— 深藏青
   处理原则跟前面一致：**底子改浅、语义色保留**（红=逾期/异常，绿=完成，橙=待处理）。

   `.sp-kpi-card` 的底色是**内联**渐变（JS 里按语义给色），CSS 改不动它本身，
   所以盖一层 88% 白纱 —— 原位保留色相，观感变成浅色卡。
   ========================================================================= */

/* —— 页头横幅：蓝渐变 → 白底细边卡 —— */
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero) {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--sk-line);
  box-shadow: var(--sk-sh-1);
  color: var(--sk-ink);
  /* ★ 这几个页头是纵向 flex 容器里的 item，默认 flex-shrink:1 —— 页面内容一多
     就被压扁（实测发货出库页头容器 65px 而内容要 82px，文字被 overflow:hidden 裁掉）。
     钉住不参与压缩。 */
  flex: none;
}
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero)::before,
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero)::after,
html:not([data-theme="dark"]) .rework-hero-blob-1,
html:not([data-theme="dark"]) .rework-hero-blob-2 { display: none; }

/* 横幅里的白字/白描边一律翻深（保留原有的透明度层次） */
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero) :is(div, span, h1, h2, h3, h4, p, b, strong, em, i, small) {
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero) :is(.sp-hero-sub, .sp-hs-label, .sp-hs-sub,
  .am-hero-sub, .am-hs-label, .am-hur-label, .rework-hero-sub, .rework-hero-eyebrow) {
  color: var(--sk-ink-3); opacity: 1;
}
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero) :is(.sp-hero-divider, .am-hero-divider) {
  background: var(--sk-line);
}
html:not([data-theme="dark"]) :is(.am-hero, .rework-hero) :is(.am-hero-eyebrow, .am-hero-user, .rework-hero-badge) {
  background: #f5f5f5; border-color: var(--sk-line); color: var(--sk-ink-2);
}
html:not([data-theme="dark"]) .am-hero-ava {
  background: var(--sk-accent-soft); color: var(--sk-accent-deep);
}
html:not([data-theme="dark"]) .sp-hs-val.good { color: #0E9F6E; }
html:not([data-theme="dark"]) .sp-hs-val.warn { color: var(--ui-warn-ink); }

/* —— 状态卡：白纱压成浅色，色相仍在 ——
   .am-kpi-card（系统管理）与 .sp-kpi-card 是同一套结构（body/label/val/sub/ring/pct/icon/bar），
   一起收。 */
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) {
  color: var(--sk-ink);
  border: 1px solid var(--sk-line);
  box-shadow: var(--sk-sh-1);
}
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card)::before { display: none; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card)::after {
  content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .88);
  pointer-events: none; z-index: 1;
}
/* ⚠ 只给"本来没定位"的子元素加 position —— `.sp-kpi-bar` 是 position:absolute 的进度条，
   一并改成 relative 会让它掉进 flex 流、把文字挤成换行（实测踩过）。 */
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) > *:not(.sp-kpi-bar):not(.am-kpi-bar) {
  position: relative; z-index: 2;
}
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) > :is(.sp-kpi-bar, .am-kpi-bar) { z-index: 2; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-label, .am-kpi-label) { color: var(--sk-ink-3); opacity: 1; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-val, .am-kpi-val) { color: var(--sk-ink); }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-sub, .am-kpi-sub) { color: var(--sk-ink-2); opacity: 1; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-icon, .am-kpi-icon) { color: var(--sk-ink-3); opacity: .28; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-bar, .am-kpi-bar) { background: rgba(28,28,28, .22); }
html:not([data-theme="dark"]) .sp-kpi-card .sp-kpi-delta { background: #f5f5f5; color: var(--sk-ink-2); }
html:not([data-theme="dark"]) .sp-kpi-card .sp-kpi-delta.up-good { background: #E8F8F1; color: #0E9F6E; }
html:not([data-theme="dark"]) .sp-kpi-card .sp-kpi-delta.up-bad { background: #FDEDEE; color: var(--ui-danger-ink); }
/* 圆环两笔描边是**内联属性**（白色），CSS 盖住它：浅灰底 + 主色进度 */
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-ring, .am-kpi-ring) svg circle { stroke: rgba(28,28,28, .13) !important; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-ring, .am-kpi-ring) svg circle + circle { stroke: var(--sk-accent) !important; }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-pct, .am-kpi-pct) { color: var(--sk-ink-2); }

/* —— 跨工段对账的结论卡：深藏青 → 淡红（语义不变） —— */
html:not([data-theme="dark"]) .flow-page .fl-verdict.is-bad {
  background: #FEF7F7 !important;
  border: 1px solid #F6DCDC;
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) .flow-page .fl-verdict.is-bad :is(div, span, b, strong, em, i) { color: var(--sk-ink); }
html:not([data-theme="dark"]) .flow-page .fl-verdict.is-bad .fl-vd-v b { color: var(--ui-danger-ink); text-shadow: none; }
html:not([data-theme="dark"]) .flow-page .fl-verdict.is-bad .fl-vd-l { border-right-color: #F2D6D6; }
html:not([data-theme="dark"]) .flow-page .fl-verdict.is-bad .fl-vd-badge {
  background: #FDEDEE; border-color: #F6DCDC; color: var(--ui-danger-ink);
}

/* —— 返工处理：页头右侧那排控件 + 5 张主题色卡 —— */
/* 控件原来是"半透明白底压在深色带上"，白底卡上会糊掉，改成实底 + 描边 */
html:not([data-theme="dark"]) .rework-segments {
  background: #f5f5f5; border: 1px solid var(--sk-line);
}
html:not([data-theme="dark"]) .rework-segment { color: var(--sk-ink-2); }
html:not([data-theme="dark"]) .rework-segment.is-on {
  background: var(--ui-bg-card); color: var(--sk-accent-deep); box-shadow: 0 1px 2px rgba(28,28,28, .08);
}
html:not([data-theme="dark"]) .rework-refresh-btn {
  background: var(--ui-bg-card); border: 1px solid var(--sk-line); color: var(--sk-ink-2);
}
html:not([data-theme="dark"]) .rework-refresh-btn:hover {
  background: #fafafa; border-color: #e1e1e1; color: var(--sk-ink);
}
html:not([data-theme="dark"]) .rework-refresh-btn:active { background: #f3f3f3; }
/* 5 张主题卡：深色渐变 → 同色系浅底（语义保留：靛/青/绿/玫/琥珀） */
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card {
  background: #fafafa; border: 1px solid var(--sk-line); box-shadow: var(--sk-sh-1);
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-indigo {
  background: linear-gradient(135deg, #f9f9f9, #f4f4f4); border-color: #efefef;
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-cyan {
  background: linear-gradient(135deg, #EEF9FB, #E3F4F8); border-color: #D5ECF2;
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-emerald {
  background: linear-gradient(135deg, #EEF9F3, #E2F4EB); border-color: #D4EBDD;
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-rose {
  background: linear-gradient(135deg, #FDF1F3, #FBE7EB); border-color: #F6D9DF;
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-amber {
  background: linear-gradient(135deg, #FDF7EC, #FAF0DC); border-color: #F3E4C7;
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card :is(div, span, b, strong, em, i, small) {
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card :is(.rework-stat-label, .rework-stat-sub) {
  color: var(--sk-ink-2);
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card .rework-stat-glow,
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card .rework-stat-shine { display: none; }

/* ===========================================================================
   12. ★ 2026-10-05 第五版：修"左栏底部的登录状态/退出登录被切掉" + 浅色层次感
   ---------------------------------------------------------------------------
   用户原话：「之前在左栏底部的用户登录状态不见了，还有左边这个纯白的导航栏能再好好美化一下吗，
             整个页面都是白色的看着有点不舒服」

   底部的真因（**不是 nav 改造弄丢的**，实测那块 DOM 一直在）：
     `ui-scale.js` 会给 <html> 设 CSS `zoom`（按屏幕自动缩放），而 `.app` 用的是 **100vh**。
     `zoom` 不影响 vh 的取值 ⇒ 100vh 拿到的是**未缩放**的窗口高。
     实测 2327×1309 视口、zoom≈1.1 时：innerHeight=1309，而 .app/.sidebar 实际渲染成 **1440**，
     底部那块（y 1333~1427）就整块掉到视口外面了；我平时用 900px 高的窗口测，撑不满所以没复现。
     修法：`100vh` → `100%`（html/body 已经是 height:100%，链下来正好等于**可视**高度）。
   ========================================================================= */
.app { height: 100%; }          /* ← 关键：跟着 zoom 走，不再比可视区高出一截 */
.sidebar { height: 100%; }
.sidebar .side-foot { flex: none; }   /* 底部那块不参与压缩，永远待在底边 */

/* —— 浅色也要有层次：页面底比卡片深一档、侧栏比页面再浅一档 —— */
html:not([data-theme="dark"]) {
  --sk-page: #f2f2f2;          /* 页面底：再深一档，白卡片才"浮"得出来 */
  --sk-page-2: #ebebeb;
  --sk-rail-1: #fbfbfb;        /* 侧栏面板：不用纯白，和内容区拉开一点 */
  --sk-rail-2: #f9f9f9;
  --sk-rail-rail-bg: #f3f3f3;  /* 类目轨：再深一档，两级结构一眼可辨 */
}
html:not([data-theme="dark"]) .sidebar {
  border-right: 1px solid var(--sk-line);
  box-shadow: 6px 0 24px -20px rgba(28,28,28, .35);
}
html:not([data-theme="dark"]) .sidebar .brand { border-bottom-color: var(--sk-line); }
html:not([data-theme="dark"]) .sidebar .nav-search { background: #f3f3f3; border-color: #ebebeb; }
html:not([data-theme="dark"]) .sidebar .nav-search:focus-within { background: var(--ui-bg-card); }
/* 选中类目的小白块在灰轨上更清楚 */
html:not([data-theme="dark"]) .sidebar .nr-btn.on {
  background: var(--ui-bg-card); color: var(--sk-accent-deep);
  box-shadow: 0 1px 2px rgba(28,28,28, .10);
}
/* 内容区的白卡片：加深描边、去掉"糊成一片" */
html:not([data-theme="dark"]) :is(.ov3-card, .bp-card, .sp-panel, .mqz-card, .rp-card, .dv-card) {
  border-color: #eaeaea;
}

/* ===========================================================================
   13. ★ 2026-10-05 交付前统一：表格 / 标签 / 按钮 的组件层
   ---------------------------------------------------------------------------
   取证（`_qctest/ui-audit.cjs` 跑 10 个代表页统计真实 DOM）：
     表格 5 套：dv-tbl / oc-table / sp-table / rp-table + 裸 table
     按钮 20+ 种：sp-btn / dv-btn / mqz-btn / mq-btn / mq-btn-ghost / ghost / sm /
                  red / danger / warn / tbtn / rp-tab / rp-scope-btn / dv-chip …
     标签 20+ 种：badge / dv-tag(+pending/idle/maint) / sp-badge / mqz-tag / bp-tag /
                  sp-tag / chip / b-cyan / b-violet / b-red / fqc-qmode-tag …
   各页各写一套 ⇒ 边距、圆角、字号、hover 全不一样，摆在一起就是"不精致"。
   这一层只统一**形状与节奏**（圆角/内距/字号/字重/描边/hover），**不碰任何语义色**
   （红=逾期、绿=完成、橙=待处理、青/紫的分类色一律保留）。
   刻意不写 !important：页面若有更强的规则（含 !important）仍然优先，避免误伤。
   ========================================================================= */

/* ── 表格 ───────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) #view table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
html:not([data-theme="dark"]) #view table thead th {
  background: #fafafa;
  color: #5b5b5b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sk-line);
}
html:not([data-theme="dark"]) #view table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--sk-ink);
  border-bottom: 1px solid #f3f3f3;
  vertical-align: middle;
}
html:not([data-theme="dark"]) #view table tbody tr:hover > td { background: #fafafa; }
html:not([data-theme="dark"]) #view table tbody tr:last-child > td { border-bottom: 0; }
/* 数字列靠右、等宽 —— 表格里最容易显"专业"的一处 */
html:not([data-theme="dark"]) #view table :is(td, th):is([class*="num"], [class*="count"], [class*="val"], [class*="pct"]) {
  text-align: right;
}

/* ── 标签 / 徽章：统一成同一颗胶囊 ───────────────────────────────────── */
html:not([data-theme="dark"]) #view :is(.badge, .sp-badge, .sp-tag, .dv-tag, .mqz-tag, .bp-tag, .chip, .otags, .fqc-qmode-tag, .tag) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size:11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2px;
  border: 1px solid rgba(28,28,28, .07);
  box-shadow: none;
}
html:not([data-theme="dark"]) #view :is(.dv-tag)::before { display: none; }   /* 去掉某些标签前的小圆点，统一形状 */

/* ── 按钮：统一圆角 / 字重 / 字距，但**不定高**（避免顶坏各页的图标按钮） ── */
html:not([data-theme="dark"]) #view :is(.btn, .ui-btn, .sp-btn, .dv-btn, .mq-btn, .mqz-btn, .mq-btn-ghost,
  .tbtn, .op-btn, .mode-btn, .tab-btn, .rp-tab, .rp-scope-btn, .dv-chip, .btn-ghost,
  .rework-refresh-btn, .rework-segment, .mbtn) {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* 键盘可达性：统一焦点环（此前各页有的有、有的没有） */
html:not([data-theme="dark"]) #view :is(button, .btn, .ui-btn, input, select, a[role="button"]):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--sk-accent-soft);
  border-color: var(--sk-accent);
}

/* ── 搜索框 / 下拉：统一高度与描边 ───────────────────────────────────── */
html:not([data-theme="dark"]) #view :is(input[type="text"], input[type="search"], input[type="date"], select, .sp-search, .mqz-select, .rework-search-input, .rework-station-filter) {
  border-radius: 8px;
  border: 1px solid var(--sk-line);
  background: var(--ui-bg-card);
  font-size: 13px;
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) #view :is(input, select)::placeholder { color: #949494; }

/* ── 卡片标题（各页的 "图标 + 标题 + 英文" 那行）：统一字号与节奏 ─────── */
html:not([data-theme="dark"]) #view :is(.ov3-h h3, .rp-card h3, .dv-card h3, .fqc-qcard-t, .wc-card h4) {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--sk-ink);
}

/* ── 斑马纹：密集表格最容易"看不下去"的地方 ─────────────────────────
   只用极淡的一档（#fdfdfd），比加边框线干净；hover 仍然更深一档。 */
html:not([data-theme="dark"]) #view table tbody tr:nth-child(even) > td { background: #fdfdfd; }
html:not([data-theme="dark"]) #view table tbody tr:hover > td { background: #f8f8f8; }

/* ── 卡片 hover：统一"抬一下"的反馈（此前各页有的动有的不动） ───────── */
html:not([data-theme="dark"]) #view :is(.ov3-card, .bp-card, .sp-panel, .mqz-card, .rp-card, .dv-card, .fqc-qcard, .pk-card, .ocard) {
  transition: box-shadow .18s ease, border-color .18s ease;
}
html:not([data-theme="dark"]) #view :is(.ov3-card, .bp-card, .sp-panel, .mqz-card, .rp-card, .dv-card, .fqc-qcard, .pk-card, .ocard):hover {
  border-color: #e1e1e1;
  box-shadow: var(--sk-sh-2);
}

/* ── 空态：统一成"居中的一句灰话"，不要各页各写一种 ───────────────── */
html:not([data-theme="dark"]) #view :is(.pd-empty, .empty, .rework-empty, .bp-empty, .mq-empty, .rp-empty) {
  padding: 28px 16px;
  text-align: center;
  color: var(--sk-ink-3);
  font-size: 13px;
  background: transparent;
}

/* —— 工序看板的状态卡（.pk-card）与发货出库的 .sp-kpi-card 同构，同样用白纱压浅 ——
   ⚠ 这里必须写足优先级：页面自己的 `.grid.kpis .pk-card::before/::after` 是**两个装饰圆**
   （(0,3,0)），优先级高于我原来的 `.pk-card::after` —— 所以白纱一直没盖上（实测踩过）。 */
html:not([data-theme="dark"]) #view .grid.kpis .pk-card {
  color: var(--sk-ink);
  border: 1px solid var(--sk-line);
  box-shadow: var(--sk-sh-1);
}
html:not([data-theme="dark"]) #view .grid.kpis .pk-card::before { display: none; }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card::after {
  content: ""; position: absolute; inset: 0; top: 0; right: 0; width: auto; height: auto;
  border-radius: inherit; background: rgba(255, 255, 255, .88);
  pointer-events: none; z-index: 1;
}
html:not([data-theme="dark"]) #view .grid.kpis .pk-card > * { position: relative; z-index: 2; }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-label { color: var(--sk-ink-3); opacity: 1; }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-val { color: var(--sk-ink); }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-sub { color: var(--sk-ink-2); opacity: 1; }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-bar { background: rgba(28,28,28, .22); }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-ring-bg { stroke: rgba(28,28,28, .13); }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-ring-fg { stroke: var(--sk-accent); }
html:not([data-theme="dark"]) #view .grid.kpis .pk-card .pk-ring-pct { color: var(--sk-ink-2); }

/* ===========================================================================
   14. ★ 2026-10-05 交付前：统一"页面主标题 + 页头卡"
   ---------------------------------------------------------------------------
   实测各页标题字号：发货出库 .sp-hero-title 24px / 返工处理 .rework-hero h2 25px /
   系统管理 .am-hero-title 26px（还有 .oc-/.cat-/.cyc-/.td-hero-title 都 24px），
   副标题也各写各的 —— 同一套系统里"页面标题"有 6 种规格。
   统一成：主标题 20px/800、副标题 12px/600 灰、页头卡同圆角同内距。
   （订单中心直接进 KPI 胶囊、没有页头，属于结构差异，需要改模块 JS 才能补，见文档"还没做的"。）
   ========================================================================= */
html:not([data-theme="dark"]) :is(.sp-hero-title, .am-hero-title, .oc-hero-title,
  .cat-hero-title, .cyc-hero-title, .td-hero-title) {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) .rework-hero h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  margin: 2px 0;
}
html:not([data-theme="dark"]) :is(.sp-hero-sub, .am-hero-sub, .rework-hero-sub) {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.1px;
  color: var(--sk-ink-3);
  text-transform: none;
}
/* 页头卡：统一圆角与内距（原 12/18/18px 圆角、20~26px 内距各不相同） */
html:not([data-theme="dark"]) :is(.sp-hero, .am-hero, .rework-hero) {
  border-radius: 16px;
  padding: 18px 22px;
}
html:not([data-theme="dark"]) .rework-hero { min-height: 0; }

/* 第三种页头形态："图标 + 标题卡"（报表分析 .rp-hero-txt / 设备管理 .dv-hero-txt …）
   标题也统一到 20px/800、说明文字 12px 灰，跟上面那三种页头卡对齐。 */
/* ===========================================================================
   15. ★ 2026-10-05 交付前：补「订单中心」的页头卡（全站唯一没有页头的一页）
   ---------------------------------------------------------------------------
   类名用 page-hero / page-hero-ic / page-hero-txt，样式全部在这一节里定义，
   不依赖任何模块样式表 —— 这样它不会随模块 CSS 的加载顺序变化而变样。
   视觉与「报表分析 / 设备管理」那套图标+标题卡对齐：白底细边、16px 圆角、
   图标用主色浅底、标题 20px/800、说明 12px 灰。
   ========================================================================= */
html:not([data-theme="dark"]) #view .page-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 14px;
  background: var(--ui-bg-card);
  border: 1px solid var(--sk-line);
  border-radius: 16px;
  box-shadow: var(--sk-sh-1);
}
html:not([data-theme="dark"]) #view .page-hero-ic {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius:12px;
  background: var(--sk-accent-soft);
  color: var(--sk-accent-deep);
}
html:not([data-theme="dark"]) #view .page-hero-txt { min-width: 0; }
html:not([data-theme="dark"]) #view .page-hero-txt h2 {
  margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.2px; line-height: 1.25; color: var(--sk-ink);
}
html:not([data-theme="dark"]) #view .page-hero-txt p {
  margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--sk-ink-3);
}

html:not([data-theme="dark"]) #view [class*="-hero-txt"] :is(h2, h3) {
  /* ⚠ 这里必须 !important：modules 的 CSS（reports.css / midqc.css / workbench.css /
     finishedqc.css）是**运行时注入**的，排在 skin.css 之后；实测报表分析页的标题
     被 reports.css 后面的规则反超成 16px/900。全站只有这一处用 !important，
     理由就是"后加载的模块样式表"这一个（其余一律不加）。 */
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px;
  line-height: 1.25;
  margin: 0 !important;
  color: var(--sk-ink);
}
html:not([data-theme="dark"]) #view [class*="-hero-txt"] p {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .2px;
  margin: 4px 0 0 !important;
  color: var(--sk-ink-3) !important;
}

/* ---- 16. ★ 2026-10-05 交付前：中间质检 / 成品质检的页头也并入同一规格 --------
   这两页的"页面标题"不是 h1/h2/h3，而是 div（实测查出来的）：
     中间质检  .mq-hero-t        17px/800（在 .mqz-wrap 里）
     成品质检  .fqc-hero-name b  16px/900（另有一个子视图用 .fqc2-hero-txt h3 20px）
   统一到 20px/800。这条靠优先级取胜即可（#view + :is 的选择器权重大于模块里的
   `.mqz-wrap .mq-hero-t`），不需要 !important。 */
html:not([data-theme="dark"]) #view :is(.mq-hero-t, .fqc-hero-name b, .fqc2-hero-txt h3) {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: inherit;
}
/* 成品质检的标题元素不一定是 <b>（实测结构里是首个子元素承载"成品质检"四个字），
   所以再补一条"首个子元素"的兜底。 */
html:not([data-theme="dark"]) #view .fqc-hero-name > *:first-child {
  /* 成品质检这一页的标题字号来自模块样式表里更强的规则，普通优先级压不住 ⇒ 用 !important
     （全站第 2 处，也是最后一处；理由同样是"模块 CSS 运行时注入、排在 skin.css 之后"）。 */
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px;
}

/* ===========================================================================
   ★ 2026-10-06 皮肤 D「云蓝·分层」（用户："导航栏和右栏全是白色是不是也不太合适"）
   ---------------------------------------------------------------------------
   问题：默认 A 档里，侧栏面板 #fbfbfb、画布 #f2f2f2、卡片 #FFFFFF —— 侧栏和卡片
   几乎同白，加上右栏（v25 之后已是淡蓝面板）也在同一亮度区间，整屏看过去"哪里都是白的"。
   为什么不做深色侧栏：用户此前明确否决过（"左栏这个黑乎乎的页面我实在是接受不了"），
   所以 B/C 那两档深色只作为备选，不设为默认。
   做法（只改**表面明度**，不动布局、不动 DOM、不动任何功能色/品牌色）：
     类目轨(最深) ▸ 侧栏面板(浅蓝) ≈ 顶栏(浅蓝) ▸ 画布(中性灰) ▸ 卡片(纯白，最亮)
   三级层次拉开之后，"白"只留给内容卡片本身，外壳一律带一点冷蓝调。
   切档：localStorage['ot.skin']='D' 刷新即生效；清掉回默认 A。
   深色模式（data-theme="dark"）**完全不受影响** —— 所有规则都带 :not([data-theme="dark"])。
   ========================================================================= */
html[data-skin="D"]:not([data-theme="dark"]) {
  /* 画布再深一档，白卡才有"浮起来"的感觉 */
  --sk-page: #efefef;
  --sk-page-2: #e7e7e7;
  /* 侧栏面板：冷蓝浅底（不是白） */
  --sk-rail-1: #f7f7f7;
  --sk-rail-2: #f2f2f2;
  --sk-rail-rail-bg: #ebebeb;
  --sk-rail-line: #e5e5e5;
  --sk-rail-field: #eeeeee;
  --sk-rail-hover: rgba(167,167,167, .10);
  /* 内容卡：留纯白；描边偏冷一点，避免和画布糊在一起 */
  --sk-card: #FFFFFF;
  --sk-soft: #fafafa;
  --sk-line: #e8e8e8;
  --sk-line-2: #f1f1f1;
}
html[data-skin="D"]:not([data-theme="dark"]) .sidebar {
  border-right: 1px solid #e4e4e4;
  box-shadow: 10px 0 30px -24px rgba(28,28,28, .55);
}
html[data-skin="D"]:not([data-theme="dark"]) .sidebar .nav-search {
  background: var(--sk-rail-field); border-color: #e4e4e4;
}
html[data-skin="D"]:not([data-theme="dark"]) .sidebar .nav-search:focus-within { background: var(--ui-bg-card); }
html[data-skin="D"]:not([data-theme="dark"]) .sidebar .nr-btn.on {
  background: var(--ui-bg-card); color: var(--sk-accent-deep); box-shadow: 0 1px 2px rgba(28,28,28, .10);
}
/* 顶栏也算"外壳"：和侧栏同一冷调，中间留出一块中性灰画布 */
html[data-skin="D"]:not([data-theme="dark"]) .topbar {
  background: rgba(249,249,249, .94); border-bottom-color: #e8e8e8;
}
/* 顶部页签条在冷调外壳上要能看出来 */
html[data-skin="D"]:not([data-theme="dark"]) .app-tabs { background: transparent; }

/* ===========================================================================
   ★ 2026-10-06 KPI 卡片统一精修
   用户："可以做的更精美一点吗，包括我的所有KPI卡片"
   ---------------------------------------------------------------------------
   覆盖的 KPI 家族（都在 app.css / theme.css 里各写各的，这里统一成一套规格）：
     .bp-kpi       生产概览 5 张指标卡（含 .ov-kstack 结构条 / .ov-spark-wrap 迷你趋势）
     .q-kpi        综合查询
     .odkpi        订单详情
     .sp-kpi-card  发货出库 / 工序看板 / 中间质检（skin.css 第 11 节已浅色化，这里补质感）
     .am-kpi-card  系统管理（与 sp 同构）
   规格（只动表面与排版，不动布局尺寸、不动栅格、不动取数）：
     · 卡面：极淡自上而下渐变，避免大块死白；描边用皮肤线色；双层阴影（贴地 + 扩散）
     · 圆角 16；悬停抬 2px
     · 数字：更大更黑、tabular-nums、轻微负字距；单位降一档、字重 700
     · 标签：11.5px / 字重 700 / 去掉 uppercase（中文没有大小写）
     · 底部结构条：5px→8px、圆角胶囊、浅底轨道；说明行更小更淡
   深色模式不受影响（全部带 :not([data-theme="dark"])）。
   ========================================================================= */
html:not([data-theme="dark"]) :is(.bp-kpi, .q-kpi, .odkpi, .sp-kpi-card, .am-kpi-card) {
  border: 1px solid var(--sk-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ui-bg-card) 0%, #fdfdfd 58%, #fbfbfb 100%);
  box-shadow: 0 14px 32px -28px rgba(68,68,68, .55), 0 1px 0 rgba(255, 255, 255, .8) inset;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
html:not([data-theme="dark"]) :is(.bp-kpi, .q-kpi, .odkpi, .sp-kpi-card, .am-kpi-card):hover {
  transform: translateY(-2px);
  border-color: #e4e4e4;
  box-shadow: 0 20px 44px -30px rgba(68,68,68, .6), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* —— 生产概览的旗舰卡：图标片 / 数字 / 结构条 逐项精修 —— */
html:not([data-theme="dark"]) .bp-kpi { padding: 16px 18px 14px; }
html:not([data-theme="dark"]) .bp-kpi-ico {
  width: 44px; height: 44px; border-radius:12px;
  box-shadow: 0 12px 22px -14px rgba(68,68,68, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html:not([data-theme="dark"]) .bp-kpi.tone-a .bp-kpi-ico { box-shadow: 0 12px 22px -14px rgba(220, 38, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
html:not([data-theme="dark"]) .bp-kpi.tone-b .bp-kpi-ico { box-shadow: 0 12px 22px -14px rgba(123,123,123, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
html:not([data-theme="dark"]) .bp-kpi.tone-c .bp-kpi-ico { box-shadow: 0 12px 22px -14px rgba(119,119,119, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
html:not([data-theme="dark"]) .bp-kpi-label {
  font-size:11px; font-weight: 700; letter-spacing: .8px;
  color: var(--sk-ink-3); text-transform: none;
}
html:not([data-theme="dark"]) .bp-kpi-val b {
  font-size: 32px; font-weight: 800; letter-spacing: -.8px;
  color: var(--sk-ink); font-variant-numeric: tabular-nums;
}
html:not([data-theme="dark"]) .bp-kpi-unit { font-size: 13px; font-weight: 700; color: var(--sk-ink-3); margin-left: 4px; }
html:not([data-theme="dark"]) .bp-kpi-sub { font-size:11px; color: var(--sk-ink-3); margin-top: 6px; }
html:not([data-theme="dark"]) .bp-kpi-delta { font-weight: 700; }
html:not([data-theme="dark"]) .ov-kstack {
  height: 8px; border-radius:999px; background: #f3f3f3; margin-top: 12px; overflow: hidden;
}
html:not([data-theme="dark"]) .ov-kstack i { border-radius:999px; }
html:not([data-theme="dark"]) .ov-kstack i + i { box-shadow: 0 0 0 1.5px #fff; }
html:not([data-theme="dark"]) .ov-kstack-cap { margin-top: 8px; font-size:11px; color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-spark-wrap { margin-top: 10px; }
/* 卡片左下那根短线：收成圆头小胶囊，压住描边 */
html:not([data-theme="dark"]) .ov3-kpis .bp-kpi::after { height: 3px; width: 42px; border-radius:4px 4px 0 0; opacity: .9; }

/* —— 其它 KPI 家族：同样的数字/标签规格，避免各页观感不一致 —— */
html:not([data-theme="dark"]) .q-kpi-val { font-size:24px; font-weight: 800; letter-spacing: -.5px; color: var(--sk-ink); font-variant-numeric: tabular-nums; }
html:not([data-theme="dark"]) .q-kpi-label { font-size:11px; font-weight: 700; letter-spacing: .5px; color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .odkpi-main .v { letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
html:not([data-theme="dark"]) .odkpi-main .l { font-size:11px; color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .odkpi-icon { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-val, .am-kpi-val) {
  font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums;
}
html:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card) :is(.sp-kpi-label, .am-kpi-label) {
  font-size:11px; font-weight: 700; letter-spacing: .6px;
}

/* —— 生产概览那 5 张卡的**真实类名**是 .ov-kpis-dark > .ov-kpi-d
   （标签 .k-lb / 数值 .k-vl / 说明 .k-sb / 图形 .k-viz / 脚注 .k-cap / 进度条 .k-bar）——
   它们原本是给"深色指挥带"设计的（白字 + 白线），浅色化之后只剩一片灰白，这里补足质感。 */
html:not([data-theme="dark"]) .ov-kpi-d {
  padding: 16px 18px 14px; border-radius: 16px;
  background: linear-gradient(180deg, var(--ui-bg-card) 0%, #fdfdfd 58%, #fbfbfb 100%);
  border: 1px solid var(--sk-line);
  box-shadow: 0 14px 32px -28px rgba(68,68,68, .55), 0 1px 0 rgba(255, 255, 255, .8) inset;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
html:not([data-theme="dark"]) .ov-kpi-d:hover {
  transform: translateY(-2px); border-color: #e4e4e4;
  box-shadow: 0 20px 44px -30px rgba(68,68,68, .6), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
html:not([data-theme="dark"]) .ov-kpi-d.tone-a {
  background: linear-gradient(180deg, #FFF9F9 0%, #FEF6F6 100%); border-color: #F6DEDE;
}
html:not([data-theme="dark"]) .ov-kpi-d.tone-a:hover { border-color: #F0C9C9; }
/* 左缘一道细色条：让"这是哪一类指标"一眼可辨，而不是整卡同色 */
html:not([data-theme="dark"]) .ov-kpi-d::before {
  content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px;
  border-radius:0 4px 4px 0; background: var(--sk-accent); opacity: .85;
}
html:not([data-theme="dark"]) .ov-kpi-d.tone-a::before { background: linear-gradient(180deg, #EF4444, #DC2626); }
html:not([data-theme="dark"]) .ov-kpi-d.tone-b::before { background: linear-gradient(180deg, #7d7d7d, #656565); }
html:not([data-theme="dark"]) .ov-kpi-d.tone-c::before { background: linear-gradient(180deg, #888888, #626262); }
/* 排版：标签收紧、数字加大、单位降档 */
html:not([data-theme="dark"]) .ov-kpi-d .k-lb { font-size:11px; font-weight: 700; letter-spacing: .7px; color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-kpi-d .k-vl { gap: 6px; margin-top: 4px; }
html:not([data-theme="dark"]) .ov-kpi-d .k-vl b { font-size:32px; letter-spacing: -1.2px; color: var(--sk-ink); }
html:not([data-theme="dark"]) .ov-kpi-d .k-vl span { font-size: 12px; font-weight: 700; color: var(--sk-ink-3); }
html:not([data-theme="dark"]) .ov-kpi-d .k-sb { font-size:11px; line-height: 1.55; color: var(--sk-ink-2); margin-top: 4px; }
html:not([data-theme="dark"]) .ov-kpi-d .k-cap { font-size:11px; color: var(--sk-ink-3); margin-top: 6px; }
/* 进度条：5px 细条 → 8px 圆角胶囊；目标刻度改成落在条内的小竖线
   （原来 .k-bar 没有 position:relative，那个 95% 的目标刻度是相对整卡定位的，跑到卡外面去了） */
html:not([data-theme="dark"]) .ov-kpi-d .k-bar { position: relative; height: 8px; border-radius:999px; background: #f3f3f3; margin-top: 12px; }
html:not([data-theme="dark"]) .ov-kpi-d .k-bar i { border-radius:999px; background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent-2)); }
html:not([data-theme="dark"]) .ov-kpi-d.tone-a .k-bar i { background: linear-gradient(90deg, #F87171, #DC2626); }
html:not([data-theme="dark"]) .ov-kpi-d .k-bar u {
  text-decoration: none; position: absolute; top: -2px; width: 2px; height: 12px;
  border-radius:4px; background: #d2d2d2;
}
/* 迷你趋势线：内联写的是"深底白线"，浅底上几乎看不见 → 用 CSS 覆盖成品牌色
   （CSS 覆盖 SVG 的 presentation attribute 是成立的） */
html:not([data-theme="dark"]) .ov-kpi-d .k-viz svg path { stroke: var(--sk-accent); }
html:not([data-theme="dark"]) .ov-kpi-d .k-viz svg path[fill]:not([fill="none"]) { fill: var(--sk-accent); }
html:not([data-theme="dark"]) .ov-kpi-d .k-viz svg circle { fill: var(--sk-accent); }

/* ===========================================================================
   ★ 2026-10-06 全站视觉规格（按走查清单逐项实施）
   ===========================================================================
   ① 空状态统一：原来每个模块都是"一张白卡 + 一行居中灰字"，数据一空就显廉价。
      规格：居中、上方一枚淡色圆形图标、浅底虚线面板、正文 13px 灰字、上下留白 30px。
      类名来自 `_qctest/empty-audit.cjs` 的实测（把 42 个模块点一遍找出来的）。
   ② 稀疏页撑高：像留样出库/现场协同，整个页面根只有一张 260~370px 高的卡，
      下面空出 500px 画布 → 现在给"单子节点的 .pd-wrap"一个 min-height，
      卡片自然撑到 460px，空状态也有地方舒展。
   ========================================================================= */
/* —— ① 空状态 —— */
/* ★ 2026-10-11：`.pel-s` 从这张「页面级空态」名单里拿掉 —— 它不是空态容器，
   而是工序页「待上机板池」旁边那**半句结论文字**（「· 本工段暂无待上机板」）。
   挂在名单里会被套上 40px 图标 + min-height:140px + 虚线圆角框，
   实测在 1520 宽的容器里渲染成 128×126 的虚线小盒，飘在整行中间（用户说的"扎眼"就是它）。 */
html:not([data-theme="dark"]) :is(.stcol-empty, .rework-empty, .mo-cart-empty, .pd-empty,
  .dv-empty, .dbe-empty, .fqc-empty, .fqc2-empty, .rpf-empty, .rp-empty, .mq-empty, .mqz-empty,
  .mg-empty, .mwx-empty, .ui-empty, .am-empty, .bp-empty, .ov-empty, .ov3-empty, .sp-empty,
  .hr-empty, .tr-empty, .live-empty, .sjt-empty, .flow-empty1, .drawer-empty, .dlu-empty) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 140px; padding: 30px 16px;
  color: var(--sk-ink-3); font-size: 13px; line-height: 1.7; text-align: center;
  background: linear-gradient(180deg, #fbfbfb 0%, #fefefe 100%);
  border: 1px dashed #e7e7e7; border-radius: 14px;
}
html:not([data-theme="dark"]) :is(.stcol-empty, .rework-empty, .mo-cart-empty, .pd-empty,
  .dv-empty, .dbe-empty, .fqc-empty, .fqc2-empty, .rpf-empty, .rp-empty, .mq-empty, .mqz-empty,
  .mg-empty, .mwx-empty, .ui-empty, .am-empty, .bp-empty, .ov-empty, .ov3-empty, .sp-empty,
  .hr-empty, .tr-empty, .live-empty, .sjt-empty, .flow-empty1, .drawer-empty, .dlu-empty)::before {
  content: ""; flex: none; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%;
  background: var(--ui-bg-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392A5BF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8l3-4h12l3 4v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/><path d='M3 8h5l1.5 2.5h5L16 8h5'/></svg>") center/20px 20px no-repeat;
  box-shadow: 0 10px 20px -14px rgba(68,68,68, .5), inset 0 0 0 1px #eeeeee;
}
/* 表内/局部那种只有一行字的小空态：只统一配色与居中，不加面板与图标 */
html:not([data-theme="dark"]) .empty { color: var(--sk-ink-3); text-align: center; padding: 14px 10px; }
/* 卡片内部的小空态（比页面级矮一档，不带图标，避免小卡里塞一个大面板） */
html:not([data-theme="dark"]) .ui-empty-inline {
  display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 16px 12px;
  color: var(--sk-ink-3); font-size:12px; line-height: 1.7; text-align: center;
  background: linear-gradient(180deg, #fbfbfb 0%, #fefefe 100%);
  border: 1px dashed #e7e7e7; border-radius: 12px;
}

/* —— ② 稀疏页撑高 —— */
html:not([data-theme="dark"]) #view > .pd-wrap > :only-child { min-height: 460px; }

/* —— ③ 表格统一规格 ——
   类名取自全站扫描（oc 订单中心 / sp 发货出库·工序看板 / bp / am 系统管理 / rework 返工 /
   mq 中间质检 / fqc 成品质检 / ui 产能·用户 / tr 引物流转 / wb 工作台 …）。
   只统一"表头底色、行高、分隔线、行悬停、等宽数字"，不动列宽与排序逻辑。 */
html:not([data-theme="dark"]) :is(.oc-table, .sp-table, .bp-table, .am-table, .rework-table, .rework-table-v3,
  .mq-table, .mqs-table, .mqz-tbl, .mwx-table, .fqc-table, .ui-table, .tr-tbl, .da-tbl, .sw-tbl,
  .q-pr-tbl, .wb-table, .mq-xlsx-table, .detail-table, .drawer-table, .dd-rule-table, .rw-categ-table) {
  border-collapse: separate;
  border-spacing: 0;
}
html:not([data-theme="dark"]) :is(.oc-table, .sp-table, .bp-table, .am-table, .rework-table, .rework-table-v3,
  .mq-table, .mqs-table, .mqz-tbl, .mwx-table, .fqc-table, .ui-table, .tr-tbl, .da-tbl, .sw-tbl,
  .q-pr-tbl, .wb-table, .mq-xlsx-table, .detail-table, .drawer-table, .dd-rule-table, .rw-categ-table) thead th {
  background: var(--sk-soft);
  color: var(--sk-ink-3);
  font-weight: 700; font-size: 12px; letter-spacing: .3px;
  border-bottom: 1px solid var(--sk-line);
  height: 40px; white-space: nowrap;
}
html:not([data-theme="dark"]) :is(.oc-table, .sp-table, .bp-table, .am-table, .rework-table, .rework-table-v3,
  .mq-table, .mqs-table, .mqz-tbl, .mwx-table, .fqc-table, .ui-table, .tr-tbl, .da-tbl, .sw-tbl,
  .q-pr-tbl, .wb-table, .mq-xlsx-table, .detail-table, .drawer-table, .dd-rule-table, .rw-categ-table) tbody td {
  border-bottom: 1px solid var(--sk-line-2);
  font-variant-numeric: tabular-nums;
}
html:not([data-theme="dark"]) :is(.oc-table, .sp-table, .bp-table, .am-table, .rework-table, .rework-table-v3,
  .mq-table, .mqs-table, .mqz-tbl, .mwx-table, .fqc-table, .ui-table, .tr-tbl, .da-tbl, .sw-tbl,
  .q-pr-tbl, .wb-table, .mq-xlsx-table, .detail-table, .drawer-table, .dd-rule-table, .rw-categ-table) tbody tr:last-child > td {
  border-bottom: 0;
}
html:not([data-theme="dark"]) :is(.oc-table, .sp-table, .bp-table, .am-table, .rework-table, .rework-table-v3,
  .mq-table, .mqs-table, .mqz-tbl, .mwx-table, .fqc-table, .ui-table, .tr-tbl, .da-tbl, .sw-tbl,
  .q-pr-tbl, .wb-table, .mq-xlsx-table, .detail-table, .drawer-table, .dd-rule-table, .rw-categ-table) tbody tr:hover > td {
  background: #fbfbfb;
}

/* —— ⑥ 页面头统一（只统一圆角与内边距，不动各自的配色与内部结构）——
   走查里最明显的不一致：有的页有 hero 头（订单中心/返工处理/设备管理/系统管理），
   有的只有一行标题；且同样是 hero，圆角与内边距 12/14/16/20 混用。 */
html:not([data-theme="dark"]) :is(.dv-hero, .sp-hero, .rework-hero, .am-hero, .cat-hero, .cyc-hero,
  .ach-hero, .od-head, .eta-head, .pd-hero) {
  border-radius: 16px;
  padding: 14px 18px;
}

/* —— ⑦ 按钮规格统一（只统一几何与字重：圆角/高度/内边距/字号/字重/过渡）——
   刻意**不动颜色**：主按钮（蓝底）、危险按钮（红底）、幽灵按钮的语义色都保留，
   否则一屏里"保存/删除/取消"会被压成同一个样子，层级反而丢了。 */
html:not([data-theme="dark"]) :is(.sp-btn, .dv-btn, .mqz-btn, .mq-btn, .fqc-btn, .am-btn, .pm-btn,
  .dk-btn, .rh-btn-query, .rh-btn-reset, .rh-filter-btn, .rh-pager-btn, .oc-ship-btn, .oc-trace-btn,
  .rework-action-btn, .rework-refresh-btn, .fqc-qmode-btn, .mqs-btn, .mqx-pg-btn, .sf-btn, .live-btn,
  .export-btn, .dd-pos-btn, .ui-btn, .nav-empty button) {
  border-radius: 10px;
  min-height: 34px;
  padding: 0 14px;
  font-size:12px;
  font-weight: 700;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
html:not([data-theme="dark"]) :is(.sp-btn, .dv-btn, .mqz-btn, .mq-btn, .fqc-btn, .am-btn, .pm-btn,
  .dk-btn, .rh-btn-query, .rh-btn-reset, .rh-filter-btn, .rh-pager-btn, .oc-ship-btn, .oc-trace-btn,
  .rework-action-btn, .rework-refresh-btn, .fqc-qmode-btn, .mqs-btn, .mqx-pg-btn, .sf-btn, .live-btn,
  .export-btn, .dd-pos-btn, .ui-btn):hover {
  box-shadow: 0 6px 16px -12px rgba(68,68,68, .55);
}
/* 小号按钮（-mini / -sm）保持紧凑，别被上面那条撑大 */
html:not([data-theme="dark"]) :is(.mq-btn-mini, .fqc-btn-mini, .sp-btn-mini) {
  min-height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px;
}

/* —— ④ 颜色语义收敛 ——
   走查里最跳的两处：返工处理 5 张 KPI 卡是"靛/青/绿/玫/琥珀"五种底色，
   按时交付率的周达成图是 4 块饱和实心。这里把彩色底收敛成
   **白卡 + 左缘 3px 语义色条**：语义保留（绿=达成、红=异常、琥珀=预警、蓝=信息），
   但不再有五色底噪。色条与全站语义色一一对应：
     靛=信息蓝 · 青=同族辅助 · 绿=达成 · 玫=异常 · 琥珀=预警 */
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card {
  background: linear-gradient(180deg, var(--ui-bg-card) 0%, #fdfdfd 60%, #fbfbfb 100%) !important;
  border: 1px solid var(--sk-line) !important;
  border-left-width: 3px !important;
}
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-indigo { border-left-color: #898989 !important; }
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-cyan { border-left-color: #0EA5C6 !important; }
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-emerald { border-left-color: #10B981 !important; }
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-rose { border-left-color: #EF4444 !important; }
html:not([data-theme="dark"]) .rework-stats-v3 > .rework-stat-card.theme-amber { border-left-color: #E8930C !important; }

/* —— ④ 颜色语义收敛 · 第二刀：状态标签/胶囊 ——
   取证：`_qctest/tag-audit.cjs` 跑完 42 页，统计出 **65 种（类名+背景色）组合**，其中：
     · "合作" 一个含义出现 3 种颜色：灰蓝(bp-tag.tone-q) / 青(badge.b-violet) / 紫(sp-tag-coop)；
     · "已发货·已审核·已确认·已重合·空闲" 用了 5 种不同的绿；
     · 同一个 badge.b-amber 在生产概览渲染成灰色、在工序看板是琥珀色（两处皮肤覆盖不一致）。
   做法：**只按语义族归一配色**（类名本身已经编码语义，所以不用猜文案），
   五个族各一套 bg/fg，全站同义同色：
     达成/完成 = 绿 · 预警/待处理 = 琥珀 · 异常/逾期 = 红 · 进行中/信息 = 蓝 · 合作 = 紫 · 中性 = 灰
     （`.tl-chip` 那种按行内色区分语义的**不动**，改了会丢语义） */
html:not([data-theme="dark"]) :is(.bp-tag.tone-ok, .pd-tag.pd-badge-done, .pd-tag.pd-badge-approved,
  .pd-tag.pd-badge-signed, .sp-badge.bio, .mqz-tag.green, .dv-tag.dv-tag-idle, .rm-tag.rm-tag-ov,
  .dbe-tag.w, .badge.b-bio) {
  background: rgba(16, 185, 129, .12) !important; color: #047857 !important;
}
html:not([data-theme="dark"]) :is(.nfz-tag.warn, .ui-pill.is-warn, .bp-tag.tone-c,
  .pd-tag.pd-badge-pending, .badge.b-amber) {
  background: rgba(245, 158, 11, .14) !important; color: var(--ui-warn-ink) !important;
}
html:not([data-theme="dark"]) :is(.bp-tag.tone-a, .badge.b-red, .ui-pill.is-danger,
  .dv-tag.dv-tag-pending, .dv-tag.dv-tag-maint) {
  background: rgba(224, 69, 83, .12) !important; color: #C0392B !important;
}
html:not([data-theme="dark"]) :is(.pd-tag.pd-badge-running, .ui-pill.is-info, .fqc-qmode-tag) {
  background: rgba(136,136,136, .10) !important; color: #656565 !important;
}
html:not([data-theme="dark"]) :is(.badge.b-violet, .sp-tag.sp-tag-coop) {
  background: rgba(148,148,148, .12) !important; color: #6a6a6a !important;
}
html:not([data-theme="dark"]) :is(.bp-tag.tone-q, .bp-tag, .ui-pill, .mqz-tag.gray, .rm-tag.rm-tag-none,
  .dbe-tag.r, .badge.b-gray) {
  background: rgba(115,115,115, .10) !important; color: var(--ui-ink-500) !important;
}

/* —— ⑤ 第二刀：大色块图降饱和（按时交付率的"周达成率"8 根柱）——
   原来每根柱是饱和实心渐变（#5FE3AE→#0E8F5E 等），在满屏克制的界面里像四块色卡。
   改成"浅底 + 语义描边"：色相不变（绿=达成/琥珀=接近/红=未达成），
   但填充降到 16~30% 透明度、加一圈 1.5px 同色描边，数值仍由柱内标签给出。
   柱子的渐变是 JS 内联写的，所以这里用 !important 覆盖（不改取数逻辑）。 */
html:not([data-theme="dark"]) .dg-due .dg-wkc-t.is-ok > i {
  background: linear-gradient(180deg, rgba(16, 185, 129, .30), rgba(16, 185, 129, .15)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .55);
}
html:not([data-theme="dark"]) .dg-due .dg-wkc-t.is-warn > i {
  background: linear-gradient(180deg, rgba(245, 158, 11, .32), rgba(245, 158, 11, .16)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(217, 132, 10, .55);
}
html:not([data-theme="dark"]) .dg-due .dg-wkc-t.is-bad > i {
  background: linear-gradient(180deg, rgba(224, 69, 83, .30), rgba(224, 69, 83, .15)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(196, 48, 61, .5);
}
/* 图例里那枚绿色小方块跟着换成浅底，别让图例和柱子颜色对不上 */
html:not([data-theme="dark"]) .dg-due .dg-wkc-lg i.bar-ok {
  background: rgba(16, 185, 129, .22);
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .55);
}

/* —— ④ 第三刀：把「分类色」与「状态色」分开 ——
   上一刀把状态标签统一成了语义色（绿=达成/红=异常…），但"合作 / 常规 / 工段"这类
   是**分类**不是状态：用实心底会跟状态色抢注意力（走查里"合作"原来还有三种颜色）。
   现在分类标签统一改成**描边式**（透明底 + 1px currentColor 内描边），
   状态标签保持实心浅底 —— 一屏之内"实心=状态、描边=分类"，扫一眼就能分开。 */
html:not([data-theme="dark"]) :is(.sp-tag.sp-tag-coop, .badge.b-violet, .badge.b-gray, .badge.b-cyan, .bp-tag.tone-q) {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* —— ⑨ 窄屏（≤1180px）走查后的修补 ——
   实测 900×700 下全站 42 页：KPI 栅格与表格都正常换行/横向滚动（`.oc-tbl-wrap` 等本来就有
   overflow-x:auto），**唯一明显挤坏的是顶栏**：刷新/更新日志/交期预警这些 `.tbtn` 被压成两行、
   "交期预警"按钮变成一个高瘦方块。 */
html:not([data-theme="dark"]) .topbar .tbtn { white-space: nowrap; }
@media (max-width: 1180px) {
  html:not([data-theme="dark"]) .topbar { padding: 8px 12px; column-gap: 6px; row-gap: 6px; }
  html:not([data-theme="dark"]) .topbar .tbtn {
    min-height: 30px; padding: 0 10px; font-size: 12px; gap: 4px;
  }
  html:not([data-theme="dark"]) .topbar .crumb .mt { font-size:14px; }
  /* 窄屏藏掉中英文副标题（英文副标题对现场操作无用），把宽度让给功能按钮 */
  html:not([data-theme="dark"]) .topbar .crumb .ms { display: none; }
  /* 页签条改成横向滚动，别再把标题挤成两行 */
  html:not([data-theme="dark"]) .app-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  html:not([data-theme="dark"]) .app-tabs > * { flex: none; }
}

/* —— ⑨ 手机宽度（≤760px）：420×760 实测的修补 ——
   实测现象：KPI 栅格退成一列后，值字号仍是桌面档（`.k-vl b` 34px），
   一屏只装得下一个数字，卡片边缘也被撑掉 —— 观感"页面坏了"。
   修法：手机上 KPI 恢复两列 + 值字号回落 + 内边距收紧，让页面读起来是"一列紧凑卡片"。
   （现场的正式操作仍在桌面/平板，这里只保证手机上能看、能读。） */
@media (max-width: 760px) {
  /* ★ 2026-10-06 手机导航抽屉：420px 实测两级导航要占 230px（64 类目轨 + 170 条目面板），
     留给内容不到 200px。改成「类目轨常驻 + 条目面板做抽屉」：
     点类目滑出（nav-collapse.js 给 body 加 .nav-open），点条目/点外面自动收起。 */
  html:not([data-theme="dark"]) .sidebar .nav-panel {
    position: fixed; left: 64px; top: 0; bottom: 0; width: 200px; z-index: 60;
    background: var(--ui-bg-card, #fff); border-right: 1px solid var(--sk-line);
    box-shadow: 12px 0 30px -20px rgba(28,28,28, .45);
    padding: 10px 8px; overflow-y: auto;
    transform: translateX(-115%); transition: transform .22s ease;
  }
  html:not([data-theme="dark"]) body.nav-open .sidebar .nav-panel { transform: none; }
  /* 旧规则在 ≤760px 把 .nav-item span 全藏了（那是给"只有 64px 轨"的时代写的），
     抽屉里必须把文字放回来，否则点进去只有一排图标。 */
  html:not([data-theme="dark"]) .sidebar .nav-panel .nav-item span { display: block; }
  html:not([data-theme="dark"]) .sidebar .nav-panel .nav-item { justify-content: flex-start; gap: 10px; }
  /* 抽屉打开时给一层轻遮罩，点它即收起 */
  html:not([data-theme="dark"]) body.nav-open::after {
    content: ""; position: fixed; inset: 0 0 0 264px; z-index: 55;   /* 让出类目轨，轨还能点 */
    background: rgba(28,28,28, .18);
  }
  html:not([data-theme="dark"]) :is(.ov-kpis-dark, .bp-kpis, .ov3-kpis, .dv-kpi, .oc-kpi-grid,
    .q-kpis, .am-kpi-grid, .sp-kpi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html:not([data-theme="dark"]) :is(.ov-kpi-d, .bp-kpi, .sp-kpi-card, .am-kpi-card, .dv-kpi-item,
    .q-kpi, .odkpi) {
    padding: 12px 14px !important;
  }
  html:not([data-theme="dark"]) .ov-kpi-d .k-vl b { font-size:24px !important; letter-spacing: -.6px !important; }
  html:not([data-theme="dark"]) .ov-kpi-d .k-vl span { font-size: 11px !important; }
  html:not([data-theme="dark"]) :is(.bp-kpi-val, .q-kpi-val, .sp-kpi-val, .am-kpi-val, .dv-kpi-val) b,
  html:not([data-theme="dark"]) :is(.bp-kpi-val, .q-kpi-val, .sp-kpi-val, .am-kpi-val, .dv-kpi-val) {
    font-size:20px !important;
  }
}

/* ===========================================================================
   ★ 2026-10-07 皮肤 E「曜蓝·精工」（新默认）
   ---------------------------------------------------------------------------
   用户原话：「左侧导航栏和右侧全是这种接近于白色的样式显得很不高级」
   （这是同一条反馈的第三次了：D 档把侧栏调成浅蓝之后，浅蓝底 + 白卡 + 浅灰画布
     仍然全在同一明度档，整屏还是"哪里都是白的"。）

   诊断：问题不在"白"，在**明度全挤在一档**。真正的高级感来自"深色外壳 + 亮内容"
   的强对比，以及三档清晰的层次：深色侧栏 → 冷调画布 → 纯白内容卡。
   用户此前否决的是**黑乎乎**的石墨/墨黑侧栏（B/C 档，近黑 #060F11/#101010），
   不是"有颜色的深蓝" —— 品牌色本来就是深蓝（登录页 #0f0f0f + 品牌蓝 #444444），
   所以这一档用**深海军蓝**（#363636→#1e1e1e）做外壳，跟登录页同一套语言。

   改法（只动表面明度与描边阴影，不动布局尺寸、不动 DOM、不动功能色）：
     · 侧栏：深蓝渐变 + 顶部蓝调高光，类目轨再深一档；文字 3 档（主/次/选中白）
     · 顶栏：冷白渐变 + 细描边，页签选中态 = 白卡 + 顶部品牌色条（不再是淡蓝底片）
     · 画布：冷蓝灰渐变（.view），比卡片深两档 ⇒ 白卡"浮"起来
     · 卡片：白→冷白渐变 + 冷描边 + 双层阴影（贴地 + 扩散）
   切档：顶栏 🎨 按钮或 localStorage['ot.skin']='E'（默认）/ 'D' 浅蓝 / 'A' 白 / 'B' 'C' 深色。
   深色模式（data-theme="dark"）完全不受影响（全部带 :not([data-theme="dark"])）。
   ========================================================================= */
html[data-skin="E"]:not([data-theme="dark"]) {
  /* 点缀色：品牌蓝（与登录页同源），比 A/D 的靛紫更"工业" */
  --sk-accent: #6e6e6e;
  --sk-accent-2: #9c9c9c;
  --sk-accent-deep: #545454;
  --sk-accent-soft: rgba(134,134,134, .15);
  --sk-grad: linear-gradient(135deg, #797979 0%, #545454 100%);

  /* 侧栏（深海军蓝）*/
  --sk-rail-1: #363636;
  --sk-rail-2: #1e1e1e;
  --sk-rail-rail-bg: rgba(15,15,15, .42);
  --sk-rail-line: rgba(255, 255, 255, .10);
  --sk-rail-txt: #cecece;
  --sk-rail-txt-2: #7d7d7d;
  --sk-rail-txt-hi: #f9f9f9;
  --sk-rail-hover: rgba(255, 255, 255, .08);
  --sk-rail-pin-bg: rgba(255, 255, 255, .045);
  --sk-rail-field: rgba(255, 255, 255, .08);
  --sk-rail-field-focus: rgba(255, 255, 255, .13);
  --sk-rail-badge: rgba(255, 255, 255, .14);
  --sk-rail-thumb: rgba(255, 255, 255, .18);
  --sk-rail-thumb-hover: rgba(255, 255, 255, .30);

  /* 内容区：画布比 D 再深一档，白卡才有"浮起来"的对比 */
  --sk-page: #efefef;
  --sk-page-2: #e8e8e8;
  --sk-card: #FFFFFF;
  --sk-soft: #fafafa;
  --sk-line: #e7e7e7;
  --sk-line-2: #f2f2f2;
  --sk-ink: #1f1f1f;
  --sk-ink-2: #5f5f5f;
  --sk-ink-3: #7e7e7e;

  /* 阴影：贴地 + 扩散两层（大屏上白卡最容易"糊成一片"，靠这两层分出来） */
  --sk-sh-1: 0 1px 2px rgba(46,46,46, .06);
  --sk-sh-2: 0 12px 28px -20px rgba(46,46,46, .30);
  --sk-sh-3: 0 22px 52px -32px rgba(46,46,46, .48);

  /* 老变量桥（design-system/app.css 里那批 var()）跟着走 */
  --brand: #545454;
  --brand-2: #6e6e6e;
  --brand-soft: #f3f3f3;
  --brand-glow: rgba(134,134,134, .18);
  --ui-brand-100: #f2f2f2;
  --ui-brand-050: #f8f8f8;
  --panel-2: #fbfbfb;
}

/* —— 侧栏：深蓝渐变 + 顶部蓝调高光（两级导航的层次靠"轨更深 + 面板略亮"）—— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(166,166,166, .30), transparent 60%),
    radial-gradient(90% 45% at 100% 100%, rgba(92,92,92, .38), transparent 62%),
    linear-gradient(180deg, #363636 0%, #2a2a2a 46%, #1e1e1e 100%);
  border-right: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 16px 0 44px -30px rgba(22,22,22, .95);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand { border-bottom-color: rgba(255, 255, 255, .10); }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .logo {
  background: linear-gradient(135deg, #898989 0%, #616161 100%);
  box-shadow: 0 10px 24px -10px rgba(167,167,167, .85), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand h1 { color: #FFFFFF; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand .sub { color: #8d8d8d; }

/* 搜索框：深色底 + 半透明白描边 */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: #999999;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search input { color: #f4f4f4; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search input::placeholder { color: #898989; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search button { background: rgba(255, 255, 255, .12); color: #dddddd; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search:focus-within {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(190,190,190, .6);
  box-shadow: 0 0 0 3px rgba(167,167,167, .20);
}

/* 置顶五道工序 */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-pin {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .09);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-pin .np-h { color: #8d8d8d; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-pin .np-h em { color: #7d7d7d; }

/* 类目轨：比面板再深一档，两级结构一眼可辨 */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-rail {
  background: rgba(15,15,15, .40);
  border-right-color: rgba(255, 255, 255, .07);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn { color: #8a8a8a; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn:hover { background: rgba(255, 255, 255, .08); color: #f3f3f3; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on {
  background: linear-gradient(180deg, rgba(167,167,167, .26), rgba(134,134,134, .12));
  color: #f4f4f4;
  box-shadow: inset 0 0 0 1px rgba(190,190,190, .28), 0 8px 18px -14px rgba(0, 0, 0, .8);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on::before {
  background: linear-gradient(180deg, #cecece, #6e6e6e);
  box-shadow: 0 0 12px rgba(167,167,167, .9);
}

/* 条目：三段文字色 + 选中态"品牌蓝横条 + 左侧发光竖条" */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item { color: #cecece; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item svg { opacity: .82; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item:hover {
  background: rgba(255, 255, 255, .085); color: #FFFFFF;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(167,167,167, .30), rgba(167,167,167, .03));
  color: #FFFFFF;
  border-color: rgba(190,190,190, .26);
  box-shadow: inset 0 0 0 1px rgba(190,190,190, .14);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item.active svg { opacity: 1; color: #cecece; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item.active::before {
  background: linear-gradient(180deg, #cecece, #6e6e6e);
  box-shadow: 0 0 14px rgba(167,167,167, .95);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-group > .gt { color: #8a8a8a; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-group > .gt:hover { background: rgba(255, 255, 255, .07); color: #ebebeb; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-panel-h { color: #8d8d8d; border-bottom-color: rgba(255, 255, 255, .10); }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-panel-h i { color: #7d7d7d; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-empty { color: #8a8a8a; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-badge { background: rgba(255, 255, 255, .14); color: #eaeaea; }

/* 底部：联通状态 / 全部展开 / 退出登录 */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .side-foot { border-top-color: rgba(255, 255, 255, .10); }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .conn { color: #8f8f8f; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .13);
  color: #e1e1e1;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .btn-ghost:hover {
  background: rgba(255, 255, 255, .13); color: #FFFFFF;
}

/* —— 顶栏 + 页签条：冷白渐变，页签选中态用"白卡 + 顶部品牌色条" —— */
html[data-skin="E"]:not([data-theme="dark"]) .topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(250,250,250, .93));
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 12px 30px -28px rgba(38,38,38, .75);
}
html[data-skin="E"]:not([data-theme="dark"]) .crumb .mt { color: #1f1f1f; }
html[data-skin="E"]:not([data-theme="dark"]) .crumb .ms { color: #7e7e7e; }
html[data-skin="E"]:not([data-theme="dark"]) .clock .d { color: #7e7e7e; }
html[data-skin="E"]:not([data-theme="dark"]) .tbtn {
  background: #f9f9f9;
  border-color: #e8e8e8;
  color: #505050;
  font-weight: 600;
}
html[data-skin="E"]:not([data-theme="dark"]) .tbtn:hover {
  background: var(--ui-bg-card); border-color: #d5d5d5; color: #363636;
  box-shadow: 0 8px 18px -14px rgba(53,53,53, .7);
}
html[data-skin="E"]:not([data-theme="dark"]) .app-tabs { padding-top: 6px; gap: 8px; }
html[data-skin="E"]:not([data-theme="dark"]) .app-tab {
  height: 32px; border-radius: 10px;
  background: #f5f5f5; border-color: #eaeaea; color: #656565; font-weight: 600;
}
html[data-skin="E"]:not([data-theme="dark"]) .app-tab:hover { background: var(--ui-bg-card); border-color: #dadada; color: #545454; }
html[data-skin="E"]:not([data-theme="dark"]) .app-tab.on {
  background: linear-gradient(180deg, var(--ui-bg-card), #f9f9f9);
  border-color: #dadada; color: #545454; font-weight: 700;
  box-shadow: inset 0 2px 0 var(--sk-accent), 0 8px 18px -14px rgba(99,99,99, .6);
}

/* —— 画布 + 卡片：画布深两档、卡片冷白渐变 + 冷描边 —— */
html[data-skin="E"]:not([data-theme="dark"]) .view {
  background:
    radial-gradient(1200px 620px at 10% -10%, rgba(134,134,134, .07), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 176, 255, .05), transparent 58%),
    linear-gradient(180deg, #f3f3f3 0%, #efefef 58%, #f1f1f1 100%);
}
html[data-skin="E"]:not([data-theme="dark"]) body { background: var(--sk-page); }
html[data-skin="E"]:not([data-theme="dark"]) :is(.ov3-card, .bp-card, .sp-panel, .mqz-card, .rp-card,
  .dv-card, .ui-card, .ui-panel, .panel, .card, .oc-filtercard, .oc-tbl-wrap, .ov-tabs, .ov-act-c) {
  border-color: #e7e7e7;
  background: linear-gradient(180deg, var(--ui-bg-card) 0%, #fdfdfd 62%, #fbfbfb 100%);
  box-shadow: 0 16px 34px -30px rgba(46,46,46, .55), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
html[data-skin="E"]:not([data-theme="dark"]) :is(.ov3-card, .bp-card, .sp-panel, .mqz-card, .rp-card, .dv-card):hover {
  border-color: #dedede;
  box-shadow: 0 22px 44px -32px rgba(46,46,46, .6), 0 1px 0 rgba(255, 255, 255, .95) inset;
}
/* KPI 卡：语义底色保留（模块是内联渐变，CSS 盖不掉，只能用白纱压），
   白纱改成**上白下透**的渐变 ⇒ 卡面主体是干净的白，底部留一点语义色的余韵，
   比"整卡压成粉/绿"更像精密仪表，而不是马卡龙。 */
html[data-skin="E"]:not([data-theme="dark"]) :is(.sp-kpi-card, .am-kpi-card)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .91) 58%, rgba(255, 255, 255, .80) 100%);
}
html[data-skin="E"]:not([data-theme="dark"]) :is(.bp-kpi, .q-kpi, .odkpi, .sp-kpi-card, .am-kpi-card, .ov-kpi-d) {
  border-color: #e7e7e7;
  box-shadow: 0 18px 40px -32px rgba(46,46,46, .65), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .grid.kpis .pk-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .91) 58%, rgba(255, 255, 255, .80) 100%);
}
html[data-skin="E"]:not([data-theme="dark"]) #view .grid.kpis .pk-card { border-color: #e7e7e7; }

/* —— 工序看板：列 = 冷调托盘、卡 = 纯白（这是"右侧全是白"最集中的一处）—— */
html[data-skin="E"]:not([data-theme="dark"]) .board .stcol {
  background: linear-gradient(180deg, #f2f2f2 0%, #eeeeee 100%);
  border-color: #e3e3e3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 14px 28px -28px rgba(46,46,46, .75);
}
html[data-skin="E"]:not([data-theme="dark"]) .board .sthd {
  background: var(--ui-bg-card); border-bottom: 1px solid #ebebeb;
}
html[data-skin="E"]:not([data-theme="dark"]) .board .sthd:hover { background: #fafafa; }
html[data-skin="E"]:not([data-theme="dark"]) .board .sthn { color: #1f1f1f; letter-spacing: .2px; }
html[data-skin="E"]:not([data-theme="dark"]) .board .sthc { background: #f2f2f2; color: #545454; }
html[data-skin="E"]:not([data-theme="dark"]) .board .sthc.is-zero { background: #f3f3f3; color: #8b8b8b; }
html[data-skin="E"]:not([data-theme="dark"]) .board .sthb { background: rgba(37,37,37, .08); }
html[data-skin="E"]:not([data-theme="dark"]) .board .ocard {
  background: var(--ui-bg-card); border-color: #ebebeb;
  box-shadow: 0 8px 18px -16px rgba(46,46,46, .55);
}
html[data-skin="E"]:not([data-theme="dark"]) .board .ocard:hover {
  border-color: #dadada;
  box-shadow: 0 16px 30px -20px rgba(46,46,46, .6);
}
html[data-skin="E"]:not([data-theme="dark"]) .board .stcol-empty { color: #888888; }
html[data-skin="E"]:not([data-theme="dark"]) .board .stcb::-webkit-scrollbar-thumb { background: rgba(134,134,134, .35); }
html[data-skin="E"]:not([data-theme="dark"]) .board .stcb::-webkit-scrollbar-thumb:hover { background: rgba(134,134,134, .55); }

/* 表格：表头冷调、斑马纹更清楚（密集表格最容易"看不下去"） */
html[data-skin="E"]:not([data-theme="dark"]) #view table thead th { background: #f9f9f9; color: #656565; }
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr:nth-child(even) { background: #fdfdfd; }
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr:hover { background: #f8f8f8; }

/* 皮肤切换按钮（theme-toggle.js 挂的调色板）：保持和其它 tbtn 一致 */
#skinBtn .sk-dot {
  display: inline-block; width: 10px; height: 10px; border-radius:4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(28,28,28, .10);
}

/* ===========================================================================
   ★ 2026-10-07 交付前全站精修 v4（用户："整个项目所有模块页面，还有左边导航栏，
     全面帮我优化一下，做到更美观更高端" —— 42 个页面实拍走查后逐项收口）
   ---------------------------------------------------------------------------
   走查用的方法（可复跑）：`_qctest/visual-sweep.cjs` 依次点开 8 大类 42 个条目实拍，
   `_qctest/make-contact-sheet.cjs` 拼成 7 张缩略图总览，再逐张挑毛病。
   本段只做四件事（都在 E 皮肤下、只动表面，不动布局尺寸与取数）：
     A. 左栏精修：品牌块 / 类目轨选中态 / 条目排版 / 面板底部氛围
     B. 消灭"半屏死白"：内容不足一屏的页面，主卡撑满视口（而不是下面空一大片画布）
     C. 组件统一：卡片 / 表头 / 表格行 / 按钮 / 输入 / 胶囊 / KPI 数字 / 卡片标题
     D. 补齐漏网的老视觉：跨工段对账的"结论带"（is-ok 那半边还是深藏青）
   ========================================================================= */

/* —— A-1 品牌区：logo 换成圆角方片 + 内环 + 投影，标题/副标题层级拉开 —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar { position: relative; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(140deg, #898989 0%, #616161 100%);
  box-shadow: 0 10px 22px -10px rgba(167,167,167, .9), inset 0 0 0 1px rgba(255, 255, 255, .22);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand { padding: 4px 6px 14px; margin-bottom: 12px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand h1 { font-size:14px; line-height: 1.28; letter-spacing: .2px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand .sub { font-size:11px; letter-spacing: 1.6px; color: #8b8b8b; margin-top: 4px; }
/* 侧栏底部一层很淡的蓝氛围光：深色侧栏下半段不再是一块死黑 */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar::after {
  content: ""; position: absolute; left: 0; right: 1px; bottom: 0; height: 200px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(120% 72% at 26% 122%, rgba(147,147,147, .22), transparent 70%);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar > * { position: relative; z-index: 1; }

/* —— A-2 搜索框：更高、更圆、更像"输入框"而不是一条灰缝 —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search {
  height: 37px; border-radius:10px; margin: 0 4px 12px;
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search svg { opacity: .7; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search input { font-size: 13px; }

/* —— A-3 类目轨：命中区加大、图标 20px、选中＝整块品牌蓝（比描边更干净） —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-rail {
  padding: 6px 6px 10px; gap: 6px; width: 66px;
  background: linear-gradient(180deg, rgba(15,15,15, .52), rgba(15,15,15, .26));
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn {
  min-height: 58px; border-radius: 12px; font-size:11px; font-weight: 700;
  letter-spacing: .3px; color: #919191;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn svg { width: 20px; height: 20px; opacity: .95; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn:hover { background: rgba(255, 255, 255, .10); color: #f4f4f4; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on {
  background: linear-gradient(160deg, #7d7d7d 0%, #5b5b5b 100%);
  color: #FFFFFF; font-weight: 800;
  box-shadow: 0 12px 26px -14px rgba(147,147,147, .9), inset 0 0 0 1px rgba(255, 255, 255, .22);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on::before { display: none; }

/* —— A-4 条目面板：字号/行高/圆角统一，选中态更"实" —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-panel-h {
  font-size: 11px; letter-spacing: 1.8px; padding: 10px 8px; margin-bottom: 8px;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item {
  padding: 10px 12px; font-size:13px; border-radius:10px; margin-bottom: 2px;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item svg { width: 18px; height: 18px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(167,167,167, .34), rgba(167,167,167, .06));
  border-color: rgba(198,198,198, .34);
  box-shadow: inset 0 0 0 1px rgba(198,198,198, .16), 0 8px 18px -14px rgba(0, 0, 0, .85);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-badge {
  font-size:11px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .side-foot { padding: 10px 6px 4px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .conn { font-size:11px; letter-spacing: .2px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .side-foot .btn-ghost {
  width: 100%; height: 36px; border-radius: 10px; justify-content: center;
}

/* —— B. 消灭"半屏死白"：内容不足一屏的页面，让主卡撑满视口 ——
   （走查实测：人员报表主卡 436px、交接待办 484px，下面 700+px 全是空画布，"像坏了"）
   只针对"#view 里唯一的一个根卡片"，内容本来就高的页面不受影响（min-height 只兜底）。 */
html[data-skin="E"]:not([data-theme="dark"]) #view > :is(.ui-card, .pd-wrap, .panel, .rp-card, .dv-card):only-child {
  min-height: calc(100% - 2px);
  display: flex; flex-direction: column;
}
html[data-skin="E"]:not([data-theme="dark"]) #view > :is(.ui-card, .pd-wrap, .panel, .rp-card, .dv-card):only-child > :last-child {
  flex: 1 1 auto; min-height: 0;
}
/* 同一条规则补到"最后一个卡片"上：订单中心 / 设备管理 / 危险操作 这类页面
   = 顶部筛选卡 + 表格卡，撑满的应该是最后那张表格卡（走查实测：这些页只到 6~22%）。 */
html[data-skin="E"]:not([data-theme="dark"]) #view > :is(.ui-card, .pd-wrap, .panel, .rp-card, .dv-card,
  .oc-page, .oc-wrap, .mqz-page, .fqc-page, .sp-page, .ov3-page, .rp-wrap, .dv-wrap, .fl-page):last-child {
  min-height: calc(100% - 2px);
  display: flex; flex-direction: column;
}
html[data-skin="E"]:not([data-theme="dark"]) #view > :is(.ui-card, .pd-wrap, .panel, .rp-card, .dv-card,
  .oc-page, .oc-wrap, .mqz-page, .fqc-page, .sp-page, .ov3-page, .rp-wrap, .dv-wrap, .fl-page):last-child > :last-child {
  flex: 1 1 auto; min-height: 0;
}

/* —— C-1 卡片：统一圆角/描边/冷白渐变/双层阴影（含新出现的 .ui-card 家族） —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card, .ui-panel, .panel, .card, .pd-wrap > div,
  .rp-card, .dv-card, .fl-id, .ov3-card, .sp-panel, .mqz-card, .fqc-card) {
  border-radius: 16px;
  border: 1px solid var(--sk-line);
  background: linear-gradient(180deg, var(--ui-bg-card) 0%, #fdfdfd 60%, #fbfbfb 100%);
  box-shadow: 0 18px 40px -34px rgba(46,46,46, .55), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card-h, .ui-card-b, .ui-toolbar) { border-color: var(--sk-line-2); }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card-h, .sec-card h3, .tp-card-h) {
  font-size:14px; font-weight: 800; letter-spacing: .2px; color: var(--sk-ink);
}
/* 卡片标题：中文 15px/800、英文副题小一号拉开字距，左缘色条统一成品牌渐变 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.panel-h h2, .pd-head h2, .ui-card-h h2, .sec-card h3) {
  font-size:14px; font-weight: 800; letter-spacing: .2px; color: var(--sk-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.panel-h .bar, .sec-card .bar, .tp-card-h .bar, .pd-head .bar) {
  width: 4px; height: 16px; border-radius:4px;
  background: linear-gradient(180deg, #898989, #5b5b5b);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.panel-h .en, .pd-head .en, .sec-card .en) {
  font-size:11px; letter-spacing: 1.4px; color: var(--sk-ink-3); text-transform: uppercase;
}

/* —— C-2 表格：表头吸顶、行高 38、数字右对齐等宽；斑马纹与悬停都压得很淡 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view table thead th {
  height: 38px; padding: 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .2px;
  color: #656565; background: #f9f9f9; border-bottom: 1px solid var(--sk-line);
  position: sticky; top: 0; z-index: 2;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td {
  padding: 10px 12px; font-size:12px; color: var(--sk-ink-2);
  border-bottom: 1px solid var(--sk-line-2);
}
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr:nth-child(even) td { background: #fdfdfd; }
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr:hover td { background: #f8f8f8; }
html[data-skin="E"]:not([data-theme="dark"]) #view table :is(td, th).is-num,
html[data-skin="E"]:not([data-theme="dark"]) #view table :is(td, th)[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

/* —— C-3 按钮 / 输入 / 胶囊：同一套高度、圆角、字重与悬停反馈 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-btn, .btn, .sp-btn, .dv-btn, .mqz-btn, .mq-btn, .oc-btn, .rp-btn, .pd-btn) {
  height: 32px; padding: 0 12px; border-radius:8px; font-size:12px; font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-btn, .btn, .sp-btn, .dv-btn, .mqz-btn, .mq-btn, .oc-btn, .rp-btn, .pd-btn):not(.is-primary):not(.btn-primary):hover {
  border-color: #dadada; color: var(--sk-accent-deep); box-shadow: 0 8px 18px -14px rgba(99,99,99, .6);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(input[type="text"], input[type="search"], input[type="password"],
  input[type="number"], input:not([type]), select, textarea) {
  height: 32px; padding: 0 10px; border-radius:8px; border: 1px solid var(--sk-line);
  background: var(--ui-bg-card); color: var(--sk-ink); font-size:12px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(input[type="text"], input[type="search"], input[type="password"],
  input[type="number"], input:not([type]), select, textarea):focus {
  border-color: var(--sk-accent); box-shadow: 0 0 0 3px var(--sk-accent-soft); outline: 0;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.badge, .pill, .chip, .dv-tag, .sp-badge, .mqz-tag, .bp-tag, .sp-tag, .oc-chip) {
  border-radius: 999px; font-size:11px; font-weight: 600; padding: 2px 10px;
}

/* —— C-4 KPI 数字：所有家族统一成"更大更黑、等宽、轻微负字距" —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-val, .sp-kpi-val, .am-kpi-val, .bp-kpi-val,
  .q-kpi-val, .dv-kpi-val, .k-vl b, .odkpi-main .v) {
  font-variant-numeric: tabular-nums; letter-spacing: -.6px; color: var(--sk-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-label, .sp-kpi-label, .am-kpi-label, .bp-kpi-label,
  .q-kpi-label, .dv-kpi-label, .k-lb, .odkpi-main .l) {
  font-size:11px; font-weight: 700; letter-spacing: .5px; color: var(--sk-ink-3);
}

/* —— D. 跨工段对账的"结论带"：is-ok 那半边原来还是深藏青（is-bad 早已浅色化），补齐 —— */
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok {
  background: linear-gradient(180deg, var(--ui-bg-card), #fafafa); border: 1px solid var(--sk-line); color: var(--sk-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok :is(div, span, b, strong, em, i) { color: var(--sk-ink); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-v b { color: #0E8A5F; text-shadow: none; }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-l { border-right-color: var(--sk-line); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-s,
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-k { color: var(--sk-ink-3); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-badge {
  background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-r { background: rgba(255, 255, 255, .72); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-r:hover { background: #f9f9f9; }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok :is(.fl-vd-t, .fl-vd-e b) { color: var(--sk-ink); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-e { color: var(--sk-ink-2); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-op { color: var(--sk-ink-3); }
html[data-skin="E"]:not([data-theme="dark"]) .flow-page .fl-verdict.is-ok .fl-vd-go { color: var(--sk-accent-deep); }

/* —— E. 卡片头"结构化"：给卡头一条发丝分隔 + 极淡冷底，卡片立刻从"一片白"变成"有结构" ——
   （走查 42 页时最普遍的观感问题是"整张卡从头到尾一个白度"，加一条分隔就能立住骨架。） */
html[data-skin="E"]:not([data-theme="dark"]) #view .panel > .panel-h {
  padding-bottom: 12px; border-bottom: 1px solid var(--sk-line-2);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card-h, .tp-card-h, .sec-card > h3) {
  background: linear-gradient(180deg, #fbfbfb, #f8f8f8);
  border-bottom: 1px solid var(--sk-line);
  padding: 12px 16px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .ui-toolbar {
  background: linear-gradient(180deg, #fdfdfd, #fafafa);
  border-bottom: 1px solid var(--sk-line-2);
}

/* —— F. 正文字号回一档：2K/1080p 上现在都偏小（走查 42 页的普遍观感） —— */
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td { font-size: 13px; }
html[data-skin="E"]:not([data-theme="dark"]) #view table thead th { font-size:12px; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-kpi-label, .am-kpi-label, .bp-kpi-label,
  .q-kpi-label, .dv-kpi-label, .pk-label) { font-size: 12px; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-kpi-val, .am-kpi-val, .bp-kpi-val, .q-kpi-val,
  .dv-kpi-val, .pk-val) { font-size:28px; line-height: 1.05; }

/* ===========================================================================
   ★ 2026-10-07 交付前精修 v5 —— 全站"一套设计语言"收口
   ---------------------------------------------------------------------------
   依据：42 页实拍走查（_qctest/visual-sweep.cjs → sweep1/sweep3 两轮对照）。
   这一轮只做**让 42 个页面看起来像同一个产品**的收口，不碰任何取数与布局结构：
     ① 卡片体系统一（含各模块自建家族：订单中心/发货/质检/报表/设备/跨工段…）
     ② KPI 卡：语义底色保留，但白纱改成"左上白、右下透"的对角渐隐 ⇒ 卡面干净、右下留色晕
     ③ 表格容器 + 表体统一（含滚动区圆角、表头吸顶、行距、空态居中）
     ④ 工具条 / 筛选片 / 页签统一成同一套高度与描边
     ⑤ 空态统一：居中图标片 + 一句灰话
     ⑥ 滚动条、画布内距、页面头部节奏统一
   ========================================================================= */

/* —— ① 卡片体系统一：把各模块自建卡家族全部并进来 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(
  .ui-card, .ui-panel, .panel, .card, .pd-wrap > div, .rp-card, .dv-card, .fl-id,
  .ov3-card, .sp-panel, .mqz-card, .fqc-card, .oc-filtercard, .oc-tbl-wrap,
  .ov-tabs, .ov-act-c, .al-card, .ov-alert, .pk-card, .rp-hero, .dv-hero,
  .sp-hero, .am-hero, .rework-hero, .oc-hero, .sec-card, .tp-card, .ui-section) {
  border-radius: 16px;
  border: 1px solid var(--sk-line);
  background: linear-gradient(180deg, var(--ui-bg-card) 0%, #fdfdfd 60%, #fbfbfb 100%);
  box-shadow: 0 18px 40px -34px rgba(46,46,46, .55), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
/* 表格类卡片的滚动区：圆角裁切，滚动条细一档 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tbl-wrap, .tbl-wrap, .table-wrap,
  .sp-tbl-wrap, .dv-tbl-wrap, .mqz-tbl-wrap, .fqc-tblwrap) {
  overflow: hidden auto; border: 1px solid var(--sk-line); border-radius: 14px;
}

/* —— ② KPI：白纱改对角渐隐（左下白、右下透），语义色只在角落留一口气 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card)::after {
  background:
    radial-gradient(135% 140% at 0% 0%,
      rgba(255, 255, 255, .975) 0%,
      rgba(255, 255, 255, .94) 42%,
      rgba(255, 255, 255, .78) 78%,
      rgba(255, 255, 255, .68) 100%);
}
/* 未上色的 KPI（发货/系统管理那类）统一成冷白卡 + 左下角品牌色呼吸 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-kpi-card, .am-kpi-card) {
  border-color: var(--sk-line);
}

/* —— ③ 表格：容器与表体（#view table 已在 v4 统一，这里补"表体首列强调 + 表尾"）—— */
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td:first-child {
  color: var(--sk-ink); font-weight: 600;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table tfoot td,
html[data-skin="E"]:not([data-theme="dark"]) #view .tbl-foot,
html[data-skin="E"]:not([data-theme="dark"]) #view .table-foot {
  background: #fbfbfb; color: var(--sk-ink-2); font-size:12px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table td .cell-strong,
html[data-skin="E"]:not([data-theme="dark"]) #view table td b { color: var(--sk-ink); font-weight: 700; }

/* —— ④ 工具条 / 筛选片 / 页签：同一套高度（32）、描边、悬停 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-toolbar, .pd-toolbar, .filter-bar, .filters, .oc-controls) {
  min-height: 52px; padding: 10px 16px; gap: 8px;
  border-bottom: 1px solid var(--sk-line-2);
  background: linear-gradient(180deg, #fdfdfd, #fafafa);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tabs .tab, .mqz-tab, .fqc-tab, .rp-tab, .ov-tabs button, .seg, .segment, .pd-seg) {
  height: 30px; border-radius:8px; border: 1px solid transparent;
  font-size:12px; font-weight: 600; color: var(--sk-ink-2);
  background: #f8f8f8; transition: background .15s, color .15s, border-color .15s;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tabs .tab, .mqz-tab, .fqc-tab, .rp-tab, .ov-tabs button, .seg, .segment, .pd-seg):hover {
  background: var(--ui-bg-card); border-color: #dadada; color: var(--sk-accent-deep);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tabs .tab.active, .mqz-tab.on, .fqc-tab.on, .rp-tab.on,
  .seg.on, .segment.is-on, .pd-seg.on) {
  background: linear-gradient(180deg, var(--ui-bg-card), #f8f8f8);
  border-color: #d8d8d8; color: var(--sk-accent-deep); font-weight: 800;
  box-shadow: inset 0 2px 0 var(--sk-accent), 0 8px 18px -14px rgba(99,99,99, .55);
}

/* —— ⑤ 空态统一：居中图标片 + 一句灰话（各页原来 5 种写法）—— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.empty, .empty-state, .ui-empty, .pd-empty,
  .sp-empty, .mqz-empty, .fqc-empty, .no-data, .nodata, .ov-empty) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 168px; padding: 26px 18px;
  color: var(--sk-ink-3); font-size: 13px; letter-spacing: .2px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.empty, .empty-state, .ui-empty, .pd-empty,
  .sp-empty, .mqz-empty, .fqc-empty, .no-data, .nodata, .ov-empty) :is(svg, img) {
  width: 34px; height: 34px; padding: 8px; border-radius:10px;
  background: linear-gradient(180deg, #f8f8f8, #f2f2f2);
  border: 1px solid #e8e8e8; color: #969696; box-sizing: content-box;
}

/* —— ⑥ 画布与滚动条收口 —— */
html[data-skin="E"]:not([data-theme="dark"]) .view { padding: 18px 20px 26px; }
html[data-skin="E"]:not([data-theme="dark"]) #view::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-skin="E"]:not([data-theme="dark"]) #view::-webkit-scrollbar-thumb {
  background: #d8d8d8; border: 2px solid transparent; background-clip: padding-box; border-radius: 8px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view::-webkit-scrollbar-thumb:hover { background: #c3c3c3; background-clip: padding-box; }

/* ===========================================================================
   ★ 2026-10-07 交付前精修 v6 —— 深色模式补完（用户："没做完的全都做了"）
   ---------------------------------------------------------------------------
   此前深色模式的真实状态：**顶栏是深色、内容区还是白底黑字**（半成品，截图里一眼能看出）。
   这一节把深色补齐成一套完整色板：画布 / 卡片 / 表格 / 输入 / 胶囊 / KPI 白纱 / 空态 /
   结论带 / 滚动条，全部跟着 `--sk-*` 走；浅色模式不受影响（选择器都带 [data-theme="dark"]）。
   ========================================================================= */
html[data-theme="dark"] {
  --sk-page: #121212;
  --sk-page-2: #141414;
  --sk-card: #1b1b1b;
  --sk-soft: #242424;
  --sk-line: #313131;
  --sk-line-2: #272727;
  --sk-ink: #f0f0f0;
  --sk-ink-2: #999999;
  --sk-ink-3: #787878;
  --sk-accent: #898989;
  --sk-accent-2: #c6c6c6;
  --sk-accent-deep: #9c9c9c;
  --sk-accent-soft: rgba(167,167,167, .16);
  --sk-sh-1: 0 1px 2px rgba(0, 0, 0, .55);
  --sk-sh-2: 0 14px 30px -22px rgba(0, 0, 0, .85);
  --sk-sh-3: 0 24px 56px -34px rgba(0, 0, 0, .95);
  /* 老变量桥（app.css / theme.css 里那批 var()） */
  --brand: #898989; --brand-2: #9c9c9c; --brand-soft: #292929; --brand-glow: rgba(167,167,167, .20);
  --bg-0: #121212; --bg-1: #141414; --line: #313131; --line-strong: #3d3d3d;
  --txt: #f0f0f0; --txt-2: #999999; --txt-3: #787878;
  --panel: #1b1b1b; --panel-2: #242424; --panel-solid: #1b1b1b; --card: #1b1b1b;
  --ui-bg-page: #121212; --ui-bg-card: #1b1b1b; --ui-bg-soft: #242424;
  --ui-line-200: #313131; --ui-line-100: #272727;
  --ui-ink-900: #f0f0f0; --ui-ink-700: #d2d2d2; --ui-ink-500: #999999; --ui-ink-400: #868686; --ui-ink-300: #787878;
  --ui-brand-050: #292929; --ui-brand-100: #363636;
  --ui-sh-1: var(--sk-sh-1); --ui-sh-2: var(--sk-sh-2); --ui-sh-3: var(--sk-sh-3);
}
html[data-theme="dark"] body { background: var(--sk-page); }
html[data-theme="dark"] .bg-glow {
  background:
    radial-gradient(1200px 700px at 0% -12%, rgba(167,167,167, .10), transparent 58%),
    linear-gradient(180deg, #141414, #101010 60%, #141414);
}
html[data-theme="dark"] canvas#particles { opacity: .18; }

/* —— 外壳：顶栏 / 页签 / 左栏 —— */
html[data-theme="dark"] .topbar {
  background: linear-gradient(180deg, rgba(26,26,26, .96), rgba(20,20,20, .94));
  border-bottom: 1px solid #2b2b2b;
}
html[data-theme="dark"] .crumb .mt { color: #f4f4f4; }
html[data-theme="dark"] .crumb .ms, html[data-theme="dark"] .clock .d { color: #787878; }
html[data-theme="dark"] .clock .t { color: #f4f4f4; }
html[data-theme="dark"] .tbtn { background: #212121; border-color: #343434; color: #cacaca; }
html[data-theme="dark"] .tbtn:hover { background: #282828; border-color: #424242; color: #f4f4f4; box-shadow: none; }
html[data-theme="dark"] .tbtn.primary { background: linear-gradient(135deg, #6e6e6e, #545454); border-color: transparent; color: #fff; }
html[data-theme="dark"] .app-tab { background: #1e1e1e; border-color: #2e2e2e; color: #999999; }
html[data-theme="dark"] .app-tab:hover { background: #242424; border-color: #474747; color: #c6c6c6; }
html[data-theme="dark"] .app-tab.on {
  background: linear-gradient(180deg, #242424, #1d1d1d); border-color: #474747; color: #c6c6c6;
  box-shadow: inset 0 2px 0 var(--sk-accent);
}
html[data-theme="dark"] .sidebar {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(134,134,134, .20), transparent 62%),
    linear-gradient(180deg, #1c1c1c 0%, #181818 48%, #141414 100%);
  border-right-color: #292929;
}
html[data-theme="dark"] .sidebar .nav-rail { background: rgba(0, 0, 0, .30); border-right-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .sidebar .nr-btn { color: #7e7e7e; }
html[data-theme="dark"] .sidebar .nr-btn.on { background: linear-gradient(160deg, #5e5e5e, #474747); color: #fff; }
html[data-theme="dark"] .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(167,167,167, .26), rgba(167,167,167, .04));
  border-color: rgba(188,188,188, .24); color: #f4f4f4;
}
html[data-theme="dark"] .sidebar .nav-search { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }

/* —— 画布 —— */
html[data-theme="dark"] .view {
  background:
    radial-gradient(1200px 620px at 10% -10%, rgba(167,167,167, .08), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 176, 255, .05), transparent 58%),
    linear-gradient(180deg, #141414 0%, #101010 60%, #141414 100%);
}

/* —— 卡片 / 卡头 / 页头卡 —— */
html[data-theme="dark"] #view :is(
  .ui-card, .ui-panel, .panel, .card, .pd-wrap > div, .rp-card, .dv-card, .fl-id,
  .ov3-card, .sp-panel, .mqz-card, .fqc-card, .oc-filtercard, .ov-tabs, .ov-act-c,
  .al-card, .ov-alert, .rp-hero, .dv-hero, .sp-hero, .am-hero, .rework-hero, .oc-hero,
  .sec-card, .tp-card, .ui-section) {
  background: linear-gradient(180deg, #1d1d1d 0%, #1b1b1b 62%, #191919 100%);
  border-color: #313131;
  box-shadow: 0 20px 44px -36px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html[data-theme="dark"] #view :is(.ui-card-h, .ui-card-b, .ui-toolbar, .tp-card-h, .sec-card > h3) {
  background: linear-gradient(180deg, #232323, #1e1e1e);
  border-color: #313131;
}
html[data-theme="dark"] #view :is(.panel > .panel-h, .fl-id, .ui-toolbar) { border-color: #313131; }
html[data-theme="dark"] #view :is(.panel-h h2, .pd-head h2, .ui-card-h h2, .sec-card h3, .sp-hero-title,
  .am-hero-title, .oc-hero-title, .rework-hero h2) { color: #f4f4f4; }
html[data-theme="dark"] #view :is(.panel-h .en, .pd-head .en, .sec-card .en) { color: #787878; }

/* —— 表格 —— */
html[data-theme="dark"] #view table thead th { background: #232323; color: #999999; border-bottom-color: #343434; }
html[data-theme="dark"] #view table tbody td { color: #c9c9c9; border-bottom-color: #272727; }
html[data-theme="dark"] #view table tbody td:first-child { color: #f4f4f4; }
html[data-theme="dark"] #view table tbody tr:nth-child(even) td { background: #1e1e1e; }
html[data-theme="dark"] #view table tbody tr:hover td { background: #242424; }
html[data-theme="dark"] #view table tfoot td, html[data-theme="dark"] #view :is(.tbl-foot, .table-foot) { background: #1e1e1e; color: #999999; }

/* —— 表单 / 胶囊 / 工具条 / 页签 —— */
html[data-theme="dark"] #view :is(input[type="text"], input[type="search"], input[type="password"],
  input[type="number"], input:not([type]), select, textarea) {
  background: #1e1e1e; border-color: #383838; color: #f0f0f0;
}
html[data-theme="dark"] #view :is(.ui-btn, .btn, .sp-btn, .dv-btn, .mqz-btn, .mq-btn, .oc-btn, .rp-btn, .pd-btn):not(.is-primary):not(.btn-primary) {
  background: #212121; border-color: #343434; color: #cacaca;
}
html[data-theme="dark"] #view :is(.oc-tabs .tab, .mqz-tab, .fqc-tab, .rp-tab, .ov-tabs button, .seg, .segment, .pd-seg) {
  background: #1e1e1e; border-color: #2e2e2e; color: #999999;
}
html[data-theme="dark"] #view :is(.oc-tabs .tab.active, .mqz-tab.on, .fqc-tab.on, .rp-tab.on,
  .seg.on, .segment.is-on, .pd-seg.on) {
  background: linear-gradient(180deg, #272727, #212121); border-color: #474747; color: #c6c6c6;
  box-shadow: inset 0 2px 0 var(--sk-accent);
}
html[data-theme="dark"] #view :is(.badge, .pill, .chip, .dv-tag, .sp-badge, .mqz-tag, .bp-tag, .sp-tag, .oc-chip) {
  border-color: #383838;
}

/* —— KPI 白纱（深色版）与空态 —— */
html[data-theme="dark"] #view :is(.pk-card, .sp-kpi-card, .am-kpi-card)::after {
  background: radial-gradient(135% 140% at 0% 0%,
    rgba(29,29,29, .975) 0%, rgba(29,29,29, .94) 44%, rgba(29,29,29, .74) 100%);
}
html[data-theme="dark"] #view :is(.empty, .empty-state, .ui-empty, .pd-empty, .sp-empty, .mqz-empty,
  .fqc-empty, .no-data, .nodata, .ov-empty) { color: #787878; }
html[data-theme="dark"] #view :is(.empty, .empty-state, .ui-empty, .pd-empty, .sp-empty, .mqz-empty,
  .fqc-empty, .no-data, .nodata, .ov-empty) :is(svg, img) {
  background: linear-gradient(180deg, #272727, #212121); border-color: #383838; color: #717171;
}

/* —— 跨工段对账的结论带（深色版：深底 + 亮字，绿/红语义保留）—— */
html[data-theme="dark"] .flow-page .fl-verdict,
html[data-theme="dark"] .flow-page .fl-verdict.is-ok,
html[data-theme="dark"] .flow-page .fl-verdict.is-bad {
  background: linear-gradient(180deg, #1d1d1d, #191919);
  border: 1px solid #313131; color: #f0f0f0;
}
html[data-theme="dark"] .flow-page .fl-verdict :is(div, span, b, strong, em, i) { color: #f0f0f0; }
html[data-theme="dark"] .flow-page .fl-verdict.is-ok .fl-vd-v b { color: #34D399; }
html[data-theme="dark"] .flow-page .fl-verdict.is-bad .fl-vd-v b { color: #F87171; }
html[data-theme="dark"] .flow-page .fl-verdict .fl-vd-l { border-right-color: #313131; }
html[data-theme="dark"] .flow-page .fl-verdict .fl-vd-r { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .flow-page .fl-verdict .fl-vd-r:hover { background: rgba(167,167,167, .10); }
html[data-theme="dark"] .flow-page .fl-verdict .fl-vd-s,
html[data-theme="dark"] .flow-page .fl-verdict .fl-vd-k,
html[data-theme="dark"] .flow-page .fl-verdict .fl-vd-op { color: #868686; }
html[data-theme="dark"] .flow-page .fl-verdict.is-ok .fl-vd-badge { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .38); color: #7BE3B6; }
html[data-theme="dark"] .flow-page .fl-verdict.is-bad .fl-vd-badge { background: rgba(248, 113, 113, .16); border-color: rgba(248, 113, 113, .38); color: #FCA5A5; }

/* —— 滚动条（深色） —— */
html[data-theme="dark"] #view::-webkit-scrollbar-thumb { background: #3b3b3b; background-clip: padding-box; }
html[data-theme="dark"] #view::-webkit-scrollbar-thumb:hover { background: #4f4f4f; background-clip: padding-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #353535; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #474747; }

/* ===========================================================================
   ★ 2026-10-07 交付前精修 v7 —— 按"高端化建议 A–F"落地
   A 稀疏卡紧凑态（数据少时不再占半屏）／B KPI 数字当主角／C 图层感／
   D 页头指挥带／F 排印收口（E 图表专业化：色板与基线已统一，逐图参考线待排期）
   选择器全部限定在 E 皮肤 + 浅色，深色模式与其它皮肤不受影响。
   ========================================================================= */

/* —— A. 稀疏卡紧凑态：卡里是空态/无数据时，收起高度，别让一屏出现 400px 空白 ——
   （用 :has() 判定"卡内含空态"，只在 Chromium/Edge 生效，本项目就是 Edge） */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ov3-card, .bp-card, .rp-card, .dv-card,
  .sp-panel, .mqz-card, .fqc-card, .ui-card):has(:is(.empty, .empty-state, .ui-empty, .pd-empty,
  .no-data, .nodata, .ov-empty)) {
  min-height: 0 !important;
  max-height: 260px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.empty, .empty-state, .ui-empty, .pd-empty,
  .no-data, .nodata, .ov-empty) { min-height: 132px; padding: 18px 16px; }

/* —— B. KPI：数字当主角（38–40px/900）、标签降档、左缘身份色、悬停抬升 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-val, .sp-kpi-val, .am-kpi-val, .bp-kpi-val,
  .q-kpi-val, .dv-kpi-val, .odkpi-main .v, .k-vl b) {
  font-size: 40px; font-weight: 900; letter-spacing: -1.4px; line-height: 1.02;
  font-variant-numeric: tabular-nums; color: var(--sk-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-val, .sp-kpi-val, .am-kpi-val, .bp-kpi-val,
  .q-kpi-val, .dv-kpi-val, .k-vl) :is(span, em, i, sup).unit,
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-val, .sp-kpi-val, .k-vl) :is(span, em, i) {
  font-size: 14px; font-weight: 700; letter-spacing: .2px; color: var(--sk-ink-3);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card, .bp-kpi,
  .q-kpi, .odkpi, .ov-kpi-d, .dv-kpi-item) {
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card, .bp-kpi,
  .q-kpi, .odkpi, .ov-kpi-d, .dv-kpi-item)::before {
  content: ""; position: absolute; left: 0; right: auto; top: 15px; bottom: 15px; width: 3px;
  height: auto; border-radius:0 4px 4px 0; display: block;
  background: linear-gradient(180deg, #9c9c9c, #6e6e6e); opacity: .9;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card, .bp-kpi,
  .q-kpi, .odkpi, .ov-kpi-d, .dv-kpi-item):hover {
  transform: translateY(-2px); border-color: #dadada;
  box-shadow: 0 24px 46px -30px rgba(46,46,46, .55), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* —— C. 图层感：画布再深一档、卡片描边更利落、双层阴影、卡顶内高光 —— */
html[data-skin="E"]:not([data-theme="dark"]) {
  --sk-page: #ececec;
  --sk-page-2: #e5e5e5;
  --sk-sh-1: 0 1px 2px rgba(46,46,46, .07);
  --sk-sh-2: 0 14px 30px -22px rgba(46,46,46, .34);
  --sk-sh-3: 0 26px 60px -36px rgba(46,46,46, .50);
  --sk-line: #e4e4e4;
}
html[data-skin="E"]:not([data-theme="dark"]) .view {
  background:
    radial-gradient(1200px 620px at 10% -10%, rgba(134,134,134, .09), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 176, 255, .06), transparent 58%),
    linear-gradient(180deg, #f0f0f0 0%, #ebebeb 58%, #efefef 100%);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card, .ui-panel, .panel, .card,
  .pd-wrap > div, .rp-card, .dv-card, .fl-id, .ov3-card, .sp-panel, .mqz-card, .fqc-card,
  .oc-filtercard, .ov-tabs, .ov-act-c, .sec-card, .tp-card) {
  box-shadow: 0 1px 2px rgba(46,46,46, .07), 0 24px 52px -38px rgba(46,46,46, .62),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.rp-card, .dv-card, .ov3-card, .sec-card, .tp-card):hover {
  transform: translateY(-2px); border-color: #dcdcdc;
  box-shadow: 0 1px 2px rgba(46,46,46, .08), 0 30px 60px -40px rgba(46,46,46, .68),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

/* —— D. 页头指挥带：右侧柔光 + 底线 + 更醒目的标题/英文副题 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-hero, .am-hero, .rework-hero, .oc-hero,
  .rp-hero, .dv-hero, .pd-head, .sec-card, .ui-card-h) { position: relative; overflow: hidden; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-hero, .am-hero, .rework-hero, .oc-hero,
  .rp-hero, .dv-hero, .pd-head)::after {
  content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(134,134,134, .13), transparent 66%);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-hero-title, .am-hero-title, .oc-hero-title,
  .rework-hero h2, .pd-head h2) { font-size:20px; font-weight: 900; letter-spacing: -.2px; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.sp-hero-sub, .am-hero-sub, .rework-hero-sub,
  .pd-head .en) { font-size:11px; font-weight: 700; letter-spacing: 1.6px; color: var(--sk-ink-3); }

/* —— F. 排印收口：数字一律等宽、强调项加到 800 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(table td, table th, b, strong, .num, [data-num]) {
  font-variant-numeric: tabular-nums;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.panel-h h2, .ui-card-h h2, .sec-card h3,
  .tp-card-h, .pd-head h2) { font-weight: 800; letter-spacing: .1px; }

/* ===========================================================================
   ★ 2026-10-07 精修 v8 —— 左栏配色 + 右栏 KPI 卡（按"两处高亮互抢 / 整卡染色"两条诊断）
   诊断（用户截图「订单中心」实拍）：
     · 左栏：类目轨的亮蓝实心块 与 条目的蓝底胶囊 **两个高亮同时抢眼** ⇒ 反而"吵"；
             rail 与面板明度几乎一样 ⇒ 两级结构分不出；rail 标签偏小偏暗。
     · KPI：三张总览卡"灰白 / 灰白 / 整卡粉红"，色相不统一 ⇒ 像拼起来的；
             0 值卡与白底糊在一起；卡内没有第二信息位。
   改法：左栏"一个主高亮"（竖条+提亮，不做实心块）+ 明度台阶；KPI 统一"纯白卡 + 左缘色条"，
        语义色只留在数字/角标与一枚极淡的角晕上。
   ========================================================================= */

/* —— 左栏 A：rail 与面板拉开明度台阶（rail 更深、面板略亮）—— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-rail {
  background: linear-gradient(180deg, #161616 0%, #131313 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(166,166,166, .26), transparent 60%),
    linear-gradient(180deg, #2f2f2f 0%, #1e1e1e 46%, #181818 100%);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar::before {
  content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 240px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(120% 82% at 18% 0%, rgba(167,167,167, .16), transparent 70%);
}

/* —— 左栏 B：类目轨选中 = 竖条 + 提亮（撤掉实心蓝块，把主高亮让给当前条目）—— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn { font-size: 11px; color: #9d9d9d; letter-spacing: .2px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn svg { width: 20px; height: 20px; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on {
  background: rgba(167,167,167, .10); color: #f4f4f4; font-weight: 800;
  box-shadow: none;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on::before {
  content: ""; display: block; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius:0 4px 4px 0;
  background: linear-gradient(180deg, #cecece, #6e6e6e);
  box-shadow: 0 0 10px rgba(167,167,167, .9);
}

/* —— 左栏 C：条目 14px、未选中提亮，层次更清楚 —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item { font-size: 14px; color: #cecece; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-panel-h { color: #9d9d9d; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand { border-bottom-color: rgba(255, 255, 255, .08); }

/* —— KPI A：卡面统一纯白（把模块内联的整卡渐变压掉），语义色只留数字与角晕 ——
   ★ 2026-10-08 改：这里原来带 `!important`，等于**永久删掉**了每张卡自己的语义渐变
      （app.js 给 .pk-card 的内联 `background:linear-gradient(...)` 是"在产蓝/在制青/延期红/按时绿"），
      用户看到的就是"一排白卡"。现在去掉 !important：
        · 有内联语义渐变的卡（工序看板那排）⇒ 渐变生效，再由 skin-paper §17.3 的白纱压成**浅色调**；
        · 没有内联背景的卡 ⇒ 退回本条的白卡，外观不变。 */
/* ★ 2026-10-08：只留 `.am-kpi-card`（系统管理）用"纯白 !important"——
   它那批卡的内联底色是**深色**，一旦放开就会出现"深字压深底"（实测 1.15:1）。
   发货出库的 `.sp-kpi-card` 放开：让各自的语义渐变透出来，由 skin-paper §17.3 的白纱压成浅色调，
   与工序看板那排 KPI 变成同一套观感（用户："发货出库 KPI 卡片样式太丑"）。 */
html[data-skin="E"]:not([data-theme="dark"]) #view .am-kpi-card {
  background: var(--ui-bg-card) !important;
  border-color: #e4e4e4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(46,46,46, .07), 0 20px 44px -34px rgba(46,46,46, .55),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card)::after {
  background: radial-gradient(135% 140% at 0% 0%,
    rgba(255, 255, 255, .995) 0%, rgba(255, 255, 255, .975) 52%, rgba(255, 255, 255, .90) 100%);
}
/* 左缘身份色条：统一品牌渐变（原来的整卡染色撤掉后，靠这条表达"这是哪一类指标"） */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card)::before {
  content: ""; display: block; position: absolute; left: 0; right: auto; top: 14px; bottom: 14px;
  width: 3px; height: auto; border-radius:0 4px 4px 0;
  background: linear-gradient(180deg, #9c9c9c, #6e6e6e); opacity: .95;
}
/* 卡内第二信息位：细环与占比胶囊 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-ring, .sp-kpi-ring, .am-kpi-ring) svg circle { stroke: #efefef !important; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-ring, .sp-kpi-ring, .am-kpi-ring) svg circle + circle { stroke: var(--sk-accent) !important; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-ring-pct, .sp-kpi-pct, .am-kpi-pct) {
  font-size:11px; font-weight: 800; color: var(--sk-ink-2); font-variant-numeric: tabular-nums;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .grid.kpis { gap: 12px; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card) { min-height: 104px; }

/* —— KPI B：顶部那排状态胶囊收敛（满屏红黄 → 浅灰底 + 语义色文字，只有异常才红）—— */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-chip, .chip, .sp-badge, .dv-tag) {
  background: #f8f8f8; border: 1px solid #ececec; color: #656565;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-chip.is-warn, .chip.is-warn, .dv-tag.pending) {
  background: #FFF9EF; border-color: #F5E3C4; color: var(--ui-warn-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-chip.is-danger, .chip.is-danger, .dv-tag.maint) {
  background: #FFF5F6; border-color: #F5D3D8; color: var(--ui-danger-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-chip.is-info, .chip.is-info) {
  background: #f8f8f8; border-color: #e5e5e5; color: #545454;
}
/* 总览卡里那个大而空的进度条/占位：收细一档，别占走视觉重心 */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-bar { height: 3px; }

/* ===========================================================================
   ★ 2026-10-07 精修 v9 —— 定调：**冷灰蓝「纸面」+ 曜蓝结构色**（不再死磕纯白）
   ---------------------------------------------------------------------------
   用户原话：「别再死磕纯白了行不行，你就不能有自己的审美吗，我要的是工整兼具高端的风格」。
   我的审美判断（也是这次的设计语言）：
     · 纯白是"廉价感"的第一来源 —— 白底 + 浅灰描边会让所有卡片糊成一张纸。
     · 高端感来自**材料感**：画布是一块比卡片更深、更冷的"台面"，
       卡片是略暖于台面的"纸面"（带极轻的冷蓝调），两者之间有明确的 1px 分界与两层投影。
     · 工整来自**结构**：卡片一律有"头带 + 主体 + 脚注"三段，头带比主体深半档；
       同屏所有描边只用一种色（#dadada）、所有圆角只用两档（16 / 10）、
       间距只用 8 / 12 / 16 / 20 四档；颜色只用在结构位置（左缘、激活态、数字），不做装饰。
     · 层次只用**明度**表达，不用"多彩"表达 —— 多彩是廉价感的第二来源。
   三层明度（同一冷蓝色相，只差明度与饱和）：
     台面 canvas  #e2e2e2 → #dcdcdc
     卡面 paper   #fafafa → #f3f3f3   （比台面亮，但不是白）
     头部 band    #f0f0f0 → #eaeaea   （比主体深半档，撑起结构）
   ========================================================================= */
html[data-skin="E"]:not([data-theme="dark"]) {
  /* ① 三层材料 */
  --sk-page: #e2e2e2;
  --sk-page-2: #dcdcdc;
  --sk-card: #f7f7f7;
  --sk-soft: #f1f1f1;
  --sk-line: #dadada;          /* 全站唯一描边色 */
  --sk-line-2: #e8e8e8;
  /* ② 墨色加深一档（工整感很大一部分来自字色与底色的对比） */
  --sk-ink: #1a1a1a;
  --sk-ink-2: #4f4f4f;
  --sk-ink-3: #727272;
  /* ③ 结构色只用在结构上 */
  --sk-accent: #6e6e6e;
  --sk-accent-deep: #595959;
  --sk-accent-soft: rgba(134,134,134, .12);
  /* ④ 投影：贴地 1px + 扩散，深浅分明 */
  --sk-sh-1: 0 1px 2px rgba(36,36,36, .08);
  --sk-sh-2: 0 10px 24px -18px rgba(36,36,36, .40);
  --sk-sh-3: 0 26px 56px -34px rgba(36,36,36, .55);
}
/* 台面：加深 + 极淡纵向渐层（像一块有厚度的面板，而不是空白页） */
html[data-skin="E"]:not([data-theme="dark"]) .view {
  background:
    radial-gradient(1200px 600px at 12% -12%, rgba(134,134,134, .10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(0, 150, 220, .07), transparent 56%),
    linear-gradient(180deg, #e5e5e5 0%, #dfdfdf 55%, #e3e3e3 100%);
}
html[data-skin="E"]:not([data-theme="dark"]) body { background: var(--sk-page); }
/* 卡面：**不用白**，用冷调"纸面"；描边统一 #dadada；投影两层 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(
  .ui-card, .ui-panel, .panel, .card, .pd-wrap > div, .rp-card, .dv-card, .fl-id, .ov3-card,
  .sp-panel, .mqz-card, .fqc-card, .oc-filtercard, .oc-tbl-wrap, .ov-tabs, .ov-act-c, .al-card,
  .ov-alert, .rp-hero, .dv-hero, .sp-hero, .am-hero, .rework-hero, .oc-hero,
  .sec-card, .tp-card, .ui-section) {
  background: linear-gradient(180deg, #fbfbfb 0%, #f7f7f7 58%, #f3f3f3 100%) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(36,36,36, .08), 0 22px 48px -34px rgba(36,36,36, .50),
    inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}
/* ★ 2026-10-08：`.pk-card` 从上面那条 !important 的"纸面"名单里**摘出来单独写**，
   且**不带 !important** —— 这样：
     · 工序看板那排卡（app.js 内联 `background:linear-gradient(…在产蓝/在制青/延期红/按时绿)`）
       ⇒ 自己的语义渐变生效，再由 skin-paper §17.3 的白纱压成浅色调（用户要的"该加颜色的就加颜色"）；
     · 其它页没有内联底色的 .pk-card ⇒ 退回这条纸面渐变，外观与原来一致。
   （上面那条如果继续带着 .pk-card 和 !important，内联渐变永远赢不了 —— 实测踩过两次。） */
html[data-skin="E"]:not([data-theme="dark"]) #view .pk-card {
  background: linear-gradient(180deg, #fbfbfb 0%, #f7f7f7 58%, #f3f3f3 100%);
  border: 1px solid var(--sk-line) !important;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(36,36,36, .08), 0 22px 48px -34px rgba(36,36,36, .50),
    inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}
/* 头部带 / 工具条：比主体深半档 —— 这是"工整"的骨架 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card-h, .ui-card-b, .ui-toolbar, .tp-card-h,
  .sec-card > h3, .panel > .panel-h) {
  background: linear-gradient(180deg, #f1f1f1 0%, #ececec 100%);
  border-color: var(--sk-line);
}
html[data-skin="E"]:not([data-theme="dark"]) #view .panel > .panel-h { border-bottom: 1px solid var(--sk-line); }
/* KPI：卡面同样走"纸面"，左缘结构色条；撤掉上一版"纯白 !important" */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.bp-kpi, .q-kpi, .odkpi, .ov-kpi-d, .dv-kpi-item) {
  background: linear-gradient(180deg, #fbfbfb 0%, #f6f6f6 100%);
  border-color: var(--sk-line);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.pk-card, .sp-kpi-card, .am-kpi-card)::after {
  background: radial-gradient(135% 140% at 0% 0%,
    rgba(251,251,251, .98) 0%, rgba(247,247,247, .96) 52%, rgba(243,243,243, .90) 100%);
}
/* 表格：表头带加深、斑马与悬停都用同一冷蓝族，不用灰 */
html[data-skin="E"]:not([data-theme="dark"]) #view table thead th {
  background: linear-gradient(180deg, #f1f1f1, #ededed); color: #575757;
  border-bottom: 1px solid var(--sk-line);
}
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr:nth-child(even) td { background: #f4f4f4; }
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr:hover td { background: #efefef; }
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td { border-bottom: 1px solid #e8e8e8; }
/* 输入/按钮：底用纸面，选中态才亮一点 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(input[type="text"], input[type="search"],
  input[type="password"], input[type="number"], input:not([type]), select, textarea) {
  background: #f9f9f9; border-color: var(--sk-line); color: var(--sk-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(input, select, textarea):focus { background: var(--ui-bg-card); }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-btn, .btn, .sp-btn, .dv-btn, .mqz-btn, .mq-btn,
  .oc-btn, .rp-btn, .pd-btn):not(.is-primary):not(.btn-primary) {
  background: #f7f7f7; border-color: var(--sk-line); color: #505050;
}
/* 工整：同屏只保留两档圆角（16 面 / 10 控件），间距走 8 的倍数 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ui-card-h, .ui-toolbar, .tp-card-h) { border-radius:14px 14px 0 0; }
html[data-skin="E"]:not([data-theme="dark"]) #view .grid { gap: 12px; }

/* ===========================================================================
   ★ 2026-10-07 精修 v10 —— 左栏与新「冷灰蓝纸面」同源；订单中心"去乱"
   一、左栏：原来近黑的深藏青（#181818）压在冷灰蓝台面上，色相与明度都跳档，
       所以显得"突兀"。改成**同一块材料再深两档**（同一冷蓝色相、只差明度与饱和）：
         类目轨 #1d1d1d → 面板 #282828→#202020
       这样左栏是"深色版纸面"，与内容区同源，不再像另一个产品；
       强调色用 #898989（把内容区的 #6e6e6e 提亮一档，深底上才够亮）。
   二、订单中心"很乱"的四个来源与对策：
       ① 五个区块等重（3 张横幅 + 胶囊行 + 页头卡 + 双行筛选卡 + 表格）⇒ 压层级：
          KPI 三条并成一条 88px 的"指挥带"，页头卡收瘦，筛选卡合并成"主行 + 次行"两行
       ② 同一件事出现两次（延期 9 在 KPI 与胶囊行各一次）⇒ 胶囊行去彩色、只作筛选开关
       ③ 颜色噪声（黄/紫/绿/红混排）⇒ 只留"结构蓝 / 异常红 / 达成绿"三色，其余灰底
       ④ 表格不整（行高不一、进度条过粗、左条只在部分行）⇒ 行高 40、进度条 4px 圆角、
          左条只给异常行 + 异常行整行浅红底
   ========================================================================= */

/* —— 一、左栏同源化 —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(167,167,167, .22), transparent 62%),
    linear-gradient(180deg, #282828 0%, #202020 50%, #1b1b1b 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-rail {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border-right: 1px solid rgba(255, 255, 255, .07);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item { color: #d5d5d5; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn { color: #959595; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand h1 { color: #fafafa; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand .sub { color: #898989; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(167,167,167, .30), rgba(167,167,167, .05));
  border-color: rgba(198,198,198, .30); color: #FFFFFF;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item:hover { background: rgba(255, 255, 255, .09); }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-search {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-pin {
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .10);
}

/* —— 二① 订单中心：KPI 三条并成一条 88px 指挥带 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-kpi-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-kpi-grid > * {
  min-height: 88px; padding: 14px 18px; display: flex; align-items: center;
  justify-content: space-between; border-radius: 14px;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-kpi-grid > * :is(b, strong, .v, .val) {
  font-size:28px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-kpi-grid > * :is(.l, .label, .k) {
  font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--sk-ink-3);
}
/* 页头卡收瘦：标题已在顶栏，这里只当"口径说明条" */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-hero { padding: 12px 18px !important; min-height: 0; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-hero-title { font-size:16px !important; font-weight: 800; }

/* —— 二② 胶囊行去彩色：只作筛选开关，选中才给结构蓝 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-chips .oc-chip {
  background: #f4f4f4 !important; border: 1px solid var(--sk-line) !important; color: #595959 !important;
  font-weight: 600;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-chips .oc-chip.active,
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-chips .oc-chip.is-on {
  background: linear-gradient(180deg, #f3f3f3, #ececec) !important;
  border-color: #cccccc !important; color: #595959 !important; font-weight: 800;
  box-shadow: inset 0 2px 0 var(--sk-accent);
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-chips .oc-chip :is(b, i, span) { color: inherit !important; }

/* —— 二④ 表格工整：行高 40、进度条 4px、异常行整行浅红 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody tr { height: 40px; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td { height: 40px; vertical-align: middle; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.oc-order-no, td:first-child) {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sk-ink);
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(td, th).is-num,
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(td, th):nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.oc-progress, .oc-bar, .bar) { height: 4px; border-radius:999px; background: #ededed; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.oc-progress, .oc-bar, .bar) > i {
  height: 100%; border-radius:999px; background: linear-gradient(90deg, #878787, #6e6e6e);
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody tr.is-late td,
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody tr.is-overdue td { background: #FFF8F8; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody tr.is-late :is(.oc-progress, .oc-bar, .bar) > i,
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody tr.is-overdue :is(.oc-progress, .oc-bar, .bar) > i {
  background: linear-gradient(90deg, #F08A94, #DC2626);
}

/* ===========================================================================
   ★ 2026-10-07 精修 v11 —— 两处"审美定调"
   一、表格行高：**没必要 72px**。清单表是"读行"不是"读卡"，44px（≈ 8px 内距 + 13px 文字 +
       1.35 行高）才是工整又高效的高度 —— 一屏能从 9 行提到 15 行，且不再显空。
       做法：全站表格行统一 44px 起，模块里写死的行高/行内距/行高倍数一律压平。
   二、左栏底色：**不必是蓝的**。上一版把左栏调成带蓝的深藏青（#282828 + 蓝色顶光），
       结果蓝色同时在"左栏底"和"强调色"两处出现，强调色就不再珍贵。
       我的取法：左栏用**中性深灰蓝**（接近黑，饱和极低）当"机壳"，
       蓝只留在"选中竖条 / 条目激活 / 品牌标记"这三处 —— 这也是 Linear / Height 这类
       产品的做法：中性底色 + 唯一的饱和强调色。
   ========================================================================= */

/* —— 一、表格行高：全站 44px，模块写死的压平 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr { height: 44px; }
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td {
  padding: 8px 12px !important; height: 44px; line-height: 1.35 !important; vertical-align: middle;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table thead th { height: 36px; padding: 0 12px !important; }
/* 订单中心里那种"双行卡片式单元格"也一并压平（否则行高会被内层撑回去） */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.cell, .oc-cell, div) { line-height: 1.35 !important; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.cell-sub, .sub, .meta) { margin-top: 2px !important; }

/* —— 二、左栏：中性深灰蓝机壳，蓝只留给强调 —— */
html[data-skin="E"]:not([data-theme="dark"]) .sidebar {
  background: linear-gradient(180deg, #202020 0%, #1b1b1b 52%, #171717 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar::before {
  content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 220px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 16% 0%, rgba(255, 255, 255, .05), transparent 70%);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-rail {
  background: linear-gradient(180deg, #161616 0%, #121212 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-panel-h { color: #858585; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item { color: #d3d3d3; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn { color: #878787; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nr-btn.on {
  background: rgba(255, 255, 255, .06); color: #FFFFFF;
}
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .brand .sub,
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .conn { color: #808080; }
html[data-skin="E"]:not([data-theme="dark"]) .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(167,167,167, .26), rgba(167,167,167, .04));
  border-color: rgba(198,198,198, .26); color: #FFFFFF;
}
/* 行高被"某个单元格里的标签换行"撑到 85px：把标签与板号格压成单行、去掉行内换行，
   整行才能真正落到 44px（实测：td 内距与行高都已是 8/1.35，撑高来自标签换行）。 */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.badge, .chip, .tag, .pill) {
  white-space: nowrap; height: 20px; line-height: 18px; padding: 0 8px; display: inline-flex;
  align-items: center; vertical-align: middle;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table :is(.oc-tags, .board-cell, .oc-stage, .oc-cust) {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table td > :is(div, span) { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ===========================================================================
   ★ 2026-10-07 精修 v12 —— 左栏给出三档可选（不再由我猜第四遍）+ 行高收口
   一、左栏三个方案（切换：顶栏 🎨 → 左栏配色，或 localStorage['ot.nav']）：
        A 墨蓝（默认）：低饱和深墨蓝 #1f1f1f→#161616 —— 比上一版中性灰有"气"，比最早那版
          高饱和藏青克制；蓝只出现在选中竖条与激活条上。
        B 石墨：中性深灰 #181818→#121212 —— 最"机壳"，蓝色强调最跳。
        C 霜白：与内容区同一块纸面材料（#f7f7f7→#f0f0f0），描边 #dadada，文字深墨
          —— 全站"一整块材料"的工整路线（不是早期的"惨白"，因为内容区已有纸面/头带/台面三层）。
   二、行高：模块给 tr 写了固定高度，必须用 !important 才压得住 ⇒ 全站 44px。
   ========================================================================= */

/* —— 行高收口：撑高的是"格内多行标签"（板号列那几个合作标签换行），
     所以对订单表体做"单行 + 省略"：白空格不换行、溢出裁掉并出省略号（title 里仍有全文）。
     这是清单表的常规做法，也让整行真正落到 44px。 —— */
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody tr { height: 44px !important; max-height: 44px; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td :is(div, span, b, i, em) {
  white-space: nowrap;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td :is(div, span) {
  max-height: 24px; overflow: hidden;
}

/* —— A 墨蓝（默认）—— */
html[data-skin="E"]:not([data-theme="dark"]):not([data-nav]) .sidebar,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="ink"] .sidebar {
  background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 52%, #161616 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
html[data-skin="E"]:not([data-theme="dark"]):not([data-nav]) .sidebar::before,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="ink"] .sidebar::before {
  content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 220px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 16% 0%, rgba(188,188,188, .10), transparent 70%);
}
html[data-skin="E"]:not([data-theme="dark"]):not([data-nav]) .sidebar .nav-rail,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="ink"] .sidebar .nav-rail {
  background: linear-gradient(180deg, #161616, #111111); border-right: 1px solid rgba(255, 255, 255, .06);
}
html[data-skin="E"]:not([data-theme="dark"]):not([data-nav]) .sidebar .nav-item,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="ink"] .sidebar .nav-item { color: #d8d8d8; }
html[data-skin="E"]:not([data-theme="dark"]):not([data-nav]) .sidebar .nr-btn,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="ink"] .sidebar .nr-btn { color: #878787; }

/* —— B 石墨 —— */
html[data-skin="E"]:not([data-theme="dark"])[data-nav="graphite"] .sidebar {
  background: linear-gradient(180deg, #181818 0%, #141414 52%, #121212 100%);
  border-right: 1px solid rgba(255, 255, 255, .07);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="graphite"] .sidebar .nav-rail {
  background: linear-gradient(180deg, #121212, #0e0e0e); border-right: 1px solid rgba(255, 255, 255, .05);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="graphite"] .sidebar .nav-item { color: #cccccc; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="graphite"] .sidebar .nr-btn { color: #7b7b7b; }

/* —— C 霜白（与内容区同一块纸面）—— */
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar {
  background: linear-gradient(180deg, #f8f8f8 0%, #f3f3f3 55%, #f0f0f0 100%);
  border-right: 1px solid #dadada;
  box-shadow: 16px 0 44px -34px rgba(36,36,36, .45);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-rail {
  background: linear-gradient(180deg, #f0f0f0, #ebebeb); border-right: 1px solid #dfdfdf;
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-panel-h { color: #727272; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-item { color: #4f4f4f; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-item:hover { background: rgba(134,134,134, .08); color: #595959; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(134,134,134, .14), rgba(134,134,134, .02));
  border-color: #d6d6d6; color: #595959;
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nr-btn { color: #646464; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nr-btn.on { background: var(--ui-bg-card); color: #595959; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-search {
  background: var(--ui-bg-card); border-color: #dfdfdf; color: #727272;
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-search input { color: #1a1a1a; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-search input::placeholder { color: #898989; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .brand h1 { color: #1a1a1a; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .brand .sub,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .conn { color: #727272; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .brand { border-bottom-color: #e4e4e4; }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .nav-pin {
  background: var(--ui-bg-card); border-color: #e4e4e4;
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="frost"] .sidebar .btn-ghost {
  background: var(--ui-bg-card); border-color: #dfdfdf; color: #4f4f4f;
}

/* —— D 自定义色（用户在 🎨 里用取色器自己定；--nav-bg 由 JS 写入，
      文字色 --nav-ink 由 JS 按亮度自动选深/浅，rail 用 color-mix 压深 10%） —— */
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nav-bg, #1f1f1f), #ffffff 6%) 0%,
    var(--nav-bg, #1f1f1f) 52%,
    color-mix(in srgb, var(--nav-bg, #1f1f1f), #000000 6%) 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .nav-rail {
  background: color-mix(in srgb, var(--nav-bg, #1f1f1f), #000000 14%);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .brand h1,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .nav-item.active { color: var(--nav-ink, #FFFFFF); }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .nav-item { color: color-mix(in srgb, var(--nav-ink, #fff), transparent 22%); }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .nr-btn,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .brand .sub,
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .conn { color: color-mix(in srgb, var(--nav-ink, #fff), transparent 42%); }
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(167,167,167, .28), rgba(167,167,167, .04));
  border-color: rgba(198,198,198, .28);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .nav-search {
  background: color-mix(in srgb, var(--nav-bg, #1f1f1f), #ffffff 10%);
  border-color: rgba(255, 255, 255, .14);
}
html[data-skin="E"]:not([data-theme="dark"])[data-nav="custom"] .sidebar .brand { border-bottom-color: rgba(255, 255, 255, .10); }

/* —— 行高最后一道：订单表体里**所有**内层元素一律压到单行 24px（唯一还没命中的就是内层块） —— */
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td * {
  max-height: 24px !important; line-height: 1.2 !important; overflow: hidden !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td { line-height: 1.2 !important; padding: 8px 12px !important; }
/* ★ 真因（探测 9 个单元格**全是** 85px、内容只有 17–20px）：模块给表格写了
   `height:100%`，浏览器把"容器固定高度"平摊到每一行 ⇒ 行高由容器决定，改 tr/td 都没用。
   解法：让表格与 tbody 的高度回到内容自适应，行高才落得下来。 */
html[data-skin="E"]:not([data-theme="dark"]) #view table,
html[data-skin="E"]:not([data-theme="dark"]) #view table > tbody,
html[data-skin="E"]:not([data-theme="dark"]) #view table > thead { height: auto !important; }
/* 另一条可能的真因：模块直接给 td 写了 height（不是 tr）——之前我只给 td 设了 max-height，
   对表格单元格无效。这里把 td 高度也钉死。 */
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td { height: 44px !important; }
html[data-skin="E"]:not([data-theme="dark"]) #view .oc-table tbody td { height: 44px !important; min-height: 0 !important; }
/* ★ 最终真因：模块给 td 写了 min-height（≈84px）。表格单元格里 min-height 有效，
   所以 height:44 也压不下去 —— 内容只有 34px、scrollHeight 却 84px 就是这个原因。
   对全站表格单元格统一清掉 min-height 并钉死 44px。 */
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td,
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody th {
  min-height: 0 !important; height: 44px !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table tbody td :is(.oc-ship-btn, .badge, .chip, .tag) {
  height: 22px !important; padding: 0 8px !important; line-height: 20px !important;
}
/* ★ 最后一条（探测结论：表 1139px / tbody 1103px / 13 行 = 85px 一行，行内 HTML 干净、
   没有内联 height；说明"多出来的 567px"是**容器高度**传下来的 —— 表格被要求填满一个固定高的滚动区，
   `height:auto!important` 只解了 table 自身，容器仍在要求填满）。这里把容器那一层也放回自适应。 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tbl-wrap, .tbl-wrap, .table-wrap,
  .sp-tbl-wrap, .dv-tbl-wrap, .mqz-tbl-wrap, .fqc-tblwrap),
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tbl-wrap, .tbl-wrap, .table-wrap,
  .sp-tbl-wrap, .dv-tbl-wrap, .mqz-tbl-wrap, .fqc-tblwrap) > * {
  height: auto !important; min-height: 0 !important; max-height: none !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table.oc-table,
html[data-skin="E"]:not([data-theme="dark"]) #view table.oc-table > tbody,
html[data-skin="E"]:not([data-theme="dark"]) #view table.oc-table > tbody > tr,
html[data-skin="E"]:not([data-theme="dark"]) #view table.oc-table > tbody > tr > td {
  height: auto !important; min-height: 0 !important; max-height: none !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view table.oc-table > tbody > tr > td {
  padding: 10px 12px !important; line-height: 1.3 !important;
}

/* ===========================================================================
   ★ 2026-10-07 修复 P0 —— 选中页签"白字压白底"看不清（用户截图实证）
   真因：模块 CSS 给 `.ov-tabs button.on b/i` 写死了 `color:#fff`（皮肤第 8 节早期版本），
   而 v5 之后我把"选中态底色"改成了白→浅蓝渐变 ⇒ 白字压在近白底上 = 看不见。
   修法（两手一起）：① 选中态改成**实心品牌渐变胶囊 + 白字**（对比度够、也更"工整"：
   一片纸色页签里只有当前这一个是实心）；② 显式给所有页签家族的**子元素**上色，
   避免再出现"父改了、子还是老白字"这类低级问题。
   ========================================================================= */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tabs .tab.active,
  .mqz-tab.on, .fqc-tab.on, .rp-tab.on, .seg.on, .segment.is-on, .pd-seg.on, .tab.active, .tab.on) {
  background: linear-gradient(180deg, #797979 0%, #555555 100%) !important;
  border-color: #555555 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 20px -14px rgba(96,96,96, .75), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tabs .tab.active,
  .mqz-tab.on, .fqc-tab.on, .rp-tab.on, .seg.on, .segment.is-on, .pd-seg.on, .tab.active, .tab.on)
  :is(b, i, em, strong, span, small, div) {
  color: #FFFFFF !important;
}
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.oc-tabs .tab.active,
  .mqz-tab.on, .fqc-tab.on, .rp-tab.on, .seg.on, .segment.is-on, .pd-seg.on, .tab.active, .tab.on)
  :is(i, small) { color: rgba(255, 255, 255, .78) !important; }
/* 未选中页签：纸面底 + 深墨字，保证在台面上也读得清 */
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ov-tabs button, .oc-tabs .tab, .mqz-tab,
  .fqc-tab, .rp-tab, .seg, .segment, .pd-seg, .tab) { color: #505050 !important; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ov-tabs button, .oc-tabs .tab, .mqz-tab,
  .fqc-tab, .rp-tab, .seg, .segment, .pd-seg, .tab) :is(b, strong) { color: #505050 !important; }
html[data-skin="E"]:not([data-theme="dark"]) #view :is(.ov-tabs button, .tab) :is(i, small) { color: #727272 !important; }
/* 深色模式同样修（选中=亮蓝实心 + 白字，子元素一并上色） */
html[data-theme="dark"] #view :is(.oc-tabs .tab.active, .mqz-tab.on, .fqc-tab.on,
  .rp-tab.on, .seg.on, .segment.is-on, .pd-seg.on, .tab.active, .tab.on) {
  background: linear-gradient(180deg, #797979, #555555) !important;
  border-color: #5e5e5e !important; color: #FFFFFF !important;
}
html[data-theme="dark"] #view :is(.oc-tabs .tab.active, .mqz-tab.on, .fqc-tab.on,
  .rp-tab.on, .seg.on, .segment.is-on, .pd-seg.on, .tab.active, .tab.on)
  :is(b, i, em, strong, span, small, div) { color: #FFFFFF !important; }