/* Sentri operator UI — dashboard aesthetic */
:root {
  --bg0: #0c0d12;
  --bg1: #14161f;
  --bg2: #1b1e2a;
  --surface: var(--bg1);
  --border: #2a3142;
  --text: #e8eaef;
  --muted: #8b95a8;
  --accent: #5b9cf5;
  --accent-dim: #3d6fad;
  --success: #3ecf8e;
  --ok: var(--success);
  --warn: #e6b35a;
  --danger: #f07178;
  --recording: #f06292;
  --idle: #78909c;
  --degraded: #e6b35a;
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  /* Canonical breakpoint px (use literals in @media — custom props here are docs / calc-only). */
  --bp-nav: 900px;
  --bp-dash: 960px;
  --bp-stack: 720px;
  --bp-tight: 560px;
  --bp-settings: 880px;
  --bp-wide: 1100px;
  font-family: "Segoe UI", system-ui, Roboto, Ubuntu, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg0);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse 120% 80% at 50% -20%, #1a2035 0%, var(--bg0) 55%); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: #8ebfff; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--bg2);
  color: var(--text);
  border-radius: 8px;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.global-recording-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.45rem 1.25rem;
  background: rgba(240, 98, 146, 0.12);
  border-bottom: 1px solid rgba(240, 98, 146, 0.35);
  font-size: 0.88rem;
}
/* ``display: flex`` above wins over the UA [hidden] rule — honor hidden explicitly. */
.global-recording-bar[hidden] {
  display: none !important;
}
.global-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--recording);
  box-shadow: 0 0 10px rgba(240, 98, 146, 0.85);
  flex-shrink: 0;
  animation: live-pulse 1.6s ease-in-out infinite;
}
.global-recording-link {
  font-weight: 600;
  white-space: nowrap;
}
.global-recording-sep { opacity: 0.35; }

@media (max-width: 720px) {
  .global-recording-bar {
    flex-direction: column;
    align-items: flex-start;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    gap: 0.45rem 0.85rem;
  }
  .global-recording-bar .global-recording-sep {
    display: none;
  }
  .global-recording-link,
  .global-recording-popout {
    align-self: flex-start;
    min-height: 2.75rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    display: inline-flex;
    align-items: center;
  }
}

/* Floating live preview dock (follows operator across pages). */
.preview-dock {
  position: fixed;
  z-index: 200;
  width: min(360px, calc(100vw - 1.5rem));
  min-height: 120px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.preview-dock--custom {
  max-height: min(
    calc(100vh - 1rem),
    calc(100dvh - env(safe-area-inset-bottom, 0px) - 0.85rem - env(safe-area-inset-top, 0px))
  );
}
.preview-dock--tl {
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
}
.preview-dock--tr {
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
}
.preview-dock--bl {
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  left: max(0.75rem, env(safe-area-inset-left));
}
.preview-dock--br {
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  right: max(0.75rem, env(safe-area-inset-right));
}
.preview-dock[hidden] {
  display: none !important;
}
.preview-dock-inner {
  min-height: 0;
}
.preview-dock-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  cursor: grab;
  font-size: 0.8rem;
}
.preview-dock-head:active {
  cursor: grabbing;
}
.preview-dock-minimize {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
}
.preview-dock-minimize:hover {
  background: rgba(255, 255, 255, 0.08);
}
.preview-dock-close {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.85;
}
.preview-dock-close:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}
.preview-dock-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  cursor: nwse-resize;
  touch-action: none;
  box-sizing: border-box;
  background: radial-gradient(
    circle at calc(100% - 10px) calc(100% - 10px),
    rgba(255, 255, 255, 0.22),
    transparent 40%
  );
}
.preview-dock-resize:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 720px) {
  .preview-dock.preview-dock:not(.preview-dock--minimized) {
    width: calc(100vw - 1rem);
    max-width: min(420px, calc(100vw - 1rem));
    max-height: min(78vh, calc(100dvh - 5rem));
  }
  .preview-dock.preview-dock--custom:not(.preview-dock--minimized) {
    max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom, 0px));
  }
}
.preview-dock-inner .preview-frame {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.preview-dock--minimized .preview-dock-inner,
.preview-dock--minimized .preview-dock-resize {
  display: none;
}
.preview-dock--minimized {
  min-height: 0 !important;
}
.preview-dock-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.preview-dock-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--recording);
  box-shadow: 0 0 6px rgba(240, 98, 146, 0.65);
  opacity: 0.55;
  flex-shrink: 0;
}
.preview-dock--minimized .preview-dock-brand-dot {
  opacity: 1;
  animation: live-pulse 1.6s ease-in-out infinite;
}
.preview-dock--minimized .preview-dock-brand {
  flex: 1 1 auto;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: rgba(240, 98, 146, 0.12);
  border: 1px solid rgba(240, 98, 146, 0.38);
  max-width: max-content;
}
.preview-dock--minimized .preview-dock-brand-text {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.preview-dock--minimized .preview-dock-head {
  flex-wrap: nowrap;
}

.nav-dash.nav-here { color: var(--accent); font-weight: 600; }
.nav-dash--live { font-weight: inherit; }
/* REC indicator only — never wrap the Dashboard label in .badge-live (that paints a pink tile). */
.nav-live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  vertical-align: middle;
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-weight: inherit;
  letter-spacing: normal;
}
.nav-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--recording);
  box-shadow: 0 0 6px rgba(240, 98, 146, 0.9);
  animation: live-pulse 1.6s ease-in-out infinite;
}

.top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding:
    calc(0.75rem + env(safe-area-inset-top, 0px))
    max(1.5rem, env(safe-area-inset-right, 0px))
    0.75rem
    max(1.5rem, env(safe-area-inset-left, 0px));
  background: rgba(20, 22, 31, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}

@media (max-width: 720px) {
  .top {
    flex-wrap: wrap;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}
.brand-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-shrink: 0;
  min-width: 0;
}
.brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
}
.brand:hover { text-decoration: none; color: var(--accent); }
.brand-sub { display: block; font-size: 0.7rem; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }

.nav-toggle {
  display: none;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.nav-collapsible {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-collapsible > a {
  font-size: 0.9rem;
  color: var(--muted);
  padding: 0.4rem 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-collapsible > a:hover { color: var(--text); }
.nav-collapsible .nav-here { color: var(--accent); font-weight: 600; }

/* Compact submenu (desktop dropdown / mobile accordion). */
.nav-console {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-console > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 0.4rem 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.nav-console > summary::-webkit-details-marker { display: none; }
.nav-console > summary:hover { color: var(--text); }
.nav-console > summary.nav-here { color: var(--accent); font-weight: 600; }
.nav-caret { font-size: 0.7em; opacity: 0.65; transition: transform 0.15s ease; }
.nav-console[open] .nav-caret { transform: rotate(180deg); }
.nav-console-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 961px) {
  .nav-console-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 11rem;
    margin-top: 0.35rem;
    padding: 0.4rem 0.5rem;
    background: rgba(20, 22, 31, 0.97);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 200;
  }
  .nav-console-menu a {
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--muted);
  }
  .nav-console-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }
  .nav-console-menu a.nav-here {
    background: rgba(91, 156, 245, 0.12);
    color: var(--accent);
    font-weight: 600;
  }
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-collapsible {
    display: none;
    width: 100%;
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0.35rem 0 0.5rem;
    border-top: 1px solid var(--border);
  }
  .nav-collapsible.open { display: flex; }
  .nav-collapsible.open > a:not(.btn),
  .nav-collapsible.open .nav-console > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.65rem;
    width: 100%;
  }
  .nav-console { width: 100%; display: block; }
  .nav-console-menu {
    padding: 0.15rem 0 0.35rem 0.85rem;
    border-left: 1px solid var(--border);
    margin: 0 0 0.15rem 0.35rem;
    gap: 0.15rem;
  }
  .nav-console-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    color: var(--muted);
    font-size: 0.9rem;
  }
  .nav-console-menu a:hover { color: var(--text); }
  .nav-console-menu a.nav-here { color: var(--accent); font-weight: 600; }
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
}
@media (max-width: 720px) {
  .container {
    padding-top: 1rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
  }
  .page-head p,
  .library-head .library-lead {
    max-width: none;
  }
}
.page-head { margin-bottom: 1.75rem; }
.page-head h1 {
  margin: 0 0 0.35rem 0;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.page-head p { margin: 0; color: var(--muted); max-width: 52ch; }

/* Dashboard page title (humanized edge / camera ids). */
.dash-page-head {
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-page-head-text { min-width: 0; }
.dash-page-eyebrow {
  margin: 0 0 0.35rem 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-page-title {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dash-live-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(220, 53, 69, 0.14);
  border: 1px solid rgba(220, 53, 69, 0.45);
  color: #c0392b;
  vertical-align: middle;
}
.dash-live-chip[hidden] { display: none; }
.dash-encode-meta {
  font-size: 0.8rem;
}
.dash-status-freshness {
  margin: 0.25rem 0 0;
}
.dash-status-freshness--lag { color: #b9770e; }
.dash-status-freshness--stale { color: #c0392b; font-weight: 600; }
.preview-overlay-cta {
  margin-top: 0.65rem;
  display: inline-block;
}
.dash-page-meta {
  margin: 0.4rem 0 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.dash-meta-sep { opacity: 0.45; }
.dash-device-code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.readiness-list { margin: 0.5rem 0 0 1rem; padding: 0; }

.card {
  background: linear-gradient(145deg, var(--bg1) 0%, var(--bg2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.35));
}
.card h2, .card h3 {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.card-title-row h2 { margin: 0; }

.grid-dash {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  min-width: 0;
}
@media (max-width: 960px) {
  .grid-dash { grid-template-columns: 1fr; }
}
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; min-width: 0; }
@media (max-width: 960px) {
  .span-6, .span-4, .span-8 { grid-column: span 12; }
}

.dash-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-pill--recording { background: rgba(240, 98, 146, 0.2); color: var(--recording); }
.dash-pill--idle { background: rgba(120, 144, 156, 0.2); color: var(--idle); }
.dash-pill--degraded { background: rgba(230, 179, 90, 0.2); color: var(--degraded); }
.dash-pill--unavailable { background: rgba(198, 40, 40, 0.18); color: var(--danger, #c62828); }

.preview-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.preview-frame--degraded {
  border-color: var(--danger, #c62828);
  box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.35);
}
.dash-status-poll-banner {
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius);
  background: rgba(198, 40, 40, 0.12);
  color: var(--danger, #c62828);
  font-size: 0.9rem;
}
.dash-error-block {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid rgba(198, 40, 40, 0.45);
  background: rgba(198, 40, 40, 0.08);
}
.dash-error-block .dash-error-line { margin: 0 0 0.35rem; }
.dash-error-logs-cta {
  font-size: 0.85rem;
  font-weight: 600;
}
.dash-audio-alert {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid rgba(198, 40, 40, 0.55);
  background: rgba(198, 40, 40, 0.12);
}
.dash-audio-alert-text {
  margin: 0 0 0.35rem;
  color: var(--danger, #c62828);
  font-weight: 600;
  font-size: 0.92rem;
}
.dash-audio-alert-cta {
  font-size: 0.85rem;
  font-weight: 600;
}
.preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.preview-frame--stacked {
  position: relative;
}
.preview-frame--stacked .preview-standby,
.preview-frame--stacked .preview-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0;
}
.preview-frame--stacked .preview-video-el {
  background: #000;
  z-index: 2;
}
.preview-frame--stacked .preview-standby {
  z-index: 1;
  background: #000;
}
.preview-frame--live-chrome .preview-pill {
  bottom: 2.75rem;
}

.preview-frame--live-chrome {
  container-type: inline-size;
  container-name: live-tile;
}

.live-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 0.35rem 0.45rem 0.4rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 35%);
  pointer-events: none;
}
.live-chrome-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  pointer-events: auto;
}
.live-chrome-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.live-chrome-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}
.live-chrome-scrub-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.live-chrome-scrub {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  accent-color: var(--accent, #5c9fd4);
}
.live-chrome-scrub:disabled {
  opacity: 0.35;
}
.live-chrome-mode-chip {
  flex: 0 0 4.85rem;
  width: 4.85rem;
  max-width: 4.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.live-chrome-mode-chip--live {
  background: #c62828;
  color: #fff;
}
.live-chrome-mode-chip--review {
  background: rgba(255, 255, 255, 0.12);
  color: #f0c674;
}
.live-chrome-time {
  flex: 0 0 8.25rem;
  width: 8.25rem;
  min-width: 8.25rem;
  max-width: 8.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.15;
}
.live-chrome-time-rel {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: 0.02em;
  min-height: 1.05em;
}
.live-chrome-time-wall {
  font-variant-numeric: tabular-nums;
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.72);
  min-height: 1em;
}
.live-chrome-time--frozen .live-chrome-time-rel {
  color: #f0c674;
  font-weight: 700;
}
.live-chrome-quality {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 7.5rem;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.live-chrome-quality[hidden] {
  display: none !important;
}
.live-chrome-quality-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.85rem;
}
.live-chrome-quality-bar {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
}
.live-chrome-quality-bar:nth-child(1) { height: 30%; }
.live-chrome-quality-bar:nth-child(2) { height: 50%; }
.live-chrome-quality-bar:nth-child(3) { height: 72%; }
.live-chrome-quality-bar:nth-child(4) { height: 100%; }
.live-chrome-quality-bar.is-on {
  background: var(--success, #3ecf8e);
}
.live-chrome-quality[data-grade="ok"] .live-chrome-quality-bar.is-on {
  background: var(--accent, #5b9cf5);
}
.live-chrome-quality[data-grade="weak"] .live-chrome-quality-bar.is-on {
  background: var(--warn, #e6b35a);
}
.live-chrome-quality[data-grade="poor"] .live-chrome-quality-bar.is-on {
  background: #e57373;
}
.live-chrome-quality-grade {
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.live-chrome-quality-pace {
  font-variant-numeric: tabular-nums;
  color: var(--accent, #7eb8ff);
  white-space: nowrap;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-chrome-quality-pace[hidden] {
  display: none !important;
}
.live-chrome-latency-badge {
  font-variant-numeric: tabular-nums;
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.72);
  min-height: 1em;
}
.sentri-health-tier-host {
  cursor: help;
}
.sentri-health-tier-popover {
  position: fixed;
  z-index: 12000;
  max-width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 22, 28, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color: var(--text, #e8eef4);
  font-size: 0.78rem;
  line-height: 1.4;
}
.sentri-health-tier-popover-title {
  margin: 0 0 0.55rem;
  font-weight: 700;
  font-size: 0.82rem;
}
.sentri-health-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sentri-health-tier-item {
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
}
.sentri-health-tier-item--active {
  border-color: rgba(100, 181, 246, 0.45);
  background: rgba(100, 181, 246, 0.08);
}
.sentri-health-tier-copy {
  color: var(--muted, #9aabba);
  font-size: 0.72rem;
}
.live-chrome-live {
  position: absolute;
  right: 0.5rem;
  bottom: 2.85rem;
  z-index: 8;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  pointer-events: auto;
}
.live-chrome-live--on {
  background: rgba(240, 98, 146, 0.85);
  color: #fff;
}
.live-chrome-live--off {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}
.live-chrome-live[hidden] {
  display: none !important;
}

/* Narrow tiles (phone grid, wall mosaic): keep play + fullscreen on the first
   row. Time/quality wrap instead of overflowing off the right edge. */
@container live-tile (max-width: 32rem) {
  .live-chrome-row {
    flex-wrap: wrap;
    row-gap: 0.22rem;
    column-gap: 0.35rem;
  }
  .live-chrome-play { order: 1; }
  .live-chrome-scrub-wrap {
    order: 2;
    flex: 1 1 calc(100% - 5.2rem);
    min-width: 3.25rem;
  }
  .live-chrome-fullscreen { order: 3; }
  .live-chrome-mode-chip {
    order: 4;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 4.2rem;
  }
  .live-chrome-time {
    order: 5;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    align-items: flex-start;
  }
  .live-chrome-quality {
    order: 6;
    max-width: min(100%, 7.5rem);
  }
  .live-chrome-latency-badge { order: 7; }
}
@container live-tile (max-width: 18rem) {
  .live-chrome-quality-grade { display: none; }
  .live-chrome-time-wall { display: none; }
}

@media (max-width: 720px) {
  .live-chrome-row {
    flex-wrap: wrap;
    row-gap: 0.22rem;
  }
  .live-chrome-play { order: 1; }
  .live-chrome-scrub-wrap {
    order: 2;
    flex: 1 1 calc(100% - 5.2rem);
    min-width: 3.25rem;
  }
  .live-chrome-fullscreen { order: 3; }
  .live-chrome-mode-chip {
    order: 4;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 4.2rem;
  }
  .live-chrome-time {
    order: 5;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    align-items: flex-start;
  }
  .live-chrome-quality { order: 6; }
  .live-chrome-latency-badge { order: 7; }
}

.preview-frame:fullscreen {
  border-radius: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  aspect-ratio: auto;
}
.preview-frame:fullscreen .preview-video-el,
.preview-frame:fullscreen .preview-standby {
  object-fit: contain;
}

.thermal-legend {
  position: absolute;
  left: 0.5rem;
  bottom: 0.45rem;
  z-index: 4;
  max-width: min(92%, 16rem);
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #e8eaed;
  pointer-events: auto;
}
.thermal-legend-bar {
  height: 0.45rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  background: linear-gradient(
    90deg,
    #1a0533 0%,
    #2a1a8c 18%,
    #1a6b4a 42%,
    #c4c41a 62%,
    #e85c1a 82%,
    #f5f0e8 100%
  );
}
.thermal-legend-scale {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.25;
}
.thermal-legend-hint {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  line-height: 1.3;
  opacity: 0.92;
}
.thermal-legend-link {
  color: #8ab4f8;
  text-decoration: none;
}
.thermal-legend-link:hover {
  text-decoration: underline;
}
.preview-frame--stacked .preview-audio-actions {
  position: absolute;
  right: 0.55rem;
  bottom: 2.85rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.preview-audio-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.72);
  color: #a5f3fc;
  border: 1px solid rgba(125, 211, 252, 0.45);
}
.audio-test-actions .btn[hidden] {
  display: none !important;
}
/* Settings — microphone loudness vu-style bars (streaming samples from edge). */
.audio-vu-wrap {
  margin-top: 0.5rem;
}
.audio-vu-readout {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text, #e2e8f0);
}
.audio-vu-wrap--live .audio-vu-readout {
  color: #4ade80;
}
.audio-vu-wrap--silent .audio-vu-readout {
  color: #94a3b8;
}
.audio-vu-wrap--connecting .audio-vu-readout {
  color: #94a3b8;
}
.audio-vu-wrap--silent .audio-vu-segment,
.audio-vu-wrap--connecting .audio-vu-segment {
  opacity: 0.35;
  background: #64748b;
}
.audio-vu-wrap--live .audio-vu-segment {
  opacity: 1;
}
.audio-vu-wave {
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  gap: 3px;
  height: 4.35rem;
  padding: 0.2rem 0;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.audio-vu-segment {
  flex: 1 1 6px;
  min-height: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 55%, #0ea5e9 100%);
  align-self: flex-end;
  width: auto;
  transition: height 0.05s linear;
}
.dash-audio-line {
  margin: 0.35rem 0 0;
}
/* Snapshot <img>: fill frame; avoid 1280×720 intrinsic layout jump. */
.preview-snapshot {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  display: block;
}
.preview-placeholder {
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1.25rem;
}
.preview-placeholder-inner { text-align: center; max-width: 34ch; }
.preview-placeholder-icon {
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.45;
  margin-bottom: 0.5rem;
}
.preview-placeholder-title {
  margin: 0 0 0.35rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.preview-placeholder-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.btn[hidden] {
  display: none !important;
}
.btn > i,
.btn > .fa-solid,
.btn > .fa-regular {
  flex-shrink: 0;
  line-height: 1;
}
.btn:hover { background: #252838; text-decoration: none; color: var(--text); }
.btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, #4f8dee 0%, var(--accent-dim) 100%); border-color: #4f7ec9; color: #fff; }
.btn-primary:hover { filter: brightness(1.08); color: #fff; }
.btn-danger { background: rgba(240, 113, 120, 0.15); border-color: #8f4e52; color: #ff9aa1; }
.btn-danger:hover { background: rgba(240, 113, 120, 0.28); color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 0.32rem 0.65rem; font-size: 0.8rem; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---- Single-card dashboard --------------------------------------------- */

.dash-main { padding: 1rem; min-width: 0; }
.dash-preview-region { min-width: 0; }
.dash-main .preview-frame {
  margin: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(62vh, 720px);
}
@media (max-width: 720px) {
  .dash-main .preview-frame {
    max-height: min(50vh, 720px);
  }
}
.preview-pill { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3; }

@media (max-width: 560px) {
  .dash-actions.btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .dash-actions .btn {
    width: 100%;
    min-height: 2.65rem;
    justify-content: center;
  }
}

/* Overlay anchored inside the preview frame. Stacks on top of both the
   <img> snapshot fallback and the <video> HLS element so the operator
   always sees what's happening even when the video is buffering. */
.preview-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.5rem;
  background: rgba(8, 10, 18, 0.72);
  color: var(--text);
  font-size: 0.95rem;
  text-align: center;
  padding: 1rem;
  z-index: 4;
  backdrop-filter: blur(2px);
}
.preview-overlay[hidden] { display: none; }
.preview-overlay--error { color: #ffb4b8; background: rgba(60, 12, 18, 0.78); }
.preview-overlay--idle {
  background: rgba(8, 10, 18, 0.5);
  color: var(--muted);
  font-size: 0.88rem;
}
.preview-overlay--idle .preview-overlay-spinner,
.preview-overlay--error .preview-overlay-spinner { display: none; }
.preview-overlay-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: preview-spin 0.9s linear infinite;
}
.preview-overlay--error .preview-overlay-spinner {
  border-top-color: var(--danger);
  animation: none;
}
@keyframes preview-spin { to { transform: rotate(360deg); } }

.dash-controls {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Big single Recording toggle. Pressed = recording is on. */
.rec-toggle {
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rec-toggle:hover { background: rgba(0, 0, 0, 0.32); border-color: #3a4258; }
.rec-toggle:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.rec-toggle:disabled, .rec-toggle[data-loading="1"] { cursor: progress; opacity: 0.7; }
.rec-toggle-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #4a5060;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
  flex-shrink: 0;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.rec-toggle[aria-pressed="true"] .rec-toggle-dot {
  background: var(--recording);
  box-shadow: 0 0 0 6px rgba(240, 98, 146, 0.18), inset 0 0 0 2px rgba(255,255,255,0.25);
  animation: rec-pulse 1.8s ease-in-out infinite;
}
.rec-toggle[data-loading="1"] .rec-toggle-dot {
  animation: rec-pulse-fast 0.9s ease-in-out infinite alternate;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(240, 98, 146, 0.18), inset 0 0 0 2px rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 0 0 10px rgba(240, 98, 146, 0.05), inset 0 0 0 2px rgba(255,255,255,0.4); }
}
@keyframes rec-pulse-fast {
  from { box-shadow: 0 0 0 0 rgba(91, 156, 245, 0.45); }
  to   { box-shadow: 0 0 0 8px rgba(91, 156, 245, 0); }
}
.rec-toggle-label { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.rec-toggle-title { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; }
.rec-toggle-sub { font-size: 0.82rem; color: var(--muted); }
.rec-toggle-state {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: rgba(120, 144, 156, 0.18);
  color: var(--muted);
  border: 1px solid rgba(120, 144, 156, 0.3);
}
.rec-toggle[aria-pressed="true"] .rec-toggle-state {
  background: rgba(240, 98, 146, 0.22);
  color: var(--recording);
  border-color: rgba(240, 98, 146, 0.5);
}

.rec-toggle-wrap {
  position: relative;
}
.rec-toggle--camera-off {
  opacity: 0.52;
  filter: grayscale(0.4);
}
.rec-toggle-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 12px;
  background: rgba(12, 16, 24, 0.72);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.rec-toggle-hint[hidden] {
  display: none !important;
}
.rec-toggle-wrap:has(.rec-toggle--camera-off):hover .rec-toggle-hint,
.rec-toggle-wrap:has(.rec-toggle--camera-off):focus-within .rec-toggle-hint {
  display: flex;
}
.rec-toggle-hint-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.rec-toggle-hint-body {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  max-width: 22rem;
}

.cam-toggle {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.cam-toggle:hover {
  background: rgba(0, 0, 0, 0.24);
  border-color: #3a4258;
}
.cam-toggle:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cam-toggle[data-loading="1"] {
  cursor: progress;
  opacity: 0.7;
}
.cam-toggle-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4a5060;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.cam-toggle[aria-pressed="true"] .cam-toggle-dot {
  background: #6eb5ff;
  box-shadow: 0 0 0 4px rgba(110, 181, 255, 0.15);
}
.cam-toggle[aria-pressed="false"] .cam-toggle-dot {
  background: #3d424f;
}
.cam-toggle-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cam-toggle-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.cam-toggle-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.cam-toggle-state {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(120, 144, 156, 0.14);
  color: var(--muted);
  border: 1px solid rgba(120, 144, 156, 0.28);
}
.cam-toggle[aria-pressed="true"] .cam-toggle-state {
  background: rgba(110, 181, 255, 0.18);
  color: #9ec9ff;
  border-color: rgba(110, 181, 255, 0.4);
}

/* Compact stat row */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.dash-stats > div {
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dash-stats dt { margin: 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dash-stats dd {
  margin: 0.2rem 0 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
  color: var(--text);
}
.dash-stat-multiline {
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.dash-preview-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.35rem;
}
.dash-stats--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .dash-stats--compact {
    grid-template-columns: 1fr;
  }
}

.dash-perf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}
.dash-perf-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.38rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
  text-decoration: none;
  color: var(--text);
  min-width: 4.5rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dash-perf-chip:hover {
  border-color: rgba(91, 156, 245, 0.45);
  background: rgba(91, 156, 245, 0.08);
}
.dash-perf-chip-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.dash-perf-chip-val {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-perf-chip--warn {
  border-color: rgba(255, 193, 7, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.12);
}
.dash-perf-chip--critical {
  border-color: rgba(244, 67, 54, 0.55);
  box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.15);
}

.storage-meter-link {
  font-weight: 500;
  text-decoration: none;
}
.storage-meter-link:hover {
  text-decoration: underline;
}

.telemetry-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem 0;
}
.telemetry-tab {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.telemetry-tab:hover {
  color: var(--text);
  border-color: rgba(120, 144, 156, 0.55);
}
.telemetry-tab--active {
  color: var(--accent);
  border-color: rgba(129, 199, 132, 0.55);
  background: rgba(129, 199, 132, 0.12);
}
.telemetry-panel {
  margin-bottom: 1.5rem;
}
.telemetry-canvas {
  width: 100%;
  max-width: 600px;
  height: auto;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.telemetry-alert-list {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}
.telemetry-alert-list li {
  margin-bottom: 0.35rem;
}
.storage-bar--disk {
  background: linear-gradient(90deg, #5c6bc0, #3949ab);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.stat {
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.stat dt { margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stat dd { margin: 0.2rem 0 0 0; font-weight: 600; font-size: 0.95rem; word-break: break-word; }
.stat-grid--tight { gap: 0.45rem; }
.stat dd.small { font-size: 0.8rem; font-weight: 500; line-height: 1.35; }
.telemetry-subhead { margin: 1rem 0 0.35rem; font-size: 0.95rem; }
.telemetry-seg-table code { font-size: 0.78rem; }
.telemetry-seg-scroll {
  max-height: min(18rem, 35vh);
  overflow: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.55) rgba(0, 0, 0, 0.22);
}
.telemetry-seg-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.telemetry-seg-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 2px;
}
.telemetry-seg-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(91, 156, 245, 0.55), rgba(91, 156, 245, 0.28));
  border-radius: 8px;
  border: 2px solid rgba(12, 13, 18, 0.9);
}
.telemetry-seg-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(120, 180, 255, 0.65), rgba(91, 156, 245, 0.4));
}

.sentri-scroll-y {
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.55) rgba(0, 0, 0, 0.22);
}
.settings-modal-panel {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.55) rgba(0, 0, 0, 0.22);
}
.sentri-scroll-y::-webkit-scrollbar,
.settings-modal-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.sentri-scroll-y::-webkit-scrollbar-track,
.settings-modal-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 2px;
}
.sentri-scroll-y::-webkit-scrollbar-thumb,
.settings-modal-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(91, 156, 245, 0.55), rgba(91, 156, 245, 0.28));
  border-radius: 8px;
  border: 2px solid rgba(12, 13, 18, 0.9);
}
.sentri-scroll-y::-webkit-scrollbar-thumb:hover,
.settings-modal-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(120, 180, 255, 0.65), rgba(91, 156, 245, 0.4));
}
.sentri-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.55) rgba(0, 0, 0, 0.22);
}
.sentri-scroll-x::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.sentri-scroll-x::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.sentri-scroll-x::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(91, 156, 245, 0.55), rgba(91, 156, 245, 0.28));
  border-radius: 8px;
  border: 2px solid rgba(12, 13, 18, 0.9);
}
.sentri-scroll-x::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(120, 180, 255, 0.65), rgba(91, 156, 245, 0.4));
}

.telemetry-events-scroll {
  max-height: min(14rem, 28vh);
  margin-top: 0.35rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}
.telemetry-events-scroll-empty {
  margin: 0;
  padding: 0.35rem 0;
}

.telemetry-events-scroll .telemetry-event-list {
  margin-top: 0;
}

.telemetry-seg-table {
  margin: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.telemetry-seg-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg2);
  box-shadow: 0 1px 0 var(--border);
  vertical-align: bottom;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.35rem 0.5rem;
}
.telemetry-th-num .telemetry-sort-btn {
  justify-content: flex-end;
  text-align: right;
}
.telemetry-th-sort .telemetry-sort-btn {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.15rem 0.35rem 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}
.telemetry-th-sort .telemetry-sort-btn:hover,
.telemetry-th-sort .telemetry-sort-btn:focus-visible {
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(91, 156, 245, 0.45);
}
.telemetry-sort-glyph {
  font-size: 0.65rem;
  opacity: 0.85;
  flex-shrink: 0;
}
.telemetry-seg-table tbody td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(42, 49, 66, 0.6);
  font-size: 0.85rem;
}
.telemetry-seg-table:not(.telemetry-seg-table--clips) tbody tr:last-child td {
  border-bottom: none;
}

.telemetry-seg-scroll--clips-primary {
  max-height: min(26rem, 48vh);
}

.telemetry-clips-lead {
  margin-bottom: 0.65rem;
  max-width: 52rem;
  line-height: 1.45;
}

.telemetry-seg-table--clips tbody tr.telemetry-clip-parent-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.telemetry-seg-table--clips tbody tr.telemetry-clip-parent-row:hover {
  background: rgba(91, 156, 245, 0.07);
}
.telemetry-seg-table--clips tbody tr.telemetry-clip-parent-row:focus-within {
  background: rgba(91, 156, 245, 0.09);
}
.telemetry-seg-table--clips tbody tr.telemetry-clip-parent-row.is-expanded {
  background: rgba(91, 156, 245, 0.06);
}
.telemetry-seg-table--clips tbody tr.telemetry-clip-parent-row.is-expanded td {
  border-bottom-color: rgba(42, 49, 66, 0.35);
}
.telemetry-seg-table--clips tbody tr.telemetry-clip-detail-row td {
  border-bottom: 1px solid rgba(42, 49, 66, 0.6);
  vertical-align: top;
}
.telemetry-seg-table--clips tbody tr:last-child td {
  border-bottom: none;
}

.telemetry-th-expand {
  width: 2.75rem;
  padding-left: 0.35rem;
  padding-right: 0.15rem;
}
.telemetry-td-expand {
  width: 2.75rem;
  vertical-align: middle;
  text-align: center;
}
.telemetry-clip-key-cell code,
.telemetry-clip-size-cell {
  word-break: break-word;
}

a.telemetry-clip-library-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
a.telemetry-clip-library-link:hover {
  text-decoration: underline;
}
a.telemetry-clip-library-link:focus-visible {
  outline: 2px solid rgba(91, 156, 245, 0.65);
  outline-offset: 2px;
  border-radius: 4px;
}
a.telemetry-clip-library-link code {
  color: inherit;
  font-weight: inherit;
}

.telemetry-clip-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.telemetry-clip-toggle:hover {
  background: rgba(91, 156, 245, 0.2);
  color: var(--text);
}
.telemetry-clip-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.55);
}
.telemetry-clip-chevron {
  font-size: 0.7rem;
  transition: transform 0.18s ease;
}
.telemetry-clip-parent-row.is-expanded .telemetry-clip-chevron {
  transform: rotate(90deg);
}

.telemetry-clip-detail-cell {
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
}
.telemetry-clip-detail-panel {
  margin: 0.5rem 0.65rem 0.65rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(42, 49, 66, 0.75);
  background: rgba(12, 14, 20, 0.65);
  overflow: hidden;
}
.telemetry-clip-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid rgba(42, 49, 66, 0.65);
  background: rgba(0, 0, 0, 0.15);
}
.telemetry-clip-detail-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.telemetry-clip-detail-meta {
  font-size: 0.72rem;
}

