/* ─────────────────────────────────────────────
   THATFEELRADIO — Final UI CSS (v6)
   Champagne Gold (#D4AF37) · Deep Midnight Blue
   Logo Image · Feed · Artist Modal · 4-Tab Nav
   ───────────────────────────────────────────── */

/* ── DESIGN TOKENS — Champagne Gold Palette ── */
:root {
  /* Chassis */
  --bg-deep: #050510;
  --bg-carbon: #1A1A2E;
  --bg-panel: rgba(26, 26, 46, 0.65);

  /* Primary — Champagne Gold */
  --accent: #D4AF37;
  --accent-glow: rgba(212, 175, 55, 0.35);
  --accent-dim: rgba(212, 175, 55, 0.10);

  /* Secondary — Warm Rose (from logo hand outlines) */
  --rose: #E85A6E;
  --rose-glow: rgba(232, 90, 110, 0.30);
  --rose-dim: rgba(232, 90, 110, 0.10);

  /* Tertiary — Neon Cyan (logo arc highlight) */
  --cyan: #00D4FF;
  --cyan-dim: rgba(0, 212, 255, 0.08);

  /* LCD Cream */
  --cream: #F5E6D0;
  --cream-dim: rgba(245, 230, 208, 0.10);

  /* Neutrals */
  --silver: #8899AA;
  --silver-dim: rgba(136, 153, 170, 0.20);
  --strobe: #FFFFFF;
  --text-primary: #F0EDE8;
  --text-secondary: #9098A8;
  --text-muted: #445566;
  --danger: #FF3366;
  --success: #00FFAA;
  --metal-light: #2A3545;
  --metal-dark: #101828;

  /* Fonts */
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Inter', sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 50%;

  /* Effects */
  --glass-blur: 25px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Warm gold ambient vignette */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 40% 0%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 100%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 4px;
}

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
#app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(5, 5, 16, 0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid rgba(212, 175, 55, 0.06);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo Image (replaces text) */
.brand-logo-img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.15));
  transition: var(--transition);
}

.brand-logo-img:hover {
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.30));
}

/* LIVE badge — Champagne Gold */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(212, 175, 55, 0.20);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.live-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: var(--radius-full);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5);
  }

  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0);
  }
}

/* ── THAT FEEL RECORDS Button ── */
.tfr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(160deg, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.02));
  transition: var(--transition);
  white-space: nowrap;
}

.tfr-btn:hover {
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.10);
  color: var(--cream);
}

.tfr-btn:active {
  transform: scale(0.96);
}

.tfr-icon {
  font-size: 0.6rem;
  animation: slow-spin 8s linear infinite;
}

.tfr-label {
  font-weight: 400;
}

/* Cart toggle */
.cart-toggle {
  position: relative;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 7px;
  cursor: pointer;
  color: var(--silver);
  transition: var(--transition);
}

.cart-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.cart-icon {
  width: 20px;
  height: 20px;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: var(--bg-deep);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: var(--transition);
}

.cart-count.visible {
  opacity: 1;
  transform: scale(1);
}

/* ══════════════════════════════════════
   NAVIGATION TABS (4-tab layout)
   ══════════════════════════════════════ */
#app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  background: rgba(5, 5, 16, 0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid rgba(212, 175, 55, 0.06);
  padding-bottom: var(--safe-bottom);
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.nav-tab svg {
  width: 18px;
  height: 18px;
}

.nav-tab.active {
  color: var(--accent);
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
}

.nav-tab:hover {
  color: var(--text-secondary);
}

/* ══════════════════════════════════════
   MAIN / SECTIONS
   ══════════════════════════════════════ */
#app-main {
  flex: 1;
  position: relative;
  z-index: 1;
  padding-bottom: 64px;
}

.app-section {
  display: none;
  min-height: calc(100dvh - 120px);
}

.app-section.active {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════
   PLAYER SECTION
   ══════════════════════════════════════ */
#section-player {
  position: relative;
  overflow: hidden;
}

#visualizer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.player-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 40px;
}

/* ══════════════════════════════════════
   RADIO PLAYER ZONE — Champagne Gold
   ══════════════════════════════════════ */
.radio-player-zone {
  width: 100%;
  max-width: 400px;
}

.rpz-frame {
  background: var(--bg-deep);
  border: 1px solid rgba(212, 175, 55, 0.06);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.02),
    0 -1px 0 rgba(0, 0, 0, 0.4),
    0 10px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.006) 0px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px,
      rgba(255, 255, 255, 0.006) 4px),
    linear-gradient(180deg, #0A0A1A, var(--bg-deep));
}

/* ── Album Artwork ── */
.rpz-artwork {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-carbon);
  position: relative;
  overflow: hidden;
}

.rpz-artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

.rpz-artwork-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0A0A1A, #1A1A2E);
}

.rpz-vinyl-icon {
  font-size: 5rem;
  color: rgba(212, 175, 55, 0.10);
  animation: slow-spin 12s linear infinite;
}

@keyframes slow-spin {
  to {
    transform: rotate(360deg);
  }
}

body.playing .rpz-vinyl-icon {
  color: rgba(212, 175, 55, 0.25);
}

/* Live Overlay — Champagne Gold */
.rpz-live-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 5, 16, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.20);
}

.rpz-live-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: var(--radius-full);
  animation: live-energy-pulse 0.8s ease-in-out infinite;
}

@keyframes live-energy-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  }

  50% {
    transform: scale(1.3);
    box-shadow: 0 0 8px 3px rgba(212, 175, 55, 0.3);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

.rpz-live-text {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: var(--accent);
}

/* ── Time Bar — Champagne Gold gradient ── */
.rpz-time-bar-wrap {
  padding: 12px 16px 4px;
}

.rpz-time-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.rpz-time-bar-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #E8C84A);
  border-radius: 2px;
  transition: width 1s linear;
  box-shadow: 0 0 6px var(--accent-glow);
}

/* Time labels — LCD Cream */
.rpz-time-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--cream);
  letter-spacing: 1px;
  opacity: 0.5;
}

/* ── Song Info ── */
.rpz-song-info {
  padding: 8px 16px 12px;
  text-align: center;
}

.rpz-station-name {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 3px;
  color: var(--cream);
  margin-bottom: 6px;
  opacity: 0.45;
}

/* Song title — Champagne Gold accent */
.rpz-song-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--accent);
  margin-bottom: 4px;
  transition: opacity 0.4s ease;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

/* Artist name — clickable for profile */
.rpz-artist-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--cream);
  letter-spacing: 1px;
  transition: all 0.25s ease;
  opacity: 0.65;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(245, 230, 208, 0);
}

.rpz-artist-name:hover {
  opacity: 1;
  color: var(--accent);
  border-bottom-color: rgba(212, 175, 55, 0.3);
}

/* ── Transport Controls ── */
.rpz-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 16px 12px;
}

.rpz-ctrl-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(42, 53, 69, 0.5), rgba(16, 24, 40, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--silver);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.008) 0px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0.008) 3px),
    linear-gradient(160deg, rgba(42, 53, 69, 0.5), rgba(16, 24, 40, 0.6));
}

.rpz-ctrl-btn:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.08);
}

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

/* Play Knob — Champagne Gold active state */
.rpz-play-knob {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.knob-chassis {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at 35% 35%, #2A3545, #1A2535 50%, #101828);
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 3px rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background-image:
    repeating-conic-gradient(rgba(255, 255, 255, 0.012) 0deg,
      rgba(255, 255, 255, 0) 4deg,
      rgba(255, 255, 255, 0) 8deg,
      rgba(255, 255, 255, 0.012) 12deg),
    radial-gradient(circle at 35% 35%, #2A3545, #1A2535 50%, #101828);
}

.knob-chassis:hover {
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, 0.20),
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 175, 55, 0.08),
    inset 0 1px 3px rgba(255, 255, 255, 0.04);
}

.rpz-play-knob:active .knob-chassis {
  transform: scale(0.93);
}

body.playing .knob-chassis {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 30px var(--accent-glow),
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 3px rgba(255, 255, 255, 0.04);
  animation: beat-pulse 0.5s ease-in-out infinite;
}

@keyframes beat-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--accent-glow), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.04);
  }

  50% {
    box-shadow: 0 0 0 3px var(--accent), 0 0 40px rgba(212, 175, 55, 0.25), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.04);
  }
}

.knob-cap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: linear-gradient(145deg, #151E2B, #0C1420);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 1rem;
  transition: var(--transition);
}

body.playing .knob-cap {
  color: var(--accent);
}

/* ── Volume Knob ── */
.rpz-volume-knob-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rotary-knob {
  width: 36px;
  height: 36px;
  position: relative;
  cursor: pointer;
  outline: none;
}

.rotary-track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 255, 255, 0.03);
}

