:root{font-family:Inter,Arial,sans-serif;color:#17343d;background:#f0f3f2;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:18px}
.card{width:min(100%,570px);padding:46px;border:1px solid #d4e0e1;border-radius:26px;background:#fff;box-shadow:0 20px 48px #22373a0b}
.brand{display:flex;align-items:center;gap:13px;color:#222922;margin-bottom:37px}
.brand strong,.brand small{display:block;font-weight:800}
.brand strong{font-size:23px;letter-spacing:.025em}
.brand small{font-size:11px;letter-spacing:.15em;margin-top:4px}
.monogram{height:51px;width:51px;border-radius:12px;object-fit:contain;flex:none}
.lock{width:63px;height:63px;border-radius:19px;background:#e5f2ec;color:#27724f;display:grid;place-items:center;margin-bottom:24px}
.lock svg{width:35px}
h1{margin:0 0 14px;font-size:clamp(25px,5vw,32px);line-height:1.16;letter-spacing:-.04em}
p{margin:0;color:#4f6771;line-height:1.6}
form{margin-top:30px;display:grid;gap:20px}
label{display:grid;gap:11px;font-size:16px;font-weight:700}
input{font:inherit;font-weight:400;width:100%;border:1px solid #bdced2;border-radius:10px;padding:15px;background:#fff;color:#17343d;min-height:52px;box-shadow:0 1px 2px #0001}
input::placeholder{color:#6b7c70}
:focus-visible{outline:2px solid #537733;outline-offset:3px}
.primary,.secondary{display:flex;justify-content:center;align-items:center;min-height:53px;border-radius:100px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.primary{border:0;background:#192017;color:#dcf967}
.primary:disabled{opacity:.7;cursor:wait}
.secondary{border:1px solid #d1d9c7;color:#2b3528}
.secondary:hover{background:#f5f7ef}
details,.back{margin-top:19px;color:#4d672c;font-weight:700}
summary{cursor:pointer}
details p{font-weight:400;margin-top:8px}
.divider{display:flex;align-items:center;gap:15px;color:#5e7379;margin:28px 0}
.divider::before,.divider::after{content:"";height:1px;background:#dce5e6;flex:1}
footer{margin-top:30px;border-top:1px solid #dce5e6;padding-top:24px;display:flex;gap:11px;color:#4f6771;font-size:14px;line-height:1.5}
footer svg{width:22px;height:22px;flex:none}
#status{font-size:14px;background:#fff3ee;color:#963d2a;border-radius:8px;padding:9px 12px}
@media(max-width:520px){.card{padding:26px}.brand{margin-bottom:26px}}