:root{--sl-purple:#6d28d9;--sl-blue:#2563eb;--sl-teal:#14b8a6;--sl-danger:#dc2626}
.sl-host-page{min-height:100vh;background:radial-gradient(circle at top left,rgba(109,40,217,.22),transparent 36%),#090d1a;color:#f8fafc}
.sl-host-shell{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:22px 0 120px}
.sl-host-topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.sl-host-topbar h1{margin:.1rem 0;font-size:clamp(1.7rem,5vw,3rem)}.sl-host-topbar p{margin:.2rem 0}.sl-host-topbar nav{display:flex;gap:10px;flex-wrap:wrap}
.sl-panel,.sl-notice{border:1px solid rgba(148,163,184,.24);background:rgba(15,23,42,.88);border-radius:20px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.sl-notice{margin-bottom:18px;border-color:rgba(20,184,166,.45);background:rgba(15,118,110,.14)}.sl-notice p{margin:.35rem 0 0;color:#dbeafe}.sl-error-panel{max-width:720px;margin:70px auto;text-align:center}
.sl-host-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.85fr);gap:18px}.sl-preview-card{overflow:hidden;border-radius:22px;border:1px solid rgba(148,163,184,.28);background:#020617;box-shadow:0 18px 50px rgba(0,0,0,.28)}.sl-preview-wrap{position:relative;aspect-ratio:16/9;background:#020617;display:grid;place-items:center}.sl-preview-wrap video{width:100%;height:100%;object-fit:cover}.sl-video-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;background:linear-gradient(145deg,#111827,#020617);color:#cbd5e1}.sl-video-placeholder[hidden]{display:none}.sl-video-placeholder span{font-size:3rem}.sl-video-placeholder strong{font-size:1.15rem}.sl-video-placeholder small{max-width:360px}.sl-live-pill{position:absolute;top:14px;left:14px;background:#dc2626;color:#fff;font-weight:900;letter-spacing:.1em;border-radius:999px;padding:7px 11px;box-shadow:0 0 0 4px rgba(220,38,38,.2)}.sl-preview-meta{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;background:#0f172a}.sl-preview-meta span{color:#cbd5e1}
.sl-setup-panel label{display:block;margin:12px 0;font-weight:700}.sl-setup-panel input{width:100%;margin-top:6px}.sl-setup-panel small{display:block;color:#94a3b8;margin-top:5px}.sl-main-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.sl-main-actions button{min-height:46px}.sl-main-actions #sl-go-live{grid-column:1/-1;background:linear-gradient(135deg,var(--sl-purple),var(--sl-blue));font-weight:900}.sl-status-card{margin-top:14px;padding:13px;border-radius:14px;background:#111827;border:1px solid rgba(148,163,184,.2);display:grid;gap:5px}.sl-status-card[data-kind=live]{border-color:rgba(34,197,94,.65);background:rgba(20,83,45,.38)}.sl-status-card[data-kind=error]{border-color:rgba(248,113,113,.65);background:rgba(127,29,29,.32)}.sl-status-card span{color:#cbd5e1}
.sl-control-dock{position:sticky;bottom:12px;z-index:30;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px auto;padding:10px;width:max-content;max-width:100%;border:1px solid rgba(148,163,184,.25);background:rgba(2,6,23,.92);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 18px 40px rgba(0,0,0,.38)}.sl-control-dock button{border-radius:999px}
.sl-viewer-panel{margin-top:18px}.sl-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.sl-section-head h2{margin:.15rem 0}.sl-viewer-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}.sl-viewer-row{display:grid;grid-template-columns:44px 1fr 14px;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#111827;border:1px solid rgba(148,163,184,.18)}.sl-viewer-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--sl-purple),var(--sl-teal));font-weight:900}.sl-viewer-row div{display:grid}.sl-viewer-row small{color:#94a3b8}.sl-connection-dot{width:11px;height:11px;border-radius:50%;background:#f59e0b}.sl-connection-dot.is-connected{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}.sl-connection-dot.is-failed{background:#ef4444}.sl-empty{color:#94a3b8}.sl-help-panel{margin-top:18px}.sl-toast{position:fixed;right:18px;bottom:20px;z-index:80;max-width:min(420px,calc(100% - 36px));padding:13px 15px;border-radius:13px;background:#0f172a;color:#fff;border:1px solid rgba(148,163,184,.3);box-shadow:0 20px 50px rgba(0,0,0,.4)}.sl-toast.error{background:#7f1d1d}
.sl-public-stage{display:block!important;padding:0!important;overflow:hidden}.sl-public-card{width:100%;background:#020617;border-radius:20px;overflow:hidden}.sl-public-video-wrap{position:relative;aspect-ratio:16/9;background:#020617}.sl-public-video-wrap video{width:100%;height:100%;object-fit:contain;background:#000}.sl-public-meta{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px;background:#0f172a}.sl-public-meta h2{margin:.15rem 0}.sl-public-meta p{margin:.2rem 0;color:#cbd5e1}.sl-public-actions{display:flex;gap:8px;flex-wrap:wrap}.sl-viewer-status{display:grid;gap:4px;padding:12px 16px;background:#111827;border-top:1px solid rgba(148,163,184,.18)}.sl-viewer-status span{color:#cbd5e1}.sl-viewer-status[data-kind=live]{background:rgba(20,83,45,.48)}.sl-viewer-status[data-kind=error]{background:rgba(127,29,29,.42)}
@media(max-width:800px){.sl-host-shell{width:min(100% - 14px,1180px);padding-top:10px}.sl-host-topbar{display:block}.sl-host-topbar nav{margin-top:12px}.sl-host-grid{grid-template-columns:1fr}.sl-control-dock{position:fixed;left:8px;right:8px;bottom:8px;width:auto;border-radius:20px}.sl-control-dock button{flex:1 1 42%;min-height:45px}.sl-public-meta{align-items:flex-start;display:grid}.sl-public-actions button{flex:1}.sl-public-video-wrap{aspect-ratio:9/16;max-height:72vh}.sl-public-video-wrap video{object-fit:contain}.sl-main-actions{grid-template-columns:1fr}.sl-main-actions #sl-go-live{grid-column:auto}}


.sl-video-placeholder.is-audio-ready,.sl-public-video-wrap.is-audio-only .sl-video-placeholder{background:radial-gradient(circle at center,rgba(20,184,166,.24),transparent 46%),linear-gradient(145deg,#111827,#020617)}
.sl-public-video-wrap.is-audio-only{min-height:330px;aspect-ratio:auto}
.sl-public-video-wrap.is-audio-only video{position:absolute;width:1px;height:1px;opacity:.01}
.sl-public-video-wrap.is-audio-only .sl-video-placeholder span{display:grid;place-items:center;width:92px;height:92px;margin:0 auto 10px;border-radius:50%;background:rgba(20,184,166,.18);box-shadow:0 0 0 0 rgba(20,184,166,.3);animation:slAudioPulse 2s infinite;font-size:3.4rem}
@keyframes slAudioPulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.34)}70%{box-shadow:0 0 0 28px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}


/* v0.7.50 PC audio setup and diagnostics */
.sl-pc-audio-setup{margin-top:16px;padding:14px;border:1px solid rgba(56,189,248,.34);border-radius:16px;background:rgba(2,132,199,.08)}
.sl-section-head.compact{align-items:flex-start}.sl-section-head.compact h3{margin:.1rem 0;font-size:1.15rem}.sl-section-head.compact .eyebrow{margin:0}
.sl-pc-audio-setup select{width:100%;margin-top:6px;padding:10px 12px;border:1px solid rgba(148,163,184,.35);border-radius:11px;background:#0b1222;color:#f8fafc}
.sl-audio-test-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.sl-audio-test-actions button{min-height:42px}
.sl-audio-meter-wrap{margin-top:12px}.sl-audio-meter{height:13px;overflow:hidden;border:1px solid rgba(148,163,184,.35);border-radius:999px;background:#020617}.sl-audio-meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#14b8a6,#22c55e,#f59e0b);transition:width .08s linear}.sl-audio-meter-wrap small{margin-top:6px;color:#cbd5e1}
.sl-share-audio-option{margin-top:12px!important;font-weight:600!important}.sl-inline-warning{margin:10px 0 0;padding:10px 12px;border-radius:11px;background:rgba(127,29,29,.45);border:1px solid rgba(248,113,113,.5);color:#fee2e2}
.sl-status-card[data-kind=ready]{border-color:rgba(34,211,238,.55);background:rgba(8,47,73,.48)}
@media(max-width:560px){.sl-audio-test-actions{grid-template-columns:1fr}.sl-section-head.compact{display:grid}.sl-section-head.compact button{width:100%;margin-top:8px}}

/* v0.7.51 local camera mirror */
.sl-preview-wrap video{transition:transform .18s ease}
.sl-preview-wrap.is-mirrored video{transform:scaleX(-1)}
#sl-mirror-camera[aria-pressed="true"]{border-color:rgba(45,212,191,.65);background:rgba(13,148,136,.22)}
@media(max-width:800px){#sl-mirror-camera{flex:1 1 42%}}