/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg-main: linear-gradient(135deg, #f8fafc 0%, #f2f7f5 42%, #fdf8f1 100%);
  --bg-card: #ffffff;
  --bg-elev: #ffffff;
  --bg-muted: #f8fafc;
  --bg-input: #ffffff;
  --line: #d6e0ea;
  --text-main: #1f2937;
  --text-soft: #64748b;
  --brand: #0f766e;
  --brand-strong: #0b5f59;
  --info: #2563eb;
  --warn: #b45309;
  --danger: #b91c1c;
  --success: #15803d;
  --control-secondary: #334155;
  --control-light: #e8eef4;
  --control-light-text: #1f2937;
  --focus-ring: color-mix(in srgb, var(--brand) 58%, white);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-elevated: 0 14px 34px rgba(15, 23, 42, 0.16);
  --urgent-critical-bg: #f7d9dd;
  --urgent-urgent-bg: #fde9df;
  --urgent-text: #1f2937;
  --urgent-critical-accent: #b91c1c;
  --urgent-urgent-accent: #c2410c;
}
:root[data-theme='dark'] {
  --bg-main: linear-gradient(135deg, #0f172a 0%, #111827 45%, #1f2937 100%);
  --bg-card: #0f172a;
  --bg-elev: #111b2f;
  --bg-muted: #1e293b;
  --bg-input: #111b2f;
  --line: #475569;
  --text-main: #f3f4f6;
  --text-soft: #cbd5e1;
  --brand: #14b8a6;
  --brand-strong: #0f9488;
  --info: #60a5fa;
  --warn: #f59e0b;
  --danger: #ef4444;
  --success: #22c55e;
  --control-secondary: #475569;
  --control-light: #273449;
  --control-light-text: #f3f4f6;
  --focus-ring: color-mix(in srgb, var(--brand) 72%, white);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-elevated: 0 16px 38px rgba(0, 0, 0, 0.38);
  --urgent-critical-bg: rgba(185, 28, 28, 0.34);
  --urgent-urgent-bg: rgba(194, 65, 12, 0.30);
  --urgent-text: #f8fafc;
  --urgent-critical-accent: #f87171;
  --urgent-urgent-accent: #fb923c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; color: var(--text-main); font-family: 'Avenir Next', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; background: var(--bg-main); }
html { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }
a { color: inherit; text-decoration: none; }
/* 桌面业务页使用工作台宽度。旧 1280px 上限让 1920 屏幕两侧各空 320px，
   表格和导航都像纸张预览；现在优先利用横向空间，超宽屏正文最多 1920px。 */
.page-shell { width: min(1920px, calc(100vw - 32px)); margin: 0 auto; padding: 20px 0 36px; }
/* 导航属于全局工作台，不跟随超宽屏正文的 1920px 阅读上限。对于把 AppNav 放在
   page-shell 里面的旧页面，让导航从正文容器中居中突破，始终只留 16px 屏幕边距。 */
@media (min-width: 1024px) {
  .page-shell > .nav-desktop {
    position: relative;
    left: 50%;
    width: calc(100vw - 32px);
    transform: translateX(-50%);
  }
}
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-card); }
.btn { border: 0; border-radius: 10px; padding: 9px 12px; background: var(--brand); color: #fff; cursor: pointer; transition: background 120ms ease, transform 120ms ease, opacity 120ms ease; }
.btn:hover:not(:disabled) { background: var(--brand-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.52; }
.btn.secondary { background: var(--control-secondary); }
.btn.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--control-secondary) 84%, black); }
.btn.light { background: var(--control-light); color: var(--control-light-text); }
.btn.light:hover:not(:disabled) { background: color-mix(in srgb, var(--control-light) 84%, var(--brand)); }
.input, .select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg-input); color: var(--text-main); }
.input::placeholder { color: var(--text-soft); opacity: 0.9; }
.select option { background: var(--bg-input); color: var(--text-main); }
.input:disabled, .select:disabled { cursor: not-allowed; opacity: 0.62; background: var(--bg-muted); }
.btn:focus-visible, .btn-xs:focus-visible, .input:focus-visible, .select:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── 数控排产页:段控 / 小按钮 / 紧凑表格,统一配色与尺寸 ── */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 38px; }
.seg > button { border: 0; background: transparent; color: var(--text-soft); cursor: pointer; padding: 0 16px; font-size: 14px; line-height: 1; }
.seg > button + button { border-left: 1px solid var(--line); }
.seg > button.on { background: var(--brand); color: #fff; font-weight: 600; }
.seg > button:not(.on):hover { background: var(--bg-muted); color: var(--text-main); }
/* 极小按钮:幽灵底,靠描边+文字色区分,不再白字压绿底 */
.btn-xs { border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; font-size: 12px; line-height: 1.5;
  background: var(--bg-card); color: var(--text-main); cursor: pointer; white-space: nowrap; }
.btn-xs:hover { background: var(--bg-muted); }
.btn-xs.brand { border-color: var(--brand); color: var(--brand); }
.btn-xs.danger { border-color: var(--danger); color: var(--danger); }
/* 派工历史按钮:接近 Office 快速访问工具栏的轻立体图标；不可用时明确灰显。 */
.history-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, #fff) 0%, color-mix(in srgb, var(--brand) 7%, var(--bg-muted)) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}
.history-btn svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.history-btn:not(:disabled):hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--bg-card));
  box-shadow: 0 3px 7px rgba(15, 118, 110, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transform: translateY(-1px);
}
.history-btn:not(:disabled):active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.16); }
.history-btn:disabled {
  color: color-mix(in srgb, var(--text-soft) 48%, transparent);
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--bg-muted) 78%, var(--bg-card));
  box-shadow: none;
  cursor: default;
  opacity: 0.72;
}
/* 派工表格:所有输入统一 padding/圆角/字号,去掉 number 上下箭头 */
.plan-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.plan-tbl th { color: var(--text-soft); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 12px; }
.plan-tbl td { padding: 4px 6px; vertical-align: middle; }
.plan-tbl .input, .plan-tbl .select { width: 100%; padding: 5px 8px; border-radius: 8px; font-size: 13px; height: 30px; }
.plan-tbl input[type=number] { -moz-appearance: textfield; text-align: center; }
.plan-tbl input[type=number]::-webkit-outer-spin-button,
.plan-tbl input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan-tbl .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-tbl .plan-qty-cell { text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.plan-tbl .plan-cell-center { min-height: 30px; display: flex; align-items: center; justify-content: center; width: 100%; }
.plan-note-cell { position: relative; }
.plan-info-slots { width: 100%; min-height: 30px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4px; gap: 4px; align-items: center; }
.plan-info-slots > span { min-width: 0; display: flex; justify-content: center; }
.plan-info-trigger {
  width: 32px; height: 23px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-muted); color: var(--text-soft); font-size: 10px; line-height: 20px;
  cursor: pointer;
}
.plan-info-trigger.inherit:hover { border-color: var(--brand); color: var(--brand); }
.plan-info-trigger.handover:hover { border-color: var(--warn); color: var(--warn); }
.plan-handover-overlay {
  position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px;
  background: rgba(15, 23, 42, .34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.plan-handover-popup {
  width: min(420px, 100%); max-height: min(70vh, 520px); overflow: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .24); padding: 16px;
}
.plan-handover-popup header { display: flex; align-items: flex-start; gap: 12px; }
.plan-handover-popup header > div { min-width: 0; flex: 1 1; display: grid; grid-gap: 3px; gap: 3px; }
.plan-handover-popup header span { color: var(--text-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-handover-popup header button {
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: var(--bg-muted); color: var(--text-soft); font-size: 20px; cursor: pointer;
}
.plan-handover-popup p { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.plan-machine-handover-note {
  min-width: 0; max-width: 360px; color: var(--danger); font-size: 11px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-machine-jump,
.plan-review-work-jump {
  border: 0; padding: 0; background: transparent; color: var(--brand); font: inherit;
  font-weight: 700; cursor: pointer; text-decoration: none;
}
.plan-machine-jump:hover,
.plan-review-work-jump:hover { text-decoration: underline; }
.plan-machine-jump:focus-visible,
.plan-review-work-jump:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.plan-jump-highlight { scroll-margin-top: 100px; }
.plan-jump-highlight > td {
  box-shadow: inset 0 0 0 2px var(--brand) !important;
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-card));
}
.plan-review-unsaved {
  padding: 3px 8px; border-radius: 999px; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 11%, var(--bg-card)); font-size: 12px; font-weight: 700;
}
.plan-review-error > td {
  box-shadow: inset 0 0 0 2px var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
}
.plan-save-alert {
  margin: -4px 2px 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  border-radius: 8px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
  font-size: 13px; font-weight: 650;
}
.plan-save-alert a { text-decoration: underline; }
.plan-hm { width: 46px !important; padding: 5px 4px !important; text-align: center; }
.plan-time { width: 48px !important; padding: 5px 3px !important; text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.plan-est { font-size: 12px; color: var(--text-soft); white-space: nowrap; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.plan-segment-trigger,
.plan-segment-end,
.plan-segment-time {
  border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.plan-segment-trigger { min-width: 8px; }
.plan-segment-trigger.active { color: var(--brand); font-weight: 800; }
.plan-segment-time {
  width: 48px; height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-input); text-align: center;
}
.plan-segment-end { min-width: 40px; text-align: center; }
.plan-segment-popup { width: min(650px, 100%); }
.plan-segment-help { margin: 12px 0 !important; color: var(--text-soft); font-size: 12px; }
.plan-segment-list { display: grid; grid-gap: 8px; gap: 8px; }
.plan-segment-row {
  display: grid; grid-template-columns: 48px 112px 10px 44px 98px 18px 28px;
  grid-gap: 6px;
  gap: 6px; align-items: end; padding: 8px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg-muted); font-size: 12px;
}
.plan-segment-row label { display: grid; grid-gap: 3px; gap: 3px; color: var(--text-soft); font-size: 11px; }
.plan-segment-row label:last-of-type { grid-template-columns: 42px 1fr; align-items: center; }
.plan-segment-row .input { height: 30px; padding: 5px 7px; }
.plan-segment-row input[type=number] { text-align: center; }
.plan-segment-auto { min-height: 30px; display: inline-flex; align-items: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.plan-segment-summary { min-height: 34px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-soft); font-size: 12px; }
.plan-segment-summary .error { color: var(--danger); font-weight: 650; }
.plan-segment-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.multi-select-wrap { position: relative; }
.multi-select-wrap > span { display: block; margin-bottom: 6px; color: var(--text-soft); }
.multi-select-trigger {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
}
.multi-select-trigger span { white-space: nowrap; word-break: keep-all; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
thead .multi-select-wrap > span { display: none; }
thead .multi-select-trigger {
  min-height: 34px;
  height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}
.multi-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 10px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
  min-width: 240px;
  width: max(100%, 240px);
}
.multi-select-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--bg-input); }
.multi-select-option { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; }
.multi-select-option span { white-space: nowrap; word-break: keep-all; line-height: 1.3; }
.filter-grid label { display: flex; flex-direction: column; gap: 6px; }
.filter-grid .multi-select-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.filter-grid .multi-select-option input[type='checkbox'] {
  margin: 0;
  flex: 0 0 auto;
}
.filter-grid .multi-select-option span {
  flex: 1 1 auto;
}
.filter-grid .input,
.filter-grid .select,
.filter-grid .multi-select-trigger { height: 40px; min-height: 40px; }
.filter-inline-two { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; font-size: 14px; }
th { position: -webkit-sticky; position: sticky; top: 0; background: var(--bg-muted); z-index: 2; }
.main-list-table { min-width: 1500px; }
.main-list-table th,
.main-list-table td {
  white-space: nowrap;
  word-break: keep-all;
}
.main-list-table {
  --ml-c1: 170px;
  --ml-c2: 150px;
  --ml-c3: 160px;
  --ml-c4: 190px;
  --ml-c5: 72px;
}
.main-list-table.main-list-condensed {
  --ml-c1: 148px;
  --ml-c2: 128px;
  --ml-c3: 140px;
  --ml-c4: 165px;
  --ml-c5: 62px;
}
.main-list-table th:nth-child(1),
.main-list-table td:nth-child(1) { min-width: var(--ml-c1); }
.main-list-table th:nth-child(2),
.main-list-table td:nth-child(2) { min-width: var(--ml-c2); }
.main-list-table th:nth-child(3),
.main-list-table td:nth-child(3) { min-width: var(--ml-c3); }
.main-list-table th:nth-child(4),
.main-list-table td:nth-child(4) { min-width: var(--ml-c4); }
.main-list-table th:nth-child(5),
.main-list-table td:nth-child(5) { min-width: var(--ml-c5); }
.main-list-table th:nth-child(6),
.main-list-table td:nth-child(6) { min-width: 92px; }
.main-list-table th:nth-child(7),
.main-list-table td:nth-child(7) { min-width: 110px; }
.main-list-table th:nth-child(8),
.main-list-table td:nth-child(8) { min-width: 90px; }
.main-list-table th:nth-child(9),
.main-list-table td:nth-child(9) { min-width: 130px; }
.main-list-table th:nth-child(10),
.main-list-table td:nth-child(10) { min-width: 170px; }
.main-list-table th:nth-child(11),
.main-list-table td:nth-child(11) { min-width: 80px; }
.main-list-table thead tr:nth-child(2) .multi-select-wrap { min-width: 0; width: 100%; }
.main-list-table thead tr:nth-child(2) .multi-select-trigger { width: 100%; }
.main-list-table th:nth-child(-n+5),
.main-list-table td:nth-child(-n+5) {
  position: -webkit-sticky;
  position: sticky;
  z-index: 3;
  background: var(--bg-card);
}
.main-list-table thead th:nth-child(-n+5) {
  z-index: 5;
  background: var(--bg-muted);
}
.main-list-table th:nth-child(1),
.main-list-table td:nth-child(1) { left: 0; }
.main-list-table th:nth-child(2),
.main-list-table td:nth-child(2) { left: var(--ml-c1); }
.main-list-table th:nth-child(3),
.main-list-table td:nth-child(3) { left: calc(var(--ml-c1) + var(--ml-c2)); }
.main-list-table th:nth-child(4),
.main-list-table td:nth-child(4) { left: calc(var(--ml-c1) + var(--ml-c2) + var(--ml-c3)); }
.main-list-table th:nth-child(5),
.main-list-table td:nth-child(5) {
  left: calc(var(--ml-c1) + var(--ml-c2) + var(--ml-c3) + var(--ml-c4));
  box-shadow: 2px 0 0 var(--line);
}
.nav {
  min-height: 70px; display: flex; gap: 14px; margin-bottom: 16px; padding: 9px 12px;
  align-items: center; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 96%, transparent); box-shadow: var(--shadow-card);
}
.nav-brand { flex: 0 0 auto; min-width: 96px; display: grid; grid-gap: 1px; gap: 1px; padding: 5px 8px; border-radius: 9px; }
.nav-brand strong { color: var(--brand); font-size: 18px; letter-spacing: .06em; }
.nav-brand span { color: var(--text-soft); font-size: 10px; letter-spacing: .04em; }
.nav-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-gap: 8px 12px; gap: 8px 12px; align-items: center; }
.nav-personalized { min-width: 0; display: flex; align-items: center; gap: 6px; }
.nav-personalized > strong { flex: 0 0 auto; color: var(--text-soft); font-size: 11px; }
.nav-personalized-links { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.nav-personalized-links a,
.nav-overview-links a {
  padding: 6px 8px; border-radius: 7px; color: var(--text-main); font-size: 13px; white-space: nowrap;
}
.nav-personalized-links a:hover,
.nav-overview-links a:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--bg-card)); }
.nav-personalized-links a.active,
.nav-overview-links a.active { color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, var(--bg-card)); font-weight: 750; }
/* 外部系统入口(独立部署、新窗口打开)。加个箭头,让人点之前就知道会离开本站;
   host 还没水合出来时 href 是空的,顺手标成不可点,免得点了没反应。 */
