/* Auth pages */

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(229,9,20,0.18), transparent 60%),
    radial-gradient(700px 500px at 80% 100%, rgba(255,184,0,0.08), transparent 60%),
    var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  padding: 100px 20px 60px;
}

.auth-wrap { width: 100%; max-width: 480px; }

.auth-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.auth-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), #b00710);
  border-radius: 14px;
  color: #fff; font-size: 26px;
  margin-bottom: 20px;
  box-shadow: 0 12px 30px rgba(229,9,20,0.35);
}

.auth-card h1 { font-size: 30px; margin: 0 0 6px; }
.auth-sub { color: var(--text-3); margin-bottom: 24px; font-size: 14px; }

.auth-form .form-control {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text);
  height: 56px;
  border-radius: 10px;
}
.auth-form .form-control:focus {
  background: var(--bg-1);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(229,9,20,0.2);
  color: var(--text);
}
.auth-form .form-floating > label { color: var(--text-3); }
.auth-form .form-floating > .form-control:focus ~ label,
.auth-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--text-2);
}

.auth-form .btn { padding: 14px; font-size: 15px; }
.form-disclaimer { color: var(--text-3); font-size: 12px; text-align: center; margin: 14px 0 0; }

.auth-foot { text-align: center; margin: 24px 0 0; color: var(--text-3); font-size: 14px; }
.auth-foot a { color: var(--primary-2); font-weight: 600; }