:root {
  --ink: #17322f;
  --muted: #667875;
  --soft: #8b9a97;
  --paper: #ffffff;
  --canvas: #f3f6f3;
  --line: #dfe8e3;
  --line-strong: #cbd8d2;
  --forest: #123d37;
  --forest-2: #1d554b;
  --mint: #7dd8b7;
  --mint-soft: #def5eb;
  --up: #15996f;
  --up-soft: #dcf5ea;
  --degraded: #d48b28;
  --degraded-soft: #fff0d8;
  --down: #d15960;
  --down-soft: #fde7e8;
  --unknown: #7b8c89;
  --unknown-soft: #e9eeec;
  --shadow: 0 18px 50px rgba(26, 57, 51, .09);
  --shadow-soft: 0 8px 24px rgba(26, 57, 51, .07);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}

.ambient-one {
  top: -220px;
  right: 4%;
  background: radial-gradient(circle, rgba(126, 216, 183, .22), transparent 68%);
}

.ambient-two {
  top: 440px;
  left: -260px;
  background: radial-gradient(circle, rgba(114, 151, 222, .12), transparent 68%);
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 14px clamp(22px, 4vw, 64px);
  border-bottom: 1px solid rgba(203, 216, 210, .8);
  background: rgba(247, 249, 247, .88);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--mint-soft);
  border-radius: 15px;
  background: var(--forest);
  box-shadow: 0 8px 18px rgba(18, 61, 55, .2);
}

.brand-mark svg { width: 27px; height: 27px; }
.brand-kicker, .card-kicker {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.brand-name { display: block; margin-top: 2px; font-size: 16px; font-weight: 760; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }

.live-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--forest-2);
  font-size: 13px;
  font-weight: 700;
}

.live-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--degraded);
}

