:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #14213d;
    background: #f3f6fb;
}
body { margin: 0; background: #f3f6fb; }
.scanner-shell { width: min(100% - 24px, 680px); margin: 0 auto; padding: 20px 0 28px; }
.app-header { display: flex; align-items: center; gap: 14px; padding: 10px 4px 22px; }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #1769e0; color: white; font-size: 34px; }
.app-header h1 { margin: 0; font-size: 1.55rem; font-weight: 750; }
.app-header p { margin: 3px 0 0; color: #64748b; }
.panel { background: white; border: 1px solid #e3e9f2; border-radius: 20px; padding: 22px; margin-bottom: 16px; box-shadow: 0 8px 28px #18345a0a; }
.panel h2 { font-size: 1.2rem; font-weight: 750; margin-bottom: 8px; }
.muted { color: #64748b; font-size: .95rem; }
.camera-frame { position: relative; overflow: hidden; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin: 18px 0; border-radius: 16px; background: #101827; }
.camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.camera-placeholder { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #cbd5e1; }
.qr-symbol { font-size: 74px; line-height: 1; color: #60a5fa; }
.scan-corners { pointer-events: none; position: absolute; inset: 18% 18%; border: 0 solid transparent; }
.scan-corners::before { content: ""; position: absolute; inset: 0; border: 3px solid #60a5fa; border-radius: 18px; opacity: .85; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.button-row .btn { min-height: 48px; }
.status-message { margin-top: 14px; padding: 11px 13px; background: #eff6ff; border-radius: 10px; color: #1d4ed8; font-size: .92rem; overflow-wrap: anywhere; }
.result-panel { border-color: #ccebd8; }
.success-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.success-heading h2 { margin: 0; }
.success-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dcfce7; color: #15803d; font-weight: 800; }
.result-text { overflow-wrap: anywhere; }
footer { text-align: center; padding: 10px 12px; color: #64748b; font-size: .85rem; }
@media (max-width: 420px) {
    .scanner-shell { width: min(100% - 16px, 680px); padding-top: 12px; }
    .panel { padding: 16px; border-radius: 16px; }
    .app-header h1 { font-size: 1.35rem; }
    .button-row { flex-direction: column; }
}