.rotary-cap {
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at 40% 40%, #3A4A5A, #1A2535 55%, #101828);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.04);
  background-image:
    repeating-conic-gradient(rgba(255, 255, 255, 0.015) 0deg,
      rgba(255, 255, 255, 0) 4deg,
      rgba(255, 255, 255, 0) 8deg,
      rgba(255, 255, 255, 0.015) 12deg),
    radial-gradient(circle at 40% 40%, #3A4A5A, #1A2535 55%, #101828);
  transition: transform 0.1s ease;
}

/* Volume pointer — Gold */
.rotary-indicator {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 7px;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ── Listeners — Gold ── */
.rpz-listeners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 1.5px;
}

.listener-dot {
  width: 5px;
  height: 5px;
  background: var(--success);
  border-radius: var(--radius-full);
  animation: listener-pulse 2s ease-in-out infinite;
}

@keyframes listener-pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.5);
  }

  50% {
    opacity: 0.5;
    box-shadow: 0 0 0 5px rgba(0, 255, 170, 0);
  }
}

/* ══════════════════════════════════════
   SHARED SECTION STYLES
   ══════════════════════════════════════ */
.section-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cream);
}

.hub-badge {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(212, 175, 55, 0.18);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════
   FEED — Radio Stories (Blog)
   ══════════════════════════════════════ */
.feed-container {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 120px);
}

.feed-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.06);
}

.feed-subtitle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.feed-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Story Card */
.story-card {
  background: var(--bg-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  animation: msg-slide-in 0.4s ease-out;
}

.story-card:hover {
  border-color: rgba(212, 175, 55, 0.10);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.story-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}

.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.story-card:hover .story-img {
  transform: scale(1.03);
}

.story-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: 2px;
  color: var(--bg-deep);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.story-body {
  padding: 16px;
}

.story-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cream);
  margin-bottom: 6px;
  line-height: 1.4;
}

.story-excerpt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.story-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.story-date {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.story-read-more {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--accent);
  letter-spacing: 1px;
  text-decoration: none;
  transition: var(--transition);
}

.story-read-more:hover {
  color: var(--cream);
}

/* ══════════════════════════════════════
   VENTURZ COMMUNITY HUB
   ══════════════════════════════════════ */
.community-hub {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 120px);
}

.hub-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.05);
}

.hub-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.hub-subtitle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.hub-embed-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.hub-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  max-width: 360px;
  width: 100%;
}

.hub-placeholder-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.hub-placeholder-icon svg {
  opacity: 0.7;
}

.hub-placeholder-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cream);
}

.hub-placeholder-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hub-placeholder-url {
  width: 100%;
  margin-top: 4px;
}

.url-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.url-box {
  width: 100%;
  padding: 10px 14px;
  background: rgba(16, 24, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--cream);
  text-align: center;
  opacity: 0.4;
}

/* ══════════════════════════════════════
   MARKET — Launch Cart (iframe-ready)
   ══════════════════════════════════════ */
.market-container {
  padding: 20px;
}

.market-header {
  margin-bottom: 20px;
}

.market-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.market-subtitle {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.lc-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lc-embed-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* LaunchCart iframe when loaded */
.lc-iframe {
  width: 100%;
  min-height: 500px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-carbon);
}

.lc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  width: 100%;
}

.lc-placeholder-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.lc-placeholder-icon svg {
  opacity: 0.7;
}

.lc-placeholder-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cream);
}

.lc-placeholder-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.lc-product-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lc-slot {
  aspect-ratio: 1;
  border: 1px dashed rgba(212, 175, 55, 0.10);
  border-radius: var(--radius-md);
  background: rgba(16, 24, 40, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  cursor: pointer;
}

.lc-slot:hover {
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.03);
}

.lc-slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.lc-slot-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: rgba(212, 175, 55, 0.12);
}

.lc-slot-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════
   ARTIST PROFILE MODAL — Frosted Glass
   ══════════════════════════════════════ */
.artist-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.artist-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.artist-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  z-index: 301;
  background: rgba(8, 12, 24, 0.82);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid rgba(212, 175, 55, 0.10);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.artist-modal.open {
  transform: translateY(0);
}

.artist-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.06);
  flex-shrink: 0;
}

.artist-close-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  color: var(--silver);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition);
}

.artist-close-btn:hover {
  color: var(--danger);
  border-color: rgba(255, 51, 102, 0.3);
}

.artist-modal-body {
  flex: 1;
  overflow-y: auto;
}

/* Artist Hero Banner */
.artist-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-carbon);
}

.artist-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.artist-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(5, 5, 16, 0.90));
}

.artist-hero-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent-glow);
}

.artist-hero-genre {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  color: var(--cream);
  opacity: 0.6;
}

.artist-bio {
  padding: 16px 20px;
}

.artist-bio p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.artist-related {
  padding: 0 20px 20px;
}

.artist-related-title {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.artist-related-title i {
  font-size: 0.6rem;
}

.artist-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.artist-track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: var(--transition);
}

.artist-track-item:hover {
  border-color: rgba(212, 175, 55, 0.12);
  background: rgba(212, 175, 55, 0.03);
}

.artist-track-art {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-carbon);
  flex-shrink: 0;
}

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

.artist-track-title {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-track-album {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════
   SONG HISTORY MODAL — Apple Glass
   ══════════════════════════════════════ */
.history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.history-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.history-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  z-index: 301;
  background: rgba(8, 12, 24, 0.80);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid rgba(212, 175, 55, 0.08);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-modal.open {
  transform: translateY(0);
}

.history-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.05);
  flex-shrink: 0;
}

.history-close-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  color: var(--silver);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition);
}

.history-close-btn:hover {
  color: var(--danger);
  border-color: rgba(255, 51, 102, 0.3);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  animation: msg-slide-in 0.3s ease-out;
}

.history-art {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-carbon);
  flex-shrink: 0;
}

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

.history-song {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-artist {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--cream);
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-time {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   CART DRAWER
   ══════════════════════════════════════ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 85vw);
  background: rgba(8, 12, 26, 0.88);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid rgba(212, 175, 55, 0.06);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.05);
}

.cart-close-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  color: var(--silver);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition);
}

.cart-close-btn:hover {
  color: var(--danger);
  border-color: rgba(255, 51, 102, 0.3);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.cart-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(212, 175, 55, 0.05);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 1px;
  color: var(--cream);
}

.checkout-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--bg-deep);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition);
}

.checkout-btn:hover {
  background: #E0C050;
  box-shadow: 0 0 30px var(--accent-glow);
}

.checkout-btn:active {
  transform: scale(0.97);
}

/* ══════════════════════════════════════
   TOAST
   ══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(16, 24, 40, 0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 300;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes msg-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (min-width: 768px) {
  body {
    max-width: 480px;
    margin: 0 auto;
    border-left: 1px solid rgba(212, 175, 55, 0.03);
    border-right: 1px solid rgba(212, 175, 55, 0.03);
    box-shadow: 0 0 80px rgba(212, 175, 55, 0.02);
  }

  #app-nav {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
  }

  .radio-player-zone {
    max-width: 420px;
  }

  .history-modal,
  .artist-modal {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
  }

  .history-modal.open,
  .artist-modal.open {
    transform: translateX(-50%) translateY(0);
  }
}

/* ─────────────────────────────────────────────
   V2 PATCH — polished fallback cards + embeds
   ───────────────────────────────────────────── */
.hub-iframe,
.lc-iframe {
  width: 100%;
  min-height: calc(100dvh - 190px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-carbon);
}

.tf-fallback-card {
  position: relative;
  width: min(92vw, 420px);
  margin: 0 auto;
  padding: 32px 24px;
  overflow: hidden;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 175, 55, 0.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(26, 26, 46, 0.88), rgba(5, 5, 16, 0.96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}

.tf-fallback-glow {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, transparent, rgba(212,175,55,0.08), rgba(0,212,255,0.06), transparent);
  animation: tf-spin 12s linear infinite;
  opacity: 0.8;
}

@keyframes tf-spin { to { transform: rotate(360deg); } }

.tf-fallback-icon,
.tf-fallback-card h3,
.tf-fallback-card p,
.tf-fallback-btn {
  position: relative;
  z-index: 1;
}

.tf-fallback-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.20);
  box-shadow: 0 0 26px rgba(212,175,55,0.12);
}

.tf-fallback-card h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  line-height: 1.35;
  letter-spacing: 2px;
  color: var(--cream);
}

.tf-fallback-card p {
  max-width: 34ch;
  margin: 0 auto 20px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tf-fallback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.8px;
  text-decoration: none;
  color: var(--bg-deep);
  background: linear-gradient(135deg, var(--accent), #f3d56a);
  box-shadow: 0 10px 26px rgba(212,175,55,0.18);
}

.tf-fallback-btn:active { transform: scale(0.98); }

@media (min-width: 760px) {
  .radio-player-zone { max-width: 440px; }
  .player-container { padding-top: 28px; }
  .feed-scroll { max-width: 860px; margin: 0 auto; width: 100%; }
  .market-container { max-width: 900px; margin: 0 auto; width: 100%; }
}


/* ─────────────────────────────────────────────
   V3 POLISH OVERRIDES — Bigger navigation + premium feed
   ───────────────────────────────────────────── */

/* Bigger top controls */
#app-header {
  padding: 12px 18px;
}

.brand-logo-img {
  max-height: 62px;
}

