.account-registration-page,
.account-registration-page * { box-sizing: border-box; }
.account-registration-page {
    container: account-registration / inline-size;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    color: var(--text, #000000);
}
.account-registration-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}
.account-registration-page .account-registration-heading h2 {
    margin: 0 0 7px;
    color: var(--heading, #1e2751);
    font-size: clamp(26px, 3vw, 36px);
}
.account-registration-lead {
    max-width: 70ch;
    margin: 0;
    color: var(--muted, #666666);
    font-size: 1.08em;
    line-height: 1.5;
}
.account-registration-layout {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
}
.account-registration-form {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}
.account-registration-form[hidden] { display: none !important; }
.account-registration-required {
    margin: 0;
    color: var(--muted, #666666);
    font-size: 12px;
    line-height: 1.5;
}
.account-registration-required span,
.account-registration-field label > span,
.account-registration-consent label > span { color: var(--danger, #a62027); }
.account-registration-progress {
    overflow: hidden;
    border: 1px solid var(--border, #dddddd);
    border-radius: 8px;
    background: color-mix(in srgb, var(--stripe, #eeeeee) 45%, var(--surface, #ffffff));
}
.account-registration-progress[hidden] { display: none; }
#account-registration-progress ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
#account-registration-progress li {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
#account-registration-progress li + li { border-left: 1px solid var(--border, #dddddd); }
#account-registration-progress button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 11px 15px 8px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted, #666666);
    text-align: left;
    cursor: pointer;
}
#account-registration-progress button > span:first-child {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--border, #dddddd);
    border-radius: 4px;
    background: var(--surface, #ffffff);
    color: var(--heading, #1e2751);
    font-weight: 700;
}
#account-registration-progress button strong,
#account-registration-progress button small { display: block; }
#account-registration-progress button strong { color: var(--heading, #1e2751); font-size: 13px; line-height: 1.35; }
#account-registration-progress button small { margin-top: 3px; color: var(--muted, #666666); font-size: 11px; line-height: 1.3; }
#account-registration-progress li.is-current button {
    border-bottom-color: var(--link, #1e2751);
    background: var(--surface, #ffffff);
}
#account-registration-progress li.is-current button > span:first-child {
    border-color: var(--link, #1e2751);
    background: var(--link, #1e2751);
    color: var(--surface, #ffffff);
}
#account-registration-progress li.is-complete button > span:first-child {
    border-color: var(--link, #1e2751);
    color: var(--link, #1e2751);
}
#account-registration-progress button:disabled { cursor: default; opacity: .58; }
.account-registration-progress-compact { display: none; }
.account-registration-step {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}
.account-registration-step[hidden] { display: none; }
.account-registration-step-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border, #dddddd);
    border-radius: 8px;
    background: var(--surface, #ffffff);
}
.account-registration-step-actions[hidden] { display: none; }
.account-registration-step-actions > span { justify-self: end; color: var(--muted, #666666); font-size: 12px; }
.account-registration-step-actions > span:first-child:nth-last-child(2) { grid-column: 2; }
.account-registration-step-actions > .account-registration-next:only-of-type { grid-column: 3; }
.account-registration-next,
.account-registration-back { min-height: 40px; padding: 7px 15px; }
.account-registration-next { min-width: 105px; }
.account-registration-section,
.account-registration-guidance {
    min-width: 0;
    border: 1px solid var(--border, #dddddd);
    border-radius: 8px;
    background: var(--surface, #ffffff);
}
.account-registration-section { padding: 24px; }
.account-registration-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border, #dddddd);
}
.account-registration-section-icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--border, #dddddd);
    border-radius: 50%;
    color: var(--heading, #1e2751);
}
.account-registration-section-icon svg,
.account-registration-notice > svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.account-registration-section-heading h3,
.account-registration-guidance h3 {
    margin: 0 0 5px;
    color: var(--heading, #1e2751);
    font-size: 18px;
}
.account-registration-section-heading p {
    margin: 0;
    color: var(--muted, #666666);
    line-height: 1.45;
}
.account-registration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px 20px;
}
.account-registration-field-wide { grid-column: 1 / -1; }
.account-registration-field select { cursor: pointer; }
.account-registration-consent input[aria-invalid="true"] { border-color: var(--danger-border, #c74b50); }
.account-registration-password-control { position: relative; }
#account-registration-form .account-registration-password-control input {
    height: 42px;
    min-height: 42px;
    padding-right: 48px !important;
}
#account-registration-form .account-registration-password-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    box-shadow: none;
    color: var(--muted, #666666);
    cursor: pointer;
}
#account-registration-form .account-registration-password-toggle:hover { background: var(--stripe, #eeeeee); color: var(--text, #000000); }
#account-registration-form .account-registration-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}
.account-registration-password-slash { display: none; }
.account-registration-password-toggle[aria-pressed=true] .account-registration-password-slash { display: block; }
.account-registration-institution-action {
    display: inline-flex;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--link, #1e2751);
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.account-registration-institution-action:hover { text-decoration-thickness: 2px; }
.account-registration-institution-action[hidden] { display: none; }
.account-registration-other { margin-top: 18px; }
.account-registration-optional {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border, #dddddd);
}
.account-registration-optional > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    color: var(--heading, #1e2751);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.account-registration-optional > summary::-webkit-details-marker { display: none; }
.account-registration-optional > summary small { margin-left: auto; color: var(--muted, #666666); font-size: 11px; font-weight: normal; }
.account-registration-optional > summary svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform .15s ease;
}
.account-registration-optional[open] > summary svg { transform: rotate(180deg); }
.account-registration-optional[open] > .account-registration-grid { margin-top: 20px; }
.account-registration-verification .contact-game-panel,
.account-registration-verification .contact-math-panel { margin-bottom: 20px; }
.account-registration-verification .contact-code-field { max-width: 300px; }
.account-registration-consent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 3px 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #dddddd);
}
.account-registration-consent input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--link, #1e2751);
}
.account-registration-consent label { color: var(--text, #000000); font-size: 13px; line-height: 1.5; }
.account-registration-consent small { grid-column: 2; color: var(--muted, #666666); font-size: 12px; line-height: 1.45; }
.account-registration-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border, #dddddd);
}
.account-registration-actions > span { justify-self: end; color: var(--muted, #666666); font-size: 12px; line-height: 1.45; }
.account-registration-actions > .account-registration-back[hidden] + span { grid-column: 2; }
.account-registration-submit { min-height: 42px; padding: 8px 14px; }
.account-registration-submit[disabled] { opacity: .58; cursor: not-allowed; }
.account-registration-submit[aria-busy="true"] { cursor: wait; }
.account-registration-guidance { padding: 22px; }
.account-registration-guidance > p { margin: 0; color: var(--muted, #666666); font-size: 13px; line-height: 1.55; }
.account-registration-guidance ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.account-registration-guidance li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-content: start;
    gap: 11px;
    min-width: 0;
}
.account-registration-guidance li + li { padding-left: 20px; border-left: 1px solid var(--border, #dddddd); }
.account-registration-guidance li > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--border, #dddddd);
    border-radius: 4px;
    color: var(--heading, #1e2751);
    font-size: 12px;
}
.account-registration-guidance li strong { color: var(--text, #000000); font-size: 12px; }
.account-registration-guidance li p { margin: 4px 0 0; color: var(--muted, #666666); font-size: 12px; line-height: 1.5; }
.account-registration-support { margin-top: 20px !important; padding-top: 18px; border-top: 1px solid var(--border, #dddddd); }
.account-registration-switch { margin: 20px 0 0; color: var(--muted, #666666); font-size: 12px; }
.account-registration-page a { color: var(--link, #1e2751); }
.account-registration-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.account-registration-notice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 20px;
    padding: 15px 16px;
    border: 1px solid var(--danger-border, #c74b50);
    border-radius: 6px;
    background: var(--danger-bg, #fff3f3);
    color: var(--danger-text, #741d22);
}
.account-registration-notice[hidden] { display: none; }
.account-registration-notice.is-success { border-color: var(--success-border, #77b98a); background: var(--success-bg, #eef9f1); color: var(--success-text, #185d31); }
.account-registration-notice > svg { margin-top: 1px; color: inherit; }
.account-registration-notice-title { display: block; margin-bottom: 4px; color: inherit; }
.account-registration-notice-message { line-height: 1.5; }
.account-registration-notice ul { margin: 8px 0 0 18px; padding: 0; line-height: 1.7; }
.account-registration-page :focus-visible { outline: 2px solid var(--link, #1e2751); outline-offset: 2px; }

@container account-registration (max-width: 820px) {
    .account-registration-layout { gap: 20px; }
    .account-registration-guidance ol { gap: 16px; }
    .account-registration-guidance li + li { padding-left: 16px; }
}
@container account-registration (max-width: 580px) {
    .account-registration-heading { flex-direction: column; }
    #account-registration-progress ol { display: none; }
    .account-registration-progress-compact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 13px 15px 11px;
        border-top: 3px solid var(--link, #1e2751);
        color: var(--muted, #666666);
        font-size: 12px;
    }
    .account-registration-progress-compact strong { color: var(--heading, #1e2751); font-size: 13px; text-align: right; }
    .account-registration-page .account-registration-heading h2 { font-size: 26px; }
    .account-registration-section,
    .account-registration-guidance { padding: 20px; }
    .account-registration-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .account-registration-field-wide { grid-column: auto; }
    .account-registration-guidance ol { grid-template-columns: minmax(0, 1fr); }
    .account-registration-guidance li + li {
        padding-top: 16px;
        padding-left: 0;
        border-top: 1px solid var(--border, #dddddd);
        border-left: 0;
    }
    .account-registration-step-actions,
    .account-registration-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .account-registration-step-actions > span,
    .account-registration-actions > span { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
    .account-registration-step-actions > span:first-child:nth-last-child(2) { grid-column: 1 / -1; }
    .account-registration-step-actions .account-registration-next:only-of-type { grid-column: 1 / -1; }
    .account-registration-submit { width: 100%; min-height: 44px; }
    .account-registration-next,
    .account-registration-back { width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .account-registration-optional > summary svg { transition: none; }
}