:root {
    --ink: #163047;
    --soft: #f4f8fb;

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 32px;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --color-082d5c: #17344c;
    --color-0a5293: #255177;
    --color-0b4b91: #245177;
    --color-0c6fc2: #306b9d;
    --color-1264ad: #2d6391;
    --color-126fc1: #326da0;
    --color-142d4c: #163149;
    --color-17233b: #132a3e;
    --color-183450: #18364f;
    --color-1877c9: #3575ab;
    --color-1c88e5: #3d85c3;
    --color-326b9e: #316c9e;
    --color-34465e: #224b6f;
    --color-5f7085: #727272;
    --color-65b5ff: #89b5da;
    --color-708096: #838383;
    --color-77c1ff: #97bdde;
    --color-7caed6: #7bacd6;
    --color-8b9caf: #9d9d9d;
    --color-9aa5b3: #a6a6a6;
    --color-9fbddd: #9bc0e0;
    --color-a5b0bf: #b2b2b2;
    --color-aac8e7: #abcae5;
    --color-b9dcff: #c9ddee;
    --color-c6d1df: #bbd4e9;
    --color-c9def3: #ccdfef;
    --color-d0e3f7: #d5e4f1;
    --color-d6eaff: #dfebf5;
    --color-d7e0eb: #d1e2f0;
    --color-dceeff: #e4eef6;
    --color-e5f1ff: #ebf2f8;
    --color-e7f2ff: #ecf3f9;
    --color-f3f8fe: #f5f8fb;
    --color-f5faff: #f7fafc;
    --color-f7f9fc: #f6f9fc;
    --color-f8fafd: #f8fafc;
    --color-fff: #fff;
    --color-rgba-10-82-147-22: rgba(10, 82, 147, 0.22);
    --color-rgba-10-82-147-28: rgba(10, 82, 147, 0.28);
    --color-rgba-16-45-80-025: rgba(16, 45, 80, 0.025);
    --color-rgba-16-45-80-04: rgba(16, 45, 80, 0.04);
    --color-rgba-203-216-231-9: rgba(203, 216, 231, 0.9);
    --color-rgba-24-119-201-11: rgba(24, 119, 201, 0.11);
    --color-rgba-24-119-201-12: rgba(24, 119, 201, 0.12);
    --color-rgba-255-255-255-018: rgba(255, 255, 255, 0.018);
    --color-rgba-255-255-255-025: rgba(255, 255, 255, 0.025);
    --color-rgba-255-255-255-1: rgba(255, 255, 255, 0.1);
    --color-rgba-255-255-255-12: rgba(255, 255, 255, 0.12);
    --color-rgba-255-255-255-13: rgba(255, 255, 255, 0.13);
    --color-rgba-255-255-255-2: rgba(255, 255, 255, 0.2);
    --color-rgba-255-255-255-35: rgba(255, 255, 255, 0.35);
    --color-rgba-255-255-255-65: rgba(255, 255, 255, 0.65);
    --color-rgba-255-255-255-96: rgba(255, 255, 255, 0.96);
    --color-rgba-31-72-113-1: rgba(31, 72, 113, 0.1);
    --color-rgba-73-164-255-18: rgba(73, 164, 255, 0.18);
    --color-transparent: transparent;
}

* {
    box-sizing: border-box;
}
html,
body {
    min-height: 100%;
}
body {
    margin: 0;
    color: var(--ink);
    background: var(--soft);
}
button,
input {
    font: inherit;
}
button,
a {
    -webkit-tap-highlight-color: var(--color-transparent);
}
a {
    color: inherit;
}
svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(500px, 0.95fr);
    background: var(--color-f7f9fc);
    color: var(--color-17233b);
}
.login-brand-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
    padding: 2.25rem 3.5rem 2rem;
    background: linear-gradient(
        145deg,
        var(--color-082d5c) 0%,
        var(--color-0b4b91) 48%,
        var(--color-0c6fc2) 100%
    );
    color: var(--color-fff);
}
.login-brand-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 620px;
    height: 620px;
    right: -270px;
    top: -230px;
    border: 1px solid var(--color-rgba-255-255-255-12);
    border-radius: 50%;
    box-shadow:
        0 0 0 90px var(--color-rgba-255-255-255-025),
        0 0 0 180px var(--color-rgba-255-255-255-018);
}
.login-brand-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto -8% -25% 25%;
    height: 55%;
    transform: rotate(-8deg);
    background: linear-gradient(
        120deg,
        var(--color-transparent),
        var(--color-rgba-73-164-255-18)
    );
    border-radius: 50%;
}
.login-brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.login-brand-top img {
    width: 164px;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}
