/* Telegram do'koni (mini ilova). Ranglar --o'zgaruvchilarda:
   Telegram ichida ochilsa dokon.js ularni Telegram mavzusidan ustiga yozadi,
   brauzerda esa quyidagi standart (yorug'/tungi) qiymatlar ishlaydi. */
:root{
  --fon:#eef0f4;         /* sahifa foni */
  --karta:#ffffff;       /* kartochka/oyna foni */
  --matn:#151519;
  --xira:#8a8a93;
  --urgu:#2481cc;        /* Telegram ko'ki */
  --urgu-matn:#ffffff;
  --chiziq:rgba(0,0,0,.06);
  --soya:0 1px 4px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --fon:#131316; --karta:#1e1e23; --matn:#f1f1f4; --xira:#93939c;
    --urgu:#6ab2f2; --urgu-matn:#10161d;
    --chiziq:rgba(255,255,255,.08); --soya:0 1px 4px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--fon); color:var(--matn);
  font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom:24px;
}
.yashirin{display:none !important}

/* ---------- yuqori qism ---------- */
.bosh{
  position:sticky; top:0; z-index:5; background:var(--fon);
  padding:10px 12px 8px; padding-top:calc(10px + env(safe-area-inset-top));
}
.bosh-qator{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px}
.dokon-nomi{font-size:17px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.salom{font-size:12.5px; color:var(--xira); white-space:nowrap}
#qidiruv{
  width:100%; border:0; border-radius:10px; padding:9px 12px; font-size:15px;
  background:var(--karta); color:var(--matn); box-shadow:var(--soya); outline:none;
  -webkit-appearance:none; appearance:none;
}
#qidiruv::placeholder{color:var(--xira)}
.banner{
  margin-top:8px; border-radius:10px; padding:8px 11px;
  font-size:12.5px; line-height:1.4; font-weight:600;
  background:color-mix(in srgb, var(--urgu) 12%, transparent); color:var(--urgu);
}
@supports not (background: color-mix(in srgb, red 1%, blue)){
  .banner{background:rgba(36,129,204,.12)}
}

