/* ─────────────────────────────────────────────────────────────
   Stream — MediaMTX front end
   ───────────────────────────────────────────────────────────── */

:root {
  /* Ibn Firnas Drone Center palette, sampled from ifdc.om:
     teal #06B6AD (primary CTA), #092327 (gradient end), gold #CFA20C
     (Academy), on pure black. */
  --bg:            #000000;
  --surface:       #0a1113;
  --surface-2:     #0f191c;
  --surface-3:     #152325;
  --border:        #1d3134;
  --border-soft:   #142225;

  --text:          #f2f7f8;
  --text-dim:      #93a8ab;
  --text-faint:    #5f7477;

  --accent:        #06b6ad;
  --accent-deep:   #092327;
  --accent-soft:   #0ad3c8;
  --accent-glow:   rgba(6, 182, 173, .16);
  --brand-grad:    linear-gradient(55deg, #06b6ad 0%, #092327 100%);

  --gold:          #cfa20c;
  --live:          #f43f5e;
  --ok:            #06b6ad;
  --warn:          #cfa20c;

  --sidebar-w:     266px;
  --radius:        14px;
  --radius-sm:     9px;

  --shadow:        0 1px 2px rgba(0,0,0,.6), 0 10px 34px rgba(0,0,0,.5);
  --ease:          cubic-bezier(.22,.61,.36,1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

/* Any rule that sets `display` beats the [hidden] attribute default, which
   silently un-hides elements JS has marked hidden (.btn is display:inline-flex,
   so `overlayBtn.hidden = true` had no visible effect). Enforce it globally. */
[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  background-image:
    radial-gradient(1200px 680px at 82% -14%, rgba(6,182,173,.10) 0%, transparent 60%),
    radial-gradient(760px 520px at 4% 6%, rgba(6,182,173,.05) 0%, transparent 58%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Concentric radar rings, echoing the hero on ifdc.om. Purely decorative. */
body::before {
  content: '';
  position: fixed;
  top: -18vh; right: -14vw;
  width: 105vh; height: 105vh;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background:
    repeating-radial-gradient(circle,
      rgba(6,182,173,.055) 0 1px,
      transparent 1px 74px);
  mask-image: radial-gradient(circle, #000 38%, transparent 71%);
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 71%);
}
.shell { position: relative; z-index: 1; }

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.018em; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .84em; }

::selection { background: var(--accent-glow); color: #fff; }

/* ── shell ─────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ── sidebar ───────────────────────────────────────────────── */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px 16px;
  background: linear-gradient(180deg, rgba(16,21,29,.94), rgba(10,14,20,.97));
  border-right: 1px solid var(--border-soft);
  backdrop-filter: blur(12px);
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 6px 0;
}

.brand-logo {
  width: 100%;
  max-width: 196px;
  height: auto;
  display: block;
}

.brand-tag {
  margin: 9px 0 0 7px;
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.nav { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 520;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }

.nav-item.is-active {
  background: linear-gradient(90deg, var(--accent-glow), rgba(34,211,238,.03));
  color: var(--text);
}
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.nav-item.is-active svg { opacity: 1; color: var(--accent); }

.nav-badge {
  margin-left: auto;
  min-width: 21px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.sidebar-foot { margin-top: auto; }

.health {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.health-dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background .3s, box-shadow .3s;
}
.health[data-state="ok"]   .health-dot { background: var(--ok);   box-shadow: 0 0 10px var(--ok); }
.health[data-state="down"] .health-dot { background: var(--live); box-shadow: 0 0 10px var(--live); }
.health-text { display: flex; flex-direction: column; min-width: 0; }
.health-text strong { font-size: 12.5px; font-weight: 600; }
.health-text small  { font-size: 11px; color: var(--text-faint); font-family: var(--mono);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── main ──────────────────────────────────────────────────── */

.main {
  min-width: 0;
  padding: 26px 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.topbar-title h1 { font-size: 23px; }
.topbar-title p  { font-size: 13px; color: var(--text-faint); margin-top: 1px; }

.menu-btn {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.menu-btn svg { width: 18px; height: 18px; }

.live-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: .09em;
  color: var(--text-faint);
  white-space: nowrap;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-pill[data-state="on"] {
  color: var(--live);
  border-color: rgba(244,63,94,.35);
  background: rgba(244,63,94,.08);
}
.live-pill[data-state="on"] .live-dot { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,63,94,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(244,63,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); }
}

/* ── sections ──────────────────────────────────────────────── */

.section { display: none; flex-direction: column; gap: 22px; }
.section.is-active { display: flex; }

/* ── player ────────────────────────────────────────────────── */

.player-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #05080c;
  background-image: radial-gradient(circle at 50% 50%, #0e1620, #05080c 72%);
}
.player-frame video { width: 100%; height: 100%; display: block; object-fit: contain; }

.unmute {
  position: absolute;
  left: 14px;
  bottom: 58px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(34,211,238,.4);
  background: rgba(8,12,18,.86);
  backdrop-filter: blur(6px);
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.unmute:hover { background: rgba(34,211,238,.16); }
.unmute svg { width: 15px; height: 15px; }
.unmute[hidden] { display: none; }

.player-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: rgba(5,8,12,.82);
  backdrop-filter: blur(3px);
  transition: opacity .35s var(--ease), visibility .35s;
}
.player-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.player-overlay[hidden] { display: grid; opacity: 0; visibility: hidden; pointer-events: none; }
.overlay-inner { max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.overlay-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  margin-bottom: 4px;
}
.overlay-icon svg { width: 25px; height: 25px; }
.overlay-inner h3 { font-size: 16.5px; }
.overlay-inner p  { font-size: 13.5px; color: var(--text-dim); }

.player-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.player-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.player-name h2 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
}
.player-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 540;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn:hover  { background: var(--surface-3); border-color: #2c3849; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-grad);
  border-color: transparent;
  color: #00110f;
  font-weight: 640;
}
.btn-primary:hover { filter: brightness(1.12); background: var(--brand-grad); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

/* ── stats ─────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.35), transparent);
}
.stat-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.stat-value { font-size: 25px; font-weight: 660; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 12px; font-weight: 500; color: var(--text-faint); margin-left: 3px; }
.stat-foot  { font-size: 11.5px; color: var(--text-faint); }

/* ── panels ────────────────────────────────────────────────── */

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  padding: 17px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-2), transparent);
}
.panel-head h3 { font-size: 15px; }
.panel-head p  { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.panel-head em { color: var(--text-dim); font-style: normal; }

/* ── stream list ───────────────────────────────────────────── */

.stream-list { display: flex; flex-direction: column; }
.stream-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background .16s var(--ease);
}
.stream-row:last-child { border-bottom: 0; }
.stream-row:hover { background: var(--surface-2); }
.stream-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-faint); }
.stream-row.is-live .dot { background: var(--live); box-shadow: 0 0 9px var(--live); }
.stream-row .sname { font-family: var(--mono); font-size: 13.5px; }
.stream-row .stracks { font-size: 12px; color: var(--text-faint); }
.stream-row .sgo { margin-left: auto; font-size: 12px; color: var(--accent); opacity: 0; transition: opacity .16s; }
.stream-row:hover .sgo { opacity: 1; }

.empty { padding: 34px 20px; text-align: center; color: var(--text-faint); font-size: 13.5px; }

/* ── key/value rows ────────────────────────────────────────── */

.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.kv-row:last-child { border-bottom: 0; }
.kv-key { flex: none; width: 108px; font-size: 12.5px; color: var(--text-faint); }
.kv-val {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 7px;
  background: #0a0f16;
  border: 1px solid var(--border-soft);
  color: var(--accent);
  overflow-x: auto;
  white-space: nowrap;
}
.kv-val em { color: var(--warn); font-style: normal; }

.copy-mini {
  flex: none;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
.copy-mini:hover { color: var(--accent); border-color: var(--accent-deep); }

.note {
  padding: 14px 20px;
  font-size: 12.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
  background: rgba(34,211,238,.02);
}
.note code { color: var(--text-dim); }

/* ── toast ─────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}

/* ── responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .menu-btn { display: grid; }
  .main { padding: 20px 18px 44px; }
  .player-actions { margin-left: 0; width: 100%; }
}

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

/* ── drone guide ───────────────────────────────────────────── */

.route {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.route:last-child { border-bottom: 0; }
.route-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.route-num {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--accent-glow);
  border: 1px solid rgba(6,182,173,.32);
  color: var(--accent);
  font-size: 11px; font-weight: 700;
}
.route-head h4 { margin: 0; font-size: 14px; font-weight: 620; }
.route-tag {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.route-tag.best { background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(6,182,173,.3); }
.route-tag.alt  { background: rgba(207,162,12,.12); color: var(--gold); border: 1px solid rgba(207,162,12,.28); }
.route p { font-size: 12.8px; color: var(--text-dim); margin: 0 0 9px 32px; }
.route .kv-val { margin-left: 32px; display: block; }

.latency {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px 20px;
}
.lat {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.lat b { display: block; font-size: 19px; font-weight: 660; letter-spacing: -.02em; }
.lat span { font-size: 11.5px; color: var(--text-faint); }
.lat.good b { color: var(--accent); }
.lat.mid  b { color: var(--gold); }

/* ── copyable URL blocks ───────────────────────────────────── */

.kv-val.is-copyable { cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease); }
.kv-val.is-copyable:hover { border-color: rgba(6,182,173,.45); background: #08191b; }

.route .copy-mini { margin: 8px 0 0 32px; }

/* Shown only when this client was allowed to load the real key. */
.creds-note { display: none; }
body.has-creds .creds-note { display: block; }
body.has-creds .creds-hidden { display: none; }

/* ── recordings ────────────────────────────────────────────── */

.rec-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.rec-bar label { font-size: 12.5px; color: var(--text-faint); }
.rec-bar input {
  flex: 0 1 220px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0a0f16;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
}
.rec-bar input:focus { outline: none; border-color: var(--accent-deep); }
.rec-bar .btn { margin-left: auto; }

.rec-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.rec-row:last-child { border-bottom: 0; }
.rec-when { font-family: var(--mono); font-size: 13px; }
.rec-dur  { font-size: 12px; color: var(--text-faint); }
.rec-size { margin-left: auto; font-size: 12px; color: var(--text-faint); }
.rec-actions { display: flex; gap: 8px; }
.rec-actions .btn { padding: 6px 12px; font-size: 12px; }