@font-face{font-family:"Plus Jakarta Sans";src:url(plus-jakarta-sans-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#13332f;background:#f4f8f7}
.lg{display:grid;grid-template-columns:minmax(260px,42%) 1fr;min-height:100vh}
.lside{background:radial-gradient(120% 80% at 50% 0,#1F7F72,#0F3D37 70%);color:#E9F5F2;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:40px 48px;position:relative;overflow:hidden}
.blen{position:absolute;top:-120px;left:50%;width:520px;height:520px;transform:translateX(-50%);background:radial-gradient(circle,#F7B7338c,#F7B7331f 45%,transparent 68%);pointer-events:none}
.lbrand{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.lbrand img{border-radius:12px}
.lbrand b{display:block;color:#fff;font-size:22px;font-weight:700;letter-spacing:.06em}.lbrand small{opacity:.85;font-size:13px}
.gun{position:relative;z-index:1;width:min(58%,300px);margin:0 auto;filter:drop-shadow(0 20px 34px #0006)}
.quote{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.quote b{color:#fff;font-size:26px;font-weight:700}.quote span{color:#F7B733;font-weight:600}
.lmain{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 20px;position:relative}
.back{position:absolute;top:20px;left:24px;color:#1F7F72;text-decoration:none;font-weight:600}
.back:hover,.back:focus-visible{text-decoration:underline}
.card{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 10px 30px #1f7f7222;padding:28px;display:flex;flex-direction:column;gap:14px}
.head{display:flex;align-items:center;gap:12px}.head h1{font-size:20px;margin:0}.head img{border-radius:12px}
.hint{margin:0;color:#4b6461;font-size:13px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px}
input{font:inherit;padding:11px 12px;border:1px solid #c7d8d5;border-radius:10px;width:100%}
input:focus{outline:2px solid #4ABDAC;border-color:#4ABDAC}
.pw{position:relative;display:block}.pw input{padding-right:44px}
#eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:16px;padding:6px}
.err{background:#fdecec;color:#9b1c1c;border-radius:10px;padding:10px 12px;font-size:14px}
.note{background:#fff7e0;color:#7a5600;border-radius:10px;padding:10px 12px;font-size:14px}
.go{font:inherit;font-weight:700;color:#fff;background:#1F7F72;border:0;border-radius:10px;padding:12px;cursor:pointer}
.go:hover{background:#18695e}.go:disabled{background:#9bb8b3;cursor:not-allowed}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #fff8;border-top-color:#fff;border-radius:50%;animation:s .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}
@media (max-width:760px){.lg{grid-template-columns:1fr;grid-template-rows:auto 1fr}.lside{padding:14px 20px;gap:0}.gun,.quote,.blen{display:none}.lbrand b{font-size:18px}.lmain{justify-content:flex-start;padding:16px 16px 32px}.back{position:static;align-self:flex-start;margin:0 0 24px}}
/* email code step */
.otp{font-size:26px!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;padding-left:.5em!important}
.otp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.link{all:unset;cursor:pointer;font-size:13px;color:#1f7f72;text-decoration:underline;text-underline-offset:3px}
.link:disabled{color:#8a9a97;cursor:default;text-decoration:none}
.link:focus-visible{outline:2px solid #f7b733;outline-offset:2px;border-radius:4px}