/* ── BimStudio — ekran uslubi ─────────────────────────────────────────
   Muhandis chizma bilan ishlaydi: fon to'q, chizma yorug'. AutoCAD va Revit
   ham shunday — ko'z chizmaga qaraydi, interfeysga emas.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --fon:        #14171c;
  --panel:      #1b1f26;
  --chegara:    #2b313b;
  --matn:       #e6e9ee;
  --xira:       #96a0af;
  --asosiy:     #4d8dff;
  --devor:      #4d8dff;
  --ustun:      #ffa53d;
  --xato:       #ff6b6b;
  --ogoh:       #ffc94d;
  --yashil:     #4ecb8b;
}

* { box-sizing: border-box; }

/* `hidden` atributi HAMMA joyda ishlasin: quyida `display: grid/block` qo'ygan
   qoidalar uni jimgina bosib ketardi — yashirilgan panel ekranda qolib
   ketgan edi (2026-09-04 da ko'rildi). */
[hidden] { display: none !important; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fon);
  color: var(--matn);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* ── Sarlavha ─────────────────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--chegara);
  flex: none;
}

/* ── Chap panelni yopish tugmasi ───────────────────────────────────────────
   Kvadrat, xira: bu ish tugmasi emas, ko'rinishni boshqaradi. Kengligi
   ATAYLAB yozilgan — umumiy `button { width: 100% }` qoidasi uni butun
   sarlavha bo'ylab cho'zib yuborardi. */
.panel-tugma {
  width: 28px; height: 28px; flex: none;
  padding: 0; margin-right: -6px;
  font-size: 16px; line-height: 1;
  color: var(--xira);
}
.panel-tugma:hover { color: var(--matn); }

.belgi { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.belgi span { color: var(--asosiy); font-weight: 500; }
.yol { color: var(--xira); font-size: 13px; }
.yol .oq { color: var(--asosiy); }
.holat { margin-left: auto; color: var(--xira); font-size: 13px; }
.holat.ish { color: var(--asosiy); }
.holat.xato { color: var(--xato); }

/* ── Tuzilma ──────────────────────────────────────────────────────────── */

main { flex: 1; display: flex; min-height: 0; }

/* Panel yopilganda chizma butun enni oladi. `display: none` — kengligi 0 ga
   sirg'algan panel ichidagi jadval baribir kenglik talab qilib turardi. */
body.panel-yopiq aside { display: none; }

aside {
  width: 340px;
  flex: none;
  padding: 14px;
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--chegara);
}

.qadam { margin-bottom: 22px; }

/* ⚠️ Qadam sarlavhasi endi `<summary>` — bosilsa qadam yig'iladi
   (egasi, 2026-09-06). Ko'rinishi o'zgarmadi: o'sha raqamli belgi, o'sha
   katta harfli xira sarlavha — faqat endi bosiladigan bo'ldi. */
.qadam > summary {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--xira);
  cursor: pointer;
  list-style: none;
}
.qadam > summary::-webkit-details-marker { display: none; }
.qadam > summary:hover { color: var(--matn); }

/* Yopiq qadamda pastdagi bo'sh joy kerak emas. */
.qadam:not([open]) > summary { margin-bottom: 0; }

.qadam > summary b {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--asosiy); color: #fff;
  font-size: 12px;
  flex: none;
}

/* Holat sarlavhaning o'ng chetida: qadam yopiq bo'lsa ham ko'rinadi.
   Katta harf va kenglashtirilgan oraliq bu yerda YO'Q — bu qiymat, sarlavha
   emas. */
