:root{--bg:#121212;--bg-raised:#1c1c1e;--bg-hover:#2a2a2d;--border:#2e2e32;--text:#f2f2f2;--text-muted:#9a9aa2;--accent:#1fb2a6;--accent-hover:#2bd4c5;--error:#ff6b6b;--player-h:84px;--sidebar-w:240px}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}input{font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:10px 12px}input:focus{outline:2px solid var(--accent);border-color:#0000}.muted{color:var(--text-muted)}.error{color:var(--error)}.empty,.loading{color:var(--text-muted);text-align:center;padding:24px 0}.app{grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:calc(100vh - var(--player-h)) var(--player-h);height:100vh;display:grid}.main{padding:28px 32px;overflow-y:auto}.auth{place-items:center;min-height:100vh;display:grid}.auth-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:12px;width:min(360px,90vw);padding:32px;display:flex}.auth-card h1{text-align:center;color:var(--accent);margin:0}.auth-card .tagline{text-align:center;color:var(--text-muted);margin:0 0 8px}.tabs{gap:8px;display:flex}.tabs button{color:var(--text-muted);border-radius:8px;flex:1;padding:8px}.tabs button.active{background:var(--bg-hover);color:var(--text)}.primary{background:var(--accent);color:#08211e;border-radius:999px;padding:10px 20px;font-weight:600}.primary:hover:not(:disabled){background:var(--accent-hover)}.primary:disabled{opacity:.6;cursor:default}.sidebar{border-right:1px solid var(--border);background:#0c0c0d;flex-direction:column;padding:20px 12px;display:flex;overflow-y:auto}.logo{color:var(--accent);padding:0 12px 20px;font-size:22px;font-weight:700}.sidebar nav{flex-direction:column;gap:2px;display:flex}.sidebar nav>button,.playlists li button{text-align:left;color:var(--text-muted);border-radius:8px;width:100%;padding:9px 12px}.sidebar nav>button:hover,.playlists li button:hover{background:var(--bg-hover);color:var(--text)}.sidebar nav>button.active,.playlists li button.active{background:var(--bg-hover);color:var(--accent)}.playlists{flex:1;margin-top:24px}.playlists-head{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;padding:0 12px 8px;font-size:13px;display:flex}.playlists-head button{font-size:16px}.playlists-head button:hover{color:var(--accent)}.playlists form{padding:0 8px 8px}.playlists form input{width:100%;padding:7px 10px}.playlists ul{margin:0;padding:0;list-style:none}.user{border-top:1px solid var(--border);color:var(--text-muted);flex-direction:column;gap:6px;padding:12px 12px 0;font-size:13px;display:flex}.user span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user button{text-align:left;color:var(--text-muted);padding:0}.user button:hover{color:var(--error)}.view-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;display:flex}.view-head h1{margin:0;font-size:28px}.view-head .subtitle{color:var(--text-muted);margin:4px 0 0}.view-head .rename{font-size:24px;font-weight:700}.search{width:min(380px,100%)}.head-actions{align-items:center;gap:8px;display:flex}.head-actions button:not(.primary){border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:9px 18px}.head-actions button:not(.primary):hover{color:var(--error);border-color:var(--error)}.intro{color:var(--text-muted);max-width:560px}.tracklist{border-collapse:collapse;width:100%}.tracklist th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border);padding:8px 10px;font-size:12px}.tracklist td{border-bottom:1px solid #1a1a1c;padding:9px 10px}.tracklist tbody tr:hover{background:var(--bg-raised)}.tracklist tr.current td{color:var(--accent)}.tracklist .title{font-weight:500}.tracklist .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-muted)}.play-btn{opacity:0;color:var(--accent)}.tracklist tr:hover .play-btn,.tracklist tr.current .play-btn{opacity:1}.row-actions{text-align:right;white-space:nowrap}.row-actions>button,.menu summary{color:var(--text-muted);padding:2px 6px}.row-actions>button:hover{color:var(--error)}.menu{display:inline-block;position:relative}.menu summary{cursor:pointer;list-style:none}.menu summary::-webkit-details-marker{display:none}.menu summary:hover{color:var(--accent)}.menu ul{z-index:10;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;min-width:180px;max-height:240px;margin:4px 0 0;padding:6px;list-style:none;position:absolute;right:0;overflow-y:auto;box-shadow:0 8px 24px #00000080}.menu ul button{text-align:left;border-radius:6px;width:100%;padding:7px 10px;display:block}.menu ul button:hover{background:var(--bg-hover);color:var(--accent)}.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;display:grid}.card{text-align:left;background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;display:flex}.card:hover{background:var(--bg-hover)}.card strong{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.card span{color:var(--text-muted);font-size:13px}.card-art{aspect-ratio:1;width:100%;color:var(--accent);border:1px solid var(--border);background:linear-gradient(135deg,#17323016,#1fb2a622);border-radius:8px;place-items:center;margin-bottom:8px;font-size:42px;display:grid}.card-art.round{border-radius:50%}.cloud-account{background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:14px 16px;display:flex}.cloud-account>div:first-child{flex-direction:column;gap:2px;display:flex}.scan-status{margin:16px 0}.scan-status progress{width:min(420px,100%);accent-color:var(--accent)}.cloud-form{background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:12px;max-width:460px;margin-top:24px;padding:20px;display:flex}.cloud-form h2{margin:0;font-size:18px}.cloud-form label{color:var(--text-muted);flex-direction:column;gap:5px;font-size:14px;display:flex}.cloud-form .muted{margin:0;font-size:13px}.player{background:var(--bg-raised);border-top:1px solid var(--border);grid-column:1/-1;grid-template-columns:1fr auto 2fr auto;align-items:center;gap:20px;padding:0 20px;display:grid}.now{flex-direction:column;gap:2px;min-width:0;display:flex}.now strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.controls{align-items:center;gap:6px;display:flex}.controls button{color:var(--text-muted);padding:6px;font-size:18px}.controls button:hover:not(:disabled){color:var(--text)}.controls button:disabled{opacity:.4;cursor:default}.controls .big{background:var(--accent);color:#08211e;border-radius:50%;place-items:center;width:44px;height:44px;font-size:20px;display:grid}.controls .big:hover:not(:disabled){background:var(--accent-hover);color:#08211e}.progress{align-items:center;gap:10px;display:flex}.progress input{accent-color:var(--accent);flex:1}.progress .num{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:12px}.volume{align-items:center;gap:8px;display:flex}.volume input{width:90px;accent-color:var(--accent)}@media (width<=720px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr var(--player-h);height:100dvh}.sidebar{flex-direction:row;align-items:center;gap:8px;padding:10px;overflow-x:auto}.sidebar nav{flex-direction:row}.logo{padding:0 8px;font-size:18px}.playlists{display:none}.user{border:none;display:none}.main{padding:16px}.tracklist td:nth-child(4),.tracklist th:nth-child(4){display:none}.player{grid-template-columns:1fr auto}.progress,.volume{display:none}}