/* bok-pv 控制台 · 设计系统
   色值与尺寸照任务书 4.2 / 4.3，参考图仅取色调、密度和布局语言。

   字号只有 5 档，别再加：
     18px 页面标题 / 15px 卡片标题 / 14px 正文 / 13px 次级与表格 / 26px 指标数字
*/

:root {
  /* 任务书 4.2 配色 */
  --navy:      #222C4D;   /* 顶栏 / 品牌主色 */
  --blue:      #3B76F6;   /* 主操作 */
  --blue-soft: #EDF3FF;   /* 选中 / 提示条 / 轻信息底 */
  --bg:        #F5F7FA;   /* 页面背景 */
  --card:      #FFFFFF;
  --line:      #DDE5F0;   /* 卡片与输入框边框 */
  --line-soft: #EEF1F6;   /* 表格分隔 */
  --txt:       #303133;   /* 正文 */
  --sub:       #606266;   /* 次级 */
  --mute:      #909399;   /* 弱化 */
  --ok:        #2BB673;
  --warn:      #F5A742;
  --bad:       #D9534F;

  --topbar-h:  60px;
  --side-w:    204px;
  --radius:    7px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.6 -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
        "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 键盘操作保留清晰焦点，不依赖鼠标悬停。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ══════════ 顶栏 ══════════ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 50;
}

.tb-brand { display: flex; align-items: center; gap: 10px; }
.tb-logo { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.tb-name { font-size: 15px; font-weight: 600; letter-spacing: .3px; }
.tb-sys  { font-size: 14px; color: rgba(255,255,255,.72); margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }

.tb-search {
  margin-left: 28px;
  width: 260px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.tb-search::placeholder { color: rgba(255,255,255,.5); }
.tb-search:focus { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; }
.tb-item { color: rgba(255,255,255,.8); cursor: pointer; }
.tb-item:hover { color: #fff; }
.tb-user { display: flex; align-items: center; gap: 8px; color: #fff; }
.tb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}

/* ══════════ 左侧导航 ══════════ */

.side {
  position: fixed;
  top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--side-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
  z-index: 40;
  transition: width .15s;
}
/* 主入口独立滚动，设置始终留在侧栏底部。 */
#nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-primary { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; }
.nav-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); flex: none; }
.nav-footer .nav-item { color: var(--sub); }

body.side-collapsed .side { width: 64px; padding: 12px 8px; }
body.side-collapsed .nav-txt,
body.side-collapsed .nav-badge { display: none; }
body.side-collapsed .nav-item { justify-content: center; gap: 0; padding: 0; }
body.side-collapsed .main { margin-left: 64px; }

.nav-toggle, #nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 38px; min-height: 38px; margin: 0 0 12px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--sub); cursor: pointer; font: inherit; font-size: 14px;
}
.nav-toggle:hover, #nav-toggle:hover { color: var(--txt); background: var(--bg); }
.nav-toggle svg, #nav-toggle svg { width: 18px; height: 18px; flex: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--txt);
  cursor: pointer;
  border-radius: var(--radius);
  white-space: nowrap;
  flex: none;
}
.nav-item:hover { background: var(--bg); text-decoration: none; }
.nav-item:focus-visible { outline-offset: -2px; }
.nav-item.on, .nav-item[aria-current="page"] {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 500;
}
.nav-ico { width: 18px; height: 18px; flex: none; opacity: .85; pointer-events: none; }
.nav-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item.on .nav-ico, .nav-item[aria-current="page"] .nav-ico { opacity: 1; }

.nav-badge {
  margin-left: auto;
  font-size: 13px;
  color: var(--mute);
  background: var(--bg);
  border-radius: 9px;
  padding: 1px 7px;
}

/* ══════════ 内容区 ══════════ */

.main {
  margin: var(--topbar-h) 0 0 var(--side-w);
  padding: 20px 24px 48px;
  min-height: calc(100vh - var(--topbar-h));
  min-width: 0;
}

.crumb { font-size: 13px; color: var(--sub); margin-bottom: 12px; }
.crumb b { color: var(--txt); font-weight: 500; }

.page-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.page-desc  { font-size: 13px; color: var(--sub); margin-bottom: 18px; }

/* 同一业务组内切换页面，不再占用主侧栏。 */
.section-nav {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px;
  margin: 0 0 18px; padding: 4px 0 10px;
  border-bottom: 1px solid var(--line);
  max-width: 100%;
}
.section-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; min-height: 40px; padding: 8px 12px;
  border-radius: var(--radius); color: var(--sub);
  font-size: 14px; white-space: nowrap;
}
.section-nav a:hover { background: var(--bg); color: var(--txt); text-decoration: none; }
.section-nav a.on, .section-nav a[aria-current="page"] {
  color: var(--blue); background: var(--blue-soft); font-weight: 500;
}
.section-nav a:focus-visible { outline-offset: -2px; }
.section-nav > .project-more { flex: none; }
.section-nav > .project-more > summary { min-height: 40px; padding: 8px 12px; }

.page-actions {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; margin-bottom: 18px; min-width: 0;
}
.page-actions > :first-child { min-width: 0; }
.page-actions .page-desc { margin-bottom: 0; }
.page-actions > .btn, .page-actions > .project-more { flex: none; }

.secondary-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; margin: 12px 0 18px; }
.secondary-links a { overflow-wrap: anywhere; }
.compact-status {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  color: var(--sub); font-size: 13px; margin: 10px 0 16px;
  overflow-wrap: anywhere;
}
.compact-status p { margin: 0; }
.compact-status a { font-weight: 400; }