.login-brand-top > span {
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--color-rgba-255-255-255-2);
    border-radius: 99px;
    color: var(--color-d6eaff);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.login-brand-copy {
    width: min(610px, 100%);
    margin: auto 0;
}
.login-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-b9dcff);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.login-eyebrow i {
    width: 24px;
    height: 2px;
    background: var(--color-65b5ff);
}
.login-brand-copy h1 {
    margin: 1.15rem 0 1rem;
    color: var(--color-fff);
    font-size: clamp(2.45rem, 4vw, 4rem);
    font-weight: 750;
    letter-spacing: -0.055em;
    line-height: 1.02;
}
.login-brand-copy > p {
    max-width: 540px;
    margin: 0;
    color: var(--color-d0e3f7);
    font-size: 0.94rem;
    line-height: 1.75;
}
.login-capabilities {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-rgba-255-255-255-13);
}
.login-capabilities > div {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-rgba-255-255-255-1);
}
.login-capabilities > div > span {
    color: var(--color-77c1ff);
    font-size: 0.62rem;
    font-weight: 850;
}
.login-capabilities section {
    display: grid;
    gap: 0.12rem;
}
.login-capabilities strong {
    color: var(--color-f5faff);
    font-size: 0.76rem;
}
.login-capabilities small {
    color: var(--color-aac8e7);
    font-size: 0.65rem;
}
.login-brand-footer {
    display: flex;
    justify-content: space-between;
    color: var(--color-9fbddd);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.login-access-panel {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background:
        radial-gradient(
            circle at 100% 0,
            var(--color-e7f2ff) 0,
            var(--color-transparent) 30%
        ),
        var(--color-f8fafd);
}
.login-form-card {
    width: min(430px, 100%);
}
.login-mobile-brand {
    display: none;
}
.login-form-heading {
    margin-bottom: var(--space-4);
}
.login-access-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--color-1264ad);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.login-access-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-1c88e5);
    box-shadow: 0 0 0 4px var(--color-dceeff);
}
.login-form-heading h2 {
    margin: 0.75rem 0 0.35rem;
    color: var(--color-142d4c);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.login-form-heading p {
    margin: 0;
    color: var(--color-708096);
    font-size: 0.82rem;
}
.login-alert-error {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    margin-bottom: 1.25rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}
.login-alert-error svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: #ef4444;
}
.login-alert-success {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    margin-bottom: 1.25rem;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #166534;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}
.login-alert-success svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: #22c55e;
}
.login-field {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.login-field > label {
    color: var(--color-34465e);
    font-size: 0.69rem;
    font-weight: 800;
}
.login-input {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-d7e0eb);
    border-radius: 10px;
    background: var(--color-fff);
    box-shadow: 0 1px 2px var(--color-rgba-16-45-80-025);
    transition: 0.18s ease;
}

