:root{--bg:#050508;--surface:#0d0d14;--surface2:#141420;--border:rgba(255,255,255,0.07);--accent:#ff2d7a;--accent2:#7b2fff;--accent3:#00f5d4;--accent4:#ffd60a;--text:#e8e8f0;--muted:#6b6b80;--font-display:'Orbitron',monospace;--font-mono:'Share Tech Mono',monospace;--font-body:'Inter',sans-serif;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;}
#boot{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;transition:opacity 0.8s ease;}
#boot.fade{opacity:0;pointer-events:none;}
.boot-logo{font-family:var(--font-display);font-size:clamp(2rem,6vw,4rem);font-weight:900;color:var(--accent);letter-spacing:0.3em;animation:bootPulse 0.5s ease infinite alternate;}
@keyframes bootPulse{to{text-shadow:0 0 100px rgba(255,45,122,0.9);}}
.boot-lines{font-family:var(--font-mono);font-size:11px;color:var(--accent3);line-height:2;text-align:left;min-width:320px;}
.boot-bar-wrap{width:320px;height:2px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;}
.boot-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent),var(--accent3));border-radius:2px;transition:width 2.5s ease;}
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(123,47,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(123,47,255,0.04) 1px,transparent 1px);background-size:60px 60px;}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.15;}
.orb1{width:500px;height:500px;top:-200px;left:-100px;background:var(--accent);animation:orbFloat1 8s ease-in-out infinite;}
.orb2{width:400px;height:400px;bottom:-150px;right:-100px;background:var(--accent2);animation:orbFloat2 10s ease-in-out infinite;}
.orb3{width:300px;height:300px;top:40%;left:60%;background:var(--accent3);animation:orbFloat1 6s ease-in-out infinite reverse;}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,30px)}}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;}
#app{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;}
header{padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);backdrop-filter:blur(12px);background:rgba(5,5,8,0.6);position:sticky;top:0;z-index:100;}
.logo-text{font-family:var(--font-display);font-size:1.2rem;font-weight:900;letter-spacing:0.2em;color:var(--accent);}
.logo-text span{color:var(--text);}
.status-bar{display:flex;gap:1.5rem;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent3);animation:blink 2s infinite;margin-right:4px;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
.header-nav{display:flex;gap:0.5rem;align-items:center;}
.nav-btn{padding:0.4rem 1rem;font-family:var(--font-mono);font-size:11px;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:4px;transition:all 0.2s;letter-spacing:0.1em;}
.nav-btn:hover,.nav-btn.active{color:var(--accent);border-color:var(--accent);background:rgba(255,45,122,0.05);}
.search-wrap{position:relative;display:flex;align-items:center;}
.search-input{background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;padding:6px 32px 6px 12px;border-radius:4px;outline:none;width:180px;letter-spacing:0.06em;transition:border-color 0.2s,width 0.3s;}
.search-input::placeholder{color:var(--muted);}
.search-input:focus{border-color:var(--accent);width:220px;}
.search-icon{position:absolute;right:10px;font-size:14px;color:var(--muted);pointer-events:none;}
main{display:grid;grid-template-columns:1fr 380px;min-height:calc(100vh - 65px - 60px);}
#left-panel{padding:2rem;border-right:1px solid var(--border);overflow-y:auto;}
.view{display:none;}
.view.active{display:block;}
.section-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem;}
.section-label::before{content:"//";color:var(--accent);}
.playlists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.playlist-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;}
.playlist-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--card-color,var(--accent)) 0%,transparent 60%);opacity:0.08;transition:opacity 0.3s;}
.playlist-card:hover{transform:translateY(-3px) scale(1.01);border-color:var(--card-color,var(--accent));}
.playlist-card:hover::before{opacity:0.15;}
.card-icon{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem;background:rgba(255,255,255,0.05);border:1px solid var(--border);}
.card-name{font-family:var(--font-display);font-size:0.75rem;font-weight:700;letter-spacing:0.1em;margin-bottom:0.5rem;color:var(--text);}
.card-meta{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.8;}
.card-tags{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.75rem;}
.tag{font-family:var(--font-mono);font-size:9px;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--muted);letter-spacing:0.05em;}
.mini-viz{display:flex;align-items:flex-end;gap:2px;height:20px;margin-top:1rem;}
.viz-bar{width:4px;border-radius:2px;background:var(--card-color,var(--accent));opacity:0.4;animation:vizIdle 1.5s ease-in-out infinite;}
@keyframes vizIdle{0%,100%{opacity:0.2;transform:scaleY(0.5)}50%{opacity:0.5;transform:scaleY(1)}}
#pl-hero{display:none;position:relative;width:calc(100% + 4rem);margin:-2rem -2rem 0;height:180px;overflow:hidden;}
#pl-hero-img{width:100%;height:100%;object-fit:cover;display:block;}
#pl-hero-video{width:100%;height:100%;object-fit:cover;display:none;position:absolute;inset:0;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,5,8,0.2),rgba(5,5,8,0.85));}
.back-btn{font-family:var(--font-mono);font-size:11px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem;background:none;border:none;transition:color 0.2s;}
.back-btn:hover{color:var(--accent);}
.back-btn-hero{position:absolute;top:1rem;left:1.5rem;z-index:5;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);padding:6px 14px;font-family:var(--font-mono);font-size:11px;color:var(--text);cursor:pointer;border-radius:4px;}
.playlist-header{display:flex;gap:2rem;margin-bottom:1.5rem;align-items:flex-start;}
.playlist-art{width:140px;height:140px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:3rem;border:1px solid var(--border);overflow:hidden;position:relative;}
.playlist-art-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--pl-color,var(--accent)),transparent);opacity:0.3;}
.playlist-info h2{font-family:var(--font-display);font-size:1.4rem;font-weight:900;letter-spacing:0.1em;margin-bottom:0.5rem;}
.playlist-desc{font-size:0.85rem;color:var(--muted);line-height:1.6;margin-bottom:1rem;max-width:400px;}
.playlist-stats{display:flex;gap:1rem;font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.mood-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-family:var(--font-mono);letter-spacing:0.05em;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--muted);margin-right:4px;margin-top:4px;}
.mood-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pl-color,var(--accent));}
.sub-tabs{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem;}
.sub-tab{font-family:var(--font-mono);font-size:10px;padding:4px 12px;border-radius:3px;background:transparent;border:1px solid var(--border);color:var(--muted);letter-spacing:0.08em;cursor:pointer;transition:all 0.2s;}
.sub-tab:hover,.sub-tab.sub-active{color:var(--tab-color,var(--accent));border-color:var(--tab-color,var(--accent));background:rgba(255,255,255,0.04);}
.filter-bar{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;padding:0.75rem 0;margin-bottom:1rem;border-bottom:1px solid var(--border);}
.filter-bar-label{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.15em;margin-right:0.25rem;}
.filter-pill{font-family:var(--font-mono);font-size:9px;padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all 0.2s;letter-spacing:0.05em;}
.filter-pill:hover{border-color:var(--pill-color,var(--accent));color:var(--pill-color,var(--accent));}
.filter-pill.active{background:rgba(255,255,255,0.05);border-color:var(--pill-color,var(--accent));color:var(--pill-color,var(--accent));}
.song-list{display:flex;flex-direction:column;gap:1px;}
.song-row{display:grid;grid-template-columns:28px 1fr auto auto 24px;align-items:center;gap:1rem;padding:0.75rem;border-radius:6px;cursor:pointer;transition:background 0.2s;border:1px solid transparent;}
.song-row:hover{background:var(--surface);border-color:var(--border);}
.song-row.playing{background:rgba(255,45,122,0.06);border-color:rgba(255,45,122,0.2);}
.song-num{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:center;}
.playing-bars{display:none;align-items:flex-end;gap:2px;height:14px;justify-content:center;}
.playing-bars .b{width:3px;border-radius:1px;background:var(--accent);animation:playBar 0.8s ease-in-out infinite alternate;}
.playing-bars .b:nth-child(2){animation-delay:0.2s;}
.playing-bars .b:nth-child(3){animation-delay:0.4s;}
@keyframes playBar{from{height:3px}to{height:14px}}
.song-row.playing .song-num .num-label{display:none;}
.song-row.playing .playing-bars{display:flex;}
.song-title{font-size:0.88rem;font-weight:500;}
.song-artist{font-size:0.78rem;color:var(--muted);margin-top:2px;}
.song-waveform{display:flex;align-items:center;gap:1px;opacity:0.3;}
.wf-bar{width:2px;border-radius:1px;background:var(--text);}
.song-dur{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.fav-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;transition:color 0.2s;}
.fav-btn:hover,.fav-btn.active{color:var(--accent);}
.explicit-badge{font-family:var(--font-mono);font-size:8px;padding:1px 5px;border-radius:2px;background:rgba(255,45,122,0.12);border:1px solid rgba(255,45,122,0.4);color:#ff2d7a;margin-left:5px;vertical-align:middle;}
.label-badge{font-family:var(--font-mono);font-size:8px;padding:1px 4px;border-radius:2px;margin-left:3px;vertical-align:middle;}
#right-panel{display:flex;flex-direction:column;background:rgba(13,13,20,0.8);backdrop-filter:blur(20px);}
#player{padding:2rem 1.5rem;flex:1;display:flex;flex-direction:column;align-items:center;border-bottom:1px solid var(--border);}
.player-system-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.2em;margin-bottom:1.5rem;align-self:flex-start;display:flex;gap:1rem;}
.art-container{position:relative;width:200px;height:200px;margin:0 auto 2rem;}
.art-ring{position:absolute;inset:-12px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent2);animation:ringRotate 3s linear infinite;}
.art-ring2{position:absolute;inset:-20px;border-radius:50%;border:1px solid transparent;border-bottom-color:var(--accent3);opacity:0.5;animation:ringRotate 5s linear infinite reverse;}
@keyframes ringRotate{to{transform:rotate(360deg)}}
.art-inner{position:absolute;inset:0;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:4rem;overflow:hidden;}
.art-glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:0.08;pointer-events:none;animation:glowPulse 2s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{opacity:0.05}50%{opacity:0.15}}
#visualizer{position:absolute;inset:0;border-radius:50%;opacity:0.6;}
#art-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:none;z-index:2;}
#art-cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:none;z-index:2;}
.track-title{font-family:var(--font-display);font-size:0.9rem;font-weight:700;letter-spacing:0.08em;text-align:center;margin-bottom:4px;color:var(--text);}
.track-artist{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:center;margin-bottom:1.5rem;letter-spacing:0.1em;}
.progress-section{width:100%;margin-bottom:1.5rem;}
.time-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-bottom:6px;}
.progress-track{width:100%;height:3px;background:rgba(255,255,255,0.08);border-radius:3px;cursor:pointer;position:relative;}
.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width 0.5s linear;position:relative;}
.progress-fill::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem;}
.ctrl-btn{background:none;border:none;cursor:pointer;color:var(--muted);transition:all 0.2s;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;}
.ctrl-btn:hover{color:var(--text);}
.ctrl-btn svg{width:18px;height:18px;}
.ctrl-btn.active{color:var(--accent);}
.play-btn{width:56px;height:56px;background:var(--accent);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(255,45,122,0.3);transition:all 0.2s;color:white;}
.play-btn:hover{transform:scale(1.08);box-shadow:0 0 30px rgba(255,45,122,0.5);}
.play-btn svg{width:22px;height:22px;}
.volume-section{display:flex;align-items:center;gap:0.75rem;width:100%;margin-bottom:0.5rem;}
.vol-icon{color:var(--muted);}
.vol-icon svg{width:14px;height:14px;}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;background:rgba(255,255,255,0.08);border-radius:3px;cursor:pointer;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;}
#lyrics-panel{display:none;width:100%;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border);}
.lyrics-label{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.15em;margin-bottom:0.5rem;}
#lyrics-text{font-family:var(--font-body);font-size:0.78rem;color:var(--muted);line-height:1.8;max-height:140px;overflow-y:auto;white-space:pre-wrap;}
#queue-panel{padding:1.5rem;max-height:280px;overflow-y:auto;}
.queue-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.2em;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;}
.queue-item{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.5rem;border-radius:4px;cursor:pointer;transition:background 0.2s;}
.queue-item:hover{background:var(--surface2);}
.q-num{font-family:var(--font-mono);font-size:10px;color:var(--muted);min-width:16px;text-align:center;}
.q-info{flex:1;min-width:0;}
.q-title{font-size:0.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.q-artist{font-size:0.72rem;color:var(--muted);}
.q-dur{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
footer{padding:0.75rem 2rem;border-top:1px solid var(--border);backdrop-filter:blur(12px);background:rgba(5,5,8,0.8);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.footer-left{display:flex;gap:2rem;}
.footer-right{display:flex;align-items:center;gap:1rem;color:rgba(255,255,255,0.2);}
.footer-right a{color:rgba(255,255,255,0.2);text-decoration:none;}
.footer-right a:hover{color:var(--accent);}
#coin-msg{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:11px;color:var(--accent4);background:rgba(0,0,0,0.8);padding:8px 20px;border-radius:4px;border:1px solid rgba(255,214,10,0.2);opacity:0;transition:opacity 0.4s;pointer-events:none;white-space:nowrap;z-index:200;}
#coin-msg.show{opacity:1;}
#egg{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.9);align-items:center;justify-content:center;flex-direction:column;gap:1rem;}
#egg.show{display:flex;}
.egg-text{font-family:var(--font-display);font-size:1.5rem;color:var(--accent4);letter-spacing:0.2em;}
.egg-sub{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.egg-close{background:none;border:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);font-size:11px;padding:8px 20px;border-radius:4px;cursor:pointer;margin-top:1rem;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px;}

/* Drag & Drop Upload Zone Styles */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 1rem;
}
.upload-zone:hover {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}
.upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(255, 45, 122, 0.1);
  transform: scale(1.02);
}
.upload-icon {
  font-size: 2rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.upload-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.1em;
}
.upload-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  margin-top: 6px;
}