/* DJ Studio Professional Theme */

/* Import DJ-style font */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  --dj-dark: #0a0a0a;
  --dj-darker: #050505;
  --dj-gray: #1a1a1a;
  --dj-panel: #151515;
  --dj-accent: #00ff41;
  --neon-green: #00ff41;
  --dj-accent-glow: rgba(0, 255, 65, 0.3);
  --dj-red: #ff0844;
  --neon-red: #ff0844;
  --dj-red-glow: rgba(255, 8, 68, 0.4);
  --dj-blue: #00d9ff;
  --neon-cyan: #00d9ff;
  --dj-blue-glow: rgba(0, 217, 255, 0.3);
  --dj-orange: #ff6b00;
  --dj-orange-glow: rgba(255, 107, 0, 0.3);
  --dj-border: #333;
  --dj-text: #e0e0e0;
  --dj-text-dim: #888;
}

/* Global overrides */
body, html {
  background: linear-gradient(135deg, var(--dj-darker) 0%, var(--dj-dark) 50%, #0d0d0d 100%) !important;
  font-family: 'Rajdhani', 'Roboto', sans-serif !important;
  overflow-x: hidden;
}

.v-application {
  background: transparent !important;
}

/* App Bar - DJ Console Style */
.v-app-bar {
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
  border-bottom: 2px solid var(--dj-accent) !important;
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.2) !important;
}

.v-toolbar__title {
  font-size: 0 !important;
  padding: 0 !important;
  width: 200px !important;
  height: 50px !important;
  background-image: url('https://myautodj.com/images/logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center left !important;
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 255, 65, 0.3)) !important;
  transition: all 0.3s ease !important;
}

.v-toolbar__title:hover {
  filter: brightness(1.4) drop-shadow(0 0 20px rgba(0, 255, 65, 0.5)) !important;
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .v-toolbar__title {
    width: 150px !important;
    height: 40px !important;
  }
}

/* Navigation Drawer - Enhanced Settings Panel */
.v-navigation-drawer {
  background: linear-gradient(180deg, #1a1a1a 0%, var(--dj-dark) 100%) !important;
  border-right: 2px solid var(--dj-accent) !important;
  box-shadow: 4px 0 30px rgba(0, 255, 65, 0.2),
              4px 0 60px rgba(0, 0, 0, 0.9) !important;
}

.v-navigation-drawer__content {
  padding: 16px 8px !important;
}

/* Settings Section Headers */
.v-navigation-drawer .v-card {
  margin-bottom: 20px !important;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(15, 15, 15, 0.95)) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px !important;
  overflow: visible !important;
}

.v-navigation-drawer .v-card__title {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.15), transparent) !important;
  border-bottom: 2px solid rgba(0, 255, 65, 0.3) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  position: relative !important;
}

.v-navigation-drawer .v-card__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--dj-accent);
  box-shadow: 0 0 10px var(--dj-accent-glow);
}

.v-navigation-drawer .v-card__text {
  padding: 16px !important;
}

/* Settings Form Fields Organization */
.v-navigation-drawer .v-text-field,
.v-navigation-drawer .v-select {
  margin-bottom: 16px !important;
}

.v-navigation-drawer .v-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  color: #888 !important;
}

.v-navigation-drawer .v-input--is-focused .v-label {
  color: var(--dj-accent) !important;
}

/* Settings Dividers */
.v-navigation-drawer .v-divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
  margin: 24px 0 !important;
}

