/* 🎧 DARKAIS 24/7 CYBER RAVE WEB RADIO — MASTER RESPONSIVE STYLESHEET */
:root {
    --bg-dark: #05070C;
    --bg-main: #090D15;
    --bg-card: #0F1420;
    --bg-panel: #151C2C;
    --bg-glass: rgba(15, 20, 32, 0.95);
    
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    
    --cyan: #00F0FF;
    --cyan-glow: rgba(0, 240, 255, 0.35);
    
    --purple: #C084FC;
    --purple-dark: #A855F7;
    --purple-glow: rgba(168, 85, 247, 0.35);
    
    --acid: #39FF14;
    --acid-glow: rgba(57, 255, 20, 0.35);
    
    --warning: #FFB800;
    --danger: #FF0055;
    
    --border: #1E293B;
    --border-light: #28374E;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

/* 🎨 THEMES */
body.theme-matrix {
    --cyan: #00FF66;
    --cyan-glow: rgba(0, 255, 102, 0.35);
    --purple: #39FF14;
    --purple-dark: #008822;
    --acid: #00FF66;
}
body.theme-crimson {
    --cyan: #FF0055;
    --cyan-glow: rgba(255, 0, 85, 0.35);
    --purple: #FFB800;
    --purple-dark: #B38000;
    --acid: #FFB800;
}
body.theme-synthwave {
    --cyan: #FF00AA;
    --cyan-glow: rgba(255, 0, 170, 0.35);
    --purple: #00F0FF;
    --purple-dark: #0088CC;
    --acid: #FFD700;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', -apple-system, sans-serif; }
html, body { width: 100%; min-height: 100vh; background-color: var(--bg-dark); color: var(--text-primary); line-height: 1.5; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px; }
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--bg-glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; max-width: 100vw; }
.logo a { display: flex; align-items: center; gap: 8px; }
.logo h1 { font-size: 17px; font-weight: 800; white-space: nowrap; }
.logo .accent { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.logo .sub { color: var(--purple); }

.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link { color: var(--text-secondary); font-weight: 600; font-size: 12.5px; padding: 5px 10px; border-radius: var(--radius-sm); transition: all 0.2s; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--cyan); background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.2); }

