/* ========== Reset & Theme ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg-1:#0a0a23;
  --bg-2:#1a1a3a;
  --bg-3:#2a1a5a;
  --panel: rgba(20,20,45,0.9);
  --panel-soft: rgba(26,26,58,0.8);
  --border: rgba(255,255,255,0.1);
  --text:#fff;
  --muted:#b8b8d4;
  --muted-2:#9999b3;
  --accent-1:#4a148c;
  --accent-2:#6a1b9a;
  --accent-3:#8e24aa;
  --gold-1:#8B4513;
  --gold-2:#CD853F;
  --gold-3:#DAA520;
  --radius-lg:20px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-1:0 20px 40px rgba(0,0,0,.3), 0 0 20px rgba(255,255,255,.06);
  --shadow-2:0 10px 20px rgba(0,0,0,.35);
  --focus: 0 0 0 3px rgba(142,36,170,.35);
}

html, body { height: 100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  background-attachment: fixed;
  padding: 12px;
  overflow-x: hidden;
  position: relative;
}

/* soft starfield */
body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #fff, transparent);
  background-size: 200px 100px;
  animation: twinkle 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes twinkle { 0%,100%{opacity:.8} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}

/* ========== Layout ========== */
.container{
  max-width: 1100px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-1);
  position: relative;
  z-index: 2;
}
@media (max-width: 768px){
  .container{ border-radius: 12px; padding: 14px; }
}

.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom: 18px;
}
@media (max-width:768px){
  .header{ flex-direction:column; text-align:center; }
}

/* ========== Buttons ========== */
.header-buttons{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.home-btn, .admin-btn{
  text-decoration:none; color:#fff; font-weight:600; font-size:.95rem;
  padding:10px 16px; border-radius: 999px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.2);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.home-btn{
  background: linear-gradient(45deg, var(--accent-1), var(--accent-2), var(--accent-3));
  box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 6px rgba(142,36,170,.35);
}
.home-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(45deg, var(--accent-2), var(--accent-3));
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 14px rgba(142,36,170,.55);
}

.admin-btn{
  background: linear-gradient(45deg, var(--gold-1), var(--gold-2), var(--gold-3));
  box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 6px rgba(139,69,19,.35);
}
.admin-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(45deg, var(--gold-2), var(--gold-3));
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 14px rgba(139,69,19,.55);
}

