/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  color:white;
  background:
    radial-gradient(circle at 10% 10%,rgba(255,0,180,.32),transparent 35%),
    radial-gradient(circle at 90% 8%,rgba(0,190,255,.30),transparent 35%),
    radial-gradient(circle at 50% 100%,rgba(0,255,136,.10),transparent 36%),
    linear-gradient(135deg,#050612,#12081f);
}

/* ===== LAYOUT ===== */
.studio{
  width:100vw;
  height:100vh;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

/* ===== TOPBAR ===== */
.topbar{
  height:68px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  border-radius:18px;
  background:
    linear-gradient(90deg,rgba(255,63,164,.16),rgba(53,199,255,.11)),
    rgba(8,10,25,.94);
  border:1px solid rgba(53,199,255,.28);
  box-shadow:
    0 0 18px rgba(53,199,255,.18),
    0 0 24px rgba(255,63,164,.16),
    inset 0 0 20px rgba(255,255,255,.035);
}

.topbar h1{
  font-size:28px;
  line-height:1;
  color:#ff4fb0;
  text-shadow:
    0 0 8px rgba(255,79,176,.95),
    0 0 18px rgba(255,63,164,.65);
}

.topbar h1 span,
.topbar span{
  color:#42d8ff;
  text-shadow:
    0 0 8px rgba(66,216,255,.95),
    0 0 18px rgba(53,199,255,.7);
}

.topbar p{
  margin-top:5px;
  font-size:12px;
  color:#e1e7ff;
  text-shadow:0 0 6px rgba(225,231,255,.35);
}

/* ===== STATUS ===== */
.status{
  display:flex;
  align-items:center;
  gap:8px;
}

.badge{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:bold;
  color:#eef3ff;
  text-shadow:0 0 6px rgba(255,255,255,.35);
}

.badge.red{
  color:#ff5f7e;
  border-color:rgba(255,95,126,.62);
  background:rgba(255,95,126,.10);
  box-shadow:0 0 12px rgba(255,95,126,.24);
  text-shadow:0 0 9px rgba(255,95,126,.85);
}

.badge.green{
  color:#00ff88;
  border-color:rgba(0,255,136,.72);
  background:rgba(0,255,136,.10);
  box-shadow:0 0 14px rgba(0,255,136,.32);
  text-shadow:0 0 10px rgba(0,255,136,.95);
}

/* ===== GRID ===== */
.grid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  grid-template-rows:minmax(0,1fr) 230px;
  gap:10px;
  overflow:hidden;
}

/* ===== CARDS ===== */
.card{
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:12px;
  border-radius:20px;
  background:rgba(10,12,28,.90);
  border:1px solid rgba(53,199,255,.20);
  box-shadow:
    0 0 18px rgba(53,199,255,.13),
    0 0 20px rgba(255,63,164,.10),
    inset 0 0 22px rgba(255,255,255,.03);
}

/* Playlist links */
.grid .card:nth-child(1){
  background:
    linear-gradient(135deg,rgba(255,63,164,.075),rgba(53,199,255,.04)),
    rgba(10,12,28,.92);
}

/* Player oben rechts */
.grid .card:nth-child(2){
  background:
    linear-gradient(135deg,rgba(255,63,164,.17),rgba(53,199,255,.14),rgba(10,12,28,.94)),
    rgba(10,12,28,.92);
  border-color:rgba(53,199,255,.35);
  box-shadow:
    0 0 20px rgba(53,199,255,.24),
    0 0 18px rgba(255,63,164,.14),
    inset 0 0 24px rgba(255,255,255,.04);
}

/* Cartwall unten */
.card.full{
  grid-column:1 / -1;
  background:
    linear-gradient(135deg,rgba(255,63,164,.09),rgba(53,199,255,.06)),
    rgba(10,12,28,.92);
}

h2{
  font-size:22px;
  margin-bottom:10px;
  color:#ffffff;
  text-shadow:
    0 0 7px rgba(255,255,255,.65),
    0 0 12px rgba(53,199,255,.62);
}

.grid .card:nth-child(2) h2{
  color:#42d8ff;
  text-shadow:
    0 0 9px rgba(66,216,255,.95),
    0 0 16px rgba(255,63,164,.34);
}

