:root {
  --bg: #101419;
  --sidebar: #161c24;
  --panel: #20242b;
  --panel-2: #272d35;
  --panel-3: #313945;
  --line: #353d48;
  --line-strong: #566371;
  --text: #e6edf3;
  --muted: #9aa6b2;
  --accent: #47b7d6;
  --accent-ink: #9ee6f4;
  --green: #52d273;
  --red: #ff5b63;
  --amber: #f0b64b;
  --sidebar-text: #edf3f7;
  --sidebar-muted: #99a8b6;
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  overflow-x: hidden;
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 30% 0, rgba(71, 183, 214, .08), transparent 28%),
    linear-gradient(180deg, #121820 0%, var(--bg) 42%, #0d1116 100%);
  color: var(--text);
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #1b232d 0%, #151b23 54%, #10151b 100%);
  border-right: 1px solid #06090d;
  padding: 16px 14px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  border-bottom: 1px solid #273640;
  padding-bottom: 14px;
}
.sidebar-brand strong,
.sidebar-brand span {
  display: block;
}
.sidebar-brand strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--sidebar-text);
}
.sidebar-brand span {
  color: var(--sidebar-muted);
  font-size: 12px;
}
.content-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.topbar {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(520px, 1.8fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #171d25;
  border-bottom: 1px solid var(--line);
}
.topbar h1 {
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 4px;
  font-weight: 700;
}
.tag {
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: .05em;
  padding: 3px 8px;
  text-transform: uppercase;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}
.dot.ok { background: var(--green); }
.dot.bad { background: var(--red); }
.status { font-size: 12px; color: var(--muted); }
.topbar-title { display: block; min-width: 0; }
.topbar-title h1 {
  color: var(--text);
  font-size: 15px;
  margin: 0 0 3px;
}
.global-scope {
  display: grid;
  grid-template-columns: minmax(130px, .9fr) repeat(3, minmax(120px, 1fr));
  align-items: end;
  gap: 7px;
  min-width: 0;
}
.global-scope label,
.scope-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.global-scope label span,
.scope-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.scope-summary {
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.scope-summary strong {
  font-size: 12px;
  line-height: 1.2;
  min-height: 30px;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}
.global-scope select {
  height: 30px;
  font-size: 12px;
  padding: 4px 7px;
}
.top-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-actions form { margin: 0; }
.user-pill {
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  padding: 5px 9px;
  background: #111820;
}
.logout-btn,
.secondary-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  padding: 6px 10px;
}
.logout-btn:hover,
.secondary-btn:hover { color: var(--text); background: var(--panel-2); }

.section-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.nav-group {
  color: var(--sidebar-muted);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 10px 8px 4px;
  text-transform: uppercase;
}
.section-nav a {
  align-items: center;
  color: var(--sidebar-muted);
  border: 1px solid transparent;
  border-radius: 4px;
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 40px;
  padding: 5px 9px 5px 5px;
  text-decoration: none;
  white-space: nowrap;
}
.section-nav a::before {
  align-items: center;
  background: #0b1319;
  border: 1px solid #2d3d48;
  border-radius: 4px;
  color: #bcd4df;
  content: attr(data-icon);
  display: flex;
  font-size: 10px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  letter-spacing: .02em;
  width: 30px;
}
.section-nav a.active,
.section-nav a:hover {
  color: var(--sidebar-text);
  background: #1d2b35;
  border-color: #36505f;
}
.section-nav a.active {
  border-left-color: #4fb0c9;
}
.section-nav a.active::before {
  background: var(--accent);
  border-color: #66bdd0;
  color: #fff;
}
.sidebar-footer {
  margin-top: auto;
  border: 1px solid #315044;
  border-radius: 4px;
  background: #0c131a;
  padding: 7px 9px;
  white-space: nowrap;
}
.sidebar-footer span,
.sidebar-footer strong {
  display: block;
}
.sidebar-footer span {
  color: var(--sidebar-muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sidebar-footer strong {
  font-size: 13px;
  margin-top: 4px;
  text-transform: uppercase;
}
.live-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 7px;
  padding: 8px 18px;
  background: #0c1117;
  border-bottom: 1px solid var(--line);
}
.live-strip button {
  background: linear-gradient(180deg, #222832 0%, #1a2028 100%);
  border: 1px solid #343d49;
  border-left: 3px solid #4b5a68;
  border-radius: 3px;
  color: var(--text);
  cursor: pointer;
  min-width: 0;
  padding: 7px 9px;
  text-align: left;
}
.live-strip span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.live-strip strong {
  display: block;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  margin-top: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.live-strip small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.live-strip button:hover {
  background: #27313c;
  border-left-color: var(--accent);
}
.live-strip button:nth-child(1) { border-left-color: var(--accent); }
.live-strip button:nth-child(2) { border-left-color: var(--amber); }
.live-strip button:nth-child(3),
.live-strip button:nth-child(4) { border-left-color: var(--green); }
.live-strip button:nth-child(6) { border-left-color: var(--red); }
.live-strip.is-live button:first-child {
  box-shadow: inset 0 0 0 1px rgba(71, 183, 214, .18), 0 0 18px rgba(71, 183, 214, .08);
}
.live-strip.state-review button:nth-child(5),
.live-strip.state-review button:nth-child(6) {
  background: linear-gradient(180deg, rgba(255, 91, 99, .16), #1a2028 70%);
}

main { max-width: 1460px; margin: 0 auto; padding: 18px 18px 34px; }
main section { scroll-margin-top: 90px; }
body[data-page="sites"] main,
body[data-page="devices"] main,
body[data-page="trends"] main,
body[data-page="projections"] main,
body[data-page="enterprise"] main,
body[data-page="reports"] main,
body[data-page="proof"] main {
  padding-top: 12px;
}
[hidden] { display: none !important; }
.page-section { display: none; }
body[data-page="overview"] .page-section[data-page~="overview"],
body[data-page="trends"] .page-section[data-page~="trends"],
body[data-page="projections"] .page-section[data-page~="projections"],
body[data-page="audit"] .page-section[data-page~="audit"],
body[data-page="reports"] .page-section[data-page~="reports"],
body[data-page="proof"] .page-section[data-page~="proof"],
body[data-page="enterprise"] .page-section[data-page~="enterprise"],
body[data-page="devices"] .page-section[data-page~="devices"],
body[data-page="diagnostics"] .page-section[data-page~="diagnostics"],
body[data-page="portfolio"] .page-section[data-page~="portfolio"],
body[data-page="field"] .page-section[data-page~="field"],
body[data-page="portal"] .page-section[data-page~="portal"],
body[data-page="sites"] .page-section[data-page~="sites"],
body[data-page="sources"] .page-section[data-page~="sources"],
body[data-page="settings"] .page-section[data-page~="settings"],
body[data-page="users"] .page-section[data-page~="users"] {
  display: block;
}
body[data-page="overview"] .overview-grid[data-page~="overview"],
body[data-page="overview"] .cards[data-page~="overview"],
body[data-page="overview"] .summary-grid[data-page~="overview"],
body[data-page="overview"] .overview-command[data-page~="overview"],
body[data-page="overview"] .overview-lower[data-page~="overview"],
body[data-page="overview"] .overview-map-row[data-page~="overview"],
body[data-page="overview"] .insight-strip[data-page~="overview"],
body[data-page="projections"] .overview-command[data-page~="projections"],
body[data-page="audit"] .enterprise-grid[data-page~="audit"],
body[data-page="reports"] .enterprise-grid[data-page~="reports"],
body[data-page="projections"] .enterprise-grid[data-page~="projections"],
body[data-page="proof"] .enterprise-grid[data-page~="proof"],
body[data-page="enterprise"] .enterprise-grid[data-page~="enterprise"],
body[data-page="devices"] .enterprise-grid[data-page~="devices"],
body[data-page="diagnostics"] .enterprise-grid[data-page~="diagnostics"],
body[data-page="portfolio"] .enterprise-grid[data-page~="portfolio"],
body[data-page="field"] .enterprise-grid[data-page~="field"],
body[data-page="sites"] .enterprise-grid[data-page~="sites"],
body[data-page="sources"] .enterprise-grid[data-page~="sources"],
body[data-page="trends"] .insights-grid[data-page~="trends"],
body[data-page="overview"] .insights-grid[data-page~="overview"],
body[data-page="reports"] .insights-grid[data-page~="reports"],
body[data-page="proof"] .insights-grid[data-page~="proof"],
body[data-page="diagnostics"] .insights-grid[data-page~="diagnostics"] {
  display: grid;
}

.ops-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.ops-header.page-section {
  display: none;
}
body[data-page="overview"] .ops-header.page-section[data-page~="overview"],
body[data-page="trends"] .ops-header.page-section[data-page~="trends"],
body[data-page="projections"] .ops-header.page-section[data-page~="projections"],
body[data-page="proof"] .ops-header.page-section[data-page~="proof"],
body[data-page="enterprise"] .ops-header.page-section[data-page~="enterprise"],
body[data-page="reports"] .ops-header.page-section[data-page~="reports"],
body[data-page="devices"] .ops-header.page-section[data-page~="devices"],
body[data-page="sites"] .ops-header.page-section[data-page~="sites"] {
  display: flex;
}
.eyebrow,
.card-label,
.cmp-label,
.insight-label,
.ops-meta span,
.summary-table span,
.quality-list span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ops-header h2 { font-size: 23px; font-weight: 650; margin: 3px 0 0; }
.ops-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px;
  min-width: 420px;
}
.ops-meta div,
.summary-table div,
.summary-table button,
.quality-list div,
.quality-list button,
.cmp-cell,
.insight-card,
.opt-row {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 11px;
}
.ops-meta strong,
.summary-table strong,
.quality-list strong {
  display: block;
  font-size: 14px;
  margin-top: 4px;
}

.overview-grid,
.cards,
.summary-grid,
.monitoring-grid,
.insights-grid,
.cmp-grid {
  display: grid;
  gap: 10px;
}
.overview-grid,
.cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 20px; }
.summary-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); margin-bottom: 20px; }
.monitoring-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.enterprise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.summary-table { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; }
.summary-table.two-col { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
.quality-list { display: grid; gap: 10px; }
.overview-command {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .65fr);
  margin-bottom: 12px;
}
.overview-load-panel {
  min-height: 430px;
}
.overview-split {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
  min-height: 340px;
}
.overview-primary {
  align-self: stretch;
  background: linear-gradient(180deg, #252c35 0%, #1c222a 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.overview-primary::after {
  background: linear-gradient(90deg, transparent, rgba(71, 183, 214, .12), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-100%);
}
.is-live ~ main .overview-primary::after,
body:has(.live-strip.is-live) .overview-primary::after {
  animation: scanline 4.5s linear infinite;
}
.overview-primary span,
.overview-mini-stats span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.overview-primary strong {
  color: var(--text);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 42px;
  line-height: 1;
  margin-top: 10px;
  overflow-wrap: anywhere;
}
.overview-primary small {
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
}
.overview-primary p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 14px 0 0;
  position: relative;
  z-index: 1;
}
.activity-rail {
  align-items: end;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 42px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.activity-rail i {
  background: linear-gradient(180deg, var(--accent), rgba(71, 183, 214, .18));
  border-radius: 2px 2px 0 0;
  display: block;
  height: 20%;
  opacity: .55;
}
.activity-rail i:nth-child(1) { height: 34%; }
.activity-rail i:nth-child(2) { height: 66%; }
.activity-rail i:nth-child(3) { height: 48%; }
.activity-rail i:nth-child(4) { height: 82%; }
.activity-rail i:nth-child(5) { height: 56%; }
.activity-rail i:nth-child(6) { height: 72%; }
body:has(.live-strip.is-live) .activity-rail i {
  animation: activityBars 1.8s ease-in-out infinite;
}
body:has(.live-strip.is-live) .activity-rail i:nth-child(2) { animation-delay: .12s; }
body:has(.live-strip.is-live) .activity-rail i:nth-child(3) { animation-delay: .24s; }
body:has(.live-strip.is-live) .activity-rail i:nth-child(4) { animation-delay: .36s; }
body:has(.live-strip.is-live) .activity-rail i:nth-child(5) { animation-delay: .48s; }
body:has(.live-strip.is-live) .activity-rail i:nth-child(6) { animation-delay: .6s; }
}
.overview-chart-wrap {
  min-height: 320px;
  min-width: 0;
  position: relative;
}
.overview-chart-wrap.compact {
  min-height: 245px;
}
.overview-chart-wrap canvas {
  height: 100% !important;
  width: 100% !important;
}
.overview-side {
  display: grid;
  gap: 12px;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.overview-side .insight-card {
  align-content: center;
  display: grid;
}
.overview-lower {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  margin-bottom: 12px;
}
.insight-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}
.insight-strip button {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  padding: 11px 12px;
  text-align: left;
}
.insight-strip button:hover {
  background: #27313c;
  border-color: var(--accent);
}
.insight-strip span,
.condition-card em {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.insight-strip strong,
.condition-card em {
  overflow-wrap: anywhere;
}
.insight-strip strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 5px;
}
.condition-card {
  border-left: 3px solid var(--amber) !important;
}
.condition-card strong.state-good { color: var(--green); }
.condition-card strong.state-review { color: var(--amber); }
.condition-card strong.state-waiting { color: var(--muted); }
.overview-map-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  margin-bottom: 12px;
}
.overview-mini-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}
.overview-mini-stats.action-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.overview-mini-stats div,
.overview-mini-stats button {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 10px 11px;
  text-align: left;
}
.overview-mini-stats button:hover,
.overview-mini-stats button:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.overview-mini-stats strong {
  display: block;
  font-size: 14px;
  margin-top: 4px;
}
.overview-actions .event-list.compact {
  max-height: 300px;
}

