/*
 * ============================================================
 *  THEME ANIMATIONS — UI-UX Pro Max Skill
 *  Official & Corporate Palette  ·  Agent / User Pages
 *  Layer 2: Full cinematic animation system
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ══════════════════════════════════════════════════════════
   1. ROOT TOKENS + ANIMATION VARIABLES
══════════════════════════════════════════════════════════ */
:root {
  --brand-bg:            #0F172A;
  --brand-surface:       #1E293B;
  --brand-surface-2:     #334155;
  --brand-border:        rgba(51,65,85,0.8);
  --brand-accent:        #2563EB;
  --brand-accent-hover:  #1D4ED8;
  --brand-accent-dark:   #1E40AF;
  --brand-accent-light:  rgba(37,99,235,0.12);
  --brand-accent-glow:   rgba(37,99,235,0.35);
  --brand-accent-grad:   linear-gradient(135deg,#2563EB 0%,#3B82F6 100%);
  --brand-success:       #16A34A;
  --brand-success-light: rgba(22,163,74,0.12);
  --brand-text:          #F8FAFC;
  --brand-text-muted:    #94A3B8;
  --brand-text-blue:     #60A5FA;
  --brand-gradient:      linear-gradient(135deg,#0F172A 0%,#1A2744 50%,#0F172A 100%);
  --brand-header:        linear-gradient(135deg,#1E3A5F 0%,#2563EB 100%);
  --brand-sidebar:       linear-gradient(180deg,#0F172A 0%,#1E293B 100%);
  --brand-shadow:        0 4px 24px rgba(0,0,0,0.4),0 1px 4px rgba(0,0,0,0.2);
  --brand-shadow-blue:   0 4px 20px rgba(37,99,235,0.3);

  /* Animation easing library */
  --ease-out-expo:   cubic-bezier(0.16,1,0.3,1);
  --ease-out-back:   cubic-bezier(0.34,1.56,0.64,1);
  --ease-in-out:     cubic-bezier(0.4,0,0.2,1);
  --ease-spring:     cubic-bezier(0.175,0.885,0.32,1.275);
}

/* ══════════════════════════════════════════════════════════
   2. KEYFRAME LIBRARY
══════════════════════════════════════════════════════════ */

/* Page entrance */
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes fadeSlideDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0);     }
}
@keyframes fadeSlideLeft {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0);     }
}
@keyframes fadeSlideRight {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0);    }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1);    }
}
@keyframes scaleInBounce {
  from { opacity:0; transform:scale(0.8);      }
  60%  { opacity:1; transform:scale(1.04);     }
  to   { opacity:1; transform:scale(1);        }
}

/* Ambient orb movement */
@keyframes orbFloat1 {
  0%,100% { transform:translate(0,0)    scale(1);    }
  33%     { transform:translate(60px,-40px) scale(1.1); }
  66%     { transform:translate(-30px,50px) scale(0.95);}
}
@keyframes orbFloat2 {
  0%,100% { transform:translate(0,0)    scale(1);    }
  33%     { transform:translate(-50px,60px) scale(1.08); }
  66%     { transform:translate(70px,-30px) scale(0.97);}
}
@keyframes orbFloat3 {
  0%,100% { transform:translate(0,0); }
  50%     { transform:translate(40px,40px); }
}

/* Gradient animation */
@keyframes gradientShift {
  0%   { background-position:0% 50%;   }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%;   }
}

/* Shimmer sweep */
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}

/* Pulse glow */
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0   rgba(37,99,235,0); }
  50%     { box-shadow:0 0 24px 6px rgba(37,99,235,0.35); }
}
@keyframes pulseGlowGreen {
  0%,100% { box-shadow:0 0 0 0   rgba(22,163,74,0); }
  50%     { box-shadow:0 0 20px 4px rgba(22,163,74,0.3); }
}

/* Border trace */
@keyframes borderTrace {
  0%   { border-color: rgba(37,99,235,0.1); }
  50%  { border-color: rgba(37,99,235,0.6); }
  100% { border-color: rgba(37,99,235,0.1); }
}

/* Spin */
@keyframes spin {
  to { transform:rotate(360deg); }
}

/* Dot pulse */
@keyframes dotPulse {
  0%,80%,100% { transform:scale(0.6); opacity:0.4; }
  40%         { transform:scale(1);   opacity:1;   }
}

