/* ==========================================================================
   BeatDesk / LyricBingo — UNIFIED REDESIGN LAYER
   --------------------------------------------------------------------------
   Authoritative cohesive design system. Loaded LAST so it wins the cascade
   over the legacy beatdesk-* stylesheets. One visual language across every
   page: landing, logged-in home, dashboard, playlist library, playlist
   detail + host console, auth, venue display.

   Concept: "Neon Stage" — confident graphite dark UI, electric violet/teal
   accents, lime as the live-energy pop. Glassy elevated panels, one card
   recipe, one button system, one typographic rhythm.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS  (override prior :root, propagate everywhere)
   ========================================================================== */
:root {
  /* — Surfaces: layered graphite with depth — */
  --bg-0: #07060e;          /* page base (deepest) */
  --bg-1: #0c0a18;          /* base panel */
  --bg-2: #131127;          /* elevated panel */
  --bg-3: #1b1836;          /* raised / hover */
  --bg-4: #252146;          /* pressed / active */

  /* gradient surface recipes (use as background) */
  --surface-card: linear-gradient(160deg, rgba(31,27,62,0.55) 0%, rgba(16,13,33,0.78) 100%);
  --surface-card-hover: linear-gradient(160deg, rgba(44,38,84,0.7) 0%, rgba(20,16,40,0.85) 100%);
  --surface-panel: linear-gradient(180deg, rgba(20,17,40,0.9) 0%, rgba(12,10,24,0.92) 100%);
  --surface-glass: rgba(18,16,38,0.6);

  /* — Brand — */
  --bd-violet: #8b5cf6;
  --bd-violet-hover: #7c3aed;
  --bd-violet-soft: #b9a6ff;
  --bd-indigo: #6366f1;
  --bd-teal: #2dd4bf;
  --bd-teal-deep: #14b8a6;
  --bd-lime: #c6ff4a;
  --bd-pink: #f472b6;
  --bd-gold: #fbbf24;

  /* gradients */
  --grad-primary: linear-gradient(135deg, #9b6dff 0%, #7c3aed 55%, #6d28d9 100%);
  --grad-primary-hover: linear-gradient(135deg, #a883ff 0%, #8b5cf6 55%, #7c3aed 100%);
  --grad-accent: linear-gradient(120deg, #8b5cf6, #2dd4bf);
  --grad-aurora:
    radial-gradient(120% 80% at 12% -10%, rgba(139,92,246,0.20) 0%, transparent 55%),
    radial-gradient(100% 70% at 100% 0%, rgba(45,212,191,0.12) 0%, transparent 50%),
    radial-gradient(90% 90% at 50% 120%, rgba(99,102,241,0.10) 0%, transparent 60%);

  /* — Text — */
  --tx-strong: #fbf8ff;
  --tx: #ece7fb;
  --tx-sub: #a39cc4;
  --tx-muted: #6f6890;
  --tx-faint: #4d4769;

  /* — Lines / borders — */
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --line-violet: rgba(139,92,246,0.32);

  /* — Card system — */
  --card-bd: 1px solid var(--line);
  --card-radius: 18px;
  --card-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.8);
  --card-shadow-hover: 0 1px 0 0 rgba(255,255,255,0.07) inset, 0 28px 60px -28px rgba(0,0,0,0.9), 0 0 0 1px var(--line-violet);

  /* — Radius scale — */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* — Spacing rhythm — */
  --space-section: clamp(3rem, 7vw, 5.5rem);
  --shell-max: 1200px;
  --shell-pad: clamp(1.1rem, 4vw, 2rem);

  /* — Type — */
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "DM Sans", system-ui, sans-serif;

  /* — Effects — */
  --glow-violet: 0 14px 40px -12px rgba(139,92,246,0.55);
  --glow-teal: 0 14px 40px -14px rgba(45,212,191,0.45);
  --focus-ring: 0 0 0 3px rgba(139,92,246,0.5);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* legacy aliases so old rules pick up new palette */
  --bd-text: var(--tx);
  --bd-text-sub: var(--tx-sub);
  --bd-text-muted: var(--tx-muted);
  --bd-cream: var(--tx-strong);
  --bd-cream-muted: var(--tx-sub);
  --bd-divider: var(--line);
  --sp-base: var(--bg-0);
  --sp-elevated: var(--bg-2);
  --sp-highlight: var(--bg-2);
  --sp-hover: var(--bg-3);
  --bd-violet-glow: rgba(139,92,246,0.4);
}

/* ==========================================================================
   2. BASE / GLOBAL CANVAS
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  background: var(--bg-0) !important;
  color: var(--tx) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Persistent aurora canvas behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grad-aurora), var(--bg-0);
  display: block !important;
}

::selection { background: rgba(139,92,246,0.5); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(139,92,246,0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); background-clip: padding-box; }

/* Consistent focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
summary:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, .font-display {
  font-family: var(--font-display) !important;
  color: var(--tx-strong) !important;
  letter-spacing: -0.03em !important;
}
h1 { line-height: 1.02 !important; font-weight: 800 !important; }
h2 { line-height: 1.08 !important; font-weight: 800 !important; }
h3 { line-height: 1.15 !important; font-weight: 700 !important; }

/* Eyebrow / kicker — used across pages for cohesion */
.section-kicker,
.bd-dj-section-head > p:first-child {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--bd-violet-soft) !important;
}
.section-kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
}

/* ==========================================================================
   4. SHELL — header + footer
   ========================================================================== */
header.site-header {
  position: sticky !important;
  top: 0;
  z-index: 60;
  background: rgba(8,7,16,0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line) !important;
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
header.site-header.bd-header-scrolled,
header.site-header.bd-pro-header {
  background: rgba(8,7,16,0.9) !important;
  box-shadow: 0 12px 40px -22px rgba(0,0,0,0.9);
}

.site-header .nav-link {
  position: relative;
  color: var(--tx-sub) !important;
  font-weight: 600 !important;
  transition: color .18s var(--ease);
}
.site-header .nav-link:hover { color: var(--tx-strong) !important; }
.site-header .nav-link--active { color: var(--tx-strong) !important; }
.site-header .nav-link--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
}

.lb-brand-logo, .logo-mark { filter: drop-shadow(0 4px 14px rgba(139,92,246,0.4)); }

footer {
  border-top: 1px solid var(--line) !important;
  background: linear-gradient(180deg, transparent, rgba(139,92,246,0.04)) !important;
}

/* ==========================================================================
   5. PRIMITIVES — buttons
   ========================================================================== */
