*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Donker (standaard) */
  --bg:          #111111;
  --surface:     #1c1c1c;
  --border:      #2a2a2a;
  --accent:      #c0392b;
  --on-accent:   #141414;   /* tekstkleur óp het accent (AREA-balken, knoppen) */
  --text:        #f0f0f0;
  --muted:       #888888;
  --live-bg:     #162416;
  --live-text:   #4cde7a;
  --live-glow:   rgba(76, 222, 122, 0.13);
  --card-top:    #202020;
  --card-bottom: #1a1a1a;
  --sk-base:     #242424;
  --sk-sheen:    #333333;
  --wet-bg:      #16171c;
  /* "Now playing"-tint: afgeleid van de highlight-kleur + achtergrond, dus
     kleurt mee met de gekozen accent-kleur én het licht/donker-thema. */
  --current-bg:  color-mix(in srgb, var(--accent) 15%, var(--bg));
  --header-h:    54px;
  --tab-h:       44px;
}

/* Licht — waarden gedeeld door de handmatige keuze en de auto-modus. */
:root[data-theme="light"] {
  --bg:          #f4f3ef;
  --surface:     #ffffff;
  --border:      #e4e2db;
  --text:        #1a1a1a;
  --muted:       #7c7a73;
  --live-bg:     #e3f6e8;
  --live-text:   #1f9d4d;
  --live-glow:   rgba(30, 170, 85, 0.32);
  --card-top:    #ffffff;
  --card-bottom: #f7f6f2;
  --sk-base:     #e7e5df;
  --sk-sheen:    #f3f1eb;
  --wet-bg:      #eef3fb;
}
/* Auto: volg de systeeminstelling zolang er geen expliciete keuze staat. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:          #f4f3ef;
    --surface:     #ffffff;
    --border:      #e4e2db;
    --text:        #1a1a1a;
    --muted:       #7c7a73;
    --live-bg:     #e3f6e8;
    --live-text:   #1f9d4d;
    --live-glow:   rgba(30, 170, 85, 0.32);
    --card-top:    #ffffff;
    --card-bottom: #f7f6f2;
    --sk-base:     #e7e5df;
    --sk-sheen:    #f3f1eb;
    --wet-bg:      #eef3fb;
  }
}

/* Monochroom/adaptief accent: beweegt mee met het thema.
   Licht → zwarte AREA-balk met witte letters; donker → witte balk, zwarte letters. */
:root[data-accent="mono"] {
  --accent:    #f0f0f0;
  --on-accent: #141414;
}
:root[data-accent="mono"][data-theme="light"] {
  --accent:    #1a1a1a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: light) {
  :root[data-accent="mono"]:not([data-theme]) {
    --accent:    #1a1a1a;
    --on-accent: #ffffff;
  }
}

html { overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  min-height: 100dvh;
}

.hidden { display: none !important; }


/* ── Header ───────────────────────────────────────────────────── */

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 8px 0 4px;
  z-index: 100;
  gap: 2px;
}

#backBtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
#backBtn:hover  { color: var(--text); background: var(--surface); }
#backBtn svg    { display: block; }

#festivalName {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  letter-spacing: 0.03em;
  padding: 0 4px;
}
#festivalName .fname { display: inline-block; white-space: nowrap; }

/* Alleen als de titel niet past: zachte rand-fade + heen-en-weer scrollen. */
#festivalName.overflowing {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
#festivalName.overflowing .fname {
  animation: fname-marquee var(--fname-dur, 12s) ease-in-out infinite alternate;
}
@keyframes fname-marquee {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--fname-shift, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  #festivalName.overflowing .fname { animation: none; }
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.icon-btn:hover  { color: var(--text); background: var(--surface); }
.icon-btn:active { background: var(--border); }
.icon-btn svg    { display: block; }
.icon-btn .mdi   { display: block; font-size: 23px; line-height: 1; }


/* ── Day tabs (bottom bar) ────────────────────────────────────── */

#dayTabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 99;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#dayTabs::-webkit-scrollbar { display: none; }

body.has-tabs #dayTabs { display: flex; }

.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  border-top: 2px solid transparent;
}
.tab.active {
  color: var(--accent);
  border-top-color: var(--accent);
}
.tab-label   { font-size: 13px; font-weight: 700; }
.tab-date    { font-size: 10px; opacity: 0.6; font-weight: 400; letter-spacing: 0.04em; }