/* Cards - DJ Module Style */
.v-card {
  background: linear-gradient(145deg, #1a1a1a 0%, var(--dj-panel) 100%) !important;
  border: 1px solid var(--dj-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  color: var(--dj-text) !important;
}

.v-card__title {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: var(--dj-accent) !important;
  border-bottom: 1px solid var(--dj-border);
  padding-bottom: 12px !important;
  text-shadow: 0 0 10px var(--dj-accent-glow);
}

.v-card__text {
  color: var(--dj-text) !important;
}

/* Buttons - DJ Control Style */
.v-btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.v-btn.primary {
  background: linear-gradient(135deg, var(--dj-accent) 0%, #00cc35 100%) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px var(--dj-accent-glow), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.v-btn.primary:hover {
  box-shadow: 0 6px 25px var(--dj-accent-glow),
              0 0 30px var(--dj-accent-glow),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

.v-btn.error,
.stream-btn.active {
  background: linear-gradient(135deg, var(--dj-red) 0%, #cc0035 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px var(--dj-red-glow),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 4px 15px var(--dj-red-glow); }
  50% { box-shadow: 0 4px 25px var(--dj-red-glow), 0 0 40px var(--dj-red-glow); }
}

/* Play/Pause buttons */
.v-btn.light-green.lighten-4 {
  background: linear-gradient(135deg, #00ff41 0%, #00cc35 100%) !important;
  color: #000 !important;
  box-shadow: 0 4px 12px var(--dj-accent-glow) !important;
}

.v-btn.deep-orange.lighten-4 {
  background: linear-gradient(135deg, var(--dj-orange) 0%, #cc5500 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--dj-orange-glow) !important;
}

.v-btn.amber.lighten-4 {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%) !important;
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
}

/* Microphone button special styling */
.microphone-btn.active {
  animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 4px 12px var(--dj-accent-glow); }
  50% { box-shadow: 0 4px 20px var(--dj-accent-glow), 0 0 30px var(--dj-accent-glow); }
}

/* Sliders - Professional DJ Fader Style */
.v-slider {
  cursor: pointer;
  padding: 12px 0 !important;
}

/* Horizontal sliders (crossfader, channel faders) */
.v-slider--horizontal .v-slider__track-container {
  height: 12px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
  border: 2px solid #222 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8),
              0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

.v-slider--horizontal .v-slider__track-fill {
  background: linear-gradient(90deg, 
    var(--dj-accent) 0%, 
    var(--dj-blue) 50%, 
    var(--dj-accent) 100%) !important;
  box-shadow: 0 0 15px var(--dj-accent-glow),
              inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  height: 8px !important;
  top: 2px !important;
}

.v-slider--horizontal .v-slider__track-background {
  background: #0a0a0a !important;
  border: none !important;
  height: 8px !important;
  top: 2px !important;
}

/* Vertical sliders (volume faders) */
.v-slider--vertical {
  min-height: 200px !important;
  margin: 0 20px !important;
}

.v-slider--vertical .v-slider__track-container {
  width: 16px !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
  border: 2px solid #333 !important;
  box-shadow: inset 2px 0 10px rgba(0, 0, 0, 0.8),
              inset -2px 0 10px rgba(0, 0, 0, 0.6),
              0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.v-slider--vertical .v-slider__track-fill {
  background: linear-gradient(180deg, 
    var(--dj-red) 0%, 
    var(--dj-orange) 30%,
    #ffdd00 60%,
    var(--dj-accent) 100%) !important;
  box-shadow: 0 0 20px var(--dj-accent-glow),
              inset 2px 0 4px rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  width: 12px !important;
  left: 2px !important;
}

.v-slider--vertical .v-slider__track-background {
  background: #0a0a0a !important;
  border: none !important;
  width: 12px !important;
  left: 2px !important;
}

/* Fader Knobs - Professional Style */
.v-slider__thumb {
  width: 32px !important;
  height: 32px !important;
  background: radial-gradient(circle at 30% 30%, #f5f5f5, #ccc 50%, #999) !important;
  border: 3px solid #2a2a2a !important;
  box-shadow: 0 0 20px var(--dj-accent-glow),
              0 6px 12px rgba(0, 0, 0, 0.8),
              inset 0 2px 4px rgba(255, 255, 255, 0.4),
              inset 0 -2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

.v-slider__thumb::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 12px;
  background: #333;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.v-slider__thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 30px var(--dj-accent-glow),
              0 8px 16px rgba(0, 0, 0, 0.9),
              inset 0 2px 6px rgba(255, 255, 255, 0.5) !important;
}

.v-slider__thumb:active {
  transform: scale(1.1);
  border-color: var(--dj-accent) !important;
}

/* Vertical fader thumb styling */
.v-slider--vertical .v-slider__thumb {
  width: 48px !important;
  height: 24px !important;
  border-radius: 4px !important;
}

.v-slider--vertical .v-slider__thumb::before {
  width: 20px;
  height: 2px;
}

/* Fader Value Display */
.v-slider__thumb-label {
  background: rgba(0, 0, 0, 0.95) !important;
  color: var(--dj-accent) !important;
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 0 15px var(--dj-accent-glow),
              0 4px 12px rgba(0, 0, 0, 0.8) !important;
  border: 2px solid var(--dj-accent) !important;
  padding: 6px 10px !important;
}

/* Mixer Panel with Faders */
.v-card:has(.v-slider--vertical) {
  background: linear-gradient(145deg, #1e1e1e 0%, #0f0f0f 100%) !important;
  border: 2px solid #2a2a2a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9),
              inset 0 2px 8px rgba(0, 0, 0, 0.8),
              0 0 40px rgba(0, 255, 65, 0.1) !important;
}

/* Crossfader Special Styling */
.v-slider--horizontal:has(.v-slider__thumb-label:contains('50')) {
  margin: 24px 0 !important;
}

.v-slider--horizontal .v-slider__track-container::before {
  display: none;
}

.v-slider--horizontal .v-slider__track-container::after {
  display: none;
}

/* VU Meters - Professional Studio Style */
[id*="peak-meter"],
#microphone-peak-meter,
#call-peak-meter {
  background: #000 !important;
  border: 2px solid var(--dj-border) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8),
              0 0 15px rgba(0, 255, 65, 0.1) !important;
  padding: 4px !important;
}

/* Chips - Status Indicators */
.v-chip {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  border-width: 2px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.v-chip.deep-orange.accent-4 {
  background: var(--dj-red) !important;
  border-color: var(--dj-red) !important;
  color: #fff !important;
  animation: pulse-red 2s infinite;
}

.v-chip.green.lighten-2 {
  background: var(--dj-accent) !important;
  border-color: var(--dj-accent) !important;
  color: #000 !important;
  box-shadow: 0 0 15px var(--dj-accent-glow) !important;
}

/* Input Fields */
.v-text-field input,
.v-select__selection {
  color: var(--dj-text) !important;
  font-family: 'Rajdhani', sans-serif !important;
}

.v-text-field .v-label,
.v-select .v-label {
  color: var(--dj-text-dim) !important;
}

.v-text-field--outlined fieldset,
.v-select--outlined fieldset {
  border-color: var(--dj-border) !important;
}

.v-text-field--outlined.v-input--is-focused fieldset,
.v-select--outlined.v-input--is-focused fieldset {
  border-color: var(--dj-accent) !important;
  box-shadow: 0 0 10px var(--dj-accent-glow) !important;
}

/* Tabs */
.v-tabs {
  background: transparent !important;
}

.v-tab {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--dj-text-dim) !important;
}

.v-tab--active {
  color: var(--dj-accent) !important;
  background: rgba(0, 255, 65, 0.1) !important;
}

.v-tabs-slider {
  background: var(--dj-accent) !important;
  height: 3px !important;
  box-shadow: 0 0 10px var(--dj-accent-glow) !important;
}

/* Enhanced Library/Playlist Manager */
.v-list {
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 8px !important;
  border: 1px solid #222 !important;
}

.v-list-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s ease !important;
  margin: 2px 4px !important;
  border-radius: 4px !important;
  position: relative !important;
}

.v-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: all 0.3s ease;
}

.v-list-item:hover {
  background: rgba(0, 255, 65, 0.08) !important;
  transform: translateX(4px);
}

.v-list-item:hover::before {
  background: var(--dj-accent);
  box-shadow: 0 0 10px var(--dj-accent-glow);
}

.v-list-item--active {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.15), rgba(0, 255, 65, 0.05)) !important;
  border-left: 4px solid var(--dj-accent) !important;
  box-shadow: inset 0 0 20px var(--dj-accent-glow),
              0 2px 8px rgba(0, 0, 0, 0.4) !important;
  animation: pulse-active 2s infinite;
}

@keyframes pulse-active {
  0%, 100% { 
    box-shadow: inset 0 0 20px var(--dj-accent-glow),
                0 2px 8px rgba(0, 0, 0, 0.4);
  }
  50% { 
    box-shadow: inset 0 0 30px var(--dj-accent-glow),
                0 4px 12px rgba(0, 255, 65, 0.3);
  }
}

.v-list-item__title {
  color: var(--dj-text) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

.v-list-item__subtitle {
  color: var(--dj-text-dim) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}

.v-list-item--active .v-list-item__title {
  color: var(--dj-accent) !important;
  font-weight: 600 !important;
}

/* Track Duration/Info Display */
.v-list-item__content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.v-list-item__action {
  display: flex !important;
  gap: 8px !important;
}

/* Track Number Badge */
.v-list-item::after {
  content: attr(data-index);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #666;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #333;
  min-width: 24px;
  text-align: center;
}

.v-list-item--active::after {
  background: var(--dj-accent);
  color: #000;
  border-color: var(--dj-accent);
  box-shadow: 0 0 10px var(--dj-accent-glow);
}

/* Library Section Headers */
.v-subheader {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  color: var(--dj-accent) !important;
  text-transform: uppercase !important;
  background: rgba(0, 255, 65, 0.05) !important;
  padding: 12px 16px !important;
  border-left: 4px solid var(--dj-accent) !important;
  margin: 8px 0 !important;
  box-shadow: inset 0 0 15px var(--dj-accent-glow) !important;
}

/* Track Search/Filter Box */
.v-text-field--filled.v-input--dense > .v-input__control > .v-input__slot,
.v-text-field--outlined.v-input--dense > .v-input__control > .v-input__slot {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid #333 !important;
}

.v-text-field--filled.v-input--dense.v-input--is-focused > .v-input__control > .v-input__slot,
.v-text-field--outlined.v-input--dense.v-input--is-focused > .v-input__control > .v-input__slot {
  border-color: var(--dj-accent) !important;
  box-shadow: 0 0 15px var(--dj-accent-glow) !important;
}

/* BPM and Key indicators in tracks */
.v-chip.v-chip--outlined {
  border-color: #444 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 11px !important;
}

/* Drag and Drop Zone Enhancement */
.v-file-input {
  border: 3px dashed #333 !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
  padding: 20px !important;
  text-align: center !important;
}

.v-file-input:hover,
.v-file-input.v-input--is-focused {
  border-color: var(--dj-accent) !important;
  background: rgba(0, 255, 65, 0.05) !important;
  box-shadow: inset 0 0 30px var(--dj-accent-glow) !important;
}

.v-file-input .v-icon {
  font-size: 48px !important;
  color: var(--dj-accent) !important;
  margin-bottom: 10px !important;
}

/* File Upload */
.v-file-input {
  border: 2px dashed var(--dj-border) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: all 0.3s ease !important;
}

.v-file-input:hover {
  border-color: var(--dj-accent) !important;
  background: rgba(0, 255, 65, 0.05) !important;
}

/* Checkboxes */
.v-input--checkbox .v-icon {
  color: var(--dj-accent) !important;
}

.v-input--checkbox .v-label {
  color: var(--dj-text) !important;
}

/* Progress Circular */
.v-progress-circular {
  color: var(--dj-accent) !important;
}

/* Snackbar */
.v-snackbar__wrapper {
  background: linear-gradient(135deg, #1a1a1a, var(--dj-panel)) !important;
  border: 1px solid var(--dj-accent) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
              0 0 20px var(--dj-accent-glow) !important;
}

.v-snackbar__content {
  color: var(--dj-text) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
}

/* Icons */
.v-icon {
  transition: all 0.3s ease !important;
}

.v-btn:hover .v-icon {
  transform: scale(1.1);
}

/* Main Container Enhancements */
.v-main {
  background: transparent !important;
}

.v-main .container {
  max-width: 1600px !important;
}

/* Add subtle grid pattern background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* DJ Equipment Panel Effects */
.v-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--dj-accent) 50%, 
    transparent 100%);
  opacity: 0.3;
}

/* Mixer Panel Special Styling */
.v-card:has(.v-slider) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
              0 0 20px rgba(0, 255, 65, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Add glow effect to active elements */
.playing,
.active {
  position: relative;
}

.playing::after,
.active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--dj-accent);
  border-radius: inherit;
  opacity: 0.1;
  z-index: -1;
  animation: glow 2s infinite;
}

@keyframes glow {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.02); }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dj-dark);
  border: 1px solid var(--dj-border);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dj-accent), #00aa2a);
  border-radius: 5px;
  box-shadow: 0 0 10px var(--dj-accent-glow);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dj-accent);
}

