/* Astatka — interfeys uslubi.
   Minimalizm: kam rang, katta tugma, aniq raqam. Ranglar ma'no bildiradi:
   sariq — e'tibor ber, qizil — to'xta, yashil — joyida. */

:root{
  --ground:#F4F5F6; --surface:#FFFFFF; --surface-2:#EAEDEF; --surface-3:#E1E5E8;
  --ink:#15191D; --ink-2:#4C5762; --ink-3:#79848F;
  --line:#DBDFE3; --line-2:#C2C8CE;
  --accent:#1D5C87; --accent-2:#164A6D; --accent-soft:#E2EDF4; --accent-line:#A9C8DC;
  --ok:#26704D; --ok-soft:#E1EFE8; --ok-line:#A6CDB8;
  --warn:#8C5D06; --warn-soft:#F6EDDB; --warn-line:#DFC189;
  --crit:#9E3A34; --crit-soft:#F6E4E2; --crit-line:#DEAFAA;
  --r:3px;
  --nav:236px;

  /* Tipografiya shkalasi — oltita pog'ona, oraliq qiymat yo'q.
     Har joyda o'z o'lchamini tanlash ekranni shovqinga aylantiradi. */
  --t1:22px;    /* sahifa sarlavhasi */
  --t2:17px;    /* bo'lim sarlavhasi */
  --t3:15px;    /* asosiy matn */
  --t4:13px;    /* ikkinchi darajali matn */
  --t5:11px;    /* yorliq va ustun nomi */
  --traqam:26px; /* katta raqam */

  /* Oraliq shkalasi — 4 ga karrali. Oradagi qiymatlar ishlatilmaydi. */
  --o1:4px; --o2:8px; --o3:12px; --o4:16px; --o5:24px; --o6:32px;

  /* Har amalning o'z rangi — bosh sahifada bir qarashda ajratish uchun.
     Juftlik: matn rangi va yumshoq foni. Yorug' mavzu. */
  --amal-ishlab:#1B7A46;      --amal-ishlab-fon:#DFF0E7;
  --amal-oqlovdan:#5C7A18;    --amal-oqlovdan-fon:#EAF1DA;
  --amal-tashqi:#0F7175;      --amal-tashqi-fon:#DCEFF0;
  --amal-mijozdan:#1668A8;    --amal-mijozdan-fon:#DEEDF8;
  --amal-boshlangich:#5A6B7C; --amal-boshlangich-fon:#E6EBEF;
  --amal-oqlovga:#B25A08;     --amal-oqlovga-fon:#FAEBDA;
  --amal-sotuv:#1D5C87;       --amal-sotuv-fon:#E2EDF4;
  --amal-qaytarish:#6D469C;   --amal-qaytarish-fon:#EAE6F7;
  --amal-qaytdi:#4B4FA6;      --amal-qaytdi-fon:#E5E6F6;
  --amal-kochirish:#6B7683;   --amal-kochirish-fon:#E9ECEF;
  --amal-sanoq:#8A6A05;       --amal-sanoq-fon:#F7EFD6;
  --amal-ortiqcha:#A63C77;    --amal-ortiqcha-fon:#F8E4EF;
  --amal-nobud:#B03A32;       --amal-nobud-fon:#F8E3E1;
  --amal-bekor:#7E2B26;       --amal-bekor-fon:#F0DAD8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mavzu="yoruq"]){
    --ground:#0E1216; --surface:#161B21; --surface-2:#1C232A; --surface-3:#242C34;
    --ink:#E4E9ED; --ink-2:#A5B0BA; --ink-3:#7A858F;
    --line:#252D35; --line-2:#36414B;
    --accent:#74B4DD; --accent-2:#8FC4E6; --accent-soft:#142735; --accent-line:#2E4557;
    --ok:#63C093; --ok-soft:#132A20; --ok-line:#2A4B39;
    --warn:#DCA748; --warn-soft:#2A2213; --warn-line:#4C3D1C;
    --crit:#E2776F; --crit-soft:#2C1A18; --crit-line:#4E2B27;

    /* Amal ranglari — qorong'i mavzu: matn yorug', fon to'q */
    --amal-ishlab:#5FC08C;      --amal-ishlab-fon:#142A1F;
    --amal-oqlovdan:#A8C55E;    --amal-oqlovdan-fon:#232A14;
    --amal-tashqi:#4FBFC4;      --amal-tashqi-fon:#122A2B;
    --amal-mijozdan:#63B0E8;    --amal-mijozdan-fon:#12252F;
    --amal-boshlangich:#9AAAB9; --amal-boshlangich-fon:#1E252B;
    --amal-oqlovga:#E8A055;     --amal-oqlovga-fon:#2C2013;
    --amal-sotuv:#74B4DD;       --amal-sotuv-fon:#142735;
    --amal-qaytarish:#AE90DC;   --amal-qaytarish-fon:#221B30;
    --amal-qaytdi:#8C90E0;      --amal-qaytdi-fon:#1B1D31;
    --amal-kochirish:#98A4B0;   --amal-kochirish-fon:#1F252A;
    --amal-sanoq:#DCBB55;       --amal-sanoq-fon:#2A2413;
    --amal-ortiqcha:#DE85B6;    --amal-ortiqcha-fon:#2C1723;
    --amal-nobud:#E58078;       --amal-nobud-fon:#2C1A18;
    --amal-bekor:#C96C64;       --amal-bekor-fon:#2A1614;
  }
}
:root[data-mavzu="qorongi"]{
  --ground:#0E1216; --surface:#161B21; --surface-2:#1C232A; --surface-3:#242C34;
  --ink:#E4E9ED; --ink-2:#A5B0BA; --ink-3:#7A858F;
  --line:#252D35; --line-2:#36414B;
  --accent:#74B4DD; --accent-2:#8FC4E6; --accent-soft:#142735; --accent-line:#2E4557;
  --ok:#63C093; --ok-soft:#132A20; --ok-line:#2A4B39;
  --warn:#DCA748; --warn-soft:#2A2213; --warn-line:#4C3D1C;
  --crit:#E2776F; --crit-soft:#2C1A18; --crit-line:#4E2B27;

  /* Amal ranglari — qorong'i mavzu: matn yorug', fon to'q */
  --amal-ishlab:#5FC08C;      --amal-ishlab-fon:#142A1F;
  --amal-oqlovdan:#A8C55E;    --amal-oqlovdan-fon:#232A14;
  --amal-tashqi:#4FBFC4;      --amal-tashqi-fon:#122A2B;
  --amal-mijozdan:#63B0E8;    --amal-mijozdan-fon:#12252F;
  --amal-boshlangich:#9AAAB9; --amal-boshlangich-fon:#1E252B;
  --amal-oqlovga:#E8A055;     --amal-oqlovga-fon:#2C2013;
  --amal-sotuv:#74B4DD;       --amal-sotuv-fon:#142735;
  --amal-qaytarish:#AE90DC;   --amal-qaytarish-fon:#221B30;
  --amal-qaytdi:#8C90E0;      --amal-qaytdi-fon:#1B1D31;
  --amal-kochirish:#98A4B0;   --amal-kochirish-fon:#1F252A;
  --amal-sanoq:#DCBB55;       --amal-sanoq-fon:#2A2413;
  --amal-ortiqcha:#DE85B6;    --amal-ortiqcha-fon:#2C1723;
  --amal-nobud:#E58078;       --amal-nobud-fon:#2C1A18;
  --amal-bekor:#C96C64;       --amal-bekor-fon:#2A1614;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t3); line-height:1.55; -webkit-font-smoothing:antialiased;
}
.mono,.raqam,code,kbd{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.raqam{font-variant-numeric:tabular-nums; white-space:nowrap}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0; line-height:1.25; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:var(--t1); font-weight:650}
h2{font-size:var(--t2); font-weight:650}
h3{font-size:var(--t3); font-weight:650}
p{margin:0 0 var(--o3)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Karkas ---------- */
.karkas{display:flex; min-height:100vh}

.yon{
  width:var(--nav); flex:none; background:var(--surface);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.logo{padding:var(--o5) var(--o5) var(--o4); border-bottom:1px solid var(--line)}
.logo b{font-size:var(--t2); letter-spacing:-.02em; display:block}
.logo span{font-size:var(--t5); color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}

.menyu{display:flex; flex-direction:column; padding:var(--o3) var(--o2); gap:1px; flex:1}
.menyu a{
  display:flex; align-items:center; gap:var(--o3); padding:var(--o2) var(--o3);
  border-radius:var(--r); color:var(--ink-2); text-decoration:none; font-size:var(--t3);
}
.menyu a:hover{background:var(--surface-2); color:var(--ink)}
.menyu a.tanlangan{background:var(--accent-soft); color:var(--accent); font-weight:600}
.menyu a .ikon{width:18px; text-align:center; flex:none; opacity:.85}
.menyu a .son{
  margin-left:auto; font-size:var(--t5); padding:1px var(--o2); border-radius:9px;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line);
  font-family:ui-monospace,Consolas,monospace;
}
.menyu .ajratgich{height:1px; background:var(--line); margin:var(--o2) var(--o3)}

.hisob{padding:var(--o3) var(--o4); border-top:1px solid var(--line); font-size:var(--t4)}
.hisob b{display:block}
.hisob span{color:var(--ink-3); font-size:var(--t5)}
.hisob .qator{display:flex; gap:var(--o3); align-items:center; justify-content:space-between; margin-top:8px}

.asosiy{flex:1; min-width:0; display:flex; flex-direction:column}
.sarlavha{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:var(--o4) var(--o5); display:flex; gap:var(--o4); align-items:center; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.sarlavha .osma{margin-left:auto; display:flex; gap:var(--o2); flex-wrap:wrap}
.ichki{padding:var(--o5) var(--o5) 80px; flex:1; max-width:1240px; width:100%}

/* ---------- Tugmalar ---------- */
.tugma{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--o2);
  min-height:40px; padding:0 var(--o4); border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-size:var(--t3); font-weight:500;
  cursor:pointer; text-decoration:none; font-family:inherit; white-space:nowrap;
}
.tugma:hover{background:var(--surface-2)}
.tugma:disabled,.tugma[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.tugma.asos{background:var(--accent); border-color:var(--accent); color:#fff}
.tugma.asos:hover{background:var(--accent-2); border-color:var(--accent-2)}
.tugma.xavf{background:var(--crit); border-color:var(--crit); color:#fff}
.tugma.yashil{background:var(--ok); border-color:var(--ok); color:#fff}
.tugma.kichik{min-height:32px; padding:0 var(--o3); font-size:var(--t4)}
.tugma.katta{min-height:48px; padding:0 var(--o5); font-size:var(--t3)}
.tugma.keng{width:100%}
.tugma.tekis{border-color:transparent; background:transparent; color:var(--ink-2)}
.tugma.tekis:hover{background:var(--surface-2); color:var(--ink)}

/* ---------- Kartochka ---------- */
.karta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--o5) var(--o5); margin-bottom:16px}
.karta > :last-child{margin-bottom:0}
.karta-bosh{display:flex; gap:var(--o3); align-items:baseline; flex-wrap:wrap; margin:0 0 var(--o4); padding:0}
.karta-bosh h2,.karta-bosh h3{margin:0}
.karta-bosh .osma{margin-left:auto; display:flex; gap:var(--o2); flex-wrap:wrap}

.setka{display:grid; gap:var(--o4); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:16px}
.setka.ikki{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Bitta formadan iborat sahifa — keng ekranda cho'zilib ketmasin */
.tor-karta{max-width:520px}

/* ---------- Yig'ma raqamlar ---------- */
.plitkalar{display:grid; gap:var(--o3); margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.plitka{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--o4)}
.plitka .nom{font-size:var(--t5); color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
.plitka .qiymat{font-size:var(--traqam); font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-family:ui-monospace,Consolas,monospace; line-height:1.15}
.plitka .qosh{font-size:var(--t4); color:var(--ink-2); margin-top:3px}
.plitka.urgu{border-left:3px solid var(--accent)}
.plitka.ogoh{border-left:3px solid var(--warn)}

/* ---------- Jadval ---------- */
.jadval-orash{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:var(--o4)}
table.jadval{border-collapse:collapse; width:100%; font-size:var(--t4)}
table.jadval th{
  text-align:left; font-size:var(--t5); letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; color:var(--ink-3); padding:var(--o3) var(--o3) var(--o2);
  border-bottom:1px solid var(--line-2); white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace;
}
table.jadval td{padding:var(--o2) var(--o3); border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle}
table.jadval td:first-child{color:var(--ink)}
table.jadval tr:last-child td{border-bottom:0}
table.jadval tbody tr:hover td{background:var(--surface-2)}
table.jadval .r{text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace,Consolas,monospace; white-space:nowrap}
table.jadval tfoot td{font-weight:650; color:var(--ink); border-top:1px solid var(--line-2); border-bottom:0}
table.jadval tr.bosiladi{cursor:pointer}
table.jadval td.ozgargan{background:var(--warn-soft)}

/* Bosiladigan qator klaviatura bilan ham ochiladi. Fokus butun qatorni
   belgilaydi: ichkaridagi bitta katak emas, qator bir butun havola.
   Ilgari bunday qatorga Tab bilan yetib ham bo'lmasdi. */
table.jadval tr[data-yol]:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px;
  background:var(--surface-2);
}
table.jadval tr[data-yol]:focus{outline:none}
table.jadval tr[data-yol]:focus-visible td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

.bosh-guruh th{border-bottom:1px solid var(--line)}

/* ---------- Yorliqlar ---------- */
.yorliq{
  display:inline-block; font-size:var(--t5); letter-spacing:.03em; padding:1px var(--o2);
  border-radius:2px; border:1px solid var(--line); background:transparent;
  color:var(--ink-2); white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace;
}
.yorliq.ok{border-color:var(--ok-line); color:var(--ok)}
.yorliq.ogoh{border-color:var(--warn-line); color:var(--warn)}
.yorliq.xavf{border-color:var(--crit-line); color:var(--crit)}
.yorliq.urgu{border-color:var(--accent-line); color:var(--accent)}
.yorliq.kul{border-color:var(--line); color:var(--ink-3)}
.yorliq.katta{font-size:var(--t4); padding:var(--o1) var(--o3)}
button.yorliq{cursor:pointer}

/* Amal belgisi — 5 ta toifa, 5 ta rang. Matnni o'qimasdan «kirdimi,
   chiqdimi, muammomi» darhol bilinadi. */
.amal-belgi{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex:none;
  font-size:var(--t3); font-weight:700; line-height:1;
}
/* Doira ichidagi chizma — 26px doiraga 15px shakl mos tushadi.
   Rangni doiradan meros qilib oladi (`currentColor`). */
.amal-belgi .ikon-svg{width:15px; height:15px; stroke-width:2.2}
.amal-belgi.katta .ikon-svg{width:19px; height:19px}

/* Toifa rangi — zaxira sifatida (amal nomi noma'lum bo'lsa) */
.amal-belgi.ok{background:var(--ok-soft); color:var(--ok)}
.amal-belgi.ogoh{background:var(--warn-soft); color:var(--warn)}
.amal-belgi.xavf{background:var(--crit-soft); color:var(--crit)}
.amal-belgi.urgu{background:var(--accent-soft); color:var(--accent)}
.amal-belgi.kul{background:var(--surface-3); color:var(--ink-3)}

/* Har amalning O'Z rangi — toifa rangidan ustun turadi */
.amal-belgi[data-ohang="ishlab"]{background:var(--amal-ishlab-fon); color:var(--amal-ishlab)}
.amal-belgi[data-ohang="oqlovdan"]{background:var(--amal-oqlovdan-fon); color:var(--amal-oqlovdan)}
.amal-belgi[data-ohang="tashqi"]{background:var(--amal-tashqi-fon); color:var(--amal-tashqi)}
.amal-belgi[data-ohang="mijozdan"]{background:var(--amal-mijozdan-fon); color:var(--amal-mijozdan)}
.amal-belgi[data-ohang="boshlangich"]{background:var(--amal-boshlangich-fon); color:var(--amal-boshlangich)}
.amal-belgi[data-ohang="oqlovga"]{background:var(--amal-oqlovga-fon); color:var(--amal-oqlovga)}
.amal-belgi[data-ohang="sotuv"]{background:var(--amal-sotuv-fon); color:var(--amal-sotuv)}
.amal-belgi[data-ohang="qaytarish"]{background:var(--amal-qaytarish-fon); color:var(--amal-qaytarish)}
.amal-belgi[data-ohang="qaytdi"]{background:var(--amal-qaytdi-fon); color:var(--amal-qaytdi)}
.amal-belgi[data-ohang="kochirish"]{background:var(--amal-kochirish-fon); color:var(--amal-kochirish)}
.amal-belgi[data-ohang="sanoq"]{background:var(--amal-sanoq-fon); color:var(--amal-sanoq)}
.amal-belgi[data-ohang="ortiqcha"]{background:var(--amal-ortiqcha-fon); color:var(--amal-ortiqcha)}
.amal-belgi[data-ohang="nobud"]{background:var(--amal-nobud-fon); color:var(--amal-nobud)}
.amal-belgi[data-ohang="bekor"]{background:var(--amal-bekor-fon); color:var(--amal-bekor)}

.amal-qator{display:flex; align-items:center; gap:var(--o2)}

/* Ranglar izohi. 13 ta amal bo'lgani uchun yig'ilgan turadi —
   ochib bir marta o'qilsa yetadi, keyin rang o'zi tanishtiradi. */
.amal-lugat-ochilma{margin-bottom:12px}
.amal-lugat-ochilma > summary{cursor:pointer; user-select:none; display:inline-block}
.amal-lugat{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--o2) var(--o4); align-items:center; margin-top:9px;
  padding:var(--o3) var(--o3); font-size:var(--t4); color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.amal-lugat .band{display:flex; align-items:center; gap:var(--o2)}
.amal-lugat .amal-belgi{width:21px; height:21px; font-size:var(--t5)}

/* ---------- Rahbar ko'rinishi ---------- */
/* Bir jumlalik xulosa — rahbar shuni o'qib ketishi mumkin */
.rahbar-xulosa{
  font-size:var(--t2); line-height:1.5; color:var(--ink); margin:0 0 var(--o5);
  padding:var(--o4) var(--o5); background:var(--surface); border:1px solid var(--line-2);
  border-left:3px solid var(--accent); border-radius:var(--r);
}
.bolim-sarlavha{margin:var(--o5) 0 var(--o3); display:flex; gap:var(--o3);
  align-items:baseline; flex-wrap:wrap}

/* Kutayotgan ishlar — sanoq emas, bosiladigan ro'yxat */
.kutayotgan{border-left:3px solid var(--warn)}
.ish-royxati{display:flex; flex-direction:column; gap:1px;
  margin:-4px -20px -18px; border-top:1px solid var(--line)}
.ish{
  display:flex; gap:var(--o3); align-items:flex-start; padding:var(--o3) var(--o5);
  text-decoration:none; color:inherit; border-bottom:1px solid var(--line);
}
.ish:hover{background:var(--surface-2)}
.ish:last-child{border-bottom:0}
.ish .belgi{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--t4); margin-top:1px;
}
.ish.qizil .belgi{background:var(--crit-soft); color:var(--crit)}
.ish.sariq .belgi{background:var(--warn-soft); color:var(--warn)}
.ish .matn{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ish .matn b{font-size:var(--t3); font-weight:600}
.ish .izoh{font-size:var(--t4); color:var(--ink-3); line-height:1.45}
.ish .oq{flex:none; color:var(--ink-3); font-size:var(--t2); margin-top:2px}
.ish:hover .oq{color:var(--accent)}
@media (max-width:700px){
  .rahbar-xulosa{font-size:var(--t3); padding:var(--o3) var(--o4)}
  .ish{padding:var(--o3) var(--o4)}
  .ish-royxati{margin:-4px -20px -18px}
}

/* ---------- Assortiment tarixi ---------- */
/* Filtr paneli — tepada yopishib turadi, chunki davr o'zgartirilganda
   pastdagi hamma raqam o'zgaradi va qayerdaligini bilish kerak. */
.tarix-filtr{
  position:sticky; top:64px; z-index:15;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); padding:var(--o3) var(--o4); margin-bottom:12px;
}
.tarix-filtr .qator{display:flex; gap:var(--o3); flex-wrap:wrap; align-items:flex-end}
.tarix-filtr .maydon{flex:1 1 190px; display:flex; flex-direction:column; gap:var(--o1)}
.tarix-filtr label{font-size:var(--t5); color:var(--ink-3)}
.sotuv-filtr{margin-top:11px; border-top:1px solid var(--line); padding-top:10px}
.sotuv-filtr > summary{cursor:pointer; user-select:none}
.sotuv-filtr > summary b{font-weight:600; color:var(--ink)}

/* «Hozir nima ko'rsatilyapti» — bir qatorda oddiy tilda */
.tarix-holati{
  font-size:var(--t4); color:var(--ink-2); margin-bottom:12px;
  display:flex; gap:var(--o2); flex-wrap:wrap; align-items:center;
}
.ajratgich-nuqta{color:var(--ink-3)}

/* Bo'limlarga o'tish — ketma-ketlik ko'rinib tursin */
.bolim-yollari{
  display:flex; gap:var(--o2); flex-wrap:wrap; margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.bolim-yollari a{
  padding:var(--o2) var(--o3); border:1px solid var(--line-2); border-radius:99px;
  font-size:var(--t4); text-decoration:none; color:var(--ink-2); background:var(--surface);
  white-space:nowrap;
}
.bolim-yollari a:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

.bolim-raqami{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--accent); color:#fff; font-size:var(--t4); font-weight:650;
  font-family:ui-monospace,Consolas,monospace;
}
.karta[id]{scroll-margin-top:110px}

.ochilma-jadval{margin-top:12px}
.ochilma-jadval > summary{cursor:pointer; user-select:none; color:var(--accent)}

@media (max-width:760px){
  .tarix-filtr{position:static}
  .tarix-filtr .maydon{flex:1 1 100%}
  .bolim-yollari{overflow-x:auto; flex-wrap:nowrap; padding-bottom:10px}
}
@media print{
  .tarix-filtr,.bolim-yollari{display:none}
  .ochilma-jadval > summary{display:none}
}

/* Grafik sarlavhasi va ulush chizig'i — assortiment tarixi uchun */
.grafik-sarlavha{display:flex; gap:var(--o3); align-items:baseline; flex-wrap:wrap; margin-bottom:6px}
.grafik-sarlavha b{margin-left:auto; font-family:ui-monospace,Consolas,monospace;
  font-variant-numeric:tabular-nums}
.ulush-chizigi{display:flex; height:14px; border-radius:2px; overflow:hidden;
  margin-bottom:14px; background:var(--surface-2)}
.ulush-chizigi .bolak{min-width:3px; background:var(--ink-3)}
.ulush-chizigi .bolak.ok{background:var(--ok)}
.ulush-chizigi .bolak.ogoh{background:var(--warn)}
.ulush-chizigi .bolak.xavf{background:var(--crit)}
.ulush-chizigi .bolak.urgu{background:var(--accent)}

/* Kunlik kirim jadvali — tizimning odatdagi «moslashuvchan» jadvali
   ustiga faqat maydon o'lchamlari qo'shiladi. Alohida ko'rinish
   yasalmaydi: keng ekranda ustunlar tekis, tor ekranda esa jadval
   o'zi bo'laklarga bo'linadi. */
.kirim-jadval td{vertical-align:top}
.kirim-jadval input.raqam-kiritish,
.kirim-jadval select{
  width:100%; min-height:42px; font-size:var(--t3);
}
.kirim-jadval input.raqam-kiritish{text-align:right}
.kirim-jadval tr.toldirilgan td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
@media (max-width:760px){
  /* Bo'lakka aylanganda maydonlar butun kenglikni egallasin */
  .kirim-jadval td{align-items:center}
  .kirim-jadval input.raqam-kiritish,
  .kirim-jadval select{max-width:190px}
  .kirim-jadval tr.toldirilgan{border-left:3px solid var(--ok)}
  .kirim-jadval tr.toldirilgan td:first-child{box-shadow:none}
}

.kirim-oyoq{
  position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line-2);
  padding:var(--o3) 0 0; display:flex; gap:var(--o4); align-items:center; flex-wrap:wrap;
}
.kirim-oyoq .jami{font-size:var(--t4); color:var(--ink-2)}
.kirim-oyoq .jami b{font-size:var(--t2); font-family:ui-monospace,Consolas,monospace;
  font-variant-numeric:tabular-nums; color:var(--ink)}
@media (max-width:700px){
  .kirim-oyoq{margin:0 -20px; padding:var(--o3) var(--o5); box-shadow:0 -6px 18px rgba(0,0,0,.10)}
  .kirim-oyoq .tugma{flex:1 1 100%}
}

/* ---------- Xabarlar ---------- */
.xabar{
  border:1px solid var(--line-2); border-left:3px solid var(--ink-3);
  background:var(--surface); border-radius:2px; padding:var(--o3) 17px; margin-bottom:16px;
  display:flex; gap:var(--o3); align-items:flex-start; flex-wrap:wrap;
}
.xabar > :last-child{margin-bottom:0}
.xabar .matn{flex:1; min-width:200px}
.xabar.ok{border-left-color:var(--ok); background:var(--ok-soft)}
.xabar.ogoh{border-left-color:var(--warn); background:var(--warn-soft)}
.xabar.xavf{border-left-color:var(--crit); background:var(--crit-soft)}
.xabar.urgu{border-left-color:var(--accent); background:var(--accent-soft)}
.xabar b{display:block; margin-bottom:2px}

/* ---------- Forma ---------- */
.forma{display:flex; flex-direction:column; gap:var(--o4)}
.maydon{display:flex; flex-direction:column; gap:var(--o1)}
.maydon > label{font-size:var(--t4); color:var(--ink-3); letter-spacing:.04em; font-weight:500}
.maydon .yordam{font-size:var(--t4); color:var(--ink-3)}
.maydon.xato input,.maydon.xato select{border-color:var(--crit)}
.maydon .xato-matn{font-size:var(--t4); color:var(--crit)}

input[type=text],input[type=password],input[type=number],input[type=date],
input[type=search],input[type=tel],select,textarea{
  width:100%; min-height:42px; padding:var(--o2) var(--o3); font-size:var(--t3);
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r); font-family:inherit;
}
input[type=number],input.raqam-kiritish{font-variant-numeric:tabular-nums; font-family:ui-monospace,Consolas,monospace}
textarea{min-height:78px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:var(--ink-3)}
input:disabled,select:disabled{background:var(--surface-2); color:var(--ink-3)}

.qator{display:flex; gap:var(--o4); flex-wrap:wrap}
.qator > *{flex:1 1 200px; min-width:0}
.tanlov{display:flex; gap:var(--o2); flex-wrap:wrap}
.tanlov label{
  display:flex; align-items:center; gap:var(--o2); padding:var(--o2) var(--o4); min-height:42px;
  border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer;
  background:var(--surface); font-size:var(--t3);
}
.tanlov label:hover{background:var(--surface-2)}
.tanlov input{margin:0; accent-color:var(--accent)}
.tanlov input:checked + span{font-weight:600}
.tanlov label:has(input:checked){border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
/* Izohli tanlov — nima farqi borligini o'qib tanlaydi */
.tanlov.keng label{align-items:flex-start; flex:1 1 260px; padding:var(--o3) var(--o4)}
.tanlov.keng label > span{display:flex; flex-direction:column; gap:2px}
.tanlov.keng label > span > .kichkina{font-weight:400; color:var(--ink-3); line-height:1.4}
.tanlov.keng label:has(input:checked) > span > .kichkina{color:var(--ink-2)}

.belgilash{display:flex; align-items:center; gap:var(--o2); font-size:var(--t3); cursor:pointer; min-height:42px}
.belgilash input{width:18px; height:18px; accent-color:var(--accent)}

.amallar{display:flex; gap:var(--o3); flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--line); margin-top:4px}

/* ---------- Filtrlar ---------- */
.filtr{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--o3) var(--o4); margin-bottom:16px; display:flex; gap:var(--o3); align-items:flex-end; flex-wrap:wrap}
.filtr .maydon{flex:0 1 190px}
.filtr .osma{margin-left:auto; display:flex; gap:var(--o2); align-items:flex-end}
.presetlar{display:flex; gap:var(--o2); flex-wrap:wrap}

