/* No desktop scroll: lock the page to the viewport. Also overrides app.css's own
   .qp-login-bg { min-height:100vh; display:grid; place-items:center; padding:24px }
   (the 24px padding is what pushed the full-height shell past the fold). */
.qp-login-bg { height: 100vh; height: 100dvh; margin: 0; padding: 0; display: block; overflow: hidden; background: #eef3fb; }
.qp-login-shell { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); padding: 0; background: #fff; }
.qp-login-showcase { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; padding: clamp(2rem,5vw,5rem); color: #fff; background: #0f2f72; }
.qp-login-showcase::before,.qp-login-showcase::after { content:""; position:absolute; border-radius:999px; pointer-events:none; }
.qp-login-showcase::before { width:38rem; height:38rem; top:-17rem; right:-10rem; background:rgba(59,130,246,.36); }
.qp-login-showcase::after { width:26rem; height:26rem; bottom:-13rem; left:-9rem; background:rgba(14,165,233,.18); }
.qp-login-brand,.qp-login-message,.qp-login-caption { position:relative; z-index:1; }
.qp-login-brand { display:flex; align-items:center; gap:.75rem; font-weight:750; font-size:1.05rem; }
.qp-login-brandmark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#fff; color:#1d4ed8; font-weight:800; }
.qp-login-message { width:min(100%,670px); margin:4rem 0; }
.qp-eyebrow { display:block; margin-bottom:.75rem; color:#1d4ed8; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:none; }
.qp-login-showcase .qp-eyebrow { color:#bfdbfe; }
.qp-login-message h1 { max-width:650px; margin:0 0 1.25rem; color:#fff; font-size:clamp(2.5rem,5vw,4.6rem); line-height:1.02; letter-spacing:-.055em; }
.qp-login-message>p { max-width:590px; margin:0; color:#dbeafe; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.7; }
.qp-login-benefits { display:grid; gap:.9rem; max-width:570px; margin-top:2rem; }
.qp-login-benefits>div { display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 1rem; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); }
.qp-login-benefits>div>span { width:24px; height:24px; display:grid; place-items:center; flex:0 0 auto; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-weight:800; }
.qp-login-benefits p { margin:0; display:grid; gap:.15rem; color:#fff; }
.qp-login-benefits small { color:#bfdbfe; font-size:.79rem; }
.qp-login-caption { margin:0; color:#bfdbfe; font-size:.78rem; }
.qp-login-form-panel { display:grid; place-items:center; align-content:center; gap:2rem; min-height:0; overflow:hidden; padding:clamp(2rem,6vw,6rem); background:#fff; }
.qp-login-form-wrap { width:min(100%,430px); }
.qp-login-mark { width:52px; height:52px; margin:0 0 2rem; border-radius:14px; display:grid; place-items:center; font-size:1.2rem; font-weight:800; color:#fff; background:#2563eb; box-shadow:0 10px 22px rgba(37,99,235,.22); }
.qp-login-form-wrap h2 { margin:0 0 .55rem; font-size:clamp(1.7rem,3vw,2.2rem); letter-spacing:-.035em; }
.qp-login-form-wrap .form-control { min-height:50px; padding:.75rem .9rem; }
.qp-login-submit { display:flex; align-items:center; justify-content:space-between; min-height:52px; margin-top:.35rem; box-shadow:0 10px 22px rgba(37,99,235,.2); }
.qp-login-help { margin:0; color:#6b7280; font-size:.76rem; text-align:center; }
/* Shorter desktop windows: the page can no longer scroll, so progressively
   compress the showcase (headline + benefits + caption) to keep everything
   inside the viewport. The form side always fits, so it's barely touched. */
@media (max-height:980px) {
    .qp-login-showcase, .qp-login-form-panel { padding: clamp(1.4rem,3vw,2.75rem); }
    .qp-login-message { margin: 1.75rem 0; }
    .qp-login-message h1 { font-size: clamp(2rem,3.4vw,2.9rem); margin-bottom: 1rem; }
    .qp-login-message > p { font-size: 1.02rem; }
    .qp-login-benefits { margin-top: 1.4rem; gap: .7rem; }
    .qp-login-benefits > div { padding: .7rem .9rem; }
    .qp-login-mark { margin-bottom: 1.5rem; }
}
@media (max-height:740px) {
    .qp-login-message { margin: 1rem 0; }
    .qp-login-message h1 { font-size: clamp(1.75rem,2.8vw,2.3rem); margin-bottom: .75rem; }
    .qp-login-message > p { font-size: .95rem; }
    .qp-login-benefits { margin-top: 1rem; gap: .5rem; }
    .qp-login-benefits > div { padding: .55rem .8rem; }
    .qp-login-benefits small { font-size: .74rem; }
    .qp-login-caption { display: none; }
    .qp-login-mark { margin-bottom: 1.1rem; }
}
@media (max-height:640px) {
    .qp-login-showcase, .qp-login-form-panel { padding: 1rem 1.5rem; }
    .qp-login-message { margin: .5rem 0; }
    .qp-login-message > p { display: none; }
    .qp-login-message h1 { font-size: clamp(1.55rem,2.4vw,2rem); }
    .qp-login-benefits small { display: none; }   /* keep just the benefit titles */
}

/* Mobile / narrow: let the page scroll again (single column, showcase text hidden). */
@media (max-width:900px) {
    .qp-login-bg { height: auto; min-height: 100dvh; overflow: auto; }
    .qp-login-shell { height: auto; min-height: 100dvh; grid-template-columns: 1fr; }
    .qp-login-showcase { min-height: auto; overflow: visible; padding: 1.25rem 1.5rem; }
    .qp-login-message, .qp-login-caption { display: none; }
    .qp-login-form-panel { min-height: calc(100dvh - 78px); overflow: visible; padding: 2rem 1.25rem; }
}

/* Sign-in branding is scoped separately from the shared change-password layout. */
.qp-login-bg.qp-sign-in {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
    color: #fff;
    background: #0d1b3e;
    color-scheme: dark;
}
.qp-sign-in .qp-login-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 2.5rem 1.25rem;
    background: #0d1b3e;
}
.qp-sign-in .qp-login-form-panel {
    width: min(100%, 400px);
    min-height: 0;
    overflow: visible;
    padding: 0;
    gap: 1.75rem;
    color: #fff;
    background: transparent;
}
.qp-sign-in .qp-login-form-wrap { width: 100%; }
.qp-sign-in .qp-login-card {
    padding: 1.5rem;
    border: 1px solid #d8dee8;
    border-radius: 6px;
    color: #0d1b3e;
    background: #fff;
    color-scheme: light;
}
.qp-sign-in .qp-login-card h1 {
    margin: 0 0 1.5rem;
    color: #0d1b3e;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
.qp-sign-in .qp-login-help { margin-top: 1.5rem; }
.qp-sign-in .qp-login-mark {
    display: block;
    width: min(220px, 70%);
    height: auto;
    margin: 0 auto 2.25rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.qp-sign-in .form-label,
.qp-sign-in .qp-login-help,
.qp-sign-in .text-muted { color: #0d1b3e !important; }
.qp-sign-in .form-control {
    min-height: 52px;
    border: 1px solid #b7c4d7;
    border-radius: 10px;
    color: #0d1b3e;
    background: #fff;
    caret-color: #0d1b3e;
}
.qp-sign-in .form-control:focus {
    border-color: #0070d2;
    color: #0d1b3e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 112, 210, .15);
}
.qp-sign-in .form-control:-webkit-autofill {
    -webkit-text-fill-color: #0d1b3e;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    caret-color: #0d1b3e;
}
.qp-sign-in .qp-login-submit {
    justify-content: center;
    margin-top: .5rem;
    border: 1px solid #0070d2;
    border-radius: 10px;
    color: #fff;
    background: #0070d2;
    box-shadow: none;
    font-weight: 700;
}
.qp-sign-in .qp-login-submit:hover,
.qp-sign-in .qp-login-submit:active {
    color: #fff;
    border-color: #005fb2;
    background: #005fb2;
    box-shadow: none;
}
.qp-sign-in .btn-outline-primary { color: #0070d2; border-color: #0070d2; }
.qp-sign-in .btn-outline-primary:hover { color: #fff; background: #0070d2; }
.qp-sign-in .btn:focus-visible { outline: 2px solid #0070d2; outline-offset: 4px; }
.qp-sign-in .alert { color: #0d1b3e; }
.qp-sign-in .alert-danger { border-color: #fda4af; background: rgba(190, 18, 60, .2); }
.qp-sign-in .alert-success { border-color: #6ee7b7; background: rgba(5, 150, 105, .2); }
.qp-sign-in .alert-warning { border-color: #fcd34d; background: rgba(180, 83, 9, .2); }
@media (max-height: 600px) {
    .qp-sign-in .qp-login-shell { padding-block: 1.5rem; }
    .qp-sign-in .qp-login-mark { width: 180px; margin-bottom: 1.5rem; }
}