body.auth-entry-page {
    background: radial-gradient(ellipse at 50% 0, #eaf0ff 0, #f6f8fc 55%, #f9fafb 100%);
    color: #17233b;
    /* GIS measures its iframe before the email form opens. Reserve scrollbar
       space so expanding the form cannot make that measured width overflow. */
    overflow-y: scroll;
}

.auth-entry-page .body-content {
    padding-top: clamp(32px, 9vh, 88px);
}

.auth-entry.login-card,
.auth-entry.register-card {
    max-width: 440px;
    padding: 36px 32px 30px;
    border: 1px solid rgba(215, 223, 237, 0.8);
    border-radius: 22px;
    box-shadow: 0 20px 60px -24px rgba(30, 58, 110, 0.22), 0 2px 8px rgba(30, 58, 110, 0.03);
}

.auth-entry .auth-brand {
    display: block;
    width: fit-content;
    margin: 0 auto 30px;
    color: #17233b;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.7px;
    text-decoration: none;
}

.auth-entry .auth-brand span {
    color: #2563eb;
}

.auth-entry.login-card h2,
.auth-entry.register-card h2 {
    font-size: 27px;
    font-weight: 650;
    letter-spacing: -0.7px;
    line-height: 1.25;
}

.auth-entry .auth-subtitle {
    margin: 10px 0 28px;
    color: #697386;
    font-size: 14px;
    line-height: 1.6;
}

.auth-entry .google-signin-wrap {
    margin-bottom: 14px;
}

.auth-entry .auth-email-choice {
    width: 100%;
}

/* Match the Google button's text size and medium weight. Keep the controls
   we render on one typography rule so Apple, email and guest cannot drift. */
.auth-entry .apple-signin-button,
.auth-entry .auth-email-button,
.auth-entry .auth-guest-button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.auth-entry .auth-email-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    min-height: 46px;
    padding: 10px 40px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    background: #fff;
    color: #283449;
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.auth-entry .auth-email-button::-webkit-details-marker {
    display: none;
}

.auth-entry .auth-email-button:hover {
    border-color: #9aaac3;
    background: #f8faff;
}

.auth-entry .auth-email-button:focus-visible,
.auth-entry .auth-guest-button:focus-visible,
.auth-entry .auth-brand:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 4px;
}

.auth-entry .auth-email-icon,
.auth-entry .auth-guest-icon {
    position: absolute;
    left: 14px;
}

.auth-entry .auth-email-chevron {
    position: absolute;
    right: 14px;
    color: #7b8799;
    transition: transform 160ms ease;
}

.auth-entry .auth-email-choice[open] .auth-email-chevron {
    transform: rotate(180deg);
}

.auth-entry .auth-email-fields {
    padding-top: 24px;
}

.auth-entry .auth-email-choice[open] .auth-email-fields {
    animation: auth-email-reveal 180ms ease-out;
}

.auth-entry .auth-footer {
    padding-top: 22px;
    border-top: 1px solid #edf0f5;
    margin-top: 26px;
    font-size: 13px;
}

.auth-entry .auth-guest-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 46px;
    margin-bottom: 18px;
    padding: 10px 40px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    background: #fff;
    color: #283449;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.auth-entry .auth-guest-button:hover {
    border-color: #9aaac3;
    background: #f8faff;
    color: #283449;
    text-decoration: none;
}

@keyframes auth-email-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .auth-entry-page .body-content { padding: 24px 16px 20px; }
    .auth-entry.login-card,
    .auth-entry.register-card { padding: 28px 22px 24px; border-radius: 18px; }
    .auth-entry.login-card h2,
    .auth-entry.register-card h2 { font-size: 24px; }
    .auth-entry .auth-brand { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-entry .auth-email-button,
    .auth-entry .auth-guest-button,
    .auth-entry .auth-email-chevron { transition: none; }
    .auth-entry .auth-email-choice[open] .auth-email-fields { animation: none; }
}