/* ── Body padding ─────────────────────────────────────────────── */

#body               { padding-top: calc(var(--header-h) + 1px); padding-bottom: 16px; }
body.has-tabs #body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px); }


/* ── Festival picker ──────────────────────────────────────────── */

#picker {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* het scrollen zit in #pickerScroll, niet hier */
}

/* Het enige scrollende deel van de picker. De acties + netStatus staan búiten
   deze wrapper en scrollen dus nooit mee (op geen enkel platform). */
#pickerScroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px 72px;
}

#netStatus {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  font-size: 12px;
  color: var(--muted);
  background: linear-gradient(transparent, var(--bg) 40%);
  pointer-events: none;
}

.net-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live-text);              /* online → groen */
}
#netStatus.weak    .net-dot { background: #f5a524; animation: none; }  /* weak signal → oranje */
#netStatus.offline .net-dot { background: #e5484d; animation: none; }  /* offline → rood */

#picker h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0;
  letter-spacing: 0.04em;
}

/* FLINE-logo in de picker-kop (Archivo Black + groene punt op de i). */
.fline-logo {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.fline-logo .i { position: relative; }
.fline-logo .i .tittle {
  position: absolute; left: 50%; top: -0.07em; transform: translateX(-50%);
  width: 0.2em; height: 0.2em; border-radius: 50%;
  background: var(--live-text);
  animation: pulse 1.4s ease-in-out infinite;   /* zelfde groene pulse als de live-dot */
}
@media (prefers-reduced-motion: reduce) { .fline-logo .i .tittle { animation: none; } }

#picker .subtitle {
  width: 100%;
  max-width: 420px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 40px;
}

#pickerList {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.picker-month {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  /* Extra lucht boven de kop, strak boven de kaart eronder (naast de list-gap). */
  margin: 12px 4px -4px;
}
.picker-month:first-child { margin-top: 0; }

.festival-card {
  background: linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 18px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.festival-card:hover  { border-color: var(--accent); }
.festival-card:active { background: var(--border); }
/* Live: dezelfde kaart, met een subtiele groene gloed bovenin. */
.festival-card.is-live {
  border-color: var(--live-text);
  background:
    linear-gradient(155deg, var(--live-glow) 0%, transparent 62%),
    linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%);
  /* Zachte groene gloed rond de kaart — valt in zowel licht als donker op. */
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--live-text) 55%, transparent);
}

