/* ==========================================================================
   AscultăLive — Public Interface Design System
   "Premium corporate structure with controlled, purposeful colour."
   Deep violet/plum base · violet → magenta brand · amber accent
   (ascultalive.ro identity) · mobile-first · app-like · original.
   Layered on top of the Bootstrap grid that remains loaded.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — violet → magenta + amber accent (ascultalive.ro) */
  --al-coral: #c84be0;        /* magenta brand accent (active / highlight) */
  --al-coral-600: #b021d6;
  --al-violet: #9b6cf6;
  --al-violet-600: #7c3aed;
  --al-magenta: #d23ec8;
  --al-amber: #f7c63d;        /* warm pop — the mic/CTA colour from the banner */
  --al-amber-600: #f0b21f;
  --al-grad: linear-gradient(135deg, #9b6cf6 0%, #b44ce0 46%, #d23ec8 100%);
  --al-grad-soft: linear-gradient(135deg, rgba(155,108,246,.16), rgba(210,62,200,.16));

  /* Surfaces — deep violet / plum */
  --al-bg: #150826;
  --al-bg-2: #1c0d33;
  --al-surface: #271544;
  --al-surface-2: rgba(43, 25, 74, .55);
  --al-elevated: #331b57;
  --al-line: rgba(255,255,255,.08);
  --al-line-strong: rgba(255,255,255,.16);

  /* Text — warm white + clearer secondary */
  --al-text: #f4f4fb;
  --al-text-dim: #b7bad0;
  --al-text-faint: #8186a6;

  /* Category colours (controlled) */
  --al-cat-blue: #2f6bff;
  --al-cat-blue-2: #1b4dd6;
  --al-cat-teal: #11b3a3;
  --al-cat-teal-2: #0a8b7e;
  --al-cat-violet: #8b5cf6;
  --al-cat-violet-2: #6d28d9;
  --al-cat-orange: #ff8a3d;
  --al-cat-orange-2: #ec6a16;

  /* State colours */
  --al-live: #f7c63d;         /* amber pulse — branded pop, matches the banner */
  --al-ok: #36d399;
  --al-warn: #ffc24b;
  --al-err: #ff6b6b;

  /* Geometry */
  --al-r-sm: 12px;
  --al-r: 18px;
  --al-r-lg: 24px;
  --al-r-pill: 999px;

  /* Spacing */
  --al-s1: 4px; --al-s2: 8px; --al-s3: 12px; --al-s4: 16px;
  --al-s5: 24px; --al-s6: 32px; --al-s7: 48px; --al-s8: 64px;

  /* Elevation */
  --al-shadow: 0 10px 30px rgba(4,3,18,.45);
  --al-shadow-lg: 0 22px 60px rgba(4,3,18,.6);

  /* Chrome heights */
  --al-bar-h: 66px;
  --al-dock-h: 84px;

  /* Motion */
  --al-ease: cubic-bezier(.22,.61,.36,1);
  --al-fast: 140ms;
  --al-med: 240ms;

  --al-font: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------- Base reset over Bootstrap ---------- */
html { scroll-behavior: smooth; }
body.al-body,
body[class*="site-bg-"] {
  background: var(--al-bg) !important;
  color: var(--al-text);
  font-family: var(--al-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding-top: var(--al-bar-h);
  /* Default clearance even before a station is chosen keeps layout stable. */
  padding-bottom: calc(var(--al-dock-h) + env(safe-area-inset-bottom, 0px));
}
body.al-has-player { padding-bottom: calc(var(--al-dock-h) + 20px + env(safe-area-inset-bottom, 0px)); }

.al-body a { color: var(--al-text); text-decoration: none; }
.al-body a:hover { color: #fff; }
.al-body h1, .al-body h2, .al-body h3 { font-weight: 800; letter-spacing: -.02em; color: #fff; }

::selection { background: rgba(200,75,224,.35); }

/* Decorative ambient glow behind content */
.al-body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(58vw 42vh at 84% -8%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(50vw 40vh at -8% 4%, rgba(200,75,224,.14), transparent 58%),
    radial-gradient(40vw 36vh at 60% 110%, rgba(247,198,61,.08), transparent 60%);
  pointer-events: none;
}

/* ---------- Focus visibility (a11y) ---------- */
.al-body :focus-visible {
  outline: 3px solid var(--al-violet);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Top app bar ---------- */
.al-appbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--al-bar-h);
  z-index: 1040;
  display: flex; align-items: center; gap: var(--al-s3);
  padding: 0 clamp(12px, 3vw, 30px);
  background: rgba(21,8,38,.74);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--al-line);
}
.al-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.22rem; color: #fff; letter-spacing: -.02em; }
.al-brand .al-livedot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--al-live);
  box-shadow: 0 0 0 0 rgba(247,198,61,.7);
  animation: al-pulse 2s infinite;
}
.al-brand b { background: var(--al-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* "Live" — violet word, matching the official "Ascultă Live" lockup */
.al-brand .al-live-word {
  background: none; color: var(--al-violet); -webkit-text-fill-color: var(--al-violet);
  font-weight: 800; margin-left: .22em;
}
.al-tagline {
  display: block; margin-top: 8px; color: var(--al-text-faint);
  font-size: .64rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
}
.al-brand .al-brand-logo { height: 40px; width: auto; display: block; margin: -4px 0; }

.al-appbar-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--al-s4); }
.al-appbar-nav a {
  padding: 9px 16px; border-radius: var(--al-r-pill); color: var(--al-text-dim);
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  transition: background var(--al-fast), color var(--al-fast);
}
.al-appbar-nav a:hover { background: var(--al-surface); color: #fff; }
.al-appbar-nav a.is-active { color: #fff; background: linear-gradient(135deg, rgba(200,75,224,.18), rgba(139,92,246,.18)); }
.al-appbar-spacer { flex: 1; }

.al-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: var(--al-r-pill);
  background: transparent; color: var(--al-text-dim); cursor: pointer;
  transition: background var(--al-fast), color var(--al-fast), transform var(--al-fast);
}
.al-iconbtn:hover { background: var(--al-surface); color: #fff; }
.al-iconbtn:active { transform: scale(.94); }
.al-iconbtn svg { width: 22px; height: 22px; fill: currentColor; }
.al-iconbtn.is-on { color: var(--al-coral); }
.al-iconbtn.is-on svg { fill: var(--al-coral); }

/* ---------- Layout shell ---------- */
.al-main { display: block; min-height: 60vh; }
.al-container { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(14px, 3vw, 30px); }
.al-section { margin-top: var(--al-s7); }
.al-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--al-s3); margin-bottom: var(--al-s4); }
.al-section-head h2, .al-section-head h1 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0; }
.al-section-head .al-more { color: var(--al-text-dim); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.al-section-head .al-more:hover { color: var(--al-coral); }
.al-eyebrow { color: var(--al-violet); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; }

/* ---------- Hero ---------- */
.al-hero {
  margin-top: var(--al-s5);
  border-radius: var(--al-r-lg);
  padding: clamp(24px, 4.4vw, 52px);
  background:
    radial-gradient(130% 150% at 102% 0%, rgba(139,92,246,.28), transparent 56%),
    radial-gradient(120% 150% at 0% 100%, rgba(200,75,224,.20), transparent 56%),
    linear-gradient(180deg, #221042, #17092e);
  border: 1px solid var(--al-line);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); align-items: center;
}
@media (min-width: 900px){ .al-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.al-hero-copy { min-width: 0; }
.al-hero h1 { font-size: clamp(1.7rem, 4.8vw, 3rem); line-height: 1.06; margin: 0 0 14px; max-width: 20ch; }
.al-hero h1 .al-hero-accent { background: var(--al-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.al-hero p { color: var(--al-text-dim); max-width: 50ch; font-size: 1.05rem; margin-bottom: 22px; }
.al-hero .al-hero-actions { display: flex; flex-wrap: wrap; gap: var(--al-s3); }

/* Hero search field (prominent) */
.al-hero-search { display: flex; align-items: center; gap: 10px; margin-top: 4px; max-width: 620px;
  background: rgba(8,7,22,.6); border: 1px solid var(--al-line-strong); border-radius: var(--al-r-pill);
  padding: 6px 6px 6px 20px; box-shadow: var(--al-shadow); cursor: text;
  transition: border-color var(--al-fast), box-shadow var(--al-fast); }
.al-hero-search:hover { border-color: rgba(255,255,255,.28); }
.al-hero-search > svg { width: 22px; height: 22px; fill: var(--al-text-faint); flex: none; }
.al-hero-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-family: inherit; font-size: 1.04rem; padding: 12px 2px; cursor: text; }
.al-hero-search input::placeholder { color: var(--al-text-faint); }
.al-hero-search .al-btn { flex: none; width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.al-hero-search .al-btn svg { width: 22px; height: 22px; }

/* Hero visual — headphones over a dense animated equalizer that bleeds right */
.al-hero-visual { position: relative; min-height: 300px; display: grid; place-items: center;
  margin-right: clamp(-52px, -4vw, -20px); }
.al-hero-visual::before { content: ""; position: absolute; inset: -16% -10% -10% -4%;
  background: radial-gradient(58% 56% at 62% 42%, rgba(168,85,247,.5), transparent 68%),
              radial-gradient(48% 50% at 88% 60%, rgba(247,198,61,.34), transparent 70%),
              radial-gradient(40% 44% at 22% 64%, rgba(200,75,224,.4), transparent 70%);
  filter: blur(8px); pointer-events: none; }
.al-hero-headphones { position: relative; z-index: 2; width: clamp(170px, 28vw, 280px); height: auto;
  filter: drop-shadow(0 22px 48px rgba(168,85,247,.5)); }
.al-hero-headphones svg { width: 100%; height: auto; display: block; }
.al-hero-eq { position: absolute; z-index: 1; inset: auto 0 8%; display: flex; align-items: flex-end; justify-content: flex-end;
  gap: clamp(2px, .5vw, 5px); height: 150px; padding-right: 0; }
.al-hero-eq i { flex: 1 1 0; max-width: 11px; border-radius: 3px 3px 1px 1px; height: 100%;
  background: linear-gradient(180deg, #ff5c7a, #a855f7);
  transform-origin: bottom; animation: al-hero-eq 1100ms ease-in-out infinite; opacity: .92; }
/* left→right hue shift: pink → violet → blue, like the reference */
.al-hero-eq i:nth-child(n+14) { background: linear-gradient(180deg, #c06bf5, #8b5cf6); }
.al-hero-eq i:nth-child(n+27) { background: linear-gradient(180deg, #f7c63d, #f0a91f); }
/* staggered, waveform-like heights + delays */
.al-hero-eq i:nth-child(3n){ animation-delay:.35s } .al-hero-eq i:nth-child(4n){ animation-delay:.55s }
.al-hero-eq i:nth-child(5n){ animation-delay:.2s }  .al-hero-eq i:nth-child(7n){ animation-delay:.7s }
.al-hero-eq i:nth-child(2n){ animation-duration:1300ms } .al-hero-eq i:nth-child(3n+1){ animation-duration:950ms }
@media (max-width: 899px){ .al-hero-visual { min-height: 180px; margin-right: 0; } .al-hero-eq { height: 96px; } }
@keyframes al-hero-eq { 0%,100%{ transform: scaleY(.22); } 50%{ transform: scaleY(1); } }

/* Coverage section sits directly under the hero — tighten the gap */
.al-section--coverage { margin-top: var(--al-s5); }

/* ---------- Buttons ---------- */
.al-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: 0; cursor: pointer; font-weight: 700; font-family: inherit;
  padding: 13px 22px; border-radius: var(--al-r-pill); font-size: .97rem;
  transition: transform var(--al-fast), filter var(--al-fast), background var(--al-fast), box-shadow var(--al-med) var(--al-ease);
  min-height: 46px;
}
.al-btn:active { transform: translateY(1px) scale(.99); }
.al-btn-primary { background: var(--al-grad); color: #fff; box-shadow: 0 8px 22px rgba(168,85,247,.28); }
.al-btn-primary:hover { filter: brightness(1.07); color: #fff; box-shadow: 0 12px 30px rgba(168,85,247,.42); }
.al-btn-ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--al-line-strong); }
.al-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.al-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Smart Search overlay ---------- */
.al-search-overlay {
  position: fixed; inset: 0; z-index: 1080; display: none;
  /* Soft branded dim + restrained blur — present, never noisy. */
  background: radial-gradient(120% 90% at 50% 0%, rgba(40,18,72,.5), rgba(8,5,20,.72));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: clamp(56px, 11vh, 132px) var(--al-s4) var(--al-s4);
  overscroll-behavior: contain; overflow-y: auto;
}
.al-search-overlay.is-open { display: block; animation: al-fade var(--al-med) var(--al-ease); }

.al-search-panel {
  width: min(740px, 100%); margin-inline: auto;
  background: linear-gradient(180deg, rgba(43,25,74,.94), rgba(29,16,52,.96));
  border: 1px solid var(--al-line-strong); border-radius: var(--al-r-lg);
  box-shadow: var(--al-shadow-lg); overflow: hidden;
  animation: al-pop var(--al-med) var(--al-ease);
}
@keyframes al-pop { from { transform: translateY(-10px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

/* Field */
.al-search-field {
  display: flex; align-items: center; gap: var(--al-s3); position: relative;
  padding: 6px 8px 6px 20px; border-bottom: 1px solid var(--al-line);
}
.al-search-field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--al-grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--al-med) var(--al-ease);
}
.al-search-field.is-focused::after { transform: scaleX(1); }
.al-search-ico { width: 22px; height: 22px; fill: var(--al-text-faint); flex: none; transition: fill var(--al-fast); }
.al-search-field.is-focused .al-search-ico { fill: var(--al-violet); }
.al-search-field input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff;
  font-family: inherit; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; padding: 16px 2px;
}
.al-search-field input::placeholder { color: var(--al-text-faint); font-weight: 500; }
/* Focus is shown by the field's gradient underline + icon colour, so the global
   outline ring is suppressed here to avoid a competing rounded box. */
.al-search-field input:focus-visible { outline: none; }
.al-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.al-search-clear {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: var(--al-r-pill); cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--al-text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--al-fast), color var(--al-fast);
}
.al-search-clear svg { width: 13px; height: 13px; fill: currentColor; }
.al-search-clear:hover { background: rgba(255,255,255,.12); color: #fff; }
.al-search-field .al-iconbtn { flex: none; }

/* Body / scroll area */
.al-search-body { max-height: min(58vh, 540px); overflow-y: auto; padding: var(--al-s2);
  padding-bottom: calc(var(--al-s2) + env(safe-area-inset-bottom, 0px)); }
.al-search-body:empty { display: none; }

/* Sections + chips (initial state) */
.al-search-sec + .al-search-sec { margin-top: var(--al-s2); }
.al-search-sec-head { padding: var(--al-s3) var(--al-s3) var(--al-s2); }
.al-search-sec-head h4 { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--al-text-faint); }
.al-chips { display: flex; flex-wrap: wrap; gap: var(--al-s2); padding: 0 var(--al-s3) var(--al-s2); }
.al-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-radius: var(--al-r-pill); border: 1px solid var(--al-line-strong);
  background: rgba(255,255,255,.04); color: var(--al-text); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: border-color var(--al-fast), background var(--al-fast), transform var(--al-fast);
}
.al-chip svg { width: 15px; height: 15px; fill: var(--al-violet); }
.al-chip:hover, .al-chip:focus-visible { background: var(--al-grad-soft); border-color: var(--al-violet); transform: translateY(-1px); outline: none; }
.al-chip:active { transform: translateY(0); }

/* Result rows */
.al-sr-item {
  display: flex; align-items: center; gap: var(--al-s3); padding: 9px 12px;
  border-radius: var(--al-r); cursor: pointer; position: relative;
  transition: background var(--al-fast), box-shadow var(--al-fast);
}
.al-sr-item:hover, .al-sr-item.is-active { background: var(--al-elevated); }
.al-sr-item.is-active { box-shadow: inset 0 0 0 1px var(--al-line-strong); }
.al-sr-art { position: relative; flex: none; width: 50px; height: 50px; border-radius: var(--al-r-sm);
  overflow: hidden; box-shadow: var(--al-shadow); background: var(--al-bg-2); }
.al-sr-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-sr-main { min-width: 0; flex: 1; }
.al-sr-name { display: block; font-weight: 700; font-size: 1rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sr-meta { display: block; font-size: .82rem; color: var(--al-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.al-hl { color: var(--al-violet); background: transparent; font-weight: 800; }
.al-sr-badge { flex: none; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--al-amber); border: 1px solid rgba(247,198,61,.35); border-radius: var(--al-r-pill); padding: 2px 8px; }
.al-sr-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.al-sr-btn { width: 38px; height: 38px; border: 0; border-radius: var(--al-r-pill); cursor: pointer; background: transparent;
  color: var(--al-text-dim); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--al-fast), color var(--al-fast), filter var(--al-fast); }
.al-sr-btn svg { width: 18px; height: 18px; fill: currentColor; }
.al-sr-btn:hover, .al-sr-btn:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }
.al-sr-play { background: var(--al-grad); color: #fff; box-shadow: 0 6px 16px rgba(168,85,247,.3); }
.al-sr-play:hover, .al-sr-play:focus-visible { filter: brightness(1.08); color: #fff; background: var(--al-grad); }
.al-sr-fav.is-on { color: var(--al-coral); }
.al-sr-play .ic-play, .al-sr-play .ic-pause { width: 18px; height: 18px; }
.al-sr-play.is-playing .ic-play { display: none; }
.al-sr-play.is-playing .ic-pause { display: block !important; }

/* Messages: hint / loading / empty / error */
.al-search-hint { padding: 18px; text-align: center; color: var(--al-text-faint); font-size: .9rem; }
.al-search-msg { padding: 30px var(--al-s4); text-align: center; }
.al-search-msg-ico { width: 46px; height: 46px; margin: 0 auto var(--al-s3); display: grid; place-items: center;
  border-radius: var(--al-r-pill); background: var(--al-grad-soft); color: var(--al-violet); }
.al-search-msg-ico svg { width: 24px; height: 24px; fill: currentColor; }
.al-search-msg h4 { margin: 0 0 4px; font-size: 1rem; color: #fff; }
.al-search-msg p { margin: 0 auto; max-width: 34ch; font-size: .88rem; color: var(--al-text-faint); }
.al-search-spin { width: 24px; height: 24px; margin: 0 auto var(--al-s3); border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16); border-top-color: var(--al-violet); animation: al-spin .7s linear infinite; }

/* View all */
.al-search-all { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px var(--al-s2) var(--al-s2); padding: 12px; border-radius: var(--al-r);
  background: rgba(255,255,255,.04); color: var(--al-violet); font-weight: 700; font-size: .92rem;
  border: 1px solid var(--al-line); transition: background var(--al-fast), border-color var(--al-fast), color var(--al-fast); }
.al-search-all:hover, .al-search-all:focus-visible { background: var(--al-grad-soft); border-color: var(--al-violet); color: #fff; outline: none; }
.al-search-all svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 560px) {
  .al-search-overlay { padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .al-search-panel { border-radius: var(--al-r); }
  .al-search-field { padding-left: 16px; }
  .al-search-field input { font-size: 1.04rem; padding: 14px 2px; }
  .al-search-body { max-height: calc(100vh - 188px); }
  /* Keep phone rows uncluttered — the featured badge is desktop-only. */
  .al-sr-badge { display: none; }
  .al-sr-item { gap: var(--al-s2); padding: 9px 8px; }
  .al-sr-btn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-search-overlay.is-open, .al-search-panel { animation: none; }
  .al-search-field::after { transition: none; }
}

/* ---------- Quick filter (listing pages) ---------- */
.al-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: var(--al-s4) 0; }
.al-filter {
  display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 360px;
  background: var(--al-surface); border: 1px solid var(--al-line); border-radius: var(--al-r-pill);
  padding: 9px 16px;
}
.al-filter svg { width: 18px; height: 18px; fill: var(--al-text-faint); }
.al-filter input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-family: inherit; }
.al-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.al-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--al-r-pill);
  background: var(--al-surface); border: 1px solid var(--al-line); color: var(--al-text-dim);
  font-weight: 600; font-size: .88rem; white-space: nowrap;
}
.al-chip:hover, .al-chip.is-active { color: #fff; background: var(--al-grad); border-color: transparent; }

/* ---------- Coverage tiles (Acoperire) ---------- */
.al-coverage-grid { display: grid; gap: clamp(12px, 1.8vw, 18px); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px){ .al-coverage-grid { grid-template-columns: 1fr; } }
@media (min-width: 980px){ .al-coverage-grid { grid-template-columns: repeat(4, 1fr); } }
.al-coverage {
  position: relative; border-radius: var(--al-r); padding: 20px; min-height: 132px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden; color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(150deg, var(--cv-a, var(--al-cat-violet)), var(--cv-b, var(--al-cat-violet-2)));
  box-shadow: var(--al-shadow);
  transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med);
}
.al-coverage:hover { transform: translateY(-4px); box-shadow: var(--al-shadow-lg); color: #fff; }
.al-coverage::after { content: ""; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.al-coverage .al-cv-head { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.al-coverage .al-cv-icon { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18);
  display: grid; place-items: center; flex: none; }
.al-coverage .al-cv-icon svg { width: 26px; height: 26px; fill: #fff; }
.al-coverage .al-cv-title { font-weight: 800; font-size: 1.12rem; line-height: 1.1; }
.al-coverage .al-cv-sub { color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 600; }
.al-coverage .al-cv-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.al-coverage .al-cv-count { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.85); }
.al-coverage .al-cv-count b { font-size: 1.5rem; font-weight: 800; color: #fff; margin-right: 4px; letter-spacing: 0; }
.al-coverage .al-cv-arrow { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: grid; place-items: center; }
.al-coverage .al-cv-arrow svg { width: 18px; height: 18px; fill: #fff; }
.al-cv-blue   { --cv-a: var(--al-cat-blue);   --cv-b: var(--al-cat-blue-2); }
.al-cv-teal   { --cv-a: var(--al-cat-teal);   --cv-b: var(--al-cat-teal-2); }
.al-cv-violet { --cv-a: var(--al-cat-violet); --cv-b: var(--al-cat-violet-2); }
.al-cv-orange { --cv-a: var(--al-cat-orange); --cv-b: var(--al-cat-orange-2); }

/* ---------- Section head with eyebrow, and section lead ---------- */
.al-section-head > div { min-width: 0; }
.al-section-head > div .al-eyebrow { display: block; margin-bottom: 2px; }
.al-section-lead { color: var(--al-text-dim); margin: calc(-1 * var(--al-s2)) 0 var(--al-s4); font-size: .95rem; max-width: 60ch; }

/* ---------- Mood / activity discovery tiles ("Ce vrei să asculți acum?") ---------- */
.al-moods { display: grid; gap: clamp(10px, 1.5vw, 14px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px)  { .al-moods { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .al-moods { grid-template-columns: repeat(8, 1fr); } }
.al-mood {
  --m: var(--al-violet); --m-rgb: 155,108,246;
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--al-r); overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--m-rgb), .16), rgba(var(--m-rgb), .05));
  border: 1px solid rgba(var(--m-rgb), .28); color: #fff;
  transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med), border-color var(--al-med);
}
.al-mood:hover, .al-mood:focus-visible { transform: translateY(-3px); border-color: rgba(var(--m-rgb), .6);
  box-shadow: var(--al-shadow); color: #fff; outline: none; }
.al-mood-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: rgba(var(--m-rgb), .22); }
.al-mood-ic svg { width: 22px; height: 22px; fill: var(--m); }
.al-mood-label { font-weight: 800; font-size: .95rem; line-height: 1.15; letter-spacing: -.01em; }
.al-mood-blue    { --m: var(--al-cat-blue);   --m-rgb: 47,107,255; }
.al-mood-teal    { --m: var(--al-cat-teal);   --m-rgb: 17,179,163; }
.al-mood-violet  { --m: var(--al-violet);     --m-rgb: 155,108,246; }
.al-mood-magenta { --m: var(--al-magenta);    --m-rgb: 210,62,200; }
.al-mood-orange  { --m: var(--al-cat-orange); --m-rgb: 255,138,61; }
.al-mood-coral   { --m: var(--al-coral);      --m-rgb: 200,75,224; }

/* ---------- Station card grid ---------- */
.al-grid {
  display: grid; gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) { .al-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .al-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px){ .al-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1320px){ .al-grid { grid-template-columns: repeat(6, 1fr); } }

/* Horizontal scroll rail (recommended stations) */
.al-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(124px, 30vw, 150px);
  gap: clamp(12px, 2vw, 20px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  padding-bottom: 6px; margin-bottom: -6px; scrollbar-width: thin; scrollbar-color: var(--al-line-strong) transparent; }
.al-rail::-webkit-scrollbar { height: 8px; }
.al-rail::-webkit-scrollbar-thumb { background: var(--al-line-strong); border-radius: 8px; }
.al-rail::-webkit-scrollbar-track { background: transparent; }
.al-card--rail { scroll-snap-align: start; }

.al-card { position: relative; }
.al-card-art {
  position: relative; aspect-ratio: 1/1; border-radius: var(--al-r);
  overflow: hidden; background: #fff; border: 1px solid var(--al-line);
  transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med) var(--al-ease), border-color var(--al-med);
}
.al-card-art img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--al-med) var(--al-ease); }
.al-card:hover .al-card-art { transform: translateY(-4px); box-shadow: var(--al-shadow); border-color: var(--al-line-strong); }
.al-card:hover .al-card-art img { transform: scale(1.05); }
.al-card-title {
  display: -webkit-box; margin-top: 10px; font-weight: 700; font-size: .92rem; color: var(--al-text);
  line-height: 1.25; min-height: 2.3em; overflow: hidden; text-overflow: ellipsis; white-space: normal;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.al-card-sub { display: block; color: var(--al-text-faint); font-size: .78rem; }

/* play overlay button on card */
.al-card-play {
  position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: var(--al-grad); box-shadow: 0 6px 18px rgba(0,0,0,.45);
  display: grid; place-items: center; opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity var(--al-med) var(--al-ease), transform var(--al-med) var(--al-ease);
}
.al-card-play svg { width: 22px; height: 22px; fill: currentColor; }
.al-card:hover .al-card-play,
.al-card:focus-within .al-card-play,
.al-card-play:focus-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (hover: none) { .al-card-play { opacity: 1; transform: none; width: 40px; height: 40px; } }

/* active / playing card states (synced) */
.al-card.is-active .al-card-art { border-color: var(--al-coral); box-shadow: 0 0 0 2px rgba(200,75,224,.5), var(--al-shadow); }
.al-card.is-active .al-card-title { color: #fff; }
.al-card.is-playing .al-card-play { opacity: 1; transform: none; }

/* equalizer badge shown on the playing card */
.al-eq { position: absolute; top: 10px; left: 10px; display: none; gap: 3px; align-items: flex-end;
  height: 18px; padding: 6px 8px; border-radius: var(--al-r-pill); background: rgba(21,8,38,.7); backdrop-filter: blur(4px); }
.al-card.is-playing .al-eq { display: inline-flex; }
.al-eq i { width: 3px; height: 100%; background: var(--al-coral); border-radius: 2px; transform-origin: bottom; animation: al-eq 900ms ease-in-out infinite; }
.al-eq i:nth-child(2){ animation-delay: .2s; } .al-eq i:nth-child(3){ animation-delay: .4s; } .al-eq i:nth-child(4){ animation-delay: .1s; }

/* ---------- Favourites — compact premium station cards ----------
   List-on-mobile, responsive grid on tablet/desktop. Logos are kept small
   (56–72px) so the page reads as a controlled library, not a wall of artwork.
   Each card carries a cycled brand accent (--acc / --acc-rgb set inline) to
   break the monotony of a long uniform list while staying on-palette. */
.al-favgrid { display: grid; gap: clamp(12px, 1.8vw, 18px); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .al-favgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .al-favgrid { grid-template-columns: repeat(3, 1fr); } }
.al-favgrid > .al-empty { grid-column: 1 / -1; }

.al-favcard {
  --acc: var(--al-violet); --acc-rgb: 155,108,246;
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: var(--al-s4); row-gap: var(--al-s3);
  padding: var(--al-s4) var(--al-s4) var(--al-s4) calc(var(--al-s4) + 4px);
  border-radius: var(--al-r); border: 1px solid var(--al-line); overflow: hidden;
  background:
    radial-gradient(150px 130px at 0% 0%, rgba(var(--acc-rgb), .16), transparent 70%),
    var(--al-surface);
  transition: transform var(--al-med) var(--al-ease), border-color var(--al-med), box-shadow var(--al-med);
}
.al-favcard::before {            /* accent rail — the per-card colour cue */
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--acc); opacity: .85;
}
.al-favcard:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb), .5); box-shadow: var(--al-shadow); }
.al-favcard.is-active { border-color: rgba(var(--acc-rgb), .65); box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .45), var(--al-shadow); }