/* ---------- Ombor paneli ---------- */
.panel{border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:var(--r); overflow:hidden; margin-bottom:15px}
.panel-bosh{padding:var(--o2) var(--o4); font-size:var(--t5); letter-spacing:.09em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--accent-line); font-family:ui-monospace,Consolas,monospace; display:flex; justify-content:space-between; gap:var(--o3); flex-wrap:wrap}
.panel .jadval-orash{border:0; border-radius:0; margin:0; background:transparent}
.panel table.jadval th{background:transparent}
.panel table.jadval td{border-color:var(--accent-line)}
.panel table.jadval tbody tr:hover td{background:transparent}

/* ---------- Qadoqlash quruvchisi ---------- */
.qadoq-qator{display:flex; gap:var(--o3); align-items:flex-end; flex-wrap:wrap; padding:var(--o3) 0; border-bottom:1px dashed var(--line)}
.qadoq-qator > .maydon{flex:1 1 110px}
.qadoq-qator .natija{flex:0 0 120px; text-align:right; font-family:ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; padding-bottom:10px; font-weight:600}
.qadoq-jami{display:flex; gap:var(--o4); align-items:center; flex-wrap:wrap; padding:var(--o3) 0 0; font-size:var(--t3)}
.qadoq-jami .katta{font-size:var(--t2); font-weight:650; font-family:ui-monospace,Consolas,monospace}
/* Sarlavhadagi umumiy qidiruv */
.bosh-qidiruv{display:flex; gap:var(--o2); align-items:center; flex:1 1 240px; max-width:380px}
.bosh-qidiruv input{
  flex:1; min-width:0; min-height:36px; padding:0 var(--o3); font-size:var(--t4);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--ground); color:var(--ink); font-family:inherit;
}
.bosh-qidiruv input::placeholder{color:var(--ink-3)}
.bosh-qidiruv input:focus{border-color:var(--accent); background:var(--surface)}
@media (max-width:700px){
  .bosh-qidiruv{flex:1 1 100%; max-width:none; order:3}
}

