@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: 8px; 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: 6px; }
.mk.s40 { width: 40px; height: 40px; border-radius: 8px; }
.mk.s56 { width: 56px; height: 56px; border-radius: 10px; }
.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: 12px; 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: 8px; 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: 6px; 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: 6px; 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: 12px 12px 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: 8px; 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: 6px; 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: 8px; 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: 10px; 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: 8px; 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: 10px; 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: 6px; 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: 8px; 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: 6px; 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: 6px; 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: 10px; 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: 4px; 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: 6px; 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: 6px; 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); }

.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: 8px; 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: 4px; 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: 4px; 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: 8px; }
.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: 6px; }
@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: 12px; 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: 12px; 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: 10px; 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: 12px; 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: 8px; 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: 8px; 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: 8px; background: var(--bg); box-shadow: var(--sh1); text-align: left; width: calc(100% - 24px); }
.lst-save .mic { width: 34px; height: 34px; border-radius: 6px; 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: 6px; 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: 6px; 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: 6px; 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: 4px; }
.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: 4px; 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: 6px; 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: 6px; 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: 4px; font-weight: 700; }
.safe { display: flex; gap: 12px; padding: 14px; border-radius: 8px; 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: 8px; 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: 8px; 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: 4px; 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: 10px; 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: 4px; }
.sellr { background: var(--brand-soft); color: var(--brand); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }

/* ---------- 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: 8px; 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: 8px; 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: 4px; }
.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: 8px; padding: 4px; gap: 3px; flex: none; }
.cur button { padding: 0 14px; height: 40px; border-radius: 6px; 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: 8px; 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: 10px; 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: 8px; 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: 8px; 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: 6px; 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: 6px; 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: 10px; 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: 6px; 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: 8px; 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: 12px; 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: 12px; 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: 4px; 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: 8px; 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: 8px; 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: 10px; 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: 6px; 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: 8px; 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: 8px; 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: 8px; 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: 8px; 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: 8px; 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: 10px; margin: 0 12px 10px; background: var(--card); box-shadow: var(--sh1); }
.mrow .mt { width: 90px; height: 90px; border-radius: 8px; 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: 8px; 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: 6px; 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: 8px; 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: 12px; 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: 8px; 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: 8px; }
.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 12px 12px; }
.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: 10px; 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: 10px; background: var(--bg); box-shadow: var(--sh1); }
.vf-st > .i { width: 38px; height: 38px; padding: 8px; border-radius: 6px; 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: 10px; 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: 10px; 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: 10px; 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: 10px; 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: 8px; background: var(--bg2); margin: 0 0 16px; }
.seg button { flex: 1; height: 42px; border-radius: 6px; 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: 8px; }

/* ---------- 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: 10px; 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: 8px; 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: 6px; 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: 10px; background: var(--bg); box-shadow: var(--sh1); }
.ssb .ic { width: 40px; height: 40px; border-radius: 8px; 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: 10px; 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: 10px; 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: 10px; 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: 4px 4px 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 12px 12px;
  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: 12px; 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: 10px; 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: 8px; 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: 10px; 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: 6px; 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: 10px; 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 — "Qirra" dizayn qatlami (v4)
   Oq fon · kesilgan (chamfer) burchaklar · kristall/qirrali SVG rasmlar ·
   elektr ko'k + quyoshli to'q sariq. Eng oxirida yuklanadi.
   ===================================================================== */
