.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}
.modal.active { display: flex; }
.modal-content {
  border-radius: 48px;
  max-width: 1000px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: modalZoomIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
}
@keyframes modalZoomIn {
  0% { opacity: 0; transform: scale(0.9) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-content.album-pinkfloyd { background: linear-gradient(135deg, #0a0015, #1a0033, #2d004d); border: 2px solid #ff1493; box-shadow: 0 0 50px rgba(255,20,147,0.4); }
.modal-content.album-milesdavis { background: linear-gradient(135deg, #001020, #001840, #002060); border: 2px solid #4169e1; box-shadow: 0 0 50px rgba(65,105,225,0.4); }
.modal-content.album-daftpunk { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); border: 2px solid #ffd700; box-shadow: 0 0 50px rgba(255,215,0,0.4); }
.modal-content.album-fleetwoodmac { background: linear-gradient(135deg, #2d1b2e, #4a2c4a, #6b3e6b); border: 2px solid #daa520; box-shadow: 0 0 50px rgba(218,165,32,0.4); }
.modal-content.album-coltrane { background: linear-gradient(135deg, #0a2a1a, #0d3d1a, #115522); border: 2px solid #ff6347; box-shadow: 0 0 50px rgba(255,99,71,0.4); }
.modal-content.album-nirvana { background: linear-gradient(135deg, #1a1a1a, #2a2a2a, #3a0a0a); border: 2px solid #ff4500; box-shadow: 0 0 50px rgba(255,69,0,0.4); }
.modal-content.album-brubeck { background: linear-gradient(135deg, #1a2a1a, #2a3a2a, #3a4a3a); border: 2px solid #7fff00; box-shadow: 0 0 50px rgba(127,255,0,0.4); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: sticky;
  top: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  border-radius: 48px 48px 0 0;
}
.modal-header h2 { font-size: 2rem; color: #ffffff; font-family: 'Syne', sans-serif; text-shadow: 0 0 15px currentColor; animation: titleGlow 2s ease-in-out infinite; }
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.5); }
  50% { text-shadow: 0 0 20px rgba(255,255,255,0.8); }
}
.close-modal {
  font-size: 2.2rem;
  cursor: pointer;
  transition: 0.3s;
  color: #ccc;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.close-modal:hover { color: #fff; background: rgba(255,255,255,0.2); transform: rotate(90deg) scale(1.1); }

.modal-body { padding: 32px; }
.modal-grid { display: grid; grid-template-columns: 280px 1fr; gap: 36px; }
.modal-cover img { width: 100%; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); transition: all 0.4s; animation: coverFloat 3s ease-in-out infinite; }
@keyframes coverFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
.modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-bottom: 28px; }
.info-item { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 12px 16px; transition: all 0.3s ease; border-left: 3px solid transparent; }
.info-item:hover { background: rgba(255,255,255,0.12); border-left-color: #c77dff; transform: translateX(5px); }
.info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.65); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.info-value { font-size: 0.95rem; font-weight: 500; color: #ffffff; }
.audio-player-section { background: rgba(0,0,0,0.4); border-radius: 28px; padding: 20px; margin: 24px 0; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); animation: pulseBorder 2s ease-in-out infinite; }
@keyframes pulseBorder { 0%, 100% { border-color: rgba(255,255,255,0.1); } 50% { border-color: rgba(199,125,255,0.5); box-shadow: 0 0 15px rgba(199,125,255,0.3); } }
audio { width: 100%; border-radius: 60px; height: 48px; }
.tracklist, .producers { margin-top: 24px; padding-top: 20px; border-top: 2px solid rgba(199,125,255,0.3); position: relative; }
.tracklist::before, .producers::before { content: "✨"; position: absolute; top: -14px; left: 20px; background: rgba(199,125,255,0.3); padding: 0 10px; border-radius: 20px; font-size: 0.8rem; }
.tracklist h4, .producers h4 { color: #d4b4ff; margin-bottom: 16px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.tracklist ol { padding-left: 28px; color: rgba(255,255,255,0.85); display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.tracklist li { margin: 6px 0; transition: 0.2s; padding: 4px 8px; border-radius: 20px; }
.tracklist li:hover { background: rgba(199,125,255,0.2); transform: translateX(5px); color: #fff; }
.producers p { color: rgba(255,255,255,0.85); padding: 10px 16px; background: rgba(255,255,255,0.05); border-radius: 20px; display: inline-block; transition: 0.3s; }
.producers p:hover { background: rgba(199,125,255,0.2); transform: scale(1.02); }

@media (max-width: 780px) {
  .modal-grid { grid-template-columns: 1fr; }
  .modal-info-grid { grid-template-columns: 1fr; }
  .tracklist ol { grid-template-columns: 1fr; }
}

/* ===== PREMIUM ADMIN PANEL UPGRADE ===== */

.premium-admin-panel,
.admin-panel,
.dashboard-panel {
    background:
        radial-gradient(circle at top left, rgba(120,119,198,0.20), transparent 40%),
        linear-gradient(135deg, #0f172a 0%, #111827 40%, #1e293b 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 0 80px rgba(120,119,198,0.18);
    backdrop-filter: blur(18px);
    overflow-x: hidden;
overflow-y: auto;
    position: relative;
}

.premium-admin-panel::before,
.admin-panel::before,
.dashboard-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.06),
        transparent);
    transform: translateX(-100%);
    animation: premiumSweep 8s infinite linear;
    pointer-events: none;
}

@keyframes premiumSweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

.admin-panel button,
.dashboard-panel button {
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    box-shadow: 0 8px 25px rgba(99,102,241,0.35);
    transition: all .35s ease;
}

.admin-panel button:hover,
.dashboard-panel button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 35px rgba(139,92,246,0.45);
}

.admin-panel h1,
.dashboard-panel h1 {
    letter-spacing: 0.04em;
    font-weight: 800;
    text-transform: uppercase;
}


/* ===== ADMIN SCROLL FIX ===== */

html, body {
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.admin-panel,
.dashboard-panel,
.admin-content,
.admin-wrapper {
    max-height: none !important;
    overflow-y: visible !important;
}