/* =============================================
   pgmusic — Cosmic Sci-Fi Design System
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ---- Variables ---- */
:root {
  /* Dark theme (default) */
  --c-bg:         #050508;
  --c-bg2:        #0a0a12;
  --c-bg3:        #0f0f1a;
  --c-surface:    #12121f;
  --c-surface2:   #1a1a2e;
  --c-surface3:   #232340;
  --c-border:     rgba(120,100,255,0.12);
  --c-border2:    rgba(120,100,255,0.22);

  --c-purple:     #7c3aed;
  --c-purple2:    #6d28d9;
  --c-violet:     #8b5cf6;
  --c-violet2:    #a78bfa;
  --c-indigo:     #4f46e5;
  --c-pink:       #ec4899;
  --c-cyan:       #06b6d4;
  --c-blue:       #3b82f6;

  --c-text:       #e8e8f0;
  --c-text2:      #9898b8;
  --c-text3:      #5a5a80;

  --glow-purple:  0 0 20px rgba(124,58,237,0.35), 0 0 60px rgba(124,58,237,0.15);
  --glow-violet:  0 0 15px rgba(139,92,246,0.4);
  --glow-pink:    0 0 20px rgba(236,72,153,0.3);

  --font-display: 'Syne', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'DM Sans', sans-serif;

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-full: 999px;

  --sidebar-w: 240px;
  --player-h: 80px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Light theme ---- */
[data-theme="light"] {
  --c-bg:         #f4f4f8;
  --c-bg2:        #eeeef4;
  --c-bg3:        #e8e8f0;
  --c-surface:    #ffffff;
  --c-surface2:   #f0f0f8;
  --c-surface3:   #e4e4ef;
  --c-border:     rgba(100,80,200,0.1);
  --c-border2:    rgba(100,80,200,0.2);

  --c-purple:     #7c3aed;
  --c-purple2:    #6d28d9;
  --c-violet:     #8b5cf6;
  --c-violet2:    #6d28d9;
  --c-indigo:     #4f46e5;
  --c-pink:       #ec4899;

  --c-text:       #0f0f1a;
  --c-text2:      #4a4a6a;
  --c-text3:      #8888aa;

  --glow-purple:  0 0 20px rgba(124,58,237,0.2), 0 0 40px rgba(124,58,237,0.08);
  --glow-violet:  0 0 12px rgba(109,40,217,0.25);
  --glow-pink:    0 0 15px rgba(236,72,153,0.15);
}

[data-theme="light"] body {
  background: var(--c-bg);
}

[data-theme="light"] .sidebar-logo-text {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .nebula-title {
  background: linear-gradient(135deg, #1a0a3a 0%, #4f46e5 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .ctrl-btn-play {
  background: var(--c-purple);
  color: white;
}

[data-theme="light"] .ctrl-btn-play:hover {
  background: var(--c-violet);
}

[data-theme="light"] #player {
  background: rgba(238,238,244,0.97);
  border-top-color: var(--c-border2);
}

[data-theme="light"] .topbar {
  background: linear-gradient(to bottom, rgba(244,244,248,0.98) 0%, rgba(244,244,248,0.7) 100%);
}

[data-theme="light"] .modal {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Theme toggle button */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  color: var(--c-text3);
}
.theme-toggle:hover {
  background: rgba(124,58,237,0.12);
  border-color: var(--c-purple);
  color: var(--c-violet2);
}
.theme-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}
/* Push active state */
.theme-toggle.push-active {
  color: var(--c-violet2);
  border-color: var(--c-border2);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea, select {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  outline: none;
}
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--c-bg2); }
::-webkit-scrollbar-thumb { background: var(--c-surface3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-purple); }

/* ---- App Layout ---- */
#app {
  display: grid;
  grid-template-areas:
    "sidebar main"
    "player  player";
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr var(--player-h);
  height: 100vh;
  overflow: hidden;
}

/* ---- Sidebar ---- */
#sidebar {
  grid-area: sidebar;
  background: var(--c-bg2);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 10;
}

.sidebar-logo {
  padding: 24px 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--c-purple), var(--c-violet));
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-violet);
}
.sidebar-logo-icon svg { width: 18px; height: 18px; fill: white; }
.sidebar-logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #c4b5fd, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-nav { padding: 0 12px; }
.sidebar-section { margin-bottom: 24px; }
.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text3);
  padding: 0 8px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text2);
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}
.nav-item:hover { background: var(--c-surface); color: var(--c-text); }
.nav-item.active {
  background: rgba(124,58,237,0.15);
  color: var(--c-violet2);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--c-purple);
  border-radius: 0 3px 3px 0;
  box-shadow: var(--glow-violet);
}
.nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.nav-item.active .icon { opacity: 1; }

.sidebar-playlists { padding: 0 12px; flex: 1; overflow-y: auto; }
.sidebar-playlist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  color: var(--c-text3);
  cursor: pointer;
  transition: all var(--transition);
}
.sidebar-playlist-item:hover { color: var(--c-text); background: var(--c-surface); }
.sidebar-playlist-item img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.sidebar-playlist-cover-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--c-surface3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sidebar-user {
  padding: 16px 20px;
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--transition);
}
.sidebar-user:hover { background: var(--c-surface); }
.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-surface3);
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--c-border2);
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-handle {
  font-size: 0.7rem;
  color: var(--c-text3);
  font-family: var(--font-mono);
}

/* ---- Main Content ---- */
#main {
  grid-area: main;
  overflow-y: auto;
  position: relative;
  background: var(--c-bg);
}

/* ---- Top Bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(to bottom, rgba(5,5,8,0.98) 0%, rgba(5,5,8,0.7) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--c-border);
}

.topbar-nav { display: flex; gap: 8px; }
.topbar-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--c-text2);
  transition: all var(--transition);
}
.topbar-nav-btn:hover { background: var(--c-surface2); color: var(--c-text); }

.search-bar {
  flex: 1;
  max-width: 420px;
  position: relative;
}
.search-bar input {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 9px 16px 9px 40px;
  font-size: 0.875rem;
  color: var(--c-text);
  transition: all var(--transition);
}
.search-bar input:focus {
  border-color: var(--c-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
  background: var(--c-surface2);
}
.search-bar input::placeholder { color: var(--c-text3); }
.search-bar-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text3);
  pointer-events: none;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), var(--glow-violet);
  overflow: hidden;
  z-index: 100;
  display: none;
}
.search-dropdown.visible { display: block; animation: slideDown 0.2s ease; }
.search-section { padding: 12px; }
.search-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text3);
  font-family: var(--font-mono);
  padding: 0 4px 8px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.search-result-item:hover { background: var(--c-surface3); }
.search-result-item img, .search-result-cover {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--c-surface3);
  flex-shrink: 0;
}
.search-result-cover.round { border-radius: 50%; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-title {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-sub {
  font-size: 0.75rem;
  color: var(--c-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions { display: flex; gap: 8px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-full); font-size: 0.8rem; font-weight: 600; transition: all var(--transition); cursor: pointer; letter-spacing: 0.01em; }
.btn-primary {
  background: linear-gradient(135deg, var(--c-purple), var(--c-violet));
  color: white;
  box-shadow: 0 4px 15px rgba(124,58,237,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 25px rgba(124,58,237,0.5); }
.btn-ghost { background: var(--c-surface); color: var(--c-text2); }
.btn-ghost:hover { background: var(--c-surface2); color: var(--c-text); }
.btn-sm { padding: 5px 12px; font-size: 0.75rem; }

/* ---- Pages ---- */
.page { display: none; }
.page.active { display: block; }

/* ---- Home Page ---- */
.nebula-container {
  width: 100%;
  height: 520px;
  position: relative;
  overflow: hidden;
}
#nebulaCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.nebula-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--c-bg) 100%);
  pointer-events: none;
}
.nebula-content {
  position: absolute;
  bottom: 60px;
  left: 48px;
  right: 48px;
}
.nebula-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-shadow: 0 0 40px rgba(139,92,246,0.6);
}
.nebula-subtitle {
  font-size: 1rem;
  color: var(--c-text2);
  margin-bottom: 24px;
  max-width: 500px;
}
.genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.genre-tag {
  padding: 5px 16px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-mono);
  color: var(--c-text2);
}
.genre-tag:hover {
  border-color: rgba(139,92,246,0.5);
  background: rgba(124,58,237,0.12);
  color: var(--c-text);
}
.genre-tag.active {
  border-color: var(--c-purple);
  background: rgba(124,58,237,0.2);
  color: var(--c-violet2);
  box-shadow: 0 0 12px rgba(124,58,237,0.25);
}

.section { padding: 32px 32px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-link {
  font-size: 0.8rem;
  color: var(--c-text3);
  font-family: var(--font-mono);
  transition: color var(--transition);
}
.section-link:hover { color: var(--c-violet2); }

/* ---- Cards ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.cards-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover { transform: translateY(-3px); border-color: var(--c-border2); box-shadow: 0 12px 40px rgba(0,0,0,0.4), var(--glow-violet); }
.card:hover::before { opacity: 1; }
.card:hover .card-play { opacity: 1; transform: scale(1) translateY(0); }

.card-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--c-surface2);
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.card:hover .card-cover img { transform: scale(1.05); }
.card-cover.round { border-radius: 50%; }
.card-cover.round .card-play { display: none !important; }

.card-play {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8) translateY(8px);
  transition: all var(--transition);
  box-shadow: var(--glow-purple);
  z-index: 2;
}
.card-play svg { width: 16px; height: 16px; fill: white; margin-left: 2px; }

.card-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.card-sub {
  font-size: 0.75rem;
  color: var(--c-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  background: rgba(124,58,237,0.2);
  color: var(--c-violet2);
  margin-top: 4px;
}

/* ---- Track List ---- */
.track-list { display: flex; flex-direction: column; gap: 2px; }
.track-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--transition);
  group: true;
}
.track-item:hover { background: var(--c-surface); }
.track-item.playing { background: rgba(124,58,237,0.1); }
.track-item.playing .track-num { color: var(--c-purple); }

.track-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--c-text3);
  text-align: center;
  width: 36px;
  flex-shrink: 0;
}
.track-item:hover .track-num-text { display: none; }
.track-item:hover .track-num-play { display: flex !important; }
.track-num-play { display: none; align-items: center; justify-content: center; }
.track-num-play svg { width: 14px; height: 14px; fill: var(--c-text); }

.track-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.track-cover {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-surface2);
  overflow: hidden;
  flex-shrink: 0;
}
.track-cover img { width: 100%; height: 100%; object-fit: cover; }
.track-details { min-width: 0; }
.track-name {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-artist {
  font-size: 0.75rem;
  color: var(--c-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-artist a:hover { color: var(--c-text); text-decoration: underline; }

.track-like-btn {
  opacity: 0;
  transition: opacity var(--transition);
  padding: 4px;
  color: var(--c-text3);
}
.track-item:hover .track-like-btn { opacity: 1; }
.track-like-btn.liked { opacity: 1; color: var(--c-purple); }
.track-like-btn svg { width: 16px; height: 16px; }

.track-duration {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--c-text3);
  width: 40px;
  text-align: right;
}

/* ---- Charts ---- */
.chart-item {
  display: grid;
  grid-template-columns: 40px 48px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--transition);
}
.chart-item:hover { background: var(--c-surface); }
.chart-pos {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--c-text3);
  text-align: center;
}
.chart-pos.top3 { color: var(--c-violet2); text-shadow: var(--glow-violet); }

/* ---- Artist Page ---- */
.artist-banner {
  width: 100%;
  height: 340px;
  position: relative;
  overflow: hidden;
}
.artist-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,8,0.1) 0%, rgba(5,5,8,0.6) 60%, var(--c-bg) 100%);
}
.artist-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 40px;
}
.artist-name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.artist-stats {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}
.artist-stat {
  font-size: 0.85rem;
  color: var(--c-text2);
}
.artist-stat span { font-weight: 700; color: var(--c-text); }

/* ---- Player ---- */
#player {
  grid-area: player;
  background: rgba(10,10,18,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  z-index: 20;
  position: relative;
}

.player-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-cover {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--c-surface2);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition);
  border: 1px solid var(--c-border);
}
.player-cover:hover { transform: scale(1.05); }
.player-cover img { width: 100%; height: 100%; object-fit: cover; }
.player-cover { transition: box-shadow 0.4s ease; }
.player-cover.playing { box-shadow: 0 0 0 2px rgba(139,92,246,0.5), 0 0 20px rgba(124,58,237,0.5), 0 0 50px rgba(124,58,237,0.25); }

.player-info { min-width: 0; }
.player-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.player-title:hover { text-decoration: underline; }
.player-artist {
  font-size: 0.75rem;
  color: var(--c-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-artist a:hover { color: var(--c-text); text-decoration: underline; }

.player-like {
  color: var(--c-text3);
  padding: 4px;
  transition: all var(--transition);
}
.player-like:hover, .player-like.liked { color: var(--c-purple); }
.player-like svg { width: 18px; height: 18px; }

.player-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player-buttons { display: flex; align-items: center; gap: 4px; }
.ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text2);
  transition: all var(--transition);
}
.ctrl-btn:hover { color: var(--c-text); background: var(--c-surface); }
.ctrl-btn.active { color: var(--c-violet2); }
.ctrl-btn svg { width: 18px; height: 18px; }

.ctrl-btn-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 2px 15px rgba(255,255,255,0.15);
}
.ctrl-btn-play:hover { transform: scale(1.07); background: var(--c-violet2); color: white; box-shadow: var(--glow-violet); }
.ctrl-btn-play svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.ctrl-btn-play.paused svg { margin-left: 2px; }
.ctrl-btn-play.playing .icon-play { display: none; }
.ctrl-btn-play.playing .icon-pause { display: block !important; }
.fs-ctrl-play.playing .icon-play { display: none; }
.fs-ctrl-play.playing .icon-pause { display: block !important; }

.player-progress { width: 100%; display: flex; align-items: center; gap: 8px; }
.progress-time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--c-text3); white-space: nowrap; }
.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--c-surface3);
  border-radius: var(--r-full);
  cursor: pointer;
  position: relative;
  transition: height var(--transition);
}
.progress-bar:hover { height: 6px; }
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-purple), var(--c-violet2));
  position: relative;
  transition: width 0.1s linear;
}
.progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  transition: opacity var(--transition);
}
.progress-bar:hover .progress-fill::after { opacity: 1; }

.player-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.volume-control { display: flex; align-items: center; gap: 8px; }
.volume-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--c-surface3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: height var(--transition);
}
.volume-slider:hover { height: 6px; }
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-violet2);
  cursor: pointer;
}

/* ---- Fullscreen Player ---- */
#player-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--c-bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
#player-fullscreen.open { display: flex; animation: fadeIn 0.3s ease; }
.fs-bg {
  position: absolute;
  inset: 0;
  filter: blur(80px) saturate(1.5);
  opacity: 0.15;
  transition: background 1s ease;
}
.fs-content { position: relative; z-index: 1; width: 100%; max-width: 500px; text-align: center; }
.fs-cover {
  width: 280px;
  height: 280px;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: 0 auto 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), var(--glow-purple);
  transition: transform var(--transition);
}
.fs-cover.playing { transform: scale(1.03); box-shadow: 0 30px 100px rgba(0,0,0,0.7), 0 0 60px rgba(124,58,237,0.3); }
.fs-cover img { width: 100%; height: 100%; object-fit: cover; }
.fs-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.fs-artist { font-size: 1rem; color: var(--c-text2); margin-bottom: 32px; }
.fs-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(18,18,31,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text2);
  transition: all var(--transition);
  z-index: 1100 !important;
  border: 1px solid rgba(120,100,255,0.2);
  flex-shrink: 0;
}
.fs-close:hover { background: var(--c-surface2); color: var(--c-text); }
/* Keep close button on top in lyrics mode */
#player-fullscreen.lyrics-mode .fs-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 1100 !important;
}
.fs-progress { margin-bottom: 24px; }
.fs-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
.fs-ctrl-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 4px 25px rgba(255,255,255,0.2);
}
.fs-ctrl-play:hover { background: var(--c-violet2); color: white; transform: scale(1.08); }
.fs-ctrl-play svg { width: 22px; height: 22px; fill: currentColor; }