.live-badge {
  font-size: 0.68rem;
  padding: 5px 10px;
  letter-spacing: 2.2px;
}

.tfr-btn {
  gap: 8px;
  padding: 8px 13px;
  font-size: 0.62rem;
  letter-spacing: 1.8px;
  border-radius: 8px;
}

.tfr-icon {
  font-size: 0.82rem;
}

.cart-toggle {
  padding: 10px;
}

.cart-icon {
  width: 24px;
  height: 24px;
}

/* Bigger bottom nav */
#app-nav {
  min-height: calc(76px + var(--safe-bottom));
  box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.48);
}

.nav-tab {
  gap: 6px;
  padding: 13px 0 10px;
  font-size: 0.68rem;
  letter-spacing: 1.6px;
}

.nav-tab svg {
  width: 24px;
  height: 24px;
}

.nav-tab.active::after {
  width: 38px;
  height: 3px;
  box-shadow: 0 0 14px var(--accent-glow);
}

#app-main {
  padding-bottom: 92px;
}

.app-section {
  min-height: calc(100dvh - 150px);
}

/* Bigger readable section headers */
.section-title {
  font-size: 1rem;
  letter-spacing: 2.3px;
}

.hub-badge {
  font-size: 0.62rem;
  padding: 4px 9px;
}

.feed-header,
.hub-header,
.market-header {
  padding: 20px 22px;
}

.feed-subtitle,
.hub-subtitle,
.market-subtitle {
  font-size: 0.72rem;
  line-height: 1.45;
}

/* Step up the feed cards */
.feed-container {
  height: calc(100dvh - 150px);
}

.feed-scroll {
  padding: 18px;
  gap: 24px;
}

.story-card {
  border-radius: 22px;
  border: 1px solid rgba(212, 175, 55, 0.10);
  background:
    linear-gradient(180deg, rgba(26,26,46,0.82), rgba(8,8,20,0.92));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
}

.story-img-wrap {
  aspect-ratio: 16 / 8.2;
  min-height: 138px;
  background: radial-gradient(circle at 35% 20%, rgba(212,175,55,.20), transparent 45%), #090914;
}

.story-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(5,5,16,0.86) 100%);
  pointer-events: none;
}

.story-img {
  filter: saturate(1.12) contrast(1.04);
}

.story-tag {
  top: 14px;
  left: 14px;
  font-size: 0.58rem;
  letter-spacing: 1.7px;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
}

.story-body {
  padding: 18px;
}

.story-title {
  font-size: 0.93rem;
  letter-spacing: 1.1px;
  line-height: 1.35;
  margin-bottom: 9px;
}

.story-excerpt {
  font-size: 0.88rem;
  line-height: 1.62;
  color: rgba(240,237,232,.78);
}

.story-date,
.story-read-more {
  font-size: 0.62rem;
}

/* Player text readability */
.rpz-song-title {
  font-size: 1.12rem;
  line-height: 1.35;
}

.rpz-artist-name {
  font-size: 0.82rem;
}

.rpz-station-name,
.rpz-listeners,
.rpz-time-labels {
  font-size: 0.66rem;
}

/* Desktop preview: keep phone app slightly larger */
@media (min-width: 900px) {
  .radio-player-zone {
    max-width: 430px;
  }

  .feed-container,
  .community-hub,
  .market-container {
    max-width: 430px;
    width: 100%;
    margin: 0 auto;
  }
}

/* Small phone guardrail */
@media (max-width: 420px) {
  .tfr-label { display: inline; }
  .tfr-btn { font-size: 0.54rem; padding: 7px 9px; }
  .brand-logo-img { max-height: 54px; }
  .nav-tab { font-size: 0.61rem; }
  .nav-tab svg { width: 22px; height: 22px; }
}



/* ══════════════════════════════════════
   V4 — ANALOG SOUL OS POLISH
   Mobile-first investor/demo layer
   ══════════════════════════════════════ */

/* App-stage background: subtle motion, not corny */
body::after {
  content: '';
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle at 18% 24%, rgba(232, 90, 110, 0.10), transparent 26%),
    radial-gradient(circle at 80% 12%, rgba(0, 212, 255, 0.08), transparent 28%),
    radial-gradient(circle at 52% 84%, rgba(212, 175, 55, 0.09), transparent 30%);
  filter: blur(10px);
  opacity: 0.8;
  animation: analog-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes analog-drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

/* Center phone-app on desktop so APK demo still feels mobile-first */
@media (min-width: 860px) {
  body {
    align-items: center;
  }

  #app-header,
  #app-nav,
  #app-main {
    width: min(430px, 100vw);
  }

  #app-header {
    left: 50%;
    transform: translateX(-50%);
  }

  #app-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-left: 1px solid rgba(212, 175, 55, 0.06);
    border-right: 1px solid rgba(212, 175, 55, 0.06);
  }
}

/* Spinning vinyl logo badge */
.header-left {
  gap: 12px;
}

.brand-logo-img {
  width: 54px;
  height: 54px;
  max-height: none;
  padding: 5px;
  border-radius: 50%;
  object-fit: contain;
  background:
    radial-gradient(circle at center, rgba(5, 5, 16, 0.20) 0 16%, rgba(212, 175, 55, 0.16) 17% 20%, transparent 21%),
    repeating-radial-gradient(circle at center, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.00) 2px 8px),
    radial-gradient(circle at 45% 38%, #101018 0%, #030307 68%, #000 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 22px rgba(212, 175, 55, 0.16),
    0 0 26px rgba(232, 90, 110, 0.08);
}

body.playing .brand-logo-img {
  animation: vinyl-spin 7.5s linear infinite;
}

@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

/* Bigger header buttons */
.tfr-btn {
  font-size: 0.62rem;
  padding: 8px 12px;
  min-height: 36px;
}

.tfr-icon {
  font-size: 0.8rem;
}

.live-badge {
  font-size: 0.62rem;
  padding: 5px 9px;
}

/* Bigger bottom nav: hardware pad feel */
#app-main {
  padding-bottom: 88px;
}

#app-nav {
  min-height: 82px;
}

.nav-tab {
  padding: 12px 0 10px;
  font-size: 0.68rem;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(0,0,0,0.18));
}

.nav-tab svg {
  width: 23px;
  height: 23px;
}

.nav-tab.active {
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.30);
}

/* Make small type less microscopic */
.rpz-station-name,
.rpz-time-labels,
.rpz-listeners,
.feed-subtitle,
.hub-subtitle,
.market-subtitle,
.story-date,
.story-read-more,
.hub-badge,
.url-label {
  font-size: 0.68rem;
}

.rpz-song-title {
  font-size: clamp(1.08rem, 4.2vw, 1.32rem);
}

.rpz-artist-name {
  font-size: 0.82rem;
}

/* Visual Deck module */
.visual-deck {
  position: relative;
  width: 100%;
  max-width: 400px;
  min-height: 156px;
  margin: 16px 0 0;
  padding: 18px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(16, 16, 28, 0.86), rgba(5, 5, 16, 0.96)),
    radial-gradient(circle at 25% 30%, rgba(232, 90, 110, 0.16), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.12), transparent 42%);
  border: 1px solid rgba(212, 175, 55, 0.10);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.visual-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.20);
  pointer-events: none;
}

.visual-orbit-one {
  width: 180px;
  height: 180px;
  right: -44px;
  top: -48px;
  animation: orbit-slow 16s linear infinite;
}

.visual-orbit-two {
  width: 118px;
  height: 118px;
  right: 34px;
  top: 18px;
  border-color: rgba(0, 212, 255, 0.18);
  animation: orbit-slow 11s linear infinite reverse;
}

@keyframes orbit-slow {
  to { transform: rotate(360deg); }
}

.visual-wave {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 24px;
  height: 44px;
  background:
    repeating-linear-gradient(90deg,
      rgba(212, 175, 55, 0.00) 0 10px,
      rgba(212, 175, 55, 0.30) 11px 13px,
      rgba(232, 90, 110, 0.16) 14px 18px,
      rgba(0, 212, 255, 0.12) 19px 22px,
      rgba(212, 175, 55, 0.00) 23px 34px);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 72%);
  opacity: 0.42;
  animation: wave-slide 8s linear infinite;
}

@keyframes wave-slide {
  from { transform: translateX(0); }
  to { transform: translateX(72px); }
}

.visual-deck-copy {
  position: relative;
  z-index: 1;
  max-width: 270px;
}

.visual-kicker {
  display: inline-block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  color: var(--accent);
}

.visual-deck-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--cream);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.visual-deck-copy p {
  font-size: 0.76rem;
  line-height: 1.48;
  color: var(--text-secondary);
}

.visual-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.visual-chip {
  border: 1px solid rgba(212, 175, 55, 0.14);
  background: rgba(255,255,255,0.035);
  color: var(--cream);
  border-radius: 999px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1px;
}

.visual-chip.active {
  background: rgba(212, 175, 55, 0.15);
  color: var(--accent);
}

/* Feed as editorial culture cards */
.feed-scroll {
  gap: 18px;
  padding-bottom: 100px;
}

