/* =============================================================
   V5 Terminal Theme — Radial AV
   Dark, minimal, terminal-inspired design system
   Overrides everything with !important for guaranteed V5 look
   ============================================================= */

/* ----- CSS Variables ----- */
:root {
  /* V5 Terminal palette */
  --bg: #000 !important;
  --surface: #0a0a0a !important;
  --surface2: #111 !important;
  --surface3: #1a1a1a !important;
  --border: #1a1a1a !important;
  --text: #f0f0f0 !important;
  --text2: #888 !important;
  --text3: #444 !important;
  --accent: #d3fd50 !important;
  --accent-dim: rgba(211,253,80,.06) !important;
  --header-height: 52px !important;
  --radius: 0px !important;
  --radius-sm: 0px !important;
  --radius-lg: 12px !important;
  --font: 'Inter', system-ui, sans-serif !important;
  --font-mono: 'SF Mono', 'Fira Code', monospace !important;
  --shadow: none !important;

  /* Compatibility aliases for existing code */
  --muted: var(--text2) !important;
  --text-primary: var(--text) !important;
  --text-secondary: var(--text2) !important;
  --bg-muted: var(--surface2) !important;
  --bg-card: var(--surface) !important;
  --color-bg: var(--bg) !important;
  --color-text: var(--text) !important;
  --color-text-secondary: var(--text2) !important;
  --color-accent: var(--accent) !important;
  --color-neutral-1: var(--surface) !important;
  --color-neutral-2: var(--border) !important;
  --color-gradient-start: var(--bg) !important;
  --color-gradient-end: var(--bg) !important;
  --surface-1: var(--surface) !important;
  --surface-2: var(--surface2) !important;
  --surface-3: var(--surface3) !important;
  --border-strong: var(--border) !important;
  --accent-rgb: 211,253,80 !important;
  --accent-contrast: #000 !important;
  --card-bg: var(--surface) !important;
  --color-accent-alt: var(--accent) !important;
  --font-primary: var(--font) !important;
  --font-secondary: var(--font) !important;
  --header-grad-top: rgba(0,0,0,0.92) !important;
  --header-grad-bottom: rgba(0,0,0,0.65) !important;
  --player-overlay-grad: linear-gradient(180deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.85) 100%) !important;
  --card-hover-shadow: none !important;
  --shadow: none !important;
}

/* ----- Global Reset Overrides ----- */
* {
  box-sizing: border-box !important;
}

body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ----- Grain Overlay ----- */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  opacity: .025 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 99999 !important;
}

/* Remove default body backgrounds from old themes */
body, body.bg-image-app, body.theme-night, body.theme-deep-dive {
  background: var(--bg) !important;
  background-image: none !important;
  animation: none !important;
}

body.bg-image-app::before,
body.theme-deep-dive::before,
body.theme-deep-dive::after {
  display: none !important;
  content: none !important;
}

/* ----- Splash Screen ----- */
#intro-splash,
#app-loading-overlay {
  background: #000 !important;
  color: #fff !important;
  transition: opacity .6s ease, visibility .6s ease !important;
}

/* ----- Header ----- */
header,
.header,
body header,
body .header {
  background: #000 !important;
  background-color: #000 !important;
  border-bottom: 1px solid var(--border) !important;
  height: var(--header-height) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.header-logo .brand-name,
.brand-name {
  color: #fff !important;
  font-weight: 600 !important;
}

.header-logo .brand-name .accent,
.logo-accent {
  color: var(--accent) !important;
}

/* Logo */
.logo {
  color: #fff !important;
}

/* ----- Nav Links ----- */
.nav-links a,
nav a,
body nav a {
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  color: var(--text2) !important;
  text-decoration: none !important;
  transition: color .3s !important;
  border-bottom: none !important;
}

.nav-links a:hover,
nav a:hover,
body nav a:hover,
.nav-links a.active,
nav a.active {
  color: var(--accent) !important;
  border-bottom: none !important;
}

/* Nav buttons in bottom nav */
.nav-btn,
body .nav-btn {
  color: var(--text2) !important;
}

.nav-btn.active {
  color: var(--accent) !important;
}

/* ----- Buttons (.btn-primary) ----- */
.btn-primary,
body .btn-primary,
body .btn {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #000 !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  padding: .6rem 1.5rem !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity .3s !important;
}

.btn-primary:hover,
body .btn-primary:hover,
body .btn:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  opacity: .8 !important;
  box-shadow: none !important;
}