/* Kimyo: sarfdan oldingi maslahat */
.taklif-quti{border:1px solid var(--line-2); border-left:3px solid var(--accent); border-radius:var(--r); background:var(--surface-2); padding:var(--o3) var(--o4); margin-bottom:14px}
.taklif-quti.ok{border-left-color:var(--ok)}
.taklif-quti.kop{border-left-color:var(--crit)}
.taklif-quti.kam{border-left-color:var(--warn)}
.taklif-bosh{display:flex; gap:var(--o3); align-items:baseline; flex-wrap:wrap; margin-bottom:3px}
.taklif-bosh .nom{font-size:var(--t4); color:var(--ink-3)}
.taklif-bosh .raqam{font-size:var(--t1); font-weight:650; font-family:ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; margin-left:auto}
.taklif-baho{margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:var(--t4)}
.taklif-baho.ok{color:var(--ok)}
.taklif-baho.xavf{color:var(--crit)}
.taklif-baho.ogoh{color:var(--warn)}

/* Aralashtirish: bitta qopning ichi */
.qop-namuna{border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2); padding:var(--o3) var(--o4); margin-bottom:14px}
.qop-namuna-bosh{display:flex; gap:var(--o3); align-items:baseline; flex-wrap:wrap; margin-bottom:11px}
.qop-tarkib{display:flex; gap:var(--o3); align-items:center; flex-wrap:wrap}
.qop-tarkib .qoshuv{font-size:var(--t1); color:var(--ink-3); font-weight:300}
.qop-tarkib .ulush{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:var(--o2) var(--o4); min-width:104px; text-align:center}
.qop-tarkib .ulush .soni{font-weight:650; font-size:var(--t3)}
.qop-tarkib .ulush .gm{font-family:ui-monospace,Consolas,monospace; font-size:var(--t2); font-weight:650; font-variant-numeric:tabular-nums}
.qop-tarkib .natija-ulush{border-color:var(--accent); background:var(--accent-soft)}
.tarkib-qatori{padding:3px 0}
.tarkib-qatori + .tarkib-qatori{border-top:1px dashed var(--line)}

