/* ============================================================================
   Yangi dizayn — ILOVAGA XOS qo'shimchalar (qo'lda yoziladi).
   `kit.css` — Claude Design'dan avtomatik (scripts/kit/build.py), unga tegilmaydi.
   Bu yerda faqat dizaynda yo'q, lekin haqiqiy qurilma/ma'lumot uchun kerak narsalar:
   qobiq almashinuvi, xavfsiz hudud, rasmli avatarlar, band/yuklanish holatlari, kirish harakati.
   Hammasi `kx` qatlamida (eski CSS'dan doim ustun). docs/YANGI-DIZAYN.md
   ========================================================================== */
@layer kx{

/* ---- 1. Qobiq almashinuvi ------------------------------------------------
   Yangi sahifa o'z qobig'i bilan keladi (d-top, d-tabs, m-nav — dizayndagidek har sahifada).
   U ko'rsatilganda eski qobiq yashiriladi va `#content` to'liq enga yoyiladi. */
.app-shell.is-kx > .mk-header,.app-shell.is-kx > .bottom-nav,
.app-shell.is-kx #mTop,.app-shell.is-kx #pageBack{display:none}
.app-shell.is-kx .mk-main{max-width:none;margin:0;padding:0;overflow:visible}
.app-shell.is-kx .mk-main .content{padding:0;max-width:none}

/* ---- 2. Sahifa ildizi ------------------------------------------------------ */
.kx.pg{min-height:100vh;min-height:100dvh;
  /* Telefon kesigi / Android edge-to-edge: dizaynda yo'q, qurilmada kerak (env() = 0 bo'lsa o'zgarmaydi). */
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom)}
.kx .m-nav{height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}

/* ---- 3. Rasmli avatar — dizaynda bosh harflar; rasm bo'lsa doirani to'ldiradi (nishonlar ustida qoladi) - */
/* height:100% grid ichida auto qatorga bog'lanadi — tik rasm (selfi) doiradan 3 barobar cho'zilardi; aspect-ratio bilan doim kvadrat */
.kx .d-me > img,.kx .m-nav .me > img,.kx .av > img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;display:block}

/* ---- 4. Holatlar: bosish, band (withBusy), o'chiq ------------------------------------------- */
.kx .btn,.kx .lnk,.kx .pill,.kx .ib,.kx .opt,.kx .m-nav a,.kx .d-tabs a{
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .btn:not([disabled],.dis):active,.kx .ib:active,.kx .pill:active{transform:scale(var(--press))}
.kx .btn.pri:not([disabled],.dis):hover{filter:brightness(1.04)}
.kx .btn.sec:not([disabled],.dis):hover,.kx .btn.out:not([disabled],.dis):hover{background:var(--c-surface-3)}
.kx .btn.ghost:not([disabled],.dis):hover{background:var(--c-brand-soft)}
.kx .d-tabs a:hover{color:var(--c-ink)}
.kx .d-tabs a.on:hover{color:var(--c-brand-text)}
.kx .city:hover,.kx .d-search:hover{background:var(--c-surface-3)}
.kx .rolesw a:not(.on):hover{color:var(--c-ink)}
.kx .d-me:hover{box-shadow:0 0 0 2px var(--c-line-strong)}
.kx .d-me.on:hover{box-shadow:0 0 0 2px var(--c-brand)}
/* Band: matn o'rnida aylanma (eni qulflangan — ui.js withBusy). */
.kx .is-busy{color:transparent!important;pointer-events:none;position:relative}
.kx .is-busy > *{visibility:hidden}
.kx .is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--c-on-brand);border-right-color:transparent;animation:kx-spin .7s linear infinite}
.kx .btn.sec.is-busy::after,.kx .btn.out.is-busy::after,.kx .btn.ghost.is-busy::after,
.kx .lnk.is-busy::after{border-color:var(--c-ink-2);border-right-color:transparent}
@keyframes kx-spin{to{transform:rotate(360deg)}}

/* Jadval sig'masa — yonga suriladi (dizaynda 1280px da oxirgi ustun kesilib qolardi). Sig'sa — farqi yo'q. */
.kx .card:has(> .tbl){overflow-x:auto!important}

/* ---- Egasining 3D ikonkalari (bosh menyu plitkalari, `kx/pages/home.js` HOME_3D) ------------------ */
.kx .ic.i3d{background:transparent;overflow:visible}
.kx .ic.i3d > img{width:40px;height:40px;object-fit:contain;display:block}

/* Kechikib keladigan qiymatlar (`page.js` fill) — yumshoq paydo bo'ladi. */
.kx [data-v].kx-in{animation:kx-in var(--dur-2) var(--ease-out)}
@keyframes kx-in{from{opacity:0}}

/* ---- Varaq (kx/sheet.js): kirish/chiqish harakati, ochiq paytda fon aylanmaydi ------------- */
html.kx-sheet-open{overflow:hidden}
.kx-sheet-root .scrim{opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.kx-sheet-root.is-in .scrim{opacity:1}
.kx-sheet-root .sheet{opacity:0;transform:translateY(32px);transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.kx-sheet-root.is-in .sheet{opacity:1;transform:none}
/* Yopilayotgan varaq (220ms chiqish harakati) bosishni yutmasin — ostidagi tugma darhol ishlaydi. */
.kx-sheet-root:not(.is-in){pointer-events:none}
@media (min-width:768px){
  .kx-sheet-root .sheet{transform:translate(-50%,-47%) scale(.98)}
  .kx-sheet-root.is-in .sheet{transform:translate(-50%,-50%)}
}
.kx .sheet:focus{outline:none}

/* ---- Haqiqiy qidiruv maydoni (dizaynda `<span>` namuna matn) ------------------------------ */
.kx .search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;color:var(--c-ink);
  outline:none;padding:0;margin:0}
.kx .search input::placeholder{color:var(--c-ink-3);opacity:1}
/* Bildirishnoma sozlamalari: jim vaqt maydoni — ko'rinmas `input[type=time]` butun maydonni qoplaydi (tizimning
   soat tanlagichi ochiladi), ko'rinishi dizayndagi `.input.num`. O'chiq holatda xira va bosilmaydi. */
.kx .qt{transition:opacity .2s ease}
.kx .qt.off{opacity:.5}
.kx .qt .input{position:relative}
.kx .qt .input input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.kx .qt .input input:disabled{cursor:not-allowed}
.kx .qt .input:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 4px var(--c-focus-halo)}
/* To'ldirish: summa maydoni — dizayndagi `.amt b` ichida haqiqiy input (kengligi raqamga qarab, `ch`). */
.kx .amt input{all:unset;box-sizing:content-box;min-width:2ch;max-width:100%;font:inherit;letter-spacing:inherit;color:inherit;
  font-variant-numeric:tabular-nums;caret-color:var(--c-brand)}
.kx .amt:focus-within{border-color:var(--c-brand)}
.kx .amt b{position:relative}
.kx .amt .amt-m{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;pointer-events:none}
/* Slider (`worker-conditions` masofa): dizayndagi `.sl` (iz, to'ldirish, tutqich) ustida ko'rinmas haqiqiy range. */
.kx .sl input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kx .sl:has(input:focus-visible) .th{box-shadow:0 0 0 4px var(--c-focus-halo)}
/* Xizmat hududi (`worker-work-area`): haqiqiy xarita ustida dizayndagi doira (`circle.mrad`) va markaz — doira o'lchami
   qat'iy, xarita masshtabi radiusga moslanadi. Leaflet panellari (200–400) ustida, tugmalar undan ham yuqorida. */
.kx .wa-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:450;
  background:color-mix(in srgb,var(--c-brand) 12%,transparent);border:2px solid var(--c-brand)}
.kx .wa-map .mdot{z-index:451}
.kx .wa-map > .chip,.kx .wa-map > .me{z-index:500}
/* Rezyume tahriri: vakansiya talabiga mos kelmagan bo'lim (`is-bad`) — qizil chiziq; ostida `.note.bad` talab matni. */
.kx .card.is-bad{box-shadow:0 0 0 2px var(--c-bad-line),var(--e-1)}
/* Maosh (`.money2`, 1fr 1fr): dizaynda matn, bizda haqiqiy `<input>` — uning tabiiy eni (~20 belgi) ustunni kengaytirib
   375px'da kartani ekrandan chiqarardi. Ustun elementi torayishi mumkin. */
.kx .money2 > .field{min-width:0}
/* Telefonda `.vl` (Doimiy ish) — shablonsiz grid: yagona ustun tarkibning tabiiy eniga (chiplar qatori, 409px) cho'zilib
   sahifani 375px'dan chiqarardi. Kasb nomlari juda uzun bo'lishi mumkin («Keksa va bemorlar uchun tibbiy nazorat
   hamshirasi») — chip qatorga sig'masa ikki qatorga o'tadi (bu sahifalarda chip balandligi allaqachon `auto`). */
@media (max-width:767px){.kx .vl{grid-template-columns:minmax(0,1fr)}}
.kx:where(.p-worker-professions,.p-auth-w-prof) .chips .pill{max-width:100%;white-space:normal;text-align:left}
/* Rezyume yozuvlari (`worker-exp-add`, `worker-edu-add`): dizayndagi sana maydoni (`button.input`) bosilganda oy/yil
   varag'i — dizaynda chizilmagan; yil almashtirgich + oylar 3 ustunda, yillar 4 ustunda (varaq ichida aylanadi).
   «Hozir shu yerda ishlayman» belgilansa «Tugagan» o'chadi. Tanlangan/yuklangan hujjat qatori (`.docpick`). */
.kx .ymp-y{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.kx .ymp-y b{font-size:var(--fs-400);font-weight:var(--fw-semi)}
.kx .ymp-y .ib[disabled]{opacity:.35;cursor:not-allowed}
.kx .ymp-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.kx .ymp-g.yrs{grid-template-columns:repeat(4,minmax(0,1fr));max-height:min(52vh,420px);overflow-y:auto;padding:4px}
.kx .ymp-g .pill{justify-content:center;height:var(--h-tap);min-width:0;padding:0 var(--sp-2)}
.kx .ymp-g .pill[disabled]{opacity:.4;cursor:not-allowed}
.kx button.input{cursor:pointer;width:100%}
.kx button.input[disabled]{background:var(--c-surface-2);color:var(--c-ink-3);cursor:not-allowed}
.kx .input .grow.muted{color:var(--c-ink-3)}
.kx .docpick{display:flex;align-items:center;gap:var(--sp-3);min-height:72px;padding:var(--sp-3);border-radius:var(--r-3);
  border:var(--bw-1) solid var(--c-line);background:var(--c-surface)}
.kx .docpick img{width:48px;height:48px;border-radius:var(--r-2);object-fit:cover;flex:none;background:var(--c-surface-2)}
.kx .docpick .grow{min-width:0}
.kx .docpick .grow b{display:block;font-size:var(--fs-250);font-weight:var(--fw-semi)}
.kx .docpick .grow small{display:block;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx .drop .ic.bad + b{color:var(--c-bad-ink)}
/* `button.drop` o'rovchi (`[data-doc-box]`) ichida — tugma tarkibiga qarab torayib qolmasin (dizaynda maydon eni). */
.kx [data-doc-box] > .drop{width:100%}
/* Profilni to'ldirish: to'liqlik halqasi (dizayn sahifa CSS'i, foiz — `--p`). */
.kx:where(.p-worker-profile-fill) .ring{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--c-brand) 0 var(--p,0%),var(--c-surface-3) 0);display:grid;place-items:center;flex:none}
.kx:where(.p-worker-profile-fill) .ring b{width:50px;height:50px;border-radius:50%;background:var(--c-surface);display:grid;place-items:center;font-size:var(--fs-300);font-weight:var(--fw-bold)}
/* Chat (yangi dizayn): ekran o'quvchi uchun yashirin matn, yozish maydoni (dizayndagi `.cin` ichida haqiqiy input),
   yuborish tugmasi — bo'sh maydonda mikrofon (ovozli xabar), matn bo'lsa samolyotcha; ovoz, rasm va joylashuv xabarlari. */
.kx .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kx .cin input{all:unset;flex:1;min-width:0;width:100%;font:inherit;color:var(--c-ink)}
.kx .cin input::placeholder{color:var(--c-ink-3)}
.kx .cin:focus-within{box-shadow:inset 0 0 0 1.5px var(--c-brand)}
.kx button.sendb,.kx button.vp{border:0;padding:0;margin:0;font:inherit;cursor:pointer}
.kx .sendb .s-mic{display:none}
.kx .sendb.is-voice .s-mic,.kx .sendb .s-go{display:grid;place-items:center}
.kx .sendb.is-voice .s-go{display:none}
.kx .vm:has(.played) .wv span:not(.played){opacity:.35}
.kx .pm-img img,.kx .pm-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.kx .pm-img img:not([src]){display:none}
.kx .pm-img.has-media > .i{visibility:hidden}
.kx .pm-img{overflow:hidden}
.kx .pm-img .cx-tiles{position:absolute;inset:0;overflow:hidden}
.kx .pm-img .cx-tiles img{position:absolute;width:256px;height:256px;max-width:none;inset:auto}
/* Suhbatdosh ostidagi yozuv — kasb (dizayndagi yashil «onlayn» emas: onlayn holati serverda yo'q). */
.kx .m-bar .nm small[data-sub]{color:var(--c-ink-3)}
/* Chat joylashuvi: Leaflet xaritasi dizayndagi `.map` ichida, nishon/aniqlik/tugmalar uning ustida. */
.kx .lp .map{position:relative;overflow:hidden}
.kx .lp-map{position:absolute;inset:0}
.kx .lp .map .mme,.kx .lp .map .mlbl,.kx .lp .map .mctl{z-index:500}
.kx .mctl button{width:var(--h-tap);height:var(--h-tap);padding:0;border-radius:var(--r-2);background:var(--c-surface);border:var(--bw-1) solid var(--c-line);box-shadow:var(--e-1);display:grid;place-items:center;color:var(--c-ink-2);font:inherit;cursor:pointer}
/* Ko'p qatorli maydon — dizayndagi `.input.area` shrifti (tizim monospace'i emas), tutqichsiz. */
.kx textarea{font:inherit;color:inherit;resize:none}
/* Maydonlar: dizayndagi `.input` ichida haqiqiy input (ko'rinishi kartadagidek), fokusda brend chegara. */
.kx .input input{all:unset;flex:1;min-width:0;width:100%;font:inherit;color:inherit}
.kx .input input::placeholder,.kx textarea::placeholder{color:var(--c-ink-3)}
.kx .input:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 4px var(--c-focus-halo)}
/* Manzillar: kartadagi haqiqiy xarita plitkalari va qo'shish sahifasidagi Leaflet xaritasi `.mmap` ichida. */
.kx .adr .mmap,.kx .pick .mmap{position:relative;overflow:hidden;display:block}
.kx .adr-tiles,.kx .adr-map{position:absolute;inset:0}
.kx .adr-tiles .cx-tiles{position:absolute;inset:0;overflow:hidden}
.kx .adr-tiles .cx-tiles img{position:absolute;width:256px;height:256px;max-width:none}
.kx .adr .mmap .mpin,.kx .pick .mmap .mpin{z-index:500}
.kx .pm-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:var(--c-bad-ink);display:grid}
.kx .search:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 4px var(--c-focus-halo)}
/* Bosiladigan belgilash qatori (`.chk`) va segment tugmalari */
.kx label.chk,.kx .chk[role="checkbox"]{cursor:pointer;user-select:none}
.kx .chk[role="checkbox"]:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:6px}
.kx .chk i{transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
/* Hujjat kamerasi (`worker-doc-upload`): dizayndagi ramka ustida haqiqiy video. Jonli bo'lganda qo'llanma shakllari
   so'nadi (hujjatni to'smasin), skaner chizig'i yuradi, suratga olishda chaqnaydi, yuborilayotganda tugma aylanadi. */
.kx .cam-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.kx .cam.is-live .cam-view video{opacity:1}
.kx .cam .frame .ph,.kx .cam .frame .ln{transition:opacity var(--dur-2) var(--ease-out)}
.kx .cam.is-live .frame .ph,.kx .cam.is-live .frame .ln{opacity:0}
.kx .cam .frame .scan{animation:kx-scan 2.4s ease-in-out infinite alternate}
@keyframes kx-scan{from{bottom:78%}to{bottom:22%}}
.kx .cam-view::after{content:"";position:absolute;inset:0;background:var(--dk-ink);opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out)}
.kx .cam.is-flash .cam-view::after{opacity:.45;transition:none}
.kx .cam-pad{width:var(--h-tap);flex:none}
.kx .cam-b,.kx .cam-ib{transition:filter var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .cam-b:hover,.kx .cam-ib:hover{filter:brightness(1.3)}
.kx .cam-b:active,.kx .cam-ib:active,.kx .shutter:active{transform:scale(var(--press))}
.kx .cam.is-torch [data-torch]{background:var(--dk-ink);color:var(--dk-bg)}
.kx .shutter{transition:transform var(--dur-1) var(--ease-out)}
.kx .shutter.is-busy::after{width:60px;height:60px;border:4px solid var(--dk-ink);border-right-color:transparent;background:none}
.kx .cam .cam-view:focus-visible,.kx .cam button:focus-visible,.kx .cam a:focus-visible{outline:3px solid var(--dk-focus);outline-offset:2px}
@media (max-width:767px){
  .kx .cam{animation:kx-in var(--dur-2) var(--ease-out)}
  .kx .cam-top{padding-top:calc(var(--sp-3) + env(safe-area-inset-top))}
  .kx .cam-ctl{padding-bottom:calc(var(--sp-7) + env(safe-area-inset-bottom))}
  /* Sahifa kirishidagi siljish (transform) `position:fixed` kamerani o'sha payt m-main ichiga qamaydi. */
  .kx.p-worker-doc-upload .m-main.kx-enter,.kx.p-worker-doc-upload .m-main.kx-fade{animation:none}
}
/* SOS (`boss-safety`): bosib turish — halqa 3 soniyada to'ladi, tugma biroz botadi, ichida 3-2-1. */
.kx .sos .btn-sos{touch-action:none;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums;
  transition:transform var(--dur-1) var(--ease-out),filter var(--dur-1) var(--ease-out)}
.kx .sos .btn-sos:hover{filter:brightness(1.06)}
.kx .sos .btn-sos.is-holding{transform:scale(.96);animation:kx-sos-fill 3s linear forwards}
@keyframes kx-sos-fill{to{box-shadow:0 0 0 22px var(--c-bad-soft),0 0 0 24px var(--c-bad-ink)}}
.kx .sos .btn-sos:focus-visible{outline:3px solid var(--c-focus);outline-offset:14px}
@media (prefers-reduced-motion:reduce){ .kx .sos .btn-sos.is-holding{animation:none} }
/* «Siz yuborgan rasm» (`verify-rejected`): dizayndagi xira varaq o'rniga haqiqiy rasm (olinsa). */
.kx .shot.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:kx-in var(--dur-2) var(--ease-out)}

/* Arizalar (`boss-applicants`): jonli kelgan ariza bir marta yaltiraydi; ko'p ishchili buyurtmada belgilangan — halqa. */
.kx .app{transition:box-shadow var(--dur-2) var(--ease-out)}
.kx .app.is-picked{box-shadow:0 0 0 2px var(--c-brand)}
.kx .app.is-new{animation:kx-rise var(--dur-3) var(--ease-out) backwards,kx-new 1.6s var(--ease-out)}
@keyframes kx-new{from{box-shadow:0 0 0 3px var(--c-brand)}}
@media (prefers-reduced-motion:reduce){ .kx .app.is-new{animation:none} }

