@font-face { font-family: "Onest"; src: url("../../vlasovlab-site-rebuild/assets/fonts/onest-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../../vlasovlab-site-rebuild/assets/fonts/onest-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../../vlasovlab-site-rebuild/assets/fonts/onest-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../../vlasovlab-site-rebuild/assets/fonts/jetbrains-mono-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --eh-bg: #080b0d;
  --eh-panel: rgba(18, 23, 26, .9);
  --eh-panel-solid: #12171a;
  --eh-line: rgba(191, 218, 211, .14);
  --eh-line-strong: rgba(191, 218, 211, .28);
  --eh-text: #f2f5f3;
  --eh-muted: #9aa8a3;
  --eh-dim: #62716c;
  --eh-green: #62e6ad;
  --eh-cyan: #60d4e7;
  --eh-blue: #7797ff;
  --eh-amber: #efba67;
  --eh-red: #f07979;
  --eh-radius: 13px;
  --eh-main: "Onest", system-ui, sans-serif;
  --eh-tech: "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--eh-bg); scroll-behavior: smooth; }
body {
  min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--eh-text);
  background: radial-gradient(circle at 12% 0%, rgba(68,158,119,.11), transparent 28rem), radial-gradient(circle at 100% 30%, rgba(62,119,139,.08), transparent 30rem), var(--eh-bg);
  font-family: var(--eh-main); -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; } button { color: inherit; }
.eh-ambient { position: fixed; z-index: 0; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(120px); opacity: .07; pointer-events: none; }
.eh-ambient--one { top: 15rem; left: -11rem; background: var(--eh-green); }
.eh-ambient--two { right: -12rem; bottom: 10rem; background: var(--eh-cyan); }
.eh-shell { position: relative; z-index: 1; width: min(1540px, calc(100% - 32px)); margin: 0 auto; }

.eh-topbar { display: grid; grid-template-columns: auto 1fr auto; min-height: 58px; align-items: center; gap: 24px; border-bottom: 1px solid var(--eh-line); }
.eh-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.eh-brand img { display: block; width: 82px; height: auto; }
.eh-brand__divider { width: 1px; height: 18px; background: var(--eh-line-strong); }
.eh-brand__product, .eh-private, .eh-eyebrow, .eh-quality, .eh-range button, .eh-chart-tabs button, footer span, .eh-console-name, .eh-toolbar-button { font-family: var(--eh-tech); letter-spacing: .08em; }
.eh-brand__product { color: var(--eh-muted); font-size: 10px; }
.eh-console-name { display: flex; align-items: baseline; gap: 9px; color: var(--eh-dim); font-size: 8px; }
.eh-console-name strong { color: var(--eh-muted); font-size: 9px; font-weight: 500; }
.eh-topbar__meta { display: flex; align-items: center; gap: 9px; }
.eh-private { margin-right: 5px; color: var(--eh-green); font-size: 8px; }
.eh-private span { margin-right: 4px; font-size: 6px; }
.eh-toolbar-button { display: inline-flex; min-height: 31px; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--eh-line); border-radius: 7px; color: var(--eh-muted); background: rgba(255,255,255,.02); font-size: 8px; text-decoration: none; cursor: pointer; transition: .18s ease; }
.eh-toolbar-button:hover { border-color: var(--eh-green); color: var(--eh-text); background: rgba(98,230,173,.06); }
.eh-toolbar-button.is-loading .eh-refresh-icon { display: inline-block; animation: eh-spin .8s linear infinite; }
@keyframes eh-spin { to { transform: rotate(360deg); } }

