:root{--bg:#121212;--bg2:#181818;--bg3:#282828;--bg4:#333;--border:#333;--accent:#1db954;--accent-h:#1ed760;--text:#fff;--text2:#b3b3b3;--text3:#535353;--radius:8px;--player-h:90px;--tabbar-h:64px}.app{grid-template-columns:240px 1fr;grid-template-rows:1fr var(--player-h);background:var(--bg);height:100vh;color:var(--text);font-family:var(--font-main);display:grid}.sidebar{background:#000;flex-direction:column;grid-row:1;display:flex;overflow:hidden}.logo{flex-shrink:0;align-items:center;gap:10px;padding:20px 16px 12px;display:flex}.logo-icon{background:var(--accent);color:#000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.logo-text{color:var(--text);letter-spacing:-.02em;font-size:20px;font-weight:800}.sidebar-library{flex-direction:column;flex:1;gap:2px;padding:0 8px 8px;display:flex;overflow-y:auto}.sidebar-library-header{color:var(--text2);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 8px 6px;font-size:12px;font-weight:700;display:flex}.sidebar-new-pl{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:color .15s;display:flex}.sidebar-new-pl:hover{color:var(--text)}.sidebar-empty-lib{color:var(--text3);padding:8px;font-size:12px;font-style:italic}.sidebar-pl-item{border-radius:var(--radius);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:6px 8px;transition:background .1s;display:flex}.sidebar-pl-item:hover{background:#ffffff12}.sidebar-pl-item.active{background:#ffffff1a}.sidebar-pl-icon{background:var(--bg3);width:36px;height:36px;color:var(--text3);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.sidebar-pl-icon img{object-fit:cover;width:100%;height:100%}.sidebar-pl-info{flex-direction:column;gap:1px;min-width:0;display:flex}.sidebar-pl-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.sidebar-pl-count{color:var(--text2);font-size:11px}.main{background:var(--bg2);flex-direction:column;grid-row:1;display:flex;overflow:hidden}.main-scroll{padding-bottom:var(--tabbar-h);flex:1;overflow-y:auto}.main-topbar{padding:20px 24px 12px}.search-wrap{background:var(--bg3);border:1px solid #0000;border-radius:24px;align-items:center;gap:10px;max-width:400px;padding:0 16px;transition:border-color .15s;display:flex}.search-wrap:focus-within{border-color:#555}.search-wrap svg{color:var(--text3);flex-shrink:0}.search-input{color:var(--text);font-family:var(--font-main);background:0 0;border:none;outline:none;flex:1;padding:10px 0;font-size:14px}.search-input::placeholder{color:var(--text3)}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin}.library-header{align-items:center;gap:16px;padding:24px 24px 16px;display:flex}.library-header h2{font-size:22px;font-weight:800}.library-count{color:var(--text2);font-size:13px}.new-playlist-btn{border:1px solid var(--border);color:var(--text2);font-family:var(--font-main);cursor:pointer;background:0 0;border-radius:20px;align-items:center;gap:6px;margin-left:auto;padding:6px 14px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s;display:flex}.new-playlist-btn:hover{color:var(--text);border-color:#666}.track-list-header{border-bottom:1px solid var(--border);grid-template-columns:48px 42px 1fr 36px 60px 32px;align-items:center;margin:0 8px;padding:0 24px 8px 12px;display:grid}.track-list-header span{color:var(--text3);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.track-list-header span.right{text-align:right}.track-list{padding:4px 0 8px}.track-row{cursor:pointer;border-radius:var(--radius);grid-template-columns:48px 42px 1fr 36px 60px 32px;align-items:center;gap:8px;margin:0 8px;padding:5px 24px 5px 12px;transition:background .1s;display:grid}.track-row:hover{background:#ffffff12}.track-row.active{background:#ffffff1a}.track-index{justify-content:center;align-items:center;display:flex}.track-num{font-size:14px;font-family:var(--font-mono);color:var(--text2)}.track-thumb-wrap{flex-shrink:0;width:40px;height:40px}.track-thumb{object-fit:cover;border-radius:4px;width:40px;height:40px;display:block}.track-thumb-ph{background:var(--bg3);border-radius:4px;width:40px;height:40px}.track-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.track-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.track-title.active{color:var(--accent)}.track-artist{color:var(--text2);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.like-btn{color:var(--text3);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:color .15s,opacity .15s;display:flex}.track-row:hover .like-btn{opacity:1}.like-btn.liked{color:var(--accent);opacity:1}.like-btn:hover{color:var(--text)}.track-duration{font-size:13px;font-family:var(--font-mono);color:var(--text2);text-align:right}.more-btn{color:var(--text3);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:opacity .15s;display:flex}.track-row:hover .more-btn{opacity:1}.more-btn:hover{color:var(--text)}.playing-bars{justify-content:center;align-items:flex-end;gap:2px;height:14px;display:flex}.playing-bars span{background:var(--accent);transform-origin:bottom;border-radius:1px;width:3px;display:block}.playing-bars span:first-child{height:60%;animation:.8s infinite barDance}.playing-bars span:nth-child(2){height:100%;animation:.8s .15s infinite barDance}.playing-bars span:nth-child(3){height:70%;animation:.8s .3s infinite barDance}.playing-bars span:nth-child(4){height:40%;animation:.8s .45s infinite barDance}.grid-view{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding:8px 24px 24px;display:grid}.grid-card{background:var(--bg3);border-radius:var(--radius);cursor:pointer;flex-direction:column;gap:8px;padding:14px;transition:background .15s;display:flex}.grid-card:hover{background:var(--bg4)}.grid-card-img{aspect-ratio:1;border-radius:var(--radius);background:var(--bg);width:100%;color:var(--text3);justify-content:center;align-items:center;display:flex;overflow:hidden}.grid-card-img.circle{border-radius:50%}.grid-card-img img{object-fit:cover;width:100%;height:100%;display:block}.grid-card-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.grid-card-sub{color:var(--text2);font-size:12px}.back-btn{color:var(--text2);font-family:var(--font-main);cursor:pointer;background:0 0;border:none;padding:16px 24px 0;font-size:13px;font-weight:600;transition:color .15s;display:block}.back-btn:hover{color:var(--text)}.playlist-header{padding-bottom:8px}.playlist-hero{background:linear-gradient(#ffffff0d 0%,#0000 100%);align-items:flex-end;gap:24px;padding:16px 24px 20px;display:flex}.playlist-hero-art{border-radius:var(--radius);background:var(--bg3);width:140px;height:140px;color:var(--text3);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden;box-shadow:0 8px 24px #00000080}.playlist-hero-art img{object-fit:cover;width:100%;height:100%}.playlist-hero-info{flex-direction:column;gap:6px;display:flex}.playlist-hero-label{color:var(--text);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700}.playlist-hero-name{color:var(--text);font-size:36px;font-weight:800;line-height:1.1}.playlist-hero-count{color:var(--text2);font-size:13px}.playlist-hero-actions{align-items:center;gap:12px;margin-top:8px;display:flex}.big-play-btn{background:var(--accent);color:#000;font-family:var(--font-main);cursor:pointer;border:none;border-radius:24px;align-items:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:700;transition:background .15s,transform .1s;display:flex}.big-play-btn:hover{background:var(--accent-h);transform:scale(1.02)}.icon-action-btn{border:1px solid var(--border);width:36px;height:36px;color:var(--text2);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:flex}.icon-action-btn:hover{color:var(--text);border-color:#666}.icon-action-btn.danger:hover{color:#ff4d4d;border-color:#ff4d4d}.tab-bar{bottom:var(--player-h);height:var(--tabbar-h);border-top:1px solid var(--border);z-index:10;background:#000;align-items:stretch;display:flex;position:absolute;left:240px;right:0}.tab-btn{cursor:pointer;color:var(--text3);font-family:var(--font-main);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;transition:color .15s;display:flex}.tab-btn:hover{color:var(--text2)}.tab-btn.active{color:var(--accent)}.tab-icon{justify-content:center;align-items:center;display:flex}.tab-label{letter-spacing:.02em;font-size:10px;font-weight:600}.player{border-top:1px solid var(--border);background:#181818;grid-area:2/1/auto/-1;grid-template-columns:300px 1fr 200px;align-items:center;gap:12px;padding:0 20px;display:grid}.player-left{align-items:center;gap:12px;min-width:0;display:flex}.player-artwork{background:var(--bg3);border-radius:4px;flex-shrink:0;width:56px;height:56px;overflow:hidden}.player-artwork img{object-fit:cover;width:100%;height:100%;display:block}.player-artwork-ph{width:100%;height:100%;color:var(--text3);justify-content:center;align-items:center;display:flex}.player-track-info{flex-direction:column;gap:2px;min-width:0;display:flex}.player-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.player-artist{color:var(--text2);font-size:11px}.player-quality{font-size:10px;font-family:var(--font-mono);color:var(--accent);margin-top:1px}.player-empty{color:var(--text3);font-size:13px;font-family:var(--font-mono)}.player-like{color:var(--text3);opacity:1;margin-left:4px}.player-like.liked{color:var(--accent)}.player-center{flex-direction:column;align-items:center;gap:6px;display:flex}.player-controls{align-items:center;gap:8px;display:flex}.ctrl-btn{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:color .15s;display:flex}.ctrl-btn:hover:not(:disabled){color:var(--text)}.ctrl-btn:disabled{opacity:.3;cursor:default}.ctrl-btn.secondary{color:var(--text3)}.ctrl-btn.secondary.active{color:var(--accent)}.play-btn{background:var(--text);color:#000;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:transform .1s,background .15s;display:flex}.play-btn:hover{background:#fff;transform:scale(1.06)}.progress-row{align-items:center;gap:8px;width:100%;max-width:520px;display:flex}.time-label{font-size:11px;font-family:var(--font-mono);color:var(--text3);flex-shrink:0;width:32px}.time-label.right{text-align:right}.progress-track{background:var(--bg3);cursor:pointer;border-radius:2px;flex:1;height:4px;transition:height .15s}.progress-track:hover{height:6px}.progress-fill{background:var(--text);pointer-events:none;border-radius:2px;height:100%;transition:width .1s linear}.progress-track:hover .progress-fill{background:var(--accent)}.player-right{justify-content:flex-end;align-items:center;gap:8px;display:flex}.volume-slider{-webkit-appearance:none;background:var(--bg3);cursor:pointer;border-radius:2px;outline:none;width:90px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);cursor:pointer;border-radius:50%;width:12px;height:12px}.volume-slider::-moz-range-thumb{background:var(--text);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px}.ctx-menu{z-index:1000;border-radius:var(--radius);background:#282828;border:1px solid #444;min-width:200px;padding:4px;animation:.1s fadeIn;position:fixed;box-shadow:0 8px 24px #0009}.ctx-item{width:100%;color:var(--text);font-family:var(--font-main);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;gap:10px;padding:9px 12px;font-size:13px;transition:background .1s;display:flex}.ctx-item:hover{background:#ffffff1a}.ctx-item.danger{color:#ff4d4d}.ctx-item.danger:hover{background:#ff4d4d1a}.ctx-icon{color:var(--text2);align-items:center;display:flex}.ctx-divider{background:var(--border);height:1px;margin:4px 0}.modal-overlay{z-index:2000;background:#000000b3;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg3);border-radius:12px;min-width:360px;overflow:hidden;box-shadow:0 16px 48px #000c}.modal-header{justify-content:space-between;align-items:center;padding:20px 20px 0;display:flex}.modal-title{font-size:18px;font-weight:700}.modal-close{color:var(--text2);cursor:pointer;background:0 0;border:none;padding:4px;font-size:18px;line-height:1;transition:color .15s}.modal-close:hover{color:var(--text)}.modal-body{flex-direction:column;gap:16px;padding:16px 20px 20px;display:flex}.modal-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);font-family:var(--font-main);outline:none;padding:10px 14px;font-size:14px;transition:border-color .15s}.modal-input:focus{border-color:var(--accent)}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.modal-btn{font-family:var(--font-main);cursor:pointer;border:none;border-radius:20px;padding:9px 20px;font-size:14px;font-weight:700;transition:background .15s,opacity .15s}.modal-btn.primary{background:var(--accent);color:#000}.modal-btn.primary:hover{background:var(--accent-h)}.modal-btn.primary:disabled{opacity:.4;cursor:default}.modal-btn.secondary{color:var(--text);border:1px solid var(--border);background:0 0}.modal-btn.secondary:hover{border-color:#666}.info-msg{border-radius:var(--radius);margin:0 24px 8px;padding:10px 14px;font-size:13px}.info-msg.error{color:#ff6b6b;background:#ff3c3c1a;border:1px solid #ff3c3c4d}.info-msg.loading{color:var(--accent);font-family:var(--font-mono);background:0 0;border:none;font-size:12px;animation:1.2s infinite pulse}.empty-state{color:var(--text3);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:60px 20px;font-size:14px;line-height:1.6;display:flex}.empty-state svg{opacity:.4;width:48px;height:48px}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes barDance{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.home-header{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:12px;padding:20px 24px 12px;display:flex}.home-sections{gap:8px;display:flex}.home-section-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-family:var(--font-main);cursor:pointer;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s,background .15s}.home-section-btn:hover{color:var(--text);border-color:#666}.home-section-btn.active{background:var(--text);color:#000;border-color:var(--text)}.country-select{background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-family:var(--font-main);cursor:pointer;border-radius:20px;outline:none;padding:7px 14px;font-size:13px;transition:border-color .15s}.country-select:focus{border-color:#666}.country-select option{background:var(--bg3)}.home-loading{color:var(--text3);align-items:center;gap:12px;padding:40px 24px;font-size:14px;display:flex}.spinner-sm{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:12px;height:12px;animation:.7s linear infinite spin;display:inline-block}.home-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding:8px 24px 24px;display:grid}.home-card{background:var(--bg3);border-radius:var(--radius);cursor:pointer;flex-direction:column;gap:10px;padding:12px;transition:background .15s;display:flex}.home-card:hover{background:var(--bg4)}.home-card.active{background:#1db9541a}.home-card-art{aspect-ratio:1;background:var(--bg);border-radius:4px;flex-shrink:0;width:100%;position:relative;overflow:hidden}.home-card-art img{object-fit:cover;width:100%;height:100%;transition:transform .2s;display:block}.home-card:hover .home-card-art img{transform:scale(1.03)}.home-card-art-ph{width:100%;height:100%;color:var(--text3);justify-content:center;align-items:center;display:flex}.home-card-overlay{opacity:0;background:#0006;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.home-card:hover .home-card-overlay,.home-card.active .home-card-overlay{opacity:1}.home-card-play-icon{color:#fff;text-shadow:0 2px 8px #00000080;font-size:32px;line-height:1}.home-card-info{flex-direction:column;gap:3px;display:flex}.home-card-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.home-card-artist{color:var(--text2);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.home-card-plays{color:var(--text3);font-size:11px;font-family:var(--font-mono);margin-top:1px}.search-clear{color:var(--text3);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:4px 6px;font-size:14px;line-height:1;transition:color .15s}.search-clear:hover{color:var(--text)}.history-dropdown{border-radius:var(--radius);z-index:100;background:#282828;border:1px solid #444;max-width:400px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 8px 24px #00000080}.main-topbar{position:relative}.history-header{color:var(--text3);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:10px 14px 6px;font-size:11px;font-weight:700;display:flex}.history-clear-all{color:var(--text3);cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:11px;transition:color .15s}.history-clear-all:hover{color:var(--text)}.history-item{cursor:pointer;align-items:center;gap:10px;padding:9px 14px;transition:background .1s;display:flex}.history-item:hover{background:#ffffff12}.history-icon{color:var(--text3);flex-shrink:0}.history-text{color:var(--text);flex:1;font-size:13px}.history-remove{color:var(--text3);cursor:pointer;opacity:0;background:0 0;border:none;padding:2px 4px;font-size:12px;transition:opacity .15s,color .15s}.history-item:hover .history-remove{opacity:1}.history-remove:hover{color:var(--text)}.load-more-wrap{justify-content:center;padding:16px 0 24px;display:flex}.load-more-btn{border:1px solid var(--border);color:var(--text2);font-family:var(--font-main);cursor:pointer;background:0 0;border-radius:20px;align-items:center;gap:8px;padding:9px 28px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s;display:flex}.load-more-btn:hover:not(:disabled){color:var(--text);border-color:#666}.load-more-btn:disabled{opacity:.5;cursor:default}.progress-track{position:relative}.progress-thumb{background:var(--text);pointer-events:none;opacity:0;border-radius:50%;width:12px;height:12px;transition:opacity .15s;position:absolute;top:50%;transform:translate(-50%,-50%)}.progress-track:hover .progress-thumb{opacity:1}.progress-track{cursor:pointer;-webkit-user-select:none;user-select:none}.track-drag-handle{color:var(--text3);cursor:grab;opacity:0;flex-shrink:0;justify-content:center;align-items:center;width:20px;padding:0 4px;transition:opacity .15s;display:flex}.track-row.draggable:hover .track-drag-handle{opacity:1}.track-row.draggable{cursor:default}.track-row[draggable=true]:active{opacity:.5}.play-all-btn{background:var(--accent);color:#000;font-family:var(--font-main);cursor:pointer;border:none;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;margin-left:auto;padding:8px 20px;font-size:13px;font-weight:700;transition:background .15s,transform .1s;display:flex}.play-all-btn:hover{background:var(--accent-h);transform:scale(1.02)}.home-header{flex-wrap:nowrap}.home-header-right{flex-shrink:0;align-items:center;gap:10px;margin-left:auto;display:flex}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--font-main:"Circular", "Syne", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"DM Mono", "Courier New", monospace}html,body,#root{width:100%;height:100%}body{color:#fff;font-family:var(--font-main);-webkit-font-smoothing:antialiased;background:#121212;overflow:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}