* { box-sizing: border-box; }

:root {
    --login-purple: #660099;
    --login-purple-dark: #2b003f;
    --login-text: #172033;
    --login-muted: #667085;
    --login-border: #dfe4ec;
}

body.login-page {
    min-height: 100vh;
    margin: 0;
    background: #f3f5f9;
    color: var(--login-text);
    font-family: Inter, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(460px, 1.08fr) minmax(430px, .92fr); }

.login-brand-panel {
    position: relative;
    min-height: 100vh;
    padding: 46px clamp(44px, 6vw, 92px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, #250037 0%, #450064 52%, #660099 100%);
    color: #fff;
}

.login-brand-panel::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -180px;
    top: -210px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(255, 255, 255, .025), 0 0 0 160px rgba(255, 255, 255, .018);
}

.login-fiber {
    position: absolute;
    inset: auto -90px -70px -170px;
    width: 920px;
    height: 610px;
    object-fit: cover;
    opacity: .16;
    mix-blend-mode: screen;
    pointer-events: none;
}

.login-brand-top, .login-brand-copy, .login-brand-footer { position: relative; z-index: 1; }
.login-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.login-logo { width: 112px; height: auto; object-fit: contain; }

.login-regional {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.login-brand-copy { max-width: 640px; margin-block: auto; padding-block: 70px; }
.login-eyebrow { display: block; margin-bottom: 16px; color: #e4a8f0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-brand-copy h1 { max-width: 600px; margin: 0 0 22px; font-size: clamp(38px, 4.3vw, 64px); line-height: 1.02; letter-spacing: -.055em; font-weight: 760; }
.login-brand-copy p { max-width: 580px; margin: 0; color: rgba(255, 255, 255, .68); font-size: 15px; line-height: 1.75; }

.login-benefits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.login-benefits span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 8px; background: rgba(255, 255, 255, .055); color: rgba(255, 255, 255, .82); font-size: 11px; font-weight: 600; }
.login-benefits i { color: #e8b3f2; }
.login-brand-footer { color: rgba(255, 255, 255, .42); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }

.login-access-panel { min-height: 100vh; padding: 48px clamp(38px, 7vw, 110px); display: flex; align-items: center; justify-content: center; background: #f7f8fb; }
.login-access-card { width: 100%; max-width: 430px; }
.login-logo-mobile { display: none; width: 92px; filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(4533%) hue-rotate(286deg) brightness(73%); }

.login-access-heading { margin-bottom: 30px; }
.login-security-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--login-purple); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.login-access-heading h2 { margin: 0 0 8px; color: var(--login-text); font-size: 30px; font-weight: 760; letter-spacing: -.04em; }
.login-access-heading p { margin: 0; color: var(--login-muted); font-size: 13px; }

.login-access-card .alert { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; border-radius: 9px; font-size: 12px; }
.login-access-card .alert span { flex: 1; }

.login-field { margin-bottom: 18px; }
.login-field label { display: block; margin-bottom: 7px; color: #3b4658; font-size: 11px; font-weight: 700; }
.login-label-row { display: flex; align-items: center; justify-content: space-between; }
.login-label-row a { margin-bottom: 7px; color: var(--login-purple); font-size: 10px; font-weight: 700; text-decoration: none; }
.login-label-row a:hover { text-decoration: underline; }

.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; z-index: 1; top: 50%; left: 14px; transform: translateY(-50%); color: #8d98a9; font-size: 15px; pointer-events: none; }
.login-input-wrap input { width: 100%; height: 47px; padding: 0 46px 0 42px; border: 1px solid var(--login-border); border-radius: 10px; background: #fff; color: var(--login-text); font: inherit; font-size: 13px; outline: 0; transition: border-color .16s, box-shadow .16s; }
.login-input-wrap input::placeholder { color: #a4adba; }
.login-input-wrap input:focus { border-color: var(--login-purple); box-shadow: 0 0 0 4px rgba(102, 0, 153, .1); }

.password-toggle { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #7e8999; cursor: pointer; }
.password-toggle:hover { background: #f3edf6; color: var(--login-purple); }

.login-submit { width: 100%; height: 47px; margin-top: 5px; padding: 0 17px; border: 0; border-radius: 10px; background: var(--login-purple); color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; box-shadow: 0 8px 20px rgba(102, 0, 153, .18); transition: background .16s, transform .16s, box-shadow .16s; }
.login-submit:hover { background: #53007d; transform: translateY(-1px); box-shadow: 0 11px 25px rgba(102, 0, 153, .24); }
.login-submit:disabled { cursor: wait; opacity: .72; transform: none; }

.login-support { margin-top: 26px; padding: 13px; border: 1px solid #e5e9f0; border-radius: 10px; background: #fff; display: flex; align-items: center; gap: 11px; }
.login-support > span { width: 34px; height: 34px; border-radius: 8px; background: #f4ebf8; color: var(--login-purple); display: grid; place-items: center; }
.login-support > div { display: flex; flex-direction: column; }
.login-support strong { color: #384254; font-size: 10px; }
.login-support small { color: #8a94a4; font-size: 10px; }

.login-environment { margin-top: 22px; color: #8b95a4; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.login-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22a565; box-shadow: 0 0 0 3px rgba(34, 165, 101, .1); }

@media (max-width: 980px) {
    .login-shell { grid-template-columns: minmax(330px, .85fr) minmax(410px, 1.15fr); }
    .login-brand-panel { padding-inline: 40px; }
    .login-brand-copy h1 { font-size: 42px; }
    .login-benefits { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
    .login-shell { display: block; }
    .login-brand-panel { display: none; }
    .login-access-panel { min-height: 100vh; padding: 34px 20px; background: linear-gradient(180deg, #f7f2f9 0%, #f7f8fb 42%); }
    .login-access-card { max-width: 410px; padding: 28px 22px; border: 1px solid #e5e9f0; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(34, 0, 50, .09); }
    .login-logo-mobile { display: block; margin-bottom: 30px; }
    .login-access-heading h2 { font-size: 26px; }
    .login-support { background: #f8f9fb; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}