/* ============================================
   VALËT PWA — Styles
   Spejler iOS-appens design 1:1
   ============================================ */

/* ============================================
   THEME SYSTEM
   Default = dark mode (matcher den eksisterende app)
   Override via :root[data-theme="light"] (sat af tid-baseret JS)
   Brand-farver (rød/lilla/blå) er IDENTISKE i begge temaer
   ============================================ */
:root {
  color-scheme: light dark;  /* fortæller iOS at vi understøtter begge temaer */

  /* Typografi — ÉN font (Manrope) + 5-niveau type-skala (DESIGN-STANDARD §2) */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-display:  28px;   /* Display — hero/sektion-overskrifter mellem Titull og Nëntitull (vægt 800) */
  --fs-title:    30px;   /* Titull — ANKER: VALËT-wordmarkets størrelse definerer ALLE side-titler (vægt 800) */
  --title-top:   8px;    /* ANKER: top-afstand for ALLE side-titler (så højt op som muligt under safe-area) */
  --fs-subtitle: 18px;   /* Nëntitull (vægt 700) */
  --fs-subsub:   15px;   /* Nën-nëntitull (vægt 600) */
  --fs-body:     14px;   /* Tekst (vægt 400) */
  --fs-caption:  12px;   /* Caption/meta (vægt 400) */
  --fs-micro:    11px;   /* Mikro — badges, eyebrows, freq-labels (under Caption) */
  /* Spacing-skala (4/8/12/16/20/24) — håndhæves; off-scale snappes i på-enhed-pass */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-2:   2px;   /* mikro — hårfine gaps */
  --space-32:  32px;  /* sektion */
  --space-40:  40px;  /* sektion */
  --space-48:  48px;  /* sektion (top) */

  /* Brand — SAMME i begge temaer */
  --valet-red:       rgb(227, 31, 36);    /* VALËT primær — albansk/kosova-flag rød */
  --valet-blue:      rgb(0, 122, 255);    /* VALËT sekundær (bølge-blå) — bruges sparsomt */
  --rk2-purple:      rgb(134, 1, 211);    /* RK2's faktiske brand-farve (lilla, fra logo) */
  --albanian-red:    var(--valet-red);     /* legacy alias */
  --rk2-blue:        var(--valet-blue);    /* legacy alias */

  /* Surface — DARK mode defaults (current behavior) */
  --bg-outer:        #0a0a0a;
  --bg-black:        #000000;              /* "app baggrund" — semantisk navn, men bruges i dark og light */
  --bg-app:          #000000;              /* nyere semantisk navn */
  --card-bg:         rgb(28, 28, 28);
  --card-bg-hover:   rgb(38, 38, 38);
  --card-bg-darker:  rgb(20, 20, 20);
  --row-bg:          rgba(255, 255, 255, 0.05);
  --row-bg-hover:    rgba(255, 255, 255, 0.08);
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-medium:   rgba(255, 255, 255, 0.12);

  /* Text — DARK defaults */
  --text-primary:    #ffffff;
  --text-white:      #ffffff;              /* legacy alias */
  --text-gray:       rgba(255, 255, 255, 0.55);
  --text-gray-dim:   rgba(255, 255, 255, 0.6);
  --text-muted:      rgba(255, 255, 255, 0.6);   /* A11y: 0.5→0.6 → ≈4.6:1 på sort (WCAG AA) */

  /* Mini/full-player surfaces — DARK */
  --player-bg:       rgb(26, 26, 26);
  --player-bg-hover: rgb(34, 34, 34);

  /* Layout — sprog-uafhængig */
  --app-max-width:        480px;
  --tab-bar-height:       40px;   /* ikon-rækkens højde (kompakt) */
  /* Bund-clearance: KUN en lille del af home-indicator-zonen reserveres, så
     ikonerne sidder lavt (X-stil) i stedet for at svæve over hele safe-area. */
  --tab-clear:            env(safe-area-inset-bottom);
  --mini-player-height:   50px;

  /* Radius-skala — ÉN kilde for alle kort/rækker (afløser 6 ad-hoc værdier) */
  --radius-row:   12px;   /* små rækker/chips i lister */
  --radius-card:  16px;   /* standard kort (programi, zbuloni, chips) */
  --radius-hero:  20px;   /* det store TANI LIVE-kort */

  /* Side-paddings — ÉN kilde for venstre/højre indrykning på tværs af tabs */
  --page-x:       20px;

  /* ── Overlay/scrim alpha-skala (tema-uafhængig) ──────────────────────────
     Tidligere hardkodede white-/black-alpha-literaler, nu tokens med UÆNDRET
     værdi i begge temaer (bevarer 1:1-renderingen — ingen light-flip). Navnet
     angiver farve + opacitet i %. (Indført ved token-oprydning 2026-06-13.) */
  --ov-white-00: rgba(255,255,255,0);
  --ov-white-03: rgba(255,255,255,0.03);
  --ov-white-04: rgba(255,255,255,0.04);
  --ov-white-05: rgba(255,255,255,0.05);
  --ov-white-06: rgba(255,255,255,0.06);
  --ov-white-07: rgba(255,255,255,0.07);
  --ov-white-08: rgba(255,255,255,0.08);
  --ov-white-10: rgba(255,255,255,0.1);
  --ov-white-12: rgba(255,255,255,0.12);
  --ov-white-14: rgba(255,255,255,0.14);
  --ov-white-15: rgba(255,255,255,0.15);
  --ov-white-16: rgba(255,255,255,0.16);
  --ov-white-18: rgba(255,255,255,0.18);
  --ov-white-20: rgba(255,255,255,0.2);
  --ov-white-25: rgba(255,255,255,0.25);
  --ov-white-32: rgba(255,255,255,0.32);
  --ov-white-35: rgba(255,255,255,0.35);
  --ov-white-40: rgba(255,255,255,0.4);
  --ov-white-45: rgba(255,255,255,0.45);
  --ov-white-50: rgba(255,255,255,0.5);
  --ov-white-55: rgba(255,255,255,0.55);
  --ov-white-70: rgba(255,255,255,0.7);
  --ov-white-85: rgba(255,255,255,0.85);
  --ov-white-95: rgba(255,255,255,0.95);
  --ov-black-04: rgba(0,0,0,0.04);
  --ov-black-05: rgba(0,0,0,0.05);
  --ov-black-06: rgba(0,0,0,0.06);
  --ov-black-08: rgba(0,0,0,0.08);
  --ov-black-10: rgba(0,0,0,0.1);
  --ov-black-15: rgba(0,0,0,0.15);
  --ov-black-20: rgba(0,0,0,0.2);
  --ov-black-25: rgba(0,0,0,0.25);
  --ov-black-30: rgba(0,0,0,0.3);
  --ov-black-35: rgba(0,0,0,0.35);
  --ov-black-40: rgba(0,0,0,0.4);
  --ov-black-45: rgba(0,0,0,0.45);
  --ov-black-50: rgba(0,0,0,0.5);
  --ov-black-55: rgba(0,0,0,0.55);
  --ov-black-60: rgba(0,0,0,0.6);
  --ov-black-70: rgba(0,0,0,0.7);
  --ov-black-75: rgba(0,0,0,0.75);

  /* ── Brand-tints (tema-uafhængig) — brand-farve med opacitet ───────────── */
  --tint-red-08: rgba(227,31,36,0.08);
  --tint-red-12: rgba(227,31,36,0.12);
  --tint-red-14: rgba(227,31,36,0.14);
  --tint-red-15: rgba(227,31,36,0.15);
  --tint-red-18: rgba(227,31,36,0.18);
  --tint-red-20: rgba(227,31,36,0.2);
  --tint-red-50: rgba(227,31,36,0.5);
  --tint-purple-18: rgba(134,1,211,0.18);
  --tint-purple-30: rgba(134,1,211,0.3);

  /* ── Dekorative / gradient-stops + status (tema-uafhængig) ───────────────
     Bespoke farver bevaret 1:1 (hero-gradienter, avatar-placeholders, status).
     Stations-specifikke farver bør på sigt komme fra DB (brand_colors). */
  --tile-text:          #111;        /* mørk tekst på hvid flise (§3) */
  --fixed-white:        #ffffff;     /* ALTID hvid i begge temaer — tekst/ikoner på mættede farveflader + hvide logo-fliser/chips. Flipper ALDRIG (jf. bug-noten ~l.392). */
  --hero-red-deep:      #7a0d10;      /* hero-gradient: mørk-rød ende */
  --hero-purple-deep:   #3a0166;      /* hero-gradient (RK2): mørk-lilla ende */
  --hero-generic-1:     #2c2c30;      /* neutral fallback-hero top */
  --hero-generic-2:     #141417;      /* neutral fallback-hero bund */
  --hero-initials:      #3a3a3a;      /* logo-fallback-initialer på neutral hero */
  --tani-red-mid:       #8b1518;      /* TANI LIVE-hero: rød gradient-midt */
  --tani-red-deep:      #4a0c0e;      /* TANI LIVE-hero: rød gradient-ende */
  --avatar-red-deep:    #b0151b;      /* host-avatar gradient (rød) */
  --avatar-purple-deep: #560186;      /* host-avatar gradient (lilla) */
  --avatar-blue-deep:   #0050b4;      /* host-avatar gradient (blå) */
  --avatar-grad-1:      rgb(90,70,130);   /* person-avatar placeholder top */
  --avatar-grad-2:      rgb(45,35,70);    /* person-avatar placeholder bund */
  --avatar2-grad-1:     rgb(100,80,140);  /* program-detalje-avatar top */
  --avatar2-grad-2:     rgb(50,40,80);    /* program-detalje-avatar bund */
  --hover-light:        rgb(250,250,250); /* mini-player hover (light mode) */
  --warn-amber:         #d68a00;      /* timeline: kontrovers/sanktion-prik */
  --success:            #4ade80;      /* status: succes */
  --error:              #f87171;      /* status: fejl */
}

/* ============================================
   LIGHT MODE — auto-aktiveret når iOS er i lyst tema
   ============================================ */
:root[data-theme="light"] {
    /* Surface — LIGHT */
    --bg-outer:        #f2f2f7;            /* iOS gruppet baggrund-stil */
    --bg-black:        #ffffff;            /* app baggrund (navnet er legacy — det er HVID i light mode) */
    --bg-app:          #ffffff;
    --card-bg:         rgb(247, 247, 250);
    --card-bg-hover:   rgb(240, 240, 245);
    --card-bg-darker:  rgb(252, 252, 255);
    --row-bg:          rgba(0, 0, 0, 0.04);
    --row-bg-hover:    rgba(0, 0, 0, 0.07);
    --border-subtle:   rgba(0, 0, 0, 0.08);
    --border-medium:   rgba(0, 0, 0, 0.15);

    /* Text — LIGHT */
    --text-primary:    #000000;
    --text-white:      #000000;            /* legacy alias — bliver SORT i light mode */
    --text-gray:       rgba(0, 0, 0, 0.6);
    --text-gray-dim:   rgba(0, 0, 0, 0.55);
    --text-muted:      rgba(0, 0, 0, 0.6);   /* A11y: 0.5→0.6 → ≈5.7:1 på hvid (WCAG AA) */

    /* Mini/full-player surfaces — LIGHT */
    --player-bg:       rgb(245, 245, 248);
    --player-bg-hover: rgb(238, 238, 242);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Form-felter arver ikke font automatisk i alle browsere */
input, button, select, textarea {
  font-family: inherit;
}

html, body {
  /* 100dvh = "dynamic viewport height" — fylder hele skærmen korrekt i BÅDE
     Safari (URL-bar-collapse) OG standalone PWA. Fallback 100% for ældre browsere.
     NB: den gamle `min-height: -webkit-fill-available` er FJERNET — den fik
     iOS-standalone til at under-fylde (efterlod ubrugt plads). */
  height: 100%;
  height: 100vh;   /* 100vh i standalone = fuld skærm (efter black-translucent-fjernelse) */
  background: var(--bg-app);
  color: var(--text-primary);
  /* Sans-serif til UI; serif er forbeholdt VALËT-logoet (signatur) */
  font-family: var(--font);
  font-size: var(--fs-subtitle);
  line-height: 1.4;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Tilgængelighed: synlig fokus-ring ved tastatur-navigation (ikke ved muse-klik) */
:focus-visible {
  outline: 2px solid var(--valet-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   APP SHELL — fylder fuld viewport på mobil og desktop.
   Portrait: stacked layout. Landscape: sidebar + content + persistent player.
   ============================================ */
.app-shell {
  height: 100%;
  height: 100dvh;   /* eksplicit — landscape-griddets 1fr-række kollapser hvis
                       %-arvekæden brister i nogle browsere (Firefox/desktop) */
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--bg-app);
  overflow: hidden;
  max-width: 100%;
}

/* Side-nav er skjult som default (kun synlig i landscape) */
.side-nav {
  display: none;
}

/* ============================================
   APP LAYOUT
   ============================================ */
#app {
  height: 100%;
  /* Plads til kompakt tab-bar + mini-player */
  padding-bottom: calc(var(--space-48) + var(--mini-player-height));
  position: relative;
}

.tab-page {
  display: none;
  height: 100%;
  overflow: hidden;
}

.tab-page.active {
  display: block;
}

.scroll-container {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
}

/* ============================================
   HOME VIEW (SHTËPI) — matches mockup screen 2
   ============================================ */
.home-header {
  text-align: center;
  padding: var(--space-32) 0 var(--space-24);
}

.valet-logo {
  /* Standalone logo (sticker bevared for landscape side-nav og Programi-header) */
  font-family: var(--font);
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: 5px;
  color: var(--text-white);
  margin: 0;
  line-height: 1;
}

.valet-tagline {
  /* Bevares som klasse men ikke længere brugt i home-header (fjernet i v0.0011) */
  margin: var(--space-8) 0 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-gray);
  text-transform: uppercase;
}

/* ===== HOME TOP-BAR (v0.0013 — logo helt op) ===== */
.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Side-titel-loven: VALËT = samme sted + størrelse som ZBULONI/PROGRAMI/AUDIO IME.
     Venstre 20px (flugter lodret); top = var(--title-top) (ankret, så højt op som muligt). */
  padding: var(--title-top) var(--space-20) var(--space-20);
  position: sticky; top: 0; z-index: 7; background: var(--bg-app);  /* titel bliver hængende */
}