.header-right { display: flex; align-items: center; gap: 10px; }
.theme-picker { display: flex; align-items: center; gap: 5px; background: var(--bg-card); border: 1px solid var(--border); padding: 4px 8px; border-radius: 20px; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; transition: transform 0.2s; }
.theme-dot:hover { transform: scale(1.3); }
.theme-dot.cyber { background: #00F0FF; }
.theme-dot.matrix { background: #00FF66; }
.theme-dot.crimson { background: #FF0055; }
.theme-dot.synthwave { background: #FF00AA; }

.on-air-badge { display: flex; align-items: center; gap: 5px; padding: 3px 8px; background: rgba(255, 0, 85, 0.12); border: 1px solid var(--danger); border-radius: 20px; color: var(--danger); font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 800; }
.dot-ping { width: 6px; height: 6px; background: var(--danger); border-radius: 50%; animation: ping 1.2s infinite; }
@keyframes ping { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }

.star-btn { background: rgba(255, 184, 0, 0.1); border: 1px solid rgba(255, 184, 0, 0.4); color: #FFB800; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.star-btn:hover { background: #FFB800; color: #05070A; }

/* Main Container */
.dj-container { max-width: 1240px; margin: 0 auto; padding: 18px 16px 40px; width: 100%; box-sizing: border-box; }
.deck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; width: 100%; }

.main-console { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); min-width: 0; }

/* Station Selector Tabs */
.station-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.station-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 10px; border-radius: var(--radius-sm); font-family: 'Orbitron', sans-serif; font-size: 10.5px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.2s ease; }
.station-btn:hover { border-color: var(--cyan); color: var(--text-primary); }
.station-btn.active { background: rgba(0, 240, 255, 0.12); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }

/* Visualizer Display Box */
.visualizer-display { background: #030508; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 16px; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; cursor: crosshair; }
.visualizer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.track-info-box { display: flex; flex-direction: column; min-width: 0; }
.now-playing-tag { font-family: 'Orbitron', sans-serif; font-size: 9.5px; color: var(--cyan); letter-spacing: 1px; }
.track-title { font-size: 17px; font-weight: 800; color: #FFF; margin-top: 2px; }
.track-subtitle { font-size: 11.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.vis-mode-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.vis-pill { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-muted); padding: 3px 8px; border-radius: 12px; font-size: 10px; font-family: 'Orbitron', sans-serif; cursor: pointer; }
.vis-pill.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 240, 255, 0.1); }

canvas#visualizerCanvas { width: 100%; height: 220px; display: block; border-radius: var(--radius-sm); background: #030508; }

/* DJ Deck Controls */
.controls-strip { display: flex; justify-content: space-between; align-items: center; background: var(--bg-panel); border: 1px solid var(--border); padding: 12px 16px; border-radius: var(--radius-md); flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.play-btn-large { width: 48px; height: 48px; border-radius: 50%; background: var(--cyan); border: none; color: #05070A; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 16px var(--cyan-glow); transition: all 0.2s ease; flex-shrink: 0; }
.play-btn-large:hover { transform: scale(1.06); background: #FFF; }
.play-btn-large.playing { background: var(--acid); box-shadow: 0 0 20px var(--acid-glow); }

/* VU Peak Meter */
.vu-meter-box { display: flex; gap: 4px; height: 42px; background: #04060A; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--border); align-items: flex-end; }
.vu-bar { width: 8px; height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.vu-led { width: 100%; height: 3px; border-radius: 1px; opacity: 0.15; transition: opacity 0.05s; }
.vu-led.green { background: #39FF14; }
.vu-led.yellow { background: #FFB800; }
.vu-led.red { background: #FF0055; }
.vu-led.lit { opacity: 1; box-shadow: 0 0 4px currentColor; }

.audio-sliders { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.slider-group { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.slider-group label { font-family: 'Orbitron', sans-serif; font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.slider-group input[type="range"] { accent-color: var(--cyan); width: 80px; }

.deck-aux-buttons { display: flex; gap: 6px; }
.deck-btn { background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text-secondary); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 11px; font-family: 'Orbitron', sans-serif; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.deck-btn:hover { border-color: var(--cyan); color: #FFF; }

/* 🎹 CYBER MINI SYNTH KEYBOARD */
.synth-keyboard-box { background: #0A0F1A; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), 0 0 15px rgba(0,240,255,0.05); }
.synth-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.synth-title { font-family: 'Orbitron', sans-serif; font-size: 11.5px; font-weight: 700; color: var(--cyan); display: flex; align-items: center; gap: 6px; }
.synth-badge { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--acid); background: rgba(57,255,20,0.1); border: 1px solid var(--acid); padding: 2px 6px; border-radius: 4px; }

.synth-keys-bed { display: flex; justify-content: center; position: relative; height: 95px; background: #04070C; border: 2px solid #1C2638; border-radius: 6px; padding: 2px; box-shadow: inset 0 5px 12px rgba(0,0,0,0.9); }
.key-white { flex: 1; height: 100%; background: linear-gradient(180deg, #162032 0%, #0E1624 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 4px 4px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 2px 6px; cursor: pointer; user-select: none; transition: all 0.1s ease; position: relative; z-index: 1; }
.key-white:hover { background: linear-gradient(180deg, #223048 0%, #172336 100%); }
.key-white:active, .key-white.active { background: var(--cyan); box-shadow: 0 0 16px var(--cyan-glow), inset 0 2px 5px rgba(0,0,0,0.5); transform: translateY(2px); }
.key-white:active .key-note, .key-white.active .key-note, .key-white:active .key-kbd, .key-white.active .key-kbd { color: #05070A !important; }

.key-black { position: absolute; width: 6.8%; height: 58px; background: linear-gradient(180deg, #060910 0%, #000000 100%); border: 1px solid var(--cyan); border-top: none; border-radius: 0 0 3px 3px; z-index: 5; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 4px 1px 4px; cursor: pointer; user-select: none; box-shadow: 0 4px 8px rgba(0,0,0,0.9), 0 0 6px rgba(0,240,255,0.2); transition: all 0.1s ease; }
.key-black:hover { border-color: #FFF; box-shadow: 0 0 10px var(--cyan); }
.key-black:active, .key-black.active { background: var(--purple); border-color: #FFF; box-shadow: 0 0 16px var(--purple), inset 0 2px 5px rgba(0,0,0,0.5); transform: translateY(2px); }

.key-note { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; color: var(--text-muted); }
.key-black .key-note { color: var(--cyan); font-size: 8px; }

.key-kbd { font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 800; color: var(--cyan); background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); padding: 1px 4px; border-radius: 3px; }
.key-black .key-kbd { color: #FFF; background: rgba(168, 85, 247, 0.25); border-color: var(--purple); font-size: 8.5px; padding: 1px 3px; }

/* 🎛️ SPINNING CYBER VINYL */
.vinyl-container { display: flex; align-items: center; justify-content: center; padding: 10px; }
.spinning-vinyl { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #05070A 20%, #171E2E 40%, #05070A 60%, #171E2E 80%, #05070A 100%); border: 3px solid var(--cyan); box-shadow: 0 0 16px var(--cyan-glow); display: flex; align-items: center; justify-content: center; cursor: grab; transition: transform 0.2s; position: relative; }
.spinning-vinyl.spinning { animation: spinVinyl 3.5s linear infinite; }
@keyframes spinVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vinyl-center { width: 34px; height: 34px; border-radius: 50%; background: var(--purple); border: 2px solid #FFF; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: #FFF; }

/* 📂 DROP ZONE */
.drop-zone { border: 2px dashed var(--border-light); border-radius: var(--radius-sm); padding: 12px; text-align: center; font-size: 11px; color: var(--text-muted); cursor: pointer; transition: all 0.2s; margin-top: 6px; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,240,255,0.05); }

/* Sidebar Panels */
.sidebar-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.deck-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; min-width: 0; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.card-header h3 { font-size: 12.5px; color: var(--cyan); }

footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 14px 20px; text-align: center; color: var(--text-muted); font-size: 11.5px; margin-top: auto; }

/* Mobile & Tablet Responsiveness */
@media (max-width: 1024px) {
    .deck-layout { grid-template-columns: 1fr; }
    .station-tabs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    .header { padding: 10px 12px; }
    .station-tabs { grid-template-columns: repeat(2, 1fr); }
    .controls-strip { flex-direction: column; align-items: stretch; }
    .audio-sliders { justify-content: space-between; width: 100%; }
    .slider-group input[type="range"] { width: 100%; }
}