.al-favcard-art {
  position: relative; width: clamp(56px, 13vw, 72px); aspect-ratio: 1/1; flex: none;
  border-radius: var(--al-r-sm); overflow: hidden; background: #fff; border: 1px solid var(--al-line);
  transition: transform var(--al-med) var(--al-ease);
}
.al-favcard-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.al-favcard:hover .al-favcard-art { transform: scale(1.03); }

.al-favcard-body { min-width: 0; display: grid; gap: 6px; }
.al-favcard-name {
  font-weight: 800; font-size: .98rem; color: var(--al-text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-favcard:hover .al-favcard-name, .al-favcard.is-active .al-favcard-name { color: #fff; }
.al-favcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

/* live status — honest: neutral "Radio live" by default, amber LIVE only when
   the real `playing` media event fires (set by UI.syncCards), red if offline. */
.al-favcard-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--al-text-dim);
}
.al-favcard-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }
.al-favcard-status.is-offline { color: var(--al-err); }
.al-favcard-status.is-offline .dot { background: var(--al-err); }
.al-favcard.is-playing .al-favcard-status { color: var(--al-live); }
.al-favcard.is-playing .al-favcard-status .dot { background: var(--al-live); animation: al-pulse 2s infinite; }

.al-favcard-tag {
  font-size: .7rem; font-weight: 600; color: var(--al-text-dim);
  background: rgba(var(--acc-rgb), .14); border: 1px solid rgba(var(--acc-rgb), .26);
  padding: 2px 9px; border-radius: var(--al-r-pill); white-space: nowrap;
}
.al-favcard-tag.is-geo { background: var(--al-surface-2); border-color: var(--al-line); color: var(--al-text-faint); }
.al-favcard-info { font-size: .72rem; font-weight: 600; color: var(--al-text-faint); white-space: nowrap; }

