:root { --accent:#00ff88; --bg:#0b0e12; --fg:#e6e6e6; --muted:#b0bec5; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.navbar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(0,0,0,0.35);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.08)}
.nav-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:12px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.logo i{color:var(--accent)}
.theme-toggle{background:transparent;border:1px solid rgba(255,255,255,0.15);color:#fff;padding:8px 10px;border-radius:10px;cursor:pointer}
.hero{padding:120px 20px 30px;position:relative;text-align:center;z-index:10}
.hero-title{font-size:48px;margin:0 0 8px}
.gradient-text{background:linear-gradient(90deg,#00ff88,#ff006e,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{color:#cfd8dc;max-width:820px;margin:0 auto 22px}
.hero-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.stat{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);padding:12px 16px;border-radius:14px}
.stat-number{font-weight:800;font-size:18px}
.stat-label{display:block;color:#b0bec5;font-size:12px;margin-top:2px}
.main-content{max-width:1200px;margin:0 auto;padding:20px;position:relative;z-index:10}
.content-section{margin:28px 0}
.section-title{display:flex;align-items:center;gap:10px;font-size:22px;margin:0 0 14px}
.section-title i{color:var(--accent)}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.pack-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:14px;transition:transform .15s ease, box-shadow .15s ease}
.pack-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.25)}
.pack-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pack-icon{color:var(--accent);font-size:18px}
.pack-title{margin:10px 0 12px;font-size:16px}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);padding:8px 10px;font-size:13px;color:#fff;background:rgba(255,255,255,0.06);cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,rgba(0,255,136,0.25),rgba(59,130,246,0.25));border-color:rgba(255,255,255,0.18)}
.btn-secondary{background:rgba(255,255,255,0.04)}
.pack-actions{display:flex;gap:8px}
.music-notes-container{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.music-note{position:absolute;top:-50px;font-size:30px;animation:floatUp linear infinite;pointer-events:none}
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:0}10%{opacity:0.4}90%{opacity:0.4}100%{transform:translateY(100vh) rotate(360deg);opacity:0}}
#driveModal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(10px)}
.modal-overlay{position:absolute;inset:0}
.modal-content{background:rgba(255,255,255,0.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:22px;max-width:560px;width:92%;text-align:center;color:white}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.close-modal{background:transparent;border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:16px;cursor:pointer;padding:6px 10px;border-radius:10px}
.modal-actions{display:flex;gap:10px;justify-content:center;margin:16px 0}
.modal-info{background:rgba(255,255,255,0.06);padding:12px;border-radius:10px;margin-top:6px;text-align:left}

/* Track listing styles */
.pack-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 15px;
}

.pack-actions .btn {
  flex: 1;
}

.btn-secondary {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-secondary:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

.track-list {
  width: 100%;
  margin-top: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.track-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  transition: background 0.2s;
}

.track-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.track-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.track-icon {
  color: #00ff88;
  font-size: 14px;
}

.track-name {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  flex: 1;
}

.track-actions {
  display: flex;
  gap: 8px;
}

.btn-play,
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
  flex: 1;
  text-align: center;
}

.btn-play {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.25), rgba(59, 130, 246, 0.25));
  color: #fff;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.btn-play:hover {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.35), rgba(59, 130, 246, 0.35));
  border-color: rgba(0, 255, 136, 0.5);
  transform: translateY(-1px);
}

.btn-download {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-download:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.loading {
  text-align: center;
  padding: 20px;
  color: #888;
  font-style: italic;
}

.no-tracks {
  text-align: center;
  padding: 20px;
  color: #888;
  font-style: italic;
}

/* Scrollbar for track list */
.track-list::-webkit-scrollbar {
  width: 8px;
}

.track-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.track-list::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3);
  border-radius: 4px;
}

.track-list::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5);
}

/* Light theme adjustments */
[data-theme="light"] .track-list {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .track-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .track-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .track-name {
  color: #1a1a1a;
}

/* Light theme styles */
[data-theme="light"] {
  --bg: #f5f5f5;
  --fg: #1a1a1a;
  --muted: #666;
}

[data-theme="light"] html,
[data-theme="light"] body {
  background: var(--bg);
  color: var(--fg);
}

[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .theme-toggle {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}

[data-theme="light"] .hero-subtitle {
  color: #666;
}

[data-theme="light"] .stat {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stat-label {
  color: #666;
}

[data-theme="light"] .pack-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pack-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pack-title {
  color: #1a1a1a;
}

[data-theme="light"] .btn {
  color: #1a1a1a;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.2), rgba(59, 130, 246, 0.2));
  border-color: rgba(0, 0, 0, 0.2);
}


[data-theme="light"] .btn-play {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.2), rgba(59, 130, 246, 0.2));
  color: #1a1a1a;
  border-color: rgba(0, 255, 136, 0.4);
}

[data-theme="light"] .btn-play:hover {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.3), rgba(59, 130, 246, 0.3));
}

[data-theme="light"] .btn-download {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

[data-theme="light"] .btn-download:hover {
  background: rgba(59, 130, 246, 0.2);
}
3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 40px);
}

.close-player {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-player:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

#drivePlayer {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  background: #000;
}

@media (max-width: 768px) {
  .player-modal-content {
    width: 95%;
    padding: 16px;
  }
  
  #drivePlayer {
    height: 300px;
  }
}