.btn-primary,
.bd-acc-btn--primary,
.bd-cta-big,
button[data-bd-upgrade],
.bd-dash-upgrade-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.8rem !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  background: var(--grad-primary) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--glow-violet) !important;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
}
.btn-primary:hover,
.bd-acc-btn--primary:hover,
.bd-cta-big:hover,
button[data-bd-upgrade]:hover,
.bd-dash-upgrade-btn:hover {
  background: var(--grad-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -14px rgba(139,92,246,0.7) !important;
}
.btn-primary:active, .bd-acc-btn--primary:active { transform: translateY(0) scale(0.99); }

.btn-secondary,
.bd-acc-btn--secondary,
.action-chip,
.btn-ghost,
.bd-acc-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.65rem 1.5rem !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-glass) !important;
  color: var(--tx-strong) !important;
  font-weight: 600 !important;
  font-size: 0.94rem !important;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .12s var(--ease), border-color .2s var(--ease), background .2s var(--ease) !important;
}
.btn-secondary:hover,
.bd-acc-btn--secondary:hover,
.action-chip:hover,
.btn-ghost:hover,
.bd-acc-btn:hover {
  border-color: var(--line-violet) !important;
  background: var(--bg-3) !important;
  transform: translateY(-2px);
}

.btn-primary--sm, .site-header .btn-primary {
  min-height: 2.55rem;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.9rem !important;
}

/* Filter pills (library + landing) */
.filter-pill {
  padding: 0.5rem 1.05rem !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-glass) !important;
  color: var(--tx-sub) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all .18s var(--ease);
}
.filter-pill:hover { color: var(--tx-strong) !important; border-color: var(--line-violet) !important; }
.filter-pill--active {
  background: var(--grad-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--glow-violet);
}

/* ==========================================================================
   6. PRIMITIVES — universal card recipe
   Applied to every card-like surface for one cohesive language.
   ========================================================================== */
.playlist-card,
.bd-pl-card,
.bd-poster-card,
.bd-dj-cat-card,
.bd-dj-result-card,
.bd-how-step,
.bd-experience-card,
.stat-card,
.flow-card,
.bd-hd-action,
.bd-hd-side-card,
.bd-hd-game-row,
.bd-dash-plan-card {
  position: relative;
  border: var(--card-bd) !important;
  border-radius: var(--card-radius) !important;
  background: var(--surface-card) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease) !important;
}
.playlist-card:hover,
.bd-pl-card:hover,
.bd-poster-card:hover,
.bd-dj-cat-card:hover,
.bd-dj-result-card:hover,
.bd-how-step:hover,
.bd-experience-card:hover,
.stat-card:hover,
.flow-card:hover,
.bd-hd-action:hover,
.bd-hd-game-row:hover {
  transform: translateY(-4px);
  background: var(--surface-card-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: var(--line-violet) !important;
}

/* Badges */
.playlist-card-badge,
.bd-pl-badge,
.bd-plan-badge {
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], select, textarea,
.bd-auth-field input, .bd-dj-search-hero__input, #bd-playlists-search {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--tx-strong) !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bd-violet) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.25) !important;
  outline: none !important;
}

/* ==========================================================================
   7. LANDING / WELCOME (guest)
   ========================================================================== */
.relative.flex.min-h-\[88vh\] {
  min-height: 94dvh !important;
  align-items: center !important;
  background:
    radial-gradient(120% 70% at 50% -5%, rgba(139,92,246,0.28) 0%, transparent 60%),
    radial-gradient(90% 60% at 85% 20%, rgba(45,212,191,0.14) 0%, transparent 55%),
    linear-gradient(180deg, #0a0818 0%, #07060e 80%) !important;
}
.relative.flex.min-h-\[88vh\] h1 {
  font-size: clamp(3rem, 7.2vw, 5.25rem) !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  background: linear-gradient(180deg, #fff 30%, #d9cffb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.relative.flex.min-h-\[88vh\] p {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  line-height: 1.45 !important;
  color: var(--tx-sub) !important;
}

/* Landing hero side visual — richer card stack */
.relative.flex.min-h-\[88vh\] .bd-landing-visual {
  width: min(420px, 36%);
  height: min(380px, 46vh);
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, rgba(139,92,246,0.3), rgba(45,212,191,0.14));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 110px -28px rgba(0,0,0,0.7);
}
.bd-landing-visual .bd-vis-grid span { background: rgba(255,255,255,0.2); }
.bd-landing-visual .bd-vis-wave span {
  background: linear-gradient(to top, var(--bd-teal), var(--bd-violet-soft));
}

/* How it works */
.bd-how-grid { gap: 1.25rem; }
.bd-how-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff !important;
  font-weight: 800;
  box-shadow: var(--glow-violet);
  margin-bottom: 0.75rem;
}

/* Final CTA band */
.bd-final-inner {
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(139,92,246,0.22), transparent 60%),
    var(--surface-card) !important;
  border: 1px solid var(--line-violet) !important;
  border-radius: var(--r-lg) !important;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem) !important;
  box-shadow: var(--card-shadow);
}

/* ==========================================================================
   8. LOGGED-IN HOME (vault)
   ========================================================================== */
html.bd-logged-in-home #bd-home-mount .bd-home-vault { background: transparent; }

.bd-home-hero, .bd-dj-home-hero {
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 120% at 0% 0%, rgba(139,92,246,0.22), transparent 55%),
    var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden;
}
.bd-home-hero h1, .bd-dj-home-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
}

.bd-dj-section { margin-top: clamp(2rem, 5vw, 3rem); }
.bd-dj-section-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem) !important; margin-top: 0.4rem; }
.bd-dj-section-head p { color: var(--tx-sub) !important; }

/* Featured category cards */
.bd-dj-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 1rem !important;
}
.bd-dj-cat-card {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem !important;
  text-align: left;
  overflow: hidden;
}
.bd-dj-cat-card__art {
  width: 3.1rem; height: 3.1rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--grad-accent);
  flex: none;
  box-shadow: 0 8px 20px -10px rgba(45,212,191,0.6);
}
.bd-dj-cat-card__emoji { font-size: 1.5rem; }
.bd-dj-cat-card__body strong { color: var(--tx-strong); font-weight: 700; }
.bd-dj-cat-card__meta { color: var(--tx-muted); font-size: 0.8rem; }

/* Playlist poster tiles */
.bd-pl-card { overflow: hidden; }
.bd-pl-card-art {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--grad-accent);
}
.bd-pl-card-body { padding: 0.85rem 0.95rem 1rem !important; }
.bd-pl-card-body strong { color: var(--tx-strong) !important; }

