@font-face{font-family:Suprapower SE;src:url(/fonts/SuprapowerSE-Bold.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Suprapower SE;src:url(/fonts/SuprapowerSE-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--color-void: #020824;--color-deep: #060E2E;--color-surface: #0A1340;--color-surface-elevated: #0F1A52;--color-surface-glass: rgba(15, 26, 82, .55);--color-surface-glass-hover: rgba(25, 42, 115, .72);--color-border-glass: rgba(120, 140, 255, .16);--color-border-glass-hover: rgba(120, 140, 255, .38);--color-border-glow: rgba(79, 122, 255, .45);--color-text-primary: #F0F4FF;--color-text-secondary: #9AA8D6;--color-text-muted: #5D6B9E;--color-accent-blue: #4F7AFF;--color-accent-indigo: #6C5CE7;--color-accent-cyan: #00D2FF;--color-accent-violet: #A855F7;--color-accent-rose: #F43F5E;--color-accent-emerald: #10B981;--color-accent-amber: #F59E0B;--color-accent-orange: #F97316;--glow-blue: 0 0 35px rgba(79, 122, 255, .35), 0 0 70px rgba(79, 122, 255, .15);--glow-cyan: 0 0 35px rgba(0, 210, 255, .35), 0 0 70px rgba(0, 210, 255, .15);--glow-indigo: 0 0 35px rgba(108, 92, 231, .35);--font-display: "Suprapower SE", "Switzer", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-xs: 6px;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 9999px;--sidebar-width: 260px;--player-height: 88px;--navbar-height: 72px;--ease-spring: cubic-bezier(.16, 1, .3, 1);--transition-fast: .18s ease;--transition-normal: .3s var(--ease-spring);--transition-slow: .6s var(--ease-spring)}html,body{height:100%;width:100%;background-color:var(--color-void);color:var(--color-text-primary);font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;width:100%;display:flex;flex-direction:column}::selection{background:#4f7aff66;color:#fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#788cff33;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#788cff66}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--color-text-primary)}.glass-panel{background:var(--color-surface-glass);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--color-border-glass);box-shadow:0 8px 32px #0208245e;border-radius:var(--radius-md);transition:all var(--transition-normal)}.glass-panel:hover{border-color:var(--color-border-glass-hover)}.glass-pill{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:6px;padding:4px 12px;font-size:12px;font-weight:600;letter-spacing:.02em}.btn-primary{background:linear-gradient(135deg,var(--color-accent-blue) 0%,var(--color-accent-indigo) 100%);color:#fff;border:none;border-radius:var(--radius-full);padding:10px 22px;font-family:var(--font-body);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 20px #4f7aff59;transition:all var(--transition-normal)}.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 28px #4f7aff8c}.btn-primary:active{transform:translateY(0) scale(.99)}.btn-secondary{background:#ffffff14;color:var(--color-text-primary);border:1px solid var(--color-border-glass);border-radius:var(--radius-full);padding:10px 20px;font-family:var(--font-body);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--transition-normal)}.btn-secondary:hover{background:#ffffff26;border-color:var(--color-border-glass-hover);transform:translateY(-2px)}.btn-icon{background:#ffffff0f;border:1px solid var(--color-border-glass);color:var(--color-text-secondary);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.btn-icon:hover{background:#ffffff24;color:#fff;border-color:var(--color-border-glass-hover);transform:scale(1.05)}.btn-icon.active{color:var(--color-accent-cyan);border-color:var(--color-accent-cyan);background:#00d2ff1f}.app-layout{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative;overflow:hidden;z-index:1}.app-body{display:flex;flex:1;min-height:0;position:relative;overflow:hidden}.app-main-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px 32px 120px;display:flex;flex-direction:column;gap:28px;scroll-behavior:smooth}@keyframes float-1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}@keyframes float-2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-30px,40px) scale(1.12)}}@keyframes pulse-glow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.04)}}@keyframes rotate-vinyl{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes eq-bounce-1{0%,to{height:4px}50%{height:16px}}@keyframes eq-bounce-2{0%,to{height:14px}50%{height:6px}}@keyframes eq-bounce-3{0%,to{height:8px}50%{height:18px}}.eq-bars{display:inline-flex;align-items:flex-end;gap:2px;height:18px;width:14px}.eq-bar{width:3px;background:var(--color-accent-cyan);border-radius:2px}.eq-bar:nth-child(1){animation:eq-bounce-1 .7s ease-in-out infinite}.eq-bar:nth-child(2){animation:eq-bounce-2 .6s ease-in-out infinite .15s}.eq-bar:nth-child(3){animation:eq-bounce-3 .8s ease-in-out infinite .3s}@media(max-width:900px){.app-main-content{padding:16px 16px 120px}}
