:root {
  --navy: #0a0e1a;
  --deep-purple: #1a0a2e;
  --sepia: #c4a265;
  --sepia-dark: #3d2b0f;
  --teal: #0ea5e9;
  --teal-dark: #0c4a6e;
  --neon-purple: #c026d3;
  --neon-magenta: #e879f9;
  --card-bg: rgba(255,255,255,0.04);
}

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

body {
  background: linear-gradient(135deg, var(--navy) 0%, var(--deep-purple) 50%, #0d1117 100%);
  min-height: 100vh;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #e2e8f0;
  overflow-x: hidden;
}

/* Star field background */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 15% 90%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 60% 95%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 95% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 20% 5%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 80% 90%, rgba(255,255,255,0.3), transparent);
  animation: starDrift 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes starDrift {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-15px) translateX(10px); }
  100% { transform: translateY(0) translateX(0); }
}

#root {
  position: relative;
  z-index: 1;
}

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(192, 38, 211, 0.4), 0 0 40px rgba(192, 38, 211, 0.2); }
  50% { text-shadow: 0 0 30px rgba(192, 38, 211, 0.7), 0 0 60px rgba(192, 38, 211, 0.4), 0 0 80px rgba(192, 38, 211, 0.2); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 6px 2px currentColor; }
  50% { box-shadow: 0 0 16px 6px currentColor; }
}

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

@keyframes filmGrain {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}

@keyframes holographicShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes neonFlicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
  98% { opacity: 0.6; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.title-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

.slide-up {
  animation: slideUp 0.6s ease-out forwards;
  opacity: 0;
}

.slide-up-delay-1 { animation-delay: 0.2s; }
.slide-up-delay-2 { animation-delay: 0.5s; }
.slide-up-delay-3 { animation-delay: 0.8s; }
.slide-up-delay-4 { animation-delay: 1.1s; }

.timeline-dot {
  animation: timelinePulse 2s ease-in-out infinite;
}

.loading-spin {
  animation: spin 1.5s linear infinite;
}

.card-1920 {
  background: linear-gradient(135deg, rgba(61, 43, 15, 0.6) 0%, rgba(80, 55, 20, 0.4) 100%);
  border: 1px solid rgba(196, 162, 101, 0.3);
  position: relative;
  overflow: hidden;
}

.card-1920::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  animation: filmGrain 0.5s steps(1) infinite;
  pointer-events: none;
}

.card-2020 {
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.5) 0%, rgba(14, 116, 144, 0.3) 100%);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.card-2120 {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.4) 0%, rgba(134, 25, 143, 0.3) 50%, rgba(59, 7, 100, 0.5) 100%);
  border: 1px solid rgba(192, 38, 211, 0.4);
  position: relative;
  overflow: hidden;
  animation: neonFlicker 4s ease-in-out infinite;
}

.card-2120::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(192, 38, 211, 0.05), transparent, rgba(232, 121, 249, 0.05), transparent);
  background-size: 400% 400%;
  animation: holographicShift 6s ease infinite;
  pointer-events: none;
}

.input-field {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: var(--neon-purple);
  box-shadow: 0 0 12px rgba(192, 38, 211, 0.3);
  outline: none;
  background: rgba(255,255,255,0.08);
}

.travel-btn {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.travel-btn:hover:not(:disabled) {
  box-shadow: 0 0 25px rgba(192, 38, 211, 0.5), 0 0 50px rgba(124, 58, 237, 0.3);
  transform: translateY(-2px);
}

.travel-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.travel-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.travel-btn:hover::before {
  transform: translateX(100%);
}

.bar-chart-bar {
  transition: height 1s ease-out, opacity 0.5s ease;
}

.recent-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.2s ease;
  cursor: pointer;
}

.recent-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(192, 38, 211, 0.3);
}

.random-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.3s ease;
}

.random-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--sepia);
  color: var(--sepia);
}

.share-btn {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.3);
  transition: all 0.3s ease;
}

.share-btn:hover {
  background: rgba(14, 165, 233, 0.25);
}

.fun-fact-box {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(192, 38, 211, 0.08));
  border: 1px solid rgba(192, 38, 211, 0.2);
  animation: float 4s ease-in-out infinite;
}

.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }