* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
    background: #f8fafc;
}

#loading-screen {
    position: fixed; inset: 0; background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999;
}
#loading-screen img { width: 180px; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3)); }
.loading-dots { display: flex; gap: 8px; margin-top: 24px; }
.loading-dots span {
    width: 8px; height: 8px; background: white; border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }

.btn-primary {
    background: #1E40AF; color: #fff; padding: 14px 22px; border-radius: 14px;
    font-weight: 600; border: none; cursor: pointer;
    box-shadow: 0 8px 16px -4px rgba(30,64,175,0.35);
}
.btn-primary:disabled { background: #94A3B8; box-shadow: none; cursor: not-allowed; }
.btn-secondary {
    background: #F1F5F9; color: #1E293B; padding: 14px 22px; border-radius: 14px;
    font-weight: 600; border: none; cursor: pointer;
}
.btn-danger {
    background: #DC2626; color: #fff; padding: 14px 22px; border-radius: 14px;
    font-weight: 600; border: none; cursor: pointer;
}

.code-input {
    width: 56px; height: 64px; text-align: center; border: 2px solid #E2E8F0;
    border-radius: 12px; font-size: 26px; font-weight: 700; color: #0F172A; outline: none;
}
.code-input:focus { border-color: #1E40AF; box-shadow: 0 0 0 4px rgba(30,64,175,0.15); }

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: #0f172a; color: #fff; padding: 12px 18px; border-radius: 12px;
    font-size: 14px; z-index: 100; max-width: 90%;
}
.toast.error { background: #b91c1c; }
.toast.success { background: #047857; }

.qr-scan-region { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #0f172a; }
.qr-scan-region video { width: 100%; height: 100%; object-fit: cover; }
.qr-scan-frame {
    position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 16px;
    box-shadow: 0 0 0 999px rgba(0,0,0,.35);
}

.camera-view { position: relative; width: 100%; flex: 1; background: #0f172a; border-radius: 20px; overflow: hidden; min-height: 280px; }
.camera-view video, .camera-view img { width: 100%; height: 100%; object-fit: cover; }
.shutter {
    width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff;
    background: rgba(255,255,255,.25); box-shadow: 0 0 0 4px rgba(30,64,175,.35);
}
.shutter:active { transform: scale(.95); }

.proof-thumb {
    width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: #e2e8f0;
}