.telemetry-clip-segments-scroll {
  max-height: min(14rem, 32vh);
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.45) rgba(0, 0, 0, 0.2);
}
.telemetry-clip-segments-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.telemetry-clip-segments-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.telemetry-clip-segments-scroll::-webkit-scrollbar-thumb {
  background: rgba(91, 156, 245, 0.4);
  border-radius: 6px;
}

.telemetry-clip-segments-mini {
  margin: 0;
  width: 100%;
  font-size: 0.78rem;
  border-collapse: separate;
  border-spacing: 0;
}
.telemetry-clip-segments-mini thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.4rem 0.5rem;
  text-align: left;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(18, 20, 28, 0.97);
  border-bottom: 1px solid rgba(42, 49, 66, 0.75);
  box-shadow: 0 1px 0 rgba(42, 49, 66, 0.5);
}
.telemetry-clip-segments-mini tbody td {
  padding: 0.38rem 0.5rem;
  border-bottom: 1px solid rgba(42, 49, 66, 0.4);
  vertical-align: top;
}
.telemetry-clip-segments-mini tbody tr:last-child td {
  border-bottom: none;
}
.telemetry-clip-segments-mini .telemetry-clip-mini-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.telemetry-clip-segments-mini .telemetry-clip-mini-file code {
  font-size: 0.72rem;
  word-break: break-all;
}
.telemetry-clip-segments-mini code {
  font-size: 0.74rem;
}

.telemetry-chart-axis-foot {
  margin: 0.2rem 0 0;
  padding-left: 3rem;
}
.telemetry-projection-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(129, 199, 132, 0.28);
  background: linear-gradient(135deg, rgba(129, 199, 132, 0.1), rgba(0, 0, 0, 0.18));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.telemetry-projection-head {
  margin-bottom: 0.65rem;
}
.telemetry-projection-kicker {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(129, 199, 132, 0.95);
}
.telemetry-projection-title {
  margin: 0.15rem 0 0.2rem;
  font-size: 1.15rem;
}
.telemetry-projection-lead {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.telemetry-projection-stats {
  margin-top: 0.5rem;
}
.telemetry-projection-foot {
  margin: 0.75rem 0 0;
}

.telemetry-chart-shell {
  position: relative;
  display: block;
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.65rem 0.45rem;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(20, 22, 30, 0.65), rgba(12, 14, 20, 0.9));
  border: 1px solid rgba(42, 49, 66, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.telemetry-chart-shell--live {
  border-color: rgba(129, 199, 132, 0.45);
}
.telemetry-chart-shell--warn {
  border-color: rgba(255, 193, 7, 0.55);
}
.telemetry-chart-shell--critical {
  border-color: rgba(244, 67, 54, 0.55);
}
.telemetry-live-pill {
  display: none;
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  z-index: 1;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c8e6c9;
  background: rgba(76, 175, 80, 0.22);
  border: 1px solid rgba(129, 199, 132, 0.45);
}
.telemetry-chart-shell--live .telemetry-live-pill {
  display: inline-flex;
}
.telemetry-chart-toolbar-card {
  padding-bottom: 0.65rem;
}
.telemetry-chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.telemetry-chart-toolbar-label {
  margin-right: 0.25rem;
}
.telemetry-chart-range-btn--active {
  border-color: rgba(91, 156, 245, 0.65) !important;
  background: rgba(91, 156, 245, 0.14) !important;
  color: var(--accent) !important;
}
.telemetry-chart-tip {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  max-width: 90%;
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(20, 24, 28, 0.92);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.telemetry-threshold-legend {
  margin: 0.35rem 0 0;
  min-height: 2.75rem;
}
.telemetry-perf-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 960px) {
  .telemetry-perf-charts {
    grid-template-columns: 1fr;
  }
}
.telemetry-chart-card {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
@media (max-width: 720px) {
  .telemetry-chart-card {
    min-height: 286px;
  }
}
.telemetry-chart-card .telemetry-chart-shell {
  flex: 0 0 auto;
  min-height: 236px;
}
.telemetry-chart-card h2 {
  min-height: 2.35rem;
  margin-bottom: 0.15rem;
}
.telemetry-chart-card > .muted:first-of-type {
  min-height: 3.1rem;
  margin: 0 0 0.35rem;
}
.telemetry-chart-card .telemetry-chart-axis-foot {
  margin-top: auto;
  min-height: 2.5rem;
}
.telemetry-threshold-swatches .sw {
  display: inline-block;
  width: 1.1rem;
  height: 3px;
  vertical-align: middle;
  margin-right: 0.25rem;
  border-radius: 2px;
}
.telemetry-threshold-swatches .sw-warn {
  background: rgba(255, 193, 7, 0.85);
}
.telemetry-threshold-swatches .sw-series--cpu {
  background: #64b5f6;
}
.telemetry-threshold-swatches .sw-series--mem {
  background: #81c784;
}
.telemetry-threshold-swatches .sw-series--storage {
  background: #ce93d8;
}
.telemetry-threshold-swatches .sw-crit {
  background: rgba(244, 67, 54, 0.85);
}

.telemetry-event-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.telemetry-event-item {
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  font-size: 0.82rem;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.telemetry-event-item.telemetry-event--critical {
  border-color: rgba(244, 67, 54, 0.45);
  background: rgba(244, 67, 54, 0.1);
}
.telemetry-event-item.telemetry-event--warn {
  border-color: rgba(255, 193, 7, 0.4);
  background: rgba(255, 193, 7, 0.08);
}
.telemetry-event-item.telemetry-event--info {
  border-color: rgba(100, 181, 246, 0.35);
  background: rgba(100, 181, 246, 0.06);
}
.telemetry-event-ts {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}
.telemetry-event-cat {
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: auto;
}
.telemetry-event-title {
  flex: 1 1 100%;
  font-weight: 500;
  color: var(--text);
}

.telemetry-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.telemetry-alert-item {
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  font-size: 0.82rem;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.telemetry-alert-item--critical {
  border-color: rgba(244, 67, 54, 0.45);
  background: rgba(244, 67, 54, 0.1);
}
.telemetry-alert-item--warn {
  border-color: rgba(255, 193, 7, 0.4);
  background: rgba(255, 193, 7, 0.08);
}
.telemetry-alert-badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.25);
}
.telemetry-alert-item--critical .telemetry-alert-badge {
  color: #ffcdd2;
}
.telemetry-alert-item--warn .telemetry-alert-badge {
  color: #fff8e1;
}
.telemetry-alert-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.telemetry-alert-ts {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--muted);
}
.telemetry-alert-body {
  flex: 1 1 100%;
  font-weight: 600;
}

.telemetry-adapter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid rgba(100, 181, 246, 0.4);
  background: rgba(100, 181, 246, 0.12);
  cursor: default;
}
.storage-meter { display: flex; flex-direction: column; gap: 0.45rem; }
.storage-meter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-storage-meter .storage-bar-wrap { margin-top: 0; }
.storage-bar-wrap {
  height: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.75rem;
}
.dash-error-line {
  margin: 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  background: rgba(240, 113, 120, 0.08);
  border: 1px solid rgba(240, 113, 120, 0.28);
  border-radius: 8px;
}
.dash-error-line[hidden] { display: none; }
.dash-hw-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}
.dash-hw-warnings[hidden] { display: none; }
.dash-hw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  background: rgba(125, 133, 144, 0.14);
  border: 1px solid rgba(125, 133, 144, 0.3);
  cursor: help;
}
.dash-hw-badge--warn {
  background: rgba(240, 173, 78, 0.12);
  border-color: rgba(240, 173, 78, 0.4);
  color: #b9770e;
}
a.dash-hw-badge--link {
  text-decoration: none;
  cursor: pointer;
}
a.dash-hw-badge--link:hover {
  filter: brightness(1.05);
}
.settings-device-report {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(125, 133, 144, 0.08);
  border: 1px solid rgba(125, 133, 144, 0.22);
}
.settings-device-report[hidden] { display: none; }
.settings-device-report-warnings {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.settings-device-report-warn {
  font-size: 0.82rem;
  color: #b9770e;
}
.settings-device-report-modes { margin-top: 0.4rem; }
.settings-device-report-modes summary { cursor: pointer; font-size: 0.8rem; }
.settings-device-report-modes-body { margin-top: 0.3rem; }
.storage-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #7c4dff);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.muted { color: var(--muted); }
.ok { color: var(--success); }
.err { color: var(--danger); word-break: break-word; }
.flash-ok {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: rgba(62, 207, 142, 0.12);
  border: 1px solid rgba(62, 207, 142, 0.35);
  color: var(--success);
  margin-bottom: 1rem;
}
.flash-err {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: var(--danger);
  margin-bottom: 1rem;
}
.flash-warn {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: rgba(230, 179, 90, 0.12);
  border: 1px solid rgba(230, 179, 90, 0.38);
  color: var(--warn);
  margin-bottom: 1rem;
}

/* Forms */
.form-page { max-width: 960px; }
.form-page.settings-form { max-width: 1180px; }
/* Settings page layout */
.settings-page-head .settings-lead { max-width: 70ch; margin-top: 0.35rem; }
.settings-alerts { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.settings-alerts:empty { display: none; }
.settings-restart-card { margin-bottom: 1.5rem; }
.settings-page-form { margin-top: 0.25rem; }
.settings-panel {
  margin-bottom: 2.85rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--border);
}
.settings-page-form > .settings-panel:last-of-type { border-bottom: none; margin-bottom: 1rem; }
.settings-panel-head { margin-bottom: 1.35rem; }
.settings-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
}
.settings-panel-desc { margin: 0; font-size: 0.88rem; max-width: 62ch; }
.settings-panel-subtitle {
  margin: 1rem 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 650;
}
.settings-panel-body--stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Match .fieldset-card / .form-grid width — do not pinch post-form cards. */
  max-width: none;
  width: 100%;
}
.settings-panel-body--stack > .field { margin: 0.35rem 0; }
.settings-panel-body--stack > .btn-row { margin-top: 0.35rem; }
/* Post-form panels (security, updates, developer) use .sentri-card for chrome. */
.settings-panel > .settings-panel-body.sentri-card {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.settings-panel > .settings-panel-body.sentri-card:not(.settings-panel-body--stack) {
  display: block;
}

/* Checkbox drawing lives in 1_elements.css. The row is .sentri-check-row in 2_components.css.
   .settings-check is an alias of that row. Do not paint input[type=checkbox] here. */

.sentri-obs-dirty-pill {
  margin: 0.15rem 0 0.5rem;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffe8c2;
  background: rgba(230, 179, 90, 0.16);
  border: 1px solid rgba(230, 179, 90, 0.42);
}
.sentri-obs-dirty-pill[hidden] {
  display: none !important;
}

.edge-sentry-card {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  max-width: 42rem;
}
/* display:flex wins over the UA [hidden] rule — keep Sentry UI gated. */
.edge-sentry-card[hidden] {
  display: none !important;
}

.edge-sentry-group {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  min-width: 0;
}
.edge-sentry-group .settings-subcard-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.edge-sentry-group .field {
  margin: 0;
  min-width: 0;
}
.edge-sentry-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.edge-sentry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
}
.edge-sentry-grid > .settings-check--row {
  margin: 0;
}
@media (max-width: 720px) {
  .edge-sentry-grid {
    grid-template-columns: 1fr;
  }
}
.edge-sentry-profiling {
  margin-top: 0.15rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.edge-sentry-profiling[hidden],
#edge-sentry-profiles-rate-wrap[hidden] {
  display: none !important;
}
.edge-sentry-overhead-note {
  margin: 0;
}
.settings-obs-actions {
  margin: 0.35rem 0 0;
  flex-wrap: wrap;
}
.sentri-obs-action--error {
  color: var(--danger);
}

.sentri-dsn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  max-width: 42rem;
}

.sentri-dsn-row input[type="password"],
.sentri-dsn-row input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.sentri-dsn-configured {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #b8f0cc;
  background: rgba(62, 207, 142, 0.16);
  border: 1px solid rgba(62, 207, 142, 0.45);
}
.sentri-dsn-configured[hidden],
.sentri-dsn-reveal[hidden],
.sentri-dsn-masked[hidden] {
  display: none !important;
}

.sentri-dsn-configured::before {
  content: "✓";
  font-weight: 700;
}