.login-input:focus-within {
    border-color: var(--color-1877c9);
    box-shadow: 0 0 0 3px var(--color-rgba-24-119-201-11);
}
.login-input.has-error {
    border-color: #ef4444;
    background-color: #fff8f8;
}
.login-input.has-error svg {
    stroke: #ef4444;
}
.login-input.has-error:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.login-input svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--color-8b9caf);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-input input {
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: var(--color-transparent);
    color: var(--color-183450);
    font-size: 0.78rem;
}
.login-input input::placeholder {
    color: var(--color-a5b0bf);
}
.login-password-toggle {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    background: var(--color-transparent);
    color: var(--color-8b9caf);
    cursor: pointer;
}
.login-password-toggle svg {
    stroke: currentColor;
}
.login-password-toggle:hover {
    color: var(--color-1264ad);
}
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 1.35rem;
}
.login-options > a {
    color: var(--color-1264ad);
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
}
.login-options > a:hover {
    color: var(--color-0a5293);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-5f7085);
    font-size: 0.69rem;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
}
.login-remember input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.login-remember > span {
    position: relative;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1px solid var(--color-c6d1df);
    border-radius: 5px;
    background: var(--color-fff);
    box-shadow: 0 1px 2px var(--color-rgba-16-45-80-04);
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}
.login-remember:hover > span {
    border-color: var(--color-7caed6);
}
.login-remember input:focus-visible + span {
    border-color: var(--color-1877c9);
    box-shadow: 0 0 0 3px var(--color-rgba-24-119-201-12);
}
.login-remember input:checked + span {
    border-color: var(--color-1264ad);
    background: var(--color-1264ad);
}
.login-remember input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--color-fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.login-submit {
    display: grid;
    width: 100%;
    height: 49px;
    grid-template-columns: 20px 1fr 20px;
    align-items: center;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        var(--color-126fc1),
        var(--color-0a5293)
    );
    box-shadow: 0 10px 24px var(--color-rgba-10-82-147-22);
    color: var(--color-fff);
    font-size: 0.74rem;
    font-weight: 800;
    transition: 0.18s ease;
}
.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 28px var(--color-rgba-10-82-147-28);
}
.login-submit > svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
}

.login-submit-spinner {
    visibility: hidden;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-rgba-255-255-255-35);
    border-top-color: var(--color-fff);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.login-submit.is-loading .login-submit-spinner {
    visibility: visible;
}
.login-submit.is-loading > svg {
    visibility: hidden;
}
.login-footer {
    position: absolute;
    bottom: 1.2rem;
    color: var(--color-9aa5b3);
    font-size: 0.58rem;
}

@media (max-width: 991px) {
    .login-shell {
        grid-template-columns: minmax(340px, 0.8fr) minmax(440px, 1.2fr);
    }
    .login-brand-panel {
        padding: 2rem;
    }
    .login-brand-copy h1 {
        font-size: 2.5rem;
    }
    .login-capabilities small {
        display: none;
    }
    .login-access-panel {
        padding: 2.5rem;
    }
}
@media (max-width: 767px) {
    .login-shell {
        display: block;
        min-height: 100vh;
        background: linear-gradient(
            180deg,
            var(--color-e5f1ff) 0,
            var(--color-f3f8fe) 235px,
            var(--color-f8fafd) 100%
        );
    }
    .login-brand-panel {
        display: none;
    }
    .login-access-panel {
        min-height: 100svh;
        justify-content: flex-start;
        padding: max(1.25rem, env(safe-area-inset-top)) 1rem
            max(1rem, env(safe-area-inset-bottom));
        background: var(--color-transparent);
    }
    .login-mobile-brand {
        display: flex;
        width: min(440px, 100%);
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        margin: 0 auto 1.25rem;
    }
    .login-mobile-brand img {
        width: 126px;
        max-height: 48px;
        object-fit: contain;
    }
    .login-mobile-brand span {
        padding: 0.38rem 0.58rem;
        border: 1px solid var(--color-c9def3);
        border-radius: 99px;
        background: var(--color-rgba-255-255-255-65);
        color: var(--color-326b9e);
        font-size: 0.56rem;
        font-weight: 850;
        text-transform: uppercase;
    }
    .login-form-card {
        width: min(440px, 100%);
        padding: 1.5rem 1.25rem 1.25rem;
        border: 1px solid var(--color-rgba-203-216-231-9);
        border-radius: 18px;
        background: var(--color-rgba-255-255-255-96);
        box-shadow: 0 18px 45px var(--color-rgba-31-72-113-1);
    }
    .login-form-heading {
        margin-bottom: 1.45rem;
    }
    .login-input {
        height: 52px;
    }

    .login-input input {
        font-size: 16px;
    }
    .login-submit {
        height: 52px;
    }
    .login-footer {
        position: static;
        margin-top: 1.25rem;
        text-align: center;
    }
}