/* =========================================================
   RUSTOFILYA — LOGIN
   Полное оформление страницы входа
   Область действия: .rf-login
   ========================================================= */


/* =========================================================
   ОСНОВА
   ========================================================= */

.rf-login {
    --rl-bg: #101113;
    --rl-panel: #191b20;
    --rl-text: #f4f2ee;
    --rl-muted: #96979f;
    --rl-orange: #ff7547;
    --rl-border: rgba(255, 255, 255, 0.09);

    position: relative;
    isolation: isolate;

    min-width: 0;
    overflow: hidden;

    padding: 34px 0 38px;

    background:
            radial-gradient(
                    ellipse at 85% 15%,
                    rgba(255, 117, 71, 0.055),
                    transparent 55%
            ),
            var(--rl-bg);

    color: var(--rl-text);

    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.rf-login *,
.rf-login *::before,
.rf-login *::after {
    box-sizing: border-box;
}

.rf-login :is(h1, h2, p) {
    margin: 0;
}

.rf-login a {
    color: inherit;
    text-decoration: none;
}

.rf-login button {
    font: inherit;
}

.rf-login :is(a, button) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.rf-login :is(a, button):focus-visible {
    outline: 2px solid #ff936e;
    outline-offset: 5px;
}

.rf-login ::selection {
    background: var(--rl-orange);
    color: var(--rl-bg);
}


/* =========================================================
   ФОН
   ========================================================= */

.rf-login .rf-login-grid {
    position: absolute;
    z-index: -2;
    inset: 0;

    background-image:
            linear-gradient(
                    rgba(255, 255, 255, 0.018) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.018) 1px,
                    transparent 1px
            );

    background-size: 68px 68px;

    mask-image: linear-gradient(
            180deg,
            #000,
            transparent 90%
    );

    pointer-events: none;
}

.rf-login .rf-login-glow {
    position: absolute;
    z-index: -1;

    top: 80px;
    right: -100px;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background: radial-gradient(
            circle,
            rgba(255, 117, 71, 0.07),
            transparent 70%
    );

    pointer-events: none;
}


/* =========================================================
   КОНТЕЙНЕР
   ========================================================= */

.rf-login .rf-login-container {
    width: min(1160px, calc(100% - 64px));
    margin-inline: auto;
}

.rf-login .rf-login-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1fr);

    align-items: center;
    gap: 75px;

    min-width: 0;
    min-height: 650px;
}


/* =========================================================
   ВЕРХНЯЯ НАВИГАЦИЯ
   ========================================================= */

.rf-login .rf-login-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    padding-bottom: 30px;
}

.rf-login .rf-login-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #b9a5a0;

    font-size: 11px;
    line-height: 1.8;

    transition: color 0.2s;
}

.rf-login .rf-login-breadcrumb > span {
    color: #78747f;

    font-size: 8px;
    letter-spacing: 1.3px;
    line-height: 1.8;
}


/* =========================================================
   ЛЕВАЯ КОЛОНКА
   ========================================================= */

.rf-login .rf-login-intro {
    min-width: 0;
    padding-block: 24px;
}

.rf-login .rf-login-label {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 25px;

    color: #ca987e;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.8;
}

.rf-login .rf-login-label > span:first-child {
    width: 6px;
    height: 6px;
    flex-shrink: 0;

    border-radius: 50%;

    background: #ff936e;

    box-shadow: 0 0 12px rgba(255, 117, 71, 0.3);
}

.rf-login .rf-login-intro h1 {
    position: static;

    display: block;
    float: none;

    width: auto;
    min-width: 0;
    height: auto;

    margin: 0;
    padding: 0;

    color: var(--rl-text);

    font-family: inherit;
    font-size: clamp(33px, 4vw, 53px);
    font-weight: 900;
    letter-spacing: -2.1px;
    line-height: 1.12;
    text-transform: none;

    overflow-wrap: anywhere;

    transform: none;
}

