.auth-page {
    position: relative;
    min-height: calc(100vh - 1px);
    padding: 2.5rem 1rem;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary, #c63130) 10%, transparent), transparent 28rem),
        radial-gradient(circle at 88% 82%, rgba(15, 23, 42, .07), transparent 24rem),
        var(--background, #f8fafc);
    color: #41536a !important;
    isolation: isolate;
}

.auth-page::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    opacity: .35;
    background-image: radial-gradient(rgba(100, 116, 139, .22) .7px, transparent .7px);
    background-size: 22px 22px;
    content: "";
    pointer-events: none;
}

.auth-shell {
    display: grid;
    width: min(100%, 490px);
    min-height: auto;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 1.75rem;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .12);
}

.auth-shell--fellow {
    width: min(100%, 860px);
    grid-template-columns: minmax(0, 1fr);
}

.auth-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary, #c63130) 92%, #111827), var(--primary, #c63130));
    color: #fff;
    isolation: isolate;
}

.auth-intro::before,
.auth-intro::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    content: "";
}

.auth-intro::before { top: -8rem; left: -9rem; width: 24rem; height: 24rem; }
.auth-intro::after { right: -7rem; bottom: 4rem; width: 18rem; height: 18rem; }

.auth-intro__home {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .4rem;
    color: rgba(255, 255, 255, .88);
    font-size: .75rem;
    transition: color .2s ease, transform .2s ease;
}

.auth-intro__home:hover { color: #fff; transform: translateX(3px); }
.auth-intro__home span { width: 1rem; height: 1rem; }

.auth-intro__content { position: relative; margin: 3rem 0; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: rgba(255,255,255,.76); font-size: .72rem; font-weight: 700; }
.auth-eyebrow span { width: 1rem; height: 1rem; }
.auth-intro h1 { margin: 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800; line-height: 1.65; }
.auth-intro__content > p { margin: 1rem 0 0; color: rgba(255,255,255,.76); font-size: .83rem; line-height: 2; }

.auth-benefits { display: grid; gap: .8rem; margin-top: 2rem; }
.auth-benefits li { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.9); font-size: .76rem; }
.auth-benefits li span { width: 1.05rem; height: 1.05rem; }

.auth-intro__fellow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 1rem;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
}

