/* =========================================================================
   🎰 DJ-TOMJAC TRACK PLAYER - CYBERPUNK STYLESHEET (audiotest.css)
   ========================================================================= */
/* 🚀 DER MAßGESCHNEIDERTE WINKEL-ÜBERSETZER FÜR MODERNE BROWSER */
@property --rgb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}

body {
    background: #0f1015;
    color: #fff;
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
}

h1 {
    color: #66fcf1;
    font-size: 20px;
    text-shadow: 0 0 15px rgba(102, 252, 241, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-align: center;
}

#player {
    background: #191b26;
    border: 3px solid var(--neon-color, #00ffaa) !important;
    box-shadow: 0 0 25px var(--neon-color, rgba(0, 255, 170, 0.4)), inset 0 0 15px rgba(0,0,0,0.6) !important;
    border-radius: 12px;
    padding: 20px; /* Leicht verringert von 25px auf 20px, spart sofort 10px Platz! */
    
    /* 🔒 DER ABSOLUTE LIMIT-LOCK: */
    height: 840px !important;
    min-height: 840px !important;
    min-height: 840px !important; 
    overflow: visible !important; /* 🔓 Verhindert Abschneiden */
    
    width: 100%;
    max-width: 1180px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Lücke zwischen den Elementen von 20px auf 15px verringert (spart enorm Platz!) */
    position: relative !important;
    z-index: 2 !important;
}

/* Der Audio-Motor läuft unsichtbar im Hintergrund weiter */
#innerplayer, 
audio {
    position: absolute !important;
    top: -9999px !important; /* Verschiebt das Element weit aus dem sichtbaren Bereich */
    left: -9999px !important;
    opacity: 0 !important; /* Macht es komplett durchsichtig */
    pointer-events: none !important; /* Verhindert, dass man aus Versehen draufklickt */
    width: 0 !important;
    height: 0 !important;
}

#player ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* 🎯 DIE PLATZ-RETTUNG: Von 280px auf 210px geschrumpft */
    max-height: 210px !important;
    
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #0f1015;
    border-radius: 6px;
    padding: 5px;
}


#player ul::-webkit-scrollbar {
    width: 6px;
}

#player ul::-webkit-scrollbar-track {
    background: #0f1015;
    border-radius: 6px;
}

#player ul::-webkit-scrollbar-thumb {
    background: #00ffaa;
    border-radius: 6px;
}

#player ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

#player ul li:last-child {
    border-bottom: none;
}

#player ul li a {
    color: #bbb;
    text-decoration: none;
    font-size: 13px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

#player ul li a:hover {
    color: #fff;
    background: rgba(102, 252, 241, 0.1);
    padding-left: 20px;
}

#player ul li a .star {
    color: #00ffaa;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
    font-size: 14px;
}

#player ul li a span {
    vertical-align: middle;
}

.eq-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1px;
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 170, 0.1);
    box-sizing: border-box;
    width: 100%;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: hidden !important;
    padding: 8px 8px 0 8px !important;
    position: relative !important;
    z-index: 2 !important;
} 

.eq-bar {
    flex: 1;
    background: linear-gradient(to top, #0055ff 0%, #00bfff 10%, #00ffaa 20%, #00ffaa 30%, #aaff00 40%, #ffed00 50%, #ffaa00 60%, #ff7700 70%, #ff3333 80%, #ff0000 90%, #ffffff 100%) !important;
    height: 2px;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 4px rgba(0, 255, 170, 0.4);
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.player-neon-pulse {
    animation: chassis-glow 2.5s infinite alternate ease-in-out;
}

@keyframes chassis-glow {
    0% {
        border-color: #00ffaa;
        box-shadow: 0 0 20px rgba(0, 255, 170, 0.2);
    }
    100% {
        border-color: #66fcf1;
        box-shadow: 0 0 40px rgba(102, 252, 241, 0.5), inset 0 0 15px rgba(102, 252, 241, 0.1);
    }
}
/* 🌈 DIE AUTOMATISCHE RGB-FARBROTATION (Regenbogeneffekt) */
@keyframes rgb-speaker-glow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* =========================================================================
   🎛️ STUDIO-MIXER & PITCH-CHASSIS BÜNDIG-LOGIK
   ========================================================================= */

/* Das Gehäuse für alle 32 Kanäle (Mit Durchsicht-Garantie fürs Fraktal) */
.mixer-chassis {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: rgba(18, 19, 26, 0.70) !important; /* 70% Blickdicht für das Mandelmännchen */
    backdrop-filter: blur(4px) !important;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 170, 0.1);
    padding: 5px 5px; 
    width: 100%;
    box-sizing: border-box;
    position: relative !important;
    z-index: 2 !important;
}

/* Der einzelne schmale Kanalzug */
.mixer-channel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0; /* Erlaubt extremes Zusammenschrumpfen */
}

/* Die Frequenz-Schriftbeschriftung unter den Fadern */
.mixer-label {
    font-size: 8px; /* Von 10px auf 8px geschrumpft für maximale Lesbarkeit bei 32 Bändern */
    color: #66fcf1;
    font-family: monospace;
    text-align: center;
    white-space: nowrap;
}


/* Vertikale Schieberegler */
.mixer-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 100px; /* Schöne Studio-Länge */
    background: #191b26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    /* 🚀 Die modernen, standardisierten Befehle: */
    writing-mode: vertical-lr !important;
    direction: rtl !important;
    cursor: ns-resize;
}

/* Der Schiebeknopf (Fader) für die 32 Equalizer-Bänder */
.mixer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 12px;
    /* 🎨 HIER ÄNDERN WIR DIE FARBE AUF BLAU-WEISS: */
    background: radial-gradient(circle, #ffffff 30%, #00bfff 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 8px #00bfff !important;
}