.qadam-xulosa {
  margin-left: auto;
  font-weight: 400; font-size: 12px;
  text-transform: none; letter-spacing: 0;
  color: var(--xira);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.qadam-xulosa.yaxshi { color: var(--yashil); }
.qadam-xulosa.xato { color: var(--xato); }
.izoh.xato { color: var(--xato); }
.qadam-xulosa.ish { color: var(--asosiy); }

/* ── Fayl yuklash ─────────────────────────────────────────────────────── */

.yuklash {
  display: grid; place-items: center; gap: 4px;
  padding: 22px 12px;
  border: 1.5px dashed var(--chegara);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.yuklash:hover, .yuklash.ustida { border-color: var(--asosiy); background: #1f2530; }
.yuklash .katta { font-weight: 600; }
.yuklash .kichik, .bosh .kichik { color: var(--xira); font-size: 12px; }

/* ── Kichraygan holat: chizma allaqachon bor ───────────────────────────────
   O'lchandi (2026-09-06): katta quti 82 px egallaydi va u panelning eng
   tepasida — ya'ni eng qimmat joyida — turadi. Chizma joylangandan keyin
   uning kerakligi kamayadi, lekin YO'QOLMAYDI: ikkinchi qavatning fayli
   ham shu yerdan qo'shiladi va fayl tashlash (drag&drop) ham shu nishonda. */
.yuklash .ixcham-matn { display: none; }
.yuklash.ixcham { padding: 8px 10px; gap: 0; border-style: solid; }
.yuklash.ixcham .katta, .yuklash.ixcham .kichik { display: none; }
.yuklash.ixcham .ixcham-matn {
  display: block; font-size: 13px; color: var(--xira);
}
.yuklash.ixcham:hover .ixcham-matn { color: var(--matn); }

.fayl-nomi { margin-top: 8px; font-size: 12px; color: var(--xira); word-break: break-all; }

/* ── AI tahlili holati ────────────────────────────────────────────────────
   Javob QACHONGI holatga tegishli ekanini aytadi. Eskirgani sariq: bu xato
   emas — javob o'sha paytda to'g'ri edi, endi ma'lumot o'zgargan. */
.tahlil-holat {
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--chegara); border-radius: 8px;
  background: #1f2530;
  font-size: 12px; line-height: 1.45; color: var(--xira);
}
.tahlil-holat.eskirdi {
  border-color: #5c4a2f;
  background: color-mix(in srgb, #ffc94d 8%, #1f2530);
  color: var(--ogoh);
}

/* ── Geologiya hisoboti ro'yxati (G3) ─────────────────────────────────────
   Har qator: nom, holat, o'chirish. Holat MATN bilan yoziladi — «12 bet ·
   34 500 belgi o'qildi» yoki «skan — OCR kerak». Rang yolg'iz o'zi yetarli
   emas: nima bo'lganini so'z aytadi. */
.hujjat-royxat { margin-top: 8px; }

.hujjat-qator {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 9px; margin-top: 6px;
  border: 1px solid var(--chegara); border-radius: 8px;
  background: #1f2530;
  font-size: 12px;
}
/* ⚠️ `min-width: 0` SHART. Usiz flex ichidagi matn o'z tabiiy kengligidan
   kichraymaydi va uzun fayl nomi qatorni cho'zib yuboradi: o'lchandi —
   panel 339 px, ichkarisi 351 px bo'lib, «×» tugmasi chetdan chiqib
   ketgan edi. Qisqaradigan qism — NOM, holat va tugma emas. */
.hujjat-qator .nom {
  min-width: 0; flex: 1;
  font-size: 13px; color: var(--matn);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hujjat-qator .holat { flex: none; color: var(--xira); white-space: nowrap; }
.hujjat-qator.oqildi .holat { color: var(--yashil); }
.hujjat-qator.oqilmadi { border-color: #5c4a2f; }
.hujjat-qator.oqilmadi .holat { color: var(--ogoh); }

/* Sabab TO'LIQ yoziladi — qisqartirilmaydi: «nega o'qilmadi?» degan savol
   nishon yorlig'ida emas, ekranda javob topsin. */
.hujjat-sabab {
  margin: 4px 0 0; padding: 0 9px;
  font-size: 12px; line-height: 1.45; color: var(--ogoh);
}

.hujjat-qator .ochir {
  width: auto; flex: none;
  padding: 2px 7px; border: none; background: none;
  color: var(--xira); font-size: 14px; line-height: 1;
}
.hujjat-qator .ochir:hover { color: var(--xato); }

/* ── Boshqaruvlar ─────────────────────────────────────────────────────── */

select, button, .yuklab {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--chegara);
  background: #232935;
  color: var(--matn);
  font: inherit;
}

button { cursor: pointer; }
button:hover { border-color: var(--asosiy); }
button:disabled { opacity: .45; cursor: default; }

.asosiy { margin-top: 12px; background: var(--asosiy); border-color: var(--asosiy); color: #fff; font-weight: 600; }
.asosiy:hover:not(:disabled) { background: #3d7df0; }

.yuklab {
  display: block; margin-top: 8px;
  text-align: center; text-decoration: none;
  color: var(--yashil); border-color: #2f4b3d;
}
.yuklab:hover { border-color: var(--yashil); }

.izoh { color: var(--xira); font-size: 12px; margin: 8px 0 0; }
.izoh b { color: var(--matn); font-weight: 600; }

/* ── Qatlam jadvali ───────────────────────────────────────────────────── */

.jadval-oynasi { max-height: 320px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--chegara); border-radius: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
  position: sticky; top: 0;
  background: #232935;
  padding: 7px 8px; text-align: left;
  color: var(--xira); font-weight: 600;
  border-bottom: 1px solid var(--chegara);
}
tbody td { padding: 6px 8px; border-bottom: 1px solid #232935; }

/* ── Chizma oynasi ────────────────────────────────────────────────────── */

.korish { flex: 1; position: relative; min-width: 0; }
/* ⚠️ `touch-action: none` — telefon uchun SHART (2026-09-09). Usiz brauzer
   barmoq harakatini o'zi oladi (sahifani suradi/zumlaydi) va tuvalning
   `touchmove` hodisasi umuman kelmaydi. */
canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
canvas.sudrash { cursor: grabbing; }

.bosh {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 6px;
  text-align: center; color: var(--xira);
  pointer-events: none;
}

.legenda {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  background: rgba(27, 31, 38, .92);
  border: 1px solid var(--chegara);
  border-radius: 8px;
  font-size: 12px;
}
/* ⚠️ Filtr TUGMALI (2026-09-05). Yoqilgan tugma O'Z RANGI bilan yoritiladi:
   ilgari ikkala holat ham kulrang edi va qaysi qatlam yoqilganini ajratib
   bo'lmasdi. Rang tugmaga `--rang` bo'lib beriladi (JS dan). */
.legenda { gap: 6px; flex-wrap: wrap; }

.legenda .qat {
  display: flex; align-items: center; gap: 7px;
  width: auto; padding: 6px 11px;
  white-space: nowrap;
  border: 1px solid #333c4a;
  border-radius: 8px;
  background: #1a1f27;
  color: #7a8595;
  font-size: 12px;
}

/* O'CHIQ: rangsiz, xira — lekin o'qiladigan holda */
.legenda .qat .nuqta {
  width: 10px; height: 10px; border-radius: 3px;
  background: #3f4756;
  display: inline-block;
}
.legenda .qat b { color: #6b7484; font-variant-numeric: tabular-nums; font-weight: 700; }

/* YOQILGAN: o'z rangi bilan yorqin */
.legenda .qat.faol {
  background: color-mix(in srgb, var(--rang) 20%, #161a21);
  border-color: var(--rang);
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rang) 35%, transparent);
}
.legenda .qat.faol .nuqta {
  background: var(--rang);
  box-shadow: 0 0 6px var(--rang);
}
.legenda .qat.faol b { color: var(--rang); }

.legenda .qat:hover { border-color: var(--rang); }

/* ⚠️ 👁 — KO'RINISH, tugmaning O'ZI — TAHRIR (egasi, 2026-09-07).
   Ko'z doim ko'rinadi (yashirish har doim kerak bo'lishi mumkin), yashirilgan
   qatlamda esa USTIDAN CHIZILADI: «bu qatlam ekranda yo'q» degani bir
   qarashda ko'rinsin — tugmaning xiraligi kifoya qilmasdi. */
.legenda .koz {
  position: relative;
  font-style: normal; font-size: 12px; line-height: 1;
  padding: 0 1px; border-radius: 4px;
  opacity: .85;
}
.legenda .koz:hover { opacity: 1; background: #2b3340; }

.legenda .qat:not(.faol) .koz { opacity: .4; }
.legenda .qat:not(.faol) .koz::after {
  content: ""; position: absolute;
  left: -1px; right: -1px; top: 50%;
  border-top: 2px solid #e6e9ee;
  transform: rotate(-20deg);
}

/* ⚠️ ✎ — HOZIR shu tur tahrirlanmoqda. Joyi DOIM band (✕ bilan bir xil
   qoida): tanlov boshqa tugmaga ko'chganda qator siljib ketmasin. */
.legenda .qalam {
  visibility: hidden;
  font-style: normal; margin-left: 1px; color: #fff;
}
.legenda .qat.tahrirEl .qalam { visibility: visible; }
.legenda .qat.tahrirEl {
  border-color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 35%, transparent);
}

/* ⚠️ «✕ hammasini o'chirish» (egasi, 2026-09-06). FAQAT tuzatish yoqilganda
   ko'rinadi: doim turgan ✕ — tasodifan bosiladigan mina. Qizil ham faqat
   kursor ostida, aks holda filtr qatori ogohlantirishga to'lib ketardi. */
.legenda .hamma { display: none; }

.legenda.tahrirda .hamma {
  display: inline-block;
  /* ⚠️ JOYI DOIM BAND, lekin ko'rinishi rejimga bog'liq: `display: none` bilan
     almashtirilsa, ➕ dan ➖ ga o'tishda filtr tugmalari 30 px ga siljib
     ketardi va endigina bosmoqchi bo'lgan tugma qo'l ostidan qochardi. */
  visibility: hidden; pointer-events: none;
  margin-left: 3px; padding: 0 5px;
  border-radius: 5px;
  font-style: normal; font-weight: 700; line-height: 16px;
  color: #6b7484;
}

.legenda.tahrirda.ochirmumkin .hamma { visibility: visible; pointer-events: auto; }

.legenda.tahrirda.ochirmumkin .hamma:hover { background: #ef5350; color: #fff; }

.legenda #moslash { width: auto; padding: 6px 11px; font-size: 12px; }

/* 📏 o'lchagich — moslash bilan bir ko'rinishda; yoqilganda sariq */
.legenda #olchagichTugma { width: auto; padding: 6px 11px; font-size: 12px; }
.legenda #olchagichTugma.faol { border-color: #f5c542; color: #f5c542; }
canvas.olchash { cursor: crosshair; }

/* ⚠️ QO'SHISH / O'CHIRISH rejimi (egasi, 2026-09-06). Rejim BIR QARASHDA
   ko'rinishi kerak: o'chirish yoqilganda tugma QIZIL yonadi va tuval
   kursori ham o'zgaradi — odam «bilmay o'chirib yubormasin». */
#tahrirAmal { display: inline-flex; gap: 4px; margin-left: 6px; }
#tahrirAmal[hidden] { display: none; }
#tahrirAmal button {
  background: var(--panel); color: var(--xira);
  border: 1px solid var(--chegara); border-radius: 6px;
  padding: 5px 9px; font-size: 12px; cursor: pointer;
  width: auto;
}
#tahrirAmal button[data-amal="qosh"].faol {
  background: color-mix(in srgb, #66bb6a 22%, #161a21);
  border-color: #66bb6a; color: #fff;
}
#tahrirAmal button[data-amal="ochir"].faol {
  background: color-mix(in srgb, #ef5350 26%, #161a21);
  border-color: #ef5350; color: #fff;
}

/* O'chirish rejimida butun qator qizil hoshiya oladi — rejim jonli ekani
   tugmadan tashqari PANELDAN ham ko'rinsin. */
.tahrir.ochirishda { border-color: #ef5350; }


/* Proyom turi — element tugmalari bilan bir ko'rinishda, lekin sariq:
   bu «qaysi element» emas, «qaysi TUR» degan ikkinchi darajali tanlov. */
#proyomTuri { display: inline-flex; gap: 4px; margin-left: 6px; }
#proyomTuri[hidden] { display: none; }
#proyomTuri button {
  background: var(--panel); color: var(--xira);
  border: 1px solid var(--chegara); border-radius: 6px;
  padding: 5px 9px; font-size: 12px; cursor: pointer;
}
#proyomTuri button.faol { color: #ffd54f; border-color: #ffd54f; }

.sanoq {
  /* ⚠️ EGASINING SO'ROVI (2026-09-06): jadval qatlam tugmalari ustiga
     chiqib qolardi. Avval qat'iy 58px qilingan edi — tor oynada tugmalar
     IKKI qatorga o'ralib baribir bosilib qoldi. Endi `top` ni JS beradi
     (`sanoqJoylash`): legendaning haqiqiy pastidan +8px. Bu qiymat faqat
     zaxira. */
  position: absolute; right: 12px; top: 108px;
  min-width: 210px;
  padding: 10px 12px;
  background: rgba(27, 31, 38, .95);
  border: 1px solid var(--chegara);
  border-radius: 8px;
  font-size: 12px;
}
.sanoq.yopiq { min-width: 0; }
.sanoq.yopiq .sanoq-ich { display: none; }
.sanoq.yopiq .bosh-qator { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* panel yig'ish tugmasi — sanoq va muammolar sarlavhasida bir xil */
.panel-yig {
  background: none; border: none; color: var(--xira);
  font-size: 12px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.panel-yig:hover { color: var(--rang); }
.sanoq div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
/* ⚠️ `.sanoq div` yuqoridagi qoidasi O'RAM divga ham tegadi (`.sanoq-ich`) —
   usiz qatorlar yonma-yon bitta chiziqqa yoyilib ketadi (2026-09-06 da
   ko'rildi). O'ramning o'zi oddiy blok bo'lishi shart. */
.sanoq .sanoq-ich { display: block; padding: 0; }

/* ⚠️ O'LCHAMLAR RO'YXATI (2026-09-06). `display: block` SHART — yuqoridagi
   `.sanoq div` qoidasi o'ramni ham flex qilib, 19 ta qalinlikni bitta uzun
   qatorga yoyib yuborardi (ekranda ko'rildi). `.sanoq-ich` dagi bilan bir
   xil tuzoq. */
.sanoq .olchamlar { display: block; padding: 0 0 4px 10px; }
.sanoq .olchamlar div { padding: 1px 0; color: var(--xira); font-size: 11px; }
.sanoq .olchamlar b { color: #9aa4b4; font-weight: 600; }

/* ⚠️ Chizmada 19 xil qalinlik chiqishi mumkin — jadval ekrandan tushib
   ketmasin. */
.sanoq .sanoq-ich { max-height: calc(100vh - 240px); overflow-y: auto; }
.sanoq div.bosh-qator { border-bottom: 1px solid var(--chegara); margin-bottom: 4px; padding-bottom: 5px; color: var(--xira); white-space: nowrap; }
.sanoq b { font-variant-numeric: tabular-nums; }
.sanoq .yaxshi { color: var(--yashil); }
.sanoq .ogoh { color: var(--ogoh); }

/* ── Muammolar ────────────────────────────────────────────────────────── */

.muammolar {
  flex: none;
  max-height: 22vh; overflow-y: auto;
  padding: 6px 16px 10px;
  background: var(--panel);
  border-top: 1px solid var(--chegara);
  font-size: 13px;
}
/* Yig'ilganda faqat sarlavha qatori qoladi — «2 OGOH · 5 INFO ▸» */
.muammolar.yopiq .muammo-ich { display: none; }
.muammo-bosh {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--xira); padding: 2px 0;
  white-space: nowrap;              /* «2 OGOH · 6 INFO» bir qatorda tursin */
}
.muammo-bosh .m-xato { color: var(--xato); font-weight: 700; }
.muammo-bosh .m-ogoh { color: var(--ogoh); font-weight: 700; }
.muammo-bosh .m-info { color: var(--xira); }
.muammo { display: flex; gap: 8px; padding: 3px 0; }
.muammo .tamg-a { flex: none; font-weight: 700; font-size: 11px; padding-top: 2px; }
.muammo.error   .tamg-a { color: var(--xato); }
.muammo.warning .tamg-a { color: var(--ogoh); }
.muammo.info    .tamg-a { color: var(--xira); }

/* ── Faza 2: qavatlar, bino ma'lumotlari ──────────────────────────────── */

.fayl-royxat { margin-top: 8px; }
.fayl-qator { display: flex; flex-direction: column; padding: 5px 0; border-bottom: 1px solid #232935; font-size: 12px; }
.fayl-qator .kichik { color: var(--xira); font-size: 11px; }

.tugma-qator { display: flex; gap: 8px; margin-top: 8px; }
.tugma-qator button { flex: 1; font-size: 12px; padding: 7px 6px; }

.belgili { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; cursor: pointer; }
.belgili input { width: auto; }

.qaysi { color: var(--asosiy); text-transform: none; letter-spacing: 0; font-weight: 500; }

#qavatlar td { padding: 3px 4px; }
#qavatlar input, #qavatlar select {
  width: 100%; padding: 4px 5px; font-size: 12px;
  background: #1b1f26; border: 1px solid transparent; border-radius: 5px; color: var(--matn);
}
#qavatlar input:focus, #qavatlar select:focus { border-color: var(--asosiy); outline: none; }
#qavatlar tr.tanlangan { background: #23303f; }
#qavatlar tr.tanlangan td:first-child { box-shadow: inset 3px 0 0 var(--asosiy); }
#qavatlar th.son, #qavatlar td.son { width: 70px; text-align: left; }
#qavatlar .ochir { width: 24px; padding: 2px; background: none; border: none; color: var(--xira); font-size: 15px; }
#qavatlar .ochir:hover { color: var(--xato); }


.maydon { display: block; margin-top: 10px; font-size: 12px; color: var(--xira); }
.maydon select, .maydon input { margin-top: 4px; color: var(--matn); }
.maydon select:disabled, .maydon input:disabled { opacity: .55; }
.qulf {
  margin-left: 6px; padding: 1px 6px; border-radius: 10px;
  background: #3a3320; color: var(--ogoh); font-size: 10px;
}

.meyor {
  margin-top: 14px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--chegara);
  font-size: 12px; line-height: 1.5; white-space: pre-line;
}
.meyor.yaxshi { background: #16261c; border-color: #2f5c3d; color: #b8e6c8; }
.meyor.ogoh   { background: #2a2415; border-color: #5c4c1f; color: #f0dca8; }
.meyor.xato   { background: #2a1818; border-color: #5c2f2f; color: #f5b8b8; }
.meyor.yoq    { background: #1f242d; color: var(--xira); }

/* Qavat tablari — chizma ustida */
.qavat-tablar {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 7px 9px;
  background: rgba(27, 31, 38, .92);
  border: 1px solid var(--chegara);
  border-radius: 8px;
}
.qavat-tablar .tab {
  width: auto; padding: 4px 12px; font-size: 12px;
  background: #232935; border-radius: 6px;
}
.qavat-tablar .tab.faol { background: var(--asosiy); border-color: var(--asosiy); color: #fff; }

/* ── Faza 3: jamoa paneli ─────────────────────────────────────────────── */

.jamoa-tugma {
  width: auto; margin-left: 12px; padding: 5px 12px;
  font-size: 12px; background: #232935;
}
.jamoa-tugma.faol { background: var(--asosiy); border-color: var(--asosiy); color: #fff; }

/* ── Chiqish tugmasi (o'ng tepa) ───────────────────────────────────────────
   XIRA va tashqarida: bu ish tugmasi emas. `Jamoa` bilan yonma-yon tursa
   ham, rangi bilan ajralib turadi — chunki tasodifan bosilishi qimmat
   (odam qayta kirishi, telegram tasdig'i bilan qaytishi kerak bo'ladi). */
.chiq-tugma {
  width: auto; margin-left: 8px; padding: 5px 12px;
  font-size: 12px;
  background: none; color: var(--xira);
  border: 1px solid var(--chegara);
}
.chiq-tugma:hover { color: var(--xato); border-color: var(--xato); }

.jamoa {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; z-index: 20;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--chegara);
  box-shadow: -12px 0 30px rgba(0, 0, 0, .35);
}

/* Panel scroll bo'lgani uchun elementlar siqilib ketmasin: matn maydoni
   3 qatorga mo'ljallangan, flex uni 1 qatorga bosib qo'yardi. */
.jamoa > * { flex: none; }

.jamoa-bosh { display: flex; align-items: center; justify-content: space-between; }
.jamoa-bosh b { font-size: 15px; }
.jamoa-bosh button { width: 26px; padding: 0; background: none; border: none; color: var(--xira); font-size: 20px; }
.jamoa-bosh button:hover { color: var(--matn); }

.jamoa-holat { font-size: 11px; color: var(--xira); line-height: 1.5; }
.jamoa-holat b { color: var(--matn); }
.jamoa-holat .yoq { color: var(--ogoh); }
.jamoa-holat .bor { color: var(--yashil); }

.rollar { display: flex; flex-wrap: wrap; gap: 6px; }
.rollar .rol {
  width: auto; padding: 5px 11px; font-size: 12px;
  background: #232935; border-radius: 14px;
}
.rollar .rol.faol { background: var(--asosiy); border-color: var(--asosiy); color: #fff; }
.rol-izoh { font-size: 11px; color: var(--xira); line-height: 1.5; min-height: 30px; }

.jamoa textarea {
  width: 100%; padding: 9px 10px; resize: vertical;
  background: #232935; color: var(--matn);
  border: 1px solid var(--chegara); border-radius: 8px;
  font: inherit; font-size: 13px;
}
.jamoa textarea:focus { border-color: var(--asosiy); outline: none; }
.jamoa textarea { min-height: 78px; }

/* Kalitsiz «So'rash» o'chiq turadi — sababi tepadagi holat qatorida yozilgan. */
#sora:disabled { background: #2b3444; border-color: var(--chegara); color: var(--xira); }

.javob {
  padding: 11px 12px; border-radius: 8px;
  background: #1f2530; border: 1px solid var(--chegara);
  font-size: 13px; line-height: 1.55; white-space: pre-wrap;
}

.manbalar { font-size: 11px; }
.manbalar .sarlavha { color: var(--xira); margin-bottom: 5px; }
.manbalar details {
  margin-bottom: 5px; padding: 6px 9px;
  background: #1c222c; border: 1px solid var(--chegara); border-radius: 7px;
}
.manbalar summary { cursor: pointer; color: var(--yashil); }
.manbalar pre {
  margin: 6px 0 0; padding: 7px; max-height: 190px; overflow: auto;
  background: #14171c; border-radius: 5px;
  font-size: 11px; white-space: pre-wrap; word-break: break-word; color: var(--xira);
}

.ajratgich {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--chegara);
  font-size: 12px; font-weight: 600;
}
.ajratgich span { color: var(--yashil); font-weight: 400; font-size: 11px; }

.qidiruv-qator { display: flex; gap: 6px; }
.qidiruv-qator input { flex: 1; padding: 8px 10px; background: #232935; color: var(--matn); border: 1px solid var(--chegara); border-radius: 8px; font: inherit; font-size: 13px; }
.qidiruv-qator button { width: auto; padding: 8px 14px; font-size: 12px; }

.normalar .topilma { padding: 8px 0; border-bottom: 1px solid #232935; font-size: 12px; }
.normalar .manba { color: var(--asosiy); font-size: 11px; }
.normalar .parcha { color: var(--xira); font-size: 11px; line-height: 1.5; max-height: 96px; overflow: hidden; margin-top: 3px; }

/* ── Faza 3.5: tanish quvuri ──────────────────────────────────────────── */

.manba-ustun { width: 74px; text-align: center; }
.tanish { font-size: 11px; color: var(--xira); }
.tanish.quvur { color: var(--yashil); }
.tanish.ish { color: var(--asosiy); }
.tanish.xato { color: var(--ogoh); }

.izoh.yashil { color: #b8e6c8; }
.izoh.yashil b { color: var(--yashil); }

#quvurQayta { margin-top: 10px; font-size: 12px; }

.xabar {
  margin-bottom: 10px; padding: 8px 10px;
  background: #2a2415; border: 1px solid #5c4c1f; border-radius: 8px;
  color: #f0dca8; font-size: 12px; line-height: 1.5;
}

/* ── 3-qadam «Tanish» — qatlam jadvali o'rniga (2026-09-05) ───────────── */
/*
   ⚠️ Qatlam tanlash jadvalining uslublari OLIB TASHLANDI. Ekranda endi
      tanlanadigan qatlam yo'q: chizmani skript quvuri taniydi.
*/

.tanish-holat { margin-bottom: 10px; }

.tanish-qator {
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--chegara); background: #1f2530;
  font-size: 13px;
}
.tanish-qator.yaxshi { background: #16261c; border-color: #2f5c3d; color: #b8e6c8; }
.tanish-qator.ish    { background: #1b2635; border-color: #2f4a6b; color: #bcd6f5; }
.tanish-qator.xato   { background: #2a1818; border-color: #5c2f2f; color: #f5b8b8; }

.tanish-sanoq {
  display: flex; justify-content: space-between;
  padding: 5px 11px; font-size: 12px; color: var(--xira);
  border-bottom: 1px solid #232935;
}
.tanish-sanoq b { color: var(--matn); font-variant-numeric: tabular-nums; }
/* Geometriya hali kelmagan holat: qator bor, lekin RAQAM emas — o'rniga
   nima kutilayotgani yoziladi. Xira, chunki bu sanoq emas, izoh. */
.tanish-sanoq.xira b { color: var(--xira); font-weight: 400; }

/* ── Yig'iladigan guruh (4-qadam) ──────────────────────────────────────────
   `<details>` ATAYLAB — o'z ochilishi brauzernikida, klaviatura bilan ham
   ishlaydi va JS siz ham ochiladi. Sarlavhada hozirgi qiymatlar qisqa
   yozilib turadi: guruh yopiq bo'lsa ham «nima qo'yilgan?» degan savolga
   ochmasdan javob beradi. */
details.guruh {
  margin-top: 10px;
  border: 1px solid var(--chegara);
  border-radius: 8px;
  background: #1f2530;
}
details.guruh > summary {
  padding: 9px 11px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  list-style: none;
  display: flex; align-items: baseline; gap: 8px;
}
details.guruh > summary::-webkit-details-marker { display: none; }
/* O'z belgisi: yopiqda ›, ochiqda ⌄ — panel tugmasi bilan bir tilda. */
details.guruh > summary::before {
  content: "\203a";
  color: var(--xira);
  transition: transform .12s;
}
details.guruh[open] > summary::before { transform: rotate(90deg); }
details.guruh > summary:hover { color: var(--asosiy); }

/* ⚠️ Sarlavha nomi ALOHIDA `span` da: flex ichidagi yalang'och matnni CSS
   bilan ushlab bo'lmaydi va u ikki qatorga o'ralib ketardi («Model» /
   «o'lchamlari» — skrinshotda ko'rildi). Nom o'ralmaydi, qisqaradigan
   qism — xulosa. */
/* ⚠️ `> summary >` ATAYLAB. Ilgari bu `details.guruh .nom` edi va guruh
   ICHIDAGI har qanday `.nom` ga ham tegardi — geologiya hujjati qatoridagi
   fayl nomi ham `flex: none` bo'lib qoldi va qisqarmay panelni cho'zdi
   (o'lchandi: panel 339 px, ichkarisi 351 px, «×» tugmasi chetdan chiqdi). */
details.guruh > summary > .nom { flex: none; white-space: nowrap; }

details.guruh .xulosa {
  margin-left: auto; min-width: 0;
  font-weight: 400; font-size: 12px; color: var(--xira);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ichki maydonlar — ramka ichida, biroz chekinib. */
details.guruh > *:not(summary) { margin-left: 11px; margin-right: 11px; }
details.guruh > *:last-child { margin-bottom: 11px; }
details.guruh .guruh-sarlavha { margin-top: 14px; }

/* Proyom o'lchamlari — uch maydon yonma-yon */
.guruh-sarlavha {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--chegara);
  font-size: 12px; font-weight: 600;
}
/* ⚠️ BITTA USTUN (egasi, 2026-09-06: «podokonnik… — panelga sig'magan,
   1 ustun qilib qo'ygin»). Ilgari uch maydon yonma-yon turardi va 340 px
   panelda ular joyiga zo'rg'a sig'ardi; guruh ramkasi ichiga kirgach
   (11 px chekinish x 2) esa «Podokonnik» va «Poydevor qalinligi»
   panelning o'ng chetidan chiqib ketdi — skrinshotda ko'rildi.
   Endi ustma-ust: nomi ham to'liq ko'rinadi, qiymati ham. */
.uch-maydon { display: grid; gap: 8px; }

/* Guruhlangan xabar — ochib to'liq ro'yxatini ko'rish mumkin */
.muammo details summary { cursor: pointer; }
.muammo details summary b { color: var(--xira); font-weight: 600; }
.muammo details ul { margin: 6px 0 0 18px; padding: 0; color: var(--xira); font-size: 12px; }
.muammo details li { padding: 1px 0; }

/* ── Boshlanish ekrani: loyihalar ─────────────────────────────────────── */

.bosh-ekran {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: var(--fon);
}

.bosh-quti {
  width: 560px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px;
  background: var(--panel);
  border: 1px solid var(--chegara);
  border-radius: 14px;
}

.bosh-sarlavha { display: flex; align-items: baseline; gap: 10px; }
.bosh-sarlavha b { font-size: 19px; }
.bosh-sarlavha span { color: var(--xira); font-size: 13px; }

.yangi-loyiha { display: flex; gap: 8px; }
.yangi-loyiha input {
  flex: 1; padding: 10px 12px;
  background: #232935; border: 1px solid var(--chegara); border-radius: 8px;
  color: var(--matn); font: inherit;
}
.yangi-loyiha input:focus { border-color: var(--asosiy); outline: none; }
.yangi-loyiha .asosiy { width: auto; margin: 0; padding: 10px 16px; }

.loyiha-royxat { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.loyiha-qator {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  width: 100%; padding: 11px 13px; text-align: left;
  background: #1f2530; border: 1px solid var(--chegara); border-radius: 9px;
}
.loyiha-qator:hover { border-color: var(--asosiy); background: #232b39; }
.loyiha-qator .nom { font-size: 14px; font-weight: 600; }
.loyiha-qator .tafsil { font-size: 11px; color: var(--xira); }

.bosh-izoh { padding: 18px; text-align: center; color: var(--xira); font-size: 13px; }
.ildiz-izoh { font-size: 11px; color: var(--xira); word-break: break-all; }

.loyiha-tugma {
  width: auto; margin-left: 14px; padding: 5px 12px;
  background: #232935; font-size: 12px; color: var(--matn);
}
.loyiha-tugma:hover { border-color: var(--asosiy); }

/* ── TUZATISH paneli ───────────────────────────────────────────────────────
   PASTKI CHAPDA turadi. Yuqori chapda filtr legendasi (ikki qatorga
   yoyiladi), yuqori o'ngda «bino yig'ildi» sanog'i — o'lchandi: 1440 px da
   ikkalasi ham to'liq enni egallaydi va panel ustma-ust tushardi. */
/* ⚠️ PASTKI USTUN (egasi, 2026-09-06: «pasdagi izoh tugmalarni to'sib
   qo'yyabdi»). Uch panel — tuzatish qatori, sariq izoh va ramka tanlovi —
   ilgari har biri alohida `bottom: NNpx` bilan turardi. Tuzatish qatori
   o'ralib ikki qator bo'lganda izoh uning ustiga chiqib, tugmalarni bosib
   bo'lmay qolardi. Endi ular BITTA ustunda: balandligi qanday bo'lsa ham,
   ustma-ust tushmaydi.
   `pointer-events` — ustunning bo'sh joyi chizmani to'smasligi uchun:
   quti tugmalardan keng bo'lsa ham, sichqoncha undan O'TIB ketadi. */
.tahrir-past {
  position: absolute; bottom: 12px; left: 12px;
  display: flex; flex-direction: column-reverse;  /* tuzatish qatori — eng pastda */
  align-items: flex-start; gap: 6px;
  max-width: calc(100% - 250px);
  pointer-events: none;
}
.tahrir-past > * { pointer-events: auto; }

.tahrir {
  display: flex; align-items: center; gap: 6px;

  /* ⚠️ O'RALADI (2026-09-06). Qator uzayib bordi (o'lchash · tuzatish ·
     chizish · 6 element · proyom turi) va oxirgi tugmalar o'ng tomondagi
     sanoq jadvali ostiga kirib ketardi — «🪟 deraza» ni bosib bo'lmasdi.
     O'ng ustunga 250px joy qoldiriladi, sig'magani pastki qatorga tushadi. */
  flex-wrap: wrap;
  max-width: 100%;
  padding: 8px 10px;
  background: rgba(27, 31, 38, .92);
  border: 1px solid var(--chegara);
  border-radius: 8px;
  font-size: 12px;
}

.tahrir button {
  width: auto; padding: 6px 11px; font-size: 12px;
  border: 1px solid #333c4a; border-radius: 8px;
  background: #1a1f27; color: #7a8595;
}

.tahrir button:hover { border-color: #4d8dff; color: #cfd6e2; }

/* Yoqilgan holat: rejim jonli ekani BIR QARASHDA ko'rinsin — odam bilmasdan
   devor o'chirib yubormasligi kerak. */
.tahrir button.faol {
  background: color-mix(in srgb, #4d8dff 22%, #161a21);
  border-color: #4d8dff; color: #fff;
}

.tahrir .tahrir-son { color: #ffd54f; font-variant-numeric: tabular-nums; }

.tahrir-izoh {
  max-width: 420px; padding: 7px 10px;
  background: rgba(27, 31, 38, .95);
  border: 1px solid var(--chegara); border-left: 3px solid #ffd54f;
  border-radius: 6px;
  color: #cfd6e2; font-size: 12px; line-height: 1.45;
}

/* Tuzatish rejimida nishon ko'rinsin — kursor «nishon oluvchi» bo'ladi */
#tuval.tahrirda { cursor: crosshair; }

/* ⚠️ Chizish rejimi boshqa nishoncha bilan: odam qaysi rejimda ekanini
   tugmadan tashqari KURSORDAN ham ko'rsin (sudrash boshqacha ishlaydi). */
#tuval.chizishda { cursor: cell; }


/* «Yangilash kerak» tugmasi — sariq: bu ogohlantirish, oddiy amal emas.
   Xona va proyom tuzatilgan devorlardan qayta hisoblanmaguncha eski qoladi. */
.tahrir button.ogoh {
  border-color: #ffd54f;
  color: #ffd54f;
  background: color-mix(in srgb, #ffd54f 12%, #161a21);
}
.tahrir button.ogoh:hover { color: #fff; background: color-mix(in srgb, #ffd54f 26%, #161a21); }

/* ── «Binoni yig'ish» panel pastida yopishib turadi ────────────────────────
   O'lchandi (2026-09-05 qulaylik o'lchovi): chap panel 1836 px, ko'rinadigan
   qismi 849 px = 2,2 ekran. Asosiy tugmani topish uchun skroll qilish kerak
   edi — odam «endi nima bosaman?» deb qolardi. */
#qadam5 {
  position: sticky;
  bottom: -14px;                 /* `aside` ning padding'i 14 px */
  margin-bottom: 0;
  padding: 10px 0 14px;
  background: var(--panel);
  border-top: 1px solid var(--chegara);
}

/* ── Tor ekran (telefon) ───────────────────────────────────────────────────
   ⚠️ 2026-09-09: ilgari bu yerda 1024 px dan tor ekranni butunlay YOPADIGAN
      parda turardi («BimStudio kompyuter uchun»). Egasi olib tashlashni
      so'radi: «telefondan ham kira olishsin». Endi parda o'rniga
      MOSLASHUV — chizmaga joy bo'shatiladi.

   Muammo o'lchangan edi (2026-09-05): 375 px enda chap panel 340 px joy
   olib, tuvalga 35 px (ekranning 7%) qolardi. Yechim — tor ekranda panel
   chizma yonida emas, USTIDA turadi (surилma qatlam) va yopilganda tuval
   butun enni oladi. */
@media (max-width: 900px) {
  aside {
    position: fixed; top: 47px; left: 0; bottom: 0; z-index: 30;
    width: min(88vw, 340px);
    box-shadow: 0 0 24px rgba(0, 0, 0, .55);
  }

  /* Panel yopiq holatda tuval butun ekranni oladi — `body.panel-yopiq aside`
     qoidasi (yuqorida) uni allaqachon `display:none` qiladi. */

  /* ⚠️ SARLAVHA TOSHIB KETADI. O'lchandi (375 px): belgi + yo'l + loyiha
     tugmasi + holat + Jamoa + Chiqish = ~640 px kerak, ya'ni elementlar
     bir-birining USTIGA chiqib ketardi. Telefonda faqat harakat uchun
     kerakli narsa qoladi — tushuntirish matnlari olib tashlanadi. */
  header { gap: 6px; padding: 7px 8px; flex-wrap: nowrap; }
  header .yol,                        /* «DXF chizma → Revit modeli» */
  header .holat { display: none; }    /* «…chizma yuklang» — uzun matn */

  .belgi { font-size: 14px; flex: none; }
  .loyiha-tugma {
    min-width: 0; flex: 1;            /* qolgan joyni oladi, siqiladi */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .jamoa-tugma, .chiq-tugma {
    flex: none; margin-left: 0; padding: 5px 8px; font-size: 11px;
  }

  /* Jamoa paneli telefonda butun enni oladi — 400 px ekranga sig'maydi. */
  .jamoa { width: 100%; }
}

/* ── Ramka tanlovi: nechta topilgani + tasdiq ─────────────────────────────── */
.tahrir-tanlov {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(27, 31, 38, .96);
  border: 1px solid var(--chegara);
  border-left: 3px solid #4d8dff;
  border-radius: 8px;
  font-size: 12px; color: #cfd6e2;
}

.tahrir-tanlov button {
  width: auto; padding: 6px 11px; font-size: 12px;
  border: 1px solid #333c4a; border-radius: 8px;
  background: #1a1f27; color: #cfd6e2;
}
.tahrir-tanlov button:hover { border-color: #66bb6a; color: #fff; }
.tahrir-tanlov button.ochir:hover { border-color: #ef5350; }

/* Hisobotdan kelgan taklif — ko'k, chunki bu XATO emas va ish ham emas:
   odam tasdiqlashi kerak bo'lgan ma'lumot. */
.geo-taklif {
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid #35506b; border-radius: 8px;
  background: #1b2430;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.5;
}
.geo-taklif .geo-matn { flex: 1; min-width: 0; color: var(--matn); }
.geo-taklif .geo-qoy {
  width: auto; flex: none; padding: 4px 12px;
  font-size: 12px; border-radius: 6px;
}
/* Dalil — hisobotdagi ASL jumla. Kichik va xira, lekin YASHIRILMAYDI. */
.geo-taklif .geo-dalil {
  flex-basis: 100%; margin: 0;
  font-size: 11px; line-height: 1.45; color: var(--xira);
}