.home-topbar-logo {
  font-size: var(--fs-title);  /* Side-titel-loven: ankeret — alle side-titler følger denne */
  font-weight: 800;
  letter-spacing: 5px;  /* afstemt med .valet-logo / .programi-logo / sidebar-mark */
  line-height: 1;
  margin: 0;
}

.app-version {
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  color: var(--ov-white-20);
  text-transform: uppercase;
  line-height: 1;
}

:root[data-theme="light"] {
  .home-topbar-logo { color: var(--text-primary); }
  .app-version { color: var(--ov-black-25); }
}

/* === Hjem-grid wrapper (flex column i portrait, 2-kolonne grid i landscape) === */
.home-grid {
  display: flex;
  flex-direction: column;
}

/* Skjul landscape-only elementer i portrait */
.home-section-upcoming,
.home-backdrop {
  display: none;
}

/* === Sektion-headers === */
.home-section {
  padding: 0 0 var(--space-24);
}

.home-section-title {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-gray);
  padding: var(--space-4) var(--space-20) var(--space-12);   /* venstre = 20px, flugter med VALËT-logoet */
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* === TRANSMETUESIT — horisontal scroll med broadcaster-chips === */
.broadcasters-row {
  display: flex;
  gap: var(--space-12);
  /* top-padding så badge'en (top:-6px) ikke klippes af overflow-x: auto */
  padding: var(--space-12) var(--page-x) var(--space-4);
  scroll-padding-left: var(--page-x);  /* så scroll-snap IKKE skjuler venstre-margin (RTK flugter med VALËT/TANI LIVE) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  min-width: 0;   /* lad rækken scrolle internt i stedet for at skubbe siden bredere */
}

/* Forhindr vandret side-overflow på forsiden (flise-rækken kan ellers presse bredden) */
#page-home .scroll-container, .home-grid { min-width: 0; max-width: 100%; overflow-x: hidden; }

.broadcasters-row::-webkit-scrollbar {
  display: none;
}

.broadcaster-chip {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-card);
  /* Fast hvid logo-flise i BEGGE temaer — station-logoer er designet til hvid
     baggrund. (Før: var(--text-white) som flippede til SORT i light mode = bug.) */
  background: var(--fixed-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  scroll-snap-align: start;
  border: none;
}

.broadcaster-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px var(--ov-black-50);
}

.broadcaster-chip:active {
  transform: scale(0.96);
}

.broadcaster-chip img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.broadcaster-chip-fallback {
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--tile-text);   /* fast mørk på hvid flise (matcher #fff chip i begge temaer) */
  letter-spacing: 0.5px;
}

/* ===== Broadcaster-fliser (forside): firkant + navn → åbner dørene til stationer ===== */
.broadcaster-chip { position: relative; }   /* for badge */

.broadcaster-tile {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 96px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
}
.broadcaster-tile-name {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-gray);
  max-width: 96px;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.broadcaster-tile.active .broadcaster-tile-name { color: var(--valet-red); }
.broadcaster-tile.active .broadcaster-chip {
  outline: 2px solid var(--valet-red);
  outline-offset: 2px;
}
.broadcaster-tile-badge {
  position: absolute;
  top: -6px; right: -6px;   /* layout-specifik positionering (ikke spacing-skala) */
  min-width: 20px; height: 20px;
  padding: 0 var(--space-4);
  border-radius: 10px;
  background: var(--valet-red);
  color: var(--fixed-white);
  font-size: var(--fs-micro); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* "Dørene åbnet": panel med broadcasterens stationer */
.broadcaster-stations {
  display: none;
  margin: var(--space-4) var(--page-x) 0;
  padding: var(--space-12) var(--space-16);
  background: var(--card-bg);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.broadcaster-stations.open { display: block; }
/* Broadcasterens "univers" — header med logo + navn + beskrivelse + showcase-indgang */
.bc-universe-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-12);
  border-bottom: 0.5px solid var(--border-subtle);
  flex-wrap: wrap;
}
.bc-universe-logo {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: var(--radius-row);
  background: var(--fixed-white);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
  overflow: hidden;
}
.bc-universe-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bc-universe-fallback { font-size: var(--fs-subtitle); font-weight: 800; color: var(--tile-text); }
.bc-universe-id { flex: 1; min-width: 0; }
.bc-universe-name { font-size: var(--fs-subtitle); font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.bc-universe-desc { font-size: var(--fs-caption); color: var(--text-gray); line-height: 1.4; margin-top: var(--space-4); }
.bc-universe-explore {
  display: block;
  text-align: center;
  margin: var(--space-12) auto var(--space-2);
  font-size: var(--fs-body); font-weight: 700;
  color: var(--valet-red);
  text-decoration: none;
  padding: var(--space-8) var(--space-20);
  border: 1px solid var(--valet-red);
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
}
.bc-universe-explore:active { transform: scale(0.97); }

.bc-stations-list { display: flex; flex-direction: column; gap: var(--space-8); }
.bc-station {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  background: var(--row-bg);
  border: none;
  border-radius: var(--radius-row);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.bc-station:hover { background: var(--row-bg-hover); }
.bc-station-logo {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--fixed-white);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  overflow: hidden;
}
.bc-station-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bc-station-logo-fallback { font-size: var(--fs-body); font-weight: 800; color: var(--tile-text); }
.bc-station-name { flex: 1; font-size: var(--fs-body); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-station-tag { font-size: var(--fs-caption); color: var(--text-muted); flex-shrink: 0; }
.bc-station-play { width: 22px; height: 22px; color: var(--valet-red); flex-shrink: 0; }

/* ============================================
   STATION UNIVERSE (in-app dybde-visning)
   ============================================ */
.universe {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--bg-app);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  visibility: hidden;
}
.universe.open { transform: translateY(0); visibility: visible; }
.universe-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: var(--space-16);
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ov-black-35);
  color: var(--fixed-white);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.universe-close svg { width: 22px; height: 22px; }
.universe-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--space-40) + env(safe-area-inset-bottom));
}

/* Hero — brand-gradient pr. station */
.universe-hero {
  background: linear-gradient(160deg, var(--valet-red) 0%, var(--hero-red-deep) 100%);
  color: var(--fixed-white);
  /* §12 immersiv full-player: hero fylder næsten hele skærmen → KUN næste sektions overskrift
     ("Om stacionin") peeker i bunden = swipe-op-signal (Besnik 2026-06-26). Info'en under
     fjernes IKKE — den ligger blot lige under skærmkanten. FAST height (ikke min-height) →
     ens højde for ALLE stationer; visual-feltet krymper billedet i stedet for at vokse hero'en. */
  /* Peek: hero'en fylder næsten hele skærmen; KUN "OM"-overskriften skal lige ane sig forneden
     (swipe-op-signal) → mest plads til selve playeren. Safe-area (home-indicator) trækkes fra
     så hintet ikke forsvinder under home-indicatoren. */
  height: calc(100dvh - 46px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) var(--space-20) var(--space-24);
  position: relative;
  overflow: hidden;
}
/* §12 trin (c) immersion: blurred brand-backdrop bag visualet (fylder hero'en som Spotifys
   full-bleed foto, men afledt af stations-logoet). Brand-gradienten ovenpå sikrer kontrast. */
.universe-hero-bg {
  position: absolute; inset: -20%;
  background-size: cover; background-position: center;
  filter: blur(44px) saturate(1.5);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}
.universe-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ov-black-20) 0%, transparent 35%, var(--ov-black-45) 100%);
}
.universe-hero > *:not(.universe-hero-bg):not(.universe-like-btn):not(.up-actions) { position: relative; z-index: 1; }
/* A. top-bar (kontekst-label; minimér-chevron flyder via #universe-close) */
.universe-hero-top { display: flex; align-items: center; justify-content: center; min-height: 26px; }
.universe-hero-context { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* B. det store visual (vokser og fylder midten) */
.universe-hero-visual { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-16) 0; }
.universe-hero-art {
  height: min(66vw, 320px); width: auto; aspect-ratio: 1 / 1;
  /* max-height: 100% → billedet KAN krympe i visual-feltet, så switcheren (multi-station)
     absorberes dér i stedet for at vokse hele hero'en → ens højde for ALLE stationer. */
  max-height: 100%;
  box-sizing: border-box;   /* padding inde i boksen → diashow-skift ændrer aldrig størrelsen */
  border-radius: 22px;
  background: var(--fixed-white);
  padding: var(--space-16);
  object-fit: contain;
  box-shadow: 0 16px 44px -12px var(--ov-black-50);
  transition: opacity 0.3s ease;   /* §12 hero-diashow cross-fade */
}
/* §12 cover-art: ægte album-foto = full-bleed (intet hvidt flise-felt, fylder helt).
   SAMME boks-størrelse som logo-sliden — kun visuel behandling skifter, så layoutet
   ALDRIG hopper når diashowet veksler (box-sizing:border-box → padding ændrer ikke boksen). */
