:root{
  --bg:#0f0f10;
  --card:#1a1a1d;
  --text:#ffffff;
  --muted:rgba(255,255,255,.75);
  --blue:#2196f3;
  --line:rgba(255,255,255,.10);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.hidden{ display:none !important; }

#topBar{
  position:sticky;
  top:0;
  z-index:10;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(15,15,16,.92);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
#topBar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:0;
}
.topRight{
  display:flex;
  align-items:center;
  gap:10px;
}
.topBtn{
  background:#1b1b1f;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
}
.topBtn:active{ transform:scale(.98); }

.sectionTitleRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 2px 10px;
}
.backBtn{
  background:#1b1b1f;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
}
.brandLogo{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:8px;
  /* Make the logo appear white on dark background */
  filter: brightness(0) invert(1);
}
.brandText{
  font-weight:950;
  letter-spacing:.2px;
}
#title{
  font-weight:800;
  letter-spacing:.2px;
}

.screen{
  /*
    Room for the fixed player shell at the bottom.
    This value is set dynamically in JS based on #playerShell height so
    long album lists never end up hidden behind the player.
  */
  padding:12px 12px calc(var(--player-offset, 360px) + 16px) 12px;
}

#queueActions{
  padding:0 12px 8px;
  display:flex;
  justify-content:flex-end;
}

.sectionTitle{
  margin:8px 2px 10px;
  font-weight:800;
  color:var(--muted);
}

.list{ display:flex; flex-direction:column; gap:10px; }

.item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.itemLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}

.thumb{
  width:54px;
  height:54px;
  border-radius:12px;
  object-fit:cover;
  background:#2a2a2a;
  flex:0 0 auto;
}

.thumb.ph{
  background:linear-gradient(135deg, rgba(33,150,243,.25), rgba(156,39,176,.18));
  border:1px solid rgba(255,255,255,.06);
}
.item .meta{
  flex:1;
  min-width:0;
}
.item .name{
  font-weight:800;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item .sub{
  margin-top:2px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.actions{ display:flex; gap:8px; }

button{
  cursor:pointer;
  border:0;
  color:var(--text);
  background:rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
}
button.primary{ background:rgba(33,150,243,.90); }
button.ghost{ background:rgba(255,255,255,.08); }
button.danger{ background:rgba(255,107,107,.85); }
button.small{ padding:8px 10px; border-radius:10px; font-weight:800; }

.searchBox,.textBox{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.row{ display:flex; gap:10px; align-items:center; }
.row .textBox{ flex:1; }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}
.hint{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
}

.notice{
  padding:10px;
  color:#ff6b6b;
  font-weight:800;
}

#playerShell{
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(15,15,16,.95);
  border-top:1px solid var(--line);
  backdrop-filter: blur(10px);
}

#nowPlaying{
  padding:10px 12px 6px;
  display:flex;
  gap:10px;
  align-items:center;
}

.nowCover{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:12px;
  background:#2a2a2a;
  flex:0 0 auto;
}

.nowText{ min-width:0; }
#nowTitle{ font-weight:900; font-size:15px; }
#nowMeta{ color:var(--muted); font-size:13px; margin-top:2px; }

#queueActions{
  padding:0 12px 8px;
  display:flex;
  justify-content:flex-end;
}

.miniList{
  max-height:140px;
  overflow:auto;
  padding:0 10px 8px;
}
.miniRow{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  align-items:center;
}
.miniRow.current{
  border-color:rgba(33,150,243,.55);
  background:rgba(33,150,243,.12);
  color:var(--text);
}
.miniRow .miniName{
  flex:1; min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.miniRow .miniTime{ color:var(--muted); }

.miniRemove{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-weight:900;
}

#playerBar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}
#playerBar button{
  flex:1;
  height:44px;
}

#bottomNav{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 12px;
  border-top:1px solid var(--line);
}
.navBtn{
  flex:1;
  height:42px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}
.navBtn.active{
  background:rgba(33,150,243,.35);
  border:1px solid rgba(33,150,243,.55);
}

.modal{
  position:fixed;
  left:0; right:0; top:0; bottom:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:30;
}
.modalInner{
  width:min(420px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.modalTitle{
  font-weight:900;
}
.iconBtn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-weight:900;
}

.tabs{
  display:flex;
  gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  margin-bottom:10px;
}
.tab{
  flex:1;
  background:transparent;
  border-radius:12px;
  height:42px;
}
.tab.active{
  background:rgba(33,150,243,.35);
  border:1px solid rgba(33,150,243,.55);
}
.tabPane{ display:flex; flex-direction:column; gap:10px; }
.full{ width:100%; height:44px; }


/* FIX: Bulk upload dropdown text visibility */
select,
select option {
    color: #000 !important;
    background-color: #fff !important;
}