.auth-intro__fellow > div { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.auth-intro__fellow strong { color: #fff; font-size: .73rem; }
.auth-intro__fellow div span { color: rgba(255,255,255,.68); font-size: .62rem; line-height: 1.7; }
.auth-intro__fellow a { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; color: #fff; font-size: .68rem; font-weight: 700; }
.auth-intro__fellow a span { width: .9rem; height: .9rem; }

.auth-panel { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 3.25rem clamp(1.5rem, 5vw, 4rem); background: #fff; }
.auth-panel--wide { justify-content: flex-start; padding: 2.25rem clamp(1.5rem, 4vw, 3rem); }
.auth-panel__back { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid #c4c8cd; border-radius: .8rem; background: #fff; color: #64748b; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.auth-panel__back:hover { border-color: color-mix(in srgb, var(--primary, #c63130) 40%, #e2e8f0); color: var(--primary, #c63130); transform: translateX(2px); }
.auth-panel__back span { width: 1.1rem; height: 1.1rem; }
.auth-logo { display: block; align-self: center; margin-bottom: 2rem; }
.auth-logo img { width: auto; height: 3rem; object-fit: contain; }
.auth-panel__heading { margin-bottom: 1.75rem; text-align: center; }
.auth-panel__heading > span { display: block; margin-bottom: .45rem; color: var(--primary, #c63130); font-size: .69rem; font-weight: 800; }
.auth-panel__heading h2 { margin: 0; color: #1e293b; font-size: 1.25rem; font-weight: 800; }
.auth-panel__heading p { margin: .55rem 0 0; color: #64748b; font-size: .72rem; line-height: 1.8; }

.auth-alert { position: relative; margin-bottom: 1.25rem; padding: .85rem 1rem .85rem 2.4rem; border-radius: .85rem; font-size: .72rem; line-height: 1.9; }
.auth-alert .close { position: absolute; top: .7rem; left: .8rem; border: 0; background: transparent; color: currentColor; font-size: 1.2rem; cursor: pointer; }
.auth-validation-summary { margin-bottom: .75rem; color: #dc2626; font-size: .7rem; }
.auth-validation-summary ul { display: grid; gap: .25rem; }
.auth-form { display: flex; flex-direction: column; }
.auth-field { min-width: 0; }
.auth-field label { display: block; margin: 0 0 .45rem; color: #334155; font-size: .72rem; font-weight: 700; }
.auth-field label em { color: #dc2626; font-style: normal; }

.auth-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    border: 1px solid #c4c8cd;
    border-radius: .85rem;
    background: color-mix(in srgb, var(--muted, #fff) 96%, #f8fafc);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-control:focus-within { border-color: color-mix(in srgb, var(--primary, #c63130) 66%, #fff); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #c63130) 10%, transparent); }
.auth-control > [class*="i-lucide"]:first-child { width: 1.05rem; height: 1.05rem; margin-inline: .9rem .25rem; flex: 0 0 auto; color: #94a3b8; }
.auth-control input,
.auth-control select,
.auth-control textarea { width: 100%; border: 0; outline: 0; background: transparent; color: #1e293b; font-size: .78rem; box-shadow: none; }
.auth-control input,
.auth-control select { min-height: 3.15rem; padding: .6rem .55rem; }
.auth-control textarea { min-height: 6.5rem; resize: vertical; padding: .85rem .55rem; line-height: 1.9; }
.auth-control--textarea { align-items: flex-start; }
.auth-control--textarea > [class*="i-lucide"]:first-child { margin-top: 1rem; }
.auth-control input::placeholder,
.auth-control textarea::placeholder { color: #a8b2c1; }
.auth-control select { appearance: none; cursor: pointer; }
.auth-select-arrow { position: absolute; left: .85rem; width: .9rem !important; height: .9rem !important; margin: 0 !important; pointer-events: none; }
.auth-control select:disabled { cursor: not-allowed; color: #94a3b8; }
.auth-password-visibility { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; border: 0; background: transparent; color: #64748b; cursor: pointer; }
.auth-password-visibility span { width: 1rem; height: 1rem; }
.auth-field__error { display: block; min-height: .9rem; margin-top: .3rem; color: #dc2626; font-size: .63rem; }
.auth-field__hint { display: block; margin-top: .25rem; color: #94a3b8; font-size: .6rem; }

.auth-terms-note { margin: .15rem 0 1rem; color: #64748b; font-size: .65rem; text-align: center; }
.auth-terms-note a,
.auth-consent a { color: var(--primary, #c63130); }
.auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3.15rem; border-radius: .85rem; background: hsl(var(--primary-btn)) !important; color: #fff !important; font-size: .76rem; font-weight: 800; }
.auth-submit:hover { filter: brightness(.94); }
.auth-submit span { width: 1rem; height: 1rem; }
.auth-form__links { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.auth-form__links a,
.auth-text-button { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: var(--primary, #c63130); font: inherit; font-size: .68rem; cursor: pointer; }
.auth-form__links [class*="i-lucide"] { width: .9rem; height: .9rem; }
.auth-fellow-link { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid #eef2f7; color: #3d4652; font-size: .68rem; text-align: center; }
    .auth-fellow-link a {
        color: var(--primary, #3d4652);
        font-weight: 800;
    }

.auth-steps { display: grid; margin-top: 2rem; gap: 0; }
.auth-steps li { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 4rem; }
.auth-steps li:not(:last-child)::after { position: absolute; right: 1.05rem; top: 3rem; width: 1px; height: 2rem; background: rgba(255,255,255,.2); content: ""; }
.auth-steps li > span { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; font-size: .72rem; }
.auth-steps li.is-active > span { background: #fff; color: var(--primary, #c63130); }
.auth-steps li div { display: flex; flex-direction: column; gap: .15rem; }
.auth-steps strong { color: #fff; font-size: .73rem; }
.auth-steps small { color: rgba(255,255,255,.62); font-size: .61rem; }

.auth-form--fellow { gap: 1.25rem; }
.auth-form-section { margin: 0; padding: 1.1rem; border: 1px solid #e8edf3; border-radius: 1rem; background: rgba(248,250,252,.55); }
.auth-form-section legend { display: flex; align-items: center; gap: .55rem; padding: 0 .45rem; color: #1e293b; }
.auth-form-section legend > [class*="i-lucide"] { width: 1.05rem; height: 1.05rem; color: var(--primary, #c63130); }
.auth-form-section legend > span:last-child { display: flex; flex-direction: column; gap: .1rem; }
.auth-form-section legend strong { font-size: .74rem; }
.auth-form-section legend small { color: #94a3b8; font-size: .57rem; font-weight: 400; }
.auth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.auth-field--full { grid-column: 1 / -1; }

.auth-consent { display: flex; align-items: flex-start; gap: .55rem; color: #64748b; font-size: .65rem; line-height: 1.9; cursor: pointer; }
.auth-consent input { position: absolute; opacity: 0; pointer-events: none; }
.auth-consent__check { display: grid; width: 1.15rem; height: 1.15rem; margin-top: 1px; flex: 0 0 1.15rem; place-items: center; border: 1px solid #8ca0b8; border-radius: .35rem; background: #fff; color: #334155; transition: background-color .2s ease, border-color .2s ease; }
    .auth-consent__check span {
        font-size: 22px;
        line-height: 0px;
        margin-top: -2px;
        text-align: center;
        margin-right: -2px;
    }
.auth-consent input:checked + .auth-consent__check {
    border-color: #16a5dd;
    background: #16a5dd;
    color: #fff;
}
.auth-consent input:focus-visible + .auth-consent__check { box-shadow: 0 0 0 3px #1e293b }
.auth-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-form__footer > p { display: flex; align-items: center; gap: .4rem; max-width: 20rem; margin: 0; color: #64748b; font-size: .61rem; line-height: 1.8; }
.auth-form__footer > p span { width: 1rem; height: 1rem; flex: 0 0 auto; color: #16a34a; }
.auth-form__footer .auth-submit { width: auto; min-width: 14rem; padding-inline: 1rem; }

.auth-confirm { position: fixed; z-index: 10000; display: grid; inset: 0; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .58); backdrop-filter: blur(7px); }
.auth-confirm__card { width: min(100%, 480px); padding: 2rem; border: 1px solid rgba(255,255,255,.55); border-radius: 1.35rem; background: #fff; box-shadow: 0 30px 90px rgba(15,23,42,.24); text-align: center; }
.auth-confirm__icon { display: grid; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; background: color-mix(in srgb, var(--primary, #c63130) 10%, #fff); color: var(--primary, #c63130); }
.auth-confirm__icon span { width: 1.65rem; height: 1.65rem; }
.auth-confirm__card h2 { margin: 0; color: #1e293b; font-size: 1.05rem; font-weight: 800; }
.auth-confirm__card > p { margin: .75rem 0; color: #475569; font-size: .74rem; line-height: 2; }
.auth-confirm__notice { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0 1.25rem; padding: .8rem; border: 1px solid #fde68a; border-radius: .8rem; background: #fffbeb; color: #92400e; font-size: .65rem; line-height: 1.9; text-align: right; }
.auth-confirm__notice span { width: 1rem; height: 1rem; margin-top: .2rem; flex: 0 0 auto; }
.auth-confirm__actions { display: grid; gap: .65rem; }
.auth-confirm__accept { min-height: 3rem; border-radius: .8rem; background: hsl(var(--primary-btn)) !important; color: #fff !important; font-size: .72rem; font-weight: 800; }
.auth-confirm__cancel { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: .8rem; color: #64748b; font-size: .7rem; font-weight: 700; }
.auth-confirm__cancel:hover { border-color: #cbd5e1; background: #f8fafc; color: #334155; }

@media (max-width: 850px) {
    .auth-page { padding: 1rem; }
    .auth-shell,
    .auth-shell--fellow { width: min(100%, 760px); grid-template-columns: 1fr; }
    .auth-panel,
    .auth-panel--wide { padding: 2rem clamp(1rem, 5vw, 2.5rem); }
}

@media (max-width: 560px) {
    .auth-page { padding: 0; background: var(--muted, #fff); }
    .auth-shell,
    .auth-shell--fellow { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .auth-panel,
    .auth-panel--wide { padding: 1.75rem 1rem 2.5rem; }
    .auth-logo img { height: 2.5rem; }
    .auth-form-grid { grid-template-columns: 1fr; }
    .auth-field--full { grid-column: auto; }
    .auth-form__footer { align-items: stretch; flex-direction: column; }
    .auth-form__footer .auth-submit { width: 100%; min-width: 0; }
    .auth-form__links { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after { scroll-behavior: auto !important; transition: none !important; }
}
.auth-control .bi {
    color: #c4c8cd;
    margin-right: 6px;
    font-size: 16px;
}
.auth-consent a {
    color: hsl(var(--primary-btn)) !important
 }