/* ----- Buttons (.btn-ghost) ----- */
.btn-ghost,
body .btn-ghost {
  background: transparent !important;
  color: var(--text2) !important;
  border: 1px solid transparent !important;
}

.btn-ghost:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* ----- Buttons (.btn-secondary) ----- */
.btn-secondary,
body .btn-secondary {
  background: var(--surface2) !important;
  background-color: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
}

.btn-secondary:hover {
  background: var(--surface3) !important;
  border-color: var(--accent) !important;
}

/* ----- Buttons (.btn-outline) ----- */
.btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  padding: .9rem 2.5rem !important;
  border-radius: 100px !important;
  transition: all .3s !important;
}

.btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ----- Action buttons ----- */
.action-btn,
body .action-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}

.action-btn:hover,
body .action-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ----- Cards ----- */
.track-card,
.release-card,
.artist-card,
body .track-card,
body .release-card,
body .artist-card,
body .card,
body .video-card,
body .track-item {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .3s, background .3s !important;
}

.track-card:hover,
.release-card:hover,
.artist-card:hover,
body .track-card:hover,
body .release-card:hover,
body .artist-card:hover,
body .card:hover,
body .video-card:hover,
body .track-item:hover {
  border-color: var(--accent) !important;
  background: var(--surface2) !important;
  box-shadow: none !important;
}

/* ----- Album cards ----- */
.album-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

.album-card:hover {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* ----- Grids ----- */
.track-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 0 !important;
}

/* Card borders collapse visually */
.track-card,
.release-card,
.artist-card {
  border: 1px solid var(--border) !important;
}

/* ----- Modals ----- */
.modal-overlay {
  background: rgba(0,0,0,.9) !important;
}

.modal-content {
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

/* ----- Menu Dropdown ----- */
.menu-dropdown,
body .menu-dropdown {
  background: rgba(0,0,0,.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
}

.menu-item,
body .menu-item {
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  transition: background .15s !important;
}

.menu-item:hover,
body .menu-item:hover {
  background: rgba(255,255,255,.06) !important;
}

/* ----- Form Inputs ----- */
input,
textarea,
select,
body input,
body textarea,
body select {
  background: var(--surface2) !important;
  background-color: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  font-family: var(--font) !important;
  outline: none !important;
}

input:focus,
textarea:focus,
select:focus,
body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* ----- Search Inputs ----- */
.search-input,
input[type="search"] {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}

.search-input:focus,
input[type="search"]:focus {
  border-color: var(--accent) !important;
}

/* ----- Swiper Pagination ----- */
.swiper-pagination-bullet-active {
  background: var(--accent) !important;
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: var(--bg) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text3) !important;
}

/* ----- Footer ----- */
footer,
body footer {
  border-top: 1px solid var(--border) !important;
  color: var(--text2) !important;
  font-size: .7rem !important;
}

footer a {
  color: var(--accent) !important;
}

/* ----- Section Titles ----- */
.section-title,
body .section-title,
h2.section-title {
  font-size: clamp(1.2rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--text) !important;
}

/* ----- Tags / Accent Text ----- */
.tag,
.section-tag,
.accent-text,
[class*="tag"] {
  color: var(--accent) !important;
}

/* ----- Links ----- */
a {
  color: var(--text2) !important;
  transition: color .3s !important;
}

a:hover {
  color: var(--accent) !important;
}

/* ----- Loading Spinners ----- */
.spinner,
.loading-spinner,
[class*="spinner"] {
  border-color: var(--accent) !important;
}

/* ----- Icon Buttons ----- */
.icon-btn,
body .icon-btn {
  background: none !important;
  border: none !important;
  color: var(--text2) !important;
}

.icon-btn:hover,
body .icon-btn:hover {
  color: var(--text) !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}

/* ----- CTA Nav Button ----- */
.cta-nav {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  padding: .6rem 1.8rem !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: .65rem !important;
  transition: all .3s !important;
  letter-spacing: 1.5px !important;
}

.cta-nav:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ----- Splash/intro ----- */
#intro-splash .intro-title {
  color: #fff !important;
}

