/* ============================================================
   Auth pages (signup, and login when it lands)

   style.css is loaded first and supplies the design tokens, the top bar,
   the brand logos and the toasts. Everything below is specific to the
   centred auth card, plus the few overrides the app shell needs so this
   page can scroll instead of filling exactly one viewport.
   ============================================================ */

.auth-body { overflow-y: auto; }

.auth-shell {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 22px 48px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 34px 34px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 50% 0%, var(--card-glow) 0%, transparent 70%),
    var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.auth-head { text-align: center; margin-bottom: 26px; }

.auth-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.auth-sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------------------- FORM ---------------------- */

.auth-form { display: flex; flex-direction: column; gap: 17px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.field-control {
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 14px;
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: color 0.18s ease;
}

.field-input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: 12px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.field-input::placeholder { color: var(--text-tertiary); }

.field-input:hover { border-color: var(--border-strong); }

.field-input:focus {
  border-color: var(--accent-line);
  background: var(--bg-raise-hover);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.field-control:focus-within .field-icon { color: var(--accent-bright); }

/* Password fields leave room for the show/hide button */
#password, #confirmPassword { padding-right: 46px; }

.field-toggle {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.field-toggle:hover { background: var(--bg-raise-hover); color: var(--text-primary); }
.field-toggle .icon-eye-off { display: none; }
.field-toggle.revealed .icon-eye { display: none; }
.field-toggle.revealed .icon-eye-off { display: block; }

.field-hint {
  font-size: 12px;
  color: var(--text-tertiary);
}

.field-error {
  display: none;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--danger);
}

/* An invalid field shows its message and recolours its border */
.field.invalid .field-error { display: block; }
.field.invalid .field-hint { display: none; }
.field.invalid .field-input {
  border-color: rgba(251, 113, 133, 0.55);
  background: rgba(251, 113, 133, 0.06);
}
.field.invalid .field-input:focus {
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.12);
}
.field.invalid .field-icon { color: var(--danger); }

/* ---------------------- SUBMIT ---------------------- */

.auth-submit {
  position: relative;
  height: 48px;
  margin-top: 5px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent) 60%, #7C3AED);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(139, 92, 246, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(139, 92, 246, 0.55); }
.auth-submit:active { transform: scale(0.98); }
.auth-submit:disabled { cursor: not-allowed; filter: saturate(0.6) brightness(0.85); transform: none; box-shadow: none; }

.auth-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  animation: authSpin 0.7s linear infinite;
}

.auth-submit.loading .auth-submit-label { visibility: hidden; }
.auth-submit.loading .auth-spinner { display: block; }

@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---------------------- SUCCESS ---------------------- */

.auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 10px 0 4px;
  animation: authFadeIn 0.3s ease;
}

@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: var(--success);
}

.auth-success-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.auth-success-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.auth-secondary {
  margin-top: 10px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.auth-secondary:hover { background: var(--bg-raise-hover); border-color: var(--border-strong); }

/* ---------------------- VERIFICATION ---------------------- */

.auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: var(--accent-bright);
}

.otp-input {
  width: 100%;
  height: 62px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-align: center;
  text-indent: 0.44em;   /* keeps the digits optically centred */
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.otp-input::placeholder { color: var(--text-tertiary); opacity: 0.42; font-weight: 600; }
.otp-input:focus {
  border-color: var(--accent-line);
  background: var(--bg-raise-hover);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}
.field.invalid .otp-input {
  border-color: rgba(251, 113, 133, 0.55);
  background: rgba(251, 113, 133, 0.06);
}

.otp-timer {
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
}
.otp-timer.expired { color: var(--danger); }

/* ---------------------- CHECKBOX ---------------------- */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.checkbox:hover { background: var(--bg-raise-hover); border-color: var(--border-strong); }

/* The real input stays focusable but invisible; the box below is the visual */
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-raise);
  color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.checkbox input:checked + .checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.checkbox input:focus-visible + .checkbox-box {
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.22);
}

.checkbox-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}
.checkbox-text small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ---------------------- RESEND ---------------------- */

.auth-resend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-bright);
  cursor: pointer;
}
.auth-link-btn:hover:not(:disabled) { text-decoration: underline; }
.auth-link-btn:disabled { color: var(--text-tertiary); cursor: not-allowed; }

.auth-foot #challengeTimer { display: block; margin-bottom: 6px; }

.auth-link {
  color: var(--accent-bright);
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* A link that has to read as the primary action */
.auth-primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent) 60%, #7C3AED);
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(139, 92, 246, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.auth-primary-link:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(139, 92, 246, 0.55); }
.auth-primary-link:active { transform: scale(0.98); }

.auth-success .auth-secondary { margin-top: 4px; }

.auth-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ---------------------- RESPONSIVE ---------------------- */

@media (max-width: 560px) {
  .auth-main { padding: 16px 16px 36px; }
  .auth-card { padding: 26px 20px 22px; border-radius: var(--radius-md); }
  .auth-title { font-size: 22px; }
  .auth-sub { font-size: 13.5px; }
  .auth-form { gap: 15px; }
}

/* The app bar hides this pill on narrow screens; the auth bar has room */
@media (max-width: 1024px) {
  .auth-shell .assistant-pill { display: flex; }
}

@media (max-width: 620px) {
  .auth-shell .assistant-pill { display: none; }
}