.eh-operator { display: grid; gap: 10px; padding: 13px 0 0; }
.eh-eyebrow { margin: 0 0 7px; color: var(--eh-green); font: 500 8px/1.3 var(--eh-tech); letter-spacing: .09em; }
.eh-status-board { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(190px,.62fr) minmax(300px,1.12fr) minmax(240px,.9fr); min-height: 72px; overflow: visible; border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: linear-gradient(135deg, rgba(20,27,29,.96), rgba(12,16,18,.92)); }
.eh-status-cell { display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 12px 16px; border-right: 1px solid var(--eh-line); }
.eh-status-cell:nth-of-type(3) { border-right: 0; }
.eh-status-cell > span, .eh-status-cell div > span { display: block; margin-bottom: 5px; color: var(--eh-dim); font: 500 7px/1.2 var(--eh-tech); letter-spacing: .08em; }
.eh-status-cell > strong, .eh-status-cell div > strong { font: 500 12px/1.25 var(--eh-tech); }
.eh-status-cell small { margin-top: 4px; overflow: hidden; color: var(--eh-dim); font: 500 8px/1.35 var(--eh-tech); text-overflow: ellipsis; white-space: nowrap; }
.eh-status-cell--primary { flex-direction: row; align-items: center; justify-content: flex-start; gap: 13px; }
.eh-status-cell--primary > strong { flex: 0 0 auto; }
#sdUsage { overflow: visible; text-overflow: clip; white-space: normal; }
.eh-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--eh-dim); box-shadow: 0 0 0 6px rgba(98,230,173,.05); }
.eh-status-dot.is-online { background: var(--eh-green); box-shadow: 0 0 15px rgba(98,230,173,.72), 0 0 0 6px rgba(98,230,173,.07); }
.eh-status-dot.is-stale { background: var(--eh-amber); box-shadow: 0 0 15px rgba(239,186,103,.56), 0 0 0 6px rgba(239,186,103,.07); }
.eh-status-dot.is-offline, .eh-status-dot.is-error { background: var(--eh-red); box-shadow: 0 0 15px rgba(240,121,121,.5), 0 0 0 6px rgba(240,121,121,.07); }
.eh-status-board__sync { position: absolute; right: 8px; bottom: 5px; color: var(--eh-dim); font: 500 6px/1 var(--eh-tech); text-transform: uppercase; }