/* Footer */
.v-footer {
  background: linear-gradient(180deg, var(--dj-dark) 0%, var(--dj-darker) 100%) !important;
  border-top: 1px solid var(--dj-border) !important;
  color: var(--dj-text-dim) !important;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .v-toolbar__title {
    font-size: 22px !important;
  }
  
  .v-card__title {
    font-size: 16px !important;
  }
}

/* Add subtle animations to cards on hover */
.v-card {
  transition: all 0.3s ease !important;
}

.v-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
              0 0 30px rgba(0, 255, 65, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Special styling for ON AIR indicator */
.v-chip.deep-orange.accent-4::before {
  content: '● ';
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* Volume labels on sliders */
.v-slider .v-messages {
  color: var(--dj-text-dim) !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 11px !important;
}

/* Enhance form inputs */
.v-input {
  font-family: 'Rajdhani', sans-serif !important;
}

.v-input--is-focused .v-label {
  color: var(--dj-accent) !important;
}

/* Add metallic texture to certain elements */
.v-btn.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* DJ Mixer Channel Strip Styling */
.v-card:has(.v-slider--vertical) .v-card__title {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.1), transparent) !important;
  border-bottom: 2px solid var(--dj-accent) !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* EQ Section Styling */
.v-card:has([class*="equalizer"]),
.v-card:has([class*="eq-"]) {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
  border: 2px solid #2a2a2a !important;
  border-radius: 10px !important;
}

/* Master Output Section */
.v-card:has([class*="master"]) {
  background: linear-gradient(135deg, #2a1a1a 0%, #1a0d0d 100%) !important;
  border: 3px solid var(--dj-red) !important;
  box-shadow: 0 0 30px var(--dj-red-glow),
              0 8px 32px rgba(0, 0, 0, 0.8) !important;
}

.v-card:has([class*="master"]) .v-card__title {
  color: var(--dj-red) !important;
  text-shadow: 0 0 15px var(--dj-red-glow) !important;
  border-bottom-color: var(--dj-red) !important;
}

/* Channel Gain/Trim Controls */
input[type="number"],
.v-text-field input[type="number"] {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: var(--dj-accent) !important;
  border: 2px solid #333 !important;
  border-radius: 6px !important;
  padding: 8px !important;
}

input[type="number"]:focus {
  border-color: var(--dj-accent) !important;
  box-shadow: 0 0 15px var(--dj-accent-glow) !important;
  outline: none !important;
}

/* Waveform Display Enhancement */
canvas {
  border: 2px solid #222 !important;
  border-radius: 8px !important;
  background: #000 !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8),
              0 0 20px rgba(0, 255, 65, 0.1) !important;
}

/* Transport Controls (Play/Pause/Stop) */
.v-btn-toggle {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 2px solid #2a2a2a !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.v-btn-toggle .v-btn {
  border-right: 1px solid #222 !important;
  background: transparent !important;
}

.v-btn-toggle .v-btn:last-child {
  border-right: none !important;
}

.v-btn-toggle .v-btn--active {
  background: rgba(0, 255, 65, 0.2) !important;
  box-shadow: 0 0 15px var(--dj-accent-glow) !important;
}

/* Cue Points Markers */
.v-chip.v-chip--label {
  background: rgba(255, 215, 0, 0.2) !important;
  border: 2px solid #ffd700 !important;
  color: #ffd700 !important;
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

/* Beat Counter Display */
.v-chip.primary {
  background: var(--dj-accent) !important;
  color: #000 !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  padding: 8px 16px !important;
  box-shadow: 0 0 20px var(--dj-accent-glow),
              0 4px 12px rgba(0, 0, 0, 0.6) !important;
  animation: pulse-bpm 0.5s infinite;
}

@keyframes pulse-bpm {
  0%, 50%, 100% { transform: scale(1); }
  25% { transform: scale(1.05); }
}

/* DJ Booth Layout - Grid Enhancement */
.v-row {
  position: relative;
}

.v-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, 
    transparent 0%, 
    var(--dj-accent) 50%, 
    transparent 100%);
  opacity: 0.1;
  pointer-events: none;
}

/* Deck A/B Identifiers */
.v-col:first-child .v-card::after {
  content: 'DECK A';
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 255, 65, 0.2);
  color: var(--dj-accent);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 900;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}

