/* Login feedback stays inside the card and works with touch or keyboard. */
.sf-login-card form { transition: opacity 160ms ease, transform 160ms ease; }
.sf-login-pending [data-login-submit] {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  opacity: 1; cursor: progress;
  box-shadow: 0 8px 24px rgba(36, 102, 83, .18), inset 0 1px rgba(255,255,255,.35);
}
.sf-login-pending [data-login-submit]::before {
  content: ''; width: 1rem; height: 1rem; flex: 0 0 1rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: sf-login-spin 700ms linear infinite;
}
.sf-login-departing { opacity: .25; transform: translateY(-4px); }
@keyframes sf-login-spin { to { transform: rotate(360deg); } }
.sf-login-glass[hidden] { display: none; }
.sf-login-glass {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 24px; background: rgba(239, 244, 242, .62);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  backdrop-filter: blur(28px) saturate(125%);
  animation: sf-login-glass-enter 180ms ease-out both; cursor: progress;
}
.sf-login-glass-panel {
  position: relative; overflow: hidden;
  box-sizing: border-box; width: min(100%, 340px); padding: 40px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; color: #284b42; border-radius: 34px;
  background: radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.92), transparent 65%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(242,248,245,.58));
  -webkit-backdrop-filter: blur(40px) saturate(145%);
  backdrop-filter: blur(40px) saturate(145%);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 24px 80px rgba(38,64,56,.12), 0 4px 16px rgba(38,64,56,.04),
    inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.55);
}
.sf-login-glass-panel strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; }
.sf-login-glass-panel > span:last-child { color: #587068; font-size: .9rem; line-height: 1.5; }
.sf-login-glass-spinner {
  width: 34px; height: 34px; border: 3px solid rgba(57,116,93,.18);
  border-top-color: #39745d; border-radius: 50%;
  animation: sf-login-spin 800ms linear infinite;
}
@keyframes sf-login-glass-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sf-login-glass, .sf-login-glass-spinner { animation: none; }
  .sf-login-card form { transition: none; }
  .sf-login-pending [data-login-submit]::before { animation: none; }
  .sf-login-departing { opacity: 1; transform: none; }
}