:root{--sp-black:#121212;--sp-elevated:#181818;--sp-highlight:#282828;--sp-border:#ffffff1a;--sp-text:#fff;--sp-subdued:#b3b3b3;--sp-muted:#6a6a6a;--sp-green:#1db954;--sp-green-hover:#1ed760;--sp-danger:#e91429;--sidebar-w:240px;--player-h:112px;--player-h-mobile:148px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--touch-min:44px;--radius:8px;--radius-lg:12px}*{box-sizing:border-box}button,[role=button]{touch-action:manipulation}html{height:100%}body{background:var(--sp-black);height:100%;color:var(--sp-text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:#ffffff14;margin:0;font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45}#root{height:100%}::selection{background:#1db95459}.app-shell{grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:minmax(0,1fr) auto;height:100%;max-height:100dvh;display:grid;overflow:hidden}.sidebar{background:var(--sp-black);border-right:1px solid var(--sp-border);min-height:0;padding:calc(1.25rem + var(--safe-top)) calc(.75rem + var(--safe-right)) 1.25rem calc(.75rem + var(--safe-left));flex-direction:column;grid-area:1/1;gap:1.5rem;display:flex;overflow-y:auto}.sidebar-brand{letter-spacing:-.04em;color:var(--sp-text);padding:0 .65rem;font-size:1.35rem;font-weight:700}.sidebar-brand span{color:var(--sp-green)}.sidebar-nav{flex-direction:column;gap:.2rem;display:flex}.sidebar-nav button{border-radius:var(--radius);width:100%;color:var(--sp-subdued);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.75rem;padding:.55rem .65rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:color .15s,background .15s;display:flex}.sidebar-nav button:hover{color:var(--sp-text)}.sidebar-nav button.active{color:var(--sp-text);background:var(--sp-highlight)}.sidebar-nav svg{opacity:.85;width:22px;height:22px}.sidebar-logout{margin-top:auto;padding:0 .65rem}.sidebar-logout .btn-ghost-small{width:100%;padding:.4rem .65rem;font-size:.78rem}.sidebar-footer{border-radius:var(--radius);background:var(--sp-elevated);color:var(--sp-muted);margin-top:0;padding:.75rem .65rem;font-size:.75rem;line-height:1.4}.sidebar-footer .dot{vertical-align:middle;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.sidebar-footer .dot.ok{background:var(--sp-green);box-shadow:0 0 8px #1db95480}.sidebar-footer .dot.bad{background:var(--sp-danger)}.main-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:linear-gradient(180deg, #1e1e1e 0%, var(--sp-black) 220px);grid-area:1/2;min-height:0;padding-bottom:1rem;overflow:hidden auto}.main-inner{max-width:1100px;padding:1.25rem max(1.5rem, var(--safe-right)) 2rem max(1.5rem, var(--safe-left));margin:0 auto}.toast-err{margin:0 max(1.5rem, var(--safe-right)) 1rem max(1.5rem, var(--safe-left));border-radius:var(--radius);color:#ffb4bc;background:#e914291f;border:1px solid #e9142959;max-width:1100px;margin-left:auto;margin-right:auto;padding:.75rem 1rem;font-size:.875rem}.auth-wrap{max-width:420px;margin:0 auto;padding-top:2.5rem}.auth-panel .page-title{text-align:center}.auth-tabs{gap:.35rem;margin-bottom:1.25rem;display:flex}.auth-tabs button{border-radius:var(--radius);border:1px solid var(--sp-border);color:var(--sp-subdued);cursor:pointer;background:0 0;flex:1;padding:.45rem .65rem;font-family:inherit;font-size:.85rem;font-weight:600}.auth-tabs button.active{color:var(--sp-text);background:var(--sp-highlight);border-color:var(--sp-subdued)}.auth-label{color:var(--sp-subdued);flex-direction:column;gap:.35rem;margin-bottom:.85rem;font-size:.8rem;font-weight:600;display:flex}.auth-label input{border-radius:var(--radius);border:1px solid var(--sp-border);background:var(--sp-highlight);color:var(--sp-text);padding:.55rem .75rem;font-family:inherit;font-size:.9rem}.auth-hint{color:var(--sp-muted);font-weight:400}.auth-submit{width:100%;margin-top:.25rem}.search-section-title{color:var(--sp-subdued);letter-spacing:-.02em;margin:1.5rem 0 .25rem;font-size:1.05rem;font-weight:700}.track-row-local{grid-template-columns:28px minmax(0,1fr) 72px 52px}.page-title{letter-spacing:-.03em;margin:0 0 .25rem;font-size:2rem;font-weight:700}.page-sub{color:var(--sp-subdued);margin:0 0 1.5rem;font-size:.9rem}.search-hero{margin-bottom:1.5rem;position:relative}.search-hero input{background:var(--sp-highlight);width:100%;color:var(--sp-text);border:none;border-radius:999px;outline:none;padding:.85rem 1rem .85rem 2.75rem;font-family:inherit;font-size:.95rem;transition:box-shadow .2s,background .2s;box-shadow:0 0 0 1px #0000}.search-hero input::placeholder{color:var(--sp-muted)}.search-hero input:focus{box-shadow:0 0 0 2px var(--sp-text);background:#3e3e3e}.search-hero .search-icon{width:20px;height:20px;color:var(--sp-muted);pointer-events:none;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-actions{flex-wrap:wrap;gap:.5rem;margin-top:.75rem;display:flex}.btn-primary{background:var(--sp-green);color:#000;cursor:pointer;border:none;border-radius:999px;padding:.55rem 1.35rem;font-family:inherit;font-size:.875rem;font-weight:700;transition:transform .1s,background .15s}.btn-primary:hover:not(:disabled){background:var(--sp-green-hover);transform:scale(1.02)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-ghost{border:1px solid var(--sp-border);color:var(--sp-subdued);cursor:pointer;background:0 0;border-radius:999px;padding:.5rem 1rem;font-family:inherit;font-size:.8rem;font-weight:600}.btn-ghost:hover:not(:disabled){color:var(--sp-text);border-color:var(--sp-subdued)}.meta-line{color:var(--sp-muted);margin:.5rem 0 0;font-family:ui-monospace,monospace;font-size:.75rem}.loading-hint{color:var(--sp-subdued);margin:.75rem 0 0;font-size:.875rem}.tracklist-header{border-bottom:1px solid var(--sp-border);letter-spacing:.08em;text-transform:uppercase;color:var(--sp-muted);grid-template-columns:28px minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.85fr) minmax(0,.75fr) 72px 86px;gap:.65rem;margin-top:1rem;padding:.35rem .75rem;font-size:.7rem;font-weight:600;display:grid}.track-row{border-radius:var(--radius);grid-template-columns:28px minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.85fr) minmax(0,.75fr) 72px 86px;align-items:center;gap:.65rem;padding:.5rem .75rem;transition:background .12s;display:grid}.track-row:active{background:#ffffff12}@media (hover:hover){.track-row:hover{background:#ffffff0f}}.track-row-num{color:var(--sp-muted);text-align:center;font-size:.8rem}.track-row-title{min-width:0}.track-row-title .name{color:var(--sp-text);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.track-row-title .name-with-mb{align-items:center;gap:.4rem;min-width:0;display:flex}.track-row-title .name-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.mb-badge{letter-spacing:.05em;background:var(--sp-green);color:var(--sp-black);border-radius:4px;flex-shrink:0;padding:.1rem .3rem;font-size:.55rem;font-weight:800}.track-row-title .sub{color:var(--sp-subdued);text-overflow:ellipsis;white-space:nowrap;margin-top:.15rem;font-size:.78rem;overflow:hidden}.track-row-title .sub.mobile-meta{display:none}.track-row-user{color:var(--sp-subdued);text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;overflow:hidden}.track-row-size{color:var(--sp-muted);text-align:right;font-size:.78rem}.track-row-artist,.track-row-album{color:var(--sp-subdued);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.8rem;overflow:hidden}.track-row-artist.empty,.track-row-album.empty{color:var(--sp-muted);font-style:italic}.artist-block{margin-top:1.75rem}.artist-block:first-of-type{margin-top:.5rem}.artist-heading-row{border-bottom:1px solid var(--sp-border);align-items:center;gap:.75rem;margin-bottom:.35rem;padding:0 .75rem .45rem;display:flex}.artist-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:44px;height:44px;box-shadow:0 2px 10px #00000059}.artist-avatar-placeholder{background:linear-gradient(135deg,#3a3a3a 0%,#1f1f1f 100%)}.artist-heading{letter-spacing:-.02em;min-width:0;color:var(--sp-text);flex:1;margin:0;font-size:1.35rem;font-weight:700}.album-block{border-left:2px solid #ffffff14;margin-top:1rem;margin-left:.25rem;padding-left:.65rem}.album-heading-row{align-items:center;gap:.55rem;margin-bottom:.35rem;padding:0 .5rem;display:flex}.album-cover-sm{object-fit:cover;border-radius:4px;flex-shrink:0;width:40px;height:40px;box-shadow:0 2px 8px #0006}.album-cover-placeholder{background:var(--sp-highlight);border-radius:4px;flex-shrink:0;width:40px;height:40px}.album-heading{letter-spacing:-.02em;color:var(--sp-subdued);margin:0;font-size:1rem;font-weight:600}.tracklist-header-nested,.track-row-nested{grid-template-columns:28px minmax(0,1.45fr) minmax(0,.72fr) 72px 86px}.track-row--playable{cursor:pointer}.track-row--now-playing{background:#1db95414}@media (hover:hover){.track-row--playable:hover{background:#ffffff0f}.track-row--playable.track-row--now-playing:hover{background:#1db9541f}}.player-art-img{object-fit:cover;border-radius:4px;flex-shrink:0;box-shadow:0 4px 16px #00000073}.icon-btn{width:40px;height:40px;color:var(--sp-text);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:opacity .12s,background .12s,transform .12s;display:flex}.track-row:hover .icon-btn{opacity:1}.icon-btn:hover:not(:disabled){background:#ffffff1f;transform:scale(1.05)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.icon-btn.spot{background:var(--sp-green);color:#000;opacity:1}.icon-btn.spot:hover:not(:disabled){background:var(--sp-green-hover)}.icon-btn.danger{color:var(--sp-danger)}.icon-btn.danger:hover:not(:disabled){color:#ff4d5e;background:#e914292e}.track-row-actions{z-index:1;justify-content:flex-end;align-items:center;gap:.15rem;min-width:0;display:flex;position:relative}.player-skip-row{justify-content:center;align-items:center;gap:.5rem;width:100%;display:flex}.player-skip-btn{width:var(--touch-min,44px);height:var(--touch-min,44px);background:var(--sp-highlight);color:var(--sp-text);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:background .15s,transform .1s;display:flex}.player-skip-btn:hover:not(:disabled){background:#333}.player-skip-btn:disabled{opacity:.35;cursor:not-allowed}.player-skip-btn:active:not(:disabled){transform:scale(.96)}.empty-card{border-radius:var(--radius-lg);background:var(--sp-elevated);border:1px solid var(--sp-border);color:var(--sp-subdued);margin-top:1.5rem;padding:1.5rem;font-size:.9rem}.empty-card ul{margin:.75rem 0 0;padding-left:1.2rem}.empty-card li{margin:.35rem 0}.empty-card code{background:var(--sp-highlight);border-radius:4px;padding:.1rem .35rem;font-size:.8rem}.lib-toolbar{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-bottom:1rem;display:flex}.lib-grid{flex-direction:column;gap:.25rem;display:flex}.player-bar{height:var(--player-h);border-top:1px solid var(--sp-border);background:var(--sp-elevated);padding:0 max(1rem, var(--safe-right)) max(0, var(--safe-bottom)) max(1rem, var(--safe-left));z-index:2;flex-shrink:0;grid-area:2/1/auto/-1;grid-template-columns:minmax(180px,30%) 1fr minmax(120px,30%);align-items:center;gap:1rem;display:grid}.player-now{align-items:center;gap:.75rem;min-width:0;display:flex}.player-art{background:linear-gradient(135deg,#333 0%,#1a1a1a 100%);border-radius:4px;flex-shrink:0;width:56px;height:56px;box-shadow:0 4px 16px #00000073}.player-text{min-width:0}.player-text .t{text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;overflow:hidden}.player-text .s{color:var(--sp-subdued);margin-top:.2rem;font-size:.72rem}.player-center{flex-direction:column;align-items:center;gap:.35rem;width:100%;max-width:520px;margin:0 auto;display:flex}.player-download-row{flex-direction:column;gap:.25rem;width:100%;display:flex}.player-download-bar{background:var(--sp-border);border-radius:2px;height:4px;overflow:hidden}.player-download-bar-fill{background:var(--sp-green);border-radius:2px;min-width:0;height:100%;transition:width .25s ease-out;display:block}.player-download-text{color:var(--sp-subdued);text-align:center;font-size:.72rem;line-height:1.3}.player-center audio{border-radius:var(--radius);width:100%;height:40px;min-height:40px}.player-center audio::-webkit-media-controls-panel{background:var(--sp-highlight)}.player-wait{color:var(--sp-subdued);font-size:.8rem}.player-right{text-align:right;color:var(--sp-muted);font-size:.72rem}.debug-block{border-radius:var(--radius);border:1px solid var(--sp-border);margin-top:2rem;overflow:hidden}.debug-block summary{background:var(--sp-elevated);cursor:pointer;color:var(--sp-muted);padding:.6rem .85rem;font-size:.75rem;font-weight:600;list-style:none}.debug-block summary::-webkit-details-marker{display:none}.debug-block pre{background:var(--sp-black);max-height:200px;color:var(--sp-subdued);margin:0;padding:.75rem;font-size:.65rem;line-height:1.4;overflow:auto}@media (width<=768px){.app-shell{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--sp-border);padding:max(.65rem, var(--safe-top)) max(.75rem, var(--safe-right)) .65rem max(.75rem, var(--safe-left));grid-area:1/1;grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.55rem .5rem;display:grid}.sidebar-brand{grid-area:1/1;padding:0 .5rem;font-size:1.2rem}.sidebar-nav{flex-direction:row;grid-area:2/1/auto/-1;justify-content:stretch;gap:.35rem}.sidebar-nav button{min-height:var(--touch-min);flex:1;justify-content:center;padding:.55rem .5rem}.sidebar-logout{grid-area:1/2;place-self:center end;margin-top:0;padding:0}.sidebar-logout .btn-ghost-small{width:auto;min-height:var(--touch-min);padding:.4rem .85rem}.sidebar-footer{grid-area:3/1/auto/-1;width:100%;margin-top:0}.main-scroll{padding-bottom:max(.75rem, var(--safe-bottom));grid-area:2/1}.main-inner{padding-top:1rem;padding-bottom:1.5rem}.page-title{font-size:1.65rem}.search-hero input{min-height:var(--touch-min);padding-top:.65rem;padding-bottom:.65rem;font-size:16px}.btn-primary,.btn-ghost{min-height:var(--touch-min)}.auth-label input{min-height:var(--touch-min);font-size:16px}.player-bar{height:auto;min-height:calc(var(--player-h-mobile) + var(--safe-bottom));padding:.65rem max(.65rem, var(--safe-right)) max(.5rem, var(--safe-bottom)) max(.65rem, var(--safe-left));grid-row:3;grid-template-columns:1fr;gap:.55rem}.player-now{width:100%}.player-center{max-width:none}.player-center audio{height:44px;min-height:44px}.player-right{display:none}.tracklist-header,.track-row{padding-left:max(.5rem, var(--safe-left));padding-right:max(.5rem, var(--safe-right));grid-template-columns:24px minmax(0,1fr) minmax(0,.62fr) minmax(0,.52fr) 96px;gap:.5rem}.tracklist-header-nested,.track-row-nested{grid-template-columns:24px minmax(0,1fr) minmax(0,.55fr) minmax(0,.48fr) 96px}.tracklist-header .hide-md,.track-row .hide-md{display:none}.track-row-title .sub.mobile-meta{display:block}.track-row .icon-btn{opacity:1;width:44px;height:44px}.meta-line{word-break:break-word}.track-row-local{grid-template-columns:24px minmax(0,1fr) minmax(0,.4fr) 96px}}@media (width<=520px){.page-title{font-size:1.45rem}.search-actions{flex-direction:column}.search-actions .btn-primary,.search-actions .btn-ghost{justify-content:center;width:100%}.lib-toolbar{flex-direction:column}.lib-toolbar .btn-ghost{width:100%;min-height:var(--touch-min);justify-content:center}.tracklist-header .hide-sm,.track-row .hide-sm{display:none}.tracklist-header,.track-row{padding-left:max(.4rem, var(--safe-left));padding-right:max(.4rem, var(--safe-right));grid-template-columns:22px minmax(0,1fr) 96px}.tracklist-header-nested,.track-row-nested,.track-row-local{grid-template-columns:22px minmax(0,1fr) 96px}.artist-heading{font-size:1.15rem}.album-block{margin-left:0;padding-left:.4rem}}