/* Prevent FOUC and provide instant feedback */
html {
  margin: 0;
  padding: 0;
  /* viewport-fit=cover shifts the document up behind the status bar,
     but height:100% resolves to safe-area height on iOS. Adding
     safe-area-inset-top compensates so the html element fills the
     full physical screen and its background paints behind the
     home indicator — eliminating the white bar at the bottom. */
  min-height: calc(100% + env(safe-area-inset-top, 0px));
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #FFF8F5; /* mirrors --md-sys-color-surface (light) */
  -webkit-tap-highlight-color: transparent;
}
body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #FFF8F5; /* mirrors --md-sys-color-surface (light) */
  -webkit-tap-highlight-color: transparent;
}
/* Dark mode FOUC prevention */
html.dark, html.dark body, html.dark #root {
  background: #1A1210; /* mirrors --md-sys-color-surface (dark) */
}
html.dark #root:empty::after {
  border-color: #52443C; /* mirrors --md-sys-color-outline-variant (dark) */
  border-top-color: #FFB59A; /* mirrors --md-sys-color-primary (dark) */
}
/* Initial loading state */
#root:empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
#root:empty::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid #D8C2B9; /* mirrors --md-sys-color-outline-variant (light) */
  border-top-color: #8C4A2F; /* mirrors --md-sys-color-primary (light) */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #root:empty::after {
    animation: none;
  }
}