/* Alpine.js: verbergt elementen tot Alpine ze geïnitialiseerd heeft, zodat er
   geen onbewerkte {{ }}-achtige flits te zien is bij een trage verbinding. */
[x-cloak] { display: none !important; }

:root {
  --page-plane:      #0d0d0d;
  --surface-1:       #1a1a19;
  --surface-2:       #232322;
  --text-primary:    #ffffff;
  --text-secondary:  #c3c2b7;
  --text-muted:      #898781;
  --border-hairline: rgba(255, 255, 255, 0.10);
  --gridline:        #2c2c2a;
  --accent:          #3987e5;
  --status-good:     #0ca30c;
  --status-critical: #d03b3b;
  --status-warning:  #fab219;
  /* Standaard hetzelfde systeemlettertype als hieronder bij body — theme_css.php
     (zie admin/theme.php) overschrijft dit als de eigenaar een ander
     lettertype kiest; zonder die keuze verandert er dus niets. */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

/* Sticky footer: alleen op pagina's die een .site-footer renderen (public.php,
   public_stream.php) — andere pagina's (dashboard.php, login.php, ...) delen
   dit stylesheet maar hebben geen footer, dus die blijven ongemoeid. De body
   wordt een kolom van minstens de volledige viewporthoogte; margin-top: auto
   op de footer duwt 'm naar beneden als de inhoud korter is dan het scherm,
   en laat 'm gewoon meestromen zodra de inhoud lang genoeg is. */
body:has(.site-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(.site-footer) .site-footer {
  margin-top: auto;
}
/* In deze flex-kolom maakt "margin: 0 auto" de .container zo smal als z'n
   inhoud — daardoor was de ene stationpagina breder dan de andere (lange
   titels bij "Net gespeeld" duwden 'm breder). Altijd de volle breedte tot
   de max-width, lange tekst loopt/scrolt binnen die breedte. */
body:has(.site-footer) > .container { width: 100%; min-width: 0; }

/* StreamTop-merkbanner als vaste (fixed) paginaachtergrond — blijft zichtbaar
   achter de kaarten terwijl je scrolt, niet alleen bovenin. Kaarten (.public-card
   e.d.) hebben zelf een ondoorzichtige achtergrond, dus de leesbaarheid van de
   inhoud verandert niet; alleen de ruimte eromheen toont de foto. Gebruikt op
   public.php/public_stream.php/dashboard.php — zie hun <body class="page-bg-banner">. */
body.page-bg-banner {
  background:
    linear-gradient(180deg, rgba(8, 12, 22, 0.6) 0%, rgba(8, 12, 22, 0.75) 100%),
    url('img/header-banner.jpg') center top / cover no-repeat fixed;
}

a { color: var(--accent); }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-1);
}

.topbar a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.topbar nav a { color: var(--text-secondary); font-weight: 400; margin-left: 20px; }
.topbar nav a:hover { color: var(--text-primary); }
.brand-link { text-decoration: none; }

/* Merkbeeld (icoon + wordmark), volledig in HTML/CSS — geen losse afbeelding */
.brand-mark { display: inline-flex; flex-direction: column; gap: 2px; }
.brand-mark-row { display: flex; align-items: center; gap: 10px; }
.brand-mark-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #79bbff, #1c4e8c 75%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(57, 135, 229, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.brand-mark-text {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.bm-stream { color: #fff; }
.bm-pulse {
  background: linear-gradient(90deg, #6db8ff, #b79cf7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-mark-sm .brand-mark-text { font-size: 17px; }
.brand-mark-md .brand-mark-text { font-size: 23px; }
.brand-mark-lg .brand-mark-text { font-size: 30px; }
.brand-mark-tagline {
  font-family: 'Dancing Script', cursive;
  font-size: 17px;
  color: #a9cdf5;
  margin-left: 64px;
  margin-top: -4px;
}
.auth-brand { text-align: center; margin-bottom: 18px; }

/* Glanzende rechthoekige nav-knoppen (bijv. Inloggen/Registreren op de publieke pagina) */
.nav-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.nav-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.nav-btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.nav-btn-primary { background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%); }
.nav-btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.02)); color: #dce8fb; border-color: rgba(255, 255, 255, 0.3); }
/* flex-wrap:wrap is bewust toegevoegd (was er niet): zonder wrap bleven alle
   knoppen in ÉÉN ononderbroken rij staan (white-space:nowrap op .nav-btn, en
   een flex-item krimpt standaard niet onder zijn eigen inhoud), wat op de
   gewone paginaheaders met maar 2-4 knoppen toevallig nooit opviel maar bij
   het beheerpaneel (adminNavHtml() in includes/functions.php, tot 11
   knoppen) op een telefoon een eindeloze horizontaal scrollende rij
   veroorzaakte i.p.v. gewoon netjes af te breken naar een volgende regel. */