.story-card {
  border-color: rgba(212, 175, 55, 0.08);
  background:
    linear-gradient(180deg, rgba(26,26,46,0.78), rgba(5,5,16,0.88));
}

.story-img-wrap {
  aspect-ratio: 1.9 / 1;
  border-bottom: 1px solid rgba(212, 175, 55, 0.08);
}

.story-title {
  font-size: 0.86rem;
  letter-spacing: 0.8px;
}

.story-excerpt {
  font-size: 0.84rem;
}

.story-tag {
  font-size: 0.58rem;
  padding: 5px 9px;
  border-radius: 999px;
}

.story-body {
  padding: 18px;
}

/* Community / Market demo cards feel intentional */
.hub-placeholder,
.lc-placeholder {
  border-color: rgba(212, 175, 55, 0.10);
  background:
    linear-gradient(160deg, rgba(26,26,46,0.72), rgba(5,5,16,0.92)),
    radial-gradient(circle at 20% 0%, rgba(212,175,55,0.08), transparent 44%);
}

.hub-placeholder-title,
.lc-placeholder-title {
  font-size: 0.92rem;
}

.hub-placeholder-desc,
.lc-placeholder-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
}


/* ══════════════════════════════════════
   V5 — THAT FEEL RADIO CULTURE APP
   Clearer labels · premium mobile demo · less abstract
   ══════════════════════════════════════ */
:root {
  --bg-deep: #050507;
  --bg-carbon: #111014;
  --bg-panel: rgba(17, 16, 20, 0.78);
  --accent: #C99A3E;
  --accent-glow: rgba(201, 154, 62, 0.32);
  --accent-dim: rgba(201, 154, 62, 0.12);
  --rose: #7B1E2B;
  --rose-glow: rgba(123, 30, 43, 0.25);
  --cyan: #2A9DA0;
  --cyan-dim: rgba(42, 157, 160, 0.08);
  --cream: #F6E9D0;
  --text-primary: #F6E9D0;
  --text-secondary: #B8AA96;
  --text-muted: #70685E;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(123,30,43,0.16), transparent 38%),
    radial-gradient(circle at 82% 8%, rgba(42,157,160,0.10), transparent 32%),
    linear-gradient(135deg, #09070a 0%, #050507 50%, #080b0e 100%);
}

body::after {
  background:
    radial-gradient(circle at 18% 24%, rgba(123, 30, 43, 0.18), transparent 28%),
    radial-gradient(circle at 80% 12%, rgba(42, 157, 160, 0.11), transparent 28%),
    radial-gradient(circle at 55% 86%, rgba(201, 154, 62, 0.10), transparent 30%);
  opacity: 0.65;
  animation: analog-drift 24s ease-in-out infinite alternate;
}

#section-player::before {
  content: '';
  position: fixed;
  inset: 92px calc(50% - 215px) 86px calc(50% - 215px);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,154,62,0.08), transparent 52%),
    repeating-radial-gradient(circle at 50% 38%, rgba(246,233,208,0.06) 0 1px, transparent 2px 36px);
  opacity: 0.45;
  animation: tf-breathe 14s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes tf-breathe {
  from { transform: scale(0.98); opacity: 0.32; }
  to { transform: scale(1.04); opacity: 0.56; }
}

/* Header record logo — clearer and higher-res asset */
.brand-logo-img {
  content: url('assets/that-feel-record-logo.png');
  width: 62px;
  height: 62px;
  padding: 0;
  background: #030307;
  border: 1px solid rgba(201,154,62,0.42);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.03) inset,
    0 0 26px rgba(201,154,62,0.22),
    0 0 34px rgba(123,30,43,0.14);
}

body.playing .brand-logo-img {
  animation: vinyl-spin 5.8s linear infinite;
}

.tfr-btn {
  color: var(--cream);
  border-color: rgba(201,154,62,0.28);
  background: linear-gradient(180deg, rgba(201,154,62,0.12), rgba(201,154,62,0.035));
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  padding: 10px 15px;
}

.live-badge { font-size: 0.68rem; }
.cart-toggle { min-width: 44px; min-height: 44px; }

/* Main player: less toy, more premium demo */
.radio-player-zone { max-width: 430px; }
.rpz-frame {
  border-color: rgba(201,154,62,0.14);
  border-radius: 26px;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.62),
    0 0 0 1px rgba(246,233,208,0.03) inset,
    0 0 60px rgba(123,30,43,0.10);
}
.rpz-artwork { border-bottom: 1px solid rgba(201,154,62,0.12); }
.rpz-artwork-img { filter: saturate(0.92) contrast(1.06); }
.rpz-song-title { color: var(--cream); font-size: clamp(1.22rem, 4.8vw, 1.52rem); }
.rpz-artist-name { color: var(--accent); font-size: 0.9rem; }
.rpz-station-name { color: var(--text-secondary); opacity: 0.72; }
.rpz-listeners { color: var(--cream); }
.knob-chassis { width: 72px; height: 72px; }
.knob-cap { width: 50px; height: 50px; }

/* Remove V4 internal concept module */
.visual-deck { display: none !important; }

/* Bottom nav: plain labels, obvious behavior */
#app-nav {
  min-height: 88px;
  border-top-color: rgba(201,154,62,0.18);
  background: rgba(5,5,7,0.95);
}
.nav-tab {
  font-size: 0.76rem;
  letter-spacing: 1.5px;
  color: rgba(246,233,208,0.48);
}
.nav-tab svg { width: 25px; height: 25px; }
.nav-tab.active {
  color: var(--accent);
  background: linear-gradient(180deg, rgba(201,154,62,0.10), rgba(201,154,62,0.02));
}

/* Explore = artist + culture magazine */
.feed-header,
.hub-header,
.market-header {
  padding: 22px 22px 14px;
}
.section-title {
  font-size: 1rem;
  letter-spacing: 2.4px;
}
.feed-subtitle,
.hub-subtitle,
.market-subtitle {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.feed-scroll {
  padding: 18px 16px 110px;
  gap: 22px;
}
.story-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(201,154,62,0.14);
  background:
    linear-gradient(180deg, rgba(22,20,24,0.86), rgba(5,5,7,0.94));
}
.story-img-wrap {
  aspect-ratio: 1.52 / 1;
}
.story-title {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--cream);
}
.story-excerpt {
  font-size: 0.9rem;
  line-height: 1.62;
}
.story-tag {
  background: rgba(246,233,208,0.92);
  color: #09070a;
}
.story-read-more { color: var(--accent); }

/* Community / Shop future modules */
.hub-placeholder,
.lc-placeholder {
  max-width: 395px;
  border-radius: 26px;
  border-color: rgba(201,154,62,0.16);
}
.hub-placeholder-title,
.lc-placeholder-title { font-size: 1.05rem; }
.hub-placeholder-desc,
.lc-placeholder-desc { font-size: 0.92rem; }
.url-box { font-size: 0.78rem; }

/* Desktop presentation: mobile app centered like an APK demo */
@media (min-width: 860px) {
  #app-header, #app-nav, #app-main { width: min(460px, 100vw); }
  #section-player::before { inset-left: calc(50% - 230px); inset-right: calc(50% - 230px); }
}

/* Motion should be subtle and accessible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  body.playing .brand-logo-img { animation: none !important; }
}

/* ══════════════════════════════════════
   V6 — INVESTOR DEMO CLEANUP
   Less abstract · clearer story cards · premium mobile polish
   ══════════════════════════════════════ */
:root {
  --accent: #B86A42;
  --accent-glow: rgba(184, 106, 66, 0.34);
  --accent-dim: rgba(184, 106, 66, 0.14);
  --cream: #F3E5CE;
  --text-primary: #F3E5CE;
  --text-secondary: #C8BCA7;
  --text-muted: #8E8170;
  --rose: #A93552;
  --cyan: #22A7A2;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(169, 53, 82, 0.18), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(34, 167, 162, 0.13), transparent 34%),
    radial-gradient(circle at 52% 82%, rgba(184, 106, 66, 0.14), transparent 35%),
    linear-gradient(145deg, #080608 0%, #040406 52%, #081010 100%);
}

body::after {
  opacity: 0.45;
  filter: blur(1px);
}

#app-header {
  width: min(500px, 100vw);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 16px;
  border-bottom-color: rgba(243, 229, 206, 0.08);
}

.brand-logo-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at center, #111 0 44%, #020202 45% 100%);
  box-shadow:
    0 0 0 2px rgba(243,229,206,0.06) inset,
    0 0 0 1px rgba(184,106,66,0.55),
    0 0 30px rgba(169,53,82,0.22),
    0 0 38px rgba(34,167,162,0.12);
}

.live-badge {
  font-size: 0.75rem;
  padding: 7px 11px;
}

.tfr-btn {
  min-height: 48px;
  font-size: 0.78rem;
  letter-spacing: 2px;
  padding: 12px 16px;
  border-radius: 12px;
}

.cart-toggle {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

#app-main {
  padding-top: 10px;
}

.radio-player-zone,
.feed-scroll,
.feed-header,
.community-hub,
.market-container {
  width: min(500px, 100vw);
}

