: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: #1c1830; }
#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(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.top-card, .bottom-card { width: min(100%, 480px); margin: 0 auto; padding: 12px 14px; color: #f7f5ff; background: rgba(18, 13, 35, .86); border: 1px solid rgba(213, 185, 255, .45); border-radius: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.eyebrow { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #e6bdff; }
h1 { margin: 4px 0 6px; font-size: 1.13rem; line-height: 1.2; }
p { margin: 0; font-size: .82rem; line-height: 1.35; }
#status { color: #e6bdff; font-weight: 700; }
.tracking { margin-top: 5px; font-size: .74rem; }
.bottom-card { pointer-events: auto; }
button { display: block; width: 100%; border: 0; border-radius: 9px; padding: 11px 16px; margin-bottom: 8px; color: #1d1433; background: #e6bdff; font-size: .98rem; font-weight: 800; }
button:disabled { color: #d0cbd5; background: #6d6279; }
details { margin-top: 8px; }
summary { cursor: pointer; font-size: .78rem; color: #eed6ff; }
pre { max-height: 26vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .7rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; }
.detail { margin-top: 8px; color: #d4c9db; font-size: .7rem; }
.license { margin-top: 5px; color: #b8adbf; font-size: .62rem; line-height: 1.25; }
a { color: #e6bdff; }