.v-navigation-drawer .v-list-item:hover {
  background: rgba(0, 255, 65, 0.08) !important;
  border-left-color: rgba(0, 255, 65, 0.5) !important;
  transform: translateX(4px);
}

.v-navigation-drawer .v-list-item--active {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.2), rgba(0, 255, 65, 0.05)) !important;
  border-left: 4px solid var(--dj-accent) !important;
  box-shadow: inset 0 0 20px var(--dj-accent-glow) !important;
}

/* Metadata Input Section Enhancement */
.v-card:has(.v-text-field[placeholder*="Title"]),
.v-card:has(.v-text-field[placeholder*="Artist"]),
.v-card:has(input[placeholder*="title"]),
.v-card:has(input[placeholder*="artist"]) {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%) !important;
  border: 2px solid #2a2a2a !important;
  border-left: 4px solid var(--dj-blue) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
              0 0 30px rgba(0, 217, 255, 0.1) !important;
}

.v-card:has(.v-text-field[placeholder*="Title"]) .v-card__title,
.v-card:has(.v-text-field[placeholder*="Artist"]) .v-card__title,
.v-card:has(input[placeholder*="title"]) .v-card__title,
.v-card:has(input[placeholder*="artist"]) .v-card__title {
  color: var(--dj-blue) !important;
  text-shadow: 0 0 10px var(--dj-blue-glow) !important;
  border-bottom-color: var(--dj-blue) !important;
}

/* Metadata Fields Grid Layout */
.v-card__text:has(.v-text-field[placeholder*="Title"]) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 20px !important;
}

/* Enhanced Input Fields for Metadata */
.v-text-field[placeholder*="Title"] input,
.v-text-field[placeholder*="Artist"] input,
input[placeholder*="title"],
input[placeholder*="artist"] {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dj-blue) !important;
  padding: 12px !important;
}

.v-text-field[placeholder*="Title"] .v-label,
.v-text-field[placeholder*="Artist"] .v-label {
  font-family: 'Orbitron', monospace !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase

.v-col:nth-child(2) .v-card::after {
  content: 'DECK B';
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 217, 255, 0.2);
  color: var(--dj-blue);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--dj-blue);
  letter-spacing: 1px;
}

/* Microphone Input Level Meter */
#microphone-peak-meter,
#call-peak-meter {
  position: relative !important;
  overflow: visible !important;
}

#microphone-peak-meter::after,
#call-peak-meter::after {
  content: 'PEAK';
  position: absolute;
  top: -20px;
  right: 0;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--dj-red);
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Loading Indicators */
.v-progress-linear {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.v-progress-linear__determinate {
  background: linear-gradient(90deg, var(--dj-accent), var(--dj-blue)) !important;
  box-shadow: 0 0 10px var(--dj-accent-glow) !important;
}

/* Settings Panel Professional Look */
.v-navigation-drawer .v-list-item {
  margin: 4px 8px !important;
  border-radius: 6px !important;
}

.v-navigation-drawer .v-list-item--active {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.2), rgba(0, 255, 65, 0.05)) !important;
  border-left: 4px solid var(--dj-accent) !important;
}

