/* HVAC 变频一拖一动态仿真 —— 深色科技风 */
:root {
  --bg: #05080f;
  --page-bg:
    radial-gradient(1200px 600px at 70% -10%, rgba(34, 99, 168, 0.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(20, 120, 140, 0.12), transparent 60%),
    #05080f;
  --panel: rgba(10, 18, 34, 0.82);
  --panel-border: #16304d;
  --grid-line: rgba(34, 211, 238, 0.05);
  --accent: #22d3ee;
  --accent2: #60a5fa;
  --hot: #fb7185;
  --cold: #38bdf8;
  --warn: #fbbf24;
  --ok: #6ee7b7;
  --text: #cde3f5;
  --text-dim: #6b8aa8;
  --text-faint: #4b6f94;
  --input-bg: #0a1728;
  --input-border: #1e3a5c;
  --card-bg: rgba(10, 25, 45, 0.6);
  --card-border: #12283f;
  --num: #7dd3fc;
  --tbl-line: #1e3a5c;
  --nav-solid: #0b1728;
  --mono: "Consolas", "JetBrains Mono", monospace;
}

/* ---- 浅色主题 ---- */
html[data-theme="light"] {
  --bg: #eef2f7;
  --page-bg: linear-gradient(180deg, #f4f8fc, #e8eef6);
  --panel: rgba(255, 255, 255, 0.92);
  --panel-border: #c9d6e5;
  --grid-line: rgba(30, 60, 90, 0.05);
  --accent: #0369a1;
  --accent2: #2563eb;
  --hot: #dc2626;
  --cold: #0284c7;
  --warn: #b45309;
  --ok: #047857;
  --text: #16283c;
  --text-dim: #5b7188;
  --text-faint: #7d92a8;
  --input-bg: #ffffff;
  --input-border: #b6c6d8;
  --card-bg: #f6f9fc;
  --card-border: #dde7f0;
  --num: #075985;
  --tbl-line: #c9d6e5;
  --nav-solid: #ffffff;
}

/* ---- 高对比主题 ---- */
html[data-theme="contrast"] {
  --bg: #000000;
  --page-bg: #000000;
  --panel: #000000;
  --panel-border: #9aa7b8;
  --grid-line: rgba(255, 255, 255, 0.07);
  --accent: #00e5ff;
  --accent2: #66aaff;
  --hot: #ff6b6b;
  --cold: #5bc8ff;
  --warn: #ffd23f;
  --ok: #39ff9a;
  --text: #ffffff;
  --text-dim: #cfd8e3;
  --text-faint: #aab6c5;
  --input-bg: #000000;
  --input-border: #cfd8e3;
  --card-bg: #0a0a0a;
  --card-border: #9aa7b8;
  --num: #00e5ff;
  --tbl-line: #9aa7b8;
  --nav-solid: #000000;
}

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

html, body { height: 100%; }

body {
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  overflow-x: hidden;
  min-width: 1280px;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
}

#app { position: relative; z-index: 1; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ============ 头部 ============ */
header {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
header h1 {
  font-size: 17px; font-weight: 600; letter-spacing: 1px;
  background: linear-gradient(90deg, #7dd3fc, #22d3ee, #34d399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
header .sub { color: var(--text-dim); font-size: 11px; letter-spacing: 2px; white-space: nowrap; }

.mode-group { display: flex; gap: 6px; margin-left: auto; }
.mode-btn {
  padding: 7px 18px; border-radius: 8px; cursor: pointer;
  background: rgba(20, 36, 60, 0.8); color: var(--text-dim);
  border: 1px solid var(--panel-border);
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  transition: all .25s;
}
.mode-btn:hover { color: var(--text); border-color: var(--accent); }
.mode-btn.active { color: #04121c; text-shadow: none; }
.mode-btn.active[data-mode="cooling"] { background: linear-gradient(135deg, #38bdf8, #22d3ee); box-shadow: 0 0 14px rgba(56, 189, 248, .5); border-color: transparent; }
.mode-btn.active[data-mode="heating"] { background: linear-gradient(135deg, #fb923c, #f87171); box-shadow: 0 0 14px rgba(251, 146, 60, .5); border-color: transparent; }
.mode-btn.active[data-mode="defrost"] { background: linear-gradient(135deg, #a5f3fc, #67e8f9); box-shadow: 0 0 14px rgba(165, 243, 252, .5); border-color: transparent; }
.mode-btn.active[data-mode="oilreturn"] { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 0 14px rgba(251, 191, 36, .5); border-color: transparent; }
.mode-btn.pulse { animation: btnPulse 1s infinite; }
@keyframes btnPulse { 50% { box-shadow: 0 0 18px rgba(165, 243, 252, .9); border-color: #a5f3fc; color: #a5f3fc; } }

.ref-group { display: flex; gap: 4px; align-items: center; }
.ref-group .lbl { color: var(--text-dim); font-size: 11px; margin-right: 2px; }
.ref-btn {
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  background: rgba(20, 36, 60, 0.8); color: var(--text-dim);
  border: 1px solid var(--panel-border); font-size: 11px; font-family: var(--mono);
}
.ref-btn.active { color: #04121c; background: linear-gradient(135deg, #a78bfa, #818cf8); border-color: transparent; font-weight: 700; }

/* ============ 主布局 ============ */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 10px; align-items: start; }
.col-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.col-right { display: flex; flex-direction: column; gap: 10px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.panel .panel-title {
  font-size: 11px; letter-spacing: 3px; color: var(--accent);
  padding: 8px 14px 0; display: flex; align-items: center; gap: 8px;
}
.panel .panel-title::before { content: "▮"; font-size: 9px; }

/* ============ 状态栏 ============ */
#statusbar {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
  min-height: 38px; flex-wrap: wrap;
}
#procState {
  font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--accent);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
#procState .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
#procDesc { color: var(--text-dim); font-size: 12px; flex: 1; min-width: 200px; }
#seqProgress { display: none; align-items: center; gap: 8px; font-size: 11px; color: var(--warn); font-family: var(--mono); white-space: nowrap; }
#seqProgress .bar { width: 130px; height: 6px; background: #12233b; border-radius: 3px; overflow: hidden; }
#seqProgress .bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--warn)); transition: width .3s; }
#hints { display: flex; gap: 6px; flex-wrap: wrap; }
.hint-pill {
  font-size: 11px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, .5); color: var(--warn);
  background: rgba(251, 191, 36, .08); white-space: nowrap;
  animation: hintIn .3s;
}
.hint-pill.bad { border-color: rgba(251, 113, 133, .6); color: var(--hot); background: rgba(251, 113, 133, .08); }
@keyframes hintIn { from { opacity: 0; transform: translateY(4px); } }

/* ============ 场景 ============ */
#scenePanel { padding: 0; }
#scene { display: block; width: 100%; height: auto; }

.legend {
  position: absolute; left: 12px; top: 10px; display: flex; gap: 14px; align-items: center;
  font-size: 10px; color: var(--text-dim); background: rgba(5, 10, 20, .55);
  padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(30, 58, 95, .6);
  pointer-events: none;
}
.legend .li { display: flex; align-items: center; gap: 4px; }
.legend svg { display: inline-block; }

/* ============ 控制台 ============ */
#controls { padding: 10px 14px 14px; }
#controls .ctl-head { display: flex; align-items: center; margin-bottom: 8px; gap: 10px; }
#controls .ctl-head .title { font-size: 11px; letter-spacing: 3px; color: var(--accent); }
#controls .ctl-head .note { font-size: 10px; color: var(--text-dim); }
#controls .ctl-head { flex-wrap: wrap; }
#ctlNote { flex: 1; min-width: 140px; }
.run-mode { display: flex; align-items: center; gap: 8px; }
.run-mode .rm-lbl { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
#manualBtns { display: inline-flex; gap: 6px; }
#resetBtn {
  margin-left: auto; padding: 4px 14px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim); font-size: 11px;
}
#resetBtn:hover { color: var(--text); border-color: var(--accent); }

.sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; }
.slider-row { display: grid; grid-template-columns: 76px 1fr 74px; align-items: center; gap: 8px; }
.slider-row.locked { opacity: .45; pointer-events: none; }
.slider-row label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.slider-row .val { font-family: var(--mono); font-size: 12px; color: var(--accent); text-align: right; white-space: nowrap; }
.slider-row .val small { color: var(--text-dim); font-size: 9px; display: block; line-height: 1; }

input[type="range"] { -webkit-appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), #14273f var(--fill, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%;
  background: #dff6ff; border: 2px solid var(--accent);
  box-shadow: 0 0 8px rgba(34, 211, 238, .8);
}

/* ============ 压焓图 ============ */
#phPanel { padding-bottom: 8px; }
#phCanvas { display: block; width: 100%; margin-top: 4px; }

/* ============ 性能行 ============ */
#stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 12px 12px; }
.stat { text-align: center; background: rgba(10, 25, 45, .6); border: 1px solid #12283f; border-radius: 8px; padding: 6px 2px; }
.stat .k { font-size: 10px; color: var(--text-dim); }
.stat .v { font-family: var(--mono); font-size: 15px; color: #7dd3fc; margin-top: 2px; }
.stat .v small { font-size: 9px; color: var(--text-dim); }

/* ============ 测点表 ============ */
#sensorGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 12px 12px; }
.sensor-section { grid-column: 1 / -1; font-size: 10px; letter-spacing: 2px; color: var(--accent); margin-top: 6px; padding: 2px 0 1px; border-top: 1px solid #12283f; }
.sensor-section::before { content: "▸ "; }
.sensor { background: rgba(10, 25, 45, .6); border: 1px solid #12283f; border-radius: 8px; padding: 6px 8px; position: relative; }
.sensor .k { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.sensor .v { font-family: var(--mono); font-size: 16px; margin-top: 2px; display: flex; align-items: baseline; gap: 3px; transition: font-size .18s ease, color .3s ease; }
.sensor .v .num { transition: transform .18s ease; transform-origin: left center; }
.sensor .v .u { font-size: 9px; color: var(--text-dim); }
.sensor .trend { position: absolute; right: 7px; top: 7px; font-size: 10px; opacity: .9; }
.sensor .delta { font-size: 10px; font-family: var(--mono); margin-top: 3px; white-space: nowrap; min-height: 12px; line-height: 1.1; }
.sensor .delta .base { color: var(--text-faint); }
.sensor .delta .up { color: #ff6b6b; font-weight: 600; }
.sensor .delta .dn { color: #34d399; font-weight: 600; }
.sensor.p .v { color: #c4b5fd; }
.sensor.t .v { color: #7dd3fc; }
.sensor.sh .v { color: #6ee7b7; }
.sensor.air .v { color: #fda4af; }
/* 数值变化中：放大 + 变红 + 微光，稳定后自动恢复 */
.sensor.changing { border-color: rgba(255,90,103,.65); box-shadow: 0 0 10px rgba(255,90,103,.28); }
.sensor.changing .v { color: #ff5a67 !important; font-size: 21px; font-weight: 700; }
.sensor.changing .v .num { transform: scale(1.06); }
.sensor.changing .v .u { color: #ff9aa3; }
.sensor.changing .trend { color: #ff5a67 !important; }

/* ============ SVG 内元素 ============ */
text { user-select: none; }
.chip-bg { fill: rgba(6, 14, 26, 0.88); stroke: #1e3a5f; stroke-width: 1; rx: 5; }
.chip-t { font-size: 10px; fill: #6b8aa8; }
.chip-v { font-size: 12px; font-family: var(--mono); fill: #7dd3fc; font-weight: 600; }
/* 运行图图钉 */
.pin-mark { font-size: 21px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pin-mark:hover { font-size: 23px; }
.pin-lead { stroke: var(--accent); stroke-width: 1; opacity: .5; pointer-events: none; }
.pin-box { fill: rgba(6,14,26,.92); stroke: var(--accent); stroke-width: 1; cursor: move; }
.pin-ph { font-size: 11px; fill: #e0f2fe; font-weight: 700; cursor: move; }
.pin-t { font-size: 12px; font-family: var(--mono); fill: #7dd3fc; cursor: move; }
.pin-p { font-size: 12px; font-family: var(--mono); fill: #c4b5fd; cursor: move; }
.pin:hover .pin-box { stroke: #fff; fill: rgba(20,42,64,.96); }
.svg-label { font-size: 10px; fill: #6b8aa8; letter-spacing: 1px; }
.svg-label-s { font-size: 9px; fill: #55708c; }
.pipe-base { fill: none; stroke: #24405c; stroke-linejoin: round; stroke-linecap: round; }
.pipe-flow { fill: none; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.casing { fill: #0d1a2e; stroke: #2a4a6e; stroke-width: 1.6; }
.casing-inner { fill: #0a1425; stroke: #1c3450; stroke-width: 1; }
footer { text-align: center; color: #3d5670; font-size: 10px; padding-bottom: 4px; }