:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; --background: #f8fbf6; --text: #142018; --muted: #647067; --surface-high: #e8f0e5; --surface-highest: #e2ebde; --primary: #78c843; --status: #234c14; --error: #ba1a1a; background: var(--background); color: var(--text); }
:root[data-dark="true"] { color-scheme: dark; --background: #121a1e; --text: #f6faf4; --muted: #b8c4b9; --surface-high: #202d32; --surface-highest: #29373d; --primary: #78c843; --status: #91d94e; --error: #ffb4ab; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app { width: 100%; height: 100%; height: 100dvh; max-height: 100%; }
#scanner { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-y: auto; background: var(--background); color: var(--text); }
#scanner::backdrop { background: var(--background); }
.scanner-page { width: min(100%, 560px); margin-inline: auto; padding: 0 20px 28px; text-align: center; }
.scanner-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 68px; }
.scanner-header h1 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; min-height: 48px; }
button:active { opacity: .72; }
button:disabled { opacity: .42; cursor: default; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { display: grid; place-items: center; width: 44px; background: transparent; padding: 0; }
[dir="rtl"] .icon-button svg { transform: scaleX(-1); }
.camera-panel { position: relative; width: 100%; aspect-ratio: .92; border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--surface-highest); }
#camera { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.camera-panel[data-ready="true"]::after { content: ''; position: absolute; inset: 0; background: #0000001f; pointer-events: none; }
#camera-permission { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px; background: var(--surface-highest); z-index: 2; }
#camera-permission[hidden] { display: none; }
#camera-permission > svg { width: 44px; height: 44px; color: var(--status); }
#camera-permission h2 { font-size: 16px; font-weight: 600; margin: 12px 0 0; }
#camera-permission p { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
#camera-retry { background: var(--primary); color: #142018; padding: 10px 20px; border-radius: 24px; margin-top: 18px; }
.scan-frame { position: absolute; width: 72%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.scan-frame i { position: absolute; width: 30px; height: 30px; border: 3px solid var(--primary); border-radius: 3px; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.scan-beam { display: none; position: absolute; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, var(--primary), transparent); animation: scan 1.65s ease-in-out infinite alternate; }
[data-ready="true"] .scan-beam { display: block; }
@keyframes scan { from { top: 8%; } to { top: 92%; } }
#scan-instruction { margin: 22px 0 0; font-size: 14px; font-weight: 600; }
#camera-status { margin: 6px 0 0; min-height: 18px; color: var(--status); font-size: 12px; }
#camera-status[data-error="true"] { color: var(--error); }
.scanner-actions { display: flex; justify-content: space-evenly; margin-top: 24px; }
.scanner-action { display: flex; align-items: center; flex-direction: column; background: transparent; padding: 0 12px; }
.scanner-action span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--surface-high); }
.scanner-action[aria-pressed="true"] span { background: var(--primary); color: #142018; }
.scanner-action b { margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 500; }
:focus-visible { outline: 3px solid var(--status); outline-offset: 3px; }
@media (orientation: landscape) and (max-height: 600px) { .camera-panel { width: min(100%, 320px); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .scan-beam { animation: none; top: 50%; } * { scroll-behavior: auto !important; } }