/* Initial loader styles — loaded before React hydrates to prevent FOUC */
html, body { margin: 0; padding: 0; }
html.dark .initial-loader { --p: #ffffff; --bg: #09090b; --txt: #a1a1aa; }
html.light .initial-loader { --p: #09090b; --bg: #ffffff; --txt: #71717a; }

.initial-loader {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; font-family: 'Inter', sans-serif;
  height: 100dvh; width: 100vw;
}
.pulse-container { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.pulse-ring {
  position: absolute; inset: 0;
  border: 3px solid rgba(161, 161, 170, 0.1);
  border-top: 3px solid var(--p);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}
.pulse-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: pulse 1.5s ease-in-out infinite;
  color: var(--p);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } }
.loader-text {
  position: absolute; top: 100%; margin-top: 24px;
  color: var(--txt); font-size: 10px; white-space: nowrap;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  animation: text-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes text-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }