.fp-overlay{position:fixed;inset:0;z-index:5000;background:radial-gradient(1200px 600px at 20% 20%,rgba(140,120,255,.25),transparent 60%),radial-gradient(900px 600px at 70% 30%,rgba(255,120,200,.2),transparent 60%),linear-gradient(180deg,#070a12,#0c1022);display:flex;justify-content:center;align-items:center}.fp-overlay.mini{background:transparent;pointer-events:none}.fp-container{width:100%;max-width:420px;height:100%;padding:20px 18px 140px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}.fp-overlay.mini .fp-container{position:fixed;bottom:env(safe-area-inset-bottom);left:0;right:0;max-width:none;height:auto;flex-direction:row;gap:12px;padding:10px 14px;background:#0a0c19f7;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.15)}.fp-close-center{background:none;border:none;color:#fff;font-size:26px;margin-bottom:16px;cursor:pointer}.fp-overlay.mini .fp-close-center{display:none}.fp-cover{width:260px;height:260px;border-radius:26px;background:linear-gradient(135deg,#8c78ffe6,#ff78c8e6);margin-bottom:26px}.fp-overlay.mini .fp-cover{display:none}.fp-title{font-size:22px;font-weight:600;margin-bottom:20px;text-align:center}.fp-overlay.mini .fp-title{margin:0;font-size:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fp-progress{width:100%;margin-bottom:26px}.fp-overlay.mini .fp-progress{display:none}.fp-controls{display:flex;gap:40px;align-items:center}.fp-controls button{background:none;border:none;color:#fff;font-size:26px;cursor:pointer}.fp-overlay.mini .fp-controls{gap:12px}.fp-overlay.mini .fp-controls button{font-size:22px}@media(max-width:768px){.fp-cover{width:220px;height:220px}.fp-title{font-size:20px}}.fp-overlay,.fp-container{-webkit-backdrop-filter:blur(18px)}*{-webkit-tap-highlight-color:transparent}.modal-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:2000}.modal{width:320px;background:#141628e6;border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.15)}.modal h2{margin-top:0}.modal input{width:100%;margin-bottom:12px;padding:10px;border-radius:10px;border:none}.modal button{width:100%;padding:10px;margin-top:8px;border-radius:10px;border:none;cursor:pointer}.modal button.secondary{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.error{color:#ff6b6b;margin-bottom:10px}.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs button{flex:1;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px;border-radius:10px;cursor:pointer}.tabs button.active{background:#8c78ff40;border-color:#8c78ffcc}*{box-sizing:border-box;font-family:Segoe UI,system-ui,sans-serif}html,body{margin:0;overflow-x:hidden}body{color:#ffffffeb;background:radial-gradient(1200px 600px at 20% 20%,rgba(140,120,255,.18),transparent 60%),radial-gradient(900px 600px at 70% 30%,rgba(255,120,200,.14),transparent 60%),linear-gradient(180deg,#070a12,#0c1022)}.player{min-height:100vh;padding:28px;max-width:100vw}.title{font-size:40px;display:flex;align-items:center;gap:12px;margin-bottom:26px;font-weight:600}h1,h2,h3{margin:10px 0;font-weight:500}.playlist-panel{margin-bottom:32px}.playlist-create{display:flex;gap:12px;margin-bottom:18px}.playlist-create input{flex:1;padding:12px 14px;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:#fff;outline:none;font-size:15px}.playlist-create input:focus{border-color:#8c78ffb3}.playlist-create button{background:transparent;border:1px solid rgba(140,120,255,.7);padding:12px 20px;border-radius:12px;color:#a08cff;cursor:pointer}.playlist-list{display:flex;gap:10px;flex-wrap:wrap}.playlist-chip{background:#ffffff0d;padding:8px 14px;border-radius:999px;cursor:pointer;font-size:14px;border:1px solid rgba(255,255,255,.12)}.playlist-chip.active{background:#8c78ff2e;border-color:#8c78ffb3}.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:40px}.card{background:#ffffff0d;border-radius:18px;padding:14px;border:1px solid rgba(255,255,255,.1);width:100%}.cover{width:100%;aspect-ratio:1 / 1;border-radius:14px;background:linear-gradient(135deg,#8c78ff,#ff78c8);margin-bottom:12px}.track-title{font-size:15px;margin-bottom:10px}.actions{display:flex;gap:10px}.actions button{flex:1;background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;padding:10px;border-radius:10px;font-size:13px}.audio{width:100%}@media(max-width:768px){.player{padding:14px 14px 120px}.title{font-size:26px}.tracks{grid-template-columns:repeat(2,1fr);gap:12px}.card{padding:12px}.track-title{font-size:14px}.actions button{padding:11px;font-size:13px}.playlist-create{flex-direction:column}.playlist-create button{width:100%}.audio{position:fixed;bottom:0;left:0;right:0;background:#0a0c14e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);padding:10px 12px;z-index:999}}@media(hover:none){.card:hover{transform:none;box-shadow:none}.actions button:hover{background:transparent}}.card-playlist{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;padding:14px 18px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;transition:transform .25s ease,box-shadow .25s ease,border .25s ease}.card-playlist:hover{transform:translateY(-2px);border-color:#8c78ff99;box-shadow:0 10px 30px #00000073}.track-title{font-size:16px;font-weight:500;color:#ffffffe6}.card-playlist button{background:transparent;color:#ffffffd9;border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:10px;cursor:pointer;font-size:13px;transition:background .25s ease,color .25s ease,border .25s ease,transform .2s ease}.card-playlist button:hover{background:#8c78ff26;color:#fff;border-color:#8c78ff99;transform:translateY(-1px)}.card-playlist button:last-child{border-color:#ff5a5a80;color:#ff5a5ae6}.card-playlist button:last-child:hover{background:#ff5a5a26;border-color:#ff5a5ae6}.card-playlist button:first-child{border-color:#8c78ff99;color:#a08cff}.card-playlist button:first-child:hover{background:#8c78ff38}.audio{position:fixed;bottom:0;left:0;width:100%;background:#0a0c14bf;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.12);padding:12px 16px;z-index:999}.playlist-chip{background:#ffffff0a;border:1px solid rgba(255,255,255,.12);color:#ffffffd9;padding:10px 14px;margin-bottom:8px;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .25s ease,border .25s ease,transform .2s ease}.playlist-chip:hover{background:#ffffff14;transform:translateY(-1px)}.playlist-chip.active{background:#8c78ff2e;border-color:#8c78ff99;color:#fff}@media(max-width:768px){.player{padding:16px 16px 90px}.playlist-chip{padding:12px 16px;font-size:14px;border-radius:14px}.playlist-create{flex-direction:column}.playlist-create input,.playlist-create button{width:100%}.card-playlist{padding:14px;border-radius:14px}.card-playlist button{padding:12px 14px;font-size:13px}.track-title{font-size:14px}}@media(hover:none){.card-playlist:hover,.playlist-chip:hover{transform:none;box-shadow:none}}*{box-sizing:border-box}body{margin:0;color:#ffffffeb;font-family:Segoe UI,system-ui,sans-serif;background:radial-gradient(1200px 600px at 20% 20%,rgba(140,120,255,.18),transparent 60%),radial-gradient(900px 600px at 70% 30%,rgba(255,120,200,.14),transparent 60%),linear-gradient(180deg,#070a12,#0c1022);overflow-x:hidden}.topbar{position:sticky;top:0;z-index:2000;display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:12px;background:#0a0c19d9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}.topbar-left{flex-shrink:0;font-size:18px;font-weight:600;white-space:nowrap}.topbar-buttons{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.topbar-buttons::-webkit-scrollbar{display:none}.topbar button{flex-shrink:0;background:#ffffff0a;border:1px solid rgba(255,255,255,.18);padding:9px 12px;border-radius:12px;color:#ffffffe6;font-size:13px;cursor:pointer;transition:background .25s,border .25s,transform .2s}.topbar button:hover{background:#8c78ff26;border-color:#8c78ff99;transform:translateY(-1px)}.topbar button.active{background:#8c78ff40;border-color:#8c78ffcc;color:#fff}.topbar button.logout{border-color:#ff5a5a99;color:#ff5a5ae6}.topbar button.logout:hover{background:#ff5a5a26;border-color:#ff5a5ae6}@media screen and (max-width:360px){.topbar-left{display:none!important}.topbar button{font-size:12px!important;padding:8px 10px!important}}@supports (-webkit-touch-callout: none){.topbar-left{display:none}}