/* ============================================================
   热网水力计算系统 — 深色科技风主题（Dark Neon Tech）
   深蓝/暗黑底色 + 霓虹蓝点缀 · 渐变 · 发光边框 · 毛玻璃卡片
   （保持功能不变：选择器与旧版完全兼容）
   ============================================================ */
:root {
  /* ---- 基础色板：深空蓝黑 + 霓虹青蓝 ---- */
  --bg: #070b14;
  --bg-deep: #04070e;
  --panel: rgba(13, 20, 36, .72);          /* 毛玻璃面板 */
  --panel-solid: #0d1424;
  --panel-raised: rgba(20, 30, 54, .85);
  --border: rgba(56, 189, 248, .22);       /* 霓虹蓝描边 */
  --border-light: rgba(56, 189, 248, .12);
  --text: #d6e4f5;
  --text-dim: #7d8fb0;
  --primary: #38bdf8;                      /* 霓虹蓝 */
  --primary-deep: #0ea5e9;
  --primary-dark: #0284c7;
  --accent: #22d3ee;                       /* 霓虹青 */
  --accent-violet: #8b5cf6;
  --danger: #f43f5e;
  --ok: #34d399;
  --warn: #fbbf24;
  --head-bg: rgba(15, 26, 48, .92);

  /* ---- 发光与阴影 ---- */
  --glow: rgba(56, 189, 248, .35);
  --glow-strong: rgba(56, 189, 248, .55);
  --glow-danger: rgba(244, 63, 94, .4);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, .45);

  /* ---- 字体：科技风（Rajdhani 覆盖拉丁与数字，中文走雅黑） ---- */
  --font-body: "Rajdhani", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  --font-display: "Orbitron", "Rajdhani", "Microsoft YaHei", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
}

/* ---- 全局背景：深空渐变 + 霓虹辉光（固定不随滚动） ---- */
body {
  background:
    radial-gradient(1200px 620px at 85% -10%, rgba(56, 189, 248, .13), transparent 60%),
    radial-gradient(1000px 540px at -10% 110%, rgba(139, 92, 246, .10), transparent 60%),
    radial-gradient(700px 400px at 50% 55%, rgba(34, 211, 238, .05), transparent 65%),
    linear-gradient(180deg, #0a101f 0%, #070b14 55%, #04070e 100%);
  background-attachment: fixed;
}

/* ================= 布局骨架（网格化对齐） ================= */
body { display: flex; flex-direction: column; }

/* ---- 顶部工具栏：毛玻璃 + 底部霓虹光带 ---- */
.toolbar {
  flex: 0 0 auto;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(2, 8, 20, .55), 0 1px 0 rgba(56, 189, 248, .08);
  position: relative;
  z-index: 10;
}
/* 工具栏底缘的霓虹渐变光带，强化科技层次 */
.toolbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(56, 189, 248, .55) 18%,
    rgba(34, 211, 238, .75) 50%,
    rgba(139, 92, 246, .5) 82%, transparent 100%);
  pointer-events: none;
}
.toolbar-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; padding: 6px 12px;
}
.brand { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-right: 1px solid var(--border-light); }
.brand-logo {
  width: 26px; height: 26px;
  object-fit: contain; display: block;
  border-radius: 4px;
}
.brand-name {
  font-family: var(--font-body);
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #e6f4ff 10%, #7dd3fc 55%, #22d3ee 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #7dd3fc;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, .35));
}
.brand-sub {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--primary); opacity: .85; margin-left: 7px; font-weight: 500;
  text-shadow: 0 0 8px rgba(56, 189, 248, .5);
}

.mode-group, .tool-group {
  display: flex; align-items: center; gap: 5px;
}
.tool-group { padding-left: 10px; border-left: 1px solid var(--border-light); }

/* 「项目参数」按钮：位于模式切换（选择）组件之前 */
.tool-group-params { padding-left: 0; border-left: none; padding-right: 10px; border-right: 1px solid var(--border-light); }
.btn-params { font-weight: 600; }
.btn-params:hover {
  color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 12px rgba(34, 211, 238, .35);
}

/* ---------- 模态弹窗（毛玻璃 + 霓虹描边 + 入场动效） ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 16, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mask-in .2s ease;
}
@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
.modal-mask[hidden] { display: none; }
.modal-dialog {
  width: min(680px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(17, 27, 48, .92) 0%, rgba(10, 16, 30, .94) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-panel), 0 0 28px rgba(56, 189, 248, .14), inset 0 1px 0 rgba(125, 211, 252, .08);
  overflow: hidden;
  animation: dialog-in .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes dialog-in {
  from { transform: translateY(14px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px;
  background: linear-gradient(90deg, rgba(14, 165, 233, .12), rgba(139, 92, 246, .06) 70%, transparent);
  border-bottom: 1px solid var(--border-light);
}
.modal-title {
  font-weight: 700; font-size: 14px; color: var(--accent);
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(34, 211, 238, .45);
}
.modal-close {
  border: 1px solid var(--border); background: rgba(15, 23, 42, .8); color: var(--text-dim);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; line-height: 1;
  transition: all .18s ease;
}
.modal-close:hover {
  color: #ff8fa3; border-color: var(--danger);
  box-shadow: 0 0 10px var(--glow-danger);
  transform: rotate(90deg);
}
.modal-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; }

/* 弹窗内参数双列排布（网格对齐），充分利用宽度 */
.modal-body .prop-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.modal-body .prop-tip, .modal-body .prop-info { grid-column: 1 / -1; }
/* 参数分组标题：跨双列的霓虹小节条 */
.prop-section {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 600; color: var(--primary);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 4px; margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
}
.prop-section::before {
  content: ""; display: inline-block; width: 4px; height: 12px;
  background: linear-gradient(180deg, var(--accent), var(--primary-deep));
  border-radius: 1px;
  box-shadow: 0 0 6px var(--glow);
}
.modal-body .btn-danger { grid-column: 1 / -1; justify-self: start; }
.modal-dialog-sm { width: min(560px, calc(100vw - 48px)); }

