:root{font-family:system-ui,sans-serif;color:#e7edf3;background:#101820;color-scheme:dark}*{box-sizing:border-box}body{margin:0;padding:24px 28px 150px}header{display:flex;align-items:center;gap:20px;border-bottom:1px solid #35434f;padding-bottom:20px}h1{font-size:26px;margin:0;flex:1}small{display:block;font-size:13px;color:#a6b7c5;font-weight:400;margin-top:6px}h2{font-size:19px}button,input,select{font:inherit;padding:9px 12px;border-radius:7px;border:1px solid #455866;background:#20303d;color:inherit}button{cursor:pointer}button:hover{background:#345164}button:disabled{opacity:.4;cursor:default}input{min-width:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #74d5c8}main{display:grid;grid-template-columns:220px minmax(300px,1fr) 260px;gap:24px}nav,#playlists{display:grid;gap:7px}#new-playlist{display:grid;gap:8px}#search{display:flex;gap:8px}#query{flex:1}#message{min-height:24px;color:#ffd59b}#auth{max-width:440px;margin:50px auto}label{display:grid;gap:8px;margin:20px 0}#auth input{width:100%}.track{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #2b3b47}.cover{width:52px;height:52px;object-fit:cover;border-radius:6px;background:#283c4b;display:grid;place-items:center;flex-shrink:0}.info{flex:1;min-width:80px;overflow-wrap:anywhere}.muted{font-size:13px;color:#a6b7c5}.track-actions{display:flex;gap:4px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.card{text-align:left;padding:16px}.card .cover{width:100%;height:150px;margin-bottom:12px}.card span{display:block}.queue ol{padding-left:24px}.queue li{margin:10px 0}.queue li button{padding:4px 7px;font-size:13px}.active{color:#80e1cd}footer{position:fixed;bottom:0;left:0;right:0;background:#1c2b36;border-top:1px solid #455866;padding:12px 28px}.controls{display:flex;gap:12px;align-items:center;margin-top:8px}audio{width:min(650px,80vw)}#actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}[hidden]{display:none!important}@media(max-width:1000px){main{grid-template-columns:190px 1fr}.queue{grid-column:1/-1}}@media(max-width:650px){body{padding:16px 16px 165px}main{display:block}aside{margin-bottom:24px}nav{display:flex}.track{flex-wrap:wrap}.track-actions{width:100%}small{display:none}header{gap:8px}footer{padding:12px}}