.rf-login .rf-login-intro h1 > span {
    position: static;

    display: block;

    margin: 0;
    padding: 0;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;

    transform: none;
}

.rf-login .rf-login-intro h1 > .rf-login-accent {
    margin-top: 9px;
    color: #ff936e;
}

.rf-login .rf-login-description {
    position: static;

    display: block;

    max-width: 480px;
    height: auto;

    margin: 23px 0 0;
    padding: 0;

    color: #a49ca8;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.95;

    white-space: normal;
    overflow-wrap: anywhere;

    transform: none;
}


/* =========================================================
   ПРЕИМУЩЕСТВА
   Одна колонка на всех размерах экрана
   ========================================================= */

.rf-login .rf-login-features {
    position: static;

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

    gap: 20px;

    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;

    margin: 30px 0 0;
    padding: 0;
}

.rf-login .rf-login-features > div {
    position: static;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;

    gap: 13px;

    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;

    margin: 0;
    padding: 0;

    transform: none;
}

.rf-login .rf-login-features > div > div {
    position: static;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;

    gap: 5px;

    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;

    margin: 0;
    padding: 0;

    transform: none;
}

.rf-login .rf-login-features .rf-login-feature-number {
    position: static;

    display: grid;
    place-items: center;

    width: 30px;
    height: 32px;

    margin: 2px 0 0;
    padding: 0;

    border: 1px solid rgba(255, 117, 71, 0.17);
    border-radius: 8px;

    background: rgba(255, 117, 71, 0.035);
    color: #ce9375;

    font-family: monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;

    transform: none;
}

.rf-login .rf-login-features h2,
.rf-login .rf-login-features p {
    position: static;
    inset: auto;

    display: block;
    float: none;

    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;

    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: normal;
    text-indent: 0;
    text-transform: none;

    white-space: normal;
    overflow-wrap: anywhere;

    transform: none;
}

.rf-login .rf-login-features h2 {
    color: #ded5df;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
}

.rf-login .rf-login-features p {
    color: #96909f;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.85;
}


/* =========================================================
   ДЕКОРАТИВНЫЙ БЛОК RF
   ========================================================= */

.rf-login .rf-login-art {
    position: relative;
    isolation: isolate;

    height: 155px;

    margin-top: 33px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 14px;

    background: linear-gradient(
            110deg,
            #19191d,
            #17161a
    );
}

.rf-login .rf-login-art-lines {
    position: absolute;
    z-index: -1;
    inset: 0;

    background: repeating-linear-gradient(
            135deg,
            transparent 0 30px,
            rgba(255, 117, 71, 0.035) 30px 31px
    );
}

.rf-login .rf-login-art-word {
    position: absolute;

    top: -33px;
    right: 20px;

    color: rgba(255, 147, 110, 0.07);

    font-size: 200px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -20px;
    line-height: 1;

    transform: rotate(-8deg);

    pointer-events: none;
    user-select: none;
}

.rf-login .rf-login-art-top,
.rf-login .rf-login-art-bottom {
    position: absolute;

    right: 19px;
    left: 19px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color: #95766b;

    font-size: 8px;
    letter-spacing: 1.1px;
    line-height: 1.8;
}

.rf-login .rf-login-art-top {
    top: 17px;
}

.rf-login .rf-login-art-bottom {
    bottom: 17px;
    color: #8d818d;
}

.rf-login .rf-login-art-top > span:last-child {
    font-size: 19px;
}

.rf-login .rf-login-art-bottom > span:last-child {
    color: #bd8d77;
    font-size: 21px;
}


/* =========================================================
   КАРТОЧКА ВХОДА
   ========================================================= */