a.nav-external::after { content: '↗'; margin-left: 3px; opacity: .55; font-size: .9em; }
a.nav-external:not([href]) { opacity: .5; pointer-events: none; }
.nav-personalized-empty { color: var(--text-soft); font-size: 12px; }
.nav-customize-action {
  flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-muted); color: var(--brand); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
}
.nav-overview-groups { grid-column: 1 / -1; display: flex; align-items: stretch; flex-wrap: wrap; gap: 5px 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.nav-overview-group { display: grid; align-content: center; grid-gap: 3px; gap: 3px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-overview-group:first-child { padding-left: 2px; border-left: 0; }
.nav-overview-group > strong { color: var(--text-soft); font-size: 10px; line-height: 1; }
.nav-overview-links { display: flex; align-items: center; gap: 2px; }
.nav-customizer-backdrop {
  position: fixed; z-index: 300; inset: 0; padding: 20px; display: grid; place-items: center;
  background: rgba(15, 23, 42, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.nav-customizer {
  width: min(720px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.nav-customizer > header { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.nav-customizer h2 { margin: 0; font-size: 20px; }
.nav-customizer header p { margin: 5px 0 0; color: var(--text-soft); font-size: 13px; }
.nav-customizer-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-muted); color: var(--text-main); font-size: 24px; line-height: 1; cursor: pointer; }
.nav-customizer-groups { padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }
.nav-customizer fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; }
.nav-customizer legend { padding: 0 5px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.nav-customizer-options { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 7px; gap: 7px; }
.nav-customizer-options label { min-height: 40px; padding: 8px 9px; border-radius: 8px; background: var(--bg-muted); display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.nav-customizer-options input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.nav-customizer-options span { font-size: 13px; }
.nav-customizer > footer { padding: 13px 20px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.nav-spacer { flex: 1 1 auto; min-width: 8px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 13px; }
.theme-toggle .select { width: 130px; min-width: 130px; height: 36px; padding: 6px 10px; }
.nav-account-entry {
  min-height: 36px; min-width: 68px; max-width: 132px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-muted); color: var(--text-main); font-size: 13px; font-weight: 650;
}
.nav-account-entry:hover { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--bg-card)); }
.nav-account-entry > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--text-soft); }
.nav-account-entry.signed-in .nav-account-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }

/* 账户入口位于全站导航最外层；登录页只处理身份，不混入首页查询任务。 */
.login-page { min-height: 100dvh; }
.login-card { width: min(520px, 100%); margin: clamp(42px, 9vh, 100px) auto 0; padding: clamp(22px, 4vw, 34px); }
.login-card-heading { margin-bottom: 24px; }
.login-eyebrow { color: var(--brand); font-size: 12px; font-weight: 750; letter-spacing: .12em; }
.login-card h1 { margin: 7px 0 8px; font-size: clamp(24px, 4vw, 30px); }
.login-card-heading p { margin: 0; color: var(--text-soft); line-height: 1.7; }
.login-form { display: grid; grid-gap: 16px; gap: 16px; }
.login-form label { display: grid; grid-gap: 7px; gap: 7px; color: var(--text-main); font-size: 13px; font-weight: 650; }
.login-form .input { min-height: 46px; }
.login-submit { min-height: 46px; margin-top: 2px; font-size: 15px; }
.login-readonly-note { margin: 0; color: var(--text-soft); text-align: center; font-size: 12px; }
.login-message { margin: 18px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--bg-muted); color: var(--brand); font-size: 13px; }
.login-account-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-gap: 4px 14px; gap: 4px 14px; align-items: center; }
.login-account-avatar { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 13%, var(--bg-muted)); color: var(--brand); font-size: 20px; font-weight: 800; }
.login-account-meta { min-width: 0; display: grid; grid-gap: 3px; gap: 3px; }
.login-account-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.login-account-meta span { color: var(--text-soft); font-size: 12px; }
.login-account-actions { grid-column: 1 / -1; margin-top: 18px; display: flex; gap: 10px; }
.login-account-actions .btn { flex: 1 1; display: inline-flex; align-items: center; justify-content: center; }
.access-denied-page { min-height: 70dvh; display: grid; place-items: center; }
.access-denied-card { width: min(560px, 100%); padding: clamp(24px, 5vw, 38px); }
.access-denied-card > span { color: var(--warn); font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.access-denied-card h1 { margin: 8px 0 10px; }
.access-denied-card p { color: var(--text-soft); line-height: 1.7; }
.access-denied-card code { color: var(--text-main); }
.permission-admin { padding: 0; overflow: hidden; }
.permission-admin-heading { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.permission-admin-heading h1 { margin: 0; font-size: 23px; }
.permission-admin-heading p { margin: 6px 0 0; color: var(--text-soft); font-size: 13px; }
.permission-message { margin: 12px 20px 0; padding: 9px 11px; border-radius: 8px; background: var(--bg-muted); color: var(--warn); font-size: 13px; }
.permission-admin-layout { min-height: 680px; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.permission-user-panel { min-width: 0; padding: 14px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg-muted) 55%, var(--bg-card)); }
.permission-user-list { margin-top: 10px; display: grid; grid-gap: 5px; gap: 5px; max-height: 310px; overflow-y: auto; }
.permission-user-list > button { width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; color: var(--text-main); text-align: left; cursor: pointer; }
.permission-user-list > button:hover { background: var(--bg-card); border-color: var(--line); }
.permission-user-list > button.active { background: color-mix(in srgb, var(--brand) 9%, var(--bg-card)); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.permission-user-list span { min-width: 0; display: grid; grid-gap: 2px; gap: 2px; }
.permission-user-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.permission-user-list small { color: var(--text-soft); }
.permission-user-list em { flex: 0 0 auto; color: var(--text-soft); font-size: 10px; font-style: normal; }
.permission-user-list em.enabled { color: var(--success); }
.permission-user-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-gap: 10px; gap: 10px; }
.permission-user-form h2 { margin: 0; font-size: 15px; }
.permission-user-form label { display: grid; grid-gap: 5px; gap: 5px; color: var(--text-soft); font-size: 11px; }
.permission-user-form label small { color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.permission-user-form .input, .permission-user-form .select { min-height: 38px; }
.permission-user-form .permission-active-check { display: flex; flex-direction: row; align-items: center; gap: 7px; color: var(--text-main); }
.office-launch-card { max-width: 720px; margin: 72px auto 0; padding: 36px; text-align: center; }
.office-launch-card h1 { margin: 8px 0 10px; font-size: clamp(24px, 4vw, 34px); }
.office-launch-card p { color: var(--text-soft); }
.office-launch-kicker { color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.office-launch-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin: 24px 0; }
.office-launch-file { display: grid; grid-gap: 8px; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); text-align: left; }
.office-launch-file > strong { font-size: 14px; }
.office-launch-file > button { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); color: var(--text-main); cursor: pointer; display: grid; grid-gap: 6px; gap: 6px; text-align: left; }
.office-launch-file > button:hover:not(:disabled) { border-color: var(--brand); }
.office-launch-file button:disabled { cursor: wait; opacity: .7; }
.office-launch-file > button small { color: var(--text-soft); }
.office-structure-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.office-structure-actions .btn { flex: 1 1 140px; min-height: 40px; padding: 8px 10px; }
/* 在线周转表是纯跳板:进页面就单点登录并直接进 Nextcloud 文件大厅。 */
.office-redirect { max-width: 480px; margin: 96px auto 0; padding: 32px; text-align: center; }
.office-redirect p { margin: 0 0 12px; color: var(--text-soft); }
.office-redirect .btn { min-width: 120px; }
.permission-matrix-panel { min-width: 0; display: flex; flex-direction: column; }
.permission-matrix-panel > header { padding: 16px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.permission-matrix-panel > header span { color: var(--text-soft); font-size: 11px; }
.permission-matrix-panel > header h2 { margin: 3px 0; font-size: 20px; }
.permission-matrix-panel > header p { margin: 0; color: var(--text-soft); font-size: 12px; }
.permission-legend { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.permission-legend .effective, .permission-action > span.effective { color: var(--success); }
.permission-groups { padding: 14px 18px 90px; display: grid; grid-gap: 12px; gap: 12px; }
.permission-group { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.permission-group-heading { min-height: 42px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-muted); }
.permission-group-heading h3 { margin: 0; color: var(--brand); font-size: 14px; }
.permission-group-heading > div { display: flex; gap: 6px; }
.permission-group-heading button { min-height: 28px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-card); color: var(--text-soft); font-size: 11px; cursor: pointer; }
.permission-feature { padding: 10px 12px; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-gap: 10px; gap: 10px; align-items: start; }
.permission-feature + .permission-feature { border-top: 1px solid var(--line); }
.permission-feature > strong { padding-top: 7px; font-size: 13px; }
.permission-feature-actions { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); grid-gap: 7px; gap: 7px; }
.permission-action { min-width: 0; min-height: 38px; padding: 5px 6px 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--bg-muted) 72%, var(--bg-card)); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.permission-action.risky { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warn) 58%, transparent); }
.permission-action > span { min-width: 68px; color: var(--text-soft); font-size: 12px; }
.permission-effect-control { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.permission-effect-control button { min-height: 28px; padding: 3px 7px; border: 0; border-left: 1px solid var(--line); background: var(--bg-card); color: var(--text-soft); font-size: 11px; cursor: pointer; }
.permission-effect-control button:first-child { border-left: 0; }
.permission-effect-control button.active { background: var(--control-secondary); color: #fff; }
.permission-effect-control button.active.allow { background: var(--success); }
.permission-effect-control button.active.deny { background: var(--danger); }
.permission-effect-control button:disabled { cursor: not-allowed; opacity: .48; }
.permission-save-bar { position: -webkit-sticky; position: sticky; bottom: 0; margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-card) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.permission-save-bar span { color: var(--text-soft); font-size: 12px; }

/* 首页工作台：查询和主列表是主任务，导入与核对放在其后。 */
.home-overview { padding-block: 14px; }
.home-overview h1 { font-size: 24px; line-height: 1.2; }
.home-search-panel { position: relative; }
.home-search-panel > h3 { margin: 0; }
.home-search-form { grid-template-columns: repeat(4, minmax(150px, 1fr)); align-items: end; margin-top: 12px; }
.home-search-query, .home-search-urgent, .home-search-delivery { grid-column: span 2; }
.home-search-form > *, .home-search-form .mobile-split > * { min-width: 0; }
.home-search-form .input,
.home-search-form .select,
.home-search-form .multi-select-trigger,
.home-search-form .btn { width: 100%; height: 38px; min-height: 38px; }
.home-search-form .mobile-split {
  width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; grid-gap: 12px !important; gap: 12px !important;
}
.home-search-form .mobile-split .select { max-width: none !important; }
.home-search-urgent > label {
  height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-input); white-space: nowrap;
}
.home-search-urgent > label input { width: 16px; height: 16px; margin: 0; }
.home-main-list { box-shadow: 0 5px 18px rgba(15, 118, 110, 0.08); }
.home-maintenance-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); grid-gap: 14px; gap: 14px; }
.home-maintenance-grid > .card { margin-bottom: 0; }
.schedule-month-controls { display: inline-flex; align-items: center; gap: 8px; }

.entry-sheet-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: 12px; }
.entry-sheet-table { min-width: 3200px; }
.entry-sheet-table th, .entry-sheet-table td { white-space: nowrap; vertical-align: top; }
.entry-sheet-table .input, .entry-sheet-table .select { min-width: 130px; }

