/* CaptchaFlow Image Collection MVP */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; margin: 0; padding: 0; }
body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #111827;
  color: #f8fafc;
  font-family: Inter, system-ui, sans-serif;
}
#app-root { width: 100%; min-height: 100vh; min-height: 100dvh; }
button, input, label { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
details[open] .provider-chevron { transform: rotate(90deg); }

.glass {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.1);
  backdrop-filter: blur(18px);
}
.glass-strong {
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(24px);
}
.glass-input {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: #f8fafc !important;
}
.glass-input::placeholder { color: #64748b; opacity: 1; }
.glow-indigo { box-shadow: 0 0 24px rgba(99, 102, 241, 0.18), 0 0 70px rgba(99, 102, 241, 0.06); }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes slideInR { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutR { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(110%); } }
.anim-breathe { animation: breathe 3s ease-in-out infinite; }
.toast-in { animation: slideInR 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.toast-out { animation: slideOutR 0.25s ease-in forwards; }

@media (max-width: 640px) {
  .glass, .glass-strong { border-radius: 1.25rem; }
}