.universe-hero-art.is-cover {
  background: none;
  padding: 0;
  object-fit: cover;
}
/* C. bund-bar (titel + kontroller, ikke-krympende) */
.universe-hero-bar { flex-shrink: 0; }
.universe-hero-titles { margin-bottom: var(--space-4); }
/* §Kryptonite — live progress-bar. [hidden] når duration=0 (Icecast/iTunes) → hop-fri. */
.universe-hero-progress { display: flex; align-items: center; gap: var(--space-8); width: 100%; margin: var(--space-8) 0 var(--space-12); }
.universe-hero-progress[hidden] { display: none; }
.uhp-time { flex: 0 0 auto; min-width: 34px; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; color: var(--fixed-white); opacity: 0.7; }
.uhp-total { text-align: right; }
.uhp-track { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--ov-white-08); overflow: hidden; }
.uhp-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--progress-fill, var(--fixed-white)); transition: width 0.5s linear; }
.universe-hero-sub { font-size: var(--fs-body); opacity: 0.8; margin-top: var(--space-2); }
.universe-hero.rk2 { background: linear-gradient(160deg, var(--rk2-purple) 0%, var(--hero-purple-deep) 100%); }
/* Neutral fallback-gradient for stationer UDEN brand-farve (fx Urban FM) — ren, ikke mudder-rød */
.universe-hero.generic { background: linear-gradient(160deg, var(--hero-generic-1) 0%, var(--hero-generic-2) 100%); }
/* Logo-fallback (initialer): neutral som default; JS sætter brand-farve inline hvor den findes */
.universe-hero-logo-fallback { display: flex; align-items: center; justify-content: center; color: var(--hero-initials); font-size: 64px; font-weight: 800; } /* §1-undtagelse: dekorativ avatar-initial (stort hero-visual), ikke type-skala */
.universe-history-text { color: var(--text-gray); font-size: var(--fs-body); line-height: 1.6; padding: 0 var(--page-x); }
.universe-hero-content { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.universe-hero-logo {
  width: 92px; height: 92px;
  border-radius: 20px;
  background: var(--fixed-white);
  padding: var(--space-12);
  object-fit: contain;
  box-shadow: 0 10px 30px -8px var(--ov-black-50);
}
.universe-hero-tag { margin-top: var(--space-16); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; }
.universe-hero-name { font-size: var(--fs-display); font-weight: 800; line-height: 1.1; margin-top: var(--space-4); }
.universe-hero-live { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.5px; opacity: 0.9; }
.universe-hero-live .live-dot { color: var(--fixed-white); }
.universe-hero-freq { background: var(--ov-white-20); padding: var(--space-2) var(--space-8); border-radius: 999px; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
/* §12: hero-now = den STORE titel (program/sang); hero-sub = station/vært */
.universe-hero-now { font-size: var(--fs-subtitle); font-weight: 800; line-height: 1.2; }
.universe-hero-host { font-size: var(--fs-body); opacity: 0.85; margin-top: var(--space-2); }
/* Stabil hero: tag/undertitel = ÉN linje (ellipsis), så playeren ikke hopper ved bladring. */
.universe-hero-tag,
.universe-hero-name,
.universe-hero-sub,
.universe-hero-host {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Titlen (sang/program) MÅ bruge op til 2 linjer — lange navn klippes ikke midt i et ord.
   Den faste (næsten-fuldskærms) hero lader visualen absorbere den 2. linje → kontrollerne flytter sig ikke. */
.universe-hero-now {
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ============================================================
   LAG 1 FULL-PLAYER (mockup): top-række → artwork → program-panel
   → sang-panel → kontroller. Bygger oven på .universe-hero (fast
   højde, 88px Om-peek). Kontrol-rækken nedenfor er HELLIG/uændret.
   ============================================================ */
.up-player { gap: var(--space-8); }

/* TOP-RÆKKE: logo+navn CENTRERET · ♥ station (højre) · ⌄ close (shell, absolut venstre).
   3-kolonne-grid: tom venstre-celle (plads til chevron) · centreret mini · ♥ højre. */
.up-topbar { flex: 0 0 auto; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: var(--space-8); min-height: 40px; }
.up-mini { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-8); min-width: 0; }

/* HØJRE ACTION-KOLONNE — ♥ station · cast · del, stablet lodret ved siden af artwork.
   Absolut top-højre (undtaget z-index-reglen ovenfor), så bunden frigøres = mindre komprimeret. */
.up-actions { position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top)); right: var(--space-16); display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.up-action-btn { width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer; background: var(--ov-black-25); color: var(--fixed-white); opacity: .85; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); transition: opacity .15s, transform .15s, color .15s; }
.up-action-btn:active { transform: scale(.9); }
.up-action-btn svg { width: 19px; height: 19px; }
.up-action-btn.copied { color: var(--valet-red); opacity: 1; }
/* Logo i SAMME størrelse som side-ikonerne (40px) → plads til fuldt stationsnavn ved siden af. */
.up-mini-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--ov-white-12); flex: 0 0 auto; }
.up-mini-fallback { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--fixed-white); }
.up-mini-name { font-size: var(--fs-body); font-weight: 800; letter-spacing: .3px; color: var(--fixed-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ♥ hjerter — fælles basis. Hvidt outline → rødt fyld når aktiv. */
.up-heart { flex: 0 0 auto; border: none; cursor: pointer; background: var(--ov-black-35); color: var(--fixed-white); display: flex; align-items: center; justify-content: center; border-radius: 50%; backdrop-filter: blur(8px); transition: transform .15s, color .15s; }
.up-heart:active { transform: scale(1.2); }
.up-heart.is-fav { color: var(--valet-red); }
.up-heart--station { width: 40px; height: 40px; }
.up-heart--station svg { width: 22px; height: 22px; }
.up-heart--panel { width: 38px; height: 38px; background: var(--ov-black-25); }
.up-heart--panel svg { width: 20px; height: 20px; }

/* ARTWORK — FAST, mindre boks (fuldt billede, aldrig beskåret). margin-top:auto skubber
   HELE player-blokken (artwork+paneler+kontroller) ned, så luften samles ÉT sted øverst
   under stationsnavnet — ikke som huller mellem elementerne. */
.up-artwork { flex: 0 0 auto; margin-top: auto; display: flex; align-items: center; justify-content: center; padding: var(--space-12) 0 var(--space-20); }
.up-artwork .up-art-img { width: min(44vw, 184px); height: min(44vw, 184px); }
/* Album-cover må OGSÅ vises fuldt (contain i den hvide boks) — ikke beskåret. */
.up-art-img.is-cover { object-fit: contain; background: var(--fixed-white); padding: var(--space-12); }

/* PANELER — afrundede kort (program lyst, sang mørkt) */
.up-panel { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-12); border-radius: 18px; padding: var(--space-12) var(--space-16); }
.up-panel--program { background: var(--ov-white-12); }
.up-panel--song { background: var(--ov-black-45); flex-direction: column; align-items: stretch; gap: var(--space-8); }
.up-panel-text { flex: 1 1 auto; min-width: 0; }
/* PROGRAMI AKTUAL øverst (eyebrow, lidt større) → titel → vært → start–slut-tid */
.up-panel-live { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
.up-panel-live .live-dot { width: 8px; height: 8px; }
/* Klikbart program-panel → åbn program-detalje (intet synligt hint; kun aktiv-feedback). */
.up-panel--program.is-clickable { cursor: pointer; transition: background .15s; }
.up-panel--program.is-clickable:active { background: var(--ov-white-20); }
.up-panel-title { font-size: var(--fs-body); font-weight: 700; line-height: 1.25; color: var(--fixed-white); margin-top: var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-panel-sub { font-size: var(--fs-caption); opacity: .82; color: var(--fixed-white); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-panel-time { font-size: var(--fs-caption); font-variant-numeric: tabular-nums; opacity: .7; color: var(--fixed-white); margin-top: 1px; }
/* Task #36: program-progress — tynd bar under program-tiden, viser hvor langt det live
   program er nået. Hidden uden data (hop-frit). */
.up-prog { margin-top: var(--space-8); height: 3px; border-radius: 3px; background: var(--ov-white-20); overflow: hidden; }
.up-prog-fill { height: 100%; border-radius: 3px; background: var(--fixed-white); opacity: .85; transition: width .6s linear; }

/* SANG-PANEL indre — "KËNGA AKTUALE"-eyebrow IDENTISK med "PROGRAMI AKTUAL" (samme størrelse) */
.up-song-eyebrow { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .9; color: var(--fixed-white); }
.up-song-row { display: flex; align-items: center; gap: var(--space-12); }
.up-song-cover { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--ov-white-12); }
.up-song-cover--empty { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--ov-white-50); }
.up-song-text { flex: 1 1 auto; min-width: 0; }
.up-song-title { font-size: var(--fs-body); font-weight: 700; color: var(--fixed-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-song-artist { font-size: var(--fs-caption); opacity: .75; color: var(--fixed-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-song-progress { margin: 0; }
.up-muted { opacity: .6; font-weight: 600; }
.up-heart--song { width: 38px; height: 38px; background: var(--ov-black-25); }
.up-heart--song svg { width: 20px; height: 20px; }
/* Mut sang-♥ når der ingen sang er (synlig plads, men inaktiv) */
.up-heart--off { opacity: .3; cursor: default; }
.up-heart--off:active { transform: none; }

/* BUND-BJÆLKE: forbind (cast/AirPlay) · del — diskret/lille, så Om-peek bevares */
.up-bottombar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-12) 0; }
.up-bottom-btn { width: 34px; height: 34px; border: none; background: none; cursor: pointer; color: var(--fixed-white); opacity: .7; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: opacity .15s, transform .15s; }
.up-bottom-btn:active { transform: scale(.9); }
.up-bottom-btn svg { width: 18px; height: 18px; }
.up-bottom-btn.copied { color: var(--valet-red); opacity: 1; }

/* §12 store kontroller (ergonomi: bil/telefonholder) — ◀ · stor play-cirkel · ▶ */
.universe-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  margin-top: var(--space-8);
}
.universe-skip-btn {
  background: transparent;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--fixed-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.universe-skip-btn svg { width: 34px; height: 34px; }
.universe-skip-btn:active { transform: scale(0.9); }

/* #5 like-knap i full-player — øverste HØJRE hjørne, spejlet modsat close-knappen.
   Cirkulær blur-chip; hvidt hjerte → rødt fyld når favorit. Rører IKKE kontrol-rækken. */
.universe-like-btn {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: var(--space-16);
  z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ov-black-35);
  color: var(--fixed-white);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: transform .15s, color .15s;
}
.universe-like-btn svg { width: 21px; height: 21px; }
.universe-like-btn:active { transform: scale(1.2); }
.universe-like-btn.is-fav { color: var(--valet-red); }

.universe-play {
  width: 76px; height: 76px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fixed-white);
  color: var(--tile-text);
  border: none; cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 10px 26px -6px var(--ov-black-40), 0 0 0 1px var(--ov-white-14);
}
.universe-play svg { width: 38px; height: 38px; }
.universe-play:active { transform: scale(0.97); }
/* Arkiv-tilstand: station uden spilbar stream. Samme footprint som play-knappen (ens kontrol-bjælke),
   men mutet, ikke-interaktivt og uden skygge — signalerer "data her, ingen live-lyd". */
.universe-play-archive {
  background: var(--ov-white-08);
  color: var(--fixed-white);
  cursor: default;
  box-shadow: 0 0 0 1px var(--ov-white-14);
  opacity: 0.85;
}
.universe-play-archive svg { width: 30px; height: 30px; opacity: 0.9; }
.universe-archive-note {
  margin-top: var(--space-12);
  font-size: var(--fs-caption);
  color: var(--fixed-white);
  opacity: 0.75;
  text-align: center;
  line-height: 1.4;
}
.universe-switcher { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-20); }
.universe-chan {
  padding: var(--space-8) var(--space-20);
  border-radius: 999px;
  font-size: var(--fs-body); font-weight: 700;
  color: var(--fixed-white);
  background: var(--ov-white-15);
  border: 1px solid var(--ov-white-25);
}
.universe-chan.active { background: var(--fixed-white); color: var(--tile-text); border-color: var(--fixed-white); }

/* Sektioner */
/* §12 trin (b): hver sektion = et afrundet kort (Spotify-stak) der peeker under hero'en */
.universe-section {
  margin: var(--space-12) var(--page-x) 0;
  padding: var(--space-16);
  background: var(--card-bg);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.universe-eyebrow { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gray); margin-bottom: var(--space-12); }
/* §12 trin (c): transparens = VALËTs mission-kort (Spotifys "hvem står bag" → "kush qëndron pas stacionit"). Subtil VALËT-rød accent. */
.universe-section-feature { border-color: color-mix(in srgb, var(--valet-red) 32%, var(--border-subtle)); }
.universe-section-feature .universe-eyebrow { color: var(--valet-red); }
/* "Informacioni mungon" — vises når en sektion ikke har data (stabil højde ved bladring) */
.universe-empty-info {
  color: var(--ov-white-32);
  font-size: var(--fs-body);
  font-style: italic;
  padding: var(--space-8) var(--space-2) var(--space-4);
}
/* OM — beskrivelse */
.universe-about { color: var(--text-gray); font-size: var(--fs-body); line-height: 1.6; }
/* KONTAKT — klikbare ikoner (små, runde fliser) + adresse */
.universe-contacts { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.universe-contact-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--row-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  transition: background 0.15s, transform 0.1s;
}
.universe-contact-icon:hover { background: var(--row-bg-hover); }
.universe-contact-icon:active { transform: scale(0.92); }
.universe-contact-icon svg { width: 20px; height: 20px; }
.universe-address { color: var(--text-gray); font-size: var(--fs-body); margin-top: var(--space-16); }
.universe-address::before { content: "📍 "; }
/* PROGRAMET i universe — genbruger .programi-card-looket fra Programi-fanen */
.universe-programi { display: flex; flex-direction: column; gap: var(--space-12); }
/* Gammel program-tile-stil — bruges KUN af den deprecated statiske renderUniverse (universe.js).
   Fjernes sammen med den statiske renderer når den ryddes. Live PROGRAMET bruger .programi-card. */
.universe-programs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--space-12);
}
.universe-program {
  display: flex; flex-direction: column;
  text-align: left;
  background: var(--card-bg);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-12);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.universe-program:active { transform: scale(0.97); }
.universe-program:hover { background: var(--card-bg-hover); }
.universe-program-cover {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--radius-row);
  background: linear-gradient(135deg, var(--valet-red), var(--hero-red-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--fixed-white); font-size: var(--fs-display); font-weight: 800; letter-spacing: 1px;
  margin-bottom: var(--space-8);
}
/* RK2 = lilla brand: program-tiles følger hero-farven */
.universe-hero.rk2 ~ .universe-section .universe-program-cover {
  background: linear-gradient(135deg, var(--rk2-purple, var(--rk2-purple)), var(--hero-purple-deep));
}
.universe-program-time { font-size: var(--fs-micro); font-family: var(--font); font-variant-numeric: tabular-nums; color: var(--text-gray); }
.universe-program-title { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); line-height: 1.2; margin-top: var(--space-2); }
.universe-program-host { font-size: var(--fs-micro); color: var(--text-gray); margin-top: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.universe-empty { color: var(--text-gray); font-size: var(--fs-body); grid-column: 1/-1; }
.universe-opendata { display: block; text-align: center; margin: var(--space-20) 0 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-gray); text-decoration: none; }
.universe-count { font-weight: 600; color: var(--text-muted); margin-left: var(--space-4); }

/* Mennesker */
.universe-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-16) var(--space-12); }
.universe-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.universe-person-av {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-grad-1), var(--avatar-grad-2));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.universe-person-av img { width: 100%; height: 100%; object-fit: cover; }
.universe-person-fallback { color: var(--fixed-white); font-size: var(--fs-subtitle); font-weight: 800; }
.universe-person-name { font-size: var(--fs-caption); font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.universe-person-role { font-size: var(--fs-micro); color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.4px; }

/* Historie-tidslinje */
.universe-timeline { position: relative; padding-left: var(--space-16); }
.universe-timeline::before { content: ''; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 2px; background: var(--border-medium); }
.universe-tl-item { position: relative; display: flex; gap: var(--space-12); padding: 0 0 var(--space-16); }
.universe-tl-item::before { content: ''; position: absolute; left: -14px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--valet-red); }
.universe-tl-item[data-type="controversy"]::before, .universe-tl-item[data-type="sanction"]::before { background: var(--warn-amber); }
.universe-tl-year { flex-shrink: 0; width: 38px; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); font-weight: 700; color: var(--text-gray); }
.universe-tl-title { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.universe-tl-desc { font-size: var(--fs-caption); color: var(--text-gray); line-height: 1.4; margin-top: var(--space-4); }

/* Transparens */
.universe-trans { padding: 0; }   /* §12 trin (b): sektionen ER nu kortet — ingen dobbelt kort-flade */
.universe-trans-badge { font-size: var(--fs-body); color: var(--text-primary); margin-bottom: var(--space-12); }
.universe-kv { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-8) var(--space-16); font-size: var(--fs-body); }
.universe-kv dt { color: var(--text-gray); }
.universe-kv dd { color: var(--text-primary); }