/* Tooltip Enhancements */
.v-tooltip__content {
  background: rgba(0, 0, 0, 0.95) !important;
  border: 2px solid var(--dj-accent) !important;
  color: var(--dj-accent) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 0 15px var(--dj-accent-glow),
              0 4px 12px rgba(0, 0, 0, 0.8) !important;
}


/* =========================
   PROFESSIONAL DJ MIXER ENHANCEMENTS
   ========================= */

/* Main Content Area - Mixer Desk */
.v-main {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%) !important;
}

.v-main__wrap {
  background: 
    radial-gradient(ellipse at top, rgba(0, 255, 65, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(0, 217, 255, 0.02) 0%, transparent 50%);
}

/* Audio Player Deck Container */
.audio-player-container,
.player-deck,
.deck-wrapper {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border: 3px solid #333;
  border-radius: 12px;
  padding: 20px;
  margin: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.8),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5);
  position: relative;
}

.audio-player-container::before,
.player-deck::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--neon-green) 30%, 
    var(--neon-cyan) 70%, 
    transparent 100%);
  box-shadow: 0 0 10px var(--neon-green);
}

/* Deck Channel Strip Header */
.deck-channel-header {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
  border-bottom: 3px solid var(--neon-green);
  padding: 16px 20px;
  margin: -20px -20px 20px -20px;
  border-radius: 9px 9px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deck-channel-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--neon-green) 0%, var(--neon-cyan) 100%);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 20px;
  border-radius: 8px;
  box-shadow: 
    0 4px 15px rgba(0, 255, 65, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.deck-channel-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}

/* VU Meter Professional Style */
.vu-meter-container {
  background: #000;
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
  box-shadow: 
    inset 0 4px 12px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

.vu-meter-wrapper {
  display: flex;
  gap: 4px;
  height: 50px;
  align-items: flex-end;
  background: #0a0a0a;
  border: 2px solid #000;
  border-radius: 6px;
  padding: 6px;
  position: relative;
  overflow: hidden;
}

/* Animated scan line effect */
.vu-meter-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 255, 65, 0.1) 50%, 
    transparent 100%);
  animation: vu-scan 3s linear infinite;
}

