:root{color-scheme:light;--background:#f6f7f3;--surface:#fff;--green:#748c8b;--dark:#364a48;--border:#e4e9e4;--hint:#82908b}
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--dark);font-family:Tahoma,"Vazirmatn",sans-serif;line-height:1.8}
.layout{max-width:480px;min-height:100dvh;margin:0 auto;padding:22px 20px 64px}
.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:700}.brand-mark{color:var(--green);font-size:39px;line-height:1}
.panel{margin:50px auto 0;text-align:center}.illustration{margin:0 auto 28px;width:110px;height:110px;border-radius:27px;background:#eaf0e9;display:grid;place-items:center;color:var(--green);font-size:65px}
h1{font-size:23px;margin:0 0 8px}.hint{margin:0 auto 30px;max-width:320px;color:var(--hint);font-size:14px}
form{text-align:right}label{font-size:14px;font-weight:650;display:block;margin:20px 1px 7px}label small{color:var(--hint);font-weight:400}
input{font-family:inherit;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:13px 15px;font-size:16px;width:100%;outline:none;color:#34443e}
input:focus-visible{border-color:var(--green);box-shadow:0 0 0 3px #748c8b26}
button,.as-link{font-family:inherit;display:block;width:100%;margin-top:28px;padding:13px;border-radius:14px;text-align:center;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none}
.primary{border:0;color:white;background:var(--green)}.secondary{border:1px solid var(--green);color:var(--dark);background:white}.footnote{color:var(--hint);font-size:12px;margin-top:20px}.back-link{display:block;text-align:center;margin:20px;color:var(--green);font-size:14px;text-decoration:none}
.messages{margin-top:15px}.alert{padding:10px 12px;background:#fff8e6;color:#755d35;border:1px solid #f2ddaf;border-radius:12px;font-size:13px}.alert.success{background:#edf5ee;color:#476a53;border-color:#d2e6d5}
.code-inputs{display:flex;gap:8px;justify-content:center}.code-inputs .digit{width:min(18%,60px);text-align:center;font-size:23px;font-weight:700;padding:13px 2px}
@media (min-height:740px){.panel{margin-top:85px}}@media (max-width:350px){.layout{padding-right:12px;padding-left:12px}.code-inputs{gap:5px}}

.brand-link{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none}.site-links{display:flex;gap:18px;margin-top:10px;font-size:.85rem}.site-links a{color:#748c8b;text-decoration:none}.site-links a:hover{text-decoration:underline}