.al-favcard-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.al-favcard-play {
  /* reset the absolute/hidden positioning inherited from the base .al-card-play
     overlay — here it's an in-flow, always-visible primary CTA. */
  position: static; right: auto; bottom: auto; width: auto; opacity: 1;
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
  border: 0; border-radius: var(--al-r-pill); cursor: pointer; color: #fff; font: inherit;
  font-weight: 700; font-size: .84rem; letter-spacing: .01em;
  background: var(--al-grad); box-shadow: 0 6px 16px rgba(0,0,0,.32);
  transform: none;
  transition: transform var(--al-fast) var(--al-ease), box-shadow var(--al-med), filter var(--al-fast);
}
.al-favcard-play svg { width: 18px; height: 18px; fill: currentColor; }
.al-favcard-play .ic-pause { display: none; }
.al-favcard .al-favcard-play:hover { transform: translateY(-1px); box-shadow: var(--al-shadow); }
.al-favcard .al-favcard-play:active { transform: translateY(0); }
.al-favcard .al-favcard-play:focus-visible { transform: none; outline: 2px solid #fff; outline-offset: 2px; }
.al-favcard .al-favcard-play[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.al-favcard-act {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--al-line); border-radius: 50%; cursor: pointer; color: var(--al-text-dim);
  background: var(--al-surface-2);
  transition: color var(--al-fast), border-color var(--al-fast), background var(--al-fast), transform var(--al-fast);
}
.al-favcard-act svg { width: 18px; height: 18px; fill: currentColor; }
.al-favcard-act:hover { color: #fff; border-color: var(--al-line-strong); transform: translateY(-1px); }
.al-favcard-act:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.al-favcard-view { margin-left: auto; text-decoration: none; }
.al-favcard-remove:hover { color: var(--al-err); border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.12); }

.al-favcard.is-unavailable .al-favcard-art img { opacity: .55; filter: saturate(.8); }

@media (prefers-reduced-motion: reduce) {
  .al-favcard, .al-favcard-art, .al-favcard-play, .al-favcard-act { transition: none; }
  .al-favcard:hover { transform: none; }
  .al-favcard.is-playing .al-favcard-status .dot { animation: none; }
}

/* ---------- Genre cards (image-based, premium) ---------- */
.al-cat-grid { display: grid; gap: clamp(12px, 1.8vw, 18px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px){ .al-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .al-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px){ .al-cat-grid { grid-template-columns: repeat(6, 1fr); } }
.al-cat {
  position: relative; border-radius: var(--al-r); padding: 16px; min-height: 124px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  background: var(--al-surface); border: 1px solid var(--al-line);
  transition: transform var(--al-med) var(--al-ease), border-color var(--al-med), box-shadow var(--al-med);
}
.al-cat .al-cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform var(--al-med) var(--al-ease); }
.al-cat::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(21,8,38,.15) 0%, rgba(21,8,38,.55) 55%, rgba(80,30,120,.86) 100%); }
.al-cat:hover { transform: translateY(-4px); border-color: var(--al-line-strong); box-shadow: var(--al-shadow); }
.al-cat:hover .al-cat-img { transform: scale(1.07); }
.al-cat .al-cat-name { position: relative; z-index: 2; font-weight: 800; color: #fff; font-size: 1.04rem; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.al-cat .al-cat-count { position: relative; z-index: 2; color: rgba(255,255,255,.86); font-size: .8rem; font-weight: 600; margin-top: 2px; }

/* ---------- Browse list (A→Z) ---------- */
.al-browse { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.al-browse a { background: var(--al-surface); border: 1px solid var(--al-line); border-radius: var(--al-r-sm);
  padding: 12px 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.al-browse a:hover { background: var(--al-elevated); }
.al-browse a span { color: var(--al-text-faint); font-size: .82rem; }

/* ---------- Brand accents (rgb triplets mirror the --al-* tokens so they can
   drive low-opacity glass tints; blue → indigo → violet → magenta spectrum,
   plus the warm/cool category hues — every value is an existing --al-* token,
   so the discovery cards stay colour-coded without inventing new colours) ---- */
.al-acc-blue    { --acc: #2f6bff; --acc-rgb: 47,107,255; }   /* --al-cat-blue   */
.al-acc-indigo  { --acc: #7c3aed; --acc-rgb: 124,58,237; }   /* --al-violet-600 */
.al-acc-violet  { --acc: #9b6cf6; --acc-rgb: 155,108,246; }  /* --al-violet     */
.al-acc-magenta { --acc: #c84be0; --acc-rgb: 200,75,224; }   /* --al-coral      */
.al-acc-pink    { --acc: #d23ec8; --acc-rgb: 210,62,200; }   /* --al-magenta    */
.al-acc-teal    { --acc: #11b3a3; --acc-rgb: 17,179,163; }   /* --al-cat-teal   */
.al-acc-green   { --acc: #36d399; --acc-rgb: 54,211,153; }   /* --al-ok         */
.al-acc-amber   { --acc: #f7c63d; --acc-rgb: 247,198,61; }   /* --al-amber      */
.al-acc-orange  { --acc: #ff8a3d; --acc-rgb: 255,138,61; }   /* --al-cat-orange */
.al-acc-red     { --acc: #ff6b6b; --acc-rgb: 255,107,107; }  /* --al-err        */

/* ---------- Coverage page (Acoperire) — unified dark glass tiles ---------- */
.al-coverage-grid--page { grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 640px){ .al-coverage-grid--page { grid-template-columns: repeat(2, 1fr); } }
.al-coverage--page {
  min-height: 188px; padding: 24px; gap: 10px; color: var(--al-text);
  background:
    radial-gradient(320px 220px at 110% -16%, rgba(var(--acc-rgb), .34), transparent 64%),
    radial-gradient(260px 220px at -12% 124%, rgba(var(--acc-rgb), .12), transparent 70%),
    linear-gradient(158deg, rgba(255,255,255,.06), rgba(255,255,255,.014));
  border: 1px solid rgba(var(--acc-rgb), .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--al-shadow);
}
.al-coverage--page::after { content: none; }
/* Themed line-art illustration bleeding off the lower-right corner — gives each
   coverage tile a distinct, instantly recognisable identity (tower / map+pin /
   wifi / map) without shipping any image asset. */
.al-coverage--page .al-cv-art {
  position: absolute; right: -14px; bottom: -20px; width: 152px; height: 152px; z-index: 0;
  opacity: .16; pointer-events: none;
  transition: opacity var(--al-med), transform var(--al-med) var(--al-ease); }
.al-coverage--page .al-cv-art svg { width: 100%; height: 100%; fill: var(--acc); display: block; }
.al-coverage--page:hover { transform: translateY(-4px); color: var(--al-text);
  border-color: rgba(var(--acc-rgb), .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 54px -24px rgba(var(--acc-rgb), .65); }
.al-coverage--page:hover .al-cv-art { opacity: .24; transform: translateY(-5px) scale(1.05); }
.al-coverage--page .al-cv-head { align-items: center; gap: 14px; }
.al-coverage--page .al-cv-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(var(--acc-rgb), .16); border: 1px solid rgba(var(--acc-rgb), .32); }
.al-coverage--page .al-cv-icon svg { fill: var(--acc); }
.al-coverage--page .al-cv-title { font-size: 1.26rem; color: #fff; letter-spacing: -.01em; }
.al-coverage--page .al-cv-count { color: var(--al-text-faint); }
.al-coverage--page .al-cv-count b { color: #fff; }
.al-coverage--page .al-cv-arrow {
  background: rgba(var(--acc-rgb), .14); border: 1px solid rgba(var(--acc-rgb), .26);
  transition: background var(--al-med), transform var(--al-med) var(--al-ease); }
.al-coverage--page .al-cv-arrow svg { fill: var(--acc); }
.al-coverage--page:hover .al-cv-arrow { background: rgba(var(--acc-rgb), .24); transform: translateX(3px); }
.al-cv-desc { position: relative; z-index: 1; margin: 2px 0 0; color: var(--al-text-dim);
  font-size: .93rem; line-height: 1.5; font-weight: 500; max-width: 44ch; }

/* ---------- Genre discovery (Genuri) — families + glass icon cards ---------- */
.al-fam { margin-top: var(--al-s7); }
.al-fam:first-of-type { margin-top: var(--al-s6); }
.al-fam-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.al-fam-dot { width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--acc, var(--al-violet)); box-shadow: 0 0 14px 0 rgba(var(--acc-rgb, 155,108,246), .65); }
.al-fam-head h2 { font-size: clamp(1.06rem, 2.2vw, 1.3rem); line-height: 1.1; margin: 0;
  font-weight: 700; letter-spacing: -.01em; }
.al-fam-num { color: var(--al-text-faint); font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.al-fam-rule { flex: 1; height: 1px; min-width: 12px;
  background: linear-gradient(90deg, var(--al-line-strong), transparent); }
.al-fam-helper { color: var(--al-text-dim); font-size: .88rem; font-weight: 500;
  margin: 0 0 var(--al-s4); max-width: 60ch; }

.al-disc-grid { display: grid; gap: clamp(10px, 1.3vw, 14px);
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.al-disc {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 14px; border-radius: var(--al-r); overflow: hidden;
  background:
    radial-gradient(120px 80px at 100% 0%, rgba(var(--acc-rgb), .12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  border: 1px solid rgba(var(--acc-rgb), .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform var(--al-med) var(--al-ease), border-color var(--al-med), box-shadow var(--al-med);
}
.al-disc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(150px 100px at 8% 50%, rgba(var(--acc-rgb), .20), transparent 70%);
  transition: opacity var(--al-med); pointer-events: none; }
.al-disc:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb), .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 36px -18px rgba(var(--acc-rgb), .6); }
.al-disc:hover::before { opacity: 1; }
/* Large accent-tinted echo of the genre glyph, clipped into the lower-right
   corner — adds per-card illustration/personality with no extra asset. */
.al-disc-art { position: absolute; right: -8px; bottom: -14px; width: 80px; height: 80px; z-index: 0;
  opacity: .08; transform: rotate(-9deg); pointer-events: none;
  transition: opacity var(--al-med), transform var(--al-med) var(--al-ease); }
.al-disc-art svg { width: 100%; height: 100%; fill: var(--acc); display: block; }
.al-disc:hover .al-disc-art { opacity: .16; transform: rotate(-9deg) scale(1.1); }
.al-disc-ico { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 13px;
  flex: none; display: grid; place-items: center; color: var(--acc);
  background: rgba(var(--acc-rgb), .15); border: 1px solid rgba(var(--acc-rgb), .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.al-disc-ico svg { width: 23px; height: 23px; fill: var(--acc); }
.al-disc-body { position: relative; z-index: 1; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.al-disc-name { font-weight: 700; color: var(--al-text); font-size: .98rem; line-height: 1.15;
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-disc-count { color: var(--al-text-faint); font-size: .78rem; font-weight: 600; margin-top: 3px; }
.al-disc-arrow { position: relative; z-index: 1; width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--al-fast), transform var(--al-fast) var(--al-ease); }
.al-disc-arrow svg { width: 18px; height: 18px; fill: var(--al-text-faint); transition: fill var(--al-fast); }
.al-disc:hover .al-disc-arrow, .al-disc:focus-visible .al-disc-arrow { opacity: 1; transform: translateX(0); }
.al-disc:hover .al-disc-arrow svg { fill: var(--acc); }

/* ---------- Station page ---------- */
.al-station-hero {
  display: grid; gap: clamp(14px, 2.6vw, 28px); grid-template-columns: 1fr;
  margin-top: var(--al-s4); position: relative;
  border-radius: var(--al-r-lg); padding: clamp(18px, 3vw, 34px);
  /* Soft band tinted with the station's own brand colour, fading into the page */
  background:
    linear-gradient(180deg,
      rgba(var(--st-accent, 124,58,237), .42) 0%,
      rgba(var(--st-accent, 124,58,237), .15) 40%,
      transparent 78%);
}
@media (min-width: 760px){ .al-station-hero { grid-template-columns: 150px 1fr; align-items: start; } }

/* ---------- Premium square station banner (framed card) ---------- */
.al-station-art-wrap {
  position: relative; isolation: isolate;
  width: 100%; max-width: 150px; aspect-ratio: 1 / 1; margin-inline: auto;
  padding: 7px; border-radius: var(--al-r);
  background: linear-gradient(160deg, var(--al-elevated), var(--al-surface));
  border: 1px solid var(--al-line-strong);
  box-shadow: var(--al-shadow);
  transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med) var(--al-ease), border-color var(--al-med);
}
.al-station-art {
  position: relative; z-index: 2; width: 100%; height: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; display: block; border: 0; border-radius: calc(var(--al-r) - 7px);
  background: #fff;
}
/* Subtle glass sheen over the artwork */
.al-station-art-wrap::after {
  content: ""; position: absolute; inset: 8px; z-index: 3; pointer-events: none;
  border-radius: calc(var(--al-r) - 7px);
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
  mix-blend-mode: screen;
}
/* Equalizer overlay (bottom of the art) shown while this station plays */
.al-station-art-eq {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; height: 30%;
  display: none; align-items: flex-end; justify-content: center; gap: 5px;
  padding: 0 18% 12px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8,7,22,.72));
  border-radius: 0 0 calc(var(--al-r) - 7px) calc(var(--al-r) - 7px);
}
.al-station-art-eq i { flex: 1 1 0; max-width: 8px; height: 100%; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--al-coral), var(--al-violet)); transform-origin: bottom;
  animation: al-hero-eq 1000ms ease-in-out infinite; }
.al-station-art-eq i:nth-child(2){ animation-delay:.18s } .al-station-art-eq i:nth-child(3){ animation-delay:.4s }
.al-station-art-eq i:nth-child(4){ animation-delay:.12s } .al-station-art-eq i:nth-child(5){ animation-delay:.5s }

/* Hover: gentle lift + brighter frame */
.al-station-art-wrap:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.26);
  box-shadow: var(--al-shadow-lg); }

/* Current station selected — frame picks up the brand accent */
.al-station-hero.is-active .al-station-art-wrap { border-color: var(--al-coral);
  box-shadow: 0 0 0 1px rgba(200,75,224,.5), var(--al-shadow-lg); }
/* Currently playing: equalizer animates */
body.al-state-playing .al-station-hero.is-active .al-station-art-eq { display: flex; }
.al-station-meta h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0 0 6px; }
.al-station-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* ---------- Station action block (premium, two-tier) ---------- */
.al-station-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; align-items: stretch; }
.al-action-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.al-action-secondary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--al-line);
}
/* Labelled secondary action — icon + word, never a floating bare icon. */
.al-act {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border-radius: var(--al-r-pill); background: var(--al-surface); border: 1px solid var(--al-line);
  color: var(--al-text-dim); cursor: pointer; font-weight: 700; font-size: .86rem; font-family: inherit;
  text-decoration: none; line-height: 1;
  transition: background var(--al-fast) var(--al-ease), color var(--al-fast) var(--al-ease), border-color var(--al-fast) var(--al-ease), transform var(--al-fast) var(--al-ease);
}
.al-act svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.al-act:hover { background: var(--al-elevated); color: #fff; border-color: var(--al-line-strong); }
.al-act:active { transform: translateY(1px); }
.al-act:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 2px; }
.al-act.is-on { color: var(--al-coral); border-color: rgba(200,75,224,.42); background: rgba(200,75,224,.08); }
.al-act.is-on svg { fill: var(--al-coral); }
.al-act-n { font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: var(--al-grad);
  border-radius: var(--al-r-pill); padding: 1px 7px; margin-left: 2px; }
.al-vote { display: inline-flex; align-items: center; gap: 6px; background: var(--al-surface); border: 1px solid var(--al-line);
  border-radius: var(--al-r-pill); padding: 9px 14px; color: var(--al-text-dim); cursor: pointer; font-weight: 700; font-size: .86rem; }
.al-vote:hover { background: var(--al-elevated); color: #fff; }
.al-vote svg { width: 18px; height: 18px; fill: currentColor; }
.al-vote.up:hover { color: var(--al-ok); }
.al-vote.down:hover { color: var(--al-err); }
.al-vote:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 2px; }
@media (max-width: 420px) {
  /* Keep the secondary row scannable on narrow phones — equal, tappable tiles. */
  .al-action-secondary { gap: 6px; }
  .al-act { flex: 1 1 auto; justify-content: center; padding: 10px 10px; }
}
.al-panel { background: var(--al-surface); border: 1px solid var(--al-line); border-radius: var(--al-r); padding: clamp(16px,3vw,24px); }
.al-prose { color: var(--al-text-dim); line-height: 1.7; }
.al-prose a { color: var(--al-coral); text-decoration: underline; }

/* ---------- Corporate document page (custom CMS / info pages) ----------
   Premium, controlled treatment scoped to .al-article so other .al-prose
   surfaces (station info, FAQ) are untouched. */
.al-article {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--al-surface), rgba(39,21,68,.55));
  border: 1px solid var(--al-line); border-radius: var(--al-r-lg);
  box-shadow: var(--al-shadow); padding: clamp(22px, 4vw, 48px);
}
/* brand accent rail across the top edge */
.al-article::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: var(--al-grad); pointer-events: none;
}
/* soft brand glow bleeding from the top-right — purely decorative */
.al-article::after {
  content: ""; position: absolute; top: -140px; right: -120px; width: 340px; height: 340px; z-index: 0;
  background: radial-gradient(circle, rgba(155,108,246,.20), transparent 68%); pointer-events: none;
}
.al-article > * { position: relative; z-index: 1; }   /* keep content above the glow */
.al-article > :first-child { margin-top: 0; }
.al-article > :last-child { margin-bottom: 0; }

/* Headings — corporate section markers */
.al-article :is(h1, h2, h3) { color: #fff; letter-spacing: -.02em; line-height: 1.22; }
.al-article h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 var(--al-s4); }
.al-article h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: clamp(28px, 4vw, 44px) 0 var(--al-s3); padding-left: 16px; position: relative;
}
.al-article h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px;
  border-radius: var(--al-r-pill); background: var(--al-grad);
}
.al-article h3 { font-size: clamp(1.02rem, 1.7vw, 1.18rem); margin: var(--al-s5) 0 var(--al-s2); }

/* Body rhythm */
.al-article p { margin: 0 0 var(--al-s4); max-width: 74ch; }
.al-article strong { color: var(--al-text); font-weight: 700; }
.al-article a:hover { color: var(--al-magenta); }
/* lead paragraph — the intro sets the tone */
.al-article > p:first-of-type { font-size: clamp(1.02rem, 1.5vw, 1.12rem); color: var(--al-text); }

/* Feature lists — premium check badges */
.al-article ul { list-style: none; margin: 0 0 var(--al-s4); padding: 0; display: grid; gap: var(--al-s3); }
.al-article ul li { position: relative; padding-left: 38px; line-height: 1.6; max-width: 74ch; }
.al-article ul li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--al-line-strong);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b6cf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--al-grad-soft);
}

/* Premium staggered entrance — only when motion is allowed (html.al-anim),
   driven by the article's own reveal. Fully visible otherwise (SSR-safe). */
html.al-anim .al-article.al-reveal > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--al-med) var(--al-ease), transform var(--al-med) var(--al-ease);
}
html.al-anim .al-article.al-reveal.is-in > * { opacity: 1; transform: none; }
html.al-anim .al-article.is-in > *:nth-child(1) { transition-delay: 30ms; }
html.al-anim .al-article.is-in > *:nth-child(2) { transition-delay: 80ms; }
html.al-anim .al-article.is-in > *:nth-child(3) { transition-delay: 130ms; }
html.al-anim .al-article.is-in > *:nth-child(4) { transition-delay: 180ms; }
html.al-anim .al-article.is-in > *:nth-child(5) { transition-delay: 230ms; }
html.al-anim .al-article.is-in > *:nth-child(6) { transition-delay: 280ms; }
html.al-anim .al-article.is-in > *:nth-child(7) { transition-delay: 330ms; }
html.al-anim .al-article.is-in > *:nth-child(8) { transition-delay: 380ms; }
@media (prefers-reduced-motion: reduce) {
  html.al-anim .al-article.al-reveal > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- About page — premium public presentation ---------- */
.al-about-page { margin-top: 0; }
.al-about-hero {
  position: relative; overflow: hidden; margin-top: 0;
  padding: clamp(28px, 4vw, 54px) 0 clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--al-line);
  background:
    radial-gradient(80% 95% at 90% 5%, rgba(247,198,61,.16), transparent 60%),
    radial-gradient(80% 90% at 10% 0%, rgba(200,75,224,.20), transparent 58%),
    linear-gradient(180deg, rgba(39,21,68,.78), rgba(21,8,38,0));
}
.al-about-hero-inner {
  display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 34px); align-items: center;
}
@media (min-width: 900px) {
  .al-about-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); }
}
.al-about-copy { min-width: 0; }
.al-about-copy h1 {
  font-size: clamp(1.75rem, 4vw, 3.05rem); line-height: 1.06; max-width: 16ch; margin: 8px 0 14px;
}
.al-about-copy p {
  color: var(--al-text-dim); max-width: 56ch; margin: 0; font-size: clamp(.96rem, 1.25vw, 1.05rem); line-height: 1.6;
}
.al-about-actions { display: flex; flex-wrap: wrap; gap: var(--al-s3); margin-top: var(--al-s4); }
.al-about-signal {
  position: relative; isolation: isolate; min-height: clamp(230px, 28vw, 340px);
  border: 1px solid var(--al-line-strong); border-radius: var(--al-r-lg);
  background:
    radial-gradient(90% 78% at 50% 35%, rgba(155,108,246,.34), transparent 64%),
    linear-gradient(160deg, var(--al-elevated), var(--al-bg-2));
  box-shadow: var(--al-shadow); overflow: hidden; padding: clamp(18px, 2.4vw, 24px);
  display: grid; place-items: center;
}
.al-about-signal::before {
  content: ""; position: absolute; inset: 18px; border-radius: calc(var(--al-r-lg) - 6px);
  border: 1px solid rgba(255,255,255,.10); pointer-events: none;
}
.al-about-logo {
  position: relative; z-index: 2; width: min(220px, 58%); height: auto;
  filter: drop-shadow(0 18px 44px rgba(4,3,18,.58));
}
.al-about-wave {
  position: absolute; left: 8%; right: 8%; bottom: 28%; height: 70px;
  display: flex; align-items: flex-end; gap: 4px; opacity: .86;
}
.al-about-wave i {
  flex: 1 1 0; max-width: 10px; height: 100%; border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--al-amber), var(--al-coral)); transform-origin: bottom;
  animation: al-hero-eq 1200ms ease-in-out infinite;
}
.al-about-wave i:nth-child(2n) { animation-delay: .18s; animation-duration: 980ms; }
.al-about-wave i:nth-child(3n) { animation-delay: .38s; background: linear-gradient(180deg, var(--al-violet), var(--al-coral)); }
.al-about-wave i:nth-child(5n) { animation-delay: .58s; opacity: .74; }
.al-about-now {
  position: absolute; left: clamp(16px, 4vw, 28px); right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px);
  z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--al-r);
  background: rgba(21,8,38,.78); border: 1px solid var(--al-line-strong);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.al-about-now .al-live-badge { display: inline-flex; width: max-content; }
