:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  color: var(--tg-theme-text-color, #172534); background: var(--tg-theme-bg-color, #fff); }
header { padding: 16px 18px 10px; }
.brand { color: var(--tg-theme-link-color, #247350); font-size: 13px; font-weight: 700; }
h1 { font-size: 20px; margin: 6px 0; line-height: 1.25; }
p { font-size: 14px; margin: 6px 0; }
#map { flex: 1; min-height: 180px; }
footer { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); }
#send { width: 100%; padding: 14px; margin-top: 6px; border: 0; border-radius: 12px;
  background: var(--tg-theme-button-color, #247350); color: var(--tg-theme-button-text-color, white);
  font-size: 16px; font-weight: 600; cursor: pointer; }
#send:disabled { opacity: .45; cursor: default; }
.hint { color: var(--tg-theme-hint-color, #65727c); font-size: 12px; }
.pin { width: 24px; height: 24px; border: 3px solid white; border-radius: 50%;
  background: #247350; box-shadow: 0 2px 8px #0008; transform: translate(-50%, -50%); }