:root {
  --navy: #001f3f;
  --navy-dark: #001733;
  --gold: #f0c419;
  --gold-soft: #f7d65a;
  --white: #ffffff;
  --muted: #e7ecf3;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #001733 0%, #02305f 60%, #01254a 100%);
  color: var(--white);
  min-height: 100vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 32px 16px;
}

.card-glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  color: var(--white);
}

.card-glass .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.card-glass .form-control:focus {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 0.2rem rgba(240, 196, 25, 0.25);
}

.btn-gold {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 100%);
  border: none;
  color: #0d1015;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(240, 196, 25, 0.25);
}

.logo-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold);
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

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

.table-action-btn {
  transition: transform 0.15s ease;
}

.table-action-btn:hover {
  transform: scale(1.05);
}