.rf-login .rf-login-card {
    position: relative;
    isolation: isolate;

    min-width: 0;

    overflow: hidden;
    padding: 31px;

    border: 1px solid rgba(255, 151, 110, 0.18);
    border-radius: 23px;

    background:
            radial-gradient(
                    ellipse at 100% 0,
                    rgba(255, 117, 71, 0.08),
                    transparent 65%
            ),
            linear-gradient(
                    145deg,
                    #202026,
                    #191b20 70%
            );

    box-shadow:
            inset 0 1px rgba(255, 220, 199, 0.04),
            0 25px 70px rgba(0, 0, 0, 0.22);
}

.rf-login .rf-login-card-shine {
    position: absolute;
    z-index: -1;

    top: 0;
    right: 15%;
    left: 15%;

    height: 1px;

    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 173, 130, 0.55),
            transparent
    );
}

.rf-login .rf-login-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    color: #91808e;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.4px;
    line-height: 1.8;
}

.rf-login .rf-login-monogram {
    display: grid;
    place-items: center;

    width: 35px;
    height: 37px;
    flex-shrink: 0;

    padding-right: 2px;

    border: 1px solid rgba(255, 117, 71, 0.2);
    border-radius: 9px;

    background: rgba(255, 117, 71, 0.04);
    color: #e1a082;

    font-size: 17px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1.5px;
    line-height: 1;
}


/* =========================================================
   STEAM-ИКОНКА
   ========================================================= */

.rf-login .rf-login-steam-mark {
    display: grid;
    place-items: center;

    width: 80px;
    height: 80px;

    margin: 25px 0 23px;

    border: 1px solid rgba(255, 117, 71, 0.19);
    border-radius: 21px;

    background:
            radial-gradient(
                    circle at 50% 0,
                    rgba(255, 117, 71, 0.09),
                    transparent 85%
            ),
            rgba(255, 255, 255, 0.015);

    color: #e2b09a;

    box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.rf-login .rf-login-steam-mark svg {
    display: block;
    width: 49px;
    height: 49px;
}


/* =========================================================
   ТЕКСТ КАРТОЧКИ
   ========================================================= */

.rf-login .rf-login-eyebrow {
    color: #b78b76;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.8;
}

.rf-login .rf-login-card h2 {
    position: static;

    display: block;
    float: none;

    width: auto;
    height: auto;

    margin: 10px 0 0;
    padding: 0;

    color: var(--rl-text);

    font-family: inherit;
    font-size: clamp(25px, 2.6vw, 32px);
    font-weight: 750;
    letter-spacing: -0.9px;
    line-height: 1.25;
    text-transform: none;

    overflow-wrap: anywhere;

    transform: none;
}

.rf-login .rf-login-card-description {
    position: static;

    display: block;

    height: auto;

    margin: 13px 0 0;
    padding: 0;

    color: #a397a9;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.9;

    white-space: normal;
    overflow-wrap: anywhere;

    transform: none;
}


/* =========================================================
   СООБЩЕНИЯ
   ========================================================= */

.rf-login .rf-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 18px;
    padding: 13px;

    border: 1px solid var(--rl-border);
    border-radius: 10px;

    color: #c5bacd;

    font-size: 11px;
    line-height: 1.85;
}

.rf-login .rf-login-alert p {
    position: static;

    min-width: 0;
    height: auto;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: inherit;
    font-weight: 400;
    line-height: inherit;

    white-space: normal;
    overflow-wrap: anywhere;

    transform: none;
}