.qadoq-ochilma{border:1px solid var(--line); border-radius:var(--r); padding:var(--o3) var(--o4); background:var(--surface-2)}
.qadoq-ochilma > summary{cursor:pointer; user-select:none}
.qadoq-ochilma[open] > summary{padding-bottom:4px; border-bottom:1px solid var(--line)}

/* ---------- Modal ---------- */
.parda{position:fixed; inset:0; background:rgba(8,12,16,.55); display:flex; align-items:center; justify-content:center; padding:var(--o5); z-index:100}
.modal{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); max-width:620px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 18px 50px rgba(0,0,0,.28)}
.modal-bosh{padding:var(--o4) var(--o5); border-bottom:1px solid var(--line); display:flex; gap:var(--o4); align-items:center; background:var(--surface-2)}
.modal-bosh h2{flex:1}
.modal-ich{padding:var(--o5)}
.modal-oyoq{padding:var(--o4) var(--o5); border-top:1px solid var(--line); display:flex; gap:var(--o3); justify-content:flex-end; flex-wrap:wrap}

/* ---------- Kirish sahifasi ---------- */
.kirish-sahifa{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--o5); background:var(--ground)}
.kirish-quti{width:100%; max-width:380px}
.kirish-quti .logo{border:0; padding:0 0 var(--o5); text-align:center}
.kirish-quti .logo b{font-size:var(--traqam)}

