/* Variables & Theme */
:root {
  --bg-app: #08080a;
  --bg-panel: #111116;
  --bg-panel-light: #181822;
  --border-color: #242435;
  
  --color-text: #e2e8f0;
  --color-text-muted: #64748b;
  
  --color-deck-a: #00f0ff;
  --color-deck-a-glow: rgba(0, 240, 255, 0.45);
  
  --color-deck-b: #ff007f;
  --color-deck-b-glow: rgba(255, 0, 127, 0.45);
  
  --color-mixer: #ffaa00;
  --color-mixer-glow: rgba(255, 170, 0, 0.4);
  
  --color-green: #00e676;
  --color-yellow: #ffd600;
  --color-red: #ff1744;
  
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  
  --transition-speed: 0.2s;
}

/* Reset & Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--bg-app);
  color: var(--color-text);
  font-family: var(--font-sans);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Header UI */
.app-header {
  height: 55px;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}

.logo {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  display: flex;
  align-items: baseline;
}

.logo-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.neon-text {
  color: var(--color-deck-a);
  text-shadow: 0 0 8px var(--color-deck-a-glow);
}

.neon-text-alt {
  color: var(--color-deck-b);
  text-shadow: 0 0 8px var(--color-deck-b-glow);
}

/* VU Meters */
.master-vu-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vu-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

.vu-meter {
  width: 140px;
  height: 8px;
  background: #09090d;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  position: relative;
}

.vu-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--color-green) 60%, var(--color-yellow) 85%, var(--color-red) 100%);
  transition: width 0.05s ease-out;
}

.system-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.online {
  background-color: var(--color-green);
  box-shadow: 0 0 8px var(--color-green);
}

/* Waveforms Section */
.waveforms-section {
  height: 95px;
  background-color: #0b0b0f;
  border-bottom: 1px solid var(--border-color);
  padding: 5px 15px;
  position: relative;
  flex-shrink: 0;
}

.waveform-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.waveform-channel-row {
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
}

.waveform-canvas {
  width: 100%;
  height: 100%;
  background-color: #0d0d12;
  border-radius: 4px;
}

.channel-indicator {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}

.channel-indicator.ch-a {
  background: rgba(0, 240, 255, 0.2);
  color: var(--color-deck-a);
  border: 1px solid var(--color-deck-a);
}

.channel-indicator.ch-b {
  background: rgba(255, 0, 127, 0.2);
  color: var(--color-deck-b);
  border: 1px solid var(--color-deck-b);
}

/* Playhead Marker */
.playhead-marker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ffffff;
  box-shadow: 0 0 10px #ffffff;
  z-index: 20;
  pointer-events: none;
}

/* DJ Console Layout */
.dj-console {
  display: flex;
  flex: 1;
  min-height: 0;
  border-bottom: 1px solid var(--border-color);
}

.deck {
  flex: 1;
  background-color: var(--bg-panel);
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 320px;
}

.deck-a {
  border-right: 1px solid var(--border-color);
}

.deck-b {
  border-left: 1px solid var(--border-color);
}

/* Deck Header & Displays */
.deck-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.track-info {
  flex: 1;
  margin-right: 10px;
  overflow: hidden;
}

.track-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-a .track-title {
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.deck-b .track-title {
  text-shadow: 0 0 10px rgba(255, 0, 127, 0.15);
}

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

.deck-display {
  background-color: #07070a;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 5px 10px;
  display: flex;
  gap: 15px;
  font-family: var(--font-mono);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.time-display {
  font-size: 20px;
  color: var(--color-green);
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
  min-width: 85px;
  text-align: right;
}

.bpm-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bpm-value {
  font-size: 16px;
  color: var(--color-yellow);
}

.bpm-label {
  font-size: 8px;
  color: var(--color-text-muted);
}

.pitch-display {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  min-width: 50px;
}

.deck-a .pitch-display {
  color: var(--color-deck-a);
}

.deck-b .pitch-display {
  color: var(--color-deck-b);
}

/* Controls Area (Jog Wheel & Pitch) */
.deck-controls-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
  margin: 10px 0;
}

/* Jog Wheel */
.jog-wheel-outer {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2a35, #08080a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  position: relative;
  box-shadow: 
    0 10px 25px rgba(0,0,0,0.5),
    inset 0 2px 5px rgba(255,255,255,0.1);
}

.jog-wheel-outer:active {
  cursor: grabbing;
}

.deck-a .jog-wheel-outer {
  border: 2px solid var(--color-deck-a);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.2);
}