.panel,
.metric-card,
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 15px;
  box-shadow: 0 1px 2px rgba(18, 28, 38, .04);
}
.metric-card,
.standard-card,
.insight-card,
.summary-table button,
.quality-list button {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
.drill-card,
.summary-table button,
.quality-list button {
  appearance: none;
}
.drill-card:hover,
.summary-table button:hover,
.quality-list button:hover,
.event-item.actionable:hover,
.benchmark-row.actionable:hover,
.view-card.actionable:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(18, 28, 38, .08);
  transform: translateY(-1px);
}
.drill-card:focus-visible,
.summary-table button:focus-visible,
.quality-list button:focus-visible,
.event-item.actionable:focus-visible,
.benchmark-row.actionable:focus-visible,
.view-card.actionable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.drill-card::after,
.summary-table button::after,
.quality-list button::after {
  color: var(--accent);
  content: "Open";
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 8px;
  text-transform: uppercase;
}
.panel {
  border-top: 3px solid #4b5a68;
  margin-bottom: 16px;
}
.metric-card.primary { grid-column: span 2; border-left: 4px solid var(--accent); }
.standard-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 3px;
  padding: 12px;
  min-width: 0;
  position: relative;
}
.standard-card::before {
  background: var(--line-strong);
  content: "";
  height: 3px;
  left: 12px;
  position: absolute;
  right: 12px;
  top: 0;
}
.standard-card.normal { border-left-color: var(--green); }
.standard-card.notice { border-left-color: var(--accent); }
.standard-card.warning { border-left-color: var(--amber); }
.standard-card.critical { border-left-color: var(--red); }
.standard-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 111, 143, .12);
}
.standard-card.normal::before { background: var(--green); }
.standard-card.notice::before { background: var(--accent); }
.standard-card.warning::before { background: var(--amber); }
.standard-card.critical::before { background: var(--red); }
.standard-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.standard-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.standard-head strong {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 7px;
  white-space: nowrap;
}
.standard-card.normal .standard-head strong { color: var(--green); border-color: rgba(47, 125, 85, .35); }
.standard-card.notice .standard-head strong { color: var(--accent); border-color: rgba(38, 116, 140, .35); }
.standard-card.warning .standard-head strong { color: var(--amber); border-color: rgba(169, 118, 32, .35); }
.standard-card.critical .standard-head strong { color: var(--red); border-color: rgba(182, 62, 62, .35); }
.standard-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 11px;
}
.standard-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
  min-height: 32px;
}
.one-line {
  display: grid;
  gap: 8px;
}
.one-line-node {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 3px;
  display: grid;
  gap: 10px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  padding: 10px 11px;
  position: relative;
}
.one-line-node:not(:last-child)::after {
  background: var(--line-strong);
  bottom: -9px;
  content: "";
  height: 9px;
  left: 23px;
  position: absolute;
  width: 2px;
}
.one-line-node.normal { border-left-color: var(--green); }
.one-line-node.warning { border-left-color: var(--amber); }
.one-line-node.critical { border-left-color: var(--red); }
.one-line-icon {
  align-items: center;
  background: #111820;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.one-line-label strong,
.view-card strong,
.benchmark-row strong {
  display: block;
  font-weight: 650;
}
.one-line-label span,
.view-card span,
.benchmark-row span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}
.one-line-value {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  text-align: right;
}
.benchmark-list,
.view-grid {
  display: grid;
  gap: 8px;
}
.benchmark-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(78px, auto));
  padding: 10px 11px;
}
.benchmark-metric {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  text-align: right;
}
.view-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.view-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 10px 11px;
}
.device-kpis {
  margin-bottom: 12px;
}
.device-toolbar {
  align-items: end;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(240px, 1fr) minmax(140px, auto) minmax(160px, auto) minmax(96px, auto) auto;
  margin-bottom: 12px;
  padding: 12px;
}
.device-suite {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.device-inventory,
.device-detail {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px;
  min-width: 0;
}
.device-detail {
  align-content: start;
  display: none;
  gap: 12px;
  border-left: 4px solid var(--accent);
}
.device-detail.is-empty {
  opacity: .82;
}
.device-detail.is-selected {
  display: grid;
  inset: 24px;
  margin: auto;
  max-height: calc(100vh - 48px);
  max-width: 1100px;
  overflow: auto;
  position: fixed;
  width: min(1100px, calc(100vw - 48px));
  z-index: 1200;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46), 0 0 0 1px rgba(71, 183, 214, .22);
}
.device-modal-backdrop {
  background: rgba(6, 10, 14, .72);
  inset: 0;
  position: fixed;
  z-index: 1190;
}
.device-modal-backdrop[hidden],
.device-detail[hidden] {
  display: none;
}
body.device-modal-open {
  overflow: hidden;
}
body.settings-modal-open {
  overflow: hidden;
}
.device-modal-head {
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  padding-bottom: 10px;
}
.device-modal-head strong {
  font-size: 16px;
}
.device-modal-close {
  margin-left: auto;
}
.device-selected-banner {
  background: rgba(71, 183, 214, .08);
  border: 1px solid rgba(71, 183, 214, .26);
  border-radius: 3px;
  color: var(--muted);
  font-size: 13px;
  padding: 9px 10px;
}
.device-detail.is-selected .device-selected-banner {
  color: var(--text);
}
.mini-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mini-head strong {
  font-size: 13px;
}
.mini-head span {
  color: var(--muted);
  font-size: 12px;
}
.device-list {
  display: grid;
  gap: 8px;
  max-height: 58vh;
  overflow: auto;
}
.device-table-head {
  background: #171d25;
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 10px;
  grid-template-columns: minmax(210px, 1.2fr) minmax(92px, .45fr) minmax(180px, .9fr) minmax(180px, .9fr) minmax(120px, .55fr);
  letter-spacing: .05em;
  margin-bottom: 7px;
  padding: 8px 10px;
  text-transform: uppercase;
}
.device-row {
  appearance: none;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 10px;
  grid-template-columns: minmax(210px, 1.2fr) minmax(92px, .45fr) minmax(180px, .9fr) minmax(180px, .9fr) minmax(120px, .55fr);
  padding: 10px 11px;
  text-align: left;
  width: 100%;
}
.device-row > div:first-child strong {
  color: #0f2530;
}
.device-row.online { border-left-color: var(--green); }
.device-row.stale { border-left-color: var(--amber); }
.device-row.offline { border-left-color: var(--red); }
.device-row.selected,
.device-row:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(18, 28, 38, .08);
}
.device-row strong,
.device-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.device-row span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.device-status-cell strong {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  padding: 3px 8px;
  text-transform: capitalize;
}
.device-row.online .device-status-cell strong {
  background: rgba(32, 132, 90, .1);
  border-color: rgba(32, 132, 90, .35);
  color: var(--green);
}
.device-row.stale .device-status-cell strong {
  background: rgba(168, 111, 18, .1);
  border-color: rgba(168, 111, 18, .35);
  color: var(--amber);
}
.device-row.offline .device-status-cell strong {
  background: rgba(180, 51, 63, .1);
  border-color: rgba(180, 51, 63, .35);
  color: var(--red);
}
.device-assignment-cell,
.device-telemetry-cell {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.device-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
.device-remote-config,
.device-provision {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}
.device-remote-config .set-group {
  gap: 8px;
}
.device-remote-config .set-field {
  min-width: 145px;
}
.device-badges b {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  padding: 2px 6px;
  white-space: nowrap;
}
.device-badges.healthy b:first-child {
  border-color: rgba(32, 132, 90, .36);
  color: var(--green);
}
.device-badges.watch b:first-child {
  border-color: rgba(240, 182, 75, .42);
  color: var(--amber);
}
.device-badges.attention b:first-child,
.device-badges.critical b:first-child {
  border-color: rgba(180, 51, 63, .42);
  color: var(--red);
}
.device-actions {
  margin: 12px 0;
}
.device-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.device-pager {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
.device-pager span {
  color: var(--muted);
  font-size: 12px;
}
.device-pager button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.device-provision pre {
  background: #0f1d18;
  border-radius: 3px;
  color: #e9f4ef;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}
.card-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: 0;
  margin-top: 6px;
}
.metric-card.primary .card-value { font-size: 34px; }
.card-value small { color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 4px; }
.card-value.small { font-size: 18px; }
.metric-foot { color: var(--muted); font-size: 12px; margin-top: 8px; }

.panel-head,
.insights-header,
.opt-header,
.chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-head h2,
.insights-header h2,
.opt-header h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .01em;
  margin: 0;
}
.panel-head span,
.opt-hint,
.insights-note,
.cmp-note,
.muted { color: var(--muted); font-size: 12px; }
.collapse-btn {
  margin-left: auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 9px;
}
.collapse-btn:hover { color: var(--text); background: var(--panel-2); }
.panel.collapsed > :not(.panel-head):not(.insights-header):not(.opt-header):not(.chart-controls) {
  display: none;
}
.panel.collapsed { padding-bottom: 10px; }

.alerts { display: grid; gap: 10px; margin-bottom: 18px; }
.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  font-size: 13px;
  padding: 12px 14px;
}
.alert strong { min-width: 190px; }
.alert span { color: var(--muted); }
.alert.warning { border-color: rgba(169, 118, 32, .55); background: rgba(169, 118, 32, .08); }
.alert.critical { border-color: rgba(182, 62, 62, .6); background: rgba(182, 62, 62, .08); }

