:root{--background:#0e0d13;--surface:#17151f;--surface-raised:#211e2c;--border:#2c2839;--text:#ecebf2;--text-muted:#9893aa;--accent:#b9a6ff;--accent-strong:#8f75ff;--danger:#ff7a8a;--success:#7be0a8;--player-height:84px;--sidebar-width:220px;color:var(--text);background:var(--background);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--background);margin:0}a{color:inherit}h1{margin:0;font-size:1.8rem}h2{margin:1.5rem 0 .75rem;font-size:1.15rem}code{background:var(--surface-raised);word-break:break-all;border-radius:4px;padding:.1em .35em}.muted{color:var(--text-muted)}.small{font-size:.85rem}.error{color:var(--danger)}.logo{letter-spacing:.08em;color:var(--accent);font-size:1.3rem;font-weight:700}.shell{grid-template-columns:var(--sidebar-width) 1fr;height:100vh;padding-bottom:var(--player-height);display:grid}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;gap:.25rem;padding:1.25rem 1rem;display:flex;overflow-y:auto}.sidebar .logo{margin-bottom:1rem}.sidebar a{color:var(--text-muted);border-radius:8px;padding:.5rem .75rem;text-decoration:none}.sidebar a:hover{color:var(--text)}.sidebar a.active{background:var(--surface-raised);color:var(--text)}.search{margin-bottom:.75rem}.content{padding:1.5rem 2rem 2rem;overflow-y:auto}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.input{background:var(--surface-raised);border:1px solid var(--border);color:var(--text);font:inherit;border-radius:8px;width:100%;max-width:320px;padding:.5rem .75rem}.input:focus{outline:2px solid var(--accent-strong);outline-offset:-1px}.button{background:var(--surface-raised);border:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer;white-space:nowrap;border-radius:999px;padding:.5rem 1rem}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:default}.button.primary{background:var(--accent);border-color:var(--accent);color:#15111f;font-weight:600}.button.danger{color:var(--danger)}.button.small{padding:.3rem .75rem;font-size:.85rem}.button.active{border-color:var(--accent);color:var(--accent)}.button-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.icon-button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1rem;display:inline-flex}.icon-button:hover:not(:disabled){color:var(--text);background:var(--surface-raised)}.icon-button:disabled{opacity:.35;cursor:default}.art{aspect-ratio:1;object-fit:cover;background:var(--surface-raised);border-radius:8px;width:100%;display:block}.art-placeholder{background:linear-gradient(135deg, var(--surface-raised), var(--border))}.mosaic{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.mosaic img{object-fit:cover;width:100%;height:100%;display:block}.album-card:hover .mosaic{outline:2px solid var(--accent)}.album-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.25rem;display:grid}.album-card{min-width:0;text-decoration:none}.album-card:hover .art{outline:2px solid var(--accent)}.album-card-title{white-space:nowrap;text-overflow:ellipsis;margin-top:.5rem;font-weight:600;overflow:hidden}.album-card-subtitle{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.plain-list{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.plain-list a{font-weight:500;text-decoration:none}.plain-list a:hover{color:var(--accent)}.detail-header{flex-wrap:wrap;align-items:flex-end;gap:2rem;margin-bottom:1.5rem;display:flex}.detail-art{flex-shrink:0;width:220px;box-shadow:0 10px 40px #00000080}.detail-info{flex-direction:column;gap:.6rem;min-width:0;display:flex}.detail-info p{margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-size:.75rem}.track-list{margin:0;padding:0;list-style:none}.track-row{border-radius:8px;align-items:center;gap:1rem;padding:.4rem .75rem;display:flex}.track-row:hover{background:var(--surface)}.track-row.active .track-title{color:var(--accent)}.track-number{text-align:right;width:2.5rem;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0}.track-main{flex-direction:column;flex:1;min-width:0;display:flex}.track-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-subtitle{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.track-subtitle a{text-decoration:none}.track-subtitle a:hover{text-decoration:underline}.track-duration{color:var(--text-muted);font-variant-numeric:tabular-nums}.track-actions{opacity:.35;display:flex}.track-row:hover .track-actions,.track-actions:focus-within{opacity:1}.badge{border:1px solid var(--border);color:var(--text-muted);vertical-align:middle;border-radius:4px;margin-left:.5rem;padding:.1rem .35rem;font-size:.65rem}.menu-anchor{position:relative}.menu{z-index:20;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;min-width:200px;max-height:300px;padding:.25rem;position:absolute;top:100%;right:0;overflow-y:auto;box-shadow:0 10px 30px #00000080}.menu button{text-align:left;width:100%;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.5rem .75rem;display:block}.menu button:hover{background:var(--border)}.menu-note{color:var(--text-muted);padding:.5rem .75rem}.player-bar{height:var(--player-height);background:var(--surface);border-top:1px solid var(--border);z-index:10;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:1rem;padding:0 1.25rem;display:grid;position:fixed;bottom:0;left:0;right:0}.now-playing{align-items:center;gap:.75rem;min-width:0;display:flex}.now-playing-art{border-radius:6px;flex-shrink:0;width:56px}.now-playing-text{min-width:0}.transport{flex-direction:column;align-items:center;gap:.25rem;display:flex}.transport-buttons{gap:.5rem;display:flex}.play-button{background:var(--text);color:var(--background)}.play-button:hover:not(:disabled){background:var(--accent);color:var(--background)}.seek{align-items:center;gap:.75rem;width:100%;display:flex}.seek input{flex:1}.time{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:center;min-width:3rem;font-size:.8rem}input[type=range]{accent-color:var(--accent)}.player-extras{justify-content:flex-end;align-items:center;gap:.5rem;display:flex}.volume{width:100px}.side-panel{top:0;right:0;bottom:var(--player-height);background:var(--surface);border-left:1px solid var(--border);z-index:9;flex-direction:column;width:min(420px,100vw);display:flex;position:fixed;box-shadow:-10px 0 40px #0006}@media (width>=1000px){.shell:has(.side-panel) .content{margin-right:min(420px,100vw)}.side-panel{box-shadow:none}}.side-panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.side-panel-header h2{margin:0}.side-panel-body{flex:1;padding:1rem;overflow-y:auto}.lyrics-plain{white-space:pre-wrap;margin:0;font-family:inherit;line-height:1.7}.lyrics-synced{gap:.6rem;margin:0;padding:0;font-size:1.15rem;list-style:none;display:grid}.lyrics-synced li{color:var(--text-muted);transition:color .2s}.lyrics-synced button{all:unset;cursor:pointer;display:block}.lyrics-synced button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}.lyrics-synced li.past{color:color-mix(in srgb, var(--text-muted) 60%, transparent)}.lyrics-synced li.active{color:var(--text);font-weight:600}.queue{margin:0;padding:0;list-style:none}.queue li{border-radius:6px;align-items:center;display:flex}.queue li.active .track-title{color:var(--accent)}.queue-item{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-direction:column;flex:1;align-items:flex-start;padding:.4rem .5rem;display:flex}.queue-item:hover{background:var(--surface-raised)}.queue-item .track-title,.queue-item .track-subtitle{max-width:100%}.toasts{bottom:calc(var(--player-height) + 1rem);z-index:30;pointer-events:none;flex-direction:column;gap:.5rem;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--surface-raised);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;max-width:90vw;padding:.6rem 1rem;box-shadow:0 10px 30px #00000080}.toast-success{border-left-color:var(--success)}.toast-error{border-left-color:var(--danger)}.login{place-items:center;height:100vh;display:grid}.login-form{text-align:center;flex-direction:column;gap:.75rem;width:min(320px,90vw);display:flex}.login-form .input{max-width:none}@media (width<=760px){.shell{grid-template-rows:auto 1fr;grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);flex-flow:wrap;align-items:center;padding:.75rem}.sidebar .logo{margin:0 .5rem 0 0}.search{order:10;width:100%;margin:.25rem 0 0}.search .input{max-width:none}.content{padding:1rem}:root{--player-height:150px}.player-bar{grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:.25rem .5rem;padding:.5rem .75rem}.transport{display:contents}.transport .seek{grid-area:2/1/auto/-1}.player-extras{grid-area:3/1/auto/-1;justify-content:center}.volume{display:none}.detail-art{width:160px}.track-duration{display:none}}.missing-entry{color:var(--text-muted);align-items:center;gap:.5rem;display:flex}