:root{--max-width:900px;--accent:#2b8cff}

/* Mobile-first styles */
:root{--max-width:420px;--accent:#2b8cff;--bg:#f4f6f8;--card:#ffffff}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;display:flex;justify-content:center}
main{width:100%;max-width:var(--max-width);margin:12px;padding:14px}
h1{font-size:1.25rem;margin:0 0 10px;text-align:center}
.config{text-align:center;margin-bottom:8px;color:#333}
.example-image{margin-top:16px;padding:12px;background:var(--card);border-radius:8px;border:1px solid #e9e9e9}
.example-image h3{margin:0 0 8px;font-size:0.9rem;color:#666;font-weight:600}
.example-image .arabic{font-size:0.85rem}
.camera{display:flex;flex-direction:column;gap:10px}
.camera-viewport{position:relative}
video{width:100%;height:320px;background:#000;border-radius:10px;object-fit:cover;display:block}

/* Guide box overlay - only pixels inside this box are analyzed for motion/digits */
.guide-box{position:absolute;box-sizing:border-box;pointer-events:none;border-radius:8px;left:6%;right:6%;top:34%;bottom:34%;transition:border-color .2s ease,box-shadow .2s ease}
.guide-box.state-searching{border:3px solid rgba(255,255,255,.85);box-shadow:0 0 8px rgba(0,0,0,.35);animation:guideBoxPulse 1.6s ease-in-out infinite}
.guide-box.state-locked{border:3px solid #2eb872;box-shadow:0 0 0 3px rgba(46,184,114,.25);animation:none;opacity:1}
@keyframes guideBoxPulse{0%,100%{opacity:.65}50%{opacity:1}}
.zoom-control{display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:var(--card);border-radius:8px;border:1px solid #e9e9e9}
.zoom-control label{font-size:0.9rem;font-weight:600;color:#333;text-align:center}
.zoom-control .arabic{font-size:0.85rem;font-weight:400}
#zoomSlider{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none;appearance:none}
#zoomSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer}
#zoomSlider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}
#zoomValue{font-weight:700;color:var(--accent)}
.controls{display:flex;flex-direction:column;gap:10px;margin-top:6px}
button{width:100%;padding:14px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-size:1rem;font-weight:600}
button.secondary{background:#fff;color:#111;border:1px solid #e0e0e0}
button:disabled{opacity:.6;cursor:not-allowed}
.preview img{width:100%;border-radius:8px;border:1px solid #e9e9e9;margin-top:6px}
#uploadProgress{margin-top:8px;color:var(--accent);text-align:center;font-weight:600}
pre{background:#fff;padding:10px;border-radius:8px;overflow:auto;border:1px solid #eee}
.odometer{font-size:2.6rem;font-weight:800;color:#111;margin:10px 0;padding:16px;border-radius:10px;background:var(--card);border:1px solid #e9e9e9;text-align:center}

/* Small tweaks for wider screens */
@media(min-width:600px){
	main{padding:20px;margin:20px;border-radius:10px;background:transparent}
	video{height:360px}
	.controls{flex-direction:row}
	button{width:auto;flex:1}
}

/* Loader overlay */
.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);z-index:9999}
/* Respect HTML `hidden` attribute (author styles may override UA styles) */
.loader-overlay[hidden]{display:none !important}
.loader-box{background:var(--card);padding:16px 20px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,0.12)}
.loader-text{font-weight:700;color:#111}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(0,0,0,0.08);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Loader result styles */
.loader-result{display:flex;flex-direction:column;align-items:center;gap:10px}
.loader-odometer{font-size:1.8rem;font-weight:800;color:#111;padding:8px 14px;border-radius:8px;background:#f8f9fa;border:1px solid #eee}
.loader-box button.secondary{background:#fff;color:#111;border:1px solid #e0e0e0;padding:8px 14px;border-radius:8px}
.loader-box button.secondary:active{transform:translateY(1px)}