@font-face {
    font-family: "YekanBakh";
    src: url("/fonts/yekan/YekanBakh-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "YekanBakh";
    src: url("/fonts/yekan/YekanBakh-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "YekanBakh";
    src: url("/fonts/yekan/YekanBakh-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}

:root { --auth-primary: #3f51b5; --auth-primary-dark: #303f9f; --auth-ink: #172033; --auth-muted: #667085; --auth-border: #dfe5ef; }
* { box-sizing: border-box; }

body.auth-page {
    min-height: 100vh; margin: 0; color: var(--auth-ink); font-family: "YekanBakh", Tahoma, sans-serif;
    font-weight: 500; background: #f5f7fb;
}
body.auth-page::before, body.auth-page::after { position: fixed; z-index: -1; width: min(43vw, 550px); height: min(43vw, 550px); border-radius: 50%; content: ""; }
body.auth-page::before { top: -190px; right: -145px; background: radial-gradient(circle, rgba(99,102,241,.18), rgba(99,102,241,0) 70%); }
body.auth-page::after { bottom: -210px; left: -150px; background: radial-gradient(circle, rgba(20,184,166,.13), rgba(20,184,166,0) 70%); }

.auth-shell { width: 100%; max-width: 470px; margin: 0 auto; padding: 32px 16px 26px; }
.auth-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; color: var(--auth-ink); font-size: 1rem; font-weight: 700; text-decoration: none; }
.auth-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#5668dc,#3647a7); box-shadow: 0 9px 20px rgba(63,81,181,.24); }
.auth-card { overflow: hidden; border: 1px solid rgba(222,228,239,.9); border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(35,48,78,.10); }
.auth-card-body { padding: 31px 28px 28px; }
.auth-icon { display: grid; width: 52px; height: 52px; margin-bottom: 19px; place-items: center; border-radius: 17px; color: var(--auth-primary); font-size: 1.38rem; background: #eef0ff; }
.auth-icon--success { color: #07846d; background: #e7f8f3; }
.auth-eyebrow { margin: 0 0 6px; color: var(--auth-primary); font-size: .79rem; font-weight: 700; }
.auth-title { margin: 0; color: var(--auth-ink); font-size: 1.55rem; font-weight: 700; line-height: 1.5; }
.auth-description { margin: 7px 0 25px; color: var(--auth-muted); font-size: .9rem; font-weight: 300; line-height: 1.9; }
.auth-label { display: block; margin-bottom: 8px; color: #344054; font-size: .88rem; font-weight: 700; }
.auth-label .required { margin-right: 3px; color: #e11d48; }
.auth-control-wrap { position: relative; }
.auth-control-icon { position: absolute; z-index: 2; top: 50%; right: 15px; transform: translateY(-50%); color: #8791a5; pointer-events: none; }
.auth-control { min-height: 52px; padding: 11px 43px 11px 14px; border: 1px solid var(--auth-border); border-radius: 13px; color: var(--auth-ink); font-family: inherit; font-size: .97rem; font-weight: 500; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-control:focus { border-color: #7c89df; box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.auth-control::placeholder { color: #a4acba; font-weight: 300; }
.auth-control--phone, .auth-control--otp { direction: ltr; text-align: center; }
.auth-control--otp { padding-right: 14px; font-size: 1.35rem; font-weight: 700; letter-spacing: .35em; }
.auth-field-help, .auth-validation { display: block; margin-top: 7px; font-size: .75rem; font-weight: 300; }
.auth-field-help { color: var(--auth-muted); }
.auth-validation { color: #dc3545; }
.auth-captcha { display: grid; grid-template-columns: minmax(0,1fr) 122px; gap: 10px; align-items: stretch; }
.auth-captcha-visual { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: 5px 9px 5px 7px; overflow: hidden; border: 1px solid var(--auth-border); border-radius: 13px; background: #fbfcfe; }
.auth-captcha-visual img { width: 112px; height: 40px; object-fit: contain; }
.auth-captcha-refresh { display: grid; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; place-items: center; border: 0; border-radius: 10px; color: var(--auth-primary); background: #eef0ff; transition: background-color .18s ease,transform .18s ease; }
.auth-captcha-refresh:hover { color: var(--auth-primary-dark); background: #e3e7ff; transform: rotate(20deg); }
.auth-captcha-input { min-width: 0; min-height: 52px; padding: 10px 8px; border: 1px solid var(--auth-border); border-radius: 13px; font-family: inherit; text-align: center; }
.auth-alert { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 18px; padding: 11px 12px; border: 1px solid #ffd4d9; border-radius: 12px; color: #a82032; font-size: .82rem; background: #fff5f6; }
.auth-check { color: #475467; font-size: .82rem; }
.auth-check .form-check-input { margin-top: .25em; }
.auth-check .form-check-input:checked { border-color: var(--auth-primary); background-color: var(--auth-primary); }
.auth-submit { display: inline-flex; min-height: 53px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; color: #fff; font-family: inherit; font-size: .96rem; font-weight: 700; background: linear-gradient(135deg,#4f60cf,#3d4eae); box-shadow: 0 10px 20px rgba(63,81,181,.23); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.auth-submit:hover, .auth-submit:focus { color: #fff; transform: translateY(-1px); box-shadow: 0 13px 24px rgba(63,81,181,.28); }
.auth-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.auth-footnote { margin: 17px 0 0; color: var(--auth-muted); font-size: .76rem; font-weight: 300; line-height: 1.85; text-align: center; }
.auth-link { color: var(--auth-primary); font-weight: 700; text-decoration: none; }
.auth-link:hover { color: var(--auth-primary-dark); text-decoration: underline; }
.auth-phone-badge { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 23px; padding: 8px 11px; border: 1px solid #e3e7ff; border-radius: 11px; color: #3d4eae; font-size: .84rem; background: #f5f6ff; }
.auth-phone-badge span { direction: ltr; font-weight: 700; }
.auth-resend { margin-top: 20px; color: var(--auth-muted); font-size: .8rem; text-align: center; }
.auth-resend a { font-family: inherit; font-weight: 700; }
.auth-back-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; color: var(--auth-muted); font-size: .8rem; text-decoration: none; }
.auth-back-link:hover { color: var(--auth-primary); }
.auth-copyright { margin-top: 22px; color: #98a2b3; font-size: .73rem; font-weight: 300; text-align: center; }

@media (max-width: 420px) { .auth-shell { padding: 20px 12px; } .auth-brand { margin-bottom: 19px; } .auth-card-body { padding: 26px 20px 23px; } .auth-captcha { grid-template-columns: minmax(0,1fr) 105px; } .auth-captcha-visual img { width: 87px; } }