.process-matrix .sticky-col { position: -webkit-sticky; position: sticky; z-index: 3; background: var(--bg-card); }
.process-matrix thead .sticky-col { background: var(--bg-muted); z-index: 4; }
.process-matrix .sticky-col { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); }
.process-matrix .sticky-col-1 { left: 0; min-width: 170px; max-width: 170px; }
.process-matrix .sticky-col-2 { left: 170px; min-width: 145px; max-width: 145px; }
.process-matrix .sticky-col-3 { left: 315px; min-width: 135px; max-width: 135px; }
.process-matrix .sticky-col-4 { left: 450px; min-width: 190px; max-width: 190px; }
.process-matrix .sticky-col-5 { left: 640px; min-width: 80px; max-width: 80px; box-shadow: 2px 0 0 var(--line); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-gap: 12px; gap: 12px; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-muted); color: var(--text-soft); font-size: 12px; }
.report-hero p { margin: 6px 0; }
.report-grid { display: grid; grid-template-columns: 1fr; grid-gap: 12px; gap: 12px; margin-bottom: 14px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin-bottom: 14px; }
.kpi-card h4 { margin: 0 0 6px; font-size: 14px; color: var(--text-soft); font-weight: 600; }
.kpi-card strong { display: block; font-size: 22px; margin-bottom: 4px; color: var(--text-main); }
.kpi-card span { font-size: 12px; color: var(--text-soft); }
.bars { display: grid; grid-gap: 10px; gap: 10px; }
.bar-row { display: grid; align-items: center; }
.bar-label { font-size: 13px; color: var(--text-main); white-space: nowrap; }
.bar-metrics { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; }
.bar-meta-text { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.bar-meta-total { color: var(--text-main); font-weight: 600; }
.bar-track { background: var(--bg-muted); border: 1px solid var(--line); border-radius: 999px; height: 22px; overflow: hidden; }
.bar-fill-stack { height: 100%; display: flex; overflow: hidden; border-radius: 999px; position: relative; }
.bar-fill { height: 100%; border-radius: 999px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bar-fill.value { background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%); }
.bar-fill.inhouse { background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%); border-radius: 999px 0 0 999px; }
.bar-fill.outsource { background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%); border-radius: 0 999px 999px 0; }
.bar-fill.status { background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%); }
.bar-value { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.bar-split-values { display: grid; grid-gap: 2px; gap: 2px; }
.bar-split { font-size: 12px; line-height: 1.1; color: var(--text-soft); white-space: nowrap; }
.bar-split.inhouse { color: #1d4ed8; }
.bar-split.outsource { color: #b45309; }
.legend-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; margin-right: 6px; }
.legend-inhouse { background: #3b82f6; }
.legend-outsource { background: #f59e0b; }
.mobile-nav, .mobile-only, .mobile-table-hint { display: none; }
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 6px; padding-inline: 8px; }
  .nav-brand { min-width: auto; padding-inline: 5px; }
  .nav-brand span, .theme-toggle > span { display: none; }
  .nav-personalized-links a, .nav-overview-links a { padding-inline: 6px; font-size: 12px; }
  .theme-toggle .select { width: 112px; min-width: 112px; }
  .nav-account-entry { min-width: 58px; max-width: 96px; padding-inline: 8px; }
}
@media (max-width: 900px) { .grid.cols-3 { grid-template-columns: 1fr; } }

/* ── 全站移动端底座 ─────────────────────────────────────────────
   默认样式就是现有电脑端；以下规则只在平板/手机视口生效，避免桌面视觉漂移。 */
@media (max-width: 1023px) {
  .page-shell { width: min(100% - 28px, 900px); padding-top: 14px; }
  /* 平板仍保留可见式业务入口，空间不足时按完整业务组自然换行。 */
  .grid.cols-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-maintenance-grid { grid-template-columns: 1fr; }
  .permission-admin-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .permission-feature { grid-template-columns: 1fr; }
  .permission-feature-actions { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .office-launch-card { margin-top: 24px; padding: 24px 16px; }
  .office-launch-files { grid-template-columns: 1fr; }
  html, body { max-width: 100%; overflow-x: hidden; }
  .page-shell {
    width: 100%;
    padding: 10px 10px calc(28px + env(safe-area-inset-bottom));
  }
  .card { padding: 12px; border-radius: 11px; margin-bottom: 10px; }
  .desktop-only, .nav-desktop { display: none !important; }
  .mobile-only, .mobile-table-hint { display: block; }

  /* 手机主导航：电脑端原胶囊导航不变，手机改为一行标题+抽屉菜单。 */
  .mobile-nav {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
  .mobile-nav-bar { min-height: 50px; display: flex; align-items: center; gap: 7px; padding: 6px 7px 6px 12px; }
  .mobile-nav-brand { min-height: 44px; color: var(--brand); font-weight: 750; white-space: nowrap; display: inline-flex; align-items: center; }
  .mobile-nav-current { min-width: 0; flex: 1 1; color: var(--text-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-toggle {
    width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--bg-muted); display: grid; align-content: center; grid-gap: 4px; gap: 4px; cursor: pointer;
  }
  .mobile-nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text-main); }
  .nav-account-entry.mobile { min-width: 48px; max-width: 72px; min-height: 44px; padding: 7px 8px; font-size: 12px; }
  .nav-account-entry.mobile .nav-account-dot { display: none; }
  .mobile-nav-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; padding: 10px;
    border: 1px solid var(--line); border-radius: 11px; background: var(--bg-elev);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.20);
    max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain;
  }
  .mobile-nav-groups { display: grid; grid-gap: 11px; gap: 11px; margin-bottom: 10px; }
  .mobile-nav-group { display: grid; grid-gap: 6px; gap: 6px; }
  .mobile-nav-group > strong { color: var(--text-soft); font-size: 11px; }
  .mobile-nav-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mobile-nav-group-head > strong { color: var(--text-soft); font-size: 11px; }
  .mobile-nav-group-head > button { min-height: 36px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-muted); color: var(--brand); font: inherit; font-size: 12px; }
  .mobile-nav-links { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 7px; gap: 7px; }
  .mobile-nav-links a {
    min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--bg-card); display: flex; align-items: center; font-size: 14px;
  }
  .mobile-nav-links a.active { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg-card)); font-weight: 650; }
  .mobile-nav-empty { grid-column: 1 / -1; margin: 0; padding: 10px; border: 1px dashed var(--line); border-radius: 9px; color: var(--text-soft); font-size: 12px; }
  .mobile-nav-menu .theme-toggle { width: 100%; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); }
  .mobile-nav-menu .theme-toggle .select { width: min(58vw, 190px); min-width: 0; }
  .nav-customizer-backdrop { padding: 10px; place-items: end center; }
  .nav-customizer { max-height: calc(100dvh - 20px); border-radius: 13px; }
  .nav-customizer > header { padding: 15px; }
  .nav-customizer-groups { padding: 12px 15px; grid-template-columns: 1fr; }
  .nav-customizer-options { grid-template-columns: 1fr 1fr; }
  .nav-customizer-options label { min-height: 44px; }
  .nav-customizer > footer { position: -webkit-sticky; position: sticky; bottom: 0; padding: 11px 15px; background: var(--bg-elev); }
  .login-card { margin-top: 20px; }
  .login-account-actions { flex-direction: column; }
  .permission-admin-heading { padding: 14px; }
  .permission-admin-heading { align-items: stretch; flex-direction: column; }
  .permission-admin-heading > .btn { width: 100%; white-space: nowrap; }
  .permission-admin-layout { display: block; }
  .permission-user-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .permission-user-list { max-height: 230px; }
  .permission-user-form { grid-template-columns: 1fr 1fr; }
  .permission-user-form h2, .permission-user-form .permission-active-check, .permission-user-form > button { grid-column: 1 / -1; }
  .permission-matrix-panel > header { align-items: flex-start; flex-direction: column; }
  .permission-legend { width: 100%; overflow-x: auto; }
  .permission-groups { padding: 10px 10px 86px; }
  .permission-group-heading { align-items: flex-start; flex-direction: column; }
  .permission-feature { padding: 10px; }
  .permission-action { align-items: flex-start; flex-direction: column; }
  .permission-effect-control { width: 100%; }
  .permission-effect-control button { flex: 1 1; min-height: 38px; }
  .permission-save-bar { padding: 10px; align-items: stretch; flex-direction: column; }
  .permission-save-bar .btn { width: 100%; }

  /* 通用触摸和表单尺寸。16px 输入字体可避免 iOS 聚焦时自动放大页面。 */
  .btn { min-height: 44px; padding: 10px 13px; }
  /* 小字号保持紧凑，只扩大手机触摸区域，不放大文字。 */
  .btn-xs { min-width: 44px; min-height: 44px; padding: 7px 10px; }
  .input, .select, .multi-select-trigger { min-height: 44px; font-size: 16px; }
  .seg { max-width: 100%; height: 46px; }
  .seg > button { padding: 0 13px; }
  .grid, .filter-grid { min-width: 0; }
  .filter-grid .input,
  .filter-grid .select,
  .filter-grid .multi-select-trigger { height: 44px; min-height: 44px; }
  .history-btn { width: 44px; height: 44px; }
  .mobile-touch-link { min-height: 44px; display: inline-flex; align-items: center; }
  .plan-machine-jump,
  .plan-review-work-jump { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .schedule-readonly { width: 100%; }
  .schedule-month-controls { width: 100%; }
  .schedule-month-controls > b { flex: 1 1; }
  .schedule-month-controls > .btn-xs[aria-label] { min-width: 44px; }
  .home-search-form { grid-template-columns: 1fr; }
  .home-search-query, .home-search-urgent, .home-search-delivery { grid-column: auto; }
  .home-search-form .input,
  .home-search-form .select,
  .home-search-form .multi-select-trigger,
  .home-search-form .btn,
  .home-search-urgent > label { height: 44px; min-height: 44px; }
  .mobile-order-list { display: grid; grid-gap: 10px; gap: 10px; margin-top: 8px; }
  .mobile-order-card {
    min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px;
    padding: 11px; background: var(--bg-card); box-shadow: var(--shadow-card);
  }
  .mobile-order-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .mobile-order-command {
    min-width: 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--brand);
    font-size: 15px; font-weight: 750; overflow-wrap: anywhere;
  }
  .mobile-order-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding-top: 5px; }
  .mobile-order-urgent, .mobile-order-status {
    display: inline-flex; align-items: center; min-height: 26px; padding: 3px 7px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--bg-muted); color: var(--text-soft); font-size: 11px;
  }
  .mobile-order-urgent { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg-card)); font-weight: 700; }
  .mobile-order-product { display: grid; grid-gap: 3px; gap: 3px; margin: 2px 0 10px; }
  .mobile-order-product strong { font-size: 14px; line-height: 1.4; }
  .mobile-order-product span { color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; }
  .mobile-order-card dl { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px 12px; gap: 8px 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
  .mobile-order-card dl > div { min-width: 0; display: grid; grid-gap: 2px; gap: 2px; }
  .mobile-order-card dt { color: var(--text-soft); font-size: 11px; }
  .mobile-order-card dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
  .mobile-order-detail {
    min-height: 44px; margin-top: 2px; border-top: 1px solid var(--line); display: flex; align-items: end;
    color: var(--brand); font-size: 13px; font-weight: 650;
  }
  .mobile-order-empty { padding: 20px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-soft); text-align: center; }
  .filter-inline-two, .mobile-split { display: grid !important; grid-template-columns: 1fr !important; grid-gap: 8px !important; gap: 8px !important; }
  .mobile-form-row { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch !important; }
  .mobile-form-row > .input, .mobile-form-row > .select, .mobile-form-row > .btn { width: 100% !important; max-width: none !important; }
  .mobile-actions { display: grid !important; grid-template-columns: 1fr !important; grid-gap: 8px !important; gap: 8px !important; }
  .mobile-actions > .btn, .mobile-actions > .btn-xs { width: 100%; }
  .mobile-section-head { align-items: flex-start !important; gap: 8px !important; flex-wrap: wrap !important; }
  .mobile-section-head > h1, .mobile-section-head > h2, .mobile-section-head > h3 { width: 100%; margin-bottom: 2px !important; }
  .mobile-report-filters { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch !important; }
  .mobile-report-filters > .select { width: 100% !important; max-width: none !important; }
  .mobile-report-detail-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: stretch !important; }
  .mobile-report-detail-actions > span { grid-column: 1 / -1; }
  .mobile-report-detail-actions > .btn { width: 100%; }
  .mobile-workhour-actions { align-items: stretch !important; }
  .mobile-workhour-actions > label { width: 100%; min-height: 44px; }
  .mobile-workhour-actions > .mobile-actions { width: 100%; }
  .mobile-pagination { align-items: stretch !important; }
  .mobile-pagination > .mobile-page-size { grid-column: 1 / -1; justify-content: space-between; }
  .mobile-pagination-controls { display: contents !important; }
  .mobile-pagination-controls > .mobile-pagination-meta { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .mobile-pagination-controls > .btn:first-child { grid-column: 1; grid-row: 3; }
  .mobile-pagination-controls > .btn:last-child { grid-column: 2; grid-row: 3; }
  .mobile-inventory-form { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch !important; }
  .mobile-inventory-form > label { display: grid !important; grid-template-columns: 1fr !important; grid-gap: 5px !important; gap: 5px !important; align-items: stretch !important; }
  .mobile-inventory-form input:not([type='checkbox']),
  .mobile-inventory-form select { width: 100% !important; min-height: 44px; margin-left: 0 !important; font-size: 16px; }
  .mobile-inventory-form input[type='file'] { max-width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-input); }
  .mobile-inventory-form > .btn { width: 100%; }
  .mobile-period-head { align-items: flex-start !important; }
  .mobile-period-actions { width: 100%; margin-left: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; grid-gap: 8px !important; gap: 8px !important; }
  .mobile-period-actions > .btn { width: 100%; }
  .mobile-period-actions .danger-action { grid-column: 1 / -1; }
  .mobile-table-actions { display: grid; grid-template-columns: 1fr; grid-gap: 6px; gap: 6px; min-width: 116px; }
  .mobile-table-actions .btn { width: 100%; margin-left: 0 !important; }
  .mobile-entry-load > a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .mobile-entry-form { margin-bottom: 10px; }
  .mobile-entry-group { min-width: 0; margin: 0 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
  .mobile-entry-group legend { padding: 0 6px; color: var(--brand); font-size: 14px; font-weight: 700; }
  .mobile-entry-fields { display: grid; grid-template-columns: 1fr; grid-gap: 9px; gap: 9px; }
  .mobile-entry-fields label { min-width: 0; display: grid; grid-gap: 5px; gap: 5px; color: var(--text-soft); font-size: 13px; }
  .mobile-entry-fields .input, .mobile-entry-fields .select { width: 100%; max-width: none; }
  .mobile-process-list { display: grid; grid-gap: 9px; gap: 9px; margin-bottom: 10px; }
  .mobile-process-card { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); overflow: hidden; }
  .mobile-process-card summary {
    min-height: 48px; padding: 11px 12px; cursor: pointer; list-style-position: inside;
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
  }
  .mobile-process-card summary span { color: var(--text-soft); font-size: 12px; }
  .mobile-process-card[open] summary { border-bottom: 1px solid var(--line); background: var(--bg-muted); }
  .mobile-process-card > .mobile-entry-fields { padding: 11px; }

  /* 宽表只能在自己的容器中横滑，不能把整页撑宽。 */
  .table-wrap, .entry-sheet-wrap {
    max-width: 100%; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .mobile-table-hint { margin: 2px 0 7px; color: var(--text-soft); font-size: 12px; }
  .mobile-table-hint::before { content: '↔ '; color: var(--brand); font-weight: 700; }
  th, td { padding: 8px; }
  .plan-table-wrap { border: 1px solid var(--line); border-radius: 9px; }
  .plan-table-wrap .plan-tbl { min-width: 980px; }
  .plan-table-wrap .plan-tbl .input,
  .plan-table-wrap .plan-tbl .select { min-height: 36px; height: 36px; font-size: 16px; }
  .plan-info-slots { min-height: 36px; }
  .plan-info-trigger { width: 34px; height: 28px; line-height: 26px; }
  .plan-handover-overlay { place-items: end center; padding: 0; }
  .plan-handover-popup { width: 100%; max-height: 65vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .plan-machine-handover-note { max-width: min(100%, 320px); flex-basis: 100%; white-space: normal; }
  .plan-review-work-jump { min-height: 32px; min-width: 44px; text-align: left; }

  /* 首页主表手机只固定工作命令；桌面仍固定前五列。否则五列宽度会盖住整块手机屏幕。 */
  .main-list-table { min-width: 1220px; --ml-c1: 132px; }
  .main-list-table.main-list-condensed { --ml-c1: 124px; }
  .main-list-table th:nth-child(n+2):nth-child(-n+5),
  .main-list-table td:nth-child(n+2):nth-child(-n+5) {
    position: static; left: auto; z-index: auto; box-shadow: none;
  }
  .main-list-table th:first-child, .main-list-table td:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 4; }
  .main-list-table thead th:first-child { z-index: 6; background: var(--bg-muted); }
  .main-list-table tbody td:first-child { background: var(--bg-card); box-shadow: 2px 0 0 var(--line); }

  /* 工时矩阵/录入横表手机只固定第一列，避免多列 sticky 叠满屏幕。 */
  .process-matrix .sticky-col-1 { left: 0; min-width: 132px; max-width: 132px; }
  .process-matrix .sticky-col:not(.sticky-col-1) {
    position: static; left: auto; z-index: auto; min-width: 130px; max-width: none;
    box-shadow: none; background: var(--bg-card);
  }
  .process-matrix thead .sticky-col:not(.sticky-col-1) { background: var(--bg-muted); }
  .process-matrix .sticky-col-1 { box-shadow: 2px 0 0 var(--line); }

  /* 排行和报表图在手机上纵向阅读，覆盖页面里的桌面固定网格列。 */
  .bar-row { grid-template-columns: minmax(0, 1fr) !important; gap: 5px !important; padding: 7px 0; border-bottom: 1px dashed var(--line); }
  .bar-metrics { flex-wrap: wrap; gap: 4px 10px; }
  .bar-track { width: 100%; }
  .bar-label { white-space: normal; }

  .mobile-pagination { display: grid !important; grid-template-columns: 1fr 1fr; grid-gap: 8px !important; gap: 8px !important; align-items: center !important; }
  .mobile-pagination > .btn { width: 100%; }
  .mobile-pagination .mobile-pagination-meta { grid-column: 1 / -1; margin: 0 !important; }
  .mobile-muted-secondary { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card strong { font-size: 20px; }

  /* 排班月历手机改为日期列表；电脑端仍保持七列月历。 */
  .schedule-legend { flex-wrap: wrap; gap: 7px 12px !important; }
  .schedule-calendar { grid-template-columns: 1fr !important; }
  .schedule-weekday, .schedule-blank { display: none; }
  .schedule-day {
    min-height: 76px !important; width: 100%; display: grid; grid-template-columns: 48px 1fr;
    align-items: center; grid-gap: 8px; gap: 8px; padding: 9px 12px !important;
  }
  .schedule-day > div:first-child { align-self: stretch; flex-direction: column; justify-content: center !important; gap: 6px; border-right: 1px solid var(--line); }
  .schedule-day > div:last-child { margin-top: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 5px; gap: 5px; line-height: 1.35 !important; }
}

/* 材料库存查询：桌面用表格快速比对，移动端用同一数据源的卡片查看。 */
.material-page { max-width: 1920px; }
.material-heading {
  margin: 24px 2px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.material-heading h1 { margin: 2px 0 6px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; }
.material-heading p { margin: 0; color: var(--text-soft); line-height: 1.6; }
.material-eyebrow { color: var(--brand) !important; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.material-freshness {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line));
  border-radius: 10px;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, var(--bg-card));
  font-size: 12px;
  text-align: right;
}
.material-freshness time { color: var(--text-soft); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.material-freshness.stale {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-card));
}
.material-search-card { padding: 22px 24px; }
.material-search-card form { width: 100%; max-width: 1440px; margin: 0 auto; }
.material-search-card label { min-width: 0; display: grid; grid-gap: 8px; gap: 8px; font-size: 13px; font-weight: 750; }
.material-search-row {
  display: grid;
  grid-template-columns: 240px minmax(420px, 1fr) 280px 180px;
  grid-gap: 14px;
  gap: 14px;
  align-items: end;
}
.material-search-row .input, .material-search-row .select, .material-search-row .btn {
  width: 100%;
  height: 50px;
  min-height: 50px;
  font-size: 16px;
}
.material-search-row .input, .material-search-row .select { padding: 11px 13px; }
.material-search-row .select { padding-right: 36px; }
.material-search-row .btn { font-weight: 750; white-space: nowrap; }
.material-category .select {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--bg-input));
  font-weight: 750;
}
.material-search-row .input:hover, .material-search-row .select:hover {
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
}
.material-search-row .input:focus, .material-search-row .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.material-raw-range { margin-top: 11px; color: var(--text-soft); font-size: 12px; }
.material-raw-range summary {
  width: -moz-fit-content;
  width: fit-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brand);
  cursor: pointer;
  font-weight: 750;
}
.material-raw-range > div { max-width: 420px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-muted); }
.material-raw-range > div > p { margin: 7px 0 0; line-height: 1.5; }
.material-advanced-range { min-width: 0; margin: 0; padding: 0; border: 0; }
.material-advanced-range legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 750; }
.material-advanced-range > div { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-gap: 7px; gap: 7px; align-items: center; }
.material-advanced-range > div > span { color: var(--text-soft); font-size: 12px; }
.material-advanced-range .input { min-height: 46px; font-size: 16px; }
.material-search-card form > p { margin: 8px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.material-message { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.material-message.error { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--bg-card)); }
.material-loading { min-height: 170px; display: grid; place-content: center; grid-template-columns: repeat(3, 9px); grid-gap: 7px; gap: 7px; text-align: center; }
.material-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: material-pulse 900ms ease-in-out infinite alternate; }
.material-loading span:nth-child(2) { animation-delay: 180ms; }
.material-loading span:nth-child(3) { animation-delay: 360ms; }
.material-loading p { grid-column: 1 / -1; margin: 8px 0 0; color: var(--text-soft); font-size: 13px; }
@keyframes material-pulse { to { transform: translateY(-5px); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .material-loading span { animation: none; } }
.material-empty { min-height: 190px; display: grid; place-content: center; grid-gap: 7px; gap: 7px; color: var(--text-soft); text-align: center; }
.material-empty strong { color: var(--text-main); font-size: 17px; }
.material-empty p { margin: 0; }
.material-empty.compact { min-height: 170px; }
.material-refine { padding: 0; }
.material-refine-group { padding: 15px 18px; }
.material-refine-group + .material-refine-group { border-top: 1px solid var(--line); }
.material-refine-group > header, .material-advanced > header {
  margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.material-refine-group > header span, .material-advanced > header span { color: var(--text-soft); font-size: 12px; }
.material-facet-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 5px; scrollbar-width: thin; }
.material-facet-list button {
  min-height: 39px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px;
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  color: var(--text-main); background: var(--bg-card); cursor: pointer;
}
.material-facet-list button:hover { border-color: var(--brand); }
.material-facet-list button:active { transform: translateY(1px); }
.material-facet-list button b {
  min-width: 22px; padding: 2px 6px; border-radius: 999px;
  color: var(--text-soft); background: var(--bg-muted); font-size: 11px;
}
.material-facet-list button.on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg-card)); font-weight: 750; }
.material-facet-list button.on b { color: #fff; background: var(--brand); }
.material-advanced { padding: 15px 18px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-muted) 68%, var(--bg-card)); }
.material-advanced-grid { display: grid; grid-template-columns: repeat(4, minmax(175px, 1fr)) 130px; grid-gap: 10px; gap: 10px; align-items: end; }
.material-advanced-grid .btn { min-height: 46px; }
.material-workspace { min-width: 0; }
.material-workspace.with-calculator { display: grid; grid-template-columns: minmax(0, 1fr) 310px; grid-gap: 14px; gap: 14px; align-items: start; }
.material-results { padding: 0; overflow: hidden; }
.material-results-head {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.material-results-head h2 { margin: 0 0 4px; font-size: 18px; }
.material-results-head p { margin: 0; color: var(--text-soft); font-size: 13px; }
.material-results-head .material-results-rule { margin-top: 5px; color: var(--brand); }
.material-results-head > span { padding: 5px 9px; border-radius: 999px; color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--bg-card)); font-size: 12px; font-weight: 700; white-space: nowrap; }
.material-table-wrap { max-height: 66vh; }
.material-table { min-width: 1440px; }
.material-table th { top: 0; }
.material-table td { vertical-align: middle; }
.material-table .numeric { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.material-table td small { margin-top: 4px; display: block; color: var(--text-soft); white-space: nowrap; }
.material-spec-badge {
  display: inline-flex; padding: 3px 7px; border-radius: 7px;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--bg-card));
  font-size: 12px; font-weight: 750; white-space: nowrap;
}
.material-spec-badge.other { color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg-card)); }
.material-match, .material-card-match {
  display: inline-flex; padding: 4px 7px; border-radius: 7px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--bg-card)); font-size: 12px; font-weight: 750; line-height: 1.45;
}
.material-match.ground_exact, .material-card-match.ground_exact {
  color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}
.material-code { color: var(--text-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.material-qty { color: var(--brand); font-size: 16px; font-weight: 800; }
.material-cost { color: var(--text-main); font-weight: 750; white-space: nowrap; }
.material-cost > strong { display: block; color: var(--brand); font-size: 15px; }
.material-cost small { font-weight: 500; }
.material-cost .material-current-cost { color: var(--text-soft); }
.material-card-list { padding: 12px; }
.material-stock-card { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card); }
.material-stock-card + .material-stock-card { margin-top: 10px; }
.material-stock-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.material-stock-card > header > div:first-child { min-width: 0; display: grid; grid-gap: 4px; gap: 4px; }
.material-stock-card > header strong { font-size: 18px; }
.material-stock-card > header span { color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; }
.material-card-qty { flex: 0 0 auto; display: grid; justify-items: end; }
.material-card-qty b { color: var(--brand); font-size: 22px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.material-card-spec { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.material-card-spec > span:not(.material-spec-badge) { padding: 3px 7px; border-radius: 7px; color: var(--text-soft); background: var(--bg-muted); font-size: 12px; }
.material-card-match { margin: 10px 0 0; }
.material-stock-card dl { margin: 13px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; grid-gap: 7px; gap: 7px; }
.material-stock-card dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-gap: 8px; gap: 8px; font-size: 12px; }
.material-stock-card dt { color: var(--text-soft); }
.material-stock-card dd { margin: 0; overflow-wrap: anywhere; }
.material-card-cost { color: var(--brand); font-weight: 800; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.material-cost-pending { color: var(--warn); font-weight: 750; }
.material-card-calc { width: 100%; min-height: 44px; margin-top: 12px; }
.material-calculator { position: -webkit-sticky; position: sticky; top: 14px; padding: 16px; }
.material-calculator > header { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.material-calculator > header > div { min-width: 0; display: grid; grid-gap: 3px; gap: 3px; }
.material-calculator > header p { margin: 0; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.material-calculator > header strong { font-size: 18px; }
.material-calculator > header span { color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; }
.material-calculator > header button {
  padding: 5px; border: 0; color: var(--text-soft); background: transparent; cursor: pointer;
}
.material-calculator > label { margin-top: 11px; display: grid; grid-gap: 6px; gap: 6px; color: var(--text-soft); font-size: 12px; }
.material-calculator > label .input { min-height: 44px; font-size: 16px; }
.material-angle-result {
  margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 10px; display: grid; grid-gap: 5px; gap: 5px; background: color-mix(in srgb, var(--brand) 7%, var(--bg-card));
}
.material-angle-result span { color: var(--text-soft); font-size: 12px; }
.material-angle-result strong { color: var(--brand); font-size: 30px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.material-formula, .material-calculator-warn { margin: 12px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.material-calculator-warn { padding: 8px; border-radius: 8px; color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--bg-card)); }

@media (max-width: 1023px) {
  .material-heading { margin-top: 18px; }
  .material-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-search-row > .material-required-diameter { grid-column: auto; }
  .material-search-row > .btn { align-self: end; }
  .material-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-advanced-grid .btn { align-self: end; }
  .material-workspace.with-calculator { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 767px) {
  .material-page { width: 100%; padding: 0 12px 28px; }
  .material-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .material-heading h1 { font-size: 28px; }
  .material-freshness { align-self: flex-start; text-align: left; }
  .material-search-card { padding: 14px; }
  .material-search-row { grid-template-columns: 1fr; gap: 12px; }
  .material-search-row > .material-required-diameter { grid-column: auto; }
  .material-search-row .btn { min-height: 48px; }
  .material-refine-group, .material-advanced { padding: 14px; }
  .material-refine-group > header, .material-advanced > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .material-advanced-grid { grid-template-columns: 1fr; }
  .material-advanced-grid .btn { min-height: 48px; }
  .material-workspace.with-calculator { display: flex; flex-direction: column; }
  .material-workspace.with-calculator .material-results { width: 100%; order: 2; }
  .material-calculator { width: 100%; position: static; order: 1; }
  .material-results-head { align-items: flex-start; padding: 14px; }
  .material-results-head > span { display: none; }
}

@media (max-width: 380px) {
  .mobile-nav-links { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr; }
}

/* 数控员工交接班：独立的手机优先入口，桌面打开时保持窄屏工作台。 */
.handover-shell {
  min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: flex-start;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, var(--bg-body)), var(--bg-body) 42%);
}
.handover-card { width: min(100%, 560px); margin-top: 3vh; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); box-shadow: 0 12px 32px rgba(15,23,42,.12); }
.handover-brand { font-size: 25px; font-weight: 800; color: var(--brand); letter-spacing: 1px; }
.handover-login p { color: var(--text-soft); }
.handover-login form { display: grid; grid-gap: 12px; gap: 12px; margin: 18px 0; }
.handover-login form label, .handover-scope { display: grid; grid-gap: 6px; gap: 6px; color: var(--text-soft); font-size: 13px; }
.handover-login .input, .handover-login .btn { width: 100%; min-height: 48px; font-size: 16px; }
.handover-login > a, .handover-link-btn { display: inline-flex; margin-top: 12px; color: var(--brand); background: transparent; border: 0; padding: 0; cursor: pointer; }
.handover-app-download { margin-top: 18px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--brand) 7%, var(--bg-card)); color: var(--brand); display: grid !important; grid-gap: 3px; gap: 3px; text-decoration: none; }
.handover-app-download span, .handover-app-download small { color: var(--text-soft); font-size: 12px; }
.handover-app-download.compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.handover-tablet-install { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); }
.handover-tablet-install summary { cursor: pointer; padding: 12px 14px; color: var(--text); font-weight: 700; }
.handover-tablet-install > div { display: grid; grid-gap: 6px; gap: 6px; padding: 0 14px 14px; color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.handover-tablet-install p { margin: 0; }
.handover-tablet-install small { color: var(--text-soft); }
.handover-head, .handover-work-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.handover-head > div, .handover-work-head > div { display: grid; grid-gap: 2px; gap: 2px; }
.handover-head b { font-size: 20px; }
.handover-head span, .handover-work-head span { color: var(--text-soft); font-size: 12px; }
.handover-head button, .handover-work-head > button { min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-muted); color: var(--text-main); cursor: pointer; }
.handover-scope { margin-top: 18px; }
.handover-date { margin: 22px 0 12px; text-align: center; color: var(--text-soft); font-size: 14px; }
.handover-home-actions { display: grid; grid-gap: 14px; gap: 14px; }
.handover-main-btn { min-height: 142px; padding: 22px 18px; border: 0; border-radius: 16px; color: white; cursor: pointer; display: grid; place-content: center; grid-gap: 8px; gap: 8px; box-shadow: 0 9px 20px rgba(15,23,42,.15); }
.handover-main-btn.in { background: linear-gradient(135deg, #087f5b, #12a77b); }
.handover-main-btn.out { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.handover-main-btn span { font-size: 28px; font-weight: 800; }
.handover-main-btn small { font-size: 13px; opacity: .9; }
.handover-main-btn:disabled { opacity: .45; cursor: not-allowed; }
.handover-message, .handover-alert { margin-top: 13px; padding: 10px 12px; border-radius: 9px; background: var(--bg-muted); color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.handover-alert { background: color-mix(in srgb, var(--warn) 12%, var(--bg-card)); color: var(--warn); }
.handover-test-banner { margin-top: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 10px; color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg-card)); font-size: 13px; line-height: 1.5; }
.handover-work { margin-top: 0; padding: 12px 12px calc(86px + env(safe-area-inset-bottom)); }
.handover-work-head { position: -webkit-sticky; position: sticky; top: 0; z-index: 12; margin: -12px -12px 12px; padding: 11px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-card) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.handover-work-head b { font-size: 17px; }
.handover-empty { padding: 40px 10px; text-align: center; color: var(--text-soft); }
.handover-machine { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--bg-card); }
.handover-machine > header { min-height: 48px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-muted); }
.handover-machine > header strong { color: var(--brand); font-size: 18px; }
.handover-machine > header span { color: var(--text-soft); font-size: 12px; }
.handover-machine-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.handover-machine-menu { position: relative; }
.handover-machine-menu > summary { width: 44px; height: 44px; border: 1px solid transparent; border-radius: 9px; display: grid; place-items: center; list-style: none; color: var(--text-main); background: transparent; cursor: pointer; }
.handover-machine-menu > summary::-webkit-details-marker { display: none; }
.handover-machine-menu > summary span { display: block; color: inherit; font-size: 24px; font-weight: 800; line-height: 1; transform: translateY(-3px); }
.handover-machine-menu[open] > summary { border-color: var(--line); background: var(--bg-card); }
.handover-machine-menu > div { position: absolute; z-index: 3; top: calc(100% + 4px); right: 0; min-width: 132px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); box-shadow: 0 8px 20px rgba(15,23,42,.14); }
.handover-machine-menu button { width: 100%; min-height: 44px; padding: 8px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--warn); font-size: 14px; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; }
.handover-machine-menu button:hover, .handover-machine-menu button:focus-visible { background: color-mix(in srgb, var(--warn) 10%, var(--bg-card)); }
.handover-machine-menu button:active { transform: scale(.98); }
.handover-machine-menu button:disabled { opacity: .5; cursor: not-allowed; }
.handover-machine-note { margin: 10px 12px 0; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-muted); }
.handover-machine-note.active { border-style: solid; border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--bg-card)); }
.handover-machine-note summary { padding: 10px 11px; color: var(--text-soft); font-size: 12px; font-weight: 650; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handover-machine-note.active summary { color: var(--warn); }
.handover-machine-note > div { padding: 0 10px 10px; }
.handover-machine-note textarea, .handover-review-fields textarea { width: 100%; min-height: 64px; padding-top: 9px; resize: vertical; font-size: 16px; }
.handover-note-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.handover-note-actions button { min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); color: var(--text-main); cursor: pointer; }
.handover-note-actions button:last-child { color: var(--success); }
.handover-note-actions button:disabled { opacity: .45; cursor: not-allowed; }
.handover-task { padding: 13px 12px; border-top: 1px solid var(--line); }
.handover-task-title { display: flex; align-items: baseline; gap: 8px; }
.handover-task-title b { font-size: 17px; color: var(--text-main); }
.handover-task-title span { min-width: 0; flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handover-task-sub { margin-top: 4px; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.handover-product-note { margin-top: 8px; padding: 8px 10px; border-radius: 8px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--bg-card)); font-size: 12px; line-height: 1.45; }
.handover-qty-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.handover-qty-grid.single { grid-template-columns: 1fr; }
.handover-qty-grid > div { padding: 9px 10px; border-radius: 9px; background: var(--bg-muted); display: grid; grid-gap: 3px; gap: 3px; }
.handover-qty-grid span { color: var(--text-soft); font-size: 11px; }
.handover-qty-grid b { font-size: 17px; }
.handover-source { margin-top: 7px; color: var(--text-soft); font-size: 12px; }
.handover-count-check { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); }
.handover-count-check > p { margin: 0 0 9px; color: var(--warn); font-size: 12px; line-height: 1.5; }
.handover-count-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; }
.handover-count-actions button { min-height: 44px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-card); color: var(--text-main); font-weight: 700; cursor: pointer; }
.handover-count-actions button:only-child { grid-column: 1 / -1; }
.handover-count-actions button.selected { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--bg-card)); }
.handover-count-actions button.selected.warn { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg-card)); }
.handover-count-fields { margin-top: 9px; display: grid; grid-gap: 8px; gap: 8px; }
.handover-count-fields label { display: grid; grid-gap: 5px; gap: 5px; color: var(--text-soft); font-size: 12px; }
.handover-count-fields .input, .handover-count-fields .select { width: 100%; min-height: 44px; font-size: 16px; }
.handover-count-result { padding: 9px 10px; border-radius: 8px; color: var(--text-soft); background: var(--bg-muted); font-size: 13px; }
.handover-count-result.matched { color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--bg-card)); }
.handover-count-result.pending_source, .handover-count-result.pending_review { color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg-card)); }
.handover-parallel { margin-top: 8px; color: var(--brand); font-size: 12px; }
.handover-machine-check { width: calc(100% - 24px); min-height: 46px; margin: 0 12px 12px; border: 1px solid var(--brand); border-radius: 10px; color: var(--brand); background: var(--bg-card); font-weight: 700; cursor: pointer; }
.handover-machine-check.checked { color: white; background: var(--brand); }
.handover-review-fields { margin-top: 12px; display: grid; grid-gap: 9px; gap: 9px; }
.handover-review-fields label { display: grid; grid-gap: 5px; gap: 5px; color: var(--text-soft); font-size: 12px; }
.handover-review-fields .input, .handover-review-fields .select { width: 100%; min-height: 46px; font-size: 16px; }
.handover-predispatch-action { margin-top: 12px; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-soft); font-size: 12px; }
.handover-predispatch-action button, .handover-predispatch-head button { min-height: 38px; padding: 0 12px; border: 1px solid var(--brand); border-radius: 9px; background: transparent; color: var(--brand); font-weight: 700; cursor: pointer; }
.handover-predispatch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--warn); }
.handover-time-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.handover-bottom-action { position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(100%, 560px); transform: translateX(-50%); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-card) 94%, transparent); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.handover-bottom-action .btn { width: 100%; min-height: 50px; font-size: 16px; }
.sticky-message { position: -webkit-sticky; position: sticky; bottom: 72px; z-index: 11; box-shadow: 0 5px 16px rgba(15,23,42,.12); }
.handover-add-machine { margin: 14px 0 4px; border: 1px dashed color-mix(in srgb, var(--brand) 50%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--brand) 5%, var(--bg-card)); overflow: hidden; }
.handover-add-machine > summary { min-height: 54px; padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; grid-gap: 3px 10px; gap: 3px 10px; color: var(--brand); list-style: none; }
.handover-add-machine > summary::-webkit-details-marker { display: none; }
.handover-add-machine > summary::after { content: '展开'; grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 4px 7px; border-radius: 999px; background: var(--bg-card); color: var(--brand); font-size: 11px; font-weight: 700; }
.handover-add-machine[open] > summary::after { content: '收起'; }
.handover-add-machine > summary span, .handover-add-machine > small { color: var(--text-soft); font-size: 12px; line-height: 1.45; }
.handover-add-machine[open] > summary { border-bottom: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--line)); }
.handover-machine-options { margin: 11px 12px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; }
.handover-machine-options button { min-width: 0; min-height: 58px; padding: 8px 5px; border: 1px solid var(--brand); border-radius: 10px; background: var(--bg-card); color: var(--brand); cursor: pointer; display: grid; place-content: center; grid-gap: 2px; gap: 2px; }
.handover-machine-options button b { font-size: 17px; }
.handover-machine-options button span { color: var(--text-soft); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handover-machine-options button.unavailable { border-color: var(--line); color: var(--text-soft); background: var(--bg-muted); }
.handover-machine-options button:disabled { opacity: .55; cursor: not-allowed; }
.handover-add-machine > small { display: block; margin: 10px 12px 12px; }

/* 管理端按日期查看交接班，任务明细采用可展开卡片，避免移动端超宽表格。 */
.handover-summary-page { max-width: 1500px; }
.handover-summary-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.handover-summary-toolbar h2 { margin: 0; }
.handover-summary-toolbar p { margin: 6px 0 0; color: var(--text-soft); font-size: 13px; }
.handover-summary-date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.handover-summary-date .input { width: 160px; min-height: 40px; }
.handover-summary-metrics { margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-gap: 10px; gap: 10px; }
.handover-summary-metrics article { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); display: grid; grid-gap: 5px; gap: 5px; }
.handover-summary-metrics article.warn { border-color: color-mix(in srgb, var(--warn) 48%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--bg-card)); }
.handover-summary-metrics span { color: var(--text-soft); font-size: 12px; }
.handover-summary-metrics b { font-size: 24px; }
.handover-summary-shift { margin-top: 14px; }
.handover-summary-shift > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.handover-summary-shift > header > div { display: flex; align-items: baseline; gap: 8px; }
.handover-summary-shift h3 { margin: 0; }
.handover-summary-shift > header span { color: var(--text-soft); font-size: 12px; }
.handover-summary-operators { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); grid-gap: 12px; gap: 12px; align-items: start; }
.handover-summary-operator { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.handover-summary-operator > summary { padding: 13px 14px; cursor: pointer; display: grid; grid-template-columns: minmax(110px, 1fr) minmax(90px, 1fr) auto; grid-gap: 7px 12px; gap: 7px 12px; align-items: center; list-style-position: inside; }
.handover-summary-operator[open] > summary { border-bottom: 1px solid var(--line); background: var(--bg-muted); }
.handover-summary-person { display: inline-grid; gap: 2px; vertical-align: middle; }
.handover-summary-person span, .handover-summary-machines, .handover-summary-progress { color: var(--text-soft); font-size: 12px; }
.handover-summary-machines { overflow-wrap: anywhere; }
.handover-summary-status { justify-self: end; padding: 4px 8px; border-radius: 999px; background: var(--bg-muted); color: var(--text-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.handover-summary-status.status-已交班 { background: color-mix(in srgb, var(--success) 13%, var(--bg-card)); color: var(--success); }
.handover-summary-status.status-已接班 { background: color-mix(in srgb, var(--brand) 12%, var(--bg-card)); color: var(--brand); }
.handover-summary-status.status-交班草稿, .handover-summary-status.status-待接班 { background: color-mix(in srgb, var(--warn) 12%, var(--bg-card)); color: var(--warn); }
.handover-summary-progress { grid-column: 2 / 4; }
.handover-summary-meta { padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; }
.handover-summary-meta > div { min-width: 0; padding: 8px; border-radius: 8px; background: var(--bg-muted); display: grid; grid-gap: 3px; gap: 3px; }
.handover-summary-meta span { color: var(--text-soft); font-size: 11px; }
.handover-summary-meta b { font-size: 12px; overflow-wrap: anywhere; }
.handover-summary-actions { margin: 0 14px 12px; padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 7%, var(--bg-card)); display: flex; align-items: center; gap: 10px; }
.handover-summary-actions span { color: var(--text-soft); font-size: 12px; line-height: 1.45; }
.handover-summary-actions .btn { min-height: 40px; flex: 0 0 auto; }
.handover-summary-items { padding: 0 14px 14px; display: grid; grid-gap: 9px; gap: 9px; }
.handover-summary-items article { padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.handover-summary-items article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.handover-summary-items article > header > div { min-width: 0; display: grid; grid-gap: 3px; gap: 3px; }
.handover-summary-items article > header span { color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; }
.handover-summary-items article > header em { color: var(--text-soft); font-size: 11px; font-style: normal; white-space: nowrap; }
.handover-summary-qty { margin-top: 9px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 7px; gap: 7px; }
.handover-summary-qty > div { padding: 7px 8px; border-radius: 7px; background: var(--bg-muted); display: grid; grid-gap: 2px; gap: 2px; }
.handover-summary-qty span { color: var(--text-soft); font-size: 10px; }
.handover-summary-qty b { font-size: 14px; }
.handover-summary-process { margin: 8px 0 0; color: var(--text-soft); font-size: 11px; }
.handover-summary-note { margin: 8px 0 0; padding: 7px 9px; border-radius: 7px; color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg-card)); font-size: 12px; line-height: 1.45; }
.handover-summary-note.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg-card)); }
.handover-summary-count { margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-gap: 5px; gap: 5px; color: var(--text-soft); background: var(--bg-muted); font-size: 12px; }
.handover-summary-count.pending_source, .handover-summary-count.pending_review { border-color: color-mix(in srgb, var(--warn) 48%, var(--line)); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--bg-card)); }
.handover-summary-count.confirmed, .handover-summary-count.matched { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg-card)); }
.handover-summary-count > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.handover-summary-count .btn { min-height: 40px; padding: 7px 10px; font-size: 12px; }
.handover-summary-empty { padding: 32px 10px 18px; color: var(--text-soft); text-align: center; }
.handover-summary-empty.compact { padding: 14px; }

@media (max-width: 1023px) {
  .handover-summary-toolbar { align-items: stretch; flex-direction: column; }
  .handover-summary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 数控交接班平板布局：业务逻辑与手机共用，仅扩大工作区并重排卡片。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .handover-shell { padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
  .handover-card { width: min(100%, 900px); margin-top: 4vh; padding: 28px; border-radius: 20px; }
  .handover-login { max-width: 620px; }
  .handover-brand { font-size: 30px; }
  .handover-login form { gap: 16px; margin: 24px 0; }
  .handover-login .input, .handover-login .btn { min-height: 54px; }
  .handover-head b { font-size: 24px; }
  .handover-scope { margin-top: 22px; }
  .handover-date { margin: 28px 0 16px; font-size: 15px; }
  .handover-home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .handover-main-btn { min-height: 220px; padding: 28px 22px; }
  .handover-main-btn span { font-size: 32px; }
  .handover-main-btn small { font-size: 14px; }
  .handover-work { width: min(100%, 960px); margin-top: 0; padding: 18px 18px calc(94px + env(safe-area-inset-bottom)); }
  .handover-work-head { margin: -18px -18px 18px; padding: 14px 18px; }
  .handover-work-head b { font-size: 20px; }
  .handover-machine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); grid-gap: 16px; gap: 16px; align-items: start; }
  .handover-machine { margin-bottom: 0; }
  .handover-machine > header { min-height: 54px; padding: 12px 15px; }
  .handover-task { padding: 15px; }
  .handover-machine-check { width: calc(100% - 30px); margin: 0 15px 15px; }
  .handover-machine-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .handover-bottom-action { width: min(calc(100% - 48px), 960px); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .handover-bottom-action .btn { min-height: 54px; }
}