/* horizontal rails */
.bd-home-scroll { gap: 1rem !important; padding-bottom: 0.5rem; }

/* ==========================================================================
   9. USER DASHBOARD
   ========================================================================== */
#bd-account-mount .bd-dash.bd-hd { color: var(--tx); }

.bd-hd-top { align-items: flex-end; }
.bd-hd-greeting h1 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }
.bd-hd-greeting p { color: var(--tx-sub) !important; }

/* status pills */
.bd-hd-pill {
  border: 1px solid var(--line) !important;
  background: var(--surface-glass) !important;
  border-radius: var(--r-md) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bd-hd-pill--gold { border-color: rgba(251,191,36,0.35) !important; }
.bd-hd-pill--live { border-color: rgba(198,255,74,0.4) !important; }
.bd-hd-pill__icon { color: var(--bd-violet-soft); }

/* Quick action cards */
.bd-hd-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) !important;
  gap: 1rem !important;
}
.bd-hd-action {
  display: flex !important;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.3rem 1.25rem !important;
  text-decoration: none;
  overflow: hidden;
}
.bd-hd-action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 100% at 100% 0%, rgba(139,92,246,0.18), transparent 60%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.bd-hd-action:hover::after { opacity: 1; }
.bd-hd-action__icon {
  width: 2.85rem; height: 2.85rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 1.35rem;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
}
.bd-hd-action--start .bd-hd-action__icon { background: var(--grad-primary); border: none; box-shadow: var(--glow-violet); }
.bd-hd-action--browse .bd-hd-action__icon { background: var(--grad-accent); border: none; }
.bd-hd-action h3 { font-size: 1.05rem !important; }
.bd-hd-action p { color: var(--tx-sub) !important; font-size: 0.85rem; margin: 0; }
.bd-hd-action__btn {
  margin-top: auto;
  color: var(--bd-violet-soft) !important;
  font-weight: 700;
  font-size: 0.85rem;
}
.bd-hd-action--locked { opacity: 0.85; }
.bd-hd-premium-tag {
  font-size: 0.62rem; font-weight: 800;
  background: var(--grad-primary); color: #fff;
  padding: 0.1rem 0.5rem; border-radius: var(--r-pill);
  margin-left: 0.5rem; vertical-align: middle;
}

/* layout */
.bd-hd-layout { display: grid !important; grid-template-columns: minmax(0,1fr) 320px !important; gap: 1.5rem !important; align-items: start; }
@media (max-width: 920px) { .bd-hd-layout { grid-template-columns: 1fr !important; } }

/* recent games */
.bd-hd-games-head h2 { font-size: 1.25rem !important; }
.bd-hd-games-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* loading / empty states */
.bd-hd-games-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  color: var(--tx-sub);
  font-size: 0.9rem;
}
.bd-hd-games-loading p { margin: 0; }
.bd-hd-spinner {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--bd-violet);
  animation: bd-spin .7s linear infinite;
  flex: none;
}
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-hd-games-empty {
  padding: 1.25rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-1);
  text-align: center;
}
.bd-hd-games-empty p { color: var(--tx-sub); margin: 0 0 0.75rem; }
.bd-hd-game-row {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem !important;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.bd-hd-game-row__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex: none; font-size: 1.1rem;
}
.bd-hd-game-row__icon--pink { background: rgba(244,114,182,0.18); }
.bd-hd-game-row__icon--purple { background: rgba(139,92,246,0.2); }
.bd-hd-game-row__icon--teal { background: rgba(45,212,191,0.18); }
.bd-hd-game-row__icon--gold { background: rgba(251,191,36,0.18); }
.bd-hd-game-row__main strong { color: var(--tx-strong); }
.bd-hd-game-row__stat { color: var(--tx-sub); font-size: 0.82rem; }
.bd-hd-game-row__chev { color: var(--tx-muted); margin-left: auto; }

/* sidebar */
.bd-hd-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.bd-hd-side-card { padding: 1.2rem 1.25rem !important; }
.bd-hd-side-card--premium, .bd-hd-side-card--upgrade {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(139,92,246,0.25), transparent 55%),
    var(--surface-card) !important;
  border-color: var(--line-violet) !important;
}
.bd-hd-shortcuts { display: flex; flex-direction: column; gap: 0.2rem; }
.bd-hd-shortcuts a {
  color: var(--tx-sub) !important;
  padding: 0.55rem 0.65rem;
  border-radius: var(--r-xs);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.bd-hd-shortcuts a:hover { background: var(--bg-3); color: var(--tx-strong) !important; }
.bd-hd-sponsor-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.bd-hd-sponsor-tile {
  aspect-ratio: 1; border-radius: var(--r-xs);
  background: var(--bg-1); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}

/* admin tabs */
.bd-dash-admin-nav { gap: 0.4rem; border-bottom: 1px solid var(--line); }
.bd-dash-admin-tab {
  color: var(--tx-sub) !important; font-weight: 600;
  padding: 0.6rem 0.95rem; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.bd-dash-admin-tab.is-active { color: var(--tx-strong) !important; background: var(--bg-2); }

/* ==========================================================================
   10. PLAYLIST LIBRARY (overlay)
   ========================================================================== */
.bd-dj-library { color: var(--tx); }
.bd-dj-library-head h1 { font-size: clamp(2rem, 5vw, 3rem) !important; }
.bd-dj-library-head p { color: var(--tx-sub) !important; }

.bd-dj-search-hero {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 1.25rem !important;
  box-shadow: var(--card-shadow);
}
.bd-dj-search-hero__input {
  font-size: 1.05rem !important;
  padding: 0.85rem 1.1rem !important;
}

.bd-dj-results-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1.1rem !important;
}
.bd-dj-result-card { display: flex; flex-direction: column; overflow: hidden; }
.bd-dj-result-card__main { display: flex; flex-direction: column; height: 100%; }
.bd-dj-result-card__body { padding: 1rem 1.1rem; }
.bd-dj-result-card__body h3 { font-size: 1.05rem !important; }
.bd-dj-result-card__body p { color: var(--tx-sub) !important; font-size: 0.85rem; }
.bd-dj-vibe-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.bd-dj-vibe-chips > * {
  font-size: 0.68rem; font-weight: 700;
  padding: 0.18rem 0.55rem; border-radius: var(--r-pill);
  background: var(--bg-3); color: var(--bd-violet-soft);
}
.bd-dj-result-card__play, .bd-dj-result-card__unlock {
  margin-top: auto;
}

/* ==========================================================================
   11. PLAYLIST DETAIL + HOST PLAYER + CONSOLE
   ========================================================================== */
.game-hero--detail {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
}
.game-hero-overlay {
  background: linear-gradient(180deg, rgba(7,6,14,0.2) 0%, rgba(7,6,14,0.82) 100%) !important;
}
.game-hero--detail h1 { font-size: clamp(2rem, 5vw, 3.1rem) !important; }

/* unify the panels with the rest of the app */
.sp-player, .sp-queue {
  background: var(--surface-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* now-playing queue row uses lime live-energy accent */
.sp-queue-row--now {
  background: linear-gradient(90deg, rgba(198,255,74,0.12), transparent) !important;
  border-left: 3px solid var(--bd-lime) !important;
}
.sp-queue-now { color: var(--bd-lime) !important; font-weight: 800 !important; }
.sp-status { color: var(--bd-teal) !important; }

/* primary play control */
.sp-ctrl--play {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-violet) !important;
}

/* Auto DJ button */
.sp-autodj-btn {
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-glass) !important;
  transition: all .18s var(--ease);
}
.sp-autodj-btn--stop {
  background: var(--grad-accent) !important;
  border-color: transparent !important;
  color: #07060e !important;
  font-weight: 700 !important;
  box-shadow: var(--glow-teal);
}

/* Host console — cohesive panel */
#bd-host-console {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}
.bd-host-section { border-top-color: var(--line) !important; }
.bd-host-section-label {
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bd-violet-soft) !important;
}
.bd-host-action {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-glass) !important;
  color: var(--tx-strong) !important;
  font-weight: 600 !important;
  transition: all .15s var(--ease);
}
.bd-host-action:hover { border-color: var(--line-violet) !important; background: var(--bg-3) !important; transform: translateY(-1px); }
.bd-host-action[data-action="player-autodj"] { background: var(--grad-accent) !important; color: #07060e !important; border: none !important; }
.bd-host-action[data-action="end"] { border-color: rgba(244,114,182,0.4) !important; color: #ffd9ec !important; }

/* win pattern tiles */
.bd-host-pattern-tile {
  border-radius: var(--r-xs) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-2) !important;
  color: var(--tx) !important;
  transition: all .15s var(--ease);
}
.bd-host-pattern-tile:hover { border-color: var(--line-violet) !important; }
.bd-host-pattern-tile.is-active,
.bd-host-pattern-tile[aria-pressed="true"] {
  border-color: var(--bd-violet) !important;
  background: rgba(139,92,246,0.18) !important;
  box-shadow: 0 0 0 1px var(--bd-violet) inset;
}

/* Host dock (mobile fixed bar) */
#bd-host-dock {
  background: rgba(8,7,16,0.9) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line) !important;
}
.bd-host-dock-btn--play { background: var(--grad-primary) !important; box-shadow: var(--glow-violet); }

