.google-login { display: grid; justify-items: center; gap: 10px; margin-top: 25px; }
.google-login-label { color: var(--muted); font-size: 10px; }
.google-button-host { min-height: 44px; display: grid; place-items: center; }
.google-login-error { margin: 0; color: #ff9aae; font-size: 9px; }
.login-separator { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--muted-2); font-size: 9px; }
.login-separator::before, .login-separator::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.password-login { text-align: right; border: 1px solid var(--line); border-radius: 13px; background: rgba(8, 22, 37, .55); }
.password-login summary { cursor: pointer; padding: 13px 15px; color: #a8bad1; font-size: 10px; list-style: none; }
.password-login summary::-webkit-details-marker { display: none; }
.password-login summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 7px; border-radius: 50%; background: var(--blue-soft); color: #78a8ff; }
.password-login[open] summary::before { content: "−"; }
.password-login .form-stack { padding: 2px 15px 15px; }
.google-config-warning { margin: 20px 0; padding: 11px; border: 1px solid rgba(255,184,77,.2); border-radius: 10px; color: #ffc46b; background: rgba(255,184,77,.07); font-size: 9px; }

/* Keep the space-themed page dark while presenting authentication on a bright surface. */
.login-card {
    color: #0b1d2f;
    border-color: rgba(255, 255, 255, .88);
    background: #fff;
    box-shadow: 0 34px 90px rgba(0, 6, 18, .48), inset 0 1px 0 #fff;
}
.login-card .brand-mark {
    color: #079c78;
    border-color: #a8e8d7;
    background: #e9faf5;
    box-shadow: inset 0 0 22px rgba(22, 201, 141, .09), 0 12px 30px rgba(10, 73, 74, .12);
}
.login-card .brand-mark svg path:first-child { fill: rgba(22, 201, 141, .08); }
.login-card .eyebrow { color: #246dc7; }
.login-card h1 { color: #071827; }
.login-card .muted { color: #5f7286; }
.login-card .google-login-label { color: #4f6478; }
.login-card .google-login-error { color: #b4233c; }
.login-card .login-separator { color: #75889a; }
.login-card .login-separator::before,
.login-card .login-separator::after { background: #d4e0ea; }
.login-card .password-login {
    border-color: #cedbe6;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.login-card .password-login summary { color: #30485f; }
.login-card .password-login summary::before { color: #1d68cb; background: #deebff; }
.login-card .field > span:first-child { color: #425a70; }
.login-card .field input {
    color: #102337;
    border-color: #c6d5e2;
    background: #fff;
}
.login-card .field input:focus {
    border-color: #3f86eb;
    box-shadow: 0 0 0 3px rgba(40, 118, 255, .12);
}
.login-card .password-field button { color: #597188; }
.login-card .password-field button:hover { color: #164f93; background: #e8f1fb; }
.login-card .login-footnote { color: #718599; }
.login-card .alert-error {
    color: #a52337;
    border-color: #f3bdc5;
    background: #fff0f2;
}
.login-card .google-config-warning {
    color: #8b5700;
    border-color: #f0d39b;
    background: #fff7e6;
}

@media (max-width: 520px) { .login-card { padding: 28px 20px; } .google-button-host { width: 100%; overflow: hidden; } }