/* ================================================
   THEME.CSS — AbMp5 Design System 2026
   Palette: Midnight Blue · Gold · Cyan · Coral · Cream
   ================================================ */

:root {
  --bg:         #060b1e !important;
  --bg2:        #0a0f28 !important;
  --surface:    #111d3a !important;
  --border:     #1c2d52 !important;
  --text:       #f2ede4 !important;
  --text-muted: #8a9cc0 !important;
  --neon-violet: #FFD600 !important;
  --neon-cyan:   #00D4FF !important;
  --neon-orange: #FF6B6B !important;
  --gold:  #FFD600;
  --cyan:  #00D4FF;
  --coral: #FF6B6B;
  --cream: #f2ede4;
}

/* ── BODY ── */
html, body { background: #060b1e !important; color: #f2ede4 !important; }
body {
  background:
    radial-gradient(ellipse at 15% 0%,   rgba(255,214,0,0.12)  0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(0,212,255,0.10)  0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%,  rgba(6,11,30,1)       0%, #060b1e 100%)
    !important;
  background-attachment: fixed !important;
}
body::before, body::after { display: none !important; }

/* ── NAV ── */
#navbar { background: rgba(6,11,30,0.92) !important; border-bottom: 1px solid rgba(255,214,0,0.12) !important; backdrop-filter: blur(24px) !important; }
#navbar.scrolled { background: rgba(6,11,30,0.98) !important; border-bottom-color: rgba(255,214,0,0.25) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.6) !important; }
.nav-logo { color: #f2ede4 !important; }
.nav-logo span { color: #FFD600 !important; }
.nav-links { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.07) !important; }
.nav-links li a { color: rgba(242,237,228,0.5) !important; }
.nav-links li a:hover { color: #f2ede4 !important; background: rgba(255,255,255,0.06) !important; }
.nav-links li a.active { color: #fff !important; background: rgba(255,214,0,0.18) !important; box-shadow: 0 0 0 1px rgba(255,214,0,0.4) inset !important; }
.nav-links.open { background: rgba(6,11,30,0.98) !important; }
.nav-auth .btn-outline { border-color: rgba(255,214,0,0.3) !important; color: #f2ede4 !important; }

/* ── BUTTONS ── */
.btn-primary { background: #FFD600 !important; color: #060b1e !important; font-weight: 700 !important; }
.btn-primary:hover { background: #ffe033 !important; box-shadow: 0 0 25px rgba(255,214,0,0.5) !important; transform: translateY(-2px) !important; }
.btn-outline { border-color: rgba(242,237,228,0.2) !important; color: #f2ede4 !important; background: transparent !important; }
.btn-outline:hover { border-color: #FFD600 !important; color: #FFD600 !important; }
.btn-ghost { color: #f2ede4 !important; border-color: rgba(242,237,228,0.15) !important; }
.btn-glow { box-shadow: 0 0 20px rgba(255,214,0,0.4), 0 0 50px rgba(255,214,0,0.1) !important; }
.btn-glow:hover { box-shadow: 0 0 35px rgba(255,214,0,0.7), 0 0 70px rgba(255,214,0,0.2) !important; }

/* ── HERO ── */
#hero { background: transparent !important; }
.hero-title { color: #fff !important; text-shadow: 0 0 50px rgba(255,214,0,0.5), 0 0 100px rgba(255,214,0,0.15), 2px 2px 0 rgba(0,0,0,0.4) !important; }
.hero-sub { color: rgba(242,237,228,0.65) !important; }
.hero-stat span { color: #FFD600 !important; }
.hero-stat small { color: rgba(242,237,228,0.45) !important; }
.hero-stat-sep { background: rgba(255,214,0,0.2) !important; }
.hero-scroll { color: rgba(242,237,228,0.35) !important; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 { color: #f2ede4 !important; }
h2 span { color: #00D4FF !important; text-shadow: 0 0 20px rgba(0,212,255,0.3) !important; }
.section-eyebrow, .street-eyebrow { color: #FFD600 !important; }
p, span, li, label, td, th { color: inherit; }

/* ── SECTIONS ── */
section { background: transparent !important; }
.street-section { background: rgba(5,8,22,0.97) !important; border-top: 1px solid rgba(255,214,0,0.06) !important; border-left: none !important; border-right: none !important; }
#topPlaylist { background: rgba(8,12,32,0.6) !important; border-top: 1px solid rgba(255,214,0,0.06) !important; }
#licencesPreview { background: rgba(8,12,32,0.6) !important; }
#undergroundSection { background: rgba(4,5,16,1) !important; }
#marketplaceCta { background: linear-gradient(135deg, rgba(255,214,0,0.06) 0%, transparent 50%, rgba(0,212,255,0.04) 100%) !important; }

/* ── CARDS ── */
.beat-card, .type-card, .license-card, .playlist-item {
  background: rgba(17,29,58,0.85) !important;
  border: 1px solid rgba(255,214,0,0.1) !important;
  backdrop-filter: blur(8px) !important;
}
.beat-card:hover { border-color: rgba(255,214,0,0.4) !important; box-shadow: 0 10px 40px rgba(255,214,0,0.15), 0 0 0 1px rgba(255,214,0,0.2) !important; transform: translateY(-5px) !important; }
.type-card:hover { border-color: rgba(var(--tc),0.7) !important; background: rgba(17,29,58,0.95) !important; }
.license-card { background: rgba(17,29,58,0.9) !important; }
.license-card:hover { border-color: #00D4FF !important; box-shadow: 0 0 20px rgba(0,212,255,0.15) !important; }
.license-card.featured { border-color: #00D4FF !important; box-shadow: 0 0 30px rgba(0,212,255,0.2) !important; }
.license-badge { background: #00D4FF !important; color: #060b1e !important; }
.beat-title { color: #f2ede4 !important; }
.beat-artist { color: #FFD600 !important; }
.beat-meta { color: #8a9cc0 !important; }
.price-basic { color: #00D4FF !important; }

/* ── PLAYLIST ── */
.playlist-item { border-bottom: 1px solid rgba(255,214,0,0.06) !important; border-radius: 0 !important; }
.playlist-item:hover { background: rgba(255,214,0,0.04) !important; }
.playlist-item.playing { background: rgba(255,214,0,0.08) !important; }
.playlist-title { color: #f2ede4 !important; }
.playlist-artist { color: #FF6B6B !important; }
.playlist-price { color: #FFD600 !important; }
.playlist-num { color: rgba(242,237,228,0.25) !important; }
.playlist-item.playing .playlist-num { color: #FFD600 !important; }
.playlist-play-btn { background: rgba(255,214,0,0.08) !important; border-color: rgba(255,214,0,0.2) !important; color: #FFD600 !important; }
.playlist-play-btn:hover, .playlist-item.playing .playlist-play-btn { background: #FFD600 !important; color: #060b1e !important; border-color: #FFD600 !important; }
.btn-play-all { background: linear-gradient(135deg, #FFD600, #FF9500) !important; color: #060b1e !important; }
.playlist-genre { background: rgba(255,214,0,0.08) !important; border-color: rgba(255,214,0,0.15) !important; color: rgba(242,237,228,0.6) !important; }

/* ── BEAT PLAY BUTTON ── */
.beat-play-btn { background: rgba(0,0,0,0.5) !important; }

/* ── ARTIST TYPE CARDS ── */
.artist-type-card { background: rgba(17,29,58,0.7) !important; border-color: rgba(255,255,255,0.07) !important; }
.artist-type-card:hover { border-color: var(--atc, #FFD600) !important; }

/* ── LICENCES ── */
.license-card h3 { color: #f2ede4 !important; }
.license-card p { color: #8a9cc0 !important; }
.license-card ul li { color: #8a9cc0 !important; border-bottom-color: rgba(255,255,255,0.05) !important; }

/* ── MARKETPLACE CTA ── */
.mkt-stat { background: rgba(255,214,0,0.06) !important; border-color: rgba(255,214,0,0.18) !important; }
.mkt-stat span { color: #FFD600 !important; }
.mkt-cta-text p { color: rgba(242,237,228,0.6) !important; }

/* ── BUDGET BADGES ── */
.budget-badge { background: rgba(255,214,0,0.08) !important; border-color: rgba(255,214,0,0.22) !important; color: #FFD600 !important; }

/* ── UNDERGROUND ── */
.underground-badge { background: rgba(255,214,0,0.15) !important; border-color: rgba(255,214,0,0.35) !important; color: #FFD600 !important; }
#undergroundSection h2 { animation: glitch-gold 5s infinite !important; }
@keyframes glitch-gold {
  0%,88%,100% { transform:none; }
  90% { transform:skewX(-3deg); text-shadow: 3px 0 #FF6B6B, -3px 0 #00D4FF; }
  92% { transform:skewX(2deg); text-shadow: -2px 0 #FFD600, 2px 0 #00D4FF; }
  94% { transform:none; }
}

/* ── PLAYER ── */
#globalPlayer { background: rgba(4,6,18,0.97) !important; border-top: 1px solid rgba(255,214,0,0.15) !important; backdrop-filter: blur(20px) !important; }
#playerTitle { color: #f2ede4 !important; }
#playerBpm { color: #8a9cc0 !important; }
#playerPlayBtn { background: #FFD600 !important; color: #060b1e !important; }
.progress-fill { background: linear-gradient(90deg, #FFD600, #00D4FF) !important; }
.progress-bar { background: rgba(255,255,255,0.1) !important; }

/* ── CURSOR ── */
#cursor { border-color: rgba(242,237,228,0.7) !important; box-shadow: 0 0 14px rgba(255,214,0,0.3) !important; }
#cursor.cursor-play { background: rgba(255,214,0,0.15) !important; border-color: #FFD600 !important; box-shadow: 0 0 24px rgba(255,214,0,0.5) !important; }
#cursor.cursor-view { background: rgba(0,212,255,0.12) !important; border-color: #00D4FF !important; }

/* ── FOOTER ── */
footer, .footer-inner { background: rgba(4,6,18,0.99) !important; }
footer { border-top: 1px solid rgba(255,214,0,0.1) !important; }
.footer-logo span { color: #FFD600 !important; }
.footer-sub { color: #8a9cc0 !important; }
.footer-links a { color: #8a9cc0 !important; }
.footer-links a:hover { color: #FFD600 !important; }
.footer-copy { color: rgba(242,237,228,0.25) !important; }

/* ── FORMS ── */
input[type=text], input[type=email], input[type=password], textarea, select {
  background: rgba(17,29,58,0.8) !important;
  border: 1px solid rgba(255,214,0,0.15) !important;
  color: #f2ede4 !important;
  border-radius: 6px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #FFD600 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,214,0,0.12) !important;
}
label { color: #f2ede4 !important; }
::placeholder { color: #8a9cc0 !important; }

/* ── STREET DIVIDER (off) ── */
.street-divider, .torn-fence-divider { display: none !important; }

/* ── IMAGES FULL OPACITY ── */
.hero-bg-img, .typebeats-silhouette, .underground-img-bg,
.underground-chains, .featured-glitch, .budget-fence,
.mkt-silhouette, .mkt-chains { opacity: 1 !important; }
.reveal-img { opacity: 1 !important; transform: none !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #060b1e; }
::-webkit-scrollbar-thumb { background: rgba(255,214,0,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,214,0,0.5); }

/* ── SELECTION ── */
::selection { background: rgba(255,214,0,0.25); color: #fff; }