:root{color-scheme:dark;font-family:Inter,system-ui,"Segoe UI",sans-serif;background:#09131d;color:#e8f1f5}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #284453;background:#101f2d}header a{color:#76ddcb;text-decoration:none;font-size:13px}.brand{display:flex;align-items:center;gap:10px;color:#3bd1bc;font-weight:900}.brand strong{color:#e9f6f7;font-size:21px}.pill{border:1px solid #3d685f;border-radius:20px;padding:4px 9px;font-size:10px;font-weight:750;color:#7be2cc}
main{max-width:1450px;margin:auto;padding:18px;display:grid;grid-template-columns:minmax(280px,1.5fr) minmax(285px,.65fr);gap:18px;align-items:start}
.camera-shell{position:relative;min-height:500px;background:#071018;border:1px solid #2a4c53;border-radius:18px;overflow:hidden;display:grid;place-items:center}
#stage{max-height:72vh;max-width:100%;width:100%;height:auto;object-fit:contain}.live-indicator{position:absolute;top:12px;left:12px;padding:7px 11px;border-radius:9px;background:#071d28cc;color:#91dbd0;font-size:11px;letter-spacing:.2px}
.controls{border:1px solid #29424e;background:#122230;border-radius:16px;padding:22px;min-width:0}.controls h1{font-size:25px;line-height:1.12;margin:3px 0 12px}.controls h1 span{color:#50d7bb}.controls h2{font-size:19px}.subtitle,.privacy,.small{font-size:12px;color:#98b3c0;line-height:1.6}.small{font-size:11px}.field{display:flex;flex-direction:column;gap:8px;margin:16px 0}.field label,label{font-size:12px;color:#ccdce6;font-weight:650}.field input[type=range]{width:100%;accent-color:#3bd1bc}input:not([type=range]),select{width:100%;border:1px solid #3c5c66;background:#091b29;color:#edf8f9;border-radius:10px;padding:12px}input[type=file]{padding:8px;font-size:11px}button{border:1px solid #40616d;color:#c9eaeb;background:#243846;border-radius:10px;padding:12px 14px;font-weight:750;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:#32ceb3;color:#052a2b;border-color:#32ceb3}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}.actions button{flex:1;min-width:130px}.separator{border-top:1px solid #304753;margin:20px 0}#pairStatus{border:1px dashed #365564;border-radius:8px;padding:10px;margin-top:10px;color:#83d7c8;font-size:12px}footer{text-align:center;padding:14px;font-size:11px;color:#7e9ea8}.tv-layout{grid-template-columns:minmax(0,1fr) 330px}.tv-screen{position:relative;min-height:72vh;background:#02080c;border:1px solid #315564;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center}#remote{height:72vh;width:100%;object-fit:contain}.tv-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#07101a;color:#d7efec;padding:20px}.tv-empty .big-icon{background:#1d5e62;padding:20px;border-radius:22px;font-size:35px;color:#b2ffe9;font-weight:900}.tv-empty p{color:#95b1bd;font-size:14px}.tv-screen:fullscreen{border-radius:0;max-height:100vh}.tv-screen:fullscreen video{height:100vh}.pair-code{margin:15px 0;text-align:center;font-size:clamp(24px,4vw,35px);font-weight:900;letter-spacing:3px;color:#5bedd1;border:1px dashed #396d65;border-radius:12px;padding:18px}.tv-body .controls button{margin:5px 3px 5px 0}#inviteLink{word-break:break-all;color:#81e3ce}
@media(max-width:900px){main,.tv-layout{grid-template-columns:1fr}.tv-screen,#remote{min-height:55vh;height:55vh}.camera-shell{min-height:55vh}.controls{padding:18px}}
@media(max-width:480px){header{padding:12px}.brand strong{font-size:18px}.pill{font-size:9px}main{padding:10px}.camera-shell{min-height:52vh}.actions button{padding:11px 9px;min-width:100px}.tv-screen,#remote{min-height:50vh;height:50vh}}