/* Ariza tafsiloti (`boss-app-detail`): «O'xshash ishlari» — dizayndagi belgi o'rnida haqiqiy rasm; yurakcha bosilganda. */
.kx .pf3 .photo{overflow:hidden;transition:transform var(--dur-1) var(--ease-out)}
.kx .pf3 a:hover .photo{transform:translateY(-2px)}
.kx .pf3 .photo img{width:100%;height:100%;object-fit:cover}
.kx .m-bar .fav{transition:transform var(--dur-1) var(--ease-out)}
.kx .m-bar .fav:active{transform:scale(.9)}
.kx .m-bar .fav.is-busy{opacity:.6;pointer-events:none}

/* Solishtirish (`boss-compare`): dizayn 3 ustunga chizilgan — arizalar 2 ta bo'lsa ham jadval to'la kenglikda. */
.kx.p-boss-compare .cmp{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.kx.p-boss-compare .cmp .hd{transition:background-color var(--dur-1) var(--ease-out)}
.kx.p-boss-compare .cmp .hd:hover{background:var(--c-surface-2)}
.kx.p-boss-compare .cmp .hd.rec:hover{background:var(--c-brand-soft)}
@media (min-width:768px){ .kx.p-boss-compare .cmp{grid-template-columns:200px repeat(var(--n,3),minmax(0,1fr))} }

/* Usta profili (`boss-worker-view`): «Bajarilgan ishlar» — dizayndagi belgi o'rnida haqiqiy rasm. */
.kx.p-boss-worker-view .pf .photo{overflow:hidden;transition:transform var(--dur-1) var(--ease-out)}
.kx.p-boss-worker-view .pf a:hover .photo{transform:translateY(-2px)}
.kx.p-boss-worker-view .pf .photo img{width:100%;height:100%;object-fit:cover}
.kx.p-boss-worker-view .fav.is-busy{opacity:.6;pointer-events:none}

/* Portfolio ishi (`boss-portfolio-item`): haqiqiy rasmlar, galereyada ←/→ tugmalari (birinchi/oxirgida yashirin). */
.kx.p-boss-portfolio-item .photo{overflow:hidden;transition:transform var(--dur-1) var(--ease-out)}
.kx.p-boss-portfolio-item .photo img{width:100%;height:100%;object-fit:cover}
.kx.p-boss-portfolio-item .gal .photo img{animation:kx-in var(--dur-2) var(--ease-out)}
.kx.p-boss-portfolio-item .more3 a:hover .photo{transform:translateY(-2px)}
.kx.p-boss-portfolio-item .thumbs a{transition:box-shadow var(--dur-1) var(--ease-out)}
.kx .kx-gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:var(--c-surface);
  box-shadow:var(--e-1);display:grid;place-items:center;color:var(--c-ink);cursor:pointer;transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .kx-gal-nav.prev{left:var(--sp-3)}
.kx .kx-gal-nav.next{right:var(--sp-3)}
.kx .kx-gal-nav:hover{transform:translateY(-50%) scale(1.06)}
.kx .kx-gal-nav:active{transform:translateY(-50%) scale(.94)}
.kx .kx-gal-nav:disabled{opacity:0;pointer-events:none}
.kx .kx-gal-nav:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .kx.p-boss-portfolio-item .gal .photo img{animation:none} }

/* Kuzatish (`boss-tracking`): dizayndagi chizma o'rnida haqiqiy xarita — telefonda 300, desktopda 600 px; ustidagi
   yorliq va tugmalar Leaflet qatlamlaridan yuqorida. */
.kx.p-boss-tracking .kx-trk-map{position:relative;overflow:hidden;height:300px;border-radius:var(--r-3);border:var(--bw-1) solid var(--c-line);background:var(--c-surface-2)}
@media (min-width:768px){ .kx.p-boss-tracking .kx-trk-map{height:600px} }
.kx.p-boss-tracking .kx-trk-map .map-canvas{position:absolute;inset:0;z-index:0}
.kx.p-boss-tracking .kx-trk-map .mlbl,.kx.p-boss-tracking .kx-trk-map .mctl,.kx.p-boss-tracking .kx-trk-map .mside{z-index:1}
.kx .mctl button{width:var(--h-tap);height:var(--h-tap);border-radius:50%;background:var(--c-surface);border:var(--bw-1) solid var(--c-line);
  box-shadow:var(--e-1);display:grid;place-items:center;color:var(--c-ink-2);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .mctl button:hover,.kx .mside a:hover,.kx .mside button:hover{background:var(--c-surface-2)}
.kx .mctl button:active,.kx .mside a:active,.kx .mside button:active{transform:scale(.94)}
.kx .mctl button:focus-visible,.kx .mside a:focus-visible,.kx .mside button:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}

/* To'lov (`boss-pay-job`): to'lov usuli qatori — bosiladigan. */
.kx .paym{transition:background-color var(--dur-1) var(--ease-out);border-radius:var(--r-2)}
.kx .paym:hover{background:var(--c-surface-2)}
.kx .paym:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}

/* Baho (`boss-rate`): yulduzlar — tugma, ustiga kelganda kattalashadi, tanlanganlari «pop». */
.kx .stars.inp .st-i{border:0;background:none;padding:0;cursor:pointer;border-radius:50%;transition:transform var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.kx .stars.inp .st-i:hover{transform:scale(1.12)}
.kx .stars.inp .st-i:active{transform:scale(.92)}
.kx .stars.inp .st-i:focus-visible{outline:3px solid var(--c-focus);outline-offset:-2px}
.kx .stars.inp .st-i.on svg{animation:kx-pop var(--dur-2) var(--ease-out)}
@keyframes kx-pop{50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){ .kx .stars.inp .st-i.on svg{animation:none} .kx .stars.inp .st-i:hover{transform:none} }

/* Qidiruv (`boss-searching`): haqiqiy xarita, qidiruv radiusi (kesikli doira, sekin «nafas oladi»), xabar olgan
   ustalarning anonim taxminiy belgilari. */
.kx.p-boss-searching .kx-srch-map{position:relative;overflow:hidden;height:260px;border-radius:var(--r-3);border:var(--bw-1) solid var(--c-line);background:var(--c-surface-2)}
@media (min-width:768px){ .kx.p-boss-searching .kx-srch-map{height:420px} }
.kx.p-boss-searching .kx-srch-map .map-canvas{position:absolute;inset:0;z-index:0}
.kx.p-boss-searching .kx-srch-map .marea,.kx.p-boss-searching .kx-srch-map .mme,.kx.p-boss-searching .kx-srch-map .kx-pins,
.kx.p-boss-searching .kx-srch-map .mlbl{z-index:1}
.kx.p-boss-searching .kx-pins{position:absolute;inset:0;pointer-events:none}
.kx.p-boss-searching .kx-pin{padding:0 7px;color:var(--c-ink-2);animation:kx-rise var(--dur-3) var(--ease-out) backwards;animation-delay:var(--pd,0s)}
.kx.p-boss-searching .marea{animation:kx-breathe 3s ease-in-out infinite}
@keyframes kx-breathe{50%{transform:translate(-50%,-50%) scale(1.04);opacity:.72}}
.kx .arr{transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.kx .arr:hover{transform:translateY(-1px);box-shadow:var(--e-1)}
@media (prefers-reduced-motion:reduce){ .kx.p-boss-searching .marea,.kx.p-boss-searching .kx-pin{animation:none} }

/* Buyurtma berish (`boss-new-order` va qadamlari): kasb qidiruvi — haqiqiy maydon, stepper, rasm eskizlari, xarita
   (markaziy nishon qotib turadi, xarita suriladi). */
.kx .search .kx-q{border:0;background:none;outline:none;font:inherit;color:var(--c-ink);min-width:0}
.kx .search:focus-within{box-shadow:0 0 0 3px var(--c-focus-ring,var(--c-brand-soft))}
.kx .kx-step{display:inline-flex;align-items:center;gap:var(--sp-3)}
.kx .kx-step .btn.sq{width:var(--h-tap);height:var(--h-tap);padding:0;font-size:var(--fs-400)}
.kx .kx-step b{min-width:72px;text-align:center;font-size:var(--fs-400)}
.kx .kx-step b small{font-size:var(--fs-200);color:var(--c-ink-3);font-weight:var(--fw-medium)}
.kx .kx-ph{position:relative;overflow:hidden}
.kx .kx-ph img{width:100%;height:100%;object-fit:cover}
.kx .kx-ph-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.kx .kx-hints{margin-top:var(--sp-2);animation:kx-rise var(--dur-2) var(--ease-out)}
.kx .kx-mapbox{position:relative;overflow:hidden;height:360px;border-radius:var(--r-3);border:var(--bw-1) solid var(--c-line);background:var(--c-surface-2)}
.kx .kx-mapbox.kx-mapfull{height:420px}
@media (min-width:768px){ .kx .kx-mapbox.kx-mapfull{height:560px} }
.kx .kx-mapbox .map-canvas{position:absolute;inset:0;z-index:0}
.kx .kx-mapbox .mlbl,.kx .kx-mapbox .mctl,.kx .kx-mapbox .mhint{z-index:1}
.kx .kx-mapbox-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:1;color:var(--c-brand);pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.kx .kx-mapbox-pin .i{fill:var(--c-brand);stroke:var(--c-surface)}
@media (prefers-reduced-motion:reduce){ .kx .kx-hints{animation:none} }
/* Xaritadan boshlash: «Qanday usta kerak?» — dizayndagidek bitta qator, gorizontal suriladi (20+ yo'nalish). */
.kx.p-boss-order-map .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.kx.p-boss-order-map .pills::-webkit-scrollbar{display:none}
.kx.p-boss-order-map .pills .pill{flex:none}

/* Buyurtma varaqlari (`kx/formsheets.js`): kunlar qatori ufq oxirigacha suriladi (yettitasi ko'rinadi — dizayndagidek),
   o'tib ketgan kun/soat — o'chiq ko'rinish, ko'chani joyida tahrirlash, haqiqiy belgilash katagi, yashirin select. */
.kx.p-boss-date-sheet .days{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px) / 7);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.kx.p-boss-date-sheet .days::-webkit-scrollbar{display:none}
.kx.p-boss-date-sheet .dchip{scroll-snap-align:start;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.kx .dchip:not(:disabled,.on):hover{border-color:var(--c-ink-3)}
.kx .dchip:disabled,.kx .pill:disabled{color:var(--c-ink-disabled);border-color:var(--c-line);background:var(--c-surface);cursor:not-allowed}
.kx .dchip:disabled small{color:inherit}
.kx .seg .is-off{color:var(--c-ink-disabled);cursor:not-allowed}
.kx .kx-apin-in{all:unset;display:block;box-sizing:border-box;width:100%;font-weight:var(--fw-semi);line-height:1.35;color:var(--c-ink);
  white-space:pre-wrap;overflow-wrap:anywhere;resize:none;overflow:hidden;field-sizing:content}
.kx .kx-apin-in::placeholder{color:var(--c-ink-3);font-weight:var(--fw-medium)}
.kx .apin:focus-within{box-shadow:0 0 0 3px var(--c-focus-halo)}
.kx .kx-chk{cursor:pointer;position:relative}
.kx .kx-chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kx .kx-chk i{transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.kx .kx-chk input:not(:checked) + i{background:var(--c-surface);border:1.5px solid var(--c-line-strong);color:transparent}
.kx .kx-chk input:focus-visible + i{box-shadow:0 0 0 3px var(--c-focus-halo)}
.kx .kx-pick{position:relative;cursor:pointer}
.kx .kx-pick select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}

/* Shoshilinch chaqiruv (`boss-urgent`): yon kartadagi haqiqiy xarita (fon, surilmaydi) va uning ustidagi belgilar. */
.kx.p-boss-urgent .urg-side .map-canvas{position:absolute;inset:0;z-index:0}
.kx.p-boss-urgent .urg-side .mdest,.kx.p-boss-urgent .urg-side .mlbl{z-index:1}
/* Qiymat hali yo'q («—», masalan AI tahlili ishga tushmagan) — xira, qalin emas. */
.kx .kv b.muted{color:var(--c-ink-3);font-weight:var(--fw-regular)}

/* Ovozli qidiruv (`kx/voice.js`): tinglash paytida to'lqin va mikrofon halqasi harakatda (dizaynda statik surat). */
@keyframes kx-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes kx-vox{from{transform:scale(.92);opacity:.9}to{transform:scale(1.06);opacity:.55}}
.kx .wave.live span{animation:kx-wave .9s ease-in-out infinite;animation-delay:calc(var(--i, 0) * -70ms)}
.kx .vox.live::before{animation:kx-vox 1.1s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){ .kx .wave.live span,.kx .vox.live::before{animation:none} }

/* Vakansiya ustasi (`kx/pages/vacnew.js`): «Batafsil sozlamalar» yig'masi, nuqta hali yo'q ish joyi. */
.kx .kx-more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);cursor:pointer;list-style:none;min-height:var(--h-tap)}
.kx .kx-more summary::-webkit-details-marker{display:none}
.kx .kx-more summary .i{color:var(--c-ink-3);transition:transform var(--dur-2) var(--ease-out)}
.kx .kx-more[open] summary .i{transform:rotate(180deg)}
.kx .kx-more > .stack{padding-top:var(--sp-2)}
.kx.p-boss-vac-review .map > .map-canvas{position:absolute;inset:0;z-index:0}
.kx.p-boss-vac-review .map > .mdest{z-index:1}
/* Nomzod rezyumesi: uzun talab (masalan ko'nikmalar ro'yxati) va qiymat o'raladi, ustma-ust chiqmaydi. */
.kx .rq .grow{min-width:0;overflow-wrap:anywhere}
.kx .rq b{max-width:45%;text-align:right;overflow-wrap:anywhere}
/* Chat rasmi (`boss-chat-photo`, `.pv`): haqiqiy rasm qatlamga sig'adi (kesilmaydi), eskizlarda ham rasm. */
.kx .kx-pv-img{background:none;overflow:hidden}
.kx .kx-pv-img img{width:100%;height:100%;object-fit:contain;display:block}
.kx .pv-th a{overflow:hidden}
.kx .pv-th a img{width:100%;height:100%;object-fit:cover;display:block}
.kx .pv-nav{border:0;cursor:pointer}
.kx .kx-vplace-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);color:var(--c-brand-ink);font-weight:var(--fw-semi);border-style:dashed}
.kx .kx-vplace-empty:hover{border-color:var(--c-brand)}
@media (prefers-reduced-motion:reduce){ .kx .kx-more summary .i{transition:none} }

/* ---- 5. Sahifa kirishi (Motion): faqat kontent — qobiq joyida turadi ---------------------- */
/* Bildirishnomalar sozlamasi — telefonda ruxsat yo'q (`pushperm.js`): push qatori ostida ogohlantirish va «Yoqish». */
.kx .tog .tx small.pp{color:var(--c-warn-ink);margin-top:2px}
.kx .tog .pp .link{font-size:inherit;padding:0;background:none;border:0;cursor:pointer}
/* Ish topish / Ishlar xaritasi (`worker-find-work`, `worker-jobs-map`): haqiqiy xarita (`map.js` jobsMap) belgilari
   dizayndagi `.mpin` kabi — oq «pill», qalin narx, tanlangani ko'k; 3D ikonka yo'q. Xarita katak (`.map`) ichida. */
.kx .mapcol .map,.kx .fm .map{position:relative;overflow:hidden}
.kx .mapcol .map > [data-map],.kx .fm .map > [data-map]{z-index:0}
.kx .mapcol .map .mlbl,.kx .mapcol .map .mctl,.kx .mapcol .map .prev,.kx .fm .map .mctl,.kx .fm .map .fm-top{z-index:500}
.kx .wj-pin-ico{display:none}
.kx .wj-pin-body{background:var(--c-surface);color:var(--c-ink);border-radius:999px;padding:6px 12px;font-size:var(--fs-200);font-weight:var(--fw-bold);
  box-shadow:0 2px 8px rgba(15,23,42,.18);border:var(--bw-1) solid var(--c-line);white-space:nowrap;gap:4px}
