/* ═══════════════════════════════════════════════════════════════
   css/auth.css — Login & Signup Page Styles
═══════════════════════════════════════════════════════════════ */


/* ── Card ────────────────────────────────────────────────────── */
.auth-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 40px 36px; width: 100%; max-width: 480px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: rise .3s ease;
}
@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ── Brand ───────────────────────────────────────────────────── */
.auth-brand      { text-align: center; margin-bottom: 28px; }
.auth-brand-icon { font-size: 52px; line-height: 1; margin-bottom: 10px; }
.auth-brand-icon img { height: 64px; width: auto; object-fit: contain; }
.auth-brand h1   { font-size: 22px; font-weight: 800; color: #f1f5f9; margin-bottom: 4px; }
.auth-brand p    { font-size: 13px; color: #94a3b8; }

/* ── Section Label ───────────────────────────────────────────── */
.auth-sec-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: #f97316;
  background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.25);
  border-radius: 6px; padding: 6px 12px; margin: 20px 0 14px;
}

/* ── Grid Row ────────────────────────────────────────────────── */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:480px) { .auth-row { grid-template-columns: 1fr; } .auth-card { padding: 26px 16px; } }

/* ── Field Groups ────────────────────────────────────────────── */
.auth-fg { margin-bottom: 13px; }
.auth-fg label {
  display: block; font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}
.auth-fg input, .auth-fg select {
  width: 100%; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 10px 13px; color: #f1f5f9; font-size: 13px;
  outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.auth-fg input:focus, .auth-fg select:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
.auth-fg input::placeholder { color: rgba(255,255,255,.25); }
.auth-hint { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 3px; }

/* ── Password Strength ───────────────────────────────────────── */
.pw-bar-wrap { height: 3px; background: rgba(255,255,255,.1); border-radius: 4px; margin-top: 5px; overflow: hidden; }
.pw-bar      { height: 100%; width: 0; border-radius: 4px; transition: width .3s, background .3s; }

/* ── Math Verify Row ─────────────────────────────────────────── */
.math-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(249,115,22,.07); border: 1px solid rgba(249,115,22,.2);
  border-radius: 9px; padding: 10px 13px; margin-bottom: 13px;
  font-size: 13px; color: #fdba74; font-weight: 600;
}
.math-row input {
  width: 70px !important; text-align: center; background: #0f172a !important;
  border: 1.5px solid #f97316 !important; border-radius: 7px !important;
  padding: 8px 4px !important; color: #f1f5f9 !important;
  font-size: 15px !important; font-weight: 700; flex-shrink: 0;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.auth-alert { border-radius: 9px; padding: 12px 14px; font-size: 13px; margin-bottom: 14px; display: none; line-height: 1.6; }
.auth-alert.show { display: block; }
.auth-alert-err  { background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }
.auth-alert-ok   { background: rgba(34,197,94,.13);  border: 1px solid rgba(34,197,94,.35);  color: #86efac; }

/* ── Submit Button ───────────────────────────────────────────── */
.auth-btn {
  width: 100%; background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff; border: none; border-radius: 10px; padding: 13px;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px;
  transition: opacity .2s, transform .1s; font-family: inherit; letter-spacing: .3px;
}
.auth-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Footer Links ────────────────────────────────────────────── */
.auth-link { text-align: center; margin-top: 18px; font-size: 13px; color: #64748b; }
.auth-link a { color: #f97316; font-weight: 700; text-decoration: none; cursor: pointer; }
.auth-link a:hover { color: #fdba74; }
.auth-back   { text-align: center; margin-top: 10px; }
.auth-back a { color: rgba(255,255,255,.35); font-size: 12px; cursor: pointer; text-decoration: none; }
.auth-back a:hover { color: #f97316; }

/* ── Debug Bar ───────────────────────────────────────────────── */
.debug-bar { font-size: 10px; color: #334155; margin-top: 18px; text-align: center; word-break: break-all; }