:root {
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.06);
  --neon: var(--primary-400);
  --neon-2: var(--primary-500);
}

.auth-page {
  display: grid;
  place-items: center;
  padding: 32px 16px 96px;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  padding: 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--neon), var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-subtitle { color: var(--text-muted); margin-bottom: 18px; font-size: 14px; }

.auth-form { display: grid; gap: 12px; }
.auth-form .field { display: grid; gap: 6px; }
.auth-form label { color: var(--text-muted); font-size: 12px; }

.auth-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }

.auth-btn { width: 100%; justify-content: center; height: 36px; }

#signup-result, #login-result { margin-top: 12px; color: var(--primary-400); }

.helper {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--surface);
  padding: 12px;
}
.helper-title { font-weight: 600; margin-bottom: 6px; color: var(--text); }
.helper p { margin: 4px 0; color: var(--text-muted); }
.helper code { color: var(--primary-400); }

.otp-note { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

#otp-actions, #login-otp-actions { display: flex; gap: 8px; margin-top: 8px; }
#resend-otp, #edit-info, #login-resend-otp, #login-edit { height: 32px; }

/* OTP timers and progress */
.otp-timer, .login-otp-timer { margin-top: 8px; display: grid; gap: 6px; }
.cooldown-text { font-size: 12px; color: #b9c6d3; }

.progress { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); background: #1f2430; }
.progress .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 12px rgba(91,192,255,0.35); transition: width 0.2s linear; }
.progress.indeterminate .progress-bar { width: 30%; animation: indeterminate 1.1s linear infinite; }
@keyframes indeterminate { 0%{ transform: translateX(-120%);} 100%{ transform: translateX(320%);} }

button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* small devices */
@media (max-width: 480px) {
  .auth-card { padding: 18px; }
}