/* ==========================================================================
   12. AUTH
   ========================================================================== */
.bd-auth-card {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9) !important;
  max-width: 440px !important;
}
.bd-auth-card h1 { font-size: 1.9rem !important; }

/* ==========================================================================
   13. MOTION  (rich animations site-wide, modal-safe)
   --------------------------------------------------------------------------
   IMPORTANT: page-level containers animate OPACITY ONLY. A lingering transform
   (from `animation: ... both`) turns an element into the containing block for
   its `position: fixed` descendants, which would push modals off-center. All
   transform keyframes therefore END at `transform: none` to leave no residue.
   ========================================================================== */
@keyframes bd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bd-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes bd-rise-soft {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes bd-pop {
  0% { opacity: 0; transform: scale(0.92); }
  60% { transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes bd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Page shells — opacity only (keeps fixed modals centered) */
.bd-page-enter,
.bd-home-vault,
.bd-dash,
.bd-dj-library,
.bd-an { animation: bd-fade-in .45s var(--ease) both; }

/* Section blocks rise in */
.bd-dj-section,
.bd-dj-search-hero,
.bd-final-inner,
.bd-how,
.game-hero--detail,
.sp-player,
.sp-queue,
#bd-host-console,
.bd-hd-top,
.bd-hd-actions,
.bd-hd-layout { animation: bd-rise .55s var(--ease) both; }

/* Staggered children across every grid/rail */
.bd-dj-cat-grid > *,
.bd-hd-actions > *,
.bd-hd-games-list > *,
.bd-dj-results-grid > *,
.bd-home-scroll > *,
.bd-how-grid > *,
.bd-hd-pills > *,
.bd-experience-grid > * { animation: bd-rise-soft .5s var(--ease) both; }

.bd-dj-cat-grid > *:nth-child(1),  .bd-hd-actions > *:nth-child(1),  .bd-dj-results-grid > *:nth-child(1),  .bd-hd-games-list > *:nth-child(1) { animation-delay: .02s; }
.bd-dj-cat-grid > *:nth-child(2),  .bd-hd-actions > *:nth-child(2),  .bd-dj-results-grid > *:nth-child(2),  .bd-hd-games-list > *:nth-child(2) { animation-delay: .07s; }
.bd-dj-cat-grid > *:nth-child(3),  .bd-hd-actions > *:nth-child(3),  .bd-dj-results-grid > *:nth-child(3),  .bd-hd-games-list > *:nth-child(3) { animation-delay: .12s; }
.bd-dj-cat-grid > *:nth-child(4),  .bd-hd-actions > *:nth-child(4),  .bd-dj-results-grid > *:nth-child(4),  .bd-hd-games-list > *:nth-child(4) { animation-delay: .17s; }
.bd-dj-cat-grid > *:nth-child(5),  .bd-dj-results-grid > *:nth-child(5),  .bd-hd-games-list > *:nth-child(5) { animation-delay: .22s; }
.bd-dj-cat-grid > *:nth-child(n+6), .bd-dj-results-grid > *:nth-child(n+6), .bd-hd-games-list > *:nth-child(n+6) { animation-delay: .27s; }

/* Hero headline + landing visual */
.relative.flex.min-h-\[88vh\] h1 { animation: bd-rise .7s var(--ease) both; }
.relative.flex.min-h-\[88vh\] p { animation: bd-rise .7s .08s var(--ease) both; }
/* opacity-only: this element is positioned via transform: translateY(-52%) */
.relative.flex.min-h-\[88vh\] .bd-landing-visual { animation: bd-fade-in .9s .15s var(--ease) both; }

/* ── Micro-interactions ── */
.nav-link::after,
.nav-link--active::after { transition: transform .2s var(--ease); }
.site-header .nav-link { transition: color .18s var(--ease); }

.bd-hd-game-row { transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease) !important; }
.bd-hd-game-row:hover .bd-hd-game-row__chev { transform: translateX(3px); transition: transform .18s var(--ease); }

.bd-dj-cat-card__art,
.bd-hd-action__icon { transition: transform .25s var(--ease); }
.bd-dj-cat-card:hover .bd-dj-cat-card__art { transform: scale(1.06) rotate(-3deg); }
.bd-hd-action:hover .bd-hd-action__icon { transform: translateY(-2px) scale(1.04); }

.playlist-card-play,
.bd-pl-card-art { transition: transform .25s var(--ease); }
.playlist-card:hover .playlist-card-play { transform: scale(1.08); }

.sp-ctrl,
.action-chip,
.filter-pill,
.bd-host-action,
.sp-pill { transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease) !important; }
.sp-ctrl:active,
.bd-host-action:active,
.action-chip:active { transform: translateY(1px) scale(0.98) !important; }

/* Now-playing artwork breathes */
.sp-artwork--live { animation: bd-float 3.2s ease-in-out infinite; }

/* ── Playful layer (fun, but subtle) ───────────────────────────────────────
   Extra personality on top of the base motion system. All transform keyframes
   resolve to a neutral state so nothing becomes a containing block for modals. */
@keyframes bd-wiggle {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-7deg); }
  65% { transform: rotate(5deg); }
}
@keyframes bd-sheen {
  0% { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}
@keyframes bd-cta-breathe {
  0%, 100% { box-shadow: 0 14px 40px -16px rgba(139,92,246,0.6), 0 0 0 0 rgba(139,92,246,0); }
  50% { box-shadow: 0 18px 48px -14px rgba(139,92,246,0.85), 0 0 0 7px rgba(139,92,246,0.07); }
}
/* Primary buttons: a light sweep glides across on hover */
.btn-primary,
.bd-acc-btn--primary,
.bd-cta-big { position: relative; overflow: hidden; }
.btn-primary::after,
.bd-acc-btn--primary::after,
.bd-cta-big::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after,
.bd-acc-btn--primary:hover::after,
.bd-cta-big:hover::after { animation: bd-sheen 0.75s var(--ease); }

/* The big landing + final CTAs gently breathe to pull the eye toward signup */
.relative.flex.min-h-\[88vh\] a.btn-primary,
.relative.flex.min-h-\[88vh\] a.bd-cta-big,
.bd-final-inner .btn-primary,
.bd-final-inner .bd-cta-big { animation: bd-cta-breathe 3.6s ease-in-out infinite; }

/* Cards lift a little higher with a springy ease on hover */
.playlist-card,
.bd-pl-card,
.bd-dj-cat-card {
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease), border-color .2s var(--ease) !important;
}
.playlist-card:hover,
.bd-pl-card:hover,
.bd-dj-cat-card:hover { transform: translateY(-6px) !important; }