.player-container {
  padding: 20px 14px 110px;
}

.rpz-frame {
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(12,10,12,0.96), rgba(5,5,7,0.98));
  box-shadow:
    0 28px 80px rgba(0,0,0,0.70),
    0 0 0 1px rgba(243,229,206,0.06) inset,
    0 0 70px rgba(169,53,82,0.12);
}

.rpz-artwork {
  aspect-ratio: 0.95 / 1;
  border-radius: 28px 28px 0 0;
}

.rpz-song-title {
  font-size: clamp(1.38rem, 5vw, 1.72rem);
  letter-spacing: 1.2px;
}

.rpz-artist-name {
  font-size: 1rem;
  letter-spacing: 1.4px;
}

/* Explore should read like a real culture feed, not abstract strips */
.feed-container {
  height: auto;
  min-height: calc(100dvh - 120px);
}

.feed-header {
  margin: 0 auto;
  padding: 30px 22px 14px;
}

.feed-subtitle {
  max-width: 360px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.feed-scroll {
  margin: 0 auto;
  padding: 16px 16px 120px;
  gap: 26px;
}

.story-card {
  position: relative;
  min-height: auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(243,229,206,0.09);
  background:
    linear-gradient(180deg, rgba(19,15,18,0.96), rgba(5,5,7,0.98));
  box-shadow:
    0 24px 64px rgba(0,0,0,0.52),
    0 0 0 1px rgba(184,106,66,0.05) inset;
}

.story-card-featured {
  border-color: rgba(184,106,66,0.36);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.60),
    0 0 60px rgba(184,106,66,0.12);
}

.story-img-wrap {
  position: relative;
  min-height: 245px;
  aspect-ratio: auto;
  border-bottom: none;
  background: #080608;
}

.story-card-featured .story-img-wrap {
  min-height: 300px;
}

.story-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.08) brightness(0.82);
  transform: scale(1.01);
}

.story-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.34) 42%, rgba(0,0,0,0.88) 100%),
    radial-gradient(circle at 20% 10%, rgba(184,106,66,0.22), transparent 34%);
  pointer-events: none;
}

.story-img-wrap::after { display: none; }

.story-tag {
  top: 16px;
  left: 16px;
  z-index: 4;
  background: rgba(243,229,206,0.94);
  color: #090608;
  font-size: 0.68rem;
  letter-spacing: 1.8px;
  padding: 7px 11px;
  border-radius: 999px;
}

.story-overlay-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}

.story-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 2.3px;
  color: var(--accent);
}

.story-title-on-image {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 5vw, 1.58rem);
  line-height: 1.2;
  letter-spacing: 0.8px;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0,0,0,0.72);
}

.story-body {
  display: block !important;
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, rgba(8,7,9,0.98), rgba(5,5,7,1));
}

.story-title { display: none; }

.story-excerpt {
  margin: 0 0 16px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

.story-meta {
  gap: 12px;
}

.story-date,
.story-read-more {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
}

.story-read-more {
  color: var(--cream);
  background: rgba(184,106,66,0.18);
  border: 1px solid rgba(184,106,66,0.30);
  border-radius: 999px;
  padding: 8px 11px;
  white-space: nowrap;
}

/* Bottom nav: larger, cleaner, APK-demo friendly */
#app-nav {
  width: min(500px, 100vw);
  left: 50%;
  transform: translateX(-50%);
  min-height: 96px;
  padding: 8px 6px calc(8px + var(--safe-bottom));
  background: rgba(5,5,7,0.96);
  box-shadow: 0 -16px 40px rgba(0,0,0,0.52);
}

.nav-tab {
  min-height: 76px;
  border-radius: 18px;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  gap: 7px;
}

.nav-tab svg {
  width: 28px;
  height: 28px;
}

.nav-tab.active {
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(184,106,66,0.25), rgba(184,106,66,0.06));
  box-shadow: 0 0 22px rgba(184,106,66,0.12);
}

.nav-tab.active::after {
  top: 5px;
  width: 32px;
  height: 3px;
  background: var(--accent);
}

@media (max-width: 430px) {
  .story-img-wrap { min-height: 220px; }
  .story-card-featured .story-img-wrap { min-height: 270px; }
  .story-excerpt { font-size: 0.94rem; }
  .nav-tab { font-size: 0.72rem; }
}

/* ==========================================================================
   V7 VISUAL UPGRADE - DJ loft / record label / liner notes
   Keeps the v6 app logic and integration placeholders intact.
   ========================================================================== */
:root {
  --bg-deep: #070504;
  --bg-carbon: #15100d;
  --bg-panel: rgba(20, 14, 10, 0.82);
  --accent: #f0a21f;
  --accent-glow: rgba(240, 162, 31, 0.32);
  --accent-dim: rgba(240, 162, 31, 0.13);
  --amber-hot: #ffd166;
  --rust: #bf5a2a;
  --clay: #7d3925;
  --cream: #f8ead1;
  --paper: #cbb991;
  --text-primary: #f8ead1;
  --text-secondary: #d3c2a5;
  --text-muted: #8f8069;
  --font-display: 'Oswald', 'Inter', sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

body {
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px),
    radial-gradient(circle at 14% 8%, rgba(191,90,42,0.28), transparent 36%),
    radial-gradient(circle at 86% 7%, rgba(240,162,31,0.15), transparent 34%),
    radial-gradient(circle at 50% 90%, rgba(83,35,20,0.34), transparent 42%),
    linear-gradient(145deg, #100906 0%, #050403 48%, #0d0a07 100%);
  background-size: 18px 18px, 18px 18px, auto, auto, auto, auto;
}

body::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(248,234,209,0.055), transparent 34%),
    repeating-radial-gradient(circle at 50% 36%, rgba(248,234,209,0.045) 0 1px, transparent 2px 31px),
    repeating-linear-gradient(100deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
  opacity: 0.7;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,4,3,0.34), transparent 16%, transparent 84%, rgba(5,4,3,0.34)),
    radial-gradient(circle at 50% 42%, transparent 0 31%, rgba(240,162,31,0.06) 31.3%, transparent 33%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 4px);
  opacity: 0.42;
  z-index: 0;
}

#app-header {
  width: min(520px, 100vw);
  min-height: 82px;
  padding: 12px 16px 10px;
  background:
    linear-gradient(180deg, rgba(15,10,7,0.96), rgba(7,5,4,0.9)),
    repeating-linear-gradient(90deg, rgba(248,234,209,0.03) 0 1px, transparent 1px 7px);
  border-bottom: 1px solid rgba(240,162,31,0.22);
}

.brand-logo-img {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(240,162,31,0.55);
  background:
    radial-gradient(circle at center, #0b0807 0 36%, #f0a21f 37% 39%, #100906 40% 68%, #040302 69% 100%);
  box-shadow:
    0 0 0 4px rgba(248,234,209,0.035) inset,
    0 0 28px rgba(240,162,31,0.22),
    0 10px 30px rgba(0,0,0,0.45);
}

.live-badge,
.hub-badge,
.story-tag {
  border-radius: 999px;
  text-transform: uppercase;
}

.live-badge {
  color: #120905;
  background: linear-gradient(180deg, var(--amber-hot), var(--accent));
  border-color: rgba(255,209,102,0.8);
  box-shadow: 0 0 20px rgba(240,162,31,0.18);
}

.live-dot,
.rpz-live-dot,
.listener-dot {
  background: #ffcf5b;
}

.tfr-btn,
.cart-toggle,
.rpz-ctrl-btn,
.tf-fallback-btn,
.story-read-more {
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(248,234,209,0.075), rgba(248,234,209,0.025)),
    linear-gradient(135deg, rgba(240,162,31,0.16), rgba(191,90,42,0.08));
  border-color: rgba(240,162,31,0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 24px rgba(0,0,0,0.28);
}

.player-container {
  padding: 18px 14px 120px;
}

.radio-player-zone {
  max-width: 430px;
}

.rpz-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240,162,31,0.24);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(22,14,9,0.98), rgba(8,5,4,0.99)),
    repeating-linear-gradient(90deg, rgba(248,234,209,0.026) 0 1px, transparent 1px 7px);
  box-shadow:
    0 34px 90px rgba(0,0,0,0.72),
    0 0 0 1px rgba(248,234,209,0.06) inset,
    0 0 72px rgba(191,90,42,0.16);
}

.rpz-frame::before {
  content: 'THAT FEEL RADIO / LINER NOTES';
  position: absolute;
  z-index: 3;
  top: 17px;
  right: -58px;
  transform: rotate(36deg);
  width: 220px;
  padding: 5px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 1.8px;
  color: rgba(7,5,4,0.9);
  background: linear-gradient(90deg, var(--accent), var(--amber-hot));
  box-shadow: 0 8px 18px rgba(0,0,0,0.34);
}

.rpz-artwork {
  border-radius: 26px 26px 0 0;
  border-bottom: 1px solid rgba(240,162,31,0.2);
  background:
    radial-gradient(circle at center, #090706 0 9%, #19110c 10% 33%, #050403 34% 36%, #15100d 37% 100%);
}

.rpz-artwork::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(240,162,31,0.28) 0 5%, transparent 6%),
    repeating-radial-gradient(circle at center, rgba(248,234,209,0.08) 0 1px, transparent 2px 15px);
  opacity: 0.45;
  pointer-events: none;
}

