@font-face {
    font-family: "Vazirmatn Lab";
    src: url("fonts/Vazirmatn.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

[data-lab-auth] {
    --auth-navy: #12386f; --auth-blue: #2663d8; --auth-blue-dark: #194bab;
    --auth-ink: #16243a; --auth-muted: #66758b; --auth-line: #dce5f1;
    box-sizing: border-box; display: grid;
    grid-template-columns: minmax(255px, .82fr) minmax(0, 1.45fr);
    width: min(calc(100% - 32px), 900px); min-height: 570px; margin: 42px auto;
    overflow: hidden; border: 1px solid #dfe7f1; border-radius: 28px; background: #fff;
    color: var(--auth-ink); box-shadow: 0 24px 70px rgb(18 56 111 / 14%);
    direction: rtl; text-align: right; font: 14px/1.8 "Vazirmatn Lab", Tahoma, Arial, sans-serif;
}
[data-lab-auth] *, [data-lab-auth] *::before, [data-lab-auth] *::after { box-sizing: border-box; }
[data-lab-auth]::before { display: none !important; }
[data-lab-auth] > :not(.lab-login-brand) { grid-column: 2; margin-right: 46px; margin-left: 46px; }
[data-lab-auth] [hidden], [data-lab-auth] .login-step:not(.active) { display: none !important; }
[data-lab-auth] .login-step.active { display: block !important; opacity: 1 !important; padding: 0 0 34px !important; }

[data-lab-auth] .lab-login-brand {
    position: relative; isolation: isolate; display: flex; grid-column: 1; grid-row: 1 / 20;
    align-items: center; justify-content: center; flex-direction: column; min-width: 0;
    padding: 42px 30px; overflow: hidden;
    background: linear-gradient(150deg, #0d2e60 0%, #184b96 62%, #2870d7 100%);
    color: #fff; text-align: center;
}
[data-lab-auth] .lab-login-brand::before, [data-lab-auth] .lab-login-brand::after {
    position: absolute; z-index: -1; width: 260px; height: 260px;
    border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; content: "";
}
[data-lab-auth] .lab-login-brand::before { top: -105px; right: -120px; box-shadow: 0 0 0 44px rgb(255 255 255 / 4%); }
[data-lab-auth] .lab-login-brand::after { bottom: -150px; left: -120px; box-shadow: 0 0 0 38px rgb(255 255 255 / 4%); }
[data-lab-auth] .lab-login-brand img { width: 220px; max-width: 100%; height: auto; filter: drop-shadow(0 7px 18px rgb(0 0 0 / 12%)); }
[data-lab-auth] .lab-brand-copy { margin-top: 58px; }
[data-lab-auth] .lab-brand-copy span { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 999px; color: #dceaff; font-size: 11px; }
[data-lab-auth] .lab-brand-copy strong { display: block; font-size: 21px; line-height: 1.55; }
[data-lab-auth] .lab-brand-copy p { max-width: 220px; margin: 10px auto 0; color: #d8e6fa; font-size: 12px; line-height: 2; }

[data-lab-auth] .auth-kicker { align-self: end; margin-top: 38px; color: var(--auth-blue); font-size: 11px; font-weight: 800; }
[data-lab-auth] h2 { margin-top: 0 !important; margin-bottom: 5px !important; padding: 0 !important; color: var(--auth-ink) !important; font-size: 27px !important; font-weight: 900 !important; line-height: 1.5; }
[data-lab-auth] h2::before { display: none !important; }
[data-lab-auth] h3 { margin: 0 0 7px !important; padding: 0 !important; color: var(--auth-ink) !important; font-size: 19px !important; font-weight: 850 !important; }
[data-lab-auth] .login-intro { margin-top: 0; margin-bottom: 18px; padding: 0; color: var(--auth-muted); font-size: 12.5px; line-height: 1.9; }

[data-lab-auth] .login-progress { display: flex !important; align-items: center; margin-top: 0; margin-bottom: 25px; color: #96a2b4; font-size: 10px; white-space: nowrap; }
[data-lab-auth] .login-progress span { display: inline-flex; align-items: center; gap: 6px; }
[data-lab-auth] .login-progress span b { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 1px solid #cfdae8; border-radius: 50%; background: #fff; color: #8d9bae; font-size: 10px; }
[data-lab-auth] .login-progress span:nth-of-type(1) b::after { content: "۱"; }
[data-lab-auth] .login-progress span:nth-of-type(2) b::after { content: "۲"; }
[data-lab-auth] .login-progress span:nth-of-type(3) b::after { content: "۳"; }
[data-lab-auth] .login-progress i { width: 20px; height: 1px; margin: 0 7px; background: #dce4ef; }
[data-lab-auth][data-login-stage="phone"] .login-progress span:nth-of-type(1), [data-lab-auth][data-login-stage="existing"] .login-progress span:nth-of-type(2), [data-lab-auth][data-login-stage="registration"] .login-progress span:nth-of-type(2), [data-lab-auth][data-login-stage="otp"] .login-progress span:nth-of-type(3) { color: var(--auth-blue); font-weight: 800; }
[data-lab-auth][data-login-stage="phone"] .login-progress span:nth-of-type(1) b, [data-lab-auth][data-login-stage="existing"] .login-progress span:nth-of-type(2) b, [data-lab-auth][data-login-stage="registration"] .login-progress span:nth-of-type(2) b, [data-lab-auth][data-login-stage="otp"] .login-progress span:nth-of-type(3) b { border-color: var(--auth-blue); background: var(--auth-blue); color: #fff; box-shadow: 0 0 0 4px #eaf1ff; }

[data-lab-auth] .login-step-guide { margin: 0 0 17px; color: var(--auth-muted); font-size: 12.5px; line-height: 1.9; }
[data-lab-auth] .lab-auth-phone { margin-top: 0; margin-bottom: 19px; padding: 8px 13px; border: 1px solid #dce8fb; border-radius: 10px; background: #f3f7fe; color: var(--auth-blue); text-align: center; direction: ltr; font-weight: 800; letter-spacing: .025em; }
[data-lab-auth] form { margin: 0; }
[data-lab-auth] .form-group { margin: 0 0 15px; }
[data-lab-auth] label { display: block; margin: 0 0 6px; color: #33445c; font-size: 12px; font-weight: 800; }
[data-lab-auth] input, [data-lab-auth] textarea {
    width: 100%; height: auto; min-height: 50px; padding: 11px 14px;
    border: 1px solid var(--auth-line); border-radius: 12px; background: #f8fafd; color: var(--auth-ink);
    font: inherit; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow: inset 0 1px 1px rgb(20 45 80 / 2%);
}
[data-lab-auth] input:hover, [data-lab-auth] textarea:hover { border-color: #bdcce0; }
[data-lab-auth] input:focus, [data-lab-auth] textarea:focus { outline: none; border-color: #4d7de0; background: #fff; box-shadow: 0 0 0 4px rgb(38 99 216 / 11%); }
[data-lab-auth] input::placeholder, [data-lab-auth] textarea::placeholder { color: #9aa6b8; opacity: 1; }
[data-lab-auth] textarea { min-height: 82px; resize: vertical; }
[data-lab-auth] small { display: block; margin-top: 5px; color: #7b889b; font-size: 10.5px; }
[data-lab-auth] .required { color: #d0342c; }

[data-lab-auth] .btn { display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-weight: 850; text-align: center; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; box-shadow: none; text-transform: none; letter-spacing: normal; }
[data-lab-auth] .btn-primary, [data-lab-auth] .btn-secondary { border-color: var(--auth-blue); background: linear-gradient(135deg, #316fdf, #2458bf); color: #fff; box-shadow: 0 8px 18px rgb(38 99 216 / 20%); }
[data-lab-auth] .btn-primary:hover, [data-lab-auth] .btn-secondary:hover { border-color: var(--auth-blue-dark); background: linear-gradient(135deg, #2763d1, #194ba9); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgb(38 99 216 / 25%); }
[data-lab-auth] #send-otp-button { border-color: #d5e2fa; background: #f1f6ff; color: var(--auth-blue); box-shadow: none; }
[data-lab-auth] #send-otp-button:hover { background: #e8f0ff; transform: translateY(-1px); }
[data-lab-auth] .login-method-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-lab-auth] .btn-link { margin-top: 9px; min-height: 38px; background: transparent; color: var(--auth-blue); font-size: 11.5px; box-shadow: none; }
[data-lab-auth] .btn-link:hover { background: #f5f8fd; }
[data-lab-auth] .btn:disabled { opacity: .58; cursor: wait; transform: none; box-shadow: none; }
[data-lab-auth] .btn:focus-visible { outline: 3px solid #b9cdf9; outline-offset: 2px; }

[data-lab-auth] #registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
[data-lab-auth] #registration-form .form-group:nth-of-type(4), [data-lab-auth] #registration-form > .btn { grid-column: 1 / -1; }
[data-lab-auth] #registration-form .form-group { min-width: 0; }
[data-lab-auth] #otp_code { text-align: center; font-size: 23px; font-weight: 800; letter-spacing: 10px; }
[data-lab-auth] #login-message { margin-top: -14px; margin-bottom: 27px; padding: 11px 13px; border-radius: 11px; font-size: 12px; line-height: 1.85; }
[data-lab-auth] #login-message.error { border: 1px solid #ffd3cd; background: #fff2f0; color: #9f251b; }
[data-lab-auth] #login-message.success { border: 1px solid #c8ead8; background: #edf9f2; color: #176442; }

@media (max-width: 760px) {
    [data-lab-auth] { display: block; width: min(calc(100% - 24px), 520px); min-height: 0; margin: 18px auto; border-radius: 22px; }
    [data-lab-auth] > :not(.lab-login-brand) { margin-right: 24px; margin-left: 24px; }
    [data-lab-auth] .lab-login-brand { display: block; min-height: 0; padding: 22px 24px; text-align: center; }
    [data-lab-auth] .lab-login-brand img { width: 205px; }
    [data-lab-auth] .lab-brand-copy { display: none; }
    [data-lab-auth] .auth-kicker { display: block; margin-top: 25px; }
    [data-lab-auth] h2 { font-size: 24px !important; }
    [data-lab-auth] .login-progress { overflow: hidden; font-size: 9px; }
    [data-lab-auth] .login-progress i { width: 12px; margin: 0 4px; }
    [data-lab-auth] .login-method-actions, [data-lab-auth] #registration-form { grid-template-columns: 1fr; }
    [data-lab-auth] #registration-form .form-group:nth-of-type(4), [data-lab-auth] #registration-form > .btn { grid-column: auto; }
    [data-lab-auth] input, [data-lab-auth] textarea { font-size: 16px; }
}
@media (max-width: 380px) {
    [data-lab-auth] > :not(.lab-login-brand) { margin-right: 18px; margin-left: 18px; }
    [data-lab-auth] .login-progress span { gap: 4px; }
    [data-lab-auth] .login-progress span b { width: 20px; height: 20px; }
}