:root { color-scheme:dark; --bg:#0a0d0e; --panel:#121718; --line:#293031; --text:#f2f5ef; --muted:#8d9999; --green:#c8ff3d; --red:#ff6862; font-family:Inter,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); }
header { height:66px; padding:0 max(20px,calc((100% - 1040px)/2)); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
header .site-brand { display:flex; align-items:center; gap:10px; }
.site-brand-copy { display:flex; align-items:baseline; gap:12px; }
header b { font-size:17px; } header span { color:var(--muted); font-size:11px; }
.teamgrit-logo { width:38px; height:38px; padding:5px; display:grid; place-items:center; flex:0 0 auto; border:1px solid #d9e2ef; border-radius:9px; background:#fff; box-shadow:0 0 18px rgba(45,99,208,.28); }
.teamgrit-logo img { display:block; width:100%; height:100%; object-fit:contain; }
header p { display:flex; align-items:center; gap:8px; } header i { width:8px; height:8px; border-radius:50%; background:#667; } header i.ok { background:var(--green); box-shadow:0 0 10px var(--green); }
main { width:min(1040px,calc(100% - 32px)); margin:54px auto 80px; }
h1 { margin:0 0 28px; font-size:clamp(32px,5vw,52px); letter-spacing:-.05em; } h2 { margin:4px 0 0; font-size:22px; }
.route { margin-bottom:38px; } .fields { display:grid; gap:12px; } .four { grid-template-columns:repeat(4,1fr); } .three,.rssp-fields { grid-template-columns:repeat(3,1fr); }
label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
input,select { width:100%; height:44px; margin-top:8px; padding:0 12px; color:var(--text); background:#090c0d; border:1px solid var(--line); border-radius:4px; outline:none; }
input:focus,select:focus { border-color:var(--green); }
nav { display:flex; border-bottom:1px solid var(--line); } .tab { padding:15px 24px; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; font-weight:800; }
.tab.active { color:var(--green); border-bottom-color:var(--green); }
.panel { display:none; padding:32px; margin-top:18px; background:var(--panel); border:1px solid var(--line); } .panel.active { display:block; }
.title { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; } .title small { color:var(--green); font:700 9px ui-monospace,monospace; letter-spacing:1.5px; }
.state { padding:7px 10px; border:1px solid var(--line); color:var(--muted); font:700 10px ui-monospace,monospace; } .state.live { color:var(--green); border-color:var(--green); }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin:22px 0; } button { min-height:40px; padding:0 15px; color:var(--text); background:transparent; border:1px solid #465052; border-radius:4px; font-weight:800; cursor:pointer; }
button.primary,button.selected { color:#101408; background:var(--green); border-color:var(--green); } button.selected { box-shadow:0 0 0 2px #0a0d0e,0 0 0 4px var(--green); } button.danger { color:var(--red); border-color:#773f3c; } button:disabled { opacity:.35; cursor:not-allowed; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.metrics article { padding:18px; background:#0b0f10; } .metrics small,.metrics span { display:block; color:var(--muted); font:700 9px ui-monospace,monospace; } .metrics strong { display:block; margin:10px 0 4px; color:var(--green); font:700 28px ui-monospace,monospace; }
.mixed-metrics { margin-bottom:12px; } .mixed-metrics strong { font-size:20px; }
.rtc-metrics { grid-template-columns:repeat(3,1fr); margin-bottom:12px; } .rtc-metrics strong { font-size:20px; }
.note { padding:11px 13px; color:var(--muted); background:#0b0f10; border-left:2px solid var(--green); font-size:12px; line-height:1.5; } .note.error { color:#ffaaa6; border-color:var(--red); }
.e2e-card { margin-top:16px; padding:14px; border:1px solid var(--line); background:#090c0d; }
.e2e-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.e2e-heading div { display:flex; align-items:baseline; gap:10px; } .e2e-heading small { color:var(--muted); font:700 9px ui-monospace,monospace; letter-spacing:.1em; } .e2e-heading b { font-size:14px; }
.security-state { min-width:64px; padding:6px 9px; border:1px solid var(--line); color:var(--muted); font:800 10px ui-monospace,monospace; text-align:center; }
.security-state.secure { color:#63f3d0; border-color:#268d79; box-shadow:0 0 14px rgba(38,141,121,.25); }
.e2e-fields { display:grid; grid-template-columns:1fr 2fr auto; gap:12px; align-items:end; }
.e2e-fields button { height:44px; white-space:nowrap; }
.e2e-card p { margin:11px 0 0; color:var(--muted); font-size:11px; line-height:1.5; } .e2e-card code { color:#63f3d0; }
.trust { display:inline-block; margin-top:10px; color:var(--green); font-size:12px; text-decoration:none; } .trust[hidden] { display:none; }
.peers { display:flex; gap:12px; margin-bottom:12px; } .peers span { flex:1; padding:12px; color:var(--muted); background:#0b0f10; font-size:10px; } .peers b { float:right; color:var(--text); }
.media-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.media-view { min-width:0; margin:0; padding:0; border:1px solid var(--line); background:#090c0d; }
.media-view-title { min-height:39px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); font:700 9px ui-monospace,monospace; letter-spacing:.08em; }
.media-view-title b { color:var(--green); font-size:10px; } .media-view-title span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.media-view .screen { border:0; }
.pair-freeze-actions { padding:9px 0 0; display:flex; justify-content:center; }
.pair-freeze-actions button { min-height:34px; padding:0 18px; color:var(--muted); font:700 10px ui-monospace,monospace; }
.pair-freeze-actions button[aria-pressed="true"] { color:#101408; background:var(--green); border-color:var(--green); }
.video-latency { margin-top:10px; padding:12px; border:1px solid var(--line); background:#090c0d; }
.video-latency-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted); font:700 9px ui-monospace,monospace; letter-spacing:.06em; }
.video-latency-head b { margin-right:auto; color:var(--text); } .video-latency-head strong { color:var(--green); font-size:13px; }
.video-latency canvas { display:block; width:100%; height:150px; margin-top:9px; background:#050606; }
.video-latency p { margin:7px 0 0; color:var(--muted); font:9px ui-monospace,monospace; }
.screen.cast-screen video { display:block; position:static; }
.screen .freeze-frame { display:none; position:absolute; inset:0; z-index:8; width:100%; height:100%; object-fit:cover; background:#050606; }
.screen.frozen .freeze-frame { display:block; }
.capture-source { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.screen { position:relative; aspect-ratio:16/9; overflow:hidden; background:#050606; border:1px solid var(--line); } .screen canvas,.screen video { width:100%; height:100%; object-fit:cover; } .screen video { display:none; position:absolute; inset:0; } .screen.playing video { display:block; }
.rssp-screen { display:none; margin-top:18px; } .rssp-screen.enabled { display:grid; } .rssp-screen canvas { display:block; }
.rssp-screen .play-screen.audio canvas { display:none; } .audio-status { display:none; position:absolute; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:radial-gradient(circle at center,#172221,#050606 70%); }
.rssp-screen .play-screen.audio .audio-status { display:flex; } .audio-status b { color:var(--green); font:800 38px ui-monospace,monospace; letter-spacing:.2em; } .audio-status span { color:var(--muted); font:700 12px ui-monospace,monospace; }
.screen.audio canvas { display:none; } .screen.audio .audio-status { display:flex; z-index:2; }
.av-screen .audio-status { display:flex; inset:auto 12px 12px auto; width:190px; height:66px; z-index:3; border:1px solid var(--line); background:rgba(5,6,6,.88); gap:4px; }
.av-screen .audio-status b { font-size:16px; } .av-screen .audio-status span { font-size:9px; }
.mixed-screen canvas { display:block; } .mixed-screen.webrtc-output canvas { display:none; } .mixed-screen.rssp-output video { display:none; } .mixed-screen.webrtc-output video { display:block; }
.mixed-screen .audio-status { display:flex; inset:auto 12px 12px auto; width:190px; height:66px; z-index:3; border:1px solid var(--line); background:rgba(5,6,6,.88); gap:4px; }
.mixed-screen .audio-status b { font-size:16px; } .mixed-screen .audio-status span { font-size:9px; }
.logbox { margin-top:18px; padding:24px; border:1px solid var(--line); } .logbox .title { margin-bottom:12px; } .logbox h2 { font-size:16px; } .logbox button { min-height:32px; }
pre { min-height:100px; max-height:180px; overflow:auto; margin:0; padding:15px; color:#b9c4c2; background:#050707; font:11px/1.7 ui-monospace,monospace; white-space:pre-wrap; }
@media(max-width:700px){ .four,.three,.rssp-fields { grid-template-columns:1fr 1fr; } .e2e-fields { grid-template-columns:1fr; } .panel { padding:20px; } .metrics { grid-template-columns:1fr 1fr; } .media-pair { grid-template-columns:1fr; } }
@media(max-width:440px){ .four,.three,.rssp-fields { grid-template-columns:1fr; } .site-brand-copy span { display:none; } }