/* Claude uslubi — iliq oq fon, terrakota urg'u, serif sarlavha + tizim sans matn.
   Har qanday loyihaga ko'chiriladi (React, oddiy HTML, Telegram WebApp).
   Qorong'i rejim: tizimdan (prefers-color-scheme) yoki <html data-theme="dark|light"> dan. */

:root {
  --fon: #faf9f5;
  --sirt: #ffffff;
  --sirt-2: #f0eee6;
  --matn: #141413;
  --matn-2: #73726c;
  --chiziq: rgba(31, 30, 29, 0.12);
  --urgu: #d97757;
  --urgu-bosilgan: #c96442;
  --urgu-fon: rgba(217, 119, 87, 0.12);
  --urgu-ustida: #faf9f5;
  --yashil: #5e8a4a;
  --qizil: #c2483b;
  --soya: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px rgba(20, 20, 19, 0.04);

  --serif: 'Lora Variable', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --radius: 16px;
  --radius-kichik: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fon: #262624;
    --sirt: #30302e;
    --sirt-2: #3a3936;
    --matn: #faf9f5;
    --matn-2: #a6a39a;
    --chiziq: rgba(222, 220, 209, 0.12);
    --urgu-fon: rgba(217, 119, 87, 0.16);
    --yashil: #8fb07a;
    --qizil: #e07a6e;
    --soya: none;
  }
}
:root[data-theme='dark'] {
  --fon: #262624;
  --sirt: #30302e;
  --sirt-2: #3a3936;
  --matn: #faf9f5;
  --matn-2: #a6a39a;
  --chiziq: rgba(222, 220, 209, 0.12);
  --urgu-fon: rgba(217, 119, 87, 0.16);
  --yashil: #8fb07a;
  --qizil: #e07a6e;
  --soya: none;
  color-scheme: dark;
}
:root[data-theme='light'] { color-scheme: light; }

/* Asos */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fon);
  color: var(--matn);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }

/* Sahifa qobig'i: telefon — 1 ustun, Mac/keng ekran — markazda */
.ilova {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 24px);
}

/* Karta */
.karta {
  background: var(--sirt);
  border: 1px solid var(--chiziq);
  border-radius: var(--radius);
  box-shadow: var(--soya);
  padding: 14px 16px;
}

/* Tugmalar */
.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-kichik);
  border: 1px solid var(--chiziq);
  background: var(--sirt);
  color: var(--matn);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tugma:active { background: var(--sirt-2); }
.tugma-asosiy { background: var(--urgu); border-color: transparent; color: var(--urgu-ustida); }
.tugma-asosiy:active { background: var(--urgu-bosilgan); }
.tugma:disabled { opacity: 0.5; cursor: default; }

/* Maydonlar */
.maydon {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-kichik);
  border: 1px solid var(--chiziq);
  background: var(--sirt);
  color: var(--matn);
  font: inherit;
  font-size: 16px; /* iOS zoom qilmasligi uchun 16px dan kichik bo'lmasin */
}
.maydon:focus { outline: none; border-color: var(--urgu); box-shadow: 0 0 0 3px var(--urgu-fon); }

/* Kichik yozuvlar */
.yorliq {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--chiziq);
  font-size: 0.75rem;
  color: var(--matn-2);
}
.ikonka-qutisi {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-kichik);
  background: var(--urgu-fon);
  color: var(--urgu);
}
.ikkinchi { color: var(--matn-2); }

@media (min-width: 720px) {
  .ilova { padding-left: 32px; padding-right: 32px; }
}