:root {
    --login-purple: #4b1d5f;
    --login-purple-mid: #6d2e86;
    --login-purple-light: #8c49a2;
    --login-orange: #f05a28;
    --login-ink: #26172e;
    --login-muted: #706676;
    --login-border: #dfd7e2;
}
html, body, form { min-height: 100%; }
body { background: #f5f2f6; color: var(--login-ink); font-family: "Segoe UI", Arial, sans-serif; margin: 0; }
.login-page { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 100vh; padding: 28px; }
.login-shell {
    background: #fff;
    border: 1px solid var(--login-border);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(48, 26, 56, .15);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    max-width: 1120px;
    min-height: 620px;
    overflow: hidden;
    width: 100% !important;
}
.login-brand {
    background: linear-gradient(138deg, #351143 0%, var(--login-purple) 52%, var(--login-purple-light) 100%);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 34px 42px 38px;
    position: relative;
}
.login-brand::before, .login-brand::after { border: 22px solid rgba(255,255,255,.07); border-radius: 50%; content: ""; position: absolute; }
.login-brand::before { height: 260px; right: -120px; top: 80px; width: 260px; }
.login-brand::after { border-color: rgba(240,90,40,.27); bottom: -135px; height: 290px; left: -115px; width: 290px; }
.login-brand-top, .login-brand-copy, .login-brand-link { position: relative; z-index: 1; }
.login-brand-top { align-items: center; display: flex; font-size: 13px; font-weight: 700; gap: 12px; }
.login-flag { border-radius: 7px; height: 42px; object-fit: cover; width: 42px; }
.login-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.login-brand .login-eyebrow { color: #f5c9ff; }
.login-brand-copy { max-width: 520px; }
.login-brand-copy h1 { color: #fff; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.04em; line-height: .98; margin: 12px 0 18px; }
.login-brand-copy p { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.55; margin: 0; max-width: 470px; }
.login-brand-link { align-items: flex-end; display: flex; gap: 18px; justify-content: space-between; }
.login-brand-link > span { color: rgba(255,255,255,.67); font-size: 12px; }
.login-brand-link a { background: var(--login-orange); border-radius: 9px; color: #fff; font-size: 13px; font-weight: 800; padding: 11px 15px; text-decoration: none; white-space: nowrap; }
.login-brand-link a:hover { background: #d94a1d; }
.login-brand-link a:focus { box-shadow: 0 0 0 4px rgba(255,255,255,.27); outline: none; }
.login-access { box-sizing: border-box; display: flex; flex-direction: column; padding: 34px 46px 24px; }
.login-logo-wrap { text-align: right; }
.login-logo { height: 62px; max-width: 220px; object-fit: contain; }
.login-heading { margin: auto 0 26px; }
.login-heading .login-eyebrow { color: var(--login-purple-mid); }
.login-heading h2 { color: var(--login-ink); font-size: 34px; letter-spacing: -.025em; margin: 7px 0 6px; }
.login-heading p { color: var(--login-muted); font-size: 14px; margin: 0; }
.login-control { display: block; width: 100%; }
.login-fields { display: grid; gap: 17px; }
.login-field { display: grid; gap: 7px; }
.login-field label { color: var(--login-ink); font-size: 13px; font-weight: 700; }
.login-input { background: #fff; border: 1px solid #cfc4d3; border-radius: 9px; box-sizing: border-box; color: var(--login-ink); font-family: inherit; font-size: 15px; height: 44px; padding: 9px 12px; width: 100%; }
.login-input:focus { border-color: var(--login-purple-mid); box-shadow: 0 0 0 4px rgba(109,46,134,.12); outline: none; }
.login-validation { color: #b3261e; display: block; font-size: 12px; }
.login-button { background: var(--login-purple-mid); border: 0; border-radius: 9px; color: #fff; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; height: 44px; margin-top: 3px; width: 100%; }
.login-button:hover { background: var(--login-purple); }
.login-button:focus { box-shadow: 0 0 0 4px rgba(109,46,134,.18); outline: none; }
.login-forgot { color: var(--login-purple-mid); font-size: 12px; }
.login-message:not(:empty) { background: #fff1ef; border-left: 4px solid #b3261e; border-radius: 7px; color: #9e211b; display: block; font-size: 13px; margin: 0 0 16px; padding: 10px 12px; }
.login-footer { align-items: center; border-top: 1px solid #eee8f0; color: var(--login-muted); display: flex; font-size: 11px; justify-content: space-between; margin-top: auto; padding-top: 19px; }
.login-developer { align-items: center; display: flex; gap: 8px; }
.login-developer input[type="image"] { height: 20px; max-width: 85px; object-fit: contain; }
@media (max-width: 860px) {
    .login-page { padding: 16px; }
    .login-shell { grid-template-columns: 1fr; max-width: 620px; }
    .login-brand { min-height: 360px; padding: 28px 30px; }
    .login-brand-copy h1 { font-size: 44px; }
    .login-access { min-height: 540px; padding: 30px; }
}
@media (max-width: 520px) {
    .login-page { padding: 0; }
    .login-shell { border: 0; border-radius: 0; }
    .login-brand { min-height: 330px; padding: 24px 22px; }
    .login-brand-copy h1 { font-size: 38px; }
    .login-brand-copy p { font-size: 15px; }
    .login-brand-link { align-items: flex-start; flex-direction: column; }
    .login-access { min-height: 520px; padding: 26px 22px 20px; }
}