/* Friendly wiggle on the brand logo */
.site-header a img,
.bd-brand img,
.bd-brand svg { transition: transform .25s var(--ease); }
.site-header a:hover img,
.bd-brand:hover img,
.bd-brand:hover svg { animation: bd-wiggle .55s var(--ease); }

/* Nav links nudge up on hover */
.site-header .nav-link:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   15. MODAL / OVERLAY SAFETY + cohesive toasts
   ========================================================================== */
/* The report/detail overlay: pin to viewport + center (was knocked off-center
   by an ancestor transform; page containers are now transform-free too). */
.bd-an-detail-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bd-an-detail { margin: auto !important; }

/* Toasts must sit above modals (modal z-index ~12000) */
.bd-acc-toast,
.ui-toast {
  z-index: 13050 !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--line-violet) !important;
  color: var(--tx-strong) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.85), var(--glow-violet) !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.3rem !important;
}
.bd-acc-toast--error {
  border-color: rgba(244,114,182,0.6) !important;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.85), 0 14px 40px -14px rgba(244,114,182,0.5) !important;
}

/* ==========================================================================
   17. ADMIN — emoji hints editor
   ========================================================================== */
.bd-emoji-admin .bd-emoji-pick {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 360px;
  margin-bottom: 1rem;
}
.bd-emoji-admin .bd-emoji-pick > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tx-sub);
}
.bd-emoji-songs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.35rem;
}
.bd-emoji-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
}
.bd-emoji-row__meta { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.bd-emoji-row__meta strong {
  color: var(--tx-strong);
  font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-emoji-row__meta span {
  color: var(--tx-muted);
  font-size: 0.78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-emoji-row__edit { display: flex; align-items: center; gap: 0.5rem; }
.bd-emoji-row__preview {
  flex: none;
  min-width: 4.6rem;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: right;
}
.bd-emoji-input {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem !important;
  padding: 0.5rem 0.6rem !important;
}
.bd-emoji-clear {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  background: var(--surface-glass);
  color: var(--tx-sub);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.bd-emoji-clear:hover { border-color: var(--line-violet); color: var(--tx-strong); }
.bd-emoji-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.bd-emoji-status { font-weight: 700; font-size: 0.88rem; color: var(--tx-sub); }
.bd-emoji-status--ok { color: var(--bd-teal); }
.bd-emoji-status--error { color: var(--bd-pink); }

@media (max-width: 600px) {
  .bd-emoji-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .bd-emoji-row__preview { text-align: left; min-width: 0; }
}

/* ==========================================================================
   16. HOST "RUN THE GAME" PAGE — bring into the unified design language
   beatdesk-host.css hardcodes the OLD palette via .bd-host-page selectors;
   remap its variables so the whole console matches the rest of the site.
   ========================================================================== */
.bd-host-page {
  --host-surface: var(--bg-2);
  --host-surface-2: var(--bg-3);
  --host-border: var(--line);
  --host-radius: 16px;
  --bd-violet-dark: #6d28d9;
  --bd-violet-glow: rgba(139,92,246,0.45);
}
.bd-host-page .game-player {
  --bd-bg-card: var(--surface-card);
  --bd-bg-raised: var(--bg-3);
  --bd-bg-soft: rgba(255,255,255,0.05);
  --bd-border: var(--line);
  --bd-cream: var(--tx-strong);
  --bd-cream-muted: var(--tx-sub);
  --bd-violet: #8b5cf6;
  --bd-violet-light: var(--bd-violet-soft);
  --bd-teal: #2dd4bf;
  --bd-glow: rgba(139,92,246,0.4);
}

/* Console shell — unified panel */
.bd-host-page .mx-auto.max-w-6xl {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--card-shadow) !important;
}
/* "Host console" kicker -> shared eyebrow style */
.bd-host-page .mx-auto.max-w-6xl::before {
  font-family: var(--font-display) !important;
  letter-spacing: 0.16em !important;
  color: var(--bd-violet-soft) !important;
}

/* Player stage + queue surfaces */
.bd-host-page .bd-host-grid .sp-player,
.bd-host-page .bd-host-grid .sp-queue {
  background: var(--surface-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
}
.bd-host-page .bd-host-grid .sp-player {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(139,92,246,0.16), transparent 60%),
    var(--surface-card) !important;
}
.bd-host-page .sp-title { font-family: var(--font-display) !important; }
.bd-host-page .sp-track::before,
.bd-host-page .sp-status { color: var(--bd-teal) !important; }

/* Now-playing queue row -> lime live accent (consistent with rest of app) */
.bd-host-page .sp-queue-row--now {
  background: linear-gradient(90deg, rgba(198,255,74,0.14), rgba(139,92,246,0.1)) !important;
  border: 1px solid rgba(198,255,74,0.45) !important;
}

/* Console action buttons -> unified */
.bd-host-page #bd-host-console .bd-host-action {
  background: var(--surface-glass) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--tx-strong) !important;
  border-radius: var(--r-sm) !important;
}
.bd-host-page #bd-host-console .bd-host-action:hover {
  border-color: var(--line-violet) !important;
  background: var(--bg-3) !important;
  filter: none;
  transform: translateY(-1px);
}
.bd-host-page #bd-host-console .bd-host-btn--accent { background: var(--grad-accent) !important; color: #07060e !important; }
.bd-host-page #bd-host-console .bd-host-btn--primary { background: var(--grad-primary) !important; }
.bd-host-page #bd-host-console .bd-host-section-label,
.bd-host-page #bd-host-console .bd-host-block-label { color: var(--bd-violet-soft) !important; }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  .bd-hd-actions { grid-template-columns: 1fr !important; }
  .bd-dj-cat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .relative.flex.min-h-\[88vh\] .bd-landing-visual { display: none; }
}