/* ---------- Bo'sh holat ---------- */
.bosh-holat{text-align:center; padding:44px var(--o5); color:var(--ink-3)}
.bosh-holat .ikon{font-size:var(--traqam); opacity:.35; margin-bottom:10px}
/* Bo'sh holat ikoni — chizma bo'lgani uchun o'lchamni o'zimiz beramiz,
   aks holda `--traqam` shriftidan 1.5 barobar katta bo'lib ketardi. */
.bosh-holat .ikon .ikon-svg{width:38px; height:38px; stroke-width:1.4}
.bosh-holat b{display:block; color:var(--ink-2); font-size:var(--t3); margin-bottom:6px}
.bosh-holat p{max-width:380px; margin:0 auto var(--o4)}

/* ---------- Amallar menyusi ----------
   Kam ishlatiladigan amallar uchun. <details> — brauzerning o'zining
   imkoniyati: JS kerak emas, klaviatura bilan ham ochiladi. */
.amal-menyu{position:relative; display:inline-block}
.amal-menyu > summary{list-style:none; cursor:pointer; user-select:none}
.amal-menyu > summary::-webkit-details-marker{display:none}
.amal-menyu[open] > summary{background:var(--surface-2); border-color:var(--accent)}

.amal-royxat{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  min-width:290px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:var(--o2); display:flex; flex-direction:column; gap:2px;
}
.amal-royxat a{
  display:flex; flex-direction:column; gap:2px; padding:var(--o2) var(--o3);
  border-radius:var(--r); text-decoration:none; color:inherit;
}
.amal-royxat a:hover, .amal-royxat a:focus-visible{background:var(--surface-2)}
.amal-royxat a b{font-size:var(--t3); font-weight:600}
.amal-royxat a span{font-size:var(--t4); color:var(--ink-3); line-height:1.4}

@media (max-width:640px){
  .amal-menyu{position:static}
  .amal-royxat{position:static; min-width:0; max-width:none;
    box-shadow:none; margin-top:8px; width:100%}
}