.card.full h2{
  color:#ff4fb0;
  text-shadow:
    0 0 9px rgba(255,79,176,.9),
    0 0 15px rgba(255,63,164,.5);
}

/* ===== DROPZONE ===== */
.dropzone{
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin-bottom:10px;
  padding:8px;
  border-radius:15px;
  border:2px dashed rgba(53,199,255,.42);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  font-size:12px;
  color:#eaf0ff;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease;
}

.dropzone strong{
  color:#ff4fb0;
  text-shadow:
    0 0 8px rgba(255,79,176,.95),
    0 0 14px rgba(255,63,164,.55);
}

.dropzone small{
  color:#e2e8ff;
  text-shadow:0 0 5px rgba(226,232,255,.35);
}

.dropzone:hover,
.dropzone.dragover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:#00ff88;
  box-shadow:0 0 16px rgba(0,255,136,.32);
}

/* ===== PLAYLIST ===== */
.playlist-head{
  display:grid;
  grid-template-columns:40px 1fr 1.4fr 80px 210px;
  gap:6px;
  padding:0 4px 7px;
  font-size:12px;
  color:#e6ecff;
  font-weight:bold;
  text-shadow:0 0 6px rgba(230,236,255,.45);
}

#playlist{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:4px;
}

.playlist-row{
  display:grid;
  grid-template-columns:40px 1fr 1.4fr 80px 210px;
  gap:6px;
  align-items:center;
  margin-bottom:5px;
  padding:7px;
  border-radius:10px;
  font-size:12px;
  color:#f1f5ff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  text-shadow:0 0 5px rgba(255,255,255,.22);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.playlist-row:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(53,199,255,.42);
  box-shadow:0 0 10px rgba(53,199,255,.18);
}

.playlist-row.activeTrack{
  border-color:#00ff88;
  box-shadow:0 0 14px rgba(0,255,136,.34);
}

.rowBtns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}

.rowBtns button{
  min-height:26px;
  padding:4px;
  font-size:10px;
}

/* ===== PLAYER ===== */
.nowbox{
  margin-bottom:7px;
  padding:8px;
  border-radius:14px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 12px rgba(53,199,255,.10);
}

.nowbox small{
  color:#e2e8ff;
  font-size:11px;
  text-shadow:0 0 5px rgba(226,232,255,.35);
}

#nowTitle{
  margin-top:3px;
  font-size:15px;
  font-weight:bold;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ffffff;
  text-shadow:
    0 0 7px rgba(255,255,255,.65),
    0 0 13px rgba(53,199,255,.55);
}

.progress{
  height:7px;
  margin-top:6px;
  border-radius:999px;
  overflow:hidden;
  background:#111528;
}

.progress span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#35c7ff,#ff3fa4);
  box-shadow:0 0 12px rgba(53,199,255,.80);
}

.time{
  margin-top:5px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#e7edff;
  text-shadow:0 0 5px rgba(231,237,255,.38);
}

/* ===== DB METER ===== */
.dbMeterPanel{
  padding:8px;
  margin-top:6px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 0 14px rgba(53,199,255,.07),
    0 0 10px rgba(53,199,255,.08);
}

.dbHeader{
  display:flex;
  justify-content:space-between;
  margin-bottom:5px;
  font-size:11px;
  font-weight:bold;
  color:#e7edff;
  text-shadow:0 0 6px rgba(231,237,255,.45);
}

.dbMeterRow{
  display:grid;
  grid-template-columns:20px 1fr 54px;
  gap:7px;
  align-items:center;
  margin-bottom:7px;
}

.dbLabel{
  font-size:12px;
  font-weight:bold;
  color:#42d8ff;
  text-shadow:0 0 8px rgba(66,216,255,.85);
}

.dbMeter{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dbScale{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
  font-size:9px;
  color:#aeb9e6;
  text-shadow:0 0 4px rgba(174,185,230,.35);
}

.dbScale span{
  text-align:center;
}

.dbTrack{
  position:relative;
  height:11px;
  border-radius:999px;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.07) 0%,
      rgba(255,255,255,.07) 20%,
      rgba(255,255,255,.10) 20%,
      rgba(255,255,255,.10) 40%,
      rgba(255,255,255,.07) 40%,
      rgba(255,255,255,.07) 60%,
      rgba(255,255,255,.10) 60%,
      rgba(255,255,255,.10) 80%,
      rgba(255,255,255,.07) 80%,
      rgba(255,255,255,.07) 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.85);
}

