/* ============================================================
   0PROMORECORDS — SHARED DESIGN SYSTEM
   NEON × XO Brutalism Fusion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;0,900;1,900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* === TOKENS === */
:root {
  --bg:       #0B0B0B;
  --bg2:      #131313;
  --bg3:      #1A1A1A;
  --red:      #D62828;
  --white:    #F5F5F5;
  --offwhite: #EBEBEB;
  --steel:    #6B6B6B;
  --border:   rgba(245,245,245,0.06);
  --border-l: rgba(11,11,11,0.10);
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
}

/* === BASE === */
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  overflow-x: hidden;
  padding-bottom: 72px;
}

body.page-loading { opacity: 0; }
body { transition: opacity 0.5s var(--ease); }

a { color: inherit; text-decoration: none; }
button { font-family: 'IBM Plex Mono', monospace; cursor: pointer; }

/* Touch: remove 300ms tap delay on all interactive elements */
a, button, [role="button"], input, select, textarea { touch-action: manipulation; }

/* === NAV === */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 500;
  background: linear-gradient(180deg, rgba(8,8,8,0.82) 0%, rgba(8,8,8,0.0) 100%);
  transition: background 0.5s var(--ease), border-bottom 0.5s ease, backdrop-filter 0.5s ease;
}
.nav.scrolled {
  background: rgba(11,11,11,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.nav.light-section {
  background: rgba(235,235,235,0.96);
  border-bottom: 1px solid var(--border-l);
  backdrop-filter: blur(16px);
}
.nav-left { display: flex; align-items: center; gap: 40px; }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-img { height: 36px; width: auto; display: block; }
.nav-brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 20px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white); transition: color 0.3s ease;
}
.nav.light-section .nav-brand { color: var(--bg); }
.nav-routes { display: flex; gap: 28px; list-style: none; }
.nav-routes a {
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(245,245,245,0.45); transition: color 0.2s ease;
}
.nav.light-section .nav-routes a { color: rgba(11,11,11,0.45); }
.nav-routes a:hover, .nav-routes a.active { color: var(--white); }
.nav.light-section .nav-routes a:hover,
.nav.light-section .nav-routes a.active { color: var(--bg); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-signal {
  display: flex; align-items: center; gap: 7px;
  font-size: 9px; letter-spacing: 0.15em; color: var(--steel); text-transform: uppercase;
}
.nav-signal-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
.btn-nav {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid rgba(245,245,245,0.25);
  background: transparent; color: var(--white); transition: all 0.25s ease;
}
.nav.light-section .btn-nav { border-color: rgba(11,11,11,0.25); color: var(--bg); }
.btn-nav:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* === HERO === */
.hero {
  height: 100vh; min-height: 680px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-slide.active { opacity: 1; }
.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06); transition: transform 10s ease;
}
.hero-slide.active .hero-slide-bg { transform: scale(1); }
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,
    rgba(11,11,11,0.95) 0%,
    rgba(11,11,11,0.78) 28%,
    rgba(11,11,11,0.52) 55%,
    rgba(11,11,11,0.22) 80%,
    rgba(11,11,11,0.10) 100%);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(11,11,11,0.65) 100%);
}
.hero-content {
  position: relative; z-index: 4;
  padding: 0 60px 80px; width: 100%;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--red); color: var(--red);
  font-size: 9px; letter-spacing: 0.2em; padding: 5px 12px; text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-badge-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--red);
  animation: pulse 1.4s ease-in-out infinite;
}
.hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; text-transform: uppercase; line-height: 0.87;
  letter-spacing: -0.025em; color: var(--white);
  font-size: clamp(60px, 11vw, 152px);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}
.hero-title .accent { color: var(--red); }
.hero-sub {
  margin-top: 20px; font-size: 12px;
  letter-spacing: 0.13em; color: rgba(245,245,245,0.88); text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  font-weight: 400;
}
.hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 24px; }
.hero-play-btn {
  display: flex; align-items: center; gap: 14px; cursor: pointer; text-decoration: none;
}
.hero-play-circle {
  width: 52px; height: 52px; border: 1.5px solid rgba(245,245,245,0.7);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.hero-play-btn:hover .hero-play-circle { background: var(--white); }
.hero-play-btn:hover .hero-play-circle svg path { fill: var(--bg); }
.hero-play-label {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(245,245,245,0.90);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hero-dots {
  position: absolute; bottom: 36px; right: 60px;
  display: flex; gap: 8px; z-index: 5;
}
.hero-dot {
  height: 2px; width: 24px; background: rgba(245,245,245,0.2);
  cursor: pointer; transition: all 0.35s var(--ease);
}
.hero-dot.active { width: 48px; background: var(--red); }

/* === HERO ENTER CTA === */
.hero-enter-cta {
  position: absolute; bottom: 44px; left: 60px;
  z-index: 5;
}
.hero-enter-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,245,245,0.80); text-decoration: none;
  transition: color 0.3s var(--ease);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hero-enter-link:hover { color: var(--white); }
.hero-enter-link svg { opacity: 0.75; transition: opacity 0.3s var(--ease); }
.hero-enter-link:hover svg { opacity: 1; }
@media (max-width: 600px) { .hero-enter-cta { left: 20px; bottom: 28px; } }

/* === HERO BRAND IMAGE — decorative background layer, sits below overlay === */
.hero-brand-picture {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.hero-brand-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  display: block;
  opacity: 0.38;
  animation: heroBrandFadeIn 2.4s 0.3s var(--ease) both;
}
@keyframes heroBrandFadeIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 0.38; transform: scale(1); }
}

/* === TICKER TAPE === */
.ticker {
  height: 36px; background: var(--red);
  overflow: hidden; display: flex; align-items: center;
}
.ticker-inner {
  display: flex; white-space: nowrap;
  animation: ticker-scroll 35s linear infinite;
}
.ticker-item {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,245,245,0.9); padding: 0 32px;
}
.ticker-sep { color: rgba(255,255,255,0.35); }

/* === SECTIONS === */
.section { padding: 72px 0; }
.section-dark { background: var(--bg); }
.section-mid  { background: var(--bg2); }
.section-light { background: var(--offwhite); color: var(--bg); }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px 28px;
}
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 1; font-size: clamp(26px, 3.5vw, 48px);
}
.section-dark .section-title, .section-mid .section-title { color: var(--white); }
.section-light .section-title { color: var(--bg); }
.section-eyebrow {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 8px;
}
.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow {
  width: 36px; height: 36px; background: transparent; border: none; outline: none;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.section-dark .carousel-arrow, .section-mid .carousel-arrow { border: 1px solid var(--border); color: var(--steel); }
.section-light .carousel-arrow { border: 1px solid var(--border-l); color: rgba(11,11,11,0.4); }
.carousel-arrow:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* === CAROUSEL TRACK === */
.carousel-track {
  display: flex; gap: 16px; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth; padding: 0 40px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

/* === TRACK CARD === */
.track-card {
  flex: 0 0 220px; cursor: pointer;
  transition: transform 0.35s var(--ease);
}
.track-card:hover { transform: translateY(-5px); }
.track-card-art {
  width: 100%; aspect-ratio: 1;
  position: relative; overflow: hidden;
}
.track-card-art-inner {
  width: 100%; height: 100%;
  transition: transform 0.5s var(--ease);
}
.track-card:hover .track-card-art-inner { transform: scale(1.07); }
.track-card-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(245,245,245,0.55); color: var(--white);
  padding: 3px 8px; background: rgba(0,0,0,0.55);
}
.track-card-play {
  position: absolute; inset: 0;
  background: rgba(11,11,11,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.track-card:hover .track-card-play { opacity: 1; }
.track-play-circle {
  width: 44px; height: 44px;
  border: 1.5px solid var(--white);
  display: flex; align-items: center; justify-content: center;
}
.track-card-info { padding: 12px 0 0; }
.track-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 16px; text-transform: uppercase;
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.section-dark .track-card-title, .section-mid .track-card-title { color: var(--white); }
.section-light .track-card-title { color: var(--bg); }
.track-card:hover .track-card-title { color: var(--red); }
.track-card-artist {
  font-size: 9px; letter-spacing: 0.07em; color: var(--steel);
  text-transform: uppercase; margin-top: 3px;
}

/* === ARTIST CARD === */
.artist-card {
  flex: 0 0 180px; cursor: pointer; text-align: center;
  transition: transform 0.35s var(--ease);
}
.artist-card:hover { transform: translateY(-5px); }
.artist-card-photo {
  width: 100%; aspect-ratio: 1;
  overflow: hidden; position: relative;
}
.artist-card-photo-inner {
  width: 100%; height: 100%;
  transition: transform 0.5s var(--ease);
}
.artist-card:hover .artist-card-photo-inner { transform: scale(1.07); }
.artist-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px; text-transform: uppercase;
  padding: 10px 0 2px; transition: color 0.2s ease;
}
.section-dark .artist-card-name, .section-mid .artist-card-name { color: var(--white); }
.section-light .artist-card-name { color: var(--bg); }
.artist-card:hover .artist-card-name { color: var(--red); }
.artist-card-genre {
  font-size: 9px; letter-spacing: 0.1em; color: var(--steel); text-transform: uppercase;
}

/* === FEATURED (CINEMATIC CARD) === */
.featured-block {
  margin: 0 40px; position: relative; height: 520px;
  overflow: hidden; cursor: pointer;
}
.featured-bg {
  position: absolute; inset: 0;
  transition: transform 0.7s var(--ease);
}
.featured-block:hover .featured-bg { transform: scale(1.03); }
.featured-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,11,0.94) 0%, rgba(11,11,11,0.2) 60%, transparent 100%);
}
.featured-content {
  position: absolute; bottom: 48px; left: 48px; right: 48px;
}
.featured-label {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 12px;
}
.featured-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; text-transform: uppercase; line-height: 0.87;
  letter-spacing: -0.025em; color: var(--white);
  font-size: clamp(48px, 7vw, 96px);
}
.featured-line {
  width: 56px; height: 2px; background: var(--red); margin-top: 16px;
  transition: width 0.5s var(--ease);
}
.featured-block:hover .featured-line { width: 120px; }
.featured-meta {
  margin-top: 14px; font-size: 9px;
  letter-spacing: 0.12em; color: rgba(245,245,245,0.75); text-transform: uppercase;
}

/* === DISTRICT GRID === */
.districts-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 0 40px;
  border-top: 1px solid var(--border-l);
}
.district-block {
  padding: 32px 24px; cursor: pointer;
  border-right: 1px solid var(--border-l);
  position: relative; overflow: hidden;
  transition: background 0.3s ease; text-decoration: none;
}
.district-block:last-child { border-right: none; }
.district-block::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--red); transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}
.district-block:hover::after { transform: scaleX(1); }
.district-block:hover { background: rgba(11,11,11,0.04); }
.district-code {
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 12px;
}
.district-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 22px; text-transform: uppercase;
  color: var(--bg); line-height: 1;
}
.district-desc {
  font-size: 9px; color: var(--steel);
  margin-top: 8px; line-height: 1.7; letter-spacing: 0.04em;
}
.district-arrow {
  position: absolute; bottom: 20px; right: 20px;
  color: var(--red); font-size: 18px;
  opacity: 0; transform: translateX(-6px);
  transition: all 0.3s ease;
}
.district-block:hover .district-arrow { opacity: 1; transform: translateX(0); }

/* === BROADCAST LOG === */
.broadcast-log { padding: 0 40px; }
.broadcast-row {
  display: grid;
  grid-template-columns: 100px 72px 1fr auto;
  align-items: center; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.broadcast-row.visible { opacity: 1; transform: translateY(0); }
.broadcast-time { font-size: 9px; letter-spacing: 0.1em; color: var(--steel); }
.broadcast-badge {
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid;
}
.broadcast-badge.track  { border-color: var(--red);   color: var(--red); }
.broadcast-badge.join   { border-color: #48bb78; color: #48bb78; }
.broadcast-badge.live   { border-color: #ed8936; color: #ed8936; }
.broadcast-badge.collab { border-color: #667eea; color: #667eea; }
.broadcast-badge.system { border-color: var(--steel); color: var(--steel); }
.broadcast-text {
  font-size: 11px; letter-spacing: 0.04em;
  color: rgba(245,245,245,0.80);
}
.broadcast-text strong { color: var(--white); font-weight: 600; }
.broadcast-action {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--steel); transition: color 0.2s ease; cursor: pointer;
}
.broadcast-action:hover { color: var(--white); }

/* === JOIN / NEWSLETTER SECTION === */
.join-section {
  position: relative; min-height: 440px;
  overflow: hidden; display: flex; align-items: center;
}
.join-bg { position: absolute; inset: 0; }
.join-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,11,11,0.88) 0%, rgba(11,11,11,0.55) 65%, rgba(11,11,11,0.12) 100%);
}
.join-content { position: relative; z-index: 2; padding: 72px 60px; max-width: 640px; }
.join-label {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
}
.join-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; text-transform: uppercase; line-height: 0.88;
  letter-spacing: -0.025em; color: var(--white);
  font-size: clamp(40px, 6vw, 80px); margin-bottom: 28px;
}
.join-form {
  display: flex; align-items: center;
  border-bottom: 1.5px solid rgba(245,245,245,0.25);
  padding-bottom: 10px; max-width: 460px;
  transition: border-color 0.3s ease;
}
.join-form:focus-within { border-bottom-color: var(--white); }
.join-form input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--white); font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em;
}
.join-form input::placeholder {
  color: rgba(245,245,245,0.55); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.15em;
}
.join-submit {
  background: transparent; border: none; color: var(--white);
  font-size: 22px; padding: 0 6px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.join-submit:hover { transform: translateX(5px); color: var(--red); }
.join-success {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--white);
  padding: 14px 0;
  opacity: 0.8;
}

