:root{--primary:#D4AF37;--primary-dark:#B8941F;--primary-light:#F4D03F;--accent:#FF8C42;--accent-dark:#FF6B35;--accent-light:#FFB84D;--text-primary:#1A1A2E;--text-secondary:#4B5563;--text-light:#6B7280;--text-muted:#9CA3AF;--bg-dark:#1a1a2e;--bg-dark-secondary:#16213e;--bg-dark-tertiary:#0f3460;--bg-light:#FFFFFF;--bg-light-secondary:#F9FAFB;--bg-light-tertiary:#F3F4F6;--gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;--gray-800:#1F2937;--gray-900:#111827;--success:#10B981;--success-light:#D1FAE5;--warning:#F59E0B;--warning-light:#FEF3C7;--error:#EF4444;--error-light:#FEE2E2;--info:#3B82F6;--info-light:#DBEAFE;--gradient-premium:linear-gradient(135deg,#D4AF37 0%,#FFD700 25%,#FF8C42 50%,#D4AF37 75%,#B8941F 100%);--gradient-gold-shine:linear-gradient(135deg,#D4AF37 0%,#F4D03F 50%,#D4AF37 100%);--gradient-sunset:linear-gradient(135deg,#FF6B35 0%,#FF8C42 50%,#FFB84D 100%);--gradient-dark:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);--gradient-hero:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);--gradient-mesh:radial-gradient(at 40% 20%,rgba(212,175,55,0.15) 0px,transparent 50%),radial-gradient(at 80% 0%,rgba(255,140,66,0.1) 0px,transparent 50%),radial-gradient(at 0% 50%,rgba(255,107,53,0.08) 0px,transparent 50%),radial-gradient(at 80% 50%,rgba(244,208,63,0.1) 0px,transparent 50%),radial-gradient(at 0% 100%,rgba(212,175,55,0.12) 0px,transparent 50%);--glass-bg:rgba(255,255,255,0.7);--glass-bg-strong:rgba(255,255,255,0.85);--glass-bg-light:rgba(255,255,255,0.4);--glass-bg-dark:rgba(0,0,0,0.6);--glass-border:rgba(255,255,255,0.5);--glass-shadow:0 8px 32px rgba(0,0,0,0.08);--glass-blur:blur(20px);--glass-blur-strong:blur(40px);--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1);--shadow-glow-gold:0 0 40px rgba(212,175,55,0.3);--shadow-glow-orange:0 0 40px rgba(255,140,66,0.25);--shadow-elevated:0 20px 60px rgba(0,0,0,0.12),0 8px 25px rgba(0,0,0,0.08);--shadow-card-hover:0 25px 80px rgba(212,175,55,0.2),0 15px 35px rgba(0,0,0,0.1);--shadow-float:0 30px 60px rgba(0,0,0,0.15);--shadow-inset-glow:inset 0 1px 1px rgba(255,255,255,0.8);--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-premium:24px;--radius-card:20px;--radius-button:14px;--radius-badge:50px;--radius-full:9999px;--spring-bounce:cubic-bezier(0.68,-0.6,0.32,1.6);--spring-smooth:cubic-bezier(0.25,0.46,0.45,0.94);--ease-premium:cubic-bezier(0.4,0,0.2,1);--ease-out-expo:cubic-bezier(0.16,1,0.3,1);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal-backdrop:400;--z-modal:500;--z-popover:600;--z-tooltip:700}

/* ============================================
   DARK MODE - CSS Variable Overrides
   ============================================ */
html.dark-mode,
[data-theme="dark"],
.dark-mode {
  --text-primary:#F5F5F5;
  --text-secondary:#D0D0D0;
  --text-light:#A0A0A0;
  --text-muted:#808080;
  --bg-light:#0a0a0a;
  --bg-light-secondary:#1a1a1a;
  --bg-light-tertiary:#252525;
  --gray-50:#1a1a1a;
  --gray-100:#252525;
  --gray-200:#333333;
  --gray-300:#444444;
  --gray-400:#666666;
  --gray-500:#A0A0A0;
  --gray-600:#D0D0D0;
  --gray-700:#E0E0E0;
  --gray-800:#E5E5E5;
  --gray-900:#F5F5F5;
  --success-light:rgba(16,185,129,0.2);
  --warning-light:rgba(245,158,11,0.2);
  --error-light:rgba(239,68,68,0.2);
  --info-light:rgba(59,130,246,0.2);
  --glass-bg:rgba(30,30,30,0.7);
  --glass-bg-strong:rgba(30,30,30,0.85);
  --glass-bg-light:rgba(30,30,30,0.4);
  --glass-border:rgba(255,255,255,0.1);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.3);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.3);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.3);
  --shadow-inset-glow:inset 0 1px 1px rgba(255,255,255,0.05);
}@keyframes gradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes shimmer{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(200%) rotate(25deg)}}@keyframes shimmerPremium{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(200%) rotate(25deg)}}@keyframes floatPremium{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-8px) rotate(1deg)}75%{transform:translateY(4px) rotate(-1deg)}}@keyframes floatAnimation{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-15px) rotate(2deg)}75%{transform:translateY(8px) rotate(-2deg)}}@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(212,175,55,0.3)}50%{box-shadow:0 0 50px rgba(212,175,55,0.6),0 0 80px rgba(255,140,66,0.3)}}@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInFromBottom{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(0.9);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes scaleInBounce{0%{transform:scale(0.8);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}@keyframes borderGlow{0%,100%{border-color:rgba(212,175,55,0.3)}50%{border-color:rgba(212,175,55,0.7)}}@keyframes iconBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes textGradientShift{0%,100%{background-position:0% center}50%{background-position:100% center}}@keyframes cardEntrance{0%{opacity:0;transform:translateY(40px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes rippleEffect{0%{transform:scale(0);opacity:0.5}100%{transform:scale(4);opacity:0}}@keyframes successPop{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(-45deg)}100%{transform:scale(1) rotate(-45deg)}}@keyframes shakeError{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}