.sentri-dsn-masked {
  margin: 0.35rem 0 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px dashed var(--border, #ccc);
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.82rem;
  word-break: break-all;
  max-width: 42rem;
}

.sentri-sentry-setup {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border, #ccc);
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.9rem;
  max-width: 62ch;
}
.sentri-sentry-setup > summary {
  cursor: pointer;
  font-weight: 600;
}
.sentri-sentry-setup-steps {
  margin: 0.65rem 0 0.35rem 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.sentri-sentry-setup-steps ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.settings-panel-grid {
  display: grid;
  row-gap: 2.75rem;
  column-gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .settings-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-panel-grid .field-span-row {
    grid-column: 1 / -1;
  }
}
.settings-fieldset { margin: 0; min-width: 0; }
.settings-fieldset > legend { margin-bottom: 0.25rem; }
.settings-nested-grid {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.5rem;
}
.settings-nested-grid .field { margin: 0; }
.settings-nested-grid .field-span-2 { grid-column: 1 / -1; }
.settings-nested-grid .check-field-span { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .settings-nested-grid { grid-template-columns: 1fr; }
}
.settings-row-tight { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.card-in-field {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.08);
}
.settings-tz-resolve-line { margin: 0.35rem 0; font-size: 0.9rem; line-height: 1.45; }
.settings-reco-banner {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.88rem;
}
.settings-reco-banner--ok {
  margin: 0;
  color: var(--success, #3ecf8e);
}
.settings-reco-banner--custom {
  margin: 0;
  color: var(--warn, #e6b35a);
}
.settings-profile-refresh-banner {
  margin: 0.65rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(230, 179, 90, 0.45);
  background: rgba(230, 179, 90, 0.08);
  font-size: 0.88rem;
}
.settings-profile-refresh-banner[hidden] {
  display: none !important;
}
.settings-profile-diff-wrap {
  overflow-x: auto;
  margin: 0.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.settings-profile-diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.settings-profile-diff th,
.settings-profile-diff td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
}
.settings-profile-refresh-actions {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.settings-details {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: rgba(0, 0, 0, 0.12);
}
.settings-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent);
  list-style: none;
}
.settings-details summary::-webkit-details-marker { display: none; }
.settings-details[open] summary { margin-bottom: 0.75rem; }
.field-label-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.field-label-row label { margin: 0; }
.settings-probe-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.settings-camera-extra-hints {
  margin-top: 0.35rem;
}
.settings-camera-extra-hints summary {
  cursor: pointer;
  font-weight: 600;
}
.settings-hardware-loading .settings-hardware-loading-msg {
  margin: 0.35rem 0;
  animation: settings-hardware-pulse 1.2s ease-in-out infinite;
}
@keyframes settings-hardware-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.settings-select--loading {
  cursor: wait;
  opacity: 0.82;
  pointer-events: none;
}
.settings-form #probe-refresh-btn[data-loading="1"] {
  cursor: progress;
  opacity: 0.75;
}

/* Device preset picker (Settings / onboarding) */
.device-preset-field {
  position: relative;
}
.device-preset-picker {
  position: relative;
  max-width: 36rem;
}
.device-preset-picker--loading .device-preset-trigger {
  opacity: 0.92;
}
.device-preset-picker--loading .device-preset-trigger-chevron {
  opacity: 0.65;
}
.device-preset-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.35rem;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(91, 156, 245, 0.42);
  background: linear-gradient(180deg, rgba(91, 156, 245, 0.12) 0%, rgba(20, 22, 31, 0.95) 100%);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.device-preset-trigger:hover:not(:disabled) {
  border-color: rgba(91, 156, 245, 0.65);
  box-shadow: 0 0 0 1px rgba(91, 156, 245, 0.18);
}
.device-preset-picker--open .device-preset-trigger {
  border-color: rgba(91, 156, 245, 0.75);
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.22);
}
.device-preset-trigger:disabled {
  cursor: not-allowed;
}
.device-preset-trigger-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  flex: 1;
}
.device-preset-trigger-label {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.device-preset-trigger-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.device-preset-trigger-chevron {
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 0.15s ease;
}
.device-preset-picker--open .device-preset-trigger-chevron {
  transform: rotate(-135deg) translateY(0.1rem);
}
.device-preset-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  max-height: min(22rem, 58vh);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(91, 156, 245, 0.35);
  background: var(--bg1);
  box-shadow: var(--shadow);
}
.device-preset-option {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.device-preset-option + .device-preset-option {
  margin-top: 0.2rem;
}
.device-preset-option:hover {
  background: rgba(91, 156, 245, 0.08);
}
.device-preset-option--selected {
  border-color: rgba(91, 156, 245, 0.55);
  background: rgba(91, 156, 245, 0.14);
  box-shadow: 0 0 0 1px rgba(91, 156, 245, 0.12) inset;
}
.device-preset-option--saved:not(.device-preset-option--selected) {
  border-color: rgba(62, 207, 142, 0.28);
}
.device-preset-option--recommended {
  background: linear-gradient(90deg, rgba(62, 207, 142, 0.08), transparent 70%);
}
.device-preset-option--recommended.device-preset-option--selected {
  background: linear-gradient(90deg, rgba(62, 207, 142, 0.16), rgba(91, 156, 245, 0.12));
}
.device-preset-option-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}
.device-preset-option-label {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.device-preset-option-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.device-preset-option-id {
  display: none;
}
.device-preset-option-detail {
  font-size: 0.8rem;
  line-height: 1.45;
}
.device-preset-option--empty {
  cursor: default;
  font-size: 0.84rem;
  padding: 0.75rem;
}
.device-preset-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.device-preset-badge--current {
  color: #b8d9ff;
  background: rgba(91, 156, 245, 0.22);
  border: 1px solid rgba(91, 156, 245, 0.45);
}
.device-preset-badge--recommended {
  color: #b8f5d8;
  background: rgba(62, 207, 142, 0.18);
  border: 1px solid rgba(62, 207, 142, 0.42);
}
.device-preset-badge--detected {
  color: #b8f5d8;
  background: rgba(62, 207, 142, 0.12);
  border: 1px solid rgba(62, 207, 142, 0.28);
}
.device-preset-badge--missing {
  color: #c5cad6;
  background: rgba(139, 149, 168, 0.12);
  border: 1px solid rgba(139, 149, 168, 0.28);
}
.device-preset-badge--unsaved {
  color: #ffe0a8;
  background: rgba(230, 179, 90, 0.16);
  border: 1px solid rgba(230, 179, 90, 0.42);
}
.device-preset-saved-line {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
}
.device-preset-saved-line strong {
  color: var(--text);
}
.device-preset-saved-line--dirty strong {
  color: var(--warn);
}
.settings-probe-tip-wrap .settings-tip-panel {
  max-width: min(16rem, 92vw);
}
.settings-probe-stack {
  margin-top: 0.35rem;
}
.probe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.08);
}
.probe-toolbar-start {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.probe-toolbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.probe-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}
.probe-toolbar-end {
  flex-shrink: 0;
}
.probe-toolbar-actions .probe-toolbar-end {
  margin-left: 0;
}
.probe-toolbar-end[hidden],
.probe-toolbar-actions[hidden] {
  display: none !important;
}
.probe-toolbar-spinner {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}
.probe-toolbar--busy .probe-toolbar-status {
  color: var(--text);
}
.probe-toolbar--error {
  border-color: rgba(240, 113, 120, 0.35);
  background: rgba(240, 113, 120, 0.08);
}
.probe-toolbar--error .probe-toolbar-status {
  color: #f07178;
}
.probe-scan-banner,
.probe-scan-done {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}
.probe-scan-banner--scanning {
  border-color: rgba(91, 156, 245, 0.35);
  background: rgba(91, 156, 245, 0.08);
}
.probe-scan-banner--error {
  border-color: rgba(240, 113, 120, 0.35);
  background: rgba(240, 113, 120, 0.08);
}
.probe-scan-banner[hidden] {
  display: none !important;
}
.probe-scan-done {
  border-color: rgba(62, 207, 142, 0.42);
  background: rgba(62, 207, 142, 0.1);
  color: var(--success);
}
.probe-scan-done--visible {
  animation: probe-scan-done-in 0.35s ease;
}
@keyframes probe-scan-done-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}
.probe-scan-spinner {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.12rem;
  border-radius: 50%;
  border: 2px solid rgba(91, 156, 245, 0.25);
  border-top-color: var(--accent);
  animation: probe-scan-spin 0.75s linear infinite;
}
@keyframes probe-scan-spin {
  to { transform: rotate(360deg); }
}
.probe-scan-done-icon {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: rgba(62, 207, 142, 0.22);
  border: 1px solid rgba(62, 207, 142, 0.55);
  position: relative;
}
.probe-scan-done-icon::after {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.18rem;
  width: 0.28rem;
  height: 0.52rem;
  border-right: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(45deg);
}
.probe-scan-banner-text,
.probe-scan-done-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.probe-scan-banner-text strong,
.probe-scan-done-copy strong {
  font-size: 0.88rem;
  line-height: 1.35;
}
.probe-scan-detail {
  font-size: 0.8rem;
  line-height: 1.4;
}
.probe-cache-inline {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-capture-tuning {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.06);
}
.settings-capture-tuning .section-eyebrow { margin: 0 0 0.65rem; }
.settings-capture-tuning-grid {
  display: grid;
  gap: 0.85rem 1.25rem;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 720px) {
  .settings-capture-tuning-grid { grid-template-columns: 1fr; align-items: stretch; }
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg0);
  box-sizing: border-box;
}
.settings-toggle-row > input[type="hidden"] {
  display: none;
}
.settings-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.settings-audio-mux-tip-wrap.settings-tip-wrap {
  flex-shrink: 0;
}
.settings-audio-mux-label-row .settings-toggle-label {
  flex: 1;
  min-width: 0;
}
.settings-audio-mux-tip-wrap .settings-tip-panel strong {
  display: block;
  margin-top: 0.35rem;
}
.settings-audio-mux-tip-wrap .settings-tip-panel strong:first-of-type {
  margin-top: 0;
}
.settings-audio-mux-tip-wrap .settings-tip-panel p {
  margin: 0 0 0.4rem;
}
.settings-audio-mux-tip-wrap .settings-tip-panel p:last-child {
  margin-bottom: 0;
}
.settings-toggle-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.settings-toggle-desc {
  font-size: 0.8rem;
  line-height: 1.4;
}
.settings-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 2.85rem;
  height: 1.55rem;
  cursor: pointer;
}
body.sentri-edge input.settings-switch-input[type="checkbox"],
body.hub-body input.settings-switch-input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.settings-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--border);
  transition: background 0.18s ease, border-color 0.18s ease;
  pointer-events: none;
}
.settings-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.525rem;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background 0.18s ease;
}
.settings-switch-input:checked + .settings-switch-track {
  background: rgba(91, 156, 245, 0.45);
  border-color: rgba(91, 156, 245, 0.7);
}
.settings-switch-input:checked + .settings-switch-track::after {
  transform: translateX(1.18rem);
  background: #fff;
}
.settings-switch-input:focus-visible + .settings-switch-track {
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.35);
}
.settings-camera-fieldset {
  min-width: 0;
}
@media (min-width: 880px) {
  .settings-panel-grid--camera-storage .settings-camera-fieldset {
    grid-column: 1 / -1;
  }
}
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow: hidden;
}
.settings-modal[hidden] {
  display: none;
}
.settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}
.settings-modal-panel {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  max-height: min(92vh, 56rem);
  min-height: 0;
  padding: 1.35rem 1.5rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg1, var(--surface, #14161f));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overscroll-behavior: contain;
}
.settings-modal-panel--wide {
  width: min(52rem, 100%);
  max-height: min(92vh, 56rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
}
.settings-modal-panel--wide .settings-modal-title,
.settings-modal-panel--wide .settings-modal-lead {
  flex: 0 0 auto;
}
.settings-modal-panel--wide .settings-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.75rem;
  background: var(--bg1, var(--surface, #14161f));
}
.settings-modal-title {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}
.settings-modal-lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.settings-modal-input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.65rem;
  font: inherit;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  box-sizing: border-box;
}
.settings-modal-status {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.settings-modal-status:not([hidden]) {
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
}
.settings-modal-actions {
  margin: 0;
  justify-content: flex-end;
  gap: 0.65rem;
}
body.settings-modal-open {
  overflow: hidden;
}
body.settings-save-bar-visible {
  /* Keep Security / Updates / Developer cards clear of the fixed save bar. */
  padding-bottom: max(8.5rem, calc(7.25rem + env(safe-area-inset-bottom, 0px)));
}
.settings-save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 160;
  padding: 0.65rem 1rem;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
  background: rgba(12, 13, 18, 0.94);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}
.settings-save-bar[hidden] {
  display: none !important;
}
.settings-save-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  max-width: 72rem;
  margin: 0 auto;
}
.settings-save-bar-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.settings-save-bar-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
}
.settings-save-bar-pill--restart {
  color: #e8deff;
  background: rgba(139, 110, 224, 0.22);
  border-color: rgba(167, 139, 250, 0.55);
}
.settings-save-bar-pill--dirty {
  color: #ffe8c2;
  background: rgba(230, 179, 90, 0.16);
  border-color: rgba(230, 179, 90, 0.42);
}
.settings-save-bar-hint {
  font-size: 0.84rem;
  line-height: 1.4;
  min-width: 0;
}
.settings-save-bar-restart-status {
  font-size: 0.82rem;
  line-height: 1.35;
}
.settings-save-bar-actions {
  margin: 0;
  flex-shrink: 0;
}
.settings-save-bar-actions .btn[hidden],
.settings-save-bar-pill[hidden] {
  display: none !important;
}
.settings-save-bar--restart .settings-save-bar-pill:first-child {
  border-color: rgba(167, 139, 250, 0.35);
}
.btn-save-restart {
  background: linear-gradient(180deg, #a78bfa 0%, #7c5fd4 100%);
  border-color: #9b7cf5;
  color: #fff;
}
.btn-save-restart:hover {
  filter: brightness(1.08);
  color: #fff;
}
.settings-tip-wrap { position: relative; display: inline-flex; }
.settings-tip-trigger {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.settings-tip-trigger:hover,
.settings-tip-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.settings-tip-panel {
  position: absolute;
  z-index: 300;
  left: 0;
  top: calc(100% + 0.35rem);
  min-width: min(22rem, 88vw);
  max-width: 26rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  background-color: #1a1e2c;
  background: linear-gradient(180deg, #222636 0%, #171a24 100%);
  border: 1px solid rgba(58, 66, 88, 0.95);
  border-radius: 10px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.settings-tip-panel a {
  color: var(--accent);
  font-weight: 600;
}
.settings-tip-wrap:hover .settings-tip-panel:not([hidden]),
.settings-tip-wrap:focus-within .settings-tip-panel:not([hidden]) {
  display: block;
}
@media (hover: none) {
  .settings-tip-panel {
    min-width: min(22rem, 92vw);
  }
}
.telemetry-inline-tip.settings-tip-wrap {
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
.telemetry-tip-compact.settings-tip-trigger {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.62rem;
  flex-shrink: 0;
}
.telemetry-near-full-short {
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.25;
}
.telemetry-near-full-tip {
  flex-wrap: wrap;
}
.stat-grid--overview-storage {
  gap: 0.45rem;
}
.stat-grid--overview-storage .stat--near-full-compact dd {
  line-height: 1.35;
}
.telemetry-adapter-tip .telemetry-adapter-pill {
  max-width: min(100%, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hwcheck-phase-detail {
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(91, 156, 245, 0.1);
  border: 1px solid rgba(91, 156, 245, 0.28);
  line-height: 1.45;
  font-size: 0.8rem;
}
.settings-select-summary {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  min-height: 1.2em;
}
.capture-effective {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
}
.capture-effective-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.65rem;
}
.capture-effective-head .section-eyebrow {
  margin: 0;
}
.capture-effective-meta {
  font-size: 0.78rem;
}
.capture-effective-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0;
}
@media (max-width: 640px) {
  .capture-effective-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.capture-stat {
  margin: 0;
  min-width: 0;
}
.capture-stat--wide {
  grid-column: 1 / -1;
}
.capture-stat dt {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.capture-stat dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.capture-effective-note {
  margin-top: 0.5rem;
}
.capture-recording-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.capture-recording-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.capture-recording-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
.capture-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.capture-chip--preset {
  background: rgba(91, 156, 245, 0.12);
  border-color: rgba(91, 156, 245, 0.35);
  color: #b8d4ff;
}
.capture-effective-line {
  margin: 0.35rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
}
.settings-encoding-effective { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.settings-form select,
.settings-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]) {
  font-size: 0.92rem;
}
.settings-form select option {
  font-size: 0.92rem;
}
.field-label-like {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.check-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  margin-bottom: 0.25rem;
}
@media (min-width: 560px) {
  .check-grid { grid-template-columns: 1fr 1fr; }
}
.check-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg0);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.check-tile:hover { border-color: rgba(91, 156, 245, 0.45); background: rgba(91, 156, 245, 0.06); }
.check-tile:focus-within {
  border-color: rgba(91, 156, 245, 0.55);
}
.check-tile-control {
  position: relative;
  flex-shrink: 0;
  width: 2.85rem;
  height: 1.55rem;
  margin: 0.12rem 0 0 0;
}
.check-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.check-switch {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--border);
  transition: background 0.18s ease, border-color 0.18s ease;
  pointer-events: none;
}
.check-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.525rem;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background 0.18s ease;
}
.check-tile .check-native:checked + .check-switch {
  background: rgba(91, 156, 245, 0.45);
  border-color: rgba(91, 156, 245, 0.7);
}
.check-tile .check-native:checked + .check-switch::after {
  transform: translateX(1.18rem);
  background: #fff;
}
.check-tile .check-native:focus-visible + .check-switch {
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.35);
}
.check-tile-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.check-tile-title { font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.check-tile-title .badge { margin-left: 0.25rem; }
.check-tile-desc { font-size: 0.8rem; line-height: 1.4; }
.check-tile-inline {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 0.75rem;
}
.check-tile-inline .check-tile-control { margin-top: 0; }
.settings-form-actions {
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  margin-top: 1.1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.fieldset-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: var(--bg1);
}
.fieldset-card legend {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0 0.5rem;
  color: var(--text);
}

/* Recording / sync schedule — horizontal day toggles + compact time rows. */
.settings-schedule-days {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.85rem 0 0.5rem;
}
.settings-schedule-day-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.15rem;
}
.settings-day-toggle {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.settings-day-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.settings-day-toggle-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.settings-day-toggle:hover .settings-day-toggle-face {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}
.settings-day-toggle--on .settings-day-toggle-face,
.settings-day-toggle:has(.settings-day-toggle-input:checked) .settings-day-toggle-face {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.16));
  color: var(--text);
}
.settings-day-toggle-input:focus-visible + .settings-day-toggle-face {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.settings-schedule-windows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.settings-schedule-day-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}
.settings-schedule-day-name {
  font-weight: 650;
  font-size: 0.88rem;
  color: var(--text);
}
.settings-schedule-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-width: 0;
  justify-content: flex-end;
}
.settings-schedule-sep {
  flex: 0 0 auto;
  font-weight: 600;
}
/* Match global input:not([...]) specificity so width:auto wins. */
.settings-schedule-days input.settings-schedule-time:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  width: auto;
  max-width: 9.75rem;
  min-width: 7.25rem;
  flex: 0 1 auto;
  margin: 0;
}
@media (max-width: 560px) {
  .settings-schedule-day-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .settings-schedule-times {
    width: 100%;
    justify-content: flex-start;
  }
  .settings-schedule-days input.settings-schedule-time:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
    flex: 1 1 7rem;
    max-width: none;
  }
}
.field {
  margin: 0.85rem 0;
}
.field label, .field > span:first-child {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
/* Text-like controls — exclude toggles, buttons, and file pickers. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]),
select,
textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg0);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.2);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]):disabled,
select:disabled,
textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]):-webkit-autofill,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]):-webkit-autofill:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg0) inset;
  transition: background-color 99999s ease-out 0s;
}
select option {
  background: var(--bg1);
  color: var(--text);
}
.field-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.65rem 0;
  flex-wrap: wrap;
}
.field-check input { width: auto; }
.field-hint {
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0.3rem 0 0 0;
  max-width: 48ch;
}
.field-check .field-hint {
  flex: 1 0 100%;
  margin: 0.2rem 0 0 0;
  max-width: 56ch;
}
.settings-form input.settings-input-readonly {
  opacity: 0.82;
  cursor: not-allowed;
}
.form-actions { margin-top: 1.5rem; }
.badge {
  font-size: 0.65rem;
  vertical-align: middle;
  background: rgba(124, 77, 255, 0.2);
  color: #c4a7ff;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.35rem;
}
.badge-live {
  background: rgba(255, 92, 92, 0.18);
  color: #ff8a8a;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Pulse lives on ::before (status dot) only — not the whole badge tile. */
}
.badge-muted {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.row-in-progress {
  background: rgba(255, 92, 92, 0.04);
}
.row-in-progress td:first-child {
  border-left: 3px solid rgba(255, 92, 92, 0.7);
}

/* Tables & library */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--bg1);
}
.table th, .table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  background: var(--bg2);
  white-space: nowrap;
}
.table tr:last-child td { border-bottom: none; }
.table a { font-weight: 600; }

.filters-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.25rem;
}
.filters-card .field { margin: 0; }

.day-heading {
  font-size: 1rem;
  margin: 1.75rem 0 0.5rem 0;
  color: var(--accent);
}
.day-group:first-of-type .day-heading { margin-top: 0; }

.player {
  width: 100%;
  max-height: 72vh;
  min-height: 200px;
  display: block;
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.player-shell {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.player-shell .player {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  border: none;
  border-radius: 0;
}

/* Console / system pages */
.json-preview {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  background: var(--bg0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-view {
  max-height: 60vh;
  overflow-y: auto;
}

.json-accordion {
  position: relative;
  margin-top: 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(42, 49, 66, 0.75);
  background: rgba(0, 0, 0, 0.12);
}
.json-accordion:first-of-type {
  margin-top: 0;
}
.json-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem 0.4rem;
}
.json-accordion-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
  color: var(--muted);
}
.json-accordion .json-preview {
  margin: 0;
  border: none;
  border-radius: 0 0 8px 8px;
  max-height: 55vh;
}
.json-accordion.is-collapsed .json-accordion-pre {
  max-height: 4.5rem;
  overflow: hidden;
  padding-bottom: 2rem;
  mask-image: linear-gradient(to bottom, #000 20%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 95%);
}
.json-accordion.is-collapsed .json-accordion-pre::-webkit-scrollbar {
  display: none;
}
.json-accordion-toggle {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  border: none;
  background: transparent;
  color: rgba(91, 156, 245, 0.85);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  z-index: 2;
}
.json-accordion-toggle:hover,
.json-accordion-toggle:focus-visible {
  color: var(--text);
  outline: none;
  box-shadow: 0 0 0 1px rgba(91, 156, 245, 0.5);
}
.json-accordion:not(.is-collapsed) .json-accordion-toggle {
  position: static;
  transform: none;
  display: block;
  margin: 0.35rem auto 0.65rem;
}
.btn-copy-quiet {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
}
.hwcheck-history-table .hwcheck-col-actions {
  white-space: nowrap;
  text-align: right;
}
.hwcheck-copy-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.hwcheck-copy-btn {
  border: none;
  background: transparent;
  color: rgba(91, 156, 245, 0.95);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hwcheck-copy-btn .fa-copy {
  font-size: 0.95rem;
  line-height: 1;
}
.hwcheck-copy-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) scale(0.88);
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text);
  background: rgba(62, 207, 142, 0.95);
  border: 1px solid rgba(129, 199, 132, 0.85);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition:
    opacity 0.12s ease,
    transform 0.22s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.hwcheck-copy-pop.hwcheck-copy-pop--error {
  background: rgba(244, 67, 54, 0.18);
  border-color: rgba(244, 67, 54, 0.55);
  color: #ffcdd2;
}
.hwcheck-copy-pop.hwcheck-copy-pop--show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.hwcheck-copy-btn:hover,
.hwcheck-copy-btn:focus-visible {
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(91, 156, 245, 0.45);
}
.global-recording-popout {
  border: none;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0.35rem 0.55rem;
  min-height: 2.75rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.global-recording-popout:hover,
.global-recording-popout:focus-visible {
  color: #fff;
  outline: none;
}

/* —— Live logs console (/system/logs) —— */
.page-head--compact h1 {
  margin-bottom: 0.35rem;
}
.page-head--compact p:last-child {
  margin-bottom: 0;
}

.logs-page .logs-console {
  display: flex;
  flex-direction: column;
  min-height: calc(72vh + 120px);
  padding: 0;
  overflow: hidden;
}

.logs-files {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.9rem 0.75rem;
}

.logs-files > summary {
  cursor: pointer;
  font-weight: 600;
}

.logs-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.55rem;
  max-height: 10.5rem;
}

.logs-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
}

.logs-file-role {
  text-transform: capitalize;
  font-size: 0.82rem;
  font-weight: 600;
}

.logs-file-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.logs-file-meta {
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .logs-file-row {
    grid-template-columns: auto 1fr;
  }
  .logs-file-meta,
  .logs-file-copy {
    grid-column: 1 / -1;
  }
}

.logs-toolbar {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg1, var(--surface));
  position: sticky;
  top: 0;
  z-index: 4;
}

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

.logs-toolbar-row--filters {
  align-items: flex-end;
}

.logs-toolbar-row--actions .logs-toolbar-cluster--end {
  margin-left: auto;
}

.logs-toolbar-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

.logs-toolbar-cluster--grow {
  flex: 1 1 16rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem 0.65rem;
  min-width: min(100%, 12rem);
}

.logs-field-inline--refresh {
  min-width: 5.5rem;
}

.logs-select-poll {
  min-width: 7.5rem;
}