/* Number count up shimmer */
@keyframes countUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

/* Wave ripple */
@keyframes ripple {
  0%   { transform:scale(0); opacity:0.6; }
  100% { transform:scale(3); opacity:0;   }
}

/* Slide in from side (sidebar) */
@keyframes sidebarSlide {
  from { transform:translateX(-100%); opacity:0; }
  to   { transform:translateX(0);     opacity:1; }
}

/* Stagger children */
@keyframes staggerFade {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* Morphing blob */
@keyframes morphBlob {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; }
  25%     { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; }
  50%     { border-radius:40% 60% 60% 40%/60% 40% 60% 40%; }
  75%     { border-radius:60% 40% 30% 60%/30% 60% 70% 40%; }
}

/* Floating bob */
@keyframes floatBob {
  0%,100% { transform:translateY(0);    }
  50%     { transform:translateY(-8px); }
}

/* Text flicker (subtle) */
@keyframes textGlow {
  0%,100% { text-shadow:0 0  0px rgba(96,165,250,0); }
  50%     { text-shadow:0 0 12px rgba(96,165,250,0.4); }
}

/* Horizontal scan line */
@keyframes scanLine {
  0%   { transform:translateY(-100%); }
  100% { transform:translateY(100vh); }
}

/* ══════════════════════════════════════════════════════════
   3. GLOBAL BASE
══════════════════════════════════════════════════════════ */
*, ::before, ::after { box-sizing:border-box; }

html, body {
  font-family:'Inter',ui-sans-serif,sans-serif !important;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  background:var(--brand-bg) !important;
  color:var(--brand-text) !important;
}

/* ══════════════════════════════════════════════════════════
   4. AUTH BACKGROUND — ANIMATED COSMIC CANVAS
══════════════════════════════════════════════════════════ */

/* Auth body: normal scrollable layout — auto-margin flex centering */
body.text-slate-800,
body[class*="auth"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0A1628 !important;
  position: relative;
  overflow-x: hidden;
  padding: 3rem 1rem !important; /* Safe padding around viewport edges */
}