/* ---- Auth Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
.modal {
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-xl);
  padding: 40px;
  width: 400px;
  max-width: 95vw;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), var(--glow-violet);
  animation: slideUp 0.3s ease;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.modal-sub { font-size: 0.875rem; color: var(--c-text3); margin-bottom: 28px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text3);
}
.modal-close:hover { color: var(--c-text); background: var(--c-surface3); }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--c-text2); margin-bottom: 6px; font-family: var(--font-mono); }
.form-input {
  width: 100%;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--c-text);
  transition: all var(--transition);
}
.form-input:focus { border-color: var(--c-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.form-error { font-size: 0.75rem; color: #f87171; margin-top: 4px; }

.modal-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--c-bg2); padding: 4px; border-radius: var(--r-md); }
.modal-tab {
  flex: 1;
  padding: 8px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: all var(--transition);
  color: var(--c-text3);
}
.modal-tab.active { background: var(--c-surface); color: var(--c-text); }

/* ---- Admin Panel ---- */
.admin-nav {
  display: flex;
  gap: 4px;
  padding: 20px 32px 0;
  border-bottom: 1px solid var(--c-border);
}
.admin-tab {
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text3);
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}
.admin-tab.active { color: var(--c-violet2); border-bottom-color: var(--c-purple); }
.admin-tab:hover { color: var(--c-text); }

.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-section { padding: 24px 32px; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-border); }
.admin-table th { color: var(--c-text3); font-size: 0.75rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.admin-table tr:hover td { background: var(--c-surface); }

.admin-cover-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-surface2);
  overflow: hidden;
}
.admin-cover-thumb img { width: 100%; height: 100%; object-fit: cover; }

.upload-area {
  border: 2px dashed var(--c-border2);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--c-text3);
  font-size: 0.85rem;
}
.upload-area:hover { border-color: var(--c-purple); color: var(--c-violet2); background: rgba(124,58,237,0.05); }
.upload-area input { display: none; }

/* ---- Profile Page ---- */
.profile-header {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 40px 40px 24px;
}
.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c-surface2);
  overflow: hidden;
  border: 3px solid var(--c-border2);
  flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.profile-handle { font-family: var(--font-mono); color: var(--c-text3); font-size: 0.875rem; margin-bottom: 8px; }
.profile-bio { color: var(--c-text2); font-size: 0.9rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--c-border);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c-violet2), var(--c-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 0.75rem; color: var(--c-text3); font-family: var(--font-mono); margin-top: 4px; }

/* ---- Toast ---- */
#toast-container {
  position: fixed;
  bottom: 100px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  font-size: 0.85rem;
  min-width: 200px;
  animation: slideRight 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.toast.success { border-color: rgba(16,185,129,0.4); }
.toast.error { border-color: rgba(248,113,113,0.4); }

/* ---- Animations ---- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(20px); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.playing-indicator { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.playing-indicator span {
  width: 3px;
  background: var(--c-purple);
  border-radius: 2px;
  animation: eq 0.8s ease infinite;
}
.playing-indicator span:nth-child(1) { animation-delay: 0s; height: 6px; }
.playing-indicator span:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.playing-indicator span:nth-child(3) { animation-delay: 0.3s; height: 8px; }
@keyframes eq {
  0%,100% { height: 4px; }
  50% { height: 14px; }
}

/* ---- Util ---- */
.hidden { display: none !important; }
.text-gradient {
  background: linear-gradient(135deg, var(--c-violet2), var(--c-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.divider { height: 1px; background: var(--c-border); margin: 8px 0; }
.loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
.loading-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--c-border2);
  border-top-color: var(--c-purple);
  animation: spin 0.8s linear infinite;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  :root { --sidebar-w: 200px; }
}

/* =============================================
   MOBILE (≤700px)
   ============================================= */
@media (max-width: 700px) {
  :root {
    --player-h: 64px;
    --bottom-nav-h: 60px;
  }

  /* Layout */
  #app {
    grid-template-areas: "main" "player";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr var(--player-h);
    padding-bottom: var(--bottom-nav-h);
  }

  #sidebar { display: none; }

  /* Bottom navigation */
  #mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h);
    background: rgba(10,10,18,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--c-border);
    z-index: 50;
    align-items: stretch;
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: var(--c-text3);
    transition: color 0.2s ease;
    padding: 4px 0;
    font-size: 0;
  }
  .mob-nav-item svg { width: 22px; height: 22px; }
  .mob-nav-item span {
    font-size: 0.6rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
  }
  .mob-nav-item.active { color: var(--c-violet2); }
  .mob-nav-item:hover  { color: var(--c-text); }

  /* Topbar */
  .topbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .topbar-nav { display: none; }
  .search-bar { max-width: none; }
  .theme-menu-wrap { display: none; }

  /* Mini player */
  #player {
    grid-template-columns: 1fr auto;
    padding: 0 12px;
    gap: 8px;
  }
  .player-controls { display: none; }
  .player-right    { display: none; }
  .player-track    { gap: 10px; }
  .player-cover    { width: 44px; height: 44px; }
  .player-title    { font-size: 0.82rem; }
  .player-artist   { font-size: 0.7rem; }

  /* Mobile play button in mini player */
  #mobile-player-btn {
    display: flex !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: black;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  #mobile-player-btn svg { width: 14px; height: 14px; fill: currentColor; }

  /* Sections */
  .section { padding: 16px 14px; }
  .section-title { font-size: 1rem; }

  /* Cards grid */
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .cards-grid-lg { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Track items */
  .track-item { padding: 7px 8px; gap: 8px; }
  .track-cover { width: 36px; height: 36px; }
  .track-name { font-size: 0.82rem; }
  .track-artist { font-size: 0.7rem; }
  .track-like-btn { opacity: 1; }

  /* Artist page */
  .artist-banner { height: 240px; }
  .artist-name { font-size: 2rem; }
  .artist-info { padding: 20px; }

  /* Nebula */
  .nebula-container { height: 340px; }
  .nebula-content { left: 20px; right: 20px; bottom: 40px; }
  .nebula-title { font-size: 2.5rem; }
  .genre-tags { gap: 5px; }
  .genre-tag { padding: 4px 10px; font-size: 0.65rem; }

  /* Album page */
  .section[style*="flex"] { flex-direction: column !important; }

  /* Profile */
  .profile-header { flex-direction: column; align-items: flex-start; padding: 20px 16px; gap: 16px; }
  .profile-avatar { width: 80px; height: 80px; }
  .profile-name { font-size: 1.5rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-value { font-size: 1.4rem; }

  /* Fullscreen player */
  #player-fullscreen {
    padding: 20px 20px 100px;
  }
  .fs-cover {
    width: 220px !important;
    height: 220px !important;
  }
  .fs-title { font-size: 1.3rem; }
  .fs-artist { font-size: 0.9rem; }
  .fs-controls { gap: 4px; }
  .fs-ctrl-play { width: 48px; height: 48px; }

  /* Lyrics mode on mobile - disabled, show message */
  #fs-lyrics-btn.mobile-disabled {
    opacity: 0.2 !important;
    pointer-events: none !important;
  }

  /* Lyrics mode layout on mobile */
  #player-fullscreen.lyrics-mode .fs-content {
    flex-direction: column !important;
    padding: 60px 20px 20px !important;
    gap: 24px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
  #player-fullscreen.lyrics-mode .fs-cover {
    width: 160px !important;
    height: 160px !important;
  }
  #lyrics-right {
    align-items: center !important;
    text-align: center !important;
  }
  .lyric-active-line { font-size: 1.4rem !important; text-align: center; }
  .lyric-next-line   { font-size: 0.95rem !important; text-align: center; }
  #lyrics-track-info { text-align: center; }

  /* Wrapped */
  .w-slide { padding: 40px 20px; }
  .w-tracks-list, .w-artists-list { max-width: 100%; }
  .w-track-item, .w-artist-item { padding: 8px 10px; gap: 10px; }
  .w-first-last { gap: 20px; }

  /* Ambient */
  #ambient-screen { padding: 16px; }

  /* Charts */
  .chart-item { padding: 8px 10px; gap: 8px; }

  /* Admin - horizontal scroll */
  .admin-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .admin-table { font-size: 0.78rem; }
  .admin-table th, .admin-table td { padding: 7px 8px; }
}

/* Hide mobile nav on desktop */
#mobile-nav { display: none; }
#mobile-player-btn { display: none; }

/* ---- Section title refinement ---- */
.section-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

/* Nebula pgmusic title */
.nebula-title {
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Sidebar logo - text only */
.sidebar-logo { padding: 28px 20px 22px; }
.sidebar-logo-text { font-size: 1.35rem; }

/* ---- Ambient mode button ---- */
.ambient-mode-btn {
  padding: 7px 20px;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ambient-mode-btn.active {
  background: rgba(124,58,237,0.35);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 0 20px rgba(124,58,237,0.3);
}
.ambient-mode-btn:hover:not(.active) {
  color: rgba(255,255,255,0.75);
}

/* ---- Violet theme ---- */
[data-theme="violet"] {
  --c-bg:       #0d0a1a;
  --c-bg2:      #130f24;
  --c-bg3:      #1a152f;
  --c-surface:  #1f1938;
  --c-surface2: #271f47;
  --c-surface3: #322858;
  --c-border:   rgba(160,120,255,0.14);
  --c-border2:  rgba(160,120,255,0.26);
  --c-purple:   #9b59f5;
  --c-violet:   #b07ef8;
  --c-violet2:  #c9a8fb;
  --c-text:     #ede8ff;
  --c-text2:    #a090cc;
  --c-text3:    #6050a0;
}

/* ---- Midnight blue theme ---- */
[data-theme="midnight"] {
  --c-bg:       #040810;
  --c-bg2:      #080e1c;
  --c-bg3:      #0c1426;
  --c-surface:  #101a30;
  --c-surface2: #162240;
  --c-surface3: #1e2e52;
  --c-border:   rgba(60,100,200,0.15);
  --c-border2:  rgba(60,100,200,0.28);
  --c-purple:   #3b82f6;
  --c-purple2:  #2563eb;
  --c-violet:   #60a5fa;
  --c-violet2:  #93c5fd;
  --c-indigo:   #3b82f6;
  --c-text:     #e0ecff;
  --c-text2:    #7090c0;
  --c-text3:    #405080;
  --glow-purple: 0 0 20px rgba(59,130,246,0.35), 0 0 60px rgba(59,130,246,0.12);
  --glow-violet: 0 0 15px rgba(96,165,250,0.4);
}

/* ---- Rose theme ---- */
[data-theme="rose"] {
  --c-bg:       #0f080a;
  --c-bg2:      #180c10;
  --c-bg3:      #201018;
  --c-surface:  #271318;
  --c-surface2: #321820;
  --c-surface3: #3f1e28;
  --c-border:   rgba(200,60,100,0.14);
  --c-border2:  rgba(200,60,100,0.26);
  --c-purple:   #e11d6a;
  --c-purple2:  #be185d;
  --c-violet:   #f43f8e;
  --c-violet2:  #fb7eb5;
  --c-indigo:   #db2777;
  --c-pink:     #f472b6;
  --c-text:     #ffe0ea;
  --c-text2:    #c080a0;
  --c-text3:    #804060;
  --glow-purple: 0 0 20px rgba(225,29,106,0.35), 0 0 60px rgba(225,29,106,0.12);
  --glow-violet: 0 0 15px rgba(244,63,142,0.4);
}

/* ---- Theme menu ---- */
.theme-menu-wrap {
  position: relative;
}
#theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-lg);
  padding: 6px;
  min-width: 160px;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  display: none;
  flex-direction: column;
  gap: 2px;
  animation: slideDown 0.15s ease;
}
#theme-menu.open { display: flex; }
.theme-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
  color: var(--c-text2);
}
.theme-opt:hover { background: var(--c-surface3); color: var(--c-text); }
.theme-opt.active { color: var(--c-violet2); background: rgba(124,58,237,0.12); }
.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================
   LYRICS MODE
   ============================================= */

/* Fullscreen player base */
#player-fullscreen {
  transition: none;
}

/* In lyrics mode - fullscreen becomes a flex row */
#player-fullscreen.lyrics-mode .fs-content {
  position: absolute;
  inset: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: none !important;
  width: 100%;
  padding: 0 60px;
  gap: 60px;
  z-index: 2;
  text-align: left;
  overflow: hidden;
}

/* Cover gets bigger, stays visible */
#player-fullscreen.lyrics-mode .fs-cover {
  width: 320px !important;
  height: 320px !important;
  flex-shrink: 0;
  margin: 0;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.4), 0 20px 80px rgba(0,0,0,0.7), 0 0 60px rgba(124,58,237,0.3);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Hide title/artist - shown in lyrics panel instead */
#player-fullscreen.lyrics-mode .fs-title,
#player-fullscreen.lyrics-mode .fs-artist {
  display: none;
}

/* Right side - lyrics content */
#lyrics-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 2;
}

/* Track info in lyrics mode */
#lyrics-track-info .lyr-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
}
#lyrics-track-info .lyr-artist {
  font-size: 0.82rem;
  color: rgba(167,139,250,0.6);
}

/* Two lines display */
#lyrics-two-lines {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lyric-active-line {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(139,92,246,0.9), 0 0 100px rgba(124,58,237,0.4);
  opacity: 1;
  transition: opacity 0.25s ease;
  min-height: 1.15em;
}

.lyric-next-line {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: rgba(167,139,250,0.4);
  opacity: 1;
  transition: opacity 0.25s ease;
  min-height: 1.3em;
}

.lyric-active-line, .lyric-next-line {
  transition: opacity 0.25s ease;
}

/* Progress in lyrics mode */
#lyrics-progress .player-progress {
  width: 100%;
}

/* Nebula background in lyrics mode */
#lyrics-nebula {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Controls stay visible at bottom */
#player-fullscreen.lyrics-mode .fs-progress,
#player-fullscreen.lyrics-mode .fs-controls,
#player-fullscreen.lyrics-mode > div:last-child {
  position: relative;
  z-index: 3;
}

/* Buttons stay visible */
#player-fullscreen.lyrics-mode .fs-close,
#player-fullscreen.lyrics-mode #fs-lyrics-btn,
#player-fullscreen.lyrics-mode #fs-like-btn,
#player-fullscreen.lyrics-mode .fs-share-btn {
  z-index: 10;
  position: relative;
}

/* =============================================
   ADMIN LYRICS EDITOR
   ============================================= */
.lrc-editor {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px;
  color: var(--c-text);
  width: 100%;
  min-height: 200px;
  resize: vertical;
  line-height: 1.8;
}
.lrc-editor::placeholder { color: var(--c-text3); }

.lyric-active-line, .lyric-next-line {
  transition: opacity 0.3s ease, color 0.4s ease;
}

/* =============================================
   DAILY WRAPPED
   ============================================= */
.w-slide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  gap: 12px;
}

.w-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(167,139,250,0.6);
  margin-bottom: 8px;
}