/* ---------- Ulush chiziqlari ---------- */
.ulush-qator{display:flex; align-items:center; gap:var(--o3); padding:var(--o2) 0}
.ulush-nom{flex:0 0 150px; font-size:var(--t4); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ulush-chiziq{flex:1; height:12px; background:var(--surface-2);
  border-radius:6px; overflow:hidden}
.ulush-chiziq span{display:block; height:100%; border-radius:6px}
.ulush-son{flex:0 0 44px; text-align:right; font-size:var(--t4);
  font-family:ui-monospace,Consolas,monospace; color:var(--ink-2)}
@media (max-width:640px){ .ulush-nom{flex-basis:100px; font-size:var(--t4)} }

/* ---------- Rasm biriktirish ---------- */
.rasm-setka{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--o3); margin-bottom:12px}
.rasm-katak{margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.rasm-katak img{width:100%; height:120px; object-fit:cover; display:block; background:var(--surface-2)}
.rasm-katak figcaption{padding:var(--o2) var(--o2); font-size:var(--t5); display:flex; flex-direction:column; gap:2px}
.rasm-katak figcaption b{font-size:var(--t4)}
.rasm-katak figcaption .tugma{align-self:flex-start; margin-top:3px}

.rasm-yuklash{display:flex; gap:var(--o3); align-items:center; flex-wrap:wrap}
.rasm-tanla{display:inline-flex; align-items:center; gap:var(--o2); min-height:42px;
  padding:0 var(--o4); border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--surface); cursor:pointer; font-size:var(--t3); white-space:nowrap}
.rasm-tanla:hover{background:var(--surface-2); border-color:var(--accent)}
.rasm-izoh{flex:1 1 180px; min-width:0}

/* Formada allaqachon tanlangan hujjat — tanlov emas, tasdiq */
.tanlangan-hujjat{
  display:flex; align-items:center; justify-content:space-between; gap:var(--o3);
  padding:var(--o3); border:1px solid var(--accent-line);
  background:var(--accent-soft); border-radius:var(--r);
}

/* Uzun ro'yxatni filtrlash oynasi */
.royxat-qidiruv{margin-bottom:var(--o2)}

/* Formadagi ixtiyoriy maydonlar — yopiq turadi, kerak bo'lganda ochiladi.
   Maydonlar formadan chiqib ketmaydi: `details` ularni yashiradi, xolos. */
.qoshimcha{border:1px solid var(--line); border-radius:var(--r); padding:var(--o3)}
.qoshimcha > summary{cursor:pointer; list-style:none; min-height:32px;
  display:flex; align-items:center; gap:var(--o2)}
.qoshimcha > summary::-webkit-details-marker{display:none}
.qoshimcha > summary::before{content:"▸"; color:var(--ink-3); flex:none}
.qoshimcha[open] > summary::before{content:"▾"}
.qoshimcha[open]{background:var(--surface-2)}

/* Ro'yxatning davomi */
.yana{text-align:center; padding:var(--o4) 0 0}
.yana .tugma{min-width:220px; justify-content:center}
.yana p{margin:var(--o2) 0 0}

/* ---------- SVG ikonlar ---------- */
/* Emoji o'rniga: rangi matndan, o'lchami shriftdan olinadi. Shu sabab
   hamma qurilmada bir xil ko'rinadi va mavzuga moslashadi. */
.ikon-svg{
  width:1.15em; height:1.15em; flex:none; vertical-align:-.18em;
  display:inline-block;
}
.ikon-svg.katta{width:1.5em; height:1.5em}
.ikon-svg.kichik{width:1em; height:1em}
.menyu .ikon .ikon-svg,
.past-menyu .ikon .ikon-svg,
.tortma-menyu .ikon .ikon-svg{width:1.25em; height:1.25em; vertical-align:0}

/* ---------- Mavzu tugmasi ---------- */
/* Ilgari faqat «◐» belgisi turardi va nimani anglatishi bilinmasdi.
   Endi belgi bilan birga nom bor, nom esa bosilganda NIMA BO'LISHINI
   aytadi: qorong'ida turganda «Yorug'» deb turadi. */
.mavzu-tugma{gap:5px}
.mavzu-tugma .mavzu-ikon{line-height:1; display:inline-flex}
/* Quyosh ham, oy ham HTMLda turadi — JS `data-ikon` ni almashtiradi,
   CSS keraklisini ko'rsatadi. Shu sabab tugma bosilgan zahoti,
   birorta ham so'rovsiz, yangi ikonga o'tadi. */
.mavzu-ikon .ikon-oy,
.mavzu-ikon .ikon-quyosh{display:none}
.mavzu-ikon[data-ikon="oy"] .ikon-oy,
.mavzu-ikon[data-ikon="quyosh"] .ikon-quyosh{display:inline-block}

/* Sarlavhadagi joyi — o'ng chekka. Amallar tugmalaridan chiziq bilan
   ajratiladi: u sahifaga tegishli emas, butun ilovaga tegishli. */
.sarlavha-mavzu{
  margin-left:var(--o3); padding-left:var(--o4);
  border-left:1px solid var(--line-2); border-radius:0 var(--r) var(--r) 0;
  color:var(--ink-3);
}
.sarlavha-mavzu:hover{color:var(--ink)}
/* Amallar bo'lmasa ham o'ng chekkada qolsin */
.sarlavha .osma:empty + .sarlavha-mavzu{margin-left:auto; border-left:0}

@media (max-width:880px){
  /* Telefonda u ☰ Menyu ostida ham bor — sarlavhada joy egallamasin */
  .sarlavha-mavzu .mavzu-nom{display:none}
  .sarlavha-mavzu{margin-left:var(--o2); padding-left:var(--o3)}
}

/* ---------- Raqam maydonidagi hisoblagich ---------- */
/* «120*2» yozilganda natija darhol pastda ko'rinadi. Maydondan
   chiqilganda uning o'rniga 240 yoziladi — ishchi nima saqlanishini
   aniq ko'radi. */
.hisob-natija{
  margin-top:3px; font-size:var(--t4); color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,Consolas,monospace;
}
.hisob-natija.xato{color:var(--crit); font-family:inherit; font-size:var(--t5)}

/* ---------- Partiyalararo aralashish ---------- */
/* Savol oddiy tilda, javob to'liq jumla. Abstrakt maydonlar («yo'nalish»)
   o'rniga ishchi o'qiydigan gap: «OQ-0002 dan 1 000 m bu partiyaga
   qo'shilgan». Hisob esa ko'z oldida bajariladi. */
.aralashish{
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:var(--o4); margin-bottom:var(--o4); background:var(--surface-2);
}
.aralashish .savol{margin-bottom:var(--o3)}
.aralashish .savol b{display:block; margin-bottom:3px}
.aralashish-ich{margin-top:var(--o3)}

.aralashish .jumla{
  display:flex; align-items:center; gap:var(--o2); flex-wrap:wrap;
  padding:var(--o3); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:var(--o2); font-size:var(--t3);
}
.aralashish .jumla select{flex:0 1 260px; min-width:0}
.aralashish .jumla input{text-align:right}

.hisob-jadval{
  margin-top:var(--o3); padding:var(--o3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); font-variant-numeric:tabular-nums;
}
.hisob-jadval > div{
  display:flex; justify-content:space-between; gap:var(--o4);
  padding:3px 0; font-size:var(--t4);
}
.hisob-jadval > div span{color:var(--ink-2)}
.hisob-jadval .jami{
  border-top:1px solid var(--line-2); margin-top:4px; padding-top:6px;
}
.hisob-jadval .jami b{font-size:var(--t2)}
.hisob-jadval .natija{
  border-top:1px solid var(--line-2); margin-top:4px; padding-top:6px;
}
.hisob-jadval .natija b{font-size:var(--t2); color:var(--accent)}

@media (max-width:880px){
  .aralashish .jumla{flex-direction:column; align-items:stretch}
  .aralashish .jumla select,.aralashish .jumla input{max-width:none!important}
  .aralashish .jumla input{text-align:left}
}

