*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d0d;--surface:#1a1a1a;--surface2:#242424;--border:#2e2e2e;
  --accent:#e63946;--accent2:#457b9d;--text:#f1f1f1;--muted:#888;
  --radius:10px;--trans:.2s ease;
}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}

/* ── LAYOUT ────────────────────────────────────── */
#app{display:flex;flex-direction:column;flex:1;max-width:1400px;margin:0 auto;width:100%;padding:12px}
header{display:flex;align-items:center;gap:12px;padding:10px 0 16px;border-bottom:1px solid var(--border);margin-bottom:14px}
header .logo{font-size:1.3rem;font-weight:700;color:var(--accent);letter-spacing:.5px}
header .spacer{flex:1}
header a.admin-link{color:var(--muted);font-size:.85rem;text-decoration:none;display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;transition:var(--trans)}
header a.admin-link:hover{color:var(--text);border-color:var(--accent)}

@media(min-width:768px){
  #main{display:grid;grid-template-columns:1fr 320px;gap:16px}
}

/* ── NOW PLAYING ───────────────────────────────── */
#now-playing{background:var(--surface);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:18px}
#cover-wrap{position:relative;width:100%;max-width:260px;margin:0 auto;aspect-ratio:1;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#cover-wrap img{width:100%;height:100%;object-fit:cover}
#equalizer{position:absolute;bottom:8px;right:8px;display:flex;align-items:flex-end;gap:3px;height:22px;opacity:0;transition:opacity .3s}
#equalizer.active{opacity:1}
#equalizer span{display:block;width:4px;background:var(--accent);border-radius:2px;animation:eq 1s infinite ease-in-out}
#equalizer span:nth-child(1){animation-delay:0s;height:10px}
#equalizer span:nth-child(2){animation-delay:.2s;height:18px}
#equalizer span:nth-child(3){animation-delay:.4s;height:12px}
#equalizer span:nth-child(4){animation-delay:.1s;height:20px}
#equalizer span:nth-child(5){animation-delay:.3s;height:8px}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

#track-info{text-align:center}
#track-title{font-size:1.1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#track-artist{color:var(--muted);font-size:.88rem;margin-top:4px}
#track-album{color:var(--muted);font-size:.8rem;margin-top:2px}
.badge-bitrate{display:inline-block;background:var(--surface2);color:var(--muted);font-size:.7rem;padding:2px 7px;border-radius:20px;margin-top:6px;border:1px solid var(--border)}

/* ── PROGRESS BAR ──────────────────────────────── */
.progress-wrap{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
#progress-bar{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--border);cursor:pointer;outline:none;transition:height .15s}
#progress-bar:hover{height:7px}
#progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-5px}
#progress-bar::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}

/* ── CONTROLS ──────────────────────────────────── */
.controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.btn-ctrl{background:none;border:none;color:var(--text);cursor:pointer;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;transition:var(--trans);font-size:1rem}
.btn-ctrl:hover{background:var(--surface2);color:var(--accent)}
.btn-ctrl.primary{background:var(--accent);color:#fff;width:52px;height:52px;font-size:1.2rem}
.btn-ctrl.primary:hover{background:#c1121f}
.btn-ctrl.active{color:var(--accent)}
.btn-ctrl svg{width:22px;height:22px;fill:currentColor;pointer-events:none}

/* ── VOLUME ────────────────────────────────────── */
.volume-wrap{display:flex;align-items:center;gap:8px}
#volume-bar{width:90px;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--border);cursor:pointer;outline:none}
#volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent2);cursor:pointer}
#volume-bar::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent2);border:none}

/* ── PLAYLIST ──────────────────────────────────── */
#playlist-panel{background:var(--surface);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow:hidden}
#playlist-panel h2{font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
#playlist-search{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);font-size:.85rem;outline:none}
#playlist-search:focus{border-color:var(--accent2)}
#playlist-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px}
.pl-item{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:7px;cursor:pointer;transition:var(--trans);user-select:none}
.pl-item:hover{background:var(--surface2)}
.pl-item.active{background:rgba(230,57,70,.15);border-left:3px solid var(--accent)}
.pl-item img{width:38px;height:38px;border-radius:5px;object-fit:cover;flex-shrink:0}
.pl-item .pl-info{flex:1;min-width:0}
.pl-item .pl-title{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-item .pl-artist{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-item .pl-dur{font-size:.72rem;color:var(--muted);flex-shrink:0}

/* ── RESPONSIVE ────────────────────────────────── */
@media(max-width:767px){
  #main{display:flex;flex-direction:column}
  #playlist-panel{max-height:340px}
  #cover-wrap{max-width:180px}
}
@media(max-width:479px){
  .controls{gap:6px}
  .btn-ctrl{width:36px;height:36px}
  .btn-ctrl.primary{width:46px;height:46px}
  #volume-bar{width:70px}
}