.kx .wj-pin.is-active .wj-pin-body{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.kx .wj-pin-ring{display:none}
.kx .wj-me-pulse{display:none}
/* Ish tafsiloti (`worker-job-detail`): taxminiy hudud doirasi — dizayndagi `.marea` kabi; yorliq xarita ustida. */
/* Xarita qatlamlari (Leaflet z-index 400+) sahifadan chiqib varaq/menyu ustiga tushmasin — har xarita o'z qatlamida. */
.kx .map{isolation:isolate}
.kx .map-area{fill:var(--c-brand-soft);fill-opacity:.55;stroke:var(--c-brand-line);stroke-width:2;stroke-dasharray:6 6}
.kx .map > [data-map] ~ .mlbl,.kx .map > [data-map] ~ .mctl,.kx .map > [data-map] ~ .vm-prev{z-index:500}
/* Aniq nuqta belgisi (`map.js` `pinIcon`: `showLocation`, joy tanlash). Uning uslubi faqat styles.css'da (`@layer legacy`)
   edi — `.kx` ichida `kxreset` uni brauzer standartiga qaytaradi, bo'sh <span> 0×0 bo'lib qolardi: xarita bor, belgi yo'q. */
.kx .map-pin{display:grid;place-items:center}
.kx .map-pin-dot{display:block;box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:var(--c-brand);
  border:3px solid var(--c-surface);box-shadow:0 0 0 6px var(--c-brand-line),0 4px 10px rgba(0,0,0,.28)}
.kx .wj-me-dot{position:absolute;width:18px;height:18px;left:-9px;top:-9px;border-radius:50%;background:var(--c-brand);border:3px solid var(--c-surface);
  box-shadow:0 0 0 8px var(--c-brand-line)}
.kx .wj-radius{fill:var(--c-brand-soft);fill-opacity:.55;stroke:var(--c-brand-line);stroke-width:2;stroke-dasharray:6 6}
.kx .wj-pin.is-active .wj-pin-ring{display:block}
/* Yo'lda (`worker-on-way`, keyin `route-*`): Leaflet belgilari dizayn markapida — ishchi `.mme` (jonli nuqta: yumshoq
   to'lqin, yangi nuqtaga 1 s da siljiydi), ish joyi `.dp` + `.mt.dst`; marshrut chizig'i dizayndagi `.ovl .rt` qalinligida;
   banner va tugmalar Leaflet qatlamlari (400+) ustida. */
.kx .kx-mk{background:none;border:0}
.kx .kx-mk.me{transition:transform 1s linear}
.kx .leaflet-zoom-anim .kx-mk.me{transition:none}
/* Jonli nuqta to'lqini — kit `.mme::after` (xg-pulse, dizayn 2026-09-26: to'liq doira, 2,2 s). */
.kx .kx-mk .mme.walk::after{background:var(--c-ok-ink)}
.kx .tk-route-casing{stroke-width:14}
.kx .tk-route{stroke-width:8}
.kx .tk-route-march{display:none}
.kx .tk-walk{stroke:var(--c-ok-ink)}
.kx .kx-mk .mme.walk::after{border-color:var(--c-ok-ink)}
.kx .map > [data-map] ~ .nvb,.kx .map > [data-map] ~ .mfab{z-index:500}
@media (prefers-reduced-motion:reduce){ .kx .kx-mk .mme::after{display:none} .kx .kx-mk.me{transition:none} }
.kx .m-main.kx-enter{animation:kx-push var(--dur-3) var(--ease-out) backwards}
.kx .m-main.kx-fade{animation:kx-rise var(--dur-enter) var(--ease-out) backwards}
@keyframes kx-push{from{opacity:0;transform:translateX(24px)}}
@keyframes kx-rise{from{opacity:0;transform:translateY(8px)}}
@media (min-width:768px){ @keyframes kx-push{from{opacity:0;transform:translateY(6px)}} }
@media (prefers-reduced-motion:reduce){
  .kx .m-main.kx-enter,.kx .m-main.kx-fade{animation:none}
  .kx-sheet-root .scrim,.kx-sheet-root .sheet{transition:none}
  .kx .btn:active,.kx .ib:active,.kx .pill:active{transform:none}
  .kx .cam .frame .scan{animation:none}
}

/* ---- 8. Kit tuzatishlari: dizayn CSS'i `a` ga yozilgan, sahifa `<button>` chiqaradi --------------------------
   Dizayn faylining o'zida (2026-09-26 da ham): `.stp a`, `.cnt-big a`, `.seg.lg a` ... — markapda `<button>`. Global
   reset tugmani 20px yalang'och belgiga aylantirardi (egasi telefonda ko'rgan: +/− ramkaga yopishgan, son markazda
   emas). `kit.css` avtomatik — tuzatish shu yerda. */
.kx .stp button{width:var(--h-tap);height:100%;display:grid;place-items:center;color:var(--c-ink);flex:none}
.kx .stp button:disabled{color:var(--c-ink-3);cursor:not-allowed}
.kx .stp button svg{transition:transform var(--dur-1) var(--ease-out)}
@media (hover:hover){.kx .stp button:not(:disabled):hover{color:var(--c-brand)}}
.kx .stp button:not(:disabled):active svg{transform:scale(.82)}
/* 44px tugmalar bilan son maydoni 72 -> 56px: umumiy eni dizayndagi (buzuq) izga yaqin, «batafsil» bir qatorda qoladi. */
.kx .stp b{min-width:56px}
.kx .cnt-big button{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--c-line-strong);display:grid;place-items:center;
  color:var(--c-ink);background:var(--c-surface);flex:none;transition:background-color var(--dur-1) var(--ease-out),
  border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .cnt-big button:disabled{color:var(--c-ink-3);border-color:var(--c-line);cursor:not-allowed}
@media (hover:hover){.kx .cnt-big button:not(:disabled):hover{background:var(--c-surface-2);border-color:var(--c-brand)}}
.kx .cnt-big button:not(:disabled):active{transform:scale(var(--press))}
/* Aylana (56px) raqam (48px, line-height 1) markazida — «ishchi» yozuvi pastida, blok o'rtasida emas. */
.kx:where(:not(.p-boss-crew-order)) .cnt-big{align-items:flex-start}
.kx:where(:not(.p-boss-crew-order)) .cnt-big > div{padding-top:4px}
.kx .seg.lg button,.kx:where(.p-auth-welcome) .seg button,.kx .thm .seg button{height:40px}
.kx:where(.p-boss-executors) .fgroup .seg button,.kx:where(.p-boss-boost-sheet,.p-boss-close-post,.p-boss-executors-fav,
  .p-boss-invite-sheet,.p-boss-mode-sheet,.p-boss-order-step2,.p-boss-post-stats,.p-boss-referral,.p-boss-resume-view,
  .p-boss-vac-apps,.p-boss-vac-new,.p-boss-vac-review,.p-boss-vac-step2) .seg button{min-height:var(--h-tap)}
.kx:where(.p-worker-conditions) .seg button{padding:0 4px}
.kx .seg.sm button{height:32px;padding:0 12px;font-size:var(--fs-200)}
.kx .fs .seg button{font-size:var(--fs-200)}
/* Pastki menyu: ikonkalar 22/28/26px edi — yozuvlar 2-3px siljirdi; ikonka joyi hamma bandda 28px. */
.kx .m-nav a > svg{margin-block:3px}
.kx .m-nav .me{margin-block:1px}

/* ---- 9. Harakat (dizayn 2026-09-26, `brand-motion`) — ilovaga moslash ---------------------------------------
   Kit kirish harakatini (kartalar ketma-ket, plitkalar, belgi, yaltirash) HAR chizishda beradi: dizayndagi statik
   sahifada bu bir marta. Ilovada ma'lumot jonli yangilanadi (ro'yxat, holat) — qayta chizilganda hammasi yana
   «sakrardi». Qoida: «Yangilash animatsiyasi yo'q — yangi element ro'yxatga yumshoq qo'shiladi». Shuning uchun kirish
   harakati faqat sahifa/varaq ochilgan oynada: `html.kx-anim` (app.js `markEnter`, ~2,4 s). Cheksiz harakatlar
   (puls, skelet, xarita belgisi, kod kursori) — doim. */
html:not(.kx-anim) .kx :is(.shell,.stack,.a-body,.st-card,.state,.s-main) > *,
html:not(.kx-anim) .kx :is(.a-h,.a-sub),
html:not(.kx-anim) .kx :is(.grid2,.grid3,.opts,.chips,.cats) > *,
html:not(.kx-anim) .kx .list > :is(.lnk,.item),
html:not(.kx-anim) .kx .card > .item,
html:not(.kx-anim) .kx .ic > .i,
html:not(.kx-anim) .kx :is(.av .on,.ib .dot,.m-nav .badge,.d-tabs .cnt,.count),
html:not(.kx-anim) .kx :is(.kpi b,.money-big),
html:not(.kx-anim) .kx :is(.spark span,.prog-bar span,.ost-track .fill,.mpin,.state-i),
html:not(.kx-anim) .kx .btn.pri::after{animation:none}
html:not(.kx-anim) .kx .mpin.on{animation:xg-bob 2.6s ease-in-out infinite}
/* Yaltirash `::after` da — `.is-busy` aylanmasi ham `::after` (yuqorida, 1-bo'lim). Band tugmada aylanma qoladi. */
.kx .btn.pri.is-busy::after{inset:0;left:0;width:18px;height:18px;margin:auto;background:none;transform:none;
  border:2px solid var(--c-on-brand);border-right-color:transparent;border-radius:50%;animation:kx-spin .7s linear infinite}
.kx .btn:is([disabled],.dis):active{transform:none}
/* Pastki varaq: ochilishi — kit (`xg-sheet` prujina, desktopda `xg-modal`); yopilishi — `is-out` (sheet.js). */
.kx-sheet-root .sheet{transition:opacity var(--dur-2) var(--ease-out)}
@keyframes kx-sheet-out{to{transform:translateY(100%)}}
@keyframes kx-modal-out{to{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
@keyframes kx-undim{to{opacity:0}}
.kx-sheet-root.is-out .sheet{animation:kx-sheet-out var(--dur-out) var(--ease-in) both}
.kx-sheet-root.is-out .scrim{animation:kx-undim var(--dur-out) ease both}
@media (min-width:768px){ .kx-sheet-root.is-out .sheet{animation:kx-modal-out var(--dur-out) var(--ease-in) both} }
@media (prefers-reduced-motion:reduce){ .kx-sheet-root.is-out .sheet,.kx-sheet-root.is-out .scrim{animation:none} }

/* ---- 10. Jonli sahna (`kx/scene.js`, dizayn 2026-09-26) --------------------------------------------------------
   Desktopda sahna brend panelida (`.a-scene`) bor — xush kelibsiz sahifasida asosiy ustundagi ikkinchisi takror
   bo'lardi (bitta ekranda ikki bir xil xarita): u faqat telefonda (panelsiz). Paneldagi `.a-side .ic` (oq, ro'yxat
   ikonkalari uchun) sahna kartasidagi ikonkani oq kartada ko'rinmas qilardi — dizayndagi kabi ko'k uya. */
@media (min-width:768px){ .kx.p-auth-welcome .a-main .a-top[data-scene]{display:none} }
.kx .a-side .scene .ic{background:var(--c-brand-soft);color:var(--c-brand-ink)}
/* Past telefonda (360×640) kitning yopishqoq `.a-foot` i (shaffof gradient bilan) til tanlagichni yopib qo'yardi:
   xush kelibsiz sahifasida u oqimda turadi — baland ekranda baribir pastda (`.a-body` flex:1), pastda esa sahifa
   aylanadi. Sahna balandligi ham ekranga qarab kichrayadi (`kx/scene.js` HERO_H) — 640 da hammasi bitta ekranga sig'adi. */
.kx.p-auth-welcome #welcomeStep .a-foot{position:static;background:none}

/* ---- 11. Kesilgan matn yo'q (2026-09-27, barcha 109 sahifa avtomatik tekshirildi, 393px) ------------------------
   Dizayndagi namuna matnlar qisqa — haqiqiy ma'lumotda ikkinchi qator «Bir martalik · 170 000 so'…» bo'lib narx,
   sana yoki manzil kesilardi. Muhim ma'lumot bor qatorlar ikki qatorgacha ko'chadi (raqamlar `kx/page.js` `num()` da
   bo'linmas bo'shliq bilan — «170 000 so'm» ajralmaydi), undan keyingina «…». */
/* Ro'yxat qatorlarining sarlavhasi va izohi (`.lnk`, `.rw`, `.item`, `.req`): sig'masa keyingi qatorga ko'chadi —
   360px telefonda va rus/ingliz matnlarida «Telefon ra…» bo'lib kesilmaydi. Qatorlar `min-height` bilan — balandlik
   faqat kerak bo'lganda o'sadi. Chat ro'yxati (`.crow`) bunga kirmaydi: u yerda bir qator — messenjer odati. */
.kx :is(.lnk,.rw,.item,.req,.txr,.dev) > .tx > :is(b,small){white-space:normal}
.kx .offer .who .grow > :is(b,small){white-space:normal}
/* Ustalar kartasi (desktop, 3 ustun): kasblar ro'yxati ikki qatorgacha. */
.kx .wcard .nm > small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Profil tahriridagi tanlov maydonlari (hudud, kasb): qiymat uzun bo'lsa maydon balandlashadi, qiymat kesilmaydi. */
.kx .ed-f a.input{height:auto;min-height:var(--h-control);padding-block:10px}
.kx .ed-f a.input .grow{white-space:normal}
/* 360px telefon: plitkalar (tezkor e'lon turlari, ishonch belgilari) ichki bo'shlig'i kichrayadi — yozuv sig'adi;
   qidiruvda faqat savol qoladi («Masalan: …» yashiriladi). */
@media (max-width:380px){
  .kx .xgrid a{padding-inline:var(--sp-2)}
  .kx .bg div{padding:var(--sp-2h);gap:var(--sp-2)}
  .kx .bg div .ic{width:32px;height:32px}
  .kx .search.m-only a.grow .ex{display:none}
}
.kx .item.jr .tx small,
.kx .lnk.add .tx small,
.kx:where(.p-worker-work-area) .rw .tx small,
.kx .tl .job small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.kx .vc .vt b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3}
/* Bosh sahifa qidiruvi (393px): «Qanday usta kerak? Masalan: santexnik» mikrofon yonida sig'maydi — tor telefonda
   yozuv 1px kichikroq (sig'adi), kengida dizayndagi o'lcham. */
@media (max-width:400px){ .kx .search.m-only a.grow{font-size:var(--fs-250);letter-spacing:-.005em} }
}

/* ---- Kirish (auth-*, F-auth): kit ramkasiga qo'shimchalar ------------------------------------------------ */
#authKx.kx{min-height:100vh}
/* Brauzerdagi mehmon (`html.guest-web`, ilova emas): Welcome o'rnida bosh sahifa (site-home, `#guestStep`) — istalgan
   enda. Kirish oynasi (forma, limit) ochilganda bosh sahifa yashiriladi (`showScreen` -> `#authView[data-screen]`). */
#guestStep{display:none}
html.guest-web #guestStep:not(.hidden){display:block}
html.guest-web #authView[data-screen="welcome"] #authKx{display:none}
/* Eski CSS `.kx` ichiga o'tmaydi — kirish ekranidagi o'z elementlarimiz shu yerda. */
.kx .code-real{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:var(--r-2);background:transparent;
  color:transparent;caret-color:transparent;text-align:center;font-size:16px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none}
.kx .code-real::selection{background:transparent;color:transparent}
.kx .auth-err{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-2);background:var(--c-bad-soft);
  color:var(--c-bad-ink);font-size:var(--fs-200);font-weight:var(--fw-medium);line-height:1.4}
.kx .auth-err:empty{display:none}
.kx .auth-err svg{flex:none}
.kx .google-slot{display:flex;align-items:center;justify-content:center;min-height:var(--h-control)}
.kx .google-slot iframe{color-scheme:light}
.kx .dev-code{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);background:var(--c-surface-2);color:var(--c-ink-2);font-size:var(--fs-200)}
.kx .auth-foot{max-width:960px;margin:0 auto;padding:var(--sp-7) var(--gut) var(--sp-8);font-size:var(--fs-200);line-height:1.6}
.kx .auth-foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-3)}
.kx .auth-foot a{color:var(--c-ink-2)}
.kx .link-inline{color:var(--c-link);font-weight:var(--fw-semi);text-decoration:underline}
.kx .code-in{position:relative;display:block;max-width:360px}
.kx .field .code-in .otp{max-width:360px}
.kx .auth-step{display:flex;flex-direction:column;gap:var(--sp-4)}
.kx .auth-step.is-bad .otp-c,.kx .auth-step.is-bad .input{border-color:var(--c-bad-ink)}
.kx .auth-step > .link{align-self:flex-start;min-height:44px;font-weight:var(--fw-semi)}
.kx .auth-step .rs-line b{color:var(--c-ink)}
.kx .otp-c.cur.f{border-color:var(--c-brand)}
.kx .a-foot .tiny{color:var(--c-ink-3);text-align:center;line-height:1.5}
.kx .a-foot .tiny a{color:var(--c-link);font-weight:var(--fw-semi)}
.kx .a-foot .google-slot{min-height:var(--h-control)}
.kx .a-foot .btn.ghost:disabled{background:none;box-shadow:none;color:var(--c-ink-3)}
.kx .a-sub .link{font-weight:var(--fw-semi)}
.kx:where(.p-auth-otp-limit,.p-auth-email-otp-limit) .ring{background:conic-gradient(var(--c-warn) 0 calc(var(--p,100) * 1%),var(--c-surface-3) 0)}
.kx:where(.p-auth-otp-limit,.p-auth-email-otp-limit) #limitWhen{justify-content:center}
.kx .auth-foot{color:var(--c-ink-3)}
/* Parol bilan kirish (auth-login / auth-register / auth-reset / auth-set-password, egasi 2026-10-07). 8px panjara:
   maydonlar orasi 16, yorliq-maydon 6 (kit `.field`), qoidalar 4/8. Ko'z tugmasi 40px (teginish 44 — maydon ichida). */
.kx .auth-form{display:flex;flex-direction:column;gap:var(--sp-4);margin:0}
.kx .input .in-ico{display:flex;flex:none;color:var(--c-ink-3);transition:color var(--dur-2) ease}
.kx .input:focus-within .in-ico{color:var(--c-brand-ink)}
.kx .pw-in{padding-right:4px}
.kx .pw-eye{all:unset;box-sizing:border-box;flex:none;width:40px;height:40px;border-radius:var(--r-1);display:grid;place-items:center;
  color:var(--c-ink-3);cursor:pointer;transition:background-color var(--dur-2) ease,color var(--dur-2) ease}
.kx .pw-eye:hover{background:var(--c-surface-2);color:var(--c-ink-2)}
.kx .pw-eye:active{transform:scale(.94)}
.kx .pw-eye:focus-visible{box-shadow:0 0 0 3px var(--c-focus-halo);color:var(--c-ink)}
.kx .pw-eye[aria-pressed="true"]{color:var(--c-brand-ink)}
.kx .pw-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.kx .pw-lbl .link{font-size:var(--fs-200);min-height:24px;display:inline-flex;align-items:center}
.kx .link:hover{text-decoration:underline;text-underline-offset:3px}
.kx .link:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;border-radius:4px}
/* Kuch ko'rsatkichi: 4 bo'lak — zaif (qizil) / o'rtacha (sariq) / yaxshi / kuchli (yashil); bo'laklar navbat bilan to'ladi. */
.kx .pw-meter{display:flex;align-items:center;gap:var(--sp-3);min-height:20px}
.kx .pw-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.kx .pw-bars i{height:4px;border-radius:2px;background:var(--c-surface-3);transition:background-color var(--dur-2) ease,transform var(--dur-2) var(--ease-out);transform-origin:left}
.kx .pw-meter-t{font-size:var(--fs-200);font-weight:var(--fw-semi);color:var(--c-ink-3);min-width:64px;text-align:right}
.kx .pw-meter[data-s="1"] .pw-bars i:nth-child(-n+1){background:var(--c-bad-ink)}
.kx .pw-meter[data-s="2"] .pw-bars i:nth-child(-n+2){background:var(--c-warn-ink)}
.kx .pw-meter[data-s="3"] .pw-bars i:nth-child(-n+3){background:var(--c-ok-ink)}
.kx .pw-meter[data-s="4"] .pw-bars i{background:var(--c-ok-ink)}
.kx .pw-meter[data-s="1"] .pw-meter-t{color:var(--c-bad-ink)}
.kx .pw-meter[data-s="2"] .pw-meter-t{color:var(--c-warn-ink)}
.kx .pw-meter[data-s="3"] .pw-meter-t,.kx .pw-meter[data-s="4"] .pw-meter-t{color:var(--c-ok-ink)}
.kx .pw-rules{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.kx .pw-rules li{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-200);color:var(--c-ink-3);transition:color var(--dur-2) ease}
.kx .pw-tick{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--c-line-strong);display:grid;place-items:center;flex:none;
  transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease}
.kx .pw-rules li.ok{color:var(--c-ok-ink)}
.kx .pw-rules li.ok .pw-tick{background:var(--c-ok-ink);border-color:var(--c-ok-ink)}
.kx .pw-rules li.ok .pw-tick::after{content:"";width:7px;height:4px;border:solid var(--c-bg);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}
.kx .pw-match:empty{display:none}
.kx .pw-match.ok{color:var(--c-ok-ink)}
.kx .pw-match.err{color:var(--c-bad-ink)}
/* Zaxira yo'l (SMS ishlamasa — email) — kichik havola, maydon ostida. */
.kx .auth-step > .alt-method{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--fs-200);color:var(--c-ink-2);font-weight:var(--fw-medium);white-space:normal;text-align:left}
.kx .auth-step > .alt-method:hover{color:var(--c-brand-ink)}
.kx .auth-step > .alt-method .i{flex:none}
/* Oqimlar orasidagi o'tish («Akkauntingiz yo'qmi? Ro'yxatdan o'tish»). */
.kx .a-alt{margin:var(--sp-1) 0 0;text-align:center;font-size:var(--fs-250);color:var(--c-ink-2)}
.kx .a-alt .link{font-size:inherit;min-height:44px;display:inline-flex;align-items:center}
.kx .auth-google{display:flex;flex-direction:column;gap:var(--sp-4)}
/* Xato qatoridagi havola («Parolni tiklash»). */
.kx .auth-err .link{color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px;white-space:normal}

