/*
  Goal: Telegram-native look & feel.
  - Colors come from Telegram theme params.
  - Typography: Montserrat 700 for headings, 400 for body.
  - Spacing & rounded corners follow Telegram Mini Apps patterns.

  Notes:
  - Telegram injects theme params via JS; we map them to CSS variables.
  - Avoid hardcoding new palette; provide safe fallbacks only.
*/

:root {
  /* Typography */
  --font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Telegram-like type scale (approx, matches common Mini App feel) */
  --font-size-title: 20px;
  --line-height-title: 24px;
  --font-size-body: 15px;
  --line-height-body: 20px;
  --font-size-caption: 13px;
  --line-height-caption: 16px;

  /* Layout */
  --page-padding: 16px;
  --section-gap: 16px;
  --row-padding-y: 12px;
  --row-padding-x: 14px;

  /* Corner radius */
  --radius-lg: 14px;
  --radius-md: 12px;

  /* Borders */
  --hairline: 1px;

  /* Theme colors (set from Telegram themeParams in JS)
     Fallbacks are neutral and should rarely be seen in Telegram. */
  --tg-bg: #ffffff;
  --tg-secondary-bg: #f4f4f5;
  --tg-text: #111111;
  --tg-hint: #707579;
  --tg-link: #3390ec;
  --tg-button: #3390ec;
  --tg-button-text: #ffffff;
  --tg-destructive: #ff3b30;
  --tg-separator: rgba(0, 0, 0, 0.08);

  /* Safe areas */
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);

  background: var(--tg-bg);
  color: var(--tg-text);
}

button {
  font-family: inherit;
}

.app {
  min-height: 100%;
  padding: calc(var(--page-padding) + var(--safe-top)) calc(var(--page-padding) + var(--safe-right))
    calc(var(--page-padding) + var(--safe-bottom)) calc(var(--page-padding) + var(--safe-left));
}

/* Header */
.tg-header {
  margin-bottom: var(--section-gap);
}

.tg-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
}

.tg-subtitle {
  margin-top: 4px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--tg-hint);
}

/* Content */
.tg-content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.tg-section-title {
  margin: 0 0 10px 0;
  padding: 0 2px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--tg-hint);
  text-transform: none;
}

/* Card */
.tg-card {
  background: var(--tg-secondary-bg);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.tg-card-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: 6px;
}

.tg-card-text {
  color: var(--tg-hint);
}

/*
  Telegram-like list/group rows with corner rounding logic:
  - One row: all corners rounded.
  - Two rows: first has top corners rounded; second has bottom corners rounded.
  - More: same as two, middle rows no rounding.
*/
.tg-list {
  background: var(--tg-secondary-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tg-row {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: var(--row-padding-y) var(--row-padding-x);

  display: flex;
  flex-direction: column;
  gap: 2px;

  cursor: pointer;
}

.tg-row + .tg-row {
  border-top: var(--hairline) solid var(--tg-separator);
}

.tg-row:active {
  /* Telegram uses subtle press states; keep it minimal */
  filter: brightness(0.98);
}

.tg-row-text {
  font-weight: var(--font-weight-bold);
}

.tg-row-hint {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--tg-hint);
}

/* Footer */
.tg-footer {
  margin-top: var(--section-gap);
}

.tg-footer-text {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--tg-hint);
}

/* Optional: prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}