/* Critical CSS to prevent FOUC and layout shifts */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.5; }
body { 
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #f9fafb;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root { min-height: 100vh; display: flex; flex-direction: column; }
.loading-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f9fafb; }
.loading-spinner { width: 32px; height: 32px; border: 2px solid #e5e7eb; border-top: 2px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Prevent layout shifts */
img { max-width: 100%; height: auto; }
button { cursor: pointer; }
.sidebar-container { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; }
.main-content { transition: margin-left 0.3s ease; }