@media (max-width: 720px) {
  .logs-toolbar-row--actions .logs-toolbar-cluster--end {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .logs-toolbar-cluster--grow {
    flex: 1 1 100%;
    min-width: 0;
  }
  .logs-toolbar-row--filters {
    align-items: flex-start;
  }
  .logs-level-chips {
    row-gap: 0.42rem;
  }
  .logs-chip {
    min-height: 2.52rem;
    padding: 0.35rem 0.72rem;
    font-size: 0.82rem;
  }
  .logs-page .logs-console {
    min-height: auto;
  }
  .logs-viewport {
    height: auto;
    min-height: min(340px, 48vh);
    max-height: min(52vh, calc(100dvh - 15rem));
  }
}

.logs-toolbar-label {
  margin-right: 0.35rem;
}

.logs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.logs-toggle input {
  cursor: pointer;
}

.logs-level-chips .logs-chip {
  font-variant-numeric: tabular-nums;
}

.logs-chip {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg0);
  font-size: 0.78rem;
  cursor: pointer;
  color: inherit;
}

.logs-chip:hover {
  border-color: var(--accent, #66a9ff);
}

.logs-chip--active {
  background: rgba(100, 181, 246, 0.18);
  border-color: rgba(100, 181, 246, 0.55);
  font-weight: 600;
}

.logs-field-inline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.76rem;
}

.logs-field-inline label {
  color: var(--muted);
}

.logs-field-grow {
  min-width: 10rem;
  flex: 1 1 12rem;
}

.logs-field-inline--refresh {
  flex: 0 0 auto;
}

.logs-select-poll {
  min-width: 4.25rem;
  max-width: 100%;
}

.logs-select,
.logs-input {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg0);
  color: inherit;
}

.logs-input-narrow {
  width: 4.75rem;
  max-width: 100%;
}

.logs-viewport {
  flex: 1 1 auto;
  min-height: 0;
  height: 72vh;
  max-height: 72vh;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border) 80%, transparent)
    color-mix(in srgb, var(--bg0) 92%, var(--border));
  background: var(--bg0);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.logs-viewport::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.logs-viewport::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.logs-viewport::-webkit-scrollbar-track {
  background: rgba(127, 127, 127, 0.08);
  border-radius: 6px;
}

.logs-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.65rem 0.85rem;
}

.log-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  padding: 0.22rem 0.35rem;
  border-radius: 4px;
  font-size: 0.74rem;
  line-height: 1.42;
  cursor: pointer;
}

.log-line:nth-child(even) {
  background: rgba(127, 127, 127, 0.04);
}

.log-line--debug {
  color: var(--muted, #8b949e);
}
.log-line--info {
  border-left: 2px solid rgba(136, 192, 208, 0.55);
}
.log-line--warning {
  border-left: 2px solid rgba(235, 203, 139, 0.85);
  background: rgba(235, 203, 139, 0.06);
}
.log-line--error,
.log-line--critical {
  border-left: 2px solid rgba(247, 118, 142, 0.9);
  background: rgba(247, 118, 142, 0.07);
}

.log-ts {
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.log-level-pill {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  border: 1px solid transparent;
}

.log-source-chip {
  font-size: 0.65rem;
  color: var(--muted, #8b949e);
  white-space: nowrap;
  font-weight: 500;
}

.logs-toolbar--compact .logs-toolbar-row--actions {
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.logs-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

.logs-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.logs-detail-dialog {
  position: relative;
  z-index: 1;
  width: min(40rem, 100%);
  max-height: min(80vh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.logs-detail-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.logs-detail-meta {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
}

.logs-detail-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.35rem 1rem;
  margin: 0;
}

.logs-detail-kv dt {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0;
}

.logs-detail-kv dd {
  margin: 0;
  font-size: 0.85rem;
}

.logs-detail-body {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  overflow: auto;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-line--debug .log-level-pill {
  border-color: rgba(148, 163, 184, 0.45);
  color: rgba(148, 163, 184, 0.95);
}
.log-line--info .log-level-pill {
  border-color: rgba(136, 192, 208, 0.5);
}
.log-line--warning .log-level-pill {
  border-color: rgba(235, 203, 139, 0.6);
  color: #ebcb8b;
}
.log-line--error .log-level-pill,
.log-line--critical .log-level-pill {
  border-color: rgba(247, 118, 142, 0.7);
  color: #f7768e;
}

.log-component-tag {
  font-size: 0.65rem;
  color: rgba(157, 197, 255, 0.95);
  background: rgba(100, 120, 200, 0.12);
  padding: 0.05rem 0.38rem;
  border-radius: 3px;
  white-space: nowrap;
}

.log-event {
  font-weight: 650;
}

.log-msg {
  flex: 1 1 100%;
  margin-left: 0;
  color: rgba(226, 232, 240, 0.92);
  word-break: break-word;
}

.log-msg-raw {
  white-space: pre-wrap;
}

.log-kv-list {
  display: inline;
}

.log-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.log-link {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.06rem 0.4rem;
  border-radius: 3px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  background: rgba(125, 211, 252, 0.08);
  color: rgba(147, 213, 255, 1);
  text-decoration: none;
}

.log-link:hover {
  border-color: rgba(125, 211, 252, 0.85);
  background: rgba(125, 211, 252, 0.15);
}

.log-search-hit {
  background: rgba(255, 230, 109, 0.35);
  padding: 0 0.1rem;
  border-radius: 2px;
}

.log-traceback-wrap {
  flex: 1 1 100%;
  margin-top: 0.15rem;
}

.log-traceback-toggle {
  font-size: 0.65rem;
  padding: 0.08rem 0.45rem;
  border-radius: 3px;
  border: 1px solid rgba(247, 118, 142, 0.55);
  background: rgba(247, 118, 142, 0.1);
  color: #f7768e;
  cursor: pointer;
}

.log-traceback-toggle:hover {
  background: rgba(247, 118, 142, 0.18);
}

.log-traceback {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(127, 127, 127, 0.35);
  font-size: 0.68rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 18rem;
}

.log-line--expanded {
  align-items: flex-start;
}

.logs-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  padding: 0.45rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
}

.logs-status-item {
  font-variant-numeric: tabular-nums;
}

.logs-status-badge {
  padding: 0.06rem 0.42rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.logs-status-badge--paused {
  background: rgba(240, 113, 120, 0.12);
  border-color: rgba(240, 113, 120, 0.45);
}

.readiness-banner {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
}
.readiness-banner.ok { background: rgba(62, 207, 142, 0.1); border-color: rgba(62, 207, 142, 0.4); }
.readiness-banner.bad { background: rgba(240, 113, 120, 0.1); border-color: rgba(240, 113, 120, 0.4); }

.onboarding-steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.step-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--bg2);
  border: 2px solid var(--border);
  color: var(--muted);
}
.step-dot.active { border-color: var(--accent); color: var(--accent); background: rgba(91, 156, 245, 0.12); }
.step-dot.done { border-color: var(--success); color: var(--success); }
.onboarding-page-head .onboarding-page-lead {
  margin: 0.25rem 0 0;
  max-width: 32rem;
}
.onboarding-card { overflow: hidden; }
.onboarding-mini-list { margin-top: 0.5rem; padding-left: 1.1rem; }
.onboarding-issue-list { list-style: disc; margin: 0.75rem 0 0 1.25rem; }
.onboarding-form { margin-top: 1rem; }
.onboarding-details { margin-top: 1.5rem; }

.onboarding-camera-busy-panel {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(230, 179, 90, 0.45);
  background: linear-gradient(135deg, rgba(230, 179, 90, 0.12), rgba(12, 14, 20, 0.5));
}
.onboarding-camera-busy-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.onboarding-camera-busy-form { margin-top: 0.75rem; }

.onboarding-preview-block { margin-top: 1rem; }
.onboarding-preview-wrap {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboarding-preview-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.onboarding-preview-wrap.is-failed .onboarding-preview-img { display: none; }
.onboarding-preview-wrap.is-failed { padding: 1rem; min-height: auto; }
.onboarding-preview-wrap.is-failed .onboarding-preview-fallback { display: block !important; }

.onboarding-status-panel {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}
.onboarding-status-panel-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.onboarding-status-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.65rem 1rem;
}
.onboarding-status-grid dt {
  margin: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.onboarding-status-grid dd {
  margin: 0.2rem 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
}
.onboarding-status-warn {
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(240, 113, 120, 0.1);
  border: 1px solid rgba(240, 113, 120, 0.35);
  font-size: 0.85rem;
}
.onboarding-record-toggle label { line-height: 1.4; }

.onboarding-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.onboarding-pill--live {
  color: var(--success);
  border: 1px solid rgba(62, 207, 142, 0.45);
  background: rgba(62, 207, 142, 0.12);
}
.onboarding-pill--idle {
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}
.onboarding-pill--neutral {
  color: var(--accent);
  border: 1px solid rgba(91, 156, 245, 0.4);
  background: rgba(91, 156, 245, 0.08);
}

.onboarding-done {
  text-align: center;
  padding: 0.25rem 0 0.5rem;
}
.onboarding-done-hero {
  margin-bottom: 1.5rem;
}
.onboarding-done-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  color: var(--success);
  background: linear-gradient(145deg, rgba(62, 207, 142, 0.22), rgba(62, 207, 142, 0.06));
  border: 2px solid rgba(62, 207, 142, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.onboarding-done-title {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.onboarding-done-lead {
  margin: 0 auto;
  max-width: 26rem;
  font-size: 1rem;
  line-height: 1.45;
}
.onboarding-done-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin: 0 auto 1.5rem;
  max-width: 42rem;
  text-align: left;
}
.onboarding-done-card {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
}
.onboarding-done-card-kicker {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.onboarding-done-card-value {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
}
.onboarding-done-cta {
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.onboarding-done-cta .btn i { margin-right: 0.35rem; opacity: 0.9; }
.onboarding-done-form {
  justify-content: center;
  padding-top: 1rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.onboarding-contrib-hint {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  max-width: 42rem;
}
.settings-contrib-hint { margin-top: 0.85rem; }
.settings-lead-compact {
  margin: 0 0 0.35rem 0;
  max-width: 44rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.api-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.api-link-grid a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.api-link-grid a:hover { border-color: var(--accent); text-decoration: none; }

kbd { font-size: 0.8em; padding: 0.1rem 0.35rem; background: var(--bg2); border-radius: 4px; border: 1px solid var(--border); }

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

/* Settings polish */
.card-restart {
  margin-bottom: 1.75rem;
  border-left: 4px solid rgba(91, 156, 245, 0.65);
}
.card-restart .card-title-row h2 { font-size: 1.05rem; }
.card-lead { margin: 0 0 0.75rem 0; font-size: 0.92rem; line-height: 1.5; max-width: 62ch; }
.restart-actions { align-items: center; }
.restart-status { font-size: 0.88rem; min-height: 1.25rem; }
.settings-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75rem 0 0.65rem 0;
}
.settings-form .settings-section-label:first-of-type { margin-top: 0; }
.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem 0;
}
.field-spaced-top { margin-top: 0.75rem; }
.card-hints { margin-top: 2rem; }
.hint-list { margin: 0; padding-left: 1.15rem; font-size: 0.88rem; line-height: 1.65; }
.hint-list code {
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
}

@media (min-width: 1100px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

/* Library */
.library-head .library-lead { max-width: 56ch; }
.library-toolbar { margin-top: 0.85rem; align-items: center; }
.library-filters-card { margin-bottom: 1.25rem; }
.library-filters-card .filters-card { margin-bottom: 0; }
.library-empty-card p { margin: 0 0 0.5rem 0; }
.library-empty-card p:last-child { margin-bottom: 0; }
.library-clear-status { font-size: 0.85rem; }

@media (max-width: 720px) {
  .library-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.85rem;
  }
  .library-toolbar .btn {
    min-height: 2.65rem;
    justify-content: center;
  }
  #clear-all-btn {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
    margin-top: 0.35rem;
  }
  .library-filters-card .filters-card {
    grid-template-columns: 1fr;
  }
  .library-session-actions {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
  }
  .library-session-actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    min-height: 2.65rem;
  }
  .table--library.table th,
  .table--library.table td {
    padding: 0.52rem 0.58rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 560px) {
  .table--library-clip th:nth-child(4),
  .table--library-clip td:nth-child(4),
  .table--library-segment th:nth-child(3),
  .table--library-segment td:nth-child(3),
  .table--session-clips th:nth-child(5),
  .table--session-clips td:nth-child(5),
  .table--session-segments th:nth-child(5),
  .table--session-segments td:nth-child(5) {
    display: none;
  }
}

/* Calendar */
.library-calendar-head .calendar-nav { margin-top: 0.75rem; align-items: center; }
.calendar-current { font-size: 0.95rem; letter-spacing: 0.04em; }
.calendar-card { margin-top: 0.5rem; }
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.cal-wd { font-size: 0.68rem; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.cal-cell {
  min-height: 4.25rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.45rem 0.5rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cal-cell:hover { border-color: var(--accent); background: rgba(91, 156, 245, 0.06); text-decoration: none; color: var(--text); }
button.cal-cell.cal-cell--pick-day {
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 100%;
}
button.cal-cell.cal-cell--pick-day:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cal-cell--blank { border: none; background: transparent; pointer-events: none; min-height: 0; padding: 0; }
.cal-cell--today { box-shadow: 0 0 0 1px rgba(91, 156, 245, 0.5); }
.cal-cell--has { border-color: rgba(91, 156, 245, 0.35); }
.cal-cell--heat1 { background: rgba(91, 156, 245, 0.06); }
.cal-cell--heat2 { background: rgba(91, 156, 245, 0.12); border-color: rgba(91, 156, 245, 0.45); }
.cal-cell--heat3 { background: rgba(91, 156, 245, 0.2); border-color: rgba(91, 156, 245, 0.55); }
.cal-day-num { font-weight: 700; font-size: 1.05rem; }
.cal-count { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }
.cal-count--empty { opacity: 0.45; }

@media (max-width: 560px) {
  .calendar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .calendar-weekdays {
    gap: 0.22rem;
  }
  .cal-wd {
    font-size: 0.6rem;
  }
  .calendar-grid {
    gap: 0.26rem;
  }
  .cal-cell {
    min-height: 3.55rem;
    padding: 0.34rem 0.36rem;
  }
  .cal-day-num {
    font-size: 0.94rem;
  }
  .cal-count {
    font-size: 0.65rem;
  }
}

.day-timeline-card { margin-top: 0.5rem; }

.day-timeline-toolbar--rich {
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.5rem 0.72rem;
  margin-bottom: 0.62rem !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    152deg,
    rgba(91, 156, 245, 0.1) 0%,
    rgba(22, 24, 35, 0.55) 42%,
    rgba(91, 156, 245, 0.06) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.day-zoom-hint--wide {
  flex: 1 1 13rem;
  min-width: 0;
}

.day-zoom-hint strong.day-zoom-hint-k {
  font-weight: 650;
  color: rgba(255, 255, 255, 0.93);
}

.day-filmstrip-eyebrow {
  margin-bottom: 0.25rem;
}
.day-filmstrip-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.4rem;
  font-size: 0.8rem;
}
.day-filmstrip {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  grid-auto-rows: 4.35rem;
}
.day-filmstrip-cell {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.day-filmstrip-thumb-wrap {
  display: block;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.day-filmstrip-thumb-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.day-filmstrip-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  vertical-align: middle;
}
.day-filmstrip-img--fail {
  min-height: 0;
  background: repeating-linear-gradient(
    -40deg,
    rgba(91, 156, 245, 0.08),
    rgba(91, 156, 245, 0.08) 6px,
    rgba(0, 0, 0, 0.2) 6px,
    rgba(0, 0, 0, 0.2) 12px
  );
}
.day-filmstrip-img--no-media {
  min-height: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.04) 5px,
    rgba(0, 0, 0, 0.25) 5px,
    rgba(0, 0, 0, 0.25) 10px
  );
  opacity: 0.75;
}

.day-track-wrap {
  margin-top: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(0, 0, 0, 0.12);
}

.day-timeline-shell .day-ruler,
.day-timeline-shell .day-track {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.day-track-wrap::-webkit-scrollbar {
  height: 8px;
}
.day-track-wrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}
.day-track-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 8px;
}
.day-track-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

@media (max-width: 720px) {
  .day-ruler {
    min-width: 18rem;
  }
  .day-track {
    min-width: 18rem;
    height: 5.25rem;
  }
}

.day-ruler {
  display: block;
  position: relative;
  height: 1.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  pointer-events: none;
}
.day-ruler span,
.day-ruler-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.day-track {
  position: relative;
  height: 5.75rem;
  background: linear-gradient(180deg, rgba(22, 26, 38, 0.65) 0%, rgba(0, 0, 0, 0.36) 100%);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 18px 48px rgba(0, 0, 0, 0.28);
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.day-track:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.day-track:focus:not(:focus-visible) {
  outline: none;
}
.day-track:focus-visible {
  outline: 2px solid var(--accent);
}
.day-track--zoomed {
  cursor: grab;
  touch-action: none;
}

.day-track--zoomed.day-track--dragging {
  cursor: grabbing;
}
.day-track-bars {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.day-track-bars--lanes {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.2rem 0;
  box-sizing: border-box;
}
.day-track-lane {
  position: relative;
  flex: 1 1 0;
  min-height: 2.35rem;
}
.day-track-lane--solo {
  min-height: 100%;
}
.day-track-lane-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  max-width: 6.5rem;
  padding: 0 0.55rem 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text, #e8eef7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  background: linear-gradient(
    90deg,
    rgba(12, 18, 28, 0.92) 0%,
    rgba(12, 18, 28, 0.72) 55%,
    rgba(12, 18, 28, 0) 100%
  );
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-track-lane-rail {
  position: absolute;
  inset: 0;
}
.day-track--lanes {
  height: auto;
  min-height: calc(var(--day-lane-count, 1) * 2.65rem + 1.75rem);
}
.day-track-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
}
.day-track-grid span {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.day-track-grid span:last-child { border-right: none; }
.day-track-empty {
  margin: 1rem auto;
  max-width: 28rem;
  position: relative;
  z-index: 1;
  pointer-events: none;
  text-align: center;
  user-select: none;
}
.day-clip-block {
  -webkit-user-drag: none;
  user-drag: none;
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  z-index: 1;
  background: linear-gradient(180deg, rgba(91, 156, 245, 0.55) 0%, rgba(91, 156, 245, 0.22) 100%);
  border-radius: 6px;
  border: 1px solid rgba(91, 156, 245, 0.55);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.2rem 0.15rem;
  --bar-hue: 210;
}
.day-clip-block--segment {
  min-width: 0;
}
.day-clip-block--sync-gradient {
  /* Time-aligned hub/sync/edge fill — beat solid status !important rules. */
  background-image: none;
  animation: none;
}
.day-gap-band--lane {
  top: 0.15rem;
  bottom: 0.15rem;
  z-index: 0;
}
.day-track-lane--solo .day-clip-block {
  top: 1rem;
  bottom: 0.65rem;
}
.day-clip-block-label {
  font-size: 0.58rem;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}
.day-clip-block:hover { filter: brightness(1.12); z-index: 2; }
.day-clip-block--focus {
  z-index: 5;
  background: linear-gradient(
    180deg,
    rgba(255, 214, 72, 0.95) 0%,
    rgba(201, 148, 18, 0.62) 100%
  ) !important;
  border: 2px solid rgba(255, 236, 148, 0.98) !important;
  box-shadow:
    0 0 0 3px rgba(255, 193, 7, 0.42),
    0 0 20px rgba(255, 193, 7, 0.32),
    0 4px 14px rgba(0, 0, 0, 0.4);
  filter: none;
}
.day-clip-block--focus.day-clip-block--live {
  background: linear-gradient(
    180deg,
    rgba(255, 214, 72, 0.95) 0%,
    rgba(201, 148, 18, 0.62) 100%
  ) !important;
  border-color: rgba(255, 236, 148, 0.98) !important;
}
.day-clip-block--focus .day-clip-block-label {
  color: rgba(28, 22, 8, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.session-segment-nav {
  margin-top: 0.65rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.day-clip-block--live {
  background: linear-gradient(180deg, rgba(255, 92, 92, 0.55) 0%, rgba(255, 92, 92, 0.2) 100%);
  border-color: rgba(255, 120, 120, 0.75);
}
/* Phase A L0: real stint clip bars (solid; not time-bucket hatch). */
.day-clip-block--stint,
.day-clip-block[data-detail-kind="clip"] {
  opacity: 0.95;
}
.day-gap-bands,
.day-coverage-bands {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.day-gap-band {
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.22),
    rgba(148, 163, 184, 0.22) 4px,
    rgba(148, 163, 184, 0.06) 4px,
    rgba(148, 163, 184, 0.06) 8px
  );
  border: 1px dashed rgba(148, 163, 184, 0.35);
}
.day-coverage-band {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  background: rgba(91, 156, 245, 0.12);
  border-left: 1px solid rgba(91, 156, 245, 0.25);
  border-right: 1px solid rgba(91, 156, 245, 0.25);
  border-radius: 4px;
}
.day-clip-block--known-fill {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  z-index: 0;
  pointer-events: none;
  border-radius: 5px;
  background: rgba(217, 119, 6, 0.22);
  border: 1px solid rgba(251, 146, 60, 0.35);
  box-shadow: none;
  opacity: 1;
}
.day-timeline-toolbar--compact {
  gap: 0.35rem;
  align-items: center;
}
.day-zoom-hint--range {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: 0.8rem;
}
.day-zoom-help {
  flex: 0 0 auto;
  padding: 0.28rem 0.45rem;
}
.day-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--success);
  box-shadow: 0 0 10px rgba(62, 207, 142, 0.85);
  z-index: 3;
  pointer-events: none;
}
.day-now-line-label {
  position: absolute;
  top: 0.28rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--success);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  line-height: 1.1;
}
.day-analysis-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.day-analysis-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin: 0 0 0 -1px;
  padding: 0;
  border: 0;
  height: auto;
  border-radius: 1px;
  background: var(--accent, #6ea8fe);
  box-shadow: 0 0 6px rgba(110, 168, 254, 0.55);
  pointer-events: none;
  cursor: pointer;
  z-index: 6;
  appearance: none;
  -webkit-appearance: none;
}
.day-analysis-marker-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: auto;
  pointer-events: auto;
}
.day-analysis-marker--selected {
  z-index: 8;
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 1px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}
.day-analysis-marker--motion {
  background: #ffb347;
  box-shadow: 0 0 6px rgba(255, 179, 71, 0.7);
}
.day-analysis-marker--object {
  background: #7ee0a8;
  box-shadow: 0 0 6px rgba(126, 224, 168, 0.7);
}
.day-analysis-marker--scene,
.day-analysis-marker--scene_change {
  background: #c084fc;
  box-shadow: 0 0 6px rgba(192, 132, 252, 0.7);
}
.day-analysis-marker--cluster {
  width: 3px;
  margin-left: -1.5px;
  opacity: 0.95;
}
.day-analysis-marker--span {
  min-width: 2px;
  margin-left: 0;
  opacity: 0.72;
  border-radius: 2px;
}
.day-analysis-marker--span .day-analysis-marker-hit {
  left: 0;
  width: 100%;
}
.session-score-wave {
  display: block;
  width: 100%;
  height: 28px;
  pointer-events: none;
}
.session-score-wave[hidden] {
  display: none;
}

.day-brush-rect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgba(91, 156, 245, 0.12);
  border: 1px dashed rgba(91, 156, 245, 0.65);
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}
.day-zoom-hint { font-size: 0.76rem; line-height: 1.43; }
.day-zoom-hint .muted {
  opacity: 0.9;
}

/* Floating chip preview — pointer-events:auto so hover bridge into actions works */
.day-chip-popover {
  position: fixed;
  z-index: 13000;
  box-sizing: border-box;
  min-width: 15rem;
  max-width: 22rem;
  padding: 0.76rem 0.94rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    160deg,
    rgba(34, 38, 58, 0.98) 0%,
    rgba(13, 15, 24, 0.97) 100%
  );
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(91, 156, 245, 0.15);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  pointer-events: none;
}
.day-chip-popover[data-hover-preview='1'] {
  min-width: 16rem;
  max-width: 22rem;
  max-height: min(70vh, 28rem);
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.day-chip-popover .day-chip-popover-actions,
.day-chip-popover .day-chip-event-pick,
.day-chip-popover a,
.day-chip-popover button {
  pointer-events: auto;
}
.day-chip-popover[data-hover-preview='1'] .day-chip-popover-card {
  max-height: min(70vh, 28rem);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.55) rgba(0, 0, 0, 0.22);
}
.day-chip-popover[data-hover-preview='1'] .day-chip-popover-card.sentri-scroll-y,
.day-chip-popover[data-hover-preview='1'] .day-chip-popover-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 156, 245, 0.55) rgba(0, 0, 0, 0.22);
}
.day-chip-popover-card {
  padding: 0.7rem 0.85rem 0.8rem;
}
.day-chip-popover[data-hover-preview='1'] .day-chip-popover-thumb-wrap {
  margin: 0 0 0.55rem;
  border-radius: 8px;
}
.day-chip-popover-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0.55rem 0 0.65rem;
}
.day-chip-popover-facts > div {
  min-width: 0;
}
.day-chip-popover-facts dt {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(180, 196, 220, 0.72);
}
.day-chip-popover-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-chip-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.day-chip-status--hub {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}
.day-chip-status--edge {
  background: rgba(217, 119, 6, 0.18);
  color: #fdba74;
  border-color: rgba(217, 119, 6, 0.4);
}
.day-chip-status--sync {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.45);
}
.day-chip-status--err {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}
.day-chip-status--unknown {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}
.day-chip-popover-meta--scrub {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
}
.day-chip-event-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: 8.5rem;
  margin: 0.2rem 0 0.55rem;
  padding-right: 0.2rem;
}
.day-chip-event-pick {
  justify-content: flex-start;
  width: 100%;
  font-size: 0.74rem;
}
.day-chip-event-pick--active {
  border-color: var(--accent, #3b82f6);
  background: rgba(91, 156, 245, 0.14);
}
.day-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin: 0.15rem 0 0.45rem;
  font-size: 0.72rem;
  color: var(--muted, #9aa8bc);
}
.day-timeline-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.day-timeline-swatch {
  width: 0.85rem;
  height: 0.55rem;
  border-radius: 3px;
  display: inline-block;
  box-sizing: border-box;
}
.day-timeline-swatch--hub {
  background: hsl(210 62% 48%);
}
.day-timeline-swatch--edge {
  background: repeating-linear-gradient(
    -45deg,
    hsla(32, 80%, 45%, 0.95),
    hsla(32, 80%, 45%, 0.95) 3px,
    hsla(32, 80%, 45%, 0.28) 3px,
    hsla(32, 80%, 45%, 0.28) 6px
  );
  border: 1px solid hsl(32 80% 52%);
}
.day-timeline-swatch--sync {
  background: hsl(245 45% 42%);
  box-shadow: inset 0 0 0 1px rgba(199, 210, 254, 0.85);
}
.day-timeline-swatch--err {
  background: #ef4444;
}
.day-timeline-legend-note {
  font-size: 0.68rem;
}
.day-timeline-mark {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  display: inline-block;
  flex: 0 0 auto;
}
.day-timeline-mark--motion::before,
.day-timeline-mark--object::before,
.day-timeline-mark--scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
}
.day-timeline-mark--motion::before {
  background: #ffb347;
}
.day-timeline-mark--object::before {
  background: #7ee0a8;
}
.day-timeline-mark--scene::before {
  background: #c084fc;
}
.day-timeline-mark--line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  bottom: 25%;
  border-radius: 2px;
  background: rgba(255, 179, 71, 0.8);
}
.day-timeline-mark--dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #7ee0a8;
}
.day-chip-popover-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 7rem;
  overflow: hidden;
  background: rgba(12, 14, 22, 0.9);
}
.day-chip-popover-thumb-wrap--fail {
  display: none;
}
.day-chip-popover-thumb-status {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: 0.78rem;
  padding: 0.65rem;
}
.day-chip-popover-thumb-status-text {
  max-width: 14ch;
  line-height: 1.35;
}
.day-chip-popover-thumb-wrap--loading .day-chip-popover-thumb--pending {
  opacity: 0;
}
.day-chip-popover-thumb-wrap:not(.day-chip-popover-thumb-wrap--loading) .day-chip-popover-thumb-status {
  display: none;
}
.day-chip-popover-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(12, 14, 22, 0.9);
  transition: opacity 0.18s ease;
}
.day-chip-popover-thumb--placeholder,
.day-chip-popover-thumb--fail {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  font-size: 0.74rem;
  text-align: center;
  padding: 0.5rem;
}
.day-chip-popover::after {
  content: "";
  position: absolute;
  left: calc(50% - 14px);
  bottom: -7px;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid rgba(34, 38, 58, 0.98);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.day-chip-popover::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 18px;
  bottom: -18px;
  pointer-events: none;
}
.day-chip-popover[data-pop-flip='1']::after {
  top: -7px;
  bottom: auto;
  border-top: none;
  border-bottom: 8px solid rgba(13, 15, 24, 0.97);
}
.day-chip-popover[data-pop-flip='1']::before {
  bottom: auto;
  top: -18px;
}
.day-chip-popover-eyebrow {
  margin: 0 0 0.32rem 0;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: rgba(163, 170, 200, 0.95);
}
.day-chip-popover-title {
  margin: 0 0 0.38rem 0;
  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.34;
}
.day-chip-popover-meta {
  margin: 0 0 0.35rem 0;
  font-size: 0.74rem !important;
  line-height: 1.4;
}
.day-chip-popover-hint {
  margin: 0 0 0.55rem 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.4;
}
.mono--xs {
  font-size: 0.71rem !important;
}
.day-chip-popover-actions {
  margin-top: 0.08rem;
  gap: 0.38rem !important;
  flex-wrap: wrap;
}

.day-detail-card { margin-top: 1rem; }
.day-detail-heading {
  margin: 0 0 0.35rem 0;
  font-size: 1.1rem;
  font-weight: 650;
}
.day-detail-stats {
  font-size: 0.82rem;
  margin-top: 0.35rem;
}
.day-detail-tags {
  margin-bottom: 0.4rem;
  min-height: 0.85rem;
}
.day-detail-tags:empty {
  display: none;
}
.day-detail-actions {
  align-items: center;
}

.day-detail-card .section-eyebrow { margin-bottom: 0.25rem; }
.day-timeline-toolbar { margin-bottom: 0.35rem; flex-wrap: wrap; }

.preview-snapshot--dimmed { opacity: 0.38; filter: grayscale(0.35); }

/* Session player (unified chrome — no native <video controls>) */
.session-player-chrome {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.session-player-viewport {
  border-radius: 0;
  border: none;
}
.session-player-theater {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 720px);
  margin: 0 auto;
  background: #07070c;
}
.session-player-theater--bootstrapping .session-video-el,
.session-player-theater--bootstrapping .yt-video-el {
  opacity: 0.45;
}
.session-player-theater--bootstrapping::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(30, 34, 48, 0.12) 0%,
    rgba(85, 118, 185, 0.22) 45%,
    rgba(30, 34, 48, 0.12) 90%
  );
  background-size: 220% 100%;
  animation: sentri-player-skeleton-shimmer 1.05s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes sentri-player-skeleton-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
.session-play-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.12s ease;
  z-index: 5;
}
.session-play-overlay:hover {
  background: rgba(200, 56, 56, 0.88);
  transform: scale(1.05);
}
.session-play-overlay:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.session-play-overlay[hidden] {
  display: none !important;
}
.session-controls.session-controls--yt {
  background: linear-gradient(
    180deg,
    rgba(28, 28, 36, 0.92) 0%,
    rgba(12, 12, 18, 1) 100%
  );
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.session-long-clip-banner {
  margin: 0 0 0.75rem 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg2);
  font-size: 0.88rem;
}
.day-trunc-note {
  display: inline-block;
  margin-left: 0.35rem;
  white-space: normal;
}
.session-video-el {
  width: 100%;
  height: 100%;
  display: block;
}
.session-player-theater .session-video-el--stack {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.session-player-theater .session-video-el--top {
  z-index: 2;
}
.session-player-theater .session-video-el--under {
  z-index: 1;
  pointer-events: none;
}
.session-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.session-play-btn {
  flex: 0 0 auto;
  min-width: 4.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg0);
  color: var(--text);
  cursor: pointer;
}
.session-play-btn:hover { background: #252838; }
.session-play-btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.session-scrubber-wrap {
  flex: 1 1 180px;
  min-width: 0;
}
.session-scrub-ticks {
  position: relative;
  height: 0.5rem;
  margin-bottom: 0.1rem;
}
.session-scrub-tick {
  position: absolute;
  top: 0.1rem;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 1px;
  pointer-events: none;
}
.session-extra-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.session-rate-label { font-size: 0.72rem; margin: 0; }
.session-rate-select {
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg0);
  color: var(--text);
}
.session-volume {
  width: 4.5rem;
  accent-color: var(--accent);
}
.session-icon-btn {
  flex: 0 0 auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
}
.session-controls .session-scrub {
  margin-top: 0.15rem;
  width: 100%;
  accent-color: var(--accent);
}
.session-controls .scrub-meta {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}
.session-fs-btn {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 560px) {
  .session-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.72rem;
    padding: 0.72rem;
  }
  .session-play-btn {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
  }
  .session-scrubber-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
  .session-extra-controls {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }
  .session-icon-btn,
  .session-fs-btn {
    min-width: 2.75rem;
    min-height: 2.65rem;
    align-self: center;
  }
}
.session-probe-status { margin: 0 0 0.75rem 0; }
.session-chrome-wrap { margin-bottom: 0; }
.session-page-head .session-back-link {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.session-page-head .session-back-link:hover { text-decoration: underline; }
.session-page-meta { margin-top: 0.35rem; max-width: none; }
.session-empty-player { margin: 0 0 1rem 0; }
.session-clips-table-wrap {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.library-list-panel {
  margin-top: 1.25rem;
}
.library-list-panel .section-eyebrow {
  margin-bottom: 0.45rem;
}
.library-table-scroll,
.library-day-modal-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(0, 0, 0, 0.12);
}
.library-table-scroll::-webkit-scrollbar,
.library-day-modal-table-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.library-table-scroll::-webkit-scrollbar-track,
.library-day-modal-table-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}
.library-table-scroll::-webkit-scrollbar-thumb,
.library-day-modal-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.26);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.library-table-scroll::-webkit-scrollbar-thumb:hover,
.library-day-modal-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.library-table-scroll {
  max-height: min(38vh, 320px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg1);
  -webkit-overflow-scrolling: touch;
}
.library-table-scroll .table-wrap {
  margin: 0;
}
.library-table-scroll .library-empty-card--in-scroll {
  padding: 1rem 1.1rem;
  margin: 0;
  border: none;
  background: transparent;
}
.library-calendar-embed-section {
  margin-top: 0.35rem;
}
.library-calendar-embed-head .library-calendar-embed-lead {
  margin: 0.2rem 0 0.65rem 0;
  font-size: 0.88rem;
  max-width: 52ch;
}
.calendar-nav--embed {
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.35rem;
}
.calendar-card--embed {
  margin-top: 0.65rem;
  padding: 0.55rem 0.62rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border);
  background: var(--bg1);
}
.calendar-weekdays--embed {
  gap: 0.22rem;
  margin-bottom: 0.28rem;
}
.calendar-grid--embed {
  gap: 0.22rem;
}
.cal-cell--embed {
  min-height: 2.35rem;
  padding: 0.26rem 0.3rem;
  border-radius: 8px;
}
.cal-cell--embed .cal-day-num {
  font-size: 0.86rem;
}
.cal-cell--embed .cal-count {
  font-size: 0.58rem;
  margin-top: 0.06rem;
}

/* Library day modal (timeline + viewport segment table) */
body.library-day-modal-open {
  overflow: hidden;
}
.library-day-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
}
.library-day-modal[hidden] {
  display: none !important;
}
.library-day-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 0;
}
.library-day-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-width: 100%;
  margin: 0 auto 2rem;
  padding: 0.85rem 1rem 1rem;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.library-day-modal-toolbar {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.library-day-modal-title {
  margin: 0;
}
.library-day-modal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.55rem;
}
.library-day-modal-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}
.library-day-modal-filter-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #9aa3b2);
}
.library-day-modal-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.library-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border, #333);
  background: var(--bg2, rgba(255, 255, 255, 0.03));
  color: var(--text);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
  opacity: 0.55;
}
.library-day-chip > i {
  flex-shrink: 0;
  font-size: 0.9em;
  line-height: 1;
}
.library-day-chip > span {
  line-height: 1.2;
}
.library-day-chip--on {
  opacity: 1;
  font-weight: 600;
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
}
.library-day-chip--gap.library-day-chip--on {
  border-color: rgba(148, 163, 184, 0.75);
  background: rgba(148, 163, 184, 0.12);
}
.library-day-modal-shell {
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 0.55rem 0.65rem 0.65rem;
  background: var(--bg1);
}
.library-day-modal-shell .day-timeline-card {
  margin: 0;
  border: none;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
}
.library-day-modal-shell .day-track {
  min-height: 5.25rem;
}

/* Skeleton timeline (library modal loading — matches real layout heights) */
@keyframes day-timeline-skel-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.day-timeline-card--skeleton .day-timeline-skel-toolbar {
  margin-bottom: 0.35rem;
  gap: 0.35rem;
  align-items: center;
}
.day-timeline-skel-btn,
.day-timeline-skel-hint,
.day-timeline-skel-eyebrow,
.day-timeline-skel-filmstrip,
.day-timeline-skel-ruler,
.day-timeline-skel-bar {
  border-radius: 8px;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.1) 42%,
    rgba(255, 255, 255, 0.04) 86%
  );
  background-size: 200% 100%;
  animation: day-timeline-skel-shimmer 1.15s ease-in-out infinite;
}
.day-timeline-skel-btn {
  display: inline-block;
  width: 2.25rem;
  height: 1.85rem;
}
.day-timeline-skel-hint {
  flex: 1 1 12rem;
  height: 1rem;
  min-width: 8rem;
  margin-left: 0.25rem;
}
.day-timeline-skel-eyebrow {
  height: 0.75rem;
  width: 42%;
  max-width: 14rem;
  margin: 0.35rem 0 0.25rem;
}
.day-timeline-skel-filmstrip {
  height: 4.75rem;
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}
.day-timeline-skel-ruler {
  height: 1.15rem;
  margin-bottom: 0.35rem;
}
.day-track--skeleton {
  pointer-events: none;
  cursor: default;
  background: rgba(22, 26, 38, 0.45);
}
.day-timeline-skel-bar-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 3%;
  padding: 1rem 3% 0.65rem;
  box-sizing: border-box;
}
.day-timeline-skel-bar {
  flex: 1 1 0;
  min-height: 2rem;
  align-self: stretch;
}
.library-day-modal-table-section {
  margin-top: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.library-day-modal-range {
  margin: 0 0 0.45rem 0;
  font-size: 0.86rem;
}
.library-day-modal-table-scroll {
  max-height: min(28vh, 280px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg1);
}

/* Clip player — YouTube-inspired chrome */
.yt-watch-shell {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.yt-player-chrome {
  background: #0f0f0f;
  border: none;
}
.yt-video-shell {
  position: relative;
  background: #000;
  overflow: hidden;
}
.yt-video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
}
.yt-center-play {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 0, 0, 0.92);
  color: #fff;
  z-index: 5;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.yt-center-play:hover {
  background: #ff1a1a;
  transform: scale(1.06);
}
.yt-center-play-icon {
  display: block;
  margin-left: 0.18rem;
  font-size: 1.5rem;
  line-height: 1;
}
.yt-control-dock {
  padding: 0 0.65rem 0.55rem;
  background: #0f0f0f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.yt-control-dock--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 0.2rem 0 0.35rem;
  margin: 0;
  border: none;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 42%,
    rgba(0, 0, 0, 0.78) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.session-player-viewport:hover .yt-control-dock--overlay,
.session-player-viewport:focus-within .yt-control-dock--overlay,
.session-player-viewport.yt-paused-ui .yt-control-dock--overlay {
  opacity: 1;
  pointer-events: auto;
}
.yt-control-dock--overlay:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.yt-scrub-row {
  padding: 0.15rem 0 0.05rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Theater scrub: block layout + explicit width (avoid legacy flex shorthand from .session-scrubber-wrap). */
.yt-scrub-stack {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.yt-control-dock--overlay .session-scrub-ticks {
  width: 100%;
  box-sizing: border-box;
}
.yt-scrub-shell {
  position: relative;
  width: 100%;
  height: 0.42rem;
  margin: 0.1rem 0 0.05rem;
  box-sizing: border-box;
}
.yt-scrub-visual {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.26rem;
  border-radius: 99px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(20, 22, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
.yt-scrub-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  max-width: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.32);
  z-index: 1;
}
.yt-scrub-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  max-width: 100%;
  border-radius: inherit;
  background: #ff0000;
  z-index: 2;
  box-shadow: 0 0 6px rgba(255, 60, 60, 0.35);
}
.yt-control-dock--overlay .yt-scrub-range-input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 4;
}
.yt-control-dock--overlay .yt-scrub-range-input:disabled {
  cursor: not-allowed;
}
.yt-control-dock--overlay .yt-scrub-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3rem;
  height: 1.35rem;
}
.yt-control-dock--overlay .yt-scrub-range-input::-moz-range-thumb {
  width: 3rem;
  height: 1.35rem;
  border: none;
  background: transparent;
}
.yt-control-dock--overlay .yt-scrub-range-input::-moz-range-track {
  background: transparent;
}
.yt-progress-rail {
  height: 0.2rem;
  border-radius: 99px;
  accent-color: #ff0000;
  background: rgba(255, 255, 255, 0.22);
}
.yt-scrub-ticks {
  margin-bottom: 0.06rem;
}
.yt-controls-bar {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: nowrap;
  padding: 0 0.45rem 0.05rem;
  box-sizing: border-box;
}
.yt-ctrl-btn {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 1.85rem;
  padding: 0.18rem 0.42rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #f1f1f1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.yt-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.yt-ctrl-btn:focus-visible {
  outline: 2px solid #ff4444;
  outline-offset: 2px;
}
.yt-play-toggle {
  min-width: 2.1rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.yt-play-glyph {
  display: inline-block;
  font-size: 0.95rem;
}
.yt-fs-btn {
  min-width: 2rem;
  font-size: 0.95rem;
}
.yt-time-display {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #eee;
  margin: 0;
  flex: 0 0 auto;
}
.yt-time-sep {
  margin: 0 0.12rem;
  opacity: 0.55;
}
.yt-controls-spacer {
  flex: 1 1 2rem;
  min-width: 0;
}
.yt-secondary-controls {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: nowrap;
}
.yt-rate-select {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.08rem 1.1rem 0.08rem 0.28rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(0, 0, 0, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23ddd' d='M3 4.5 6 8 9 4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.22rem center;
  background-size: 10px 10px;
  color: #eee;
  width: auto;
  min-width: 0;
  max-width: fit-content;
  field-sizing: content;
  -webkit-appearance: none;
  appearance: none;
}
.yt-rate-select:focus-visible {
  outline: 2px solid #ff4444;
  outline-offset: 1px;
}
@supports not (field-sizing: content) {
  .yt-rate-select {
    width: 3.25rem;
  }
}
.yt-audio-cluster {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.yt-mute-btn {
  padding: 0.12rem 0.32rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.yt-volume {
  width: 3rem;
  height: 1rem;
  accent-color: #ff0000;
}
.yt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.yt-key-hint {
  margin: 0.12rem 0 0 0;
  padding: 0 0.45rem;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-size: 0.62rem;
  opacity: 0.65;
}

.library-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  justify-content: flex-end;
}
.library-session-actions .btn { margin: 0; white-space: nowrap; }

/* Site footer, help browser, diagnostics */
.site-footer {
  padding: 1.25rem 1rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}
.site-footer-inner {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
}
.site-footer-brand { color: var(--text); }

.help-index-head .help-lead {
  max-width: 52rem;
  line-height: 1.62;
}
.help-readme-intro {
  margin-bottom: 1.75rem;
}
.help-readme-embed.help-markdown {
  margin-top: 0.85rem;
  padding-top: 0;
  border-radius: var(--radius, 12px);
}
.help-handbook-directory h2 {
  margin-top: 0.25rem;
}
.help-github-banner {
  line-height: 1.62;
}

.help-index-head .tiny-code {
  font-size: 0.82em;
}
.help-quick-links {
  margin-top: 0.85rem;
  line-height: 1.6;
}
.help-chip {
  font-weight: 600;
}
.help-chip-primary {
  font-weight: 700;
}
.help-chip-help { font-weight: 400; }
.help-topic-anchor {
  font-weight: 600;
}
.help-topic-meta { margin-left: 0.25rem; }
.help-doc-head .help-doc-meta {
  margin-top: 0.65rem;
  line-height: 1.62;
}
.help-doc-meta-label { opacity: 0.85; }
.help-doc-meta code { word-break: break-word; }

.help-topic-list {
  list-style: none;
  padding: 1rem 1.25rem;
  margin: 0;
}
.help-topic-list li { padding: 0.35rem 0; }
.help-markdown.prose {
  padding: 1.25rem 1.35rem;
  line-height: 1.68;
  overflow-x: auto;
}
.help-markdown.prose :first-child { margin-top: 0; }
.help-markdown.prose h1,
.help-markdown.prose h2,
.help-markdown.prose h3 { margin-top: 1.4rem; }
.help-markdown.prose table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.help-markdown.prose th,
.help-markdown.prose td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
}
.help-markdown.prose code {
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
}
.help-markdown.prose pre {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 8px;
}
.help-markdown.prose pre code { background: transparent; padding: 0; }
.help-markdown.prose blockquote {
  margin: 0.75rem 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.telemetry-hw-actions { gap: 0.5rem; flex-wrap: wrap; }
.telemetry-hw-dur { margin-top: 0.85rem; max-width: 12rem; }

.hwcheck-table .hwcheck-col-status { width: 7rem; }
.diag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
}
.diag-pill--pass { color: var(--success); border-color: rgba(62, 207, 142, 0.45); background: rgba(62, 207, 142, 0.1); }
.diag-pill--warn { color: var(--warn); border-color: rgba(230, 179, 90, 0.45); background: rgba(230, 179, 90, 0.09); }
.diag-pill--fail { color: var(--danger); border-color: rgba(240, 113, 120, 0.45); background: rgba(240, 113, 120, 0.08); }
.diag-pill--mode {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  gap: 0.35rem;
}
.diag-pill--mode i { font-size: 0.72rem; opacity: 0.92; }
.diag-pill--mode-quick {
  color: var(--accent);
  border-color: rgba(91, 156, 245, 0.45);
  background: rgba(91, 156, 245, 0.1);
}
.diag-pill--mode-full {
  color: var(--warn);
  border-color: rgba(230, 179, 90, 0.45);
}
.diag-pill--mode-unknown { color: var(--muted); }

.hwcheck-overall {
  margin-top: 0.75rem;
  padding: 0.65rem 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.hwcheck-overall--pass {
  border-color: rgba(62, 207, 142, 0.45);
  background: rgba(62, 207, 142, 0.1);
}
.hwcheck-overall--warn {
  border-color: rgba(230, 179, 90, 0.45);
  background: rgba(230, 179, 90, 0.08);
}
.hwcheck-overall--fail {
  border-color: rgba(240, 113, 120, 0.45);
  background: rgba(240, 113, 120, 0.08);
}

#hwcheck-log-view { max-height: 28vh; font-size: 0.74rem; }

.hwcheck-progress {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(42, 49, 66, 0.9);
  background: linear-gradient(180deg, rgba(27, 30, 42, 0.95), rgba(18, 20, 28, 0.98));
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}
.hwcheck-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.45rem;
}
.hwcheck-progress-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hwcheck-progress-pct {
  font-variant-numeric: tabular-nums;
}
.hwcheck-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}
.hwcheck-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3d6fad, #5b9cf5, #7c4dff);
  background-size: 140% 100%;
  transition: width 0.35s ease-out;
  box-shadow: 0 0 12px rgba(91, 156, 245, 0.35);
}
.hwcheck-progress-bar--done {
  background: linear-gradient(90deg, rgba(62, 207, 142, 0.9), rgba(91, 156, 245, 0.85));
  box-shadow: 0 0 12px rgba(62, 207, 142, 0.25);
}
.hwcheck-progress-bar--fail {
  background: linear-gradient(90deg, rgba(240, 113, 120, 0.95), rgba(230, 90, 90, 0.85));
  box-shadow: 0 0 12px rgba(240, 113, 120, 0.25);
}
.hwcheck-progress-steps {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.hwcheck-progress-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.32rem 0.45rem;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--muted);
}
.hwcheck-progress-step::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(120, 130, 150, 0.45);
  background: rgba(0, 0, 0, 0.2);
}
.hwcheck-progress-step--pending {
  opacity: 0.75;
}
.hwcheck-progress-step--active {
  color: var(--text);
  border-color: rgba(91, 156, 245, 0.35);
  background: rgba(91, 156, 245, 0.08);
  opacity: 1;
}
.hwcheck-progress-step--active::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.2);
  animation: hwcheck-step-pulse 1.2s ease-in-out infinite;
}
.hwcheck-progress-step--done {
  color: var(--text);
}
.hwcheck-progress-step--done::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--success);
  border-color: rgba(62, 207, 142, 0.55);
  background: rgba(62, 207, 142, 0.12);
}
.hwcheck-progress-step--fail::before {
  content: "!";
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
  border-color: rgba(240, 113, 120, 0.6);
  background: rgba(240, 113, 120, 0.12);
}
@keyframes hwcheck-step-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15); }
  50% { box-shadow: 0 0 0 5px rgba(91, 156, 245, 0.12); }
}

