:root {
    --auth-ink: #102a43;
    --auth-muted: #627d98;
    --auth-teal: #0d9488;
    --auth-teal-dark: #0f766e;
    --auth-mint: #dff8f1;
    --auth-lime: #c9f27b;
    --auth-paper: #f7fbfa;
    --auth-line: #d9e9e4;
}

body.auth-page {
    min-height: 100vh;
    padding-bottom: 0 !important;
    color: var(--auth-muted);
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    background: #eef8f5;
}

.auth-page h1, .auth-page h2, .auth-page h3, .auth-page strong {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    color: var(--auth-ink);
}

.auth-page a { color: var(--auth-teal-dark); font-weight: 700; text-decoration: none; }
.auth-page a:hover { color: #115e59; }
.auth-page .auth-shell { min-height: 100vh; }
.auth-page .auth-story {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 56px;
    border-radius: 28px;
    color: #d1f2e8;
    background: linear-gradient(145deg, #102a43 0%, #123b55 55%, #0f766e 140%);
    box-shadow: 0 24px 60px rgba(16, 42, 67, .16);
}
.auth-page .auth-story::before, .auth-page .auth-story::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.auth-page .auth-story::before { width: 440px; height: 440px; right: -190px; top: -170px; background: radial-gradient(circle, rgba(201,242,123,.22), transparent 70%); }
.auth-page .auth-story::after { width: 350px; height: 350px; left: -180px; bottom: -190px; background: radial-gradient(circle, rgba(22,184,166,.25), transparent 70%); }
.auth-page .story-content { position: relative; z-index: 1; max-width: 420px; }
.auth-page .story-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 56px; color: #fff; }
.auth-page .story-brand .brand-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0d9488, #16b8a6); box-shadow: 0 8px 18px rgba(22,184,166,.25); }
.auth-page .story-brand strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: .04em; }
.auth-page .story-brand strong b { color: var(--auth-lime); }
.auth-page .story-brand small { display: block; color: #a9c5ce; font-size: .67rem; }
.auth-page .story-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--auth-lime); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.auth-page .story-kicker i { font-size: .55rem; }
.auth-page .auth-story h1 { margin: 17px 0 17px; color: #fff; font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.1; letter-spacing: -.05em; }
.auth-page .auth-story h1 span { color: var(--auth-lime); }
.auth-page .story-text { max-width: 380px; margin-bottom: 32px; color: #c0d6dc; font-size: .95rem; }
.auth-page .story-points { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.auth-page .story-points li { display: flex; align-items: center; gap: 10px; color: #e0f4ee; font-size: .81rem; }
.auth-page .story-points i { color: var(--auth-lime); font-size: 1rem; }
.auth-page .story-quote { margin-top: 43px; padding: 17px 18px; border-left: 3px solid var(--auth-lime); color: #e3f6ee; background: rgba(255,255,255,.08); font-size: .78rem; }
.auth-page .story-quote strong { display: block; margin-top: 4px; color: #fff; font-size: .72rem; }

.auth-page .auth-form-column { display: flex; align-items: center; justify-content: center; padding: 42px 36px; }
.auth-page .auth-form-wrap { width: min(100%, 470px); }
.auth-page .auth-mobile-brand { display: none; }
.auth-page .auth-card { width: 100%; border: 1px solid var(--auth-line); border-radius: 22px; background: #fff; box-shadow: 0 20px 55px rgba(16,42,67,.1); }
.auth-page .auth-card .card-body { padding: 38px; }
.auth-page .auth-heading { margin-bottom: 27px; }
.auth-page .auth-heading h2 { margin-bottom: 6px; font-size: 1.55rem; letter-spacing: -.035em; }
.auth-page .auth-heading p { margin: 0; color: var(--auth-muted); font-size: .84rem; }
.auth-page .auth-card .form-label { margin-bottom: 7px; color: #486581; font-size: .78rem; font-weight: 800; }
.auth-page .auth-card .form-control, .auth-page .auth-card .form-select { min-height: 49px; border: 1px solid #cfe1dc; border-radius: 10px; color: var(--auth-ink); background: #fbfefd; font-size: .84rem; font-weight: 500; }
.auth-page .auth-card .form-control:focus, .auth-page .auth-card .form-select:focus { border-color: var(--auth-teal); box-shadow: 0 0 0 4px rgba(13,148,136,.11); background: #fff; }
.auth-page .auth-card .form-control::placeholder { color: #9ab0bd; }
.auth-page .field-wrap { position: relative; }
.auth-page .field-wrap > .field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #8aa8a6;
    pointer-events: none;
    font-size: .95rem;
}
.auth-page .field-wrap > .form-control,
.auth-page .field-wrap > .form-select { padding-left: 2.7rem; }
.auth-page .field-wrap > textarea.form-control { padding-top: .72rem; }
.auth-page .field-wrap > textarea.form-control + .field-icon,
.auth-page .field-wrap:has(> textarea.form-control) > .field-icon {
    top: .95rem;
    transform: none;
}
.auth-page .auth-card .form-check-label { color: var(--auth-muted); font-size: .78rem; }
.auth-page .auth-card .form-check-input { border-color: #b9dcd5; }
.auth-page .auth-card .form-check-input:checked { border-color: var(--auth-teal); background-color: var(--auth-teal); }
.auth-page .auth-card .form-check-input:focus { box-shadow: 0 0 0 4px rgba(13,148,136,.11); }
.auth-page .auth-card .btn-primary { min-height: 49px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--auth-teal), var(--auth-teal-dark)); box-shadow: 0 8px 18px rgba(13,148,136,.2); }
.auth-page .auth-card .btn-primary:hover { color: #fff; background: linear-gradient(135deg, var(--auth-teal-dark), #115e59); transform: translateY(-1px); }
.auth-page .auth-card .btn-outline-secondary { min-height: 49px; border: 1px solid #cfe1dc; border-radius: 10px; color: #486581; background: #fff; }
.auth-page .auth-card .btn-outline-secondary:hover { border-color: #a8dacf; color: var(--auth-teal-dark); background: var(--auth-mint); }
.auth-page .auth-card hr { border-color: var(--auth-line) !important; opacity: 1; }
.auth-page .alert-danger { border: 1px solid #ffd2ce; border-radius: 11px; color: #a13b3b; background: #fff3f1; font-size: .8rem; }
.auth-page .form-text { color: #829ab1; font-size: .7rem; }
.auth-page .invalid-feedback { font-size: .72rem; }
.auth-page .auth-footer { margin: 17px 0 0; color: #829ab1; font-size: .72rem; text-align: center; }
.auth-page .auth-footer a { color: #829ab1; font-weight: 500; }
.auth-page .auth-footer a:hover { color: var(--auth-teal-dark); }
.auth-page .auth-back { display: inline-flex; align-items: center; gap: 5px; margin-top: 20px; color: #829ab1; font-size: .76rem; }
.auth-page .auth-back:hover { color: var(--auth-teal-dark); }
.auth-page .auth-card .text-muted { color: var(--auth-muted) !important; }
.auth-page .auth-card .text-primary { color: var(--auth-teal-dark) !important; }

@media (max-width: 991.98px) {
    .auth-page .auth-story { min-height: 570px; padding: 40px; }
    .auth-page .story-brand { margin-bottom: 42px; }
    .auth-page .auth-form-column { padding: 42px 22px; }
}
@media (max-width: 767.98px) {
    body.auth-page { background: linear-gradient(145deg, #eef8f5, #f8fcfb); }
    .auth-page .auth-shell { min-height: auto; padding: 25px 0; }
    .auth-page .auth-story { display: none; }
    .auth-page .auth-form-column { min-height: calc(100vh - 50px); padding: 14px 12px; }
    .auth-page .auth-form-wrap { width: min(100%, 510px); }
    .auth-page .auth-mobile-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 22px; }
    .auth-page .auth-mobile-brand .brand-icon { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #0d9488, #16b8a6); }
    .auth-page .auth-mobile-brand strong { display: block; font-size: .92rem; letter-spacing: .04em; }
    .auth-page .auth-mobile-brand strong b { color: var(--auth-teal); }
    .auth-page .auth-mobile-brand small { display: block; color: #829ab1; font-size: .62rem; }
    .auth-page .auth-card .card-body { padding: 27px 21px; }
}
@media (max-width: 450px) {
    .auth-page .auth-card .card-body { padding: 24px 17px; }
    .auth-page .auth-heading h2 { font-size: 1.35rem; }
    .auth-page .auth-card .row.g-3 { --bs-gutter-y: .8rem; }
}

/* ===== Registration page ===== */
.register-page {
    background:
        radial-gradient(circle at 8% 12%, rgba(20, 184, 166, .12), transparent 28%),
        radial-gradient(circle at 92% 86%, rgba(201, 242, 123, .16), transparent 25%),
        #eef8f5;
}

.register-page .auth-shell { max-width: 1600px; margin: 0 auto; }
.register-page .auth-story { min-height: calc(100vh - 48px); height: calc(100vh - 48px); margin: 24px 0; padding: clamp(34px, 4vw, 62px); }
.register-page .auth-story { align-items: flex-start; }
.register-page .story-content { max-width: 390px; }
.register-page .story-brand { margin-bottom: clamp(38px, 6vh, 64px); }
.register-page .auth-story h1 { font-size: clamp(2.1rem, 3.25vw, 3.45rem); }
.register-page .story-text { line-height: 1.75; }

.register-page .register-story {
    background:
        linear-gradient(145deg, rgba(16, 42, 67, .98), rgba(18, 59, 85, .98) 52%, rgba(15, 118, 110, .96)),
        #102a43;
}

.register-page .register-journey {
    display: grid;
    gap: 12px;
    margin-top: 36px;
    max-width: 315px;
}

.register-page .journey-item {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(224, 244, 238, .56);
}

.register-page .journey-item.is-active { color: #fff; }
.register-page .journey-item > span:last-child { display: grid; gap: 2px; }
.register-page .journey-item strong { color: inherit; font-size: .82rem; }
.register-page .journey-item small { color: #9bb8be; font-size: .7rem; }
.register-page .journey-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid rgba(201, 242, 123, .25);
    border-radius: 11px;
    color: #a9c9cd;
    background: rgba(255, 255, 255, .08);
    font-size: .68rem;
    font-weight: 800;
}
.register-page .journey-item.is-active .journey-number {
    border-color: var(--auth-lime);
    color: #102a43;
    background: var(--auth-lime);
    box-shadow: 0 7px 16px rgba(201, 242, 123, .18);
}
.register-page .journey-line { width: 1px; height: 12px; margin-left: 17px; background: rgba(201, 242, 123, .25); }

.register-page .register-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: clamp(32px, 7vh, 70px);
    padding: 14px 15px;
    border: 1px solid rgba(201, 242, 123, .17);
    border-radius: 14px;
    color: #dff8f1;
    background: rgba(255, 255, 255, .075);
}
.register-page .register-note > i { margin-top: 2px; color: var(--auth-lime); font-size: 1.1rem; }
.register-page .register-note span { display: grid; gap: 3px; }
.register-page .register-note strong { color: #fff; font-size: .75rem; }
.register-page .register-note small { color: #aac7cd; font-size: .68rem; line-height: 1.5; }
.register-page .story-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.register-page .story-orb-one { width: 250px; height: 250px; right: -120px; bottom: -90px; border: 1px solid rgba(201, 242, 123, .12); }
.register-page .story-orb-two { width: 120px; height: 120px; right: 70px; bottom: 65px; border: 1px solid rgba(94, 234, 212, .12); }

.register-page .register-form-column {
    align-items: flex-start;
    padding: 44px clamp(24px, 4vw, 70px) 34px;
}
.register-page .register-form-wrap { width: min(100%, 700px); }
.register-page .register-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 4px 16px;
    color: #829ab1;
    font-size: .72rem;
}
.register-page .register-topline span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.register-page .register-topline span i { color: var(--auth-teal); font-size: .95rem; }
.register-page .register-topline a { color: var(--auth-teal-dark); font-size: .75rem; }
.register-page .register-card { border-radius: 22px; box-shadow: 0 22px 65px rgba(16, 42, 67, .12); }
.register-page .register-card .card-body { padding: clamp(28px, 4vw, 46px); }
.register-page .register-heading { margin-bottom: 27px; }
.register-page .form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--auth-teal-dark);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.register-page .form-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 9px; background: var(--auth-lime); }
.register-page .register-heading h2 { font-size: clamp(1.65rem, 3vw, 2rem); }
.register-page .register-heading p { max-width: 500px; line-height: 1.65; }

.register-page .form-section {
    margin-top: 27px;
    padding-top: 27px;
    border-top: 1px solid #edf3f1;
}
.register-page .form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.register-page .form-section-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}
.register-page .form-section-heading > span:last-child { display: grid; gap: 2px; }
.register-page .form-section-heading strong { color: var(--auth-ink); font-size: .84rem; }
.register-page .form-section-heading small { color: #829ab1; font-size: .7rem; }
.register-page .section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: none;
    border-radius: 10px;
    color: var(--auth-teal-dark);
    background: var(--auth-mint);
    font-size: .66rem;
    font-weight: 800;
}
.register-page .register-card .form-label { font-size: .74rem; }
.register-page .register-card .form-control,
.register-page .register-card .form-select { min-height: 47px; }
.register-page .register-card textarea.form-control { min-height: 76px; resize: vertical; }
.register-page .register-card .row.g-3 { --bs-gutter-y: 1rem; }
.register-page .register-card .form-text { line-height: 1.45; }
.register-page .register-actions {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #edf3f1;
}
.register-page .register-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #829ab1;
    font-size: .7rem;
    line-height: 1.5;
}
.register-page .register-consent i { margin-top: 1px; color: var(--auth-teal); font-size: .9rem; }
.register-page .register-actions .btn { min-height: 46px; padding-inline: 21px; }
.register-page .register-actions .btn-primary { min-width: 145px; }

@media (max-width: 1199.98px) and (min-width: 992px) {
    .register-page .auth-story { padding: 38px; }
    .register-page .register-form-column { padding-inline: 24px; }
    .register-page .register-card .card-body { padding: 30px; }
}

@media (max-width: 767.98px) {
    .register-page .auth-shell { padding: 18px 0 24px; }
    .register-page .auth-form-column { min-height: auto; padding: 4px 12px; }
    .register-page .register-form-wrap { width: 100%; }
    .register-page .register-topline { align-items: flex-start; flex-direction: column; gap: 6px; margin: 0 3px 13px; }
    .register-page .register-card { border-radius: 18px; }
    .register-page .register-card .card-body { padding: 25px 19px; }
    .register-page .register-heading { margin-bottom: 24px; }
    .register-page .form-section { margin-top: 23px; padding-top: 23px; }
    .register-page .form-section-heading { margin-bottom: 14px; }
    .register-page .form-section-heading small { line-height: 1.35; }
    .register-page .register-actions { margin-top: 25px; padding-top: 19px; }
    .register-page .register-actions .btn { width: 100%; }
    .register-page .auth-footer { margin-top: 14px; padding-inline: 8px; line-height: 1.5; }
}

@media (max-width: 380px) {
    .register-page .auth-mobile-brand { margin-bottom: 17px; }
    .register-page .register-card .card-body { padding: 22px 15px; }
    .register-page .register-heading h2 { font-size: 1.45rem; }
    .register-page .form-section-heading small { font-size: .66rem; }
}

/* ===== Login page ===== */
.login-page {
    background:
        radial-gradient(circle at 88% 14%, rgba(20, 184, 166, .13), transparent 26%),
        radial-gradient(circle at 12% 84%, rgba(201, 242, 123, .14), transparent 24%),
        #eef8f5;
}

.login-page .auth-shell { max-width: 1600px; margin: 0 auto; }
.login-page .auth-story { min-height: calc(100vh - 48px); height: calc(100vh - 48px); margin: 24px 0; padding: clamp(34px, 4vw, 62px); align-items: flex-start; }
.login-page .login-story { background: linear-gradient(145deg, #102a43 0%, #123b55 54%, #0f766e 135%); }
.login-page .story-content { max-width: 400px; }
.login-page .story-brand { margin-bottom: clamp(42px, 8vh, 82px); }
.login-page .auth-story h1 { font-size: clamp(2.1rem, 3.2vw, 3.35rem); }
.login-page .story-text { line-height: 1.75; }
.login-page .story-points { margin-top: 34px; }
.login-page .story-quote { margin-top: clamp(42px, 8vh, 82px); }

.login-page .login-form-column {
    align-items: flex-start;
    padding: 44px clamp(24px, 5vw, 84px) 34px;
}
.login-page .login-form-wrap { width: min(100%, 560px); }
.login-page .login-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 4px 16px;
    color: #829ab1;
    font-size: .72rem;
}
.login-page .login-topline span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.login-page .login-topline span i { color: var(--auth-teal); font-size: .95rem; }
.login-page .login-topline a { color: var(--auth-teal-dark); font-size: .75rem; }
.login-page .login-card { border-radius: 22px; box-shadow: 0 22px 65px rgba(16, 42, 67, .12); }
.login-page .login-card .card-body { padding: clamp(31px, 5vw, 50px); }
.login-page .login-heading { margin-bottom: 30px; }
.login-page .login-heading .form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--auth-teal-dark);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.login-page .login-heading .form-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 9px; background: var(--auth-lime); }
.login-page .login-heading h2 { font-size: clamp(1.7rem, 3vw, 2.15rem); }
.login-page .login-heading p { line-height: 1.65; }
.login-page .login-card .form-label { font-size: .74rem; }
.login-page .login-card .form-control { min-height: 50px; }
.login-page .login-card .form-check { margin-top: 4px; }
.login-page .login-card .btn-primary { min-height: 51px; font-size: .86rem; }
.login-page .login-security {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 25px;
    padding-top: 19px;
    border-top: 1px solid #edf3f1;
    color: #829ab1;
    font-size: .7rem;
    line-height: 1.5;
}
.login-page .login-security i { margin-top: 1px; color: var(--auth-teal); }
.login-page .login-card .auth-back { margin-top: 19px; }

@media (max-width: 1199.98px) and (min-width: 992px) {
    .login-page .auth-story { padding: 38px; }
    .login-page .login-form-column { padding-inline: 28px; }
    .login-page .login-card .card-body { padding: 34px; }
}

@media (max-width: 767.98px) {
    .login-page .auth-shell { padding: 18px 0 24px; }
    .login-page .auth-form-column { min-height: auto; padding: 4px 12px; }
    .login-page .login-form-wrap { width: 100%; }
    .login-page .login-topline { align-items: flex-start; flex-direction: column; gap: 6px; margin: 0 3px 13px; }
    .login-page .login-card { border-radius: 18px; }
    .login-page .login-card .card-body { padding: 27px 20px; }
    .login-page .login-heading { margin-bottom: 25px; }
    .login-page .login-security { margin-top: 22px; padding-top: 17px; }
}

@media (max-width: 380px) {
    .login-page .login-card .card-body { padding: 24px 16px; }
    .login-page .login-heading h2 { font-size: 1.5rem; }
    .login-page .login-card .form-check-label,
    .login-page .login-card .form-check a { font-size: .72rem; }
}