/* ---- Ro'yxatdan o'tish sehrgari (auth-*, F-auth W1): kit ramkasiga qo'shimchalar -------------------------------- */
#wizKx.kx{min-height:100vh}
#wizardContent{display:flex;flex-direction:column;flex:1;min-height:0}
#wizardView .wiz-wsteps,#wizardTopTitle:empty{display:none}
#wizardView.wiz--no-progress #wizardBar{visibility:hidden}
#wizardBar .wiz-fill{width:var(--wiz-p,0%);transition:width .3s var(--ease-out,ease-out)}
@keyframes wizInF{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes wizInB{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
#wizardContent.wiz-in-fwd{animation:wizInF .22s ease-out}
#wizardContent.wiz-in-back{animation:wizInB .22s ease-out}
@media (prefers-reduced-motion:reduce){#wizardContent{animation:none!important}}
.kx button.opt{width:100%;text-align:left;cursor:pointer}
.kx .opt.selected{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-focus-halo)}
.kx .opt.selected .radio{border:6px solid var(--c-brand)}
.kx .opt.selected .ic{background:var(--c-brand-soft);color:var(--c-brand-ink)}
.kx button.cat{text-align:left;cursor:pointer}
.kx .cat .ck svg{display:none}
.kx .cat.selected .ck svg{display:block}
.kx:where(.p-auth-hire-cats) .cat.selected{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-focus-halo)}
.kx:where(.p-auth-hire-cats) .cat.selected .ck{background:var(--c-brand);border-color:var(--c-brand)}
.kx:where(.p-auth-hire-cats) .cat.selected .ic{background:var(--c-brand-soft);color:var(--c-brand-ink)}
.kx .sel-in{width:100%;text-align:left;cursor:pointer}
.kx .sel-in > svg:first-child,.kx .sel-in .chev{color:var(--c-ink-3);flex:none}
.kx .sel-in b{flex:1;min-width:0;font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .sel-in b.ph{color:var(--c-ink-3);font-weight:var(--fw-regular,400)}
.kx .sel-in:disabled{opacity:.5;cursor:not-allowed}
.kx .search-in input:placeholder-shown ~ [data-clear]{display:none}
.kx .field.has-error .input{border-color:var(--c-bad-ink)}
.kx .field-msg{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--c-bad-ink);font-size:var(--fs-200);font-weight:var(--fw-medium)}
.kx .field-msg svg{flex:none}
.kx button.pill{cursor:pointer}
.kx button.lnk.card{width:100%;text-align:left;cursor:pointer}
.kx .plist .lnk{width:100%;text-align:left;cursor:pointer}
.kx .ctx{justify-content:space-between;gap:var(--sp-2)}
.kx:where(.p-auth-geo-denied) .hi,.kx .hi{width:64px;height:64px;border-radius:var(--r-3);display:grid;place-items:center}
.kx .hi.bad{background:var(--c-bad-soft);color:var(--c-bad-ink)}
.kx .hw{padding:var(--sp-4) var(--sp-4) var(--sp-1)}
.kx:where(.p-auth-geo-denied) .hsteps{list-style:none;margin:0;padding:0 0 var(--sp-2)}
.kx:where(.p-auth-geo-denied) .hsteps li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-250)}
.kx:where(.p-auth-geo-denied) .hsteps li + li{border-top:var(--bw-1) solid var(--c-line)}
.kx:where(.p-auth-geo-denied) .hsteps .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-surface-2);color:var(--c-ink-2);display:grid;place-items:center;font-weight:var(--fw-semi);font-size:var(--fs-200)}
/* Sehrgar W2 — ishchi qadamlari */
.kx .opt.vc .chk i{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--c-line-strong);display:grid;place-items:center;color:var(--c-on-brand)}
.kx .opt.vc .chk svg{display:none}
.kx .opt.vc.selected .chk i{background:var(--c-brand);border-color:var(--c-brand)}
.kx .opt.vc.selected .chk svg{display:block}
.kx .pill.prof svg,.kx .pill.dir svg{display:none}
.kx .pill.prof.selected,.kx .pill.dir.checked{background:var(--c-brand-soft);border-color:var(--c-brand);color:var(--c-brand-ink)}
.kx .pill.prof.selected svg,.kx .pill.dir.checked svg{display:inline-block}
.kx .section-toggle{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:44px;text-align:left;cursor:pointer}
.kx .section-toggle .ic{width:32px;height:32px}
.kx .section-toggle .over{flex:1;min-width:0}
.kx .section .arr{color:var(--c-ink-3);transition:transform .2s}
.kx .section.open .arr{transform:rotate(180deg)}
.kx .section:not(.open) .section-body{display:none}
.kx .section-inner{padding:var(--sp-1) 0 var(--sp-3)}
.kx .dirs{padding:0 var(--sp-4) var(--sp-3)}
.kx .dirs .chips{margin-top:var(--sp-2)}
.kx .seg .selected{background:var(--c-seg-thumb);color:var(--c-ink);font-weight:var(--fw-semi);box-shadow:var(--e-seg)}
.kx .seg button svg{margin-right:4px}
.kx .phone-in .ok-ico{display:none;color:var(--c-ok-ink);margin-left:auto}
.kx .phone-in.is-valid .ok-ico{display:block}
.kx .pv-ok:not(.is-shown){display:none}
.kx .pv-in img{width:100%;height:100%;object-fit:cover}
.kx .has-photo .pv-in{place-items:center}
.kx button.rw{width:100%;text-align:left;cursor:pointer}
.kx .rw .st{margin-top:6px}
.kx .mctl button{cursor:pointer}
/* Bloklangan hisob (auth-blocked) */
#blockedView .kx.auth{min-height:100vh}
/* Faqat shu sahifada: `.wal` nomi «Xizmat hududi» (`.layout.wal`, grid) da ham bor — qatlamsiz umumiy `.kx .wal{flex}`
   u yerda xaritani 0 kenglikka siqib qo'yardi. */
.kx:where(.p-auth-blocked) .wal{display:flex;align-items:center;gap:var(--sp-3)}
.kx:where(.p-auth-blocked) .wal b{display:block;font-size:var(--fs-250);font-weight:var(--fw-semi)}
.kx:where(.p-auth-blocked) .wal small{display:block;font-size:var(--fs-200);color:var(--c-ink-3);margin-top:2px}
.kx:where(.p-auth-blocked) .a-foot .row{gap:var(--sp-2)}
.kx:where(.p-auth-blocked) .a-foot .row .btn{flex:1}
/* Sessiya ochilmadi (`renderBootError`): kit auth ramkasida `boss-offline` / `boss-error` mazmuni */
#bootView .kx.auth{min-height:100vh}
.kx:where(.p-auth-boot) .hi.mute{background:var(--c-surface-2);color:var(--c-ink-2)}
.kx:where(.p-auth-boot) .hi.warn{background:var(--c-warn-soft);color:var(--c-warn-ink)}
.kx:where(.p-auth-boot) .a-h:focus{outline:none}
.kx:where(.p-auth-boot) .a-body .ecode{align-self:flex-start;margin-top:0}
.kx:where(.p-auth-boot) .a-foot .row{gap:var(--sp-2)}
.kx:where(.p-auth-boot) .a-foot .row .btn{flex:1}
/* To'liq ekranli ramkalar (kirish, sehrgar, blok): o'ngda bo'sh gutter chizig'i qolmasin — dizaynda panel chetgacha */
html:has(> body > #authView:not(.hidden)),html:has(> body > #wizardView:not(.hidden)),html:has(> body > #blockedView:not(.hidden)),
html:has(> body > #bootView:not(.hidden)){scrollbar-gutter:auto}
/* Splash (auth-splash): qatlam `#splash` — eski qoidalarda (ko'rsatish/so'nish), ichi — kit `.spl`. Belgi yumshoq
   paydo bo'ladi, yuklanish chizig'i yuguradi (dizaynda statik 45%). */
#splash > .kx{position:absolute;inset:0}
#splash .spl{height:100%;min-height:0}
#splash .spl-mark{animation:kx-spl-pop .5s var(--ease-out) both}
#splash .spl-name,#splash .spl-tag{animation:kx-spl-up .5s .12s var(--ease-out) both}
#splash .spl-load span{animation:kx-spl-load 1.1s ease-in-out infinite}
@keyframes kx-spl-pop{from{opacity:0;transform:scale(.86)}}
@keyframes kx-spl-up{from{opacity:0;transform:translateY(8px)}}
@keyframes kx-spl-load{from{transform:translateX(-100%)}to{transform:translateX(225%)}}
/* Tanishuv (auth-intro): qatlam `#introView` (eski `.intro` — qotirilgan, butun ekran), ichi — kit auth ramkasi. */
#introView{overflow-y:auto;background:var(--c-bg)}
#introView > .kx{flex:1 0 auto}
#introView .in-next{animation:kx-in-next .28s var(--ease-out)}
#introView .in-prev{animation:kx-in-prev .28s var(--ease-out)}
@keyframes kx-in-next{from{opacity:0;transform:translateX(16px)}}
@keyframes kx-in-prev{from{opacity:0;transform:translateX(-16px)}}
.kx .dots button{position:relative;width:var(--h-dot);height:var(--h-dot);border-radius:999px;background:var(--c-surface-3);transition:width .2s var(--ease-out),background-color .2s}
.kx .dots button.on{width:var(--w-dot-on);background:var(--c-brand)}
.kx .dots button::after{content:"";position:absolute;inset:-18px -3px}
.kx .dots button:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}
@media (max-width:359.98px){#introView .art-chip{height:36px;gap:4px;padding:0 8px 0 4px;font-size:11px}#introView .art-chip .ic{width:26px;height:26px}
  #introView .art-chip .ic svg{width:15px;height:15px}#introView .art-chip.c1{left:3%}#introView .art-chip.c2{right:3%}}
@media (prefers-reduced-motion:reduce){#splash .spl-mark,#splash .spl-name,#splash .spl-tag,#splash .spl-load span,#introView .in-next,#introView .in-prev{animation:none}}
/* Kamera oynasi (camera.js): selfi va «ruxsat yo'q» — kit auth ramkasi butun ekran ustida (telefonda kit `.cam` o'zi
   butun ekran); hujjat/oddiy kamera — telefonda butun ekran, kompyuterda qoraytirilgan fon ustida karta. */
.kx.cam-root{position:fixed;inset:0;z-index:400}
.kx.cam-page{overflow-y:auto}
@media (min-width:768px){.kx.cam-modal{display:grid;place-items:center;padding:var(--sp-6);background:var(--dk-overlay)}
  .kx.cam-modal .cam{width:min(480px,100%);height:min(640px,calc(100vh - 48px))}}
.kx .cam.is-mirror .cam-view video{transform:scaleX(-1)}
.kx .oval svg{transition:opacity var(--dur-2) var(--ease-out)}
.kx .cam.is-live .oval svg{opacity:0}
.kx .howto .over{padding:var(--sp-4) var(--sp-4) var(--sp-1)}
.kx:where(.p-auth-camera-denied) .howto{align-self:stretch;text-align:left}
.kx:where(.p-auth-camera-denied) .hint-row{text-align:left;margin-top:var(--sp-3)}
/* Oval (selfi) video ustida chizilsin: video — `position:absolute`, oval esa oqimda edi va ostida qolib ketardi. */
.kx .cam-view .oval{position:relative}
/* To'liq ekranli kamera/ruxsat oynasi ochiq — orqadagi sahifa aylanmaydi, o'ngda bo'sh gutter chizig'i qolmaydi. */
html:has(> body > .cam-page){overflow:hidden;scrollbar-gutter:auto}
/* Xabarnoma (toast) — yangi dizayn `worker-toast` (`ui.js` `toast()`): to'q plashka (--c-elevated), chiziqli ikonka
   holat rangida, matn, ko'pi bilan 1 amal (44px), kerak bo'lsa ×. Telefonda — pastki menyu ustida, kompyuterda — pastda
   chapda (400px). `#toast` kit ildizidan tashqarida — eski `.toast` qoidalarining joylashuvi shu yerda almashtiriladi. */
#toast.toast{top:auto;bottom:calc(80px + env(safe-area-inset-bottom));left:var(--sp-3);right:var(--sp-3);max-width:none;margin:0;
  min-height:56px;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);gap:var(--sp-3);border-radius:var(--r-toast);
  font-size:var(--fs-250);font-weight:var(--fw-medium);line-height:1.35;
  transform:translateY(12px);transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),visibility 0s .24s}
#toast.toast.show{transform:none;animation:kx-toast-in .28s var(--ease-out) backwards;pointer-events:auto}
@keyframes kx-toast-in{from{opacity:0;transform:translateY(16px)}}
#toast .ti{flex:none;color:var(--dk-ok)}
#toast.bad .ti{color:var(--dk-bad-ink)}
#toast.warn .ti{color:var(--c-accent)}
#toast.info .ti{color:var(--c-toast-link)}
#toast .grow{flex:1;min-width:0;overflow-wrap:anywhere}
#toast .grow small{display:block;font-size:var(--fs-200);opacity:.75;font-weight:400}
#toast .ta{flex:none;height:44px;padding:0 var(--sp-3);border:0;border-radius:var(--r-2);background:none;display:grid;place-items:center;
  color:var(--c-toast-link);font:inherit;font-weight:var(--fw-semi);white-space:nowrap;cursor:pointer}
#toast .ta:hover{background:rgba(255,255,255,.08)}
#toast .tx{flex:none;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--c-on-elevated);opacity:.7;
  cursor:pointer}
#toast .tx:hover{opacity:1}
#toast svg.i{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:768px){#toast.toast{left:var(--sp-5);right:auto;bottom:var(--sp-5);width:400px}}
@media (prefers-reduced-motion:reduce){#toast.toast,#toast.toast.show{animation:none;transition:none}}

/* ---- Taksi uslubidagi «Yangi ish» kartochkasi (kx/offercard.js, egasi qarori 2026-10-01) --------------------------
   Ilova ustida: pastdan chiqadigan karta (telefonda butun kenglik, desktopda markazda 420px). Yuqorida taxminiy joy
   xaritasi va to'lqin; sanoq halqasi 55 → 0, oxirgi 10 soniyada qizil. Harakat kamaytirilsa — o'tishlarsiz. */
.kx.tx{position:fixed;inset:0;z-index:450;display:grid;align-items:end;justify-items:center;pointer-events:none}
.kx.tx:empty{display:none}
.kx.tx .tx-back{position:absolute;inset:0;background:var(--c-overlay);opacity:0;transition:opacity var(--dur-2,.24s) var(--ease-out)}
.kx.tx .tx-card{position:relative;width:100%;max-width:480px;background:var(--c-surface);border-radius:var(--r-3) var(--r-3) 0 0;
  box-shadow:var(--e-sheet);overflow:hidden;transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.9,.25,1.15);
  padding-bottom:env(safe-area-inset-bottom);pointer-events:auto}
.kx.tx.show .tx-back{opacity:1;pointer-events:auto}
.kx.tx.show .tx-card{transform:none}
@media (min-width:768px){.kx.tx{align-items:center}.kx.tx .tx-card{max-width:420px;border-radius:var(--r-3);transform:translateY(24px) scale(.97);opacity:0;transition:transform .28s var(--ease-out),opacity .2s}
  .kx.tx.show .tx-card{transform:none;opacity:1}}
.kx.tx .tx-map{position:relative;z-index:0;height:168px;background:var(--c-surface-2)}
.kx.tx .tx-body{position:relative;z-index:1}
.kx.tx .tx-map .leaflet-container{position:absolute;inset:0;background:var(--c-surface-2)}
.kx.tx .tx-pulse{position:absolute;left:50%;top:50%;z-index:500;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--c-brand);box-shadow:0 0 0 4px var(--c-surface)}
.kx.tx .tx-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c-brand);animation:tx-wave 1.6s var(--ease-out) infinite}
@keyframes tx-wave{from{transform:scale(1);opacity:.7}to{transform:scale(5);opacity:0}}
.kx.tx .tx-body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.kx.tx .tx-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.kx.tx .tx-kicker{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-200);font-weight:var(--fw-semi);color:var(--c-brand-ink);
  background:var(--c-brand-soft);border-radius:999px;padding:4px 10px}
.kx.tx .tx-timer{position:relative;width:60px;height:60px;flex:none;display:grid;place-items:center;margin-top:-46px;background:var(--c-surface);
  border-radius:50%;box-shadow:var(--e-2)}
.kx.tx .tx-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.kx.tx .tx-trk{fill:none;stroke:var(--c-surface-2);stroke-width:5}
.kx.tx .tx-arc{fill:none;stroke:var(--c-brand);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .2s}
.kx.tx .tx-timer b{position:relative;font-size:var(--fs-400);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--c-ink)}
.kx.tx.urgent .tx-arc{stroke:var(--c-bad)}
.kx.tx.urgent .tx-timer b{color:var(--c-bad-ink)}
.kx.tx .tx-title{margin:var(--sp-3) 0 2px;font-size:var(--fs-500);font-weight:var(--fw-bold);letter-spacing:var(--ls-title);color:var(--c-ink)}
.kx.tx .tx-meta{margin:0;font-size:var(--fs-250);color:var(--c-ink-3)}
.kx.tx .tx-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}
.kx.tx .tx-facts > div{background:var(--c-surface-2);border-radius:var(--r-2);padding:var(--sp-3)}
.kx.tx .tx-facts small{display:block;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx.tx .tx-facts b{display:block;margin-top:2px;font-size:var(--fs-400);font-weight:var(--fw-bold);color:var(--c-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.kx.tx .tx-pill{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-size:var(--fs-200);color:var(--c-ink-2);
  background:var(--c-surface-2);border-radius:999px;padding:4px 10px}
.kx.tx .tx-note{display:flex;align-items:center;gap:6px;margin:var(--sp-3) 0 0;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx.tx .tx-acts{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-2);margin-top:var(--sp-4)}
.kx.tx .tx-acts .btn{height:56px;font-size:var(--fs-350);font-weight:var(--fw-bold)}
.kx.tx .tx-take{position:relative;overflow:hidden}
.kx.tx .tx-take.busy{opacity:.8;cursor:progress}
@media (prefers-reduced-motion:reduce){.kx.tx .tx-card,.kx.tx .tx-back,.kx.tx .tx-arc{transition:none}.kx.tx .tx-pulse::after{animation:none}}
/* Yotiq telefon (balandlik ≤ 500px): karta ekrandan oshib «Olaman» kesilardi. Karta ekran balandligidan oshmaydi va o'zi
   aylanadi; xarita yashiriladi (joy faqat taxminiy — matnda tuman bor), sanoq halqasi xaritaga chiqmaydi, amallar
   pastda yopishib turadi. */
.kx.tx .tx-card{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
@media (orientation:landscape) and (max-height:500px){
  .kx.tx .tx-card{max-height:calc(100dvh - var(--sp-2) * 2)}
  .kx.tx .tx-map{display:none}
  .kx.tx .tx-timer{margin-top:0;width:48px;height:48px}
  .kx.tx .tx-body{padding:var(--sp-3) var(--sp-5) 0}
  .kx.tx .tx-title{margin-top:var(--sp-2);font-size:var(--fs-450)}
  .kx.tx .tx-facts{margin-top:var(--sp-3)}
  .kx.tx .tx-facts > div{padding:var(--sp-2) var(--sp-3)}
  .kx.tx .tx-acts{position:sticky;bottom:0;z-index:2;margin:var(--sp-3) calc(var(--sp-5) * -1) 0;padding:var(--sp-3) var(--sp-5);
    background:var(--c-surface);border-top:var(--bw-1) solid var(--c-line)}
  .kx.tx .tx-acts .btn{height:48px}
}
/* Faollik (egasi 2026-10-13, `kx/offercard.js`): ball belgisi, «O'tkazish» ostidagi rad narxi, sabab tanlovi. */
.kx.tx [hidden]{display:none!important}
.kx.tx .tx-sub{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.kx.tx .tx-sub .tx-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kx.tx .tx-score{display:inline-flex;align-items:center;gap:4px;flex:none;padding:3px 8px;border-radius:999px;font-size:var(--fs-200);
  font-weight:var(--fw-semi);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--c-ok-soft);color:var(--c-ok-ink)}
.kx.tx .tx-score.lv-mid{background:var(--c-warn-soft);color:var(--c-warn-ink)}
.kx.tx .tx-score.lv-low{background:var(--c-bad-soft);color:var(--c-bad-ink)}
.kx.tx .tx-skip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.15}
.kx.tx .tx-cost{display:block;font-size:var(--fs-100);font-weight:var(--fw-medium,500);color:var(--c-ink-3);white-space:nowrap}
.kx.tx .tx-cost.pay{color:var(--c-bad-ink)}
.kx.tx .tx-why{margin-top:var(--sp-4);animation:tx-why-in .2s var(--ease-out)}
.kx.tx .tx-why-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.kx.tx .tx-why-h b{font-size:var(--fs-300);font-weight:var(--fw-semi);color:var(--c-ink)}
.kx.tx .tx-why-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.kx.tx .tx-why-g .btn{height:48px;font-weight:var(--fw-semi)}
.kx.tx .tx-why-back{display:block;margin:var(--sp-2) auto 0}
@keyframes tx-why-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kx.tx .tx-why{animation:none}}

/* Faollik kartochkasi (ishchi bosh sahifasi) va varag'i — `kx/activity.js`. Rang: yashil ≥ 70, sariq 30–69, qizil < 30. */
.kx :is(.act-card,.act-sheet){--act:var(--c-ok)}
.kx .act-card{overflow:hidden}
.kx :is(.act-card,.act-sheet).lv-mid{--act:var(--c-warn)}
.kx :is(.act-card,.act-sheet).lv-low{--act:var(--c-bad)}
.kx .act-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:72px;padding:var(--sp-3) var(--sp-4);background:none;border:0;
  color:var(--c-ink);text-align:left;cursor:pointer;font:inherit}
.kx .act-row:hover{background:var(--c-surface-2)}
.kx .act-row:active{transform:scale(.99)}
.kx .act-row:focus-visible{outline:2px solid var(--c-brand);outline-offset:-2px}
.kx .act-row .grow{flex:1;min-width:0}
.kx .act-row .grow b{display:block;font-size:var(--fs-300);font-weight:var(--fw-semi)}
.kx .act-row .grow small{display:block;font-size:var(--fs-200);color:var(--c-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .act-row .grow .act-free{color:var(--c-ink-2)}
.kx .act-g{position:relative;display:grid;place-items:center;flex:none}
.kx .act-g svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.kx .act-trk{fill:none;stroke:var(--c-surface-2);stroke-width:5}
.kx .act-arc{fill:none;stroke:var(--act);stroke-width:5;stroke-linecap:round}
.kx .act-g b{position:relative;font-size:var(--fs-300);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--c-ink)}
.kx .act-hero{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) 0 var(--sp-3)}
.kx .act-hero .act-g b{font-size:var(--fs-500)}
.kx .act-hero .grow{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0}
.kx .act-hero .grow > b{font-size:var(--fs-350);font-weight:var(--fw-semi);color:var(--c-ink)}
.kx .act-h{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-200);font-weight:var(--fw-semi);letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-3)}
.kx .act-rules,.kx .act-log{list-style:none;margin:0;padding:0}
.kx .act-rules li,.kx .act-log li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:40px;
  border-bottom:var(--bw-1) solid var(--c-line);font-size:var(--fs-250);color:var(--c-ink)}
