:root {
  --bg: #0b1220;
  --bg-elevated: #0f1829;
  --surface: #141f33;
  --surface-2: #1a2740;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(212, 175, 55, 0.28);
  --text: #eef2f7;
  --muted: #94a3b8;
  --gold: #c9a227;
  --gold-bright: #e8d48b;
  --gold-dark: #8f7320;
  --ok: #22c55e;
  --bad: #ef4444;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.28);
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --topbar-h: auto;
  --topbar-main-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(201, 162, 39, 0.09), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(56, 103, 168, 0.12), transparent 50%),
    linear-gradient(180deg, #070c16 0%, var(--bg) 45%, #09101c 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
}

/* ── App shell (full page) ── */
.app {
  /* A fixed shell with one scrolling region, rather than a page that grows
     without end. The tab bar and the run progress stay where they are, and
     only the content moves — on a 400-camera fleet the old way put the tabs
     thousands of pixels above whatever you were reading. */
  height: 100vh;
  height: 100dvh;   /* dvh so a phone's address bar does not crop the last row */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: auto;
  min-height: var(--topbar-main-h);
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.topbar-row-main {
  position: relative;
  display: grid;
  /* The centre column was auto and the right one could be squeezed below its
     content, so the run controls overflowed leftwards and printed on top of
     the word PULSE. The right column is now content-sized and never squeezed;
     the brand in the middle is the one thing that may give way, and it clips
     rather than collides. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--topbar-main-h);
  padding: 0.55rem 1.25rem;
}

.topbar-center {
  min-width: 0;
  justify-self: center;
  overflow: hidden;
}

/* Below this the three of them cannot share a line honestly, so the brand
   steps aside — the tabs and the run controls are what the bar is for. */
@media (max-width: 1180px) {
  .topbar-center { display: none; }
  .topbar-row-main { grid-template-columns: minmax(0, 1fr) auto; }
}

.topbar-left {
  position: relative;
  z-index: 2;
  min-width: 0;
  justify-self: start;
}

.topbar-tabs {
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem;
  height: auto;
  gap: 0.15rem;
}

.topbar-tabs .tab {
  height: 34px;
  border-radius: 999px;
  border-bottom: none;
  padding: 0 1rem;
  font-size: 0.8rem;
}

.topbar-tabs .tab.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(166, 124, 0, 0.22));
  border-bottom-color: transparent;
}

.topbar-right {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  min-width: 0;
  justify-self: end;
}

.brand-product-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pulse-mark-sm {
  width: 18px !important;
  height: 18px !important;
}

.brand-lockup--nav .brand-usvg {
  gap: 0.65rem;
}

.brand-lockup--nav .brand-logo {
  width: 40px;
  height: 40px;
}

.brand-lockup--nav .brand-name {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.brand-lockup--nav .pulse-word {
  font-size: 0.95rem;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 1;
  min-width: 0;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
}

.brand-lockup--nav {
  gap: 0.3rem;
}

.brand-lockup--hero {
  gap: 0.75rem;
  align-items: center;
}

.brand-usvg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding-left: 0;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-lockup--hero .brand-logo {
  width: 56px;
  height: 56px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  line-height: 1.1;
}

.brand-lockup--hero .brand-name {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

.pulse-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  line-height: 1;
}

.pulse-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.22rem;
  min-width: 0;
}

.pulse-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}

.pulse-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pulse-ring {
  transform-origin: 32px 32px;
  animation: pulse-ring 1.6s ease-in-out infinite;
}

.pulse-wave {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: pulse-draw 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(232, 212, 139, 0.55));
}

.pulse-word {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f0d78c 0%, #d4af37 48%, #a67c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pulse-glow 1.6s ease-in-out infinite;
  line-height: 1;
}

.brand-lockup--nav .pulse-mark {
  width: 40px;
  height: 40px;
}

.brand-lockup--nav .pulse-word {
  font-size: 1.4rem;
}

.brand-lockup--nav .pulse-logo {
  gap: 0.65rem;
}

.topbar-center .pulse-mark {
  width: 40px;
  height: 40px;
}

.topbar-center .pulse-word {
  font-size: 1.4rem;
}

.topbar-center .pulse-logo {
  gap: 0.65rem;
}

.brand-lockup--hero .pulse-mark {
  width: 88px;
  height: 88px;
}

.brand-lockup--hero .pulse-word {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
}

.brand-lockup--hero .pulse-logo {
  gap: 1rem;
}

@keyframes pulse-ring {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  35% { opacity: 1; transform: scale(1.05); }
  55% { opacity: 0.75; transform: scale(1); }
}

@keyframes pulse-draw {
  0% { stroke-dashoffset: 120; opacity: 0.35; }
  35% { stroke-dashoffset: 0; opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0.85; }
}

@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 0.92; }
  35% { filter: drop-shadow(0 0 10px rgba(232, 212, 139, 0.45)); opacity: 1; }
}

.brand-powered {
  font-size: 0.6rem;
  color: rgba(201, 162, 39, 0.85);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-display);
  white-space: nowrap;
  line-height: 1.2;
}

.brand-lockup--hero .brand-powered {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  margin-top: 0.1rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.brand-product {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.header-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
  align-items: center;
  margin-left: 0;
}

.run-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 14, 26, 0.55);
}

.run-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.run-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.run-seg-btn:hover { color: var(--text); }
.run-seg-btn.active {
  color: var(--text);
  background: rgba(201, 162, 39, 0.22);
}

.run-go {
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  font-size: 0.82rem !important;
  min-width: 4.2rem;
}

.run-stop {
  border-radius: 999px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.8rem !important;
}

.icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(8, 14, 26, 0.45);
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.icon-btn:hover {
  color: var(--text);
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(201, 162, 39, 0.1);
}

.user-menu { position: relative; }

.user-menu-trigger {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(8, 14, 26, 0.55);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.55rem 0.25rem 0.25rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.user-menu-trigger:hover,
.user-menu.open .user-menu-trigger {
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(201, 162, 39, 0.08);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #1a1408;
  background: linear-gradient(145deg, #f0d78c, #d4af37 55%, #a67c00);
  flex-shrink: 0;
}

.user-avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}

.user-menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
}

