*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Cairo',sans-serif;background:#f9fafb;color:#111;display:flex;justify-content:center;align-items:center;min-height:100vh}
.app-container{width:100%;max-width:520px;background:#fff;border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,0.1);overflow:hidden;display:flex;flex-direction:column;min-height:90vh}
header{background:#2563eb;color:#fff;text-align:center;padding:15px}
header h1{font-size:1.2rem}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:15px;gap:15px}
.video-container{position:relative;width:100%;max-width:480px}
video{display:none}
canvas{width:100%;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
#recognizedText{font-size:1.2rem;font-weight:bold;padding:10px 15px;background:#f3f4f6;border-radius:10px;min-height:40px;display:flex;align-items:center;justify-content:center;width:100%}
button{padding:12px 20px;border:none;border-radius:10px;font-size:1rem;cursor:pointer;transition:.2s;width:100%}
#startBtn{background:#22c55e;color:#fff}
#startBtn:hover{background:#16a34a}
footer{text-align:center;padding:10px;font-size:.8rem;background:#f9fafb;color:#6b7280}
.debug{font-size:.8rem;color:#6b7280;text-align:center;white-space:pre-wrap}