:root{--bg:#0b1020;--card:#161d33;--text:#e8ecf8;--muted:#8d97b5;--accent:#7aa2ff;--ok:#4cd694;--warn:#ffb454;--bad:#ff6b6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.screen{display:none;flex-direction:column;gap:14px;min-height:100%;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));justify-content:center}
.screen.active{display:flex}
h1{font-size:40px;margin:0;text-align:center}
h2{margin:0;text-align:center}
.sub{color:var(--muted);text-align:center;margin:0 0 10px}
.big{font-size:19px;padding:20px;border:0;border-radius:16px;background:var(--accent);color:#0b1020;font-weight:600;width:100%}
.big.alt{background:#a98bff}
.big.ghost{background:var(--card);color:var(--text)}
.big.small{padding:14px;width:auto;min-width:110px}
input[type=text]{font-size:36px;letter-spacing:10px;text-align:center;padding:18px;border-radius:16px;border:2px solid var(--card);background:var(--card);color:var(--text);width:100%}
#babyPreview{width:100%;max-height:30vh;object-fit:cover;border-radius:16px;background:#000}
.codebox{background:var(--card);border-radius:16px;padding:16px;text-align:center}
.label{color:var(--muted);font-size:14px}
.code{font-size:48px;letter-spacing:8px;font-weight:700;margin:6px 0}
.status{font-weight:600}
.status.live{color:var(--ok)}.status.connecting{color:var(--warn)}.status.lost{color:var(--bad)}
#parentView{justify-content:flex-start}
.videowrap{position:relative;width:100%;aspect-ratio:4/3;background:#000;border-radius:16px;overflow:hidden}
#remoteVideo{width:100%;height:100%;object-fit:contain}
#tapPlay{position:absolute;inset:auto 20% 40% 20%;width:60%}
.bar{display:flex;justify-content:space-between;align-items:center}
.lastframe{color:var(--muted);font-size:14px}.lastframe.warn{color:var(--bad);font-weight:700}
.controls{display:flex;gap:14px;align-items:center}
.controls input{flex:1;height:40px}
.error{position:fixed;top:10px;left:10px;right:10px;z-index:20;background:var(--bad);color:#fff;padding:14px;border-radius:12px;font-weight:600}
#dim{position:fixed;inset:0;background:#000;z-index:10;display:flex;align-items:center;justify-content:center;color:#222;font-size:14px}
#dim[hidden]{display:none}