/* 设置采用简洁链接列表，低频说明放入原生折叠面板。 */
.settings-menu { display: grid; min-width: 0; }
.settings-menu > a {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; padding: 15px 4px;
  border-bottom: 1px solid var(--line-soft); color: var(--txt);
  overflow-wrap: anywhere;
}
.settings-menu > a:last-child { border-bottom: 0; }
.settings-menu > a:hover { text-decoration: none; }
.settings-menu > a:hover strong { color: var(--blue); }
.settings-menu strong { font-size: 14px; font-weight: 600; }
.settings-menu span { color: var(--sub); font-size: 13px; }
details.settings-advanced, .settings-advanced details {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.settings-advanced > summary, .settings-advanced details > summary {
  width: fit-content; max-width: 100%; padding: 6px 0;
  color: var(--sub); font-size: 13px; cursor: pointer; overflow-wrap: anywhere;
}
.settings-advanced[open] > summary, .settings-advanced details[open] > summary { margin-bottom: 12px; }

.project-more { position: relative; display: inline-block; max-width: 100%; text-align: left; }
.project-more > summary {
  width: fit-content; max-width: 100%; min-height: 32px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--sub); background: var(--card); font-size: 13px; cursor: pointer;
}
.project-more > summary:hover { color: var(--txt); background: var(--bg); }
.project-more > :is(div, nav) {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 176px; max-width: calc(100vw - 32px); padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  box-shadow: 0 4px 12px rgba(31,45,77,.08);
}
.project-more a {
  display: block; padding: 7px 10px; border-radius: 4px;
  color: var(--txt); font-size: 13px; white-space: normal; overflow-wrap: anywhere;
}
.project-more a:hover { background: var(--bg); color: var(--blue); text-decoration: none; }