.eh-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.eh-metric-card { position: relative; min-height: 116px; overflow: hidden; padding: 13px 15px; border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: var(--eh-panel); transition: transform .18s ease, border-color .18s ease; }
.eh-metric-card:hover { z-index: 1; border-color: var(--eh-line-strong); transform: translateY(-2px); }
.eh-metric-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--metric-color,var(--eh-green)); opacity: .85; }
.eh-metric-card--co2 { --metric-color: var(--eh-green); } .eh-metric-card--temperature { --metric-color: var(--eh-amber); } .eh-metric-card--humidity { --metric-color: var(--eh-cyan); } .eh-metric-card--pressure { --metric-color: var(--eh-blue); } .eh-metric-card--oxygen { --metric-color: #b39cff; } .eh-metric-card--temperature-outside { --metric-color: #ff9a72; } .eh-metric-card--humidity-outside { --metric-color: #79a8ff; }
.eh-quality { position: absolute; z-index: 2; top: 18px; right: 15px; padding: 4px 6px; border-radius: 5px; color: var(--eh-dim); background: rgba(255,255,255,.04); font-size: 8px; }
.eh-quality.is-ok { color: var(--eh-green); background: rgba(98,230,173,.08); } .eh-quality.is-suspect { color: var(--eh-amber); background: rgba(239,186,103,.09); }
.eh-quality.is-invalid { color: var(--eh-red); background: rgba(240,121,121,.1); }
.eh-metric-card__value { display: flex; align-items: baseline; gap: 7px; margin: 10px 92px 5px 0; }
.eh-metric-card__value strong { font-size: clamp(26px,2.2vw,38px); font-weight: 600; letter-spacing: -.05em; }
.eh-metric-card__value span { color: var(--eh-muted); font: 500 9px/1 var(--eh-tech); }
.eh-metric-card p { position: relative; z-index: 1; margin: 0; color: var(--eh-muted); font-size: 12.5px; line-height: 1.3; }
.eh-sparkline { position: absolute; right: 14px; bottom: 9px; left: 14px; height: 26px; opacity: .67; }
.eh-sparkline svg { display: block; width: 100%; height: 100%; overflow: visible; }

.eh-chart-panel, .eh-debug { border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: var(--eh-panel); backdrop-filter: blur(16px); }
.eh-chart-panel { padding: 15px 18px 11px; }
.eh-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.eh-section-heading h1, .eh-section-heading h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.eh-range { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--eh-line); border-radius: 8px; background: rgba(0,0,0,.18); }
.eh-range button, .eh-chart-tabs button { border: 0; background: transparent; cursor: pointer; }
.eh-range button { padding: 6px 9px; border-radius: 5px; color: var(--eh-dim); font-size: 7px; }
.eh-range button:hover, .eh-range button.is-active { color: var(--eh-text); background: rgba(255,255,255,.07); }
.eh-chart-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0 2px; }
.eh-chart-tabs button { padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; color: var(--eh-dim); font-size: 7px; }
.eh-chart-tabs button:hover, .eh-chart-tabs button.is-active { border-color: var(--eh-line); color: var(--eh-text); background: rgba(255,255,255,.035); }
.eh-chart { position: relative; min-height: 238px; margin-top: 1px; }
.eh-chart svg { display: block; width: 100%; height: 238px; overflow: visible; }
.eh-chart__empty { display: grid; min-height: 230px; place-items: center; color: var(--eh-dim); font: 500 9px/1.5 var(--eh-tech); }
.eh-chart-grid { stroke: rgba(191,218,211,.095); stroke-width: 1; } .eh-chart-axis { fill: var(--eh-dim); font: 500 8px var(--eh-tech); } .eh-chart-area { fill: url(#eh-area-gradient); } .eh-chart-line { fill: none; stroke: var(--eh-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(98,230,173,.2)); } .eh-chart-last { fill: var(--eh-bg); stroke: var(--eh-green); stroke-width: 3; }
.eh-chart-legend { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 8px; border-top: 1px solid var(--eh-line); color: var(--eh-dim); font: 500 7px/1 var(--eh-tech); letter-spacing: .06em; text-transform: uppercase; }
.eh-chart-legend span { display: flex; align-items: center; gap: 8px; } .eh-chart-legend i { width: 16px; height: 2px; background: var(--eh-green); box-shadow: 0 0 8px rgba(98,230,173,.5); } .eh-chart-legend strong { color: var(--eh-muted); font-weight: 500; }

.eh-debug { overflow: hidden; }
.eh-debug summary { display: flex; min-height: 39px; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; list-style: none; }
.eh-debug summary::-webkit-details-marker { display: none; }
.eh-debug summary span { color: var(--eh-green); font: 500 7px/1 var(--eh-tech); letter-spacing: .09em; }
.eh-debug summary strong { font-size: 11px; }
.eh-debug summary small { color: var(--eh-dim); font: 500 7px/1 var(--eh-tech); }
.eh-debug summary i { display: grid; width: 29px; height: 29px; flex: 0 0 auto; margin-left: auto; place-items: center; border: 1px solid var(--eh-line); border-radius: 7px; color: var(--eh-dim); background: rgba(255,255,255,.025); font: 500 14px/1 var(--eh-tech); font-style: normal; transition: transform .24s ease, border-color .18s ease, color .18s ease, background .18s ease; }
.eh-debug summary:hover i, .eh-debug summary:focus-visible i, .eh-debug[open] summary i { border-color: rgba(98,230,173,.58); color: var(--eh-green); background: rgba(98,230,173,.07); }
.eh-debug[open] summary i { transform: rotate(180deg); }
.eh-debug__grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-top: 1px solid var(--eh-line); }
.eh-debug__grid div { min-height: 72px; padding: 13px; border-right: 1px solid var(--eh-line); }
.eh-debug__grid div:last-child { border-right: 0; }
.eh-debug__grid span { display: block; margin-bottom: 10px; color: var(--eh-dim); font: 500 7px/1.3 var(--eh-tech); letter-spacing: .05em; }
.eh-debug__grid strong { font: 500 11px/1.4 var(--eh-tech); }
.eh-debug__note { margin: 0; padding: 12px 14px 4px; border-top: 1px solid var(--eh-line); color: var(--eh-dim); font: 500 8px/1.5 var(--eh-tech); }
.eh-debug__help { display: inline-block; margin: 5px 14px 12px; color: var(--eh-green); font: 500 8px/1.4 var(--eh-tech); text-decoration: none; }
.eh-test-footer { display: flex; min-height: 29px; align-items: center; gap: 11px; padding: 5px 9px; border: 1px solid rgba(239,186,103,.2); border-radius: 8px; background: rgba(239,186,103,.035); color: var(--eh-dim); font: 500 7px/1 var(--eh-tech); letter-spacing: .06em; }
.eh-test-footer[hidden] { display: none; }
.eh-test-notice__mark { flex: 0 0 auto; padding: 5px 7px; border-radius: 5px; color: var(--eh-amber); background: rgba(239,186,103,.1); font: 500 7px/1 var(--eh-tech); }
.eh-test-footer a { margin-left: auto; color: var(--eh-amber); text-decoration: none; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0 14px; color: var(--eh-dim); font-size: 8px; } footer span { color: var(--eh-muted); font-size: 7px; } footer p { margin: 0; }

/* System reference */
.eh-system { padding: 25px 0 40px; }
.eh-system-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--eh-line); }
.eh-system-head h1 { margin: 0 0 6px; font-size: clamp(28px,4vw,48px); letter-spacing: -.04em; }
.eh-system-head p:not(.eh-eyebrow) { max-width: 780px; margin: 0; color: var(--eh-muted); font-size: 15px; line-height: 1.65; }
.eh-system-live { min-width: 220px; padding: 14px 16px; border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: var(--eh-panel); }
.eh-system-live span, .eh-system-live small { display: block; color: var(--eh-dim); font: 500 10px/1.5 var(--eh-tech); letter-spacing: .06em; }
.eh-system-live strong { display: block; margin: 7px 0 4px; font: 500 15px/1.35 var(--eh-tech); }
.eh-system-tabs { display: flex; gap: 5px; margin: 18px 0; padding: 4px; border: 1px solid var(--eh-line); border-radius: 9px; background: rgba(0,0,0,.14); }
.eh-system-tabs button { flex: 1; padding: 11px 13px; border: 0; border-radius: 6px; color: var(--eh-dim); background: transparent; font: 500 11px/1 var(--eh-tech); letter-spacing: .06em; cursor: pointer; }
.eh-system-tabs button:hover, .eh-system-tabs button.is-active { color: var(--eh-text); background: rgba(98,230,173,.07); }
.eh-system-panel { display: none; } .eh-system-panel.is-active { display: block; }
.eh-info-grid, .eh-dictionary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.eh-info-grid article, .eh-dictionary article, .eh-status-reference article, .eh-event-log, .eh-system-pipeline article { padding: 20px; border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: var(--eh-panel); }
.eh-info-grid article > span { color: var(--eh-green); font: 500 10px/1 var(--eh-tech); letter-spacing: .07em; }
.eh-info-grid h2, .eh-event-log h2 { margin: 10px 0 8px; font-size: 20px; }
.eh-info-grid p, .eh-dictionary p, .eh-status-reference p, .eh-system-pipeline p { margin: 0; color: var(--eh-muted); font-size: 14px; line-height: 1.7; }
.eh-sensor-intro { display: grid; grid-template-columns: auto auto minmax(260px,1fr); align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: rgba(98,230,173,.04); }
.eh-sensor-intro span, .eh-sensor-grid article > span { color: var(--eh-green); font: 600 10px/1.25 var(--eh-tech); letter-spacing: .07em; }
.eh-sensor-intro strong { font-size: 18px; }
.eh-sensor-intro p { margin: 0; color: var(--eh-muted); font-size: 14px; line-height: 1.65; }
.eh-sensor-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.eh-sensor-grid article { min-width: 0; padding: 17px; border: 1px solid var(--eh-line); border-radius: var(--eh-radius); background: var(--eh-panel); }
.eh-sensor-grid h2 { margin: 10px 0 4px; font-size: 18px; }
.eh-sensor-grid article > strong { display: block; min-height: 34px; color: var(--eh-text); font: 600 12px/1.5 var(--eh-tech); }
.eh-sensor-grid p { margin: 10px 0 0; color: var(--eh-muted); font-size: 13px; line-height: 1.65; }
code { color: var(--eh-green); font-family: var(--eh-tech); font-size: .9em; }
.eh-system-pipeline { display: grid; grid-template-columns: 1fr; gap: 7px; }
.eh-system-pipeline article { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; }
.eh-system-pipeline article > span { color: var(--eh-green); font: 500 11px/1 var(--eh-tech); }
.eh-system-pipeline strong, .eh-dictionary strong { display: block; margin-bottom: 8px; font: 500 13px/1.45 var(--eh-tech); }
.eh-system-pipeline > i { padding-left: 19px; color: var(--eh-dim); font: normal 500 10px/1.55 var(--eh-tech); letter-spacing: .06em; }
.eh-dictionary { grid-template-columns: repeat(3,minmax(0,1fr)); }
.eh-status-reference { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.eh-status-reference article { display: grid; grid-template-columns: 12px 1fr; gap: 13px; }
.eh-ref-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--eh-dim); } .eh-ref-dot.is-online { background: var(--eh-green); } .eh-ref-dot.is-stale { background: var(--eh-amber); } .eh-ref-dot.is-offline { background: var(--eh-red); }
.eh-status-reference strong { display: block; margin-bottom: 8px; font: 500 13px/1.45 var(--eh-tech); }
.eh-event-log { margin-top: 10px; }
.eh-event-log ol { margin: 15px 0 0; padding: 0; list-style: none; }
.eh-event-log li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--eh-line); color: var(--eh-muted); font-size: 13px; }
.eh-event-log li > span { width: 7px; height: 7px; border-radius: 50%; background: var(--eh-dim); } .eh-event-log li > span.is-online { background: var(--eh-green); } .eh-event-log li > span.is-offline { background: var(--eh-red); }
.eh-event-log time { color: var(--eh-dim); font: 500 10px/1 var(--eh-tech); }