.user-menu-name {
  font-size: 0.82rem;
  font-weight: 650;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-role {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-menu-caret {
  width: 0.35rem;
  height: 0.35rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin: 0 0.25rem 0.15rem 0;
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  width: 220px;
  padding: 0.45rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(14, 22, 38, 0.98);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 60;
}

.user-menu-dropdown[hidden] { display: none !important; }

.user-menu-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.user-menu-heading-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.user-menu-heading-role {
  font-size: 0.72rem;
  color: var(--muted);
}

.user-menu-item {
  width: 100%;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 550;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.user-menu-item:hover { background: rgba(255, 255, 255, 0.05); }
.user-menu-item.danger { color: #ffb4ae; }
.user-menu-item.danger:hover { background: rgba(248, 81, 73, 0.12); }
.user-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0.35rem;
}

.header-run {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted, #94a3b8);
}
.header-run-label { white-space: nowrap; }
.run-mode-select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border, #334155);
  background: var(--panel, #0f172a);
  color: inherit;
  max-width: 11rem;
}
.site-run-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0;
}
.site-run-label {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
}
.site-run-btns,
.cam-actions {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.site-run-btns .btn,
.cam-actions .btn {
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
}
.header-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.header-check input { accent-color: var(--accent, #38bdf8); }

.app-main {
  flex: 1;
  /* min-height:0 is what lets a flex child actually shrink and scroll;
     without it the child keeps its content height and the page grows. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  width: 100%;
  padding: 1.25rem 1.5rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.35) transparent;
}

/* A scrollbar that belongs to this page rather than to the browser. */
.app-main::-webkit-scrollbar { width: 10px; height: 10px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.app-main::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.45); background-clip: content-box; }

/* The login screen is its own page and still scrolls as one. */
#loginScreen { max-height: 100dvh; overflow-y: auto; }

/* ── Progress ── */
.check-progress {
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 24, 41, 0.95);
}

.check-progress-inner {
  padding: 0.75rem 1.5rem 0.85rem;
}

.check-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--gold-bright);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.check-progress-meta {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.check-progress-timer {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.check-progress.is-done .check-progress-timer {
  color: var(--ok, #3dd68c);
}

.check-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.check-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
  transition: width 0.25s ease;
}

.check-progress-sub {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.check-progress.is-done .check-progress-fill {
  background: linear-gradient(90deg, #15803d, #4ade80);
}

.check-progress.is-stopped .check-progress-fill {
  background: linear-gradient(90deg, #b45309, #f0a35a);
}

/* ── Tabs ── */
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 40px;
  min-width: 0;
}

.tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 1.1rem;
  height: 40px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text); }
.tab.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel[hidden] { display: none !important; }

/* ── Buttons ── */
.btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}

.btn:hover { border-color: rgba(232, 212, 139, 0.4); color: var(--gold-bright); }
.btn:disabled { opacity: 0.5; cursor: wait; }

.btn-primary {
  background: linear-gradient(180deg, #e4c86a, #b8922a);
  border-color: #8f7320;
  color: #1a1406;
}

.btn-primary:hover {
  filter: brightness(1.06);
  color: #1a1406;
  border-color: #8f7320;
}

.btn-secondary {
  background: var(--surface);
  border-color: rgba(148, 163, 184, 0.22);
}

.btn-outline {
  background: transparent;
  border-color: rgba(201, 162, 39, 0.4);
  color: var(--gold-bright);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
  color: var(--text);
}

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }

/* ── Panels ── */
.panel {
  background: rgba(20, 31, 51, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.panel-head .hint { margin: 0.25rem 0 0; }

.hint { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.75rem; }
.empty { color: var(--muted); font-style: italic; }

.summary-panel { padding-bottom: 0.85rem; }

/* ── Stats ── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

.stat-card {
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: left;
  color: inherit;
  cursor: default;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

button.stat-card {
  cursor: pointer;
  width: 100%;
}

button.stat-card:hover {
  border-color: rgba(201, 162, 39, 0.35);
  transform: translateY(-1px);
}

button.stat-card.active {
  border-color: var(--border-strong);
  background: rgba(201, 162, 39, 0.08);
}

.stat-card.ok-card.active {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.07);
}

.stat-card.bad-card.active {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.07);
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-family: var(--font-display);
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  margin-top: 0.2rem;
  line-height: 1.15;
}

.stat-value.ok { color: var(--ok); }
.stat-value.bad { color: var(--bad); }
.stat-value.muted { color: var(--muted); }
.stat-value.small { font-size: 0.98rem; font-weight: 600; margin-top: 0.4rem; }
.stat-sub { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted); }

.panel-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.select-label {
  font-size: 0.82rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.site-select,
.filter-input,
.form-grid input[type="text"],
.form-grid input[type="password"],
.form-grid input[type="email"],
.form-grid input[type="number"],
/* A bare select in these forms was never covered, so it fell back to the
   browser's own white control among otherwise dark fields. */
.form-grid select,
.manage-name,
.manage-url,
.json-paste,
.login-form input {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(8, 14, 26, 0.65);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.site-select:focus,
.filter-input:focus,
.form-grid input:focus,
.form-grid select:focus,
.login-form input:focus,
.manage-name:focus,
.manage-url:focus,
.json-paste:focus {
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12);
}

.site-select { min-width: 180px; }
.filter-input { min-width: 240px; }

/* ── Accordion ── */
.accordion { display: flex; flex-direction: column; gap: 0.55rem; }

.acc-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(8, 14, 26, 0.4);
  overflow: hidden;
}

.acc-summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  user-select: none;
}

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

.acc-chevron {
  color: var(--gold);
  transition: transform 0.15s;
  font-size: 0.85rem;
}

.acc-item[open] .acc-chevron { transform: rotate(90deg); }
.acc-title {
  font-weight: 700;
  flex: 1;
  min-width: 140px;
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.acc-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.pill {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-family: var(--font-display);
}

.ok-pill { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.bad-pill { background: rgba(239, 68, 68, 0.14); color: #f87171; }

.hdd-pill { font-weight: 600; letter-spacing: 0.02em; }
.hdd-pill.hdd-ok { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.hdd-pill.hdd-warn { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.hdd-pill.hdd-bad { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.hdd-pill.hdd-unknown { background: rgba(148, 163, 184, 0.14); color: var(--muted); }

.site-storage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.site-storage-ok { border-color: rgba(34, 197, 94, 0.2); }
.site-storage-warn { border-color: rgba(245, 158, 11, 0.25); }
.site-storage-bad { border-color: rgba(239, 68, 68, 0.25); }
.storage-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.storage-drives { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.storage-drive { font-size: 0.82rem; color: var(--text); }
.storage-drive.ok { color: #86efac; }
.storage-drive.warn { color: #fcd34d; }
.storage-drive.bad { color: #fca5a5; }
.storage-err { font-size: 0.82rem; color: #fca5a5; }

.acc-summary.site-ok { border-left: 3px solid var(--ok); }
.acc-summary.site-bad { border-left: 3px solid var(--bad); }
.acc-summary.site-mixed { border-left: 3px solid var(--gold); }

.acc-body { padding: 0 0.5rem 0.65rem; border-top: 1px solid var(--border); }

.inner-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.inner-table th, .inner-table td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.inner-table th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
}
.inner-table tr:last-child td { border-bottom: none; }
.row-down { background: rgba(239, 68, 68, 0.05); }

.file-hint { font-size: 0.82rem; color: var(--muted); }

.upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.upload-row input[type="file"] {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 100%;
}

.upload-status {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.upload-status.ok { color: var(--ok); }
.upload-status.err { color: var(--bad); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border); }
th {
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(201, 162, 39, 0.04); }

.badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: var(--font-display);
}

.badge.up { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.badge.down { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.badge.unknown { background: rgba(148, 163, 184, 0.16); color: var(--muted); }
.badge.rec-on { background: rgba(239, 68, 68, 0.18); color: #f87171; }
.badge.rec-off { background: rgba(148, 163, 184, 0.14); color: var(--muted); }
.badge.rec-err { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.badge.rec-unknown { background: rgba(148, 163, 184, 0.1); color: var(--muted); }
.muted { color: var(--muted); }

.dash-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dash-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}
.dash-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dash-meta .dot { opacity: 0.45; }

.view-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem;
}
.view-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-seg-btn:hover { color: var(--text); }
.view-seg-btn.active {
  color: var(--text);
  background: rgba(201, 162, 39, 0.22);
}
.view-seg-btn.ok.active {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}
.view-seg-btn.bad.active {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
.view-seg-n {
  margin-left: 0.3rem;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.issue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.issue-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.15rem;
}
.chip {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.65);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.chip:hover { color: var(--text); border-color: rgba(148, 163, 184, 0.45); }
.chip.active {
  color: #e2e8f0;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(14, 165, 233, 0.12);
}
.chip-n {
  display: inline-block;
  min-width: 1.1em;
  margin-left: 0.2rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}
#historySiteRollup {
  margin: 0 0 0.85rem;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.history-table th,
.history-table td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  vertical-align: top;
}
.history-table th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.history-table .err {
  max-width: 28rem;
  color: var(--muted);
  word-break: break-word;
}
.history-table tr.row-down td {
  background: rgba(239, 68, 68, 0.04);
}
.history-site-table td:nth-child(4) {
  width: 7rem;
}

.archive-banner {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.7);
}
.archive-banner-ok {
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.archive-banner-bad {
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

.snap-cell { width: 200px; vertical-align: middle; }
.snap-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  color: inherit;
  text-align: left;
  max-width: 196px;
}
.snap-thumb {
  width: 192px;
  height: 108px;
  object-fit: contain;
  object-position: center top;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.snap-btn:hover .snap-thumb {
  border-color: rgba(56, 189, 248, 0.75);
}
.snap-time {
  font-size: 0.68rem;
  color: var(--text);
  max-width: 192px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snap-time.muted { color: var(--muted); }
.snap-lag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #38bdf8;
}
.snap-none { font-size: 0.75rem; }

.snap-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.snap-lightbox[hidden] { display: none !important; }
.snap-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.82);
}
.snap-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 96vw);
  max-height: 94vh;
  overflow: auto;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.snap-lightbox-panel img {
  display: block;
  width: 100%;
  max-height: 82vh;
  margin: 0 auto;
  border-radius: 6px;
  background: #000;
  object-fit: contain;
  object-position: center center;
}
.snap-lightbox-meta {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}
.snap-lightbox-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.err {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(7, 12, 22, 0.55);
}

.footer-brand {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.footer-powered {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(201, 162, 39, 0.7);
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-display);
}

.acc-meta .site-run-btns {
  margin-left: 0.25rem;
}
.cam-actions { width: 1%; white-space: nowrap; }

/* ── Admin ── */
.admin-shell { display: flex; flex-direction: column; gap: 0.85rem; }

.admin-hero {
  padding: 0.15rem 0 0.85rem;
  border-bottom: 1px solid var(--border);
}

.admin-hero h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.admin-hero p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(8, 14, 26, 0.55);
}

.admin-nav-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  padding: 0.5rem 0.85rem;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-nav-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.admin-nav-btn.active {
  color: var(--text);
  border-color: rgba(201, 162, 39, 0.35);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(166, 124, 0, 0.18));
}

.admin-section {
  display: none;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-section.active { display: flex; }

.admin-section-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
}

.admin-section-head p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 52rem;
}

.admin-panel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(20, 31, 51, 0.72);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 1.1rem;
}

.admin-panel-card-head h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-family: var(--font-display);
}

.admin-panel-card-head p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-advanced {
  margin-top: 0.65rem;
  border: 1px dashed rgba(201, 162, 39, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(8, 14, 26, 0.28);
}

.admin-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.admin-advanced > summary::-webkit-details-marker { display: none; }
.admin-advanced[open] > summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.admin-advanced .form-grid,
.admin-advanced .admin-split,
.admin-advanced .json-paste,
.admin-advanced .modal-actions {
  padding: 0.85rem;
  margin: 0;
}

.admin-advanced-block { margin-top: 0.25rem; }

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.admin-toolbar .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-toolbar .field.grow { flex: 1; min-width: 220px; }

/* Every field reserves a line for its hint, whether or not it has one. They
   were bottom-aligned, so the one field carrying a hint sat a line higher
   than the rest and the Save button no longer lined up with its own select. */
.admin-toolbar .field-hint {
  display: block;
  min-height: 1.15em;
  line-height: 1.15;
}

.admin-toolbar .field > .combo,
.admin-toolbar .field > input,
.admin-toolbar .field > select { width: 100%; }

/* The buttons sit on the control row, not on the hint row below it. The
   offset is the hint's own line, not a round number: the gap above it
   plus its line box. A guessed 1.15em left the buttons two pixels low,
   which is exactly the kind of drift that reads as sloppy. */
.admin-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: calc(0.3rem + (1.15 * 0.82rem));
}

/* One control height across the row. The inputs came out at 38px and
   the buttons at 31px, so Save zone floated inside a row it was
   supposed to be part of. */
.admin-toolbar .filter-input,
.admin-toolbar select,
.admin-toolbar-actions > button,
.admin-toolbar-actions > select {
  min-height: 38px;
}

.admin-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.85rem;
}

.admin-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.95rem;
  background: rgba(8, 14, 26, 0.35);
}

.admin-block h4 {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-display);
}

.admin-form { margin-top: 0.5rem; }
.admin-form.tight { margin: 0 0 0.75rem; gap: 0.55rem; }

.nvr-mode-switch {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 26, 0.45);
}

.nvr-mode-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nvr-mode-btn.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(166, 124, 0, 0.35));
  color: var(--text);
}

.nvr-preview {
  font-size: 0.78rem;
  color: var(--muted);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 0.15rem 0 0.65rem;
}

.nvr-preview strong { color: var(--gold); font-weight: 600; }

.manage-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.15rem 0;
}

.col-check { width: 2rem; }
.manage-check { cursor: pointer; }

.btn-danger {
  border: 1px solid rgba(248, 81, 73, 0.45);
  background: rgba(248, 81, 73, 0.16);
  color: #ffb4ae;
}
.btn-danger:hover {
  background: rgba(248, 81, 73, 0.28);
}

.field-check {
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem !important;
  margin-top: 1.4rem;
}

.manage-name,
.manage-url {
  width: 100%;
  min-width: 140px;
  font-size: 0.84rem;
}

.manage-url {
  min-width: 260px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
}

.manage-result { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.manage-result.ok { color: var(--ok); }
.manage-result.err { color: var(--bad); }

.json-paste {
  width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
  resize: vertical;
  min-height: 140px;
}

.user-chip {
  font-size: 0.78rem;
  color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-weight: 600;
  background: rgba(201, 162, 39, 0.06);
}

.user-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ── Login (full-page split) ── */
.login-screen {
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.login-screen[hidden] { display: none !important; }

.login-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background:
    linear-gradient(160deg, rgba(201, 162, 39, 0.1), transparent 45%),
    linear-gradient(180deg, #0d1628 0%, #08101c 100%);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.login-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  pointer-events: none;
}

/* USVG above Pulse — both centered */
.login-brand-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  width: 100%;
  max-width: 560px;
}

.login-usvg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.login-usvg-logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.login-usvg-text {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}

.login-usvg-name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  line-height: 1.1;
}

.login-usvg-motto {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.25;
}

.login-brand-stack .pulse-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.login-brand-stack .pulse-mark {
  width: 88px;
  height: 88px;
}

.login-brand-stack .pulse-word {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
}

.login-brand-stack .brand-powered {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-align: left;
}

.login-brand-stack .pulse-text-col {
  align-items: flex-start;
}

.login-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 1.25rem;
}

.login-brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.login-brand-title {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.login-powered {
  display: none;
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
  padding: 2rem 1.5rem;
  background: rgba(7, 12, 22, 0.55);
}

.login-form {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.login-form-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
}

.login-form-head p {
  margin: 0.35rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}

.login-form input { width: 100%; padding: 0.7rem 0.8rem; }

.login-btn {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.75rem;
  font-size: 0.95rem;
}

.login-error {
  color: var(--bad);
  font-size: 0.88rem;
  margin: 0;
}

/* ── Forms / modal leftovers ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.85rem 0 1rem;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.form-grid label.full { grid-column: 1 / -1; }
.form-grid label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 18, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

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

.modal-backdrop {
  position: absolute;
  inset: 0;
}

.modal-dialog {
  position: relative;
  z-index: 1;
  background: var(--surface, #121c2e);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius);
  width: min(420px, 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 {
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 1rem;
}

.modal-body {
  padding: 1rem;
  margin: 0;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.25rem;
  width: min(520px, 100%);
}

.modal-content h3 {
  margin: 0 0 0.35rem;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 1rem;
}

@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-split { grid-template-columns: 1fr; }
  .topbar-row-main {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0.65rem 1rem;
    gap: 0.75rem;
  }
  .topbar-left,
  .topbar-center,
  .topbar-right {
    width: 100%;
    justify-content: center;
    justify-self: center;
  }
  .topbar-tabs { width: 100%; justify-content: center; }
  .header-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .user-menu-meta { display: none; }
  .tabs { width: 100%; height: auto; justify-content: center; }
  .tab { height: 42px; }
}

@media (max-width: 820px) {
  .login-screen {
    grid-template-columns: 1fr;
  }
  .login-brand {
    min-height: 32vh;
    padding: 2rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .login-brand-title { font-size: 1.85rem; }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .app-main { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; text-align: center; }
  .filter-input { min-width: 0; width: 100%; }
  .login-usvg {
    flex-direction: column;
    text-align: center;
  }
  .login-usvg-text { align-items: center; }
  .login-brand-stack .pulse-text-col { align-items: center; }
  .login-form-head { text-align: center; }
}

/* ── Overview dashboard (stat cards, per-site table, NVR/events split) ── */
.overview-table th, .overview-table td { white-space: nowrap; }
.overview-table td:first-child, .overview-table th:first-child { white-space: normal; }

.badge.warn { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }

.src-tag {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.12);
  border-radius: 4px;
  padding: 0.05rem 0.32rem;
  vertical-align: middle;
}

