:root { --bg:#0f1220; --card:#1a1e2e; --fg:#e8eaf0; --muted:#9aa0b4; --accent:#4f8cff; --ok:#1f7a44; --err:#8a2330; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding:16px; }
.card { width:100%; max-width:460px; background:var(--card); border-radius:16px; padding:28px;
  box-shadow:0 10px 40px rgba(0,0,0,.4); }
h1 { margin:0 0 4px; font-size:1.4rem; }
.sub { margin:0 0 20px; color:var(--muted); font-size:.95rem; }
label { display:block; margin-bottom:14px; font-size:.9rem; color:var(--muted); }
input, textarea { width:100%; margin-top:6px; padding:11px 12px; border-radius:10px; border:1px solid #2c3146;
  background:#10131f; color:var(--fg); font-size:1rem; resize:vertical; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); }
button { width:100%; padding:12px; border:0; border-radius:10px; background:var(--accent); color:#fff;
  font-size:1.05rem; font-weight:600; cursor:pointer; margin-top:6px; }
button:disabled { opacity:.6; cursor:default; }
.banner { padding:11px 14px; border-radius:10px; margin-bottom:18px; font-size:.95rem; }
.banner-ok { background:var(--ok); color:#fff; }
.banner-err { background:var(--err); color:#fff; }
.rc { color:var(--muted); font-size:.72rem; margin:14px 0 0; }
.rc a { color:var(--muted); }
.cam { margin-top:22px; border-top:1px solid #2c3146; padding-top:18px; }
.cam h2 { margin:0 0 12px; font-size:1rem; color:var(--muted); font-weight:600; }
.cam-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#10131f; border-radius:10px; overflow:hidden; }
.cam-wrap img { display:none; width:100%; height:100%; object-fit:contain; }
.cam-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; text-align:center; padding:0 12px; }