/* ═══════════════════════════════════════════════════════════════════
   OOKI MUSIC — Design System v1.0
   Cinematic · Premium · Futuristic
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --ooki-red:         #FF0A3D;
  --ooki-red-soft:    #FF3362;
  --ooki-red-dim:     rgba(255,10,61,0.15);
  --ooki-red-glow:    rgba(255,10,61,0.35);

  /* Neutrals */
  --bg-void:          #000000;
  --bg-deep:          #080808;
  --bg-base:          #0C0C0C;
  --bg-card:          #111111;
  --bg-card-hover:    #161616;
  --bg-elevated:      #1A1A1A;
  --bg-overlay:       rgba(0,0,0,0.85);

  /* Borders */
  --border-subtle:    rgba(255,255,255,0.06);
  --border-default:   rgba(255,255,255,0.10);
  --border-strong:    rgba(255,255,255,0.18);
  --border-red:       rgba(255,10,61,0.40);

  /* Text */
  --text-primary:     #FFFFFF;
  --text-secondary:   rgba(255,255,255,0.65);
  --text-muted:       rgba(255,255,255,0.35);
  --text-disabled:    rgba(255,255,255,0.20);
  --text-red:         #FF0A3D;

  /* Status */
  --status-green:     #00E676;
  --status-green-dim: rgba(0,230,118,0.15);
  --status-amber:     #FFB300;
  --status-amber-dim: rgba(255,179,0,0.15);
  --status-red:       #FF0A3D;
  --status-blue:      #448AFF;
  --status-blue-dim:  rgba(68,138,255,0.15);
  --status-purple:    #7C4DFF;
  --status-purple-dim:rgba(124,77,255,0.15);

  /* Typography */
  --font-display:     'Space Grotesk', sans-serif;
  --font-body:        'Inter', sans-serif;
  --font-mono:        'Space Mono', monospace;

  /* Nav (dark mode defaults — overridden by light mode tokens) */
  --nav-bg:           rgba(0,0,0,0.92);
  --nav-border:       rgba(255,255,255,0.06);

  /* Sizing */
  --nav-height:       64px;
  --player-height:    80px;
  --sidebar-width:    240px;
  --sidebar-collapsed:64px;

  /* Radii */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-2xl:       32px;
  --radius-full:      9999px;

  /* Shadows */
  --shadow-card:      0 4px 24px rgba(0,0,0,0.6);
  --shadow-elevated:  0 8px 48px rgba(0,0,0,0.8);
  --shadow-red:       0 0 40px rgba(255,10,61,0.20);
  --shadow-glow:      0 0 80px rgba(255,10,61,0.12);

  /* Transitions */
  --transition-fast:  0.15s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.4s ease;

  /* Z-Index */
  --z-player:   1000;
  --z-nav:      900;
  --z-sidebar:  800;
  --z-modal:    1100;
  --z-toast:    1200;
  --z-dropdown: 850;

  /* ── Player surface colours ───────────────────────────────────── */
  --player-bg:              rgba(10,10,10,0.98);
  --player-border:          rgba(255,255,255,0.07);
  --player-text-primary:    #ffffff;
  --player-text-secondary:  rgba(255,255,255,0.65);
  --player-text-muted:      rgba(255,255,255,0.45);
  --player-btn-bg:          rgba(255,255,255,0.07);
  --player-bar-track:       rgba(255,255,255,0.12);
  --player-play-bg:         #ffffff;
  --player-play-color:      #0A0A0A;
  --player-art-bg:          #1a1a1a;
}

/* ── Light Mode Tokens ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-void:          #F5F5F7;
  --bg-deep:          #EBEBEF;
  --bg-base:          #FFFFFF;
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #F0F0F5;
  --bg-elevated:      #E8E8EE;
  --bg-overlay:       rgba(255,255,255,0.92);

  /* Light-mode nav background — replaces hardcoded rgba(0,0,0,0.92) */
  --nav-bg:           rgba(255,255,255,0.94);
  --nav-border:       rgba(0,0,0,0.08);

  --border-subtle:    rgba(0,0,0,0.06);
  --border-default:   rgba(0,0,0,0.10);
  --border-strong:    rgba(0,0,0,0.18);

  --text-primary:     #0A0A0A;
  --text-secondary:   rgba(0,0,0,0.65);
  --text-muted:       rgba(0,0,0,0.40);
  --text-disabled:    rgba(0,0,0,0.25);

  --shadow-card:      0 4px 24px rgba(0,0,0,0.10);
  --shadow-elevated:  0 8px 48px rgba(0,0,0,0.15);
  --shadow-red:       0 0 40px rgba(255,10,61,0.15);
  --shadow-glow:      0 0 80px rgba(255,10,61,0.08);

  /* ── Player surface colours (light mode overrides) ────────────── */
  --player-bg:              rgba(245,245,247,0.98);
  --player-border:          rgba(0,0,0,0.10);
  --player-text-primary:    #0A0A0A;
  --player-text-secondary:  rgba(0,0,0,0.65);
  --player-text-muted:      rgba(0,0,0,0.45);
  --player-btn-bg:          rgba(0,0,0,0.06);
  --player-bar-track:       rgba(0,0,0,0.14);
  --player-play-bg:         #0A0A0A;
  --player-play-color:      #ffffff;
  --player-art-bg:          #E0E0E6;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — GLOBAL NAV FIX (v3 — maximum specificity)
   Uses html[data-theme="light"] prefix to guarantee override of any
   hardcoded inline-style or page-specific CSS on all 48 pages.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Solid white background on EVERY nav element in light mode ── */