.main-area { flex: 1 1 auto; display: flex; min-height: 0; }
/* ---- 画布区：深空底 + 微弱青色辉光 ---- */
.canvas-panel {
  flex: 1 1 auto; min-width: 0; position: relative;
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(34, 211, 238, .05), transparent 70%),
    linear-gradient(180deg, #080d1a 0%, #060a13 100%);
}
#canvasHost { position: absolute; inset: 0; overflow: hidden; }

/* ---------- 右侧属性面板：毛玻璃卡片流 ---------- */
.props-panel {
  flex: 0 0 292px; overflow-y: auto;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(2, 8, 20, .35);
  padding: 10px;
}
.props-panel .prop-calc { margin-left: -2px; margin-right: -2px; }
.props-panel .btn-danger { margin-top: 4px; align-self: flex-start; }

/* ---------- 可拖拽分隔条（画布区 与 底部结果区 之间，霓虹高亮） ---------- */
.panel-split {
  flex: 0 0 7px; position: relative;
  background: rgba(10, 16, 30, .9);
  border-top: 1px solid var(--border-light);
  cursor: row-resize; user-select: none; z-index: 5;
  transition: background .18s ease, box-shadow .18s ease;
}
.panel-split:hover, .panel-split.active {
  background: linear-gradient(90deg, rgba(14, 116, 144, .35), rgba(34, 211, 238, .5), rgba(14, 116, 144, .35));
  box-shadow: 0 0 14px var(--glow);
}
.panel-split-handle {
  position: absolute; left: 50%; top: 50%;
  width: 42px; height: 3px; border-radius: 2px;
  transform: translate(-50%, -50%);
  background: var(--text-dim); opacity: .5;
  transition: opacity .18s ease, background .18s ease;
}
.panel-split:hover .panel-split-handle,
.panel-split.active .panel-split-handle {
  background: #bdf0ff; opacity: 1;
  box-shadow: 0 0 8px var(--glow-strong);
}
/* 拖拽期间：禁用文本选择、统一指针样式，避免 iframe/文本吞掉事件 */
body.split-dragging { cursor: row-resize; user-select: none; }
body.split-dragging .canvas-panel, body.split-dragging .bottom-panel { pointer-events: none; }

/* ---- 底部结果面板：毛玻璃卡片容器 ---- */
.bottom-panel {
  flex: 0 0 auto; height: 42vh; min-height: 110px;
  display: flex; flex-direction: column;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(2, 8, 20, .4);
}
.tabs {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 10px 0;
  border-bottom: 1px solid var(--border-light);
  background: rgba(9, 14, 26, .6);
}
.tab-btn {
  border: 1px solid var(--border-light); border-bottom: none;
  background: rgba(13, 20, 36, .55); color: var(--text-dim);
  padding: 5px 15px; border-radius: 6px 6px 0 0; cursor: pointer;
  font-size: 13px; letter-spacing: .5px;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tab-btn:hover {
  color: var(--accent);
  background: rgba(14, 116, 144, .18);
  border-color: var(--border);
  text-shadow: 0 0 8px rgba(34, 211, 238, .4);
}
.tab-btn.active {
  background: linear-gradient(180deg, rgba(30, 45, 80, .9), rgba(17, 27, 48, .95));
  color: var(--accent); font-weight: 700;
  border-color: var(--border);
  position: relative; top: 1px;
  box-shadow: 0 -2px 12px rgba(56, 189, 248, .18), inset 0 1px 0 rgba(125, 211, 252, .12);
  text-shadow: 0 0 10px rgba(34, 211, 238, .55);
}
.tab-content { flex: 1 1 auto; overflow: auto; padding: 10px 12px; }

/* ---- 状态栏：暗色终端风 ---- */
.statusbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 3px 14px; font-size: 12px; color: var(--text-dim);
  background: rgba(6, 10, 19, .95);
  border-top: 1px solid var(--border-light);
  font-family: var(--font-body);
  white-space: nowrap; overflow: hidden;
  letter-spacing: .3px;
}
.status-sep { color: rgba(56, 189, 248, .35); }
.status-right { margin-left: auto; color: var(--ok); text-shadow: 0 0 8px rgba(52, 211, 153, .4); }

