*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:linear-gradient(180deg,var(--deep) 0,var(--deep) 300px,var(--mist) 300px,#fff 100%);color:#0b1a1f;font-family:var(--body);display:flex;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px))}
.card{width:100%;max-width:460px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,29,37,.28),0 0 0 1px rgba(0,29,37,.06)}
.top{background:radial-gradient(500px 220px at 50% 0,rgba(255,255,255,.12) 0,transparent 75%),var(--deep);text-align:center;padding:30px 30px 26px;color:#eef6f8}
.logo{width:88px;height:88px;display:block;margin:0 auto 16px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#98c8d0;margin:0 0 10px}
h1{font-family:var(--head);font-weight:700;letter-spacing:-.02em;font-size:32px;line-height:1.1;margin:0 0 10px}
.sub{color:#a9c4ca;font-size:14px;line-height:1.55;margin:0}
.body{padding:24px 28px 26px}
.bot{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:#5b7279;margin-bottom:18px;min-height:22px}
.spin{width:14px;height:14px;border:2px solid #d5e3e7;border-top-color:var(--teal);border-radius:50%;animation:s .8s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.bot.done{color:#0a8f6a;font-weight:500}
.chk{display:flex;gap:11px;align-items:flex-start;text-align:left;padding:12px 14px;border:1px solid #d5e3e7;border-radius:12px;margin-bottom:10px;cursor:pointer;font-size:14px;line-height:1.45;background:var(--mist)}
.chk input{margin-top:2px;width:17px;height:17px;accent-color:var(--teal);flex:none}
.lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:16px 0 8px}
.sel{position:relative}
.sel select{width:100%;appearance:none;-webkit-appearance:none;background:#fff;color:#0b1a1f;border:1px solid #d5e3e7;border-radius:12px;padding:13px 40px 13px 14px;font:500 14px var(--body);cursor:pointer}
.sel select:focus{outline:2px solid var(--teal);outline-offset:1px}
.sel:after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);pointer-events:none}
.btns{display:flex;gap:10px;margin-top:22px}
.btn{flex:1;padding:13px 16px;border-radius:12px;font:600 14px var(--body);cursor:pointer;border:1px solid #d5e3e7;background:#fff;color:var(--deep);text-decoration:none;text-align:center}
.btn.go{background:var(--teal);color:#fff;border-color:transparent}
.btn.go:hover{filter:brightness(1.12)}
.err{display:none;color:#c0392b;font-size:12.5px;font-weight:500;text-align:left;margin:-4px 2px 10px}
.err.show{display:block}
.bad{border-color:#c0392b!important;background:#fdf3f2!important}
.msg{display:none;background:#fdf3f2;border:1px solid #f0c9c4;color:#a93226;font-size:13px;font-weight:500;border-radius:12px;padding:10px 14px;margin-top:16px;text-align:left}
.shake{animation:sh .35s}
@keyframes sh{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.fine{color:#5b7279;font-size:11.5px;line-height:1.5;margin:18px 0 0;text-align:center}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}