/* UberFM -- look & feel geijkt op NPO Luister (Kees, 7 okt 2026).
   NPO Luister: donkere basis, één grote "Luister live"-pil, hero-beeld dat in
   het donker overloopt, donkere lijsten met tijden en thumbnails, donkere
   tabbalk met één accentkleur. Hier: donker + UberFM-rood. */
:root {
  --paper:      #0F1821;
  --card:       #182430;
  --ink:        #FFFFFF;
  --ink-2:      #AEB9C4;
  --ink-3:      #8A96A3;
  --hair:       rgba(255, 255, 255, 0.08);
  --hair-blue:  rgba(255, 255, 255, 0.14);
  /* Accent: rood op de plekken waar de app eerst blauw of lime had. */
  --blue:        #E30613;
  --blue-chrome: #0B1218;
  --blue-ink:    #FF3B3B;
  --blue-bright: #1E3140;
  --blue-deep:   #0B1218;
  --lime:        #E30613;
  --lime-deep:   #C8000F;
  --on-blue:     #FFFFFF;
}
/* Het live-scherm: donker verloop, geen blauw. */
.backdrop-blue { background: linear-gradient(178deg, #1B2836 0%, #0F1821 40%, #0B1218 100%) !important; }
.ambient-scrim { background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(11, 18, 24, 0.85) 100%) !important; }
.topbar { box-shadow: 0 1px 0 var(--hair); }
.brand-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.5) !important; }
.live-dot { background: #FF3B3B; }
/* Witte LIVE-pil zoals bij NPO: wit op donker met rode stip. */
.topbar-actions .live, .live-pill { background: #FFFFFF !important; color: #111 !important; }

/* Hero: grotere hoes, zachte rand, loopt onderaan in het donker over. */
.cover-wrap { width: min(86vw, 360px, 34svh) !important; }
.cover {
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 30px 60px -20px rgba(0, 0, 0, 0.9) !important;
}
.track-label { color: #FF3B3B !important; }
.progress-track { background: rgba(255, 255, 255, 0.16) !important; }
.progress-fill { background: #FF3B3B !important; }

/* De bediening: een ronde rode speelknop (Kees, 7 okt 2026: "bij een app is
   een ronde knop veel beter"), met AirPlay en Delen stil ernaast. */
.controls { gap: 36px !important; padding: 18px 0 10px !important; }
.play-fab {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
  background: linear-gradient(180deg, #FF2A36 0%, #E30613 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 16px 34px -12px rgba(227, 6, 19, 0.85) !important;
}
.play-fab svg { width: 30px !important; height: 30px !important; }
.play-fab.is-busy { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
.control-side {
  opacity: 0.45 !important;
  transform: none !important;
  width: 44px !important; height: 44px !important;
  color: #FFFFFF !important;
}
.control-side svg { width: 22px !important; height: 22px !important; }
.control-side:active { opacity: 0.9 !important; }

/* "Zo meteen" als donkere kaart, NPO's "Nu & Straks". */
.upnext { background: rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 0 0 1px var(--hair); }
.upnext-label { color: #FF3B3B !important; }

/* Lijsten en kaarten donker. */
.list { background: var(--card) !important; }
.row:active { background: rgba(255, 255, 255, 0.06) !important; }
.row.is-dim { background: rgba(255, 255, 255, 0.03) !important; box-shadow: none !important; }
.row-time { color: #FF3B3B !important; }
.row-art-empty { background: rgba(255, 255, 255, 0.08) !important; }
.screen-title { color: #fff !important; }
.field input, .field textarea, input, textarea, select {
  background: #0F1821 !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
/* Placeholder: #8A96A3 op #0F1821 is ~5,5:1 (de oude #6F7B88 haalde 3,9:1, onder
   de 4,5:1 voor kleine tekst -- audit 7 okt 2026). */
::placeholder { color: #8A96A3 !important; }
.submit {
  max-width: 420px; margin-left: auto !important; margin-right: auto !important; width: 100%;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #FF2A36 0%, #E30613 100%) !important;
  box-shadow: 0 10px 24px -12px rgba(227, 6, 19, 0.75) !important;
}

/* Mini-speler en tabbalk donker, actieve tab rood. */
.mini { background: #1B2836 !important; box-shadow: 0 0 0 1px var(--hair), 0 18px 40px -16px rgba(0,0,0,.9) !important; }
.mini-btn { background: #E30613 !important; color: #fff !important; }
.tabbar { background: rgba(11, 18, 24, 0.96) !important; box-shadow: 0 -1px 0 var(--hair) !important; }
.tab { color: #AEB9C4 !important; }
.tab.is-active { color: #FF3B3B !important; }

/* Verzoekformulier: trackkiezer, gekozen plaat, stem-opname en bevestiging
   ook donker (Kees, 7 okt 2026: "maak dit ook passend als kleur"). */
.picker {
  background: #0F1821 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -16px rgba(0, 0, 0, 0.9) !important;
}
.picker-head { color: var(--ink-3) !important; }
.picker-row:active { background: rgba(255, 255, 255, 0.06) !important; }
.picker-title { color: #fff !important; }
.picker-artist { color: var(--ink-2) !important; }
.picker-art-empty, .picked-art-empty { background: rgba(255, 255, 255, 0.08) !important; }
.picker-empty { color: var(--ink-2) !important; }
.picked {
  background: rgba(227, 6, 19, 0.12) !important;
  box-shadow: inset 0 0 0 1.5px #E30613 !important;
}
.picked-title { color: #fff !important; }
.picked-change {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
.voice-btn { background: #E30613 !important; color: #fff !important; }
.voice-play, .voice-discard { color: #fff !important; }
.sent { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--hair) !important; }
.field-hint, .voice-hint { color: var(--ink-2) !important; }

/* Verzoekformulier compact: op een telefoon in één scherm, zonder scrollen
   (Kees, 7 okt 2026). Zelfde velden, minder lucht. */
.screen-head { padding: 12px 20px 2px !important; }
.screen-title { font-size: 1.375rem !important; }
.screen-sub { margin-top: 2px !important; font-size: 0.78rem !important; }
.form { padding: 10px 16px 0 !important; gap: 10px !important; }
.form-card { gap: 9px !important; padding: 12px 14px !important; }
.field { gap: 4px !important; }
.field label { font-size: 0.6875rem !important; }
.field input, .field textarea { padding: 10px 12px !important; border-radius: 11px !important; font-size: 0.9375rem !important; }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 2px #E30613 !important; background: #0F1821 !important; }
.field textarea { min-height: 58px !important; }
.field-hint { font-size: 0.6875rem !important; line-height: 1.3 !important; }
.form-actions { padding: 8px 16px 8px !important; gap: 6px !important; }
.submit { height: 48px !important; }
.form-trust { font-size: 0.72rem !important; }

/* Instellingen, bewaard en offline-staat (features.css) in het donker.
   Lettergroottes in rem, zodat "grotere tekst" op het toestel doorwerkt. */
.topbar-knop { color: var(--ink-2) !important; }
.topbar-knop.is-actief { color: #fff !important; background: rgba(255, 255, 255, 0.12) !important; }
.keuze { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; }
.keuze.is-actief { background: #E30613 !important; color: #fff !important; box-shadow: none !important; }
.instelling-hint { color: var(--ink-2) !important; font-size: 0.8125rem; }
.over-rij { color: #fff !important; }
.over-rij.is-stil { color: var(--ink-2) !important; }
.over-detail { color: var(--ink-3) !important; }
.bewaard-acties a { color: #FF3B3B !important; }
.bewaard-acties button { color: var(--ink-3) !important; }
.row .hart { color: var(--ink-3) !important; }
.row .hart.is-aan, .hart.is-aan { color: #FF3B3B !important; }
.offline-blok .offline-kop { color: #FF8A94 !important; font-size: 0.875rem; }
.offline-blok .offline-knop { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }

/* Lege staat (Bewaard / Playlist leeg): donkere kaart met leesbare tekst. */
.empty { background: var(--card) !important; color: var(--ink-2) !important; box-shadow: inset 0 0 0 1px var(--hair) !important; }

/* Alleen de balk, geen tijden (Kees, 7 okt 2026). */
.progress-times { display: none !important; }

/* Like-hartje: unlike = rustige witte omtrek, like = UberFM-rood gevuld. */
.hart { color: rgba(255, 255, 255, 0.75) !important; opacity: 1 !important; }
.hart.is-aan, .row .hart.is-aan { color: #FF3B3B !important; }
.hart.is-aan svg { filter: drop-shadow(0 0 8px rgba(255, 59, 59, 0.55)); }

/* Like-knop: alleen het hart, direct naast de titel (Kees, 7 okt 2026).
   Klein en gedempt; rood gevuld bij like. */
.track-kop { position: static; display: inline-flex !important; align-items: flex-start !important; justify-content: center; gap: 6px !important; padding: 0 !important; max-width: 100%; }
.track-kop .track-title { flex: 0 1 auto; min-width: 0; text-align: center; }
.track-kop .hart {
  position: static; flex: 0 0 auto;
  /* Op de eerste titelregel: regelhoogte 25px × 1.18 ≈ 29.5px, knop 30px. */
  width: 30px !important; height: 30px !important;
  /* De titel heeft margin-top 9px; het hart volgt, zodat het op regel 1 staat. */
  margin: 9px 0 0 !important; transform: none;
  background: none !important; box-shadow: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  transition: transform 160ms var(--ease), color 160ms var(--ease);
}
.track-kop .hart svg { width: 20px; height: 20px; stroke-width: 1.6; }
.track-kop .hart:active { transform: scale(0.9); }
.track-kop .hart.is-aan { color: #E8453F !important; }
.track-kop .hart.is-aan svg { filter: none; animation: none; }

/* "<Zender> ID"-sheet (features.css) in het donker: #0F1821 / #182430 en het
   UberFM-rood #E30613, afgeronde bovenhoeken, witte secundaire knop. */
.id-scrim { background: rgba(0, 0, 0, 0.62) !important; }
.id-sheet { background: #182430 !important; color: #fff !important; box-shadow: 0 -16px 48px -12px rgba(0, 0, 0, 0.8) !important; }
.id-greep { background: rgba(255, 255, 255, 0.18) !important; }
.id-sluit { background: #0F1821 !important; color: rgba(255, 255, 255, 0.8) !important; }
.id-kicker { color: #FF3B3B !important; }
.id-titel { color: #fff !important; }
.id-intro { color: rgba(255, 255, 255, 0.72) !important; }
.id-voordelen li { color: #fff !important; }
.id-voordelen svg { color: #E30613 !important; }
.id-knop.is-primair { background: #E30613 !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(227, 6, 19, 0.8) !important; }
.id-knop.is-wit { background: #fff !important; color: #0F1821 !important; box-shadow: none !important; }
.id-link { color: #FF3B3B !important; }
.id-melding { color: #FF8A94 !important; }
.id-spinner { border-color: rgba(255, 255, 255, 0.15) !important; border-top-color: #E30613 !important; }
.id-vink { background: #E30613 !important; color: #fff !important; }
.id-sheet .field input { background: #0F1821 !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; }
.id-sheet .field label { color: rgba(255, 255, 255, 0.7) !important; }
.over-rij.is-gevaar { color: #FF3B3B !important; }
.keuze.is-gevaar { background: #E30613 !important; }