:root {
  color-scheme: dark;
  --bg: #06141a;
  --bg-deep: #030d11;
  --panel: #0a222b;
  --panel-2: #0c2a34;
  --panel-3: #102f39;
  --line: #1a4a57;
  --line-soft: rgba(94, 183, 195, 0.18);
  --text: #ecf7f8;
  --muted: #88a6ad;
  --faint: #54737b;
  --cyan: #4fd0d2;
  --cyan-strong: #63f0e6;
  --green: #4de0a0;
  --amber: #f2b84b;
  --orange: #ff8b3d;
  --red: #ff6969;
  --blue: #4b8eff;
  --hot: #ff6c65;
  --return: #f0b33c;
  --cold: #4f91ff;
  --recirc: #f0b33c;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg-deep); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #0e3039 0, var(--bg) 37%, var(--bg-deep) 100%); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(285px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 10px clamp(14px, 2vw, 34px);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(3, 15, 19, 0.94);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; min-width: 0; }
.brand-logos { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.brand-logo { display: block; width: auto; height: 34px; object-fit: contain; border-radius: 5px; background: #fff; }
.brand-logo--engineering { max-width: 106px; }
.brand-logo--iot { max-width: 172px; padding: 2px 6px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand-copy strong { font-size: 0.92rem; letter-spacing: 0.02em; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: 0.7rem; }

.main-nav { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(12, 42, 52, 0.55); }
.nav-button { border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 9px 13px; cursor: pointer; font-size: 0.79rem; transition: 160ms ease; }
.nav-button:hover { color: var(--text); background: rgba(79, 208, 210, 0.08); }
.nav-button.is-active { color: #021215; background: var(--cyan); font-weight: 800; }

.header-status { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.session-user { color: var(--muted); font-size: 0.67rem; white-space: nowrap; }
.logout-button { border: 1px solid var(--line); border-radius: 7px; background: #09212a; color: var(--muted); padding: 6px 9px; cursor: pointer; font-size: 0.65rem; }
.status-pill--warning { color: var(--red) !important; border-color: rgba(255,105,105,.45) !important; }
.clock { min-width: 70px; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; text-align: right; }
.status-pill, .mini-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; border-radius: 999px; padding: 4px 9px; border: 1px solid var(--line); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }
.status-pill--demo { color: var(--amber); border-color: rgba(242, 184, 75, 0.45); background: rgba(242, 184, 75, 0.08); }
.status-pill--draft { color: var(--cyan); border-color: rgba(79, 208, 210, 0.42); background: rgba(79, 208, 210, 0.08); }
.mini-badge { color: var(--muted); letter-spacing: 0.04em; }

.app-shell { width: min(1760px, calc(100% - 28px)); margin: 0 auto; padding: 32px 0 48px; }
.view { display: none; }
.view.is-visible { display: block; animation: view-in 180ms ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.page-heading h1 { margin: 3px 0 5px; font-size: clamp(1.65rem, 2.4vw, 2.45rem); letter-spacing: -0.04em; }
.eyebrow { margin: 0; color: var(--cyan); font-size: 0.67rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.lede { margin: 0; max-width: 720px; color: var(--muted); font-size: 0.9rem; }

.mode-switch { display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); }
.mode-switch > span { padding: 0 7px; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.mode-option { border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 8px 12px; cursor: pointer; font-size: 0.75rem; font-weight: 800; }
.mode-option.is-active { background: var(--cyan); color: #041518; }

.summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.summary-card { min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(12, 42, 52, 0.95), rgba(8, 29, 36, 0.95)); }
.summary-card span, .summary-card strong, .summary-card small { display: block; }
.summary-label { color: var(--muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.summary-card strong { margin-top: 8px; color: var(--text); font-size: 1.1rem; letter-spacing: 0.02em; }
.summary-card small { margin-top: 4px; color: var(--faint); font-size: 0.67rem; }
.text-ok { color: var(--green) !important; }
.text-warning { color: var(--amber) !important; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(10, 34, 43, 0.98), rgba(6, 25, 32, 0.98)); box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-heading h2 { margin: 3px 0 0; font-size: 0.98rem; letter-spacing: -0.02em; }
.panel-heading--compact { min-height: 58px; }
.panel-note { color: var(--muted); font-size: 0.68rem; text-align: right; }

.monitor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.diagram-panel { min-width: 0; }
.diagram-scroll { width: 100%; overflow: auto; background: linear-gradient(rgba(37, 94, 105, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 94, 105, 0.08) 1px, transparent 1px), #061b22; background-size: 32px 32px; }
.hydraulic-diagram { display: block; width: 100%; min-width: 1080px; height: auto; aspect-ratio: 1440 / 760; }
.monitor-sidebar { display: grid; gap: 12px; }
.compact-panel { box-shadow: none; }

.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: var(--muted); font-size: 0.64rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { width: 18px; height: 3px; border-radius: 3px; }
.legend-line--hot { background: var(--hot); }
.legend-line--return { background: var(--return); }
.legend-line--cold { background: var(--cold); }
.legend-line--recirc { background: var(--recirc); }

/* SVG */
.hydraulic-diagram text { font-family: inherit; }
.zone-title { fill: #4c7781; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.equipment-box { fill: #0b2932; stroke: #2b6170; stroke-width: 2; }
.equipment-box--source { stroke: #38ce92; }
.equipment-box--boiler { stroke: #d79c35; }
.equipment-kicker { fill: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.equipment-title { fill: #eef9fa; font-size: 14px; font-weight: 900; }
.equipment-subtitle { fill: #7e9ca3; font-size: 9px; }
.state-label { fill: #7f9ca3; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.flame { fill: #e99d3c; }
.aero-unit rect { fill: #0b2831; stroke: #2a6670; stroke-width: 1.3; }
.aero-unit circle { fill: #122d35; stroke: #57717a; }
.aero-unit .fan { fill: #67838b; transform-box: fill-box; transform-origin: center; }
.aero-unit text { fill: #77949a; font-size: 8px; font-weight: 900; }
#aerothermal-group.is-running .aero-unit rect { stroke: #43dba2; }
#aerothermal-group.is-running .aero-unit circle { stroke: #42e6a1; }
#aerothermal-group.is-running .aero-unit .fan { fill: #48e29d; animation: spin 1.15s linear infinite; filter: url(#glow-green); }
#aerothermal-group.is-running .aero-unit text { fill: #dffdf1; }

.pipe { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pipe--hot { stroke: var(--hot); }
.pipe--return { stroke: var(--return); }
.pipe--cold { stroke: var(--cold); }
.pipe--sanitary-hot { stroke: #f26161; }
.pipe--recirc { stroke: var(--recirc); }
.pipe.is-flowing { stroke-dasharray: 12 9; animation: flow 0.85s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -42; } }

.sensor circle { fill: #0a2028; stroke: #8db1bb; stroke-width: 2; }
.sensor text { fill: #e6f5f6; font-size: 8px; font-weight: 900; text-anchor: middle; }
.sensor .sensor-reading { fill: #9ccbd0; font-size: 9px; font-weight: 800; text-anchor: middle; }
.sensor.is-forced circle { stroke: var(--amber); filter: url(#glow-hot); }
.meter circle { fill: #09232b; stroke: #a4c0c5; stroke-width: 2; }
.meter text { fill: #edf8f9; font-size: 10px; font-weight: 900; text-anchor: middle; }
.radio-waves { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }

.pump-shell { fill: #0b2229; stroke: #6c8990; stroke-width: 2.5; }
.pump-rotor { fill: #718b91; transform-box: fill-box; transform-origin: center; }
.pump-name { fill: #d7e7e9; font-size: 11px; font-weight: 900; text-anchor: middle; }
.pump.is-running .pump-shell { stroke: var(--green); filter: url(#glow-green); }
.pump.is-running .pump-rotor { fill: var(--green); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.needle-axis { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 2; stroke-dasharray: 5 8; }
.needle-title { fill: #fff; font-size: 14px; font-weight: 900; }
.needle-note { fill: rgba(255,255,255,0.52); font-size: 9px; letter-spacing: 0.08em; }
.valve-body { fill: #0c2630; stroke: #f1b63b; stroke-width: 3; }
.valve-branch { fill: none; stroke: #f1b63b; stroke-width: 4; }
.valve-actuator rect { fill: #122e36; stroke: #8ca9b0; }
.valve-actuator path { stroke: #8ca9b0; stroke-width: 2; }
.valve-position { fill: var(--cyan); filter: url(#glow-green); }
.valve.is-opening .valve-actuator { animation: nudge-right 0.55s ease-in-out infinite alternate; }
.valve.is-closing .valve-actuator { animation: nudge-left 0.55s ease-in-out infinite alternate; }
@keyframes nudge-right { to { transform: translateX(5px); } }
@keyframes nudge-left { to { transform: translateX(-5px); } }
.equipment-label { fill: #e8f7f8; font-size: 10px; font-weight: 900; }
.valve-percent { fill: var(--cyan); font-size: 12px; font-weight: 900; }
.heating-terminal rect { fill: #0b2229; stroke: #57747c; stroke-width: 2; }
.heating-terminal path { fill: none; stroke: #df6d6d; stroke-width: 2; }
.heating-terminal text { fill: #dcebed; font-size: 9px; font-weight: 800; text-anchor: end; }
.heating-terminal text + text { fill: #75939a; font-size: 8px; font-weight: 500; }

.tank-shell { stroke: #417381; stroke-width: 2; }
.tank-title { fill: #ecf8f9; font-size: 10px; font-weight: 900; }
.coil { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.coil--hot { stroke: var(--hot); }
.coil--cold { stroke: var(--cold); }
.sanitary-label { fill: var(--hot); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; }
.sanitary-label--cold { fill: var(--cold); }
.sanitary-label--recirc { fill: var(--recirc); }
.secondary-title { fill: #dcebed; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-anchor: middle; }
.secondary-outlet path { fill: none; stroke: #8ba9b0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recirc-mixing rect { fill: rgba(7, 27, 34, 0.88); stroke: #8ba9b0; stroke-width: 2; }
.recirc-mixing circle { fill: var(--recirc); stroke: #dcebed; stroke-width: 1.5; }
.consumer path, .consumer rect { fill: none; stroke: #8ba9b0; stroke-width: 2; }
.consumer .water-drops { stroke: var(--cold); }
.diagram-note rect { fill: rgba(5, 20, 25, 0.86); stroke: #1d4d58; }
.diagram-note text { fill: #7d9ba2; font-size: 9px; }
.valid-dot { fill: var(--green); }

.status-list { padding: 5px 14px 14px; }
.status-row { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 51px; border-bottom: 1px solid var(--line-soft); }
.status-row:last-child { border-bottom: 0; }
.status-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #365d67; border-radius: 50%; color: #6f8d94; font-size: 0.66rem; font-weight: 900; }
.status-row.is-running .status-icon { color: #082019; background: var(--green); border-color: var(--green); box-shadow: 0 0 14px rgba(77, 224, 160, 0.25); }
.status-copy { min-width: 0; }
.status-copy strong, .status-copy small { display: block; }
.status-copy strong { font-size: 0.75rem; }
.status-copy small { margin-top: 3px; color: var(--muted); font-size: 0.63rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-value { color: var(--muted); font-size: 0.63rem; font-weight: 900; }
.status-row.is-running .status-value { color: var(--green); }

.valve-summary { display: grid; grid-template-columns: 108px 1fr; gap: 14px; padding: 17px; align-items: center; }
.position-ring { width: 96px; aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%; border: 9px solid #173b45; outline: 1px solid #315d67; text-align: center; }
.position-ring strong { display: block; color: var(--cyan); font-size: 1.45rem; line-height: 1; }
.position-ring span { display: block; margin-top: 5px; color: var(--muted); font-size: 0.57rem; text-transform: uppercase; }
.valve-summary dl { margin: 0; }
.valve-summary dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.66rem; }
.valve-summary dt { color: var(--muted); }
.valve-summary dd { margin: 0; color: var(--text); font-weight: 800; text-align: right; }

.link-list { margin: 0; padding: 8px 14px 14px; list-style: none; }
.link-list li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--line-soft); font-size: 0.66rem; }
.link-list li:last-child { border-bottom: 0; }
.link-list strong { font-size: 0.57rem; letter-spacing: 0.06em; }
.link-dot { width: 7px; height: 7px; border-radius: 50%; }
.link-dot.is-online { background: var(--green); box-shadow: 0 0 8px rgba(77, 224, 160, 0.7); }
.link-dot.is-warning { background: var(--amber); box-shadow: 0 0 8px rgba(242, 184, 75, 0.55); }

.temperatures-panel, .energy-panel { margin-top: 12px; }
.temperature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.temperature-card { min-width: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(7, 27, 34, 0.7); }
.temperature-card header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.temperature-card header strong { color: var(--cyan); font-size: 0.72rem; }
.temperature-card header span { color: var(--muted); font-size: 0.58rem; }
.temperature-card .temperature-value { display: block; margin-top: 9px; font-size: 1.22rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.temperature-card small { display: block; min-height: 26px; margin-top: 4px; color: var(--muted); font-size: 0.6rem; line-height: 1.35; }
.temperature-card.is-forced { border-color: rgba(242, 184, 75, 0.55); box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.12); }
.forced-mark { color: var(--amber) !important; font-weight: 900; }

.meter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.meter-card { padding: 14px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(7, 27, 34, 0.72); }
.meter-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.meter-card h3 { margin: 0; font-size: 0.85rem; }
.meter-card header p { margin: 4px 0 0; color: var(--muted); font-size: 0.62rem; }
.availability { border-radius: 999px; padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); font-size: 0.55rem; font-weight: 900; text-transform: uppercase; }
.availability.is-available { color: var(--green); border-color: rgba(77,224,160,0.45); }
.meter-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.meter-values div { padding: 9px; border-radius: 8px; background: rgba(1, 13, 17, 0.45); }
.meter-values span, .meter-values strong { display: block; }
.meter-values span { color: var(--muted); font-size: 0.57rem; }
.meter-values strong { margin-top: 5px; font-size: 0.78rem; }

.notice { margin-bottom: 12px; padding: 13px 15px; border: 1px solid; border-radius: 11px; font-size: 0.76rem; line-height: 1.55; }
.notice--info { color: #b8dfe2; border-color: rgba(79, 208, 210, 0.32); background: rgba(79, 208, 210, 0.07); }
.control-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; margin-bottom: 12px; }
.check-control { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.72rem; cursor: pointer; }
.check-control input { accent-color: var(--cyan); }
.button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 0.7rem; font-weight: 800; transition: 140ms ease; }
.button:hover { transform: translateY(-1px); }
.button--ghost { color: var(--muted); background: #0a242c; }
.button--primary { color: #031416; background: var(--cyan); border-color: var(--cyan); }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.control-panel { box-shadow: none; }
.signal-list { padding: 6px 14px 14px; }
.signal-row { display: grid; grid-template-columns: 46px minmax(190px, 1fr) auto auto; gap: 10px; align-items: center; min-height: 57px; border-bottom: 1px solid var(--line-soft); }
.signal-row:last-child { border-bottom: 0; }
.signal-code { color: var(--cyan); font-size: 0.7rem; font-weight: 900; }
.signal-name strong, .signal-name small { display: block; }
.signal-name strong { font-size: 0.74rem; }
.signal-name small { margin-top: 3px; color: var(--muted); font-size: 0.61rem; }
.force-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.62rem; white-space: nowrap; }
.force-control input { accent-color: var(--amber); }
.binary-toggle { min-width: 76px; min-height: 31px; border: 1px solid #355b65; border-radius: 999px; background: #091d23; color: #77949b; cursor: pointer; font-size: 0.61rem; font-weight: 900; }
.binary-toggle.is-on { color: #072018; background: var(--green); border-color: var(--green); }
.binary-toggle:disabled { cursor: not-allowed; opacity: 0.43; }

.temperature-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.temperature-control { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 9px; align-items: center; padding: 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(5, 22, 28, 0.6); }
.temperature-control > strong { color: var(--cyan); font-size: 0.73rem; }
.temperature-control-main { min-width: 0; }
.temperature-control-main small { display: block; color: var(--muted); font-size: 0.57rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.temperature-control-fields { display: grid; grid-template-columns: auto 80px; gap: 7px; align-items: center; margin-top: 8px; }
.temperature-control-fields label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.58rem; }
.temperature-control-fields input[type="checkbox"] { accent-color: var(--amber); }
.temperature-control-fields input[type="number"] { width: 100%; height: 29px; border: 1px solid #31545e; border-radius: 6px; background: #071a20; color: var(--text); padding: 4px 6px; }
.temperature-control-fields input[type="number"]:disabled { opacity: 0.42; }

.settings-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.settings-card { display: flex; flex-direction: column; min-width: 0; box-shadow: none; }
.settings-card > label { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: center; min-height: 48px; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.67rem; }
.settings-card input, .settings-card select { width: 100%; height: 32px; border: 1px solid #31545e; border-radius: 7px; background: #061b22; color: var(--text); padding: 4px 8px; }
.settings-card p { margin: 0; padding: 15px; color: var(--muted); font-size: 0.72rem; line-height: 1.55; }
.settings-card--wide { grid-column: 1 / -1; }
.calibration-actions, .settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 14px; }
#settings-feedback { color: var(--green); font-size: 0.68rem; }
.is-error { color: var(--red) !important; }

.alarms-panel, .schedule-panel, .users-panel { margin-top: 12px; }
.alarm-list, .user-list { padding: 10px 14px 14px; }
.alarm-row, .user-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.alarm-row:last-child, .user-row:last-child { border-bottom: 0; }
.alarm-row span strong, .alarm-row span small { display: block; }
.alarm-row span small { margin-top: 4px; color: var(--muted); font-size: .65rem; }
.alarm-row--alarm { border-left: 3px solid var(--red); padding-left: 10px; }
.alarm-row--warning { border-left: 3px solid var(--amber); padding-left: 10px; }
.alarm-row--info { border-left: 3px solid var(--cyan); padding-left: 10px; }
.empty-state { margin: 0; padding: 18px; color: var(--muted); text-align: center; }
.meter-reset { margin-top: 10px; }

.schedule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; }
.schedule-group { border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; background: rgba(3,16,21,.35); }
.schedule-group h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); color: var(--cyan); font-size: .72rem; }
.schedule-row { display: grid; grid-template-columns: 24px 72px 88px 16px 88px auto; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: .64rem; }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row input[type="time"], .user-row input, .user-row select, .create-user-form input, .create-user-form select { height: 32px; border: 1px solid #31545e; border-radius: 7px; background: #061b22; color: var(--text); padding: 4px 7px; }
.schedule-row input[type="checkbox"] { accent-color: var(--cyan); }
.create-user-form { display: grid; grid-template-columns: 1fr 1.4fr 180px auto; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.user-row { grid-template-columns: minmax(130px,1fr) 170px 90px minmax(190px,1fr) auto; }
.user-row label { color: var(--muted); font-size: .66rem; }

.history-panel { box-shadow: none; }
.history-toolbar { display: grid; grid-template-columns: minmax(240px,1.6fr) minmax(190px,1fr) minmax(190px,1fr) auto; gap: 10px; align-items: end; padding: 14px; border-bottom: 1px solid var(--line-soft); }
.history-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: .66rem; }
.history-toolbar select, .history-toolbar input { width: 100%; height: 36px; border: 1px solid #31545e; border-radius: 7px; background: #061b22; color: var(--text); padding: 5px 8px; }
.history-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border-bottom: 1px solid var(--line-soft); background: var(--line-soft); }
.history-summary span { padding: 11px 14px; color: var(--muted); background: #071a20; font-size: .68rem; }
.history-chart-wrap { position: relative; min-height: 340px; padding: 12px; }
.history-chart { display: block; width: 100%; min-width: 620px; height: auto; }
.history-grid path { fill: none; stroke: #163740; stroke-width: 1; }
.history-line { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.history-axis { fill: #78949b; font-size: 12px; }
.history-chart-wrap .empty-state { position: absolute; inset: 45% 0 auto; }

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { width: min(430px,100%); padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.login-logo { display: block; width: min(250px,100%); max-height: 76px; object-fit: contain; object-position: left center; margin-bottom: 20px; padding: 6px; border-radius: 8px; background: #fff; }
.login-card h1 { margin: 6px 0 20px; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; color: var(--muted); font-size: .74rem; }
.login-card input { height: 42px; border: 1px solid #31545e; border-radius: 8px; background: #061b22; color: var(--text); padding: 8px 10px; }
.login-card .button { color: #031416; background: var(--cyan); }
.form-error { color: var(--red); }

.app-footer { display: flex; justify-content: space-between; gap: 20px; padding: 16px clamp(14px, 2vw, 34px); border-top: 1px solid var(--line-soft); color: #4b6d75; background: #030d11; font-size: 0.62rem; }

@media (max-width: 1280px) {
  .app-header { grid-template-columns: 1fr auto; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; }
  .header-status { grid-column: 2; grid-row: 1; }
  .monitor-layout { grid-template-columns: 1fr; }
  .monitor-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .temperature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .app-header { display: flex; flex-wrap: wrap; gap: 10px; }
  .brand { flex: 1 1 100%; }
  .brand-copy { display: none; }
  .header-status { margin-left: auto; }
  .main-nav { flex: 1 1 100%; justify-content: stretch; overflow-x: auto; }
  .nav-button { flex: 1 0 auto; }
  .app-shell { width: min(100% - 18px, 1760px); padding-top: 20px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-sidebar { grid-template-columns: 1fr; }
  .temperature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meter-grid, .control-grid { grid-template-columns: 1fr; }
  .temperature-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: 1fr; }
  .create-user-form, .user-row { grid-template-columns: 1fr; }
  .history-toolbar { grid-template-columns: 1fr 1fr; }
  .settings-card--wide { grid-column: auto; }
  .control-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .brand-logo { height: 27px; }
  .brand-logo--engineering { max-width: 84px; }
  .brand-logo--iot { max-width: 135px; }
  .status-pill--demo { display: none; }
  .summary-grid, .temperature-grid, .temperature-control-grid { grid-template-columns: 1fr; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .legend { justify-content: flex-start; }
  .signal-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .signal-row .force-control { grid-column: 2 / -1; }
  .settings-card > label { grid-template-columns: 1fr; }
  .app-footer { flex-direction: column; }
  .schedule-row { grid-template-columns: 22px 1fr 1fr; }
  .history-toolbar, .history-summary { grid-template-columns: 1fr; }
  .history-chart-wrap { overflow-x: auto; }
  .schedule-row > span:nth-of-type(2), .schedule-row button { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}