/* ---------- 画布全屏模式：隐藏其余区域，绘制界面铺满整个可视区域 ---------- */
body.canvas-fullscreen .toolbar,
body.canvas-fullscreen .panel-split,
body.canvas-fullscreen .bottom-panel,
body.canvas-fullscreen .statusbar,
body.canvas-fullscreen .props-panel { display: none !important; }
body.canvas-fullscreen .main-area { flex: 1 1 auto; }
body.canvas-fullscreen { background: #060a13; }
body.canvas-fullscreen .canvas-panel {
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(34, 211, 238, .05), transparent 70%),
    linear-gradient(180deg, #080d1a 0%, #060a13 100%);
}

/* 全屏时右上角浮动退出按钮（霓虹危险色） */
.fs-exit {
  position: fixed; top: 10px; right: 14px; z-index: 150;
  background: rgba(13, 20, 36, .85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5), 0 0 12px rgba(244, 63, 94, .15);
}
.fs-exit:hover {
  color: #ff8fa3; border-color: var(--danger);
  box-shadow: 0 0 16px var(--glow-danger);
}

/* ================= 按钮/表单（微动效：悬停浮起 + 霓虹光晕） ================= */
.btn {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30, 44, 76, .75) 0%, rgba(15, 23, 42, .85) 100%);
  color: var(--text);
  padding: 4px 13px; border-radius: 6px; cursor: pointer; font-size: 13px;
  white-space: nowrap; letter-spacing: .5px;
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease,
              transform .16s ease, background .16s ease;
}
.btn:hover {
  border-color: var(--primary);
  color: var(--accent);
  background: linear-gradient(180deg, rgba(21, 47, 90, .8) 0%, rgba(12, 32, 64, .9) 100%);
  box-shadow: 0 0 12px rgba(56, 189, 248, .3), inset 0 1px 0 rgba(125, 211, 252, .12);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
/* 主按钮：霓虹渐变 + 呼吸光晕 */
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 55%, #38bdf8 100%);
  border-color: rgba(56, 189, 248, .8);
  color: #031320; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  box-shadow: 0 0 14px rgba(34, 211, 238, .35);
  animation: btn-glow 2.8s ease-in-out infinite;
}
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(34, 211, 238, .3), inset 0 1px 0 rgba(255, 255, 255, .2); }
  50%      { box-shadow: 0 0 20px rgba(34, 211, 238, .6), inset 0 1px 0 rgba(255, 255, 255, .3); }
}
.btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 55%, #67e8f9 100%);
  color: #031320;
  box-shadow: 0 0 22px rgba(34, 211, 238, .7);
  animation: none; transform: translateY(-1px);
}
.btn-danger { color: #ff8fa3; border-color: rgba(244, 63, 94, .5); }
.btn-danger:hover {
  background: rgba(244, 63, 94, .14); border-color: var(--danger); color: #ffb3c0;
  box-shadow: 0 0 12px var(--glow-danger);
}
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn.off { opacity: .42; }

.mode-btn {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30, 44, 76, .7) 0%, rgba(15, 23, 42, .8) 100%);
  color: var(--text-dim);
  padding: 4px 11px; cursor: pointer; font-size: 13px; border-radius: 6px;
  letter-spacing: .5px;
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease,
              transform .16s ease, background .16s ease;
}
.mode-btn:hover {
  color: var(--accent); border-color: var(--primary);
  box-shadow: 0 0 10px rgba(56, 189, 248, .28);
  transform: translateY(-1px);
}
.mode-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 60%, #22d3ee 100%);
  border-color: rgba(56, 189, 248, .85);
  color: #f0faff; font-weight: 700;
  text-shadow: 0 0 6px rgba(3, 19, 32, .6);
  box-shadow: 0 0 14px rgba(34, 211, 238, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.select, .input-sm {
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(9, 15, 28, .9); color: var(--text);
  padding: 4px 7px; font-size: 13px; max-width: 160px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select option { background: #0d1424; color: var(--text); }
.select:focus, .input-sm:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .18), 0 0 10px rgba(34, 211, 238, .25);
}
.input-sm { width: 72px; }

/* ================= 属性面板 ================= */
.prop-title {
  font-weight: 700; font-size: 13.5px; color: var(--accent);
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 -0.5px var(--border-light);
  padding: 5px 2px 7px; margin-bottom: 9px;
  text-shadow: 0 0 10px rgba(34, 211, 238, .45);
  display: flex; align-items: center; gap: 7px;
}
.prop-title::before {
  content: ""; display: inline-block; width: 5px; height: 14px;
  background: linear-gradient(180deg, var(--accent), var(--primary-deep));
  border-radius: 1.5px;
  box-shadow: 0 0 8px var(--glow);
}
.prop-box { display: flex; flex-direction: column; gap: 7px; }
.prop-field { display: flex; flex-direction: column; gap: 2px; }
.prop-field label { font-size: 12px; color: var(--text-dim); letter-spacing: .5px; }
.prop-field input, .prop-field select {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 7px; font-size: 13px;
  background: rgba(9, 15, 28, .9); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.prop-field input:focus, .prop-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .18), 0 0 10px rgba(34, 211, 238, .25);
}
/* 信息卡：毛玻璃 + 霓虹左缘 */
.prop-info {
  font-size: 12px; color: var(--text-dim);
  background: rgba(15, 26, 48, .55);
  border: 1px solid var(--border-light);
  border-radius: 6px; padding: 6px 9px; margin-top: 2px;
}
.prop-tip {
  font-size: 12px; color: #fcd34d;
  background: rgba(120, 53, 15, .22);
  border: 1px dashed rgba(251, 191, 36, .45);
  border-radius: 6px; padding: 5px 9px; margin-top: 2px;
}

