/* ═══════════════════════════════════════════════════
   HaLow Portal — Pace Wireless theme
   Shared by the signed-out landing and signed-in dashboard.
   ═══════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Core palette (Pace Wireless) ── */
  --halo-cyan: #00B4E5;
  --halo-cyan-bright: #35cdf5;
  --halo-cyan-dim: #0087c9;
  --halo-cyan-glow: rgba(0, 180, 229, 0.25);
  --halo-cyan-glow-strong: rgba(0, 180, 229, 0.45);
  --halo-teal: #3DDAC5;
  --halo-navy: #00274C;
  --halo-blue: #003A70;
  --halo-gold: #FFCB05;
  --halo-green: hsl(151, 100%, 45%);
  --halo-green-dim: hsla(151, 100%, 45%, 0.18);
  --halo-red: hsl(348, 100%, 54%);
  --halo-amber: hsl(40, 100%, 50%);

  /* ── Surfaces ── */
  --halo-bg: #0C131D;
  --halo-deep: #0C131D; /* keep in sync with theme-color */
  --halo-panel: #0e1a2c;
  --halo-panel-inner: #0a1524;
  --halo-panel-hover: #13263e;
  --halo-raised: #05122A;
  --halo-border: rgba(255, 255, 255, 0.10);
  --halo-border-strong: rgba(255, 255, 255, 0.16);
  --halo-text: #F8FAFC;
  --halo-subtle: #CAD5E2;
  --halo-muted: #90A1B9;
  --halo-subtext: #90A1B9;
  --halo-scrollbar-track: rgba(255, 255, 255, .035);
  --halo-scrollbar-thumb: rgba(0, 180, 229, .38);
  --halo-scrollbar-thumb-hover: rgba(53, 205, 245, .58);

  /* ── Radii ── */
  --halo-radius-control: 12px;
  --halo-radius-tile: 14px;
  --halo-radius-card: 20px;
  --halo-radius-panel: 24px;
  --app-height: 100dvh;

  /* ── Accents per board ── */
  --accent-001: rgba(0, 180, 229, 0.55);
  --accent-002: rgba(255, 203, 5, 0.50);

  /* ── Font stack ── */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: var(--font-sans);
  background: var(--halo-deep);
  color: var(--halo-text);
}

