:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body,#root{margin:0;padding:0;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(135deg,#232526,#414345);padding-top:1.5rem}.showcase{width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.track-poster{width:160px;height:160px;object-fit:cover;border-radius:16px;box-shadow:0 4px 24px #00000040;background:#222;margin-bottom:1rem;border:2px solid rgba(255,255,255,.18)}.track-info{text-align:center;margin-bottom:.5rem}.track-title{font-size:1.3rem;font-weight:600;color:#fff;margin-bottom:.2rem;letter-spacing:.5px;text-shadow:0 2px 8px rgba(0,0,0,.15)}.track-artist{font-size:1rem;color:#e0e0e0;opacity:.85;margin-bottom:.2rem}.track-list{width:100%;margin-bottom:1.2rem;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;background:#ffffff12;border-radius:12px;padding:.3em .2em;scrollbar-width:thin;scrollbar-color:rgba(180,180,200,.35) rgba(255,255,255,.08)}.track-list::-webkit-scrollbar{width:8px;background:#ffffff14;border-radius:8px}.track-list::-webkit-scrollbar-thumb{background:#b4b4c859;border-radius:8px;transition:background .2s}.track-list::-webkit-scrollbar-thumb:hover{background:#b4b4c88c}.track-item{width:95%;padding:.5em 1em;margin:.2em 0;border-radius:10px;background:#ffffff21;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;cursor:pointer;transition:background .2s,color .2s;text-align:left;display:flex;align-items:center;font-size:1em;border:1px solid rgba(255,255,255,.18)}.track-item.active,.track-item:hover{background:#ffffff47;color:#232526}.track-list-title{font-weight:500;flex:1;padding-left:.5em;padding-top:.15em;padding-bottom:.15em;display:block;word-break:break-word}.track-item.active .track-list-title,.track-item:hover .track-list-title{background:#ffffff47}.track-list-artist{font-size:.95em;color:#b0b0b0;margin-left:.5em}.music-player-layout{display:flex;flex-direction:row;align-items:stretch;justify-content:center;width:100%;max-width:900px;margin:0 auto;gap:2.5rem}.music-player-glass,.music-list-panel{flex:1 1 0;min-height:540px;display:flex;flex-direction:column;justify-content:flex-start}.music-player-glass{background:#ffffff26;box-shadow:0 8px 32px #1f26875e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgba(255,255,255,.18);padding:2.5rem 3rem;max-width:400px;min-width:280px;align-items:center;margin:2rem 0}.music-list-panel{background:#ffffff1a;box-shadow:0 4px 24px #1f26871a;border-radius:30px 10px;border:1px solid rgba(255,255,255,.13);padding:2rem 1.2rem;max-width:320px;min-width:220px;align-items:flex-start;margin:2rem 0;gap:.5rem;transition:border-radius .3s}.music-list-panel h2{color:#fff;font-size:1.2rem;margin-bottom:1rem;font-weight:600;letter-spacing:.5px}.music-list-panel .track-list{background:none;border-radius:0;padding:0;margin-bottom:0;max-height:400px;width:100%}.music-list-panel .track-item{width:100%;font-size:1em;padding:.5em;margin:.15em 0}.music-player-glass h1{font-size:2rem;margin-bottom:.5rem;color:#fff;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.2)}.upload-section{display:flex;flex-direction:column;gap:1.1em;margin-bottom:1em}.upload-label{display:block;font-weight:500;color:#fff;margin-bottom:.3em;letter-spacing:.01em}.upload-btn{background:linear-gradient(90deg,#6a82fb,#fc5c7d);color:#fff;border:none;border-radius:6px;padding:.6em 1.3em;font-size:1.08em;font-weight:500;cursor:pointer;margin-bottom:.2em;transition:background .55s,box-shadow .5s,transform .5s;box-shadow:0 1px 4px #6a82fb14}.upload-btn:hover{background:linear-gradient(90deg,#fc5c7d,#6a82fb)}.upload-divider{text-align:center;color:#bbb;font-size:.98em;margin:.5em 0 .2em;letter-spacing:.08em;opacity:.7;position:relative}.upload-divider:before,.upload-divider:after{content:"";display:inline-block;width:30%;height:1px;background:#ffffff21;vertical-align:middle;margin:0 .7em}.upload-section input[type=file]{color:#fff;background:#ffffff1a;border-radius:8px;padding:.5em;border:none;outline:none;width:100%}.player-controls{display:flex;flex-direction:column;align-items:center;gap:1em;width:100%;margin-bottom:1.2rem;position:relative}.controls-row{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:.2em;gap:1.1em}.icon-btn{background:#fff3;border:none;color:#fff;width:56px;height:56px;padding:0;border-radius:50%;font-size:2.1em;cursor:pointer;margin-bottom:.2em;transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 2px 8px #00000014;display:flex;align-items:center;justify-content:center}.icon-btn:disabled{background:#ffffff14;color:#aaa;cursor:not-allowed}.seek-row{display:flex;align-items:center;width:100%;gap:.7em;margin-top:.2em}.seek-bar{flex:1;width:100%;accent-color:#fff;background:transparent}.timer{font-size:1em;color:#fff;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;opacity:.85}.volume-row{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin-top:.7em}.volume-icon{font-size:1.2em;color:#fff;opacity:.8}.volume-row input[type=range]{width:120px}.icon-btn.small{width:38px;height:38px;font-size:1.2em;padding:0;margin:0 .1em}.gdrive-link-container{display:flex;flex-direction:column;align-items:stretch;background:#ffffff14;border-radius:8px;padding:.5em .8em;box-shadow:0 1px 4px #00000012;gap:0;max-width:100%;box-sizing:border-box;overflow:hidden}.gdrive-icon{display:flex;align-items:center;margin-right:.2em}.gdrive-link-input{flex:1 1 0;min-width:0;border:none;background:transparent;color:#fff;font-size:1em;padding:.2em .7em;border-radius:4px;outline:none;transition:background .2s;max-width:100%;overflow:hidden}.gdrive-link-input:focus{background:#ffffff21}.gdrive-link-btn{flex-shrink:0;white-space:nowrap;background:linear-gradient(90deg,#4285f4,#34a853);color:#fff;border:none;border-radius:4px;padding:.45em 1.1em;font-size:1em;cursor:pointer;transition:background .2s,box-shadow .2s;box-shadow:0 1px 3px #4285f414;max-width:140px;width:100%;min-width:90px;margin-top:.5em}.gdrive-link-btn:disabled{opacity:.5;cursor:not-allowed}.gdrive-link-btn:not(:disabled):hover{background:linear-gradient(90deg,#34a853,#4285f4)}@media (max-width: 900px){.music-player-layout{flex-direction:column;align-items:center;gap:1.5rem}.music-list-panel,.music-player-glass{margin:2rem 0;max-width:98vw;min-width:0;width:100%;min-height:unset}.music-player-glass{margin:100px}.music-list-panel .track-list{max-height:180px}}@media (max-width: 600px){.music-player-glass{max-width:98vw;padding:1.2rem .5rem;margin:2rem}.music-player-glass h1{font-size:1.2rem}.player-controls button{font-size:1em;padding:.5em 1em}.track-item{font-size:.95em;padding:.4em .5em}.track-poster{width:110px;height:110px}.controls-row{gap:.5em}.volume-control{width:80px}.icon-btn{width:38px;height:38px;font-size:1.3em;padding:0}.timer{font-size:.95em;min-width:36px}.volume-row input[type=range]{width:80px}.icon-btn.small{width:28px;height:28px;font-size:.95em;margin:0 .05em}.gdrive-link-container{flex-direction:column;align-items:stretch;gap:.5em}.gdrive-link-btn{width:100%;max-width:100%;min-width:0}}.social-navbar{position:fixed;top:0;left:0;right:0;background:#ffffff1a;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.2);z-index:1000;padding:.5rem 2rem;display:flex;align-items:center;justify-content:space-between;transition:all .3s ease}.social-navbar.scrolled{background:#ffffff26;box-shadow:0 2px 20px #0000001a}.social-navbar-brand{display:flex;align-items:center;gap:.8rem;color:#fff;text-decoration:none;font-weight:600;font-size:1.2rem;letter-spacing:.5px}.social-navbar-brand:hover{color:#e0e0e0;text-decoration:none}.social-navbar-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;font-weight:700}.social-navbar-menu{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}.social-navbar-menu li{margin:0}.social-link{color:#fff;text-decoration:none;font-weight:500;font-size:.01rem;padding:.2rem 2rem;border-radius:8px;transition:all .3s ease;position:relative;overflow:hidden;margin:0 .5rem;display:inline-block}.social-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.social-navbar-link:hover:before{left:100%}.social-navbar-link:hover{background:#ffffff26;color:#fff;text-decoration:none;transform:translateY(-1px)}.social-navbar-link.active{background:#fff3;color:#fff;font-weight:600}.social-navbar-actions{display:flex;align-items:center;gap:1rem}.social-navbar-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:flex;align-items:center;gap:.5rem}.social-navbar-btn:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateY(-2px);box-shadow:0 4px 15px #667eea66;color:#fff;text-decoration:none}.social-navbar-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.social-navbar-btn.secondary:hover{background:#ffffff1a;border-color:#ffffff80;transform:translateY(-1px)}.social-navbar-toggle{display:none;background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:6px;transition:background .3s ease}.social-navbar-toggle:hover{background:#ffffff1a}@media (max-width: 768px){.social-navbar{padding:.8rem 1rem}.social-navbar-menu{position:fixed;top:100%;left:0;right:0;background:#fffffff2;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);flex-direction:column;gap:0;padding:1rem 0;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;border-top:1px solid rgba(255,255,255,.2)}.social-navbar-menu.active{transform:translateY(0);opacity:1;visibility:visible}.social-navbar-menu li{width:100%}.social-navbar-link{display:block;padding:1rem 2rem;border-radius:0;color:#333;font-weight:500}.social-navbar-link:hover{background:#667eea1a;color:#667eea}.social-navbar-toggle{display:block}.social-navbar-actions{gap:.5rem}.social-navbar-btn{padding:.5rem 1rem;font-size:.85rem}.social-navbar-brand{font-size:1.1rem}}@media (max-width: 480px){.social-navbar{padding:.6rem .8rem}.social-navbar-brand{font-size:1rem;gap:.5rem}.social-navbar-logo{width:28px;height:28px;font-size:1rem}.social-navbar-actions{gap:.3rem}.social-navbar-btn{padding:.4rem .8rem;font-size:.8rem}}