:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f1115;--surface:#171a21;--surface-2:#1f242e;--text:#e8eaf0;--muted:#9aa3b2;--accent:#4f8cff;--ok:#2fbf71;--warn:#e5a50a;--error:#e5534b;--radius:12px}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.page{flex-direction:column;gap:16px;max-width:780px;margin:0 auto;padding:16px;display:flex}.page-narrow{max-width:420px}.page-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.page-header h1{margin:0;font-size:1.4rem}.badge{white-space:nowrap;border-radius:999px;align-items:center;padding:4px 10px;font-size:.8rem;font-weight:600;display:inline-flex}.badge-ok{background:color-mix(in srgb, var(--ok) 20%, transparent);color:var(--ok)}.badge-warn{background:color-mix(in srgb, var(--warn) 20%, transparent);color:var(--warn)}.badge-error{background:color-mix(in srgb, var(--error) 20%, transparent);color:var(--error)}.player-section{flex-direction:column;gap:8px;display:flex}.player-frame{aspect-ratio:16/9;background:var(--surface);border-radius:var(--radius);width:100%;position:relative;overflow:hidden}.player-iframe,.player-iframe :first-child{width:100%;height:100%}.player-iframe iframe{border:0;width:100%;height:100%}.player-overlay{flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:16px;display:flex;position:absolute;inset:0}.player-thumbnail{border-radius:8px;max-width:100%;max-height:65%}.player-empty{color:var(--muted)}.join-button{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:999px;padding:12px 28px;font-size:1rem;font-weight:700}.join-button:hover{filter:brightness(1.1)}.player-meta{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.volume-control{color:var(--muted);align-items:center;gap:8px;font-size:.9rem;display:flex}.volume-control input{width:160px;accent-color:var(--accent)}.now-playing{background:var(--surface);border-radius:var(--radius);flex-direction:column;gap:6px;padding:14px 16px;display:flex}.status{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-size:.8rem;font-weight:700}.track-title{overflow-wrap:anywhere;margin:0;font-size:1.1rem}.progress-row{font-variant-numeric:tabular-nums;color:var(--muted);align-items:center;gap:10px;font-size:.85rem;display:flex}.progress-bar{background:var(--surface-2);border-radius:999px;flex:1;height:6px;overflow:hidden}.progress-fill{background:var(--accent);height:100%}.dj-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.dj-controls button,.seek-form button,.enqueue-form button,.token-form button{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:8px;padding:10px 18px;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}.seek-form{color:var(--muted);align-items:center;gap:6px;margin-left:auto;font-size:.9rem;display:flex}.seek-form input{border:1px solid var(--surface-2);background:var(--surface);width:90px;color:var(--text);border-radius:8px;padding:8px}.enqueue-form,.queue,.token-form,.dj-monitor{background:var(--surface);border-radius:var(--radius);padding:14px 16px}.enqueue-form label,.seek-form label,.token-form label{color:var(--muted);margin-bottom:6px;font-size:.9rem;display:block}.enqueue-row{gap:8px;display:flex}.enqueue-row input{border:1px solid var(--surface-2);background:var(--surface-2);min-width:0;color:var(--text);border-radius:8px;flex:1;padding:10px 12px}.queue-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.queue-item{background:var(--surface-2);border-radius:8px;align-items:center;gap:10px;padding:8px 10px;display:flex}.queue-index{color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.4em}.queue-thumb{object-fit:cover;border-radius:4px;width:44px;height:28px}.queue-title{overflow-wrap:anywhere;flex:1;font-size:.95rem}.queue-duration{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.queue-actions{gap:4px;display:flex}.queue-actions button{background:var(--surface);width:32px;height:32px;color:var(--text);cursor:pointer;border:0;border-radius:6px;font-size:.9rem}.queue h3,.dj-monitor h3{margin:0 0 10px;font-size:1rem}.token-form input{border:1px solid var(--surface-2);background:var(--surface-2);width:100%;color:var(--text);border-radius:8px;margin-bottom:10px;padding:10px 12px}.token-form button{width:100%}.error-banner{background:color-mix(in srgb, var(--error) 15%, transparent);color:var(--error);overflow-wrap:anywhere;border-radius:8px;margin:0;padding:10px 12px;font-size:.9rem}.hint{color:var(--muted);margin:0;font-size:.85rem}.track-validator h3{margin:0 0 4px;font-size:1rem}.validator-frame,.validator-frame :first-child,.validator-frame iframe{aspect-ratio:16/9;border-radius:var(--radius);background:var(--surface);border:0;width:min(320px,100%);height:auto}.validator-frame :first-child,.validator-frame iframe{height:100%}@media (width<=480px){.seek-form{width:100%;margin-left:0}.enqueue-row{flex-direction:column}.queue-duration{display:none}}.listener-count{color:var(--muted);margin-left:auto;font-size:.9rem}.listener-count strong{color:var(--text)}.import-status,.saved-queues{background:var(--surface);border-radius:var(--radius);flex-direction:column;gap:8px;padding:14px 16px;display:flex}.import-status p{overflow-wrap:anywhere;margin:0}.import-status progress{width:100%}.import-status button,.saved-queues button{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:8px;align-self:flex-start;padding:8px 14px;font-weight:600}.import-failures{color:var(--muted);overflow-wrap:anywhere;margin:0;padding-left:18px;font-size:.85rem}.saved-queues h3{margin:0;font-size:1rem}.saved-queues input{border:1px solid var(--surface-2);background:var(--surface-2);min-width:0;color:var(--text);border-radius:8px;flex:1;padding:10px 12px}.saved-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}