:root{
  --bg:#f5f7fb;--card:#fff;--text:#13213a;--muted:#64748b;--line:#e6eaf0;
  --brand:#1268e8;--brand2:#0b4fb5;--good:#119c65;--warn:#b7791f;--bad:#c53030;
  --shadow:0 18px 50px rgba(15,23,42,.09);--radius:22px;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh;background:radial-gradient(circle at 10% 0%,#eaf3ff 0,transparent 34%),radial-gradient(circle at 100% 90%,#edf8ff 0,transparent 30%),var(--bg)}
a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:20px}.brandmark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--brand),#5aa5ff);display:grid;place-items:center;box-shadow:0 8px 22px rgba(18,104,232,.28)}.brandmark:before{content:"";width:18px;height:14px;border:3px solid white;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.pill{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px;background:#ffffffb8}.hero{padding:60px 0 30px;text-align:center}.eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;background:#e8f1ff;color:var(--brand2);font-weight:750;font-size:13px}.hero h1{font-size:clamp(36px,6vw,66px);letter-spacing:-.045em;line-height:1.02;margin:18px auto 16px;max-width:900px}.hero p{font-size:18px;line-height:1.65;color:var(--muted);max-width:760px;margin:auto}
.rolegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:36px auto 70px;max-width:950px}.rolecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:left;box-shadow:var(--shadow);transition:.2s transform,.2s border-color}.rolecard:hover{transform:translateY(-3px);border-color:#bdd6ff}.roleicon{width:56px;height:56px;border-radius:16px;background:#eef5ff;color:var(--brand);display:grid;place-items:center;font-size:28px;margin-bottom:22px}.rolecard h2{font-size:24px;margin:0 0 8px}.rolecard p{color:var(--muted);line-height:1.55;margin:0 0 22px}.rolecard .go{display:flex;align-items:center;justify-content:space-between;font-weight:750;color:var(--brand)}
.panel{max-width:920px;margin:24px auto 60px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panelhead{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panelbody{padding:28px}.center{text-align:center}.status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#f0f5fb;color:#52647b;font-size:13px;font-weight:700}.dot{width:8px;height:8px;border-radius:50%;background:#94a3b8}.status.live{background:#e8f8f1;color:#087a4c}.status.live .dot{background:#18b779;box-shadow:0 0 0 5px rgba(24,183,121,.12)}
.code{font-variant-numeric:tabular-nums;letter-spacing:.18em;font-size:clamp(54px,10vw,96px);font-weight:850;margin:24px 0 8px}.help{color:var(--muted);line-height:1.55}.btn{appearance:none;border:0;border-radius:13px;padding:13px 18px;font-weight:760;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px}.btn.primary{background:var(--brand);color:white;box-shadow:0 10px 24px rgba(18,104,232,.22)}.btn.secondary{background:#f3f6fa;color:#24364f;border:1px solid var(--line)}.btn.danger{background:#fff1f1;color:#a92a2a;border:1px solid #ffd2d2}.btn:disabled{opacity:.5;cursor:not-allowed}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.formrow{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:620px;margin:0 auto}.input{width:100%;border:1px solid #d9e0e8;border-radius:14px;padding:14px 16px;font-size:17px;outline:none;background:#fff}.input:focus{border-color:#7ab0ff;box-shadow:0 0 0 4px rgba(18,104,232,.09)}.codeinput{text-align:center;letter-spacing:.18em;font-weight:800;font-size:24px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.option{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff}.option h3{margin:0 0 8px}.option p{color:var(--muted);margin:0 0 16px;line-height:1.5}.option.disabled{opacity:.6;background:#fafbfc}.badge{font-size:12px;padding:5px 8px;border-radius:999px;background:#eef5ff;color:var(--brand);font-weight:800}.badge.beta{background:#fff5df;color:#9a6500}.label{font-size:13px;color:#516174;font-weight:750;margin-bottom:7px;display:block}.select{width:100%;border:1px solid #d9e0e8;border-radius:12px;padding:11px 12px;background:white;font-size:14px}.settings{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}.notice{padding:13px 15px;border-radius:13px;background:#fff7e7;color:#7b5717;border:1px solid #f7e1b2;line-height:1.45;font-size:14px}.error{padding:13px 15px;border-radius:13px;background:#fff0f0;color:#9f2424;border:1px solid #ffd0d0;margin-top:14px;display:none}.videoShell{background:#0b1220;position:relative;min-height:420px;display:grid;place-items:center}.videoShell video{width:100%;height:min(72vh,760px);object-fit:contain;background:#05080d}.videoPlaceholder{position:absolute;color:#a9b6c8;text-align:center;max-width:520px;padding:24px}.videoPlaceholder strong{display:block;color:#fff;font-size:24px;margin-bottom:7px}.receiver.panel{max-width:1200px}.receiver .panelbody{padding:0}.receiverTop{padding:15px 18px;background:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.small{font-size:13px;color:var(--muted)}.compat{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.compat span{font-size:12px;border-radius:999px;padding:6px 9px;background:#f4f6f9;color:#5e6b7d}
footer{text-align:center;color:#8290a3;font-size:13px;padding:18px 0 34px}
@media(max-width:760px){.rolegrid,.grid2,.settings{grid-template-columns:1fr}.hero{padding-top:30px}.hero p{font-size:16px}.panelbody{padding:20px}.formrow{grid-template-columns:1fr}.btn{width:100%}.topbar .pill{display:none}.receiverTop{align-items:flex-start;gap:10px;flex-direction:column}.videoShell{min-height:300px}}

/* V4: true immersive fullscreen + selectable fit mode */
.videoShell{height:min(72vh,760px);min-height:420px;overflow:hidden;background:#05080d}
.videoShell video,.videoShell #relayImage{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:#05080d}
body.cast-immersive{overflow:hidden!important;background:#000!important}
body.cast-immersive .wrap{width:100%!important;max-width:none!important;margin:0!important}
body.cast-immersive .topbar,
body.cast-immersive #receiverError,
body.cast-immersive .receiverTop{display:none!important}
body.cast-immersive .receiver.panel{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important;z-index:999999}
body.cast-immersive #castArea,
body.cast-immersive .receiver .panelbody,
body.cast-immersive .videoShell{display:block!important;width:100vw!important;height:100vh!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border-radius:0!important;background:#000!important}
body.cast-immersive .videoShell video,
body.cast-immersive .videoShell #relayImage{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;background:#000!important}
body.cast-immersive .videoPlaceholder{display:none!important}
:fullscreen{background:#000}
@media(max-width:760px){.videoShell{height:62vh;min-height:300px}}
/* V5 Smooth Video Relay */
.videoShell video{transform:translateZ(0);will-change:contents;}
body.cast-immersive .videoShell video{transform:translateZ(0);}