/* Presence & Range RADAR use case */
.radar-panel, .radar-trends-section, .radar-history-section, .radar-diagnostics-section { --text-muted: var(--halo-muted); --text-primary: var(--halo-text); }
.radar-panel { display: grid; gap: 18px; }
.radar-hero { --radar-accent: #5be36d; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 24px; border: 1px solid color-mix(in srgb, var(--radar-accent) 68%, transparent); border-radius: 18px; background: linear-gradient(115deg, color-mix(in srgb, var(--radar-accent) 8%, transparent), transparent 50%); }
.radar-hero.is-present { --radar-accent: #ffd400; box-shadow: 0 0 32px rgb(255 212 0 / .10); }
.radar-hero.is-fault { --radar-accent: #ff6b73; }
.radar-hero.is-offline { --radar-accent: #ffb347; box-shadow: none; }
.radar-hero.is-offline .radar-pulse { filter: saturate(.25); opacity: .58; }
.radar-panel.is-offline .radar-live-card,
.radar-panel.is-offline .radar-range-field,
.radar-panel.is-offline .radar-controls,
.radio-section.is-offline .radio-metric { border-color: rgba(255, 179, 71, .24); filter: saturate(.35); }
.radar-pulse { position: relative; width: 92px; aspect-ratio: 1; border: 1px solid var(--radar-accent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--radar-accent) 28%, transparent), transparent 62%); }
.radar-pulse::before, .radar-pulse::after { content: ''; position: absolute; inset: 16px; border: 1px solid color-mix(in srgb, var(--radar-accent) 55%, transparent); border-radius: inherit; }
.radar-pulse::after { inset: 32px; background: var(--radar-accent); box-shadow: 0 0 18px var(--radar-accent); }
.radar-hero.is-present .radar-pulse span { position: absolute; inset: -1px; border: 1px solid var(--radar-accent); border-radius: 50%; animation: radar-pulse 2s ease-out infinite; }
@keyframes radar-pulse { from { transform: scale(.35); opacity: .8; } to { transform: scale(1.2); opacity: 0; } }
.radar-eyebrow { margin: 0 0 5px; color: #21ccef; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.radar-status-headline { margin: 0; color: var(--radar-accent); font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.radar-status-subhead { margin: 9px 0 0; color: var(--text-muted); }
.radar-health-badge { align-self: start; padding: 6px 10px; color: var(--radar-accent); border: 1px solid currentColor; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.radar-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.radar-live-card { min-width: 0; padding: 17px; border: 1px solid rgb(17 194 232 / .28); border-radius: 12px; background: rgb(6 34 53 / .72); }
.radar-live-card > span { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.radar-live-card strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: 1.35rem; }
.radar-live-card strong b { font-size: 2rem; }
.radar-live-card em { color: var(--text-muted); font-size: .9rem; font-style: normal; }
.radar-live-card small { display: block; margin-top: 5px; color: var(--text-muted); }
.radar-range-field { padding: 18px; border: 1px solid rgb(17 194 232 / .2); border-radius: 13px; background: rgb(3 24 40 / .6); }
.radar-range-axis { display: flex; justify-content: space-between; color: var(--text-muted); font-size: .75rem; }
.radar-range-track { position: relative; height: 10px; margin: 8px 0 12px; overflow: visible; border-radius: 99px; background: rgb(84 112 135 / .28); }
.radar-range-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0ea4c5, #12c2e8); }
.radar-range-target { position: absolute; top: 50%; left: 0; width: 17px; height: 17px; translate: -50% -50%; border: 3px solid white; border-radius: 50%; background: #ffd400; box-shadow: 0 0 14px #ffd400; }
.radar-range-field p { margin: 0; color: var(--text-muted); font-size: .8rem; }
.radar-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; min-width: 0; padding: 18px; border: 1px solid rgb(17 194 232 / .22); border-radius: 14px; }
.radar-controls-copy { grid-column: 1 / -1; min-width: 0; }
.radar-controls-copy h4 { margin: 0; color: var(--text-primary); }
.radar-controls-copy p:last-child { margin: 5px 0 0; color: var(--text-muted); font-size: .8rem; }
.radar-controls label { display: grid; gap: 7px; min-width: 0; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.radar-controls label > span { align-items: center; display: flex; gap: 6px; min-width: 0; }
.radar-controls input, .radar-controls select, .radar-history-range, .radar-history-page-size { min-height: 38px; color: var(--text-primary); border: 1px solid rgb(17 194 232 / .35); border-radius: 8px; background: rgb(3 23 38 / .9); }
.radar-controls input { min-width: 0; width: 100%; padding: 0 9px; }
.radar-controls select { width: 100%; padding: 0 9px; }
.radar-control-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 12rem)); justify-content: end; gap: 10px; }
.radar-control-actions .btn { min-height: 44px; width: 100%; }
.radar-command-status { grid-column: 1 / -1; min-height: 1em; color: var(--text-muted); font-size: .8rem; text-align: right; }
.radar-range-select-label { display: grid; gap: 5px; min-width: 130px; color: var(--text-muted); font-size: .72rem; font-weight: 700; }
.radar-history-range { padding: 0 9px; }
.radar-chart-wrap { position: relative; min-height: 230px; margin-top: 16px; border: 1px solid rgb(17 194 232 / .18); border-radius: 12px; background: linear-gradient(180deg, rgb(3 43 66 / .75), rgb(3 24 40 / .85)); }
.radar-range-chart { width: 100%; height: 230px; overflow: visible; }
.radar-chart-grid line { stroke: rgb(60 171 199 / .18); stroke-width: 1; }
.radar-chart-line { fill: none; stroke: #11c2e8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.doppler-status-headline { margin: 0; color: var(--radar-accent); font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.doppler-status-subhead { margin: 9px 0 0; color: var(--text-muted); }
.doppler-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doppler-energy-fill { width: 0; background: linear-gradient(90deg, #0ea4c5, #ffd400); transition: width .2s ease; }
.doppler-threshold-marker { width: 4px; height: 18px; border: 0; border-radius: 2px; background: #ff9f43; box-shadow: 0 0 10px #ff9f43; }
.doppler-chart-threshold { stroke: #ff9f43; stroke-width: 1.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.doppler-chart-wrap { min-height: 266px; padding-bottom: 36px; }
.doppler-chart-wrap .radar-range-chart { height: 224px; }
.doppler-chart-x-labels {
  bottom: 22px;
  color: var(--text-muted);
  display: grid;
  font-size: .66rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  left: 50px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  z-index: 1;
}
.doppler-chart-x-labels span:nth-child(2) { text-align: center; }
.doppler-chart-x-labels span:last-child { text-align: right; }
.doppler-chart-x-title {
  bottom: 5px;
  color: #8aa4b7;
  font-size: .58rem;
  font-weight: 750;
  left: 50px;
  letter-spacing: .1em;
  pointer-events: none;
  position: absolute;
  right: 20px;
  text-align: center;
  z-index: 1;
}
.doppler-chart-open > span {
  background: rgba(2, 18, 30, .82);
  border: 1px solid rgba(0, 180, 229, .2);
  border-radius: 999px;
  bottom: auto;
  padding: 5px 8px;
  top: 9px;
}
.doppler-chart-axis-copy { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 9px; }
.doppler-chart-axis-copy p { align-items: start; background: rgba(0, 180, 229, .035); border: 1px solid rgba(0, 180, 229, .12); border-radius: 9px; color: var(--text-muted); display: grid; font-size: .7rem; gap: 3px; line-height: 1.45; margin: 0; padding: 9px 11px; }
.doppler-chart-axis-copy strong { color: var(--halo-cyan); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.radar-chart-high, .radar-chart-mid, .radar-chart-low { position: absolute; left: 8px; color: var(--text-muted); font-size: .68rem; }
.radar-chart-high { top: 16px; }.radar-chart-mid { top: 101px; }.radar-chart-low { bottom: 24px; }
.radar-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); }
.radar-activity { margin-top: 22px; }.radar-activity h4 { color: var(--text-primary); }
.radar-diagnostics { border: 1px solid rgb(17 194 232 / .22); border-radius: 13px; background: rgb(3 24 40 / .55); }
.radar-diagnostics summary { padding: 17px 20px; cursor: pointer; color: var(--text-primary); }
.radar-diagnostics summary span { display: inline-grid; gap: 3px; margin-left: 6px; }.radar-diagnostics summary small { color: var(--text-muted); font-weight: 400; }
.radar-diagnostics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0 20px 20px; }
.radar-diagnostics-grid div { padding: 14px; background: rgb(7 39 58 / .8); }.radar-diagnostics-grid dt { color: var(--text-muted); font-size: .7rem; text-transform: uppercase; }.radar-diagnostics-grid dd { margin: 6px 0 0; color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.radar-diagnostics-note { margin: 0 20px 20px; color: var(--text-muted); font-size: .8rem; }
@media (max-width: 900px) { .radar-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.radar-controls, .doppler-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }.radar-controls-copy { grid-column: 1 / -1; }.radar-control-actions { grid-column: 1 / -1; }.radar-diagnostics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .radar-hero { grid-template-columns: 64px minmax(0, 1fr); padding: 18px; }.radar-pulse { width: 58px; }.radar-health-badge { grid-column: 1 / -1; }.radar-live-grid, .radar-controls, .radar-diagnostics-grid, .doppler-chart-axis-copy { grid-template-columns: minmax(0, 1fr); }.radar-control-actions { grid-column: 1; grid-template-columns: minmax(0, 1fr); }.radar-command-status { text-align: left; }.radar-trends-section .activity-header, .radar-history-section .activity-header { align-items: stretch; }.radar-range-select-label { width: 100%; }.doppler-chart-x-labels { font-size: .58rem; left: 42px; right: 12px; } }

/* HVAC Air Quality uses the established environmental module surfaces with threshold color owned
   by portal/charts.js. These classes are applied from normalized cloud telemetry only. */
.hvac-section .environment-metric,
.hvac-environment-section .environment-metric {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.environment-metric.hvac-detail-temperature { --environment-metric-accent: #ffd166; }
.environment-metric.hvac-detail-humidity { --environment-metric-accent: #3ddac5; }
.environment-metric.hvac-detail-particle-mass { --environment-metric-accent: #58c9f3; }
.environment-metric.hvac-detail-particle-size { --environment-metric-accent: #9bbcf0; }
.environment-metric.hvac-detail-voc { --environment-metric-accent: #bd8cff; }
.environment-metric.hvac-detail-nox { --environment-metric-accent: #ff9f5c; }

.hvac-environment-section .environment-metric-heading {
  color: color-mix(in srgb, var(--environment-metric-accent) 42%, var(--halo-subtle));
}

.hvac-environment-section .environment-metric-icon {
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 18px color-mix(in srgb, var(--environment-metric-accent) 8%, transparent);
  height: 34px;
  width: 34px;
}

.hvac-environment-section .environment-metric-icon svg { height: 18px; width: 18px; }

@media (hover: hover) {
  .hvac-detail-card:hover {
    border-color: color-mix(in srgb, var(--environment-metric-accent) 58%, var(--halo-border));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2), 0 0 24px color-mix(in srgb, var(--environment-metric-accent) 6%, transparent), inset 0 1px 0 rgba(255, 255, 255, .04);
    transform: translateY(-2px);
  }
}

.hvac-state-good,
.hvac-state-normal {
  border-color: color-mix(in srgb, var(--halo-green) 48%, var(--halo-border));
  background: color-mix(in srgb, var(--halo-green) 7%, var(--halo-panel-inner));
}

.hvac-state-moderate {
  border-color: color-mix(in srgb, var(--halo-gold) 52%, var(--halo-border));
  background: color-mix(in srgb, var(--halo-gold) 9%, var(--halo-panel-inner));
}

.hvac-state-unhealthy-sensitive-groups,
.hvac-state-unhealthy,
.hvac-state-very-unhealthy,
.hvac-state-hazardous,
.hvac-state-alert {
  border-color: color-mix(in srgb, var(--halo-red) 60%, var(--halo-border));
  background: color-mix(in srgb, var(--halo-red) 9%, var(--halo-panel-inner));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--halo-red) 80%, transparent);
}

.hvac-chemistry-card[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* One scrollbar language for the page and every inset overflow surface. */
* {
  scrollbar-color: var(--halo-scrollbar-thumb) var(--halo-scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-track {
  background: var(--halo-scrollbar-track);
  border-radius: 999px;
  margin: 4px;
}
*::-webkit-scrollbar-thumb {
  background: var(--halo-scrollbar-thumb);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  min-height: 34px;
  min-width: 34px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--halo-scrollbar-thumb-hover); }
*::-webkit-scrollbar-corner { background: transparent; }

@media (forced-colors: active) {
  * { scrollbar-color: auto; scrollbar-width: auto; }
}

body {
  font-family: var(--font-sans);
  background-color: var(--halo-bg);
  color: var(--halo-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Browsers use a system UI face on form controls unless inherited explicitly. */
button,
input,
textarea,
select {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}

html {
  background: #000;
  height: 100%;
  min-height: var(--app-height, 100dvh);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
  scrollbar-gutter: stable;
}

/* Metric-matched fallback so Inter swapping in does not shift the layout. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

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

.skip-link {
  background: var(--halo-cyan);
  border: 0;
  border-radius: 0 0 10px 10px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  color: var(--halo-deep);
  font-size: .88rem;
  font-weight: 700;
  height: 1px;
  left: 12px;
  overflow: hidden;
  padding: 0;
  position: fixed;
  text-decoration: none;
  top: env(safe-area-inset-top, 0);
  white-space: nowrap;
  width: 1px;
  z-index: 1100;
}

.skip-link:focus,
.skip-link:focus-visible {
  clip: auto;
  clip-path: none;
  height: auto;
  outline: 3px solid #fff;
  outline-offset: 2px;
  overflow: visible;
  padding: 10px 14px;
  width: auto;
}

.skip-link[hidden] {
  display: none !important;
}

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--halo-cyan);
  outline-offset: 2px;
}

button,
[role="tab"],
summary {
  touch-action: manipulation;
}

/* ── Global Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--halo-radius-control);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
  border: 1px solid transparent;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.95rem;
  text-decoration: none;
}

.btn .btn-icon,
.btn > svg {
  fill: none;
  flex: 0 0 auto;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.btn:active:not(:disabled) { transform: translateY(0); }

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(180deg, #00a6e8, #0080c0);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 180, 229, 0.22);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #12b6f5, #058ccc);
  box-shadow: 0 12px 28px rgba(0, 180, 229, 0.32);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--halo-text);
  border-color: var(--halo-border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.btn-danger {
  background: rgba(255, 23, 68, .11);
  border-color: rgba(255, 93, 108, .34);
  color: #ff9aa8;
}

.btn-danger:hover:not(:disabled) {
  background: rgba(255, 23, 68, .2);
  border-color: rgba(255, 93, 108, .58);
  color: #fff;
}

/* ── Page scaffold ── */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
  overscroll-behavior-y: none;
  background-color: var(--halo-deep);
  background-image:
    radial-gradient(ellipse 70% 46% at 88% -8%, rgba(0, 180, 229, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(13, 61, 97, 0.40) 0%, transparent 46%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% min(560px, 72dvh), 40px 40px, 40px 40px;
  background-position: center top, center top, 0 0, 0 0;
}

.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
  overflow-x: clip;
  padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
}

.page-shell > .site-header {
  flex-shrink: 0;
}

main {
  flex: 0 0 auto;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 16px 0;
  scroll-margin-top: 64px;
  width: 100%;
}

.dashboard-shell,
.dashboard-content {
  min-width: 0;
  width: 100%;
}

.dashboard-content {
  container-name: dashboard-content;
  container-type: inline-size;
}

h1, h2, h3, p { margin: 0; }

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.site-header {
  background: var(--halo-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  isolation: isolate;
  position: sticky;
  top: 0;
  /* Above board switcher / picker menus so sticky header never gets covered on scroll. */
  z-index: 100;
}

@supports (padding: max(0px)) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }
}

@media (hover: hover) and (min-width: 720px) {
  .site-header {
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    background: rgba(2, 10, 20, .92);
  }
}

.site-header-inner {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 960px;
  padding: 10px 16px;
  width: 100%;
}

.brand {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

.site-logo {
  aspect-ratio: 256 / 66;
  display: block;
  flex: 0 0 auto;
  height: 26px;
  object-fit: contain;
  width: 101px;
  filter: brightness(0) invert(1);
}

.brand-text {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.brand-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-sub {
  color: var(--halo-subtle);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* ── Connection pill ── */
.status-pill {
  align-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--halo-border);
  border-radius: 999px;
  color: var(--halo-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  gap: 7px;
  max-width: none;
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
}

.status-pill::before {
  background: var(--halo-subtle);
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

.status-connecting::before {
  animation: glow-pulse 1.6s ease-in-out infinite;
  background: var(--halo-amber);
  box-shadow: 0 0 6px rgba(255, 171, 0, .5);
}

.status-live::before {
  background: var(--halo-green);
  box-shadow: 0 0 8px rgba(0, 230, 118, .4);
}

.status-waiting::before {
  background: var(--halo-subtle);
}

.status-error::before {
  background: var(--halo-red);
  box-shadow: 0 0 6px rgba(255, 23, 68, .4);
}

.status-live {
  border-color: rgba(0, 230, 118, .22);
  color: #b9f6ca;
}

.status-waiting {
  border-color: var(--halo-border);
  color: var(--halo-muted);
}

.status-error {
  border-color: rgba(255, 23, 68, .24);
  color: #ff8a80;
}

.status-dev {
  border-color: rgba(179, 136, 255, .28);
  color: #e0d6ff;
  background: rgba(179, 136, 255, .08);
}

.status-dev::before {
  background: #b388ff;
  box-shadow: 0 0 6px rgba(179, 136, 255, .45);
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
  margin: 0 auto;
  max-width: 960px;
  padding: 16px 16px 8px;
  width: 100%;
}

.hero-status {
  color: var(--halo-subtle);
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 500;
  margin: 0 0 16px;
  min-height: 1.5em;
  text-align: center;
}

.radio-chips {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.chip {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  color: var(--halo-subtle);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin: 0;
  min-width: 0;
  padding: 8px 10px;
  text-align: center;
}

.chip-value { display: inline; }

.chip-idle-text {
  font-style: italic;
  margin: 0;
}

.chip strong {
  color: #fff;
  font-weight: 700;
}

.chip-muted {
  border-style: dashed;
  font-style: italic;
}

.radio-chips.signal-good .chip strong { color: #b9f6ca; }
.radio-chips.signal-fair .chip strong { color: #ffe082; }
.radio-chips.signal-poor .chip strong { color: #ff8a80; }

/* ═══════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════ */
.empty, .device-card {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
}

.empty {
  color: var(--halo-muted);
  padding: clamp(36px, 6vw, 48px) 24px;
  position: relative;
  text-align: center;
}

.empty h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.empty p {
  line-height: 1.55;
  margin: 0 auto;
  max-width: 34rem;
}

.empty-lead {
  color: var(--halo-subtle);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.empty-steps {
  list-style: none;
  counter-reset: steps-counter;
  padding: 0;
  margin: 24px auto;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.empty-steps li {
  counter-increment: steps-counter;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0, 180, 229, .04);
  border: 1px solid rgba(0, 180, 229, .12);
  border-radius: var(--halo-radius-control);
  padding: 12px 16px;
  text-align: left;
  color: var(--halo-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.empty-steps li::before {
  content: counter(steps-counter);
  background: rgba(0, 180, 229, 0.1);
  color: var(--halo-cyan);
  border: 1px solid var(--halo-cyan);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.empty-steps code {
  color: var(--halo-cyan);
  font-size: .88em;
  background: rgba(0, 180, 229, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
}

.empty-hint {
  color: var(--halo-subtle);
  font-size: .8rem;
  line-height: 1.5;
  margin: 20px auto 0;
  max-width: 30rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

.empty-hint code {
  color: var(--halo-cyan);
  font-size: .88em;
  background: rgba(0, 180, 229, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════
   BOARD SWITCHER / PICKER
   ═══════════════════════════════════════════════════ */
.board-switcher {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 180, 229, 0.05);
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  position: relative;
  /* Below sticky site header (100); still above device card content. */
  z-index: 20;
}

.board-switcher.is-picker-open {
  z-index: 30;
}

.card-footer {
  border-top: 1px solid var(--halo-border);
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
}

.card-footer .btn {
  flex: 1 1 50%;
  justify-content: flex-start;
}

.raw-telemetry-content {
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  margin-top: 16px;
  max-height: min(70vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.board-switcher-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.board-switcher-icon,
.board-switcher-title-group {
  display: none;
}

.board-switcher-hint {
  display: none;
}

.board-switcher-hint-icon {
  fill: none;
  flex: 0 0 auto;
  height: 12px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 12px;
}

.board-switcher-manage-btn {
  background: transparent;
  border: 0;
  color: var(--halo-cyan);
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

.board-switcher-manage-btn:hover {
  color: #fff;
}

.board-switcher-label {
  color: var(--halo-subtle);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.board-summary {
  color: var(--halo-muted);
  font-size: .74rem;
  font-weight: 600;
}

.board-unread-badge {
  align-items: center;
  align-self: flex-start;
  background: rgba(255, 80, 105, .15);
  border: 1px solid rgba(255, 112, 132, .4);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 80, 105, .12);
  color: #ffd4db;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 20px;
  min-width: 20px;
  padding: 3px 6px;
}

.board-unread-badge[hidden] {
  display: none;
}

.use-case-diagnostic { --use-case-accent: #8fb7e8; }
.use-case-environmental_sensor { --use-case-accent: #3ddac5; }
.use-case-hvac_air_quality { --use-case-accent: #7ee787; }
.use-case-mailbox { --use-case-accent: var(--halo-cyan); }
.use-case-water_detect { --use-case-accent: #69f0ae; }

.board-usecase-icon {
  align-items: center;
  background: color-mix(in srgb, var(--use-case-accent, var(--halo-cyan)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--use-case-accent, var(--halo-cyan)) 28%, transparent);
  border-radius: 10px;
  color: var(--use-case-accent, var(--halo-cyan));
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  position: relative;
  width: 40px;
}

.board-usecase-icon-art {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.board-usecase-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 20px;
}

.board-picker {
  position: relative;
  z-index: 1;
}

.board-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.board-options-single {
  grid-template-columns: 1fr;
}

.board-chip {
  align-items: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  color: var(--halo-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 10px;
  min-height: 64px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  width: 100%;
}

.board-chip:focus-visible {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 3px var(--halo-cyan-glow);
}

.board-chip:not(:disabled):hover {
  background: rgba(0, 180, 229, .06);
  border-color: var(--halo-border-strong);
}

.board-chip.is-selected {
  background: rgba(0, 180, 229, .08);
  border-color: rgba(0, 180, 229, .32);
  box-shadow: inset 3px 0 0 var(--halo-cyan);
  color: #fff;
}

.board-chip:disabled {
  cursor: default;
  opacity: 1;
}

.board-chip-dot {
  background: var(--halo-subtle);
  border: 2px solid var(--halo-panel);
  border-radius: 50%;
  bottom: -3px;
  height: 10px;
  position: absolute;
  right: -3px;
  width: 10px;
}

.board-chip-dot.live {
  background: var(--halo-green);
  box-shadow: 0 0 6px rgba(0, 230, 118, .4);
}
.board-chip-dot.simulated { background: #ffd740; }
.board-chip-dot.stale, .board-chip-dot.old { background: var(--halo-subtle); }

.board-chip-main {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.board-chip-name {
  color: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-chip-details {
  align-items: baseline;
  color: var(--halo-subtle);
  display: flex;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  gap: 6px;
  min-width: 0;
}

.board-chip-id {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-chip-radio {
  color: var(--halo-subtle);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-chip.is-selected .board-chip-radio {
  color: rgba(185, 246, 202, .85);
}

.board-chip-state {
  color: var(--halo-subtle);
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

.board-picker-trigger {
  align-items: center;
  background: rgba(3, 12, 30, 0.45);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  color: #fff;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  width: 100%;
}

.board-picker-trigger:hover:not(:disabled) {
  background: rgba(0, 180, 229, .05);
  border-color: var(--halo-border-strong);
}

.board-picker-trigger:focus-visible {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 3px var(--halo-cyan-glow);
  outline: none;
}

.board-picker-trigger[aria-expanded="true"] {
  border-color: rgba(0, 180, 229, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 180, 229, 0.12);
}

.board-picker-trigger:disabled {
  cursor: default;
  opacity: 1;
}

.board-picker-trigger:disabled .board-picker-chevron {
  opacity: 0.25;
}

.board-picker-trigger-dot {
  background: var(--halo-subtle);
  border: 2px solid var(--halo-panel);
  border-radius: 50%;
  bottom: -3px;
  height: 10px;
  position: absolute;
  right: -3px;
  width: 10px;
}

.board-picker-trigger-icon { height: 38px; width: 38px; }

.board-picker-trigger-dot.live {
  background: var(--halo-green);
  box-shadow: 0 0 6px rgba(0, 230, 118, .45);
}
.board-picker-trigger-dot.simulated { background: #ffd740; }
.board-picker-trigger-dot.stale,
.board-picker-trigger-dot.old { background: var(--halo-subtle); }

.board-picker-trigger-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.board-picker-trigger-name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-picker-trigger-details {
  align-items: baseline;
  color: var(--halo-subtle);
  display: flex;
  font-size: .72rem;
  gap: 6px;
  min-width: 0;
}

.board-picker-trigger-id {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-picker-trigger-meta {
  color: var(--halo-subtle);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-picker-trigger-meta:empty {
  display: none;
}

.board-picker-trigger-state {
  color: var(--halo-muted);
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.board-picker-chevron {
  border-right: 2px solid var(--halo-muted);
  border-bottom: 2px solid var(--halo-muted);
  flex: 0 0 auto;
  height: 8px;
  margin-left: 2px;
  transform: rotate(45deg);
  transition: transform .15s ease;
  width: 8px;
}

.board-picker-trigger[aria-expanded="true"] .board-picker-chevron {
  transform: translateY(2px) rotate(225deg);
}

.board-picker-menu {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-tile);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  left: 0;
  margin-top: 6px;
  max-height: min(22rem, 70vh);
  overflow: hidden;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.board-picker-filter-wrap {
  display: block;
  padding: 2px 2px 0;
}

.board-picker-filter {
  background: rgba(3, 12, 30, 0.55);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  width: 100%;
}

.board-picker-filter:focus {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 2px var(--halo-cyan-glow);
  outline: none;
}

.board-picker-options {
  display: grid;
  gap: 2px;
  max-height: min(18rem, 60vh);
  overflow: auto;
  overscroll-behavior: contain;
}

.board-picker-empty {
  color: var(--halo-muted);
  font-size: .84rem;
  padding: 0.75rem 0.65rem;
}

.board-option {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--halo-muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  text-align: left;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  width: 100%;
}

.board-option:hover,
.board-option.is-active {
  background: rgba(0, 180, 229, .06);
  border-color: rgba(0, 180, 229, .12);
  color: #fff;
}

.board-option.is-selected {
  background: rgba(0, 180, 229, .08);
  border-color: rgba(0, 180, 229, .22);
  color: #fff;
}

.board-option:focus-visible {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 2px var(--halo-cyan-glow);
  outline: none;
}

.board-option-dot {
  background: var(--halo-subtle);
  border: 2px solid var(--halo-panel);
  border-radius: 50%;
  bottom: -3px;
  height: 9px;
  position: absolute;
  right: -3px;
  width: 9px;
}

.board-option-icon { border-radius: 9px; height: 34px; width: 34px; }
.board-option-icon svg { height: 17px; width: 17px; }

.board-option-dot.live {
  background: var(--halo-green);
  box-shadow: 0 0 6px rgba(0, 230, 118, .4);
}
.board-option-dot.simulated { background: #ffd740; }
.board-option-dot.stale,
.board-option-dot.old { background: var(--halo-subtle); }

.board-option-main {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.board-option-name {
  font-size: .88rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-option-details {
  align-items: baseline;
  color: var(--halo-subtle);
  display: flex;
  font-size: .7rem;
  gap: 6px;
  min-width: 0;
}

.board-option-id {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-option-radio {
  color: var(--halo-subtle);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-option-radio:empty {
  display: none;
}

.board-option-state {
  color: var(--halo-subtle);
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}

.board-option.board-option--firmware-attention .board-option-name::after {
  content: ' · FW';
  color: #ffe082;
  font-weight: 600;
}

.stale-notice {
  background: rgba(255, 171, 0, .06);
  border: 1px solid rgba(255, 171, 0, .18);
  border-radius: var(--halo-radius-control);
  color: #ffe082;
  font-size: .8rem;
  line-height: 1.4;
  margin: 0 0 12px;
  padding: 9px 12px;
}

/* ═══════════════════════════════════════════════════
   DEVICE CARD
   ═══════════════════════════════════════════════════ */
.devices {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.devices[hidden] {
  display: none !important;
}

.device-card {
  animation: card-in .4s cubic-bezier(0.1, 0.9, 0.2, 1);
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 180, 229, 0.05);
  min-width: 0;
  overflow: visible;
  padding: 24px;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.device-card:hover {
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(0, 180, 229, 0.10);
}

.device-card.stale { border-color: var(--halo-amber); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 171, 0, 0.18); }
.device-card.sample-old {
  border-color: rgba(255, 171, 0, .42);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 171, 0, .16);
}

.device-card > * { position: relative; z-index: 1; }

.device-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.device-layout-bar {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0;
  position: relative;
  z-index: 6;
}

.device-card.view-picker-open {
  z-index: 8;
}

.device-card.view-picker-open .device-heading {
  z-index: 70;
}

.view-switcher {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  margin-right: 0;
  min-width: 0;
  position: relative;
  z-index: 5;
}

.view-switcher-label {
  color: var(--halo-subtle);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.view-picker {
  position: relative;
  min-width: 0;
}

.view-picker-trigger {
  align-items: center;
  appearance: none;
  background: rgba(3, 12, 30, 0.55);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 7px;
  justify-content: space-between;
  max-width: 16rem;
  min-height: 28px;
  min-width: 6.75rem;
  padding: 0 8px 0 9px;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.view-picker-trigger:hover {
  background: rgba(0, 180, 229, .05);
  border-color: var(--halo-border-strong);
}

.view-picker-trigger:focus-visible {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 3px var(--halo-cyan-glow);
  outline: none;
}

.view-picker-trigger[aria-expanded="true"] {
  border-color: rgba(0, 180, 229, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 180, 229, 0.12);
}

.view-picker-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 550;
  max-width: 7rem;
}

.view-picker-chevron {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 12px;
  justify-content: center;
  margin-left: 2px;
  transition: transform .15s ease;
  width: 12px;
}

.view-picker-chevron svg {
  display: block;
  fill: none;
  height: 12px;
  stroke: var(--halo-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 12px;
}

.view-picker-trigger[aria-expanded="true"] .view-picker-chevron {
  transform: rotate(180deg);
}

.view-picker-menu {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-tile);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 2px;
  left: 0;
  margin-top: 6px;
  max-height: 14rem;
  min-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  position: absolute;
  right: auto;
  top: 100%;
  z-index: 80;
}

.view-picker-option {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--halo-muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  gap: 8px;
  justify-content: space-between;
  min-height: 36px;
  padding: 0.4rem 0.65rem;
  text-align: left;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  width: 100%;
  white-space: nowrap;
}

.view-picker-option:hover,
.view-picker-option.is-active {
  background: rgba(0, 180, 229, .06);
  border-color: rgba(0, 180, 229, .12);
  color: #fff;
}

.view-picker-option.is-selected {
  background: rgba(0, 180, 229, .09);
  border-color: rgba(0, 180, 229, .22);
  color: #fff;
}

.view-picker-option.is-selected::after {
  color: var(--halo-cyan);
  content: "✓";
  font-size: .75rem;
  font-weight: 700;
}

.view-picker-option:focus-visible {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 2px var(--halo-cyan-glow);
  outline: none;
}

.device-layout-bar .btn {
  font-size: .68rem;
  padding: 4px 8px;
}

.layout-customize-btn {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 28px;
}

.layout-customize-icon {
  align-items: center;
  display: none;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.layout-customize-icon svg {
  display: block;
  fill: none;
  height: 18px;
  overflow: visible;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

.layout-customize-icon-gear svg {
  fill: currentColor;
  stroke: none;
}

.layout-customize-icon-close svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
}

.layout-customize-label {
  display: inline;
}

.layout-customize-panel {
  background: rgba(8, 14, 22, .55);
  border: 1px solid var(--halo-border);
  border-radius: 2px;
  margin-bottom: 16px;
  padding: 14px;
}

.layout-customize-panel[hidden] {
  display: none !important;
}

/* Orphaned customize rows must never render as card modules */
.device-card > .layout-module-item {
  display: none !important;
}

.layout-customize-header {
  margin-bottom: 12px;
}

.layout-customize-title {
  color: #fff;
  font-size: .92rem;
  font-weight: 650;
  margin: 0 0 4px;
}

.layout-customize-hint,
.layout-customize-note {
  color: var(--halo-subtle);
  font-size: .75rem;
  line-height: 1.45;
  margin: 0;
}

.layout-customize-note {
  margin-top: 10px;
}

.layout-module-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.layout-module-item {
  align-items: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--halo-border);
  border-radius: 2px;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  touch-action: none;
}

.layout-module-item.is-dragging {
  border-color: var(--halo-accent, #4db6ac);
  opacity: .92;
}

.layout-module-item.is-unavailable {
  opacity: .55;
}

.layout-drag-handle {
  background: transparent;
  border: 0;
  color: var(--halo-muted);
  cursor: grab;
  font-size: .85rem;
  letter-spacing: -.08em;
  line-height: 1;
  padding: 4px 2px;
  user-select: none;
}

.layout-drag-handle:focus-visible {
  outline: 2px solid var(--halo-accent, #4db6ac);
  outline-offset: 2px;
}

.layout-drag-handle:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.layout-drag-handle:active:not(:disabled) {
  cursor: grabbing;
}

.layout-module-toggle {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: 8px;
}

.layout-module-toggle input {
  accent-color: var(--halo-accent, #4db6ac);
}

.layout-module-badge {
  color: var(--halo-subtle);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.layout-customize-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.layout-customize-actions .btn {
  font-size: .72rem;
  padding: 6px 10px;
}

.device-card.layout-mode [data-module-id] {
  outline: 1px dashed rgba(77, 182, 172, .28);
  outline-offset: 4px;
}

.device-card.layout-mode [data-module-id][data-user-hidden="true"] {
  outline-color: rgba(255, 255, 255, .12);
}

.device-section-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 2px;
}

.device-identity-kicker {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.device-identifier {
  color: var(--halo-subtle);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .02em;
  margin: 0;
  max-width: min(42vw, 28rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 6px 8px;
  justify-content: flex-end;
  max-width: 25rem;
  text-align: right;
}

.last-seen {
  color: var(--halo-subtle);
  display: block;
  font-size: .72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  max-width: none;
  order: 3;
  flex-basis: 100%;
  white-space: nowrap;
}

.last-seen-age {
  display: inline-block;
  inline-size: 4.25rem;
  text-align: left;
}

.device-status .sample-state { order: 1; }
.device-status .device-layout-bar { order: 2; }

.sample-state {
  border: 1px solid var(--halo-border);
  border-radius: 2px;
  color: var(--halo-muted);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 4px 8px;
  white-space: nowrap;
}

.sample-state.live {
  background: rgba(0, 230, 118, .08);
  border-color: rgba(0, 230, 118, .28);
  color: #b9f6ca;
  box-shadow: 0 0 8px rgba(0, 230, 118, .1);
}

.sample-state.simulated {
  background: rgba(255, 203, 5, .06);
  border-color: rgba(255, 203, 5, .24);
  color: #ffe082;
}

.sample-state.stale, .sample-state.old {
  background: rgba(90, 115, 148, .06);
  color: var(--halo-subtle);
}

/* ── Alerts ── */
.alerts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  margin: -4px 0 14px;
  min-height: 28px;
  overflow: hidden;
}

.alerts.is-empty {
  visibility: hidden;
}

.alert {
  border: 1px solid var(--halo-border);
  border-radius: 2px;
  color: var(--halo-muted);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 5px 9px;
}

.alert-warning {
  background: rgba(255, 203, 5, .08);
  border-color: rgba(255, 203, 5, .28);
  color: #ffe082;
}

.alert-info {
  background: rgba(0, 180, 229, .06);
  border-color: rgba(0, 180, 229, .28);
  color: #80deea;
}

/* ── Data sections ── */
.data-section { margin-top: 2px; }
.data-section + .data-section { margin-top: 16px; }

.data-section-title {
  color: var(--halo-subtle);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   METRICS GRID
   ═══════════════════════════════════════════════════ */
.metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.radio-metrics {
  grid-template-columns: minmax(0, 1fr);
}

.metric.radio-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  padding: 6px 14px;
}

.metric.radio-metric .metric-header {
  margin-bottom: 4px;
  min-height: 1rem;
}

.metric.radio-metric .metric-label {
  font-size: .72rem;
}

.metric.radio-metric .part-number {
  font-size: .54rem;
  padding: 2px 5px;
}

.metric.radio-metric .metric-value-row {
  align-items: center;
  margin: 0;
}

.metric, .accelerometer, .gate-panel, .mailbox-panel, .water-panel {
  background: hsla(215, 25%, 10%, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--halo-border);
  border-radius: 8px;
  box-shadow: inset 0 0 15px rgba(0, 180, 229, 0.02);
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .metric:hover {
    border-color: var(--halo-cyan);
    box-shadow: 0 4px 20px var(--halo-cyan-glow-strong), inset 0 0 20px rgba(0, 180, 229, 0.08);
  }
}

.metric {
  min-height: 0;
}

.metric-value-row {
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 8px 0 8px;
  min-width: 0;
  white-space: nowrap;
}

.metric-value-row strong {
  display: inline;
  font-size: clamp(1.4rem, 8vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

/* ── Metric units ── */
.metric-unit {
  color: var(--halo-subtle);
  font-size: .78rem;
  font-weight: 500;
}

.metric-secondary {
  color: var(--halo-subtle);
  display: block;
  font-size: .72rem;
  margin-top: 2px;
}

/* ── Metric bars ── */
.metric-bar {
  background: rgba(0, 180, 229, .06);
  border-radius: 2px;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  width: 100%;
}

.metric-bar-track { position: relative; }

.metric-zone {
  background: rgba(0, 180, 229, .08);
  border-radius: inherit;
  bottom: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}

.metric-fill {
  border-radius: inherit;
  display: block;
  height: 100%;
  position: relative;
  width: 0;
  z-index: 1;
}

.lux-fill { background: linear-gradient(90deg, #f57f17, var(--halo-gold)); }
.temp-fill { background: linear-gradient(90deg, var(--halo-cyan-dim), var(--halo-cyan)); }
.humidity-fill { background: linear-gradient(90deg, var(--halo-cyan-dim), var(--halo-teal)); }

/* ── Part number badges ── */
.part-number {
  background: rgba(0, 180, 229, 0.12);
  border: 1px solid rgba(0, 180, 229, 0.32);
  border-radius: 999px;
  color: var(--halo-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  text-transform: uppercase;
  box-shadow: none;
}

.metric-header {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 16px;
  min-height: 1.25rem;
  width: 100%;
}

.metric .part-number {
  flex-shrink: 0;
}

.metric-label {
  color: var(--halo-subtle);
  flex: 1 1 auto;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric small {
  color: var(--halo-subtle);
}

.metric strong {
  display: block;
  font-size: clamp(1.4rem, 8vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 8px 0 2px;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

.metric.light strong { color: #ffe082; }

.metric.radio-metric strong {
  color: var(--halo-cyan);
  display: inline;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  line-height: 1;
  margin: 0;
}

.lux-value-row { align-items: center; }

.lux-icon {
  color: #ffe082;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.2rem;
  width: 1.2rem;
}

.lux-icon-svg { display: block; height: 100%; width: 100%; }
.lux-icon-dark { color: var(--halo-subtle); }
.lux-icon-dim { color: var(--halo-muted); }
.lux-icon-normal { color: #ffe082; }
.lux-icon-bright { color: #fff9c4; }
.lux-icon-unknown { color: var(--halo-subtle); opacity: .65; }

.lux-unit, .lux-tier { color: var(--halo-subtle); }

.lux-tier {
  display: block;
  font-size: .72rem;
  margin-top: 2px;
  text-transform: capitalize;
}

.lux-tier:not([hidden])::before {
  content: none;
}

.metric-raw-inline {
  color: var(--halo-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.metric-raw-inline:not([hidden])::before {
  color: rgba(0, 180, 229, .2);
  content: "·";
  margin: 0 3px;
}

.metric-raw-inline[hidden]::before {
  content: none;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   ACCELEROMETER & GATE
   ═══════════════════════════════════════════════════ */
.axis-bars {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.axis-bar {
  align-items: center;
  color: var(--halo-subtle);
  display: grid;
  font-size: .78rem;
  gap: 8px;
  grid-template-columns: 1.2rem 1fr auto;
  min-width: 0;
}

.axis-label {
  color: var(--halo-muted);
  font-weight: 700;
}

/* Bipolar axis bars: zero at center, signed fill left/right. */
.axis-track {
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .55) 50%, transparent calc(50% + .5px)),
    rgba(0, 180, 229, .06);
  border-radius: 999px;
  height: 8px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.axis-fill {
  background: var(--halo-green);
  border-radius: inherit;
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transition: left 160ms ease, width 160ms ease, background-color 160ms ease;
  width: 0;
}

.axis-fill.negative {
  background: var(--halo-cyan);
}

.axis-bar strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.axis-reading {
  color: var(--halo-subtle);
  font-size: .78rem;
  min-width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}

.axis-reading small {
  color: var(--halo-subtle);
  font-size: .68rem;
}

.accelerometer, .gate-panel, .mailbox-panel, .water-panel { margin-top: 0; }

/* ── Gate panel ── */
.gate-hero {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 104px;
  margin-bottom: 12px;
}

.gate-status-tile {
  align-items: center;
  background: hsla(215, 40%, 12%, 0.6);
  border: 1px solid var(--halo-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 32px 16px;
  text-align: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.gate-state-large {
  font-size: clamp(1.5rem, 8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 16px currentColor;
}

.gate-state-sub {
  color: var(--halo-subtle);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.gate-hero-open .gate-status-tile {
  background: rgba(0, 230, 118, .05);
  border-color: rgba(0, 230, 118, .2);
  box-shadow: 0 0 15px rgba(0, 230, 118, .06);
}

.gate-hero-open .gate-state-large { color: #b9f6ca; }

.gate-hero-closed .gate-status-tile {
  background: rgba(255, 203, 5, .04);
  border-color: rgba(255, 203, 5, .18);
  box-shadow: 0 0 15px rgba(255, 203, 5, .04);
}

.gate-hero-closed .gate-state-large { color: #ffe082; }

.gate-hero-moving .gate-status-tile {
  background: rgba(0, 180, 229, .05);
  border-color: rgba(0, 180, 229, .2);
  box-shadow: 0 0 15px rgba(0, 180, 229, .06);
}

.gate-hero-moving .gate-state-large { color: var(--halo-cyan); }

.empty[hidden] { display: none !important; }

.empty {
  align-items: center;
  background: hsla(215, 30%, 16%, 0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--halo-border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 180, 229, 0.05);
  display: flex;
  flex-direction: column;
  padding: 64px 32px;
  text-align: center;
  margin: 40px auto;
  max-width: min(760px, calc(100% - 32px));
}

.empty h2 {
  color: var(--halo-text);
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 800;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.empty-lead {
  color: var(--halo-subtle);
  font-size: clamp(1rem, 3vw, 1.15rem);
  line-height: 1.6;
  margin: 0;
}

.gate-compass-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 104px;
}

.gate-compass { height: 80px; width: 80px; }

.compass-ring {
  fill: rgba(0, 180, 229, .03);
  stroke: var(--halo-border-strong);
  stroke-width: 1.5;
}

.compass-n {
  fill: var(--halo-cyan-dim);
  font-size: 9px;
  font-weight: 700;
}

.compass-needle {
  stroke: var(--halo-cyan);
  stroke-linecap: round;
  stroke-width: 4;
  transform-origin: 40px 40px;
  transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 6px var(--halo-cyan));
}

.compass-hub { fill: #fff; }
.compass-idle .compass-needle { opacity: .35; filter: none; }

.gate-compass-label {
  color: var(--halo-subtle);
  font-size: .76rem;
  white-space: nowrap;
}

.gate-compass-label b {
  color: #fff;
  font-size: .94rem;
}

/* ── Gate meta — structured items ── */
.gate-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}

.gate-meta-item {
  background: rgba(0, 180, 229, .02);
  border: 1px solid var(--halo-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
}

.gate-meta-label {
  color: var(--halo-subtle);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.gate-meta-item b {
  color: var(--halo-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gate-meta-value {
  align-items: baseline;
  display: inline-flex;
  gap: 4px;
  justify-content: flex-start;
  min-width: 0;
}

.gate-meta-unit {
  color: var(--halo-subtle);
  font-size: .76rem;
  white-space: nowrap;
}

.gate-meta-item small {
  color: var(--halo-subtle);
  font-size: .68rem;
}

.gate-calibration {
  align-items: center;
  background: rgba(0, 180, 229, .02);
  border: 1px solid var(--halo-border);
  border-radius: 4px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 8px;
  padding: 10px;
}

.gate-calibration-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gate-calibration-summary {
  color: var(--halo-text);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gate-calibration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.gate-calibration-actions .btn {
  min-height: 34px;
  padding: 0 10px;
}

.gate-sensor-part-inline {
  color: var(--halo-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 600;
}

.gate-state.gate-open { color: #b9f6ca; }
.gate-state.gate-closed { color: #ffe082; }

.mailbox-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--halo-cyan);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mailbox-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 1.5rem;
  margin: 0 0 1.15rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mailbox-hero-copy {
  flex: 1 1 15rem;
  min-width: 0;
}
.mailbox-status-headline {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.mailbox-status-subhead {
  margin: 0.4rem 0 0;
  color: var(--muted, var(--halo-muted));
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 36rem;
}
.mailbox-status-tile {
  flex: 0 0 auto;
  width: 7.75rem;
  height: 7.75rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0.7rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.07), transparent 62%),
    rgba(0, 0, 0, 0.3);
}
.mailbox-state-large {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.05;
}
.mailbox-state-sub {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted, var(--halo-muted));
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mailbox-hero-mail .mailbox-status-tile {
  border-color: rgba(105, 240, 174, 0.75);
  box-shadow: 0 0 22px rgba(105, 240, 174, 0.18);
}
.mailbox-hero-mail .mailbox-state-large { color: #b9f6ca; }
.mailbox-hero-open .mailbox-status-tile {
  border-color: rgba(128, 216, 255, 0.75);
  box-shadow: 0 0 22px rgba(128, 216, 255, 0.16);
}
.mailbox-hero-open .mailbox-state-large { color: var(--halo-cyan); }
.mailbox-hero-collecting .mailbox-status-tile {
  border-color: rgba(255, 224, 130, 0.8);
  box-shadow: 0 0 22px rgba(255, 224, 130, 0.16);
}
.mailbox-hero-collecting .mailbox-state-large { color: #ffe082; }
.mailbox-hero-unknown .mailbox-status-tile {
  border-color: rgba(176, 190, 197, 0.5);
}
.mailbox-hero-unknown .mailbox-state-large { color: #cfd8dc; }
.mailbox-hero-empty .mailbox-status-tile {
  border-color: rgba(0, 230, 210, 0.72);
  box-shadow: 0 0 22px rgba(0, 230, 210, 0.18);
}
.mailbox-hero-empty .mailbox-state-large { color: #fff; }
.mailbox-hero-offline .mailbox-status-tile {
  border-color: rgba(239, 154, 154, 0.7);
  box-shadow: 0 0 18px rgba(239, 154, 154, 0.14);
}
.mailbox-hero-offline .mailbox-state-large { color: #ef9a9a; }
.mailbox-hero-fault .mailbox-status-tile {
  border-color: rgba(255, 171, 145, 0.72);
  box-shadow: 0 0 18px rgba(255, 171, 145, 0.14);
}
.mailbox-hero-fault .mailbox-state-large { color: #ffab91; }

.mailbox-status-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.mailbox-status-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.16));
  min-width: 0;
  min-height: 5.6rem;
}
.mailbox-status-card.is-emphasis {
  border-color: rgba(0, 230, 210, 0.4);
  background: linear-gradient(180deg, rgba(0, 230, 210, 0.08), rgba(0, 0, 0, 0.18));
}
.mailbox-card-label {
  display: block;
  color: var(--halo-cyan);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mailbox-card-value {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  word-break: break-word;
}
.mailbox-card-foot {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted, var(--halo-muted));
  font-size: 0.76rem;
  line-height: 1.35;
}
.mailbox-card-foot .mailbox-sensor-part:empty + .mailbox-ambient-detail {
  display: none;
}
.mailbox-ambient-state.is-ok { color: #b9f6ca; }
.mailbox-ambient-state.is-bad { color: #ef9a9a; }
.mailbox-door-state.is-open { color: #ffe082; }
.mailbox-door-state.is-closed { color: #fff; }

.mailbox-activity {
  margin-top: 1.25rem;
}
.mailbox-activity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}
.mailbox-activity-kicker {
  display: block;
  color: var(--halo-cyan);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mailbox-activity-title {
  margin: 0.15rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mailbox-activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mailbox-activity-actions .btn {
  min-height: 2.25rem;
  padding-inline: 0.9rem;
}
.mailbox-activity-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mailbox-activity-table-wrap {
  overflow-x: auto;
  max-height: min(18rem, 42vh);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(hsl(215, 30%, 12%) 0 2.6rem, transparent 2.6rem),
    rgba(0, 0, 0, 0.22);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.mailbox-activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.mailbox-activity-table th,
.mailbox-activity-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.mailbox-activity-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(215, 30%, 12%);
  color: var(--muted, var(--halo-muted));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.mailbox-activity-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.mailbox-activity-table tbody tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mailbox-activity-empty td {
  color: var(--muted, var(--halo-muted));
  font-style: italic;
  padding: 1rem 0.85rem;
}
.mailbox-event {
  display: inline-block;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--halo-subtle);
}
.mailbox-event-mail_collected,
.mailbox-event-mail_arrived {
  color: var(--halo-cyan);
  background: rgba(0, 180, 229, 0.1);
}
.mailbox-event-door_closed,
.mailbox-event-sensor_restored {
  color: #b9f6ca;
  background: rgba(105, 240, 174, 0.1);
}
.mailbox-event-door_opened,
.mailbox-event-collection_pending {
  color: #ffe082;
  background: rgba(255, 224, 130, 0.1);
}
.mailbox-event-sensor_fault {
  color: #ffab91;
  background: rgba(255, 171, 145, 0.12);
}
.mailbox-door-chip.is-open { color: #ffe082; }
.mailbox-door-chip.is-closed { color: #b9f6ca; }
.mailbox-activity-rssi { color: var(--halo-amber); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .mailbox-status-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .mailbox-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .mailbox-hero-copy {
    flex: 0 1 auto;
    width: 100%;
  }
  .mailbox-status-subhead {
    margin-inline: auto;
  }
  .mailbox-status-tile {
    width: 6.75rem;
    height: 6.75rem;
  }
  .mailbox-status-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mailbox-activity-actions {
    width: 100%;
  }
  .mailbox-activity-actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 480px) {
  .mailbox-status-cards {
    grid-template-columns: 1fr;
  }
}

.water-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--halo-cyan);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.water-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 1.5rem;
  margin: 0 0 1.15rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.water-hero-copy {
  flex: 1 1 15rem;
  min-width: 0;
}
.water-status-headline {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.water-status-subhead {
  margin: 0.4rem 0 0;
  color: var(--muted, var(--halo-muted));
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 36rem;
}
.water-status-tile {
  flex: 0 0 auto;
  width: 7.75rem;
  height: 7.75rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0.7rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.07), transparent 62%),
    rgba(0, 0, 0, 0.3);
}
.water-state-large {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.05;
}
.water-state-sub {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted, var(--halo-muted));
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.water-hero-wet .water-status-tile {
  border-color: rgba(239, 154, 154, 0.8);
  box-shadow: 0 0 22px rgba(239, 154, 154, 0.2);
}
.water-hero-wet .water-state-large { color: #ef9a9a; }
.water-hero-dry .water-status-tile {
  border-color: rgba(0, 230, 210, 0.72);
  box-shadow: 0 0 22px rgba(0, 230, 210, 0.18);
}
.water-hero-dry .water-state-large { color: #fff; }
.water-hero-unknown .water-status-tile {
  border-color: rgba(176, 190, 197, 0.5);
}
.water-hero-unknown .water-state-large { color: #cfd8dc; }
.water-hero-offline .water-status-tile {
  border-color: rgba(239, 154, 154, 0.7);
  box-shadow: 0 0 18px rgba(239, 154, 154, 0.14);
}
.water-hero-offline .water-state-large { color: #ef9a9a; }
.water-hero-fault .water-status-tile {
  border-color: rgba(255, 171, 145, 0.72);
  box-shadow: 0 0 18px rgba(255, 171, 145, 0.14);
}
.water-hero-fault .water-state-large { color: #ffab91; }

.water-status-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.water-status-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.16));
  min-width: 0;
  min-height: 5.6rem;
}
.water-status-card.is-emphasis {
  border-color: rgba(0, 230, 210, 0.4);
  background: linear-gradient(180deg, rgba(0, 230, 210, 0.08), rgba(0, 0, 0, 0.18));
}
.water-card-label {
  display: block;
  color: var(--halo-cyan);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.water-card-value {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  word-break: break-word;
}
.water-card-foot {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted, var(--halo-muted));
  font-size: 0.76rem;
  line-height: 1.35;
}
.water-card-foot .water-sensor-part:empty + .water-sensor-detail {
  display: none;
}
.water-sensor-state.is-ok { color: var(--halo-cyan); }
.water-sensor-state.is-bad { color: #ef9a9a; }
.water-water-state.is-wet { color: #ef9a9a; }
.water-water-state.is-dry { color: #b9f6ca; }

.water-activity {
  margin-top: 1.25rem;
}
.water-activity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}
.water-activity-kicker {
  display: block;
  color: var(--halo-cyan);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.water-activity-title {
  margin: 0.15rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.water-activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.water-activity-actions .btn {
  min-height: 2.25rem;
  padding-inline: 0.9rem;
}
.water-activity-table-wrap {
  overflow-x: auto;
  max-height: min(18rem, 42vh);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(hsl(215, 30%, 12%) 0 2.6rem, transparent 2.6rem),
    rgba(0, 0, 0, 0.22);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.water-activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.water-activity-table th,
.water-activity-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.water-activity-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(215, 30%, 12%);
  color: var(--muted, var(--halo-muted));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.water-activity-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.water-activity-table tbody tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.water-activity-empty td {
  color: var(--muted, var(--halo-muted));
  font-style: italic;
  padding: 1rem 0.85rem;
}
.water-event {
  display: inline-block;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--halo-subtle);
}
.water-event-leak_detected {
  color: #ef9a9a;
  background: rgba(239, 154, 154, 0.12);
}
.water-event-leak_cleared,
.water-event-sensor_restored {
  color: #b9f6ca;
  background: rgba(105, 240, 174, 0.1);
}
.water-event-heartbeat {
  color: var(--halo-cyan);
  background: rgba(0, 180, 229, 0.1);
}
.water-event-sensor_fault {
  color: #ffab91;
  background: rgba(255, 171, 145, 0.12);
}
.water-state-chip.is-wet { color: #ef9a9a; }
.water-state-chip.is-dry { color: #b9f6ca; }
.water-activity-rssi { color: var(--halo-amber); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .water-status-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .water-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .water-hero-copy {
    flex: 0 1 auto;
    width: 100%;
  }
  .water-status-subhead {
    margin-inline: auto;
  }
  .water-status-tile {
    width: 6.75rem;
    height: 6.75rem;
  }
  .water-activity-actions {
    width: 100%;
  }
  .water-activity-actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 480px) {
  .water-status-cards {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   RAW TELEMETRY — Toggle button + Copy JSON
   ═══════════════════════════════════════════════════ */
.raw-telemetry-section {
  margin-top: 16px;
}

.raw-telemetry-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.raw-telemetry-toggle {
  align-items: center;
  background: rgba(0, 180, 229, .04);
  border: 1px solid var(--halo-border);
  border-radius: 4px;
  color: var(--halo-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.raw-telemetry-toggle:hover,
.raw-telemetry-toggle:hover:not(:disabled) {
  background: rgba(0, 180, 229, .08);
  border-color: var(--halo-border-strong);
  color: var(--halo-text);
}

.raw-telemetry-toggle[aria-expanded="true"] {
  background: rgba(0, 180, 229, .06);
  border-color: var(--halo-border-strong);
  color: var(--halo-text);
}

.raw-copy-btn {
  align-items: center;
  background: rgba(0, 180, 229, .04);
  border: 1px solid var(--halo-border);
  border-radius: 4px;
  color: var(--halo-cyan-dim);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  gap: 4px;
  min-height: 36px;
  padding: 6px 12px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.raw-copy-btn:hover,
.raw-copy-btn:hover:not(:disabled) {
  background: rgba(0, 180, 229, .08);
  border-color: var(--halo-border-strong);
  color: var(--halo-text);
}

.raw-telemetry-tree {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  line-height: 1.5;
  min-width: 0;
  width: 100%;
}

.raw-section {
  border: 1px solid rgba(0, 180, 229, .1);
  border-radius: 4px;
  margin-top: 8px;
}

.raw-section--root {
  border-color: var(--halo-border);
  margin-top: 0;
}

.raw-section-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  padding: 8px 10px 8px 14px;
  user-select: none;
}

.raw-section-summary::-webkit-details-marker { display: none; }

.raw-section-summary::before {
  color: var(--halo-cyan-dim);
  content: "▸";
  flex-shrink: 0;
  font-size: .7rem;
  line-height: 1;
  margin-right: 2px;
  transition: transform .15s ease;
  width: .85em;
}

.raw-section[open] > .raw-section-summary::before {
  transform: rotate(90deg);
}

.raw-section--root > .raw-section-summary {
  background: rgba(0, 180, 229, .05);
  border-bottom: 1px solid rgba(0, 180, 229, .08);
}

.raw-section-title {
  color: #b2ebf2;
  font-weight: 600;
}

.raw-section-meta {
  color: var(--halo-muted);
  font-size: .62rem;
}

.raw-section-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 10px 22px;
}

.raw-prop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.raw-prop-row {
  align-items: baseline;
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 10rem minmax(6ch, 1fr);
}

.raw-prop-key {
  color: #7eb8c9;
  overflow-wrap: anywhere;
}

.raw-prop-value {
  color: var(--halo-text);
  font-variant-numeric: tabular-nums;
  min-width: 6ch;
  overflow-wrap: anywhere;
}

.raw-prop-value--null {
  color: var(--halo-muted);
}

.raw-prop-value--string {
  color: #b9f6ca;
}

.raw-prop-value--number {
  color: #ffe082;
}

.raw-prop-value--boolean {
  color: #ffab91;
}

.raw-sensors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raw-sensors-list .raw-section {
  margin-top: 0;
}

.firmware-notice {
  background: rgba(180, 83, 9, .12);
  border: 1px solid rgba(180, 83, 9, .35);
  border-radius: var(--halo-radius-control);
  margin: 0 0 16px;
  padding: 12px 14px;
}

.firmware-notice--required {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .4);
}

.firmware-notice-title {
  color: #fde68a;
  font-size: .82rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.firmware-notice--required .firmware-notice-title {
  color: #fecaca;
}

.firmware-notice-lead {
  color: var(--halo-muted);
  font-size: .78rem;
  line-height: 1.45;
  margin: 0;
}

.board-option--firmware-attention .board-option-state {
  color: #fbbf24;
  font-weight: 700;
}

.board-option--firmware-attention .board-option-dot {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .35);
}

.board-chip--firmware-attention .board-chip-state {
  color: #fbbf24;
  font-weight: 700;
}

.board-chip--firmware-attention .board-chip-dot {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .35);
}

.eyebrow {
  color: var(--halo-cyan);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════ */
.toast {
  animation: toast-in .3s ease-out;
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  bottom: calc(68px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  color: var(--halo-text);
  font-size: .84rem;
  font-weight: 500;
  left: 50%;
  line-height: 1.4;
  max-width: min(400px, calc(100% - 32px));
  padding: 11px 16px;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  z-index: 20;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════
   FOOTER — Version display
   ═══════════════════════════════════════════════════ */
.site-footer {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  flex: 1 0 auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  width: 100%;
}

.site-footer-inner {
  margin: 0 auto;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.footer-copyright {
  color: var(--halo-subtle);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.footer-cell {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.footer-label {
  color: var(--halo-subtle);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer-value {
  color: var(--halo-muted);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   PWA BANNER
   ═══════════════════════════════════════════════════ */
.pwa-banner {
  align-items: center;
  background: rgba(2, 10, 20, .92);
  border-bottom: 1px solid var(--halo-border);
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  width: 100%;
}

.pwa-banner p {
  color: var(--halo-muted);
  flex: 1;
  font-size: .82rem;
  line-height: 1.4;
  margin: 0;
}

.pwa-btn {
  background: linear-gradient(180deg, #00a6e8, #0080c0);
  border: 0;
  border-radius: var(--halo-radius-control);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 14px;
  white-space: nowrap;
}

.pwa-dismiss {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--halo-subtle);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.3rem;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  padding: 4px 8px;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.88); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .site-header-inner {
    max-width: 1560px;
    padding: 12px clamp(24px, 3vw, 44px);
  }

  .site-logo {
    height: 30px;
    width: 116px;
  }

  .brand-title {
    font-size: 1.12rem;
  }

  main {
    max-width: 1560px;
    padding-inline: clamp(24px, 3vw, 44px);
  }

  .dashboard-shell {
    align-items: start;
    display: grid;
    gap: clamp(20px, 2vw, 30px);
    grid-template-columns: minmax(310px, 340px) minmax(0, 1fr);
  }

  .dashboard-content {
    container-name: dashboard-content;
    container-type: inline-size;
    justify-self: stretch;
    max-width: none;
    padding-top: 20px;
  }

  .board-switcher {
    align-self: start;
    display: flex;
    flex-direction: column;
    margin: 20px 0 24px;
    max-height: calc(100dvh - 98px);
    overflow: hidden;
    padding: 15px;
    position: sticky;
    top: 74px;
    z-index: 20;
  }

  .board-switcher-head {
    display: grid;
    gap: 3px 10px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    margin-bottom: 13px;
  }

  .board-switcher-icon {
    align-items: center;
    align-self: center;
    background: rgba(0, 180, 229, .07);
    border: 1px solid rgba(0, 180, 229, .18);
    border-radius: 11px;
    color: var(--halo-cyan);
    display: inline-flex;
    grid-row: 1 / span 2;
    height: 38px;
    justify-content: center;
    width: 38px;
  }

  .board-switcher-icon svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 19px;
  }

  .board-switcher-title-group {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .board-switcher-label {
    color: #f2fbff;
    font-size: .84rem;
    letter-spacing: .01em;
    text-transform: none;
  }

  .board-switcher-caption {
    color: var(--halo-muted);
    font-size: .64rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .board-summary {
    background: rgba(0, 230, 118, .07);
    border: 1px solid rgba(0, 230, 118, .17);
    border-radius: 999px;
    color: #9ee9c2;
    font-size: .62rem;
    padding: 4px 7px;
  }

  .board-options {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100dvh - 226px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
    scrollbar-gutter: auto;
  }

  .board-chip {
    align-items: flex-start;
    border-radius: 12px;
    column-gap: 11px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 96px;
    overflow: hidden;
    padding: 12px;
    row-gap: 7px;
  }

  .board-chip-icon {
    align-self: center;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .board-chip-main {
    grid-column: 2;
    grid-row: 1;
  }

  .board-chip-details {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .board-chip-name {
    font-size: .84rem;
  }

  .board-chip-radio {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .board-chip-state {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    font-size: .6rem;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 0;
    padding: 3px 6px;
  }

  .board-chip-unread {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .board-chip.is-selected .board-chip-state {
    background: rgba(0, 180, 229, .08);
    border-color: rgba(0, 180, 229, .16);
    color: #b9f7ff;
  }

  .board-switcher-hint {
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: var(--halo-subtle);
    display: flex;
    font-size: .62rem;
    gap: 6px;
    line-height: 1.4;
    margin-top: 12px;
    opacity: .75;
    padding: 10px 4px 0;
    transition: opacity .15s ease;
  }

  .board-switcher-hint:hover {
    opacity: 1;
  }

  .board-switcher-hint-icon {
    margin-top: 1px;
  }

  .board-switcher[hidden] + .dashboard-content {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 960px;
    width: 100%;
  }

  .site-footer-inner {
    max-width: 1560px;
    padding-inline: clamp(24px, 3vw, 44px);
  }
}

@media (max-width: 960px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 719px) {
  .site-header-inner {
    gap: 8px;
    padding: 10px 14px;
  }

  .header-actions {
    gap: 8px;
  }

  .status-pill {
    font-size: .7rem;
    padding: 0 10px;
  }

  .brand-sub {
    display: none;
  }

  .brand-title {
    font-size: 1rem;
  }

  .hero {
    padding: 12px 14px 6px;
  }

  .hero-status {
    font-size: 1rem;
    margin-bottom: 12px;
  }

  .board-switcher {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
  }

  .auth-landing {
    padding-top: 12px;
  }

  .board-options {
    grid-template-columns: 1fr;
  }

  .device-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    align-items: center;
    margin-bottom: 10px;
  }

  .device-heading > div,
  .device-status {
    display: contents;
  }

  .device-identity-kicker {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .device-panel-eyebrow {
    margin: 0;
  }

  .device-name {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin: 0;
  }

  .sample-state {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .last-seen {
    grid-column: 1 / span 2;
    grid-row: 3;
    max-width: none;
    text-align: left;
  }

  .device-layout-bar {
    flex-wrap: nowrap;
    gap: 5px;
    grid-column: 1 / span 2;
    grid-row: 4;
    justify-self: end;
    margin-top: 2px;
  }

  .view-switcher {
    flex: 0 1 auto;
    margin-right: 0;
    min-width: 0;
  }

  .view-picker {
    flex: 0 1 auto;
    min-width: 0;
  }

  .view-picker-trigger {
    max-width: 8.5rem;
    min-width: 6.25rem;
  }

  .view-picker-menu {
    right: 0;
  }

  .layout-customize-btn {
    border-radius: 7px;
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    width: 28px;
  }

  .layout-customize-btn .layout-customize-label {
    display: none;
  }

  .layout-customize-btn .layout-customize-icon-gear {
    display: inline-flex;
  }

  .layout-customize-btn[aria-expanded="true"] .layout-customize-icon-gear {
    display: none;
  }

  .layout-customize-btn[aria-expanded="true"] .layout-customize-icon-close {
    display: inline-flex;
    color: var(--halo-cyan);
  }

  .gate-hero { grid-template-columns: 1fr; }

  .gate-calibration {
    grid-template-columns: 1fr;
  }

  .gate-calibration-actions {
    justify-content: stretch;
  }

  .gate-calibration-actions .btn {
    flex: 1 1 7rem;
    min-height: 44px;
  }

  .footer-grid {
    gap: 4px 16px;
  }

  .card-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .card-footer .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  .auth-modal-overlay {
    align-items: flex-end;
    padding:
      max(12px, env(safe-area-inset-top, 0))
      max(12px, env(safe-area-inset-right, 0))
      max(12px, env(safe-area-inset-bottom, 0))
      max(12px, env(safe-area-inset-left, 0));
  }

  .auth-modal {
    border-radius: 12px 12px 8px 8px;
    max-height: min(92dvh, 920px);
    overflow: auto;
    padding: 24px 18px;
  }

  .auth-submit {
    min-height: 44px;
    width: 100%;
  }

}

@media (max-width: 520px) {
  .metrics {
    grid-template-columns: 1fr;
  }

  .raw-prop-row {
    grid-template-columns: 1fr;
  }

  .raw-section-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-text {
    display: none;
  }

  .brand {
    flex: 0 0 auto;
  }

  .status-pill {
    font-size: .68rem;
    padding: 0 10px;
  }

  .radio-chips {
    grid-template-columns: 1fr;
  }

  .chip {
    text-align: left;
  }
}

@media (max-width: 480px) {
  main, .site-header-inner, .hero { padding-inline: 12px; }

  .site-header-inner {
    padding: 8px 12px;
    gap: 8px;
  }

  .device-card { padding: 14px; }

  .gate-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .empty {
    padding: 28px 16px;
  }

  .empty h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 359px) {
  .gate-meta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  .device-card,
  .toast,
  .status-connecting::before {
    animation: none;
    transition: none;
  }

  .notification-badge.is-updated { animation: none; }

  .auth-landing-jump,
  .auth-field input,
  .auth-switch-btn,
  .auth-legal-link {
    transition: none;
  }
}

/* Shared sensor data tiles — aligned with the environmental conditions cards. */
.metric,
.accelerometer,
.gate-panel,
.gate-meta-item,
.mailbox-status-card,
.water-status-card {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 13%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(9, 27, 42, .92), rgba(5, 14, 24, .86));
  border-color: color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 28%, var(--halo-border));
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  overflow: hidden;
  position: relative;
}

.metric::before,
.accelerometer::before,
.gate-panel::before,
.gate-meta-item::before,
.mailbox-status-card::before,
.water-status-card::before {
  background: var(--data-tile-accent, var(--halo-cyan));
  content: "";
  height: 2px;
  inset: 0 0 auto;
  opacity: .72;
  position: absolute;
}

.metric { --data-tile-accent: var(--halo-cyan); display: flex; flex-direction: column; min-height: 158px; padding: 16px; }
.metric.light { --data-tile-accent: #ffd166; }
.metric.metric-humidity { --data-tile-accent: #3ddac5; }
.metric.diagnostic-secondary-climate { --data-tile-accent: #a8b7ca; }
.metric.radio-metric { --data-tile-accent: var(--halo-cyan); min-height: 124px; padding: 15px 17px 13px; }
.metric.radio-link-card { --data-tile-accent: #43ddc2; }
.accelerometer { --data-tile-accent: var(--halo-green); }
.accelerometer.click-accelerometer { --data-tile-accent: #8fb7e8; }
.gate-panel { --data-tile-accent: #ffd166; }
.mailbox-card-ambient,
.water-card-sensor { --data-tile-accent: #3ddac5; }
.mailbox-card-door { --data-tile-accent: #8fb7e8; }
.mailbox-card-light { --data-tile-accent: #ffd166; }
.water-card-state { --data-tile-accent: var(--halo-green); }

.metric-heading-copy,
.status-card-heading {
  align-items: center;
  display: flex;
  gap: 9px;
  min-width: 0;
}

.metric-heading-copy { flex: 1 1 auto; }
.metric-icon,
.status-card-icon {
  align-items: center;
  background: color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 38%, transparent);
  border-radius: 999px;
  color: var(--data-tile-accent, var(--halo-cyan));
  display: inline-flex;
  flex: 0 0 auto;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.metric-icon svg,
.status-card-icon svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 15px;
}

.metric-heading-copy .metric-label,
.status-card-heading .mailbox-card-label,
.status-card-heading .water-card-label {
  color: var(--halo-subtle);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.2;
  text-transform: uppercase;
}
.metric-heading-copy .metric-label {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.metric .metric-header,
.gate-panel > .metric-header { margin-bottom: 13px; }
.metric.radio-metric .metric-header { margin-bottom: 9px; }
.metric .part-number,
.accelerometer .part-number,
.gate-panel .part-number {
  background: color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 9%, transparent);
  border-color: color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 38%, transparent);
  border-radius: 999px;
  box-shadow: none;
  color: var(--data-tile-accent, var(--halo-cyan));
}
.metric .metric-value-row { margin: auto 0 10px; }
.metric .metric-bar { margin-top: auto; }
.metric strong,
.metric-value-row strong { text-shadow: none; }

.metric.radio-metric::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--data-tile-accent) 16%, transparent), transparent 68%);
  content: "";
  height: 110px;
  pointer-events: none;
  position: absolute;
  right: -36px;
  top: -42px;
  width: 110px;
}
.metric.radio-metric > * { position: relative; z-index: 1; }
.metric.radio-metric .metric-icon {
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 7px 18px color-mix(in srgb, var(--data-tile-accent) 10%, transparent);
  height: 36px;
  width: 36px;
}
.metric.radio-metric .metric-icon svg { height: 19px; stroke-width: 1.7; width: 19px; }
.radio-link-card-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.radio-link-card .module-title-group { gap: 10px; }
.radio-link-card .module-eyebrow { color: color-mix(in srgb, var(--data-tile-accent) 60%, var(--halo-subtle)); }
.radio-link-card .data-section-title { color: var(--halo-text); font-size: .95rem; letter-spacing: -.01em; margin: 1px 0 0; text-transform: none; }
.radio-link-status-group {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.radio-link-status {
  align-items: center;
  color: var(--halo-green);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  gap: 7px;
}
.radio-link-status-dot {
  background: var(--halo-green);
  border-radius: 999px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--halo-green) 75%, transparent);
  height: 7px;
  width: 7px;
}
.radio-section.is-offline .radio-link-status { color: #ffb347; }
.radio-section.is-offline .radio-link-status-dot { background: #ffb347; box-shadow: 0 0 10px rgba(255, 179, 71, .55); }
.radio-link-quality {
  color: var(--halo-subtle);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
}
.radio-link-quality[data-quality="excellent"] { color: #65f3d7; }
.radio-link-quality[data-quality="good"] { color: #8bd98a; }
.radio-link-quality[data-quality="fair"] { color: #ffd166; }
.radio-link-quality[data-quality="poor"] { color: #ff8d7b; }
.radio-link-readings {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}
.radio-link-reading {
  background: rgba(2, 9, 17, .22);
  border: 1px solid color-mix(in srgb, var(--data-tile-accent) 16%, var(--halo-border));
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 13px 10px;
}
.radio-link-reading-label {
  color: var(--halo-subtle);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.metric.radio-metric .radio-link-reading .metric-value-row { margin: 7px 0 0; }
.metric.radio-metric .radio-link-reading .metric-value-row strong { font-size: clamp(1.35rem, 4vw, 1.7rem); letter-spacing: -.035em; }
.metric.radio-metric .metric-unit { color: color-mix(in srgb, var(--data-tile-accent) 24%, var(--halo-subtle)); font-weight: 700; }
.radio-metric-caption {
  color: color-mix(in srgb, var(--data-tile-accent) 18%, var(--halo-muted));
  font-size: .61rem;
  letter-spacing: .025em;
  margin-top: 5px;
}
.radio-link-card > .module-description {
  border-top: 1px solid color-mix(in srgb, var(--data-tile-accent) 13%, transparent);
  margin: 13px 0 0;
  padding-top: 10px;
}

@media (hover: hover) {
  .metric.radio-metric { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
  .metric.radio-metric:hover {
    border-color: color-mix(in srgb, var(--data-tile-accent) 48%, var(--halo-border));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 0, 0, .16);
    transform: translateY(-2px);
  }
}

.mailbox-status-card,
.water-status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 8.25rem;
  padding: 1rem;
}
.mailbox-card-value,
.water-card-value { font-size: 1.32rem; margin-top: 0; }
.mailbox-card-foot,
.water-card-foot {
  border-top: 1px solid rgba(255, 255, 255, .055);
  margin-top: auto;
  padding-top: 9px;
}

.gate-meta-item { min-height: 5.25rem; padding: 12px; }
.gate-meta-label { color: var(--data-tile-accent, var(--halo-subtle)); }

@media (hover: hover) {
  .metric:hover,
  .mailbox-status-card:hover,
  .water-status-card:hover {
    border-color: color-mix(in srgb, var(--data-tile-accent, var(--halo-cyan)) 58%, var(--halo-border));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .035);
  }
}

/* Multi-Function Environmental Sensor */
.environment-panel,
.environment-trends-section,
.environment-history-section {
  display: grid;
  gap: 18px;
}

.environment-eyebrow {
  color: var(--halo-cyan);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.environment-section-title,
.environment-settings-title,
.environment-metric-heading {
  align-items: center;
  display: flex;
}

.environment-hero,
.environment-section-header,
.environment-settings-header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.environment-hero h3,
.environment-settings-header h4 { color: #f2fbff; }
.environment-hero > div { display: grid; gap: 5px; }
.environment-headline { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.environment-hero p,
.environment-section-header p,
.environment-settings-header p { color: var(--halo-muted); font-size: .78rem; }

.environment-health-badge {
  background: var(--halo-green-dim);
  border: 1px solid rgba(0, 230, 146, .35);
  border-radius: 999px;
  color: var(--halo-green);
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  padding: 7px 11px;
}

.environment-health-badge.has-fault {
  background: rgba(255, 80, 105, .12);
  border-color: rgba(255, 80, 105, .4);
  color: #ff8091;
}

.environment-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.environment-metric {
  --environment-metric-accent: var(--halo-cyan);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--environment-metric-accent) 13%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(9, 27, 42, .92), rgba(5, 14, 24, .86));
  border: 1px solid color-mix(in srgb, var(--environment-metric-accent) 28%, var(--halo-border));
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  display: grid;
  gap: 13px;
  min-width: 0;
  min-height: 184px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.environment-metric::before {
  background: var(--environment-metric-accent);
  content: "";
  height: 2px;
  inset: 0 0 auto;
  opacity: .75;
  position: absolute;
}

.environment-metric-humidity { --environment-metric-accent: #3ddac5; }
.environment-metric-light { --environment-metric-accent: #ffd166; }
.environment-metric-reference { --environment-metric-accent: #a8b7ca; }

.environment-metric-heading {
  color: var(--halo-subtle);
  font-size: .68rem;
  font-weight: 800;
  gap: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.environment-metric-icon,
.environment-settings-icon,
.environment-section-icon {
  align-items: center;
  background: color-mix(in srgb, var(--environment-metric-accent, var(--halo-cyan)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--environment-metric-accent, var(--halo-cyan)) 38%, transparent);
  border-radius: 999px;
  color: var(--environment-metric-accent, var(--halo-cyan));
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.environment-metric-icon svg,
.environment-settings-icon svg,
.environment-section-icon svg,
.environment-action-button svg,
.environment-chart-modal-close svg,
.environment-chart-zoom-controls svg,
.environment-chart-pan-controls svg,
.environment-threshold-modal-close svg,
.environment-threshold-explainer-icon svg,
.environment-threshold-grid legend svg,
.environment-active-alert-icon svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 16px;
}

.environment-metric strong {
  align-items: baseline;
  color: #fff;
  display: flex;
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-variant-numeric: tabular-nums;
  gap: 6px;
  letter-spacing: -.035em;
  line-height: 1;
}

.environment-metric strong em {
  color: var(--halo-subtle);
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.environment-metric-meta {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .055);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}

.environment-metric-meta > span { color: var(--environment-metric-accent); font-size: .69rem; font-weight: 750; }
.environment-metric small { color: var(--halo-muted); font-size: .66rem; overflow-wrap: anywhere; text-align: right; }
.environment-reference-rh { color: var(--halo-subtle); font-size: .86rem; font-variant-numeric: tabular-nums; }
.environment-reference-rh > span { color: #f2fbff; font-size: 1.08rem; font-weight: 750; }
.environment-reference-rh small { margin-left: 6px; }

.environment-threshold-form {
  background:
    linear-gradient(135deg, rgba(0, 180, 229, .045), transparent 38%),
    rgba(5, 14, 24, .64);
  border: 1px solid var(--halo-border);
  border-radius: 14px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.environment-settings-title,
.environment-section-title { gap: 10px; }
.environment-settings-icon,
.environment-section-icon { --environment-metric-accent: var(--halo-cyan); }
.environment-section-title .data-section-title { margin: 0; }

.environment-action-button {
  min-height: 40px;
  text-decoration: none;
  white-space: nowrap;
}

.environment-action-button svg { flex: 0 0 auto; }

.environment-threshold-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.environment-threshold-grid label {
  color: var(--halo-subtle);
  display: grid;
  font-size: .72rem;
  gap: 5px;
}

.environment-threshold-grid label span {
  align-items: center;
  display: flex;
  gap: 6px;
}

.environment-threshold-grid input,
.environment-range-select {
  background: rgba(2, 12, 21, .88);
  border: 1px solid var(--halo-border-strong);
  border-radius: 8px;
  color: var(--halo-text);
  font: inherit;
  min-height: 40px;
  padding: 7px 9px;
  width: 100%;
}

.environment-range-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(2, 12, 21, .88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%239fb0bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 14px;
  cursor: pointer;
  padding: 7px 38px 7px 12px;
}

@media (forced-colors: active) {
  .environment-range-select { appearance: auto; background-image: none; padding-right: 12px; }
}

.environment-threshold-grid input:focus-visible,
.environment-range-select:focus-visible { border-color: var(--halo-cyan); box-shadow: 0 0 0 3px rgba(0, 180, 229, .1); outline: none; }

.environment-threshold-status { color: var(--halo-cyan); font-size: .75rem; min-height: 1.2em; }
.environment-range-label { color: var(--halo-subtle); display: grid; font-size: .7rem; gap: 4px; min-width: 120px; }

.environment-charts { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.environment-chart-card {
  background: linear-gradient(155deg, rgba(8, 22, 35, .88), rgba(3, 12, 21, .76));
  border: 1px solid var(--halo-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 15px 14px 34px;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.environment-chart-card figcaption { display: grid; gap: 3px; margin-bottom: 9px; }
.environment-chart-card figcaption span { color: #eefaff; font-size: .82rem; font-weight: 750; }
.environment-chart-card figcaption small { color: var(--halo-muted); font-size: .64rem; font-weight: 500; }
.hvac-chart-caption {
  align-items: center;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 38px minmax(0, 1fr);
}
.hvac-chart-card-icon {
  align-items: center;
  background: color-mix(in srgb, var(--hvac-chart-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hvac-chart-accent) 32%, transparent);
  border-radius: 10px;
  color: var(--hvac-chart-accent);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.hvac-chart-card-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 21px; }
.hvac-chart-caption-copy { display: grid; gap: 3px; min-width: 0; }
.hvac-chart-card-co2 { --hvac-chart-accent: var(--halo-cyan); }
.hvac-chart-card-particles { --hvac-chart-accent: #46d5c2; }
.hvac-chart-card-temperature { --hvac-chart-accent: #ffd166; }
.environment-chart-legend,
.environment-chart-modal-legend { color: var(--halo-muted); display: flex; flex-wrap: wrap; font-size: .61rem; gap: 7px 12px; }
.environment-chart-legend { margin-bottom: 7px; }
.environment-chart-legend span,
.environment-chart-modal-legend span { align-items: center; display: inline-flex; gap: 5px; }
.environment-chart-legend i,
.environment-chart-modal-legend i { border-top: 2px solid; display: inline-block; width: 17px; }
.environment-legend-primary { border-color: var(--halo-cyan) !important; }
.environment-legend-reference { border-color: #a8b7ca !important; border-top-style: dashed !important; }
.environment-legend-light { border-color: #ffd166 !important; }
.environment-legend-doppler { border-color: #11c2e8 !important; }
.environment-legend-threshold { border-color: #ff9f43 !important; border-top-style: dashed !important; }

.environment-chart {
  background: rgba(0, 0, 0, .12);
  border-radius: 8px;
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.environment-chart-gridline { stroke: rgba(118, 157, 183, .2); stroke-width: 1; }
.environment-chart-gridline-vertical { stroke-dasharray: 3 6; opacity: .72; }
.environment-chart-axis,
.environment-chart-empty { fill: var(--halo-muted); font-size: 11px; }
.environment-chart-axis-title { fill: #8aa4b7; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.environment-chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.environment-line-primary { stroke: var(--halo-cyan); }
.environment-line-reference { stroke: #a8b7ca; stroke-dasharray: 6 5; }
.environment-line-light { stroke: #ffd166; }
.environment-line-doppler { stroke: #11c2e8; }
.environment-chart-reference-line { stroke: #ff9f43; stroke-dasharray: 8 6; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.environment-chart-reference-label { fill: #ffb060; font-size: 11px; font-weight: 700; }

.environment-chart-open {
  background: transparent;
  border: 0;
  border-radius: inherit;
  color: var(--halo-subtle);
  cursor: zoom-in;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.environment-chart-open > span {
  align-items: center;
  bottom: 10px;
  display: flex;
  font-size: .64rem;
  font-weight: 750;
  gap: 5px;
  position: absolute;
  right: 12px;
}

.environment-chart-open svg { fill: none; height: 13px; stroke: currentColor; stroke-width: 1.8; width: 13px; }
.environment-chart-open.doppler-chart-open > span { bottom: auto; top: 9px; }
.environment-chart-open:focus-visible { border-radius: 12px; outline-offset: -3px; }

@media (hover: hover) {
  .environment-chart-card:hover,
  .environment-chart-card:has(.environment-chart-open:focus-visible) {
    border-color: rgba(0, 180, 229, .55);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2), 0 0 24px rgba(0, 180, 229, .05);
    transform: translateY(-2px);
  }
  .environment-chart-card:hover .environment-chart-open { color: var(--halo-cyan); }
}

.environment-chart-modal {
  align-items: center;
  background: rgba(1, 8, 15, .86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 10px;
  position: fixed;
  z-index: 2200;
}

.environment-chart-modal[hidden] { display: none !important; }
body.environment-chart-modal-open { overflow: hidden; }
.environment-chart-modal-panel {
  background:
    radial-gradient(circle at 50% 0, rgba(0, 180, 229, .08), transparent 40%),
    var(--halo-panel);
  border: 1px solid rgba(0, 180, 229, .28);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  height: calc(100dvh - 20px);
  max-height: none;
  max-width: 1240px;
  overflow: hidden;
  padding: 14px;
  width: 100%;
}
.environment-chart-modal-panel:focus { outline: none; }
.environment-chart-modal-toolbar { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.environment-chart-modal-toolbar h2 { color: #fff; font-size: 1.35rem; margin: 3px 0 2px; }
.environment-chart-modal-toolbar p:last-child { color: var(--halo-muted); font-size: .72rem; }
.environment-chart-modal-close { flex: 0 0 auto; }
.environment-chart-modal-controls {
  align-items: end;
  background: rgba(2, 12, 21, .48);
  border: 1px solid var(--halo-border);
  border-radius: 11px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 8px 10px;
}
.environment-chart-modal-range-label { color: var(--halo-subtle); display: grid; font-size: .68rem; gap: 4px; min-width: 150px; }
.environment-chart-modal-range-label small { color: var(--halo-muted); font-size: .58rem; }
.environment-chart-modal-range {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(2, 12, 21, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%239fb0bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 14px;
  border: 1px solid var(--halo-border-strong);
  border-radius: 8px;
  color: var(--halo-text);
  cursor: pointer;
  font: inherit;
  min-height: 38px;
  padding: 7px 38px 7px 11px;
  width: 100%;
}
.environment-chart-modal-range:focus-visible { border-color: var(--halo-cyan); box-shadow: 0 0 0 3px rgba(0, 180, 229, .1); outline: none; }
.environment-chart-zoom-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.environment-chart-zoom-controls .btn,
.environment-chart-pan-controls .btn { gap: 6px; min-height: 38px; padding: 7px 10px; }
.environment-chart-zoom-controls svg,
.environment-chart-pan-controls svg { flex: 0 0 auto; height: 15px; width: 15px; }
.environment-chart-zoom-level {
  align-items: center;
  background: rgba(0, 180, 229, .06);
  border: 1px solid rgba(0, 180, 229, .18);
  border-radius: 8px;
  color: var(--halo-cyan);
  display: inline-flex;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  justify-content: center;
  min-height: 38px;
  min-width: 48px;
  padding: 7px 9px;
}
.environment-chart-modal-meta { align-items: center; display: flex; gap: 14px; justify-content: space-between; min-height: 22px; }
.environment-chart-modal-legend { font-size: .7rem; }
.environment-chart-modal-status { color: var(--halo-muted); font-size: .67rem; line-height: 1.4; text-align: right; }
.environment-chart-modal-scroll {
  align-items: center;
  background: rgba(0, 0, 0, .12);
  border: 1px solid var(--halo-border);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.environment-chart-expanded { height: 100%; min-height: 0; min-width: 0; width: 100%; }
.environment-chart-expanded .environment-chart-axis { font-size: 13px; }
.environment-chart-expanded .environment-chart-axis-title { font-size: 12px; letter-spacing: 1.4px; }
.environment-chart-expanded .environment-chart-line { stroke-width: 3; }
.environment-chart-pan-controls {
  align-items: center;
  background: rgba(2, 12, 21, .38);
  border: 1px solid var(--halo-border);
  border-radius: 11px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  padding: 7px 10px;
}
.environment-chart-pan-label { color: var(--halo-subtle); display: grid; font-size: .64rem; gap: 4px; min-width: 0; }
.environment-chart-pan {
  accent-color: var(--halo-cyan);
  cursor: ew-resize;
  margin: 0;
  min-height: 18px;
  width: 100%;
}
.environment-chart-pan:disabled { cursor: default; opacity: .45; }
.environment-chart-pan-endpoints { color: var(--halo-muted); display: flex; font-size: .58rem; gap: 12px; justify-content: space-between; }
.environment-chart-pan-endpoints small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.environment-chart-modal-hint { color: var(--halo-muted); font-size: .68rem; text-align: center; }

@media (max-height: 760px) {
  .environment-chart-modal-panel { gap: 6px; padding: 10px; }
  .environment-chart-modal-toolbar h2 { font-size: 1.1rem; margin-block: 1px; }
  .environment-chart-modal-toolbar p:last-child { font-size: .64rem; }
  .environment-chart-modal-controls,
  .environment-chart-pan-controls { padding-block: 5px; }
  .environment-chart-modal-range-label small { display: none; }
  .environment-chart-modal-meta { min-height: 18px; }
  .environment-chart-modal-hint { font-size: .6rem; }
}

@media (max-height: 620px) {
  .environment-chart-modal-hint { display: none; }
}

@media (forced-colors: active) {
  .environment-chart-modal-range { appearance: auto; background-image: none; padding-right: 11px; }
}

.environment-board-state {
  --environment-state-accent: var(--halo-green);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--environment-state-accent) 10%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(8, 23, 36, .9), rgba(4, 13, 22, .86));
  border: 1px solid color-mix(in srgb, var(--environment-state-accent) 30%, var(--halo-border));
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 34px rgba(0, 0, 0, .12);
  display: grid;
  overflow: hidden;
  position: relative;
}

.environment-board-state.has-alerts { --environment-state-accent: #ff8091; }
.environment-board-state::before {
  background: linear-gradient(90deg, var(--environment-state-accent), transparent 72%);
  content: "";
  height: 2px;
  inset: 0 0 auto;
  opacity: .8;
  position: absolute;
}

.environment-board-state-header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 20px 16px;
}

.environment-board-state-title { align-items: center; display: flex; gap: 12px; }
.environment-board-state-title > div { display: grid; gap: 3px; }
.environment-board-state-title h3 { color: #f4fbff; font-size: 1.25rem; letter-spacing: -.015em; }
.environment-board-state-icon {
  align-items: center;
  background: color-mix(in srgb, var(--environment-state-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--environment-state-accent) 35%, transparent);
  border-radius: 12px;
  color: var(--environment-state-accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.environment-board-state-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 21px; }

.environment-active-alert-count {
  background: var(--halo-green-dim);
  border: 1px solid rgba(0, 230, 146, .3);
  border-radius: 999px;
  color: var(--halo-green);
  flex: 0 0 auto;
  font-size: .66rem;
  font-weight: 750;
  padding: 6px 9px;
}
.environment-active-alert-count.has-alerts { background: rgba(255, 80, 105, .1); border-color: rgba(255, 80, 105, .35); color: #ff8fa0; }
.environment-board-state-content {
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr);
}
.environment-active-alert-list { align-content: start; display: grid; gap: 8px; padding: 18px 20px; }
.environment-active-alert {
  align-items: flex-start;
  background: color-mix(in srgb, var(--environment-state-accent) 5%, rgba(255, 255, 255, .012));
  border: 1px solid color-mix(in srgb, var(--environment-state-accent) 14%, rgba(255, 255, 255, .045));
  border-radius: 11px;
  display: flex;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
}
.environment-active-alert-icon { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; height: 27px; justify-content: center; width: 27px; }
.environment-active-alert-icon svg { height: 15px; width: 15px; }
.environment-active-alert strong { color: #f4faff; display: block; font-size: .82rem; }
.environment-active-alert p { color: var(--halo-muted); font-size: .71rem; line-height: 1.48; margin-top: 3px; }
.environment-active-alert-ok .environment-active-alert-icon { background: rgba(0, 230, 146, .1); color: var(--halo-green); }
.environment-active-alert-info .environment-active-alert-icon { background: rgba(0, 180, 229, .1); color: var(--halo-cyan); }
.environment-active-alert-warning .environment-active-alert-icon { background: rgba(255, 193, 7, .1); color: #ffd166; }
.environment-active-alert-critical .environment-active-alert-icon { background: rgba(255, 80, 105, .11); color: #ff8091; }

.environment-board-state-settings {
  background: rgba(1, 10, 18, .32);
  border-left: 1px solid rgba(255, 255, 255, .06);
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}
.environment-board-state-settings-header { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.environment-board-state-settings-label { color: #edf9ff; font-size: .78rem; font-weight: 750; margin-bottom: 3px; }
.environment-alert-rules-copy { color: var(--halo-muted); font-size: .69rem; line-height: 1.45; }
.environment-threshold-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.environment-threshold-summary > span {
  background: rgba(0, 180, 229, .035);
  border: 1px solid rgba(0, 180, 229, .11);
  border-radius: 9px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}
.environment-threshold-summary small { color: var(--halo-muted); font-size: .61rem; }
.environment-threshold-summary strong { color: var(--halo-subtle); font-size: .69rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.environment-threshold-modal {
  align-items: center;
  background: rgba(1, 8, 15, .86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 2200;
}
.environment-threshold-modal[hidden] { display: none !important; }
body.environment-threshold-modal-open { overflow: hidden; }
.environment-threshold-modal-panel {
  background:
    radial-gradient(circle at 50% 0, rgba(0, 180, 229, .07), transparent 35%),
    var(--halo-panel);
  border: 1px solid rgba(0, 180, 229, .26);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .62);
  display: grid;
  gap: 16px;
  max-height: calc(100dvh - 48px);
  max-width: 980px;
  overflow-y: auto;
  padding: 20px;
  width: 100%;
}
.environment-threshold-modal-panel:focus { outline: none; }
.environment-threshold-modal-header { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.environment-threshold-modal-header h2 { color: #fff; font-size: 1.3rem; margin: 2px 0 0; }
.environment-threshold-modal-close { flex: 0 0 auto; }
.environment-threshold-explainer {
  align-items: flex-start;
  background: rgba(0, 180, 229, .045);
  border: 1px solid rgba(0, 180, 229, .14);
  border-radius: 11px;
  color: var(--halo-subtle);
  display: flex;
  font-size: .74rem;
  gap: 10px;
  line-height: 1.55;
  padding: 12px;
}
.environment-threshold-explainer-icon { color: var(--halo-cyan); display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.environment-threshold-explainer-icon svg { height: 18px; width: 18px; }
.environment-threshold-modal-form { background: transparent; border: 0; padding: 0; }
.environment-threshold-grid fieldset {
  background: rgba(2, 12, 21, .5);
  border: 1px solid var(--halo-border);
  border-radius: 11px;
  display: grid;
  gap: 10px;
  margin: 0;
  min-width: 0;
  padding: 13px;
}
.environment-threshold-grid legend { align-items: center; color: #eefaff; display: flex; font-size: .75rem; font-weight: 750; gap: 7px; padding: 0 4px; }
.environment-threshold-grid legend svg { color: var(--halo-cyan); height: 15px; width: 15px; }
.environment-threshold-grid fieldset > p { color: var(--halo-muted); font-size: .66rem; line-height: 1.4; min-height: 2.8em; }
.environment-threshold-pair { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.environment-threshold-modal-actions { align-items: center; display: flex; gap: 9px; justify-content: flex-end; }
.environment-threshold-modal-actions .environment-threshold-status { margin-right: auto; }

.environment-history-table-wrap {
  background:
    linear-gradient(hsl(215, 30%, 12%) 0 2.65rem, transparent 2.65rem),
    rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  max-height: min(20rem, 44vh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.environment-history-kicker {
  color: var(--halo-cyan);
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: .12rem;
  text-transform: uppercase;
}
.environment-history-titles > div { display: grid; gap: 2px; }
.environment-history-table { border-collapse: collapse; font-size: .82rem; min-width: 860px; width: 100%; }
.environment-history-table th,
.environment-history-table td { padding: .65rem .85rem; text-align: left; vertical-align: middle; white-space: nowrap; }
.environment-history-table th {
  background: hsl(215, 30%, 12%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  color: var(--halo-muted);
  font-size: .68rem;
  letter-spacing: .07em;
  padding: .7rem .85rem;
  position: sticky;
  text-align: left;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}
.environment-history-table td { color: var(--halo-subtle); font-variant-numeric: tabular-nums; }
.environment-history-table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .05); }
.environment-history-table tbody tr:hover td { background: rgba(255, 255, 255, .025); color: #eefaff; }
.environment-history-table td.environment-history-time { color: #d5e3ec; font-size: .78rem; }
.environment-history-table td.environment-history-primary { color: var(--halo-cyan); font-weight: 700; }
.environment-history-table td.environment-history-humidity { color: var(--halo-green); font-weight: 650; }
.environment-history-table td.environment-history-reference { color: #b9c8d4; }
.environment-history-table td.environment-history-light { color: var(--halo-amber); }
.environment-history-table td.environment-history-signal { color: var(--halo-muted); }
.environment-history-pagination {
  align-items: center;
  background: rgba(2, 12, 21, .42);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 2px;
  padding: 10px 12px;
}
.environment-history-page-size-label { align-items: center; color: var(--halo-subtle); display: flex; font-size: .72rem; font-weight: 700; gap: 10px; white-space: nowrap; }
.environment-history-page-size {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(2, 12, 21, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%239fb0bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 13px;
  border: 1px solid var(--halo-border-strong);
  border-radius: 8px;
  color: var(--halo-text);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  min-width: 104px;
  padding: 9px 38px 9px 12px;
}
.environment-history-page-size:focus-visible { border-color: var(--halo-cyan); box-shadow: 0 0 0 3px rgba(0, 180, 229, .1); outline: none; }
.environment-history-page-actions { align-items: center; display: flex; flex-wrap: nowrap; gap: 7px; justify-content: flex-end; }
.environment-history-page-actions .btn { color: var(--halo-subtle); font-size: .75rem; min-height: 40px; padding: 8px 11px; }
.environment-history-page-actions .btn:not(:disabled):hover { color: #fff; }
.environment-history-page-actions .btn:disabled { opacity: .38; }
.environment-history-page-status {
  align-items: center;
  background: rgba(0, 180, 229, .07);
  border: 1px solid rgba(0, 180, 229, .16);
  border-radius: 999px;
  color: #d8faff;
  display: inline-flex;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-height: 40px;
  min-width: 92px;
  padding: 8px 12px;
  text-align: center;
}
.environment-history-scroll-hint { color: var(--halo-muted); font-size: .67rem; line-height: 1.45; margin: -8px 2px 0; }

@media (forced-colors: active) {
  .environment-history-page-size { appearance: auto; background-image: none; padding-right: 10px; }
}

@media (max-width: 1080px) {
  .environment-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-charts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .environment-metrics,
  .environment-threshold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-board-state-content { grid-template-columns: minmax(0, 1fr); }
  .environment-board-state-settings { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
  .environment-threshold-grid fieldset:last-child { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .environment-hero,
  .environment-section-header,
  .environment-settings-header { align-items: stretch; flex-direction: column; }
  .environment-metrics,
  .environment-threshold-grid { grid-template-columns: minmax(0, 1fr); }
  .environment-action-button { width: 100%; }
  .environment-chart-modal { align-items: flex-end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .environment-chart-modal-panel { border-bottom: 0; border-radius: 18px 18px 0 0; height: calc(100dvh - max(8px, env(safe-area-inset-top))); max-height: none; padding: 10px; }
  .environment-chart-modal-toolbar { align-items: flex-start; }
  .environment-chart-modal-close span { display: none; }
  .environment-chart-modal-controls { align-items: stretch; flex-direction: column; }
  .environment-chart-modal-range-label { min-width: 0; }
  .environment-chart-zoom-controls { display: grid; grid-template-columns: 44px auto 44px minmax(0, 1fr); }
  .environment-chart-zoom-controls .btn { justify-content: center; min-width: 0; padding-inline: 7px; }
  .environment-chart-zoom-out span,
  .environment-chart-zoom-in span { display: none; }
  .environment-chart-modal-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .environment-chart-modal-status { text-align: left; }
  .environment-chart-expanded { min-width: 0; }
  .environment-chart-pan-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .environment-chart-pan-label { grid-column: 1 / -1; grid-row: 1; }
  .environment-chart-pan-earlier { grid-column: 1; grid-row: 2; justify-content: center; }
  .environment-chart-pan-later { grid-column: 2; grid-row: 2; justify-content: center; }
  .environment-board-state-header { align-items: flex-start; padding: 16px; }
  .environment-board-state-title { align-items: flex-start; }
  .environment-active-alert-list,
  .environment-board-state-settings { padding: 16px; }
  .environment-board-state-settings-header { align-items: stretch; flex-direction: column; }
  .environment-threshold-summary { grid-template-columns: minmax(0, 1fr); }
  .environment-threshold-modal { align-items: flex-end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .environment-threshold-modal-panel { border-bottom: 0; border-radius: 18px 18px 0 0; max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); padding: 16px 12px; }
  .environment-threshold-modal-header { align-items: flex-start; }
  .environment-threshold-modal-close span { display: none; }
  .environment-threshold-grid fieldset:last-child { grid-column: auto; }
  .environment-threshold-pair { grid-template-columns: minmax(0, 1fr); }
  .environment-threshold-modal-actions { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .environment-threshold-modal-actions .environment-threshold-status { grid-column: 1 / -1; margin: 0; }
  .environment-history-pagination { align-items: stretch; flex-direction: column; }
  .environment-history-page-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .environment-history-page-actions .btn { justify-content: center; }
  .environment-history-page-status { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}

/* ═══════════════════════════════════════════════════
   AUTH UI
   ═══════════════════════════════════════════════════ */

/* Auth Overlay — dark centered-card landing */
.auth-overlay {
  --auth-brand: #0087c9;
  --auth-electric: #00b4e5;
  --auth-electric-bright: #35cdf5;
  --auth-gold: #ffcb05;
  --auth-ink: #f1f6fb;
  --auth-ink-soft: #c3d2e0;
  --auth-muted: #8fa5b8;
  --auth-line: rgba(255, 255, 255, 0.14);
  --auth-bg: #0c131d;
  color-scheme: dark;
  position: fixed;
  inset: 0;
  background: var(--auth-bg);
  color: var(--auth-ink);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
  scrollbar-gutter: stable;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.auth-hero-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(560px, 72dvh);
  background: linear-gradient(135deg, #0c131d 0%, #0d2237 55%, #0d3d61 100%);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-hero-band::after {
  background: linear-gradient(180deg, transparent 72%, var(--auth-bg) 100%);
  content: '';
  inset: 0;
  position: absolute;
}

.auth-hero-glow {
  border-radius: 50%;
  filter: blur(90px);
  position: absolute;
}

.auth-hero-glow-a {
  background: rgba(0, 180, 229, 0.16);
  height: 480px;
  right: -6%;
  top: -32%;
  width: 480px;
}

.auth-hero-glow-b {
  background: rgba(4, 12, 26, 0.55);
  bottom: -42%;
  height: 380px;
  left: 6%;
  width: 380px;
}

.auth-hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  inset: 0;
  position: absolute;
}

.auth-overlay > .site-header,
.auth-overlay > .auth-landing {
  flex-shrink: 0;
}

html.is-signed-in .auth-overlay,
html.is-dev-preview .auth-overlay {
  display: none !important;
}

html.is-signed-in .page-shell,
html.is-dev-preview .page-shell {
  display: flex;
}

html.is-signed-in .page-shell[hidden],
html.is-dev-preview .page-shell[hidden] {
  display: flex !important;
}

.auth-landing {
  /* Horizontal width/padding come from `main` so this column matches the dashboard. */
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 3rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

@media (min-width: 961px) {
  .auth-landing {
    padding-top: 3rem;
  }
}

/* Dashboard header reused as-is on the signed-out landing.
   Keep the header the same height as the signed-in dashboard header. */
.auth-site-header .auth-landing-contact {
  min-height: 32px;
  padding: 5px 16px;
}

.auth-landing-contact {
  align-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 40px;
  padding: 8px 20px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.auth-landing-contact:hover,
.auth-landing-contact:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* ── Centered split card: form left, promo right ── */
.auth-panel {
  background: #0e1a2c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 180, 229, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  margin: 0 auto 40px;
  max-width: 1200px;
  overflow: hidden;
  width: 100%;
}

.auth-promo {
  background: linear-gradient(165deg, rgba(0, 150, 216, 0.14) 0%, rgba(6, 32, 58, 0.55) 58%, rgba(4, 22, 42, 0.7) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(30px, 4vw, 46px);
}

.auth-landing-eyebrow {
  color: var(--auth-electric);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.auth-landing-heading {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;
}

.auth-landing-lede {
  color: #a9bccd;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 18px;
}

.auth-promo-points {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.auth-promo-points li {
  align-items: flex-start;
  color: #b9c9d8;
  display: flex;
  font-size: 0.9rem;
  gap: 10px;
  line-height: 1.45;
}

.auth-point-check {
  align-items: center;
  background: rgba(0, 180, 229, 0.16);
  border-radius: 50%;
  color: var(--auth-electric-bright);
  display: inline-flex;
  flex: 0 0 auto;
  height: 21px;
  justify-content: center;
  margin-top: 1px;
  width: 21px;
}

.auth-point-check svg {
  fill: none;
  height: 12px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  width: 12px;
}

.auth-promo-kit {
  background: rgba(255, 203, 5, 0.07);
  border: 1px solid rgba(255, 203, 5, 0.24);
  border-radius: 14px;
  color: inherit;
  display: grid;
  gap: 3px;
  padding: 13px 16px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.auth-promo-kit:hover,
.auth-promo-kit:focus-visible {
  background: rgba(255, 203, 5, 0.12);
  border-color: rgba(255, 203, 5, 0.48);
  transform: translateY(-1px);
}

.auth-promo-kit-kicker {
  color: var(--auth-gold);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-promo-kit strong {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth-promo-kit-cta {
  color: var(--auth-electric-bright);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ── Promo illustration (mock live dashboard) ── */
.auth-promo-art {
  height: 216px;
  margin: 0 0 26px;
  position: relative;
}

.auth-art-window {
  background: linear-gradient(180deg, #13263e, #0d1c30);
  border: 1px solid rgba(0, 180, 229, 0.22);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  left: 50%;
  padding: 12px 16px 16px;
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  width: min(300px, 76%);
}

.auth-art-titlebar {
  display: flex;
  gap: 5px;
}

.auth-art-titlebar span {
  background: #fda4af;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.auth-art-titlebar span:nth-child(2) { background: #fcd34d; }
.auth-art-titlebar span:nth-child(3) { background: #86efac; }

.auth-art-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 11px 0 8px;
}

.auth-art-row strong {
  color: #e8f1f8;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}

.auth-art-live {
  align-items: center;
  background: rgba(34, 197, 94, 0.16);
  border-radius: 999px;
  color: #4ade80;
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  text-transform: uppercase;
}

.auth-art-live i {
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
  height: 6px;
  width: 6px;
}

.auth-art-spark {
  display: block;
  height: 56px;
  width: 100%;
}

.auth-art-spark-fill {
  fill: rgba(33, 204, 239, 0.14);
}

.auth-art-spark-line {
  fill: none;
  stroke: #21ccef;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.auth-art-meters {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.auth-art-meters span {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  display: block;
  height: 7px;
  overflow: hidden;
  position: relative;
}

.auth-art-meters span::after {
  background: linear-gradient(90deg, #0ea4c5, #21ccef);
  border-radius: inherit;
  content: '';
  inset: 0;
  position: absolute;
  width: var(--w, 60%);
}

.auth-art-chip {
  align-items: center;
  background: #13273f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  gap: 9px;
  padding: 9px 13px;
  position: absolute;
}

.auth-art-chip svg {
  fill: none;
  flex: 0 0 auto;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.auth-art-chip span {
  display: grid;
  line-height: 1.25;
}

.auth-art-chip strong {
  color: #e8f1f8;
  font-size: 0.78rem;
}

.auth-art-chip span {
  color: var(--auth-muted);
  font-size: 0.68rem;
}

.auth-art-chip-signal {
  animation: auth-art-float 5s ease-in-out infinite;
  color: #21ccef;
  left: 1%;
  top: 92px;
}

.auth-art-chip-alert {
  animation: auth-art-float 6s ease-in-out 0.8s infinite;
  bottom: 2px;
  color: var(--auth-gold);
  right: 1%;
}

.auth-art-plus {
  align-items: center;
  background: var(--auth-gold);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(163, 124, 0, 0.3);
  color: #5b4a00;
  display: flex;
  font-size: 1.05rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  position: absolute;
  right: 9%;
  top: 0;
  transform: rotate(8deg);
  width: 26px;
}

@keyframes auth-art-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* ── Below-the-fold marketing ── */
.auth-landing-details {
  margin: 0 auto 44px;
  max-width: 1200px;
}

.auth-landing-details-title {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.auth-landing-details-lede {
  color: var(--auth-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 44rem;
}

.auth-landing-highlights {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.auth-landing-highlights li {
  background: linear-gradient(180deg, rgba(13, 27, 48, 0.9), rgba(9, 20, 38, 0.92));
  border: 1px solid rgba(0, 180, 229, 0.14);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 18px;
}

.auth-landing-icon {
  align-items: center;
  background: rgba(0, 180, 229, 0.12);
  border: 1px solid rgba(0, 180, 229, 0.22);
  border-radius: 12px;
  color: var(--auth-electric);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.auth-landing-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.auth-landing-highlights h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.auth-landing-highlights p {
  color: var(--auth-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.auth-landing-steps {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-landing-steps li {
  background: linear-gradient(180deg, rgba(13, 27, 48, 0.9), rgba(9, 20, 38, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  padding: 20px 16px 18px;
  position: relative;
}

.auth-landing-step-num {
  color: rgba(0, 180, 229, 0.32);
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  user-select: none;
}

.auth-landing-steps h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.auth-landing-steps p {
  color: var(--auth-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
}

.auth-landing-foot {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  padding: 64px 16px 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}

.auth-foot-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto 64px;
  max-width: 1440px;
}

.auth-foot-brand {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  width: 135px;
}

.auth-foot-brand img {
  display: block;
  height: auto;
  opacity: 0.9;
  width: 135px;
}

.auth-foot-brand span {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  font-size: 0.84em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin-top: 2px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
}

.auth-foot-desc {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.625;
  margin: 0 auto;
  max-width: 28rem;
}

@media (min-width: 768px) {
  .auth-foot-desc {
    font-size: 1rem;
  }
}

.auth-foot-location {
  color: #94a3b8;
  font-size: 0.75rem;
  margin: 16px 0 32px;
}

.auth-foot-pill {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #cbd5e1;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 8px;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.auth-foot-pill:hover,
.auth-foot-pill:focus-visible {
  background: rgba(0, 180, 229, 0.1);
  border-color: rgba(0, 180, 229, 0.4);
  color: #fff;
}

.auth-foot-pill svg {
  color: var(--auth-electric);
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.auth-foot-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.875rem;
  font-weight: 500;
  margin: auto auto 0;
  max-width: 1440px;
  padding: 32px 0 max(32px, env(safe-area-inset-bottom, 0));
  width: 100%;
}

.auth-foot-legal p {
  margin: 0;
}

/* ── Form half of the card ── */
.auth-overlay .auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(30px, 4vw, 46px) clamp(24px, 4vw, 48px) clamp(24px, 3vw, 32px);
  scroll-margin-top: 20px;
  text-align: left;
}

.auth-card:focus {
  outline: none;
}

.auth-card:focus-visible {
  outline: 2px solid var(--auth-electric);
  outline-offset: -6px;
}

.auth-overlay .auth-logo {
  border-radius: 50%;
  display: block;
  height: 48px;
  margin: 0 auto 16px;
  width: 48px;
}

.auth-overlay .auth-title {
  color: #fff;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  text-align: center;
}

.auth-overlay .auth-subtitle {
  color: var(--auth-muted);
  margin-bottom: 26px;
  text-align: center;
}

.auth-overlay .flasher-handoff-hint {
  color: var(--auth-muted);
  margin: -14px 0 22px;
}

.auth-overlay .auth-field label {
  color: var(--auth-ink-soft);
}

.auth-overlay .auth-field input {
  background: rgba(3, 12, 30, 0.55);
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  color: #fff;
}

.auth-overlay .auth-field input::placeholder {
  color: #6d8399;
}

.auth-overlay .auth-field input:hover {
  border-color: rgba(255, 255, 255, 0.26);
}

.auth-overlay .auth-field input:focus {
  background: rgba(3, 12, 30, 0.85);
  border-color: rgba(0, 180, 229, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 180, 229, 0.2);
}

.auth-field-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.auth-field-head label {
  margin-bottom: 0;
}

.auth-overlay .auth-form {
  display: grid;
  grid-template-columns: 1fr auto;
}

.auth-overlay .auth-form > * {
  grid-column: 1 / -1;
}

.auth-overlay .auth-form > .auth-honeypot {
  grid-column: 1;
  grid-row: 1;
}

.auth-overlay #auth-email-field {
  grid-row: 1;
}

.auth-overlay #auth-password-field {
  grid-row: 2;
}

.auth-overlay .auth-forgot {
  align-self: start;
  font-size: 0.82rem;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  z-index: 1;
}

.auth-overlay .auth-form:has(#auth-forgot-wrap:not([hidden])) #auth-password-field .auth-field-head {
  padding-right: 9rem;
}

.auth-inline-link {
  background: none;
  border: none;
  color: var(--auth-electric);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 2px 0;
}

.auth-inline-link:hover,
.auth-inline-link:focus-visible {
  color: #7fdcff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap input {
  padding-right: 46px;
}

.auth-eye {
  align-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: #7f96ab;
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
}

.auth-eye:hover,
.auth-eye:focus-visible {
  background: rgba(0, 180, 229, 0.12);
  color: var(--auth-electric-bright);
}

.auth-eye svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.auth-eye .auth-eye-closed,
.auth-eye[aria-pressed="true"] .auth-eye-open {
  display: none;
}

.auth-eye[aria-pressed="true"] .auth-eye-closed {
  display: block;
}

.auth-options {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: -4px 0 18px;
}

.auth-options[hidden] {
  display: none;
}

.auth-remember {
  align-items: center;
  color: var(--auth-ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 8px;
  user-select: none;
}

.auth-remember input {
  accent-color: var(--auth-electric);
  cursor: pointer;
  height: 16px;
  margin: 0;
  width: 16px;
}

.auth-overlay .auth-error {
  border-radius: 10px;
}

.auth-overlay .auth-success {
  border-radius: 10px;
}

.auth-overlay .auth-submit {
  background: linear-gradient(180deg, #00a6e8, #0080c0);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 180, 229, 0.28);
  color: #fff;
  font-weight: 700;
}

.auth-overlay .auth-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #12b6f5, #058ccc);
  box-shadow: 0 12px 28px rgba(0, 180, 229, 0.38);
  transform: translateY(-1px);
}

.auth-overlay .auth-switch {
  color: var(--auth-muted);
  margin-top: 18px;
  text-align: center;
}

.auth-overlay .auth-switch-btn {
  color: var(--auth-electric);
}

.auth-overlay .auth-switch-btn:hover {
  color: #7fdcff;
}

.auth-overlay .auth-legal-notice {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--auth-muted);
  text-align: center;
}

.auth-overlay .auth-legal-link {
  color: var(--auth-electric);
}

.auth-overlay .auth-legal-link:hover {
  color: #7fdcff;
}

/* ── HaLow Flasher hand-off mode: form card only ── */
.auth-overlay.is-flasher {
  overflow-y: auto;
}

.auth-overlay.is-flasher .auth-promo,
.auth-overlay.is-flasher .auth-landing-details,
.auth-overlay.is-flasher .auth-landing-foot,
.auth-overlay.is-flasher .auth-landing-contact {
  display: none;
}

/* ── Contact Pace Wireless modal ── */
.contact-modal {
  max-height: min(88dvh, 760px);
  max-width: 520px;
  overflow-y: auto;
}

.contact-intro {
  background: rgba(0, 180, 229, 0.04);
  border: 1px solid rgba(0, 180, 229, 0.14);
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
}

.contact-intro-kicker {
  color: var(--halo-cyan);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.contact-intro p:last-child {
  color: var(--halo-subtle);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

.contact-intro strong {
  color: #fff;
}

.contact-form-row {
  display: grid;
  gap: 0 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form .auth-field {
  margin-bottom: 16px;
}

.contact-form textarea {
  background: var(--halo-panel-inner);
  border: 1px solid var(--halo-border);
  border-radius: 6px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  min-height: 110px;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.contact-form textarea:focus {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 3px var(--halo-cyan-glow);
  outline: none;
}

.contact-submit {
  min-height: 44px;
  width: 100%;
}

.contact-success {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 28px 8px 16px;
  text-align: center;
}

.contact-success[hidden] {
  display: none;
}

.contact-success-icon {
  align-items: center;
  background: rgba(74, 222, 128, 0.14);
  border-radius: 50%;
  color: #4ade80;
  display: flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 6px;
  width: 56px;
}

.contact-success-icon svg {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 26px;
}

.contact-success strong {
  color: #fff;
  font-size: 1.1rem;
}

.contact-success p {
  color: var(--halo-subtle);
  margin: 0;
}

.auth-overlay.is-flasher .auth-panel {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .auth-panel {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }

  .auth-promo {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .auth-promo-art {
    height: 200px;
  }

  .auth-landing-highlights {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
  }

  .auth-landing-highlights li {
    flex-direction: row;
    gap: 16px;
  }

  .auth-landing-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .auth-panel {
    border-radius: 20px;
  }

  .auth-landing-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Compact horizontal rows so the steps match the icon cards above. */
  .auth-landing-steps li {
    column-gap: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px 18px 16px;
  }

  .auth-landing-step-num {
    font-size: 1.6rem;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    margin-top: 1px;
    min-width: 38px;
  }

  .auth-landing-steps h3,
  .auth-landing-steps p {
    grid-column: 2;
  }

  .auth-art-chip-signal {
    left: -2%;
  }

  .auth-art-chip-alert {
    right: -2%;
  }

  .contact-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-art-chip-signal,
  .auth-art-chip-alert {
    animation: none;
  }
}

.auth-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 12px;
}

.auth-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-subtitle {
  color: var(--halo-subtle);
  font-size: 0.9rem;
  margin-bottom: 32px;
}

.flasher-handoff-hint {
  color: var(--halo-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: -18px 0 26px;
  text-align: center;
}

.flasher-handoff-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 10, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.flasher-handoff-modal[hidden] {
  display: none !important;
}

.flasher-handoff-card {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,229,255,0.1);
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.flasher-handoff-card .auth-logo {
  margin-bottom: 18px;
}

.flasher-handoff-panel {
  display: grid;
  gap: 12px;
  text-align: left;
}

.flasher-handoff-eyebrow {
  color: var(--halo-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.flasher-handoff-title {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  text-align: center;
}

.flasher-handoff-intro {
  color: var(--halo-subtle);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.flasher-handoff-status {
  color: var(--halo-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  text-align: center;
}

.flasher-handoff-status[hidden] {
  display: none !important;
}

.flasher-handoff-fallback {
  color: var(--halo-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.flasher-handoff-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.flasher-handoff-btn {
  justify-content: center;
  width: 100%;
}

/* ── HaLow Flasher download / get started ── */
.empty-get-started {
  align-items: center;
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 180, 229, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 20px auto 32px;
  max-width: min(680px, 100%);
  padding: 40px 36px 36px;
  text-align: center;
  width: 100%;
}

.empty-get-started h2 {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0;
  text-align: center;
}

.empty-get-started .empty-lead {
  color: #9bb0c4;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 580px;
  text-align: center;
}

.empty-flasher-cta {
  align-items: center;
  appearance: none;
  background: linear-gradient(135deg, rgba(0, 180, 229, 0.16) 0%, rgba(0, 128, 255, 0.08) 100%);
  border: 1px solid rgba(0, 180, 229, 0.38);
  border-radius: 14px;
  box-shadow: 0 8px 24px -4px rgba(0, 180, 229, 0.14);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  gap: 14px;
  justify-content: flex-start;
  margin-top: 8px;
  max-width: 540px;
  padding: 14px 20px;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.empty-flasher-cta:hover {
  background: linear-gradient(135deg, rgba(0, 180, 229, 0.24) 0%, rgba(0, 128, 255, 0.14) 100%);
  border-color: rgba(0, 180, 229, 0.6);
  box-shadow: 0 10px 28px -4px rgba(0, 180, 229, 0.25);
  transform: translateY(-2px);
}

.empty-flasher-cta-icon {
  align-items: center;
  background: var(--halo-cyan);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 180, 229, 0.35);
  color: #071018;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.empty-flasher-cta-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 20px;
}

.empty-flasher-cta-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.empty-flasher-cta-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.empty-flasher-cta-title {
  color: #fff;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
}

.empty-flasher-cta-sub {
  color: var(--halo-muted);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}

.empty-flasher-cta-badge {
  background: rgba(0, 180, 229, 0.14);
  border: 1px solid rgba(0, 180, 229, 0.32);
  border-radius: 6px;
  color: var(--halo-cyan);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.empty-flasher-cta-chevron {
  color: var(--halo-cyan);
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease;
}

.empty-flasher-cta:hover .empty-flasher-cta-chevron {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .empty-get-started {
    margin: 16px auto 28px;
    padding: 28px 18px 24px;
  }

  .empty-get-started h2 {
    font-size: 1.45rem;
  }

  .empty-get-started .empty-lead {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .empty-flasher-cta {
    gap: 12px;
    padding: 12px 16px;
  }

  .empty-flasher-cta-icon {
    height: 34px;
    width: 34px;
  }

  .empty-flasher-cta-icon svg {
    height: 18px;
    width: 18px;
  }

  .empty-flasher-cta-title {
    font-size: 0.92rem;
  }

  .empty-flasher-cta-sub {
    font-size: 0.77rem;
  }
}

@media (max-width: 480px) {
  .empty-get-started {
    border-radius: 16px;
    padding: 24px 14px 20px;
  }

  .empty-flasher-cta {
    gap: 10px;
    padding: 12px 14px;
  }

  .empty-flasher-cta-badge {
    display: none;
  }
}

/* ── All boards offline ── */
.empty-all-offline {
  align-items: center;
  animation: card-in .4s cubic-bezier(0.1, 0.9, 0.2, 1);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 171, 0, 0.12) 0%, transparent 52%),
    var(--halo-panel);
  border: 1px solid rgba(255, 171, 0, 0.32);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 16px;
  max-width: none;
  min-height: min(560px, max(320px, calc(100dvh - 180px)));
  overflow: hidden;
  padding: 48px 32px;
  position: relative;
  text-align: center;
  width: 100%;
}

.empty-all-offline > * {
  position: relative;
  z-index: 1;
}

.all-offline-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  max-width: 36rem;
  width: 100%;
}

.all-offline-icon {
  align-items: center;
  background: rgba(255, 171, 0, 0.1);
  border: 1px solid rgba(255, 171, 0, 0.32);
  border-radius: 16px;
  box-shadow: 0 8px 24px -8px rgba(255, 171, 0, 0.35);
  color: #ffcc66;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 4px;
  width: 56px;
}

.all-offline-icon svg {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 28px;
}

.all-offline-icon svg circle {
  fill: currentColor;
  stroke: none;
}

.all-offline-kicker {
  color: #ffcc66;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.empty-all-offline h2 {
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-shadow: none;
  text-transform: none;
}

.empty-all-offline .empty-lead {
  color: #9bb0c4;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: none;
  text-align: center;
}

@media (max-width: 720px) {
  .empty-all-offline {
    min-height: min(420px, calc(100dvh - 160px));
    padding: 36px 20px;
  }

  .empty-all-offline h2 {
    font-size: 1.45rem;
  }

  .empty-all-offline .empty-lead {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .empty-all-offline {
    min-height: min(360px, calc(100dvh - 140px));
    padding: 28px 16px;
  }

  .all-offline-icon {
    height: 48px;
    width: 48px;
  }
}

.flasher-get-started,
.flasher-download-modal-body .flasher-get-started {
  display: grid;
  gap: 18px;
}

.flasher-get-started-hero {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.flasher-get-started-os-badge {
  align-items: center;
  background: rgb(0 180 229 / 0.08);
  border: 1px solid rgb(0 180 229 / 0.22);
  border-radius: 12px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.flasher-get-started-eyebrow {
  color: var(--halo-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.flasher-get-started-title {
  color: var(--halo-text);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.flasher-get-started-lede {
  color: var(--halo-subtle);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

.flasher-download-list {
  display: grid;
  gap: 10px;
}

.flasher-download-row {
  align-items: center;
  background: rgb(3 23 38 / 0.55);
  border: 1px solid rgb(0 180 229 / 0.16);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.flasher-download-row.is-featured {
  border-color: rgb(0 180 229 / 0.35);
  box-shadow: inset 0 0 0 1px rgb(0 180 229 / 0.08);
}

.flasher-download-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.flasher-download-copy strong {
  color: var(--halo-text);
  font-size: 0.92rem;
}

.flasher-download-copy span {
  color: var(--halo-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.flasher-download-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.flasher-get-started-steps {
  color: var(--halo-subtle);
  display: grid;
  gap: 8px;
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
  padding-left: 1.1rem;
}

.flasher-get-started-steps code {
  color: var(--halo-cyan);
  font-size: 0.82rem;
}

.flasher-get-started-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.flasher-get-started-signin {
  text-decoration: none;
}

.flasher-get-started-all-link {
  color: var(--halo-cyan);
  font-size: 0.84rem;
  text-underline-offset: 3px;
}

.flasher-get-started-loading,
.flasher-download-fallback {
  color: var(--halo-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.flasher-download-fallback a {
  color: var(--halo-cyan);
}

.flasher-platform-tip {
  background: rgba(0, 180, 229, 0.05);
  border: 1px solid rgba(0, 180, 229, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
}

.flasher-platform-tip-header {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.flasher-platform-tip-icon {
  align-items: center;
  color: var(--halo-cyan);
  display: inline-flex;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.flasher-platform-tip-icon svg {
  height: 100%;
  width: 100%;
}

.flasher-platform-tip-title {
  color: var(--halo-cyan);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flasher-platform-tip-text {
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0 0 8px;
}

.flasher-platform-tip-list {
  color: #94a3b8;
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
  padding-left: 18px;
}

.flasher-platform-tip-list li {
  margin-bottom: 4px;
}

.flasher-platform-tip-list li:last-child {
  margin-bottom: 0;
}

.flasher-platform-tip-list strong {
  color: #f1f5f9;
}

.flasher-platform-tip-list code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--halo-cyan);
  font-size: 0.76rem;
  padding: 1px 4px;
}

.devices-flasher-banner {
  border-bottom: 1px solid rgb(0 180 229 / 0.12);
  padding: 16px 22px 14px;
}

.devices-flasher-banner-btn {
  align-items: center;
  appearance: none;
  background: linear-gradient(135deg, rgb(0 180 229 / 0.1), rgb(0 180 229 / 0.04));
  border: 1px solid rgb(0 180 229 / 0.24);
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
  width: 100%;
}

.devices-flasher-banner-btn:hover {
  background: linear-gradient(135deg, rgb(0 180 229 / 0.14), rgb(0 180 229 / 0.06));
  border-color: rgb(0 180 229 / 0.38);
}

.devices-flasher-banner-icon {
  align-items: center;
  color: var(--halo-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.devices-flasher-banner-icon svg {
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  fill: none;
  width: 20px;
}

.devices-flasher-banner-copy-wrap {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}

.devices-flasher-banner-title {
  color: var(--halo-text);
  font-size: 0.92rem;
}

.devices-flasher-banner-copy {
  color: var(--halo-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.devices-flasher-banner-chevron {
  color: var(--halo-cyan);
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
}

.flasher-download-modal-sub {
  color: var(--halo-muted);
  font-size: 0.84rem;
  margin: 4px 0 0;
}

.flasher-download-modal-body {
  background: linear-gradient(160deg, rgb(3 23 38 / 0.6), rgb(12 19 29 / 0.85));
  border: 1px solid rgb(0 180 229 / 0.1);
  border-radius: 12px;
  margin: 0;
  padding: 18px 20px;
}

.flasher-download-modal-header {
  align-items: flex-start;
}

/* ── OS switcher tabs ──────────────────────────────────────────────── */

.flasher-os-switcher {
  display: flex;
  gap: 8px;
}

.flasher-os-tab {
  align-items: center;
  appearance: none;
  background: rgb(3 23 38 / 0.5);
  border: 1px solid rgb(0 180 229 / 0.12);
  border-radius: 8px;
  color: var(--halo-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 0;
  font-size: 0.82rem;
  gap: 8px;
  justify-content: center;
  padding: 8px 12px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.flasher-os-tab:hover {
  background: rgb(0 180 229 / 0.06);
  border-color: rgb(0 180 229 / 0.25);
  color: var(--halo-subtle);
}

.flasher-os-tab.is-active {
  background: rgb(0 180 229 / 0.1);
  border-color: rgb(0 180 229 / 0.35);
  color: var(--halo-text);
}

.flasher-os-tab-icon {
  display: inline-flex;
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.flasher-os-tab-icon svg {
  height: 100%;
  width: 100%;
}

.flasher-os-tab-label {
  font-weight: 600;
}

.flasher-os-tab-detected {
  background: rgb(0 180 229 / 0.14);
  border-radius: 4px;
  color: var(--halo-cyan);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .flasher-download-row {
    align-items: stretch;
    flex-direction: column;
  }

  .flasher-download-btn {
    justify-content: center;
    width: 100%;
  }

  .devices-flasher-banner {
    padding-inline: 16px;
  }

  .flasher-download-modal-body {
    margin-inline: 0;
    padding: 16px;
  }

  .flasher-os-switcher {
    flex-wrap: wrap;
  }

  .flasher-os-tab {
    font-size: 0.76rem;
    padding: 7px 8px;
  }
}

.auth-form {
  text-align: left;
}

.auth-field {
  margin-bottom: 20px;
}

.auth-field label {
  display: block;
  color: var(--halo-subtle);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  background: rgba(3, 12, 30, 0.55);
  border: 1px solid var(--halo-border-strong);
  color: #fff;
  border-radius: var(--halo-radius-control);
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-field input:focus {
  outline: none;
  background: rgba(3, 12, 30, 0.85);
  border-color: rgba(0, 180, 229, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 180, 229, 0.2);
}

.auth-error {
  background: rgba(255, 23, 68, 0.1);
  border: 1px solid rgba(255, 23, 68, 0.2);
  color: #ff8a80;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 20px;
  text-align: center;
}

.auth-help-text {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--halo-subtext);
}

.password-requirements {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 180, 229, 0.12);
  border-radius: 8px;
  background: rgba(0, 180, 229, 0.035);
}

.password-req {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--halo-muted);
  font-size: 0.8rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.password-req-box {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  border-radius: 4px;
  background: rgba(12, 19, 29, 0.45);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.password-req-box::after {
  content: '';
  position: absolute;
  inset: 2px 0 3px 4px;
  width: 4px;
  height: 8px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.password-req.is-met {
  color: var(--halo-green);
}

.password-req.is-met .password-req-box {
  border-color: color-mix(in srgb, var(--halo-green) 75%, white);
  background: color-mix(in srgb, var(--halo-green) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--halo-green) 12%, transparent);
}

.password-req.is-met .password-req-box::after {
  border-color: var(--halo-green);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.auth-submit {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  font-size: 1rem;
}

.auth-switch {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--halo-subtle);
}

.auth-switch-btn {
  background: none;
  border: none;
  color: var(--halo-cyan);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 8px;
}

.auth-switch-btn:hover {
  text-decoration: underline;
}

/* User Menu Header */
.header-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 0;
}

.header-icon-button {
  align-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: var(--halo-text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  margin: 0;
  padding: 0;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
  width: 38px;
}

.header-icon-button:hover,
.header-icon-button:focus-visible,
.header-icon-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .36);
  box-shadow: none;
  color: #fff;
  transform: translateY(-1px);
}

.header-icon-button:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 2px; }

.notification-bell {
  position: relative;
}

.notification-bell-icon {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 19px;
  min-height: 19px;
  padding: 2px 4px;
  border: 2px solid var(--halo-bg, #0c131d);
  border-radius: 999px;
  background: #ff5d6c;
  color: white;
  font-size: 11px;
  font-weight: 700;
}

.notification-badge.is-updated { animation: notification-badge-pop .42s cubic-bezier(.2, .85, .35, 1.35); }

@keyframes notification-badge-pop {
  0% { transform: scale(.72); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.notification-toast-region {
  display: grid;
  pointer-events: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: calc(74px + env(safe-area-inset-top, 0px));
  width: min(420px, calc(100vw - 32px));
  z-index: 90;
}

.notification-toast {
  --notification-toast-accent: var(--halo-cyan);
  animation: notification-toast-arrive .3s cubic-bezier(.2, .8, .3, 1);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--notification-toast-accent) 15%, transparent), transparent 48%),
    rgba(7, 19, 31, .97);
  border: 1px solid color-mix(in srgb, var(--notification-toast-accent) 38%, rgba(255, 255, 255, .1));
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42), 0 0 22px color-mix(in srgb, var(--notification-toast-accent) 9%, transparent);
  display: grid;
  column-gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 14px;
  pointer-events: auto;
  position: relative;
}

.notification-toast::before {
  background: var(--notification-toast-accent);
  content: '';
  height: 2px;
  inset: 0 0 auto;
  position: absolute;
}

.notification-toast-warning { --notification-toast-accent: #ffc45c; }
.notification-toast-critical { --notification-toast-accent: #ff6575; }
.notification-toast.is-leaving { animation: notification-toast-leave .18s ease forwards; }
.notification-toast-icon {
  align-items: center;
  align-self: center;
  background: color-mix(in srgb, var(--notification-toast-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--notification-toast-accent) 30%, transparent);
  border-radius: 11px;
  color: var(--notification-toast-accent);
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.notification-toast-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; width: 21px; }
.notification-toast-content { display: grid; gap: 3px; grid-column: 2; grid-row: 1; min-width: 0; }
.notification-toast-eyebrow { color: var(--notification-toast-accent); font-size: .61rem; font-weight: 750; letter-spacing: .085em; text-transform: uppercase; }
.notification-toast-content strong { color: #f4f9ff; font-size: .9rem; line-height: 1.25; }
.notification-toast-body { color: var(--halo-subtext); display: -webkit-box; font-size: .78rem; line-height: 1.38; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.notification-toast-content small { color: var(--halo-muted); font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-toast-actions { align-self: end; display: flex; grid-column: 3; grid-row: 1; justify-content: flex-end; }
.notification-toast-action,
.notification-toast-close { background: transparent; border: 0; color: var(--halo-subtle); cursor: pointer; font: inherit; }
.notification-toast-action {
  align-items: center;
  background: color-mix(in srgb, var(--notification-toast-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--notification-toast-accent) 27%, transparent);
  border-radius: 9px;
  color: var(--notification-toast-accent);
  display: inline-flex;
  font-size: .7rem;
  font-weight: 750;
  gap: 7px;
  justify-content: center;
  min-height: 32px;
  padding: 4px 6px 4px 9px;
  white-space: nowrap;
}
.notification-toast-action:hover,
.notification-toast-action:focus-visible {
  background: color-mix(in srgb, var(--notification-toast-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--notification-toast-accent) 48%, transparent);
}
.notification-toast-action:disabled { cursor: wait; opacity: .55; }
.notification-toast-action-icon {
  align-items: center;
  background: color-mix(in srgb, var(--notification-toast-accent) 13%, transparent);
  border-radius: 6px;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  transition: transform .16s ease;
  width: 22px;
}
.notification-toast-action-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.notification-toast-action:not(.is-mark-read):hover .notification-toast-action-icon,
.notification-toast-action:not(.is-mark-read):focus-visible .notification-toast-action-icon { transform: translateX(2px); }
.notification-toast-close { align-items: center; border-radius: 7px; display: inline-flex; height: 32px; justify-content: center; position: absolute; right: 8px; top: 8px; width: 32px; }
.notification-toast-close:hover,
.notification-toast-close:focus-visible { background: rgba(255, 255, 255, .07); color: #f4f9ff; }
.notification-toast-action:focus-visible,
.notification-toast-close:focus-visible { outline: 2px solid var(--notification-toast-accent); outline-offset: 1px; }
.notification-toast-close svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 17px; }

@keyframes notification-toast-arrive {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes notification-toast-leave {
  to { opacity: 0; transform: translateY(-7px) scale(.985); }
}

@media (max-width: 560px) {
  .notification-toast-region {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    top: calc(66px + env(safe-area-inset-top, 0px));
    width: auto;
  }
  .notification-toast { column-gap: 10px; grid-template-columns: 36px minmax(0, 1fr) 40px; padding: 12px; }
  .notification-toast-icon { height: 36px; width: 36px; }
  .notification-toast-actions { grid-column: 3; }
  .notification-toast-action { min-height: 40px; padding: 0; width: 40px; }
  .notification-toast-action-label { display: none; }
  .notification-toast-action-icon { background: transparent; }
  .notification-toast-close { height: 40px; width: 40px; }
}

.auth-modal.notification-modal {
  background:
    radial-gradient(circle at 90% 0, rgba(0, 180, 229, .08), transparent 32%),
    var(--halo-panel);
  border-color: rgba(0, 180, 229, .16);
  border-radius: 18px;
  max-height: min(780px, 90dvh);
  overflow: hidden;
  padding: 0;
}

#notification-settings-modal .notification-modal { max-width: 760px; overflow-y: auto; }

.notification-modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin: 0;
  padding: 16px 18px 14px;
}
.notification-modal:focus { outline: none; }
.notification-modal .auth-modal-close { align-items: center; display: inline-flex; height: 44px; justify-content: center; width: 44px; }
.notification-modal .auth-modal-close:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 2px; }

.notification-title-group {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.notification-title-icon {
  align-items: center;
  background: linear-gradient(145deg, rgba(0, 180, 229, .18), rgba(0, 140, 255, .08));
  border: 1px solid rgba(0, 180, 229, .28);
  border-radius: 10px;
  color: var(--halo-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.notification-title-icon svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 22px;
}

.notification-title-icon-settings { color: #8ebcff; }
.notification-center-summary { color: var(--halo-subtle); font-size: .78rem; margin: 3px 0 0; }
.notification-center-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 10px 16px 8px;
}
.notification-bulk-actions { align-items: center; display: flex; gap: 2px; }

.notification-filter {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  display: inline-flex;
  padding: 3px;
}

.notification-filter-btn,
.notification-text-action {
  background: transparent;
  border: 0;
  color: var(--halo-subtle);
  cursor: pointer;
  font: inherit;
}

.notification-filter-btn {
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  min-height: 40px;
  padding: 7px 12px;
}

.notification-filter-btn.is-active {
  background: rgba(0, 180, 229, .12);
  color: var(--halo-cyan);
}

.notification-text-action { color: var(--halo-cyan); font-size: .78rem; font-weight: 600; min-height: 40px; padding: 8px; }
.notification-text-action-danger { color: #ff8a98; }
.notification-text-action-danger:hover:not(:disabled),
.notification-text-action-danger:focus-visible { background: rgba(255, 93, 108, .09); border-radius: 7px; color: #ff9daa; }
.notification-filter-btn:focus-visible,
.notification-text-action:focus-visible,
.notification-item-action:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 2px; }
.notification-text-action:disabled { cursor: default; opacity: .38; }
.notification-inbox {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  max-height: min(560px, calc(90dvh - 190px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 14px 14px;
  width: 100%;
}

.notification-device-group {
  background: linear-gradient(150deg, rgba(28, 45, 61, .92), rgba(13, 25, 36, .96));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.notification-device-group-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 58px;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.notification-device-group-toggle:hover { background: rgba(0, 180, 229, .035); }
.notification-device-group-toggle:focus-visible { outline-offset: -3px; }
.notification-device-group:not(.has-stack) .notification-device-group-toggle { cursor: default; }
.notification-device-group:not(.has-stack) .notification-device-group-toggle:hover { background: transparent; }
.notification-device-group-copy { display: grid; gap: 1px; min-width: 0; }
.notification-device-group-copy strong { color: #f2f8ff; font-size: .84rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-device-group-copy small { color: var(--halo-muted); font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-device-group-count {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  color: var(--halo-subtle);
  font-size: .64rem;
  font-weight: 650;
  padding: 4px 8px;
  white-space: nowrap;
}
.notification-device-group-chevron { align-items: center; color: var(--halo-muted); display: inline-flex; transition: transform .18s ease; }
.notification-device-group-chevron svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; }
.notification-device-group.is-collapsed .notification-device-group-chevron { transform: rotate(-90deg); }
.notification-device-stack {
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  padding: 0 7px 7px;
  position: relative;
  width: 100%;
}
.notification-device-group.is-expanded .notification-device-stack { border-top: 1px solid rgba(0, 180, 229, .12); padding-top: 7px; }
.notification-device-group.is-expanded.is-revealing .notification-swipe-row { animation: notification-stack-reveal .2s ease both; }
.notification-device-group.is-expanded.is-revealing .notification-swipe-row:nth-child(2) { animation-delay: 25ms; }
.notification-device-group.is-expanded.is-revealing .notification-swipe-row:nth-child(n + 3) { animation-delay: 45ms; }

@keyframes notification-stack-reveal {
  from { opacity: .2; transform: translateY(-7px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-swipe-row {
  box-sizing: border-box;
  border-radius: 13px;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition: max-height .22s ease, margin .22s ease, opacity .18s ease;
  width: 100%;
  z-index: 1;
}

.notification-swipe-row.is-dismissed { max-height: 0; opacity: 0; }
.notification-swipe-action {
  align-items: center;
  background: linear-gradient(90deg, #d23e55, #ff5d6c);
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: .75rem;
  font-weight: 700;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: opacity .12s ease;
  width: 104px;
}
.notification-swipe-action-read {
  background: linear-gradient(90deg, #009bb5, #00bfd8);
  inset: 0 auto 0 0;
}
.notification-swipe-action-clear {
  background: linear-gradient(90deg, #d23e55, #ff5d6c);
  inset: 0 0 0 auto;
}

.notification-swipe-row.is-swiping-right .notification-swipe-action-read,
.notification-swipe-row.is-swipe-reading .notification-swipe-action-read,
.notification-swipe-row.is-swiping-left .notification-swipe-action-clear,
.notification-swipe-row.is-dismissing .notification-swipe-action-clear { opacity: 1; }

.notification-item {
  --notification-swipe-x: 0px;
  align-items: center;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  position: relative;
  width: 100%;
  padding: 11px 9px 11px 12px;
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-control);
  background: var(--halo-panel-inner);
  box-shadow: 0 0 0 transparent;
  color: inherit;
  text-align: left;
  touch-action: pan-y;
  transform: translateX(var(--notification-swipe-x));
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
  .notification-item:hover,
  .notification-item:focus-within {
    background: #152433;
    border-color: rgba(0, 180, 229, .3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 180, 229, .05);
  }

  .notification-item.is-unread:hover,
  .notification-item.is-unread:focus-within {
    background: linear-gradient(100deg, rgba(0, 180, 229, .15), rgba(18, 34, 48, .98) 48%);
    border-color: rgba(0, 180, 229, .4);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .26), 0 0 18px rgba(0, 180, 229, .08);
  }

  .notification-item:hover .notification-item-icon,
  .notification-item:focus-within .notification-item-icon {
    transform: scale(1.05);
  }

  .notification-item:hover .notification-item-open strong,
  .notification-item:focus-within .notification-item-open strong {
    color: #fff;
  }
}

.notification-swipe-row.is-swiping .notification-item { transition: none; }
.notification-swipe-row.is-marked-read .notification-item { border-color: rgba(0, 180, 229, .28); }
.notification-item.is-unread { background: linear-gradient(100deg, rgba(0, 180, 229, .095), rgba(17, 29, 41, .98) 48%); border-color: rgba(0, 180, 229, .2); }
.notification-item-icon {
  align-items: center;
  background: rgba(102, 133, 159, .14);
  border: 1px solid rgba(102, 133, 159, .24);
  border-radius: 10px;
  color: #91aabd;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition: transform .2s ease;
  width: 34px;
}
.notification-item-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; width: 18px; }
.notification-critical .notification-item-icon { background: rgba(255, 93, 108, .12); border-color: rgba(255, 93, 108, .25); color: #ff7887; }
.notification-warning .notification-item-icon { background: rgba(255, 196, 92, .1); border-color: rgba(255, 196, 92, .24); color: #ffc45c; }
.notification-item-open { background: transparent; border: 0; color: inherit; cursor: pointer; display: grid; gap: 4px; min-width: 0; padding: 0; text-align: left; }
.notification-item-open strong { color: #f2f8ff; font-size: .88rem; line-height: 1.25; }
.notification-item-latest {
  color: var(--halo-cyan);
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.notification-item-body { color: var(--halo-subtext); font-size: .8rem; line-height: 1.35; }
.notification-item small { color: var(--halo-muted); font-size: .69rem; }
.notification-item-meta-row { align-items: center; display: flex; min-width: 0; }
.notification-item-actions {
  align-self: stretch;
  display: flex;
  gap: 2px;
}
.notification-item-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--halo-muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-width: 40px;
  padding: 0;
}
.notification-item-read:hover, .notification-item-read:focus-visible { background: rgba(0, 180, 229, .09); color: var(--halo-cyan); }
.notification-item-clear:hover, .notification-item-clear:focus-visible { background: rgba(255, 93, 108, .1); color: #ff7887; }
.notification-item-action svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }
.notification-swipe-hint { color: var(--halo-muted); display: block; font-size: .68rem; margin: -4px 16px 10px; text-align: center; }
.notification-empty { align-items: center; color: var(--halo-subtle); display: flex; flex-direction: column; gap: 5px; justify-content: center; min-height: 180px; padding: 24px 16px; text-align: center; }
.notification-empty strong { color: #edf6ff; font-size: .92rem; }
.notification-empty > span:last-child { font-size: .78rem; }
.notification-empty-icon { align-items: center; background: rgba(0, 180, 229, .08); border: 1px solid rgba(0, 180, 229, .18); border-radius: 999px; color: var(--halo-cyan); display: inline-flex; font-size: 1.2rem; height: 48px; justify-content: center; margin-bottom: 7px; width: 48px; }
.notification-permission-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  margin: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.notification-permission-card p { margin: 5px 0 0; color: var(--muted, #9fb0bf); }
#notification-enable.is-dismiss { background: rgba(0, 180, 229, .08); border-color: rgba(0, 180, 229, .22); box-shadow: none; color: var(--halo-cyan); }
#notification-enable.is-dismiss:hover { background: rgba(0, 180, 229, .14); border-color: rgba(0, 180, 229, .35); }
.notification-device-label { color: var(--halo-subtle); display: block; font-size: .72rem; font-weight: 650; letter-spacing: .035em; margin: 0 16px 6px; text-transform: uppercase; }
.notification-device-select {
  appearance: none;
  -webkit-appearance: none;
  width: calc(100% - 32px);
  padding: 10px 42px 10px 11px;
  margin: 0 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background-color: #121d28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%239fb0bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 16px;
  color: inherit;
}
@media (forced-colors: active) {
  .notification-device-select { appearance: auto; background-image: none; padding-right: 11px; }
}
.notification-preferences-header { align-items: center; color: var(--halo-subtle); display: flex; font-size: .72rem; font-weight: 650; justify-content: space-between; letter-spacing: .035em; margin: 0 16px 6px; text-transform: uppercase; }
.notification-preferences-status { color: var(--halo-muted); font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.notification-preferences-status.is-saving { color: var(--halo-cyan); }
.notification-preferences-status.is-saved { color: var(--halo-green); }
.notification-preferences-status.is-error { color: #ff8a9b; }
.notification-preferences { --notification-event-min-width: 180px; --notification-event-column: minmax(var(--notification-event-min-width), 1fr); --notification-destinations-width: 0px; background: rgba(255, 255, 255, .025); background-clip: padding-box; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; display: block; margin: 0 16px 8px; overflow-x: auto; overscroll-behavior-inline: contain; }
.notification-routing-row { display: grid; grid-template-columns: var(--notification-event-column) repeat(var(--notification-destination-count), minmax(118px, 132px)); min-width: calc(var(--notification-event-min-width) + var(--notification-destinations-width)); width: 100%; }
.notification-routing-row + .notification-routing-row { border-top: 1px solid rgba(255, 255, 255, .065); }
.notification-installation-heading.is-new,
.notification-routing-cell.is-new { animation: notification-installation-arrive .32s ease both; }
@keyframes notification-installation-arrive {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.notification-routing-header { background: #172432; }
.notification-routing-event-heading,
.notification-preference-copy { background: #172432; left: 0; position: sticky; z-index: 2; }
.notification-routing-event-heading { align-items: center; color: var(--halo-muted); display: flex; font-size: .67rem; font-weight: 700; letter-spacing: .04em; padding: 10px 12px; text-transform: uppercase; }
.notification-installation-heading { align-items: center; border-left: 1px solid rgba(255, 255, 255, .065); display: grid; gap: 3px; justify-items: center; min-width: 0; padding: 9px 7px; text-align: center; transition: opacity .18s ease; }
.notification-in-app-heading { background: rgba(0, 180, 229, .035); }
.notification-installation-heading strong { color: #eef7ff; font-size: .72rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-installation-heading small { color: var(--halo-muted); font-size: .6rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-device-name-row { align-items: center; display: flex; justify-content: center; max-width: 118px; min-width: 0; }
.notification-device-name-row strong { min-width: 0; }
.notification-device-rename { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--halo-muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 24px; justify-content: center; margin-right: -4px; padding: 4px; width: 24px; }
.notification-device-rename:hover, .notification-device-rename:focus-visible { background: rgba(0, 180, 229, .09); color: var(--halo-cyan); }
.notification-device-rename:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 1px; }
.notification-device-rename:disabled { cursor: wait; opacity: .45; }
.notification-device-rename svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }
.notification-installation-master { align-items: center; color: var(--halo-subtle); cursor: pointer; display: flex; font-size: .64rem; font-weight: 650; gap: 5px; margin-top: 3px; }
.notification-preference-copy { display: grid; gap: 3px; min-height: 58px; min-width: 0; padding: 10px 12px; }
.notification-preference-copy strong { color: #eef7ff; font-size: .84rem; }
.notification-preference-copy small, .notification-empty { color: var(--muted, #9fb0bf); font-size: .7rem; line-height: 1.35; }
.notification-routing-cell { align-items: center; border-left: 1px solid rgba(255, 255, 255, .055); cursor: pointer; display: flex; justify-content: center; min-height: 58px; padding: 8px; transition: background .18s ease, opacity .18s ease; }
.notification-in-app-cell { background: rgba(0, 180, 229, .018); }
.notification-routing-cell:hover { background: rgba(0, 180, 229, .035); }
.notification-routing-cell.is-disabled,
.notification-installation-heading.is-disabled { opacity: .42; }
.notification-routing-empty { align-items: center; color: var(--halo-subtle); display: flex; flex-direction: column; gap: 5px; min-height: 140px; justify-content: center; padding: 24px; text-align: center; }
.notification-routing-empty strong { color: #edf6ff; font-size: .86rem; }
.notification-routing-empty span { font-size: .74rem; max-width: 330px; }
.notification-routing-hint { color: var(--halo-muted); display: none; font-size: .64rem; margin: 0 16px 10px; text-align: right; }
.notification-settings-footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: var(--halo-muted);
  display: flex;
  font-size: .7rem;
  gap: 9px;
  line-height: 1.4;
  margin-top: 10px;
  padding: 12px 16px 14px;
}
.notification-retention-icon { align-items: center; color: var(--halo-cyan-dim); display: inline-flex; flex: 0 0 auto; }
.notification-retention-icon svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 17px; }
.notification-toggle { display: inline-flex; flex: 0 0 auto; position: relative; }
.notification-toggle-input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.notification-toggle-track { background: #344250; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; display: block; height: 24px; position: relative; transition: background .18s ease, border-color .18s ease; width: 42px; }
.notification-toggle-track::after { background: #d4dde5; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); content: ''; height: 18px; left: 2px; position: absolute; top: 2px; transition: background .18s ease, transform .18s ease; width: 18px; }
.notification-toggle-input:checked + .notification-toggle-track { background: rgba(0, 183, 214, .55); border-color: rgba(0, 180, 229, .55); }
.notification-toggle-input:checked + .notification-toggle-track::after { background: #fff; transform: translateX(18px); }
.notification-toggle-input:focus-visible + .notification-toggle-track { outline: 2px solid var(--halo-cyan); outline-offset: 3px; }
.notification-toggle-input:disabled + .notification-toggle-track { cursor: not-allowed; filter: grayscale(.5); }
.notification-toggle-track-small { height: 19px; width: 34px; }
.notification-toggle-track-small::after { height: 13px; width: 13px; }
.notification-toggle-input:checked + .notification-toggle-track-small::after { transform: translateX(15px); }

@media (max-width: 620px) {
  #notification-center-modal.auth-modal-overlay,
  #notification-settings-modal.auth-modal-overlay { align-items: flex-end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .notification-modal { border-bottom: 0; border-radius: 20px 20px 0 0; max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); }
  .notification-modal-header { padding: 14px 14px 12px; }
  .notification-title-icon { border-radius: 10px; height: 38px; width: 38px; }
  .notification-center-actions { padding: 9px 12px 7px; }
  .notification-bulk-actions { gap: 0; }
  .notification-text-action { padding-inline: 6px; }
  .notification-inbox { max-height: calc(100dvh - 176px - env(safe-area-inset-bottom)); padding: 2px 8px calc(12px + env(safe-area-inset-bottom)); scrollbar-gutter: auto; }
  .notification-device-group-toggle { gap: 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; }
  .notification-device-group-count { grid-column: 1; justify-self: start; margin-top: -5px; }
  .notification-device-group-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .notification-device-stack { padding-inline: 5px; }
  .notification-item { padding: 10px 6px 10px 10px; }
  .notification-item-action { min-width: 40px; }
  .notification-filter-btn, .notification-text-action { min-height: 44px; }
  .notification-item-action { min-width: 44px; }
  .notification-swipe-hint { display: block; margin: -8px 16px calc(11px + env(safe-area-inset-bottom)); }
  .notification-permission-card { align-items: stretch; flex-direction: column; margin: 12px; }
  .notification-device-label, .notification-preferences-header { margin-inline: 12px; }
  .notification-device-select { margin-inline: 12px; width: calc(100% - 24px); }
  .notification-preferences { --notification-event-min-width: 154px; margin: 0 0 6px; border-left: 0; border-radius: 0; border-right: 0; }
  .notification-preferences-header { margin-bottom: 7px; }
  .notification-routing-hint { display: block; margin-inline: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .notification-preference-copy { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .notification-toast,
  .notification-toast.is-leaving { animation: none; }
  .notification-toast-action-icon { transition: none; }
  .notification-device-group.is-expanded.is-revealing .notification-swipe-row { animation: none; }
  .notification-device-group-chevron,
  .notification-device-stack,
  .notification-item,
  .notification-item-icon { transition: none; }
  .notification-installation-heading.is-new,
  .notification-routing-cell.is-new { animation: none; }
}

.user-menu {
  flex: 0 0 auto;
  position: relative;
}

/* Icon-only by default so the avatar shares the same edge inset as the logo. */
.user-menu-btn {
  position: relative;
}

.user-avatar {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.user-avatar svg {
  display: block;
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

.user-menu-dropdown {
  background:
    radial-gradient(circle at 100% 0, rgba(0, 180, 229, .08), transparent 38%),
    var(--halo-panel);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--halo-radius-tile);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  margin-top: 10px;
  min-width: 280px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
  visibility: hidden;
  width: min(320px, calc(100vw - 24px));
  z-index: 100;
}

.user-menu-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-dropdown[hidden] { display: none; }

.user-menu-identity {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  gap: 11px;
  min-width: 0;
  padding: 16px;
}

.user-menu-identity-avatar {
  align-items: center;
  background: linear-gradient(145deg, rgba(0, 180, 229, .18), rgba(0, 140, 255, .08));
  border: 1px solid rgba(0, 180, 229, .26);
  border-radius: 11px;
  color: var(--halo-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.user-menu-identity-avatar svg,
.dropdown-item svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.user-menu-identity-avatar svg { height: 20px; width: 20px; }
.user-menu-identity-copy { display: grid; gap: 3px; min-width: 0; }
.user-menu-identity-label { color: var(--halo-muted); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.user-menu-email { color: #f2f8ff; font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-items { padding: 6px; }

.dropdown-item {
  align-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: .84rem;
  font-weight: 550;
  gap: 11px;
  min-height: 44px;
  padding: 10px 11px;
  text-align: left;
  width: 100%;
}

.dropdown-item svg { color: var(--halo-subtle); flex: 0 0 auto; height: 18px; width: 18px; }
.dropdown-item:hover, .dropdown-item:focus-visible { background: rgba(0, 180, 229, .07); color: #fff; outline: none; }
.dropdown-item:hover svg, .dropdown-item:focus-visible svg { color: var(--halo-cyan); }

.dropdown-divider {
  border: none;
  border-top: 1px solid var(--halo-border);
  margin: 0;
}

.dropdown-item-danger {
  color: #ff8a80;
  border-radius: 0;
  padding-inline: 17px;
}

.dropdown-item-danger:hover {
  background: rgba(255, 23, 68, 0.1);
}

.dropdown-item-danger svg { color: currentColor; }

@media (max-width: 520px) {
  .header-icon-button { height: 38px; width: 38px; }
  .user-menu-dropdown { position: fixed; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 57px); width: min(320px, calc(100vw - 24px)); }
}

/* Shared UI dialog lightbox */
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 20, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ui-dialog-overlay[hidden] {
  display: none !important;
}

.ui-dialog {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  max-width: 420px;
  padding: 22px;
  position: relative;
  width: 100%;
}

.ui-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ui-dialog-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 650;
  margin: 0;
}

.ui-dialog-close {
  background: none;
  border: none;
  color: var(--halo-muted);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px;
}

.ui-dialog-close:hover {
  color: #fff;
}

.ui-dialog-message {
  color: var(--halo-subtle);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 18px;
}

.ui-dialog-message[hidden] {
  display: none !important;
}

.ui-dialog-input-wrap {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.ui-dialog-input-wrap[hidden] {
  display: none !important;
}

.ui-dialog-input-label {
  color: var(--halo-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ui-dialog-input {
  background: rgba(8, 14, 22, .72);
  border: 1px solid var(--halo-border);
  border-radius: 2px;
  color: #fff;
  font: inherit;
  font-size: .9rem;
  padding: 10px 12px;
  width: 100%;
}

.ui-dialog-input:focus-visible {
  outline: 2px solid var(--halo-accent, #4db6ac);
  outline-offset: 2px;
}

.ui-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ui-dialog-actions .btn-danger,
.btn-danger {
  background: rgba(255, 23, 68, 0.16);
  border-color: rgba(255, 23, 68, 0.45);
  color: #ff8a9b;
}

.ui-dialog-actions .btn-danger:hover:not(:disabled) {
  background: rgba(255, 23, 68, 0.28);
  color: #fff;
}

/* Auth Modals */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 20, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-modal {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 180, 229, 0.06);
  padding: 24px;
  width: 100%;
  max-width: 440px;
  position: relative;
}

.auth-modal-wide {
  max-width: 600px;
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.auth-modal-header h2 {
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
}

.auth-modal-close {
  background: none;
  border: none;
  color: var(--halo-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.auth-modal-close:hover {
  color: #fff;
}

.auth-modal-desc {
  color: var(--halo-subtle);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Auth Key Modal */
.auth-modal.auth-key-modal {
  max-width: 560px;
  overflow: hidden;
  padding: 0;
}

.auth-key-modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin: 0;
  padding: 18px 20px 16px;
}

.auth-key-title-group {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.auth-key-title-icon {
  align-items: center;
  background: rgba(0, 180, 229, .1);
  border: 1px solid rgba(0, 180, 229, .25);
  border-radius: 12px;
  color: var(--halo-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.auth-key-title-icon svg,
.auth-key-guidance-icon svg,
.auth-key-icon-action svg,
.auth-key-copy-btn svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 21px;
}

.auth-key-summary { color: var(--halo-subtle); font-size: .78rem; margin: 3px 0 0; }
.auth-key-modal .auth-modal-close { align-items: center; display: inline-flex; flex: 0 0 auto; height: 44px; justify-content: center; width: 44px; }
.auth-key-modal .auth-modal-close:focus-visible,
.auth-key-icon-action:focus-visible,
.auth-key-copy-btn:focus-visible,
.auth-key-regen-btn:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 2px; }

.auth-key-modal-body { padding: 16px 20px 20px; }

.auth-key-guidance {
  align-items: flex-start;
  background: linear-gradient(145deg, rgba(15, 31, 44, .9), rgba(12, 25, 36, .96));
  border: 1px solid rgba(120, 169, 194, .18);
  border-radius: 13px;
  display: flex;
  gap: 11px;
  margin-bottom: 16px;
  padding: 13px;
}

.auth-key-guidance-icon {
  align-items: center;
  background: rgba(51, 214, 159, .09);
  border: 1px solid rgba(51, 214, 159, .18);
  border-radius: 10px;
  color: #55dcb0;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.auth-key-guidance strong { color: #eef5f8; display: block; font-size: .84rem; }
.auth-key-guidance p { color: #8fa6b5; font-size: .74rem; line-height: 1.45; margin: 4px 0 0; }
.auth-key-label { color: #9eb0bc; display: block; font-size: .7rem; font-weight: 650; letter-spacing: .035em; margin: 0 0 6px 2px; text-transform: uppercase; }

.auth-key-display {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) 44px auto;
}

.auth-key-code {
  background: #0c1924;
  border: 1px solid rgba(120, 169, 194, .24);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--halo-cyan);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .82rem;
  min-width: 0;
  padding: 0 12px;
  width: 100%;
}

.auth-key-code:focus { border-color: rgba(0, 180, 229, .5); outline: 2px solid rgba(0, 180, 229, .14); outline-offset: 1px; }
.auth-key-icon-action,
.auth-key-copy-btn,
.auth-key-regen-btn { cursor: pointer; font: inherit; min-height: 44px; }

.auth-key-icon-action {
  align-items: center;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(120, 169, 194, .2);
  border-radius: 10px;
  color: #9fb3c0;
  display: inline-flex;
  justify-content: center;
  width: 44px;
}

.auth-key-icon-action:hover:not(:disabled), .auth-key-icon-action.is-visible { background: rgba(0, 180, 229, .09); color: var(--halo-cyan); }
.auth-key-copy-btn { align-items: center; background: rgba(0, 180, 229, .1); border: 1px solid rgba(0, 180, 229, .24); border-radius: 10px; color: var(--halo-cyan); display: inline-flex; font-size: .77rem; font-weight: 650; gap: 7px; justify-content: center; padding: 0 13px; }
.auth-key-copy-btn:hover:not(:disabled) { background: rgba(0, 180, 229, .16); border-color: rgba(0, 180, 229, .38); }
.auth-key-icon-action:disabled, .auth-key-copy-btn:disabled, .auth-key-regen-btn:disabled { cursor: wait; opacity: .45; }

.auth-key-status { color: #7f97a7; font-size: .69rem; line-height: 1.4; margin: 8px 2px 16px; min-height: 1.4em; }
.auth-key-status.is-success { color: #55dcb0; }
.auth-key-status.is-error { color: #ff9daa; }

.auth-key-danger {
  align-items: center;
  background: rgba(255, 93, 108, .045);
  border: 1px solid rgba(255, 93, 108, .14);
  border-radius: 13px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px;
}

.auth-key-danger strong { color: #f0dfe2; display: block; font-size: .8rem; }
.auth-key-danger p { color: #9f858a; font-size: .69rem; line-height: 1.45; margin: 3px 0 0; max-width: 330px; }
.auth-key-regen-btn { background: rgba(255, 93, 108, .08); border: 1px solid rgba(255, 93, 108, .24); border-radius: 9px; color: #ff9daa; flex: 0 0 auto; font-size: .73rem; font-weight: 650; padding: 8px 12px; }
.auth-key-regen-btn:hover:not(:disabled) { background: rgba(255, 93, 108, .14); border-color: rgba(255, 93, 108, .38); }

@media (max-width: 620px) {
  #auth-key-modal.auth-modal-overlay { align-items: flex-end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .auth-modal.auth-key-modal { border-bottom: 0; border-radius: 20px 20px 0 0; max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); }
  .auth-key-modal-header { padding: 14px 14px 12px; }
  .auth-key-title-icon { border-radius: 10px; height: 38px; width: 38px; }
  .auth-key-modal-body { overflow-y: auto; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .auth-key-danger { align-items: stretch; flex-direction: column; }
  .auth-key-danger p { max-width: none; }
  .auth-key-regen-btn { width: 100%; }
}

@media (max-width: 440px) {
  .auth-key-display { grid-template-columns: minmax(0, 1fr) 44px; }
  .auth-key-copy-btn { grid-column: 1 / -1; }
}

/* Devices Modal */
.auth-modal.devices-modal {
  display: flex;
  flex-direction: column;
  max-height: min(82dvh, 760px);
  max-width: 720px;
  overflow: hidden;
  padding: 0;
}

.devices-modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 20px 16px;
}

.devices-modal-title-group {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.devices-modal-title-icon {
  align-items: center;
  background: rgba(0, 180, 229, .1);
  border: 1px solid rgba(0, 180, 229, .25);
  border-radius: 12px;
  color: var(--halo-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.devices-modal-title-icon svg,
.managed-device-icon svg,
.managed-device-remove svg,
.devices-modal-state-icon svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 21px;
}

.devices-modal-summary {
  color: var(--halo-subtle);
  font-size: .78rem;
  margin: 3px 0 0;
}

.devices-modal .auth-modal-close {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.devices-modal .auth-modal-close:focus-visible,
.managed-device-remove:focus-visible,
.devices-modal-retry:focus-visible {
  outline: 2px solid var(--halo-cyan);
  outline-offset: 2px;
}

.devices-modal-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
}

.managed-device-card {
  background: linear-gradient(145deg, rgba(15, 31, 44, .92), rgba(12, 25, 36, .98));
  border: 1px solid rgba(120, 169, 194, .2);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

.managed-device-card:hover { border-color: rgba(0, 180, 229, .3); }
.managed-device-card.is-removing { opacity: .55; transform: scale(.985); }

.managed-device-card.is-dragging {
  border-color: rgba(0, 180, 229, .35);
  box-shadow: 0 0 0 1px rgba(0, 180, 229, .2);
  opacity: .3;
  transform: scale(.96);
}

.managed-device-card.drag-over {
  border-color: var(--halo-cyan);
  box-shadow: 0 0 0 1px var(--halo-cyan), 0 8px 24px rgba(0, 180, 229, .22);
  transform: translateY(-2px) scale(1.01);
}

.managed-device-header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.managed-device-identity {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.managed-device-actions {
  align-items: center;
  display: flex;
  gap: 6px;
}

.managed-device-order-controls {
  align-items: center;
  background: rgba(120, 169, 194, .08);
  border: 1px solid rgba(120, 169, 194, .16);
  border-radius: 7px;
  display: inline-flex;
  flex-direction: row;
  flex: 0 0 auto;
  overflow: hidden;
}

.managed-device-drag-handle {
  align-items: center;
  background: transparent;
  border-right: 1px solid rgba(120, 169, 194, .12);
  color: #71899a;
  cursor: grab;
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  padding: 0 4px;
  transition: color .15s ease, background .15s ease;
  user-select: none;
  width: 22px;
}

.managed-device-drag-handle:hover {
  background: rgba(0, 180, 229, .08);
  color: var(--halo-cyan);
}

.managed-device-drag-handle:active {
  cursor: grabbing;
}

.managed-device-drag-handle svg {
  fill: currentColor;
  height: 16px;
  width: 16px;
}

.managed-device-stepper-group {
  display: inline-flex;
  flex-direction: column;
}

.managed-device-move-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: #8ba4b5;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  padding: 0;
  transition: background .16s ease, color .16s ease;
  width: 26px;
}

.managed-device-move-btn:hover:not(:disabled),
.managed-device-move-btn:focus-visible {
  background: rgba(0, 180, 229, .15);
  color: var(--halo-cyan);
}
.managed-device-move-btn:focus-visible {
  outline: 2px solid var(--halo-cyan);
  outline-offset: -1px;
}
.managed-device-move-btn.managed-device-move-up {
  border-bottom: 1px solid rgba(120, 169, 194, .12);
}
.managed-device-move-btn:disabled {
  cursor: default;
  opacity: .18;
}
.managed-device-move-btn svg {
  fill: none;
  height: 12px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 12px;
}

.managed-device-icon {
  align-items: center;
  background: color-mix(in srgb, var(--use-case-accent, var(--halo-cyan)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--use-case-accent, var(--halo-cyan)) 28%, transparent);
  border-radius: 10px;
  color: var(--use-case-accent, var(--halo-cyan));
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.managed-device-copy { display: grid; gap: 3px; min-width: 0; }
.managed-device-copy strong { color: #f4f8fb; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.managed-device-copy code { color: #8ba4b5; font-size: .7rem; overflow-wrap: anywhere; }

.managed-device-name-row {
  align-items: center;
  display: flex;
  gap: 5px;
  min-width: 0;
}

.managed-device-rename {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #8ba4b5;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  padding: 5px;
  width: 28px;
}

.managed-device-rename:hover:not(:disabled),
.managed-device-rename:focus-visible { background: rgba(0, 180, 229, .09); color: var(--halo-cyan); }
.managed-device-rename:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 1px; }
.managed-device-rename:disabled { cursor: wait; opacity: .5; }
.managed-device-rename svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }

.managed-device-remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #a6b5c0;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  margin: -2px -4px 0 0;
  transition: background .16s ease, color .16s ease;
  width: 44px;
}

.managed-device-remove:hover:not(:disabled) { background: rgba(255, 93, 108, .1); color: #ff8a98; }
.managed-device-remove:disabled { cursor: wait; opacity: .5; }

.managed-device-status {
  align-items: center;
  align-self: flex-start;
  background: rgba(139, 164, 181, .09);
  border: 1px solid rgba(139, 164, 181, .13);
  border-radius: 999px;
  color: #a9bbc7;
  display: inline-flex;
  font-size: .67rem;
  font-weight: 650;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 8px;
}

.managed-device-status::before {
  background: currentColor;
  border-radius: 50%;
  content: '';
  height: 6px;
  width: 6px;
}

.managed-device-status.is-active { background: rgba(51, 214, 159, .09); border-color: rgba(51, 214, 159, .18); color: #55dcb0; }
.managed-device-status.is-pending { background: rgba(255, 184, 77, .08); border-color: rgba(255, 184, 77, .16); color: #f5bc65; }

.managed-device-meta {
  border-top: 1px solid rgba(255, 255, 255, .065);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  margin: 12px 0 0;
  padding-top: 11px;
}

.managed-device-meta div { display: grid; gap: 3px; min-width: 0; }
.managed-device-meta dt { color: #718b9d; font-size: .64rem; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.managed-device-meta dd { color: #c7d4dc; font-size: .74rem; margin: 0; overflow-wrap: anywhere; }

.devices-modal-state {
  align-items: center;
  color: var(--halo-subtle);
  display: flex;
  flex-direction: column;
  gap: 7px;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 250px;
  padding: 32px 20px;
  text-align: center;
}

.devices-modal-state strong { color: #eef5f8; font-size: .95rem; }
.devices-modal-state > span:last-of-type { font-size: .78rem; line-height: 1.45; max-width: 320px; }
.devices-modal-state-icon { align-items: center; background: rgba(0, 180, 229, .08); border: 1px solid rgba(0, 180, 229, .16); border-radius: 50%; color: var(--halo-cyan); display: inline-flex; height: 48px; justify-content: center; margin-bottom: 4px; width: 48px; }
.devices-modal-error .devices-modal-state-icon { background: rgba(255, 93, 108, .08); border-color: rgba(255, 93, 108, .16); color: #ff8a98; }

.devices-modal-spinner {
  animation: devices-modal-spin .8s linear infinite;
  border: 2px solid rgba(0, 180, 229, .18);
  border-radius: 50%;
  border-top-color: var(--halo-cyan);
  height: 28px;
  margin-bottom: 6px;
  width: 28px;
}

.devices-modal-retry {
  background: rgba(0, 180, 229, .1);
  border: 1px solid rgba(0, 180, 229, .24);
  border-radius: 9px;
  color: var(--halo-cyan);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  margin-top: 8px;
  min-height: 42px;
  padding: 8px 16px;
}

.devices-modal-footer {
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #718b9d;
  flex: 0 0 auto;
  font-size: .68rem;
  line-height: 1.4;
  margin: 0;
  padding: 11px 20px 13px;
  text-align: center;
}

@keyframes devices-modal-spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  #devices-modal.auth-modal-overlay { align-items: flex-end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .auth-modal.devices-modal { border-bottom: 0; border-radius: 20px 20px 0 0; max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); }
  .devices-modal-header { padding: 14px 14px 12px; }
  .devices-modal-title-icon { border-radius: 10px; height: 38px; width: 38px; }
  .devices-modal-list { grid-template-columns: minmax(0, 1fr); padding: 10px 8px 12px; }
  .managed-device-card { border-radius: 13px; padding: 12px; }
  .managed-device-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .devices-modal-state { min-height: 280px; }
  .devices-modal-footer { padding: 10px 16px calc(11px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .devices-modal-spinner { animation-duration: 1.6s; }
  .managed-device-card { transition: none; }
}

/* Shared module chrome, actions, and durable activity surfaces. */
.module-header,
.activity-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
}

.data-section > .module-header { margin-bottom: 11px; }

.module-title-group,
.activity-title-group {
  align-items: center;
  display: flex;
  gap: 11px;
  min-width: 0;
}

.module-title-group > div,
.activity-title-group > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.module-header-icon {
  align-items: center;
  background: rgba(0, 180, 229, .075);
  border: 1px solid rgba(0, 180, 229, .24);
  border-radius: 999px;
  color: var(--halo-cyan);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.module-header-icon-climate { color: #3ddac5; border-color: rgba(61, 218, 197, .3); background: rgba(61, 218, 197, .075); }
.module-header-icon-water { color: #69f0ae; border-color: rgba(105, 240, 174, .28); background: rgba(105, 240, 174, .07); }
.module-header-icon svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }

.basic-board-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.basic-climate-metric { --data-tile-accent: #3ddac5; }
.basic-climate-readings { display: grid; flex: 1 1 auto; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.basic-climate-reading { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.basic-climate-reading + .basic-climate-reading { border-left: 1px solid rgba(61, 218, 197, .16); margin-left: 18px; padding-left: 18px; }
.basic-reading-label { color: var(--halo-muted); font-size: .62rem; font-weight: 750; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }
.basic-climate-reading .metric-value-row { margin: 7px 0 4px; }

.basic-accelerometer-metric {
  --data-tile-accent: var(--halo-green);
  display: grid;
  gap: 10px;
  min-height: 0;
}
.basic-accelerometer-metric .metric-header { margin-bottom: 0; }
.basic-accelerometer-metric .part-number { align-self: center; }

.accelerometer {
  display: grid;
  gap: 10px;
  min-height: 0;
}
.accelerometer .metric-header { margin-bottom: 0; }

.accel-instrument {
  --accel-accent: var(--data-tile-accent, var(--halo-green));
  align-items: center;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--accel-accent) 12%, transparent), transparent 52%),
    rgba(4, 18, 26, .72);
  border: 1px solid color-mix(in srgb, var(--accel-accent) 28%, transparent);
  border-radius: 11px;
  display: grid;
  gap: 10px 18px;
  grid-template-columns: 6rem minmax(0, 1fr);
  padding: 14px 14px 14px 12px;
}

.accel-orientation {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 11px;
  justify-self: center;
  min-width: 0;
  padding: 2px 4px;
  text-align: center;
}

.accel-status {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  width: 100%;
}

.accel-instrument .accel-orientation-title {
  color: #e8fff0;
  display: block;
  font-size: .78rem;
  font-variant-numeric: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  text-shadow: none;
}

.accel-instrument .accel-orientation-detail {
  color: var(--halo-muted);
  display: block;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.accel-tilt-indicator {
  --tilt-x: 0;
  --tilt-y: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--accel-accent) 36%, transparent) 50%, transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--accel-accent) 36%, transparent) 50%, transparent calc(50% + .5px)),
    rgba(2, 12, 18, .82);
  border: 1px solid color-mix(in srgb, var(--accel-accent) 42%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .38), 0 0 14px color-mix(in srgb, var(--accel-accent) 16%, transparent);
  flex: 0 0 auto;
  height: 48px;
  overflow: hidden;
  position: relative;
  width: 48px;
}

.accel-tilt-bubble {
  background: var(--accel-accent);
  border: 1px solid rgba(225, 255, 235, .82);
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accel-accent) 58%, transparent);
  height: 9px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(calc(-50% + var(--tilt-x) * 14px), calc(-50% + var(--tilt-y) * 14px));
  transition: transform 180ms ease, background-color 180ms ease, opacity 180ms ease;
  width: 9px;
}

.accel-axes {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.accel-axis {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: .85rem minmax(0, 1fr) auto;
  min-width: 0;
}

.accel-axis-label {
  color: var(--halo-muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.accel-axis-track {
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .42) 50%, transparent calc(50% + .5px)),
    rgba(0, 180, 229, .05);
  border-radius: 999px;
  height: 6px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.accel-axis-fill {
  background: var(--accel-accent, var(--halo-green));
  border-radius: inherit;
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transition: left 160ms ease, width 160ms ease, background-color 180ms ease;
  width: 0;
}

.accel-axis-fill.negative { background: var(--halo-cyan); }

.accel-axis-value {
  align-items: baseline;
  color: var(--halo-subtle);
  display: inline-flex;
  font-size: .72rem;
  gap: 2px;
  justify-content: flex-end;
  min-width: 3.35rem;
  white-space: nowrap;
}

.accel-axis-value strong {
  color: #f2f8ff;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.accel-axis-value small {
  color: var(--halo-muted);
  font-size: .58rem;
  font-weight: 600;
}

.accel-instrument.is-moving {
  background:
    radial-gradient(circle at 18% 50%, rgba(0, 180, 229, .08), transparent 52%),
    rgba(4, 18, 26, .72);
  border-color: rgba(0, 180, 229, .22);
}

.accel-instrument.is-moving .accel-orientation-title { color: #c8f8ff; }
.accel-instrument.is-moving .accel-orientation-detail { color: rgba(0, 180, 229, .72); }
.accel-instrument.is-moving .accel-tilt-bubble { background: var(--halo-cyan); }
.accel-instrument.is-unavailable .accel-orientation-title { color: var(--halo-subtle); }
.accel-instrument.is-unavailable .accel-tilt-bubble { opacity: .25; }

@media (max-width: 420px) {
  .accel-instrument {
    gap: 10px 14px;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    padding: 12px 12px 12px 10px;
  }

  .accel-orientation { gap: 9px; padding-inline: 2px; }
  .accel-status { gap: 4px; }
  .accel-tilt-indicator { height: 42px; width: 42px; }
  .accel-axis-value { min-width: 3rem; }
  .accel-axis-value strong { font-size: .74rem; }
}

.basic-camera-section { display: grid; gap: 13px; }
.basic-camera-header { align-items: center; }
.basic-camera-capture {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 10.75rem;
  white-space: nowrap;
  width: 10.75rem;
}
.basic-camera-capture span { white-space: nowrap; }
.basic-camera-eyebrow-row { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.basic-camera-button-indicator {
  align-items: center;
  background: rgba(0, 180, 229, .045);
  border: 1px solid rgba(0, 180, 229, .16);
  border-radius: 999px;
  color: var(--halo-muted);
  display: inline-flex;
  font-size: .62rem;
  gap: 5px;
  letter-spacing: 0;
  line-height: 1;
  padding: 4px 7px;
  text-transform: none;
}
.basic-camera-button-dot { align-self: center; background: #7890a3; border-radius: 50%; flex: 0 0 6px; height: 6px; transition: background-color .12s ease, box-shadow .12s ease; width: 6px; }
.basic-camera-button-indicator strong { align-items: center; color: #dcecf5; display: inline-flex; font-size: inherit; line-height: 1; margin: 0; }
.basic-camera-button-indicator small { color: #7890a3; font-size: inherit; }
.basic-camera-button-indicator.is-pressed { background: rgba(0, 180, 229, .09); border-color: rgba(0, 180, 229, .34); }
.basic-camera-button-indicator.is-pressed .basic-camera-button-dot { background: var(--halo-cyan); box-shadow: 0 0 8px var(--halo-cyan); }
.basic-camera-button-indicator.is-pressed strong { color: var(--halo-cyan); }
.basic-camera-stage { display: grid; gap: 8px; min-width: 0; width: 100%; }
.basic-camera-frame {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: #02080e;
  border: 1px solid rgba(0, 180, 229, .2);
  border-radius: 13px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.basic-camera-image { height: 100%; image-rendering: auto; object-fit: contain; width: 100%; }
.basic-camera-placeholder { align-items: center; color: #7890a3; display: flex; flex-direction: column; gap: 7px; padding: 24px; text-align: center; }
.basic-camera-placeholder[hidden] { display: none; }
.basic-camera-placeholder svg { fill: none; height: 45px; stroke: #4a738e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 45px; }
.basic-camera-placeholder strong { color: #c5dce9; font-size: .92rem; }
.basic-camera-placeholder span { font-size: .74rem; }
.basic-camera-nav {
  align-items: center;
  background: rgba(2, 8, 14, .78);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #f2fbff;
  cursor: pointer;
  display: flex;
  font-size: 2rem;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
}
.basic-camera-nav:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 2px; }
.basic-camera-previous { left: 10px; }
.basic-camera-next { right: 10px; }
.basic-camera-selected-meta { align-items: center; color: var(--halo-muted); display: flex; font-size: .72rem; gap: 10px; justify-content: space-between; min-height: 38px; }
.basic-camera-selected-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basic-camera-selected-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 6px; }
.basic-camera-download,
.basic-camera-delete {
  background: rgba(7, 22, 34, .54);
  border-color: rgba(113, 145, 169, .25);
  color: var(--halo-muted);
  height: 34px;
  min-height: 34px;
  padding: 0;
  width: 34px;
}
.basic-camera-download:hover { color: var(--halo-cyan); }
.basic-camera-delete:hover:not(:disabled) {
  background: rgba(255, 23, 68, .1);
  border-color: rgba(255, 93, 108, .42);
  color: #ff9aa8;
}
.basic-camera-gallery {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  min-width: 0;
}
.basic-camera-thumbnail {
  aspect-ratio: 4 / 3;
  background: #02080e;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.basic-camera-thumbnail:hover,
.basic-camera-thumbnail:focus-visible { border-color: rgba(0, 180, 229, .68); outline: none; }
.basic-camera-thumbnail.is-selected { border-color: var(--halo-cyan); box-shadow: 0 0 0 2px rgba(0, 180, 229, .15); }
.basic-camera-thumbnail img { height: 100%; object-fit: cover; width: 100%; }
.basic-camera-thumbnail-time { background: linear-gradient(transparent, rgba(0, 0, 0, .86)); bottom: 0; color: #fff; font-size: .6rem; left: 0; padding: 14px 6px 5px; position: absolute; right: 0; text-align: left; }
.basic-camera-thumbnail-loading { align-items: center; color: #7890a3; display: flex; font-size: .66rem; height: 100%; justify-content: center; padding: 8px; }
.basic-camera-gallery-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.basic-camera-expand { min-height: 40px; min-width: 11rem; }
.basic-camera-pagination { align-items: center; display: flex; gap: 8px; }
.basic-camera-pagination .btn { min-height: 40px; min-width: 5.75rem; }
.basic-camera-page-status { color: var(--halo-muted); font-size: .72rem; min-width: 6.5rem; text-align: center; }
.basic-camera-meta { color: var(--halo-muted); display: flex; flex-wrap: wrap; font-size: .72rem; gap: 8px 18px; justify-content: space-between; }
.basic-camera-status { color: #c8f7ff; font-weight: 700; }

.module-eyebrow,
.activity-kicker {
  color: var(--halo-cyan);
  display: block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.module-title,
.activity-title {
  color: #f2fbff;
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
  text-transform: none;
}

.module-description,
.activity-description {
  color: var(--halo-muted);
  font-size: .72rem;
  line-height: 1.4;
  margin: 0;
}

.activity-surface {
  background: linear-gradient(145deg, rgba(9, 24, 37, .7), rgba(4, 13, 22, .52));
  border: 1px solid rgba(143, 183, 232, .16);
  border-radius: 14px;
  display: grid;
  gap: 13px;
  padding: 15px;
}

.mailbox-activity.activity-surface,
.water-activity.activity-surface { margin-top: 1.25rem; }

.activity-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.activity-actions .btn { min-height: 38px; padding: 7px 11px; }

.activity-table-wrap {
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  height: min(18rem, 42vh);
  min-height: 12rem;
  overflow: auto;
  position: relative;
  scrollbar-gutter: stable;
}

.activity-table-wrap:focus-visible {
  border-color: rgba(0, 180, 229, .48);
  box-shadow: 0 0 0 3px rgba(0, 180, 229, .1);
  outline: none;
}

.environment-csv-link { min-width: 10rem; }
.btn[aria-busy="true"] { cursor: progress; }

.activity-table-wrap[aria-busy="true"]::after {
  background: rgba(4, 13, 22, .9);
  border: 1px solid rgba(0, 180, 229, .22);
  border-radius: 999px;
  color: var(--halo-cyan);
  content: "Updating…";
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .04em;
  padding: 4px 8px;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 4;
}

.activity-table { border-collapse: collapse; font-size: .82rem; width: 100%; }
.activity-table th,
.activity-table td { padding: .66rem .82rem; text-align: left; vertical-align: middle; white-space: nowrap; }
.activity-table thead th {
  background: hsl(215, 30%, 12%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  color: var(--halo-muted);
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .07em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 2;
}
.activity-table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .05); }
.activity-empty td { color: var(--halo-muted); font-style: normal; padding: 1.15rem .82rem; }
.event-chip { border-radius: 999px; display: inline-flex; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; }

/* Shared select controls use one readable hit target and chevron across every use case. */
select.ui-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(2, 12, 21, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%239fb0bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 15px;
  border: 1px solid var(--halo-border-strong);
  border-radius: var(--halo-radius-control);
  color: var(--halo-text);
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.25;
  min-height: 44px;
  min-width: 7rem;
  padding: 10px 42px 10px 12px;
  text-overflow: ellipsis;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
select.ui-select:hover:not(:disabled) { background-color: rgba(6, 24, 38, .96); border-color: var(--halo-cyan-dim); }
select.ui-select:focus-visible { border-color: var(--halo-cyan); box-shadow: 0 0 0 3px rgba(0, 180, 229, .12); outline: none; }
select.ui-select:disabled { cursor: not-allowed; opacity: .58; }
.environment-range-label .ui-select,
.environment-chart-modal-range-label .ui-select,
.radar-range-select-label .ui-select,
.radar-controls .ui-select { width: 100%; }

@media (forced-colors: active) {
  select.ui-select { appearance: auto; background-image: none; padding-right: 12px; }
}

@media (hover: hover) {
  .activity-table tbody tr:not(.activity-empty):hover td { background: rgba(255, 255, 255, .025); color: #f2fbff; }
  .btn:hover:not(:disabled) { will-change: transform; }
}

/* Old samples remain readable and occupy the exact same geometry as live readings. */
.device-card.sample-old .metric,
.device-card.sample-old .accelerometer,
.device-card.sample-old .gate-panel,
.device-card.sample-old .mailbox-status-card,
.device-card.sample-old .water-status-card,
.device-card.sample-old .environment-metric {
  filter: saturate(.62);
}
.device-card.sample-old .metric,
.device-card.sample-old .accelerometer,
.device-card.sample-old .gate-panel,
.device-card.sample-old .environment-metric { border-color: rgba(255, 171, 0, .24); }
.sample-state.old { background: rgba(255, 171, 0, .09); border-color: rgba(255, 171, 0, .36); color: #ffe09a; }
.environment-health-badge.is-offline { background: rgba(255, 171, 0, .09); border-color: rgba(255, 171, 0, .34); color: #ffe09a; }

@media (max-width: 640px) {
  select.ui-select { background-position: right 15px center; font-size: 1rem; min-height: 48px; padding: 11px 46px 11px 13px; }
  .module-header,
  .activity-header { align-items: flex-start; }
  .activity-header { flex-direction: column; }
  .activity-actions { width: 100%; }
  .activity-actions .btn { flex: 1 1 auto; min-height: 48px; }
  .activity-surface { padding: 12px; }
  .activity-table-wrap { border: 0; height: min(26rem, 56vh); max-height: none; min-height: 16rem; overflow: auto; }
  .activity-table { min-width: 0 !important; }
  .activity-table thead { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .activity-table tbody { display: grid; gap: 8px; }
  .activity-table tbody tr { background: rgba(1, 9, 17, .48); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  .activity-table tbody td { border: 0 !important; display: grid; gap: 3px; min-width: 0; padding: 9px 10px; white-space: normal; }
  .activity-table tbody td::before { color: #7890a3; content: attr(data-label); font-size: .58rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
  .activity-table tbody tr.activity-empty { display: block; }
  .activity-table tbody tr.activity-empty td { display: block; }
  .activity-table tbody tr.activity-empty td::before { content: none; }

  .environment-history-pagination { align-items: stretch; flex-direction: column; gap: 12px; padding: 12px; }
  .environment-history-page-size-label { justify-content: space-between; width: 100%; }
  .environment-history-page-size-label .ui-select { flex: 0 0 7.5rem; width: 7.5rem; }
  .environment-history-page-actions { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(44px, 1fr)); width: 100%; }
  .environment-history-page-actions .btn { font-size: 1rem; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
  .environment-history-page-status { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; min-height: 40px; }
  .history-page-action-label { display: none; }

  /* Phone layouts share one reading column across every use case. Keep this rule
     authoritative so a spanning desktop tile cannot create an implicit squeezed column. */
  .metrics,
  .basic-board-grid,
  .mailbox-status-cards,
  .water-status-cards,
  .environment-metrics,
  .environment-charts,
  .environment-threshold-grid,
  .radar-live-grid,
  .radar-controls,
  .doppler-controls,
  .radar-diagnostics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .basic-climate-metric,
  .environment-threshold-grid fieldset:last-child,
  .radar-controls-copy,
  .radar-control-actions,
  .radar-command-status { grid-column: auto; }

  .radio-link-quality { display: none !important; }

  .basic-camera-header { align-items: stretch; flex-direction: column; }
  .basic-camera-capture { min-height: 48px; min-width: 0; width: 100%; }
  .basic-camera-gallery { display: flex; gap: 8px; margin-inline: -2px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-gutter: stable; }
  .basic-camera-thumbnail { flex: 0 0 116px; scroll-snap-align: start; }
  .basic-camera-gallery-controls { align-items: stretch; flex-direction: column; }
  .basic-camera-expand { width: 100%; }
  .basic-camera-pagination { justify-content: center; }
  .basic-camera-selected-meta { align-items: center; flex-direction: row; }
  .basic-camera-selected-actions { display: flex; width: auto; }
  .basic-camera-download,
  .basic-camera-delete { height: 44px; min-height: 44px; width: 44px; }
  .basic-camera-load-more { min-height: 48px; width: 100%; }

  .environment-hero,
  .environment-section-header,
  .environment-settings-header { align-items: stretch; flex-direction: column; }
  .environment-action-button { min-height: 48px; width: 100%; }

  .radar-control-actions { flex-direction: column; }
  .radar-control-actions .btn { min-height: 48px; width: 100%; }
  .radar-command-status { text-align: left; }
  .radar-controls input { min-height: 48px; width: 100%; }
  .radar-controls select { min-height: 48px; }
  .radar-range-select-label { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .metric,
  .accelerometer,
  .gate-panel,
  .mailbox-status-card,
  .water-status-card,
  .environment-metric,
  .environment-chart-card,
  .view-picker-chevron { animation: none !important; scroll-behavior: auto; transition: none !important; }
}

/* The desktop workspace is narrower than its viewport when the Boards rail is present. */
@container dashboard-content (max-width: 900px) {
  .environment-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .environment-charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radio-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .radar-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-controls,
  .doppler-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .environment-board-state-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .environment-board-state-settings {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
}

@container dashboard-content (max-width: 680px) {
  .radar-hero { grid-template-columns: 64px minmax(0, 1fr); padding: 18px; }
  .radar-pulse { width: 58px; }
  .radar-health-badge { grid-column: 1 / -1; }
  .radar-live-grid,
  .radar-controls,
  .doppler-controls,
  .radar-diagnostics-grid,
  .doppler-chart-axis-copy { grid-template-columns: minmax(0, 1fr); }
  .radar-control-actions { grid-template-columns: minmax(0, 1fr); }
  .radar-command-status { text-align: left; }
}

@container dashboard-content (max-width: 420px) {
  .radio-link-card-header { align-items: flex-start; }
  .radio-link-status-group { align-items: flex-end; }
  .radio-link-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radio-frequency-reading { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .radio-link-card-header { align-items: flex-start; }
  .radio-link-status-group { align-items: flex-end; }
  .radio-link-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radio-frequency-reading { grid-column: 1 / -1; }
}

@media (max-width: 340px) {
  .radio-link-readings { grid-template-columns: minmax(0, 1fr); }
  .radio-frequency-reading { grid-column: auto; }
}


/* Account auth helpers */
.auth-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.auth-success {
  background: rgba(0, 180, 229, 0.1);
  border: 1px solid rgba(0, 180, 229, 0.25);
  color: #9be7ff;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 20px;
  text-align: center;
}

.auth-field.is-hidden,
.auth-forgot[hidden] {
  display: none !important;
}

.auth-forgot {
  margin-top: 12px;
  font-size: 0.85rem;
}

.auth-legal-notice {
  margin-top: 16px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--halo-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

.auth-legal-link {
  background: none;
  border: none;
  color: var(--halo-cyan);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  padding: 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.auth-legal-link:hover {
  color: #fff;
}

.footer-legal {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: -4px;
}

.footer-legal-btn {
  background: none;
  border: none;
  color: #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.75;
  padding: 0;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.footer-legal-btn:hover {
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}

.footer-separator {
  color: var(--halo-muted);
  font-size: 0.68rem;
  opacity: 0.5;
}

/* Legal Documents Modal */
.legal-modal-overlay {
  z-index: 2100;
}

.legal-modal-dialog {
  background: var(--halo-panel);
  border: 1px solid var(--halo-border);
  border-radius: var(--halo-radius-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  max-width: 720px;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.legal-modal-header {
  align-items: center;
  border-bottom: 1px solid var(--halo-border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 16px 20px;
}

.legal-modal-title-group {
  align-items: center;
  display: flex;
  gap: 12px;
}

.legal-modal-logo-wrap {
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.legal-modal-logo {
  border-radius: 50%;
  height: 32px;
  width: 32px;
}

.legal-modal-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.legal-modal-subtitle {
  color: var(--halo-muted);
  font-size: 0.78rem;
  margin: 2px 0 0;
}

.legal-modal-tabs {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--halo-border);
  display: flex;
  gap: 8px;
  padding: 8px 16px;
}

.legal-modal-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--halo-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.legal-modal-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.legal-modal-tab.active {
  background: rgba(0, 180, 229, 0.12);
  border-color: rgba(0, 180, 229, 0.3);
  color: var(--halo-cyan);
}

.legal-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
  scrollbar-width: thin;
}

.legal-doc-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.legal-doc-header h3 {
  color: #fff;
  font-size: 1.35rem;
  margin: 0 0 4px;
}

.legal-doc-date {
  color: var(--halo-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-doc-section {
  margin-bottom: 20px;
}

.legal-doc-section h4 {
  color: #f1f5f9;
  font-size: 0.98rem;
  margin: 0 0 8px;
}

.legal-doc-section p,
.legal-doc-section ul {
  color: #cbd5e1;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0 0 10px;
}

.legal-doc-section ul {
  padding-left: 20px;
}

.legal-doc-section li {
  margin-bottom: 6px;
}

.legal-doc-callout {
  border-radius: 6px;
  margin: 14px 0;
  padding: 12px 14px;
}

.legal-doc-callout strong {
  display: block;
  font-size: 0.84rem;
  margin-bottom: 4px;
}

.legal-doc-callout p {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.legal-doc-callout-danger {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  color: #fca5a5;
}

.legal-doc-callout-danger strong {
  color: #f87171;
}

.legal-doc-callout-info {
  background: rgba(6, 182, 212, 0.1);
  border-left: 3px solid var(--halo-cyan);
  color: #a5f3fc;
}

.legal-doc-callout-info strong {
  color: var(--halo-cyan);
}

.legal-modal-footer {
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--halo-border);
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
}

.legal-modal-footer-links {
  font-size: 0.8rem;
}

.legal-modal-footer-link {
  color: var(--halo-cyan);
  text-decoration: none;
}

.legal-modal-footer-link:hover {
  text-decoration: underline;
}

.legal-modal-done {
  min-width: 80px;
}

@media (max-width: 600px) {
  .legal-modal-dialog {
    border-radius: 16px 16px 0 0;
    max-height: calc(100dvh - 16px);
  }
  .legal-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .legal-modal-body {
    padding: 16px;
  }
}