:root { --theme: #111827; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, sans-serif; background: #eef2f7; color: #111827; }
body { display: flex; justify-content: center; }
.app-shell { width: 100%; min-height: 100vh; max-width: 1100px; background: #fff; display: flex; flex-direction: column; }
.topbar { background: var(--theme); color: #fff; padding: 18px 24px; font-weight: 700; }
.content { flex: 1; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card { width: min(100%, 760px); padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 12px 40px rgba(15,23,42,.12); text-align: center; }
.hero-title { font-size: clamp(32px, 5vw, 58px); margin: 0 0 12px; }
.hero-text { font-size: 20px; color: #64748b; margin: 0 0 28px; }
.btn { border: 0; border-radius: 14px; padding: 16px 24px; font-size: 18px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.btn-primary { background: var(--theme); color: #fff; }
.btn-secondary { background: #e2e8f0; color: #0f172a; }
.btn-danger { background: #dc2626; color: #fff; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.camera-wrap { width: min(100%, 720px); aspect-ratio: 4/3; overflow: hidden; border-radius: 22px; background: #0f172a; position: relative; }
.camera-wrap video, .camera-wrap canvas, .camera-wrap img { width: 100%; height: 100%; object-fit: cover; }
.status { margin-top: 18px; min-height: 24px; color: #475569; font-weight: 600; }
.code { font-size: 36px; font-weight: 800; letter-spacing: 6px; }
@media (max-width: 700px) { .content { padding: 16px; } .card { padding: 20px; border-radius: 18px; } .actions .btn { width: 100%; } }