:root {
  --primary-teal: #005f5f;
  --primary-teal-dark: #004040;
  --primary-teal-mid: #008080;
  --accent-gold: #b8860b;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;
}
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #e6f4f4 0%, #fffbf0 100%);
  min-height: 100vh;
}
.auth-card {
  max-width: 420px;
  margin: 60px auto;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0,95,95,0.1);
  padding: 2.5rem;
}
.brand-logo { text-align: center; margin-bottom: 1.5rem; }
.brand-logo img { height: 50px; width: auto; }
.brand-name { font-size: 1.5rem; font-weight: 800; margin-top: 0.5rem; }
.brand-name .gold { color: var(--accent-gold); }
.brand-name .teal { color: var(--primary-teal); }
.auth-title {
  font-size: 1.5rem; font-weight: 700; color: var(--slate-900);
  text-align: center; margin-bottom: 0.5rem;
}
.auth-subtitle {
  text-align: center; color: var(--slate-500); font-size: 0.9rem;
  margin-bottom: 2rem;
}
.form-label { font-weight: 600; font-size: 0.875rem; color: var(--slate-700); }
.form-control {
  border-radius: 0.75rem; border: 2px solid var(--slate-200);
  padding: 0.7rem 1rem; font-size: 0.95rem;
}
.form-control:focus {
  border-color: var(--primary-teal);
  box-shadow: 0 0 0 0.2rem rgba(0,95,95,0.1);
}
.btn-primary-teal {
  background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-mid));
  color: #fff; border: none; padding: 0.8rem; font-weight: 600; border-radius: 0.75rem;
}
.btn-primary-teal:hover {
  background: linear-gradient(135deg, var(--primary-teal-dark), #006666); color: #fff;
}
.btn-primary-teal:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-link a { color: var(--primary-teal); text-decoration: none; font-weight: 600; }
.auth-link a:hover { color: var(--accent-gold); }
.alert-modern {
  border-radius: 0.75rem; padding: 0.85rem 1rem; font-size: 0.875rem;
  border: none; margin-bottom: 1rem;
}
.alert-success-modern { background: #dcfce7; color: #15803d; border-left: 4px solid #15803d; }
.alert-danger-modern { background: #fee2e2; color: #b91c1c; border-left: 4px solid #b91c1c; }
.password-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--slate-400); background: none; border: none;
}
.input-with-icon { position: relative; }
.forgot-link {
  text-align: right; font-size: 0.85rem; margin-top: 4px;
}
.forgot-link a { color: var(--slate-500); text-decoration: none; }
.forgot-link a:hover { color: var(--primary-teal); }