:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--tg-theme-bg-color, #f4f5f7);
  color: var(--tg-theme-text-color, #16181d);
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

main {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 14px max(32px, env(safe-area-inset-bottom));
}

header { padding: 4px 4px 14px; }
h1 { margin: 2px 0 6px; font-size: 28px; }
h2 { margin: 0 0 8px; font-size: 20px; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--tg-theme-button-color, #2678f2); }
.muted, .hint { color: var(--tg-theme-hint-color, #6f7580); }
.muted { margin: 0; }
.hint { margin: -4px 0 2px; font-size: 12px; }

form { display: grid; gap: 12px; }
section {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #777) 20%, transparent);
  border-radius: 15px;
  background: var(--tg-theme-secondary-bg-color, #fff);
}

label { margin-top: 4px; font-size: 13px; font-weight: 700; }
label span { color: #d74646; }
input, select, textarea, button {
  width: 100%;
  border-radius: 11px;
  font: inherit;
}
input, select, textarea {
  border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #777) 35%, transparent);
  padding: 11px 12px;
  background: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color, #16181d);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--tg-theme-button-color, #2678f2); border-color: transparent; }

button { border: 0; cursor: pointer; }
.primary {
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 800;
  background: var(--tg-theme-button-color, #2678f2);
  color: var(--tg-theme-button-text-color, #fff);
}
.primary:disabled { opacity: .55; cursor: wait; }
.link-button { width: auto; padding: 3px 0; text-align: left; color: var(--tg-theme-link-color, #2678f2); background: transparent; }
.selector-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.secondary { width: auto; padding: 9px 12px; color: var(--tg-theme-button-color, #2678f2); background: color-mix(in srgb, var(--tg-theme-button-color, #2678f2) 12%, transparent); }
.payment-items { display: grid; gap: 8px; }
.skip-option { margin: 0; padding: 9px 10px; border: 1px dashed color-mix(in srgb, var(--tg-theme-hint-color, #777) 35%, transparent); border-radius: 10px; color: var(--tg-theme-hint-color, #6f7580); font-size: 13px; }
.payment-option { display: grid; grid-template-columns: auto 1fr 105px; align-items: center; gap: 9px; padding: 10px; border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #777) 25%, transparent); border-radius: 11px; }
.payment-option input[type="checkbox"] { width: 19px; height: 19px; }
.payment-option input[type="number"] { padding: 8px; }
.payment-option strong, .payment-option small { display: block; }
.payment-option small { margin-top: 2px; color: var(--tg-theme-hint-color, #6f7580); }
.payment-option.disabled { opacity: .55; }
.report-item { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #777) 20%, transparent); }
.report-item:last-child { border-bottom: 0; }
.report-item strong { font-size: 15px; }
.report-item button { width: auto; justify-self: start; margin-top: 4px; padding: 7px 12px; color: var(--tg-theme-button-text-color, #fff); background: var(--tg-theme-button-color, #2678f2); }
.message { margin: 0 4px 12px; padding: 12px; border-radius: 11px; background: var(--tg-theme-secondary-bg-color, #fff); }
.message.error { color: #b42318; background: #fee4e2; }
.message.success { color: #067647; background: #d1fadf; }

[hidden] { display: none !important; }

@media (max-width: 430px) {
  .selector-controls { grid-template-columns: 1fr; }
  .secondary { width: 100%; }
  .payment-option { grid-template-columns: auto 1fr; }
  .payment-option input[type="number"] { grid-column: 2; width: 100%; }
}