/* Loyiha uslubi (claude-uslubi.css ustiga). Faqat var(--...) tokenlar. */
:root { --serif: 'Lora', Georgia, 'Times New Roman', serif; --tab-balandlik: 64px; }

body { padding-bottom: calc(var(--tab-balandlik) + env(safe-area-inset-bottom)); }
.ilova { padding-bottom: 24px; }
a { color: inherit; text-decoration: none; }
.ik { flex: none; vertical-align: -0.2em; }
.qarz { color: var(--qizil); }
.yashil { color: var(--yashil); }
.ikkinchi { color: var(--matn-2); }
.mayda { font-size: 0.8125rem; color: var(--matn-2); display: flex; gap: 8px; justify-content: space-between; align-items: center; }

/* Sarlavha */
.sarlavha { text-align: center; padding: 20px 0 16px; }
.sarlavha h1 { margin: 0; font-size: 2rem; }
.chap-sarlavha { text-align: left; }
.chap-sarlavha h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
.aloqa { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--matn-2); font-size: 0.9375rem; }
.aloqa a { color: var(--urgu); }
.aloqa span, .aloqa a { display: inline-flex; align-items: center; gap: 5px; }
.orqaga { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -6px; color: var(--urgu); font-weight: 500; }

/* Jami kartasi */
.jami { margin-bottom: 16px; }
.juda-katta { font-family: var(--serif); font-size: 2rem; line-height: 1.2; margin: 2px 0 10px; }
.satrlar > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--chiziq); }
.satrlar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.satrlar .ajrat { border-top-width: 2px; }

/* Progress */
.progress { height: 6px; border-radius: 999px; background: var(--sirt-2); overflow: hidden; margin: 8px 0; }
.progress i { display: block; height: 100%; background: var(--urgu); border-radius: inherit; }

/* Filtr */
.filtr { display: flex; gap: 8px; margin: 4px 0 14px; }
.chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--chiziq); background: var(--sirt); color: var(--matn); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.chip.faol { background: var(--urgu-fon); border-color: var(--urgu); color: var(--urgu); font-weight: 500; }

/* Obyekt kartalari */
.royxat { display: grid; gap: 12px; }
@media (min-width: 720px) { .royxat { grid-template-columns: 1fr 1fr; } }
.obyekt-karta { display: block; }
.obyekt-karta:active { background: var(--sirt-2); }
.qator-bosh { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--matn-2); }
.nom { font-weight: 600; font-size: 1.0625rem; color: var(--matn); overflow-wrap: anywhere; }
.qarz-qator { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.katta { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.belgilar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.belgi { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; }
.belgi-ogoh { background: var(--urgu-fon); color: var(--urgu); }

/* Bo'limlar va yozuvlar */
.bolim { margin-top: 24px; }
.bolim-bosh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bolim-bosh h2 { margin: 0; font-size: 1.25rem; }
.yozuvlar { list-style: none; margin: 0; padding: 4px 16px; }
.yozuvlar li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--chiziq); }
.yozuvlar li:first-child { border-top: 0; }
.yozuvlar .chap { min-width: 0; overflow-wrap: anywhere; }
.yozuvlar b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.batafsil { margin-top: 10px; padding: 0 16px; }
.batafsil summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--matn-2); }
.batafsil .ichki { padding: 0; }
.bosh { color: var(--matn-2); text-align: center; padding: 28px 8px; }

/* Pastki tab-bar */
.tablar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fon); border-top: 1px solid var(--chiziq);
}
.tablar .tab {
  flex: 1; max-width: 253px; height: var(--tab-balandlik);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.75rem; color: var(--matn-2);
}
.tablar .tab.faol { color: var(--urgu); font-weight: 500; }

/* Tugmalar qatori */
.keng { width: 100%; }
.tezkor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.tezkor .tugma { padding: 0 10px; }
.tugma-xavfli { color: var(--qizil); border-color: var(--qizil); background: transparent; }
.tugma-xavfli.tasdiq { background: var(--qizil); color: #fff; border-color: transparent; }
.pastki-amallar { display: grid; gap: 10px; margin-top: 32px; }
.bosh-oraliq { margin-top: 14px; }
.maslahat { margin: 8px 4px 0; font-size: 0.8125rem; color: var(--matn-2); text-align: center; }
.mayda-yozuv { font-size: 0.8125rem; opacity: 0.8; }
.ikon-tugma {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--matn); cursor: pointer;
}
.ikon-tugma:active { background: var(--sirt-2); }
.ikon-tugma:disabled { opacity: 0.3; cursor: default; }

/* Bosiladigan yozuv satri */
.yozuvlar li.bosiladi { cursor: pointer; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.yozuvlar li.bosiladi:active { background: var(--sirt-2); }
.yozuvlar li.bosiladi:focus-visible { outline: 2px solid var(--urgu); outline-offset: -2px; }
.yozuvlar li a.chap { flex: 1; }
.kategoriya .chap { flex: 1; }
.kategoriya .progress { margin: 6px 0 2px; }

/* Davr tanlagich */
.davr-nav { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 10px; }
.davr-nav b { font-family: var(--serif); font-weight: 500; font-size: 1.125rem; }

/* Forma oynasi (bottom sheet) */
.parda { position: fixed; inset: 0; z-index: 20; background: rgba(20, 20, 19, 0.45); animation: xira 0.15s ease-out; }
.varaq {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-width: 760px; margin: 0 auto; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fon); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(20, 20, 19, 0.18);
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 16px);
  animation: kot 0.2s ease-out;
}
.varaq-bosh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.varaq-bosh h2 { margin: 0; font-size: 1.375rem; }
.varaq-bosh .ikon-tugma { margin-right: -10px; }
.varaq-matn { margin: 0 0 14px; color: var(--matn-2); overflow-wrap: anywhere; }
.maydon-qator { margin-bottom: 14px; }
.maydon-qator label { display: block; margin: 0 0 6px 2px; font-size: 0.875rem; color: var(--matn-2); }
.maydon-qator input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.chiplar { display: flex; flex-wrap: wrap; gap: 8px; }
.xato { margin: 0 0 12px; color: var(--qizil); font-size: 0.9375rem; }
.amallar { display: flex; gap: 10px; margin-top: 4px; }
.amallar .tugma { flex: 1; }
@keyframes xira { from { opacity: 0; } }
@keyframes kot { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .parda, .varaq { animation: none; } }

/* Brauzer (PWA) kirish ekrani */
.kirish { display: grid; gap: 12px; }
.kirish-matn { margin: 0; color: var(--matn-2); }
.kod-maydon { text-align: center; font-size: 1.75rem; letter-spacing: 0.4em; padding-left: calc(14px + 0.4em); font-variant-numeric: tabular-nums; }
.kirish .xato { margin: 0; text-align: center; }