@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes matchPop{0%{opacity:0;transform:translateY(8px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}*{box-sizing:border-box;margin:0;padding:0}body{color:#fafafa;background:#0a0a0a;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.loading{color:#888;justify-content:center;align-items:center;height:100vh;display:flex}.container{max-width:700px;margin:0 auto;padding:1.5rem 1rem}h1{margin-bottom:.25rem;font-size:1.6rem}.subtitle{color:#888;margin-bottom:1.5rem;font-size:.9rem}.card{background:#1a1a1a;border:1px solid #333;border-radius:12px;margin-bottom:.75rem;padding:1.25rem}.card h2{align-items:center;gap:8px;margin-bottom:.75rem;font-size:1rem;display:flex}.status{border-radius:20px;padding:3px 10px;font-size:.75rem;font-weight:500;display:inline-block}.status.connected{color:#4ade80;background:#1a3a1a}.status.disconnected{color:#f87171;background:#3a1a1a}.status.syncing{color:#facc15;background:#3a3a1a}.status.success{color:#4ade80;background:#1a3a1a}.status.error{color:#f87171;background:#3a1a1a}.status.never{color:#888;background:#2a2a2a}button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:8px 16px;font-size:.85rem}button:hover{background:#1d4ed8}button:disabled{color:#666;cursor:not-allowed;background:#333}button.secondary{color:#ccc;background:#333}button.secondary:hover{background:#444}button.danger{color:#fca5a5;background:#7f1d1d}button.danger:hover{background:#991b1b}button.small{padding:5px 10px;font-size:.78rem}.header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.user-info{align-items:center;gap:10px;display:flex}.user-info img{border-radius:50%;width:32px;height:32px}.user-info .name{font-size:.9rem;font-weight:600}select,input[type=text]{color:#fafafa;background:#222;border:1px solid #444;border-radius:8px;width:100%;margin-bottom:.5rem;padding:8px 12px;font-size:.85rem}select:focus,input:focus{border-color:#2563eb;outline:none}.pair-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.pair-info{flex:1}.pair-info .pair-name{font-size:.95rem;font-weight:600}.pair-info .pair-detail{color:#888;margin-top:2px;font-size:.8rem}.pair-actions{gap:6px;display:flex}.track-list{color:#aaa;max-height:200px;margin-top:.75rem;font-size:.8rem;overflow-y:auto}.track-list li{border-bottom:1px solid #222;padding:3px 0;list-style:none}.empty-state{text-align:center;color:#666;padding:2rem}.section-title{color:#888;text-transform:uppercase;letter-spacing:.5px;margin:1.5rem 0 .5rem;font-size:.85rem}.modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#1a1a1a;border:1px solid #333;border-radius:16px;width:90%;max-width:500px;max-height:80vh;padding:1.5rem;overflow-y:auto}.history-modal{max-width:920px;max-height:88vh}.modal h2,.form-group{margin-bottom:1rem}.form-group label{color:#888;margin-bottom:4px;font-size:.8rem;display:block}.btn-row{justify-content:flex-end;gap:8px;margin-top:1rem;display:flex}.history-song-groups{gap:1rem;display:grid}.history-section{border:1px solid #2a2a2a;border-radius:8px;padding:.8rem 1rem}.history-section h3{color:#cfcfcf;align-items:center;gap:6px;margin-bottom:.25rem;font-size:.78rem;font-weight:700;display:flex}.history-section h3 span{color:#888;font-weight:600}.history-direction-subtitle{color:#888;margin-bottom:.25rem;font-size:.72rem}.history-track-list{overflow:visible}.history-track-row{border-bottom:1px solid #2a2a2a;padding:.65rem 0;list-style:none}.history-track-row:last-child{border-bottom:none}.history-track-main{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:baseline;gap:10px;display:grid}.history-track-title{color:#e5e5e5;overflow-wrap:anywhere;font-size:.84rem;font-weight:650}.history-track-artists{color:#b5b5b5;overflow-wrap:anywhere;font-size:.78rem}.history-track-meta{color:#777;flex-wrap:wrap;gap:4px 10px;margin-top:.35rem;font-size:.7rem;display:flex}.history-direction-badge{color:#4ade80;font-weight:700}@media (width<=560px){.history-track-main{grid-template-columns:1fr;gap:3px}}