.dbFill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#00ff88 0%,#00ff88 62%,#ffee00 78%,#ff335f 100%);
  box-shadow:0 0 12px rgba(0,255,136,.75);
  transition:width .06s linear;
}

.dbPeak{
  position:absolute;
  top:0;
  left:0%;
  width:2px;
  height:100%;
  background:#ffffff;
  box-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 10px rgba(255,63,164,.65);
  opacity:.9;
  transition:left .08s linear;
}

.dbValue{
  font-size:10px;
  font-weight:bold;
  color:#e7edff;
  text-align:right;
  text-shadow:0 0 6px rgba(231,237,255,.45);
}

/* Alte VU Klassen bleiben kompatibel */
.vuPanel{
  padding:7px;
  margin-top:6px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.vuRow{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:6px;
  align-items:center;
  margin-bottom:4px;
  font-size:11px;
  color:#dce2ff;
}

.vuBar{
  height:7px;
  border-radius:999px;
  background:#080a12;
  overflow:hidden;
}

.vuBar div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00ff88,#ffee00,#ff335f);
  box-shadow:0 0 12px rgba(0,255,136,.75);
}

.studioState{
  display:flex;
  justify-content:space-between;
  margin-top:5px;
  font-size:11px;
}

#onAirLight{
  color:#ff426b;
  font-weight:bold;
  text-shadow:0 0 9px rgba(255,66,107,.75);
}

#onAirLight.live{
  color:#00ff88;
  text-shadow:0 0 10px rgba(0,255,136,.9);
  animation:onAirPulse 1s infinite;
}

@keyframes onAirPulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

#deckState{
  color:#42d8ff;
  text-shadow:0 0 8px rgba(66,216,255,.75);
}

/* ===== BUTTONS ===== */
.buttons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-top:6px;
}

.buttons.two{
  grid-template-columns:1fr 1fr;
}

