:root {
    --auth-primary: #3730a3;
    --auth-accent: #2563eb;
    --auth-ink: #172033;
}

.auth-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: #eef2f7;
    color: var(--auth-ink);
}

.auth-shell {
    width: min(100%, 980px);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(30, 41, 59, .18);
}

.auth-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 4rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #312e81 0%, #2563eb 58%, #0891b2 100%);
}

.auth-brand { position: relative; z-index: 2; }
.auth-logo { width: 112px; height: 112px; object-fit: contain; margin-bottom: 2rem; padding: .6rem; border-radius: 22px; background: rgba(255,255,255,.94); }
.auth-eyebrow { margin-bottom: .65rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.auth-brand h1 { margin-bottom: 1rem; font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 750; }
.auth-brand > div > p:last-child { max-width: 420px; margin: 0; font-size: 1.05rem; line-height: 1.7; opacity: .86; }
.auth-bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.auth-bubble-one { width: 260px; height: 260px; top: -90px; right: -70px; }
.auth-bubble-two { width: 180px; height: 180px; bottom: -55px; left: -45px; }

.auth-card { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem; }
.auth-card-heading { margin-bottom: 2rem; }
.auth-card-heading h2 { margin-bottom: .5rem; font-weight: 700; }
.auth-card-heading p, .auth-notice { color: #64748b; }
.required-label::after { content: ' *'; color: #dc3545; }
.form-control { min-height: 48px; }
.form-control:focus { border-color: #818cf8; box-shadow: 0 0 0 .2rem rgba(99,102,241,.16); }
.password-field { position: relative; }
.password-field .form-control { padding-right: 3rem; }
.password-toggle { position: absolute; top: 50%; right: .5rem; translate: 0 -50%; width: 38px; height: 38px; border: 0; border-radius: 8px; color: #475569; background: transparent; }
.password-toggle:hover { background: #f1f5f9; }
.captcha-row { display: flex; align-items: center; gap: .75rem; }
.captcha-row img { max-width: 58%; border: 1px solid #dbe3ee; border-radius: 8px; }
.auth-submit { min-height: 50px; background: linear-gradient(135deg, var(--auth-primary), var(--auth-accent)); border: 0; font-weight: 650; }
.auth-notice { margin: 1.5rem 0 0; font-size: .84rem; line-height: 1.6; text-align: center; }

@media (max-width: 767.98px) {
    .auth-page { display: block; padding: 0; background: #fff; }
    .auth-shell { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
    .auth-hero { min-height: 245px; padding: 2rem; }
    .auth-logo { width: 76px; height: 76px; margin-bottom: 1rem; }
    .auth-brand h1 { margin-bottom: .5rem; font-size: 2rem; }
    .auth-card { padding: 2rem 1.25rem 3rem; }
}