/* ---------- 备注输入 + 颜色选择（四类元素属性面板统一） ---------- */
.prop-field textarea.note-input {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 7px; font-size: 13px; font-family: inherit;
  background: rgba(9, 15, 28, .9); color: var(--text);
  resize: vertical; min-height: 56px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.prop-field textarea.note-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .18), 0 0 10px rgba(34, 211, 238, .25);
}
.prop-field textarea.note-input::placeholder { color: #55688c; }
.color-field .color-swatches {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 2px 0;
}
.color-swatch {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 10px rgba(34, 211, 238, .5);
  transform: scale(1.12);
}
/* 默认配色按钮：斜纹表示"无自定义色" */
.color-swatch-default {
  background: repeating-linear-gradient(45deg, #22304f, #22304f 4px, #141d33 4px, #141d33 8px);
}
input[type="color"].color-custom {
  width: 30px; height: 22px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; background: transparent; cursor: pointer;
}
input[type="color"].color-custom::-webkit-color-swatch-wrapper { padding: 1px; }
input[type="color"].color-custom::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-reset {
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  background: rgba(15, 26, 48, .55); color: var(--text-dim);
  font-size: 11px; padding: 2px 8px;
}
.color-reset:hover { color: var(--text); border-color: var(--accent); }
/* 列表中的元素颜色标识（与属性面板自定义颜色同步） */
.color-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: baseline;
  border: 1px solid rgba(255, 255, 255, .35);
}

/* ---------- 对象类型徽标：霓虹发光胶囊 ---------- */
.prop-badge {
  display: inline-block; padding: 2px 13px; margin-bottom: 8px;
  border-radius: 11px; font-size: 12px; font-weight: 600; color: #fff;
  letter-spacing: 1px;
}
.prop-badge.badge-source {
  background: linear-gradient(135deg, rgba(244, 63, 94, .85), rgba(190, 24, 93, .85));
  box-shadow: 0 0 12px rgba(244, 63, 94, .5);
}
.prop-badge.badge-junction {
  background: linear-gradient(135deg, rgba(56, 189, 248, .85), rgba(14, 165, 233, .85));
  box-shadow: 0 0 12px rgba(56, 189, 248, .5);
}
.prop-badge.badge-user {
  background: linear-gradient(135deg, rgba(52, 211, 153, .85), rgba(16, 185, 129, .85));
  box-shadow: 0 0 12px rgba(52, 211, 153, .5);
}
.prop-badge.badge-pipe {
  background: linear-gradient(135deg, rgba(167, 139, 250, .85), rgba(139, 92, 246, .85));
  box-shadow: 0 0 12px rgba(139, 92, 246, .5);
}

/* ---------- 计算结果信息区：毛玻璃数据卡 ---------- */
.prop-calc {
  margin-top: 10px; padding: 9px 13px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(17, 27, 48, .7), rgba(10, 16, 30, .75));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, .06);
}
.prop-calc-title {
  font-size: 12px; font-weight: 600; color: var(--primary);
  letter-spacing: 1.5px;
  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--border-light);
}
.prop-calc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 2.5px 0;
}
.prop-calc-label { color: var(--text-dim); }
.prop-calc-val { color: #a5e6ff; font-weight: 600; text-shadow: 0 0 6px rgba(56, 189, 248, .25); }
.prop-calc-empty { font-size: 12px; color: var(--text-dim); }

/* ================= 画布（SVG）— 霓虹管线与节点 ================= */
.hc-canvas { display: block; cursor: default; }

.pipe-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.pipe-vis { stroke-width: 3.5; stroke-linecap: round; pointer-events: none; }
.pipe-trunk { stroke: #3b82f6; }
.pipe-dist { stroke: #7c93b5; stroke-width: 2.5; }
.pipe-closed .pipe-vis { stroke-dasharray: 10 6; stroke: #3b4a63; }
/* ---- 关断排除：被隔离节点置灰 + 标签灰显（✕ 标记） ---- */
.node-g.node-off { opacity: .55; }
.node-g.node-off circle, .node-g.node-off rect {
  stroke: #55647e !important;
  filter: grayscale(1);
}
.label-off { fill: #55647e !important; }
.prop-info-warn { color: #fcd34d; }

/* ================= 搜索定位叠加层 ================= */
.canvas-search {
  position: absolute; top: 10px; right: 12px; z-index: 6;
  width: 268px; max-width: calc(100% - 24px);
  font-size: 13px;
}
.cs-box {
  position: relative;
  background: var(--panel-raised);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  display: flex; align-items: center;
}
.cs-input {
  flex: 1; width: 100%; box-sizing: border-box;
  padding: 8px 28px 8px 30px;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 13px;
}
.cs-input::placeholder { color: var(--text-dim); }
/* 搜索图标（伪元素，避免新增 DOM） */
.cs-box::before {
  content: "🔍"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font-size: 12px; opacity: .8; pointer-events: none;
}
.cs-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--text-dim); font-size: 13px; line-height: 1;
  padding: 4px; border-radius: 4px; user-select: none;
}
.cs-clear:hover { color: var(--text); background: rgba(255,255,255,.06); }
.cs-panel {
  margin-top: 4px;
  background: var(--panel-raised);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  max-height: 320px; overflow-y: auto;
}
.cs-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--border-light);
}
.cs-item:hover { background: rgba(56, 189, 248, .10); }
.cs-item.cs-active { background: rgba(56, 189, 248, .18); box-shadow: inset 3px 0 0 var(--primary); }
.cs-tag {
  font-size: 11px; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  border: 1px solid transparent; font-weight: 600;
}
.cs-tag-source { background: rgba(244,63,94,.18); color: #fda4af; border-color: rgba(244,63,94,.4); }
.cs-tag-user   { background: rgba(52,211,153,.18); color: #6ee7b7; border-color: rgba(52,211,153,.4); }
.cs-tag-junction { background: rgba(125,143,176,.2); color: #cbd5e1; border-color: rgba(125,143,176,.45); }
.cs-tag-pipe   { background: rgba(56,189,248,.18); color: #7dd3fc; border-color: rgba(56,189,248,.4); }
.cs-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-seq { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.cs-empty { padding: 12px; color: var(--text-dim); text-align: center; font-size: 12px; }
.cs-more { padding: 6px 10px; color: var(--text-dim); font-size: 11px; text-align: center; border-top: 1px dashed var(--border-light); }
.cs-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border-light); }
.cs-nav {
  background: transparent; border: 1px solid var(--border-light); color: var(--text);
  border-radius: 5px; padding: 3px 10px; cursor: pointer; font-size: 12px; font-family: var(--font-body);
}
.cs-nav:hover { background: rgba(56,189,248,.12); border-color: var(--primary); }
.cs-pos { color: var(--primary); font-size: 12px; font-weight: 600; min-width: 50px; text-align: center; }

/* ---- 搜索命中高亮：金色霓虹脉冲（优先级低于最不利环路红色） ---- */
.pipe-g.search-hit .pipe-vis {
  stroke: #fbbf24 !important; stroke-width: 6px !important;
  filter: drop-shadow(0 0 9px rgba(251, 191, 36, .95));
  animation: search-pulse 1s ease-in-out infinite;
}
.node-g.search-hit circle, .node-g.search-hit rect {
  stroke: #fbbf24 !important; stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 9px rgba(251, 191, 36, .95));
  animation: search-pulse 1s ease-in-out infinite;
}
@keyframes search-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(251, 191, 36, .55)); }
  50%      { filter: drop-shadow(0 0 13px rgba(251, 191, 36, 1)); }
}
.pipe-g.selected .pipe-vis {
  stroke: var(--accent); stroke-width: 5;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, .85));
}
.pipe-g.selected .pipe-hit { stroke: rgba(34, 211, 238, .12); }
.pipe-pending-near .pipe-vis { stroke: #67e8f9; filter: drop-shadow(0 0 4px rgba(103, 232, 249, .7)); }

/* ---- 最不利环路高亮：醒目红色霓虹（优先级高于选中/专题着色） ---- */
.pipe-g.pipe-critical .pipe-vis {
  stroke: #ff3b5c !important;
  stroke-width: 6px !important;
  filter: drop-shadow(0 0 6px rgba(255, 59, 92, .85));
  animation: critical-pulse 1.8s ease-in-out infinite;
}
.pipe-g.pipe-critical .pipe-arrow { stroke: #ff8fa3 !important; }
@keyframes critical-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 59, 92, .5)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 59, 92, 1)); }
}
.node-g.node-on-critical circle, .node-g.node-on-critical rect {
  stroke: #ff3b5c !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 6px rgba(255, 59, 92, .85));
}
.node-label-critical { fill: #ff5c78 !important; font-weight: 700; }

.pipe-arrow { stroke: #9fb4d8; stroke-width: 2; pointer-events: none; }
.pipe-label {
  font-size: 11px; fill: #c4d8f5; text-anchor: middle;
  paint-order: stroke; stroke: #060a13; stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none; user-select: none;
}

.node-g { cursor: pointer; }
.node-g.selected circle, .node-g.selected rect {
  stroke: var(--accent); stroke-width: 3.5;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, .9));
}
/* 热源：霓虹红，微弱辉光 */
.node-source rect {
  fill: rgba(244, 63, 94, .18); stroke: #f43f5e; stroke-width: 2; rx: 4;
  filter: drop-shadow(0 0 5px rgba(244, 63, 94, .55));
}
.node-icon { font-size: 12px; fill: #ff8fa3; font-weight: 700; user-select: none; pointer-events: none; }
/* 用户：霓虹蓝 */
.node-user rect {
  fill: rgba(56, 189, 248, .16); stroke: #38bdf8; stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, .5));
}
/* 节点：钢青色 */
.node-junction circle {
  fill: rgba(125, 143, 176, .2); stroke: #94a3b8; stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(148, 163, 184, .4));
}
.node-g.pending-from circle, .node-g.pending-from rect {
  stroke: #67e8f9; stroke-width: 4;
  filter: drop-shadow(0 0 7px rgba(103, 232, 249, .8));
}
.node-label {
  font-size: 11px; fill: #c4d8f5; text-anchor: middle;
  paint-order: stroke; stroke: #060a13; stroke-width: 3px; stroke-linejoin: round;
  user-select: none; pointer-events: none;
}
/* 专题着色：用户节点（资用压头/失调度）— 深底霓虹 */
.node-cold { fill: rgba(244, 63, 94, .25); stroke: #f43f5e; }
.node-warn { fill: rgba(251, 191, 36, .22); stroke: #fbbf24; }
.node-ok { fill: rgba(52, 211, 153, .22); stroke: #34d399; }

/* 专题着色：管段（青→品红渐进霓虹谱） */
.th-flow-1 { stroke: #22d3ee; } .th-flow-2 { stroke: #38bdf8; }
.th-flow-3 { stroke: #818cf8; } .th-flow-4 { stroke: #f59e0b; }
.th-flow-5 { stroke: #fb7185; } .th-flow-6 { stroke: #f43f5e; stroke-width: 4.5; }
.th-slope-1 { stroke: #22d3ee; } .th-slope-2 { stroke: #38bdf8; }
.th-slope-3 { stroke: #818cf8; } .th-slope-4 { stroke: #f59e0b; }
.th-slope-5 { stroke: #fb7185; } .th-slope-6 { stroke: #f43f5e; stroke-width: 4.5; }
.th-vel-1 { stroke: #22d3ee; } .th-vel-2 { stroke: #38bdf8; }
.th-vel-3 { stroke: #818cf8; } .th-vel-4 { stroke: #f59e0b; }
.th-vel-5 { stroke: #fb7185; } .th-vel-6 { stroke: #f43f5e; stroke-width: 4.5; }

/* ================= 表格（暗色数据网格） ================= */
.table-wrap { overflow-x: auto; margin-bottom: 12px; }
.hc-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.hc-table th {
  background: linear-gradient(180deg, rgba(21, 35, 64, .95), rgba(14, 23, 42, .95));
  color: #8fd8ff; font-weight: 700; letter-spacing: 1px;
  border: 1px solid var(--border-light); padding: 6px 8px; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
  text-shadow: 0 0 8px rgba(56, 189, 248, .3);
  box-shadow: inset 0 -1px 0 var(--border);
}
.hc-table td {
  border: 1px solid rgba(56, 189, 248, .1); padding: 4px 8px;
  text-align: center; white-space: nowrap;
  transition: background .12s ease;
}
.hc-table td:first-child { text-align: left; }
.hc-table tr:nth-child(even) td { background: rgba(17, 27, 48, .5); }
.hc-table tr:hover td { background: rgba(14, 116, 144, .16); }
.row-warn td { background: rgba(244, 63, 94, .13) !important; color: #ff8fa3; }
.row-off td { background: rgba(15, 23, 42, .55) !important; color: #55647e; text-decoration: line-through; }
.row-changed td { background: rgba(56, 189, 248, .12) !important; }

.cell-input {
  width: 70px; border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 4px; font-size: 12.5px; text-align: center;
  background: rgba(9, 15, 28, .92); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cell-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .2), 0 0 8px rgba(34, 211, 238, .3);
}
.cell-input:hover { border-color: rgba(56, 189, 248, .45); }

.ok { color: var(--ok); font-weight: 700; text-shadow: 0 0 8px rgba(52, 211, 153, .35); }
.warn { color: #ff8fa3; font-weight: 700; text-shadow: 0 0 8px rgba(244, 63, 94, .35); }

/* 标签：半透明霓虹底 */
.tag {
  display: inline-block; border-radius: 4px; padding: 1px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.tag-blue { background: rgba(56, 189, 248, .16); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, .35); }
.tag-green { background: rgba(52, 211, 153, .14); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, .35); }
.tag-orange { background: rgba(251, 191, 36, .13); color: #fcd34d; border: 1px solid rgba(251, 191, 36, .35); }
.tag-red { background: rgba(244, 63, 94, .14); color: #fda4af; border: 1px solid rgba(244, 63, 94, .4); }
.tag-gray { background: rgba(100, 116, 139, .18); color: #94a3b8; border: 1px solid rgba(100, 116, 139, .45); }

/* 诊断表·超压分析汇总条目（醒目红光） */
.diag-op-title { color: #ff8fa3; font-weight: 700; letter-spacing: .5px; text-shadow: 0 0 8px rgba(244, 63, 94, .45); }
.diag-op-msg { color: #ff8fa3; font-weight: 700; }
/* 诊断表·关断分析汇总条目（灰色醒目） */
.diag-off-title { color: #cbd5e1; font-weight: 700; letter-spacing: .5px; text-shadow: 0 0 8px rgba(148, 163, 184, .5); }
.diag-off-msg { color: #cbd5e1; font-weight: 700; }

/* 数据摘要卡：毛玻璃 + 霓虹左缘光带 */
.result-summary {
  font-size: 12.5px; color: var(--text-dim);
  background: rgba(15, 26, 48, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--primary);
  box-shadow: inset 2px 0 10px -4px rgba(56, 189, 248, .35);
  padding: 7px 11px; margin: 8px 0;
  border-radius: 0 6px 6px 0;
}
.empty-tip {
  color: var(--text-dim); font-size: 13px; text-align: center;
  padding: 38px 20px;
  background: rgba(13, 20, 36, .45);
  border: 1px dashed rgba(56, 189, 248, .25);
  border-radius: 8px; margin: 10px 0;
}
.panel-note {
  font-size: 12.5px; color: #7dd3fc;
  background: rgba(8, 47, 73, .35);
  border: 1px solid rgba(56, 189, 248, .2);
  border-left: 3px solid var(--primary);
  box-shadow: inset 2px 0 10px -4px rgba(56, 189, 248, .3);
  padding: 6px 10px; margin: 8px 0;
  border-radius: 0 6px 6px 0;
}
.pump-summary { max-width: 640px; margin-bottom: 12px; }

/* ================= 工况/工具条 ================= */
.scenario-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: rgba(15, 26, 48, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-light); border-radius: 8px; margin-bottom: 10px;
}
.bar-label { font-size: 12.5px; color: #b8cae6; white-space: nowrap; }
.load-ratio { font-weight: 700; color: var(--accent); text-shadow: 0 0 8px rgba(34, 211, 238, .4); }

/* ================= 水压图 / 泵曲线（暗色图表） ================= */
.gradient-host {
  background: linear-gradient(160deg, rgba(13, 20, 36, .85), rgba(8, 13, 24, .9));
  border: 1px solid var(--border-light); border-radius: 8px; padding: 7px;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, .05);
}
.gradient-chart { display: block; width: 100%; }
.g-grid { stroke: rgba(56, 189, 248, .13); stroke-width: 1; }
.g-tick { font-size: 10px; fill: var(--text-dim); }
.g-axis { font-size: 11px; fill: #b8cae6; }
.g-supply { fill: none; stroke: #ff5c7c; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(255, 92, 124, .5)); }
.g-return { fill: none; stroke: #38bdf8; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(56, 189, 248, .5)); }
.g-terrain { fill: none; stroke: #a3e635; stroke-width: 1.5; stroke-dasharray: 6 4; }
.g-static { stroke: #e879f9; stroke-width: 1; stroke-dasharray: 3 4; }
.g-static-text { font-size: 10px; fill: #f0abfc; }
.g-avail { stroke: #fbbf24; stroke-width: 1; }
.g-avail-text { font-size: 10px; fill: #fcd34d; }
.g-pt-supply { fill: #ff5c7c; }
.g-pt-return { fill: #38bdf8; }
.g-pt-terrain { fill: #a3e635; }
.g-node-name { font-size: 10px; fill: #b8cae6; }
.g-user-name { fill: var(--accent); font-weight: 700; }
.g-wp { fill: #ff5c7c; stroke: #060a13; stroke-width: 2; }
.g-wp-text { font-size: 11px; fill: #ff8fa3; font-weight: 700; }
.g-rated { fill: #34d399; stroke: #060a13; stroke-width: 1.5; }
.g-legend { font-size: 11px; fill: var(--text-dim); }
/* 供水边界（限定循环流量计算） */
.g-boundary { stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 6 3; }
.g-boundary-text { font-size: 11px; fill: #fcd34d; font-weight: 700; }
.g-supply-dim { fill: none; stroke: #ff5c7c; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.35; }
.g-return-dim { fill: none; stroke: #38bdf8; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.35; }
.g-unsupplied { fill: none; stroke: #ef4444; stroke-width: 2; }
/* 项目参数弹窗复选框 */
.prop-field-check { display: flex; align-items: center; padding: 4px 0; }

/* ---- 零流量元素高亮：紫色标识（管道/节点/用户） ---- */
/* 优先级低于最不利环路高亮（pipe-critical 用 !important，且二者实际不会同时出现） */
.pipe-g.pipe-zero-flow .pipe-vis {
  stroke: #a855f7 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, .7));
}
.pipe-g.pipe-zero-flow .pipe-arrow {
  stroke: #c084fc !important;
}
.node-g.node-zero-flow circle,
.node-g.node-zero-flow rect {
  fill: rgba(168, 85, 247, .18) !important;
  stroke: #a855f7 !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, .7));
}
.check-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.check-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.circ-flow-wrap { transition: opacity .2s; }

/* ================= 通知（暗色玻璃卡片 + 入场动效） ================= */
#notifyHost {
  position: fixed; top: 54px; right: 14px; z-index: 999;
  display: flex; flex-direction: column; gap: 8px; max-width: 420px;
}
.notify {
  padding: 10px 15px; border-radius: 8px; font-size: 13px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 14px rgba(56, 189, 248, .08);
  animation: slide-in .28s cubic-bezier(.2, .9, .3, 1.15);
  border-left: 3px solid;
  background: rgba(13, 20, 36, .88);
  color: var(--text);
}
.notify-info { border-left-color: var(--primary); color: #7dd3fc; }
.notify-ok { border-left-color: var(--ok); color: #6ee7b7; background: rgba(6, 42, 34, .85); }
.notify-warn { border-left-color: var(--warn); color: #fcd34d; background: rgba(49, 33, 6, .85); }
.notify-error { border-left-color: var(--danger); color: #fda4af; background: rgba(58, 12, 24, .85); }
.notify.fade { opacity: 0; transition: opacity .4s ease; }
@keyframes slide-in {
  from { transform: translateX(36px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ================= 滚动条（暗色 + 霓虹滑块） ================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(8, 13, 24, .8); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56, 189, 248, .35), rgba(14, 116, 144, .45));
  border-radius: 5px; border: 2px solid rgba(8, 13, 24, .8);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(56, 189, 248, .6), rgba(34, 211, 238, .55)); }

/* ================= 选中文本 ================= */
::selection { background: rgba(34, 211, 238, .3); color: #eaf6ff; }

/* ================= 打印（报告保持浅色可读） ================= */
@media print {
  .toolbar, .panel-split, .bottom-panel, .statusbar, .props-panel, #notifyHost { display: none !important; }
  html, body {
    background: #fff !important;
    color: #111 !important;
    background-attachment: scroll !important;
  }
  .canvas-panel, .main-area { background: #fff !important; }
  .node-label, .pipe-label { fill: #334155 !important; stroke: #fff !important; }
  .g-tick, .g-axis, .g-node-name, .g-legend { fill: #334155 !important; }
  .g-grid { stroke: #cbd5e1 !important; }
  .pipe-trunk { stroke: #475569 !important; }
  .pipe-dist { stroke: #94a3b8 !important; }
  .pipe-g.selected .pipe-vis, .node-g.selected circle, .node-g.selected rect { filter: none !important; }
  /* 打印时保留最不利环路红色标记（无辉光/动画） */
  .pipe-g.pipe-critical .pipe-vis { stroke: #d81b3f !important; animation: none !important; filter: none !important; }
  .node-g.node-on-critical circle, .node-g.node-on-critical rect { stroke: #d81b3f !important; filter: none !important; }
  .node-label-critical { fill: #d81b3f !important; }
}

/* ================= 响应式适配：不同分辨率下铺满可视区域 ================= */
@media (max-width: 1200px) {
  .brand-sub { display: none; }             /* 窄屏隐藏副标题，工具栏更紧凑 */
  .props-panel { flex-basis: 260px; }       /* 面板适度收窄，画布获得更多空间 */
}
@media (max-width: 900px) {
  .brand-name { display: none; }
  .props-panel { flex-basis: 220px; }
  .statusbar span:nth-child(5) { display: none; } /* 隐藏操作提示，保留模式/坐标/保存状态 */
  .modal-body .prop-box { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .toolbar-row { gap: 6px; padding: 4px 7px; }
  .btn { padding: 4px 8px; font-size: 12px; }
  .mode-btn { padding: 4px 8px; font-size: 12px; }
  .props-panel { flex-basis: 180px; }
  .bottom-panel { min-height: 90px; }
  .btn-primary { animation: none; }         /* 小屏关闭呼吸光晕，降低视觉负担 */
  .brand-logo { animation: none; }
}
/* 减少动效偏好：关闭动画，仅保留过渡 */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .brand-logo { animation: none !important; }
  .pipe-g.pipe-critical .pipe-vis { animation: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ================= 热源管理面板（多热源） ================= */
.modal-lg { width: min(1080px, calc(100vw - 48px)); }
.sm-table { margin-top: 4px; }
.sm-table .hc-table { font-size: 12.5px; }
.sm-table .hc-table th { white-space: nowrap; }
.sm-table .hc-table td { vertical-align: middle; white-space: nowrap; }
/* 停用热源行：置灰但不去除线（行内含可编辑输入框） */
.sm-table .row-off td { text-decoration: none; }
.sm-input {
  background: rgba(15, 23, 42, .8);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 3px 6px;
  font-size: 12.5px;
  font-family: inherit;
}
.sm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 6px rgba(34, 211, 238, .35); }
.sm-name { width: 130px; }
.sm-num  { width: 74px; text-align: right; }
.sm-seq  { display: inline-block; min-width: 16px; color: var(--text-dim); }
.sm-row-btns { display: inline-flex; gap: 6px; }