* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.auth-recovery-body {
    margin: 0;

    min-height: 100vh;
    min-height: 100svh;

    display: grid;
    place-items: center;

    padding: 24px;

    color: #dfe5ff;

    background:
        linear-gradient(
            rgba(16, 12, 48, .68),
            rgba(25, 22, 74, .72)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 53px,
            rgba(113, 120, 255, .065) 54px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 53px,
            rgba(113, 120, 255, .065) 54px
        ),
        #15133f;

    font-family:
        'Rajdhani',
        sans-serif;
}

.recovery-card {
    width:
        min(
            460px,
            100%
        );

    padding:
        30px 34px;

    background:
        rgba(68, 65, 123, .58);

    border:
        1px solid
        rgba(189, 194, 255, .18);

    border-radius: 22px;

    box-shadow:
        0 30px 90px
        rgba(3, 2, 28, .38);

    backdrop-filter:
        blur(16px);
}

.recovery-brand {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 24px;

    color: #eef1ff;

    font-family:
        'Orbitron',
        sans-serif;

    font-weight: 900;
    letter-spacing: 2px;
}

.recovery-brand-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #705cff,
            #00c9ff
        );

    border-radius: 10px;

    box-shadow:
        0 0 22px
        rgba(83, 102, 255, .5);
}

.recovery-card h1 {
    margin:
        0 0 9px;

    color: #ffffff;

    font-family:
        'Orbitron',
        sans-serif;

    font-size:
        clamp(
            1.45rem,
            5vw,
            1.9rem
        );

    text-align: center;
}

.recovery-description {
    margin:
        0 0 22px;

    color:
        rgba(222, 227, 255, .65);

    line-height: 1.5;
    text-align: center;
}

.recovery-alert {
    margin-bottom: 18px;
    padding: 12px 14px;

    border-radius: 11px;

    font-size: .92rem;
    line-height: 1.4;
}

.recovery-alert strong {
    display: block;
    margin-bottom: 3px;
}

.recovery-alert.error {
    color: #ffd3dc;
    background:
        rgba(241, 76, 103, .12);
    border:
        1px solid
        rgba(241, 76, 103, .25);
}

.recovery-alert.success {
    color: #c7ffe8;
    background:
        rgba(0, 201, 167, .12);
    border:
        1px solid
        rgba(0, 201, 167, .25);
}

.recovery-alert.warning {
    color: #ffe6ae;
    background:
        rgba(255, 176, 32, .12);
    border:
        1px solid
        rgba(255, 176, 32, .25);
}

.recovery-form {
    display: grid;
    gap: 16px;
}

.recovery-field {
    display: grid;
    gap: 7px;
}

.recovery-field span {
    color:
        rgba(229, 233, 255, .75);

    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.recovery-input-wrap {
    position: relative;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;

    min-height: 46px;

    overflow: hidden;

    background:
        rgba(236, 238, 255, .075);

    border:
        1px solid
        rgba(202, 207, 255, .15);

    border-radius: 12px;
}

.recovery-input-wrap > i {
    padding-left: 13px;
    color:
        rgba(224, 228, 255, .54);
}

.recovery-input-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 44px;

    padding: 10px 12px;

    color: #ffffff;
    background: transparent;

    border: 0;
    outline: 0;

    font-family: inherit;
    font-size: 1rem;
}

.recovery-input-wrap input::placeholder {
    color:
        rgba(220, 224, 255, .28);
}

.recovery-toggle {
    width: 42px;
    height: 44px;

    color:
        rgba(224, 228, 255, .58);
    background: transparent;

    border: 0;
    cursor: pointer;
}

.recovery-help {
    color:
        rgba(220, 224, 255, .55);

    font-size: .8rem;
    line-height: 1.4;
}

.recovery-button {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #8135f7,
            #7329ec
        );

    border: 0;
    border-radius: 11px;

    box-shadow:
        0 8px 25px
        rgba(123, 45, 240, .28);

    font-family:
        'Rajdhani',
        sans-serif;

    font-size: .9rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    cursor: pointer;
}

.recovery-button:hover {
    filter: brightness(1.08);
}

.recovery-back {
    display: flex;
    justify-content: center;

    margin-top: 19px;
    padding-top: 16px;

    border-top:
        1px solid
        rgba(212, 216, 255, .12);
}

.recovery-back a {
    color:
        rgba(232, 235, 255, .72);

    font-weight: 700;
}

.recovery-email {
    display: block;

    margin:
        -10px 0 20px;

    color: #ffffff;

    text-align: center;
    font-weight: 800;
}

.recovery-rules {
    display: grid;
    gap: 5px;

    margin:
        -4px 0 2px;
    padding: 12px 14px;

    color:
        rgba(224, 228, 255, .58);

    background:
        rgba(8, 8, 37, .16);

    border-radius: 10px;

    font-size: .78rem;
}

@media (max-width: 500px) {

    body.auth-recovery-body {
        align-items: start;
        padding: 14px 10px;
    }

    .recovery-card {
        padding:
            25px 20px;
    }
}