:root{--back-dark:#0f100f;--gold-light:#e6c058;--gold-mid:#9c7647;--gold-dark:#7b5729;--text-bright:#f6f4e8;--text-dark:#7c7063}*{box-sizing:border-box}html{height:100%;margin:0;padding:0;overflow:hidden}body{background-color:var(--back-dark);height:100dvh;max-height:100dvh;color:var(--text-bright);margin:0;padding:0;font-family:PT Sans Narrow,sans-serif;overflow:hidden}#root{height:100%;overflow:hidden}h1{color:var(--gold-light);text-transform:uppercase;margin:0;padding:0;font-weight:400}.track-row{cursor:pointer;border-top:1pt solid var(--gold-dark);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 min(2%,5mm);padding:10px 12px;display:grid}.track-row:first-child{border-top:none}.track-thumb{object-fit:cover;background:var(--surface2);border-radius:4px;flex-shrink:0;width:48px;height:48px}.track-info>div{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-artist{color:var(--text-dark)}.login-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{border:1px solid var(--gold-dark);border-radius:12px;flex-direction:column;gap:1rem;width:320px;padding:2rem;display:flex}.login-card h2{text-align:center;color:var(--gold-dark);margin:0}.login-form{flex-direction:column;gap:.75rem;display:flex}.login-form label{flex-direction:column;gap:4px;font-size:.875rem;display:flex}.login-form input{border:1px solid var(--gold-dark);color:inherit;background:0 0;border-radius:6px;padding:.4rem .6rem;font-size:1rem}.login-form button,.google-btn{border:1px solid var(--gold-dark);color:inherit;cursor:pointer;background:0 0;border-radius:6px;padding:.5rem;font-size:.95rem;transition:background .15s}.login-form button:hover,.google-btn:hover{background:color-mix(in srgb, var(--gold-dark) 15%, transparent)}.login-form button:disabled,.google-btn:disabled{opacity:.5;cursor:not-allowed}.login-divider{text-align:center;opacity:.6;font-size:.8rem}.login-error{color:#e55;text-align:center;word-break:break-word;margin:0;font-size:.85rem}