.al-about-now strong { color: #fff; font-size: .92rem; }
.al-about-now span:last-child { color: var(--al-text-dim); font-size: .8rem; }

.al-about-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: clamp(16px, 2.4vw, 28px) 0 clamp(22px, 4vw, 42px);
}
@media (min-width: 760px) { .al-about-stats { grid-template-columns: repeat(4, 1fr); } }
.al-about-stats div {
  padding: clamp(14px, 2vw, 20px); border-radius: var(--al-r);
  background: var(--al-surface); border: 1px solid var(--al-line);
}
.al-about-stats strong { display: block; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1; }
.al-about-stats span { display: block; color: var(--al-text-dim); margin-top: 7px; font-size: .86rem; line-height: 1.35; }

.al-about-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 30px); align-items: start;
}
@media (min-width: 980px) {
  .al-about-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}
.al-about-article { padding: clamp(22px, 4vw, 46px); }
.al-about-aside { display: grid; gap: 14px; }
.al-about-mini,
.al-about-cta {
  border: 1px solid var(--al-line); border-radius: var(--al-r); background: var(--al-surface);
  padding: clamp(16px, 2.4vw, 22px); box-shadow: 0 10px 26px rgba(4,3,18,.22);
}
.al-about-mini { display: flex; gap: 13px; align-items: flex-start; }
.al-about-mini-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--al-violet); background: var(--al-grad-soft); border: 1px solid var(--al-line-strong);
}
.al-about-mini-ic svg { width: 22px; height: 22px; fill: currentColor; }
.al-about-mini h2,
.al-about-cta h2 { font-size: 1rem; margin: 0 0 5px; color: #fff; letter-spacing: -.01em; }
.al-about-mini p,
.al-about-cta p { color: var(--al-text-dim); margin: 0; font-size: .9rem; line-height: 1.55; }
.al-about-cta {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(247,198,61,.15), transparent 62%),
    linear-gradient(180deg, var(--al-elevated), var(--al-surface));
}
.al-about-cta .al-btn { margin-top: var(--al-s4); width: 100%; }

@media (max-width: 560px) {
  .al-about-hero { padding-top: 24px; }
  .al-about-actions .al-btn { width: 100%; }
  .al-about-signal { min-height: 260px; }
  .al-about-stats { grid-template-columns: 1fr; }
  .al-about-mini { flex-direction: column; }
}

/* ---------- Station "More information" — premium disclosure (SEO-safe, in-DOM) ---------- */
.al-details {
  position: relative; border: 1px solid var(--al-line); border-radius: var(--al-r);
  background: linear-gradient(180deg, var(--al-surface), rgba(39,21,68,.6));
  overflow: hidden;
  transition: border-color var(--al-med), box-shadow var(--al-med) var(--al-ease), transform var(--al-med) var(--al-ease);
}
.al-details:hover { border-color: var(--al-line-strong); box-shadow: var(--al-shadow); transform: translateY(-2px); }
.al-details[open] { border-color: var(--al-line-strong); box-shadow: var(--al-shadow); transform: none; }
/* brand accent bar appears across the top once expanded */
.al-details::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--al-grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--al-med) var(--al-ease); pointer-events: none;
}
.al-details[open]::before { transform: scaleX(1); }

.al-details > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 16px);
  padding: clamp(13px, 2vw, 18px) clamp(14px, 2.2vw, 20px);
  transition: background var(--al-fast);
}
.al-details > summary::-webkit-details-marker { display: none; }
.al-details > summary::marker { content: ""; }
.al-details > summary:hover { background: rgba(255,255,255,.03); }
.al-details > summary:focus-visible { outline: 3px solid var(--al-violet); outline-offset: -3px; border-radius: var(--al-r); }

.al-details-icon {
  flex: none; width: 46px; height: 46px; border-radius: 13px; color: #fff;
  display: grid; place-items: center;
  background: var(--al-grad); box-shadow: 0 8px 22px rgba(155,108,246,.34);
}
.al-details-icon svg { width: 24px; height: 24px; fill: currentColor; }

.al-details-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-details-title { font-weight: 800; color: #fff; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.2; }
.al-details-hint {
  color: var(--al-text-faint); font-size: .82rem; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.al-details-chevron-wrap {
  flex: none; margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--al-text-dim);
  background: var(--al-elevated); border: 1px solid var(--al-line);
  transition: background var(--al-fast), color var(--al-fast), border-color var(--al-fast);
}
.al-details > summary:hover .al-details-chevron-wrap { color: #fff; border-color: var(--al-line-strong); }
.al-details-chevron { width: 20px; height: 20px; fill: currentColor; transition: transform var(--al-med) var(--al-ease); }
.al-details[open] .al-details-chevron-wrap { background: var(--al-grad); color: #fff; border-color: transparent; }
.al-details[open] .al-details-chevron { transform: rotate(180deg); }

/* Body — seamless continuation of the card, divided from the header row */
.al-details-body {
  border-top: 1px solid var(--al-line); padding: clamp(16px, 2.6vw, 26px);
  animation: al-fade var(--al-med) var(--al-ease);
}
.al-details-body > :first-child { margin-top: 0; }
.al-details-body > :last-child { margin-bottom: 0; }

/* comments + forms */
.al-field { width: 100%; background: var(--al-bg-2); border: 1px solid var(--al-line); color: #fff;
  border-radius: var(--al-r-sm); padding: 12px 14px; font-family: inherit; font-size: .96rem;
  transition: border-color var(--al-fast), box-shadow var(--al-fast), background var(--al-fast); }
.al-field::placeholder { color: var(--al-text-faint); }
.al-field:hover { border-color: var(--al-line-strong); }
.al-field:focus { border-color: var(--al-violet); outline: none; background: var(--al-surface);
  box-shadow: 0 0 0 3px rgba(155,108,246,.25); }
.al-label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--al-text-dim); }
/* Single-select dropdowns — premium trigger with a custom chevron */
.al-body select.al-field {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238186a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px;
}
.al-body select.al-field:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b6cf6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.al-comment { background: var(--al-surface); border: 1px solid var(--al-line); border-radius: var(--al-r-sm); padding: 14px; margin-bottom: 12px; }
.al-comment .name { font-weight: 800; color: #fff; }
.al-comment .date { color: var(--al-text-faint); font-size: .8rem; display: block; margin-top: 4px; }
.al-comment .comment { display: block; color: var(--al-text-dim); margin-top: 6px; }

/* ---------- Empty / error states ---------- */
.al-empty { text-align: center; padding: clamp(40px, 9vw, 90px) 20px; color: var(--al-text-dim); }
.al-empty .al-empty-icon { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--al-surface); border: 1px solid var(--al-line); }
.al-empty .al-empty-icon svg { width: 38px; height: 38px; fill: var(--al-text-faint); }
.al-empty h2 { margin-bottom: 8px; }
.al-error-code { font-size: clamp(4rem, 18vw, 9rem); font-weight: 900; line-height: 1;
  background: var(--al-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Pagination ---------- */
.al-pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: var(--al-s6) 0; }
.al-pager a, .al-pager span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px;
  border-radius: var(--al-r-sm); background: var(--al-surface); border: 1px solid var(--al-line); color: var(--al-text-dim); font-weight: 700; }
.al-pager a:hover { background: var(--al-elevated); color: #fff; }
.al-pager .active span, .al-pager [aria-current] { background: var(--al-grad); color: #fff; border-color: transparent; }
.al-pager .disabled span { opacity: .4; }

/* ==========================================================================
   Mobile navigation drawer — premium off-canvas panel
   Full-height, immersive (92vw on phones), glassy dark base. Three distinct
   tiers: primary nav (icon rows) · genres (chips) · coverage (accent rows),
   so hierarchy reads instantly. Crawlable markup, tokens only.
   ========================================================================== */
.al-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1060; display: none;
  background: rgba(7,4,20,.66);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
}
.al-drawer-backdrop.is-open { display: block; animation: al-fade var(--al-med); }

.al-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1070;
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 52% at 100% 0%, rgba(155,108,246,.20), transparent 62%),
    radial-gradient(96% 42% at 0% 100%, rgba(200,75,224,.12), transparent 60%),
    linear-gradient(180deg, #1d0e36 0%, #160828 100%);
  border-left: 1px solid var(--al-line-strong);
  box-shadow: -24px 0 60px rgba(4,3,18,.55);
  transform: translateX(100%);
  transition: transform var(--al-med) var(--al-ease);
  overscroll-behavior: contain;
}
.al-drawer.is-open { transform: translateX(0); }

/* Head — pinned, always-visible brand + close target */
.al-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--al-s3); flex: none;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px 20px;
  border-bottom: 1px solid var(--al-line);
}
.al-drawer-brand { font-size: 1.12rem; }
.al-drawer-brand .al-brand-logo { height: 34px; }
.al-drawer-x { background: var(--al-surface); }

/* Body — internal scroll when content exceeds the viewport */
.al-drawer-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: var(--al-s5);
  padding: var(--al-s5) 20px calc(var(--al-s6) + env(safe-area-inset-bottom, 0px));
}

/* --- Primary navigation (strongest tier) --- */
.al-dnav { display: flex; flex-direction: column; gap: 6px; }
.al-dnav-item {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 12px 8px 10px;
  border-radius: var(--al-r); border: 1px solid var(--al-line); background: var(--al-surface-2);
  color: #fff; font-weight: 700; font-size: 1.02rem;
  transition: background var(--al-fast), border-color var(--al-fast), transform var(--al-fast);
}
.al-dnav-item:hover { background: var(--al-surface); color: #fff; }
.al-dnav-item:active { transform: scale(.985); }
.al-dnav-ico {
  width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: var(--al-elevated); color: var(--al-violet);
}
.al-dnav-ico svg { width: 22px; height: 22px; fill: currentColor; }
.al-dnav-label { flex: 1; min-width: 0; }
.al-dnav-badge {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--al-r-pill);
  display: inline-grid; place-items: center; font-size: .76rem; font-weight: 800;
  color: #20140d; background: var(--al-amber);
}
.al-dnav-badge[hidden] { display: none; }
.al-dnav-go { flex: none; width: 22px; height: 22px; color: var(--al-text-faint); display: grid; place-items: center; }
.al-dnav-go svg { width: 20px; height: 20px; fill: currentColor; }
.al-dnav-item:hover .al-dnav-go { color: var(--al-text-dim); }
.al-dnav-item.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(200,75,224,.20), rgba(139,92,246,.20));
  box-shadow: inset 0 0 0 1px rgba(155,108,246,.35);
}
.al-dnav-item.is-active .al-dnav-ico { background: var(--al-grad); color: #fff; }

/* --- Discovery section scaffold --- */
.al-dsec { display: flex; flex-direction: column; gap: 12px; }
.al-dsec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--al-s3);
  padding-bottom: 8px; border-bottom: 1px solid var(--al-line);
}
.al-dsec-head h3 { margin: 0; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--al-text-dim); }
.al-dsec-link { font-size: .8rem; font-weight: 700; color: var(--al-violet); white-space: nowrap; }
.al-dsec-link:hover { color: var(--al-coral); }

/* --- Genre chips --- */
.al-dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-dchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--al-r-pill);
  background: var(--al-surface); border: 1px solid var(--al-line);
  color: var(--al-text-dim); font-weight: 700; font-size: .9rem; white-space: nowrap;
  transition: background var(--al-fast), color var(--al-fast), border-color var(--al-fast), transform var(--al-fast);
}
.al-dchip:hover { color: #fff; background: var(--al-grad); border-color: transparent; }
.al-dchip:active { transform: scale(.96); }
.al-dchip-n { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--al-text-faint); }
.al-dchip:hover .al-dchip-n { color: rgba(255,255,255,.85); }

/* --- Coverage rows (four key categories) --- */
.al-dcov { display: flex; flex-direction: column; gap: 8px; }
.al-dcov-item {
  display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--al-r);
  background: var(--al-surface-2); border: 1px solid var(--al-line);
  transition: background var(--al-fast), border-color var(--al-fast), transform var(--al-fast);
}
.al-dcov-item:hover { background: var(--al-surface); border-color: rgba(var(--acc-rgb), .5); }
.al-dcov-item:active { transform: scale(.99); }
.al-dcov-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  color: var(--acc); background: rgba(var(--acc-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .28);
}
.al-dcov-ico svg { width: 22px; height: 22px; fill: currentColor; }
.al-dcov-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.al-dcov-label { font-weight: 700; font-size: .98rem; color: #fff; }
.al-dcov-sub { font-size: .78rem; color: var(--al-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-dcov-n {
  flex: none; min-width: 26px; padding: 3px 8px; border-radius: var(--al-r-pill);
  font-size: .76rem; font-weight: 800; color: var(--al-text-dim); background: var(--al-elevated); text-align: center;
}
.al-dcov-go { flex: none; width: 20px; height: 20px; color: var(--al-text-faint); display: grid; place-items: center; }
.al-dcov-go svg { width: 20px; height: 20px; fill: currentColor; }
.al-dcov-item:hover .al-dcov-go { color: var(--acc); }

/* --- Section CTA --- */
.al-dcta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; border-radius: var(--al-r-pill);
  background: var(--al-grad-soft); border: 1px solid rgba(155,108,246,.3);
  color: #fff; font-weight: 800; font-size: .94rem;
  transition: border-color var(--al-fast), background var(--al-fast);
}
.al-dcta:hover { color: #fff; border-color: rgba(200,75,224,.6);
  background: linear-gradient(135deg, rgba(155,108,246,.26), rgba(210,62,200,.26)); }
.al-dcta svg { width: 20px; height: 20px; fill: var(--al-violet); flex: none; transition: transform var(--al-fast), fill var(--al-fast); }
.al-dcta:hover svg { transform: translateX(3px); fill: var(--al-coral); }

/* --- Quiet secondary footer links --- */
.al-dfoot {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px; padding-top: var(--al-s4); border-top: 1px solid var(--al-line);
  color: var(--al-text-faint); font-size: .86rem;
}
.al-dfoot a { color: var(--al-text-dim); font-weight: 600; }
.al-dfoot a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .al-drawer { transition: none; }
  .al-dnav-item, .al-dchip, .al-dcov-item, .al-dcta, .al-dcta svg { transition: none; }
}

/* ==========================================================================
   GLOBAL PLAYER — persistent full-width footer (one owner of the audio)
   Desktop: three balanced zones (left info · centred controls · right tools).
   Mobile: compact bar; secondary controls live in the expanded sheet.
   ========================================================================== */
.al-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  min-height: calc(var(--al-dock-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, rgba(33,17,61,.92), rgba(22,10,40,.96));
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-top: 1px solid var(--al-line-strong);
  transform: translateY(120%); transition: transform var(--al-med) var(--al-ease);
  display: grid; align-items: center;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: var(--al-s4);
  padding-left: clamp(12px, 3vw, 26px); padding-right: clamp(12px, 3vw, 26px);
}
body.al-has-player .al-dock { transform: translateY(0); }
/* loading sheen on the top edge during connecting/buffering/reconnecting */
.al-dock::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--al-coral), var(--al-violet), transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity var(--al-fast); }
body.al-state-connecting .al-dock::before,
body.al-state-buffering .al-dock::before,
body.al-state-reconnecting .al-dock::before { opacity: 1; animation: al-sheen 1.2s linear infinite; }

/* LEFT zone */
.al-dock-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Premium, larger station logo */
.al-dock-art-link { position: relative; flex: none; display: block; width: 64px; height: 64px; border-radius: 14px; isolation: isolate; }
.al-dock-art { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #fff; display: block; cursor: pointer;
  box-shadow: 0 10px 26px rgba(4,3,18,.55), 0 0 0 1px rgba(255,255,255,.12);
  transition: transform var(--al-med) var(--al-ease); }
.al-dock-art-link:hover .al-dock-art { transform: translateY(-2px); }
/* gradient glow ring while playing */
.al-dock-art-link::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 17px;
  background: var(--al-grad); opacity: 0; filter: blur(8px); transition: opacity var(--al-med) var(--al-ease); }
body.al-state-playing .al-dock-art-link::before { opacity: .85; }

.al-dock-info { min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.al-dock-title { font-weight: 800; color: #fff; font-size: 1.04rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Now playing — current song or live show */
.al-dock-now { font-size: .82rem; color: var(--al-text-dim); font-weight: 600; line-height: 1.2; max-width: 40ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-dock-now:empty { display: none; }
.al-dock-now b { color: #fff; font-weight: 700; }
.al-dock-state { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--al-text-dim); font-weight: 600; min-width: 0; max-width: 100%; }
.al-dock-state .dotind { width: 8px; height: 8px; border-radius: 50%; background: var(--al-text-faint); flex: none; }
.al-dock-state .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.al-state-playing .al-dock-state .dotind { background: var(--al-live); box-shadow: 0 0 0 0 rgba(247,198,61,.7); animation: al-pulse 2s infinite; }
body.al-state-error .al-dock-state .dotind,
body.al-state-unavailable .al-dock-state .dotind { background: var(--al-err); }
body.al-state-reconnecting .al-dock-state .dotind,
body.al-state-buffering .al-dock-state .dotind,
body.al-state-connecting .al-dock-state .dotind { background: var(--al-warn); }

/* CENTRE zone — controls truly centred under the player */
.al-dock-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.al-dock-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.al-now { font-size: .82rem; color: var(--al-text-dim); font-weight: 600; max-width: 42ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.al-now b { color: #fff; font-weight: 700; }
.al-dock-center .al-now { min-height: 1.1em; }

/* RIGHT zone */
.al-dock-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
/* The "expand to Now-Playing" arrow opens the compact expanded player. It is
   available everywhere — on desktop it opens the centered modal, on mobile the
   bottom sheet. */
#al-dock-expand { display: inline-flex; }
.al-dock-vol { display: none; align-items: center; gap: 8px; flex: none; width: 132px; }
/* Volume appears as soon as the dock leaves its compact (mobile) layout, so the
   761–899px band is no longer left without any in-dock volume control. */
@media (min-width: 761px){ .al-dock-vol { display: flex; } }

/* ===== Stream / quality selector (multiple audio streams per station) ===== */
.al-stream-select { position: relative; flex: none; }
.al-stream-btn { width: auto; min-width: 44px; gap: 6px; padding: 0 12px; border-radius: var(--al-r-pill);
  background: var(--al-surface-2); border: 1px solid var(--al-line); }
.al-stream-btn:hover { background: var(--al-surface); }
.al-stream-btn svg { width: 18px; height: 18px; }
.al-stream-cur { font-size: .8rem; font-weight: 700; color: #fff; max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-stream-menu { list-style: none; margin: 0; padding: 6px; position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 200px; max-width: 78vw; background: var(--al-elevated); border: 1px solid var(--al-line-strong);
  border-radius: var(--al-r-sm); box-shadow: var(--al-shadow-lg); z-index: 60; }
.al-stream-opt { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px;
  cursor: pointer; transition: background var(--al-fast), color var(--al-fast); }
.al-stream-opt:hover, .al-stream-opt:focus-visible { background: var(--al-surface); outline: none; }
.al-stream-opt.is-on { background: var(--al-grad-soft); }
.al-stream-opt-main { font-size: .9rem; font-weight: 700; color: #fff; }
.al-stream-opt.is-on .al-stream-opt-main { color: var(--al-violet); }
.al-stream-opt-sub { font-size: .72rem; color: var(--al-text-faint); font-weight: 600; }

/* Sheet pills — the mobile-friendly variant inside the expanded player */
.al-sheet-streams { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px auto 4px; max-width: 360px; }
.al-sheet-streams-label { font-size: .78rem; font-weight: 700; color: var(--al-text-dim); text-transform: uppercase; letter-spacing: .04em; }
.al-stream-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.al-stream-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--al-r-pill);
  border: 1px solid var(--al-line-strong); background: var(--al-surface-2); color: var(--al-text-dim);
  font-size: .84rem; font-weight: 700; cursor: pointer; transition: background var(--al-fast), color var(--al-fast), border-color var(--al-fast); }
.al-stream-pill:hover { background: var(--al-surface); color: #fff; }
.al-stream-pill small { font-size: .72rem; font-weight: 600; color: var(--al-text-faint); }
.al-stream-pill.is-on { background: var(--al-grad); border-color: transparent; color: #fff; }
.al-stream-pill.is-on small { color: rgba(255,255,255,.85); }
.al-vol-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 5px;
  background: var(--al-line-strong); cursor: pointer; }
.al-vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(139,92,246,.35); }
.al-vol-range::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff; }

.al-play-main {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: var(--al-grad); display: grid; place-items: center; flex: none;
  box-shadow: 0 8px 22px rgba(168,85,247,.4);
  transition: transform var(--al-fast), filter var(--al-fast);
}
.al-play-main:hover { filter: brightness(1.08); }
.al-play-main:active { transform: scale(.95); }
.al-play-main svg { width: 26px; height: 26px; fill: currentColor; }
.al-play-main .ic-pause, .al-play-main .ic-spin { display: none; }
body.al-state-playing .al-play-main .ic-play { display: none; }
body.al-state-playing .al-play-main .ic-pause { display: block; }
body.al-state-connecting .al-play-main .ic-play,
body.al-state-buffering .al-play-main .ic-play,
body.al-state-reconnecting .al-play-main .ic-play { display: none; }
body.al-state-connecting .al-play-main .ic-spin,
body.al-state-buffering .al-play-main .ic-spin,
body.al-state-reconnecting .al-play-main .ic-spin { display: block; animation: al-spin 900ms linear infinite; }

/* Mobile compact layout: [ logo + station/track ] … [ play ] [ expand ] */
@media (max-width: 760px) {
  .al-dock { display: flex; align-items: center; gap: 10px; min-height: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .al-dock-left { flex: 1 1 auto; min-width: 0; }
  .al-dock-center { flex: none; }
  .al-dock-center .al-skip { display: none; }   /* skip lives in the expanded sheet */
  .al-dock-right { flex: none; gap: 4px; }
  .al-dock-right .al-fav-now, .al-dock-right .al-dock-vol { display: none; }
  /* On mobile the dock dropdown is replaced by the sheet's pill selector. */
  .al-dock-right .al-stream-select { display: none; }
  .al-dock-now { display: none; }                /* shown in the expanded sheet instead */
  .al-dock-art, .al-dock-art-link { width: 52px; height: 52px; }
  .al-dock-title { font-size: .96rem; }
  .al-dock-state { max-width: 42vw; }
  .al-play-main { width: 52px; height: 52px; }
  #al-dock-expand { display: inline-flex; }      /* opens the Now-Playing sheet */
}

/* ---------- Now Playing — expanded player (compact sheet / desktop modal) ----
   Mobile: bottom sheet sized to content (no internal scroll). Desktop: a small,
   centered, capped-height modal — never a full-screen overlay. Close is always
   visible (top-right) and every main control fits without scrolling. */
.al-sheet-backdrop { position: fixed; inset: 0; background: rgba(5,4,16,.72); z-index: 1096; display: none; }
.al-sheet-backdrop.is-open { display: block; animation: al-fade var(--al-med); }
.al-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1098; transform: translateY(110%);
  transition: transform var(--al-med) var(--al-ease);
  background: linear-gradient(180deg, #241142, #170a2b);
  border-top-left-radius: var(--al-r-lg); border-top-right-radius: var(--al-r-lg);
  border-top: 1px solid var(--al-line-strong);
  padding: 14px clamp(16px,4vw,22px) calc(18px + env(safe-area-inset-bottom,0px));
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 8px); overflow: hidden;
}
.al-sheet.is-open { transform: translateY(0); }
/* Grip + close stay pinned; only the body scrolls when a short window can't
   fit the whole player — so nothing (incl. the sleep timer) ever clips. */
.al-sheet-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--al-line-strong) transparent; margin: 0 -2px; padding: 0 2px; }
.al-sheet-scroll::-webkit-scrollbar { width: 6px; }
.al-sheet-scroll::-webkit-scrollbar-thumb { background: var(--al-line-strong); border-radius: 3px; }
.al-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--al-line-strong); margin: 0 auto 12px; }
.al-sheet-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: var(--al-surface); z-index: 3; }
.al-sheet-head { display: flex; align-items: center; gap: 14px; margin: 2px 40px 14px 0; min-width: 0; }
.al-sheet-art { width: 84px; height: 84px; aspect-ratio: 1/1; border-radius: var(--al-r); object-fit: cover; flex: none;
  margin: 0; display: block; box-shadow: var(--al-shadow); border: 1px solid var(--al-line); }
.al-sheet-headtext { min-width: 0; display: flex; flex-direction: column; }
.al-sheet-title { text-align: left; font-size: 1.18rem; font-weight: 800; color: #fff; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sheet-state { text-align: left; color: var(--al-text-dim); margin-top: 3px; font-size: .85rem; }
.al-sheet-now { text-align: left; color: var(--al-text-dim); margin-top: 3px; font-weight: 600; min-height: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sheet-now b { color: #fff; }
.al-sheet-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0; }
.al-sheet-controls .al-iconbtn { width: 50px; height: 50px; background: var(--al-surface); }
.al-sheet-controls .al-play-main { width: 64px; height: 64px; }
.al-sheet-controls .al-play-main svg { width: 28px; height: 28px; }
.al-sheet-vol { display: flex; align-items: center; gap: 12px; max-width: 360px; margin: 0 auto 12px; padding: 9px 12px;
  border-radius: var(--al-r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--al-line); }
.al-sheet-vol .al-iconbtn { flex: none; background: var(--al-surface); }
.al-sheet-vol .al-vol-range { width: 100%; }
.al-sheet-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.al-sheet-actions .al-act { background: var(--al-surface); }
.al-sheet-actions .al-act.is-on { color: var(--al-coral); background: rgba(200,75,224,.1); border-color: rgba(200,75,224,.42); }
.al-sheet-actions .al-act.is-on svg { fill: var(--al-coral); }

/* ---------- Sleep timer (expanded player) — compact ---------- */
.al-sleep { margin: 10px auto 0; max-width: 360px; padding: 8px 11px;
  border-radius: var(--al-r); background: rgba(255,255,255,.04); border: 1px solid var(--al-line);
  transition: border-color var(--al-fast), background var(--al-fast); }
.al-sleep.is-active { border-color: rgba(200,75,224,.38); background: rgba(200,75,224,.07); }
.al-sleep-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.al-sleep-head { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.al-sleep-head svg { width: 15px; height: 15px; fill: var(--al-coral); flex: none; }
.al-sleep-title { font-size: .8rem; font-weight: 800; color: #fff; letter-spacing: .01em; }
.al-sleep-sub { font-size: .68rem; font-weight: 700; color: var(--al-text-faint); text-transform: uppercase; letter-spacing: .04em; }
.al-sleep-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.al-sleep-pill { padding: 6px 4px; border-radius: var(--al-r-pill); cursor: pointer;
  border: 1px solid var(--al-line-strong); background: var(--al-surface-2); color: var(--al-text-dim);
  font-size: .78rem; font-weight: 700; text-align: center;
  transition: background var(--al-fast), color var(--al-fast), border-color var(--al-fast), transform var(--al-fast); }
.al-sleep-pill:hover { background: var(--al-surface); color: #fff; }
.al-sleep-pill:active { transform: translateY(1px); }
.al-sleep-pill:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 2px; }
.al-sleep-pill.is-on { background: var(--al-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(168,85,247,.32); }
.al-sleep-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.al-sleep-remaining { font-size: .8rem; font-weight: 700; color: var(--al-text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sleep-cancel { flex: none; padding: 6px 11px; border-radius: var(--al-r-pill); cursor: pointer;
  border: 1px solid var(--al-line-strong); background: transparent; color: var(--al-text-dim);
  font-size: .76rem; font-weight: 700;
  transition: background var(--al-fast), color var(--al-fast), border-color var(--al-fast); }
.al-sleep-cancel:hover { background: var(--al-surface); color: #fff; border-color: var(--al-line-strong); }
.al-sleep-cancel:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 2px; }

/* Short viewports (laptop ~700-800px, small phones): trim vertical rhythm so
   the whole player — sleep timer included — fits without scrolling. */
@media (max-height: 820px) {
  .al-sheet-head { margin-bottom: 10px; }
  .al-sheet-controls { gap: 12px; margin: 8px 0; }
  .al-sheet-controls .al-iconbtn { width: 46px; height: 46px; }
  .al-sheet-controls .al-play-main { width: 56px; height: 56px; }
  .al-sheet-controls .al-play-main svg { width: 24px; height: 24px; }
  .al-sheet-vol { margin-bottom: 8px; padding: 7px 12px; }
  .al-sleep { margin-top: 8px; }
}

@media (min-width: 720px) {
  /* Centered, narrow modal with a capped height — opens from the dock arrow. */
  .al-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(430px, 92vw); max-height: min(86vh, 620px); overflow: hidden;
    transform: translate(-50%, -48%) scale(.98); opacity: 0; pointer-events: none;
    border-radius: var(--al-r-lg); border: 1px solid var(--al-line-strong);
    box-shadow: var(--al-shadow-lg);
    transition: transform var(--al-med) var(--al-ease), opacity var(--al-med) var(--al-ease);
  }
  .al-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
  .al-sheet-grip { display: none; }
}

/* favorite toggle states */
.al-fav.is-on, .al-fav-now.is-on { color: var(--al-coral); }
.al-fav.is-on svg, .al-fav-now.is-on svg { fill: var(--al-coral); }

/* ---------- Toasts ---------- */
.al-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--al-dock-h) + 24px); z-index: 1100;
  display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: 92vw; pointer-events: none; }
.al-toast { background: var(--al-elevated); border: 1px solid var(--al-line-strong); color: #fff;
  padding: 12px 18px; border-radius: var(--al-r-pill); box-shadow: var(--al-shadow); font-weight: 600; font-size: .9rem;
  animation: al-toast-in var(--al-med) var(--al-ease); }
.al-toast.ok { border-color: rgba(54,211,153,.5); }
.al-toast.warn { border-color: rgba(255,194,75,.5); }
.al-toast.err { border-color: rgba(255,107,107,.5); }

/* ---------- Footer (premium, balanced, no social/app sections) ---------- */
.al-footer { margin-top: var(--al-s8); border-top: 1px solid var(--al-line);
  background: linear-gradient(180deg, var(--al-bg-2), var(--al-bg)); }
.al-footer-grid { display: grid; gap: var(--al-s5) var(--al-s6); grid-template-columns: 1fr;
  padding: var(--al-s7) 0 var(--al-s6); }
@media (min-width: 560px){ .al-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .al-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
@media (min-width: 560px) and (max-width: 899px){ .al-footer-brand { grid-column: 1 / -1; } }
.al-footer-brand .al-brand { color: #fff; }
.al-footer-desc { max-width: 40ch; line-height: 1.6; font-size: .92rem; }
.al-footer h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--al-text-faint); margin-bottom: 14px; }
.al-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.al-footer a { color: var(--al-text-dim); transition: color var(--al-fast) var(--al-ease); }
.al-footer-col a { font-size: .92rem; }
.al-footer a:hover { color: #fff; }
.al-footer-col a:hover { color: var(--al-coral); }
.al-footer-bottom { border-top: 1px solid var(--al-line); padding: 18px 0 calc(18px + env(safe-area-inset-bottom,0px));
  text-align: center; color: var(--al-text-faint); font-size: .85rem; }
.al-footer-bottom a { color: var(--al-text-dim); font-weight: 700; }
.al-footer-bottom a:hover { color: #fff; }
/* The sticky mini-player is already cleared by the global body padding-bottom,
   so the footer needs no extra dock spacing here. */

/* cookie bar — sits clear of the player, never over the expanded sheet */
.al-cookie { position: fixed; left: 12px; right: 12px; bottom: calc(var(--al-dock-h) + 14px); z-index: 1095;
  background: var(--al-elevated); border: 1px solid var(--al-line-strong); border-radius: var(--al-r);
  padding: 14px 16px; display: none; align-items: center; gap: 12px; box-shadow: var(--al-shadow-lg);
  max-width: 520px; margin-inline: auto; }
.al-cookie.show { display: flex; }
.al-cookie span { color: var(--al-text-dim); font-size: .88rem; flex: 1; }

/* ---------- Loading skeleton for AJAX nav ---------- */
.al-main.is-loading { opacity: .45; transition: opacity var(--al-fast); pointer-events: none; }
.al-topbar-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1090; background: var(--al-grad);
  transition: width var(--al-med) var(--al-ease), opacity var(--al-med); opacity: 0; }
.al-topbar-progress.is-active { opacity: 1; }

/* utility */
.al-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.al-muted { color: var(--al-text-dim); }
.al-mt { margin-top: var(--al-s5); }

/* ---------- Animations ---------- */
@keyframes al-pulse { 0%{ box-shadow: 0 0 0 0 rgba(247,198,61,.6);} 70%{ box-shadow: 0 0 0 8px rgba(247,198,61,0);} 100%{ box-shadow: 0 0 0 0 rgba(247,198,61,0);} }
@keyframes al-eq { 0%,100%{ transform: scaleY(.35);} 50%{ transform: scaleY(1);} }
@keyframes al-spin { to { transform: rotate(360deg); } }
@keyframes al-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-sheen { 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }
@keyframes al-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .al-eq i { animation: none; transform: scaleY(.7); }
  .al-brand .al-livedot, body.al-state-playing .al-dock-state .dotind { animation: none; }
}

/* ---------- Station hero active (banner ring handled above) ---------- */

/* ---------- Dark Bootstrap modal / accordion overrides ---------- */
.al-body .modal-content { background: var(--al-bg-2); color: var(--al-text); border: 1px solid var(--al-line-strong); border-radius: var(--al-r); }
.al-body .modal-header { border-bottom: 1px solid var(--al-line); }
.al-body .modal-title { color: #fff; }
.al-body .accordion-button:not(.collapsed) { color: #fff; }
.al-body .accordion-button::after { filter: invert(1) brightness(1.5); }
.al-body select.al-field option { color: #111; }

/* ---------- Report modal — quick reason pills ---------- */
.al-report-q { font-weight: 700; color: #fff; margin: 0 0 var(--al-s3); font-size: 1rem; }
.al-report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--al-s4); }
.al-report-reason {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem;
  padding: 9px 14px; border-radius: var(--al-r-pill); color: var(--al-text-dim);
  background: var(--al-bg-2); border: 1px solid var(--al-line);
  transition: transform var(--al-fast) var(--al-ease), border-color var(--al-fast), background var(--al-fast), color var(--al-fast);
}
.al-report-reason:hover { border-color: var(--al-line-strong); color: #fff; transform: translateY(-1px); }
.al-report-reason:focus-visible { outline: none; border-color: var(--al-violet); }
.al-report-reason.is-on {
  color: #fff; border-color: transparent; background: var(--al-grad);
  box-shadow: 0 4px 14px rgba(155,108,246,.35);
}
.al-report-reason:active { transform: translateY(0); }
.al-report-label { display: block; font-size: .82rem; font-weight: 600; color: var(--al-text-dim); margin-bottom: 6px; }
#report-submission-form textarea.al-field { resize: vertical; min-height: 44px; }

/* ---------- PWA install prompt (discreet, above the mini-player) ---------- */
.al-pwa-prompt {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  z-index: 1040; width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: var(--al-s3);
  padding: 12px 14px; border-radius: var(--al-r);
  background: var(--al-elevated); border: 1px solid var(--al-line-strong);
  box-shadow: var(--al-shadow-lg);
  transition: transform var(--al-med) var(--al-ease), opacity var(--al-med);
}
.al-pwa-prompt.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* Lift above the dock while the mini-player is on screen. */
body.al-has-player .al-pwa-prompt { bottom: calc(var(--al-dock-h) + 16px + env(safe-area-inset-bottom, 0px)); }
.al-pwa-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--al-grad-soft); }
.al-pwa-ic svg { width: 22px; height: 22px; fill: var(--al-violet); }
.al-pwa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.al-pwa-txt strong { color: #fff; font-size: .92rem; line-height: 1.2; }
.al-pwa-txt span { color: var(--al-text-dim); font-size: .8rem; line-height: 1.25; }
.al-pwa-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.al-pwa-install { padding: 8px 14px; font-size: .86rem; white-space: nowrap; }
.al-pwa-close { width: 34px; height: 34px; flex: none; border: none; background: transparent; cursor: pointer;
  border-radius: var(--al-r-pill); color: var(--al-text-dim); display: grid; place-items: center;
  transition: background var(--al-fast), color var(--al-fast); }
.al-pwa-close:hover { background: var(--al-surface); color: #fff; }
.al-pwa-close:focus-visible { outline: none; color: #fff; box-shadow: 0 0 0 2px var(--al-violet); }
.al-pwa-close svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 420px) {
  .al-pwa-prompt { flex-wrap: wrap; }
  .al-pwa-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- Track history ---------- */
.al-track-history .al-section-head { display: flex; align-items: baseline; gap: var(--al-s3); flex-wrap: wrap; }
.al-th-day { margin-bottom: var(--al-s5); }
.al-th-date {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--al-text-dim); margin: 0 0 var(--al-s2);
}
.al-th-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--al-line); border-radius: var(--al-r-sm); overflow: hidden; }
.al-th-item {
  display: flex; align-items: baseline; gap: var(--al-s4);
  padding: 11px 16px; background: var(--al-surface);
  border-top: 1px solid var(--al-line);
}
.al-th-item:first-child { border-top: 0; }
.al-th-time {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .9rem; color: var(--al-violet);
}
.al-th-title { flex: 1 1 auto; color: var(--al-text); font-size: .96rem; }

/* ==========================================================================
   Refined station page — compact hero, "Acum la radio" card, tabs, mod cards
   ========================================================================== */

/* Hero becomes a 2-column shell: main (art+meta) | now-playing card */
@media (min-width: 760px){ .al-station-hero { grid-template-columns: 1fr; align-items: stretch; } }
@media (min-width: 1040px){ .al-station-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; } }

.al-sh-main { display: grid; gap: clamp(16px, 2.6vw, 26px); grid-template-columns: 1fr; }
@media (min-width: 520px){ .al-sh-main { grid-template-columns: 132px 1fr; align-items: start; } }
.al-sh-main .al-station-art-wrap { max-width: 150px; }

/* The "LIVE" badge is hidden by default and only revealed once playback is
   really confirmed (body.al-state-playing) for THIS station (.is-active).
   Pressing Play alone never shows it — connecting/buffering/reconnecting stay
   hidden until the audio element actually fires its "playing" event. */
.al-live-badge {
  display: none; align-items: center; gap: 7px; padding: 5px 12px 5px 10px;
  border-radius: var(--al-r-pill); background: rgba(255,90,90,.14); border: 1px solid rgba(255,90,90,.42);
  color: #ff8f8f; font-weight: 800; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
}
body.al-state-playing .al-station-hero.is-active .al-live-badge { display: inline-flex; }
.al-live-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; }
body.al-state-playing .al-station-hero.is-active .al-live-badge .dot { animation: al-pulse-red 2s infinite; }
.al-live-badge.sm { padding: 3px 9px 3px 8px; font-size: .64rem; }
@keyframes al-pulse-red { 0%{ box-shadow: 0 0 0 0 rgba(255,90,90,.6);} 70%{ box-shadow: 0 0 0 7px rgba(255,90,90,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,90,90,0);} }

/* ---------- Public stream-health states (offline / alternative) ----------
   Calm, corporate affordances for the rolling stream-monitor. These use the
   warm amber accent (never the red LIVE pulse) so an unavailable stream reads
   as "we're on it", not "broken". The page stays fully indexable; only the
   playback control changes. */
.al-status-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px;
  border-radius: var(--al-r-pill); font-weight: 800; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(247,198,61,.12); border: 1px solid rgba(247,198,61,.4); color: var(--al-amber);
}
.al-status-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--al-amber); }
.al-status-note {
  display: inline-flex; align-items: center; margin-left: 8px;
  font-size: .76rem; font-weight: 600; color: var(--al-text-dim);
}

