/* Critical CSS for initial page load */
body {
  margin: 0;
  /* System fonts first (fastest), Inter as fallback if loaded */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Initial splash with centered logo */
.initial-splash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.initial-splash img { max-width: 100%; max-height: 100%; object-fit: contain; }

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hide splash when app is ready */
.app-loaded .initial-splash {
  display: none;
}

/* Critical layout styles for faster rendering */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Prevent layout shift */
img {
  max-width: 100%;
  height: auto;
}