/* === FOOTER === */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 60px 40px 40px;
}
.footer-grid {
  display: grid; grid-template-columns: 260px 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 28px; text-transform: uppercase; margin-bottom: 14px;
}
.footer-logo-img { height: 44px; width: auto; display: block; margin-bottom: 14px; }
.footer-tagline { font-size: 10px; color: var(--steel); line-height: 1.9; letter-spacing: 0.04em; }
.footer-col-title {
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 11px; color: rgba(245,245,245,0.4);
  letter-spacing: 0.06em; transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 24px;
}
.footer-copy { font-size: 9px; color: var(--steel); letter-spacing: 0.08em; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--steel);
  transition: all 0.2s ease;
}
.footer-social a:hover { border-color: var(--red); color: var(--red); }

/* === PLAYER BAR === */
/* player-bar base — overridden below near line 1270 with full layout */
.player-art {
  width: 44px; height: 44px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.player-details { min-width: 0; }
.player-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-artist {
  font-size: 9px; color: var(--steel);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
}
.player-center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; }
.player-btns { display: flex; align-items: center; gap: 20px; }
.player-btn {
  background: transparent; border: none; color: var(--steel);
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  transition: color 0.2s ease;
}
.player-btn:hover { color: var(--white); }
.player-btn.active { color: var(--white); }
.player-btn-play {
  width: 34px; height: 34px; border: 1px solid var(--white);
  background: transparent; display: flex; align-items: center; justify-content: center;
  color: var(--white); transition: all 0.25s ease;
}
.player-btn-play:hover { background: var(--white); color: var(--bg); }
.player-progress-wrap { width: 100%; position: relative; height: 2px; cursor: pointer; }
.player-progress-bg { position: absolute; inset: 0; background: rgba(245,245,245,0.1); }
.player-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--white); width: 35%; transition: width 0.2s linear; }
.player-progress-handle {
  position: absolute; top: 50%; left: 35%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; background: var(--white);
}
.player-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 24px; }
.player-waveform { display: flex; align-items: center; gap: 2px; height: 22px; }
.waveform-bar { width: 2px; background: var(--red); animation: wave 1.3s ease-in-out infinite; }
.waveform-bar:nth-child(1) { height: 5px; animation-delay: 0s; }
.waveform-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.waveform-bar:nth-child(3) { height: 18px; animation-delay: 0.3s; }
.waveform-bar:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.waveform-bar:nth-child(5) { height: 8px; animation-delay: 0.6s; }
.waveform-bar:nth-child(6) { height: 16px; animation-delay: 0.75s; }
.waveform-bar:nth-child(7) { height: 6px; animation-delay: 0.9s; }
.player-vol { display: flex; align-items: center; gap: 8px; }
.player-vol-label { font-size: 8px; letter-spacing: 0.12em; color: var(--steel); text-transform: uppercase; }
.player-vol-bar { width: 64px; height: 2px; background: rgba(245,245,245,0.12); position: relative; cursor: pointer; }
.player-vol-fill { height: 100%; background: var(--steel); width: 70%; }

/* === ART PLACEHOLDER FILLS === */
.art-red    { background: linear-gradient(135deg, #200808, #4a0e0e); }
.art-blue   { background: linear-gradient(135deg, #080820, #0e0e4a); }
.art-green  { background: linear-gradient(135deg, #082008, #0e4a0e); }
.art-amber  { background: linear-gradient(135deg, #201208, #4a2a0e); }
.art-purple { background: linear-gradient(135deg, #140820, #2e0e4a); }
.art-teal   { background: linear-gradient(135deg, #081820, #0e3a4a); }
.art-mono   { background: linear-gradient(135deg, #161616, #2a2a2a); }
.art-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 32px;
  color: rgba(245,245,245,0.1); text-transform: uppercase; letter-spacing: -0.02em;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}

/* === SCROLL ANIMATION UTILITY === */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* === KEYFRAMES === */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: 20px; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === ART COLOR FIX — VIBRANT FILLS === */
.art-red    { background: linear-gradient(135deg, #5a0808, #c41818); }
.art-blue   { background: linear-gradient(135deg, #08085a, #1818c4); }
.art-green  { background: linear-gradient(135deg, #084a08, #12a012); }
.art-amber  { background: linear-gradient(135deg, #5a2800, #c47800); }
.art-purple { background: linear-gradient(135deg, #28085a, #6818c4); }

.art-teal   { background: linear-gradient(135deg, #08404a, #1898aa); }
.art-mono   { background: linear-gradient(135deg, #1e1e1e, #3a3a3a); }
.art-label  { color: rgba(245,245,245,0.28); }

/* === STATS STRIP === */
.stats-strip {
  background: var(--bg3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-strip-inner {
  display: flex; align-items: stretch;
  height: 68px; padding: 0 40px;
}
.stat-item {
  display: flex; align-items: center; gap: 14px;
  flex: 1; padding: 0 24px;
  border-right: 1px solid var(--border);
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 30px;
  color: var(--white); letter-spacing: -0.02em; line-height: 1;
  transition: color 0.3s ease;
}
.stat-num.counting { color: var(--red); }
.stat-label {
  font-size: 8px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel);
}
.stat-live .stat-num { color: var(--red); }
.stat-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: pulse 1.8s ease-in-out infinite; flex-shrink: 0;
}

/* === SEARCH BUTTON + OVERLAY === */
.search-btn {
  background: transparent; border: none; color: var(--steel);
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 6px; transition: color 0.2s ease;
  font-size: 9px; letter-spacing: 0.12em; font-family: 'IBM Plex Mono', monospace;
}
.search-btn:hover { color: var(--white); }
.nav.light-section .search-btn { color: rgba(11,11,11,0.4); }
.nav.light-section .search-btn:hover { color: var(--bg); }

.search-overlay {
  position: fixed; inset: 0;
  background: rgba(11,11,11,0.98);
  z-index: 900;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(24px);
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-close {
  position: absolute; top: 28px; right: 40px;
  background: transparent; border: none;
  color: var(--steel); cursor: pointer;
  font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; transition: color 0.2s ease;
  font-family: 'IBM Plex Mono', monospace;
}
.search-close:hover { color: var(--white); }
.search-inner { width: 100%; max-width: 800px; padding: 0 40px; }
.search-eyebrow {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 20px;
}
.search-field {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 2px solid rgba(245,245,245,0.2);
  padding-bottom: 14px;
  transition: border-color 0.3s ease;
}
.search-field:focus-within { border-bottom-color: var(--white); }
.search-field svg { flex-shrink: 0; color: var(--steel); }
.search-field input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: clamp(36px, 6vw, 64px);
  color: var(--white); text-transform: uppercase; letter-spacing: -0.01em;
}
.search-field input::placeholder { color: rgba(245,245,245,0.12); }

.search-genre-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px;
}
.sg-pill {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 7px 18px; border: 1px solid var(--border);
  background: transparent; color: var(--steel);
  cursor: pointer; transition: all 0.2s ease;
  font-family: 'IBM Plex Mono', monospace;
}
.sg-pill:hover, .sg-pill.active {
  border-color: var(--red); color: var(--white); background: var(--red);
}
.search-trending { margin-top: 40px; }
.search-trend-label {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 14px;
}
.search-trend-tags { display: flex; gap: 16px; flex-wrap: wrap; }
.search-trend-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 22px; text-transform: uppercase;
  color: rgba(245,245,245,0.2); cursor: pointer; transition: color 0.2s ease;
  background: none; border: none;
}
.search-trend-tag:hover { color: var(--white); }

/* === GENRE FILTER PILLS (carousel sections) === */
.section-filters {
  display: flex; gap: 8px; padding: 0 40px 24px;
  overflow-x: auto; scrollbar-width: none;
}
.section-filters::-webkit-scrollbar { display: none; }
.fp {
  font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 5px 14px; border: 1px solid; background: transparent;
  white-space: nowrap; cursor: pointer; transition: all 0.2s ease;
  flex-shrink: 0; font-family: 'IBM Plex Mono', monospace;
}
.section-light .fp { border-color: rgba(11,11,11,0.15); color: rgba(11,11,11,0.45); }
.section-light .fp:hover, .section-light .fp.active { border-color: var(--red); color: var(--red); }
.section-dark .fp, .section-mid .fp { border-color: var(--border); color: var(--steel); }
.section-dark .fp:hover, .section-mid .fp:hover,
.section-dark .fp.active, .section-mid .fp.active { border-color: var(--red); color: var(--white); background: var(--red); }

/* === TRACK CARD CITY TAG === */
.track-card-city {
  font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red); margin-top: 2px;
}

/* === HERO SLIDE COUNTER === */
.hero-counter {
  position: absolute; bottom: 40px; left: 60px;
  font-size: 9px; letter-spacing: 0.15em;
  color: rgba(245,245,245,0.3); z-index: 2;
}
.hero-counter-num { color: var(--white); font-weight: 600; }



/* ═══════════════════════════════════════════════════════════════
   MVP → PRODUCT — SITE-WIDE POLISH
   ═══════════════════════════════════════════════════════════════ */

/* ── Challenge cards: always white text on their dark card body ── */
.challenge-title        { color: var(--white); }
.challenge-stat-val     { color: var(--white); }
.challenge-stat-label   { color: var(--steel); }
.challenge-body         { background: var(--bg2); }

/* ── Section eyebrow: red accent dash before label ── */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.section-eyebrow::before {
  content: ''; display: block;
  width: 18px; height: 1px; background: var(--red); flex-shrink: 0;
}

/* ── Better section separator rhythm ── */
.section-mid  { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-light { border-top: 1px solid rgba(11,11,11,0.08); }

/* ── Collab card body always readable ── */
.collab-card-body { background: var(--bg2); }
.collab-card-title { color: var(--white); }
.collab-card-desc  { color: rgba(245,245,245,0.55); }

/* ── Player bar track art: vibrant red instead of near-black ── */
.player-art > div {
  background: linear-gradient(135deg, #5a0808, #c41818) !important;
}

/* ── Radio / QUEUE section-light: track titles must be dark on light bg ── */
.section-light .track-card-title { color: var(--bg); }
.section-light .track-card-artist { color: rgba(11,11,11,0.45); }

/* ── Featured block minimum height ── */
.featured-block { min-height: 360px; }

/* ── Broadcast text: bold parts visible ── */
.broadcast-text strong { color: var(--white); }

/* ── Form inputs accessible focus ring ── */
button:focus-visible,
input:focus-visible,
textarea:focus-visible { outline: 1.5px solid var(--red); outline-offset: 2px; }

/* ── Better nav scrolled state (all pages) ── */
.nav.scrolled {
  background: rgba(11,11,11,0.97) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
}

/* ── District label badge (bottom-left corner of sections) ── */
.district-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 6px;
}
.district-badge::before {
  content: ''; display: block;
  width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}

/* ── Section-light track card play button ── */
.section-light .track-card-play { background: rgba(11,11,11,0.65); }

/* ── Playlist art on community page ── */
.playlist-art {
  width: 36px; height: 36px; flex-shrink: 0;
}
.playlist-art.art-red    { background: linear-gradient(135deg,#5a0808,#c41818); }
.playlist-art.art-blue   { background: linear-gradient(135deg,#08085a,#1818c4); }
.playlist-art.art-green  { background: linear-gradient(135deg,#084a08,#12a012); }
.playlist-art.art-purple { background: linear-gradient(135deg,#28085a,#6818c4); }

/* ── Section-light filter/search bar ── */
.section-light .fp.active { background: var(--bg) !important; color: var(--white) !important; border-color: var(--bg) !important; }
.section-light .fp        { border-color: rgba(11,11,11,0.25); color: rgba(11,11,11,0.6); }
.section-light .fp:hover  { border-color: var(--bg); color: var(--bg); }

/* ── Better hero badge ── */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(214,40,40,0.5);
  color: var(--red); font-size: 9px; letter-spacing: 0.2em;
  padding: 5px 12px; text-transform: uppercase;
  background: rgba(214,40,40,0.06);
}

/* ── Join section CTA block ── */
.join-cta-block {
  background: var(--red); padding: 80px 60px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
}
.join-cta-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(32px, 5vw, 64px); text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.02em; color: var(--white);
}
.join-cta-sub {
  font-size: 10px; letter-spacing: 0.1em; color: rgba(245,245,245,0.65);
  text-transform: uppercase; margin-top: 12px; line-height: 1.8;
}
.btn-join-primary {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 16px 32px;
  background: var(--white); color: var(--bg); border: none; cursor: pointer;
  white-space: nowrap; transition: all 0.25s ease; text-decoration: none; display: inline-block;
}
.btn-join-primary:hover { background: var(--bg); color: var(--white); }

/* ── Stats strip: live dot pulse ── */
.stat-live-dot { animation: pulse 1.4s ease-in-out infinite; }

/* ── Track card hover: red left border strip ── */
.track-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 0; background: var(--red);
  transition: width 0.25s var(--ease); z-index: 1;
}
.track-card:hover::before { width: 3px; }
.track-card { position: relative; }

/* ── Better section-head alignment ── */
.section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 40px; margin-bottom: 32px;
}

/* ── Radio queue cards: ensure legibility on light bg ── */
.section-light .track-card-badge {
  background: rgba(11,11,11,0.7); color: var(--white);
}

/* ── Collab featured block: always has overlay for text legibility ── */
.featured-gradient {
  background: linear-gradient(to right, rgba(11,11,11,0.97) 0%, rgba(11,11,11,0.7) 55%, transparent 100%);
}

/* ── Thread vote button: number stays readable ── */
.thread-action span { color: inherit; }

/* ── Section title size consistency ── */
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: clamp(28px, 4vw, 48px);
  text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em;
}

/* ── Ticker: slightly taller for readability ── */
.ticker { height: 40px; }
.ticker-inner { line-height: 40px; font-size: 9px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Full breakpoint system
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger / Mobile Nav ── */
.nav-menu-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer; padding: 4px;
}
.nav-menu-btn span {
  display: block; width: 22px; height: 1.5px;
  background: var(--white); transition: all 0.3s var(--ease);
}
.nav.light-section .nav-menu-btn span { background: var(--bg); }
.nav-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-menu {
  display: none;
  position: fixed; inset: 0; top: 64px;
  background: rgba(11,11,11,0.99);
  z-index: 490; flex-direction: column;
  padding: 40px 28px;
  backdrop-filter: blur(20px);
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-mobile-menu.open {
  opacity: 1; transform: translateY(0); pointer-events: all;
}
.nav-mobile-links { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nav-mobile-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 44px; text-transform: uppercase;
  letter-spacing: -0.02em; color: rgba(245,245,245,0.35);
  line-height: 1.1; transition: color 0.2s ease;
  text-decoration: none; display: block; padding: 6px 0;
}
.nav-mobile-links a:hover,
.nav-mobile-links a.active { color: var(--white); }
.nav-mobile-links a.active { color: var(--red); }
.nav-mobile-footer {
  margin-top: auto; padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-mobile-signal {
  display: flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: 0.15em; color: var(--steel); text-transform: uppercase;
}
.btn-nav-mobile {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 10px 20px; border: 1px solid rgba(245,245,245,0.25);
  background: transparent; color: var(--white); cursor: pointer;
}

/* ══ TABLET (≤900px) ══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Nav */
  .nav { padding: 0 24px; }
  .nav-routes { display: none; }
  .nav-signal { display: none; }
  .btn-nav { display: none; }
  .nav-menu-btn { display: flex; }
  .nav-mobile-menu { display: flex; }
  .nav-left { gap: 0; }

  /* Hero */
  .hero-content { padding: 0 28px 72px; }
  .hero-dots { right: 28px; }
  .hero-counter { left: 28px; }

  /* Sections */
  .section { padding: 56px 0; }
  .section-head { padding: 0 24px 24px; }
  .section-filters { padding: 0 24px 20px; }
  .carousel-track { padding: 0 24px; }
  .broadcast-log { padding: 0 24px; }

  /* Featured block */
  .featured-block { margin: 0 24px; height: 400px; }
  .featured-content { bottom: 32px; left: 32px; right: 32px; }

  /* Districts: 3 cols */
  .districts-grid { grid-template-columns: repeat(3, 1fr); padding: 0 24px; }
  .district-block:nth-child(3) { border-right: none; }

  /* Stats strip */
  .stats-strip-inner { height: auto; flex-wrap: wrap; padding: 0 24px; }
  .stat-item { flex: 0 0 50%; padding: 16px 0; border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }

  /* Footer */
  footer { padding: 48px 24px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Player bar */
  .player-bar { grid-template-columns: 1fr auto 1fr; height: 64px; }
  .player-right { gap: 10px; padding: 0 16px; }
  .player-waveform { display: none; }
  .player-vol { display: none; }

  /* Join CTA */
  .join-cta-block { grid-template-columns: 1fr; padding: 56px 32px; gap: 24px; }

  /* Africa stat row */

  /* Africa head */
}

/* ══ MOBILE (≤640px) ══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Nav */
  .nav { padding: 0 20px; }

  /* Hero — use svh so iOS browser chrome doesn't clip the hero */
  .hero { height: 100svh; min-height: 560px; }
  .hero-content { padding: 0 20px 64px; }
  .hero-actions { flex-wrap: wrap; gap: 16px; }
  .hero-dots { right: 20px; bottom: 24px; }
  .hero-counter { left: 20px; bottom: 28px; }

  /* Sections */
  .section { padding: 44px 0; }
  .section-head { padding: 0 20px 20px; flex-wrap: wrap; gap: 12px; }
  .section-filters { padding: 0 20px 16px; }
  .carousel-track { padding: 0 20px; gap: 12px; }
  .broadcast-log { padding: 0 20px; }

  /* Track cards: smaller */
  .track-card { flex: 0 0 180px; }

  /* Featured block */
  .featured-block { margin: 0 20px; height: 280px; }
  .featured-content { bottom: 24px; left: 20px; right: 20px; }

  /* Districts: 2 cols */
  .districts-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; gap: 0; }
  .district-block:nth-child(2n) { border-right: none; }
  .district-block:nth-child(3) { border-right: 1px solid var(--border-l); }

  /* Broadcast rows */
  .broadcast-row { grid-template-columns: 72px 1fr; gap: 12px; }
  .broadcast-badge { display: none; }
  .broadcast-action { display: none; }

  /* Stats */
  .stats-strip-inner { padding: 0 20px; }

  /* Africa */

  /* Join content */
  .join-content { padding: 48px 20px; }
  .join-cta-block { padding: 44px 20px; }

  /* Footer */
  footer { padding: 40px 20px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Player bar — minimal on mobile */
  .player-bar { grid-template-columns: 1fr auto 60px; height: 60px; }
  .player-track-info { padding: 0 16px; gap: 10px; }
  .player-title { font-size: 13px; }
  .player-right { padding: 0 12px; }
  .player-center { padding: 0 10px; }
  .player-btns .player-btn:not(.player-btn-play) { display: none; }

  /* Search overlay */
  .search-inner { padding: 0 20px; }
  .search-close { right: 20px; top: 20px; }

  /* Section head: stack on tiny screens */
  .section-head { align-items: flex-start; }
  .carousel-arrows { align-self: flex-end; }

  /* iOS Safari: prevent zoom-on-focus (triggers when font-size < 16px) */
  input, select, textarea { font-size: 16px !important; }
}

/* ══ SMALL MOBILE (≤400px) ══════════════════════════════════ */
@media (max-width: 400px) {
  .hero-title { font-size: clamp(52px, 16vw, 80px); }
  .track-card { flex: 0 0 160px; }
  .artist-card { flex: 0 0 140px; }
  .featured-block { height: 240px; }
  .districts-grid { grid-template-columns: 1fr; }
  .district-block { border-right: none !important; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT UPGRADE — Player Bar Rebuild + Modals + Interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── Player Bar — rebuilt ── */
.player-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(11,11,11,0.98);
  border-top: 1px solid var(--border);
  z-index: 600; backdrop-filter: blur(20px);
  display: none; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.player-bar.active {
  display: flex;
}
.player-progress-strip {
  height: 2px; width: 100%;
  background: rgba(245,245,245,0.08);
  cursor: pointer; flex-shrink: 0; position: relative;
}
.player-progress-inner {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--red); width: 22%; transition: width 0.25s linear;
}
.player-layout {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center; height: 68px;
}
.player-track-info { display: flex; align-items: center; gap: 12px; padding: 0 20px; min-width: 0; }
.player-art {
  width: 44px; height: 44px; flex-shrink: 0; overflow: hidden;
  position: relative; display: flex; align-items: center; justify-content: center;
}
/* art initials label inside player art box */
.player-art-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(245,245,245,0.35);
  line-height: 1; user-select: none;
}
/* small badge overlaid at bottom-left of art */
.player-art-badge {
  position: absolute; bottom: 0; left: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--red); color: var(--white);
  padding: 2px 4px; line-height: 1;
  pointer-events: none;
}
.player-details { min-width: 0; }
.player-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-artist { font-size: 9px; color: var(--steel); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.player-center { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 20px; }
.player-btns { display: flex; align-items: center; gap: 20px; }
.player-btn {
  background: transparent; border: none; color: var(--steel);
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  transition: color 0.2s ease; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
}
.player-btn:hover, .player-btn.active { color: var(--white); }
.player-btn-play {
  width: 34px; height: 34px; border: 1.5px solid var(--white);
  background: transparent; display: flex; align-items: center; justify-content: center;
  color: var(--white); transition: all 0.25s ease; cursor: pointer; flex-shrink: 0;
}
.player-btn-play:hover { background: var(--white); color: var(--bg); }
.player-btn-play.playing { background: var(--red); border-color: var(--red); }
.player-time-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.player-time-label {
  font-size: 9px; letter-spacing: 0.08em; color: var(--steel);
  white-space: nowrap; min-width: 28px; font-family: 'IBM Plex Mono', monospace;
}
.player-progress-wrap {
  flex: 1; height: 2px; position: relative; cursor: pointer;
  background: rgba(245,245,245,0.1);
}
.player-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--white); width: 22%; transition: width 0.2s linear; }
.player-progress-handle {
  position: absolute; top: 50%; left: 22%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; background: var(--white); border-radius: 50%;
  transition: left 0.2s linear;
}
.player-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 20px; }
.player-waveform { display: flex; align-items: center; gap: 2px; height: 22px; }
.waveform-bar { width: 2px; background: var(--red); animation: wave 1.3s ease-in-out infinite; }
.player-vol { display: flex; align-items: center; gap: 6px; }
.player-vol-label { font-size: 8px; letter-spacing: 0.12em; color: var(--steel); text-transform: uppercase; }
.player-vol-bar { width: 52px; height: 2px; background: rgba(245,245,245,0.12); position: relative; cursor: pointer; }
.player-vol-fill { height: 100%; background: var(--steel); width: 70%; }

/* ── Player mobile ── */
@media (max-width: 900px) {
  .player-layout { grid-template-columns: 1fr auto 240px; }
  .player-right { padding: 0 16px; gap: 10px; }
  .player-waveform { display: none; }
}
@media (max-width: 640px) {
  .player-progress-strip { height: 3px; }
  .player-layout {
    display: flex; align-items: center;
    height: 58px; padding: 0 16px; gap: 0;
  }
  .player-track-info { flex: 1; min-width: 0; padding: 0; gap: 10px; }
  .player-center { flex-shrink: 0; padding: 0; gap: 0; align-items: center; }
  .player-btns { gap: 2px; }
  .player-btn { font-size: 8px; padding: 6px 4px; }
  .player-btn-play { width: 30px; height: 30px; }
  .player-time-row { display: none; }
  .player-right { display: none; }
  .player-btn-desktop { display: none !important; }
  .player-art { width: 36px; height: 36px; }
  .player-title { font-size: 13px; }
}
body { padding-bottom: 72px; }
@media (max-width: 640px) { body { padding-bottom: 64px; } }

/* ── Now-playing indicator on track card ── */
.track-card.now-playing .track-card-play { opacity: 1; }
.track-card.now-playing .track-card-play .track-play-circle {
  background: var(--red); border-color: var(--red);
}

/* ── Sign-in Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(11,11,11,0.92);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  backdrop-filter: blur(16px); padding: 20px;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  width: 100%; max-width: 480px; padding: 48px;
  position: relative; animation: fade-in 0.3s ease;
}
.modal-close {
  position: absolute; top: 20px; right: 20px;
  background: transparent; border: none; color: var(--steel);
  font-size: 18px; cursor: pointer; transition: color 0.2s ease;
  line-height: 1;
}
.modal-close:hover { color: var(--white); }
.modal-eyebrow {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.modal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 36px; text-transform: uppercase;
  color: var(--white); line-height: 1; margin-bottom: 32px; letter-spacing: -0.01em;
}
.modal-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.modal-tab {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  background: transparent; border: none; color: var(--steel);
  padding: 10px 0; margin-right: 24px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 0.2s ease; font-family: 'IBM Plex Mono', monospace;
}
.modal-tab.active { color: var(--white); border-bottom-color: var(--red); }
.modal-form-group { margin-bottom: 20px; }
.modal-label {
  display: block; font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--steel); margin-bottom: 8px;
}
.modal-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--white); font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; padding: 12px 16px; outline: none;
  transition: border-color 0.2s ease;
}
.modal-input:focus { border-color: rgba(245,245,245,0.3); }
.btn-modal-submit {
  width: 100%; background: var(--red); border: none; color: var(--white);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 15px; cursor: pointer; margin-top: 8px;
  transition: background 0.25s ease;
}
.btn-modal-submit:hover { background: var(--white); color: var(--bg); }

/* ROLE SELECT BUTTONS (register panel) */
.role-select-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin-bottom: 20px;
}
.role-select-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--steel); font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 10px 6px; cursor: pointer; transition: all 0.2s ease;
}
.role-select-btn:hover { border-color: rgba(245,245,245,0.2); color: var(--white); }
.role-select-btn.active {
  border-color: var(--red); color: var(--white);
  background: rgba(214,40,40,0.12);
}

.modal-or {
  text-align: center; font-size: 9px; letter-spacing: 0.1em;
  color: var(--steel); margin: 20px 0;
  display: flex; align-items: center; gap: 12px;
}
.modal-or::before, .modal-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.btn-modal-google {
  width: 100%; background: transparent; border: 1px solid var(--border);
  color: var(--white); font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px; cursor: pointer; transition: all 0.25s ease; display: flex;
  align-items: center; justify-content: center; gap: 10px;
}
.btn-modal-google:hover { border-color: rgba(245,245,245,0.4); background: var(--bg3); }
@media (max-width: 480px) {
  .modal-box { padding: 32px 24px; }
  .modal-title { font-size: 28px; }
}

/* ── Toast Notification ── */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--white); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 12px 24px;
  z-index: 800; opacity: 0; transition: all 0.3s ease;
  white-space: nowrap; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: #48bb78; color: #48bb78; }
.toast.error { border-color: var(--red); color: var(--red); }
@media (max-width: 640px) {
  .toast { bottom: 76px; font-size: 9px; padding: 10px 18px; max-width: calc(100vw - 40px); white-space: normal; text-align: center; }
}

/* ── Track card — clickable product ── */
.track-card { cursor: pointer; }
.track-card:hover .track-card-play { opacity: 1; }

/* ── Broadcast row mobile ── */
@media (max-width: 640px) {
  .broadcast-row {
    grid-template-columns: 64px 1fr;
    gap: 10px; padding: 12px 0;
  }
  .broadcast-time { font-size: 8px; }
  .broadcast-text { font-size: 10px; }
}

/* ── Section join CTA responsive ── */
@media (max-width: 640px) {
  .join-form { max-width: 100%; }
  .join-section { min-height: 360px; }
}

/* ── Desktop-only player buttons ── */
@media (max-width: 640px) {
  .player-btn-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER BAR — Final mobile fix (2-row portrait, full landscape)
   ═══════════════════════════════════════════════════════════════ */

/* ── Portrait mobile: proper 2-row layout ── */
@media (max-width: 640px) {
  .player-bar {
    display: flex !important;
    flex-direction: column !important;
  }
  .player-progress-strip {
    height: 3px !important;
    flex-shrink: 0;
  }
  .player-layout {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "info  controls"
      "prog  controls" !important;
    height: auto !important;
    min-height: 54px;
    padding: 10px 16px 10px !important;
    gap: 6px 14px !important;
    align-items: center !important;
  }
  .player-track-info {
    grid-area: info !important;
    padding: 0 !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .player-center {
    grid-area: controls !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .player-btns {
    gap: 4px !important;
  }
  /* Show full progress row in portrait */
  .player-time-row {
    grid-area: prog !important;
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .player-right { display: none !important; }
  .player-btn-desktop { display: none !important; }

  /* Smaller art + text */
  .player-art { width: 34px !important; height: 34px !important; }
  .player-title { font-size: 13px !important; }
  .player-artist { font-size: 8px !important; }
  .player-time-label { font-size: 8px !important; min-width: 24px !important; }
  .player-btn-play { width: 28px !important; height: 28px !important; }
  .player-btn { font-size: 8px !important; padding: 4px 3px !important; }

  /* Body padding fits the 2-row player (~88px) */
  body { padding-bottom: 90px !important; }
}

/* ── Landscape mobile: near-desktop full layout ── */
@media (max-height: 480px) and (max-width: 900px) {
  .player-layout {
    display: grid !important;
    grid-template-columns: 220px 1fr 200px !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: none !important;
    height: 56px !important;
    padding: 0 16px !important;
    gap: 0 !important;
    align-items: center !important;
  }
  .player-track-info {
    grid-area: auto !important;
    padding: 0 0 0 0 !important;
    gap: 10px !important;
  }
  .player-center {
    grid-area: auto !important;
    flex-direction: column !important;
    padding: 0 12px !important;
    gap: 5px !important;
  }
  .player-time-row {
    grid-area: auto !important;
    display: flex !important;
  }
  .player-right {
    display: flex !important;
    padding: 0 0 0 12px !important;
    gap: 8px !important;
  }
  .player-waveform { display: none !important; }
  .player-btn-desktop { display: none !important; }
  body { padding-bottom: 62px !important; }
}

/* ── Tablet portrait (641–900px): 2-col with progress ── */
@media (min-width: 641px) and (max-width: 900px) {
  .player-layout {
    grid-template-columns: 260px 1fr 180px !important;
    height: 64px !important;
  }
  .player-time-row {
    display: flex !important;
  }
  .player-btn-desktop { display: none !important; }
  body { padding-bottom: 70px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER — Full details: meta row, like, queue, mute, mobile fix
   ═══════════════════════════════════════════════════════════════ */

/* ── Meta row (artist · genre · city) ── */
.player-meta-row {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px; flex-wrap: nowrap; overflow: hidden;
}
.player-sep {
  color: var(--steel); font-size: 8px; flex-shrink: 0;
}
.player-genre-tag {
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red); white-space: nowrap; flex-shrink: 0;
}
.player-city-tag {
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--steel); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Like button ── */
.player-like-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--steel); padding: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}
.player-like-btn:hover { color: var(--red); transform: scale(1.2); }
.player-like-btn.liked { color: var(--red); }
.player-like-btn.liked svg { fill: var(--red); }

/* ── Mobile-only buttons (the SVG prev/next icons) ── */
.player-btn-mobile {
  display: none;
  background: transparent; border: none; color: var(--steel);
  cursor: pointer; padding: 4px 6px;
  transition: color 0.2s ease; line-height: 1;
}
.player-btn-mobile:hover { color: var(--white); }

/* ── Queue info ── */
.player-queue {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 0 4px;
}
.player-queue-label {
  font-size: 7px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel);
}
.player-queue-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 13px; color: var(--white);
  letter-spacing: 0.05em;
}

/* ── Mute button ── */
.player-mute-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--steel); padding: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s ease; flex-shrink: 0;
}
.player-mute-btn:hover { color: var(--white); }
.player-mute-btn.muted { color: var(--steel); opacity: 0.4; }

/* ── Vol bar click area ── */
.player-vol-bar { cursor: pointer; }

/* ── Right panel: fix alignment ── */
.player-right {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 0 20px;
}

/* ── Desktop: hide mobile-only items ── */
@media (min-width: 641px) {
  .player-btn-mobile { display: none !important; }
  .player-hide-xs { /* visible on desktop, conditional on tablet */ }
}

/* ════════════════════════════════════════════════
   MOBILE PORTRAIT (≤640px) — 2-row complete layout
   ════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Bar is flex-column */
  .player-bar {
    display: flex !important;
    flex-direction: column !important;
  }
  .player-progress-strip { height: 3px !important; }

  /* Grid: [info | controls] / [progress | controls] */
  .player-layout {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "info  ctrls"
      "prog  ctrls" !important;
    height: auto !important;
    padding: 9px 14px 9px !important;
    gap: 5px 12px !important;
    align-items: center !important;
  }

  /* Track info — row 1 left */
  .player-track-info {
    grid-area: info !important;
    padding: 0 !important;
    gap: 8px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .player-art { width: 34px !important; height: 34px !important; }
  .player-details { min-width: 0; flex: 1; }
  .player-title { font-size: 12px !important; }
  .player-meta-row { gap: 4px !important; }
  .player-hide-xs { display: none !important; }
  .player-like-btn { padding: 4px !important; }
  .player-like-btn svg { width: 13px !important; height: 13px !important; }

  /* Progress — row 2 left */
  .player-time-row {
    grid-area: prog !important;
    display: flex !important;
    width: 100% !important;
    gap: 7px !important;
  }
  .player-time-label { font-size: 8px !important; min-width: 22px !important; }
  .player-progress-wrap { height: 3px !important; }
  .player-progress-handle { width: 9px !important; height: 9px !important; }

  /* Controls — right column (spans both rows) */
  .player-center {
    grid-area: ctrls !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  .player-btns { gap: 3px !important; }
  .player-btn-mobile { display: flex !important; align-items: center; justify-content: center; padding: 4px 5px !important; }
  .player-btn-desktop { display: none !important; }
  .player-btn-play { width: 36px !important; height: 36px !important; }

  /* Right panel — show mute icon only */
  .player-right {
    display: none !important; /* move mute into track-info row */
  }

  /* Body padding for 2-row player */
  body { padding-bottom: 92px !important; }
}

/* ════════════════════════════════════════════
   LANDSCAPE MOBILE (height ≤ 480px) — full row
   ════════════════════════════════════════════ */
@media (max-height: 480px) and (max-width: 900px) {
  .player-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr 200px !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: none !important;
    height: 56px !important;
    padding: 0 16px !important;
    gap: 0 !important;
    align-items: center !important;
  }
  .player-track-info { grid-area: auto !important; padding: 0 !important; gap: 10px !important; }
  .player-center { grid-area: auto !important; padding: 0 12px !important; gap: 5px !important; flex-direction: column !important; }
  .player-time-row { display: flex !important; }
  .player-right { grid-area: auto !important; display: flex !important; padding: 0 0 0 8px !important; gap: 10px !important; }
  .player-btn-mobile { display: none !important; }
  .player-btn-desktop { display: none !important; }
  .player-queue { display: none !important; }
  .player-waveform { display: none !important; }
  .player-mute-btn { display: flex !important; }
  .player-vol { display: flex !important; }
  .player-hide-xs { display: inline !important; }
  body { padding-bottom: 62px !important; }
}

/* ════════════════════════════════════════
   TABLET (641–900px) — 3 col with all info
   ════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 900px) {
  .player-layout {
    grid-template-columns: 260px 1fr 220px !important;
    height: 66px !important;
  }
  .player-time-row { display: flex !important; }
  .player-queue { display: none !important; }
  .player-waveform { display: none !important; }
  .player-btn-desktop { display: inline-flex !important; }
  body { padding-bottom: 72px !important; }
}

/* ═══════════════════════════════════════════════════
   LYRICS PANEL
   ═══════════════════════════════════════════════════ */
.lyrics-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,8,10,0.65);
  z-index: 890;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lyrics-panel-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.lyrics-panel {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  width: min(480px, calc(100vw - 32px));
  max-height: 62vh;
  background: #0d0d0f;
  border: 1px solid rgba(245,245,245,0.1);
  border-radius: 3px;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lyrics-panel.open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.lyrics-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(245,245,245,0.08);
  flex-shrink: 0;
}
.lyrics-panel-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.lyrics-panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--white);
  margin: 0 0 3px;
  text-transform: uppercase;
}
.lyrics-header-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(245,245,245,0.42);
  margin: 0;
  text-transform: uppercase;
}
.lyrics-panel-close {
  background: none;
  border: 1px solid rgba(245,245,245,0.15);
  color: rgba(245,245,245,0.6);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
}
.lyrics-panel-close:hover {
  border-color: rgba(245,245,245,0.4);
  color: var(--white);
}

.lyrics-lines {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 36px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,245,245,0.12) transparent;
}
.lyrics-lines::-webkit-scrollbar { width: 3px; }
.lyrics-lines::-webkit-scrollbar-thumb { background: rgba(245,245,245,0.12); border-radius: 2px; }

/* Lyric lines */
.lyric-line {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
  margin: 0;
  padding: 4px 0;
  color: rgba(245,245,245,0.15);
  transition: color 0.4s ease, font-size 0.3s ease, font-weight 0.3s ease;
}
.lyric-line.lyric-empty { height: 14px; padding: 0; }
.lyric-line.lyric-active {
  color: var(--white);
  font-size: 20px;
  font-weight: 900;
}
.lyric-line.lyric-prev1,
.lyric-line.lyric-next1 {
  color: rgba(245,245,245,0.5);
  font-size: 16px;
}
.lyric-line.lyric-prev2,
.lyric-line.lyric-next2 {
  color: rgba(245,245,245,0.28);
  font-size: 15px;
}
.lyric-line.lyric-far {
  color: rgba(245,245,245,0.09);
  font-size: 14px;
}
.lyric-line.lyric-pause {
  font-size: 12px;
  letter-spacing: 0.32em;
  color: rgba(245,245,245,0.12);
}
.lyric-line.lyric-active.lyric-pause {
  color: rgba(245,245,245,0.45);
}

/* Lyrics toggle button in player bar */
.player-lyrics-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(245,245,245,0.15);
  border-radius: 2px;
  color: rgba(245,245,245,0.5);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.player-lyrics-btn:hover,
.player-lyrics-btn.active {
  border-color: var(--red);
  color: var(--red);
  background: rgba(180,30,30,0.1);
}
.player-lyrics-btn svg { display: block; }

/* ═══════════════════════════════════════════════════
   RADIO PLAYLIST
   ═══════════════════════════════════════════════════ */
.radio-playlist {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(245,245,245,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.playlist-row {
  display: grid;
  grid-template-columns: 32px 44px 1fr 88px 44px 38px;
  align-items: center;
  gap: 0 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(245,245,245,0.05);
  cursor: pointer;
  transition: background 0.18s;
  position: relative;
}
.playlist-row:last-child { border-bottom: none; }
.playlist-row:hover { background: rgba(245,245,245,0.035); }
.playlist-row.playing { background: rgba(180,30,30,0.07); }
.playlist-row.playing::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
}

/* Track number / playing bars */
.playlist-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(245,245,245,0.22);
  text-align: center;
}
.playlist-row.playing .playlist-num { display: none; }
.playlist-playing-icon {
  display: none;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.playlist-row.playing .playlist-playing-icon { display: flex; }
.playlist-playing-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--red);
  animation: pl-bar 0.75s ease-in-out infinite alternate;
}
.playlist-playing-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.playlist-playing-bar:nth-child(2) { height: 12px; animation-delay: 0.18s; }
.playlist-playing-bar:nth-child(3) { height: 8px; animation-delay: 0.32s; }
.playlist-playing-bar:nth-child(4) { height: 10px; animation-delay: 0.08s; }
@keyframes pl-bar {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* Art thumbnail */
.playlist-art {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.playlist-art .art-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: rgba(245,245,245,0.35);
}

/* Info */
.playlist-info { min-width: 0; }
.playlist-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}
.playlist-row.playing .playlist-title { color: var(--red); }
.playlist-artist {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(245,245,245,0.4);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Genre tag */
.playlist-genre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: rgba(245,245,245,0.28);
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid rgba(245,245,245,0.1);
  border-radius: 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Duration */
.playlist-duration {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(245,245,245,0.3);
  text-align: right;
}

/* Play button */
.playlist-play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245,245,245,0.05);
  border: 1px solid rgba(245,245,245,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(245,245,245,0.45);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  padding: 0;
  flex-shrink: 0;
}
.playlist-play-btn:hover,
.playlist-row.playing .playlist-play-btn {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* Responsive */
@media (max-width: 640px) {
  .playlist-row {
    grid-template-columns: 28px 36px 1fr 36px 30px;
    gap: 0 8px;
    padding: 8px 12px;
  }
  .playlist-genre { display: none; }
}
@media (max-width: 400px) {
  .playlist-row {
    grid-template-columns: 24px 32px 1fr 30px;
    gap: 0 6px;
  }
  .playlist-play-btn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DSP STREAMING LINKS — player bar (shows which platform is playing
   + "Also on" links for other platforms)
   ═══════════════════════════════════════════════════════════════════ */
.player-dsp-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dsp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(245,245,245,0.1);
  border-radius: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.35);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
/* hide text by default — show only SVG icon */
.dsp-link span { display: none; }

.dsp-link:hover {
  color: var(--white);
  border-color: rgba(245,245,245,0.35);
}
.dsp-link:hover span { display: inline; }

/* Active = currently playing engine */
.dsp-link.dsp-link-active {
  border-color: rgba(245,245,245,0.2);
  color: rgba(245,245,245,0.6);
}
.dsp-link.dsp-link-active span { display: inline; }

/* Platform accent colours on hover */
.dsp-link-soundcloud:hover { border-color: #ff5500; color: #ff5500; }
.dsp-link-youtube:hover    { border-color: #ff0000; color: #ff4040; }
.dsp-link-spotify:hover    { border-color: #1db954; color: #1db954; }
.dsp-link-apple:hover      { border-color: #fc3c44; color: #fc3c44; }
.dsp-link-tidal:hover      { border-color: #00e5ff; color: #00e5ff; }

/* Hide entire DSP links on mobile */
@media (max-width: 640px) {
  .player-dsp-links { display: none !important; }
}

/* ── Track card active state (currently playing) ──────────────────── */
.track-card-active {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.track-card-active .track-card-badge {
  background: var(--red);
}

/* ═══════════════════════════════════════════════════════════════
   BEHIND THE TRACK — editorial section
   ═══════════════════════════════════════════════════════════════ */
.btt-section { padding-bottom: 80px; }

.btt-view-all {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--steel); text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.btt-view-all:hover { color: var(--white); }
.btt-view-all svg { transition: transform 0.2s ease; }
.btt-view-all:hover svg { transform: translateX(3px); }

.btt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  padding: 0 0;
}

.btt-card {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  transition: background 0.3s ease;
  cursor: pointer;
}
.btt-card:last-child { border-right: none; }
.btt-card:hover { background: rgba(245,245,245,0.02); }

/* Art block */
.btt-card-art {
  position: relative;
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.btt-card-art-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 72px;
  color: rgba(245,245,245,0.12); letter-spacing: -0.03em;
  user-select: none;
}
.btt-card-play-tag {
  position: absolute; bottom: 14px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,245,245,0.5);
  border: 1px solid rgba(245,245,245,0.18);
  padding: 5px 10px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btt-card:hover .btt-card-play-tag {
  color: var(--white);
  border-color: rgba(245,245,245,0.5);
}

/* Body */
.btt-card-body {
  padding: 24px 28px 28px;
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border);
}
.btt-card-eyebrow {
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red);
}
.btt-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--white); line-height: 1.1;
}
.btt-card-excerpt {
  font-size: 12px; line-height: 1.75;
  color: rgba(245,245,245,0.72);
  flex: 1;
}
.btt-card-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.btt-card-curator {
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel);
}
.btt-card-curator strong { color: rgba(245,245,245,0.82); font-weight: 500; }
.btt-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--steel); text-decoration: none;
  transition: color 0.2s ease;
}
.btt-card-link:hover { color: var(--white); }
.btt-card-link svg { transition: transform 0.2s ease; }
.btt-card-link:hover svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 900px) {
  .btt-grid { grid-template-columns: repeat(2, 1fr); }
  .btt-card:nth-child(2) { border-right: none; }
  .btt-card:nth-child(3) { border-right: 1px solid var(--border); border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .btt-grid { grid-template-columns: 1fr; }
  .btt-card { border-right: none !important; border-bottom: 1px solid var(--border); }
  .btt-card-body { padding: 20px; }
  .btt-card-art { height: 160px; }
}

/* ── Hero enter-link secondary CTA (consolidated above, kept for reference) ── */

/* ── art-mono colour ──────────────────────────────────────────────── */
.art-mono {
  background: linear-gradient(135deg, #1a1a1a, #2e2e2e);
}

/* ═══════════════════════════════════════════════════════════════
   PLATFORM LIST SECTION — replaces districts grid
   ═══════════════════════════════════════════════════════════════ */
.platform-list-section {
  padding: 80px 0 0;
  background: var(--white);
  color: var(--bg);
}
.platform-list-head {
  padding: 0 60px 48px;
  border-bottom: 1px solid var(--border-l);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.platform-list-head .section-title {
  color: var(--bg);
  font-size: clamp(36px, 5vw, 72px);
}
.platform-list-head .section-eyebrow { color: var(--red); }

.platform-list { display: flex; flex-direction: column; }

.platform-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  align-items: center;
  gap: 0 32px;
  padding: 32px 60px;
  border-bottom: 1px solid var(--border-l);
  text-decoration: none;
  color: var(--bg);
  transition: background 0.25s ease, padding-left 0.25s ease;
  cursor: pointer;
}
/* platform-row:hover — moved to @media (hover: hover) block below */

.platform-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 13px;
  letter-spacing: 0.15em; color: var(--steel);
  transition: color 0.25s ease;
}

.platform-row-main { min-width: 0; }
.platform-row-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: clamp(24px, 3vw, 40px);
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1; margin-bottom: 8px;
  transition: color 0.25s ease;
}
.platform-row-desc {
  font-size: 12px; line-height: 1.7;
  color: rgba(11,11,11,0.58); max-width: 520px;
  transition: color 0.25s ease;
}

.platform-row-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}
.platform-row-tags span {
  font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(11,11,11,0.15);
  color: var(--steel);
  padding: 4px 8px;
  transition: border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.platform-row-arrow {
  font-size: 20px; color: var(--steel);
  transition: color 0.25s ease, transform 0.25s ease;
  padding-left: 8px;
}
/* platform-row arrow transform — moved to hover:hover block */

/* Responsive */
@media (max-width: 900px) {
  .platform-list-head { padding: 0 24px 36px; }
  .platform-row { grid-template-columns: 48px 1fr auto; gap: 0 20px; padding: 28px 24px; }
  /* platform-row:hover padding handled in hover:hover block */
  .platform-row-tags { display: none; }
  .platform-row-arrow { grid-column: 3; }
}
@media (max-width: 640px) {
  .platform-list-section { padding-top: 56px; }
  .platform-list-head { padding: 0 20px 28px; }
  .platform-row { grid-template-columns: 40px 1fr auto; gap: 0 16px; padding: 22px 20px; }
  /* platform-row:hover padding handled in hover:hover block */
  .platform-row-title { font-size: 22px; }
  .platform-row-desc { display: none; }
}

/* ─── SUPABASE SKELETON LOADING ─────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-block,
.skeleton-line {
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 4px;
}
.track-card.skeleton .track-cover { height: 160px; }
.skeleton-line { height: 12px; margin: 8px 0; }
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w50 { width: 50%; }

/* Playing state for track play button */
.track-play-btn.playing svg polygon { fill: var(--accent, #e8ff00); }
.track-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a1a; color: #555;
}
.track-cover-placeholder svg { width: 40px; height: 40px; }
.track-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: #666; margin-top: 4px;
}
.track-genre { text-transform: uppercase; letter-spacing: .04em; }
.track-plays { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST OVERHAUL — Full responsive pass
   Breakpoints: 900px (tablet), 640px (mobile), 400px (small)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Hover states → only on pointer-precise (non-touch) devices ── */
/* Prevents hover states getting "stuck" after tap on iOS/Android     */
@media (hover: hover) and (pointer: fine) {
  .track-card:hover            { transform: translateY(-5px); }
  .track-card:hover .track-card-play { opacity: 1; }
  .track-card:hover .track-card-art-inner { transform: scale(1.07); }
  .track-card:hover .track-card-title    { color: var(--red); }

  .artist-card:hover           { transform: translateY(-5px); }
  .artist-card:hover .artist-card-photo-inner { transform: scale(1.07); }
  .artist-card:hover .artist-card-name        { color: var(--red); }

  .featured-block:hover .featured-bg  { transform: scale(1.03); }
  .featured-block:hover .featured-line { width: 120px; }

  .district-block:hover           { background: rgba(11,11,11,0.04); }
  .district-block:hover::after    { transform: scaleX(1); }
  .district-block:hover .district-arrow { opacity: 1; transform: translateX(0); }

  .btt-card:hover { background: rgba(245,245,245,0.02); }
  .btt-card:hover .btt-card-play-tag { color: var(--white); border-color: rgba(245,245,245,0.5); }


  .platform-row:hover {
    background: var(--bg);
    color: var(--white);
    padding-left: 72px;
  }
  .platform-row:hover .platform-row-desc   { color: rgba(245,245,245,0.72); }
  .platform-row:hover .platform-row-tags span { border-color: rgba(245,245,245,0.25); color: rgba(245,245,245,0.70); }
  .platform-row:hover .platform-num        { color: var(--red); }
  .platform-row:hover .platform-row-arrow  { color: var(--white); transform: translateX(6px); }

  .broadcast-action:hover { color: var(--white); }
  .hero-play-btn:hover .hero-play-circle  { background: var(--white); }
  .hero-enter-link:hover  { color: var(--white); }
  .hero-enter-link:hover svg { opacity: 1; }
}

/* On touch: platform row gets a gentle active state instead */
@media (hover: none) {
  .platform-row:active {
    background: var(--bg);
    color: var(--white);
  }
  .platform-row:active .platform-num { color: var(--red); }
  .track-card:active .track-card-play { opacity: 1; }
}

/* ── 2. Global mobile typography improvements ── */
@media (max-width: 640px) {
  /* Eyebrow labels — bump 9px → 11px for legibility */
  .section-eyebrow,
  .featured-label,
  .btt-card-eyebrow,
  .join-label,
  .broadcast-time,
  .stat-label          { font-size: 10px; }

  /* Filter pills */
  .fp { font-size: 10px; padding: 7px 14px; min-height: 34px; }

  /* Stats strip numbers + labels */
  .stat-num   { font-size: 26px; }
  .stat-label { font-size: 9px; letter-spacing: 0.15em; }

  /* Hero counter visibility */
  .hero-counter { color: rgba(245,245,245,0.65); }

  /* Track card city tag */
  .track-card-city { font-size: 9px; }

  /* Artist card genre */
  .artist-card-genre { font-size: 9px; }

  /* Broadcast text */
  .broadcast-text  { font-size: 11px; }
  .broadcast-time  { font-size: 9px; }

  /* BTT card art scale down */
  .btt-card-art        { height: 160px; }
  .btt-card-art-label  { font-size: 52px; }
  .btt-card-body       { padding: 20px 20px 24px; gap: 8px; }
  .btt-card-title      { font-size: 19px; }
  .btt-card-excerpt    { font-size: 12px; }

  /* Section head title */
  .section-head h2 { font-size: clamp(22px, 6.5vw, 40px); }

  /* Africa map city labels */
}

/* ── 3. Hero section — phone-specific polish ── */
@media (max-width: 640px) {
  .hero-badge {
    font-size: 8px;
    padding: 5px 10px;
    letter-spacing: 0.15em;
  }

  .hero-title {
    font-size: clamp(48px, 14vw, 80px);
    line-height: 0.88;
  }

  .hero-sub {
    font-size: 11px;
    letter-spacing: 0.10em;
    line-height: 1.8;
  }

  /* TUNE IN button — bigger tap target */
  .hero-play-circle {
    width: 48px;
    height: 48px;
  }
  .hero-play-label { font-size: 10px; }

  /* ENTER CONTROL ROOM — compact on small screens */
  .hero-enter-link {
    font-size: 9px;
    letter-spacing: 0.14em;
    gap: 8px;
  }

  /* Dots — slightly bigger tap area */
  .hero-dot { height: 3px; }

  /* Hero overlay slightly stronger on mobile (small screens, bright ambient light) */
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(11,11,11,0.95) 0%,
      rgba(11,11,11,0.75) 22%,
      rgba(11,11,11,0.42) 50%,
      rgba(11,11,11,0.10) 80%,
      transparent 100%
    );
  }
}

/* ── 4. Featured block — fix watermark text overflow on mobile ── */
@media (max-width: 900px) {
  /* The inline 280px watermark font needs to scale with viewport */
  .featured-bg {
    font-size: clamp(80px, 28vw, 280px);
  }
  .featured-bg span {
    font-size: inherit !important;
  }
  .featured-title {
    font-size: clamp(40px, 9vw, 96px);
  }
}
@media (max-width: 640px) {
  .featured-block { margin: 0; border-radius: 0; height: 300px; }
  .featured-content { bottom: 28px; left: 20px; right: 20px; }
  .featured-title { font-size: clamp(38px, 12vw, 72px); line-height: 0.9; }
  .featured-label { font-size: 9px; margin-bottom: 8px; }
  .featured-meta  { font-size: 9px; letter-spacing: 0.10em; }
  .featured-line  { margin-top: 12px; }
}

/* ── 5. Section filters — ensure pills visible + properly padded ── */
@media (max-width: 640px) {
  .section-filters {
    padding: 0 20px 16px;
    gap: 8px;
    /* Fade right edge to hint at scrollability */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  /* Restore last item so it peeks fully */
  .section-filters::after {
    content: '';
    flex-shrink: 0;
    width: 20px;
  }
}

/* ── 6. Carousel — edge fade on mobile to hint scrollability ── */
@media (max-width: 640px) {
  .carousel-track {
    /* Right fade: hint there's more to scroll */
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
  }
}

/* ── 7. Platform list — mobile touch improvements ── */
@media (max-width: 640px) {
  .platform-list-head {
    padding: 0 20px 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .platform-list-head .section-title { font-size: clamp(32px, 10vw, 56px); }

  .platform-row {
    padding: 22px 20px;
    gap: 0 16px;
    /* Remove padding-left animation on touch — use background instead */
    transition: background 0.2s ease;
  }
  /* No padding-left lurch on touch */
  .platform-row:hover,
  .platform-row:active { padding-left: 20px !important; }

  .platform-num         { font-size: 11px; }
  .platform-row-title   { font-size: clamp(20px, 5.5vw, 32px); margin-bottom: 5px; }
  .platform-row-desc    { font-size: 11px; line-height: 1.6; display: block; }
  .platform-row-arrow   { font-size: 18px; }
  .platform-row-tags    { display: none; }
}

/* ── 8. Africa section — mobile optimisation ── */
@media (max-width: 640px) {
}

/* ── 9. Broadcast log — mobile readability ── */
@media (max-width: 640px) {
  .broadcast-log { padding: 0 20px; }
  .broadcast-row {
    grid-template-columns: 60px 1fr;
    gap: 10px; padding: 14px 0;
  }
  .broadcast-badge  { display: none; }
  .broadcast-action { display: none; }
  .broadcast-text   { font-size: 11px; line-height: 1.55; }
  .broadcast-text strong { display: block; margin-bottom: 2px; }
}

/* ── 10. Join section — full-width form on mobile ── */
@media (max-width: 640px) {
  .join-content  { padding: 52px 20px 48px; max-width: 100%; }
  .join-title    { font-size: clamp(36px, 11vw, 64px); margin-bottom: 24px; }
  .join-form     { max-width: 100%; }
  .join-form input { font-size: 16px; } /* prevent iOS zoom */
  .join-section  { min-height: 360px; }
}

/* ── 11. Footer — tighten up on mobile ── */
@media (max-width: 640px) {
  footer                { padding: 40px 20px 24px; }
  .footer-grid          { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-col-title     { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 10px; }
  .footer-links li a    { font-size: 10px; padding: 5px 0; display: block; } /* bigger tap target */
  .footer-tagline       { font-size: 10px; line-height: 1.7; }
  .footer-bottom        { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; }
  .footer-copy          { font-size: 8px; letter-spacing: 0.08em; }
  .footer-social a      { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── 12. Stats strip — ensure touch-friendly sizing ── */
@media (max-width: 640px) {
  .stats-strip-inner { height: auto; flex-wrap: wrap; padding: 0; }
  .stat-item {
    flex: 0 0 50%;
    padding: 18px 20px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }
  .stat-item:nth-child(odd)         { border-right: 1px solid var(--border); }
  .stat-item:nth-last-child(-n+2)   { border-bottom: none; }
  .stat-item:first-child            { padding-left: 20px; }
}

/* ── 13. Search overlay — full screen on mobile ── */
@media (max-width: 640px) {
  .search-inner       { padding: 0 20px; width: 100%; }
  .search-eyebrow     { font-size: 10px; }
  .search-field input { font-size: 16px; } /* prevent iOS zoom */
  .search-genre-row   { flex-wrap: wrap; gap: 8px; padding: 0; }
  .sg-pill            { font-size: 10px; padding: 7px 14px; }
  .search-trend-tag   { font-size: 10px; padding: 7px 12px; }
}

/* ── 14. Nav mobile menu — ensure links have proper tap size ── */
@media (max-width: 900px) {
  .nav-mobile-links li a {
    padding: 14px 0;
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 15. Touch targets — all interactive elements min 44×44px ── */
@media (max-width: 900px) {
  button, [role="button"],
  .carousel-arrow,
  .hero-dot,
  .btt-card-link,
  .platform-row {
    touch-action: manipulation;
  }
  .carousel-arrow { width: 44px; height: 44px; }
  .hero-dot       { padding: 8px 0; cursor: pointer; }
}

/* ── 16. Scroll smoothness + overflow containment ── */
html { scroll-behavior: smooth; }
.carousel-track { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ── 17. Modal — full screen on small mobile ── */
@media (max-width: 480px) {
  .modal-box           { padding: 32px 20px 28px; }
  .modal-title         { font-size: 28px; margin-bottom: 24px; }
  .btn-modal-submit,
  .btn-modal-google    { padding: 16px; font-size: 11px; }
}
@media (max-width: 380px) {
  .modal-overlay       { padding: 0; align-items: flex-end; }
  .modal-box           { max-width: 100%; border-left: none; border-right: none; border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 20px); }
}

/* ── 18. Very small screens (≤ 360px) ── */
@media (max-width: 360px) {
  .hero-title   { font-size: clamp(42px, 13vw, 60px); }
  .hero-actions { gap: 14px; }
  .hero-play-circle { width: 42px; height: 42px; }
  .track-card   { flex: 0 0 152px; }
  .artist-card  { flex: 0 0 130px; }
  .btt-card-title { font-size: 17px; }
}

/* ── 19. iOS safe area insets (notch, home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .player-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  @media (max-width: 640px) {
    body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  }
}

/* ── 20. Prevent horizontal overflow (the #1 mobile layout killer) ── */
html, body { max-width: 100vw; overflow-x: hidden; }

.hero, .ticker, .stats-strip, .section,
.join-section, footer { overflow-x: hidden; }

/* ── Featured block watermark text — responsive font size ── */
.featured-watermark-text {
  font-size: clamp(80px, 28vw, 280px);
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL HIERARCHY & FLOW — MARCH 2026 POLISH
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Stats strip — taller, more presence ── */
.stats-strip-inner { height: 80px; }
.stat-num          { font-size: 34px; }

/* ── 2. Section rhythm — key sections get extra breathing ── */
.btt-section   { padding-top: 96px !important; padding-bottom: 100px !important; }
.join-section  { min-height: 520px; }

/* ── 3. Eyebrow — longer red accent dash ── */
.section-eyebrow::before { width: 24px; height: 1.5px; }

/* ── 4. Behind The Track — red editorial top rule ── */
.btt-section { border-top: 3px solid var(--red); }

/* ── 5. Africa stat numbers — amplified ── */

/* ── 6. Broadcast log — top divider on first row ── */
.broadcast-log .broadcast-row:first-child { border-top: 1px solid var(--border); }

/* ── 7. Section-dark following section-light: subtle inset separator ── */
.section.section-dark  { box-shadow: inset 0 1px 0 var(--border); }
.btt-section           { box-shadow: none; } /* overridden by red border-top */

/* ── 8. Featured block: deeper gradient on hover ── */
.featured-block:hover .featured-gradient {
  background: linear-gradient(to top,
    rgba(11,11,11,0.98) 0%,
    rgba(11,11,11,0.30) 55%,
    transparent 100%);
}

/* ── 9. Platform row title — slightly more presence ── */
.platform-row-title { font-size: clamp(26px, 3.2vw, 44px); }

/* ── 10. Section-light boundaries — cleaner definition ── */
.section.section-light {
  border-top: 1px solid rgba(11,11,11,0.12);
  border-bottom: 1px solid rgba(11,11,11,0.08);
}

/* ── 11. Ticker — slightly taller & bolder type ── */
.ticker      { height: 44px; }
.ticker-item { font-size: 10px; letter-spacing: 0.22em; }

/* ── 12. Africa head "active cities" — extra letter spacing ── */

/* ── 13. Section-head: consistent bottom spacing ── */
.section-head { padding-bottom: 36px; margin-bottom: 0; }

/* ── 14. BTT card art: slightly taller for editorial weight ── */
.btt-card-art { height: 200px; }

/* ── 15. Hero enter CTA — slight lift ── */
@media (min-width: 641px) {
  .hero-enter-cta { bottom: 52px; }
}

/* ── Responsive: keep proportions on tablet ── */
@media (max-width: 900px) {
  .stat-num        { font-size: 28px; }
  .btt-section     { padding-top: 72px !important; padding-bottom: 80px !important; }
}

/* ── Responsive: mobile scales ── */
@media (max-width: 640px) {
  .stats-strip-inner { height: auto; }
  .btt-card-art      { height: 160px; }
  .join-section      { min-height: 360px; }
  .btt-section       { padding-top: 56px !important; padding-bottom: 64px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — PLAYER BAR + SPOTIFY EMBED + BODY PADDING
   Hero overhaul is handled later in "MOBILE HERO" section
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* body padding so page content clears player bar */
  body { padding-bottom: 104px !important; }

  /* Spotify direct embed — compact on mobile, sits above player bar */
  #spotify-direct-player {
    bottom: 60px !important;  /* mobile player bar is 60px */
    height: 80px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   PLAYER BAR — visible, prominent, well-structured on mobile
   ──────────────────────────────────────────────────────────── */

/* Base: ensure fully opaque on all breakpoints */
.player-bar {
  background: #0B0B0B !important;
}

/* All screens: red top border + upward shadow to lift from page */
.player-bar {
  border-top: 2px solid var(--red) !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.92),
              0 -1px 0   rgba(214, 40, 40, 0.30) !important;
}

/* Progress strip: thicker + subtle glow */
.player-progress-strip {
  height: 4px !important;
  background: rgba(245, 245, 245, 0.07) !important;
}
.player-progress-inner {
  background: var(--red) !important;
  box-shadow: 0 0 8px rgba(214, 40, 40, 0.55) !important;
}

/* ── Portrait mobile player: taller, better spaced ── */
@media (max-width: 640px) {
  .player-bar {
    background: #0B0B0B !important;
  }

  .player-layout {
    min-height: 64px !important;
    padding: 12px 16px 14px !important;
    gap: 8px 16px !important;
  }

  /* Art: slightly larger tap target */
  .player-art {
    width: 44px !important;
    height: 44px !important;
  }

  /* Title: readable at a glance */
  .player-title  { font-size: 14px !important; letter-spacing: 0.025em !important; }
  .player-artist { font-size: 9px !important; }

  /* Like button: visible on mobile */
  .player-like-btn {
    display: flex !important;
    color: rgba(245, 245, 245, 0.35) !important;
    padding: 5px !important;
  }
  .player-like-btn svg { width: 14px !important; height: 14px !important; }
  .player-like-btn.liked { color: var(--red) !important; }

  /* Prev / next icon buttons: bigger tap target */
  .player-btn-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 8px !important;
    color: rgba(245, 245, 245, 0.6) !important;
  }

  /* Play button: comfortable size */
  .player-btn-play {
    width: 38px !important;
    height: 38px !important;
    border-width: 1.5px !important;
  }

  /* Progress row: always shown in row 2 */
  .player-time-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .player-time-label {
    font-size: 8px !important;
    min-width: 26px !important;
  }

  /* Body: extra bottom padding for taller player */
  body { padding-bottom: 104px !important; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    body {
      padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ────────────────────────────────────────────────────────────
   TABLET (641–900px): balanced player + tighter hero
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (min-width: 641px) {
  .hero-brand-img { object-position: 35% center; }
  .player-layout  { height: 66px; }
}

/* ────────────────────────────────────────────────────────────
   GLOBAL OVERFLOW GUARD — no horizontal scroll on any device
   ──────────────────────────────────────────────────────────── */
.hero-brand-picture,
.hero-brand-img,
.player-bar,
.ticker-inner {
  max-width: 100%;
}

/* ────────────────────────────────────────────────────────────
   VERY SMALL PHONES (≤ 360px) — everything fits
   ──────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hero-brand-img   { object-position: center center !important; }
  .hero-title       { font-size: clamp(40px, 12.5vw, 58px); }
  .player-title     { font-size: 13px !important; }
  .player-art       { width: 38px !important; height: 38px !important; }
  .player-btn-play  { width: 34px !important; height: 34px !important; }
  .player-layout    { padding: 10px 14px 12px !important; }
}

/* ════════════════════════════════════════════════════════════════
   0PROMORECORDS — v2.0 STYLES
   Auth · Control Room · Mobile Hero · Broadcast Float · Toast
   ════════════════════════════════════════════════════════════════ */

/* ── AUTH MODAL ENHANCEMENTS ────────────────────────────────────── */

.modal-overlay { display: none; }
.modal-overlay.open { display: flex; }

/* Error message */
.modal-error-msg {
  background: rgba(214,40,40,0.12);
  border: 1px solid rgba(214,40,40,0.35);
  color: var(--red);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  margin-bottom: 14px;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Role hint */
#roleHint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--steel);
  line-height: 1.7;
  margin: -4px 0 12px;
  min-height: 18px;
  transition: all 0.2s ease;
}

/* Artist name wrap (hides for label/curator) */
#artistNameWrap { transition: all 0.25s ease; }

/* Register btn */
#btnRegister {
  transition: background 0.25s ease, color 0.25s ease;
}

/* Nav user chip */
.nav-user-chip {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--border);
  padding: 6px 12px;
}
.nav-user-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* ── SPOTIFY NAV BUTTON ──────────────────────────────────────────── */
.btn-nav-spotify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(29,185,84,0.4);
  color: rgba(29,185,84,0.85);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-nav-spotify:hover,
.btn-nav-spotify[data-state="on"] {
  background: rgba(29,185,84,0.12);
  border-color: #1DB954;
  color: #1DB954;
}
@media (max-width: 960px) { .btn-nav-spotify { display: none; } }

/* ── SPOTIFY TRACK CARD STATES ───────────────────────────────────── */
.track-card.sp-playing .track-card-art-inner {
  outline: 2px solid #1DB954;
  outline-offset: -2px;
}
.track-card.sp-playing .track-play-circle {
  background: #1DB954;
}
.sp-badge {
  pointer-events: none;
}

/* ── TOAST v2 ────────────────────────────────────────────────────── */
.toast0d {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 12px 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.toast0d.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast0d.toast-success { border-color: rgba(0,200,100,0.4); color: #0c6; }
.toast0d.toast-error   { border-color: rgba(214,40,40,0.4); color: var(--red); }
.toast0d.toast-info    { border-color: var(--border); color: var(--steel); }

/* ── BROADCAST FLOAT ────────────────────────────────────────────── */
#broadcastFloat {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 8888;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
#broadcastFloat.bc-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.bc-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(11,11,11,0.95);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  padding: 10px 16px 10px 14px;
  min-width: 320px;
  max-width: 600px;
}
.bc-signal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.2em;
  color: var(--red);
  flex-shrink: 0;
  text-transform: uppercase;
}
.bc-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  animation: bcPulse 2s ease infinite;
}
@keyframes bcPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.bc-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}
.bc-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 7px;
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}
.bc-badge-track   { background: rgba(214,40,40,0.2);   color: var(--red);       border: 1px solid rgba(214,40,40,0.3); }
.bc-badge-live    { background: rgba(214,40,40,0.9);   color: var(--white); }
.bc-badge-join    { background: rgba(245,245,245,0.08); color: var(--white); }
.bc-badge-collab  { background: rgba(100,100,220,0.2); color: #88f; }
.bc-badge-system  { background: transparent; color: var(--steel); border: 1px solid var(--border); }
.bc-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;   /* allows flex shrink + ellipsis to work */
  flex: 1;
  transition: opacity 0.25s ease;
}
.bc-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  color: var(--steel);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.bc-close {
  background: none;
  border: none;
  color: var(--steel);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.bc-close:hover { color: var(--white); }

/* ── CONTROL ROOM v2 ADDITIONS ──────────────────────────────────── */

/* Loading state */
.cr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px 40px;
}
.cr-load-dot {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: crLoad 1.2s ease infinite;
}
.cr-load-dot:nth-child(2) { animation-delay: 0.2s; }
.cr-load-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes crLoad {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* Empty state (unified) */
.cr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 64px 40px;
  text-align: center;
}
.cr-empty-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.cr-empty-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(36px,5vw,52px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin-bottom: 18px;
}
.cr-empty-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--steel);
  line-height: 1.9;
  max-width: 420px;
  margin-bottom: 28px;
}
.cr-empty-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  background: none;
  border: 1px solid rgba(196,24,24,0.35);
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cr-empty-cta:hover {
  background: var(--red);
  color: var(--white);
}

/* Panel header */
.cr-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.cr-panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cr-count {
  font-size: 7px;
  color: var(--steel);
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  letter-spacing: 0.1em;
}
.cr-action-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cr-action-btn:hover { background: #a81818; }

/* Data tables */
.cr-table { padding: 0 40px 40px; }
.cr-table-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.cr-table-body { border: 1px solid var(--border); }
.cr-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.15s ease;
}
.cr-table-row:last-child { border-bottom: none; }
.cr-table-row:hover { background: rgba(245,245,245,0.02); }

/* 5-column tables (no actions col) */
.cr-table-head.col5 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.cr-table-row.col5  { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }

.cr-cell-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-cell-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.cr-cell-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--white);
}
.cr-cell-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cr-row-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border);
  color: var(--steel);
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cr-row-btn:hover { border-color: var(--white); color: var(--white); }
.cr-row-btn-del:hover { border-color: var(--red); color: var(--red); }
.cr-row-btn-sp { border-color: #1DB954; color: #1DB954; }
.cr-row-btn-sp:hover { background: #1DB954; color: #000; border-color: #1DB954; }

/* Spotify audio indicator dot in queue rows */
.queue-sp-dot {
  font-size: 8px;
  color: #1DB954;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.9;
}

/* ── LINKED SPOTIFY PLAYLISTS GRID ───────────────────────────────── */
.sp-playlists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 0 var(--page-pad, 40px);
}
.sp-pl-card {
  cursor: pointer;
  transition: transform 0.18s;
}
.sp-pl-card:hover { transform: translateY(-3px); }
.sp-pl-art {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  background: var(--bg2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-pl-mono {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: rgba(245,245,245,0.15);
  letter-spacing: -0.02em;
}
.sp-pl-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
}
.sp-pl-card:hover .sp-pl-overlay { opacity: 1; }
.sp-pl-play-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #1DB954;
  border: none;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-left: 3px;
}
.sp-pl-info { padding: 10px 2px 0; }
.sp-pl-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 4px;
}
.sp-pl-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--steel);
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 640px) {
  .sp-playlists-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
}

/* Status badges */
.cr-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.cr-status-live, .cr-status-active, .cr-status-published, .cr-status-accepted, .cr-status-featured, .cr-status-open {
  background: rgba(0,200,100,0.12);
  color: #0c6;
  border: 1px solid rgba(0,200,100,0.25);
}
.cr-status-draft, .cr-status-pending, .cr-status-queued, .cr-status-early, .cr-status-in_talks {
  background: rgba(245,245,245,0.06);
  color: var(--steel);
  border: 1px solid var(--border);
}
.cr-status-review, .cr-status-ready, .cr-status-in_progress, .cr-status-confirmed {
  background: rgba(255,180,0,0.1);
  color: #fa0;
  border: 1px solid rgba(255,180,0,0.25);
}
.cr-status-declined, .cr-status-removed, .cr-status-inactive, .cr-status-closed {
  background: rgba(214,40,40,0.1);
  color: var(--red);
  border: 1px solid rgba(214,40,40,0.25);
}

/* Stat grid */
.cr-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 0 40px 32px;
}
.cr-stat-card {
  background: var(--bg);
  padding: 28px 24px;
}
.cr-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.cr-stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Notifications */
.cr-notif-list { padding: 0 40px 40px; }
.cr-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cr-notif-row:last-child { border-bottom: none; }
.cr-notif-unread { background: rgba(214,40,40,0.03); padding: 14px; margin: 0 -14px; border-left: 2px solid var(--red); }
.cr-notif-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  flex-shrink: 0;
  margin-top: 2px;
  background: rgba(245,245,245,0.06);
  border: 1px solid var(--border);
  color: var(--steel);
}
.cr-notif-content { flex: 1; min-width: 0; }
.cr-notif-msg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--white);
  line-height: 1.7;
}
.cr-notif-actor {
  font-size: 8px;
  color: var(--steel);
  margin-top: 3px;
}
.cr-notif-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  color: var(--steel);
  flex-shrink: 0;
}

/* Quick Form (inline modal) */
.cr-quick-form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.cr-quick-form-box {
  background: var(--bg);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 32px;
  position: relative;
}
.cr-quick-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--steel);
  font-size: 14px;
  cursor: pointer;
}
.cr-quick-close:hover { color: var(--white); }
.cr-quick-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}
.cr-quick-fields { display: flex; flex-direction: column; gap: 14px; }

/* ── MOBILE HERO ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Hero: full viewport height, flex layout */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100svh !important;
    min-height: 560px !important;
    max-height: 900px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Background layers fill the full hero */
  .hero-slides,
  .hero-overlay,
  .hero-vignette {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }

  /* Brand image fills hero as background */
  .hero-brand-picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }
  .hero-brand-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 60% center !important;
  }

  /* Content pinned to bottom, scrolls up with text */
  .hero-content {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 5 !important;
    padding: 48px 24px 108px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    /* Gradient so text is always readable */
    background: linear-gradient(
      to top,
      rgba(11,11,11,0.98) 0%,
      rgba(11,11,11,0.85) 30%,
      rgba(11,11,11,0.50) 60%,
      transparent 100%
    ) !important;
  }

  .hero-badge {
    font-size: 8px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 12px !important;
    opacity: 0.9;
  }
  .hero-title {
    font-size: clamp(40px, 12vw, 60px) !important;
    line-height: 0.93 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em;
  }
  .hero-sub {
    font-size: 10px !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
    opacity: 0.75;
  }
  .hero-actions {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px 20px !important;
    margin-top: 20px !important;
  }
  .hero-play-btn { gap: 10px; }
  .hero-play-label { font-size: 9px; letter-spacing: 0.15em; }
  .hero-play-circle { width: 40px; height: 40px; }
  .hero-enter-link { font-size: 9px; letter-spacing: 0.12em; }
  .hero-dots {
    bottom: 76px !important;
    right: 24px !important;
    left: auto !important;
  }

  /* Stat strip */
  .stats-strip { padding: 20px 16px !important; }
  .stats-strip-inner { flex-wrap: wrap; gap: 16px !important; }
  .stat-item { min-width: 80px; }

  /* Sections */
  .section { padding: 48px 16px !important; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Platform rows */
  .platform-row { flex-wrap: wrap; gap: 8px; padding: 20px 16px; }
  .platform-row-tags { display: none; }

  /* Featured block */
  .featured-block { min-height: 240px !important; }
  .featured-title { font-size: 48px !important; }

  /* Track cards */
  .carousel-track { gap: 12px; padding-bottom: 8px; }
  .track-card { min-width: 140px; }

  /* BTT cards */
  .btt-grid { grid-template-columns: 1fr !important; gap: 1px; }

  /* Control room mobile */
  .cr-layout { grid-template-columns: 1fr !important; }
  .cr-sidebar {
    position: static !important;
    height: auto !important;
    width: 100% !important;
  }
  .cr-panel { padding: 24px 16px !important; }
  .cr-hero { height: 140px !important; padding: 20px 16px !important; }
  .cr-table { padding: 0 16px 24px; }
  .cr-table-head,
  .cr-table-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
  .cr-table-head span:nth-child(n+3),
  .cr-table-row span:nth-child(n+3) { display: none; }
  .cr-stat-grid { margin: 0 16px 24px; grid-template-columns: 1fr 1fr; }
  .cr-panel-header { padding: 20px 16px 14px; }
  .cr-notif-list { padding: 0 16px 24px; }

  /* Broadcast float mobile */
  #broadcastFloat {
    bottom: 80px;
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
  }
  #broadcastFloat.bc-visible {
    transform: none;
  }
  .bc-inner { min-width: 0; }
  .bc-sub { display: none; }
}

