:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f7f8fa; color: #202a36; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 600px; margin: auto; padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
header, .result-heading, .actions { display: flex; align-items: center; gap: 12px; }
header { justify-content: space-between; }
.brand { font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
header .muted { font-size: 12px; }
.badge { font-size: 12px; padding: 5px 8px; border: 1px solid #d7dce2; border-radius: 4px; color: #4b5867; white-space: nowrap; }
h1 { font-size: 25px; font-weight: 600; line-height: 1.2; margin: 24px 0 16px; }
.intro, footer, .muted { color: #5e6a78; line-height: 1.5; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; font-size: 14px; }
select { font: inherit; background: #fff; color: inherit; border: 1px solid #c8cfd8; padding: 10px; border-radius: 5px; max-width: 65%; min-height: 44px; }
.camera { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #171c23; border: 2px solid #d7dce2; border-radius: 7px; }
video { width: 100%; height: 100%; object-fit: contain; }
.guide { position: absolute; inset: 12%; border: 1px dashed #ffffff80; border-radius: 3px; pointer-events: none; }
#camera-label { position: absolute; bottom: 10px; left: 10px; font-size: 12px; background: #171c23cc; color: #fff; padding: 5px 8px; border-radius: 3px; }
#status { min-height: 36px; font-size: 14px; line-height: 1.5; color: #39485a; }
button { min-height: 44px; flex: 1; padding: 10px; border: 1px solid #244c77; border-radius: 5px; background: #244c77; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
button.secondary { background: #fff; border-color: #c8cfd8; color: #39485a; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #244c77; outline-offset: 3px; }
#reading { margin-top: 24px; border-top: 1px solid #d7dce2; padding-top: 14px; scroll-margin-top: 16px; }
h2 { font-size: 18px; font-weight: 600; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.6 ui-monospace, monospace; margin: 12px 0 0; padding: 10px; background: #f2f4f7; border-radius: 4px; }
#warnings { color: #85551c; padding-left: 20px; font-size: 13px; line-height: 1.5; }
footer { font-size: 12px; margin-top: 32px; }
.camera[data-mode="facesheet"] { aspect-ratio: 3 / 4; max-height: 55vh; }
.camera[data-mode="facesheet"] .guide { inset: 6% 10%; }
.camera[data-state="bad"] { border-color: #b23b3b; }
.camera[data-state="bad"] .guide { border-color: #ed9898; }
.camera[data-state="success"] { border-color: #23804e; }
.camera[data-state="success"] .guide { display: none; }
.quality-line { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.capture-feedback { margin: 0; font-size: 13px; line-height: 1.5; color: #4b5867; }
.capture-feedback[data-state="bad"] { color: #a13131; }
.capture-feedback[data-state="success"] { color: #23804e; }
.success { position: absolute; inset: 0; background: #fffffff2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; color: #23804e; }
.success svg { width: 70px; height: 70px; fill: none; stroke: currentColor; stroke-width: 4; }
.success path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: check-draw .4s .1s ease-out forwards; }
.success strong { font-size: 21px; font-weight: 600; }
.success span { font-size: 13px; color: #5e6a78; }
#fields { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; gap: 12px; padding: 14px 0; overflow-wrap: anywhere; }
#fields dt { color: #5e6a78; } #fields dd { margin: 0; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .success path { animation: none; stroke-dashoffset: 0; } }
.intro { font-size: 14px; margin: 10px 0 16px; }
.settings { border-top: 1px solid #d7dce2; border-bottom: 1px solid #d7dce2; padding: 10px 0; margin: 14px 0; }
.settings summary { cursor: pointer; font-weight: 500; font-size: 14px; padding: 4px 0; }
.settings .controls { gap: 12px; margin: 14px 0; font-size: 14px; }
.check-option { display: flex; gap: 10px; align-items: center; font-size: 14px; margin: 12px 0; }
.check-option input { flex-shrink: 0; width: 20px; height: 20px; accent-color: #244c77; }
.settings-note { font-size: 12px; line-height: 1.5; margin: 10px 0; }
.camera-tools { display: flex; gap: 14px; align-items: center; }
.camera-tools button { flex: 0 1 160px; }
.range-label { display: flex; justify-content: space-between; font-size: 14px; margin-top: 14px; }
.range-label output { color: #5e6a78; }
input[type="range"] { width: 100%; min-height: 44px; accent-color: #244c77; }
.capture-actions { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; padding: 10px 0; background: #f7f8faf5; gap: 8px; }