.sources-list { display: grid; gap: 8px; }
.event-list { display: grid; gap: 8px; }
.event-list.compact { max-height: 210px; overflow: auto; }
.source-disclosure {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
}
.event-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 3px;
  font-size: 13px;
  padding: 10px 12px;
}
.event-item strong { display: block; font-weight: 650; }
.event-item p { color: var(--muted); margin: 4px 0 0; }
.event-item .event-meta { color: var(--accent); font-size: 11px; font-weight: 700; }
.event-item span { color: var(--muted); white-space: nowrap; }
.event-item.warning { border-left-color: var(--amber); }
.event-item.critical { border-left-color: var(--red); }
.event-item.notice { border-left-color: var(--accent); }
.event-item.info { border-left-color: var(--green); }
.model-json {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--text);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.installer-box { display: grid; gap: 10px; }
.installer-box div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 12px;
}
.installer-box span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.installer-box strong,
.installer-box code {
  display: block;
  color: var(--text);
  font-size: 13px;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.source-item {
  display: grid;
  grid-template-columns: 16px minmax(140px, 1fr) minmax(120px, auto) minmax(90px, auto);
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 13px;
  padding: 10px 12px;
}
.source-item .src-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.source-item.stale .src-dot { background: var(--red); }
.source-item.stale { opacity: .78; }
.src-name { display: grid; gap: 2px; font-weight: 650; }
.src-name small { color: var(--muted); font-size: 11px; font-weight: 500; }
.src-age,
.src-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.src-telemetry {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
}
.src-telemetry b {
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  padding: 3px 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
th, td { padding: 11px 16px; text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-weight: 650; }
thead th { background: var(--panel-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr { border-top: 1px solid var(--line); }

.chart-controls { flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.field-select label { color: var(--muted); font-size: 12px; margin-right: 6px; }
.field-select select { min-width: 230px; }
select,
.set-field input,
.set-field select,
.login-form input {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 14px;
  padding: 8px 10px;
}
.range-buttons,
.chart-toggles { display: flex; gap: 6px; }
.range-buttons button,
.export,
.opt-btn {
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
}
.range-buttons button {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.range-buttons button.active,
.opt-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.metric-presets button {
  font-size: 12px;
  padding: 7px 9px;
}
.metric-window-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.metric-window-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(120px, 1fr) 74px 92px;
  max-width: 330px;
  min-width: 260px;
  padding: 6px;
}
.metric-window-name {
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-window-row select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
  height: 28px;
  padding: 3px 6px;
  width: 100%;
}
.chart-toggles {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 6px;
}
.chart-toggles label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  white-space: nowrap;
}
.chart-toggles input {
  margin: 0;
}
.chart-toggles label:has(input:disabled) {
  opacity: .45;
}
.chart-toggles select {
  height: 28px;
  font-size: 12px;
  padding: 3px 7px;
}
.chart-summary {
  color: var(--muted);
  font-size: 12px;
  margin: 8px 0 10px;
}
.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;
}
.export {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--line);
}
.export:hover { background: var(--panel-2); }
.chart-wrap { position: relative; height: 370px; }
.chart-panel + .chart-panel { margin-top: 20px; }
.chart-tool-panel {
  position: relative;
}
.chart-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.chart-tool-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  min-height: 29px;
  padding: 7px 9px;
  white-space: nowrap;
}
.chart-tool-btn:hover {
  background: var(--panel-3);
  color: var(--text);
}
.chart-tool-panel:fullscreen,
.chart-tool-panel.chart-expanded {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  inset: 0;
  max-width: none;
  overflow: auto;
  padding: 18px;
  width: 100vw;
}
.chart-tool-panel.chart-expanded {
  position: fixed;
  z-index: 1000;
}
body.chart-modal-open {
  overflow: hidden;
}
.chart-tool-panel:fullscreen .chart-wrap,
.chart-tool-panel.chart-expanded .chart-wrap,
.chart-tool-panel:fullscreen .overview-chart-wrap,
.chart-tool-panel.chart-expanded .overview-chart-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 70vh;
}
.chart-tool-panel:fullscreen .overview-split,
.chart-tool-panel.chart-expanded .overview-split {
  flex: 1 1 auto;
  min-height: 0;
}

