@font-face {
    font-family:fonts;
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2')
}

@font-face {
    font-family:fonts;
    font-style:normal;
    font-weight:500 700;
    font-display:swap;
    src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2')
}

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

html,
body {
    margin:0;
    min-height:100%;
    background:#fff;
    font-family:fonts,serif
}

body {
    min-height:100dvh;
    color:#202024
}

.auth-screen,
.auth-screen * {
    font-family:fonts,serif!important
}

.auth-screen {
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:32px 20px;
    background:#fff
}

.auth-shell {
    width:min(100%,420px);
    margin:auto
}

.auth-shell h1 {
    margin:0 0 32px;
    text-align:center;
    font-size:clamp(1.7rem,5vw,2.15rem);
    font-weight:800;
    color:#1f2025
}

.auth-method-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-bottom:28px;
    background:#f5f5f6;
    padding:4px;
    border-radius:10px
}

.auth-method-tabs button {
    min-height:44px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#777981;
    font:inherit;
    font-weight:600;
    cursor:pointer
}

.auth-method-tabs button.active {
    background:#fff;
    color:#202126
}

.auth-panel,
.auth-form {
    display:none
}

.auth-panel.active,
.auth-form.active {
    display:block
}

.auth-panel[hidden],
.auth-register-panel[hidden],
.auth-method-tabs[hidden],
.auth-register-open[hidden] {
    display:none!important
}

.auth-form label:not(.auth-check) {
    display:block;
    margin-bottom:16px
}

.auth-form label>span {
    display:block;
    margin-bottom:7px;
    font-size:.88rem;
    font-weight:600;
    color:#42434a
}

.auth-form input[type=text],
.auth-form input[type=tel],
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form select {
    box-sizing:border-box;
    width:100%;
    height:48px;
    border:0;
    outline:0;
    border-radius:9px;
    background:#f5f5f6;
    padding:0 14px;
    color:#202126;
    font:inherit
}

.auth-form select {
    appearance:auto
}

.auth-form input:focus,
.auth-form select:focus {
    background:#efeff1
}

.auth-check {
    display:flex;
    align-items:center;
    gap:8px;
    margin:2px 0 18px;
    font-size:.86rem;
    color:#696b72;
    cursor:pointer
}

.auth-check span {
    margin:0!important;
    font-weight:400!important
}

.auth-check input {
    width:17px;
    height:17px;
    accent-color:var(--clr-1,#222)
}

.auth-submit,
.auth-register-open {
    width:100%;
    min-height:48px;
    border:0;
    border-radius:9px;
    font:inherit;
    font-weight:700;
    cursor:pointer
}

.auth-submit {
    background:var(--clr-1,#222);
    color:#fff
}

.auth-submit:disabled {
    opacity:.55;
    cursor:wait
}

.auth-register-open {
    margin-top:12px;
    background:#f2f2f3;
    color:#202126
}

.auth-text-button {
    display:block;
    margin:14px auto 0;
    border:0;
    background:transparent;
    color:#565861;
    font:inherit;
    font-size:.88rem;
    cursor:pointer;
    padding:6px
}

.auth-message {
    margin:0 0 18px;
    padding:11px 13px;
    border-radius:8px;
    background:#f5f5f6;
    color:#45464c;
    font-size:.86rem;
    line-height:1.8
}

.auth-message--error,
.auth-message.is-error {
    background:#fff0f0;
    color:#9b3030
}

.auth-message.is-success {
    background:#eef9f0;
    color:#27753a
}

.auth-register-panel {
    margin-top:0
}

@media(max-width:520px) {
    .auth-screen {
        align-items:start;
        padding:56px 18px 30px
    }
    .auth-shell h1 {
        margin-bottom:26px
    }
    .auth-method-tabs {
        margin-bottom:22px
    }
}