/* 飞龙冷链 · 智慧方舱监控平台 · 深色科技风 */
:root {
  --bg: #0b1220;
  --bg2: #0f1a2e;
  --panel: #111d33;
  --panel2: #16243f;
  --border: #1f305a;
  --text: #cfe3ff;
  --text-dim: #7d96c2;
  --accent: #2f8cff;
  --accent2: #00d4ff;
  --ok: #2ee6a8;
  --warn: #ffb84d;
  --err: #ff5c7a;
  --mono: "Consolas", "Courier New", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #12294a 0%, var(--bg) 55%);
  color: var(--text);
  font: 14px/1.5 "Microsoft YaHei", "Segoe UI", sans-serif;
}
.hidden { display: none !important; }

/* ---- 登录 ---- */
.login-view {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(47,140,255,.14), transparent 60%),
    radial-gradient(600px 400px at 85% 85%, rgba(0,212,255,.10), transparent 60%),
    var(--bg);
}
.login-card {
  width: 380px; padding: 44px 40px 32px; border-radius: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.45);
  text-align: center;
}
.login-logo {
  width: 260px; height: auto; margin: 0 auto 18px; border-radius: 0;
  display: block;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.login-logo img {
  width: 100%; height: auto; display: block; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 6px 18px rgba(47,140,255,.35));
}
.login-logo.logo-fallback::after { content: "飞龙冷链"; font: 800 20px var(--mono); color: var(--accent); }
.login-card h1 { font-size: 20px; letter-spacing: 1px; }
.login-sub { color: var(--text-dim); margin: 6px 0 26px; font-size: 12px; }
.login-form input {
  width: 100%; padding: 11px 14px; margin-bottom: 12px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(8,14,28,.7); color: var(--text);
  outline: none; font-size: 14px;
}
.login-form input:focus { border-color: var(--accent); }
.login-form button {
  width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: 6px; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.login-form button:hover { filter: brightness(1.1); }
.login-err { color: var(--err); font-size: 12px; min-height: 18px; margin-top: 8px; }

/* ---- 模态弹窗（强制改密等） ---- */
.modal-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 15, 25, 0.65);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  width: 380px; max-width: calc(100vw - 40px);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.modal-card h3 { margin: 0 0 6px; font-size: 16px; }
.modal-tip { color: var(--text-dim); font-size: 12px; margin: 0 0 14px; line-height: 1.6; }
.modal-card input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  margin-bottom: 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--input-bg, #111927);
  color: var(--text);
}
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-ghost {
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn-primary {
  padding: 8px 20px; border-radius: 6px; cursor: pointer;
  background: var(--accent, #2f81f7); color: #fff; border: none;
}
.btn-primary:hover { filter: brightness(1.1); }

/* ---- 布局 ---- */
.main-view { display: flex; height: 100vh; }
.sidebar {
  width: 190px; flex-shrink: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-right: 1px solid var(--border);
}
.brand { padding: 20px 18px; font-weight: 700; font-size: 16px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.sidebar nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
  padding: 11px 14px; border-radius: 8px; cursor: pointer; color: var(--text-dim);
  text-decoration: none; font-size: 14px; border-left: 3px solid transparent;
  transition: all .15s;
}
.sidebar nav a:hover { color: var(--text); background: rgba(47,140,255,.08); }
.sidebar nav a.active {
  color: var(--accent2); background: rgba(0,212,255,.10);
  border-left-color: var(--accent2); font-weight: 600;
}
.side-foot { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 6px; }
.conn-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 20px; font-size: 11px; }
.conn-badge.online { background: rgba(46,230,168,.12); color: var(--ok); }
.conn-badge.offline { background: rgba(255,92,122,.12); color: var(--err); }
.conn-badge.wait { background: rgba(90,106,143,.12); color: var(--text-dim); }
.conn-badge.warn { background: rgba(255,184,77,.12); color: var(--warn); }
.logout { cursor: pointer; color: var(--accent); }
.logout:hover { text-decoration: underline; }
.fullscreen-btn.active { color: var(--ok); font-weight: 600; }
.fullscreen-btn.active::before {
  content: "◱ "; color: var(--ok);
}
.fullscreen-btn::before { content: "⛶ "; }

.content { flex: 1; overflow-y: auto; padding: 22px 26px; }
.view { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.page-head h2 { font-size: 20px; letter-spacing: 1px; }
.page-meta { color: var(--text-dim); font-size: 12px; font-family: var(--mono); display: flex; gap: 14px; align-items: center; }

/* ---- 顶部时间/天气（无边框·融入底色·动态天气） ---- */
.wx-strip {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin: 0 0 16px; padding: 0;
}
.wx-time-block { display: flex; flex-direction: column; gap: 6px; }
.wx-time-num {
  font: 700 46px/1 "JetBrains Mono", "SF Mono", "Consolas", monospace;
  color: var(--accent2);
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(0,212,255,.45), 0 0 60px rgba(0,212,255,.18);
}
.wx-time-date {
  font-size: 12px;
  color: rgba(207,227,255,.62);
  letter-spacing: 2px;
  font-family: var(--mono);
}
.wx-cond-block { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
.wx-cond-main { display: inline-flex; align-items: center; gap: 12px; }
.wx-cond {
  font-size: 16px; color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  letter-spacing: .5px;
}
.wx-cond em { color: var(--accent2); font-style: normal; font-weight: 600; padding: 0 2px; }
.wx-cond.off { color: var(--text-dim); }
.wx-metrics {
  font-size: 11px; color: rgba(207,227,255,.55);
  font-family: var(--mono); letter-spacing: .5px;
}
.wx-metrics em { color: rgba(0,212,255,.85); font-style: normal; font-weight: 600; padding: 0 2px; }

/* 动态天气场景容器 */
.wx-scene {
  position: relative; display: inline-block;
  width: 66px; height: 42px; vertical-align: middle;
  overflow: hidden; flex: 0 0 auto;
}

/* ---- 晴：太阳 + 旋转光线 + 呼吸光晕 ---- */
.wx-rays {
  position: absolute; left: 23px; top: 8px; width: 20px; height: 20px;
  animation: wx-spin 22s linear infinite;
}
.wx-ray {
  position: absolute; left: 9px; top: -2px; width: 2px; height: 10px;
  border-radius: 1px; background: #ffd166;
}
.wx-rays .wx-ray.r1 { transform: rotate(0deg); }
.wx-rays .wx-ray.r2 { transform: rotate(45deg); }
.wx-rays .wx-ray.r3 { transform: rotate(90deg); }
.wx-rays .wx-ray.r4 { transform: rotate(135deg); }
.wx-rays .wx-ray.r5 { transform: rotate(180deg); }
.wx-rays .wx-ray.r6 { transform: rotate(225deg); }
.wx-rays .wx-ray.r7 { transform: rotate(270deg); }
.wx-rays .wx-ray.r8 { transform: rotate(315deg); }
@keyframes wx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wx-sun {
  position: absolute; left: 23px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9a8, #ffd166 60%, #f0a323);
  box-shadow: 0 0 14px 4px rgba(255,209,102,.45);
  animation: wx-breathe 3s ease-in-out infinite;
}
@keyframes wx-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px 3px rgba(255,209,102,.4); }
  50% { transform: scale(1.12); box-shadow: 0 0 20px 7px rgba(255,209,102,.65); }
}

/* ---- 多云 / 阴：云朵缓慢漂移 ---- */
.wx-cloud { position: absolute; border-radius: 50%; background: linear-gradient(180deg, #c6d6f0, #93aacf); opacity: .9; }
.wx-cloud::before, .wx-cloud::after {
  content: ""; position: absolute; border-radius: 50%; background: inherit;
}
.wx-cloud::before { width: 58%; height: 150%; left: 12%; top: -65%; }
.wx-cloud::after { width: 44%; height: 120%; left: 46%; top: -50%; }
.wx-cloud.c1 { left: -4px; top: 16px; width: 34px; height: 16px; animation: wx-drift 34s ease-in-out infinite; }
.wx-cloud.c2 { left: 28px; top: 10px; width: 24px; height: 12px; opacity: .75; animation: wx-drift 48s ease-in-out infinite reverse; }
@keyframes wx-drift {
  0% { transform: translateX(-6px); }
  50% { transform: translateX(14px); }
  100% { transform: translateX(-6px); }
}

/* ---- 雨：云 + 雨线下落 ---- */
.wx-drop {
  position: absolute; width: 2px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(95,208,255,0), rgba(95,208,255,.9));
  animation: wx-rain 1.1s linear infinite;
}
@keyframes wx-rain {
  0% { transform: translateY(-6px); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}

/* ---- 雪：雪花飘落 + 左右摇摆 ---- */
.wx-snow {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #eaf4ff; box-shadow: 0 0 4px rgba(255,255,255,.8);
  animation: wx-snow 2.8s linear infinite;
}
@keyframes wx-snow {
  0% { transform: translateY(-6px) translateX(0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translateY(16px) translateX(-5px); }
  100% { transform: translateY(40px) translateX(5px); opacity: 0; }
}

/* ---- 雾：雾气波浪漂移 ---- */
.wx-fog { position: absolute; height: 3px; border-radius: 3px; background: rgba(207,227,255,.45); animation: wx-fog 9s ease-in-out infinite; }
.wx-fog.f1 { width: 40px; left: 6px; top: 12px; }
.wx-fog.f2 { width: 30px; left: 20px; top: 21px; animation-delay: 1.6s; }
.wx-fog.f3 { width: 36px; left: 12px; top: 30px; animation-delay: 3.2s; }
@keyframes wx-fog {
  0%, 100% { transform: translateX(0); opacity: .3; }
  50% { transform: translateX(12px); opacity: .75; }
}

/* ---- 雷雨：闪电闪烁 ---- */
.wx-bolt {
  position: absolute; left: 27px; top: 6px; font-size: 20px; line-height: 1;
  color: #ffd166; filter: drop-shadow(0 0 6px rgba(255,209,102,.8));
  animation: wx-bolt 2.6s infinite;
}
@keyframes wx-bolt {
  0%, 82%, 100% { opacity: 0; }
  86% { opacity: 1; }
  90% { opacity: .15; }
  94% { opacity: 1; }
}

/* ---- 夜晚：月亮 + 星星闪烁 ---- */
.wx-moon {
  position: absolute; left: 24px; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #fffbe8, #dfe8ff);
  box-shadow: 0 0 14px 3px rgba(223,232,255,.5);
  animation: wx-breathe 4.5s ease-in-out infinite;
}
.wx-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px #fff;
  animation: wx-twinkle 2.4s ease-in-out infinite;
}
@keyframes wx-twinkle {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 720px) {
  .wx-strip { flex-wrap: wrap; gap: 10px; }
  .wx-time-num { font-size: 30px; }
  .wx-time-date { font-size: 10px; }
  .wx-cond { font-size: 13px; }
  .wx-scene { width: 56px; height: 38px; }
}

/* ---- 报表 Tab 切换 ---- */
.report-tabs { display: flex; gap: 10px; margin-bottom: 16px; padding: 4px; width: fit-content;
  background: rgba(8,14,28,.6); border: 1px solid var(--border); border-radius: 12px; }
.report-tab { padding: 8px 24px; border-radius: 9px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer; font-size: 13px; font-weight: 500;
  letter-spacing: .5px; transition: all .2s; }
.report-tab:hover { color: var(--text); background: rgba(47,140,255,.08); }
.report-tab.active { background: linear-gradient(135deg, var(--accent), #1b6df0);
  color: #fff; box-shadow: 0 4px 14px rgba(47,140,255,.35); }

/* ---- 报表查询表单 ---- */
.report-form { flex-wrap: wrap; align-items: center; gap: 10px;
  background: rgba(8,14,28,.35); border: 1px solid rgba(47,140,255,.15);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
/* ---- 自定义多选下拉 ---- */
.report-multi { position: relative; min-width: 230px; max-width: 300px; }
.report-multi-trigger { display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 36px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); font-size: 12px; cursor: pointer;
  transition: .2s; }
.report-multi-trigger:hover, .report-multi-trigger.open { border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47,140,255,.12); }
.report-multi-label { color: var(--text-dim); }
.report-multi-count { margin-left: auto; font-size: 11px; color: #9fc2ff;
  background: rgba(47,140,255,.15); border: 1px solid rgba(47,140,255,.35);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.report-multi-arrow { width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-top: 6px solid var(--text-dim); transition: .2s; }
.report-multi-trigger.open .report-multi-arrow { transform: rotate(180deg);
  border-top-color: var(--accent); }
.report-multi-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 280px; max-height: 380px; overflow: auto; background: #0d1830;
  border: 1px solid rgba(47,140,255,.35); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5); }
.report-multi-panel.hidden { display: none; }
.report-multi-head { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-dim);
  font-size: 12px; position: sticky; top: 0; background: #0d1830; z-index: 1; }
.report-multi-acts { display: flex; gap: 6px; }
.report-multi-acts button { background: rgba(47,140,255,.12);
  border: 1px solid rgba(47,140,255,.4); color: #9fc2ff; font-size: 11px; padding: 3px 11px;
  border-radius: 6px; cursor: pointer; transition: .15s; }
.report-multi-acts button:hover { background: var(--accent); color: #fff; }
.report-multi-list { padding: 6px; }
.report-multi-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text); transition: .15s; }
.report-multi-item:hover { background: rgba(47,140,255,.1); }
.report-multi-item input { accent-color: var(--accent); width: 15px; height: 15px;
  cursor: pointer; flex: none; }
.report-multi-item span { white-space: nowrap; }
.report-date-wrap { position: relative; display: inline-flex; align-items: center; }
.report-date-wrap input[type="datetime-local"] {
  padding: 7px 10px; padding-right: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); font-size: 13px; outline: none; }
.report-date-wrap input[type="datetime-local"]:focus { border-color: var(--accent); }
.report-date-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px;
  padding: 2px 5px; line-height: 1; }