/* Hero "Indisponibil" pill shown in place of the Play button (inert). */
.al-btn-unavailable {
  display: inline-flex; align-items: center; gap: 9px; cursor: default;
  background: var(--al-surface); color: var(--al-text-dim);
  border: 1px solid var(--al-line-strong); box-shadow: none;
}
.al-btn-unavailable svg { width: 20px; height: 20px; fill: var(--al-amber); }

/* Offline variant of the now-playing aside — keeps the two-column hero. */
.al-nowcard-offline { align-items: flex-start; justify-content: center; text-align: left; gap: 12px; }
.al-nc-offline-ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(247,198,61,.1); border: 1px solid rgba(247,198,61,.28);
}
.al-nc-offline-ic svg { width: 24px; height: 24px; fill: var(--al-amber); }
.al-nc-offline-badge {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--al-r-pill);
  background: rgba(247,198,61,.12); border: 1px solid rgba(247,198,61,.36);
  color: var(--al-amber); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
.al-nc-offline-msg { color: var(--al-text-dim); line-height: 1.55; font-size: .9rem; margin: 0; }

/* Card "Temporar indisponibil" badge + dimmed art for offline streams. */
.al-card-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none;
  padding: 3px 9px; border-radius: var(--al-r-pill);
  background: rgba(20,8,38,.82); border: 1px solid rgba(247,198,61,.4);
  color: var(--al-amber); font-weight: 700; font-size: .62rem; letter-spacing: .03em; white-space: nowrap;
}
.al-card.is-unavailable .al-card-art img { opacity: .55; filter: saturate(.8); }

.al-sh-desc { color: var(--al-text-dim); line-height: 1.6; margin: 12px 0 2px; max-width: 60ch; font-size: .97rem; }

.al-stat-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--al-r-pill);
  background: var(--al-surface); border: 1px solid var(--al-line); color: var(--al-text-dim); font-size: .86rem;
}
.al-stat-pill svg { width: 18px; height: 18px; fill: var(--al-violet); }
.al-stat-pill b { color: #fff; font-weight: 800; }
.al-stat-lbl { color: var(--al-text-faint); }
.al-vote-pair { display: inline-flex; gap: 8px; }

/* ---------- "Acum se aude" now-playing card ---------- */
.al-nowcard {
  position: relative; overflow: hidden; align-self: start; border-radius: 18px;
  padding: clamp(12px, 1.3vw, 15px); border: 1px solid rgba(155,108,246,.32);
  background:
    radial-gradient(110% 95% at 100% 0%, rgba(210,62,200,.18), transparent 54%),
    radial-gradient(120% 110% at 0% 100%, rgba(59,130,246,.14), transparent 58%),
    linear-gradient(160deg, rgba(35,17,58,.96), rgba(18,9,35,.96));
  box-shadow: 0 16px 36px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 9px; min-height: 0;
}
.al-nowcard.no-metadata { gap: 10px; }
.al-nc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.al-nc-titleblock { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.al-nc-label {
  color: #fff; font-size: .9rem; line-height: 1.2; font-weight: 800;
}
.al-np-live {
  width: max-content; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 7px; border-radius: 999px; color: #ff9f9f;
  background: rgba(255,90,90,.11); border: 1px solid rgba(255,90,90,.35);
  font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.al-np-live span { width: 6px; height: 6px; border-radius: 999px; background: #ff5a5a; box-shadow: 0 0 10px rgba(255,90,90,.65); }
.al-nc-conn { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: .72rem; font-weight: 700; color: var(--al-text-faint); white-space: nowrap; }
.al-nc-conn .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.al-nc-conn .bars i { width: 3px; background: currentColor; border-radius: 2px; opacity: .55; }
.al-nc-conn .bars i:nth-child(1){ height: 40%; } .al-nc-conn .bars i:nth-child(2){ height: 70%; } .al-nc-conn .bars i:nth-child(3){ height: 100%; }
body.al-state-playing .al-station-hero.is-active .al-nc-conn { color: var(--al-ok); }
body.al-state-playing .al-station-hero.is-active .al-nc-conn .bars i { opacity: 1; animation: al-eq 1s ease-in-out infinite; }
body.al-state-playing .al-station-hero.is-active .al-nc-conn .bars i:nth-child(2){ animation-delay: .2s; }
body.al-state-playing .al-station-hero.is-active .al-nc-conn .bars i:nth-child(3){ animation-delay: .4s; }

.al-nc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-nc-artist {
  font-size: .7rem; color: var(--al-text-faint); font-weight: 800; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.al-nc-track {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: #fff; font-size: clamp(.96rem, 1.05vw, 1.08rem);
  font-weight: 800; line-height: 1.23;
}
.al-nc-track:empty { display: none; }
.al-nc-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--al-text-dim); font-size: .78rem; line-height: 1.35;
}
.al-nc-summary[hidden] { display: none !important; }

.al-nc-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 0; }
.al-nc-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.al-nc-hint { color: var(--al-text-faint); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.al-nc-updated { color: var(--al-text-faint); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.al-nc-loading { color: var(--al-text-faint); font-size: .72rem; font-weight: 700; white-space: nowrap; }

/* Cover + title row inside the "Acum se aude" card */
.al-nc-main {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px; border-radius: 13px; background: rgba(255,255,255,.043);
  border: 1px solid rgba(255,255,255,.075);
}
.al-nc-cover {
  flex: none; width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  background: var(--al-surface); border: 1px solid var(--al-line);
  box-shadow: 0 8px 18px rgba(0,0,0,.3); position: relative;
  transition: border-color var(--al-med) var(--al-ease), transform var(--al-med) var(--al-ease);
}
.al-nc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-nc-cover img[hidden] { display: none; }
/* Neutral music-note placeholder shown until real song artwork is available
   (we never repeat the station logo here). */
.al-nc-cover-ph {
  position: absolute; inset: 0; margin: auto; width: 46%; height: 46%;
  fill: var(--al-text-faint); opacity: .55;
}
.al-nowcard.has-art .al-nc-cover-ph { display: none; }
.al-nowcard.has-art .al-nc-cover { border-color: rgba(155,108,246,.5); }
body.al-state-playing .al-station-hero.is-active .al-nowcard.has-art .al-nc-cover { transform: translateY(-1px); }
.al-nc-main .al-nc-body { flex: 1 1 auto; min-width: 0; }

.al-nc-tech {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0; margin: 0; padding: 0;
}
.al-nc-tech-row {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.065);
  color: var(--al-text-faint); font-size: .68rem; font-weight: 750;
}
.al-nc-tech-row[hidden] { display: none !important; }
.al-nc-tech-row dt { margin: 0; color: var(--al-text-faint); font-weight: 800; }
.al-nc-tech-row dt::after { content: ":"; }
.al-nc-tech-row dd { margin: 0; min-width: 0; color: var(--al-text-dim); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-nc-tech-row .al-nc-conn { font-size: inherit; }
.al-nc-tech-row .al-nc-conn .bars { height: 10px; }
.al-nc-tech-row .al-nc-conn .bars i { width: 2px; }

.al-nc-history-wrap { display: flex; flex-direction: column; gap: 6px; }
.al-nc-history-wrap[hidden] { display: none !important; }
.al-nc-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-nc-history-head h2 {
  margin: 0; color: #fff; font-size: .8rem; line-height: 1.25; font-weight: 800;
}
.al-nc-history {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 5px;
}
.al-nc-history li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 7px;
  padding: 5px 7px; min-height: 28px; border-radius: 9px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.065);
}
.al-nc-history time {
  color: var(--al-coral); font-size: .68rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.al-nc-history-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.al-nc-history-title, .al-nc-history-artist {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.al-nc-history-title {
  color: var(--al-text-dim); font-size: .78rem; font-weight: 750; line-height: 1.18;
}
.al-nc-history-artist {
  color: var(--al-text-faint); font-size: .66rem; font-weight: 700; line-height: 1.12;
}
.al-nc-empty {
  margin: 0; color: var(--al-text-dim); font-size: .78rem; line-height: 1.4;
  padding: 7px 8px; border-radius: 9px; background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
}
.al-nc-empty[hidden], .al-nc-loading[hidden] { display: none !important; }
.al-nc-history-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px;
  padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(155,108,246,.36);
  background: rgba(155,108,246,.12); color: #f3eaff; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 800; text-decoration: none;
  transition: transform var(--al-fast), border-color var(--al-fast), background var(--al-fast);
}
.al-nc-history-link:hover { transform: translateY(-1px); border-color: rgba(210,62,200,.48); background: rgba(210,62,200,.16); }
.al-nc-history-link:focus-visible { outline: 3px solid var(--al-violet); outline-offset: 2px; }
.al-nc-history-unavailable {
  display: inline-flex; align-items: center; justify-content: center; min-height: 29px;
  padding: 6px 9px; border-radius: 9px; color: var(--al-text-faint);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  font-size: .74rem; font-weight: 700; text-align: center;
}

/* Format badge — small static pill (neutralises the interactive .al-chip hover) */
.al-chip.al-nc-fmt, .al-chip.al-dock-fmt, .al-chip.al-sheet-fmt {
  padding: 2px 8px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; cursor: default; white-space: nowrap;
  color: var(--al-violet); background: rgba(155,108,246,.13); border: 1px solid rgba(155,108,246,.32);
}
.al-chip.al-nc-fmt:hover, .al-chip.al-dock-fmt:hover, .al-chip.al-sheet-fmt:hover {
  color: var(--al-violet); -webkit-text-fill-color: var(--al-violet);
  background: rgba(155,108,246,.13); border-color: rgba(155,108,246,.32);
}
/* The hidden attribute must win over .al-chip's inline-flex display. */
.al-nc-fmt[hidden], .al-dock-fmt[hidden], .al-sheet-fmt[hidden],
.al-nc-updated[hidden], .al-sheet-updated[hidden] { display: none !important; }

/* Dock + sheet now-playing extras */
.al-dock-fmt { margin-left: 4px; }
.al-sheet-eyebrow { display: block; text-align: left; margin-bottom: 4px; }
.al-sheet-tech { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.al-sheet-updated { color: var(--al-text-faint); font-size: .76rem; font-weight: 600; }

/* ---------- Tabs ---------- */
.al-tabs-wrap { margin-top: clamp(22px, 3.4vw, 36px); border-bottom: 1px solid var(--al-line); overflow-x: auto; scrollbar-width: none; }
.al-tabs-wrap::-webkit-scrollbar { display: none; }
.al-tabs { display: flex; gap: 2px; min-width: max-content; }
.al-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px;
  background: none; border: 0; cursor: pointer; color: var(--al-text-dim); font-weight: 700; font-size: .96rem;
  font-family: inherit; white-space: nowrap; transition: color var(--al-fast);
}
.al-tab svg { width: 18px; height: 18px; fill: currentColor; opacity: .85; }
.al-tab:hover { color: #fff; }
.al-tab.is-active { color: #fff; }
.al-tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--al-grad); transform: scaleX(0); transform-origin: center; transition: transform var(--al-med) var(--al-ease);
}
.al-tab.is-active::after { transform: scaleX(1); }
.al-tab:focus-visible { outline: 3px solid var(--al-violet); outline-offset: -3px; border-radius: 8px; }
.al-tab-badge {
  font-style: normal; font-size: .72rem; font-weight: 800; line-height: 1; padding: 2px 7px; border-radius: var(--al-r-pill);
  background: var(--al-surface); border: 1px solid var(--al-line); color: var(--al-text-dim);
}
.al-tab.is-active .al-tab-badge { background: var(--al-grad); color: #fff; border-color: transparent; }

.al-tabpanel { margin-top: clamp(20px, 3vw, 28px); }
.al-tabpanel[hidden] { display: none; }
.al-tabpanel:focus { outline: none; }
.al-tabpanel.is-active { animation: al-fade var(--al-med) var(--al-ease); }

/* ---------- Modular cards ---------- */
.al-modcards { display: grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 680px){ .al-modcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px){ .al-modcards { grid-template-columns: repeat(3, 1fr); } }
.al-modcard {
  background: linear-gradient(180deg, var(--al-surface), rgba(39,21,68,.55));
  border: 1px solid var(--al-line); border-radius: var(--al-r-lg); padding: clamp(18px, 2.2vw, 24px);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--al-med), transform var(--al-med) var(--al-ease), box-shadow var(--al-med);
}
.al-modcard:hover { border-color: var(--al-line-strong); transform: translateY(-3px); box-shadow: var(--al-shadow); }
.al-modcard-head { display: flex; align-items: center; gap: 12px; }
.al-modcard-head h2 { font-size: 1.06rem; margin: 0; color: #fff; }
.al-modcard-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--al-grad-soft); border: 1px solid var(--al-line-strong); }
.al-modcard-ic svg { width: 21px; height: 21px; fill: var(--al-violet); }
.al-modcard .al-prose, .al-modcard p { font-size: .92rem; margin: 0; }
/* "Despre post" text: clamp cleanly at a LINE boundary (never a faded half-line),
   expanded in place by the read-more toggle. No mask — fixes the clipped/faded bug. */
.al-about-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden; transition: none;
}
.al-about-text.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.al-readmore {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--al-coral); font-weight: 700; font-size: .9rem;
}
.al-readmore svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--al-fast) var(--al-ease); }
.al-readmore:hover { filter: brightness(1.18); }
.al-readmore[aria-expanded="true"] svg { transform: rotate(180deg); }
.al-readmore:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 3px; border-radius: var(--al-r-sm); }
.al-modcard-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; background: none; border: 0; cursor: pointer; color: var(--al-coral); font-weight: 700; font-size: .9rem; font-family: inherit; padding: 0; text-decoration: none; }
.al-modcard-link svg { width: 16px; height: 16px; fill: currentColor; }
.al-modcard-link:hover { filter: brightness(1.18); }

