.auth-page {
    min-height: 100vh;
    background: var(--surface-white);
}

.alpha-label {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .4rem .85rem;
    border-radius: 1rem;
    background: var(--sage);
    color: var(--green);
    font-size: .9rem;
    font-weight: 600;
}

.registration-form > div {
    margin-bottom: 1.25rem;
}

.registration-form .alpha-invitation {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.registration-form .alpha-invitation > div {
    margin: 0;
}

.registration-captcha {
    --altcha-color-base: var(--surface);
    --altcha-color-base-content: var(--ink);
    --altcha-border-color: var(--line);
    --altcha-color-primary: var(--green);
}

.registration-captcha input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
}

.auth-header {
    padding: 18px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-header .brand {
    font-size: 2.8rem;
    gap: 15px;
}

.auth-content {
    width: min(600px,calc(100% - 40px));
    margin: 45px auto 65px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.auth-content h1 {
    font-size: 2.9rem;
    white-space: nowrap;
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: 14px;
}

.auth-content>.lede {
    font-size: 1.6rem;
    margin-bottom: 42px;
}

.auth-content form {
    text-align: left;
}

.auth-content form>div>div {
    margin-bottom: 28px;
}

.auth-content input {
    padding: 17px 20px;
    font-size: 1.2rem;
    background: var(--surface-white);
}

.auth-content .button {
    min-height: 60px;
    font-size: 1.25rem;
    margin-top: 15px;
}

.auth-content>p:not(.lede) {
    margin-top: 25px;
}

.auth-content .accent-link {
    text-decoration: underline;
    margin-left: 7px;
    font-weight: bold;
}

.auth-footer {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    font-size: .9rem;
}

.separator {
    color: var(--muted);
    font-style: italic;
}

.auth-content .otp-input {
    letter-spacing: .65em;
    font-size: 2rem;
    text-align: center;
}

@media(max-width:1000px) {
    .auth-content h1 {
        white-space: normal;
        margin-left: 0;
        margin-right: 0;
        font-size: 2.3rem;
    }
}

@media(max-width:600px) {
    .auth-header {
        padding: 10px 18px;
    }
    .auth-header .brand {
        font-size: 2rem;
    }
    .auth-header>a:last-child {
        font-size: .85rem;
    }
    .auth-content {
        margin-top: 45px;
    }
    .auth-content h1 {
        font-size: 2rem;
    }
    .auth-content>.lede {
        font-size: 1.25rem;
        margin-bottom: 26px;
    }
}

.auth-code-page { background:var(--surface); }
.auth-code-page .auth-content { width:min(540px,calc(100% - 32px)); margin:24px auto 40px; }
.login-code-card { padding:30px; border:1px solid var(--line); border-radius:24px; background:var(--surface-white); box-shadow:0 6px 0 var(--line); }
.login-code-art { display:block; margin:0 auto 12px; object-fit:contain; image-rendering:pixelated; }
.login-code-card .eyebrow { margin:0 0 10px; color:var(--green); }
.auth-content .login-code-card h1 { margin:0; white-space:normal; font-size:clamp(1.8rem,5vw,2.3rem); line-height:1.15; }
.login-code-intro { margin:16px 0 24px; color:var(--muted); line-height:1.6; }
.login-code-fields { margin:0; padding:0; border:0; min-width:0; }
.login-code-fields legend { width:100%; margin-bottom:12px; text-align:center; font-weight:600; }
.login-code-slots { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.auth-content .login-code-slots input { width:100%; min-width:0; height:64px; min-height:0; padding:0; margin:0; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); text-align:center; font-size:1.8rem; font-weight:700; font-variant-numeric:tabular-nums; caret-color:var(--green); }
.auth-content .login-code-slots input:focus { border-color:var(--green); outline:2px solid var(--green); outline-offset:2px; background:var(--surface-white); }
.login-code-help,.login-code-expiry { text-align:center; color:var(--muted); font-size:.8rem; margin:12px 0; }
.auth-content .login-code-card .button { margin-top:6px; min-height:50px; font-size:1rem; }
.login-code-support { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:.85rem; }
.login-code-support p { margin:0 0 12px; color:var(--muted); }
.login-code-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 24px; }
.login-code-links form { margin:0; }
.login-code-links a,.login-code-links .text-button { padding:4px 0; margin:0; font:inherit; color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.login-code-back { display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:.9rem; color:var(--muted); }
@media(max-width:420px) {
    .login-code-card { padding:24px 16px; border-radius:18px; }
    .login-code-slots { gap:6px; }
    .auth-content .login-code-slots input { height:52px; border-radius:9px; font-size:1.5rem; }
    .login-code-links { flex-direction:column; gap:8px; }
}

.auth-story,.auth-pixel-scene { display:none; }
@media(min-width:1100px) {
    .auth-page { background:var(--surface); }
    .auth-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; width:min(1160px,calc(100% - 96px)); margin:28px auto 48px; }
    .auth-story { display:block; padding:32px 24px; border-radius:32px; background:#eee4f2; text-align:center; }
    .auth-story .eyebrow { color:var(--green); font-size:.7rem; margin:0 0 14px; }
    .auth-story h2 { margin:0; font-size:2.1rem; line-height:1.18; }
    .auth-story > p:not(.eyebrow) { font-size:1.1rem; line-height:1.6; margin:12px 0; }
    .auth-story > span { color:var(--muted); font-size:.85rem; }
    .auth-stage > .auth-content { width:100%; margin:0; min-width:0; }
    .auth-stage > .auth-content h1 { margin-left:0; margin-right:0; white-space:normal; font-size:2.4rem; }
    .auth-stage > .auth-content > .lede { font-size:1.15rem; margin-bottom:26px; }
    .auth-pixel-scene { display:block; position:relative; height:336px; max-width:460px; margin:12px auto; }
    .auth-pixel-scene img { position:absolute; object-fit:contain; image-rendering:pixelated; }
    .auth-scene-halo { position:absolute; inset:38px 30px 20px; border-radius:50%; background:#f7efda; }
    .auth-scene-library { width:256px; height:256px; top:18px; left:50%; transform:translateX(-50%); }
    .auth-scene-reading { width:128px; height:128px; bottom:0; left:0; }
    .auth-scene-mail { width:128px; height:128px; right:0; bottom:10px; }
    .auth-scene-star { position:absolute; color:#a97520; font-size:1.7rem; }
    .auth-scene-star--one { left:16px; top:60px; }
    .auth-scene-star--two { right:12px; top:32px; font-size:2.4rem; }
    .registration-page .auth-stage { display:block; }
    .registration-page .auth-stage > .auth-content { width:100%; }
    .registration-story .registration-illustration { display:none; }
    .registration-story .auth-pixel-scene { margin:12px 0 20px; }
}

.registration-page .registration-form .password-field > input { padding-right:3.5rem; }

/* Space field groups, keeping the visibility control inside its input. */
.auth-content .auth-password-form > .auth-field { margin:0 0 24px; }
.auth-content .auth-password-form .password-field { margin:0; }