html, body { margin:0; padding:0; background:#000; overflow:hidden; font-family:"Open Sans", Helvetica, Arial, sans-serif; }
#mainView, #vidView, #vidContainer { position:fixed; inset:0; background:#000; }
#mainVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
#remoteAudio { display:none; }
.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.visible { opacity:1; visibility:visible; }
.glass-overlay { position:absolute; z-index:20; color:#fff; background:rgba(20,20,20,.42); border:1px solid rgba(255,255,255,.20); box-shadow:0 8px 28px rgba(0,0,0,.35); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:opacity 180ms ease, transform 180ms ease; }
.caption-overlay { left:50%; bottom:74px; transform:translateX(-50%); width:min(82vw,980px); min-height:44px; padding:12px 20px; border-radius:18px; font-size:clamp(17px,2.2vw,32px); font-weight:700; line-height:1.25; text-align:center; }
.timestamp-overlay { top:20px; right:20px; padding:9px 14px; border-radius:14px; font-size:clamp(12px,1.2vw,16px); font-weight:600; max-width:min(44vw,500px); text-align:right; }
.live-badge { position:absolute; right:18px; top:18px; z-index:25; padding:5px 10px; border-radius:5px; background:#e22b45; color:#fff; font-size:16px; font-weight:800; box-shadow:0 4px 16px rgba(0,0,0,.45); }
#customControlBar { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:9px; width:min(96vw,980px); padding:9px 12px; border-radius:18px; background:rgba(15,15,15,.55); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 28px rgba(0,0,0,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:opacity 250ms ease, transform 250ms ease; }
#customControlBar.control-hidden { opacity:0; transform:translateX(-50%) translateY(18px); pointer-events:none; }
.control-btn, .mini-btn { min-width:44px; height:40px; border:0; border-radius:12px; background:rgba(255,255,255,.14); color:#fff; font-size:15px; font-weight:800; cursor:pointer; }
.control-btn:hover, .mini-btn:hover { background:rgba(255,255,255,.26); }
.control-btn.active { background:rgba(70,150,255,.78); }
#volumeSlider { width:100px; }
#playTimer { min-width:64px; color:rgba(255,255,255,.88); font-size:13px; font-weight:800; text-align:center; }
#statusText { margin-left:auto; color:rgba(255,255,255,.82); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settings-menu { position:absolute; right:max(16px, calc((100vw - min(96vw, 980px)) / 2 + 46px)); bottom:74px; z-index:40; width:330px; background:rgba(35,40,46,.96); color:white; border-radius:5px; padding:14px 0; box-shadow:0 12px 36px rgba(0,0,0,.45); font-size:15px; }
.settings-header, .settings-row, .settings-item { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:9px 22px; box-sizing:border-box; }
.settings-header { color:rgba(255,255,255,.76); font-size:13px; }
.settings-item { border:0; background:transparent; color:white; text-align:left; cursor:pointer; font:inherit; }
.settings-item:hover, .settings-row:hover { background:rgba(255,255,255,.08); }
#qualitySelect, #sourceSelect { appearance:none; -webkit-appearance:none; max-width:170px; min-width:140px; background:rgba(20,20,20,.88); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:6px 10px; font-size:13px; outline:none; cursor:pointer; }
#qualitySelect option, #sourceSelect option { background:#111; color:#fff; }
.stats-panel { position:absolute; top:14px; left:14px; z-index:35; width:min(560px,48vw); max-height:calc(100vh - 36px); overflow:auto; color:#fff; background:rgba(18,22,27,.88); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:12px; box-shadow:0 14px 38px rgba(0,0,0,.48); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.stats-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.stats-title { font-size:17px; font-weight:800; }
.health-summary { display:inline-block; margin-top:4px; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:800; background:rgba(33,180,100,.20); color:#8cffb7; }
.health-summary.warn { background:rgba(255,178,36,.18); color:#ffd38a; }
.health-summary.bad { background:rgba(255,52,82,.20); color:#ff8fa0; }
.mini-btn { min-width:30px; height:30px; border-radius:8px; font-size:20px; line-height:1; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-bottom:10px; }
.stat-card { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.055); border-radius:8px; padding:7px 9px; min-width:0; }
.stat-name { color:rgba(255,255,255,.72); font-size:11px; line-height:1.1; }
.stat-value { margin-top:3px; font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-card.warn { border-color:rgba(255,178,36,.55); background:rgba(255,178,36,.12); }
.stat-card.bad { border-color:rgba(255,52,82,.65); background:rgba(255,52,82,.16); }
.issue-list { margin:8px 0 10px; padding:8px 10px; border-radius:8px; background:rgba(255,52,82,.16); color:#ffd8df; font-size:12px; line-height:1.35; }
.chart-wrap canvas { width:100% !important; max-height:105px; margin:7px 0 10px; }
.chart-title { color:rgba(255,255,255,.86); font-size:12px; font-weight:700; margin-top:4px; }
.event-details { margin-top:8px; border-top:1px solid rgba(255,255,255,.12); padding-top:8px; }
.event-details summary { cursor:pointer; color:rgba(255,255,255,.84); font-size:13px; font-weight:700; }
#broadcastEventsLog { max-height:170px; overflow:auto; white-space:pre-wrap; word-break:break-word; margin:8px 0 0; padding:8px; border-radius:8px; background:rgba(0,0,0,.35); color:#d9ecff; font-size:11px; }
@media (max-width:760px) { #statusText,#volumeSlider{display:none;} .settings-menu{right:16px;width:calc(100vw - 32px);} .stats-panel{width:calc(100vw - 32px); left:8px; top:8px;} .caption-overlay{bottom:68px;width:84vw;} .stats-grid{grid-template-columns:1fr;} }

.multiview-rail { position:absolute; right:14px; top:70px; bottom:88px; z-index:24; width:min(25vw,340px); display:flex; flex-direction:column; gap:10px; pointer-events:auto; }
.multiview-tile { position:relative; flex:1; min-height:82px; border:1px solid rgba(255,255,255,.18); border-radius:8px; overflow:hidden; background:rgba(0,0,0,.62); box-shadow:0 8px 24px rgba(0,0,0,.35); cursor:pointer; }
.multiview-tile.active { outline:2px solid rgba(78,165,255,.95); }
.multiview-tile video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.multiview-tile .tile-label { position:absolute; left:8px; bottom:8px; padding:3px 6px; border-radius:3px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:800; }
.multiview-tile.placeholder { display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.82); font-size:13px; font-weight:800; }
.stat-note { margin:8px 0 10px; padding:8px 10px; border-radius:8px; background:rgba(78,165,255,.12); color:#d8ebff; font-size:12px; line-height:1.35; }
@media (max-width:900px) { .multiview-rail { display:none; } }

/* v3.2 multiview fixes */
.multiview-rail.hidden { display: none !important; }
.multiview-tile.placeholder video { display: none; }
.multiview-tile.placeholder::before { content: "waiting for projection"; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 700; }

/* v3.4 layout modes + hidden active source tile */
.multiview-tile.source-hidden { display: none !important; }
#vidContainer.layout-rail-right #mainVideo { inset:0; width:100%; height:100%; object-fit:contain; }
#vidContainer.layout-rail-top .multiview-rail,
#vidContainer.layout-rail-bottom .multiview-rail { left:14px; right:14px; width:auto; height:150px; bottom:auto; flex-direction:row; }
#vidContainer.layout-rail-top .multiview-rail { top:58px; }
#vidContainer.layout-rail-bottom .multiview-rail { top:auto; bottom:88px; }
#vidContainer.layout-rail-top #mainVideo { top:210px; height:calc(100% - 210px); }
#vidContainer.layout-rail-bottom #mainVideo { height:calc(100% - 238px); }
#vidContainer.layout-grid-equal #mainVideo { display:none; }
#vidContainer.layout-grid-equal .multiview-rail { left:0; right:0; top:0; bottom:0; width:auto; height:auto; padding:8px; display:grid; gap:8px; background:#000; }
#vidContainer.layout-grid-equal .multiview-tile { min-height:0; border-radius:6px; }
#vidContainer.layout-grid-equal .multiview-tile video { object-fit:contain; }
#vidContainer.layout-grid-equal .multiview-tile.source-hidden { display:block !important; }
#vidContainer.layout-grid-equal .multiview-rail.count-1 { grid-template-columns:1fr; }
#vidContainer.layout-grid-equal .multiview-rail.count-2 { grid-template-columns:1fr 1fr; }
#vidContainer.layout-grid-equal .multiview-rail.count-3,
#vidContainer.layout-grid-equal .multiview-rail.count-4 { grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); }
#vidContainer.layout-grid-equal .multiview-rail.count-5,
#vidContainer.layout-grid-equal .multiview-rail.count-6 { grid-template-columns:1fr 1fr 1fr; }
#vidContainer.layout-grid-equal .multiview-rail.count-many { grid-template-columns:repeat(4,1fr); }
.stat-action { margin-top:5px; display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border:0; border-radius:6px; background:rgba(78,165,255,.24); color:#fff; font-size:11px; font-weight:800; cursor:pointer; }
.stat-action:hover { background:rgba(78,165,255,.42); }

/* v3.5 keep every multiview cell full-frame 16:9-safe instead of cropping */
.multiview-tile { aspect-ratio:16 / 9; }
#vidContainer.layout-grid-equal .multiview-tile { aspect-ratio:auto; display:flex; align-items:center; justify-content:center; }
#vidContainer.layout-grid-equal .multiview-tile video { width:100%; height:100%; object-fit:contain; }
#vidContainer.layout-rail-top .multiview-tile,
#vidContainer.layout-rail-bottom .multiview-tile { flex:0 0 auto; width:min(24vw,260px); height:100%; }

/* v3.7 stream launcher + cog anchoring */
.stream-launcher { position:absolute; top:16px; left:16px; z-index:31; display:flex; align-items:center; gap:8px; transition:opacity 250ms ease, transform 250ms ease; }
.stream-launcher.control-hidden { opacity:0; transform:translateY(-12px); pointer-events:none; }
.stream-add-btn, .stream-form button { height:36px; border:0; border-radius:10px; background:rgba(15,15,15,.66); color:#fff; font-weight:800; cursor:pointer; padding:0 12px; border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.stream-form { display:flex; align-items:center; gap:6px; padding:6px; border-radius:12px; background:rgba(15,15,15,.66); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.stream-form input { width:230px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.55); color:#fff; padding:0 10px; outline:none; font-weight:700; }
.stream-form.hidden { display:none !important; }
@media (max-width:760px) { .stream-form input{width:160px;} #playTimer{display:none;} }