:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --link: var(--tg-theme-link-color, #2a7ae2);
  --btn: var(--tg-theme-button-color, #2a7ae2);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --ok: #2e9e5b;
  --no: #d2463c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px 96px; }
h1 { font-size: 20px; margin: 4px 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
.muted { color: var(--hint); }
.card { background: var(--card); border-radius: 12px; padding: 12px; margin: 8px 0; }
.row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(127,127,127,.15); }
.row:last-child { border-bottom: 0; }
.row .label { flex: 1; }
button { font: inherit; border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer;
  background: var(--btn); color: var(--btn-text); }
button.ghost { background: transparent; color: var(--link); padding: 6px 0; }
button.pill { background: var(--card); color: var(--text); padding: 6px 10px; border: 1px solid rgba(127,127,127,.25); }
button.pill.on-yes { background: var(--ok); color: #fff; border-color: var(--ok); }
button.pill.on-no { background: var(--no); color: #fff; border-color: var(--no); }
button[disabled] { opacity: .5; cursor: default; }
input[type=text], input[type=number], textarea { width: 100%; font: inherit; padding: 10px; border-radius: 10px;
  border: 1px solid rgba(127,127,127,.3); background: var(--bg); color: var(--text); }
textarea { min-height: 64px; resize: vertical; }
label.check { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
label.check input { width: 20px; height: 20px; }
.item { display: block; width: 100%; text-align: left; background: var(--card); color: var(--text); margin: 6px 0; }
.err { color: var(--no); }
.toast { position: fixed; left: 16px; right: 16px; bottom: 16px; background: var(--text); color: var(--bg);
  border-radius: 10px; padding: 10px 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .92; }