.kx .act-rules li:last-child,.kx .act-log li:last-child{border-bottom:0}
.kx .act-rules li.act-n{min-height:32px;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx .act-rules b,.kx .act-log > li > b{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);white-space:nowrap}
.kx .act-log li{min-height:48px}
.kx .act-log .grow{min-width:0}
.kx .act-log .grow b{display:block;font-weight:var(--fw-medium,500)}
.kx .act-log .grow small{display:block;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx :is(.act-rules,.act-log) .up{color:var(--c-ok-ink)}
.kx :is(.act-rules,.act-log) .down{color:var(--c-bad-ink)}
.kx :is(.act-rules,.act-log) .zero{color:var(--c-ink-3)}
@media (prefers-reduced-motion:no-preference){.kx .act-arc{transition:stroke-dashoffset .6s var(--ease-out)}.kx .act-row{transition:background-color var(--dur-2) ease,transform var(--dur-1) ease}}

/* Ikki qatorli tugma (`.b2l`, Ish tafsiloti «Naqd oldim — yakunlash» + summa): 393px telefonda matn kesilmaydi —
   amal yuqorida, summa pastda kichikroq; juda tor bo'lsa ham qatorga o'raladi. */
.kx .btn.b2l{height:auto;min-height:var(--h-control);min-width:0;padding-block:6px;white-space:normal;text-align:left}
.kx .btn.b2l > svg{flex:none}
.kx .btn.b2l .b2{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.kx .btn.b2l .b2 b{font-weight:inherit}
.kx .btn.b2l .b2 small{margin-top:2px;font-size:var(--fs-200);font-weight:var(--fw-medium);opacity:.86;font-variant-numeric:tabular-nums}

/* ---- «Qidirilmoqda»: taksi tarqatish chizig'i (kx/pages/searching.js, kx/dispatchview.js) ---------------------------- */
.kx .dsp{display:grid;gap:6px;padding-bottom:var(--sp-3);border-bottom:var(--bw-1) solid var(--c-line)}
.kx .dsp-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.kx .dsp-row b{font-size:var(--fs-300);font-weight:var(--fw-semi);color:var(--c-ink)}
.kx .dsp-s{font-size:var(--fs-250);font-weight:var(--fw-semi);color:var(--c-brand-ink);font-variant-numeric:tabular-nums}
.kx .dsp-bar{height:6px;border-radius:999px;background:var(--c-surface-2);overflow:hidden}
.kx .dsp-bar i{display:block;height:100%;background:var(--c-brand);transform-origin:left;transform:scaleX(0);transition:transform .5s linear}
.kx .dsp-steps{display:flex;gap:4px}
.kx .dsp-steps i{flex:1;height:3px;border-radius:2px;background:var(--c-surface-3,var(--c-line))}
.kx .dsp-steps i.on{background:var(--c-brand)}
.kx .dsp small{font-size:var(--fs-200);color:var(--c-ink-3)}
@media (prefers-reduced-motion:reduce){.kx .dsp-bar i{transition:none}}

/* ---- Ilova (APK) ichida — veb belgilarisiz (appback.js `html.xg-app`): matnni uzoq bosib belgilash, tizim menyusi,
   bosilganda ko'k chaqnash va chetdan tortilganda «cho'zilish» yo'q. Kiritish maydonlari va xabar matni tanlanadi. */
html.xg-app{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
html.xg-app body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
html.xg-app :is(input,textarea,[contenteditable="true"],.selectable,.msgs .msg){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
html.xg-app img{-webkit-user-drag:none}

/* ---- «Yangi ishlar o'z vaqtida kelsin» — fonda ishlash maslahati (kx/bgsheet.js) ---------------------------------- */
.kx .bg-step{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-2);background:var(--c-surface-2)}
.kx .bg-step b{display:block;font-size:var(--fs-300);color:var(--c-ink)}
.kx .bg-step small{display:block;margin-top:2px;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx .bg-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--c-brand);color:var(--c-on-brand);font-weight:var(--fw-bold);font-size:var(--fs-250)}
.kx .bg-step .btn{flex:none;background:var(--c-surface);border:var(--bw-1) solid var(--c-line-strong);color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx .bg-step .btn.done{background:var(--c-ok-soft);border-color:transparent;color:var(--c-ok-ink)}

/* ---- «Go» ekrani — telefonda buyurtma → qidiruv → kuzatuv BITTA xarita ustida (kx/pages/go.js, egasi 2026-10-05) ----
   Xarita butun ekran; ustida: yuqorida «Orqaga» + yorliq (yaqindagi ustalar / ETA), markazda qotirilgan pin (xarita
   suriladi), pin ostida manzil, pastda varaq (bosqich almashganda faqat u almashadi, balandligi silliq o'zgaradi).
   `--go-y` — pinning px o'rni (ko'rinadigan maydon markazi), `--go-sh` — varaq balandligi (JS o'lchaydi). */
.kx.p-boss-go .m-main{padding:0}
.kx.p-boss-go .m-main.kx-enter,.kx.p-boss-go .m-main.kx-fade{animation:none}
.kx .go{position:fixed;inset:0;z-index:4;overflow:hidden;background:var(--c-surface-2);overscroll-behavior:none;
  --go-y:50%;--go-sh:0px;--go-ring:240px}
.kx .go-map{position:absolute;inset:0;z-index:0;isolation:isolate;background:var(--c-surface-2)}

/* Pin: bosh + oyoq + yerdagi soya; xarita surilayotganda ko'tariladi, to'xtaganda qo'nadi. */
.kx .go-pin{position:absolute;left:var(--go-x,50%);top:var(--go-y);z-index:3;width:0;height:0;pointer-events:none}
.kx .go-pin-head{position:absolute;left:-18px;bottom:20px;width:36px;height:36px;border-radius:50%;background:var(--c-brand);
  box-shadow:0 8px 18px rgba(26,108,232,.32),0 2px 4px rgba(16,24,40,.18);display:grid;place-items:center;
  transition:transform var(--dur-2) var(--ease-out)}
.kx .go-pin-head i{width:12px;height:12px;border-radius:50%;background:var(--c-surface)}
.kx .go-pin-leg{position:absolute;left:-1.5px;bottom:1px;width:3px;height:21px;border-radius:2px;background:var(--c-brand);
  transition:transform var(--dur-2) var(--ease-out)}
.kx .go-pin-dot{position:absolute;left:-5px;top:-3px;width:10px;height:6px;border-radius:50%;background:rgba(16,24,40,.32);
  transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.kx .go.is-moving .go-pin-head,.kx .go.is-moving .go-pin-leg{transform:translateY(-12px)}
.kx .go.is-moving .go-pin-dot{transform:scale(1.5);opacity:.45}
.kx .go.was-moving:not(.is-moving) .go-pin-head{animation:go-land .38s var(--ease-out)}
@keyframes go-land{0%{transform:translateY(-12px)}60%{transform:translateY(2px)}100%{transform:none}}
/* Buyurtma berildi — pin yerga «tushadi», o'rnini buyurtma nuqtasi (`.go-dest`) oladi. */
.kx .go.is-dropping .go-pin{display:block!important;animation:go-drop .42s var(--ease-in) forwards}
@keyframes go-drop{to{opacity:0;transform:translateY(8px) scale(.6)}}

.kx .go-addr{position:absolute;left:var(--go-x,50%);top:calc(var(--go-y) + 14px);z-index:3;transform:translateX(-50%);
  max-width:calc(100% - 96px);height:36px;padding:0 8px 0 14px;border-radius:999px;background:var(--c-surface);color:var(--c-ink);
  box-shadow:var(--e-2);display:flex;align-items:center;gap:2px;font-size:var(--fs-250);font-weight:var(--fw-semi);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.kx .go-addr[hidden]{display:none}
.kx .go-addr-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .go-addr .i{color:var(--c-ink-3);flex:none}
.kx .go-addr.is-empty{color:var(--c-brand-ink)}
.kx .go-addr.is-moving{opacity:.55;transform:translateX(-50%) translateY(4px)}
.kx .go-addr:active{transform:translateX(-50%) scale(var(--press))}

/* Yuqori qator: «Orqaga», yorliq, «hammasini ko'rsatish». */
.kx .go-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;gap:var(--sp-2);
  padding:calc(env(safe-area-inset-top) + var(--sp-3)) var(--sp-4) 0;pointer-events:none}
.kx .go-top > *{pointer-events:auto}
.kx .go-top::after{content:"";width:var(--h-tap);flex:none}
.kx .go-top:has(.go-fab[data-fit]:not([hidden]))::after{display:none}
.kx .go-top [data-fit]{margin-left:auto}
.kx .go-fab{width:var(--h-tap);height:var(--h-tap);border-radius:50%;background:var(--c-surface);color:var(--c-ink);
  box-shadow:var(--e-2);display:grid;place-items:center;flex:none;
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),bottom .34s var(--ease-out)}
.kx .go-fab[hidden]{display:none}
.kx .go-fab:hover{background:var(--c-surface-2)}
.kx .go-fab:active{transform:scale(var(--press))}
.kx .go-fab.is-busy{color:var(--c-brand-ink)!important}
.kx .go-fab.is-busy > *{visibility:visible;animation:kx-spin 1s linear infinite}
.kx .go-fab.is-busy::after{display:none}
.kx .go-chip{margin:0 auto;min-width:0;max-width:100%;height:36px;padding:0 var(--sp-3h);border-radius:999px;background:var(--c-surface);
  box-shadow:var(--e-2);display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-250);font-weight:var(--fw-semi);color:var(--c-ink);
  white-space:nowrap;overflow:hidden;animation:go-pop var(--dur-2) var(--ease-out)}
.kx .go-chip[hidden]{display:none}
.kx .go-chip b{font-variant-numeric:tabular-nums}
.kx .go-chip .i{color:var(--c-brand-ink);flex:none}
.kx .go-chip.is-none{color:var(--c-ink-2)}
.kx .go-live{width:8px;height:8px;border-radius:50%;background:var(--c-success);flex:none;box-shadow:0 0 0 0 rgba(47,158,68,.5);
  animation:go-live 2s ease-out infinite}
.kx .go-chip.is-none .go-live{background:var(--c-ink-3);animation:none}
@keyframes go-live{70%{box-shadow:0 0 0 7px rgba(47,158,68,0)}100%{box-shadow:0 0 0 0 rgba(47,158,68,0)}}
@keyframes go-pop{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.kx .go-ctl{position:absolute;right:var(--sp-4);bottom:calc(var(--go-sh) + var(--sp-3));z-index:4;display:flex;flex-direction:column;gap:var(--sp-2);
  transition:bottom .34s var(--ease-out)}
.kx .go-zoom{display:none}
.kx .go-classic{display:none}

/* Xarita belgilari (Leaflet divIcon). */
.go-cell,.go-near,.go-dest{display:grid;place-items:center}
.go-cell-in{min-width:30px;height:30px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--c-surface);
  color:var(--c-brand-ink);font:600 13px/1 var(--font-ui);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--c-brand-line),var(--e-2);
  animation:go-pop var(--dur-2) var(--ease-out) backwards;animation-delay:var(--gd,0ms)}
.go-near-in{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink-2);
  box-shadow:var(--e-2);animation:go-pop var(--dur-3) var(--ease-out) backwards;animation-delay:var(--pd,0s)}
.go-dest-in{width:22px;height:22px;border-radius:50%;background:var(--c-brand);border:4px solid var(--c-surface);
  box-shadow:0 0 0 2px var(--c-brand),0 6px 14px rgba(16,24,40,.25);animation:go-pop var(--dur-2) var(--ease-out)}
.go-ring{fill:var(--c-brand);fill-opacity:.07;stroke:var(--c-brand);stroke-opacity:.55;stroke-width:2;stroke-dasharray:6 6}
/* Usta belgisi: avatar oq halqa + brend halqa ichida; `.tk-me` CSS o'tishi bilan silliq suriladi (styles.css). */
.go-me .go-me-in{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--c-surface);
  box-shadow:0 0 0 3px var(--c-brand),0 8px 18px rgba(16,24,40,.28);animation:go-pop var(--dur-2) var(--ease-out)}
.kx .go-me .av{width:36px;height:36px;font-size:12px;background:var(--c-brand-soft);color:var(--c-brand-ink)}

/* Qidiruv to'lqini: buyurtma nuqtasidan tarqaladigan halqalar (halqa o'lchami — `--go-ring`). */
.kx .go-wave{position:absolute;left:var(--go-x,50%);top:var(--go-y);z-index:2;width:0;height:0;pointer-events:none}
.kx .go-wave[hidden]{display:none}
.kx .go-wave i{position:absolute;left:calc(var(--go-ring) / -2);top:calc(var(--go-ring) / -2);width:var(--go-ring);height:var(--go-ring);
  border-radius:50%;border:2px solid var(--c-brand);background:radial-gradient(closest-side,transparent 55%,var(--c-pulse));opacity:0;
  animation:go-wave 3s var(--ease-out) infinite}
.kx .go-wave i:nth-child(2){animation-delay:1s}
.kx .go-wave i:nth-child(3){animation-delay:2s}
.kx .go.is-idle .go-wave i{animation-duration:5s;border-color:var(--c-ink-3)}
@keyframes go-wave{0%{transform:scale(.08);opacity:.9}70%{opacity:.25}100%{transform:scale(1);opacity:0}}

/* Pastki varaq. */
.kx .go-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;max-height:calc(100% - 92px);
  padding:var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));background:var(--c-surface);
  border-radius:var(--r-4) var(--r-4) 0 0;box-shadow:var(--e-sheet);animation:go-rise var(--dur-sheet) var(--ease-sheet) both}
.kx .go-sheet.is-sizing{overflow:hidden;transition:height .34s var(--ease-out)}
.kx .go[data-stage="pick"] .go-sheet{max-height:min(62%,calc(100% - 92px))}
@keyframes go-rise{from{transform:translateY(100%)}}
.kx .go-grab{display:block;flex:none;width:36px;height:4px;border-radius:2px;background:var(--c-line-strong);margin:0 auto var(--sp-3)}
.kx .go-in{display:flex;flex-direction:column;gap:var(--sp-3);min-height:0;flex:1 1 auto}
.kx .go-in.go-swap > *{animation:go-up .38s var(--ease-out) backwards}
.kx .go-in.go-swap > :nth-child(2){animation-delay:40ms}
.kx .go-in.go-swap > :nth-child(3){animation-delay:80ms}
.kx .go-in.go-swap > :nth-child(n+4){animation-delay:120ms}
@keyframes go-up{from{opacity:0;transform:translateY(12px)}}
/* Kit kaskadi har qayta chizishda (tanlov, sanagich) chiplarni qayta «chiqarardi» — varaqda faqat bosqich almashganda. */
.kx .go-in .chips > *,.kx .go-in .list > .lnk{animation:none}
.kx .go-scroll{display:flex;flex-direction:column;gap:var(--sp-3);min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
  margin:0 calc(-1*var(--sp-4));padding:2px var(--sp-4)}
.kx .go-h h2,.kx .go-title{font-size:var(--fs-500);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:1.2}
.kx .go-h p{margin-top:2px;font-size:var(--fs-250);color:var(--c-ink-3)}
.kx .go-h-row{display:flex;align-items:center}
.kx .go-back-chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 var(--sp-3) 0 6px;border-radius:999px;background:var(--c-surface-2);
  font-size:var(--fs-250);font-weight:var(--fw-semi);color:var(--c-ink-2)}