html[data-theme="light"] nav,
html[data-theme="light"] header {
  background: #F5F5F7 !important;
  background-color: #F5F5F7 !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 2. Specific nav classes (belt + braces) ───────────────────── */
html[data-theme="light"] .public-nav,
html[data-theme="light"] .public-nav.scrolled,
html[data-theme="light"] .public-nav:not(.scrolled),
html[data-theme="light"] .story-nav,
html[data-theme="light"] .story-nav.scrolled,
html[data-theme="light"] .story-nav:not(.scrolled),
html[data-theme="light"] .sonic-nav,
html[data-theme="light"] .sonic-nav.scrolled,
html[data-theme="light"] .store-nav,
html[data-theme="light"] .store-nav.scrolled,
html[data-theme="light"] .search-nav,
html[data-theme="light"] .artists-nav,
html[data-theme="light"] .inv-nav,
html[data-theme="light"] .inv-nav.scrolled,
html[data-theme="light"] .portals-nav,
html[data-theme="light"] .portals-header,
html[data-theme="light"] .guide-nav,
html[data-theme="light"] .guides-nav,
html[data-theme="light"] .artist-page-nav,
html[data-theme="light"] .artist-page-nav.scrolled,
html[data-theme="light"] .top-nav,
html[data-theme="light"] .main-nav,
html[data-theme="light"] .dev-nav,
html[data-theme="light"] .app-nav,
html[data-theme="light"] .admin-nav,
html[data-theme="light"] .dashboard-nav,
html[data-theme="light"] .auth-nav,
html[data-theme="light"] .release-nav,
html[data-theme="light"] .capsule-nav,
html[data-theme="light"] .review-nav,
html[data-theme="light"] .ooki-nav,
html[data-theme="light"] nav[class*="-nav"] {
  background: #F5F5F7 !important;
  background-color: #F5F5F7 !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.07) !important;
}

/* ── 3. Nav text / links / icons — all dark in light mode ─────── */
html[data-theme="light"] nav a,
html[data-theme="light"] nav span,
html[data-theme="light"] nav button,
html[data-theme="light"] nav i,
html[data-theme="light"] nav label,
html[data-theme="light"] .nav-logo-text,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .nav-back {
  color: rgba(10,10,10,0.80) !important;
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .nav-link.active {
  color: var(--ooki-red) !important;
}

/* ── 4. Keep brand red dot red in both modes ──────────────────── */
html[data-theme="light"] .nav-logo-text span[style*="color"],
html[data-theme="light"] nav span[style*="color:var(--ooki-red)"] {
  color: var(--ooki-red) !important;
}

/* ── 5. Ghost button adjustments ──────────────────────────────── */
html[data-theme="light"] .btn-ghost {
  color: rgba(10,10,10,0.70) !important;
  border-color: rgba(0,0,0,0.15) !important;
  background: transparent !important;
}
html[data-theme="light"] .btn-ghost:hover {
  color: #0A0A0A !important;
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.25) !important;
}

/* ── 6. Nav icon buttons ──────────────────────────────────────── */
html[data-theme="light"] .nav-icon-btn,
html[data-theme="light"] .nav-icon-btn i,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .theme-toggle i {
  color: rgba(10,10,10,0.60) !important;
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .nav-icon-btn:hover,
html[data-theme="light"] .theme-toggle:hover {
  background: rgba(0,0,0,0.08) !important;
  border-color: var(--ooki-red) !important;
  color: var(--ooki-red) !important;
}

/* Light-mode hero section — suppress the red glow bleed */
[data-theme="light"] .hero { background: #F5F5F7 !important; }
[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 60% 70% at 70% 50%, rgba(255,10,61,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,10,61,0.03) 0%, transparent 50%) !important;
}
[data-theme="light"] .hero-grid {
  background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px) !important;
}
[data-theme="light"] .hero-title { color: #0A0A0A !important; }
[data-theme="light"] .hero-title em { color: var(--ooki-red) !important; }
[data-theme="light"] .hero-eyebrow { color: var(--ooki-red) !important; }
[data-theme="light"] .hero-stat-val { color: #0A0A0A !important; }
[data-theme="light"] .hero-stat-label { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .hero-stats { border-top-color: rgba(0,0,0,0.08) !important; }

/* Light-mode hero now-playing widget */
[data-theme="light"] .hero-now-playing { color: #0A0A0A !important; }

/* Light-mode vinyl/visual area */
[data-theme="light"] .hero-vinyl-bg { opacity: 0.15 !important; }

/* ── Theme Toggle Button ──────────────────────────────────────────── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 15px;
}
.theme-toggle:hover {
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
  color: var(--ooki-red);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Full viewport width — overflow-x hidden prevents scrollbar gutter
     from being included in width calculations that cascade to children */
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Match html dimensions exactly so .ooki-shell width:100% works */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Global Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Typography Scale ─────────────────────────────────────────────── */
.display-2xl { font-family: var(--font-display); font-size: clamp(48px,6vw,96px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.display-xl  { font-family: var(--font-display); font-size: clamp(36px,5vw,72px);  font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.display-lg  { font-family: var(--font-display); font-size: clamp(28px,4vw,56px);  font-weight: 600; line-height: 1.10; letter-spacing: -0.02em; }
.display-md  { font-family: var(--font-display); font-size: clamp(22px,3vw,40px);  font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.display-sm  { font-family: var(--font-display); font-size: clamp(18px,2.5vw,28px);font-weight: 600; line-height: 1.2; }
.heading-lg  { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; }
.heading-md  { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; }
.heading-sm  { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; }
.label-xl    { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.label-lg    { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.body-lg     { font-size: 16px; line-height: 1.6; }
.body-md     { font-size: 14px; line-height: 1.6; }
.body-sm     { font-size: 12px; line-height: 1.5; }
.mono        { font-family: var(--font-mono); }
.text-red    { color: var(--ooki-red); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ── Layout Shell ─────────────────────────────────────────────────── */
.ooki-shell {
  display: grid;
  grid-template-areas:
    "nav nav"
    "sidebar main"
    "player player";
  grid-template-rows: var(--nav-height) 1fr var(--player-height);
  grid-template-columns: var(--sidebar-width) 1fr;
  /* Use 100vw anchored to html (which has overflow-x:hidden) so scrollbar
     gutter never causes overflow. Falls back cleanly since html matches 100vw. */
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  overflow: hidden;
}

.ooki-shell.no-sidebar {
  grid-template-areas:
    "nav nav"
    "main main"
    "player player";
  grid-template-columns: 0 1fr;
}

.ooki-shell.no-player {
  grid-template-areas:
    "nav nav"
    "sidebar main";
  grid-template-rows: var(--nav-height) 1fr;
  /* Prevent any JS-injected extra children from creating implicit grid rows
     that would steal height from the 1fr main area */
  grid-auto-rows: 0;
  overflow: hidden;
}

/* ── Top Navigation Bar ───────────────────────────────────────────── */
/* Nav background token — dark default, overridden in light mode */
:root { --nav-bg: rgba(0,0,0,0.92); --nav-border: rgba(255,255,255,0.06); }

.ooki-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}

.ooki-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ooki-nav .nav-logo img {
  height: 32px;
  width: auto;
  /* NOTE: dark-mode visibility is now fixed at the source by swapping to
     pre-rendered -dark.png variants (see /js/ooki-logo-theme.js), which
     paints the artwork's transparent "white" holes as real opaque white
     pixels instead of relying on a CSS glow. No filter needed here. */
}

/* Generic fallback for any page that doesn't scope the logo under
   .ooki-nav (e.g. pages using .nav-logo directly, or the .nav-brand-logo
   variant on index.html/search.html/sonic-stories-app.html) — keeps the
   same sizing applying sitewide from this one shared file. */
.nav-logo img,
.nav-brand-logo {
  /* dark-mode visibility handled by ooki-logo-theme.js image swap */
}

.ooki-nav .nav-logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.ooki-nav .nav-logo-dot {
  color: var(--ooki-red);
}

.nav-search {
  flex: 1;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.nav-search input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 8px 16px 8px 40px;
  color: var(--text-primary);
  font-size: 13px;
  transition: var(--transition-base);
  outline: none;
}

.nav-search input:focus {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

.nav-search .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
  transition: var(--transition-fast);
  position: relative;
}

.nav-icon-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.nav-icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--ooki-red);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-void);
}

.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 2px solid var(--border-default);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary);
}

.nav-avatar:hover { border-color: var(--ooki-red); }

/* Fallback glyph while [data-user-initials] is still empty — e.g. during
   the brief window before ooki-supabase.js's async getSession() resolves
   and calls populateUser(), or if it never resolves (invalid/expired
   session, a stalled network request, or any other silent failure path).
   Without this, the element renders as a flat, borderless-looking blank
   circle with zero visual affordance ("broken avatar" bug report) until
   JS successfully populates text into it. :empty stops matching the
   instant textContent is set, so this never shows over real initials. */
.nav-avatar:empty::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; /* solid style */
  content: '\f007';  /* fa-user */
  font-size: 14px;
  color: var(--text-muted);
}

/* Same blank-circle issue on the larger profile-header avatar used by
   my-library.html ([data-user-avatar-large]) — this attribute is never
   targeted by populateUser()/wireAuthUI() (only [data-user-avatar] /
   [data-user-initials] are), so it was always a permanently-empty
   gradient circle regardless of auth state, not just a loading-race. A
   JS fix would need a new populate hook; this CSS fallback is the
   minimal, safe fix that matches what the element visually should be. */
[data-user-avatar-large]:empty::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f007';
  font-size: 20px;
  color: rgba(255,255,255,0.85);
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.ooki-sidebar {
  grid-area: sidebar;
  background: var(--bg-base);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  min-width: 0;   /* prevent grid blowout */
  width: 100%;
}

.sidebar-section {
  padding: 20px 12px 8px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-disabled);
  padding: 0 8px;
  margin-bottom: 6px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.sidebar-nav-item.active {
  background: var(--ooki-red-dim);
  color: var(--text-primary);
  border: 1px solid var(--border-red);
}

.sidebar-nav-item.active .nav-icon { color: var(--ooki-red); }

.sidebar-nav-item .nav-icon {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-nav-item .nav-badge {
  margin-left: auto;
  background: var(--ooki-red-dim);
  color: var(--ooki-red);
  border: 1px solid var(--border-red);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
}

.sidebar-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 8px 12px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* ── Main Content ─────────────────────────────────────────────────── */
.ooki-main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-deep);
  min-width: 0;   /* prevent grid blowout — 1fr column must be able to shrink */
  width: 100%;
}

.page-header {
  padding: 32px 32px 0;
  margin-bottom: 24px;
}

.page-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.page-content {
  padding: 0 32px 120px;
}

/* ── Music Player ─────────────────────────────────────────────────── */
.ooki-player {
  grid-area: player;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--player-bg);
  backdrop-filter: blur(40px);
  border-top: 1px solid var(--player-border, var(--border-subtle));
  position: relative;
  z-index: var(--z-player);
  color: var(--player-text-primary);
}

.player-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 280px;
  flex-shrink: 0;
}

.player-track-art {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.player-track-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-track-art .art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-muted);
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
}

.player-track-info { flex: 1; overflow: hidden; }

.player-track-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-track-artist {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.player-track-like {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.player-track-like:hover,
.player-track-like.liked { color: var(--ooki-red); }

.player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.player-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.player-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.player-btn:hover { color: var(--text-primary); }

.player-btn.play-btn {
  width: 40px;
  height: 40px;
  background: var(--text-primary);
  color: var(--bg-void);
  font-size: 16px;
}

.player-btn.play-btn:hover {
  background: var(--ooki-red);
  color: var(--text-primary);
  transform: scale(1.05);
}

.player-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

.player-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.progress-bar {
  flex: 1;
  height: 3px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
}

.progress-bar:hover { height: 5px; }

.progress-fill {
  height: 100%;
  background: var(--text-primary);
  border-radius: var(--radius-full);
  position: relative;
  transition: width 0.1s linear;
}

.progress-bar:hover .progress-fill { background: var(--ooki-red); }

.progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--text-primary);
  border-radius: var(--radius-full);
  opacity: 0;
  transition: var(--transition-fast);
}

.progress-bar:hover .progress-fill::after { opacity: 1; }

.player-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 280px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-volume-bar {
  width: 80px;
  height: 3px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
}

.player-volume-fill {
  height: 100%;
  background: var(--text-secondary);
  border-radius: var(--radius-full);
  width: 70%;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
}

.card:hover { border-color: var(--border-default); }

.card-hover:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.card-body { padding: 20px; }
.card-body-sm { padding: 14px; }
.card-body-lg { padding: 28px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Stat Cards ───────────────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition-base);
}

.stat-card:hover { border-color: var(--border-default); }

.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.stat-delta { font-size: 12px; font-weight: 500; }
.stat-delta.up { color: var(--status-green); }
.stat-delta.down { color: var(--status-red); }
.stat-delta.neutral { color: var(--text-muted); }

/* ── Track Row ────────────────────────────────────────────────────── */
.track-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  cursor: pointer;
}

.track-row:hover {
  background: var(--bg-elevated);
}

.track-row:hover .track-number { display: none; }
.track-row:hover .track-play-hover { display: flex !important; }

.track-number {
  width: 40px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.track-play-hover {
  display: none;
  width: 40px;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 16px;
}

.track-info { display: flex; align-items: center; gap: 12px; overflow: hidden; }

.track-cover {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  flex-shrink: 0;
  overflow: hidden;
}

.track-cover img { width: 100%; height: 100%; object-fit: cover; }

.track-meta { overflow: hidden; }

.track-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-plays {
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-mono);
  text-align: right;
}

.track-duration {
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-mono);
  text-align: right;
  min-width: 40px;
}

.track-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: var(--transition-fast);
}

.track-row:hover .track-actions { opacity: 1; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  transition: var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--ooki-red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--ooki-red-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--ooki-red-glow);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--bg-elevated);
}

.btn-danger {
  background: rgba(255,10,61,0.12);
  color: var(--ooki-red);
  border: 1px solid var(--border-red);
}

.btn-danger:hover {
  background: rgba(255,10,61,0.20);
}

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius-lg); }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
.btn-icon-sm { padding: 6px; width: 30px; height: 30px; }

.btn-white {
  background: #fff;
  color: #000;
  font-weight: 700;
}
.btn-white:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}