.rpz-vinyl-icon {
  color: rgba(240,162,31,0.22);
  filter: drop-shadow(0 0 22px rgba(240,162,31,0.20));
}

.rpz-song-info {
  padding: 14px 18px 13px;
  text-align: left;
}

.rpz-station-name {
  color: var(--accent);
  opacity: 1;
  letter-spacing: 3.4px;
}

.rpz-song-title {
  font-family: var(--font-display);
  font-size: clamp(1.58rem, 6vw, 2.12rem);
  line-height: 1.02;
  letter-spacing: 0.7px;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0,0,0,0.56);
}

.rpz-artist-name {
  display: inline-flex;
  margin-top: 8px;
  color: var(--amber-hot);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  text-transform: none;
  border-bottom-color: rgba(240,162,31,0.36);
}

.rpz-controls {
  gap: 20px;
  padding: 10px 16px 14px;
}

.knob-chassis {
  width: 78px;
  height: 78px;
  background:
    repeating-conic-gradient(rgba(248,234,209,0.08) 0deg, transparent 5deg, transparent 11deg, rgba(248,234,209,0.06) 14deg),
    radial-gradient(circle at 36% 30%, #3a2a20, #17100c 52%, #070504);
  box-shadow:
    0 0 0 2px rgba(240,162,31,0.25),
    0 12px 32px rgba(0,0,0,0.54),
    inset 0 1px 3px rgba(255,255,255,0.08);
}

.knob-cap {
  width: 52px;
  height: 52px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.18), transparent 20%),
    linear-gradient(145deg, #2f2118, #0a0705);
  color: var(--amber-hot);
}

.rotary-cap {
  background:
    repeating-conic-gradient(rgba(248,234,209,0.08) 0deg, transparent 6deg, transparent 13deg, rgba(248,234,209,0.05) 16deg),
    radial-gradient(circle at 38% 32%, #493527, #17100c 58%, #060403);
}

.rpz-listeners {
  justify-content: flex-start;
  gap: 8px;
  margin: 0 18px 18px;
  padding: 10px 12px;
  border: 1px solid rgba(240,162,31,0.22);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(240,162,31,0.13), rgba(248,234,209,0.035)),
    repeating-linear-gradient(90deg, rgba(248,234,209,0.025) 0 1px, transparent 1px 8px);
  color: var(--cream);
}

.signal-label {
  color: var(--accent);
  letter-spacing: 2px;
}

#listenerCount {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--amber-hot);
  text-shadow: 0 0 14px rgba(240,162,31,0.24);
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.24rem;
  letter-spacing: 1.7px;
  color: var(--cream);
}

.feed-header,
.hub-header,
.market-header {
  border-bottom-color: rgba(240,162,31,0.16);
}

.feed-subtitle,
.hub-subtitle,
.market-subtitle {
  font-family: var(--font-serif);
  letter-spacing: 0;
}

.story-card,
.tf-fallback-card,
.hub-placeholder,
.lc-placeholder,
.artist-modal,
.history-modal,
.cart-drawer {
  border-color: rgba(240,162,31,0.2);
  background:
    linear-gradient(180deg, rgba(26,17,12,0.94), rgba(7,5,4,0.98)),
    repeating-linear-gradient(0deg, rgba(248,234,209,0.018) 0 1px, transparent 1px 6px);
  box-shadow:
    0 22px 54px rgba(0,0,0,0.56),
    0 0 0 1px rgba(248,234,209,0.04) inset;
}

.story-title-on-image {
  font-family: var(--font-display);
  letter-spacing: 0.4px;
}

.story-excerpt {
  font-family: var(--font-serif);
  color: var(--text-secondary);
}

.hub-badge {
  color: #130904;
  background: linear-gradient(90deg, var(--accent), var(--amber-hot));
  border-color: rgba(255,209,102,0.72);
}

#app-nav {
  width: min(520px, 100vw);
  background:
    linear-gradient(180deg, rgba(19,12,8,0.9), rgba(5,4,3,0.98)),
    repeating-linear-gradient(90deg, rgba(248,234,209,0.025) 0 1px, transparent 1px 8px);
  border-top-color: rgba(240,162,31,0.24);
}

.nav-tab {
  color: rgba(248,234,209,0.54);
}

.nav-tab.active {
  color: var(--amber-hot);
  background:
    radial-gradient(circle at 50% 0%, rgba(240,162,31,0.28), transparent 58%),
    linear-gradient(180deg, rgba(240,162,31,0.12), rgba(125,57,37,0.08));
}

@media (min-width: 860px) {
  #app-header,
  #app-nav,
  #app-main {
    width: min(520px, 100vw);
  }
}

@media (max-width: 390px) {
  .tfr-label { display: none; }
  .brand-logo-img { width: 62px; height: 62px; }
  .rpz-song-title { font-size: 1.5rem; }
  .rpz-frame::before { right: -70px; }
}

/* ==========================================================================
   V7.1 VISUAL TIGHTEN PASS
   Cleaner ink-black radio shell, restrained accents, clearer vinyl signal.
   ========================================================================== */
:root {
  --bg-deep: #020303;
  --bg-carbon: #090c0d;
  --bg-panel: rgba(10, 12, 13, 0.86);
  --accent: #e7aa32;
  --accent-glow: rgba(231, 170, 50, 0.18);
  --accent-dim: rgba(231, 170, 50, 0.10);
  --amber-hot: #f4c45d;
  --rust: #7e3824;
  --clay: #241613;
  --plum: #5e2b43;
  --teal: #1f8f89;
  --cream: #f3ead8;
  --paper: #cfc3ad;
  --text-primary: #f3ead8;
  --text-secondary: #cfc3ad;
  --text-muted: #827b70;
  --metal-light: #1b2021;
  --metal-dark: #050607;
}

body {
  background:
    radial-gradient(circle at 18% 6%, rgba(94,43,67,0.16), transparent 32%),
    radial-gradient(circle at 85% 11%, rgba(31,143,137,0.10), transparent 30%),
    radial-gradient(circle at 50% 86%, rgba(231,170,50,0.055), transparent 36%),
    linear-gradient(145deg, #030404 0%, #050606 48%, #020303 100%);
  background-size: auto;
}

body::before {
  background:
    radial-gradient(circle at 50% 28%, rgba(243,234,216,0.04), transparent 31%),
    repeating-linear-gradient(110deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 10px);
  opacity: 0.38;
  mix-blend-mode: normal;
}

body::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.36), transparent 18%, transparent 82%, rgba(0,0,0,0.36)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 5px);
  opacity: 0.28;
}

#section-player::before {
  content: '';
  position: fixed;
  top: 116px;
  left: 50%;
  width: min(500px, 118vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 10%, rgba(231,170,50,0.045) 10.4% 11.3%, transparent 11.8%),
    repeating-radial-gradient(circle at center, rgba(243,234,216,0.055) 0 1px, transparent 1.7px 18px),
    conic-gradient(from 20deg, rgba(31,143,137,0.05), rgba(94,43,67,0.05), rgba(231,170,50,0.035), rgba(31,143,137,0.05));
  opacity: 0.32;
  filter: saturate(0.82);
  animation: vinyl-signal-spin 90s linear infinite;
  z-index: 0;
}

@keyframes vinyl-signal-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

#visualizer {
  opacity: 0.22;
}

#app-header {
  min-height: 72px;
  padding: 8px 14px;
  background:
    linear-gradient(180deg, rgba(7,9,10,0.96), rgba(3,4,4,0.92));
  border-bottom-color: rgba(243,234,216,0.075);
  box-shadow: 0 16px 30px rgba(0,0,0,0.26);
}

.header-left {
  gap: 9px;
}

.header-right {
  gap: 7px;
}

.brand-logo-img {
  content: normal;
  width: 58px;
  height: 58px;
  padding: 3px;
  object-fit: cover;
  border-radius: 50%;
  background: #040505;
  border: 1px solid rgba(231,170,50,0.42);
  box-shadow:
    0 0 0 2px rgba(243,234,216,0.035) inset,
    0 8px 22px rgba(0,0,0,0.36);
  filter: saturate(0.96) contrast(1.04);
}

body.playing .brand-logo-img {
  animation-duration: 10s;
}

.live-badge {
  padding: 5px 9px;
  color: var(--cream);
  background: rgba(8,10,10,0.82);
  border-color: rgba(231,170,50,0.38);
  box-shadow: none;
  font-size: 0.66rem;
  letter-spacing: 1.4px;
}

.live-dot,
.rpz-live-dot,
.listener-dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(231,170,50,0.22);
}

.tfr-btn {
  min-height: 40px;
  padding: 9px 12px;
  color: rgba(243,234,216,0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018));
  border-color: rgba(243,234,216,0.10);
  box-shadow: 0 10px 18px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.055) inset;
  font-size: 0.68rem;
  letter-spacing: 1.35px;
}

