@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  --bgfi-blue:      #2a5298;
  --bgfi-blue-dark: #1a3a72;
  --bgfi-sage:      #8fa876;
  --bgfi-sage-dark: #6b8057;
  --bgfi-sage-pale: #f0f4e8;
  --bgfi-olive:     #7a8c5a;
  --transition:     0.22s cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior: smooth; }
body { font-family: 'Source Sans 3', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Libre Baskerville', Georgia, serif !important; }
.text-bgfi-blue     { color: var(--bgfi-blue) !important; }
.text-bgfi-sage     { color: var(--bgfi-sage) !important; }
.text-bgfi-olive    { color: var(--bgfi-olive) !important; }
.bg-bgfi-blue       { background-color: var(--bgfi-blue) !important; }
.bg-bgfi-blue-dark  { background-color: var(--bgfi-blue-dark) !important; }
.bg-bgfi-sage       { background-color: var(--bgfi-sage) !important; }
.bg-bgfi-olive      { background-color: var(--bgfi-olive) !important; }
.bg-bgfi-sage-pale  { background-color: var(--bgfi-sage-pale) !important; }
.border-bgfi-blue   { border-color: var(--bgfi-blue) !important; }
.border-bgfi-sage   { border-color: var(--bgfi-sage) !important; }
.hover\:bg-bgfi-blue:hover      { background-color: var(--bgfi-blue) !important; }
.hover\:bg-bgfi-blue-dark:hover { background-color: var(--bgfi-blue-dark) !important; }
.hover\:text-bgfi-blue:hover    { color: var(--bgfi-blue) !important; }

@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes shimmer  { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.6} }

.animate-fade-up  { animation:fadeUp .55s cubic-bezier(.4,0,.2,1) both; }
.animate-fade-in  { animation:fadeIn .4s ease both; }
.animate-pulse-d  { animation:pulseDot 2s ease-in-out infinite; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
.reveal.visible   { opacity:1; transform:translateY(0); }
.delay-100 { transition-delay:.1s !important; }
.delay-200 { transition-delay:.2s !important; }
.delay-300 { transition-delay:.3s !important; }

.spinner { display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
.spinner-blue { border-color:rgba(42,82,152,.2); border-top-color:var(--bgfi-blue); }

.card-accent { position:relative; overflow:hidden; }
.card-accent::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; border-radius:12px 12px 0 0; transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.card-accent:hover::before { transform:scaleX(1); }
.accent-blue::before { background:var(--bgfi-blue); }
.accent-sage::before { background:var(--bgfi-sage); }
.accent-gold::before { background:#c89a2a; }
.accent-red::before  { background:#c0392b; }

.otp-digit { width:52px; height:60px; border:2px solid #d1d5db; border-radius:8px; font-size:1.4rem; font-weight:700; text-align:center; color:var(--bgfi-blue); font-family:'Libre Baskerville',serif; outline:none; transition:border-color var(--transition),box-shadow var(--transition); }
.otp-digit:focus { border-color:var(--bgfi-blue); box-shadow:0 0 0 3px rgba(42,82,152,.15); }

.sidebar-link { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:.855rem; font-weight:500; color:rgba(255,255,255,.65); text-decoration:none; transition:all var(--transition); }
.sidebar-link:hover  { background:rgba(255,255,255,.08); color:white; }
.sidebar-link.active { background:rgba(255,255,255,.13); color:white; }
.sidebar-link.active .sl-icon { color:#b8c99a; }
.sl-icon { font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }

.nav-underline { position:relative; }
.nav-underline::after { content:''; position:absolute; bottom:-2px; left:12px; right:12px; height:2px; background:var(--bgfi-blue); transform:scaleX(0); transition:transform var(--transition); border-radius:2px; }
.nav-underline:hover::after { transform:scaleX(1); }
.nav-underline.active::after { transform:scaleX(1); }

.mobile-link { opacity:0; transform:translateY(16px); animation:fadeUp .4s forwards; }
.mobile-link:nth-child(1){animation-delay:.05s} .mobile-link:nth-child(2){animation-delay:.10s}
.mobile-link:nth-child(3){animation-delay:.15s} .mobile-link:nth-child(4){animation-delay:.20s}
.mobile-link:nth-child(5){animation-delay:.25s} .mobile-link:nth-child(6){animation-delay:.30s}

tbody tr { transition:background .15s; } tbody tr:hover { background-color:#eff4fb; }
::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:#f1f3f4} ::-webkit-scrollbar-thumb{background:#9aa0a6;border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--bgfi-blue)}