:root {
  font: 16px/1.55 system-ui, sans-serif;
  color: var(--tg-theme-text-color, CanvasText);
  background: var(--tg-theme-secondary-bg-color, Canvas);
  --surface: var(--tg-theme-bg-color, Canvas);
  --muted: var(--tg-theme-hint-color, GrayText);
  --accent: var(--tg-theme-button-color, #1e57ac);
  --accent-text: var(--tg-theme-button-text-color, white);
}
* { box-sizing: border-box; }
main { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; }
header { margin: 12px 0 24px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
.eyebrow, .muted { color: var(--muted); }
.eyebrow { font-size: .75rem; letter-spacing: .14em; font-weight: 700; margin-bottom: 6px; }
.card { background: var(--surface); border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 16px; padding: 18px; margin: 12px 0; display: grid; gap: 14px; }
.copy { white-space: pre-wrap; overflow-wrap: anywhere; }
.row, nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
nav[hidden] { display: none; }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid transparent; border-radius: 9px; padding: 7px 14px; font: inherit; font-weight: 650; text-decoration: none; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.secondary { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
label { display: grid; gap: 5px; font-weight: 600; }
textarea, input { width: 100%; padding: 8px; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--muted); border-radius: 8px; }
textarea { min-height: 80px; resize: vertical; }
img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
#message:not(:empty) { margin: 12px 0; }
progress { width: 100%; accent-color: var(--accent); }