:root{
  --bg:#121212; --panel:#181818; --panel-2:#1f1f1f; --muted:#b3b3b3; --text:#fff;
  --line:#2a2a2a; --accent:#1db954; --accent-2:#169c45;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;

  /* Desktop: we’ll fix the sidebar and only main scrolls */
  display:block;
}

/* === SIDEBAR (fixed on desktop) === */
.sidebar{
  background:var(--panel); border-right:1px solid var(--line);
  padding:18px; display:flex; flex-direction:column; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{width:24px; height:24px; fill:var(--accent)}
.nav{display:flex; flex-direction:column; gap:8px}
.nav-btn{appearance:none; border:0; background:#202020; color:var(--text); padding:10px 12px; text-align:left; border-radius:10px; cursor:pointer; text-decoration:none}
.nav-btn:hover{background:var(--panel-2)}
.nav-btn.active{background:#222; color:var(--text)}
.tiny{color:var(--muted); font-size:12px}
.spacer{flex:1}

/* === MAIN === */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:linear-gradient(180deg, rgba(24,24,24,.98), rgba(24,24,24,.9));
  backdrop-filter:saturate(120%) blur(6px); z-index:5
}
.hamburger{display:none; border:1px solid var(--line); background:#222; color:#fff; border-radius:10px; padding:8px 10px}
.search{flex:1; background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:10px 14px}
.search::placeholder{color:#888}
.count{color:var(--muted)}
.topnav{display:none; gap:8px}
.btn{appearance:none; border:1px solid var(--line); background:#222; color:var(--text); border-radius:10px; padding:8px 12px; cursor:pointer}
.btn.back{background:#222}

/* === VIEWS === */
.view{padding:10px 16px calc(90px + env(safe-area-inset-bottom))}
.hidden{display:none}

/* === TABLE/LIST === */
.table.head{display:grid; grid-template-columns:40px 1fr 90px 160px 170px; padding:12px 8px; color:#aaa; text-transform:uppercase; letter-spacing:.04em; font-size:12px}
.list{border-top:1px solid var(--line)}
.row.item{display:grid; grid-template-columns:40px 1fr 90px 160px 170px; align-items:center; padding:10px 8px; border-bottom:1px solid var(--line); gap:8px}
.row.item:hover{background:rgba(255,255,255,.03)}
.row.item.active{background:rgba(29,185,84,.08)}
.col.title{min-width:0}
.title-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.playcol{display:flex; align-items:center; justify-content:center}
.play-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer}
.play-btn:hover{border-color:var(--accent); color:var(--accent)}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#222; color:#ddd}
.pill-mp3{background:#1c2730}
.pill-flac{background:#1f2b1f}
.pill-aac,.pill-m4a{background:#291f2b}

/* === CARDS / UPLOADER === */
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 4px 18px rgba(0,0,0,.25)}
.flash{background:#161616; border:1px solid #333; border-radius:12px; margin:8px 0; padding:8px}
.flash-line{padding:6px 8px; border-bottom:1px dashed #333}
.flash-line:last-child{border-bottom:0}
.badge{color:var(--muted)}
.muted{color:var(--muted)}
.uploader{display:flex; flex-direction:column; gap:12px}
.dropzone{position:relative; border:2px dashed #333; border-radius:16px; background:var(--panel-2); padding:26px; text-align:center}
.dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.dz-cta{pointer-events:none}
.dz-icon{font-size:28px; margin-bottom:6px; color:var(--accent)}
.dz-text{font-size:16px}
.dz-sub{color:var(--muted); margin-top:4px}
.btn.primary{background:var(--accent); border-color:var(--accent-2); color:#000; font-weight:700}
.btn.primary:hover{filter:brightness(1.05)}

/* === PLAYER BAR === */
.playerbar{
  position:sticky; bottom:0;
  display:grid; grid-template-columns:1fr auto 1.4fr auto; align-items:center; gap:16px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(24,24,24,.85), rgba(18,18,18,.95));
  border-top:1px solid var(--line); backdrop-filter:saturate(120%) blur(6px);
  touch-action:manipulation
}
.now{display:flex; align-items:center; gap:12px; min-width:0}
.art{width:44px; height:44px; border-radius:6px; background:conic-gradient(from 0deg, #1db954, #1db954 25%, #333 25%, #333 50%, #1db954 50%, #1db954 75%, #333 75%); box-shadow:0 2px 10px rgba(0,0,0,.3)}
.meta{min-width:0}
.now-title{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw}
.now-sub{color:var(--muted); font-size:12px}
.controls{display:flex; align-items:center; gap:8px; justify-content:center}
.icon{width:40px; height:40px; border-radius:50%; background:#222; border:1px solid var(--line); color:#fff}
.icon.big{width:50px; height:50px; font-size:16px}
.icon:hover{border-color:var(--accent); color:var(--accent)}
.timeline{display:flex; align-items:center; gap:8px}
.time{color:#aaa; font-variant-numeric:tabular-nums}
#seek,#vol{appearance:none; width:260px; max-width:32vw; background:transparent}
#seek::-webkit-slider-runnable-track,#vol::-webkit-slider-runnable-track{height:4px; background:#333; border-radius:999px}
#seek::-webkit-slider-thumb,#vol::-webkit-slider-thumb{appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); margin-top:-5px}
#seek{--fill:0%}
#seek::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) var(--fill), #333 var(--fill))}
.right{display:flex; align-items:center; gap:12px}
.pos{color:#aaa}

/* === DESKTOP: pin sidebar, main scroll, player fixed === */
@media (min-width: 901px){
  html, body { height:100%; }
  body { overflow:hidden; }

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:260px; height:100vh; overflow:auto;
  }
  .main{
    margin-left:260px; height:100vh; overflow:auto;
  }
  .playerbar{
    position:fixed; left:260px; right:0; bottom:0;
  }
  .view{
    padding-bottom:calc(100px + env(safe-area-inset-bottom)) !important;
  }
}

/* === MOBILE === */
@media (max-width: 900px){
  body { overflow:auto; }
  .sidebar{display:none}
  .hamburger{display:inline-block}
  .topnav{display:flex}
  .table.head{grid-template-columns:40px 1fr 70px 150px 110px}
  .row.item{grid-template-columns:40px 1fr 70px 150px 110px}
  .now-title{max-width:55vw}
  #seek,#vol{max-width:50vw}
}

/* Touch */
@media (pointer:coarse){
  .play-btn,.icon{width:52px; height:52px}
  .icon.big{width:60px; height:60px}
  #seek::-webkit-slider-thumb,#vol::-webkit-slider-thumb{width:18px; height:18px; margin-top:-7px}
}