:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #081c2b; }

#camera { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; }

.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }

.top-card, .bottom-card { width: min(100%, 480px); margin: 0 auto; padding: 13px 16px; color: #f4fbff; background: rgba(4, 21, 33, .85); border: 1px solid rgba(169, 225, 242, .35); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }

.eyebrow { display: block; font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a9eff5; }

h1 { margin: 5px 0 7px; font-size: 1.15rem; line-height: 1.25; }

p { margin: 0; font-size: .86rem; line-height: 1.4; }

#status { color: #a9eff5; font-weight: 700; }

.bottom-card { pointer-events: auto; }

button { display: block; width: 100%; border: 0; border-radius: 9px; padding: 12px 18px; margin-bottom: 9px; color: #052535; background: #71e3ed; font-size: 1rem; font-weight: 800; }

button:disabled { color: #c8d3d5; background: #5b7379; }

.detail { margin-top: 6px; color: #c0ccd2; font-size: .72rem; }