.auth-gradient {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Animated gradient mesh — absolute within auth container */
.auth-gradient::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(37,99,235,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(30,64,175,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(59,130,246,0.08) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
  pointer-events: none;
  z-index: -1;
}

/* Floating ambient orbs — fixed but behind content */
.auth-gradient::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle 300px at 15% 50%, rgba(37,99,235,0.12), transparent),
    radial-gradient(circle 200px at 85% 20%, rgba(59,130,246,0.09), transparent),
    radial-gradient(circle 150px at 70% 80%, rgba(22,163,74,0.06),  transparent);
  animation: orbFloat1 18s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Content sits above backgrounds */
.auth-gradient > * { position: relative; z-index: 1; }

/* Card wrapper entrance */
body.text-slate-800 .w-full.max-w-md,
body[class*="auth"] .w-full.max-w-md {
  animation: scaleIn 0.55s var(--ease-out-expo) both;
  width: 100%;
  max-width: 28rem;
  padding: 0 !important;
  margin: auto !important; /* Vertically and horizontally centers when fits, flows naturally when overflows */
  z-index: 1;
  position: relative;
}

/* ── Auth Card: glassmorphism + entrance ── */
.bg-white.rounded-\[2\.5rem\],
.bg-white.rounded-\[2\.5rem\].p-8 {
  background: rgba(15,23,42,0.78) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(37,99,235,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 40px rgba(0,0,0,0.55),
    0 1px 0   rgba(255,255,255,0.06) inset !important;
  animation: fadeSlideUp 0.6s var(--ease-out-expo) 0.1s both;
  position: relative;
  /* IMPORTANT: do NOT set overflow:hidden — that clips the toast */
  isolation: isolate;
}

/* Shimmer sweep on card — clipped cleanly with clip-path instead of overflow:hidden */
.bg-white.rounded-\[2\.5rem\]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmer 4s ease infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  clip-path: inset(0 round 2.5rem);
}

/* Card heading entrance */
.bg-white.rounded-\[2\.5rem\] h2 {
  color:#F8FAFC !important;
  animation:fadeSlideDown 0.5s var(--ease-out-expo) 0.25s both;
}
.bg-white.rounded-\[2\.5rem\] p {
  color:var(--brand-text-muted) !important;
  animation:fadeSlideDown 0.5s var(--ease-out-expo) 0.35s both;
}

/* Logo area */
.bg-green-50 {
  background:rgba(37,99,235,0.12) !important;
  border-color:rgba(37,99,235,0.25) !important;
  animation:floatBob 4s ease-in-out infinite;
}

/* Brand name */
.bg-gradient-to-r.from-green-700.to-green-500,
.from-green-700 {
  background:linear-gradient(135deg,#60A5FA,#2563EB,#60A5FA) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:shimmer 3s linear infinite, textGlow 3s ease-in-out infinite;
}

/* ── Input Fields: animated focus ── */
.bg-slate-50.border-slate-100,
input[class*="bg-slate-50"],
input.input-field {
  background:rgba(15,23,42,0.7) !important;
  border-color:rgba(51,65,85,0.8) !important;
  color:#F8FAFC !important;
  border-radius:12px !important;
  transition:all 0.3s var(--ease-out-expo) !important;
}
input[class*="bg-slate-50"]::placeholder, input.input-field::placeholder { color:rgba(71,85,105,0.8) !important; }
input[class*="focus:ring-green-500"]:focus,
input.input-field:focus {
  border-color:#2563EB !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.2), 0 0 20px rgba(37,99,235,0.1) !important;
  background:rgba(15,23,42,0.9) !important;
  outline:none !important;
  transform:translateY(-1px) !important;
}

/* Stagger form fields */
.bg-white.rounded-\[2\.5rem\] form .mb-5:nth-child(1) { animation:staggerFade 0.4s var(--ease-out-expo) 0.4s both; }
.bg-white.rounded-\[2\.5rem\] form .mb-6:nth-child(2) { animation:staggerFade 0.4s var(--ease-out-expo) 0.5s both; }
.bg-white.rounded-\[2\.5rem\] form .mb-3:nth-child(1) { animation:staggerFade 0.4s var(--ease-out-expo) 0.4s both; }
.bg-white.rounded-\[2\.5rem\] form .mb-3:nth-child(2) { animation:staggerFade 0.4s var(--ease-out-expo) 0.47s both; }
.bg-white.rounded-\[2\.5rem\] form .mb-3:nth-child(3) { animation:staggerFade 0.4s var(--ease-out-expo) 0.54s both; }
.bg-white.rounded-\[2\.5rem\] form .mb-3:nth-child(4) { animation:staggerFade 0.4s var(--ease-out-expo) 0.61s both; }
.bg-white.rounded-\[2\.5rem\] form .mb-6:last-of-type  { animation:staggerFade 0.4s var(--ease-out-expo) 0.66s both; }

/* ── CTA Button: animated gradient + ripple ── */
.gradient-bg {
  background:linear-gradient(135deg,#1D4ED8,#2563EB,#3B82F6,#2563EB) !important;
  background-size:300% 300% !important;
  box-shadow:var(--brand-shadow-blue) !important;
  transition:all 0.3s var(--ease-out-expo) !important;
  animation:gradientShift 4s ease infinite;
  position:relative;
  overflow:hidden;
}
.gradient-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.12) 50%,transparent 60%);
  background-size:200% 100%;
  animation:shimmer 2.5s ease infinite;
  pointer-events:none;
}
.gradient-bg:hover {
  transform:translateY(-3px) scale(1.01) !important;
  box-shadow:0 10px 35px rgba(37,99,235,0.5) !important;
  background-size:200% 200% !important;
}
.gradient-bg:active { transform:translateY(-1px) scale(0.99) !important; }

