:root{color-scheme:dark;--bg: #0f1419;--fg: #e8eef4;--muted: #8b9aab;--ok: #3dd68c;--warn: #f0b429;--bad: #f07178;--accent: #5eb1ff;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent}#app{max-width:480px;margin:0 auto;padding:12px 14px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.top h1{margin:0;font-size:1.35rem;font-weight:650;letter-spacing:-.02em}.sub{margin:4px 0 0;color:var(--muted);font-size:.9rem}.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}.field input{font-size:1rem;padding:10px 12px;border-radius:10px;border:1px solid #2a3544;background:#161d27;color:var(--fg)}.stage{position:relative;width:100%;aspect-ratio:3 / 4;border-radius:14px;overflow:hidden;background:#000;border:1px solid #243041}#video,#overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}#overlay{pointer-events:none}.hud{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:10px;background:#0000008c;font-size:.88rem;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.stats{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;color:var(--muted)}.stats b{color:var(--fg)}.net.ok{color:var(--ok)}.net.bad{color:var(--bad)}.actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}button{font-size:1rem;padding:14px 12px;border-radius:12px;border:1px solid #2a3544;background:#1a2330;color:var(--fg);font-weight:600}button:disabled{opacity:.45}button.primary{background:linear-gradient(180deg,#3a7bd5,#2a5a9e);border-color:#4a8ae0}.hint{margin:0;font-size:.8rem;line-height:1.4;color:var(--muted)}