:root {
  --navy: #192C57;
  --navy-light: #24397a;
  --gold: #CBAE2D;
  --gold-light: #e6c94a;
}

* { scrollbar-width: thin; scrollbar-color: var(--gold) #eef0f5; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 8px; }
::-webkit-scrollbar-track { background: #eef0f5; }

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

.brand-navy { background-color: var(--navy); }
.brand-gold { background-color: var(--gold); }
.text-navy { color: var(--navy); }
.text-gold { color: var(--gold); }
.border-gold { border-color: var(--gold); }

/* fade + slide in for cards / rows */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeSlideIn .45s ease both; }
.animate-in-1 { animation-delay: .05s; }
.animate-in-2 { animation-delay: .1s; }
.animate-in-3 { animation-delay: .15s; }
.animate-in-4 { animation-delay: .2s; }

@keyframes popIn {
  0% { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}
.animate-pop { animation: popIn .25s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eef0f5 25%, #e2e5ec 37%, #eef0f5 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -5px rgba(25,44,87,.15); }

.sidebar-link { transition: all .18s ease; position: relative; }
.sidebar-link.active { background: rgba(203,174,45,.15); color: var(--gold); font-weight: 600; }
.sidebar-link.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  background: var(--gold); border-radius: 0 4px 4px 0;
}
.sidebar-link:hover:not(.active) { background: rgba(255,255,255,.08); }

.btn-primary {
  background: var(--navy); color: white; transition: all .2s ease;
}
.btn-primary:hover { background: var(--navy-light); transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(25,44,87,.4); }
.btn-primary:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold); color: var(--navy); transition: all .2s ease;
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(203,174,45,.5); }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-backdrop { backdrop-filter: blur(3px); background: rgba(15,20,35,.55); }

.progress-bar-fill { transition: width 1s cubic-bezier(.22,1,.36,1); }

.count-up { transition: all .3s ease; }

.toast-enter { animation: toastIn .3s ease both; }
@keyframes toastIn { from { opacity:0; transform: translateX(30px);} to {opacity:1; transform:translateX(0);} }

.table-row-hover:hover { background: #f7f8fc; }

.badge { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .3px; }