/* FitMini — Base CSS */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-ui);
  font-size: var(--fz-md);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  padding-bottom: calc(var(--tab-bar-h) + var(--safe-bottom));
  overscroll-behavior: none;
}

/* Hide scrollbar but keep scroll */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

a { color: var(--c-accent); text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; }

/* ── Page container ─────────────────────────────────────────────── */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-16);
  display: none;
}
.page.active { display: block; }

/* ── Section header ─────────────────────────────────────────────── */
.section-title {
  font-size: var(--fz-sm);
  font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
}

/* ── Utility ────────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.flex    { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: var(--sp-4); }
.gap-8  { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }
.gap-16 { gap: var(--sp-16); }

.text-sm   { font-size: var(--fz-sm); }
.text-xs   { font-size: var(--fz-xs); }
.text-lg   { font-size: var(--fz-lg); }
.text-2    { color: var(--c-text-2); }
.fw-600    { font-weight: 600; }
.fw-700    { font-weight: 700; }

/* ── Loading skeleton ───────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--c-bg-2) 25%, var(--c-border) 50%, var(--c-bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}