/* ---------- katalog to'ri ---------- */
main{padding:2px 12px 0}
.holat{padding:36px 10px; text-align:center; color:var(--xira); font-size:14px}
.holat button{
  margin-top:12px; display:inline-block; border:0; border-radius:10px;
  background:var(--urgu); color:var(--urgu-matn); font-size:14px; font-weight:600;
  padding:9px 18px;
}
.tor{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px}
.kart{
  background:var(--karta); border-radius:13px; overflow:hidden; box-shadow:var(--soya);
  display:flex; flex-direction:column; cursor:pointer;
}
.kart:active{opacity:.75}
.kart-rasm{
  aspect-ratio:3/4; background:var(--chiziq); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.kart-rasm img{width:100%; height:100%; object-fit:cover; display:block}
.kart-rasm .bosh-rasm{font-size:38px; opacity:.55}
.kart-ich{padding:8px 9px 10px; display:flex; flex-direction:column; gap:3px; flex:1}
.kart-nomi{
  font-size:13px; font-weight:600; line-height:1.28;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.56em;
}
.kart-muallif{font-size:11px; color:var(--xira);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.2em}
.kart-narx{font-size:15px; font-weight:700; margin-top:2px}
.kart-narx .som{font-size:11px; font-weight:500; color:var(--xira)}
.kart-holat{font-size:11px; color:var(--xira); margin-top:auto; padding-top:2px}
.kart-holat.bor{color:#2e9e5b}
@media (prefers-color-scheme: dark){ .kart-holat.bor{color:#57c982} }

/* ---------- kitob sahifasi ---------- */
.oyna{
  position:fixed; inset:0; z-index:20; background:var(--fon);
  overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.oyna-yopish{
  position:fixed; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:22;
  width:34px; height:34px; border:0; border-radius:50%;
  background:var(--karta); color:var(--matn); box-shadow:var(--soya);
  font-size:15px; line-height:34px; text-align:center; padding:0;
}
.oyna-rasm{
  min-height:220px; max-height:52vh; background:var(--karta);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.oyna-rasm img{max-width:100%; max-height:52vh; object-fit:contain; display:block}
.oyna-rasm .bosh-rasm{font-size:84px; opacity:.5; padding:56px 0}
.oyna-ich{padding:16px 16px 8px; max-width:560px; margin:0 auto}
.oyna-ich h1{margin:0 0 4px; font-size:20px; line-height:1.25; letter-spacing:-.01em}
.o-muallif{color:var(--xira); font-size:14px; margin-bottom:12px}
.o-narx{font-size:24px; font-weight:800; letter-spacing:-.01em; margin-bottom:12px}
.o-narx .som{font-size:14px; font-weight:500; color:var(--xira)}
.chiplar{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  background:var(--karta); box-shadow:var(--soya); border-radius:9px;
  padding:6px 11px; font-size:13px;
}
.chip.bor{color:#2e9e5b} .chip.yoq{color:var(--xira)}
@media (prefers-color-scheme: dark){ .chip.bor{color:#57c982} }

/* ---------- savat ---------- */
body.savatli main{padding-bottom:76px}   /* pastki panel kontentni yopmasin */
.savat-panel{
  position:fixed; left:12px; right:12px; z-index:15;
  bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--urgu); color:var(--urgu-matn);
  border-radius:13px; padding:13px 16px; font-size:15px; font-weight:700;
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  box-shadow:0 4px 18px rgba(0,0,0,.22); cursor:pointer;
}
.savat-panel:active{opacity:.85}

/* kartochkadagi tugma / hisoblagich */
.kart-tugma{
  margin-top:7px; border:0; border-radius:9px; padding:8px 0; width:100%;
  background:color-mix(in srgb, var(--urgu) 14%, transparent); color:var(--urgu);
  font-size:13px; font-weight:700;
}
@supports not (background: color-mix(in srgb, red 1%, blue)){
  .kart-tugma{background:rgba(36,129,204,.13)}
}
.stepper{
  margin-top:7px; display:flex; align-items:center; gap:4px;
  background:var(--fon); border-radius:9px; overflow:hidden;
}
.stepper button{
  border:0; background:none; color:var(--urgu); font-size:19px; font-weight:700;
  width:38px; padding:6px 0; line-height:1.2;
}
.stepper .st-son{flex:1; text-align:center; font-size:14px; font-weight:700}
.o-savat{margin-top:16px}
.o-savat .katta-tugma{margin-top:0}
.o-savat .stepper{max-width:220px; background:var(--karta); box-shadow:var(--soya)}

/* savat oynasi */
.savat-ich{padding-top:calc(16px + env(safe-area-inset-top))}
.savat-ich h1{margin-bottom:14px}
.s-qator{
  display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center;
  background:var(--karta); box-shadow:var(--soya); border-radius:11px;
  padding:9px 11px; margin-bottom:8px;
}
.s-qator img{width:44px; height:58px; object-fit:cover; border-radius:7px; background:var(--fon)}
.s-rasm-bosh{width:44px; height:58px; border-radius:7px; background:var(--fon);
  display:flex; align-items:center; justify-content:center; font-size:20px}
.s-nomi{font-size:13.5px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.s-narx{font-size:12px; color:var(--xira); margin-top:2px}
.s-narx .eski{text-decoration:line-through; opacity:.7; margin-right:5px}
.s-onq{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.s-summa{font-size:13.5px; font-weight:700; white-space:nowrap}
.s-onq .stepper{margin-top:0; width:108px}
.s-onq .stepper button{width:32px; font-size:17px}
.s-optom{
  border-radius:11px; padding:10px 13px; font-size:13px; font-weight:600;
  margin:12px 0 0;
  background:color-mix(in srgb, var(--urgu) 12%, transparent); color:var(--urgu);
}
@supports not (background: color-mix(in srgb, red 1%, blue)){
  .s-optom{background:rgba(36,129,204,.12)}
}
.s-jami{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:16px; margin:16px 2px 14px;
}
.s-jami b{font-size:20px}
.katta-tugma{
  display:block; width:100%; border:0; border-radius:12px; padding:14px;
  background:var(--urgu); color:var(--urgu-matn); font-size:16px; font-weight:700;
}
.katta-tugma:disabled{opacity:.55}
.katta-tugma:active{opacity:.85}
.s-eslatma{margin-top:10px; text-align:center; font-size:12.5px; color:var(--xira)}

/* forma */
.f-label{display:block; font-size:13px; color:var(--xira); margin-bottom:12px}
.f-maydon{
  display:block; width:100%; margin-top:5px; border:0; border-radius:10px;
  padding:11px 12px; font-size:15px; background:var(--karta); color:var(--matn);
  box-shadow:var(--soya); outline:none; -webkit-appearance:none;
}
.f-xato{
  border-radius:10px; padding:10px 13px; font-size:13.5px; margin-bottom:12px;
  background:rgba(200,50,50,.12); color:#c83232;
}
@media (prefers-color-scheme: dark){ .f-xato{color:#ef8383} }

/* muvaffaqiyat */
.tayyor-ich{text-align:center; padding-top:calc(56px + env(safe-area-inset-top))}
.tayyor-belgi{font-size:64px; margin-bottom:10px}
.tayyor-ich p{color:var(--xira); font-size:15px; margin:8px 0 26px}