/* Skeleton-laadstate: placeholder-kaarten met een shimmer-gradient. */
.skeleton-card { pointer-events: none; }
.sk-line {
  border-radius: 6px;
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, var(--sk-base) 0px, var(--sk-sheen) 60px, var(--sk-base) 120px);
  background-size: 320px 100%;
  animation: sk-shimmer 1.2s infinite linear;
}
.sk-title { height: 16px; width: 65%; margin-bottom: 12px; }
.sk-meta  { height: 12px; width: 42%; }
@keyframes sk-shimmer {
  0%   { background-position: -120px 0; }
  100% { background-position: 320px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
}

.card-toprow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.card-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.card-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.card-info { min-width: 0; flex: 1; }

.card-weather {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.card-weather .mdi {
  font-size: 24px;
  color: var(--text);
  line-height: 1;
}
.weather-temp {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.weather-precip {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}
.weather-precip .mdi { font-size: 10px; color: var(--muted); }

.weather-precip.has-rain,
.weather-precip.has-rain .mdi {
  color: #378ADD;
}

/* Meerdaags: mini-strip met per festivaldag icoon + temp + neerslag */
.card-weather.is-strip {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.weather-day .mdi { font-size: 24px; line-height: 1; }
.weather-dow {
  font-size: 11px;
  color: var(--muted);
}
.weather-day-temp {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.weather-day .weather-precip { font-size: 10px; margin-top: 0; }
.weather-day .weather-precip .mdi { font-size: 10px; }

.card-countdown {
  font-size: 11px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

.live-badge {
  color: var(--live-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Kop-rij: titel links, iconen rechts, op één lijn. Scrollt mee met de lijst. */
#pickerHead {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
#pickerActions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  margin-right: -8px;   /* icoon-padding wegwerken zodat het net aan de rand valt */
}
#settingsBtn { order: 1; }   /* helemaal rechts, ongeacht de HTML-volgorde */

#helpBtn, #installBtn, #shareBtn, #settingsBtn {
  background: none;
  border: none;
  color: var(--muted);
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  transition: color 0.15s, background 0.15s;
}
#helpBtn:hover,  #installBtn:hover,  #shareBtn:hover,  #settingsBtn:hover  { color: var(--text); background: var(--surface); }
#helpBtn:active, #installBtn:active, #shareBtn:active, #settingsBtn:active { background: var(--border); }
#helpBtn svg,    #installBtn svg,    #shareBtn svg,    #settingsBtn svg    { display: block; }
#installBtn.hidden { display: none; }

.picker-empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}


/* ── Stage & schedule ─────────────────────────────────────────── */

.stage { margin-bottom: 8px; }

.stage-name {
  position: sticky;
  top: var(--header-h);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  z-index: 10;
}
/* tabs are at bottom now, so sticky offset stays the same */

ul { list-style: none; }

.entry {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.entry:last-child { border-bottom: none; margin-bottom: 16px; }

/* Fixed dot column keeps all rows aligned */
.dot-col {
  flex-shrink: 0;
  width: 18px;
  display: flex;
  align-items: center;
}

.entry-time {
  flex-shrink: 0;
  width: 126px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.end-time { font-size: 13px; }

.entry-artist {
  flex: 1;
  font-size: 15px;
  padding-left: 10px;
}

/* ── Heart button ─────────────────────────────────────────────── */

.heart-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin: -6px -6px -6px 4px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.heart-btn .mdi { font-size: 20px; line-height: 1; display: block; }
.heart-btn:active { transform: scale(0.85); }
.heart-btn.is-fav { color: var(--accent); }

.fav-mark { font-size: 13px; margin-right: 4px; }

.entry.upcoming .entry-time,
.entry.upcoming .entry-artist { color: var(--text); opacity: 0.6; }

.entry.current {
  background: var(--current-bg);
}
.entry.current .entry-time {
  color: var(--text);
  font-weight: 600;
  width: 108px; /* 126 - 18px dot-col = artists align */
}
.entry.current .entry-artist { font-weight: 600; }

.unit { font-size: 11px; font-weight: 400; color: var(--text); opacity: 0.5; margin-left: 1px; }

.live-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live-text);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.25); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.18); }
  56%       { transform: scale(1); }
}

#favBtn.has-favs .mdi {
  color: var(--accent);
  animation: heartbeat 1.8s ease-in-out infinite;
  transform-origin: center;
}

.entry.done {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.msg { padding: 24px 16px; color: var(--muted); font-size: 14px; }

.lineup-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 8px;
}
.lineup-soon-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.lineup-soon-sub {
  font-size: 14px;
  color: var(--muted);
}


/* ── Overlays ─────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── QR / Delen ───────────────────────────────────────────────── */

/* Zelfde stijl als de help/install-popup: gecentreerde kaart met blur,
   boven de picker (z 340, want delen zit nu op de picker). */
#qrOverlay {
  z-index: 340;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#qrInner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#qrHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#qrHeader h3 { font-size: 17px; font-weight: 700; color: var(--text); }

#closeQr {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}
#closeQr:hover { color: var(--text); }

#qrContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 20px;
}
#qrContent canvas { border-radius: 16px; }
#qrContent p { font-size: 13px; font-weight: 600; color: var(--muted); }

#nativeShareBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
#nativeShareBtn:hover  { filter: brightness(1.08); }
#nativeShareBtn:active { transform: scale(0.97); }
#nativeShareBtn svg { display: block; }

/* ── Weer overlay ─────────────────────────────────────────────── */

#weatherOverlay { align-items: stretch; flex-direction: column; background: rgba(0, 0, 0, 0.5); }

#weatherInner {
  background: var(--bg);
  width: 100%;
  max-width: 520px;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#weatherHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#weatherHeader h3 { font-size: 17px; font-weight: 700; color: var(--text); }
#closeWeather {
  background: none; border: none; color: var(--muted);
  font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 8px; line-height: 1;
}
#closeWeather:hover { color: var(--text); }

#weatherContent { flex: 1; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 16px); }
.wx-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 20px; }
.wx-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
}
/* Rechterkolom van de samenvatting: regen + "Updated …", verticaal gecentreerd. */
.wx-summary-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.wx-updated { font-size: 11px; color: var(--muted); }
.wx-summary-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wx-summary-icon { font-size: 42px; line-height: 1; flex-shrink: 0; }
.wx-summary-day { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.wx-summary-temp { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-summary-lo { color: var(--muted); font-weight: 400; font-size: 17px; }
.wx-summary-rain {
  font-size: 14px; font-weight: 700; color: #378ADD;
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.wx-summary-rain .mdi { font-size: 16px; }

.wx-list { padding: 4px 0; }
.wx-row {
  display: grid;
  grid-template-columns: 56px 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.wx-row.is-wet { background: var(--wet-bg); }
.wx-time { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.wx-icon { font-size: 22px; line-height: 1; }
.wx-temp { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-rain {
  font-size: 13px; color: #378ADD; text-align: right; white-space: nowrap;
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.wx-rain .mdi { font-size: 13px; }

/* ── Help overlay ─────────────────────────────────────────────── */

#helpOverlay, #installOverlay, #settingsOverlay {
  z-index: 350;
  padding: 24px;
  /* Frosted glass: minder zwart, pagina blurt erdoorheen. */
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#installInner,
#helpInner,
#settingsInner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#installHeader,
#helpHeader,
#settingsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#helpHeader h3, #installHeader h3, #settingsHeader h3 { font-size: 17px; font-weight: 700; color: var(--text); }

#closeInstall,
#closeHelp,
#closeSettings {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}
#closeHelp:hover, #closeInstall:hover, #closeSettings:hover { color: var(--text); }

#helpContent, #installContent { overflow-y: auto; padding: 8px 20px 20px; }

/* Instellingen: uiterlijk-keuze (licht / donker / auto) */
#settingsContent { padding: 16px 0 20px; overflow-y: auto; }
.setting-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 0 20px 12px;
}
.theme-options { display: flex; gap: 10px; padding: 0 20px; }
.theme-opt {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.theme-opt .mdi { font-size: 24px; }
.theme-opt:hover { color: var(--text); }
.theme-opt.selected { color: var(--accent); border-color: var(--accent); }
.setting-hint { font-size: 12px; color: var(--muted); padding: 14px 20px 0; line-height: 1.5; }

.accent-options { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 20px; }
.accent-opt {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color 0.15s, transform 0.1s;
}
.accent-opt:active { transform: scale(0.9); }
.accent-opt.selected { outline-color: var(--text); }
/* Adaptief accent: half licht / half donker. */
.accent-mono { background: linear-gradient(135deg, #f4f3ef 0 50%, #141414 50% 100%); }

/* Live preview van de highlight-kleur: AREA-balk + "now playing"-rij. */
.accent-preview {
  margin: 18px 20px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ap-area {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px;
}
.ap-entry {
  display: flex; align-items: center; gap: 10px;
  background: var(--current-bg);
  padding: 11px 14px;
}
.ap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live-text); flex-shrink: 0; }
.ap-time { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ap-artist { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--text); }

/* Sleep-om-te-bevestigen: app resetten */
.slide-reset {
  --slide-progress: 0;
  position: relative;
  margin: 0 20px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.slide-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--muted);
  opacity: calc(1 - var(--slide-progress) * 1.4);
  pointer-events: none;
}
.slide-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 42px; height: 42px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
}
.slide-thumb:active { cursor: grabbing; }
.slide-thumb svg { display: block; }

.install-intro {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  padding: 14px 0 6px;
}

.help-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.help-row:last-child { border-bottom: none; }

.help-icon {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  justify-content: center;
  margin-top: 2px;
  color: var(--accent);
}
.help-icon svg { width: 22px; height: 22px; }
.help-icon .mdi { font-size: 22px; line-height: 1; }
.help-icon .live-dot { margin-top: 5px; }
/* Icoontjes in de lopende tekst */
.help-inline { font-size: 16px; vertical-align: -2px; color: var(--accent); }

.help-icon-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 3px 4px;
  width: auto;
}

.help-row p { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.help-row strong { font-weight: 600; }

/* ── Kaart overlay ────────────────────────────────────────────── */

#mapOverlay {
  align-items: stretch;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
}

#mapInner {
  background: var(--bg);
  width: 100%;
  max-width: 520px;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#mapHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#mapHeader h3 { font-size: 17px; font-weight: 700; color: var(--text); }

#mapScroll {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;   /* browser-zoom/scroll uit; wij regelen het zelf */
}

#mapImg {
  /* geen max-width/height: afbeelding blijft op volle resolutie,
     de fit gebeurt via transform scale in JS */
  flex-shrink: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

#closeMap {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}
#closeMap:hover { color: var(--text); }

/* ── Mijn Schema ──────────────────────────────────────────────── */

#mySchedule {
  align-items: stretch;
  flex-direction: column;
  background: rgba(0,0,0,0.5);
}

#myScheduleInner {
  background: var(--bg);
  width: 100%;
  max-width: 520px;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#myScheduleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#myScheduleHeader h3 { font-size: 17px; font-weight: 700; color: var(--text); }

#closeMySchedule {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}
#closeMySchedule:hover { color: var(--text); }

#myScheduleContent { overflow-y: auto; flex: 1; padding-bottom: env(safe-area-inset-bottom, 16px); }

.my-day-label {
  padding: 10px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}

.my-list { list-style: none; margin-bottom: 8px; }

.my-entry {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.my-entry.past { opacity: 0.4; }
.my-entry.current { background: var(--current-bg); }
.my-entry.conflict { border-left: 3px solid #e6a817; }

.my-entry .dot-col {
  flex-shrink: 0;
  width: 18px;
  display: flex;
  align-items: center;
}

.my-time {
  flex-shrink: 0;
  width: 126px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.my-entry.current .my-time { color: var(--text); font-weight: 600; width: 108px; }

.my-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
}
.my-artist {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.my-entry.current .my-artist { font-weight: 700; }
.my-stage {
  font-size: 12px;
  color: var(--muted);
}

.conflict-icon { font-size: 14px; flex-shrink: 0; }

.my-schedule-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 8px;
  text-align: center;
}
.my-schedule-empty-title { font-size: 18px; font-weight: 700; color: var(--text); }
.my-schedule-empty-sub   { font-size: 14px; color: var(--muted); }

/* keep old class for safety */
.artist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  transition: background 0.1s;
}
.artist-row:active   { background: var(--surface); }
.artist-row.is-fav   { color: var(--text); }
.artist-row .star    { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }


/* ── Tikkie support popup ────────────────────────────────────────────────────
   Small card that slides up from the bottom. Sits above the picker/schedule
   (z-index 300) but below the modal overlays (settings/help at 340+). The
   anyOverlayOpen() guard also keeps it from appearing while a modal is open. */
#tikkiePopup {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translate(-50%, 160%);
  width: min(440px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  z-index: 320;
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .38s;
}
#tikkiePopup.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
#tikkiePopup .tk-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}
#tikkiePopup .tk-text  { flex: 1; min-width: 0; }
#tikkiePopup .tk-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
#tikkiePopup .tk-sub   { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
#tikkiePopup .tk-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
}
#tikkiePopup .tk-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 18px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

/* ── Diagnostics-popup (verborgen: 5× op de titel tikken) ─────────────────────── */
#diagOverlay {
  z-index: 340;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#diagInner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#diagHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#diagHeader h3 { font-size: 17px; font-weight: 700; color: var(--text); }
#closeDiag {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}
#closeDiag:hover { color: var(--text); }
#diagContent {
  overflow-y: auto;
  padding: 14px 20px 20px;
  font-size: 13px;
  color: var(--text);
}
.diag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.diag-row .diag-label { color: var(--muted); }
.diag-sub { color: var(--muted); font-size: 12px; margin: 6px 0 2px; }
.diag-sep { height: 1px; background: var(--border); margin: 12px 0; }
.diag-pings { list-style: none; margin: 0; padding: 0; }
.diag-ping {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.diag-ping:first-child { border-top: none; }
.diag-ping .pdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.diag-ping .pdot.ok   { background: var(--live-text); }
.diag-ping .pdot.fail { background: #e5484d; }
.diag-ping .ptime { color: var(--muted); }
.diag-ping .pms   { margin-left: auto; color: var(--muted); }
.diag-empty { color: var(--muted); padding: 8px 0; }
.diag-note  { color: var(--muted); font-size: 12px; margin-top: 14px; line-height: 1.5; }
.diag-pinging { color: var(--live-text); }

/* ── Privacy-toggle (analytics aan/uit) ───────────────────────────────────────── */
.privacy-toggle {
  width: calc(100% - 40px);
  margin: 0 20px;                 /* zelfde inspringing als .accent-preview / .slide-reset */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  color: var(--text);
}
.privacy-toggle .pt-text  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.privacy-toggle .pt-title { font-size: 14px; font-weight: 600; }
.privacy-toggle .pt-sub   { font-size: 12px; color: var(--muted); }
/* Alleen de schakelaar zelf is klikbaar (niet de hele kaart of de Privacy-link). */
.privacy-toggle .pt-switch {
  flex-shrink: 0;
  width: 44px; height: 26px;
  padding: 0;
  border: none;
  -webkit-appearance: none; appearance: none;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.18s;
}
.privacy-toggle .pt-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s, background 0.18s;
}
.privacy-toggle .pt-switch[aria-checked="true"] { background: var(--accent); }
.privacy-toggle .pt-switch[aria-checked="true"] .pt-knob { transform: translateX(18px); background: var(--on-accent); }

/* ── Privacy/Cookies-links onderaan de picker ─────────────────────────────────── */
#legalLinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 4px;
  padding: 8px;
  font-size: 12px;
  color: var(--muted);
}
#legalLinks a { color: var(--muted); text-decoration: none; }
#legalLinks a:hover { color: var(--text); text-decoration: underline; }
.privacy-toggle .pt-sub a { color: var(--accent); text-decoration: none; }
.privacy-toggle .pt-sub a:hover { text-decoration: underline; }

/* ── Cookie-consent banner (alleen voor Google Analytics; opt-in) ──────────────── */
#cookieBanner {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  z-index: 330;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#cookieBanner .cb-text { font-size: 13px; line-height: 1.5; color: var(--text); }
#cookieBanner .cb-text a { color: var(--accent); }
#cookieBanner .cb-actions { display: flex; gap: 10px; }
#cookieBanner .cb-btn {
  flex: 1;                          /* gelijke knoppen: weigeren net zo makkelijk als accepteren */
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
#cookieBanner .cb-btn:hover { border-color: var(--muted); }
#cookieBanner .cb-accept {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}