.optimizer-panel { margin-top: 20px; }
.opt-header { align-items: baseline; flex-wrap: wrap; justify-content: flex-start; }
.opt-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.opt-row { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 280px; }
.opt-state { color: var(--muted); flex: 1; font-size: 13px; }
.opt-btn { font-weight: 650; }
.opt-btn.running { background: var(--red); border-color: var(--red); }
.settings-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.set-group { display: flex; flex-wrap: wrap; gap: 12px; }
.set-field { display: flex; flex: 1; min-width: 160px; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.wide-field { flex-basis: 320px; }
.setup-flow {
  display: grid;
  gap: 16px;
}
.setup-card {
  scroll-margin-top: 88px;
}
.setup-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.setup-title h2 {
  margin: 3px 0 0;
  font-size: 22px;
  letter-spacing: 0;
}
.setup-title > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(27, 94, 63, 0.28);
  border-radius: 4px;
  color: var(--green);
  background: rgba(27, 94, 63, 0.08);
  font-size: 12px;
  font-weight: 750;
}
.settings-launch-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}
.settings-launch-card {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  text-align: left;
}
.settings-launch-card:hover,
.settings-launch-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  outline: none;
}
.settings-launch-card span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(71, 183, 214, .34);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 800;
}
.settings-launch-card strong {
  font-size: 16px;
}
.settings-launch-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.settings-modal-backdrop {
  background: rgba(6, 10, 14, .72);
  inset: 0;
  position: fixed;
  z-index: 1190;
}
.settings-modal-backdrop[hidden],
.settings-modal[hidden] {
  display: none;
}
.settings-modal.is-open:not(.setup-step) {
  align-content: start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46), 0 0 0 1px rgba(71, 183, 214, .22);
  display: grid;
  gap: 12px;
  inset: 24px;
  margin: auto;
  max-height: calc(100vh - 48px);
  max-width: 920px;
  overflow: auto;
  padding: 12px;
  position: fixed;
  width: min(920px, calc(100vw - 48px));
  z-index: 1200;
}
.setup-steps {
  display: grid;
  gap: 12px;
}
.setup-step {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  background: var(--panel);
}
.setup-step + .setup-step {
  border-top: 1px solid var(--line);
}
.setup-step.settings-modal {
  align-content: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46), 0 0 0 1px rgba(71, 183, 214, .22);
  grid-template-columns: 220px minmax(0, 1fr);
  inset: 24px;
  margin: auto;
  max-height: calc(100vh - 48px);
  max-width: 1120px;
  overflow: auto;
  position: fixed;
  width: min(1120px, calc(100vw - 48px));
  z-index: 1200;
}
.setup-step.settings-modal + .setup-step.settings-modal {
  border-top: 1px solid var(--line);
}
.setup-step.settings-modal:not(.is-open) {
  display: none;
}
.setup-step-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.setup-step-head span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(54, 91, 124, 0.35);
  border-radius: 4px;
  color: var(--accent);
  background: rgba(54, 91, 124, 0.08);
  font-weight: 800;
}
.setup-step-head strong {
  display: block;
  letter-spacing: 0;
  line-height: 1.2;
}
.setup-step-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.settings-modal-close {
  margin-left: auto;
}
.setup-utility-strip,
.setup-device-summary,
.setup-records-grid {
  display: grid;
  gap: 10px;
}
.setup-utility-strip,
.setup-device-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 2;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
}
.setup-device-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.setup-utility-strip div,
.setup-device-summary div {
  min-width: 0;
}
.setup-utility-strip span,
.setup-device-summary span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
.setup-utility-strip strong,
.setup-device-summary strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.advanced-settings {
  grid-column: 2;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 11px;
  background: rgba(54, 91, 124, 0.04);
}
.advanced-settings summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--text);
}
.advanced-settings .set-group {
  margin-top: 12px;
}
.setup-step > .set-group,
.setup-step > .opt-controls {
  min-width: 0;
}
.setup-step .set-field {
  min-width: 200px;
}
.setup-step > .opt-controls {
  grid-column: 2;
  margin-bottom: 0;
}
.setup-step > .set-group {
  align-content: flex-start;
}
.setup-records-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.setup-records-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
}
.setup-records-grid .user-list {
  margin-top: 8px;
}
.location-map {
  width: 100%;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel-2);
}
.fleet-map {
  min-height: 360px;
}
.fleet-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.fleet-pin.critical span { background: var(--red); }
.fleet-pin.warning span { background: var(--amber); }
.fleet-pin.running span { background: var(--green); }
.fleet-pin.normal span { background: var(--accent); }
.fleet-pin.offline span { background: var(--muted); }
.fleet-pin.critical span,
.fleet-pin.warning span,
.fleet-pin.running span {
  animation: mapPulse 2.4s ease-out infinite;
}
.map-hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: -4px;
}
.leaflet-container {
  background: var(--panel-2);
  color: #111827;
  font-family: inherit;
}