/* ---------- Hisobot markazi (rahbar) ---------- */
/* Rahbarning vaqti kam: savol, tayyor raqam va bir jumlalik javob bitta
   kartada turadi. Jadval faqat batafsil kerak bo'lganda ochiladi. */
.davr-tanlov{display:flex; gap:var(--o2); flex-wrap:wrap; margin-bottom:16px}
.davr-tanlov .tugma{min-width:92px; justify-content:center}

.savollar{display:grid; gap:var(--o4); margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.savol-karta{
  display:flex; flex-direction:column; gap:var(--o2);
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-2);
  border-radius:var(--r); padding:var(--o5); text-decoration:none; color:var(--ink);
}
.savol-karta:hover{border-color:var(--accent-line); border-left-color:var(--accent)}
.savol-karta.ok{border-left-color:var(--ok)}
.savol-karta.ogoh{border-left-color:var(--warn)}
.savol-karta.xavf{border-left-color:var(--crit)}
.savol-karta.bosh{grid-column:span 1}

.savol-karta .savol{font-size:var(--t3); color:var(--ink-2)}
.savol-karta .javob{display:flex; align-items:baseline; gap:var(--o2); flex-wrap:wrap}
.savol-karta .raqam{
  font-size:var(--traqam); font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-family:ui-monospace,Consolas,monospace;
  line-height:1.1;
}
.savol-karta .birlik{color:var(--ink-3); font-size:var(--t4)}
.savol-karta .xulosa{margin:0; color:var(--ink-2); font-size:var(--t4); line-height:1.5}
.savol-karta .ochish{color:var(--accent); font-size:var(--t5); margin-top:auto}

/* Hisobot ichidagi savol — sahifaning birinchi qatori */
.hisobot-savol{display:flex; gap:var(--o3); align-items:baseline;
  flex-wrap:wrap; margin-bottom:16px}
.hisobot-savol h2{margin:0; font-size:var(--t1); line-height:1.3}

/* ---------- Yo'l ko'rsatkichi ---------- */
/* «Men qayerdaman va qanday orqaga qaytaman» — ichki sahifada eng ko'p
   beriladigan savol. Telefonda ayniqsa: yon menyu ko'rinmaydi. */
.yol{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--o2);
  font-size:var(--t4); margin:0 0 var(--o4);
}
.yol a{color:var(--ink-3); text-decoration:none}
.yol a:hover{color:var(--accent); text-decoration:underline}
.yol .ajratgich{color:var(--ink-3)}
.yol .hozir{color:var(--ink); font-weight:650}

/* ---------- Yordamchilar ---------- */
.kul{color:var(--ink-3)}
.kichkina{font-size:var(--t4)}
.ozgin{font-weight:400}
.qalin{font-weight:650}
.markaz{text-align:center}
.ong{text-align:right}
.oraliq{display:flex; gap:var(--o2); align-items:center; flex-wrap:wrap}
.oraliq.tik{flex-direction:column; align-items:stretch}
.yashir{display:none!important}
.uzun{white-space:normal; word-break:break-word}
hr{border:0; border-top:1px solid var(--line); margin:var(--o5) 0}
.yuklanmoqda{opacity:.5; pointer-events:none}
.htmx-request .yuk-ikon{display:inline-block}
.yuk-ikon{display:none}

/* ---------- Telefon ---------- */
/* Telefon uchun bo'laklar kompyuterda ko'rinmaydi. DIQQAT: bu yerga
   `.parda` ni qo'shib bo'lmaydi — u modal oynaning foni (535-satr) va
   butunlay boshqa narsa. Menyuning foni `.menyu-parda` deb ataladi. */
.past-menyu,.tortma,.menyu-parda,.faqat-telefon,.tez-amallar{display:none}