@media (max-width: 380px) {
  .handover-card { padding: 14px; }
  .handover-work { padding: 10px 10px calc(86px + env(safe-area-inset-bottom)); }
  .handover-time-grid { grid-template-columns: 1fr; }
  .handover-machine-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handover-machine-options button { min-height: 64px; }
}

@media (max-width: 767px) {
  .handover-summary-page { padding-left: 12px; padding-right: 12px; }
  .handover-summary-date { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handover-summary-date .input { width: 100%; grid-column: 1 / -1; grid-row: 1; }
  .handover-summary-date .btn { width: 100%; min-height: 44px; }
  .handover-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handover-summary-metrics article { padding: 11px 12px; }
  .handover-summary-operators { grid-template-columns: minmax(0, 1fr); }
  .handover-summary-operator > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .handover-summary-machines { grid-column: 1; }
  .handover-summary-status { grid-column: 2; grid-row: 1 / 3; }
  .handover-summary-progress { grid-column: 1 / -1; }
  .handover-summary-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handover-summary-actions { align-items: stretch; flex-direction: column; }
  .handover-summary-actions .btn { width: 100%; min-height: 44px; }
}

/* ---------------- 质量登记 /quality ----------------
   断点 760px:以上是办公室宽屏(顶部一行快速录入 + 下方表格行内编辑),
   以下是车间现场(卡片表单、大按钮、照片区显眼)。两套布局共用同一份表单状态,
   所以这里只切显示,不切逻辑。 */
.quality-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.quality-head h2 { margin: 0; }
.quality-head p { margin: 6px 0 0; color: var(--text-soft); font-size: 13px; }
.quality-tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); }
.quality-tabs button { border: 0; border-radius: 9px; padding: 9px 16px; background: transparent; color: var(--text-soft); font-size: 14px; font-weight: 700; cursor: pointer; }
.quality-tabs button.on { background: var(--brand); color: #fff; }

/* ---------------- 质量工具 /quality/helix-pitch ----------------
   现场只需要三项常用测量值，规格修正按需展开。图示在桌面靠右弹出，在手机底部弹出，
   不复制计算逻辑，也不挡住当前输入框。 */
.hp-page { position: relative; }
.hp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.hp-head h1 { margin: 0; font-size: 22px; }
.hp-head p { margin: 6px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.hp-layout { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr); grid-gap: 14px; gap: 14px; align-items: start; }
.hp-form h2 { margin: 0 0 14px; font-size: 15px; }
.hp-form-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 12px; gap: 10px 12px; }
.hp-field { display: grid; grid-gap: 5px; gap: 5px; margin-bottom: 11px; min-width: 0; }
.hp-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-main); font-size: 13px; font-weight: 650; }
.hp-field > span em { color: var(--text-soft); font-size: 11px; font-style: normal; font-weight: 400; }
.hp-field .input, .hp-field .select { min-height: 42px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.hp-primary-input { height: 56px; color: var(--brand); font-size: 24px; font-weight: 750; text-align: center; }
.hp-required-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 3px; padding-top: 13px; border-top: 1px solid var(--line); }
.hp-required-heading strong { color: var(--text-main); font-size: 13px; }
.hp-required-heading span { color: var(--danger); font-size: 11px; }
.hp-details { margin-top: 10px; }
.hp-default-toggle {
  width: 100%; display: grid; grid-gap: 3px; gap: 3px; padding: 10px 12px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-muted);
  color: var(--text-main); font: inherit; text-align: left; cursor: pointer;
}
.hp-default-toggle:hover { border-color: var(--brand); }
.hp-default-toggle span { color: var(--brand); font-size: 13px; font-weight: 700; }
.hp-default-toggle small { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.hp-default-fields { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }

.hp-result { min-height: 360px; padding: 22px; border-left: 5px solid var(--brand); }
.hp-result.is-high { border-left-color: var(--success); }
.hp-result.is-medium { border-left-color: var(--warn); }
.hp-result.is-low, .hp-result.is-error { border-left-color: var(--danger); }
.hp-result-label { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.hp-result-value { margin-bottom: 8px; color: var(--text-main); font-size: clamp(42px, 6vw, 66px); font-weight: 780; line-height: 1; letter-spacing: -2px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.hp-result-value small { color: var(--text-soft); font-size: 18px; font-weight: 500; letter-spacing: 0; }
.hp-result > strong { display: block; color: var(--success); font-size: 16px; }
.hp-result.is-medium > strong { color: var(--warn); }
.hp-result.is-low > strong, .hp-result.is-error > strong { color: var(--danger); }
.hp-result > p { margin: 7px 0 16px; max-width: 68ch; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.hp-result > ul { margin: 12px 0 0; padding-left: 20px; color: var(--danger); line-height: 1.8; }
.hp-result-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; grid-gap: 1px; gap: 1px; overflow: hidden; border-radius: 10px; background: var(--line); }
.hp-result-facts div { display: grid; grid-gap: 3px; gap: 3px; padding: 11px 12px; background: var(--bg-muted); }
.hp-result-facts dt { color: var(--text-soft); font-size: 11px; }
.hp-result-facts dd { margin: 0; font-size: 15px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.hp-advice, .hp-direction-warning { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.6; }
.hp-advice { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, var(--bg-card)); }
.hp-result.is-low .hp-advice { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); }
.hp-direction-warning { color: var(--text-main); background: color-mix(in srgb, var(--info) 10%, var(--bg-card)); }

.hp-candidates summary { cursor: pointer; color: var(--text-main); font-size: 13px; font-weight: 700; }
.hp-table-scroll { margin-top: 12px; overflow-x: auto; }
.hp-candidates table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 13px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.hp-candidates th, .hp-candidates td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.hp-candidates th { color: var(--text-soft); font-size: 12px; font-weight: 600; }
.hp-candidates tr.selected td { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg-card)); font-weight: 700; }

