/* Reset + typography shared by every page. */
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  padding: 16px 12px 36px 12px;
}

@media (min-width: 600px) {
  body {
    padding: 24px 20px 48px 20px;
  }
}

/* Standalone PWA Web App Mode extra top & bottom push */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body {
    padding-top: max(72px, calc(env(safe-area-inset-top) + 32px));
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 24px));
  }
}

.page-header {
  text-align: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--accent-color);
}

.page-header .status {
  font-size: 0.95rem;
  color: var(--text-muted);
}