:root{color-scheme:dark;--bg:#080816;--panel:#131329;--panel2:#1a1934;--line:#2e2946;--txt:#f6f4ff;--muted:#a4a1ba;--purple:#9363ff;--purple2:#6838d9;--coral:#ff6b9a;--cyan:#36d8e7;--radius:22px}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--txt);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}body:has(.stage:not([hidden])){overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}svg.ico{display:inline-block;width:21px;height:21px;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.25}.ambient-one{width:550px;height:550px;background:#7626da;top:-300px;right:10%}.ambient-two{width:330px;height:330px;background:#b33468;bottom:-130px;left:18%}.app-layout{display:flex;min-height:100vh;max-width:1700px;margin:auto}.sidebar{width:258px;flex:0 0 258px;padding:34px 18px 22px;border-right:1px solid #252239;background:#0d0c1e;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:0 11px 42px}.brand-mark{height:43px;width:43px;background:linear-gradient(135deg,#b078ff,#fc5ba7);border-radius:14px;box-shadow:0 8px 29px #974dca44;display:grid;place-items:center}.brand-mark .ico{width:25px;height:25px}.brand-title{font-size:25px;font-weight:900;letter-spacing:2px;line-height:1}.brand-title span,.mobile-logo span{color:#ff65a2}.brand-sub{font-size:8.5px;letter-spacing:2.2px;font-weight:800;color:#a8a2c7;margin-top:5px}.side-label{font-size:10px;font-weight:800;color:#7e799e;letter-spacing:2.1px;padding:0 15px;margin:0 0 12px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav-button{border:0;background:transparent;color:#a7a4c1;display:flex;align-items:center;gap:12px;padding:13px 13px;border-radius:13px;text-align:left;width:100%;font-weight:650;font-size:14px}.nav-button .ico{width:20px;height:20px}.nav-button:hover,.sidebar-playlist:hover{background:#262241;color:#fff}.nav-button.active{background:linear-gradient(110deg,#39285d,#37244d);color:#e3c8ff;box-shadow:inset 3px 0 #b37cff}.nav-count{margin-left:auto;font-size:12px;color:#af9ecc}.side-head{display:flex;justify-content:space-between;align-items:center;margin:34px 4px 10px}.side-head .side-label{margin:0}.icon-button{display:grid;place-items:center;background:#24223d;border:1px solid #3d3559;color:#d5d0ec;border-radius:9px;padding:7px}.icon-button.tiny{width:28px;height:28px}.icon-button.tiny .ico{width:15px;height:15px}.sidebar-playlists{display:grid;gap:4px;max-height:260px;overflow:auto}.sidebar-playlist{display:flex;width:100%;align-items:center;gap:10px;text-align:left;background:transparent;color:#a6a0ba;border:0;border-radius:10px;padding:9px 13px;font-size:13px;white-space:nowrap;overflow:hidden}.sidebar-playlist span{overflow:hidden;text-overflow:ellipsis}.sidebar-playlist .ico{width:17px;height:17px}.sidebar-playlist.active{background:#26213e;color:#f4e6ff}.side-spacer{flex:1}.offline-note{display:flex;gap:10px;align-items:start;padding:15px 12px;background:#1a1730;border:1px solid #31294d;border-radius:14px}.offline-note b{display:block;font-size:11px}.offline-note small{display:block;color:#9793ad;font-size:10px;margin-top:3px;line-height:1.4}.status-pulse,.live-dot,.eyebrow-dot{display:inline-block;background:#47e6b4;border-radius:50%;width:7px;height:7px;flex:none;box-shadow:0 0 12px #47e6b488;margin-top:6px}.main-area{min-width:0;flex:1;padding:26px clamp(20px,3.3vw,56px) 32px}.topbar{height:51px;display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:12px}.top-context{font-size:10px;letter-spacing:2px;color:#aaa4c1;font-weight:900;display:flex;align-items:center;gap:10px}.eyebrow-dot{background:var(--coral);box-shadow:0 0 14px #ff659966;margin:0;width:6px;height:6px}.top-actions{display:flex;align-items:center;gap:16px}.storage-note{font-size:11px;color:#8883a4}.btn{border:0;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:12px 18px;font-size:13px;font-weight:750;transition:transform .18s,filter .18s,background .18s}.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.09)}.btn .ico{height:18px;width:18px}.btn-primary{background:linear-gradient(110deg,#a66bff,#8648eb 50%,#d54fa5);color:white;box-shadow:0 9px 30px #8b41de44}.btn-secondary{border:1px solid #423857;background:#28223d;color:#e8def5}.btn-glass{background:#ffffff19;color:#fff;border:1px solid #ffffff33}.hero{position:relative;display:flex;min-height:325px;overflow:hidden;border-radius:25px;background:radial-gradient(ellipse 70% 180% at 94% 70%,#fa5aa650,transparent 63%),linear-gradient(119deg,#322065 0%,#51358d 43%,#291b5b 70%,#26183b 100%);border:1px solid #7454b666;box-shadow:0 18px 50px #0005;padding:32px clamp(25px,3.8vw,57px)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(0deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent 10%,#000 90%);pointer-events:none}.hero-content{position:relative;z-index:3;max-width:540px}.pill{display:inline-flex;align-items:center;gap:7px;border-radius:50px;padding:6px 12px;background:#ffffff1c;border:1px solid #ffffff2d;font-size:9px;letter-spacing:2px;font-weight:850}.pill .ico{width:13px;height:13px;color:#f5b0eb}.hero h1{font-size:clamp(39px,4.8vw,66px);letter-spacing:-2px;line-height:1.05;font-weight:900;margin:17px 0 12px}.hero h1 em{font-style:normal;background:linear-gradient(95deg,#ffc0d8,#ee78c2);color:transparent;background-clip:text}.hero p{font-size:13px;line-height:1.6;max-width:380px;color:#eee2ff;margin:0 0 19px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.btn-hero{padding:14px 20px;min-height:49px;background:linear-gradient(108deg,#ff77ae,#df4f91);box-shadow:0 9px 30px #eb529754}.hero-next{font-size:11px!important;color:#dfccfd!important;margin:12px 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-art{position:absolute;right:3%;top:0;width:42%;height:100%;pointer-events:none}.hero-glow{position:absolute;width:280px;height:280px;right:20%;top:9%;background:#fd6cbd7a;filter:blur(75px);border-radius:50%}.hero-orbit{position:absolute;border:1px solid #ffffff29;border-radius:50%;height:300px;width:300px;top:4%;right:13%;transform:rotate(-20deg)}.orbit-b{width:395px;height:240px;right:1%;top:14%;transform:rotate(27deg)}.hero-disk{position:absolute;top:42px;right:22%;width:215px;height:215px;border-radius:50%;background:linear-gradient(135deg,#a87fff,#5a2c99 46%,#191034);box-shadow:0 0 0 12px #ffffff0c,0 0 0 28px #ffffff05,0 14px 40px #0008;display:grid;place-items:center;transform:rotate(19deg)}.hero-disk:after{content:"";position:absolute;inset:13px;border-radius:50%;border:1px solid #e8bdff3a}.hero-disk-inner{display:grid;place-items:center;width:120px;height:120px;background:linear-gradient(145deg,#ff9dd4,#ed4a99);border-radius:50%;box-shadow:0 20px 60px #ff6ab482}.hero-disk-inner .ico{width:75px;height:75px;color:#fff;stroke-width:1.5}.hero-signal{position:absolute;bottom:39px;right:9%;height:34px;width:8px;background:#f8add5;border-radius:8px;box-shadow:0 0 14px #ff7eb4}.s1{right:16%;height:24px}.s2{right:13%;height:55px}.s3{right:10%;height:36px}.s4{right:7%;height:68px}.s5{right:4%;height:31px}.content-panel{padding:32px 0 0;min-height:320px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:0 0 22px}.section-top h2{font-size:26px;letter-spacing:-.7px;margin:0 0 2px;font-weight:850}.section-top p{color:#9690ab;margin:0;font-size:12px}.section-top .btn{white-space:nowrap}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px}.searchbox{flex:1;min-width:230px;display:flex;align-items:center;gap:11px;padding:12px 15px;background:#18162e;border:1px solid #322e4b;border-radius:13px;color:#908bac}.searchbox .ico{width:18px;height:18px}.searchbox:focus-within{border-color:#8158db}.searchbox input{width:100%;color:#fff;border:0;outline:0;background:transparent;font-size:13px}.searchbox input::placeholder{color:#74708e}.sort-group{display:flex;gap:8px;align-items:center}.sort-group label{color:#8f8ba7;font-size:11px}.sort-group select{appearance:none;color:#e7dfff;background:#18162e;border:1px solid #322e4b;border-radius:11px;padding:12px 30px 12px 12px;font-size:12px;min-width:140px;background-image:linear-gradient(45deg,transparent 50%,#a89dc0 50%),linear-gradient(135deg,#a89dc0 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-5px 0 18px}.filter-chip{border:1px solid #373150;background:#1d1a33;border-radius:100px;color:#bbb4d1;padding:8px 13px;font-size:11px;font-weight:750}.filter-chip.active{background:#44316c;border-color:#956af2;color:#fff}.filter-chip .count{opacity:.7;margin-left:4px}.song-list{display:flex;flex-direction:column;gap:10px}.song-card{border:1px solid #302b45;border-radius:17px;background:linear-gradient(115deg,#1c1931,#151426);min-height:82px;padding:11px 12px;display:flex;align-items:center;gap:13px;transition:border-color .16s,transform .16s;position:relative}.song-card:hover{border-color:#6c4e9a;transform:translateY(-1px)}.song-card.dragging{opacity:.45}.cover{height:57px;width:57px;flex:none;display:grid;place-items:center;border-radius:12px;background:linear-gradient(140deg,#703f9e,#ba427d);border:1px solid #ffffff15;color:#f6c8ff;position:relative}.cover .ico{width:28px;height:28px}.cover:after{content:"";position:absolute;width:27px;height:27px;border:1px solid #ffffff24;border-radius:50%;right:6px;bottom:5px}.cover-1{background:linear-gradient(140deg,#23538a,#6641b1)}.cover-2{background:linear-gradient(140deg,#983d5b,#5a40af)}.cover-3{background:linear-gradient(140deg,#2d797f,#583eb2)}.song-info{min-width:0;flex:1}.song-title{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-meta{font-size:11px;color:#9993b0;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-controls{display:flex;gap:5px;align-items:center}.song-controls button{border:0;background:transparent;color:#a6a0c1;display:grid;place-items:center;width:35px;height:35px;border-radius:10px;padding:0}.song-controls button:hover{background:#353052;color:white}.song-controls .fav.on{color:#ff75a4}.song-controls .fav.on .ico{fill:#ff75a444}.song-controls .play-circle{width:47px;height:47px;border-radius:13px;background:linear-gradient(115deg,#9d67fb,#cf55ae);color:white;box-shadow:0 4px 20px #8e45ce40;margin-left:3px}.song-controls .play-circle .ico{width:21px;height:21px;fill:#fff4;stroke-width:2}.reorder-controls{display:flex;gap:2px}.reorder-controls button{width:25px;height:24px}.reorder-controls .ico{width:15px;height:15px}.empty-state{border:1px dashed #4f416d;background:linear-gradient(120deg,#1e1937,#141426);border-radius:20px;padding:48px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.empty-icon{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;color:#f0b0fd;background:linear-gradient(145deg,#473075,#2e214a)}.empty-icon .ico{width:30px;height:30px}.empty-state h3{font-size:20px;margin:2px 0 0}.empty-state p{font-size:12px;color:#aaa3c0;margin:0 0 10px;max-width:390px}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.playlist-card{min-height:185px;padding:19px;border:1px solid #443554;border-radius:19px;background:radial-gradient(ellipse at top right,#a9568155,transparent 65%),linear-gradient(130deg,#282044,#18152e);display:flex;flex-direction:column;align-items:start;justify-content:space-between;overflow:hidden;position:relative}.playlist-card:nth-child(3n+2){background:radial-gradient(ellipse at top right,#4a9eca44,transparent 65%),linear-gradient(130deg,#24224a,#18152e)}.playlist-card:nth-child(3n+3){background:radial-gradient(ellipse at top right,#8a66d966,transparent 65%),linear-gradient(130deg,#2a2043,#18152e)}.playlist-card .playlist-graphic{border-radius:15px;width:54px;height:54px;background:#ffffff1a;display:grid;place-items:center}.playlist-card h3{font-size:17px;margin:12px 0 1px;line-height:1.2;overflow-wrap:anywhere}.playlist-card p{font-size:11px;color:#b0a9ca;margin:0}.playlist-actions{display:flex;width:100%;gap:6px;align-items:center;justify-content:space-between;margin-top:14px}.playlist-actions .btn{min-height:37px;padding:8px 12px}.playlist-actions button.icon-button{border-color:#ffffff21;background:#ffffff12}.queue-number{font-size:13px;color:#d5b9ff;min-width:21px;text-align:center;font-weight:850}.queue-actions{display:flex;gap:5px}.queue-actions .icon-button{width:33px;height:33px}.queue-actions .ico{width:16px;height:16px}.queue-tip{padding:13px 15px;border-radius:13px;border:1px solid #3d345c;background:#211b37;color:#bcb2d5;font-size:12px;display:flex;gap:11px;align-items:start;margin-bottom:18px}.queue-tip .ico{color:#c191ff}.page-footer{display:flex;justify-content:space-between;gap:20px;color:#66607d;font-size:9px;font-weight:800;letter-spacing:1.4px;padding:38px 0 8px}.mobile-nav,.mobile-logo{display:none}.stage{position:fixed;z-index:30;inset:0;background:#05040c;display:flex;flex-direction:column;gap:0;padding:16px clamp(15px,3vw,36px)}.stage-top,.stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.stage-top{min-height:60px;padding-bottom:12px}.stage-playing{display:flex;gap:12px;align-items:center}.stage-playing small{display:block;font-size:10px;color:#ae8fff;font-weight:900;letter-spacing:2px}.stage-playing strong{display:block;font-size:17px;max-width:65vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-dot{background:#ff4a84;box-shadow:0 0 14px #ff4a84}.stage-close{background:#252034;border:1px solid #48415a;border-radius:12px;display:flex;align-items:center;gap:6px;padding:11px;color:white}.stage-video-wrap{min-height:0;flex:1;display:flex;justify-content:center;align-items:center}.stage video{height:100%;width:100%;max-height:calc(100vh - 165px);background:black;object-fit:contain;outline:0}.stage-bottom{padding-top:12px;min-height:62px}.stage-bottom>span{font-size:12px;color:#9690ad}.stage-buttons{display:flex;gap:10px}.stage button:disabled{opacity:.5}.modal{border:1px solid #56456d;background:linear-gradient(145deg,#241c3f,#141328);color:#fff;border-radius:22px;padding:0;max-width:min(460px,calc(100vw - 26px));width:100%;box-shadow:0 30px 100px #000b}.modal::backdrop{background:#06040cd9;backdrop-filter:blur(8px)}.modal-body{padding:27px;display:flex;flex-direction:column;align-items:stretch;gap:14px}.modal-icon{height:46px;width:46px;border-radius:15px;background:#46326d;color:#e4c4fa;display:grid;place-items:center}.modal h2{font-size:24px;letter-spacing:-.5px;margin:0}.modal p{font-size:13px;color:#b0a9c2;margin:0}.check-setting{display:flex;gap:13px;padding:15px;border:1px solid #4c4064;border-radius:13px;background:#ffffff07;align-items:start;cursor:pointer}.check-setting input{accent-color:#a66bff;width:19px;height:19px;flex:none;margin:3px 0 0}.check-setting b{display:block;font-size:13px}.check-setting small{font-size:11px;color:#afa8c5;display:block;line-height:1.5;margin-top:4px}.hint{display:flex;gap:9px;color:#a9a3c2;font-size:11px;line-height:1.45}.hint .ico{width:16px;height:16px;flex:none;color:#cd9aff}.dialog-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:9px}.dialog-buttons .btn{flex:1}.field-label{font-size:12px;font-weight:750;color:#aca4c4}.text-field{border:1px solid #4c4064;background:#15132b;color:white;padding:14px 15px;border-radius:11px;width:100%;outline:0}.text-field:focus{border-color:#a36ffa}.action-stack{display:grid;gap:7px}.action-stack button{width:100%;text-align:left;color:#f1eaf9;background:#ffffff09;border:1px solid #423652;padding:13px;border-radius:12px;display:flex;align-items:center;gap:12px}.action-stack button:hover{background:#ffffff14}.action-stack .ico{width:18px;height:18px}.action-stack button.danger-action{color:#ffb1c9;border-color:#774054}.assign-choices{max-height:320px;overflow:auto;display:grid;gap:8px}.assign-option{display:flex;gap:12px;padding:12px;background:#ffffff08;border:1px solid #453b5c;border-radius:11px;font-size:13px;align-items:center}.assign-option input{accent-color:#a36af5;width:18px;height:18px}.toast{position:fixed;z-index:100;left:50%;bottom:35px;transform:translate(-50%,40px);opacity:0;pointer-events:none;background:#ece0ff;color:#1c1635;padding:12px 19px;font-size:13px;font-weight:750;border-radius:12px;box-shadow:0 12px 38px #0008;transition:opacity .2s,transform .2s;text-align:center;width:max-content;max-width:calc(100vw - 28px)}.toast.show{transform:translate(-50%,0);opacity:1}.danger-note{color:#ffafc8}
@media(max-width:1170px){.sidebar{width:222px;flex-basis:222px}.hero-art{right:-6%}.hero-content{max-width:440px}.hero h1{font-size:51px}}
@media(max-width:900px){.sidebar{display:none}.main-area{padding:20px 20px 105px}.mobile-logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:900;letter-spacing:1.5px}.mobile-logo-icon{height:37px;width:37px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#a36df5,#ea569e)}.top-context{display:none}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-around;gap:3px;padding:9px 8px calc(8px + env(safe-area-inset-bottom));background:#101024f5;border-top:1px solid #41355e;backdrop-filter:blur(18px)}.mobile-nav-item{flex:1;border:0;background:none;color:#9d98b8;padding:5px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;min-height:49px}.mobile-nav-item.active{color:#d9b6ff}.mobile-nav-item .ico{width:21px;height:21px}.hero-art{right:0;opacity:.7}.page-footer{display:none}}
@media(max-width:620px){.main-area{padding:15px 13px 100px}.topbar{height:43px;margin-bottom:13px}.top-import{padding:9px 11px;min-height:39px}.top-import span{display:none}.top-import .ico{width:22px;height:22px}.storage-note{display:none}.hero{border-radius:20px;padding:23px 19px;min-height:277px}.hero-content{max-width:100%}.hero h1{font-size:43px;letter-spacing:-1.9px;margin:13px 0 9px}.hero p{font-size:11.5px;max-width:250px}.hero-art{width:65%;right:-18%;opacity:.4}.hero-disk{width:160px;height:160px;right:24%;top:55px}.hero-disk-inner{width:90px;height:90px}.hero-disk-inner .ico{width:52px;height:52px}.hero-orbit{height:250px;width:250px}.orbit-b{height:210px;width:270px}.hero-signal{display:none}.pill{font-size:8px}.hero-next{max-width:290px}.btn-hero{min-height:43px;padding:11px 12px;font-size:11px}.hero .btn-glass{min-height:43px;padding:9px 12px;font-size:11px}.content-panel{padding-top:24px}.section-top{margin-bottom:16px;align-items:center}.section-top h2{font-size:22px}.section-top p{font-size:11px}.section-top .btn{font-size:11px;min-height:37px;padding:8px 10px}.toolbar{gap:10px}.searchbox{flex-basis:100%;min-width:0}.sort-group{margin-left:auto}.song-card{gap:9px;padding:10px 9px;min-height:72px;border-radius:13px}.cover{width:45px;height:45px;border-radius:10px}.cover .ico{width:23px;height:23px}.cover:after{width:20px;height:20px}.song-title{font-size:12px}.song-meta{font-size:10px;margin-top:3px}.song-controls{gap:1px}.song-controls button{height:32px;width:29px}.song-controls .play-circle{width:39px;height:42px}.song-controls .play-circle .ico{width:18px}.reorder-controls{display:none}.song-controls .hide-mobile{display:none}.stage{padding:9px}.stage-top{padding-bottom:8px}.stage-playing strong{font-size:14px}.stage-bottom{flex-direction:column;align-items:stretch;gap:7px}.stage-buttons .btn{flex:1;font-size:11px;padding:8px}.stage video{max-height:calc(100dvh - 176px)}.modal-body{padding:20px}.toast{bottom:85px}}
@media(max-width:360px){.hero{min-height:284px}.hero h1{font-size:38px}.hero-actions{gap:7px}.hero .btn-glass{padding:8px}.song-card{gap:7px}.cover{width:39px;height:42px}.song-controls button{width:25px}.song-controls .play-circle{width:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}