.kx .go-back-chip:hover{background:var(--c-surface-3);color:var(--c-ink)}
.kx .go-back-chip:active{transform:scale(var(--press))}
.kx .go-cta{height:52px;flex:none;font-size:var(--fs-350)}
.kx .go-call{justify-content:space-between;padding:0 var(--sp-5)}
.kx .go-cta-sub{font-size:var(--fs-250);font-weight:var(--fw-medium);opacity:.86;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 1) Kim kerak: ikki qatorli surma panel (Yandex «tariflari» kabi). */
.kx .go-dirs{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:92px;gap:var(--sp-2);overflow-x:auto;
  margin:0 calc(-1*var(--sp-4));padding:2px var(--sp-4) var(--sp-2);scroll-padding-inline:var(--sp-4);scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.kx .go-dirs::-webkit-scrollbar{display:none}
.kx .go-dir{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:92px;padding:var(--sp-2h) var(--sp-1);border-radius:var(--r-2);
  background:var(--c-surface-2);color:var(--c-ink);text-align:center;scroll-snap-align:start;
  transition:background-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .go-dir .ic{width:40px;height:40px;border-radius:12px;background:var(--c-surface);color:var(--c-brand-ink)}
.kx .go-dir-t{font-size:var(--fs-100);font-weight:var(--fw-semi);line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.kx .go-dir:hover{background:var(--c-surface-3)}
.kx .go-dir:active{transform:scale(var(--press))}
.kx .go-dir.on{background:var(--c-brand-soft);box-shadow:inset 0 0 0 1.5px var(--c-brand)}
.kx .go-search{height:44px;flex:none}
.kx .go-specs .pill{height:38px}

/* 2) Varaq: kasb qatori, vaqt, hajm, narx/izoh/to'lov. */
.kx .go-what{display:flex;align-items:center;gap:var(--sp-3);width:calc(100% + var(--sp-4));margin:0 calc(-1*var(--sp-2));padding:var(--sp-2);
  border-radius:var(--r-2);text-align:left;flex:none}
.kx .go-what:hover{background:var(--c-surface-2)}
.kx .go-what:active{transform:scale(.99)}
.kx .go-what .tx{flex:1;min-width:0}
.kx .go-what .tx b{display:block;font-size:var(--fs-350);font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .go-what .tx small{display:block;font-size:var(--fs-200);color:var(--c-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .go-saved{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;flex:none}
.kx .go-saved .pill{height:32px;padding:0 var(--sp-3)}
.kx .go-seg{flex:none}
.kx .go-seg button{min-width:0}
.kx .go-seg .go-ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kx .go-hint{margin-top:6px;padding-left:2px}
.kx .go-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);flex:none}
.kx .go-stp{display:flex;flex-direction:column;gap:6px;padding:var(--sp-2h) var(--sp-3);border-radius:var(--r-2);background:var(--c-surface-2)}
.kx .go-stp-l{font-size:var(--fs-100);font-weight:var(--fw-semi);color:var(--c-ink-3);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.kx .go-stp-c{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1)}
.kx .go-stp-c b{font-size:var(--fs-400);font-weight:var(--fw-bold);white-space:nowrap}
.kx .go-stp-c b small{font-size:var(--fs-200);font-weight:var(--fw-medium);color:var(--c-ink-3)}
.kx .go-stp-c button{width:36px;height:36px;border-radius:50%;background:var(--c-surface);color:var(--c-ink);display:grid;place-items:center;box-shadow:var(--e-1);
  transition:transform var(--dur-1) var(--ease-out),opacity var(--dur-1)}
.kx .go-stp-c button:active{transform:scale(.9)}
.kx .go-stp-c button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.kx .go-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);flex:none}
.kx .go-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kx .go-opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:var(--sp-2h) var(--sp-3);border-radius:var(--r-2);
  background:var(--c-surface);border:1.5px solid var(--c-line);text-align:left;color:var(--c-ink);
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx .go-opt > .i{color:var(--c-brand-ink)}
.kx .go-opt .tx{display:block;width:100%;min-width:0}
.kx .go-opt small{display:block;font-size:var(--fs-100);color:var(--c-ink-3);font-weight:var(--fw-medium)}
.kx .go-opt b{display:block;font-size:var(--fs-250);font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .go-opt b.muted{color:var(--c-ink-3);font-weight:var(--fw-medium)}
.kx .go-opt:hover{border-color:var(--c-line-strong);background:var(--c-surface-2)}
.kx .go-opt:active{transform:scale(var(--press))}

/* 3) Qidiruv. */
.kx .go-srch{display:flex;flex-direction:column;gap:var(--sp-2h)}
.kx .go-srch-h{display:flex;align-items:center;gap:var(--sp-3)}
.kx .go-srch-h .grow b{display:block;font-size:var(--fs-400);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
.kx .go-srch-h .grow small{display:block;margin-top:2px;font-size:var(--fs-250);color:var(--c-ink-3)}
.kx .go-radar{position:relative;width:40px;height:40px;border-radius:50%;background:var(--c-brand-soft);flex:none;display:grid;place-items:center}
.kx .go-radar i{width:12px;height:12px;border-radius:50%;background:var(--c-brand)}
.kx .go-radar::before,.kx .go-radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c-brand);opacity:0;
  animation:go-ping 2s var(--ease-out) infinite}
.kx .go-radar::after{animation-delay:1s}
@keyframes go-ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.kx .go.is-idle .go-radar::before,.kx .go.is-idle .go-radar::after{animation:none}
.kx .go-sec{min-width:52px;height:32px;padding:0 10px;border-radius:999px;background:var(--c-brand-soft);color:var(--c-brand-ink);
  display:grid;place-items:center;font-size:var(--fs-250);font-weight:var(--fw-bold)}
.kx .go-sec[hidden]{display:none}
.kx .go-srch .dsp-bar{height:6px}
.kx .go-next{line-height:1.4}
.kx .go-osum{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-2);background:var(--c-surface-2)}
.kx .go-osum .ic{background:var(--c-surface)}
.kx .go-osum .tx{flex:1;min-width:0}
.kx .go-osum b{display:block;font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .go-osum small{display:block;font-size:var(--fs-200);color:var(--c-ink-3)}
.kx .go-apps{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2h) var(--sp-3);border-radius:var(--r-2);background:var(--c-ok-soft);
  color:var(--c-ink);animation:go-up .32s var(--ease-out)}
.kx .go-apps[hidden]{display:none}
.kx .go-apps b{flex:1;min-width:0;font-weight:var(--fw-semi)}
.kx .go-apps .avs{display:flex}
.kx .go-apps .avs .av{border:2px solid var(--c-surface)}
.kx .go-apps .avs .av + .av{margin-left:-10px}

/* 4) Kuzatuv: holat, ETA, qadamlar, usta. */
.kx .go-trk{display:flex;flex-direction:column;gap:var(--sp-3)}
.kx .go-trk-h{display:flex;align-items:center;gap:var(--sp-3)}
.kx .go-trk-h b{display:block;font-size:var(--fs-500);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
.kx .go-trk-h small{display:block;margin-top:2px;font-size:var(--fs-250);color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.kx .go-eta{flex:none;min-width:64px;height:52px;padding:0 var(--sp-3);border-radius:var(--r-2);background:var(--c-brand);color:var(--c-on-brand);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-400);font-weight:var(--fw-bold);line-height:1;
  font-variant-numeric:tabular-nums;box-shadow:var(--e-brand);animation:go-pop var(--dur-2) var(--ease-out)}
.kx .go-eta[hidden]{display:none}
.kx .go-eta small{font-size:var(--fs-100);font-weight:var(--fw-semi);opacity:.85;margin-top:3px}
.kx .go-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kx .go-steps li{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-100);font-weight:var(--fw-semi);color:var(--c-ink-3)}
.kx .go-steps i{display:block;height:4px;border-radius:2px;background:var(--c-surface-2);overflow:hidden;position:relative}
.kx .go-steps li.done{color:var(--c-ink-2)}
.kx .go-steps li.done i{background:var(--c-brand)}
.kx .go-steps li.now{color:var(--c-brand-ink)}
/* Hozirgi bosqich: bir yo'nalishda to'lib boradi (egasi 2026-10-10 — oldinga-orqaga emas). «Ishda» — haqiqiy ulush
   (`--p`, gocalc.workProgress: o'tgan vaqt / e'londagi soatlar) va ustida yengil yaltirash; aks holda — 0→100% qayta-qayta. */
.kx .go-steps li.now i::after{content:"";position:absolute;inset:0;background:var(--c-brand);transform-origin:left;animation:go-fill 2.4s var(--ease-out) infinite}
.kx .go-steps li.now i[data-work-p]::after{animation:none;transform:scaleX(var(--p));transition:transform .8s var(--ease-out)}
.kx .go-steps li.now i[data-work-p]::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:go-shine 2.2s ease-in-out infinite;clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
@keyframes go-fill{0%{transform:scaleX(0);opacity:1}75%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes go-shine{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.kx .go-steps li.now i::after{animation:none;transform:scaleX(.5)}.kx .go-steps li.now i::before{animation:none}}
.kx .go-who{padding:var(--sp-3);border-radius:var(--r-2);background:var(--c-surface-2)}
.kx .go-who .av{width:48px;height:48px;background:var(--c-surface)}
.kx .go-who a.tx:hover b{color:var(--c-brand-ink)}
.kx .go-price{flex:none;max-width:40%;text-align:right}
.kx .go-price b{display:block;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;white-space:nowrap}
.kx .go-price small{display:block;font-size:var(--fs-100);color:var(--c-ink-3)}
.kx .go-trk .two-btn .btn{height:48px}
.kx .go-links{display:flex;justify-content:center;gap:var(--sp-6);font-size:var(--fs-250);font-weight:var(--fw-semi)}
.kx .go-links a{color:var(--c-brand-ink);padding:var(--sp-1) 0}
.kx .go-links a.bad{color:var(--c-bad-ink)}
.kx .go-links a:hover{text-decoration:underline}

@media (max-width:374px){
  .kx .go-dirs{grid-auto-columns:84px}
  .kx .go-sheet{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .kx .go-trk-h b{font-size:var(--fs-400)}
}
@media (prefers-reduced-motion:reduce){
  .kx .go-sheet,.kx .go-in.go-swap > *,.kx .go-chip,.kx .go-apps,.kx .go-eta,.go-cell-in,.go-near-in,.go-dest-in{animation:none}
  .kx .go.was-moving:not(.is-moving) .go-pin-head,.kx .go.is-dropping .go-pin{animation:none}
  .kx .go-pin-head,.kx .go-pin-leg,.kx .go-pin-dot,.kx .go-addr,.kx .go-fab{transition:none}
  .kx .go-wave i{animation:none;opacity:.35;transform:scale(1)}
  .kx .go-wave i + i{display:none}
  .kx .go-radar::before,.kx .go-radar::after,.kx .go-live,.kx .go-steps li.now i::after{animation:none}
  .kx .go-sheet.is-sizing{transition:none}
}

/* ---- «Go» desktop va planshet (≥768px, Yandex Go web uslubi) --------------------------------------------------------
   Desktop qobig'i (d-top + d-tabs, 120 px) QOLADI — bo'limlar, hudud, bildirishnomalar doim qo'l ostida; xarita uning
   ostidan oxirigacha to'liq balandlikda. Varaq o'rniga chapda suzuvchi panel (≥1024 — 400 px, planshet — 360 px:
   `gocalc.panelWidth`), o'ngda boshqaruv ustuni (masshtab, «Mening joyim»). Pin va halqa — panel bilan ustun orasidagi
   ko'rinadigan maydon markazida (`gocalc.goPads`). */
@media (min-width:768px){
  .kx.p-boss-go .shell{padding:0}
  .kx .go{top:120px;--go-pw:360px}
  .kx .go-sheet{left:var(--sp-4);top:var(--sp-4);right:auto;bottom:auto;width:var(--go-pw);max-height:calc(100% - 2*var(--sp-4));
    padding:var(--sp-5) var(--sp-5) var(--sp-5);border-radius:var(--r-4);box-shadow:var(--e-3);border:var(--bw-1) solid var(--c-line);
    animation:go-slide var(--dur-3) var(--ease-out) both}
  .kx .go[data-stage="pick"] .go-sheet{max-height:calc(100% - 2*var(--sp-4))}
  .kx .go-grab{display:none}
  .kx .go-scroll{margin:0 calc(-1*var(--sp-5));padding:2px var(--sp-5)}
  .kx .go-top{left:calc(var(--go-pw) + 2*var(--sp-4));padding:var(--sp-4) var(--sp-4) 0}
  .kx .go-ctl{top:50%;bottom:auto;transform:translateY(-50%)}
  .kx .go-zoom{display:grid}
  .kx .go-zoom[hidden]{display:none}
  .kx .go-addr{max-width:min(420px,calc(100% - var(--go-pw) - 160px))}
  .kx .go-dirs{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-auto-columns:auto;
    overflow-x:hidden;overflow-y:auto;min-height:0;flex:1 1 auto;margin:0 calc(-1*var(--sp-5));padding:2px var(--sp-5) var(--sp-1);
    scroll-snap-type:none;overscroll-behavior:contain}
  .kx .go-dir{min-height:96px}
  .kx .go-classic{display:inline-flex;align-items:center;gap:4px;align-self:center;flex:none;font-size:var(--fs-200);font-weight:var(--fw-semi);
    color:var(--c-ink-3);padding:2px var(--sp-2);border-radius:var(--r-1)}
  .kx .go-classic:hover{color:var(--c-brand-ink);background:var(--c-surface-2)}
  .kx .go-fab:focus-visible,.kx .go-opt:focus-visible,.kx .go-dir:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
}
@media (min-width:1024px){ .kx .go{--go-pw:400px} }
@keyframes go-slide{from{opacity:0;transform:translateX(-16px)}}
@media (prefers-reduced-motion:reduce){ .kx .go-sheet{animation:none} .kx .go-ctl{transition:none} }
/* To'liq ekran xarita: sahifa surilmaydi — skroll uchun ajratilgan o'ng chiziq (`scrollbar-gutter`) kerak emas. */
html:has(.kx.p-boss-go){scrollbar-gutter:auto;overflow:hidden}

/* ---- Katta monitor (≥2400px, `styles.css` `body{zoom}` + `--zoom`): `100vh` masshtab bilan birga kattalashadi —
   to'liq ekranli ramkalar ekrandan uzun bo'lib, kirish/ro'yxatdan o'tish oynasi keraksiz aylantirilardi (egasi
   2026-10-05). Balandlik masshtabga bo'linadi (kit qo'lda tahrirlanmaydi — shu yerda, kit'dan keyin). */
@media (min-width:2400px){
  .kx .a-wrap,.kx .ad-auth,.kx .spl,.kx.pg,#authKx.kx,#wizKx.kx,#blockedView .kx.auth,#bootView .kx.auth,
  .kx .ad-side{min-height:calc(100dvh / var(--zoom,1))}
  .kx .a-side{min-height:calc(100dvh / var(--zoom,1));height:calc(100dvh / var(--zoom,1))}
}
/* Ishchi yo'lda: GPS aniqlanmadi (egasi 2026-10-10) — sabab va «Qayta urinish». */
.kx .warn-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--c-warn-ink)}
.kx .warn-t[hidden]{display:none}

/* Telefon shrift shkalasi bir pog'ona kichikroq (egasi 2026-10-11: «yozuvlar juda katta, dizayn qo'pol»).
   Asosiy matn 15→14, tugma 16→15, karta sarlavhasi 17→16, varaq sarlavhasi 20→18, ekran sarlavhasi 26→22.
   Maydon (`--fs-input`) 16px da qoladi — kichraysa telefon klaviatura ochilganda sahifani kattalashtiradi. */
/* Ixcham shkala HAMMA ekranda (egasi 2026-10-11: «barcha narsalar, tugmalar, yozuvlar kichikroq»). */
.kx{--fs-200:12px;--fs-250:13px;--fs-300:14px;--fs-350:15px;--fs-400:16px;--fs-450:16px;--fs-500:18px;
  --fs-550:20px;--fs-600:24px;--fs-700:26px;--fs-disp:34px;--fs-input:15px;
  --h-btn:44px;--h-btn-lg:46px;--h-field:44px;--h-cta:44px;--h-control:40px;--h-chip:32px;--h-code:50px;
  /* `.tap` (`!important` bilan 44px) va kichik tugma — kompyuterda ixcham, telefonda barmoqqa yetarli (pastda). */
  --h-tap:36px;--h-control-sm:34px}
.kx .btn{padding:0 var(--sp-4)}
@media (max-width:767px){
  .kx{--h-tap:40px;--h-control-sm:38px}
}
@media (max-width:767px){
  .kx{--fs-200:12px;--fs-250:13px;--fs-300:14px;--fs-350:15px;--fs-400:16px;--fs-450:16px;--fs-500:18px;
    --fs-550:20px;--fs-600:22px;--fs-700:24px;--fs-disp:32px;--fs-input:16px;
    /* Balandliklar ham bir pog'ona past (bosish maydoni 44px dan kam emas — WCAG). */
    --h-btn:46px;--h-btn-lg:48px;--h-field:46px;--h-cta:46px;--h-control:44px;--h-chip:32px;--h-code:50px}
  /* kit.css da tokensiz yozilgan yirik raqamlar/sarlavhalar — telefonda shu shkalaga mos. */
  .kx .hero h1{font-size:26px}
  .kx:where(:not(.p-boss-crew-order)) .cnt-big b{font-size:38px}
  .kx .rsum .big b{font-size:34px}
  .kx .cashc .money-big{font-size:32px}
  .kx .ml-code{font-size:32px}
}

/* Tanlangan chip / sahifa raqami — qora emas, brend uslubi (egasi 2026-10-11: «nega ba'zi maydonlar qora?»).
   Tanlangan, lekin 0 ta yozuvli filtr (`.on.dis`) xiralashmaydi — tanlov doim aniq o'qiladi. */
.kx .pill.on,.kx .pill.on.dis{background:var(--c-brand-soft);border-color:var(--c-brand);color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx .pill.on em{color:inherit;opacity:.75}
.kx .pg.on{background:var(--c-brand);color:var(--c-on-brand,#fff)}

/* Telefon pastki menyusi — 5 bo'lim: Bosh sahifa · Rejimni almashtirish · Ish topish / E'lon · Chatlar · Profil. */
.kx .m-nav{grid-template-columns:repeat(5,1fr)}
.kx .m-nav .swp{width:40px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--c-brand-soft);
  color:var(--c-brand-ink);border:var(--bw-1) solid var(--c-brand-line);transition:transform var(--dur-2,.2s) var(--ease-out)}
.kx .m-nav a.swap{color:var(--c-brand-ink)}
.kx .m-nav a.swap:active .swp{transform:rotate(180deg)}

/* ---- Ixcham audit (egasi 2026-10-11: «tugmalar, yozuvlar kichikroq — juda katta va noqulay»). Kirgandan keyingi
   ekranlar 375/1440 da o'lchab chiqildi; kit.css da qattiq yozilgan yirik o'lchamlar shu yerda 8px to'riga tushiriladi.
   Telefonda bosish maydoni 40px dan kam emas. */
/* Asosiy tugma: og'ir ko'k «nur» (0 8px 20px) o'rniga yengil, aniq soya — Linear/Stripe uslubi. */
.kx .btn.pri{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(16,24,40,.08),0 4px 12px rgba(26,108,232,.2)}
/* Avatarlar: buyurtma/usta sahifasi 64→56, profil sarlavhasi 80→64. */
.kx .av.lg{width:56px;height:56px;font-size:18px}
.kx .av.xl{width:64px;height:64px;font-size:22px}
/* Ro'yxat qatorlari: menyu 52→48, to'lov usuli 64→56, tranzaksiya 64→56, bildirishnoma 72→64, chat 76→64. */
.kx .lnk{min-height:48px}
.kx .lnk.pr{min-height:56px}
.kx .txr{min-height:56px}
.kx .nt{min-height:64px}
.kx:where(:not(.p-boss-all-services)) .crow{min-height:64px;padding-top:var(--sp-2h);padding-bottom:var(--sp-2h)}
/* Almashtirgich qatori («Ish qabul qilyapman», sozlamalar): 60/56→52. */
.kx:where(:not(.p-boss-disc-price,.p-boss-price-sheet,.p-boss-recurring-sheet,.p-boss-security,.p-worker-profile)) .tog{min-height:52px}
.kx:where(.p-boss-profile,.p-worker-profile) .tog{min-height:52px}
/* Qidiruv maydoni 48→44 (faol holati 52→46); matn telefonda 16px da qoladi — iOS/WebView kattalashtirmaydi. */
.kx .search,.kx .srch{height:44px}
.kx .search.on{height:46px}
/* Bo'sh holat: 48px yuqori/past bo'shliq 32 ga, belgi 64→56. */
.kx .empty{padding:var(--sp-7) var(--sp-4)}
.kx .empty .ei{width:56px;height:56px}
/* Hamyon balansi: 40/34→30 (telefonda 28). */
.kx .cashc .money-big,.kx .bal .money-big{font-size:30px}
/* Kalit-qiymat qatori (buyurtma tafsilotlari): 48→44. */
.kx .kv{padding-top:var(--sp-2h);padding-bottom:var(--sp-2h)}
/* Eski (styles.css) varaq tugmalari — ish/joylashuv varaqlari: 52→46, matn 16→15, yengil soya; rasm-plitka 96→80. */
.ord-cta,.ord-soft{height:46px;font-size:15px}
.ord-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(16,24,40,.08),0 4px 12px rgba(26,108,232,.2)}
:root{--tile-gd:80px;--img-gd:52px}
/* Kompyuter: sahifa tepasidagi bo'shliq 32→24. */
@media (min-width:768px){ .kx .shell{padding-top:var(--sp-6)} }
@media (max-width:767px){
  /* Telefonda tugma/maydon balandligi kompyuterdagidan baland bo'lmasin: 46→44, kichik boshqaruv 44→40. */
  .kx{--h-btn:44px;--h-btn-lg:46px;--h-field:44px;--h-cta:44px;--h-control:40px}
  /* Asosiy ustun va yon ustun orasidagi bo'shliq 24→16; xizmat kartochkasi 108→96. */
  .kx .layout{gap:var(--sp-4)}
  .kx:where(:not(.p-auth-hire-cats)) .cat{min-height:96px}
  .kx .cashc .money-big,.kx .bal .money-big{font-size:28px}
  /* Tezkor chaqiruv va xizmat plitkalaridagi 3D belgilar 40→36. */
  .kx .qt > .ic,.kx:where(:not(.p-auth-hire-cats)) .cat > .ic{width:36px;height:36px}
  .kx .qt > .ic img,.kx:where(:not(.p-auth-hire-cats)) .cat > .ic img{width:36px;height:36px}
}

/* ---- UI ixchamlik, 2-bosqich (egasi 2026-10-11) ----------------------------------------------------------------
   1) Chat ro'yxati qatori (`.crow`): 3 qator (ism / buyurtma / xabar) ~81px edi. Endi 2 qator — messenjer odati:
      1-qator: ism · buyurtma (xira, ellipsis) ... vaqt; 2-qator: oxirgi xabar (ellipsis) ... o'qilmaganlar nishoni.
      Shablon o'zgarmaydi: `.l1`/`.l3` `display:contents` bo'lib, bolalari `.tx` to'riga joylashadi. Ism o'z
      kengligini oladi, buyurtma qolgan joyga sig'guncha ko'rinadi (ism juda uzun bo'lsa — buyurtma yashirinadi).
      Natija: telefonda ham, kompyuterda ham 64px. «Barcha xizmatlar» (`.lnk.crow`) bunga kirmaydi. */
.kx:where(:not(.p-boss-all-services)) .crow .tx{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;
  column-gap:var(--sp-1h);row-gap:2px;align-items:baseline}
.kx:where(:not(.p-boss-all-services)) .crow :is(.l1,.l3){display:contents}
.kx:where(:not(.p-boss-all-services)) .crow .l1 b{grid-row:1;grid-column:1;line-height:20px}
.kx:where(:not(.p-boss-all-services)) .crow .job{grid-row:1;grid-column:2;line-height:20px}
.kx:where(:not(.p-boss-all-services)) .crow .job::before{content:"· "}
.kx:where(:not(.p-boss-all-services)) .crow time{grid-row:1;grid-column:3;justify-self:end;line-height:20px}
.kx:where(:not(.p-boss-all-services)) .crow .last{grid-row:2;grid-column:1/3;line-height:20px}
.kx:where(:not(.p-boss-all-services)) .crow .count{grid-row:2;grid-column:3;justify-self:end;align-self:center}
.kx:where(:not(.p-boss-all-services)) .crow{min-height:64px;padding-top:var(--sp-2h);padding-bottom:var(--sp-2h)}

/* 2) Telefon pastki menyusi 68 → 60px (+ safe-area). Bitta manba — `--kx-nav`; menyuga bog'langan hamma narsa
      (kontent pastki bo'shlig'i, yopishqoq CTA'lar, toast/yangilanish kartasi, to'liq ekran xaritalar) shundan
      hisoblanadi. Kit.css'dagi qattiq `68px`/`72px`/`84px` lar shu yerda almashtiriladi — faqat telefonda
      (≥768 da menyu yo'q, u yerdagi qiymatlarga tegilmaydi). Ikonka 22→20, yozuv 12→11px (`--fs-75`). */
:root{--kx-nav:60px}
.kx .m-nav{height:calc(var(--kx-nav) + env(safe-area-inset-bottom))}
/* 5 teng ustun; faqat o'rtadagi («Buyurtma berish») yozuvi sig'masa o'z eniga kengayadi, qolgan to'rttasi qolganini bo'ladi — 360px da
   ham hech bir yozuv qo'shnisiga chiqmaydi (avval 1fr min-content sabab qator 1-2px kengayardi). */
.kx .m-nav{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(max-content,1fr) repeat(2,minmax(0,1fr))}
.kx .m-nav a{font-size:var(--fs-75);gap:2px;min-width:0}
.kx .m-nav a > svg{width:20px;height:20px;margin-block:4px}
.kx .m-nav .me{width:24px;height:24px;margin-block:2px}
.kx .m-nav .badge{top:5px}
@media (max-width:767px){
  /* `--h-nav` (kit: 73px — eski menyu formulasi) va `--float-b` endi haqiqiy menyuga teng. */
  .kx{--h-nav:var(--kx-nav);--float-b:calc(var(--kx-nav) + var(--sp-3) + env(safe-area-inset-bottom))}
  body:has(.kx .m-nav){--float-b:calc(var(--kx-nav) + var(--sp-3) + env(safe-area-inset-bottom))}
  /* Kontent menyu ostida qolmaydi: menyu + 24px (avval 72 + 24). `.kx.pg` safe-area'ni o'zi qo'shadi. */
  .kx .m-main{padding-bottom:calc(var(--kx-nav) + var(--sp-6))}
  .kx:has(.upd) .m-main{padding-bottom:calc(var(--kx-nav) + 4px + 190px)}
  .kx.fullmap .m-main{padding-bottom:var(--kx-nav)}
  .kx:where(.p-worker-vac-map) .m-main{padding-bottom:calc(var(--kx-nav) + var(--sp-4))}
  /* Yopishqoq CTA'lar menyu ustiga yopishadi. */
  .kx .cta-m,.kx .cta-bar.nv,.kx .cta-bar.navd,.kx .cta-bar.over-nav{bottom:calc(var(--kx-nav) + env(safe-area-inset-bottom))}
  .kx:where(.p-boss-addresses,.p-boss-addresses-add,.p-boss-bonuses,.p-boss-business,.p-boss-business-connect,.p-boss-edit-profile,.p-boss-fav-workers,.p-boss-fav-workers-empty,.p-boss-verify,.p-boss-verify-rejected,.p-worker-calendar,.p-worker-calendar-hours,.p-worker-conditions,.p-worker-crew,.p-worker-crew-invite,.p-worker-doc-upload,.p-worker-edit-profile,.p-worker-fav-jobs,.p-worker-fav-jobs-empty,.p-worker-fill-extra,.p-worker-levels,.p-worker-professions,.p-worker-profile-fill,.p-worker-verify,.p-worker-verify-rejected,.p-worker-work-area) .cta-bar{bottom:calc(var(--kx-nav) + env(safe-area-inset-bottom))}
  .kx .no-nav .cta-bar{bottom:0}
  /* Menyu ustidagi suzuvchi kartalar: menyu + 12px. */
  .kx .upd,.kx:where(.p-boss-notifications-empty) .toast{bottom:calc(var(--kx-nav) + var(--sp-3) + env(safe-area-inset-bottom))}
  .kx:where(.p-worker-feed-locked) .toast{bottom:calc(var(--kx-nav) + var(--sp-4) + env(safe-area-inset-bottom))}
  #toast.toast{bottom:calc(var(--kx-nav) + var(--sp-3) + env(safe-area-inset-bottom))}
  /* To'liq balandlikdagi xaritalar: menyu balandligi ayiriladi. */
  .kx:where(:not(.p-worker-edu-add,.p-worker-exp-add)) .fm{height:calc(100vh - var(--h-header) - var(--kx-nav));height:calc(100dvh - var(--h-header) - var(--kx-nav))}
  .kx .vm .map{height:calc(100vh - var(--h-header) - var(--kx-nav) - 72px)!important}
  .kx:where(.p-worker-toast) .vd{padding-bottom:calc(var(--sp-4) + var(--kx-nav) + 4px)!important}
}

/* ============================================================================================================
   QATOR-RO'YXATLAR (egasi qarorlari, 2026-10-11)
   (2) «Tezkor chaqirish» va «Xizmatlar» — ~106px plitkalar o'rniga IXCHAM QATOR (~56px): chapda 3D belgi (36px),
       o'rtada nom + izoh («13 kasb»), o'ngda chevron. Bosh sahifa (`kx/pages/home.js`) va «Barcha xizmatlar»
       (`kx/pages/allservices.js`); desktopda bir kartada 2 ustun (o'qish tartibi chapdan o'ngga, keyin pastga).
   (4) Bo'lim (soha) va kasb TANLASH/KO'RSATISH — chip/plitka bulutlari emas, har biri ALOHIDA QATOR, tartib bilan;
       tanlash qatorida o'ngda katakcha, tanlangani brend uslubida (`--c-brand-soft` fon, `--c-brand` chegara).
       JS bilan: «Kasblarim» (`.pcat`/`.prow`), profil tahriri (`.eprofs`). Faqat CSS bilan (fayllar boshqa ishda):
       buyurtma xaritasi «Kim kerak» (`.go-dirs`) va kasblar (`.go-specs`), yangi buyurtma 1-qadam (`[data-specs]`),
       ro'yxatdan o'tish «Kasbingiz» (`.p-auth-w-prof`) va «Kimlar kerak» (`.p-auth-hire-cats`), «Ishchilar» soha
       varag'i (`.p-kx-cats .chk`).
   ============================================================================================================ */

/* ---- (2) Ixcham navigatsiya qatorlari ------------------------------------------------------------------------ */
.kx .hrows > .lnk{min-height:56px;padding:var(--sp-2) var(--sp-4);gap:var(--sp-3)}
.kx .hrows > .lnk .ic{width:36px;height:36px;border-radius:10px}
.kx .hrows > .lnk .ic.i3d > img{width:36px;height:36px}
.kx .hrows > .lnk .tx b{font-weight:var(--fw-semi);line-height:1.3}
.kx .hrows > .lnk .tx small{line-height:1.35;margin-top:1px}
.kx .hrows > .lnk .chev{flex:none;transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) ease}
.kx .hrows > .lnk:hover .chev{transform:translateX(2px);color:var(--c-ink-2)}
.kx .hrows > .lnk:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
.kx .hrows > .hrow.more .tx b{color:var(--c-brand-ink)}
@media (min-width:768px){
  .kx .hrows.c2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .kx .hrows.c2 > .lnk + .lnk{border-top:0}
  .kx .hrows.c2 > .lnk:nth-child(n+3){border-top:var(--bw-1) solid var(--c-line)}
  .kx .hrows.c2 > .lnk:nth-child(odd){border-right:var(--bw-1) solid var(--c-line)}
  .kx .hrows.c2 > .lnk{min-height:60px;padding:var(--sp-2h) var(--sp-4)}
}

/* ---- (4) Tanlash qatorlari — umumiy ko'rinish --------------------------------------------------------------- */
/* Konteyner: chegarali bitta ro'yxat. */
.kx :is(.pc-list,.go-specs,.chips[data-specs]),
.kx:where(.p-auth-w-prof) :is(.section-inner.chips,.dirs .chips){display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;
  border:var(--bw-1) solid var(--c-line);border-radius:var(--r-3);background:var(--c-surface);overflow:hidden}
/* Qator: nom chapda, katakcha o'ngda (::after). Ichki chip belgilari yashiriladi — holatni katakcha ko'rsatadi. */
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill),
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir){display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;min-height:48px;height:auto;padding:var(--sp-2h) var(--sp-4);margin:0;border:0;border-radius:0;background:transparent;
  color:var(--c-ink);font-size:var(--fs-300);font-weight:var(--fw-medium);line-height:1.35;text-align:left;white-space:normal;cursor:pointer;
  transition:background-color var(--dur-2) ease,box-shadow var(--dur-2) ease,color var(--dur-2) ease}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill) + :is(.prow,.pill),