/* 提示条 */
.notice {
  background: var(--blue-soft);
  border: 1px solid #d9e6ff;
  border-radius: var(--radius);
  padding: 11px 16px;
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.notice.warn { background: #fff8ec; border-color: #ffe2b8; }
.notice b { color: var(--txt); font-weight: 500; }

/* 卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(31,45,77,.04);
}
.card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
}
.card-h .more { margin-left: auto; font-size: 13px; font-weight: 400; }
.card-sub { font-size: 13px; color: var(--sub); margin: -10px 0 14px; }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cols-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cols > *, .cols-3 > *, .cols-2-1 > * { min-width: 0; }

/* 指标 */
.stats { display: flex; gap: 0; }
.stat { flex: 1; padding: 0 4px; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: none; }
.stat-label { font-size: 13px; color: var(--sub); margin-bottom: 8px; }
.stat-num { font-size: 26px; font-weight: 600; line-height: 1.2; }
.stat-num small { font-size: 13px; font-weight: 400; color: var(--mute); margin-left: 4px; }
.stat-link { font-size: 13px; margin-top: 8px; display: inline-block; }

/* ══════════ 表格 ══════════ */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  font-weight: 500;
  color: var(--sub);
  background: #fafbfd;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.tbl tr:hover td { background: #fafbfd; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .seq { color: var(--mute); width: 42px; }
.tbl .grp td { background: #f4f7fc; font-weight: 500; color: var(--txt); }
.tbl-wrap { overflow-x: auto; }

/* 标签 */
.tag {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--sub);
  border: 1px solid var(--line);
}
.tag.ok   { background: #eaf8f1; color: #1c8a58; border-color: #c3ead7; }
.tag.warn { background: #fff5e6; color: #a8681a; border-color: #ffe0b4; }
.tag.bad  { background: #fdeceb; color: #b23b37; border-color: #f6cbc9; }
.tag.info { background: var(--blue-soft); color: #2c5fd0; border-color: #d3e2ff; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); } .dot.mute { background: #c0c4cc; }

/* ══════════ 表单 ══════════ */

.field { margin-bottom: 15px; }
.field > label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.field-label { font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.operating-pair { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; min-width: 0; }
.operating-field { min-width: 0; }
.operating-dropdown { position: relative; }
.operating-dropdown > summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 11px;
  background: var(--card); font-size: 14px; min-height: 40px;
}
.operating-dropdown > summary::-webkit-details-marker { display: none; }
.operating-dropdown[open] > summary { border-color: var(--blue); }
.operating-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 操作压力与操作温度的框内提示：统一为小一号灰字。 */
#op-operating_pressure > summary .operating-summary,
#op-operating_temperature > summary .operating-summary { color: var(--mute); font-size: 13px; }
.operating-arrow { color: var(--sub); flex: none; }
.operating-dropdown[open] .operating-arrow { transform: rotate(180deg); }
.operating-options {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 6px 18px var(--line);
}
.operating-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.operating-row + .operating-row { margin-top: 10px; }
.operating-row > label { font-size: 14px; white-space: nowrap; }
.medium-dropdown .operating-summary { color: var(--mute); font-size: 13px; }
.medium-dropdown .operating-row { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 10px; }
.medium-dropdown .operating-row > label { white-space: normal; line-height: 1.4; }
.medium-dropdown .operating-row input { min-width: 0; width: 100%; color: var(--mute); font-size: 13px; }
.viscosity-dropdown .operating-summary { color: var(--mute); font-size: 13px; }
.viscosity-dropdown .operating-row { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 10px; }
.viscosity-dropdown .operating-row > label { white-space: normal; font-size: 13px; }
.viscosity-dropdown label small { display: block; color: var(--mute); font-size: 12px; }
.viscosity-hint { color: var(--mute); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.nozzle-field { min-width: 0; }
.nozzle-dropdown { position: relative; }
.nozzle-dropdown > summary, .nozzle-positions > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 8px 11px; min-height: 40px; font-size: 14px; cursor: pointer; list-style: none;
}
.nozzle-dropdown > summary::-webkit-details-marker, .nozzle-positions > summary::-webkit-details-marker { display: none; }
.nozzle-dropdown[open] > summary, .nozzle-positions[open] > summary { border-color: var(--blue); }
.nozzle-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nozzle-options {
  position: absolute; z-index: 35; top: calc(100% + 6px); left: 0;
  width: min(520px, calc(100vw - 32px)); padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 18px var(--line);
}
.nozzle-note { color: var(--sub); font-size: 13px; margin-bottom: 10px; }
.nozzle-columns, .nozzle-row { display: grid; grid-template-columns: 65px 100px minmax(0, 1fr); gap: 12px; }
.nozzle-columns { color: var(--sub); font-size: 13px; padding: 0 8px 8px 0; }
.nozzle-list { max-height: min(420px, 52vh); overflow-y: auto; padding-right: 8px; }
.nozzle-row { align-items: start; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.nozzle-row > label { padding-top: 10px; font-size: 14px; }
.nozzle-positions { min-width: 0; }
.nozzle-position-summary { overflow-wrap: anywhere; }
.nozzle-position-list { padding: 4px 6px; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.nozzle-position-list label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.nozzle-position-clear { margin: 6px 0 0; }
.nozzle-position-list input { width: 16px; height: 16px; flex: none; accent-color: var(--blue); }

/* 内外表面独立设置；双选时并列，精度面板在各自列内展开。 */
.surface-field { min-width: 0; }
.surface-dropdown { position: relative; }
.surface-dropdown > summary, .surface-precision > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 8px 11px; min-height: 40px; font-size: 14px; cursor: pointer; list-style: none;
}
.surface-dropdown > summary::-webkit-details-marker,
.surface-precision > summary::-webkit-details-marker { display: none; }
.surface-dropdown[open] > summary, .surface-precision[open] > summary { border-color: var(--blue); }
.surface-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surface-options {
  position: absolute; z-index: 35; top: calc(100% + 6px); left: 0;
  width: min(330px, calc(100vw - 32px)); padding: 12px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 18px var(--line);
}
.surface-options.two-surfaces { width: min(480px, calc(100vw - 32px)); }
.surface-targets { display: flex; gap: 20px; flex-wrap: wrap; padding: 0 0 12px; }
.surface-options label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
.surface-options input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--blue); }
.surface-empty { border-top: 1px solid var(--line-soft); padding-top: 12px; color: var(--sub); font-size: 13px; }
.surface-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.surface-columns[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.surface-treatment-row { min-width: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.surface-column-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.surface-methods { display: grid; gap: 8px; padding: 4px 0; }
.surface-precision { margin-top: 10px; }
.surface-precision > summary { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.surface-precision-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 6px; padding: 12px 2px 2px; }
.surface-precision-options label { font-size: 13px; gap: 4px; }
@media (max-width: 420px) {
  .surface-columns { gap: 8px; }
  .surface-treatment-row { padding: 8px; }
  .surface-precision-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .nozzle-columns, .nozzle-row { grid-template-columns: 52px 65px minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 820px) { .operating-pair { grid-column: 1 / -1; } }
@media (max-width: 520px) { .operating-pair { grid-template-columns: minmax(0, 1fr); } }

input, select, textarea, .drawing-upload-button {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  padding: 8px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--txt);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover, .drawing-upload-button:hover { border-color: #c3d2e6; }
input:focus, select:focus, textarea:focus, .drawing-upload-button:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,118,246,.12);
}
input::placeholder, textarea::placeholder { color: #b6bcc6; }
input:disabled, .drawing-upload-button:disabled { background: #f7f8fa; color: var(--mute); cursor: not-allowed; }

textarea { resize: vertical; min-height: 76px; }

select, .drawing-upload-button {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23909399' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.stepper { position: relative; }
.stepper input { padding-right: 62px; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; }
.stepper button {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--sub); font-size: 15px; line-height: 1;
  cursor: pointer; border-radius: 4px;
}
.stepper button:hover { background: #eef1f6; color: var(--txt); }
.stepper button[data-step="-1"] { right: 32px; }
.stepper button[data-step="1"]  { right: 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 20px; }
.field.wide { grid-column: 1 / -1; }
.req { color: var(--bad); font-style: normal; margin-left: 3px; }

/* 分组标题 */
.group { margin-bottom: 18px; }
.group-h {
  font-size: 14px; font-weight: 600;
  margin: 0 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}

/* ══════════ 按钮 ══════════ */

.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--txt);
  padding: 7px 16px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: #c3d2e6; background: #fafbfd; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); background: var(--blue); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn-link {
  border: none; background: none; color: var(--blue);
  font: inherit; font-size: 13px; cursor: pointer; padding: 0;
}
.btn-link:hover { text-decoration: underline; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.msg { font-size: 13px; }
.msg.ok  { color: var(--ok); }
.msg.err { color: var(--bad); }

/* 制图报价 · 两个勾选 */
.pickers { display: flex; gap: 14px; flex-wrap: wrap; }
.pick {
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1 1 260px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pick:hover { border-color: #c3d2e6; }
.pick.on { border-color: var(--blue); background: var(--blue-soft); }
.pick input { width: 16px; height: 16px; margin-top: 3px; flex: none; accent-color: var(--blue); }
.pick b { font-size: 14px; font-weight: 600; display: block; }
.pick i { font-size: 13px; color: var(--sub); font-style: normal; }

/* 制图报价 · 设备类型一排按钮
   视觉沿用上面的 .pick（同一套边框和高亮色），区别是没有勾选框、
   也不撑满整行——五个类型并排比五个大方块清楚 */
.eq-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.eq-pick {
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); color: var(--txt);
  font: inherit; font-size: 14px; font-weight: 500;
  min-height: 32px; padding: 4px 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.eq-pick:hover { border-color: #c3d2e6; }
.eq-pick.on { border-color: var(--blue); background: var(--blue-soft); }

/* 更多条件折叠 */
.more-box { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 12px; }
.more-box > summary {
  cursor: pointer; font-size: 13px; color: var(--blue);
  list-style: none; user-select: none;
}
.more-box > summary::-webkit-details-marker { display: none; }
.more-box > summary::before { content: '▸ '; }
.more-box[open] > summary::before { content: '▾ '; }

/* 常用条件下方只留一个入口，详细换热参数随更多条件一起展开。 */
.condition-more { margin-top: 8px; padding-top: 16px; }
.condition-more > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.condition-more > summary::before, .condition-more[open] > summary::before { content: none; }
.condition-more-button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); color: var(--blue); font-size: 13px; font-weight: 500;
}
.condition-more > summary:hover .condition-more-button,
.condition-more[open] .condition-more-button { background: var(--blue-soft); }
.condition-more-arrow { flex: none; width: 12px; height: 12px; }
.condition-more[open] .condition-more-arrow { transform: rotate(90deg); }
.condition-more-hint { color: var(--sub); font-size: 13px; }
.condition-more-content { padding-top: 20px; }

/* 后续成果先展示真实接入状态，折叠收纳以保持常用操作简洁。 */
.delivery-options { margin-top: 16px; }
.delivery-options > summary span { color: var(--sub); }
.delivery-note { margin: 12px 0 4px; color: var(--sub); font-size: 13px; }
.procurement-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.procurement-toolbar > label { display: grid; gap: 6px; min-width: 230px; font-size: 13px; color: var(--sub); }
.procurement-job { font-size: 13px; }
.procurement-status { margin: 12px 0 0; }
.procurement-body:not(:empty) { margin-top: 12px; }
.procurement-issues > summary { cursor: pointer; font-size: 13px; color: var(--sub); }
.procurement-issues ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--sub); }
.procurement-table th { white-space: nowrap; }
@media (max-width: 520px) { .procurement-toolbar > label { min-width: 0; width: 100%; } }
.delivery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.delivery-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft); cursor: default;
}
.delivery-item input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; }
.delivery-copy { flex: 1; min-width: 0; }
.delivery-copy b { display: block; font-size: 14px; font-weight: 600; }
.delivery-copy small { display: block; margin-top: 3px; font-size: 13px; color: var(--sub); }
.delivery-item .tag { flex: none; margin-top: 1px; }
@media (max-width: 1000px) {
  .delivery-list { grid-template-columns: minmax(0, 1fr); }
}

/* 页签 */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab {
  padding: 9px 16px; font-size: 14px; color: var(--sub);
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--txt); }
.tab.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 500; }

/* 空状态 / 未接入 */
.empty {
  text-align: center; color: var(--mute); font-size: 13px;
  padding: 34px 20px; line-height: 1.9;
}
.pending-list { display: grid; gap: 10px; }
.pending {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: 13px; color: var(--sub);
}
.pending b { color: var(--txt); font-weight: 500; display: block; margin-bottom: 2px; }

/* ══════════ 登录 ══════════ */

.login-mask {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-mask[hidden] { display: none; }

.login-card {
  width: 100%; max-width: 370px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 30px 28px 26px;
  box-shadow: 0 6px 24px rgba(31,45,77,.08);
}
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-logo { width: 42px; height: 42px; object-fit: contain; }
.login-name { font-size: 18px; font-weight: 600; }
.login-sub { color: var(--sub); font-size: 13px; margin: 8px 0 22px; }
.wide-btn { width: 100%; padding: 10px; font-size: 14px; }
.login-dev { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.login-none { color: var(--sub); font-size: 13px; line-height: 1.9; }
.login-none code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
#login-msg { display: block; margin-top: 12px; min-height: 20px; }

/* 顶栏汉堡（只在手机显示） */
.tb-burger {
  display: none;
  border: none; background: transparent;
  color: #fff; font-size: 20px; line-height: 1;
  padding: 6px 12px 6px 0; cursor: pointer;
}

/* 手机上左导航变抽屉，这层遮罩点一下关掉 */
.side-mask {
  position: fixed; inset: var(--topbar-h) 0 0 0;
  background: rgba(31,45,77,.35);
  z-index: 39;
}
.side-mask[hidden] { display: none; }

/* ══════════ 窄屏 ══════════ */

@media (max-width: 1100px) {
  .cols, .cols-3, .cols-2-1 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .tb-burger { display: block; }
  .tb-search, .tb-sys, #tb-help { display: none; }
  .tb-name { font-size: 15px; }

  /* 抽屉：默认推到屏幕外，body.side-open 时滑出来。
     原先只写了 translateX(-100%) 却没给任何打开的入口，
     等于手机上完全没法切模块。 */
  .side, body.side-collapsed .side {
    width: var(--side-w); padding: 12px;
    transform: translateX(-100%);
    transition: transform .2s;
    z-index: 40;
    box-shadow: 2px 0 12px rgba(31,45,77,.12);
  }
  body.side-open .side, body.side-open.side-collapsed .side { transform: none; }
  .nav-toggle, #nav-toggle { display: none; }
  body.side-collapsed .nav-txt, body.side-collapsed .nav-badge { display: inline; }
  body.side-collapsed .nav-item { justify-content: flex-start; gap: 10px; padding: 10px 12px; }

  .main, body.side-collapsed .main { margin-left: 0; padding: 14px 12px 40px; }
  .card { padding: 16px 14px; }
  .page-title { font-size: 18px; }
  .page-actions { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .section-nav { margin-bottom: 14px; }
  .secondary-links { gap: 8px 14px; }
  .project-more > :is(div, nav) {
    position: static; width: 176px; max-width: min(100%, calc(100vw - 52px));
    margin-top: 6px; box-shadow: none;
  }

  /* 表格列多，手机上让它横向滚，别把每个字挤成竖排 */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 0; }
  .tbl th, .tbl td { white-space: normal; overflow-wrap: anywhere; }
  .tbl-wrap > .tbl { min-width: 720px; }
  .tbl-wrap > .tbl th, .tbl-wrap > .tbl td { white-space: nowrap; overflow-wrap: normal; }
  .tbl-wrap .project-more a { white-space: normal; }
  .tbl td { padding: 8px 9px; }

  /* 指标卡改成两行两列 */
  .stats { flex-wrap: wrap; }
  .stat { flex: 0 0 50%; border-right: none; margin-bottom: 14px; }

  .grid { grid-template-columns: 1fr; }
  .tabs { margin-bottom: 14px; }
}

/* ══════════ 图纸看图器（任务书 7.10） ══════════
   画布深底用品牌主色 --navy：CAD 看图习惯深色底，同时不引入设计系统之外的色值。 */

.dwg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dwg-layout > * { min-width: 0; }
.dwg-layout.has-inspector { grid-template-columns: minmax(0, 1fr) minmax(220px, 288px); }
@supports selector(:has(*)) {
  .dwg-layout:has(#dwg-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(220px, 288px); }
  .dwg-layout:has(#dwg-side[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
.dwg-layout .card-h { flex-wrap: wrap; }
.dwg-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.btn-mini {
  font-size: 13px; font-weight: 400; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); color: var(--sub); cursor: pointer;
}
.btn-mini:hover { border-color: var(--blue); color: var(--blue); }
.btn-mini.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }

.dwg-stage {
  position: relative; height: min(62vh, 620px); min-height: 340px;
  background: var(--navy); border-radius: var(--radius); overflow: hidden;
}
.dwg-stage.light { background: #FBFBF9; }
.dwg-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }

.dwg-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  font-size: 13px; color: rgba(255,255,255,.62); pointer-events: none; padding: 20px;
}
.dwg-empty b { font-size: 15px; color: #fff; font-weight: 600; }
.dwg-stage.light .dwg-empty { color: var(--sub); }
.dwg-stage.light .dwg-empty b { color: var(--txt); }

.dwg-hud {
  position: absolute; left: 12px; bottom: 9px; display: flex; gap: 14px;
  flex-wrap: wrap; max-width: calc(100% - 24px);
  font-size: 13px; color: rgba(255,255,255,.55); pointer-events: none;
}
.dwg-stage.light .dwg-hud { color: var(--mute); }

.dwg-drop {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(59,118,246,.18); border: 2px dashed var(--blue); border-radius: var(--radius);
}
.dwg-drop.on { display: flex; }
.dwg-drop span {
  background: var(--card); color: var(--blue); font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius);
}

.dwg-bar {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  font-size: 13px; color: var(--sub);
}
.dwg-bar span:first-child { font-weight: 600; color: var(--txt); }

.dwg-pick { font-size: 13px; color: var(--sub); margin-bottom: 12px; }
.dwg-pick .kv {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; border-bottom: 1px solid var(--line-soft); color: var(--txt);
}
.dwg-pick .kv span:first-child { color: var(--mute); }

.dwg-layers { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.dwg-ly {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 2px; background: none; border: 0; cursor: pointer;
  font-size: 13px; color: var(--txt); text-align: left;
}
.dwg-ly:hover .dwg-ly-n { color: var(--blue); }
.dwg-ly.off { opacity: .4; }
.dwg-ly.off .dwg-ly-n { text-decoration: line-through; }
.dwg-sw { width: 11px; height: 11px; border-radius: 2px; flex: none; border: 1px solid var(--line); }
.dwg-ly-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dwg-ly-c { color: var(--mute); font-size: 13px; }

/* [hidden] 是 UA 样式，会被上面的 display:flex 盖掉 —— 显式让它赢，
   否则图纸载入后空状态文字还浮在图上 */
.dwg-empty[hidden], .dwg-bar[hidden], #dwg-side[hidden] { display: none; }

@media (max-width: 1100px) {
  .dwg-layout, .dwg-layout.has-inspector { grid-template-columns: minmax(0, 1fr); }
  @supports selector(:has(*)) {
    .dwg-layout:has(#dwg-side:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  }
}

@media (max-width: 820px) {
  .dwg-tools { width: 100%; margin-left: 0; }
  .dwg-tools .btn-mini { min-height: 36px; }
  .dwg-hud { gap: 2px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .side, body.side-collapsed .side { transition: none; }
}

/* 设备列表的短操作保持一行，避免窄窗口里“查看”拆成竖排。 */
.project-table td:last-child { white-space: nowrap; }

/* 核算检查页：沿用现有字号和色板，操作按需展开。 */
/* 固定返回工作台，直接打开任务链接时也不依赖浏览器访问历史。 */
.flow-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.flow-topbar .crumb { margin: 0; }
.flow-back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 4px 10px; font-size: 13px; text-decoration: none; }
.flow-back:hover { text-decoration: none; }
.flow-title {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.flow-title .page-title {margin:0 0 4px}
.flow-steps {display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin:0 0 20px}
.flow-steps b,.flow-steps .active {color:var(--blue)}
.flow-overview {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:6px 0 22px}
.flow-overview > div {display:flex;flex-direction:column;gap:6px}
.flow-overview small,.flow-overview span {font-size:13px;color:var(--sub)}
.flow-overview strong {font-size:18px;color:var(--txt)}
.flow-details {border-top:1px solid var(--line-soft);padding-top:14px;margin-top:18px;font-size:13px;line-height:1.8}
.flow-details summary {cursor:pointer;font-size:14px;font-weight:600;color:var(--sub)}
.flow-details ul {padding-left:22px}
.flow-hash {overflow-wrap:anywhere;color:var(--mute)}
.flow-items small,#flow-deliveries small {display:block;color:var(--mute);font-size:13px}
.flow-items td:nth-child(3) {min-width:180px;max-width:300px;white-space:normal}
.flow-output-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.flow-output {display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;cursor:pointer}
.flow-output:has(input:checked) {border-color:var(--blue);background:var(--blue-soft)}
.flow-output input,.flow-ack input {width:auto;accent-color:var(--blue)}
.flow-result-content[hidden], #flow-recovery[hidden], #export-review-table[hidden] { display: none !important; }
.flow-result-content .card-h { flex-wrap: wrap; gap: 8px; }
.parameter-table { table-layout: fixed; width: 100%; }
.parameter-table .parameter-name { width: 18%; }
.parameter-table th, .parameter-table td { padding: 10px 14px; border: 1px solid var(--line); vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.parameter-table th { font-weight: 500; font-size: 14px; color: var(--sub); background: var(--bg); }
.parameter-table td { width: 32%; }
.cost-detail-table { min-width: 920px; table-layout: fixed; }
.cost-detail-table th { background: var(--navy); color: var(--card); font-size: 13px; font-weight: 500; }
.cost-detail-table th, .cost-detail-table td { border: 1px solid var(--line); padding: 12px 10px; vertical-align: top; overflow-wrap: anywhere; }
.cost-detail-table .tag { display: table; margin-top: 8px; font-size: 13px; }
.cost-description, .cost-basis p { white-space: pre-wrap; line-height: 1.7; }
.cost-basis p { margin: 0; font-size: 13px; color: var(--sub); }
.cost-detail-table .cost-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-component { margin-bottom: 8px; }
.cost-component b, .cost-component span { display: block; font-size: 13px; line-height: 1.7; }
.cost-component b { font-weight: 500; }
.cost-detail-table small { margin-top: 5px; white-space: pre-wrap; color: var(--sub); }
.cost-detail-table tfoot td { background: var(--blue-soft); font-weight: 600; }
.cost-order-summary { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 20px; margin-top: 14px; font-size: 13px; color: var(--sub); }
#flow-recovery > .flow-details { margin: 0; }
@media(max-width:600px) {
  .parameter-table .parameter-name { width: 22%; }
  .parameter-table th, .parameter-table td { padding: 8px; font-size: 13px; }
  .parameter-table td { width: 28%; }
}
.flow-output b {display:block;font-size:14px;font-weight:600}
.flow-output small {display:block;font-size:13px;color:var(--mute);margin-top:3px}
.flow-ack {font-size:14px;display:flex;gap:8px;align-items:center}
.flow-dialog {width:min(860px,calc(100vw - 32px));max-height:90vh;border:1px solid var(--line);border-radius:var(--radius);padding:24px;color:var(--txt);background:var(--card)}
.flow-dialog::backdrop {background:rgba(34,44,77,.35)}
.flow-dialog .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-dialog input,.flow-dialog select {height:36px}
.flow-dialog .card-h {display:flex;justify-content:space-between;gap:18px}
#flow-inputs {margin-top:18px}
@media(max-width:760px){.flow-overview,.flow-output-grid{grid-template-columns:1fr}.flow-steps{gap:12px}.flow-title{align-items:start}.flow-dialog .grid{grid-template-columns:1fr}}
/* 进度只反映已发生的阶段；当前阶段用流动动画，避免虚构百分比。 */
.calculation-card { padding: 22px 24px; }
.calculation-heading { display: flex; align-items: center; gap: 12px; }
.calculation-heading > div:nth-child(2) { flex: 1; min-width: 0; }
.calculation-heading h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.calculation-heading p { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.6; }
.calculation-ai { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.calculation-ai svg { display: block; width: 100%; height: 100%; padding: 3px; }
.calculation-ai path { stroke: currentColor; stroke-width: 1.2; opacity: .45; }
.calculation-ai circle { fill: var(--card); stroke: currentColor; stroke-width: 1.5; }
.calculation-ai .ai-core { fill: currentColor; }
.calculation-status { flex: none; font-size: 13px; color: var(--blue); background: var(--blue-soft); border-radius: 5px; padding: 3px 9px; white-space: nowrap; }
.calculation-stages { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 0; margin: 22px 0 18px; list-style: none; }
.stage-track { height: 4px; display: block; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.stage-track i { display: block; height: 100%; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.stage-label { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; color: var(--mute); }
.stage-number { width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.calculation-stages .done .stage-track i { transform: scaleX(1); }
.calculation-stages .done .stage-label { color: var(--sub); }
.calculation-stages .current .stage-label { color: var(--blue); font-weight: 500; }
.calculation-stages .current .stage-track { background: var(--blue-soft); }
.calculation-progress.running .current .stage-track i { width: 45%; animation: calculation-scan 2.2s ease-in-out infinite; }
.calculation-progress.running .ai-core { transform-box: fill-box; transform-origin: center; animation: calculation-pulse 2.2s ease-in-out infinite; }
.calculation-progress.running .calculation-ai circle:not(.ai-core) { animation: calculation-node 2.2s ease-in-out infinite; }
.calculation-progress.running .calculation-ai circle:nth-of-type(2n) { animation-delay: .55s; }
.calculation-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calculation-hint { color: var(--mute); font-size: 13px; }
/* 用户 2026-10-14：核算、校验的开始、完成时间与用时 */
.calculation-timeline { color: var(--mute); font-size: 13px; line-height: 1.7; margin: 4px 0 10px; }
.calculation-footer .calculation-actions { margin: 0; gap: 16px; flex: none; }
.calculation-actions .btn { height: 30px; min-height: 30px; padding: 3px 12px; font-size: 13px; border-radius: 5px; }
.calculation-actions .btn-link { font-size: 13px; }
.calculation-progress.idle .calculation-status { color: var(--sub); background: var(--bg); }
.calculation-progress.idle .calculation-ai { color: var(--mute); background: var(--bg); }
.calculation-progress.complete .calculation-status { color: var(--ok); background: var(--bg); }
.calculation-progress.attention .calculation-status { color: var(--sub); background: var(--bg); border-left: 3px solid var(--warn); }
.calculation-progress.failed .calculation-status { color: var(--bad); background: var(--bg); }
.calculation-progress.failed .current .stage-label { color: var(--bad); }
.calculation-card > .flow-details { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.calculation-card > .msg:empty { display: none; }
.calculation-card > .msg:not(:empty) { display: block; margin-top: 10px; }
/* 用户 2026-10-14：配件表精简——要点一行 + 展开 */
.flow-items .item-name { white-space: nowrap; }
.flow-items .item-spec { min-width: 260px; }
.flow-items .nowrap { white-space: nowrap; }
.flow-items .row-na td { color: var(--mute); }
.flow-items .row-na .spec-head { color: var(--mute); }
.spec-head { display: block; font-size: 14px; color: var(--txt); line-height: 1.6; }
.spec-note { display: block; font-size: 13px; color: var(--mute); }
.item-more { margin-top: 2px; }
.item-more > summary { display: inline-block; cursor: pointer; font-size: 13px; color: var(--blue); list-style: none; }
.item-more > summary::-webkit-details-marker { display: none; }
.item-more[open] > summary { margin-bottom: 4px; }
.item-more p { margin: 0 0 4px; font-size: 13px; color: var(--sub); line-height: 1.6; }
/* 用户 2026-10-14：说明类内容集中到底部“核算说明”一项 */
.flow-notes > summary .notes-hint { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--warn); }
.flow-notes .notes-group { margin-top: 10px; }
/* 用户 2026-10-14：计算进度流水线——节点连线体现“条件→核算→校验→结果”的传递，节点下写时间 */
.calc-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 24px 0 18px; list-style: none; }
.calc-pipeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; min-width: 0; }
.pipe-node { position: relative; z-index: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.pipe-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--mute);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; transition: background .3s, border-color .3s, color .3s; }
.calc-pipeline .done .pipe-dot { background: var(--blue); border-color: var(--blue); color: var(--card); }
.calc-pipeline .current .pipe-dot { border-color: var(--blue); color: var(--blue); }
.calc-pipeline .bad .pipe-dot { border-color: var(--bad); color: var(--bad); }
.calc-pipeline .running .pipe-node::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; animation: pipe-ring 1.8s ease-out infinite; }
.calculation-progress.complete .calc-pipeline .done .pipe-dot { background: var(--ok); border-color: var(--ok); }
.pipe-label { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--txt); }
.calc-pipeline .current .pipe-label { color: var(--blue); }
.calc-pipeline .bad .pipe-label { color: var(--bad); }
.calc-pipeline li:not(.done):not(.current) .pipe-label { color: var(--mute); }
.node-time { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--sub); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.node-time.muted { color: var(--mute); }
.node-time.live { color: var(--blue); }
/* 连线：从上一节点中心到本节点中心（列宽相同、无间隙，故 ±50%） */
.pipe-link { position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; }
.pipe-link i { position: absolute; inset: 0; border-radius: 2px; background: var(--line); overflow: hidden; }
.pipe-link.lit i { background: var(--blue); }
.calculation-progress.complete .pipe-link.lit i { background: var(--ok); }
.pipe-link em { position: absolute; left: 0; right: 0; top: -20px; font-style: normal; font-size: 13px; color: var(--mute); text-align: center; white-space: nowrap; }
.pipe-link.flow i { background: var(--blue-soft); }
.pipe-link.flow i::after { content: ''; position: absolute; top: 0; left: 0; width: 34%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue)); animation: pipe-flow 1.4s linear infinite; }
.pipe-link.flow em { color: var(--blue); }
@keyframes pipe-flow { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes pipe-ring { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 640px) {
  .calc-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .calc-pipeline li:nth-child(3) .pipe-link { display: none; }
  .pipe-link em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe-link.flow i::after, .calc-pipeline .running .pipe-node::before { animation: none; }
  .pipe-link.flow i { background: var(--blue); opacity: .6; }
}
@keyframes calculation-scan { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
@keyframes calculation-pulse { 0%,100% { transform: scale(.85); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes calculation-node { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  .calculation-progress.running .current .stage-track i, .calculation-progress.running .calculation-ai circle { animation: none; }
  .calculation-progress.running .current .stage-track i { width: 100%; transform: none; opacity: .5; }
}
@media(max-width:600px) {
  .calculation-card { padding: 18px 16px; }
  .calculation-heading { flex-wrap: wrap; gap: 10px; }
  .calculation-heading .calculation-status { margin-left: 54px; }
  .calculation-stages { gap: 8px; margin-top: 18px; }
  .stage-label { gap: 3px; }
  .stage-number { display: none; }
  .calculation-footer { flex-wrap: wrap; }
  .calculation-footer .calculation-actions { margin-left: auto; }
}

/* 基价按计量单位紧凑排列，材料与加工并列便于核对。 */
.base-price-columns {display:grid;grid-template-columns:minmax(280px,.8fr) minmax(410px,1.2fr);gap:32px;align-items:start}
.base-price-heading {font-size:15px;margin:8px 0 12px;color:var(--txt)}
.base-price-heading span {font-size:13px;font-weight:400;color:var(--mute);margin-left:8px}
.base-price-table th,.base-price-table td {padding:6px 8px}
.base-price-table .price-value {width:112px}
.base-price-table input {width:100%;min-width:72px;height:32px;padding:4px 8px;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.base-price-table input[aria-invalid="true"] {border-color:var(--bad)}
.base-price-table .price-unit {width:65px;white-space:nowrap;color:var(--mute)}
.base-price-table .price-saved {width:52px;white-space:nowrap;font-size:13px;color:var(--mute)}
.base-price-more {border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.base-price-more summary {font-size:13px;cursor:pointer;color:var(--mute)}
.base-price-more .base-price-table {margin-top:12px}
.base-price-add {display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:12px}
.base-price-add label {flex:1;min-width:130px;font-size:13px;color:var(--mute)}
.base-price-add input {display:block;width:100%;height:34px;margin-top:6px}
.base-price-note {font-size:13px;color:var(--mute);margin:18px 0 0}
.base-prices-card .card-h {flex-wrap:wrap;gap:8px}
@media(max-width:1000px){.base-price-columns{grid-template-columns:1fr;gap:24px}}
@media(max-width:520px){.base-price-table th,.base-price-table td{padding:5px 3px}.base-price-table .price-value{width:85px}.base-price-table .price-saved{width:42px}.base-prices-card .card-h .more{margin-left:0}}

.base-price-table .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 容积类型和数值在同一紧凑面板中，避免占用两个核心条件格。 */
.volume-options { display: block; }
.volume-types { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-bottom: 12px; }
.volume-types label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.volume-types input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.volume-value-label { display: block; margin-bottom: 6px; color: var(--sub); font-size: 13px; }

/* 上传入口保持紧凑，来源表只在识别完成后展开。 */
.drawing-upload { display: contents; }
.drawing-upload-line { min-width: 0; }
.drawing-upload-line .field-label { display: block; margin-bottom: 6px; }
.drawing-upload-button { text-align: left; cursor: pointer; }
.drawing-format-hint { margin-left: 6px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.drawing-upload-feedback { grid-column: 1 / -1; min-width: 0; }
.drawing-upload-feedback:has(.drawing-upload-status:not(:empty), .drawing-note:not(:empty), [data-results]:not(:empty)) { margin-bottom: 15px; }
.drawing-upload-status { font-size: 13px; color: var(--sub); }
.drawing-upload-status:not(:empty) { margin-top: 10px; }
.drawing-review { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.drawing-review summary { cursor: pointer; color: var(--sub); }
.drawing-review .tbl { font-size: 13px; }
.drawing-review .tbl td { white-space: normal; vertical-align: top; max-width: 320px; overflow-wrap: anywhere; }
.drawing-review .tbl-wrap { margin-top: 10px; }
.drawing-review input[type=radio] { width: 16px; height: 16px; }
.drawing-note { color: var(--sub); font-size: 13px; margin-top: 8px; }

/* 工作台使用紧凑密度，减少控件与卡片留白，同时保留原字号和焦点反馈。 */
.workbench-compact {
  --condition-control-height: 32px;
  --condition-column-gap: 24px;
  --condition-row-gap: 16px;
  --condition-label-gap: 6px;
}
.workbench-compact .card { padding: 18px; margin-bottom: 16px; }
.workbench-compact .card-h { margin-bottom: 14px; }
.workbench-compact .workbench-type-card { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.workbench-compact .workbench-type-card .card-h { margin: 0; }
.workbench-compact .eq-picks { gap: 8px; }
.workbench-compact .eq-pick { min-height: 28px; padding: 2px 10px; }
.workbench-compact .grid, .workbench-compact .operating-pair { column-gap: var(--condition-column-gap); }
.workbench-compact .field { margin-bottom: var(--condition-row-gap); }
.workbench-compact .field > label,
.workbench-compact .field-label,
.workbench-compact .drawing-upload-line .field-label { margin-bottom: var(--condition-label-gap); }
.workbench-compact :is(input[type="text"], input[type="number"], input[type="date"], input:not([type]), select, .drawing-upload-button) {
  height: var(--condition-control-height); padding: 4px 10px; border-radius: 5px;
}
.workbench-compact :is(select, .drawing-upload-button) { padding-right: 28px; }
.workbench-compact .stepper input { padding-right: 58px; }
.workbench-compact :is(.operating-dropdown, .nozzle-dropdown, .nozzle-positions, .surface-dropdown, .surface-precision) > summary {
  min-height: var(--condition-control-height); padding: 4px 10px; border-radius: 5px;
}
.workbench-compact textarea { padding: 6px 10px; border-radius: 5px; }
/* 输入条件及更多条件的框内文字统一使用小号灰色。 */
.workbench-compact #inputs :is(input[type="text"], input[type="number"], input[type="date"], input:not([type]), select, textarea),
.workbench-compact #inputs :is(.operating-dropdown, .nozzle-dropdown, .nozzle-positions, .surface-dropdown, .surface-precision) > summary,
.workbench-compact .drawing-upload-button {
  color: var(--mute);
  font-size: 13px;
}
.workbench-compact #inputs :is(input, textarea)::placeholder {
  color: var(--mute);
  font-size: 13px;
  opacity: 1;
}
.workbench-compact #f-remark { height: 64px; min-height: 64px; }
.workbench-compact .btn { min-height: 30px; padding: 4px 12px; border-radius: 5px; }
.workbench-compact .condition-more { margin-top: 6px; padding-top: 12px; }
.workbench-compact .condition-more-button { min-height: 28px; padding: 2px 8px; }
.workbench-compact .condition-more-content { display: grid; gap: 20px; padding-top: 18px; }
.workbench-compact .actions { gap: 12px; margin-top: 12px; }
.workbench-compact .group { margin-bottom: 14px; }
.workbench-compact .group-h { margin-bottom: 10px; }
/* 更多条件按行排间距，去掉字段末行和分组外边距的重复留白。 */
.workbench-compact .condition-more-content .group { margin-bottom: 0; min-width: 0; }
.workbench-compact .condition-more-content .grid { row-gap: var(--condition-row-gap); }
.workbench-compact .condition-more-content .field { margin-bottom: 0; min-width: 0; }
.workbench-compact .condition-more-content textarea { height: 64px; min-height: 64px; }
.workbench-compact .nozzle-row > label { padding-top: 5px; }
.workbench-compact .recent-tasks > summary { margin: 0; cursor: pointer; list-style: none; }
.workbench-compact .recent-tasks > summary::-webkit-details-marker { display: none; }
.workbench-compact .recent-tasks[open] > summary { margin-bottom: 14px; }
.recent-tasks-arrow { flex: none; color: var(--sub); }
.recent-tasks[open] .recent-tasks-arrow { transform: rotate(90deg); }
.workbench-task-actions, .task-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.task-shortcuts { gap: 12px; }
.task-shortcut-item { position: relative; display: inline-flex; }
.task-shortcut { display: inline-flex; align-items: center; gap: 7px; color: var(--txt); text-decoration: none; }
.task-shortcut-close { position: absolute; top: -7px; right: -6px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--sub); background: var(--card); cursor: pointer; }
.task-shortcut-close:hover { color: var(--bad); border-color: var(--bad); }
.task-shortcut-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.task-shortcut-close:disabled { opacity: .5; cursor: wait; }
.task-shortcut:hover { text-decoration: none; }
.task-shortcut.running { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.task-shortcut small, .task-capacity { color: var(--sub); font-size: 13px; }
.workbench-task-actions > .msg { flex-basis: 100%; }
.workbench-task-actions > .msg:empty { display: none; }
@media (max-width: 520px) {
  .workbench-compact .card { padding: 12px; }
  .workbench-compact .eq-pick { min-height: 32px; }
}

/* 条件完整度与标题同行，窄屏自然换行。 */
.workbench-compact .condition-heading { flex-wrap: wrap; gap: 10px 24px; }
.condition-completeness { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 400; }
.condition-completeness-label, .condition-completeness-count { color: var(--mute); }
.condition-completeness-track { display: block; width: clamp(100px, 15vw, 200px); height: 6px; overflow: hidden; border-radius: 4px; background: var(--blue-soft); }
.condition-completeness-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .18s ease; }
.condition-completeness-percent { color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 32px; }
.condition-completeness-count { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .condition-completeness { width: 100%; }
  .condition-completeness-track { flex: 1; width: auto; min-width: 72px; }
  .condition-completeness-count { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .condition-completeness-track i { transition: none; } }

.medium-property-note{display:block;margin-top:6px;font-size:12px;line-height:1.55;color:var(--muted,#7d8493)}

/* ── 计算进度卡片精简（用户 2026-10-15：“文字排版很乱，要简洁有高级感”）──
   节点下两行分主次：上行用时/状态 14px，下行起止时刻 13px 弱化；
   提示、按钮收成底部一行，用细分隔线和上方流水线分开 */
.node-main { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--txt); font-variant-numeric: tabular-nums; }
.node-main.live { color: var(--blue); }
.node-main.muted { color: var(--mute); font-weight: 400; }
.node-main + .node-time { margin-top: 2px; }
.calc-pipeline { margin: 26px 0 22px; }
.calculation-footer { flex-wrap: wrap; row-gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.calculation-footer .calculation-actions { align-items: center; flex-wrap: wrap; }
/* 窄屏：状态标签换到标题下方一行，不再把标题挤成竖排；底部操作行左对齐 */
@media (max-width: 640px) {
  .calculation-heading { flex-wrap: wrap; }
  .calculation-heading > div:nth-child(2) { flex: 1 1 calc(100% - 56px); }
  .calculation-status { margin-left: 56px; white-space: normal; }
  .calculation-footer .calculation-actions { justify-content: flex-start; }
}