:root {
  --bg: #0f1418;
  --panel: #161d23;
  --panel-2: #1c252c;
  --line: #2a3540;
  --txt: #e6edf3;
  --dim: #93a3b1;
  --accent: #38bdf8;
  --accent-2: #0ea5e9;
  --warn: #e0a13a;
  --danger: #e4595b;
  --ok: #2fbf71;
  --grad: linear-gradient(135deg, #38bdf8, #0ea5e9 70%, #0284c7);
  --grad-btn: linear-gradient(135deg, #0ea5e9, #0369a1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
}

h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 10px; color: #fff; }
h3 { font-size: 14px; margin: 16px 0 8px; color: var(--accent); }

/* --------- 顶栏 --------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06121a; font-weight: 800; letter-spacing: 1px;
}
.sub { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.actor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.actor label { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; }
.actor input { width: 90px; }

/* --------- 列表行定位高亮（NCR / 变更单单据深链） --------- */
tr.row-hit > td { background: rgba(56, 189, 248, 0.16) !important; }
tr.row-hit > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
html[data-theme='light'] tr.row-hit > td { background: #e6f4fd !important; }
@media (prefers-reduced-motion: reduce) { tr.row-hit { transition: none; } }

/* --------- 电子签名对话框（替代原生 prompt()） --------- */
.sig-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 12, 17, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.sig-mask[hidden] { display: none; }
.sig-box {
  width: min(520px, 96vw); max-height: 92vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.sig-box h3 { margin: 0 0 4px; color: var(--accent); font-size: 16px; }
.sig-box .sig-desc { margin: 0 0 12px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.sig-fields { display: grid; gap: 10px; }
.sig-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 12.5px; }
.sig-fields input, .sig-fields textarea { width: 100%; font: inherit; }
.sig-box .actions { margin-top: 14px; flex-wrap: wrap; }
html[data-theme='light'] .sig-box { background: #fff; }
html[data-theme='light'] .sig-mask { background: rgba(20, 32, 42, 0.42); }
@media (max-width: 640px) {
  .sig-box { padding: 14px; }
  .sig-box .actions button { flex: 1 1 auto; }
}

/* --------- 批号上下文条（生产部：全局共享"当前批号"） --------- */
.batch-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 0 0 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent-2);
  border-radius: 10px;
}
.batch-bar[hidden] { display: none; }
.batch-bar .bb-label { color: var(--dim); font-size: 13px; }
.batch-bar .bb-no {
  font-weight: 700; letter-spacing: .3px; color: var(--accent-2);
  padding: 4px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line);
  user-select: all;
}
.batch-bar .bb-no.empty { color: var(--dim); font-weight: 500; }
.batch-bar input.batch-q { flex: 1 1 320px; min-width: 0; max-width: 100%; }
.batch-bar .bb-hint { flex: 1 1 100%; color: var(--dim); font-size: 12.5px; }
html[data-theme='light'] .batch-bar { background: #fff; }
@media (max-width: 640px) {
  .batch-bar { gap: 6px; padding: 9px 10px; }
  .batch-bar .bb-hint { font-size: 12px; }
  .batch-bar input.batch-q { flex: 1 1 100%; }
}

/* --------- 表单控件 --------- */
input, select, button {
  font: inherit; color: var(--txt); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
input[readonly] { color: var(--dim); }
input.wide { flex: 1 1 420px; min-width: 0; max-width: 100%; }
button { cursor: pointer; }
button:hover { border-color: var(--accent-2); }
button.primary { background: var(--grad-btn); color: #fff; border-color: transparent; font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.danger { background: transparent; color: var(--danger); border-color: #4a2b2c; }
button.small { padding: 3px 8px; font-size: 12px; }

/* --------- 标签页 --------- */
.tabs { display: flex; gap: 6px; padding: 10px 20px 0; flex-wrap: wrap; }
.tabs button { background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; color: var(--dim); }
.tabs button.active { background: var(--panel); color: #fff; border-color: var(--line); }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.subtabs button.active { background: var(--accent-2); color: #04141f; border-color: var(--accent-2); font-weight: 600; }

/* --------- 溯源树图（Q55） --------- */
.tree-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .tree-grid { grid-template-columns: 1fr; } }
.tree-grid h4 { margin: 4px 0 6px; color: var(--dim); font-weight: 600; font-size: 13px; }
pre.tree {
  margin: 0;
  padding: 10px 12px;
  background: #0d1117;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 460px;
  overflow: auto;
}
pre.tree a { color: var(--accent-2); text-decoration: none; }
pre.tree a:hover { text-decoration: underline; }
pre.tree .hint { color: var(--dim); }

main { padding: 14px 20px 40px; }
.panel { display: none; }
.panel.active { display: block; }

/* --------- 卡片布局 --------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }
.hint { color: var(--dim); font-size: 12.5px; margin: 0 0 10px; }

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.form.row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.form label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 12.5px; }
.form label.span2 { grid-column: span 2; }

/* 上工序序码多选框 */
.multi-box {
  max-height: 170px; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; background: var(--panel-2); color: var(--txt);
}
.multi-box label {
  flex-direction: row; align-items: center; gap: 8px; color: var(--txt);
  font-size: 13px; padding: 3px 0; margin: 0; cursor: pointer;
}
.multi-box input[type='checkbox'] { width: auto; }
.multi-box .mono { color: var(--accent); }

/* ★ 批次创建：上工序批次勾选框（外层用 div 避免 label 嵌套；视觉与 .form label 一致） */
.form > .field { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 12.5px; }
.form > .field.span2 { grid-column: span 2; }
.multi-box.tall { max-height: 260px; padding: 8px 12px; }
.multi-box label { align-items: flex-start; }
.multi-box .up-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.multi-box .up-meta { color: var(--dim); font-size: 12px; line-height: 1.4; }
.form label select, .form label input { width: 100%; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* --------- 批号展示 --------- */
.preview { display: flex; flex-direction: column; }
.batch-no {
  font-family: Consolas, "Courier New", monospace; font-size: 22px; font-weight: 700;
  letter-spacing: 1px; color: var(--accent); word-break: break-all;
  background: #0b1b26; border: 1px dashed #1d4d63; border-radius: 10px; padding: 14px; text-align: center;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip {
  display: inline-flex; gap: 6px; align-items: center; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px;
}
.chip b { color: var(--accent-2); font-family: Consolas, monospace; }
.chip.clickable { cursor: pointer; }
.chip.clickable:hover { border-color: var(--accent); }
.preview-status { min-height: 20px; font-size: 13px; }
.preview-status .bad { color: var(--danger); }
.preview-status .good { color: var(--ok); }

/* --------- 表格 --------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 500; background: #131a1f; position: sticky; top: 0; }
tbody tr:hover { background: #1a232a; }
td.mono, .mono { font-family: Consolas, monospace; }
.table-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }

/* --------- 状态徽标 --------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--line); color: var(--dim); background: var(--panel-2);
}
.pill.ok { color: #a6f0d8; border-color: #2c6b57; background: #102420; }
.pill.bad { color: #ffb3b4; border-color: #7d3a3b; background: #2a1414; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid; }
.badge.created { color: #9fd2ff; border-color: #2b5a7d; background: #12222e; }
.badge.running { color: #ffd79a; border-color: #7d5f2b; background: #2a2113; }
.badge.completed { color: #a6f0d8; border-color: #2c6b57; background: #102420; }
.badge.closed { color: #b9c6d1; border-color: #47535e; background: #1a2126; }
.badge.void { color: #ffb3b4; border-color: #7d3a3b; background: #2a1414; }
.badge.on { color: #a6f0d8; border-color: #2c6b57; }
.badge.off { color: #ffb3b4; border-color: #7d3a3b; }

/* --------- 溯源结果 --------- */
.trace-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.trace-head .batch-no { font-size: 18px; padding: 8px 12px; text-align: left; }
.integrity { font-size: 12.5px; color: var(--dim); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.kv div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.kv span { color: var(--dim); font-size: 12px; display: block; }
.alert { border-radius: 8px; padding: 9px 12px; margin: 8px 0; font-size: 13px; border: 1px solid; }
.alert.err { color: #ffc9c9; border-color: #7d3a3b; background: #241314; }
.alert.ok { color: #b7f0dd; border-color: #2c6b57; background: #102420; }
.alert.info { color: #cfe3f5; border-color: #2b5a7d; background: #111f2a; }

/* --------- 登录遮罩（Q36：必须登录才能操作） --------- */
.login-mask {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 20%, #16232b, #0b1014 70%);
}
/* ★ 必须用 ID+双类压过下面的 #login-mask.login-mask{display:block}：
   否则登录成功后遮罩不消失，用户看到的就是「点了登录没反应」（服务端其实已登录成功）。 */
#login-mask.login-mask.hide,
.login-mask.hide { display: none; }
.login-box {
  width: min(460px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.login-box h2 { font-size: 17px; margin: 0 0 6px; }

/* --------- 详情抽屉（基础数据详情页） --------- */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none; transition: 0.2s; z-index: 90;
}
.drawer-mask.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; width: min(760px, 96vw); height: 100%;
  background: var(--panel); border-left: 1px solid var(--line);
  transform: translateX(102%); transition: 0.22s; z-index: 91;
  overflow: auto; padding: 16px 18px 40px;
}
.drawer.show { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.drawer h2 { margin: 2px 0 0; font-size: 16px; }
.detail-grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; }
.detail-grid .k { color: var(--dim); }
.ref-link { color: var(--accent-2); cursor: pointer; text-decoration: none; border-bottom: 1px dashed rgba(14, 165, 233, 0.5); margin-right: 10px; }
.ref-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --------- 提示 --------- */
.toast {
  position: fixed; right: 20px; bottom: 20px; max-width: 420px; padding: 12px 16px;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; opacity: 0; transform: translateY(10px); transition: .2s; pointer-events: none;
  font-size: 13px; z-index: 99; white-space: pre-wrap;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { border-left-color: var(--danger); }

/* ================= 界面美化层（Q69：视觉升级，纯覆盖，不改结构） ================= */
:root {
  --bg: #0d1216;
  --panel: #151d23;
  --panel-2: #1b242c;
  --panel-3: #212c35;
  --line: #2b3843;
  --line-soft: #232e38;
  --txt: #e9f0f6;
  --dim: #94a6b4;
  --accent: #38bdf8;
  --accent-2: #7dd3fc;
  --grad: linear-gradient(135deg, #38bdf8, #0ea5e9 70%, #0284c7);
  --grad-btn: linear-gradient(135deg, #0ea5e9, #0369a1);
  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.45);
  --radius: 12px;
}

html { -webkit-font-smoothing: antialiased; }
body { background: radial-gradient(1200px 600px at 15% -10%, #16222b 0%, var(--bg) 55%) fixed; }

/* --------- 顶栏 --------- */
.topbar {
  background: linear-gradient(180deg, rgba(28, 38, 46, 0.92), rgba(21, 29, 35, 0.92));
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), var(--shadow-1);
  position: sticky; top: 0; z-index: 60;
}
.logo { box-shadow: 0 6px 16px rgba(56, 189, 248, 0.25); }
h1 { letter-spacing: 0.2px; }

/* --------- 按钮 --------- */
button { transition: background .16s ease, border-color .16s ease, color .16s ease, transform .06s ease, box-shadow .16s ease; }
button:hover { border-color: var(--accent-2); background: var(--panel-3); }
button:active { transform: translateY(1px); }
button.primary { background: var(--grad-btn); border: none; color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(56, 189, 248, 0.28); }
button.primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(56, 189, 248, 0.4); }
button.danger { border-color: #563031; }
button.chip { padding: 4px 10px; font-size: 12.5px; border-radius: 999px; background: var(--panel-2); color: var(--dim); border: 1px solid var(--line); }
button.chip:hover { color: #06121a; background: var(--accent); border-color: var(--accent); }

/* --------- 表单控件 --------- */
input, select, textarea { transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
input:hover, select:hover, textarea:hover { border-color: #38485a; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: #1e2932; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14); }
input::placeholder, textarea::placeholder { color: #6d7f8d; }
select option, select optgroup { background: #131b21; color: var(--txt); }

/* --------- 卡片 --------- */
.card {
  background: linear-gradient(180deg, rgba(27, 36, 44, 0.7), rgba(21, 29, 35, 0.7));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-1); transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: #32414f; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32); }
.card h2 { display: flex; align-items: center; gap: 8px; }
.card h2::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: var(--grad); display: inline-block; }
h3 { display: flex; align-items: center; gap: 8px; }
h3::before { content: ''; width: 3px; height: 13px; border-radius: 3px; background: var(--accent-2); display: inline-block; }

/* --------- 标签页 --------- */
.tabs { gap: 4px; }
.tabs button { padding: 8px 14px; font-size: 13.5px; transition: color .16s ease, background .16s ease; }
.tabs button:hover { color: var(--txt); background: rgba(255, 255, 255, 0.03); }
.tabs button.active { background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(21, 29, 35, 0.9)); color: #fff; border-color: var(--line); box-shadow: inset 0 2px 0 var(--accent); }
.subtabs button.active { background: var(--accent-2); box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25); }

/* --------- 表格 --------- */
.table-wrap { border-color: var(--line-soft); box-shadow: var(--shadow-1); }
th { background: #121a20; letter-spacing: .2px; border-bottom: 1px solid var(--line); }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
tbody tr:hover { background: rgba(56, 189, 248, 0.06); }
td, th { padding: 8px 10px; }

/* --------- 徽标 / 提示 --------- */
.pill { backdrop-filter: blur(4px); }
.badge { font-weight: 500; }
.alert { border-left-width: 4px; border-radius: 10px; }
.alert.err { border-left-color: var(--danger); }
.alert.ok { border-left-color: var(--ok); }
.alert.info { border-left-color: var(--accent-2); }
.hint { color: var(--dim); }
code { background: #10181e; border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 6px; font-family: Consolas, monospace; }

/* --------- 滚动条 --------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #10171c; }
::-webkit-scrollbar-thumb { background: #2c3a45; border-radius: 8px; border: 2px solid #10171c; }
::-webkit-scrollbar-thumb:hover { background: #3a4b58; }

/* --------- 登录页（重做视觉） --------- */
.login-mask {
  background:
    radial-gradient(900px 480px at 18% 8%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(800px 520px at 88% 92%, rgba(56, 189, 248, 0.16), transparent 62%),
    linear-gradient(160deg, #0f1a20 0%, #0a0f13 60%, #0b1116 100%);
}
.login-box {
  width: min(560px, 94vw); border-radius: 18px; padding: 24px 26px 22px;
  background: linear-gradient(180deg, rgba(28, 38, 47, 0.96), rgba(18, 25, 31, 0.98));
  border: 1px solid #2f3d49; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative; overflow: hidden;
}
.login-box::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.logo.big { width: 52px; height: 52px; border-radius: 14px; font-size: 15px; }
.login-box h2 { font-size: 19px; margin: 0 0 4px; color: #fff; }
.quick-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.login-box .form label { color: var(--dim); font-size: 12.5px; }
.login-box input, .login-box select { width: 100%; padding: 10px 12px; font-size: 14px; border-radius: 10px; }
.login-box .actions { gap: 8px; margin-top: 12px; }
.login-box #login-error .alert { margin-top: 10px; }

@media (max-width: 720px) {
  .topbar { padding: 10px 12px; }
  .tabs { padding: 8px 12px 0; }
  .card { padding: 12px; }
  .login-box { padding: 18px; }
}

/* ================= Q70：浅色主题 · 看板 · 列与导出 · 移动端 ================= */

/* 浅色主题（data-theme="light"）：仅覆盖颜色令牌，不影响结构 */
html[data-theme='light'] {
  --bg: #f2f5f8;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --panel-3: #eef2f7;
  --line: #d7dee7;
  --line-soft: #e4e9ef;
  --txt: #1a2530;
  --dim: #5d6e7e;
  --shadow-1: 0 6px 18px rgba(24, 39, 58, 0.08);
  --shadow-2: 0 18px 50px rgba(24, 39, 58, 0.16);
  --accent: #0284c7;
  --accent-2: #0ea5e9;
  --grad: linear-gradient(135deg, #38bdf8, #0ea5e9 70%, #0284c7);
  --grad-btn: linear-gradient(135deg, #0ea5e9, #0369a1);
}
html[data-theme='light'] body { background: radial-gradient(1200px 600px at 15% -10%, #e8f0f7 0%, var(--bg) 55%) fixed; }
html[data-theme='light'] .topbar { background: linear-gradient(180deg, #ffffff, #f7fafc); }
html[data-theme='light'] .card { background: #ffffff; }
html[data-theme='light'] th { background: #f1f5f9; color: #45596b; }
html[data-theme='light'] tbody tr:nth-child(even) { background: #fafcfe; }
html[data-theme='light'] tbody tr:hover { background: #eaf6fe; }
html[data-theme='light'] input, html[data-theme='light'] select, html[data-theme='light'] textarea { background: #fff; color: var(--txt); }
html[data-theme='light'] select option, html[data-theme='light'] select optgroup { background: #fff; color: var(--txt); }
html[data-theme='light'] pre.tree, html[data-theme='light'] code { background: #f4f7fa; color: #1a2530; }
html[data-theme='light'] .login-mask {
  background:
    radial-gradient(900px 480px at 18% 8%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(800px 520px at 88% 92%, rgba(56, 189, 248, 0.2), transparent 62%),
    linear-gradient(160deg, #eef4f9 0%, #e6edf3 60%, #f2f6fa 100%);
}
html[data-theme='light'] .login-box { background: #ffffff; border-color: #dbe3ec; }
html[data-theme='light'] .login-box h2 { color: #16232c; }
html[data-theme='light'] button.primary { color: #fff; }
html[data-theme='light'] .badge.created { color: #1a5c8a; }
html[data-theme='light'] ::-webkit-scrollbar-track { background: #eef2f6; }
html[data-theme='light'] ::-webkit-scrollbar-thumb { background: #c6d2de; border-color: #eef2f6; }

/* 登录页精简样式（仅名称/用户名/密码/登录/忘记密码） */
.login-box .actions { justify-content: flex-start; align-items: center; }
button.link {
  background: transparent; border: none; color: var(--accent-2); padding: 6px 4px;
  text-decoration: underline; text-underline-offset: 3px; font-size: 13px;
}
button.link:hover { color: var(--accent); background: transparent; }
.login-box .form label { font-size: 13px; }

/* 车间看板（大屏） */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dash-card {
  background: linear-gradient(180deg, rgba(27, 36, 44, 0.85), rgba(21, 29, 35, 0.85));
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
html[data-theme='light'] .dash-card { background: #fff; }
.dash-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent-2); }
.dash-card.good::after { background: var(--ok); }
.dash-card.warn::after { background: var(--warn); }
.dash-card.bad::after { background: var(--danger); }
.dash-k { color: var(--dim); font-size: 13px; }
.dash-v { font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: 0.5px; }
.dash-s { color: var(--dim); font-size: 12px; }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.dash-cols > .span2 { grid-column: span 2; }
@media (max-width: 900px) { .dash-cols > .span2 { grid-column: auto; } }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
.dash-row:last-child { border-bottom: none; }
.dash-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; position: relative; padding: 4px 0; font-size: 13px; }
.dash-bar-k { color: var(--dim); z-index: 1; }
.dash-bar-v { font-weight: 700; z-index: 1; }
.dash-bar-fill { position: absolute; left: 0; bottom: 0; height: 100%; background: rgba(56, 189, 248, 0.14); border-radius: 6px; }
html[data-theme='light'] .dash-bar-fill { background: rgba(56, 189, 248, 0.2); }

/* 列自定义 */
#col-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#col-picker label.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--dim); background: var(--panel-2); }
#col-picker input[type='checkbox'] { width: auto; margin: 0; }

/* 移动端适配（Q70⑤） */
@media (max-width: 820px) {
  .topbar { gap: 8px; }
  .topbar .brand h1 { font-size: 15px; }
  .topbar .sub { display: none; }
  .actor { gap: 6px; }
  .actor button, .actor .pill { padding: 5px 8px; font-size: 12px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tabs button { white-space: nowrap; }
  .form.row, .form { grid-template-columns: 1fr !important; }
  .dash-v { font-size: 24px; }
  .table-wrap { max-height: 60vh; }
}

/* ================= Q71：看板筛选/趋势图 · 打印样式 · 引导与快捷键 ================= */
.dash-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-filters label { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; }
.dash-svg { width: 100%; height: auto; display: block; }

/* 使用引导 / 快捷键面板 */
.guide-mask {
  position: fixed; inset: 0; z-index: 260; display: grid; place-items: center;
  background: rgba(6, 12, 16, 0.72); backdrop-filter: blur(3px);
}
.guide-box {
  width: min(560px, 92vw); background: linear-gradient(180deg, #1c262e, #151d23);
  border: 1px solid #2f3d49; border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-2);
}
html[data-theme='light'] .guide-box { background: #fff; border-color: #dbe3ec; }
.guide-box h2 { font-size: 17px; margin: 0 0 6px; }

/* 打印样式（Q71④）：隐藏导航与操作区，输出白底表格/卡片 */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .topbar, .tabs, .subtabs, .actions, .drawer-mask, .drawer, .toast, .guide-mask, .login-mask, #msg-panel,
  button, #col-picker { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #999 !important; background: #fff !important; break-inside: avoid; margin-bottom: 10px; }
  .card h2, h3 { color: #000 !important; }
  .card h2::before, h3::before { display: none !important; }
  table { width: 100%; border-collapse: collapse; font-size: 11px; }
  th, td { border: 1px solid #bbb !important; color: #000 !important; background: #fff !important; padding: 4px 6px !important; }
  th { background: #eee !important; }
  .badge, .pill { border: 1px solid #666 !important; color: #000 !important; background: #fff !important; }
  .table-wrap { max-height: none !important; overflow: visible !important; border: none !important; }
  .dash-svg text { fill: #000 !important; }
  @page { margin: 12mm; }
}


/* ===================== 左侧导航 + 二级子集布局（2026-10-10 重构） ===================== */
.shell { display: flex; align-items: flex-start; }
.tabs {
  flex: 0 0 216px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1px;
  padding: 12px 10px 28px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  z-index: 10;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}
.navgroup { margin-bottom: 8px; }
.navgroup-title {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--dim);
  padding: 9px 10px 4px;
  font-weight: 600;
}
.tabs .navgroup button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.tabs .navgroup button.active {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--line);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}
html[data-theme='light'] .tabs .navgroup button.active { background: #eaf6fe; color: #0b4f75; border-color: #a5d8f5; }
html[data-theme='light'] .tabs .navgroup button:hover { background: #f1f5f9; color: var(--txt); }
.tabs .navgroup button:hover { background: rgba(255, 255, 255, .04); color: var(--txt); }
main { flex: 1; min-width: 0; padding: 14px 20px 40px; }
@media (max-width: 900px) {
  /* ★ 关键：column 方向下必须 stretch，否则 main 会按内容宽度撑到视口外（曾溢出 136px） */
  .shell { flex-direction: column; align-items: stretch; }
  main { width: 100%; min-width: 0; padding: 12px 12px 36px; }
  /* 表格：容器内横向滚动，不再撑破整页 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { width: auto; min-width: 100%; }
  /* 顶栏允许换行，避免按钮把顶栏顶出屏幕 */
  .topbar { flex-wrap: wrap; height: auto; }
  .topbar .actor { flex-wrap: wrap; justify-content: flex-end; }
  .topbar .brand, .topbar .actor { min-width: 0; }
  /* 图表/内嵌 SVG 自适应，避免固定宽度撑破卡片 */
  .card svg, .dash-cols svg { max-width: 100%; height: auto; }
  .actions { flex-wrap: wrap; }
  .actions input, .actions select { min-width: 0; }
  .tabs {
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
  }
  .tabs .navgroup { display: flex; flex-wrap: wrap; align-items: center; margin: 0 10px 0 0; }
  .tabs .navgroup button { width: auto; }
  .navgroup-title { padding: 4px 6px; }
}

/* ★ 2026-10-14 修（生产部手机可用性）：≤820px 的「单行横向滚动导航」原本写在 455 行的 820 媒体块里，
   但被**上面** 900 媒体块的 `.tabs { flex-wrap: wrap; max-height: none }` 按「同权重、后写覆盖」压掉
   —— 实测 390×844 下导航换行成 650px 高、把 <main> 推到 y=791（首屏只剩菜单）。
   修法：把 ≤820 的规则放到 900 块**之后**，恢复既定设计（一行 + 横向滚动 + 吸顶），不发明新行为。 */
@media (max-width: 820px) {
  .tabs {
    flex-wrap: nowrap; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    max-height: none; padding: 6px 10px;
    position: sticky; top: 0; z-index: 4;
    -webkit-overflow-scrolling: touch;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .tabs .navgroup { display: flex; flex-wrap: nowrap; align-items: center; margin: 0 8px 0 0; }
  .tabs .navgroup button { width: auto; }
  .tabs button { white-space: nowrap; }
  /* ★ 2026-10-14 修：手机端单列栅格下 `grid-column: span 2` 会**强行造出隐式第二列**，
     把 .card 撑到 385px（容器仅 356）→ 实测 ipqc-ins-new 横向溢出 7px。跨列在单列里无意义，置 auto。 */
  .form, .form.row { grid-template-columns: 1fr !important; }
  .form label.span2, .form > .field.span2 { grid-column: auto; }
  .card { min-width: 0; }
}


/* ===================== 浅色主题：深底组件浅底化（天蓝风） ===================== */
html[data-theme='light'] input:focus,
html[data-theme='light'] select:focus,
html[data-theme='light'] textarea:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16); }
html[data-theme='light'] .batch-no { background: #eaf6fe; border-color: #a5d8f5; }
html[data-theme='light'] .alert.info { background: #eaf6fe; border-color: #a5d8f5; border-left-color: var(--accent-2); color: #0b4f75; }
html[data-theme='light'] .alert.ok { background: #eafaf1; border-color: #a7e3bf; border-left-color: #2fbf71; color: #14663c; }
html[data-theme='light'] .alert.err { background: #fdeeee; border-color: #efb6b6; border-left-color: #dd5b5b; color: #8a2b2b; }
html[data-theme='light'] .pill.ok,
html[data-theme='light'] .badge.completed,
html[data-theme='light'] .badge.on { color: #14663c; border-color: #a7e3bf; background: #eafaf1; }
html[data-theme='light'] .pill.bad,
html[data-theme='light'] .badge.void,
html[data-theme='light'] .badge.off { color: #8a2b2b; border-color: #efb6b6; background: #fdeeee; }
html[data-theme='light'] .badge.created { color: #0b4f75; border-color: #a5d8f5; background: #eaf6fe; }
html[data-theme='light'] .badge.running { color: #7a5407; border-color: #e8cf93; background: #fdf6e7; }
html[data-theme='light'] .badge.closed { color: #5d6e7e; border-color: #c6d2de; background: #f1f5f9; }
html[data-theme='light'] .chip { background: #f1f5f9; color: #5d6e7e; }
html[data-theme='light'] code { background: #f4f7fa; }

/* 浅色主题下 h2 白字会落在白卡片上看不见（天蓝风修正） */
html[data-theme='light'] h2 { color: #16232c; }
html[data-theme='light'] .dash-head h2 { color: #16232c; }


/* ===================== 表单控件统一（输入框/下拉同高同基线，标签换行不影响） ===================== */
/* 1) 所有文本类控件统一高度（排除勾选框/单选/文件/滑块） */
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
select,
textarea {
  box-sizing: border-box;
}
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
select {
  height: 36px;
  min-height: 36px;
  line-height: 20px;
}
/* 2) 表单内整体贴底对齐：标签文字换 1 行还是 2 行，控件都落在同一条基线上 */
.form label, .form > .field {
  justify-content: flex-end;
}
/* 3) 标签文字允许换行但不再撑高控件 */
.form label { line-height: 1.35; }


/* ================= IPQC 批号选择弹窗（IPQC-2） ================= */
.ipqc-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 10, 18, 0.74);
  backdrop-filter: blur(3px);
}
.ipqc-modal-box {
  width: min(1040px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 16px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.ipqc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.ipqc-modal-box tbody tr.pk-blocked { opacity: 0.55; }
.ipqc-modal-box tbody tr.pk-bound { background: rgba(14, 165, 233, 0.09); }
.ipqc-modal .pk-pick { width: 16px; height: 16px; }

/* ================= 长下拉（>20 项）筛选 ================= */
/* 保留原生 select（手机原生选择器最稳），上方加筛选框；筛选时重建 option 保证 iOS 原生选择器也生效 */
.sel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sel-search-input {
  flex: 0 1 260px;
  min-width: 0;
  height: 36px;
}
.sel-search-note {
  font-size: 12px;
  color: var(--muted, #6b7785);
  white-space: nowrap;
}

/* ===================== 顶栏下拉菜单（收纳平铺按钮） ===================== */
.topmenu-wrap { position: relative; display: inline-flex; }
.topmenu-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.topmenu-toggle .topmenu-icon { font-size: 14px; line-height: 1; }
.topmenu-toggle .caret { font-size: 10px; opacity: .65; transition: transform .16s ease; }
.topmenu-toggle[aria-expanded='true'] { border-color: var(--accent); }
.topmenu-toggle[aria-expanded='true'] .caret { transform: rotate(180deg); }
.topmenu-badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; line-height: 16px; font-weight: 700; }
.topmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 300;
  min-width: 216px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 2px;
}
.topmenu[hidden] { display: none; }
.topmenu-group { font-size: 11px; color: var(--dim); padding: 8px 10px 3px; letter-spacing: .04em; }
.topmenu button {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 10px; font-size: 13.5px;
}
.topmenu button:hover { background: var(--panel-3); border-color: transparent; color: var(--txt); }
.topmenu button.primary { background: var(--grad-btn); color: #fff; }
.topmenu #msg-count { margin-left: auto; color: var(--dim); font-size: 12px; }
.topmenu button.primary #msg-count { color: #fff; }
.topmenu-foot { border-top: 1px solid var(--line-soft); margin-top: 6px; padding: 8px 10px 4px; font-size: 11px; }
html[data-theme='light'] .topmenu { background: #fff; }
html[data-theme='light'] .topmenu button:hover { background: #eaf6fe; }
.stale-warning {
  background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 600;
  animation: stalePulse 1.6s ease-in-out infinite;
}
@keyframes stalePulse { 0%,100%{ opacity: 1 } 50%{ opacity: .72 } }


/* ===================== 登录页重做：粒子背景 + 居中均匀排版 ===================== */
.login-mask {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(1100px 620px at 50% -10%, rgba(56, 189, 248, .16), transparent 62%),
    linear-gradient(165deg, #0a1420 0%, #070d14 55%, #0a1522 100%);
}
.login-particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.login-box {
  position: relative; z-index: 2;
  width: min(420px, 92vw);
  border-radius: 20px;
  padding: 36px 32px 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(21, 32, 43, .84), rgba(11, 18, 25, .92));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(56, 189, 248, .22);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 70px rgba(56, 189, 248, .10);
}
.login-box::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); border-radius: 20px 20px 0 0; }

/* 品牌区：竖向堆叠、居中，与下方表单等距 */
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 28px; }
.logo.big { width: 62px; height: 62px; border-radius: 17px; font-size: 17px; box-shadow: 0 12px 30px rgba(56, 189, 248, .38); }
.login-box h2 { font-size: 21px; margin: 0; letter-spacing: .6px; line-height: 1.25; }
.login-tagline { margin: 0; font-size: 12.5px; color: var(--dim); letter-spacing: 3px; text-indent: 3px; }

/* 表单：字段间距统一、文字全部居中 */
.login-box .form { gap: 16px; }
.login-box .form label, .login-box .form .login-field { width: 100%; align-items: center; gap: 7px; }
.login-box .form label > span { display: block; width: 100%; text-align: center; font-size: 12.5px; letter-spacing: 1px; }
.login-box input, .login-box select {
  width: 100%; padding: 11px 12px; font-size: 14.5px; border-radius: 11px; text-align: center;
  background: rgba(9, 15, 21, .78); border: 1px solid #2b3946; transition: border-color .16s ease, box-shadow .16s ease;
}
.login-box input::placeholder { text-align: center; letter-spacing: 1px; }
.login-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, .18); }

.login-box #login-error .alert { margin: 16px 0 0; text-align: center; }
.login-actions { gap: 12px; margin-top: 22px; justify-content: center; align-items: center; }
.login-actions button.primary { min-width: 132px; }
.login-box #login-tip, .login-box #login-reset { text-align: center; }

/* 浅色主题下的登录页 */
html[data-theme='light'] .login-mask {
  background: radial-gradient(1100px 620px at 50% -10%, rgba(56, 189, 248, .22), transparent 62%),
    linear-gradient(165deg, #eef5fb 0%, #e4edf6 55%, #eff5fb 100%);
}
html[data-theme='light'] .login-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 250, 254, .95));
  border-color: rgba(2, 132, 199, .22);
  box-shadow: 0 26px 60px rgba(23, 51, 77, .16), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
html[data-theme='light'] .login-box h2 { color: #16232c; }
html[data-theme='light'] .login-tagline { color: #5d6e7e; }
html[data-theme='light'] .login-box input, html[data-theme='light'] .login-box select {
  background: #fff; border-color: #cfdae6;
}
html[data-theme='light'] .login-box input:focus { box-shadow: 0 0 0 3px rgba(2, 132, 199, .16); }

@media (max-width: 480px) {
  .login-box { padding: 28px 20px 24px; border-radius: 18px; }
  .logo.big { width: 54px; height: 54px; border-radius: 15px; }
  .login-box h2 { font-size: 18px; }
  .login-tagline { letter-spacing: 1.5px; font-size: 11.5px; }
}
/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) { .login-particles { opacity: .85; } }


/* ===================== 登录页 · 企业级重做（左品牌区 + 右表单区） ===================== */
#login-mask.login-mask {
  position: fixed; inset: 0; z-index: 600; overflow: auto; overscroll-behavior: contain;
  display: block; /* ★ 必须覆盖上一版的 flex 居中，否则 .login-stage 会被缩成内容宽度 */
  /* ★ 融合：整页一张连续场景（左深右浅的斜向光带 + 双极光），不再有左右两块硬色块 */
  background:
    radial-gradient(1200px 720px at 10% -8%, rgba(56, 189, 248, .26), transparent 62%),
    radial-gradient(980px 620px at 92% 112%, rgba(14, 165, 233, .22), transparent 64%),
    linear-gradient(106deg,
      #05192b 0%, #072437 22%, #0a3049 40%,
      #12556f 53%, #3d87ab 62%, #86b3d0 70%, #c9ddeb 79%, #e2eef7 88%, #eef6fb 100%);
}
#login-mask .login-stage {
  width: 100%;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1.12fr .88fr;
}

/* ---------- 左：品牌区（渐变 + 极光 + 粒子 + 点阵纹理） ---------- */
#login-mask .login-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; padding: 52px 56px 34px;
  /* ★ 融合：品牌区不再自带底色，透出整页那张连续场景，彻底消除左右接缝 */
  background: none;
}
#login-mask .login-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 24px 24px; opacity: .3;
  -webkit-mask-image: radial-gradient(72% 62% at 46% 42%, #000 26%, transparent 100%);
  mask-image: radial-gradient(72% 62% at 46% 42%, #000 26%, transparent 100%);
}
#login-mask .login-particles { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
#login-mask .hero-glow {
  position: absolute; z-index: 0; left: -8%; top: 12%; width: 520px; height: 520px; border-radius: 50%;
  background: rgba(56, 189, 248, .30); filter: blur(96px);
  animation: heroDrift 16s ease-in-out infinite;
}
@keyframes heroDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .9; }
  50% { transform: translate(16%, 12%) scale(1.22); opacity: .65; }
}
/* ★ 与右侧登录卡靠近：品牌块贴住分栏内侧，多余留白被推到页面最外缘（文案仍左对齐） */
#login-mask .hero-content {
  position: relative; z-index: 3; margin: auto 0; display: flex; flex-direction: column; gap: 36px;
  align-self: flex-end; align-items: flex-end; max-width: min(520px, 100%);
}
#login-mask .hero-brand { display: flex; align-items: center; gap: 16px; }
#login-mask .logo.big {
  width: 58px; height: 58px; border-radius: 16px; font-size: 16px; flex: none;
  box-shadow: 0 14px 34px rgba(56, 189, 248, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#login-mask .hero-brand-text h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.22; font-weight: 700; color: #fff; letter-spacing: .4px; }
#login-mask .login-tagline { margin: 0; font-size: 13px; color: rgba(190, 220, 240, .74); letter-spacing: 1.1px; }
#login-mask .hero-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
#login-mask .hero-feats li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: rgba(203, 227, 244, .9); }
#login-mask .hero-feats svg { width: 15px; height: 15px; flex: none; color: #38bdf8; }
#login-mask .hero-foot { position: relative; z-index: 3; font-size: 11.5px; color: rgba(160, 195, 220, .5); letter-spacing: .5px; }

/* ---------- 右：表单区（浮在场景上的磨砂玻璃卡） ---------- */
#login-mask .login-panel {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start; /* ★ 卡片贴住分栏内侧，与品牌块靠近 */
  padding: 48px 52px; background: none; /* ★ 融合：不再铺一块纯白底，透出连续场景 */
}
#login-mask .login-box {
  position: relative; width: min(430px, 100%); padding: 34px 34px 30px; margin: 0;
  text-align: left;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(4, 22, 38, .26), 0 0 96px 28px rgba(255, 255, 255, .34),
    0 2px 6px rgba(4, 22, 38, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* 天蓝顶边：与左侧品牌区同色，把两块视觉上“缝”在一起 */
#login-mask .login-box::before {
  display: block; content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 22px 22px 0 0; background: var(--grad);
}
#login-mask .login-head h3 { margin: 0 0 9px; font-size: 27px; font-weight: 700; letter-spacing: -.2px; color: var(--txt); }
#login-mask .login-head p { margin: 0 0 32px; font-size: 13.5px; color: var(--dim); }

#login-mask .login-form { display: flex; flex-direction: column; gap: 18px; }
#login-mask .login-form .lf, #login-mask #login-reset .lf { display: flex; flex-direction: column; gap: 7px; width: 100%; }
#login-mask .lf > span:first-child { display: block; width: 100%; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--dim); letter-spacing: .3px; }
#login-mask .lf-input { position: relative; display: block; }
#login-mask .lf-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--dim); pointer-events: none; }
#login-mask .login-box input, #login-mask .login-box select {
  width: 100%; height: 46px; min-height: 46px; padding: 0 14px 0 40px; border-radius: 11px;
  font-size: 14.5px; text-align: left; letter-spacing: 0;
  background: var(--panel); border: 1px solid var(--line); color: var(--txt);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#login-mask #reset-user, #login-mask #reset-reason { padding-left: 14px; }
#login-mask .login-box input::placeholder { text-align: left; color: var(--dim); letter-spacing: 0; }
#login-mask .login-box input:focus {
  outline: none; background: var(--panel); border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(14, 165, 233, .18);
}
#login-mask .login-error, #login-mask #login-error .alert { margin: 16px 0 0; text-align: left; }
#login-mask .login-actions { display: flex; align-items: center; gap: 14px; margin-top: 26px; justify-content: flex-start; }
#login-mask button.primary {
  flex: 1; height: 46px; border-radius: 11px; font-size: 15px; font-weight: 600; letter-spacing: 1.5px;
  box-shadow: 0 10px 24px rgba(14, 165, 233, .30);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
#login-mask button.primary:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(14, 165, 233, .38); filter: brightness(1.04); }
#login-mask button.primary:active { transform: translateY(0); }
#login-mask button.link { font-size: 13px; flex: none; }

/* ---------- 浅色主题：同一张连续场景的“提亮版”，表单是白玻璃卡（不再是与深色硬拼的白块） ---------- */
html[data-theme='light'] #login-mask.login-mask {
  background:
    radial-gradient(1200px 720px at 10% -8%, rgba(56, 189, 248, .30), transparent 62%),
    radial-gradient(980px 620px at 92% 112%, rgba(56, 189, 248, .26), transparent 64%),
    linear-gradient(106deg,
      #062033 0%, #0a3049 22%, #114b68 40%,
      #20698c 52%, #5697b8 61%, #9dc2da 70%, #cfe2ee 79%, #e6f0f8 88%, #f1f8fc 100%);
}
html[data-theme='light'] #login-mask .login-panel { background: none; }
html[data-theme='light'] #login-mask .login-box {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(255, 255, 255, .85);
}
html[data-theme='light'] #login-mask .login-box input { background: #f6fafd; border-color: #dbe6ef; }
html[data-theme='light'] #login-mask .login-box input:focus { background: #fff; border-color: var(--accent); }

/* ---------- 窄屏：品牌区压成顶部横幅 ---------- */
@media (max-width: 900px) {
  /* 竖排时场景改成自上而下：深色品牌横幅 → 下方浅色表单区，同样是“一张连续场景” */
  #login-mask.login-mask,
  html[data-theme='light'] #login-mask.login-mask {
    background:
      radial-gradient(760px 420px at 6% -6%, rgba(56, 189, 248, .34), transparent 62%),
      linear-gradient(180deg,
        #062033 0%, #0a3049 16%, #12556f 24%, #3f83a8 32%,
        #a9c8dd 40%, #dcebf5 48%, #f0f7fb 58%, #f9fcfe 100%);
  }
  html[data-theme='dark'] #login-mask.login-mask {
    background:
      radial-gradient(760px 420px at 6% -6%, rgba(56, 189, 248, .26), transparent 62%),
      linear-gradient(180deg,
        #041322 0%, #082c40 18%, #12506e 28%, #1d7096 38%,
        #2b8cb4 48%, #22648a 60%, #174863 74%, #12374f 100%);
  }
  #login-mask .login-stage { grid-template-columns: 1fr; min-height: 0; }
  #login-mask .login-hero { padding: 30px 24px 28px; flex: none; }
  #login-mask .hero-content { margin: 0; gap: 18px; align-self: stretch; align-items: flex-start; max-width: 100%; }
  #login-mask .hero-feats { display: none; }
  #login-mask .hero-foot { display: none; }
  #login-mask .logo.big { width: 48px; height: 48px; border-radius: 14px; font-size: 14px; }
  #login-mask .hero-brand-text h2 { font-size: 19px; margin-bottom: 4px; }
  #login-mask .login-tagline { letter-spacing: .6px; font-size: 12px; }
  #login-mask .login-panel { padding: 34px 24px 44px; align-items: flex-start; justify-content: center; }
  #login-mask .login-head h3 { font-size: 23px; }
  #login-mask .login-head p { margin-bottom: 26px; }
}

/* 深色主题：整页再深一档，表单用深色玻璃卡（与场景一体，不再是一块死黑面板） */
html[data-theme='dark'] #login-mask.login-mask {
  background:
    radial-gradient(1200px 720px at 10% -8%, rgba(56, 189, 248, .22), transparent 62%),
    radial-gradient(980px 620px at 92% 112%, rgba(14, 165, 233, .18), transparent 64%),
    linear-gradient(106deg,
      #041322 0%, #061e2e 22%, #082c40 42%,
      #0d425c 55%, #14587a 66%, #1d6f95 78%, #2b8cb4 90%, #3ba0c9 100%);
}
html[data-theme='dark'] #login-mask .login-panel { background: none; }
html[data-theme='dark'] #login-mask .login-box {
  background: rgba(11, 26, 38, .72);
  border-color: rgba(56, 189, 248, .24);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .45), 0 0 96px 28px rgba(56, 189, 248, .18),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme='dark'] #login-mask .login-box input {
  background: rgba(8, 20, 30, .55); border-color: rgba(56, 189, 248, .20);
}

/* ===================== 登录页 · 矮屏自适应（PC 端必须保证「登录」按钮在首屏内可点） =====================
   背景：笔记本 Windows 显示缩放 125%~150%、老屏 768 高、或窗口只占半屏时，视口高度可能只剩 500~620px。
       原实现里表单区垂直居中且固定 100vh，留白（48px 上下 + 32px 标题间距）会先把「登录」按钮挤出首屏。
       规则按“高度”逐档压缩留白与控件高度，保证按钮始终落在首屏；放在文件末尾以便覆盖上面的宽度断点。
   注意：宽度 ≤900px 时品牌区在上方（横幅），可压缩的空间更小，所以每档对 hero 也一起收。 */

/* 档 1（视口高 ≤720px，约等于 1366×768 @125%）：收掉外层留白 */
@media (max-height: 720px) {
  #login-mask .login-hero { padding: 28px 40px 22px; }
  #login-mask .login-panel { padding: 22px 40px; }
  #login-mask .login-box { padding: 26px 28px 24px; }
  #login-mask .login-head h3 { font-size: 24px; margin-bottom: 6px; }
  #login-mask .login-head p { margin-bottom: 18px; font-size: 13px; }
  #login-mask .login-form { gap: 14px; }
  #login-mask .login-actions { margin-top: 18px; }
}

/* 档 2（视口高 ≤620px，约等于 1366×768 @150% / 1024×600）：隐藏品牌区装饰，控件降高 */
@media (max-height: 620px) {
  #login-mask .login-hero { padding: 18px 26px 16px; }
  #login-mask .hero-content { gap: 12px; }
  #login-mask .login-panel { padding: 16px 26px; }
  #login-mask .login-box { padding: 20px 24px 18px; }
  #login-mask .login-head h3 { font-size: 21px; margin-bottom: 4px; }
  #login-mask .login-head p { margin-bottom: 12px; font-size: 12.5px; }
  #login-mask .login-form { gap: 10px; }
  #login-mask .login-box input, #login-mask .login-box select { height: 42px; min-height: 42px; }
  #login-mask button.primary { height: 42px; font-size: 14.5px; letter-spacing: 1.2px; }
  #login-mask .login-actions { margin-top: 14px; }
  #login-mask #login-error .alert { margin-top: 10px; }
}

/* 档 3（视口高 ≤540px）：极矮屏兜底 —— 放弃垂直居中、取消强制 100vh，
   让内容自然从上往下排；遮罩本身可滚动，最坏情况滚动即可点到「登录」。 */
@media (max-height: 540px) {
  #login-mask .login-stage { min-height: 0; }
  #login-mask .login-panel { align-items: flex-start; }
  #login-mask .login-hero { padding: 14px 22px 12px; }
  #login-mask .login-box { padding: 16px 20px 14px; }
  #login-mask .lf > span:first-child { font-size: 12px; }
  #login-mask .login-actions { margin-top: 12px; }
}

/* 横向极窄（手机横屏 / 半屏窗口）+ 矮屏：品牌区只留 logo 一行 */
@media (max-height: 540px) and (max-width: 900px) {
  #login-mask .login-tagline { display: none; }
  #login-mask .logo.big { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
  #login-mask .hero-brand-text h2 { font-size: 17px; }
}


/* 预警台账（IQC-4b）：表宽列多，窄列里的徽标/按钮会被逐字换行（CJK 可任意断行）——
   统一禁止在表格单元格内的徽标与按钮折行，并给台账表设最小宽度让外层 .table-wrap 横向滚动 */
.table-wrap table td .badge,
.table-wrap table td button { white-space: nowrap; }
#iw-body table { min-width: 1180px; }