/* ── TABLET (641–960px) ───────────────────────────────────────────── */
@media (max-width: 960px) and (min-width: 641px) {
  .hero-title { font-size: clamp(52px, 8vw, 80px) !important; }
  .hero-actions { gap: 20px; margin-top: 28px; }
  .cr-layout { grid-template-columns: 220px 1fr; }
  .cr-table-head,
  .cr-table-row { grid-template-columns: 2fr 1fr 1fr 1fr !important; }
  .cr-table-head span:nth-child(5),
  .cr-table-head span:nth-child(6),
  .cr-table-row span:nth-child(5),
  .cr-table-row span:nth-child(6) { display: none; }
  .cr-panel { padding: 28px 24px; }
  .cr-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── ABOUT PAGE — MISSION GRID MOBILE ───────────────────────────── */
@media (max-width: 640px) {
  .about-mission-grid {
    grid-template-columns: 1fr !important;
  }
  .about-mission-grid > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .about-backstory-img { display: none; }
}

/* ── CR AUTH GATE OVERLAY ───────────────────────────────────────── */
.cr-auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  text-align: center;
  padding: 40px 24px;
}
.cr-auth-gate-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 64px;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.cr-auth-gate-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--steel);
  line-height: 2;
  max-width: 380px;
  margin-bottom: 32px;
}
.cr-auth-gate-btn {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 14px 32px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 8px;
  transition: background 0.2s ease;
}
.cr-auth-gate-btn:hover { background: #a81818; }
.cr-auth-gate-btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--steel);
}
.cr-auth-gate-btn-ghost:hover { background: none; border-color: var(--white); color: var(--white); }