/* ==========================================================================
   17. APP SHELL REDESIGN (non-venue pages only)
   Spotify/Discord-inspired navigation + premium dashboard surfaces.
   ========================================================================== */
html.bd-shell-mounted .site-header {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

html.bd-shell-mounted body {
  min-height: 100vh;
  padding-left: 18.25rem;
  background:
    radial-gradient(85% 65% at 92% -8%, rgba(45,212,191,0.14), transparent 62%),
    radial-gradient(90% 70% at 4% -18%, rgba(139,92,246,0.18), transparent 64%),
    var(--bg-0) !important;
}

#bd-app-shell.bd-shell {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 12020;
  width: 17rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background:
    linear-gradient(180deg, rgba(20,17,40,0.95) 0%, rgba(11,10,23,0.98) 100%);
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 48px -32px rgba(0,0,0,0.7);
}

.bd-shell__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.12rem;
  padding: 0.6rem 0.65rem;
  border-radius: 0.9rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
}
.bd-shell__brand img { grid-row: 1 / span 2; border-radius: 0.55rem; }
.bd-shell__brand strong {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: 1rem;
  color: var(--tx-strong);
}
.bd-shell__brand span {
  color: var(--tx-sub);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bd-shell__nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}
.bd-shell__nav-btn {
  border: 1px solid transparent;
  border-radius: 0.9rem;
  background: transparent;
  color: var(--tx-sub);
  min-height: 2.9rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  text-align: left;
  cursor: pointer;
  transition: all .16s var(--ease);
}
.bd-shell__nav-btn:hover {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.28);
  color: var(--tx-strong);
  transform: translateX(2px);
}
.bd-shell__nav-btn.is-active {
  background: linear-gradient(130deg, rgba(139,92,246,0.27), rgba(45,212,191,0.12));
  border-color: rgba(139,92,246,0.45);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.bd-shell__nav-icon { width: 1.2rem; text-align: center; opacity: 0.95; }
.bd-shell__nav-label { font-size: 0.92rem; font-weight: 650; }

.bd-shell__footer {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
}
.bd-shell__cmdk {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgba(255,255,255,0.03);
  color: var(--tx-sub);
  padding: 0.55rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all .16s var(--ease);
}
.bd-shell__cmdk:hover {
  color: var(--tx-strong);
  border-color: var(--line-violet);
  background: rgba(139,92,246,0.12);
}
.bd-shell__cmdk kbd {
  border: 1px solid var(--line);
  border-radius: 0.42rem;
  padding: 0.18rem 0.38rem;
  font-size: 0.7rem;
  color: var(--tx-muted);
}
.bd-shell__user {
  margin: 0;
  color: var(--tx-muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Command palette */
.bd-cmdk {
  position: fixed;
  inset: 0;
  z-index: 13040;
}
.bd-cmdk__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,6,14,0.7);
  backdrop-filter: blur(6px);
}
.bd-cmdk__card {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 4rem));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23,20,46,0.95), rgba(13,11,28,0.98));
  box-shadow: 0 48px 100px -52px rgba(0,0,0,0.95);
  animation: bd-pop .24s var(--ease) both;
}
.bd-cmdk__input {
  height: 3rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--tx-strong);
  padding: 0 0.95rem;
  font-size: 0.95rem;
}
.bd-cmdk__input:focus { outline: none; }
.bd-cmdk__list { overflow: auto; padding: 0.5rem; }
.bd-cmdk__item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--tx-sub);
  min-height: 2.6rem;
  padding: 0.45rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  cursor: pointer;
}
.bd-cmdk__item:hover {
  background: rgba(139,92,246,0.14);
  border-color: rgba(139,92,246,0.36);
  color: var(--tx-strong);
}

/* Core page rhythm + spacing system */
html.bd-shell-mounted #root > main,
html.bd-shell-mounted .bd-page-enter,
html.bd-shell-mounted #bd-home-mount,
html.bd-shell-mounted #bd-playlists-mount,
html.bd-shell-mounted #bd-account-mount {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(1.15rem, 2.6vw, 2rem) clamp(0.95rem, 2vw, 1.4rem) clamp(2rem, 4.5vw, 3.2rem) !important;
}

html.bd-shell-mounted .bd-page-enter {
  gap: 1.1rem !important;
  animation: bd-fade-in .26s var(--ease) both;
}

