* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', system-ui, sans-serif; overflow-x: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #0A246333; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #ffffff22; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes countUp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-5px); } 20%,40%,60%,80% { transform: translateX(5px); } }
@keyframes checkmark { 0% { stroke-dashoffset: 48; } 100% { stroke-dashoffset: 0; } }
@keyframes confettiPop { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes float1 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(30px,-20px) rotate(10deg); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-20px,30px) rotate(-8deg); } }
@keyframes float3 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(15px,15px) rotate(5deg); } }
@keyframes spinnerRotate { 100% { transform: rotate(360deg); } }
@keyframes donutGrow { from { stroke-dasharray: 0 100; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }
@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-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
.animate-fadeInUp { animation: fadeInUp 0.5s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.35s ease-out forwards; }
.animate-slideInRight { animation: slideInRight 0.3s ease-out forwards; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-countUp { animation: countUp 0.6s ease-out forwards; }
.animate-bounceIn { animation: bounceIn 0.5s ease-out forwards; }
.animate-pulse { animation: pulse 1.5s ease-in-out infinite; }

.shimmer-bg {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}

.dark .shimmer-bg {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}

.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(10,36,99,0.15); }
.dark .card-hover:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.4); }

.btn-press { transition: transform 0.1s ease; }
.btn-press:active { transform: scale(0.97); }

.glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.login-bg {
  background: linear-gradient(135deg, #0A2463 0%, #1B3A7D 30%, #0A2463 60%, #061A4A 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.login-float-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.07;
  background: white;
}
.login-float-shape:nth-child(1) { width: 300px; height: 300px; top: -80px; right: -60px; animation: float1 12s ease-in-out infinite; }
.login-float-shape:nth-child(2) { width: 200px; height: 200px; bottom: -40px; left: -30px; animation: float2 15s ease-in-out infinite; }
.login-float-shape:nth-child(3) { width: 150px; height: 150px; top: 40%; left: 10%; animation: float3 18s ease-in-out infinite; }
.login-float-shape:nth-child(4) { width: 100px; height: 100px; top: 20%; right: 20%; animation: float2 10s ease-in-out infinite; }

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

/* Transaction stagger */
.tx-item { opacity: 0; animation: fadeInUp 0.4s ease-out forwards; }

/* Donut chart */
.donut-segment { animation: donutGrow 1s ease-out forwards; }

/* Bar chart */
.bar-fill { transform-origin: left; animation: barGrow 0.8s ease-out forwards; }

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

/* Checkmark animation */
.checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; animation: checkmark 0.6s ease-in-out forwards; }
.checkmark-check { stroke-dasharray: 48; stroke-dashoffset: 48; animation: checkmark 0.3s 0.4s ease-in-out forwards; }

/* Mobile bottom nav */
.bottom-nav-item { transition: transform 0.15s ease; }
.bottom-nav-item:active { transform: scale(0.9); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
.dark .skeleton {
  background: linear-gradient(90deg, #21262D 25%, #2D333B 50%, #21262D 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Spinner */
.spinner { border: 3px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; width: 24px; height: 24px; animation: spinnerRotate 0.8s linear infinite; }

/* Toggle switch */
.toggle-track { width: 44px; height: 24px; border-radius: 12px; transition: background 0.3s ease; cursor: pointer; position: relative; }
.toggle-thumb { width: 20px; height: 20px; border-radius: 50%; background: white; position: absolute; top: 2px; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-on .toggle-thumb { transform: translateX(20px); }

/* Confetti */
.confetti-piece { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: confettiPop 1s ease-out forwards; }

/* Tab indicator */
.tab-indicator { transition: transform 0.3s ease, width 0.3s ease; }

/* Account card gradients */
.card-checking { background: linear-gradient(135deg, #0A2463, #00A878); }
.card-savings { background: linear-gradient(135deg, #0A2463, #6B21A8); }
.card-wallet { background: linear-gradient(135deg, #0A2463, #D4A843); }

/* Notification badge */
.notif-badge { min-width: 18px; height: 18px; font-size: 10px; }