:root {
    color-scheme: light;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }

body.login-page {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: #111e3e;
    background: #eaf3fc url("../images/login-architecture-light-1920.webp") center / 100% 100% no-repeat;
    background-image: image-set(
        url("../images/login-architecture-light-1920.webp") 1x,
        url("../images/login-architecture-light-3840.webp") 2x
    );
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-shell {
    position: relative;
    width: min(100%, 1450px);
    min-height: 1088px;
    margin-inline: auto;
}

.login-topbar {
    position: absolute;
    z-index: 2;
    top: 49px;
    right: 87px;
}

.login-topnav {
    display: flex;
    align-items: center;
    gap: 22px;
    color: #63718d;
    font-size: 15px;
    letter-spacing: .01em;
    white-space: nowrap;
}

.login-topnav::before {
    content: "";
    width: 43px;
    height: 2px;
    margin-right: -10px;
    background: #ed1734;
}

.login-topnav-item {
    color: inherit;
    transition: color 160ms ease;
}

.login-topnav-item:hover { color: #e5092e; }
.login-topnav-separator { color: #8492ac; }

.login-layout {
    position: absolute;
    inset: 112px 83px 139px 105px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 582px;
    gap: 32px;
}

.login-story {
    display: flex;
    min-width: 0;
    align-items: center;
    padding-top: 196px;
}

.login-story-content { width: 100%; max-width: 520px; }

.login-story h1 {
    margin: 0;
    color: #fff;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.login-story h1 strong,
.login-story h1 span { display: block; }
.login-story h1 strong,
.login-story h1 em { font-weight: 760; }
.login-story h1 em { display: block; color: #ff2445; font-style: normal; }

.login-story-content > p {
    margin: 28px 0 0;
    color: #c2ccdd;
    font-size: 21px;
    line-height: 1.48;
}

.login-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
    margin-top: 62px;
}

.login-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 99px;
    padding: 0 12px;
    color: #c9d3e1;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
}

.login-benefit + .login-benefit {
    border-left: 1px solid rgba(205, 218, 236, .48);
}

.login-benefit i {
    display: block;
    margin-bottom: 15px;
    color: #ff173e;
    font-size: 32px;
    line-height: 1;
}

.login-panel {
    width: 100%;
    min-height: 837px;
    padding: 47px 56px 48px;
    border: 1px solid #d0dfef;
    border-radius: 22px;
    background: rgba(255, 255, 255, .89);
    box-shadow: 0 22px 60px rgba(36, 71, 111, .12);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.login-heading { text-align: center; }

.login-logo {
    display: block;
    width: 310px;
    height: 101px;
    max-width: 100%;
    margin: 0 auto 5px;
    object-fit: contain;
}

.login-heading h2 {
    margin: 0;
    color: #111d3d;
    font-size: 29px;
    font-weight: 740;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.login-heading p {
    margin: 8px 0 0;
    color: #51607b;
    font-size: 20px;
    line-height: 1.4;
}

.login-form { margin-top: 45px; }
.login-field + .login-field { margin-top: 27px; }

.login-field label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: #111e3e;
    font-size: 16px;
    font-weight: 690;
}

.login-field label i { width: 17px; text-align: center; font-size: 16px; }

.login-field input {
    display: block;
    width: 100%;
    height: 55px;
    padding: 0 17px;
    border: 1px solid #c9dcf2;
    border-radius: 9px;
    outline: none;
    color: #152341;
    background: rgba(239, 246, 255, .74);
    font: inherit;
    font-size: 17px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.login-field input::placeholder { color: #6f7e99; opacity: 1; }
.login-field input:hover { border-color: #8baed4; }
.login-field input:focus {
    border-color: #e8173a;
    box-shadow: 0 0 0 3px rgba(232, 23, 58, .13);
}

.password-control { position: relative; }
.password-control input { padding-right: 58px; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 7px;
    color: #70809b;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}

.password-toggle:hover { color: #132342; background: rgba(23, 50, 83, .06); }

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 62px;
    margin-top: 24px;
    border: 1px solid #f7153b;
    border-radius: 9px;
    color: #fff;
    background: #ed092f;
    box-shadow: 0 11px 26px rgba(231, 7, 45, .22);
    cursor: pointer;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.login-submit:hover { background: #d00629; box-shadow: 0 14px 30px rgba(231, 7, 45, .3); }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { opacity: .68; cursor: wait; }

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 11px 13px;
    border: 1px solid #f6a6b1;
    border-radius: 8px;
    color: #8e1731;
    background: #fff0f3;
    font-size: 14px;
    line-height: 1.45;
}

.login-error.hidden,
.login-loading.hidden { display: none; }

.login-portal {
    margin-top: 29px;
    padding-top: 24px;
    border-top: 1px solid #ced9e8;
    text-align: center;
}

.login-portal a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 32px;
    padding: 3px 8px;
    border-radius: 5px;
    color: #162342;
    font-size: 16px;
    font-weight: 630;
    text-decoration: none;
}

.login-portal a:hover { color: #e5092e; }

.login-credibility {
    min-height: 126px;
    margin: 31px -8px 0;
    padding: 21px 32px;
    border-radius: 12px;
    background: rgba(231, 241, 252, .67);
}

.login-credibility > strong {
    display: block;
    margin-bottom: 18px;
    color: #112044;
    font-size: 15px;
    font-weight: 700;
}

.login-credibility-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.login-credibility-items > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: #556681;
    font-size: 13px;
    line-height: 1.4;
}

.login-credibility-items > div + div {
    padding-left: 23px;
    border-left: 1px solid #c5d3e4;
}

.login-credibility-items i {
    flex: 0 0 auto;
    color: #142448;
    font-size: 25px;
    line-height: 1.25;
}

.login-footer {
    position: absolute;
    right: 83px;
    bottom: 66px;
    left: 105px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    color: #bdc9db;
    letter-spacing: .34em;
}

.login-footer p { margin: 0; }
.login-signature { font-size: 11px; white-space: nowrap; }
.login-tagline { color: #667994; font-size: 11px; white-space: nowrap; text-align: right; }
.login-tagline::before {
    content: "";
    display: block;
    width: 43px;
    height: 2px;
    margin: 0 0 18px auto;
    background: #ec1433;
}

.login-loading {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(13, 28, 53, .56);
}

.login-loading-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 23px;
    border: 1px solid #d0dfef;
    border-radius: 12px;
    color: #172542;
    background: #fff;
    box-shadow: 0 20px 55px rgba(18, 41, 76, .25);
}

.login-loading-card i { color: #e80c31; font-size: 20px; }
.login-page :is(a, button):focus-visible { outline: 3px solid #f0445d; outline-offset: 4px; }

@media (min-width: 781px) {
    html, body.login-page { height: 100%; overflow: hidden; }
    .login-shell {
        transform: scale(var(--login-fit-scale, 1));
        transform-origin: top center;
    }
}

@media (min-width: 781px) and (max-width: 1200px) {
    .login-layout { right: 40px; left: 55px; grid-template-columns: minmax(0, 1fr) minmax(430px, 48%); gap: 20px; }
    .login-topbar { right: 45px; }
    .login-footer { right: 45px; left: 55px; }
    .login-story h1 { font-size: clamp(39px, 4.2vw, 50px); }
    .login-story-content > p { font-size: 18px; }
    .login-benefit { font-size: 17px; }
    .login-panel { padding-right: 35px; padding-left: 35px; }
}

@media (min-width: 2560px) {
    body.login-page { background-image: url("../images/login-architecture-light-3840.webp"); }
}

@media (max-width: 780px) {
    html, body.login-page { overflow-x: hidden; }
    body.login-page {
        background-image: image-set(
            url("../images/login-architecture-light-960.webp") 1x,
            url("../images/login-architecture-light-1920.webp") 2x
        );
        background-size: auto 580px;
        background-position: 24% top;
        background-color: #edf5fe;
    }
    .login-shell { width: 100%; min-height: 0; padding: 24px 20px 28px; }
    .login-topbar { position: static; display: flex; justify-content: flex-end; }
    .login-topnav { gap: 10px; color: #445572; font-size: 12px; }
    .login-topnav::before { width: 24px; margin-right: 0; }
    .login-layout { position: static; display: flex; flex-direction: column; gap: 24px; margin-top: 180px; }
    .login-story { display: block; padding: 0; }
    .login-story-content { max-width: 560px; padding: 23px; border-radius: 15px; background: rgba(7, 18, 35, .83); }
    .login-story h1 { font-size: clamp(35px, 7.2vw, 49px); }
    .login-story-content > p { margin-top: 15px; font-size: 16px; }
    .desktop-break { display: none; }
    .login-benefits { margin-top: 25px; }
    .login-benefit { min-height: 75px; font-size: 16px; }
    .login-benefit { padding-inline: 8px; }
    .login-benefit i { margin-bottom: 9px; font-size: 24px; }
    .login-panel { min-height: 0; padding: 32px; }
    .login-logo { height: 84px; }
    .login-form { margin-top: 30px; }
    .login-credibility { margin-right: 0; margin-left: 0; }
    .login-footer { position: static; margin-top: 28px; color: #475775; }
}

@media (max-width: 480px) {
    .login-shell { padding: 16px 14px 24px; }
    .login-topnav { gap: 7px; font-size: 10px; }
    .login-topnav::before { width: 17px; }
    .login-layout { gap: 16px; margin-top: 125px; }
    .login-story-content { padding: 17px; }
    .login-story h1 { font-size: clamp(30px, 8vw, 37px); }
    .login-story-content > p { font-size: 15px; line-height: 1.4; }
    .login-benefits { margin-top: 18px; }
    .login-benefit { min-height: 65px; padding-inline: 5px; font-size: 13px; }
    .login-benefit i { font-size: 20px; }
    .login-panel { padding: 23px 19px; border-radius: 17px; }
    .login-logo { width: 260px; height: 76px; }
    .login-heading h2 { font-size: 22px; }
    .login-heading p { margin-top: 4px; font-size: 15px; }
    .login-form { margin-top: 26px; }
    .login-field + .login-field { margin-top: 19px; }
    .login-field label { margin-bottom: 7px; font-size: 15px; }
    .login-field input { height: 50px; font-size: 16px; }
    .login-submit { min-height: 53px; margin-top: 19px; font-size: 17px; }
    .login-portal { margin-top: 20px; padding-top: 15px; }
    .login-portal a { font-size: 14px; }
    .login-credibility { margin-top: 20px; padding: 16px 13px; }
    .login-credibility > strong { margin-bottom: 13px; font-size: 14px; }
    .login-credibility-items > div { display: block; font-size: 11px; text-align: center; }
    .login-credibility-items > div + div { padding-left: 5px; }
    .login-credibility-items i { display: block; margin-bottom: 6px; font-size: 21px; }
    .login-footer { display: block; margin-top: 21px; text-align: center; letter-spacing: .2em; }
    .login-signature, .login-tagline { font-size: 9px; white-space: normal; text-align: center; }
    .login-tagline { margin-top: 15px !important; }
    .login-tagline::before { margin: 0 auto 9px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .login-page *, .login-page *::before, .login-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}