.hp-guide {
  position: fixed; z-index: 220; top: 112px; right: max(22px, calc((100vw - 1280px) / 2 + 10px));
  width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 136px); overflow: auto;
  padding: 16px; border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line)); border-radius: 14px;
  background: var(--bg-elev); box-shadow: var(--shadow-elevated);
}
.hp-guide-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--bg-muted); color: var(--text-soft); font-size: 22px; cursor: pointer; }
.hp-guide > strong { display: block; padding-right: 34px; color: var(--brand); font-size: 15px; }
.hp-guide > p { margin: 6px 0 10px; color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.hp-guide > small { display: block; margin-top: 9px; padding: 8px 10px; border-left: 3px solid var(--brand); background: var(--bg-muted); color: var(--text-soft); line-height: 1.55; }
.hp-guide-figure { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); overflow: hidden; }
.hp-guide-figure svg { display: block; width: 100%; height: auto; }
.hp-guide-figure text { fill: var(--text-soft); font: 11px 'Avenir Next', 'PingFang SC', sans-serif; text-anchor: middle; }
.hp-diagram-body, .hp-diagram-shaft { fill: color-mix(in srgb, var(--brand) 5%, var(--bg-card)); stroke: var(--text-soft); stroke-width: 2; }
.hp-diagram-accent, .hp-diagram-warn, .hp-diagram-angle, .hp-diagram-arrow, .hp-diagram-arrow-both, .hp-diagram-tolerance { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hp-diagram-accent { stroke: var(--brand); stroke-width: 3; }
.hp-diagram-warn { stroke: var(--warn); stroke-width: 3; }
.hp-diagram-angle { stroke: var(--danger); stroke-width: 2; }
.hp-guide-figure text.hp-diagram-angle-label { fill: var(--danger); font-weight: 700; }
.hp-diagram-hole { fill: var(--brand); }
.hp-diagram-warn-fill { fill: var(--warn); }
.hp-diagram-reference { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 5; }
.hp-diagram-arrow, .hp-diagram-arrow-both { stroke: var(--brand); stroke-width: 2; }
.hp-diagram-arrow::after, .hp-diagram-arrow-both::after { content: ''; }
.hp-diagram-tolerance { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hp-guide-figure text.hp-beta-step-title { fill: var(--brand); font-size: 12px; font-weight: 750; }
.hp-guide-figure text.hp-beta-step-copy { fill: var(--text-main); font-size: 11px; }
.hp-guide-figure text.hp-beta-flip-label { fill: var(--text-soft); font-size: 10px; }
.hp-beta-step-divider { stroke: var(--line); stroke-width: 1; }
.hp-beta-zero-line { stroke: var(--text-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hp-guide-figure text.hp-beta-zero-label { fill: var(--text-soft); font-size: 9px; text-anchor: end; }
.hp-beta-reading-line { stroke: var(--warn); stroke-width: 3; stroke-linecap: round; }
.hp-beta-center { fill: var(--text-main); }
.hp-beta-positive-arc { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; }
.hp-beta-negative-arc { fill: none; stroke: var(--danger); stroke-width: 2.5; stroke-linecap: round; }
.hp-beta-positive-fill { fill: var(--brand); }
.hp-beta-negative-fill { fill: var(--danger); }
.hp-guide-figure text.hp-beta-positive-label { fill: var(--brand); font-size: 11px; font-weight: 750; }
.hp-guide-figure text.hp-beta-negative-label { fill: var(--danger); font-size: 11px; font-weight: 750; }
.hp-guide-figure text.hp-beta-equivalent-label { fill: var(--text-main); font-size: 11px; font-weight: 700; }
.hp-guide-figure text.hp-beta-sign-label { fill: var(--text-soft); font-size: 10px; }

@media (max-width: 1023px) {
  .hp-layout { grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr); }
  .hp-guide { top: auto; bottom: 14px; right: 14px; max-height: min(48dvh, 420px); }
}

@media (max-width: 767px) {
  .hp-page { width: min(100% - 24px, 1280px); padding-top: 12px; }
  .hp-head { align-items: stretch; flex-direction: column; }
  .hp-head .btn { width: 100%; min-height: 44px; }
  .hp-layout { grid-template-columns: 1fr; }
  .hp-form-grid { grid-template-columns: 1fr; gap: 0; }
  .hp-field .input, .hp-field .select { min-height: 46px; font-size: 16px; }
  .hp-primary-input { height: 58px !important; font-size: 24px !important; }
  .hp-result { min-height: 0; padding: 18px 16px; }
  .hp-result-facts { grid-template-columns: 1fr 1fr; }
  .hp-guide { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: min(46dvh, 390px); }
}

/* 6 列固定栅格。原来是 auto-fit + minmax(148px,1fr):列数随容器宽度浮动、
   每列强行等宽,于是 14 个字段排成 7×2 的方阵,「废品单号」和「图号」这种分量
   差着量级的东西长得一模一样,填起来像做考卷。固定列数之后 span 才有意义——
   原因/备注跨半行写得下一句话,日期件数各占一格就够。 */
.quality-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px 12px; gap: 10px 12px; }

/* ---- 表单分段 ----
   一段回答一个问题(这批活 / 出了什么问题 / 谁的责任),顺序就是现场填单子的顺序。
   标题刻意做轻:它是路标不是主角,重了会把注意力从输入框上抢走。 */
.quality-section + .quality-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.quality-section h3 {
  margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.quality-section h3 em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--text-soft); }

/* MES 带出值的只读摘要行。平时就这一行字,点「改」才展开成输入框。 */
.quality-derived {
  display: flex; align-items: baseline; gap: 10px; margin-top: 8px;
  padding: 8px 10px; border-radius: 10px; background: var(--bg-muted);
  font-size: 13px; line-height: 1.6; flex-wrap: wrap;
}
.quality-derived p { margin: 0; flex: 1 1 240px; min-width: 0; color: var(--text); }
.quality-derived em { font-style: normal; color: var(--text-soft); }
.quality-derived i { font-style: normal; color: var(--text-dim); }
.quality-derived-empty { color: var(--text-soft); }

/* 字段自己的上游提示(该单有几道工序、这个人属于哪个工段)。
   贴在框底下——原先这些话全堆在表单最下方,讲的是「问题工序」却要人读完再抬眼找框。 */
.quality-field-note { color: var(--text-soft); font-size: 12px; line-height: 1.5; }
/* 分段末尾的提示(涂层厂家等):属于这一段但不属于其中任何一个框。 */
.quality-section-note { margin: 8px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.quality-section-note strong { color: var(--text); }
.quality-field { display: grid; grid-gap: 4px; gap: 4px; align-content: start; min-width: 0; }
.quality-label { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12px; }
.quality-from-mes { padding: 1px 6px; border-radius: 999px; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bg-card)); font-size: 10px; font-style: normal; font-weight: 700; }
/* ---- 多责任人标签框 ----
   一件返修常常是两三个人一起担的账,责任人这一格因此是多值的(仅「个人」;
   外协单位、车间代签都只有一个)。外观照着 .input 抄,让它在一排输入框里不显眼:
   人要注意的是里面的名字,不是这个框长得特别。

   ⚠ 焦点圈画在整个框上(:focus-within)而不是里面那个 input 上:输入框自己没有边框,
     只给它描一圈会在框里冒出一个悬空的方框,看着像坏了。 */
.quality-names {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  width: 100%; min-height: 38px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-input); color: var(--text-main);
  /* 字号写死 13px:草稿输入框用的是 font: inherit,不定死就会继承 body 的 16px,
     在一排 .input(浏览器默认约 13px)中间显著大一号,看着像另一种控件。 */
  font-size: 13px;
}
.quality-names:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.quality-name-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, var(--bg-card));
  color: var(--text-main); font-size: 12px; line-height: 1.6; white-space: nowrap;
}
/* 删除键做成 20px 的圆:现场是戴着手套用手指点的,再小就点不中。 */
.quality-name-chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-soft); font-size: 14px; line-height: 1; cursor: pointer;
}
.quality-name-chip button:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
/* 草稿输入框:无边框、无背景,和标签排在同一行里;窄到只剩一个字时也还能打字。 */
.quality-name-draft {
  flex: 1 1 88px; min-width: 72px; border: 0; padding: 2px 0;
  background: transparent; color: var(--text-main); font: inherit;
}
.quality-name-draft:focus { outline: none; }
.quality-name-draft::placeholder { color: var(--text-soft); opacity: 0.9; }

.quality-check { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: 13px; }
.quality-check input { width: 20px; height: 20px; }
.quality-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.quality-form-head span { color: var(--text-soft); font-size: 12px; }
.quality-form-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* 带出提示一律中性:规格带不出、老单查不到都是常态,做成红字现场就以为功能坏了。 */
.quality-hint { display: grid; grid-gap: 2px; gap: 2px; margin: 10px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.quality-notice { margin: 10px 0 0; color: var(--success); font-size: 13px; }
.quality-error { margin: 10px 0 0; color: var(--danger); font-size: 13px; }
.quality-field-error { color: var(--danger); font-size: 12px; line-height: 1.5; }
.quality-invalid { border-color: var(--danger); }

.quality-toolbar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.quality-toolbar label { display: grid; grid-gap: 4px; gap: 4px; }
.quality-toolbar label span { color: var(--text-soft); font-size: 12px; }
.quality-toolbar .input { width: 170px; }
.quality-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quality-overview-head h3 { margin: 0; font-size: 17px; }
.quality-overview-head p { margin: 5px 0 0; color: var(--text-soft); font-size: 12px; }
.quality-overview-head .btn { flex: 0 0 auto; }

/* ---- 列表表格 ----
   列宽由 <colgroup> 逐列给死(值和理由见 quality/page.tsx 的 columnWidths),
   这里只负责让它生效。原来完全交给浏览器 auto layout 按内容算,某个月品名长一点,
   「批量 / 备注 / 数控责任」就被挤到只剩一个字宽,表头当场竖排;换个月又是另一套列宽——
   同一张表跨月看着像两张表。 */
.quality-table { table-layout: fixed; }
/* 表头永不换行。列宽已按最长表头留够,这里是兜底:万一以后加了更长的表头,
   宁可省略号也不许竖排回去。 */
.quality-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 内容列(品名、返修原因这类长文本)该换行就换行:换行只改行高,改不了列宽。 */
.quality-table td { vertical-align: top; overflow-wrap: anywhere; }
/* ★ 操作列。原来是 .quality-row-actions 直接把 display:flex 写在 <td> 上——
   display:flex 会让这个元素不再是 table-cell(浏览器另给它包一个匿名格子),
   于是它不跟着行高走:同一行别的格子 61px,它只有 47px;它自己的 border-bottom
   也就画在了错位的高度上,行分隔线在最后一列断成两截,整块像浮在表格外的另一块。
   现在格子老实当 table-cell,flex 交给里面的 .quality-row-actions-inner。 */
.quality-row-actions { white-space: nowrap; }
.quality-row-actions-inner { display: flex; align-items: flex-start; gap: 4px; }
.quality-action-menu { position: relative; }
.quality-action-menu > summary { list-style: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.quality-action-menu > summary::-webkit-details-marker { display: none; }
.quality-action-menu[open] > summary { border-color: var(--brand); color: var(--brand); }
.quality-action-menu > div {
  width: 136px; margin: 6px 0 0 -51px; padding: 6px; display: none; gap: 5px;
  box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card);
}
.quality-action-menu[open] > div { display: grid; }
.quality-action-menu > div .btn-xs { width: 100%; justify-content: flex-start; }
.quality-document-summary { display: grid; grid-gap: 3px; gap: 3px; font-size: 12px; color: var(--text-soft); line-height: 1.35; }
.quality-document-summary .on { color: var(--text); font-weight: 650; }
.quality-documents-panel { width: min(680px, 100%); }
.quality-document-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin: 16px 0 12px; }
.quality-document-cards > section {
  min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-muted); display: grid; grid-gap: 14px; gap: 14px;
}
.quality-document-cards p { margin: 5px 0 0; color: var(--text-soft); }
/* 报废 15 列(1564px)在 1280 的页宽里必然横滚,操作列不钉住就永远在屏幕外,
   每改一条都得先横向拖一趟。所以只有报废表钉,返修表(正好排满页宽、不横滚)不钉,
   免得平白多出一条竖分隔线。分隔线用 box-shadow 而不是 border:
   border-collapse: collapse 下 sticky 元素的边框会被合并掉,画不出来——
   和 .main-list-table 前五列钉左侧用的是同一套写法。 */
.quality-table-scrap th.quality-col-actions,
.quality-table-scrap td.quality-row-actions {
  position: -webkit-sticky;
  position: sticky; right: 0; z-index: 3;
  background: var(--bg-card); box-shadow: -1px 0 0 var(--line);
}
.quality-table-scrap thead th.quality-col-actions { z-index: 5; background: var(--bg-muted); }
/* 行内编辑的输入框:列宽已经定死,输入框只能填满格子,
   再挂 min-width 就会把格子顶开——那正是列宽随数据乱跳的老毛病。 */
.quality-page td .input { width: 100%; min-width: 0; padding: 5px 6px; font-size: 13px; }
.quality-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--text-soft); font-size: 12px; }

.quality-photo > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
/* 文件框那一行。用 div 而不是 form:这块也长在录入表单(本身就是 <form>)里,
   套第二层 form 是非法 HTML,浏览器会把内层直接吃掉。 */
.quality-pick-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 表单里的照片区:标题 + 选择区,和上面各输入格拉开一点距离。 */
.quality-photo-pick { display: grid; grid-gap: 6px; gap: 6px; margin-top: 12px; }
/* 已选待传清单。长文件名压缩省略,不让它把「移除」按钮顶出去。 */
.quality-picked { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-gap: 6px; gap: 6px; font-size: 12px; }
.quality-picked li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.quality-picked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 拖拽上传区(办公室场景)。虚线边框平时就在,人一眼能看出这块能拖东西进来;
   拖到上方只换边框颜色和底色,不做位移/缩放动画——这页在车间平板上也跑,动画只会拖累。 */
.quality-drop { padding: 10px; border: 1px dashed var(--line); border-radius: 12px; }
.quality-drop.on { border-style: solid; border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg-card)); }
.quality-drop-tip { margin: 8px 0 0; color: var(--text-soft); font-size: 12px; }
.quality-photo-list { margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; }
.quality-photo-list li.ok { color: var(--success); }
.quality-photo-list li.bad { color: var(--danger); }

/* ---- Excel 质量台账导入(数据维护页) ----
   默认收起:导入是同步线上线下台账用的辅助口。
   报告可能有几十行(逐月表 + 跳过清单),给它一个高度上限自己滚,
   否则一次导入就把下面的登记列表顶到屏幕外去了。 */