.deck-b .jog-wheel-outer {
  border: 2px solid var(--color-deck-b);
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.2), inset 0 0 10px rgba(255, 0, 127, 0.2);
}

.jog-wheel-inner {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #1a1a24, #0b0b0f 3px, #1a1a24 6px);
  position: relative;
  overflow: hidden;
  transition: transform 0.05s linear;
}

.jog-center {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #07070a;
  border: 2px solid #22222e;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.jog-center-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-text);
}

.deck-a .jog-center-dot {
  background-color: var(--color-deck-a);
}

.deck-b .jog-center-dot {
  background-color: var(--color-deck-b);
}

.jog-position-marker {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 25px;
  transform-origin: 50% 25px;
  transform: translateX(-50%);
}

.deck-a .jog-position-marker {
  background-color: var(--color-deck-a);
  box-shadow: 0 0 8px var(--color-deck-a);
}

.deck-b .jog-position-marker {
  background-color: var(--color-deck-b);
  box-shadow: 0 0 8px var(--color-deck-b);
}

/* Pitch Fader */
.pitch-fader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 160px;
}

.pitch-label {
  font-size: 8px;
  color: var(--color-text-muted);
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.fader-track {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
}

/* Vertical Sliders styling */
.vertical-slider {
  writing-mode: bt-lr; /* IE */
  appearance: slider-vertical; /* Webkit */
  width: 8px;
  height: 100%;
  background-color: #07070a;
  outline: none;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.pitch-slider {
  width: 10px;
}

.pitch-zero-notch {
  position: absolute;
  top: 50%;
  left: -4px;
  right: -4px;
  height: 2px;
  background-color: var(--color-text-muted);
  pointer-events: none;
}

/* Customizing Range Sliders (General) */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
}

input[type="range"]:focus {
  outline: none;
}

/* Styling vertical slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 24px;
  border-radius: 3px;
  background: #2b2b3b;
  border: 1px solid #44445c;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.deck-a input[type="range"]::-webkit-slider-thumb {
  border-left: 3px solid var(--color-deck-a);
}

.deck-b input[type="range"]::-webkit-slider-thumb {
  border-left: 3px solid var(--color-deck-b);
}

/* Transport Buttons */
.transport-section {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 10px 0;
}

.btn-play, .btn-cue, .btn-sync {
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-speed);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.btn-play {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #1b1b22;
  border: 2px solid #2d2d3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-play svg {
  width: 24px;
  height: 24px;
  fill: var(--color-text-muted);
}

.btn-play.playing {
  background-color: rgba(0, 230, 118, 0.15);
  border-color: var(--color-green);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.25);
}

.btn-play.playing svg {
  fill: var(--color-green);
  filter: drop-shadow(0 0 5px var(--color-green));
}

.btn-cue {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1b1b22;
  border: 2px solid #2d2d3d;
  color: var(--color-text-muted);
  font-size: 11px;
}

.btn-cue.active {
  background-color: rgba(255, 214, 0, 0.15);
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  text-shadow: 0 0 5px var(--color-yellow);
  box-shadow: 0 0 10px rgba(255, 214, 0, 0.2);
}

.btn-sync {
  width: 50px;
  height: 30px;
  border-radius: 4px;
  background-color: #13131a;
  border: 1px solid var(--border-color);
  color: var(--color-text-muted);
  font-size: 10px;
  align-self: center;
}

.btn-sync.active {
  color: #ffffff;
}
.deck-a .btn-sync.active {
  background-color: rgba(0, 240, 255, 0.2);
  border-color: var(--color-deck-a);
  box-shadow: 0 0 8px var(--color-deck-a-glow);
}
.deck-b .btn-sync.active {
  background-color: rgba(255, 0, 127, 0.2);
  border-color: var(--color-deck-b);
  box-shadow: 0 0 8px var(--color-deck-b-glow);
}

