/* Podcaster Radio: broadcast console theme layered over Bootstrap 5.3 dark. */

:root {
  --pr-bg: #0f1115;
  --pr-surface: #181b22;
  --pr-surface-2: #1e222b;
  --pr-border: #2a2f3a;
  --pr-text: #e7e9ee;
  --pr-muted: #9aa3b2;
  --pr-accent: #f5a623;   /* on-air amber */
  --pr-accent-dim: #b87d1a;
  --pr-ok: #3fb950;
  --pr-bad: #e5484d;

  /* Bend Bootstrap's primary toward the amber accent. */
  --bs-primary: var(--pr-accent);
  --bs-primary-rgb: 245, 166, 35;
  --bs-link-color: var(--pr-accent);
  --bs-link-hover-color: #ffc04d;
}

body.pr-body {
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(245, 166, 35, 0.08), transparent 60%),
    var(--pr-bg);
  color: var(--pr-text);
  min-height: 100vh;
}

.pr-wordmark {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.pr-navbar {
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pr-border);
}

/* The signature element: a pulsing on-air indicator dot. */
.pr-onair-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--pr-accent);
  box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.6);
  animation: pr-pulse 2.4s infinite;
}

@keyframes pr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.55); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-onair-dot { animation: none; }
}

.pr-main { padding: 2rem 0 3rem; }
.pr-alert { border: 1px solid var(--pr-border); }

/* Cards / panels */
.pr-card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 14px;
}
.pr-card .card-header,
.pr-card .pr-card-header {
  background: transparent;
  border-bottom: 1px solid var(--pr-border);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.text-muted-2 { color: var(--pr-muted) !important; }

/* Centered auth screens */
.pr-auth-wrap {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  padding: 2rem;
}
.pr-auth-logo {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}
.pr-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--pr-muted);
}

.form-control:focus {
  border-color: var(--pr-accent);
  box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.2);
}

/* Status indicators */
.pr-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid var(--pr-border);
}
.pr-pill .pr-led { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.pr-pill.is-ok    { color: #b9f6c5; } .pr-pill.is-ok .pr-led    { background: var(--pr-ok); }
.pr-pill.is-bad   { color: #ffc9cb; } .pr-pill.is-bad .pr-led   { background: var(--pr-bad); }
.pr-pill.is-wait  { color: var(--pr-muted); } .pr-pill.is-wait .pr-led  { background: var(--pr-muted); }

.pr-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--pr-surface-2);
  border: 1px solid var(--pr-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  word-break: break-all;
}

.pr-otp-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.5em;
  text-align: center;
}

.pr-qr {
  background: #fff;
  padding: 0.75rem;
  border-radius: 12px;
  display: inline-block;
}