/* Text overrides */
.text-slate-400,.text-slate-500 { color:var(--brand-text-muted) !important; }
.text-slate-600 { color:#94A3B8 !important; }
.text-slate-700 { color:#CBD5E1 !important; }
.text-slate-800 { color:var(--brand-text) !important; }
.text-slate-900 { color:#F8FAFC !important; }
.text-green-600 { color:#60A5FA !important; transition:color 0.2s ease !important; }
.text-green-600:hover { color:#93C5FD !important; }
.hover\:text-green-600:hover { color:#60A5FA !important; }
.border-slate-50  { border-color:rgba(51,65,85,0.4) !important; }
.border-slate-100 { border-color:rgba(51,65,85,0.5) !important; }
.border-slate-200 { border-color:rgba(51,65,85,0.6) !important; }
.toast.success { background:var(--brand-success) !important; }
.toast.error   { background:#DC2626 !important; }

/* ══════════════════════════════════════════════════════════
   5. SIDEBAR — ANIMATED DARK PANEL
══════════════════════════════════════════════════════════ */
aside.sidebar, #sidebar {
  background:var(--brand-sidebar) !important;
  border-right:1px solid rgba(37,99,235,0.15) !important;
  box-shadow:4px 0 30px rgba(0,0,0,0.5) !important;
  transition:transform 0.35s var(--ease-out-expo) !important;
}

/* Sidebar open animation */
aside.sidebar.open, #sidebar.open {
  animation:sidebarSlide 0.35s var(--ease-out-expo) both;
}

/* Sidebar logo badge */
aside .bg-green-50 {
  background:rgba(37,99,235,0.15) !important;
  border-color:rgba(37,99,235,0.3) !important;
  animation:floatBob 3s ease-in-out infinite;
}

/* Animated status dot */
.bg-green-500.rounded-full.animate-pulse,
.bg-green-500.rounded-full.border-2 {
  background:#2563EB !important;
  animation:pulseGlow 2s ease-in-out infinite !important;
}

/* Sidebar user card */
aside .bg-gradient-to-br.from-green-600.to-green-700 {
  background:linear-gradient(135deg,#1E3A5F,#2563EB) !important;
  background-size:200% 200% !important;
  box-shadow:0 4px 20px rgba(37,99,235,0.3) !important;
  animation:gradientShift 6s ease infinite;
}

/* Nav links with hover shine */
aside nav a, .sidebar nav a {
  color:#94A3B8 !important;
  transition:all 0.25s var(--ease-in-out) !important;
  position:relative;
  overflow:hidden;
}
aside nav a::after {
  content:'';
  position:absolute;
  left:-100%; top:0;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,0.08),transparent);
  transition:left 0.4s ease;
}
aside nav a:hover::after { left:100%; }
aside nav a:hover {
  color:#60A5FA !important;
  background:rgba(37,99,235,0.08) !important;
  transform:translateX(3px) !important;
}

/* Active nav item */
aside nav a.bg-gradient-to-r, aside nav a[class*="from-green-50"] {
  background:rgba(37,99,235,0.15) !important;
  border-color:rgba(37,99,235,0.3) !important;
  color:#60A5FA !important;
  animation:borderTrace 3s ease-in-out infinite;
}

/* Stagger sidebar nav items */
aside nav .space-y-1 > a:nth-child(1)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.1s  both; }
aside nav .space-y-1 > a:nth-child(2)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.15s both; }
aside nav .space-y-1 > a:nth-child(3)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.2s  both; }
aside nav .space-y-1 > a:nth-child(4)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.25s both; }
aside nav .space-y-1 > a:nth-child(5)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.3s  both; }
aside nav .space-y-1 > a:nth-child(6)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.35s both; }
aside nav .space-y-1 > a:nth-child(7)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.4s  both; }
aside nav .space-y-1 > a:nth-child(8)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.45s both; }