.rf-login .rf-login-alert-symbol {
    display: grid;
    place-items: center;

    width: 19px;
    height: 19px;
    flex-shrink: 0;

    margin-top: 1px;

    border: 1px solid currentColor;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.rf-login .rf-login-alert--error {
    border-color: rgba(235, 119, 119, 0.25);
    background: rgba(235, 119, 119, 0.055);
    color: #eeb1b1;
}

.rf-login .rf-login-alert--notice {
    border-color: rgba(229, 180, 105, 0.23);
    background: rgba(229, 180, 105, 0.045);
    color: #d9bc8e;
}

.rf-login .rf-login-alert--success {
    border-color: rgba(158, 215, 177, 0.23);
    background: rgba(158, 215, 177, 0.045);
    color: #b4d8bf;
}


/* =========================================================
   ФОРМА И КНОПКА ВХОДА
   ========================================================= */

.rf-login .rf-login-form {
    margin: 25px 0 0;
    padding: 0;
}

.rf-login .rf-login-submit {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;
    min-width: 0;
    min-height: 55px;

    margin: 0;
    padding: 15px 17px;

    overflow: hidden;

    border: 1px solid rgba(255, 205, 180, 0.3);
    border-radius: 10px;

    background: linear-gradient(
            125deg,
            #ff9b75,
            #ff7547 75%
    );

    color: #1b120e;

    box-shadow:
            inset 0 1px rgba(255, 235, 219, 0.3),
            0 9px 25px rgba(255, 117, 71, 0.1);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.7;

    text-align: center;
    white-space: normal;

    cursor: pointer;

    transition:
            background 0.2s,
            box-shadow 0.2s;
}

.rf-login .rf-login-submit::before {
    position: absolute;

    top: -70%;
    bottom: -70%;
    left: -60%;

    width: 24%;

    background: linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent
    );

    content: "";

    transform: skewX(-20deg);
    pointer-events: none;
}

.rf-login .rf-login-submit > svg {
    display: block;

    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.rf-login .rf-login-submit > span:not(.rf-login-submit-arrow) {
    position: static;

    min-width: 0;
    flex: 1;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.7;

    overflow-wrap: anywhere;

    transform: none;
}

.rf-login .rf-login-submit > .rf-login-submit-arrow {
    position: static;

    flex-shrink: 0;

    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    transform: none;
}

.rf-login .rf-login-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.rf-login .rf-login-submit:disabled::before {
    display: none;
}

.rf-login .rf-login-notice {
    position: static;

    display: block;

    height: auto;

    margin: 16px 0 0;
    padding: 0;

    color: #968799;

    font-size: 10px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.9;

    white-space: normal;
    overflow-wrap: anywhere;

    transform: none;
}


/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ ССЫЛКИ
   ========================================================= */

.rf-login .rf-login-card-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 26px 0 17px;

    color: #827486;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.8;
}

.rf-login .rf-login-card-divider::before,
.rf-login .rf-login-card-divider::after {
    height: 1px;
    flex: 1;

    background: rgba(255, 255, 255, 0.07);

    content: "";
}

.rf-login .rf-login-card-divider > span {
    flex-shrink: 0;
}

.rf-login .rf-login-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rf-login .rf-login-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-width: 0;
    padding: 11px 12px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.012);
    color: #b8a9bf;

    font-size: 10px;
    line-height: 1.7;

    transition:
            background 0.2s,
            border-color 0.2s,
            color 0.2s;
}

.rf-login .rf-login-links a > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rf-login .rf-login-links a > span:last-child {
    flex-shrink: 0;
}


/* =========================================================
   ПОДПИСЬ КАРТОЧКИ
   ========================================================= */

.rf-login .rf-login-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 25px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);

    color: #716875;

    font-size: 7px;
    letter-spacing: 1.1px;
    line-height: 1.8;
}

.rf-login .rf-login-card-bottom > span:last-child {
    flex-shrink: 0;
    color: #ad826d;
    font-size: 17px;
}


/* =========================================================
   НИЖНЯЯ ПОДПИСЬ СТРАНИЦЫ
   ========================================================= */

.rf-login .rf-login-signoff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;
    padding-top: 22px;

    border-top: 1px solid var(--rl-border);

    color: #726c78;

    font-size: 7px;
    letter-spacing: 1.2px;
    line-height: 1.9;
}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