@media (max-width:880px){
  .yon{display:none}
  .ichki{padding:var(--o4) var(--o4) 104px}
  .sarlavha{padding:var(--o3) var(--o4); gap:var(--o2)}
  h1{font-size:var(--t2)}
  .faqat-telefon{display:inline-flex}

  /* Tezkor amallar — telefonda ish shu yerdan boshlanadi.
     Ikki ustun: to'rtta tugma bitta ekranga sig'adi, aylantirish shart
     emas. Har biri kamida 96 px balandlikda — bosh barmoq bilan
     adashmasdan bosiladi. */
  .tez-amallar{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--o3);
    margin-bottom:var(--o4);
  }
  .tez-amallar a{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    min-height:96px; padding:var(--o4); justify-content:center;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); color:var(--ink); text-decoration:none;
  }
  .tez-amallar a:active{background:var(--accent-soft); border-color:var(--accent-line)}
  .tez-amallar .ikon{font-size:26px; color:var(--accent); line-height:1}
  .tez-amallar b{font-size:var(--t3)}
  .tez-amallar .kichkina{line-height:1.25}

  /* Qidiruv oyna joy egallamasin — ⌕ tugmasi bilan ochiladi. */
  .bosh-qidiruv{display:none}
  body.qidiruv-ochiq .bosh-qidiruv{display:flex; flex:1 1 100%; order:9}

  .past-menyu{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--line-2);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .past-menyu a,.past-menyu .menyu-tugma{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:var(--o2) 3px; color:var(--ink-3); text-decoration:none; font-size:var(--t5);
    border-radius:var(--r); min-height:52px; justify-content:center;
    position:relative; text-align:center; line-height:1.15;
  }
  .past-menyu .menyu-tugma{
    background:none; border:0; font-family:inherit; cursor:pointer;
  }
  .past-menyu a.tanlangan{color:var(--accent); background:var(--accent-soft)}
  .past-menyu a .ikon,.past-menyu .menyu-tugma .ikon{font-size:var(--t2)}
  /* Oqlovda ish borligini bildiruvchi nuqta — raqam bu yerga sig'maydi. */
  .past-menyu .nuqta{
    position:absolute; top:6px; right:50%; margin-right:-15px;
    width:7px; height:7px; border-radius:50%; background:var(--warn);
  }

  /* To'liq menyu — pastki qatorga sig'magan bo'limlar uchun.

     `:not([hidden])` shart. Usiz bu qoidalar `hidden` atributini bekor
     qiladi: brauzerning o'z uslubi `[hidden]{display:none}` bo'lsa ham,
     sahifadagi `display:flex` undan kuchliroq. Natijada menyu doim ochiq
     turadi, butun ekranni to'ldiradi va bo'limga o'tilganda ham yopilmaydi
     — chunki u hech qachon yopilmagan edi. Bir marta shunday bo'lgan. */
  .menyu-parda:not([hidden]){
    display:block; position:fixed; inset:0; z-index:60;
    background:rgba(0,0,0,.45);
  }
  .tortma:not([hidden]){
    display:flex; flex-direction:column; position:fixed; z-index:61;
    left:0; right:0; bottom:0; max-height:88vh;
    background:var(--surface); border-top:1px solid var(--line-2);
    border-radius:10px 10px 0 0;
    padding:var(--o4) var(--o4) calc(var(--o4) + env(safe-area-inset-bottom));
    box-shadow:0 -12px 32px rgba(0,0,0,.25);
    animation:tortma-chiq .16s ease-out;
  }
  @keyframes tortma-chiq{from{transform:translateY(14px); opacity:.4}}
  body.menyu-ochiq{overflow:hidden}

  .tortma-bosh{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--o3); padding-bottom:var(--o3); border-bottom:1px solid var(--line);
  }
  .tortma-bosh b{display:block}
  .tortma-ogoh{
    display:block; margin-top:var(--o3); padding:var(--o3);
    background:var(--warn-soft); border:1px solid var(--warn-line);
    border-radius:var(--r); color:var(--ink); text-decoration:none;
    font-size:var(--t4);
  }
  .tortma-menyu{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--o2);
    margin:var(--o3) 0; overflow-y:auto;
  }
  .tortma-menyu a{
    display:flex; align-items:center; gap:var(--o3); min-height:52px;
    padding:var(--o2) var(--o3); border:1px solid var(--line);
    border-radius:var(--r); color:var(--ink); text-decoration:none;
    font-size:var(--t4);
  }
  .tortma-menyu a.tanlangan{
    border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent);
  }
  .tortma-menyu .ikon{font-size:var(--t2); flex:none}
  .tortma-menyu .son{
    margin-left:auto; background:var(--warn-soft); color:var(--warn);
    border-radius:999px; padding:1px 7px; font-size:var(--t5);
  }
  .tortma-past{
    display:flex; gap:var(--o2); padding-top:var(--o3);
    border-top:1px solid var(--line);
  }
  .tortma-past .tugma{flex:1; justify-content:center}

  /* Jadval telefonda kartochkaga aylanadi */
  table.jadval.moslashuvchan thead{display:none}
  table.jadval.moslashuvchan,
  table.jadval.moslashuvchan tbody,
  table.jadval.moslashuvchan tr,
  table.jadval.moslashuvchan td{display:block; width:100%}
  table.jadval.moslashuvchan tr{
    border:1px solid var(--line); border-radius:var(--r);
    margin-bottom:9px; padding:var(--o1) 0; background:var(--surface);
  }
  table.jadval.moslashuvchan td{
    border:0; display:flex; justify-content:space-between; gap:var(--o4);
    /* Tik bo'shliq qisqartirildi: kartochka 5 qatordan iborat bo'lsa,
       har qatorda 4 px yutuq ekranga yana bitta yozuv sig'diradi. */
    padding:3px var(--o3); text-align:right; min-height:26px;
    align-items:baseline;
  }
  table.jadval.moslashuvchan td::before{
    content:attr(data-nom); color:var(--ink-3); font-size:var(--t5);
    text-transform:uppercase; letter-spacing:.08em; text-align:left;
    font-family:ui-monospace,Consolas,monospace; flex:none;
  }
  /* Birinchi katak — kartochkaning sarlavhasi. Uning ustun nomi
     ko'rsatilmaydi: «Hujjat: SOT-2026-0012» emas, shunchaki raqamning
     o'zi. Nom baribir aniq va bir qator joy tejaydi. */
  table.jadval.moslashuvchan td:first-child{
    font-weight:650; color:var(--ink); border-bottom:1px solid var(--line);
    padding:var(--o2) var(--o3) 7px; margin-bottom:3px;
    display:block; text-align:left;
  }
  table.jadval.moslashuvchan td:first-child::before{display:none}
  table.jadval.moslashuvchan tr{padding:0 0 var(--o2)}
  .jadval-orash{border:0; background:transparent}
  .filtr .maydon{flex:1 1 100%}
  .filtr .osma{margin-left:0; width:100%}
  .tugma{min-height:44px}
  .modal{max-height:94vh}

  /* Barmoq uchun: maydonlar kattaroq, yonma-yon turgan qatorlar tik.
     16px dan kichik shrift iPhone da sahifani o'zi kattalashtirib
     yuboradi — kiritish maydonlari shu sabab kichraytirilmaydi. */
  input,select,textarea{min-height:46px; font-size:16px}
  input[type=checkbox],input[type=radio]{min-height:0}
  .qator{flex-direction:column; gap:var(--o3)}
  .qator > .maydon{flex:1 1 auto; width:100%}
  .setka.ikki,.setka.uch{grid-template-columns:1fr}
  .karta{padding:var(--o4)}
  .karta-bosh{flex-wrap:wrap; gap:var(--o2)}
  .amallar{flex-wrap:wrap}
  .amallar .tugma{flex:1 1 auto; justify-content:center}

  /* Uzun formada saqlash tugmasi ekrandan chiqib ketmasin: telefonda
     forma bir necha ekran bo'ladi va tugmani izlab pastga aylantirish
     kerak bo'lardi. */
  .forma .amallar,
  .amallar.yopishqoq{
    position:sticky; bottom:calc(66px + env(safe-area-inset-bottom)); z-index:20;
    background:var(--surface); padding:var(--o3) 0;
    border-top:1px solid var(--line); margin-top:var(--o4);
  }

  /* Tanlov qatorlari (radio ro'yxatlari) — bosish maydoni kattaroq */
  .tanlov label{min-height:48px}

  /* Kartochkaga aylangan jadvalda amal tugmalari bir qatorga tushsin */
  table.jadval.moslashuvchan td.r{
    justify-content:flex-end; flex-wrap:wrap; gap:var(--o2);
  }
}

/* Juda tor ekran — to'liq menyu bitta ustunga tushadi */
@media (max-width:400px){
  .tortma-menyu{grid-template-columns:1fr}
  .past-menyu a,.past-menyu .menyu-tugma{font-size:10px}
}

/* ---------- Chop etish ---------- */
@media print{
  .yon,.past-menyu,.sarlavha,.amallar,.filtr,.tugma{display:none!important}
  body{background:#fff; color:#000; font-size:var(--t5)}
  .ichki{padding:0; max-width:none}
  .karta,.jadval-orash{border:0; box-shadow:none; padding:0}
  table.jadval th{background:#eee!important; color:#000}
  table.jadval td{border-color:#ccc}
  .yorliq{border:1px solid #999}
}

/* ---------- Yorliq chop etish (qop) ---------- */
.yorliq-varaq{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--o2)}
.qop-yorliq{
  border:1.5px solid var(--ink); border-radius:2px; padding:var(--o3) var(--o3);
  display:flex; gap:var(--o3); align-items:center; background:#fff; color:#000;
  break-inside:avoid; page-break-inside:avoid;
}
.qop-yorliq img{width:88px; height:88px; flex:none}
.qop-yorliq .malumot{flex:1; min-width:0}
.qop-yorliq .kod{font-family:ui-monospace,Consolas,monospace; font-size:var(--t3); font-weight:700}
.qop-yorliq .ass{font-size:var(--t3); font-weight:650; margin:2px 0}
.qop-yorliq .olcham{font-family:ui-monospace,Consolas,monospace; font-size:var(--t4)}
@media print{.yorliq-varaq{grid-template-columns:repeat(2,1fr)}}

/* ---------- Yordamchi sinflar ----------
   Shablonlarda takrorlanadigan bir nechta qoida shu yerga yig'ildi.
   Har joyda `style="margin:10px 0 0"` yozish tizimni buzadi: oraliq
   shkalasidan chiqib ketadi va keyin bir joyda o'zgartirish imkonsiz. */
.oxirgi{margin-bottom:0 !important}
.tepa-oraliq{margin-top:var(--o3)}
.oq-oraliq{margin-bottom:var(--o4)}
.ongga{margin-left:auto}
.tekis-havola{text-decoration:none; color:inherit}
.maydon.tor{flex:0 0 auto; justify-content:flex-end}