.header-auth { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
p.muted, .muted { color: var(--text-muted); font-size: 13px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

/* width i.p.v. een vaste max-width: schaalt mee met (heel) brede schermen
   i.p.v. altijd hetzelfde aantal pixels te blijven, en blijft dankzij
   min()/94vw ook op een telefoon netjes binnen de rand. */
.auth-card {
  width: min(94vw, 720px);
  margin: 64px auto;
  padding: 48px;
}
/* Ruimere invoervelden dan de rest van de site (die delen dit stylesheet,
   bewust ongemoeid) — past beter bij deze bredere kaart. */
.auth-card .field input[type="text"],
.auth-card .field input[type="email"],
.auth-card .field input[type="password"] {
  padding: 14px 16px;
  font-size: 16px;
}
.auth-card .field label { font-size: 14px; }
.auth-card button[type="submit"] { padding: 13px 20px; font-size: 15px; }

/* Dun laadbalkje bovenaan zowat elke pagina — vult bij het laden van de
   pagina en opnieuw bij het versturen van een formulier (zie
   assets/page-progress.js, gedeeld door alle pagina's die dit gebruiken).
   Bewust nooit tot 100% bij versturen: de pagina navigeert normaal
   gesproken weg zodra de server klaar is. */
#page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  box-shadow: 0 0 8px rgba(57, 135, 229, 0.6);
  z-index: 9999;
  transition: width 0.25s ease, opacity 0.4s ease;
}
#page-progress.is-done { opacity: 0; }

/* Wachtwoordsterkte-balk onder het wachtwoordveld op register.php. */
.password-strength {
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  margin-top: 8px;
  overflow: hidden;
}
.password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.password-strength-label {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0;
  min-height: 14px;
}

/* Kleinere kaarten naast elkaar in een grid i.p.v. onder elkaar (admin.php) —
   alleen grote kaarten (grafiek, grote tabellen) blijven los/vol-breed. */
.admin-card-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.admin-card-grid > .card { flex: 1 1 380px; min-width: 0; margin-bottom: 0; }
.admin-card-grid > .card table { display: block; overflow-x: auto; }

/* Gekleurde bovenrand per kaart (bijv. admin/analytics.php) — puur om elke
   sectie in één oogopslag uit elkaar te houden, zelfde kaart verder ongemoeid.
   Optioneel te gebruiken, dus geen effect op kaarten zonder deze klasse. */
.card-accent-blue   { border-top: 3px solid #3987e5; }
.card-accent-purple { border-top: 3px solid #7c3aed; }
.card-accent-teal   { border-top: 3px solid #17a398; }
.card-accent-orange { border-top: 3px solid #e5822f; }
.card-accent-pink   { border-top: 3px solid #e5399e; }
.card-accent-amber  { border-top: 3px solid #d1a219; }
.card-accent-green  { border-top: 3px solid #0ca30c; }
.card-accent-discord { border-top: 3px solid #5865f2; }

/* KPI-blokken (admin/users.php, admin/analytics.php) — op verzoek van de
   eigenaar ("mooier met meerdere blokken"): de belangrijkste kerncijfers
   bovenaan een beheerpagina niet als platte tekst of een pil-vormige chip,
   maar als eigen kaartje met kleuraccent + icoon, zodat ze in één oogopslag
   uit elkaar te houden zijn — hergebruikt bewust .card/.card-accent-*
   hieronder (zelfde achtergrond/rand/radius als de rest van het beheerpaneel)
   plus het bolletje-icoon van .stat-icon, i.p.v. een compleet nieuwe stijl. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-block {
  padding: 16px 18px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kpi-block-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-block-icon { width: 34px; height: 34px; }
.kpi-block-icon svg { width: 16px; height: 16px; }
.kpi-block-value {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.kpi-block-label { font-size: 12px; color: var(--text-muted); }
/* Icoonkleur per kaart-accentkleur — zelfde 8 kleurverlopen als .stat-chip
   hierboven, nu gekoppeld aan de .card-accent-* klasse van het blok i.p.v.
   aan de n-de positie in de rij (zo blijft de kleur ook kloppen als een
   optioneel blok, bijv. "meeste bezoekers uit", er wel of niet bij staat). */
.card-accent-blue    .kpi-block-icon { background: linear-gradient(180deg, #6bb3ff, #2f6fd6 55%, #1e4f8f); }
.card-accent-purple  .kpi-block-icon { background: linear-gradient(180deg, #c9a6ff, #7c3aed 55%, #4c1d95); }
.card-accent-teal    .kpi-block-icon { background: linear-gradient(180deg, #7de6e0, #17a398 55%, #0b6158); }
.card-accent-orange  .kpi-block-icon { background: linear-gradient(180deg, #ffbb66, #e5822f 55%, #a85416); }
.card-accent-pink    .kpi-block-icon { background: linear-gradient(180deg, #ff9ecf, #e5399e 55%, #921f66); }
.card-accent-amber   .kpi-block-icon { background: linear-gradient(180deg, #ffe27a, #d1a219 55%, #8a6c11); }
.card-accent-green   .kpi-block-icon { background: linear-gradient(180deg, #7de07d, #2fb02f 55%, #158715); }
.card-accent-discord .kpi-block-icon { background: linear-gradient(180deg, #8b93ff, #5865f2 55%, #333aa8); }

/* Subtiele zebra/hover op tabellen binnen een kaart — maakt rijen iets
   makkelijker te volgen zonder fel te worden ("netter" i.p.v. drukker). */
.card table.plain tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.card table.plain tbody tr:hover { background: rgba(255, 255, 255, 0.05); }

.field { margin-bottom: 14px; }
/* Twee .field's naast elkaar i.p.v. onder elkaar (bijv. verzoek-link +
   telefoonnummer) — flex-basis + wrap zorgt dat ze vanzelf weer onder elkaar
   vallen op een smal scherm, zonder aparte media query nodig te hebben. */
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 220px; min-width: 0; }
.field label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text-primary);
}
.field select { cursor: pointer; }
.field input[type="time"] { color-scheme: dark; font-family: inherit; font-variant-numeric: tabular-nums; }
.field textarea { resize: vertical; font-family: inherit; }
.checkbox-field label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.checkbox-field input { width: auto; }

/* Categorieën: checkbox-grid i.p.v. een <select>, zodat je er tot 3 kunt
   kiezen (zie MAX_CATEGORIES_PER_STREAM). Uitgeschakelde checkboxen (limiet
   bereikt, zie de JS onderaan add_stream.php/edit_stream.php) worden
   visueel gedimd zodat duidelijk is waarom ze niet meer aan te vinken zijn. */
.category-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  background: var(--surface-2);
}
.category-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.category-check input { width: auto; }
.category-check:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

button, .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { opacity: 0.9; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-hairline); }
/* Vrolijker, opvallende variant (i.p.v. de neutrale .btn-secondary) voor de
   "Stemmen, hits & deel-opties"-knop op dashboard.php/manage/edit.php —
   zelfde oranje verloop als .icon-megaphone, zodat het bij het icoon past. */
.btn-megaphone {
  background: linear-gradient(180deg, #ffc57a 0%, #f59e0b 55%, #b06b06 100%);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 8px rgba(0, 0, 0, 0.2);
}
.btn-megaphone:hover { filter: brightness(1.08); opacity: 1; }
.btn-megaphone svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.btn-link { background: none; border: none; color: var(--text-muted); font-size: 12px; padding: 0; cursor: pointer; text-decoration: underline; font-weight: 400; }
.btn-link:hover { color: var(--text-primary); }
.btn-link-danger:hover { color: var(--status-critical); }

.errors { background: rgba(208, 59, 59, 0.15); border: 1px solid rgba(208, 59, 59, 0.4); color: #ff9b9b; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }

/* Waarschuwing/melding in dezelfde stijl als .errors, maar amber i.p.v. rood
   — o.a. voor de "verifieer je e-mailadres"-banner op het dashboard. */
.notice-warning { background: rgba(245, 166, 35, 0.15); border: 1px solid rgba(245, 166, 35, 0.4); color: #f5c877; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notice-warning form { margin: 0; }

/* Meldingen als losse "toast"-kaartjes, bovenaan gecentreerd i.p.v. een vast
   blok bovenaan de pagina — voor foutmeldingen (bv. bij opslaan) én
   bevestigingen (bv. "Opgeslagen!"). Gedeelde implementatie voor het hele
   systeem: zie showToast() in assets/toast.js — niet meer los per pagina. */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: toast-in 0.2s ease-out;
}
.toast.toast-success { border-left-color: var(--status-good); }
.toast.toast-error   { border-left-color: var(--status-critical); }
.toast.toast-out      { animation: toast-out 0.2s ease-in forwards; }
.toast-text { flex: 1; }
.toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.65;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

.stream-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--gridline);
  gap: 16px;
}
.stream-row:last-child { border-bottom: none; }

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.status-dot.online { background: var(--status-good); box-shadow: 0 0 6px rgba(12, 163, 12, 0.6); }
.status-dot.offline { background: var(--status-critical); }

/* Uptime-tijdlijnbalk (stream_detail.php) — één balkje per dag, laatste 30
   dagen, zelfde idee als de uptimebalk van bekende statuspagina's
   (UptimeRobot/Cachet e.d.). Kleur per dag komt van het percentage online-
   metingen die dag; grijs/gestippeld = geen meting die dag. */
.uptime-bar { display: flex; gap: 2px; }
.uptime-seg {
  flex: 1 1 0;
  min-width: 3px;
  height: 28px;
  border-radius: 3px;
  cursor: default;
  transition: transform 0.12s ease;
}
.uptime-seg:hover { transform: scaleY(1.12); }
.uptime-good { background: linear-gradient(180deg, #7de07d 0%, var(--status-good) 100%); }
.uptime-warn { background: linear-gradient(180deg, #ffe27a 0%, var(--status-warning) 100%); }
.uptime-bad  { background: linear-gradient(180deg, #ff9a9a 0%, var(--status-critical) 100%); }
.uptime-none { background: var(--surface-2); border: 1px dashed var(--border-hairline); }

.stream-name a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.stream-name a:hover { color: var(--accent); }
.stream-meta { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.stream-stats { text-align: right; font-size: 13px; color: var(--text-secondary); }
.stream-stats strong { color: var(--text-primary); font-size: 15px; }
.row-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.badge-public { background: rgba(12, 163, 12, 0.18); color: #6fdc6f; }
.badge-private { background: rgba(137, 135, 129, 0.2); color: var(--text-muted); }
.badge-type { background: rgba(57, 135, 229, 0.18); color: #8fbdf2; }
.badge-format { background: var(--surface-2); color: var(--text-secondary); }

/* Verkeersbron-badges (admin/analytics.php) — elke bron een herkenbare
   kleur i.p.v. platte tekst in de tabel. */
.badge-referrer-direct { background: var(--surface-2); color: var(--text-secondary); }
.badge-referrer-search { background: rgba(57, 135, 229, 0.18); color: #8fbdf2; }
.badge-referrer-social { background: rgba(229, 57, 158, 0.18); color: #f28fd0; }
.badge-referrer-site   { background: rgba(23, 163, 152, 0.18); color: #7de6e0; }
.badge-referrer-other  { background: rgba(137, 135, 129, 0.2); color: var(--text-muted); }

.empty-state { text-align: center; padding: 40px 0; color: var(--text-muted); }

table.plain { width: 100%; border-collapse: collapse; }
table.plain th, table.plain td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--gridline); font-size: 13px; }
table.plain th { color: var(--text-muted); font-weight: 500; }

/* Wrapper voor brede tabellen (admin/users.php, stream_detail.php) — bewust
   NIET display:block op de table zelf (dat breekt de kolomlayout en laat
   vrije tekst verticaal wrappen i.p.v. de tabel horizontaal te laten
   scrollen, zoals eerder deze sessie ontdekt op stream_detail.php). Deze div
   laat alleen de OMLIJSTING scrollen, de table erbinnen blijft gewoon een
   table. */
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table.plain { min-width: max-content; }

/* Help-pagina (help.php): FAQ als native <details>/<summary> — geen extra JS
   nodig, alleen een likje verf zodat het bij de rest van de stijl past. */
.card details { border-top: 1px solid var(--gridline); padding-top: 10px; }
.card details:first-of-type { border-top: none; padding-top: 0; }
.card details + details { margin-top: 10px; }
.card details summary { color: var(--text-primary); cursor: pointer; font-weight: 600; }
.card details summary::marker { color: var(--accent); }
.card details[open] summary { margin-bottom: 4px; }

/* Publiek dashboard */
.public-header {
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 42px),
    linear-gradient(120deg, #1a2f52 0%, #14213d 40%, #0a0f1c 100%);
  padding: 28px 20px 24px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
/* De StreamTop-merkbanner als doorlopende paginaachtergrond (zie
   body.page-bg-banner hieronder) i.p.v. los in de header: zo is 'm ook
   zichtbaar achter de kaarten verderop op de pagina, niet alleen in de
   header-strook. De header zelf wordt op zo'n pagina transparant (met
   alleen zijn eigen donkere verloop) zodat dezelfde vaste achtergrond er
   naadloos doorheen loopt — geen aparte/dubbele foto, geen naad. */
body.page-bg-banner .public-header {
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.35) 0%, rgba(8, 12, 22, 0.55) 100%);
  box-shadow: none;
}
body.page-bg-banner .public-header::before,
body.page-bg-banner .public-header::after {
  display: none;
}
.public-header::before,
.public-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.public-header::before {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(57, 135, 229, 0.55), transparent 70%);
  top: -220px; left: 4%;
}
.public-header::after {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.45), transparent 70%);
  top: -190px; right: 8%;
}
.public-header-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #7c3aed, var(--status-good));
}
.public-header-inner {
  position: relative;
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.public-brand { text-decoration: none; }
.public-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  text-decoration: none;
}
/* "Stream van de dag" (public.php) — klikbaar chipje, dus met een eigen
   goudige rand/gloed om 'm als iets bijzonders te laten voelen t.o.v. de
   twee neutrale statistiekjes ernaast. */
.stat-chip-sotd {
  border-color: rgba(229, 195, 57, 0.4);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.stat-chip-sotd:hover { transform: translateY(-1px); border-color: rgba(229, 195, 57, 0.7); }
.stat-icon-sotd { background: linear-gradient(180deg, #ffe27a 0%, #e5c339 55%, #ad8f1f 100%); }
.stat-chip-sotd-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 8px rgba(0, 0, 0, 0.2);
}
.stat-icon::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}
.stat-icon svg { position: relative; z-index: 1; width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.stat-chip:nth-child(1) .stat-icon { background: linear-gradient(180deg, #6bb3ff, #2f6fd6 55%, #1e4f8f); }
.stat-chip:nth-child(2) .stat-icon { background: linear-gradient(180deg, #7de07d, #2fb02f 55%, #158715); }
/* Chip 3 t/m 8: zelfde opzet, elk een eigen kleur — zodat een rij met meer
   dan 2 statistiekjes (bijv. admin/analytics.php) niet grotendeels grijs
   blijft. Werkt overal waar .stat-chip binnen dezelfde ouder staat. */
.stat-chip:nth-child(3) .stat-icon { background: linear-gradient(180deg, #c9a6ff, #7c3aed 55%, #4c1d95); }
.stat-chip:nth-child(4) .stat-icon { background: linear-gradient(180deg, #ffbb66, #e5822f 55%, #a85416); }
.stat-chip:nth-child(5) .stat-icon { background: linear-gradient(180deg, #7de6e0, #17a398 55%, #0b6158); }
.stat-chip:nth-child(6) .stat-icon { background: linear-gradient(180deg, #ff9ecf, #e5399e 55%, #921f66); }
.stat-chip:nth-child(7) .stat-icon { background: linear-gradient(180deg, #ffe27a, #d1a219 55%, #8a6c11); }
.stat-chip:nth-child(8) .stat-icon { background: linear-gradient(180deg, #ff9b8a, #e0503b 55%, #96301f); }
.stat-chip strong { display: block; font-size: 18px; line-height: 1.1; color: #fff; }
.stat-chip span { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Trendpijltje naast een stat-chip-getal (zie admin/analytics.php) — los van
   .stat-chip strong's witte tekstkleur, zodat op/neer/nieuw meteen opvalt. */
.trend-badge { display: inline-block; font-size: 12px; font-weight: 600; vertical-align: middle; margin-left: 2px; }
.trend-up   { color: var(--status-good); }
.trend-down { color: var(--status-critical); }
.trend-flat { color: var(--text-secondary); font-weight: 400; }

/* "Nu online"-paneel (zie admin/analytics.php) — pulserende live-stip en een
   iets prominentere kaartrand, op verzoek van de eigenaar ("groter/
   prominenter"). Kleur komt overeen met .badge-public hierboven. */
.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-good);
  box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.55);
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(12, 163, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); }
}
.live-visitors-card {
  border: 1px solid rgba(12, 163, 12, 0.35);
  background: linear-gradient(180deg, rgba(12, 163, 12, 0.07), transparent 65%);
}
/* Ingelogde bezoekers in "Nu online" — accountnaam als klikbare chip (naar
   admin/user_detail.php), en de hele rij iets opgelicht zodat ze tussen de
   gasten meteen opvallen. */
.live-row-user td { background: rgba(57, 135, 229, 0.07); }
.live-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(57, 135, 229, 0.16);
  border: 1px solid rgba(57, 135, 229, 0.4);
  color: #cfe2fb;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.live-user-chip:hover { background: rgba(57, 135, 229, 0.26); color: #fff; }
.live-user-chip svg { width: 13px; height: 13px; flex: none; }
.live-user-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffd27a;
}
.live-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(57, 135, 229, 0.16);
  color: #cfe2fb;
  border: 1px solid rgba(57, 135, 229, 0.4);
  font-size: 12px;
}
.live-user-badge svg { width: 12px; height: 12px; }

.public-hero {
  max-width: 1220px;
  margin: 0 auto;
  padding: 22px 20px 4px;
  text-align: center;
}
.public-hero h1 {
  font-size: 26px;
  margin: 0 0 6px;
  background: linear-gradient(90deg, #fff, #9fc3ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.public-hero p { margin: 0; font-size: 14px; }

/* 3-koloms feature-strip onder de hero-tekst op public.php — één afgeronde
   kaart, kolommen gescheiden door een dunne lijn, elk klikbaar naar de
   bijbehorende plek (de streamslijst hieronder, registreren, of Topstations). */
.feature-strip {
  display: flex;
  max-width: 900px;
  margin: 18px auto 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}
.feature-strip-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  text-align: left;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.15s ease;
}
.feature-strip-item:last-child { border-right: none; }
.feature-strip-item:hover { background: rgba(255, 255, 255, 0.05); }
.feature-strip-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -8px 10px rgba(0, 0, 0, 0.2);
}
.feature-strip-icon::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.feature-strip-icon svg { position: relative; z-index: 1; width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.feature-strip-icon-blue   { background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%); }
.feature-strip-icon-orange { background: linear-gradient(180deg, #ffd873 0%, #f5a623 55%, #c9790e 100%); }
.feature-strip-icon-gold   { background: linear-gradient(180deg, #ffe27a 0%, #e5c339 55%, #ad8f1f 100%); }
.feature-strip-icon-purple { background: linear-gradient(180deg, #c7a4ff 0%, #8b5cf6 55%, #5b35b5 100%); }
.feature-strip { max-width: 1060px; }
.feature-strip-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.feature-strip-title { font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap; }
.feature-strip-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) {
  .feature-strip { flex-direction: column; }
  .feature-strip-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .feature-strip-item:last-child { border-bottom: none; }

  /* login.php/register.php/forgot_password.php/reset_password.php/
     2fa_verify.php/verify_email.php delen deze kaart — op een telefoon mag
     de ruime desktop-padding wat minder zijn, en hoeft de kaart niet zo ver
     van de bovenkant te beginnen. */
  .auth-card { margin: 24px auto; padding: 24px; }

  /* Header (logo + statistiekjes + login/registreren) én footer staan op
     desktop bewust vastgeplakt (position:sticky) — daar is genoeg
     schermhoogte over. Op een telefoon wrapt de header-inhoud al snel naar
     2-3 regels, en samen met de vastgeplakte footer bleef er dan nauwelijks
     nog ruimte over voor de streamkaarten zelf. Op smalle schermen laten we
     ze daarom gewoon normaal meescrollen i.p.v. permanent op het scherm te
     blijven staan — de footer blijft via de flex-opmaak hierboven wel
     onderaan de pagina staan zodra de inhoud korter is dan het scherm. */
  .public-header { position: static; padding: 18px 16px 16px; }
  .site-footer { position: static; }

  /* Het beheerpaneel (adminNavHtml() in includes/functions.php) heeft tot 11
     navigatieknoppen in dezelfde .header-auth als de gewone paginaheaders
     (die er maar 2-4 hebben) — die knoppen wrappen dankzij flex-wrap
     hierboven nu netjes naar meerdere regels, maar op telefoonbreedte is de
     desktop-maat (9px/18px padding, 13px tekst) dan nog steeds onnodig groot
     voor zoveel knoppen tegelijk. Hier alleen verkleind, niet op de gewone
     headers (die blijven met 2-4 knoppen prima leesbaar op hun normale
     grootte). */
  .app-header .header-auth { justify-content: center; gap: 6px; }
  .app-header .nav-btn { padding: 6px 11px; font-size: 11.5px; }

  /* KPI-blokken (zie .kpi-grid/.kpi-block hierboven) — iets kleinere
     minimumbreedte/afstand/tekst zodat er op een telefoon nog 2 per rij
     passen i.p.v. steeds maar 1 breed blok. */
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
  .kpi-block { padding: 12px 14px; gap: 6px; }
  .kpi-block-value { font-size: 20px; }
}

.container:has(.public-grid) { max-width: 1220px; }

/* Bredere container speciaal voor admin/users.php (body.page-users) — met
   zoveel kolommen (Gebruiker/Woonplaats/Streams/Publiek limiet/Mail/
   Beveiliging/Rol/Laatste login/Geregistreerd/Opties) paste de tabel op de
   standaard .container-breedte (960px) bijna nooit zonder horizontale
   scrollbar. Samen met het verplaatsen van de losse rij-acties naar de
   "Opties"-modal (zie .modal-overlay#user-options-overlay in
   admin/users.php) scheelt dit genoeg om 'm op een gewoon/breed scherm
   zonder scrollbar te laten passen. Alleen op deze pagina, niet globaal op
   .container, want andere pagina's (auth, dashboard, ...) zijn bewust smal
   gehouden voor de leesbaarheid. */
.page-users .container { max-width: 1300px; }

/* Bredere Opties-modal, alleen op admin/users.php — sinds de modal ook een
   streams-lijst (naam + status-badge + URL-veld + Test/Opslaan-knoppen) laat
   zien is de standaard .modal-card-form-breedte (560px) te smal geworden om
   dat zonder gedrang te tonen. */
.page-users #user-options-overlay .modal-card { max-width: 720px; }

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: 56px;
  /* Compact: dit is nu een permanent zichtbare, vastgeplakte balk (zie
     position:sticky hierboven) i.p.v. alleen een stuk onderaan de pagina,
     dus mag 'm niet te veel schermruimte blijven innemen. */
  padding: 8px 20px;
  border-top: 1px solid var(--border-hairline);
  background: var(--page-plane);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.site-footer-inner {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
}
.site-footer-inner .public-brand { display: flex; align-items: center; }
.site-footer-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.site-footer-copy { margin: 0; }
.site-footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 12px; }
.site-footer-links a:hover { color: var(--text-primary); }
.site-footer-copy { font-size: 12px; color: var(--text-muted); margin: 0; }
/* Promotekst vóór de "Stream aanvragen"-modaltrigger (zie
   streamRequestModalHtml() in includes/functions.php) — staat als laatste
   item in de flex-rij .site-footer-links; flex-basis:100% duwt 'm naar een
   eigen volledige regel ónder de gewone navigatielinks i.p.v. ertussen. */
.footer-stream-promo {
  flex-basis: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.footer-stream-promo a { color: var(--text-secondary); text-decoration: underline; font-size: 12px; }
.footer-stream-promo a:hover { color: var(--text-primary); }
.public-filterbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.public-search,
.public-category-filter {
  padding: 9px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 14px;
}
.public-search { flex: 1 1 220px; min-width: 0; }
.public-category-filter { flex: 0 1 200px; cursor: pointer; }

.public-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
  /* CSS Grid rekt items standaard al uit tot de hoogte van hun rij (initial
     align-items:normal gedraagt zich als stretch binnen een grid) — hier
     expliciet gezet zodat kaarten met minder badges/knoppen (bijv. geen
     stemknop, of maar 1 categorie i.p.v. 3) toch even hoog blijven als hun
     buren in dezelfde rij, ongeacht hoeveel content ze hebben. */
  align-items: stretch;
}
@media (min-width: 620px) {
  .public-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .public-grid { grid-template-columns: repeat(4, 1fr); }
}
.public-card {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  /* flex-column + margin-top:auto op .icon-row hieronder duwt de knoppenrij
     (en het telefoonnummer eronder) altijd naar de onderkant van de kaart —
     zonder dit zou een kaart met bijv. 3 categorie-badges (2 regels) de
     knoppen lager laten staan dan een buurkaart met maar 1 badge (1 regel),
     ook al zijn de kaarten zelf (dankzij align-items:stretch hierboven) even
     hoog. Zo staan de knoppenrijen altijd op gelijke hoogte, ongeacht hoeveel
     badges/stats een station heeft.  */
  display: flex;
  flex-direction: column;
  /* Bewust GEEN overflow:hidden meer: dat clipte het downloadmenu (.dl-menu-popup)
     halverwege af zodra het uit de kaart uitstak. De bovenbalk hieronder krijgt
     in plaats daarvan zelf afgeronde bovenhoeken, zodat die nog steeds netjes
     binnen de kaartrand blijft ondanks overflow:visible.
     Belangrijke bijwerking daarvan: overflow:hidden zorgde er in een CSS-grid
     óók (impliciet) voor dat een kaart mocht krimpen onder de breedte van zijn
     langste stukje tekst (de "nu speelt"-titel, die met white-space:nowrap
     nooit zelf afbreekt). Zonder overflow:hidden pakt de browser weer de
     content-breedte als minimum, waardoor kolommen ongelijk breed worden
     zodra een titel lang is — én de marquee-animatie niet meer aanslaat
     omdat de kaart dan toch "breed genoeg" lijkt. min-width:0 hieronder
     herstelt het krimpgedrag zonder dat overflow:hidden nodig is. */
  min-width: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.public-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--gridline);
}
.public-card.is-online::before { background: linear-gradient(90deg, var(--status-good), var(--accent)); }
.public-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.18); }

.pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pc-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
/* Het logo/fallback-icoon + glansoverlay zitten in een eigen binnenste
   cirkel (.pc-avatar-inner) die zelf overflow:hidden gebruikt om zich
   rond te knippen. Dat is bewust een APARTE laag van .pc-avatar zelf
   (die geen overflow:hidden meer heeft): zo kan het "nu speelt"-badge
   hieronder (.pc-avatar-cover) er gewoon overheen/buiten de rand steken
   zonder zelf ook afgesneden te worden door diezelfde cirkelclip. */
.pc-avatar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 3px rgba(57, 135, 229, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2);
}
.pc-avatar-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.pc-avatar-inner svg { position: relative; z-index: 1; width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.pc-avatar-inner img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pc-avatar-lg { width: 56px; height: 56px; }
.pc-avatar-lg svg { width: 25px; height: 25px; }
.pc-avatar-xl { width: 64px; height: 64px; }
.pc-avatar-xl svg { width: 28px; height: 28px; }
/* Albumhoesje van het huidige nummer. Heeft het station een eigen logo (een
   echte <img> i.p.v. het ICON_HEADPHONES-fallback-icoon), dan mag dat logo
   herkenbaar blijven: het albumhoesje wordt dan een los "nu speelt"-badge
   rechtsboven in de hoek (tegenover de live-stip rechtsonder, dus geen
   overlap) i.p.v. het logo helemaal te bedekken. Zit als sibling van
   .pc-avatar-inner, dus buiten diens cirkelclip — vandaar dat 'ie gewoon
   over de rand mag steken. Hover vergroot 'm even, zodat je de hoes goed
   kunt bekijken zonder dat 'ie de kaart permanent groter maakt. Heeft een
   station GEEN eigen logo (alleen het fallback-icoon), dan is er niets te
   beschermen — dan vult het albumhoesje gewoon de hele cirkel, zoals
   voorheen (zie de :has()-override hieronder). */
.pc-avatar-cover {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 62%;
  height: 62%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
  border: 2px solid var(--surface-1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pc-avatar:hover .pc-avatar-cover {
  transform: scale(1.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  z-index: 4;
}
.pc-avatar:has(.pc-avatar-inner svg) .pc-avatar-cover {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
}
.pc-avatar:has(.pc-avatar-inner svg):hover .pc-avatar-cover {
  transform: none;
  box-shadow: none;
}
.pc-live-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--status-good);
  border: 2px solid var(--surface-1);
  animation: live-pulse 2s infinite;
  z-index: 3;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(12, 163, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); }
}
.pc-headinfo { flex: 1; min-width: 0; }
.public-card-name { color: var(--text-primary); text-decoration: none; font-weight: 700; font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-card-name:hover { color: var(--accent); }
/* Trofee-icoon bij de #1 van de ranglijst (zie ICON_TROPHY/public.php) —
   zonder deze regel zou de inline SVG (geen expliciete width/height, alleen
   een viewBox) op de browserstandaard van 300x150px renderen. */
.public-card-name svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; color: #e5c339; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
/* Zelfde trofee-icoon, hier gebruikt in de "populairste stream"-regel op admin.php. */
.top-stream-trophy svg { width: 16px; height: 16px; vertical-align: -3px; color: #e5c339; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  margin-top: 3px;
  border: 1px solid transparent;
}
.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-pill.online {
  background: rgba(12, 163, 12, 0.15);
  color: #6fdc6f;
  border-color: rgba(12, 163, 12, 0.35);
}
.status-pill.online::before { background: var(--status-good); animation: live-pulse 2s infinite; }
.status-pill.offline {
  background: rgba(137, 135, 129, 0.12);
  color: var(--text-muted);
  border-color: var(--border-hairline);
}
.status-pill.offline::before { background: var(--text-muted); }
.pc-listeners {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  padding: 5px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.pc-listeners svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.public-card-badges { margin-bottom: 8px; }
.public-card-badges .badge { margin-left: 0; margin-right: 6px; }
.public-card-nowplaying { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; min-height: 16px; }
.public-card-art { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; }
.public-card-title {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.marquee-wrap { overflow: hidden; white-space: nowrap; position: relative; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track.animate { animation-name: marquee-scroll; animation-timing-function: linear; animation-iteration-count: infinite; }
.marquee-item { padding-right: 40px; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.icon-row { display: flex; gap: 9px; margin-top: 4px; flex-wrap: wrap; }
.icon-btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.icon-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.icon-btn svg { position: relative; z-index: 1; width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
/* Een geüpload icoon vult de HELE knop (absolute, inset:0, border-radius
   overgenomen van de knop) i.p.v. een klein plaatje middenin — daardoor is
   de gekleurde gradient-achtergrond van de knop volledig aan het zicht
   onttrokken en is, zoals gewenst, alleen nog het eigen icoon zichtbaar. */
.icon-btn img.icon-btn-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.icon-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.icon-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-play { background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%); }
.icon-play.is-playing { background: linear-gradient(180deg, #6fe06f 0%, #1f9e1f 55%, #0b6e0b 100%); }
.icon-download { background: linear-gradient(180deg, #ffd873 0%, #f5a623 55%, #c9790e 100%); }
.icon-request { background: linear-gradient(180deg, #c3aefb 0%, #8b5cf6 55%, #6231c9 100%); }
.icon-phone { background: linear-gradient(180deg, #7de07d 0%, #2fb02f 55%, #158715 100%); }
.icon-whatsapp { background: linear-gradient(180deg, #6fe08a 0%, #25d366 55%, #0f7d38 100%); }
.icon-vote { background: linear-gradient(180deg, #ffe27a 0%, #ffc738 55%, #d69a06 100%); }
.icon-edit { background: linear-gradient(180deg, #8fd9ff 0%, #2f9fd6 55%, #1e6f8f 100%); }
.icon-toggle { background: linear-gradient(180deg, #c3aefb 0%, #8b5cf6 55%, #6231c9 100%); }
.icon-trash { background: linear-gradient(180deg, #ff9a9a 0%, #d6432f 55%, #8f1e1e 100%); }
.icon-refresh { background: linear-gradient(180deg, #7de07d 0%, #2fb02f 55%, #158715 100%); }
.icon-stats { background: linear-gradient(180deg, #7de0d9 0%, #2fb0a4 55%, #157a72 100%); }
.icon-vote-green { background: linear-gradient(180deg, #8fe89a 0%, #2fb050 55%, #157a30 100%); }
.icon-hits-out { background: linear-gradient(180deg, #ffb37a 0%, #f5822f 55%, #c9540e 100%); }
.icon-shield { background: linear-gradient(180deg, #a5b4fc 0%, #6366f1 55%, #4338ca 100%); }
.icon-megaphone { background: linear-gradient(180deg, #ffc57a 0%, #f59e0b 55%, #b06b06 100%); }
/* Volg-knop (bel-icoon) op public.php/public_stream.php — staat nu compact
   naast de stemknop i.p.v. in een eigen volle knoppenrij. Zelfde "actief =
   groen"-taal als .icon-play.is-playing zodra je een station daadwerkelijk
   volgt. */
.icon-follow { background: linear-gradient(180deg, #c3aefb 0%, #8b5cf6 55%, #6231c9 100%); }
.icon-follow.is-following { background: linear-gradient(180deg, #6fe06f 0%, #1f9e1f 55%, #0b6e0b 100%); }

/* Kleinere, niet-klikbare variant van .icon-btn voor icoonverwijzingen MIDDEN
   in lopende tekst (bijv. help.php) — dezelfde gekleurde badge-stijl als de
   normale 32px-knoppen, maar kleiner en op de tekstregel uitgelijnd i.p.v. als
   losse knop. Specificiteit .icon-btn.icon-chip (i.p.v. alleen .icon-chip) zorgt
   dat deze altijd wint van de basis .icon-btn-afmetingen, ongeacht bronvolgorde. */
.icon-btn.icon-chip {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  vertical-align: -6px;
  margin: 0 1px;
  cursor: default;
}
.icon-btn.icon-chip svg { width: 12px; height: 12px; }
.icon-btn.icon-chip:hover { transform: none; filter: none; }

/* Gekleurde badge vóór een <h2>, gebruikt op de Help-pagina zodat de anders
   tekstzware secties ook wat kleur en visuele herkenning krijgen. */
.help-h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.help-h2 .icon-btn { flex-shrink: 0; cursor: default; }
.help-h2 .icon-btn:hover { transform: none; filter: none; }

/* Eigen tooltips i.p.v. het trage/lelijke systeem-tooltipje van title="".
   Gebruik: data-tooltip="..." op het element zelf (badges, statustekst, ...),
   of — voor een .icon-btn/.nav-btn, die allebei al hun EIGEN ::after
   gebruiken voor het glansje én overflow:hidden hebben (dat zou de tooltip
   afsnijden) — op een omringende <span class="tooltip-wrap" data-tooltip="...">.
   Zet bij icoon-only knoppen/links altijd ook aria-label="..." op het element
   zelf; data-tooltip is puur visueel en wordt door screenreaders genegeerd.
   Puur CSS, geen JS nodig: de transition-delay hieronder (0.1s) is nog altijd
   een fractie van de ~1 seconde die browsers standaard voor title="" aanhouden.
   data-tooltip-pos="bottom" laat 'm onder het element openen i.p.v. erboven —
   voor elementen vlak boven in de pagina (bijv. de header), waar "erboven"
   van het scherm af zou vallen. */
.tooltip-wrap { position: relative; display: inline-flex; }
[data-tooltip]::after,
[data-tooltip]::before {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 60;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  width: max-content;
  max-width: 220px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--surface-2);
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after, [data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.1s;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 9px); }
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--surface-2);
}

/* Downloadknop met keuzemenu (.m3u / .pls) i.p.v. twee identieke icoontjes.
   Opent naar boven, gecentreerd op de knop — .public-card heeft bewust geen
   overflow:hidden (meer), dus dit menu wordt nooit meer halverwege afgesneden
   ongeacht waar de downloadknop in de icoonrij staat. */
.dl-menu { position: relative; }
.dl-menu-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dl-menu-popup a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}
.dl-menu-popup a:hover { background: rgba(255, 255, 255, 0.08); }
.dl-menu-popup a span { font-size: 11px; font-weight: 400; color: var(--text-muted); }
/* min-height houdt deze regel altijd even hoog, ook als 'ie leeg is (zie
   public.php: bewust altijd gerenderd, nooit weggelaten) — anders zou een
   kaart zonder telefoonnummer een fractie lager/hoger uitkomen dan een
   buurkaart mét, wat de van-onderen-uitgelijnde knoppenrij erboven weer
   scheeftrekt. */
.phone-line { font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 15px; }

/* Stemknop-widget */
.vote-widget { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; position: relative; }
/* Binnen een .public-card (flex-column, zie hierboven) duwt dit de stemknop
   + knoppenrij + telefoonnummer altijd als groep naar de onderkant van de
   kaart, zodat ze bij elke kaart in een rij op dezelfde hoogte staan — de
   eventuele "extra ruimte" komt dan boven deze groep te staan (na de
   badges/stats), in plaats van dat de knoppen zelf verspringen. */
.public-card .vote-widget { margin-top: auto; padding-top: 10px; }
.vote-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* Was geel/goud, maar dat las onduidelijk (leek meer op een waarschuwing
     dan een uitnodigende stemknop, en viel niet als "actie" te herkennen
     naast de blauwe afspeelknop). Nu dezelfde blauwe merkkleur als de
     primaire knoppen elders (bijv. .nav-btn-primary): duidelijk twee
     statussen — blauw = "stem nu", groen (.has-voted hieronder) = "gestemd". */
  background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.vote-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.vote-btn svg { width: 14px; height: 14px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.vote-btn span { position: relative; z-index: 1; }
.vote-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.vote-btn:disabled { opacity: 0.6; cursor: default; }
.vote-btn.has-voted { background: linear-gradient(180deg, #7de07d 0%, #2fb02f 55%, #158715 100%); }
.vote-count { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.vote-msg {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.vote-msg.show { opacity: 1; }

/* Generiek modern dialoogvenster (bijv. "bedankt voor je stem" op public.php,
   en de stem-bevestiging op vote_in.php) — één overlay + kaart, herbruikbaar
   voor elke korte bevestigingsmelding. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 500;
}
.modal-card {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 28px 26px 22px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
/* Bredere, links uitgelijnde variant van .modal-card voor een modal met een
   formulier erin (bijv. de "Stream aanvragen"-modal, zie
   streamRequestModalHtml() in includes/functions.php) i.p.v. de smalle,
   gecentreerde bevestigingsdialoog (.modal-card zonder deze modifier). */
.modal-card-form { max-width: 560px; text-align: left; }
.modal-card-form .modal-title { text-align: left; }
.modal-card-form .modal-text { text-align: left; }
/* De confirmatie-modal (.modal-card zonder deze modifier) is altijd kort
   genoeg om verticaal gecentreerd te passen, maar een formuliermodal (bv.
   "Stream aanvragen") kan op een laag scherm (mobiel, of een kort browser-
   venster) hoger worden dan de viewport — zonder aparte regel hiervoor zou
   .modal-overlay's align-items:center 'm dan symmetrisch boven ÉN onder de
   viewport laten uitsteken zonder dat je naar het afgesneden bovenstuk kunt
   scrollen (een gecentreerde flex-child kan niet naar zijn eigen top
   scrollen). Dus alleen voor een overlay met een formuliermodal erin: boven
   uitlijnen + de overlay zelf laten scrollen i.p.v. centreren. */
.modal-overlay:has(.modal-card-form) {
  align-items: flex-start;
  overflow-y: auto;
  padding-block: 40px;
}
/* (Root oorzaak gevonden van een eerdere header-boven-modal-bug: de
   "Stream aanvragen"-modal zat in de HTML genest in .site-footer, en die
   footer heeft zelf position:sticky + z-index:30 — dat maakt .site-footer
   een eigen stacking context, waardoor de geneste modal (position:fixed;
   z-index:500) alleen met díe 30 meetelt in de paginabrede stapeling, ver
   onder de header (z-index:40). Geen CSS-regel lost dat structureel op
   zolang de modal daar genest blijft — daarom wordt 'ie nu met Alpine's
   x-teleport="body" (zie streamRequestModal(), includes/functions.php)
   simpelweg buiten de footer geplaatst, direct als kind van <body>, zodat
   'ie gewoon in de root-stapeling meedoet. Zie git-geschiedenis voor de
   eerder geprobeerde (en ontoereikende) position:static-workaround.) */
/* Kleine ronde laadspinner — gebruikt in de "we controleren je stream-URL"-
   modal bij Stream toevoegen/bewerken (zie manage/add.php, manage/edit.php),
   binnenin dezelfde generieke .modal-overlay/.modal-card hierboven. */
.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

.modal-icon {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -8px 10px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.modal-icon::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.modal-icon svg { position: relative; z-index: 1; width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.modal-icon-good { background: linear-gradient(180deg, #7de07d 0%, #2fb02f 55%, #158715 100%); }
.modal-icon-warn { background: linear-gradient(180deg, #ffe27a 0%, var(--status-warning) 55%, #ad8f1f 100%); }
.modal-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: #fff; }
.modal-text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 20px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Admin-dashboard (ingelogd) — herbruikt .public-header/.public-card in compactere vorm */
.app-header { padding: 18px 20px 16px; }
.app-header .header-auth { gap: 8px; }
.admin-intro { max-width: 1220px; margin: 0 auto; padding: 24px 20px 0; }
.admin-card-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; align-items: center; }
.admin-card-stats strong { color: #fff; font-size: 14px; }
.admin-card-stats svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 1px; color: var(--text-muted); }
/* "in" en "uit" horen bij elkaar: als groep laten wrappen i.p.v. los, zodat
   ze nooit los van elkaar op een eigen regel terechtkomen (zie public.php). */
.stat-inout-group { display: inline-flex; gap: 12px; flex-wrap: nowrap; white-space: nowrap; }
.admin-card-link { display: block; font-size: 11px; margin-bottom: 10px; text-decoration: none; }
.admin-card-link:hover { color: var(--text-primary); }

/* Compacte cijfer-grid i.p.v. losse tekstregels (dashboard.php streamkaarten). */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin-bottom: 8px; }
.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 7px 4px 6px;
}
.stat-cell svg { width: 13px; height: 13px; color: var(--text-muted); margin: 0; }
.stat-cell strong { display: block; font-size: 15px; line-height: 1.15; color: #fff; }
.stat-cell span { font-size: 10px; line-height: 1.2; color: var(--text-muted); white-space: nowrap; }
.stat-grid-caption { font-size: 11px; margin: -2px 0 10px; }
/* margin-top:auto (i.p.v. een vaste waarde) duwt de knoppenrij altijd naar de
   onderkant van de kaart — zelfde truc als .public-card .vote-widget hierboven.
   Zonder dit stond de knoppenrij op een kaart met extra statregels (bijv. de
   "beluisterd (24u)"-regel) lager dan op een buurkaart met minder stats, ook al
   zijn de kaarten zelf (dankzij .public-grid's align-items:stretch) even hoog. */
.admin-actions { margin-top: auto; padding-top: 10px; }

/* Zwevende "nu speelt"-kaart, rechtsboven, zoals een FM-ontvangst-widget */
.now-playing-card {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: linear-gradient(160deg, #1c3a63, #0f1f38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  z-index: 200;
}
.np-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8fbdf2;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.np-body { display: flex; align-items: center; gap: 10px; }
.np-art {
  position: relative;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-art .np-art-icon { color: #8fbdf2; width: 22px; height: 22px; }
.np-art .np-art-icon svg { width: 100%; height: 100%; }
/* Draaiend rondje over de hoes/het logo zolang de stream laadt (zie
   $store.player.loading in public.php). */
.np-art-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 18, 34, 0.55);
}
.np-art-spinner .btn-spinner { width: 22px; height: 22px; border-width: 3px; }
.np-status.is-loading { color: #8fbdf2; }
.np-text { min-width: 0; flex: 1; }
.np-name { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-track { font-size: 13px; color: #b9d2f0; margin-top: 2px; min-height: 17px; }
.np-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.np-status { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.np-status.is-live { color: #7be27b; }
.np-stop {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  /* Zelfde reden als bij .np-popout hieronder: zonder overflow:hidden kan de
     rechthoekige tap-highlight buiten deze pilvorm uitsteken op mobiel. */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.np-stop:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.np-stop:active { background: rgba(255, 255, 255, 0.12); }
/* Losse "open in eigen venster"-knop op de zwevende "nu speelt"-kaart — bewust
   subtieler dan de blauwe hp-toggle (play/pauze) en de Stop-knop, dit is een
   secundaire actie. */
.np-popout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  /* Zonder overflow:hidden negeert de browser de border-radius bij het
     tekenen van de standaard tap-highlight (mobiel/touch) — die highlight is
     altijd een rechthoek, dus die stak buiten de cirkel uit en zag er zo uit
     als een "blauw vierkant" op deze knop i.p.v. een subtiel grijs randje
     (bug gemeld door gebruiker). .icon-btn (play/download/aanvraag-knoppen)
     had dit al en toonde het probleem daarom niet. -webkit-tap-highlight-
     color:transparent zet 'm helemaal uit; de :active-regel hieronder geeft
     in plaats daarvan een eigen, subtiele druk-feedback terug. */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.np-popout:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.np-popout:active { background: rgba(255, 255, 255, 0.12); }
.np-popout svg { width: 13px; height: 13px; }
.now-playing-card audio { width: 100%; margin-top: 12px; border-radius: 8px; }

/* Klein laad-rondje — op de play-knoppen (.icon-play op public.php/
   public_stream.php/widget_stream.php), de play/pauze-knop in de zwevende
   speler en over de hoes daar. Op een .icon-btn staat 'ie standaard
   verborgen en verschijnt 'ie (i.p.v. het play/pauze-icoon) zodra de knop
   .is-loading krijgt; elders regelt x-show de zichtbaarheid. Hergebruikt
   de bestaande spinner-rotate-keyframes van .spinner. */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinner-rotate 0.7s linear infinite;
  position: relative;
  z-index: 1;
  flex: none;
}
.icon-btn > .btn-spinner { display: none; }
.icon-btn.is-loading > .btn-spinner { display: block; }
.icon-btn.is-loading > :not(.btn-spinner) { display: none !important; }
.icon-btn.is-loading { cursor: progress; }
.hp-toggle { display: inline-flex; align-items: center; justify-content: center; }
.hp-toggle .btn-spinner { width: 14px; height: 14px; }

/* Nette 404-pagina (zie renderNotFoundPage() in includes/functions.php) —
   voor stations die niet (meer) bestaan en voor elke onbekende URL. */
.notfound-card {
  width: min(94vw, 760px);
  margin: 56px auto;
  padding: 44px 40px 36px;
  text-align: center;
  background: linear-gradient(180deg, rgba(57, 135, 229, 0.10), transparent 55%), var(--surface-1);
}
.notfound-visual {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notfound-icon {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(47, 111, 214, 0.35);
  filter: grayscale(0.35);
}
.notfound-icon svg { width: 34px; height: 34px; }
/* "Zoekend signaal": ringen die vanuit het icoon uitdijen en wegvagen. */
.notfound-wave {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 2px solid rgba(143, 189, 242, 0.45);
  animation: notfound-wave 2.6s ease-out infinite;
}
.notfound-wave-2 { animation-delay: 0.85s; }
.notfound-wave-3 { animation-delay: 1.7s; }
@keyframes notfound-wave {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .notfound-wave { animation: none; opacity: 0.25; }
}
.notfound-code {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fbdf2;
}
.notfound-title { font-size: 28px; font-weight: 800; margin: 0 0 10px; text-wrap: balance; }
.notfound-text { max-width: 480px; margin: 0 auto 24px; color: var(--text-secondary); font-size: 15px; }
.notfound-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.notfound-actions .btn { padding: 11px 20px; }
.notfound-suggest {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-hairline);
  text-align: left;
}
.notfound-suggest h2 { font-size: 15px; margin: 0 0 14px; color: var(--text-secondary); }
.notfound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.notfound-station {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
  min-width: 0;
}
.notfound-station:hover { border-color: rgba(143, 189, 242, 0.5); transform: translateY(-1px); }
.notfound-station-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: #8fbdf2;
}
.notfound-station-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notfound-station-avatar svg { width: 20px; height: 20px; }
.notfound-station-info { min-width: 0; display: flex; flex-direction: column; }
.notfound-station-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notfound-station-live { font-size: 12px; color: #7be27b; display: flex; align-items: center; gap: 6px; }
.notfound-station-live .live-dot { width: 7px; height: 7px; }
.notfound-station-off { font-size: 12px; color: var(--text-muted); }
@media (max-width: 620px) {
  .notfound-card { margin: 28px auto; padding: 32px 20px 26px; }
  .notfound-title { font-size: 23px; }
}

/* Cookiemelding (cookieNoticeHtml(), includes/functions.php) op de publieke,
   niet-ingelogde pagina's — bewust linksonder i.p.v. gecentreerd/rechts, zodat
   'ie niet over de rechtsonder "nu speelt"-kaart (.now-playing-card hierboven)
   heen valt op public.php/public_stream.php. */
.cookie-notice {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 480;
  max-width: 380px;
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.cookie-notice.is-visible { display: block; }
.cookie-notice p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.cookie-notice a { color: var(--accent); }
.cookie-notice-actions { display: flex; justify-content: flex-end; }
@media (max-width: 620px) {
  .cookie-notice { left: 10px; right: 10px; max-width: none; bottom: 10px; }
}

/* Header-speler met animatie (EQ-balkjes), altijd zichtbaar zodra iets speelt */
.header-player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
}
.hp-toggle {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 8px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hp-toggle::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hp-info { display: flex; flex-direction: column; line-height: 1.2; }
.hp-name { font-weight: 700; font-size: 13px; color: var(--text-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hp-format { margin: 0 0 2px; align-self: flex-start; }

.eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  padding: 2px 3px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.eq span {
  display: block;
  width: 3px;
  background: linear-gradient(0deg, #37e37a 0%, #37e37a 55%, #ffd24d 78%, #ff5050 100%);
  border-radius: 1px;
  height: 4px;
  animation: eq-bounce 1s ease-in-out infinite;
  animation-play-state: paused;
}
.eq.playing span { animation-play-state: running; }
.eq span:nth-child(1) { animation-delay: 0s; }
.eq span:nth-child(2) { animation-delay: 0.15s; }
.eq span:nth-child(3) { animation-delay: 0.3s; }
.eq span:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

/* Topstations-ranglijst (top.php). */

/* .public-hero h1 gebruikt background-clip:text + color:transparent voor het
   verlooptitel-effect — een SVG met fill="currentColor" zou daardoor onzichtbaar
   worden, dus krijgt het icoon hier een eigen, ondoorzichtige kleur terug. */
.hero-icon {
  display: inline-flex;
  vertical-align: -4px;
  color: #e5c339;
}
.hero-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.leaderboard-row:hover { background: var(--surface-2); }
.leaderboard-row + .leaderboard-row { border-top: 1px solid var(--border-hairline); }

.leaderboard-rank {
  flex: 0 0 30px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
}

/* Zelfde ronde-badge-opbouw (gradient + glansoverlay) als .icon-btn/.pc-avatar,
   maar met een medaillekleur per positie i.p.v. een functietype. */
.medal {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 8px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.35);
}
.medal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.medal svg { position: relative; z-index: 1; width: 15px; height: 15px; color: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.medal-gold   { background: linear-gradient(180deg, #ffe27a 0%, #e5c339 55%, #ad8f1f 100%); }
.medal-silver { background: linear-gradient(180deg, #f1f3f5 0%, #b9c2cc 55%, #85909c 100%); }
.medal-bronze { background: linear-gradient(180deg, #e3a26b 0%, #c47a3f 55%, #8f5726 100%); }

.pc-avatar.pc-avatar { flex: 0 0 auto; }

.leaderboard-info { flex: 1; min-width: 0; }
.leaderboard-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-name .status-pill { margin-top: 0; }
.leaderboard-meta { margin-top: 4px; }
.leaderboard-meta .badge { margin-left: 0; margin-right: 6px; }

.leaderboard-stats {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.leaderboard-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: default;
}
.leaderboard-stat strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 560px) {
  .leaderboard-stats { display: none; }
}

/* Statistieken (admin/analytics.php, body.page-analytics) op een telefoon —
   bewust gescoped op deze pagina i.p.v. globaal op .container/.card, zodat
   andere schermen die dit stylesheet delen ongemoeid blijven. Zorgt voor:
   soepel vegen door brede tabellen op iOS, iets minder opvulling zodat er
   meer breedte overblijft voor tabellen/grafieken, en compactere KPI-blokken
   zodat er niet meteen maar 1 per regel past. */
.page-analytics .table-scroll { -webkit-overflow-scrolling: touch; }

@media (max-width: 480px) {
  .page-analytics .container { padding: 24px 12px 48px; }
  .page-analytics .card { padding: 14px; }
  .page-analytics .admin-card-grid { gap: 14px; }
  .page-analytics .admin-intro { padding: 20px 14px 0; }
  .page-analytics .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .page-analytics .kpi-block { padding: 10px 12px; gap: 6px; }
  .page-analytics .kpi-block-icon { width: 26px; height: 26px; }
  .page-analytics .kpi-block-icon svg { width: 12px; height: 12px; }
  .page-analytics .kpi-block-value { font-size: 17px; }
  .page-analytics .live-visitors-card h2 { font-size: 15px; }
  /* Titel + teller mogen op een telefoon vóór het "ververst automatisch"-
     tekstje blijven staan; de datum-/periodeknoppen bovenaan de pagina
     worden op deze breedte anders al snel te dicht op elkaar. */
  .page-analytics .admin-intro > div { gap: 6px; }
  .page-analytics .admin-intro .btn-secondary { padding: 6px 11px; font-size: 13px; }
}

/* Donkere variant van het laad-rondje (op lichte/neutrale ondergrond, bv.
   in badges en muted tekst). */
.btn-spinner-dark { width: 12px; height: 12px; border-color: rgba(143, 189, 242, 0.25); border-top-color: #8fbdf2; vertical-align: -2px; }

/* "Werkt je stream niet? Zoek automatisch een werkende URL" onder het
   stream-URL-veld (manage/add.php, manage/edit.php) — zie
   streamUrlSuggestionsHtml() in includes/stream_suggest.php. */
.url-suggest { margin-top: 8px; }
.url-suggest .url-suggest-find { font-size: 12px; }
.url-suggest-results:empty { display: none; }
.url-suggest-results {
  margin-bottom: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(12, 163, 12, 0.07);
  border: 1px solid rgba(12, 163, 12, 0.35);
}
.url-suggest-title { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
.url-suggest-title.url-suggest-bad { color: #f5c877; margin: 0; }
.url-suggest-results:has(.url-suggest-bad) { background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.35); }
.url-suggest ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.url-suggest li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.url-suggest li code { color: #7be27b; word-break: break-all; }
.url-suggest li .muted { font-size: 11px; }
.url-suggest li button { padding: 4px 10px; font-size: 12px; margin-left: auto; }

/* Streamcontrole (admin/stream_health.php). */
.health-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.health-toolbar .muted { font-size: 12px; }
.health-table td { vertical-align: top; }
.health-url {
  width: 100%;
  min-width: 220px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: Consolas, "SFMono-Regular", monospace;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  color: var(--text-primary);
}
.health-detail { font-size: 11px; margin-top: 4px; max-width: 260px; }
.health-badge { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.health-badge-bad { color: #f28b82 !important; border-color: rgba(242, 139, 130, 0.4) !important; }
.health-btn { padding: 4px 10px !important; font-size: 12px !important; text-decoration: none; display: inline-block; margin: 0 2px 4px 0; }
.health-suggest { font-size: 12px; margin-top: 6px; }
.health-suggest:empty { display: none; }
.health-suggest-title { color: #7be27b; font-weight: 600; margin-bottom: 3px; }
.health-suggest-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.health-suggest-item code { color: #7be27b; word-break: break-all; font-size: 11px; }
.health-suggest-item .muted { font-size: 11px; }
.health-apply { padding: 2px 8px !important; font-size: 11px !important; }

/* Geplande taken (admin.php). */
.cron-card-warn { border-color: rgba(245, 166, 35, 0.45); }
.cron-card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cron-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cron-item { display: flex; gap: 10px; align-items: flex-start; }
.cron-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--text-muted); }
.cron-ok .cron-dot { background: var(--status-good); box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.18); }
.cron-late .cron-dot, .cron-never:not(.cron-optional) .cron-dot { background: var(--status-warning); box-shadow: 0 0 0 3px rgba(250, 178, 25, 0.18); }
.cron-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cron-info strong { font-size: 14px; }
.cron-info > .muted { font-size: 12px; }
.cron-warn-text { color: #f5c877; }
.cron-help summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.cron-help summary:hover { color: var(--text-primary); }
.cron-help p { font-size: 12px; margin: 6px 0; }
.cron-cmd { display: block; font-size: 11px; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; word-break: break-all; user-select: all; }

/* Logboek (admin/audit_log.php). */
.audit-table td { vertical-align: top; font-size: 13px; }
.audit-badge { white-space: nowrap; font-size: 11px; }
.audit-user_delete, .audit-bulk_delete_users { color: #f28b82 !important; }
.audit-user_toggle_admin { color: #ffd27a !important; }
.audit-stream_url_changed { color: #8fbdf2 !important; }
.audit-details { margin-top: 4px; font-size: 12px; }
.audit-details summary { cursor: pointer; color: var(--text-muted); }
.audit-details code { font-size: 11px; word-break: break-all; }
.audit-details pre { margin: 4px 0 0; font-size: 11px; white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); }
.audit-scope { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; }
.audit-scope-user { color: #8fbdf2; background: rgba(57,135,229,0.12); border-color: rgba(57,135,229,0.3); }
.audit-scope-admin { color: #ffd27a; background: rgba(255,190,70,0.1); border-color: rgba(255,190,70,0.3); }
.audit-login_failed, .audit-stream_deleted, .audit-twofa_disabled { color: #f28b82 !important; }
.audit-register, .audit-stream_added, .audit-twofa_enabled { color: #7fd99a !important; }
.audit-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }

/* Heatmap "Beste uitzendtijden" (stream_detail.php, zie
   listenerHeatmapHtml() in includes/stream_insights.php). Sequentieel,
   één tint (blauw), 6 stappen: donker = weinig, licht = veel luisteraars —
   op het donkere kaartoppervlak zakken lage waarden zo weg en springen de
   drukke uren eruit. Gecontroleerd met de dataviz-validator (ordinaal,
   dark, oppervlak #1a1a19): monotone lichtheid, zichtbare stapgrootte, en
   ook de donkerste stap haalt 2:1 contrast met het kaartoppervlak. "Geen
   metingen" is bewust neutraal grijs met een stippelrand, niet de
   laagste blauwstap: geen data is iets anders dan 0 luisteraars. */
.hm-grid { display: flex; flex-direction: column; gap: 3px; }
.hm-row { display: grid; grid-template-columns: 26px repeat(24, minmax(6px, 1fr)); gap: 3px; align-items: center; }
.hm-daylabel { font-size: 11px; color: var(--text-muted); }
.hm-hour { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hm-cell { position: relative; display: block; height: 20px; border-radius: 3px; cursor: default; }
/* Tooltips aan de randen links/rechts uitlijnen i.p.v. gecentreerd, zodat
   ze niet buiten de kaart/het scherm vallen (zie $tipAttrs in
   listenerHeatmapHtml()). */
.hm-cell[data-tooltip-align="left"]::after { left: 0; transform: translateY(4px); }
.hm-cell[data-tooltip-align="right"]::after { left: auto; right: 0; transform: translateY(4px); }
.hm-cell[data-tooltip-align]:hover::after,
.hm-cell[data-tooltip-align]:focus-visible::after { transform: none; }
@media (max-width: 620px) {
  .hm-grid, .hm-row { gap: 2px; }
  .hm-row { grid-template-columns: 22px repeat(24, minmax(5px, 1fr)); }
  .hm-cell { height: 15px; border-radius: 2px; }
  .hm-hour { font-size: 9px; }
}
.hm-cell:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hm-cell:hover { box-shadow: 0 0 0 2px #fff inset; }
.hm-none { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.14); }
.hm-0 { background: #184f95; }
.hm-1 { background: #256abf; }
.hm-2 { background: #3987e5; }
.hm-3 { background: #6da7ec; }
.hm-4 { background: #9ec5f4; }
.hm-5 { background: #cde2fb; }
.hm-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.hm-legend-bar { display: inline-flex; gap: 2px; }
.hm-legend-bar span { width: 22px; height: 10px; border-radius: 2px; }
.hm-legend-none { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--text-muted); }
.hm-legend-none .hm-cell { width: 14px; height: 10px; }
.hm-best { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.hm-best strong { color: var(--text-primary); }

/* "Net gespeeld" op public_stream.php (zie getRecentTracks() in
   includes/stream_insights.php) — compacte lijst met kleine hoesjes;
   zonder deze regels werden de albumhoezen op volle grootte getoond. */
.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.recent-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border-hairline);
}
.recent-item:first-child { border-top: 0; padding-top: 0; }
.recent-item.is-current .recent-text strong { color: var(--accent); }
.recent-art {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex: none;
}
.recent-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recent-art svg { width: 18px; height: 18px; }
.recent-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.recent-text strong,
.recent-text .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-text strong { font-size: 14px; }
.recent-text .muted { font-size: 12px; }
.recent-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.recent-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--status-good);
  font-weight: 600;
}
.recent-now .live-dot { width: 7px; height: 7px; }

.recent-item.no-links { grid-template-columns: 44px minmax(0, 1fr) auto; }
/* Hoesje óf koptelefoon-icoon: het icoon alleen als er (nog) geen img is. */
.recent-art { position: relative; }
.recent-art img ~ svg { display: none; }

/* Zoeklinks (YouTube/Spotify) bij een nummer — zie trackSearchLinks() in
   includes/stream_insights.php. Bewust rustig (muted) zodat ze de titel
   niet overstemmen; lichten op bij hover/focus. */
.track-links { display: inline-flex; gap: 2px; }
.track-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: color .15s, background .15s;
}
.track-link svg { width: 16px; height: 16px; }
.track-link:hover, .track-link:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.track-link[data-tooltip-align="right"]::after,
.tt-plays[data-tooltip-align="right"]::after,
.npw-listeners[data-tooltip-align="right"]::after { left: auto; right: 0; transform: translateY(4px); }
.track-link[data-tooltip-align="right"]::before,
.tt-plays[data-tooltip-align="right"]::before,
.npw-listeners[data-tooltip-align="right"]::before { left: auto; right: 9px; transform: none; }
.track-link[data-tooltip-align="right"]:hover::after,
.track-link[data-tooltip-align="right"]:focus-visible::after,
.tt-plays[data-tooltip-align="right"]:hover::after,
.npw-listeners[data-tooltip-align="right"]:hover::after { transform: none; }

/* "Meest gedraaid" (zie topTracksHtml()) — 7/30 dagen-wissel met twee
   verborgen radioknoppen, geen JS nodig. */
.tt-radio { position: absolute; opacity: 0; pointer-events: none; }
.tt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tt-head h2 { margin: 0; }
.tt-range { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-hairline); border-radius: 8px; padding: 2px; }
.tt-tab { padding: 5px 12px; font-size: 12px; border-radius: 6px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.tt-tab:hover { color: var(--text-primary); }
.tt-radio-7:checked ~ .tt-head .tt-tab-7,
.tt-radio-30:checked ~ .tt-head .tt-tab-30 { background: var(--accent); color: #fff; font-weight: 600; }
.tt-radio-7:focus-visible ~ .tt-head .tt-tab-7,
.tt-radio-30:focus-visible ~ .tt-head .tt-tab-30 { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-panel-30 { display: none; }
.tt-radio-30:checked ~ .tt-panel-7 { display: none; }
.tt-radio-30:checked ~ .tt-panel-30 { display: block; }
.tt-empty { margin: 0; }
.tt-list { list-style: none; margin: 0; padding: 0; }
.tt-item {
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border-hairline);
}
.tt-item:first-child { border-top: 0; padding-top: 0; }
.tt-item .recent-art { width: 40px; height: 40px; }
.tt-rank { font-size: 13px; font-weight: 700; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.tt-item:nth-child(-n+3) .tt-rank { color: var(--text-primary); }
.tt-plays { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; cursor: default; }
.tt-plays strong { min-width: 30px; text-align: right; }
.tt-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tt-bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
@media (max-width: 560px) {
  .tt-bar { display: none; }
  .tt-item { grid-template-columns: 18px 36px minmax(0, 1fr) auto auto; gap: 8px; }
  .tt-item .recent-art { width: 36px; height: 36px; }
}

/* Luisteraars-sparkline (24 uur) naast het luisteraarsaantal — zie
   listenerSparklineHtml() en assets/sparkline.js. */
.spark-wrap { width: 260px; max-width: 100%; margin-top: 10px; }
.spark { position: relative; height: 44px; cursor: crosshair; outline: none; touch-action: pan-y; }
.spark:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-base { stroke: var(--gridline); stroke-width: 1; }
.spark-area { fill: var(--accent); fill-opacity: 0.16; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-muted); transform: translateX(-0.5px); pointer-events: none; }
.spark-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface-1); transform: translate(-50%, -50%); pointer-events: none; }
.spark-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.spark-tip strong { color: var(--text-primary); font-size: 13px; }
.spark-tip span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.spark-cross[hidden], .spark-dot[hidden], .spark-tip[hidden] { display: none; }
.spark-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.spark-meta strong { color: var(--text-primary); }

/* "Nu speelt"-widget (widget_nowplaying.php) voor de site van een station. */
.npw {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}
.npw-now { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.npw-art { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.npw-art .pc-avatar-inner { width: 100%; height: 100%; }
.npw-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.npw-info { min-width: 0; }
.npw-label { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npw-live { display: inline-flex; align-items: center; gap: 6px; color: var(--status-good); font-weight: 700; }
.npw-live .live-dot { width: 7px; height: 7px; }
.npw-station { overflow: hidden; text-overflow: ellipsis; }
.npw-title { font-size: 16px; font-weight: 700; margin-top: 3px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.npw-artist { font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npw-listeners { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); align-self: start; }
.npw-listeners svg { width: 14px; height: 14px; }
.npw-recent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hairline); }
.npw-recent-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
.npw .recent-item { padding: 6px 0; gap: 10px; grid-template-columns: 36px minmax(0, 1fr) auto auto; }
.npw .recent-item.no-links { grid-template-columns: 36px minmax(0, 1fr) auto; }
.npw .recent-art { width: 36px; height: 36px; }
.npw .recent-text strong { font-size: 13px; }

/* Publiek dashboard (public.php) op mobiel en tablet: compactere, minder hoge
   stationkaarten. Minder opvulling, kleiner logo, strakkere regelafstand, en
   stemknop + icoonknoppen samen op één regel (via .pc-actions; past het niet,
   dan loopt het netjes door naar een tweede regel). Het telefoonnummer staat
   al achter het telefoon-icoon, dus die losse regel vervalt hier. Desktop
   (vanaf 1000px) blijft precies zoals het was. */
.pc-actions { display: contents; }
@media (max-width: 999px) {
  .public-grid { gap: 12px; }
  .public-card { padding: 12px 14px; border-radius: 12px; }
  .public-card:hover { transform: none; }
  .public-card .pc-head { gap: 10px; margin-bottom: 6px; }
  .public-card .pc-avatar-lg { width: 44px; height: 44px; }
  .public-card .pc-avatar-lg svg { width: 20px; height: 20px; }
  .public-card-badges { margin-bottom: 4px; line-height: 1.9; }
  .public-card-badges .badge { font-size: 10px; padding: 1px 6px; margin-right: 4px; }
  .public-card-nowplaying { margin-bottom: 6px; }
  .public-card .admin-card-stats { gap: 2px 10px; font-size: 11px; margin-bottom: 0; }
  .public-card .admin-card-stats strong { font-size: 13px; }
  .public-card .stat-inout-group { gap: 10px; }
  .pc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    margin-top: auto;
    padding-top: 10px;
  }
  .public-card .pc-actions .vote-widget { margin: 0; padding: 0; gap: 8px; }
  .public-card .pc-actions .icon-row { margin: 0; gap: 6px; }
  .public-card .vote-btn { padding: 5px 12px 5px 9px; }
  .public-card .phone-line { display: none; }
}

/* ---- Programmering / uitzendschema (manage/schedule.php, public_stream.php,
   widget_nowplaying.php — zie includes/stream_schedule.php) ---- */
.icon-schedule { background: linear-gradient(180deg, #ffb3d9 0%, #e5489a 55%, #a3226a 100%); }
.sched-nownext { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sched-nn { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-hairline); min-width: 0; }
.sched-nn strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-nn .muted { font-size: 12px; }
.sched-nn-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sched-nn:first-child .sched-nn-label:has(.live-dot) { color: var(--status-good); }
.sched-nn-label .live-dot { width: 7px; height: 7px; }
.sched-week { display: flex; flex-direction: column; gap: 6px; }
.sched-day { border: 1px solid var(--border-hairline); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.sched-day summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.sched-day summary::-webkit-details-marker { display: none; }
.sched-day summary::after { content: '▸'; color: var(--text-muted); margin-left: 8px; transition: transform .15s; }
.sched-day[open] summary::after { transform: rotate(90deg); }
.sched-day summary .muted { font-weight: 400; font-size: 12px; margin-left: auto; }
.sched-day ul, .sched-admin ul { list-style: none; margin: 0; padding: 0 12px 8px; }
.sched-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border-hairline); }
.sched-day ul .sched-item:first-child { border-top: 0; }
.sched-item.is-now .sched-text strong { color: var(--accent); }
.sched-item.is-editing { background: rgba(57, 135, 229, 0.1); border-radius: 6px; }
.sched-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.sched-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sched-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-text .muted { font-size: 12px; }
.sched-desc { white-space: normal; }
.sched-actions { display: inline-flex; gap: 6px; }
.sched-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sched-admin-day { border: 1px solid var(--border-hairline); border-radius: 10px; }
.sched-admin-day h3 { margin: 0; padding: 10px 12px 4px; font-size: 14px; }
.sched-admin ul { padding: 0 12px 6px; }
.sched-admin .sched-item:first-child { border-top: 0; }
.sched-form .sched-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sched-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sched-daychip { position: relative; display: inline-flex; }
.sched-daychip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sched-daychip span { display: inline-block; min-width: 42px; text-align: center; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-hairline); background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.sched-daychip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.sched-daychip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sched-quick { padding: 6px 10px; font-size: 12px; }
@media (max-width: 560px) {
  .sched-item { grid-template-columns: 82px minmax(0, 1fr) auto; gap: 8px; }
  .sched-admin { grid-template-columns: 1fr; }
}
.npw-show { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.npw-show strong { font-weight: 700; }
.npw-show-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--status-good); margin-right: 4px; }
.npw-show-label.is-next { color: var(--text-muted); }

/* ---- Plaats + favorieten op het publieke dashboard (public.php/top.php) ---- */
.badge-city { display: inline-flex; align-items: center; gap: 3px; background: rgba(57, 135, 229, 0.14); color: #9ec5f4; border: 0; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.badge-city.is-static { cursor: default; }
.badge-city svg { width: 11px; height: 11px; }
button.badge-city:hover { background: rgba(57, 135, 229, 0.26); color: #fff; }
.fav-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-hairline); border-radius: 10px; background: var(--surface-2); color: var(--text-muted); cursor: pointer; flex-shrink: 0; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.fav-btn svg { width: 17px; height: 17px; }
.fav-btn:hover { color: #e5c339; border-color: rgba(229, 195, 57, 0.5); }
.public-card.is-fav .fav-btn { color: #e5c339; border-color: rgba(229, 195, 57, 0.55); background: rgba(229, 195, 57, 0.12); }
.public-card.is-fav { border-color: rgba(229, 195, 57, 0.35); }
.fav-filter { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-hairline); background: var(--surface-1); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 38px; }
.fav-filter svg { width: 15px; height: 15px; color: #e5c339; }
.fav-filter.is-active { background: rgba(229, 195, 57, 0.15); border-color: rgba(229, 195, 57, 0.5); color: #fff; }
.fav-hint { font-size: 12px; margin: -4px 0 10px; display: flex; align-items: center; gap: 4px; }
.fav-hint svg { width: 13px; height: 13px; color: #e5c339; }
.share-top-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; }
.share-top-btn svg { width: 14px; height: 14px; }
.tt-share { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--text-secondary); text-decoration: none; }
.tt-share svg { width: 13px; height: 13px; }
.tt-share:hover { color: var(--text-primary); }

/* ---- Slaaptimer (assets/sleep-timer.js) ---- */
.sleep-menu { position: relative; display: inline-flex; }
.sleep-btn svg { width: 14px; height: 14px; }
.np-popout.sleep-btn.is-active { width: auto; padding: 0 9px; gap: 5px; border-radius: 999px; color: #c9b8ff; border-color: rgba(167, 139, 250, 0.6); }
.icon-sleep { background: linear-gradient(180deg, #a9a3ff 0%, #5b54d6 55%, #332d99 100%); }
.icon-btn.sleep-btn.is-active { width: auto; padding: 0 9px; gap: 5px; }
.sleep-remaining { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sleep-popup {
  position: absolute;
  right: 0;
  z-index: 300;
  width: 210px;
  padding: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.sleep-up .sleep-popup { bottom: calc(100% + 8px); }
.sleep-down .sleep-popup { top: calc(100% + 8px); left: 0; right: auto; }
.sleep-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.sleep-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sleep-options button, .sleep-off { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 4px; border-radius: 7px; border: 1px solid var(--border-hairline); background: var(--surface-2); color: var(--text-primary); cursor: pointer; }
.sleep-options button:hover { border-color: var(--accent); }
.sleep-off { width: 100%; margin-top: 8px; color: var(--status-critical); }

/* Mobiel: footer NIET vastplakken. De bedoelde regel hiervoor (.site-footer
   { position: static } in de 620px-mediaquery bovenaan) werd overschreven
   door de latere algemene .site-footer-regel (position: sticky), waardoor de
   ~200px hoge footer op telefoons permanent over de onderkant van de
   stationkaarten heen lag. Hier onderaan, zodat deze het laatste woord heeft. */
@media (max-width: 620px) {
  .site-footer { position: static; box-shadow: none; }
}

/* Helppagina (help.php): inhoudsknoppen, "Wat is er nieuw" en gewone lijsten. */
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.help-toc .nav-btn { font-size: 12px; padding: 6px 10px; }
.help-news { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.help-news li { line-height: 1.5; }
.help-news a { font-size: 12px; margin-left: 4px; }
.help-list { margin: 6px 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.card[id] { scroll-margin-top: 16px; }

/* Widgetthema's kiezen op "Stemmen & hits" (manage/votes.php) +
   de "Klik om live te luisteren"-knop van de auto-play-speler. */
.theme-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.theme-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.theme-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-chip:has(input:checked) { border-color: var(--accent); color: var(--text-primary); background: rgba(57, 135, 229, 0.12); }
.theme-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); flex: none; }
.checkbox-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 2px 0 8px; cursor: pointer; flex-wrap: wrap; }
.checkbox-inline input { width: 16px; height: 16px; accent-color: var(--accent); }
.autoplay-note { font-size: 12px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(250, 178, 25, 0.08); border: 1px solid rgba(250, 178, 25, 0.25); }
.embed-preview { margin-bottom: 10px; background: var(--surface-2); border: 1px solid var(--border-hairline); border-radius: 8px; padding: 10px; display: flex; justify-content: center; }
.autoplay-hint { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 9px 12px; border: 0; border-radius: 10px; background: rgba(57, 135, 229, 0.16); color: #9ec5f4; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; animation: autoplay-pulse 2s ease-in-out infinite; }
.autoplay-hint:hover { background: var(--accent); color: #fff; }
@keyframes autoplay-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(57, 135, 229, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(57, 135, 229, 0); } }
@media (prefers-reduced-motion: reduce) { .autoplay-hint { animation: none; } }

/* ── Stemmen & deel-opties (manage/votes.php): kaarten per deel-optie ── */
.share-page { max-width: 1120px; }
.share-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.share-hero-avatar { width: 52px; height: 52px; flex: none; }
.share-hero-text { flex: 1 1 200px; min-width: 0; }
.share-hero-text h1 { margin: 0; font-size: 22px; text-wrap: balance; }
.share-hero-text p { margin: 2px 0 0; }
.share-hero-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; padding: 8px 14px; }
.share-hero-link svg { width: 14px; height: 14px; }
.share-page .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.share-section-title { font-size: 16px; margin: 0; }
.share-section-title .muted { font-weight: 400; font-size: 13px; }

.share-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 28px 0 14px; }
.share-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.share-tab {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface-1); color: var(--text-secondary); border: 1px solid var(--border-hairline);
}
.share-tab:hover { color: var(--text-primary); opacity: 1; }
.share-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.share-card { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.share-card--wide { grid-column: 1 / -1; }
.share-card[hidden] { display: none; }
.share-head { display: flex; align-items: flex-start; gap: 12px; }
.share-head .kpi-block-icon { flex: none; }
.share-head-text { flex: 1 1 auto; min-width: 0; }
.share-head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-head p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; }
.share-kind {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: var(--text-muted); border: 1px solid var(--border-hairline);
}
.share-new {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(57, 135, 229, 0.16); color: #8fbdf2;
}
.share-options { display: flex; flex-direction: column; gap: 4px; }
.share-options .theme-picker { margin: 0; }
.share-checks { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.share-checks .checkbox-inline { margin: 4px 0 0; }
.share-preview { margin: 0; }
.share-preview--small { padding: 16px; align-items: center; min-height: 40px; }
.share-preview--bar { padding: 8px; display: block; }
.share-foot { margin: 0; font-size: 12px; }
.theme-chip.is-active { border-color: var(--accent); color: var(--text-primary); background: rgba(57, 135, 229, 0.12); }
button.theme-chip { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; }

.share-code { position: relative; }
.share-code textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  padding: 10px 104px 10px 12px; resize: vertical; min-height: 44px;
  background: var(--surface-2); color: var(--text-secondary);
  border: 1px solid var(--border-hairline); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
}
.share-copy {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font-size: 12px; border-radius: 6px;
}
.share-copy.is-copied { background: var(--status-good); }
.share-more { border-top: 1px solid var(--gridline); padding-top: 10px; }
.share-more summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.share-more p { font-size: 13px; line-height: 1.55; margin: 8px 0 0; }
.share-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.share-range input[type="range"] { flex: 1 1 160px; min-width: 120px; }
.share-range input[type="number"] { width: 80px; }
.share-range .btn-secondary { padding: 4px 10px; font-size: 12px; }
.share-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.share-qr #qr-code-wrap { background: #fff; border-radius: 8px; padding: 10px; display: flex; flex: none; }
.share-qr #qr-code-wrap svg { width: 132px; height: 132px; display: block; }
.share-qr-side { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.share-qr-side .share-code { width: 100%; }

/* Nagebootste website met de vaste speler onderin (voorbeeld). */
.mock-site { position: relative; height: 230px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-hairline); background: #f4f2ee; }
.mock-site-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #e3e0da; }
.mock-site-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c5bd; }
.mock-site-bar span { margin-left: 10px; font-size: 11px; color: #6b6760; background: #f4f2ee; padding: 2px 12px; border-radius: 999px; }
.mock-site-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.mock-line { height: 10px; border-radius: 5px; background: #dcd8d0; }
.mock-line.w40 { width: 40%; height: 16px; background: #cfcac0; }
.mock-line.w90 { width: 90%; } .mock-line.w75 { width: 75%; } .mock-line.w60 { width: 60%; }
.mock-site-player { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 76px; border: 0; transition: transform .3s ease; }
.mock-site-tab {
  position: absolute; right: 12px; bottom: 12px; display: none; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px; font-size: 12px; background: #1a1a19; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.mock-site-tab span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mock-site.is-collapsed .mock-site-player { transform: translateY(110%); }
.mock-site.is-collapsed .mock-site-tab { display: inline-flex; }

@media (max-width: 820px) {
  .share-grid { grid-template-columns: minmax(0, 1fr); }
  .share-toolbar { align-items: flex-start; }
}
@media (max-width: 480px) {
  .share-code textarea { padding-right: 12px; padding-bottom: 44px; }
  .share-copy { top: auto; bottom: 6px; }
  .share-kind { display: none; }
}

/* Info-melding (bijv. publieke plekken op het dashboard). */
.notice-info {
  background: rgba(57, 135, 229, 0.1); border: 1px solid rgba(57, 135, 229, 0.3); color: var(--text-secondary);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.notice-info > span:not(.stat-icon) { flex: 1 1 260px; min-width: 0; }
.notice-info strong { color: var(--text-primary); }
.public-limit-note .stat-icon { flex: none; }

/* ── Beheer → Nieuwsbrief (admin/newsletter.php) ── */
.nl-page { max-width: 1240px; }
.nl-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nl-list-head form { margin: 0; }
.nl-table td { vertical-align: middle; }
.nl-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.nl-row-actions form { margin: 0; }
.nl-row-actions .btn-secondary, .nl-row-actions button { padding: 5px 10px; font-size: 12px; text-decoration: none; }
.nl-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; border: 1px solid transparent; }
.nl-status-draft { color: var(--text-secondary); border-color: var(--border-hairline); background: var(--surface-2); }
.nl-status-sending { color: #ffd27a; background: rgba(255, 190, 70, 0.1); border-color: rgba(255, 190, 70, 0.3); }
.nl-status-sent { color: #7fd99a; background: rgba(12, 163, 12, 0.12); border-color: rgba(12, 163, 12, 0.35); }
.nl-failed { color: #f28b82; }
.nl-danger { color: #f28b82 !important; }

.nl-editor-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.nl-back { font-size: 13px; text-decoration: none; }
.nl-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 80px; }
.nl-editor--readonly { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; padding-bottom: 0; }
.nl-editor--readonly .nl-edit-col { display: none; }
.nl-edit-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nl-edit-col .card, .nl-preview-col .card { margin: 0; }
.nl-meta .field:first-of-type { margin-top: 0; }
.nl-hint { font-size: 12px; margin: 8px 0 0; }
.nl-blocks { display: flex; flex-direction: column; gap: 10px; }
.nl-block { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--accent); }
.nl-block-top_stations, .nl-block-new_stations, .nl-block-top_tracks, .nl-block-contest { border-left-color: #e5822f; }
.nl-block-divider { padding-block: 10px; }
.nl-block-head { display: flex; align-items: center; gap: 8px; }
.nl-block-type { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.nl-auto-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(229, 130, 47, 0.15); color: #ffb277; }
.nl-block-tools { margin-left: auto; display: flex; gap: 4px; }
.nl-icon { width: 28px; height: 28px; padding: 0; border-radius: 6px; font-size: 13px; line-height: 1; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-hairline); }
.nl-icon:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); opacity: 1; }
.nl-icon:disabled { opacity: .35; }
.nl-block input[type="text"], .nl-block input[type="url"], .nl-block input[type="number"], .nl-block textarea,
.nl-meta input[type="url"] {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 14px;
  border: 1px solid var(--border-hairline); border-radius: 6px;
  background: var(--surface-2); color: var(--text-primary); color-scheme: dark;
}
.nl-block input:focus, .nl-block textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 135, 229, 0.2); }
.nl-block textarea { resize: vertical; min-height: 120px; font: inherit; font-size: 14px; line-height: 1.55; }
.nl-block label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.nl-format { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.nl-format button { padding: 3px 10px; font-size: 12px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-hairline); border-radius: 6px; }
.nl-format button:hover { color: var(--text-primary); border-color: var(--accent); opacity: 1; }
.nl-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.nl-image-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.nl-image-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-hairline); flex: none; }
.nl-image-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nl-image-fields label:first-child { width: 100%; }
.nl-upload { display: inline-flex !important; flex-direction: row !important; cursor: pointer; padding: 6px 12px; font-size: 12px !important; color: var(--text-secondary) !important; }
.nl-add { display: flex; flex-direction: column; gap: 8px; }
.nl-add-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.nl-add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.nl-add-row .theme-chip { padding: 6px 12px; }
.nl-chip-auto { border-color: rgba(229, 130, 47, 0.4); }
.nl-chip-auto:hover { border-color: #e5822f; color: var(--text-primary); }

.nl-preview-col { position: sticky; top: var(--nl-sticky-top, 12px); min-width: 0; }
.nl-preview-card { padding: 14px; }
.nl-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.nl-device { margin-left: auto; }
.nl-device .share-tab { padding: 4px 10px; font-size: 12px; }
.nl-inbox { display: flex; gap: 6px; align-items: baseline; font-size: 13px; padding: 8px 10px; margin-bottom: 10px; border-radius: 8px; background: var(--surface-2); overflow: hidden; white-space: nowrap; }
.nl-inbox-from { font-weight: 700; flex: none; }
.nl-inbox-subject { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.nl-inbox-pre { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
.nl-frame-wrap { background: #05070d; border-radius: 10px; overflow: auto; max-height: 72vh; display: flex; justify-content: center; }
.nl-frame-wrap iframe { display: block; width: 100%; height: 600px; border: 0; transition: width .25s ease; }
.nl-frame-wrap.is-mobile iframe { width: 375px; max-width: 100%; }

.nl-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface-1) 92%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-hairline);
}
.nl-dirty { font-size: 12px; margin-right: auto; }

.nl-sendstate { margin-bottom: 18px; }
.nl-sendstate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.nl-sendstate-head form { margin: 0; }
.nl-progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nl-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7c3aed); border-radius: 999px; transition: width .4s ease; }
.nl-progress-stats { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.nl-optin-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

@media (max-width: 980px) {
  .nl-editor { grid-template-columns: minmax(0, 1fr); }
  .nl-preview-col { position: static; }
}

/* ── Top 3 met kroon + stemknop-verbeteringen (public.php) ── */
.pc-status-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-headinfo .rank-crown {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 16px;
  color: #3b2a00; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pc-headinfo .rank-crown svg { width: 12px; height: 12px; margin: 0; vertical-align: 0; color: currentColor; filter: none; }
.pc-headinfo .rank-crown-1 { background: linear-gradient(180deg, #ffe27a 0%, #e5c339 60%, #b8951f 100%); }
.pc-headinfo .rank-crown-2 { background: linear-gradient(180deg, #f4f6f8 0%, #c3cbd4 60%, #8f9aa6 100%); color: #262c33; }
.pc-headinfo .rank-crown-3 { background: linear-gradient(180deg, #efb584 0%, #cd8447 60%, #97602c 100%); color: #2e1904; }
.public-card:has(.rank-crown-1) { box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.35), 0 8px 26px rgba(245, 196, 81, 0.12); }

.vote-btn.is-voting { filter: saturate(0.7); }
.vote-count { transition: color 0.2s ease; font-variant-numeric: tabular-nums; }
.vote-count.is-bumped { color: #7fd99a; animation: vote-bump 0.5s ease; }
@keyframes vote-bump { 30% { transform: scale(1.18); } }
.vote-plus {
  position: relative; display: inline-block; margin-left: -6px; pointer-events: none;
  font-size: 13px; font-weight: 800; color: #7fd99a; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  animation: vote-plus 1.3s ease-out forwards;
}
@keyframes vote-plus { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) { .vote-count.is-bumped, .vote-plus { animation: none; } }

/* AdSense-blok op admin/seo.php */
.seo-adsense { margin: 8px 0 20px; padding: 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-hairline); }
.seo-adsense .field input { background: var(--surface-1); }

/* ── YouTube-venster (assets/yt-modal.js) ── */
html.yt-modal-open { overflow: hidden; }
.yt-modal {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 5, 10, 0.78); backdrop-filter: blur(4px);
}
.yt-modal[hidden] { display: none !important; }
.yt-modal-card {
  width: min(880px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.yt-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; }
.yt-modal-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-modal-close { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-hairline); }
.yt-modal-close:hover { color: var(--text-primary); opacity: 1; }
.yt-modal-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; background: #000; }
.yt-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-modal-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; color: #e7e9ee; }
.yt-modal-status[hidden] { display: none; }
.yt-modal-status p { margin: 0; }
.yt-modal-status .muted { color: #9aa3b5; }
.yt-modal-search { margin-top: 8px; text-decoration: none; }
.yt-modal-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; animation: yt-spin 0.8s linear infinite; }
@keyframes yt-spin { to { transform: rotate(360deg); } }
.yt-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 18px 14px; font-size: 13px; }
.yt-modal-note { color: var(--text-muted); font-size: 12px; }
.yt-modal-link { margin-left: auto; font-weight: 600; }

/* Favoriet-labeltje naast Live (public.php) */
.fav-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 16px; color: #ffd27a; background: rgba(255, 190, 70, 0.12); border: 1px solid rgba(255, 190, 70, 0.35); }
.fav-tag svg { width: 11px; height: 11px; }
.fav-hint svg { width: 13px; height: 13px; vertical-align: -2px; color: #ffd27a; }

/* ── Stemwedstrijd "Station van de maand" (includes/vote_contest.php) ── */
.som-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 16px; white-space: nowrap; color: #3b2a00;
  background: linear-gradient(180deg, #ffe27a 0%, #e5c339 60%, #b8951f 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.som-badge svg { width: 12px; height: 12px; margin: 0; color: currentColor; filter: none; }
.contest-card { margin-bottom: 18px; padding: 16px 18px; border: 1px solid rgba(229, 195, 57, 0.28); background: linear-gradient(135deg, rgba(229, 195, 57, 0.08), transparent 45%), var(--surface-1); }
.contest-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contest-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #ffe27a, #e5c339 55%, #ad8f1f); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.contest-icon svg { width: 18px; height: 18px; }
.contest-head-text { flex: 1 1 260px; min-width: 0; }
.contest-head h2 { margin: 0; font-size: 17px; }
.contest-head p { margin: 2px 0 0; font-size: 13px; }
.contest-more { padding: 6px 12px; font-size: 12px; text-decoration: none; white-space: nowrap; }
.contest-body { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-top: 12px; }
.contest-list { list-style: none; margin: 0; padding: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contest-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.contest-rank { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--text-secondary); background: rgba(255, 255, 255, 0.06); }
.contest-row-1 .contest-rank { color: #3b2a00; background: linear-gradient(180deg, #ffe27a, #e5c339); }
.contest-row-2 .contest-rank { color: #262c33; background: linear-gradient(180deg, #f4f6f8, #b9c2cc); }
.contest-row-3 .contest-rank { color: #2e1904; background: linear-gradient(180deg, #efb584, #cd8447); }
.contest-avatar { width: 30px !important; height: 30px !important; flex: none; }
.contest-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contest-name:hover { color: var(--accent); }
.contest-votes { flex: none; font-size: 13px; font-weight: 700; color: #f5c451; font-variant-numeric: tabular-nums; }
.contest-empty { margin: 0; flex: 1 1 320px; font-size: 13px; color: var(--text-secondary); }
.contest-winner {
  flex: 0 1 240px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 14px; border-radius: 12px;
  text-decoration: none; color: var(--text-primary); background: rgba(229, 195, 57, 0.1); border: 1px solid rgba(229, 195, 57, 0.3);
}
.contest-winner:hover { border-color: rgba(229, 195, 57, 0.6); }
.contest-winner-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #f5c451; }
.contest-winner-station { display: flex; align-items: center; gap: 8px; min-width: 0; }
.contest-winner-station strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contest-winner .muted { font-size: 12px; }
.contest-full { margin-top: 22px; padding: 18px; }
.contest-list-full { margin-top: 14px; }
.contest-subtitle { margin: 20px 0 8px; font-size: 14px; }
.contest-hof { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.contest-hof li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--gridline); }
.contest-hof-month { min-width: 130px; color: var(--text-secondary); text-transform: capitalize; }
.contest-pos { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #f5c451; text-decoration: none; }
.contest-pos:hover { text-decoration: underline; }
.leaderboard-name .som-badge { margin-left: 6px; vertical-align: 1px; }

/* ── "Zet … op je telefoon" (assets/pwa-install.js) ── */
.pwa-banner {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 950;
  width: min(480px, calc(100% - 32px)); transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease, opacity 0.3s ease;
}
.pwa-banner.is-visible { transform: translate(-50%, 0); opacity: 1; }
.pwa-banner-icon { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; }
.pwa-banner-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; }
.pwa-banner-text strong { font-size: 14px; }
.pwa-banner-text span { color: var(--text-secondary); }
.pwa-banner-actions { display: flex; gap: 8px; margin-left: auto; }
.pwa-banner-actions button { padding: 7px 14px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .pwa-banner { transition: none; } }

/* ── Beheer-overzicht (admin.php) ── */
.ov-cards { margin-bottom: 24px; }
.ov-title { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.ov-title svg { width: 16px; height: 16px; color: var(--accent); }
.ov-line { margin: 0 0 6px; font-size: 14px; }
.ov-btn { display: inline-block; margin-top: 6px; padding: 6px 12px; font-size: 12px; text-decoration: none; }
.ov-status { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ov-status li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.ov-status .is-ok .ov-dot { background: var(--status-good); }
.ov-trend { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ov-trend.is-up { color: #7fd99a; background: rgba(12, 163, 12, 0.12); }
.ov-trend.is-down { color: #f28b82; background: rgba(242, 139, 130, 0.12); }

/* Stemwedstrijd-kaart op het publieke dashboard: inklapbaar (<details>), standaard dicht. */
details.contest-card { padding: 0; }
details.contest-card > summary { list-style: none; cursor: pointer; padding: 12px 16px; border-radius: 10px; flex-wrap: nowrap; }
details.contest-card > summary::-webkit-details-marker { display: none; }
details.contest-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.contest-card .contest-icon { width: 32px; height: 32px; }
details.contest-card .contest-icon svg { width: 16px; height: 16px; }
.contest-head-text { display: flex; flex-direction: column; }
.contest-title { font-size: 15px; font-weight: 700; }
.contest-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contest-sub strong { color: var(--text-primary); }
.contest-toggle { flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-secondary); background: var(--surface-2); transition: transform 0.2s ease; }
details.contest-card[open] .contest-toggle { transform: rotate(180deg); }
details.contest-card[open] > summary { border-bottom: 1px solid var(--gridline); border-radius: 10px 10px 0 0; }
.contest-intro { margin: 12px 16px 0; font-size: 13px; }
details.contest-card .contest-body { margin: 12px 16px 0; }
details.contest-card .contest-more { display: inline-block; margin: 12px 16px 14px; }
details.contest-card > summary .contest-head-text { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) {
  .contest-sub { white-space: normal; }
  details.contest-card > summary { padding: 10px 12px; gap: 10px; }
}

/* Decoratieve achtergrondtekst/-lagen in de kop staken op smalle schermen
   buiten beeld, waardoor de pagina een stukje opzij kon schuiven. 'clip'
   (i.p.v. 'hidden') laat position:sticky gewoon werken. */
html, body { overflow-x: clip; }

/* Alleen voor zoekmachines/schermlezers, niet zichtbaar. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Footer: compact en netjes (siteFooterHtml() in includes/functions.php) ──
   Desktop: één dunne, vastgeplakte regel (merk · links · aanvraag · ©).
   Tablet: twee rustige regels, meescrollend. Mobiel: gecentreerd, gestapeld. */
.site-footer {
  margin-top: 40px;
  padding: 8px 24px calc(8px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--page-plane) 94%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.site-footer-inner {
  max-width: 1220px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "brand links promo copy";
  align-items: center;
  gap: 6px 22px;
}
.site-footer-brand { grid-area: brand; }
.site-footer-brand .brand-mark-icon { width: 24px !important; height: 24px !important; }
.site-footer-brand .brand-mark-icon svg { width: 12px; height: 12px; }
.site-footer-brand .brand-mark-text { font-size: 14px; }
.site-footer-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-start; }
.site-footer-links a { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.site-footer-links a:hover { color: var(--text-primary); }
.site-footer-promo { grid-area: promo; }
.site-footer .footer-stream-promo { flex-basis: auto; margin: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; text-align: left; }
.site-footer .footer-stream-promo a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px dotted currentColor; font-size: 12px; }
.site-footer .footer-stream-promo a:hover { color: var(--text-primary); }
.site-footer-copy { grid-area: copy; margin: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Tablet: twee regels, niet vastgeplakt. */
@media (max-width: 1100px) {
  .site-footer { position: static; box-shadow: none; backdrop-filter: none; background: var(--page-plane); padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .site-footer-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand links" "promo copy";
    row-gap: 10px;
  }
  .site-footer-links { justify-content: flex-end; }
  .site-footer-copy { text-align: right; }
}

/* Mobiel: gecentreerd onder elkaar. */
@media (max-width: 620px) {
  .site-footer { padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .site-footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "links" "promo" "copy";
    justify-items: center;
    row-gap: 12px;
  }
  .site-footer-links { justify-content: center; gap: 8px 18px; }
  .site-footer-links a { font-size: 13px; }
  .site-footer .footer-stream-promo { white-space: normal; text-align: center; line-height: 1.7; }
  .site-footer-copy { text-align: center; }
}

/* ── App-menu onderin op telefoons (appNavHtml() in includes/functions.php) ── */
.app-nav { display: none; }
@media (max-width: 720px) {
  body.has-app-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .app-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 18, 17, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-hairline);
  }
  .app-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; padding: 4px 2px; border-radius: 10px;
    color: var(--text-muted); text-decoration: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .app-nav-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 28px; border-radius: 14px; transition: background 0.2s ease; }
  .app-nav-icon svg { width: 21px; height: 21px; }
  .app-nav a.is-active { color: var(--text-primary); }
  .app-nav a.is-active .app-nav-icon { background: rgba(57, 135, 229, 0.22); color: #8ab8f0; }
  .app-nav a:active .app-nav-icon { background: rgba(255, 255, 255, 0.08); }
  /* Zwevende meldingen boven de balk houden. */
  body.has-app-nav .cookie-notice,
  body.has-app-nav .now-playing-card { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.has-app-nav .pwa-banner { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.has-app-nav .site-footer { margin-top: 32px; }
}

.station-compare-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none; }
.station-compare-link:hover { text-decoration: underline; }
.station-compare-link svg, .share-top-btn svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ── Hitlijst (hitlijst.php) ── */
.container.hl-page, .container.ns-page { max-width: 820px; padding-top: 20px; }
.hl-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 0 0 18px; font-size: 13px; color: var(--text-secondary); }
.hl-summary strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.btn.hl-search-btn, .hl-search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; }
.hl-search-btn svg { width: 15px; height: 15px; }
.hl-list { list-style: none; margin: 0 0 16px; padding: 6px 14px; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 12px; }
.hl-item {
  display: grid; grid-template-columns: 46px 48px minmax(0, 1fr) auto auto;
  grid-template-areas: "pos art info plays acts"; align-items: center; column-gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--border-hairline);
}
.hl-item:first-child { border-top: 0; }
.hl-pos { grid-area: pos; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hl-rank { font-size: 18px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; line-height: 1; }
.hl-art { grid-area: art; width: 48px; height: 48px; }
.hl-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hl-title, .hl-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-title { font-size: 15px; }
.hl-artist { font-size: 13px; color: var(--text-secondary); }
.hl-stations { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-stations a { color: var(--text-secondary); text-decoration: none; }
.hl-stations a:hover { color: var(--text-primary); text-decoration: underline; }
.hl-stations .hl-more { color: var(--accent); }
.hl-plays { grid-area: plays; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.hl-plays strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.hl-plays span { font-size: 11px; color: var(--text-muted); }
.hl-actions { grid-area: acts; display: flex; align-items: center; gap: 2px; }
.hl-move { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-move span { font-size: 8px; }
.hl-move-up { color: #6fdc6f; background: rgba(12, 163, 12, 0.14); }
.hl-move-down { color: #f09393; background: rgba(208, 59, 59, 0.14); }
.hl-move-new { color: #9cc4f3; background: rgba(57, 135, 229, 0.18); text-transform: uppercase; letter-spacing: 0.04em; font-size: 9.5px; }
.hl-move-same { color: var(--text-muted); }
.hl-top .hl-rank { color: var(--text-primary); font-size: 22px; }
.hl-top-1 .hl-rank { color: #e5c339; }
.hl-top-1 { background: linear-gradient(90deg, rgba(229, 195, 57, 0.08), transparent 60%); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 12px 12px 0 0; }
.hl-top-1 .hl-art { width: 56px; height: 56px; }
.hl-explain summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.hl-explain p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; }
@media (max-width: 620px) {
  .hl-list { padding: 4px 10px; }
  .hl-item { grid-template-columns: 34px 44px minmax(0, 1fr) auto; grid-template-areas: "pos art info plays" "pos art acts acts"; column-gap: 10px; row-gap: 2px; }
  .hl-art, .hl-top-1 .hl-art { width: 44px; height: 44px; }
  .hl-actions { justify-self: start; margin-left: -6px; }
  .hl-actions .track-link { width: 30px; height: 26px; }
  .hl-top-1 { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .hl-rank { font-size: 16px; }
  .hl-top .hl-rank { font-size: 19px; }
}

/* ── Nummer zoeken (nummers.php) ── */
.ns-form { display: flex; gap: 8px; padding: 12px; align-items: stretch; }
.ns-form input[type="search"] { flex: 1 1 auto; min-width: 0; font-size: 15px; padding: 10px 12px; margin: 0; }
.ns-form select { flex: 0 0 auto; width: auto; margin: 0; }
.ns-form button { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ns-form button svg { width: 16px; height: 16px; }
.ns-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 20px; font-size: 13px; }
.ns-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-hairline); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); text-decoration: none; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-chip:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.25); }
.ns-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; margin: 22px 0 10px; }
.ns-heading .muted { font-weight: 400; font-size: 13px; }
.ns-heading-dot { position: static; flex: none; width: 10px; height: 10px; }
.ns-track { padding: 14px; margin-bottom: 10px; }
.ns-track.is-live { border-color: rgba(12, 163, 12, 0.4); }
.ns-track-head { display: flex; align-items: center; gap: 12px; }
.ns-art { width: 52px; height: 52px; }
.ns-track-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.ns-track-info strong, .ns-track-info > .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-track-info strong { font-size: 15px; }
.ns-track-info > .muted { font-size: 13px; }
.ns-track-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.ns-stations { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.ns-stations li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-hairline); }
.ns-stations li:last-child { border-bottom: 0; padding-bottom: 0; }
.ns-avatar { width: 32px; height: 32px; }
.ns-avatar .pc-avatar-inner svg { width: 15px; height: 15px; }
.ns-avatar .pc-live-dot { width: 10px; height: 10px; }
.ns-station-name { font-weight: 600; font-size: 14px; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-station-name:hover { text-decoration: underline; }
.ns-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ns-live-now { color: #6fdc6f; font-weight: 700; }
.btn-secondary.ns-listen { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; text-decoration: none; }
.ns-listen svg { width: 12px; height: 12px; }
.ns-onair-list { list-style: none; padding: 4px 14px; margin: 0; }
.ns-onair-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-hairline); }
.ns-onair-list li:first-child { border-top: 0; }
.ns-onair-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ns-onair-track { font-size: 13px; color: var(--text-secondary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ns-onair-track:hover { color: var(--text-primary); text-decoration: underline; }
.ns-onair-track[data-tooltip]::after, .ns-onair-track[data-tooltip]::before { display: none; }
.ns-listeners { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ns-listeners svg { width: 14px; height: 14px; }
@media (max-width: 620px) {
  .ns-form { flex-wrap: wrap; }
  .ns-form input[type="search"] { flex-basis: 100%; }
  .ns-form select { flex: 1 1 auto; }
  .ns-track-head .track-links { align-self: flex-start; }
  .ns-stations li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .ns-stations .ns-when { grid-column: 2; grid-row: 2; margin-top: -6px; }
  .ns-stations .ns-listen { grid-column: 3; grid-row: 1 / span 2; }
  .ns-listen span { display: none; }
  .btn-secondary.ns-listen { padding: 8px; }
  .ns-onair-list { padding: 2px 12px; }
}

/* ── Stations vergelijken (vergelijk.php) ── */
.container.cmp-page { max-width: 860px; padding-top: 20px; --cmp-a: #3987e5; --cmp-b: #d9772f; }
.cmp-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; }
.cmp-pick select { width: 100%; margin: 0; }
.cmp-swap { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-hairline); color: var(--text-secondary); text-decoration: none; font-size: 17px; }
.cmp-swap:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.cmp-vs-small { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.cmp-board { padding: 18px 18px 8px; }
.cmp-heads { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; }
.cmp-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 8px 10px; border-radius: 10px; text-decoration: none; color: inherit; border-top: 3px solid transparent; background: rgba(255, 255, 255, 0.02); min-width: 0; }
.cmp-head:hover { background: rgba(255, 255, 255, 0.05); }
.cmp-head-a { border-top-color: var(--cmp-a); }
.cmp-head-b { border-top-color: var(--cmp-b); }
.cmp-avatar { width: 56px; height: 56px; }
.cmp-avatar .pc-avatar-inner svg { width: 25px; height: 25px; }
.cmp-name { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
.cmp-cats { font-size: 11.5px; }
.cmp-score { display: flex; align-items: center; gap: 8px; align-self: center; }
.cmp-score-num { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; padding-bottom: 4px; border-bottom: 3px solid; }
.cmp-score-a { border-color: var(--cmp-a); }
.cmp-score-b { border-color: var(--cmp-b); }
.cmp-score-vs { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.cmp-verdict { text-align: center; font-size: 13.5px; color: var(--text-secondary); margin: 12px 0 10px; }
.cmp-rows { margin: 0; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 180px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-hairline); }
.cmp-label { text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.cmp-label[data-tooltip] { cursor: help; text-decoration: underline dotted rgba(255, 255, 255, 0.2); text-underline-offset: 3px; }
.cmp-val { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; min-width: 0; }
.cmp-val small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.cmp-val-a { text-align: right; }
.cmp-val-b { text-align: left; }
.cmp-val.is-better { font-weight: 800; color: var(--text-primary); }
.cmp-val.is-better::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 7px 2px 0; vertical-align: middle; }
.cmp-val-a.is-better::before { background: var(--cmp-a); }
.cmp-val-b.is-better::before { background: var(--cmp-b); }
.cmp-track { display: inline-block; max-width: 100%; }
.cmp-track, .cmp-track small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chart-card h2, .cmp-tracks-card h2 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cmp-dot-a { background: var(--cmp-a); }
.cmp-dot-b { background: var(--cmp-b); }
.cmp-chart-wrap { position: relative; height: 260px; }
.cmp-chart-note { font-size: 12px; margin: 8px 0 0; }
.cmp-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-tracks-card { margin-bottom: 0; min-width: 0; }
.cmp-track-list { list-style: none; margin: 0; padding: 0; }
.cmp-track-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border-hairline); }
.cmp-track-list li:first-child { border-top: 0; }
.cmp-track-rank { font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.cmp-track-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cmp-track-text strong, .cmp-track-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-track-text strong { font-size: 13.5px; }
.cmp-track-text .muted { font-size: 12px; }
.cmp-track-plays { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .cmp-form { gap: 6px; padding: 10px; }
  .cmp-swap { width: 30px; height: 30px; font-size: 15px; }
  .cmp-board { padding: 12px 10px 4px; }
  .cmp-heads { gap: 6px; }
  .cmp-head { padding: 10px 4px 8px; }
  .cmp-avatar { width: 44px; height: 44px; }
  .cmp-name { font-size: 14px; }
  .cmp-cats { display: none; }
  .cmp-score-num { font-size: 22px; }
  .cmp-score { gap: 4px; flex-direction: column; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 6px; }
  .cmp-label { font-size: 11px; }
  .cmp-val { font-size: 14px; }
  .cmp-val.is-better::before { margin-right: 4px; }
  .cmp-chart-wrap { height: 220px; }
  .cmp-tracks { grid-template-columns: 1fr; gap: 0; }
  .cmp-tracks-card { margin-bottom: 16px; }
}

/* Met het app-menu onderin zijn de navigatieknoppen in de kop dubbel. */
@media (max-width: 720px) {
  body.has-app-nav .header-auth a.nav-btn[href="public"],
  body.has-app-nav .header-auth a.nav-btn[href="top"],
  body.has-app-nav .header-auth a.nav-btn[href="hitlijst"] { display: none; }
  .cmp-pick select, .ns-form select { min-width: 0; }
}

/* Stationpagina: linkerkolom van de luisterkaart groeit mee, lange "Nu:"-
   titels lopen binnen de beschikbare breedte i.p.v. de kaart op te rekken. */
.stream-main-col { flex: 1 1 320px; min-width: 0; max-width: 620px; }
.stream-now-line { display: flex; gap: 6px; align-items: center; margin-top: 2px; min-width: 0; }
.stream-now-text { display: block; flex: 1 1 auto; min-width: 0; }
.recent-text strong.marquee-wrap, .recent-text .muted.marquee-wrap { text-overflow: clip; display: block; }

/* ── Beveiliging (admin/security.php, includes/ip_guard.php) ── */
.container.sec-page { max-width: 980px; }
.sec-page .card h2 { font-size: 17px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sec-h-sub { font-size: 12.5px; font-weight: 400; }
.sec-lead { font-size: 13.5px; margin: -2px 0 14px; max-width: 70ch; line-height: 1.55; }
.sec-note { font-size: 12px; }
.sec-flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.sec-flash-ok { background: rgba(12, 163, 12, 0.12); border-color: rgba(12, 163, 12, 0.4); color: #9be89b; }
.sec-flash-error { background: rgba(208, 59, 59, 0.12); border-color: rgba(208, 59, 59, 0.45); color: #f3a9a9; }
.sec-me-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.sec-me-row > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-hairline); border-radius: 8px; min-width: 0; }
.sec-me-row .muted { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.sec-me-row strong { font-size: 14px; overflow-wrap: anywhere; }
.sec-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-small { padding: 5px 11px; font-size: 12.5px; border-radius: 6px; }
.sec-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.sec-pill-good { background: rgba(12, 163, 12, 0.15); color: #6fdc6f; }
.sec-pill-bad { background: rgba(208, 59, 59, 0.16); color: #f09393; }
.sec-ban-form { display: grid; grid-template-columns: 1.1fr 1.4fr 0.7fr auto; gap: 10px; align-items: end; }
.sec-ban-form label, .sec-vpn-form > label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.sec-ban-form input, .sec-ban-form select, .sec-vpn-form input, .sec-vpn-form textarea { margin: 0; width: 100%; }
.sec-ban-form button { height: 40px; }
.sec-vpn-form { display: flex; flex-direction: column; gap: 14px; }
.sec-vpn-form > button { align-self: flex-start; }
.sec-modes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sec-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border-hairline); border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.02); }
.sec-mode:has(input:checked) { border-color: var(--accent); background: rgba(57, 135, 229, 0.1); }
.sec-mode input { width: auto; margin: 3px 0 0; }
.sec-mode span { display: flex; flex-direction: column; gap: 3px; }
.sec-mode small { font-size: 12px; line-height: 1.45; }
.sec-table-wrap { overflow-x: auto; }
.sec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sec-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; padding: 6px 10px 8px 0; border-bottom: 1px solid var(--border-hairline); }
.sec-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.sec-table tr:last-child td { border-bottom: 0; }
.sec-table small { font-size: 11.5px; }
.sec-actions { text-align: right; white-space: nowrap; }
.sec-actions form { margin: 0; display: inline; }
.sec-expired { margin-top: 12px; font-size: 13px; }
.sec-expired summary { cursor: pointer; color: var(--text-secondary); }
.sec-expired ul { margin: 8px 0 0; padding-left: 18px; }
.vpn-warning { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1000; width: min(640px, calc(100% - 32px)); padding: 10px 14px; border-radius: 10px; background: #3a2a07; border: 1px solid rgba(250, 178, 25, 0.5); color: #ffd98a; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
@media (max-width: 720px) {
  .sec-ban-form { grid-template-columns: 1fr; }
  .sec-ban-form button { justify-self: start; }
  .sec-modes { grid-template-columns: 1fr; }
}

/* Donkere invoervelden voor de nieuwe formulieren (beveiliging, nummer zoeken). */
.sec-page input[type="text"], .sec-page select, .sec-page textarea,
.ns-form input[type="search"], .ns-form select, .cmp-pick select {
  padding: 9px 11px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-hairline); border-radius: 8px;
  background: var(--surface-2); color: var(--text-primary); color-scheme: dark;
}
.ns-form input[type="search"] { font-size: 15px; padding: 10px 12px; }
.sec-page textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.sec-page input:focus, .sec-page select:focus, .sec-page textarea:focus,
.ns-form input:focus, .ns-form select:focus, .cmp-pick select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 135, 229, 0.22); }
.ip-ban-link { font-size: 11px; color: #f09393; text-decoration: none; margin-left: 4px; opacity: 0.8; }
.ip-ban-link:hover { opacity: 1; text-decoration: underline; }

/* ── "Nu online" als kaartjes (admin/analytics.php) — geen scrollbalk ── */
.lv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.lv-search { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-hairline); background: var(--surface-2); color: var(--text-primary); font-size: 13.5px; font-family: inherit; color-scheme: dark; }
.lv-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 135, 229, 0.22); }
.lv-filters { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-hairline); }
.lv-filter { background: transparent; color: var(--text-secondary); padding: 6px 12px; font-size: 12.5px; font-weight: 600; border-radius: 7px; }
.lv-filter:hover { color: var(--text-primary); opacity: 1; }
.lv-filter.is-active { background: rgba(57, 135, 229, 0.22); color: #d6e7fc; }
.lv-list { --lv-cols: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 150px; }
.lv-head { display: grid; grid-template-columns: var(--lv-cols); gap: 16px; padding: 0 14px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.lv-head span:last-child { text-align: right; }
.lv-body { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lv-row {
  display: grid; grid-template-columns: var(--lv-cols); gap: 16px; align-items: center;
  padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-hairline);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lv-row:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
.lv-row.is-user { background: rgba(57, 135, 229, 0.08); border-color: rgba(57, 135, 229, 0.3); }
.lv-who, .lv-net, .lv-page { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lv-who { align-items: flex-start; }
.lv-guest { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.lv-guest svg { width: 14px; height: 14px; opacity: 0.7; }
.lv-ip { font-size: 12px; color: var(--text-muted); background: none; padding: 0; }
.lv-isp { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-place { font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lv-flag { font-size: 13px; }
.lv-tag { align-self: flex-start; max-width: 100%; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.lv-tag-station { background: rgba(57, 135, 229, 0.18); color: #9cc4f3; }
.lv-tag-public  { background: rgba(12, 163, 12, 0.16); color: #86e086; }
.lv-tag-embed   { background: rgba(139, 92, 246, 0.2); color: #c7b0fb; }
.lv-tag-account { background: rgba(229, 195, 57, 0.16); color: #ecd27a; }
.lv-path { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lv-ago { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.lv-ago.is-now { color: #6fdc6f; font-weight: 700; }
.lv-ago.is-now::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--status-good); margin-right: 6px; vertical-align: 1px; }
.lv-ban { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #f09393; text-decoration: none; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(208, 59, 59, 0.35); opacity: 0.75; transition: opacity 0.15s, background 0.15s; }
.lv-ban svg { width: 12px; height: 12px; }
.lv-row:hover .lv-ban, .lv-ban:focus-visible { opacity: 1; }
.lv-ban:hover { background: rgba(208, 59, 59, 0.16); }
.lv-nomatch { font-size: 13px; text-align: center; padding: 14px 0 4px; }
@media (max-width: 900px) {
  .lv-head { display: none; }
  .lv-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who meta" "net net" "page page"; gap: 8px 12px; }
  .lv-who { grid-area: who; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .lv-net { grid-area: net; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .lv-page { grid-area: page; flex-direction: row; align-items: center; gap: 8px; }
  .lv-meta { grid-area: meta; flex-direction: row; align-items: center; gap: 8px; }
  .lv-ban span { display: none; }
  .lv-ban { padding: 5px; opacity: 1; }
}
.lv-intro { font-size: 12.5px; margin: 6px 0 14px; max-width: 80ch; line-height: 1.5; }

/* Websiteknop (wereldbol) + eigen iconen op de Stem-/volgen-knoppen. */
.icon-website { background: linear-gradient(180deg, #7fe3d6 0%, #1fa89a 55%, #0e6f66 100%); }
.icon-website svg { width: 17px; height: 17px; }
.vote-btn img.icon-btn-img { position: static; width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; }
.icon-follow img.icon-btn-img, .icon-sleep img.icon-btn-img { z-index: 1; }
.icon-follow.is-following img.icon-btn-img { box-shadow: 0 0 0 2px #1f9e1f inset; }
.icon-stem { background: linear-gradient(180deg, #6fe06f 0%, #1f9e1f 55%, #0b6e0b 100%); }

/* "Nu online" compact: één regel per bezoeker, max. 10 zichtbaar + "Toon alle". */
.lv-list { --lv-cols: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.4fr) 76px; }
.lv-head { padding: 0 12px 6px; }
.lv-body { gap: 0; border: 1px solid var(--border-hairline); border-radius: 10px; overflow: hidden; }
.lv-row { padding: 7px 12px; gap: 12px; border-radius: 0; border: 0; border-top: 1px solid var(--border-hairline); background: transparent; min-height: 40px; }
.lv-row:first-child { border-top: 0; }
.lv-row:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-hairline); }
.lv-row.is-user { background: rgba(57, 135, 229, 0.07); border-color: var(--border-hairline); }
.lv-who, .lv-net, .lv-page { flex-direction: row; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.lv-who .live-user-chip { padding: 1px 8px 1px 6px; font-size: 12px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-who .live-user-chip svg { width: 12px; height: 12px; }
.lv-who .live-user-role { font-size: 9px; }
.lv-guest { font-size: 12.5px; flex: none; }
.lv-ip { font-size: 11.5px; flex: none; }
.lv-isp { font-size: 13px; flex: 0 1 auto; min-width: 0; }
.lv-place { font-size: 12px; color: var(--text-muted); flex: none; gap: 4px; }
.lv-tag { font-size: 11px; padding: 1px 7px; flex: none; align-self: center; }
.lv-path { font-size: 11.5px; flex: 1 1 auto; min-width: 0; }
.lv-meta { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
.lv-ago { font-size: 11.5px; }
.lv-ban { padding: 4px; border-radius: 6px; opacity: 0.55; }
.lv-ban svg { width: 13px; height: 13px; }
.lv-more { display: block; margin: 10px auto 0; background: transparent; color: var(--accent); border: 1px solid var(--border-hairline); padding: 6px 14px; font-size: 12.5px; border-radius: 999px; }
.lv-more:hover { background: rgba(57, 135, 229, 0.12); opacity: 1; }
@media (max-width: 900px) {
  .lv-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who meta" "net page"; gap: 2px 10px; padding: 7px 10px; }
  .lv-page { justify-content: flex-end; }
  .lv-path { display: none; }
  .lv-ip { display: none; }
}
@media (max-width: 900px) {
  .lv-net { flex-wrap: nowrap; }
}
@media (max-width: 480px) {
  .lv-city { display: none; }
  .lv-page { flex: none; }
}

/* ── Wie volgt wie (dashboard.php, includes/follows.php) ── */
.follow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 24px; }
.follow-card { margin-bottom: 0; }
.follow-card h2 { font-size: 16px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.follow-h-icon { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; background: linear-gradient(180deg, #c3aefb 0%, #8b5cf6 55%, #6231c9 100%); color: #fff; }
.follow-h-icon svg { width: 14px; height: 14px; }
.follow-count { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(139, 92, 246, 0.2); color: #cdb9fc; }
.follow-lead { font-size: 12.5px; margin: 0 0 12px; line-height: 1.5; }
.follow-list, .follow-mine { list-style: none; margin: 0; padding: 0; }
.follow-station { padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.follow-station:first-child { border-top: 0; padding-top: 2px; }
.follow-station-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.follow-station-head a { font-weight: 700; font-size: 14px; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-station-head a:hover { text-decoration: underline; }
.follow-num { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.follow-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.follow-person { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; background: rgba(57, 135, 229, 0.15); border: 1px solid rgba(57, 135, 229, 0.35); color: #cfe2fb; }
.follow-person svg { width: 12px; height: 12px; }
.follow-person.is-guest { background: rgba(255, 255, 255, 0.05); border-color: var(--border-hairline); color: var(--text-muted); padding-left: 9px; }
.follow-empty { font-size: 12px; margin: 6px 0 0; }
.follow-mine li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-hairline); }
.follow-mine li:first-child { border-top: 0; padding-top: 2px; }
.follow-avatar { width: 36px; height: 36px; }
.follow-avatar .pc-avatar-inner svg { width: 16px; height: 16px; }
.follow-avatar .pc-live-dot { width: 10px; height: 10px; }
.follow-mine-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.follow-mine-info a { font-weight: 700; font-size: 14px; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-mine-info .muted { font-size: 12px; }
.follow-mine form { margin: 0; }
.follow-unfollow { padding: 5px 10px; font-size: 12px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 480px) { .follow-grid { grid-template-columns: 1fr; } .follow-unfollow { padding: 5px 8px; } }

/* ── Contactberichten beantwoorden (admin/contact_messages.php) ── */
.container.cm-page { max-width: 900px; }
.cm-list { display: flex; flex-direction: column; gap: 14px; }
.cm-item { margin: 0; padding: 18px 20px; border-left: 4px solid var(--status-warning); }
.cm-item.is-done { border-left-color: var(--status-good); }
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cm-from { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.cm-from strong { font-size: 15px; }
.cm-from a { font-size: 13px; }
.cm-account { display: inline-flex; align-items: center; gap: 5px; font-size: 12px !important; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; background: rgba(57, 135, 229, 0.15); border: 1px solid rgba(57, 135, 229, 0.35); color: #cfe2fb; text-decoration: none; }
.cm-account svg { width: 12px; height: 12px; }
.cm-meta { display: flex; align-items: center; gap: 10px; }
.cm-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cm-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.cm-status.is-new { background: rgba(250, 178, 25, 0.18); color: #ffd27a; }
.cm-status.is-done { background: rgba(12, 163, 12, 0.16); color: #86e086; }
.cm-subject { font-size: 15px; margin: 10px 0 6px; }
.cm-message { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 75ch; }
.cm-reply-sent { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(57, 135, 229, 0.08); border: 1px solid rgba(57, 135, 229, 0.25); font-size: 13.5px; line-height: 1.55; }
.cm-reply-sent-head { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 14px; }
.cm-actions > form { margin: 0; }
.cm-small { padding: 7px 12px; font-size: 12.5px; }
.cm-reply { flex: 1 1 100%; order: 3; }
.cm-reply[open] { order: 3; }
.cm-reply > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 13px; }
.cm-reply > summary::-webkit-details-marker { display: none; }
.cm-reply > summary svg { width: 15px; height: 15px; }
.cm-actions { flex-direction: row; }
.cm-actions .cm-reply:not([open]) { flex: 0 0 auto; order: 0; }
.cm-reply-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-hairline); }
.cm-reply-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.cm-reply-form input[type="text"], .cm-reply-form textarea { width: 100%; margin: 0; padding: 9px 11px; font-size: 14px; font-family: inherit; border: 1px solid var(--border-hairline); border-radius: 8px; background: var(--surface-2); color: var(--text-primary); color-scheme: dark; }
.cm-reply-form textarea { resize: vertical; line-height: 1.55; }
.cm-reply-form button[type="submit"] { align-self: flex-start; }
.cm-to { font-size: 13px; color: var(--text-secondary); }
.cm-templates, .cm-via { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; }
.cm-tpl { padding: 4px 10px; font-size: 12px; border-radius: 999px; }
.cm-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px; color: var(--text-primary) !important; }
.cm-check input { width: auto; margin: 0; }
.cm-hint { font-size: 12px; margin: 0; }

/* ── Berichten van de beheerder in het dashboard (pop-up + lijst) ── */
.um-card { max-width: 520px; text-align: left; padding: 22px 22px 18px; }
.um-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.um-icon { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; background: linear-gradient(180deg, #6bb3ff 0%, #2f6fd6 55%, #1e4f8f 100%); color: #fff; flex: none; }
.um-icon svg { width: 14px; height: 14px; }
.um-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(57, 135, 229, 0.2); color: #cfe2fb; }
.um-title { font-size: 19px; margin: 12px 0 8px; }
.um-body { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); max-height: 50vh; overflow-y: auto; }
.um-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }
.um-actions form { margin: 0; }
.um-reply { padding: 9px 14px; border-radius: 6px; text-decoration: none; font-size: 14px; }
.um-inbox { padding: 14px 18px; }
.um-inbox > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; list-style: none; }
.um-inbox > summary::-webkit-details-marker { display: none; }
.um-inbox .um-count { margin-left: 0; }
.um-list { list-style: none; margin: 12px 0 0; padding: 0; }
.um-list li { padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.um-list li.is-unread .um-list-head strong::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: 2px; }
.um-list-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.um-list-head .muted { font-size: 12px; white-space: nowrap; }
.um-list-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 4px; }
.um-admin-form { display: flex; flex-direction: column; gap: 10px; }
.um-admin-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.um-admin-form input, .um-admin-form textarea { width: 100%; margin: 0; padding: 9px 11px; font-size: 14px; font-family: inherit; border: 1px solid var(--border-hairline); border-radius: 8px; background: var(--surface-2); color: var(--text-primary); color-scheme: dark; }
.um-admin-form button { align-self: flex-start; }
.um-sent { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; }
.um-sent li { padding: 6px 0; border-top: 1px solid var(--border-hairline); }

/* ── Berichtenbox (berichten.php) + knop met live badge ── */
.nav-msgs { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.nav-msgs-icon { display: inline-flex; }
.nav-msgs-icon svg { width: 14px; height: 14px; }
.msg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); animation: msg-badge-pop 0.3s ease; }
.msg-badge[hidden] { display: none; }
@keyframes msg-badge-pop { from { transform: scale(0.4); } to { transform: scale(1); } }
.container.mb-page { max-width: 820px; }
.mb-new { padding: 14px 18px; }
.mb-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.mb-new > summary::-webkit-details-marker { display: none; }
.mb-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mb-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.mb-form input[type="text"], .mb-form textarea { width: 100%; margin: 0; padding: 10px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--border-hairline); border-radius: 10px; background: var(--surface-2); color: var(--text-primary); color-scheme: dark; resize: vertical; }
.mb-form button { align-self: flex-end; }
.mb-conv { padding: 0; overflow: hidden; }
.mb-conv.is-unread { border-color: rgba(57, 135, 229, 0.55); }
.mb-conv-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.mb-conv-head::-webkit-details-marker { display: none; }
.mb-conv[open] .mb-conv-head { border-bottom: 1px solid var(--border-hairline); }
.mb-conv-title { font-weight: 700; font-size: 15px; flex: 1 1 200px; min-width: 0; }
.mb-conv-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mb-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--text-secondary); white-space: nowrap; }
.mb-tag-new { background: rgba(229, 72, 77, 0.2); color: #ffb3b5; }
.mb-thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 6px; }
.mb-bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; color: var(--text-primary); }
.mb-bubble-head { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.mb-bubble.is-them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border-hairline); border-bottom-left-radius: 4px; }
.mb-bubble.is-me { align-self: flex-end; background: rgba(57, 135, 229, 0.16); border: 1px solid rgba(57, 135, 229, 0.35); border-bottom-right-radius: 4px; }
.mb-reply { padding: 6px 18px 16px; margin-top: 0; }
.cm-thread { padding: 12px 0 0; }
.cm-started { font-size: 13px; margin: 4px 0 0; }
@media (max-width: 620px) { .mb-bubble { max-width: 94%; } .nav-msgs { order: -1; } }
.nav-btn > .msg-badge { margin-left: 6px; }
.nav-msgs > .msg-badge { margin-left: 0; }

/* Eigen slaaptimer-icoon: in de zwevende speler blijft het kleine maantje
   (zelfde stijl als de knoppen ernaast); op de grote knop past het plaatje
   zich aan als de resterende tijd erbij komt te staan. */
.np-popout img.icon-btn-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.icon-btn.sleep-btn.is-active img.icon-btn-img { position: static; width: 20px; height: 20px; border-radius: 6px; flex: none; }

/* admin/user_detail.php — kop van de Streams-kaart met "+ Stream toevoegen"
   (maakt via manage/add?for_user=ID een stream aan namens deze gebruiker). */
.ud-streams-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ud-streams-head .btn-sm { padding: 6px 12px; font-size: 13px; }

/* admin.php — "Alle streams": duidelijke lijst in een kaart i.p.v. een brede
   tabel van 11 kolommen die afgesneden werd ("Onl"). Per stream één rij:
   naam + status + publiek/privé | cijfers | knoppen. */
.as-card { margin-top: 16px; }
.as-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.as-filter { margin-bottom: 12px; }
.as-list { display: flex; flex-direction: column; gap: 8px; }
.as-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--text-muted);
}
.as-row.is-online { border-left-color: var(--status-good); }
.as-row.is-offline { border-left-color: var(--status-critical); }
.as-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.as-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.as-name { font-weight: 700; font-size: 15px; color: var(--text-primary); text-decoration: none; overflow-wrap: anywhere; }
a.as-name:hover { text-decoration: underline; }
.as-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.as-row.is-online .as-state { color: #6fdc6f; }
.as-row.is-offline .as-state { color: #ff8a80; }
.as-state .status-dot { margin: 0; }
.as-type { font-size: 11px; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--border-hairline); border-radius: 4px; padding: 1px 5px; }
.as-url { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.as-owner { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.as-owner:hover { text-decoration: underline; }
.as-email { color: var(--text-muted); font-size: 11.5px; margin-right: 4px; }
.as-meta .badge { font-size: 11px; padding: 1px 6px; }
.as-stats { display: grid; grid-template-columns: repeat(4, auto); column-gap: 12px; row-gap: 2px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-stats span { display: inline-flex; align-items: center; gap: 4px; }
.as-stats svg { width: 14px; height: 14px; opacity: .8; }
.as-stats .as-date { grid-column: 1 / -1; font-size: 11px; color: var(--text-muted); }
.as-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.as-actions form { margin: 0; }
.as-btn { display: block; width: 100%; text-align: center; padding: 5px 10px; font-size: 12px; font-weight: 600; font-family: inherit; line-height: 1.4; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) {
  .as-row { grid-template-columns: minmax(0, 1fr) auto; }
  .as-stats { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(5, auto); justify-content: start; }
  .as-stats .as-date { grid-column: auto; }
  .as-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 520px) {
  .as-row { grid-template-columns: 1fr; }
  .as-actions { grid-column: 1; grid-row: 3; flex-direction: row; }
  .as-actions > * { flex: 1; }
  .as-stats { grid-template-columns: repeat(4, auto); }
  .as-stats .as-date { grid-column: 1 / -1; }
  .as-email { display: none; }
}

/* manage/votes.php — generator voor luister-iconen (player_icons.js). */
.pi-gen { display: flex; flex-direction: column; gap: 10px; }
.pi-group { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.pi-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.pi-group .theme-picker { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pi-group .theme-chip { padding: 5px 11px; }
.pi-size { display: flex; align-items: center; gap: 10px; max-width: 320px; }
.pi-size input[type=range] { flex: 1; accent-color: var(--accent); }
.pi-size output { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 40px; }
.pi-custom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; }
.pi-custom-grid input { font-size: 12px; padding: 6px 8px; width: 100%; box-sizing: border-box; }
.pi-custom-grid input.is-invalid { border-color: var(--status-critical); }
.pi-up { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border-hairline); border-radius: 10px; background: rgba(255, 255, 255, 0.03); transition: opacity .15s ease; }
.pi-up.is-busy { opacity: .55; pointer-events: none; }
.pi-up-thumb { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  background: repeating-conic-gradient(rgba(255,255,255,.06) 0 25%, transparent 0 50%) 0 0 / 12px 12px; border: 1px dashed var(--border-hairline); }
.pi-up-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pi-up-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pi-up-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pi-up-actions { display: flex; align-items: center; gap: 10px; }
.pi-up-btn { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.pi-up-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pi-up-del[hidden] { display: none; }
.pi-preview { margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-hairline); }
.pi-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; font-size: 12px; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--border-hairline); }
.pi-bg-toggle { display: inline-flex; border: 1px solid var(--border-hairline); border-radius: 999px; overflow: hidden; }
.pi-bg-toggle button { background: transparent; color: var(--text-secondary); border: 0; border-radius: 0; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.pi-bg-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.pi-stage { padding: 22px 16px; min-height: 64px; transition: background .2s ease, color .2s ease; }
.pi-preview[data-bg="donker"] .pi-stage { background: #0d0f12; color: #e8e8e6; }
.pi-preview[data-bg="licht"] .pi-stage { background: #f6f5f1; color: #1c1c1a; }
#pi-accent-wrap[hidden] { display: none; }
@media (max-width: 520px) {
  .pi-group { grid-template-columns: 1fr; gap: 4px; }
}
.pi-dot-clear { background: repeating-conic-gradient(#8a8a86 0 25%, #d8d8d4 0 50%) 0 0 / 8px 8px; }

/* account.php — verplicht profiel (requireCompleteProfile() in includes/auth.php) */
.profile-gate { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(229, 163, 57, 0.12); border: 1px solid rgba(229, 163, 57, 0.45); color: var(--text-primary); font-size: 14px; }
.profile-gate strong { color: var(--status-warning); font-size: 15px; }

/* berichten.php — compacte Berichtenbox: één kaart met een inbox-lijst
   (één regel per gesprek), gesprek klapt in de lijst open. */
.container.mb-page { max-width: 760px; }
.mb-box { padding: 0; overflow: hidden; }
.mb-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; }
.mb-box-title { margin: 0; font-size: 18px; }
.mb-box-sub { margin: 2px 0 0; font-size: 12.5px; }
.mb-new-toggle { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.mb-new-form { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-hairline); background: rgba(255, 255, 255, 0.02); gap: 8px; }
.mb-new-form[hidden] { display: none; }
.mb-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mb-form-actions button { align-self: auto; padding: 7px 14px; font-size: 13px; }
.mb-empty { margin: 0; padding: 18px 16px; }
.mb-list { display: flex; flex-direction: column; }
.mb-item { border-bottom: 1px solid var(--border-hairline); }
.mb-item:last-child { border-bottom: 0; }
.mb-row { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 16px; transition: background .12s ease; }
.mb-row::-webkit-details-marker { display: none; }
.mb-row:hover { background: rgba(255, 255, 255, 0.035); }
.mb-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mb-item[open] > .mb-row { background: rgba(57, 135, 229, 0.08); }
.mb-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: linear-gradient(145deg, #4b9bf0, #2563c9); color: #fff; }
.mb-avatar.is-me { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-hairline); }
.mb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mb-row-subject { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-item.is-unread .mb-row-subject { font-weight: 800; }
.mb-row-count { flex: none; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mb-row-preview { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-item.is-unread .mb-row-preview { color: var(--text-secondary); }
.mb-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mb-row-date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mb-item.is-unread .mb-row-date { color: var(--accent); font-weight: 700; }
.mb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(57, 135, 229, 0.22); }
.mb-state { font-size: 10.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.mb-open { border-top: 1px solid var(--border-hairline); background: rgba(0, 0, 0, 0.12); }
.mb-open .mb-thread { gap: 6px; padding: 12px 16px; max-height: 360px; overflow-y: auto; }
.mb-open .mb-bubble { padding: 7px 11px; font-size: 13.5px; line-height: 1.45; border-radius: 12px; }
.mb-open .mb-bubble-head { font-size: 11px; margin-bottom: 2px; }
.mb-reply { display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px 12px; margin: 0; }
.mb-reply textarea { flex: 1; min-height: 38px; max-height: 220px; margin: 0; padding: 9px 12px; font-size: 13.5px; font-family: inherit; line-height: 1.4;
  border: 1px solid var(--border-hairline); border-radius: 18px; background: var(--surface-2); color: var(--text-primary); resize: none; overflow-y: auto; color-scheme: dark; }
.mb-send { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.mb-send svg { width: 18px; height: 18px; }
.mb-new-form input[type="text"], .mb-new-form textarea { padding: 8px 12px; font-size: 13.5px; }
@media (max-width: 520px) {
  .mb-box-head { padding: 12px; }
  .mb-box-sub { display: none; }
  .mb-row { padding: 10px 12px; gap: 10px; }
  .mb-avatar { flex-basis: 30px; width: 30px; height: 30px; font-size: 13px; }
  .mb-state { display: none; }
  .mb-open .mb-thread, .mb-reply, .mb-new-form { padding-left: 12px; padding-right: 12px; }
  .mb-open .mb-bubble { max-width: 92%; }
}
/* De help-pagina-stijl voor .card details niet op de berichtenlijst toepassen. */
.mb-box details.mb-item { border-top: 0; padding-top: 0; margin-top: 0; }
.mb-box details.mb-item[open] > summary { margin-bottom: 0; }
.mb-row-preview { font-weight: 400; }

/* admin/contact_messages.php — compacte inbox (zelfde lijst als de Berichtenbox). */
.cm-page.mb-page { max-width: 860px; }
.cm-page .notice-warning { margin-bottom: 12px; }
.mb-box .cm-item { margin: 0; padding: 0; border-left: 3px solid transparent; }
.mb-box .cm-item.is-unread { border-left-color: var(--status-warning); }
.mb-avatar.is-alert { background: linear-gradient(145deg, #f5b544, #d9822b); color: #1b1203; }
.mb-row-name { flex: none; font-size: 13px; font-weight: 700; color: var(--text-secondary); max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row-name::after { content: "·"; margin-left: 6px; color: var(--text-muted); }
.cm-pill { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.cm-pill.is-new { background: rgba(250, 178, 25, 0.18); color: #ffd27a; }
.cm-pill.is-reply { background: rgba(57, 135, 229, 0.22); color: #9cc6ff; }
.cm-pill.is-done { background: rgba(12, 163, 12, 0.14); color: #86e086; }
.cm-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 16px 0; font-size: 12.5px; }
.cm-meta-line .cm-account { padding: 1px 8px 1px 6px; }
.cm-started { margin: 0; font-size: 12.5px; }
.cm-reply-form.cm-compact { margin: 0 16px 8px; padding: 10px; gap: 8px; }
.cm-compact .cm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-compact .cm-row input[type="text"] { flex: 1 1 220px; width: auto; padding: 7px 10px; font-size: 13px; }
.cm-compact textarea { font-size: 13.5px; padding: 8px 10px; }
.cm-compact .cm-bottom { justify-content: space-between; }
.cm-compact .cm-send { align-self: auto !important; padding: 7px 16px; font-size: 13px; }
.cm-compact .cm-check { font-size: 12.5px; }
.mb-box .cm-actions { display: flex; gap: 14px; justify-content: flex-end; margin: 0; padding: 0 16px 10px; }
.mb-box .cm-actions .btn-link { font-size: 12px; }
.mb-box .cm-actions .cm-del { color: #ff8a80; }
@media (max-width: 520px) {
  .mb-row-name { max-width: 45%; }
  .cm-reply-form.cm-compact { margin: 0 12px 8px; }
  .cm-meta-line, .mb-box .cm-actions { padding-left: 12px; padding-right: 12px; }
}

/* Inloggen / registreren / wachtwoord vergeten / resetten — compacter en
   netter. .auth-narrow = smalle kaart (login, vergeten, reset);
   .auth-split = registreren met formulier + "wat je krijgt" ernaast. */
.auth-card.auth-narrow, .auth-card.auth-split { margin: 40px auto; padding: 28px 30px; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.auth-card.auth-narrow { width: min(100%, 420px); }
.auth-card.auth-split { width: min(100%, 900px); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; overflow: hidden; }
.auth-split .auth-main { padding: 28px 30px; }
.auth-narrow .auth-brand, .auth-split .auth-brand { margin-bottom: 12px; }
.auth-title { margin: 0 0 4px; font-size: 21px; text-align: center; text-wrap: balance; }
.auth-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--text-secondary); text-align: center; text-wrap: balance; }
.auth-split .auth-title, .auth-split .auth-sub { text-align: left; }
.auth-narrow .field, .auth-split .field { margin-bottom: 12px; }
.auth-narrow .field label, .auth-split .field label { font-size: 13px; margin-bottom: 5px; }
.auth-narrow .field input[type="text"], .auth-narrow .field input[type="email"], .auth-narrow .field input[type="password"],
.auth-split .field input[type="text"], .auth-split .field input[type="email"], .auth-split .field input[type="password"] {
  padding: 11px 13px; font-size: 15px; border-radius: 10px;
}
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auth-label-row a { font-size: 12.5px; }
.auth-submit { width: 100%; padding: 12px 18px !important; font-size: 15px !important; border-radius: 10px; margin-top: 4px; }
.auth-switch { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.auth-fine { margin: 10px 0 0; font-size: 11.5px; color: var(--text-muted); text-align: center; }
.auth-check { margin: 2px 0 12px !important; font-size: 12.5px !important; color: var(--text-secondary); align-items: flex-start !important; flex-wrap: nowrap !important; }
.auth-check input { margin-top: 2px; flex: none; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.auth-grid .password-strength-label { margin: 4px 0 0; font-size: 11.5px; }
.auth-aside { padding: 28px 26px; background:
    radial-gradient(120% 80% at 100% 0%, rgba(124, 58, 237, 0.28), transparent 60%),
    linear-gradient(160deg, rgba(57, 135, 229, 0.22), rgba(12, 18, 34, 0.6));
  border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; }
.auth-aside h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; text-wrap: balance; }
.auth-aside > p { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); }
.auth-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-perks li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.auth-perks strong { display: block; color: var(--text-primary); font-size: 13.5px; }
.auth-perk-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #4b9bf0, #6d3fe0); box-shadow: 0 4px 12px rgba(57, 135, 229, 0.3); }
.auth-perk-ic svg { width: 17px; height: 17px; }
@media (max-width: 820px) {
  .auth-card.auth-split { grid-template-columns: 1fr; }
  .auth-aside { border-left: 0; border-top: 1px solid var(--border-hairline); order: 2; }
}
@media (max-width: 520px) {
  .auth-card.auth-narrow, .auth-card.auth-split { margin: 16px auto; }
  .auth-card.auth-narrow, .auth-split .auth-main { padding: 22px 18px; }
  .auth-aside { padding: 22px 18px; }
  .auth-grid { grid-template-columns: 1fr; }
}

/* register.php — optioneel meteen de eerste stream toevoegen. */
.auth-stream-box { margin: 2px 0 12px; border: 1px dashed var(--border-hairline); border-radius: 12px; padding: 10px 12px; transition: border-color .15s ease, background .15s ease; }
.auth-stream-box.is-open { border-style: solid; border-color: rgba(57, 135, 229, 0.45); background: rgba(57, 135, 229, 0.06); }
.auth-stream-toggle { margin: 0 !important; color: var(--text-primary) !important; font-size: 13.5px !important; }
.auth-stream { margin-top: 12px; }
.auth-stream[hidden] { display: none; }
.auth-stream select { width: 100%; padding: 11px 12px; font-size: 14.5px; border-radius: 10px; border: 1px solid var(--border-hairline); background: var(--surface-2); color: var(--text-primary); color-scheme: dark; }
.auth-hint { margin: 5px 0 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.auth-suggest { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.auth-suggest p { margin: 0; font-size: 12.5px; color: #86e086; }
.auth-suggest-use { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px;
  background: rgba(12, 163, 12, 0.08); border: 1px solid rgba(12, 163, 12, 0.35); color: var(--text-primary); font-weight: 400; }
.auth-suggest-use code { font-size: 12px; word-break: break-all; }
.auth-suggest-use span { font-size: 11px; color: var(--text-muted); }
.auth-suggest-use.is-picked { background: rgba(12, 163, 12, 0.2); border-color: #0ca30c; }

/* "Test mijn stream-URL" (streamUrlSuggestionsHtml() in includes/stream_suggest.php)
   — duidelijke knop i.p.v. een klein linkje. */
.url-suggest-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.url-suggest .url-suggest-find { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  border-radius: 999px; border: 1px solid rgba(57, 135, 229, 0.55); background: rgba(57, 135, 229, 0.14); color: #cfe2fb; cursor: pointer; }
.url-suggest .url-suggest-find:hover { background: rgba(57, 135, 229, 0.24); opacity: 1; }
.url-suggest .url-suggest-find:disabled { opacity: .6; cursor: progress; }
.url-suggest .url-suggest-find svg { width: 15px; height: 15px; }
.url-suggest-cta-text { font-size: 12px; color: var(--text-muted); }

/* hitlijst.php — beheer: nummer uit de hitlijst halen. */
.hl-hide { display: inline; margin: 0; }
.hl-hide-btn { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid rgba(229, 72, 77, 0.45); color: #ff8a80; font-size: 16px; line-height: 1; }
.hl-hide-btn:hover { background: rgba(229, 72, 77, 0.15); opacity: 1; }
.hl-hidden-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.hl-hidden-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hl-hidden-list form { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Design-refresh 2026 — strakke, vlakke "glas"-stijl voor de koppen van
   public.php, dashboard.php en het beheer. Staat bewust onderaan, zodat
   hij de oudere glanzende (3D) varianten hierboven overschrijft zonder
   die regels te hoeven herschrijven. Kleuren volgen --accent (Thema).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --glass-bg: rgba(11, 16, 29, 0.72);
  --glass-bg-strong: rgba(11, 16, 29, 0.86);
  --glass-line: rgba(255, 255, 255, 0.09);
  --glass-line-strong: rgba(255, 255, 255, 0.16);
  --ink-soft: #b9c5dc;
  --accent-2: #7c5cff;
}

/* Achtergrondfoto iets meer gedimd: de kaarten/strips staan er rustiger op
   en het watermerk in de foto concurreert niet meer met de tekst. */
body.page-bg-banner {
  background:
    linear-gradient(180deg, rgba(7, 10, 19, 0.8) 0%, rgba(7, 10, 19, 0.86) 55%, rgba(7, 10, 19, 0.9) 100%),
    url('img/header-banner.jpg') center top / cover no-repeat fixed;
}

/* ── Knoppen in de kop: vlak, gelijke hoogte, geen glans ── */
.nav-btn {
  height: 36px;
  padding: 0 14px;
  gap: 7px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-line);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-btn::after { display: none; }
.nav-btn:hover { transform: none; filter: none; color: #fff; background: rgba(255, 255, 255, 0.1); border-color: var(--glass-line-strong); }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-btn-ghost { background: rgba(255, 255, 255, 0.05); color: var(--ink-soft); border-color: var(--glass-line); }
.nav-btn-primary,
.nav-btn-primary:hover {
  color: #fff;
  border-color: transparent;
  background: var(--accent);
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--accent-2)) 100%);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nav-btn-primary:hover { filter: brightness(1.08); }
.nav-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-btn-icon { width: 36px; padding: 0; }
.nav-msgs-icon { display: inline-flex; }
.nav-msgs-icon svg { width: 15px; height: 15px; }
.header-auth { gap: 6px; }

/* ── De kop zelf: één glazen balk ── */
body.page-bg-banner .public-header,
.public-header {
  padding: 14px 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
.public-header::before,
.public-header::after { display: none; }
.public-header-bar {
  height: 2px;
  bottom: -1px;
  opacity: 0.85;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 18%, var(--accent-2) 50%, var(--status-good) 82%, transparent 100%);
}
.public-header-inner { gap: 12px 18px; }
.public-header .brand-mark-lg .brand-mark-text { font-size: 26px; }
.public-header .brand-mark-lg .brand-mark-icon { width: 44px !important; height: 44px !important; }
.public-header .brand-mark-tagline { font-size: 15px; margin-left: 56px; margin-top: -2px; }

/* ── Statistiekjes: vlakke glazen tegels met een getint icoon ── */
.public-stats { gap: 8px; }
.stat-chip {
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
a.stat-chip { transition: border-color 0.15s ease, background 0.15s ease; }
a.stat-chip:hover { transform: none; background: var(--glass-bg-strong); }
.stat-chip strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-chip span { font-size: 11px; color: var(--text-muted); }
.stat-icon,
.feature-strip-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 0;
  box-shadow: none;
  --tint: 57, 135, 229;
  background: rgba(var(--tint), 0.16) !important;
  color: rgb(var(--tint));
  box-shadow: inset 0 0 0 1px rgba(var(--tint), 0.28);
}
.stat-icon::after,
.feature-strip-icon::after { display: none; }
.stat-icon svg,
.feature-strip-icon svg { width: 16px; height: 16px; filter: none; }
.stat-chip:nth-child(1) .stat-icon { --tint: 96, 165, 250; }
.stat-chip:nth-child(2) .stat-icon { --tint: 74, 222, 128; }
.stat-chip:nth-child(3) .stat-icon { --tint: 167, 139, 250; }
.stat-chip:nth-child(4) .stat-icon { --tint: 251, 146, 60; }
.stat-chip:nth-child(5) .stat-icon { --tint: 45, 212, 191; }
.stat-chip:nth-child(6) .stat-icon { --tint: 244, 114, 182; }
.stat-chip:nth-child(7) .stat-icon { --tint: 250, 204, 21; }
.stat-chip:nth-child(8) .stat-icon { --tint: 248, 113, 113; }
.stat-chip .stat-icon-sotd { --tint: 250, 204, 21; }
.stat-chip-sotd { border-color: rgba(250, 204, 21, 0.3); }
.stat-chip-sotd:hover { border-color: rgba(250, 204, 21, 0.55); }

/* ── Feature-strip op public.php: dichte glazen balk, goed leesbaar ── */
.feature-strip {
  max-width: 1060px;
  margin-top: 20px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.9);
}
.feature-strip-item {
  justify-content: flex-start;
  gap: 11px;
  padding: 12px 16px;
  border-right-color: var(--glass-line);
}
.feature-strip-item:hover { background: rgba(255, 255, 255, 0.04); }
.feature-strip-icon { width: 34px; height: 34px; }
.feature-strip-icon-blue   { --tint: 96, 165, 250; }
.feature-strip-icon-orange { --tint: 251, 146, 60; }
.feature-strip-icon-gold   { --tint: 250, 204, 21; }
.feature-strip-icon-purple { --tint: 167, 139, 250; }
.feature-strip-title { font-size: 13.5px; font-weight: 700; }
.feature-strip-sub { font-size: 11.5px; color: #93a0b8; }
.public-hero { padding-top: 6px; width: 100%; box-sizing: border-box; }
.feature-strip { width: 100%; box-sizing: border-box; }

/* ── Ingelogde koppen (dashboard + beheer) ── */
.app-header { padding: 12px 20px; overflow: visible; }
.app-header .public-header-inner { gap: 10px 16px; }

/* Beheer: logo + snelkoppelingen op rij 1, één tabbalk op rij 2. */
.header-auth.adm-nav { display: contents; }
.adm-util { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.adm-tabs {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--glass-line);
}
.adm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #a7b3ca;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.adm-tab::-webkit-details-marker { display: none; }
.adm-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.adm-tab.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.adm-tab .msg-badge { height: 17px; min-width: 17px; font-size: 10.5px; box-shadow: none; }
.adm-drop { position: relative; }
.adm-drop-cur { color: #cfe0ff; font-weight: 500; }
.adm-chev { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s ease; }
.adm-drop[open] > .adm-tab { color: #fff; background: rgba(255, 255, 255, 0.08); }
.adm-drop[open] .adm-chev { transform: rotate(180deg); }
.adm-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  background: #121829;
  border: 1px solid var(--glass-line-strong);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
  animation: adm-menu-in 0.12s ease;
}
@keyframes adm-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.adm-menu-item {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #c7d1e4;
  text-decoration: none;
}
.adm-menu-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.adm-menu-item.is-active { color: #fff; background: color-mix(in srgb, var(--accent) 22%, transparent); }

@media (max-width: 720px) {
  .public-header, body.page-bg-banner .public-header { padding: 12px 14px; }
  .public-header .brand-mark-lg .brand-mark-text { font-size: 22px; }
  .public-header .brand-mark-lg .brand-mark-icon { width: 38px !important; height: 38px !important; }
  .public-header .brand-mark-tagline { margin-left: 48px; font-size: 14px; }
  .public-stats { width: 100%; }
  .stat-chip { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .stat-chip > div { min-width: 0; }
  .stat-chip > div > span { overflow: hidden; text-overflow: ellipsis; display: block; }
  .feature-strip { width: 100%; }
  /* Dashboard-kop op de telefoon: één nette, veegbare rij knoppen i.p.v.
     drie rijen onder elkaar. */
  .app-header .header-auth:not(.adm-nav) {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    padding-right: 24px;
  }
  .app-header .header-auth:not(.adm-nav)::-webkit-scrollbar { display: none; }
  .app-header .header-auth:not(.adm-nav) > * { flex-shrink: 0; }
  .app-header .nav-btn { height: 34px; padding: 0 11px; font-size: 12.5px; }
  .app-header .nav-btn-icon { width: 34px; padding: 0; }
  .adm-tabs { gap: 2px; }
  .adm-tab { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .adm-drop-cur { display: none; }
  .adm-menu { min-width: 180px; }
  .adm-drop:last-child .adm-menu { left: auto; right: 0; }
  .feature-strip-item { padding: 10px 14px; }
}
/* KPI-tegels (beheer/statistieken): zelfde getinte iconen als de chips. */
.card-accent-blue    .kpi-block-icon { --tint: 96, 165, 250; }
.card-accent-purple  .kpi-block-icon { --tint: 167, 139, 250; }
.card-accent-teal    .kpi-block-icon { --tint: 45, 212, 191; }
.card-accent-orange  .kpi-block-icon { --tint: 251, 146, 60; }
.card-accent-pink    .kpi-block-icon { --tint: 244, 114, 182; }
.card-accent-amber   .kpi-block-icon { --tint: 250, 204, 21; }
.card-accent-green   .kpi-block-icon { --tint: 74, 222, 128; }
.card-accent-discord .kpi-block-icon { --tint: 129, 140, 248; }
/* Statistiekjes op dashboard/beheer in een strak raster (gelijke breedtes,
   rijen lijnen uit) en een dichtere glaslaag i.p.v. losse pillen. */
.admin-intro > .public-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.admin-intro > .public-stats .stat-chip,
.app-header ~ * .stat-chip { background: var(--glass-bg-strong); }
@media (max-width: 720px) {
  .admin-intro > .public-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Feature-strip als raster: 4 naast elkaar, 2×2 op tablet, 1 kolom op de
   telefoon — zo loopt de tekst nooit meer over de rand. Even breed als de
   inhoud eronder. */
.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.feature-strip-item { border-right: 1px solid var(--glass-line); border-bottom: 0; min-width: 0; }
.feature-strip-item:last-child { border-right: 0; }
@media (max-width: 980px) {
  .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-strip-item:nth-child(2n) { border-right: 0; }
  .feature-strip-item:nth-child(-n+2) { border-bottom: 1px solid var(--glass-line); }
}
@media (max-width: 620px) {
  .feature-strip { grid-template-columns: minmax(0, 1fr); }
  .feature-strip-item { border-right: 0; border-bottom: 1px solid var(--glass-line); }
  .feature-strip-item:last-child { border-bottom: 0; }
}

/* ── Ingelogde pagina's (dashboard + beheer): breder op desktop, en overal
   precies dezelfde kopbreedte zodat het menu niet verspringt. ── */
:root { --app-max: 1440px; }
.app-header .public-header-inner,
body:has(.app-header) .admin-intro { max-width: var(--app-max); }
body:has(.app-header) .container:not(.cm-page):not(.mb-page) { max-width: var(--app-max); }
/* Vangnet: ook als een beheerpagina de klasse "adm-nav" (nog) mist, komt
   de tabbalk op zijn eigen volle rij te staan. */
.header-auth:has(> .adm-tabs) { display: contents; }
/* Statistiekjes: beheer = vaste kolommen die over beide rijen uitlijnen;
   dashboard = één rij die de volle breedte vult. */
.admin-intro > .public-stats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
body:not(:has(.adm-tabs)) .admin-intro > .public-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 720px) {
  .admin-intro > .public-stats,
  body:not(:has(.adm-tabs)) .admin-intro > .public-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Ook de smallere ingelogde pagina's op desktop breed ──
   (stream toevoegen/bewerken, Instellingen-pagina's, account, berichten,
   programmering, help). Formulieren krijgen op brede schermen twee
   kolommen, zodat invoervelden niet absurd lang worden. */
body:has(.app-header) .container[style*="max-width"],
body:has(.app-header) .container > .card[style*="max-width"],
body:has(.app-header) .container.mb-page,
body:has(.app-header) .container.cm-page { max-width: var(--app-max) !important; }
.mb-bubble { max-width: min(85%, 780px); }
@media (min-width: 1100px) {
  .form-cols { column-count: 2; column-gap: 44px; }
  .form-cols > * { break-inside: avoid; }
  .form-cols > h2, .form-cols > h3 { break-after: avoid; }
  .form-cols > button[type="submit"],
  .form-cols > :has(> button[type="submit"]),
  .form-cols > :has(> button[type="submit"]) ~ * { column-span: all; }
  .form-cols > button[type="submit"],
  .form-cols > :has(> button[type="submit"]) { margin-top: 8px; }
  /* Account: kaarten twee aan twee. */
  .container.acc-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .container.acc-page > * { margin: 0; min-width: 0; }
  .container.acc-page > :not(.card) { grid-column: 1 / -1; }
}

/* ── Vrolijkere knoppen ín de pagina (niet in de kop) ──
   Getint glas in de kleur van de knop: gekleurd icoon, lichte tekst, een
   zachte gloed bij hover. Kleur per knop via btn-tint-*; standaard blauw. */
.nav-btn-ghost:not(.public-header *),
.btn-secondary:not(.public-header *) {
  --tint: 96, 165, 250;
  background: rgba(var(--tint), 0.13);
  border: 1px solid rgba(var(--tint), 0.38);
  color: color-mix(in srgb, rgb(var(--tint)) 45%, #fff);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.nav-btn-ghost:not(.public-header *) svg,
.btn-secondary:not(.public-header *) svg { color: rgb(var(--tint)); }
.nav-btn-ghost:not(.public-header *):hover,
.btn-secondary:not(.public-header *):hover {
  opacity: 1;
  color: #fff;
  background: rgba(var(--tint), 0.24);
  border-color: rgba(var(--tint), 0.6);
  box-shadow: 0 6px 18px -8px rgba(var(--tint), 0.7);
  transform: translateY(-1px);
}
.btn-secondary.share-hero-link { display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; }
.btn-secondary.share-hero-link svg { width: 15px; height: 15px; }
.btn-tint-pink   { --tint: 244, 114, 182 !important; }
.btn-tint-teal   { --tint: 45, 212, 191 !important; }
.btn-tint-purple { --tint: 167, 139, 250 !important; }
.btn-tint-green  { --tint: 74, 222, 128 !important; }
.btn-tint-orange { --tint: 251, 146, 60 !important; }

/* "Stemmen, hits & HTML-widgets": warme oranje knop, vlak maar opvallend. */
.btn-megaphone,
.btn-megaphone:hover,
.nav-btn.btn-megaphone,
.nav-btn.btn-megaphone:hover {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  box-shadow: 0 6px 18px -8px rgba(249, 115, 22, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 1px rgba(120, 53, 15, 0.45);
}
.btn-megaphone:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-megaphone svg { color: #fff; filter: none; }

/* Invoervelden die nog geen stijl hadden (url/tel/number). */
.field input[type="url"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Twee-koloms formulieren: vinkje + uitlegregel netjes onder elkaar. */
.form-cols > .checkbox-field { display: flex; margin-bottom: 4px !important; }
.form-cols > .checkbox-field + p.muted { margin-top: 0 !important; }

/* Hits in/uit: groen ▲+ en rood ▼− (ICON_ARROW_IN / ICON_ARROW_OUT).
   In een gekleurde icoontegel volgen ze gewoon de tegelkleur. */
svg.ico-hit { width: 1.05em; height: 1.05em; vertical-align: -0.14em; }
svg.ico-hit-in  { color: #22c55e; }
svg.ico-hit-out { color: #ef4444; }
.stat-icon svg.ico-hit, .kpi-block-icon svg.ico-hit, .feature-strip-icon svg.ico-hit { color: inherit; width: 16px; height: 16px; vertical-align: 0; }
svg.ico-hit:not(.stat-icon *):not(.kpi-block-icon *):not(.feature-strip-icon *) { width: 15px !important; height: 15px !important; }

/* Programmering-knop op de stationpagina → scrolt naar #programmering. */
.sched-card { scroll-margin-top: 110px; }
.sched-card.is-flash { animation: sched-flash 1.6s ease; }
@keyframes sched-flash {
  0%, 30% { box-shadow: 0 0 0 2px rgba(229, 72, 154, 0.85), 0 0 30px -4px rgba(229, 72, 154, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 154, 0); }
}

/* "Deel … als afbeelding": vrolijke knop i.p.v. een klein grijs linkje. */
.tt-share,
.share-img-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 12px;
  margin-top: 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  box-shadow: 0 8px 20px -10px rgba(236, 72, 153, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease;
}
.tt-share svg,
.share-img-btn svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex: none;
}
.tt-share:hover,
.share-img-btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(236, 72, 153, 1), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.share-img-btn.share-top-btn { margin-top: 0; }

/* ══════════ Stationpagina: knoppenbalk + eigen pagina's ══════════
   Stats / Studiocam / Programmering / Onze deejays (station_page.php). */
.station-top { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.station-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.station-tab {
  --tint: 96, 165, 250;
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 6px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: color-mix(in srgb, rgb(var(--tint)) 40%, #fff);
  background: rgba(var(--tint), 0.12);
  border: 1px solid rgba(var(--tint), 0.35);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.station-tab-ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--tint)) 0%, color-mix(in srgb, rgb(var(--tint)) 60%, #000) 100%);
  box-shadow: 0 4px 10px -4px rgba(var(--tint), 0.9);
}
.station-tab-ico svg { width: 15px; height: 15px; }
.station-tab:hover { color: #fff; background: rgba(var(--tint), 0.22); border-color: rgba(var(--tint), 0.6); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(var(--tint), 0.9); }
.station-tab.is-active { color: #fff; background: linear-gradient(135deg, rgba(var(--tint), 0.55), rgba(var(--tint), 0.28)); border-color: rgba(var(--tint), 0.8); }
.tab-stats { --tint: 45, 212, 191; }
.tab-cam   { --tint: 248, 113, 113; }
.tab-sched { --tint: 236, 72, 153; }
.tab-djs   { --tint: 167, 139, 250; }
.station-tab-live { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); animation: tab-live 1.8s infinite; }
@keyframes tab-live { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.tab-cam { padding-right: 20px; }
@media (max-width: 620px) {
  .station-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .station-tab { justify-content: flex-start; }
}

.station-more-stats { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 18px; font-size: 13px; font-weight: 600; color: #5eead4; text-decoration: none; }
.station-more-stats svg { width: 15px; height: 15px; }
.station-more-stats:hover { color: #fff; }

/* Kop op de subpagina's */
.station-sub-head { text-decoration: none; color: inherit; margin: 0; }
.station-sub-head:hover h1 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.station-sub-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #93a0b8; }
.station-sub-back { font-size: 12px; color: #93a0b8; }
.station-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.station-card-head h2 { margin: 0; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-hairline); }
.seg-btn { background: none; border: 0; box-shadow: none; color: #a7b3ca; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.seg-btn.is-active { background: color-mix(in srgb, var(--accent) 28%, transparent); color: #fff; }
.station-kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 20px; }
.station-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; align-items: start; }
.station-grid-2 > .card { margin-bottom: 0; min-width: 0; }

/* Studiocam */
.cam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.cam-card { padding: 10px; }
.cam-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; background: #000; }
.cam-frame iframe, .cam-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.cam-side { display: flex; flex-direction: column; gap: 4px; }
.cam-now { font-size: 16px; line-height: 1.35; margin-top: 4px; }
.cam-listen { margin-top: 14px; align-self: flex-start; }
@media (max-width: 900px) { .cam-layout { grid-template-columns: minmax(0, 1fr); } }

/* Programmering */
.sched-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-bottom: 18px; }
.sched-hero-card { display: flex; align-items: center; gap: 14px; margin: 0; }
.sched-hero-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sched-hero-card strong { font-size: 18px; }
.sched-hero-card.is-now { border-color: rgba(236, 72, 153, 0.5); box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.25), 0 14px 30px -18px rgba(236, 72, 153, 0.8); }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.week-day { background: var(--glass-bg-strong); border: 1px solid var(--glass-line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.week-day.is-today { border-color: rgba(236, 72, 153, 0.55); }
.week-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 2px 2px 6px; border-bottom: 1px solid var(--glass-line); }
.week-day-head .muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.week-empty { font-size: 12px; margin: 4px 2px; }
.week-show { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border-left: 3px solid rgba(236, 72, 153, 0.55); min-width: 0; }
.week-show strong { font-size: 13px; overflow-wrap: anywhere; }
.week-show.is-now { background: rgba(236, 72, 153, 0.14); border-left-color: #ec4899; }
.week-time { font-size: 11.5px; font-weight: 700; color: #f9a8d4; font-variant-numeric: tabular-nums; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.week-host { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.week-desc { font-size: 11.5px; }
@media (max-width: 1100px) { .week-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* Deejays */
.dj-mini { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; font-weight: 800; font-size: 13px; }
.dj-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dj-mini svg { width: 55%; height: 55%; }
.dj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.dj-card { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 26px; }
.dj-card.is-live { border-color: rgba(239, 68, 68, 0.55); box-shadow: 0 14px 34px -20px rgba(239, 68, 68, 0.9); }
.dj-photo { position: relative; width: 128px; height: 128px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, #a78bfa, #ec4899, #f59e0b); margin-bottom: 8px; }
.dj-photo img, .dj-photo > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #1b1530; font-size: 44px; font-weight: 800; color: #fff; }
.dj-live-badge { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.dj-live-badge .live-dot { background: #fff; }
.dj-name { margin: 4px 0 0; font-size: 19px; }
.dj-show { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(167, 139, 250, 0.16); border: 1px solid rgba(167, 139, 250, 0.35); color: #ddd6fe; font-size: 12px; font-weight: 700; }
.dj-show svg { width: 12px; height: 12px; }
.dj-slots { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #f9a8d4; font-variant-numeric: tabular-nums; }
.dj-bio { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.dj-link { margin-top: auto; }
.dj-card .dj-link { margin-top: 12px; }

/* Beheer: deejays */
.dj-manage-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dj-manage-cols > .card { margin: 0; }
@media (max-width: 900px) { .dj-manage-cols { grid-template-columns: minmax(0, 1fr); } }
.dj-admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dj-admin-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.dj-admin-list li:first-child { border-top: 0; }
.dj-admin-list li.is-editing { background: rgba(167, 139, 250, 0.08); border-radius: 10px; padding-inline: 8px; }
.dj-admin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dj-admin-text .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-move { width: 30px; height: 30px; padding: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-hairline); color: var(--text-secondary); font-size: 14px; box-shadow: none; }
.dj-move:disabled { opacity: 0.3; }
.icon-djs { background: linear-gradient(180deg, #d4c2ff 0%, #8b5cf6 55%, #5b35b5 100%); }
.container.station-page { max-width: 1180px; }
.station-top .station-tabs { margin-left: auto; }
@media (max-width: 620px) { .station-top .station-tabs { margin-left: 0; } }
.kpi-grid.station-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .kpi-grid.station-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Studiocam-pagina: rijker zijpaneel met eigen radiospeler ── */
.cam-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.cam-side { display: flex; flex-direction: column; gap: 14px; }
.cam-box { margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cam-np { display: flex; gap: 14px; align-items: center; }
.cam-np-art { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: none; background: #111; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9); }
.cam-np-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cam-np-text .cam-now { font-size: 15px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.cam-listeners { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #93a0b8; }
.cam-listeners svg { width: 13px; height: 13px; }
.cam-listeners span { color: #fff; font-weight: 700; }
.cam-player { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(59, 130, 246, 0.14)); border: 1px solid rgba(45, 212, 191, 0.3); }
.cam-play { position: relative; width: 48px; height: 48px; padding: 0; flex: none; border-radius: 50%; border: 0; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #2dd4bf, #3b82f6); box-shadow: 0 8px 20px -8px rgba(45, 212, 191, 0.9); display: flex; align-items: center; justify-content: center; }
.cam-play svg { width: 22px; height: 22px; }
.cam-play .i-pause, .cam-play.is-playing .i-play { display: none; }
.cam-play.is-playing .i-pause { display: block; }
.cam-play:disabled { background: #334155; box-shadow: none; cursor: not-allowed; opacity: 0.7; }
.cam-spin { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5eead4; display: none; animation: cam-spin 0.9s linear infinite; }
.cam-play.is-loading .cam-spin { display: block; }
@keyframes cam-spin { to { transform: rotate(360deg); } }
.cam-player-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cam-player-text strong { font-size: 14px; }
.cam-player-text .muted { font-size: 12px; }
.cam-vol { width: 70px; accent-color: #2dd4bf; }
.cam-shows { gap: 12px; }
.cam-show { display: flex; gap: 12px; align-items: center; }
.cam-show > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cam-show strong { font-size: 14.5px; }
.cam-show .muted { font-size: 12px; }
.cam-show.is-now strong { color: #f9a8d4; }
.cam-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cam-recent li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cam-recent img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; background: #111; }
.cam-recent span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cam-recent strong, .cam-recent em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-recent strong { font-size: 13px; }
.cam-recent em { font-style: normal; font-size: 12px; color: #93a0b8; }
.cam-recent time { font-size: 11.5px; color: #93a0b8; font-variant-numeric: tabular-nums; }
.cam-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cam-actions .nav-btn { height: 34px; font-size: 12.5px; }
.cam-under { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 4px 2px; font-size: 12.5px; }
.cam-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.45); color: #fecaca; font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.cam-live-pill .live-dot { background: #ef4444; }
.cam-frame .cam-offline { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; color: #cbd5e1; background: radial-gradient(circle at 50% 40%, #1e1b4b, #05060c 70%); }
.cam-frame .cam-offline[hidden] { display: none; }
.cam-frame .cam-offline svg { width: 48px; height: 48px; color: #f87171; }
.cam-frame .cam-offline strong { font-size: 16px; color: #fff; }
.cam-frame .cam-offline span { font-size: 12.5px; }
@media (max-width: 1000px) { .cam-layout { grid-template-columns: minmax(0, 1fr); } }

/* Deelpagina: studiocam-codes */
.cam-share-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.cam-share-cols > div { min-width: 0; }
.cam-share-title { margin: 0 0 8px; font-size: 14px; }
.cam-share-title .muted { font-weight: 400; font-size: 12.5px; }
.card-accent-pink .kpi-block-icon.cam-share-ico { --tint: 248, 113, 113; }
.live-dot[hidden] { display: none !important; }

/* Studiocampagina: stemknop die ter plekke stemt (geen paginawissel). */
.cam-vote {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 14px;
  border-radius: 999px; border: 1px solid rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.16);
  color: #dbeafe; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: none;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.cam-vote svg { width: 15px; height: 15px; color: #60a5fa; }
.cam-vote:hover:not(:disabled) { background: rgba(96, 165, 250, 0.28); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(96, 165, 250, 0.9); }
.cam-vote-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.cam-vote.is-busy { opacity: 0.7; cursor: progress; }
.cam-vote.has-voted { border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.16); color: #bbf7d0; cursor: default; opacity: 1; }
.cam-vote.has-voted svg { color: #4ade80; }
.cam-vote.just-voted { animation: cam-vote-pop 0.45s ease; }
@keyframes cam-vote-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Publieke kaarten: camknop rechtsonder als het station een studiocam heeft. */
.phone-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone-line-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cam {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; color: #fecaca;
  background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.45);
  transition: background 0.15s ease, transform 0.12s ease;
}
.pc-cam svg { width: 14px; height: 14px; color: #f87171; }
.pc-cam:hover { background: rgba(239, 68, 68, 0.28); color: #fff; transform: translateY(-1px); }
.pc-cam-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; border: 2px solid #1a1a19; animation: tab-live 1.8s infinite; }
@media (max-width: 720px) {
  .public-card .phone-line.has-cam { display: flex; justify-content: flex-end; }
  .public-card .phone-line.has-cam .phone-line-text { display: none; }
}

/* ══════════ Eigen studiocam (uitzenden vanuit de browser) ══════════ */
.cam-start-btn,
.cam-start-btn:hover {
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg, #ef4444, #db2777);
  box-shadow: 0 6px 18px -8px rgba(239, 68, 68, 0.9);
}
.cam-start-btn:hover { filter: brightness(1.08); }
.cam-start-btn .dot, .cam-go .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.icon-cam { background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #991b1b 100%); }

/* Stream bewerken: keuze Geen / Link / Eigen stream */
.cam-mode-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.cam-mode-opt { position: relative; display: block; cursor: pointer; }
.cam-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cam-mode-opt span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-hairline); background: rgba(255, 255, 255, 0.03); transition: border-color 0.15s ease, background 0.15s ease; }
.cam-mode-opt strong { font-size: 13.5px; }
.cam-mode-opt em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.cam-mode-opt input:checked + span { border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.12); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4); }
.cam-mode-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cam-mode-eigen { padding: 12px 14px; border-radius: 12px; background: rgba(239, 68, 68, 0.08); border: 1px dashed rgba(239, 68, 68, 0.45); font-size: 13.5px; }
.cam-mode-eigen ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 520px) { .cam-mode-opts { grid-template-columns: minmax(0, 1fr); } }

/* Uitzendpagina */
.cam-host { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cam-host > .card, .cam-host-side > .card { margin: 0; }
.cam-host-side { display: flex; flex-direction: column; gap: 14px; }
.cam-host-stage { display: flex; flex-direction: column; gap: 14px; }
.cam-host-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cam-host-frame video { transform: scaleX(-1); } /* spiegelbeeld alleen voor jezelf; kijkers zien het normaal */
.cam-host-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-hairline); color: #a7b3ca; }
.cam-host-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.cam-host-status[data-state="live"] { color: #fecaca; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.5); }
.cam-host-status[data-state="live"] .dot { background: #ef4444; animation: tab-live 1.6s infinite; }
.cam-host-status[data-state="warn"] { color: #fde68a; border-color: rgba(250, 204, 21, 0.5); }
.cam-host-status[data-state="warn"] .dot { background: #facc15; }
.cam-host-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cam-host-controls select { height: 38px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-hairline); max-width: 100%; }
.cam-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 22px; border-radius: 999px; border: 0;
  font-size: 15px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ef4444, #db2777); box-shadow: 0 10px 24px -10px rgba(239, 68, 68, 0.95);
}
.cam-go:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.cam-go.is-live { background: #1f2937; box-shadow: inset 0 0 0 2px #ef4444; }
.cam-go.is-live .dot { background: #ef4444; border-radius: 3px; }
.cam-host-viewers { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.cam-host-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 1000px) { .cam-host { grid-template-columns: minmax(0, 1fr); } .cam-go { margin-left: 0; } }

/* Kijker: eigen cam */
.cam-rtc .cam-rtc-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-rtc .cam-rtc-video[hidden], .cam-rtc .cam-rtc-snap[hidden] { display: none; }
.cam-rtc-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.cam-rtc-badge .live-dot { background: #fff; }
.cam-rtc-badge[hidden], .cam-connecting[hidden] { display: none !important; }
.cam-connecting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #cbd5e1; font-size: 13px; background: radial-gradient(circle at 50% 40%, #1e1b4b, #05060c 70%); }
.cam-spin-lg { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: #f87171; animation: cam-spin 0.9s linear infinite; }
.nav-btn[hidden], .cam-host-controls select[hidden] { display: none !important; }

/* Studiocam: stationkeuze, deejay-logins, studio-login */
.cam-pick-station { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.cam-pick-station select { height: 36px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); border: 1px solid rgba(239, 68, 68, 0.45); font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; max-width: 100%; }
.dj-cam-login { margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.06); display: flex; flex-direction: column; gap: 10px; }
.dj-cam-login .checkbox-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dj-cam-login .checkbox-field svg { width: 14px; height: 14px; color: #f87171; vertical-align: -2px; }
.dj-cam-fields[hidden] { display: none; }
.dj-cam-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fecaca; background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.4); vertical-align: 2px; }
.dj-cam-tag svg { width: 11px; height: 11px; }
.studio-who { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(167, 139, 250, 0.14); border: 1px solid rgba(167, 139, 250, 0.35); color: #ede9fe; font-size: 13px; font-weight: 700; }
.studio-who img, .studio-who svg { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.studio-who svg { padding: 5px; background: rgba(167, 139, 250, 0.3); }
.studio-login-ico { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(135deg, #ef4444, #db2777); box-shadow: 0 12px 28px -12px rgba(239, 68, 68, 0.9); }
.studio-login-ico svg { width: 30px; height: 30px; color: #fff; }
#cam-as { height: 38px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-hairline); }
.cam-empty { font-size: 12.5px; margin: 0; }
.cam-recent li.cam-empty { display: block; }
.cam-side .cam-box .cam-actions { margin-top: 2px; }

/* Studiocam-reacties: knoppen onder de cam + zwevende icoontjes */
.cam-under { justify-content: flex-start; }
.cam-under .cam-react { margin-left: auto; }
.cam-react-bar { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-hairline); }
.cam-react-btn { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; font-size: 20px; line-height: 1; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; }
.cam-react-btn:hover { transform: scale(1.18); background: rgba(255, 255, 255, 0.08); opacity: 1; }
.cam-react-btn.is-pop { animation: cam-react-pop 0.4s ease; }
@keyframes cam-react-pop { 50% { transform: scale(1.4); } }
.cam-react-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.cam-react-float { position: absolute; bottom: 14px; left: auto !important; right: 6%; animation: cam-react-rise 3s ease-out forwards; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); will-change: transform, opacity; }
@keyframes cam-react-rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 1; transform: translate(0, -24px) scale(1.15); }
  100% { transform: translate(var(--drift, 0), -340px) scale(1); opacity: 0; }
}
.cam-react-tally { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; }
.cam-react-tally b { font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .cam-under .cam-react { margin-left: 0; width: 100%; } .cam-react-bar { justify-content: space-between; } .cam-under-note { display: none; } }

/* Onze deejays: kaart "Studio-login voor deejays" */
.dj-studio-card { border: 1px solid rgba(239, 68, 68, 0.35); background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(219, 39, 119, 0.05)), var(--surface-1); }
.dj-studio-head { display: flex; gap: 14px; align-items: center; }
.dj-studio-head .studio-login-ico { width: 48px; height: 48px; flex: none; }
.dj-studio-head .studio-login-ico svg { width: 22px; height: 22px; }
.dj-studio-url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dj-studio-url code { font-size: 16px; font-weight: 700; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-hairline); color: #fff; user-select: all; overflow-wrap: anywhere; }
.dj-studio-card .share-copy { position: static; transform: none; }
.dj-studio-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 8px; }
.dj-studio-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dj-studio-row code { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.dj-studio-warn { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.4); color: #fde68a; font-size: 13px; }
.dj-studio-warn a { color: #fff; }
.dj-studio-card .share-copy svg { width: 14px; height: 14px; flex: none; }
.dj-studio-card .share-copy { white-space: nowrap; }
.btn-secondary.btn-verify-manual { --tint: 74, 222, 128; }

/* Dashboard: snelmenu per station */
.qm { margin: 14px 0 0; padding: 14px 16px; }
.qm-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.qm-pick { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.qm-pick select { height: 38px; min-width: 220px; max-width: 100%; padding: 0 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.qm-status { display: flex; gap: 6px; flex-wrap: wrap; }
.qm-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-muted); border: 1px solid var(--border-hairline); }
.qm-pill.on { color: #bbf7d0; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); }
.qm-pill.live { color: #fecaca; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.14); }
.qm-jump { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; background: rgba(255,255,255,.05); border: 1px solid var(--border-hairline); color: var(--text-secondary); box-shadow: none; cursor: pointer; }
.qm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.qm-tile { --tint: 96,165,250; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text-primary);
  background: rgba(var(--tint), .09); border: 1px solid rgba(var(--tint), .28); transition: transform .12s ease, background .15s ease, border-color .15s ease; min-width: 0; }
.qm-tile:hover { transform: translateY(-1px); background: rgba(var(--tint), .18); border-color: rgba(var(--tint), .55); color: #fff; }
.qm-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, rgb(var(--tint)), color-mix(in srgb, rgb(var(--tint)) 55%, #000)); }
.qm-ico svg { width: 17px; height: 17px; }
.qm-txt { display: flex; flex-direction: column; min-width: 0; }
.qm-txt strong { font-size: 13.5px; }
.qm-txt em { font-style: normal; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.qm-tile.is-off { background: rgba(255,255,255,.03); border-style: dashed; border-color: rgba(255,255,255,.14); }
.qm-tile.is-off .qm-ico { filter: grayscale(.7) brightness(.8); }
.qm-tile.is-off .qm-dot { background: #475569; }
.qm-tile.is-live .qm-dot { background: #ef4444; animation: tab-live 1.6s infinite; }
.qm-teal { --tint: 45,212,191; } .qm-orange { --tint: 251,146,60; } .qm-pink { --tint: 236,72,153; } .qm-purple { --tint: 167,139,250; }
.qm-red { --tint: 239,68,68; } .qm-blue { --tint: 96,165,250; } .qm-green { --tint: 74,222,128; } .qm-yellow { --tint: 250,204,21; }
.admin-card.qm-flash { animation: qm-flash 1.6s ease; }
@keyframes qm-flash { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 80%, transparent); } 100% { box-shadow: none; } }
@media (max-width: 620px) { .qm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qm-pick select { min-width: 0; width: 100%; } .qm-pick { width: 100%; } .qm-jump { margin-left: 0; } }
@media (min-width: 1100px) { .qm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1099px) { .qm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .qm-tile { padding: 9px 10px; gap: 8px; }
  .qm-ico { width: 30px; height: 30px; }
  .qm-txt strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qm-txt em { white-space: normal; font-size: 11px; line-height: 1.3; }
}

/* ---- Top-muziek afbeelding-generator (manage/top_image.php) ---- */
.ti-page { max-width: var(--app-max, 1440px); }
.ti-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.ti-head-txt { flex: 1; min-width: 220px; }
.ti-head-txt h1 { margin: 0; font-size: 20px; }
.ti-head-txt p { margin: 3px 0 0; }
.ti-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ti-switch select { height: 36px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-hairline); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ti-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; align-items: start; }
@media (min-width: 900px) { .ti-grid { grid-template-columns: minmax(320px, 420px) 1fr; } .ti-preview { position: sticky; top: 84px; } }
.ti-opts { display: flex; flex-direction: column; gap: 16px; }
.ti-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.ti-field legend { padding: 0; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ti-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ti-choice { position: relative; cursor: pointer; }
.ti-choice input, .ti-theme input { position: absolute; opacity: 0; pointer-events: none; }
.ti-choice span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13.5px;
                  background: rgba(255,255,255,.04); border: 1px solid var(--border-hairline); transition: background .15s, border-color .15s; }
.ti-choice span em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.ti-choice:hover span { border-color: rgba(250,204,21,.45); }
.ti-choice input:checked + span { background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.7); box-shadow: 0 0 0 1px rgba(250,204,21,.35) inset; }
.ti-choice input:focus-visible + span, .ti-theme input:focus-visible + .ti-swatch { outline: 2px solid #facc15; outline-offset: 2px; }
.ti-choice span b { display: flex; align-items: center; font-weight: 700; }
.ti-shape { display: inline-block; flex: none; margin-right: 8px; border: 2px solid currentColor; border-radius: 3px; opacity: .8; }
.ti-shape-sq { width: 13px; height: 13px; }
.ti-shape-story { width: 10px; height: 16px; }
.ti-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ti-theme { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.ti-swatch { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border-hairline); transition: transform .15s; }
.ti-theme:hover .ti-swatch { transform: translateY(-2px); }
.ti-theme input:checked + .ti-swatch { border-color: #facc15; box-shadow: 0 6px 18px -8px rgba(250,204,21,.8); }
.ti-theme small { font-size: 11.5px; color: var(--text-secondary); }
.ti-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border-hairline); }
.ti-check input { margin-top: 3px; accent-color: #facc15; width: 16px; height: 16px; }
.ti-check span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ti-check em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.ti-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ti-actions .nav-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 10px; }
.ti-dl svg { width: 16px; height: 16px; }
.ti-note { margin: 0; font-size: 12.5px; line-height: 1.5; }
.ti-preview { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ti-preview-frame { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0b0b0b; box-shadow: 0 18px 40px -20px rgba(0,0,0,.8); }
.ti-preview-frame.is-story { max-width: 380px; aspect-ratio: 9 / 16; }
.ti-preview-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ti-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #e2e8f0; font-size: 13px; background: rgba(5,6,12,.55); backdrop-filter: blur(2px); }
.ti-loading[hidden] { display: none; }
.ti-loading .cam-spin-lg { border-top-color: #facc15; }
@media (max-width: 899px) { .ti-preview { order: -1; } .ti-preview-frame { max-width: 360px; } .ti-preview-frame.is-story { max-width: 260px; } }
@media (max-width: 520px) { .ti-choices { grid-template-columns: 1fr; } }

/* ---- Studiocam: tegelijk live op meerdere stations (includes/cam_host_view.php) ---- */
.cam-targets { border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 12px; padding: 10px 12px 12px; margin: 0; background: rgba(239, 68, 68, 0.05); min-width: 0; }
.cam-targets legend { padding: 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fca5a5; }
.cam-targets legend .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cam-targets-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cam-target { position: relative; cursor: pointer; }
.cam-target input { position: absolute; opacity: 0; pointer-events: none; }
.cam-target span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
                   background: rgba(255,255,255,.05); border: 1px solid var(--border-hairline); color: var(--text-secondary); transition: background .15s, border-color .15s; }
.cam-target span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 2px solid rgba(255,255,255,.35); flex: none; }
.cam-target input:checked + span { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.7); color: #fff; }
.cam-target input:checked + span::before { background: #ef4444 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; border-color: #ef4444; }
.cam-target input:focus-visible + span { outline: 2px solid #f87171; outline-offset: 2px; }
.cam-target input:disabled + span { opacity: .7; cursor: default; }
.cam-target em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.cam-target.is-off { cursor: default; }
.cam-target.is-off span { opacity: .55; border-style: dashed; }
.cam-target.is-off span::before { display: none; }
.cam-host-stage > .cam-targets { margin-bottom: 12px; }

/* ---- Deejays: e-mail en stations (manage/deejays.php) ---- */
.dj-studio-row { padding: 10px 0; border-bottom: 1px dashed var(--border-hairline); }
.dj-studio-row:last-of-type { border-bottom: 0; }
.dj-studio-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dj-studio-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-muted); }
.dj-live-on { display: inline-flex; align-items: center; gap: 5px; color: #fca5a5; }
.dj-live-on svg { width: 13px; height: 13px; }
.dj-mail-addr em { font-style: italic; }
.dj-studio-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dj-mail-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none;
               background: rgba(45, 212, 191, 0.14); border: 1px solid rgba(45, 212, 191, 0.5); color: #ccfbf1; box-shadow: none; }
.dj-mail-btn:hover { background: rgba(45, 212, 191, 0.26); color: #fff; }
.dj-mail-btn.dj-mail-new { background: rgba(250, 204, 21, 0.12); border-color: rgba(250, 204, 21, 0.5); color: #fef3c7; }
.dj-mail-btn.dj-mail-new:hover { background: rgba(250, 204, 21, 0.24); }
.dj-mail-btn.is-off { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.2); color: var(--text-muted); }
.dj-station-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.dj-station-pick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border-hairline); cursor: pointer; font-size: 13.5px; }
.dj-station-pick input { accent-color: #ef4444; width: 16px; height: 16px; margin: 0; }
.dj-station-pick:has(input:checked) { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.1); }
.dj-station-pick em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.cam-target.is-off s { text-decoration-color: rgba(255,255,255,.45); }
.cam-targets-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.dj-station-pick.is-off { cursor: default; opacity: .75; border-style: dashed; }
.dj-station-pick.is-off a { font-size: 11.5px; color: #fca5a5; margin-left: 4px; }

/* ---- Programmering ↔ deejays: aanklikken of zelf typen (manage/schedule.php, manage/deejays.php) ---- */
.sched-djpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.sched-djpick-label { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.sched-djchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer;
                background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.35); color: var(--text-secondary); box-shadow: none; transition: background .15s, border-color .15s; }
.sched-djchip:hover { background: rgba(167, 139, 250, 0.18); color: #fff; }
.sched-djchip.is-on { background: rgba(167, 139, 250, 0.3); border-color: #a78bfa; color: #fff; }
.sched-djchip.is-on::after { content: "✓"; font-size: 12px; color: #ddd6fe; }
.sched-djchip .dj-mini { width: 26px; height: 26px; flex: none; }
.sched-djchip .dj-mini span { font-size: 12px; }
.dj-showchip { padding-left: 11px; background: rgba(244, 114, 182, 0.08); border-color: rgba(244, 114, 182, 0.35); }
.dj-showchip svg { width: 14px; height: 14px; color: #f9a8d4; }
.dj-showchip:hover { background: rgba(244, 114, 182, 0.18); }
.dj-showchip.is-on { background: rgba(244, 114, 182, 0.3); border-color: #f472b6; }
.dj-showchip.is-on::after { color: #fbcfe8; }
.sched-djadd { font-size: 12.5px; font-weight: 700; color: #c4b5fd; text-decoration: none; padding: 0 6px; }
.sched-djadd:hover { text-decoration: underline; }
.sched-host-line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sched-host-av { width: 20px; height: 20px; margin-right: -2px; }
.sched-host-av span { font-size: 10px; }
.sched-host-line .sched-host-av:last-of-type { margin-right: 4px; }

/* ---- Beheerbalk op de publieke stationpagina's (alleen eigenaar/beheerder, stationOwnerBarHtml()) ---- */
.owner-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; padding: 8px 10px 8px 14px; border-radius: 14px;
             background: linear-gradient(90deg, rgba(57, 135, 229, 0.16), rgba(124, 58, 237, 0.12)); border: 1px solid rgba(96, 165, 250, 0.35); }
.owner-bar-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #bfdbfe; }
.owner-bar-label svg { width: 14px; height: 14px; }
.owner-bar-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.owner-btn { --tint: 96,165,250; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
             text-decoration: none; color: #e2e8f0; background: rgba(var(--tint), .12); border: 1px solid rgba(var(--tint), .4); transition: background .15s, transform .12s; }
.owner-btn svg { width: 14px; height: 14px; color: rgb(var(--tint)); flex: none; }
.owner-btn:hover { background: rgba(var(--tint), .26); color: #fff; transform: translateY(-1px); }
.owner-btn.is-main { color: #fff; background: linear-gradient(135deg, rgb(var(--tint)), color-mix(in srgb, rgb(var(--tint)) 60%, #000)); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(var(--tint), .9); }
.owner-btn.is-main svg { color: #fff; }
.owner-ghost { --tint: 148,163,184; background: transparent; }
.owner-blue { --tint: 96,165,250; } .owner-pink { --tint: 244,114,182; } .owner-purple { --tint: 167,139,250; } .owner-red { --tint: 239,68,68; }
.owner-teal { --tint: 45,212,191; } .owner-orange { --tint: 251,146,60; } .owner-yellow { --tint: 250,204,21; }
@media (max-width: 620px) {
  .owner-bar { padding: 10px; }
  .owner-bar-btns { margin-left: 0; width: 100%; }
  .owner-btn { flex: 1 1 40%; justify-content: center; }
  .owner-btn:nth-child(n+4):not(.owner-ghost) { display: none; } /* telefoon: de 3 belangrijkste + Dashboard */
}
/* Publieke lijst: eigen stations krijgen een Bewerken-knopje. */
.pc-own-edit { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none;
               color: #bfdbfe; background: rgba(96, 165, 250, 0.14); border: 1px solid rgba(96, 165, 250, 0.45); }
.pc-own-edit svg { width: 11px; height: 11px; }
.pc-own-edit:hover { background: rgba(96, 165, 250, 0.3); color: #fff; }

/* ---- Inloggen in dezelfde stijl als registreren (login.php) ---- */
.auth-card.auth-split.auth-login { width: min(100%, 860px); }
.auth-login .auth-main { padding: 32px 34px 28px; }
.auth-pw { position: relative; }
.auth-pw input { padding-right: 46px !important; }
.auth-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;
                  background: transparent; border: 0; box-shadow: none; color: var(--text-muted); cursor: pointer; }
.auth-pw-toggle svg { width: 18px; height: 18px; }
.auth-pw-toggle:hover, .auth-pw-toggle.is-on { color: #fff; background: rgba(255, 255, 255, 0.08); }
.auth-remember { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-hairline); margin: 4px 0 14px !important; }
.auth-remember strong { color: var(--text-primary); }
.auth-remember:has(input:checked) { border-color: rgba(57, 135, 229, 0.55); background: rgba(57, 135, 229, 0.1); }
.auth-dj { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-hairline); font-size: 13px; color: var(--text-muted); text-align: center; }
.auth-dj a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #fca5a5; text-decoration: none; }
.auth-dj a svg { width: 14px; height: 14px; }
.auth-dj a:hover { text-decoration: underline; }
/* Wachtwoord vergeten / resetten / studio-login (zelfde regels ook als vangnet in authSafetyCssTag()) */
.auth-steps .auth-perk-ic { font-weight: 800; font-size: 14px; color: #fff; }
.auth-aside-note { display: flex; gap: 7px; align-items: flex-start; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border-hairline); font-size: 12px; color: var(--text-muted); }
.auth-aside-note svg { flex: none; margin-top: 2px; }
.auth-note { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.auth-done { display: flex; justify-content: center; margin: 4px 0 10px; }
.auth-done-ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #3987e5, #7c3aed); box-shadow: 0 10px 24px -10px rgba(57, 135, 229, 0.9); }
a.auth-submit-link { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; font-weight: 700; background: var(--accent, #3987e5); box-sizing: border-box; margin: 14px 0 6px; }
a.auth-submit-link:hover { opacity: .92; color: #fff; }

/* Account → Onthouden apparaten */
.device-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.device-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-hairline); }
.device-row.is-current { border-color: rgba(20, 184, 166, 0.55); background: rgba(20, 184, 166, 0.08); }
.device-ico { font-size: 22px; line-height: 1; flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); }
.device-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.device-txt .muted { font-size: 12px; }
.device-this { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #99f6e4; background: rgba(20, 184, 166, 0.2); border: 1px solid rgba(20, 184, 166, 0.5); vertical-align: 1px; }
.device-out { white-space: nowrap; }
@media (max-width: 560px) { .device-row { flex-wrap: wrap; } .device-row form { width: 100%; } .device-out { width: 100%; } }

/* Publieke kaarten: stemmen deze maand (stemwedstrijd) */
.admin-card-stats .stat-month svg { color: #facc15; }

/* Dashboard snelmenu: "Kom je er niet uit?" → Berichtenbox */
.qm-help-link:hover { color: var(--text-primary) !important; border-color: rgba(255,255,255,.25) !important; }
.qm-help-btn:hover { filter: brightness(1.1); }
.qm-help-actions a { white-space: nowrap; }
@media (max-width: 620px) { .qm-help-actions { width: 100%; flex-direction: column; } .qm-help-actions a { justify-content: center; } }