@media (hover: hover) {

    .rf-login .rf-login-submit:hover:not(:disabled) {
        background: linear-gradient(
                125deg,
                #ffad8b,
                #ff936e 75%
        );

        box-shadow:
                inset 0 1px rgba(255, 235, 219, 0.4),
                0 12px 30px rgba(255, 117, 71, 0.17);
    }

    .rf-login .rf-login-submit:hover:not(:disabled)::before {
        animation: rf-login-shine 0.65s ease both;
    }

    .rf-login .rf-login-links a:hover {
        border-color: rgba(255, 117, 71, 0.25);
        background: rgba(255, 117, 71, 0.035);
        color: #efb495;
    }

    .rf-login .rf-login-breadcrumb a:hover {
        color: #ffb08b;
    }

}


/* =========================================================
   АНИМАЦИЯ БЛИКА
   ========================================================= */

@keyframes rf-login-shine {

    from {
        left: -60%;
    }

    to {
        left: 150%;
    }

}


/* =========================================================
   АДАПТИВ — ДО 1050px
   ========================================================= */

@media (max-width: 1050px) {

    .rf-login .rf-login-layout {
        gap: 35px;
    }

    .rf-login .rf-login-intro h1 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .rf-login .rf-login-card {
        padding: 27px;
    }

}


/* =========================================================
   АДАПТИВ — ДО 780px
   ========================================================= */

@media (max-width: 780px) {

    .rf-login {
        padding-top: 24px;
    }

    .rf-login .rf-login-container {
        width: calc(100% - 36px);
    }

    .rf-login .rf-login-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 27px;
        min-height: 0;
    }

    .rf-login .rf-login-intro {
        padding-block: 10px 0;
    }

    .rf-login .rf-login-intro h1 {
        font-size: clamp(34px, 7vw, 49px);
    }

    .rf-login .rf-login-description {
        max-width: 600px;
    }

    .rf-login .rf-login-features {
        grid-template-columns: minmax(0, 1fr);
        gap: 19px;
        margin-top: 25px;
    }

    .rf-login .rf-login-art {
        display: none;
    }

    .rf-login .rf-login-card {
        padding: 30px;
    }

    .rf-login .rf-login-steam-mark {
        margin-top: 19px;
    }

    .rf-login .rf-login-signoff {
        margin-top: 28px;
    }

}


/* =========================================================
   АДАПТИВ — ДО 480px
   ========================================================= */

@media (max-width: 480px) {

    .rf-login .rf-login-container {
        width: calc(100% - 28px);
    }

    .rf-login .rf-login-breadcrumb {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 25px;
    }

    .rf-login .rf-login-intro h1 {
        font-size: 35px;
        letter-spacing: -1.2px;
    }

    .rf-login .rf-login-description {
        margin-top: 19px;
        font-size: 12px;
    }

    .rf-login .rf-login-label {
        margin-bottom: 19px;
        font-size: 8px;
    }

    .rf-login .rf-login-features {
        gap: 18px;
    }

    .rf-login .rf-login-features > div {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 11px;
    }

    .rf-login .rf-login-features .rf-login-feature-number {
        width: 28px;
        height: 30px;
    }

    .rf-login .rf-login-card {
        padding: 24px;
        border-radius: 18px;
    }

    .rf-login .rf-login-card h2 {
        font-size: 27px;
    }

    .rf-login .rf-login-steam-mark {
        width: 65px;
        height: 65px;
        border-radius: 17px;
    }

    .rf-login .rf-login-steam-mark svg {
        width: 41px;
        height: 41px;
    }

    .rf-login .rf-login-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .rf-login .rf-login-submit {
        min-height: 53px;
    }

    .rf-login .rf-login-signoff {
        font-size: 6px;
        letter-spacing: 1px;
    }

}


/* =========================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 350px) {

    .rf-login .rf-login-intro h1 {
        font-size: 30px;
    }

    .rf-login .rf-login-card {
        padding: 20px;
    }

    .rf-login .rf-login-card-top {
        letter-spacing: 0.8px;
    }

}


/* =========================================================
   УМЕНЬШЕННОЕ ДВИЖЕНИЕ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rf-login *,
    .rf-login *::before,
    .rf-login *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

}