.auth-shell {
    display: grid;
    position: relative;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 16px;
    place-items: center;
    background: #fff;
}

.auth-bg-image {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background:
        linear-gradient(115deg, rgba(20, 34, 37, .68), rgba(20, 34, 37, .24) 48%, rgba(230, 106, 85, .28)),
        rgba(18, 25, 27, .18);
}

.auth-modal,
.auth-card {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 8px;
    padding: 30px;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 24px 70px rgba(10, 20, 22, .32);
    color: #ffffff;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.auth-modal h1 {
    margin: 0;
    line-height: 1.15;
}

.auth-modal .eyebrow {
    color: #ffd27a;
}

.auth-modal label,
.auth-modal legend,
.auth-modal .form-footer,
.auth-modal .form-note,
.auth-modal .field-note,
.auth-modal .modal-copy {
    color: rgba(255, 255, 255, .86);
}

.register-form .field-label,
.register-form legend {
    color: #f6fbff;
    text-shadow: 0 1px 12px rgba(10, 20, 22, .38);
}

.auth-modal input,
.auth-modal select {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .78);
}

.auth-modal a,
.auth-modal .text-button,
.auth-modal .terms-link {
    color: #fff3c4;
}

.auth-modal--wide {
    width: min(920px, 100%);
}

.auth-modal--register {
    width: min(690px, 100%);
    padding: 5px 10px;
}

.auth-modal--reset {
    width: min(440px, 100%);
}

.auth-modal[data-auth-panel="login"] {
    max-width: 400px;
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.register-column {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
}

.register-actions {
    display: grid;
    gap: 5px;
    margin-top: 5px;
}

.register-form {
    gap: 5px;
}

.register-form label,
.register-form fieldset {
    gap: 5px;
}

.register-form .form-row {
    align-items: start;
    gap: 5px;
}

.register-form .form-row input,
.register-form .form-row select {
    height: 32px;
}

.register-form input,
.register-form select {
    min-height: 29px;
    padding: 5px 7px;
}

.register-form input[type="checkbox"] {
    width: auto;
    min-height: 0;
    padding: 0;
}

.register-form .primary-button {
    min-height: 29px;
    padding: 0 8px;
}

.register-form .password-checker,
.register-form .terms-box,
.register-form .race-card {
    padding: 5px;
}

.register-form .password-rules {
    margin-top: 5px;
}

.register-form .required-star,
.register-form .form-note,
.register-form .field-note {
    color: #ff3b30;
    text-shadow: 0 1px 10px rgba(10, 20, 22, .28);
}

.register-form .form-note {
    margin-top: 3px;
    font-size: .75rem;
    font-weight: 900;
}

.register-form .race-selected-description {
    margin: 0;
    padding-top: 2px;
    color: #9be7b0;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 10px rgba(10, 20, 22, .32);
}

.form-footer {
    margin: 14px 0 0;
}

.form-footer--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.password-checker,
.terms-box,
.race-card {
    --password-strength-width: 0%;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 16px 34px rgba(10, 20, 22, .16);
    color: #ffffff;
}

.password-checker__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    overflow-wrap: anywhere;
}

.password-checker__topline strong {
    color: var(--danger);
    white-space: nowrap;
}

.password-checker[data-strength="fair"] .password-checker__topline strong {
    color: #9a6a00;
}

.password-checker[data-strength="good"] .password-checker__topline strong,
.password-checker[data-strength="strong"] .password-checker__topline strong {
    color: #a7f3c1;
    text-shadow: 0 1px 10px rgba(10, 20, 22, .36);
}

.password-checker__track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #dde4da;
}

.password-checker__track span {
    display: block;
    width: var(--password-strength-width);
    height: 100%;
    background: var(--danger);
    transition: width .36s cubic-bezier(.22, 1, .36, 1), background-color .24s ease;
}

.password-checker[data-strength="weak"] .password-checker__track span {
    background: var(--danger);
}

.password-checker[data-strength="fair"] .password-checker__track span {
    background: #d29a20;
}

.password-checker[data-strength="good"] .password-checker__track span {
    background: var(--success);
}

.password-checker[data-strength="strong"] .password-checker__track span {
    background: var(--success);
}

.password-rules {
    margin: 8px 0 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, .76);
}

.password-rules li {
    overflow-wrap: anywhere;
}

.password-rules li.is-met {
    color: #a7f3c1;
    font-weight: 800;
    text-shadow: 0 1px 10px rgba(10, 20, 22, .36);
}

.password-rules li.is-met::marker {
    color: #a7f3c1;
}

.terms-link {
    border: 0;
    padding: 0;
    background: transparent;
    font-weight: 900;
}

.terms-modal {
    inset: 24px;
    width: auto;
    max-height: none;
}

@media (max-width: 900px) {
    .register-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .auth-shell {
        padding: 18px 10px;
    }

    .auth-modal,
    .auth-card {
        padding: 14px;
    }
}