/* Alle Buttons */
button{
  min-height:31px;
  padding:6px 8px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(53,199,255,.26);
  background:linear-gradient(135deg,#22263b,#151827);
  color:#ff78a4;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 0 7px rgba(255,120,164,.55);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.03),
    0 0 8px rgba(255,63,164,.12);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease,
    background .18s ease,
    text-shadow .18s ease;
}

/* Leichter aber sichtbarer Hover auf ALLEN Buttons */
button:hover{
  transform:translateY(-2px);
  color:#ffffff;
  text-shadow:
    0 0 7px rgba(255,255,255,.85),
    0 0 12px rgba(53,199,255,.65);
  border-color:rgba(53,199,255,.80);
  background:linear-gradient(135deg,#2b3050,#1a1e35);
  box-shadow:
    0 0 10px rgba(53,199,255,.38),
    0 0 15px rgba(255,63,164,.26),
    inset 0 0 10px rgba(255,255,255,.04);
  filter:brightness(1.08);
}

button:active{
  transform:scale(.97);
}

button.active{
  color:#00150b;
  background:linear-gradient(135deg,#00ff88,#35c7ff);
  border-color:#00ff88;
  text-shadow:none;
  box-shadow:
    0 0 14px rgba(0,255,136,.52),
    0 0 20px rgba(53,199,255,.26);
}

button.active:hover{
  color:#00150b;
  background:linear-gradient(135deg,#16ff94,#55dcff);
  border-color:#00ff88;
  box-shadow:
    0 0 17px rgba(0,255,136,.62),
    0 0 24px rgba(53,199,255,.36);
}

button.inactive{
  color:#ff78a4;
}

/* ===== SETTINGS ===== */
.settings{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:6px;
}

.settings label{
  min-height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px;
  border-radius:10px;
  font-size:11px;
  color:#edf2ff;
  background:rgba(255,255,255,.048);
  border:1px solid rgba(255,255,255,.09);
  text-shadow:0 0 5px rgba(237,242,255,.38);
}

.settings input,
.settings select{
  width:100%;
  margin-top:3px;
}

.settings input[type="text"],
.settings select{
  height:24px;
  padding:0 6px;
  border-radius:7px;
  border:1px solid rgba(53,199,255,.22);
  background:#f4f4f4;
  color:#111;
}

.wideSetting{
  min-height:44px;
}

input[type="range"]{
  accent-color:#35c7ff;
}

input[type="checkbox"]{
  accent-color:#00ff88;
}

/* ===== CARTWALL ===== */
#cartGrid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:7px;
  overflow:auto;
  padding-right:4px;
}

.cartWrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.cartBtn{
  min-height:46px;
  padding:7px;
  border-radius:10px;
  background:linear-gradient(135deg,#ff3fa4,#35c7ff);
  color:white;
  text-shadow:0 0 7px rgba(255,255,255,.65);
  box-shadow:0 0 12px rgba(255,63,164,.24);
}

.cartBtn:hover{
  transform:translateY(-2px);
  color:white;
  border-color:rgba(53,199,255,.82);
  background:linear-gradient(135deg,#ff5ab2,#4bd2ff);
  box-shadow:
    0 0 15px rgba(255,63,164,.42),
    0 0 17px rgba(53,199,255,.30);
}

.cartBtn.active{
  background:linear-gradient(135deg,#00ff88,#35c7ff);
  color:#00150b;
  text-shadow:none;
}

.cartDelete{
  min-height:24px;
  padding:4px;
  font-size:10px;
  background:#151827;
  color:#ff7c9a;
}

.cartDelete:hover{
  color:white;
  background:linear-gradient(135deg,#2b3050,#1a1e35);
  box-shadow:
    0 0 8px rgba(255,63,164,.30),
    0 0 10px rgba(53,199,255,.20);
}

.stopall{
  min-height:30px;
  margin-bottom:7px;
}

.stopall:hover{
  color:white;
  border-color:rgba(255,63,164,.70);
  box-shadow:
    0 0 10px rgba(255,63,164,.36),
    0 0 12px rgba(53,199,255,.22);
}

/* ===== MODAL ===== */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.76);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(8px);
}

.modalOverlay.show{
  display:flex;
}

.modalBox{
  width:360px;
  max-width:92vw;
  background:#11162b;
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(53,199,255,.28);
  box-shadow:
    0 0 30px rgba(53,199,255,.28),
    0 0 24px rgba(255,63,164,.16);
}

.streamModalBox{
  width:820px;
  max-height:92vh;
  overflow:auto;
}

.modalBox h3{
  margin-bottom:12px;
  color:#ff4fb0;
  text-shadow:0 0 10px rgba(255,79,176,.75);
}

.modalBox label{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:9px;
  font-size:13px;
  color:#edf2ff;
  text-shadow:0 0 5px rgba(237,242,255,.35);
}

.modalBox input,
.modalBox select{
  height:32px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.16);
  padding:0 8px;
}

.modalButtons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.streamFormGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.checkLabel{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:space-between;
}

.streamListHeader{
  display:flex;
  justify-content:space-between;
  margin:10px 0 7px;
  color:#e7edff;
  text-shadow:0 0 5px rgba(231,237,255,.35);
}

.streamListHeader small{
  color:#bcc7ee;
}

.streamProfilesList{
  min-height:110px;
  max-height:200px;
  overflow:auto;
  padding:8px;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}

.streamProfileRow{
  padding:9px;
  border-radius:12px;
  margin-bottom:7px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  color:#edf2ff;
}

.streamProfileRow label{
  margin:0;
}

.streamProfileRow strong{
  color:#ffffff;
  text-shadow:0 0 6px rgba(255,255,255,.45);
}

.streamProfileRow small{
  color:#c7d0f4;
}

.emptyStreamInfo{
  text-align:center;
  color:#c7d0f4;
  padding:25px 10px;
  text-shadow:0 0 5px rgba(199,208,244,.35);
}

/* ===== FOOTER ===== */
footer{
  flex-shrink:0;
  text-align:center;
  font-size:10px;
  color:#d9e1ff;
  text-shadow:0 0 6px rgba(217,225,255,.40);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(#ff3fa4,#35c7ff);
  border-radius:999px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .grid{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) 230px;
  }

  .card.full{
    grid-column:auto;
  }

  .streamFormGrid{
    grid-template-columns:1fr;
  }

  .playlist-head{
    grid-template-columns:34px 1fr 1fr 70px 150px;
  }

  .playlist-row{
    grid-template-columns:34px 1fr 1fr 70px 150px;
  }
}