.sentri-updates-panel {
  margin-top: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
}
.sentri-updates-panel--up_to_date {
  border-color: rgba(62, 207, 142, 0.4);
  background: rgba(62, 207, 142, 0.06);
}
.sentri-updates-panel--update_available {
  border-color: rgba(91, 156, 245, 0.45);
  background: rgba(91, 156, 245, 0.07);
}
.sentri-updates-panel--maybe_newer_upstream {
  border-color: rgba(230, 179, 90, 0.45);
  background: rgba(230, 179, 90, 0.07);
}
.sentri-updates-panel--unknown,
.sentri-updates-panel--offline {
  border-color: rgba(120, 130, 150, 0.35);
}
.sentri-updates-panel-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.sentri-updates-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.sentri-updates-badge--up_to_date {
  color: var(--success);
  border-color: rgba(62, 207, 142, 0.45);
  background: rgba(62, 207, 142, 0.1);
}
.sentri-updates-badge--update_available {
  color: #8ebfff;
  border-color: rgba(91, 156, 245, 0.5);
  background: rgba(91, 156, 245, 0.12);
}
.sentri-updates-badge--maybe_newer_upstream {
  color: var(--warn);
  border-color: rgba(230, 179, 90, 0.45);
  background: rgba(230, 179, 90, 0.09);
}
.sentri-updates-badge--unknown {
  color: var(--muted);
}
.sentri-updates-badge--offline {
  color: var(--danger);
  border-color: rgba(240, 113, 120, 0.4);
  background: rgba(240, 113, 120, 0.07);
}
.sentri-updates-ver {
  font-size: 0.85rem;
  color: var(--muted);
}
.sentri-updates-ver strong {
  color: var(--text);
}
.sentri-updates-ver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.55rem 0.85rem;
  margin: 0.35rem 0 0.65rem;
}
.sentri-updates-ver-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.sentri-updates-ver-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sentri-updates-ver-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sentri-updates-msg {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}
.sentri-updates-meta {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--muted);
  display: grid;
  gap: 0.25rem;
}
.sentri-updates-meta code {
  font-size: 0.76rem;
  color: #b8c4d9;
}
.sentri-updates-apply {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.65rem;
}
.sentri-updates-release-field {
  display: grid;
  gap: 0.3rem;
  max-width: 28rem;
}
.sentri-updates-release-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.sentri-updates-release-field select,
.sentri-updates-apply select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.35;
}
.sentri-updates-release-field select:focus,
.sentri-updates-apply select:focus {
  outline: none;
  border-color: rgba(91, 156, 245, 0.65);
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.2);
}
.sentri-updates-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
  margin: 0.35rem 0 0.15rem;
}
.sentri-updates-actions .btn.is-busy {
  min-width: 10.5rem;
}
.sentri-updates-actions .btn [data-check-icon] {
  margin-right: 0.4rem;
}
.sentri-updates-primary-row,
.sentri-updates-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
}
.sentri-updates-secondary-row {
  margin-top: 0.15rem;
}
.sentri-updates-job {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}
.sentri-updates-job[hidden] {
  display: none !important;
}
.sentri-updates-job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.85rem;
}
.sentri-updates-job-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sentri-updates-console-empty {
  margin: 0;
}
.sentri-updates-console-wrap {
  position: relative;
}
.sentri-updates-tail {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sentri-updates-console {
  margin: 0;
  max-height: 16rem;
  overflow: auto;
  padding: 0.65rem 0.75rem 2.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.sentri-updates-console:empty::before {
  content: "Waiting for installer output…";
  color: var(--muted);
  font-style: italic;
}
.sentri-install-log-banner {
  display: block;
  width: 100%;
  margin: 0 0 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: rgba(196, 122, 46, 0.2);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.sentri-install-log-mark {
  display: block;
  margin: 0 -0.35rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  background: rgba(196, 122, 46, 0.35);
}
.settings-modal-panel--wide .sentri-updates-console-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-modal-panel--wide .sentri-updates-console {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: min(28rem, 46vh);
  overflow: auto;
}
.settings-modal-panel--wide .sentri-updates-log[open] {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-modal-panel--wide .hub-fleet-updates-targets {
  max-height: 9rem;
  flex: 0 0 auto;
}
.sentri-updates-console-follow {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.sentri-updates-console-follow[hidden] {
  display: none !important;
}
.sentri-updates-console[hidden] {
  display: none !important;
}
.sentri-updates-history {
  margin-top: 0.55rem;
  font-size: 0.82rem;
}
.sentri-updates-history-head h3 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 650;
}
.sentri-updates-history-acc {
  margin: 0;
}
.sentri-updates-history-empty {
  margin: 0.4rem 0 0;
}
.sentri-updates-history-list {
  display: grid;
  gap: 0.22rem;
  max-height: 12rem;
  overflow: auto;
  margin-top: 0.4rem;
  padding-right: 0.15rem;
}
.sentri-updates-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.32rem 0.5rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.sentri-updates-history-row:hover,
.sentri-updates-history-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #5b9cf5) 55%, var(--border));
  outline: none;
}
.sentri-updates-history-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  min-width: 0;
}
.sentri-updates-history-span {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sentri-updates-history-when {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.sentri-updates-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: 0.55rem;
  margin: 0.25rem 0 0.9rem;
  max-height: 16rem;
  overflow: auto;
  padding-right: 0.15rem;
}
.sentri-updates-roster-card {
  display: grid;
  gap: 0.18rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.sentri-updates-roster-name {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
}
.sentri-updates-roster-ver {
  margin: 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.sentri-updates-roster-latest {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.sentri-updates-roster-note {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}
.sentri-updates-roster-card.is-ok {
  border-color: rgba(62, 207, 142, 0.4);
}
.sentri-updates-roster-card.is-outdated {
  border-color: rgba(230, 179, 90, 0.5);
}
.sentri-updates-roster-card.is-offline,
.sentri-updates-roster-card.is-unknown {
  opacity: 0.88;
}
.sentri-updates-roster-card.is-updating {
  border-color: rgba(230, 179, 90, 0.7);
}
.sentri-updates-notes {
  max-height: min(40vh, 360px);
  overflow: auto;
  margin: 0.35rem 0 0.75rem;
  padding-right: 0.2rem;
}
.sentri-updates-notes-head {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.sentri-updates-notes-body {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.85rem;
}
.sentri-updates-notes-body ul {
  margin: 0.2rem 0 0.4rem 1.1rem;
  padding: 0;
}
.sentri-updates-review-meta {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  margin: 0.35rem 0 0.75rem;
  font-size: 0.85rem;
}
.sentri-updates-review-meta dt {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}
.sentri-updates-review-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
#sentri-update-review-console {
  max-height: min(40vh, 22rem);
}
details.sentri-updates-token .sentri-disclosure-body {
  display: grid;
  gap: 0.55rem;
}
.sentri-updates-token {
  display: grid;
  gap: 0.55rem;
  margin: 0.85rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
}
.sentri-updates-token-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.65rem;
}
.sentri-updates-token-row .field,
.sentri-updates-token-row .sentri-field {
  flex: 1 1 14rem;
  margin: 0;
  min-width: 12rem;
}
.sentri-updates-token-status {
  margin: 0;
  font-size: 0.82rem;
}
.sentri-updates-edge-tokens-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.sentri-updates-edge-tokens-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}
.sentri-updates-edge-token-rows {
  display: grid;
  gap: 0.4rem;
  max-height: 14rem;
  overflow: auto;
  padding-right: 0.15rem;
}
.sentri-updates-edge-token-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.sentri-updates-edge-token-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.sentri-updates-token-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted);
}
.sentri-updates-token-pill.is-ok {
  color: var(--success);
  border-color: rgba(62, 207, 142, 0.45);
  background: rgba(62, 207, 142, 0.1);
}
.sentri-updates-token-pill.is-warn {
  color: var(--warn);
  border-color: rgba(230, 179, 90, 0.45);
  background: rgba(230, 179, 90, 0.09);
}
.sentri-updates-token-pill.is-wait {
  color: var(--accent, #5b9cf5);
  border-color: rgba(91, 156, 245, 0.5);
  background: rgba(91, 156, 245, 0.12);
}
.sentri-updates-token-pill.is-muted {
  opacity: 0.85;
}
.sentri-updates-phase {
  margin: 0.15rem 0;
  font-size: 0.88rem;
  font-weight: 650;
}
.sentri-updates-reconnect {
  margin: 0.15rem 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(91, 156, 245, 0.4);
  background: rgba(91, 156, 245, 0.12);
  font-size: 0.88rem;
}
.sentri-updates-reconnect[hidden] {
  display: none !important;
}
.sentri-updates-meter {
  display: grid;
  gap: 0.45rem;
  margin: 0.35rem 0 0.55rem;
}
.sentri-updates-meter[hidden] {
  display: none !important;
}
.sentri-updates-meter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.85rem;
}
.sentri-updates-meter-stage {
  font-size: 0.92rem;
  font-weight: 650;
}
.sentri-updates-meter-meta {
  font-size: 0.82rem;
  color: var(--muted);
}
.sentri-updates-meter-bar {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  overflow: hidden;
}
.sentri-updates-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent, #5b9cf5);
  transition: width 0.35s ease, background 0.2s ease;
}
.sentri-updates-meter-fill.is-failed,
.sentri-updates-meter.is-failed .sentri-updates-meter-fill {
  background: var(--danger, #f07178);
}
.sentri-updates-meter-fill.is-succeeded,
.sentri-updates-meter.is-succeeded .sentri-updates-meter-fill {
  background: var(--success, #3ecf8e);
}
.sentri-updates-stages {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 11rem;
  overflow: auto;
}
.sentri-updates-stages li {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.12rem 0 0.12rem 1.2rem;
  position: relative;
}
.sentri-updates-stages li::before {
  position: absolute;
  left: 0;
  content: "○";
  font-size: 0.7rem;
}
.sentri-updates-stages li.is-done {
  color: var(--success, #3ecf8e);
}
.sentri-updates-stages li.is-done::before {
  content: "✓";
}
.sentri-updates-stages li.is-current {
  color: var(--text);
  font-weight: 650;
}
.sentri-updates-stages li.is-current::before {
  content: "●";
  color: var(--accent, #5b9cf5);
}
.sentri-updates-stages li.is-failed {
  color: var(--danger, #f07178);
}
.sentri-updates-log {
  margin: 0.35rem 0 0;
}
.hub-fleet-update-target {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border, #ccc);
  background: rgba(0, 0, 0, 0.03);
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hub-fleet-update-target.is-ok {
  border-color: rgba(34, 160, 90, 0.45);
}
.hub-fleet-update-target.is-err {
  border-color: rgba(200, 70, 70, 0.5);
}
.hub-fleet-update-target.is-wait {
  border-color: rgba(180, 140, 40, 0.45);
}
.hub-fleet-update-target.is-selected {
  border-color: var(--accent, #5b9cf5);
  box-shadow: 0 0 0 1px var(--accent, #5b9cf5);
}
.hub-fleet-update-step {
  cursor: pointer;
}
.hub-fleet-update-step.is-selected {
  outline: 1px solid var(--accent, #5b9cf5);
}
.sentri-updates-log > summary,
.sentri-updates-history-acc > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--muted);
  list-style: none;
}
.sentri-updates-log > summary::-webkit-details-marker,
.sentri-updates-history-acc > summary::-webkit-details-marker {
  display: none;
}
.sentri-updates-log > summary::before,
.sentri-updates-history-acc > summary::before {
  content: "▸ ";
}
.sentri-updates-log[open] > summary::before,
.sentri-updates-history-acc[open] > summary::before {
  content: "▾ ";
}
.sentri-updates-log[hidden] {
  display: none !important;
}
.sentri-updates-card-lead {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}
.sentri-updates-version-line {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
}
.sentri-update-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(230, 179, 90, 0.45);
  background: rgba(230, 179, 90, 0.1);
}
.sentri-update-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sentri-update-banner-text {
  margin: 0;
  font-size: 0.9rem;
}

/* Operator auth (setup / login) — minimal shell */
.sentri-auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg, #0f1117);
}

.sentri-auth-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 2.5rem;
}

.sentri-auth-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.sentri-auth-brand .brand {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sentri-auth-brand .brand-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.auth-card,
.panel.auth-card {
  width: min(100%, 26rem);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.35));
}

.auth-card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 650;
}

.auth-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.auth-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.auth-form .btn-primary {
  margin-top: 0.35rem;
  justify-self: start;
}

.pairing-code-display {
  margin: 0.75rem 0 1rem;
  font-size: 1.75rem;
  letter-spacing: 0.2em;
  text-align: center;
}

.pairing-code-display code {
  font-weight: 700;
  color: var(--accent);
}

.hub-connect-panel {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.nav-pairing-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--accent, #5b9cf5);
  vertical-align: middle;
}

.nav-pairing-badge:not([hidden]):not(:empty) {
  display: inline-flex;
}

.pairing-pending-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(91, 156, 245, 0.12);
}

.hub-pairing-pending-panel {
  margin: 0.75rem 0 0;
}

.hub-pairing-pending-callout {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(91, 156, 245, 0.35);
  border-radius: 10px;
  background: rgba(91, 156, 245, 0.08);
}

.hub-pairing-pending-callout h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.hub-pairing-import-details {
  margin-top: 0.75rem;
}

.hub-pairing-import-grid {
  margin-top: 0.75rem;
}

/* Settings — storage stats, identity, presets, burn-in preview */
.settings-identity-fieldset {
  grid-column: 1 / -1;
}
.settings-identity-lead {
  margin: 0 0 0.75rem;
  max-width: 72ch;
}
.settings-identity-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .settings-identity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.settings-input-enhanced {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  width: 100%;
}
.settings-input-enhanced:focus {
  border-color: rgba(91, 156, 245, 0.65);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.2);
}
.settings-section-loading {
  margin: 0 0 0.75rem;
}
.settings-panel--loading .settings-storage-stats,
.settings-panel--loading #sync_status_body {
  opacity: 0.45;
}
.settings-storage-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
  .settings-storage-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