.al-modcard-grid2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.al-cov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.al-cov-list a { color: var(--al-text-dim); font-size: .92rem; }
.al-cov-list a:hover { color: var(--al-coral); }
.al-cov-signal { position: relative; flex: none; width: 88px; height: 88px; display: grid; place-items: center; }
.al-cov-signal .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--al-coral); box-shadow: 0 0 16px rgba(210,62,200,.85); z-index: 2; }
.al-cov-signal .r { position: absolute; border-radius: 50%; border: 1.5px solid rgba(210,62,200,.5); }
.al-cov-signal .r1 { width: 30px; height: 30px; } .al-cov-signal .r2 { width: 56px; height: 56px; border-color: rgba(210,62,200,.32); } .al-cov-signal .r3 { width: 84px; height: 84px; border-color: rgba(210,62,200,.18); }
.al-cov-signal .r { animation: al-ring 2.6s ease-out infinite; }
.al-cov-signal .r2 { animation-delay: .5s; } .al-cov-signal .r3 { animation-delay: 1s; }
@keyframes al-ring { 0%{ transform: scale(.85); opacity: .9; } 100%{ transform: scale(1.1); opacity: .25; } }

.al-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.al-contact-list li { display: flex; flex-direction: column; gap: 2px; }
.al-contact-list .k, .al-contact-social .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--al-text-faint); font-weight: 700; }
.al-contact-list a { color: var(--al-coral); font-weight: 600; font-size: .95rem; word-break: break-word; }
.al-contact-list a:hover { text-decoration: underline; }
.al-contact-social { margin-top: 2px; }
.al-contact-social .k { display: block; margin-bottom: 7px; }
.al-cs-row { display: flex; gap: 8px; }
.al-cs-row a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--al-surface); border: 1px solid var(--al-line); color: var(--al-text-dim); transition: transform var(--al-fast), background var(--al-fast), color var(--al-fast); }
.al-cs-row a svg { width: 18px; height: 18px; fill: currentColor; }
.al-cs-row a:hover { background: var(--al-grad); color: #fff; border-color: transparent; transform: translateY(-2px); }

/* ---------- Frequencies ---------- */
.al-freq-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 520px){ .al-freq-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .al-freq-grid { grid-template-columns: repeat(3, 1fr); } }
.al-freq-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--al-r); background: var(--al-surface); border: 1px solid var(--al-line); }
.al-freq-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--al-grad-soft); border: 1px solid var(--al-line-strong); }
.al-freq-ic svg { width: 20px; height: 20px; fill: var(--al-violet); }
.al-freq-val { font-weight: 800; color: #fff; font-size: 1.04rem; }
.al-freq-city { color: var(--al-text-dim); font-size: .85rem; margin-left: auto; text-align: right; }
.al-freq-sub { font-size: 1rem; margin-bottom: var(--al-s3); }

/* ---------- Comments (refined avatar layout) ---------- */
.al-comments-list { display: flex; flex-direction: column; gap: 12px; }
.al-comment { display: flex; gap: 12px; align-items: flex-start; }
.al-comment-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--al-grad); color: #fff; font-weight: 800; font-size: 1rem; }
.al-comment-body { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Similar stations rail ---------- */
.al-rail { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.al-rail::-webkit-scrollbar { height: 8px; }
.al-rail::-webkit-scrollbar-thumb { background: var(--al-line-strong); border-radius: 8px; }
.al-rail-track { display: flex; gap: clamp(12px, 1.6vw, 18px); min-width: max-content; }
.al-rail-track .al-card { flex: 0 0 clamp(140px, 42vw, 178px); width: clamp(140px, 42vw, 178px); }

/* ---------- Responsive header / navigation consistency ----------
   Below the desktop breakpoint the inline text nav collapses entirely into the
   hamburger drawer, so the two never show simultaneously (they previously both
   appeared between 601–991px, and "Despre noi" wrapped). The hamburger is
   d-lg-none — visible < 992px — so the nav hides at the same boundary. */
@media (max-width: 991px) {
  .al-appbar-nav { display: none; }
}
/* On phones the brand + four trailing icons overflowed narrow viewports and
   pushed the hamburger off-screen (unreachable below ~414px). Give every phone
   the same clean bar — brand · search · menu — by dropping the two icons that
   are already in the drawer (Favorite, Istoric). Their 44px targets, and the
   menu, then stay fully on screen down to 320px. */
@media (max-width: 600px) {
  .al-appbar { gap: 8px; }
  .al-brand { font-size: 1.08rem; }
  .al-brand .al-brand-logo { height: 34px; }
  .al-appbar-history, .al-appbar-fav { display: none; }
  .al-nowcard { min-height: 0; padding: 12px; }
  .al-nc-main { padding: 8px; gap: 9px; }
  .al-nc-cover { width: 42px; height: 42px; border-radius: 10px; }
  .al-nc-tech { gap: 5px; }
  .al-nc-tech-row { max-width: 100%; }
  .al-nc-history li { grid-template-columns: 34px minmax(0, 1fr); padding: 5px 7px; }
  .al-nc-conn .lbl { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .al-cov-signal .r, .al-nc-wave i, .al-nc-conn .bars i { animation: none !important; }
}

/* ==========================================================================
   Public polish — refined page headers, contact layout, motion-safe reveal
   (Linear/Stripe/Vercel inspiration: clear hierarchy, controlled depth,
   purposeful micro-motion). Tokens only; additive, no structural changes.
   ========================================================================== */

/* Client-rendered empty states live inside a CSS grid — let them span it. */
.al-grid > .al-empty { grid-column: 1 / -1; }

/* ---------- Page header (listing / utility pages) ---------- */
.al-pagehead { margin-top: var(--al-s6); margin-bottom: var(--al-s5); }
.al-pagehead-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--al-s4); flex-wrap: wrap;
}
.al-pagehead .al-eyebrow { display: block; margin-bottom: 10px; }
.al-pagehead h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.08; margin: 0; max-width: 24ch; }
.al-pagehead-lead { color: var(--al-text-dim); margin: 14px 0 0; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; }
.al-count-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--al-r-pill);
  background: var(--al-surface); border: 1px solid var(--al-line); color: var(--al-text-dim);
  font-size: .86rem; font-weight: 600; white-space: nowrap; flex: none;
}
.al-count-pill b { color: #fff; font-weight: 800; }
.al-count-pill svg { width: 16px; height: 16px; fill: var(--al-violet); flex: none; }

/* ---------- Contact — two-column premium layout ---------- */
.al-contact-layout {
  display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 920px){ .al-contact-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr); } }

.al-side-card {
  background: linear-gradient(180deg, var(--al-surface), rgba(39,21,68,.55));
  border: 1px solid var(--al-line); border-radius: var(--al-r-lg);
  padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px);
}
.al-side-item { display: flex; gap: 14px; align-items: flex-start; }
.al-side-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--al-grad-soft); border: 1px solid var(--al-line-strong);
}
.al-side-ic svg { width: 21px; height: 21px; fill: var(--al-violet); }
.al-side-text { min-width: 0; }
.al-side-text h3 { font-size: 1rem; margin: 0 0 3px; color: #fff; letter-spacing: -.01em; }
.al-side-text p { margin: 0; color: var(--al-text-dim); font-size: .9rem; line-height: 1.55; }
.al-side-text a { color: var(--al-coral); font-weight: 600; }
.al-side-text a:hover { text-decoration: underline; }

/* The contact form panel keeps its own rounding; align with the side card. */
.al-contact-layout .al-panel { border-radius: var(--al-r-lg); }

/* ---------- Propune un radio — sectioned premium form ---------- */
.al-submit-form { padding: clamp(18px, 2.6vw, 28px); }

/* Review note banner at the top of the form */
.al-panel-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--al-grad-soft); border: 1px solid var(--al-line-strong);
  border-radius: var(--al-r-sm); padding: 12px 14px; margin-bottom: var(--al-s5);
  color: var(--al-text-dim); font-size: .88rem; line-height: 1.5;
}
.al-panel-note svg { width: 19px; height: 19px; fill: var(--al-violet); flex: none; margin-top: 1px; }

/* Sections divided by a hairline, each with a numbered head */
.al-form-section { border-top: 1px solid var(--al-line); padding-top: var(--al-s5); margin-top: var(--al-s5); }
.al-form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.al-form-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--al-s4); }
.al-form-section-num {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--al-grad); color: #fff; font-weight: 800; font-size: .82rem;
  box-shadow: 0 4px 12px rgba(168,85,247,.3);
}
.al-form-section-head h2 { font-size: 1.02rem; margin: 0; color: #fff; letter-spacing: -.01em; }

/* Responsive field grid — single column on mobile, splits on wider screens */
.al-form-grid { display: grid; gap: var(--al-s4); grid-template-columns: 1fr; }
.al-form-grid .col-full { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .al-form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .al-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.al-field-group { display: flex; flex-direction: column; min-width: 0; }
.al-req { color: var(--al-amber); font-weight: 800; }
.al-hint { margin: 6px 0 0; font-size: .79rem; color: var(--al-text-faint); line-height: 1.45; }

/* Compact, scannable fields — only inside the submission form */
.al-submit-form .al-label { margin-bottom: 5px; font-size: .85rem; }
.al-submit-form .al-field { padding: 10px 13px; font-size: .92rem; }
.al-submit-form textarea.al-field { min-height: 80px; line-height: 1.5; resize: vertical; }

/* Premium file input */
.al-submit-form input[type=file].al-field { padding: 8px 12px; cursor: pointer; line-height: 1.6; }
.al-submit-form input[type=file].al-field::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 0; border-radius: var(--al-r-sm);
  background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-family: inherit;
  font-size: .85rem; cursor: pointer; transition: background var(--al-fast);
}
.al-submit-form input[type=file].al-field::file-selector-button:hover { background: rgba(255,255,255,.16); }

/* Optional alternative audio streams — repeatable rows added on demand */
.al-optional { color: var(--al-text-faint); font-weight: 600; font-size: .82em; }
.al-altstreams-hint { margin-top: 0; margin-bottom: var(--al-s3); }
.al-altstreams:empty { display: none; }
.al-altstreams { display: flex; flex-direction: column; gap: var(--al-s3); margin-bottom: var(--al-s3); }
.al-altstream-row {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--al-s3);
  padding: var(--al-s3); border: 1px solid var(--al-line); border-radius: var(--al-r-sm);
  background: var(--al-bg-2);
}
.al-altstream-fields { display: grid; grid-template-columns: 1fr; gap: var(--al-s2) var(--al-s3); min-width: 0; }
.al-altstream-fields .al-field { font-size: .88rem; }
.al-altstream-url { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .al-altstream-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.al-altstream-add[disabled],
.al-altstream-add[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.al-altstream-add[disabled]:hover,
.al-altstream-add[aria-disabled="true"]:hover { background: rgba(255,255,255,.06); }
.al-altstream-remove {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); color: var(--al-text-dim);
  border: 1px solid var(--al-line); border-radius: var(--al-r-sm); cursor: pointer;
  transition: background var(--al-fast), color var(--al-fast), border-color var(--al-fast);
}
.al-altstream-remove svg { width: 16px; height: 16px; fill: currentColor; }
.al-altstream-remove:hover { background: rgba(255,107,107,.14); color: var(--al-err); border-color: rgba(255,107,107,.4); }
.al-altstream-remove:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 2px; }
.al-altstream-remove:active { transform: translateY(1px); }
.al-altstream-add {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 8px 14px; font-family: inherit; font-size: .85rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid var(--al-line-strong);
  border-radius: var(--al-r-sm); cursor: pointer;
  transition: background var(--al-fast), border-color var(--al-fast);
}
.al-altstream-add svg { width: 15px; height: 15px; fill: var(--al-violet); }
.al-altstream-add:hover { background: rgba(255,255,255,.12); }
.al-altstream-add:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 2px; }
.al-altstream-add:active { transform: translateY(1px); }

/* Submit row — full-width tap target on mobile, sized on desktop */
.al-submit-actions { margin-top: var(--al-s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-s3) var(--al-s4); }
.al-submit-actions .al-btn { width: 100%; }
.al-submit-actions .al-btn[disabled] { opacity: .7; cursor: progress; }
.al-required-note { margin: 0; font-size: .79rem; color: var(--al-text-faint); }
@media (min-width: 600px) {
  .al-submit-actions .al-btn { width: auto; min-width: 220px; }
}

/* Side card — process steps share the contact aside styling, plus a title */
.al-side-title { font-size: 1.05rem; margin: 0 0 2px; color: #fff; letter-spacing: -.01em; }

/* Result banner — tokenized success/error states that fit the dark theme
   (replaces Bootstrap's pale defaults; scoped to the submission result only). */
#submission-result:not(:empty) { margin-top: var(--al-s4); }
#submission-result .alert {
  margin: 0; padding: 12px 14px; border-radius: var(--al-r-sm);
  border: 1px solid var(--al-line-strong); font-size: .9rem; line-height: 1.5; color: var(--al-text);
}
#submission-result .alert b { color: #fff; }
#submission-result .alert-success { background: rgba(54,211,153,.12); border-color: rgba(54,211,153,.4); color: var(--al-ok); }
#submission-result .alert-danger { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.4); color: var(--al-err); }

/* ---------- Error / 404 page ---------- */
.al-error-brand { justify-content: center; font-size: 1.4rem; margin-bottom: var(--al-s6); }
.al-error-brand .al-brand-logo { height: 38px; }
.al-error-actions { display: flex; flex-wrap: wrap; gap: var(--al-s3); justify-content: center; }

/* ---------- Progressive reveal (opt-in, motion-safe) ----------
   Base styles apply ONLY when JS adds html.al-anim (set only when the user
   has not requested reduced motion). Without it, content is fully visible —
   so SSR output stays crawlable and nothing depends on JS to be seen. */
html.al-anim .al-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--al-med) var(--al-ease), transform var(--al-med) var(--al-ease);
}
html.al-anim .al-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.al-anim .al-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Mod mașină (car mode) — /mod-masina
   Focused, driving-friendly screen: big search, quick tabs, large rows,
   one "Ascultă" per station, compact current-station panel. Everything is
   derived from the design tokens; the shared chrome (appbar, footer, dock)
   is hidden while body.al-car-active is set by the app controller.
   ========================================================================== */
body.al-car-active { padding-top: 0; padding-bottom: 0; }
body.al-car-active .al-appbar,
body.al-car-active .al-footer,
body.al-car-active .al-dock,
body.al-car-active .al-pwa-prompt { display: none; }

.al-car-inner {
  max-width: 1140px; margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 30px);
}
/* Reserve space for the fixed bottom player (mobile). The exact height is
   measured by CarMode (ResizeObserver → --al-car-player-h custom property)
   because the panel's real height varies with content (track line, wrapped
   state row, open sleep-timer panel); the 280px fallback only covers the
   instant before JS has measured on first paint. */
.al-car-picker { padding-bottom: calc(var(--al-car-player-h, 280px) + var(--al-s4) + env(safe-area-inset-bottom, 0px)); }
body:not(.al-has-player) .al-car-player { display: none; }
body:not(.al-has-player) .al-car-picker { padding-bottom: var(--al-s5); }

