* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
body { background:#121212; color:#fff; }

header {
  text-align:center;
  padding: 4rem 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
}
header h1 { font-size: 3.5rem; }
header .tagline { font-size: 1.2rem; opacity: 0.9; }

.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.album-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .3s;
  background:#1e1e1e;
}
.album-card:hover { transform: scale(1.05); }
.album-card img { width:100%; display:block; }
.album-card h3 { padding:1rem; text-align:center; font-size:1.1rem; }

.modal {
  display:none;
  position:fixed;
  z-index:1000;
  left:0; top:0; width:100%; height:100%;
  background:rgba(0,0,0,0.8);
  align-items:center;
  justify-content:center;
}
.modal-content {
  background:#1e1e1e;
  padding:2rem;
  border-radius:12px;
  max-width:90%;
  max-height:90%;
  overflow-y:auto;
  text-align:center;
}
.close { float:right; font-size:2rem; cursor:pointer; }

#tracks-list {
  list-style:none;
  margin-top:1rem;
}
#tracks-list li {
  padding:1rem;
  background:#333;
  margin:0.5rem 0;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#tracks-list li:hover { background:#444; }
.play-count { font-size:0.9rem; color:#aaa; }

#player {
  position:fixed;
  bottom:0; left:0; right:0;
  background:#1e1e1e;
  padding:1rem;
  display:flex;
  align-items:center;
  gap:1rem;
  border-top:1px solid #333;
}
#player-cover { width:60px; height:60px; border-radius:8px; object-fit:cover; }
.track-info { flex:1; }
.controls button { background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }
.progress-container { display:flex; align-items:center; gap:0.5rem; flex:2; }
#progress-bar { flex:1; height:6px; background:#333; border-radius:3px; overflow:hidden; }
#progress { height:100%; width:0%; background:#667eea; transition: width .1s; }

/* Admin */
.admin-body { background:#000; }
.admin-container { max-width:800px; margin:2rem auto; padding:2rem; background:#111; border-radius:12px; }
.admin-container input, .admin-container select, .admin-container button {
  display:block; width:100%; margin:0.5rem 0; padding:0.8rem; border-radius:8px; border:none;
}
.admin-container button { background:#667eea; color:#fff; cursor:pointer; font-weight:bold; }
.crud-item { background:#222; padding:1rem; margin:1rem 0; border-radius:8px; }
.crud-item button { background:#e74c3c; margin-left:0.5rem; padding:0.5rem 1rem; }

@media (max-width: 768px) {
  header h1 { font-size: 2.5rem; }
  #player { flex-direction:column; padding:1rem 0.5rem; }
  .progress-container { width:100%; }
}