.report-date-btn:hover { color: var(--accent); }

/* ---- 报表面板头（标题 + 一键导出） ---- */
.report-panel-head { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.report-panel-title { display: flex; align-items: center; gap: 8px; font-size: 15px;
  font-weight: 600; color: var(--text); letter-spacing: .5px; }
.rpt-dot { width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #2f8cff, #22d3ee);
  box-shadow: 0 0 8px rgba(47,140,255,.8); }
.rpt-dot-env { background: linear-gradient(135deg, #51cf66, #94d82d);
  box-shadow: 0 0 8px rgba(81,207,102,.8); }
.rpt-sub { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: 6px; }
.btn-export { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px;
  border-radius: 10px; border: 1px solid rgba(47,140,255,.5);
  background: linear-gradient(135deg, rgba(47,140,255,.2), rgba(34,211,238,.12));
  color: #cfe0ff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s;
  box-shadow: 0 2px 10px rgba(47,140,255,.15); }
.btn-export:hover { background: linear-gradient(135deg, var(--accent), #1b6df0);
  color: #fff; box-shadow: 0 4px 18px rgba(47,140,255,.4); transform: translateY(-1px); }
.btn-export .ico { font-size: 15px; }
.btn-mini.btn-primary { background: linear-gradient(135deg, var(--accent), #1b6df0);
  border: none; color: #fff; font-weight: 600;
  box-shadow: 0 3px 12px rgba(47,140,255,.3); }
.btn-mini.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ---- 报表图表与数据明细 ---- */
.report-charts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.report-single { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; }
.report-chart-bar { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; padding: 0 4px 8px; font-size: 12px; color: var(--text-dim);
  letter-spacing: 1px; }
.report-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.report-legend .lg-item { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text); }
.report-legend .lg-item i { width: 12px; height: 3px; border-radius: 2px; }
.report-single canvas.report-chart { width: 100%; height: 200px; }
.report-tables { display: flex; flex-direction: column; gap: 10px; }
.report-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.report-table-toggle { padding: 10px 14px; background: rgba(8,14,28,.5); color: var(--text-dim);
  font-size: 13px; cursor: pointer; user-select: none; display: flex; justify-content: space-between;
  transition: .2s; }
.report-table-toggle:hover { color: var(--text); background: rgba(8,14,28,.7); }
.report-table-body { max-height: 320px; overflow: auto; padding: 0 10px 10px; }
.report-table-body.hidden { display: none; }

/* ---- 面板 ---- */
.panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.panel-title { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; letter-spacing: 1px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-head .panel-title { margin-bottom: 0; }
.chart-range { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-btn { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text-dim); cursor: pointer; font-size: 12px; transition: all .15s; }
.cr-btn:hover { border-color: var(--accent2); color: var(--text); }
.cr-btn.active { border-color: var(--accent2); color: var(--accent2);
  background: rgba(0,212,255,.1); font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
canvas { width: 100%; height: 240px; display: block; cursor: crosshair; }
#cabin-charts canvas { height: 140px; }

/* ---- KPI ---- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi-row.kpi-row-second { margin-top: 6px; margin-bottom: 0; }
/* 数据大屏 KPI：强制上下两横排（每排 5 列），宽屏也不并成一行 */
#kpi-row { display: flex; flex-direction: column; gap: 14px; }
#kpi-row .kpi-row { grid-template-columns: repeat(5, 1fr); }
.kpi {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: .8; }
.kpi .k-label { color: var(--text-dim); font-size: 12px; }
.kpi .k-value { font: 700 26px var(--mono); margin-top: 6px; }
.kpi .k-unit { font-size: 12px; color: var(--text-dim); margin-left: 4px; }
.kpi .k-state { font-size: 12px; margin-top: 4px; color: var(--ok); }
.kpi.warn .k-state { color: var(--warn); }
.kpi.err .k-state { color: var(--err); }
/* 机组状态卡片：文字主值 + 状态配色（待机灰/运行绿/故障红） */
.kpi .k-value.k-state-val { font: 700 22px "Microsoft YaHei", sans-serif; letter-spacing: 2px; }
.kpi .k-value.k-state-val.st-run { color: var(--ok); text-shadow: 0 0 14px rgba(46,230,168,.35); }
.kpi .k-value.k-state-val.st-err { color: var(--err); animation: um-blink 1s steps(2) infinite; }
.kpi .k-value.k-state-val.st-idle { color: var(--text-dim); }
/* 设定值卡片：虚线边框 + 琥珀色 + "设定"徽标，与实时值明显区分 */
.kpi-set { border-style: dashed; border-color: rgba(255,184,77,.55); }
.kpi-set::before { background: linear-gradient(90deg, var(--warn), var(--accent2)); opacity: .9; }
.kpi-set .k-value { color: var(--warn); }
.k-set-badge { position: absolute; top: 8px; right: 10px; font-size: 10px; letter-spacing: 1px;
  color: var(--warn); border: 1px solid rgba(255,184,77,.55); border-radius: 10px; padding: 1px 7px;
  background: rgba(255,184,77,.08); }
.kpi-set .k-unit { color: rgba(255,184,77,.8); }
/* KPI 四态：未使用(灰虚线)/探头故障(琥珀)/通讯离线(红)，与默认正常态明显区分 */
.kpi.kpi-unused { border-style: dashed; border-color: rgba(90,106,143,.45); background: linear-gradient(180deg, rgba(90,106,143,.06), var(--panel)); }
.kpi.kpi-unused::before { background: linear-gradient(90deg, var(--text-dim), var(--border)); opacity: .5; }
.kpi.kpi-unused .k-value { color: var(--text-dim); }
.kpi.kpi-fault { border-color: rgba(255,184,77,.55); background: linear-gradient(180deg, rgba(255,184,77,.07), var(--panel)); }
.kpi.kpi-fault::before { background: linear-gradient(90deg, var(--warn), var(--accent2)); }
.kpi.kpi-fault .k-value { color: var(--warn); }
.kpi.kpi-offline { border-color: rgba(255,92,122,.6); background: linear-gradient(180deg, rgba(255,92,122,.07), var(--panel)); }
.kpi.kpi-offline::before { background: linear-gradient(90deg, var(--err), var(--accent2)); }
.kpi.kpi-offline .k-value { color: var(--err); }
/* 机组运行位图卡片：运行设备标签 */
.k-bits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.k-bit { font-size: 11px; padding: 2px 9px; border-radius: 20px; border: 1px solid rgba(46,230,168,.5); color: var(--ok); background: rgba(46,230,168,.1); }
.k-bit-off { border-color: rgba(90,106,143,.4); color: var(--text-dim); background: transparent; }

/* ---- 全部舱体卡片 ---- */
.cabin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cabin-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.cabin-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.cabin-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ok), var(--accent2)); opacity: .8; }
.cabin-card.disabled { opacity: .55; }
.cabin-card.disabled::before { background: linear-gradient(90deg, var(--text-dim), var(--border)); }
.cc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cc-name { font-weight: 700; font-size: 15px; }
.cc-addr { font-size: 11px; color: var(--text-dim); font-family: var(--mono); margin-left: 6px; }
.cc-status { font-size: 11px; padding: 2px 10px; border-radius: 20px; }
.cc-status.online { background: rgba(46,230,168,.12); color: var(--ok); }
.cc-status.offline { background: rgba(255,92,122,.12); color: var(--err); }
.cc-status.wait { background: rgba(255,184,77,.12); color: var(--warn); }
.cc-status.stop { background: rgba(125,150,194,.15); color: var(--text-dim); }
.cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.cc-item span { display: block; font-size: 11px; color: var(--text-dim); }
.cc-item b { font: 600 16px var(--mono); }
.cc-item b.q-ok { color: var(--text); }
.cc-item b.q-warn { color: var(--warn); }
.cc-item b.q-err { color: var(--err); }
.cc-item b.q-offline { color: var(--text-dim); }
.cc-item b.q-unused { color: var(--text-dim); }
/* 舱体卡片中的设定项：琥珀色标注 */
.cc-item.set span { color: rgba(255,184,77,.8); }
.cc-item.set b { color: var(--warn); }
.cc-item.set b.q-err { color: var(--err); }
.cc-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed rgba(31,48,90,.7); font-size: 12px; }
.cc-alerts { color: var(--text-dim); }
.cc-alerts-on { color: var(--err); font-weight: 600; }
.cc-mode { color: var(--text-dim); font-size: 11px; }
/* 舱体卡片机组状态迷你条 */
.cc-unit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.um-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--text-dim); padding: 2px 7px; border-radius: 20px;
  background: rgba(13,22,42,.7); border: 1px solid var(--border); transition: opacity .3s; }
