body{font-family:Segoe UI, Roboto, Arial, sans-serif;background:#f7f9fc;color:#222;margin:0;padding:20px}
.container{max-width:1100px;margin:0 auto}
/* Responsive video container: fills available width up to max-width and keeps a pleasant preview aspect */
#video-container{position:relative;width:100%;max-width:1100px;aspect-ratio:4/3;background:#000;border-radius:6px;overflow:hidden;margin:0 auto}
video{width:100%;height:100%;object-fit:cover;display:block}
/* Overlay uses a configurable CSS variable for aspect ratio so we can match document size (default: A4-ish portrait ~ 1:1.414) */
:root{--overlay-aspect: 1 / 1.414}
#overlay-rect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86%;aspect-ratio:var(--overlay-aspect);max-width:1000px;max-height:1000px;border:6px solid rgba(255,0,0,0.9);box-sizing:border-box;border-radius:6px;pointer-events:none;transition:border-color 150ms ease}
.controls{margin-top:12px;display:flex;gap:12px;align-items:center}
#result img{max-width:80%;margin-top:12px;border:1px solid #ddd}
#status{font-size:14px;color:#444}
button{padding:8px 14px;border-radius:6px;border:0;background:#0b5fff;color:#fff;cursor:pointer}
button:disabled{opacity:0.5;cursor:not-allowed}

/* Accessibility / smaller screens: reduce padding and overlay size */
@media (max-width:420px){
	body{padding:12px}
	#video-container{aspect-ratio:4/3}
	#overlay-rect{width:92%}
}

/* Landscape documents: helper class to make overlay landscape (e.g., invoices scanned sideways) */
.overlay-landscape{--overlay-aspect: 1.414 / 1}

/* Settings panel */
.settings{margin-top:14px;background:#fff;border:1px solid #e6e9ef;padding:12px;border-radius:8px}
.settings h3{margin:0 0 8px 0;font-size:15px}
.setting-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px}
.setting-row label{font-size:13px;color:#333}
.setting-row input[type="number"]{width:80px;padding:4px;margin-left:6px}
.setting-row input[type="range"]{vertical-align:middle}
.setting-row button{padding:6px 10px;font-size:13px}
/* OCR preview */
.ocr-preview{margin-top:12px;background:#fff;border:1px solid #e6e9ef;padding:12px;border-radius:8px}
.ocr-preview h3{margin:0 0 8px 0;font-size:15px}
.ocr-text{white-space:pre-wrap;font-size:13px;color:#111;max-height:160px;overflow:auto;padding:6px;border:1px dashed #e6e9ef;background:#fbfcfe}
.ocr-meta{margin-top:8px;font-size:13px;color:#333}