.w-big-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.w-number {
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.w-unit {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.02em;
}

.w-sub {
  font-size: 0.95rem;
  color: rgba(167,139,250,0.7);
  max-width: 360px;
  line-height: 1.5;
}

.w-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  margin-top: 8px;
}

.w-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.w-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  color: rgba(167,139,250,0.9);
}

/* Tracks slide */
.w-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}

.w-track-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(139,92,246,0.12);
  backdrop-filter: blur(10px);
  animation: slideInRight 0.5s ease both;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.w-track-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: rgba(167,139,250,0.4);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.w-track-item:first-child .w-track-num { color: #a78bfa; }

.w-track-cover {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.w-track-info { flex: 1; min-width: 0; text-align: left; }
.w-track-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,0.9);
}
.w-track-artist {
  font-size: 0.75rem;
  color: rgba(167,139,250,0.5);
  margin-top: 2px;
}

.w-track-plays {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(167,139,250,0.4);
  flex-shrink: 0;
}

/* Artists slide */
.w-artists-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}

.w-artist-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(139,92,246,0.12);
  cursor: pointer;
  transition: background 0.2s;
  animation: slideInRight 0.5s ease both;
}
.w-artist-item:hover { background: rgba(139,92,246,0.1); }

.w-artist-rank {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(167,139,250,0.35);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.w-artist-item:first-child .w-artist-rank { color: #c4b5fd; }

.w-artist-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.w-artist-info { flex: 1; min-width: 0; text-align: left; }
.w-artist-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2px;
}
.w-artist-stat {
  font-size: 0.75rem;
  color: rgba(167,139,250,0.5);
  font-family: var(--font-mono);
}

/* Outro */
.w-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #c4b5fd, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.w-outro-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: white;
  margin-bottom: 8px;
}

.w-outro-sub {
  font-size: 1rem;
  color: rgba(167,139,250,0.5);
}

.w-first-last {
  display: flex;
  gap: 32px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.w-fl-item { text-align: center; }
.w-fl-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(167,139,250,0.4);
  margin-bottom: 4px;
}
.w-fl-val {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  max-width: 160px;
}

/* Navigation dots */
.w-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.w-dot.active {
  width: 20px;
  border-radius: 3px;
  background: rgba(167,139,250,0.8);
}

@media (max-width: 700px) {
  /* Prevent horizontal overflow everywhere */
  #app, #main, #sidebar, #player { max-width: 100vw; }
  
  /* Fix wide tables */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  
  /* Fix album/profile flex rows */
  .section > div[style*="display:flex"],
  .section > div[style*="display: flex"] {
    flex-wrap: wrap;
  }
  
  /* Topbar - prevent overflow */
  .topbar { flex-wrap: wrap; min-width: 0; }
  .search-bar input { min-width: 0; width: 100%; }
  #topbar-auth { flex-shrink: 0; }
  
  /* Cards don't overflow */
  .card { min-width: 0; }
  .card-title, .card-sub { overflow: hidden; text-overflow: ellipsis; }

  /* Track list items */
  .track-item { min-width: 0; max-width: 100%; }
  .track-info  { min-width: 0; overflow: hidden; }

  /* Nebula content */
  .nebula-content { box-sizing: border-box; width: calc(100% - 40px); }

  /* Genre tags wrap */
  .genre-tags { width: 100%; }

  /* Modal */
  .modal { width: calc(100vw - 24px); padding: 24px 16px; }

  /* Profile stats */
  .stats-grid { width: 100%; }

  /* Sidebar playlists in profile don't show */
  .sidebar-playlists { display: none; }

  /* Fix inline styles on profile/album pages */
  [style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="display:grid"][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Wrapped page */
  #wrapped-container { max-width: 100vw; overflow-x: hidden; }
  .w-big-title { font-size: clamp(2rem, 15vw, 5rem); }
  .w-number { font-size: clamp(3.5rem, 18vw, 10rem); }

  /* Fullscreen player controls bar */
  #player-fullscreen > div:last-child {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Charts */
  .chart-item { grid-template-columns: 32px 40px 1fr auto; }

  /* Artist banner info */
  .artist-info { flex-direction: column; gap: 12px; }
  .artist-stats { flex-wrap: wrap; gap: 8px; }
}

/* =============================================
   STORIES
   ============================================= */
#stories-container {
  padding: 0 32px 8px;
  position: relative;
}
.stories-bar {
  position: relative;
  overflow: hidden;
}
.stories-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 0;
}
.stories-scroll::-webkit-scrollbar { display: none; }

.story-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  width: 68px;
}
.story-thumb-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--c-border);
  transition: all 0.2s ease;
}
.story-thumb.has-new .story-thumb-ring {
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
}
.story-thumb.pinned .story-thumb-ring {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 0 12px rgba(124,58,237,0.5);
}
.story-thumb:hover .story-thumb-ring {
  transform: scale(1.05);
}
.story-thumb-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c-surface2);
  overflow: hidden;
  border: 2px solid var(--c-bg);
}
.story-thumb-name {
  font-size: 0.68rem;
  color: var(--c-text2);
  text-align: center;
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}

.stories-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s;
}
.stories-arrow:hover { background: var(--c-surface3); }
.stories-arrow-l { left: -6px; }
.stories-arrow-r { right: -6px; }

.stories-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  margin-bottom: 8px;
}
.stories-section-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text3);
}
.stories-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.stories-sort-btn {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--c-text3);
  padding: 3px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-border);
  cursor: pointer;
  background: none;
  transition: all 0.2s;
}
.stories-sort-btn.active {
  color: var(--c-violet2);
  border-color: var(--c-border2);
}
.stories-sort-btn:hover { color: var(--c-text); }

/* Artist avatar glow when has story */
.card-cover.has-story .story-glow-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  z-index: 0;
  animation: storyGlow 2s ease infinite alternate;
}
@keyframes storyGlow {
  from { opacity: 0.7; }
  to   { opacity: 1; box-shadow: 0 0 20px rgba(124,58,237,0.6); }
}

@media (max-width: 700px) {
  #stories-container { padding: 0 12px 8px; }
  .stories-section-header { padding: 0 12px; }
  .story-thumb { width: 58px; }
  .story-thumb-ring { width: 52px; height: 52px; }
}

/* ═══ PREMIUM PAGE ═══ */
.premium-page{display:flex;flex-direction:column;min-height:100%;}
.premium-hero{position:relative;height:260px;overflow:hidden;flex-shrink:0;}
.premium-hero canvas{position:absolute;inset:0;width:100%;height:100%;}
.premium-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 32px;background:linear-gradient(to top,var(--c-bg) 0%,transparent 60%);}
.premium-hero-badge{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-violet2);margin-bottom:8px;}
.premium-hero-title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.04em;color:var(--c-text);}
.premium-hero-sub{font-size:.85rem;color:var(--c-text2);margin-top:4px;}
.premium-content{padding:24px;max-width:800px;}
.premium-active-card{display:flex;align-items:center;gap:14px;padding:16px 20px;background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(79,70,229,.1));border:1px solid rgba(124,58,237,.3);border-radius:var(--r-xl);margin-bottom:16px;}
.premium-active-icon{font-size:2rem;}
.premium-active-title{font-family:var(--font-display);font-size:1rem;font-weight:700;}
.premium-active-sub{font-size:.8rem;color:var(--c-text2);margin-top:2px;}
.premium-boosty-card{background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-xl);padding:18px;margin-bottom:20px;}
.premium-boosty-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.95rem;font-weight:700;margin-bottom:10px;}
.premium-boosty-sub{font-size:.83rem;color:var(--c-text2);margin-bottom:8px;}
.premium-boosty-linked{font-size:.83rem;color:var(--c-grn);padding:6px 12px;background:rgba(34,197,94,.1);border-radius:var(--r-md);}
.premium-boosty-notice{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--c-text3);margin-top:10px;padding-top:10px;border-top:1px solid var(--c-border);}
.premium-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
@media(max-width:600px){.premium-plans{grid-template-columns:1fr;}}
.premium-plan{background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-xl);padding:20px;position:relative;}
.premium-plan.active{border-color:var(--c-purple);background:rgba(124,58,237,.06);}
.premium-plan.dimmed{opacity:.6;}
.pro-plan{border-color:rgba(167,139,250,.3);}
.plan-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.plan-badge{padding:3px 12px;border-radius:var(--r-full);font-size:.75rem;font-weight:700;font-family:var(--font-mono);}
.plan-badge.plus{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);}
.plan-badge.pro{background:rgba(167,139,250,.15);color:var(--c-violet2);border:1px solid rgba(167,139,250,.3);}
.plan-popular{font-size:.68rem;font-family:var(--font-mono);color:var(--c-violet2);background:rgba(124,58,237,.12);padding:2px 8px;border-radius:var(--r-full);}
.plan-current{font-size:.68rem;color:var(--c-grn);font-family:var(--font-mono);}
.plan-price{font-family:var(--font-display);font-size:1.8rem;font-weight:800;margin-bottom:14px;}
.plan-price span{font-size:.85rem;font-weight:400;color:var(--c-text2);}
.plan-features{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.plan-feature{display:flex;align-items:flex-start;gap:10px;}
.plan-feature-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px;}
.plan-feature-title{font-size:.85rem;font-weight:600;}
.plan-feature-desc{font-size:.75rem;color:var(--c-text3);margin-top:1px;}
.plan-btn{width:100%;justify-content:center;padding:10px;}
.pro-btn{background:linear-gradient(135deg,var(--c-purple),var(--c-indigo));}
.premium-section-title{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:12px;}
.private-library{background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-xl);overflow:hidden;}
.private-library-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--c-border);}
.private-track-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--c-border);transition:background var(--tr);}
.private-track-item:hover{background:var(--c-surface2);}
.private-track-item:last-child{border-bottom:none;}
.private-track-cover{width:36px;height:36px;border-radius:var(--r-sm);overflow:hidden;background:var(--c-surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--c-text3);}
.private-track-cover img{width:100%;height:100%;object-fit:cover;}
.premium-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-full);font-size:.75rem;font-weight:700;font-family:var(--font-mono);cursor:pointer;border:none;transition:all var(--tr);}
.premium-btn-plus{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);}
.premium-btn-pro{background:rgba(167,139,250,.15);color:var(--c-violet2);border:1px solid rgba(167,139,250,.3);}

/* ═══ EVENTS ═══ */
.events-header{padding:20px 24px 12px;border-bottom:1px solid var(--c-border);display:flex;flex-direction:column;gap:10px;}
.events-categories{display:flex;gap:6px;flex-wrap:wrap;}
.event-cat-btn{padding:5px 14px;border-radius:var(--r-full);font-size:.78rem;font-weight:600;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text3);cursor:pointer;transition:all var(--tr);}
.event-cat-btn:hover,.event-cat-btn.active{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.35);color:var(--c-violet2);}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:20px 24px;}
.event-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);overflow:hidden;cursor:pointer;transition:all var(--tr);}
.event-card:hover{border-color:var(--c-border2);transform:translateY(-2px);}
.event-cover{position:relative;aspect-ratio:16/9;overflow:hidden;}
.event-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--tr);}
.event-card:hover .event-cover img{transform:scale(1.03);}
.event-cover-generated{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:16px;}
.event-cover-title{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:#fff;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.event-category-badge{position:absolute;top:10px;left:10px;padding:3px 10px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border-radius:var(--r-full);font-size:.68rem;font-family:var(--font-mono);color:#fff;}
.event-info{padding:14px;}
.event-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;margin-bottom:6px;letter-spacing:-.02em;}
.event-date,.event-location,.event-artist{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--c-text3);margin-top:4px;}
.event-artist{color:var(--c-violet2);cursor:pointer;}
.event-artist:hover{color:var(--c-violet);}

/* ═══ POLLS ═══ */
#polls-section{padding:20px 24px;}
.polls-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:14px;letter-spacing:-.02em;}
.poll-card{background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--r-xl);overflow:hidden;margin-bottom:14px;}
.poll-body{padding:16px;}
.poll-title{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:4px;letter-spacing:-.02em;}
.poll-desc{font-size:.82rem;color:var(--c-text2);margin-bottom:12px;}
.poll-options{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.poll-opt{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--c-border2);cursor:pointer;transition:border-color var(--tr);}
.poll-opt:hover{border-color:var(--c-border2);}
.poll-opt.voted{border-color:var(--c-purple);}
.poll-opt-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;position:relative;z-index:1;}
.poll-opt-bar{position:absolute;left:0;top:0;height:100%;border-radius:var(--r-lg);transition:width .4s ease;}
.poll-opt-text{font-size:.88rem;font-weight:500;}
.poll-opt-pct{font-size:.78rem;font-weight:700;font-family:var(--font-mono);color:var(--c-violet2);}
.poll-opt-artist,.poll-opt-track{display:flex;align-items:center;gap:10px;padding:10px 14px;position:relative;}
.poa-av{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--c-surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;}
.poa-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.poa-name{font-size:.88rem;font-weight:600;}
.poa-pct{margin-left:auto;font-size:.78rem;font-weight:700;font-family:var(--font-mono);color:var(--c-violet2);}
.pot-cover{width:40px;height:40px;border-radius:var(--r-sm);overflow:hidden;background:var(--c-surface2);flex-shrink:0;}
.pot-cover img{width:100%;height:100%;object-fit:cover;}
.pot-title{font-size:.85rem;font-weight:600;}
.pot-artist{font-size:.72rem;color:var(--c-text3);}
.poll-footer{font-size:.72rem;color:var(--c-text3);font-family:var(--font-mono);}

/* ═══════════════════════════════════════════════════
   PRESAVE LANDING PAGE
   ═══════════════════════════════════════════════════ */
.presave-page{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  overflow:hidden;
}
.presave-bg{
  position:absolute;
  inset:-40px;
  background-size:cover;
  background-position:center;
  filter:blur(60px) saturate(1.4);
  opacity:.5;
  z-index:0;
  transform:scale(1.1);
}
.presave-bg-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.85) 100%);
  z-index:0;
}
.presave-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.presave-cover{
  width:280px;
  height:280px;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 100px rgba(124,58,237,.25);
  margin-bottom:32px;
  background:var(--c-surface);
}
.presave-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.presave-cover-fallback{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--c-purple),var(--c-indigo));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:5rem;color:#fff;
}
.presave-meta{margin-bottom:32px;}
.presave-subtitle{
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--c-violet2);
  margin-bottom:10px;
}
.presave-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing:-.02em;
  margin:0 0 6px 0;
  color:#fff;
}
.presave-artist{
  font-size:1rem;
  color:rgba(255,255,255,.7);
}
.presave-countdown{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:20px;
  flex-wrap:wrap;
}
.cd-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);
  padding:8px 14px;
  min-width:56px;
  backdrop-filter:blur(10px);
}
.cd-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  color:#fff;
  line-height:1;
}
.cd-lbl{
  font-family:var(--font-mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.5);
  margin-top:4px;
}
.presave-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, var(--c-violet2), var(--c-purple));
  color:#fff;
  border:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  padding:16px 40px;
  border-radius:var(--r-full);
  cursor:pointer;
  box-shadow:0 10px 40px rgba(124,58,237,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.presave-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 50px rgba(124,58,237,.55);
}
.presave-footer{
  margin-top:36px;
}
.presave-mark{
  font-family:var(--font-display);
  font-weight:700;
  color:rgba(255,255,255,.3);
  letter-spacing:-.02em;
  font-size:.85rem;
}

/* On the presave page, hide the sidebar/topbar/player for a clean landing */
body.presave-mode #sidebar,
body.presave-mode .topbar,
body.presave-mode #player,
body.presave-mode #mobile-nav { display:none !important; }
body.presave-mode #main { margin:0 !important; padding:0 !important; height:100vh; }
body.presave-mode #app { display:block; }

/* Light theme tweaks */
[data-theme="light"] .presave-bg-overlay{
  background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(245,245,250,.85) 100%);
}
[data-theme="light"] .presave-title{color:#1a1a2e;}
[data-theme="light"] .presave-artist{color:rgba(26,26,46,.7);}
[data-theme="light"] .cd-cell{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);}
[data-theme="light"] .cd-num{color:#1a1a2e;}
[data-theme="light"] .cd-lbl{color:rgba(26,26,46,.5);}
[data-theme="light"] .presave-mark{color:rgba(26,26,46,.3);}


/* ═══════════════════════════════════════════════════
   WAVE DESIGN — cosmic dark purple, audio-reactive
   Activated by [data-design="wave"] on <html>.
   Strategy: tweak CSS vars + inner element styling. No floating margins,
   no negative offsets. The grid layout from classic stays intact.
   ═══════════════════════════════════════════════════ */

:root {
  --wave-pulse: 0.6;
  --wave-hue:   270;
}

/* Tighter sidebar & rounder player in wave mode */
[data-design="wave"] {
  --sidebar-w: 86px;
  --player-h: 92px;
}
[data-design="wave"][data-sidebar="expanded"] {
  --sidebar-w: 240px;
}

[data-design="wave"] body { background: #050508; }

/* Unified page padding in wave mode — every wave page sits inside this gutter,
   so nothing ever touches the sidebar. Individual pages must NOT use negative margins. */
[data-design="wave"] #main > .page.active {
  padding: 20px 24px 32px;
  box-sizing: border-box;
}
/* Hero-style pages (artist/album/profile) bleed their hero to the page edges
   but keep the unified gutter as the reference. */
[data-design="wave"] .wave-artist-page,
[data-design="wave"] .wave-release-page,
[data-design="wave"] .wave-profile-page,
[data-design="wave"] .wave-home {
  margin: 0;
}

/* ─── 1. SIDEBAR — icon rail with optional expand ─── */
[data-design="wave"] #sidebar {
  background: linear-gradient(180deg, #0c0a18 0%, #0a0612 100%);
  border-right: 1px solid rgba(167,139,250,.08);
  padding: 14px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-design="wave"] #sidebar::-webkit-scrollbar { width: 0; }
[data-design="wave"] .sidebar-logo {
  padding: 6px 0 18px;
  justify-content: center;
  min-height: 36px;
}
[data-design="wave"] .sidebar-logo-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.3rem; letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff, #c4b5fd 60%, #7c3aed);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  display: block;
  transition: font-size .2s ease;
}
[data-design="wave"]:not([data-sidebar="expanded"]) .sidebar-logo-text {
  font-size: 1.6rem;
}

/* Toggle button at the top, inside the rail (not floating outside) */
[data-design="wave"] .sidebar-toggle {
  width: 100%;
  height: 36px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(167,139,250,.08));
  border: 1px solid rgba(167,139,250,.25);
  color: #c4b5fd;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: background .2s ease, transform .25s ease;
}
[data-design="wave"] .sidebar-toggle:hover {
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(167,139,250,.2));
  color: #fff;
}
[data-design="wave"][data-sidebar="expanded"] .sidebar-toggle {
  background: linear-gradient(135deg, rgba(124,58,237,.45), rgba(167,139,250,.25));
  color: #fff;
}
:not([data-design="wave"]) .sidebar-toggle { display: none; }

/* Tooltip on collapsed nav icons — so it's clear what each one is */
[data-design="wave"]:not([data-sidebar="expanded"]) .nav-item[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: rgba(20,14,38,.97);
  border: 1px solid rgba(167,139,250,.25);
  color: #fff;
  font-family: var(--font-body);
  font-size: .8rem;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transition: opacity .15s ease, transform .15s ease;
}
[data-design="wave"]:not([data-sidebar="expanded"]) .nav-item[data-label]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* First-visit hint pulse on the toggle */
[data-design="wave"] .sidebar-toggle.hint-pulse {
  animation: togglePulse 1.6s ease-in-out 3;
}
@keyframes togglePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
  50%     { box-shadow: 0 0 0 6px rgba(167,139,250,.25); }
}

/* Section labels — hidden in compact mode */
[data-design="wave"] .sidebar-nav { padding: 0; }
[data-design="wave"] .sidebar-section { padding: 0; margin-bottom: 6px; }
[data-design="wave"] .sidebar-section-label {
  font-size: .6rem; letter-spacing: .2em;
  padding: 10px 12px 4px;
  color: rgba(167,139,250,.4);
  white-space: nowrap; overflow: hidden;
  display: none;
}
[data-design="wave"][data-sidebar="expanded"] .sidebar-section-label { display: block; }

/* Nav items: rail icons by default, full-width when expanded */
[data-design="wave"] .nav-item {
  display: flex; align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 0;
  margin: 3px 0;
  border-radius: 14px;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: background .2s ease, color .2s ease;
  position: relative;
  font-size: 0;
}
[data-design="wave"][data-sidebar="expanded"] .nav-item {
  justify-content: flex-start;
  padding: 11px 14px;
  gap: 14px;
  font-size: 0.88rem;
}
[data-design="wave"] .nav-item .icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
[data-design="wave"] .nav-item:hover {
  background: rgba(167,139,250,.08);
  color: #fff;
}
[data-design="wave"] .nav-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(109,40,217,.18));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.22);
}

/* Hide bottom playlists/user in compact rail */
[data-design="wave"]:not([data-sidebar="expanded"]) .sidebar-playlists,
[data-design="wave"]:not([data-sidebar="expanded"]) #sidebar-user,
[data-design="wave"]:not([data-sidebar="expanded"]) .sidebar-section > a.nav-item span,
[data-design="wave"]:not([data-sidebar="expanded"]) [style*="padding: 12px 12px 4px"] {
  display: none;
}

/* ─── 2. TOPBAR — rounded glass ─── */
[data-design="wave"] .topbar {
  background: linear-gradient(180deg, rgba(20,12,38,.72), rgba(14,8,28,.6));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(167,139,250,.08);
}
/* Wave search bar — glass pill, glowing focus, custom dropdown */
[data-design="wave"] .search-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: 480px;
}
[data-design="wave"] .search-bar input {
  background: rgba(10,6,22,.45);
  border: 1px solid rgba(167,139,250,.18);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px 10px 42px;
  font-size: .88rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all .25s ease;
}
[data-design="wave"] .search-bar input::placeholder {
  color: rgba(196,181,253,.55);
}
[data-design="wave"] .search-bar input:focus {
  background: rgba(20,12,38,.7);
  border-color: hsla(var(--wave-hue), 70%, 65%, .45);
  box-shadow:
    0 0 0 3px hsla(var(--wave-hue), 70%, 55%, .15),
    0 0 24px hsla(var(--wave-hue), 80%, 55%, .25);
}
[data-design="wave"] .search-bar-icon {
  color: rgba(196,181,253,.7);
  left: 14px;
}
[data-design="wave"] .search-bar input:focus + .search-dropdown,
[data-design="wave"] .search-bar:focus-within .search-bar-icon {
  color: #c4b5fd;
}

/* Wave dropdown — frosted dark glass with nebula glow */
[data-design="wave"] .search-dropdown {
  top: calc(100% + 10px);
  background: rgba(15,10,30,.88);
  border: 1px solid rgba(167,139,250,.18);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 60px hsla(var(--wave-hue), 70%, 55%, .15);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
[data-design="wave"] .search-dropdown::-webkit-scrollbar { width: 6px; }
[data-design="wave"] .search-dropdown::-webkit-scrollbar-thumb {
  background: rgba(167,139,250,.25); border-radius: 3px;
}

[data-design="wave"] .search-section { padding: 14px 16px 4px; }
[data-design="wave"] .search-section-title {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(196,181,253,.55);
  margin-bottom: 8px;
}

/* Result item — universal wrapper */
[data-design="wave"] .search-dropdown .search-item,
[data-design="wave"] .search-dropdown .search-result,
[data-design="wave"] .search-dropdown a,
[data-design="wave"] .search-dropdown > div > div {
  border-radius: 12px;
  transition: background .15s ease;
}
[data-design="wave"] .search-dropdown .search-item:hover,
[data-design="wave"] .search-dropdown .search-result:hover,
[data-design="wave"] .search-dropdown a:hover {
  background: rgba(124,58,237,.18);
}

/* Light wave — invert glass */
[data-design="wave"][data-theme="light"] .search-bar input {
  background: rgba(255,255,255,.7);
  color: #1a0f2e;
  border-color: rgba(124,58,237,.18);
}
[data-design="wave"][data-theme="light"] .search-bar input::placeholder {
  color: rgba(60,30,110,.55);
}
[data-design="wave"][data-theme="light"] .search-bar input:focus {
  background: #fff;
  border-color: rgba(124,58,237,.5);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] .search-bar-icon {
  color: rgba(60,30,110,.7);
}
[data-design="wave"][data-theme="light"] .search-dropdown {
  background: rgba(255,255,255,.95);
  border-color: rgba(124,58,237,.18);
  color: #1a0f2e;
}
[data-design="wave"][data-theme="light"] .search-section-title {
  color: rgba(60,30,110,.55);
}
[data-design="wave"][data-theme="light"] .search-dropdown .search-item:hover,
[data-design="wave"][data-theme="light"] .search-dropdown .search-result:hover,
[data-design="wave"][data-theme="light"] .search-dropdown a:hover {
  background: rgba(124,58,237,.12);
}
[data-design="wave"] .topbar-nav-btn,
[data-design="wave"] .theme-toggle,
[data-design="wave"] #push-toggle-btn {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(167,139,250,.1);
  border-radius: 12px;
  color: #c4b5fd;
}
[data-design="wave"] .topbar-nav-btn:hover,
[data-design="wave"] .theme-toggle:hover,
[data-design="wave"] #push-toggle-btn:hover {
  background: rgba(124,58,237,.2);
  border-color: rgba(167,139,250,.3);
}

/* ─── 3. PLAYER — rounded floating dock ─── */
[data-design="wave"] #player {
  background: linear-gradient(180deg, rgba(20,12,38,.92), rgba(10,6,22,.96));
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-top: 1px solid rgba(167,139,250,.12);
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
}
[data-design="wave"] #player .ctrl-btn,
[data-design="wave"] #player .player-like { color: rgba(196,181,253,.85); }
[data-design="wave"] #player .ctrl-btn:hover { color: #fff; }
[data-design="wave"] .ctrl-btn-play {
  background: linear-gradient(135deg, #fff, #e9d5ff);
  color: #1a0f2e;
}
[data-design="wave"] .progress-bar { background: rgba(255,255,255,.08); }
[data-design="wave"] .progress-fill { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
[data-design="wave"] .player-cover { border-radius: 14px; }

[data-design="wave"] #mobile-nav {
  background: rgba(20,12,38,.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(167,139,250,.12);
}

/* ─── 4. WAVE HOME PAGE ─── */
.wave-home {
  /* Inherits .page padding; just lay things out vertically */
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wave-stage {
  position: relative;
  width: 100%;
  height: clamp(440px, 64vh, 640px);
  overflow: hidden;
  border-radius: 28px;
  user-select: none;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.wave-bg-canvas-wrap {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.wave-bg-canvas-wrap canvas {
  width: 100%; height: 100%;
  display: block;
}

.wave-header {
  position: absolute; top: 22px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  z-index: 3; pointer-events: none;
}
.wave-eyebrow, .wave-hint {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(196,181,253,.85);
  background: rgba(10,6,22,.5);
  padding: 6px 14px; border-radius: 999px;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(167,139,250,.15);
}

/* Wheel — centered, with vertical breathing room around active card */
.wave-wheel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, 88%);
  height: 100%;
  z-index: 2; pointer-events: none;
}

/* Cards — proper vertical spacing so they DON'T overlap */
.wave-item {
  --offset: 0;
  --scale: 1;
  --opacity: 1;
  --blur: 0px;
  position: absolute;
  left: 0; right: 0; top: 50%;
  margin: 0 auto;
  /* spacing between cards = 105px; active card is taller, so we add 35px extra
     for items below to clear it */
  transform: translateY(calc(-50% + var(--offset) * 105px + (sign(var(--offset)) * 18px))) scale(var(--scale));
  /* Browsers without sign() fall back gracefully — translate just uses 0 for the extra */
  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              opacity .45s ease,
              filter .4s ease,
              background .3s ease,
              border-color .3s ease;
  opacity: var(--opacity);
  filter: blur(var(--blur));
  pointer-events: auto;
  cursor: pointer;
  background: rgba(10,6,22,.5);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(167,139,250,.13);
  border-radius: 22px;
  padding: 16px 22px;
  height: 78px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  overflow: hidden;
  box-sizing: border-box;
}
/* Active card is larger but still bounded */
.wave-item.active {
  background: rgba(20,12,42,.6);
  border-color: rgba(167,139,250,.32);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 26px;
  height: 130px;
  justify-content: center;
  box-shadow:
    0 24px 60px rgba(0,0,0,.5),
    0 0 calc(70px * var(--wave-pulse)) hsla(var(--wave-hue), 75%, 55%, calc(0.32 * var(--wave-pulse))),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.wave-item.active::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 25% 50%,
      hsla(var(--wave-hue), 80%, 55%, calc(0.30 * var(--wave-pulse))) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%,
      hsla(calc(var(--wave-hue) + 30), 75%, 60%, calc(0.22 * var(--wave-pulse))) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
  filter: blur(20px);
}

.wave-item-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.05;
  flex: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  /* avoid wide titles pushing the play button off-card */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wave-item.active .wave-item-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  flex: none;
}
.wave-item-sub { display: none; }
.wave-item.active .wave-item-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(196,181,253,.7);
}
.wave-play-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #1a0f2e;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.wave-play-btn:hover { transform: scale(1.1); }
.wave-item.active .wave-play-btn {
  position: absolute;
  right: 26px; top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #fff, #ede9fe);
  box-shadow: 0 12px 30px rgba(0,0,0,.45),
              0 0 24px hsla(var(--wave-hue), 70%, 55%, .35);
}
.wave-item.active .wave-play-btn:hover { transform: translateY(-50%) scale(1.08); }

.wave-nav {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  z-index: 3;
}
.wave-nav-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,6,22,.55);
  border: 1px solid rgba(167,139,250,.2);
  color: #fff; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
  transition: background .2s ease;
}
.wave-nav-btn:hover { background: rgba(124,58,237,.3); }
.wave-dots { display: flex; gap: 7px; align-items: center; }
.wave-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(196,181,253,.3);
  cursor: pointer; transition: all .25s ease;
}
.wave-dot.active { background: #c4b5fd; width: 22px; border-radius: 4px; }

/* Sections below the stage */
.wave-section { margin-bottom: 0; }
.wave-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.wave-section-h h3 {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.02em; margin: 0;
}
.wave-section-h span {
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(196,181,253,.5); cursor: pointer;
}
.wave-section-h span:hover { color: #c4b5fd; }

.wave-track-rows { display: flex; flex-direction: column; gap: 6px; }
.wave-track-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: rgba(20,12,38,.5);
  border: 1px solid rgba(167,139,250,.1);
  border-radius: 16px;
  cursor: pointer; transition: all .2s ease;
}
.wave-track-row:hover {
  background: rgba(30,18,55,.7);
  transform: translateX(4px);
  border-color: rgba(167,139,250,.25);
}
.wave-row-num { font-family: var(--font-mono); color: rgba(196,181,253,.5); width: 24px; font-size: .76rem; }
.wave-row-cover {
  width: 44px; height: 44px;
  border-radius: 10px; overflow: hidden;
  background: rgba(10,6,22,.6); flex-shrink: 0;
}
.wave-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.wave-row-info { flex: 1; min-width: 0; }
.wave-row-title { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.wave-row-artist { font-size: .75rem; color: rgba(196,181,253,.6); margin-top: 2px; }
.wave-row-play { color: #a78bfa; font-size: 1.05rem; opacity: .6; }
.wave-track-row:hover .wave-row-play { opacity: 1; }

.wave-artist-row {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.wave-artist-row::-webkit-scrollbar { height: 5px; }
.wave-artist-row::-webkit-scrollbar-thumb { background: rgba(167,139,250,.2); border-radius: 3px; }
/* Bubble used on home (horizontal scroll row) — compact with nebula glow on hover */
.wave-artist-bubble {
  flex-shrink: 0;
  text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  width: 110px;
  padding: 6px;
  position: relative;
}
.wave-artist-av {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%);
  box-shadow:
    0 10px 24px rgba(124,58,237,.35),
    inset 0 0 0 2px rgba(255,255,255,.1);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease;
}
.wave-artist-av::after {
  /* outer halo ring */
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsla(var(--wave-hue), 80%, 65%, 0) 0%,
    hsla(var(--wave-hue), 80%, 65%, .6) 30%,
    hsla(calc(var(--wave-hue) + 40), 80%, 70%, .8) 50%,
    hsla(var(--wave-hue), 80%, 65%, .6) 70%,
    hsla(var(--wave-hue), 80%, 65%, 0) 100%);
  z-index: -1;
  opacity: 0;
  filter: blur(8px);
  transition: opacity .3s ease;
}
.wave-artist-av img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.wave-artist-bubble:hover .wave-artist-av {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 18px 40px rgba(124,58,237,.55),
    0 0 60px hsla(var(--wave-hue), 80%, 60%, .45),
    inset 0 0 0 2px rgba(255,255,255,.18);
}
.wave-artist-bubble:hover .wave-artist-av::after { opacity: 1; }
.wave-artist-nm {
  font-size: .85rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
  color: rgba(255,255,255,.92);
  transition: color .2s ease;
}
.wave-artist-bubble:hover .wave-artist-nm { color: #fff; }

/* Big grid cards on /#artists — same DNA, larger, with deeper nebula */
.wave-artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px;
  margin-top: 12px;
}
.wave-artist-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 24px 16px 18px;
  background: linear-gradient(180deg, rgba(30,18,55,.55) 0%, rgba(15,10,30,.5) 100%);
  border: 1px solid rgba(167,139,250,.12);
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .3s ease,
              box-shadow .3s ease;
}
/* Animated nebula background on card */
.wave-artist-card::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 30% 30%,
      hsla(var(--wave-hue), 80%, 55%, .35) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 75%,
      hsla(calc(var(--wave-hue) + 40), 75%, 60%, .25) 0%, transparent 60%);
  z-index: -1;
  filter: blur(28px);
  opacity: 0;
  transition: opacity .45s ease;
}
.wave-artist-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(167,139,250,.4);
  box-shadow:
    0 24px 50px rgba(0,0,0,.5),
    0 0 60px hsla(var(--wave-hue), 80%, 55%, .25);
}
.wave-artist-card:hover::before { opacity: 1; }

.wave-artist-card-av {
  position: relative;
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; color: #fff;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #c4b5fd 100%);
  box-shadow:
    0 14px 30px rgba(124,58,237,.4),
    inset 0 0 0 3px rgba(255,255,255,.08);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s ease;
}
.wave-artist-card-av::after {
  /* halo ring same as bubble but bigger */
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsla(var(--wave-hue), 80%, 65%, 0) 0%,
    hsla(var(--wave-hue), 80%, 65%, .7) 30%,
    hsla(calc(var(--wave-hue) + 40), 80%, 70%, .9) 50%,
    hsla(var(--wave-hue), 80%, 65%, .7) 70%,
    hsla(var(--wave-hue), 80%, 65%, 0) 100%);
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  transition: opacity .35s ease;
  animation: waveSpin 8s linear infinite;
}
.wave-artist-card-av img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.wave-artist-card:hover .wave-artist-card-av {
  transform: scale(1.06);
  box-shadow:
    0 22px 50px rgba(124,58,237,.55),
    0 0 70px hsla(var(--wave-hue), 80%, 60%, .5),
    inset 0 0 0 3px rgba(255,255,255,.18);
}
.wave-artist-card:hover .wave-artist-card-av::after { opacity: 1; }

.wave-artist-card-nm {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
  color: rgba(255,255,255,.95);
}
.wave-artist-card-nm-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(196,181,253,.55);
  margin-top: -6px;
}

@keyframes waveSpin {
  to { transform: rotate(360deg); }
}

/* Wave + classical-list shared row used for wave Charts page */
.wave-chart-rows .wave-track-row .wave-row-num { font-weight: 700; color: #c4b5fd; }

@media (max-width: 700px) {
  [data-design="wave"] { --sidebar-w: 0; }
  [data-design="wave"] #sidebar { display: none; }
  [data-design="wave"] #main > .page.active { padding: 14px 14px 32px; }
  .wave-stage { height: 62vh; min-height: 460px; border-radius: 22px; }
  .wave-item { padding: 14px 18px; border-radius: 18px; height: 64px; }
  .wave-item.active { height: 110px; padding: 18px 22px; }
  .wave-item-title { font-size: 1.4rem; }
  .wave-item.active .wave-item-title { font-size: 1.6rem; }
  .wave-play-btn { width: 38px; height: 38px; }
  .wave-item.active .wave-play-btn { width: 48px; height: 48px; right: 18px; }
}

/* Wave + light theme */
[data-design="wave"][data-theme="light"] #sidebar {
  background: linear-gradient(180deg, #f0eaff, #e6dcfb);
}
[data-design="wave"][data-theme="light"] .nav-item { color: rgba(40,20,80,.7); }
[data-design="wave"][data-theme="light"] .nav-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(109,40,217,.1));
  color: #1a0f2e;
}
[data-design="wave"][data-theme="light"] .topbar,
[data-design="wave"][data-theme="light"] #player {
  background: rgba(255,255,255,.7);
  border-color: rgba(124,58,237,.15);
}

/* Wave — generic page wrapper for other tabs (artists, charts, etc.) */
.wave-page-wrap { display: flex; flex-direction: column; gap: 12px; }
.wave-page-title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.8rem;
  letter-spacing: -.025em;
  margin: 4px 0 0;
}
.wave-page-sub {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(196,181,253,.5);
  margin-bottom: 8px;
}


/* ─── Wave fullscreen player — nebula glow, rounded glass ─── */
[data-design="wave"] #player-fullscreen {
  background: radial-gradient(ellipse at 50% 30%,
                hsla(var(--wave-hue), 60%, 15%, 1) 0%,
                #0a0612 60%,
                #050508 100%);
  padding: 32px;
  overflow: hidden;
}
[data-design="wave"] #player-fullscreen::before {
  /* Animated nebula behind the album art */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 35%,
      hsla(var(--wave-hue), 80%, 55%,
        calc(0.25 + 0.20 * var(--wave-pulse))) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 65%,
      hsla(calc(var(--wave-hue) + 40), 75%, 60%,
        calc(0.20 + 0.15 * var(--wave-pulse))) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%,
      hsla(calc(var(--wave-hue) - 20), 70%, 50%, .18) 0%, transparent 60%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
[data-design="wave"] .fs-bg {
  /* keep the cover-bleed effect but soften it; nebula is the hero */
  filter: blur(100px) saturate(1.3);
  opacity: 0.25;
}
[data-design="wave"] .fs-content {
  max-width: 540px;
}
[data-design="wave"] .fs-cover {
  width: 320px;
  height: 320px;
  border-radius: 24px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    0 0 calc(80px * var(--wave-pulse))
      hsla(var(--wave-hue), 80%, 55%,
        calc(0.45 * var(--wave-pulse))),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s ease;
}
[data-design="wave"] .fs-cover.playing {
  transform: scale(calc(1.02 + 0.03 * var(--wave-pulse)));
  box-shadow:
    0 50px 120px rgba(0,0,0,.7),
    0 0 calc(120px * var(--wave-pulse))
      hsla(var(--wave-hue), 85%, 60%, calc(0.55 * var(--wave-pulse))),
    inset 0 0 0 1px rgba(255,255,255,.1);
}
[data-design="wave"] .fs-title {
  font-size: 2rem;
  letter-spacing: -.035em;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  margin-bottom: 6px;
}
[data-design="wave"] .fs-artist {
  color: rgba(196,181,253,.75);
  font-size: 1.05rem;
  margin-bottom: 32px;
}
[data-design="wave"] .fs-close {
  background: rgba(10,6,22,.65);
  border: 1px solid rgba(167,139,250,.2);
  color: #c4b5fd;
  backdrop-filter: blur(14px);
}
[data-design="wave"] .fs-close:hover {
  background: rgba(124,58,237,.35);
  color: #fff;
}
[data-design="wave"] .fs-progress .progress-bar {
  background: rgba(255,255,255,.08);
  height: 4px;
  border-radius: 3px;
}
[data-design="wave"] .fs-progress .progress-fill {
  background: linear-gradient(90deg,
    hsl(var(--wave-hue), 80%, 70%),
    hsl(calc(var(--wave-hue) + 40), 75%, 75%));
  box-shadow: 0 0 12px hsla(var(--wave-hue), 80%, 60%, .6);
}
[data-design="wave"] .fs-progress .progress-time {
  color: rgba(196,181,253,.7);
  font-family: var(--font-mono);
}
[data-design="wave"] .fs-controls .ctrl-btn {
  color: rgba(196,181,253,.85);
  width: 44px; height: 44px;
  border-radius: 14px;
  transition: background .2s ease, color .2s ease;
}
[data-design="wave"] .fs-controls .ctrl-btn:hover {
  color: #fff;
  background: rgba(167,139,250,.12);
}
[data-design="wave"] .fs-controls .ctrl-btn.active {
  color: #c4b5fd;
  background: rgba(124,58,237,.18);
}
[data-design="wave"] .fs-ctrl-play {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #fff, #ede9fe);
  color: #1a0f2e;
  box-shadow:
    0 10px 30px rgba(0,0,0,.4),
    0 0 calc(40px * var(--wave-pulse))
      hsla(var(--wave-hue), 80%, 65%, calc(0.5 * var(--wave-pulse)));
}
[data-design="wave"] .fs-ctrl-play:hover {
  background: linear-gradient(135deg, #fff, #ddd6fe);
  color: #1a0f2e;
  transform: scale(1.08);
}
/* like / lyrics / share / volume row in FS — match player dock chips */
[data-design="wave"] #player-fullscreen .player-like,
[data-design="wave"] .fs-lyrics-btn,
[data-design="wave"] .fs-share-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(196,181,253,.7);
  transition: color .2s ease, transform .15s ease;
}
[data-design="wave"] #player-fullscreen .player-like:hover,
[data-design="wave"] .fs-lyrics-btn:hover,
[data-design="wave"] .fs-share-btn:hover {
  background: transparent;
  color: #fff;
  transform: scale(1.12);
}
[data-design="wave"] #player-fullscreen .player-like.liked {
  color: hsl(var(--wave-hue), 80%, 70%);
}
[data-design="wave"] #player-fullscreen .volume-control {
  background: transparent;
  border: none;
  padding: 0;
}
[data-design="wave"] #player-fullscreen .volume-slider {
  accent-color: #a78bfa;
}

@media (max-width: 700px) {
  [data-design="wave"] .fs-cover { width: 260px; height: 260px; }
  [data-design="wave"] .fs-title { font-size: 1.5rem; }
  /* Hide volume slider on mobile — device buttons handle it */
  #player-fullscreen .volume-control,
  #player .volume-control { display: none !important; }
}

/* ─── Wave Artist Page (/#artist/slug) ─── */
.wave-artist-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
}

.wap-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 360px;
  isolation: isolate;
}
.wap-hero-banner {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(2px) saturate(1.1);
  transform: scale(1.05);
  z-index: 0;
}
.wap-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,11,.35) 0%, rgba(5,5,11,.85) 70%, rgba(5,5,11,1) 100%),
    linear-gradient(90deg, rgba(5,5,11,.6) 0%, rgba(5,5,11,.2) 50%, rgba(5,5,11,.6) 100%);
  z-index: 1;
}
.wap-hero-nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 20% 40%,
      hsla(var(--wave-hue), 80%, 55%, .35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%,
      hsla(calc(var(--wave-hue) + 35), 75%, 60%, .25) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 1;
  mix-blend-mode: screen;
  opacity: calc(0.5 + 0.3 * var(--wave-pulse));
  transition: opacity .4s ease;
}
/* When no banner, give the hero a solid deep purple base */
.wap-hero:not(:has(.wap-hero-banner)) .wap-hero-veil {
  background: linear-gradient(180deg, #1a0f2e 0%, #0a0612 100%);
}

.wap-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 60px 36px 36px;
  min-height: 360px;
  box-sizing: border-box;
}

.wap-avatar {
  position: relative;
  width: 180px; height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #4c1d95, #7c3aed 50%, #c4b5fd);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 4rem; color: #fff;
  flex-shrink: 0;
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 0 80px hsla(var(--wave-hue), 80%, 60%, .4),
    inset 0 0 0 4px rgba(255,255,255,.08);
}
.wap-avatar::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsla(var(--wave-hue), 80%, 65%, 0) 0%,
    hsla(var(--wave-hue), 80%, 65%, .8) 30%,
    hsla(calc(var(--wave-hue) + 40), 80%, 70%, 1) 50%,
    hsla(var(--wave-hue), 80%, 65%, .8) 70%,
    hsla(var(--wave-hue), 80%, 65%, 0) 100%);
  z-index: -1;
  filter: blur(12px);
  animation: waveSpin 10s linear infinite;
  opacity: calc(0.7 + 0.3 * var(--wave-pulse));
}
.wap-avatar img { width: 100%; height: 100%; object-fit: cover; }

