:root {
  --bg: #09111f;
  --sidebar: #0c1626;
  --panel: #111e30;
  --panel-2: #15253a;
  --line: #24364c;
  --text: #e9f1f8;
  --muted: #8495a9;
  --green: #55d68b;
  --cyan: #43c6d9;
  --blue: #4e8cff;
  --amber: #f2b84b;
  --red: #ef6b72;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font-family: Arial, "Noto Sans KR", sans-serif; font-size: 14px; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 80% -20%, #16314a 0, transparent 36%), var(--bg); }

.topbar { height: 76px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(9,17,31,.92); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { position: relative; width: 38px; height: 38px; border: 1px solid #276278; border-radius: 10px; background: #102b3a; overflow: hidden; }
.brand-mark span { position: absolute; height: 6px; background: var(--green); border-radius: 7px 0 7px 0; transform: rotate(-28deg); }
.brand-mark span:nth-child(1) { width: 20px; left: 4px; top: 20px; }
.brand-mark span:nth-child(2) { width: 18px; left: 12px; top: 13px; background: var(--cyan); }
.brand-mark span:nth-child(3) { width: 13px; left: 20px; top: 7px; }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.brand h1 em { color: var(--green); font-style: normal; font-weight: 700; }
.brand p { margin: 4px 0 0; color: #667b91; font-size: 9px; letter-spacing: 2px; }
.top-status { display: flex; align-items: center; gap: 20px; }
.connection, .live-pill { color: var(--green); border: 1px solid rgba(85,214,139,.28); background: rgba(85,214,139,.08); border-radius: 20px; padding: 7px 11px; font-size: 10px; font-weight: bold; letter-spacing: 1px; }
.connection i, .live-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.connection.stale, .live-pill.stale { color: var(--amber); border-color: rgba(242,184,75,.32); background: rgba(242,184,75,.08); }
.connection.stale i, .live-pill.stale i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.connection.offline, .live-pill.offline { color: var(--red); border-color: rgba(239,107,114,.32); background: rgba(239,107,114,.08); }
.connection.offline i, .live-pill.offline i { background: var(--red); box-shadow: none; }
.waiting-text { color: var(--amber) !important; }.alarm-text { color: var(--red) !important; }
.clock { font-size: 16px; font-family: Consolas, monospace; color: #b7c4d2; }

.layout { display: flex; min-height: calc(100vh - 76px); }
.sidebar { width: 215px; flex: 0 0 215px; position: relative; padding: 24px 13px 100px; background: rgba(12,22,38,.82); border-right: 1px solid var(--line); }
.nav-item { width: 100%; border: 0; border-left: 3px solid transparent; border-radius: 7px; padding: 13px 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; color: #8597aa; background: transparent; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.nav-item:hover { color: #dce8f2; background: #122238; }
.nav-item.active { color: var(--green); background: rgba(85,214,139,.09); border-left-color: var(--green); }
.nav-icon { width: 21px; text-align: center; font-size: 18px; }
.nav-badge { margin-left: auto; min-width: 19px; padding: 2px 5px; text-align: center; color: #17202b; background: var(--amber); border-radius: 10px; font-size: 10px; }
.mode-switcher { margin: 22px 6px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.mode-switcher > span { display: block; margin: 0 4px 9px; color: #667b91; font-size: 8px; font-weight: bold; letter-spacing: 1.4px; }
.mode-switcher > div { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #091421; }
.mode-switcher button { width: 50%; padding: 8px 3px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; }
.mode-switcher button.active { color: #071812; background: var(--green); font-weight: bold; }
.mode-switcher button.sim-active { color: #211907; background: var(--amber); font-weight: bold; }
.side-foot { position: absolute; bottom: 25px; left: 29px; color: #6e8195; line-height: 1.8; }
.side-foot span, .side-foot small { display: block; }
.side-foot span { font-size: 11px; letter-spacing: 1px; }
.side-foot small { font-size: 10px; }

.content { width: calc(100% - 215px); max-width: 1600px; padding: 18px 34px 20px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; min-height: 68px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 7px !important; color: var(--green) !important; font-size: 10px !important; font-weight: bold; letter-spacing: 1.8px; }
.page-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.5px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.updated { color: #71849a; font-size: 11px; }
.updated strong { margin-left: 5px; color: #aebdcb; font-family: Consolas, monospace; font-weight: normal; }

.summary-grid { display: flex; flex-wrap: wrap; margin: 0 -7px 20px; }
.summary-card { width: calc(25% - 14px); min-height: 116px; margin: 0 7px 14px; padding: 20px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, var(--panel-2), var(--panel)); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.metric-icon { width: 47px; height: 47px; flex: 0 0 47px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: bold; }
.metric-icon.temp { color: var(--amber); background: rgba(242,184,75,.12); }
.metric-icon.co2 { color: var(--cyan); background: rgba(67,198,217,.12); font-size: 11px; }
.metric-icon.flow { color: var(--blue); background: rgba(78,140,255,.12); font-size: 22px; }
.metric-icon.power { color: var(--green); background: rgba(85,214,139,.12); font-size: 24px; }
.summary-card span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.summary-card strong { display: block; white-space: nowrap; font-size: 24px; }
.summary-card strong b { font-weight: 600; }
.summary-card strong small { margin-left: 4px; color: #8fa1b4; font-size: 11px; font-weight: normal; }
.summary-card em { display: block; margin-top: 7px; font-size: 9px; font-style: normal; }
.stable { color: var(--cyan); } .good { color: var(--green); }
.metric-icon.gas { color: #ff9f43; background: rgba(255,159,67,.12); font-size: 11px; }
.metric-icon.no-gas { color: #b892ff; background: rgba(184,146,255,.12); font-size: 12px; }

.overview-grid { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.panel { border: 1px solid var(--line); border-radius: 10px; background: rgba(17,30,48,.92); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.process-panel { width: calc(72% - 14px); margin: 0 7px 14px; }
.efficiency-panel { width: calc(28% - 14px); margin: 0 7px 14px; }
.status-panel, .alarm-mini { width: calc(50% - 14px); margin: 0 7px 14px; }
.panel-head { min-height: 70px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; font-size: 14px; }
.panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.text-button { border: 0; color: var(--cyan); background: transparent; font-size: 10px; cursor: pointer; }

.process-flow { min-height: 245px; padding: 42px 28px 30px; display: flex; align-items: center; justify-content: center; }
.machine { width: 130px; text-align: center; position: relative; }
.machine-icon { width: 66px; height: 66px; margin: 0 auto 13px; display: flex; align-items: center; justify-content: center; border: 2px solid #36516b; border-radius: 13px; color: #9bb0c4; background: #12253a; font-size: 28px; box-shadow: inset 0 0 18px rgba(0,0,0,.22); }
.active-machine .machine-icon { color: var(--green); border-color: #2e8160; box-shadow: 0 0 18px rgba(85,214,139,.12); }
.machine.outlet .machine-icon { color: var(--cyan); border-color: #277383; }
.machine b { display: block; font-size: 11px; }
.machine span { display: inline-block; margin-top: 7px; padding: 4px 7px; color: #d8e4ed; background: #0c1727; border-radius: 4px; font-family: Consolas, monospace; font-size: 11px; }
.machine small { position: absolute; top: -8px; right: 15px; padding: 3px 5px; color: #082016; background: var(--green); border-radius: 4px; font-size: 8px; font-weight: bold; }
.fan { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pipe { width: 8%; min-width: 35px; height: 2px; position: relative; margin-top: -48px; overflow: hidden; background: #31506a; }
.pipe:after { content: "›"; position: absolute; right: -1px; top: -10px; color: var(--cyan); font-size: 19px; }
.pipe span { position: absolute; width: 18px; height: 2px; background: var(--cyan); animation: pipeFlow 2s linear infinite; }
@keyframes pipeFlow { from { left: -18px; } to { left: 100%; } }
.process-footer { padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; color: var(--muted); background: #0d1929; border-radius: 0 0 10px 10px; font-size: 10px; }
.process-footer b { margin-left: 4px; color: #b9c9d7; }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.dot.run { background: var(--green); } .dot.ready { background: var(--amber); }

.gauge { width: 164px; height: 164px; margin: 29px auto 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient(var(--green) 0 92%, #25374a 92% 100%); position: relative; }
.gauge:before { content: ""; position: absolute; width: 132px; height: 132px; border-radius: 50%; background: var(--panel); }
.gauge div { position: relative; z-index: 1; text-align: center; }
.gauge strong { font-size: 37px; font-weight: 500; }
.gauge small { color: var(--muted); font-size: 13px; }
.gauge span { display: block; margin-top: 5px; color: var(--green); font-size: 8px; letter-spacing: 1.5px; }
.efficiency-stats { padding: 15px 20px 20px; display: flex; justify-content: space-around; }
.efficiency-stats div { width: 50%; text-align: center; }
.efficiency-stats div + div { border-left: 1px solid var(--line); }
.efficiency-stats span, .efficiency-stats b { display: block; }
.efficiency-stats span { color: var(--muted); font-size: 9px; }
.efficiency-stats b { margin-top: 5px; font-size: 12px; }

.equipment-list > div { min-height: 63px; padding: 10px 18px; display: flex; align-items: center; border-bottom: 1px solid rgba(36,54,76,.65); }
.equipment-list > div:last-child { border-bottom: 0; }
.equip-icon { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; color: var(--cyan); border: 1px solid #2f5970; border-radius: 8px; background: #10283a; font-size: 10px; font-weight: bold; }
.equipment-list p { flex: 1; margin: 0 12px; }
.equipment-list b, .equipment-list small { display: block; }
.equipment-list b { font-size: 11px; }.equipment-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.equipment-list em, .status-on, .status-ready { padding: 5px 7px; border-radius: 4px; font-size: 8px; font-style: normal; font-weight: bold; letter-spacing: .5px; }
.status-on { color: var(--green); background: rgba(85,214,139,.1); }.status-ready { color: var(--amber); background: rgba(242,184,75,.1); }
.alarm-row { min-height: 84px; padding: 14px 20px; display: flex; align-items: center; border-bottom: 1px solid rgba(36,54,76,.65); }
.alarm-row:last-child { border-bottom: 0; }
.alarm-row > span { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; }
.alarm-row.warning > span { color: var(--amber); background: rgba(242,184,75,.12); }.alarm-row.normal > span { color: var(--green); background: rgba(85,214,139,.12); }
.alarm-row p { flex: 1; margin: 0 12px; }.alarm-row b, .alarm-row small { display: block; }.alarm-row b { font-size: 11px; }.alarm-row small { margin-top: 5px; color: var(--muted); font-size: 9px; }.alarm-row time { color: #718399; font-family: Consolas, monospace; font-size: 9px; }

/* Echo Breath 3-stage sensor overview */
.sensor-overview .process-sensor-panel { width: calc(100% - 14px); margin: 0 7px 14px; }
.sensor-process-flow { min-height: 455px; padding: 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(42px,5%) minmax(330px,.82fr) minmax(42px,5%) minmax(0,1fr); align-items: stretch; }
.sensor-zone { min-width: 0; padding: 18px; border: 1px solid #31506a; border-radius: 10px; background: linear-gradient(145deg, #13263a, #0d1a2a); }
.sensor-zone.scrubber-zone { padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.sensor-zone.rear-zone { border-color: #277383; }
.zone-title { min-height: 47px; display: flex; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.zone-title > span { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; margin-right: 10px; color: var(--cyan); border: 1px solid #316379; border-radius: 8px; background: #102b3a; font-size: 10px; font-weight: bold; }
.scrubber-zone .zone-title > span { color: var(--green); border-color: #36785f; background: #123126; }
.zone-title div { flex: 1; min-width: 0; }
.zone-title h3, .zone-title p { margin: 0; }.zone-title h3 { font-size: 13px; }.zone-title p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.zone-title em { padding: 4px 6px; color: var(--green); background: rgba(85,214,139,.09); border-radius: 4px; font-size: 8px; font-style: normal; font-weight: bold; white-space: nowrap; }
.sensor-list { padding-top: 7px; }
.sensor-list > div { min-height: 45px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(36,54,76,.7); }
.sensor-list > div:last-child { border-bottom: 0; }
.sensor-list span { color: #9caebe; font-size: 10px; }
.sensor-list strong { font-family: Consolas, monospace; font-size: 15px; font-weight: 500; }
.sensor-list strong small { margin-left: 4px; color: #71859a; font-family: Arial, sans-serif; font-size: 9px; font-weight: normal; }
.sensor-dot { display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; }
.so2-dot { background: #ff9f43; }.no-dot { background: #b892ff; }.temp-dot { background: var(--amber); }.rh-dot { background: var(--cyan); }.co2-dot { background: var(--green); }.co-dot { background: var(--red); }
.process-connector { min-width: 0; position: relative; color: var(--cyan); }
.process-connector span { position: absolute; box-sizing: border-box; border-top: 3px solid #17e4e5; border-bottom: 3px solid #17e4e5; background: linear-gradient(180deg, #07565f, #003f49); box-shadow: 0 0 8px rgba(23,228,229,.38); }
.inlet-connector span { height: 44px; top: 81.25%; left: -2px; right: -25px; margin-top: -22px; }
.outlet-connector span { height: 47px; top: 6.72%; left: -105px; right: -2px; margin-top: -23.5px; }
.scrubber-visual { width: 100%; max-width: 350px; aspect-ratio: 924 / 1205; position: relative; margin: 0 auto; }
.scrubber-visual img { width: 100%; height: 100%; display: block; object-fit: contain; }
.scrubber-reading { position: absolute; left: 87.5%; color: #f4f8fb; font-family: Consolas, monospace; font-size: clamp(11px,1vw,15px); font-weight: 700; line-height: 1; white-space: nowrap; transform: translate(-50%,-50%); text-shadow: 0 1px 2px #071117; }
.scrubber-reading b { font: inherit; }.scrubber-reading small { margin-left: 3px; color: #f4f8fb; font-family: Arial, sans-serif; font-size: .72em; }
.scrubber-temp-reading { top: 41.9%; }.scrubber-rh-reading { top: 59.1%; }
.sensor-list.compact { padding-top: 0; }
.sensor-health-panel, .reduction-panel, .data-source-panel { width: calc(33.333% - 14px); margin: 0 7px 14px; }
.health-summary { padding: 22px 20px; display: flex; align-items: center; gap: 16px; }
.health-ring { width: 72px; height: 72px; flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid var(--green); border-radius: 50%; box-shadow: 0 0 17px rgba(85,214,139,.12); }
.health-ring strong { font-size: 22px; }.health-ring span { color: var(--green); font-size: 7px; letter-spacing: 1px; }
.health-copy b { font-size: 11px; }.health-copy p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.health-rows, .source-detail { padding: 0 20px 15px; }.health-rows div, .source-detail div { padding: 9px 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(36,54,76,.7); font-size: 9px; }.health-rows span, .source-detail span { color: var(--muted); }.health-rows b { color: var(--green); }
.reduction-body { padding: 20px; }.reduction-body > div + div { margin-top: 22px; }.reduction-body span { color: var(--muted); font-size: 10px; }.reduction-body strong { float: right; font-size: 20px; }.reduction-body strong small { margin-left: 3px; color: var(--muted); font-size: 9px; }.bar { height: 7px; clear: both; position: relative; top: 10px; margin-bottom: 13px; overflow: hidden; background: #0a1523; border-radius: 7px; }.bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #b66a2d, #ff9f43); border-radius: 7px; transition: width .4s; }.bar.no-bar i { background: linear-gradient(90deg, #765baa, #b892ff); }
.source-detail { padding-top: 10px; }.source-detail div { display: block; }.source-detail span, .source-detail b { display: block; }.source-detail b { margin-top: 5px; color: #c9d6e2; font-size: 9px; overflow-wrap: anywhere; }

/* Compact, large-type Overview layout */
#overview .page-heading { min-height: 52px; margin-bottom: 8px; }
#overview .eyebrow { margin-bottom: 4px !important; font-size: 15px !important; }
#overview .page-heading h2 { font-size: 42px; line-height: 1; }
#overview .heading-inline-note { color: var(--green); font-size: 18px; font-weight: 700; letter-spacing: 1px; vertical-align: middle; }
#overview .page-heading p:not(.eyebrow) { margin-top: 5px; font-size: 19.5px; }
#overview .updated { font-size: 16.5px; }
.overview-top-grid { height: 134px; display: grid; grid-template-columns: minmax(0,2fr) minmax(310px,1fr); gap: 14px; margin-bottom: 10px; }
.gas-comparison-panel, .top-reduction-panel { width: auto; margin: 0; }
.overview-top-grid .panel-head { height: 42px; min-height: 42px; padding: 5px 16px; }
#overview .panel-head h3 { font-size: 21px; white-space: nowrap; }
#overview .panel-inline-note { color: var(--muted); font-size: 15px; font-weight: 400; }
#overview .panel-head p { margin-top: 3px; font-size: 15px; }
#overview .live-pill, #overview .status-on, #overview .status-ready, #overview .stable { font-size: 13.5px; }
.gas-comparison-body { height: 92px; min-height: 0; padding: 5px 16px 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gas-compare header { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.gas-compare header b { color: #ff9f43; font-size: 18px; }.no-compare header b { color: #b892ff; }
.gas-compare header span { color: var(--muted); font-size: 13.5px; }
.gas-value-row { min-height: 25px; display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 9px; }
.gas-value-row > span { color: #9caebe; font-size: 15px; }.gas-value-row strong { float: right; color: var(--text); font-family: Consolas, monospace; font-size: 19px; }
.gas-value-bar { height: 10px; overflow: hidden; background: #081522; border-radius: 10px; }
.gas-value-bar i { display: block; width: 0; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #b66a2d, #ff9f43); transition: width .4s; }
.gas-value-row.rear .gas-value-bar i { background: linear-gradient(90deg, #217a8d, #35c6d8); }.no-compare .gas-value-row:not(.rear) .gas-value-bar i { background: linear-gradient(90deg, #765baa, #b892ff); }
.top-reduction-panel .reduction-body { height: 92px; padding: 5px 16px 7px; }.top-reduction-panel .reduction-body > div + div { margin-top: 5px; }
.top-reduction-panel .reduction-body span { font-size: 15px; }.top-reduction-panel .reduction-body strong { font-size: 25px; }.top-reduction-panel .reduction-body strong small { font-size: 13.5px; }
.top-reduction-panel .bar { height: 9px; top: 2px; margin-bottom: 4px; }
#overview .process-sensor-panel { width: calc(100% - 14px); margin-bottom: 0; }
#overview .process-sensor-panel > .panel-head { min-height: 56px; padding: 10px 18px; }
#overview .sensor-process-flow { min-height: 405px; padding: 0 16px; grid-template-columns: minmax(0,1fr) minmax(38px,5%) minmax(290px,.78fr) minmax(38px,5%) minmax(0,1fr); }
#overview .sensor-zone { padding: 13px 15px; }
#overview .sensor-zone.scrubber-zone { padding: 0; }
#overview .zone-title { min-height: 52px; padding-bottom: 9px; }
#overview .zone-title > span { width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; }
#overview .zone-title h3 { font-size: 19.5px; }.zone-title p { font-size: 13.5px; }.zone-title em { font-size: 12px; }
#overview .sensor-list { padding-top: 3px; }
#overview .sensor-list > div { min-height: 45px; }
#overview .sensor-list span { font-size: 15px; }
#overview .sensor-list strong { font-size: 22.5px; }
#overview .sensor-list strong small { font-size: 13.5px; }
#overview .scrubber-visual { max-width: 310px; }
#overview .scrubber-reading { font-size: 18px; }
#overview .inlet-connector span { height: 39px; margin-top: -19.5px; }
#overview .outlet-connector span { height: 41px; margin-top: -20.5px; }
#overview .process-footer { padding: 10px 14px; gap: 7px; font-size: 15px; }
.system-health-card, .system-source-card { width: calc(50% - 14px); }

.range-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #0d1929; }
.range-switch button { border: 0; padding: 6px 11px; color: var(--muted); background: transparent; border-radius: 5px; cursor: pointer; font-size: 13px; }
.range-switch button.active { color: var(--text); background: #263c54; }
.trend-controls { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.trend-nav-button { min-height:31px; padding:5px 9px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:#0d1929; cursor:pointer; font-size:13px; }
#trendCsvButton { margin-left: 36px; }
.trend-nav-button:hover:not(:disabled) { color:var(--text); border-color:#31506a; background:#132238; }
.trend-nav-button:disabled { opacity:.35; cursor:not-allowed; }
.chart-panel { padding-bottom: 15px; }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: 10px; }
.legend i { display: inline-block; width: 14px; height: 2px; margin: 0 5px 3px 0; }.temp-line { background: var(--amber); }.co2-line { background: var(--cyan); }
#trendChart { width: 100%; height: 330px; display: block; padding: 20px; }
.three-grid { display: flex; margin: 14px -7px 0; }.mini-stat { width: calc(33.333% - 14px); margin: 0 7px; padding: 22px; }.mini-stat span, .mini-stat b, .mini-stat small { display: block; }.mini-stat span { color: var(--muted); font-size: 10px; }.mini-stat b { margin: 9px 0 5px; font-size: 21px; }.mini-stat small { color: #667a90; font-size: 9px; }

.trend-grid-six { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.trend-card { width: calc(50% - 12px); margin: 0 6px 8px; padding: 0 10px 6px; overflow: hidden; }
.trend-card-head { min-height: 42px; padding: 8px 1px 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.trend-card-head h3 { margin: 0; flex: 0 0 auto; font-size: 12px; }.trend-card-head h3.so2-title { color: #ff9f43; }.trend-card-head h3.no-title { color: #b892ff; }.trend-card-head h3.co2-title { color: #46d7a7; }.trend-card-head h3.co-title { color: #ef5969; }
.trend-values { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 10px; color: var(--muted); font-size: 8px; }
.trend-values span { white-space: nowrap; }.trend-values i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; }.trend-values b { color: #dbe8f1; font-family: Consolas, monospace; font-size: 11px; }
.trend-card canvas { width: 100%; height: 120px; display: block; background: #0a1523; }
#trends .page-heading { min-height: 58px; margin-bottom: 16px; }

.demo-notice { padding: 8px 11px; color: var(--amber); border: 1px solid rgba(242,184,75,.25); background: rgba(242,184,75,.08); border-radius: 5px; font-size: 9px; }
.control-grid, .system-grid { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.control-card { width: calc(50% - 14px); margin: 0 7px 14px; padding: 20px; }.control-title { display: flex; align-items: center; }.control-title div { flex: 1; margin-left: 12px; }.control-title h3, .control-title p { margin: 0; }.control-title h3 { font-size: 13px; }.control-title p { margin-top: 4px; color: var(--muted); font-size: 9px; }.control-value { margin: 24px 0 17px; padding: 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 6px; background: #0c1828; }.control-value span { color: var(--muted); }.control-value b { font-size: 22px; }.control-value small { color: var(--muted); font-size: 10px; }.button-pair { display: flex; gap: 9px; }.control-btn { width: 50%; padding: 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #0e1a2b; cursor: pointer; font-size: 10px; }.control-btn.on.selected { color: var(--green); border-color: rgba(85,214,139,.45); background: rgba(85,214,139,.09); }.control-btn.off.selected { color: var(--red); border-color: rgba(239,107,114,.45); background: rgba(239,107,114,.09); }.range-control { width: 100%; accent-color: var(--green); }.range-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }

.outline-button { padding: 8px 13px; border: 1px solid #3a5570; border-radius: 5px; background: transparent; cursor: pointer; font-size: 10px; }.alarm-table-wrap { overflow-x: auto; }.alarm-table { width: 100%; border-collapse: collapse; min-width: 720px; }.alarm-table th, .alarm-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }.alarm-table th { color: var(--muted); background: #0e1a2b; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }.alarm-table td { color: #b5c3d1; font-size: 10px; }.alarm-table td b, .alarm-table td small { display: block; }.alarm-table td b { color: var(--text); }.alarm-table td small { margin-top: 4px; color: var(--muted); }.severity { display: inline-block; padding: 5px 7px; border-radius: 4px; font-size: 8px; font-weight: bold; }.severity.warn { color: var(--amber); background: rgba(242,184,75,.12); }.severity.info { color: var(--cyan); background: rgba(67,198,217,.12); }.severity.cleared { color: var(--green); background: rgba(85,214,139,.12); }.ack-btn { padding: 6px 10px; color: var(--amber); border: 1px solid rgba(242,184,75,.4); border-radius: 4px; background: transparent; cursor: pointer; font-size: 9px; }.ack-done { color: #708298; }

.system-card { width: calc(50% - 14px); margin: 0 7px 14px; }.system-card.full { width: calc(100% - 14px); }.system-card dl { margin: 0; padding: 8px 20px 16px; }.system-card dl div { padding: 13px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(36,54,76,.65); }.system-card dl div:last-child { border: 0; }.system-card dt { color: var(--muted); }.system-card dd { margin: 0; color: #cbd7e2; }.io-summary { display: flex; padding: 30px 15px; }.io-summary div { width: 25%; text-align: center; border-right: 1px solid var(--line); }.io-summary div:last-child { border: 0; }.io-summary b, .io-summary span { display: block; }.io-summary b { font-size: 27px; color: var(--cyan); }.io-summary span { margin-top: 7px; color: var(--muted); font-size: 10px; }

@media (max-width: 1050px) {
  .summary-card { width: calc(50% - 14px); }
  .process-panel, .efficiency-panel { width: calc(100% - 14px); }
  .efficiency-panel { padding-bottom: 5px; }
  .sensor-health-panel, .reduction-panel { width: calc(50% - 14px); }
  .data-source-panel { width: calc(100% - 14px); }
  .overview-top-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar { height: 68px; padding: 0 15px; }.brand h1 { font-size: 17px; }.brand p { display: none; }.clock { display: none; }.connection { font-size: 8px; }
  .layout { display: block; min-height: calc(100vh - 68px); }.sidebar { width: 100%; height: 96px; position: sticky; top: 0; z-index: 10; padding: 5px 5px 42px; display: flex; border-right: 0; border-bottom: 1px solid var(--line); background: #0c1626; }.nav-item { height: 48px; margin: 0; padding: 5px 2px; flex: 1; flex-direction: column; justify-content: center; gap: 2px; border-left: 0; border-bottom: 2px solid transparent; font-size: 9px; }.nav-item.active { border-left: 0; border-bottom-color: var(--green); }.nav-icon { font-size: 15px; }.nav-badge { position: absolute; margin: -24px 0 0 26px; }.side-foot { display: none; }.mode-switcher { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 33px; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; border: 0; }.mode-switcher > span { margin: 0; }.mode-switcher > div { flex: 1; padding: 2px; }.mode-switcher button { padding: 5px; }
  .content { width: 100%; padding: 22px 14px 35px; }.page-heading { align-items: flex-start; }.page-heading h2 { font-size: 24px; }.updated { display: none; }
  .status-panel, .alarm-mini, .control-card, .system-card { width: calc(100% - 14px); }.process-flow { padding: 30px 8px 22px; overflow-x: auto; justify-content: flex-start; }.machine { min-width: 105px; }.machine-icon { width: 54px; height: 54px; }.pipe { min-width: 24px; }.process-footer { justify-content: flex-start; }.three-grid { flex-wrap: wrap; }.mini-stat { width: calc(100% - 14px); margin-bottom: 10px; }.system-card.full { width: calc(100% - 14px); }
  .sensor-process-flow { display: block; padding: 15px; }.sensor-zone { width: 100%; }.process-connector { width: 100%; height: 42px; transform: rotate(90deg); }.process-connector span { height: 38px; top: 50%; left: -2px; right: -2px; margin-top: -19px; }.scrubber-visual { max-width: 350px; }.scrubber-reading { font-size: clamp(11px,3.4vw,15px); }.sensor-health-panel, .reduction-panel, .data-source-panel { width: calc(100% - 14px); }
  .trend-card { width: calc(100% - 12px); }.trend-card-head { display: block; }.trend-values { margin-top: 6px; justify-content: flex-start; }
}

@media (max-width: 470px) {
  .brand-mark { width: 32px; height: 32px; }.brand { gap: 8px; }.summary-card { width: calc(100% - 14px); }.summary-card { min-height: 94px; }.page-heading { display: block; }.demo-notice, .range-switch { display: inline-flex; margin-top: 14px; }.io-summary { flex-wrap: wrap; }.io-summary div { width: 50%; margin: 8px 0; }.io-summary div:nth-child(2) { border-right: 0; }.nav-item span:last-of-type { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) { .fan, .pipe span { animation: none; } }

/* Wide scrubber redraw, matching the 2026-09-14 reference proportions. */
#overview .sensor-process-flow { grid-template-columns: minmax(210px,1fr) minmax(420px,2.1fr) minmax(210px,1fr); }
#overview .process-connector { display: none; }
#overview .scrubber-visual { max-width: none; aspect-ratio: 1140 / 880; container-type: inline-size; }
#overview .scrubber-reading { left: 86.8%; font-size: clamp(12px,3.5cqw,26px); }
#overview .scrubber-temp-reading { top: 38.86%; }
#overview .scrubber-rh-reading { top: 58.52%; }
#overview .zone-title { flex-wrap: wrap; gap: 4px; }
#overview .zone-title em { margin-left: auto; }
@media (max-width: 1100px) {
  #overview .sensor-process-flow { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
  #overview .scrubber-visual { max-width: 760px; }
  #overview .overview-top-grid { height: auto; grid-template-columns: 1fr; }
}

#overview .zone-title > div { flex: 1 0 calc(100% - 54px); }
#overview .zone-title > span { margin-right: 4px; }

/* Compact Overview: status summary lives in System, with live IDs preserved. */
#overview .page-heading { min-height: 42px; align-items: center; }
#overview .heading-inline-note { letter-spacing: 0; font-size: 18px; }
#system .system-sensor-status { margin-bottom: 16px; }
#system .system-sensor-status .panel-head { min-height: 46px; padding: 12px 18px; }
#system .process-footer { font-size: 15px; padding: 16px 18px; }
@media (min-width: 1101px) {
  .content:has(#overview.active) { padding-top: 10px; padding-bottom: 10px; }
  #overview .overview-top-grid { height: 116px; }
  #overview .overview-top-grid .panel-head { height: 36px; min-height: 36px; }
  #overview .gas-comparison-body { height: 80px; }
  #overview .process-sensor-panel > .panel-head { min-height: 48px; padding: 6px 18px; }
  #overview .sensor-process-flow { min-height: 0; }
  #overview .sensor-zone { padding: 10px 12px; }
  #overview .sensor-zone.scrubber-zone { padding: 0; }
  #overview .zone-title { min-height: 44px; padding-bottom: 6px; }
  #overview .sensor-list > div { min-height: 38px; }
  #overview .page-heading h2 { font-size: 36px; }
}
@media (min-width: 1101px) {
  #overview .overview-top-grid .panel-head h3 { font-size: 18px; }
  #overview .overview-top-grid .panel-inline-note { font-size: 12px; }
  #overview .gas-comparison-body { padding-top: 3px; padding-bottom: 3px; }
  #overview .gas-compare header { margin-bottom: 2px; }
  #overview .gas-value-row { min-height: 22px; }
  #overview .top-reduction-panel .reduction-body { height: 80px; padding: 3px 16px; display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
  #overview .top-reduction-panel .reduction-body > div + div { margin-top: 0; }
  #overview .top-reduction-panel .reduction-body strong { font-size: 20px; line-height: 24px; }
  #overview .top-reduction-panel .bar { height: 5px; top: 0; margin-bottom: 0; }
}

/* Reduction values and bars share one row. */
#overview .top-reduction-panel .reduction-body > div { display: grid; grid-template-columns: max-content 68px minmax(40px,1fr); align-items: center; gap: 8px; }
#overview .top-reduction-panel .reduction-body strong { float: none; text-align: right; white-space: nowrap; }
#overview .top-reduction-panel .bar { clear: none; position: static; margin: 0; height: 7px; }
@media (min-width: 1101px) {
  #overview .overview-top-grid { height: 88px; margin-bottom: 8px; }
  #overview .top-reduction-panel .reduction-body { height: 52px; padding: 2px 12px; gap: 2px; }
  #overview .top-reduction-panel .reduction-body span { font-size: 13px; }
  #overview .top-reduction-panel .reduction-body strong { font-size: 18px; line-height: 22px; }
  #overview .gas-comparison-body { height: 52px; padding: 2px 12px; gap: 16px; }
  #overview .gas-compare { display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: 1fr 1fr; gap: 0 8px; }
  #overview .gas-compare header { grid-row: 1 / 3; margin: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; }
  #overview .gas-value-row { min-height: 22px; grid-template-columns: 94px minmax(0,1fr); }
}

/* Center inlet/outlet titles without numbered badges. */
#overview .front-zone .zone-title, #overview .rear-zone .zone-title { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; gap: 4px; }
#overview .front-zone .zone-title > div, #overview .rear-zone .zone-title > div { width: 100%; }
#overview .front-zone .zone-title em, #overview .rear-zone .zone-title em { margin: 0; }

/* Vessel label matches the inlet and outlet headings without adding height. */
#overview .scrubber-image-title { position: absolute; left: 47.1%; top: 20.45%; transform: translate(-50%,-50%); margin: 0; font-size: 19.5px; font-family: inherit; font-weight: 700; line-height: normal; color: var(--text); white-space: nowrap; text-shadow: 0 1px 3px #003438; }

#overview .process-sensor-panel > .panel-head h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
#overview .process-heading-note { font-size: 15px; font-weight: 400; color: var(--muted); white-space: normal; }

/* Shared sensor palette and accessible series patterns. */
:root {--sensor-so2:#B388FF;--sensor-no:#FF9800;--sensor-co2:#40C4FF;--sensor-co:#FFD740;--sensor-temp:#FF5252;--sensor-rh:#69F0AE;}
#overview [data-metric="so2"] { color: #B388FF; }
#overview [data-metric="no"] { color: #FF9800; }
#overview [data-metric="co2"] { color: #40C4FF; }
#overview [data-metric="co"] { color: #FFD740; }
#overview [data-metric="temp"] { color: #FF5252; }
#overview [data-metric="rh"] { color: #69F0AE; }
#trends .trend-card:has(#chartSo2) .trend-card-head h3 { color: var(--sensor-so2); }
#trends .trend-card:has(#chartNo) .trend-card-head h3 { color: var(--sensor-no); }
#trends .trend-card:has(#chartCo2) .trend-card-head h3 { color: var(--sensor-co2); }
#trends .trend-card:has(#chartCo) .trend-card-head h3 { color: var(--sensor-co); }
#trends .trend-card:has(#chartTemp) .trend-card-head h3 { color: var(--sensor-temp); }
#trends .trend-card:has(#chartRh) .trend-card-head h3 { color: var(--sensor-rh); }
#overview .so2-compare header b, #overview .top-reduction-panel .reduction-body > div:has(#so2Bar) > span { color:var(--sensor-so2); }
#frontSo2Bar { background:var(--sensor-so2); }
#rearSo2Bar { background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(8,21,35,.7) 4px 6px),var(--sensor-so2); }
#so2Bar { background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(8,21,35,.6) 5px 7px),repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.6) 5px 7px),var(--sensor-so2); }
#overview .no-compare header b, #overview .top-reduction-panel .reduction-body > div:has(#noBar) > span { color:var(--sensor-no); }
#frontNoBar { background:var(--sensor-no); }
#rearNoBar { background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(8,21,35,.7) 4px 6px),var(--sensor-no); }
#noBar { background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(8,21,35,.6) 5px 7px),repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.6) 5px 7px),var(--sensor-no); }

#overview .gas-compare header b, #overview .sensor-list .metric-label { font-size:18px; font-weight:700; }
#overview .gas-value-row strong, #overview .sensor-list strong, #overview .scrubber-reading { font-size:19px; font-family:Consolas,monospace; font-weight:700; color:#f4f8fb; }
#overview .sensor-list strong small, #overview .scrubber-reading small, #overview .gas-compare header span { font-size:13.5px; font-weight:400; color:#71859a; }
#overview [data-value], #trends [data-trend-value] { color:#f4f8fb; }
#overview [data-value].value-alarm, #trends [data-trend-value].value-alarm { color:#FF5252; }
#trends .trend-card-head { flex-wrap:wrap; gap:5px 12px; }
#trends .trend-card-head h3, #trends .trend-values, #trends .trend-values b { font-size:12px; }
#trends .trend-values { gap:5px 12px; }
#trends .series-key { font-size:13px; color:#9caebe; padding:4px 0 5px; }
#trends .trend-series-values { display:flex; flex-wrap:wrap; align-items:center; gap:6px 26px; min-height:26px; }
#trends .trend-series-item { white-space:nowrap; }
#trends .trend-series-glyph { color:#c5d3df; font-weight:700; letter-spacing:1px; }
#trends .trend-series-number { color:#eef6fc; font-family:Consolas, monospace; font-size:14px; font-weight:700; }

/* Lighter downstream bars; a single diagonal hatch for reduction. */
#rearSo2Bar { background:#D8C4FF; }
#rearNoBar { background:#FFCC80; }
#so2Bar { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),var(--sensor-so2); }
#noBar { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),var(--sensor-no); }
#overview .scrubber-reading small { color:#b9c9d8; }

/* Shared row columns keep both gas values and bar origins aligned. */
#rearSo2Bar { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),var(--sensor-so2); }
#rearNoBar { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),var(--sensor-no); }
#so2Bar { background:#D8C4FF; }
#noBar { background:#FFCC80; }
#overview .top-reduction-panel .reduction-body > div { grid-template-columns:72px 68px minmax(0,1fr); }
#overview .top-reduction-panel .reduction-body strong { text-align:left; font-variant-numeric:tabular-nums; }
#overview .top-reduction-panel .bar, #overview .gas-value-bar { height:10px; }

/* Equal unit columns align every numeric endpoint in the sensor cards. */
#overview .front-zone .sensor-list strong, #overview .rear-zone .sensor-list strong { display:grid; grid-template-columns:minmax(0,1fr) 34px; column-gap:4px; align-items:baseline; }
#overview .front-zone .sensor-list strong > b, #overview .rear-zone .sensor-list strong > b { text-align:right; font-variant-numeric:tabular-nums; }
#overview .front-zone .sensor-list strong > small, #overview .rear-zone .sensor-list strong > small { margin-left:0; text-align:left; }

/* Per-zone live counts sit at the lower right and retain live updates. */
#overview .sensor-zone { position:relative; padding-bottom:36px; }
#overview .sensor-zone.scrubber-zone { padding-bottom:36px; }
#overview .zone-live-status { position:absolute; right:12px; bottom:10px; margin:0; padding:4px 6px; color:var(--green); background:rgba(85,214,139,.09); border-radius:4px; font-size:12px; font-style:normal; font-weight:700; white-space:nowrap; }
/* TM1638 device control, matching Garage V4's physical panel. */
.tm-panel{padding:24px;max-width:1000px}.tm-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.tm-heading h3{font-size:22px;color:var(--cyan);margin:0}.tm-heading span{font-size:13px;color:var(--muted)}.tm-heading span.online{color:var(--green)}
.tm-leds,.tm-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.tm-leds button{justify-self:center;width:36px;height:36px;border-radius:50%;background:#160b0b;border:1px solid #6b2a2a;color:#b88;cursor:pointer}.tm-leds button.on{background:#ff1e1e;color:white;border-color:#ff8a8a;box-shadow:0 0 10px #ff3030}.tm-leds button.pending{outline:2px solid #ffd740;opacity:.6}.tm-leds button:disabled{cursor:default}.tm-line{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:28px 0}.tm-seven{font-family:Consolas,monospace;font-size:36px;letter-spacing:.12em;background:#050607;color:#ff4040;text-shadow:0 0 10px #ff3030;padding:14px 22px;border:1px solid #23313a;border-radius:12px;white-space:pre;min-width:270px;text-align:center}.io-send{display:flex;gap:8px}.io-send input{width:180px;background:#06101a;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:17px}.io-send button{padding:12px 20px;border:1px solid #2e78a4;border-radius:10px;background:#12324a;color:var(--text);cursor:pointer}.io-send button:disabled{opacity:.45;cursor:default}.tm-key{padding:22px 0;text-align:center;background:#0b1722;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:16px}.tm-key.on{color:#ffd740;background:#38260d;border-color:#ff9800}.tm-footer{display:flex;justify-content:space-between;gap:10px;margin-top:22px;color:var(--muted);font-size:12px}.io-result{min-height:20px;margin:12px 0 0;color:var(--muted);font-size:13px}.tm-panel.offline .tm-seven,.tm-panel.offline .tm-key{opacity:.45}@media(max-width:760px){.tm-panel{padding:16px}.tm-line{flex-direction:column;align-items:stretch}.tm-seven{min-width:0;font-size:28px}.io-send{display:grid;grid-template-columns:minmax(0,1fr) auto}.io-send input{width:100%;min-width:0}.tm-leds,.tm-keys{gap:5px}.tm-footer{flex-direction:column}}

.io-panels{display:grid;gap:20px}.tm-panel small{color:var(--muted);font-size:12px}.io-result{min-height:22px}.io-result.failed{color:#FF5252}.io-result.applied{color:var(--green)}

/* Compact I/O Control layout */
#control .page-heading{min-height:52px;margin-bottom:16px}
#control .io-title-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
#control .io-title-row p{margin:0}
#control .io-panels{gap:16px}
#control .tm-panel{padding:18px 24px}
#control .tm-heading{margin-bottom:16px}
#control .tm-line{margin:18px 0}
#control .tm-key{padding:16px 0}
#control .io-feedback{display:flex;align-items:baseline;gap:16px;margin-top:12px;flex-wrap:wrap}
#control .io-feedback .io-result{margin:0;flex-shrink:0}
#control .io-feedback small{line-height:1.5}
@media(max-width:760px){#control .tm-panel{padding:16px}#control .io-title-row{gap:8px 14px}#control .io-feedback{gap:6px 12px}}
/* Trim terminal pipes without rescaling the retained process geometry. */
@media(min-width:1101px){
#overview .sensor-process-flow{grid-template-columns:17.0731707% 36.1232349% 17.0731707% minmax(0,1fr)}
#overview .monitor-zone{margin-left:16px}
}
#overview .scrubber-visual{aspect-ratio:804 / 880}
#overview .scrubber-image-title{left:50%;top:20.45%}
#overview .scrubber-reading{left:66.54%;font-size:19px;text-align:center;display:flex;flex-direction:column;gap:7px;line-height:1;transform:translate(-50%,-50%)}
#overview .scrubber-reading small{display:block;margin:0;font-size:13.5px}
#overview .scrubber-temp-reading{top:38.86%}
#overview .scrubber-rh-reading{top:58.52%}

/* Move the scrubber temperature and humidity reading left by one character width. */
#overview .scrubber-reading { transform:translate(calc(-50% - .5em),-50%); }

/* Third-stage spray sensor layout: icon above its own value and unit. */
#overview .scrubber-temp-reading { left:34.8%; top:calc(39% + .5em); transform:translate(-50%,-50%); }
#overview .scrubber-rh-reading { left:65.2%; top:calc(39% + .5em); transform:translate(-50%,-50%); }

/* Gas Concentration legend: striped inlet, solid outlet. */
#frontSo2Bar { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),#B388FF!important; }
#rearSo2Bar { background:#D8C4FF!important; }
#frontNoBar { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),#FF9800!important; }
#rearNoBar { background:#FFCC80!important; }
#overview .monitor-zone .zone-title h3{font-size:19.5px}
@media(max-width:1100px){#overview .monitor-zone{margin-left:0}#overview .scrubber-visual{max-width:540px}}
#overview .monitor-zone .zone-title{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:4px}
#overview .monitor-zone .zone-title>div{width:100%}

@media(min-width:1101px){#overview .sensor-zone,#overview .sensor-zone.scrubber-zone{padding-bottom:20px}}

/* Flow directions and separate greenhouse readings within existing cards. */
#overview .front-zone,#overview .rear-zone{overflow:hidden}
#overview .zone-flow-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#overview .greenhouse-zone{position:absolute;left:12px;right:12px;bottom:58px}
#overview .greenhouse-zone h3{margin:0 0 14px;text-align:center;font-size:22px;color:var(--text)}
#overview .greenhouse-sensors{background:rgba(9,17,31,.18);border-top:1px solid var(--line)}
@media(max-width:1100px){
#overview .front-zone{min-height:580px}
#overview .rear-zone{min-height:580px}
}

/* Click feedback belongs to the switch being operated. */
#control .tm-key{transition:none;user-select:none}
#control .tm-key[aria-disabled="false"]:active,#control .tm-key.web-pressed{color:#ffd740;background:#38260d;border-color:#ff9800;box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 0 8px rgba(255,152,0,.3);transform:translateY(2px)}
#control .tm-key.pending{outline:2px solid #ffd740;outline-offset:2px}
#control .tm-key:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#control .switch-pending .io-send button:disabled{opacity:1}

/* Scrubber equipment rows, backed by front TM1638 state. */
.monitor-zone {overflow:auto!important;min-width:270px;}
.monitor-zone .zone-title h3 {font-size:18px!important;white-space:normal!important;}
#scrubberControls {display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:13px;padding:12px 10px 0!important;}
.scrubber-row {display:grid;grid-template-columns:minmax(148px,calc((100% - 68px)/2)) 60px;align-items:center;justify-content:space-between;gap:8px;}
.scrubber-row button {min-height:37px;border:1px solid #748797;border-radius:4px;background:#f3f7fa;color:#172b3c;font-family:inherit;font-weight:600;font-size:13px;text-align:left;padding:7px 9px;cursor:pointer;}
.scrubber-row button:disabled {opacity:1;cursor:default;}
#scrubberControls.is-offline .scrubber-row button {opacity:.55;}
.scrubber-row button.command-pending {outline:2px solid #48b7dc;outline-offset:1px;}
.scrubber-row button:active,.scrubber-row button.physical-pressed {background:#d2e4f3;box-shadow:inset 0 0 0 2px #4496bc;}
.scrubber-led {display:flex;align-items:center;justify-content:flex-start;gap:5px;font-size:12px;font-weight:700;color:#65717b;}
.scrubber-led:before {content:'';width:12px;height:12px;flex-shrink:0;border-radius:50%;background:#78828a;}
.scrubber-led.on {color:#187445;}.scrubber-led.on:before {background:#27a66b;box-shadow:0 0 5px #27a66b55;}
.scrubber-led.unknown:before {background:transparent;border:1px solid #87929b;}
.fan-group {display:flex;flex-direction:column;gap:9px;border:1px solid #96acba;border-radius:6px;padding:9px 7px;margin-top:3px;}
.scrubber-speed-row {display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px;align-items:center;font-size:11px;font-weight:600;}
.fan-slider {display:flex;align-items:center;gap:4px;min-width:0;}
.fan-slider input {width:100%;min-width:0;accent-color:#2188ac;}.fan-slider span {min-width:32px;text-align:right;}
#fanSpeedActual {min-width:0;width:100%;box-sizing:border-box;font-size:11px;color:#17394d;background:#f5fafc;border:1px solid #aebfcb;border-radius:3px;padding:7px 3px;text-align:center;}
#fanCalibration {font-size:10px;color:#9db0bd;}
.scrubber-result {font-size:10px;line-height:1.4;margin:0;color:#9db0bd;}

/* Keep authored colors when the browser uses an automatic darkening mode. */
:root {color-scheme:only light;}
#overview .monitor-zone {display:flex;flex-direction:column;padding-bottom:12px;}
.monitor-zone .zone-title {flex:none;}
.scrubber-row button {appearance:none;-webkit-appearance:none;transition:none;line-height:1.25;}
.scrubber-row button:disabled:not(.physical-pressed) {background:#f3f7fa;color:#172b3c;}
.scrubber-row button:focus-visible {outline:2px solid #48b7dc;outline-offset:2px;}
.fan-group {gap:11px;}

/* Preserve SO2's original semantic palette on this authored dark dashboard. */
:root {--sensor-so2:#B388FF;}
#overview [data-metric="so2"],
#overview .so2-compare header b,
#overview .top-reduction-panel .reduction-body > div:has(#so2Bar) > span,
#trends .trend-card:has(#chartSo2) .trend-card-head h3 {color:#B388FF!important;}
#frontSo2Bar {background:#B388FF!important;}
#rearSo2Bar {background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),#B388FF!important;}
#so2Bar {background:#D8C4FF!important;}
#overview .front-flow-arrow path {fill:#806600!important;}

/* Gas Concentration only: same color by gas, stripe indicates inlet. */
#overview #frontSo2Bar {background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),#B388FF!important;}
#overview #rearSo2Bar {background:#B388FF!important;}
#overview #frontNoBar {background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(8,21,35,.55) 5px 7px),#FF9800!important;}
#overview #rearNoBar {background:#FF9800!important;}

/* Equipment state follows acknowledged TM1638 LED bits, including while pending. */
#scrubberControls .scrubber-row button {
  background:#d9d9d9;color:#000;border-color:#909090;
}
#scrubberControls .scrubber-row button[aria-pressed="true"] {
  background:#ff1e1e;color:#000;border-color:#ff8a8a;
}
#scrubberControls .scrubber-row button:active,
#scrubberControls .scrubber-row button.physical-pressed {
  box-shadow:inset 0 0 0 2px #4496bc;
}
/* Match I/O Control's LED fill, rim and glow; enlarge 12px circles to 18px. */
#scrubberControls .scrubber-led {color:#b88;}
#scrubberControls .scrubber-led:before {
  box-sizing:border-box;width:18px;height:18px;background:#160b0b;
  border:1px solid #6b2a2a;box-shadow:none;
}
#scrubberControls .scrubber-led.on {color:#fff;}
#scrubberControls .scrubber-led.on:before {
  background:#ff1e1e;border-color:#ff8a8a;box-shadow:0 0 10px #ff3030;
}
#scrubberControls .scrubber-led.unknown {color:#87929b;}
#scrubberControls .scrubber-led.unknown:before {
  background:transparent;border-color:#87929b;box-shadow:none;
}

/* Match the sensor metric labels; long equipment names wrap within the narrow buttons. */
#scrubberControls .scrubber-row button {font-size:18px;font-weight:700;line-height:1.25;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}

/* Equipment controls: one-line labels, semantic teal/slate states, tactile button shape. */
#scrubberControls .scrubber-row {grid-template-columns:max-content 60px;justify-content:start;column-gap:12px;}
#scrubberControls .scrubber-row button {
  min-width:148px;max-width:calc(100vw - 112px);width:max-content;
  min-height:40px;padding:7px 13px;text-align:center;white-space:nowrap;
  overflow:visible;word-break:normal;overflow-wrap:normal;
  color:#dbe8f5;background:linear-gradient(180deg,#30485d 0%,#203346 100%);
  border:1px solid #58748b;border-radius:8px;
  box-shadow:0 2px 0 #142333,0 3px 7px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.13);
  transition:filter .12s,transform .08s,box-shadow .08s;
}
#scrubberControls .scrubber-row button[aria-pressed="true"] {
  color:#fff;background:linear-gradient(180deg,#15b99f 0%,#008f7d 100%);
  border-color:#57d9c5;box-shadow:0 2px 0 #006b60,0 3px 9px rgba(0,168,135,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
#scrubberControls .scrubber-row button:hover:not(:disabled) {filter:brightness(1.12);}
#scrubberControls .scrubber-row button:active,
#scrubberControls .scrubber-row button.physical-pressed,
#scrubberControls .scrubber-row button.command-pending {
  transform:translateY(2px);box-shadow:0 0 0 #142333,0 1px 3px rgba(0,0,0,.3),inset 0 2px 4px rgba(0,0,0,.18);
}
#scrubberControls .scrubber-row button:disabled:not(.physical-pressed) {opacity:1;}
#scrubberControls.is-offline .scrubber-row button {opacity:.55;}
@media(max-width:760px){#scrubberControls .scrubber-row button{max-width:calc(100vw - 120px);font-size:16px;padding-inline:9px;}}

/* Equipment controls: one-line labels, semantic teal/slate states, tactile button shape. */
#scrubberControls .scrubber-row {grid-template-columns:max-content 60px;justify-content:start;column-gap:12px;}
#scrubberControls .scrubber-row button {
  min-width:148px;max-width:calc(100vw - 112px);width:max-content;
  min-height:40px;padding:7px 13px;text-align:center;white-space:nowrap;
  overflow:visible;word-break:normal;overflow-wrap:normal;
  color:#dbe8f5;background:linear-gradient(180deg,#30485d 0%,#203346 100%);
  border:1px solid #58748b;border-radius:8px;
  box-shadow:0 2px 0 #142333,0 3px 7px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.13);
  transition:filter .12s,transform .08s,box-shadow .08s;
}
#scrubberControls .scrubber-row button[aria-pressed="true"] {
  color:#fff;background:linear-gradient(180deg,#15b99f 0%,#008f7d 100%);
  border-color:#57d9c5;box-shadow:0 2px 0 #006b60,0 3px 9px rgba(0,168,135,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
#scrubberControls .scrubber-row button:hover:not(:disabled) {filter:brightness(1.12);}
#scrubberControls .scrubber-row button:active,
#scrubberControls .scrubber-row button.physical-pressed,
#scrubberControls .scrubber-row button.command-pending {
  transform:translateY(2px);box-shadow:0 0 0 #142333,0 1px 3px rgba(0,0,0,.3),inset 0 2px 4px rgba(0,0,0,.18);
}
#scrubberControls .scrubber-row button:disabled:not(.physical-pressed) {opacity:1;}
#scrubberControls.is-offline .scrubber-row button {opacity:.55;}
@media(max-width:760px){#scrubberControls .scrubber-row button{max-width:calc(100vw - 120px);font-size:16px;padding-inline:9px;}}
/* Keep the LED column visible when a narrow viewport cannot fit a long label. */
#scrubberControls .scrubber-row {grid-template-columns:minmax(0,1fr) 60px;}
#scrubberControls .scrubber-row button {max-width:100%;overflow:hidden;text-overflow:ellipsis;}

/* Equalize all equipment buttons to the longest label and remove the card scrollbar. */
#overview .monitor-zone {overflow:hidden!important;}
#scrubberControls {gap:10px;padding-top:10px!important;}
#scrubberControls .scrubber-row button {min-height:36px;padding-top:5px;padding-bottom:5px;}
.fan-group {gap:8px;padding-top:7px;padding-bottom:7px;}
@media(max-width:760px){#scrubberControls .scrubber-row button{font-size:16px;min-height:34px;}}

/* One explicit size for every equipment button, including ID Fan. */
#scrubberControls .scrubber-row {grid-template-columns:minmax(0,1fr) 60px;column-gap:12px;}
#scrubberControls .scrubber-row button {
  width:252px!important;max-width:100%!important;
  height:36px!important;min-height:36px!important;box-sizing:border-box;
  padding:0 13px!important;line-height:34px!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:760px){#scrubberControls .scrubber-row button{height:34px!important;min-height:34px!important;line-height:32px!important;}}

/* Command feedback: a switch changes immediately; LEDs wait for ESP32 state. */
#scrubberControls .scrubber-row button.command-pending {
  outline:2px solid #ffd740;outline-offset:2px;
}
#scrubberControls .scrubber-row button.command-pending.command-on {
  background:linear-gradient(180deg,#15b99f 0%,#008f7d 100%);
  border-color:#57d9c5;color:#fff;
}
#scrubberControls .scrubber-row button.command-pending.command-off {
  background:linear-gradient(180deg,#30485d 0%,#203346 100%);
  border-color:#65cde7;color:#dbe8f5;
}
#control .tm-key.command-pending {outline:2px solid #ffd740;outline-offset:2px;}

/* Expand the frame while keeping its content aligned with the seven outer rows. */
#scrubberControls > .fan-group {
  margin-left:-8px;
  margin-right:-8px;
  padding-left:7px;
  padding-right:7px;
  border-width:1px;
  min-width:0;
}
#control .tm-key.command-pending.command-on {
  color:#ffd740;background:#38260d;border-color:#ff9800;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 0 8px rgba(255,152,0,.3);
}
#control .tm-key.command-pending.command-off {
  color:#b9dce8;background:#102a39;border-color:#65cde7;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.45),0 0 8px rgba(101,205,231,.22);
}

/* One explicit size for every equipment button, including ID Fan. */
#scrubberControls .scrubber-row {grid-template-columns:minmax(0,1fr) 60px;column-gap:12px;}
#scrubberControls .scrubber-row button {
  width:252px!important;max-width:100%!important;
  height:36px!important;min-height:36px!important;box-sizing:border-box;
  padding:0 13px!important;line-height:34px!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:760px){#scrubberControls .scrubber-row button{height:34px!important;min-height:34px!important;line-height:32px!important;}}

/* Retain confirmed output state on I/O switches after command completion. */
#control .tm-key.command-on {color:#fff;background:linear-gradient(180deg,#15b99f,#008f7d);border-color:#57d9c5;}
#control .tm-key.command-off {color:#dbe8f5;background:linear-gradient(180deg,#30485d,#203346);border-color:#58748b;}
#control .tm-key.command-pending {outline:2px solid #ffd740;outline-offset:2px;}

/* Actual speed precedes the setpoint; keep the fan switch first. */
#scrubberControls .fan-group > .scrubber-row {order:0;}
#scrubberControls .fan-group > .scrubber-speed-row:has(#fanSpeedActual) {order:1;}
#scrubberControls .fan-group > .scrubber-speed-row:has(#fanSpeedSet) {order:2;}
#scrubberControls .fan-group > #fanCalibration {order:3;}

/* Larger fan labels and values, with a transparent actual-speed field. */
#scrubberControls .scrubber-speed-row {
  grid-template-columns:132px minmax(0,1fr);
  gap:8px;
  font-size:13px;
}
#scrubberControls .scrubber-speed-row label {white-space:nowrap;}
#scrubberControls #fanSetPercent {font-size:14px;min-width:38px;}
#scrubberControls #fanSpeedActual {
  background:transparent;
  color:#fff176;
  -webkit-text-fill-color:#fff176;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  padding:5px 2px;
  line-height:1.35;
}

/* Trends: use the available screen area for six readable charts. */
.content:has(#trends.active) { max-width:none; padding:8px 8px 6px; }
#trends .page-heading { min-height:38px; margin-bottom:8px; align-items:center; gap:12px; }
#trends .page-heading > div:first-child { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
#trends .page-heading h2 { font-size:26px; }
#trends .page-heading p { margin:0!important; }
#trends .trend-grid-six { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; margin:0; }
#trends .trend-card { width:auto; min-width:0; min-height:0; margin:0; padding:0 6px 4px; display:flex; flex-direction:column; }
#trends .trend-card-head { min-height:34px; padding:5px 0; gap:4px 8px; }
#trends .trend-card-head h3 { font-size:15px; }
#trends .trend-values, #trends .trend-values b { font-size:14px; }
#trends .trend-values { gap:4px 8px; }
#trends .series-key { font-size:12px; line-height:1.25; padding:3px 0; }
#trends .trend-card canvas { width:100%; height:0; min-height:120px; flex:1 1 0; }
@media(max-width:900px) {
 #trends .trend-grid-six { grid-template-columns:minmax(0,1fr); grid-template-rows:none; height:auto!important; }
 #trends .trend-card canvas { height:210px; flex:none; }
 #trends .trend-card-head { display:flex; }
}
@media(max-width:470px) {
 #trends .page-heading { display:flex; align-items:center; flex-wrap:wrap; }
 #trends .range-switch { margin-top:0; }
 #trends .trend-controls { width:100%; justify-content:flex-start; }
 #trends .trend-nav-button { min-height:30px; }
 #trends .trend-card-head h3 { font-size:14px; }
 #trends .trend-values, #trends .trend-values b { font-size:13px; }
}

/* Match each Trends title and its labels, values and units. */
#trends .trend-card:has(#chartSo2) { --trend-header-color:#B388FF; }
#trends .trend-card:has(#chartNo) { --trend-header-color:#FF9800; }
#trends .trend-card:has(#chartTemp) { --trend-header-color:#FF5252; }
#trends .trend-card:has(#chartCo2) { --trend-header-color:#40C4FF; }
#trends .trend-card:has(#chartRh) { --trend-header-color:#69F0AE; }
#trends .trend-card:has(#chartCo) { --trend-header-color:#FFD740; }
#trends .trend-card-head h3,
#trends .trend-card-head .trend-values,
#trends .trend-card-head .trend-values span,
#trends .trend-card-head .trend-values b {
 font-size:15px; color:var(--trend-header-color)!important;
}
/* Keep the existing alarm emphasis on an alarming measured value. */
#trends .trend-card-head .trend-values b.value-alarm { color:#FF5252!important; }
@media(max-width:470px) {
 #trends .trend-card-head h3,
 #trends .trend-card-head .trend-values,
 #trends .trend-card-head .trend-values span,
 #trends .trend-card-head .trend-values b { font-size:14px; }
}


/* Trusted NVMe History status for time-based Trends (2026-09-25). */
#trends .trend-history-status { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border:1px solid #31506a; border-radius:5px; color:#9caebe; background:#0d1929; font-size:11px; white-space:nowrap; }
#trends .trend-history-status.loading { color:var(--amber); border-color:rgba(242,184,75,.45); }
#trends .trend-history-status.ready { color:var(--green); border-color:rgba(85,214,139,.4); }
#trends .trend-history-status.current { color:var(--green); border-color:rgba(85,214,139,.55); background:rgba(85,214,139,.06); }
#trends .trend-history-status.simulated { color:var(--cyan); border-color:rgba(67,198,217,.4); }
#trends .trend-history-status.empty { color:var(--muted); }
#trends .trend-history-status.error { color:var(--red); border-color:rgba(239,107,114,.5); }
@media (max-width:760px) { #trends .trend-history-status { margin-top:6px; white-space:normal; } }


/* Trends fetch feedback: keep the current graph visible while making a slow History move feel immediate. */
#trends .trend-grid-six { position: relative; }
#trends .trend-card { transition: opacity .12s ease, filter .12s ease; }
#trends.trend-loading .trend-card { opacity: .46; filter: saturate(.72); }
#trends.trend-loading .trend-grid-six::after {
  content: "불러오는 중...";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border: 1px solid #31506a;
  border-radius: 8px;
  color: var(--text);
  background: rgba(9,17,31,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;
}
#trends.trend-loading .trend-controls,
#trends.trend-loading .trend-controls button { cursor: progress; }
.range-switch button:disabled { opacity: .48; cursor: progress; }


/* 20260925-trendlegend2 */

/* Only one series/value display remains below each Trend title. */
#trends .trend-series-values {
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:6px 30px;
  min-height:30px;
  padding:5px 1px 6px;
  margin:0;
  font-size:15px;
  line-height:1.2;
}

#trends .trend-series-item {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  color:var(--trend-header-color) !important;
  font-size:15px;
  font-weight:500;
}

#trends .trend-series-glyph {
  display:inline-block;
  min-width:22px;
  margin-right:5px;
  color:var(--trend-header-color) !important;
  font-size:18px;
  font-weight:700;
  letter-spacing:1px;
}

#trends .trend-series-number {
  margin-left:5px;
  color:var(--trend-header-color) !important;
  font-family:Consolas, monospace;
  font-size:15px;
  font-weight:700;
}

/* Controls */
#trends .range-switch button {
  padding:7px 12px !important;
  font-size:15px !important;
}

#trends .trend-nav-button {
  min-height:34px !important;
  padding:6px 11px !important;
  font-size:15px !important;
}

#trends #trendCsvButton {
  margin-left:42px !important;
}

@media(max-width:900px) {
  #trends #trendCsvButton {
    margin-left:16px !important;
  }
}


/* 20260925-inlinehead1 */

/* Put title and live series/value row on the same line. */
#trends .trend-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:6px 14px;
  min-height:28px;
  padding:4px 0 3px;
}

#trends .trend-card-head h3 {
  flex:0 1 auto;
  margin:0;
  white-space:nowrap;
}

#trends .trend-card-head .trend-series-values {
  display:flex !important;
  flex:1 1 auto;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 22px;
  min-height:0;
  padding:0;
  margin:0 0 0 auto;
  font-size:15px;
  line-height:1.2;
}

#trends .trend-card-head .trend-series-item {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  color:var(--trend-header-color) !important;
  font-size:15px;
  font-weight:500;
}

#trends .trend-card-head .trend-series-glyph {
  display:inline-block;
  min-width:18px;
  margin-right:4px;
  color:var(--trend-header-color) !important;
  font-size:18px;
  font-weight:700;
  letter-spacing:1px;
}

#trends .trend-card-head .trend-series-number {
  margin-left:4px;
  color:var(--trend-header-color) !important;
  font-family:Consolas, monospace;
  font-size:15px;
  font-weight:700;
}

@media(max-width:1100px) {
  #trends .trend-card-head {
    flex-wrap:wrap;
    align-items:flex-start;
  }

  #trends .trend-card-head .trend-series-values {
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
}


/* 20260925-rowgap1 */
/* Use the removed legend-row height as spacing between chart rows. */
@media (min-width: 901px) {
  #trends .trend-grid-six {
    column-gap: 36px !important;
    row-gap: 36px !important;
  }
}