.kx:where(.p-auth-w-prof) :is(.pill.prof + .pill.prof,.pill.dir + .pill.dir){border-top:var(--bw-1) solid var(--c-line)}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill) > svg,
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir) > svg{display:none!important}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill)::after,
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir)::after{content:"";flex:none;width:20px;height:20px;border-radius:6px;box-sizing:border-box;
  border:1.5px solid var(--c-line-strong);background:var(--c-surface) center/14px 14px no-repeat;
  transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill):hover,
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir):hover{background:var(--c-surface-2)}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill):hover::after,
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir):hover::after{border-color:var(--c-ink-3)}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill):active,
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir):active{transform:none;background:var(--c-surface-3)}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill):focus-visible,
.kx:where(.p-auth-w-prof) :is(.pill.prof,.pill.dir):focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
/* Tanlangan: brend fon + brend chegara (ichki — qo'shni qatorlarni surmaydi), katakcha to'ladi. */
.kx :is(.pc-list .prow.on,.go-specs .pill.on,.chips[data-specs] .pill.on),
.kx:where(.p-auth-w-prof) :is(.pill.prof.selected,.pill.dir.checked){background:var(--c-brand-soft);box-shadow:inset 0 0 0 1.5px var(--c-brand);
  color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx :is(.pc-list .prow.on,.go-specs .pill.on,.chips[data-specs] .pill.on)::after,
.kx:where(.p-auth-w-prof) :is(.pill.prof.selected,.pill.dir.checked)::after{border-color:var(--c-brand);background-color:var(--c-brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.kx :is(.pc-list .prow,.go-specs .pill,.chips[data-specs] .pill)[hidden],.kx:where(.p-auth-w-prof) .pill.prof[hidden]{display:none}
/* Kit kaskadi har qayta chizishda qatorlarni qayta «chiqarmasin». */
.kx :is(.pc-list,.go-specs,.chips[data-specs]) > *{animation:none}

/* ---- «Kasblarim»: bo'lim — akkordeon qatori ------------------------------------------------------------------- */
.kx:where(.p-worker-professions) .pgrid{display:flex;flex-direction:column;gap:var(--sp-2)}
.kx .pcat{overflow:hidden}
.kx .pc-h{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;padding:var(--sp-2) var(--sp-4);text-align:left;color:var(--c-ink);cursor:pointer}
.kx .pc-h:hover{background:var(--c-surface-2)}
.kx .pc-h:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
.kx .pc-h .ic{width:36px;height:36px;border-radius:10px}
.kx .pc-h .tx{flex:1;min-width:0}
.kx .pc-h .tx b{display:block;font-size:var(--fs-300);font-weight:var(--fw-semi);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .pc-h .tx small{display:block;font-size:var(--fs-200);color:var(--c-ink-3);line-height:1.35}
.kx .pc-h .arr{flex:none;color:var(--c-ink-3);transition:transform var(--dur-2) var(--ease-out)}
.kx .pcat.open .pc-h .arr{transform:rotate(180deg)}
.kx .pcat .pc-list{margin:0 var(--sp-3) var(--sp-3)}
.kx .pc-list .prow .grow{min-width:0}

/* ---- Profil tahriri: kasblar qatorlari ------------------------------------------------------------------------- */
.kx .eprofs > .rw{min-height:56px;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);gap:var(--sp-3)}
.kx .eprofs > .rw .ic{width:36px;height:36px;border-radius:10px}
.kx .eprofs > .rw .tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx .eprofs > .rw.add{padding-right:var(--sp-4)}
.kx .eprofs > .rw.add .ic{background:var(--c-brand-soft);color:var(--c-brand-ink)}
.kx .eprofs > .rw.add .tx b{color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx .eprofs > .rw.add .chev{color:var(--c-ink-3)}
.kx .eprofs > .rw.add:hover{background:var(--c-surface-2)}
.kx .eprofs > .rw + .rw{border-top:var(--bw-1) solid var(--c-line)}

/* ---- Buyurtma xaritasi «Kim kerak»: yo'nalishlar — qatorlar (surma plitkalar o'rniga) --------------------------- */
.kx .go-dirs{display:flex;flex-direction:column;gap:0;overflow-x:hidden;overflow-y:auto;min-height:0;flex:1 1 auto;
  margin:0;padding:0;border:var(--bw-1) solid var(--c-line);border-radius:var(--r-3);background:var(--c-surface);scroll-snap-type:none;overscroll-behavior:contain}
.kx .go-dir{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--sp-3);flex:none;min-height:52px;padding:var(--sp-2) var(--sp-4);
  border-radius:0;background:transparent;text-align:left}
.kx .go-dir + .go-dir{border-top:var(--bw-1) solid var(--c-line)}
.kx .go-dir .ic{width:36px;height:36px;border-radius:10px;background:var(--c-surface-2)}
.kx .go-dir-t{flex:1;min-width:0;font-size:var(--fs-300);font-weight:var(--fw-medium);-webkit-line-clamp:1}
.kx .go-dir::after{content:"";flex:none;width:18px;height:18px;background:var(--c-ink-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform var(--dur-2) var(--ease-out)}
.kx .go-dir:hover{background:var(--c-surface-2)}
.kx .go-dir:hover::after{transform:translateX(2px)}
.kx .go-dir:active{transform:none;background:var(--c-surface-3)}
.kx .go-dir.on{background:var(--c-brand-soft);box-shadow:inset 0 0 0 1.5px var(--c-brand)}
.kx .go-dir.on .go-dir-t{color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx .go-dir.on .ic{background:var(--c-surface)}
.kx .go-dir.on::after{background:var(--c-brand-ink)}
.kx .go-dir:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
@media (min-width:768px){
  .kx .go-dirs{margin:0;padding:0}
  .kx .go-dir{min-height:52px}
}

/* ---- Ro'yxatdan o'tish «Kimlar kerak» (`.p-auth-hire-cats`): plitkalar o'rniga katakchali qatorlar -------------- */
.kx:where(.p-auth-hire-cats) .cats{display:flex;flex-direction:column;gap:0;border:var(--bw-1) solid var(--c-line);border-radius:var(--r-3);
  background:var(--c-surface);overflow:hidden}
.kx:where(.p-auth-hire-cats) .cat{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--sp-3);min-height:56px;
  padding:var(--sp-2) var(--sp-4);border:0;border-radius:0;background:transparent;box-shadow:none;width:100%}
.kx:where(.p-auth-hire-cats) .cat + .cat{border-top:var(--bw-1) solid var(--c-line)}
.kx:where(.p-auth-hire-cats) .cat b{flex:1;min-width:0;font-size:var(--fs-300);font-weight:var(--fw-medium)}
.kx:where(.p-auth-hire-cats) .cat .ck{position:static;flex:none}
.kx:where(.p-auth-hire-cats) .cat:hover{background:var(--c-surface-2)}
.kx:where(.p-auth-hire-cats) .cat:active{transform:none;background:var(--c-surface-3)}
.kx:where(.p-auth-hire-cats) .cat.selected{background:var(--c-brand-soft);border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--c-brand)}
.kx:where(.p-auth-hire-cats) .cat.selected b{color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx:where(.p-auth-hire-cats) .cat.selected .ic{background:var(--c-surface)}
.kx:where(.p-auth-hire-cats) .cat:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}

/* ---- «Ishchilar» soha varag'i (`kx-cats`): katakcha o'ngda, tanlangan qator brendda ---------------------------- */
.kx:where(.p-kx-cats) .fgroup .chk{min-height:48px;padding:0 var(--sp-3);margin:0 calc(-1*var(--sp-3));border-radius:var(--r-2);cursor:pointer;gap:var(--sp-3)}
.kx:where(.p-kx-cats) .fgroup .chk i{order:3}
.kx:where(.p-kx-cats) .fgroup .chk span{order:2}
.kx:where(.p-kx-cats) .fgroup .chk:hover{background:var(--c-surface-2)}
.kx:where(.p-kx-cats) .fgroup .chk[aria-checked="true"]{background:var(--c-brand-soft);box-shadow:inset 0 0 0 1.5px var(--c-brand);color:var(--c-brand-ink);font-weight:var(--fw-semi)}
.kx:where(.p-kx-cats) .fgroup .chk:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
/* e2e 2026-10-12: suhbatlar ro'yxati / xabarlar ichki skrolli — qorong'i mavzuda oq (brauzer standarti) chiziq
   chiqardi. Rang tokenlardan: yorug'da ham, qorong'ida ham fonga mos. */
.kx .cl-b,.kx .th [data-msgs]{scrollbar-width:thin;scrollbar-color:var(--c-ink-3) transparent}
/* Qizil o'qilmaganlar nishoni: `--c-danger` (#e03e3e) ustida oq matn 4.26:1 — AA (4.5) ga yetmaydi. Nishon foni
   biroz to'qroq token (#d32f2f — 4.98:1); boshqa `--c-danger` ishlatilgan joylar (nuqta, SOS) o'zgarmaydi. */
.kx{--c-badge-bad:#d32f2f}
.kx .m-nav .badge,.kx .d-tabs .cnt{background:var(--c-badge-bad)}

/* ---- Ishchi bosh sahifasi (`.hm`) va «Ishlarim» KPI plitkalari (`.kpis.k4`) ------------------------------------------
   Telefon yotiq holatda (~800×360) 768px dan kengroq — desktop maketi ochiladi, chap ustun ~360px qoladi va 4 plitka
   ~78px gacha siqilib qiymatlar «4 16…», «1 ta ish …» bo'lib kesilardi. Endi plitkalar media emas, KONTEYNER kengligiga
   qaraydi: tor bo'lsa 2×2, keng bo'lsa 4 qator; o'ng ustun ham tor ekranda 40% dan oshmaydi. */
@media (min-width:768px){
  .kx .hm{grid-template-columns:minmax(0,1fr) min(360px,40%)}
  .kx .hm > .col:first-child,.kx:where(.p-worker-my-jobs) .shell{container:kx-kpis / inline-size}
  .kx .kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
}
@container kx-kpis (min-width:760px){
  .kx .kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
}
/* Izoh qatori («1 ta ish bajarildi», «yechish mumkin») kesilmaydi — ikki qatorga o'tadi; qiymat esa sig'masa biroz kichrayadi. */
.kx .kpis.k4 .kpi > small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.kx .kpis.k4 .kpi b{overflow:visible;text-overflow:clip}
@media (min-width:768px){.kx .kpis.k4 .kpi b{font-size:clamp(var(--fs-400),4.4cqi,var(--fs-500))}}

/* Faktlar (Ish tafsiloti, telefon): toq sonli bo'lsa oxirgisi to'liq qatorni egallaydi — bo'sh katak qolmaydi,
   uzun hudud nomi («Buxoro, Buxoro shahri») kesilmaydi. */
@media (max-width:767.98px){
  .kx .facts.f4 > div:last-child:nth-child(odd){grid-column:1 / -1}
  .kx .facts.f4 > div:last-child:nth-child(odd) b{white-space:normal}
}

/* ---- Telefon yotiq holatda (~800×360 / 915×412, 2026-10-14 audit) ---------------------------------------------------
   Android telefon yotqizilganda eni 768px dan oshadi — desktop maketi ochiladi, lekin balandlik atigi 360–412px.
   Quyidagilar umumiy (sahifaga bog'lanmagan): konteyner/auto-fit to'rlar, qisqa ekranda ixcham qobiq va ustunlar. */

/* Faktlar (Ish tafsiloti, desktop): 4 ustunli to'rda 3 ta fakt bo'lsa o'ngda bo'sh kulrang katak qolardi. Endi
   egiluvchan qator: nechta fakt bo'lsa, qatorni o'shalar teng bo'lib to'ldiradi; tor bo'lsa keyingi qatorga o'tadi. */
@media (min-width:768px){
  .kx .facts.f4{display:flex;flex-wrap:wrap}
  .kx .facts.f4 > div{flex:1 1 150px}
  .kx .facts.f4 b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}

/* Profil: 360px + 2 ustun 800px da har ustunga ~180px qoldirardi — «Arizalarim», «Obuna» yozuvlari yo'qolib,
   «Xi… hu…» bo'lib kesilardi. Planshet/yotiq telefonda: profil kartasi tepada to'liq enda, ro'yxatlar ikki ustunda. */
@media (min-width:768px) and (max-width:1099px){
  .kx .pcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kx .pcols > .phead{grid-column:1 / -1}
}

/* Kuzatuv / qidiruv bosqichi (Go paneli): panel balandligi cheklangan, lekin ichi aylanmasdi — qisqa ekranda
   «Qo'ng'iroq / Yozish», «Batafsil», «Bekor qilish» panel ostida kesilib, umuman bosib bo'lmasdi. */
.kx .go-trk,.kx .go-srch{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  margin:0 calc(-1*var(--sp-1));padding:0 var(--sp-1) 2px}

/* Qidiruv maydoni yozuvi (desktop qobig'i): tor qobiqda so'z o'rtasida («qidiri») kesilmay, «…» bilan tugaydi. */
.kx .d-search .dst{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:768px) and (max-width:1023px){.kx .d-search .dst{display:block}}

/* Qisqa ekran (yotiq telefon): qobiq 120px o'rniga 96px, ikki ustun saqlanadi, yopishqoq ustunlar va xaritalar
   ekrandan baland bo'lmaydi. Planshet (balandligi ≥600px) bunga tushmaydi. */
@media (min-width:768px) and (max-height:520px){
  .kx .d-top,.kx .d-top .in{height:56px}
  .kx .d-tabs,.kx .d-tabs .in{height:40px}
  .kx .go{top:96px}
  .kx .page-head{margin-bottom:var(--sp-3)}
  /* Ekrandan baland yopishqoq ustun pastki tugmalarini sahifa oxirigacha yashirardi — oddiy oqimga qaytadi. */
  .kx .stick{position:static}
  /* Xarita butun ekranni egallamaydi: barmoq bilan sahifani aylantirish xaritani surishga aylanib qolmasin. */
  .kx .map,.kx .fm,.kx .vm .map{max-height:max(220px,calc(100dvh - 48px))}
  /* Chat: 600px qat'iy balandlik 360px ekranda yozish maydonini pastga itarardi — ekran balandligiga moslanadi;
     buyurtma kartasidagi qadam chizig'i (holat yorlig'i qoladi) xabarlar uchun joy bo'shatadi. */
  .kx .cw{height:max(300px,calc(100dvh - var(--sp-4)))}
  .kx .oc .ost-track,.kx .oc .ost-lbl,.kx .oc .ost-next{display:none}
  /* Ish taymeri: 200px+ karta birinchi ekranni to'liq egallardi. */
  .kx .tmr{padding:var(--sp-4) var(--sp-4)}
  .kx .tmr b{font-size:calc(var(--fs-disp) * 1.35)}
  .kx .go-sheet{top:var(--sp-2);max-height:calc(100% - 2*var(--sp-2));padding:var(--sp-3) var(--sp-4)}
  .kx .go[data-stage="pick"] .go-sheet{max-height:calc(100% - 2*var(--sp-2))}
  /* Tor yon ustunda ish/mijoz izohi «…» bilan kesilmaydi — ikkinchi qatorga o'tadi. */
  .kx .jobc .grow small,.kx .who .grow small{white-space:normal;overflow:visible;text-overflow:clip}
}
/* Kit 768–1023px da yon ustunni pastga tushiradi (planshet tik). Yotiq telefonda esa asosiy amal (taymer yonida
   «Ishni yakunlash», tafsilot yonida «Ariza yuborish») 1000px pastda qolardi — ikki ustun saqlanadi. */
@media (min-width:768px) and (max-width:1023px) and (max-height:520px){
  .kx .layout.aside-r{grid-template-columns:minmax(0,1fr) minmax(280px,38%);gap:var(--sp-4)}
  /* Tor yon ustunda uzun tugma yozuvi («Navigatorda ochish (Yandex / Google)») kartadan chiqib ketardi — ikki qatorga
     o'tadi, tugma balandligi kamida odatdagidek qoladi. */
  .kx .layout.aside-r > :last-child .btn{white-space:normal;height:auto;min-height:var(--h-control);
    padding-top:var(--sp-1);padding-bottom:var(--sp-1);line-height:1.25;text-align:center}
}
/* Ishchi bosh sahifasining tor o'ng ustuni (planshet/yotiq telefon): izoh qatorlari «…» bilan kesilmay o'raladi. */
@media (min-width:768px) and (max-width:1023px){
  .kx .act-row .grow small,.kx .who .grow small{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ============================================================================================================
   ISH BERUVCHI SAHIFALARI — dizayn sayqali (feat/dizayn-boss, 2026-10-14)
   Faqat `p-boss-*` sahifalari (ish beruvchi) — ishchi sahifalariga tegilmaydi. Har qoida — ekranda topilgan aniq
   kamchilik (393×852 telefon va 1280 desktop skrinshotlari). Ranglar faqat tokenlardan (qorong'i mavzuda ham mos),
   bo'shliqlar 8px to'riga (`--sp-*`), harakat `--dur-*`/`--ease-*` (kamaytirilgan harakatda o'chadi).
   ============================================================================================================ */

/* ---- B1. Bosh sahifa sarlavhasi (telefon): «Salom, D…» — viloyat nomi ismni siqib qo'yardi -------------------
   Ism o'z kengligini oladi (eng ko'pi 58%), viloyat qolgan joyga sig'guncha, sig'masa «…» bilan kesiladi; qo'ng'iroq
   o'ngga yopishadi. */
.kx:where(.p-boss-home) .m-bar h1{flex:0 0 auto;max-width:58%}
.kx:where(.p-boss-home) .m-bar .m-city{display:block;flex:0 1 auto;min-width:0;margin-left:auto;line-height:var(--h-tap);
  overflow:hidden;text-overflow:ellipsis}
.kx:where(.p-boss-home) .m-bar .m-city > svg{display:inline-block;vertical-align:-3px;margin-right:4px}
.kx:where(.p-boss-home) .m-bar .m-city:hover{background:var(--c-surface-2);color:var(--c-ink)}

/* ---- B2. Bosh sahifa qidiruvi: «Masalan: santexnik» ikkinchi qatorga tushib, markazga surilardi (`.ex` flex edi) - */
.kx:where(.p-boss-home) .search.m-only a.grow{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.kx:where(.p-boss-home) .search.m-only a.grow .ex{display:inline;color:var(--c-ink-3)}
.kx:where(.p-boss-home) .search.m-only{transition:background-color var(--dur-1) var(--ease-out)}
.kx:where(.p-boss-home) .search.m-only:active{background:var(--c-surface-2)}

/* ---- B3. Desktop qobig'i: qidiruv maydoni 150px gacha siqilib «Usta yoki xizmat q» kesilardi ---------------------
   Bo'sh joy endi avval qidiruvga (420px gacha), keyin oraliqqa beriladi. */
@media (min-width:1024px){
  .kx.pg[class*=" p-boss-"] .d-top .d-search{flex:3 1 0;min-width:200px}
  .kx.pg[class*=" p-boss-"] .d-top .sp{flex:1 1 0}
}

/* ---- B4. «Tafsilotlar» qatorlari: yozuv (belgili) qiymatdan ~4px yuqorida turardi --------------------------------
   Sabab: `.l` flex ichida birinchi element — SVG, uning tayanch chizig'i pastki chetidan olinadi. Endi tayanch chiziq
   matndan, belgi esa qator o'rtasida. Katta qiymatli qatorlar (Jami, Yangi balans) ham matn chizig'ida tekislanadi. */
.kx.pg[class*=" p-boss-"] .kv .l{align-items:baseline}
.kx.pg[class*=" p-boss-"] .kv .l > svg{align-self:center}
.kx:where(.p-boss-pay-job,.p-boss-pay-cash,.p-boss-top-up,.p-boss-tracking,.p-boss-pay-success) .kv{align-items:baseline}

/* ---- B5. Yopishqoq pastki tugmalar (`.cta-bar`): kontent tugmalar ORTIDAN ko'rinib turardi ------------------------
   (Ariza: «Ishonch» kartasi, To'lov: «E'londagi summa» qatori tugma ostida yarim shaffof.) Endi panelning o'zi — to'liq
   fon, ustida 24px yumshoq o'tish (kontent «tagiga kirib» ketayotgani sezilsin, lekin matn tugma bilan aralashmasin).
   Yuqoridagi 24px oraliq — sahifa oxirida so'nish oxirgi kartani yopmasin. */
@media (max-width:767.98px){
  .kx:where(.p-boss-pay-job,.p-boss-pay-cash,.p-boss-rate,.p-boss-app-detail,.p-boss-applicants,.p-boss-order-detail) .cta-bar{
    background:var(--c-bg);margin-top:var(--sp-6)}
  .kx:where(.p-boss-pay-job,.p-boss-pay-cash,.p-boss-rate,.p-boss-app-detail,.p-boss-applicants,.p-boss-order-detail) .cta-bar::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--sp-6);pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--c-bg))}
  /* Pastki menyusiz oqim sahifalarida menyu uchun qoldirilgan ~84px bo'sh joy kerak emas. */
  .kx:where(.p-boss-pay-job,.p-boss-pay-cash,.p-boss-rate,.p-boss-app-detail) .m-main{padding-bottom:var(--sp-2)}
}
/* «Ariza»: «Rad etish · chat · Tanlash» qatori to'liq enni egallamay, o'ngda ~60px bo'sh qolardi. */
.kx:where(.p-boss-app-detail) .cta-bar .acts3{flex:1;min-width:0}
.kx:where(.p-boss-app-detail) .cta-bar .acts3 .st{align-self:center;justify-self:end}

/* ---- B6. Kuzatuv varag'i (Go): «Batafsil» / «Bekor qilish» havolalari 27px balandlikda — barmoq uchun kichik ------
   Endi 44px bosish maydoni (ko'rinish o'zgarmaydi), bosilganda yumshoq fon. */
.kx:where(.p-boss-go) .go-links{gap:var(--sp-2)}
.kx:where(.p-boss-go) .go-links a{display:inline-flex;align-items:center;min-height:var(--h-tap);padding:0 var(--sp-3);
  border-radius:var(--r-2);transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.kx:where(.p-boss-go) .go-links a:hover{text-decoration:none;background:var(--c-brand-soft)}
.kx:where(.p-boss-go) .go-links a.bad:hover{background:var(--c-bad-soft)}
.kx:where(.p-boss-go) .go-links a:active{transform:scale(var(--press))}
/* O'chiq «Kasbni tanlang» tugmasi ostida ko'k soya qolib, faol tugmadek ko'rinardi. */
.kx:where(.p-boss-go) .go-cta[disabled]{box-shadow:none;filter:none}

/* ---- B7. Chatlar: xabarsiz suhbat «—» bilan ko'rinardi — endi «Hali xabar yo'q…» xira kursivda (`chats.js`) -------- */
.kx .crow .last.none{color:var(--c-ink-3);font-style:italic}

/* ---- B8. Hamyon: amal filtrlari («Band qilingan») o'ng chetda kesilib qolardi, suriladigani sezilmasdi ------------
   Chetda yumshoq so'nish + yashirin aylantirish chizig'i; nolli (o'chiq) filtrlar fonsiz — faollaridan ajraladi. */
.kx:where(.p-boss-wallet) .hist .pills{scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--sp-8)),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - var(--sp-8)),transparent)}
.kx:where(.p-boss-wallet) .hist .pills::-webkit-scrollbar{display:none}
.kx:where(.p-boss-wallet) .hist .pills .pill{flex:none}
.kx:where(.p-boss-wallet) .hist .pills .pill.dis{background:transparent;cursor:default}

/* ---- B9. Ro'yxat kartalari: bosish/hover holati yo'q edi (Buyurtmalarim kartasi, bosh sahifadagi qolgan faol
   buyurtmalar) — endi yumshoq fon + chevron siljishi, bosilganda to'qroq fon. */
.kx:where(.p-boss-orders,.p-boss-home) .ocard .oh,.kx:where(.p-boss-home) a.item{transition:background-color var(--dur-1) var(--ease-out)}
.kx:where(.p-boss-orders,.p-boss-home) .ocard .oh:hover,.kx:where(.p-boss-home) a.item:hover{background:var(--c-surface-2)}
.kx:where(.p-boss-orders,.p-boss-home) .ocard .oh:active,.kx:where(.p-boss-home) a.item:active{background:var(--c-surface-3)}
.kx:where(.p-boss-orders,.p-boss-home) .ocard .oh > svg:last-child{transition:transform var(--dur-1) var(--ease-out)}
.kx:where(.p-boss-orders,.p-boss-home) .ocard .oh:hover > svg:last-child{transform:translateX(2px)}

/* ============================================================ ish beruvchi sayqali tugadi ====================== */

/* Ish kartasi (yo'l sahifalari, `workertrip.js` whoJobCard): soatbay narx ikki qatorda — summa + kichik «soatiga». */
.kx .jobc .pr{text-align:right;flex-shrink:0}
.kx .jobc .pr b{display:block;font-weight:var(--fw-bold)}
.kx .jobc .pr small{display:block;font-size:var(--fs-100);font-weight:var(--fw-regular,400);color:var(--c-ink-3)}

/* ---- S1 optimistik holat (`kx/optimistic.js`) va chat kutilayotgan xabari -------------------------------------- */
/* Tugma darhol KEYINGI holat yozuvini ko'rsatadi + kichik aylanma (server javobigacha); xato — asl yozuv + silkinish. */
.kx .btn.is-opt{pointer-events:none;gap:var(--sp-2);opacity:.92}
.kx .btn.is-opt .opt-sp{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:kx-spin .7s linear infinite}
.kx .btn.opt-err{animation:kx-shake .32s var(--ease-out)}
@keyframes kx-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.kx .bubble.pending{opacity:.72}
.kx .bubble.pending time svg{animation:kx-spin 1.6s linear infinite}
.kx .bubble.failed{box-shadow:inset 0 0 0 1px var(--c-bad-ink)}
.kx .bubble .retry{display:inline-flex;align-items:center;gap:4px;margin-top:var(--sp-1);padding:0;border:0;background:none;
  color:var(--c-bad-ink);font:inherit;font-size:var(--fs-200);font-weight:var(--fw-semi);cursor:pointer}
.kx .bubble .retry:hover{text-decoration:underline}
.kx .bubble .retry:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;border-radius:4px}
.kx .bubble time svg.rd{transition:color var(--dur-1) var(--ease-out)}
@media (prefers-reduced-motion:reduce){ .kx .btn.opt-err,.kx .btn.is-opt .opt-sp,.kx .bubble.pending time svg{animation:none} }
/* S2 «Usta hali yo'lga chiqmadi» kartasi (`kx/noshow.js`): paydo bo'lganda yumshoq ko'tarilish, soat belgisi bir marta
   «chayqaladi» — e'tibor tortadi, lekin bachkana emas. Rang — `note.warn` tokenlari (Grafit qorong'i rejimida ham). */
.kx .ns-card{animation:xg-fadeup .32s cubic-bezier(.2,.8,.2,1) both}
.kx .ns-card .note.warn>.i{animation:xg-iconin .42s .12s cubic-bezier(.2,.8,.2,1) both}
.kx .ns-card .ns-acts{display:grid;gap:var(--sp-2)}
.kx .ns-card .ns-acts .btn{min-height:44px}
@media (min-width:600px){ .kx .ns-card .ns-acts{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){ .kx .ns-card,.kx .ns-card .note.warn>.i{animation:none} }