@font-face { font-family: 'Onest'; src: url(fonts/onest.woff) format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ==========================================================
   Tez Go — dizayn tizimi v2
   ========================================================== */
:root {
  --brand: #0A5BFF; --brand-2: #00A3FF; --brand-ink: #0846C9; --brand-soft: #E8F0FF;
  --page: #F3F5F9; --bg: #FFFFFF; --bg2: #F1F4F9; --bg3: #E3E8F1; --card: #FFFFFF; --line: #E9EDF4;
  --ink: #0E1630; --ink2: #434F6E; --mute: #8590A8;
  --ok: #12B76A; --ok-soft: #E3F8EC; --warn: #F79009; --warn-soft: #FFF3DC; --bad: #F04438; --bad-soft: #FFE9E7; --star: #FFB020;
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --sh1: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px rgba(16, 24, 40, .05);
  --shadow: 0 12px 32px rgba(12, 32, 92, .14); --shadow-s: 0 2px 10px rgba(12, 32, 92, .08);
  --sat: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --nav-h: 62px; --nav-gap: 0px; --app-h: 100vh;
  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --t0: #E6EFFF; --t1: #FFEFDD; --t2: #EFE8FF; --t3: #E2F7EA; --t4: #FFE6EE; --t5: #DBF4F4; --t6: #FFF5D1; --t7: #FFE5E2; --t8: #E6E9FF; --t9: #EDF0F6;
  --k0: #1D6BFF; --k1: #E8751A; --k2: #7A52F5; --k3: #0F9D58; --k4: #E0386F; --k5: #0E9AA7; --k6: #C98A00; --k7: #E04A3C; --k8: #4558DE; --k9: #55627F;
  color-scheme: light;
}
:root[data-theme=dark] {
  --page: #080D1B; --bg: #111A31; --bg2: #18223E; --bg3: #26335A; --card: #111A31; --line: #1E2946;
  --ink: #EEF2FF; --ink2: #B9C3E0; --mute: #8793B2; --brand-soft: #14265A;
  --ok-soft: #0F2E23; --warn-soft: #33260E; --bad-soft: #3A1714;
  --sh1: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 12px 32px rgba(0, 0, 0, .5); --shadow-s: 0 2px 10px rgba(0, 0, 0, .35);
  --t0: #14265A; --t1: #3A2A14; --t2: #2A1F4D; --t3: #0F3023; --t4: #3C1A28; --t5: #0E3033; --t6: #38300F; --t7: #3B1B18; --t8: #1E2350; --t9: #1B2338;
  --k0: #6FA2FF; --k1: #FFA24D; --k2: #AD93FF; --k3: #4CD08A; --k4: #FF7FA6; --k5: #4BD1DC; --k6: #FFCB4A; --k7: #FF8077; --k8: #8F9CFF; --k9: #A5B1CE;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: inherit; font-size: 16px; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { display: block; }
.i { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: var(--sw, 5); stroke-linejoin: round; flex: none; }
svg { fill: currentColor; }
.i.gi, .mk svg, .art-b svg, .noph svg { stroke: none; }
.i.s { --sw: 11; }
.i.xs { --sw: 17; }
.i.fill, .fill .i { --fo: 1; }
.hide { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::-webkit-scrollbar { display: none; }
.tint0 { --tb: var(--t0); --ti: var(--k0); --g1: #4D9BFF; --g2: #0A5BFF; }
.tint1 { --tb: var(--t1); --ti: var(--k1); --g1: #FFB35C; --g2: #F2641E; }
.tint2 { --tb: var(--t2); --ti: var(--k2); --g1: #B79CFF; --g2: #6A3CF0; }
.tint3 { --tb: var(--t3); --ti: var(--k3); --g1: #4BDC9A; --g2: #0E9F5B; }
.tint4 { --tb: var(--t4); --ti: var(--k4); --g1: #FF8FB1; --g2: #E0386F; }
.tint5 { --tb: var(--t5); --ti: var(--k5); --g1: #44D9E3; --g2: #0A8FA8; }
.tint6 { --tb: var(--t6); --ti: var(--k6); --g1: #FFB62E; --g2: #E27F00; }
.tint7 { --tb: var(--t7); --ti: var(--k7); --g1: #FF9486; --g2: #E5412F; }
.tint8 { --tb: var(--t8); --ti: var(--k8); --g1: #8F9CFF; --g2: #4152DB; }
.tint9 { --tb: var(--t9); --ti: var(--k9); --g1: #9AA6C2; --g2: #55627F; }

/* kategoriya belgisi: gradient kvadrat ichida oq duotone ikonka */
.mk { --duo: .34; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(150deg, var(--g1, #4D9BFF), var(--g2, #0A5BFF)); color: #fff; display: grid; place-items: center; flex: none; position: relative; overflow: hidden; box-shadow: 0 7px 14px -9px var(--g2, #0A5BFF), inset 0 1px 0 rgba(255, 255, 255, .3); }
.mk::before { content: ''; position: absolute; right: -24%; top: -28%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .17); }
.mk::after { content: ''; position: absolute; left: -20%; bottom: -34%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .06); }
.mk svg { width: 60%; height: auto; aspect-ratio: 1; position: relative; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .16)); }
.mk .gi { width: 58%; }
.mk.s36 { width: 36px; height: 36px; border-radius: 12px; }
.mk.s40 { width: 40px; height: 40px; border-radius: 13px; }
.mk.s56 { width: 56px; height: 56px; border-radius: 18px; }
.mk.round { border-radius: 50%; }
.art { width: 100%; height: 100%; }
.mk .i { height: auto; aspect-ratio: 1; }

/* ---------- Qobiq ---------- */
.app { position: fixed; left: 0; right: 0; top: 0; height: var(--app-h); overflow: hidden; background: var(--page); }
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: none; padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--sab) + 32px); overscroll-behavior: contain; background: var(--page); }
.screen.active { display: block; animation: fadeIn .2s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0 14px calc(var(--sab) + var(--nav-gap)); pointer-events: none; }
.nav-in { pointer-events: auto; position: relative; height: var(--nav-h); border-radius: 30px; display: grid; grid-template-columns: 1fr 1fr 66px 1fr 1fr; align-items: center; padding: 0 6px; background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: saturate(1.9) blur(26px); -webkit-backdrop-filter: saturate(1.9) blur(26px); box-shadow: 0 16px 36px -8px rgba(12, 32, 92, .28), 0 3px 10px rgba(12, 32, 92, .08), inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 0 #fff; }
:root[data-theme=dark] .nav-in { box-shadow: 0 16px 36px -8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nv { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--mute); font-size: 10.5px; font-weight: 620; position: relative; transition: color .2s; letter-spacing: .1px; padding-top: 1px; }
.nv .ni { width: 50px; height: 31px; border-radius: 16px; display: grid; place-items: center; transition: background .25s, transform .25s; }
.nv .i { width: 25px; height: 25px; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.nv.active { color: var(--brand); }
.nv.active .ni { background: var(--brand-soft); }
.nv.active .i { --fo: 1; transform: scale(1.06); }
.nv:active .i { transform: scale(.88); }
.nv .bdg { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg, #FF5A4D, #E5316B); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--bg); z-index: 2; }
.nv-add { height: 100%; display: grid; place-items: center; position: relative; }
.nv-add span { width: 58px; height: 58px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; transform: translateY(-17px); box-shadow: 0 14px 26px -4px rgba(10, 91, 255, .55), 0 0 0 6px var(--bg), inset 0 1.5px 0 rgba(255, 255, 255, .4); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); position: relative; }
.nv-add span::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .38), transparent 55%); }
.nv-add:active span { transform: translateY(-15px) scale(.92); }
.nv-add .i { --sw: 14; width: 28px; height: 28px; position: relative; z-index: 1; }

/* ---------- Sahifalar (to'liq ekran) ---------- */
.pg { position: absolute; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .3s cubic-bezier(.22, .8, .24, 1), visibility 0s .3s; }
.pg.gray { background: var(--page); }
.pg.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.22, .8, .24, 1); }
.pg.up { transform: translateY(100%); }
.pg.up.open { transform: none; }
.pg-top { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 6px) 14px 8px; background: var(--bg); position: relative; z-index: 2; min-height: calc(var(--sat) + 56px); }
.pg-top h1 { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
.pg-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(var(--sab) + 24px); }
.pg-foot { flex: none; padding: 10px 16px calc(10px + var(--sab)); background: var(--bg); border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.ib { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--ink); flex: none; position: relative; transition: transform .15s, background .2s; }
.ib:active { transform: scale(.92); }
.ib.sm { width: 34px; height: 34px; }
.ib .i { width: 21px; height: 21px; }
.ib.sm .i { width: 19px; height: 19px; }
.ib.glass { background: rgba(255, 255, 255, .92); color: #0E1630; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); }
:root[data-theme=dark] .ib.glass { background: rgba(17, 26, 49, .85); color: #fff; }
.ib.on { color: var(--bad); }
.ib.on .i { --fo: 1; }
.ib .dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg2); }
.ib .cnt-b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
/* Telegram ichida: tizimning o'z "Orqaga" tugmasi bor, ilovaniki yashiriladi */
.app.tgback .pg-top > .ib[data-act=back], .app.tgback .sp-top > .ib[data-act=back], .app.tgback .gal .tl [data-act=back], .app.tgback .pg-top > .ib[data-act=pk-back-x] { display: none; }
.app.tgback .pg-top { padding-left: 16px; }

/* ---------- Pastki oynalar ---------- */
.sh { position: absolute; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
.sh.open { visibility: visible; pointer-events: auto; transition: none; }
.sh-bd { position: absolute; inset: 0; background: rgba(6, 12, 34, .5); opacity: 0; transition: opacity .28s; }
.sh.open .sh-bd { opacity: 1; }
.sh-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90%; display: flex; flex-direction: column; background: var(--bg); border-radius: 24px 24px 0 0; transform: translateY(102%); transition: transform .32s cubic-bezier(.22, .8, .24, 1); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); }
.sh.open .sh-p { transform: none; }
.sh-p::before { content: ''; flex: none; width: 38px; height: 5px; border-radius: 3px; background: var(--bg3); margin: 9px auto 2px; }
.sh-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 18px 6px; }
.sh-h h2 { flex: 1; font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.sh-b { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 18px 12px; overscroll-behavior: contain; }
.sh-f { flex: none; padding: 10px 18px calc(14px + var(--sab)); display: flex; gap: 10px; border-top: 1px solid var(--line); }
.sh-p.pad { padding-bottom: var(--sab); }

/* ---------- Tugmalar va maydonlar ---------- */
.btn { height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, opacity .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .i { width: 20px; height: 20px; }
.btn-pri { background: var(--grad); color: #fff; box-shadow: 0 8px 18px rgba(10, 91, 255, .28); }
.btn-soft { background: var(--brand-soft); color: var(--brand); }
:root[data-theme=dark] .btn-soft { color: #8DB4FF; }
.btn-line { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn-gray { background: var(--bg2); color: var(--ink); }
.btn-bad { background: var(--bad-soft); color: var(--bad); }
.btn-ok { background: var(--ok); color: #fff; }
.btn.full { width: 100%; }
.btn.sm { height: 36px; padding: 0 13px; border-radius: 11px; font-size: 13px; }
.btn.flex { flex: 1; min-width: 0; }
.lnk { color: var(--brand); font-weight: 620; font-size: 13.5px; }

.fld { margin: 0 0 14px; }
.fld > label, .lbl { display: block; font-size: 13px; font-weight: 620; color: var(--ink2); margin: 0 0 7px; }
.fld > label em, .lbl em { color: var(--bad); font-style: normal; }
.fld .hint { margin-top: 6px; font-size: 12px; color: var(--mute); }
.inp { width: 100%; height: 48px; padding: 0 14px; border-radius: 13px; border: 1.5px solid transparent; background: var(--bg2); outline: none; transition: border-color .2s, background .2s; }
.inp:focus { border-color: var(--brand); background: var(--bg); }
.inp.err { border-color: var(--bad); }
textarea.inp { height: auto; min-height: 110px; padding: 12px 14px; resize: none; line-height: 1.45; }
.inp-w { position: relative; }
.inp-w .sfx { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mute); font-weight: 620; font-size: 14px; pointer-events: none; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--bg2); font-weight: 620; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1.5px solid transparent; transition: all .18s; color: var(--ink2); }
.chip .i { width: 16px; height: 16px; }
.chip[aria-pressed=true], .chip.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
:root[data-theme=dark] .chip[aria-pressed=true], :root[data-theme=dark] .chip.on { color: #8DB4FF; }
.chip.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
.hscroll > * { flex: none; }
.sw { width: 48px; height: 29px; border-radius: 15px; background: var(--bg3); position: relative; transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .2s; }
.sw[aria-checked=true] { background: var(--brand); }
.sw[aria-checked=true]::after { transform: translateX(19px); }

/* ---------- Bo'limlar ---------- */
.sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 10px; }
.sec h2 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
.sec small { display: block; font-size: 12px; color: var(--mute); font-weight: 550; margin-top: 2px; }
.sec .lnk { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.sec .lnk .i { width: 16px; height: 16px; }
.pad { padding-left: 16px; padding-right: 16px; }
.blk { background: var(--bg); border-radius: 18px; margin: 10px 12px 0; padding: 16px; }

/* ---------- Bosh sahifa: yopishqoq sarlavha ---------- */
.hd2 { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: calc(var(--sat) + 6px) 12px 10px; transition: box-shadow .2s; }
.hd2.scrolled { box-shadow: 0 6px 18px rgba(12, 32, 92, .07); }
.hd-r1 { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.loc2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left; height: 40px; }
.loc2 .lp { width: 34px; height: 34px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.loc2 .lp .i { width: 19px; height: 19px; }
.loc2 .lt { min-width: 0; line-height: 1.15; }
.loc2 small { display: block; font-size: 11px; color: var(--mute); font-weight: 550; }
.loc2 b { display: flex; align-items: center; gap: 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.loc2 b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.loc2 b .i { width: 16px; height: 16px; color: var(--mute); }
.hd-r2 { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.sfield { position: relative; flex: 1; min-width: 0; }
.sinp { width: 100%; height: 46px; border-radius: 14px; background: var(--bg2); display: flex; align-items: center; gap: 10px; padding: 0 56px 0 14px; color: var(--mute); font-weight: 550; font-size: 14.5px; text-align: left; border: 1.5px solid transparent; }
.sinp .i { width: 20px; height: 20px; }
.sinp span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sinp.has { color: var(--ink); }
.fbtn { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border-radius: 11px; background: var(--bg); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh1); }
.fbtn .i { width: 19px; height: 19px; }
.fbtn.on { background: var(--brand); color: #fff; }
.fbtn b { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg2); }


/* banner karuseli (yonidagisi ko'rinib turadi) */
.bn { margin-top: 10px; position: relative; }
.bn-s { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 12px; scrollbar-width: none; scroll-padding: 0 12px; }
.bn-i { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; aspect-ratio: 16 / 7.2; border-radius: 18px; overflow: hidden; position: relative; background: var(--grad); color: #fff; text-align: left; display: block; }
.bn-i img, .bn-i video { width: 100%; height: 100%; object-fit: cover; }
.bn-i .bt { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 11px; background: linear-gradient(transparent, rgba(0, 0, 0, .58)); font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.bn-i .bl { position: absolute; top: 9px; left: 9px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); letter-spacing: .2px; }
.bn-i .abs { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.bn-i .ad-b { padding: 7px 13px; border-radius: 11px; background: rgba(255, 255, 255, .95); color: #0A5BFF; font-weight: 700; font-size: 12.5px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.bn-i.own { padding: 16px 16px 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.bn-i.own h3 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.15; max-width: 62%; }
.bn-i.own p { font-size: 12.5px; font-weight: 550; opacity: .88; max-width: 58%; line-height: 1.3; }
.bn-i.own .go { margin-top: 6px; align-self: flex-start; height: 30px; padding: 0 13px; border-radius: 10px; background: #fff; color: #0A5BFF; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.bn-i.own .go .i { width: 14px; height: 14px; --sw: 16; }
.bn-i.own .pic { position: absolute; right: -6px; bottom: -8px; width: 46%; height: 112%; display: grid; place-items: center; }
.bn-i.own .pic svg { width: 88%; height: 88%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .22)); transform: rotate(-6deg); }
.bn-i.own::before { content: ''; position: absolute; right: -30px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.bn-i.own::after { content: ''; position: absolute; right: 52px; bottom: -60px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.bn-i.g1 { background: linear-gradient(120deg, #0A5BFF 0%, #2E86FF 60%, #00A3FF 100%); }
.bn-i.g2 { background: linear-gradient(120deg, #7A52F5 0%, #A06BFF 55%, #D26BFF 120%); }
.bn-i.g3 { background: linear-gradient(120deg, #FF7A18 0%, #FFA133 60%, #FFC53D 120%); }
.bn-d { display: flex; justify-content: center; gap: 5px; margin-top: 9px; }
.bn-d i { width: 6px; height: 6px; border-radius: 3px; background: var(--bg3); transition: all .25s; }
.bn-d i.on { width: 18px; background: var(--brand); }

/* kategoriyalar to'ri (2 qator, yonga suriladi) */
.cgrid { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100vw - 24px - 3 * 8px) / 4.35); gap: 12px 8px; overflow-x: auto; padding: 14px 12px 4px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 12px; }
@media (min-width: 560px) { .cgrid { grid-auto-columns: 92px; } }
.cg { text-align: center; scroll-snap-align: start; min-width: 0; }
.cg .mk { width: 100%; height: auto; aspect-ratio: 1; border-radius: 22%; transition: transform .18s; }
.cg .mk svg { width: 70%; }
.cg:active .mk { transform: scale(.93); }
.cg > span:not(.mk) { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 620; line-height: 1.18; color: var(--ink); height: 27px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cg > span.sm:not(.mk) { font-size: 10.5px; letter-spacing: -.1px; }
.cg.all .mk { background: var(--grad); color: #fff; }
.cg.all .mk .i { width: 44%; --sw: 8; position: relative; z-index: 1; }
.cg.on .mk { box-shadow: 0 0 0 2.5px var(--brand); }


/* rangli polosa (premium e'lonlar) */
.band { margin: 16px 0 0; padding: 14px 0 14px; background: linear-gradient(135deg, #0A47D6 0%, #0A5BFF 50%, #2E86FF 120%); position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.band .bh { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; color: #fff; position: relative; }
.band .bh h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -.2px; }
.band .bh h2 .i { color: #FFD166; --fo: 1; stroke: none; width: 22px; height: 22px; }
.band .bh .lnk { color: #fff; opacity: .92; }
.band .hscroll { position: relative; }
.band .card { box-shadow: 0 8px 20px rgba(3, 20, 80, .25); }

/* do'konlar qatori */
.shops { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 2px; scrollbar-width: none; }
.shp { flex: none; width: 74px; text-align: center; }
.shp .av { width: 64px; height: 64px; margin: 0 auto; font-size: 20px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
.shp b { display: block; margin-top: 9px; font-size: 11.5px; font-weight: 620; line-height: 1.2; height: 27px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

/* ---------- E'lon kartalari ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.card { background: var(--card); border-radius: 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; text-align: left; box-shadow: var(--sh1); transition: transform .15s; min-width: 0; }
.card:active { transform: scale(.98); }
.ph { position: relative; aspect-ratio: 1 / 1.02; background: var(--tb, var(--bg2)); overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph .noph { position: absolute; inset: 0; display: grid; place-items: center; }
.ph .noph svg { width: 52%; height: auto; aspect-ratio: 1; opacity: .95; }
.noph svg { color: var(--ti, var(--k0)); --duo: .3; }
.ph .tags { position: absolute; left: 8px; bottom: 8px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: flex-start; max-width: calc(100% - 16px); }
.tg { font-size: 10px; font-weight: 700; letter-spacing: .2px; padding: 3px 7px; border-radius: 7px; color: #fff; display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.tg .i { width: 11px; height: 11px; --sw: 18; }
.tg-vip { background: linear-gradient(135deg, #FFB020, #FF7A18); }
.tg-top { background: var(--grad); }
.tg-urg { background: linear-gradient(135deg, #FF5A4D, #E5316B); }
.tg-ad { background: rgba(10, 19, 48, .62); backdrop-filter: blur(6px); }
.tg-new { background: var(--ok); }
.heart { position: absolute; right: 7px; top: 7px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #55627F; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); transition: transform .15s; z-index: 2; }
:root[data-theme=dark] .heart { background: rgba(14, 20, 40, .78); color: #C9D2EC; }
.heart:active { transform: scale(.85); }
.heart .i { width: 17px; height: 17px; }
.heart[aria-pressed=true] { color: var(--bad); }
.heart[aria-pressed=true] .i { --fo: 1; animation: pop .35s; }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.pn { position: absolute; right: 7px; bottom: 8px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(8, 14, 36, .55); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 8px; display: inline-flex; gap: 3px; align-items: center; }
.pn .i { width: 11px; height: 11px; --sw: 12; }
.cb { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cb .pr { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); line-height: 1.2; }
.cb .pr small { font-size: 11px; font-weight: 620; color: var(--mute); margin-left: 3px; white-space: nowrap; letter-spacing: 0; }
.cb .pr > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cb .pr.free { color: var(--ok); }
.cb .tt { font-size: 13px; font-weight: 500; color: var(--ink2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; word-break: break-word; }
.cb .ft { font-size: 11.5px; color: var(--mute); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb .mt { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 11px; color: var(--mute); font-weight: 550; margin-top: auto; padding-top: 5px; }
.cb .mt > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.cb .mt .pl em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb .mt .i { width: 12px; height: 12px; --sw: 12; }
.cb .mt .tm { display: flex; justify-content: space-between; align-items: center; gap: 6px; overflow: visible; }
.cb .mt .tm > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--ink); flex: none; }
.rate .i { color: var(--star); --fo: 1; stroke: none; width: 13px; height: 13px; }
.card.sold .ph::after { content: attr(data-lbl); position: absolute; inset: 0; background: rgba(8, 14, 36, .55); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.card.hc { width: 176px; flex: none; }
.card.hc .ph { aspect-ratio: 1 / .9; }
.card.mc { width: 128px; flex: none; border-radius: 14px; }
.card.mc .ph { aspect-ratio: 1; }
.card.mc .cb { padding: 8px 9px 10px; }
.card.mc .pr { font-size: 13.5px; }
.card.mc .tt { font-size: 12px; min-height: 0; -webkit-line-clamp: 1; }
.card.mc .pr > span:first-child { white-space: normal; }
.card.mc .heart, .card.mc .tags { display: none; }
.list { padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }

/* skeleton */
.sk { background: linear-gradient(100deg, var(--bg2) 30%, var(--bg3) 50%, var(--bg2) 70%); background-size: 300% 100%; animation: shim 1.3s infinite linear; border-radius: 12px; }
@keyframes shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.card.skc { pointer-events: none; }
.card.skc .ph { background: none; }
.card.skc .ph.sk { aspect-ratio: 1 / 1.02; border-radius: 0; }
.card.skc .l { height: 12px; margin: 10px 11px 0; }
.card.skc .l.s { width: 55%; margin-bottom: 14px; }

/* ---------- Bo'sh holat ---------- */
.empty { text-align: center; padding: 44px 28px; color: var(--mute); }
.empty .eico { width: 92px; height: 92px; border-radius: 30px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin: 0 auto 18px; position: relative; }
.empty .eico::after { content: ''; position: absolute; inset: -9px; border-radius: 36px; border: 1.5px dashed color-mix(in srgb, var(--brand) 28%, transparent); }
.empty .eico .i { width: 42px; height: 42px; --sw: 3; }
.empty h3 { color: var(--ink); font-size: 18px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.2px; }
.empty p { font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
.empty .btn { margin-top: 2px; }
.more { display: flex; justify-content: center; padding: 18px; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--bg3); border-top-color: var(--brand); animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.btn .spin { margin: 0; }

/* ---------- Katalog ekrani ---------- */
.pgt { padding: calc(var(--sat) + 12px) 16px 6px; background: var(--bg); }
.pgt h1 { font-size: 26px; font-weight: 700; letter-spacing: -.6px; }
.pgt p { color: var(--mute); font-weight: 550; font-size: 13.5px; margin-top: 2px; }
.pgt + .sfield { background: var(--bg); padding: 4px 12px 12px; }
.pgt + .sfield .sinp { padding-right: 14px; }
.ctiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 12px 0; }
.ctile { --duo: .3; border-radius: 22px; padding: 15px 14px 12px; background: linear-gradient(150deg, var(--g1), var(--g2)); color: #fff; min-height: 132px; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; position: relative; overflow: hidden; transition: transform .15s; box-shadow: 0 12px 22px -14px var(--g2), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ctile::before { content: ''; position: absolute; right: -30px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ctile::after { content: ''; position: absolute; left: -24px; bottom: -46px; width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .06); }
.ctile:active { transform: scale(.97); }
.ctile .art-b { position: absolute; right: -6px; bottom: -8px; width: 58%; aspect-ratio: 1; transform: rotate(-8deg); color: #fff; z-index: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18)); }
.ctile .art-b svg { width: 100%; height: auto; aspect-ratio: 1; }
.ctile .tx { position: relative; z-index: 1; display: block; }
.ctile b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; color: #fff; max-width: 64%; letter-spacing: -.2px; }
.ctile small { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, .86); font-weight: 550; }
.sub { display: flex; align-items: center; gap: 14px; padding: 9px 16px; text-align: left; width: 100%; }
.sub:active { background: var(--bg2); }
.sub b { font-weight: 620; font-size: 15px; flex: 1; min-width: 0; }
.sub small { color: var(--mute); font-weight: 550; font-size: 12.5px; }
.sub > .i { color: var(--mute); width: 18px; height: 18px; }
.cp-hero { --duo: .3; margin: 4px 12px 8px; border-radius: 24px; background: linear-gradient(150deg, var(--g1), var(--g2)); color: #fff; padding: 20px 18px 18px; position: relative; overflow: hidden; min-height: 124px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 14px 26px -16px var(--g2), inset 0 1px 0 rgba(255, 255, 255, .3); }
.cp-hero::before { content: ''; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.cp-hero .art-b { position: absolute; right: 6px; top: 50%; width: 40%; aspect-ratio: 1; transform: translateY(-50%) rotate(-8deg); color: #fff; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); }
.cp-hero .art-b svg { width: 100%; height: auto; aspect-ratio: 1; }
.cp-hero h2 { position: relative; font-size: 22px; font-weight: 700; letter-spacing: -.4px; max-width: 58%; line-height: 1.15; color: #fff; }
.cp-hero p { position: relative; font-size: 13px; color: rgba(255, 255, 255, .88); font-weight: 550; margin-top: 4px; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; padding: 6px 16px 0; }
.cp-grid .cg .mk { border-radius: 24%; }
.cp-grid .cg .mk .gi { width: 52%; height: 52%; }

/* ---------- Qidiruv sahifasi ---------- */
.sp-top { display: flex; align-items: center; gap: 8px; padding: calc(var(--sat) + 8px) 12px 8px; background: var(--bg); }
.sp-in { flex: 1; height: 46px; border-radius: 14px; background: var(--bg2); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 13px; border: 1.5px solid transparent; }
.sp-in:focus-within { border-color: var(--brand); background: var(--bg); }
.sp-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; }
.sp-in .i { color: var(--mute); }
.sp-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; font-weight: 700; font-size: 16px; }
.sp-h button { color: var(--brand); font-size: 13px; font-weight: 620; }
.sg { display: flex; align-items: center; gap: 12px; padding: 9px 16px; text-align: left; width: 100%; }
.sg:active { background: var(--bg2); }
.sg .si { width: 42px; height: 42px; border-radius: 13px; background: var(--bg2); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--mute); }
.sg .si .i { width: 20px; height: 20px; }
.sg .si img { width: 100%; height: 100%; object-fit: cover; }
.sg .si.c { background: var(--tb); color: var(--ti); --duo: .3; }
.sg .si.c svg { width: 62%; height: auto; aspect-ratio: 1; }
.sg .si.c .gi { width: 58%; height: 58%; }
.sg .tx { flex: 1; min-width: 0; }
.sg b { display: block; font-size: 14.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg small { display: block; font-size: 12px; color: var(--mute); font-weight: 550; }
.sg mark { background: none; color: var(--brand); }
.sg .go { color: var(--mute); width: 18px; height: 18px; }
.sg button.go { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.sg button.si { border: 0; }
.sgrp { padding: 10px 16px 4px; font-size: 12px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Ro'yxat sahifasi ---------- */
.lst-sub { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 10px; scrollbar-width: none; background: var(--bg); }
.lst-sub .chip { background: var(--bg2); }
.lst-sub .chip .mkm { width: 20px; height: 20px; display: grid; place-items: center; margin-left: -4px; }
.lst-sub .chip .mkm svg { width: 20px; height: 20px; }
.lst-sub .chip .mkm .gi { width: 18px; height: 18px; }
.lst-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; font-size: 13px; color: var(--mute); font-weight: 550; gap: 10px; }
.lst-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-bar .chip { height: 34px; background: var(--bg); box-shadow: var(--sh1); flex: none; }
.afl { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; }
.afl .chip { height: 30px; font-size: 12px; background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.afl .chip .i { width: 14px; height: 14px; }
.lst-save { margin: 8px 12px 0; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--bg); box-shadow: var(--sh1); text-align: left; width: calc(100% - 24px); }
.lst-save .mic { width: 34px; height: 34px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.lst-save .mic .i { width: 19px; height: 19px; }
.lst-save .tx { flex: 1; min-width: 0; font-weight: 620; font-size: 13.5px; line-height: 1.25; }
.lst-save .tx small { display: block; color: var(--mute); font-weight: 550; font-size: 12px; }
.lst-save .sw { margin-left: auto; }

/* ---------- Batafsil sahifa ---------- */
.gal { position: relative; flex: none; background: var(--bg); padding-top: var(--sat); }
.gal-in { position: relative; height: min(88vw, 420px); background: var(--bg3); overflow: hidden; }
.gal-s { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: none; }
.gal-s > div { flex: 0 0 100%; scroll-snap-align: center; height: 100%; background: var(--tb, var(--bg3)); position: relative; }
.gal-s img { width: 100%; height: 100%; object-fit: cover; }
.gal .noph { position: absolute; inset: 0; display: grid; place-items: center; }
.gal .noph svg { width: 46%; height: auto; aspect-ratio: 1; }
.gal .tl { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; justify-content: space-between; z-index: 3; pointer-events: none; }
.gal .tl > * { pointer-events: auto; }
.gal .tl .rt { display: flex; gap: 8px; margin-left: auto; }
.gal .cnt { position: absolute; right: 12px; bottom: 12px; background: rgba(8, 14, 36, .58); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); z-index: 3; }
.gal .dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 5px; z-index: 3; pointer-events: none; }
.gal .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: all .2s; }
.gal .dots i.on { width: 18px; background: #fff; }
.thumbs { display: flex; gap: 8px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--bg); }
.thumbs button { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; position: relative; border: 2px solid transparent; flex: none; opacity: .75; }
.thumbs button.on { border-color: var(--brand); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .more-t { background: rgba(10, 19, 48, .72); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; position: absolute; inset: 0; }
.dt { background: var(--bg); padding: 14px 16px 22px; position: relative; }
.dt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cpill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: 12px; background: var(--bg2); color: var(--ink2); font-weight: 620; font-size: 12.5px; max-width: 72%; min-width: 0; }
.cpill .mk { width: 24px; height: 24px; border-radius: 8px; }
.cpill > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt .big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dt .big b { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.8px; }
.dt .big .neg { background: var(--warn-soft); color: var(--warn); font-weight: 700; padding: 3px 9px; border-radius: 8px; font-size: 12px; align-self: center; }
.dt h1 { font-size: 18px; font-weight: 620; letter-spacing: -.2px; line-height: 1.28; margin-top: 8px; color: var(--ink); word-break: break-word; }
.dt .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--mute); font-weight: 550; font-size: 12.5px; }
.dt .meta span { display: inline-flex; align-items: center; gap: 5px; }
.dt .meta .i { width: 15px; height: 15px; }
.sect { background: var(--bg); margin-top: 8px; padding: 14px 16px 16px; }
.sect > h3, .h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.2px; }
.tabs { display: flex; background: var(--bg); margin-top: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); position: relative; }
.tab { flex: 1; padding: 13px 4px; text-align: center; font-weight: 620; color: var(--mute); position: relative; font-size: 14.5px; }
.tab.on { color: var(--brand); }
.tab.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; border-radius: 2px; background: var(--brand); }
.tab i { font-style: normal; background: var(--bg2); color: var(--ink2); border-radius: 9px; font-size: 11px; padding: 1px 6px; margin-left: 4px; }
.kv { display: flex; flex-direction: column; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv > div:last-child { border-bottom: 0; }
.kv span { color: var(--mute); font-weight: 550; flex: none; }
.kv b { font-weight: 620; text-align: right; min-width: 0; word-break: break-word; }
.amen { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.amen span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 11px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 620; }
.amen .i { width: 14px; height: 14px; --sw: 20; }
.desc { color: var(--ink2); line-height: 1.55; font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
.desc.cl { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sell { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.av { width: 50px; height: 50px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; overflow: hidden; flex: none; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.lg { width: 76px; height: 76px; font-size: 26px; }
.av.sm { width: 40px; height: 40px; font-size: 14px; }
.sell .tx { flex: 1; min-width: 0; }
.sell b { display: flex; align-items: center; gap: 5px; font-size: 15.5px; font-weight: 700; }
.sell small { color: var(--mute); font-weight: 550; font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vf { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

.shop-b { background: var(--warn-soft); color: var(--warn); font-size: 10.5px; padding: 2px 7px; border-radius: 7px; font-weight: 700; }
.safe { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: var(--warn-soft); color: var(--ink2); font-size: 13px; line-height: 1.45; }
.safe .i { color: var(--warn); width: 24px; height: 24px; }
.safe b { color: var(--ink); display: block; margin-bottom: 2px; font-size: 13.5px; }
.rep-l { display: flex; align-items: center; gap: 6px; color: var(--mute); font-weight: 620; font-size: 13px; margin-top: 14px; }
.rep-l .i { width: 16px; height: 16px; }
.cta { position: relative; flex: none; padding: 10px 14px calc(10px + var(--sab)); background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; box-shadow: 0 -8px 24px rgba(12, 32, 92, .06); }
.cta.two { grid-template-columns: 1fr 1fr; }
.cta .pc { min-width: 0; }
.cta .pc small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 550; }
.cta .pc b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.3px; }
.cta .btn { height: 48px; padding: 0 18px; min-width: 0; }
.cta .btn.sq { width: 48px; padding: 0; }
.cta .btn.wide { padding: 0 22px; }
.own { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat3 div { background: var(--bg2); border-radius: 14px; padding: 10px; text-align: center; }
.stat3 b { display: block; font-size: 17px; font-weight: 700; }
.stat3 small { font-size: 11px; color: var(--mute); font-weight: 620; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 550; margin-top: 12px; line-height: 1.4; }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner.info { background: var(--brand-soft); color: var(--brand); }
.banner .i { width: 20px; height: 20px; margin-top: 1px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.b-active { background: var(--ok-soft); color: var(--ok); }
.b-pending { background: var(--warn-soft); color: var(--warn); }
.b-rejected { background: var(--bad-soft); color: var(--bad); }
.b-sold, .b-archived, .b-expired { background: var(--bg3); color: var(--ink2); }

/* ---------- Izohlar va baholar ---------- */
.rsum { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.rsum .n { font-size: 42px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .i { width: 16px; height: 16px; --fo: 1; stroke: none; }
.stars .off { color: var(--bg3); }
.rsum small { color: var(--mute); font-weight: 550; display: block; font-size: 12.5px; margin-top: 3px; }
.rbox { margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--bg2); }
.rbox .pick { display: flex; gap: 6px; margin-bottom: 10px; }
.rbox .pick button { color: var(--bg3); }
.rbox .pick button.on { color: var(--star); }
.rbox .pick .i { width: 34px; height: 34px; --fo: 1; stroke: none; }
.rbox textarea { min-height: 78px; background: var(--bg); }
.cm { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cm:last-child { border: 0; }
.cm .bd { flex: 1; min-width: 0; }
.cm .nm { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; flex-wrap: wrap; }
.cm .nm small { color: var(--mute); font-weight: 550; font-size: 12px; }
.cm .tx { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink2); white-space: pre-wrap; word-break: break-word; }
.cm .ac { display: flex; gap: 16px; margin-top: 7px; font-size: 12.5px; color: var(--mute); font-weight: 620; }
.cm .ac button:active { color: var(--brand); }
.cm.rp { padding: 10px 0 0; border: 0; }
.rps { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); }
.hold { font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: 7px; }
.sellr { background: var(--brand-soft); color: var(--brand); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 7px; }

/* ---------- E'lon berish ---------- */
.stp { display: flex; gap: 6px; padding: 0 16px 10px; background: var(--bg); }
.stp i { flex: 1; height: 4px; border-radius: 2px; background: var(--bg3); transition: background .3s; }
.stp i.on { background: var(--brand); }
.pk { display: flex; align-items: center; gap: 14px; padding: 9px 16px; text-align: left; width: 100%; }
.pk:active { background: var(--bg2); }
.pk b { flex: 1; font-size: 15.5px; font-weight: 620; }
.pk > .i { color: var(--mute); width: 18px; height: 18px; }
.sel-cat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg2); width: 100%; text-align: left; }
.sel-cat .tx { flex: 1; min-width: 0; }
.sel-cat small { display: block; color: var(--mute); font-size: 12px; font-weight: 550; }
.sel-cat b { font-weight: 700; font-size: 15px; }
.sel-cat .lnk { font-size: 13px; }
.sel-cat > .i { color: var(--brand); }
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pho { aspect-ratio: 1; border-radius: 14px; background: var(--bg2); overflow: hidden; position: relative; display: grid; place-items: center; color: var(--brand); border: 2px dashed var(--bg3); }
.pho.has { border: 0; }
.pho img { width: 100%; height: 100%; object-fit: cover; }
.pho .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(8, 14, 36, .7); color: #fff; display: grid; place-items: center; }
.pho .rm .i { width: 13px; height: 13px; --sw: 18; }
.pho .cv { position: absolute; left: 4px; bottom: 4px; font-size: 9.5px; font-weight: 700; background: var(--brand); color: #fff; padding: 2px 6px; border-radius: 6px; }
.pho.add { flex-direction: column; font-size: 11px; font-weight: 620; gap: 2px; place-content: center; justify-items: center; }
.pho.add .i { width: 24px; height: 24px; }
.form-sec { margin-top: 20px; }
.form-sec > h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cur { display: flex; background: var(--bg2); border-radius: 13px; padding: 4px; gap: 3px; flex: none; }
.cur button { padding: 0 14px; height: 40px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--mute); }
.cur button.on { background: var(--bg); color: var(--brand); box-shadow: var(--shadow-s); }
.tgl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-weight: 620; font-size: 14.5px; }
.free-b { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--ok-soft); color: var(--ok); font-weight: 620; font-size: 13.5px; line-height: 1.35; }
.free-b .i { width: 26px; height: 26px; }
.ok-wrap { text-align: center; padding: 8px 8px 4px; }
.ok-mark { width: 84px; height: 84px; margin: 6px auto 16px; border-radius: 50%; background: var(--ok-soft); display: grid; place-items: center; color: var(--ok); }
.ok-mark svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s .15s ease forwards; }
.ok-mark.wait { background: var(--warn-soft); color: var(--warn); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ok-wrap h2 { font-size: 22px; font-weight: 700; }
.ok-wrap p { color: var(--mute); margin-top: 6px; font-size: 14px; line-height: 1.45; }

/* ---------- Reklama xizmatlari ---------- */
.svc { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--bg2); margin-bottom: 10px; width: 100%; text-align: left; position: relative; border: 1.5px solid transparent; }
.svc .si { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: none; }
.svc .si .i { width: 24px; height: 24px; }
.svc .tx { flex: 1; min-width: 0; }
.svc b { display: block; font-weight: 700; font-size: 15px; }
.svc small { display: block; color: var(--mute); font-size: 12.5px; font-weight: 550; line-height: 1.35; margin-top: 2px; }
.svc .pz { text-align: right; flex: none; }
.svc .pz b { font-size: 15px; color: var(--brand); }
.svc .pz small { margin: 0; }
.svc .free-t { color: var(--ok) !important; }
.svc.act { border-color: var(--ok); }
.svc .act-t { font-size: 11px; color: var(--ok); font-weight: 700; }
.si-bump { background: linear-gradient(135deg, #12B76A, #0FA3B1); }
.si-top { background: var(--grad); }
.si-feat { background: linear-gradient(135deg, #FFB020, #FF7A18); }
.si-urgent { background: linear-gradient(135deg, #FF5A4D, #E5316B); }
.si-target { background: linear-gradient(135deg, #7A5CFF, #C14BFF); }
.si-chan { background: linear-gradient(135deg, #229ED9, #0A6BFF); }

/* ---------- Chat ---------- */
.cv { display: flex; gap: 12px; padding: 12px 16px; align-items: center; width: 100%; text-align: left; background: var(--bg); border-bottom: 1px solid var(--line); }
.cv:active { background: var(--bg2); }
.cv .th { width: 54px; height: 54px; border-radius: 15px; background: var(--bg2); overflow: hidden; flex: none; display: grid; place-items: center; }
.cv .th img { width: 100%; height: 100%; object-fit: cover; }
.cv .th .i { width: 24px; height: 24px; color: var(--mute); }
.cv .tx { flex: 1; min-width: 0; }
.cv .r1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cv .r1 b { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv .r1 small { color: var(--mute); font-size: 12px; font-weight: 550; flex: none; }
.cv .r2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 2px; }
.cv .r2 span { color: var(--mute); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv .r3 { font-size: 12px; color: var(--brand); font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cv.un .r2 span { color: var(--ink); font-weight: 620; }
.ub { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.thr-l { display: flex; align-items: center; gap: 11px; padding: 10px 16px; background: var(--bg2); width: 100%; text-align: left; border-bottom: 1px solid var(--line); }
.thr-l .th { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--bg3); display: grid; place-items: center; flex: none; }
.thr-l .th img { width: 100%; height: 100%; object-fit: cover; }
.thr-l .th .i { width: 20px; height: 20px; color: var(--mute); }
.thr-l b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr-l small { color: var(--brand); font-weight: 700; font-size: 13px; }
.thr-l .tx { flex: 1; min-width: 0; }
.msgs { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 8px; }
.msg { max-width: 80%; padding: 9px 13px 6px; border-radius: 19px; font-size: 15px; line-height: 1.38; word-break: break-word; white-space: pre-wrap; position: relative; }
.msg small { display: block; text-align: right; font-size: 10.5px; opacity: .65; margin-top: 2px; font-weight: 550; }
.msg.me { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.msg.him { align-self: flex-start; background: var(--bg2); border-bottom-left-radius: 6px; }
.msg.pend { opacity: .6; }
.day { align-self: center; font-size: 11.5px; color: var(--mute); font-weight: 620; background: var(--bg2); padding: 3px 11px; border-radius: 10px; margin: 6px 0; }
.sysm { align-self: center; max-width: 92%; text-align: center; font-size: 12px; line-height: 1.4; color: var(--warn); background: var(--warn-soft); padding: 9px 13px; border-radius: 14px; margin-bottom: 4px; font-weight: 550; }
.sysm .i { width: 14px; height: 14px; vertical-align: -2px; }
.qr { display: flex; gap: 8px; overflow-x: auto; padding: 6px 14px 8px; scrollbar-width: none; flex: none; }
.qr .chip { background: var(--brand-soft); color: var(--brand); }
.cbar { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px calc(10px + var(--sab)); border-top: 1px solid var(--line); background: var(--bg); }
.cbar textarea { flex: 1; min-height: 46px; max-height: 120px; padding: 12px 15px; border-radius: 23px; background: var(--bg2); border: 0; outline: none; resize: none; line-height: 1.35; }
.cbar .sendb { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; transition: transform .15s, opacity .2s; }
.cbar .sendb:active { transform: scale(.9); }
.cbar .sendb[disabled] { opacity: .45; }

/* ---------- Profil va hamyon ---------- */
.me-top { background: var(--bg); padding: calc(var(--sat) + 14px) 16px 16px; }
.me-c { display: flex; align-items: center; gap: 14px; }
.me-c .tx { flex: 1; min-width: 0; }
.me-c h2 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 6px; letter-spacing: -.3px; }
.me-c small { color: var(--mute); font-weight: 550; font-size: 13px; display: flex; gap: 8px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.wal { margin: 14px 12px 0; padding: 20px; border-radius: 24px; background: linear-gradient(135deg, #0839C9 0%, #0A5BFF 52%, #00A3FF 120%); color: #fff; position: relative; overflow: hidden; box-shadow: 0 14px 32px rgba(10, 91, 255, .3); }
.wal::before, .wal::after { content: ''; position: absolute; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .16); }
.wal::before { width: 120px; right: -20px; top: 26px; box-shadow: -26px 18px 0 0 rgba(255, 255, 255, .12), -50px 36px 0 -2px rgba(255, 255, 255, .09); }
.wal::after { width: 70px; right: -14px; bottom: 54px; }
.wal small { opacity: .82; font-weight: 620; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.wal .bal { font-size: 32px; font-weight: 700; letter-spacing: -1px; margin: 6px 0 16px; line-height: 1.1; position: relative; }
.wal .bal span { font-size: 16px; font-weight: 620; opacity: .85; margin-left: 5px; letter-spacing: 0; }
.wal .btns { display: flex; gap: 10px; position: relative; z-index: 1; }
.wal .btn { height: 44px; border-radius: 13px; font-size: 14px; flex: 1; }
.wal .btn-w { background: #fff; color: var(--brand); }
.wal .btn-g { background: rgba(255, 255, 255, .18); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px 0; }
.kpi { background: var(--bg); border-radius: 16px; padding: 13px 8px; text-align: center; box-shadow: var(--sh1); }
.kpi b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 11.5px; color: var(--mute); font-weight: 620; }
.menu { margin: 12px 12px 0; background: var(--bg); border-radius: 20px; overflow: hidden; box-shadow: var(--sh1); }
.mi { display: flex; align-items: center; gap: 13px; padding: 12px 14px; width: 100%; text-align: left; border-bottom: 1px solid var(--line); position: relative; }
.mi:last-child { border: 0; }
.mi:active { background: var(--bg2); }
.mi .mic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.mi .mic .i { width: 20px; height: 20px; }
:root[data-theme=dark] .mi .mic { color: #8DB4FF; }
.mi b { flex: 1; font-weight: 620; font-size: 15px; min-width: 0; }
.mi small { color: var(--mute); font-weight: 550; font-size: 13px; }
.mi > .i:last-child { color: var(--mute); width: 18px; height: 18px; }
.mi .ub { margin-right: 4px; }
.menu .mi .sw { margin-left: auto; }
.mi.c1 .mic { background: #E3F8EC; color: #12A15F; } .mi.c2 .mic { background: #FFEFDD; color: #E8751A; } .mi.c3 .mic { background: #EFE8FF; color: #7A52F5; } .mi.c4 .mic { background: #FFE6EE; color: #E0386F; } .mi.c5 .mic { background: #DBF4F4; color: #0E9AA7; }
:root[data-theme=dark] .mi.c1 .mic { background: #0F3023; color: #4CD08A; } :root[data-theme=dark] .mi.c2 .mic { background: #3A2A14; color: #FFA24D; } :root[data-theme=dark] .mi.c3 .mic { background: #2A1F4D; color: #AD93FF; } :root[data-theme=dark] .mi.c4 .mic { background: #3C1A28; color: #FF7FA6; } :root[data-theme=dark] .mi.c5 .mic { background: #0E3033; color: #4BD1DC; }
.tx-g { padding: 14px 16px 4px; font-size: 12.5px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; }
.txr { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--bg); }
.txr .ti { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.txr .ti.in { background: var(--ok-soft); color: var(--ok); }
.txr .ti.out { background: var(--bg2); color: var(--ink2); }
.txr .tx { flex: 1; min-width: 0; }
.txr b { display: block; font-size: 14.5px; font-weight: 620; line-height: 1.25; }
.txr small { color: var(--mute); font-size: 12px; font-weight: 550; }
.txr .am { font-weight: 700; font-size: 15px; white-space: nowrap; }
.txr .am.in { color: var(--ok); }
.amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.amts button { height: 46px; border-radius: 13px; background: var(--bg2); font-weight: 700; font-size: 14px; text-align: center; border: 1.5px solid transparent; }
.amts button[aria-pressed=true] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.meth { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--line); margin-bottom: 10px; width: 100%; text-align: left; }
.meth[aria-pressed=true] { border-color: var(--brand); background: var(--brand-soft); }
.meth .mic { width: 40px; height: 40px; border-radius: 13px; background: var(--bg2); display: grid; place-items: center; flex: none; color: var(--brand); }
.meth .mic.star { background: #FFF4D6; color: #F5A300; }
.meth .mic.star .i { --fo: 1; stroke: none; }
.meth b { display: block; font-weight: 700; font-size: 14.5px; }
.meth small { color: var(--mute); font-size: 12.5px; font-weight: 550; }
.meth .tx { flex: 1; min-width: 0; }
.meth > .i:last-child { color: var(--mute); width: 18px; height: 18px; }
.card-info { padding: 14px; border-radius: 16px; background: var(--bg2); font-weight: 620; line-height: 1.5; white-space: pre-wrap; user-select: text; font-size: 14px; }
.seller-h { padding: 6px 16px 14px; text-align: center; background: var(--bg); }
.seller-h .av { margin: 4px auto 10px; }
.seller-h h2 { font-size: 21px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; letter-spacing: -.3px; }
.seller-h p { color: var(--mute); font-size: 13.5px; margin-top: 4px; line-height: 1.4; }
.mine-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px 12px; scrollbar-width: none; background: var(--bg); }
.mrow { display: flex; gap: 12px; padding: 12px; border-radius: 18px; margin: 0 12px 10px; background: var(--card); box-shadow: var(--sh1); }
.mrow .mt { width: 90px; height: 90px; border-radius: 14px; overflow: hidden; background: var(--tb, var(--bg2)); color: var(--ti, var(--k0)); --duo: .3; flex: none; display: grid; place-items: center; }
.mrow .mt img { width: 100%; height: 100%; object-fit: cover; }
.mrow .mt svg { width: 56%; height: auto; aspect-ratio: 1; }
.mrow .tx { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.mrow b { font-weight: 700; font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mrow .pr { color: var(--brand); font-weight: 700; font-size: 15px; margin-top: 3px; }
.mrow .st { display: flex; gap: 10px; color: var(--mute); font-size: 12px; font-weight: 620; margin-top: 4px; flex-wrap: wrap; }
.mrow .st span { display: inline-flex; align-items: center; gap: 3px; }
.mrow .st .i { width: 13px; height: 13px; }
.mrow .ac { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.mrow .badge { align-self: flex-start; }

/* ---------- Yordam ---------- */
.hl { padding: 0 16px; }
.qa { background: var(--bg); border-radius: 16px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--sh1); }
.qa > button { width: 100%; padding: 15px 16px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14.5px; }
.qa > button span { flex: 1; }
.qa > button .i { width: 18px; height: 18px; color: var(--mute); transition: transform .25s; }
.qa.open > button .i { transform: rotate(180deg); }
.qa .a { display: none; padding: 0 16px 15px; color: var(--ink2); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.qa.open .a { display: block; }
.rule { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.rule .ri { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--bad-soft); color: var(--bad); }
.rule .ri .i { width: 18px; height: 18px; --sw: 16; }
.rule .ri.ok { background: var(--ok-soft); color: var(--ok); }
.rule b { display: block; font-size: 14.5px; font-weight: 700; }
.rule p { color: var(--ink2); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }

/* ---------- Tanlash ro'yxati va filtr ---------- */
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 4px; width: 100%; text-align: left; border-bottom: 1px solid var(--line); font-weight: 620; }
.opt:last-child { border: 0; }
.opt span { flex: 1; }
.opt small { color: var(--mute); font-weight: 550; }
.opt .ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg3); display: grid; place-items: center; color: transparent; }
.opt[aria-pressed=true] .ck { background: var(--brand); border-color: var(--brand); color: #fff; }
.opt .ck .i { width: 13px; height: 13px; --sw: 24; }
.opt .i { color: var(--ink2); }
.opt .ck .i { color: inherit; }
.rg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Pastki xabar (toast) ---------- */
.toast { position: absolute; left: 16px; right: 16px; bottom: calc(var(--nav-h) + var(--nav-gap) + var(--sab) + 16px); z-index: 200; padding: 13px 16px; border-radius: 16px; background: #0E1630; color: #fff; font-weight: 620; font-size: 14px; text-align: center; transform: translateY(30px); opacity: 0; pointer-events: none; transition: all .3s; box-shadow: var(--shadow); line-height: 1.35; }
:root[data-theme=dark] .toast { background: #EEF2FF; color: #0E1630; }
.toast.show { transform: none; opacity: 1; }
.toast.err { background: #D92D20; color: #fff; }

/* ---------- Rasm ko'rish oynasi ---------- */
.vw { position: absolute; inset: 0; z-index: 120; background: #000; display: none; flex-direction: column; }
.vw.open { display: flex; }
.vw-s { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vw-s > div { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; }
.vw-s img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vw .x { position: absolute; top: calc(var(--sat) + 10px); right: 14px; }
.vw .c { position: absolute; bottom: calc(var(--sab) + 20px); left: 0; right: 0; text-align: center; color: #fff; font-weight: 700; }

/* ==========================================================
   Kirish animatsiyasi (splash)
   ========================================================== */
.splash { position: fixed; inset: 0; z-index: 999; background: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: opacity .45s ease, transform .45s ease; overflow: hidden; }
:root[data-theme=dark] .splash { background: #070D1E; }
.splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.sp-stage { position: relative; width: min(80vw, 380px); display: flex; flex-direction: column; align-items: center; gap: 4vh; }
.sp-ic { width: 92px; height: 92px; border-radius: 26px; box-shadow: 0 14px 34px rgba(10, 91, 255, .35); animation: icpop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes icpop { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sp-wm { position: relative; width: 100%; aspect-ratio: 839 / 192; }
.sp-wm img { position: absolute; display: block; opacity: 0; will-change: transform; }
.sp-wm .ch { animation: letterDrop 1s cubic-bezier(.33, 0, .3, 1) both; }
.sp-wm .ln { animation: lineIn .5s cubic-bezier(.2, .8, .3, 1) both; }
.sp-wm .c2 { animation-delay: .35s; } .sp-wm .c3 { animation-delay: .47s; } .sp-wm .c5 { animation-delay: .59s; }
.sp-wm .c1 { animation-delay: .71s; } .sp-wm .c4 { animation-delay: .83s; }
.sp-wm .c6 { animation-delay: 1.45s; } .sp-wm .c7 { animation-delay: 1.55s; } .sp-wm .c8 { animation-delay: 1.65s; }
@keyframes letterDrop {
  0% { transform: translateY(-110vh) rotate(-8deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  52% { transform: translateY(0) rotate(0); opacity: 1; }
  66% { transform: translateY(-17%); animation-timing-function: ease-in; }
  80% { transform: translateY(0); }
  90% { transform: translateY(-5%); animation-timing-function: ease-in; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes lineIn { 0% { transform: translateX(-55%) scaleX(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
:root[data-theme=dark] .sp-wm .c2, :root[data-theme=dark] .sp-wm .c3, :root[data-theme=dark] .sp-wm .c5 { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) {
  .sp-wm .ch, .sp-wm .ln, .sp-ic { animation: none; opacity: 1; }
}

/* ---------- Telegram: yuqori xavfsiz zona, klaviatura ---------- */
.safe-mask { position: absolute; left: 0; right: 0; top: 0; height: var(--sat); background: var(--bg); z-index: 25; pointer-events: none; }
.app.kb .nav { display: none; }
.app.kb .screen { padding-bottom: 24px; }
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }

/* ---------- Qo'shimchalar ---------- */
[hidden] { display: none !important; }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { display: none; }
.cur { margin-left: 0; }
.pg-top .sell { background: none; padding: 0; }
.sheet-note { color: var(--mute); font-size: 12.5px; }
.fld.err .inp, .inp.err { border-color: var(--bad); background: var(--bad-soft); }
.free-t { color: var(--ok); }
.pg-top .ib.sm { flex: none; }
.dt .tabs .tab i { font-style: normal; }

/* =====================================================================
   Tez Go v5 — yangi bo'limlar: tasdiqlangan belgisi, bildirishnomalar,
   kuzatish, narx tushishi, saqlangan qidiruv, statistika, referal,
   do'konlar, chat bloki, baholash taklifi
   ===================================================================== */

/* ---------- Tasdiqlangan (verified) belgisi ---------- */
.vseal { display: inline-block; flex: none; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(10, 91, 255, .35)); }
.vseal.in { margin-left: 5px; vertical-align: -3px; filter: none; }
.vseal.w { filter: none; }
.vseal.w use { opacity: 1; }
.vf-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 6px; border-radius: 13px; background: linear-gradient(135deg, #E4F3FF, #DCE8FF); color: var(--brand-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; flex: none; box-shadow: inset 0 0 0 1px rgba(10, 91, 255, .14); }
:root[data-theme=dark] .vf-chip { background: linear-gradient(135deg, #14305F, #162A5E); color: #9CC3FF; box-shadow: inset 0 0 0 1px rgba(125, 175, 255, .2); }
.vf-chip.lg { height: 32px; padding: 0 14px 0 9px; font-size: 13px; border-radius: 16px; }
.vf-chip .vseal { filter: none; }

/* kartadagi belgi (rasm ustida) */
.vtag { position: absolute; left: 7px; top: 7px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(6, 20, 66, .3); z-index: 2; }
.vtag svg { width: 22px; height: 22px; }
:root[data-theme=dark] .vtag { background: #0E1630; }

/* ----- Tasdiqlash sahifasi ----- */
.vf-hero { position: relative; margin: 0; padding: 26px 22px 24px; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #3DB2FF 0%, rgba(61, 178, 255, 0) 60%), linear-gradient(160deg, #0839C9 0%, #0A5BFF 55%, #1C8BFF 130%); border-radius: 0 0 32px 32px; }
.vf-hero::before, .vf-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.vf-hero::before { width: 220px; height: 220px; left: -80px; top: -90px; }
.vf-hero::after { width: 170px; height: 170px; right: -60px; bottom: -70px; background: rgba(255, 255, 255, .07); }
.vf-hero .seal { position: relative; width: 112px; height: 112px; margin: 0 auto 14px; display: grid; place-items: center; }
.vf-hero .seal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 68%); animation: sealGlow 3.2s ease-in-out infinite; }
.vf-hero .seal .vseal { position: relative; filter: drop-shadow(0 10px 18px rgba(0, 20, 90, .45)); animation: sealPop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.vf-hero .seal .vseal use { }
.vf-hero h2 { position: relative; font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.vf-hero p { position: relative; margin: 8px auto 0; max-width: 320px; font-size: 14px; line-height: 1.5; opacity: .9; font-weight: 550; }
.vf-price { position: relative; display: inline-flex; align-items: baseline; gap: 7px; margin-top: 16px; padding: 10px 18px; border-radius: 18px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vf-price b { font-size: 28px; font-weight: 700; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.vf-price span { font-size: 13.5px; font-weight: 620; opacity: .88; }
@keyframes sealPop { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sealGlow { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }

.vf-st { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--bg); box-shadow: var(--sh1); }
.vf-st > .i { width: 38px; height: 38px; padding: 8px; border-radius: 12px; flex: none; }
.vf-st b { display: block; font-size: 15px; font-weight: 700; }
.vf-st p { margin-top: 2px; font-size: 13px; color: var(--mute); font-weight: 550; line-height: 1.35; }
.vf-st.ok { background: linear-gradient(135deg, #E9F5FF, #E6EEFF); box-shadow: inset 0 0 0 1.5px rgba(10, 91, 255, .22); }
.vf-st.ok b { color: var(--brand-ink); }
:root[data-theme=dark] .vf-st.ok { background: linear-gradient(135deg, #12284F, #13265A); box-shadow: inset 0 0 0 1.5px rgba(125, 175, 255, .25); }
:root[data-theme=dark] .vf-st.ok b { color: #9CC3FF; }
.vf-st.wait > .i { background: var(--warn-soft); color: var(--warn); }
.vf-st.bad > .i { background: var(--bad-soft); color: var(--bad); }
.vf-st.wait b { color: var(--warn); } .vf-st.bad b { color: var(--bad); }

/* namuna: shunday ko'rinasiz */
.vf-prev { margin: 0 12px; padding: 14px; border-radius: 20px; background: var(--bg); box-shadow: var(--sh1); display: flex; align-items: center; gap: 12px; }
.vf-prev .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vf-prev b { display: flex; align-items: center; font-size: 15.5px; font-weight: 700; }
.vf-prev b .vseal { margin-left: 5px; }
.vf-prev small { color: var(--mute); font-weight: 550; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vf-card { margin: 0 12px; padding: 4px 14px; border-radius: 20px; background: var(--bg); box-shadow: var(--sh1); }
.vf-b { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.vf-b:last-child { border: 0; }
.vf-b b { display: block; font-size: 14.5px; font-weight: 700; }
.vf-b p { margin-top: 2px; font-size: 13px; color: var(--mute); line-height: 1.4; font-weight: 500; }
.vf-s { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: flex-start; position: relative; }
.vf-s:last-child { border: 0; }
.vf-s i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-style: normal; font-weight: 700; font-size: 14px; display: grid; place-items: center; box-shadow: 0 5px 12px -4px rgba(10, 91, 255, .5); }
.vf-s b { display: block; font-size: 14.5px; font-weight: 700; }
.vf-s p { margin-top: 2px; font-size: 13px; color: var(--mute); line-height: 1.4; font-weight: 500; }

.pg-foot:has(.vf-bal) { flex-direction: column; align-items: stretch; gap: 8px; }
.vf-bal { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mute); font-weight: 620; padding: 0 2px; }
.vf-bal b { color: var(--ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-bal b.low { color: var(--bad); }

.vf-form-h { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, #E9F5FF, #E6EEFF); margin-bottom: 14px; }
:root[data-theme=dark] .vf-form-h { background: linear-gradient(135deg, #12284F, #13265A); }
.vf-form-h b { display: block; font-size: 16px; font-weight: 700; }
.vf-form-h small { display: block; margin-top: 2px; color: var(--ink2); font-size: 12.5px; font-weight: 550; line-height: 1.35; }
.vf-ok { width: 96px; height: 96px; margin: 8px auto 16px; display: grid; place-items: center; position: relative; }
.vf-ok::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 91, 255, .22) 0%, rgba(10, 91, 255, 0) 68%); animation: sealGlow 3s ease-in-out infinite; }
.vf-ok .vseal { position: relative; animation: sealPop .6s cubic-bezier(.2, 1.4, .4, 1) both; }

/* profildagi taklif kartasi */
.vf-pc { display: flex; align-items: center; gap: 13px; width: calc(100% - 24px); margin: 12px 12px 0; padding: 13px 14px 13px 14px; border-radius: 22px; text-align: left; color: var(--ink); position: relative; overflow: hidden;
  background: linear-gradient(135deg, #EEF7FF 0%, #E2ECFF 100%); box-shadow: var(--sh1), inset 0 0 0 1.5px rgba(10, 91, 255, .16); transition: transform .15s; }
:root[data-theme=dark] .vf-pc { background: linear-gradient(135deg, #12284F, #13265A); box-shadow: var(--sh1), inset 0 0 0 1.5px rgba(125, 175, 255, .22); }
.vf-pc:active { transform: scale(.985); }
.vf-pc::after { content: ''; position: absolute; width: 130px; height: 130px; right: -36px; top: -56px; border-radius: 50%; background: rgba(10, 91, 255, .07); pointer-events: none; }
.vf-pc .vseal { position: relative; z-index: 1; flex: none; filter: drop-shadow(0 5px 8px rgba(10, 91, 255, .35)); }
.vf-pc .tx { flex: 1; min-width: 0; position: relative; z-index: 1; }
.vf-pc b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.vf-pc small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 550; color: var(--ink2); line-height: 1.3; }
.vf-pc .go { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; position: relative; z-index: 1; flex: none; box-shadow: 0 6px 14px -4px rgba(10, 91, 255, .55); }
.vf-pc .go .i { width: 18px; height: 18px; }
.vf-pc > .i { width: 18px; height: 18px; color: var(--mute); position: relative; z-index: 1; }
.vf-pc.on { background: var(--bg); box-shadow: var(--sh1), inset 0 0 0 1.5px rgba(18, 183, 106, .3); }
.vf-pc.on::after { background: rgba(18, 183, 106, .07); }
.vf-pc.on small { color: var(--mute); }

/* ---------- Segmentli tanlov ---------- */
.seg { display: flex; padding: 4px; gap: 4px; border-radius: 15px; background: var(--bg2); margin: 0 0 16px; }
.seg button { flex: 1; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--mute); transition: background .2s, color .2s, box-shadow .2s; }
.seg button .i { width: 19px; height: 19px; }
.seg button[aria-pressed=true] { background: var(--bg); color: var(--brand); box-shadow: var(--shadow-s); }
:root[data-theme=dark] .seg button[aria-pressed=true] { color: #8DB4FF; }
.mk.s48 { width: 48px; height: 48px; border-radius: 15px; }

/* ---------- Bildirishnomalar ---------- */
.nt-list { padding: 0 12px; }
.nt { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; margin: 0 0 8px; border-radius: 20px; background: var(--card); box-shadow: var(--sh1); text-align: left; position: relative; transition: transform .15s; }
.nt:active { transform: scale(.985); }
.nt.un { background: linear-gradient(0deg, rgba(10, 91, 255, .045), rgba(10, 91, 255, .045)), var(--card); box-shadow: var(--sh1), inset 3px 0 0 var(--brand); }
.nt .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt .tx b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.nt .tx > span { font-size: 13px; color: var(--ink2); line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.nt .tx small { margin-top: 2px; font-size: 11.5px; color: var(--mute); font-weight: 620; }
.nt .udot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; box-shadow: 0 0 0 4px rgba(10, 91, 255, .15); }
.nt-th { position: relative; width: 52px; height: 52px; flex: none; }
.nt-th img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; background: var(--bg2); }
.nt-k { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg, var(--g1), var(--g2)); color: #fff; display: grid; place-items: center; border: 2.5px solid var(--card); --duo: .35; }
.nt-k .i { width: 13px; height: 13px; }
.nt-list .tx-g { padding: 14px 6px 8px; }

/* ---------- Kuzatish ---------- */
.fol-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.fol-row > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-weight: 620; font-size: 13.5px; }
.fol-row > span .i { width: 18px; height: 18px; color: var(--brand); }
.fol-row .btn { min-width: 128px; }
.seller-act { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

/* ---------- Narx tushishi ---------- */
.pdrop { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 9px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 700; }
.pdrop .i { width: 15px; height: 15px; }
.pold { margin-left: 8px; color: var(--mute); font-size: 14px; font-weight: 550; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tg-drop { background: linear-gradient(135deg, #12B76A, #0E9F5B); }
.cb .pr .po { flex: 0 0 100%; margin-top: 1px; font-size: 11.5px; font-weight: 550; color: var(--mute); letter-spacing: 0; text-decoration: line-through; text-decoration-thickness: 1.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb .pr:has(.po) { display: flex; flex-wrap: wrap; align-items: baseline; }

/* ---------- Saqlangan qidiruv ---------- */
.lst-sv { padding: 8px 12px 0; }
.lst-sv:not(:empty):not([hidden]) { padding-bottom: 10px; }
.ssb { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 20px; background: var(--bg); box-shadow: var(--sh1); }
.ssb .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.ssb .ic .i { width: 22px; height: 22px; }
:root[data-theme=dark] .ssb .ic { color: #8DB4FF; }
.ssb .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ssb .tx b { font-size: 14px; font-weight: 700; }
.ssb .tx small { font-size: 12px; color: var(--mute); font-weight: 550; line-height: 1.3; margin-top: 1px; }
.ssb.on { background: linear-gradient(135deg, #EAF6EF, #E6F2FF); box-shadow: inset 0 0 0 1.5px rgba(18, 183, 106, .22); }
.ssb.on .ic { background: var(--ok); color: #fff; }
:root[data-theme=dark] .ssb.on { background: linear-gradient(135deg, #0F2B22, #12284F); }
.ss-list { padding: 8px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.ssr { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--sh1); }
.ssr .tx { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.ssr .tx b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr .tx small { font-size: 12.5px; color: var(--mute); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr .tx em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--brand); }
.ssr .ib { background: transparent; color: var(--mute); }

/* ---------- Statistika ---------- */
.stt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 12px 0; }
.stt-k { background: var(--card); border-radius: 18px; padding: 12px 10px 11px; box-shadow: var(--sh1); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.stt-k .mk { margin-bottom: 8px; }
.stt-k b { font-size: 21px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stt-k small { font-size: 11.5px; color: var(--mute); font-weight: 620; }
.stt-card { margin: 10px 12px 0; padding: 16px 14px 12px; border-radius: 22px; background: var(--card); box-shadow: var(--sh1); }
.stt-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.stt-h b { display: block; font-size: 15.5px; font-weight: 700; }
.stt-h small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); font-weight: 550; line-height: 1.35; }
.stt-h .lg { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ink2); flex: none; }
.stt-h .lg span { display: inline-flex; align-items: center; gap: 6px; }
.stt-h .lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
.stt-h .lg i.f { background: #FF6F9B; }
.chart { display: flex; align-items: stretch; gap: 6px; height: 150px; margin-top: 16px; }
.chart .cd { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chart .bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1.5px solid var(--line); position: relative; }
.chart .bars i { display: block; width: 42%; max-width: 14px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); min-height: 2px; position: relative; transition: height .5s cubic-bezier(.2, .8, .3, 1); }
.chart .bars i.f { background: linear-gradient(180deg, #FF9BB8, #FF6F9B); }
.chart .bars i.v[data-n]::after { content: attr(data-n); position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px); font-size: 9.5px; font-weight: 700; color: var(--ink2); font-style: normal; white-space: nowrap; }
.chart small { font-size: 10.5px; color: var(--mute); font-weight: 620; text-transform: capitalize; }

/* ---------- Referal ---------- */
.ref-hero { margin: 0 0 0; padding: 26px 22px 24px; text-align: center; color: #fff; position: relative; overflow: hidden; border-radius: 0 0 32px 32px;
  background: radial-gradient(110% 90% at 85% -10%, #FF8FB1 0%, rgba(255, 143, 177, 0) 55%), linear-gradient(155deg, #6A3CF0 0%, #3E5CFF 55%, #0A8CFF 130%); }
.ref-hero::before { content: ''; position: absolute; width: 200px; height: 200px; left: -70px; bottom: -90px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.ref-hero .gf { position: relative; width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 26px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35), 0 12px 24px -8px rgba(30, 20, 120, .5); --duo: .4; }
.ref-hero .gf .i { width: 42px; height: 42px; }
.ref-hero h2 { position: relative; font-size: 21px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.ref-hero p { position: relative; margin: 8px auto 0; max-width: 320px; font-size: 13.5px; line-height: 1.5; font-weight: 550; opacity: .9; }
.ref-hero .rw { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.ref-hero .rw > div { flex: 1; max-width: 140px; padding: 11px 8px; border-radius: 18px; background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.ref-hero .rw b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.ref-hero .rw small { display: block; font-size: 11.5px; font-weight: 620; opacity: .88; margin-top: 1px; }
.ref-hero .rw > i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; flex: none; }
.ref-hero .rw > i .i { width: 14px; height: 14px; }
.ref-link { display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--bg); box-shadow: var(--sh1); border: 1.5px dashed var(--bg3); }
.ref-link span { flex: 1; min-width: 0; font-weight: 620; font-size: 13.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis + .sec, .ref-link + .pad + .kpis { margin-top: 4px; }
.ref-link + .pad + .kpis { padding-top: 14px; }

/* ---------- Do'konlar ---------- */
.shop-list { padding: 4px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.shop-r { display: block; width: 100%; text-align: left; padding: 14px; border-radius: 22px; background: var(--card); box-shadow: var(--sh1); transition: transform .15s; }
.shop-r:active { transform: scale(.985); }
.shop-r .hd { display: flex; align-items: center; gap: 13px; }
.shop-r .hd > .i { color: var(--mute); width: 18px; height: 18px; flex: none; }
.shop-r .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-r .tx b { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.shop-r .tx b span, .shop-r .tx b em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-r small { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--mute); font-weight: 550; font-size: 12.5px; }
.shop-r small .rt { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 700; }
.shop-r small .rt .i { width: 13px; height: 13px; color: var(--star); --fo: 1; }
.shop-r small.ad { flex-wrap: nowrap; gap: 5px; }
.shop-r small.ad .i { width: 14px; height: 14px; flex: none; }
.shop-r small.ad em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-r .th { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.shop-r .th img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--bg2); }
.shop-r .av.lg { width: 58px; height: 58px; font-size: 20px; }

/* ---------- Chat bloki ---------- */
.th-blk { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + var(--sab)); background: var(--bad-soft); color: var(--bad); font-size: 13px; font-weight: 620; line-height: 1.35; border-top: 1px solid var(--line); }
.th-blk > .i { width: 22px; height: 22px; flex: none; }
.th-blk span { flex: 1; min-width: 0; }

/* ---------- Xaridor: sotuvchini baholash taklifi ---------- */
.rv-ask { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 12px 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #FFF6DC, #FFEFD1); box-shadow: inset 0 0 0 1.5px rgba(247, 144, 9, .25); }
:root[data-theme=dark] .rv-ask { background: linear-gradient(135deg, #33280E, #2F2410); }
.rv-ask > div { flex: 1; min-width: 0; }
.rv-ask b { display: block; font-size: 14px; font-weight: 700; }
.rv-ask small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink2); font-weight: 550; line-height: 1.3; }

/* ---------- Promokod ---------- */
.promo-in { text-align: center; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 18px !important; height: 56px; }
.promo-in::placeholder { letter-spacing: 1px; font-weight: 550; text-transform: none; }

/* ---------- Profil menyusi: qo'shimcha rang ---------- */
.mi.c0 .mic { background: var(--brand-soft); color: var(--brand); }
.stars .i.off { color: var(--bg3); --fo: 1; }

/* ---------- Bildirish qo'ng'irog'i: nuqta ---------- */
.ib .cnt-b + .i, .ib .i + .cnt-b { z-index: 1; }

@media (max-width: 350px) {
  .stt-grid { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .stt-k b { font-size: 18px; }
  .vf-price b { font-size: 24px; }
  .ref-hero .rw b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-hero .seal::before, .vf-hero .seal .vseal, .vf-ok::before, .vf-ok .vseal { animation: none; }
}

/* ---------- Tuzatishlar ---------- */
.pold { margin-left: 0; flex: 0 0 100%; }
.seller-h .vf-chip.lg { display: flex; width: fit-content; margin: 9px auto 0; }
.seller-h .fol-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; color: var(--ink2); font-weight: 620; font-size: 13.5px; }
.seller-h .fol-line .i { width: 17px; height: 17px; color: var(--brand); }
.seller-h .fol-line em, .fol-row em { font-style: normal; }
.seller-h .seller-act { margin-top: 14px; }
.seller-h .seller-act .btn { min-width: 150px; height: 40px; }
.vf-prev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-prev b .vseal { margin-left: 5px; vertical-align: -3px; }
.list > .mrow { margin: 0; }
.pg.gray .pad > .btn-gray, .pg.gray .vf-st + .btn-gray, .pg.gray .btn-gray.full { background: var(--bg); box-shadow: var(--sh1); }
.sp-in { min-width: 0; }
.sp-in input { width: 100%; }
.opt .mk, .opt .av, .opt .i, .opt .vseal { flex: none; }
.opt > span { min-width: 0; }
.opt .av.sm { width: 40px; height: 40px; }

/* =====================================================================
   Tez Go — "Tezlik" dizayn qatlami (v2)
   G'oya: logotipdagi tezlik chiziqlari. Qirrali (faceted) yuzalar, aniq
   burchaklar, hairline chegaralar, qisqa radiuslar, tiniq tipografiya.
   Bu fayl oxirida yuklanadi va oldingi qoidalarni qayta belgilaydi.
   ===================================================================== */
:root {
  --r-xs: 6px; --r-s: 10px; --r-m: 12px; --r-l: 16px; --r-xl: 22px;
  --hair: 0 0 0 1px var(--line);
  --spd: linear-gradient(115deg, transparent 0 55%, rgba(255, 255, 255, .11) 55% 65%, transparent 65% 69%, rgba(255, 255, 255, .075) 69% 75%, transparent 75% 78%, rgba(255, 255, 255, .05) 78% 81%, transparent 81%);
  --facet: linear-gradient(135deg, rgba(255, 255, 255, .20) 0 44%, rgba(255, 255, 255, 0) 44%);
  --facet-r: linear-gradient(315deg, rgba(255, 255, 255, .17) 0 38%, rgba(255, 255, 255, 0) 38%);
  --facet-d: linear-gradient(135deg, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 20, .12) 64%);
  --ink-deep: #0A1128;
}
:root[data-theme=dark] { --hair: 0 0 0 1px var(--line); }
body { letter-spacing: -.003em; }
h1, h2, h3 { letter-spacing: -.02em; }

/* ---------- Pastki menyu: ekranga yopishgan, qirrali belgilagich ---------- */
.nav { padding: 0; }
.nav-in { height: calc(var(--nav-h) + var(--sab)); padding: 0 4px var(--sab); border-radius: 0; grid-template-columns: 1fr 1fr 78px 1fr 1fr;
  background: color-mix(in srgb, var(--bg) 95%, transparent); border-top: 1px solid var(--line);
  box-shadow: 0 -14px 30px -18px rgba(12, 32, 92, .28); }
:root[data-theme=dark] .nav-in { box-shadow: 0 -14px 30px -14px rgba(0, 0, 0, .6); }
.nv { font-size: 10.5px; font-weight: 600; gap: 2px; letter-spacing: 0; padding-top: 3px; }
.nv .ni { width: 44px; height: 28px; border-radius: 0; background: none !important; }
.nv .i { width: 25px; height: 25px; }
.nv.active { color: var(--brand); font-weight: 700; }
.nv.active::before { content: ''; position: absolute; top: -1px; left: 50%; width: 34px; height: 3px; margin-left: -17px; background: var(--grad); transform: skewX(-32deg); box-shadow: 0 5px 14px rgba(10, 91, 255, .55); }
:root[data-theme=dark] .nv.active { color: #8DB4FF; }
.nv .bdg { top: 5px; left: calc(50% + 7px); border-radius: 8px 8px 8px 2px; box-shadow: 0 0 0 2px var(--bg); }
.nv-add span { width: 54px; height: 54px; border-radius: 19px; transform: translateY(-15px); overflow: hidden;
  box-shadow: 0 14px 24px -8px rgba(10, 91, 255, .65), 0 0 0 5px var(--bg), inset 0 1px 0 rgba(255, 255, 255, .45); }
.nv-add span::after { border-radius: 0; background: var(--facet), var(--facet-d); }
.nv-add:active span { transform: translateY(-13px) scale(.94); }
.nv-add .i { --sw: 12; width: 26px; height: 26px; }

/* ---------- Xabar kartasi (toast) va bildirishnomalar ---------- */
.toast { left: 12px; right: 12px; top: calc(var(--sat) + 10px); bottom: auto; max-width: 460px; margin: 0 auto; z-index: 300; display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 9px; border-radius: 14px; overflow: hidden;
  background: rgba(11, 17, 38, .96); color: #fff; font-size: 13.5px; font-weight: 550; text-align: left; line-height: 1.35; letter-spacing: 0;
  transform: translateY(-18px) scale(.97); opacity: 0; transition: transform .34s cubic-bezier(.2, .9, .3, 1.15), opacity .22s;
  box-shadow: 0 18px 38px -12px rgba(3, 8, 28, .7), 0 0 0 1px rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root[data-theme=dark] .toast { background: rgba(26, 36, 70, .97); color: #fff; box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12); }
.toast.show { transform: none; opacity: 1; }
.toast .ti { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: var(--tk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 12px -6px var(--tc); }
.toast .ti .i { width: 19px; height: 19px; --sw: 14; }
.toast .tm { flex: 1; min-width: 0; word-break: break-word; }
.toast .tp { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tc); opacity: .9; transform-origin: left; transform: scaleX(0); }
.toast.show .tp { animation: tpb 2.8s linear forwards; }
.toast.bad.show .tp { animation-duration: 3.8s; }
@keyframes tpb { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.ok { --tk: linear-gradient(135deg, #2BD487, #0E9F5B); --tc: #19C67A; }
.toast.bad { --tk: linear-gradient(135deg, #FF7A59, #E5316B); --tc: #FF5A5F; }
.toast.info { --tk: linear-gradient(135deg, #3BA0FF, #0A5BFF); --tc: #3BA0FF; }
.toast.err { background: rgba(11, 17, 38, .96); }

.banner { position: relative; overflow: hidden; background: var(--bk-soft, var(--bg2)); color: var(--ink2); padding: 12px 14px 12px 17px; border-radius: var(--r-m); font-weight: 500; font-size: 13px; }
.banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bk, var(--brand)); }
.banner .i { color: var(--bk, var(--brand)); }
.banner.warn { --bk: var(--warn); --bk-soft: var(--warn-soft); }
.banner.bad { --bk: var(--bad); --bk-soft: var(--bad-soft); }
.banner.ok { --bk: var(--ok); --bk-soft: var(--ok-soft); }
.banner.info { --bk: var(--brand); --bk-soft: var(--brand-soft); }
.banner.warn, .banner.bad, .banner.ok, .banner.info { color: var(--ink2); }
.banner b { color: var(--ink); font-weight: 650; }
.safe { position: relative; overflow: hidden; border-radius: var(--r-m); padding: 13px 14px 13px 17px; }
.safe::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.sysm { position: relative; overflow: hidden; color: var(--ink2); font-weight: 500; border-radius: var(--r-m); padding: 9px 13px 9px 15px; text-align: left; }
.sysm::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.sysm .i { color: var(--warn); }
.fld.err .inp, .inp.err { border-color: var(--bad); background: var(--bg2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 16%, transparent); }
.fld .ferr { margin-top: 6px; font-size: 12.5px; font-weight: 550; color: var(--bad); display: flex; gap: 6px; align-items: center; }

/* ---------- Umumiy elementlar ---------- */
.btn { border-radius: var(--r-m); font-weight: 650; letter-spacing: 0; }
.btn-pri { background: linear-gradient(135deg, #0A4FE8 0%, #0A5BFF 45%, #1F8BFF 100%); box-shadow: 0 10px 20px -8px rgba(10, 91, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .28); position: relative; overflow: hidden; }
.btn-pri::after { content: ''; position: absolute; inset: 0; background: var(--spd); opacity: .9; pointer-events: none; }
.btn-soft { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); }
.btn-line { border-width: 1px; }
.btn.sm { border-radius: 10px; }
.chip { border-radius: var(--r-s); height: 36px; font-weight: 600; border-width: 1px; background: var(--bg2); }
.chip.on, .chip[aria-pressed=true] { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.chip.sm { border-radius: 9px; }
.inp { border-radius: var(--r-m); border-width: 1px; border-color: var(--line); background: var(--bg2); }
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.fld > label, .lbl { font-weight: 600; font-size: 12.5px; color: var(--ink2); }
.ib { border-radius: 12px; }
.ib.sm { border-radius: 10px; }
.ib.glass { border-radius: 12px; }
.sw { border-radius: 14px; }
.badge { border-radius: 6px; font-weight: 650; }
.cur { border-radius: var(--r-m); }
.cur button { border-radius: 9px; }
.blk { border-radius: var(--r-l); }

.sec { padding: 22px 16px 11px; }
.sec h2 { font-size: 18px; font-weight: 700; gap: 9px; }
.sec h2::before { content: ''; width: 4px; height: 17px; border-radius: 1px; background: var(--grad); transform: skewX(-18deg); flex: none; }
.sec small { font-weight: 500; margin-top: 3px; margin-left: 13px; }
.sec .lnk { font-weight: 600; font-size: 13px; }

/* ---------- Pastki oyna va sahifa sarlavhasi ---------- */
.sh-p { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.sh-p::before { width: 36px; height: 4px; background: var(--bg3); }
.sh-h h2 { font-size: 18px; font-weight: 700; }
.pg-top h1 { font-size: 17px; font-weight: 700; }
.pg-top .ib { background: var(--bg2); }

/* ---------- Bosh sahifa: sarlavha va qidiruv ---------- */
.hd2 { padding: calc(var(--sat) + 8px) 12px 11px; }
.hd2.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 22px -14px rgba(12, 32, 92, .2); }
.loc2 .lp { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 60%, var(--bg))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.loc2 small { font-weight: 500; font-size: 11px; }
.loc2 b { font-size: 15.5px; font-weight: 700; }
.hd-r1 .ib { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.hd-r1 .ib .cnt-b { top: -4px; right: -4px; border-radius: 8px 8px 8px 2px; }
.sinp { height: 46px; border-radius: var(--r-m); font-weight: 500; font-size: 14.5px; background: var(--bg2); border: 1px solid var(--line); }
.fbtn { width: 36px; height: 36px; right: 4px; top: 4px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line), var(--sh1); }
.fbtn.on { background: var(--brand); box-shadow: 0 6px 12px -4px rgba(10, 91, 255, .55); }
.fbtn b { border-radius: 8px 8px 8px 2px; }

/* ---------- Reklama joyi (eng tepada, premium) ---------- */
.bn { margin-top: 12px; }
.bn-w { position: relative; margin: 0 12px; border-radius: var(--r-l); box-shadow: 0 16px 28px -18px rgba(10, 40, 130, .55), 0 0 0 1px rgba(10, 30, 90, .06); }
.bn-s { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0; scrollbar-width: none; border-radius: var(--r-l); scroll-padding: 0; }
.bn-i { flex: 0 0 100%; aspect-ratio: 11 / 5; border-radius: var(--r-l); scroll-snap-align: start; background: var(--ink-deep); }
.bn-i .bt { padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(3, 8, 28, .72)); font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; }
.bn-i .abs { right: 12px; bottom: 12px; }
.bn-i .ad-b { padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: 12.5px; }
.bn-tag { position: absolute; left: 10px; top: 10px; z-index: 3; pointer-events: none; transform: skewX(-14deg); background: rgba(6, 10, 28, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 4px; padding: 4px 10px; box-shadow: inset 2px 0 0 #38BDF8; }
.bn-tag b { display: block; transform: skewX(14deg); color: #fff; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
.bn-cnt { position: absolute; right: 10px; top: 10px; z-index: 3; pointer-events: none; background: rgba(6, 10, 28, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, .75); border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; }
.bn-cnt b { color: #fff; font-weight: 700; }
.bn-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 0 16px; min-height: 22px; }
.bn-d { display: flex; gap: 6px; margin: 0; justify-content: flex-start; }
.bn-d i { width: 14px; height: 3px; border-radius: 1px; background: var(--bg3); transform: skewX(-32deg); transition: width .3s, background .3s; }
.bn-d i.on { width: 30px; background: var(--grad); }
.bn-adv { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--mute); }
.bn-adv .i { width: 13px; height: 13px; --sw: 14; }
.bn-adv:active { color: var(--brand); }

.bn-i.own { padding: 0; display: block; color: #fff; overflow: hidden; }
.bn-i.own::before { content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: var(--spd); }
.bn-i.own::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .14) 0 22%, rgba(255, 255, 255, 0) 22%); }
.bn-i.own .bx { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 16px 18px 16px; gap: 5px; max-width: 62%; }
.bn-i.own h3 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.14; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-i.own p { font-size: 12px; font-weight: 500; opacity: .86; line-height: 1.3; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-i.own .go { margin-top: 5px; height: 30px; padding: 0 12px 0 14px; border-radius: 9px; background: #fff; color: #0A4FE8; font-weight: 700; font-size: 12.5px; gap: 5px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5); }
.bn-i.own .pic { right: 3%; top: 50%; bottom: auto; width: 38%; height: auto; aspect-ratio: 1; transform: translateY(-50%); z-index: 1; }
.bn-i.own .pic svg { width: 86%; height: 86%; color: #fff; filter: drop-shadow(0 14px 14px rgba(0, 10, 50, .35)); transform: rotate(-7deg); }
.bn-i.g1 { background: linear-gradient(125deg, #0630AE 0%, #0A5BFF 56%, #28A8FF 105%); }
.bn-i.g2 { background: linear-gradient(125deg, #150C4D 0%, #3A1FB0 55%, #7B58F7 112%); }
.bn-i.g3 { background: linear-gradient(125deg, #B73A0A 0%, #F2641E 52%, #FFAE2B 112%); }
.bn-i.g4 { background: linear-gradient(125deg, #060B1E 0%, #0D1A48 58%, #1B2F78 112%); }
.bn-i.g4 .go { background: linear-gradient(135deg, #FFDB7A, #FFB020); color: #2B1B00; }
.bn-i.g4 .pic svg { color: #FFC83D; filter: drop-shadow(0 12px 16px rgba(255, 176, 32, .3)); }
.bn-i.g4 .pic .i { stroke-width: 3; }

/* ---------- Kategoriya katakchalari: qirrali yuzalar ---------- */
.mk { border-radius: 30%; box-shadow: 0 9px 16px -10px var(--g2, #0A5BFF), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.mk::before { content: ''; position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; right: auto; top: auto; background: var(--facet); }
.mk::after { content: ''; position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; left: auto; bottom: auto; background: var(--facet-d); }
.mk svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 40, .22)); }
.cgrid { padding: 16px 12px 4px; gap: 13px 9px; }
.cg .mk { border-radius: 28%; }
.cg > span:not(.mk) { font-size: 11.5px; font-weight: 550; margin-top: 7px; letter-spacing: -.005em; }
.cg.on .mk { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }

/* ---------- Premium polosa ---------- */
.band { margin: 20px 0 0; padding: 16px 0 18px; background: linear-gradient(130deg, #060E2B 0%, #0A2A8A 58%, #0A55E8 118%); }
.band::before { content: ''; position: absolute; inset: 0; right: 0; top: 0; width: auto; height: auto; border-radius: 0; background: var(--spd); }
.band .bh h2 { font-size: 18px; font-weight: 700; }
.band .bh h2::before { display: none; }
.band .bh h2 .i { color: #FFC83D; }
.band .bh .lnk { font-weight: 600; }
.band .card { box-shadow: 0 14px 24px -12px rgba(0, 6, 40, .6); box-shadow: 0 14px 24px -12px rgba(0, 6, 40, .6), 0 0 0 1px rgba(255, 255, 255, .06); }

/* ---------- Do'konlar ---------- */
.shops { gap: 13px; padding: 0 16px 4px; }
.shp { width: 72px; }
.shp .av { width: 62px; height: 62px; border-radius: 20px; font-size: 20px; box-shadow: 0 0 0 2px var(--page), 0 0 0 3.5px color-mix(in srgb, var(--brand) 70%, transparent); }
.shp b { margin-top: 8px; font-weight: 550; font-size: 11.5px; }

/* ---------- E'lon kartalari ---------- */
.grid { gap: 10px; }
.card { border-radius: 14px; box-shadow: var(--hair); }
.card:active { transform: scale(.985); }
.ph { aspect-ratio: 1 / 1; }
.card.hc .ph { aspect-ratio: 1 / .86; }
.tg { border-radius: 4px; font-size: 10px; font-weight: 650; letter-spacing: .02em; padding: 3px 7px; box-shadow: none; }
.tg-vip { background: linear-gradient(135deg, #FFC22E, #FF8A1F); color: #2B1700; }
.tg-urg { background: linear-gradient(135deg, #FF5B4F, #E5316B); }
.heart { width: 30px; height: 30px; border-radius: 10px; right: 8px; top: 8px; box-shadow: 0 4px 10px -2px rgba(0, 10, 40, .25); }
.heart .i { width: 16px; height: 16px; }
.pn { border-radius: 6px; font-weight: 650; }
.cb { padding: 10px 11px 11px; gap: 4px; }
.cb .pr { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.cb .pr small { font-weight: 550; }
.cb .tt { font-weight: 450; font-size: 13px; color: var(--ink); opacity: .86; }
.cb .ft, .cb .mt { font-weight: 500; }
.card.mc { border-radius: 12px; }
.card.sold .ph::after { font-weight: 700; letter-spacing: .04em; }
.vtag { border-radius: 9px; }

/* ---------- Katalog va kategoriya sahifasi ---------- */
.pgt { padding: calc(var(--sat) + 14px) 16px 8px; }
.pgt h1 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.pgt p { font-weight: 500; }
.pgt + .sfield .sinp { padding-right: 14px; }
.ctile { border-radius: var(--r-l); min-height: 128px; padding: 15px 14px 12px; box-shadow: 0 14px 22px -16px var(--g2), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ctile::before { right: 0; top: 0; left: 0; bottom: 0; width: auto; height: auto; border-radius: 0; background: var(--spd), var(--facet-r); }
.ctile::after { display: none; }
.ctile .art-b { right: -4px; bottom: -6px; width: 56%; filter: drop-shadow(0 8px 10px rgba(0, 0, 40, .22)); }
.ctile b { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.ctile small { font-weight: 500; }
.sub b { font-weight: 600; }
.cp-hero { border-radius: var(--r-l); box-shadow: 0 16px 26px -18px var(--g2), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cp-hero::before { right: 0; top: 0; left: 0; bottom: 0; width: auto; height: auto; border-radius: 0; background: var(--spd), var(--facet-r); }
.cp-hero h2 { font-weight: 700; letter-spacing: -.03em; }
.cp-hero p { font-weight: 500; }
.cp-grid .cg .mk { border-radius: 28%; }

/* ---------- Ro'yxat ---------- */
.lst-sub .chip { background: var(--bg2); }
.lst-bar .chip { border-radius: var(--r-s); box-shadow: var(--hair); }
.afl .chip { border-radius: 8px; }
.lst-save { border-radius: var(--r-m); box-shadow: var(--hair); }
.lst-save .mic { border-radius: 10px; }

/* ---------- Batafsil ---------- */
.gal .cnt { border-radius: 8px; font-weight: 650; }
.gal .dots i.on { border-radius: 2px; }
.thumbs button { border-radius: 10px; }
.cpill { border-radius: 9px; font-weight: 600; }
.dt .big b { font-size: 28px; font-weight: 700; letter-spacing: -.035em; }
.dt .big .neg { border-radius: 6px; }
.dt h1 { font-weight: 650; }
.sect > h3, .h3 { font-weight: 700; font-size: 16.5px; }
.tab { font-weight: 600; }
.tab.on::after { left: 22%; right: 22%; height: 3px; border-radius: 0; transform: skewX(-32deg); background: var(--grad); }
.tab i { border-radius: 6px; font-weight: 600; }
.kv b { font-weight: 600; }
.kv span { font-weight: 500; }
.amen span { border-radius: 8px; font-weight: 600; }
.cta { box-shadow: 0 -1px 0 var(--line), 0 -14px 26px -20px rgba(12, 32, 92, .3); border-top: 0; }
.cta .pc b { font-weight: 700; }
.stat3 div { border-radius: var(--r-m); }
.shop-b, .sellr, .hold { border-radius: 5px; }

/* ---------- Qidiruv ---------- */
.sp-in { height: 46px; border-radius: var(--r-m); border-width: 1px; border-color: var(--line); }
.sp-in:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.sg .si { border-radius: 11px; }
.sgrp { font-weight: 650; letter-spacing: .03em; }

/* ---------- Xabarlar ---------- */
.cv .th { border-radius: 14px; }
.cv .r1 b { font-weight: 650; }
.ub { font-style: normal; border-radius: 9px 9px 9px 3px; font-weight: 700; min-width: 21px; height: 21px; }
.msg { border-radius: 16px; }
.msg.me { background: linear-gradient(135deg, #0A4FE8, #1F8BFF); border-bottom-right-radius: 4px; }
.msg.him { border-bottom-left-radius: 4px; }
.day { border-radius: 8px; font-weight: 600; }
.cbar textarea { border-radius: 22px; }
.cbar .sendb { border-radius: 15px; width: 46px; height: 46px; background: linear-gradient(135deg, #0A4FE8, #1F8BFF); box-shadow: 0 8px 14px -6px rgba(10, 91, 255, .6); }
.thr-l .th { border-radius: 11px; }

/* ---------- Profil, hamyon ---------- */
.me-c h2 { font-weight: 700; font-size: 20px; }
.wal { border-radius: var(--r-l); background: linear-gradient(130deg, #060E2B 0%, #0A2A8A 52%, #0A5BFF 112%); box-shadow: 0 18px 30px -18px rgba(10, 60, 200, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.wal .bal { font-weight: 700; letter-spacing: -.035em; }
.wal .btn { border-radius: 11px; font-weight: 650; }
.kpi { border-radius: var(--r-m); box-shadow: var(--hair); }
.kpi b { font-weight: 700; }
.menu { border-radius: var(--r-l); box-shadow: var(--hair); }
.mi .mic { border-radius: 10px; }
.mi b { font-weight: 600; }
.tx-g { font-weight: 650; letter-spacing: .03em; font-size: 12px; }
.txr .ti { border-radius: 12px; }
.mrow { border-radius: var(--r-l); box-shadow: var(--hair); }
.mrow .mt { border-radius: 12px; }
.mrow b { font-weight: 650; }
.svc { border-radius: var(--r-l); border-width: 1px; background: var(--bg); box-shadow: var(--hair); }
.svc .si { border-radius: 13px; }
.svc.act { border-color: var(--ok); box-shadow: none; }
.meth { border-radius: var(--r-m); border-width: 1px; }
.amts button { border-radius: var(--r-m); font-weight: 650; border-width: 1px; }
.qa { border-radius: var(--r-m); box-shadow: var(--hair); }
.qa > button { font-weight: 650; }
.rule .ri { border-radius: 10px; }
.pho { border-radius: 12px; border-width: 1.5px; }
.sel-cat { border-radius: var(--r-m); }
.free-b { border-radius: var(--r-m); }
.stp i { border-radius: 1px; transform: skewX(-32deg); }
.opt .ck { border-radius: 50%; }
.empty .eico { border-radius: 26px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 50%, var(--bg))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.empty .eico::after { border-radius: 32px; }
.empty h3 { font-weight: 700; }
.vf-chip { border-radius: 8px; }

/* ---------- Tasdiqlash, referal, bildirishnoma, statistika, do'kon: qirrali ---------- */
.vf-hero { border-radius: 0 0 var(--r-xl) var(--r-xl); background: radial-gradient(120% 90% at 50% -10%, #3DB2FF 0%, rgba(61, 178, 255, 0) 60%), linear-gradient(160deg, #060E2B 0%, #0A2A8A 45%, #0A5BFF 120%); }
.vf-hero::before, .vf-hero::after { border-radius: 0; background: var(--spd); inset: 0; width: auto; height: auto; left: 0; top: 0; right: 0; bottom: 0; }
.vf-hero::after { background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0 20%, rgba(255, 255, 255, 0) 20%); }
.vf-hero h2 { font-weight: 700; }
.vf-price { border-radius: var(--r-m); }
.vf-st, .vf-prev, .vf-card, .vf-form-h { border-radius: var(--r-l); }
.vf-st { box-shadow: var(--hair); }
.vf-pc { border-radius: var(--r-l); box-shadow: var(--hair); }
.vf-pc::after { border-radius: 0; width: 120px; height: 100%; right: 0; top: 0; background: linear-gradient(115deg, rgba(10, 91, 255, 0) 0 30%, rgba(10, 91, 255, .06) 30% 52%, rgba(10, 91, 255, 0) 52% 62%, rgba(10, 91, 255, .045) 62% 80%, rgba(10, 91, 255, 0) 80%); }
.vf-pc .go { border-radius: 11px; }
.ref-hero { border-radius: 0 0 var(--r-xl) var(--r-xl); background: linear-gradient(155deg, #150C4D 0%, #3A1FB0 50%, #5A6BFF 120%); }
.ref-hero::before { inset: 0; left: 0; bottom: 0; width: auto; height: auto; border-radius: 0; background: var(--spd); }
.ref-hero .gf { border-radius: 18px; }
.ref-hero .rw > div { border-radius: var(--r-m); }
.ref-hero .rw > i { border-radius: 8px; transform: skewX(-12deg); }
.ref-link { border-radius: var(--r-m); border-width: 1px; box-shadow: none; background: var(--bg); }
.nt { border-radius: var(--r-l); box-shadow: var(--hair); }
.ssb, .ssr { border-radius: var(--r-l); box-shadow: var(--hair); }
.stt-k { border-radius: var(--r-m); box-shadow: var(--hair); }
.stt-card { border-radius: var(--r-l); box-shadow: var(--hair); }
.shop-r { border-radius: var(--r-l); box-shadow: var(--hair); }
.rv-ask { border-radius: var(--r-l); }
.rbox { border-radius: var(--r-m); }
.empty .eico { border-radius: 24px; }
.mk.s56 { border-radius: 30%; }
.sp-ic { border-radius: 24px; }

.ctile b, .ctile small, .cp-hero h2, .cp-hero p { text-shadow: 0 1px 3px rgba(0, 20, 70, .22); }

/* ---------- Profil sarlavhasi ---------- */
.me-top { position: relative; overflow: hidden; padding-bottom: 18px; background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--brand) 8%, var(--bg)) 100%); box-shadow: 0 1px 0 var(--line); }
.me-top::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 55%; pointer-events: none;
  background: linear-gradient(115deg, rgba(10, 91, 255, 0) 0 40%, rgba(10, 91, 255, .06) 40% 56%, rgba(10, 91, 255, 0) 56% 64%, rgba(10, 91, 255, .045) 64% 80%, rgba(10, 91, 255, 0) 80%); }
.me-c { position: relative; z-index: 1; }
.me-c .av { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--brand) 45%, transparent); }