:root {
  /* Use Telegram's colors, or fallback to defaults if opened in a regular browser */
  --tg-bg: var(--tg-theme-bg-color, #ffffff);
  --tg-text: var(--tg-theme-text-color, #222222);
  --tg-hint: var(--tg-theme-hint-color, #999999);
  --tg-link: var(--tg-theme-link-color, #248bcf);
  --tg-button: var(--tg-theme-button-color, #248bcf);
  --tg-button-text: var(--tg-theme-button-text-color, #ffffff);
  --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
}

body {
  background-color: var(--tg-bg);
  color: var(--tg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.card {
  background-color: var(--tg-secondary-bg);
  border-radius: 12px;
  padding: 15px;
  margin: 10px;
}

button.main-btn {
  background-color: var(--tg-button);
  color: var(--tg-button-text);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  width: 100%;
  font-weight: bold;
  cursor: pointer;
}

.hint-text {
  color: var(--tg-hint);
  font-size: 0.85rem;
}