/* ── Form Elements ────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; }

.form-input,
.form-select,
.form-textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  transition: var(--transition-fast);
  outline: none;
  width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--ooki-red);
  box-shadow: 0 0 0 3px var(--ooki-red-dim);
}

.form-input::placeholder { color: var(--text-disabled); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select { cursor: pointer; }

.form-error { font-size: 12px; color: var(--ooki-red); margin-top: 4px; }
.form-hint  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Input with icon */
.input-wrapper { position: relative; }
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}
.input-wrapper .form-input { padding-left: 40px; }
.input-icon-right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
}
.input-icon-right:hover { color: var(--text-secondary); }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.badge-green  { background: var(--status-green-dim);  color: var(--status-green);  border: 1px solid rgba(0,230,118,0.25); }
.badge-red    { background: var(--ooki-red-dim);       color: var(--ooki-red);      border: 1px solid var(--border-red); }
.badge-amber  { background: var(--status-amber-dim);   color: var(--status-amber);  border: 1px solid rgba(255,179,0,0.25); }
.badge-blue   { background: var(--status-blue-dim);    color: var(--status-blue);   border: 1px solid rgba(68,138,255,0.25); }
.badge-purple { background: var(--status-purple-dim);  color: var(--status-purple); border: 1px solid rgba(124,77,255,0.25); }
.badge-neutral{ background: var(--bg-elevated);        color: var(--text-muted);    border: 1px solid var(--border-default); }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ── Tables ───────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  vertical-align: middle;
}

.data-table tbody tr:hover { background: var(--bg-elevated); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0;
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.tab:hover { color: var(--text-secondary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--ooki-red); }

/* ── Modals ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-base);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-elevated);
  transform: translateY(20px);
  transition: var(--transition-base);
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-subtle); display: flex; gap: 10px; justify-content: flex-end; }

/* ── Toast Notifications ──────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  bottom: calc(var(--player-height) + 20px);
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: var(--z-toast);
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: 13px;
  box-shadow: var(--shadow-card);
  animation: toastIn 0.3s ease;
  max-width: 320px;
}

.toast.success { border-color: rgba(0,230,118,0.3); }
.toast.error   { border-color: var(--border-red); }
.toast-icon    { font-size: 16px; flex-shrink: 0; }

@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Dropdowns ────────────────────────────────────────────────────── */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 6px;
  min-width: 180px;
  box-shadow: var(--shadow-card);
  z-index: var(--z-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: var(--transition-fast);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.dropdown-item.danger { color: var(--ooki-red); }
.dropdown-item.danger:hover { background: var(--ooki-red-dim); }

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* ── Avatars ──────────────────────────────────────────────────────── */
.avatar {
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-secondary);
}

.avatar-sm  { width: 28px; height: 28px; font-size: 11px; }
.avatar-md  { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg  { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl  { width: 80px; height: 80px; font-size: 24px; }
.avatar-xxl { width: 120px; height: 120px; font-size: 36px; }

.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Artist Cards ─────────────────────────────────────────────────── */
.artist-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
}

.artist-card:hover {
  border-color: var(--border-default);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.artist-card .artist-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  margin: 0 auto 14px;
  border: 2px solid var(--border-default);
  overflow: hidden;
  background: var(--bg-elevated);
}

.artist-card:hover .artist-avatar { border-color: var(--ooki-red); }

.artist-card .artist-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.artist-card .artist-genre {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Album / Music Cards ──────────────────────────────────────────── */
.music-card {
  cursor: pointer;
  transition: var(--transition-base);
}

.music-card:hover { transform: translateY(-4px); }

.music-card-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
}

.music-card-art img { width: 100%; height: 100%; object-fit: cover; }

.music-card-art .play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-fast);
}

.music-card:hover .play-overlay { opacity: 1; }

.play-circle {
  width: 48px;
  height: 48px;
  background: var(--ooki-red);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 4px 20px var(--ooki-red-glow);
}

.music-card-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ── Grids ────────────────────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── Section ──────────────────────────────────────────────────────── */
.section { margin-bottom: 40px; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

/* ── Hero Sections ────────────────────────────────────────────────── */
.ooki-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-void);
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,10,61,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Charts ───────────────────────────────────────────────────────── */
.chart-container {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* ── Progress Bars ────────────────────────────────────────────────── */
.progress-track {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-track-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--ooki-red);
  transition: width 0.5s ease;
}

.progress-track-fill.green  { background: var(--status-green); }
.progress-track-fill.blue   { background: var(--status-blue); }
.progress-track-fill.purple { background: var(--status-purple); }

/* ── Code Blocks ──────────────────────────────────────────────────── */
.code-block {
  background: var(--bg-void);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  line-height: 1.7;
  color: var(--text-secondary);
}

