:root{
  --bg:#0f1320;
  --panel:#141a2a;
  --glass:rgba(255,255,255,.06);
  --text:#e9eefb;
  --muted:#9aa3b2;
  --brand:#1db954;
  --brand2:#22c55e;
  --danger:#ef4444;
  --ring:#60a5fa;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at -10% -10%, #2a2f5a 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% -10%, #1f3a4b 0%, transparent 60%),
    linear-gradient(180deg,#0c1020, #0f1320 40%);
}

/* ------- helpers ------- */
.hidden{display:none!important}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.center{text-align:center}
.mt{margin-top:1.25rem}

/* ------- auth ------- */
.auth-wrap{
  min-height:100vh; display:grid; place-items:center;
  padding:2rem;
  background:
    radial-gradient(1000px 600px at 10% 10%, #1b2b4b 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #14263f 0%, transparent 60%),
    linear-gradient(180deg,#0c1020,#0f1320 40%);
}
.auth-card{
  width:100%; max-width:420px; padding:2rem; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow); animation:pop .35s ease both;
}
.brand{
  margin:0 0 .5rem 0; font-weight:700; letter-spacing:.5px;
  background:linear-gradient(45deg,#7dd3fc,#60a5fa,#a78bfa,#34d399);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-size:2rem;
}
.form{display:grid; gap:.9rem; margin-top:1rem}
.form label{display:grid; gap:.35rem; font-weight:600}
.form input{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  padding:.9rem 1rem; border-radius:12px; color:var(--text); outline:none;
}
.form input:focus{border-color:var(--ring); box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.btn{
  border:0; padding:.85rem 1.1rem; border-radius:12px; cursor:pointer; font-weight:700;
  transition:.2s transform, .2s filter, .2s background;
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#09120b}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--text)}
.btn.danger{color:#ffd9d9; border-color:rgba(255,255,255,.12)}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.link{color:#7dd3fc; text-decoration:none}
.msg{min-height:1.2rem; font-size:.9rem; margin-top:.25rem}

/* ------- app layout ------- */
.app{
  display:grid; grid-template-columns:280px 1fr; grid-template-rows:1fr 92px; gap:0;
  height:100vh; overflow:hidden;
}
.sidebar{
  padding:1rem; border-right:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  backdrop-filter: blur(18px);
}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); backdrop-filter: blur(16px)}
.logo{display:flex; gap:.6rem; align-items:center; font-weight:700; letter-spacing:.4px}
.logo i{font-size:1.5rem; color:var(--brand)}
.nav{margin-top:1rem; display:grid; gap:.35rem}
.nav-item{
  display:flex; align-items:center; gap:.75rem; width:100%;
  padding:.75rem .9rem; background:transparent; color:var(--text); border:0; border-radius:12px; cursor:pointer;
  transition: background .2s, transform .2s;
}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:rgba(29,185,84,.18); outline:1px solid rgba(29,185,84,.25)}
.divider{height:1px; background:rgba(255,255,255,.08); margin:1rem 0}
.side-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.icon-btn{background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--text); border-radius:10px; padding:.45rem .55rem; cursor:pointer}
.side-playlists{display:grid; gap:.2rem; max-height:45vh; overflow:auto; scrollbar-width:thin}
.side-playlists button{
  text-align:left; background:transparent; border:0; color:var(--text); padding:.55rem .6rem; border-radius:10px; cursor:pointer;
}
.side-playlists button:hover{background:rgba(255,255,255,.06)}

.main{display:grid; grid-template-rows:auto 1fr; overflow:hidden}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.search{
  display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:.65rem .8rem; border-radius:12px; width:min(520px, 55vw);
}
.search input{background:transparent; border:0; outline:none; color:var(--text); width:100%}
.user{display:flex; align-items:center; gap:.75rem}
.chip{background:rgba(255,255,255,.06); padding:.45rem .65rem; border-radius:999px; font-size:.9rem}

.view{padding:1rem 1.25rem 1.25rem; overflow:auto}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:1rem}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden;
  transform-origin:50% 80%; transition: transform .25s, box-shadow .25s, background .25s;
  position:relative;
}
.card:hover{transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow)}
.cover{
  aspect-ratio:1/1; background:linear-gradient(135deg,#334155 0%, #1f2937 100%);
  display:grid; place-items:center; font-size:2rem;
}
.title{font-weight:600; padding:.75rem .75rem .25rem}
.sub{color:var(--muted); font-size:.9rem; padding:0 .75rem .85rem}
.card .play-fab{
  position:absolute; right:.7rem; bottom:.7rem; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#07130b; display:grid; place-items:center; border:0; cursor:pointer;
  transform:translateY(12px); opacity:0; transition:.25s;
}
.card:hover .play-fab{transform:translateY(0); opacity:1}

.tracklist{display:grid; gap:.25rem; margin-top:1rem}
.track{
  display:grid; grid-template-columns:36px 1fr 80px 36px; align-items:center; gap:.75rem;
  padding:.55rem .7rem; border-radius:10px; transition: background .15s;
}
.track:hover{background:rgba(255,255,255,.06)}
.track.playing{background:rgba(29,185,84,.15)}
.track .num{color:var(--muted); text-align:center}
.track .info{display:grid}
.track .dur{color:var(--muted); text-align:right}
.more-btn{background:transparent; border:0; color:var(--text); cursor:pointer}

.playlist-header{display:flex; gap:1rem; align-items:center}
.cover.pulse{animation:pulse 2s infinite ease-in-out}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
@keyframes pop{from{transform:scale(.98); opacity:0}to{transform:scale(1); opacity:1}}

/* ------- player ------- */
.player{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:1rem;
  padding:.6rem 1rem; border-top:1px solid rgba(255,255,255,.06);
}
.now{display:flex; align-items:center; gap:.75rem}
.now-cover{width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,#334155,#1f2937)}
.now-title{font-weight:600}
.controls{display:grid; gap:.45rem; justify-items:center}
.btns{display:flex; gap:.45rem; align-items:center}
.play-btn{
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#07130b; font-size:1.25rem;
}
.icon-btn{display:grid; place-items:center}

.seek,.vol{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem}
.vol{grid-template-columns:auto 1fr; justify-self:end}
.time{font-variant-numeric:tabular-nums; color:var(--muted)}

.bar{
  height:8px; background:rgba(255,255,255,.12); border-radius:999px; position:relative; cursor:pointer;
}
.bar.small{height:6px; width:140px}
.fill{
  position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#f8fafc,#cbd5e1);
  border-radius:999px;
}
.thumb{
  position:absolute; top:50%; transform:translate(-50%,-50%); left:0%; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* ------- modal & toast ------- */
.modal{border:0; border-radius:14px; padding:0; background:transparent}
.modal::backdrop{background:rgba(0,0,0,.55)}
.modal-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1rem; width:min(480px,92vw)
}
.radio-col{display:grid; gap:.35rem; max-height:220px; overflow:auto; margin:.6rem 0}
.row{display:flex; gap:.5rem; align-items:center}
.row.end{justify-content:flex-end}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#0b1222; border:1px solid rgba(255,255,255,.12); color:var(--text);
  padding:.65rem .9rem; border-radius:10px; opacity:0; pointer-events:none; transition:.25s; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ------- responsive ------- */
@media (max-width: 920px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .player{grid-template-columns:1fr; row-gap:.75rem}
  .vol{justify-self:center}
}