.um-mini i { width: 7px; height: 7px; border-radius: 50%; background: #3a4a70; }
.um-mini.off { opacity: .55; }
.um-mini.on { color: var(--ok); border-color: rgba(46,230,168,.35); }
.um-mini.on i { background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: um-pulse 1.6s ease-in-out infinite; }
@keyframes um-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- 机组运行监测 ---- */
.um-head { gap: 12px; }
.um-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.um-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--text); }
.um-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent2)); }
.um-subtitle { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
.um-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.um-state-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  padding: 4px 14px 4px 10px; border-radius: 20px; letter-spacing: 1px; transition: all .3s; white-space: nowrap; }
.um-state-badge i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.um-mode-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  padding: 4px 14px 4px 10px; border-radius: 20px; letter-spacing: 1px; transition: all .3s; white-space: nowrap; }
.um-mode-badge i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.um-mode-badge.cool { background: rgba(0,212,255,.12); color: var(--accent2); box-shadow: 0 0 12px rgba(0,212,255,.16); }
.um-mode-badge.heat { background: rgba(255,184,77,.16); color: var(--warn); box-shadow: 0 0 12px rgba(255,184,77,.22); }
.um-mode-badge.heat i { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.um-state-badge.run { background: rgba(46,230,168,.14); color: var(--ok); box-shadow: 0 0 12px rgba(46,230,168,.2); }
.um-state-badge.idle { background: rgba(125,150,194,.14); color: var(--text-dim); }
.um-state-badge.idle i { box-shadow: none; }
.um-state-badge.err { background: rgba(255,92,122,.16); color: var(--err); animation: um-blink 1s steps(2) infinite; }
@keyframes um-blink { 50% { opacity: .35; } }
.um-run-h { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.um-body { display: flex; gap: 16px; align-items: stretch; }
.um-svg-wrap { flex: 1 1 62%; min-width: 0; border: 1px solid var(--border); border-radius: 10px;
  background:
    radial-gradient(700px 260px at 30% 20%, rgba(47,140,255,.09), rgba(8,14,28,.35)),
    linear-gradient(rgba(47,140,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,140,255,.045) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  padding: 10px 10px 4px; }
.um-svg { width: 100%; height: auto; display: block; }
.um-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 4px 4px; margin-top: 4px;
  border-top: 1px dashed rgba(31,48,90,.7); }
.um-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.um-legend-chip::before { content: ""; width: 14px; height: 3px; border-radius: 2px; }
.um-legend-chip.hp::before { background: #ff8c5a; }
.um-legend-chip.lp::before { background: #5ac8ff; }
.um-legend-chip.sp::before { background: #2ee6a8; }
.um-legend-chip.air::before { background: var(--accent2); }
.um-legend-chip.run::before { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.um-side { flex: 1 1 34%; min-width: 240px; display: flex; flex-direction: column; }
.um-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.um-sec-head + .um-sec-head { margin-top: 12px; }
.um-sec-title { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; border-left: 3px solid var(--accent); padding-left: 8px; }
.um-sec-count { font: 600 11px var(--mono); color: var(--ok); background: rgba(46,230,168,.1); padding: 1px 8px; border-radius: 10px; }
.um-sec-count.warn { color: var(--err); background: rgba(255,92,122,.12); }
.um-dev-list, .um-fault-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.um-item { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 5px 8px; border-radius: 8px;
  background: rgba(13,22,42,.7); border: 1px solid var(--border); transition: border-color .15s, background .15s; }
.um-item:hover { border-color: var(--accent); background: rgba(47,140,255,.07); }
.um-item i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.um-item span { flex: 1; color: var(--text-dim); }
.um-item b { font-weight: 600; font-size: 11px; }
.um-item.on { border-color: rgba(46,230,168,.35); }
.um-item.on i { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.um-item.on b { color: var(--ok); }
.um-item.off i { background: #3a4a70; }
.um-item.off b { color: var(--text-dim); }
.um-item.err { border-color: rgba(255,92,122,.5); }
.um-item.err i { background: var(--err); box-shadow: 0 0 7px var(--err); animation: um-blink 1s steps(2) infinite; }
.um-item.err b { color: var(--err); }
.um-ok-tip { font-size: 11px; color: var(--ok); padding: 10px; text-align: center;
  border: 1px dashed rgba(46,230,168,.3); border-radius: 8px; background: rgba(46,230,168,.05); grid-column: 1 / -1; }

/* ---- SVG 机组动态图 ---- */
.um-cabin-box { fill: rgba(8,14,28,.55); stroke: var(--border); stroke-dasharray: 6 5; stroke-width: 1.5; }
.um-cabin-in { fill: none; stroke: rgba(47,140,255,.16); stroke-width: 1; }
.um-shelf line { stroke: rgba(47,140,255,.10); stroke-width: 1; stroke-dasharray: 3 4; }
.um-tag { fill: var(--text-dim); font-size: 13px; letter-spacing: 4px; }
.um-pipe { stroke-width: 3; stroke-linecap: round; opacity: .35; transition: opacity .4s; }
.um-pipe.hp { stroke: #ff8c5a; }
.um-pipe.lp { stroke: #5ac8ff; }
.um-pipe.sp { stroke: #2ee6a8; }
.um-pipe.air { stroke: var(--accent2); stroke-width: 2.5; stroke-dasharray: 7 6; }
.um-panel.running .um-pipe { opacity: .95; stroke-dasharray: 10 8; animation: um-flow 1.1s linear infinite; }
.um-panel.running .um-pipe.lp { animation-duration: 1.4s; }
.um-panel.running .um-pipe.sp { animation-duration: 1.8s; }
.um-panel.running .um-pipe.air { animation-duration: 1s; }
@keyframes um-flow { to { stroke-dashoffset: -36; } }
.um-arrow { fill: var(--accent2); opacity: .75; }
.um-arrow.dim { opacity: .25; }
.um-panel.running .um-arrow.dim { opacity: .85; }
.um-coil { stroke: var(--text-dim); stroke-width: 2; opacity: .6; }
.um-dev { cursor: default; }
.um-dev .um-shape { fill: rgba(13,22,42,.75); stroke: var(--border); stroke-width: 1.6; transition: all .35s; }
.um-dev .um-lbl { fill: var(--text-dim); font-size: 11px; transition: fill .35s; }
.um-dev.off { opacity: .85; }
.um-dev.off .um-shape { fill: rgba(13,22,42,.45); }
.um-dev.off .um-fan { opacity: .35; }
.um-dev.off .um-spin-ring { opacity: 0; }
.um-dev.on .um-shape { stroke: var(--ok); fill: rgba(46,230,168,.10); filter: drop-shadow(0 0 6px rgba(46,230,168,.45)); }
.um-dev.on .um-lbl { fill: var(--ok); }
.um-spin-ring { fill: none; stroke: var(--accent2); stroke-width: 3; stroke-dasharray: 10 8; opacity: .85; transform-box: fill-box; transform-origin: center; }
.um-dev.on .um-spin-ring { animation: um-rotate 2.4s linear infinite; }
@keyframes um-rotate { to { transform: rotate(360deg); } }
.um-blade { fill: rgba(0,212,255,.75); }
.um-hub { fill: var(--text); }
.um-fan { transform-box: fill-box; transform-origin: center; }
.um-dev.on .um-fan { animation: um-rotate 1.1s linear infinite; }
.um-pump-icon { stroke: var(--text-dim); stroke-width: 2; }
.um-dev.on .um-pump-icon { stroke: var(--ok); }
.um-steam { stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.um-dev.on .um-steam { animation: um-steam 1.6s ease-in-out infinite; }
@keyframes um-steam { 0% { opacity: 0; transform: translateY(2px); } 50% { opacity: .8; } 100% { opacity: 0; transform: translateY(-6px); } }
.um-heat { stroke: var(--warn); stroke-width: 2.5; }
.um-heatwave { stroke: var(--warn); stroke-width: 2; stroke-linecap: round; opacity: .4; }
.um-dev.on .um-heatwave { animation: um-wave 1.3s ease-in-out infinite; }
@keyframes um-wave { 0%,100% { opacity: .2; } 50% { opacity: .95; } }
/* 加热器/蒸汽为线型图形，始终保持描边不填充 */
.um-heat, .um-steam { fill: none; }
.um-dev .um-shape.um-heat { fill: none; }

/* ---- 动态图故障位置报警 ---- */
.um-dev.fault .um-shape { stroke: var(--err); fill: rgba(255,92,122,.14); filter: drop-shadow(0 0 10px rgba(255,92,122,.55)); }
.um-dev.fault .um-spin-ring,
.um-dev.fault .um-fan,
.um-dev.fault .um-pump-icon { stroke: var(--err); }
.um-dev.fault .um-heat,
.um-dev.fault .um-heatwave,
.um-dev.fault .um-steam { stroke: var(--err); }
.um-dev.fault .um-lbl { fill: var(--err); font-weight: 700; }
.um-fault-ring { fill: none; stroke: var(--err); stroke-width: 2; stroke-dasharray: 7 5; opacity: .95; }
.um-dev.fault .um-fault-ring { animation: um-march .7s linear infinite; }
@keyframes um-march { to { stroke-dashoffset: -24; } }
.um-fb { pointer-events: none; opacity: 0; }
.um-dev.fault .um-fb { opacity: 1; animation: um-fb-pulse 1s steps(2, end) infinite; }
@keyframes um-fb-pulse { 50% { opacity: .45; } }
.um-fb-tri { fill: var(--err); stroke: rgba(255,255,255,.6); stroke-width: .6; }
.um-fb-mark { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; }
/* 管路故障联动（高压/低压） */
.um-panel .um-pipe.fault { stroke: var(--err); filter: drop-shadow(0 0 6px rgba(255,92,122,.7)); animation: um-flow 1.1s linear infinite, um-pipe-blink .8s steps(2, end) infinite; }
@keyframes um-pipe-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.um-legend-chip.fault::before { width: 8px; height: 8px; border-radius: 2px; background: var(--err); box-shadow: 0 0 6px var(--err); animation: um-fb-pulse 1s steps(2, end) infinite; }
/* ---- 动态图（制冷系统）样式 ---- */
.um-frame { fill: rgba(8,14,28,.55); stroke: var(--border); stroke-width: 1.6; filter: drop-shadow(0 0 20px rgba(60,120,220,.18)); }
.um-tag-top { fill: var(--text); font-size: 14px; font-weight: 700; letter-spacing: 6px; }
.um-pipe-faint { stroke: rgba(120,160,220,.18); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.um-cap-line { stroke: var(--text-dim); stroke-width: 1; opacity: .5; }
.um-cap-line2 { stroke: #ffd060; stroke-width: 1.6; }
.um-tank-line { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.um-valve-line { stroke: var(--ok); stroke-width: 1.2; opacity: .6; }

/* 顶部设备 */
.um-dev-static .um-shape { fill: rgba(20,30,52,.75); stroke: var(--border); stroke-width: 1.5; transition: all .35s; }
.um-dev-static.on .um-shape { stroke: var(--ok); fill: rgba(46,230,168,.10); }
.um-shape.um-valve { fill: rgba(15,25,45,.85); stroke: #5a7090; stroke-width: 1.4; }
.um-shape.um-valve-cap { fill: rgba(40,80,40,.85); stroke: #80e0a0; stroke-width: 1; }
.um-shape.um-tank { fill: rgba(230,235,245,.85); stroke: #6a7a90; stroke-width: 1.4; }
.um-shape.um-cooler { fill: rgba(13,22,42,.65); stroke: var(--border); stroke-width: 1.6; }
.um-cooler-inner { fill: rgba(0,0,0,.35); stroke: rgba(120,160,200,.18); stroke-width: 1; }

/* 盘管颜色 */
.um-coil.hp, .um-coil.red { fill: none; stroke: #ff7a40; stroke-width: 1.5; opacity: .8; }
.um-coil.lp, .um-coil.blue { fill: none; stroke: #5ab8ff; stroke-width: 1.5; opacity: .8; }
.um-panel.running .um-coil.hp, .um-panel.running .um-coil.red { animation: um-coil-glow .9s ease-in-out infinite alternate; }
.um-panel.running .um-coil.lp, .um-panel.running .um-coil.blue { animation: um-coil-glow 1.3s ease-in-out infinite alternate; }
@keyframes um-coil-glow { from { opacity: .55; } to { opacity: 1; } }

/* ===== 制热模式反转（四通阀吸合或下发制热指令 heat-mode） ===== */
/* 默认隐藏反向箭头（管路固定为制冷线路，制热仅反转流向，不改变线路连接） */
.um-arrow.rev { display: none; }
.um-ex-lbl[data-mode="heat"] { display: none; }
/* 制热时：隐藏正向箭头、显示反向箭头；换热器标签切换 */
.um-panel.heat-mode .um-arrow.fwd { display: none; }
.um-panel.heat-mode .um-arrow.rev { display: block; }
.um-panel.heat-mode .um-ex-lbl[data-mode="cool"] { display: none; }
.um-panel.heat-mode .um-ex-lbl[data-mode="heat"] { display: block; }
/* 制热时换热器角色互换：左侧变蒸发器（蓝）、右侧变冷凝器（红） */
.um-panel.heat-mode [data-ex="L"] .um-coil.red { stroke: #5ab8ff; }
.um-panel.heat-mode [data-ex="R"] .um-coil.blue { stroke: #ff7a40; }
/* 制热时底部排/回气颜色互换：排气管（左换热器→压缩机）变低压蓝，回气管（压缩机→右换热器）变高压红 */
.um-panel.heat-mode .um-pipe.exh-line { stroke: #5ac8ff; }
.um-panel.heat-mode .um-pipe.ret-line { stroke: #ff8c5a; }
/* 制热时顶部管路颜色重映射：右侧换热器→膨胀阀为高压液(红)，膨胀阀→左侧换热器为低压(蓝) */
.um-panel.heat-mode .um-pipe.flow-top-c { stroke: #ff8c5a; }
.um-panel.heat-mode .um-pipe.flow-top-a,
.um-panel.heat-mode .um-pipe.flow-top-b { stroke: #5ac8ff; }
/* 制热时四通阀高亮提示 */
.um-panel.heat-mode [data-name="四通阀"] .um-shape { stroke: var(--warn); fill: rgba(255,184,77,.14); filter: drop-shadow(0 0 6px rgba(255,184,77,.45)); }

/* 压缩机 */
.um-shape.um-comp-body { fill: url(#comp-grad); stroke: #4070c8; stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(40,120,220,.35)); }
.um-shape.um-comp-shine { fill: url(#comp-shine); stroke: none; opacity: .55; }
.um-shape.um-comp-indicator { fill: rgba(20,40,80,.55); stroke: var(--border); stroke-width: 1.3; }
.um-lbl-in { fill: #e8f0ff; font-size: 13px; font-weight: 600; }
.um-shape.um-capacitor { fill: rgba(30,40,60,.85); stroke: #ffd060; stroke-width: 1.4; }
.um-panel.running .um-shape.um-comp-body { animation: um-pulse-comp 2.4s ease-in-out infinite; }
@keyframes um-pulse-comp { 0%, 100% { filter: drop-shadow(0 0 8px rgba(40,120,220,.35)); } 50% { filter: drop-shadow(0 0 14px rgba(40,180,255,.65)); } }

/* 高压储液器 */
.um-shape.um-receiver { fill: rgba(15,25,42,.85); stroke: #6080a8; stroke-width: 1.4; }
.um-panel.running .um-shape.um-receiver { stroke: var(--ok); }

/* 视液镜 */
.um-shape.um-sight { fill: rgba(120,220,180,.55); stroke: var(--ok); stroke-width: 1.4; }
.um-sight-inner { fill: rgba(255,255,255,.65); stroke: none; }
.um-panel.running .um-shape.um-sight { animation: um-sight-blink 1.5s ease-in-out infinite; }
@keyframes um-sight-blink { 0%, 100% { opacity: .8; } 50% { opacity: 1; filter: drop-shadow(0 0 6px var(--ok)); } }

/* 标签框/状态框 */
.um-label-rect { fill: rgba(9,16,32,.78); stroke: #5a7aa8; stroke-width: 1.2; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.um-label-title { fill: var(--text); font-size: 11px; letter-spacing: 1px; }
.um-label-value { fill: #7df3d4; font-size: 14px; font-weight: 700; font-family: var(--mono); letter-spacing: .5px; }
.um-label-value[data-unit="℃"] { fill: #ffd08a; }
.um-status-rect { fill: rgba(18,28,50,.85); stroke: #5a7aa8; stroke-width: 1.2; }
.um-status-rect-sm { fill: rgba(20,30,52,.75); stroke: #4a5e80; stroke-width: 1; }
.um-status-text { fill: var(--text); font-size: 11px; letter-spacing: 1px; }
.um-status-text-small { fill: var(--text-dim); font-size: 10px; }
.um-status-text-sm { fill: var(--text); font-size: 11px; }
.um-state-dot { fill: var(--ok); stroke: rgba(255,255,255,.5); stroke-width: 1; }
.um-panel.running .um-state-dot { animation: um-pulse 1.2s ease-in-out infinite; }

/* 阀件 */
.um-shape.um-valve-small { fill: rgba(15,25,45,.85); stroke: var(--ok); stroke-width: 1.2; }
.um-dev.off .um-shape.um-valve-small { stroke: var(--text-dim); }
.um-lbl-tiny { fill: var(--text-dim); font-size: 9px; letter-spacing: 0; }

/* 加热器 */
.um-shape.um-heater { fill: none; stroke: var(--warn); stroke-width: 2; }
.um-shape.um-heater-sm { fill: none; stroke: var(--warn); stroke-width: 1.8; }
.um-light-halo { stroke: var(--warn); stroke-width: 1; opacity: .4; }
.um-dev.on .um-light-halo { opacity: 1; animation: um-pulse 1.2s ease-in-out infinite; }

/* 数据面板（右侧） */
.um-data-rect { fill: rgba(10,18,32,.88); stroke: #3a4a6a; stroke-width: 1.2; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.um-data-accent { stroke: none; }
.um-data-accent.c-cyan { fill: #2fd8c8; }
.um-data-accent.c-amber { fill: #ffb45e; }
.um-data-accent.c-violet { fill: #b18cff; }
.um-data-title { fill: var(--text); font-size: 12px; letter-spacing: 1px; }
.um-data-value { fill: #7df3d4; font-size: 20px; font-weight: 700; font-family: var(--mono); letter-spacing: .5px; }
.um-panel.running .um-data-value { animation: um-data-breathe 2.6s ease-in-out infinite; }
@keyframes um-data-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.um-data-line { stroke: var(--border); stroke-width: 1; }

/* 库内送风状态框（库体小标识） */
.um-coil-group rect { transition: opacity .3s; }
.um-comp-overlay .um-shape { transition: all .3s; }

/* ---- 表格 ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(31,48,90,.6); }
.data-table th { color: var(--text-dim); font-weight: 600; background: rgba(8,14,28,.4); white-space: nowrap; }
.data-table tr:hover td { background: rgba(47,140,255,.06); }
.data-table td.mono { font-family: var(--mono); }
.q-ok { color: var(--ok); }
.q-fault { color: var(--warn); }   /* 探头故障：琥珀色，与通讯离线(红)区分 */
.q-offline { color: var(--err); }
.q-unused { color: var(--text-dim); }
/* 命令三档回执标签：effective 已生效 / verified 回读一致 / returned 已下发 */
.v-eff { color: var(--ok); font-weight: 600; }
.v-ver { color: var(--warn); }
.v-ret { color: var(--text-dim); }

/* ---- 告警 ---- */
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: rgba(8,14,28,.4); border-left: 3px solid var(--warn); }
.alert-item.error { border-left-color: var(--err); }
.alert-item .a-lv { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.a-lv.warning { background: rgba(255,184,77,.15); color: var(--warn); }
.a-lv.error { background: rgba(255,92,122,.15); color: var(--err); }
.a-lv.critical { background: rgba(255,61,61,.2); color: #ff4d4f; font-weight: 600; }
.a-lv.info { background: rgba(46,230,168,.15); color: var(--ok); }
.alert-item .a-msg { flex: 1; }
.alert-item .a-time { color: var(--text-dim); font-size: 11px; font-family: var(--mono); }
.btn-mini { padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; font-size: 12px; }
.btn-mini:hover { border-color: var(--accent); }
.chk { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }

/* ---- 控制 ---- */
.ctrl-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ctrl-form label { color: var(--text-dim); font-size: 13px; }
.ctrl-form select, .ctrl-form input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); outline: none; font-size: 13px; min-width: 180px;
}
.ctrl-form select:focus, .ctrl-form input:focus { border-color: var(--accent); }
.ctrl-value-wrap { min-width: 180px; }

/* ---- 复合参数命令：周期加湿等 ---- */
.ctrl-fieldset {
  display: inline-flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid var(--border);
}
.ctrl-presets { display: flex; align-items: center; gap: 8px; }
.ctrl-presets::before {
  content: "快捷预设"; color: var(--text-dim); font-size: 12px; margin-right: 4px;
}
.ctrl-preset {
  padding: 4px 10px; border-radius: 12px; cursor: pointer; font-size: 12px;
  background: transparent; color: var(--text-dim); border: 1px solid var(--border);
  transition: all .15s;
}
.ctrl-preset:hover {
  color: var(--accent2); border-color: var(--accent2);
  background: rgba(0, 212, 255, 0.08);
}
.ctrl-fields-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctrl-field {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: help; padding: 4px 8px; border-radius: 6px;
  transition: background .15s;
}
.ctrl-field:hover { background: rgba(47, 140, 255, 0.08); }
.ctrl-field-label { color: var(--text); font-weight: 600; font-size: 13px; }
.ctrl-field input[type="number"] {
  width: 64px; min-width: auto; padding: 6px 8px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.ctrl-field-unit { color: var(--text-dim); font-size: 12px; }
.ctrl-field-sep {
  color: var(--text-dim); font-size: 14px; padding: 0 2px; opacity: .6;
}

/* ---- 控制中心 · 手动位开关组 ---- */
.manual-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.manual-chip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(8,14,28,.55); border: 1px solid var(--border);
  color: var(--text); transition: all .18s; text-align: left;
}
.manual-chip:hover { border-color: var(--accent2); }
.manual-chip-name { font-size: 13px; font-weight: 600; }
.manual-chip-state {
  font-size: 12px; padding: 2px 8px; border-radius: 10px;
  background: rgba(125,150,194,.14); color: var(--text-dim);
}
.manual-chip.on {
  border-color: var(--ok); background: rgba(46,230,168,.10);
  box-shadow: 0 0 0 1px rgba(46,230,168,.35) inset;
}
.manual-chip.on .manual-chip-state {
  background: rgba(46,230,168,.18); color: var(--ok);
}
.manual-chip:disabled, .manual-chip.disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ---- 控制中心 · 参数设置分组卡片 ---- */
.param-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
.param-card {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, rgba(22,36,63,.55), rgba(17,29,51,.75));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px 12px;
  transition: border-color .18s;
}
.param-card:hover { border-color: #2b4579; }
.param-card-restart {
  border-left: 3px solid var(--warn);
  background: linear-gradient(180deg, rgba(63,50,22,.55), rgba(51,41,17,.75));
}
.param-card-head { display: flex; flex-direction: column; gap: 2px; }
.param-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.param-card-sub { font-size: 12px; color: var(--text-dim); }
.badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  letter-spacing: .5px;
}
.badge-live { background: rgba(46,230,168,.14); color: var(--ok); }
.badge-restart { background: rgba(255,184,77,.14); color: var(--warn); }
.badge-mixed { background: rgba(0,212,255,.14); color: var(--accent2); }
.param-card-body {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.param-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; border-bottom: 1px dashed rgba(31,48,90,.5);
}
.param-row:last-child { border-bottom: none; }
.param-row-label { flex: 1; font-size: 13px; color: var(--text); }
.param-row input[type="number"] {
  width: 74px; min-width: 74px; padding: 6px 8px; text-align: right;
  border-radius: 7px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); outline: none;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.param-row select {
  width: 96px; min-width: 96px; padding: 6px 6px;
  border-radius: 7px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); outline: none; font-size: 13px;
}
.param-row input:focus, .param-row select:focus { border-color: var(--accent); }
.param-row-unit { color: var(--text-dim); font-size: 12px; width: 22px; }
.param-row-tag {
  font-size: 10px; color: var(--warn); padding: 1px 6px;
  border: 1px solid rgba(255,184,77,.4); border-radius: 8px; white-space: nowrap;
}
.param-composite { display: flex; flex-direction: column; gap: 6px; }
.param-composite-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.param-preset-chip {
  padding: 3px 10px; border-radius: 10px; cursor: pointer; font-size: 12px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); transition: all .15s;
}
.param-preset-chip:hover {
  color: var(--accent2); border-color: var(--accent2);
  background: rgba(0,212,255,.08);
}
.param-composite-row { display: flex; align-items: center; gap: 8px; }
.param-composite-cell {
  display: inline-flex; align-items: center; gap: 5px; cursor: help;
  padding: 4px 6px; border-radius: 6px; transition: background .15s;
}
.param-composite-cell:hover { background: rgba(47,140,255,.08); }
.param-composite-cell span:first-child { font-size: 12px; color: var(--text); font-weight: 600; }
.param-composite-cell input[type="number"] {
  width: 62px; min-width: 62px; padding: 5px 6px; text-align: right;
  border-radius: 6px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); outline: none;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.param-composite-cell input:focus { border-color: var(--accent); }
.param-card-foot {
  display: flex; justify-content: flex-end; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(31,48,90,.6);
}
.btn-param-send {
  padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: filter .15s;
}
.btn-param-send:hover { filter: brightness(1.12); }
.btn-param-send:disabled { filter: grayscale(.6); cursor: not-allowed; }
.param-result {
  display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
  font-size: 12px;
}
.param-result-title { font-weight: 600; padding: 4px 8px; border-radius: 6px; }
.param-result-title.ok { background: rgba(46,230,168,.10); color: var(--ok); }
.param-result-title.fail { background: rgba(255,92,122,.10); color: var(--err); }
.param-result-line {
  display: flex; gap: 8px; align-items: center;
  padding: 2px 8px; border-radius: 6px;
}
.param-result-line.ok { color: var(--ok); }
.param-result-line.fail { color: var(--err); }
.param-result-cmd { color: var(--text-dim); min-width: 120px; }
.panel-sub { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-left: 8px; }

.btn-primary {
  padding: 9px 22px; border: 0; border-radius: 8px; cursor: pointer;
  font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { filter: grayscale(.6); cursor: not-allowed; }
.panel-target { border-color: var(--accent); background: linear-gradient(180deg, rgba(47,140,255,.08), var(--panel)); }
.panel-title-action { display: flex; justify-content: space-between; align-items: center; }
.btn-link {
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 12px;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
  transition: all .15s;
}
.btn-link:hover { background: rgba(47,140,255,.12); }
.ctrl-cabin-lg { min-width: 260px; }
.cabin-hint {
  font-size: 12px; color: var(--warn); padding: 6px 10px; border-radius: 6px;
  background: rgba(255,184,77,.10); border: 1px solid rgba(255,184,77,.25);
}
.ctrl-params-hint {
  font-size: 12px; color: var(--text-dim); padding: 20px 10px; text-align: center;
  border: 1px dashed var(--border); border-radius: 8px;
}
.ctrl-note { color: var(--text-dim); font-size: 12px; margin-top: 12px; }
.ctrl-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: rgba(8,14,28,.5); white-space: pre-wrap; }
.ctrl-result.ok { color: var(--ok); border-left: 3px solid var(--ok); }
.ctrl-result.fail { color: var(--err); border-left: 3px solid var(--err); }

/* ---- 全局 toast 浮层（跨面板可见） ---- */
#toast-box {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast-item {
  max-width: min(520px, calc(100vw - 40px));
  padding: 10px 18px; border-radius: 8px; font-size: 13px;
  background: var(--panel2); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: toast-in .2s ease;
}
.toast-item.ok { color: var(--ok); border-left: 3px solid var(--ok); }
.toast-item.fail { color: var(--err); border-left: 3px solid var(--err); }
.toast-item.info { color: var(--accent2); border-left: 3px solid var(--accent2); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

/* ---- 设置 ---- */
.sys-status { font-size: 13px; line-height: 2; }
.sys-status b { color: var(--accent2); }
.sys-status .dim { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.sys-status .warn { color: var(--warn); font-size: 12px; }
.sys-status .q-ok { color: var(--ok); }
.sys-status .q-offline { color: var(--err); }
.sys-sub { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.panel-title.sub { margin-top: 14px; margin-bottom: 6px; }
.backup-tip { font-size: 12px; color: var(--text-dim); line-height: 30px; }
.btn-mini.danger { border-color: rgba(255,92,122,.45); color: var(--err); }
.btn-mini.danger:hover { border-color: var(--err); background: rgba(255,92,122,.1); }
.btn-mini:disabled { opacity: .5; cursor: not-allowed; }
.cabin-form { display: flex; gap: 8px; margin-bottom: 12px; }
.cabin-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(8,14,28,.7); color: var(--text); outline: none; flex: 1; }
.cabin-form input:focus { border-color: var(--accent); }
.scan-result { margin: 6px 0 10px; }
.scan-addr-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.scan-addr-btn {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--accent); cursor: pointer; font-size: 13px; min-width: 44px;
}
.scan-addr-btn:hover { border-color: var(--accent); background: rgba(64,158,255,.12); }
.batch-addr-list { max-height: 180px; overflow-y: auto; margin: 8px 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.batch-addr-item { display: flex; gap: 8px; align-items: center; padding: 4px 2px; font-size: 13px; color: var(--text); }
.batch-addr-item input { accent-color: var(--accent); }
.modal-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.mini-select, .mini-input {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); outline: none; font-size: 13px;
}
.mini-select:focus, .mini-input:focus { border-color: var(--accent); }
.mini-input { flex: 1; max-width: 180px; }

/* ---- 天气位置设置 ---- */
.wx-city-results { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; min-height: 26px; }
.wx-city-item { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(8,14,28,.7); color: var(--text); cursor: pointer;
  font-size: 12px; text-align: left; transition: all .15s; }
.wx-city-item:hover { border-color: var(--accent); color: var(--accent); }
.wx-city-item.active { border-color: var(--accent); background: rgba(46,166,255,.14); color: var(--accent); }
.wx-city-item em { color: var(--text-dim); font-style: normal; font-family: var(--mono); font-size: 11px; }
.wx-city-item.active em { color: var(--accent); }
.wx-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: 12px;
  color: var(--text-dim); white-space: nowrap; }

/* ---- 仓内实时监控（预留模块） ---- */
.cam-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 20px;
  border: 1px solid rgba(0,212,255,.35); color: var(--accent2);
  font-size: 11px; letter-spacing: .5px; white-space: nowrap;
  background: rgba(0,212,255,.06);
}
.cam-badge::before { content: "●"; font-size: 8px; }
.cam-status { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.cam-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px; animation: fade .3s ease;
}
.cam-cell {
  position: relative; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #101a2e 0%, #060b16 70%);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9; min-height: 150px;
}
.cam-cell:hover { border-color: rgba(0,212,255,.45); }
.cam-cell img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.cam-cell.lost img { opacity: .2; filter: saturate(.3); }
.cam-cell .cam-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px;
}
.cam-cell .cam-placeholder .cam-ic {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px dashed rgba(125,150,194,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: rgba(125,150,194,.7); background: rgba(125,150,194,.05);
}
.cam-cell .cam-placeholder .ph-title { color: var(--text); font-size: 13px; }
.cam-cell .cam-placeholder .ph-sub { font-size: 11px; max-width: 260px; line-height: 1.6; }
.cam-cell .cam-state {
  position: absolute; left: 8px; top: 8px; display: inline-flex;
  align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px;
  background: rgba(6,11,22,.72); border: 1px solid rgba(125,150,194,.3);
  font-size: 11px; color: var(--text-dim); z-index: 2; font-family: var(--mono);
}
.cam-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; }
.cam-cell.online .cam-dot {
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: cam-breathe 2.2s ease-in-out infinite;
}

/* ================= 打印：实时点位数据表 PDF ================= */
#print-points { display: none; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  html, body { background: #fff !important; height: auto !important; }
  body > *:not(#print-points) { display: none !important; }
  #print-points {
    display: block !important;
    color: #111;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  }
  #print-points h1 {
    font-size: 20px; margin: 0 0 6px; color: #000;
    border-bottom: 2px solid #2f8cff; padding-bottom: 8px;
  }
  #print-points .pp-meta { font-size: 12px; color: #444; margin: 0 0 12px; }
  #print-points .pp-table {
    width: 100%; border-collapse: collapse; font-size: 12px; color: #111;
  }
  #print-points .pp-table th, #print-points .pp-table td {
    border: 1px solid #bbb; padding: 4px 7px; text-align: left;
  }
  #print-points .pp-table th {
    background: #eef3fa !important; color: #111; font-weight: 700;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #print-points .pp-table tr { break-inside: avoid; page-break-inside: avoid; }
  #print-points .pp-table tr.pg td {
    background: #dce8f7 !important; font-weight: 700;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
.cam-cell.offline .cam-dot { background: var(--err); box-shadow: 0 0 8px var(--err); }
.cam-cell.noconfig .cam-dot { background: var(--text-dim); }
.cam-cell .cam-label {
  position: absolute; right: 8px; bottom: 8px; left: 8px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(6,11,22,.6); color: var(--text);
  font-size: 11px; font-family: var(--mono); letter-spacing: .3px;
}
.cam-cell .cam-label .ch-name { color: var(--accent2); }
@keyframes cam-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 响应式 ---- */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .content { padding: 16px 14px; }
  .um-body { flex-direction: column; }
  .um-side { min-width: 0; }
}
@media (max-width: 720px) {
  .sidebar { width: 64px; }
  .brand span:not(.brand-dot), .sidebar nav a { font-size: 12px; padding: 10px 8px; text-align: center; }
  .brand { justify-content: center; padding: 16px 6px; }
  .side-foot { padding: 10px 6px; align-items: center; }
  .conn-badge { font-size: 10px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  #kpi-row .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .cabin-grid { grid-template-columns: 1fr 1fr; }
  .cam-grid { grid-template-columns: 1fr; }
  canvas { height: 190px; }
  .cabin-form { flex-wrap: wrap; }
  .page-head { flex-direction: column; gap: 8px; }
}