:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { min-height: 100%; overscroll-behavior: none; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { -webkit-user-select: none; user-select: none; }
input { -webkit-appearance: none; appearance: none; }

.pt-safe { padding-top: var(--safe-top); }
.pb-safe { padding-bottom: max(16px, var(--safe-bottom)); }
.top-safe { top: var(--safe-top); }

.screen { position: relative; }
.glass-card { background: linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .9)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.logo-shell { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 30px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(34,211,238,.12), rgba(15,23,42,.72)); box-shadow: 0 18px 60px rgba(6,182,212,.13), inset 0 1px rgba(255,255,255,.08); }
.ambient { position: absolute; border-radius: 999px; filter: blur(80px); opacity: .28; }
.ambient-one { width: 360px; height: 360px; background: #0891b2; top: -130px; right: -130px; }
.ambient-two { width: 320px; height: 320px; background: #1d4ed8; bottom: -170px; left: -170px; }
.grid-noise { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 78%); }

.spinner { width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(2,6,23,.3); border-top-color: #020617; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.event-skeleton { background: linear-gradient(110deg, rgba(255,255,255,.04) 8%, rgba(255,255,255,.075) 18%, rgba(255,255,255,.04) 33%); background-size: 200% 100%; animation: shine 1.25s linear infinite; }
@keyframes shine { to { background-position-x: -200%; } }

.camera-vignette { pointer-events: none; background: radial-gradient(circle at center, transparent 25%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.65) 100%), linear-gradient(to bottom, rgba(0,0,0,.5), transparent 28%, transparent 72%, rgba(0,0,0,.7)); }
.scan-frame { border-radius: 38px; box-shadow: 0 0 0 9999px rgba(0,0,0,.18); }
.corner { position: absolute; width: 58px; height: 58px; border-color: rgba(255,255,255,.96); filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.corner-tl { top: 0; left: 0; border-top: 5px solid; border-left: 5px solid; border-top-left-radius: 26px; }
.corner-tr { top: 0; right: 0; border-top: 5px solid; border-right: 5px solid; border-top-right-radius: 26px; }
.corner-bl { bottom: 0; left: 0; border-bottom: 5px solid; border-left: 5px solid; border-bottom-left-radius: 26px; }
.corner-br { bottom: 0; right: 0; border-bottom: 5px solid; border-right: 5px solid; border-bottom-right-radius: 26px; }
.scan-line { position: absolute; left: 9%; right: 9%; top: 16%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, #67e8f9 18%, white 50%, #67e8f9 82%, transparent); box-shadow: 0 0 18px #22d3ee, 0 0 40px rgba(34,211,238,.5); animation: scanline 2.05s ease-in-out infinite alternate; }
@keyframes scanline { from { transform: translateY(0); opacity: .78; } to { transform: translateY(260px); opacity: 1; } }

.scanner-action { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 20px; color: rgba(255,255,255,.92); font-size: 11px; font-weight: 800; letter-spacing: .02em; transition: background .15s ease, transform .15s ease; }
.scanner-action:active { transform: scale(.97); background: rgba(255,255,255,.08); }

.result-backdrop { background: rgba(5,150,105,.91); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
#result-overlay.result-fail .result-backdrop { background: rgba(190,24,93,.93); }
#result-overlay.result-fail #result-icon { background: rgba(255,255,255,.12); }
#result-overlay.result-success .result-backdrop { background: rgba(5,150,105,.91); }

.drawer { animation: drawerUp .2s ease-out both; }
@keyframes drawerUp { from { transform: translateY(20px); opacity: .9; } to { transform: translateY(0); opacity: 1; } }

.menu-row { width: 100%; display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 13px 12px; text-align: left; font-size: 14px; font-weight: 800; color: #cbd5e1; transition: background .15s ease; }
.menu-row:active { background: rgba(255,255,255,.06); }

.history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.075); }
.history-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; }
.history-icon.pass { background: rgba(16,185,129,.12); color: #34d399; }
.history-icon.fail { background: rgba(244,63,94,.12); color: #fb7185; }

.event-card { width: 100%; text-align: left; padding: 17px; border-radius: 24px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.event-card:active { transform: scale(.988); border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.07); }

@media (min-width: 768px) {
  .scanner-layout { max-width: 620px; margin: 0 auto; border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}