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

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -10%, #263b68, #101827 54%); }

button { min-height: 46px; border: 0; border-radius: 12px; padding: 0 18px; font: inherit; font-weight: 750; cursor: pointer; }
button:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .5; }

.receiver-shell { width: min(100%, 640px); margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); }
.eyebrow { margin: 0 0 7px; color: #b9ccff; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.65rem, 7vw, 2.25rem); letter-spacing: -.04em; }
.lede { margin: 10px 0 20px; color: #c7d2e5; font-size: .95rem; line-height: 1.55; }

.camera-card, .stats, .confirmation { border: 1px solid #31415f; border-radius: 18px; background: rgba(17, 29, 50, .86); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.camera-card { overflow: hidden; }
.preview-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #050913; }
#camera-preview { width: 100%; height: 100%; display: block; object-fit: cover; }
#sample-canvas { display: none; }
.scan-guide { position: absolute; inset: 14%; display: grid; place-items: end center; border: 3px solid #f8fafc; border-radius: 8px; box-shadow: 0 0 0 999px rgba(2, 6, 23, .22), 0 0 0 1px rgba(2, 6, 23, .9) inset; pointer-events: none; }
.scan-guide::before, .scan-guide::after { content: ""; position: absolute; width: 25px; height: 25px; border: 4px solid #ff9d25; }
.scan-guide::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.scan-guide::after { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
.scan-guide span { margin: 0 10px 11px; padding: 5px 9px; border-radius: 999px; background: rgba(2, 6, 23, .78); color: #fff; font-size: .76rem; font-weight: 700; }

.camera-actions, .confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 14px 0; }
.primary { background: #ff9d25; color: #221201; }
.secondary { border: 1px solid #526582; background: #202e46; color: #eef4ff; }
.danger { background: #f05a48; color: #fff; }
.status, .remediation, .recognition { margin: 13px 14px 14px; line-height: 1.45; font-size: .9rem; }
.status { color: #cbd8ed; }
.remediation { border-left: 4px solid #f05a48; padding-left: 10px; color: #ffc0b7; }
.recognition { border: 1px solid #34d399; border-radius: 10px; padding: 10px; background: #052e2b; color: #d1fae5; font-weight: 750; }

.next-volume { margin: 15px 0; border: 2px solid #ff9d25; border-radius: 14px; padding: 14px; background: #442a0a; color: #fff1dd; font-weight: 800; line-height: 1.45; }
.confirmation { margin: 15px 0; padding: 16px; border-color: #f05a48; }
.confirmation h2 { margin: 0; font-size: 1.15rem; }
.confirmation p { color: #dbe7fb; line-height: 1.5; }
.confirmation-actions { padding: 0; }
.download-ready { margin: 15px 0; padding: 16px; border: 1px solid #34d399; border-radius: 14px; background: #052e2b; color: #d1fae5; }
.download-ready h2 { margin: 0 0 8px; font-size: 1rem; }
.download-ready p { margin: 0 0 12px; line-height: 1.45; }
.download-action { display: inline-block; min-height: 44px; padding: 11px 16px; border: 1px solid #6ee7b7; border-radius: 10px; background: #047857; color: #fff; font-weight: 800; text-decoration: none; }
.download-action:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.stat { min-height: 92px; padding: 15px; border-right: 1px solid #31415f; border-bottom: 1px solid #31415f; }
.stat:nth-child(even) { border-right: 0; }
.stat:nth-last-child(-n + 2) { border-bottom: 0; }
.stat span { display: block; color: #aebfd8; font-size: .78rem; }
.stat strong { display: block; margin-top: 7px; overflow-wrap: anywhere; font-size: .98rem; }
.wide { grid-column: span 2; border-right: 0; }

footer { padding: 18px 4px 0; color: #9fb0ca; font-size: .78rem; line-height: 1.5; }

@media (min-width: 560px) {
  .receiver-shell { padding-left: 24px; padding-right: 24px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .wide { grid-column: auto; }
  .stat:nth-child(even) { border-right: 1px solid #31415f; }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-last-child(-n + 3) { border-bottom: 0; }
}