/* Цвета: в окне Telegram — его тема (--tg-theme-*, ставит SDK), в браузере — свои. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --accent: var(--tg-theme-button-color, #2a7de1);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f7);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #1c1c1e);
    --text: var(--tg-theme-text-color, #f2f2f7);
    --hint: var(--tg-theme-hint-color, #8e8e93);
    --card: var(--tg-theme-secondary-bg-color, #2c2c2e);
  }
}
* { box-sizing: border-box; }
/* иначе display: flex у nav перебивает атрибут hidden и вкладки видны без входа */
[hidden] { display: none !important; }
body {
  margin: 0 auto; max-width: 960px; padding: 16px;
  background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1 { font-size: 20px; margin: 4px 0 16px; }
nav { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
nav button {
  border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  background: var(--card); color: var(--text); font: inherit;
}
nav button.active { background: var(--accent); color: var(--accent-text); }
main { background: var(--card); border-radius: 12px; padding: 20px; min-height: 120px; }
.hint { color: var(--hint); }
button.big {
  margin: 16px 8px 0 0; border: 0; border-radius: 10px; padding: 12px 20px;
  background: var(--accent); color: var(--accent-text); font: inherit; cursor: pointer;
}
button.big.secondary { background: var(--bg); color: var(--text); }