/* Unified premium surface vocabulary */
html.bd-shell-mounted .playlist-card,
html.bd-shell-mounted .bd-pl-card,
html.bd-shell-mounted .bd-dj-cat-card,
html.bd-shell-mounted .bd-dj-result-card,
html.bd-shell-mounted .bd-hd-action,
html.bd-shell-mounted .bd-hd-side-card,
html.bd-shell-mounted .bd-hd-game-row,
html.bd-shell-mounted .bd-an-card,
html.bd-shell-mounted .bd-acc-card,
html.bd-shell-mounted .bd-host-console-shell,
html.bd-shell-mounted #bd-host-console {
  border-radius: 1.1rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(165deg, rgba(30,26,58,0.68), rgba(14,12,30,0.92)) !important;
  box-shadow: 0 24px 62px -46px rgba(0,0,0,0.82);
}

/* Home + playlists: cleaner hierarchy */
html.bd-shell-mounted .bd-home-hero,
html.bd-shell-mounted .bd-dj-home-hero,
html.bd-shell-mounted .bd-dj-search-hero {
  border-radius: 1.2rem !important;
  padding: clamp(1.2rem, 3vw, 2rem) !important;
  background:
    radial-gradient(120% 110% at 10% 0%, rgba(139,92,246,0.2), transparent 58%),
    linear-gradient(165deg, rgba(27,23,52,0.88), rgba(12,10,24,0.94)) !important;
  border: 1px solid var(--line) !important;
}

html.bd-shell-mounted .bd-home-hero h1,
html.bd-shell-mounted .bd-dj-home-hero h1,
html.bd-shell-mounted .bd-dj-library-head h1 {
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
}
html.bd-shell-mounted .bd-dj-section,
html.bd-shell-mounted .bd-dj-results-grid,
html.bd-shell-mounted .bd-dj-cat-grid {
  gap: 0.95rem !important;
}

/* Dashboard/admin feel integrated and not "separate tool" */
html.bd-shell-mounted .bd-hd-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr) !important;
  gap: 1rem !important;
}
html.bd-shell-mounted .bd-dash-admin-nav {
  padding: 0.45rem;
  border: 1px solid var(--line) !important;
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.02);
}
html.bd-shell-mounted .bd-dash-admin-tab {
  border-radius: 0.65rem !important;
  min-height: 2.4rem;
  padding-inline: 0.78rem !important;
  font-weight: 640 !important;
}
html.bd-shell-mounted .bd-dash-admin-tab.is-active {
  background: linear-gradient(120deg, rgba(139,92,246,0.28), rgba(45,212,191,0.12)) !important;
  border: 1px solid rgba(139,92,246,0.42) !important;
}
html.bd-shell-mounted .bd-emoji-admin {
  margin-top: 1rem;
  border-radius: 1rem !important;
  padding: 1rem !important;
}

/* Host page: game-first layout, sticky controls, touch-friendly actions */
html.bd-shell-mounted .bd-host-page .game-player {
  border-radius: 1.2rem !important;
  padding: 1rem !important;
}
html.bd-shell-mounted .bd-host-page .mx-auto.max-w-6xl {
  border-radius: 1rem !important;
  padding: 0.95rem !important;
}
html.bd-shell-mounted #bd-host-console {
  position: sticky !important;
  top: 1rem;
  z-index: 7;
}
html.bd-shell-mounted .bd-host-action,
html.bd-shell-mounted .sp-ctrl,
html.bd-shell-mounted .bd-host-btn {
  min-height: 2.9rem !important;
  border-radius: 0.85rem !important;
  font-size: 0.95rem !important;
}
html.bd-shell-mounted .bd-host-action-grid {
  gap: 0.6rem !important;
}
html.bd-shell-mounted .sp-ctrl[data-action="player-play"] {
  min-width: 8rem;
}

/* Analytics premium paneling */
html.bd-shell-mounted .bd-an,
html.bd-shell-mounted .bd-an-shell,
html.bd-shell-mounted .bd-an-detail,
html.bd-shell-mounted .bd-an-stat,
html.bd-shell-mounted .bd-an-table {
  border-radius: 1rem !important;
}
html.bd-shell-mounted .bd-an h1,
html.bd-shell-mounted .bd-an h2 {
  letter-spacing: -0.02em;
}

/* Consistent empty/loading states */
html.bd-shell-mounted .bd-hd-games-empty,
html.bd-shell-mounted .bd-hd-games-loading,
html.bd-shell-mounted .bd-dj-empty,
html.bd-shell-mounted .bd-an-empty {
  border-radius: 0.95rem !important;
  border: 1px dashed rgba(139,92,246,0.32) !important;
  background: rgba(139,92,246,0.06) !important;
  padding: 1rem !important;
}

/* Inputs and tables: unified SaaS-grade controls */
html.bd-shell-mounted input,
html.bd-shell-mounted select,
html.bd-shell-mounted textarea {
  border-radius: 0.8rem !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(11,9,23,0.86) !important;
  color: var(--tx-strong) !important;
}
html.bd-shell-mounted table {
  border-collapse: separate;
  border-spacing: 0;
}
html.bd-shell-mounted th,
html.bd-shell-mounted td {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* responsive desktop/tablet */
@media (max-width: 1140px) {
  html.bd-shell-mounted body { padding-left: 15.2rem; }
  #bd-app-shell.bd-shell { width: 14.2rem; }
  .bd-shell__brand span { display: none; }
}

@media (max-width: 920px) {
  html.bd-shell-mounted body {
    padding-left: 0;
    padding-bottom: 4.8rem;
  }
  #bd-app-shell.bd-shell {
    width: auto;
    height: 4.4rem;
    inset: auto 0 0 0;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 0.58rem 0.7rem;
  }
  .bd-shell__brand,
  .bd-shell__footer { display: none; }
  .bd-shell__nav {
    flex-direction: row;
    gap: 0.42rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
  }
  .bd-shell__nav-btn {
    min-height: 3rem;
    min-width: 3rem;
    padding: 0.45rem 0.6rem;
    justify-content: center;
    border-radius: 0.8rem;
  }
  .bd-shell__nav-label { display: none; }
  html.bd-shell-mounted #root > main,
  html.bd-shell-mounted .bd-page-enter,
  html.bd-shell-mounted #bd-home-mount,
  html.bd-shell-mounted #bd-playlists-mount,
  html.bd-shell-mounted #bd-account-mount {
    width: 100%;
    padding-inline: 0.8rem !important;
  }
}

/* ==========================================================================
   18. HOME + PLAYLIST DETAIL (SECOND PASS)
   User request: fewer "separate containers", more unified continuous surface.
   ========================================================================== */

