@charset "UTF-8";
:root{--bg:#101018;--sidebar:#14131c;--surface:#1b1a25;--surface2:#23212e;--line:#ffffff12;--text:#f9f8fd;--muted:#9896aa;--purple:#ad94ff;--pink:#f0a6c7;--gradient:linear-gradient(120deg,#a88fff,#e3a0cd);--player-h:96px;--sidebar-w:244px;color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}body{min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--purple);outline-offset:3px}button{border:0}svg{flex-shrink:0}#app{min-height:100vh}.ic{vertical-align:middle}.boot-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:24px;background:radial-gradient(circle at 50% 30%,#42315a44,transparent 40%)}.boot-screen h1{font-size:28px;margin:5px 0}.boot-screen p{color:var(--muted);margin:0}
/* Branding & navigation */
.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;z-index:10;left:0;top:0;bottom:var(--player-h);width:var(--sidebar-w);padding:27px 16px 20px 21px;background:#14131c;border-right:1px solid #ffffff0b;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}.brand{display:flex;align-items:center;gap:11px;font-weight:750;font-size:20px;letter-spacing:-.6px;white-space:nowrap;margin-bottom:51px}.brand b{color:#cab5ff}.brand-badge{width:39px;height:39px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;background:linear-gradient(145deg,#ab8dff,#f2a7d0);color:#23172e;box-shadow:0 5px 25px #a78bfa38;font-size:25px;font-weight:900}.side-label,.side-list-heading{font-size:10px;font-weight:800;letter-spacing:1.55px;color:#77758a;padding:0 14px;margin-bottom:15px}.side-label-collection{margin-top:31px}.side-nav{display:grid;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:14px;border-radius:10px;padding:12px 14px;text-align:left;background:transparent;color:#9997ad;font-weight:620;font-size:13.6px;transition:.15s}.nav-item:hover,.side-playlist:hover{background:#ffffff0c;color:#fff}.nav-item.active{background:#a78bfa20;color:#d6c9ff}.nav-item.active svg{color:#b89fff}.playlist-side{margin-top:37px}.side-list-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px}.side-list-heading .icon-btn{padding:3px;color:#b9a9db}.side-playlists{display:grid;gap:4px}.side-playlist{display:flex;align-items:center;gap:11px;min-height:39px;padding:5px 12px;text-align:left;color:#a2a0b1;background:transparent;border-radius:9px;font-size:12.5px}.side-playlist.selected{color:#decfff;background:#a78bfa18}.tiny-art{width:27px;height:27px;background:linear-gradient(145deg,#4b3e6b,#7b567d);border-radius:7px;display:grid;place-items:center;color:#ddd}.side-small{color:#686578;font-size:12px;padding:9px 14px}.sidebar-bottom{margin-top:auto;padding:38px 7px 0}.sidebar-note{display:flex;align-items:center;gap:12px;border-radius:14px;background:linear-gradient(130deg,#262036,#1d1a27);border:1px solid #ffffff0d;color:#b7a9ce;padding:16px 13px;font-size:11.5px;line-height:1.55}.sidebar-note span{font-size:25px;color:#cebaff}
.app-column{margin-left:var(--sidebar-w);min-width:0;width:calc(100% - var(--sidebar-w));padding-bottom:calc(var(--player-h) + 25px)}.topbar{height:90px;padding:0 clamp(24px,4.4vw,68px);display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:8}.top-search{width:clamp(250px,35vw,480px);max-width:55%;height:44px;border:1px solid #ffffff14;border-radius:30px;background:#ffffff0a;display:flex;align-items:center;gap:11px;padding:0 15px;color:#8d8a9e;transition:.2s}.top-search:focus-within{border-color:#a88fff80;background:#ffffff0f}.top-search input{width:100%;border:0;background:none;color:#f5f2fa;outline:0;font-size:12.5px;min-width:0}.top-search input::placeholder{color:#777588}.top-search kbd{border:1px solid #ffffff1c;border-radius:5px;padding:3px 6px;font-size:11px}.top-actions{display:flex;align-items:center;gap:15px}.account-pill{display:flex;align-items:center;gap:10px;background:transparent;color:#eeeaf5;font-weight:620;font-size:12.5px;padding:4px 0}.account-pill svg:last-child{transform:rotate(90deg);color:#777588}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#d0b1e6,#805bc6);color:#20182d;font-size:16px;font-weight:800;flex-shrink:0}.icon-btn{padding:7px;display:inline-flex;align-items:center;justify-content:center;color:#9290a5;border-radius:9px;background:transparent;transition:color .15s,background .15s}.icon-btn:hover{background:#ffffff0c;color:#fff}.icon-btn.active,.icon-btn.liked{color:#c9a8ff}.mobile-brand,.mobile-nav{display:none}
.page-main{padding:10px clamp(24px,4.4vw,68px) 70px;max-width:1800px;margin:0 auto}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:26px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:2.15px;color:#ae9bcf}.welcome-row h1{font-size:clamp(22px,2.2vw,31px);margin:11px 0 8px;letter-spacing:-1.2px;font-weight:790}.welcome-row p{font-size:13.5px;color:var(--muted);margin:0}.wave-emoji{color:#bea2ff}.welcome-date{white-space:nowrap;color:#8a879a;font-size:12px;padding-bottom:7px}
/* Hero */
.hero{height:306px;background:linear-gradient(115deg,#513e8c 0%,#7a517c 49%,#af6c91 85%,#d798ae 100%);border-radius:20px;position:relative;overflow:hidden;display:flex;align-items:center;box-shadow:0 12px 65px #100d1c65}.hero:before{content:"";position:absolute;inset:0;opacity:.28;background:radial-gradient(ellipse at 25% 130%,#b2a3ff,transparent 42%),linear-gradient(90deg,#0e0e1c77,transparent 70%)}.hero-content{padding:31px 0 30px 43px;position:relative;z-index:2;width:62%}.hero-chip{display:inline-flex;align-items:center;gap:8px;color:#f6e4fb;font-size:9px;font-weight:850;letter-spacing:1.6px}.hero h2{font-size:clamp(25px,3vw,41px);line-height:1.07;letter-spacing:-1.9px;margin:16px 0 11px}.hero h2 em{font-style:normal;color:#ffd4e7}.hero p{max-width:360px;color:#f2e5f1cb;font-size:12.7px;line-height:1.65;margin:0}.hero-actions{display:flex;gap:11px;margin-top:22px}.btn{border-radius:10px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:730;font-size:12.2px;white-space:nowrap;transition:transform .15s,filter .15s,background .15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn.primary{background:linear-gradient(105deg,#a98afa,#dba3d7);color:#1c142c}.btn.soft{background:#af96ff24;color:#d4c4ff;border:1px solid #c1aaff22}.btn.light,.hero-primary{background:#fff;color:#2a1e3f}.btn.ghost{background:transparent;color:#c3b3e4}.hero-outline{background:#ffffff1b;color:#fff;border:1px solid #ffffff30}.hero-art{position:absolute;right:0;top:0;bottom:0;width:44%;display:grid;place-items:center}.hero-glow{position:absolute;width:300px;height:300px;right:-10px;top:13px;border-radius:50%;background:#ffe2ed55;filter:blur(58px)}.hero-vinyl{position:absolute;right:clamp(-45px,0.8vw,16px);width:280px;height:280px;border-radius:50%;background:repeating-radial-gradient(circle at center,#12111d 0,#171521 2px,#1f1c2d 3px,#151521 5px);box-shadow:-20px 15px 55px #1b14274d,inset -4px -4px 25px #0009;transform:rotate(-18deg)}.hero-vinyl:before{content:"";position:absolute;inset:80px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#d6a8d6,#8d62ad 80%);box-shadow:0 0 2px 5px #0008}.hero-vinyl:after{content:"";position:absolute;inset:133px;border-radius:50%;background:#16131f;z-index:2}.hero-vinyl-label{position:absolute;inset:80px;display:grid;place-items:center;font-size:52px;color:#ffedf2;z-index:1}.floating-note{position:absolute;color:#f8d5fa99;font-size:56px;transform:rotate(10deg)}.note-1{right:28%;top:9%}.note-2{right:5%;bottom:0%}
.stats-strip{display:flex;gap:12px;margin:23px 0 39px}.stats-strip>div{flex:1;background:#1a1924;border:1px solid #ffffff07;border-radius:14px;padding:17px 18px;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px}.stats-strip svg{color:#a794e3}.stats-strip b{font-size:19px;letter-spacing:-.8px}.stats-strip span{display:block;flex-basis:100%;color:#8c899e;font-size:11px;margin-left:31px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:22px 0 19px}.section-head h2{font-size:20px;letter-spacing:-.65px;margin:0 0 5px}.section-head p{font-size:12px;margin:0;color:#8b889d}.text-link{display:flex;align-items:center;gap:1px;background:transparent;color:#c1aafa;font-size:12px;font-weight:650;white-space:nowrap}.album-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px;margin-bottom:39px}.album-card,.artist-card,.playlist-card{display:flex;flex-direction:column;align-items:stretch;background:transparent;color:var(--text);text-align:left;min-width:0;padding:0}.album-card .album-art{aspect-ratio:1;width:100%;margin-bottom:12px;position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,var(--art),#4d3a74)}.cover-fallback{display:grid;place-items:center;background:linear-gradient(145deg,#786a9e,#3a3053);color:#e2cafa;width:100%;height:100%}.album-art>.cover-fallback{background:linear-gradient(145deg,var(--art),#59406d);color:#21162e}.album-art .cover-fallback svg{width:38%;height:38%;stroke-width:1.1}.cover-img{width:100%;height:100%;display:block;object-fit:cover}.album-card b,.artist-card b,.playlist-card b{font-size:12.7px;line-height:1.4;letter-spacing:-.15px}.album-card>span,.artist-card>span,.playlist-card>span{font-size:11.5px;color:#8d899e;margin-top:5px}.album-card:hover .album-art,.artist-card:hover .artist-art{filter:brightness(1.12)}.card-play{position:absolute;bottom:9px;right:9px;width:38px;height:38px;border-radius:50%;background:#e1cbff;color:#392c54;display:grid;place-items:center;opacity:0;transform:translateY(8px);transition:.2s}.album-card:hover .card-play{opacity:1;transform:translateY(0)}.clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Track table */
.track-table{margin:9px 0 25px;min-width:0}.track-row{display:grid;grid-template-columns:32px minmax(170px,2fr) minmax(110px,1.1fr) minmax(110px,1fr) 48px 41px 41px;align-items:center;gap:12px;min-height:64px;border-bottom:1px solid #ffffff0a;padding:0 8px;border-radius:7px}.track-row:not(.track-head):hover{background:#ffffff09}.track-row.is-current .track-main b,.track-row.is-current .row-index{color:#cdb5ff}.track-head{min-height:39px;color:#797689;font-size:10px;letter-spacing:1.1px;font-weight:700}.row-index{background:transparent;color:#8d889e;text-align:left;font-size:12px}.track-main{display:flex;align-items:center;gap:11px;min-width:0;background:transparent;color:var(--text);text-align:left;padding:4px 0}.track-cover{width:43px;height:43px;min-width:43px;flex-shrink:0;border-radius:7px}.track-text{min-width:0}.track-text b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px;font-weight:660}.track-text small{display:none;color:#9390a5;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-row>.artist-col,.track-row>.album-col{font-size:11.7px;color:#9390a4}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.duration{color:#8d899e;font-size:11.5px;text-align:center}.fav-btn.liked{color:#f2a3c6}.fav-btn.liked svg{fill:#f2a3c64f}.eq-bars{display:flex;align-items:center;height:19px;gap:3px}.eq-bars i{display:block;height:10px;width:3px;border-radius:2px;background:#bba6fa;animation:eq 750ms ease-in-out infinite alternate}.eq-bars i:nth-child(2){animation-delay:240ms;height:18px}.eq-bars i:nth-child(3){animation-delay:400ms;height:8px}@keyframes eq{to{height:3px}}
/* Pages */
.page-title{margin:10px 0 32px}.page-title h1{font-size:34px;letter-spacing:-1.4px;margin:12px 0 7px}.page-title h1 span{font-weight:500;color:#918ca2;font-size:22px}.page-title p{font-size:13px;color:#9290a5;margin:0 0 20px}.page-title.with-action{display:flex;align-items:center;justify-content:space-between;gap:15px}.page-title.with-action p{margin-bottom:0}.album-grid-full{grid-template-columns:repeat(6,minmax(0,1fr))}.artists-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:25px 17px}.artist-art{border-radius:50%;aspect-ratio:1;overflow:hidden;background:linear-gradient(145deg,var(--art),#463558);margin-bottom:13px}.artist-art .cover-fallback{background:linear-gradient(145deg,var(--art),#443550)}.artist-card{text-align:center}.detail-banner{display:flex;align-items:end;gap:33px;min-height:242px;margin:12px 0 29px;padding:25px 28px;background:linear-gradient(135deg,#3a2c51,#201c2c 72%);border-radius:16px}.detail-art{width:188px;height:188px;flex-shrink:0;border-radius:13px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(130deg,#a98ddb,#624670)}.detail-art.circular{border-radius:50%}.detail-art .cover-fallback{background:linear-gradient(145deg,var(--art),#554070)}.detail-banner h1{font-size:clamp(28px,4vw,48px);letter-spacing:-2px;margin:10px 0;line-height:1.1;word-break:break-word}.detail-banner p{color:#c6bdd0;font-size:12px;margin:0 0 21px}.detail-actions{display:flex;align-items:center;gap:12px}.outline-danger{color:#dda6bb;background:#ffffff10;border:1px solid #dca0b84a}.collection-banner{min-height:235px;border-radius:17px;display:flex;align-items:center;gap:25px;margin:8px 0 26px;padding:32px 42px;background:linear-gradient(115deg,#573d85,#a3659c)}.collection-icon{width:137px;height:137px;flex-shrink:0;border-radius:22px;background:linear-gradient(125deg,#f6c8e3,#ac91e8);color:#4e3472;display:grid;place-items:center;box-shadow:0 13px 30px #1a0b2044}.collection-banner h1{font-size:clamp(28px,4vw,45px);margin:12px 0 5px}.collection-banner p{font-size:12px;color:#e8dceb;margin-bottom:19px}.collection-banner .eyebrow{color:#f5e0fe}.playlist-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:21px}.playlist-card .playlist-tile{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;margin-bottom:12px;background:linear-gradient(145deg,var(--art),#573d71);color:#fce8ff}.playlist-detail{background:linear-gradient(130deg,#ba95ec,#8055a0);color:#f4dfff}
.empty-state{margin:20px 0 45px;padding:48px 20px;border:1px dashed #ffffff26;border-radius:18px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#ffffff04}.empty-symbol{width:85px;height:85px;display:grid;place-items:center;border-radius:26px;background:#af8eff1c;color:#baa3ec}.empty-state h3{font-size:20px;margin:22px 0 9px}.empty-state p{font-size:13px;color:#9491a7;margin:0 0 19px;line-height:1.6;max-width:390px}
/* Player */
.player{position:fixed;bottom:0;left:var(--sidebar-w);right:0;height:var(--player-h);padding:14px clamp(20px,2.7vw,42px);background:rgba(27,25,37,.97);border-top:1px solid #ffffff13;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:15px;backdrop-filter:blur(15px)}.now-playing{display:flex;align-items:center;min-width:0;width:30%;max-width:305px;gap:11px}.playing-cover,.player-placeholder{width:53px;height:53px;min-width:53px;border-radius:9px;display:grid;place-items:center;background:#64527c;color:#e1c5ff}.playing-meta{min-width:0}.playing-meta b{display:block;font-size:12.5px;font-weight:680;margin-bottom:5px}.playing-meta span{display:block;color:#8e8b9f;font-size:11px}.player-heart{margin-left:7px}.player-center{width:min(440px,47%);display:flex;flex-direction:column;gap:10px}.player-controls{display:flex;align-items:center;justify-content:center;gap:22px}.player-controls .icon-btn{padding:3px}.player-controls .icon-btn.active{color:#cbb3ff}.player-secondary{position:relative}.player-secondary sup{position:absolute;top:-6px;right:-4px;font-size:9px}.play-pause{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#f4edff;color:#1a1527}.play-pause:hover{background:#cebaff}.timeline{display:flex;align-items:center;gap:11px;color:#868295;font-size:10px}.timeline input{flex:1;min-width:0}.player-right{width:25%;max-width:204px;display:flex;align-items:center;gap:10px;color:#9691aa}.player-right input{min-width:0;width:85px}.quality-chip{font-size:9px;border:1px solid #ffffff20;border-radius:5px;padding:5px 6px;color:#b1a4c3}input[type="range"]{appearance:none;-webkit-appearance:none;height:4px;background:#54515f;border-radius:12px;cursor:pointer;accent-color:#bd9eff}input[type="range"]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#e1ceff;box-shadow:0 0 0 3px #e1ceff22}input[type="range"]::-moz-range-thumb{border:0;width:11px;height:11px;border-radius:50%;background:#e1ceff}
/* Settings and modal */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-card{background:#201e2a;border:1px solid #ffffff0d;border-radius:17px;padding:28px}.settings-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:19px}.settings-icon.purple{background:#a98cff26;color:#bdabfc}.settings-icon.pink{background:#f0a6c726;color:#f0a6c7}.settings-card h3{font-size:19px;margin:0 0 10px}.settings-card p{font-size:12.5px;line-height:1.75;color:#a09bb0;margin:0 0 23px}.settings-card code{color:#d1b5f0;background:#ffffff0b;padding:2px 4px;border-radius:3px}.settings-meta{font-size:12px;color:#cbb5f6;margin-bottom:20px}.settings-card .settings-hint{font-size:11px;margin:16px 0 0}.stack-form{display:grid;gap:11px}.stack-form input,.modal-form input,.auth-form input{width:100%;border:1px solid #ffffff1c;border-radius:10px;background:#12111c;color:#fff;padding:13px 14px;outline:none;font-size:13px}.stack-form input:focus,.modal-form input:focus,.auth-form input:focus{border-color:#b395ff}.stack-form input::placeholder,.modal-form input::placeholder,.auth-form input::placeholder{color:#726c85}.users-card{margin-top:18px}.users-list{display:grid}.user-item{padding:12px 0;border-bottom:1px solid #ffffff0e;display:flex;align-items:center;gap:11px}.user-item:last-child{border-bottom:0}.user-item>div{display:flex;flex-direction:column;gap:3px}.user-item b{font-size:13px}.user-item small{font-size:11px;color:#928da3}.user-role{margin-left:auto;color:#aa9bc6;font-size:11px}.muted{color:#8c889e}.center-text{text-align:center}.modal-overlay{position:fixed;inset:0;background:#06050bcc;z-index:30;display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px)}.modal-box{position:relative;width:min(440px,100%);max-height:85vh;overflow-y:auto;border:1px solid #ffffff21;border-radius:20px;background:#24212f;padding:30px;box-shadow:0 20px 70px #05020ab0}.modal-close{position:absolute;right:16px;top:15px}.modal-icon{width:48px;height:48px;border-radius:14px;background:#aa8eff22;color:#c4acfb;display:grid;place-items:center;margin-bottom:22px}.modal-box h2{font-size:23px;letter-spacing:-.7px;margin:0 0 9px}.modal-box p{font-size:13px;color:#a19aac;line-height:1.6;margin:0 0 22px}.modal-form{display:grid;gap:12px}.modal-form button{padding:14px}.modal-playlists{display:grid;gap:6px;max-height:230px;overflow:auto;margin-bottom:15px}.modal-playlists button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border-radius:9px;background:#ffffff09;padding:12px;color:#eae5f5}.modal-playlists button span{flex:1}.modal-playlists button:hover{background:#ffffff1a}.modal-create{width:100%}.logout-btn{margin-top:20px;width:100%;border-top:1px solid #ffffff13!important;border-radius:0!important;padding-top:20px!important}.toast{position:fixed;top:22px;left:50%;transform:translate(-50%,-15px);background:#383049;color:#f7eafa;padding:13px 19px;border:1px solid #ffffff29;border-radius:11px;box-shadow:0 15px 30px #0008;z-index:60;font-size:12.5px;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 25px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast-error{background:#573342;color:#ffdbe7}
/* Auth screen */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(430px,48%) 1fr;position:relative;overflow:hidden;background:#15131d}.auth-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden}.auth-shapes span{position:absolute;border-radius:50%;filter:blur(80px);background:#8a5dd031}.auth-shapes span:first-child{width:400px;height:400px;left:-180px;top:-130px}.auth-shapes span:nth-child(2){width:280px;height:280px;left:26%;bottom:-180px;background:#d879a830}.auth-shapes span:nth-child(3){width:480px;height:480px;right:0;top:0;background:#6d4c9540}.auth-panel{z-index:1;max-width:560px;width:100%;margin:auto;padding:30px clamp(38px,6vw,95px)}.auth-brand{margin:0 0 30px}.auth-art{height:190px;display:flex;justify-content:center;align-items:center;position:relative;margin-bottom:13px}.auth-disc{height:171px;width:171px;border-radius:50%;background:repeating-radial-gradient(circle,#13121b,#24202f 3px,#17151e 6px);box-shadow:16px 16px 30px #06030f88;display:grid;place-items:center;transform:rotate(-19deg)}.auth-disc-center{height:68px;width:68px;border-radius:50%;background:radial-gradient(circle,#e8bfe5,#9170bd);border:23px solid #b994d2;box-shadow:0 0 0 8px #2c2338}.auth-wave{position:absolute;font-size:54px;right:23%;top:14px;color:#eebada}.auth-panel h1{font-size:clamp(25px,2.6vw,33px);letter-spacing:-1.2px;margin:0 0 10px;text-align:center}.auth-subtitle{font-size:13px;text-align:center;line-height:1.65;color:#a29bac;margin:0 0 29px}.auth-form{display:grid;gap:16px}.auth-form label{color:#cbc7d3;font-size:12px;font-weight:620;display:grid;gap:8px}.auth-form input{background:#221e2b;border-color:#ffffff22;padding:14px 15px}.auth-submit{width:100%;padding:15px;margin-top:4px;font-size:13px}.form-error{color:#ffc0c9;font-size:12px;text-align:center;margin:0}.auth-foot{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:30px;color:#766d86;font-size:11px}.auth-foot svg{color:#e0a8d4}.auth-side{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:50px clamp(50px,7vw,125px);background:linear-gradient(140deg,#453168,#71486d 56%,#af7295);position:relative;overflow:hidden}.auth-side:before{content:"";position:absolute;right:-170px;top:60px;width:550px;height:550px;border:85px solid #edc2df1b;border-radius:50%}.auth-side:after{content:"";position:absolute;width:450px;height:450px;border-radius:50%;right:-160px;bottom:-210px;background:#efb7d72b;filter:blur(40px)}.auth-side-label{font-size:10px;letter-spacing:2px;font-weight:800;color:#e6c8e2;z-index:1}.auth-side h2{font-size:clamp(42px,4.7vw,77px);letter-spacing:-3.8px;line-height:1.09;margin:28px 0;z-index:1}.auth-side h2 em{font-style:normal;color:#ffd2e6}.auth-side p{font-size:15px;line-height:1.8;color:#efdaed;max-width:390px;z-index:1}.auth-side-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;z-index:1}.auth-side-pills span{font-size:11px;padding:10px 14px;border:1px solid #ffffff45;border-radius:50px;background:#ffffff18}.notice{background:#403444;border:1px solid #cda77d60;padding:13px;border-radius:10px;font-size:12px;line-height:1.6;margin-bottom:18px}.notice code{font-size:11px;color:#f0d3ff}
/* Responsive */
@media (max-width:1320px){:root{--sidebar-w:220px}.sidebar{padding-left:12px;padding-right:11px}.album-grid,.album-grid-full,.artists-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-content{width:65%}.hero-vinyl{width:250px;height:250px}.hero-vinyl:before,.hero-vinyl-label{inset:72px}.hero-vinyl:after{inset:119px}.track-row{grid-template-columns:26px minmax(160px,2fr) minmax(90px,1fr) minmax(80px,1fr) 40px 35px 35px;gap:8px}}
@media (max-width:980px){:root{--sidebar-w:190px}.brand{font-size:17px}.brand-badge{width:34px;height:34px}.nav-item{gap:11px;padding:11px 10px;font-size:12.5px}.sidebar-note{display:none}.topbar{padding:0 25px}.page-main{padding:10px 25px 60px}.stats-strip>div{padding:12px}.stats-strip span{margin-left:0}.hero-art{opacity:.7}.hero-content{width:75%}.album-grid,.album-grid-full,.artists-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.track-row{grid-template-columns:23px minmax(140px,2fr) minmax(90px,1fr) 42px 34px 34px}.track-row .album-col{display:none}.player-right .quality-chip{display:none}.auth-wrap{grid-template-columns:1fr 1fr}.auth-side{padding:30px}.auth-panel{padding:30px}}
@media (max-width:740px){:root{--player-h:78px;--sidebar-w:0px}.sidebar{display:none}.app-column{margin:0;width:100%;padding-bottom:calc(var(--player-h) + 68px)}.topbar{height:123px;padding:10px 19px;gap:8px 13px;flex-wrap:wrap;align-content:center}.mobile-brand{display:flex;align-items:center;gap:7px;font-size:15px;white-space:nowrap}.mobile-brand .brand-badge{width:29px;height:29px;font-size:19px;border-radius:9px}.top-search{order:3;width:100%;max-width:none;display:flex}.top-actions{margin-left:auto;gap:4px}.account-pill{font-size:12px}.account-pill>span:nth-child(2){display:none}.top-settings{display:none}.page-main{padding:8px 18px 30px}.welcome-date{display:none}.welcome-row{margin-bottom:21px}.welcome-row h1{font-size:23px}.welcome-row p{font-size:12px}.hero{height:278px;border-radius:17px}.hero-content{width:81%;padding-left:23px}.hero h2{font-size:29px}.hero p{font-size:11.5px;max-width:260px}.hero-vinyl{width:170px;height:170px;right:-70px;opacity:.75}.hero-vinyl:before,.hero-vinyl-label{inset:47px}.hero-vinyl:after{inset:79px}.hero-vinyl-label{font-size:33px}.hero-art{width:45%}.floating-note{font-size:31px}.hero-actions{gap:7px}.btn{font-size:11px;padding:10px 12px}.stats-strip{gap:7px;margin:15px 0 28px}.stats-strip>div{padding:11px 6px;justify-content:center;gap:4px}.stats-strip svg{width:17px;height:17px}.stats-strip b{font-size:15px}.stats-strip span{font-size:9px;text-align:center;flex-basis:100%}.section-head h2{font-size:19px}.section-head p{font-size:11px}.album-grid,.album-grid-full,.artists-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.album-card b,.artist-card b{font-size:12px}.album-card>span,.artist-card>span{font-size:10px}.track-row{grid-template-columns:22px minmax(110px,1fr) 37px 35px;gap:7px;padding:0 3px;min-height:60px}.track-row .artist-col,.track-row .album-col,.track-row .duration{display:none}.track-head{display:none}.track-text small{display:block}.track-cover{width:40px;height:40px;min-width:40px}.track-main{gap:9px}.track-text b{font-size:12px}.player{left:0;bottom:61px;height:var(--player-h);padding:9px 14px}.now-playing{width:auto;flex:1;max-width:none}.playing-cover,.player-placeholder{width:43px;height:43px;min-width:43px}.playing-meta b{font-size:11.5px}.playing-meta span{font-size:10px}.player-heart,.player-right,.player-center .timeline,.player-controls .player-secondary{display:none}.player-center{width:98px;flex:0 0 98px;gap:0}.player-controls{justify-content:flex-end;gap:10px}.player-controls>.icon-btn:first-of-type{display:none}.player-controls>.icon-btn:last-of-type{display:none}.play-pause{width:33px;height:33px}.mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:61px;z-index:21;background:#181621;border-top:1px solid #ffffff13;justify-content:space-around;align-items:center}.mobile-nav .nav-item{display:flex;flex-direction:column;gap:4px;align-items:center;width:auto;min-width:54px;border-radius:7px;padding:5px;color:#8c889e;font-size:9px}.mobile-nav .nav-item.active{background:transparent;color:#cfafff}.mobile-nav .nav-item svg{width:20px;height:20px}.page-title h1{font-size:28px}.page-title.with-action{align-items:flex-start}.page-title.with-action .btn{margin-top:5px}.collection-banner{padding:22px 19px;min-height:180px;gap:17px}.collection-icon{width:94px;height:94px;border-radius:16px}.collection-banner h1{font-size:27px}.detail-banner{padding:19px;gap:17px;min-height:180px;align-items:center}.detail-art{width:114px;height:114px}.detail-banner h1{font-size:27px}.detail-banner p{margin-bottom:13px}.playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.settings-grid{grid-template-columns:1fr}.settings-card{padding:21px}.auth-wrap{grid-template-columns:1fr}.auth-panel{padding:24px 30px;max-width:450px}.auth-side{display:none}.auth-art{height:148px;margin-bottom:8px}.auth-disc{height:135px;width:135px}.auth-disc-center{width:56px;height:56px;border-width:18px}.auth-brand{margin-bottom:15px}.auth-panel h1{font-size:28px}.auth-foot{margin-top:20px}}
@media(max-width:390px){.hero-content{width:92%}.hero-outline{display:none}.hero-vinyl{opacity:.45}.album-grid,.album-grid-full,.artists-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-row h1{font-size:20px}.page-title.with-action{flex-direction:column;align-items:flex-start}.detail-art{width:96px;height:96px}.detail-banner h1{font-size:23px}}