/* Shared styling for login.html / signup.html / verify_sent.html.
   Pulled out of login.html (2026-09-25) once signup + email-verification
   pages needed the same card/form look, rather than triplicating it.

   Mobile notes:
   - input font-size is 16px, not smaller -- below that, iOS Safari
     auto-zooms the page on focus (a real, common mobile bug, not a style
     preference). Buttons/links are exempt from that rule, so they stay at
     14-14.5px.
   - inputs/buttons are padded to ~44px tall, Apple's/Google's minimum
     recommended touch-target size.
   - 100dvh (with a 100vh fallback for older browsers) instead of a bare
     100vh, so the centered card isn't pushed short by mobile Safari's
     collapsing address bar reserving extra height a bare 100vh doesn't
     account for. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #111827; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 15%, rgba(59,130,246,0.10), transparent 55%),
              linear-gradient(180deg, #EFF6FF 0%, #F7F8FA 45%);
  padding: 20px;
}
.login-wrap { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.brand-pill {
  display: inline-flex; align-items: center; gap: 7px; background: #DBEAFE; color: #1D4ED8;
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 6px; }
.logo-mark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.logo-mark img { width: 100%; height: 100%; display: block; }
.logo .brand-list { color: #EA580C; }
.tagline { font-size: 13.5px; color: #6B7280; margin-bottom: 26px; text-align: center; }
.login-card {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 30px 28px; width: 100%;
  box-shadow: 0 12px 32px rgba(16,24,40,0.09);
}
.login-card h1 { font-size: 15px; font-weight: 700; margin: 0 0 18px; }
label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
input {
  width: 100%; padding: 12px; border: 1px solid #E5E7EB; border-radius: 9px;
  font-size: 16px; font-family: inherit; margin-bottom: 16px; transition: border-color 0.12s, box-shadow 0.12s;
  -webkit-appearance: none; appearance: none;
}
input:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.field-hint { font-size: 11.5px; color: #9CA3AF; margin: -10px 0 16px; }
button {
  width: 100%; padding: 13px 12px; border-radius: 9px; border: none;
  background: #18181B; color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(0,0,0,0.18); transition: background 0.12s, transform 0.05s;
  touch-action: manipulation;
}
button:hover { background: #27272A; }
button:active { transform: translateY(1px); }
.error {
  color: #DC2626; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 9px;
  padding: 9px 12px; font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.notice {
  color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 9px;
  padding: 9px 12px; font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.footnote { margin-top: 22px; font-size: 12px; color: #9CA3AF; text-align: center; }
.bonus-pill {
  display: block; text-align: center; background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0;
  font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px; margin-bottom: 16px;
}
.oauth-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 9px; border: 1px solid #E5E7EB; background: #fff;
  color: #111827; font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  text-decoration: none; margin-bottom: 18px; transition: background 0.12s, border-color 0.12s;
  touch-action: manipulation;
}
.oauth-btn:hover { background: #F9FAFB; border-color: #D1D5DB; }
.oauth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.divider { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #9CA3AF; font-size: 12px; font-weight: 600; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #E5E7EB; }
.link-row { text-align: center; font-size: 13px; color: #6B7280; margin-top: 2px; }
.link-row a { color: #3B82F6; font-weight: 600; text-decoration: none; }
.link-row a:hover { text-decoration: underline; }
details.admin-login { margin-top: 22px; width: 100%; }
details.admin-login summary {
  font-size: 12px; color: #9CA3AF; cursor: pointer; text-align: center; list-style: none;
  touch-action: manipulation;
}
details.admin-login summary::-webkit-details-marker { display: none; }
details.admin-login form { margin-top: 14px; }
.check-icon {
  width: 52px; height: 52px; border-radius: 999px; background: #ECFDF5; color: #047857;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.check-icon svg { width: 24px; height: 24px; }
.dev-link-box {
  background: #F9FAFB; border: 1px dashed #D1D5DB; border-radius: 9px; padding: 10px 12px;
  font-size: 11.5px; color: #6B7280; margin-bottom: 16px; word-break: break-all;
}
.dev-link-box a { color: #3B82F6; }