@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600&display=swap";:root{--bg-dark:#f0f2f5;--bg-card:#fff;--text-primary:#1c1e21;--text-secondary:#65676b;--accent-purple:#7b61ff;--accent-pink:#ff61d2;--gradient-text:linear-gradient(90deg, #7b61ff 0%, #ff61d2 100%);--gradient-btn:linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);--border-glass:#0000000d;--color-surface:#fff;--color-text-primary:#18181b;--color-text-secondary:#52525b;--color-border:#e4e4e7;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--font-serif:"Playfair Display", serif;--font-sans:"Outfit", sans-serif;font-family:Outfit,Inter,sans-serif}*{box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0}::-webkit-scrollbar{display:none}body{color:var(--text-primary);background-color:#f7f6fd;background-image:radial-gradient(at 100% 0,#ff61d20d 0,#0000 50%),radial-gradient(at 0 100%,#7b61ff0f 0,#0000 50%),radial-gradient(at 10% 20%,#f3f1ff99 0%,#fafafd99 90%);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}.navbar{-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);z-index:100;background:#fffc;border:1px solid #7b61ff26;border-top:none;border-radius:0 0 20px 20px;justify-content:space-between;align-items:center;width:calc(100% - 32px);margin:0 auto 30px;padding:14px 40px;display:flex;position:sticky;top:0;box-shadow:0 10px 30px #7b61ff0d,0 1px 3px #00000005;max-width:98%!important}.nav-logo{letter-spacing:-.8px;color:var(--accent-purple);background:linear-gradient(135deg, var(--accent-purple) 0%, #6242ff 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:26px;font-weight:900}.nav-menu{align-items:center;gap:32px;display:flex}.nav-item{color:#555;padding:6px 0;font-size:15px;font-weight:700;text-decoration:none;transition:color .2s;position:relative}.nav-item:hover,.nav-item.active{color:var(--accent-purple)}.nav-item.active:after{content:"";background:var(--accent-purple);border-radius:100px;width:100%;height:3px;position:absolute;bottom:-2px;left:0}.nav-actions{align-items:center;gap:20px;display:flex}.upload-button{background:var(--accent-purple);color:#fff;cursor:pointer;border:none;border-radius:100px;align-items:center;gap:10px;padding:11px 26px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 6px 20px #7b61ff59}.upload-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #7b61ff73}.hero-section{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:80px 20px 48px;display:flex;position:relative}.hero-title{color:var(--accent-purple);letter-spacing:-1.5px;text-transform:none;margin-bottom:12px;font-family:serif;font-size:68px;font-style:normal;font-weight:900}.hero-title .highlight-text{color:var(--accent-purple);font-style:italic}.hero-subtitle{color:#666;margin-bottom:40px;font-size:18px;font-weight:500}.search-container{align-items:center;width:100%;max-width:600px;margin-bottom:60px;display:flex;position:relative}.search-container input{width:100%;color:var(--text-primary);background:#fff;border:1px solid #7b61ff14;border-radius:100px;outline:none;padding:18px 70px 18px 60px;font-size:16px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 15px 35px #7b61ff0f,0 5px 15px #00000003}.search-container input:focus{border-color:#7b61ff4d;box-shadow:0 15px 40px #7b61ff1f,0 5px 15px #00000005}.search-icon{color:#888;position:absolute;top:50%;left:24px;transform:translateY(-50%)}.search-submit-btn{background:var(--accent-purple);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%);box-shadow:0 4px 12px #7b61ff66}.search-submit-btn:hover{background:linear-gradient(135deg, var(--accent-purple), var(--accent-pink));transform:translateY(-50%)scale(1.05);box-shadow:0 6px 16px #7b61ff80}.music-list{background:#fff;border:1px solid #7b61ff0a;border-radius:28px;flex-direction:column;flex:1;gap:12px;display:flex;box-shadow:0 20px 50px #00000005;padding:32px!important}.song-item{cursor:pointer;background:#fff;border:1px solid #00000005;border-radius:18px;align-items:center;gap:20px;padding:14px 24px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 12px #00000003}.song-item:hover{background:#fbfbfe;border-color:#7b61ff14;transform:translateY(-2px);box-shadow:0 10px 25px #7b61ff0a}.song-item.active{background:#7b61ff08;border-color:#7b61ff26;box-shadow:0 12px 30px #7b61ff0f}.song-rank{width:32px;color:var(--accent-purple);opacity:.8;font-size:15px;font-weight:700}.song-thumb{object-fit:cover;border:2px solid #fff;border-radius:50%;width:52px;height:52px;box-shadow:0 4px 12px #00000014}.song-details{flex:1}.song-details h3{color:#111;letter-spacing:-.2px;margin:0;font-size:16px;font-weight:700}.song-actions{opacity:0;gap:8px;transition:all .2s;display:flex}.song-item:hover .song-actions{opacity:1}.action-btn{color:var(--text-secondary);background:#00000008;border-radius:10px;padding:8px;transition:all .2s}.action-btn:hover{color:var(--accent-purple);background:#0000000f;transform:translateY(-2px)}.like-action-btn{color:var(--text-secondary);cursor:pointer;opacity:0;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:50%!important;outline:none!important;padding:8px!important}.song-item:hover .like-action-btn{opacity:1}.like-action-btn.liked{opacity:1!important;color:#ff2d55!important}.like-action-btn:hover{background:#ff2d5514!important;transform:scale(1.2)!important}.inline-wave-visualizer{align-items:flex-end;gap:3px;height:20px;margin-right:16px;padding:0 12px;display:flex}.inline-wave-visualizer-placeholder{width:0;height:20px}.wave-bar{background:var(--accent-purple);transform-origin:bottom;border-radius:100px;width:3px;height:100%;animation:1s ease-in-out infinite alternate inline-wave-pulse}.wave-bar:first-child{height:60%}.wave-bar:nth-child(2){height:90%;animation-delay:.15s}.wave-bar:nth-child(3){height:40%;animation-delay:.3s}.wave-bar:nth-child(4){height:85%;animation-delay:.45s}.wave-bar:nth-child(5){height:50%;animation-delay:.6s}@keyframes inline-wave-pulse{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}.song-play-status{justify-content:center;align-items:center;margin-left:12px;display:flex}.mini-play-btn{color:#555;background:#f0f2f5;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.song-item:hover .mini-play-btn{color:#111;background:#e4e6eb}.mini-play-btn.active{box-shadow:0 4px 12px #7b61ff59;background:var(--accent-purple)!important;color:#fff!important}.song-item:hover .mini-play-btn.active{transform:scale(1.05);box-shadow:0 6px 16px #7b61ff73;background:linear-gradient(135deg, var(--accent-purple), var(--accent-pink))!important}.full-player-overlay{z-index:3000;color:var(--text-primary);background:#fff;flex-direction:column;padding:40px;display:flex;position:fixed;inset:0;overflow-y:auto}.full-player-bg{opacity:.15;filter:blur(80px);z-index:-1;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.full-player-content{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:60px;min-height:min-content;padding-top:40px;display:flex}.vinyl-container{background:#fff;border-radius:24px;justify-content:center;align-items:center;width:fit-content;max-width:800px;max-height:80vh;margin:0 auto;padding:0;transition:all .5s;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000026}.vinyl-container.mode-circular{box-shadow:none;background:0 0;overflow:visible}.vinyl-container.yt-short-type{width:fit-content;height:fit-content;max-width:90vw!important;max-height:92vh!important}.vinyl-img{object-fit:contain;border-radius:24px;max-width:100%;max-height:80vh;transition:all .5s cubic-bezier(.4,0,.2,1);display:block}.vinyl-img.yt-short-type{width:auto!important;max-width:90vw!important;height:92vh!important;max-height:92vh!important}.vinyl-img.circular{aspect-ratio:1;object-fit:cover;border:4px solid #0000000d;width:auto;height:100%;max-height:50vh;animation:20s linear infinite paused rotate;box-shadow:0 10px 40px #0000001a,inset 0 0 0 10px #0000000d;border-radius:50%!important}.vinyl-img.playing{animation-play-state:running}.vinyl-wrapper{width:100%;height:100%;transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:relative}.mode-circular .vinyl-wrapper{aspect-ratio:1;border-radius:50%;width:50vh;max-width:90vw;height:50vh;max-height:50vh}.mode-circular .vinyl-img.circular{object-fit:cover;z-index:2;border:5px solid #fffffff2;position:relative;box-shadow:0 15px 45px #0000004d;border-radius:50%!important;width:100%!important;height:100%!important;max-height:none!important}.circular-visualizer{z-index:1;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.visualizer-bar-container{flex-direction:column;justify-content:flex-start;align-items:center;width:2px;height:100%;display:flex;position:absolute}.visualizer-bar{width:3px;height:var(--bar-height,24px);background:var(--accent-purple);transform-origin:bottom;margin-top:calc(-1 * var(--bar-height) - 6px);border-radius:4px;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:scaleY(.25)}.visualizer-bar.playing{animation:.9s ease-in-out infinite alternate beat-grow}@keyframes beat-grow{0%{filter:brightness(.95)drop-shadow(0 0 2px #7b61ff33);transform:scaleY(.25)}to{filter:brightness(1.3) drop-shadow(0 0 8px var(--accent-purple)) drop-shadow(0 0 4px var(--accent-purple));transform:scaleY(1.35)}}.full-player-controls{flex-direction:column;align-items:center;gap:40px;width:100%;max-width:600px;display:flex}.main-controls{align-items:center;gap:48px;display:flex}.main-controls button{color:var(--text-primary);justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.control-btn-secondary{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f0f2f5;border:1px solid #0000000d;border-radius:50%;width:56px;height:56px}.control-btn-secondary:hover{background:#e4e6eb;border-color:#0000001a;transform:translateY(-2px)}.control-btn-secondary svg{fill:var(--text-primary)}.control-btn-primary{width:84px;height:84px;color:var(--text-primary);background:#fff;border:1px solid #00000014;border-radius:50%;box-shadow:0 8px 24px #00000014}.control-btn-primary:hover{background:#f8f9fa;border-color:#0000001f;transform:scale(1.08)}.control-btn-primary svg{fill:var(--text-primary)}.control-btn-tertiary{opacity:.6;background:#fff;border:none;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex}.control-btn-tertiary:hover{opacity:1;transform:scale(1.1)}.control-btn-tertiary.active{opacity:1;background:#7b61ff1a;border-radius:50%}.full-progress{cursor:pointer;background:#0000000d;border-radius:10px;width:100%;height:6px;position:relative}.full-progress-fill{background:var(--accent-purple);border-radius:10px;height:100%}.full-player-actions{z-index:10;gap:20px;display:flex;position:absolute;top:40px;right:40px}.close-full-player{color:var(--text-primary);background:#00000008;border:1px solid #0000000d;border-radius:50%;justify-content:center;align-items:center;padding:12px;transition:all .2s;display:flex}.close-full-player:hover{background:#0000000f;transform:translateY(-2px)}.music-card-info h3{color:var(--text-primary);margin-bottom:4px;font-size:18px;font-weight:700}.music-card-info p{color:var(--text-secondary);font-size:14px}.floating-player{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;width:90%;max-width:1000px;color:var(--text-primary);background:#ffffffd9;border:1px solid #00000014;border-radius:100px;justify-content:space-between;align-items:center;gap:20px;margin:0 auto 24px;padding:12px 24px;display:flex;position:sticky;bottom:24px;left:0;right:0;box-shadow:0 10px 40px #0000001a}.player-info{align-items:center;gap:12px;min-width:200px;display:flex}.player-info img{object-fit:cover;border:2px solid #0000000d;border-radius:50%;width:48px;height:48px;animation:10s linear infinite paused rotate}.player-info img.playing{animation-play-state:running}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2000;background:#fffc;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{width:100%;max-width:500px;color:var(--text-primary);background:#fff;border:1px solid #0000001a;border-radius:32px;padding:40px;position:relative;box-shadow:0 20px 60px #0000001a}.modal-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.modal-header h2{font-size:24px;font-weight:800}.modal-header button{width:40px;height:40px;color:var(--text-primary);background:#00000008;border:1px solid #0000000d;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.modal-header button:hover{background:#0000000f;transform:translateY(-2px)}.logout-modal{text-align:center;flex-direction:column;align-items:center;max-width:400px;display:flex}.modal-actions{gap:15px;width:100%;display:flex}.confirm-btn{border-radius:14px;flex:1;padding:14px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.confirm-btn.danger{color:#fff;background:linear-gradient(135deg,#ff4b2b,#ff416c);box-shadow:0 10px 20px #ff4b2b33}.confirm-btn.danger:hover{transform:translateY(-2px);box-shadow:0 15px 30px #ff4b2b4d}.confirm-btn.secondary{color:var(--text-primary);background:#f0f2f5;border:1px solid #0000000d}.confirm-btn.secondary:hover{background:#e4e6eb;border-color:#0000001a}.upload-form{flex-direction:column;gap:24px;display:flex}.form-group{flex-direction:column;gap:10px;display:flex}.form-group label{letter-spacing:1px;color:var(--text-secondary);font-size:12px;font-weight:800}.form-group input{color:var(--text-primary);background:#f8f9fa;border:1px solid #0000001a;border-radius:12px;outline:none;padding:14px 20px;font-size:16px;transition:all .2s}.form-group input:focus{border-color:var(--accent-purple);background:#fff;box-shadow:0 0 0 4px #7b61ff1a}.cover-preview{border:2px dashed #0000001a;border-radius:16px;width:100%;height:200px;margin-top:10px;overflow:hidden}.cover-preview img{object-fit:cover;width:100%;height:100%}.footer{text-align:center;border-top:1px solid #00000008;margin-top:40px;padding:80px 20px}.footer-logo{color:#94a3b8;letter-spacing:-1px;margin-bottom:16px;font-size:32px;font-weight:800}.footer p{color:#94a3b8;font-size:14px;font-weight:500}.content-layout{flex-direction:row-reverse;align-items:flex-start;gap:48px;max-width:1400px;margin:0 auto;padding:0 40px 120px;display:flex}.music-list{flex:1;margin:0!important}.side-illustration{transform-style:preserve-3d;perspective:1200px;z-index:10;flex-direction:column;flex:0 0 420px;gap:20px;display:flex;position:sticky;top:100px}.boy-illustration-container{width:100%;transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:relative}.boy-card-gradient{aspect-ratio:1;width:100%;transform-style:preserve-3d;z-index:2;background:0 0;border-radius:36px;flex-direction:column;justify-content:flex-end;display:flex;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 30px 60px #00000014}.boy-image{object-fit:cover;z-index:1;pointer-events:none;width:100%;height:100%;transition:transform .5s;animation:2.5s ease-in-out infinite heartbeat;position:absolute;top:0;left:0}.boy-card-overlay{z-index:3;background:linear-gradient(#0000 0%,#0006 100%);flex-direction:column;align-items:flex-start;width:100%;padding:40px;display:flex;position:relative}.boy-card-tag{color:#fff;letter-spacing:-.5px;text-shadow:0 2px 10px #0003;margin-bottom:8px;font-size:24px;font-weight:800}.boy-card-subtag{color:#ffffffd9;text-shadow:0 1px 5px #0003;margin-bottom:24px;font-size:14px;font-weight:500}.boy-card-play-btn{color:var(--accent-purple);cursor:pointer;background:#fff;border:none;border-radius:100px;align-items:center;padding:12px 28px;font-size:14px;font-weight:700;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 10px 25px #00000026}.boy-card-play-btn:hover{color:var(--accent-pink);background:#fff;transform:scale(1.05)translateY(-2px);box-shadow:0 15px 30px #00000040}.revolving-orbit{width:0;height:0;transform-style:preserve-3d;z-index:3;animation:20s linear infinite orbit-spin;position:absolute;top:25%;left:50%}.orbit-arm{width:0;height:0;transform-style:preserve-3d;position:absolute}.arm-1{transform:rotateY(0)translateZ(190px)}.arm-2{transform:rotateY(72deg)translateZ(190px)}.arm-3{transform:rotateY(144deg)translateZ(190px)}.arm-4{transform:rotateY(216deg)translateZ(190px)}.arm-5{transform:rotateY(288deg)translateZ(190px)}.revolving-icon{-webkit-backdrop-filter:none;backdrop-filter:none;width:56px;height:56px;box-shadow:none;color:#fff;cursor:pointer;transform-style:preserve-3d;filter:drop-shadow(0 4px 8px #0000004d);background:0 0;border:none;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:-28px;left:-28px}.revolving-icon:hover{color:#fff;filter:drop-shadow(0 0 15px #fffc)drop-shadow(0 0 5px #ffffff80);transform:scale(1.35)translateZ(30px)!important}.revolving-icon svg{transition:transform .3s}.revolving-icon:hover svg{transform:scale(1.1)rotate(15deg)}.arm-1 .revolving-icon{animation:20s linear infinite counter-spin-1}.arm-2 .revolving-icon{animation:20s linear infinite counter-spin-2}.arm-3 .revolving-icon{animation:20s linear infinite counter-spin-3}.arm-4 .revolving-icon{animation:20s linear infinite counter-spin-4}.arm-5 .revolving-icon{animation:20s linear infinite counter-spin-5}@keyframes orbit-spin{0%{transform:rotateY(0)rotateX(12deg)}to{transform:rotateY(360deg)rotateX(12deg)}}@keyframes counter-spin-1{0%{transform:rotateY(0)rotateX(-12deg)}to{transform:rotateY(-360deg)rotateX(-12deg)}}@keyframes counter-spin-2{0%{transform:rotateY(-72deg)rotateX(-12deg)}to{transform:rotateY(-432deg)rotateX(-12deg)}}@keyframes counter-spin-3{0%{transform:rotateY(-144deg)rotateX(-12deg)}to{transform:rotateY(-504deg)rotateX(-12deg)}}@keyframes counter-spin-4{0%{transform:rotateY(-216deg)rotateX(-12deg)}to{transform:rotateY(-576deg)rotateX(-12deg)}}@keyframes counter-spin-5{0%{transform:rotateY(-288deg)rotateX(-12deg)}to{transform:rotateY(-648deg)rotateX(-12deg)}}@keyframes heartbeat{0%{transform:scale(1)}15%{transform:scale(1.03)}30%{transform:scale(1)}45%{transform:scale(1.03)}to{transform:scale(1)}}@media (width<=1100px){.content-layout{flex-direction:column-reverse;align-items:center}.side-illustration{flex:none;width:100%;max-width:600px;position:static}}.context-menu-item{transition:all .2s cubic-bezier(.4,0,.2,1)!important}.context-menu-item:hover{color:#a099ff!important;background:#7b61ff26!important;padding-left:16px!important}.context-menu-item:active{transform:scale(.97)!important}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bg-float-slow{0%,to{transform:translateY(0)rotate(-15deg)}50%{transform:translateY(-12px)rotate(-10deg)}}@keyframes bg-float-slow-alt{0%,to{transform:translateY(0)rotate(15deg)}50%{transform:translateY(-15px)rotate(18deg)}}@keyframes wave-sway{0%,to{transform:scale(1)translate(0)}50%{transform:scale(1.02)translate(-15px)}}.music-waves-bg svg{animation:25s ease-in-out infinite wave-sway}.music-waves-bg .note-left{animation:8s ease-in-out infinite bg-float-slow}.music-waves-bg .note-right{animation:9s ease-in-out infinite bg-float-slow-alt}img,.vinyl-img,.song-thumb,.full-player-bg,.cover-preview img{-webkit-user-drag:none!important;-khtml-user-drag:none!important;-moz-user-drag:none!important;-o-user-drag:none!important;user-drag:none!important;-webkit-user-select:none!important;user-select:none!important}