/* styles.css - simple purple starry look */
:root{
  --bg1: #0f0b1a;
  --bg2: #3b0f5a;
  --accent: #b38cff;
  --muted: #bdb7d6;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.03), transparent 10%),
              radial-gradient(circle at 80% 30%, rgba(255,255,255,0.02), transparent 10%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  color: #eee;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

#app{
  width:100%;
  max-width:980px;
  background: rgba(255,255,255,0.03);
  border-radius:12px;
  padding:18px;
  box-shadow: 0 8px 30px rgba(11,8,20,0.6);
  backdrop-filter: blur(6px);
}

header h1{margin:0 0 6px 0; color:var(--accent)}
.hint{margin:0 0 12px 0; color:var(--muted)}

main{display:grid; grid-template-columns: 1fr 280px; gap:16px; align-items:start}
#player{padding:12px}
#playlist{padding:12px; background: rgba(0,0,0,0.15); border-radius:8px; max-height:480px; overflow:auto}

.controls{margin:10px 0; display:flex; gap:8px}
.controls button{background:transparent; border:1px solid rgba(255,255,255,0.08); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer}

#progress-wrap{display:flex; align-items:center; gap:12px}
#seek{flex:1}

#list{list-style:none; padding:0; margin:0}
#list li{padding:8px; border-radius:6px; cursor:pointer}
#list li:hover{background: rgba(255,255,255,0.03)}
#list li.playing{background: linear-gradient(90deg, rgba(179,140,255,0.12), rgba(179,140,255,0.06)); border-left:3px solid var(--accent)}