:root {
  --navy: #012169;
  --red: #E31837;
  --blue: #0072CE;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --text: #1A1A2E;
  --text-sec: #6B7280;
  --green: #10B981;
  --amber: #F59E0B;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'JetBrains Mono', monospace; }

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

@keyframes countUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes checkmark {
  0% { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

.animate-fade { animation: fadeIn 0.4s ease-out forwards; }
.animate-slide-down { animation: slideDown 0.35s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.4s ease-out forwards; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-pulse { animation: pulse 0.6s ease-in-out; }

.skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.toast-enter { animation: toastIn 0.4s ease-out forwards; }
.toast-exit { animation: toastOut 0.3s ease-in forwards; }

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.btn-hover {
  transition: all 0.15s ease;
}
.btn-hover:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}
.btn-hover:active {
  transform: scale(0.98);
}

input:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.25);
  border-color: var(--blue);
}

.login-bg {
  background: linear-gradient(135deg, #012169 0%, #001844 40%, #012169 60%, #0a2d6e 100%);
  position: relative;
  overflow: hidden;
}
.login-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 70%, rgba(0,114,206,0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(227,24,55,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.nav-gradient {
  background: linear-gradient(180deg, #012169 0%, #011a52 100%);
}

.welcome-gradient {
  background: linear-gradient(135deg, #0072CE 0%, #0058a0 100%);
}

.donut-segment {
  transition: opacity 0.2s;
}
.donut-segment:hover {
  opacity: 0.85;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  }
}