/* Dasselbe für Firefox absichern */
.mixer-slider::-moz-range-thumb {
    width: 18px;
    height: 12px;
    background: radial-gradient(circle, #ffffff 30%, #00bfff 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 8px #00bfff !important;
}

/* Frequenz-Beschriftung */
.mixer-label {
    font-size: 10px;
    color: #66fcf1;
    font-family: monospace;
    text-shadow: 0 0 4px rgba(102, 252, 241, 0.3);
}
.studio-setup {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    width: 100%;
    /* 🚀 Erweitert auf 2000px, damit links/rechts die Türme und in der Mitte die 1440px Platz haben! */
    max-width: 2000px !important; 
    margin: 0 auto;
    box-sizing: border-box;
}


/* Die großen 3-Wege-Lautsprechertürme */
.speaker-tower {
    width: 240px;
    background: #13141a;
    border: 3px solid var(--neon-color, #00ffaa) !important; 
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.15);
    border-radius: 12px;
    padding: 5px 10px 15px 10px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; 
    align-items: center;
    gap: 10px !important; 
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Gemeinsame Basis für alle Membranen (Form und Schnelligkeit) */
.cone {
    border-radius: 10%;
    border: 2px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 15px #000;
    transition: transform 0.04s ease-out;
    box-sizing: border-box;
}

/* 1. Hochtöner */
.tweeter {
    width: 100px;
    height: 145px !important;
    background: radial-gradient(circle, #222 40%, #00ffaa 100%) !important;
    box-shadow: inset 0 0 15px #000, 0 0 12px rgba(0, 255, 170, 0.4) !important;
    margin-top: 40px !important; 
}

/* 2. Mitteltöner (Mitte) */
.midrange {
    width: 130px;
    height: 145px !important;
    background: radial-gradient(circle, #121525 35%, #00bfff 100%) !important;
    box-shadow: inset 0 0 15px #000, 0 0 12px rgba(0, 191, 255, 0.4) !important;
    margin-top: 50px !important;
}

/* 3. Fetter Subwoofer (Unten) */
.woofer {
    width: 160px;
    height: 180px !important;
    max-width: 180px !important;
    max-height: 200px !important;
    background: radial-gradient(circle, #151515 30%, #ff3333 100%) !important;
    box-shadow: inset 0 0 15px #000, 0 0 15px rgba(255, 51, 51, 0.4) !important;
    margin-top: 50px !important;
}

/* 📊 MILIMETER-LOCK FÜR DIE GIGANTISCHE 220PX x 140PX ANALOG-BOX */
.analog-vu-box {
    display: block !important;
    position: relative !important;
    width: 220px !important;
    height: 140px !important;
    background: rgba(5, 6, 8, 0.90) !important; 
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    border: 1px solid rgba(0, 255, 170, 0.25) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 5px auto 0px auto !important; 
    isolation: isolate !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.03) !important;
}
/* 🌙 DIE GIGANTISCHE HALBRUND-SKALA (3/4 WEISS, 1/4 ROT) */
.analog-vu-box .vu-scale {
    position: absolute !important;
    top: 15px !important;
    left: 10px !important;
    width: 200px !important; 
    height: 75px !important; 
    border-radius: 50% / 100% 100% 0 0 !important;
    border-top: 3px dashed transparent !important;
    background: conic-gradient(from 135deg, #ffffff 0%, #ffffff 75%, #ff3333 75%, #ff3333 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding-top: 3px;
    box-sizing: border-box !important;
}

/* 📌 DIE ROTIERENDE VU-NADEL (START-POSITION FIXIERT) */
.analog-vu-box .vu-needle {
    position: absolute !important;
    bottom: 10px !important;
    left: 110px !important;
    width: 3px !important;
    height: 110px !important;
    background: #ff3333 !important;
    box-shadow: 0 0 8px #ff3333 !important;
    transform-origin: bottom center !important; 
    transform: rotate(-65deg); 
    transition: transform 0.03s ease-out !important;
    z-index: 99 !important;
}

/* Die dB-Beschriftung */
.analog-vu-box .vu-label {
    position: absolute !important;
    bottom: 5px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-family: monospace !important;
    font-size: 14px !important;
    color: #66fcf1 !important;
    text-shadow: 0 0 4px #66fcf1 !important;
    z-index: 100 !important;
}
/* =========================================================================
   🔒 THE FINAL GOLDEN KEY: ABSOLUTER RGB-STOPP FÜR VU-BOX & NADELN
   ========================================================================= */

/* 1. Verhindert, dass das VU-Gehäuse oder sein Inhalt die RGB-Animation erbt */
.theme-rgb-active .analog-vu-box,
.theme-rgb-active .analog-vu-box *,
#player.theme-rgb-active .analog-vu-box * {
    animation: none !important;
    -webkit-animation: none !important;
    filter: none !important;
}

/* 2. DIE GOLDENE VU-NADEL (Jetzt mit echtem Gold-Gradienten statt Farbfilter!) */
body #player .analog-vu-box .vu-needle,
body .analog-vu-box .vu-needle,
body.theme-rgb-active .analog-vu-box .vu-needle,
body.theme-rgb-active #player .analog-vu-box .vu-needle {
    position: absolute !important;
    bottom: 10px !important;
    left: 110px !important;
    width: 2px !important;
    height: 110px !important;
    
    /* 🎨 EDLES STUDIO-GOLD: Ein echter, unzerstörbarer Farbverlauf! */
    background: linear-gradient(to top, #ffd700 0%, #ffaa00 100%) !important; 
    box-shadow: 0 0 10px #ffaa00, 0 0 4px #ffd700 !important;
    
    /* 🚫 HARDWARE-BLOCKADE FÜR FARBWECHSEL: */
    animation: none !important;
    -webkit-animation: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    
    transform-origin: bottom center !important;
    transform: rotate(-45deg); 
    transition: transform 0.03s ease-out !important;
    z-index: 99 !important;
}

/* 3. DIE GOLDENE dB-SCHRIFT */
body #player .analog-vu-box .vu-label,
body .analog-vu-box .vu-label,
body.theme-rgb-active .analog-vu-box .vu-label,
body.theme-rgb-active #player .analog-vu-box .vu-label {
    position: absolute !important;
    bottom: 15px !important;
    left: 0 !important;
    width: 220px !important;
    text-align: center !important;
    font-family: monospace !important;
    font-size: 14px !important;
    
    /* Dauerhaftes Neon-Gold für die Schrift */
    color: #ffed00 !important;
    text-shadow: 0 0 6px #ffaa00, 0 0 2px #fff !important;
    
    animation: none !important;
    -webkit-animation: none !important;
    filter: none !important;
    z-index: 100 !important;
}

/* CONTAINER FÜR TICKER & DREHKNOPF (Über dem EQ) */
.player-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-top: 5px;
}

/* 📜 NEON-GELBE LAUFSCHRIFT (TICKER) */
.neon-ticker-box {
    flex-grow: 1;
    background: #090a0f;
    border: 1px solid #ffed00;
    box-shadow: 0 0 10px rgba(255, 237, 0, 0.2);
    border-radius: 6px;
    height: 30px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.neon-ticker-text {
    position: absolute;
    white-space: nowrap;
    color: #ffed00;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(255, 237, 0, 0.6);
    padding-left: 100%;
    animation: neon-scroll 30s linear infinite;
}

@keyframes neon-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* 🎛️ COCKPIT LAUTSTÄRKE-DREHKNOPF */
.volume-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    user-select: none;
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTEwLDIyIEE0LDQgMCAxLDEgNiwxOCBBNCw0IDAgMCwxIDEwLDIyIEwxMCw2IEwyNiwyIEwyNiwxNiBBNCw0IDAgMSwxIDIyLDEyIEE0LDQgMCAwLDEgMjYsMTYgTDI2LDYgTDEyLDEwIEwxMiwxMiBaIiBmaWxsPSJyZ2IoMCwyNTUsMTcwKSIgLz48L3N2Zz4=") 16 16, pointer;
}

.volume-knob {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, #252836 40%, #12131a 100%);
    border: 2px solid #00ffaa;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.8), inset 0 0 5px #000;
    transform: rotate(0deg);
    transition: transform 0.05s ease-out;
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTEwLDIyIEE0LDQgMCAxLDEgNiwxOCBBNCw0IDAgMCwxIDEwLDIyIEwxMCw2IEwyNiwyIEwyNiwxNiBBNCw0IDAgMSwxIDIyLDEyIEE0LDQgMCAwLDEgMjYsMTYgTDI2LDYgTDEyLDEwIEwxMiwxMiBaIiBmaWxsPSJyZ2IoMCwyNTUsMTcwKSIgLz48L3N2Zz4=") 16 16, pointer;
}
/* Die rote Studio-Markierung (Kerbe) auf dem Knopf */
.volume-knob::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    width: 3px;
    height: 10px;
    background: #ff3333;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px #ff3333;
}

/* Die Prozent-Beschriftung unter dem Knopf */
.volume-knob-label {
    font-size: 9px;
    color: #66fcf1;
    font-family: monospace;
}

/* 🔒 DIE ABSOLUTEN SCHLÖSSER: Ändern nur den Cursor beim Ziehen */
body.drag-up, 
body.drag-up *,
#player.drag-up * {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTE2LDIgTDI0LDE0IEwxOSwxNCBMMTksMjggTDEzLDI4IEwxMywxNCBMOCwxNCBaIiBmaWxsPSJyZ2IoMCwyNTUsMTcwKSIgLz48L3N2Zz4=") 16 16, pointer !important;
}