.settings-storage-stat-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.settings-storage-stat-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.settings-storage-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
  margin: 0.75rem 0;
}
.settings-storage-kv dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.settings-storage-kv dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.settings-storage-bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 0.5rem 0;
}
.settings-storage-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
}
.settings-storage-bar--drive {
  background: linear-gradient(90deg, rgba(91, 156, 245, 0.85), rgba(91, 156, 245, 0.45));
}
.settings-storage-bar--cap {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.9), rgba(245, 158, 11, 0.45));
}
.settings-retention-grid {
  margin-top: 0.5rem;
}
.settings-preset-compare-wrap {
  margin-top: 0.75rem;
  overflow-x: auto;
}
.settings-preset-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.settings-preset-compare th,
.settings-preset-compare td {
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.settings-preset-compare tr.is-active {
  background: rgba(91, 156, 245, 0.12);
}
.settings-preset-compare tr.is-active td:first-child {
  font-weight: 700;
}
.settings-burnin-preview {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.settings-preview-stage,
.settings-burnin-preview-stage {
  position: relative;
  max-width: 640px;
  margin: 0.75rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  min-height: 120px;
}
.settings-preview-img,
.settings-burnin-preview-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.settings-preview-overlay,
.settings-burnin-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.settings-preview-hit {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  z-index: 2;
}
.settings-preview-idle,
.settings-burnin-preview-idle {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
}
.settings-preview-stage.is-live .settings-preview-idle,
.settings-burnin-preview-stage.is-live .settings-burnin-preview-idle {
  display: none;
}
.settings-burnin-preview-note {
  margin-top: 0.75rem;
}
.motion-studio-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}
.motion-sampling-details {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
}
.motion-studio-grid,
.motion-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.75fr) minmax(220px, 0.9fr);
  gap: 1rem 1.1rem;
  margin-bottom: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .motion-studio-layout {
    grid-template-columns: 1fr 1fr;
  }
  .motion-studio-inspector {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .motion-studio-layout {
    grid-template-columns: 1fr;
  }
}
.motion-workflow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.motion-workflow-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface, rgba(255, 255, 255, 0.02));
}
.motion-workflow-step[data-state="active"] {
  border-color: rgba(91, 156, 245, 0.65);
  color: #5b9cf5;
  background: rgba(91, 156, 245, 0.12);
}
.motion-workflow-step[data-state="done"] {
  border-color: rgba(74, 222, 128, 0.5);
  color: #4ade80;
}
.motion-workflow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.65rem;
}
.motion-studio-stage-col {
  min-width: 0;
}
.motion-studio-rail,
.motion-studio-inspector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.motion-studio-inspector {
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.02));
}
.motion-tune-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.motion-zones-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.motion-zones-head .motion-studio-subhead {
  margin: 0;
}
.motion-zone-chips-empty {
  margin: 0;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px dashed var(--border);
}
.motion-zone-stats-hint {
  margin: -0.25rem 0 0.5rem;
}
.motion-tune-feed-item.is-selected {
  outline: 2px solid #5b9cf5;
  outline-offset: -1px;
}
.motion-tune-feed-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}
.motion-tune-feed-item--near .motion-tune-feed-badge {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.motion-tune-feed-item:not(.motion-tune-feed-item--triggered) .motion-tune-feed-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.motion-inspector-summary {
  font-size: 0.8125rem;
  margin-bottom: 0.65rem;
  line-height: 1.45;
}
.motion-inspector-frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.motion-inspector-frame {
  margin: 0;
}
.motion-inspector-frame figcaption {
  margin-bottom: 0.25rem;
}
.motion-inspector-frame-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.motion-inspector-frame-img {
  display: block;
  width: 100%;
  height: auto;
}
.motion-inspector-heatmap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.75;
}
.motion-inspector-zones-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.motion-inspector-zones-table th,
.motion-inspector-zones-table td {
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.motion-inspector-zones-table tr.is-peak td {
  font-weight: 700;
  color: #4ade80;
}
.motion-inspector-zones-table tr:hover {
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.motion-sensitivity-legend {
  margin-top: 0.5rem;
}
.motion-sensitivity-legend p {
  margin: 0;
}
.motion-cooldown-explainer {
  margin-top: 0.35rem;
}
.motion-cooldown-timeline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
}
.motion-cooldown-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f87171 0%, rgba(255, 255, 255, 0.15) 100%);
}
.motion-cooldown-node--trigger {
  color: #f87171;
}
.motion-cooldown-node--ready {
  color: #4ade80;
}
.motion-zone-chip-stats {
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.motion-zone-chip.is-hover-highlight {
  border-color: rgba(91, 156, 245, 0.55);
}
.motion-zone-chip-rename {
  flex: 1;
  min-width: 0;
  padding: 0.1rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
}
.motion-grid-inset.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
}
#motion-grid-inset-status.is-waiting {
  color: var(--muted);
  font-style: italic;
}
.motion-studio-subhead {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.motion-studio-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.motion-preview-stage-wrap {
  position: relative;
}
.motion-preview-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.motion-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
}
.motion-tool-btn[aria-pressed="true"] {
  background: rgba(91, 156, 245, 0.35);
  border-color: rgba(91, 156, 245, 0.6);
  color: #fff;
}
.motion-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.motion-tool-sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 0.15rem;
}
.motion-grid-inset-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.5rem 0 0;
}
.motion-grid-inset-label {
  flex-shrink: 0;
}
.motion-grid-inset {
  border-radius: 6px;
  border: 1px solid var(--border);
  image-rendering: pixelated;
}
.motion-tune-panel {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.motion-test-sampling-btn.is-active {
  background: rgba(74, 222, 128, 0.2);
  border-color: #4ade80;
}
.motion-tune-hint {
  margin: 0.35rem 0 0.5rem;
}
.motion-tune-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.motion-tune-feed-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto auto;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  cursor: pointer;
}
.motion-tune-feed-item--triggered {
  border-color: rgba(74, 222, 128, 0.55);
  background: rgba(74, 222, 128, 0.08);
}
.motion-tune-feed-item--near {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.06);
}
.motion-tune-feed-item--baseline {
  grid-template-columns: 1fr;
  cursor: default;
  opacity: 0.75;
}
.motion-tune-feed-margin {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.motion-sensitivity-control {
  margin-top: 0.35rem;
}
.motion-sensitivity-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.motion-sensitivity-track-wrap {
  position: relative;
  height: 2rem;
  display: flex;
  align-items: center;
}
.motion-sensitivity-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80 0%, #fbbf24 50%, #f87171 100%);
  opacity: 0.85;
  pointer-events: none;
}
.motion-sensitivity-marker {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-left: -1px;
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.motion-sensitivity-slider {
  position: relative;
  width: 100%;
  margin: 0;
  background: transparent;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
  height: 2rem;
}
.motion-sensitivity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #5b9cf5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.motion-sensitivity-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #5b9cf5;
  cursor: pointer;
}
.motion-sensitivity-field {
  grid-column: 1 / -1;
}
.motion-zones-hint {
  margin: 0 0 0.65rem;
}
.motion-zone-chips {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.motion-zone-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.03));
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.motion-zone-chip.is-selected {
  border-color: #4ade80;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
}
.motion-zone-chip-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.motion-zone-chip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.motion-zone-chip-remove {
  opacity: 0.65;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.motion-zone-chip-rename-btn {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.motion-zone-chip-rename-btn:hover {
  color: inherit;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.06);
}
.motion-studio-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.settings-motion-explainer {
  padding: 1rem 1.15rem;
}
.settings-motion-hub-note code {
  font-size: 0.85em;
}
.settings-motion-perf {
  margin-top: 0.35rem;
}
.settings-motion-perf--warn {
  color: var(--warn, #fbbf24);
}
.settings-hub-sync-grid .settings-hub-connection {
  grid-column: 1 / -1;
}
.settings-hub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

/* Edge Offload dashboard (/offload) */
.edge-offload-page {
  max-width: 52rem;
}
.edge-offload-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.edge-offload-eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #94a3b8);
  margin: 0 0 0.35rem;
}
.edge-offload-lead {
  max-width: 42rem;
}
.edge-offload-section {
  margin-bottom: 1.25rem;
}
.edge-offload-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}
.edge-offload-dl {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
}
.edge-offload-dl dt {
  font-weight: 600;
  color: var(--muted, #94a3b8);
}
.edge-offload-dl dd {
  margin: 0;
}
.edge-offload-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.edge-offload-stat-n {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
}
.edge-offload-stat-l {
  display: block;
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}
.edge-offload-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.edge-offload-badge--ok {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.edge-offload-badge--warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.edge-offload-badge--err {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.edge-offload-badge--muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted, #94a3b8);
}
.edge-offload-callout--err {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.edge-offload-live-note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.edge-offload-actions {
  margin-top: 0.75rem;
}

.edge-offload-updated-line {
  margin: 0 0 1rem;
}

.edge-offload-rate-card {
  margin-bottom: 1.25rem;
}

.edge-offload-rate-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}

.edge-offload-rate-hero-wrap {
  text-align: right;
}

.edge-offload-rate-hero-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #94a3b8);
}

.edge-offload-rate-hero {
  display: block;
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5b9cf0;
}

.edge-offload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.edge-offload-detail {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.edge-offload-stat--rate .transfer-sparkline {
  margin-top: 0.35rem;
}

.transfer-rate-chart {
  min-height: 10rem;
  margin: 0.5rem 0;
}

.transfer-rate-chart-empty {
  padding: 2rem 1rem;
  text-align: center;
}

.transfer-rate-chart-svg {
  display: block;
  width: 100%;
}

.transfer-rate-grid {
  stroke: rgba(148, 163, 184, 0.15);
  stroke-width: 1;
}

.transfer-rate-axis-y,
.transfer-rate-axis-x {
  fill: var(--muted, #94a3b8);
  font-size: 10px;
}

.transfer-rate-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 0.5rem;
}

.transfer-rate-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.transfer-rate-legend-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.transfer-sparkline {
  display: block;
  opacity: 0.9;
}

.transfer-sparkline-empty {
  font-size: 0.75rem;
}

/* Maintenance + Activity (System → Diagnostics) */
.maintenance-page-head,
.activity-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.maintenance-lead strong,
.activity-lead strong {
  font-weight: 600;
  color: var(--text, inherit);
}
.maint-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.maint-panel-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.12rem;
}
.maint-history-panel .maint-run-card h3,
.maint-run-detail-head h3 {
  margin: 0;
}
.maint-panel-head .muted { margin: 0; }
.maint-run-panel { margin-bottom: 1.25rem; }
.maint-history-panel { margin-bottom: 0.75rem; }
.maint-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.25rem 1.5rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .maint-form-grid { grid-template-columns: 1fr; }
}
.maint-field-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.maint-task-desc {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  border-left: 3px solid var(--accent, #3b82f6);
}
.maint-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.maint-category-pill--catalog { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.maint-category-pill--storage { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.maint-category-pill--sync { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; }
.maint-category-pill--system { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.maint-when-toggle {
  display: inline-flex;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  overflow: hidden;
  background: rgba(15, 23, 42, 0.35);
}
.maint-when-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.maint-when-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.maint-when-option span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.88rem;
  color: var(--muted, #94a3b8);
  transition: background 0.15s, color 0.15s;
}
.maint-when-option input:checked + span {
  background: rgba(91, 156, 245, 0.18);
  color: var(--accent, #a8ccff);
  font-weight: 600;
}
.maint-when-toggle--now .maint-when-option:first-child input:checked + span,
.maint-when-toggle--schedule .maint-when-option:last-child input:checked + span {
  box-shadow: inset 0 0 0 1px rgba(91, 156, 245, 0.35);
}
.maint-field-when--schedule .maint-schedule-wrap {
  animation: maint-schedule-in 0.18s ease-out;
}
@keyframes maint-schedule-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.maint-when-option input:focus-visible + span {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: -2px;
}
.maint-schedule-wrap {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px dashed var(--border, rgba(148, 163, 184, 0.25));
  background: rgba(148, 163, 184, 0.04);
}
.maint-params-shell {
  margin: 1rem 0 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  background: rgba(15, 23, 42, 0.25);
}
.maint-params-title {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #94a3b8);
}
.maintenance-params { margin: 0; }
.maintenance-params--toggles {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.maint-param-toggle.settings-toggle-row {
  min-height: 0;
  margin: 0;
}
.maint-param-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.15));
}
.maint-submit-btn {
  min-width: 9rem;
  font-weight: 600;
}
.maint-submit-btn--busy {
  opacity: 0.75;
  pointer-events: none;
}
.maint-status { min-height: 1.25rem; }
.maint-runs-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 28rem;
  min-height: 4rem;
  overflow: auto;
  padding: 0.15rem 0;
}
.maint-runs-empty {
  margin: 0.5rem 0;
  text-align: center;
  padding: 2rem 1rem;
}
.maint-run-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 4.85rem;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.maint-run-card:hover {
  border-color: #3d4a62;
  background: #252838;
}
.maint-run-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(91, 156, 245, 0.35);
  background: rgba(91, 156, 245, 0.08);
}
.maint-run-card-accent {
  flex: 0 0 4px;
  width: 4px;
  align-self: stretch;
  border-radius: 10px 0 0 10px;
}
.maint-run-card-accent--success { background: var(--success, #3ecf8e); }
.maint-run-card-accent--partial { background: var(--warn, #e6b35a); }
.maint-run-card-accent--failure { background: var(--danger, #f07178); }
.maint-run-card-accent--pending { background: var(--idle, #78909c); }
.maint-run-card-accent--running { background: var(--accent); animation: maint-pulse 1.4s ease-in-out infinite; }
@keyframes maint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.maint-run-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  overflow: visible;
}
.maint-run-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.25rem;
}
.maint-run-card-top h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.maint-run-summary {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}
.maint-run-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.1rem;
  min-width: 0;
  width: 100%;
}
.maint-run-time {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  max-width: 100%;
}
.maint-run-time-rel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #a8ccff);
  line-height: 1.25;
}
.maint-run-time-abs {
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maint-run-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}
.maint-run-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.12);
}
.maint-run-tag--dim {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
.maint-run-meta time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.maint-run-meta-sep { opacity: 0.5; }
.maint-run-chevron {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.85rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.maint-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.2;
}
.maint-status-badge--success { background: rgba(62, 207, 142, 0.18); color: #9ae6c0; }
.maint-status-badge--partial { background: rgba(230, 179, 90, 0.18); color: #f0d090; }
.maint-status-badge--failure { background: rgba(240, 113, 120, 0.18); color: #f5a8ad; }
.maint-status-badge--pending { background: rgba(120, 144, 156, 0.22); color: #b0bec5; }
.maint-status-badge--running { background: rgba(91, 156, 245, 0.22); color: #a8ccff; }
.maint-run-detail {
  margin-top: 1rem;
  border: 1px solid var(--border);
  background: var(--bg1);
  color: var(--text);
}
.maint-run-detail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.maint-run-detail-head h3 {
  margin: 0;
  font-size: 1rem;
}
.maint-run-detail-body { font-size: 0.88rem; }
.maint-detail-dl {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
}
.maint-detail-dl dt {
  margin: 0;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  font-size: 0.82rem;
}
.maint-detail-dl dd {
  margin: 0;
  word-break: break-word;
}
.maint-detail-raw {
  margin-top: 0.65rem;
}
.maint-detail-raw summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  margin-bottom: 0.35rem;
}
.maint-panel-toolbar,
.activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.15));
}
.maint-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 9rem;
}
.activity-table-wrap {
  max-height: 26rem;
  min-height: 4rem;
  overflow: auto;
}
.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  color: var(--text);
}
.activity-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.activity-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  background: transparent;
}
.activity-row {
  cursor: pointer;
  transition: background 0.12s;
}
.activity-row:hover { background: rgba(91, 156, 245, 0.06); }
.activity-row--selected { background: rgba(91, 156, 245, 0.12); }
.activity-time-cell { white-space: nowrap; min-width: 10rem; }
.activity-time-local {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text);
}
.activity-time-rel {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.1rem;
  color: var(--muted);
}
.activity-summary-cell {
  max-width: 28rem;
  line-height: 1.4;
  color: var(--text);
}
.activity-cat-pill {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
}
.activity-cat-pill--system { background: rgba(148, 163, 184, 0.2); color: #e2e8f0; }
.activity-cat-pill--sync { background: rgba(168, 85, 247, 0.18); color: #e9d5ff; }
.activity-cat-pill--storage { background: rgba(245, 158, 11, 0.18); color: #fde68a; }
.activity-cat-pill--auth { background: rgba(34, 197, 94, 0.15); color: #bbf7d0; }
.activity-status-badge {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
}
.activity-status-badge--success { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.activity-status-badge--partial { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.activity-status-badge--failure { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.activity-status-badge--info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.activity-detail {
  margin-top: 1rem;
  border: 1px solid var(--border);
  background: var(--bg1);
  color: var(--text);
}
.activity-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.activity-detail-head h2 {
  margin: 0;
  font-size: 1rem;
}
.activity-detail-body { font-size: 0.88rem; }
.activity-empty { text-align: center; padding: 1.5rem !important; }

/* --- Wave 0 UI primitives (UI-X-04, UI-X-08, UI-X-11, UI-X-01) --- */
:root {
  --touch-min: 44px;
}

.state-empty,
.state-loading,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.12);
  color: var(--muted);
  min-height: 8rem;
}
.state-loading::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sentri-spin 0.85s linear infinite;
}
.state-error {
  border-style: solid;
  border-color: rgba(240, 113, 120, 0.45);
  color: var(--text);
}
@keyframes sentri-spin {
  to { transform: rotate(360deg); }
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  animation: none;
}
.badge-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--recording);
  box-shadow: 0 0 10px rgba(240, 98, 146, 0.85);
  animation: live-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
/* Nav already ships its own .nav-live-dot — suppress the duplicate ::before. */
.nav-live-pill.badge-live::before {
  content: none;
  display: none;
}

@media (max-width: 720px) {
  .btn-sm,
  .chip,
  .btn-chip {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
}

.sentri-destructive-modal .sentri-destructive-bullets {
  margin: 0 0 1rem 1.1rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.sentri-destructive-modal .sentri-destructive-bullets li + li {
  margin-top: 0.35rem;
}
.sentri-destructive-token-label {
  display: block;
  margin-bottom: 0.5rem;
}

.sentri-dirty-bar,
.sentri-dirty-bar.settings-save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 160;
  padding: 0.65rem 1rem;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
  background: rgba(12, 13, 18, 0.94);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}
.sentri-dirty-bar[hidden],
.sentri-dirty-bar.settings-save-bar[hidden] {
  display: none !important;
}
body.sentri-dirty-bar-visible {
  padding-bottom: 5.25rem;
}

.sentri-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.sentri-banner {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.16);
}
.sentri-banner--alert {
  border-color: rgba(240, 113, 120, 0.55);
  background: rgba(240, 113, 120, 0.12);
}
.sentri-banner--action {
  border-color: rgba(230, 179, 90, 0.55);
  background: rgba(230, 179, 90, 0.12);
}
.sentri-banner--info {
  border-color: rgba(91, 156, 245, 0.45);
  background: rgba(91, 156, 245, 0.1);
}
.sentri-banner-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
}
.sentri-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.sentri-banner[hidden] {
  display: none !important;
}

.sentri-glossary-drawer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  justify-content: flex-end;
}
.sentri-glossary-drawer[hidden] {
  display: none !important;
}
.sentri-glossary-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.sentri-glossary-panel {
  position: relative;
  z-index: 1;
  width: min(24rem, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--surface, var(--bg1));
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  padding: 1rem 1.1rem 1.25rem;
}
.sentri-glossary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.sentri-glossary-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.sentri-glossary-list {
  margin: 0;
}
.sentri-glossary-list dt {
  font-weight: 600;
  margin-top: 0.85rem;
}
.sentri-glossary-list dt:first-child {
  margin-top: 0;
}
.sentri-glossary-list dd {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
body.sentri-glossary-open {
  overflow: hidden;
}

/* Post-2.8 edge UI improvements */
.nav-pairing-badge[hidden] {
  display: none !important;
}
.nav-pairing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.25);
}
.global-recording-preview-hidden {
  font-size: 0.85rem;
  color: var(--muted);
}
.dash-controls-lead { margin: 0 0 0.75rem; max-width: 42rem; }
.dash-controls-primary { margin-bottom: 0.65rem; }
.dash-controls-secondary .cam-toggle--secondary { opacity: 0.92; }
.dash-pipeline-fault {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(198, 40, 40, 0.55);
  background: rgba(198, 40, 40, 0.12);
}
.dash-pipeline-fault-text { margin: 0 0 0.45rem; color: var(--danger, #c62828); }
.preview-frame--stale::after {
  content: "Stale — reconnecting…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: 600;
  z-index: 4;
  pointer-events: none;
}
.preview-reconnect-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 600;
  z-index: 5;
  pointer-events: none;
}
.preview-reconnect-overlay[hidden],
.sentri-live-reconnect-overlay[hidden] {
  display: none !important;
}
.sentri-live-reconnect-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  z-index: 5;
  pointer-events: none;
}
.live-chrome-hold-shot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2.75rem;
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  background: #0a0b0f;
}
.live-chrome-hold-shot[hidden] {
  display: none !important;
}
.dash-details-accordion { margin: 0.65rem 0; }
.dash-details-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.dash-storage-over-cap a { font-weight: 600; margin-left: 0.35rem; }
.dash-schedule-hint a { font-weight: 600; }
.library-truncation-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(230, 179, 90, 0.15);
  color: var(--text);
  font-size: 0.85rem;
}
.library-empty-first-run { margin-bottom: 1rem; }
.settings-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.settings-subnav-link {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}
.settings-subnav-link--active,
.settings-subnav-link:hover { color: var(--accent); }
.settings-segment-preset-select { margin-top: 0.35rem; max-width: 16rem; }
.settings-restart-checklist { margin: 0 0 1rem 1.1rem; }
.day-timeline-shell--coarse .day-zoom-hint { display: none; }
.day-timeline-shell--coarse .day-track { min-height: 3.5rem; }
.logs-filters-drawer[hidden] { display: none !important; }
@media (min-width: 720px) {
  .logs-filters-drawer { display: block !important; }
}
@media (max-width: 719px) {
  .logs-filters-drawer {
    padding: 0.65rem 0 0.35rem;
    border-top: 1px solid var(--border);
    margin-top: 0.35rem;
  }
  .logs-toolbar-row--filters {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}

/* Logs copy split-button + menu (edge /system/logs) */
.logs-copy-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.logs-copy-wrap > #sentri-logs-copy,
.logs-copy-wrap > #hub-logs-copy {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.logs-copy-more {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  min-width: 2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.logs-copy-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 8;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--bg1, var(--surface, #1a1d24));
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.logs-copy-menu[hidden] {
  display: none !important;
}
.logs-copy-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.3rem;
  cursor: pointer;
}
.logs-copy-menu button:hover:not(:disabled),
.logs-copy-menu button:focus-visible:not(:disabled) {
  background: var(--bg2, rgba(255, 255, 255, 0.06));
  outline: none;
}
.logs-copy-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.telemetry-panel--slim-overview .telemetry-overview-slim-grid .card:first-child {
  border-top: none;
}
.edge-offload-lane-diagram {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.edge-offload-lane-chip {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
}
.auth-password-wrap {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.auth-password-wrap input { flex: 1; }
.auth-policy-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.auth-policy-list li::before { content: "○ "; color: var(--muted); }
.auth-policy-list li.auth-policy-ok::before { content: "✓ "; color: var(--ok, #6fcf97); }
.session-player-error-recovery { margin-bottom: 1rem; }
.onboarding-camera-busy-copy { margin: 0.5rem 0; }

/* --- contracts/frontend layers: tokens, elements, components --- */
/* Sentri shared design tokens (Layer 0).
 * Aliases --sentri-* onto the operator palette; theme.legacy.css owns the base :root.
 */
:root {
  --sentri-bg0: var(--bg0, #0c0d12);
  --sentri-bg1: var(--bg1, #14161f);
  --sentri-bg2: var(--bg2, #1b1e2a);
  --sentri-border: var(--border, #2a3142);
  --sentri-text: var(--text, #e8eaef);
  --sentri-muted: var(--muted, #8b95a8);
  --sentri-accent: var(--accent, #5b9cf5);
  --sentri-accent-dim: var(--accent-dim, #3d6fad);
  --sentri-success: var(--success, #3ecf8e);
  --sentri-warn: var(--warn, #e6b35a);
  --sentri-danger: var(--danger, #f07178);
  --sentri-radius: var(--radius, 12px);
  --sentri-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.35));
  --sentri-space-1: 0.25rem;
  --sentri-space-2: 0.5rem;
  --sentri-space-3: 0.75rem;
  --sentri-space-4: 1rem;
  --sentri-space-5: 1.5rem;
  --sentri-z-sticky: 40;
  --sentri-z-modal: 1000;
  --sentri-z-toast: 1100;
}

/* Sentri Layer 1 — element defaults (“tag-type” CSS).
 * Scoped to operator shells so auth marketing pages stay free of global button rules.
 */
body.sentri-edge.sentri-app button:not([class]),
body.hub-body.sentri-app button:not([class]),
body.sentri-edge .sentri-app button:not([class]),
body.hub-body .sentri-app button:not([class]) {
  font: inherit;
  font-weight: 600;
  color: var(--sentri-text);
  background: var(--sentri-bg2);
  border: 1px solid var(--sentri-border);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  line-height: 1.3;
}

body.sentri-edge.sentri-app button:not([class]):hover,
body.hub-body.sentri-app button:not([class]):hover,
body.sentri-edge .sentri-app button:not([class]):hover,
body.hub-body .sentri-app button:not([class]):hover {
  background: #252838;
}

body.sentri-edge.sentri-app button:not([class]):disabled,
body.hub-body.sentri-app button:not([class]):disabled,
body.sentri-edge .sentri-app button:not([class]):disabled,
body.hub-body .sentri-app button:not([class]):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Text fields only. Checkboxes and radios are the rules below, not this padding. */
body.sentri-edge input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
body.sentri-edge select,
body.sentri-edge textarea,
body.hub-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
body.hub-body select,
body.hub-body textarea {
  font: inherit;
  color: var(--sentri-text, var(--text));
  background: var(--sentri-bg1, var(--bg1));
  border: 1px solid var(--sentri-border, var(--border));
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  line-height: 1.35;
  box-sizing: border-box;
}

/* One Sentri box. Toggle switches stay hidden via their own higher-specificity rule. */
body.sentri-edge input[type="checkbox"],
body.sentri-edge input[type="radio"],
body.hub-body input[type="checkbox"],
body.hub-body input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  padding: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--border-strong, var(--sentri-border, var(--border)));
  border-radius: 4px;
  background: var(--bg0, var(--sentri-bg0, var(--bg)));
  display: grid;
  place-content: center;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1;
}

body.sentri-edge input[type="radio"],
body.hub-body input[type="radio"] {
  border-radius: 999px;
}

body.sentri-edge input[type="checkbox"]::before,
body.hub-body input[type="checkbox"]::before,
body.sentri-edge input[type="radio"]::before,
body.hub-body input[type="radio"]::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  box-shadow: inset 1em 1em var(--accent, var(--sentri-accent, #3b82f6));
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 18%, 80% 0, 38% 62%);
}

body.sentri-edge input[type="radio"]::before,
body.hub-body input[type="radio"]::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  clip-path: none;
}

body.sentri-edge input[type="checkbox"]:checked,
body.sentri-edge input[type="radio"]:checked,
body.hub-body input[type="checkbox"]:checked,
body.hub-body input[type="radio"]:checked {
  border-color: var(--accent, var(--sentri-accent, #3b82f6));
  background: color-mix(in srgb, var(--accent, var(--sentri-accent, #3b82f6)) 14%, transparent);
}

body.sentri-edge input[type="checkbox"]:checked::before,
body.sentri-edge input[type="radio"]:checked::before,
body.hub-body input[type="checkbox"]:checked::before,
body.hub-body input[type="radio"]:checked::before {
  transform: scale(1);
}

body.sentri-edge select,
body.hub-body select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a8' d='M1.4 0.6L6 5.2 10.6 0.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px 8px;
  cursor: pointer;
  min-height: 2.25rem;
}

body.sentri-edge input:disabled,
body.sentri-edge select:disabled,
body.sentri-edge textarea:disabled,
body.hub-body input:disabled,
body.hub-body select:disabled,
body.hub-body textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.sentri-edge input:focus-visible,
body.sentri-edge select:focus-visible,
body.sentri-edge textarea:focus-visible,
body.sentri-edge button:focus-visible,
body.hub-body input:focus-visible,
body.hub-body select:focus-visible,
body.hub-body textarea:focus-visible,
body.hub-body button:focus-visible {
  outline: 2px solid var(--sentri-accent);
  outline-offset: 2px;
}

body.sentri-edge label,
body.hub-body label {
  color: var(--sentri-text);
}

body.sentri-edge a:not(.btn):not(.sentri-btn):not(.nav-link):not(.brand),
body.hub-body a:not(.btn):not(.sentri-btn):not(.nav-link):not(.brand):not(.hub-nav-link) {
  color: var(--sentri-accent);
}

body.sentri-edge a:not(.btn):not(.sentri-btn):hover,
body.hub-body a:not(.btn):not(.sentri-btn):hover {
  text-decoration: underline;
}

body.sentri-edge table,
body.hub-body table {
  border-collapse: collapse;
}

body.sentri-edge th,
body.hub-body th {
  color: var(--sentri-muted);
  font-weight: 600;
  text-align: left;
}

/* Sentri Layer 2 — shared components.
 * Prefer these over one-off colors. Existing .btn* rules in theme.legacy remain for compat;
 * .sentri-btn* aliases onto the same look for gradual migration.
 */

.sentri-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--sentri-border);
  background: #1e2230;
  color: var(--sentri-text);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.sentri-btn > i,
.sentri-btn > .fa-solid,
.sentri-btn > .fa-regular {
  flex-shrink: 0;
  line-height: 1;
}

.sentri-btn:hover {
  background: #252838;
  text-decoration: none;
  color: var(--sentri-text);
}

.sentri-btn:focus-visible {
  outline: 2px solid var(--sentri-accent);
  outline-offset: 2px;
}

.sentri-btn:disabled,
.sentri-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.sentri-btn--primary {
  background: linear-gradient(180deg, #4f8dee 0%, var(--sentri-accent-dim) 100%);
  border-color: #4f7ec9;
  color: #fff;
}

.sentri-btn--primary:hover {
  filter: brightness(1.08);
  color: #fff;
}

.sentri-btn--secondary {
  background: var(--sentri-bg2);
  border-color: var(--sentri-border);
  color: var(--sentri-text);
}

.sentri-btn--danger {
  background: rgba(240, 113, 120, 0.15);
  border-color: #8f4e52;
  color: #ff9aa1;
}

.sentri-btn--danger:hover {
  background: rgba(240, 113, 120, 0.28);
  color: #fff;
}

.sentri-btn--ghost {
  background: transparent;
}

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

.sentri-card {
  background: var(--sentri-bg1);
  border: 1px solid var(--sentri-border);
  border-radius: var(--sentri-radius);
  padding: var(--sentri-space-4);
  box-shadow: var(--sentri-shadow);
}

.sentri-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 var(--sentri-space-3);
}

.sentri-field > span,
.sentri-field > label {
  font-size: 0.9rem;
  color: var(--sentri-muted);
}

/* One checkbox row. .settings-check and .hub-check are the same row. */
.sentri-check-row,
.settings-check,
.hub-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.35rem 0;
  cursor: pointer;
  color: var(--sentri-text, var(--text));
}

.sentri-check-row--row,
.settings-check--row,
.hub-check--row {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border, var(--sentri-border));
  background: var(--bg2, var(--sentri-bg2));
  margin: 0.35rem 0;
}

.sentri-check-row--row > span,
.settings-check--row > span,
.hub-check--row > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1.35;
}

/* Notices (page flash / inline status) */
.sentri-notice {
  margin: 0 0 var(--sentri-space-3);
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--sentri-border);
  background: rgba(91, 156, 245, 0.1);
  color: var(--sentri-text);
  font-size: 0.9rem;
}

.sentri-notice--success {
  background: rgba(62, 207, 142, 0.12);
  border-color: rgba(62, 207, 142, 0.35);
}

.sentri-notice--warn {
  background: rgba(230, 179, 90, 0.14);
  border-color: rgba(230, 179, 90, 0.4);
  color: var(--sentri-warn);
}

.sentri-notice--error,
.sentri-notice--danger {
  background: rgba(240, 113, 120, 0.12);
  border-color: rgba(240, 113, 120, 0.4);
  color: #ff9aa1;
}

.sentri-notice--info {
  background: rgba(91, 156, 245, 0.1);
  border-color: rgba(91, 156, 245, 0.35);
}

/* DSN row (shared edge/hub observability) */
.sentri-dsn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sentri-dsn-configured {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sentri-success);
}

.sentri-dsn-configured::before {
  content: "✓";
}

.sentri-dsn-masked {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--sentri-muted);
}

.sentri-obs-dirty-pill {
  display: inline-block;
  margin: 0.35rem 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(230, 179, 90, 0.18);
  color: var(--sentri-warn);
  font-size: 0.8rem;
}

.sentri-obs-dirty-pill[hidden] {
  display: none !important;
}

/* Sentry setup help — compact “!” next to Enable Sentry */
.sentri-sentry-enable-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0.35rem 0;
}

.sentri-sentry-enable-row > .hub-check,
.sentri-sentry-enable-row > .settings-check,
.sentri-sentry-enable-row > .hub-check--row,
.sentri-sentry-enable-row > .settings-check--row {
  margin: 0;
}

.sentri-sentry-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--sentri-border);
  background: rgba(91, 156, 245, 0.12);
  color: var(--sentri-accent, #5b9cf5);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.sentri-sentry-help-btn:hover {
  background: rgba(91, 156, 245, 0.22);
  border-color: color-mix(in srgb, var(--sentri-accent, #5b9cf5) 45%, var(--sentri-border));
}

.sentri-sentry-help-btn:focus-visible {
  outline: 2px solid var(--sentri-accent);
  outline-offset: 2px;
}

.sentri-sentry-setup-panel {
  max-width: min(36rem, calc(100vw - 2rem));
}

.sentri-sentry-setup-body {
  max-height: min(60vh, 28rem);
  overflow: auto;
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.sentri-sentry-setup-body .sentri-sentry-setup-steps {
  margin: 0.25rem 0 0.75rem 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.sentri-sentry-setup-body .sentri-sentry-setup-steps ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

/* Sticky dirty / save bar — aliases onto edge settings-save-bar look */
.sentri-dirty-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--sentri-z-sticky);
  margin-top: var(--sentri-space-4);
  padding: 0.75rem 1rem;
  background: rgba(12, 13, 18, 0.92);
  border-top: 1px solid var(--sentri-border);
  backdrop-filter: blur(8px);
}

.sentri-dirty-bar[hidden] {
  display: none !important;
}

/* Inline autosave status (one-line footer at the bottom of a settings section) */
.sentri-inline-save {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.35rem;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--sentri-muted, var(--muted, #8b95a8));
}

.sentri-inline-save--saving {
  color: var(--sentri-muted, var(--muted, #8b95a8));
}

.sentri-inline-save--saved {
  color: var(--sentri-success, var(--success, #3ecf8e));
}

.sentri-inline-save--error {
  color: var(--sentri-danger, var(--danger, #f07178));
}

.sentri-inline-save-spinner {
  box-sizing: border-box;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  border: 2px solid var(--sentri-border, var(--border, #2a3142));
  border-top-color: var(--sentri-accent, var(--accent, #5b9cf5));
  border-radius: 50%;
  animation: sentri-inline-save-spin 0.7s linear infinite;
}

.sentri-inline-save-spinner[hidden],
.sentri-inline-save-check[hidden] {
  display: none !important;
}

.sentri-inline-save-check {
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1;
}

.sentri-inline-save-text {
  min-width: 0;
}

@keyframes sentri-inline-save-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Security settings chrome (password / sessions / checklist) --- */

.sentri-frag-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

.sentri-disclosure {
  margin: 0;
  border: 1px solid var(--sentri-border);
  border-radius: var(--sentri-radius, 10px);
  background: color-mix(in srgb, var(--sentri-bg2, #161922) 70%, transparent);
}

.sentri-disclosure > .sentri-disclosure-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem 0.75rem;
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 0.95rem;
  font-weight: 600;
  user-select: none;
}

.sentri-disclosure > .sentri-disclosure-summary::-webkit-details-marker {
  display: none;
}

.sentri-disclosure-title {
  min-width: 0;
}

.sentri-disclosure-meta {
  justify-self: end;
  text-align: end;
}

.sentri-disclosure-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--sentri-muted, #9aa3b5);
  border-bottom: 2px solid var(--sentri-muted, #9aa3b5);
  transform: rotate(45deg);
  margin: 0 0.05rem 0.12rem 0;
  transition: transform 0.15s ease;
}

.sentri-disclosure[open] > .sentri-disclosure-summary .sentri-disclosure-chevron {
  transform: rotate(225deg);
  margin-bottom: 0;
  margin-top: 0.12rem;
}

/* A settings card whose only job is this disclosure. The card is the chrome. */
.hub-settings-accordion-card > .hub-settings-section-disclosure {
  border: none;
  background: transparent;
  border-radius: 0;
}
.hub-settings-accordion-card > .hub-settings-section-disclosure > .sentri-disclosure-summary {
  padding: 0;
}
.hub-settings-accordion-card > .hub-settings-section-disclosure > .sentri-disclosure-summary .sentri-disclosure-title {
  font-size: 1.1rem;
  font-weight: 600;
}
.hub-settings-accordion-card > .hub-settings-section-disclosure > .sentri-disclosure-body {
  border-top: none;
  padding: 0;
}
.hub-settings-accordion-card > .hub-settings-section-disclosure > .sentri-disclosure-body > :first-child {
  margin-top: 0.85rem;
}
.hub-settings-accordion-card .sentri-disclosure-body .sentri-disclosure {
  margin-top: 0.85rem;
  border: none;
  border-top: 1px solid var(--sentri-border, var(--border));
  border-radius: 0;
  background: transparent;
}
.hub-settings-accordion-card .sentri-disclosure-body .sentri-disclosure > .sentri-disclosure-summary {
  padding: 0.7rem 0;
}
.hub-settings-accordion-card .sentri-disclosure-body .sentri-disclosure > .sentri-disclosure-body {
  border-top: none;
  padding: 0 0 0.15rem;
}

.sentri-disclosure-body {
  padding: 0 0.95rem 0.95rem;
  border-top: 1px solid color-mix(in srgb, var(--sentri-border) 70%, transparent);
}

.sentri-disclosure-body > :first-child {
  margin-top: 0.75rem;
}

/* Compact card of stacked token/status disclosures (Settings Updates). */
.sentri-card.sentri-updates-access {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0.55rem 0 0.85rem;
  overflow: hidden;
}
.sentri-card.sentri-updates-access > .sentri-disclosure {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sentri-card.sentri-updates-access > .sentri-disclosure + .sentri-disclosure {
  border-top: 1px solid var(--sentri-border);
}
.sentri-card.sentri-updates-access > .sentri-disclosure > .sentri-disclosure-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem 0.65rem;
  padding: 0.55rem 0.8rem;
}
.sentri-card.sentri-updates-access .sentri-disclosure-title {
  flex: none;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 650;
}
.sentri-card.sentri-updates-access .sentri-disclosure-chevron {
  margin: 0 0.05rem 0.12rem 0;
}
.sentri-card.sentri-updates-access > .sentri-disclosure[open] > .sentri-disclosure-summary .sentri-disclosure-chevron {
  margin-bottom: 0;
  margin-top: 0.12rem;
}
.sentri-card.sentri-updates-access > .sentri-disclosure > .sentri-disclosure-body {
  padding: 0.15rem 0.8rem 0.75rem;
}
.sentri-card.sentri-updates-access > .sentri-disclosure > .sentri-disclosure-body > :first-child {
  margin-top: 0.45rem;
}
.sentri-card.sentri-updates-access .sentri-updates-token-pill {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sentri-card.sentri-updates-access .sentri-disclosure-body p.muted {
  margin: 0;
}

.sentri-check-summary-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.sentri-check-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  border: 1px solid var(--sentri-border);
  color: var(--sentri-muted);
  background: rgba(0, 0, 0, 0.18);
}

.sentri-check-summary-pill--ok {
  color: var(--sentri-success, #3ecf8e);
  border-color: color-mix(in srgb, var(--sentri-success, #3ecf8e) 40%, var(--sentri-border));
  background: color-mix(in srgb, var(--sentri-success, #3ecf8e) 12%, transparent);
}

.sentri-check-summary-pill--warn {
  color: var(--sentri-warn, #e6b35a);
  border-color: color-mix(in srgb, var(--sentri-warn, #e6b35a) 40%, var(--sentri-border));
  background: color-mix(in srgb, var(--sentri-warn, #e6b35a) 12%, transparent);
}

.sentri-check-summary-pill--bad {
  color: #ff9aa1;
  border-color: color-mix(in srgb, #f07178 40%, var(--sentri-border));
  background: color-mix(in srgb, #f07178 12%, transparent);
}

.sentri-table-scroll {
  max-height: 16.5rem; /* ~6 rows + header */
  margin-top: 0.5rem;
  border: 1px solid var(--sentri-border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.sentri-table-scroll > table {
  margin: 0;
  width: 100%;
}

.sentri-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sentri-bg1, #12151c);
  box-shadow: 0 1px 0 var(--sentri-border);
}

.sentri-pw-form[hidden],
.sentri-pw-reveal[hidden] {
  display: none !important;
}

.sentri-pw-form {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.sentri-tls-block {
  display: grid;
  gap: 0.55rem;
}

.sentri-tls-block > h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
}

/* --- Two-factor (2FA) settings card --- */

.sentri-2fa-card {
  display: grid;
  gap: 1rem;
}

.sentri-2fa-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
}

.sentri-2fa-status-row > #twofa-status,
.sentri-2fa-status {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.95rem;
  color: var(--sentri-text, var(--text));
}

.sentri-2fa-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--sentri-border);
  background: rgba(0, 0, 0, 0.18);
  color: var(--sentri-muted);
}

.sentri-2fa-badge--on {
  color: var(--sentri-success, #3ecf8e);
  border-color: color-mix(in srgb, var(--sentri-success, #3ecf8e) 45%, var(--sentri-border));
  background: color-mix(in srgb, var(--sentri-success, #3ecf8e) 14%, transparent);
}

.sentri-2fa-badge--off {
  color: var(--sentri-muted, #9aa3b5);
}

.sentri-2fa-badge--pending {
  color: var(--sentri-warn, #e6b35a);
  border-color: color-mix(in srgb, var(--sentri-warn, #e6b35a) 45%, var(--sentri-border));
  background: color-mix(in srgb, var(--sentri-warn, #e6b35a) 14%, transparent);
}

.sentri-2fa-block {
  display: grid;
  gap: 0.75rem;
}

.sentri-2fa-block[hidden] {
  display: none !important;
}

.sentri-2fa-lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--sentri-muted, #9aa3b5);
  line-height: 1.4;
}

.sentri-2fa-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
  counter-reset: sentri-2fa-step;
}

.sentri-2fa-steps > li {
  position: relative;
  margin: 0;
  padding: 0.85rem 0.95rem 0.85rem 2.75rem;
  border: 1px solid var(--sentri-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sentri-bg2, #161922) 72%, transparent);
  counter-increment: sentri-2fa-step;
}

.sentri-2fa-steps > li::before {
  content: counter(sentri-2fa-step);
  position: absolute;
  left: 0.85rem;
  top: 0.9rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #4f8dee 0%, var(--sentri-accent-dim, #3a6bb5) 100%);
}

.sentri-2fa-step-title {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--sentri-text, var(--text));
}

.sentri-2fa-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.35rem 0 0.75rem;
}

.sentri-2fa-qr {
  width: 11.5rem;
  height: 11.5rem;
  max-width: min(11.5rem, 70vw);
  max-height: min(11.5rem, 70vw);
  padding: 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--sentri-border);
  background: #fff;
  box-sizing: border-box;
  object-fit: contain;
}

.sentri-2fa-qr[hidden] {
  display: none !important;
}

.sentri-2fa-qr-caption {
  margin: 0;
  max-width: 22rem;
}

.sentri-2fa-manual-fallback {
  margin: 0.35rem 0 0;
}

.sentri-2fa-manual-fallback > summary {
  cursor: pointer;
  color: var(--sentri-muted, var(--muted));
  font-size: 0.85rem;
}

.sentri-2fa-secret,
code.twofa-secret,
#twofa-secret {
  display: block;
  margin: 0.35rem 0 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--sentri-border);
  background: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
}

.sentri-api-action--pending {
  opacity: 0.72;
  cursor: wait;
}

.sentri-api-action-modal .sentri-api-action-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f07178 85%, var(--sentri-muted, #9aa3b5));
}

.sentri-api-action-panel .settings-modal-lead {
  white-space: pre-wrap;
  word-break: break-word;
}

.sentri-2fa-recovery,
ul.twofa-recovery,
#twofa-recovery,
#twofa-regen-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.4rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

.sentri-2fa-recovery > li,
ul.twofa-recovery > li,
#twofa-recovery > li,
#twofa-regen-codes > li {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--sentri-border);
  background: rgba(0, 0, 0, 0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  text-align: center;
}

.sentri-2fa-section {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--sentri-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sentri-bg2, #161922) 55%, transparent);
}

.sentri-2fa-enabled-summary {
  margin: 0 0 0.65rem;
}

.sentri-2fa-advanced {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.85rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--sentri-border);
  background: color-mix(in srgb, var(--sentri-bg2, #161922) 55%, transparent);
}

.sentri-2fa-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.sentri-2fa-advanced[open] > summary {
  margin-bottom: 0.65rem;
}

.sentri-2fa-advanced .sentri-2fa-section {
  margin-top: 0.65rem;
}

.sentri-dev-options-details {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.85rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--sentri-border);
  background: color-mix(in srgb, var(--sentri-bg2, #161922) 40%, transparent);
}

.sentri-dev-options-panels {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.sentri-dev-options-panels[hidden] {
  display: none !important;
}

.sentri-dev-options-panels > .sentri-dev-options-details {
  margin: 0;
}

.sentri-dev-options-summary {
  cursor: pointer;
  font-weight: 600;
}

.sentri-dev-options-details[open] > .sentri-dev-options-summary {
  margin-bottom: 0.65rem;
}

.sentri-2fa-section--danger {
  border-color: color-mix(in srgb, #f07178 35%, var(--sentri-border));
  background: color-mix(in srgb, #f07178 6%, transparent);
}

.sentri-2fa-section > h3,
.sentri-2fa-section .settings-panel-subtitle,
.sentri-2fa-section .hub-card-subtitle {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}

.sentri-2fa-section > p {
  margin: 0;
}

.sentri-2fa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sentri-2fa-msg {
  margin: 0;
  min-height: 1.2em;
}

.sentri-2fa-msg.error,
#twofa-msg.error,
#passkey-msg.error,
#hub-webauthn-login-msg.error {
  color: #ff9aa1;
}

.sentri-2fa-policy {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.sentri-2fa-policy-lead {
  margin: 0;
}

.sentri-2fa-default-hint {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
}

.sentri-2fa-timeout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
}

.sentri-2fa-timeout-row .sentri-field {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.sentri-2fa-timeout-row input[type="number"] {
  width: 7rem;
  max-width: 100%;
}

.sentri-2fa-timeout-row .sentri-field:has(input:disabled) {
  opacity: 0.62;
}

.sentri-passkeys {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sentri-border, var(--border, #2a3140));
}

.sentri-passkey-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin: 0.75rem 0 0.65rem;
}

.sentri-passkey-add-row .sentri-field {
  flex: 1 1 12rem;
  margin: 0;
}

.sentri-passkey-list {
  max-height: 14rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.35rem 0 0;
  padding-right: 0.25rem;
}

.sentri-passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--sentri-border, var(--border, #2a3140));
  background: color-mix(in srgb, var(--sentri-bg0, var(--bg0, #0f1117)) 88%, transparent);
}

.sentri-passkey-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sentri-passkey-meta > strong {
  font-size: 0.92rem;
}

.sentri-login-passkey-hint,
.sentri-login-2fa-passkey {
  margin: 0.85rem 0 0;
}

.sentri-login-2fa-passkey .btn {
  width: 100%;
}

/* --- Login TOTP challenge (password → code step) --- */

.sentri-login-2fa-lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 36ch;
}

.sentri-login-2fa-error {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.sentri-login-2fa-form {
  margin-top: 1.15rem;
}

.sentri-login-2fa-form .field {
  margin: 0;
}

.sentri-login-2fa-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--sentri-border, var(--border));
  background: color-mix(in srgb, var(--sentri-bg0, var(--bg0, #0f1117)) 88%, transparent);
  color: var(--sentri-text, var(--text));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sentri-login-2fa-code::placeholder {
  letter-spacing: 0.28em;
  color: color-mix(in srgb, var(--sentri-muted, var(--muted, #9aa3b5)) 70%, transparent);
  opacity: 1;
}

.sentri-login-2fa-code:focus {
  outline: none;
  border-color: var(--sentri-accent, var(--accent, #5b9cf5));
  box-shadow: 0 0 0 3px rgba(91, 156, 245, 0.22);
}

.sentri-login-2fa-form .field-hint {
  margin-top: 0.45rem;
  max-width: none;
  color: var(--sentri-muted, var(--muted, #9aa3b5));
}

.sentri-login-2fa-form .btn-primary {
  width: 100%;
  justify-self: stretch;
  margin-top: 0.15rem;
  min-height: 2.65rem;
  font-weight: 650;
}

.sentri-login-2fa-back {
  margin: 1.15rem 0 0;
  text-align: center;
  font-size: 0.88rem;
}

body.sentri-auth-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn),
body.hub-auth-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn),
body.sentri-edge .sentri-login-2fa-back a:not(.btn):not(.sentri-btn),
body.hub-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):not(.nav-link):not(.brand):not(.hub-nav-link) {
  color: var(--sentri-muted, var(--muted, #9aa3b5));
  text-decoration: none;
}

body.sentri-auth-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):hover,
body.sentri-auth-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):focus-visible,
body.hub-auth-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):hover,
body.hub-auth-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):focus-visible,
body.sentri-edge .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):hover,
body.sentri-edge .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):focus-visible,
body.hub-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):not(.nav-link):not(.brand):not(.hub-nav-link):hover,
body.hub-body .sentri-login-2fa-back a:not(.btn):not(.sentri-btn):not(.nav-link):not(.brand):not(.hub-nav-link):focus-visible {
  color: var(--sentri-accent, var(--accent, #5b9cf5));
  text-decoration: underline;
}

/* Recording schedule — layered polish on top of theme.legacy rows */
.settings-schedule-days {
  gap: 0.65rem;
}

.settings-day-toggle-face {
  border-color: var(--sentri-border, var(--border));
  color: var(--sentri-muted, var(--muted, #9aa3b5));
}

.settings-day-toggle:hover .settings-day-toggle-face {
  border-color: color-mix(in srgb, var(--sentri-accent, var(--accent, #5b9cf5)) 45%, var(--sentri-border, var(--border)));
  color: var(--sentri-text, var(--text));
}

.settings-day-toggle--on .settings-day-toggle-face,
.settings-day-toggle:has(.settings-day-toggle-input:checked) .settings-day-toggle-face {
  border-color: color-mix(in srgb, var(--sentri-accent, var(--accent, #5b9cf5)) 55%, var(--sentri-border, var(--border)));
  background: color-mix(in srgb, var(--sentri-accent, var(--accent, #5b9cf5)) 18%, rgba(0, 0, 0, 0.16));
  color: var(--sentri-text, var(--text));
}

.settings-schedule-day-row {
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.settings-schedule-day-row.settings-schedule-day-row--on {
  border-color: color-mix(in srgb, var(--sentri-accent, var(--accent, #5b9cf5)) 40%, var(--sentri-border, var(--border)));
  background: color-mix(in srgb, var(--sentri-accent, var(--accent, #5b9cf5)) 8%, rgba(0, 0, 0, 0.16));
}

.settings-schedule-sep {
  opacity: 0.75;
}

@media (max-width: 560px) {
  .settings-schedule-times {
    justify-content: flex-start;
  }
}

/* Hover / focus tooltip — body-portaled by sentri-tooltip.js */
.sentri-tooltip {
  position: fixed;
  z-index: 12010;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.55rem 0.75rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--sentri-text, var(--text, #e8eef4));
  background: linear-gradient(180deg, #222636 0%, #171a24 100%);
  border: 1px solid rgba(58, 66, 88, 0.95);
  border-radius: 10px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.sentri-tooltip[hidden] {
  display: none !important;
}
.sentri-tooltip-title {
  margin: 0 0 0.28rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sentri-accent, var(--accent, #5b9cf5));
}
.sentri-tooltip-title[hidden] {
  display: none !important;
}
.sentri-tooltip-body {
  margin: 0;
}
.sentri-tooltip-spark {
  margin: 0.5rem 0 0;
  padding: 0.35rem 0.4rem 0.25rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sentri-accent, var(--accent, #5b9cf5));
}
.sentri-tooltip-spark[hidden] {
  display: none !important;
}
.sentri-tooltip-spark-svg {
  display: block;
  width: 100%;
  height: 2.35rem;
}
.sentri-tooltip-spark-caption {
  margin: 0.2rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sentri-muted, var(--muted, #9aa6b2));
}
.sentri-tooltip::after {
  content: "";
  position: absolute;
  left: var(--sentri-tip-arrow, 50%);
  bottom: -6px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #171a24;
  border-bottom-width: 0;
}
.hub-card-subtitle,
.hub-settings-subtitle {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.hub-settings-subcard,
.sentri-subcard {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--sentri-border, var(--border, #2a3140));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--sentri-surface, #12151c) 92%, transparent);
}

.hub-remote-edu-callout {
  margin: 0.75rem 0;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(91, 156, 245, 0.35);
  background: rgba(91, 156, 245, 0.1);
  color: var(--sentri-text, inherit);
  font-size: 0.9rem;
}

.hub-remote-edu-callout ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.field-unit {
  margin-left: 0.35rem;
  color: var(--sentri-muted, var(--muted, #9aa6b2));
  font-size: 0.85rem;
}

.hub-settings-group-title {
  margin: 1.15rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sentri-muted, var(--muted, #8b95a8));
}

.sentri-tooltip--below::after {
  bottom: auto;
  top: -6px;
  border-top-color: transparent;
  border-bottom-color: #222636;
  border-top-width: 0;
  border-bottom-width: 6px;
}