@keyframes scanline {
  0% { transform: translateX(-100%); }
  58%, 100% { transform: translateX(100%); }
}

@keyframes activityBars {
  0%, 100% { opacity: .45; transform: scaleY(.65); }
  45% { opacity: .95; transform: scaleY(1); }
}

@keyframes mapPulse {
  0% { box-shadow: 0 0 0 0 rgba(71, 183, 214, .35), 0 1px 6px rgba(0, 0, 0, .45); }
  70% { box-shadow: 0 0 0 10px rgba(71, 183, 214, 0), 0 1px 6px rgba(0, 0, 0, .45); }
  100% { box-shadow: 0 0 0 0 rgba(71, 183, 214, 0), 0 1px 6px rgba(0, 0, 0, .45); }
}

.cmp-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cmp-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
  margin-top: 6px;
}
.cmp-val small { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 3px; }
.cmp-cell.good .cmp-val { color: var(--green); }
.cmp-cell.bad .cmp-val { color: var(--red); }
.cmp-note { margin-top: 12px; }

.insights-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.insight-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  margin-top: 6px;
}
.insights-note { margin-top: 12px; }

.user-list { display: grid; gap: 8px; margin-top: 12px; }
.user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 12px;
}
.user-item strong,
.user-item span {
  display: block;
}
.user-item span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.user-item > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
}

.meta { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; }

/* Layout safety: prevent common mobile overflow from long labels, numbers, and controls. */
.topbar > div,
.global-scope,
.global-scope label,
.scope-summary,
.ops-meta div,
.summary-table div,
.quality-list div,
.cmp-cell,
.insight-card,
.opt-row,
.panel,
.metric-card,
.card,
.event-item,
.event-item > div,
.user-item,
.user-item > div,
.source-item,
.installer-box div,
.standard-card,
.one-line-node,
.benchmark-row,
.view-card,
.device-inventory,
.device-detail,
.device-toolbar,
.device-toolbar > *,
.device-table-head,
.device-table-head > *,
.device-row,
.device-row > div,
.chart-controls > div {
  min-width: 0;
}
.card-value,
.cmp-val,
.insight-value,
.user-item strong,
.user-item span,
.event-item strong,
.event-item p,
.standard-value,
.standard-detail,
.one-line-label strong,
.one-line-label span,
.one-line-value,
.benchmark-row strong,
.benchmark-row span,
.benchmark-metric,
.view-card strong,
.view-card span,
.device-row strong,
.device-row span,
.device-table-head span,
.device-assignment-cell,
.device-telemetry-cell,
.device-detail pre,
.summary-table strong,
.quality-list strong {
  overflow-wrap: anywhere;
}
select,
.set-field input,
.set-field select,
.login-form input {
  min-width: 0;
  width: 100%;
}
table {
  display: block;
  overflow-x: auto;
}