/* Icon hover bounce */
aside nav a:hover .w-9 { transform:scale(1.1) rotate(-3deg) !important; transition:transform 0.2s var(--ease-out-back) !important; }
aside nav .bg-slate-100  { background:rgba(51,65,85,0.5) !important; transition:all 0.2s ease !important; }
aside nav .text-slate-500{ color:#64748B !important; }
aside nav a:hover .bg-slate-100 { background:rgba(37,99,235,0.2) !important; }
aside nav a:hover .text-slate-500 { color:#60A5FA !important; }
aside .text-slate-400.uppercase.tracking-widest { color:#475569 !important; }
aside .bg-green-100 { background:rgba(37,99,235,0.2) !important; }
aside .text-green-600 { color:#60A5FA !important; }
aside .text-green-700 { color:#60A5FA !important; }
aside .text-green-100 { color:rgba(219,234,254,0.8) !important; }
aside .bg-slate-50\/50 { background:rgba(15,23,42,0.5) !important; border-color:rgba(37,99,235,0.1) !important; }
aside .hover\:text-indigo-700:hover { color:#60A5FA !important; }
aside .bg-indigo-50 { background:rgba(37,99,235,0.12) !important; }
aside .text-indigo-600 { color:#60A5FA !important; }
.border-r.border-slate-200\/60,
.border-b.border-slate-200\/50,
.border-t.border-slate-200\/50 { border-color:rgba(37,99,235,0.12) !important; }

/* ══════════════════════════════════════════════════════════
   6. HEADER — ANIMATED GRADIENT BAR
══════════════════════════════════════════════════════════ */
header.header-bg, .header-bg {
  background:linear-gradient(135deg,#0F1F3D,#1E3A5F,#2563EB,#1D4ED8) !important;
  background-size:300% 300% !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.4) !important;
  animation:gradientShift 8s ease infinite;
  position:relative;
  overflow:hidden;
}
header.header-bg::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,0.5),transparent);
  animation:shimmer 3s ease infinite;
}
header .bg-green-100 { background:rgba(37,99,235,0.25) !important; }
header .text-green-800{ color:#93C5FD !important; }
header .text-green-100{ color:rgba(219,234,254,0.7) !important; }
header .bg-white\/10  { background:rgba(255,255,255,0.1) !important; transition:background 0.2s ease !important; }
header .bg-white\/10:hover { background:rgba(255,255,255,0.18) !important; }

/* ══════════════════════════════════════════════════════════
   7. MAIN BACKGROUND — LIVING GRADIENT
══════════════════════════════════════════════════════════ */
body {
  background: var(--brand-bg) !important;
  position: relative;
  min-height: 100vh;
}
/* Ambient orb ONLY for non-auth dashboard/inner pages */
body:not(.text-slate-800):not([class*="auth"])::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 10% 20%, rgba(37,99,235,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(30,64,175,0.04) 0%, transparent 60%);
  animation: orbFloat1 20s ease-in-out infinite;
}
main  { position: relative; z-index: 1; background: transparent !important; }
.min-h-screen { background: var(--brand-bg) !important; }

/* ══════════════════════════════════════════════════════════
   8. NOTIFICATIONS MARQUEE
══════════════════════════════════════════════════════════ */
.bg-green-50.border-green-100 {
  background:rgba(37,99,235,0.08) !important;
  border-color:rgba(37,99,235,0.2) !important;
  animation:borderTrace 4s ease-in-out infinite;
}
.bg-green-100.h-full { background:rgba(37,99,235,0.2) !important; }
.text-green-700 { color:#60A5FA !important; }
.text-green-800 { color:#93C5FD !important; }

/* ══════════════════════════════════════════════════════════
   9. WALLET CARD — ANIMATED PREMIUM CARD
══════════════════════════════════════════════════════════ */
.gradient-bg.rounded-\[2rem\] {
  background:linear-gradient(135deg,#0F2040,#1E3A5F,#2563EB,#1D4ED8,#1E3A5F) !important;
  background-size:300% 300% !important;
  box-shadow:0 8px 40px rgba(37,99,235,0.35), 0 2px 8px rgba(0,0,0,0.4) !important;
  animation:gradientShift 6s ease infinite, scaleIn 0.5s var(--ease-out-expo) 0.2s both;
  position:relative;
  overflow:hidden;
}
.gradient-bg.rounded-\[2rem\]::before {
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:conic-gradient(from 180deg at 50% 50%,
    transparent 0deg, rgba(255,255,255,0.04) 60deg,
    transparent 120deg, rgba(255,255,255,0.04) 180deg,
    transparent 240deg, rgba(255,255,255,0.04) 300deg, transparent 360deg);
  animation:spin 12s linear infinite;
  pointer-events:none;
}
.gradient-bg.rounded-\[2rem\]::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.06) 50%,transparent 70%);
  background-size:200% 100%;
  animation:shimmer 3s ease infinite;
  pointer-events:none;
}
.text-green-100 { color:rgba(219,234,254,0.75) !important; }

/* Balance amount entrance */
.gradient-bg.rounded-\[2rem\] h3 {
  animation:countUp 0.6s var(--ease-out-expo) 0.4s both;
}

/* ══════════════════════════════════════════════════════════
   10. SERVICE CARDS — 3D HOVER + STAGGER
══════════════════════════════════════════════════════════ */
.service-card.bg-white {
  background:var(--brand-surface) !important;
  border-color:rgba(51,65,85,0.5) !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.2) !important;
  transition:all 0.35s var(--ease-out-expo) !important;
  cursor:pointer;
}
.service-card:hover {
  transform:translateY(-8px) scale(1.02) !important;
  border-color:rgba(37,99,235,0.5) !important;
  box-shadow:0 20px 40px rgba(37,99,235,0.2), 0 4px 8px rgba(0,0,0,0.3) !important;
  background:rgba(30,41,59,0.95) !important;
}
.service-card:active { transform:translateY(-4px) scale(0.99) !important; }
.service-card .text-slate-700 { color:#CBD5E1 !important; transition:color 0.2s ease !important; }
.service-card:hover .text-slate-700 { color:#F8FAFC !important; }

/* Icon container */
.bg-green-50.text-green-700,
.bg-green-50  { background:rgba(37,99,235,0.12) !important; transition:all 0.3s var(--ease-out-back) !important; }
.text-green-700 { color:#60A5FA !important; }
.bg-emerald-50 { background:rgba(37,99,235,0.1) !important; }
.text-emerald-700 { color:#60A5FA !important; }
.bg-teal-50 { background:rgba(37,99,235,0.08) !important; }
.text-teal-700 { color:#60A5FA !important; }

.service-card:hover .bg-green-50,
.service-card:hover .bg-emerald-50,
.service-card:hover .bg-teal-50 {
  background:#2563EB !important;
  transform:scale(1.12) rotate(5deg) !important;
}
.service-card:hover .text-green-700,
.service-card:hover .text-emerald-700,
.service-card:hover .text-teal-700 { color:#fff !important; }

/* Stagger grid cards */
.grid > a.service-card:nth-child(1)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.05s both; }
.grid > a.service-card:nth-child(2)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.10s both; }
.grid > a.service-card:nth-child(3)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.15s both; }
.grid > a.service-card:nth-child(4)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.20s both; }
.grid > a.service-card:nth-child(5)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.25s both; }
.grid > a.service-card:nth-child(6)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.30s both; }
.grid > a.service-card:nth-child(7)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.35s both; }
.grid > a.service-card:nth-child(8)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.40s both; }
.grid > a.service-card:nth-child(9)  { animation:staggerFade 0.4s var(--ease-out-expo) 0.45s both; }
.grid > a.service-card:nth-child(10) { animation:staggerFade 0.4s var(--ease-out-expo) 0.50s both; }
.grid > a.service-card:nth-child(11) { animation:staggerFade 0.4s var(--ease-out-expo) 0.55s both; }
.grid > a.service-card:nth-child(12) { animation:staggerFade 0.4s var(--ease-out-expo) 0.60s both; }

h4.font-bold.text-slate-800 { color:#F8FAFC !important; animation:fadeSlideRight 0.4s var(--ease-out-expo) both; }
.fas.text-green-600 { color:#60A5FA !important; }

/* ══════════════════════════════════════════════════════════
   11. BOTTOM NAV — ANIMATED GLASS BAR
══════════════════════════════════════════════════════════ */
nav.lg\:hidden.fixed.bottom-0 {
  background:rgba(15,23,42,0.85) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  border-top:1px solid rgba(37,99,235,0.2) !important;
  box-shadow:0 -4px 30px rgba(0,0,0,0.4) !important;
  animation:fadeSlideUp 0.4s var(--ease-out-expo) both;
}
nav.lg\:hidden a {
  color:#64748B !important;
  transition:all 0.2s var(--ease-out-back) !important;
}
nav.lg\:hidden a:hover { color:#60A5FA !important; transform:translateY(-2px) !important; }

/* Home button */
nav.lg\:hidden .bg-green-600 {
  background:linear-gradient(135deg,#2563EB,#3B82F6) !important;
  box-shadow:0 4px 20px rgba(37,99,235,0.5) !important;
  animation:pulseGlow 2.5s ease-in-out infinite;
  transition:all 0.3s var(--ease-out-back) !important;
}
nav.lg\:hidden .bg-green-600:hover { transform:scale(1.08) !important; }
nav.lg\:hidden .text-green-900 { color:#93C5FD !important; }

/* ══════════════════════════════════════════════════════════
   12. MESSAGE BOX MODAL — ANIMATED POPUP
══════════════════════════════════════════════════════════ */
#messageBox .bg-white {
  background:rgba(15,23,42,0.92) !important;
  backdrop-filter:blur(24px) !important;
  border:1px solid rgba(37,99,235,0.2) !important;
  box-shadow:0 8px 50px rgba(0,0,0,0.6) !important;
  animation:scaleInBounce 0.4s var(--ease-out-back) both !important;
}
#messageBox p { color:#E2E8F0 !important; }
#messageBox .bg-green-600 {
  background:linear-gradient(135deg,#2563EB,#3B82F6) !important;
  box-shadow:var(--brand-shadow-blue) !important;
  transition:all 0.25s var(--ease-out-expo) !important;
}
#messageBox .bg-green-600:hover { transform:translateY(-2px) !important; box-shadow:0 8px 25px rgba(37,99,235,0.45) !important; }
#messageBox .bg-green-100 { background:rgba(37,99,235,0.15) !important; }
#messageBox .text-green-600 { color:#60A5FA !important; }

/* ══════════════════════════════════════════════════════════
   13. ACCOUNT MODAL
══════════════════════════════════════════════════════════ */
#accountModal > div {
  background:rgba(15,23,42,0.9) !important;
  backdrop-filter:blur(24px) !important;
  border:1px solid rgba(37,99,235,0.2) !important;
  box-shadow:0 8px 50px rgba(0,0,0,0.6) !important;
  animation:scaleIn 0.35s var(--ease-out-expo) both;
}
#accountModal h4 { color:#F8FAFC !important; }
.tab-btn {
  background:rgba(51,65,85,0.5) !important;
  border-color:rgba(37,99,235,0.2) !important;
  color:#94A3B8 !important;
  transition:all 0.25s var(--ease-out-expo) !important;
}
.tab-btn:hover { transform:translateY(-1px) !important; }
.tab-btn.active {
  background:linear-gradient(135deg,#2563EB,#3B82F6) !important;
  border-color:#2563EB !important;
  color:#fff !important;
  box-shadow:0 4px 15px rgba(37,99,235,0.35) !important;
}
.gradient-9psb {
  background:linear-gradient(135deg,#1E3A5F,#2563EB) !important;
  background-size:200% 200% !important;
  box-shadow:var(--brand-shadow-blue) !important;
  animation:gradientShift 5s ease infinite;
}
#accountModal .bg-slate-800 {
  background:rgba(15,23,42,0.8) !important;
  border:1px solid rgba(37,99,235,0.2) !important;
  transition:all 0.2s ease !important;
}

/* ══════════════════════════════════════════════════════════
   14. GLOBAL ELEMENTS
══════════════════════════════════════════════════════════ */
.dark-overlay.open { background:rgba(0,0,0,0.6) !important; backdrop-filter:blur(4px); }
.menubar-area.footer-fixed {
  background:var(--brand-surface) !important;
  border-top:1px solid rgba(37,99,235,0.1) !important;
  color:#475569 !important;
}
.bg-white { background:var(--brand-surface) !important; }
table { color:var(--brand-text) !important; }
thead tr { background:rgba(37,99,235,0.12) !important; }
tbody tr { transition:background 0.15s ease !important; }
tbody tr:hover { background:rgba(37,99,235,0.06) !important; }
th { color:#60A5FA !important; border-color:rgba(37,99,235,0.2) !important; }
td { border-color:rgba(51,65,85,0.3) !important; }
.bg-green-100.text-green-800 { background:rgba(22,163,74,0.15) !important; color:#4ADE80 !important; }
.bg-red-100.text-red-800   { background:rgba(220,38,38,0.15) !important; color:#FCA5A5 !important; }
.bg-amber-50 { background:rgba(245,158,11,0.1) !important; }
.border-amber-200 { border-color:rgba(245,158,11,0.3) !important; }
.text-amber-800 { color:#FCD34D !important; }
.bg-gray-50  { background:var(--brand-bg) !important; }
.bg-gray-100 { background:var(--brand-surface) !important; }
.text-gray-800 { color:var(--brand-text) !important; }
.text-gray-600 { color:var(--brand-text-muted) !important; }
.bg-green-500 { background:var(--brand-success) !important; }
.border-green-100 { border-color:rgba(37,99,235,0.2) !important; }
.shadow-green-200\/20 { box-shadow:0 8px 30px rgba(37,99,235,0.1) !important; }
.focus\:ring-green-500\/20:focus { box-shadow:0 0 0 3px rgba(37,99,235,0.2) !important; }
.focus\:border-green-500:focus { border-color:#2563EB !important; }
.border-green-500 { border-color:#2563EB !important; }
.bg-green-50.border-green-500 { background:rgba(37,99,235,0.1) !important; }
.text-green-600.font-bold { color:#60A5FA !important; }
button[class*="bg-green"], .bg-green-600, .bg-green-700, .hover\:bg-green-700 {
  background:linear-gradient(135deg,#2563EB,#3B82F6) !important;
  box-shadow:var(--brand-shadow-blue) !important;
  transition:all 0.25s var(--ease-out-expo) !important;
}
button[class*="bg-green"]:hover { opacity:0.9 !important; transform:translateY(-2px) !important; }
/* Auth body background — login / register */
body.min-h-screen.flex.items-center.justify-center {
  background: linear-gradient(135deg,#0A1628 0%,#0F172A 50%,#1A2744 100%) !important;
  min-height: 100vh;
}
/* Dashboard / inner pages — plain dark, no flex centering */
body > .min-h-screen.pb-24 {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   15. SCROLLBAR
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--brand-bg); }
::-webkit-scrollbar-thumb { background:rgba(37,99,235,0.4); border-radius:10px; transition:background 0.2s ease; }
::-webkit-scrollbar-thumb:hover { background:#2563EB; }

/* ══════════════════════════════════════════════════════════
   16. SELECTION
══════════════════════════════════════════════════════════ */
::selection { background:rgba(37,99,235,0.35); color:#F8FAFC; }

/* ══════════════════════════════════════════════════════════
   17. GLOBAL INTERACTION POLISH
══════════════════════════════════════════════════════════ */
a { transition:all 0.2s var(--ease-in-out) !important; }
button { transition:all 0.25s var(--ease-out-expo) !important; }
img { transition:transform 0.3s var(--ease-out-expo); }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════
   TOAST — Always on top, never clipped (Fixed Specificity)
══════════════════════════════════════════════════════════ */
#toast,
.toast {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  z-index: 99999 !important;
  transform: translateX(-50%) translateY(-120%) !important;
  pointer-events: none;
  isolation: auto !important;
  opacity: 0 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}
#toast.show,
.toast.show {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#toast.success,
.toast.success { background: #16A34A !important; }
#toast.error,
.toast.error   { background: #DC2626 !important; }


.header .logo,
.header .header-logo img,
.app-logo,
img.logo {
  height: 38px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}


/* ══════════════════════════════════════════════════════════
   15. GLOBAL DASHBOARD SURFACE OVERRIDES — Dark Mode Harmony
══════════════════════════════════════════════════════════ */
.bg-white {
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
}
.bg-slate-50 {
  background: #111827 !important;
}
.bg-slate-100 {
  background: #0F172A !important;
}
.bg-slate-200 {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* Stats Summary Cards */
.bg-gradient-to-br.from-orange-50.to-orange-100,
.bg-gradient-to-br.from-blue-50.to-blue-100,
.bg-gradient-to-br.from-green-50.to-green-100,
.bg-gradient-to-br.from-purple-50.to-purple-100 {
  background: #1E293B !important;
  border: 1px solid rgba(37,99,235,0.2) !important;
  background-image: none !important;
}

/* Status Badges */
.bg-blue-100 {
  background: rgba(37,99,235,0.18) !important;
}
.text-blue-700 {
  color: #60A5FA !important;
}
.bg-purple-100 {
  background: rgba(147,51,234,0.18) !important;
}
.text-purple-700 {
  color: #C084FC !important;
}
.bg-green-100 {
  background: rgba(22,163,74,0.18) !important;
}
.text-green-700 {
  color: #4ADE80 !important;
}
.bg-slate-100 {
  background: rgba(148,163,184,0.15) !important;
}
.text-slate-700 {
  color: #CBD5E1 !important;
}
.text-slate-600 {
  color: #94A3B8 !important;
}
.text-slate-900 {
  color: #F8FAFC !important;
}
.border-slate-100, .border-slate-200 {
  border-color: rgba(51,65,85,0.5) !important;
}