.inline-note { font-size: 0.72rem; color: var(--muted); }

.cfg-issues-card { border-color: rgba(245, 158, 11, 0.35); }
.cfg-issues-list { display: flex; flex-direction: column; gap: 0.5rem; }

.cfg-issue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.06);
}

.cfg-issue-info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cfg-issue-meta { font-size: 0.75rem; color: var(--muted); }

/* Vendor API said "offline" but RTSP worked — usually a wrong API/http_port. */
.cfg-warn {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.32rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  cursor: help;
  vertical-align: middle;
}

.overview-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0.85rem;
}

.overview-col { display: flex; flex-direction: column; }

.overview-events {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.overview-event {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.4;
}

.overview-event-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.4rem;
  background: var(--muted);
}

.overview-event-dot.down { background: var(--bad); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.overview-event-dot.up { background: var(--ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }

.overview-event-time { color: var(--muted); font-size: 0.75rem; display: block; }
.overview-event-text strong { font-weight: 600; }
.overview-event-text .ev-down { color: #f87171; }
.overview-event-text .ev-up { color: #4ade80; }

@media (max-width: 980px) {
  .overview-split { grid-template-columns: 1fr; }
}

/* ── History calendar ── */
.history-cal-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 1rem;
  align-items: start;
}

.history-cal-card {
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
}

.history-month-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
}

.hm-stat strong { color: var(--text); font-weight: 700; }
.hm-stat-ok { color: var(--ok); }
.hm-stat-bad strong { color: #f87171; }

.history-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

#historyCalPrev, #historyCalNext { font-size: 1.15rem; line-height: 1; }

.history-cal-head-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.history-cal-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
}

#historyCalToday {
  padding: 0.1rem 0.6rem;
  height: auto;
  font-size: 0.68rem;
}

.history-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}

.history-cal-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.history-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
}

.history-cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 0.8rem;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  transition: border-color 0.12s, background 0.12s;
}

.history-cal-day:hover { border-color: var(--border-strong); }
.history-cal-day.cal-pad { visibility: hidden; cursor: default; }
.history-cal-day.cal-future { color: var(--muted); cursor: default; opacity: 0.45; }
.history-cal-day.cal-today { border-color: var(--gold); }
.history-cal-day.cal-selected { background: rgba(201, 162, 39, 0.16); border-color: var(--gold-bright); }

.history-cal-day.cal-down { background: rgba(239, 68, 68, 0.14); }
.history-cal-day.cal-down:hover { border-color: rgba(239, 68, 68, 0.5); }
.history-cal-day.cal-warn { background: rgba(245, 158, 11, 0.12); }
.history-cal-day.cal-warn:hover { border-color: rgba(245, 158, 11, 0.5); }
.history-cal-day.cal-ok { background: rgba(34, 197, 94, 0.07); }

.cal-day-n { font-weight: 600; }
.cal-day-count {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--bg);
}
.history-cal-day.cal-down .cal-day-count { background: var(--bad); color: #fff; }
.history-cal-day.cal-warn .cal-day-count { background: #fbbf24; color: #1a1206; }

.history-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-dot-down { background: var(--bad); }
.cal-dot-warn { background: #fbbf24; }
.cal-dot-ok { background: var(--ok); }
.cal-dot-none { background: var(--muted); opacity: 0.5; }

.history-cal-detail { min-width: 0; }

.history-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.history-detail-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-bright);
}

@media (max-width: 980px) {
  .history-cal-layout { grid-template-columns: 1fr; }
}

/* ── 5G / LTE uplink badge ── */
.link-5g {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.36rem;
  border-radius: 4px;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.3);
  vertical-align: middle;
}

