/* Critical CSS to prevent FOUC */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* PWA Safe Area Support */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

body {
  margin: 0;
  padding: 0;
  background-color: #0f172a;
  color: #f8fafc;
  font-family: inherit;
  overflow-x: hidden;
  position: relative;
  /* PWA Safe Area Padding */
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
}

/* Critical Tailwind utilities */
.min-h-screen { min-height: 100vh; }
.bg-gray-900 { background-color: #111827; }
.text-white { color: #ffffff; }
.text-gray-400 { color: #9ca3af; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-semibold { font-weight: 600; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.border-4 { border-width: 4px; }
.border-gray-600 { border-color: #4b5563; }
.border-t-cyan-400 { border-top-color: #22d3ee; }
.rounded-full { border-radius: 9999px; }
.animate-spin { animation: spin 1s linear infinite; }

/* Loading spinner */
.initial-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #334155;
  border-top: 3px solid #06b6d4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

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

/* Prevent flash of unstyled content */
#__next {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.app-ready #__next {
  opacity: 1;
}

/* PWA Safe Area Utilities */
.safe-top { padding-top: var(--safe-area-inset-top); }
.safe-right { padding-right: var(--safe-area-inset-right); }
.safe-bottom { padding-bottom: var(--safe-area-inset-bottom); }
.safe-left { padding-left: var(--safe-area-inset-left); }
.safe-x { 
  padding-left: var(--safe-area-inset-left); 
  padding-right: var(--safe-area-inset-right); 
}
.safe-y { 
  padding-top: var(--safe-area-inset-top); 
  padding-bottom: var(--safe-area-inset-bottom); 
}
.safe-all { 
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
}

/* Mobile-specific fixes */
@media (max-width: 640px) {
  .min-h-screen { min-height: 100dvh; }
  .h-screen { height: 100dvh; }
}