/* Loop Section */
.loop-section {
  background: var(--bg-panel-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.section-label {
  font-size: 8px;
  color: var(--color-text-muted);
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.loop-controls {
  display: flex;
  gap: 5px;
}

.loop-controls button {
  flex: 1;
  background-color: #0b0b0f;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--color-text-muted);
  padding: 5px 0;
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.loop-controls button:hover {
  color: #fff;
  border-color: var(--color-text-muted);
}

.loop-controls button.active {
  color: #fff;
}

.deck-a .loop-controls button.active {
  background-color: rgba(0, 240, 255, 0.2);
  border-color: var(--color-deck-a);
  box-shadow: 0 0 5px var(--color-deck-a-glow);
}

.deck-b .loop-controls button.active {
  background-color: rgba(255, 0, 127, 0.2);
  border-color: var(--color-deck-b);
  box-shadow: 0 0 5px var(--color-deck-b-glow);
}

/* Performance Pads */
.pads-section {
  background: var(--bg-panel-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
}

.pads-modes {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.btn-pad-mode {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  padding: 3px 0;
  border-bottom: 2px solid transparent;
}

.btn-pad-mode.active {
  color: #fff;
}

.deck-a .btn-pad-mode.active {
  border-bottom-color: var(--color-deck-a);
}

.deck-b .btn-pad-mode.active {
  border-bottom-color: var(--color-deck-b);
}

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

.pad {
  height: 32px;
  background-color: #0b0b0f;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.05s ease-out;
}

.pad:active {
  transform: scale(0.95);
}

.pad.set {
  color: #fff;
}

.deck-a .pad.set {
  background-color: rgba(0, 240, 255, 0.2);
  border-color: var(--color-deck-a);
  box-shadow: inset 0 0 5px var(--color-deck-a);
}

.deck-b .pad.set {
  background-color: rgba(255, 0, 127, 0.2);
  border-color: var(--color-deck-b);
  box-shadow: inset 0 0 5px var(--color-deck-b);
}

/* MIXER SECTION */
.mixer {
  width: 320px;
  background-color: #0c0c10;
  border-right: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mixer-columns {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  flex: 1;
}

.mixer-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Knob Styling */
.knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}

.knob-label {
  font-size: 8px;
  color: var(--color-text-muted);
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* For simplicity and speed, we implement EQs as micro sliders styled beautifully horizontal, 
   instead of canvas knobs which take more code, but we styling the input range as a knob track */
.knob-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom styled circular ranges that look like Knobs */
.rotary-knob {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #252535 0%, #0e0e13 100%);
  border: 2px solid #333346;
  position: relative;
  cursor: ns-resize;
  transform: rotate(-135deg); /* Default rotation */
}

/* Since range sliders are tricky to style as circular knobs natively without custom elements,
   we will style them as circular dials in Javascript dynamically, or style them as ultra compact slider bands */
.knob-wrapper input[type="range"] {
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #121217;
  border: 2px solid #2a2a35;
  cursor: pointer;
  transform: rotate(0deg);
}

input[type="range"].rotary-knob::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 14px;
  background-color: var(--color-mixer);
  border-radius: 2px;
  box-shadow: 0 0 5px var(--color-mixer-glow);
}

.filter-knob::-webkit-slider-thumb {
  background-color: #a855f7 !important;
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.5) !important;
}

/* Mixer Center Controls */
.mixer-center-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  border-left: 1px dashed var(--border-color);
  border-right: 1px dashed var(--border-color);
  padding: 0 5px;
}

.master-knob input[type="range"]::-webkit-slider-thumb {
  background-color: var(--color-deck-a);
  box-shadow: 0 0 5px var(--color-deck-a-glow);
}

.btn-cue-pfl {
  border: 1px solid var(--border-color);
  background-color: #15151e;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin: 10px 0;
  transition: all var(--transition-speed);
}

.btn-cue-pfl.active {
  background-color: rgba(255, 170, 0, 0.15);
  border-color: var(--color-mixer);
  color: var(--color-mixer);
  text-shadow: 0 0 5px var(--color-mixer);
  box-shadow: 0 0 8px var(--color-mixer-glow);
}

/* Audio settings button */
.audio-settings-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.settings-label {
  font-size: 7px;
  color: var(--color-text-muted);
  font-weight: bold;
  margin-bottom: 4px;
}

.btn-settings {
  background-color: #181822;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 9px;
  font-weight: bold;
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color var(--transition-speed);
}

.btn-settings:hover {
  background-color: #242435;
}

.btn-settings svg {
  width: 12px;
  height: 12px;
  fill: var(--color-text);
}

/* Channel Volume Faders */
.channel-fader-container {
  height: 100px;
  margin-top: 5px;
}

.channel-fader {
  width: 10px;
  height: 100%;
}

.channel-fader::-webkit-slider-thumb {
  height: 24px;
  width: 32px;
  background-color: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  border-top: 3px solid #ffaa00;
  border-bottom: 3px solid #ffaa00;
}

/* Crossfader */
.crossfader-container {
  height: 40px;
  margin-top: 15px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.crossfader-label-left, .crossfader-label-right {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
}
.crossfader-label-left { color: var(--color-deck-a); }
.crossfader-label-right { color: var(--color-deck-b); }

.crossfader-track {
  width: 180px;
  position: relative;
}

.crossfader-slider {
  width: 100%;
  height: 6px;
  background-color: #07070a;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

.crossfader-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 26px;
  background-color: #e2e8f0;
  border: 1px solid #94a3b8;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Music Library Section */
.music-library {
  height: 240px;
  background-color: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-shrink: 0;
}

.library-sidebar {
  width: 180px;
  border-right: 1px solid var(--border-color);
  background-color: #0b0b0f;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.sidebar-tab {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-speed);
}

.sidebar-tab svg {
  width: 18px;
  height: 18px;
  fill: var(--color-text-muted);
}

.sidebar-tab:hover {
  background-color: #111116;
  color: #fff;
}

.sidebar-tab.active {
  background-color: var(--bg-panel-light);
  color: var(--color-deck-a);
  border-left: 3px solid var(--color-deck-a);
}

.sidebar-tab.active svg {
  fill: var(--color-deck-a);
}

.library-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.search-bar-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-bar-row input {
  flex: 1;
  background-color: #07070a;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-speed);
}

.search-bar-row input:focus {
  border-color: var(--color-deck-a);
}

.search-bar-row button {
  background-color: var(--bg-panel-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--color-deck-a);
  font-weight: bold;
  padding: 0 20px;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.search-bar-row button:hover {
  background-color: var(--color-deck-a);
  color: #000;
  box-shadow: 0 0 10px var(--color-deck-a-glow);
}

/* Drag Drop Zone */
.drag-drop-zone {
  border: 2px dashed var(--border-color);
  background-color: #0b0b0f;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all var(--transition-speed);
}

.drag-drop-zone:hover, .drag-drop-zone.dragover {
  border-color: var(--color-deck-a);
  background-color: rgba(0, 240, 255, 0.05);
}

.icon-large {
  width: 36px;
  height: 36px;
  fill: var(--color-text-muted);
  margin-bottom: 5px;
}

.drag-drop-zone:hover .icon-large {
  fill: var(--color-deck-a);
}

/* Tables and results */
.results-table-container {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: #09090d;
}

.library-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

.library-table th {
  background-color: #0b0b10;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.library-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #111116;
  color: var(--color-text);
  vertical-align: middle;
}

.library-table tbody tr:hover {
  background-color: #12121b;
}

.thumb-cell img {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 30px 0;
}

/* Load Buttons */
.btn-load-a, .btn-load-b {
  border: none;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-load-a {
  background-color: rgba(0, 240, 255, 0.15);
  color: var(--color-deck-a);
  border: 1px solid var(--color-deck-a);
  margin-right: 5px;
}

.btn-load-a:hover {
  background-color: var(--color-deck-a);
  color: #000;
}

.btn-load-b {
  background-color: rgba(255, 0, 127, 0.15);
  color: var(--color-deck-b);
  border: 1px solid var(--color-deck-b);
}

.btn-load-b:hover {
  background-color: var(--color-deck-b);
  color: #000;
}

/* Modal Styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

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

.modal-box {
  width: 480px;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  transform: translateY(-20px);
  transition: transform 0.25s ease-out;
}

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

.modal-box h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.modal-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
}

.form-group select {
  background-color: #07070a;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px;
  color: #fff;
  outline: none;
}

.routing-visualizer {
  background-color: #07070a;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routing-channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.badge {
  background-color: #1e1e2d;
  color: var(--color-deck-a);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.modal-tip {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.margin-top { margin-top: 8px; }

.btn-primary {
  width: 100%;
  background-color: var(--color-deck-a);
  color: #000;
  font-weight: 700;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-top: 15px;
  transition: box-shadow var(--transition-speed);
}

.btn-primary:hover {
  box-shadow: 0 0 12px var(--color-deck-a-glow);
}

/* Global loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--bg-panel-light);
  border-top: 4px solid var(--color-deck-a);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader-text {
  font-family: var(--font-mono);
  color: #fff;
  font-size: 14px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Utility classes */
.hidden { display: none !important; }
.font-bold { font-weight: bold; }
.text-cyan { color: var(--color-deck-a); }