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

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-tabular { font-variant-numeric: tabular-nums; }

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

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px) translateX(-50%); }
  to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) translateX(-50%); }
  to { opacity: 0; transform: translateY(-20px) translateX(-50%); }
}

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

@keyframes checkmark {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

.animate-fade-in { animation: fadeIn 0.35s ease-out forwards; }
.animate-fade-in-delay-1 { animation: fadeIn 0.35s ease-out 0.05s forwards; opacity: 0; }
.animate-fade-in-delay-2 { animation: fadeIn 0.35s ease-out 0.1s forwards; opacity: 0; }
.animate-fade-in-delay-3 { animation: fadeIn 0.35s ease-out 0.15s forwards; opacity: 0; }
.animate-fade-in-delay-4 { animation: fadeIn 0.35s ease-out 0.2s forwards; opacity: 0; }
.animate-slide-in { animation: slideInLeft 0.3s ease-out forwards; }
.animate-slide-out { animation: slideOutLeft 0.3s ease-out forwards; }
.animate-scale-in { animation: fadeInScale 0.3s ease-out forwards; }
.animate-toast-in { animation: toastIn 0.3s ease-out forwards; }
.animate-toast-out { animation: toastOut 0.3s ease-out forwards; }

.card-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); }
.card-shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); }

.account-card-gradient-1 {
  background: linear-gradient(135deg, #003da5 0%, #012169 100%);
}
.account-card-gradient-2 {
  background: linear-gradient(135deg, #012169 0%, #001a4d 100%);
}
.account-card-gradient-3 {
  background: linear-gradient(135deg, #cc0000 0%, #8b0000 100%);
}

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

.dark body, .dark .bg-surface { background-color: #0f1117; }
.dark .bg-white { background-color: #1a1d27; }

input:focus { outline: none; }

.transition-all-fast { transition: all 0.2s ease; }

:root {
  --navy: #003da5;
  --navy-dark: #012169;
  --red: #cc0000;
}

.login-bg {
  background: linear-gradient(135deg, #012169 0%, #003da5 40%, #001a4d 100%);
  position: relative;
  overflow: hidden;
}

.login-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,61,165,0.3) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(204,0,0,0.08) 0%, transparent 50%);
  animation: shimmer 15s infinite linear;
}

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

.nav-item-active {
  background: rgba(255,255,255,0.1);
  border-left: 3px solid #cc0000;
}

.transaction-row:hover {
  background-color: rgba(0,61,165,0.03);
}

.dark .transaction-row:hover {
  background-color: rgba(255,255,255,0.05);
}