*{box-sizing:border-box}body{margin:0;background:#0f1115;color:#eef2f7;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:#7dd3fc}button{background:#2563eb;color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:600}
button.secondary{background:#1f2937;color:#e5e7eb}button.danger{background:#dc2626}button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #334155;background:#1e293b;color:#fff;font-size:15px;font-family:inherit}
.card{background:#171b22;border:1px solid #263042;border-radius:14px;padding:14px}
.topbar{position:sticky;top:0;background:#0f1115e6;backdrop-filter:blur(6px);padding:12px 16px;border-bottom:1px solid #263042;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:10}
.wrap{max-width:1100px;margin:0 auto;padding:16px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}
.pill.playing{background:#14532d}.pill.paused{background:#78350f}.pill.waiting,.pill.idle{background:#334155}.pill.offline{background:#450a0a}.pill.error{background:#7f1d1d}
.row{display:flex;gap:10px;align-items:center}.thumb{width:64px;height:48px;object-fit:cover;border-radius:8px;background:#222}
.progress{height:8px;background:#263042;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:#22c55e}
.small{color:#94a3b8;font-size:13px}.title{font-weight:700;line-height:1.3}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#111827;border:1px solid #374151;padding:10px 16px;border-radius:99px;z-index:50}
.qr{width:180px;height:180px;background:#fff;border-radius:12px;padding:8px}
@media(max-width:600px){.grid{grid-template-columns:1fr}}