.tfr-btn:hover {
  border-color: rgba(231,170,50,0.32);
  box-shadow: 0 10px 22px rgba(0,0,0,0.26);
}

.cart-toggle {
  width: 42px;
  height: 42px;
  border-color: rgba(243,234,216,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
  box-shadow: 0 10px 18px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.05) inset;
}

.player-container {
  padding-top: 14px;
}

.rpz-frame {
  border-color: rgba(243,234,216,0.10);
  background:
    linear-gradient(180deg, rgba(13,15,16,0.96), rgba(4,5,5,0.98)),
    radial-gradient(circle at 12% 0%, rgba(94,43,67,0.13), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(31,143,137,0.08), transparent 34%);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.62),
    0 0 0 1px rgba(243,234,216,0.035) inset;
}

.rpz-frame::before {
  display: none;
}

.rpz-artwork {
  background:
    radial-gradient(circle at center, #040505 0 8%, #101314 8.5% 33%, #050606 34% 36%, #0a0d0e 36.5% 100%);
  border-bottom-color: rgba(243,234,216,0.075);
}

.rpz-artwork::after {
  inset: 10%;
  background:
    radial-gradient(circle at center, rgba(231,170,50,0.18) 0 4%, transparent 4.5%),
    repeating-radial-gradient(circle at center, rgba(243,234,216,0.055) 0 1px, transparent 1.8px 17px);
  opacity: 0.18;
}

.rpz-artwork-img {
  filter: saturate(1.02) contrast(1.04) brightness(0.92);
}

.rpz-live-overlay {
  background: rgba(3,4,4,0.74);
  border-color: rgba(231,170,50,0.30);
  box-shadow: none;
}

.rpz-station-name {
  color: var(--text-muted);
  letter-spacing: 2.4px;
  font-size: 0.58rem;
}

.rpz-song-title {
  font-size: clamp(1.46rem, 5.4vw, 1.9rem);
  line-height: 1.07;
  letter-spacing: 0.32px;
  color: var(--cream);
  text-shadow: none;
}

.rpz-artist-name {
  color: rgba(243,234,216,0.86);
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0;
  border-bottom-color: rgba(231,170,50,0.20);
}

.rpz-time-bar {
  background: rgba(243,234,216,0.075);
}

.rpz-time-bar-progress {
  background: linear-gradient(90deg, var(--accent), var(--amber-hot));
  box-shadow: none;
}

.rpz-controls {
  gap: 18px;
}

.rpz-ctrl-btn {
  width: 38px;
  height: 38px;
  color: rgba(243,234,216,0.68);
  background:
    linear-gradient(180deg, #191e1f, #070909),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px);
  border-color: rgba(243,234,216,0.11);
  box-shadow:
    0 9px 18px rgba(0,0,0,0.34),
    0 1px 0 rgba(255,255,255,0.055) inset;
}

.rpz-ctrl-btn:hover {
  color: var(--cream);
  border-color: rgba(231,170,50,0.28);
  box-shadow: 0 10px 19px rgba(0,0,0,0.36);
}

.knob-chassis {
  width: 72px;
  height: 72px;
  background:
    repeating-conic-gradient(rgba(243,234,216,0.05) 0deg, transparent 6deg, transparent 13deg, rgba(243,234,216,0.035) 17deg),
    radial-gradient(circle at 36% 30%, #222829, #0a0d0e 54%, #030404);
  box-shadow:
    0 0 0 1px rgba(243,234,216,0.12),
    0 13px 25px rgba(0,0,0,0.45),
    inset 0 1px 3px rgba(255,255,255,0.06);
}

.knob-chassis:hover {
  box-shadow:
    0 0 0 1px rgba(231,170,50,0.25),
    0 13px 25px rgba(0,0,0,0.45),
    inset 0 1px 3px rgba(255,255,255,0.06);
}

body.playing .knob-chassis {
  animation: none;
  box-shadow:
    0 0 0 1px rgba(231,170,50,0.38),
    0 13px 25px rgba(0,0,0,0.45),
    inset 0 1px 3px rgba(255,255,255,0.06);
}

.knob-cap {
  width: 50px;
  height: 50px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,0.13), transparent 18%),
    linear-gradient(145deg, #1f2526, #050606);
  color: var(--cream);
}

body.playing .knob-cap {
  color: var(--accent);
}

.rpz-play-knob:active .knob-chassis,
.rpz-ctrl-btn:active,
.cart-toggle:active,
.tfr-btn:active,
.nav-tab:active {
  transform: translateY(1px) scale(0.97);
}

.rotary-cap {
  background:
    repeating-conic-gradient(rgba(243,234,216,0.045) 0deg, transparent 7deg, transparent 14deg, rgba(243,234,216,0.035) 18deg),
    radial-gradient(circle at 38% 32%, #202728, #090c0d 58%, #030404);
}

.rotary-indicator {
  background: var(--accent);
  box-shadow: none;
}

.rpz-listeners {
  margin: 0 18px 18px;
  padding: 9px 11px;
  border-color: rgba(243,234,216,0.11);
  background:
    linear-gradient(90deg, rgba(231,170,50,0.085), rgba(31,143,137,0.035)),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}

.listener-dot {
  animation: live-signal-pulse 3.2s ease-in-out infinite;
}

@keyframes live-signal-pulse {
  0%, 100% {
    opacity: 0.75;
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(231,170,50,0.0);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(231,170,50,0.08);
  }
}

.signal-label {
  color: rgba(243,234,216,0.72);
  letter-spacing: 1.35px;
  font-size: 0.62rem;
}

#listenerCount {
  color: var(--accent);
  text-shadow: none;
  font-size: 0.84rem;
}

.section-title {
  letter-spacing: 1.1px;
}

.feed-subtitle,
.hub-subtitle,
.market-subtitle,
.story-excerpt,
.tf-fallback-card p {
  font-family: var(--font-body);
  color: rgba(243,234,216,0.72);
  line-height: 1.58;
}

.story-card,
.tf-fallback-card,
.hub-placeholder,
.lc-placeholder,
.artist-modal,
.history-modal,
.cart-drawer {
  border-color: rgba(243,234,216,0.105);
  background:
    linear-gradient(180deg, rgba(13,16,17,0.94), rgba(5,6,6,0.98));
  box-shadow:
    0 18px 42px rgba(0,0,0,0.44),
    0 0 0 1px rgba(243,234,216,0.028) inset;
}

.story-card:hover {
  border-color: rgba(231,170,50,0.18);
  box-shadow: 0 20px 44px rgba(0,0,0,0.48);
}

.story-card-featured {
  border-color: rgba(231,170,50,0.20);
  box-shadow: 0 22px 50px rgba(0,0,0,0.48);
}

.story-img {
  filter: saturate(1.05) contrast(1.05) brightness(0.9);
}

.story-gradient {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.24) 47%, rgba(0,0,0,0.82) 100%),
    radial-gradient(circle at 18% 8%, rgba(31,143,137,0.13), transparent 32%),
    radial-gradient(circle at 84% 10%, rgba(94,43,67,0.12), transparent 34%);
}

.story-tag {
  color: rgba(243,234,216,0.88);
  background: rgba(4,5,5,0.72);
  border: 1px solid rgba(231,170,50,0.26);
  font-size: 0.58rem;
  letter-spacing: 1.15px;
  padding: 6px 9px;
}

.story-kicker {
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 1.35px;
}

.story-title-on-image {
  letter-spacing: 0.1px;
  line-height: 1.13;
}

.story-body {
  background: linear-gradient(180deg, rgba(7,8,8,0.96), rgba(4,5,5,1));
}

.story-excerpt {
  font-size: 0.92rem;
}

.story-read-more {
  color: rgba(243,234,216,0.9);
  background: rgba(231,170,50,0.08);
  border-color: rgba(231,170,50,0.20);
  box-shadow: none;
}

.tf-fallback-card {
  max-width: 375px;
  padding: 34px 24px;
}

.tf-fallback-icon {
  background: rgba(231,170,50,0.08);
  color: var(--accent);
  box-shadow: none;
}

.tf-fallback-card h3 {
  font-family: var(--font-display);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.tf-fallback-btn {
  color: var(--cream);
  background: linear-gradient(180deg, rgba(231,170,50,0.13), rgba(231,170,50,0.055));
  border-color: rgba(231,170,50,0.22);
  box-shadow: none;
}

.hub-badge {
  color: var(--accent);
  background: rgba(231,170,50,0.085);
  border-color: rgba(231,170,50,0.18);
}

#app-nav {
  min-height: 78px;
  padding: 6px 8px calc(6px + var(--safe-bottom));
  background:
    linear-gradient(180deg, rgba(10,12,13,0.88), rgba(3,4,4,0.98));
  border-top-color: rgba(243,234,216,0.085);
  box-shadow: 0 -16px 34px rgba(0,0,0,0.46);
}

.nav-tab {
  min-height: 62px;
  border-radius: 14px;
  gap: 5px;
  color: rgba(243,234,216,0.50);
  font-size: 0.66rem;
  letter-spacing: 1.05px;
}