/* === TANI LIVE — det prominente "spiller nu"-kort === */
/* ============================================
   TANI LIVE — fuldhøjde horisontal swipe-karusel (redesign 2026-06-12)
   Fylder højden mellem TRANSMETUESIT og bunden; én station ad gangen, blad ←/→.
   ============================================ */
/* Portrait home (FASE 1): lodret scroll — alle kortlagte stationer som en liste,
   én efter én. (Tidligere var det en fuld-højde vandret carousel med ÉN station ad gangen.) */
@media (orientation: portrait) {
  #page-home .scroll-container { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* home-grid må IKKE blive et klemt nested scroll-område (overflow-x:hidden på linje ~393
     tvinger ellers overflow-y:auto → klipper listen). Lad den vokse naturligt; scroll-container scroller. */
  .home-grid { flex: 0 0 auto; overflow: visible; }
  .home-section-hero { display: flex; flex-direction: column; }
  .home-section-hero .home-section-title { flex: 0 0 auto; }
}

.tani-live-list {
  display: flex; flex-direction: column; gap: var(--space-12);
  margin: 0 var(--page-x);
}
.tani-live-list::-webkit-scrollbar { display: none; }

.tani-tile {
  flex: 0 0 auto; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--radius-hero);
  padding: var(--space-20); cursor: pointer; overflow: hidden;
}
.tani-tile.is-playing { box-shadow: inset 0 0 0 1.5px var(--valet-red); }

.tani-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-8); }
.tani-name { font-size: var(--fs-subtitle); font-weight: 800; color: var(--text-white); letter-spacing: .2px; }   /* §11: mindre → mere plads til cover */
.tani-live { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; color: var(--valet-red); }
.tani-head .live-dot { width: 7px; height: 7px; }
.tani-play {
  margin-left: auto; width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--valet-red); color: var(--fixed-white); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tani-play svg { width: 16px; height: 16px; margin-left: var(--space-2); }

/* Program: kompakt billede i fast højde (FASE 1 — listen er lodret, så hvert kort skal være kompakt). */
.tani-program { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-16); justify-content: center; }
.tani-prog-img { width: 100%; height: 168px; flex: 0 0 auto; border-radius: var(--radius-card); object-fit: contain; background: var(--ov-white-06); }
/* Logo-fyld (intet cover): stationens logo i fast højde, hel-vist */
.tani-program--logo { justify-content: flex-end; }
.tani-fill-logo { height: 132px; flex: 0 0 auto; width: 100%; object-fit: contain; object-position: center; }
.tani-program--logo[style] { border-radius: var(--radius-hero); padding: var(--space-16); background: var(--tani-brand); }
/* Light-tema: tæm den skrigende brand-farve til et blødt brand-tint — roligt i dagslys,
   og sort tekst (light-token) får høj kontrast. Mørk beholder fuld brand (premium der). */
:root[data-theme="light"] .tani-program--logo[style] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tani-brand) 10%, #fff),
    color-mix(in srgb, var(--tani-brand) 20%, #fff));
}
.tani-prog-text { flex: 0 0 auto; min-width: 0; }
.tani-prog-title { font-size: var(--fs-subtitle); font-weight: 700; color: var(--text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tani-prog-host { font-size: var(--fs-body); color: var(--text-gray); margin-top: var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tani-muted { color: var(--text-gray); font-weight: 600; }

/* Sang nederst i tile'en */
/* §11: now-playing-blok ALTID til stede (hop-fri) — kolonne: label + sang-række. */
.tani-song { flex: 0 0 auto; margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--ov-white-08); min-width: 0; }
.tani-song-label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-gray); margin-bottom: var(--space-8); }
.tani-song-row { display: flex; align-items: center; gap: var(--space-12); min-height: 48px; min-width: 0; }   /* min-height → samme højde med/uden cover (intet hop) */
.tani-song-cover { width: 48px; height: 48px; border-radius: 8px; object-fit: contain; flex: 0 0 auto; background: var(--ov-white-06); }
.tani-song-text { min-width: 0; flex: 1 1 auto; }
.tani-song-main { font-size: var(--fs-body); font-weight: 600; color: var(--text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tani-song-album { font-size: var(--fs-caption); color: var(--text-gray); margin-top: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.now-playing-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0 var(--space-16);
  padding: var(--space-16);
  background: var(--card-bg);
  border-radius: var(--radius-hero);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  width: calc(100% - 32px);
  text-align: left;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px -10px var(--ov-black-60);
}

/* Subtil rød glow indikerer LIVE-tilstand */
.now-playing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at left, var(--tint-red-12), transparent 60%);
  pointer-events: none;
}

.now-playing-card:hover {
  background: var(--card-bg-hover);
  transform: translateY(-1px);
}

.now-playing-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-black);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.now-playing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.now-playing-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--ov-black-60) 100%);
  pointer-events: none;
}

/* Equalizer i nederste hjørne af thumbnail (kun når playing) */
.now-playing-equalizer {
  position: absolute;
  bottom: var(--space-8);
  left: var(--space-8);
  display: none;
  align-items: flex-end;
  gap: var(--space-2);
  height: 14px;
  color: var(--fixed-white);   /* hvide bars på det farvede station-thumbnail */
}

.now-playing-card.is-playing .now-playing-equalizer {
  display: flex;
}

.now-playing-equalizer span,
.mini-eq span {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: bottom;   /* bars vokser fra BUNDEN (rigtig VU-meter), ikke centrum */
  animation: eq 0.9s ease-in-out infinite;
}

/* Organisk variation — forskellig højde + tempo pr. bar, så det ikke ser mekanisk ud */
.now-playing-equalizer span:nth-child(1) { height: 60%;  animation-duration: 0.80s; animation-delay: 0s;    }
.now-playing-equalizer span:nth-child(2) { height: 100%; animation-duration: 1.15s; animation-delay: 0.15s; }
.now-playing-equalizer span:nth-child(3) { height: 50%;  animation-duration: 0.70s; animation-delay: 0.30s; }
.now-playing-equalizer span:nth-child(4) { height: 80%;  animation-duration: 0.95s; animation-delay: 0.10s; }

@keyframes eq {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

/* ===== Mini-player "alive"-equalizer — kører kun når der faktisk spiller ===== */
.mini-eq {
  display: none;
  align-items: flex-end;
  gap: var(--space-2);
  height: 14px;
  flex-shrink: 0;
  margin: 0 var(--space-4);
  color: var(--valet-red);   /* accent — RK1 rød som default */
}
.mini-player.playing .mini-eq { display: flex; }
.mini-player.station-rk2 .mini-eq { color: var(--rk2-purple); }
.mini-eq span:nth-child(1) { height: 55%;  animation-duration: 0.80s; }
.mini-eq span:nth-child(2) { height: 100%; animation-duration: 1.15s; }
.mini-eq span:nth-child(3) { height: 65%;  animation-duration: 0.70s; }

/* ===== FORBINDER-TILSTAND — rolig "vejrtrækning" (Ive-elegant, ikke en spinner) =====
   Samme equalizer, men barerne ånder i UNISON (langsomt, dæmpet) mens streamen forbinder,
   og glider blødt over i den levende dans når lyden starter. Kun ANIMATIONEN overskrives
   (ikke barernes højder) → sømløs overgang uden højde-hop. Ét flag (state.isConnecting)
   driver mini-player, valgt Zbuloni-kort og full-screen universets play-knap. */
.mini-player.connecting .mini-eq { display: flex; opacity: 0.72; }
.mini-player.connecting .mini-eq span { animation: mp-breathe 1.6s ease-in-out infinite; }
@keyframes mp-breathe {
  0%, 100% { transform: scaleY(0.28); }
  50%      { transform: scaleY(0.68); }
}
/* Ikonet ånder blødt med — mini-player, valgt kort, universets play-knap */
.mini-player.connecting .mini-player-icon,
.zbuloni-station-card.connecting .zbuloni-station-icon,
.universe-play.connecting {
  animation: mp-settle 1.6s ease-in-out infinite;
}
@keyframes mp-settle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
/* Valgt Zbuloni-kort: rolig accent-ring så man ser præcis hvilket kort man ramte */
.zbuloni-station-card.connecting {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--valet-red) 38%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mini-player.connecting .mini-eq span,
  .mini-player.connecting .mini-player-icon,
  .zbuloni-station-card.connecting .zbuloni-station-icon,
  .universe-play.connecting { animation: none; }
  .mini-player.connecting .mini-eq { opacity: 0.6; }   /* stadig synlig markør uden bevægelse */
}

.now-playing-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.now-playing-live {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* color = accent; background + pulse-ring afledes af currentColor, så RK2 pulser
     lilla i stedet for hardcoded rød */
  color: var(--valet-red);
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-dot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Accent-override: RK2 = lilla (sættes via station-rk2 på kort/mini-player) */
.now-playing-card.station-rk2 .live-dot,
.mini-player.station-rk2 .live-dot { color: var(--rk2-purple); }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}

/* Tilgængelighed: respekter "reducer bevægelse" — frys animationerne */
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .now-live-dot,
  .now-playing-equalizer span,
  .mini-eq span { animation: none !important; }
  .now-playing-equalizer span,
  .mini-eq span { transform: scaleY(0.7); }
}

.now-playing-station {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--valet-red);
  text-transform: uppercase;
}

.now-playing-program {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.2px;
}

.now-playing-host {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-gray);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-playing-theme {
  font-size: var(--fs-caption);
  color: var(--ov-white-55);
  margin: var(--space-8) 0 0;
  font-style: italic;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.now-playing-theme:empty { display: none; }

.platinum-badge {
  display: inline-block;
  font-size: var(--fs-micro);
  margin-left: var(--space-8);
  opacity: 0.75;
  cursor: help;
  transform: translateY(-1px);
}
.platinum-badge:empty { display: none; }

/* (FREKVENS-STRIP fjernet — pensioneret sammen med #full-player) */

/* Multilingual sprog-badge til RK2 */
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  background: var(--tint-purple-18);
  border: 1px solid var(--tint-purple-30);
  border-radius: 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ov-white-85);
  text-transform: uppercase;
  margin-left: var(--space-8);
}
.lang-badge::before {
  content: '🌐';
  font-size: var(--fs-micro);
}

.now-playing-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--text-white);
  color: var(--bg-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.1s;
  position: relative;
}

.now-playing-play-btn:hover {
  transform: scale(1.05);
}

.now-playing-play-btn:active {
  transform: scale(0.95);
}

.now-playing-play-btn svg {
  width: 20px;
  height: 20px;
  margin-left: var(--space-2);
}

/* ============================================
   PROGRAMI (LIVE TAB) — matcher mockup screen 4
   ============================================ */
.programi-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--title-top) var(--space-20) var(--space-16);
  gap: var(--space-12);
  /* Titel bliver hængende (portrait). Stations-række + dag-knapper stables under (offsets nedenfor). */
  position: sticky; top: 0; z-index: 7; background: var(--bg-app);
}

.programi-logo {
  font-size: var(--fs-display);
  letter-spacing: 5px;
  margin: 0;
}

.programi-section-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-gray);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Station-vælger til Programi (RK1 / RK2) */
.programi-station-tabs {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--ov-white-06);
  margin-bottom: 0;
}

/* DR Lyd-model (#34/#35): vandret swipe-BÅND af stationer med peek. scroll-padding
   holder det aktive kort centreret og lader naboerne kigge frem i kanterne. */
.programi-band {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-x);
  padding: var(--space-12) var(--page-x) var(--space-16);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.programi-band::-webkit-scrollbar { display: none; }
.programi-band-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 76px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;   /* ikke nedtonet — logoer skal være læselige; det aktive skiller sig ud via scale + ring */
  transition: opacity .25s ease, transform .25s ease;
}
.programi-band-card.active { opacity: 1; transform: scale(1.04); }
.programi-band-logo {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 2px 10px var(--ov-black-25);
}
.programi-band-card.active .programi-band-logo { box-shadow: 0 4px 16px var(--ov-black-40), inset 0 0 0 2px var(--fixed-white); }
.programi-band-logo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
/* Monogram-fallback bag logoet — synligt hvis <img> mangler/fejler (this.remove()). */
.programi-band-mono {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--mono-c1, #5a5fb0), var(--mono-c2, #3a3d77));
  color: var(--fixed-white);
  font-weight: 600; font-size: 22px; letter-spacing: -0.5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
/* Play/pause-knap: lille rød hjørne-badge, ALTID synlig på ALLE kort → konsistent
   (før: kun på det aktive → "nogle virker, andre ikke"). Tryk = afspil den station.
   Dækker ikke logoet (lille badge, ikke fuld overlay). Spiller = pause-ikon. */
.programi-band-play {
  position: absolute; right: 3px; bottom: 3px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--valet-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--bg-app);
  transition: transform .15s ease;
}
.programi-band-play svg { width: 12px; height: 12px; color: var(--fixed-white); }
.programi-band-card.active .programi-band-play { transform: scale(1.08); }
.programi-band-card:hover .programi-band-play { transform: scale(1.08); }
.programi-band-name {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-white);
  max-width: 76px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

/* Frossen stations-række (§10, portrait): hele venstre-blok klistrer i toppen.
   (Landscape har sin egen .programi-left sticky længere nede.) */
@media (max-width: 899px) {
  .programi-left {
    position: sticky;
    top: 70px;   /* under den sticky titel (programi-header ~70px) */
    z-index: 6;
    background: var(--bg-app);
  }
}

/* Dag-knapper (§10): FROSSEN lige under stations-BÅNDET, så man altid kan skifte dag
   mens man ruller i programlisten. top:180 = titel (70) + swipe-bånd (110) i PORTRAIT.
   Landscape har egen kolonne-layout → top overrides nedenfor (ellers flyder de midt i gridet). */