.code-block .token-key    { color: #79c0ff; }
.code-block .token-string { color: #a5d6ff; }
.code-block .token-number { color: #79c0ff; }
.code-block .token-bool   { color: var(--ooki-red-soft); }
.code-block .comment      { color: var(--text-disabled); }

/* ── Toggle Switch ────────────────────────────────────────────────── */
.toggle {
  width: 40px;
  height: 22px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-default);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.toggle.on {
  background: var(--ooki-red);
  border-color: var(--ooki-red);
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.toggle.on::after {
  left: calc(100% - 18px);
  background: #fff;
}

/* ── Role Chip ────────────────────────────────────────────────────── */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.role-chip.super-admin { background: var(--ooki-red-dim);       color: var(--ooki-red);      border: 1px solid var(--border-red); }
.role-chip.admin       { background: var(--status-amber-dim);   color: var(--status-amber);  border: 1px solid rgba(255,179,0,0.25); }
.role-chip.developer   { background: var(--status-blue-dim);    color: var(--status-blue);   border: 1px solid rgba(68,138,255,0.25); }
.role-chip.artist      { background: var(--status-purple-dim);  color: var(--status-purple); border: 1px solid rgba(124,77,255,0.25); }
.role-chip.listener    { background: var(--bg-elevated);        color: var(--text-muted);    border: 1px solid var(--border-default); }
.role-chip.content     { background: var(--status-green-dim);   color: var(--status-green);  border: 1px solid rgba(0,230,118,0.25); }

/* ── Utilities ────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }
.opacity-0 { opacity: 0; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-4   { padding: 4px; }
.p-8   { padding: 8px; }
.p-16  { padding: 16px; }
.p-20  { padding: 20px; }
.rounded-full { border-radius: var(--radius-full); }
.text-center { text-align: center; }

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-fadein   { animation: fadeIn  0.4s ease; }
.animate-slideup  { animation: slideUp 0.4s ease; }
.animate-pulse    { animation: pulse   2s ease infinite; }
.animate-spin     { animation: spin    1s linear infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

/* ── Waveform Visualizer ──────────────────────────────────────────── */
.waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.waveform-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--ooki-red);
  animation: wave 1s ease infinite;
}

.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.waveform-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { height: 6px; }
  50% { height: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT SYSTEM v2
   Breakpoints:
     Mobile  : max-width: 768px   → app-like: fixed nav + fixed player
                                    + bottom tab bar + scrollable main only
     Tablet  : 769px – 1024px     → icon-only sidebar (80px), 2-col grids
     Desktop : 1025px+            → unchanged (zero overrides)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Global grid adjustments (1280px) ────────────────────────────── */
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(4, 1fr); }
  .grid-6 { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   TABLET — 769px to 1024px
   Icon-only sidebar (80px), tighter padding, 2-col grids.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-width: 80px; }

  .ooki-sidebar { width: 80px; overflow: visible; }
  /* Hide text labels, keep icons */
  .sidebar-section-label,
  .sidebar-nav-item span:not(.nav-icon):not(.nav-badge) { display: none; }
  .sidebar-nav-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
  }
  .sidebar-nav-item .nav-icon { width: 24px; font-size: 17px; }
  .sidebar-footer { padding: 12px 8px; }

  .page-content { padding: 0 20px 100px; }
  .page-header  { padding: 24px 20px 0; }
  .grid-4       { grid-template-columns: repeat(3, 1fr); }
  .grid-5       { grid-template-columns: repeat(3, 1fr); }
  .track-grid   { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — max-width: 768px
   Native app feel:
   • .ooki-shell stays as CSS grid — nav and player remain in grid rows.
   • ONLY .ooki-main scrolls — body does NOT lock (nav stays visible).
   • Bottom tab bar injected by ooki-shell.js (id="mobile-bottom-nav")
     sits between player and main content area via padding.
   • Player like button wired to Supabase liked_tracks.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Tokens ── */
  :root {
    --sidebar-width:  0px;
    --nav-height:     56px;
    --player-height:  70px;
    --tab-bar-height: 54px;    /* bottom tab bar height */
  }

  /* ── Box-sizing safety ── */
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  /* ── Body: allow scroll but no horizontal overflow ── */
  body { overflow-x: hidden; }

  /* ── Shell: stay as grid, collapse sidebar column ── */
  .ooki-shell {
    grid-template-areas:
      "nav nav"
      "main main"
      "player player";
    grid-template-columns: 1fr;
    grid-template-rows: var(--nav-height) 1fr var(--player-height);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* ── Nav: stays in grid row, visible at top ── */
  .ooki-nav {
    grid-area: nav;
    padding: 0 14px;
    gap: 10px;
    height: var(--nav-height);
    /* Collapse nav search on mobile to save space */
  }
  /* Shrink / hide search bar on mobile — keep logo + actions */
  .ooki-nav .nav-search { display: none; }
  .nav-logo-text { font-size: 16px; }

  /* ── Sidebar: hidden by default, becomes a slide-in drawer when
     the page's hamburger button adds .open (see .nav-hamburger /
     .sidebar-overlay below). Pages that don't implement a hamburger
     simply never add .open, so they keep the old "sidebar gone, no
     replacement" behavior — this rule is purely additive. ── */
  .ooki-sidebar { display: none !important; }
  .ooki-sidebar.open {
    display: flex !important;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    z-index: 950; /* above --z-nav(900), below --z-modal(1100) */
    height: calc(100dvh - var(--nav-height));
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-base);
    box-shadow: 8px 0 32px rgba(0,0,0,0.4);
  }

  /* ── Hamburger button: hidden by default (desktop/tablet keep the
     full sidebar via the ≥769px rules above), shown only here.
     Pages opt in by adding <button class="nav-hamburger" id="hamburgerBtn">
     as the first child of .ooki-nav — see podcasts.html / my-library.html /
     virtual-artist.html for the reference markup (mirrors the proven
     pattern already shipped on app-analytics.html / billing.html /
     artist-dashboard.html / track-manager.html, which are standalone
     pages with their own copy of this same CSS; this centralizes it once
     for every page sharing ooki-system.css instead of duplicating it
     per-page). ── */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: all 0.3s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Backdrop: dims page content behind the open drawer, closes on
     click. Opt-in via <div class="sidebar-overlay" id="sidebarOverlay">
     as a direct child of <body> (sibling of .ooki-shell, NOT nested
     inside it — matches listener-dashboard.html's fixed, working
     pattern so this can never be trapped by a stacking context the way
     the original listener-dashboard bug was). ── */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--nav-height);
    background: rgba(0,0,0,0.6);
    z-index: 940; /* just below .ooki-sidebar.open (950) */
  }
  .sidebar-overlay.open { display: block; }

  /* ── Main: scrolls only, accounts for tab bar above player ── */
  .ooki-main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Extra bottom pad so last content clears the tab bar */
    padding-bottom: var(--tab-bar-height);
  }

  /* ── Player: stays in grid row at bottom, 70px ── */
  .ooki-player {
    grid-area: player;
    height: var(--player-height);
    padding: 0 12px;
    gap: 8px;
    /* Keep it above tab bar — tab bar is outside the grid */
    position: relative;
    z-index: var(--z-player);
  }

  /* ── Player: compact layout for 70px ── */
  .player-track-art    { width: 40px; height: 40px; }
  .player-track        { width: auto; flex: 1; min-width: 0; gap: 8px; }
  .player-track-title  { font-size: 12px; }
  .player-track-artist { font-size: 11px; }

  /* Keep: art, info, like button, prev/play/next.
     !important is required: ooki-shell.js's injected markup sets
     style="display:flex" inline on .player-extra (and .player-volume
     is a plain nested div with no inline style but shares the parent
     being hidden) — a plain class rule can never beat an inline style
     at equal/higher specificity, so without !important this never took
     effect and the 240px-wide block rendered past the viewport edge. */
  .player-extra,
  .player-volume { display: none !important; }

  /* Slim down control buttons row */
  .player-controls { gap: 4px; flex: none; }
  .player-buttons  { gap: 12px; }
  .player-progress { display: none; }
  .player-btn      { width: 32px; height: 32px; font-size: 15px; }
  .player-btn.play-btn { width: 40px; height: 40px; font-size: 16px; }

  /* Like button — stays visible, wired to Supabase */
  .player-track-like {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
    transition: color var(--transition-fast), transform 0.15s;
  }
  .player-track-like:hover  { color: var(--ooki-red); }
  .player-track-like.liked  { color: var(--ooki-red); }
  .player-track-like.liked i { font-weight: 900; }
  /* Pop animation on like */
  .player-track-like.like-pop { transform: scale(1.35); }

  /* ── Grids ── */
  .grid-3, .grid-4, .grid-5, .grid-6,
  .track-grid  { grid-template-columns: repeat(2, 1fr); }
  .grid-2      { grid-template-columns: repeat(2, 1fr); }

  /* ── Content padding ── */
  .page-content { padding: 16px 16px 16px; }
  .page-header  { padding: 16px 16px 0; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .page-header-top { flex-wrap: wrap; gap: 8px; }

  /* ── Touch targets ── */
  .btn, button { min-height: 40px; }
  .player-btn.play-btn { min-height: 44px; min-width: 44px; }

  /* ── Cards ── */
  .card { border-radius: var(--radius-lg); }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   Injected into <body> by ooki-shell.js on mobile viewports.
   id="mobile-bottom-nav"
   Sits between .ooki-player and viewport bottom.
   ════════════════════════════════════════════════════════════════════ */

/* Hidden by default on all breakpoints */
#mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
  #mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Sits below the player grid row */
    z-index: calc(var(--z-player) + 10);
    justify-content: space-around;
    align-items: stretch;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--border-subtle);
    height: var(--tab-bar-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Push player grid row up so tab bar doesn't overlap it.
     NOTE: height already reserves room for the fixed #mobile-bottom-nav
     by shrinking the shell's total height — do NOT also add
     padding-bottom here. Padding on top of the already-reduced height
     tacks on a second, redundant tab-bar-height's worth of empty space
     *after* the player grid row (inside the shell's own box), which
     renders as a visible blank black gap between the player and the
     tab bar underneath it. (Confirmed via live layout inspection:
     shell bottom - player bottom == tab-bar-height exactly.) */
  .ooki-shell {
    grid-template-rows: var(--nav-height) 1fr var(--player-height);
    height: calc(100dvh - var(--tab-bar-height));
  }

  /* Tab items */
  .mob-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
    padding: 6px 0;
    position: relative;
    min-height: 44px;
  }

  .mob-tab i {
    font-size: 19px;
    line-height: 1;
    transition: transform var(--transition-fast);
  }

  .mob-tab.active {
    color: var(--ooki-red);
  }

  .mob-tab.active i {
    transform: scale(1.12);
  }

  .mob-tab:hover { color: var(--ooki-red); }

  /* Active indicator dot */
  .mob-tab.active::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ooki-red);
  }

  /* Badge on tab items */
  .mob-tab .mob-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: var(--ooki-red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
  }

  /* ── Also show compact player progress in tab bar gap (optional) ── */
  /* Mini progress bar across the top of the tab bar */
  #mobile-bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--mob-progress, 0%);
    height: 2px;
    background: var(--ooki-red);
    border-radius: 0 2px 0 0;
    transition: width 0.5s linear;
  }
}

/* ════════════════════════════════════════════════════════════════════
   RADIO PAGE MOBILE FIX
   Standalone page (no .ooki-shell) — own responsive rules.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .omg-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .station-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 72px 16px 90px;
    overflow-x: hidden;
  }

  .station-name      { font-size: clamp(28px, 9vw, 48px); }
  .station-tagline   { font-size: 13px; margin-bottom: 24px; }

  .visualizer-wrap   { width: 200px !important; height: 200px !important; margin-bottom: 28px !important; }
  .vinyl-disc        { width: 130px; height: 130px; }
  .vinyl-label       { width: 50px; height: 50px; font-size: 20px; }
  canvas#waveCanvas  { width: 280px; bottom: -24px; }

  .now-playing-card,
  .progress-wrap,
  .queue-section,
  .transp-panel      { max-width: 100%; width: 100%; }

  .feature-chips { gap: 8px; margin: 0 auto 20px; }
  .feature-chip  { font-size: 11px; padding: 6px 10px; }
}

@media (max-width: 380px) {
  .visualizer-wrap { width: 170px !important; height: 170px !important; }
  .vinyl-disc      { width: 110px; height: 110px; }
}

/* ════════════════════════════════════════════════════════════════════
   SAFE AREA — iOS notch / home indicator
   ════════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    #mobile-bottom-nav {
      height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }
    /* NOTE: do NOT add padding-bottom here — see the primary .ooki-shell
       mobile rule above (~line 1910) for the full explanation. This
       @supports block only needs to extend the *height* reduction to
       also account for env(safe-area-inset-bottom); adding padding-bottom
       on top re-introduces the double-counted empty-space gap above
       #mobile-bottom-nav that was already fixed once in the primary rule
       (this @supports block runs TRUE in virtually all modern browsers
       and is declared later in source order, so it was silently
       overriding that earlier fix). */
    .ooki-shell {
      height: calc(100dvh - var(--tab-bar-height) - env(safe-area-inset-bottom));
    }
  }
}

/* ── Glassmorphism ────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
}

/* ── Red Glow Effect ──────────────────────────────────────────────── */
.glow-red {
  position: relative;
}
.glow-red::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--ooki-red), transparent, var(--ooki-red));
  opacity: 0.3;
  z-index: -1;
  filter: blur(8px);
}

/* ── Vinyl Record Animation ───────────────────────────────────────── */
.vinyl {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, #1a1a1a 30%, #0a0a0a 60%, #141414 100%);
  box-shadow: 0 0 0 2px #222, 0 0 0 4px #111, inset 0 0 20px rgba(0,0,0,0.8);
  position: relative;
  animation: spin 4s linear infinite;
}

.vinyl::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--ooki-red);
  border-radius: var(--radius-full);
  box-shadow: 0 0 20px var(--ooki-red-glow);
}

/* ── Auth Pages Specific ──────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 480px;
  background: var(--bg-void);
}

.auth-left {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background: linear-gradient(135deg, rgba(255,10,61,0.08) 0%, transparent 60%);
}

.auth-right {
  background: var(--bg-base);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 48px 40px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-left { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SONIC CAPSULES — Component Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Capsule Card ─────────────────────────────────────────────────── */
.capsule-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
  position: relative;
}
.capsule-card:hover {
  border-color: var(--border-default);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.capsule-card.capsule-full-album {
  border-color: var(--border-red);
  box-shadow: var(--shadow-red);
}

.capsule-art-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-elevated);
}
.capsule-art-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.capsule-card:hover .capsule-art-wrap img { transform: scale(1.05); }

.capsule-type-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.capsule-type-badge.single  { border-color: var(--ooki-red); color: var(--ooki-red); }
.capsule-type-badge.ep      { border-color: var(--status-purple); color: var(--status-purple); }
.capsule-type-badge.album   { border-color: var(--status-amber); color: var(--status-amber); }

.capsule-play-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.capsule-card:hover .capsule-play-overlay { opacity: 1; }

.capsule-body { padding: 16px; }

.capsule-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.capsule-track-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.capsule-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.capsule-artist {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.capsule-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Tap to Reveal ────────────────────────────────────────────────── */
.tap-reveal-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}
.tap-reveal-trigger:hover {
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
  color: var(--ooki-red);
}
.tap-reveal-trigger[aria-expanded="true"] {
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
  color: var(--ooki-red);
}
.tap-reveal-trigger .reveal-icon { font-size: 14px; }

.reveal-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  opacity: 0;
  padding: 0 16px;
}
.reveal-panel.reveal-open {
  max-height: 600px;
  opacity: 1;
  padding: 16px;
}

.reveal-panel-inner {
  background: var(--bg-elevated);
  border: 1px solid var(--border-red);
  border-radius: var(--radius-lg);
  padding: 20px;
  animation: slideUp 0.3s ease;
}

.reveal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ooki-red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.reveal-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.reveal-quote {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-style: italic;
  border-left: 3px solid var(--ooki-red);
  padding-left: 16px;
  margin: 12px 0;
}
.reveal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.reveal-tag {
  padding: 3px 10px;
  background: var(--ooki-red-dim);
  border: 1px solid var(--border-red);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--ooki-red);
  font-weight: 600;
}

/* ── Tracklist in Capsule ─────────────────────────────────────────── */
.capsule-tracklist {
  border-top: 1px solid var(--border-subtle);
  padding: 0 16px 16px;
}

.capsule-track-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: var(--radius-sm);
}
.capsule-track-row:last-child { border-bottom: none; }
.capsule-track-row:hover { background: var(--bg-elevated); padding-left: 8px; }

.track-num {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.capsule-track-row:hover .track-num {
  background: var(--ooki-red);
  color: #fff;
}
.capsule-track-row:hover .track-num::before { content: '▶'; }
.capsule-track-row:not(:hover) .track-num::before { content: attr(data-num); }

.track-info-row { overflow: hidden; }
.track-title-row {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-feat {
  font-size: 11px;
  color: var(--text-muted);
}
.track-dur {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Capsule Hero Banner ──────────────────────────────────────────── */
.capsule-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  border: 1px solid var(--border-subtle);
  margin-bottom: 32px;
}
.capsule-hero-art {
  width: 280px;
  aspect-ratio: 1;
  flex-shrink: 0;
  overflow: hidden;
}
.capsule-hero-art img { width: 100%; height: 100%; object-fit: cover; }

.capsule-hero-body {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.capsule-hero-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ooki-red);
  margin-bottom: 12px;
}
.capsule-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.capsule-hero-artist {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.capsule-hero-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
}
.capsule-stat { }
.capsule-stat-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}
.capsule-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .capsule-hero { grid-template-columns: 1fr; }
  .capsule-hero-art { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   ARTIST COVERS — Component Styles
   ═══════════════════════════════════════════════════════════════════ */

.covers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.cover-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-elevated);
  transition: transform var(--transition-base);
}
.cover-card:hover { transform: scale(1.03); }

.cover-art {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.cover-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.cover-card:hover .cover-art img { transform: scale(1.08); }

.cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 60%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cover-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cover-artist { font-size: 13px; color: var(--text-secondary); }
.cover-year   { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.cover-actions-overlay {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.cover-card:hover .cover-actions-overlay { opacity: 1; }

/* ── Public Profile Pages ─────────────────────────────────────────── */
.profile-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 40px 48px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-void) 100%);
}
.profile-hero-bg {
  position: absolute; inset: 0;
  background: inherit;
  filter: blur(0px);
}
.profile-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-void) 0%, transparent 70%);
}
.profile-hero-content { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 32px; }
.profile-avatar-lg {
  width: 140px; height: 140px;
  border-radius: var(--radius-full);
  border: 4px solid var(--bg-void);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.profile-info { flex: 1; }
.profile-role-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--ooki-red-dim);
  border: 1px solid var(--border-red);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ooki-red);
  margin-bottom: 10px;
}
.profile-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.profile-bio {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 540px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.profile-stats-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.profile-stat-item .pstat-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.profile-stat-item .pstat-lbl {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Developer Landing Page ───────────────────────────────────────── */
.dev-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition-base);
}
.dev-feature-card:hover {
  border-color: var(--border-red);
  transform: translateY(-4px);
  box-shadow: var(--shadow-red);
}
.dev-feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--ooki-red-dim);
  border: 1px solid var(--border-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--ooki-red);
  margin-bottom: 16px;
}
.dev-feature-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.dev-feature-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.api-endpoint-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  transition: all var(--transition-fast);
  margin-bottom: 8px;
}
.api-endpoint-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-default);
}
.method-badge {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.method-get    { background: var(--status-green-dim);  color: var(--status-green); }
.method-post   { background: var(--status-blue-dim);   color: var(--status-blue); }
.method-put    { background: var(--status-amber-dim);  color: var(--status-amber); }
.method-patch  { background: var(--status-purple-dim); color: var(--status-purple); }
.method-delete { background: var(--ooki-red-dim);      color: var(--ooki-red); }

.endpoint-path { color: var(--text-primary); flex: 1; }
.endpoint-desc { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }

/* ── Listener Profile Activity Feed ──────────────────────────────── */
.activity-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.activity-item:last-child { border-bottom: none; }
.activity-art {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.activity-art img { width: 100%; height: 100%; object-fit: cover; }
.activity-info { flex: 1; overflow: hidden; }
.activity-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.activity-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Sonic Capsule Filter Tabs ────────────────────────────────────── */
.capsule-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.capsule-filter-btn {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.capsule-filter-btn:hover, .capsule-filter-btn.active {
  background: var(--ooki-red);
  border-color: var(--ooki-red);
  color: #fff;
}

/* ── Empty State ──────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}
.empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.empty-desc {
  font-size: 14px;
  max-width: 360px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   OOKI GLOBAL SEARCH — Futuristic Persistent Overlay
   Text · Image Upload · Voice Search
   ═══════════════════════════════════════════════════════════════════ */

/* ── Floating Search Trigger (always visible) ─────────────────────── */
.ooki-search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ooki-search-trigger:hover {
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
  color: var(--ooki-red);
  box-shadow: 0 0 20px var(--ooki-red-glow);
}
.ooki-search-trigger .search-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.45;
  background: var(--bg-void);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

/* Floating pill that sticks at bottom on mobile / follows scroll */
.ooki-search-fab {
  position: fixed;
  bottom: calc(var(--player-height, 80px) + 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-player) - 1);
  display: none; /* shown via JS on mobile */
  align-items: center; gap: 10px;
  background: var(--ooki-red);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-size: 14px; font-weight: 700;
  cursor: pointer; border: none;
  box-shadow: 0 8px 32px var(--ooki-red-glow), 0 0 0 1px rgba(255,10,61,0.3);
  transition: all var(--transition-base);
  font-family: var(--font-body);
}
.ooki-search-fab:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 40px var(--ooki-red-glow);
}
@media (max-width: 768px) {
  .ooki-search-fab { display: flex; }
}

/* ── Backdrop ──────────────────────────────────────────────────────── */
#ookiSearchOverlay {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(40px, 8vh, 100px);
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background var(--transition-base);
}
#ookiSearchOverlay.open {
  background: rgba(0,0,0,0.75);
  pointer-events: all;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#ookiSearchOverlay.open .ooki-search-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Main Search Panel ──────────────────────────────────────────────── */
.ooki-search-panel {
  width: min(720px, 96vw);
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(0,0,0,0.9), 0 0 0 1px var(--border-subtle), 0 0 80px var(--ooki-red-glow);
  opacity: 0;
  transform: translateY(-20px) scale(0.97);
  transition: opacity var(--transition-base), transform var(--transition-base);
  scrollbar-width: none;
  position: relative;
}
.ooki-search-panel::-webkit-scrollbar { display: none; }

/* Animated red scan line at top */
.ooki-search-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ooki-red), var(--ooki-red-soft), transparent);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  animation: searchScanLine 2s ease-in-out infinite;
}
@keyframes searchScanLine {
  0%   { opacity: 0.4; transform: scaleX(0.3); }
  50%  { opacity: 1;   transform: scaleX(1); }
  100% { opacity: 0.4; transform: scaleX(0.3); }
}

/* ── Input Row ──────────────────────────────────────────────────────── */
.ooki-search-input-row {
  display: flex; align-items: center; gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.ooki-search-icon-left {
  color: var(--ooki-red);
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 14px;
  filter: drop-shadow(0 0 6px var(--ooki-red-glow));
}
#ookiSearchInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 20px 0;
  letter-spacing: -0.01em;
  caret-color: var(--ooki-red);
}
#ookiSearchInput::placeholder { color: var(--text-muted); font-weight: 400; }

/* ── Action Buttons Row ─────────────────────────────────────────────── */
.ooki-search-actions {
  display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}
.ooki-search-action-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer; font-size: 14px;
  transition: all var(--transition-fast);
  position: relative;
}
.ooki-search-action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
}
.ooki-search-action-btn.active {
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
  color: var(--ooki-red);
}
/* Voice recording pulse */
.ooki-search-action-btn.recording {
  background: var(--ooki-red-dim);
  border-color: var(--ooki-red);
  color: var(--ooki-red);
  animation: voicePulse 1s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ooki-red-glow); }
  50%       { box-shadow: 0 0 0 8px rgba(255,10,61,0); }
}
/* Tooltip */
.ooki-search-action-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 10px; font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.ooki-search-close-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-muted); cursor: pointer; font-size: 13px;
  transition: all var(--transition-fast); margin-left: 4px;
}
.ooki-search-close-btn:hover { background: var(--ooki-red-dim); border-color: var(--border-red); color: var(--ooki-red); }

/* ── Mode Tabs ──────────────────────────────────────────────────────── */
.ooki-search-modes {
  display: flex; gap: 2px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}
