/* Ledger sign-in pages */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.auth-art {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 48px clamp(32px, 5vw, 72px); border-right: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(107, 77, 240, 0.18), transparent 60%);
}
.auth-art::after {
  content: ""; position: absolute; right: -18%; bottom: -12%; width: 70%; aspect-ratio: 30 / 26; opacity: 0.07; pointer-events: none;
  background: linear-gradient(135deg, #c9b8ff, #6b4df0);
  clip-path: polygon(40% 0, 63.3% 0, 36.7% 100%, 13.3% 100%, 40% 0, 70% 23%, 100% 23%, 83.3% 100%, 53.3% 100%, 70% 23%);
}
.art-copy h2 { font-size: clamp(48px, 5.4vw, 84px); line-height: 0.98; margin: 18px 0 22px; }
.art-copy p { font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 440px; margin: 0; }
.auth-art .fomo { align-self: flex-start; justify-content: flex-start; }

.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 20px; }
.auth-brand-mobile { display: none; }
.auth-card { width: 100%; max-width: 440px; padding: 36px 32px 30px; animation: card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(0.99); } to { opacity: 1; transform: none; } }
.view { animation: view-in 0.35s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.auth-title { font-size: 40px; line-height: 1.05; margin: 0 0 8px; }
.auth-sub { color: var(--soft); font-size: 15px; line-height: 1.55; margin: 0 0 24px; }
.auth-sub strong { color: var(--text); font-weight: 600; word-break: break-all; }
.auth-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
  font-size: 24px; color: var(--accent-2); background: rgba(124, 92, 255, 0.12); border: 1px solid rgba(165, 139, 255, 0.3);
}
.auth-switch { text-align: center; color: var(--muted); font-size: 14px; margin: 20px 0 0; line-height: 1.8; }
.auth-legal { max-width: 440px; text-align: center; font-size: 12.5px; color: var(--muted); margin: 0; }
.auth-legal a { color: var(--soft); }
[data-google-slot] .btn-google { margin-bottom: 0; }
.auth-card form .btn-primary { margin-top: 6px; }

.auth-busy { display: grid; place-items: center; gap: 16px; padding: 40px 0; color: var(--soft); }
.spinner-lg { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(165, 139, 255, 0.25); border-top-color: var(--accent-2); animation: spin 0.8s linear infinite; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-main { justify-content: flex-start; padding: calc(28px + env(safe-area-inset-top)) 18px 40px; }
  .auth-brand-mobile { display: inline-flex; margin: 8px 0 6px; }
}
@media (max-width: 420px) {
  .auth-card { padding: 28px 20px 24px; border-radius: 20px; }
  .auth-title { font-size: 34px; }
  .code-inputs { gap: 7px; }
  .code-inputs input { font-size: 26px; border-radius: 12px; }
}