:root {
    --auth-primary: #0b4edb;
    --auth-ink: #0b172a;
    --auth-muted: #64748b;
    --auth-border: #e2e8f0;
}

body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh !important;
    overflow: hidden;
    background: #f7f8fc !important;
    color: var(--auth-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.login-shell {
    width: 100%;
    max-height: calc(100dvh - 2rem);
    max-width: 1040px !important;
}

.login-panel {
    height: min(600px, calc(100dvh - 2rem));
    min-height: 0 !important;
    overflow: hidden;
    border: 1px solid var(--auth-border) !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .08) !important;
}

.brand-side {
    padding: 3.25rem !important;
    background: linear-gradient(145deg, #073cae 0%, #0b4edb 62%, #5b45df 100%) !important;
}

.brand-badge {
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .1) !important;
}

.brand-title {
    max-width: 470px;
    margin-top: 2rem !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
}

/* The reference design is intentionally concise: keep the portal purpose,
   remove promotional copy and metric tiles from the sign-in experience. */
.brand-copy,
.insight-grid,
.support-copy {
    display: none !important;
}

.form-side {
    padding: 3.25rem !important;
    background: #fff !important;
}

.login-card {
    max-width: 420px !important;
    margin-inline: auto;
}

.eyebrow {
    color: var(--auth-primary) !important;
    background: #eff6ff !important;
}

.login-title {
    margin-bottom: .45rem !important;
    color: var(--auth-ink) !important;
    font-size: 2rem !important;
    letter-spacing: -.03em;
}

.login-copy {
    margin-bottom: 1.75rem !important;
    color: var(--auth-muted) !important;
}

.form-control {
    min-height: 48px;
    border-color: var(--auth-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--auth-primary) !important;
    box-shadow: 0 0 0 3px rgba(11, 78, 219, .12) !important;
}

.btn-login {
    min-height: 48px;
    border-radius: 9px !important;
    background: var(--auth-primary) !important;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    body {
        padding: 1rem !important;
    }

    .login-panel {
        height: calc(100dvh - 2rem);
        min-height: 0 !important;
    }

    .brand-side {
        min-height: 0 !important;
        padding: 1.5rem 1.5rem 1.75rem !important;
    }

    .brand-title {
        max-width: 580px;
        margin: 1.25rem 0 0 !important;
        font-size: clamp(1.65rem, 7vw, 2.25rem) !important;
    }

    .form-side {
        padding: 2rem 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    body {
        padding: 0 !important;
        background: #fff !important;
    }

    .login-shell { max-height: 100dvh; }

    .login-panel {
        height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .brand-side {
        display: none !important;
    }

    .form-side {
        height: 100%;
        padding: 1.25rem !important;
    }

    .login-title { font-size: 1.7rem !important; }
    .login-copy { margin-bottom: 1.25rem !important; }
}

@media (max-width: 991.98px) and (max-height: 600px) {
    .brand-side { display: none !important; }
    .form-side { height: 100%; }
}

@media (max-height: 700px) and (min-width: 576px) {
    .brand-side,
    .form-side { padding: 1.75rem !important; }
    .brand-title { margin-top: 1rem !important; font-size: 2rem !important; }
    .login-title { font-size: 1.65rem !important; }
    .login-copy { margin-bottom: 1rem !important; }
    .form-control,
    .btn-login { min-height: 44px; }
}