:root {
    --notifia-primary: #5b5ce2;
    --notifia-primary-dark: #4647c7;
    --notifia-ink: #182033;
    --notifia-muted: #687087;
    --notifia-surface: #f5f7fb;
}

* { box-sizing: border-box; }

body.login-page {
    margin: 0;
    background: var(--notifia-surface);
    color: var(--notifia-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-brand-panel {
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #242760 0%, #5b5ce2 58%, #7d7ef2 100%);
}

.login-brand-panel::after {
    content: "";
    position: absolute;
    width: 34rem;
    height: 34rem;
    right: -12rem;
    bottom: -15rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
}

.brand-content {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    padding: 3rem;
}

.brand-content h1 {
    margin-top: 1.5rem;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 750;
    letter-spacing: -.06em;
}

.brand-content p {
    max-width: 31rem;
    margin-top: 1rem;
    font-size: 1.25rem;
    color: rgba(255,255,255,.82);
}

.brand-mark {
    display: inline-flex;
    width: 4.5rem;
    height: 4.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.35rem;
    color: var(--notifia-primary);
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(13,16,54,.25);
    font-size: 2.15rem;
    font-weight: 800;
}

.brand-mark-mobile {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    color: #fff;
    background: var(--notifia-primary);
    font-size: 1.65rem;
}

.login-card { max-width: 31rem; }
.login-card h2 { font-weight: 750; letter-spacing: -.025em; }
.login-eyebrow { color: var(--notifia-primary); font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.form-label { font-weight: 650; }
.form-control { min-height: 3.4rem; border-color: #dce0e9; border-radius: .8rem; }
.input-group .form-control { border-radius: .8rem 0 0 .8rem; }
.input-group .btn { border-radius: 0 .8rem .8rem 0; }
.form-control:focus { border-color: var(--notifia-primary); box-shadow: 0 0 0 .23rem rgba(91,92,226,.14); }
.btn-primary { min-height: 3.45rem; border: 0; border-radius: .8rem; background: var(--notifia-primary); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--notifia-primary-dark); }

@media (max-width: 991.98px) {
    .login-page { background: #fff; }
}