.programi-day-tabs {
  position: sticky;
  top: 180px;
  z-index: 5;
  /* Frostet i stedet for massiv hvid → station-tinten (backdrop) skinner igennem, og
     indhold der scroller under bliver sløret (iOS-stil) i stedet for en hvid bjælke. */
  background: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-12) var(--page-x) var(--space-12);
}
.programi-day-tab {
  flex: 1 1 0;           /* alle 7 dage får lige bredde → ingen vandret scroll, ingen afskæring */
  min-width: 0;
  text-align: center;
  padding: var(--space-8) var(--space-2);
  border-radius: 999px;
  border: none;
  background: var(--row-bg);
  color: var(--text-gray);
  font-family: var(--font);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
}
.programi-day-tab.is-today:not(.active) { color: var(--text-primary); }
.programi-day-tab.active { background: var(--valet-red); color: var(--fixed-white); }

/* Station-vælger som dropdown (Programi) — erstatter den lange tab-række (§10) */
.programi-st-dropdown { position: relative; }
.programi-st-trigger {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--card-bg); border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-row); padding: var(--space-8) var(--space-16);
  color: var(--text-primary); font-family: var(--font); font-weight: 700; font-size: var(--fs-subtitle);
  cursor: pointer; max-width: 100%;
}
.programi-st-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.programi-st-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-gray); }
.programi-st-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 240px; max-width: calc(100vw - 40px); max-height: 60vh; overflow-y: auto;
  background: var(--card-bg); border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-card); padding: var(--space-8); z-index: 30;
  box-shadow: 0 8px 28px var(--ov-black-50);
}
.programi-st-option {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: var(--space-12) var(--space-12); border-radius: var(--radius-row);
  color: var(--text-primary); font-family: var(--font); font-size: var(--fs-subsub); cursor: pointer;
}
.programi-st-option:hover { background: var(--row-bg); }
.programi-st-option.active { color: var(--valet-red); font-weight: 700; }

.programi-station-tab {
  position: relative;
  padding: var(--space-8) 0 var(--space-16);
  background: none;
  border: none;
  color: var(--text-gray);
  cursor: pointer;
  transition: color 0.15s;
}

.programi-station-tab-label {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.programi-station-tab-underline {
  position: absolute;
  bottom: -1px;   /* layout-specifik positionering (ikke spacing-skala) */
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  border-radius: 2px;
  transition: background 0.15s;
}

.programi-station-tab:hover {
  color: var(--text-white);
}

.programi-station-tab.active {
  color: var(--text-white);
}

.programi-station-tab.active .programi-station-tab-underline {
  background: var(--valet-red);
}

.programi-section-title {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-gray);
  padding: 0 var(--page-x) var(--space-16);
  margin: 0;
  letter-spacing: 2px;        /* afstemt med .home-section-title */
  text-transform: uppercase;
}

.programi-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 0 var(--space-16) var(--space-32);
}

/* Landscape-only elementer skjules i portrait */
.programi-station-display,
.programi-backdrop {
  display: none;
}

.programi-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: background 0.15s, transform 0.1s;
  cursor: pointer;
  text-align: left;
  border: none;
  width: 100%;
}

.programi-card:hover {
  background: var(--card-bg-hover);
}

.programi-card.is-live {
  background: var(--tint-red-14);
  /* Utvetydig "live NU": rød venstre-stribe (ingen layout-skift) — læses i begge temaer. */
  box-shadow: inset 4px 0 0 0 var(--valet-red);
}
/* LIVE-pill i tid-blokken på det live kort — pulserende prik + rød, umiskendelig. */
.programi-live-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;   /* i info-kolonnen: bliv venstre, stræk ikke — væk fra fav-hjertet */
  gap: var(--space-4);
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  background: var(--valet-red);
  color: var(--fixed-white);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.8px;
}
.programi-live-pill .live-dot { color: var(--fixed-white); width: 6px; height: 6px; }

.programi-card.is-live:hover {
  background: var(--tint-red-18);
}

.programi-card-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-16);
  background: var(--ov-black-30);
  flex-shrink: 0;
  min-width: 78px;
}

.programi-card.is-live .programi-card-time {
  background: var(--ov-black-25);
}

.programi-card-time-value {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--text-white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.programi-card-time-day {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-gray);
  text-transform: uppercase;
  margin-top: var(--space-4);
}

.programi-card.is-live .programi-card-time-day {
  color: var(--valet-red);
}

.programi-card-info {
  flex: 1;
  min-width: 0;
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.programi-card-title {
  font-size: var(--fs-subsub);
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.1px;
}

.programi-card-channel {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-gray);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kort beskrivelse + meta-row på programi-card */
.programi-card-short {
  font-size: var(--fs-caption);
  color: var(--text-gray-dim, var(--text-gray));
  margin: var(--space-4) 0 var(--space-8);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.programi-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.programi-card-hosts {
  display: flex;
  flex-shrink: 0;
}
.programi-card-hosts .host-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--fixed-white);
  border: 1.5px solid var(--bg-app, var(--bg-black));
  margin-left: -7px;   /* negativ margin: optisk/overlap-nudge (layout, ikke spacing-skala) */
}
.programi-card-hosts .host-avatar:first-child { margin-left: 0; }
.programi-card-hosts .host-avatar-0 { background: linear-gradient(135deg, var(--valet-red), var(--avatar-red-deep)); }
.programi-card-hosts .host-avatar-1 { background: linear-gradient(135deg, var(--rk2-purple), var(--avatar-purple-deep)); }
.programi-card-hosts .host-avatar-2 { background: linear-gradient(135deg, var(--valet-blue), var(--avatar-blue-deep)); }

.programi-card-host-name {
  font-size: var(--fs-micro);
  color: var(--text-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

:root[data-theme="light"] {
  .programi-card-short { color: var(--ov-black-55); }
  .programi-card-host-name { color: var(--ov-black-55); }
}

.programi-card-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-16);
  flex-shrink: 0;
  color: var(--text-gray);  /* tema-adaptiv: synlig i BÅDE dark og light (var hvid@35% = usynlig på lys) */
  transition: color 0.15s, transform 0.1s;
}

.programi-card-fav:hover {
  color: var(--text-white);
}

.programi-card-fav.is-fav {
  color: var(--valet-red);
}

.programi-card-fav:active {
  transform: scale(0.85);
}

.programi-card-fav svg {
  width: 22px;
  height: 22px;
}

/* ============================================
   STATION SELECTOR (legacy — kan fjernes når Live ikke længere bruger den)
   ============================================ */
.station-selector {
  display: flex;
  background: var(--text-white);
  padding-top: env(safe-area-inset-top);
}

.station-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-16) 0;
}

.station-logo {
  height: 34px;
  width: auto;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.station-btn.active .station-logo {
  opacity: 1;
}

.station-underline {
  width: 100%;
  height: 3px;
  background: transparent;
  transition: background 0.2s;
}

.station-btn.active .station-underline {
  background: var(--albanian-red);
}

.station-btn.active[data-station="RK2"] .station-underline {
  background: var(--rk2-purple);
}

.station-btn:hover .station-logo {
  opacity: 0.7;
}

.station-btn.active:hover .station-logo {
  opacity: 1;
}

/* ============================================
   TANI LIVE KORT
   ============================================ */
.now-live-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16);
  margin: var(--space-12) var(--space-12);
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 4px 12px var(--ov-black-40);
  transition: background 0.15s;
}

.now-live-card:hover {
  background: var(--card-bg-hover);
}

.now-live-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--valet-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.now-live-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
}

.now-live-info {
  flex: 1;
  min-width: 0;
}

.now-live-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
}

.now-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--valet-red);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.now-live-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--valet-red);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.now-live-title {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.now-live-host {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-gray);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-live-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--valet-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.1s, filter 0.15s;
}

.now-live-play-btn:hover {
  filter: brightness(1.1);
}

.now-live-play-btn:active {
  transform: scale(0.95);
}

.now-live-play-btn svg {
  width: 22px;
  height: 22px;
  color: var(--text-white);
}

/* ============================================
   DATE NAVIGATOR
   ============================================ */
.date-nav {
  display: flex;
  align-items: center;
  background: var(--card-bg-darker);
  padding: var(--space-12) var(--space-8);
}

.date-nav-arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-nav-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--text-white);
}

.date-nav-arrow:disabled svg {
  color: var(--ov-white-20);
}

.date-nav-center {
  flex: 1;
  text-align: center;
}

.date-nav-date {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-white);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

.date-nav-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--valet-red);
  margin: 0;
  text-transform: uppercase;
}

.date-nav-label.faded {
  color: var(--ov-white-40);
  letter-spacing: 1px;
  font-weight: 600;
}

/* ============================================
   DOT INDICATOR
   ============================================ */
.dot-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  background: var(--card-bg-darker);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ov-white-25);
  transition: all 0.3s;
}

.dot.active {
  width: 8px;
  height: 8px;
  background: var(--albanian-red);
}

/* ============================================
   SCHEDULE LIST
   ============================================ */
.schedule-list-container {
  flex: 1;
  overflow: hidden;
  height: calc(100% - 280px); /* fyld resten af viewport */
}

.schedule-list {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-16);
  padding-bottom: var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.program-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--row-bg);
  border-radius: 12px;
  transition: background 0.2s;
}

.program-row:hover {
  background: var(--row-bg-hover);
}

.program-row.live {
  background: var(--tint-red-20);
}

.program-time {
  /* Serif som resten — bruger tabular-nums hvor browseren understøtter det */
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--text-gray-dim);
  width: 56px;
  flex-shrink: 0;
}

.program-row.live .program-time {
  color: var(--text-white);
}

.program-info {
  flex: 1;
  min-width: 0;
}

.program-title {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 var(--space-4);
  line-height: 1.2;
}

.program-host {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-gray-dim);
  margin: 0;
}

.live-badge {
  background: var(--valet-red);
  color: var(--text-white);
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: var(--space-4) var(--space-12);
  border-radius: 999px;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ============================================
   ZBULONI (DISCOVER)
   ============================================ */
.zbuloni-header {
  padding: var(--title-top) var(--space-20) var(--space-16);
  position: sticky; top: 0; z-index: 7; background: var(--bg-app);  /* titel bliver hængende */
}

.zbuloni-title {
  font-size: var(--fs-title);
  font-weight: 800;
  color: var(--text-white);
  margin: 0 0 var(--space-16);
  letter-spacing: -1px;
  line-height: 1;
}

.zbuloni-search {
  width: 100%;
  background: var(--card-bg);
  border: none;
  border-radius: 12px;
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-subtitle);
  color: var(--text-white);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

.zbuloni-search::placeholder {
  color: var(--text-gray);
}

.zbuloni-search:focus {
  background: var(--card-bg-hover);
}

.zbuloni-status {
  text-align: center;
  color: var(--text-gray);
  padding: var(--space-40) var(--space-20);
  font-size: var(--fs-body);
}

/* ── Skeleton (vises på Zbuloni's allerførste load, når cachen er tom) ── */
@keyframes valet-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--ov-white-05) 25%,
    var(--ov-white-12) 37%,
    var(--ov-white-05) 63%);
  background-size: 800px 100%;
  animation: valet-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.sk-region { margin-bottom: var(--space-32); }
.sk-region-head { padding: 0 var(--space-20) var(--space-12); }
.sk-region-title { width: 120px; height: 20px; }
.sk-list { display: flex; flex-direction: column; gap: var(--space-8); padding: 0 var(--space-12); }
.sk-card {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--card-bg);
  border-radius: var(--radius-card);
}
.sk-icon { width: 50px; height: 50px; border-radius: 10px; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); }
.sk-line-1 { width: 55%; height: 14px; }
.sk-line-2 { width: 32%; height: 11px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

.zbuloni-region {
  margin-bottom: var(--space-32);
}

.zbuloni-region-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--space-20) var(--space-12);
}

.zbuloni-region-name {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  letter-spacing: -0.2px;
}

.zbuloni-region-count {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-gray);
  font-variant-numeric: tabular-nums;
}

.zbuloni-station-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0 var(--space-12);
}

.zbuloni-station-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  text-align: left;
  width: 100%;
  transition: background 0.15s, transform 0.1s;
}

.zbuloni-station-card:hover {
  background: var(--card-bg-hover);
}

.zbuloni-station-card:active {
  transform: scale(0.98);
  background: var(--card-bg-hover);
}

.zbuloni-station-card.playing {
  background: var(--tint-red-15);
}

.zbuloni-station-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--ov-white-08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-subtitle);
  font-weight: 800;
  color: var(--text-white);
  overflow: hidden;
  position: relative;
}

.zbuloni-station-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zbuloni-station-icon.public {
  background: var(--albanian-red);
}

.zbuloni-station-info {
  flex: 1;
  min-width: 0;
}