.live-state.connected .live-dot { background: var(--up); }
.live-state.connected .live-dot::after {
  position: absolute;
  inset: -4px;
  content: "";
  border: 1px solid var(--up);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.live-state.disconnected { color: var(--down); }
.live-state.disconnected .live-dot { background: var(--down); }

.updated-at { display: grid; gap: 2px; padding-left: 20px; border-left: 1px solid var(--line-strong); }
.updated-at span { color: var(--soft); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.updated-at strong { font-size: 13px; font-weight: 720; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 720;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button svg { width: 17px; height: 17px; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, select:focus-visible, .device-card:focus-visible, .map-device:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
}

.button-primary { color: white; background: var(--forest); box-shadow: 0 8px 18px rgba(18, 61, 55, .18); }
.button-primary:hover { background: var(--forest-2); box-shadow: 0 10px 22px rgba(18, 61, 55, .22); }
.button.loading svg { animation: spin .8s linear infinite; }

.page-shell { width: min(1500px, calc(100% - 44px)); margin: 0 auto; padding: 34px 0 70px; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, .8fr);
  gap: 34px;
  min-height: 300px;
  padding: clamp(36px, 5vw, 64px);
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: white;
  background:
    radial-gradient(circle at 77% 16%, rgba(125, 216, 183, .2), transparent 28%),
    linear-gradient(125deg, #102f2b 0%, #16483f 60%, #1c5b4f 100%);
  box-shadow: 0 24px 70px rgba(18, 61, 55, .22);
}

.hero::before, .hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.hero::before { top: -190px; right: -90px; width: 460px; height: 460px; }
.hero::after { right: 140px; bottom: -310px; width: 520px; height: 520px; }
.hero-copy, .edge-spotlight { position: relative; z-index: 1; }
.hero-copy { align-self: center; max-width: 700px; }

.eyebrow { display: flex; align-items: center; gap: 10px; color: #b7e8d5; font-size: 12px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow > span:first-child { width: 28px; height: 1px; background: var(--mint); }
.hero h1 { max-width: 720px; margin: 16px 0 18px; font-size: clamp(38px, 4.5vw, 68px); font-weight: 650; letter-spacing: -.055em; line-height: .98; }
.hero h1 em { color: var(--mint); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-copy > p { max-width: 640px; margin: 0; color: rgba(239, 252, 247, .76); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; }

.edge-spotlight {
  align-self: center;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.edge-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.edge-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--mint); border-radius: 13px; background: rgba(125, 216, 183, .12); }
.edge-icon svg { width: 22px; height: 22px; }
.edge-spotlight .card-kicker { color: rgba(220, 245, 235, .64); }
.edge-spotlight h2 { margin: 3px 0 0; font-size: 17px; }
.edge-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0 17px; }
.edge-metrics div { padding: 13px 14px; border-radius: 13px; background: rgba(7, 34, 30, .24); }
.edge-metrics span { display: block; margin-bottom: 5px; color: rgba(220, 245, 235, .63); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.edge-metrics strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.edge-note { margin: 0; color: rgba(239, 252, 247, .68); font-size: 12px; line-height: 1.5; }

.health-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.health-up { color: #0b6f50; background: var(--up-soft); }
.health-degraded { color: #9b5e0f; background: var(--degraded-soft); }
.health-down { color: #a3363d; background: var(--down-soft); }
.health-unknown { color: #536460; background: var(--unknown-soft); }
.edge-spotlight .health-up { color: #bff5df; background: rgba(58, 207, 155, .16); }
.edge-spotlight .health-degraded { color: #ffdda8; background: rgba(243, 168, 58, .16); }
.edge-spotlight .health-down { color: #ffc3c6; background: rgba(238, 95, 105, .16); }
.edge-spotlight .health-unknown { color: #dce7e3; background: rgba(255, 255, 255, .1); }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.summary-card { display: flex; align-items: center; gap: 16px; min-height: 122px; padding: 22px; border: 1px solid rgba(215, 226, 220, .9); border-radius: var(--radius-lg); background: rgba(255,255,255,.86); box-shadow: var(--shadow-soft); }
.summary-icon { display: grid; flex: 0 0 auto; width: 49px; height: 49px; place-items: center; border-radius: 15px; }
.summary-icon svg { width: 23px; height: 23px; }
.summary-total .summary-icon { color: #315d87; background: #e3edf8; }
.summary-up .summary-icon { color: var(--up); background: var(--up-soft); }
.summary-degraded .summary-icon { color: var(--degraded); background: var(--degraded-soft); }
.summary-down .summary-icon { color: var(--down); background: var(--down-soft); }
.summary-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 690; }
.summary-card strong { display: inline-block; margin: 2px 8px 1px 0; font-size: 31px; letter-spacing: -.04em; line-height: 1; }
.summary-card small { color: var(--soft); font-size: 11px; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .65fr); align-items: start; gap: 20px; margin-bottom: 38px; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow-soft); }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; }
.panel-heading h2, .section-heading h2 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.025em; }
.map-note { margin: 6px 0 0; color: var(--soft); font-size: 13px; line-height: 1.45; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; color: var(--muted); font-size: 13px; font-weight: 680; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-up { background: var(--up); }.dot-degraded { background: var(--degraded); }.dot-down { background: var(--down); }
.legend-device { position: relative; width: 19px; height: 19px; border: 1.8px solid var(--forest-2); border-radius: 5px; background: white; }
.legend-device::before { position: absolute; top: 4px; left: 4px; width: 8px; height: 5px; content: ""; border: 1.2px solid var(--forest-2); border-radius: 1px; }
.legend-device::after { position: absolute; right: 2px; bottom: 2px; width: 3px; height: 3px; content: ""; border-radius: 50%; background: var(--up); }

.lab-map-wrap { position: relative; min-height: 650px; margin: 0 18px 18px; overflow: hidden; border: 1px solid #e3ebe7; border-radius: 19px; background: #f7faf8; }
.lab-map { width: 100%; height: 100%; min-height: 650px; }
.map-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 13px; background: rgba(247, 250, 248, .88); }
.map-loading .map-spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--up); border-radius: 50%; animation: spin .9s linear infinite; }
.map-loading.hidden { display: none; }
.map-zone { stroke-width: 1.5; }
.map-zone-label { fill: #294b45; stroke: none; font-size: 16px; font-weight: 820; letter-spacing: .035em; text-transform: uppercase; }
.map-zone-count { fill: #536f69; stroke: none; font-size: 12.5px; font-weight: 740; letter-spacing: .015em; }
.map-zone-divider { stroke: rgba(48, 86, 78, .17); stroke-width: 1; }
.map-device { cursor: pointer; outline: none; }
.map-device .device-halo { fill: currentColor; opacity: .11; stroke: none; transition: opacity .2s ease, transform .2s ease; transform-box: fill-box; transform-origin: center; }
.map-device .device-shell { transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.map-device .device-node { fill: #fff; stroke: currentColor; stroke-width: 2.7; }
.map-device .device-screen { fill: currentColor; fill-opacity: .12; stroke: currentColor; stroke-width: 1; }
.map-device .device-slot { fill: none; stroke: currentColor; stroke-width: 2; }
.map-device .device-light { fill: currentColor; stroke: #fff; stroke-width: 1.2; }
.map-device .device-index { fill: currentColor; stroke: none; font-size: 10.5px; font-weight: 860; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.map-device .device-label { fill: #294b45; stroke: none; font-size: 11.5px; font-weight: 750; text-anchor: middle; pointer-events: none; }
.map-device:hover .device-halo, .map-device:focus .device-halo { opacity: .23; transform: scale(1.14); }
.map-device:hover .device-shell, .map-device:focus .device-shell { transform: scale(1.08); }
.map-device:hover .device-label, .map-device:focus .device-label { fill: var(--ink); font-weight: 800; }
.map-device.health-up { color: var(--up); }.map-device.health-degraded { color: var(--degraded); }.map-device.health-down { color: var(--down); }.map-device.health-unknown { color: var(--muted); }

.activity-panel { min-height: 560px; }
.event-count { padding: 6px 9px; color: var(--muted); border-radius: 999px; background: #f0f4f2; font-size: 10px; font-weight: 740; }
.activity-list { display: grid; gap: 0; margin: 0; padding: 0 24px 22px; list-style: none; }
.activity-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid #edf2ef; }
.activity-item:last-child { border-bottom: 0; }
.activity-marker { display: grid; width: 31px; height: 31px; place-items: center; color: var(--forest-2); border-radius: 10px; background: var(--mint-soft); font-size: 12px; font-weight: 800; }
.activity-content { min-width: 0; }
.activity-content strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.activity-content p { margin: 4px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.activity-content time { color: var(--soft); font-size: 10px; }

.devices-section { margin-top: 8px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.section-heading p { margin: 0 2px 2px 0; color: var(--muted); font-size: 12px; }
.toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 180px 190px auto; gap: 12px; align-items: end; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); }
.search-field { position: relative; display: block; }
.search-field svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--soft); transform: translateY(-50%); }
.search-field input, .select-field select { width: 100%; height: 44px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; background: white; outline: 0; }
.search-field input { padding: 0 15px 0 43px; }
.search-field input::placeholder { color: #98a6a3; }
.select-field { display: grid; gap: 5px; }
.select-field span { padding-left: 2px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.select-field select { padding: 0 34px 0 12px; }
.auto-refresh { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 670; white-space: nowrap; }
.auto-refresh input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cdd8d3; transition: background .2s ease; }
.switch::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; content: ""; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .2s ease; }
.auto-refresh input:checked + .switch { background: var(--up); }
.auto-refresh input:checked + .switch::after { transform: translateX(16px); }
.auto-refresh input:focus-visible + .switch { outline: 3px solid rgba(35, 151, 114, .24); outline-offset: 2px; }

.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.device-card { position: relative; display: flex; flex-direction: column; min-height: 238px; padding: 20px; overflow: hidden; color: inherit; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 5px 18px rgba(26, 57, 51, .045); text-align: left; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.device-card::after { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--unknown); }
.device-card.health-up::after { background: var(--up); }.device-card.health-degraded::after { background: var(--degraded); }.device-card.health-down::after { background: var(--down); }
.device-card:hover { transform: translateY(-3px); border-color: #c9d8d1; box-shadow: var(--shadow); }
.device-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.device-avatar { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: var(--forest); border-radius: 13px; background: var(--mint-soft); font-size: 11px; font-weight: 830; letter-spacing: .04em; }
.device-title { min-width: 0; }
.device-title h3 { margin: 0; overflow: hidden; font-size: 14px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.device-title p { margin: 4px 0 0; overflow: hidden; color: var(--soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.device-state { margin: 20px 0 14px; }
.device-state span { display: block; margin-bottom: 4px; color: var(--soft); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.device-state strong { display: block; overflow: hidden; font-size: 18px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.device-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.fact-chip { max-width: 100%; padding: 6px 8px; overflow: hidden; color: #4d6761; border-radius: 8px; background: #f1f5f3; font-size: 10px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
.device-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; color: var(--soft); border-top: 1px solid #edf2ef; font-size: 10px; }
.device-footer span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.device-footer svg { flex: 0 0 auto; width: 13px; height: 13px; }
.device-footer .zone-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-details { color: var(--forest-2); font-weight: 760; }

.empty-state { display: none; padding: 56px 20px; color: var(--muted); text-align: center; }
.empty-state.visible { display: block; }
.empty-state > span { display: grid; width: 48px; height: 48px; margin: 0 auto 12px; place-items: center; color: var(--forest-2); border-radius: 15px; background: var(--mint-soft); font-size: 20px; }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); font-size: 16px; }
.empty-state p { margin: 0; font-size: 12px; }
.empty-state.compact { padding: 80px 20px; }

.device-dialog { width: min(690px, calc(100% - 28px)); max-height: min(850px, calc(100vh - 40px)); padding: 0; overflow: hidden; color: var(--ink); border: 0; border-radius: 25px; background: white; box-shadow: 0 30px 90px rgba(12, 40, 35, .32); }
.device-dialog::backdrop { background: rgba(11, 31, 28, .55); backdrop-filter: blur(6px); }
.dialog-shell { position: relative; max-height: min(850px, calc(100vh - 40px)); padding: 30px; overflow: auto; }
.dialog-close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 34px; height: 34px; place-items: center; color: var(--muted); border: 0; border-radius: 10px; background: #f0f4f2; font-size: 22px; line-height: 1; }
.dialog-close:hover { color: var(--ink); background: #e7eeea; }
.dialog-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding-right: 34px; }
.dialog-heading .device-avatar { width: 52px; height: 52px; font-size: 13px; }
.dialog-heading h2 { margin: 4px 0 2px; font-size: 23px; letter-spacing: -.03em; }
.dialog-heading p { margin: 0; color: var(--soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.dialog-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0; }
.dialog-fact { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.dialog-fact span { display: block; margin-bottom: 5px; color: var(--soft); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.dialog-fact strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dialog-section { margin-top: 25px; }
.dialog-section h3 { margin: 0 0 12px; font-size: 13px; }
.state-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.state-row { min-width: 0; padding: 12px 14px; border-bottom: 1px solid #edf2ef; }
.state-row:nth-child(odd) { border-right: 1px solid #edf2ef; }
.state-row dt { margin-bottom: 5px; color: var(--soft); font-size: 9px; font-weight: 740; letter-spacing: .06em; text-transform: uppercase; }
.state-row dd { margin: 0; overflow-wrap: anywhere; color: #344d48; font-size: 11px; line-height: 1.45; }
.dialog-events { display: grid; gap: 8px; }
.dialog-event { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.dialog-event strong { display: block; font-size: 11px; }.dialog-event span { display: block; margin-top: 4px; color: var(--soft); font-size: 10px; }
.dialog-empty { padding: 16px; color: var(--soft); border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 11px; text-align: center; }

.device-context-menu { position: fixed; z-index: 70; width: min(310px, calc(100vw - 24px)); padding: 16px; border: 1px solid rgba(197, 212, 205, .95); border-radius: 17px; background: rgba(255, 255, 255, .98); box-shadow: 0 24px 70px rgba(12, 40, 35, .25); backdrop-filter: blur(18px); }
.device-context-menu[hidden] { display: none; }
.context-menu-heading { display: grid; gap: 3px; padding: 1px 2px 12px; }
.context-menu-heading span, .context-action-field > span { color: var(--soft); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.context-menu-heading strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.context-menu-quick-actions { display: grid; gap: 4px; }
.context-menu-quick-actions button { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 9px; padding: 0 10px; color: #35504a; border: 0; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 690; text-align: left; }
.context-menu-quick-actions button:hover { color: var(--ink); background: #eff5f2; }
.context-menu-quick-actions svg { width: 16px; height: 16px; color: var(--forest-2); }
.context-menu-divider { height: 1px; margin: 10px 0 13px; background: var(--line); }
.context-action-field { display: grid; gap: 6px; }
.context-action-field select { width: 100%; height: 42px; padding: 0 34px 0 11px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; background: white; font-size: 11px; outline: 0; }
.context-action-description { min-height: 33px; margin: 9px 2px 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.context-run-action { width: 100%; min-height: 40px; color: white; border: 0; border-radius: 10px; background: var(--forest); font-size: 11px; font-weight: 760; }
.context-run-action:hover { background: var(--forest-2); }
.context-run-action:disabled { cursor: wait; opacity: .62; }
.context-action-unavailable { margin: 0; padding: 12px; color: var(--muted); border-radius: 10px; background: #f3f6f4; font-size: 10px; line-height: 1.5; }
.context-menu-quick-actions button:focus-visible, .context-run-action:focus-visible, .context-action-field select:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

.action-toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; display: grid; max-width: min(430px, calc(100% - 48px)); grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 14px 17px; color: #165b48; border: 1px solid #b7dfd0; border-radius: 14px; background: #effbf6; box-shadow: var(--shadow); }
.action-toast[hidden] { display: none; }
.action-toast.error { color: #812f35; border-color: #efc0c3; background: #fff1f2; }
.action-toast-icon { display: grid; width: 27px; height: 27px; place-items: center; color: white; border-radius: 9px; background: var(--up); font-size: 12px; font-weight: 850; }
.action-toast.error .action-toast-icon { background: var(--down); }
.action-toast strong, .action-toast div > span { display: block; }
.action-toast strong { font-size: 11px; }
.action-toast div > span { margin-top: 3px; font-size: 10px; line-height: 1.4; }

.error-banner { position: fixed; z-index: 50; right: 24px; bottom: 24px; display: flex; max-width: min(520px, calc(100% - 48px)); align-items: center; gap: 22px; padding: 16px 18px; color: #6f252a; border: 1px solid #f1bfc2; border-radius: 15px; background: #fff1f2; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .2s ease, transform .2s ease; }
.error-banner.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.error-banner strong, .error-banner span { display: block; }.error-banner strong { font-size: 12px; }.error-banner span { margin-top: 3px; font-size: 10px; }
.error-banner button { flex: 0 0 auto; padding: 8px 11px; color: white; border: 0; border-radius: 9px; background: var(--down); font-size: 10px; font-weight: 750; }

/* Instrument motion: per-archetype glyphs that animate while running. Idle and
   offline instruments stay static; the reduced-motion block below neutralizes
   every animation here. */
.instrument-glyph { stroke-width: 2; }
.instrument-glyph .glyph-line { fill: none; stroke: currentColor; }
.instrument-glyph .glyph-fill { fill: currentColor; fill-opacity: .18; stroke: none; }
.instrument-glyph .glyph-solid { fill: currentColor; stroke: none; }
.instrument-glyph .glyph-soft { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-width: 1.5; }
.instrument-glyph .glyph-beam { fill: none; stroke: currentColor; stroke-width: 2.6; }
.instrument-glyph .ipart { transform-box: fill-box; transform-origin: center; }

.is-running .rotor { animation: spin 1.15s linear infinite; }
.is-running .carousel { animation: spin 6s linear infinite; }
.is-running .lh-head { animation: lh-sweep 1.8s ease-in-out infinite; }
.is-running .well { animation: tc-pulse 1.5s ease-in-out infinite; }
.is-running .well-1 { animation-delay: .18s; }
.is-running .well-2 { animation-delay: .36s; }
.is-running .well-3 { animation-delay: .54s; }
.is-running .seq-flow { animation: seq-flow 2.2s linear infinite; }
.is-running .shaker-plat { animation: shaker-orbit .55s linear infinite; }
.is-running .balance-pan { animation: balance-bob 1.7s ease-in-out infinite; }
.is-running .frost { animation: frost-twinkle 2.4s ease-in-out infinite; }
.is-running .pr-scan { animation: pr-scan 2s ease-in-out infinite; }
.is-running .scan-beam { animation: scan-beam 1.6s ease-in-out infinite; }
.is-running .shuttle { animation: shuttle-lift 2.4s ease-in-out infinite; }
.is-running .grow-glow { animation: grow-glow 2.6s ease-in-out infinite; }
.is-running .canopy { animation: canopy-sway 3s ease-in-out infinite; }
.is-running .gen-pulse { animation: gen-pulse 2s ease-in-out infinite; }

.dialog-instrument { display: grid; place-items: center; height: 128px; margin: 22px 0 2px; color: var(--forest-2); border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 50% 32%, var(--mint-soft), #f7faf8 72%); }
.dialog-instrument .instrument-canvas { width: 116px; height: 116px; overflow: visible; }
.dialog-instrument .instrument-glyph { stroke-width: 1.6; }
.dialog-instrument.is-running { color: var(--up); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0; transform: scale(.7); } 45% { opacity: .55; transform: scale(1.1); } }
@keyframes lh-sweep { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
@keyframes tc-pulse { 0%, 100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
@keyframes seq-flow { 0% { transform: translateX(0); opacity: .35; } 15%, 85% { opacity: 1; } 100% { transform: translateX(24px); opacity: .35; } }
@keyframes shaker-orbit { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, -1px); } 50% { transform: translate(0, -2px); } 75% { transform: translate(-2px, -1px); } }
@keyframes balance-bob { 0%, 100% { transform: translateY(-1.8px); } 50% { transform: translateY(1.6px); } }
@keyframes frost-twinkle { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .4; } 50% { transform: scale(1.06) rotate(45deg); opacity: 1; } }
@keyframes pr-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes scan-beam { 0%, 100% { transform: translateX(-11px); } 50% { transform: translateX(11px); } }
@keyframes shuttle-lift { 0%, 100% { transform: translateY(11px); } 50% { transform: translateY(-9px); } }
@keyframes grow-glow { 0%, 100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.12); opacity: .95; } }
@keyframes canopy-sway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes gen-pulse { 0%, 100% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1.15); opacity: .9; } }

@media (max-width: 1180px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .activity-panel { min-height: auto; }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .updated-at { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .auto-refresh { justify-self: end; }
}

@media (max-width: 680px) {
  .topbar { min-height: 70px; padding: 11px 16px; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .brand-kicker { display: none; }
  .brand-name { font-size: 14px; }
  .live-state { display: none; }
  .button { min-height: 39px; padding: 0 12px; }
  .page-shell { width: min(100% - 24px, 1500px); padding-top: 18px; }
  .hero { min-height: 0; gap: 26px; padding: 29px 22px; border-radius: 22px; }
  .hero h1 { font-size: 41px; }
  .edge-heading { grid-template-columns: auto 1fr; }
  .edge-heading .health-pill { grid-column: 1 / -1; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-card { display: block; min-height: 145px; padding: 17px; }
  .summary-icon { width: 39px; height: 39px; margin-bottom: 16px; border-radius: 12px; }
  .summary-icon svg { width: 19px; height: 19px; }
  .summary-card strong { font-size: 27px; }
  .summary-card small { display: block; margin-top: 5px; }
  .panel-heading { display: block; padding: 20px 18px 14px; }
  .map-legend { justify-content: flex-start; margin-top: 12px; }
  .lab-map-wrap { min-height: 500px; margin: 0 10px 10px; }
  .lab-map { min-height: 500px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 8px; }
  .toolbar { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .auto-refresh { justify-self: start; }
  .device-grid { grid-template-columns: 1fr; }
  .device-card { min-height: 218px; }
  .dialog-shell { padding: 24px 18px; }
  .dialog-heading { grid-template-columns: auto 1fr; padding-right: 28px; }
  .dialog-heading .health-pill { grid-column: 1 / -1; }
  .dialog-facts { grid-template-columns: 1fr 1fr; }
  .state-table { grid-template-columns: 1fr; }
  .state-row:nth-child(odd) { border-right: 0; }
  .device-context-menu { width: min(310px, calc(100vw - 16px)); }
  .action-toast { right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .error-banner { right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
}

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

.button, .context-menu-quick-actions button, .context-run-action, .context-action-field select {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.topbar-actions { flex-wrap: wrap; }
.context-menu-heading, .context-menu-quick-actions > * { min-width: 0; }