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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

::selection {
  background-color: var(--gold-primary);
  color: var(--bg-primary);
}

a {
  color: var(--gold-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* Cosmic Background */
body::before, body::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background: radial-gradient(circle at 20% 30%, rgba(26, 5, 51, 0.4) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(12, 20, 69, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(10, 42, 63, 0.2) 0%, transparent 60%);
}

body::after {
  z-index: -1;
  /* Simple star field using multiple box-shadows */
  box-shadow: 
    10vw 20vh 1px 0px rgba(255,255,255,0.8),
    25vw 50vh 1px 0px rgba(255,255,255,0.5),
    40vw 10vh 2px 0px rgba(212,168,67,0.7),
    60vw 80vh 1px 0px rgba(255,255,255,0.6),
    80vw 30vh 1px 0px rgba(255,255,255,0.9),
    90vw 60vh 2px 0px rgba(212,168,67,0.4),
    15vw 70vh 1px 0px rgba(255,255,255,0.7),
    50vw 90vh 1px 0px rgba(255,255,255,0.5),
    70vw 15vh 1px 0px rgba(255,255,255,0.8),
    35vw 35vh 2px 0px rgba(212,168,67,0.6);
  width: 2px;
  height: 2px;
  background: transparent;
  animation: twinkle 4s infinite alternate;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 168, 67, 0.1); }
  50% { box-shadow: 0 0 40px rgba(212, 168, 67, 0.25); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes chartDraw {
  from { stroke-dashoffset: 1500; }
  to { stroke-dashoffset: 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* PDF Export Fallbacks */
.exporting .glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg-secondary) !important;
}

.exporting * {
  animation: none !important;
  transition: none !important;
}

.exporting .chart-animate .chart-border, 
.exporting .chart-animate line {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