/* ========== Headings ========== */
h1{
  margin: 0 auto 14px;
  text-align:center; font-size: 2.2rem; letter-spacing:.2px;
  text-shadow: 0 0 10px rgba(255,255,255,.45), 0 0 20px rgba(138,43,226,.28);
  animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow{
  from{ text-shadow: 0 0 10px rgba(255,255,255,.45), 0 0 20px rgba(138,43,226,.28); }
  to{   text-shadow: 0 0 15px rgba(255,255,255,.75), 0 0 30px rgba(138,43,226,.5); }
}
@media (prefers-reduced-motion: reduce){ h1{ animation:none; } }
@media (max-width:480px){ h1{ font-size:1.8rem; } }

/* ========== Featured ========== */
.featured-song{
  background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 18px; color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--shadow-2), 0 0 14px rgba(138,43,226,.18);
}
.featured-song::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 200px at -10% -10%, rgba(255,255,255,.2), transparent 60%),
              radial-gradient(600px 200px at 110% 110%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.featured-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.featured-badge{
  background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 999px; font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform: uppercase;
}
.featured-title{ font-size:1.6rem; font-weight:800; margin-bottom:6px; text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.featured-artist{ font-size:1.1rem; opacity:.9; margin-bottom:12px; font-style:italic; }
.featured-description{ font-size:.98rem; opacity:.9; line-height:1.55; margin-bottom:16px; }
.featured-play-btn{
  appearance:none; border:2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:1rem;
  padding:10px 18px; border-radius: 999px; display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.featured-play-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.55); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
@media (max-width:768px){
  .featured-title{ font-size:1.4rem; } .featured-artist{ font-size:1rem; }
}

/* ========== Player ========== */
.player{
  background: var(--panel-soft);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-2), 0 0 12px rgba(138,43,226,.12);
}
.now-playing{ text-align:center; margin-bottom:14px; }
.track-title{ font-size:1.3rem; font-weight:800; margin-bottom:6px; text-shadow: 0 0 6px rgba(255,255,255,.3); }
.track-info{ color: var(--muted); font-size:.92rem; }

/* Controls */
.controls{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap: wrap; margin-bottom:14px;
}
.control-btn{
  appearance:none; border:1px solid rgba(255,255,255,.2);
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; cursor:pointer; user-select:none;
  background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 0 10px rgba(138,43,226,.3);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.control-btn:hover{ transform: scale(1.08); background: linear-gradient(45deg, var(--accent-2), var(--accent-3)); border-color: rgba(255,255,255,.4); box-shadow: 0 0 16px rgba(138,43,226,.55); }
.play-pause{ width:60px; height:60px; font-size:22px; background: linear-gradient(45deg, var(--accent-2), var(--accent-3)); }
.play-pause:hover{ background: linear-gradient(45deg, var(--accent-3), #ab47bc); }

/* Modes */
.shuffle-repeat{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.mode-btn{
  appearance:none; background: rgba(255,255,255,.1); color: var(--muted);
  border:1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding:10px 14px; font-size:.9rem; cursor:pointer; min-height: 40px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(4px);
}
.mode-btn.active{
  background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
  color:#fff; border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 10px rgba(138,43,226,.35);
}

/* ========== Progress ========== */
.progress-container{ width:100%; margin-bottom: 14px; }
.progress-bar{
  position: relative; width:100%; height:10px;
  background: rgba(255,255,255,.2); border:1px solid var(--border);
  border-radius: 6px; cursor: pointer; user-select:none; touch-action: manipulation;
  transition: height .12s ease;
  z-index: 10; /* ensure clickable above neighbors */
}
.progress-bar:hover{ height:12px; }
.progress{ position:absolute; inset:0 0 0 0; width:0%; height:100%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  border-radius: 6px; box-shadow: 0 0 10px rgba(138,43,226,.45);
  transition: width .08s linear;
  pointer-events: none; /* clicks always hit .progress-bar */
}
.time-display{
  display:flex; justify-content:space-between; color: var(--muted); font-size:.92rem; margin-top:6px;
}

/* ========== Volume ========== */
.volume-control{ display:flex; align-items:center; justify-content:center; gap:10px; }
.volume-slider{
  -webkit-appearance:none; appearance:none; width:120px; height:8px; border-radius:6px;
  background: rgba(255,255,255,.2); border:1px solid var(--border); cursor:pointer; touch-action: manipulation;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background: linear-gradient(45deg, var(--accent-2), var(--accent-3));
  border:1px solid rgba(255,255,255,.6); box-shadow: 0 0 8px rgba(138,43,226,.5);
}
.volume-slider::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background: linear-gradient(45deg, var(--accent-2), var(--accent-3));
  border:1px solid rgba(255,255,255,.6);
}

/* ========== Playlist ========== */
.playlist{
  background: var(--panel-soft);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px; box-shadow: var(--shadow-2), 0 0 12px rgba(138,43,226,.12);
}
.playlist-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;
}
.playlist-title{ font-weight:800; font-size:1.1rem; text-shadow: 0 0 6px rgba(255,255,255,.25); }
.search-box{
  width: 260px; max-width:100%;
  padding:10px 14px; border-radius:999px; color:#fff;
  background: rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
  outline:none; transition: border-color .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(4px);
}
.search-box::placeholder{ color: var(--muted); }
.search-box:focus{ border-color: var(--accent-3); box-shadow: 0 0 10px rgba(138,43,226,.35); }

.track-list{ max-height: 380px; overflow-y:auto; -webkit-overflow-scrolling: touch; }
.track-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px; border-radius:10px; color:#fff;
  cursor:pointer; transition: background .15s ease, box-shadow .2s ease, transform .08s ease;
  min-height: 44px;
}
.track-item:hover{ background: rgba(255,255,255,.08); }
.track-item.active{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  box-shadow: 0 0 14px rgba(138,43,226,.35);
}
.track-number{ width: 36px; text-align:center; font-weight:700; color: var(--muted); }
.track-item.active .track-number{ color:#fff; }
.track-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-duration{ color: var(--muted-2); font-size:.9rem; min-width:56px; text-align:right; }

.loading{ text-align:center; color: var(--muted); font-style:italic; padding:18px; }

/* ========== Accessibility ========== */
:focus-visible{ outline:none; box-shadow: var(--focus); border-radius: 8px; }
button:focus-visible, a:focus-visible, .progress-bar:focus-visible, .track-item:focus-visible{
  box-shadow: var(--focus);
}

/* ========== iOS background fix ========== */
@supports (-webkit-touch-callout: none){
  body{ background-attachment: scroll; background-size: 100% 100%; background-repeat:no-repeat; }
  body::before{ position:absolute; }
}