/* ── Admin notes (credential warnings etc.) ── */
.admin-note {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: var(--text);
}
.admin-note strong { color: #fbbf24; }

.admin-section-head code {
  background: rgba(148, 163, 184, 0.14);
  border-radius: 3px;
  padding: 0 0.25rem;
  font-size: 0.85em;
}

.lockout-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.lockout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

/* ── Header brand: USVG on the left, Pulse on the right, one tight lockup ── */
.brand-split {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.brand-usvg-side,
.brand-pulse-side {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.brand-split .brand-logo { width: 34px; height: 34px; }

.brand-split .brand-name {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.brand-divider {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(201,162,39,0.5), transparent);
  flex: 0 0 auto;
}

.pulse-mark-nav { width: 26px !important; height: 26px !important; }
.brand-split .pulse-word { font-size: 1.15rem; }

@media (max-width: 720px) {
  .brand-split .brand-name { display: none; }  /* keep the two marks, drop the wordmark */
}

.field-hint { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
.field-hint.ok { color: var(--ok); }
.field-hint.err { color: #f87171; }

.code-block {
  background: rgba(8, 14, 26, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  font-size: 0.76rem;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  margin: 0.4rem 0 0;
}


/* ------------------------------------------- VMS push: delivery health */
.wh-health{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.wh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.wh-stat{
  display:flex;flex-direction:column;gap:3px;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);
}
.wh-stat span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wh-stat strong{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.wh-stat-wide{grid-column:span 2}
.wh-stat-wide strong{font-size:13px;font-weight:500}
.wh-stat-bad{border-color:rgba(239,68,68,.4)}
.wh-stat-bad strong{color:var(--bad)}
.wh-ok{color:var(--ok)}
.wh-bad{color:var(--bad)}

/* ------------------------------------------ VMS sync: the change preview */
#syncPlan{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.sp-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sp-stat{
  display:flex;align-items:baseline;gap:7px;
  padding:6px 11px;border:1px solid var(--border);border-radius:99px;background:var(--surface);
}
.sp-stat span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sp-stat strong{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.sp-add{border-color:rgba(34,197,94,.45)}
.sp-add strong{color:var(--ok)}
.sp-del{border-color:rgba(239,68,68,.45)}
.sp-del strong{color:var(--bad)}
.sp-mute strong{color:var(--muted)}
.sp-h{
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin:16px 0 6px;font-weight:600;
}
.sp-list{list-style:none;padding:0;margin:0;max-height:260px;overflow-y:auto}
.sp-list li{padding:4px 0;border-bottom:1px solid var(--border);font-size:13px}
.sp-list li b{color:var(--text)}
.sp-blocked{
  border-left:3px solid var(--bad);background:rgba(239,68,68,.08);
  padding:9px 12px;margin:10px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.sp-warn{
  border-left:3px solid var(--gold);background:rgba(201,162,39,.08);
  padding:9px 12px;margin:10px 0;font-size:13px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.sp-warn ul{margin:5px 0 0;padding-left:18px}

/* ============================================================== HISTORY */
.hist-controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:3px;gap:2px}
.seg-btn{
  border:0;background:none;color:var(--muted);cursor:pointer;
  padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;
  font-family:inherit;transition:background .12s,color .12s;
}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--gold);color:#12161c}
.seg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hist-stale{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--muted);cursor:pointer}

.hist-layout{display:grid;grid-template-columns:296px 1fr;gap:22px;align-items:start}
@media (max-width:1000px){.hist-layout{grid-template-columns:1fr}}

/* ------------------------------------------------------------ calendar */
.hist-cal{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);padding:14px;position:sticky;top:12px;
}
@media (max-width:1000px){.hist-cal{position:static}}
.hist-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.hist-cal-head h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.hist-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px;
}
.hist-weekdays span{
  text-align:center;font-size:10px;font-weight:600;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;
}
.hist-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.hist-day{
  position:relative;aspect-ratio:1;display:flex;
  align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:7px;cursor:pointer;
  background:var(--bg-elevated);color:var(--text);
  font-family:inherit;font-size:12.5px;padding:0;
  transition:border-color .1s,background .1s;
}
.hist-pad{background:none;border:0;cursor:default;pointer-events:none}
.hist-day:hover:not([disabled]){border-color:var(--muted)}
.hist-day:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hist-dnum{font-variant-numeric:tabular-nums;line-height:1}
/* The count sits in the corner rather than under the date: stacked, they
   read as two numbers and you cannot tell which one is the day. */
.hist-count{
  position:absolute;top:2px;right:2px;
  min-width:13px;height:13px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;line-height:1;border-radius:7px;
  background:rgba(0,0,0,.42);color:#fff;
  font-variant-numeric:tabular-nums;
}
.hist-future{opacity:.25;cursor:default}
.hist-clear{color:var(--muted)}
/* Severity is the fill; today is a ring; selection is a gold border + lift.
   Keeping the three on different visual channels is what stops "today"
   reading as "selected". */
.hist-closed{background:rgba(201,162,39,.20)}
.hist-open{background:rgba(239,68,68,.26)}
.hist-today .hist-dnum{
  box-shadow:0 0 0 1.5px var(--muted);border-radius:50%;
  width:21px;height:21px;display:flex;align-items:center;justify-content:center;
}
.hist-selected{
  border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);
  background:var(--gold);color:#12161c;
}
.hist-selected .hist-count{background:rgba(0,0,0,.55)}
.hist-selected.hist-today .hist-dnum{box-shadow:0 0 0 1.5px rgba(0,0,0,.45)}

.hist-cal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--border);
}
.hist-legend{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
.hist-key{width:9px;height:9px;border-radius:3px;display:inline-block}
.hist-key-open{background:rgba(239,68,68,.55)}
.hist-key-closed{background:rgba(201,162,39,.5)}

.hist-month-summary{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.hist-ms-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:3px 0;font-size:12.5px;color:var(--muted);
}
.hist-ms-row b{color:var(--text);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.hist-ms-bad b{color:var(--bad)}
.hist-ms-none{margin:0;font-size:12.5px;color:var(--muted)}

/* -------------------------------------------------------------- detail */
.hist-detail{min-width:0}
.hist-detail-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.hist-detail-head h3{margin:0 0 2px;font-size:19px;font-weight:600;letter-spacing:-.015em}
.hist-detail-sub{margin:0;font-size:12.5px;color:var(--muted)}

.hist-groups{display:flex;flex-direction:column;gap:22px}
.hist-group{min-width:0}
.hist-group-head{
  display:flex;align-items:baseline;gap:10px;margin-bottom:8px;
  padding-left:9px;border-left:3px solid var(--muted);
}
.hist-group-head h4{margin:0;font-size:13.5px;font-weight:600;letter-spacing:.01em}
.hist-group-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hist-open-n{color:var(--bad);font-weight:600}
.hist-group-camera .hist-group-head{border-left-color:var(--bad)}
.hist-group-site .hist-group-head{border-left-color:#ff9d96}
.hist-group-recording .hist-group-head{border-left-color:var(--gold)}
.hist-group-storage .hist-group-head{border-left-color:#7cc0ea}

/* ------------------------------------------------- history: day digest */
/* The at-a-glance layer, always scoped to one window (a day, or the month on
   screen) and split the two ways this gets scanned. */
.hist-digest{
  margin-bottom:22px;padding:14px 16px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);
}
.dg-headline{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:13.5px;color:var(--muted);
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border);
}
.dg-headline b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.dg-window{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);background:var(--bg-elevated);
  padding:3px 9px;border-radius:4px;border:1px solid var(--border);
}
.dg-open-pill{
  margin-left:auto;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:99px;
  background:rgba(239,68,68,.16);color:var(--bad);border:1px solid rgba(239,68,68,.35);
}
.dg-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.dg-cols{grid-template-columns:1fr;gap:16px}}

.dg-col > h4{
  margin:0 0 10px;padding-left:9px;border-left:3px solid;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.dg-col-down > h4{border-left-color:var(--bad);color:var(--bad)}
.dg-col-back > h4{border-left-color:var(--ok);color:var(--ok)}

.dg-sub{margin-bottom:12px}
.dg-sub:last-child{margin-bottom:0}
.dg-sub-h{
  display:block;margin-bottom:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}
.dg-sub-h b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}

.dg-row{
  width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main tail" "names tail";
  gap:1px 10px;align-items:center;text-align:left;
  padding:6px 9px;margin-bottom:3px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--bg-elevated);color:var(--text);
  font-family:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color .1s;
}
.dg-row:hover{border-color:var(--muted)}
.dg-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* A whole-site row is banded in its OWN column's colour. Painting a recovery
   red said the opposite of what had happened. */
.dg-col-down .dg-row-site{background:rgba(239,68,68,.11);border-color:rgba(239,68,68,.30)}
.dg-col-back .dg-row-site{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.28)}
.dg-main{grid-area:main;display:flex;align-items:baseline;gap:8px;min-width:0}
.dg-site{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-what{font-size:11.5px;color:var(--muted);white-space:nowrap}
.dg-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:3px;white-space:nowrap;
}
.dg-col-down .dg-tag{color:var(--bad);background:rgba(239,68,68,.18)}
.dg-col-back .dg-tag{color:var(--ok);background:rgba(34,197,94,.16)}
.dg-names{
  grid-area:names;font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.dg-tail{grid-area:tail;text-align:right;white-space:nowrap;font-size:11.5px}
.dg-dur{color:var(--muted);font-variant-numeric:tabular-nums}
.dg-still{color:var(--bad);font-weight:600}
.dg-none{margin:0;padding:6px 9px;font-size:12.5px;color:var(--muted)}
.dg-more{margin:3px 0 0 9px;font-size:11px;color:var(--muted)}

/* The summary panel names the window it is totalling. */
.hist-ms-scope{
  margin:0 0 7px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--gold-bright);
}

/* ------------------------------------------------ history: live issues */
/* Always on screen, above the calendar. This is "now", so it never changes
   with the selected day and is styled to sit apart from the history below. */
.live-now{
  margin:0 0 18px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
}
.live-ok{border-color:rgba(34,197,94,.30);background:rgba(34,197,94,.06)}
.live-bad{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.05)}

