@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Inter:wght@400;600;700&display=swap";:root{--bg-dark: #050a07;--bg-dark-secondary: #0a140f;--matrix-green: #00ff66;--matrix-bright: #66ffaa;--matrix-dim: #008833;--matrix-dark: #002b11;--cyber-cyan: #00f0ff;--cyber-pink: #ff0055;--text-main: #e0ffe8;--text-muted: #80b390;--glass-bg: rgba(8, 20, 14, .75);--glass-border: rgba(0, 255, 102, .25);--glass-border-hover: rgba(0, 255, 102, .65);--glass-glow: 0 0 15px rgba(0, 255, 102, .15);--font-mono: "Share Tech Mono", "Courier New", monospace;--font-pixel: "VT323", monospace;--font-sans: "Inter", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100vh;background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);line-height:1.5;overflow-x:hidden}body:before{content:" ";display:block;position:fixed;top:0;left:0;bottom:0;right:0;background:linear-gradient(#12101000 50%,#0000004d 50%),linear-gradient(90deg,#ff000008,#00ff0003,#0000ff08);z-index:99;background-size:100% 3px,6px 100%;pointer-events:none;opacity:.7}.app-container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem;display:flex;flex-direction:column;gap:2.5rem}.hero-header{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-glow),inset 0 0 20px #00ff660d;border-radius:8px;padding:2rem;position:relative;overflow:hidden}.hero-header:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--matrix-green),var(--cyber-cyan),transparent)}.system-status-bar{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.85rem;color:var(--matrix-green);letter-spacing:1px;margin-bottom:1rem;border-bottom:1px dashed var(--glass-border);padding-bottom:.75rem}.status-indicator{display:flex;align-items:center;gap:.5rem}.dot{width:8px;height:8px;background-color:var(--matrix-green);border-radius:50%;box-shadow:0 0 8px var(--matrix-green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.hero-title{font-family:var(--font-pixel);font-size:3.5rem;line-height:1;color:var(--matrix-green);text-shadow:0 0 12px rgba(0,255,102,.6),0 0 2px #fff;letter-spacing:2px;margin-bottom:.5rem}.hero-subtitle{font-family:var(--font-mono);font-size:1.1rem;color:var(--text-muted);display:flex;align-items:center;gap:.5rem}.hero-subtitle .highlight{color:var(--cyber-cyan);text-shadow:0 0 8px rgba(0,240,255,.4)}.controls-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:#050f0a99;border:1px solid var(--glass-border);border-radius:6px;padding:.85rem 1.25rem;font-family:var(--font-mono);font-size:.9rem}.control-group{display:flex;align-items:center;gap:1rem}.badge{background:var(--matrix-dark);color:var(--matrix-green);border:1px solid var(--matrix-dim);padding:.25rem .6rem;border-radius:4px;font-size:.8rem;text-transform:uppercase}.tracks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:1.5rem}@media (max-width: 600px){.tracks-grid{grid-template-columns:1fr}}.track-card{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:8px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.track-card:hover{transform:translateY(-4px);border-color:var(--glass-border-hover);box-shadow:0 8px 24px #0f63}.track-card.is-playing{border-color:var(--matrix-green);box-shadow:0 0 25px #00ff6659;background:#0a1e14d9}.track-card-hud{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.8rem;border-bottom:1px solid rgba(0,255,102,.15);padding-bottom:.5rem}.rank-badge{font-family:var(--font-pixel);font-size:1.3rem;color:var(--matrix-green);letter-spacing:1px;text-shadow:0 0 6px rgba(0,255,102,.5)}.hud-live-tag{color:var(--cyber-cyan);text-shadow:0 0 8px var(--cyber-cyan);font-weight:700;animation:blink 1.2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.hud-ready-tag{color:var(--text-muted)}.track-card-body{display:flex;gap:1.25rem;align-items:flex-start}.album-art-container{position:relative;width:100px;height:100px;flex-shrink:0;border-radius:6px;overflow:hidden;border:1px solid var(--matrix-dim);cursor:pointer}.album-art{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.album-art-container:hover .album-art{transform:scale(1.08)}.play-overlay-btn{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;border:none;color:var(--matrix-green);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;cursor:pointer}.album-art-container:hover .play-overlay-btn,.track-card.is-playing .play-overlay-btn{opacity:1}.play-overlay-btn .icon{width:32px;height:32px;filter:drop-shadow(0 0 6px var(--matrix-green))}.equalizer-overlay{position:absolute;bottom:6px;left:50%;transform:translate(-50%);display:flex;align-items:flex-end;gap:3px;height:18px;padding:0 4px;background:#0009;border-radius:4px;pointer-events:none}.eq-bar{width:4px;background-color:var(--matrix-green);box-shadow:0 0 6px var(--matrix-green);border-radius:1px}.eq-bar.bar-1{animation:eq .8s ease-in-out infinite alternate}.eq-bar.bar-2{animation:eq .5s ease-in-out infinite alternate .2s}.eq-bar.bar-3{animation:eq .9s ease-in-out infinite alternate .1s}.eq-bar.bar-4{animation:eq .6s ease-in-out infinite alternate .3s}@keyframes eq{0%{height:4px}to{height:16px}}.track-details{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}.track-title{font-size:1.15rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:.9rem;color:var(--matrix-bright);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-album{font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-progress-wrapper{width:100%;height:6px;background:#00ff661a;border-radius:3px;margin-top:.4rem;overflow:hidden;cursor:pointer;border:1px solid var(--matrix-dark)}.audio-progress-bar{height:100%;background:linear-gradient(90deg,var(--matrix-dim),var(--matrix-green));box-shadow:0 0 8px var(--matrix-green);transition:width .1s linear}.no-preview-tag{font-size:.75rem;font-family:var(--font-mono);color:#fff6;font-style:italic;margin-top:.4rem}.track-actions{display:flex;gap:.75rem;margin-top:.6rem}.arcade-btn{font-family:var(--font-mono);font-size:.78rem;padding:.4rem .8rem;border-radius:4px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent;outline:none}.play-btn{background:var(--matrix-dark);color:var(--matrix-green);border-color:var(--matrix-dim)}.play-btn:hover{background:var(--matrix-dim);color:#fff;box-shadow:0 0 10px #0f66}.play-btn.active{background:var(--matrix-green);color:#000;font-weight:700;box-shadow:0 0 12px var(--matrix-green)}.spotify-btn{background:#1db95426;color:#1ed760;border-color:#1db95466}.spotify-btn:hover{background:#1ed760;color:#000;box-shadow:0 0 12px #1ed76080}.spotify-icon{width:14px;height:14px}.loader-container,.error-container{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:8px;padding:3rem 2rem;text-align:center;font-family:var(--font-mono)}.cyber-spinner{width:48px;height:48px;border:4px solid var(--matrix-dark);border-top-color:var(--matrix-green);border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite;box-shadow:0 0 15px var(--matrix-green)}@keyframes spin{to{transform:rotate(360deg)}}.footer{text-align:center;font-family:var(--font-mono);font-size:.85rem;color:var(--text-muted);padding:1.5rem 0;border-top:1px dashed var(--glass-border);margin-top:2rem}