:root {
  --brand: #0B54FF; --brand-2: #1FA9FF; --brand-ink: #083AC4; --brand-soft: #E9F0FF;
  --sun: #FF7A00; --sun-2: #FFB300;
  --page: #FFFFFF; --bg: #FFFFFF; --bg2: #F3F6FC; --bg3: #E0E6F2; --card: #FFFFFF; --line: #E4E9F3;
  --ink: #0A1230; --ink2: #3E4A6B; --mute: #7A86A4;
  --grad: linear-gradient(135deg, #0B54FF 0%, #1F8BFF 100%);
  --gradf: linear-gradient(115deg, rgba(255, 255, 255, .2) 0 30%, rgba(255, 255, 255, 0) 30%), linear-gradient(135deg, #0B54FF 0%, #1F8BFF 100%);
  --gsun: linear-gradient(115deg, rgba(255, 255, 255, .3) 0 30%, rgba(255, 255, 255, 0) 30%), linear-gradient(135deg, #FFB300 0%, #FF7A00 100%);
  --mask: #FFFFFF; --c: 12px;
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 200' preserveAspectRatio='xMaxYMid slice'%3E%3Cpolygon points='440,0 290,0 440,130' fill='%23fff' fill-opacity='.11'/%3E%3Cpolygon points='290,0 215,200 440,130' fill='%23fff' fill-opacity='.06'/%3E%3Cpolygon points='440,130 215,200 440,200' fill='%23001040' fill-opacity='.13'/%3E%3Cpolygon points='0,200 150,200 70,120' fill='%23fff' fill-opacity='.07'/%3E%3Cpolygon points='0,0 90,0 0,70' fill='%23001040' fill-opacity='.08'/%3E%3C/svg%3E");
}
:root[data-theme=dark] {
  --page: #070C1A; --bg: #0E1630; --bg2: #172044; --bg3: #26335E; --card: #0E1630; --line: #1F2A4E;
  --brand-soft: #14265A; --mask: #0E1630;
}
.tint0 { --f1: #8CC2FF; --f2: #2F7BFF; --f3: #0A4FE0; --f4: #062F9E; }
.tint1 { --f1: #FFC27A; --f2: #FF8A1F; --f3: #E5560A; --f4: #A83A00; }
.tint2 { --f1: #C3A6FF; --f2: #8B5CFF; --f3: #5B2BD6; --f4: #3A1A9A; }
.tint3 { --f1: #7CE8B5; --f2: #1FC37A; --f3: #0B9560; --f4: #066640; }
.tint4 { --f1: #FFA6C9; --f2: #FF4F93; --f3: #D91F6B; --f4: #9C1048; }
.tint5 { --f1: #7BE3F5; --f2: #19BDDC; --f3: #0A8FAF; --f4: #065F78; }
.tint6 { --f1: #FFE074; --f2: #FFB800; --f3: #E08A00; --f4: #A85F00; }
.tint7 { --f1: #FF9A8A; --f2: #FF5646; --f3: #D92E22; --f4: #9A1A12; }
.tint8 { --f1: #A4ADFF; --f2: #5F6BFF; --f3: #3A44D6; --f4: #232A9A; }
.tint9 { --f1: #B8C2D8; --f2: #7D8BAA; --f3: #56627F; --f4: #343E57; }
.tint0 { --tb: #E8F1FF; } .tint1 { --tb: #FFF0E0; } .tint2 { --tb: #F0E9FF; } .tint3 { --tb: #E1F8EC; } .tint4 { --tb: #FFE8F1; }
.tint5 { --tb: #DEF6FA; } .tint6 { --tb: #FFF5D3; } .tint7 { --tb: #FFE8E3; } .tint8 { --tb: #E9EBFF; } .tint9 { --tb: #EDF0F6; }
:root[data-theme=dark] .tint0 { --tb: #14265A; } :root[data-theme=dark] .tint1 { --tb: #3A2A14; } :root[data-theme=dark] .tint2 { --tb: #2A1F4D; }
:root[data-theme=dark] .tint3 { --tb: #0F3023; } :root[data-theme=dark] .tint4 { --tb: #3C1A28; } :root[data-theme=dark] .tint5 { --tb: #0E3033; }
:root[data-theme=dark] .tint6 { --tb: #38300F; } :root[data-theme=dark] .tint7 { --tb: #3B1B18; } :root[data-theme=dark] .tint8 { --tb: #1E2350; } :root[data-theme=dark] .tint9 { --tb: #1B2338; }
.fx, .fa { display: block; stroke: none; flex: none; }
.fx { width: 26px; height: 26px; }
body { letter-spacing: -.004em; }
h1, h2, h3 { letter-spacing: -.025em; }
.safe-mask { background: var(--mask); }

/* ---------- Kesilgan burchaklar (chamfer) ---------- */
.btn:not(.btn-line), .sinp, .fbtn, .mk, .ctile, .bn-i, .wal, .cp-hero, .toast, .si, .ib.cut, .vf-pc, .sg .si, .cbar .sendb,
.hd-r1 .ib, .loc2 .lp, .pg-top .ib {
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.hd-r1 .ib, .pg-top .ib, .ib.cutb { --c: 9px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.btn { --c: 10px; border-radius: 0; font-weight: 700; letter-spacing: 0; }
.btn.sm { --c: 7px; border-radius: 0; }
.sinp, .fbtn { --c: 10px; }
.mk { --c: 12px; } .mk.s36 { --c: 9px; } .mk.s40 { --c: 10px; } .mk.s56 { --c: 15px; }
.ctile, .cp-hero { --c: 24px; }
.bn-i { --c: 26px; }
.wal { --c: 26px; }
.vf-pc { --c: 14px; }
.menu, .kpi, .mrow, .qa, .blk, .svc, .shop-r, .stt-k, .stt-card, .meth, .vf-st, .vf-card, .ref-link, .nt, .ssb, .lst-save, .sel-cat, .free-b, .rbox { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 8px; }
.menu, .kpi, .mrow, .qa, .shop-r, .stt-card, .ssb, .nt, .lst-save { position: relative; }
.toast { --c: 12px; }

/* ---------- Pastki menyu ---------- */
.nav { padding: 0; }
.nav-in { height: calc(var(--nav-h) + var(--sab)); padding: 0 2px var(--sab); border-radius: 0; grid-template-columns: 1fr 1fr 84px 1fr 1fr; background: var(--bg); border-top: 0; box-shadow: 0 -1px 0 var(--line); }
.nv { --f1: #D4DAE8; --f2: #B6C0D6; --f3: #98A4C0; --f4: #7B88A8; color: var(--mute); font-size: 10.5px; font-weight: 600; gap: 2px; letter-spacing: 0; padding-top: 6px; }
.nv .ni { width: auto; height: auto; background: none; border-radius: 0; }
.nv .fx { width: 29px; height: 29px; transition: transform .2s; }
.nv.active { --f1: #86BBFF; --f2: #2F7BFF; --f3: #0A4FE0; --f4: #062F9E; color: var(--brand); font-weight: 750; }
.nv.active .fx { transform: translateY(-1px) scale(1.06); }
.nv.active::before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 34px; height: 3px; margin-left: -17px; transform: skewX(-32deg); background: var(--gradf); }
:root[data-theme=dark] .nv { --f1: #3C4872; --f2: #313C64; --f3: #28325A; --f4: #1F2848; }
:root[data-theme=dark] .nv.active { --f1: #86BBFF; --f2: #3B86FF; --f3: #1559E8; --f4: #0A3AA8; color: #8DB8FF; }
.nv .bdg { top: 5px; left: calc(50% + 8px); border-radius: 4px; background: var(--gsun); color: #2B1500; box-shadow: 0 0 0 2px var(--bg); }
.nv-add { position: relative; }
.nv-add::before { content: ''; position: absolute; left: 50%; top: -26px; width: 70px; height: 70px; margin-left: -35px; background: var(--bg); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); box-shadow: none; }
.nv-add span { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 0; transform: translateY(-19px); background: var(--gsun); box-shadow: none; clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px)); }
.nv-add span::after { display: none; }
.nv-add:active span { transform: translateY(-17px) scale(.94); }
.nv-add .i { --sw: 15; width: 28px; height: 28px; color: #fff; }

/* ---------- Xabar kartasi (toast), 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 16px 9px 9px; border-radius: 0; overflow: hidden;
  background: #0B1230; color: #fff; font-size: 13.5px; font-weight: 550; text-align: left; line-height: 1.35; letter-spacing: 0; transform: translateY(-18px); opacity: 0; transition: transform .34s cubic-bezier(.2, .9, .3, 1.15), opacity .22s; box-shadow: none; }
:root[data-theme=dark] .toast { background: #1A2548; }
.toast.show { transform: none; opacity: 1; }
.toast .ti { width: 32px; height: 32px; display: grid; place-items: center; flex: none; color: #fff; background: var(--tk); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); border-radius: 0; }
.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: 3px; width: 100%; background: var(--tc); 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, #0B54FF); --tc: #3BA0FF; }
.toast.err { background: #0B1230; }
.banner { position: relative; overflow: hidden; background: var(--bk-soft, var(--bg2)); color: var(--ink2); padding: 12px 14px 12px 18px; border-radius: 0; font-weight: 500; font-size: 13px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bk, var(--brand)); }
.banner .i { color: var(--bk, var(--brand)); }
.banner.warn { --bk: #FF9500; --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: 0; padding: 13px 14px 13px 19px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.safe::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #FF9500; }
.sysm { position: relative; overflow: hidden; color: var(--ink2); font-weight: 500; border-radius: 0; padding: 9px 13px 9px 17px; text-align: left; }
.sysm::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #FF9500; }
.sysm .i { color: #FF9500; }
.fld.err .inp, .inp.err { border-color: var(--bad); background: var(--bg); 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-pri { background: var(--gradf); color: #fff; box-shadow: none; }
.btn-soft { background: var(--brand-soft); color: var(--brand); }
:root[data-theme=dark] .btn-soft { background: rgba(80, 140, 255, .2); color: #8DB4FF; }
.btn-gray { background: var(--bg2); }
.btn-line { border-radius: 6px; border-width: 1.5px; border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); color: var(--brand); }
.btn:active { transform: scale(.98); }
.chip { height: 36px; padding: 0 17px; border-radius: 0; font-weight: 650; border: 0; background: var(--bg2); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.chip.on, .chip[aria-pressed=true] { background: var(--gradf); color: #fff; box-shadow: none; }
.chip.on .i, .chip[aria-pressed=true] .i { color: #fff; }
.chip.sm { height: 30px; padding: 0 13px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.inp { border-radius: 6px; border-width: 1.5px; border-color: transparent; background: var(--bg2); }
.inp:focus { border-color: var(--brand); background: var(--bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent); }
.fld > label, .lbl { font-weight: 650; font-size: 12.5px; color: var(--ink2); }
.ib { border-radius: 8px; }
.ib.glass { border-radius: 0; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); background: rgba(8, 14, 40, .42); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ib.glass .h-on { display: none; }
.ib.glass .fx { width: 22px; height: 22px; }
.ib.glass[aria-pressed=true] .h-on { display: block; }
.ib.glass[aria-pressed=true] .h-off { display: none; }
.sw { border-radius: 0; --c: 8px; width: 50px; height: 30px; background: var(--bg3); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.sw::after { border-radius: 0; width: 22px; height: 22px; top: 4px; left: 8px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); transition: transform .2s; }
.sw[aria-checked=true] { background: var(--gradf); }
.sw[aria-checked=true]::after { transform: translateX(18px); }
.badge { border-radius: 0; font-weight: 700; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); padding-left: 9px; padding-right: 9px; }
.cur { border-radius: 6px; }
.cur button { border-radius: 4px; }
.cur button.on { color: var(--brand); }
.sec { padding: 26px 16px 13px; }
.sec h2 { font-size: 20px; font-weight: 780; gap: 10px; letter-spacing: -.03em; }
.sec h2::before { content: ''; flex: none; width: 13px; height: 19px; transform: skewX(-18deg); background: linear-gradient(90deg, var(--brand) 0 5px, transparent 5px 8px, var(--sun) 8px 13px); }
.sec small { font-weight: 500; margin-top: 3px; margin-left: 23px; color: var(--mute); }
.sec .lnk { font-weight: 700; font-size: 13px; color: var(--brand); }

/* ---------- Pastki oyna, sahifa sarlavhasi ---------- */
.sh-p { border-radius: 0; clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%, 0 26px); }
/* Pastki oyna: Telegram tugmalari ostiga kirmaydi, tepaga tortib kengaytiriladi, pastga tortib yopiladi */
.sh-p { max-height: min(90%, calc(100% - var(--sat) - 10px)); transition: transform .32s cubic-bezier(.22, .8, .24, 1), height .3s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.sh-p.full { height: calc(100% - var(--sat) - 6px); max-height: none; }
.sh-p.dragging { transition: none; }
.sh-p::before { width: 44px; height: 5px; border-radius: 0; transform: skewX(-30deg); background: var(--bg3); margin: 10px auto 4px; }
#pkBox { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#pkBox .sh-b { padding-bottom: calc(14px + var(--sab)); }
.sh-h h2 { font-size: 19px; font-weight: 780; }
.pg-top { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.pg-top h1 { font-size: 18px; font-weight: 780; }
.pg-top .ib { background: var(--bg2); }

/* ---------- Bosh sahifa sarlavhasi ---------- */
.hd2 { background: var(--bg); padding: calc(var(--sat) + 8px) 14px 10px; }
.hd2.scrolled { box-shadow: 0 1px 0 var(--line); }
.loc2 .lp { width: 42px; height: 42px; --c: 11px; border-radius: 0; background: linear-gradient(135deg, #FFF0DD 0 62%, #FFE3C4 62%); box-shadow: none; color: inherit; }
.loc2 .lp .fx { width: 28px; height: 28px; }
.loc2 small { font-weight: 550; font-size: 11px; color: var(--mute); }
.loc2 b { font-size: 16px; font-weight: 750; }
.hd-r1 .ib { width: 44px; height: 44px; background: linear-gradient(135deg, var(--bg2) 0 62%, color-mix(in srgb, var(--bg2) 60%, var(--bg3)) 62%); box-shadow: none; }
.hd-r1 .ib .fx { width: 27px; height: 27px; }
.hd-r1 .ib .cnt-b { top: 2px; right: 2px; background: var(--gsun); color: #2B1500; border: 0; border-radius: 4px; min-width: 17px; height: 17px; font-size: 10px; z-index: 2; }
.hd-r2 { margin-top: 10px; }
.sinp { height: 50px; font-weight: 550; font-size: 14.5px; background: linear-gradient(135deg, var(--bg2) 0 70%, color-mix(in srgb, var(--bg2) 60%, var(--bg3)) 70%); border: 0; color: var(--mute); box-shadow: none; border-radius: 0; --c: 13px; }
.sinp .i { color: var(--brand); }
.fbtn { width: 42px; height: 42px; right: 4px; top: 4px; border-radius: 0; --c: 11px; background: var(--gsun); color: #2B1500; box-shadow: none; }
.fbtn.on { background: var(--gradf); color: #fff; }
.fbtn b { background: var(--ink); color: #fff; border-color: var(--bg); border-radius: 4px; }

/* ---------- Reklama joyi ---------- */
.bn { margin-top: 12px; }
.bn-w { position: relative; margin: 0 14px; }
.bn-s { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0; scrollbar-width: none; scroll-padding: 0; }
.bn-i { flex: 0 0 100%; aspect-ratio: 11 / 5; border-radius: 0; --c: 26px; scroll-snap-align: start; background: var(--grad); position: relative; overflow: hidden; }
.bn-i .bt { padding: 36px 18px 14px; background: linear-gradient(transparent, rgba(3, 8, 28, .78)); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.bn-i .abs { right: 28px; bottom: 12px; }
.bn-i .ad-b { padding: 8px 16px; border-radius: 0; font-weight: 750; font-size: 12.5px; background: #fff; color: var(--brand); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.bn-tag { position: absolute; left: 12px; top: 12px; z-index: 3; pointer-events: none; background: var(--sun-2); border-radius: 0; padding: 4px 15px 4px 13px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: none; }
.bn-tag b { display: block; color: #1B1200; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; transform: none; }
.bn-cnt { position: absolute; right: 30px; top: 13px; z-index: 3; pointer-events: none; background: rgba(6, 10, 28, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, .8); border-radius: 0; padding: 3px 10px; font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.bn-cnt b { color: #fff; font-weight: 750; }
.bn-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px 0 18px; min-height: 24px; }
.bn-d { display: flex; gap: 6px; margin: 0; justify-content: flex-start; }
.bn-d i { width: 14px; height: 5px; border-radius: 0; background: var(--bg3); transform: skewX(-30deg); transition: width .3s, background .3s; }
.bn-d i.on { width: 34px; background: var(--gradf); }
.bn-adv { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.bn-adv .i { width: 13px; height: 13px; --sw: 14; }
:root[data-theme=dark] .bn-adv { color: #8DB4FF; }
.bn-i.own { padding: 0; display: block; color: #fff; text-align: left; background-size: cover, cover; }
.bn-i.own::before { content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: var(--facets) right center / cover no-repeat; }
.bn-i.own::after { display: none; }
.bn-i.own .bx { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 16px 18px 16px 20px; gap: 5px; max-width: 62%; }
.bn-i.own h3 { font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; 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: .93; 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: 7px; height: 32px; padding: 0 12px 0 16px; border-radius: 0; background: #fff; color: #0A44D6; font-weight: 750; font-size: 12.5px; gap: 5px; box-shadow: none; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); width: fit-content; }
.bn-i.own .pic { position: absolute; right: 3%; top: 50%; bottom: auto; width: 40%; height: auto; aspect-ratio: 1; transform: translateY(-48%); z-index: 1; }
.bn-i.own .pic svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 12px rgba(0, 10, 50, .3)); transform: none; color: inherit; }
.bn-i.g1 { background: var(--facets) right center / cover no-repeat, linear-gradient(125deg, #0B3FE0 0%, #0A7BFF 55%, #20C4FF 115%); }
.bn-i.g1 .pic { --f1: #FFB8D6; --f2: #FF5C9C; --f3: #E02870; --f4: #A8124C; }
.bn-i.g2 { background: var(--facets) right center / cover no-repeat, linear-gradient(125deg, #08936A 0%, #12C28A 55%, #3BE0C8 115%); }
.bn-i.g2 .go { color: #08875D; }
.bn-i.g2 .pic { --f1: #FFC27A; --f2: #FF8A1F; --f3: #E5560A; --f4: #A83A00; }
.bn-i.g3 { background: var(--facets) right center / cover no-repeat, linear-gradient(125deg, #FF5A00 0%, #FF8A1F 55%, #FFC21A 118%); }
.bn-i.g3 .go { color: #D24A00; }
.bn-i.g3 .pic { --f1: #A7CCFF; --f2: #3B86FF; --f3: #0A4FE0; --f4: #062F9E; }
.bn-i.g4 { background: var(--facets) right center / cover no-repeat, linear-gradient(125deg, #5A24E0 0%, #8F4DFF 55%, #FF5CA8 118%); }
.bn-i.g4 .go { background: var(--gsun); color: #2B1500; }
.bn-i.g4 .pic { --f1: #FFE680; --f2: #FFC21A; --f3: #F29A00; --f4: #B86A00; }

/* ---------- Bo'lim belgilari (.mk), katalog plitkalari ---------- */
.mk { border-radius: 0; background: linear-gradient(135deg, var(--tb, #E8F1FF) 0 62%, color-mix(in srgb, var(--tb, #E8F1FF) 55%, var(--bg)) 62%); color: var(--ti, var(--brand)); box-shadow: none; overflow: visible; width: 52px; height: 52px; }
.mk::before, .mk::after { display: none; }
.mk .fa { width: 80%; height: 80%; }
.mk .gi { width: 58%; height: 58%; color: var(--ti, var(--brand)); --duo: .38; }
.mk.s36 { width: 38px; height: 38px; } .mk.s40 { width: 42px; height: 42px; } .mk.s56 { width: 60px; height: 60px; }
.cg.on .mk { background: linear-gradient(135deg, #CFE0FF 0 62%, #E9F0FF 62%); }
.pg-body .cg .mk, .cg .mk, .cp-grid .cg .mk { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; --c: 24px; }
.cp-grid .cg .mk .gi { width: 54%; height: 54%; }
.cg > span:not(.mk) { font-weight: 650; }
.ctiles { gap: 12px; padding: 8px 14px 0; }
.ctile { border-radius: 0; min-height: 140px; padding: 16px 14px 14px; background: linear-gradient(135deg, var(--tb) 0 60%, color-mix(in srgb, var(--tb) 55%, var(--bg)) 60%); color: var(--ink); box-shadow: none; overflow: hidden; }
.ctile::before, .ctile::after { display: none; }
.ctile b { font-size: 15.5px; font-weight: 780; letter-spacing: -.02em; color: var(--ink); text-shadow: none; max-width: 70%; }
.ctile small { font-weight: 600; color: var(--ink2); text-shadow: none; }
.ctile .art-b { right: -3px; bottom: -3px; width: 58%; filter: none; }
.ctile .art-b svg { width: 100%; height: 100%; }
.cp-hero { border-radius: 0; background: linear-gradient(135deg, var(--tb) 0 60%, color-mix(in srgb, var(--tb) 55%, var(--bg)) 60%); color: var(--ink); box-shadow: none; }
.cp-hero::before, .cp-hero::after { display: none; }
.cp-hero h2 { font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.cp-hero p { font-weight: 600; color: var(--ink2); }
.cp-hero .art-b svg { filter: none; }
.ph .noph, .gal .noph { background: linear-gradient(135deg, var(--tb) 0 60%, color-mix(in srgb, var(--tb) 55%, var(--bg)) 60%); }
.ph .noph svg, .gal .noph svg { width: 56%; height: auto; aspect-ratio: 1; opacity: 1; }
.sub b { font-weight: 650; }

/* ---------- Premium polosa ---------- */
.band { margin: 22px 0 0; padding: 40px 0 44px; background: var(--facets) right center / cover no-repeat, linear-gradient(135deg, #081A66 0%, #0A3CCB 60%, #1C79FF 125%); clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%); overflow: visible; }
.band::before { display: none; }
.band .bh h2 { font-size: 20px; font-weight: 800; gap: 9px; }
.band .bh h2::before { display: none; }
.band .bh h2 .fx { width: 30px; height: 30px; }
.band .bh .lnk { font-weight: 700; color: #fff; }
.band .card { box-shadow: none; background: var(--bg); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.band .card .ph { clip-path: none; }
.band .card .cb { padding: 10px 12px 12px; }

/* ---------- Do'konlar ---------- */
.shops { gap: 14px; padding: 4px 16px 6px; }
.shp { width: 74px; }
.shp .av { width: 66px; height: 66px; border-radius: 0; font-size: 20px; font-weight: 800; background: var(--gradf); color: #fff; box-shadow: none; clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 19px 100%, 0 calc(100% - 19px), 0 19px); }
.shp b { margin-top: 8px; font-weight: 650; font-size: 11.5px; }

/* ---------- E'lon kartalari ---------- */
.grid { gap: 20px 12px; padding: 0 14px; }
.card { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.card:active { transform: scale(.985); }
.ph { border-radius: 0; aspect-ratio: 1 / 1.04; clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px); }
.card.hc .ph { aspect-ratio: 1 / .88; }
.cb { padding: 10px 2px 2px; gap: 4px; }
.cb .pr { font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.cb .pr small { font-weight: 600; }
.cb .tt { font-weight: 500; font-size: 13px; color: var(--ink2); }
.cb .ft, .cb .mt { font-weight: 500; }
.tg { border-radius: 0; font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 4px 11px 4px 9px; box-shadow: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tg-vip { background: var(--gsun); color: #2B1500; }
.tg-urg { background: linear-gradient(135deg, #FF5B4F, #E5316B); }
.tg-top { background: var(--gradf); }
.tg-new { background: linear-gradient(135deg, #2BD487, #0E9F5B); }
.heart { width: 34px; height: 34px; right: 8px; top: 8px; border-radius: 0; background: rgba(8, 14, 40, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; color: #fff; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
:root[data-theme=dark] .heart { background: rgba(8, 14, 40, .6); color: #fff; }
.heart .fx { width: 22px; height: 22px; }
.heart .h-on { display: none; }
.heart[aria-pressed=true] { background: #fff; }
.heart[aria-pressed=true] .h-on { display: block; animation: pop .35s; }
.heart[aria-pressed=true] .h-off { display: none; }
.pn { border-radius: 0; font-weight: 700; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); padding: 3px 9px; }
.card.mc .ph { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.card.sold .ph::after { font-weight: 800; letter-spacing: .04em; }
.vtag { border-radius: 0; background: none; box-shadow: none; }
.vtag svg { width: 18px; height: 18px; }

/* ---------- Katalog / ro'yxat ---------- */
.pgt { padding: calc(var(--sat) + 16px) 16px 10px; background: var(--bg); }
.pgt h1 { font-size: 30px; font-weight: 800; letter-spacing: -.035em; }
.pgt p { font-weight: 500; color: var(--mute); }
.pgt + .sfield { background: var(--bg); padding: 4px 14px 14px; }
.lst-sub { background: var(--bg); }
.lst-bar .chip { background: var(--bg2); }
.afl .chip { background: var(--brand-soft); color: var(--brand); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.lst-save .mic { border-radius: 0; background: var(--gradf); color: #fff; }

/* ---------- Batafsil ---------- */
.gal .cnt { border-radius: 0; font-weight: 700; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 4px 12px; }
/* Galereya: asosiy rasm qirrali kesim bilan tugaydi, ostida kichik rasmlar "plyonkasi" */
.gal-in { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px)); }
.gal .cnt { bottom: 20px; }
.thumbs { gap: 10px; padding: 14px 16px 8px; align-items: center; scroll-snap-type: x proximity; }
.thumbs button { width: 62px; height: 62px; padding: 2.5px; border: 0; border-radius: 0; background: transparent; opacity: .58; scroll-snap-align: center; transition: opacity .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1), background .2s;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }
.thumbs button:first-child { margin-left: auto; }
.thumbs button:last-child { margin-right: auto; }
.thumbs button img { clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.thumbs button.on { opacity: 1; background: var(--grad); transform: translateY(-2px); }
.thumbs button:active { transform: scale(.94); }
.cpill { border-radius: 0; font-weight: 650; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding-left: 12px; padding-right: 12px; }
.dt .big b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.dt .big .neg { border-radius: 0; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.dt h1 { font-weight: 700; }
.sect > h3, .h3 { font-weight: 780; font-size: 17px; }
.tab { font-weight: 650; }
.tab.on::after { left: 24%; right: 24%; height: 4px; border-radius: 0; background: var(--gradf); transform: skewX(-30deg); }
.tab i { border-radius: 0; font-weight: 650; }
.kv b { font-weight: 650; }
.amen span { border-radius: 0; font-weight: 650; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding-left: 13px; padding-right: 13px; }
.cta { box-shadow: 0 -1px 0 var(--line); border-top: 0; background: var(--bg); }
.cta .pc b { font-weight: 800; }
.stat3 div { border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--bg); }

/* ---------- Qidiruv ---------- */
.sp-top { background: var(--bg); }
.sp-in { height: 50px; border-radius: 0; border: 0; background: linear-gradient(135deg, var(--bg2) 0 72%, color-mix(in srgb, var(--bg2) 60%, var(--bg3)) 72%); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.sp-in:focus-within { box-shadow: none; background: var(--brand-soft); }
.sg .si { border-radius: 0; --c: 9px; }
.sgrp { font-weight: 700; letter-spacing: .03em; }

/* ---------- Xabarlar ---------- */
.cv .th { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.cv .r1 b { font-weight: 700; }
.ub { font-style: normal; border-radius: 0; font-weight: 750; min-width: 22px; height: 22px; background: var(--gradf); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.msg { border-radius: 0; }
.msg.me { background: var(--gradf); box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); }
.msg.him { background: var(--bg2); box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
.day { border-radius: 0; font-weight: 650; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 3px 12px; }
.cbar textarea { border-radius: 6px; }
.cbar .sendb { --c: 11px; width: 46px; height: 46px; border-radius: 0; background: var(--gsun); color: #2B1500; box-shadow: none; }

/* ---------- Profil, hamyon ---------- */
.me-top { position: relative; background: var(--bg); box-shadow: none; padding-bottom: 16px; overflow: hidden; }
.me-top::before { display: none; }
.me-c { position: relative; z-index: 1; }
.me-c .av, .av.lg { border-radius: 0; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); box-shadow: none; background: var(--gradf); }
.me-c h2 { font-weight: 800; font-size: 22px; }
.wal { border-radius: 0; background: var(--facets) right center / cover no-repeat, linear-gradient(125deg, #0A3CD8 0%, #0A7BFF 58%, #22BBFF 118%); box-shadow: none; }
.wal .bal { font-weight: 800; letter-spacing: -.04em; }
.wal .btn { font-weight: 700; --c: 9px; }
.wal .btn-w { color: #0A44D6; background: #fff; }
.kpi { box-shadow: inset 0 0 0 1.5px var(--line); }
.kpi b { font-weight: 800; }
.mi .mic { border-radius: 0; --c: 9px; }
.mi b { font-weight: 650; }
.tx-g { font-weight: 700; letter-spacing: .03em; font-size: 12px; }
.txr .ti { border-radius: 0; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.mrow { box-shadow: inset 0 0 0 1.5px var(--line); }
.mrow .mt { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.mrow b { font-weight: 700; }
.mrow .pr { color: var(--brand); }
.svc { border-width: 0; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--bg); }
.svc.act { box-shadow: inset 0 0 0 2px var(--ok); }
.svc .si { border-radius: 0; --c: 13px; width: 56px; height: 56px; background: linear-gradient(135deg, var(--bg2) 0 62%, color-mix(in srgb, var(--bg2) 55%, var(--bg3)) 62%); color: inherit; }
.svc .si .fx { width: 40px; height: 40px; }
.meth { box-shadow: inset 0 0 0 1.5px var(--line); border-width: 0; }
.amts button { border-radius: 0; font-weight: 700; border-width: 0; background: var(--bg2); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.amts button[aria-pressed=true] { background: var(--gradf); color: #fff; box-shadow: none; }
.qa { box-shadow: inset 0 0 0 1.5px var(--line); }
.qa > button { font-weight: 700; }
.rule .ri { border-radius: 0; }
.pho { border-radius: 0; border-width: 2px; }
.stp i { border-radius: 0; height: 5px; transform: skewX(-30deg); }
.stp i.on { background: var(--gradf); }
.empty .eico { width: 120px; height: 120px; border-radius: 0; background: none; color: inherit; margin-bottom: 14px; }
.empty .eico::after { display: none; }
.empty .eico .fx { width: 100%; height: 100%; }
.empty h3 { font-weight: 780; }
.vf-chip { border-radius: 0; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }

/* ---------- Tasdiqlash, referal, bildirishnoma, statistika ---------- */
.vf-hero { border-radius: 0; background: var(--facets) right center / cover no-repeat, linear-gradient(150deg, #0A3CD8 0%, #0A7BFF 55%, #22BBFF 125%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); padding-bottom: 46px; }
.vf-hero::before, .vf-hero::after { display: none; }
.vf-hero h2 { font-weight: 800; }
.vf-price { border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.vf-pc { background: linear-gradient(135deg, #E6F0FF 0 62%, #F0E9FF 62%); box-shadow: none; }
.vf-pc.on { background: linear-gradient(135deg, #DDF9EC 0 62%, #E6F0FF 62%); }
:root[data-theme=dark] .vf-pc { background: linear-gradient(135deg, #12284F 0 62%, #231C5C 62%); }
:root[data-theme=dark] .vf-pc.on { background: linear-gradient(135deg, #0F3023 0 62%, #12284F 62%); }
.vf-pc::after, .vf-pc.on::after { display: none; }
.vf-pc .go { border-radius: 0; width: 36px; height: 36px; background: var(--gradf); color: #fff; }
.vfseal, .vseal { filter: none; }
.ref-hero { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); padding-bottom: 44px; background: var(--facets) right center / cover no-repeat, linear-gradient(150deg, #5B26E0 0%, #3A55F2 60%, #1C9BFF 125%); }
.ref-hero .gf { border-radius: 0; background: none; box-shadow: none; width: 92px; height: 92px; }
.ref-hero .gf .fx { width: 100%; height: 100%; filter: drop-shadow(0 12px 14px rgba(10, 0, 70, .35)); }
.ref-hero .rw > div { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.ref-link { border-width: 0; box-shadow: inset 0 0 0 1.5px var(--line); }
.nt { box-shadow: inset 0 0 0 1.5px var(--line); }
.nt.unread { background: linear-gradient(135deg, var(--brand-soft) 0 70%, var(--bg) 70%); }
.ssb, .ssr { border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line); }
.stt-k, .stt-card, .shop-r { box-shadow: inset 0 0 0 1.5px var(--line); }
.rv-ask { border-radius: 0; }
.rbox { box-shadow: inset 0 0 0 1.5px var(--line); }
/* Intro belgisi: soya PNG shakliga ergashsin (box-shadow kvadrat oq burchak qoldirardi) */
.sp-ic { border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 12px 20px rgba(10, 91, 255, .34)); }

/* ---------- Tezlik chiziqlari (brend belgisi) ---------- */
.pgt { position: relative; overflow: hidden; }
.pgt::after { content: ''; position: absolute; right: 18px; top: calc(var(--sat) + 18px); width: 78px; height: 30px; transform: skewX(-20deg); background: linear-gradient(90deg, #0B54FF 0 14px, transparent 14px 22px, #1FA9FF 22px 36px, transparent 36px 44px, #FFB300 44px 58px, transparent 58px 66px, #FF7A00 66px 80px, transparent 80px); opacity: .95; }
.pgt h1, .pgt p { position: relative; z-index: 1; }

/* ---------- Tor ekranlar (320–360) ---------- */
.nv > span:last-of-type { white-space: nowrap; }
@media (max-width: 360px) {
  .nav-in { grid-template-columns: 1fr 1fr 74px 1fr 1fr; }
  .nv { font-size: 9.5px; }
  .nv .fx { width: 26px; height: 26px; }
  .bn-i { aspect-ratio: 11 / 6.4; --c: 20px; }
  .bn-i.own h3 { font-size: 17px; -webkit-line-clamp: 2; }
  .bn-i.own p { font-size: 11px; -webkit-line-clamp: 1; }
  .bn-i.own .bx { padding: 12px 12px 12px 16px; gap: 3px; }
  .bn-i.own .go { height: 28px; margin-top: 4px; font-size: 12px; }
  .ctile { min-height: 124px; padding: 14px 12px; }
  .ctile b { font-size: 14px; }
  .pgt::after { width: 58px; }
}

/* ---------- To'lov oynasi (karta orqali, admin tasdiqlaydi) ---------- */
.pay-amt { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.pay-amt small { display: block; color: var(--mute); font-weight: 650; font-size: 12.5px; margin-bottom: 4px; }
.pay-amt b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pay-amt b em { font-style: normal; font-size: 15px; font-weight: 650; color: var(--ink2); margin-left: 6px; letter-spacing: 0; }
.pay-id { flex: none; font-size: 12px; font-weight: 750; color: var(--brand); background: var(--brand-soft); padding: 6px 10px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.pay-exact { display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink2); margin: 8px 0 14px; }
.pay-exact .i { width: 16px; height: 16px; color: var(--sun); flex: none; }
.paycard { width: 100%; min-height: 176px; text-align: left; color: #fff; padding: 16px 18px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  background: var(--facets) right center / cover no-repeat, linear-gradient(125deg, #0A3CD8 0%, #0A7BFF 58%, #22BBFF 118%);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.paycard:active { filter: brightness(.95); }
.pc-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; min-height: 26px; }
.pc-top .i { width: 26px; height: 26px; opacity: .9; }
.pc-num { font-size: clamp(18px, 5.9vw, 23px); font-weight: 750; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .14); }
.pc-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pc-bot small { display: block; opacity: .78; font-size: 11px; font-weight: 600; margin-bottom: 3px; }
.pc-bot b { font-size: 15px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.pc-cp { flex: none; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 700; padding: 8px 11px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.pc-cp .i { width: 15px; height: 15px; }
.pay-steps { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 11px; }
.pay-steps li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 14px; line-height: 1.4; }
.pay-steps i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: var(--grad); color: #fff; font-style: normal; font-weight: 800; font-size: 12.5px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.pay-steps span { padding-top: 2px; }
.pay-safe { display: flex; gap: 8px; font-size: 12px; color: var(--mute); font-weight: 550; line-height: 1.45; margin: 14px 2px 0; }
.pay-safe .i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pay-x { margin-top: 8px; text-align: center; }
.pay-x .desc { margin: 8px 0 12px; font-size: 13.5px; }
.pay-x2 { display: flex; gap: 10px; }
.lnk-bad { color: var(--bad); font-weight: 700; font-size: 13.5px; padding: 12px 10px; }
.pay-pend { margin: 12px 12px 0; display: grid; gap: 8px; }
.pp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; background: var(--warn-soft); color: var(--warn); font: inherit;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.pp > .i { width: 22px; height: 22px; flex: none; }
.pp .tx { flex: 1; min-width: 0; }
.pp .tx b { display: block; color: var(--ink); font-weight: 750; font-size: 15px; }
.pp .tx small { color: var(--ink2); font-weight: 550; font-size: 12.5px; }
.pp em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--brand); flex: none; }

/* ---------- Qidiruv: natijalar sahifasi va takliflar ---------- */
.lst-sub .chip em { font-style: normal; font-weight: 600; font-size: 11.5px; opacity: .6; margin-left: 1px; }
.lst-sub .chip[aria-pressed=true] em { opacity: .85; }
.lst-qf { display: flex; gap: 8px; overflow-x: auto; padding: 2px 12px 12px; scrollbar-width: none; background: var(--bg); }
.lst-qf::-webkit-scrollbar { display: none; }
.lst-sub:not([hidden]) + .lst-qf { padding-top: 0; }
.lst-qf .chip.qf { height: 32px; padding: 0 15px 0 12px; font-size: 12.5px; flex: none; background: var(--bg2); }
.lst-qf .chip.qf .i { width: 15px; height: 15px; color: var(--brand); }
.lst-qf .chip.qf[aria-pressed=true] { background: var(--gradf); color: #fff; }
.lst-qf .chip.qf[aria-pressed=true] .i { color: #fff; }
.lst-bar > span b { color: var(--ink); font-weight: 750; font-size: 14px; letter-spacing: -.1px; }
.lst-note { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.lst-note:not([hidden]) { padding-bottom: 10px; }
.lst-note .note { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px 11px 12px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--ink2); font-weight: 550; }
.lst-note .note > .i { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--brand); }
.lst-note .note.fix { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, var(--line)); background: var(--brand-soft); }
.lst-note .note .tx { min-width: 0; }
.lst-note .note b { display: block; color: var(--ink); font-weight: 700; font-size: 13.5px; word-break: break-word; }
.lst-note .note button { margin-top: 4px; color: var(--brand); font-weight: 680; font-size: 13px; text-align: left; padding: 3px 0; }
:root[data-theme=dark] .lst-note .note button, :root[data-theme=dark] .lst-note .note > .i { color: #8DB4FF; }
.ls-empty { padding-top: 30px; }
.ls-empty .tips { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 300px; text-align: left; font-size: 13.5px; line-height: 1.4; color: var(--ink2); font-weight: 550; }
.ls-empty .tips li { position: relative; padding: 6px 0 6px 20px; }
.ls-empty .tips li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 9px; height: 9px; background: var(--gradf); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ls-empty .try { margin-top: 22px; }
.ls-empty .try small { display: block; font-size: 12px; font-weight: 650; color: var(--mute); margin-bottom: 10px; }
.ls-empty .try .chips { justify-content: center; flex-wrap: wrap; display: flex; gap: 8px; }
.sg.dym .si { background: var(--gsun); color: #fff; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); border-radius: 0; }
.sg.dym b { color: var(--ink); white-space: normal; }
.sg.cp .si { background: none; width: 34px; }
.sg.cp b { font-weight: 560; }
.sg mark { font-weight: 750; }
:root[data-theme=dark] .chip.on, :root[data-theme=dark] .chip[aria-pressed=true] { color: #fff; }
:root[data-theme=dark] .afl .chip { color: #8DB4FF; }
:root[data-theme=dark] .lst-qf .chip.qf .i { color: #8DB4FF; }
:root[data-theme=dark] .lst-qf .chip.qf[aria-pressed=true] .i { color: #fff; }
:root[data-theme=dark] .sg mark { color: #8DB4FF; }

/* =====================================================================
   Tez Go v6 — VIP tarif (oltin belgi, ism shrifti), Support profili, stories,
   e'lon variantlari, xarita va manzil
   ===================================================================== */
@font-face { font-family: 'TezGo Name'; src: url(fonts/lora-italic.woff) format('woff'); font-weight: 400 700; font-style: italic; font-display: swap; }
:root { --g1: #FFE794; --g2: #FFD34D; --g3: #F7B50C; --g4: #E08F00; --g5: #7A4A00; --gink: #3A2500;
  --ggrad: linear-gradient(115deg, rgba(255, 255, 255, .38) 0 28%, rgba(255, 255, 255, 0) 28%), linear-gradient(135deg, #FFD34D 0%, #F7A400 100%); }

/* ---------- Oltin animatsiyali galochka ---------- */
.vf.gold { width: 18px; height: 18px; flex: none; vertical-align: -3px; transform-origin: 50% 50%; animation: goldBeat 2.8s ease-in-out infinite; }
.vf.gold.lg { width: 30px; height: 30px; } .vf.gold.card { width: 42px; height: 42px; } .vf.gold.btn { width: 22px; height: 22px; } .vf.gold.xl { width: 96px; height: 96px; }
@keyframes goldBeat { 0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 1.5px rgba(247, 181, 12, .5)); } 45% { transform: scale(1.13) rotate(-4deg); filter: drop-shadow(0 0 6px rgba(255, 196, 40, .95)); } 70% { transform: scale(1) rotate(2deg); } }
.vf.gold.xl { filter: drop-shadow(0 10px 18px rgba(120, 70, 0, .4)); animation: goldPop .7s cubic-bezier(.2, 1.4, .4, 1) both, goldBeat 3.2s 0.8s ease-in-out infinite; }
@keyframes goldPop { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vf.gold, .vf.gold.xl { animation: none; } }

/* ---------- Chiroyli ism shrifti ---------- */
.vipn { font-family: 'TezGo Name', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 1.07em; letter-spacing: .1px; padding-right: 1px;
  color: #A36300; background: linear-gradient(100deg, #8F5600 0%, #B97300 28%, #E6A300 46%, #B97300 64%, #8F5600 100%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: goldText 5s linear infinite; }
@keyframes goldText { from { background-position: 120% 0; } to { background-position: -120% 0; } }
:root[data-theme=dark] .vipn, .stv .vipn, .vip-hero .vipn { color: #FFC93C; background-image: linear-gradient(100deg, #FFB300 0%, #FFD966 30%, #FFF3C2 46%, #FFD966 62%, #FFB300 100%); }
@media (prefers-reduced-motion: reduce) { .vipn { animation: none; } }

/* ---------- Kartalarda ---------- */
.tg-gold { background: var(--ggrad); color: var(--gink); }
.tg-gold .i { color: var(--gink); }
.vtag.gold { background: #FFF6D6; box-shadow: 0 3px 10px rgba(180, 110, 0, .4); }
.vtag.gold svg { animation: goldBeat 2.8s ease-in-out infinite; }
:root[data-theme=dark] .vtag.gold { background: #3A2A06; }
.shop-b.gold { background: var(--ggrad); color: var(--gink); box-shadow: none; }
.vf-chip.gold { background: linear-gradient(135deg, #FFF6D6, #FFE29A); color: #6B4200; box-shadow: inset 0 0 0 1.5px rgba(224, 143, 0, .5); }
.vf-chip.gold .vf { margin: 0; }
.sell.vip, .shop-r.vip { box-shadow: inset 0 0 0 1.5px rgba(247, 181, 12, .55); background: linear-gradient(135deg, rgba(255, 211, 77, .13), rgba(255, 211, 77, 0) 60%), var(--bg); }
.seller-h.vip { background: linear-gradient(180deg, rgba(255, 211, 77, .18), rgba(255, 211, 77, 0) 70%), var(--bg); }
@property --ga { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes gaSpin { to { --ga: 360deg; } }
.av-ring { display: block; margin: 4px auto 10px; width: 92px; height: 92px; padding: 6px; position: relative; }
.av-ring::before, .stc .sring::before { content: ''; position: absolute; inset: 0; clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px); background: conic-gradient(from var(--ga), #C98A00, #FFD34D, #FFF1B0, #F7B50C, #C98A00); animation: gaSpin 5s linear infinite; }
.av-ring::after, .stc .sring::after { content: ''; position: absolute; inset: 3px; clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 21px), calc(100% - 21px) 100%, 21px 100%, 0 calc(100% - 21px), 0 21px); background: var(--bg); }
.seller-h.vip .av-ring::after { background: #FFF9E6; }
.av-ring:not(.new)::before, .stc:not(.new) .sring::before, .stc.add .sring::before { background: var(--line); animation: none; }
.av-ring .av { position: relative; z-index: 1; margin: 0; width: 100%; height: 100%; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .av-ring::before, .stc .sring::before { animation: none; } }

/* ---------- Tugma ---------- */
.btn-gold { background: var(--ggrad); color: var(--gink); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
.btn-gold .i { color: var(--gink); }
.btn-gold:disabled { opacity: .5; }

/* ---------- VIP sahifasi (ko'k: TOP + VIP yorlig'i) ---------- */
:root { --vb-a: #2F8CFF; --vb-b: #0A5BFF; --vb-c: #1636C8; --vgrad: linear-gradient(135deg, #2F8CFF 0%, #0A5BFF 55%, #1B3CE0 100%); }
.vip-mark { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; vertical-align: -4px; background: var(--vgrad); color: #fff;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.vip-mark .i { width: 62%; height: 62%; --sw: 20; }
.vip-mark.xs { width: 15px; height: 15px; } .vip-mark.lg { width: 30px; height: 30px; } .vip-mark.btn { width: 24px; height: 24px; background: #fff; color: var(--vb-b); }
.vip-mark.card { width: 42px; height: 42px; } .vip-mark.xl { width: 96px; height: 96px; filter: drop-shadow(0 10px 16px rgba(5, 30, 120, .45)); animation: goldPop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.vip-hero { position: relative; margin: 0; padding: 26px 22px 24px; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, rgba(120, 190, 255, .55) 0%, rgba(120, 190, 255, 0) 62%), linear-gradient(160deg, #1E78FF 0%, #0A4BE0 60%, #1636C8 130%); border-radius: 0 0 14px 14px; }
.vip-hero::before, .vip-hero::after { content: ''; position: absolute; background: rgba(255, 255, 255, .12); pointer-events: none; }
.vip-hero::before { width: 240px; height: 240px; left: -90px; top: -110px; clip-path: polygon(0 0, 100% 0, 38% 100%); }
.vip-hero::after { width: 200px; height: 200px; right: -70px; bottom: -80px; background: rgba(255, 255, 255, .09); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.vip-hero .seal { position: relative; width: 112px; height: 112px; margin: 0 auto 12px; display: grid; place-items: center; }
.vip-hero .seal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 68%); animation: sealGlow 3.2s ease-in-out infinite; }
.vip-hero .seal .vf, .vip-hero .seal .vip-mark { position: relative; }
.vip-hero h2 { position: relative; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.vip-hero p { position: relative; margin: 8px auto 0; max-width: 330px; font-size: 14px; line-height: 1.5; font-weight: 600; color: rgba(255, 255, 255, .92); }
.vip-price { position: relative; display: inline-flex; align-items: baseline; gap: 7px; margin-top: 16px; padding: 10px 18px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.vip-price b { font-size: 30px; font-weight: 800; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.vip-price span { font-size: 13.5px; font-weight: 700; opacity: .9; }
.vf-st.vip { background: linear-gradient(135deg, #E8F1FF, #D6E6FF); box-shadow: inset 0 0 0 1.5px rgba(10, 91, 255, .3); }
.vf-st.vip b { color: #0A3CB0; } .vf-st.vip p { color: #3A5FA8; }
.vf-prev.vip { box-shadow: inset 0 0 0 1.5px rgba(10, 91, 255, .35); background: linear-gradient(135deg, rgba(10, 91, 255, .09), rgba(10, 91, 255, 0) 60%), var(--bg); }
.vf-prev.vip b { font-size: 17px; gap: 6px; }
.gtag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 6px; background: var(--vgrad); color: #fff; font-size: 11.5px; font-weight: 800; flex: none;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.gtag .i { width: 14px; height: 14px; }
.vf-b.vb .mk { background: var(--vgrad); }
.vf-b.vb .mk .i { color: #fff; }
.vf-more { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 12px 16px 0; padding: 12px 14px; text-align: left; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.vf-more .vf { width: 30px; height: 30px; flex: none; }
.vf-more .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vf-more b { font-size: 14.5px; font-weight: 750; } .vf-more small { font-size: 12.5px; color: var(--mute); font-weight: 550; line-height: 1.35; }
.vf-more > .i { width: 18px; height: 18px; color: var(--mute); flex: none; }
.vip-ok { width: 110px; height: 110px; margin: 6px auto 12px; display: grid; place-items: center; position: relative; }
.vip-ok::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(60, 140, 255, .45) 0%, rgba(60, 140, 255, 0) 68%); animation: sealGlow 3s ease-in-out infinite; }
.vf-pc.vip { background: linear-gradient(135deg, #E3EEFF 0 62%, #CFE0FF 62%); }
.vf-pc.vip.on { background: linear-gradient(135deg, #E3EEFF 0 62%, #CFE0FF 62%); box-shadow: none; }
.vf-pc.vip .go { background: var(--vgrad); color: #fff; }
.vf-pc.vip b { color: #0A3CB0; } .vf-pc.vip small { color: #3A5FA8; }
.vf-pc.vip > .i { color: #3A5FA8; }
.vf-pc.vip.gold-pc, .vf-pc.vip.gold-pc.on { background: linear-gradient(135deg, #FFF3C4 0 62%, #FFE08A 62%); }
.vf-pc.vip.gold-pc b { color: #5A3600; } .vf-pc.vip.gold-pc small { color: #7A5410; } .vf-pc.vip.gold-pc > .i { color: #7A5410; }
:root[data-theme=dark] .vf-pc.vip, :root[data-theme=dark] .vf-pc.vip.on { background: linear-gradient(135deg, #10285A 0 62%, #16337A 62%); }
:root[data-theme=dark] .vf-pc.vip b { color: #9CC4FF; } :root[data-theme=dark] .vf-pc.vip small { color: #7FA6E6; }
:root[data-theme=dark] .vf-pc.vip.gold-pc, :root[data-theme=dark] .vf-pc.vip.gold-pc.on { background: linear-gradient(135deg, #3A2B07 0 62%, #4A3509 62%); }
:root[data-theme=dark] .vf-pc.vip.gold-pc b { color: #FFD966; } :root[data-theme=dark] .vf-pc.vip.gold-pc small { color: #D9BE7A; }
:root[data-theme=dark] .vf-st.vip { background: linear-gradient(135deg, #10285A, #16337A); box-shadow: inset 0 0 0 1.5px rgba(80, 150, 255, .35); }
:root[data-theme=dark] .vf-st.vip b { color: #9CC4FF; } :root[data-theme=dark] .vf-st.vip p { color: #7FA6E6; }
:root[data-theme=dark] .sell.vip, :root[data-theme=dark] .shop-r.vip { background: linear-gradient(135deg, rgba(255, 211, 77, .1), rgba(255, 211, 77, 0) 60%), var(--bg); }
.btn-vip { background: var(--vgrad); color: #fff; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
.btn-vip .i { color: #fff; }
.tg-vb { background: var(--vgrad); color: #fff; }
.shop-b.vb { background: var(--vgrad); color: #fff; box-shadow: none; }
.vf-chip.vb { background: linear-gradient(135deg, #E3EEFF, #CFE0FF); color: #0A3CB0; box-shadow: inset 0 0 0 1.5px rgba(10, 91, 255, .35); display: inline-flex; align-items: center; gap: 5px; }
.vf-chip.vb .vip-mark { vertical-align: 0; }
.chips-c { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.seller-act { flex-wrap: wrap; }

/* ---------- Stories (bosh sahifa qatori) ---------- */
#homeStories:empty { display: none; }
.stories { display: flex; gap: 12px; overflow-x: auto; padding: 10px 14px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.stories::-webkit-scrollbar { display: none; }
.stc { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.stc .sring { position: relative; width: 72px; height: 72px; padding: 6px; display: grid; place-items: center; }
.stc .sring .av, .stc .sring .pl { position: relative; z-index: 1; width: 60px; height: 60px; font-size: 19px; border-radius: 0; box-shadow: none; clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px); }
.stc .sring .gb { position: absolute; right: -4px; bottom: -4px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(60, 40, 0, .25); }
.stc .sring .gb .vf { width: 20px; height: 20px; }
.stc .sring .pl { background: var(--bg2); display: grid; place-items: center; color: var(--brand); }
.stc .sring .pl .i { width: 26px; height: 26px; }
.stc small { max-width: 78px; font-size: 11.5px; line-height: 1.2; font-weight: 650; color: var(--ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.stc.add small { color: var(--brand); }

/* ---------- Stories ko'rish oynasi ---------- */
.pg[data-kind=story] { background: #05070F; z-index: 70; }
.stv { position: absolute; inset: 0; overflow: hidden; color: #fff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stv-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(36px) saturate(1.3) brightness(.5); transform: scale(1.1); }
.stv-m { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--sat) + 70px) 0 calc(var(--sab) + 104px); }
.stv-m img { max-width: 100%; max-height: 100%; object-fit: contain; animation: stvIn .35s ease both; }
@keyframes stvIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.stv-sh { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7)); }
.stv-bars { position: absolute; left: 10px; right: 10px; top: calc(var(--sat) + 8px); display: flex; gap: 4px; z-index: 3; }
.stv-bars i { flex: 1; height: 3px; background: rgba(255, 255, 255, .32); border-radius: 3px; overflow: hidden; }
.stv-bars i b { display: block; width: 0; height: 100%; background: #fff; }
.stv-bars i.done b { width: 100%; }
.pg.run .stv-bars i.is-cur b { animation: stvFill var(--d) linear forwards; }
.pg.hold .stv-bars i.is-cur b { animation-play-state: paused; }
@keyframes stvFill { from { width: 0; } to { width: 100%; } }
.stv-h { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 20px); display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; z-index: 4; }
.stv-u { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #fff; text-align: left; }
.stv-u .tx { min-width: 0; display: flex; flex-direction: column; }
.stv-u b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stv-u small { font-size: 12px; opacity: .8; font-weight: 600; }
.stv-nav { position: absolute; top: calc(var(--sat) + 76px); bottom: calc(var(--sab) + 96px); z-index: 2; background: none; -webkit-tap-highlight-color: transparent; }
.stv-nav.l { left: 0; width: 34%; } .stv-nav.r { right: 0; width: 66%; }
.stv-ft { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(var(--sab) + 16px); z-index: 4; }
.stv-ft .cap { font-size: 15px; line-height: 1.45; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); margin-bottom: 10px; max-height: 96px; overflow: hidden; }
.stv-ft .stv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.stv-ft .stv-vw { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; opacity: .9; }
.stv-ft .stv-vw .i { width: 18px; height: 18px; }
.st-pick { width: 100%; aspect-ratio: 9 / 12; max-height: 46vh; background: var(--bg2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--brand); font-weight: 700; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line); }
.st-pick .i { width: 34px; height: 34px; }
.st-pick.has { padding: 0; background: #000; }
.st-pick.has img, .st-pick.has video { width: 100%; height: 100%; object-fit: contain; }
.st-pick { position: relative; }
.pv-b { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; background: rgba(8, 14, 36, .55); color: #fff; pointer-events: none;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.pv-b .i { width: 24px; height: 24px; }
.stv-m video { max-width: 100%; max-height: 100%; width: 100%; object-fit: contain; animation: stvIn .35s ease both; background: transparent; }

/* ---------- Xarita ---------- */
.tmap { position: relative; overflow: hidden; background: linear-gradient(#D5DDEA 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, #D5DDEA 1px, transparent 1px) 0 0 / 64px 100%, #E8EDF4; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.tmap.drag { cursor: grabbing; }
.tm-l { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.tm-l img { position: absolute; width: 256px; height: 256px; max-width: none; opacity: 0; transition: opacity .25s; pointer-events: none; -webkit-user-drag: none; }
.tm-l img.ok { opacity: 1; }
.tm-pin { position: absolute; left: 50%; top: 50%; width: 36px; height: 47px; margin: -47px 0 0 -18px; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(8, 30, 90, .4)); z-index: 3; }
.tm-pin svg { display: block; width: 100%; height: 100%; }
.tm-pin.pick { transition: transform .15s; }
.tmap.drag .tm-pin.pick { transform: translateY(-9px); }
.tm-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 4px; margin: -2px 0 0 -5px; border-radius: 50%; background: rgba(8, 30, 90, .35); z-index: 2; pointer-events: none; }
.tm-z { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.tm-z button { width: 38px; height: 38px; background: #fff; color: #0E1630; font-size: 22px; font-weight: 600; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.tm-at { position: absolute; right: 0; bottom: 0; z-index: 4; padding: 2px 7px; font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, .8); color: #394563; text-decoration: none; }
.geo-b { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.geo-map { flex: 1; min-height: 240px; }
.geo-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; background: var(--bg); }
.geo-xy { min-width: 0; } .geo-xy small { display: block; font-size: 12px; font-weight: 600; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-xy b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.geo-h { flex: none; display: flex; gap: 8px; align-items: flex-start; padding: 0 16px 8px; font-size: 12.5px; color: var(--mute); line-height: 1.4; font-weight: 550; background: var(--bg); }
.geo-h .i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.geo-f { flex: none; display: flex; gap: 10px; padding: 8px 16px calc(var(--sab) + 14px); background: var(--bg); }
.adr-b h3 { margin-bottom: 8px; }
.adr { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
.adr .i { width: 18px; height: 18px; flex: none; color: var(--brand); margin-top: 1px; }
.tmap-s { height: 150px; width: 100%; margin: 0 0 10px; cursor: pointer; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.tmap-s .tm-pin { transform: scale(.8); transform-origin: 50% 100%; }
.adr-act { display: flex; gap: 10px; } .adr-act .btn { flex: 1; }
.geo-fld { margin-top: 12px; }

/* ---------- Variantlar: tahrirlash ---------- */
.var-h { font-size: 12.5px; color: var(--mute); font-weight: 550; line-height: 1.4; margin: -4px 0 10px; }
.vg { padding: 12px; margin-bottom: 10px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.vg-h { display: flex; gap: 8px; align-items: center; }
.vg-h .inp { flex: 1; font-weight: 700; }
.vg-pre { margin: 10px 0 2px; }
.vpal { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.vsw { width: 34px; height: 34px; background: var(--vc); position: relative; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .16); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.vsw.on::after { content: ''; position: absolute; left: 11px; top: 8px; width: 9px; height: 15px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(40deg); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .65)); }
.vo { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.vo-r { display: flex; gap: 8px; align-items: center; }
.vo-r .inp { height: 42px; min-width: 0; flex: 1; }
.vo-r .inp.vp { flex: 0 0 118px; padding-left: 10px; padding-right: 10px; }
.vo-c { position: relative; width: 42px; height: 42px; flex: none; background: var(--vc); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18); overflow: hidden;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.vo-c input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vo-x { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; margin-top: 8px; }
.vo-ph { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.vph { position: relative; width: 54px; height: 54px; flex: none; overflow: hidden; background: var(--bg3); box-shadow: inset 0 0 0 1.5px var(--line);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.vph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vph .rm { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: grid; place-items: center; background: rgba(8, 14, 36, .62); color: #fff; border-radius: 50%; }
.vph .rm .i { width: 12px; height: 12px; --sw: 24; }
.vph.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--brand); background: var(--brand-soft); }
.vph.add .i { width: 22px; height: 22px; } .vph.add small { font-size: 10px; font-weight: 700; }
.vo-x .chip { flex: none; }
.vo-x .chip[aria-pressed=false] { background: var(--bad-soft); color: var(--bad); }

/* ---------- Variantlar: xaridor tanlovi ---------- */
.vr-g { margin-bottom: 14px; } .vr-g:last-child { margin-bottom: 0; }
.vr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13.5px; color: var(--mute); font-weight: 650; }
.vr-h b { color: var(--ink); font-weight: 700; font-size: 14.5px; text-align: right; }
.vr-h b em { font-style: normal; color: var(--bad); font-size: 12px; font-weight: 700; }
.vr-o { display: flex; flex-wrap: wrap; gap: 10px; }
.vc { width: 38px; height: 38px; background: var(--vc); position: relative; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.vc.on { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18), 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); border-radius: 2px; }
.vc.on::after { content: ''; position: absolute; left: 13px; top: 8px; width: 9px; height: 16px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(40deg); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); }
.vc.off::before, .vt.off::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(229, 48, 43, .9) 50%, transparent calc(50% + 1px)); pointer-events: none; }
.vc.off { opacity: .5; }
.vt { position: relative; min-height: 38px; padding: 6px 15px; background: var(--bg2); font-weight: 700; font-size: 14px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.vt small { font-size: 11px; font-weight: 600; color: var(--mute); }
.vt.on { background: var(--gradf); color: #fff; } .vt.on small { color: rgba(255, 255, 255, .85); }
.vt.off { opacity: .55; }

/* Qorong'i mavzuda xarita ko'zni qamashtirmasin */
:root[data-theme=dark] .tmap { filter: brightness(.82) contrast(1.05); }
:root[data-theme=dark] .tmap .tm-pin, :root[data-theme=dark] .tmap .tm-z, :root[data-theme=dark] .tmap .tm-at { filter: brightness(1.2); }

.vi { position: relative; width: 74px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; padding: 0; background: none; }
.vi img { width: 74px; height: 74px; object-fit: cover; display: block; background: var(--bg3); box-shadow: inset 0 0 0 1.5px var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.vi span { font-size: 12px; font-weight: 650; line-height: 1.2; color: var(--ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.vi small { font-size: 10.5px; font-weight: 600; color: var(--mute); }
.vi.on span { color: var(--brand); font-weight: 750; }
.vi.on img { filter: none; outline: 2.5px solid var(--brand); outline-offset: -2.5px; }
.vi.off { opacity: .55; }
.vi.off::before { content: ''; position: absolute; left: 0; top: 0; width: 74px; height: 74px; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(229, 48, 43, .9) 50%, transparent calc(50% + 1px)); pointer-events: none; z-index: 1; }

/* ---------- Galereya: variant yorlig'i, video ---------- */
.gal-v { position: absolute; left: 12px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 110px); padding: 6px 8px 6px 12px; background: rgba(8, 14, 36, .66); color: #fff; font-size: 12.5px; font-weight: 700;
  backdrop-filter: blur(6px); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-v .i { width: 14px; height: 14px; flex: none; }
.gal-v.vid { padding: 6px 12px 6px 9px; background: var(--vgrad); } .gal-v.vid .i { width: 13px; height: 13px; }
.gal.swap .gal-s { animation: galSwap .35s ease both; }
@keyframes galSwap { from { opacity: .2; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.gv { background: #000 !important; display: flex; align-items: center; justify-content: center; }
.gv video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.thumbs .isv { position: relative; } .thumbs .isv img { background: #0E1630; }
.thumbs .isv i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(8, 14, 36, .35); }
.thumbs .isv i .i { width: 18px; height: 18px; }
.pv { position: absolute; left: 7px; bottom: 8px; width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: rgba(8, 14, 36, .6); backdrop-filter: blur(6px);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.pv .i { width: 12px; height: 12px; }
.ph:has(.tags) .pv { bottom: 8px; }

/* ---------- Video tanlash (e'lon formasi) ---------- */
.vid-pick { width: 100%; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--bg2); color: var(--brand); font-weight: 700; font-size: 13.5px; box-shadow: inset 0 0 0 1.5px var(--line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.vid-pick .i { width: 28px; height: 28px; }
.vid-pick.busy { color: var(--mute); }
.vid-prev video { width: 100%; max-height: 260px; background: #000; display: block; object-fit: contain;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.vid-act { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.vid-act > span { display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 100px; font-size: 13px; font-weight: 650; color: var(--ink2); }
.vid-act > span .i { width: 17px; height: 17px; color: var(--ok); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }

/* ================= E'lon sahifasi yuqori qismi (v7): "plyonka" va narx-plastinka ================= */
/* Kichik rasmlar: tanlangani kengayadi (harmonika), qolganlari ingichka qirrali plitalar */
.thumbs { gap: 6px; padding: 12px 14px 2px; justify-content: flex-start; align-items: stretch; scroll-snap-type: none; background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%); }
.thumbs button { width: 46px; height: 58px; padding: 0; opacity: .62; transform: none; background: var(--bg3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: width .38s cubic-bezier(.3, 1.2, .4, 1), opacity .2s, background .2s; }
.thumbs button:first-child, .thumbs button:last-child { margin-left: 0; margin-right: 0; }
.thumbs button img { clip-path: none; display: block; }
.thumbs button.on { width: 96px; padding: 2.5px; opacity: 1; transform: none; background: var(--gradf); }
.thumbs button.on img { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.thumbs button:active { transform: scale(.96); }
.thumbs .isv i { clip-path: none; }

/* Narx-plastinka: qirrali, gradient hoshiyali, yengil soyali */
.dt { padding: 10px 14px 4px; background: var(--bg); }
.dplate-w { filter: drop-shadow(0 10px 16px rgba(12, 32, 96, .10)); }
:root[data-theme=dark] .dplate-w { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); }
.dplate { padding: 1.5px; background: linear-gradient(135deg, var(--brand) 0%, #62B0FF 30%, var(--line) 56%, var(--line) 100%);
  clip-path: polygon(22px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 7px 100%, 0 calc(100% - 7px), 0 22px); }
.dplate-in { padding: 16px 16px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 70%, var(--bg)) 0, var(--bg) 140px);
  clip-path: polygon(21px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 21px), calc(100% - 21px) 100%, 6px 100%, 0 calc(100% - 6px), 0 21px); }
.dplate .dt-top { margin-bottom: 12px; }
.dplate .big b { font-size: 31px; line-height: 1.05; }
.dplate h1 { margin-top: 10px; font-size: 18px; line-height: 1.3; }

.dfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed var(--line); }
.dfacts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dtf { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 10px 10px 9px; background: var(--bg2);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.dtf.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; }
.dtf > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.dtf small { font-size: 10.5px; font-weight: 650; color: var(--mute); line-height: 1.15; }
.dtf b { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -.1px; }
.dtf.wide b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtf-k { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--gradf);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.dtf-k .i { width: 16px; height: 16px; }
.dtf.wide .dtf-k { width: 34px; height: 34px; } .dtf.wide .dtf-k .i { width: 18px; height: 18px; }
.dtf-k.pin { background: var(--gsun); color: #3A1D00; }
.dtf-k.t { background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 30%, rgba(255, 255, 255, 0) 30%), linear-gradient(135deg, #6B4DFF, #A48BFF); }
.dtf-k.v { background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 30%, rgba(255, 255, 255, 0) 30%), linear-gradient(135deg, #12A56E, #45D6A0); }
.dtf-k.h { background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 30%, rgba(255, 255, 255, 0) 30%), linear-gradient(135deg, #F0407E, #FF86B0); }
.home-viewed { margin-top: 6px; padding-bottom: 12px; }