/* Final verification handoff: one clear action, honest delivery states, calm recovery. */
html body #authGate .auth-card.verify-mode .auth-verification-panel {
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
  border-color: rgba(19, 106, 118, 0.16) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(103, 220, 191, 0.15), transparent 46%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 249, 0.94)) !important;
  box-shadow: 0 18px 44px rgba(2, 47, 68, 0.09), inset 0 1px 0 #fff !important;
}

html body #authGate .auth-verification-eyebrow {
  color: #08766e !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.085em !important;
}

html body #authGate .auth-verification-heading h2 {
  color: #00243f !important;
  letter-spacing: -0.035em !important;
}

html body #authGate .auth-verification-panel .auth-verification-intro {
  color: #3d6068 !important;
  font-size: 0.88rem !important;
  font-weight: 570 !important;
  line-height: 1.5 !important;
}

html body #authGate .auth-verification-panel[data-delivery="failed"] .auth-verification-intro {
  color: #835044 !important;
}

html body #authGate .auth-verification-email-card {
  min-width: 0 !important;
  border-color: rgba(8, 105, 116, 0.15) !important;
  background: #f0faf6 !important;
}

html body #authGate .auth-verification-email-card > div > span {
  color: #476e73 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.055em !important;
}

html body #authGate .auth-verification-email {
  color: #0a4654 !important;
  font-size: 0.9rem !important;
}

html body #authGate .auth-verification-steps {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(10, 83, 105, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

html body #authGate .auth-verification-steps > li {
  padding: 10px 13px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body #authGate .auth-verification-steps > li + li {
  border-top: 1px solid rgba(10, 83, 105, 0.09) !important;
}

html body #authGate .auth-verification-steps strong {
  color: #153f4c !important;
  font-size: 0.82rem !important;
}

html body #authGate .auth-verification-steps small {
  color: #506c74 !important;
  font-size: 0.76rem !important;
  line-height: 1.4 !important;
}

html body #authGate .auth-verification-auto-status {
  min-height: 36px !important;
  color: #315f63 !important;
  background: #e5f6ed !important;
  font-size: 0.74rem !important;
}

html body #authGate .auth-verification-panel[data-delivery="failed"] .auth-verification-auto-status {
  color: #7b4a40 !important;
  background: #fff1e9 !important;
}

html body #authGate .auth-verification-panel[data-delivery="failed"] .auth-verification-auto-status > span:first-child {
  background: #bf7655 !important;
  box-shadow: 0 0 0 4px rgba(191, 118, 85, 0.11) !important;
}

html body #authGate .auth-verification-primary {
  min-height: 52px !important;
  margin-top: 2px !important;
}

html body #authGate .auth-verification-actions:not(.auth-verification-delete-action) {
  padding: 0 2px !important;
}

html body #authGate .auth-verification-troubleshooting {
  border-color: rgba(10, 83, 105, 0.14) !important;
  background: #f7faf8 !important;
}

html body #authGate .auth-verification-troubleshooting > summary {
  color: #285566 !important;
  font-size: 0.78rem !important;
}

html body #authGate .auth-verification-troubleshooting p {
  color: #496a72 !important;
  font-size: 0.76rem !important;
  line-height: 1.5 !important;
}

html body #authGate .auth-verification-assurance {
  padding: 10px 2px 0 !important;
  border-top: 1px solid rgba(10, 83, 105, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body #authGate .auth-verification-assurance p {
  color: #526e73 !important;
  font-size: 0.75rem !important;
}

@media (max-width: 390px) {
  html body #authGate .auth-verification-heading {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #authGate .auth-verification-mark {
    width: 44px !important;
    height: 44px !important;
  }

  html body #authGate .auth-verification-heading h2 {
    font-size: 1.34rem !important;
  }

  html body #authGate .auth-verification-eyebrow {
    font-size: 0.61rem !important;
  }
}

@media (min-width: 360px) and (max-width: 760px) {
  html body #authGate .auth-verification-actions:not(.auth-verification-delete-action) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body #authGate .auth-verification-actions:not(.auth-verification-delete-action) .auth-text-button {
    min-width: 0 !important;
    font-size: 0.76rem !important;
    text-align: center !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  /* Keep the confirmation action in the first view; let the whole gate scroll
     naturally for the detailed steps and recovery guidance. */
  html body #authGate .auth-card.verify-mode .auth-verification-primary { order: 1; }
  html body #authGate .auth-card.verify-mode .auth-verification-auto-status { order: 2; }
  html body #authGate .auth-card.verify-mode .auth-verification-actions:not(.auth-verification-delete-action) { order: 3; }
  html body #authGate .auth-card.verify-mode .auth-verification-steps { order: 4; }
  html body #authGate .auth-card.verify-mode .auth-verification-troubleshooting { order: 5; }
  html body #authGate .auth-card.verify-mode .auth-verification-assurance { order: 6; }
  html body #authGate .auth-card.verify-mode .auth-verification-delete-action { order: 7; }
}

@media (prefers-reduced-motion: reduce) {
  html body #authGate .auth-verification-panel,
  html body #authGate .auth-verification-panel * {
    scroll-behavior: auto !important;
  }
}