.zbuloni-station-name {
  font-size: var(--fs-subsub);   /* én størrelse ned (18→15), ønske 2026-07-20 */
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 var(--space-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.zbuloni-station-meta {
  font-size: var(--fs-caption);   /* by: én størrelse ned (14→12), ønske 2026-07-20 */
  font-weight: 400;
  color: var(--text-gray);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opgave #31: på telefon-bredde er 18px + nowrap for stort — fulde stationsnavne
   klippes. Sænk til Nën-nëntitull (15px) KUN på mobil; desktop (≥900px) er fin. */
@media (max-width: 899px) {
  .zbuloni-station-name {
    font-size: var(--fs-body);   /* mobil: én størrelse ned (15→14), ønske 2026-07-20 */
  }
}
/* Arkiv-badge i Zbuloni: station uden spilbar stream (data findes, ingen live-lyd). */
.zbuloni-arkiv-badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ov-white-08);
  color: var(--text-gray);
  vertical-align: middle;
}
/* Lukket station: rødtonet MBYLLUR-badge, adskilt fra det neutrale ARKIV. */
.zbuloni-mbyllur-badge {
  background: rgba(227, 31, 36, 0.15);
  color: rgba(255, 120, 120, 0.95);
}
/* "Së shpejti" — umappet station (kun navn): blåtonet, positiv/afventende. */
.zbuloni-soon-badge {
  background: rgba(0, 122, 255, 0.16);
  color: rgba(120, 180, 255, 0.98);
}
/* Sprog-tag (ikke-albanske stationer): neutral chip, adskilt fra status-badges. */
.zbuloni-lang-tag {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 153, 102, 0.16);
  color: rgba(120, 220, 170, 0.98);
  vertical-align: middle;
}
/* Umappet stub: dæmpet navn (data mangler endnu). */
.zbuloni-station-card.coming-soon .zbuloni-station-name { opacity: 0.85; }
.zbuloni-station-card.archive .zbuloni-station-icon { opacity: 0.7; }
/* "Pa transmetim live"-sektion nederst i Zbuloni — adskilt fra de spilbare regioner. */
.zbuloni-region-archive { margin-top: var(--space-24); border-top: 1px solid var(--border-subtle); padding-top: var(--space-16); }
.zbuloni-archive-hint { font-size: var(--fs-caption); color: var(--text-gray); margin: calc(-1 * var(--space-4)) 0 var(--space-12); }

.zbuloni-station-type-badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: var(--space-4) var(--space-8);
  border-radius: 999px;
  background: var(--ov-white-10);
  color: var(--text-gray);
  flex-shrink: 0;
  text-transform: uppercase;
}

.zbuloni-station-type-badge.public {
  background: var(--albanian-red);
  color: var(--text-white);
}

.zbuloni-empty {
  text-align: center;
  color: var(--text-gray);
  padding: 60px var(--space-20);   /* layout: specifik sektion-højde (one-off) */
  font-size: var(--fs-body);
}

/* ============================================
   PLACEHOLDER SCREENS
   ============================================ */
.placeholder-screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  font-size: var(--fs-subtitle);
}

/* ============================================
   MINI PLAYER
   ============================================ */
.mini-player {
  position: fixed;
  /* Sidder præcis oven på den kompakte tab-bar */
  bottom: 44px;   /* layout-specifik positionering (ikke spacing-skala) */
  left: 0;
  right: 0;
  height: var(--mini-player-height);
  background: var(--player-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--space-16);
  gap: var(--space-16);
  border-top: 0.5px solid var(--ov-white-10);
  z-index: 10;
  cursor: pointer;
  transition: background 0.15s;
}

.mini-player:hover {
  background: var(--player-bg-hover);
}

.mini-player-icon {
  width: 40px;   /* var 48 — passer til 56px mini-player */
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.mini-player-info {
  flex: 1;
  min-width: 0;
}

.mini-player-station {
  font-size: var(--fs-micro);  /* var 12 */
  font-weight: 700;
  color: var(--valet-red);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mini-player-title {
  font-size: var(--fs-body);  /* var 16 */
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.mp-title-inner { display: inline-block; }
/* Marquee: ruller KUN når .marquee er sat af JS (tekst bredere end pladsen) */
.mini-player-title.marquee { text-overflow: clip; }
.mini-player-title.marquee .mp-title-inner {
  animation: mp-marquee var(--mp-dur, 8s) ease-in-out infinite alternate;
}
@keyframes mp-marquee {
  0%, 14%   { transform: translateX(0); }
  86%, 100% { transform: translateX(var(--mp-shift, 0)); }
}

.mini-player-play-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-player-play-btn svg {
  width: 26px;
  height: 26px;
  color: var(--text-white);
}

/* Volume-control i mini-player er skjult i portrait — kun synlig i landscape */
.mini-player-volume {
  display: none;
}

/* MiniPlayer subtitler — host + frequency */
.mini-player-host {
  font-size: var(--fs-micro);
  color: var(--ov-white-45);
  margin: var(--space-2) 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player-host:empty { display: none; }

/* (mini-player-freq + alle full-player-tekst/freq/info-regler fjernet — pensioneret) */

/* ===== PWA-specifik styling — udnyt safe-area-bottom ===== */
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* I PWA-mode er der ekstra plads i bunden — udnyt det */
  .mini-player {
    /* Lidt tykkere mini-player i PWA — har plads til mere info */
    height: calc(var(--mini-player-height) + 4px);
  }
  .pwa-only { display: block !important; }
}
.pwa-only { display: none; }

/* ============================================
   TAB BAR (X/LINKEDIN STYLE - LOW ICONS)
   ============================================ */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* KOMPAKT bar der dækker home-indicatoren (44px ≥ safe-area-zonens 34px).
     Ikonerne presses helt ned via .tab-btn (flex-end + lav padding) → de ligger
     UNDER den røde linje, og baren er kort nok til at afspilleren sidder tæt på
     ikonerne (intet stort tomt felt — det var problemet med 50px+safe-area). */
  height: 44px;
  background: var(--bg-app);
  display: flex;
  z-index: 11;
  border-top: 0.5px solid var(--border-subtle);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* BASE = browser-tilstand (Safari m. adresselinje): ikoner lavt, lige over toolbaren.
     PWA-tilstand overstyres nedenfor via @media (display-mode: standalone) — fordi
     Safari og PWA kan rapportere SAMME env-værdi, så env alene kan ikke skelne dem. */
  justify-content: flex-end;
  padding-bottom: var(--space-4);
  height: 100%;
  color: var(--text-white);
  transition: color 0.2s, transform 0.1s;
}

/* PWA (hjemmeskærm) — ikoner løftet OVER home-indicatoren (native-stil, ~2mm højere end browser) */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .tab-bar {
    height: calc(44px + env(safe-area-inset-bottom));   /* 44px synlig + home-indicator-zone */
  }
  .tab-btn {
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-8));   /* ~40px → ikon over home-indicatoren */
  }
  .mini-player {
    bottom: calc(44px + env(safe-area-inset-bottom));
  }
  #app {
    padding-bottom: calc(var(--space-48) + env(safe-area-inset-bottom) + var(--mini-player-height));
  }
}

/* Safari browser-tilstand (m. adresselinje) — ikoner HELT i bunden + kompakt bar,
   så menuen + afspilleren rykker så langt ned som muligt (lige over Safari-toolbaren). */
@media (display-mode: browser) {
  .tab-bar    { height: 36px; }
  .tab-btn    { padding-bottom: 0px; }
  .mini-player { bottom: 36px; }
  #app        { padding-bottom: calc(var(--space-40) + var(--mini-player-height)); }
}

.tab-btn:active {
  transform: scale(0.92);
}

.tab-btn.active {
  color: var(--valet-red);
}

.tab-icon {
  width: 28px;
  height: 28px;
}

/* X-stil: skjul labels i tab-bar — kun ikoner.
   Labels er stadig i DOM som accessibility text (screen readers læser dem). */
.tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;   /* negativ margin: optisk/overlap-nudge (layout, ikke spacing-skala) */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Aktiv tab markeres KUN ved rød ikon-farve — prikken fjernet (dobbeltkonfekt). */
.tab-btn.active::after { content: none; }

/* (FULL PLAYER-modal fjernet — pensioneret; mini-player åbner nu Universet.
   Volume-reglerne nedenfor bruges stadig af landscape mini-player.) */

/* === Volume slider === */
.volume-icon {
  width: 18px;
  height: 18px;
  color: var(--text-gray);
  flex-shrink: 0;
}

.volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--ov-white-15);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

/* Brug CSS-variabel til at vise progressionen i rødt */
.volume-slider {
  background: linear-gradient(
    to right,
    var(--valet-red) 0%,
    var(--valet-red) calc(var(--volume, 1) * 100%),
    var(--ov-white-15) calc(var(--volume, 1) * 100%),
    var(--ov-white-15) 100%
  );
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-white);
  cursor: grab;
  border: none;
  box-shadow: 0 2px 4px var(--ov-black-30);
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-white);
  cursor: grab;
  border: none;
  box-shadow: 0 2px 4px var(--ov-black-30);
}

.volume-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.1);
}

/* ============================================
   SCROLLBARS (skjul)
   ============================================ */
.scroll-container::-webkit-scrollbar,
.schedule-list::-webkit-scrollbar {
  display: none;
}

/* ============================================
   LANDSCAPE LAYOUT (iPad/desktop, bredde > højde)
   Trigger: aspect-ratio >= 1:1 OG bredde >= 900px
   ============================================ */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {

  /* App-shell bliver flex-row: [sidebar | content] med player som footer */
  .app-shell {
    display: grid;
    grid-template-columns: var(--side-nav-width, 220px) 1fr;
    grid-template-rows: 1fr var(--player-bar-height, 88px);
    grid-template-areas:
      "sidenav content"
      "player  player";
  }

  /* === Side navigation (Spotify-stil) === */
  .side-nav {
    display: flex;
    flex-direction: column;
    grid-area: sidenav;
    height: 100%;          /* fyld hele kolonnen — ellers truncated sort boks */
    padding: var(--space-24) var(--space-12);
    gap: var(--space-4);
    background: var(--bg-outer);          /* flipper i light mode */
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
  }

  .side-nav-brand {
    padding: var(--space-8) var(--space-12) var(--space-24);
  }

  .side-nav-brand-mark {
    font-family: var(--font);
    font-size: var(--fs-display);
    font-weight: 900;
    letter-spacing: 5px;
    color: var(--text-white);
  }

  .side-nav-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-16);
    padding: var(--space-12) var(--space-16);
    color: var(--text-gray);
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    text-align: left;
    /* Nulstil .tab-btn-arv: flex:1 OG height:100% strakte hver knap til hele
       sidebar-højden (764px = den store tomme grå boks) i column-flow. */
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
  }

  /* Den portrait tab-bar's røde dot-indikator skal IKKE lække ind i sidebaren */
  .side-nav-btn.active::after {
    display: none;
  }

  .side-nav-btn:hover {
    color: var(--text-primary);
    background: var(--row-bg);
  }

  .side-nav-btn.active {
    color: var(--text-primary);
    background: var(--row-bg-hover);
  }

  .side-nav-btn .tab-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .side-nav-btn .tab-label {
    /* Vis labels i sidebaren (Spotify-stil ikon+tekst) — ophæv .tab-label's
       skjul-clip fra portrait-tab-baren. */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  /* === Hovedindhold === */
  #app {
    grid-area: content;
    height: 100%;
    padding-bottom: 0;
    overflow: hidden;
  }

  /* === Bottom tab-bar skjules — sidebar erstatter === */
  .tab-bar {
    display: none;
  }

  /* === Mini-player → bliver persistent bottom-bar === */
  .mini-player {
    grid-area: player;
    position: static;
    bottom: auto;
    height: var(--player-bar-height, 88px);
    background: var(--player-bg);
    border-top: 1px solid var(--border-medium);
    padding: 0 var(--space-24);
    gap: var(--space-20);
    cursor: default;
  }

  .mini-player:hover {
    background: var(--player-bg);
  }

  .mini-player-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }

  .mini-player-info {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 320px;
  }

  .mini-player-station {
    font-size: var(--fs-micro);
  }

  .mini-player-title {
    font-size: var(--fs-body);
  }

  /* Center: play-knap større + tydeligere */
  .mini-player-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--text-white);
    color: var(--bg-black);
    margin: 0 auto;
  }

  .mini-player-play-btn svg {
    width: 24px;
    height: 24px;
    color: var(--bg-black);
    margin-left: var(--space-2);
  }

  /* Volume-control synlig i landscape (skjult i portrait) */
  .mini-player-volume {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-left: auto;
    width: 200px;
    padding-right: var(--space-8);
  }

  .mini-player-volume .volume-icon {
    width: 18px;
    height: 18px;
    color: var(--text-gray);
    flex-shrink: 0;
  }

  /* Justering: undgå at home-padding rammer player-bar (ingen tab-bar at offsette for) */
  #app, .scroll-container {
    padding-bottom: 0 !important;
  }
}

/* Ekstra-bred desktop: lidt bredere sidebar */
@media (min-aspect-ratio: 1/1) and (min-width: 1280px) {
  .app-shell {
    grid-template-columns: 240px 1fr;
  }
}

/* ============================================
   LANDSCAPE — Programi-side med 30/70 split
   ============================================ */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {

  /* Skjul den portrait-header (logoet er allerede i sidebar, "Programi" er den aktive nav) */
  .programi-header { display: none; }

  /* Scroll-container for Programi: relativ for backdrop */
  #programi-scroll {
    position: relative;
    padding-top: 0;
    overflow-y: auto;
  }

  /* Subtil blurred station-logo backdrop bag indholdet */
  .programi-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: 120% auto;
    filter: blur(80px) saturate(0.9);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
  }

  /* Grid-container 30/70 split */
  .programi-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 30%) 1fr;
    gap: var(--space-32);
    padding: var(--space-40) var(--space-40) var(--space-32);
    align-items: start;
  }

  /* === Venstre: sticky station info === */
  .programi-left {
    position: sticky;
    top: 36px;   /* layout-specifik positionering (ikke spacing-skala) */
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  /* RK1/RK2 tabs i landscape — kompakte øverst */
  .programi-station-tabs {
    padding: 0;
    border-bottom: 1px solid var(--ov-white-06);
    margin-bottom: 0;
    gap: var(--space-24);
  }

  /* Stort station-display under tabs */
  .programi-station-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .programi-station-display-tag {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--text-gray);
    text-transform: uppercase;
  }

  .programi-station-display-name {
    font-family: var(--font);
    font-size: clamp(26px, 4.5vh, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--text-white);
    text-wrap: balance;
  }

  .programi-station-display-live {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .programi-station-display-now {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text-white);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .programi-station-display-play {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-24) var(--space-12) var(--space-16);
    /* Primær "lyt nu"-handling: brand-rød i BEGGE temaer (var det sort/hvid) → umiskendeligt
       det primære greb på siden, og bundet til live-røden. */
    background: var(--valet-red);
    color: var(--fixed-white);
    box-shadow: 0 6px 18px -6px var(--valet-red);
    border-radius: 999px;
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: var(--space-8);
    transition: transform 0.1s, filter 0.15s;
  }

  .programi-station-display-play:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
  }

  .programi-station-display-play:active {
    transform: scale(0.97);
  }

  .programi-station-display-play svg {
    width: 18px;
    height: 18px;
  }

  /* === Højre: program-grid === */
  .programi-right {
    min-width: 0;
  }

  /* Landscape: dag-tabs bliver hængende i toppen af den scrollende kolonne (top:0),
     ikke portrait-offset top:180. Frostet bg (fra base-reglen) → indhold sløres under. */
  .programi-day-tabs {
    position: sticky;
    top: 0;
    padding: var(--space-12) 0;
  }

  .programi-section-title {
    padding: 0 0 var(--space-20);
  }

  .programi-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-12);
    padding: 0;
  }

  /* Task #27: Zbuloni-station-liste som GRID på desktop — ellers strakte hver række
     fuld bredde med et stort tomt gab mellem navn og handlingsknapper. Auto-fill 2-3
     kolonner efter plads. */
  .zbuloni-station-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-12);
    padding: 0;
  }

  /* Programkort i landscape: vertikal stak (tid → titel → vært) i stedet for horisontal */
  .programi-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
  }

  .programi-card-time {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-12) var(--space-16);
    background: var(--ov-white-04);
    min-width: 0;
  }

  .programi-card.is-live .programi-card-time {
    background: var(--tint-red-20);
  }

  .programi-card-time-value {
    font-size: var(--fs-display);
    letter-spacing: -1px;
  }

  .programi-card-time-day {
    margin-top: 0;
    font-size: var(--fs-micro);
  }

  .programi-card-info {
    padding: var(--space-16) var(--space-16) var(--space-16);
  }

  .programi-card-title {
    font-size: var(--fs-subsub);
    -webkit-line-clamp: 3;
  }

  .programi-card-channel {
    margin-top: var(--space-4);
  }

  /* Heart-knap mere subtil i grid-kort */
  .programi-card-fav {
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    padding: var(--space-8);
    background: var(--ov-black-40);
    border-radius: 50%;
  }

  .programi-card-fav svg {
    width: 18px;
    height: 18px;
  }

  .programi-card {
    position: relative;
  }

  /* ============================================
     LANDSCAPE — Shtëpi (Home) hero + grid layout
     ============================================ */

  /* Skjul portrait-header (logo er i sidebar). NB: det aktive element er
     .home-topbar — .home-header er legacy/dead, så vi targeter .home-topbar. */
  #page-home .home-topbar { display: none; }

  #page-home .scroll-container {
    position: relative;
    overflow-y: auto;
  }

  /* Subtil rødlig glow bag højre kolonne */
  .home-backdrop {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, var(--tint-red-08), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Hjem-grid: 40/60 split med hero venstre, sektioner højre */
  .home-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(380px, 40%) 1fr;
    grid-template-areas:
      "hero  broadcasters"
      "hero  upcoming";
    grid-template-rows: auto 1fr;
    gap: var(--space-24) var(--space-40);
    padding: var(--space-40);
    align-items: start;
  }

  .home-section-hero       { grid-area: hero; }
  .home-section-broadcasters { grid-area: broadcasters; }
  .home-section-upcoming   { grid-area: upcoming; display: block; }

  /* === HERO: TANI LIVE bliver et massivt rødt kort === */
  .home-section-hero {
    padding: 0;
    align-self: stretch;
    height: 100%;
  }

  .home-section-hero .home-section-title {
    color: var(--ov-white-70);
    padding: 0 0 var(--space-16);
  }

  .home-section-hero .now-playing-card {
    width: 100%;
    margin: 0;
    padding: var(--space-32);
    border-radius: 24px;
    background: linear-gradient(155deg, var(--valet-red) 0%, var(--tani-red-mid) 70%, var(--tani-red-deep) 100%);
    box-shadow: 0 24px 60px -20px var(--tint-red-50);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
    min-height: 460px;
  }

  .home-section-hero .now-playing-card::before {
    background: radial-gradient(circle at 70% 20%, var(--ov-white-18), transparent 55%);
  }

  .home-section-hero .now-playing-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 360px;
    border-radius: 18px;
  }

  .home-section-hero .now-playing-info {
    flex: 0 0 auto;
    gap: var(--space-8);
  }

  .home-section-hero .now-playing-station {
    color: var(--ov-white-95);
    font-size: var(--fs-caption);
  }

  .home-section-hero .now-playing-program {
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    -webkit-line-clamp: 3;
  }

  .home-section-hero .now-playing-host {
    color: var(--ov-white-85);
    font-size: var(--fs-subsub);
  }

  .home-section-hero .now-playing-play-btn {
    align-self: flex-start;
    width: 64px;
    height: 64px;
    background: var(--text-white);
    color: var(--valet-red);
    margin-top: var(--space-8);
  }

  .home-section-hero .now-playing-play-btn svg {
    width: 28px;
    height: 28px;
  }

  /* Live-dot i hero — hvid pulse fordi baggrunden er rød */
  .home-section-hero .live-dot {
    background: var(--text-white);
    box-shadow: 0 0 0 0 var(--ov-white-50);
    animation: pulse-dot-white 1.6s ease-in-out infinite;
  }

  @keyframes pulse-dot-white {
    0%   { box-shadow: 0 0 0 0 var(--ov-white-50); }
    70%  { box-shadow: 0 0 0 8px var(--ov-white-00); }
    100% { box-shadow: 0 0 0 0 var(--ov-white-00); }
  }

  /* === Højre kolonne — TRANSMETUESIT chips === */
  .home-section-broadcasters {
    padding: 0;
  }

  .home-section-broadcasters .home-section-title {
    padding: 0 0 var(--space-16);
  }

  .home-section-broadcasters .broadcasters-row {
    padding: 0;
    gap: var(--space-12);
  }

  /* === Højre kolonne — PAS KËSAJ (upcoming) === */
  .home-section-upcoming {
    padding: 0;
  }

  .home-section-upcoming .home-section-title {
    padding: 0 0 var(--space-16);
  }

  .home-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .home-upcoming-row {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-12) var(--space-16);
    background: var(--ov-white-03);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    text-align: left;
    border: none;
  }

  .home-upcoming-row:hover {
    background: var(--ov-white-07);
  }

  .home-upcoming-time {
    font-size: var(--fs-subtitle);
    font-weight: 700;
    color: var(--text-white);
    font-variant-numeric: tabular-nums;
    width: 56px;
    flex-shrink: 0;
    letter-spacing: -0.3px;
  }

  .home-upcoming-info {
    flex: 1;
    min-width: 0;
  }

  .home-upcoming-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-white);
    margin: 0 0 var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-upcoming-channel {
    font-size: var(--fs-caption);
    color: var(--text-gray);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================
   STATION DETALJE MODAL — viser alle datapunkter
   ============================================ */
.station-detail,
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}

.station-detail[aria-hidden="false"],
.report-modal[aria-hidden="false"] {
  display: block;
}

.station-detail-backdrop,
.report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ov-black-70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.station-detail-sheet,
.report-modal-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tile-text);
  border-radius: 20px 20px 0 0;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-24) var(--space-20) calc(var(--space-40) + env(safe-area-inset-bottom));
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (min-width: 600px) {
  .station-detail-sheet,
  .report-modal-sheet {
    max-width: 540px;
    margin: 0 auto;
    border-radius: 20px;
    bottom: 5vh;
  }
}

.station-detail-close,
.report-modal-close {
  position: absolute;
  top: 14px;   /* layout-specifik positionering (ikke spacing-skala) */
  right: 14px;   /* layout-specifik positionering (ikke spacing-skala) */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ov-white-08);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}

.station-detail-close:hover,
.report-modal-close:hover {
  background: var(--ov-white-16);
}

.station-detail-close svg,
.report-modal-close svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   REPORT FORM
   ============================================ */
.report-modal-title {
  font-size: var(--fs-display);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--text-white);
  padding-right: var(--space-48);
}

.report-modal-station {
  font-size: var(--fs-body);
  color: var(--text-gray);
  margin: 0 0 var(--space-24);
}

.report-form { display: flex; flex-direction: column; gap: var(--space-16); }

.report-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.report-field > span {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-gray);
}

.report-field select,
.report-field input,
.report-field textarea {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  background: var(--card-bg);
  border: 1px solid var(--ov-white-08);
  border-radius: 10px;
  color: var(--text-white);
  font-size: var(--fs-body);
  outline: none;
  font-family: inherit;
}

.report-field select:focus,
.report-field input:focus,
.report-field textarea:focus {
  border-color: var(--ov-white-25);
}

.report-field textarea { resize: vertical; min-height: 70px; }

.report-submit {
  margin-top: var(--space-8);
  padding: var(--space-16);
  background: var(--valet-red);
  color: var(--text-white);
  border-radius: 12px;
  font-size: var(--fs-subsub);
  font-weight: 700;
  transition: filter 0.15s;
}

.report-submit:hover { filter: brightness(1.08); }

.report-status {
  margin: var(--space-16) 0 0;
  font-size: var(--fs-body);
  text-align: center;
  min-height: 18px;
}

.report-status.success { color: var(--success); }
.report-status.error   { color: var(--error); }

/* Info-knap på station-card (åbner detalje-modal) */
.zbuloni-station-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-gray);
  margin-left: var(--space-8);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.zbuloni-station-info-btn:hover {
  color: var(--text-white);
  background: var(--ov-white-08);
}

/* Station-favorit hjerte (Zbuloni + Audio ime) */
.zbuloni-station-fav {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-muted);
  flex-shrink: 0; cursor: pointer;
  transition: color 0.15s, transform 0.12s;
}
.zbuloni-station-fav:hover { color: var(--text-gray); }
.zbuloni-station-fav.is-fav { color: var(--valet-red); }
.zbuloni-station-fav.is-fav:active { transform: scale(1.25); }