.wap-meta { flex: 1; min-width: 0; }
.wap-aom {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 0 24px rgba(124,58,237,.5);
}
.wap-name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.wap-stats {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
  font-size: .9rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 22px;
}
.wap-stats strong { color: #fff; font-weight: 700; }
.wap-stat-dot { color: rgba(196,181,253,.5); }

.wap-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.wap-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #fff, #ede9fe);
  color: #1a0f2e;
  border: none; cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow:
    0 12px 30px rgba(0,0,0,.4),
    0 0 calc(30px * var(--wave-pulse)) hsla(var(--wave-hue), 80%, 60%, .5);
  transition: transform .15s ease;
}
.wap-play-btn:hover { transform: scale(1.05); }
.wap-secondary-btn {
  display: inline-flex; align-items: center;
  background: rgba(10,6,22,.55);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(167,139,250,.25);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600; font-size: .88rem;
  padding: 12px 22px;
  border-radius: 999px;
  backdrop-filter: blur(14px);
  transition: background .2s ease, color .2s ease;
}
.wap-secondary-btn:hover { background: rgba(124,58,237,.3); color: #fff; }

.wap-section {
  padding: 0;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}
.wap-section:last-child { padding-bottom: 8px; }

/* Album cards in artist page */
.wap-albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}
.wap-album-card {
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: transform .25s ease;
}
.wap-album-card:hover { transform: translateY(-4px); }
.wap-album-cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1840, #1a0f2e);
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  transition: box-shadow .25s ease;
}
.wap-album-card:hover .wap-album-cover {
  box-shadow:
    0 18px 40px rgba(0,0,0,.5),
    0 0 40px hsla(var(--wave-hue), 80%, 55%, .25);
}
.wap-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wap-album-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 3rem;
  color: rgba(167,139,250,.4);
}
.wap-album-title {
  font-size: .9rem; font-weight: 600;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wap-album-year {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: rgba(196,181,253,.55);
  letter-spacing: .1em;
}

.wap-bio-text {
  max-width: 720px;
  font-size: .95rem;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}

@media (max-width: 700px) {
  .wave-artist-page { margin: 0; gap: 24px; }
  .wap-hero-content { padding: 40px 20px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .wap-avatar { width: 130px; height: 130px; font-size: 3rem; }
  .wap-name { font-size: 2.2rem; }
  .wap-section { padding: 0; }
}

/* ─── Wave: playing-state indicators ─── */

/* Track row when its track is the currently playing one */
.wave-track-row.playing {
  background: linear-gradient(90deg,
    hsla(var(--wave-hue), 70%, 35%, .45) 0%,
    rgba(20,12,38,.5) 80%);
  border-color: hsla(var(--wave-hue), 70%, 60%, .4);
  box-shadow:
    0 6px 20px rgba(0,0,0,.4),
    inset 3px 0 0 hsl(var(--wave-hue), 80%, 70%);
}
.wave-track-row.playing .wave-row-title { color: #fff; }
.wave-track-row.playing .wave-row-artist { color: rgba(255,255,255,.85); }
.wave-track-row.playing .wave-row-play { opacity: 1; color: #fff; }
.wave-track-row.playing:hover { transform: none; }

/* Animated bars (re-use existing .playing-indicator if defined, but ensure colors fit) */
[data-design="wave"] .playing-indicator {
  display: inline-flex; align-items: flex-end;
  gap: 2px; height: 14px;
}
[data-design="wave"] .playing-indicator span {
  display: inline-block;
  width: 3px;
  background: linear-gradient(180deg,
    hsl(var(--wave-hue), 85%, 75%),
    hsl(calc(var(--wave-hue) + 30), 80%, 60%));
  border-radius: 2px;
  animation: wavePlayingBar 1s ease-in-out infinite;
}
[data-design="wave"] .playing-indicator span:nth-child(1) { height: 40%; animation-delay: -.4s; }
[data-design="wave"] .playing-indicator span:nth-child(2) { height: 100%; animation-delay: -.2s; }
[data-design="wave"] .playing-indicator span:nth-child(3) { height: 60%; animation-delay: 0s; }
@keyframes wavePlayingBar {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* Wave wheel — active (playing) genre card halo */
.wave-item.playing {
  border-color: hsla(var(--wave-hue), 80%, 70%, .55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 0 calc(80px * var(--wave-pulse))
      hsla(var(--wave-hue), 85%, 60%, calc(0.55 * var(--wave-pulse))),
    inset 0 0 0 1px hsla(var(--wave-hue), 80%, 75%, .25);
}
.wave-item.playing .wave-play-btn {
  background: linear-gradient(135deg,
    hsl(var(--wave-hue), 85%, 75%),
    hsl(calc(var(--wave-hue) + 30), 80%, 65%));
  color: #fff;
}

/* ─── Hide non dark/light themes in wave mode ─── */
[data-design="wave"] .theme-opt[data-theme-name="violet"],
[data-design="wave"] .theme-opt[data-theme-name="midnight"],
[data-design="wave"] .theme-opt[data-theme-name="rose"] {
  display: none;
}

/* ─── Light theme for wave design ─── */
[data-design="wave"][data-theme="light"] {
  --c-bg: #f4f0fb;
  --c-bg2: #ebe5f8;
}
[data-design="wave"][data-theme="light"] body { background: #f4f0fb; }
[data-design="wave"][data-theme="light"] #sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f3eefc 100%);
  border-right: 1px solid rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] .sidebar-logo-text {
  background: linear-gradient(135deg, #4c1d95, #7c3aed 50%, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-design="wave"][data-theme="light"] .nav-item {
  color: rgba(60,30,110,.7);
}
[data-design="wave"][data-theme="light"] .nav-item:hover {
  background: rgba(124,58,237,.08);
  color: #1a0f2e;
}
[data-design="wave"][data-theme="light"] .nav-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(167,139,250,.15));
  color: #1a0f2e;
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.25);
}
[data-design="wave"][data-theme="light"] .sidebar-toggle {
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.25);
  color: #4c1d95;
}
[data-design="wave"][data-theme="light"] .sidebar-toggle:hover {
  background: rgba(124,58,237,.18);
}
[data-design="wave"][data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(243,238,252,.7));
  border-bottom: 1px solid rgba(124,58,237,.12);
}
[data-design="wave"][data-theme="light"] .search-bar {
  background: rgba(255,255,255,.65);
  border-color: rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] .topbar-nav-btn,
[data-design="wave"][data-theme="light"] .theme-toggle,
[data-design="wave"][data-theme="light"] #push-toggle-btn {
  background: rgba(255,255,255,.7);
  border-color: rgba(124,58,237,.15);
  color: #4c1d95;
}
[data-design="wave"][data-theme="light"] #player {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,238,252,.95));
  border-top: 1px solid rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] #player .ctrl-btn,
[data-design="wave"][data-theme="light"] #player .player-like {
  color: rgba(60,30,110,.85);
}
[data-design="wave"][data-theme="light"] #player .ctrl-btn:hover { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .ctrl-btn-play {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
}

/* Wave home / wheel adjustments for light theme — keep deep nebula stage but
   make the cards/items readable. The bg canvas is dark on purpose for contrast. */
[data-design="wave"][data-theme="light"] .wave-track-row {
  background: rgba(255,255,255,.7);
  border-color: rgba(124,58,237,.12);
}
[data-design="wave"][data-theme="light"] .wave-track-row:hover {
  background: rgba(255,255,255,.92);
  border-color: rgba(124,58,237,.3);
}
[data-design="wave"][data-theme="light"] .wave-row-title { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wave-row-artist { color: rgba(60,30,110,.7); }
[data-design="wave"][data-theme="light"] .wave-row-num { color: rgba(60,30,110,.55); }
[data-design="wave"][data-theme="light"] .wave-track-row.playing {
  background: linear-gradient(90deg,
    hsla(var(--wave-hue), 70%, 80%, .6) 0%,
    rgba(255,255,255,.7) 80%);
}
[data-design="wave"][data-theme="light"] .wave-track-row.playing .wave-row-title { color: #1a0f2e; }

[data-design="wave"][data-theme="light"] .wave-section-h h3 { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wave-section-h span { color: rgba(60,30,110,.55); }
[data-design="wave"][data-theme="light"] .wave-artist-card {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(243,238,252,.85));
  border-color: rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] .wave-artist-card-nm { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wave-artists-grid .wave-artist-card-nm-sub { color: rgba(60,30,110,.55); }

/* Wave release page (album/playlist) and profile — light theme readability */
[data-design="wave"][data-theme="light"] .wrp-title,
[data-design="wave"][data-theme="light"] .wap-name,
[data-design="wave"][data-theme="light"] .wpr-name { color: #1a0f2e; text-shadow: none; }
[data-design="wave"][data-theme="light"] .wrp-sub,
[data-design="wave"][data-theme="light"] .wpr-handle { color: rgba(60,30,110,.7); }
[data-design="wave"][data-theme="light"] .wrp-kind { color: rgba(60,30,110,.6); }
[data-design="wave"][data-theme="light"] .wap-secondary-btn,
[data-design="wave"][data-theme="light"] .wrp-link {
  background: rgba(255,255,255,.6);
  color: #4c1d95;
  border-color: rgba(124,58,237,.2);
}
[data-design="wave"][data-theme="light"] .wpr-stat {
  background: rgba(255,255,255,.7);
  border-color: rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] .wpr-stat-val { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wpr-artist-row { background: rgba(255,255,255,.6); }
[data-design="wave"][data-theme="light"] .wpr-artist-row:hover { background: rgba(255,255,255,.9); }
[data-design="wave"][data-theme="light"] .wpr-artist-nm { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wpr-artist-sub { color: rgba(60,30,110,.6); }
[data-design="wave"][data-theme="light"] .wap-bio-text { color: rgba(60,30,110,.85); }

/* ─── Wave release page (album / playlist) ─── */
.wave-release-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}
.wrp-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 340px;
  isolation: isolate;
}
.wrp-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(40px) saturate(1.3);
  transform: scale(1.15);
  opacity: .55;
  z-index: 0;
}
.wrp-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,6,22,.3) 0%, rgba(5,5,11,.85) 75%, rgba(5,5,11,1) 100%),
    linear-gradient(135deg, rgba(20,12,38,.6), rgba(5,5,11,.3));
  z-index: 1;
}
.wrp-hero-nebula {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 25% 40%,
      hsla(var(--wave-hue), 80%, 55%, .3) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%,
      hsla(calc(var(--wave-hue) + 35), 75%, 60%, .22) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 1;
  mix-blend-mode: screen;
  opacity: calc(0.5 + 0.3 * var(--wave-pulse));
}

.wrp-hero-content {
  position: relative; z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 56px 36px 32px;
  min-height: 340px;
  box-sizing: border-box;
}

.wrp-cover {
  width: 220px; height: 220px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1840, #1a0f2e);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    0 0 60px hsla(var(--wave-hue), 80%, 55%, .35),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.wrp-cover.wrp-cover-gen {
  background: linear-gradient(135deg, #4c1d95, #7c3aed 60%, #c4b5fd);
}
.wrp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrp-cover-fallback {
  font-family: var(--font-display);
  font-size: 5rem;
  color: rgba(167,139,250,.4);
}

.wrp-meta { flex: 1; min-width: 0; }
.wrp-kind {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(196,181,253,.75);
  margin-bottom: 10px;
}
.wrp-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.wrp-sub {
  font-size: .92rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 22px;
}
.wrp-link {
  color: #c4b5fd;
  cursor: pointer;
  text-decoration: none;
}
.wrp-link:hover { color: #fff; }
.wrp-dot { color: rgba(196,181,253,.4); margin: 0 4px; }
.wrp-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}

@media (max-width: 700px) {
  .wave-release-page { margin: 0; gap: 22px; }
  .wrp-hero-content { padding: 40px 20px 24px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .wrp-cover { width: 160px; height: 160px; }
  .wrp-title { font-size: 2rem; }
}

/* ─── Wave profile page ─── */
.wave-profile-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}
.wpr-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 60px 36px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  background:
    linear-gradient(135deg, rgba(20,12,38,.85), rgba(5,5,11,.9));
}
.wpr-hero-nebula {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 20% 40%,
      hsla(var(--wave-hue), 80%, 55%, .3) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%,
      hsla(calc(var(--wave-hue) + 40), 75%, 60%, .22) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
  mix-blend-mode: screen;
  opacity: calc(0.5 + 0.3 * var(--wave-pulse));
}
.wpr-avatar {
  position: relative;
  z-index: 1;
  width: 160px; height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #4c1d95, #7c3aed 50%, #c4b5fd);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 3.5rem; color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow:
    0 22px 50px rgba(0,0,0,.5),
    0 0 60px hsla(var(--wave-hue), 80%, 60%, .35),
    inset 0 0 0 3px rgba(255,255,255,.08);
  transition: transform .25s ease;
}
.wpr-avatar:hover { transform: scale(1.04); }
.wpr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wpr-avatar-edit {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.wpr-avatar:hover .wpr-avatar-edit {
  background: rgba(0,0,0,.4);
  opacity: 1;
}
.wpr-info { position: relative; z-index: 1; min-width: 0; }
.wpr-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0 0 6px;
  color: #fff;
}
.wpr-handle {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: rgba(196,181,253,.75);
  margin-bottom: 12px;
}
.wpr-bio {
  font-size: .92rem;
  color: rgba(255,255,255,.8);
  max-width: 520px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.wpr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wpr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.wpr-stat {
  padding: 22px 24px;
  background: rgba(20,12,38,.5);
  border: 1px solid rgba(167,139,250,.12);
  border-radius: 20px;
  text-align: left;
}
.wpr-stat-val {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.wpr-stat-lbl {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(196,181,253,.6);
  margin-top: 8px;
}

.wpr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 800px) {
  .wpr-grid { grid-template-columns: 1fr; }
}

.wpr-artists { display: flex; flex-direction: column; gap: 6px; }
.wpr-artist-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: rgba(20,12,38,.5);
  border: 1px solid rgba(167,139,250,.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s ease;
}
.wpr-artist-row:hover {
  background: rgba(30,18,55,.7);
  transform: translateX(4px);
}
.wpr-artist-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700;
  flex-shrink: 0;
}
.wpr-artist-av img { width: 100%; height: 100%; object-fit: cover; }
.wpr-artist-info { flex: 1; min-width: 0; }
.wpr-artist-nm { font-weight: 600; font-size: .92rem; color: #fff; }
.wpr-artist-sub { font-size: .72rem; color: rgba(196,181,253,.6); margin-top: 2px; }

@media (max-width: 700px) {
  .wave-profile-page { margin: 0; gap: 22px; }
  .wpr-hero { flex-direction: column; align-items: flex-start; padding: 36px 20px 24px; gap: 18px; }
  .wpr-avatar { width: 120px; height: 120px; font-size: 2.6rem; }
}

/* ─── Settings page (classic) ─── */
.settings-page, .wave-settings-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 4px 40px;
}
.settings-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 28px;
}
.settings-group {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.settings-group-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-text3);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.settings-badge-locked {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a0a3a;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .1em;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--c-border);
}
.settings-row:first-of-type { border-top: none; padding-top: 4px; }
.settings-row-info { flex: 1; min-width: 0; }
.settings-row-name { font-size: .92rem; font-weight: 600; margin-bottom: 4px; }
.settings-row-desc { font-size: .78rem; color: var(--c-text3); line-height: 1.4; }
.settings-input { max-width: 140px; }
.settings-switch {
  position: relative;
  display: inline-block;
  width: 46px; height: 26px;
  flex-shrink: 0;
}
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: var(--c-surface3);
  border-radius: 999px;
  transition: background .25s ease;
}
.settings-slider::before {
  content: ''; position: absolute;
  height: 20px; width: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.settings-switch input:checked + .settings-slider {
  background: var(--c-purple);
}
.settings-switch input:checked + .settings-slider::before {
  transform: translateX(20px);
}

/* ─── Wave settings page ─── */
[data-design="wave"] .wave-settings-page .settings-group {
  background: rgba(20,12,38,.5);
  border: 1px solid rgba(167,139,250,.12);
  border-radius: 20px;
}
[data-design="wave"] .wave-settings-page .settings-row {
  border-top-color: rgba(167,139,250,.08);
}
[data-design="wave"] .wave-settings-page .settings-group-title {
  color: rgba(196,181,253,.6);
}
[data-design="wave"] .wave-settings-page .settings-switch input:checked + .settings-slider {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  box-shadow: 0 0 12px hsla(var(--wave-hue), 80%, 60%, .4);
}
[data-design="wave"] .wave-settings-page .settings-input {
  background: rgba(10,6,22,.5);
  border-color: rgba(167,139,250,.15);
  color: #fff;
}
[data-design="wave"] .wave-settings-page .settings-title {
  color: #fff;
}

/* ═══════════════════════════════════════════════════
   WAVE: library playlists grid
   ═══════════════════════════════════════════════════ */
.wave-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.wave-pl-card {
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: transform .25s ease;
}
.wave-pl-card:hover { transform: translateY(-4px); }
.wave-pl-cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1840, #1a0f2e);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  transition: box-shadow .25s ease;
}
.wave-pl-cover-gen {
  background: linear-gradient(135deg, #4c1d95, #7c3aed 60%, #c4b5fd);
}
.wave-pl-cover img { width: 100%; height: 100%; object-fit: cover; }
.wave-pl-card:hover .wave-pl-cover {
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 40px hsla(var(--wave-hue),80%,55%,.25);
}
.wave-pl-play {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #ede9fe);
  color: #1a0f2e;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.wave-pl-card:hover .wave-pl-play { opacity: 1; transform: translateY(0); }
.wave-pl-title {
  font-weight: 700; font-size: .95rem;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wave-pl-sub {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(196,181,253,.55);
}
[data-design="wave"][data-theme="light"] .wave-pl-title { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wave-pl-sub { color: rgba(60,30,110,.55); }

/* ═══════════════════════════════════════════════════
   WAVE: events page
   ═══════════════════════════════════════════════════ */
[data-design="wave"] .events-header { margin-bottom: 22px; }
[data-design="wave"] .page-title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.9rem;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 16px;
}
[data-design="wave"][data-theme="light"] .page-title { color: #1a0f2e; }
[data-design="wave"] .event-cat-btn {
  background: rgba(20,12,38,.5);
  border: 1px solid rgba(167,139,250,.15);
  color: rgba(196,181,253,.8);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s ease;
}
[data-design="wave"] .event-cat-btn:hover { background: rgba(124,58,237,.2); color:#fff; }
[data-design="wave"] .event-cat-btn.active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px hsla(var(--wave-hue),80%,55%,.3);
}
[data-design="wave"] .event-card {
  background: linear-gradient(180deg, rgba(30,18,55,.55), rgba(15,10,30,.5));
  border: 1px solid rgba(167,139,250,.12);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
[data-design="wave"] .event-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167,139,250,.35);
  box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 50px hsla(var(--wave-hue),80%,55%,.2);
}
[data-design="wave"] .event-cover { border-radius: 22px 22px 0 0; overflow: hidden; }
[data-design="wave"] .event-category-badge {
  background: rgba(10,6,22,.7);
  border: 1px solid rgba(167,139,250,.25);
  color: #c4b5fd;
  backdrop-filter: blur(8px);
}
[data-design="wave"] .event-title { color: #fff; font-family: var(--font-display); font-weight: 700; }
[data-design="wave"] .event-artist { color: #c4b5fd; }
[data-design="wave"][data-theme="light"] .event-card {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(243,238,252,.85));
  border-color: rgba(124,58,237,.15);
}
[data-design="wave"][data-theme="light"] .event-title { color: #1a0f2e; }

/* ═══════════════════════════════════════════════════
   WAVE: stories row on home
   ═══════════════════════════════════════════════════ */
.wave-stories {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.wave-stories::-webkit-scrollbar { height: 5px; }
.wave-stories::-webkit-scrollbar-thumb { background: rgba(167,139,250,.2); border-radius: 3px; }
.wave-story {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 92px;
}
.wave-story-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg,
    hsl(var(--wave-hue),85%,65%),
    hsl(calc(var(--wave-hue)+50),80%,70%),
    hsl(calc(var(--wave-hue)+120),75%,65%),
    hsl(var(--wave-hue),85%,65%));
  transition: transform .2s ease;
}
.wave-story:hover .wave-story-ring { transform: scale(1.06); }
.wave-story-ring.seen {
  background: rgba(167,139,250,.2);
}
.wave-story-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #0a0612;
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
}
.wave-story-inner img { width: 100%; height: 100%; object-fit: cover; }
.wave-story-name {
  font-size: .76rem; font-weight: 600;
  color: rgba(255,255,255,.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%; text-align: center;
}
[data-design="wave"][data-theme="light"] .wave-story-name { color: #1a0f2e; }
[data-design="wave"][data-theme="light"] .wave-story-inner { border-color: #f4f0fb; }

/* ═══════════════════════════════════════════════════
   STICKY HEADER (artist / album / playlist) — both designs
   ═══════════════════════════════════════════════════ */
.sticky-header {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: 60px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: rgba(10,8,18,.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--c-border);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;
}
.sticky-header.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-header-play {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #ede9fe);
  color: #1a0f2e;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.sticky-header-play:hover { transform: scale(1.08); }
.sticky-header-title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-text);
}
[data-design="wave"] .sticky-header {
  background: rgba(15,10,30,.92);
  border-bottom: 1px solid rgba(167,139,250,.15);
}
@media (max-width: 700px) {
  .sticky-header { left: 0; }
}

/* ═══════════════════════════════════════════════════
   CONTEXT MENU (right-click / kebab on track) — both designs
   ═══════════════════════════════════════════════════ */
.ctx-menu {
  position: fixed;
  z-index: 700;
  min-width: 210px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  padding: 6px;
  animation: ctxIn .14s ease;
}
@keyframes ctxIn { from { opacity: 0; transform: scale(.96) translateY(-4px);} to {opacity:1;transform:none;} }
.ctx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .86rem;
  color: var(--c-text2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
.ctx-item:hover { background: var(--c-surface3); color: var(--c-text); }
.ctx-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.ctx-divider { height: 1px; background: var(--c-border); margin: 5px 8px; }
.ctx-submenu-label { margin-left: auto; opacity: .5; font-size: .9rem; }
[data-design="wave"] .ctx-menu {
  background: rgba(20,14,38,.97);
  border: 1px solid rgba(167,139,250,.2);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 50px hsla(var(--wave-hue),70%,55%,.15);
}
[data-design="wave"] .ctx-item:hover { background: rgba(124,58,237,.22); color: #fff; }

/* Kebab button shown on track rows */
.track-kebab {
  background: none; border: none; cursor: pointer;
  color: var(--c-text3);
  padding: 4px 8px; border-radius: 6px;
  font-size: 1.1rem; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
.track-kebab:hover { color: var(--c-text); background: var(--c-surface2); }
.wave-row-kebab {
  background: none; border: none; cursor: pointer;
  color: rgba(196,181,253,.55);
  padding: 4px 8px; border-radius: 8px;
  font-size: 1.1rem; line-height: 1;
  transition: color .15s ease;
}
.wave-row-kebab:hover { color: #fff; }

/* ═══════════════════════════════════════════════════
   QUEUE PANEL — both designs
   ═══════════════════════════════════════════════════ */
.queue-panel {
  position: fixed;
  top: 0; right: 0;
  width: 360px; max-width: 90vw;
  height: calc(100vh - var(--player-h));
  z-index: 60;
  background: var(--c-bg2);
  border-left: 1px solid var(--c-border);
  box-shadow: -20px 0 60px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.queue-panel.open { transform: translateX(0); }
.queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--c-border);
}
.queue-head h3 {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.15rem;
  margin: 0;
}
.queue-head-actions { display: flex; gap: 6px; align-items: center; }
.queue-close, .queue-clear {
  background: none; border: none; cursor: pointer;
  color: var(--c-text3);
  font-size: .8rem;
  padding: 6px 8px; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.queue-close { font-size: 1.2rem; }
.queue-close:hover, .queue-clear:hover { color: var(--c-text); background: var(--c-surface2); }
.queue-list { flex: 1; overflow-y: auto; padding: 10px 12px 20px; }
.queue-section-label {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-text3);
  padding: 12px 8px 6px;
}
.queue-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.queue-item:hover { background: var(--c-surface); }
.queue-item.current { background: var(--c-surface2); }
.queue-item.current .queue-item-title { color: var(--c-violet2); }
.queue-item-cover {
  width: 40px; height: 40px; border-radius: 8px;
  overflow: hidden; background: var(--c-surface2); flex-shrink: 0;
}
.queue-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.queue-item-info { flex: 1; min-width: 0; }
.queue-item-title { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item-artist { font-size: .74rem; color: var(--c-text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--c-text3); opacity: 0;
  padding: 4px; font-size: 1rem;
  transition: opacity .15s ease, color .15s ease;
}
.queue-item:hover .queue-item-remove { opacity: 1; }
.queue-item-remove:hover { color: #f87171; }
.queue-item-handle { cursor: grab; color: var(--c-text3); opacity: .4; font-size: 1rem; }
.queue-item.dragging { opacity: .4; }
[data-design="wave"] .queue-panel {
  background: linear-gradient(180deg, #0c0a18, #0a0612);
  border-left: 1px solid rgba(167,139,250,.15);
}
[data-design="wave"] .queue-item:hover { background: rgba(124,58,237,.12); }
[data-design="wave"] .queue-item.current { background: rgba(124,58,237,.2); }
[data-design="wave"] .queue-item.current .queue-item-title { color: #c4b5fd; }

@media (max-width: 700px) {
  .queue-panel { width: 100vw; height: calc(100vh - var(--player-h)); }
}

/* Player queue toggle button */
.player-queue-btn {
  background: none; border: none; cursor: pointer;
  color: var(--c-text3);
  padding: 6px; border-radius: 8px;
  transition: color .15s ease;
}
.player-queue-btn:hover, .player-queue-btn.active { color: var(--c-violet2); }
[data-design="wave"] .player-queue-btn:hover,
[data-design="wave"] .player-queue-btn.active { color: #c4b5fd; }

/* ═══════════════════════════════════════════════════
   SMOOTH PAGE TRANSITION (both designs)
   ═══════════════════════════════════════════════════ */
.page-anim-in {
  animation: pageIn .34s cubic-bezier(.2,.8,.2,1);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   RELEASE COUNTDOWN TIMER — cosmic, both designs
   ═══════════════════════════════════════════════════ */
.release-timer {
  position: relative;
  margin: 0 0 24px;
  padding: 28px 24px;
  border-radius: 22px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.35), transparent 70%),
    linear-gradient(135deg, #1a0f2e, #0a0612);
  border: 1px solid rgba(167,139,250,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 0 0 60px rgba(124,58,237,.1);
}
.release-timer .rt-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(196,181,253,.7), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(167,139,250,.8), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.5), transparent);
  opacity: .6;
  animation: rtTwinkle 4s ease-in-out infinite alternate;
}
@keyframes rtTwinkle { from{opacity:.35} to{opacity:.75} }
.rt-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(196,181,253,.8);
  margin-bottom: 16px;
}
.rt-clock {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
}
.rt-cell { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.rt-num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 2.4rem;
  line-height: 1;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.rt-unit {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(196,181,253,.5); margin-top: 6px;
}
.rt-colon {
  font-family: var(--font-display); font-weight: 800; font-size: 1.8rem;
  color: rgba(167,139,250,.4); align-self: flex-start; margin-top: 2px;
}
.rt-sub {
  position: relative;
  font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 14px;
}
.rt-live {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: #c4b5fd; text-shadow: 0 0 20px rgba(124,58,237,.6);
}
/* Classic design — match darker surface */
.release-timer:not(.release-timer-wave) {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.25), transparent 70%),
    linear-gradient(135deg, var(--c-surface), var(--c-bg2));
}
/* Wave gets hue-reactive accent */
.release-timer-wave {
  border-color: hsla(var(--wave-hue), 60%, 55%, .25);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 0 0 calc(60px * var(--wave-pulse)) hsla(var(--wave-hue),70%,50%,.12);
}
[data-theme="light"] .release-timer:not(.release-timer-wave) {
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.12), transparent 70%), linear-gradient(135deg,#fff,#f0eaff);
  border-color: rgba(124,58,237,.15);
}
[data-theme="light"] .release-timer:not(.release-timer-wave) .rt-num { background: linear-gradient(135deg,#4c1d95,#7c3aed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
[data-theme="light"] .release-timer:not(.release-timer-wave) .rt-sub { color: rgba(60,30,110,.6); }
@media (max-width:600px){ .rt-num{font-size:1.7rem} .rt-cell{min-width:42px} .rt-colon{font-size:1.3rem} }

/* ═══════════════════════════════════════════════════
   COLOR FLASH overlay
   ═══════════════════════════════════════════════════ */
#color-flash-overlay {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0;
}
#color-flash-overlay.flash { animation: colorFlash 5s ease-out forwards; }
@keyframes colorFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   GUESS-THE-TRACK GAME
   ═══════════════════════════════════════════════════ */
.game-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.8); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.game-box {
  position: relative;
  width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
  border-radius: 26px; padding: 36px 28px;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.3), transparent 65%), linear-gradient(150deg, #160e2c, #0a0612);
  border: 1px solid rgba(167,139,250,.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.game-stars {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(196,181,253,.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 75%, rgba(167,139,250,.7), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,.5), transparent);
  opacity: .5;
}
.game-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; cursor: pointer;
  color: rgba(255,255,255,.7); font-size: 1rem;
}
.game-close:hover { background: rgba(255,255,255,.16); color: #fff; }
#game-content { position: relative; z-index: 1; }
.game-menu { text-align: center; padding: 10px 0; }
.game-logo { color: #c4b5fd; display: flex; justify-content: center; margin-bottom: 14px; }
.game-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: #fff; margin: 0 0 10px; letter-spacing: -.02em;
}
.game-desc { color: rgba(255,255,255,.65); font-size: .88rem; line-height: 1.5; margin: 0 0 22px; }
.game-btn-primary {
  display: block; width: 100%; margin-bottom: 10px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: 14px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(124,58,237,.4);
  transition: transform .15s ease;
}
.game-btn-primary:hover { transform: translateY(-2px); }
.game-btn-ghost {
  display: block; width: 100%;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.85);
  border: 1px solid rgba(167,139,250,.2); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  padding: 12px; border-radius: 14px;
  transition: background .15s ease;
}
.game-btn-ghost:hover { background: rgba(124,58,237,.2); }
.game-btn-sm { font-size: .8rem; padding: 8px 14px; width: auto; display: inline-block; }
.game-loading { display: flex; justify-content: center; padding: 50px; }
.game-play { text-align: center; }
.game-hud { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: .85rem; color: rgba(255,255,255,.7); }
.game-hud b { color: #c4b5fd; }
.game-listen {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #ede9fe); color: #1a0f2e;
  border: none; cursor: pointer; margin: 0 auto 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 12px 36px rgba(124,58,237,.4); transition: transform .15s ease;
}
.game-listen:hover { transform: scale(1.05); }
.game-listen span { font-size: .62rem; font-weight: 700; font-family: var(--font-mono); }
.game-extend { margin: 8px 0 20px; }
.game-options { display: grid; gap: 10px; }
.game-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(167,139,250,.15);
  color: #fff; text-align: left; transition: all .15s ease;
}
.game-option:hover:not(:disabled) { background: rgba(124,58,237,.2); border-color: rgba(167,139,250,.4); }
.game-option:disabled { cursor: default; }
.game-option.correct { background: rgba(34,197,94,.25); border-color: rgba(34,197,94,.6); }
.game-option.wrong { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.6); }
.go-title { font-weight: 600; font-size: .92rem; }
.go-artist { font-size: .75rem; color: rgba(196,181,253,.6); }
.game-final {
  font-family: var(--font-display); font-weight: 800; font-size: 4rem;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 4px;
}
.game-lb-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.game-lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04);
}
.game-lb-row.top { background: rgba(124,58,237,.18); }
.game-lb-rank { font-family: var(--font-mono); font-weight: 700; color: #c4b5fd; width: 22px; }
.game-lb-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#4c1d95,#7c3aed); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.game-lb-av img { width: 100%; height: 100%; object-fit: cover; }
.game-lb-name { flex: 1; font-size: .9rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-lb-score { font-family: var(--font-display); font-weight: 800; color: #c4b5fd; }

/* ═══════════════════════════════════════════════════
   ACHIEVEMENTS
   ═══════════════════════════════════════════════════ */
.ach-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ach-progress-txt { font-family: var(--font-mono); font-size: .78rem; color: var(--c-text3); margin-top: 4px; }
.ach-platinum-txt { color: #e8c252; font-weight: 700; letter-spacing: .1em; }
.ach-platinum-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; margin-bottom: 22px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(232,194,82,.15), rgba(124,58,237,.12));
  border: 1px solid rgba(232,194,82,.3);
}
.ach-platinum-icon { width: 48px; height: 48px; }
.ach-platinum-icon svg { width: 100%; height: 100%; }
.ach-platinum-title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #e8c252; }
.ach-platinum-sub { font-size: .8rem; color: var(--c-text3); }
.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.ach-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 16px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  transition: transform .2s ease, border-color .2s ease;
}
.ach-card.unlocked { border-color: rgba(167,139,250,.3); }
.ach-card.unlocked:hover { transform: translateY(-3px); }
.ach-card.locked { opacity: .6; }
.ach-badge { width: 44px; height: 44px; flex-shrink: 0; }
.ach-badge svg { width: 100%; height: 100%; }
.ach-info { flex: 1; min-width: 0; }
.ach-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.ach-desc { font-size: .78rem; color: var(--c-text3); margin-top: 2px; }
.ach-check { color: #22c55e; font-weight: 700; font-size: 1.1rem; }
[data-design="wave"] .ach-card {
  background: rgba(20,12,38,.5); border-color: rgba(167,139,250,.12);
}
.ach-lb { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ach-lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.ach-lb-row.platinum { background: linear-gradient(135deg, rgba(232,194,82,.12), rgba(124,58,237,.08)); border-color: rgba(232,194,82,.3); }
.ach-lb-rank { font-family: var(--font-mono); font-weight: 700; color: var(--c-violet2); width: 24px; }
.ach-lb-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#4c1d95,#7c3aed); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.ach-lb-av img { width: 100%; height: 100%; object-fit: cover; }
.ach-lb-name { flex: 1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-lb-plat { font-family: var(--font-mono); font-size: .6rem; color: #e8c252; background: rgba(232,194,82,.15); padding: 2px 7px; border-radius: 999px; letter-spacing: .08em; }
.ach-lb-cnt { font-family: var(--font-display); font-weight: 800; color: var(--c-violet2); }
[data-design="wave"] .ach-lb-row { background: rgba(20,12,38,.5); border-color: rgba(167,139,250,.12); }

/* ═══════════════════════════════════════════════════
   SOCIAL FEED
   ═══════════════════════════════════════════════════ */
.feed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.feed-sort{display:flex;gap:6px}
.feed-sort-btn{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text3);
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .2s}
.feed-sort-btn.active{background:var(--c-purple);border-color:transparent;color:#fff}
[data-design="wave"] .feed-sort-btn{background:rgba(20,12,38,.5);border-color:rgba(167,139,250,.15);color:rgba(196,181,253,.7)}
[data-design="wave"] .feed-sort-btn.active{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff}

.feed-compose-trigger{display:flex;align-items:center;gap:12px;width:100%;max-width:580px;margin:0 auto 20px;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;
  padding:14px 18px;cursor:pointer;transition:all .2s;color:var(--c-text3);font-size:.92rem;text-align:left}
.feed-compose-trigger:hover{border-color:var(--c-border2)}
[data-design="wave"] .feed-compose-trigger{background:rgba(20,12,38,.5);border-color:rgba(167,139,250,.15)}
.fct-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#4c1d95,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fct-av img{width:100%;height:100%;object-fit:cover}

.post-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:18px;padding:18px;margin-bottom:16px;max-width:580px;margin-left:auto;margin-right:auto}
[data-design="wave"] .post-card{background:rgba(20,12,38,.5);border-color:rgba(167,139,250,.12)}
.post-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.post-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,#4c1d95,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.post-av img{width:100%;height:100%;object-fit:cover}
.post-meta{flex:1;min-width:0}
.post-author{font-weight:700;font-size:.95rem;cursor:pointer}
.post-author:hover{color:var(--c-violet2)}
.post-time{font-size:.74rem;color:var(--c-text3)}
.post-del{background:none;border:none;color:var(--c-text3);cursor:pointer;font-size:1rem;padding:4px}
.post-del:hover{color:#f87171}
.post-content{font-size:.95rem;line-height:1.5;margin-bottom:12px;white-space:pre-wrap;word-break:break-word}
.post-media{margin-bottom:12px;border-radius:14px;overflow:hidden}
.post-media img{cursor:pointer;display:block}
.post-media-grid{display:grid;gap:4px}
.post-media-grid img{width:100%;aspect-ratio:1;object-fit:cover;max-height:340px}
.post-media-grid:has(img:only-child){grid-template-columns:1fr}
.post-media-grid:has(img:only-child) img{aspect-ratio:auto;max-height:420px;width:100%;object-fit:contain;background:#0a0612}
.post-media-grid:not(:has(img:only-child)){grid-template-columns:1fr 1fr}
.post-media-carousel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory}
.post-media-carousel img{flex:0 0 auto;width:88%;scroll-snap-align:center;border-radius:12px;max-height:360px;object-fit:cover}
.post-track{display:flex;align-items:center;gap:12px;background:var(--c-bg2);border:1px solid var(--c-border);
  border-radius:14px;padding:10px;margin-bottom:12px;cursor:pointer;transition:all .2s}
.post-track:hover{border-color:var(--c-border2)}
[data-design="wave"] .post-track{background:rgba(10,6,22,.5);border-color:rgba(167,139,250,.12)}
.post-track-cover{width:52px;height:52px;border-radius:10px;overflow:hidden;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,#4c1d95,#7c3aed)}
.post-track-cover img{width:100%;height:100%;object-fit:cover}
.post-track-play{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s}
.post-track:hover .post-track-play{opacity:1}
.post-track-title{font-weight:600;font-size:.9rem}
.post-track-artist{font-size:.78rem;color:var(--c-violet2)}
.post-actions{display:flex;gap:8px;border-top:1px solid var(--c-border);padding-top:10px}
.post-act{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--c-text3);font-size:.85rem;padding:6px 12px;border-radius:8px;transition:all .15s}
.post-act svg{width:18px;height:18px}
.post-act:hover{background:var(--c-surface2);color:var(--c-text)}
.post-act.liked{color:var(--c-pink)}
.post-comments{margin-top:12px;border-top:1px solid var(--c-border);padding-top:12px}
.comment-compose{display:flex;gap:8px;margin-bottom:12px}
.comment-input{flex:1;background:var(--c-bg2);border:1px solid var(--c-border);border-radius:999px;
  padding:8px 14px;color:var(--c-text);font-size:.85rem}
.comment-send{background:var(--c-purple);border:none;color:#fff;width:34px;border-radius:50%;cursor:pointer}
.comment{display:flex;gap:10px;margin-bottom:10px}
.comment-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#4c1d95,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700}
.comment-av img{width:100%;height:100%;object-fit:cover}
.comment-body{font-size:.86rem;line-height:1.4}
.comment-body b{margin-right:6px}

/* lightbox */
.img-lightbox{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:30px}
.img-lightbox img{max-width:95%;max-height:95%;border-radius:8px}

/* ═══════════════════════════════════════════════════
   COMPOSER
   ═══════════════════════════════════════════════════ */
.composer-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px}
.composer-box{width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;border-radius:22px;padding:24px;
  background:radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.2),transparent 60%),linear-gradient(150deg,#160e2c,#0a0612);
  border:1px solid rgba(167,139,250,.2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.composer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.composer-head h3{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.composer-close{background:rgba(255,255,255,.08);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer}
.composer-text{width:100%;min-height:90px;background:rgba(0,0,0,.3);border:1px solid rgba(167,139,250,.15);
  border-radius:14px;padding:14px;color:var(--c-text);font-family:var(--font-body);font-size:.95rem;resize:vertical}
.composer-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cm-thumb{position:relative;width:80px;height:80px;border-radius:10px;overflow:hidden}
.cm-thumb img{width:100%;height:100%;object-fit:cover}
.cm-thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.7);border:none;color:#fff;cursor:pointer;font-size:.7rem}
.composer-track-slot{margin-top:10px}
.composer-track-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(124,58,237,.2);border:1px solid rgba(167,139,250,.3);
  border-radius:999px;padding:6px 14px;font-size:.82rem;color:#c4b5fd}
.composer-track-chip button{background:none;border:none;color:#c4b5fd;cursor:pointer}
.composer-layout{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.8rem;color:var(--c-text3)}
.cl-btn{background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.15);color:var(--c-text2);
  padding:5px 12px;border-radius:999px;cursor:pointer;font-size:.78rem}
.cl-btn.active{background:var(--c-purple);color:#fff;border-color:transparent}
.composer-toolbar{display:flex;align-items:center;gap:10px;margin-top:16px}
.composer-tool{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.15);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-violet2)}
.composer-tool svg{width:20px;height:20px}
.composer-tool:hover{background:rgba(124,58,237,.2)}
.composer-vis{background:rgba(0,0,0,.3);border:1px solid rgba(167,139,250,.15);color:var(--c-text);border-radius:10px;padding:8px 10px;font-size:.82rem}
.composer-post{margin-left:auto;background:linear-gradient(135deg,#7c3aed,#a78bfa);border:none;color:#fff;
  font-family:var(--font-display);font-weight:700;padding:11px 24px;border-radius:999px;cursor:pointer;box-shadow:0 8px 24px rgba(124,58,237,.4)}

/* ═══════════════════════════════════════════════════
   FRIENDS MODAL
   ═══════════════════════════════════════════════════ */
.friends-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px}
.friends-box{width:460px;max-width:95vw;max-height:85vh;display:flex;flex-direction:column;border-radius:22px;padding:22px;
  background:radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.2),transparent 60%),linear-gradient(150deg,#160e2c,#0a0612);
  border:1px solid rgba(167,139,250,.2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.friends-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.friends-head h3{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.friends-close{background:rgba(255,255,255,.08);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer}
.friends-search{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.3);border:1px solid rgba(167,139,250,.15);
  border-radius:999px;padding:10px 16px;margin-bottom:14px}
.friends-search svg{width:18px;height:18px;color:var(--c-text3);flex-shrink:0}
.friends-search input{flex:1;background:none;border:none;color:var(--c-text);font-size:.9rem;outline:none}
#friends-content{overflow-y:auto;flex:1}
.friends-section-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-text3);margin:14px 0 8px}
.friend-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;transition:background .15s}
.friend-row:hover{background:rgba(124,58,237,.1)}
.friend-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,#4c1d95,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.friend-av img{width:100%;height:100%;object-fit:cover}
.friend-info{flex:1;min-width:0}
.friend-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-handle{font-size:.74rem;color:var(--c-text3)}
.friend-btn-add,.friend-btn-accept,.friend-btn-invite{background:var(--c-purple);border:none;color:#fff;
  font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.friend-btn-invite{background:rgba(124,58,237,.25);color:#c4b5fd;padding:7px 12px}
.friend-btn-decline{background:rgba(255,255,255,.06);border:none;color:var(--c-text3);width:30px;height:30px;border-radius:50%;cursor:pointer}
.friend-btn-decline:hover{color:#f87171}
.friend-status-tag{font-size:.72rem;color:var(--c-text3);font-family:var(--font-mono)}

/* ═══════════════════════════════════════════════════
   LISTEN-TOGETHER room bar + leaderboard scope
   ═══════════════════════════════════════════════════ */
.room-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--player-h) + 14px);z-index:70;
  display:flex;align-items:center;gap:12px;background:rgba(20,14,38,.95);backdrop-filter:blur(20px);
  border:1px solid rgba(167,139,250,.3);border-radius:999px;padding:8px 8px 8px 18px;
  box-shadow:0 16px 50px rgba(0,0,0,.5),0 0 40px rgba(124,58,237,.25)}
.room-bar-live{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:roomPulse 1.5s ease-in-out infinite}
@keyframes roomPulse{0%,100%{opacity:1}50%{opacity:.4}}
.room-bar-text{font-size:.82rem;font-weight:600;white-space:nowrap}
.room-bar-members{display:flex}
.rbm-av{width:26px;height:26px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#4c1d95,#7c3aed);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700;margin-left:-8px;border:2px solid #160e2c}
.rbm-av img{width:100%;height:100%;object-fit:cover}
.room-bar-leave{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:.76rem;padding:7px 14px;border-radius:999px;cursor:pointer}
.room-bar-leave:hover{background:rgba(239,68,68,.3)}
.room-code{font-family:var(--font-display);font-weight:800;font-size:2.4rem;letter-spacing:.3em;
  background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lb-scope{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.lb-scope-btn{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.15);color:var(--c-text2);
  padding:6px 16px;border-radius:999px;cursor:pointer}
.lb-scope-btn.active{background:var(--c-purple);color:#fff;border-color:transparent}

@media(max-width:700px){
  .room-bar{width:calc(100vw - 24px);justify-content:space-between}
  .post-media-grid:not(:has(img:only-child)){grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════════════════════
   ROOMS LIST PAGE + room panel (slide-out menus)
   ═══════════════════════════════════════════════════ */
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.room-card{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;cursor:pointer;
  background:var(--c-surface);border:1px solid var(--c-border);transition:all .2s}
.room-card:hover{transform:translateY(-3px);border-color:var(--c-border2);box-shadow:0 14px 36px rgba(0,0,0,.4)}
[data-design="wave"] .room-card{background:rgba(20,12,38,.5);border-color:rgba(167,139,250,.12)}
[data-design="wave"] .room-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 40px hsla(var(--wave-hue),80%,55%,.2)}
.room-card-live{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:roomPulse 1.5s ease-in-out infinite}
.room-card-cover{width:60px;height:60px;border-radius:14px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4c1d95,#7c3aed)}
.room-card-cover img{width:100%;height:100%;object-fit:cover}
.room-card-info{flex:1;min-width:0}
.room-card-title{font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-card-sub{font-size:.78rem;color:var(--c-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.room-card-members{font-size:.72rem;color:var(--c-violet2);margin-top:4px;font-family:var(--font-mono)}

/* room bar additions */
.room-bar-icon{background:rgba(255,255,255,.08);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.room-bar-icon:hover{background:rgba(124,58,237,.3)}
.room-bar-members{cursor:pointer}
.rbm-more{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:rgba(124,58,237,.4);color:#fff;font-size:.68rem;font-weight:700;margin-left:-8px;border:2px solid #160e2c}
.room-panel{position:absolute;bottom:calc(100% + 12px);right:0;width:280px;max-width:90vw;
  background:rgba(20,14,38,.98);border:1px solid rgba(167,139,250,.25);border-radius:16px;padding:14px;
  backdrop-filter:blur(20px);box-shadow:0 20px 50px rgba(0,0,0,.6);animation:ctxIn .15s ease}
.room-panel-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;margin-bottom:10px}
.room-member-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.room-member-name{flex:1;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-host-tag{font-size:.62rem;color:#c4b5fd;background:rgba(124,58,237,.25);padding:1px 7px;border-radius:999px;font-family:var(--font-mono)}
.room-give-host{font-size:.68rem;background:rgba(124,58,237,.25);border:none;color:#c4b5fd;padding:4px 9px;border-radius:999px;cursor:pointer;white-space:nowrap}
.room-give-host:hover{background:rgba(124,58,237,.45);color:#fff}
.room-set-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text3);margin:12px 0 6px}
.room-set-opts{display:flex;flex-direction:column;gap:5px}
.rso{background:rgba(255,255,255,.05);border:1px solid rgba(167,139,250,.15);color:var(--c-text2);
  padding:8px 12px;border-radius:10px;cursor:pointer;font-size:.82rem;text-align:left;transition:all .15s}
.rso:hover{background:rgba(124,58,237,.15)}
.rso.on{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;border-color:transparent}