button, input, select { transition: border-color .2s, background .2s; }
button:hover, .opt-btn:hover { background: var(--panel-2); }
.opt-btn:hover { color: var(--text); }
.set-field input:focus,
.set-field select:focus,
.login-form input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .14);
}

.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-shell { width: min(100%, 420px); margin: 0; padding: 22px; }
.login-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 22px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-brand h1 { font-size: 20px; margin: 0; }
.login-brand span:not(.dot) { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.login-error {
  border: 1px solid rgba(214, 69, 69, .6);
  background: rgba(214, 69, 69, .10);
  border-radius: 3px;
  color: var(--text);
  font-size: 13px;
  padding: 9px 11px;
}

@media (max-width: 900px) {
  html,
  body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .app-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
  }
  .sidebar {
    position: static;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    gap: 10px;
    scrollbar-width: thin;
  }
  .sidebar-brand {
    min-height: 30px;
    flex: 0 0 auto;
  }
  .sidebar-brand strong {
    font-size: 14px;
  }
  .sidebar-brand span,
  .sidebar-footer {
    display: none;
  }
  .section-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .nav-group {
    display: none;
  }
  .section-nav a {
    flex: 0 0 auto;
    font-size: 12px;
    gap: 6px;
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 34px;
    padding: 6px 8px 6px 5px;
  }
  .section-nav a::before {
    font-size: 8px;
    height: 20px;
    width: 20px;
  }
  .content-shell {
    height: 100%;
    overflow-y: auto;
  }
  .live-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 10px;
  }
  .live-strip button {
    padding: 6px 7px;
  }
  .live-strip strong {
    font-size: 14px;
  }
  main { padding: 12px 10px 24px; }
  main section { scroll-margin-top: 16px; }
  .topbar {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 7px 10px;
  }
  .topbar-title {
    display: none;
  }
  .top-actions,
  .ops-header,
  .panel-head,
  .insights-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .global-scope {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }
  .scope-summary {
    display: none;
  }
  .global-scope label span {
    font-size: 9px;
  }
  .global-scope select {
    height: 29px;
    font-size: 12px;
    padding: 4px 6px;
  }
  .top-actions,
  .top-actions form {
    width: auto;
  }
  .top-actions {
    align-items: stretch;
    gap: 5px;
  }
  .logout-btn,
  .user-pill {
    width: 78px;
    min-height: 29px;
    padding: 4px 6px;
    text-align: center;
    font-size: 11px;
  }
  .user-pill {
    overflow-wrap: anywhere;
  }
  .summary-grid,
  .enterprise-grid,
  .monitoring-grid,
  .overview-command,
  .overview-lower,
  .overview-map-row,
  .insight-strip,
  .overview-split,
  .view-grid,
  .summary-table {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }
  .overview-load-panel {
    min-height: 0;
  }
  .overview-chart-wrap,
  .overview-chart-wrap.compact {
    min-height: 260px;
  }
  .overview-side {
    grid-template-rows: none;
  }
  .benchmark-row {
    grid-template-columns: 1fr;
  }
  .device-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .device-suite {
    grid-template-columns: 1fr;
  }
  .device-table-head {
    display: none;
  }
  .device-row {
    grid-template-columns: 1fr;
  }
  .device-detail.is-selected {
    inset: 10px;
    max-height: calc(100vh - 20px);
    padding: 10px;
    width: calc(100vw - 20px);
  }
  .device-modal-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .device-modal-close {
    margin-left: 0;
    width: 100%;
  }
  .device-badges {
    justify-content: flex-start;
  }
  .benchmark-metric {
    text-align: left;
  }
  .ops-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
    gap: 6px;
  }
  .ops-meta div {
    padding: 8px 9px;
  }
  .metric-card.primary { grid-column: span 1; }
  .metric-card.primary .card-value { font-size: 32px; }
  .panel,
  .metric-card,
  .card {
    padding: 11px 10px;
  }
  .panel-head,
  .opt-header,
  .chart-controls {
    gap: 8px;
  }
  .collapse-btn {
    margin-left: 0;
  }
  .set-group,
  .opt-controls,
  .opt-row,
  .user-item,
  .event-item {
    align-items: stretch;
    flex-direction: column;
  }
  .set-field,
  .opt-row {
    min-width: 0;
    width: 100%;
  }
  .user-item > div:last-child {
    align-items: flex-start;
    text-align: left;
  }
  .event-item span {
    white-space: normal;
  }
  .location-map {
    min-height: 240px;
  }
  .setup-title {
    align-items: stretch;
    flex-direction: column;
  }
  .setup-title > span {
    justify-content: center;
    width: 100%;
  }
  .settings-launch-grid {
    grid-template-columns: 1fr;
  }
  .setup-step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .setup-step.settings-modal {
    grid-template-columns: 1fr;
    inset: 10px;
    max-height: calc(100vh - 20px);
    padding: 10px;
    width: calc(100vw - 20px);
  }
  .settings-modal.is-open:not(.setup-step) {
    inset: 10px;
    max-height: calc(100vh - 20px);
    padding: 10px;
    width: calc(100vw - 20px);
  }
  .setup-step-head {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .settings-modal-close {
    margin-left: 0;
    width: 100%;
  }
  .setup-utility-strip,
  .setup-device-summary,
  .setup-records-grid {
    grid-template-columns: 1fr;
  }
  .setup-utility-strip,
  .setup-device-summary,
  .advanced-settings,
  .setup-step > .opt-controls {
    grid-column: 1;
  }
  .source-item { grid-template-columns: 16px 1fr; }
  .src-age, .src-count, .src-telemetry { grid-column: 2; }
  .range-buttons { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .range-buttons button { flex: 0 0 auto; }
  .export { margin-left: 0; }
  .chart-wrap { height: 280px; }
  .alert { align-items: flex-start; flex-direction: column; }
  .alert strong { min-width: unset; }
}

@media (max-width: 420px) {
  .live-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-grid,
  .cards,
  .cmp-grid,
  .insights-grid,
  .overview-mini-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .overview-primary strong {
    font-size: 34px;
  }
  .device-toolbar,
  .device-pager {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .device-pager {
    display: grid;
  }
  .card-value {
    font-size: 24px;
  }
  .metric-card.primary .card-value {
    font-size: 29px;
  }
  main {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-primary::after,
  .activity-rail i,
  .fleet-pin span {
    animation: none !important;
  }
}