*{box-sizing:border-box;margin:0;padding:0}
:root{
  --serene:#0a7a49; --serene-dark:#006b3f; --veneka:#1b2a4a; --ink:#1f241f;
  --line:#e2e6e0; --bg:#f4f6f3; --muted:#7a8079; --gold:#fcd116; --red:#ce1126;
}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}

.topbar{display:flex;align-items:center;gap:20px;padding:16px 28px;background:#fff;border-bottom:3px solid var(--serene);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.logo-serene{color:var(--serene);font-size:26px;letter-spacing:.5px}
.x{color:var(--muted);font-weight:400}
.logo-veneka{color:var(--veneka);font-size:22px;letter-spacing:3px}
.tagline{color:var(--muted);font-size:14px;flex:1;min-width:200px}
.counter{background:#eef6f0;border:1px solid var(--serene);color:var(--serene-dark);padding:8px 14px;border-radius:999px;font-size:13px}
.counter b{font-size:16px}

.stage{max-width:920px;margin:26px auto;padding:0 18px}

.rail{list-style:none;display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.rail li{flex:1;min-width:150px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.rail li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef0ec;color:var(--muted);font-weight:700;font-size:12px}
.rail li.active{color:var(--serene-dark);border-color:var(--serene);background:#f2fbf6}
.rail li.active span{background:var(--serene);color:#fff}
.rail li.complete span{background:var(--serene-dark);color:#fff}
.rail li.complete{color:var(--ink)}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 6px 24px rgba(20,40,30,.05);margin-bottom:20px}
.step h2{font-size:20px;color:var(--veneka);margin-bottom:8px}
.lead{color:#4a504a;font-size:14.5px;margin-bottom:20px;max-width:70ch}
.lead b{color:var(--ink)}
.sim{background:#fff3cd;color:#7a5c00;padding:1px 8px;border-radius:6px;font-size:12.5px;font-weight:600}

.capture-row{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.preview{position:relative;width:360px;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.preview img{display:block;width:100%}
.purge-veil{position:absolute;inset:0;background:rgba(15,30,22,.86);color:#fff;display:none;place-items:center;text-align:center;font-weight:700}
.purge-veil.show{display:grid}
.purge-veil small{font-weight:400;opacity:.8;font-size:12px}

.capture-actions{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px}
.btn{display:inline-block;text-align:center;padding:12px 18px;border-radius:10px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn.primary{background:var(--serene);color:#fff}
.btn.primary:hover{background:var(--serene-dark)}
.btn.primary:disabled{background:#b9c6be;cursor:not-allowed}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--veneka)}
.btn.ghost:hover{border-color:var(--serene)}
.muted{color:var(--muted)}.small{font-size:12px}

.ocr-status{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--serene-dark);flex-wrap:wrap}
.bar{flex-basis:100%;height:6px;background:#eef0ec;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--serene);transition:width .2s}
.spinner{width:16px;height:16px;border:2px solid #cfe6da;border-top-color:var(--serene);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.raw{margin-top:18px}
.raw summary{cursor:pointer;color:var(--muted);font-size:13px}
.raw pre{margin-top:10px;background:#0f1a14;color:#9fe6bf;padding:14px;border-radius:8px;font-size:12px;overflow:auto;max-height:220px;white-space:pre-wrap}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.fld{position:relative;background:#f7faf8;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.fld label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.fld output{font-size:17px;font-weight:700;color:var(--ink)}
.fld output.pin{color:var(--serene-dark);letter-spacing:.5px}
.fld .lock{position:absolute;top:10px;right:12px;opacity:.5;font-size:13px}
.maker-checker{background:#eef6f0;border:1px dashed var(--serene);border-radius:10px;padding:12px 14px;font-size:13px;color:#3a503f;margin-bottom:18px}
.maker-checker .tag{display:inline-block;background:var(--serene);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;margin-right:8px;text-transform:uppercase;letter-spacing:.5px}

.verify-row{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.selfie{width:280px;max-width:100%;aspect-ratio:4/3;border-radius:12px;border:1px solid var(--line);background:#0f1a14;position:relative;overflow:hidden;display:grid;place-items:center}
.selfie video,.selfie canvas{width:100%;height:100%;object-fit:cover}
.selfie-placeholder{color:#7fb79a;text-align:center;font-size:44px;line-height:1.1}
.selfie-placeholder small{font-size:12px}
.liveness{position:absolute;bottom:0;left:0;right:0;background:rgba(10,122,73,.9);color:#fff;font-size:12.5px;padding:7px;text-align:center}
.verify-actions{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px}
.scenario{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#4a504a;background:#faf7ee;border:1px solid #efe6c8;border-radius:10px;padding:12px}
.nia-status{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--serene-dark)}
.nia-result{margin-top:20px;border-radius:12px;padding:18px 20px;font-size:15px;display:none}
.nia-result.show{display:block}
.nia-result.pass{background:#eafaf1;border:1px solid var(--serene)}
.nia-result.fail{background:#fdecec;border:1px solid var(--red)}
.nia-result h3{margin-bottom:6px}
.nia-result.pass h3{color:var(--serene-dark)}
.nia-result.fail h3{color:var(--red)}
.match-score{font-size:34px;font-weight:800}
.nia-result.pass .match-score{color:var(--serene-dark)}
.nia-result.fail .match-score{color:var(--red)}

.verdict{display:inline-block;font-size:18px;font-weight:800;padding:8px 16px;border-radius:10px;margin:6px 0 10px}
.verdict.pass{background:var(--serene);color:#fff}
.verdict.fail{background:var(--red);color:#fff}

.grp{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--serene-dark);margin:20px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.grp .opt{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400;font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-grid label{display:flex;flex-direction:column;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);gap:5px}
.form-grid input,.form-grid select{font-size:15px;font-weight:600;color:var(--ink);padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;text-transform:none;letter-spacing:0}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--serene)}
.form-grid input:disabled{background:#f2f4f1;color:var(--muted)}
.premium-box{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#eef6f0;border:1px solid var(--serene);border-radius:12px;padding:14px 18px;margin:18px 0 8px;flex-wrap:wrap}
.premium-box small{color:var(--muted);font-weight:400}
.premium{font-size:26px;font-weight:800;color:var(--serene-dark)}
.doc-verify{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-bottom:8px}
.doc-result{background:#eef6f0;border:1px solid var(--serene);border-radius:10px;padding:12px 14px;font-size:13.5px;color:#33503f}
.doc-result small{color:var(--muted);word-break:break-word}

.done h2{color:var(--serene-dark)}
.summary{background:#f7faf8;border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;font-size:14px}
.summary b{color:var(--veneka)}
.reg-note{background:#eef6f0;border-radius:10px;padding:16px 18px;font-size:13.5px;margin-bottom:18px}
.reg-note ul{margin:8px 0 0 18px}
.reg-note li{margin-bottom:5px}

.foot{max-width:920px;margin:0 auto 40px;padding:16px 24px;color:var(--muted);font-size:12px;text-align:center;line-height:1.6}

@media (max-width:560px){.fields{grid-template-columns:1fr}}