/* ---- Sticky top block: header + search + tabs ---- */
.al-car-top {
  position: sticky; top: 0; z-index: 40;
  padding: var(--al-s4) 0 var(--al-s3);
  background: linear-gradient(180deg, var(--al-bg) 78%, rgba(21,8,38,0));
}
.al-car-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--al-s3); margin-bottom: var(--al-s4); }
.al-car-head h1 { font-size: 1.35rem; margin: 0; }
.al-car-sub { margin: 2px 0 0; color: var(--al-text-dim); font-size: .95rem; }
.al-car-exit {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 48px; padding: 0 var(--al-s4); cursor: pointer;
  border-radius: var(--al-r-pill); border: 1px solid var(--al-line-strong);
  background: var(--al-surface-2); color: var(--al-text);
  font-weight: 700; font-size: .95rem;
  transition: transform var(--al-fast) var(--al-ease);
}
.al-car-exit svg { width: 20px; height: 20px; fill: currentColor; }
.al-car-exit:hover, .al-car-exit:focus-visible { background: var(--al-elevated); color: #fff; }
.al-car-exit:active { transform: scale(.97); }

/* ---- Search field ---- */
.al-car-search {
  display: flex; align-items: center; gap: var(--al-s3);
  min-height: 60px; padding: 0 var(--al-s4);
  border-radius: var(--al-r); border: 1px solid var(--al-line-strong);
  background: var(--al-surface-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.al-car-search:focus-within { border-color: var(--al-violet); box-shadow: 0 0 0 3px rgba(155,108,246,.25); }
.al-car-search-ico { width: 22px; height: 22px; fill: var(--al-text-dim); flex: none; }
.al-car-search input {
  flex: 1; min-width: 0; height: 58px;
  background: none; border: 0; outline: none;
  color: var(--al-text); font: inherit; font-size: 1.05rem; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.al-car-search input::placeholder { color: var(--al-text-faint); }
/* The wrapper carries the focus ring (focus-within); skip the inner outline. */
.al-car-search input:focus-visible { outline: none; }
.al-car-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.al-car-clear {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: var(--al-text-dim); cursor: pointer;
  transition: transform var(--al-fast) var(--al-ease);
}
.al-car-clear svg { width: 20px; height: 20px; fill: currentColor; }
.al-car-clear:hover, .al-car-clear:focus-visible { background: var(--al-surface); color: #fff; }
.al-car-clear:active { transform: scale(.94); }

/* ---- Quick tabs ---- */
.al-car-tabs {
  display: flex; gap: var(--al-s2); max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: var(--al-s3) var(--al-s3) 2px 2px;
}
.al-car-tabs::-webkit-scrollbar { display: none; }
.al-car-tab {
  flex: none; min-height: 48px; padding: 0 var(--al-s4); cursor: pointer;
  border-radius: var(--al-r-pill); border: 1px solid var(--al-line);
  background: var(--al-surface-2); color: var(--al-text-dim);
  font-weight: 700; font-size: .95rem;
  transition: transform var(--al-fast) var(--al-ease);
}
.al-car-tab:hover, .al-car-tab:focus-visible { color: #fff; border-color: var(--al-line-strong); }
.al-car-tab:active { transform: scale(.97); }
.al-car-tab.is-on { color: #fff; background: var(--al-grad); border-color: transparent; }

/* ---- Station rows ---- */
.al-car-list { display: flex; flex-direction: column; gap: var(--al-s3); padding: var(--al-s2) 0 var(--al-s4); }
.al-car-row {
  display: flex; align-items: center; gap: var(--al-s3);
  padding: var(--al-s3); cursor: pointer;
  border-radius: var(--al-r); border: 1px solid var(--al-line);
  background: var(--al-surface-2);
}
.al-car-row:hover { border-color: var(--al-line-strong); background: var(--al-elevated); }
.al-car-row:focus-within { border-color: var(--al-line-strong); }
.al-car-row.is-current { border-color: rgba(155,108,246,.55); background: var(--al-grad-soft); }
.al-car-row.is-unavailable { opacity: .62; cursor: default; }
.al-car-row-art {
  width: 64px; height: 64px; flex: none; object-fit: cover;
  border-radius: var(--al-r-sm); background: var(--al-bg-2);
}
.al-car-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-car-row-name { font-weight: 800; font-size: 1.08rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-car-row-meta { display: flex; align-items: center; font-size: .85rem; color: var(--al-text-dim); white-space: nowrap; overflow: hidden; }
.al-car-row.is-playing .al-car-row-status { color: var(--al-live); font-weight: 700; }
.al-car-row.is-unavailable .al-car-row-status { color: var(--al-err); }
.al-car-row-info::before { content: "·"; margin: 0 var(--al-s2); color: var(--al-text-faint); }
.al-car-row-play {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; min-width: 122px; padding: 0 var(--al-s4); cursor: pointer;
  border: 0; border-radius: var(--al-r-pill);
  background: var(--al-grad); color: #fff;
  font-weight: 800; font-size: 1rem; box-shadow: var(--al-shadow);
  transition: transform var(--al-fast) var(--al-ease);
}
.al-car-row-play svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.al-car-row-play:hover, .al-car-row-play:focus-visible { filter: brightness(1.08); }
.al-car-row-play:active { transform: scale(.96); }
.al-car-row-play[disabled] { background: var(--al-surface); color: var(--al-text-faint); box-shadow: none; cursor: not-allowed; }

/* Narrow phones: tighten the row so the play button keeps its full label
   ("Ascultă" / "În redare") without clipping or forcing the row to overflow. */
@media (max-width: 420px) {
  .al-car-row { gap: var(--al-s2); padding: var(--al-s2) var(--al-s3); }
  .al-car-row-art { width: 52px; height: 52px; }
  .al-car-row-name { font-size: 1rem; }
  .al-car-row-play {
    min-height: 48px; min-width: 96px; padding: 0 var(--al-s3); gap: 6px; font-size: .9rem;
  }
  .al-car-row-play svg { width: 18px; height: 18px; }
}

.al-car-empty {
  padding: var(--al-s6) var(--al-s4); text-align: center;
  color: var(--al-text-dim); font-weight: 600;
  border: 1px dashed var(--al-line-strong); border-radius: var(--al-r);
  background: var(--al-surface-2);
}
.al-car-empty .al-search-spin { margin: 0 auto; }
.al-car-hint { margin: 0; padding: 0 0 var(--al-s4); text-align: center; color: var(--al-text-faint); font-size: .8rem; }

/* ---- Current-station panel (compact fixed bottom bar on mobile) ----
   Mobile default is deliberately short: one info+transport bar plus a slim
   row of secondary toggles. Volume and the sleep timer live in popovers
   (absolute, opening upward) so they never add height to the panel or push
   the station list further down. */
.al-car-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  padding: var(--al-s2) clamp(12px, 3vw, 26px) calc(var(--al-s2) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(33,17,61,.94), rgba(22,10,40,.97));
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-top: 1px solid var(--al-line-strong);
}

/* Info + transport, one line. */
.al-car-bar { display: flex; align-items: center; gap: var(--al-s3); }
.al-car-now-link { flex: none; border-radius: var(--al-r-sm); overflow: hidden; }
.al-car-now-art { width: 48px; height: 48px; display: block; object-fit: cover; background: var(--al-bg-2); }
/* A real <button> on mobile (opens the big player) — reset to plain text. */
.al-car-now-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer; border-radius: var(--al-r-sm);
}
.al-car-now-info:focus-visible { outline: 2px solid var(--al-violet); outline-offset: 4px; }
.al-car-now-info[disabled] { cursor: default; }
.al-car-open-ico { width: 14px; height: 14px; flex: none; fill: var(--al-text-faint); }
.al-car-now-title { font-weight: 800; font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-car-now-track { font-size: .78rem; color: var(--al-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-car-now-track:empty { display: none; }
.al-car-staterow { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .78rem; color: var(--al-text-dim); }
.al-car-staterow .dotind { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--al-text-faint); }
body.al-state-playing .al-car-staterow .dotind { background: var(--al-live); box-shadow: 0 0 0 0 rgba(247,198,61,.7); animation: al-pulse 2s infinite; }
body.al-state-connecting .al-car-staterow .dotind,
body.al-state-buffering .al-car-staterow .dotind,
body.al-state-reconnecting .al-car-staterow .dotind { background: var(--al-warn); }
body.al-state-error .al-car-staterow .dotind,
body.al-state-offline .al-car-staterow .dotind,
body.al-state-unavailable .al-car-staterow .dotind { background: var(--al-err); }
/* On the tightest phones the colored status dot + the bitrate chip carry the
   state; the status word (which would otherwise truncate to "Se…") is shown
   only where there is room. */
.al-car-state { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 480px) { .al-car-state { display: block; } }
.al-car-fmt { flex: none; }
.al-car-staterow .al-chip { padding: 1px 8px; font-size: .72rem; line-height: 1.6; }

.al-car-transport { display: flex; align-items: center; gap: var(--al-s2); flex: none; }
.al-car-skip { width: 44px; height: 44px; flex: none; }
.al-car-skip svg { width: 24px; height: 24px; }
/* Main play/pause — always shows a solid Play or Pause glyph (never the thin
   spinner that reads as an "empty circle"). Pause shows for any active/intent
   state; Play otherwise. Icons are forced white and centered. */
.al-car-transport .al-play-main { width: 56px; height: 56px; flex: none; color: #fff; }
.al-car-transport .al-play-main svg { width: 26px; height: 26px; fill: #fff; }
.al-car-play .ic-spin { display: none !important; }
.al-car-play .ic-play { display: block; }
.al-car-play .ic-pause { display: none; }
body.al-state-playing .al-car-play .ic-play,
body.al-state-connecting .al-car-play .ic-play,
body.al-state-buffering .al-car-play .ic-play,
body.al-state-reconnecting .al-car-play .ic-play { display: none; }
body.al-state-playing .al-car-play .ic-pause,
body.al-state-connecting .al-car-play .ic-pause,
body.al-state-buffering .al-car-play .ic-pause,
body.al-state-reconnecting .al-car-play .ic-pause { display: block; }

/* Secondary row: fav + Volum / Timer toggles (small, low, out of the way). */
.al-car-secondary { display: flex; align-items: center; gap: var(--al-s2); margin-top: var(--al-s2); }
.al-car-mini {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  min-height: 36px; padding: 0 var(--al-s3);
  border-radius: var(--al-r-pill); border: 1px solid var(--al-line);
  background: var(--al-surface-2); color: var(--al-text-dim);
  font: inherit; font-weight: 700; font-size: .82rem;
  transition: transform var(--al-fast) var(--al-ease);
}
.al-car-mini svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.al-car-mini:hover, .al-car-mini:focus-visible { color: #fff; border-color: var(--al-line-strong); }
.al-car-mini:active { transform: scale(.96); }
.al-car-mini[aria-expanded="true"] { color: #fff; border-color: var(--al-violet); background: var(--al-grad-soft); }
.al-car-mini.al-fav-now.is-on { color: var(--al-coral); border-color: rgba(200,75,224,.5); }
.al-car-mini.al-fav-now.is-on svg { fill: var(--al-coral); }
#al-car-timer-btn.is-on { color: var(--al-amber); border-color: rgba(247,198,61,.5); }
#al-car-timer-btn.is-on svg { fill: var(--al-amber); }

/* Popovers — float above the bar; add no height to the panel itself. */
.al-car-pop {
  position: absolute; left: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px);
  bottom: calc(100% + 8px); z-index: 5;
  padding: var(--al-s3); border-radius: var(--al-r);
  border: 1px solid var(--al-line-strong); background: var(--al-elevated);
  box-shadow: var(--al-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--al-fast) var(--al-ease), transform var(--al-fast) var(--al-ease), visibility var(--al-fast);
}
.al-car-pop.is-open { opacity: 1; visibility: visible; transform: none; }
.al-car-vol { display: flex; align-items: center; gap: var(--al-s3); }
.al-car-vol .al-mute-btn { width: 44px; height: 44px; flex: none; }
.al-car-vol .al-vol-range { flex: 1; }
.al-car-sleep-status { display: flex; align-items: center; justify-content: space-between; gap: var(--al-s3); margin-top: var(--al-s2); font-size: .85rem; color: var(--al-text-dim); }

@media (prefers-reduced-motion: reduce) {
  .al-car-pop { transition: none; }
}

/* ---- Optional expanded player (mobile) ----
   The big single-station view NEVER opens by itself: only the expand chevron
   or a tap on the compact bar's info area opens it, and "Închide" /
   "Înapoi la listă" / Esc return to the list with playback untouched.
   Same DOM as the compact bar — .is-expanded only restyles it, so every
   shared control (play, skips, fav, volume, sleep) keeps its sync for free. */
.al-car-xhead, .al-car-xhint, .al-car-back { display: none; }

@media (max-width: 819.98px) {
  /* Compact mini-player = ONE short row (logo · name · "În redare" ·
     prev/play/next). Favorite, Volum, Timer and their popovers + the song
     line live ONLY in the expanded player (tap the station name to open it),
     so the bar stays ~72px and never covers the station list. */
  .al-car-player:not(.is-expanded) .al-car-secondary,
  .al-car-player:not(.is-expanded) .al-car-pop,
  .al-car-player:not(.is-expanded) .al-car-now-track,
  .al-car-player:not(.is-expanded) .al-car-fmt { display: none; }
  /* Show the status word ("În redare" / "Se conectează…") in place of the
     bitrate chip — matches the reference mini-player. */
  .al-car-player:not(.is-expanded) .al-car-state { display: block; }
  .al-car-player:not(.is-expanded) { padding-top: var(--al-s2); padding-bottom: calc(var(--al-s2) + env(safe-area-inset-bottom, 0px)); }
  .al-car-player:not(.is-expanded) .al-car-now-art { width: 44px; height: 44px; }
  .al-car-player:not(.is-expanded) .al-car-transport .al-play-main { width: 52px; height: 52px; }
  .al-car-player:not(.is-expanded) .al-car-skip { width: 40px; height: 40px; }
  .al-car-player:not(.is-expanded) .al-car-skip svg { width: 22px; height: 22px; }

  .al-car-player.is-expanded {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; flex-direction: column; gap: var(--al-s4);
    overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--al-s4) + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 32px)
             calc(var(--al-s4) + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    background: linear-gradient(180deg, rgba(33,17,61,.98), rgba(22,10,40,1));
  }
  .al-car-player.is-expanded .al-car-xhead {
    display: flex; align-items: center; justify-content: space-between; gap: var(--al-s3);
  }
  .al-car-xhead-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .al-car-xhead-text strong { font-size: 1.15rem; color: #fff; letter-spacing: -.01em; }
  .al-car-xhead-text span { font-size: .85rem; color: var(--al-text-dim); }

  /* Bar becomes a centered column: big art, big title, status. margin-top
     auto here + on the hint centers the whole control cluster vertically. */
  .al-car-player.is-expanded .al-car-bar {
    flex-direction: column; align-items: center; text-align: center;
    gap: var(--al-s4); margin-top: auto;
  }
  .al-car-player.is-expanded .al-car-now-link { border-radius: var(--al-r-lg); box-shadow: var(--al-shadow-lg); }
  .al-car-player.is-expanded .al-car-now-art { width: min(56vw, 40vh, 240px); height: min(56vw, 40vh, 240px); }
  .al-car-player.is-expanded .al-car-now-info { align-items: center; text-align: center; gap: 6px; cursor: default; }
  .al-car-player.is-expanded .al-car-now-title { font-size: 1.45rem; white-space: normal; }
  .al-car-player.is-expanded .al-car-staterow { justify-content: center; font-size: .9rem; }
  .al-car-player.is-expanded .al-car-state { display: block; }
  .al-car-player.is-expanded .al-car-open-ico { display: none; }

  /* Big, comfortable transport. */
  .al-car-player.is-expanded .al-car-transport { justify-content: center; gap: var(--al-s5); }
  .al-car-player.is-expanded .al-car-transport .al-play-main { width: 76px; height: 76px; }
  .al-car-player.is-expanded .al-car-transport .al-play-main svg { width: 32px; height: 32px; }
  .al-car-player.is-expanded .al-car-skip { width: 56px; height: 56px; }
  .al-car-player.is-expanded .al-car-skip svg { width: 28px; height: 28px; }

  /* Volum + Timer live inline here (like the desktop side panel); the
     compact-bar toggles disappear. */
  .al-car-player.is-expanded .al-car-secondary { justify-content: center; }
  .al-car-player.is-expanded #al-car-vol-btn,
  .al-car-player.is-expanded #al-car-timer-btn { display: none; }
  .al-car-player.is-expanded .al-car-pop {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: var(--al-surface-2); border-color: var(--al-line);
    width: min(100%, 520px); align-self: center;
  }

  .al-car-player.is-expanded .al-car-xhint { display: block; margin-top: auto; padding: 0; }
  .al-car-player.is-expanded .al-car-back {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--al-s2);
    min-height: 52px; padding: 0 var(--al-s4); cursor: pointer;
    border-radius: var(--al-r-pill); border: 1px solid var(--al-line-strong);
    background: var(--al-surface-2); color: #fff;
    font: inherit; font-weight: 800; font-size: 1rem;
    transition: transform var(--al-fast) var(--al-ease), background var(--al-fast) var(--al-ease);
  }
  .al-car-back svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
  .al-car-back:hover, .al-car-back:focus-visible { background: var(--al-elevated); border-color: var(--al-violet); }
  .al-car-back:active { transform: scale(.98); }
}

/* ---- Wide screens: two columns — picker left, player panel right.
   820px keeps tablet portrait (768px) on the bottom-player layout while
   landscape phones (~844px) and laptops get the side-by-side split. On the
   roomy side panel, Volum and Timer are shown inline (no toggles needed). ---- */
@media (min-width: 820px) {
  .al-car-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--al-s5); align-items: start;
  }
  /* Nothing was ever played → no panel; center a single calm column. */
  body:not(.al-has-player) .al-car-inner { display: block; max-width: 760px; }
  .al-car-picker { padding-bottom: var(--al-s6); }
  .al-car-player {
    position: sticky; top: var(--al-s4); left: auto; right: auto; bottom: auto; z-index: 30;
    margin-top: var(--al-s4);
    padding: var(--al-s4);
    border: 1px solid var(--al-line-strong); border-radius: var(--al-r-lg);
    background: linear-gradient(180deg, rgba(33,17,61,.92), rgba(22,10,40,.96));
    box-shadow: var(--al-shadow-lg);
  }
  .al-car-bar { align-items: flex-start; }
  .al-car-now-art { width: 64px; height: 64px; }
  /* Bigger, comfortable transport on desktop. */
  .al-car-transport { width: 100%; justify-content: center; gap: var(--al-s5); margin-top: var(--al-s4); order: 3; }
  .al-car-bar { flex-wrap: wrap; }
  .al-car-transport .al-play-main { width: 64px; height: 64px; }
  .al-car-transport .al-play-main svg { width: 28px; height: 28px; }
  .al-car-skip { width: 52px; height: 52px; }
  /* Fav stays a pill; Volum/Timer toggles are hidden — controls shown inline.
     The expand affordance goes too: the side panel already IS the big player
     (CarMode also disables the info button here). */
  #al-car-vol-btn, #al-car-timer-btn { display: none; }
  .al-car-open-ico { display: none; }
  .al-car-secondary { margin-top: var(--al-s4); }
  /* Volume + sleep timer: static, always visible on the side panel. */
  .al-car-pop {
    position: static; opacity: 1; visibility: visible; transform: none;
    margin-top: var(--al-s3); box-shadow: none; background: var(--al-surface-2);
    border-color: var(--al-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.al-state-playing .al-car-staterow .dotind { animation: none; }
}