:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b16;
  color: #f7f8ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #25315f 0, #10152c 38%, #080b16 75%); }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 460px); padding: 32px; border: 1px solid #313a68; border-radius: 18px; background: rgba(13, 18, 39, .96); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.brand { color: #9fb1ff; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 10px 0 8px; font-size: 2rem; }
h2 { margin: 18px 0 8px; }
.muted, .hint, .legal { color: #aeb7d7; }
.hint, .legal { font-size: .82rem; }
label { display: block; margin: 14px 0 6px; font-weight: 650; }
input { width: 100%; border: 1px solid #46517e; border-radius: 10px; background: #0a0e20; color: #fff; padding: 12px 13px; font: inherit; }
input:focus { outline: 2px solid #728cff; outline-offset: 1px; }
button, .button { width: 100%; display: block; margin-top: 16px; border: 0; border-radius: 10px; padding: 12px 14px; background: #6f87ff; color: #07102d; font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { filter: brightness(1.08); }
.provider { background: #fff; color: #121528; }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 8px; color: #8993b6; font-size: .85rem; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #303858; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; padding: 4px; background: #090d1d; border-radius: 10px; }
.tab { margin: 0; background: transparent; color: #aeb7d7; }
.tab.active { background: #27315c; color: #fff; }
.message { min-height: 24px; margin-top: 16px; color: #ffd98a; }
.message.success { color: #83e8ad; }
.hidden { display: none !important; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.turnstile { margin-top: 14px; min-height: 4px; }

@media (max-width: 520px) {
  .shell { padding: 0; align-items: stretch; }
  .card { min-height: 100vh; border: 0; border-radius: 0; padding: 28px 20px; }
}