:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #7a7a7a);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f3f5);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17212b);
    --text: var(--tg-theme-text-color, #f5f5f5);
    --hint: var(--tg-theme-hint-color, #8b9aa8);
    --card: var(--tg-theme-secondary-bg-color, #232e3c);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--hint); }
.small { font-size: 14px; }
.center { text-align: center; padding-top: 18vh; }
.video-wrap { margin: 12px -16px 16px; background: #000; aspect-ratio: 16 / 9; }
video { width: 100%; height: 100%; display: block; background: #000; }
.btn {
  display: block; width: 100%; border: 0; border-radius: 12px; padding: 15px 16px;
  background: var(--btn); color: var(--btn-text); font: inherit; font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer;
}
.btn:active { opacity: .85; }
.btn-secondary {
  border: 0; border-radius: 10px; padding: 9px 14px; background: var(--card); color: var(--btn);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-secondary.wide { display: block; width: 100%; margin-top: 10px; padding: 14px; }
#cta-note { text-align: center; margin-top: 8px; }
.copy-box { margin-top: 18px; padding: 12px; background: var(--card); border-radius: 12px; }
.copy-box p { margin-bottom: 8px; }
.copy-row { display: flex; gap: 10px; align-items: center; }
#dm-text { flex: 1; font-size: 15px; word-break: break-word; }