/* ═══════════════════════════════════════════════════════════════
   OxSoft Design System 2.0 — Complete Override Layer
   Applied AFTER pwa.css — overrides everything to DS2.0
   Target: 2032 · VisionOS · Apple Music · Linear · Tesla UI
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL RESET & TYPOGRAPHY ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  background: #000 !important;
  color: var(--t1) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -0.01em;
}

::selection { background: rgba(212,175,55,0.18); }
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }
:focus-visible { outline: 1.5px solid rgba(212,175,55,0.45) !important; outline-offset: 2px !important; }

/* ── SCREENS ────────────────────────────────────────────────────── */
.screen { background: #000 !important; }
#app { background: #000 !important; }

/* ── SPLASH ─────────────────────────────────────────────────────── */
#splash {
  background: #000 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 18vh !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ambient glow behind bull */
.splash-bg::before {
  content: '';
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 65vw; height: 65vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
  filter: blur(60px);
  animation: ds2AmbientPulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ds2AmbientPulse {
  0%,100% { opacity: 0.4; transform: translateX(-50%) scale(0.9); }
  50%      { opacity: 0.9; transform: translateX(-50%) scale(1.1); }
}

/* Bull + visual container */
#splash-visual {
  position: absolute !important;
  top: -2vh; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 75vw !important; max-width: 320px !important;
  opacity: 0;
  animation: ds2FadeBull 0.9s cubic-bezier(0.0,0.0,0.2,1) 0.5s forwards;
}
@keyframes ds2FadeBull {
  from { opacity: 0; transform: translateX(-50%) scale(0.94); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Smoke */
.splash-smoke {
  position: absolute !important;
  width: 18px !important; height: 60px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 70%) !important;
  filter: blur(6px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: ds2Smoke 3.5s ease-out 1.8s infinite !important;
}
#splash-smoke-l { left: 40% !important; animation-delay: 1.8s !important; }
#splash-smoke-r { right: 40% !important; animation-delay: 2.05s !important; }
@keyframes ds2Smoke {
  0%   { opacity: 0; transform: translateY(0) scale(1); filter: blur(5px); }
  15%  { opacity: 0.45; }
  60%  { opacity: 0.15; transform: translateY(-55px) scale(2.4); filter: blur(14px); }
  100% { opacity: 0; transform: translateY(-90px) scale(3.8); filter: blur(22px); }
}

/* NXXT text reveal */
#splash-nxxt {
  position: relative !important; z-index: 2 !important;
  text-align: center !important;
  opacity: 0 !important;
  animation: ds2NxxtReveal 1.0s cubic-bezier(0.0,0.0,0.2,1) 2.5s forwards !important;
}
@keyframes ds2NxxtReveal {
  from { opacity: 0; filter: blur(10px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
#splash-nxxt-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(56px, 17vw, 80px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #fff 0%, #E8D476 40%, #D4AF37 80%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#splash-network {
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.45em !important; text-transform: uppercase !important;
  color: rgba(212,175,55,0.65) !important; margin-top: 5px !important;
  opacity: 0 !important;
  animation: ds2SlideUp 0.8s cubic-bezier(0.0,0.0,0.2,1) 3.0s forwards !important;
}
#splash-powered {
  position: absolute !important;
  bottom: calc(var(--safe-bot, 0px) + 22px) !important;
  left: 50% !important; transform: translateX(-50%) !important;
  font-size: 9.5px !important; font-weight: 400 !important;
  letter-spacing: 0.12em !important; color: rgba(255,255,255,0.16) !important;
  white-space: nowrap !important; opacity: 0 !important;
  animation: ds2SlideUpCenter 0.8s cubic-bezier(0.0,0.0,0.2,1) 3.4s forwards !important;
  z-index: 2 !important;
}
@keyframes ds2SlideUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds2SlideUpCenter {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Progress bar */
#splash-pb-wrap {
  position: absolute !important;
  bottom: calc(var(--safe-bot, 0px) + 54px) !important;
  left: 50% !important; transform: translateX(-50%) !important;
  width: 90px !important; height: 1px !important;
  background: rgba(212,175,55,0.08) !important;
  border-radius: 1px !important; overflow: hidden !important; z-index: 2 !important;
}
#splash-pb-fill {
  height: 100% !important; width: 0% !important;
  background: linear-gradient(to right, var(--gold3, #A8841C), var(--gold, #D4AF37), var(--gold-hi, #E8D476)) !important;
  border-radius: 1px !important;
  transition: width 0.3s ease !important;
}

/* ── AUTH SCREEN ─────────────────────────────────────────────────── */
#auth {
  background: #000 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
  padding-top: max(env(safe-area-inset-top), 0px) !important;
}
.auth-bg { background: #000 !important; }
.auth-bg::after {
  content: '' !important;
  position: absolute !important; top: -100px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 400px !important; height: 400px !important;
  background: radial-gradient(circle, rgba(212,175,55,0.04) 0%, transparent 70%) !important;
  filter: blur(60px) !important; pointer-events: none !important;
}
.auth-card, .auth-panel, [class*="auth-form"], [class*="login-box"] {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.auth-logo-text, .auth-title, .login-logo {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important; letter-spacing: -0.02em !important;
  color: #fff !important;
}
.auth-input, [class*="auth-field"] input, .login-field input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.95) !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
  transition: border-color 220ms ease !important;
  -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
}
.auth-input:focus, [class*="auth-field"] input:focus, .login-field input:focus {
  border-color: rgba(212,175,55,0.3) !important;
  background: rgba(255,255,255,0.06) !important;
  outline: none !important;
}
.auth-input::placeholder { color: rgba(255,255,255,0.25) !important; -webkit-text-fill-color: rgba(255,255,255,0.25) !important; }
.auth-btn, .btn-gold {
  background: var(--gold, #D4AF37) !important; color: #000 !important;
  border: none !important; border-radius: 100px !important;
  font-weight: 700 !important; font-size: 14px !important;
  letter-spacing: 0.025em !important;
  box-shadow: 0 2px 18px rgba(212,175,55,0.22) !important;
  transition: all 220ms ease !important;
}
.auth-btn:active, .btn-gold:active { transform: scale(0.98) !important; background: var(--gold2, #C9A227) !important; }
.auth-link, .auth-sub-link { color: rgba(212,175,55,0.7) !important; text-decoration: none !important; font-size: 13px !important; }
.auth-divider { color: rgba(255,255,255,0.2) !important; font-size: 12px !important; }
.auth-error { color: rgba(255,100,100,0.8) !important; font-size: 12px !important; }

/* ── APP HEADER ──────────────────────────────────────────────────── */
.app-head {
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: var(--blur-md, blur(24px)) !important;
  -webkit-backdrop-filter: var(--blur-md, blur(24px)) !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.055)) !important;
}
.app-head-logo {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important; font-weight: 800 !important;
  letter-spacing: -0.02em !important; color: rgba(255,255,255,0.95) !important;
}
.app-head-logo span { color: var(--gold, #D4AF37) !important; }
.head-btn {
  width: 34px !important; height: 34px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 50% !important;
  transition: all 220ms ease !important;
}
.head-btn:active { background: rgba(255,255,255,0.08) !important; }

/* ── BOTTOM NAV ──────────────────────────────────────────────────── */
.app-nav {
  background: rgba(0,0,0,0.82) !important;
  backdrop-filter: var(--blur-lg, blur(48px)) !important;
  -webkit-backdrop-filter: var(--blur-lg, blur(48px)) !important;
  border-top: 1px solid var(--border, rgba(255,255,255,0.055)) !important;
}
.nav-btn { color: rgba(255,255,255,0.28) !important; transition: color 220ms ease !important; }
.nav-btn.active { color: var(--gold, #D4AF37) !important; }
.nav-btn svg { stroke-width: 1.5 !important; }
.nav-btn.active svg { filter: drop-shadow(0 0 5px rgba(212,175,55,0.35)); }
.nav-btn span { font-size: 9px !important; letter-spacing: 0.06em !important; font-weight: 500 !important; }
.nav-btn-radio .nav-radio-icon {
  box-shadow: 0 2px 16px rgba(212,175,55,0.35) !important;
}

/* ── MINI PLAYER ─────────────────────────────────────────────────── */
.mini-player {
  background: rgba(14,12,8,0.88) !important;
  border-top: none !important;
  border-left: none !important; border-right: none !important;
  outline: 1px solid rgba(255,255,255,0.055) !important;
  outline-offset: -1px !important;
  backdrop-filter: var(--blur-md, blur(24px)) !important;
  -webkit-backdrop-filter: var(--blur-md, blur(24px)) !important;
  margin: 0 8px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}
.mini-player::before { height: 1.5px !important; border-radius: 14px 14px 0 0 !important; }
.mp-art { border-radius: 8px !important; }

/* ── HOME VIEW ───────────────────────────────────────────────────── */
.home-section { padding: 0 20px 28px !important; }
.sec-hd, .section-title {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  margin-bottom: 14px !important;
}
.row-item {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 12px !important;
  transition: background 220ms ease, border-color 220ms ease !important;
}
.row-item:active {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(212,175,55,0.16) !important;
}
.row-title { font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.92) !important; }
.row-sub { font-size: 12px !important; color: rgba(255,255,255,0.42) !important; }
.row-art { border-radius: 8px !important; overflow: hidden !important; }
.row-play {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 50% !important;
  transition: all 220ms ease !important;
}
.row-play:active { background: var(--gold-dim, rgba(212,175,55,0.08)) !important; border-color: rgba(212,175,55,0.2) !important; }

/* ── TRACK CARDS / CHART ─────────────────────────────────────────── */
.track-card {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
  transition: all 220ms ease !important;
}
.track-card:active { background: rgba(255,255,255,0.05) !important; }
.chart-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.045) !important;
}
.chart-rank {
  font-size: 11px !important; font-weight: 600 !important;
  color: rgba(255,255,255,0.28) !important;
}
.chart-rank-up { color: rgba(100,200,100,0.7) !important; }
.chart-rank-dn { color: rgba(200,100,100,0.7) !important; }

/* ── ARTIST CARDS ────────────────────────────────────────────────── */
.artist-card {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}
.artist-name { font-weight: 600 !important; font-size: 13px !important; color: rgba(255,255,255,0.9) !important; }
.artist-meta { font-size: 11px !important; color: rgba(255,255,255,0.38) !important; }

/* ── UPGRADE BANNER ──────────────────────────────────────────────── */
.upgrade-banner {
  background: rgba(212,175,55,0.04) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 0 rgba(212,175,55,0.06) !important;
}
.upgrade-btn {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.3) !important;
  color: var(--gold, #D4AF37) !important;
  border-radius: 100px !important;
  font-size: 12px !important; font-weight: 600 !important;
  padding: 7px 16px !important;
  transition: all 220ms ease !important;
}
.upgrade-btn:active { background: rgba(212,175,55,0.08) !important; }

/* ── SEARCH ──────────────────────────────────────────────────────── */
.search-field {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.search-field:focus-within {
  border-color: rgba(212,175,55,0.25) !important;
}
.search-field input { background: transparent !important; border: none !important; }
.search-field input::placeholder { color: rgba(255,255,255,0.28) !important; }

.disc-genre-chip {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 12px !important;
  transition: all 220ms ease !important;
}
.disc-genre-chip:active {
  background: rgba(212,175,55,0.08) !important;
  border-color: rgba(212,175,55,0.2) !important;
  color: var(--gold, #D4AF37) !important;
}

/* ── LIBRARY ─────────────────────────────────────────────────────── */
.lib-section {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
  margin: 0 20px 12px !important;
}
.lib-item {
  border-bottom: 1px solid rgba(255,255,255,0.045) !important;
  transition: background 220ms ease !important;
}
.lib-item:last-child { border-bottom: none !important; }
.lib-item:active { background: rgba(255,255,255,0.04) !important; }

/* ── FEED ────────────────────────────────────────────────────────── */
.feed-item { background: #000 !important; }
.feed-card { background: #000 !important; }
.feed-action-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(8px) !important;
  transition: all 220ms ease !important;
  color: rgba(255,255,255,0.7) !important;
}
.feed-action-btn:active { background: rgba(255,255,255,0.12) !important; }
.feed-action-btn.liked { color: var(--gold, #D4AF37) !important; border-color: rgba(212,175,55,0.2) !important; }

/* ── RADIO ───────────────────────────────────────────────────────── */
.radio-visual {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
}
.radio-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important;
  transition: all 220ms ease !important;
}
.radio-btn:active { border-color: rgba(212,175,55,0.2) !important; }
.radio-station-card {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}

/* ── PROFILE ─────────────────────────────────────────────────────── */
.profile-banner {
  background: rgba(255,255,255,0.03) !important;
}
.profile-stat-card {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
  transition: all 220ms ease !important;
}
.profile-stat-card:active {
  background: rgba(212,175,55,0.05) !important;
  border-color: rgba(212,175,55,0.16) !important;
}
.profile-menu {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}
.pm-item { transition: background 120ms ease !important; }
.pm-item:active { background: rgba(255,255,255,0.04) !important; }
.pm-icon {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
}
.pm-divider { background: rgba(255,255,255,0.055) !important; }

/* ── PLAYER / NOW PLAYING ────────────────────────────────────────── */
.player {
  background: rgba(0,0,0,0.97) !important;
  backdrop-filter: blur(80px) !important;
  -webkit-backdrop-filter: blur(80px) !important;
}
.player-top-bar {
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}
.player-artwork {
  border-radius: 18px !important;
  box-shadow: 0 12px 60px rgba(0,0,0,0.7) !important;
}
.progress-bar-track {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 2px !important;
}
.progress-bar-fill {
  background: linear-gradient(to right, var(--gold, #D4AF37), var(--gold-hi, #E8D476)) !important;
}
.player-btn {
  color: rgba(255,255,255,0.7) !important;
  transition: color 220ms ease, opacity 220ms ease !important;
}
.player-btn:active { color: var(--gold, #D4AF37) !important; opacity: 0.8 !important; }
.player-play-btn {
  background: var(--gold, #D4AF37) !important;
  color: #000 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 18px rgba(212,175,55,0.3) !important;
}
.like-btn.liked { color: var(--gold, #D4AF37) !important; }

/* ── PLAYLIST VIEW ───────────────────────────────────────────────── */
#playlist-view-overlay {
  background: rgba(0,0,0,0.97) !important;
}
.pl-top-bar {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}
.pl-follow-btn {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: var(--gold, #D4AF37) !important;
  border-radius: 100px !important;
  font-size: 12px !important; font-weight: 600 !important;
}
.pl-follow-btn.following {
  background: rgba(212,175,55,0.08) !important;
}
.pl-hero-info { background: transparent !important; }

/* ── ARTIST PAGE ─────────────────────────────────────────────────── */
#artist-page-overlay {
  background: rgba(0,0,0,0.97) !important;
}
.ap-bar {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}
#ap-follow-btn {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: var(--gold, #D4AF37) !important;
  border-radius: 100px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important; font-size: 13px !important;
}
#ap-follow-btn.following {
  background: rgba(212,175,55,0.08) !important;
}

/* ── TRACK DETAIL ────────────────────────────────────────────────── */
.track-detail-sheet, #track-detail-overlay {
  background: rgba(0,0,0,0.98) !important;
  backdrop-filter: blur(40px) !important;
}

/* ── CHARTS OVERLAY ──────────────────────────────────────────────── */
#charts-overlay {
  background: rgba(0,0,0,0.97) !important;
}

/* ── LIKED SONGS / SUPPORT OVERLAYS ─────────────────────────────── */
#liked-songs-overlay, #support-overlay {
  background: rgba(0,0,0,0.97) !important;
}
.sup-cat {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important; font-weight: 500 !important;
  padding: 5px 13px !important;
  transition: all 220ms ease !important;
}
.sup-cat.active {
  background: rgba(212,175,55,0.07) !important;
  border-color: rgba(212,175,55,0.22) !important;
  color: var(--gold, #D4AF37) !important;
}

/* ── SETTINGS ────────────────────────────────────────────────────── */
#view-settings {
  background: #000 !important;
}
.sett-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 20px 12px !important;
}
.sett-row { transition: background 120ms ease !important; }
.sett-row:active { background: rgba(255,255,255,0.04) !important; }
.sett-label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  padding: 18px 20px 8px !important;
}
.sett-divider { background: rgba(255,255,255,0.055) !important; height: 1px !important; }
.sett-val { color: rgba(255,255,255,0.35) !important; font-size: 13px !important; }
.sett-toggle {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  transition: all 220ms ease !important;
}
.sett-toggle.on { background: var(--gold, #D4AF37) !important; }

/* ── CLUB DJ ─────────────────────────────────────────────────────── */
.club-dj-screen, #view-clubdj {
  background: #000 !important;
}
.dj-session-card {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 16px !important;
  transition: all 220ms ease !important;
}
.dj-session-card:active { border-color: rgba(212,175,55,0.16) !important; }
.dj-persona-chip {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important;
  transition: all 220ms ease !important;
  color: rgba(255,255,255,0.6) !important;
}
.dj-persona-chip.active, .dj-persona-chip.sel {
  background: rgba(212,175,55,0.07) !important;
  border-color: rgba(212,175,55,0.22) !important;
  color: var(--gold, #D4AF37) !important;
}
.dj-play-btn {
  background: var(--gold, #D4AF37) !important;
  color: #000 !important; border: none !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 16px rgba(212,175,55,0.25) !important;
}

/* ── ONBOARDING ──────────────────────────────────────────────────── */
#onboard { background: #000 !important; }
.ob-genre {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 12px !important;
  transition: all 220ms ease !important;
}
.ob-genre.sel {
  background: rgba(212,175,55,0.06) !important;
  border-color: rgba(212,175,55,0.25) !important;
}
.ob-genre-icon { font-size: 0 !important; display: none !important; }
.ob-tier {
  background: rgba(255,255,255,0.026) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}
.ob-tier.sel, .ob-tier.featured {
  border-color: rgba(212,175,55,0.25) !important;
}
.ob-tier-badge {
  background: var(--gold, #D4AF37) !important;
  color: #000 !important; border-radius: 0 0 8px 8px !important;
  font-size: 9px !important; letter-spacing: 0.08em !important;
}
.ob-btn {
  background: var(--gold, #D4AF37) !important;
  color: #000 !important; border-radius: 100px !important;
  font-weight: 700 !important; box-shadow: 0 2px 16px rgba(212,175,55,0.22) !important;
}
.ob-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important; letter-spacing: -0.02em !important;
}
.ob-dot.active { background: var(--gold, #D4AF37) !important; }

/* ── MODALS / BOTTOM SHEETS ──────────────────────────────────────── */
[class*="-sheet"], [class*="-modal"], .bottom-sheet, .overlay-panel {
  background: rgba(8,8,8,0.97) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
}
.sheet-handle {
  background: rgba(255,255,255,0.14) !important;
  border-radius: 3px !important;
}

/* Playlist action menu */
.pl-menu-sheet {
  background: rgba(8,8,8,0.97) !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ── TOAST ───────────────────────────────────────────────────────── */
.toast {
  background: rgba(18,16,12,0.94) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(24px) !important;
  font-size: 13px !important; font-weight: 500 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* ── PLANS / UPGRADE OVERLAY ─────────────────────────────────────── */
.plan-card, .pc-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 18px !important;
  transition: all 220ms ease !important;
}
.plan-card.featured, .pc-card.featured {
  border-color: rgba(212,175,55,0.22) !important;
  background: rgba(212,175,55,0.03) !important;
}
.pc-price { color: rgba(255,255,255,0.9) !important; }
.pc-amt { font-weight: 800 !important; letter-spacing: -0.03em !important; }
.pc-period { color: rgba(255,255,255,0.4) !important; font-size: 13px !important; }

/* ── SKELETON LOADERS ────────────────────────────────────────────── */
.skeleton, [class*="skel"] {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.04) 75%) !important;
  background-size: 200% 100% !important;
  animation: ds2Skeleton 1.8s ease-in-out infinite !important;
  border-radius: 8px !important;
}
@keyframes ds2Skeleton {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── EMPTY STATES ────────────────────────────────────────────────── */
.empty-state, [class*="empty"] {
  color: rgba(255,255,255,0.28) !important;
  font-size: 14px !important; font-weight: 400 !important;
  text-align: center !important;
}

/* ── VERIFY EMAIL OVERLAY ────────────────────────────────────────── */
#verify-overlay {
  background: rgba(0,0,0,0.96) !important;
  backdrop-filter: blur(40px) !important;
}
.verify-digit {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important; color: rgba(255,255,255,0.95) !important;
  font-size: 22px !important; font-weight: 700 !important;
}
.verify-digit:focus { border-color: rgba(212,175,55,0.3) !important; }

/* ── INPUTS GLOBAL ───────────────────────────────────────────────── */
input, textarea, select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(212,175,55,0.28) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.25) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.25) !important;
}

/* ── PAGE TRANSITIONS ────────────────────────────────────────────── */
.view {
  transition: opacity 360ms var(--ease, cubic-bezier(0.25,0.46,0.45,0.94)) !important;
}

/* ── REMOVE EMOJI ICONS FROM ONBOARDING ─────────────────────────── */
.ob-genre-icon::before, .ob-genre-icon::after { display: none !important; }
.ob-genre-icon img { display: none !important; }

/* ── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes ds2FadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes ds2SlideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds2ScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   HUB — OxSoft Design System 2.0
   ══════════════════════════════════════════════════════════════════ */

/* Hub root tokens */
body:has(#hub-app) {
  background: #000 !important;
}
#hub-app { background: #000 !important; }

/* Hub sidebar */
.hub-sidebar {
  background: rgba(8,8,8,0.9) !important;
  border-right: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.sidebar-logo-text {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important; font-size: 18px !important;
  letter-spacing: -0.02em !important;
}
.sidebar-logo-sub {
  font-size: 9px !important; letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.25) !important;
}
.hub-nav-item {
  border-radius: 10px !important;
  transition: all 180ms ease !important;
  color: rgba(255,255,255,0.45) !important;
}
.hub-nav-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.8) !important;
}
.hub-nav-item.active {
  background: rgba(212,175,55,0.07) !important;
  color: var(--gold, #D4AF37) !important;
  border-left: 2px solid var(--gold, #D4AF37) !important;
}
.nav-icon { color: inherit !important; }
.sidebar-user {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
}
.sidebar-avatar {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.2) !important;
}

/* Hub main area */
.hub-main, .hub-content {
  background: #000 !important;
}
.hub-topbar {
  background: rgba(0,0,0,0.8) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) !important;
}

/* Hub cards */
.hub-card, .stat-card, [class*="hub-panel"], [class*="dash-card"] {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px) !important;
}
.hub-card h3, .stat-card h3 {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
}
.stat-val, .hub-stat-num {
  font-size: 28px !important; font-weight: 800 !important;
  letter-spacing: -0.03em !important; color: rgba(255,255,255,0.92) !important;
}
.stat-label, .hub-stat-label {
  font-size: 11px !important; color: rgba(255,255,255,0.38) !important;
}

/* Hub table */
.hub-table { border-collapse: collapse !important; width: 100% !important; }
.hub-table th {
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  padding: 8px 12px !important; background: transparent !important;
}
.hub-table td {
  font-size: 13px !important; color: rgba(255,255,255,0.7) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding: 10px 12px !important;
}
.hub-table tr:hover td { background: rgba(255,255,255,0.025) !important; }

/* Hub status badges */
.status-badge, [class*="badge-"], [class*="-badge"] {
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  padding: 3px 8px !important; border-radius: 100px !important;
}
.badge-green, .status-active, .status-approved, .status-online {
  background: rgba(100,200,120,0.1) !important;
  color: rgba(100,210,130,0.8) !important;
  border: 1px solid rgba(100,200,120,0.15) !important;
}
.badge-red, .status-error, .status-rejected, .status-offline {
  background: rgba(220,80,80,0.1) !important;
  color: rgba(225,100,100,0.8) !important;
  border: 1px solid rgba(220,80,80,0.15) !important;
}
.badge-yellow, .status-pending, .status-warning {
  background: rgba(212,175,55,0.1) !important;
  color: rgba(212,175,55,0.8) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
}
.badge-blue, .status-processing, .status-scheduled {
  background: rgba(120,160,220,0.1) !important;
  color: rgba(140,180,230,0.7) !important;
  border: 1px solid rgba(120,160,220,0.12) !important;
}

/* Hub buttons */
.btn-gold, .hub-btn-primary {
  background: var(--gold, #D4AF37) !important; color: #000 !important;
  border: none !important; border-radius: 100px !important;
  font-weight: 700 !important; font-size: 13px !important;
  box-shadow: 0 2px 14px rgba(212,175,55,0.2) !important;
}
.btn-ghost, .hub-btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.6) !important;
  border-radius: 100px !important;
  transition: all 220ms ease !important;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.85) !important; }
.btn-danger {
  background: rgba(220,80,80,0.08) !important;
  border: 1px solid rgba(220,80,80,0.18) !important;
  color: rgba(220,100,100,0.9) !important;
  border-radius: 100px !important;
}

/* Hub login */
.login-box {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
}
.login-logo { font-family: 'DM Sans', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }

/* Hub remove colorful --blue --green --red --purple usage */
[style*="color:#3B82F6"], [style*="color: #3B82F6"] { color: rgba(140,180,230,0.7) !important; }
[style*="color:#22C55E"], [style*="color: #22C55E"] { color: rgba(100,200,130,0.7) !important; }
[style*="color:#EF4444"], [style*="color: #EF4444"] { color: rgba(220,100,100,0.8) !important; }
[style*="color:#A855F7"], [style*="color: #A855F7"] { color: rgba(180,130,210,0.7) !important; }
[style*="background:#3B82F6"], [style*="background: #3B82F6"] { background: rgba(100,150,220,0.1) !important; }
[style*="background:#22C55E"], [style*="background: #22C55E"] { background: rgba(80,180,110,0.1) !important; }
[style*="background:#EF4444"], [style*="background: #EF4444"] { background: rgba(200,70,70,0.1) !important; }

/* Hub mobile nav */
.hub-mobile-nav {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN PWA — Design System 2.0
   ══════════════════════════════════════════════════════════════════ */
body:has(#login), body:has(#app) {
  /* Already handled above */
}
#login, #app {
  background: #000 !important;
}
.admin-nav, [class*="admin-side"] {
  background: rgba(8,8,8,0.9) !important;
  border-right: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) !important;
}
.admin-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}
.section-head, .admin-section-title {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ARTIST PORTAL — Design System 2.0
   ══════════════════════════════════════════════════════════════════ */
body:has(#artist-app) {
  background: #000 !important;
}
.artist-app, #artist-app { background: #000 !important; }
.artist-header {
  background: rgba(0,0,0,0.8) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) !important;
}
.artist-nav {
  background: rgba(0,0,0,0.82) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) !important;
}
.artist-card, [class*="up-card"], .upload-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}
.artist-stat-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}
.artist-stat-val {
  font-size: 26px !important; font-weight: 800 !important;
  letter-spacing: -0.03em !important; color: rgba(255,255,255,0.92) !important;
}
.artist-stat-label {
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
}
.btn-primary, .btn-secondary {
  border-radius: 100px !important; font-weight: 600 !important;
  transition: all 220ms ease !important;
}
.btn-primary {
  background: var(--gold, #D4AF37) !important; color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(212,175,55,0.2) !important;
}
.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}
.btn-secondary:hover { border-color: rgba(212,175,55,0.2) !important; color: var(--gold, #D4AF37) !important; }

/* Distribution steps */
.up-step, [class*="wizard-step"] {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
}
.up-step-num {
  background: rgba(212,175,55,0.08) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  color: var(--gold, #D4AF37) !important;
  border-radius: 50% !important;
}
.up-step-num.done { background: rgba(212,175,55,0.15) !important; }
.up-step.active { border-color: rgba(212,175,55,0.18) !important; }

/* Genre/style chips in artist portal */
.style-chip, .genre-chip {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important; color: rgba(255,255,255,0.6) !important;
  font-size: 12px !important;
}
.style-chip.sel, .genre-chip.sel {
  background: rgba(212,175,55,0.07) !important;
  border-color: rgba(212,175,55,0.22) !important;
  color: var(--gold, #D4AF37) !important;
}

/* AI cover section */
.ai-gen-card, #ai-section {
  background: rgba(212,175,55,0.03) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 14px !important;
}

/* ── FINAL SAFETY OVERRIDES ─────────────────────────────────────── */
/* No bright coloured backgrounds */
[style*="background:#ff"], [style*="background: #ff"] { background: transparent !important; }
[style*="background:linear-gradient(135deg, #ff"] { background: rgba(255,255,255,0.04) !important; }

/* No heavy box shadows */
[style*="box-shadow: 0 4px 20px rgba(255"] { box-shadow: none !important; }

/* Consistent border radius */
[style*="border-radius:8px"] { border-radius: 10px !important; }

/* Lucide icon stroke consistency */
svg[data-lucide] { stroke-width: 1.5 !important; }