.auth-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(900px 520px at 50% -12%, #eef4ff 0%, rgba(238, 244, 255, 0) 62%),
    var(--bg);
}

.auth-card {
  width: 100%; max-width: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(23, 34, 77, .07);
  padding: 40px 44px 34px;
  text-align: center;
  animation: authIn .35s cubic-bezier(.21,1.02,.73,1);
}
@keyframes authIn { from { opacity: 0; transform: translateY(14px); } }

.auth-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.auth-logo svg { width: 62px; height: 62px; }

.auth-card h1 {
  font-size: 33px; line-height: 1.22; letter-spacing: -.03em;
  color: #101a3d; margin-bottom: 14px;
}
.auth-sub { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-bottom: 26px; }

.sso-btn {
  display: flex; align-items: stretch; width: 100%;
  border: 1px solid #cfe0fd; border-radius: 9px; overflow: hidden;
  background: var(--brand); margin-bottom: 12px;
  transition: filter .15s, box-shadow .15s, transform .06s;
  box-shadow: 0 1px 3px rgba(37, 99, 235, .22);
  padding: 0;
}
.sso-btn:hover { filter: brightness(1.04); box-shadow: 0 3px 10px rgba(37, 99, 235, .26); }
.sso-btn:active { transform: translateY(1px); }
.sso-btn:disabled { opacity: .65; cursor: wait; filter: none; }
.sso-mark {
  width: 54px; flex: none; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sso-mark svg { width: 22px; height: 22px; }
.sso-label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; color: #fff; font-weight: 600; font-size: 15px;
  font-family: var(--font-display);
}
.sso-spin {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-alt { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.auth-foot {
  margin-top: 26px; padding-top: 0;
  font-size: 13px; color: var(--muted); text-align: center;
}
.auth-card .divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--muted-2); font-size: 12px;
}
.auth-card .divider::before, .auth-card .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.auth-outer-foot {
  margin-top: 22px; font-size: 13px; color: var(--muted); text-align: center;
}

.auth-error {
  display: none; align-items: flex-start; gap: 9px; text-align: left;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  padding: 10px 12px; border-radius: 9px; font-size: 13px; margin-bottom: 16px;
}
.auth-error.show { display: flex; }

/* Local email fallback form */
.local-form { display: none; text-align: left; gap: 12px; }
.local-form.show { display: flex; flex-direction: column; }
.link-btn { background: none; border: 0; color: var(--brand); font-weight: 600; padding: 0; font-size: 13.5px; }
.link-btn:hover { text-decoration: underline; }

/* Setup notice */
.setup-note {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: 12.5px; text-align: left; line-height: 1.55;
}
.setup-note code { background: rgba(146, 64, 14, .1); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }