:root{--bg:#0f0f14;--surface:#17171f;--surface-2:#1f1f29;--text:#f4f4f8;--text-muted:#a3a3b7;--border:#26262f;--accent:#8e7df8;--accent-contrast:#16102b;--accent-wash:#8e7df81f;--success:#46d393;--warning:#f0b429;--danger:#f87171;--radius-card:16px;--radius-tile:12px}@media (prefers-color-scheme:light){:root{--bg:#f6f6fa;--surface:#fff;--surface-2:#f0eff6;--text:#1c1b26;--text-muted:#5c5b6e;--border:#e5e4ee;--accent:#5f4bd8;--accent-contrast:#fff;--accent-wash:#5f4bd81a}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.shell{min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;max-width:430px;margin:0 auto;display:flex}.header{align-items:center;gap:10px;padding-top:8px;display:flex}.logo{background:var(--accent-wash);width:34px;height:34px;color:var(--accent);border-radius:12px;justify-content:center;align-items:center;display:flex}.title{margin:0;font-size:17px;font-weight:600}.banner{border-radius:var(--radius-tile);align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:500;display:flex}.banner.waiting{background:var(--surface-2);color:var(--text-muted)}.banner.connected{color:var(--success);background:#46d3931f}.banner.error{color:var(--danger);background:#f871711f}.dot{background:currentColor;border-radius:999px;flex-shrink:0;width:8px;height:8px}.preview-card{border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--border);aspect-ratio:3/4;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.preview-card video{object-fit:cover;width:100%;height:100%;display:block}.preview-card video.mirrored{transform:scaleX(-1)}.preview-empty{color:var(--text-muted);text-align:center;justify-content:center;align-items:center;padding:0 24px;font-size:14px;line-height:1.5;display:flex;position:absolute;inset:0}.big-button{border-radius:var(--radius-card);background:var(--accent);width:100%;min-height:60px;color:var(--accent-contrast);cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;font-size:17px;font-weight:600;transition:transform .15s;display:flex}.big-button:active{transform:scale(.98)}.big-button:disabled{opacity:.6}.controls{gap:8px;display:flex}.control{border-radius:var(--radius-tile);border:1px solid var(--border);background:var(--surface);min-height:52px;color:var(--text);cursor:pointer;flex:1;font-size:13px;font-weight:600}.control.active{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}.control:disabled{opacity:.5}.ghost-button{border-radius:var(--radius-tile);background:var(--surface-2);min-height:52px;color:var(--danger);cursor:pointer;border:none;font-size:15px;font-weight:600}.code-row{gap:8px;display:flex}.code-input{border-radius:var(--radius-tile);border:1px solid var(--border);background:var(--surface);min-height:56px;color:var(--text);letter-spacing:.35em;text-align:center;text-transform:uppercase;flex:1;font-size:22px;font-weight:600}.code-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.hint{color:var(--text-muted);margin:0;font-size:13px;line-height:1.55}.hint strong{color:var(--text)}.help{border:1px solid var(--border);border-radius:var(--radius-tile);color:var(--text-muted);padding:12px 14px;font-size:13px;line-height:1.6}.help strong{color:var(--text)}.spacer{flex:1}.footer-note{text-align:center;color:var(--text-muted);font-size:12px}