* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: clamp(16px, 4vw, 48px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: linear-gradient(145deg, #edf3fb, #f8fafc); min-height: 100vh; display: grid; place-items: center; }
.phone { width: min(100%, 720px); background: #fff; border: 1px solid #dce3ed; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgb(28 57 90 / 12%); }.status-bar { height: 6px; background: #1c6dd0; }.screen { padding: clamp(22px, 5vw, 42px); display: grid; gap: 18px; }.top-bar { display: flex; justify-content: space-between; align-items: center; }.eyebrow { color: #1c6dd0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } h1 { margin: 3px 0 0; font-size: clamp(21px, 3vw, 28px); color: #172033; } p { margin: 0; }.muted { color: #626b78; font-size: 14px; }.operator { margin-top: 6px; color: #4c5a6c; font-size: 13px; font-weight: 600; }
.camera-wrap { position: relative; overflow: hidden; border-radius: 14px; background: #111827; aspect-ratio: 4 / 3; }.camera-wrap video, .scan-frame { width: 100%; height: 100%; display: block; object-fit: cover; }.scan-progress { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; background: rgb(12 23 39 / 58%); font-size: 15px; font-weight: 700; }.spinner { width: 46px; height: 46px; border: 5px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }.camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; color: #dbeafe; text-align: center; }.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } button { height: 46px; width: 100%; border: 0; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }.btn-primary { color: white; background: #1c6dd0; }.btn-secondary { color: #1c6dd0; background: #e8f1fd; }.btn-primary:disabled, .btn-secondary:disabled { opacity: .55; cursor: default; }
#result { display: grid; gap: 8px; padding-top: 2px; } input { width: 100%; height: 48px; border: 1px solid #d0d0d5; border-radius: 10px; padding: 0 14px; font-size: 16px; background: white; }.checksum-ok { color: #16803c; font-weight: 600; }.checksum-warning { color: #b54708; font-weight: 600; }.error { color: #b42318; }.hint { color: #7b8490; font-size: 12px; line-height: 1.45; }
.app-footer { display: grid; gap: 12px; padding-top: 4px; }.sheet-link { display: block; text-align: center; color: #1c6dd0; font-size: 14px; font-weight: 700; text-decoration: none; }.sheet-link:hover { text-decoration: underline; }
@media (max-width: 560px) { body { padding: 0; background: #fff; place-items: start; }.phone { width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }.screen { padding: 24px 18px 36px; }.status-bar { height: 4px; } }