body.drag-down, 
body.drag-down *,
#player.drag-down * {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTE2LDMwIEw4LDE4IEwxMywxOCBMMTMsNCBMMTksNCBMMTksMTggTDI0LDE4IFoiIGZpbGw9InJnYigwLDI1NSwxNzApIiAvPjwvc3ZnPg==") 16 16, pointer !important;
}

/* Das feststehende Label links neben der Laufschrift */
.neon-static-label {
    color: #ffed00;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(255, 237, 0, 0.6);
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: 5px;
}

/* Versteckt die Standard-Volume-Elemente des Browsers */
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-moz-media-controls-volume-slider,
audio::-moz-media-controls-mute-button {
    display: none !important;
}

/* Der umschließende Container für die Steuerung */
.control-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 5px 0;
    gap: 12px;
}

/* Die Reihe für den durchgehenden Spulbalken */
.seekbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

/* Der lange, durchgehende Spulbalken */
.cyber-seekbar {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: 5px;
    background: #0f1015;
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

/* Der leuchtende Fader-Punkt */
.cyber-seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ffaa;
    box-shadow: 0 0 10px #00ffaa;
    cursor: pointer;
}

.cyber-seekbar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ffaa;
    box-shadow: 0 0 10px #00ffaa;
    cursor: pointer;
    border: none;
}

/* Ausrichtung für Zeitanzeige, Timeline und Play-Button */
.custom-play-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 5px 0;
    box-sizing: border-box;
}

.cyber-play-btn {
    background: #12131a;
    border: 2px solid #00ffaa;
    color: #00ffaa;
    border-radius: 10%;
    width: 140px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.3);
    transition: all 0.2s ease;
    user-select: none;
}

.cyber-play-btn:hover {
    background: rgba(0, 255, 170, 0.1);
    box-shadow: 0 0 25px rgba(0, 255, 170, 0.6);
    transform: scale(1.05);
}

.cyber-play-btn:active {
    transform: scale(0.95);
}

/* Der Zeit-Text (Monospace für stabiles Display) */
.time-display {
    font-size: 11px;
    color: #66fcf1;
    font-family: monospace;
    text-shadow: 0 0 5px rgba(102, 252, 241, 0.4);
    min-width: 35px;
}
/* Skip-Buttons für die Track-Navigation */
.cyber-skip-btn {
    background: #12131a;
    border: 2px solid var(--neon-color, #00ffaa);
    color: var(--neon-color, #00ffaa);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.2);
    transition: all 0.2s ease;
    user-select: none;
}

.cyber-skip-btn:hover {
    background: rgba(0, 255, 170, 0.1);
    box-shadow: 0 0 15px var(--neon-color, #00ffaa);
    transform: scale(1.05);
}

/* LED-Ring um den Lautstärkeknopf */
.volume-knob-container {
    position: relative;
    padding: 5px;
}

.led-ring {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px dashed var(--neon-color, #00ffaa);
    box-shadow: 0 0 10px var(--neon-color, #00ffaa);
    pointer-events: none;
    box-sizing: border-box;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

/* Farb-Umschalter Theme-Bar */
.theme-switch-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 3px;
    width: 100%;
}

.theme-btn {
    border: 1px solid #fff;
    background: #12131a;
    padding: 4px 24px;
    border-radius: 4px;
    width: 120px;
    font-size: 14px;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-btn:hover {
    color: #ffffff !important; /* 🚀 Macht die Schrift beim Drüberfahren reinweiß */
    transform: scale(1.02); /* Minimaler, cooler Zoom-Effekt */
}

/* Deine bestehenden Rahmen-Glows bleiben voll aktiv, kriegen aber auch weiße Schrift: */
.theme-btn.btn-green:hover { border-color: #00ffaa; box-shadow: 0 0 22px #00ffaa; }
.theme-btn.btn-red:hover   { border-color: #ff3333; box-shadow: 0 0 22px #ff3333; }
.theme-btn.btn-blue:hover  { border-color: #00bfff; box-shadow: 0 0 22px #00bfff; }
.theme-btn.btn-rgb:hover   { border-color: #ffed00; box-shadow: 0 0 22px #ffed00; }


.theme-btn.btn-green { color: #00ffaa; border-color: #00ffaa; box-shadow: 0 0 5px rgba(0,255,170,2.3); }
.theme-btn.btn-red   { color: #ff3333; border-color: #ff3333; box-shadow: 0 0 5px rgba(255,51,51,2.3); }
.theme-btn.btn-blue  { color: #00bfff; border-color: #00bfff; box-shadow: 0 0 5px rgba(0,191,255,2.3); }
.theme-btn.btn-rgb   { color: #ffed00; border-color: #ffed00; background: linear-gradient(45deg, #12131a, #252836); }

/* Live-Farbumschaltung über Root-Variable */
:root { --neon-color: #00ffaa; }

#player, .speaker-tower, .cyber-play-btn, .mixer-slider::-webkit-slider-thumb {
    border-color: var(--neon-color) !important;
}

.theme-rgb-active #player, 
.theme-rgb-active .cyber-play-btn,
.theme-rgb-active .cyber-skip-btn,
.theme-rgb-active .led-ring {
    animation: rgb-speaker-glow 6s linear infinite !important;
}

/* 📊 16-LED VU-Meter Brücke */
.vu-meter-bridge {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 20px;
    gap: 10px;
    box-sizing: border-box;
}

.vu-channel {
    flex: 1;
    height: 100%;
    background: #0f1015;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px;
    box-sizing: border-box;
}

.vu-led {
    flex: 1;
    height: 10px;
    margin: 0 1px;
    border-radius: 2px;
    box-sizing: border-box;
    transition: background 0.05s ease, box-shadow 0.05s ease;
}

.vu-led.green  { background: rgba(0, 255, 170, 0.1) !important; border: 1px solid rgba(0, 255, 170, 0.05); }
.vu-led.yellow { background: rgba(255, 237, 0, 0.1) !important; border: 1px solid rgba(255, 237, 0, 0.05); }
.vu-led.red    { background: rgba(255, 51, 51, 0.1) !important; border: 1px solid rgba(255, 51, 51, 0.05); }

.vu-led.green.active  { background: #00ffaa !important; box-shadow: 0 0 12px #00ffaa, inset 0 0 3px #fff !important; }
.vu-led.yellow.active { background: #ffed00 !important; box-shadow: 0 0 12px #ffed00, inset 0 0 3px #fff !important; }
.vu-led.red.active    { background: #ff3333 !important; box-shadow: 0 0 12px #ff3333, inset 0 0 3px #fff !important; }

/* 🔒 Schwebendes Upload-Fenster (Overlay) */
.upload-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 16, 21, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.upload-chassis {
    background: #191b26;
    border: 2px solid var(--neon-color, #00ffaa);
    box-shadow: 0 0 30px rgba(0, 255, 170, 0.3);
    border-radius: 12px;
    padding: 25px;
    width: 90%;
    max-width: 400px;
    box-sizing: border-box;
    position: relative;
}

.close-modal-btn {
    position: absolute;
    top: 10px; right: 15px;
    color: #ff3333;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0 0 5px #ff3333;
}

.playlist-trigger-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 10px 0 0 0;
    width: 100%;
}
/* Der geschrumpfte, angepasste Admin-Button */
.cyber-admin-btn {
    background: #12131a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-color: #ffed00;
    color: #66fcf1;
    font-size: 14px;
    font-family: monospace;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cyber-admin-btn:hover {
    border-color: #ffed00; /* Behält den fetten, neon-gelben Rand */
    color: #ffffff !important; /* 🚀 Schaltet die Schrift knallhart auf Weiß um! */
    box-shadow: 0 0 22px rgba(255, 237, 0, 2.5);
    transform: scale(1.02); /* Minimaler, cooler Zoom-Effekt */
}


/* 🔒 DAS SCHWEBENDE SONG-AUSWAHLFENSTER (MODAL) */
.playlist-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 16, 21, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9998;
    justify-content: center;
    align-items: center;
}

/* 🔒 DAS SCHWEBENDE PLAYLIST-FENSTER (Größe massiv optimiert) */
.playlist-chassis {
    background: #191b26;
    border: 2px solid var(--neon-color, #00ffaa);
    box-shadow: 0 0 30px rgba(0, 255, 170, 0.3);
    border-radius: 12px;
    padding: 25px;
    width: 95%;
    max-width: 650px;
    box-sizing: border-box;
    position: relative;
}

/* Die scrollbare Liste im Fenster */
.playlist-chassis ul {
    list-style: none;
    margin: 20px 0 0 0;
    padding: 5px;
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #0f1015;
    border-radius: 6px;
}

#player ul::-webkit-scrollbar,
.playlist-chassis ul::-webkit-scrollbar {
    width: 6px;
}

#player ul::-webkit-scrollbar-track,
.playlist-chassis ul::-webkit-scrollbar-track {
    background: #0f1015;
    border-radius: 6px;
}

#player ul::-webkit-scrollbar-thumb,
.playlist-chassis ul::-webkit-scrollbar-thumb {
    background: #00ffaa;
    border-radius: 6px;
}

.playlist-chassis ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.playlist-chassis ul li:last-child {
    border-bottom: none;
}

/* 🌈 NEON-SCHRIFT FÜR DIE TRACKS (Kein Lila mehr!) */
.playlist-chassis ul li a,
.playlist-chassis ul li a:visited {
    color: #66fcf1 !important;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 12px 15px;
    display: block;
    transition: all 0.2s ease;
    text-shadow: 0 0 5px rgba(102, 252, 241, 0.2);
}

.playlist-chassis ul li a:hover {
    color: #ffed00 !important;
    background: rgba(102, 252, 241, 0.08);
    padding-left: 22px;
    text-shadow: 0 0 8px rgba(255, 237, 0, 0.6);
}

/* Neuer zentrierter Button für die Track-Auswahl */
.cyber-playlist-btn {
    background: #12131a;
    border: 2px solid var(--neon-color, #00ffaa);
    color: var(--neon-color, #00ffaa);
    font-size: 14px;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.2);
    transition: all 0.2s ease;
}

.cyber-playlist-btn:hover {
    background: rgba(0, 255, 170, 0.1);
    box-shadow: 0 0 25px var(--neon-color, #00ffaa);
    transform: scale(1.05);
}

/* Versteckt den echten Upload-Bereich in der Box, bis das Passwort stimmt */
.admin-hidden-section {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    border-top: 1px dashed rgba(255, 237, 0, 0.2);
    padding-top: 15px;
}

/* Passwort-Formular Reihe ordentlich ausrichten */
#password-stage {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

#password-stage .upload-submit {
    background: #12131a;
    border: 1px solid #ffed00;
    color: #ffed00;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    font-family: monospace;
    cursor: pointer;
    text-shadow: 0 0 5px #ffed00;
    box-shadow: 0 0 10px rgba(255, 237, 0, 0.1);
    transition: all 0.2s ease;
}

#password-stage .upload-submit:hover {
    background: rgba(255, 237, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 237, 0, 0.4);
    transform: scale(1.02);
}

/* 📟 DIGITALES LED INFO-DISPLAY */
.digital-display {
    background: #090a0f;
    border: 1px solid #00ffaa;
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.2);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.display-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.display-label {
    font-size: 14px !important; /* 🛠️ Das 'p' ergänzt und mit !important abgesichert */
    color: #66fcf1 !important;
    text-align: center !important; /* 🛠️ Zwingt den Text in die Mitte */
    display: inline-block !important; /* 🛠️ Macht das Element zu einem breiten Block */
    width: 100% !important; /* 🛠️ Dehnt es über die gesamte Breite aus, damit die Mitte auch die echte Mitte ist */
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px; /* 💡 Etwas mehr Abstand nach unten zu den Pads sieht sauberer aus */
}

.display-digits {
    font-size: 16px;
    color: #00ffaa;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
}
/* 🎚️ HORIZONTALER DJ-CROSSFADER */
.crossfader-chassis {
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.crossfader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px !important; /* Auf die halbe Länge gekürzt */
    gap: 10px;
}

.crossfader-slider {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: 6px;
    background: #191b26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: ew-resize;
}

/* Fetter Studio-Reglerknopf für den Crossfader */
.crossfader-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 24px;
    background: #00ffaa;
    border-radius: 3px;
    cursor: ew-resize;
    box-shadow: 0 0 10px #00ffaa;
}

.crossfader-slider::-moz-range-thumb {
    width: 14px;
    height: 24px;
    background: #00ffaa;
    border-radius: 3px;
    cursor: ew-resize;
    box-shadow: 0 0 10px #00ffaa;
    border: none;
}

.crossfader-label {
    font-size: 10px;
    color: #66fcf1;
    font-family: monospace;
}

/* 🔒 RACK-ZONEN STEUERUNG */
.rack-section {
    display: none;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    position: relative !important;
    z-index: 2 !important;
}

.rack-section.show-section {
    display: block !important;
}

/* Kompakter DJ-Speed Fader (Perfekt bündig zum Mixer) */
.pitch-chassis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    gap: 2px;
    background-color: rgba(18, 19, 26, 0.70) !important; /* Identische Optik wie der Mixer */
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 8px;
    padding: 5px 5px; 
    box-sizing: border-box;
    width: 60px;
    
    /* 🔒 Absoluter metrischer Höhenlock bündig zum Equalizer */
    height: 160px !important; 
    min-height: 160px !important;
    max-height: 160px !important;
    margin-top: 0;
    position: relative !important;
    z-index: 2 !important;
}
.pitch-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    
    /* 🔒 DIESE ZEILE WAR DIE BLOCKADE: Verkürzt auf 45px, damit der Rahmen mitschrumpft! */
    height: 100px !important; 
    
    background: #191b26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    /* 🚀 Die modernen, standardisierten Befehle: */
    writing-mode: vertical-lr !important;
    direction: rtl !important;
    cursor: ns-resize;
}

/* Der rote Studio-Schiebeknopf für die Geschwindigkeit */
.pitch-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 10px;
    /* 🎨 HIER ÄNDERN WIR DIE FARBE AUF BLAU-WEISS: */
    background: radial-gradient(circle, #ffffff 30%, #00bfff 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 8px #00bfff !important;
    cursor: ns-resize;
}

/* Dasselbe für Firefox absichern */
.pitch-slider::-moz-range-thumb {
    width: 16px;
    height: 10px;
    /* 🎨 HIER ÄNDERN WIR DIE FARBE AUF BLAU-WEISS: */
    background: radial-gradient(circle, #ffffff 30%, #00bfff 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 8px #00bfff !important;
    cursor: ns-resize;

}

/* ⚡ ERWEITERUNG DES FX DECKS */
.fx-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    position: relative !important;
    z-index: 2 !important;
}

.fx-knob-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.echo-knob {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #252836 40%, #12131a 100%);
    border: 2px solid #00bfff;
    border-radius: 50%;
    position: relative;
    cursor: ns-resize;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
    transform: rotate(-135deg);
    transition: transform 0.05s ease-out;
}

.echo-knob::after {
    content: ''; position: absolute; top: 3px; left: 50%; width: 2px; height: 8px;
    background: #00bfff; border-radius: 1px; transform: translateX(-50%);
}

/* 📊 LASER-OSZILLOSKOP (HERZMONITOR) */
.scope-box {
    width: 100px;
    height: 70px;
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px #000;
}

.scope-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.control-center-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}
/* 💿 LINKS: Das glühende Vinyl-Jogwheel */
.jogwheel-chassis {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #111 30%, #050505 70%, #000 100%);
    border: 2px solid #ffed00;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 237, 0, 0.3), inset 0 0 8px #000;
    position: relative;
    cursor: grab;
    user-select: none;
    transition: transform 0.1s linear;
}

.jogwheel-chassis::before {
    content: ''; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;
    border: 1px dashed rgba(255, 255, 255, 0.05); border-radius: 50%;
}

.jogwheel-marker {
    position: absolute;
    top: 0; left: 50%; width: 3px; height: 12px;
    background: #ff3333; transform: translateX(-50%);
    box-shadow: 0 0 4px #ff3333;
}

/* 🌊 FLANGER-DREHKNOPF STIL (FÜR DAS FX DECK) */
.flanger-knob {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #252836 40%, #12131a 100%);
    border: 2px solid #ff3333;
    border-radius: 50%;
    position: relative;
    cursor: ns-resize;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
    transform: rotate(-135deg);
    transition: transform 0.05s ease-out;
}

.flanger-knob::after {
    content: ''; position: absolute; top: 3px; left: 50%; width: 2px; height: 8px;
    background: #ff3333; border-radius: 1px; transform: translateX(-50%);
}

/* 🔊 3D-PANNER: DYNAMISCHES XY-PAD */
.panner-chassis {
    width: 80px;
    height: 70px;
    background-color: rgba(5, 6, 8, 0.70) !important;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    box-shadow: inset 0 0 8px #000;
}

.panner-grid {
    position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(0, 191, 255, 0.1);
}

.panner-grid-v {
    position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(0, 191, 255, 0.1);
}

.panner-puck {
    position: absolute;
    width: 8px; height: 8px; background: #00bfff;
    border-radius: 50%; box-shadow: 0 0 8px #00bfff;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 👁️ DJ SYNC-AUGE (RECHTES GEGENSTÜCK FÜR DIE SYMMETRIE) */
.synceye-chassis {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #090a0f 40%, #000 100%);
    border: 2px solid var(--neon-color, #00ffaa);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.2), inset 0 0 5px #000;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.synceye-radar {
    position: absolute;
    top: 5px; left: 50%; width: 2px; height: 50px;
    background: linear-gradient(to bottom, var(--neon-color, #00ffaa), transparent);
    transform-origin: bottom center;
    animation: radar-spin 2s linear infinite;
}

@keyframes radar-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

/* 🚨 ROT GLÜHENDER FX-RESET BUTTON */
.fx-reset-btn {
    background: #12131a;
    border: 1px solid #ff3333;
    color: #ff3333;
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 0 0 5px #ff3333;
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.2);
    transition: all 0.2s ease;
    text-align: center;
}

.fx-reset-btn:hover {
    background: rgba(255, 51, 51, 0.1);
    box-shadow: 0 0 15px #ff3333;
    transform: scale(1.05);
}

/* 🎛️ COCKPIT TAB-BUTTONS (LINKBÜNDIG-LAYOUT) */
.rack-selector-bar {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin: 15px 0;
    width: 100%;
    box-sizing: border-box;
}

.rack-tab-btn {
    width: 180px;
    flex: none;
    background: #12131a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #66fcf1;
    font-family: monospace;
    font-size: 14px !important; 
    font-weight: bold;
    padding: 10px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

.rack-tab-btn.active-tab {
    border-color: var(--neon-color, #00ffaa) !important;
    color: var(--neon-color, #00ffaa) !important;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.3);
    background: rgba(0, 255, 170, 0.05);
}


/* 🥁 ULTRABREITES COCKPIT LAUNCHPAD (EXAKT 16 SPALTEN NEBENEINANDER = 2 REIHEN TOTAL) */
.sampler-rack {
    display: grid !important;
    grid-template-columns: repeat(16, 1fr) !important; /* 🎯 Nutzt alle 16 Spalten nebeneinander über die ganze Breite! */
    gap: 5px !important; /* Knackiger Studio-Abstand */
    width: 100% !important;
    margin: 0 auto !important;
}

/* 🎛️ COCKPIT-GEHÄUSE: Perfekt nach links geschoben und flach gezogen */
#sec-sampler {
    background-color: rgba(18, 19, 26, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    
    /* Zieht die Box perfekt unter deine Buttons */
    margin-top: -38px !important; 
    margin-bottom: 5px !important;
    
    /* 🎯 HIER DIE LINKS-VERSCHIEBUNG-ZÜNDUNG: */
    margin-left: -15px !important;  /* 📐 Passe diese Zahl an (z.B. -10px oder -15px), um das Board stufenlos nach links zu rücken! */
    margin-right: auto !important;
    
    /* 🔓 HIER DIE BREITEN-HARMONIE: Damit es exakt so breit ist wie das Keyboard und das OSC-Board */
    max-width: 1180px !important;   /* Deckelt die maximale Box-Breite auf dein Cockpit-Maß */
    width: 1160px !important;       /* Nutzt die vollen 800px deines Players fehlerfrei aus */
    box-sizing: border-box;
}

/* 🎛️ DEINE GEILEN STUDIOPADS: Extrem breit nebeneinander UND 80px hoch! */
.jingle-pad {
    background: #12131a;
    border: 2px solid #00ffaa;
    color: #00ffaa;
    font-family: monospace;
    font-size: 16px; /* Emojis haben perfekt Platz */
    font-weight: bold;
    
    /* 📐 DAS GEHEIMNIS: Breite passt sich dem Player an, Höhe ist fest auf deinen 80px! */
    width: 100% !important; 
    height: 80px !important; /* 🚀 Deine Wunschhöhe sorgt für massig Platz für den Text! */
    
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Bringt Emoji und Text sauber untereinander */
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.2), inset 0 0 5px #000;
    transition: all 0.1s ease;
    user-select: none;
    box-sizing: border-box;
    position: relative;
    padding-top: 6px;
    margin: 0 !important;
}

/* 🏷️ RETRO-STUDIO-BESCHRIFTUNG (Jetzt mit unendlich viel Platz darunter!) */
.jingle-pad::after {
    display: block !important;
    font-size: 8px !important; /* Knackig scharfe Studio-Schrift */
    color: #66fcf1 !important;
    margin-top: 6px; /* Schiebt den Text sauber unter das Emoji, ohne Quetschen */
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* 🏷️ SUB-BESCHRIFTUNGEN FÜR DIE REIHEN 1 & 2 */
.jingle-pad:nth-child(1)::after { content: 'SIRENE'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(2)::after { content: 'HORN'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(3)::after { content: 'SCRATCH'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(4)::after { content: 'DROP'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }

/* ✅ HIER DIE NEUEN BESCHRIFTUNGEN FÜR REIHE 2 */
.jingle-pad:nth-child(5)::after { content: 'BLIP'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(6)::after { content: 'LASER'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(7)::after { content: 'CHORD'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(8)::after { content: 'IMPACT'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
/* 🏷️ NEUE SUB-BESCHRIFTUNGEN FÜR DIE REIHEN 3 & 4 */
.jingle-pad:nth-child(9)::after { content: 'ARCADE'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(10)::after { content: 'PING'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(11)::after { content: 'CHARGE'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(12)::after { content: 'UFOSWEEP'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(13)::after { content: 'TECHKICK'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(14)::after { content: 'CYBERSNARE'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(15)::after { content: 'RISER'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(16)::after { content: 'SPACEGONG'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
/* 🏷️ SUB-BESCHRIFTUNGEN FÜR REIHE 2 (PADS 17 BIS 32) */
.jingle-pad:nth-child(17)::after { content: 'ALIEN'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(18)::after { content: 'METEOR'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(19)::after { content: 'MATRIX'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(20)::after { content: 'CLAP'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(21)::after { content: 'KEYS'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(22)::after { content: 'ACID'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(23)::after { content: 'CHIP'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(24)::after { content: 'BLAST'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(25)::after { content: 'ORBIT'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(26)::after { content: 'COMET'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(27)::after { content: 'CYBER'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(28)::after { content: 'MUTATE'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(29)::after { content: 'RADAR'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(30)::after { content: 'TUNER'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(31)::after { content: 'CHIME'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }
.jingle-pad:nth-child(32)::after { content: 'FINISH'; font-size: 12px; opacity: 0.8; letter-spacing: 0.5px; }


/* 🔥 DER TRIGGER-BLITZ: Wenn du draufdrückst, glüht das Pad komplett auf! */
.jingle-pad:active {
    background: rgba(100, 180, 255, 0.3) !important;
    color: #000000 !important;
    box-shadow: 0 0 25px #00ffaa, inset 0 0 10px #00ffaa !important;
    transform: scale(0.92);
}

/* 📜 INTEGRATED TRACK LIST (Auf exakt 3 Songs begrenzt) */
.rack-playlist-box {
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 6px;
    padding: 5px;
    height: 160px !important;
    max-height: 160px !important;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 🚫 SCROLLBALKEN-KILLER (Für Chrome, Safari, Opera und neue Edge-Browser) */
.rack-playlist-box::-webkit-scrollbar {
    display: none !important;
}

.rack-playlist-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rack-playlist-box ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.rack-playlist-box ul li:last-child {
    border-bottom: none;
}

/* Die Links in der Rack-Playlist (Kein Lila mehr!) */
.rack-playlist-box ul li a,
.rack-playlist-box ul li a:visited {
    color: #66fcf1 !important;
    text-decoration: none;
    font-size: 13px;
    font-family: monospace;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    text-shadow: 0 0 5px rgba(102, 252, 241, 0.2);
}

/* ✨ Hover-Effekt im Rack */
.rack-playlist-box ul li a:hover {
    color: #ffed00 !important;
    background: rgba(102, 252, 241, 0.05);
    padding-left: 22px;
    text-shadow: 0 0 8px rgba(255, 237, 0, 0.6);
}

/* Aktiver, laufender Song leuchtet dauerhaft grün */
.rack-playlist-box ul li.active-track-row a {
    color: #00ffaa !important;
    background: rgba(0, 255, 170, 0.04);
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
    font-weight: bold;
}

/* 💡 LIGHTSHOW STAGE CONTROLLER (SEKTION 4) */
.lightshow-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    background-color: rgba(18, 19, 26, 0.70) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    position: relative !important;
    z-index: 2 !important;
}

/* Der fette, rot glühende Strobe-Taster */
.strobe-flash-btn {
    background: #12131a;
    border: 2px solid #ff3333;
    color: #ff3333;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    width: 75px;
    height: 45px;
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 0 0 5px #ff3333;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
    transition: all 0.1s ease;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.strobe-flash-btn:active {
    background: #ff3333 !important;
    color: #000 !important;
    box-shadow: 0 0 25px #ff3333, inset 0 0 10px #fff !important;
    transform: scale(0.95);
}

/* 🚨 1. DER COMPACT MASTER-STROBE (Gehäuse-Blitz-Alarm!) */
#player.strobe-active-flash,
#player.strobe-active-flash .mixer-chassis,
#player.strobe-active-flash .fx-grid,
#player.strobe-active-flash .crossfader-chassis,
#player.strobe-active-flash .lightshow-grid,
#player.strobe-active-flash .digital-display,
#player.strobe-active-flash .pitch-chassis,
#player.strobe-active-flash .scope-box {
    background: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: 0 0 60px #ffffff, inset 0 0 30px #ffffff !important;
    transition: none !important;
}

/* Dreht im Blitz-Moment alle Texte auf Schwarz */
#player.strobe-active-flash *, 
#player.strobe-active-flash .display-digits,
#player.strobe-active-flash .volume-knob-label,
#player.strobe-active-flash .time-display,
#player.strobe-active-flash .mixer-label,
#player.strobe-active-flash .crossfader-label,
#player.strobe-active-flash .display-label {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Verhindert, dass Membranen und Fader unsichtbar werden */
#player.strobe-active-flash .cone { background: #000000 !important; box-shadow: 0 0 15px #000000 !important; }
#player.strobe-active-flash .mixer-slider { background: #e0e0e0 !important; }

/* 🎨 2. DER RGB LOOP SPEED-GLIDE */
.theme-rgb-active #player,
.theme-rgb-active {
    transition: border-color 0.05s linear, box-shadow 0.05s linear !important;
}

/* 🔒 BASS-BOXEN SPERRE */
.woofer {
    max-width: 180px !important;
    max-height: 200px !important;
}


/* 🌈 MATRIX FRAME: DAS WANDERNDE RGB-LAUFLICHT AM GEHÄUSERAHMEN */
#player.matrix-frame-active {
    border-style: solid !important;
    border-width: 3px !important;
    border-image: linear-gradient(var(--rgb-angle, 0deg), #ff0000 0%, #ffaa00 15%, #ffed00 30%, #00ffaa 45%, #00bfff 60%, #0055ff 75%, #ff0000 100%) 1 !important;
    box-shadow: 0 0 30px rgba(0, 255, 170, 0.3), inset 0 0 15px rgba(0,0,0,0.6) !important;
    background-origin: border-box !important;
}

/* Der schicke neonblaue Matrix-Umschaltknopf */
.matrix-toggle-btn {
    background: #12131a;
    border: 1px solid #00bfff;
    color: #00bfff;
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 0 0 5px #00bfff;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.2);
    transition: all 0.2s ease;
    text-align: center;
}
.matrix-toggle-btn:hover {
    background: rgba(0, 191, 255, 0.1);
    box-shadow: 0 0 15px #00bfff;
}
.matrix-toggle-btn.matrix-on {
    border-color: #ffed00 !important;
    color: #ffed00 !important;
    text-shadow: 0 0 8px #ffed00 !important;
    box-shadow: 0 0 12px rgba(255, 237, 0, 0.4) !important;
    background: rgba(255, 237, 0, 0.05) !important;
}
/* =========================================================================
   💿 HIGH-END PLATTENSPIELER-LAUFWERK (PIXEL-LOCK ANTI-RUGBY)
   ========================================================================= */
.vinyl-chassis-top {
    /* 🔒 DER ABSOLUTE METRISCHE LOCK: */
    width: 100px !important;          /* Harte Breite */
    height: 100px !important;         /* Harte Höhe - exakt wie die Breite! */
    min-width: 100px !important;      /* Verhindert horizontales Zusammenquetschen */
    max-width: 100px !important;      /* Verhindert horizontales Auseinanderziehen */
    min-height: 100px !important;     /* Verhindert vertikales Stauchen */
    max-height: 100px !important;     /* Verhindert vertikales Dehnen */
    
    aspect-ratio: 1 / 1 !important;  
    background: #050505 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    position: relative !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.9), inset 0 0 8px #000 !important;
    overflow: hidden !important;
    margin-right: auto !important;   
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Die Rillen auf der Vinyl-Scheibe (Jetzt zu 100% symmetrisch rund!) */
.vinyl-grooves {
    position: absolute !important;
    width: 85% !important;
    height: 85% !important; 
    border: 1px dashed rgba(255, 255, 255, 0.06) !important;
    border-radius: 50% !important;
}

/* Das neongrüne Tomjac Center-Label */
.vinyl-center-label {
    width: 30px !important;
    height: 30px !important;
    background: radial-gradient(circle, #ff3333 20%, #111 100%) !important;
    border: 1px solid var(--neon-color, #00ffaa) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 4px var(--neon-color, #00ffaa) !important;
    z-index: 2 !important;
}

/* 🔄 DIE ROTATION-ANIMATION FÜR DIE VINYL-SCHEIBE */
.vinyl-spinning {
    animation: vinyl-spin 2.5s linear infinite !important;
}

@keyframes vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
#mandelbrot-bg-canvas {
    display: block !important;
    position: relative !important;
    width: 200px !important;
    height: 100px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    background: #000000 !important;
    border: 2px solid rgba(102, 252, 241, 0.4) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 15px #000, 0 0 12px rgba(102, 252, 241, 0.2) !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
    
    /* 🖱️ SIGNALISIERT INTERAKTIVITÄT: */
    cursor: pointer !important; 
    pointer-events: auto !important;
    transition: border-color 0.2s ease !important;
}

#mandelbrot-bg-canvas:hover {
    border-color: #ffed00 !important; /* Glüht gelb auf, wenn man drüberfährt */
}
/* 🎤 DESIGN FÜR DIE MIKROFON EQUALIZER REGLER */
.mic-eq-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #191b26;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    outline: none;
}

/* Die roten Reglerknöpfe */
.mic-eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 20%, #ff3333 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px;
    cursor: ns-resize;
    box-shadow: 0 0 6px #ff3333 !important;
}
.mic-eq-slider::-moz-range-thumb {
    width: 14px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 20%, #ff3333 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px;
    cursor: ns-resize;
    box-shadow: 0 0 6px #ff3333 !important;
    border: none;
}
/* Versteckt die zweite Tab-Seite unsichtbar im Hintergrund */
.rack-page-hidden {
    display: none !important;
}

/* Styling für den neuen Deck-Umschaltknopf ganz rechts */
.deck-flip-btn {
    width: auto !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
/* Perfekte Ausrichtung für den Flipper-Knopf */
.deck-switcher-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Unsichtbarer Riegel im Hintergrund */
.rack-page-hidden {
    display: none !important;
}

/* Der Umschaltknopf passt sich nahtlos an dein Interface an */
.deck-flip-btn {
    width: auto !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 🎨 EXPERTEN-UPGRADE: Neon-Gelber Glow für die aktiven Tasten auf Deck 2! */
#rack-page-2 .rack-tab-btn.active-tab {
/*    border-color: #ffed00 !important;*/
    color: #ffed00 !important;
    box-shadow: 0 0 15px rgba(255, 237, 0, 0.4), inset 0 0 5px rgba(255, 237, 0, 0.2) !important;
    text-shadow: 0 0 8px #ffed00 !important;
}

/* 🎹 GADGET BOARD INTERFACE (STABILES 800PX DESIGN) */
#sec-gadgets {
    background-color: rgba(18, 19, 26, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    margin: 0 auto !important;
    max-width: 800px !important; /* Bombenfest gedeckelt */
}

.keyboard-container {
    position: relative;
    display: flex;
    justify-content: center;
    background: #0b0c10;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid #1f2833;
    height: 120px;
    margin: 0 auto;
    width: 778px; /* Perfekte Gesamtbreite für 24 schicke Studio-Tasten */
    user-select: none;
    box-sizing: border-box;
}

/* ⚪ WEISSE TASTEN: Exakt berechnet für das 800px Cockpit */
.piano-key.white-key {
    width: 31px !important; /* Perfekte Balance für 800px Gesamtbreite */
    height: 110px !important;
    background: #f5f5f7 !important;
    border: 1px solid #0b0c10 !important;
    border-radius: 0 0 4px 4px;
    margin: 0 0.5px;
    cursor: pointer;
    transition: background 0.1s ease;
    box-shadow: inset 0 -4px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

.piano-key.white-key:hover {
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(102, 252, 241, 0.5);
}

/* ⚫ FILIGRANE SCHWARZE TASTEN */
.black-keys-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 768px;
    height: 70px;
    pointer-events: none;
}

.piano-key.black-key {
    position: absolute;
    width: 20px !important; /* Proportional angepasst auf die Tastenbreite */
    height: 70px !important;
    background: #12131a !important;
    border: 1px solid #66fcf1 !important;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    box-sizing: border-box;
}

/* 🎯 AUTOMATISCHE POSITIONIERUNG (Jede Klasse schiebt die Taste exakt um X weiße Tasten nach rechts) */
.black-key.k-1  { left: calc(1 * 32px - 10px); }
.black-key.k-2  { left: calc(2 * 32px - 10px); }
.black-key.k-4  { left: calc(4 * 32px - 10px); }
.black-key.k-5  { left: calc(5 * 32px - 10px); }
.black-key.k-6  { left: calc(6 * 32px - 10px); }
.black-key.k-8  { left: calc(8 * 32px - 10px); }
.black-key.k-9  { left: calc(9 * 32px - 10px); }
.black-key.k-11 { left: calc(11 * 32px - 10px); }
.black-key.k-12 { left: calc(12 * 32px - 10px); }
.black-key.k-13 { left: calc(13 * 32px - 10px); }
.black-key.k-15 { left: calc(15 * 32px - 10px); }
.black-key.k-16 { left: calc(16 * 32px - 10px); }
.black-key.k-18 { left: calc(18 * 32px - 10px); }
.black-key.k-19 { left: calc(19 * 32px - 10px); }
.black-key.k-20 { left: calc(20 * 32px - 10px); }
.black-key.k-22 { left: calc(22 * 32px - 10px); }
.black-key.k-23 { left: calc(23 * 32px - 10px); }

.piano-key.black-key:hover {
    background: #1f2833 !important;
    border-color: #00ffaa !important;
}
/* 🖼️ OSC VISUALS INTERFACE (PERFEKTES 800PX DESIGN - REPROPOSITIONIERT) */
#sec-visuals {
    background-color: rgba(18, 19, 26, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 255, 170, 0.2) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    
    /* 🎯 HIER DIE HOCHSCHIEB-AUTOPILOTEN: */
    margin-top: -25px !important; /* 📈 Zieht das Board um exakt 12 Pixel nach oben! */
    margin-left: auto !important;   /* Hält das Board waagerecht perfekt in der Mitte */
    margin-right: auto !important;
    margin-bottom: 5px !important;  /* Ein bisschen Puffer nach unten */
    
    max-width: 800px !important;
    width: 790px !important;
    box-sizing: border-box;
    display: none; 
}

/* Wenn dein JavaScript der ID die Klasse .show-section gibt, bricht das Display auf! */
#sec-visuals.show-section {
    display: block !important;
}

/* Modus-Buttons perfekt einpassen */
.visuals-control-bar .rack-tab-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    min-width: 120px;
}
/* 🎚️ DJ KILL SWITCHES STYLING (VERTIKALER TURM) */
.kill-switches-container {
    display: flex !important;
    flex-direction: column !important; /* 🎯 Zwingt die Buttons untereinander! */
    gap: 6px !important; /* Knackiger Abstand zwischen den Etagen */
    align-items: center !important;
    justify-content: center !important;
    margin-top: 5px !important;
}

.kill-btn {
    width: 260px !important; /* 📐 Schmal und kompakt gehalten */
    min-width: 260px !important;
    padding: 6px 2px !important; /* Vertikal etwas flacher */
    font-size: 14px !important;
    border: 2px solid #ff3b30 !important; /* Warn-Rot im Ruhezustand */
    color: #ff3b30 !important;
    transition: all 0.15s ease-in-out;
}

/* 🔥 Wenn der Filter aktiv ist, glüht der Button komplett rot auf! */
.kill-btn.kill-active {
    background: #ff3b30 !important;
    color: #000000 !important;
    box-shadow: 0 0 15px #ff3b30, inset 0 0 5px rgba(0,0,0,0.5) !important;
    font-weight: bold;
}