/* layout.css — base reset, layout, body */

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--tg-theme-bg-color);
  color: var(--tg-theme-text-color);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: 1.45;
  min-height: var(--tg-vh-stable);
  padding-top: var(--tg-content-safe-top);
  padding-bottom: var(--tg-content-safe-bottom);
  padding-left: var(--tg-safe-left);
  padding-right: var(--tg-safe-right);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
a { color: var(--tg-theme-link-color); text-decoration: none; }

.app {
  max-width: 720px;
  margin: 0 auto;
  /* TG WebView має зверху native header з close-кнопкою (~50px) + Settings/BackButton.
     Безпечний відступ — 56px над контентом; на нативному mode iOS це достатньо. */
  padding-top: calc(56px + var(--tg-content-safe-top, 0px));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-bottom: calc(var(--space-xl) + var(--tg-safe-bottom, 0px));
}

.page-header { margin-bottom: var(--space-md); }
.page-header h1 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-xs);
  /* Відступ зліва не потрібен — .app уже має padding-top 56px+, BackButton TG лежить
     над цим відступом, не перекриваючи h1. Залишаємо чистий заголовок. */
  padding-right: 8px;
  min-height: 36px;
}

.muted { color: var(--tg-theme-hint-color); }
.row { display: flex; align-items: center; }
.stack { display: flex; flex-direction: column; }
.grid { display: grid; }
.grid--cols-2 { grid-template-columns: 1fr 1fr; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.section__title {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tg-theme-section-header-text-color);
  margin-bottom: var(--space-sm);
}

/* Splash */
.splash {
  position: fixed; inset: 0;
  background: var(--tg-theme-bg-color);
  display: grid; place-items: center; z-index: 100;
}
.splash__inner { text-align: center; }
.splash__logo {
  width: 96px; height: 96px; margin: 0 auto var(--space-md);
  background: url("/assets/img/icon-192.png") center/cover no-repeat;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.splash__title { font-size: var(--font-size-xl); font-weight: 600; }
.splash__hint { color: var(--tg-theme-hint-color); margin-top: var(--space-xs); }
.splash__spinner {
  width: 24px; height: 24px; margin: var(--space-md) auto 0;
  border: 2px solid var(--tg-theme-section-separator-color);
  border-top-color: var(--tg-theme-button-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fatal { padding: var(--space-lg); text-align: center; }
.fatal h2 { margin-top: 0; }