.ooki-search-mode-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer; border: 1px solid transparent;
  transition: all var(--transition-fast);
  background: transparent;
}
.ooki-search-mode-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.ooki-search-mode-btn.active {
  color: var(--ooki-red);
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
}
.ooki-search-mode-btn i { font-size: 11px; }

/* ── Voice Panel ────────────────────────────────────────────────────── */
.ooki-voice-panel {
  display: none;
  flex-direction: column; align-items: center;
  padding: 40px 20px;
  text-align: center;
}
.ooki-voice-panel.active { display: flex; }
.voice-orb {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ooki-red-soft) 0%, var(--ooki-red) 50%, rgba(255,10,61,0.3) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 0 0 0 var(--ooki-red-glow);
  cursor: pointer; transition: transform var(--transition-fast);
  position: relative;
}
.voice-orb.idle { background: var(--bg-elevated); box-shadow: none; }
.voice-orb.idle i { color: var(--text-muted); font-size: 28px; }
.voice-orb.listening {
  animation: orbListen 1.2s ease-in-out infinite alternate;
}
@keyframes orbListen {
  from { box-shadow: 0 0 0 0 var(--ooki-red-glow), 0 0 20px rgba(255,10,61,0.3); transform: scale(1); }
  to   { box-shadow: 0 0 0 20px rgba(255,10,61,0), 0 0 60px rgba(255,10,61,0.4); transform: scale(1.08); }
}
.voice-waves {
  display: flex; align-items: flex-end; gap: 3px;
  height: 32px; margin-bottom: 14px;
}
.voice-wave-bar {
  width: 4px; background: var(--ooki-red); border-radius: 2px;
  animation: voiceWave 0.8s ease-in-out infinite alternate;
  opacity: 0; transition: opacity 0.2s;
}
.voice-wave-bar.active { opacity: 1; }
.voice-wave-bar:nth-child(1) { animation-delay: 0.0s; }
.voice-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.voice-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.voice-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.voice-wave-bar:nth-child(5) { animation-delay: 0.4s; }
.voice-wave-bar:nth-child(6) { animation-delay: 0.3s; }
.voice-wave-bar:nth-child(7) { animation-delay: 0.2s; }
.voice-wave-bar:nth-child(8) { animation-delay: 0.1s; }
.voice-wave-bar:nth-child(9) { animation-delay: 0.0s; }
@keyframes voiceWave {
  from { height: 4px; }
  to   { height: 28px; }
}
.voice-status { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.voice-hint   { font-size: 12px; color: var(--text-muted); }

/* ── Image Search Panel ─────────────────────────────────────────────── */
.ooki-image-panel {
  display: none;
  flex-direction: column; align-items: center;
  padding: 24px 20px;
}
.ooki-image-panel.active { display: flex; width: 100%; }
.image-drop-zone {
  width: 100%;
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
  background: var(--bg-base);
  position: relative;
}
.image-drop-zone:hover, .image-drop-zone.drag-over {
  border-color: var(--ooki-red);
  background: var(--ooki-red-dim);
}
.image-drop-zone i { font-size: 40px; color: var(--text-muted); margin-bottom: 12px; display: block; }
.image-drop-zone:hover i { color: var(--ooki-red); }
.image-drop-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.image-drop-sub { font-size: 12px; color: var(--text-muted); }
.image-drop-sub span { color: var(--ooki-red); font-weight: 600; cursor: pointer; }
#imageSearchFileInput { display: none; }
.image-preview-strip {
  display: flex; gap: 10px; flex-wrap: wrap;
  width: 100%; margin-top: 16px;
}
.image-preview-thumb {
  width: 72px; height: 72px; border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid var(--border-default);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.image-preview-thumb.selected { border-color: var(--ooki-red); }

/* ── Results Body ───────────────────────────────────────────────────── */
.ooki-search-body { padding: 16px 20px; }

/* Recent / Trending ──────── */
.ooki-search-section-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.ooki-search-section-title button {
  font-size: 10px; color: var(--ooki-red); cursor: pointer;
  background: none; border: none; font-weight: 600;
}

/* Quick Filter Pills ────── */
.ooki-quick-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.ooki-quick-filter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-secondary); cursor: pointer;
  transition: all var(--transition-fast);
}
.ooki-quick-filter:hover {
  background: var(--ooki-red-dim);
  border-color: var(--border-red);
  color: var(--ooki-red);
}