#intro-splash .intro-subtitle {
  color: var(--text2) !important;
}

/* ----- Hero Section Override ----- */
.hero {
  background: var(--bg) !important;
}

.hero h1 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -4px !important;
}

.hero h1 .thin {
  font-weight: 300 !important;
  color: rgba(255,255,255,.6) !important;
}

.hero h1 .accent {
  color: var(--accent) !important;
}

/* ----- Tab Buttons ----- */
.tab-btn,
#label-admin-tabs .label-tab,
#admin-tabs .admin-tab,
body #label-admin-tabs .label-tab,
body #admin-tabs .admin-tab {
  background: transparent !important;
  border: none !important;
  color: var(--text2) !important;
}

.tab-btn.active,
#label-admin-tabs .label-tab.active,
#admin-tabs .admin-tab.active,
.tab-btn:hover,
#label-admin-tabs .label-tab:hover,
#admin-tabs .admin-tab:hover {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
}

/* ----- Player controls ----- */
.player {
  background: var(--bg) !important;
}

.player-controls h2 {
  color: #fff !important;
}

/* ----- Tracks/items ----- */
.track-cover {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.track-info .track-title {
  color: var(--text) !important;
}

.track-info .track-artist {
  color: var(--text2) !important;
}

/* ----- Progress bars ----- */
.progress {
  background: var(--accent) !important;
}

.progress-bar {
  background: var(--border) !important;
}

/* ----- Upload progress ----- */
.upload-progress {
  background: var(--surface2) !important;
}

.upload-progress .bar {
  background: var(--accent) !important;
}

/* ----- Numbers grid ----- */
.numbers {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
}

.num-item .n {
  color: var(--accent) !important;
}

/* ----- Contact form ----- */
.contact-form input,
.contact-form textarea {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent) !important;
}

/* ----- Misc overrides ----- */
.hero-bg,
.hero-vignette {
  z-index: 0 !important;
}

.scroll-ind {
  color: var(--text3) !important;
}

/* Theme selector / nav container */
body .nav-container {
  background: #000 !important;
  border-top: 1px solid var(--border) !important;
}

/* Deep dive / night theme overrides */
.theme-deep-dive,
.theme-night {
  background: var(--bg) !important;
  background-image: none !important;
  animation: none !important;
}

/* Player overlay */
.player::before,
body.theme-deep-dive .player::before {
  display: none !important;
}

/* Ensure nav links don't have bottom border */
body nav a:hover,
body nav a.active {
  border-bottom: none !important;
}

/* Section borders */
section {
  border-top: 1px solid var(--border) !important;
}

/* ----- Home section boxes ----- */
body.theme-night #home-section .home-box,
body.theme-night #music-section .music-group.music-box {
  border-color: var(--border) !important;
}

/* Remove all background gradients, radial patterns, animations */
.bg-image-app,
body.bg-image-app {
  background-image: none !important;
  background: var(--bg) !important;
  animation: none !important;
}

@keyframes gradient-scan {
  /* kill it */
  0%, 50%, 100% { background-position: 0 0 !important; }
}

@keyframes wave-scan {
  0%, 50%, 100% { transform: translateX(0) !important; }
}

@keyframes dd-aurora {
  from, to { background-position: 0 0 !important; }
}

@keyframes dd-stars-near {
  0%, 100% { background-position: 0 0 !important; }
}

@keyframes dd-stars-far {
  0%, 100% { background-position: 0 0 !important; }
}

/* ----- Track cards in grids: remove gap, collapse borders ----- */
.showcase-grid {
  gap: 0 !important;
}

/* ----- Navigation data-section buttons ----- */
body .nav-container .nav-btn {
  color: var(--text2) !important;
}

body .nav-container .nav-btn.active,
body .nav-container .nav-btn[data-section].active {
  color: var(--accent) !important;
}