/* ══════════════════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVENESS — 0PROMORECORDS
   Covers: about, radio, editorial, control-room, collab, community
   ══════════════════════════════════════════════════════════════════ */

/* ── ABOUT PAGE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .about-backstory-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .about-mission-grid {
    grid-template-columns: 1fr !important;
  }
  .about-mission-grid > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .about-mission-grid > div:last-child { border-bottom: none; }

  /* About story sidebar — stack on mobile */
  .about-story-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .about-story-grid > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
  }
  .about-story-grid > div:first-child > div:first-child {
    width: 40px !important;
    height: 2px !important;
    min-height: unset !important;
    margin-bottom: 0 !important;
  }
}

/* ── ABOUT PAGE SECTIONS — padding on mobile ────────────────────── */
@media (max-width: 640px) {
  .about-section-padded {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  section[style*="padding:80px 40px"],
  section[style*="padding:100px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* About hero section */
  section[style*="padding:100px 40px 140px"] {
    padding: 80px 20px 80px !important;
  }
  /* Mission grid cells padding */
  .about-mission-grid > div[style*="padding:64px 40px"] {
    padding: 40px 20px !important;
  }
}

/* ── CONTROL ROOM ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cr-layout {
    display: block !important;
    grid-template-columns: unset !important;
  }
  .cr-sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    overflow: visible !important;
  }
  .cr-main { overflow: auto; }
  .cr-hero { padding: 40px 20px !important; }
  .cr-panel { padding: 24px 20px !important; }
  .role-tabs { grid-template-columns: repeat(3, 1fr) !important; }
  .cr-profile { padding: 20px 16px !important; }
  .cr-nav { max-height: 200px; overflow-y: auto; }
}

@media (max-width: 640px) {
  .cr-layout { display: block !important; }
  .cr-sidebar { display: block !important; }
  .cr-hero { min-height: 180px !important; }
  .cr-hero-stamp { font-size: 80px !important; }
  .cr-hero-title { font-size: 48px !important; }
  .cr-panel { padding: 20px 16px !important; }
  .cr-table-wrapper { overflow-x: auto; }
  .stat-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .cr-table { min-width: 600px; }
  .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .form-grid-2 { grid-template-columns: 1fr !important; }
}

/* ── RADIO PAGE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .radio-layout,
  .pl-layout {
    display: block !important;
  }
  .pl-sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .pl-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .pl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .queue-track { padding: 10px 16px !important; }
  .now-playing-bar { flex-wrap: wrap; gap: 12px; }
}

/* ── EDITORIAL PAGE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: 1fr !important;
  }
  .editorial-featured {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .essay-cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .essay-card { margin: 0 !important; }
  .essay-reader-content { padding: 32px 20px !important; }
  .essay-reader-header { padding: 32px 20px !important; }
  .editorial-hero { padding: 80px 20px 60px !important; }
}

/* ── COLLAB PAGE ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .collab-grid,
  .challenge-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .challenge-card { min-height: auto !important; }
  .collab-filters { flex-wrap: wrap; gap: 8px !important; padding: 0 20px 12px !important; }
}

/* ── COMMUNITY PAGE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .community-layout {
    display: block !important;
  }
  .community-sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
}

/* ── JOIN SECTION ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .join-section { min-height: 340px; }
  .join-content { padding: 48px 20px; max-width: 100%; }
  .join-title { font-size: clamp(40px, 13vw, 64px) !important; }
  .join-form { flex-wrap: wrap; gap: 8px; }
  .join-form input { width: 100%; }
}

/* ── MODALS ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-box {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    margin: 16px !important;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .modal-tabs { gap: 0; }
  .modal-tab {
    font-size: 8px !important;
    padding: 14px 10px !important;
    letter-spacing: 0.08em !important;
  }
  .role-select-row { gap: 6px !important; }
  .role-select-btn { padding: 8px 10px !important; font-size: 8px !important; }
}

/* ── NAV MOBILE SPACING ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav-right { gap: 8px; }
  .btn-nav-spotify { display: none !important; }
}

/* ── GENERAL TOUCH TARGETS ──────────────────────────────────────── */
@media (max-width: 640px) {
  .cr-nav-item { min-height: 44px; display: flex; align-items: center; }
  .role-tab { min-height: 44px; }
  a, button { -webkit-tap-highlight-color: transparent; }

  /* Prevent horizontal overflow everywhere */
  body { overflow-x: hidden; }
  * { max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* dsp-embed-container is off-screen by default (managed by product.js) */
  #dsp-embed-container { bottom: -9999px !important; left: -9999px !important; }
}

/* ── NEWSLETTER BAR ─────────────────────────────────────────── */
.newsletter-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.newsletter-label {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.newsletter-form-row {
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 460px;
}
.newsletter-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 8px 14px;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.newsletter-input:focus { border-color: var(--red); }
.newsletter-input::placeholder { color: rgba(245,245,245,0.2); }
.newsletter-btn {
  background: var(--red);
  color: var(--white);
  border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.newsletter-btn:hover { opacity: 0.85; }
.newsletter-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.newsletter-status {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .newsletter-bar { padding: 12px 20px; gap: 10px; }
  .newsletter-form-row { max-width: 100%; width: 100%; }
  .newsletter-label { font-size: 7px; }
}

/* ── ROLE GATE BODY CLASSES ─────────────────────────────────── */
body.role-admin .admin-only { display: block !important; }
body:not(.role-admin) .admin-only { display: none !important; }
body.role-label .label-only { display: block !important; }
body:not(.role-label) .label-only { display: none !important; }
body.role-artist .artist-only { display: block !important; }
body:not(.role-artist) .artist-only { display: none !important; }
body.role-curator .curator-only { display: block !important; }
body:not(.role-curator) .curator-only { display: none !important; }

/* ── MOBILE RESPONSIVENESS IMPROVEMENTS ────────────────────── */
@media (max-width: 900px) {
  /* Reduce nav padding on tablet */
  .nav { padding: 0 20px; }

  /* Control room sidebar collapse */
  .cr-layout { grid-template-columns: 1fr; }
  .cr-sidebar { position: static; height: auto; }
}

@media (max-width: 640px) {
  /* Nav */
  .nav { padding: 0 16px; }

  /* Section padding */
  .section { padding: 48px 20px; }

  /* Hero sections */
  .hero, .editorial-hero, .cr-hero { padding: 32px 20px; }

  /* Modal */
  .modal-box { margin: 12px; padding: 28px 20px; width: auto; }
  .modal-title { font-size: 36px; }

  /* About backstory grid */
  .about-backstory { grid-template-columns: 1fr !important; }
  .about-backstory-img { min-height: 300px; }

  /* Editorial grid */
  .essay-grid { grid-template-columns: 1fr !important; }

  /* Community grid */
  .community-grid, .collab-grid { grid-template-columns: 1fr !important; }

  /* Radio page */
  .radio-layout { grid-template-columns: 1fr !important; }
  .radio-sidebar { border-left: none; border-top: 1px solid var(--border); }

  /* Footer grid */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }

  /* Control room main */
  .cr-main { min-width: 0; }
  .cr-hero { padding: 24px 16px; min-height: auto; }
  .cr-hero-stamp { display: none; }

  /* Track cards */
  .track-grid { grid-template-columns: 1fr 1fr !important; }

  /* Stats strip */
  .stats-strip { padding: 10px 16px; gap: 16px; overflow-x: auto; }
}

@media (max-width: 400px) {
  .modal-title { font-size: 28px; }
  .track-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
}