:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color, #000);
}
main { padding: 16px; max-width: 480px; margin: 0 auto; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
.note { margin: 0 0 12px; color: var(--tg-theme-hint-color, #707579); font-size: 14px; }
input {
  width: 100%;
  padding: 12px;
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--tg-theme-hint-color, #c4c4c4);
  background: var(--tg-theme-secondary-bg-color, #f1f1f1);
  color: var(--tg-theme-text-color, #000);
}
input:focus { outline: 2px solid var(--tg-theme-button-color, #2481cc); border-color: transparent; }
.hint { margin: 8px 0 0; color: var(--tg-theme-destructive-text-color, #d33); font-size: 14px; }
button {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  background: var(--tg-theme-button-color, #2481cc);
  color: var(--tg-theme-button-text-color, #fff);
}
[hidden] { display: none; }