/* Mini App uslubi.
   Ranglar Telegram mavzusidan olinadi: sahifa mijoz mavzusiga
   moslashsin, o'z rangini majburlamasin. */
:root {
  --fon: var(--tg-theme-bg-color, #ffffff);
  --matn: var(--tg-theme-text-color, #000000);
  --xira: var(--tg-theme-hint-color, #707579);
  --tugma: var(--tg-theme-button-color, #2481cc);
  --tugma-matn: var(--tg-theme-button-text-color, #ffffff);
  --chegara: color-mix(in srgb, var(--xira) 30%, transparent);
  --xato: #d14343;
  --yaxshi: #2e9e5b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 20px 16px 40px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fon);
  color: var(--matn);
  line-height: 1.45;
}
h2 { font-size: 17px; margin: 0 0 12px; }
.kutish { color: var(--xira); }
.xato { color: var(--xato); }
.yaxshi { color: var(--yaxshi); }
.izoh { color: var(--xira); font-size: 13px; }

label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--xira); }
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 11px 12px;
  font-size: 16px;              /* 16px dan kichigi iOS da ekranni yaqinlashtiradi */
  color: var(--matn);
  background: var(--fon);
  border: 1px solid var(--chegara);
  border-radius: 10px;
}
button {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tugma-matn);
  background: var(--tugma);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button[disabled] { opacity: .5; }
button.ikkilamchi { color: var(--xato); background: transparent; border: 1px solid var(--chegara); }

dl { margin: 0 0 16px; font-size: 14px; }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--chegara); }
dt { color: var(--xira); }
dd { margin: 0; text-align: right; }