@keyframes vu-scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

.vu-bar {
  flex: 1;
  min-width: 6px;
  background: #151515;
  border-radius: 3px;
  position: relative;
  transition: all 0.05s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* LED Bar States */
.vu-bar.active {
  box-shadow: 
    0 0 12px currentColor,
    inset 0 0 8px currentColor,
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.vu-bar:not(.active) {
  opacity: 0.15;
  filter: brightness(0.2);
}

/* Color Zones - Green to Red */
.vu-bar:nth-child(-n+10) { background: linear-gradient(180deg, #00ff41 0%, #00cc33 100%); }
.vu-bar:nth-child(n+11):nth-child(-n+14) { background: linear-gradient(180deg, #ffff00 0%, #dddd00 100%); }
.vu-bar:nth-child(n+15):nth-child(-n+17) { background: linear-gradient(180deg, #ff9500 0%, #dd7700 100%); }
.vu-bar:nth-child(n+18) { background: linear-gradient(180deg, #ff0844 0%, #dd0033 100%); }

.vu-meter-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 0 8px;
}

.vu-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #555;
  letter-spacing: 1px;
}

.vu-label.peak {
  color: var(--neon-red);
  text-shadow: 0 0 5px var(--neon-red);
}

/* Waveform Display Section */
.waveform-display-container {
  background: #000;
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  height: 100px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 4px 12px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

.waveform-canvas {
  width: 100%;
  height: 100%;
  background: #000;
}

.waveform-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(0deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
  background-size: 100% 25%, 10% 100%;
  pointer-events: none;
}

.waveform-playhead {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: var(--neon-cyan);
  box-shadow: 
    0 0 15px var(--neon-cyan),
    0 0 30px rgba(0, 217, 255, 0.5);
  z-index: 10;
  transform: translateX(-50%);
}

.waveform-playhead::before,
.waveform-playhead::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.waveform-playhead::before {
  top: -10px;
  border-bottom: 10px solid var(--neon-cyan);
}

.waveform-playhead::after {
  bottom: -10px;
  border-top: 10px solid var(--neon-cyan);
}

/* Transport Controls - Professional DJ Buttons */
.transport-section {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-top: 2px solid #333;
  margin: 20px -20px -20px -20px;
  border-radius: 0 0 9px 9px;
}

.transport-btn {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  border: 3px solid #555;
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.transport-btn:hover {
  transform: translateY(-3px);
  border-color: var(--neon-green);
  box-shadow: 
    0 8px 20px rgba(0, 255, 65, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 0 25px rgba(0, 255, 65, 0.3);
}

.transport-btn:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 3px 8px rgba(0, 0, 0, 0.8);
}

.transport-btn .v-icon {
  font-size: 32px;
  color: #999;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.transport-btn:hover .v-icon {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}

/* Specific Button Styles */
.transport-btn.play-btn {
  background: linear-gradient(180deg, #00ff41 0%, #00cc33 50%, #009922 100%);
  border-color: #00ff41;
  box-shadow: 
    0 6px 20px rgba(0, 255, 65, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 0 30px rgba(0, 255, 65, 0.4);
}

.transport-btn.play-btn .v-icon {
  color: #000;
}

.transport-btn.stop-btn {
  background: linear-gradient(180deg, #ff0844 0%, #cc0033 50%, #990022 100%);
  border-color: #ff0844;
  box-shadow: 
    0 6px 20px rgba(255, 8, 68, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 0 30px rgba(255, 8, 68, 0.4);
}

.transport-btn.stop-btn .v-icon {
  color: #fff;
}

.transport-btn.cue-btn {
  background: linear-gradient(180deg, #00d9ff 0%, #00a8cc 50%, #007799 100%);
  border-color: #00d9ff;
  box-shadow: 
    0 6px 20px rgba(0, 217, 255, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 0 30px rgba(0, 217, 255, 0.4);
}

.transport-btn.cue-btn .v-icon {
  color: #000;
}

/* Active State LED Indicator */
.transport-btn.active::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: var(--neon-green);
  border-radius: 50%;
  box-shadow: 
    0 0 10px var(--neon-green),
    0 0 20px rgba(0, 255, 65, 0.5);
  animation: pulse-led 1s ease-in-out infinite;
}

/* Mixer EQ Section */
.mixer-eq-section {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 2px solid #333;
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mixer-eq-header {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neon-cyan);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 217, 255, 0.3);
  text-align: center;
}

.eq-controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
}

.eq-knob-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.eq-knob-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.eq-knob-label.high { color: var(--neon-red); }
.eq-knob-label.mid { color: var(--neon-cyan); }
.eq-knob-label.low { color: var(--neon-green); }

/* Track Browser - Enhanced Library */
.track-browser {
  background: #000;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
}

.track-browser-header {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-bottom: 2px solid var(--neon-green);
  padding: 12px 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}

.track-list-item {
  display: grid;
  grid-template-columns: 60px 50px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #1a1a1a;
  transition: all 0.2s ease;
  cursor: pointer;
}

.track-list-item:hover {
  background: rgba(0, 255, 65, 0.05);
  border-left: 3px solid var(--neon-green);
  padding-left: 9px;
}

.track-list-item.active {
  background: rgba(0, 255, 65, 0.1);
  border-left: 4px solid var(--neon-green);
  padding-left: 8px;
}

.track-artwork-small {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: #0a0a0a;
  border: 2px solid #333;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.track-number {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #666;
  text-align: center;
}

.track-list-item.active .track-number {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}

.track-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.track-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist-name {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-metadata {
  display: flex;
  gap: 12px;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: #666;
}

/* Master Output Section */
.master-output-section {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 4px solid var(--neon-green);
  border-radius: 12px;
  padding: 24px;
  margin: 20px auto;
  max-width: 500px;
  box-shadow: 
    0 8px 32px rgba(0, 255, 65, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    0 0 40px rgba(0, 255, 65, 0.3);
}

.master-output-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  color: var(--neon-green);
  text-shadow: 0 0 15px var(--neon-green);
  margin-bottom: 24px;
  letter-spacing: 4px;
}

.master-vu-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.master-vu-channel {
  background: #000;
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  padding: 16px;
}

.master-vu-channel-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #888;
  margin-bottom: 12px;
  letter-spacing: 3px;
}

.master-vu-vertical {
  height: 240px;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}

.master-vu-segment {
  height: 10px;
  background: #151515;
  border-radius: 3px;
  transition: all 0.05s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.master-vu-segment.lit {
  box-shadow: 
    0 0 10px currentColor,
    inset 0 0 6px currentColor;
}

.master-vu-segment:not(.lit) {
  opacity: 0.15;
  filter: brightness(0.2);
}

/* Color zones for master VU */
.master-vu-segment:nth-child(-n+18) { background: linear-gradient(90deg, #00ff41 0%, #00dd33 100%); }
.master-vu-segment:nth-child(n+19):nth-child(-n+22) { background: linear-gradient(90deg, #ffff00 0%, #dddd00 100%); }
.master-vu-segment:nth-child(n+23):nth-child(-n+25) { background: linear-gradient(90deg, #ff9500 0%, #dd7700 100%); }
.master-vu-segment:nth-child(n+26) { background: linear-gradient(90deg, #ff0844 0%, #dd0033 100%); }

/* Master Volume Fader */
.master-fader-container {
  background: #0a0a0a;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.master-fader-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neon-cyan);
  margin-bottom: 16px;
}

/* Responsive Adjustments */
@media (max-width: 960px) {
  .audio-player-container,
  .player-deck {
    margin: 12px 8px;
    padding: 16px;
  }
  
  .transport-btn {
    width: 60px;
    height: 60px;
  }
  
  .transport-btn .v-icon {
    font-size: 28px;
  }
  
  .eq-controls-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .track-list-item {
    grid-template-columns: 50px 40px 1fr;
    gap: 8px;
    padding: 10px;
  }
  
  .track-artwork-small {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 600px) {
  .deck-channel-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .transport-section {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .transport-btn {
    width: 55px;
    height: 55px;
  }
  
  .master-vu-dual {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================
   HIDE CALLERS SECTION
   ========================= */

/* IMPORTANT: Don't hide metadata or other important sections! */
/* Restore metadata card visibility */
.metadata-card,
.metadata-section,
[class*="metadata"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Only hide the Callers tab specifically - NOT all tabs */
/* This targets only tabs that contain "Callers" text */