*{box-sizing:border-box}
:root{
  --bg:#0c0805;--panel:#211a13;--panel2:#30271d;--panel3:#4a3725;
  --gold:#d7a84b;--gold2:#ffe2a0;--text:#fff8ed;--muted:#d2c0a7;
  --line:#9b6b1d;--danger:#d9534f;--ok:#61c57a;--dark:#080604;
}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#47331f,#0b0705 55%,#050302);color:var(--text)}
a{color:var(--gold2)}
button,.btn{border:2px solid var(--gold);border-radius:10px;background:linear-gradient(180deg,#f0c86d,#8b5d16);color:#120c05;font-weight:900;padding:9px 13px;cursor:pointer;text-decoration:none;text-align:center}
button:hover,.btn:hover{filter:brightness(1.07)}
button:disabled{opacity:.45;cursor:not-allowed}
.app{width:min(1680px,96vw);margin:16px auto;border:2px solid var(--gold);border-radius:24px;background:linear-gradient(180deg,rgba(45,35,25,.96),rgba(14,10,7,.96));box-shadow:0 0 30px rgba(215,168,75,.16);overflow:hidden}
.top{padding:23px 18px 21px;text-align:center;border-bottom:2px solid var(--line);background:linear-gradient(180deg,#4a3725,#1a120c)}
.crown{color:var(--gold2);font-size:18px}
.top h1{margin:4px 0 0;color:var(--gold2);letter-spacing:6px;font-size:36px}
.top p{margin:8px 0 0;color:var(--muted)}
.pro-grid{display:grid;grid-template-columns:92px 260px minmax(720px,1fr) 280px;gap:12px;padding:12px}
.card,.track-card,.dj-decks,.control-box{border:2px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#2e261e,#15100c);padding:12px}
.side-nav{border:2px solid var(--line);border-radius:14px;overflow:hidden;background:#130d08}
.nav-item{width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;border-bottom:1px solid rgba(215,168,75,.2);border-radius:0;background:linear-gradient(180deg,#3a2b1d,#1a120b);color:var(--text);font-size:11px;min-height:69px}
.nav-item.active{background:linear-gradient(180deg,#805a23,#2c1b0b);color:var(--gold2)}
.nav-item span{font-size:20px}
.cover-card{padding:12px}
.cover{height:210px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#6b4a23,#170f09);overflow:hidden}
.cover img{max-width:88%;max-height:88%;object-fit:contain}
.stars{text-align:center;color:var(--gold2);letter-spacing:5px;margin:12px 0}
.meta-list{display:grid;grid-template-columns:70px 1fr;gap:7px 8px;font-size:13px;color:var(--muted)}
.meta-list dd{margin:0;color:var(--text)}
.main-panel{display:flex;flex-direction:column;gap:8px;min-width:0}
.controls-top{display:grid;grid-template-columns:1fr 170px 110px;gap:10px}
.search-wrap{display:flex;align-items:center;border:2px solid var(--line);border-radius:12px;background:#080604;overflow:hidden}
.search-wrap span{padding-left:12px;color:var(--gold2)}
input,select,textarea{width:100%;border:2px solid var(--line);border-radius:10px;background:#080604;color:var(--text);padding:9px;font-size:15px}
.search-wrap input{border:0;height:42px}
.stats-row{display:flex;gap:18px;flex-wrap:wrap;border:2px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#3b2b1a,#17100b);padding:8px 10px;font-size:13px;color:var(--gold2)}
.az-row{display:flex;gap:4px;flex-wrap:wrap}
.az-row button{min-width:28px;height:28px;padding:0;font-size:12px}
.table-head,.track{display:grid;grid-template-columns:44px 1.4fr 1fr 1fr 80px 110px;gap:8px;align-items:center}
.table-head{height:34px;padding:0 10px;color:var(--gold2);font-size:12px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.track-list{height:300px;overflow:auto}
.track{min-height:42px;padding:6px 10px;border-bottom:1px solid rgba(215,168,75,.2);font-size:13px}
.track:hover{background:rgba(215,168,75,.12)}
.track-title{font-weight:800;color:var(--text)}
.small{font-size:12px;color:var(--muted)}
.dj-decks{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.deck-box{border:2px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#30271d,#16100c);padding:12px}
.deck-head{display:flex;justify-content:space-between;color:var(--gold2);font-size:13px}
.deck-head span{background:#0b0704;border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.deck-box h3{margin:11px 0 5px;font-size:20px}
.deck-box p{margin:0;color:var(--muted);font-size:13px}
.deck-progress{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin-top:10px;font-size:12px}
.deck-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.transport-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.control-box label{display:block;color:var(--gold2);font-weight:900;font-size:13px;margin-bottom:8px}
.slider-line{display:flex;align-items:center;gap:9px}
.slider-line input{padding:0}
.wide-btn{width:100%;min-height:38px}
.effects{display:flex;flex-direction:column;gap:12px}
.effects h2{margin:4px 0;color:var(--gold2);text-align:center}
.effect-block{border:2px solid var(--line);border-radius:12px;padding:12px;background:#17100b}
.effect-head{display:flex;justify-content:space-between;align-items:center;color:var(--gold2);font-size:13px}
.effect-head button{padding:4px 10px;font-size:11px}
.effect-block span{display:block;text-align:center;font-weight:900;font-size:20px;margin-top:5px}
.eq{display:flex;justify-content:space-between;gap:6px;height:150px;align-items:end}
.eq label{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.eq input{height:100px;width:18px;writing-mode:bt-lr;accent-color:var(--gold)}
input[type=range]{accent-color:var(--gold)}
.admin-layout{display:grid;grid-template-columns:230px 1fr;gap:16px;padding:16px}
.admin-nav{display:flex;flex-direction:column;gap:8px}
.admin-main{display:grid;gap:16px}
.admin-box{border:2px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#2e261e,#15100c);padding:16px}
.admin-box h2,.admin-box h3{color:var(--gold2);margin-top:0}
.flash{padding:12px;border-radius:10px;margin:12px 0;font-weight:800}.flash.ok{background:rgba(97,197,122,.15);border:1px solid var(--ok)}.flash.err{background:rgba(217,83,79,.15);border:1px solid var(--danger)}
.file-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:8px 0;padding:8px;border-bottom:1px solid rgba(215,168,75,.18)}
.login{max-width:460px;margin:80px auto;padding:24px;border:2px solid var(--gold);border-radius:18px;background:#17110c}
.footer{text-align:center;color:var(--muted);padding:14px;border-top:1px solid var(--line)}
.video-wall{display:none;padding:14px}.video-wall .card{padding:16px}body.video-mode .player-grid{display:none}body.video-mode .video-wall{display:block}
video{width:100%;max-height:72vh;background:#000;border:2px solid var(--gold);border-radius:12px;margin-top:12px}
@media(max-width:1100px){.pro-grid,.admin-layout{grid-template-columns:1fr}.side-nav{display:grid;grid-template-columns:repeat(4,1fr)}.track-list{height:360px}.top h1{font-size:25px}.controls-top,.transport-row,.dj-decks{grid-template-columns:1fr}.table-head,.track{grid-template-columns:36px 1fr 90px}.table-head span:nth-child(3),.table-head span:nth-child(4),.table-head span:nth-child(5),.track > div:nth-child(3),.track > div:nth-child(4),.track > div:nth-child(5){display:none}}


/* Online V1.2: Design-Umschalter + breite Video-Wand */
.theme-switch-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.theme-switch-wrap span{
  color:var(--gold2);
  font-weight:900;
  font-size:13px;
}
.theme-switch-wrap button{
  min-height:32px;
  padding:0 16px;
  border-radius:999px;
}

body.theme-midnight{
  --bg:#101923;
  --panel:#172635;
  --panel2:#203246;
  --panel3:#2b4058;
  --line:#9f7a38;
  --gold:#d7b46a;
  --gold2:#f3d792;
  --text:#f7f2e7;
  --muted:#d8c6a8;
  background:radial-gradient(circle at top,rgba(215,180,106,.18),transparent 40%),linear-gradient(180deg,#24374a,#071019)!important;
}
body.theme-midnight .app,
body.theme-midnight .card,
body.theme-midnight .track-card,
body.theme-midnight .dj-decks,
body.theme-midnight .control-box,
body.theme-midnight .deck-box,
body.theme-midnight .effect-block,
body.theme-midnight .admin-box{
  background:linear-gradient(180deg,#23364b,#101b27)!important;
}
body.theme-midnight .top{
  background:linear-gradient(180deg,#31465d,#0c141d)!important;
}
body.theme-midnight .nav-item{
  background:linear-gradient(180deg,#2b4058,#152435)!important;
}
body.theme-midnight input,
body.theme-midnight select,
body.theme-midnight textarea,
body.theme-midnight .search-wrap{
  background:#0d1824!important;
  color:#f7f2e7!important;
}

body.theme-emerald{
  --bg:#081511;
  --panel:#0e241d;
  --panel2:#143229;
  --panel3:#1d4337;
  --line:#9d7a39;
  --gold:#d7b46a;
  --gold2:#f2dfb0;
  --text:#f4f0e6;
  --muted:#d8ceb8;
  background:radial-gradient(circle at top,rgba(126,199,150,.16),transparent 40%),linear-gradient(180deg,#17372d,#050c09)!important;
}
body.theme-emerald .app,
body.theme-emerald .card,
body.theme-emerald .track-card,
body.theme-emerald .dj-decks,
body.theme-emerald .control-box,
body.theme-emerald .deck-box,
body.theme-emerald .effect-block,
body.theme-emerald .admin-box{
  background:linear-gradient(180deg,#17352b,#0d1f19)!important;
}
body.theme-emerald .top{
  background:linear-gradient(180deg,#2b5849,#0a1712)!important;
}
body.theme-emerald .nav-item{
  background:linear-gradient(180deg,#21463a,#10241d)!important;
}
body.theme-emerald input,
body.theme-emerald select,
body.theme-emerald textarea,
body.theme-emerald .search-wrap{
  background:#0a1712!important;
  color:#f4f0e6!important;
}

/* Video-Wand muss breit sein und nicht schmal links sitzen */
.video-wall{
  display:none;
  padding:18px;
}
.video-wall .card{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}
body.video-mode .player-grid{
  display:none!important;
}
body.video-mode .video-wall{
  display:block!important;
}
body.video-mode .video-wall .card{
  min-height:72vh;
}
body.video-mode video{
  width:100%!important;
  height:min(68vh,760px)!important;
  max-height:none!important;
  object-fit:contain;
  display:block;
}
.video-wall select{
  margin:10px 0;
}
.video-wall button{
  margin-right:8px;
}


/* Online V1.4: Equalizer sichtbar und bedienbar */
.effects{min-width:0}
.effect-block{overflow:hidden}
.eq{
  height:190px!important;
  align-items:center!important;
  padding-top:8px;
}
.eq label{
  min-width:24px;
  color:var(--gold2)!important;
  font-weight:800;
}
.eq input{
  height:120px!important;
  width:22px!important;
  writing-mode:vertical-lr;
  direction:rtl;
}
.eq small{font-size:10px}

/* Titelliste darf lange Dateinamen besser umbrechen */
.track{overflow:hidden}
.track-title,.track .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Online V1.5 sichtbar: damit man sicher erkennt, dass neue Dateien geladen sind */
.version-badge{
  display:inline-block;
  margin-top:8px;
  padding:4px 12px;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold2);
  font-weight:900;
  font-size:13px;
  background:rgba(0,0,0,.35);
}

/* V1.5 Equalizer: sichtbar vertikal, nicht mehr als kleine Punktereihe */
.eq-v15{
  height:230px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-around!important;
  gap:8px!important;
  padding:10px 6px!important;
  overflow:visible!important;
}
.eq-v15 label{
  height:205px!important;
  min-width:28px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
}
.eq-v15 small{
  color:var(--gold2)!important;
  font-size:11px!important;
  font-weight:900!important;
}
.eq-v15 input[type=range]{
  appearance:none;
  -webkit-appearance:none;
  width:165px!important;
  height:24px!important;
  transform:rotate(-90deg);
  transform-origin:center;
  margin-top:68px!important;
  background:transparent!important;
  padding:0!important;
  border:0!important;
}
.eq-v15 input[type=range]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:#4b4b4b;
  border:1px solid #777;
}
.eq-v15 input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:22px;
  margin-top:-8px;
  border-radius:50%;
  background:linear-gradient(180deg,#f4d27d,#b98225);
  border:2px solid #ffe4a5;
}
.eq-v15 input[type=range]::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:#4b4b4b;
  border:1px solid #777;
}
.eq-v15 input[type=range]::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(180deg,#f4d27d,#b98225);
  border:2px solid #ffe4a5;
}
.effects{overflow:visible!important}


/* Online V1.6: Titel in Deck A oder Deck B laden */
.load-buttons{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
}
.load-buttons button{
  min-width:38px;
  height:30px;
  padding:0;
  border-radius:999px;
  font-size:14px;
}
.load-buttons .load-a{
  background:linear-gradient(180deg,#ffe38e,#b77b18);
}
.load-buttons .load-b{
  background:linear-gradient(180deg,#d8f2ff,#4185ac);
  color:#061018;
}
.deck-box h3{
  min-height:28px;
}
.deck-progress input{
  padding:0;
}
.transport-row{
  grid-template-columns:1fr 1fr 1fr 1fr;
}
@media(max-width:1100px){
  .transport-row{grid-template-columns:1fr}
}


/* V1.6.1: richtige Tasse + Equalizer kräftiger */
.cover{
  background:radial-gradient(circle at center,#f5e7be 0%,#d0a75d 55%,#2b1a0c 100%);
}
.cover img{
  max-width:92%;
  max-height:92%;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.eq-note{
  margin-top:8px;
  text-align:center;
}
.eq-v15{
  min-height:250px!important;
  padding:16px 10px!important;
}
.eq-v15 label{
  height:220px!important;
}
.eq-v15 input[type=range]{
  width:180px!important;
}
.eq-v15 input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#414141,#777,#414141);
}
.eq-v15 input[type=range]::-webkit-slider-thumb{
  box-shadow:0 0 0 2px rgba(0,0,0,.2), 0 0 10px rgba(255,220,140,.3);
}
.eq-v15 input[type=range]::-moz-range-thumb{
  box-shadow:0 0 0 2px rgba(0,0,0,.2), 0 0 10px rgba(255,220,140,.3);
}


/* V1.6.2: stabile EQ-Darstellung und Tasse 2 */
.cover{background:radial-gradient(circle at center, rgba(255,230,170,.9), rgba(199,150,71,.65) 58%, rgba(27,17,12,.95) 100%)!important;}
.cover img{max-width:96%!important;max-height:96%!important;object-fit:contain!important;}
.eq-rows{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.eq-row{display:grid;grid-template-columns:42px 1fr 38px;align-items:center;gap:8px;color:var(--gold2);font-size:12px;}
.eq-row .eq-freq{font-weight:800;text-align:left;}
.eq-row .eq-val{font-size:12px;text-align:right;color:var(--text);}
.eq-row input[type=range]{width:100%!important;height:auto!important;padding:0!important;accent-color:var(--gold)!important;writing-mode:initial!important;direction:ltr!important;}
.eq-row input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,#606060,#b5b5b5,#606060);border-radius:999px;}
.eq-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-5px;width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#ffe38e,#b77b18);border:1px solid rgba(0,0,0,.35);}
.eq-row input[type=range]::-moz-range-track{height:6px;background:linear-gradient(90deg,#606060,#b5b5b5,#606060);border-radius:999px;}
.eq-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#ffe38e,#b77b18);border:1px solid rgba(0,0,0,.35);}
.effect-block .eq,.effect-block .eq-v15{display:none!important;}


/* V1.6.3: Überblend-Buttons wie in der Offline-Version */
.blend-box .slider-line{
  margin-bottom:8px;
}
.blend-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.blend-buttons button{
  min-height:34px;
  padding:6px 8px;
  border-radius:10px;
  font-size:13px;
}
#fadeTime{
  padding:0!important;
}


/* V1.6.4: Effekt-Schalter sichtbar aktiv/inaktiv */
.effect-toggle{
  min-width:54px;
}
.effect-toggle.on,
#effectsBypass.on{
  background:linear-gradient(180deg,#74e08a,#218844)!important;
  color:#061508!important;
  border-color:#b6ffc4!important;
}
.effect-block input[type=range]{
  padding:0!important;
}
.effect-block > span{
  color:var(--text);
}


/* V1.6.5: Coveranzeige und stärkerer Hall */
.cover{
  height:250px!important;
  padding:12px;
}
.cover img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:10px;
}
.cover-source{
  text-align:center;
  color:var(--gold2)!important;
  margin-top:-4px;
  margin-bottom:8px;
}
.effect-toggle.on,
#effectsBypass.on{
  box-shadow:0 0 14px rgba(116,224,138,.35);
}


/* V1.6.6: Desktop-Kompakt - etwas flacher, damit kein Scrollen nötig ist */
.app{
  margin:10px auto!important;
}
.top{
  padding:14px 14px 12px!important;
}
.crown{
  font-size:16px!important;
}
.top h1{
  font-size:31px!important;
  letter-spacing:5px!important;
  margin:2px 0 0!important;
}
.top p{
  margin:5px 0 0!important;
  font-size:14px!important;
}
.version-badge{
  margin-top:6px!important;
  padding:3px 10px!important;
  font-size:12px!important;
}
.theme-switch-wrap{
  margin-top:6px!important;
  gap:8px!important;
}
.theme-switch-wrap span{
  font-size:12px!important;
}
.theme-switch-wrap button{
  min-height:28px!important;
  padding:0 14px!important;
  font-size:12px!important;
}

.pro-grid{
  grid-template-columns:86px 235px minmax(680px,1fr) 258px!important;
  gap:8px!important;
  padding:8px!important;
}
.card,.track-card,.dj-decks,.control-box{
  padding:9px!important;
  border-radius:12px!important;
}
.side-nav{
  border-radius:12px!important;
}
.nav-item{
  min-height:56px!important;
  gap:3px!important;
  font-size:10px!important;
}
.nav-item span{
  font-size:18px!important;
}
.cover-card{
  padding:8px!important;
}
.cover{
  height:182px!important;
  padding:8px!important;
}
.stars{
  margin:7px 0!important;
  font-size:15px!important;
  letter-spacing:4px!important;
}
.cover-source{
  margin-top:0!important;
  margin-bottom:6px!important;
  font-size:11px!important;
}
.meta-list{
  grid-template-columns:62px 1fr!important;
  gap:5px 7px!important;
  font-size:12px!important;
}
.main-panel{
  gap:6px!important;
}
.controls-top{
  grid-template-columns:1fr 154px 96px!important;
  gap:8px!important;
}
.search-wrap input{
  height:36px!important;
  font-size:14px!important;
}
input,select,textarea{
  padding:7px 9px!important;
  font-size:14px!important;
}
.stats-row{
  gap:12px!important;
  padding:6px 8px!important;
  font-size:12px!important;
}
.az-row{
  gap:3px!important;
}
.az-row button{
  min-width:26px!important;
  height:26px!important;
  font-size:11px!important;
}
.table-head{
  height:30px!important;
  padding:0 8px!important;
  font-size:11px!important;
}
.track-list{
  height:248px!important;
}
.track{
  min-height:35px!important;
  padding:4px 8px!important;
  font-size:12px!important;
}
.track-title{
  font-size:12px!important;
}
.small{
  font-size:11px!important;
}
.dj-decks{
  gap:8px!important;
  padding:8px!important;
}
.deck-box{
  padding:9px!important;
}
.deck-head{
  font-size:12px!important;
}
.deck-head span{
  padding:2px 7px!important;
}
.deck-box h3{
  margin:7px 0 4px!important;
  font-size:16px!important;
  min-height:22px!important;
}
.deck-box p{
  font-size:12px!important;
}
.deck-progress{
  margin-top:7px!important;
  gap:6px!important;
  font-size:11px!important;
}
.deck-buttons{
  gap:6px!important;
  margin-top:7px!important;
}
.deck-buttons button{
  padding:7px 12px!important;
  font-size:13px!important;
}
.transport-row{
  gap:8px!important;
}
.control-box label{
  margin-bottom:6px!important;
  font-size:12px!important;
}
.slider-line{
  gap:7px!important;
}
.wide-btn{
  min-height:34px!important;
}
.blend-buttons{
  gap:6px!important;
  margin-top:6px!important;
}
.blend-buttons button{
  min-height:32px!important;
  font-size:12px!important;
}

.effects{
  gap:8px!important;
}
.effects h2{
  margin:2px 0!important;
  font-size:18px!important;
}
.effect-block{
  padding:9px!important;
}
.effect-head{
  font-size:12px!important;
}
.effect-head button{
  padding:3px 10px!important;
  font-size:11px!important;
}
.effect-block > span{
  margin-top:4px!important;
  font-size:16px!important;
}
.effect-block input[type=range]{
  margin-top:3px!important;
}
.eq-rows{
  gap:5px!important;
  margin-top:8px!important;
}
.eq-row{
  grid-template-columns:34px 1fr 30px!important;
  gap:6px!important;
  font-size:11px!important;
}
.eq-note{
  margin-top:6px!important;
  font-size:10px!important;
}
.footer{
  padding:9px 8px!important;
  font-size:12px!important;
}

/* Falls der Desktop knapp ist, zusätzlich etwas kompakter */
@media (max-height: 980px){
  .top{padding:12px 12px 10px!important;}
  .cover{height:170px!important;}
  .track-list{height:228px!important;}
  .dj-decks,.card,.track-card,.control-box{padding:8px!important;}
  .effect-block{padding:8px!important;}
}