/* Result Items ─────────── */
.ooki-result-group { margin-bottom: 20px; }
.ooki-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--transition-fast);
  text-decoration: none; color: inherit;
}
.ooki-result-item:hover { background: var(--bg-elevated); }
.ooki-result-item.highlighted { background: var(--ooki-red-dim); }
.ooki-result-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
  background: var(--bg-elevated);
}
.ooki-result-thumb.round { border-radius: 50%; }
.ooki-result-info { flex: 1; min-width: 0; }
.ooki-result-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ooki-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ooki-result-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-full);
  flex-shrink: 0;
}
.rb-artist  { background: var(--ooki-red-dim);           color: var(--ooki-red);        border: 1px solid rgba(255,10,61,.2); }
.rb-track   { background: rgba(68,138,255,.13);           color: #448AFF;                border: 1px solid rgba(68,138,255,.2); }
.rb-album   { background: rgba(124,77,255,.13);           color: #7C4DFF;                border: 1px solid rgba(124,77,255,.2); }
.rb-capsule { background: rgba(0,230,118,.13);            color: var(--status-green);    border: 1px solid rgba(0,230,118,.2); }

/* Trending tags ─────────── */
.trending-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.trending-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all var(--transition-fast); color: var(--text-secondary);
}
.trending-tag i { font-size: 10px; color: var(--ooki-red); }
.trending-tag:hover { border-color: var(--ooki-red); color: var(--text-primary); background: var(--ooki-red-dim); }

/* No results ─────────────── */
.ooki-search-empty {
  text-align: center; padding: 32px 20px;
  display: none;
}
.ooki-search-empty.visible { display: block; }
.ooki-search-empty i { font-size: 32px; color: var(--text-muted); margin-bottom: 10px; }
.ooki-search-empty p { font-size: 13px; color: var(--text-muted); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.ooki-search-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-base);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.search-footer-hints { display: flex; gap: 16px; }
.search-hint { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); }
.search-hint kbd {
  font-family: var(--font-mono);
  font-size: 9px; padding: 2px 5px;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: 3px; color: var(--text-secondary);
}
.search-footer-powered { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.search-footer-powered span { color: var(--ooki-red); font-weight: 700; }

/* ── Light mode overrides ───────────────────────────────────────────── */
[data-theme="light"] .ooki-search-panel { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .ooki-search-modes { background: #f5f5f7; }
[data-theme="light"] .ooki-search-input-row { background: #fff; }
[data-theme="light"] .ooki-search-footer { background: #f5f5f7; }
[data-theme="light"] #ookiSearchOverlay { background: rgba(0,0,0,.35); }

/* ════════════════════════════════════════════════════════════════════
   MOBILE UX OVERHAUL — Session 6
   Fixes: hero overflow, quick-pick layout, track-row width,
   grids, section headers, FAB positioning, nav keyboard shortcuts
   ════════════════════════════════════════════════════════════════════ */

/* ── Prevent ALL horizontal overflow sitewide ────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
* { box-sizing: border-box; }
img, video, iframe, embed, object { max-width: 100%; }

/* ── Keyboard shortcut badge — hide on touch devices ─────────────── */
.nav-search .search-kbd,
.nav-search kbd,
.search-kbd { display: none; }

@media (min-width: 1025px) {
  .search-kbd { display: inline-flex; }
}

/* ── ooki-search-trigger: icon-only on mobile (no text label) ─────── */
@media (max-width: 768px) {
  /* The search trigger button in nav-actions: icon only, no text "Search" */
  .ooki-search-trigger {
    padding: 8px !important;
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  /* Hide text content of search trigger, keep only icon */
  .ooki-search-trigger > i { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — max-width: 768px   (listener dashboard + all app pages)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero Banner (listener-dashboard) ── */
  /* The inline-padded wrapper div */
  .ooki-main > div[style*="padding:28px 32px"],
  .ooki-main > div[style*="padding: 28px 32px"] {
    padding: 16px 16px 0 !important;
  }

  /* Hero card: stack vertically on mobile */
  .ooki-main div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  /* Shuffle button: full width on mobile */
  .ooki-main div[style*="display:flex;align-items:center;justify-content:space-between"] > a.btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero text: prevent overflow */
  .ooki-main div[style*="display:flex;align-items:center;justify-content:space-between"] h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* ── Quick Picks grid (2-col is fine but needs inner overflow control) ── */
  .quick-pick {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .quick-pick-item {
    padding: 10px 12px !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .quick-pick-item > div[style*="flex:1"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .quick-pick-art {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* ── Track rows: simplify to 2 columns (art+info | duration) ── */
  .track-row {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  /* Hide track number, plays count, and action buttons on mobile */
  .track-number,
  .track-play-hover,
  .track-plays,
  .track-actions { display: none !important; }

  /* Show play icon inline on tap instead */
  .track-row:active .track-play-hover { display: flex !important; }

  .track-info { overflow: hidden !important; gap: 8px !important; }
  .track-meta { overflow: hidden !important; min-width: 0 !important; }
  .track-title { font-size: 13px !important; }
  .track-artist { font-size: 11px !important; }
  .track-duration { min-width: 36px !important; font-size: 11px !important; }

  /* ── Section headers ── */
  .section-header {
    margin-bottom: 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .section-title { font-size: 17px !important; }

  /* ── Grids: all go to 2-col on mobile, music cards ── */
  .grid-5, .grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Artist grid: 3-col on mobile (smaller cards) */
  .grid-6.artist-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Music cards ── */
  .music-card { min-width: 0 !important; }
  .music-card-title {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .music-card-sub {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Artist cards ── */
  .artist-card { min-width: 0 !important; }
  .artist-name {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Page content padding ── */
  .page-content {
    padding: 16px 14px 120px !important;
  }

  /* Section spacing */
  .section { margin-bottom: 28px !important; }

  /* ── Search FAB: account for tab bar height ── */
  .ooki-search-fab {
    bottom: calc(var(--player-height, 70px) + var(--tab-bar-height, 54px) + 14px) !important;
  }

  /* ── Muse AI FAB & panel: raise above tab bar ── */
  .muse-fab {
    bottom: calc(var(--player-height, 70px) + var(--tab-bar-height, 54px) + 14px) !important;
  }
  .muse-panel {
    bottom: calc(var(--player-height, 70px) + var(--tab-bar-height, 54px) + 74px) !important;
    right: 14px !important;
    width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 220px) !important;
  }

  /* ── Nav: hide keyboard shortcut indicators ── */
  .nav-search input { font-size: 14px !important; }

  /* ── Genre pills: horizontal scroll instead of wrap ── */
  #genreFilter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    gap: 6px !important;
  }
  #genreFilter::-webkit-scrollbar { display: none !important; }
  .genre-pill { flex-shrink: 0 !important; }

  /* ── Player bar mobile refinements ── */
  .player-track-like {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* ── Prevent any fixed-width inline styles from overflowing ── */
  [style*="width:200px"], [style*="width: 200px"],
  [style*="width:280px"], [style*="width: 280px"],
  [style*="width:300px"], [style*="width: 300px"],
  [style*="width:360px"], [style*="width: 360px"] {
    max-width: 100% !important;
  }

  /* ── Safe area bottom (iOS notch) ── */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .ooki-search-fab {
      bottom: calc(var(--player-height, 70px) + var(--tab-bar-height, 54px) + 14px + env(safe-area-inset-bottom)) !important;
    }
    .muse-fab {
      bottom: calc(var(--player-height, 70px) + var(--tab-bar-height, 54px) + 14px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── Tablet: quick-pick 2-col ───────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .quick-pick { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quick-pick-item { padding: 10px 12px; }
  .track-row { padding: 10px 12px; gap: 10px; }
  .section-title { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   UNIVERSAL PLAYER BAR FIX — Session 7
   Fixes: player-center/player-art/player-info/player-play class mapping
          (these classes used in all 14+ public pages but lacked CSS)
          Android cross-browser horizontal flex override
          FAB visibility on public pages
   ════════════════════════════════════════════════════════════════════ */

/* ── Player: map new class names used across all public pages ──────── */

/* Art thumbnail (used as player-art on all public page players) */
.player-art {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--bg-elevated, #1a1a1a);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Track info text block */
.player-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.player-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #fff);
}
.player-artist {
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.45));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Like heart button */
.player-like {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, rgba(255,255,255,0.45));
  font-size: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color 0.15s, transform 0.15s;
}
.player-like:hover { color: var(--ooki-red, #ff0a3d); }
.player-like.liked  { color: var(--ooki-red, #ff0a3d); }

/* Center zone wrapper — vertical column (controls on top, progress below) */
.player-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Play button — solid red circle, distinct from .player-btn */
.player-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--ooki-red, #ff0a3d);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  flex-shrink: 0;
}
.player-play:hover {
  background: #e00030;
  transform: scale(1.06);
}

/* ── CRITICAL: force player-controls HORIZONTAL on ALL public pages ─── */
/* Override the column direction from the old .player-controls rule */
.player-center .player-controls,
.ooki-player .player-controls,
.ooki-player-public .player-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Progress bar wrapper below the buttons */
.player-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}
.player-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.player-fill {
  height: 100%;
  background: var(--ooki-red, #ff0a3d);
  border-radius: 99px;
  transition: width 0.1s linear;
}
.player-time {
  font-size: 10px;
  color: var(--text-muted, rgba(255,255,255,0.4));
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Public page player: ensure horizontal row layout always ───────── */
/* Belt-and-braces: covers body:not(:has(.ooki-shell)) .ooki-player
   AND any page that uses .ooki-player without .ooki-shell */
body:not(:has(.ooki-shell)) .ooki-player,
.ooki-player-public {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* ── FAB buttons: HIDE on public (non-app) pages ─────────────────── */
/* muse-ai.js and ooki-shell.js inject these — they should not appear
   on marketing/public pages that use public-nav (not ooki-shell) */
body:not(:has(.ooki-shell)) .muse-fab,
body:not(:has(.ooki-shell)) .muse-panel,
body:not(:has(.ooki-shell)) .ooki-search-fab {
  display: none !important;
}

/* ── Mobile: keep player buttons horizontal (Android override) ─────── */
@media (max-width: 768px) {
  /* Force horizontal for ALL player control variants */
  .player-controls,
  .player-center .player-controls,
  .ooki-player .player-controls,
  .ooki-player-public .player-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Compact art on mobile */
  .player-art {
    width: 40px;
    height: 40px;
  }

  /* Smaller play button on mobile */
  .player-play {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* Public player: track takes flex-1, center is compact */
  body:not(:has(.ooki-shell)) .ooki-player .player-track {
    flex: 1;
    min-width: 0;
  }
  body:not(:has(.ooki-shell)) .ooki-player .player-center {
    flex: 0 0 auto;
  }
  body:not(:has(.ooki-shell)) .ooki-player .player-extra,
  body:not(:has(.ooki-shell)) .ooki-player .player-volume,
  body:not(:has(.ooki-shell)) .ooki-player .player-progress {
    display: none !important;
  }
}


/* Mobile layout rules moved to styles/responsive.css (Session 9) */

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — GLOBAL MUSIC PLAYER FIX (Session 10)
   Covers ALL player variants:
     • .ooki-player          — shell player (listener-dashboard, artist-dashboard)
     • body:not(:has(.ooki-shell)) .ooki-player  — public pages fixed-bottom
     • .ooki-player-public   — injected player on non-shell pages
   Root cause: player background is hardcoded dark (#0a0a0a), so CSS
   variable fallbacks like rgba(255,255,255,x) become invisible.
   Fix: explicit [data-theme="light"] overrides for every colour property.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Shell player background + border ─────────────────────────── */
[data-theme="light"] .ooki-player {
  background: rgba(245,245,247,0.98) !important;
  border-top: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.06) !important;
}

/* ── 2. Track title (main track name) ────────────────────────────── */
[data-theme="light"] .ooki-player .player-track-title,
[data-theme="light"] .ooki-player .player-title,
[data-theme="light"] .ooki-player-public .player-title {
  color: #0A0A0A !important;
}

/* ── 3. Artist name (subdued, but still readable) ────────────────── */
[data-theme="light"] .ooki-player .player-track-artist,
[data-theme="light"] .ooki-player .player-artist,
[data-theme="light"] .ooki-player-public .player-artist {
  color: rgba(0,0,0,0.55) !important;
}

/* ── 4. Art placeholder icon ─────────────────────────────────────── */
[data-theme="light"] .ooki-player .player-track-art .art-placeholder,
[data-theme="light"] .ooki-player .player-art i,
[data-theme="light"] .ooki-player-public .player-art i {
  color: rgba(0,0,0,0.35) !important;
}
[data-theme="light"] .ooki-player .player-track-art,
[data-theme="light"] .ooki-player .player-art,
[data-theme="light"] .ooki-player-public .player-art {
  background: #E0E0E6 !important;
}

/* ── 5. Like / heart button ──────────────────────────────────────── */
[data-theme="light"] .ooki-player .player-track-like,
[data-theme="light"] .ooki-player .player-like,
[data-theme="light"] .ooki-player-public .player-like {
  color: rgba(0,0,0,0.45) !important;
}
/* keep red on hover / liked — no override needed (ooki-red is universal) */

/* ── 6. Control buttons (skip, shuffle, repeat, volume icon) ─────── */
[data-theme="light"] .ooki-player .player-btn,
[data-theme="light"] .ooki-player-public .player-btn {
  color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .ooki-player .player-btn:hover,
[data-theme="light"] .ooki-player-public .player-btn:hover {
  color: #0A0A0A !important;
  background: rgba(0,0,0,0.06) !important;
}

/* ── 7. Play / pause button — dark circle, white icon ───────────── */
[data-theme="light"] .ooki-player .player-btn.play-btn {
  background: #0A0A0A !important;
  color: #ffffff !important;
}
[data-theme="light"] .ooki-player .player-btn.play-btn:hover {
  background: var(--ooki-red, #FF0A3D) !important;
  color: #ffffff !important;
}
/* .player-play (red circle — public player) stays red in all modes; no override */

/* ── 8. Progress bar track + fill ────────────────────────────────── */
[data-theme="light"] .ooki-player .progress-bar,
[data-theme="light"] .ooki-player .player-bar {
  background: rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .ooki-player .progress-fill {
  background: #0A0A0A !important;
}
[data-theme="light"] .ooki-player .progress-fill::after {
  background: #0A0A0A !important;
}
[data-theme="light"] .ooki-player .progress-bar:hover .progress-fill {
  background: var(--ooki-red, #FF0A3D) !important;
}

/* ── 9. Progress / playback timestamp text ───────────────────────── */
[data-theme="light"] .ooki-player .player-time {
  color: rgba(0,0,0,0.40) !important;
}

/* ── 10. Volume bar track + fill ─────────────────────────────────── */
[data-theme="light"] .ooki-player .player-volume-bar {
  background: rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .ooki-player .player-volume-fill {
  background: rgba(0,0,0,0.55) !important;
}

/* ── 11. Native range inputs (volume slider if present) ──────────── */
[data-theme="light"] .ooki-player input[type="range"],
[data-theme="light"] .ooki-player-public input[type="range"] {
  accent-color: #0A0A0A !important;
}

/* ── 12. Any generic buttons inside the player ───────────────────── */
[data-theme="light"] .ooki-player button:not(.player-btn):not(.play-btn) {
  color: #0A0A0A !important;
}
[data-theme="light"] .ooki-player button:not(.player-btn):not(.play-btn):hover {
  opacity: 0.7;
}

/* ── 13. "Old class" player variants (.player-title / .player-bar) ── */
/*    Used by some pages that reference the alternative class mapping  */
[data-theme="light"] .player-title {
  color: #0A0A0A !important;
}
[data-theme="light"] .player-artist {
  color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .player-like {
  color: rgba(0,0,0,0.45) !important;
}
[data-theme="light"] .player-bar {
  background: rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .player-time {
  color: rgba(0,0,0,0.40) !important;
}

/* ── 14. Public (non-shell) fixed-bottom player ──────────────────── */
/*    body:not(:has(.ooki-shell)) .ooki-player background is already  */
/*    handled in ooki-public.css; add text/icon overrides here too    */
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-title,
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-track-title {
  color: #0A0A0A !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-artist,
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-track-artist {
  color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-btn {
  color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-btn:hover {
  color: #0A0A0A !important;
  background: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-like {
  color: rgba(0,0,0,0.45) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-bar {
  background: rgba(0,0,0,0.14) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-time {
  color: rgba(0,0,0,0.40) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-volume-bar {
  background: rgba(0,0,0,0.14) !important;
}
[data-theme="light"] body:not(:has(.ooki-shell)) .ooki-player .player-volume-fill {
  background: rgba(0,0,0,0.55) !important;
}

/* ── 15. Injected .ooki-player-public bar (same bg already set) ──── */
[data-theme="light"] .ooki-player-public .player-btn {
  color: rgba(0,0,0,0.55) !important;
}
[data-theme="light"] .ooki-player-public .player-btn:hover {
  color: #0A0A0A !important;
  background: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .ooki-player-public .player-time {
  color: rgba(0,0,0,0.40) !important;
}
[data-theme="light"] .ooki-player-public .player-bar {
  background: rgba(0,0,0,0.14) !important;
}

/* ══════════════════════════════════════════════════════════════════
   NUCLEAR LIGHT-MODE PLAYER OVERRIDE — MUST STAY LAST IN FILE
   Uses html[data-theme="light"] body prefix for maximum specificity.
   Overrides every hardcoded dark background regardless of !important
   in lower-specificity rules from ooki-public.css or elsewhere.
   DO NOT move this block — source order is the final tiebreaker.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] body .ooki-player,
html[data-theme="light"] body .ooki-player-public,
html[data-theme="light"] body body:not(:has(.ooki-shell)) .ooki-player {
  background: var(--player-bg, #ffffff) !important;
  background-color: var(--player-bg, #ffffff) !important;
  border-top: 1px solid var(--player-border, rgba(0,0,0,0.10)) !important;
  color: var(--player-text-primary, #0A0A0A) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.07) !important;
}

/* Nuclear: all text inside either player variant */
html[data-theme="light"] body .ooki-player *,
html[data-theme="light"] body .ooki-player-public * {
  --text-primary:   #0A0A0A;
  --text-secondary: rgba(0,0,0,0.65);
  --text-muted:     rgba(0,0,0,0.45);
  --bg-elevated:    #E0E0E6;
}

/* Nuclear: track title */
html[data-theme="light"] body .ooki-player .player-track-title,
html[data-theme="light"] body .ooki-player .player-title,
html[data-theme="light"] body .ooki-player-public .player-title {
  color: #0A0A0A !important;
}

/* Nuclear: artist */
html[data-theme="light"] body .ooki-player .player-track-artist,
html[data-theme="light"] body .ooki-player .player-artist,
html[data-theme="light"] body .ooki-player-public .player-artist {
  color: rgba(0,0,0,0.55) !important;
}

/* Nuclear: all icon/control buttons */
html[data-theme="light"] body .ooki-player .player-btn,
html[data-theme="light"] body .ooki-player .player-track-like,
html[data-theme="light"] body .ooki-player .player-like,
html[data-theme="light"] body .ooki-player-public .player-btn,
html[data-theme="light"] body .ooki-player-public .player-like {
  color: rgba(0,0,0,0.55) !important;
}
html[data-theme="light"] body .ooki-player .player-btn:hover,
html[data-theme="light"] body .ooki-player-public .player-btn:hover {
  color: #0A0A0A !important;
  background: rgba(0,0,0,0.07) !important;
}

/* Nuclear: play button — dark circle */
html[data-theme="light"] body .ooki-player .player-btn.play-btn {
  background: #0A0A0A !important;
  color: #ffffff !important;
}
html[data-theme="light"] body .ooki-player .player-btn.play-btn:hover {
  background: var(--ooki-red, #FF0A3D) !important;
  color: #ffffff !important;
}

/* Nuclear: progress + volume bars */
html[data-theme="light"] body .ooki-player .progress-bar,
html[data-theme="light"] body .ooki-player .player-bar,
html[data-theme="light"] body .ooki-player .player-volume-bar,
html[data-theme="light"] body .ooki-player-public .player-bar {
  background: rgba(0,0,0,0.14) !important;
}
html[data-theme="light"] body .ooki-player .progress-fill {
  background: #0A0A0A !important;
}
html[data-theme="light"] body .ooki-player .progress-fill::after {
  background: #0A0A0A !important;
}
html[data-theme="light"] body .ooki-player .player-volume-fill {
  background: rgba(0,0,0,0.55) !important;
}

/* Nuclear: timestamps */
html[data-theme="light"] body .ooki-player .player-time,
html[data-theme="light"] body .ooki-player-public .player-time {
  color: rgba(0,0,0,0.40) !important;
}

/* Nuclear: volume icon (inline style fallback) */
html[data-theme="light"] body .ooki-player .player-extra i,
html[data-theme="light"] body .ooki-player .player-volume i {
  color: rgba(0,0,0,0.45) !important;
}

/* Nuclear: art placeholder */
html[data-theme="light"] body .ooki-player .player-track-art,
html[data-theme="light"] body .ooki-player .player-art,
html[data-theme="light"] body .ooki-player-public .player-art {
  background: #E0E0E6 !important;
}
html[data-theme="light"] body .ooki-player .art-placeholder,
html[data-theme="light"] body .ooki-player .player-track-art .art-placeholder {
  color: rgba(0,0,0,0.35) !important;
  background: linear-gradient(135deg, #E0E0E6, #CACAD0) !important;
}

/* ══════════════════════════════════════════════════════════════════
   COLLAPSIBLE PLAYER — circle ↔ bar states (sitewide)
   Applies to BOTH the shell player (.ooki-player, grid-area:player)
   and the public fixed-bottom player (.ooki-player-public, injected
   by ooki-public-nav.js on marketing/public pages).
   Toggled via .collapsed class on the bar element + "pc-toggle" button
   added to the markup; wired in ooki-shell.js / ooki-public-nav.js.
   ══════════════════════════════════════════════════════════════════ */

/* ── Collapse toggle button (chevron-down icon on the full bar) ──── */
.player-collapse-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 13px;
  padding: 6px;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.2s;
}
.player-collapse-btn:hover { color: #fff; }
[data-theme="light"] .player-collapse-btn { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .player-collapse-btn:hover { color: #0A0A0A !important; }

/* ── Collapsed state: shell player bar shrinks to a floating circle ──
   We keep the element in the DOM (so audio/state never interrupts) but
   visually morph it into a small round "bubble" showing the vinyl art,
   pinned to the bottom-right corner, floating above all content. */
.ooki-shell .ooki-player.collapsed,
body:not(:has(.ooki-shell)) .ooki-player.collapsed,
.ooki-player-public.collapsed {
  position: fixed !important;
  grid-area: unset !important;
  left: auto !important;
  right: 20px;
  bottom: calc(var(--player-height, 80px) * 0 + 20px);
  width: 64px;
  height: 64px;
  min-width: 0;
  padding: 0 !important;
  border-radius: 50% !important;
  border-top: none !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  overflow: hidden;
  z-index: 950;
  cursor: pointer;
  gap: 0 !important;
  transition: all 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* On mobile, sit just above the bottom tab bar instead of the viewport edge */
@media (max-width: 768px) {
  .ooki-shell .ooki-player.collapsed,
  body:not(:has(.ooki-shell)) .ooki-player.collapsed,
  .ooki-player-public.collapsed {
    right: 16px;
    bottom: calc(var(--tab-bar-height, 54px) + 16px + env(safe-area-inset-bottom));
  }
}
/* Hide every child of the bar except the vinyl thumbnail when collapsed */
.ooki-player.collapsed > *:not(.player-track),
.ooki-player-public.collapsed > *:not(.player-track) {
  display: none !important;
}
.ooki-player.collapsed .player-track,
.ooki-player-public.collapsed .player-track {
  width: 64px !important;
  height: 64px !important;
  padding: 0;
  gap: 0;
}
.ooki-player.collapsed .player-track > *:not(.player-vinyl-mini):not(.player-art),
.ooki-player-public.collapsed .player-track > *:not(.player-vinyl-mini):not(.player-art) {
  display: none !important;
}
.ooki-player.collapsed .player-vinyl-mini,
.ooki-player.collapsed .player-art,
.ooki-player-public.collapsed .player-art {
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
}
/* Thin progress ring around the collapsed circle (visual-only; actual
   percentage is pushed from JS via --pub-progress / a conic-gradient) */
.ooki-player.collapsed::before,
.ooki-player-public.collapsed::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(var(--ooki-red,#ff0a3d) calc(var(--pub-progress, 0%)), rgba(255,255,255,0.12) 0);
  z-index: -1;
}
[data-theme="light"] .ooki-player.collapsed::before,
[data-theme="light"] .ooki-player-public.collapsed::before {
  background: conic-gradient(var(--ooki-red,#ff0a3d) calc(var(--pub-progress, 0%)), rgba(0,0,0,0.12) 0);
}

/* Small expand hint badge in the corner of the bubble (shows on hover) */
.player-bubble-hint {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 2;
}
.ooki-player.collapsed .player-bubble-hint,
.ooki-player-public.collapsed .player-bubble-hint {
  display: flex;
}

/* Prevent collapse interactions from navigating via the normal title/vinyl
   onclick handlers — the whole bubble becomes one big "expand" button. */
.ooki-player.collapsed,
.ooki-player-public.collapsed { pointer-events: auto; }