/* ---- Logged-in home as one canvas (not stacked cards) ---- */
html.bd-shell-mounted.bd-logged-in-home #bd-home-mount {
  position: relative;
}
html.bd-shell-mounted.bd-logged-in-home #bd-home-mount::before {
  content: "";
  position: absolute;
  inset: 0.3rem 0.35rem 0.8rem;
  border-radius: 1.25rem;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(139,92,246,0.15), transparent 62%),
    radial-gradient(85% 70% at 100% 0%, rgba(45,212,191,0.09), transparent 60%),
    linear-gradient(180deg, rgba(22,19,43,0.66), rgba(10,9,21,0.6));
  border: 1px solid rgba(255,255,255,0.05);
}

html.bd-shell-mounted.bd-logged-in-home .bd-home-vault,
html.bd-shell-mounted.bd-logged-in-home .bd-page-enter {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.bd-shell-mounted.bd-logged-in-home .bd-home-hero,
html.bd-shell-mounted.bd-logged-in-home .bd-dj-home-hero,
html.bd-shell-mounted.bd-logged-in-home .bd-dj-search-hero,
html.bd-shell-mounted.bd-logged-in-home .bd-dj-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html.bd-shell-mounted.bd-logged-in-home .bd-home-hero,
html.bd-shell-mounted.bd-logged-in-home .bd-dj-home-hero,
html.bd-shell-mounted.bd-logged-in-home .bd-dj-search-hero {
  padding: 0.2rem 0.2rem 0.95rem !important;
}

html.bd-shell-mounted.bd-logged-in-home .bd-dj-section {
  margin-top: 0.85rem !important;
  padding: 0.9rem 0.2rem 0.15rem !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
html.bd-shell-mounted.bd-logged-in-home .bd-dj-section:first-of-type {
  border-top: 0 !important;
}

html.bd-shell-mounted.bd-logged-in-home .bd-dj-section-head {
  margin-bottom: 0.6rem !important;
}
html.bd-shell-mounted.bd-logged-in-home .bd-dj-section-head p {
  color: rgba(226,223,255,0.73) !important;
}

/* Home discover/search rail */
html.bd-shell-mounted #bd-home-discover {
  position: sticky;
  top: 0.55rem;
  z-index: 8;
  margin: 0.25rem 0 0.95rem;
  padding: 0.7rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(12,10,24,0.82);
  backdrop-filter: blur(14px);
}
html.bd-shell-mounted .bd-home-discover__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
html.bd-shell-mounted .bd-home-discover__search-icon {
  width: 1.5rem;
  text-align: center;
  opacity: 0.78;
}
html.bd-shell-mounted #bd-home-discover-input {
  flex: 1;
  min-height: 2.6rem;
  border-radius: 0.78rem !important;
  padding: 0 0.85rem !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--tx-strong) !important;
  font-size: 0.93rem !important;
}
html.bd-shell-mounted .bd-home-discover__chips {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}
html.bd-shell-mounted .bd-home-discover__chip {
  border: 1px solid rgba(139,92,246,0.34);
  border-radius: 999px;
  min-height: 2rem;
  padding: 0.3rem 0.72rem;
  background: rgba(139,92,246,0.13);
  color: var(--tx-sub);
  font-size: 0.79rem;
  font-weight: 640;
  cursor: pointer;
  transition: all .16s var(--ease);
}
html.bd-shell-mounted .bd-home-discover__chip:hover {
  background: rgba(139,92,246,0.24);
  color: var(--tx-strong);
  transform: translateY(-1px);
}

/* keep content touch-friendly, but visually lighter so page feels continuous */
html.bd-shell-mounted.bd-logged-in-home .bd-dj-cat-card,
html.bd-shell-mounted.bd-logged-in-home .bd-pl-card,
html.bd-shell-mounted.bd-logged-in-home .playlist-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 16px 32px -30px rgba(0,0,0,0.8) !important;
}
html.bd-shell-mounted.bd-logged-in-home .bd-dj-cat-card:hover,
html.bd-shell-mounted.bd-logged-in-home .bd-pl-card:hover,
html.bd-shell-mounted.bd-logged-in-home .playlist-card:hover {
  background: rgba(139,92,246,0.12) !important;
  border-color: rgba(139,92,246,0.34) !important;
}

/* ---- Playlist detail (/playlists/:slug) as one integrated host stage ---- */
html.bd-shell-mounted .bd-host-page .pb-16 {
  position: relative;
}

html.bd-shell-mounted .bd-host-page .game-hero--detail {
  border-radius: 1.05rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px -34px rgba(0,0,0,0.88) !important;
  margin-bottom: 0.7rem !important;
}

html.bd-shell-mounted .bd-host-page .mx-auto.max-w-6xl {
  margin-top: 0 !important;
  border-radius: 1.1rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(139,92,246,0.14), transparent 55%),
    radial-gradient(120% 100% at 100% 0%, rgba(45,212,191,0.08), transparent 58%),
    linear-gradient(170deg, rgba(20,17,40,0.92), rgba(10,9,20,0.95)) !important;
  box-shadow: 0 26px 68px -38px rgba(0,0,0,0.92) !important;
}

/* player + queue + console should read as ONE stage, not three boxed panels */
html.bd-shell-mounted .bd-host-page .bd-host-grid .sp-player,
html.bd-shell-mounted .bd-host-page .bd-host-grid .sp-queue,
html.bd-shell-mounted .bd-host-page #bd-host-console {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.bd-shell-mounted .bd-host-page .bd-host-grid {
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* internal separators define structure instead of independent cards */
html.bd-shell-mounted .bd-host-page .bd-host-grid .sp-player {
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}
html.bd-shell-mounted .bd-host-page #bd-host-console {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding-left: 0.85rem !important;
}

html.bd-shell-mounted .bd-host-page .sp-player-panel,
html.bd-shell-mounted .bd-host-page .sp-options.sp-options--surfaced,
html.bd-shell-mounted .bd-host-page .sp-queue-row,
html.bd-shell-mounted .bd-host-page #bd-host-console .bd-host-section,
html.bd-shell-mounted .bd-host-page #bd-host-console .bd-host-block {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

html.bd-shell-mounted .bd-host-page #bd-host-console .bd-host-action {
  min-height: 3rem !important;
  border-radius: 0.8rem !important;
  font-size: 0.95rem !important;
}

html.bd-shell-mounted .bd-host-page .sp-ctrl--play {
  min-height: 3.25rem !important;
  min-width: 9.2rem !important;
  border-radius: 0.95rem !important;
}

@media (max-width: 1100px) {
  html.bd-shell-mounted .bd-host-page .bd-host-grid .sp-player {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  html.bd-shell-mounted .bd-host-page #bd-host-console {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 920px) {
  html.bd-shell-mounted #bd-home-discover {
    top: 0.25rem;
    margin-top: 0;
  }
}