.quality-ledger-import-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; margin-top: 14px; }
.quality-ledger-import-grid > .quality-import { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); }
.quality-import-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quality-import-head .quality-hint { margin: 0; flex: 1 1 240px; min-width: 0; }
.quality-import-body { display: grid; grid-gap: 10px; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.quality-import-file { display: grid; grid-gap: 6px; gap: 6px; }
.quality-import-file input[type='file'] { font-size: 13px; }
.quality-import-sum { margin: 0; font-size: 13px; line-height: 1.8; }
/* 报告**不限高**:它就是这块的主角,把它截在半行上会让人以为渲染坏了
   (逐月表刚好卡在 2026-03 那行中间)。导入完收起整块就行,不必在这里省地方。 */
.quality-import-report { display: grid; grid-gap: 10px; gap: 10px; }
/* 三五列的小表别撑满整行——数字甩到屏幕最右边,和左边的月份看不成一行。
   min-width 必须显式归零:全局 `table` 有 min-width:900px(给主列表那种宽表定的),
   不解掉的话这张 3 列小表在手机上会被撑成 900px,只露出「月份」一列,
   另外两列要横滑才看得见——看着就像表格渲染坏了。 */
.quality-import-table { font-size: 13px; min-width: 0; max-width: 560px; }
.quality-import-table .num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.quality-import-skips { display: grid; grid-gap: 4px; gap: 4px; font-size: 13px; }
.quality-import-skips ul { margin: 0; padding-left: 18px; line-height: 1.8; }
/* .quality-hint 全局是 display:grid(给多行提示用的),会把这里连续句子中的
   <strong> 拆成独立一行,读起来像断句错乱。这块的提示都是整句,一律回到正常流。 */
.quality-import .quality-hint { display: block; }
.quality-import-skips .quality-hint { display: inline; }

/* 缩略图:auto-fill + minmax 让窄屏自己降列数,不靠断点,也就不会横向溢出。 */
.quality-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 10px; gap: 10px; margin-top: 12px; }
.quality-thumb { margin: 0; display: grid; grid-gap: 4px; gap: 4px; justify-items: center; min-width: 0; }
.quality-thumb-view { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-muted); overflow: hidden; cursor: zoom-in; width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.quality-thumb-view:disabled { cursor: default; }
.quality-thumb-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quality-thumb-note { color: var(--text-soft); font-size: 12px; }
.quality-thumb figcaption { max-width: 100%; color: var(--text-soft); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 照片弹层。列表里点某行「照片」就地居中弹出——原来是把照片区展开到页面顶部的录入表单那儿,
   人在表格底部点一下得滚回顶上看,看完再滚下来找刚才那行。
   z-index 50 压在 .quality-lightbox(60)之下:大图是从弹层里点出来的,得盖在弹层上面。
   不锁 body 滚动:锁了滚动条一消失整页就横向位移,而这里的头等要求恰恰是「滚动位置一动不动」。 */
.quality-modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.quality-modal-panel {
  width: min(760px, 100%); max-height: 86vh; overflow: auto; padding: 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-card); box-shadow: var(--shadow-card);
}
.quality-modal-panel:focus { outline: none; }

/* 返修过程卡编制。桌面保持紧凑的表格式录入，手机降成逐道卡片；两端共用同一份
   steps 状态和保存函数，避免标准设备与打印快照出现两套口径。 */
.quality-card-editor { width: min(1040px, 100%); }
.quality-card-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.quality-card-editor-head h3 { margin: 0 0 4px; }
.quality-card-editor-head p { margin: 0; color: var(--text-soft); font-size: 13px; }
.quality-card-existing, .quality-after-save-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-muted);
}
.quality-after-save-card { margin-top: 0; }
.quality-after-save-card > div { display: grid; grid-gap: 3px; gap: 3px; }
.quality-after-save-card span { color: var(--text-soft); font-size: 13px; }
.quality-card-header-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 10px; gap: 10px; margin: 16px 0;
}
.quality-card-header-grid label, .quality-card-start, .quality-card-step label { display: grid; grid-gap: 5px; gap: 5px; min-width: 0; }
.quality-card-header-grid label > span, .quality-card-start > span, .quality-card-step label > span {
  color: var(--text-soft); font-size: 12px;
}
.quality-card-header-grid .wide { grid-column: span 2; }
.quality-card-header-grid .full { grid-column: 1 / -1; }
.quality-card-start { max-width: 640px; margin-bottom: 16px; }
.quality-card-step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; }
.quality-card-steps { display: grid; grid-gap: 7px; gap: 7px; }
.quality-card-step {
  display: grid; grid-template-columns: 34px minmax(180px, 1.5fr) minmax(160px, 1fr) auto;
  align-items: end; grid-gap: 8px; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px;
}
.quality-card-step-no { align-self: center; text-align: center; font-weight: 700; color: var(--text-soft); }
.quality-card-step .btn-xs { margin-bottom: 6px; }
.quality-card-editor-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.quality-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.quality-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.quality-lightbox-close { position: absolute; top: 16px; right: 16px; }

.quality-mobile { display: none; }
.quality-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.quality-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quality-card > header strong { overflow-wrap: anywhere; }
.quality-card > header span { color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.quality-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 7px; gap: 7px; margin: 10px 0 0; }
.quality-card dl > div { min-width: 0; padding: 7px 8px; border-radius: 8px; background: var(--bg-muted); display: grid; grid-gap: 2px; gap: 2px; }
.quality-card dt { color: var(--text-soft); font-size: 11px; }
.quality-card dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.quality-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.quality-action-menu-mobile { flex: 1 1 90px; }
.quality-action-menu-mobile > summary { display: flex; align-items: center; justify-content: center; }
.quality-action-menu-mobile > div {
  width: calc(200% + 8px); margin-left: calc(-100% - 8px);
}

/* 平板 / 窄桌面:6 列塞不下,降到 3 列。span 跟着按比例缩,
   跨 3 列的原因框在这里就是整行——正是它该有的样子。 */
@media (max-width: 1180px) {
  .quality-grid { grid-template-columns: repeat(3, 1fr); }
  .quality-field[style*='span 3'] { grid-column: span 3 !important; }
}

@media (max-width: 760px) {
  .quality-desktop { display: none; }
  .quality-mobile { display: block; }
  .quality-tabs { width: 100%; }
  .quality-tabs button { flex: 1 1; min-height: 46px; }
  /* 手机单列:内联的 grid-column: span N 必须让位,否则跨列会溢出到栅格外。 */
  .quality-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .quality-grid .quality-field { grid-column: span 1 !important; }
  .quality-toolbar { align-items: stretch; }
  .quality-toolbar label { width: 100%; }
  .quality-toolbar .input { width: 100%; }
  .quality-toolbar .btn { width: 100%; min-height: 46px; }
  .quality-overview-head { align-items: stretch; flex-direction: column; }
  .quality-overview-head .btn { width: 100%; min-height: 46px; }
  .quality-ledger-import-grid { grid-template-columns: minmax(0, 1fr); }
  .quality-form-actions .btn { flex: 1 1 140px; min-height: 50px; font-size: 16px; }
  /* 现场拍照是这页在车间的主要动作,按钮和文件框都给满宽。 */
  .quality-pick-row { display: grid; grid-gap: 10px; gap: 10px; }
  .quality-pick-row input[type='file'] { width: 100%; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }
  .quality-pick-row .btn { min-height: 50px; font-size: 16px; }
  .quality-card-actions .btn { flex: 1 1 90px; min-height: 46px; }
  .quality-document-cards { grid-template-columns: minmax(0, 1fr); }
  .quality-action-menu-mobile > summary { min-height: 46px; }
  .quality-action-menu-mobile > div .btn { width: 100%; min-height: 44px; }
  /* 手机上弹层几乎占满屏,但仍是弹层:点卡片上的「照片」照样就地弹出,不跳走。 */
  .quality-modal { padding: 10px; }
  .quality-modal-panel { max-height: 92vh; padding: 12px; }
  .quality-card-editor-head, .quality-card-existing, .quality-after-save-card { align-items: stretch; flex-direction: column; }
  .quality-card-header-grid { grid-template-columns: minmax(0, 1fr); }
  .quality-card-header-grid .wide, .quality-card-header-grid .full { grid-column: auto; }
  .quality-card-step { grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
  .quality-card-step label { grid-column: 2; }
  .quality-card-step .btn-xs { grid-column: 2; justify-self: end; min-height: 40px; margin: 0; }
  .quality-card-existing .btn, .quality-after-save-card .btn { min-height: 46px; }
  .quality-pager { flex-wrap: wrap; }
  .quality-pager .btn { flex: 1 1 100px; min-height: 44px; }
}

/* ── 设备综合效率页 ─────────────────────────────────────────────────
   这一页是报表,不是列表:列多、全是数字、要横着比也要竖着比。
   所以三件事跟别的页不一样 ——
     1. 两行表头按「时间 / 数量 / 效率」分组,组间画竖线,列的归属一眼可见
     2. 数字列一律右对齐 + 等宽数字(tabular-nums),位数对齐才谈得上竖着比
     3. 表头的对齐方式跟着列走(数字列表头也右对齐),不再横一套竖一套
   ------------------------------------------------------------------ */
.oee-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.oee-toolbar > .spacer { margin-left: auto; }
.oee-title { margin: 0; font-size: 20px; letter-spacing: 0.2px; }
.oee-sub { color: var(--text-soft); font-size: 13px; margin: 8px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oee-sub .sep { color: var(--line); }
.oee-formula { font-size: 12px; color: var(--text-soft); white-space: nowrap; }

/* KPI:四张卡高度必须一致,副标题长短不一时不能把卡片撑成参差不齐的四块 */
.oee-kpi .kpi-card { display: flex; flex-direction: column; min-height: 118px; }
.oee-kpi .kpi-card span { margin-top: auto; line-height: 1.5; }
.oee-kpi .kpi-card strong { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }

.oee-tbl { min-width: 1240px; border-collapse: separate; border-spacing: 0; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.oee-tbl th, .oee-tbl td { border-bottom: 1px solid var(--line); padding: 9px 12px; font-size: 13.5px; }
.oee-tbl thead th {
  background: var(--bg-muted);
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
/* 两行表头都要吸顶,第二行得让开第一行的高度,否则滚动时会互相盖住。
   单行表头的表(停机汇总)必须走 :only-child 那一支,否则会被顶到 30px 处悬空。 */
.oee-tbl thead th { position: -webkit-sticky; position: sticky; top: 0; z-index: 3; }
/* 分组行的样式只给真正的分组标题;跨两行的列(机床、数据状态)不能跟着居中缩小 */
.oee-tbl thead tr:not(:last-child) th:not(.span2) {
  height: 30px; padding-top: 6px; padding-bottom: 6px;
  text-align: center; font-size: 12px; letter-spacing: 1px;
}
.oee-tbl thead tr:last-child:not(:first-child) th { top: 30px; }
.oee-tbl thead th.span2 { vertical-align: bottom; }
/* 收尾的空列:富余宽度全落在它身上(width:100% + 其余列 width:1%),
   真实列各自保持紧凑;不这么分,多出来的几百像素会摊给最后一个有内容的列,
   表头文字被推到离数据老远的地方。 */
.oee-tbl th.filler, .oee-tbl td.filler { width: 100%; padding: 0; border-left: 0; }
.oee-tbl th.num, .oee-tbl td.num,
.oee-tbl th.mid, .oee-tbl td.mid,
.oee-tbl th.tags, .oee-tbl td.tags { width: 1%; white-space: nowrap; }
/* 名称类的文字列:富余宽度该落在它们身上,挤成一列三行反而更乱 */
.oee-tbl th.wide, .oee-tbl td.wide { min-width: 190px; }
/* 组间竖线:横向分组的唯一视觉线索,组内不画,免得退回成密密麻麻的格子纸 */
.oee-tbl th.grp, .oee-tbl td.grp { border-left: 1px solid var(--line); }
.oee-tbl td.num, .oee-tbl th.num { text-align: right; }
.oee-tbl td.mid, .oee-tbl th.mid { text-align: center; }
.oee-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-muted) 45%, transparent); }
.oee-tbl tbody tr:hover td { background: color-mix(in srgb, var(--brand) 7%, var(--bg-card)); }
.oee-tbl tbody td { transition: background 120ms ease; }
.oee-machine { font-weight: 600; white-space: nowrap; }
.oee-machine small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-soft); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.oee-dim { color: var(--text-soft); }

/* OEE 列:数字 + 一条占比条。二十多台机床按分数排序,光看百分比得逐行读,
   有条带才能一眼看出断层在哪。 */
.oee-score { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; min-width: 92px; }
.oee-score b { font-size: 15px; font-weight: 700; line-height: 1.1; }
.oee-score i { display: block; width: 100%; height: 5px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 60%, transparent); }
.oee-score i > s { display: block; height: 100%; border-radius: 999px; background: currentColor; }

/* 状态标签:原来这一列是一段几十字的灰色小字,每行高度都不一样,
   整张表看上去就是散的。改成定宽标签,长说明进 title。 */
.oee-tags { display: flex; gap: 4px; align-items: center; }
.oee-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text-soft);
  font-size: 11.5px; line-height: 1.6; white-space: nowrap; cursor: default; }
.oee-tag.ok { border-color: color-mix(in srgb, var(--brand) 46%, var(--line)); color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--bg-card)); }
.oee-tag.warn { border-color: color-mix(in srgb, var(--warn) 46%, var(--line)); color: var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--bg-card)); }
.oee-tag.danger { border-color: color-mix(in srgb, var(--danger) 46%, var(--line)); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--bg-card)); }
.oee-note { color: var(--text-soft); font-size: 12px; line-height: 1.5; max-width: 300px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 折叠的口径说明:正文里躺着六行小字会把表压到屏幕外,收起来但留在手边 */
.oee-explain { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-muted); margin: 0 0 12px; }
.oee-explain > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--text-soft); list-style: none; }
.oee-explain > summary::-webkit-details-marker { display: none; }
.oee-explain > summary::before { content: '▸ '; color: var(--text-soft); }
.oee-explain[open] > summary::before { content: '▾ '; }
.oee-explain > div { padding: 0 12px 12px; font-size: 13px; color: var(--text-soft); line-height: 1.75; }
.oee-explain strong { color: var(--text-main); }

.oee-empty { color: var(--text-soft); text-align: center; padding: 28px 10px !important; }

/* 图例:标记的含义说一次就够,原来是每行都抄一遍同样几十个字的灰色小字 */
.oee-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--text-soft); }
.oee-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.oee-legend .oee-tag { font-style: normal; }

/* 登记表单:标签在上、控件在下,行内每一格自成一列,不再靠 flex-end 硬对齐 */
.oee-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 10px; }
.oee-field { display: grid; grid-gap: 5px; gap: 5px; }
.oee-field > span { font-size: 12px; color: var(--text-soft); }

@media (max-width: 900px) {
  .oee-note { max-width: 220px; }
  .oee-kpi .kpi-card { min-height: 104px; }
}