:root{
  --fon:#f1f5f4; --karta:#ffffff; --karta2:#f8fafa;
  --matn:#0f1a17; --xira:#5b6b66; --chegara:#dde5e2;
  --yashil:#15803d; --yashil-och:#dcfce7; --yashil-tund:#14532d;
  --qizil:#dc2626; --qizil-och:#fee2e2;
  --kok:#1d4ed8; --kok-och:#dbeafe;
  --sariq:#b45309; --sariq-och:#fef3c7;
  --soya:0 1px 2px rgba(15,26,23,.06), 0 4px 14px rgba(15,26,23,.05);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --fon:#0d1512; --karta:#151f1b; --karta2:#1a2621;
    --matn:#e8f0ed; --xira:#93a5a0; --chegara:#26332e;
    --yashil:#22c55e; --yashil-och:#0d2f1c; --yashil-tund:#86efac;
    --qizil:#f87171; --qizil-och:#3b1414;
    --kok:#60a5fa; --kok-och:#12233f;
    --sariq:#fbbf24; --sariq-och:#3a2a08;
    --soya:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--fon); color:var(--matn);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
h2,h3{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

/* ---------------- yuqori panel ---------------- */
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px;background:var(--yashil);color:#fff;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{font-size:24px;line-height:1}
.brand-nom{font-weight:700;font-size:17px;letter-spacing:.2px}
.brand-sana{font-size:12px;opacity:.85}
.top-tugma{display:flex;gap:4px}
.ikon{
  width:38px;height:38px;border-radius:10px;font-size:18px;
  display:grid;place-items:center;background:rgba(255,255,255,.14);color:inherit;
}
.ikon:active{background:rgba(255,255,255,.28)}

/* ---------------- karkas ---------------- */
main{max-width:920px;margin:0 auto;padding:14px}
.vaz{display:none}
.vaz.faol{display:block;animation:kir .18s ease}
@keyframes kir{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bolim{font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--xira);
  margin:22px 0 10px;font-weight:700;display:flex;align-items:center;gap:8px}
.bolim:first-child{margin-top:4px}
.bolim-yon{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
.kichik-bolim{font-size:13px;color:var(--xira);margin:18px 0 8px;font-weight:700}

/* ---------------- tez tugmalar ---------------- */
.tez{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tez-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;
  border-radius:var(--r);font-weight:700;font-size:15px;color:#fff;box-shadow:var(--soya);
}
.tez-btn .tez-ikon{font-size:22px}
.tez-btn.kirim{background:linear-gradient(160deg,#16a34a,#15803d)}
.tez-btn.chiqim{background:linear-gradient(160deg,#2563eb,#1d4ed8)}
.tez-btn:active{transform:scale(.98)}

/* ---------------- kartalar ---------------- */
.kartalar{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.karta{
  background:var(--karta);border:1px solid var(--chegara);border-radius:var(--r);
  padding:12px 13px;box-shadow:var(--soya)
}
.karta .nom{font-size:13px;color:var(--xira);font-weight:600;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.karta .son{font-size:24px;font-weight:800;letter-spacing:-.5px}
.karta .son small{font-size:13px;font-weight:600;color:var(--xira);margin-left:3px}
.karta.ogoh .son{color:var(--qizil)}
.karta.bosh .son{color:var(--yashil)}

.xulosa{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.xul{background:var(--karta);border:1px solid var(--chegara);border-radius:12px;padding:10px 12px}
.xul .yorliq{font-size:12px;color:var(--xira);font-weight:600}
.xul .qiymat{font-size:19px;font-weight:800;margin-top:2px}
.xul.y .qiymat{color:var(--yashil)}
.xul.q .qiymat{color:var(--qizil)}
.xul.k .qiymat{color:var(--kok)}

.karta-blok{background:var(--karta);border:1px solid var(--chegara);border-radius:var(--r);
  padding:14px;box-shadow:var(--soya)}
.karta-blok .qat{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.karta-blok .qat+.qat{border-top:1px solid var(--chegara)}
.karta-blok .qat span:first-child{color:var(--xira)}
.karta-blok .qat b{font-variant-numeric:tabular-nums}

/* ---------------- ro'yxat ---------------- */
.royxat{display:flex;flex-direction:column;gap:8px}
.yoz{
  background:var(--karta);border:1px solid var(--chegara);border-radius:12px;
  padding:11px 13px;display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%
}
.yoz:active{background:var(--karta2)}
.yoz .belgi{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;flex:none;font-weight:800
}
.belgi.kirim{background:var(--yashil-och);color:var(--yashil)}
.belgi.chiqim{background:var(--kok-och);color:var(--kok)}
.belgi.pul{background:var(--sariq-och);color:var(--sariq)}
.yoz .ich{flex:1;min-width:0}
.yoz .sarlavha{font-weight:700;display:flex;gap:6px;align-items:center}
.yoz .tafsil{font-size:13px;color:var(--xira);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.yoz .ong{text-align:right;flex:none;font-variant-numeric:tabular-nums}
.yoz .summa{font-weight:800}
.yoz .kichik{font-size:12px;color:var(--xira);margin-top:2px}
.rasm-bor{font-size:11px;background:var(--yashil-och);color:var(--yashil);
  padding:1px 6px;border-radius:6px;font-weight:700}
.bosh-holat{text-align:center;color:var(--xira);padding:26px 14px;font-size:14px;
  background:var(--karta);border:1px dashed var(--chegara);border-radius:var(--r)}

/* ---------------- forma ---------------- */
.maydon{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;flex:1;min-width:0}
.maydon>span{font-size:12.5px;font-weight:700;color:var(--xira)}
.maydon input,.maydon select{
  background:var(--karta);border:1.5px solid var(--chegara);border-radius:11px;
  padding:11px 12px;width:100%;outline:none;font-size:16px
}
.maydon input:focus,.maydon select:focus{border-color:var(--yashil)}
.maydon-qator{display:flex;gap:10px}
@media(max-width:520px){.maydon-qator{flex-direction:column;gap:0}}

.hujjat-bosh{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:800;font-size:18px}
.hujjat-bosh .nishon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px}

.satrlar{display:flex;flex-direction:column;gap:8px}
.satr{
  background:var(--karta);border:1px solid var(--chegara);border-radius:12px;padding:10px;
  display:grid;grid-template-columns:1fr 84px 110px 34px;gap:8px;align-items:center
}
.satr select,.satr input{
  background:var(--karta2);border:1.5px solid var(--chegara);border-radius:9px;
  padding:9px 8px;width:100%;outline:none;font-size:15px
}
.satr input{text-align:right;font-variant-numeric:tabular-nums}
.satr select:focus,.satr input:focus{border-color:var(--yashil)}
.satr .ochir{width:32px;height:32px;border-radius:9px;background:var(--qizil-och);
  color:var(--qizil);font-size:17px;display:grid;place-items:center}
.satr .yorliqcha{grid-column:1/-1;font-size:11px;color:var(--xira);display:none}
@media(max-width:520px){
  .satr{grid-template-columns:1fr 1fr 34px;grid-template-areas:"m m o" "q n n"}
  .satr select{grid-area:m}
  .satr .miqdor{grid-area:q}
  .satr .narx{grid-area:n}
  .satr .ochir{grid-area:o}
}
.qator-qosh{
  width:100%;margin-top:8px;padding:12px;border:1.5px dashed var(--chegara);border-radius:12px;
  color:var(--yashil);font-weight:700;background:var(--karta)
}
.qator-qosh:active{background:var(--yashil-och)}

.jami-quti{background:var(--karta);border:1px solid var(--chegara);border-radius:var(--r);
  padding:14px;margin-top:14px;box-shadow:var(--soya)}
.jami-qator{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:14px}
.jami-qator span{color:var(--xira);font-weight:600}
.jami-qator b{font-variant-numeric:tabular-nums;font-weight:800}
.jami-qator.katta b{font-size:21px}
.jami-qator.qarz b{color:var(--qizil);font-size:17px}
.jami-quti .tolov{margin:10px 0 4px}
.tolov-tez{display:flex;gap:8px;margin-top:8px}
.tolov-tez button{flex:1;padding:9px;border-radius:10px;background:var(--karta2);
  border:1px solid var(--chegara);font-size:13px;font-weight:700;color:var(--xira)}
.tolov-tez button:active{background:var(--yashil-och);color:var(--yashil)}

.rasm-quti{display:flex;gap:10px}
.rasm-btn{
  flex:1;text-align:center;padding:14px;border-radius:12px;background:var(--yashil);color:#fff;
  font-weight:700;cursor:pointer;box-shadow:var(--soya)
}
.rasm-btn.ikkilamchi{background:var(--karta);color:var(--matn);border:1.5px solid var(--chegara);box-shadow:none}
.rasm-oldi{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.rasm-oldi figure{position:relative;margin:0;aspect-ratio:1;border-radius:10px;overflow:hidden;
  border:1px solid var(--chegara);background:var(--karta2)}
.rasm-oldi img{width:100%;height:100%;object-fit:cover;display:block}
.rasm-oldi .x{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;font-size:13px;display:grid;place-items:center}

.pastki-amal{display:flex;gap:10px;margin:20px 0 8px}
.btn{flex:1;padding:15px;border-radius:12px;font-weight:800;font-size:16px}
.btn.asosiy{background:var(--yashil);color:#fff;box-shadow:var(--soya)}
.btn.ikkilamchi{background:var(--karta);border:1.5px solid var(--chegara);color:var(--matn)}
.btn.xavfli{background:var(--qizil);color:#fff}
.btn:disabled{opacity:.55}
.btn:active{transform:scale(.985)}

/* ---------------- tab / chip ---------------- */
.tab-qator{display:flex;gap:6px;background:var(--karta);border:1px solid var(--chegara);
  border-radius:12px;padding:4px;margin-bottom:14px}
.tab{flex:1;padding:10px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--xira)}
.tab.faol{background:var(--yashil);color:#fff}
.chip{padding:7px 13px;border-radius:20px;background:var(--karta);border:1px solid var(--chegara);
  font-size:13px;font-weight:700;color:var(--xira);white-space:nowrap}
.chip.faol{background:var(--yashil);color:#fff;border-color:var(--yashil)}
.chip-qator{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}
.sana-boshqaruv{display:flex;gap:7px;align-items:center;margin-bottom:14px}
.sana-boshqaruv input{flex:1;background:var(--karta);border:1.5px solid var(--chegara);
  border-radius:11px;padding:10px;font-size:15px;min-width:0}
.sana-boshqaruv .ikon{background:var(--karta);border:1px solid var(--chegara);color:var(--matn)}
.qidir-quti{margin-bottom:12px}
.qidir-quti input{width:100%;background:var(--karta);border:1.5px solid var(--chegara);
  border-radius:11px;padding:11px 13px;outline:none;font-size:15px}

/* ---------------- jadval ---------------- */
.jadval-orash{overflow-x:auto;background:var(--karta);border:1px solid var(--chegara);
  border-radius:var(--r);box-shadow:var(--soya)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 11px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--karta)}
thead th{background:var(--karta2);font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--xira);font-weight:700;border-bottom:1px solid var(--chegara)}
thead th:first-child{background:var(--karta2)}
tbody tr+tr td{border-top:1px solid var(--chegara)}
tbody td{font-variant-numeric:tabular-nums}
tfoot td{border-top:2px solid var(--chegara);font-weight:800;background:var(--karta2)}
tfoot td:first-child{background:var(--karta2)}
.nol{color:var(--xira);opacity:.45}
.holat-ok{color:var(--yashil);font-weight:800}
.holat-qoldi{color:var(--sariq);font-weight:800}
.holat-kam{color:var(--qizil);font-weight:800}

.natija-blok{margin-bottom:20px}
.natija-blok>h3{font-size:14px;font-weight:800;margin:0 0 9px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.natija-blok>h3 .yon{font-size:12px;font-weight:600;color:var(--xira)}

.bayroq{padding:12px 14px;border-radius:12px;font-weight:700;font-size:14px;margin-bottom:14px;
  display:flex;gap:9px;align-items:center}
.bayroq.ok{background:var(--yashil-och);color:var(--yashil-tund)}
.bayroq.ogoh{background:var(--sariq-och);color:var(--sariq)}
.bayroq.xato{background:var(--qizil-och);color:var(--qizil)}

.galereya{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.galereya figure{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--chegara);
  aspect-ratio:1;background:var(--karta2);cursor:pointer}
.galereya img{width:100%;height:100%;object-fit:cover;display:block}
.galereya figcaption{display:none}

/* ---------------- pastki menyu ---------------- */
.pastki-menyu{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--karta);border-top:1px solid var(--chegara);
  padding-bottom:env(safe-area-inset-bottom)
}
.mn{padding:8px 2px 9px;font-size:10.5px;font-weight:700;color:var(--xira);
  display:flex;flex-direction:column;align-items:center;gap:3px}
.mn span{font-size:19px;line-height:1}
.mn.faol{color:var(--yashil)}

/* ---------------- modal / xabar ---------------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:grid;
  place-items:end center;padding:0}
.modal-ich{background:var(--karta);width:100%;max-width:560px;max-height:88vh;overflow:auto;
  border-radius:18px 18px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  animation:kot .2s ease}
@keyframes kot{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:600px){.modal{place-items:center}.modal-ich{border-radius:18px;max-height:82vh}}
.modal-bosh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-bosh b{font-size:17px}
.modal-bosh .ikon{background:var(--karta2);color:var(--matn)}

.rasm-korish{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:12px}
.rasm-korish img{max-width:100%;max-height:100%;border-radius:8px}

.xabar{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);z-index:80;
  background:#0f1a17;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;
  opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center}
.xabar.kor{opacity:1;transform:translateX(-50%)}
.xabar.xato{background:var(--qizil)}
.xabar.ok{background:var(--yashil)}

.yuklanish{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.25);display:grid;place-items:center}
.aylanma{width:42px;height:42px;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:ayl .8s linear infinite}
@keyframes ayl{to{transform:rotate(1turn)}}

/* ---------------- chop etish ---------------- */
@media print{
  .top,.pastki-menyu,.tab-qator,.sana-boshqaruv,.chip-qator,.tez,.pastki-amal,
  .qidir-quti,.bolim-yon,#btnChop{display:none!important}
  body{background:#fff;color:#000;padding:0}
  main{max-width:none;padding:0}
  .jadval-orash,.karta,.karta-blok{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .natija-blok{break-inside:avoid}
  .galereya{grid-template-columns:repeat(4,1fr)}
  thead th{background:#eee!important;color:#000}
  @page{margin:12mm}
}
.chop-sarlavha{display:none}
@media print{.chop-sarlavha{display:block;margin-bottom:14px;font-size:18px;font-weight:800}}