.ln-head{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:11px 14px}
.live-bad .ln-head{border-bottom:1px solid rgba(239,68,68,.20)}
.ln-head strong{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.live-ok .ln-head strong{color:var(--ok)}
.live-bad .ln-head strong{color:var(--bad)}
.ln-sub{font-size:13px;color:var(--muted)}
.ln-sub b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ln-age{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ln-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ln-dot-ok{background:var(--ok)}
.ln-dot-bad{background:var(--bad);box-shadow:0 0 0 3px rgba(239,68,68,.18)}

.ln-rows{padding:9px 10px;display:flex;flex-direction:column;gap:3px;
  max-height:340px;overflow-y:auto}
.ln-row{
  width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main dur" "names dur";
  gap:1px 12px;align-items:center;text-align:left;
  padding:7px 10px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--bg-elevated);
  color:var(--text);font-family:inherit;font-size:13px;cursor:pointer;
  transition:border-color .1s;
}
.ln-row:hover{border-color:var(--muted)}
.ln-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ln-row-site{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.32)}
.ln-main{grid-area:main;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ln-site{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-count{font-size:11.5px;color:var(--muted);white-space:nowrap}
.ln-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 6px;border-radius:3px;white-space:nowrap;
}
.ln-tag-site{color:var(--bad);background:rgba(239,68,68,.20)}
.ln-tag-hdd{color:#7cc0ea;background:rgba(56,140,200,.20)}
.ln-tag-rec{color:var(--gold-bright);background:rgba(201,162,39,.20)}
.ln-names{
  grid-area:names;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.ln-dur{
  grid-area:dur;text-align:right;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--bad);font-variant-numeric:tabular-nums;
}

/* ── Admin ▸ API access: the endpoint map ───────────────────────────────── */
/* Method and access are read at a glance, so they are marks rather than
   words in a sentence. Colour carries meaning here — write is the one that
   can change what is monitored — so it is kept away from the gold accent. */
.api-m {
  display: inline-block;
  min-width: 3.4rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
.api-m.get  { color: #7ab8f5; background: rgba(122, 184, 245, .12); }
.api-m.post { color: #6cc79a; background: rgba(108, 199, 154, .12); }
.api-m.put  { color: #e0b457; background: rgba(224, 180, 87, .12); }
.api-m.del  { color: #e8897c; background: rgba(232, 137, 124, .12); }

.api-need {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.api-need.read  { color: var(--muted); }
.api-need.write { color: #e0b457; }

.api-map td { vertical-align: middle; }
.api-map code {
  font-size: .8rem;
  white-space: nowrap;
}

/* Webhook destinations: a URL can be long, so it wraps inside its own cell
   rather than pushing the action buttons off the table. */
.wh-url {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .78rem;
  word-break: break-all;
  max-width: 22rem;
}
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold, #c9a227);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--gold-bright, #e8d48b); }

/* Why a destination is failing, under its name. The receiver writes this
   sentence and it is the fastest route to the cause. */
.wh-why {
  margin-top: .2rem;
  font-size: .76rem;
  color: var(--bad, #ef4444);
  word-break: break-word;
  max-width: 22rem;
}
.upload-status.err { font-weight: 600; }

/* Delivery log: what each push carried, and the id both sides can trace. */
.wh-what { margin-top: .15rem; font-size: .78rem; color: var(--muted); }
.wh-id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .72rem;
  color: var(--muted);
  word-break: break-all;
}


/* Recent Events filter — same shape as the run-mode segment so the two
   read as one control family. */
.ev-filter {
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 999px;
  padding: 0.15rem;
}
.ev-filter-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ev-filter-btn:hover { color: var(--text); }
.ev-filter-btn.active {
  color: var(--text);
  background: rgba(201, 162, 39, 0.22);
}

/* Snapshot day view — the stills behind one date in Admin -> Import. */
.snapday-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0 0.5rem;
  flex-wrap: wrap;
}
.snapday-head .hint { margin: 0; }
.snapday-head .btn { margin-left: auto; }
.snapday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.7rem;
}
.snapday-cell {
  margin: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.snapday-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
.snapday-missing {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  font-size: 0.8rem;
  opacity: 0.6;
}
.snapday-cell figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.25;
}
.snapday-cam { font-weight: 600; }
.snapday-site, .snapday-when { opacity: 0.65; }
@media (max-width: 640px) {
  .snapday-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.snapday-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 0 0.7rem;
}
.snapday-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 0.25rem;
}
.snapday-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.snapday-time.active {
  border-color: rgba(120, 190, 255, 0.7);
  background: rgba(120, 190, 255, 0.14);
}
.snapday-count {
  margin-left: 0.35rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.snapday-sitepick { min-width: 230px; }
@media (max-width: 640px) {
  .snapday-sitepick { min-width: 0; width: 100%; }
}

/* ── Dialogs ──────────────────────────────────────────────────────────────
   Pulse's own confirm, alert and prompt. The browser's versions are an OS
   window: a different typeface, a different grey, our wording squeezed into
   somebody else's chrome, and on a dark portal a white box in the middle of
   the screen. They also say "localhost:8001 says", which is not a sentence
   anybody should read before deleting a site. */

.dlg-dialog { width: min(460px, 100%); }
.dlg-dialog.dlg-wide { width: min(560px, 100%); }

.dlg-body {
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
}

.dlg-text {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
  /* Messages are composed with newlines; keep them rather than collapsing
     a two-paragraph warning into one run-on line. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dlg-text + .dlg-text { color: var(--muted); font-size: 0.9rem; }

.dlg-note {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 17, 30, 0.6);
  color: var(--muted);
  font-size: 0.86rem;
  white-space: pre-wrap;
}

.dlg-field { display: grid; gap: 0.35rem; }
/* A declared display beats the browser's [hidden], so without this the prompt's
   input stayed on screen for a plain confirm — a "Value" box on "Delete site?".
   Same reason .dlg-error and .combo-list carry one. */
.dlg-field[hidden] { display: none !important; }
.dlg-note[hidden] { display: none !important; }
.dlg-field > span { font-size: 0.82rem; color: var(--muted); }
.dlg-field input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-strong, var(--border));
  background: rgba(8, 14, 25, 0.75);
  color: var(--text);
}
.dlg-field input:focus-visible {
  outline: 2px solid rgba(201, 162, 39, 0.55);
  outline-offset: 1px;
}

.dlg-error { margin: 0; color: var(--danger, #ef6b6b); font-size: 0.86rem; }
.dlg-error[hidden] { display: none; }

.dlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  background: rgba(8, 13, 24, 0.5);
}

/* A destructive confirm should not look like a save. */
.dlg-dialog.dlg-danger .modal-head h3 { color: var(--danger, #ef6b6b); }

@media (max-width: 520px) {
  .dlg-actions { justify-content: stretch; }
  .dlg-actions .btn { flex: 1 1 auto; }
}

/* ── Combobox ─────────────────────────────────────────────────────────────
   A suggestion list we draw ourselves. <datalist> is rendered by the
   browser, so on the one screen where you pick a site out of four hundred
   the list arrived as a pale native dropdown in a different font — the one
   thing on the page that did not look like the page. */

.combo { position: relative; }

.combo-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface, #121c2e);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
}

.combo-list[hidden] { display: none !important; }

.combo-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text);
}

.combo-opt:hover,
.combo-opt.active {
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold-bright, var(--text));
}

.combo-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-opt .combo-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.combo-opt mark {
  background: rgba(201, 162, 39, 0.3);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.combo-empty {
  padding: 0.55rem 0.6rem;
  color: var(--muted);
  font-style: italic;
  font-size: 0.88rem;
}

/* ── Long tables scroll inside their panel ────────────────────────────────
   Camera Health by Site and NVR / Site Status both grow with the fleet, and
   a 400-row table pushed everything under it off the screen. They now keep
   their header in place and scroll on their own. */

.table-wrap.scroll-y {
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-sm);
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.3) transparent;
}

.table-wrap.scroll-y::-webkit-scrollbar { width: 9px; }
.table-wrap.scroll-y::-webkit-scrollbar-track { background: transparent; }
.table-wrap.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Sticky headers need an opaque background or the rows show through. */
.table-wrap.scroll-y thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #111a2b;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* How many rows there are, so the scroll is obviously a scroll. */
.row-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uptime { font-variant-numeric: tabular-nums; }
.uptime.warn { color: var(--warn, #e0a33a); }
.uptime.bad { color: var(--danger, #ef6b6b); }

/* ── Event rows ───────────────────────────────────────────────────────────
   Two lines: what it was, then when it started, when it ended and how long.
   The old single line gave only the recovery time, so a row could say "back
   online 10 minutes ago" without ever saying when it had gone. */

.overview-event-text { min-width: 0; }

.ev-line {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.ev-line strong { font-weight: 600; }

.ev-at { color: var(--muted); font-weight: 400; }

.ev-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

.ev-tag.down {
  color: #ffb4b4;
  background: rgba(239, 107, 107, 0.16);
  border: 1px solid rgba(239, 107, 107, 0.3);
}

.ev-tag.up {
  color: #9fe3b5;
  background: rgba(63, 185, 110, 0.14);
  border: 1px solid rgba(63, 185, 110, 0.28);
}

.ev-when {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.ev-arrow { opacity: 0.6; }
.ev-dur { color: var(--text); }
.ev-ago { opacity: 0.75; }

.overview-event.is-open .ev-when { color: #ffc9c9; }

/* ── Open NVR ─────────────────────────────────────────────── */
/* An anchor styled as a button still has to sit on the button row, so
   it is given the line box a <button> gets rather than an inline one. */
a.nvr-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
}

.site-run-bar .nvr-link-btn { margin-right: 0.5rem; }

/* Disabled because the port is not on file. Kept visible, and kept
   explaining itself through its title. */
.nvr-link-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.nvr-link-ext {
  font-size: 0.78em;
  opacity: 0.7;
  margin-left: 0.15em;
}


/* ── Event timeline ───────────────────────────────────── */
/* One continuous line down the left with a dot per event. The line is what
   makes a list of timestamps read as a sequence rather than as rows, which
   is the whole point of showing both the drop and the recovery. */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.15rem 0;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.3) transparent;
}

.timeline::-webkit-scrollbar { width: 9px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.tl-row {
  position: relative;
  display: flex;
  gap: 0.7rem;
  padding: 0.45rem 0.2rem 0.5rem 0;
}

/* The connector, drawn behind the dots. It stops short on the last row so the
   line does not trail off into empty space. */
.tl-row::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.05rem;
  bottom: -0.5rem;
  width: 1px;
  /* Brighter than --border on purpose: this one is read as a thread
     joining the events, not as a divider between them, and at the
     divider's weight it disappeared. */
  background: rgba(148, 163, 184, 0.34);
}

.tl-row:last-child::before { display: none; }

.tl-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 0.42rem;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px var(--panel, #101827);
}

.tl-dot-bad { background: #f87171; }
.tl-dot-warn { background: #f0a848; }
.tl-dot-up { background: #4ade80; }

.tl-body { min-width: 0; flex: 1; }

.tl-when {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.tl-what {
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
}

.tl-what strong { font-weight: 600; }

.tl-site { color: var(--muted); }

.tl-verb-bad { color: #f87171; }
.tl-verb-warn { color: #f0a848; }
.tl-verb-up { color: #4ade80; }

.tl-detail { color: var(--muted); }
.tl-dur { color: var(--muted); }
.tl-open { color: #f0a848; }

/* The heading and its count sit together, so the filter chips keep the right
   side of the panel head to themselves. */
.panel-head-title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

/* ── Snapshots, by site ────────────────────────────────────── */

.snap-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.55rem 0 0.5rem;
}

.snap-toolbar .filter-input { max-width: 260px; }

/* Amber, not red: a stale picture is a camera to go and look at, not an
   outage. The outage, if there is one, is already on the dashboard. */
.snap-stale {
  color: #e0a33a;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* A camera with no picture at all is a different thing again — usually one
   that has never answered a snapshot request. */
.snap-missing {
  color: #c99;
  font-variant-numeric: tabular-nums;
}

.snap-stale-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.snap-stale-label { color: var(--muted); font-size: 0.85rem; }

.snap-stale-days { width: auto; min-width: 110px; }

.snap-stale-row .hint { margin: 0; }

/* ── Snapshot picker ──────────────────────────────────────── */

.snap-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0.6rem 0 0.9rem;
}

.snap-picker .select-label { min-width: 0; }

/* The site box is the one you type into, so it gets the room. */
.snap-picker #snapshotSiteCombo { min-width: 260px; }
.snap-picker #snapshotPickDate { min-width: 150px; }
.snap-picker #snapshotPickPass { min-width: 210px; }

/* Level with the controls, not with their labels. */
.snap-picker .hint {
  margin: 0;
  padding-bottom: 0.55rem;
}

/* The grid is capped so a 40-camera site scrolls inside the panel instead of
   turning the page into a wall of stills. */
#snapshotSiteGrid {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.3) transparent;
  padding-right: 0.2rem;
}

#snapshotSiteGrid::-webkit-scrollbar { width: 9px; }
#snapshotSiteGrid::-webkit-scrollbar-track { background: transparent; }
#snapshotSiteGrid::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* The way to the rest of the timeline. Sits inside the list, so it scrolls
   with the events and cannot be mistaken for a panel control. */
.tl-more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.2rem 0.3rem 1.4rem;
}

.tl-more .muted { font-size: 0.78rem; }