@media (min-width: 980px) and (max-height: 780px) {
  .eh-operator { gap: 7px; padding-top: 9px; }
  .eh-status-board { min-height: 68px; }
  .eh-status-cell { padding-top: 9px; padding-bottom: 9px; }
  .eh-metric-card { min-height: 111px; padding-top: 11px; }
  .eh-metric-card__value { margin-top: 10px; }
  .eh-sparkline { height: 20px; }
  .eh-chart-panel { padding-top: 11px; padding-bottom: 8px; }
  .eh-chart { min-height: 185px; } .eh-chart svg { height: 185px; } .eh-chart__empty { min-height: 180px; }
  .eh-chart-tabs { margin-top: 5px; }
  footer { display: none; }
}

@media (max-width: 1080px) {
  .eh-console-name { display: none; }
  .eh-topbar { grid-template-columns: 1fr auto; }
  .eh-status-board { grid-template-columns: minmax(170px,.65fr) minmax(280px,1.15fr) minmax(220px,.9fr); }
  .eh-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .eh-debug__grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .eh-dictionary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .eh-shell { width: min(100% - 20px,1540px); }
  .eh-topbar { min-height: 54px; gap: 10px; }
  .eh-brand img { width: 72px; }
  .eh-brand__product, .eh-private { display: none; }
  .eh-toolbar-button { padding: 7px 8px; }
  .eh-toolbar-button:not(.eh-toolbar-button--back) > span:last-child { display: none; }
  .eh-operator { padding-top: 9px; }
  .eh-status-board { grid-template-columns: 1fr 1fr; }
  .eh-status-cell { min-height: 69px; }
  .eh-status-cell:nth-of-type(3) { grid-column: 1 / -1; border-bottom: 0; }
  .eh-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eh-metric-card { min-height: 125px; }
  .eh-section-heading { align-items: stretch; flex-direction: column; gap: 10px; }
  .eh-range { width: 100%; } .eh-range button { flex: 1; }
  .eh-chart { min-height: 280px; } .eh-chart svg { height: 280px; } .eh-chart__empty { min-height: 270px; }
  .eh-debug__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eh-debug summary small { display: none; }
  .eh-test-footer { flex-wrap: wrap; padding: 8px; line-height: 1.4; } .eh-test-footer a { margin-left: 0; }
  footer { align-items: flex-start; flex-direction: column; padding-bottom: 20px; }
  .eh-system { padding-top: 18px; }
  .eh-system-head { grid-template-columns: 1fr; }
  .eh-system-live { width: 100%; }
  .eh-system-tabs { overflow-x: auto; } .eh-system-tabs button { min-width: 120px; }
  .eh-info-grid, .eh-dictionary, .eh-status-reference { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .eh-topbar { grid-template-columns: 1fr; padding: 8px 0; gap: 6px; }
  .eh-topbar__meta { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 5px; }
  .eh-brand__divider { display: none; }
  .eh-toolbar-button--back { font-size: 7px; }
  .eh-status-board { grid-template-columns: 1fr; }
  .eh-status-cell, .eh-status-cell:nth-of-type(3) { grid-column: auto; }
  .eh-metrics { grid-template-columns: 1fr; }
  .eh-metric-card { min-height: 119px; }
  .eh-debug__grid { grid-template-columns: 1fr; }
  .eh-chart-legend { align-items: flex-start; flex-direction: column; }
  .eh-event-log li { grid-template-columns: 8px 1fr; } .eh-event-log time { grid-column: 2; }
}

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

.eh-alert-compact { position: relative; min-width: 0; margin-left: auto; }
.eh-alert-compact[hidden] { display: none; }
.eh-alert-compact summary { display: flex; max-width: 180px; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgba(255,190,72,.5); border-radius: 6px; background: rgba(255,190,72,.08); cursor: pointer; list-style: none; }
.eh-alert-compact summary::-webkit-details-marker { display: none; }
.eh-alert-compact summary span { color: var(--eh-amber); font: 700 8px/1 var(--eh-tech); letter-spacing: .08em; }
.eh-alert-compact summary strong { overflow: hidden; color: var(--eh-text); font: 600 9px/1 var(--eh-tech); text-overflow: ellipsis; white-space: nowrap; }
.eh-alert-compact.is-critical summary { border-color: rgba(255,84,100,.62); background: rgba(255,84,100,.11); }
.eh-alert-compact.is-critical summary span { color: var(--eh-red); }
.eh-alert-compact__detail { position: absolute; z-index: 20; top: calc(100% + 9px); left: 0; width: min(420px,calc(100vw - 44px)); padding: 13px 14px; border: 1px solid var(--eh-line-strong); border-left: 3px solid var(--eh-amber); border-radius: 8px; background: #10171b; box-shadow: 0 18px 50px rgba(0,0,0,.46); }
.eh-alert-compact.is-critical .eh-alert-compact__detail { border-left-color: var(--eh-red); }
.eh-alert-compact__detail p { margin: 0 0 10px; color: var(--eh-muted); font-size: 13px; line-height: 1.5; }
.eh-alert-compact__detail a { color: var(--eh-green); font: 700 10px/1 var(--eh-tech); letter-spacing: .08em; text-decoration: none; }
.eh-metric-card.is-warning { border-color: rgba(255,190,72,.72); box-shadow: inset 0 0 0 1px rgba(255,190,72,.12); }
.eh-metric-card.is-critical { border-color: rgba(255,84,100,.76); box-shadow: inset 0 0 0 1px rgba(255,84,100,.14),0 0 24px rgba(255,84,100,.08); }
.eh-metric-card.is-critical .eh-metric-card__value strong { color: #ff7885; }
.eh-analytics-strip { display: grid; grid-template-columns: 165px minmax(0,1fr); gap: 10px; border: 1px solid var(--eh-line); background: rgba(12,18,25,.82); padding: 10px 12px; }
.eh-analytics-strip__title { display: grid; align-content: center; gap: 3px; border-right: 1px solid var(--eh-line); }
.eh-analytics-strip__title span { color: var(--eh-green); font: 700 10px/1 var(--eh-tech); letter-spacing: .12em; }
.eh-analytics-strip__title strong { font-size: 15px; }
.eh-analytics-strip__title a { color: var(--eh-dim); font: 700 10px/1 var(--eh-tech); text-decoration: none; }
.eh-analytics-strip__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.eh-analytics-strip article { display: grid; gap: 2px; min-width: 0; padding: 4px 8px; border-left: 1px solid var(--eh-line); }
.eh-analytics-strip article span { color: var(--eh-dim); font: 700 10px/1 var(--eh-tech); text-transform: uppercase; }
.eh-analytics-strip article strong { font-size: 17px; white-space: nowrap; }
.eh-analytics-strip article strong i { color: var(--eh-dim); font: 600 10px/1 var(--eh-tech); }
.eh-analytics-strip article small,.eh-analytics-strip article em { overflow: hidden; color: var(--eh-muted); font: 500 10.5px/1.3 var(--eh-tech); text-overflow: ellipsis; white-space: nowrap; }
.eh-analytics-strip article em { color: var(--eh-green); font-style: normal; }
.eh-subpage { width: min(1500px,calc(100% - 24px)); margin: 0 auto; padding: 14px 0 30px; }
.eh-subpage-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; }
.eh-panel { grid-column: span 12; border: 1px solid var(--eh-line); background: rgba(12,18,25,.88); padding: 16px; }
.eh-panel--half { grid-column: span 6; }
.eh-panel__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.eh-panel__head h1,.eh-panel__head h2 { margin: 2px 0 0; font-size: 20px; }
.eh-panel__head p { margin: 0; color: var(--eh-dim); font: 600 10px/1 var(--eh-tech); letter-spacing: .1em; }
.eh-period-tabs,.eh-command-row { display: flex; flex-wrap: wrap; gap: 7px; }
.eh-period-tabs button,.eh-action-button,.eh-field button { border: 1px solid var(--eh-line-strong); background: #111a23; color: var(--eh-muted); padding: 8px 11px; font: 700 11px/1 var(--eh-tech); cursor: pointer; }
.eh-period-tabs button.is-active,.eh-action-button--primary { border-color: var(--eh-green); color: var(--eh-green); }
.eh-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.eh-stats-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 14px; }
.eh-stats-table th,.eh-stats-table td { padding: 11px 9px; border-bottom: 1px solid var(--eh-line); text-align: right; }
.eh-stats-table th:first-child,.eh-stats-table td:first-child { text-align: left; }
.eh-stats-table th { color: var(--eh-dim); font: 700 10px/1 var(--eh-tech); letter-spacing: .07em; }
.eh-stats-table td strong { font-family: var(--eh-tech); }
.eh-settings-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.eh-field { display: grid; gap: 6px; }
.eh-field label { color: var(--eh-dim); font: 700 9px/1.3 var(--eh-tech); letter-spacing: .08em; }
.eh-field input,.eh-field select { width: 100%; border: 1px solid var(--eh-line-strong); background: #0b1219; color: var(--eh-text); padding: 9px; font: 600 12px/1 var(--eh-tech); }
.eh-threshold-block { display: grid; grid-template-columns: 1.1fr repeat(4,minmax(85px,.65fr)); gap: 9px; align-items: end; padding: 11px 0; border-bottom: 1px solid var(--eh-line); }
.eh-threshold-block__name { display: grid; gap: 3px; }
.eh-threshold-block__name span { color: var(--eh-green); font: 700 9px/1 var(--eh-tech); }
.eh-status-message { margin: 10px 0 0; color: var(--eh-muted); font: 600 11px/1.4 var(--eh-tech); }
.eh-command-log { display: grid; gap: 7px; }
.eh-command-log article { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px; border: 1px solid var(--eh-line); }
.eh-command-log span { color: var(--eh-dim); font: 600 9px/1 var(--eh-tech); }
.eh-language-switch { min-width: 38px; border-color: rgba(98,230,173,.48); color: var(--eh-green); text-align: center; }
.eh-control-lock { border-color: rgba(255,190,72,.45); background: linear-gradient(100deg,rgba(255,190,72,.08),rgba(12,18,25,.9)); }
.eh-control-lock.is-unlocked { border-color: rgba(98,230,173,.55); background: linear-gradient(100deg,rgba(98,230,173,.08),rgba(12,18,25,.9)); }
.eh-pin-row { display: grid; grid-template-columns: minmax(180px,320px) auto; align-items: end; gap: 10px; margin-top: 12px; }
.eh-pin-row .eh-action-button { min-height: 36px; }
.eh-action-button:disabled,.eh-field input:disabled,.eh-field select:disabled,.eh-threshold-block input:disabled { cursor: not-allowed; opacity: .43; }
@media (max-width:1100px) { .eh-sensor-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .eh-analytics-strip { grid-template-columns: 1fr; } .eh-analytics-strip__title { border-right: 0; border-bottom: 1px solid var(--eh-line); padding-bottom: 7px; } .eh-analytics-strip__grid,.eh-settings-grid { grid-template-columns: 1fr 1fr; } .eh-panel--half { grid-column: span 12; } .eh-threshold-block { grid-template-columns: 1fr 1fr; } .eh-sensor-intro { grid-template-columns: 1fr; } }
@media (max-width:720px) { .eh-sensor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px) { .eh-analytics-strip__grid,.eh-settings-grid,.eh-threshold-block,.eh-pin-row { grid-template-columns: 1fr; } .eh-command-log article { grid-template-columns: 1fr; } }
@media (max-width:430px) { .eh-sensor-grid { grid-template-columns: 1fr; } }

/* Desktop operator-console layout: one canvas, four focus states. */
.eh-metrics-panel { display: grid; min-width: 0; }
.eh-section-actions { display: flex; align-items: center; gap: 7px; }
.eh-focus-button { display: none; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--eh-line); border-radius: 7px; color: var(--eh-dim); background: rgba(255,255,255,.025); font: 500 14px/1 var(--eh-tech); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.eh-focus-button span { display: block; transition: transform .24s ease; }
.eh-focus-button:hover, .eh-focus-button:focus-visible, .eh-focus-button.is-active { border-color: rgba(98,230,173,.58); color: var(--eh-green); background: rgba(98,230,173,.07); outline: 0; }
.eh-focus-button.is-active span { transform: rotate(180deg); }
.eh-status-focus { position: absolute; top: 50%; right: 11px; z-index: 2; transform: translateY(-50%); }
.eh-analysis-workspace { display: grid; min-width: 0; gap: 10px; }
.eh-analysis-workspace > * { min-width: 0; }
.eh-analytics-strip { border-radius: var(--eh-radius); }
.eh-analytics-strip__title > div { display: grid; gap: 4px; }

@media (min-width: 1180px) and (min-height: 720px) {
  .eh-dashboard .eh-shell { height: calc(100dvh - 18px); }
  .eh-dashboard .eh-topbar { min-height: 58px; }
  .eh-dashboard .eh-operator {
    --eh-status-track: 58px;
    --eh-metrics-track: clamp(247px,35.2vh,317px);
    --eh-debug-track: 39px;
    height: calc(100dvh - 76px);
    grid-template-rows: var(--eh-status-track) var(--eh-metrics-track) minmax(170px,1fr) var(--eh-debug-track);
    gap: 8px;
    padding-top: 10px;
    transition: grid-template-rows .28s ease;
  }
  .eh-dashboard .eh-operator[data-layout-focus="metrics"] { --eh-status-track: 64px; --eh-metrics-track: clamp(273px,38.5vh,349px); }
  .eh-dashboard .eh-operator[data-layout-focus="chart"],
  .eh-dashboard .eh-operator[data-layout-focus="summary"] { --eh-status-track: 58px; --eh-metrics-track: clamp(203px,25vh,223px); }
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] { --eh-status-track: 58px; --eh-metrics-track: clamp(198px,24vh,218px); --eh-debug-track: clamp(184px,23vh,208px); }

  .eh-dashboard .eh-status-board { min-height: 0; }
  .eh-dashboard .eh-status-cell { padding: 7px 16px; }
  .eh-dashboard .eh-status-cell:nth-of-type(3) { padding-right: 52px; }
  .eh-dashboard .eh-status-board__sync { right: 49px; }
  .eh-dashboard .eh-metrics-panel, .eh-dashboard .eh-analysis-workspace, .eh-dashboard .eh-chart-panel, .eh-dashboard .eh-analytics-strip, .eh-dashboard .eh-debug { min-height: 0; }
  .eh-dashboard .eh-metrics-panel { grid-template-rows: minmax(0,1fr); }
  .eh-dashboard .eh-focus-button { display: inline-grid; }
  .eh-dashboard .eh-metrics { height: 100%; grid-template-rows: repeat(3,minmax(0,1fr)); }
  .eh-dashboard .eh-metric-card { min-height: 0; }

  .eh-dashboard .eh-analysis-workspace { grid-template-columns: minmax(0,2.05fr) minmax(390px,.95fr); gap: 8px; transition: grid-template-columns .28s ease; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-analysis-workspace { grid-template-columns: minmax(0,1fr) 300px; }
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-analysis-workspace { grid-template-columns: minmax(420px,.75fr) minmax(0,1.25fr); }
  .eh-dashboard .eh-operator[data-layout-focus="metrics"] .eh-analysis-workspace { grid-template-columns: minmax(0,1.2fr) minmax(420px,1fr); }

  .eh-dashboard .eh-chart-panel { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; padding: 13px 16px 9px; overflow: hidden; }
  .eh-dashboard .eh-chart { height: auto; min-height: 0; }
  .eh-dashboard .eh-chart svg { height: 100%; min-height: 0; }
  .eh-dashboard .eh-chart__empty { height: 100%; min-height: 0; }
  .eh-dashboard .eh-chart-tabs { margin-top: 6px; }

  .eh-dashboard .eh-analytics-strip { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 7px; padding: 11px; overflow: hidden; }
  .eh-dashboard .eh-analytics-strip__title { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--eh-line); }
  .eh-dashboard .eh-analytics-strip__title strong { font-size: 14px; }
  .eh-dashboard .eh-analytics-strip__title a { align-self: center; }
  .eh-dashboard .eh-analytics-strip__grid { height: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 5px; }
  .eh-dashboard .eh-analytics-strip article { align-content: center; padding: 4px 7px; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-analytics-strip__grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(5,minmax(0,1fr)); }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-analytics-strip__title { grid-template-columns: minmax(0,1fr) auto; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-analytics-strip__title a { display: none; }

  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-metric-card,
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-metric-card,
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] .eh-metric-card { padding: 7px 12px; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-quality,
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-quality,
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] .eh-quality { top: 9px; right: 11px; padding: 3px 5px; font-size: 7px; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-metric-card__value,
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-metric-card__value,
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] .eh-metric-card__value { margin: 2px 88px 1px 0; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-metric-card__value strong,
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-metric-card__value strong,
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] .eh-metric-card__value strong { font-size: clamp(24px,2vw,31px); }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-metric-card p,
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-metric-card p,
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] .eh-metric-card p { font-size: 11.5px; }
  .eh-dashboard .eh-operator[data-layout-focus="chart"] .eh-sparkline,
  .eh-dashboard .eh-operator[data-layout-focus="summary"] .eh-sparkline,
  .eh-dashboard .eh-operator[data-layout-focus="diagnostics"] .eh-sparkline { bottom: 4px; height: 17px; }

  .eh-dashboard .eh-debug { overflow: hidden; }
  .eh-dashboard .eh-debug summary { height: 37px; min-height: 37px; padding: 4px 14px; }
  .eh-dashboard .eh-debug__grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .eh-dashboard .eh-debug__grid div { min-height: 66px; padding: 10px; }
  .eh-dashboard .eh-debug__note { padding-top: 8px; }
  .eh-dashboard .eh-debug__help { margin-top: 3px; margin-bottom: 8px; }
  .eh-dashboard footer { display: none; }
}