* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #050506;

    color:
        #f4f4f4;
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.login-page {
    width: 100%;
    max-width: 430px;

    min-height: 100dvh;

    margin: 0 auto;

    padding:
        max(28px, env(safe-area-inset-top))
        24px
        max(22px, env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 7%,
            rgba(255, 110, 0, 0.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #101012 0%,
            #070708 52%,
            #040405 100%
        );
}

.brand-section {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 2.5vh;
}

.brand-rune {
    width: 92px;
    height: 92px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 14px
            rgba(255, 103, 0, 0.28)
        );
}

.brand-name {
    margin-top: 16px;

    font-size: 27px;
    font-weight: 800;

    letter-spacing: 2px;

    white-space: nowrap;
}

.silver-text {
    color:
        #e8e8e8;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.35);
}

.orange-text {
    background:
        linear-gradient(
            180deg,
            #ffad59 0%,
            #ff7911 40%,
            #c84700 70%,
            #ff7510 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color:
        transparent;
}

.tagline {
    margin-top: 8px;

    color:
        #8b8b90;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
}

.login-form {
    margin-top: 40px;

    display: flex;
    flex-direction: column;

    gap: 20px;
}

.field-group {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.field-group label {
    padding-left: 2px;

    color:
        #9b9ba0;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.field-group input {
    width: 100%;
    height: 56px;

    border:
        1px solid #29292d;

    border-radius:
        10px;

    padding:
        0 16px;

    outline:
        none;

    background:
        #121214;

    color:
        #ffffff;

    font-size:
        16px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.field-group input::placeholder {
    color:
        #5f5f64;
}

.field-group input:focus {
    border-color:
        #d75d0c;

    box-shadow:
        0 0 0 3px
        rgba(255, 100, 0, 0.08);
}

.password-wrapper {
    position:
        relative;
}

.password-wrapper input {
    padding-right:
        78px;
}

.show-password {
    position:
        absolute;

    right:
        15px;

    top:
        50%;

    transform:
        translateY(-50%);

    border:
        none;

    background:
        transparent;

    color:
        #df6a1d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

    cursor:
        pointer;
}

.sign-in-button {
    height:
        58px;

    margin-top:
        8px;

    border:
        none;

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            #f47b25 0%,
            #dc5a09 50%,
            #b73d00 100%
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        2px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.2),

        0 8px 24px
        rgba(208, 73, 0, 0.18);

    cursor:
        pointer;
}

.sign-in-button:active:not(:disabled) {
    transform:
        scale(0.985);
}

.sign-in-button:disabled {
    background:
        #252528;

    color:
        #646469;

    box-shadow:
        none;

    cursor:
        default;
}

.forgot-password {
    align-self:
        center;

    margin-top:
        -2px;

    border:
        none;

    background:
        transparent;

    color:
        #9f9fa4;

    font-size:
        13px;

    cursor:
        pointer;
}

.login-footer {
    margin-top:
        auto;

    padding-top:
        30px;

    text-align:
        center;

    color:
        #444448;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.2px;
}

@media (max-height: 700px) {

    .brand-section {
        margin-top:
            0;
    }

    .brand-rune {
        width:
            76px;

        height:
            76px;
    }

    .brand-name {
        margin-top:
            10px;

        font-size:
            23px;
    }

    .login-form {
        margin-top:
            28px;

        gap:
            16px;
    }

}