.nav-tab svg {
  width: 22px;
  height: 22px;
}

.nav-tab.active {
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(243,234,216,0.055), rgba(243,234,216,0.018)),
    radial-gradient(circle at 50% 0%, rgba(231,170,50,0.13), transparent 62%);
  box-shadow: 0 0 0 1px rgba(243,234,216,0.06) inset;
}

.nav-tab.active::after {
  top: 4px;
  width: 24px;
  height: 2px;
  background: var(--accent);
  box-shadow: none;
}

@media (max-width: 430px) {
  .player-container { padding-bottom: 104px; }
  .feed-scroll { padding-bottom: 104px; }
  .story-excerpt { font-size: 0.9rem; }
  .nav-tab { font-size: 0.63rem; }
}

@media (prefers-reduced-motion: reduce) {
  #section-player::before,
  .listener-dot {
    animation: none !important;
  }
}

/* ==========================================================================
   V7.2A VINYL ONLY RECOVERY PASS
   Dedicated CSS vinyl layer. No V13 image assets are used.
   ========================================================================== */
#section-player::before {
  content: none !important;
  animation: none !important;
}

#section-player {
  isolation: isolate;
}

/* Final vinyl groove pass — visible grooves, clockwise spin during playback. */
.vinyl-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1360px, 242vw);
  aspect-ratio: 1;
  transform: translate(-50%, -54%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.66;
  filter: saturate(0.82) contrast(1.26);
}

.vinyl-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(2, 3, 3, 0.98) 0 100%),
    repeating-radial-gradient(circle at center,
      rgba(243, 234, 216, 0.20) 0 1px,
      rgba(255, 255, 255, 0) 1.8px 4.6px),
    repeating-radial-gradient(circle at center,
      rgba(0, 0, 0, 0) 0 22px,
      rgba(0, 0, 0, 0.70) 23px 27px,
      rgba(255, 255, 255, 0.065) 28px 29px,
      rgba(0, 0, 0, 0) 30px 54px),
    radial-gradient(circle at center,
      rgba(255, 255, 255, 0) 0 25%,
      rgba(243, 234, 216, 0.12) 25.2% 25.7%,
      rgba(255, 255, 255, 0) 26% 42%,
      rgba(243, 234, 216, 0.10) 42.2% 42.7%,
      rgba(255, 255, 255, 0) 43% 63%,
      rgba(243, 234, 216, 0.09) 63.2% 63.7%,
      rgba(255, 255, 255, 0) 64% 100%),
    repeating-conic-gradient(from 9deg,
      rgba(255, 255, 255, 0.032) 0deg 0.7deg,
      rgba(0, 0, 0, 0) 0.9deg 8deg,
      rgba(0, 0, 0, 0.10) 8.2deg 9deg,
      rgba(0, 0, 0, 0) 9.4deg 18deg),
    conic-gradient(from 24deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.010) 15%,
      rgba(31, 143, 137, 0.048) 31%,
      rgba(255, 255, 255, 0.007) 48%,
      rgba(94, 43, 67, 0.066) 66%,
      rgba(255, 255, 255, 0.046) 84%,
      rgba(255, 255, 255, 0.095));
  box-shadow:
    0 52px 140px rgba(0, 0, 0, 0.76),
    0 0 0 1px rgba(243, 234, 216, 0.070) inset,
    0 0 0 42px rgba(0, 0, 0, 0.16) inset;
  animation: vinyl-only-spin 28s linear infinite;
  animation-play-state: paused;
  transform-origin: center center;
  will-change: transform;
}

.vinyl-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 312deg,
      rgba(255, 255, 255, 0) 0 12%,
      rgba(255, 255, 255, 0.26) 17%,
      rgba(255, 255, 255, 0.036) 22%,
      rgba(255, 255, 255, 0) 33% 63%,
      rgba(255, 255, 255, 0.12) 70%,
      rgba(255, 255, 255, 0) 78% 100%),
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 36%, rgba(0,0,0,0.16) 68%);
  box-shadow:
    0 0 0 1px rgba(243, 234, 216, 0.026) inset,
    0 0 0 110px rgba(0, 0, 0, 0.05) inset;
  pointer-events: none;
}

body.playing .vinyl-backdrop::before {
  animation-play-state: running;
}

.player-container,
#visualizer {
  position: relative;
}

.player-container {
  z-index: 2;
}

#visualizer {
  z-index: 1;
}

@keyframes vinyl-only-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 430px) {
  .vinyl-backdrop {
    top: 48%;
    width: min(1320px, 248vw);
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-backdrop::before {
    animation: none !important;
  }
}

/* ==========================================================================
   V7.4 ARTWORK BEHAVIOR FIX
   Listen uses real song artwork; generated collage moves to Explore.
   ========================================================================== */
.rpz-artwork-placeholder {
  position: relative;
  background:
    radial-gradient(circle at center, rgba(231, 170, 50, 0.10) 0 6%, transparent 6.5%),
    repeating-radial-gradient(circle at center, rgba(243, 234, 216, 0.055) 0 1px, transparent 1.8px 17px),
    linear-gradient(145deg, #0d1112, #030404);
}

.rpz-artwork-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22) 72%);
}

.rpz-artwork-placeholder .rpz-vinyl-icon {
  display: inline-block;
}

.rpz-artwork::after {
  opacity: 0.06;
  mix-blend-mode: soft-light;
}

/* v7.4: real Radiolize song artwork fills the card without spinning. */
.rpz-artwork-img {
  object-fit: cover;
  object-position: center center;
}

/* ==========================================================================
   V7.6 CRATE NOTES IMAGE INSTALL
   Approved crate-digger artwork uses the prepared Explore image slot.
   ========================================================================== */
.story-card[data-image-slot="assets/explore/crate-notes.png"] .story-img-wrap {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.story-card[data-image-slot="assets/explore/crate-notes.png"] .story-img {
  object-position: center center;
  filter: saturate(1.04) contrast(1.05) brightness(0.92);
  transform: none;
}

.story-card[data-image-slot="assets/explore/crate-notes.png"] .story-gradient {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.18) 48%, rgba(0,0,0,0.84) 100%),
    radial-gradient(circle at 14% 12%, rgba(231,170,50,0.13), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(31,143,137,0.12), transparent 30%);
}

/* ==========================================================================
   V7.7 SPOTIFY-STYLE EXPLORE SHEETS
   Explore opens music companion sheets; audio keeps playing.
   ========================================================================== */
.story-card {
  cursor: pointer;
  touch-action: manipulation;
}

.story-card:focus-visible {
  outline: 2px solid rgba(231, 170, 50, 0.72);
  outline-offset: 4px;
}

.explore-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 360;
  background:
    radial-gradient(circle at 50% 100%, rgba(231, 170, 50, 0.08), transparent 34%),
    rgba(0, 0, 0, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.explore-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.explore-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 361;
  width: min(500px, 100vw);
  max-height: min(82vh, 760px);
  transform: translate(-50%, 105%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(243, 234, 216, 0.09);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(15, 17, 17, 0.97), rgba(4, 5, 5, 0.99));
  box-shadow:
    0 -30px 80px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(231, 170, 50, 0.04) inset;
  transition: transform 0.34s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.explore-sheet.open {
  transform: translate(-50%, 0);
}

.explore-sheet-handle {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 5;
  width: 44px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(243, 234, 216, 0.28);
}

.explore-sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 216, 0.14);
  background: rgba(0, 0, 0, 0.58);
  color: var(--cream);
  cursor: pointer;
}

.explore-sheet-media {
  position: relative;
  min-height: 220px;
  flex-shrink: 0;
  background: #070808;
}

.explore-sheet-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.05) brightness(0.88);
}

.explore-sheet-media-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.24) 45%, rgba(5,5,5,0.94) 100%);
}

.explore-sheet-kicker,
.explore-sheet-media h2 {
  position: absolute;
  left: 20px;
  right: 62px;
  z-index: 3;
}

.explore-sheet-kicker {
  bottom: 78px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 1.7px;
  color: var(--accent);
}

.explore-sheet-media h2 {
  bottom: 22px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 7vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0.1px;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.explore-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 14px;
  display: grid;
  gap: 12px;
}

.explore-sheet-section {
  padding: 13px 0;
  border-bottom: 1px solid rgba(243, 234, 216, 0.07);
}

.explore-sheet-section:last-child {
  border-bottom: 0;
}

.explore-sheet-section h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.2px;
  color: var(--cream);
}

.explore-sheet-section ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}

.explore-sheet-section li {
  color: rgba(243, 234, 216, 0.72);
  font-size: 0.9rem;
  line-height: 1.45;
}

.explore-sheet-action {
  margin: 0 20px calc(16px + var(--safe-bottom));
  min-height: 50px;
  border: 1px solid rgba(231, 170, 50, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(231, 170, 50, 0.95), rgba(199, 99, 38, 0.95));
  color: #050505;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.explore-sheet-action:active,
.explore-sheet-close:active,
.story-card:active {
  transform: scale(0.985);
}

@media (min-width: 760px) {
  .explore-sheet {
    border-radius: 28px 28px 0 0;
  }
}