/* Audio ime-fane */
.audio-header { padding: var(--title-top) var(--page-x) var(--space-16); position: sticky; top: 0; z-index: 7; background: var(--bg-app); }
/* Titlen bruger .zbuloni-title (Side-titel-loven — se index.html); .audio-title er kun en semantisk hook, ligesom .programi-title. */
.audio-eyebrow { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gray); padding: 0 var(--page-x) var(--space-12); }
.audio-empty { color: var(--text-gray); padding: 0 var(--page-x); }
/* Task #30: segment-filter (Të gjitha/Këngët/Stacionet/Programet) */
.audio-filter-row { display: flex; gap: var(--space-8); padding: 0 var(--page-x) var(--space-16); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.audio-filter-row::-webkit-scrollbar { display: none; }
.audio-filter-btn { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-caption); font-weight: 700; padding: 7px 14px; border-radius: 999px; border: none; background: var(--card-bg); color: var(--text-gray); cursor: pointer; white-space: nowrap; }
.audio-filter-btn.active { background: var(--valet-red); color: var(--fixed-white); }
.audio-filter-count { font-weight: 600; opacity: 0.7; }
.audio-filter-btn.active .audio-filter-count { opacity: 0.85; }
/* DR Lyd-inspireret genvejsliste (kun i "Të gjitha") — samme filter som pillerne */
.audio-nav-list { padding: 0 var(--page-x) var(--space-16); display: flex; flex-direction: column; }
.audio-nav-row { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-12) 0; border: none; border-bottom: 1px solid var(--ov-white-08); background: none; color: var(--text-primary); cursor: pointer; text-align: left; }
.audio-nav-list .audio-nav-row:last-child { border-bottom: none; }
.audio-nav-row svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-primary); }
.audio-nav-label { flex: 1 1 auto; font-size: var(--fs-body); font-weight: 600; }
.audio-nav-count { font-size: var(--fs-caption); color: var(--text-gray); }
.audio-nav-chevron { width: 18px !important; height: 18px !important; color: var(--text-gray) !important; }
/* Lag 2: Mine sange (KËNGËT E MIA) — kort med cover, titel, sanger, søge-links */
.song-list { padding: 0 var(--page-x); display: flex; flex-direction: column; gap: var(--space-8); }
.song-card { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); background: var(--card-bg); border-radius: var(--radius-card); }
.song-card-cover { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--ov-white-08); }
.song-card-cover--empty { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-gray); }
.song-card-info { flex: 1 1 auto; min-width: 0; }
.song-card-title { font-size: var(--fs-subsub); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-card-artist { font-size: var(--fs-caption); color: var(--text-gray); margin-top: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-card-links { display: flex; gap: var(--space-8); margin-top: var(--space-8); }
.song-link { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .3px; padding: 3px 10px; border-radius: 999px; text-decoration: none; color: var(--fixed-white); background: var(--ov-white-12); }
.song-link--sp { background: #1DB954; color: #000; }
.song-link--yt { background: #FF0000; }
.song-link--am { background: linear-gradient(135deg, #FA57C1, #FB5C74); }
.song-card-fav { flex: 0 0 auto; width: 34px; height: 34px; border: none; background: none; color: var(--valet-red); cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: flex-start; }
.song-card-fav svg { width: 20px; height: 20px; }

/* Likede programmer i Audio ime */
.audio-prog-list { padding: 0 var(--page-x); display: flex; flex-direction: column; gap: var(--space-8); }
.audio-prog-card { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); background: var(--card-bg); border-radius: var(--radius-card); cursor: pointer; }
.audio-prog-info { flex: 1 1 auto; min-width: 0; }
.audio-prog-title { font-size: var(--fs-subsub); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-prog-meta { font-size: var(--fs-caption); color: var(--text-gray); margin-top: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-prog-fav { flex: 0 0 auto; width: 34px; height: 34px; border: none; background: none; color: var(--valet-red); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.audio-prog-fav svg { width: 20px; height: 20px; }
.audio-empty-card {
  margin: var(--space-8) var(--page-x); padding: var(--space-40) var(--space-24); text-align: center;
  background: var(--card-bg); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-card);
}
.audio-empty-heart { font-size: 44px; color: var(--valet-red); opacity: 0.85; } /* §1-undtagelse: ikon/emoji-størrelse, ikke tekst */
.audio-empty-heart svg { width: 44px; height: 44px; }
.audio-empty-title { font-size: var(--fs-subtitle); font-weight: 700; color: var(--text-primary); margin-top: var(--space-12); }
.audio-empty-sub { font-size: var(--fs-body); color: var(--text-gray); margin-top: var(--space-8); line-height: 1.5; }

/* ================================================================
   PROGRAM DETAIL MODAL
   Slides up from bottom — viser fuld program-info: tema, værter, episodes
   ================================================================ */
.program-detail {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(90% - env(safe-area-inset-top));
  max-height: 900px;
  background: var(--bg-app);
  border-radius: 20px 20px 0 0;
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Skyggen KUN når modalen er åben — ellers blødte den opadgående skygge op
   fra skærmkanten og lavede en grå gradient bag tab-baren (når modalen lå skjult
   med translateY(100%) men stadig renderede). */
.program-detail.open {
  transform: translateY(0);
  box-shadow: 0 -20px 40px var(--ov-black-40);
}

.program-detail-handle {
  width: 36px;
  height: 4px;
  background: var(--ov-white-20);
  border-radius: 2px;
  margin: var(--space-12) auto 0;
  flex-shrink: 0;
}

.program-detail-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ov-white-08);
  border: none;
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.program-detail-close svg { width: 18px; height: 18px; }

.program-detail-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-32) var(--space-24) calc(var(--space-24) + env(safe-area-inset-bottom));
}

.program-detail-header { margin-bottom: var(--space-24); }
.program-detail-meta {
  display: flex;
  gap: var(--space-8);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-gray);
  margin-bottom: var(--space-8);
}
.program-detail-channel {
  color: var(--valet-red);
  font-weight: 700;
}
.program-detail-channel.rk2 { color: var(--rk2-purple); }
.program-detail-time { font-family: var(--font); font-variant-numeric: tabular-nums; }
.program-detail-days::before { content: '· '; }
.program-detail-title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-white);
}

.program-detail-section { margin-bottom: var(--space-32); }
.program-detail-section-title {
  font-size: var(--fs-caption);            /* afstemt med .home/.programi-section-title */
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-gray);
  margin-bottom: var(--space-12);
  font-weight: 700;
}

/* Lang beskrivelse — statisk for programmet */
.program-detail-description {
  font-size: var(--fs-subsub);
  line-height: 1.65;
  color: var(--text-white);
  margin-bottom: var(--space-4);
}

/* Meta-data badges: genre, duration, language */
.program-detail-meta-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-32);
}
.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--ov-white-06);
  border: 0.5px solid var(--ov-white-10);
  border-radius: 999px;
  font-size: var(--fs-caption);
  color: var(--text-white);
  font-weight: 500;
}
.meta-badge .meta-icon { font-size: var(--fs-body); opacity: 0.8; }

.program-detail-theme {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-white);
  font-style: italic;
}

:root[data-theme="light"] {
  .program-detail-description { color: var(--text-primary); }
  .meta-badge {
    background: var(--ov-black-05);
    border-color: var(--ov-black-10);
    color: var(--text-primary);
  }
}
.program-detail-empty {
  font-size: var(--fs-body);
  color: var(--text-gray);
}

.program-detail-hosts {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.program-detail-host {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-12);
  background: var(--ov-white-04);
  border-radius: 10px;
}
.program-detail-host-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar2-grad-1), var(--avatar2-grad-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-white);
  flex-shrink: 0;
}
.program-detail-host-info { flex: 1; min-width: 0; }
.program-detail-host-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-white);
}
.program-detail-host-role {
  font-size: var(--fs-micro);
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-2);
}

.program-detail-episodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.program-detail-episode {
  padding: var(--space-12);
  background: var(--ov-white-04);
  border-radius: 10px;
  border-left: 3px solid var(--valet-red);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.program-detail-episode-main { flex: 1; min-width: 0; }
.program-detail-episode-podcast {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--valet-red);
  color: var(--fixed-white);
  cursor: pointer;
}
.program-detail-episode-podcast svg { width: 18px; height: 18px; }
.program-detail-episode-podcast.soon { background: var(--row-bg-hover); color: var(--text-muted); cursor: default; }
.program-detail-episode-podcast:not(.soon):active { transform: scale(0.92); }
.program-detail-episode-date {
  font-size: var(--fs-micro);
  font-family: var(--font); font-variant-numeric: tabular-nums;
  color: var(--text-gray);
  margin-bottom: var(--space-4);
}
.program-detail-episode-desc {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-white);
}

.program-detail-play {
  width: 100%;
  background: var(--valet-red);
  color: var(--text-white);
  border: none;
  padding: var(--space-16) var(--space-20);
  border-radius: 12px;
  font-size: var(--fs-subsub);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  cursor: pointer;
  margin-top: var(--space-8);
}
.program-detail-play svg { width: 22px; height: 22px; }
.program-detail-play:active { transform: scale(0.98); }

/* Backdrop når detail er åben */
.program-detail-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ov-black-50);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 49;
}
.program-detail.open ~ .program-detail-backdrop,
.program-detail-backdrop.open { opacity: 1; pointer-events: auto; }

/* Light mode overrides */
:root[data-theme="light"] {
  .program-detail-handle { background: var(--ov-black-20); }
  .program-detail-close {
    background: var(--ov-black-06);
    color: var(--text-primary);
  }
  .program-detail-title,
  .program-detail-theme,
  .program-detail-host-name,
  .program-detail-episode-desc { color: var(--text-primary); }
  .program-detail-meta,
  .program-detail-section-title,
  .program-detail-empty,
  .program-detail-host-role,
  .program-detail-episode-date { color: var(--ov-black-60); }
  .program-detail-host,
  .program-detail-episode { background: var(--ov-black-04); }
}

/* ================================================================
   LIGHT MODE — pragmatiske overrides
   De fleste hvide gennemsigtige lag (white-alpha) bliver sorte (black-alpha) i
   light mode, så lyse stripes/borders/highlights bliver synlige på hvid baggrund.
   ================================================================ */
:root[data-theme="light"] {
  /* App-shell + body */
  .app-shell { background: var(--bg-app); }

  /* Mini-player — HVID (som resten af bunden), kun en hårstreg adskiller den */
  .mini-player {
    background: var(--fixed-white);
    border-top: 0.5px solid var(--border-subtle);
  }
  .mini-player:hover { background: var(--hover-light); }
  .mini-player-title { color: var(--text-primary); }
  .mini-player-host { color: var(--ov-black-45); }

  /* Tab-bar — eksplicit ren hvid hele vejen ned (dækker home-indicator-zonen) */
  .tab-bar {
    background: var(--fixed-white);
    border-top: 0.5px solid var(--ov-black-08);
  }
  .tab-btn { color: var(--ov-black-45); }
  .tab-btn.active { color: var(--valet-red); }

  /* TANI LIVE / Now-playing card */
  .now-playing-card {
    background: var(--card-bg);
    border: 0.5px solid var(--border-subtle);
  }
  .now-playing-program { color: var(--text-primary); }
  .now-playing-host { color: var(--ov-black-55); }
  .now-playing-theme { color: var(--ov-black-50); }

  /* Frekvens-strip */
  .freq-strip {
    background: var(--ov-black-04);
    border: 1px solid var(--border-subtle);
  }
  .freq-strip-label { color: var(--ov-black-40); }
  .freq-chip-mini {
    background: var(--ov-black-06);
    color: var(--ov-black-75);
  }
  /* freq-primary forbliver rød/lilla i begge temaer */

  /* Headers, taglines, version */
  .valet-logo { color: var(--text-primary); }
  .valet-tagline { color: var(--ov-black-55); }
  .app-version { color: var(--ov-black-25); }
  .home-section-title,
  .programi-section-title { color: var(--ov-black-50); }

  /* Broadcaster chips er faste hvide fliser i begge temaer — ingen light-override nødvendig */

  /* PAS KËSAJ (upcoming list) */
  .home-upcoming-row {
    background: var(--card-bg);
    border: 0.5px solid var(--border-subtle);
  }
  .home-upcoming-time { color: var(--ov-black-50); }
  .home-upcoming-title { color: var(--text-primary); }
  .home-upcoming-channel { color: var(--ov-black-55); }

  /* Programi cards */
  .programi-card {
    background: var(--card-bg);
    border: 0.5px solid var(--border-subtle);
  }
  .programi-card-time { color: var(--ov-black-50); }
  .programi-card-title { color: var(--text-primary); }
  .programi-card-host { color: var(--ov-black-60); }
  .programi-station-tab { color: var(--ov-black-40); }
  .programi-station-tab.active { color: var(--text-primary); }

  /* Zbuloni */
  .zbuloni-station-card {
    background: var(--card-bg);
    border: 0.5px solid var(--border-subtle);
  }
  .zbuloni-status,
  .zbuloni-empty,
  .zbuloni-region-title { color: var(--ov-black-55); }

  /* Volume slider tracks */
  .volume-slider {
    background: var(--ov-black-10);
  }

  /* Scroll-bars (subtle) */
  ::-webkit-scrollbar-thumb {
    background: var(--ov-black-15);
  }
}

/* ====== NIVEAU-VERIFICERET MÆRKE (badge.js) ======
   Designet metallisk medaljon-prik (afløser smiley-seglet). Én rolig prik med
   top-lyst gradient + inset-highlight + skygge; farve = broadcasterens metal-
   niveau (auditten er eneste autoritet). 'kryptonite' = diamant (top). */
.vbadge {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.4em;
  vertical-align: 0.04em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--lvl-light, #c2c8d2), var(--lvl-dark, #5c616b));
  box-shadow:
    inset 0 0.07em 0.07em rgba(255, 255, 255, 0.6),   /* top-highlight (sheen) */
    inset 0 -0.06em 0.09em rgba(0, 0, 0, 0.4),         /* bund-skygge (dybde)   */
    0 0.05em 0.14em rgba(0, 0, 0, 0.5);                /* drop-skygge           */
}
/* Niveau-toner — lys (top) → mørk (bund) giver den metalliske sheen. */
.vbadge.lvl-jern     { --lvl-light: #c4cad4; --lvl-dark: #5c616b; }  /* jern — stål       */
.vbadge.lvl-solv     { --lvl-light: #f3f6fa; --lvl-dark: #a9b2bf; }  /* sølv — kølig sølv */
.vbadge.lvl-guld     { --lvl-light: #ffe6a0; --lvl-dark: #cf9a2e; }  /* guld — guld       */
.vbadge.lvl-platinum { --lvl-light: #e9fbff; --lvl-dark: #56b0c2; }  /* platinum — platin */
.vbadge.lvl-diamant  { --lvl-light: #cfe6ff; --lvl-dark: #3f8ef5; }  /* diamant (top)     */

/* "Under kortlægning" — hul ring: kortlagt men under jern (ikke verificeret endnu).
   Outline = "ikke fyldt ud endnu" — tydeligt forskellig fra de fyldte metal-prikker og
   fra ingen-prik (urørt stub). Neutral tone, læses i begge temaer. */
.vbadge.vbadge-progres {
  background: none;
  box-shadow: none;
  border: 1.5px solid var(--text-gray);
}

/* "Kortlagt men lukket" — forseglet ring: samme kortlagt-ring som hul-ringen, men FYLDT med en
   dæmpet grå = "lukket/forseglet". Adskiller sig fra hul-ringen (tom = under kortlægning), fra
   metal-prikkerne (blank sheen = aktiv præstation) og fra urørt stub (ingen dot). Bruger
   --text-gray → tema-bevidst (læses i både lyst og mørkt). Etiket: "I hartografuar · i mbyllur". */
.vbadge.vbadge-mbyllur {
  background: color-mix(in srgb, var(--text-gray) 52%, transparent);
  box-shadow: none;
  border: 1.5px solid var(--text-gray);
}

/* ====== IKKE-BLOKERENDE TOAST (player.js showToast) ======
   Afløser den gamle alert() der frøs hele app'en ved afspilnings-fejl. */
#valet-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  max-width: min(86vw, 380px);
  padding: 11px 16px;
  background: rgba(28, 28, 30, 0.96);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#valet-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}