:root{--bg:#08050d;--panel:#100a19;--panel2:#171022;--purple:#9d4edd;--bright:#c77dff;--text:#f8f3ff;--muted:#9d94a8;--line:#2a2035;--shadow:0 20px 60px #0008}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% 5%,#32134d 0,#10091a 30%,var(--bg) 65%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button,input{font:inherit}.hidden{display:none!important}.loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#07040b;align-content:center}.loader-mark{width:92px;height:92px;padding:20px;border-radius:28px;background:linear-gradient(145deg,#c77dff,#6c2aa0);box-shadow:0 0 70px #9d4edd66}.loader-mark img{width:100%;height:100%}.loader-name{font-size:31px;font-weight:800;margin-top:22px}.loader-sub{color:#9d94a8;margin-top:5px}.loader-bar{width:180px;height:3px;background:#21172b;border-radius:10px;margin-top:28px;overflow:hidden}.loader-bar span{display:block;height:100%;width:0;background:#c77dff;animation:load 1.25s ease forwards}@keyframes load{to{width:100%}}
.app{min-height:100vh;padding-bottom:96px}.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;padding:30px 20px;background:#09060fdd;border-right:1px solid #ffffff09;backdrop-filter:blur(22px);z-index:10}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:850;margin:0 10px 42px}.brand img{width:32px;height:32px}.nav{width:100%;border:0;background:none;color:#91879d;text-align:left;padding:13px 14px;border-radius:12px;cursor:pointer;font-weight:650;margin:3px 0}.nav:hover,.nav.active{background:#ffffff09;color:#fff}.nav span{margin-left:10px}.nav b{float:right;width:7px;height:7px;border-radius:50%;background:#c77dff;margin-top:8px;display:none}.side-bottom{position:absolute;left:20px;right:20px;bottom:28px}.creator{font-size:12px;color:#665d70;margin:0 10px 15px}.ghost{width:100%;border:1px solid var(--line);background:#ffffff04;color:#aaa1b2;padding:10px;border-radius:11px;cursor:pointer}
.main{margin-left:245px;padding:0 44px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between}.arrows button{border:0;background:#ffffff08;color:#aaa0b0;width:38px;height:38px;border-radius:50%;margin-right:7px;font-size:27px;cursor:pointer}.profile{border:1px solid #ffffff0e;background:#ffffff08;color:#fff;border-radius:999px;padding:6px 13px 6px 7px;display:flex;align-items:center;gap:8px;cursor:pointer}.profile span:first-child{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,#c77dff,#6d25a3);font-weight:800}.view{display:none;padding-bottom:120px}.active-view{display:block}.hero{min-height:390px;border:1px solid #ffffff0c;border-radius:28px;padding:52px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;background:linear-gradient(110deg,#1a0e27,#110919);box-shadow:var(--shadow);position:relative}.hero:after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-130px;top:-190px;background:#9d4edd22;filter:blur(5px)}.eyebrow{font-size:11px;letter-spacing:2px;color:#b78ad3;font-weight:800}.hero h1{font-size:58px;line-height:.98;letter-spacing:-3px;margin:15px 0}.hero h1 em{font-style:normal;color:#c77dff}.hero p{color:#a59aaa;max-width:480px;margin-bottom:25px}.hero-orb{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#e2b6ff,#7a32ae 45%,#24102f);box-shadow:0 0 100px #9d4edd44;z-index:1}.hero-orb img{width:90px}.primary{border:0;color:#fff;background:linear-gradient(135deg,#c77dff,#7b2cbf);padding:12px 19px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 12px 35px #7b2cbf44}.primary.small{padding:9px 14px}.primary.full{width:100%;margin-top:12px}h2{margin:38px 0 17px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:25px 0}.section-head h1{font-size:40px;letter-spacing:-1.5px;margin:8px 0}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:15px}.track-card{background:#ffffff05;border:1px solid #ffffff08;border-radius:16px;padding:12px;cursor:pointer;transition:.2s}.track-card:hover{transform:translateY(-3px);background:#ffffff0a}.art{aspect-ratio:1;border-radius:11px;background:linear-gradient(135deg,#291139,#7b2cbf);display:grid;place-items:center;font-size:35px;margin-bottom:12px}.track-card strong,.track-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card span,.track-row span{color:#8e8598;font-size:13px;margin-top:4px}.track-list{display:flex;flex-direction:column;gap:5px}.track-row{display:grid;grid-template-columns:42px 1fr auto auto;gap:14px;align-items:center;padding:10px 12px;border-radius:12px}.track-row:hover{background:#ffffff07}.row-art{width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,#311442,#9d4edd);display:grid;place-items:center}.row-actions{display:flex;gap:7px}.iconbtn{border:0;background:#ffffff08;color:#b9b0c2;border-radius:9px;padding:8px 10px;cursor:pointer}.iconbtn:hover{color:#fff;background:#ffffff12}.download{color:#c77dff}.searchbox{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:#ffffff05;border-radius:14px;padding:0 16px;margin-bottom:20px}.searchbox input,.modal-input{background:none;border:0;outline:0;color:#fff;width:100%;padding:15px}.library-card{display:flex;align-items:center;gap:18px;padding:22px;border:1px solid #ffffff09;background:linear-gradient(100deg,#170d20,#0e0914);border-radius:17px;margin-bottom:22px}.library-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:#9d4edd22;color:#c77dff;font-size:25px}.library-card p{color:#91879b;margin:5px 0}.library-card code{color:#cfa2e8}.messages-shell{height:550px;border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:250px 1fr;overflow:hidden;background:#0c0811}.users{border-right:1px solid var(--line);padding:10px}.user{padding:12px;border-radius:12px;display:flex;gap:10px;align-items:center;cursor:pointer}.user:hover,.user.selected{background:#ffffff09}.user-avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#9d4edd,#43145f);font-weight:800}.chat{display:grid;grid-template-rows:58px 1fr 64px}.chat-head{border-bottom:1px solid var(--line);padding:18px;font-weight:750}.chat-body{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:8px}.empty{margin:auto;color:#6e6577}.bubble{max-width:70%;padding:10px 13px;border-radius:14px;background:#1b1421;color:#ddd5e2}.bubble.me{margin-left:auto;background:#7b2cbf;color:#fff}.chat-form{border-top:1px solid var(--line);padding:10px;display:flex;gap:8px}.chat-form input{flex:1;border:1px solid var(--line);background:#ffffff05;color:#fff;border-radius:11px;padding:10px;outline:0}.chat-form button{border:0;background:#7b2cbf;color:#fff;border-radius:11px;padding:0 18px;font-weight:750}.player{position:fixed;left:245px;right:0;bottom:0;height:92px;background:#0b0710ee;border-top:1px solid #ffffff0d;backdrop-filter:blur(25px);z-index:20;display:grid;grid-template-columns:1fr 1.7fr 1fr;align-items:center;padding:0 25px}.now{display:flex;gap:11px;align-items:center;min-width:0}.now>div:last-child{min-width:0}.now strong,.now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cover{width:50px;height:50px;border-radius:10px;background:linear-gradient(135deg,#9d4edd,#32103f);display:grid;place-items:center}.now span{color:#877d8e;font-size:12px;margin-top:4px}.controls{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;padding-bottom:13px}.controls button{border:0;background:none;color:#8f8798;cursor:pointer}.controls .play{width:38px;height:38px;border-radius:50%;background:#fff;color:#111}.timeline{position:absolute;bottom:-3px;left:5%;right:5%;display:flex;gap:8px;align-items:center;font-size:9px;color:#716879}.timeline input{width:100%}.volume{display:flex;justify-content:flex-end;gap:8px;align-items:center}.volume input{max-width:120px}.modal{position:fixed;inset:0;z-index:40;background:#000a;display:grid;place-items:center;backdrop-filter:blur(10px)}.modal-card{width:min(390px,90vw);background:#120b19;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow);position:relative}.modal-card h2{margin:7px 0}.modal-card p{color:#8d8495}.close{position:absolute;right:15px;top:13px;border:0;background:none;color:#aaa;font-size:25px;cursor:pointer}.modal-input{border:1px solid var(--line);border-radius:11px;margin-top:8px}
@media(max-width:850px){.sidebar{width:72px;padding:22px 10px}.brand span,.nav span,.creator,.ghost{display:none}.brand{margin:0 10px 35px}.nav{text-align:center}.main{margin-left:72px;padding:0 18px}.player{left:72px;grid-template-columns:1fr 2fr}.volume{display:none}.hero{padding:32px;min-height:360px}.hero h1{font-size:43px}.hero-orb{width:150px;height:150px}.track-row{grid-template-columns:42px 1fr auto}.track-row .duration{display:none}}
@media(max-width:600px){.hero-orb{display:none}.hero{min-height:320px}.messages-shell{grid-template-columns:1fr}.users{display:none}.player{height:82px}.now{display:none}.controls{grid-column:1/3}.topbar{height:70px}}