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

body { font-family:'DM Sans',system-ui,sans-serif; }

@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInScale { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes countUp { from{opacity:0} to{opacity:1} }
@keyframes ripple { to{transform:scale(4);opacity:0} }
@keyframes float1 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(30px,-20px) rotate(120deg)} 66%{transform:translate(-20px,15px) rotate(240deg)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(-25px,20px) rotate(-120deg)} 66%{transform:translate(15px,-25px) rotate(-240deg)} }
@keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,20px)} }
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }
@keyframes skeletonPulse { 0%{background-position:-200px 0} 100%{background-position:calc(200px + 100%) 0} }
@keyframes spinnerRotate { to{transform:rotate(360deg)} }

.animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
.animate-fadeInScale { animation: fadeInScale 0.3s ease-out forwards; }
.animate-slideDown { animation: slideDown 0.3s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.5s ease-out forwards; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-gradientShift { background-size:400% 400%; animation: gradientShift 12s ease infinite; }
.animate-pulse-custom { animation: pulse 2s ease-in-out infinite; }
.animate-toastIn { animation: toastIn 0.3s ease-out forwards; }
.animate-toastOut { animation: toastOut 0.3s ease-in forwards; }

.stagger-1 { animation-delay:0.05s; opacity:0; }
.stagger-2 { animation-delay:0.1s; opacity:0; }
.stagger-3 { animation-delay:0.15s; opacity:0; }
.stagger-4 { animation-delay:0.2s; opacity:0; }
.stagger-5 { animation-delay:0.25s; opacity:0; }
.stagger-6 { animation-delay:0.3s; opacity:0; }

.skeleton {
  background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size:200px 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius:6px;
}
.dark .skeleton {
  background: linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%);
  background-size:200px 100%;
}

.btn-ripple { position:relative; overflow:hidden; }
.btn-ripple .ripple-effect {
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.3);
  transform:scale(0); animation:ripple 0.6s linear; pointer-events:none;
}

.login-bg {
  background: linear-gradient(135deg,#0F172A 0%,#1E3A5F 30%,#1a365d 60%,#0F172A 100%);
  animation: gradientShift 12s ease infinite;
  background-size:400% 400%;
}

.floating-shape {
  position:absolute; border-radius:50%; opacity:0.06;
  pointer-events:none;
}
.floating-shape:nth-child(1) { width:300px;height:300px;top:10%;left:5%;background:#3B82F6;animation:float1 20s ease-in-out infinite; }
.floating-shape:nth-child(2) { width:200px;height:200px;top:60%;right:10%;background:#60A5FA;animation:float2 25s ease-in-out infinite; }
.floating-shape:nth-child(3) { width:150px;height:150px;bottom:15%;left:40%;background:#818CF8;animation:float3 18s ease-in-out infinite; }

.card-hover { transition:transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,0.12); }
.dark .card-hover:hover { box-shadow:0 8px 30px rgba(0,0,0,0.4); }

.otp-input {
  width:48px; height:56px; text-align:center; font-size:1.5rem; font-weight:700;
  border:2px solid #334155; border-radius:12px; background:rgba(255,255,255,0.05);
  color:#fff; outline:none; transition:border-color 0.2s;
  font-family:'JetBrains Mono',monospace;
}
.otp-input:focus { border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,0.2); }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#94a3b8; border-radius:3px; }
.dark ::-webkit-scrollbar-thumb { background:#475569; }

.chart-tooltip {
  background:rgba(15,23,42,0.95); color:#fff; padding:8px 12px; border-radius:8px;
  font-size:0.8rem; pointer-events:none; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.nav-tab { position:relative; padding:8px 16px; border-radius:8px; cursor:pointer; transition:all 0.2s; }
.nav-tab:hover { background:rgba(59,130,246,0.1); }
.nav-tab.active { background:rgba(59,130,246,0.15); color:#3B82F6; font-weight:600; }
.dark .nav-tab:hover { background:rgba(96,165,250,0.1); }
.dark .nav-tab.active { background:rgba(96,165,250,0.15); color:#60A5FA; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  font-family:'DM Sans',system-ui,sans-serif;
}

.spinner {
  width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;border-radius:50%;animation:spinnerRotate 0.6s linear infinite;
}

@media (max-width:768px) {
  .otp-input { width:40px; height:48px; font-size:1.2rem; }
}