:root{color-scheme:dark;--bg:#0f0f0f;--panel:#181818;--panel2:#212121;--line:#303030;--muted:#aaa;--text:#f1f1f1;--red:#ff0033;--hover:#272727;--radius:12px;--top:60px;--side:220px;--drawer:380px;font-family:Roboto,Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);min-height:100%;font-family:inherit}button,input,select{font:inherit}button{color:inherit}.hidden{display:none!important}.topbar{height:var(--top);position:fixed;inset:0 0 auto;z-index:30;background:rgba(15,15,15,.97);display:flex;align-items:center;padding:0 18px;gap:18px;border-bottom:1px solid transparent}.icon-button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}.icon-button:hover{background:var(--hover)}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.brand-mark{width:48px;border-radius:10px}.brand-mark svg{width:36px;height:36px}.brand-mark svg circle{fill:var(--red);stroke:none}.brand-mark svg path{fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.search-wrap{height:40px;max-width:620px;flex:1;margin:auto;display:flex;align-items:center;border:1px solid var(--line);background:#121212;border-radius:20px;padding:0 14px;gap:10px}.search-wrap:focus-within{border-color:#3467a9}.search-wrap svg{width:19px;fill:none;stroke:#aaa;stroke-width:1.8}.search-wrap input{border:0;outline:0;background:transparent;color:#fff;width:100%;font-size:15px}.top-actions{display:flex;align-items:center;gap:6px}.account-button{position:relative;width:36px;height:36px;border:0;border-radius:50%;background:#246b78;color:#fff;font-weight:700;cursor:pointer}.premium-dot{position:absolute;right:-4px;bottom:-4px;background:#0f0f0f;color:#ffd54a;width:16px;height:16px;border-radius:50%;font-size:10px;display:grid;place-items:center}.category-strip{display:none}.main-layout{padding-top:var(--top);display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}.side-nav{position:fixed;top:var(--top);bottom:0;width:var(--side);overflow:auto;padding:12px 10px;background:var(--bg);z-index:20}.side-link{width:100%;border:0;background:transparent;border-radius:10px;padding:11px 14px;text-align:left;cursor:pointer;font-size:14px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-link:hover{background:var(--hover)}.side-link.active{background:#2b2b2b;color:#fff;font-weight:600}.content-area{grid-column:2;padding:20px 24px 100px;max-width:1400px;width:100%;margin:0 auto}.player-card{display:grid;grid-template-columns:minmax(420px,1.6fr) minmax(260px,.8fr);background:#151515;border-radius:var(--radius);overflow:hidden;min-height:320px;margin-bottom:26px}.player-frame{position:relative;aspect-ratio:16/9;background:#000;min-height:260px}.player-frame iframe{width:100%;height:100%;border:0}.player-cover{position:absolute;inset:0;border:0;background:radial-gradient(circle,rgba(0,0,0,.15),rgba(0,0,0,.75));cursor:pointer}.large-play{display:inline-grid;place-items:center;width:70px;height:50px;border-radius:14px;background:var(--red);font-size:25px;padding-left:4px}.now-playing{padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.now-text h1{font-size:22px;line-height:1.35;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.now-text p{margin:0;color:var(--muted)}.now-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.round-control{width:44px;height:44px;border:0;border-radius:50%;background:#303030;cursor:pointer}.round-control:hover{background:#444}.round-control.primary{width:52px;height:52px;background:#fff;color:#111;font-size:21px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:8px 0 12px}.section-head h2{margin:0;font-size:22px}.section-head span{display:block;margin-top:5px;color:#777;font-size:12px}.text-button{border:0;background:transparent;color:#ddd;font-weight:600;cursor:pointer;padding:10px}.text-button:hover{color:#fff}.track-list{display:flex;flex-direction:column}.track-row{display:grid;grid-template-columns:52px 94px minmax(0,1fr) 112px 74px;align-items:center;gap:12px;min-height:72px;padding:7px 10px;border-radius:9px;cursor:pointer}.track-row:hover,.track-row.active{background:var(--hover)}.rank-cell{display:flex;align-items:center;gap:6px;color:#aaa;font-variant-numeric:tabular-nums}.rank-cell b{font-size:15px;min-width:25px;text-align:right}.movement{font-size:11px;min-width:16px}.movement.up{color:#2ecc71}.movement.down{color:#ff5f57}.thumb{width:94px;aspect-ratio:16/9;border-radius:6px;object-fit:cover;background:#222}.track-main{min-width:0}.track-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}.track-channel{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-cell{font-size:12px;color:#999;text-align:right}.duration-cell{font-size:12px;color:#bbb;text-align:right}.row-actions{display:flex;justify-content:flex-end;gap:3px}.mini-button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;cursor:pointer;font-size:18px}.mini-button:hover{background:#3b3b3b}.track-row{grid-template-columns:52px 94px minmax(0,1fr) 92px 54px 78px}.notice{padding:14px 16px;border:1px solid #594c16;background:#2a260f;border-radius:10px;color:#ffe28a;margin-bottom:12px}.list-loader{height:120px;display:flex;align-items:center;justify-content:center;gap:7px}.list-loader span{width:8px;height:8px;background:#777;border-radius:50%;animation:bounce 1s infinite}.list-loader span:nth-child(2){animation-delay:.15s}.list-loader span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}.drawer{position:fixed;z-index:60;top:0;right:calc(-1 * var(--drawer));width:min(var(--drawer),100vw);height:100vh;background:#181818;border-left:1px solid var(--line);display:flex;flex-direction:column;transition:right .22s ease}.drawer.open{right:0}.drawer-head{padding:15px;border-bottom:1px solid var(--line)}.drawer-title-row{display:flex;align-items:center;justify-content:space-between}.drawer-title-row h3{margin:0}.drawer-title-row .icon-button{font-size:28px}.playlist-select-row{display:grid;grid-template-columns:1fr 40px 40px;gap:8px;margin-top:13px}.playlist-select-row select{min-width:0;background:#282828;color:#fff;border:1px solid #3a3a3a;border-radius:8px;padding:0 10px}.square-button{height:40px;border:0;border-radius:8px;background:#333;cursor:pointer;font-size:20px}.square-button.danger{color:#ff6b6b}.drawer-list{flex:1;overflow:auto;padding:8px}.drawer-empty{color:#777;text-align:center;padding:50px 20px}.playlist-item{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:center;border-radius:8px;padding:8px;cursor:grab}.playlist-item:hover{background:#242424}.playlist-item.dragging{opacity:.45}.playlist-position{color:#777;text-align:center;font-size:12px}.playlist-item-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item-channel{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.drawer-player{padding:12px;border-top:1px solid var(--line)}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50}.primary-button,.secondary-button{height:44px;border:0;border-radius:9px;padding:0 18px;font-weight:700;cursor:pointer}.primary-button{background:#fff;color:#111;width:100%}.primary-button:hover{background:#e5e5e5}.secondary-button{background:#303030;color:#fff;width:100%;margin-top:10px}.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px}.modal{position:relative;background:#212121;border:1px solid #353535;border-radius:14px;padding:24px;width:min(420px,100%);box-shadow:0 20px 80px rgba(0,0,0,.55)}.modal.small-modal{width:min(360px,100%)}.modal h3{margin:0 0 18px}.modal-close{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#bbb;font-size:26px;cursor:pointer}.modal-close:hover{background:#303030}.modal-form{display:flex;flex-direction:column;gap:12px}.modal-form input{height:45px;border:1px solid #444;border-radius:8px;background:#161616;color:#fff;padding:0 13px;outline:0}.modal-form input:focus{border-color:#3c7dc4}.auth-tabs{display:flex;gap:7px;margin-bottom:18px}.auth-tabs button{flex:1;height:40px;border:0;border-radius:8px;background:#303030;cursor:pointer}.auth-tabs button.active{background:#fff;color:#111}.form-error{margin-top:12px;color:#ff8f8f;font-size:13px}.choose-list{display:flex;flex-direction:column;max-height:320px;overflow:auto}.choose-item{border:0;background:transparent;color:#fff;text-align:left;padding:13px;border-radius:8px;cursor:pointer}.choose-item:hover{background:#303030}.toast-stack{position:fixed;z-index:100;right:16px;bottom:20px;display:flex;flex-direction:column;gap:8px}.toast{background:#f1f1f1;color:#111;border-radius:8px;padding:12px 16px;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:toastin .2s ease}.toast.error{background:#ffdddd;color:#570000}@keyframes toastin{from{transform:translateY(10px);opacity:0}}@media(max-width:1000px){:root{--side:0px}.side-nav{display:none}.category-strip{display:flex;position:sticky;top:var(--top);z-index:25;background:rgba(15,15,15,.97);overflow:auto;gap:8px;padding:10px 14px;border-bottom:1px solid #202020}.category-chip{flex:0 0 auto;border:0;background:#282828;color:#eee;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:13px}.category-chip.active{background:#fff;color:#111}.main-layout{display:block}.content-area{padding:14px 14px 100px}.player-card{grid-template-columns:1fr}.now-playing{padding:18px}.now-text h1{font-size:18px;-webkit-line-clamp:2}.track-row{grid-template-columns:42px 76px minmax(0,1fr) 44px 72px}.thumb{width:76px}.view-cell{display:none}.topbar{padding:0 10px;gap:8px}.brand-mark{width:42px}.search-wrap{margin:0}.content-area{grid-column:auto}}@media(max-width:620px){:root{--top:56px}.topbar{height:var(--top)}.search-wrap{height:38px}.search-wrap input{font-size:14px}.top-actions{gap:0}.top-actions .icon-button{display:none!important}.player-card{margin-left:-14px;margin-right:-14px;border-radius:0}.player-frame{min-height:0}.now-playing{gap:14px}.now-controls{justify-content:center}.section-head h2{font-size:19px}.track-row{grid-template-columns:34px 68px minmax(0,1fr) 40px;padding:6px 3px;gap:8px}.thumb{width:68px}.duration-cell{display:none}.row-actions .favorite-btn{display:none}.track-title{font-size:13px}.rank-cell b{min-width:22px}.playlistDrawerButton{display:block}.modal{padding:22px 18px}.account-button{width:34px;height:34px}.brand-mark svg{width:32px}.category-strip{padding-left:10px;padding-right:10px}}