:root{--navy: #072030;--navy-deep: #0d3048;--blue: #0cccc6;--blue-hover: #29bfc2;--orange: #d9480f;--bg: #f0f3f5;--white: #ffffff;--text: #072030;--text-muted: #4c6978;--border: #d3d3d3;--danger: #d32422;--success: #1f9d55;--radius-sm: 10px;--radius-md: 12px;--radius-pill: 30px;--shadow: 0 10px 30px rgba(7, 32, 48, .1);--font-heading: "Saira", "Helvetica Neue", Arial, sans-serif;--font-body: "Saira", Arial, Helvetica, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-heading);color:var(--navy);margin:0}button{font-family:var(--font-body)}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-header{background:var(--navy);padding:18px 24px;display:flex;align-items:center;justify-content:space-between}.app-header img{height:32px}.app-header .env-tag{color:var(--orange);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(217,72,15,.5);padding:4px 10px;border-radius:var(--radius-pill)}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:32px 16px 64px}.container{width:100%;max-width:520px}.steps{display:flex;justify-content:center;gap:8px;margin-bottom:28px}.step-pill{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--radius-pill);background:var(--white);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-muted)}.step-pill .num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--border);color:var(--text-muted);font-size:12px}.step-pill.active{color:var(--navy);border-color:var(--blue)}.step-pill.active .num{background:var(--blue);color:var(--navy)}.step-pill.done .num{background:var(--success);color:var(--white)}.card{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:28px}.card h2{font-size:22px;margin-bottom:8px}.card .subtitle{color:var(--text-muted);font-size:14px;margin-bottom:24px;line-height:1.5}.camera-frame{position:relative;width:100%;aspect-ratio:4 / 3;background:#000;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:16px}.camera-frame.selfie{aspect-ratio:3 / 4;max-width:320px;margin-left:auto;margin-right:auto;border-radius:50%/40%}.camera-frame video,.camera-frame img{width:100%;height:100%;object-fit:cover;display:block}.camera-frame .id-guide{position:absolute;top:10%;right:6%;bottom:10%;left:6%;border:2px dashed rgba(255,255,255,.7);border-radius:var(--radius-sm);pointer-events:none}.camera-frame .overlay-text{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:var(--white);font-size:12px;background:#00000059;padding:4px}.btn{border:none;border-radius:var(--radius-sm);padding:13px 20px;font-size:15px;font-weight:600;cursor:pointer;width:100%;transition:filter .15s ease,transform .05s ease}.btn:active{transform:scale(.99)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--blue);color:var(--navy)}.btn-primary:hover:not(:disabled){background:var(--blue-hover)}.btn-secondary{background:var(--white);color:var(--navy);border:1.5px solid var(--border);margin-top:10px}.btn-secondary:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}.btn-row{display:flex;gap:10px}.btn-row .btn{width:auto;flex:1}.alert{border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.4}.alert.error{background:#fdecea;color:var(--danger)}.alert.warning{background:#fff4e8;color:#8a5a22}.alert.success{background:#e9f8ee;color:var(--success)}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:20px 0}.data-grid .field{display:flex;flex-direction:column;gap:2px}.data-grid .field.full{grid-column:1 / -1}.data-grid label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:600}.data-grid span{font-size:15px;color:var(--text);font-weight:500}.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:var(--white);animation:spin .7s linear infinite;display:inline-block;margin-right:8px;vertical-align:-3px}@keyframes spin{to{transform:rotate(360deg)}}.app-footer{text-align:center;color:var(--text-muted);font-size:12px;padding:16px}