/* Telegram uslubi: yorug' tema standart, qorong'i tema tizim sozlamasi yoki tugma orqali */
:root {
  --bg: #f1f2f6;
  --panel: #ffffff;
  --panel-2: #f4f4f5;
  --hover: #f4f4f5;
  --line: #e7e8ec;
  --text: #000000;
  --muted: #707579;
  --accent: #3390ec;
  --accent-2: #2b7fd4;
  --accent-soft: rgba(51,144,236,.1);
  --ok: #31b545;
  --warn: #e5a50a;
  --err: #e53935;
  --shadow: 0 1px 2px rgba(16,35,47,.08), 0 2px 8px rgba(16,35,47,.06);
  --hero: linear-gradient(135deg, #3fa9f5 0%, #3390ec 45%, #2a6fdb 100%);
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f; --panel: #212121; --panel-2: #2c2c2c; --hover: #2c2c2c; --line: #303030;
    --text: #ffffff; --muted: #aaaaaa; --accent: #3390ec; --accent-2: #4ea4f6; --accent-soft: rgba(51,144,236,.16);
    --ok: #5ccb6b; --warn: #f5b83d; --err: #ff5c5c;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --hero: linear-gradient(135deg, #1d5fa8 0%, #2268c4 50%, #1a4e9a 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f0f; --panel: #212121; --panel-2: #2c2c2c; --hover: #2c2c2c; --line: #303030;
  --text: #ffffff; --muted: #aaaaaa; --accent: #3390ec; --accent-2: #4ea4f6; --accent-soft: rgba(51,144,236,.16);
  --ok: #5ccb6b; --warn: #f5b83d; --err: #ff5c5c;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --hero: linear-gradient(135deg, #1d5fa8 0%, #2268c4 50%, #1a4e9a 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* header */
.top { background: var(--panel); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 12px; height: 56px; }
.logo { font-weight: 700; font-size: 18px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.logo:hover { text-decoration: none; }
.logo i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #41b4f5, #2a9be0); color: #fff; display: grid; place-items: center; }
.logo i .ic { width: 19px; height: 19px; margin-left: -2px; transition: transform .5s var(--spring); }
.logo:hover i .ic { transform: translate(3px, -3px) rotate(-8deg); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a, .nav button { color: var(--muted); padding: 8px 12px; border-radius: 10px; font: 500 14px/1 inherit; font-family: inherit; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav button:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.nav a.on { color: var(--accent); }
.bal { color: var(--accent) !important; background: var(--accent-soft) !important; font-weight: 600 !important; border-radius: 999px !important; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-icon-light { display: none; }

/* elements */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 11px 20px; font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s, transform .1s; }
.btn:hover { background: var(--accent-2); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); filter: brightness(.95); }
.btn.white { background: #fff; color: #2a6fdb; }
.btn.white:hover { background: #f0f6ff; }
.btn.outline-white { background: rgba(255,255,255,.14); color: #fff; }
.btn.outline-white:hover { background: rgba(255,255,255,.24); }
.btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; }
.btn.block { width: 100%; padding: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
input, select, textarea { background: var(--panel-2); color: var(--text); border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; font: inherit; width: 100%; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--panel); }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 500; }
.card { background: var(--panel); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
h1 { font-size: 28px; margin: 28px 0 6px; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 0 0 14px; }
.tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.tag.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.tag.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tag.err { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.tag.prem { color: #8f62f0; background: rgba(143,98,240,.12); }

.flash { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); border-left: 4px solid var(--accent); }
.flash.ok { border-left-color: var(--ok); }
.flash.error { border-left-color: var(--err); }
.demo { background: color-mix(in srgb, var(--warn) 16%, var(--panel)); color: var(--text); text-align: center; font-size: 13px; padding: 6px 16px; }

/* hero */
.hero { margin: 20px 0 0; border-radius: 22px; background: var(--hero); color: #fff; padding: 44px 40px; position: relative; overflow: hidden; }
.hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 12px; max-width: 620px; letter-spacing: -.02em; }
.hero p { margin: 0 0 24px; font-size: 17px; opacity: .9; max-width: 520px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .how-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: rgba(255,255,255,.92); font-size: 14px; font-weight: 500; }
.hero .how-link:hover { color: #fff; }
.hero-stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats b { display: block; font-size: 26px; font-weight: 700; }
.hero-stats span { font-size: 13px; opacity: .8; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 0; }
.how .card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.how .n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 17px; }
.how b { display: block; margin-bottom: 2px; }
.how p { margin: 0; color: var(--muted); font-size: 13px; }

/* katalog: Telegram chatlar ro'yxati */
.cat-head { display: flex; align-items: end; justify-content: space-between; margin: 34px 0 12px; gap: 12px; }
.cat-head h2 { font-size: 22px; margin: 0; }
.filters { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.filters label { margin-top: 0; }
.chats { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.chat { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 12px; color: var(--text); }
.chat:hover { background: var(--hover); text-decoration: none; }
.ava { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.ava .flag { width: 100%; height: 100%; }
.pr { position: absolute; right: -2px; bottom: -2px; width: 21px; height: 21px; border-radius: 50%; background: linear-gradient(135deg, #a77bff, #6b8cff); color: #fff; display: grid; place-items: center; border: 2px solid var(--panel); }
.pr .ic { width: 12px; height: 12px; animation: twinkle 3.2s var(--ease) infinite; }
.g0 { background: linear-gradient(180deg, #ff885e, #ff516a); }
.g1 { background: linear-gradient(180deg, #ffcd6a, #ffa85c); }
.g2 { background: linear-gradient(180deg, #82b1ff, #665fff); }
.g3 { background: linear-gradient(180deg, #a0de7e, #54cb68); }
.g4 { background: linear-gradient(180deg, #53edd6, #28c9b7); }
.g5 { background: linear-gradient(180deg, #72d5fd, #2a9ef1); }
.g6 { background: linear-gradient(180deg, #e0a2f3, #d669ed); }
.chat .body { flex: 1; min-width: 0; border-bottom: 1px solid var(--line); padding: 4px 0 12px; margin-bottom: -10px; }
.chat:last-child .body { border-bottom-color: transparent; }
.chat .row1, .chat .row2 { display: flex; align-items: center; gap: 8px; }
.chat .row2 { margin-top: 3px; }
.chat .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat .name .star { color: #8f62f0; vertical-align: -2px; }
.chat .pricetag { font-weight: 700; white-space: nowrap; }
.chat .sub { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat .sub .bad { color: var(--err); }
.chat .sub .good { color: var(--ok); }
.chat .go { background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.pager { display: flex; gap: 10px; justify-content: center; margin: 20px 0 40px; }
.empty { text-align: center; padding: 50px 0; color: var(--muted); }

/* layouts */
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 20px 0 40px; }
.narrow { max-width: 420px; margin: 40px auto; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tbl { overflow-x: auto; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.stat b { display: block; font-size: 22px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.big { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.copy { cursor: pointer; border-bottom: 1px dashed var(--muted); }
.code { font: 700 34px ui-monospace, Menlo, monospace; letter-spacing: .15em; color: var(--ok); }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-size: 12px; color: var(--muted); max-width: 380px; }
.steps { margin: 0; padding-left: 18px; color: var(--muted); }
.steps li { margin: 6px 0; }
.steps b { color: var(--text); }
.section { margin: 28px 0; }

/* mobil pastki navigatsiya */
.bnav { display: none; }

@media (max-width: 820px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .btn { grid-column: span 2; }
  .two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .how { grid-template-columns: 1fr; }
  .hero { padding: 30px 22px; border-radius: 18px; }
  .hero h1 { font-size: 30px; }
  .hero-stats { gap: 24px; }
  h1 { font-size: 23px; }
}
@media (max-width: 640px) {
  .nav .desk { display: none; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
  .hero .cta .btn { flex: 1; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .bnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 500; padding: 4px 0; }
  .bnav a:hover { text-decoration: none; }
  .bnav a.on { color: var(--accent); }
  .bnav svg { width: 26px; height: 26px; }
  .ava { width: 48px; height: 48px; }
  .chat { gap: 12px; padding: 8px; }
}

/* ================= Harakat: iOS kabi silliqlik ================= */
:root {
  --ease: cubic-bezier(.32, .72, 0, 1);      /* iOS sheet/navigation egri chizig'i */
  --spring: cubic-bezier(.34, 1.56, .64, 1); /* biroz sakraydigan "prujina" */
}
html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { touch-action: manipulation; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.sm { width: 16px; height: 16px; }
.ic.lg { width: 26px; height: 26px; }
.btn .ic { width: 18px; height: 18px; }

/* Shaffof, xira (blur) panellar: iOS navigatsiya paneli kabi */
.top, .bnav {
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* Bosilganda kichrayish */
.btn, .chat, .bnav a, .icon-btn, .nav a, .how .card, .copy, .row, .copy-btn {
  transition: transform .4s var(--ease), background-color .2s, color .2s, box-shadow .25s, opacity .2s;
}
.btn:active, .chat:active, .icon-btn:active, .how .card:active, .copy:active, .copy-btn:active { transform: scale(.96); transition-duration: .12s; }
.bnav a svg { transition: transform .4s var(--spring); }
.bnav a:active svg { transform: scale(.82); transition-duration: .1s; }
.bnav a.on svg { animation: pop .55s var(--spring); }
.chat:hover .go { transform: translateX(2px); }
.chat .go { transition: transform .4s var(--spring); }
@media (hover: hover) {
  .how .card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,35,47,.1); }
}

/* Paydo bo'lish animatsiyalari */
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes toast { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.35) rotate(18deg); } 90% { transform: scale(.9) rotate(-8deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(.9); opacity: .65; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes flow { to { stroke-dashoffset: -48; } }
@keyframes glow { 50% { transform: scale(1.06); opacity: .75; } }
.rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.flash { animation: toast .55s var(--spring) both; }

/* Sahifalar orasida silliq o'tish (View Transitions API) */
@view-transition { navigation: auto; }
.top { view-transition-name: topbar; }
.bnav { view-transition-name: bottombar; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
/* Tema almashganda: tugmadan aylana bo'lib yoyiladi */
html.theme-vt .top, html.theme-vt .bnav { view-transition-name: none; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.icon-btn svg { transition: transform .6s var(--spring), opacity .3s; }
#themeBtn:active svg { transform: rotate(-40deg) scale(.8); }

/* SVG bayroqlar */
.flag { display: inline-block; border-radius: 50%; background-size: cover; background-position: center; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.flag.nofl { display: grid; place-items: center; background: linear-gradient(180deg, #72d5fd, #2a9ef1); color: #fff; }
.flag.nofl svg { width: 55%; height: 55%; }

.hero-stats b { font-variant-numeric: tabular-nums; }
.hero .cta .btn .ic { transition: transform .4s var(--spring); }
.hero .cta .btn:hover .ic { transform: translateX(3px); }

/* "Qanday ishlaydi" ikonkalari */
.how .n .ic { width: 22px; height: 22px; }
.how .card:hover .n { animation: pop .5s var(--spring); }

/* iOS sozlamalaridek rangli ikonka qatorlari */
.rows { margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 14px; padding: 11px 2px; }
.row + .row { border-top: 1px solid var(--line); }
.row .sq { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.row .sq .ic { width: 18px; height: 18px; }
.row .k { flex: 1; }
.row .v { color: var(--muted); }
.sq.blue { background: #3390ec; } .sq.violet { background: #8f62f0; } .sq.green { background: #31b545; }
.sq.red { background: #e53935; } .sq.orange { background: #f59a23; } .sq.gray { background: #8e8e93; }

/* Profil sarlavhasi (akkaunt sahifasi) */
.profile { text-align: center; margin: 28px 0 4px; }
.profile .pava { position: relative; width: 108px; height: 108px; margin: 0 auto 14px; animation: pop .7s var(--spring) both; }
.profile .pava .flag { width: 100%; height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.profile .pava .pr { width: 32px; height: 32px; border-width: 3px; }
.profile .pava .pr .ic { width: 16px; height: 16px; }
.profile h1 { margin: 0 0 4px; font-size: 26px; }

/* Animatsion holatlar */
.anim-wait, .anim-check { width: 120px; height: 120px; display: block; margin: 4px auto 16px; }
.anim-wait .track { fill: none; stroke: var(--accent-soft); stroke-width: 6; }
.anim-wait .arc { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 80 247; transform-box: fill-box; transform-origin: center; animation: spin 1.3s linear infinite; }
.anim-wait .card-pulse { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: breathe 1.8s ease-in-out infinite; }
.anim-check .bg { fill: color-mix(in srgb, var(--ok) 14%, transparent); transform-box: fill-box; transform-origin: center; animation: pop .6s var(--spring) both; }
.anim-check .ring { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: draw .8s var(--ease) .1s forwards; }
.anim-check .tick { fill: none; stroke: var(--ok); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 72; stroke-dashoffset: 72; animation: draw .45s var(--ease) .65s forwards; }
.center { text-align: center; }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--warn); margin: 8px 0 0; }
.ok-note { color: var(--ok); }
.note .ic { width: 17px; height: 17px; margin-top: 1px; }

/* Kod raqamlari birin-ketin chiqadi */
.code { display: flex; gap: 6px; justify-content: center; letter-spacing: 0; }
.code .d { display: inline-grid; place-items: center; width: 44px; height: 56px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, transparent); animation: rise .5s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 6px 12px; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.copy-btn.done { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.empty .ic { width: 56px; height: 56px; color: var(--muted); opacity: .6; animation: float 3s ease-in-out infinite; }

@media (max-width: 820px) {
}

/* Harakatni kamaytirish sozlamasini hurmat qilamiz */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.bal { white-space: nowrap; }
.nav form.logout { display: inline; }
@media (max-width: 640px) { .nav form.logout { display: none; } }

/* Logo, filtr chiplari, guruh sarlavhalari */
.logo span { letter-spacing: -.01em; font-weight: 600; }
.logo b { color: var(--accent); font-weight: 800; }
.chips { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; margin: 0; cursor: pointer; color: var(--text); font-size: 14px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span, .chip.reset { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); font-weight: 500; transition: background .25s var(--ease), color .25s, transform .35s var(--ease); }
.chip input:checked + span { background: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:active > span, .chip.reset:active { transform: scale(.95); }
.chip.reset { color: var(--muted); text-decoration: none; }
.chip .ic { width: 15px; height: 15px; }
.group-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 18px 4px 8px; font-weight: 500; }
.group-title:first-child { margin-top: 0; }
.card.rows { padding: 4px 16px; }
.buybox .big { font-size: 34px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.stat span.muted { display: block; margin-top: 2px; }
h2 .ic { vertical-align: -4px; color: var(--accent); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block; animation: spin .7s linear infinite; }
textarea { resize: vertical; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } .chip > span, .chip.reset { padding: 7px 12px; font-size: 13px; } }

/* Yuklanish chizig'i */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--accent); box-shadow: 0 0 10px var(--accent); border-radius: 0 3px 3px 0; opacity: 0; pointer-events: none; view-transition-name: progress; }
#progress.run { opacity: 1; animation: progress 6s cubic-bezier(.1, .7, .2, 1) forwards; }
#progress.done { width: 100% !important; animation: none; opacity: 0; transition: width .2s, opacity .3s .15s; }
@keyframes progress { 0% { width: 0; } 20% { width: 45%; } 100% { width: 92%; } }

/* Telegram orqali kirish */
.tglogin { padding-top: 28px; }
.tg-hero { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; display: grid; place-items: center; }
.tg-plane { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(180deg, #41b4f5, #2a9be0); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px rgba(42,155,224,.35); animation: pop .7s var(--spring) both, float 4.5s ease-in-out .7s infinite; position: relative; z-index: 1; }
.tg-plane .ic { width: 46px; height: 46px; margin-left: -5px; }
.tg-hero .ring { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ripple 2.8s var(--ease) infinite; }
.tg-hero .r2 { animation-delay: 1.4s; }
@keyframes ripple { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
.tg-btn { background: linear-gradient(180deg, #41b4f5, #2a9be0); font-size: 16px; }
.tg-btn:hover { background: linear-gradient(180deg, #3aaaeb, #2390d2); }
.tg-btn .ic { width: 20px; height: 20px; }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 16px; }
#qr { padding: 12px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); line-height: 0; min-height: 192px; min-width: 192px; display: grid; place-items: center; }
#qr img, #qr canvas { border-radius: 4px; }
@media (hover: none) { .qr-wrap { display: none; } }
[hidden] { display: none !important; }
.btn.is-loading, .btn[aria-disabled] { opacity: .55; pointer-events: none; }
.nav a.btn { color: #fff; background: var(--accent); }
.nav a.btn:hover { color: #fff; background: var(--accent-2); }
.nav a.btn .ic { width: 15px; height: 15px; }
.pwlogin { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pwlogin summary { cursor: pointer; list-style: none; text-align: center; }
.pwlogin summary::-webkit-details-marker { display: none; }
.pwlogin[open] summary { margin-bottom: 4px; }
.pwlogin[open] form { animation: rise .45s var(--ease) both; }
.tg-hint { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13px; background: var(--accent-soft); color: var(--text); border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; animation: rise .45s var(--ease) both; }
.spin.dark { border-color: var(--accent-soft); border-top-color: var(--accent); flex: none; margin-top: 1px; }
.or { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); font-size: 12px; margin: 14px 0 4px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ready { margin: 16px 0; }
.ready summary { list-style: none; cursor: pointer; }
.ready summary::-webkit-details-marker { display: none; }
.ready .bar { height: 6px; border-radius: 3px; background: var(--panel-2); margin: 10px 0 4px; overflow: hidden; }
.ready .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); border-radius: 3px; transition: width .8s var(--ease); }
.ready .rows { margin-top: 8px; }
.ready .row .k b { font-weight: 600; }
.foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; padding: 26px 16px 34px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--accent); }
.rules { max-width: 720px; margin: 0 auto 30px; }
.rules .card p { margin: 0; line-height: 1.6; }
.rules ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.rules li + li { margin-top: 6px; }

/* Bo'lim tablari */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 28px -16px 0; padding: 4px 16px 6px; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); font-weight: 600; font-size: 14px; scroll-snap-align: start; transition: background .25s var(--ease), color .25s, transform .35s var(--ease); }
.tab:hover { text-decoration: none; }
.tab:active { transform: scale(.95); }
.tab.on { background: var(--accent); color: #fff; }
.tab .ic { width: 16px; height: 16px; }
.cat-head .nowrap { white-space: nowrap; }
.cat-head > div { min-width: 0; }

/* Bosh sahifadagi davlatlar qatori */
.cstrip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px; scroll-snap-type: x proximity; }
.cstrip::-webkit-scrollbar { display: none; }
.cchip { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); scroll-snap-align: start; transition: transform .35s var(--ease); }
.cchip:hover { text-decoration: none; transform: translateY(-2px); }
.cchip:active { transform: scale(.96); }
.cchip .flag { width: 36px; height: 36px; }
.cchip span { display: flex; flex-direction: column; line-height: 1.25; }
.cchip b { font-size: 14px; white-space: nowrap; }
.cchip small { color: var(--muted); font-size: 12px; }

/* Davlat sahifasi sarlavhasi */
.chead { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; position: relative; padding-top: 28px; }
.chead .back { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.chead .cflag .flag { width: 64px; height: 64px; box-shadow: 0 8px 22px rgba(0,0,0,.15); animation: pop .6s var(--spring) both; }
.chead h1 { margin: 0; font-size: 26px; }

/* Davlatlar sahifasi */
.csearch { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 0 12px; margin: 14px 0; color: var(--muted); }
.csearch input { background: none; border: 0; padding: 12px 0; }
.csearch input:focus { background: none; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 30px; }
.ccard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); transition: transform .35s var(--ease); }
.ccard:hover { text-decoration: none; transform: translateY(-2px); }
.ccard:active { transform: scale(.97); }
.ccard .cf .flag { width: 42px; height: 42px; }
.ccard .cb { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ccard .cb b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard small { color: var(--muted); font-size: 12px; }
.ccard > .ic { color: var(--muted); }

/* To'lovlar to'xtatilgan holat */
.paused { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 6px 4px; }
.paused .pz { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); animation: pop .6s var(--spring) both; }
.paused .pz .ic { width: 30px; height: 30px; animation: breathe 2.4s ease-in-out infinite; }
.paused b { font-size: 18px; }
.paused p { margin: 0; color: var(--muted); }
.paybox { margin: 16px 0; display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--ok); }
.paybox.off { border-left-color: var(--warn); }
.pb-head { display: flex; align-items: center; gap: 12px; }
.pb-head .sq { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.pb-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-form input { flex: 1; min-width: 200px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--panel-2); padding: 1px 6px; border-radius: 6px; }

/* Murojaatlar */
.ticket { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ticket:first-of-type { border-top: 0; }
.ticket.open { border-left: 3px solid var(--warn); padding-left: 12px; }
.t-head { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.t-body { white-space: pre-wrap; word-break: break-word; }
.t-ans { color: var(--ok); font-size: 14px; display: flex; gap: 6px; align-items: flex-start; }
.t-ans .ic { margin-top: 2px; }
.t-form { display: flex; gap: 8px; }
.t-form input { flex: 1; }
.helpcard { display: flex; align-items: center; gap: 14px; color: var(--text); }
.helpcard:hover { text-decoration: none; }
.helpcard:active { transform: scale(.98); }
.helpcard .sq { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.helpcard > .ic { color: var(--muted); }

/* Uzun satrlar (sessiya kaliti, raqam) sahifani kesib o'tmasin */
.mono, .val, .t-body, pre, .code { overflow-wrap: anywhere; word-break: break-word; }
.row .k { min-width: 0; }                 /* flex ichidagi matn qisilaversin */
.val { font-weight: 600; margin-top: 2px; }
.row .k .val.mono { font-size: 17px; }
body { overflow-x: hidden; }              /* gorizontal siljish butunlay yopiq */
.copy-btn { flex: none; }
.reset-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Qidiruv qatori */
.searchbar { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); padding: 6px 8px 6px 14px; margin: 20px 0 6px; color: var(--muted); }
.searchbar > .ic { flex: none; }
.searchbar input { flex: 1; min-width: 0; background: none; border: 0; padding: 8px 0; font-size: 15px; }
.searchbar input:focus { background: none; }
.searchbar .clear { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); flex: none; }
.searchbar .clear:hover { background: var(--hover); }
.searchbar .btn { flex: none; }

/* Jonli sotuvlar lentasi */
.salesfeed { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 14px; margin: 14px 0 0; overflow: hidden; }
.salesfeed .live { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 700; font-size: 13px; }
.salesfeed .live .ic { animation: breathe 1.6s ease-in-out infinite; }
.salesfeed .track { display: flex; flex-direction: column; gap: 4px; overflow: hidden; height: 20px; flex: 1; min-width: 0; }
.salesfeed .sale { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sale-cycle 1s var(--ease); }
.salesfeed .sale b { color: var(--text); font-weight: 500; }
.salesfeed .sale .flag { width: 16px; height: 16px; vertical-align: -3px; }
@keyframes sale-cycle { from { opacity: 0; transform: translateY(8px); } }

/* Reyting yulduzlari */
.stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.stars .ic { width: 16px; height: 16px; color: var(--muted); opacity: .35; }
.stars .ic.on { color: #f5a524; opacity: 1; }
.stars.sm .ic { width: 14px; height: 14px; }
/* Sharh kiritish (interaktiv yulduzlar) */
.star-input { display: inline-flex; gap: 4px; direction: rtl; }
.star-input input { position: absolute; opacity: 0; width: 0; }
.star-input label { cursor: pointer; }
.star-input .ic { width: 30px; height: 30px; color: var(--muted); opacity: .35; transition: color .15s, opacity .15s, transform .2s var(--spring); }
.star-input label:hover .ic, .star-input label:hover ~ label .ic, .star-input input:checked ~ label .ic, .star-input label:has(input:checked) .ic, .star-input label:has(input:checked) ~ label .ic { color: #f5a524; opacity: 1; }
.star-input label:active .ic { transform: scale(1.2); }
/* Sharhlar sahifasi */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 30px; }
.rev-card { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rev-top { display: flex; align-items: center; justify-content: space-between; }
.rev-card p { margin: 0; line-height: 1.5; }
.rev-who { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.rev-who .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
/* Bosh sahifa reyting bloki */
.ratebar { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; margin: 14px 0 0; }
.ratebar .big { font-size: 24px; font-weight: 800; }
.ratebar a { margin-left: auto; }

/* Promo-kod */
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; }
.promo-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.promo-form input, .promo-form select { max-width: 200px; }
.buybox .big s { color: var(--muted); font-size: 16px; }

/* Til almashtirgich */
.langsel { position: relative; }
.langmenu { position: absolute; right: 0; top: 46px; background: var(--panel); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; display: none; flex-direction: column; min-width: 130px; z-index: 30; }
.langsel:hover .langmenu, .langsel:focus-within .langmenu { display: flex; }
.langmenu a { padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: 14px; }
.langmenu a:hover { background: var(--hover); text-decoration: none; }
.langmenu a.on { color: var(--accent); font-weight: 600; }

/* Segmentli tanlov (qo'shish/ayirish) */
.seg { display: inline-flex; gap: 6px; background: var(--panel-2); border-radius: 12px; padding: 4px; margin: 4px 0; }
.seg label { cursor: pointer; }
.seg label input { position: absolute; opacity: 0; }
.seg label span { display: block; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; }
.seg label:has(input:checked) span { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

/* Toast bildirishnoma */
.os-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 200; background: var(--panel); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.25); border-radius: 14px; padding: 13px 20px; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .3s, transform .4s var(--spring); border-left: 4px solid var(--ok); max-width: 90vw; }
.os-toast.show { opacity: 1; transform: translate(-50%, 0); }
.os-toast.err { border-left-color: var(--err); }
@media (max-width: 640px) { .os-toast { bottom: calc(70px + env(safe-area-inset-bottom)); } }

/* Sharh yulduzlari (JS, ishonchli) */
.star-pick { display: inline-flex; gap: 6px; margin-bottom: 8px; }
.star-pick .sp { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 0; display: inline-block; height: auto; min-height: 0; }
.star-pick .sp .ic { width: 32px; height: 32px; color: var(--muted); opacity: .35; transition: color .15s, opacity .15s, transform .2s var(--spring); }
.star-pick .sp.on .ic { color: #f5a524; opacity: 1; }
.rev-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; margin-top: 8px; }
.rev-done .ic { width: 20px; height: 20px; }

/* Qoidalar sahifasi */
.rules { max-width: 760px; margin: 24px auto 40px; }
.rules-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.rules-head .sq { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: none; }
.rules-head h1 { margin: 0; }
.rules-head p { margin: 2px 0 0; }
.rules-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.rules-toc a { font-size: 13px; padding: 7px 12px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); color: var(--muted); }
.rules-toc a:hover { color: var(--accent); text-decoration: none; }
.rules .r { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin: 14px 0; scroll-margin-top: 80px; }
.rules .r h2 { font-size: 18px; margin: 0 0 12px; }
.rules .r p { margin: 0 0 10px; line-height: 1.65; }
.rules .r ul { margin: 0; padding-left: 20px; line-height: 1.65; }
.rules .r li { margin: 7px 0; }
.rules-contact { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

/* Soddalashtirilgan ishonch qatori (jonli sotuvlar + reyting) */
.trustbar { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 14px; margin: 14px 0 0; overflow: hidden; }
.tb-sales { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.tb-sales .live { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 700; font-size: 13px; }
.tb-sales .live .ic { animation: breathe 1.6s ease-in-out infinite; }
.tb-sales .track { height: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tb-sales .sale { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sales .sale .flag { width: 15px; height: 15px; vertical-align: -3px; }
.tb-sales .sale b { color: var(--text); font-weight: 500; }
.tb-rate { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text); padding-left: 12px; border-left: 1px solid var(--line); }
.tb-rate:hover { text-decoration: none; }
.tb-rate b { font-weight: 700; }
@media (max-width: 560px) { .tb-rate span.muted { display: none; } }

/* Qanday ishlaydi */
.howto { margin: 28px 0 40px; }
.how-head h1 { margin: 0 0 6px; }
.how-head p { margin: 0 0 20px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.how-video { position: relative; }
.how-video video { width: 100%; height: auto; aspect-ratio: 9 / 16; display: block; border-radius: 22px; background: #2a6fdb; box-shadow: var(--shadow); cursor: pointer; }
.how-sound { position: absolute; right: 12px; bottom: 12px; border: 0; border-radius: 999px; padding: 10px 16px; font: 600 14px/1 inherit; font-family: inherit;
  background: rgba(15,23,42,.72); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.how-sound.muted { background: #fff; color: #2a6fdb; box-shadow: 0 4px 16px rgba(0,0,0,.2); animation: how-pulse 2s ease-in-out infinite; }
.how-sound .off { display: inline; } .how-sound .on { display: none; }
.how-sound.muted .on { display: inline; } .how-sound.muted .off { display: none; }
@keyframes how-pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .how-sound.muted { animation: none; } }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: how; }
.how-steps li { display: flex; gap: 14px; align-items: flex-start; counter-increment: how; }
.how-steps .sq { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.how-steps b::before { content: counter(how) ". "; }
.how-steps p { margin: 6px 0 0; }
.how-cta { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.how-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-video { max-width: 320px; margin: 0 auto; width: 100%; }
}

/* ================= Telefon: tor ekranlar uchun tuzatishlar ================= */
.nowrap { white-space: nowrap; }
/* Ma'lumot qatorlari: uzun qiymat yorliqni siqib yubormasin, o'ngda o'ralsin */
.row .k { min-width: 5.5em; }
.row .v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* Karta raqami bir qatorda: bo'linib qolsa, mijoz noto'g'ri raqam terishi mumkin */
.mono.cardnum { font-size: clamp(15px, 4.6vw, 19px); white-space: nowrap; overflow-wrap: normal; word-break: normal; letter-spacing: -.01em; }
.stat b { overflow-wrap: anywhere; }

/* Kabinet: jadval o'rniga ro'yxat (telefonda ustunlar sig'masdi) */
.olist { display: flex; flex-direction: column; }
.oitem { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--text); border-radius: 10px; }
.oitem + .oitem { border-top: 1px solid var(--line); }
a.oitem:hover { background: var(--hover); text-decoration: none; }
.oitem > .ic { color: var(--muted); flex: none; }
.oi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.oi-price { font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
  /* iPhone Safari 16px dan kichik maydonga bosilganda sahifani kattalashtirib yuboradi */
  input, select, textarea, .searchbar input { font-size: 16px; }
  .hero .cta .btn { flex: 1 1 auto; white-space: nowrap; }
  .stat b { font-size: 20px; }
  .card { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 12px; }
  .top .wrap { gap: 6px; }
  .logo { font-size: 16px; gap: 8px; }
  .logo i { width: 30px; height: 30px; }
  .nav { gap: 0; }
  .nav a, .nav button { padding: 8px 7px; }
  .nav .bal { padding: 7px 10px; font-size: 13px; }
  .nav a.btn { padding: 8px 12px; }
  .hero { padding: 26px 18px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 15.5px; }
  .hero .cta { flex-direction: column; }
  .hero .cta .btn { width: 100%; }
  .chat .nm-suf { display: none; }      /* "Rossiya akkaunti" -> "Rossiya": narx bilan sig'adi */
  .chat .sub { font-size: 13px; }
  .stats { gap: 10px; }
  .big { font-size: 26px; }
}

@media (max-width: 350px) {
  .logo span { display: none; }       /* juda tor ekranlar (iPhone SE 1, kichik Android) */
  .ava { width: 42px; height: 42px; }
  .bnav a { font-size: 10px; }
  .hero h1 { font-size: 24px; }
}
.stat .btn { text-align: center; line-height: 1.25; padding-left: 10px; padding-right: 10px; }
@media (max-width: 420px) {
  /* chet-chetigacha lentalar: yon bo'shliq 12px bo'lgani uchun manfiy chekka ham 12px (aks holda sahifa yonga suriladi) */
  .tabs { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .cstrip { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}
html, body { overflow-x: clip; }  /* biror element baribir chiqib qolsa ham, butun sahifa yonga surilmasin */

/* ================= Hero: animatsion fon ================= */
/* Yorug'lik dog'lari sekin suzadi, qog'oz samolyotchalar iz qoldirib uchib o'tadi, yulduzchalar miltillaydi.
   Faqat transform/opacity animatsiya qilinadi: eski telefonlarda ham silliq ishlaydi. */
.hero-in { position: relative; z-index: 1; max-width: 640px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.hero-bg .blob { position: absolute; border-radius: 50%; will-change: transform; }
.hero-bg .b1 { width: 520px; height: 520px; right: -150px; top: -230px; background: radial-gradient(closest-side, rgba(125,225,255,.55), transparent); animation: drift1 18s ease-in-out infinite alternate; }
.hero-bg .b2 { width: 460px; height: 460px; left: -170px; bottom: -230px; background: radial-gradient(closest-side, rgba(160,115,255,.42), transparent); animation: drift2 22s ease-in-out infinite alternate; }
.hero-bg .b3 { width: 400px; height: 400px; right: 8%; bottom: -220px; background: radial-gradient(closest-side, rgba(30,80,210,.55), transparent); animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-130px, 100px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(150px, -80px) scale(1.2); } }
@keyframes drift3 { to { transform: translate(-100px, -120px) scale(.88); } }
.hero-bg .dots { position: absolute; inset: -22px; background-image: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 15%, #000 0, transparent 62%); mask-image: radial-gradient(ellipse at 85% 15%, #000 0, transparent 62%);
  animation: dots-pan 24s linear infinite; }
@keyframes dots-pan { to { transform: translate(22px, 22px); } }
.hero-bg .mark { position: absolute; right: 4%; top: 50%; width: 250px; height: 250px; margin-top: -125px; color: rgba(255,255,255,.10); animation: float 7s ease-in-out infinite; }
.hero-bg .mark .ic { width: 100%; height: 100%; }
.hero-bg .lane { position: absolute; left: 50%; width: 50%; height: 0; }  /* kompyuterda: matn chapda, samolyotchalar o'ng yarmida */
.hero-bg .l1 { top: 26%; transform: rotate(-12deg); }
.hero-bg .l2 { top: 64%; transform: rotate(-7deg); }
.hero-bg .l3 { top: 90%; transform: rotate(-18deg); }
.hero-bg .fly { position: absolute; left: -12%; top: -11px; width: 22px; height: 22px; color: #fff; opacity: 0; animation: fly 11s linear infinite; }
.hero-bg .fly .ic { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0,30,90,.35)); }
.hero-bg .fly::before { content: ""; position: absolute; right: 100%; top: 50%; width: 130px; height: 2px; margin: -1px 2px 0 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px); }
.hero-bg .l2 .fly { width: 16px; height: 16px; top: -8px; animation-duration: 15s; animation-delay: 4s; }
.hero-bg .l3 .fly { width: 18px; height: 18px; top: -9px; animation-duration: 18s; animation-delay: 9s; }
@keyframes fly { 0% { left: -12%; opacity: 0; } 8% { opacity: var(--fly-o, .95); } 86% { opacity: var(--fly-o, .95); } 100% { left: 112%; opacity: 0; } }
.hero-bg .spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.55); opacity: 0; animation: spark 4.2s ease-in-out infinite; }
.hero-bg .s1 { left: 62%; top: 14%; } .hero-bg .s2 { left: 86%; top: 42%; animation-delay: 1.2s; }
.hero-bg .s3 { left: 74%; top: 80%; animation-delay: 2.1s; } .hero-bg .s4 { left: 93%; top: 10%; animation-delay: .6s; }
.hero-bg .s5 { left: 44%; top: 6%; animation-delay: 3s; } .hero-bg .s6 { left: 56%; top: 54%; animation-delay: 1.8s; }
.hero-bg .s7 { left: 20%; top: 94%; animation-delay: 2.6s; }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
.hero-bg::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 45%; transform: translateX(-120%) rotate(10deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10) 50%, transparent); animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%) rotate(10deg); } 100% { transform: translateX(330%) rotate(10deg); } }
@media (max-width: 640px) {
  .hero-bg .mark { width: 150px; height: 150px; right: -18px; top: 18px; margin-top: 0; color: rgba(255,255,255,.12); }
  .hero-bg .b1 { width: 340px; height: 340px; right: -120px; top: -150px; }
  .hero-bg .b2 { width: 320px; height: 320px; left: -130px; bottom: -150px; }
  .hero-bg .b3 { width: 280px; height: 280px; }
  /* telefonda matn butun kenglikni egallaydi: samolyotchalar bo'shliqlardan (tepa, statistika oralig'i, past) uchadi */
  .hero-bg .lane { left: 0; width: 100%; }
  .hero-bg .l1 { top: 3%; transform: rotate(-5deg); } .hero-bg .l2 { top: 74%; transform: rotate(-4deg); } .hero-bg .l3 { top: 97%; transform: rotate(-6deg); }
  .hero-bg .fly { --fly-o: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg *, .hero-bg::after { animation: none !important; }
  .hero-bg .fly, .hero-bg::after { display: none; }
}

/* Bir xil akkauntlar guruhi: "12 ta bor" */
.chat .cnt { flex: none; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* Davlat raqami: bitta mahsulot kartasi */
.offer { max-width: 560px; margin: 18px auto 40px; }
.offer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.offer-flag .flag { width: 44px; height: 44px; }
.offer-title { display: block; font-size: 16px; line-height: 1.3; }

/* Buyurtma sahifasi: akkaunt holati */
.acc-details { max-width: 640px; margin: 8px 0 40px; }
.acc-details .row .v .small { color: var(--muted); margin-top: 2px; }
.offer-alt { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.offer-alt .btn { flex: 1 1 auto; }
.offer + .acc-details, .offer .acc-details { max-width: none; }

/* ===================== Hamkorlik API (dasturchilar uchun) ===================== */
:root { --code-bg: #0d1520; --code-text: #d7e2ee; --code-muted: #7d8b99; --code-key: #7cc4ff; --code-str: #9be28f;
        --code-num: #ffb86b; --code-lit: #ff8fb1; --code-line: rgba(255,255,255,.08); }
.dev-hero { margin: 20px 0 0; border-radius: 22px; background: radial-gradient(1200px 400px at 85% -20%, rgba(124,196,255,.35), transparent 60%), linear-gradient(135deg, #0f2747 0%, #143a6b 55%, #1d5fa8 100%); color: #fff; padding: 44px 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; overflow: hidden; position: relative; }
.dev-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.dev-hero > * { position: relative; z-index: 1; }
.dev-hero h1 { font-size: 38px; line-height: 1.12; margin: 14px 0 12px; letter-spacing: -.02em; }
.dev-hero p { margin: 0 0 24px; font-size: 16px; opacity: .85; max-width: 480px; }
.dev-hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dev-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.dev-badge b { background: #31b545; color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.dev-hero .meta { display: flex; gap: 22px; margin-top: 26px; font-size: 13px; opacity: .85; flex-wrap: wrap; }
.dev-hero .meta span { display: inline-flex; align-items: center; gap: 6px; }
.dev-hero .meta .ic { width: 16px; height: 16px; }

/* kod oynasi */
.codewin { background: var(--code-bg); color: var(--code-text); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; min-width: 0; }
.codewin-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--code-line); font-size: 12px; color: var(--code-muted); }
.codewin-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .codewin-bar i:nth-child(2) { background: #febc2e; } .codewin-bar i:nth-child(3) { background: #28c840; }
.codewin-bar span { margin-left: 8px; font-family: ui-monospace, Menlo, monospace; }
.codewin pre, pre.code-block { margin: 0; max-width: none; color: var(--code-text); font: 12.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; padding: 16px 18px; word-break: normal; }
.codewin .c { color: var(--code-muted); }
.j-key { color: var(--code-key); } .j-str { color: var(--code-str); } .j-num { color: var(--code-num); } .j-lit { color: var(--code-lit); }
.m { display: inline-block; font: 700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; padding: 4px 6px; border-radius: 6px; vertical-align: 1px; }
.m.get { color: #1f8f3a; background: color-mix(in srgb, #31b545 16%, transparent); }
.m.post { color: #2a6fdb; background: color-mix(in srgb, #3390ec 16%, transparent); }
:root[data-theme="dark"] .m.get { color: #7be08c; } :root[data-theme="dark"] .m.post { color: #8cc4ff; }

/* imkoniyatlar */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.feat { padding: 20px; }
.feat .sq { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; margin-bottom: 12px; }
.feat .sq .ic { width: 21px; height: 21px; }
.feat b { display: block; font-size: 15px; margin-bottom: 4px; }
.feat p { margin: 0; color: var(--muted); font-size: 14px; }
.dev-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: st; margin: 0; padding: 0; list-style: none; }
.dev-steps li { counter-increment: st; position: relative; padding: 20px 20px 20px 62px; }
.dev-steps li::before { content: counter(st); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; display: grid; place-items: center; }
.dev-steps b { display: block; margin-bottom: 2px; }
.dev-steps span { color: var(--muted); font-size: 14px; }
.h-sec { font-size: 22px; letter-spacing: -.01em; margin: 34px 0 4px; }
.h-sub { color: var(--muted); margin: 0 0 14px; }

/* narx kartasi + ariza */
.price-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; margin: 16px 0 28px; }
.price-card { position: sticky; top: 72px; border: 2px solid var(--accent); }
.price-card .amt { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0; }
.price-card .per { color: var(--muted); font-size: 14px; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; font-size: 14px; }
.price-card li { display: flex; gap: 9px; align-items: flex-start; }
.price-card li .ic { width: 17px; height: 17px; color: var(--ok); flex: none; margin-top: 1px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 2px; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

/* dashboard */
.dash-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 28px 0 6px; }
.dash-head h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.dash-head .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.ok::before { animation: breathe 2s ease-in-out infinite; }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill.err { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 16px 0; }
.kpi { padding: 16px; min-width: 0; }
.kpi span { display: block; color: var(--muted); font-size: 12.5px; }
.kpi b { display: block; font-size: 22px; margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.dtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 18px; overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.dtabs a:hover { color: var(--text); text-decoration: none; }
.dtabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.dtabs a .n { font-size: 11px; background: var(--panel-2); color: var(--muted); padding: 1px 7px; border-radius: 999px; }
.js .tabpane { display: none; } .js .tabpane.on { display: block; animation: rise .35s var(--ease) both; }
.chart { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 6px; height: 170px; padding-top: 10px; }
.chart .col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.chart .bar { border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); min-height: 3px; position: relative; transform-origin: bottom; animation: grow .7s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.chart .bar.zero { background: var(--line); }
.chart .bar .e { position: absolute; left: 0; right: 0; bottom: 0; background: var(--err); border-radius: 0 0 2px 2px; opacity: .85; }
.chart .col:hover .bar { filter: brightness(1.12); }
.chart .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--panel); font-size: 11.5px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.chart .col:hover .tip { opacity: 1; }
.chart-x { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 6px; }
@keyframes grow { from { transform: scaleY(0); } }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-right: 5px; vertical-align: -1px; }
.legend i.e { background: var(--err); }
.keyrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); font: 14px ui-monospace, Menlo, monospace; flex-wrap: wrap; }
.keyrow .k { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.newkey { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.newkey .keyrow { background: var(--code-bg); color: #9be28f; }
.logtbl td, .logtbl th { padding: 9px 8px; font-size: 13px; white-space: nowrap; }
.logtbl td.p { white-space: normal; word-break: break-all; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.st { font: 600 12px ui-monospace, Menlo, monospace; padding: 2px 7px; border-radius: 6px; }
.st.s2 { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.st.s4 { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.st.s5 { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.seg-f { display: inline-flex; background: var(--panel-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-f button { border: 0; background: transparent; color: var(--muted); font: 600 13px inherit; font-family: inherit; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.seg-f button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

/* hujjat */
.docs { display: grid; grid-template-columns: 230px 1fr; gap: 28px; margin: 24px 0 50px; align-items: start; }
.docs-nav { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; font-size: 14px; padding-right: 4px; }
.docs-nav .g { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 8px 6px; font-weight: 600; }
.docs-nav .g:first-child { margin-top: 0; }
.docs-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text); }
.docs-nav a:hover { background: var(--hover); text-decoration: none; }
.docs-nav a.on { background: var(--accent-soft); color: var(--accent); }
.docs-nav .m { font-size: 9.5px; padding: 3px 5px; min-width: 36px; text-align: center; }
.docs-main { min-width: 0; }
.docs-main > section { scroll-margin-top: 76px; }
.docs-main h1 { font-size: 32px; letter-spacing: -.02em; margin: 0 0 8px; }
.docs-main h2 { font-size: 21px; margin: 40px 0 10px; letter-spacing: -.01em; }
.docs-main h3 { font-size: 14px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.docs-main p, .docs-main li { color: var(--text); }
.docs-main .lead { font-size: 16px; color: var(--muted); max-width: 640px; }
.docs-main code { font: 13px ui-monospace, Menlo, monospace; background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
.callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; margin: 14px 0; }
.callout .ic { color: var(--accent); flex: none; width: 18px; height: 18px; margin-top: 1px; }
.callout.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); } .callout.warn .ic { color: var(--warn); }
.ep { padding: 0; overflow: hidden; margin: 18px 0; scroll-margin-top: 76px; }
.ep-head { padding: 18px 20px 4px; }
.ep-path { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 15px ui-monospace, Menlo, monospace; }
.ep-head h3 { margin: 10px 0 4px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.ep-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); margin-top: 14px; }
.ep-body > div { padding: 16px 20px; min-width: 0; }
.ep-body > .ep-code { background: var(--code-bg); padding: 0; }
.params { width: 100%; font-size: 13.5px; }
.params td { padding: 9px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.params td:first-child { font-family: ui-monospace, Menlo, monospace; font-weight: 600; white-space: nowrap; padding-right: 12px; }
.params .t { color: var(--muted); font-size: 12px; font-family: ui-monospace, Menlo, monospace; display: block; font-weight: 400; }
.params .req { color: var(--err); font-size: 11px; font-weight: 600; margin-left: 4px; }
.ctabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--code-line); align-items: center; }
.ctabs button { background: transparent; border: 0; color: var(--code-muted); font: 600 12px inherit; font-family: inherit; padding: 8px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ctabs button.on { color: #fff; border-bottom-color: var(--code-key); }
.ctabs .cp { margin-left: auto; color: var(--code-muted); display: inline-flex; align-items: center; gap: 5px; }
.ctabs .cp .ic { width: 14px; height: 14px; }
.ctabs .cp.done { color: var(--code-str); }
.ep-code .lbl2 { padding: 10px 18px 0; font-size: 11px; color: var(--code-muted); text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--code-line); }
.try { border-top: 1px solid var(--line); padding: 14px 20px 18px; background: var(--panel-2); }
.try summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }
.try .row2 { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: end; }
.try .row2 > div { flex: 1 1 140px; }
.try label { font-size: 12px; }
.try input { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.try .out { margin-top: 12px; border-radius: 10px; background: var(--code-bg); display: none; }
.try .out.on { display: block; }
.try .out .meta { padding: 8px 14px; font: 12px ui-monospace, Menlo, monospace; color: var(--code-muted); border-bottom: 1px solid var(--code-line); }
.errtbl td { font-size: 13.5px; }
.errtbl td:first-child { white-space: nowrap; }

@media (max-width: 900px) {
  .dev-hero { grid-template-columns: 1fr; padding: 32px 22px; }
  .dev-hero h1 { font-size: 30px; }
  .feat-grid, .dev-steps { grid-template-columns: 1fr 1fr; }
  .price-wrap { grid-template-columns: 1fr; } .price-card { position: static; }
  .kpis { grid-template-columns: repeat(2, 1fr); } .kpis .kpi:first-child { grid-column: 1 / -1; }
  .docs { grid-template-columns: 1fr; gap: 10px; }
  .docs-nav { position: sticky; top: 56px; z-index: 5; max-height: none; display: flex; gap: 6px; overflow-x: auto; background: var(--bg); padding: 10px 0; margin: 0 -16px; padding-left: 16px; scrollbar-width: none; }
  .docs-nav::-webkit-scrollbar { display: none; }
  .docs-nav .g { display: none; }
  .docs-nav a { flex: none; background: var(--panel); box-shadow: var(--shadow); padding: 6px 10px; font-size: 13px; }
  .ep-body { grid-template-columns: 1fr; }
  .docs-main > section, .ep { scroll-margin-top: 120px; }
}
@media (max-width: 560px) {
  .feat-grid, .dev-steps { grid-template-columns: 1fr; }
  .dev-hero h1 { font-size: 26px; }
  .chart { gap: 3px; height: 140px; } .chart-x { gap: 3px; font-size: 9px; }
  .chart-x span:nth-child(odd) { visibility: hidden; }
  .dash-head .acts { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .chart .bar, .js .tabpane.on { animation: none; } }

/* ===================== Admin panel: chap menyu ===================== */
.adm { --admw: min(1280px, calc(100vw - 32px)); width: var(--admw); position: relative; left: 50%; margin-left: calc(var(--admw) / -2);
       display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 22px; margin-bottom: 50px; }
.adm-nav { position: sticky; top: 72px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 10px; max-height: calc(100vh - 90px); overflow-y: auto; }
.adm-me { display: flex; gap: 10px; align-items: center; padding: 4px 6px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.adm-me .sq { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.adm-me b { display: block; font-size: 15px; } .adm-me span { display: block; }
.adm-nav .g { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 14px 10px 4px; }
.adm-nav a, .adm-out button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 500; }
.adm-nav a .ic, .adm-out .ic { width: 19px; height: 19px; color: var(--muted); flex: none; transition: color .15s; }
.adm-nav a span { flex: 1; }
.adm-nav a:hover { background: var(--hover); text-decoration: none; }
.adm-nav a.on { background: var(--accent-soft); color: var(--accent); }
.adm-nav a.on .ic { color: var(--accent); }
.nb { flex: none !important; font-size: 11.5px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; color: #fff; background: var(--warn); }
.nb.err { background: var(--err); } .nb.muted { background: var(--panel-2); color: var(--muted); }
.adm-out { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 8px; }
.adm-out button { width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; color: var(--err); }
.adm-out button .ic { color: var(--err); }
.adm-out button:hover { background: color-mix(in srgb, var(--err) 8%, transparent); }
.adm-main { min-width: 0; }
.apane-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.apane-head h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.apane > .card + .card, .apane > .card + .tbl { margin-top: 16px; }
.apane .stats { margin-top: 0; }
.js .apane { display: none; } .js .apane.on { display: block; animation: rise .3s var(--ease) both; }
.todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.todo a { display: flex; align-items: center; gap: 12px; color: var(--text); padding: 14px 16px; }
.todo a:hover { text-decoration: none; filter: brightness(.98); }
.todo .sq { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.todo div { flex: 1; } .todo b { display: block; } .todo .muted { display: block; }
.adm-add { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-add input { flex: 1 1 220px; }
@media (max-width: 900px) {
  .adm { grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
  .adm-nav { position: sticky; top: 56px; z-index: 6; display: flex; gap: 6px; overflow-x: auto; max-height: none; padding: 8px; scrollbar-width: none; border-radius: 12px; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav .g, .adm-me { display: none; }
  .adm-nav a { flex: none; padding: 7px 11px; font-size: 13.5px; white-space: nowrap; gap: 7px; }
  .adm-nav a .ic { width: 17px; height: 17px; }
  .adm-out { margin: 0; border: 0; padding: 0; flex: none; }
  .adm-out button { padding: 7px 11px; white-space: nowrap; font-size: 13.5px; }
  .apane-head h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .js .apane.on { animation: none; } }

/* Header: punktlar ko'paydi, ikki qatorga tushmasin */
.nav a, .nav button { white-space: nowrap; }
@media (max-width: 1120px) { .nav { gap: 0; } .nav a, .nav button { padding: 8px 8px; font-size: 13.5px; } }

/* "Qanday ishlaydi": rasmli qo'llanma */
.how-jump { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.how-jump a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); font-size: 13.5px; font-weight: 500; }
.how-jump a:hover { text-decoration: none; color: var(--accent); }
.how-jump span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.guide-step { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: center; padding: 26px 28px; scroll-margin-top: 72px; }
.guide-step:nth-child(even) { grid-template-columns: 260px minmax(0, 1fr); }
.guide-step:nth-child(even) .g-shot { order: -1; }
.g-num { display: flex; align-items: center; gap: 10px; }
.g-num .sq { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.g-text h2 { margin: 14px 0 8px; font-size: 22px; letter-spacing: -.01em; }
.g-text p { margin: 0; line-height: 1.55; }
.g-tip { display: flex; gap: 8px; margin-top: 14px !important; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; color: var(--text); }
.g-tip .ic { color: var(--accent); flex: none; margin-top: 2px; }
.g-shot { display: block; border-radius: 28px; padding: 8px; background: #11161c; box-shadow: 0 18px 40px rgba(16,35,47,.22); transition: transform .35s var(--ease); }
.g-shot:hover { transform: translateY(-4px) rotate(-.5deg); }
.g-shot img { display: block; width: 100%; height: auto; border-radius: 21px; background: var(--panel-2); }
@media (max-width: 760px) {
  .guide-step, .guide-step:nth-child(even) { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .guide-step:nth-child(even) .g-shot { order: 0; }
  .g-shot { max-width: 270px; margin: 0 auto; width: 100%; }
  .how-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px 6px; }
  .how-jump::-webkit-scrollbar { display: none; }
  .how-jump a { flex: none; }
}

/* Header/bnav belgilari */
.nav a .hb, .bnav .hb { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.bnav a { position: relative; }
.bnav .hb.dot { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 9px; height: 9px; padding: 0; margin: 0; }

/* ===================== Yordam markazi ===================== */
.hc-hero { margin: 20px 0 0; border-radius: 22px; padding: 36px 36px 30px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(900px 300px at 90% -30%, rgba(155,226,143,.35), transparent 60%), linear-gradient(135deg, #1f8f5a 0%, #1d7bbf 60%, #2a6fdb 100%); }
.hc-hero h1 { font-size: 34px; margin: 12px 0 8px; letter-spacing: -.02em; }
.hc-hero p { margin: 0; opacity: .9; max-width: 560px; }
.hc-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; }
.hc-stats span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; }
.hc-stats .ic { width: 16px; height: 16px; }
.hc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; margin: 22px 0 40px; }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hc-head h2, .hc-faq-h { margin: 0; font-size: 20px; }
.hc-faq-h { margin: 26px 0 10px; }
.tlist { padding: 6px; }
.titem { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--text); }
.titem:hover { background: var(--hover); text-decoration: none; }
.titem .sq, .hc-empty .sq { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.ti-main { flex: 1; min-width: 0; }
.ti-top { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.ti-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-sub { display: flex; gap: 8px; align-items: center; margin-top: 3px; min-width: 0; }
.ti-sub .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-empty { display: flex; gap: 12px; align-items: center; }
.hc-new { position: sticky; top: 72px; }
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.cat { margin: 0; cursor: pointer; }
.cat input { position: absolute; opacity: 0; pointer-events: none; }
.cat span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 2px solid transparent; font-size: 13.5px; transition: border-color .15s, background .15s; height: 100%; }
.cat span .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.cat b { font-weight: 600; }
.cat input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.cat input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 14px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; color: var(--muted); font-size: 14px; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.has { border-style: solid; border-color: var(--ok); color: var(--text); }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 20px 0 10px; font-weight: 500; }

/* murojaat sahifasi */
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-bottom: 40px; }
.tk-chat { padding: 0; display: flex; flex-direction: column; height: min(720px, calc(100dvh - 150px)); overflow: hidden; }
.tk-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tk-head h1 { font-size: 19px; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.day { align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); padding: 3px 10px; border-radius: 999px; margin: 8px 0; box-shadow: var(--shadow); }
.sysmsg { align-self: center; font-size: 12.5px; color: var(--muted); padding: 2px 10px; }
.bub { max-width: min(78%, 560px); padding: 8px 12px 6px; border-radius: 16px; box-shadow: var(--shadow); position: relative; animation: rise .25s var(--ease) both; overflow-wrap: anywhere; }
.bub.in { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 6px; }
.bub.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-bottom-right-radius: 6px; }
.bub .who { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.bub .txt { white-space: pre-wrap; line-height: 1.45; }
.bub .img img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin: 2px 0 4px; }
.bub .meta, .cm-bub .meta { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tick { margin-left: 4px; letter-spacing: -3px; } .tick.read { color: var(--accent); }
.vbadge { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; font-size: 0; color: transparent; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233390ec' d='M12.00 0.85 L12.48 0.99 L12.93 1.37 L13.33 1.89 L13.69 2.42 L14.03 2.85 L14.39 3.07 L14.82 3.06 L15.33 2.86 L15.90 2.58 L16.51 2.33 L17.09 2.22 L17.57 2.34 L17.92 2.70 L18.12 3.26 L18.21 3.91 L18.25 4.55 L18.34 5.09 L18.54 5.46 L18.91 5.66 L19.45 5.75 L20.09 5.79 L20.74 5.88 L21.30 6.08 L21.66 6.42 L21.78 6.91 L21.67 7.49 L21.42 8.10 L21.14 8.67 L20.94 9.18 L20.93 9.61 L21.15 9.97 L21.58 10.31 L22.11 10.67 L22.63 11.07 L23.01 11.52 L23.15 12.00 L23.01 12.48 L22.63 12.93 L22.11 13.33 L21.58 13.69 L21.15 14.03 L20.93 14.39 L20.94 14.82 L21.14 15.33 L21.42 15.90 L21.67 16.51 L21.78 17.09 L21.66 17.57 L21.30 17.92 L20.74 18.12 L20.09 18.21 L19.45 18.25 L18.91 18.34 L18.54 18.54 L18.34 18.91 L18.25 19.45 L18.21 20.09 L18.12 20.74 L17.92 21.30 L17.58 21.66 L17.09 21.78 L16.51 21.67 L15.90 21.42 L15.33 21.14 L14.82 20.94 L14.39 20.93 L14.03 21.15 L13.69 21.58 L13.33 22.11 L12.93 22.63 L12.48 23.01 L12.00 23.15 L11.52 23.01 L11.07 22.63 L10.67 22.11 L10.31 21.58 L9.97 21.15 L9.61 20.93 L9.18 20.94 L8.67 21.14 L8.10 21.42 L7.49 21.67 L6.91 21.78 L6.42 21.66 L6.08 21.30 L5.88 20.74 L5.79 20.09 L5.75 19.45 L5.66 18.91 L5.46 18.54 L5.09 18.34 L4.55 18.25 L3.91 18.21 L3.26 18.12 L2.70 17.92 L2.34 17.58 L2.22 17.09 L2.33 16.51 L2.58 15.90 L2.86 15.33 L3.06 14.82 L3.07 14.39 L2.85 14.03 L2.42 13.69 L1.89 13.33 L1.37 12.93 L0.99 12.48 L0.85 12.00 L0.99 11.52 L1.37 11.07 L1.89 10.67 L2.42 10.31 L2.85 9.97 L3.07 9.61 L3.06 9.18 L2.86 8.67 L2.58 8.10 L2.33 7.49 L2.22 6.91 L2.34 6.43 L2.70 6.08 L3.26 5.88 L3.91 5.79 L4.55 5.75 L5.09 5.66 L5.46 5.46 L5.66 5.09 L5.75 4.55 L5.79 3.91 L5.88 3.26 L6.08 2.70 L6.43 2.34 L6.91 2.22 L7.49 2.33 L8.10 2.58 L8.67 2.86 L9.18 3.06 L9.61 3.07 L9.97 2.85 L10.31 2.42 L10.67 1.89 L11.07 1.37 L11.52 0.99Z'/%3E%3Cpath d='M7.7 12.4l2.9 2.9 5.8-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.tk-typing, .typing-s { font-size: 12.5px; color: var(--muted); padding: 4px 20px; display: flex; align-items: center; gap: 3px; }
.tk-typing i, .typing-s i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; display: inline-block; }
.tk-typing i:nth-child(2), .typing-s i:nth-child(2) { animation-delay: .2s; } .tk-typing i:nth-child(3), .typing-s i:nth-child(3) { animation-delay: .4s; }
.tk-typing i:last-of-type, .typing-s i:last-of-type { margin-right: 6px; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); margin: 0; }
.c-box { flex: 1; min-width: 0; background: var(--panel-2); border-radius: 20px; padding: 2px 4px; }
.c-box textarea { width: 100%; border: 0; background: transparent; resize: none; padding: 9px 12px; font: inherit; color: var(--text); max-height: 180px; outline: none; box-shadow: none; min-height: 0; }
.c-file { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px 0; font-size: 13px; }
.c-file button { border: 0; background: none; color: var(--err); font-size: 18px; cursor: pointer; line-height: 1; }
.c-attach, .c-send { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; }
.c-attach { color: var(--muted); background: var(--panel-2); margin: 0; } .c-attach:hover { color: var(--accent); }
.c-send { background: var(--accent); color: #fff; transition: transform .15s, background .15s; } .c-send:hover { background: var(--accent-2); }
.c-send:disabled { opacity: .5; } .c-send .ic { width: 20px; height: 20px; margin-left: -2px; }
.tk-note { padding: 0 16px 12px; margin: 0; }
.tk-side h3 { margin: 0 0 12px; font-size: 15px; }
.tk-side .card + .card { margin-top: 14px; }
.q-box { display: flex; flex-direction: column; align-items: center; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 12%, transparent); margin-bottom: 14px; text-align: center; }
.q-box b { font-size: 34px; letter-spacing: -.02em; line-height: 1.2; }
.steps2 { list-style: none; margin: 0 0 14px; padding: 0 0 0 4px; }
.steps2 li { position: relative; padding: 0 0 14px 24px; display: flex; flex-direction: column; }
.steps2 li::before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); box-sizing: border-box; }
.steps2 li::after { content: ""; position: absolute; left: 5px; top: 17px; bottom: 0; width: 2px; background: var(--line); }
.steps2 li:last-child::after { display: none; }
.steps2 li.done::before { background: var(--ok); border-color: var(--ok); }
.steps2 li.now::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.steps2 li b { font-size: 14px; } .steps2 li:not(.done):not(.now) b { color: var(--muted); font-weight: 500; }
.rate-form { margin-top: 12px; text-align: center; }
.rate-stars { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.rate-stars button { border: 0; background: none; font-size: 28px; color: var(--line); cursor: pointer; padding: 0 2px; }
.rate-stars button.on, .rate-stars:hover button { color: #f5a623; } .rate-stars button:hover ~ button { color: var(--line); }
.tips p { display: flex; gap: 8px; } .tips .ic { color: var(--accent); flex: none; margin-top: 2px; }
@media (max-width: 900px) {
  .hc-grid, .tk-grid { grid-template-columns: 1fr; }
  .hc-new { position: static; }
  .hc-hero { padding: 26px 20px; } .hc-hero h1 { font-size: 26px; }
  .tk-side { order: -1; } .tk-side .tips { display: none; }
  .tk-chat { height: calc(100dvh - 150px - 64px); }
}

/* ===================== Hamjamiyat (Telegram iOS uslubi) ===================== */
.cm { --bub-in: var(--panel); --bub-out: #e3f1ff; --wall: #dfe7ef;
  display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100dvh - 56px - 32px); margin: 16px 0; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm { --bub-in: #212121; --bub-out: #2b5278; --wall: #0e1621; } }
:root[data-theme="dark"] .cm { --bub-in: #212121; --bub-out: #2b5278; --wall: #0e1621; }
.cm-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; min-width: 0; }
.cm-side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 4px 18px; font-size: 22px; letter-spacing: -.02em; }
.cm-search { display: flex; align-items: center; gap: 8px; margin: 6px 12px 6px; padding: 0 12px; background: var(--panel-2); border-radius: 12px; color: var(--muted); }
.cm-search input { border: 0; background: transparent; padding: 8px 0; box-shadow: none; outline: none; color: var(--text); font-size: 15px; }
.cm-list { flex: 1; overflow-y: auto; padding: 2px 6px 8px; overscroll-behavior: contain; }
.cm-empty { text-align: center; padding: 24px 0; }
.cm-login { margin: 14px 10px; width: calc(100% - 20px); }
.cm-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--text); transition: background .2s; }
.cm-item::after { content: ""; position: absolute; left: 78px; right: 10px; bottom: 0; height: 1px; background: var(--line); opacity: .7; }
.cm-item:last-of-type::after, .cm-item.on::after, .cm-item:hover::after { opacity: 0; }
.cm-item:hover { background: var(--hover); text-decoration: none; }
.cm-item:active { transform: scale(.985); }
.cm-item.on { background: var(--accent); color: #fff; } .cm-item.on .ci-sub, .cm-item.on .ci-t, .cm-item.on .ci-sub b { color: rgba(255,255,255,.88); }
.ava-w { position: relative; flex: none; }
.ava-c, .ava-i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; flex: none; object-fit: cover; }
.ava-c.room { background: linear-gradient(135deg, #4fb0f5, #2a6fdb); }
.on-dot { position: absolute; right: 1px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: #31b545; border: 2.5px solid var(--panel); }
.ci-main { flex: 1; min-width: 0; }
.ci-top { display: flex; align-items: center; gap: 6px; } .ci-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
.ci-t { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ci-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.3; color: var(--muted); overflow: hidden; margin-top: 2px; overflow-wrap: anywhere; }
.ci-sub b { font-weight: 500; color: var(--text); }
.ro-b { font-size: 10px; text-transform: uppercase; background: var(--panel-2); color: var(--muted); padding: 1px 6px; border-radius: 6px; font-weight: 700; flex: none; }
.ro-b.ai { background: linear-gradient(135deg, #7b5cff, #2fb6ff); color: #fff; }
.cm-item.on .ro-b { background: rgba(255,255,255,.22); color: #fff; }
.cm-skel { height: 64px; margin: 6px 10px; border-radius: 12px; background: linear-gradient(90deg, var(--panel-2), var(--hover), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.vb { width: 1.05em; height: 1.05em; flex: none; color: #3390ec; vertical-align: -.17em; margin-left: 3px; display: inline-block; }
.cm-item.on .vb { color: #fff; } .cm-item.on .vb path + path { stroke: var(--accent); }
.ci-sub .vb { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }
.cm-ht b .vb { width: 17px; height: 17px; vertical-align: -3px; }
.p-head b .vb { width: 20px; height: 20px; vertical-align: -3px; }
.cm-bub .nm .vb { width: 15px; height: 15px; vertical-align: -2.5px; }

/* --- AI avatar: aylanuvchi halqa, yaltiroq yadro, ko'z qisuvchi "ko'zlar" --- */
.ai-ava { --s: 56px; position: relative; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: block; isolation: isolate; }
.ai-ava i { position: absolute; display: block; border-radius: 50%; }
.ai-ava .ring { inset: 0; background: conic-gradient(from 0deg, #7b5cff, #2fb6ff, #3ef0c4, #ff6bd6, #7b5cff); animation: aiSpin 4s linear infinite; }
.ai-ava .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; filter: blur(calc(var(--s) * .12)); opacity: .55; z-index: -1; }
.ai-ava .core { inset: 9%; background: radial-gradient(circle at 35% 30%, #4b3d9e, #141233 70%); display: flex; align-items: center; justify-content: center; gap: calc(var(--s) * .12);
  box-shadow: inset 0 0 calc(var(--s) * .18) rgba(120,170,255,.55); animation: aiBreath 3s ease-in-out infinite; }
.ai-ava .core b { width: calc(var(--s) * .1); height: calc(var(--s) * .2); border-radius: 99px; background: #bfeaff; box-shadow: 0 0 calc(var(--s) * .1) #6fd3ff; animation: aiBlink 4.5s infinite; }
.ai-ava .spark { width: calc(var(--s) * .16); height: calc(var(--s) * .16); top: 2%; right: 4%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.8);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; animation: aiTwinkle 2.6s ease-in-out infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiBreath { 50% { transform: scale(.94); box-shadow: inset 0 0 calc(var(--s) * .26) rgba(150,200,255,.75); } }
@keyframes aiBlink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.12); } }
@keyframes aiTwinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }

/* --- suhbat oynasi --- */
.cm-chat { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background-color: var(--wall);
  background-image: radial-gradient(circle at 15% 10%, color-mix(in srgb, #7fd1ff 22%, transparent), transparent 45%),
    radial-gradient(circle at 90% 85%, color-mix(in srgb, #a98bff 18%, transparent), transparent 45%),
    radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1.5px);
  background-size: auto, auto, 24px 24px; }
.cm-chat.enter .cm-msgs, .cm-chat.enter .cm-head { animation: cmIn .35s var(--ease); }
@keyframes cmIn { from { opacity: 0; transform: translateY(8px); } }
.cm-pick { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); text-align: center; padding: 10px 16px; background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: 18px; backdrop-filter: blur(8px); }
.cm-pick .ic { width: 44px; height: 44px; opacity: .6; }
.cm-head { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; min-height: 60px;
  background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); }
.cm-head[hidden] { display: none; }
.cm-ht { min-width: 0; display: flex; flex-direction: column; grid-column: 2; }
.cm-ht b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.cm-ht span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.cm-ht .typing-s { padding: 0; color: var(--accent); }
.cm-hava { grid-column: 3; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform .2s var(--spring); }
.cm-hava:active { transform: scale(.9); }
.cm-hava .ava-c, .cm-hava .ava-i, .cm-hava .ai-ava { --s: 40px; width: 40px; height: 40px; font-size: 15px; }
.cm-back { display: none; grid-column: 1; align-items: center; gap: 0; border: 0; background: none; color: var(--accent); font: 500 16px inherit; font-family: inherit; cursor: pointer; padding: 6px 4px 6px 0; }
.cm-back .ic { width: 26px; height: 26px; }
.cm-warn { display: flex; gap: 8px; align-items: center; padding: 8px 16px; font-size: 13px; background: color-mix(in srgb, var(--warn) 14%, var(--panel)); border-bottom: 1px solid var(--line); }
.cm-warn .ic { color: var(--warn); flex: none; }
.cm-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 14px 10px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.cm-older { min-height: 1px; margin-bottom: auto; }
.cm-msgs .day { position: sticky; top: 4px; z-index: 1; align-self: center; font-size: 13px; font-weight: 500; color: #fff; background: rgba(0,0,0,.28); backdrop-filter: blur(8px); padding: 3px 10px; border-radius: 999px; margin: 10px 0 4px; box-shadow: none; }

.cm-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; max-width: 100%; transform-origin: left bottom; }
.cm-row.cont { margin-top: 2px; }
.cm-row.mine { justify-content: flex-end; transform-origin: right bottom; }
.cm-ava-b { width: 34px; flex: none; border: 0; background: none; padding: 0; cursor: pointer; align-self: flex-end; visibility: hidden; }
.cm-row.tail .cm-ava-b { visibility: visible; }
.cm-ava-b .ai-ava { --s: 34px; }
.cm-bub { max-width: min(76%, 540px); background: var(--bub-in); padding: 6px 10px 5px 11px; border-radius: 18px; box-shadow: 0 1px 1px rgba(0,0,0,.08); overflow-wrap: anywhere; position: relative; transition: transform .2s var(--spring), filter .2s; }
.cm-row:not(.mine).cont .cm-bub { border-top-left-radius: 6px; }
.cm-row:not(.mine):not(.tail) .cm-bub { border-bottom-left-radius: 6px; }
.cm-row.mine .cm-bub { background: var(--bub-out); }
.cm-row.mine.cont .cm-bub { border-top-right-radius: 6px; }
.cm-row.mine:not(.tail) .cm-bub { border-bottom-right-radius: 6px; }
/* dumcha: guruhdagi oxirgi xabarda */
.cm-row.tail .cm-bub::before { content: ""; position: absolute; bottom: 0; width: 12px; height: 16px; background: inherit; }
.cm-row.tail:not(.mine) .cm-bub { border-bottom-left-radius: 4px; }
.cm-row.tail:not(.mine) .cm-bub::before { left: -6px; clip-path: path("M12 0 C12 9 10 14 0 16 L12 16 Z"); }
.cm-row.tail.mine .cm-bub { border-bottom-right-radius: 4px; }
.cm-row.tail.mine .cm-bub::before { right: -6px; clip-path: path("M0 0 C0 9 2 14 12 16 L0 16 Z"); }
.cm-row.cont .nm { display: none; }
.cm-bub .nm { border: 0; background: none; padding: 0; font: 600 14px/1.3 inherit; font-family: inherit; cursor: pointer; display: block; margin-bottom: 1px; }
.cm-bub .txt { white-space: pre-wrap; line-height: 1.38; font-size: 15.5px; }
.cm-bub .meta { float: right; margin: 7px 0 -3px 10px; font-size: 11.5px; color: var(--muted); display: inline-flex; gap: 3px; }
.cm-row.mine .cm-bub .meta { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.tick.read { color: var(--accent); }
.cm-bub.ai .txt b { font-weight: 650; }
.cm-row.held .cm-bub { transform: scale(.97); filter: brightness(.95); }
.rq { display: block; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; margin: 3px 0 4px; font-size: 13px; color: var(--text); max-width: 100%; }
.rq:hover { text-decoration: none; filter: brightness(.97); }
.rq b { display: block; color: var(--accent); font-size: 12.5px; } .rq span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.flash-row .cm-bub { animation: flashrow 1.2s var(--ease); }
@keyframes flashrow { 30% { box-shadow: 0 0 0 3px var(--accent); } }

/* yuborish / kelish / o'chirish animatsiyalari */
.cm-row.pop .cm-bub { animation: bubIn .42s var(--spring) both; }
.cm-row.pop .cm-ava-b { animation: bubFade .3s ease both; }
.cm-row.mine.pop .cm-bub { animation-name: bubInMine; }
@keyframes bubIn { from { opacity: 0; transform: translate(-14px, 14px) scale(.6); } }
@keyframes bubInMine { from { opacity: 0; transform: translate(18px, 22px) scale(.55); } }
@keyframes bubFade { from { opacity: 0; } }
.cm-row.bye { overflow: hidden; height: 0 !important; margin-top: 0 !important; transition: height .34s var(--ease) .08s, margin .34s var(--ease) .08s; }
.cm-row.bye .cm-bub { animation: bubOut .32s ease forwards; }
.cm-row.bye .cm-ava-b { opacity: 0; transition: opacity .2s; }
@keyframes bubOut { 40% { transform: scale(1.04); } to { opacity: 0; transform: scale(.4) rotate(-4deg); filter: blur(6px); } }
.dots { display: inline-flex; gap: 4px; padding: 6px 2px 2px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dotJump 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotJump { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--accent); border-radius: 2px; animation: blink 1s steps(2) infinite; }

/* AI salomlashuv va tayyor savollar */
.ai-intro { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 330px; margin: 16px auto 10px;
  padding: 20px 18px; border-radius: 22px; background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(10px); animation: cmIn .5s var(--ease); }
.ai-intro b { font-size: 17px; margin-top: 6px; } .ai-intro span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.cm-chips { display: flex; gap: 8px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.cm-chips[hidden] { display: none; }
.cm-chips button { flex: none; border: 0; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); color: var(--accent); border-radius: 999px; padding: 8px 14px; font: 500 14px inherit; font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); animation: cmIn .4s var(--ease) both; transition: transform .15s; }
.cm-chips button:nth-child(2) { animation-delay: .05s; } .cm-chips button:nth-child(3) { animation-delay: .1s; } .cm-chips button:nth-child(4) { animation-delay: .15s; }
.cm-chips button:active { transform: scale(.95); }

.cm-down { position: absolute; right: 16px; bottom: 76px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--panel); box-shadow: 0 2px 10px rgba(0,0,0,.18); color: var(--muted); cursor: pointer; display: grid; place-items: center; z-index: 2; animation: cmIn .2s var(--ease); }
.cm-down[hidden] { display: none; }
.cm-down .ic { transform: rotate(90deg); }
.cm-down span { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cm-reply { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(18px); border-top: 1px solid var(--line); animation: cmIn .2s var(--ease); }
.cm-reply[hidden] { display: none; }
.cm-reply .bar { width: 3px; align-self: stretch; background: var(--accent); border-radius: 2px; }
.cm-reply div { flex: 1; min-width: 0; font-size: 13px; } .cm-reply b { display: block; color: var(--accent); }
.cm-reply span:not(.bar) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cm-reply button { border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; }
.cm-comp { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); margin: 0;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); }
.cm-comp[hidden] { display: none; }
.cm-comp .c-box { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 0 4px; }
.cm-comp textarea { width: 100%; border: 0; background: transparent; resize: none; padding: 8px 10px; font: inherit; font-size: 16px; line-height: 1.3; color: var(--text); max-height: 180px; outline: none; box-shadow: none; min-height: 0; display: block; }
.cm-comp .c-send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; background: var(--accent); color: #fff;
  transform: scale(.7); opacity: .45; transition: transform .3s var(--spring), opacity .2s, background .2s; }
.cm-comp.has .c-send { transform: scale(1); opacity: 1; }
.cm-comp .c-send:disabled { cursor: default; }
.cm-comp .c-send .ic { width: 19px; height: 19px; margin-left: -2px; }
.c-send.fly .ic { animation: planeFly .5s var(--ease); }
@keyframes planeFly { 45% { transform: translate(22px, -22px) scale(.6); opacity: 0; } 46% { transform: translate(-18px, 18px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-ro { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); text-align: center; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(18px); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.cm-ro[hidden] { display: none; }
.lnk { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.cm-ctx { position: fixed; z-index: 60; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-radius: 14px; box-shadow: 0 12px 44px rgba(0,0,0,.28); padding: 0; min-width: 220px; overflow: hidden; animation: ctxIn .22s var(--spring); transform-origin: top left; }
@keyframes ctxIn { from { opacity: 0; transform: scale(.8); } }
.cm-ctx button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; border: 0; background: none; padding: 11px 16px; font: 400 16px inherit; font-family: inherit; color: var(--text); cursor: pointer; }
.cm-ctx button + button { border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.cm-ctx button .ic { width: 20px; height: 20px; }
.cm-ctx button:hover { background: var(--hover); } .cm-ctx button.danger { color: var(--err); }
.cm-modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.cm-card { background: var(--panel); border-radius: 18px; padding: 22px; width: min(380px, 100%); position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: rise .3s var(--spring); }
.cm-card .x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; }
.cm-card .ai-ava { margin-bottom: 4px; }
.danger-txt { color: var(--err) !important; display: flex; align-items: center; justify-content: center; gap: 8px; }
.danger-txt .ic { width: 18px; height: 18px; }
.p-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-bottom: 16px; }
.p-head b { font-size: 19px; } .on-t { color: var(--ok); }
.mod-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mod-row span { width: 100%; }
.danger-btn { background: var(--err); } .danger-btn:hover { background: var(--err); filter: brightness(.95); }
@media (max-width: 900px) {
  .cm { grid-template-columns: minmax(0, 1fr); margin: 0 -16px; border-radius: 0; box-shadow: none; }
  .cm-side { border-right: 0; }
  .cm-chat { display: none; }
  .cm.chat-open .cm-side { display: none; } .cm.chat-open .cm-chat { display: flex; }
  .cm-chat.enter { animation: pushIn .38s var(--ease); }
  .cm-chat.enter .cm-msgs, .cm-chat.enter .cm-head { animation: none; }
  @keyframes pushIn { from { transform: translateX(28%); opacity: .4; } }
  .cm-back { display: flex; }
  .cm-ht { align-items: center; text-align: center; }
  .cm-bub { max-width: 84%; }
  .cm-msgs { padding: 8px 8px; }
  .cm-down { bottom: 70px; }
}

/* --- rasmlar --- */
.cm-comp .c-att { flex: none; width: 38px; height: 38px; border: 0; background: none; color: var(--muted); border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: color .15s, transform .2s var(--spring); }
.cm-comp .c-att:hover { color: var(--accent); } .cm-comp .c-att:active { transform: scale(.88) rotate(-12deg); }
.cm-comp .c-att .ic { width: 24px; height: 24px; transform: rotate(45deg); }
.cm-comp .c-att[hidden] { display: none; }
.cm-bub.has-img { padding: 3px; }
.cm-bub.has-img .nm, .cm-bub.has-img .rq { margin-left: 8px; margin-right: 8px; } .cm-bub.has-img .nm { margin-top: 3px; }
.cm-bub.has-img .txt { padding: 4px 8px 0; } .cm-bub.has-img .meta { margin-right: 8px; margin-bottom: 1px; }
.cm-img { display: block; position: relative; max-width: 100%; border-radius: 15px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); cursor: zoom-in; }
.cm-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-row.cont .cm-bub.has-img .cm-img { border-radius: 15px; }
.cm-bub.only-img { background: transparent !important; box-shadow: none; padding: 0; }
.cm-bub.only-img::before { display: none; }
.cm-bub.only-img .nm { position: absolute; z-index: 1; top: 6px; left: 0; margin: 0 0 0 8px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.4); color: #fff !important; font-size: 13px; backdrop-filter: blur(6px); }
.cm-bub.only-img .meta { position: absolute; right: 8px; bottom: 8px; margin: 0; float: none; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff !important; backdrop-filter: blur(6px); }
.cm-bub.only-img .meta .tick.read { color: #8fd1ff; }
.up-ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.3); }
.up-ring svg { width: 46px; height: 46px; padding: 3px; border-radius: 50%; background: rgba(0,0,0,.45); animation: aiSpin 1.4s linear infinite; }
.up-ring circle { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 92; transition: stroke-dashoffset .2s; }
.cm-row.uploading .cm-img { cursor: default; }
.cm-viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 16px; animation: fade .2s; cursor: zoom-out; }
.cm-viewer.out { animation: fadeOut .2s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.cm-viewer img { max-width: 100%; max-height: calc(100dvh - 32px); object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cv-bar { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.cv-bar a, .cv-bar button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; cursor: pointer; text-decoration: none; backdrop-filter: blur(8px); }
.cm-drop { position: absolute; inset: 10px; z-index: 5; display: grid; place-items: center; border: 2.5px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(6px); color: var(--accent); font-weight: 600; font-size: 17px; pointer-events: none; animation: fade .15s; }
.cm-drop[hidden] { display: none; }
.cm-card.pv { padding: 12px; width: min(440px, 100%); }
.cm-card.pv .x { z-index: 2; right: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; }
.pv-img { border-radius: 12px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; max-height: min(60dvh, 480px); }
.pv-img img { max-width: 100%; max-height: min(60dvh, 480px); display: block; object-fit: contain; }
.pv-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.pv-row input { flex: 1; min-width: 0; border-radius: 20px; padding: 9px 14px; font-size: 16px; }
.pv-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pv-send .ic { width: 20px; height: 20px; margin-left: -2px; }
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===================== Admin: murojaatlar pulti ===================== */
.sp { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; height: calc(100dvh - 170px); min-height: 520px; }
.sp-list { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sp-filters { padding: 10px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.sp-filters .seg-f { display: flex; } .sp-filters .seg-f button { flex: 1; padding: 6px 4px; font-size: 12px; }
.sp-items { flex: 1; overflow-y: auto; padding: 6px; }
.sp-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 10px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--text); }
.sp-item:hover { background: var(--hover); } .sp-item.on { background: var(--accent-soft); }
.si-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.si-top { display: flex; justify-content: space-between; gap: 6px; } .si-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-subj { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-conv { padding: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sp-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); }
.sp-empty .ic { width: 48px; height: 48px; opacity: .5; }
.sp-in { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sp-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-back { display: none; }
.sp-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; }
.sp-chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.sp-chat .tk-msgs { flex: 1; }
.sp-quick { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--panel); border-top: 1px solid var(--line); }
.sp-quick button { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 5px 10px; font: 500 12.5px inherit; font-family: inherit; cursor: pointer; }
.sp-quick button:hover { border-color: var(--accent); color: var(--accent); }
.sp-quick + .composer { border-top: 0; }
.sp-info { overflow-y: auto; padding: 14px; font-size: 13.5px; }
.si-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.si-card .ava-c { width: 56px; height: 56px; font-size: 20px; }
.si-bal { font-weight: 700; font-size: 16px; margin-top: 4px; }
.si-acts { margin: 12px 0; }
.sp-info h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.si-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.si-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .sp-body { grid-template-columns: 1fr; } .sp-info { display: none; } }
@media (max-width: 900px) {
  .sp { grid-template-columns: 1fr; height: calc(100dvh - 240px); }
  .sp-conv { display: none; } .sp.conv-open .sp-list { display: none; } .sp.conv-open .sp-conv { display: flex; }
  .sp-back { display: grid; }
}
/* tuzatishlar: telefon */
.cm-side, .cm-chat { min-width: 0; }
@media (max-width: 900px) {
  .cm { grid-template-columns: minmax(0, 1fr); width: auto; }
  .tk-side { order: 0; }
  .tk-chat { height: calc(100dvh - 56px - 64px - 60px); }
}

/* ===================== Qanday ishlaydi: slayd-karusel ===================== */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #3fa9f5; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #2a6fdb; }
.hs { --c1: #3fa9f5; --c2: #2a6fdb; --dir: 1; position: relative; overflow: hidden; border-radius: 28px; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 18px 50px -18px var(--c2);
  transition: --c1 .9s var(--ease), --c2 .9s var(--ease), box-shadow .9s; padding: 26px 34px 18px; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.hs[data-c="green"] { --c1: #4fd18b; --c2: #0f9b74; }
.hs[data-c="orange"] { --c1: #ffb35c; --c2: #ee5a36; }
.hs[data-c="violet"] { --c1: #b18cff; --c2: #5646ea; }
.hs-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hs-bg i { position: absolute; border-radius: 50%; }
.hs-bg .b1 { width: 460px; height: 460px; right: -120px; top: -200px; background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); animation: drift1 16s ease-in-out infinite alternate; }
.hs-bg .b2 { width: 420px; height: 420px; left: -160px; bottom: -220px; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); animation: drift2 20s ease-in-out infinite alternate; }
.hs-bg .b3 { width: 300px; height: 300px; left: 40%; top: 30%; background: radial-gradient(closest-side, rgba(0,0,40,.18), transparent); animation: drift3 24s ease-in-out infinite alternate; }
.hs-bg .dots { inset: -20px; border-radius: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%); }

/* yuqoridagi progress chiziqlari */
.hs-bars { display: flex; gap: 6px; margin-bottom: 18px; }
.hs-bars i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); overflow: hidden; }
.hs-bars b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); border-radius: inherit; }
.hs-bars i.done b { transform: scaleX(1); }

.hs-track { display: grid; cursor: grab; }
.hs.held .hs-track { cursor: grabbing; }
.sl { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: center; position: relative; min-height: 560px;
  visibility: hidden; pointer-events: none; }
.sl.on, .sl.leave { visibility: visible; }
.sl.on { pointer-events: auto; z-index: 1; }
.sl-big { position: absolute; left: -10px; bottom: -40px; font-size: 220px; font-weight: 800; line-height: 1; letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.18); pointer-events: none; opacity: 0; }
.sl-text { max-width: 520px; }
.sl-num { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); font-weight: 600; font-size: 14px; }
.sl-ic { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--c2); display: grid; place-items: center; transition: color .9s; }
.sl-ic .ic { width: 18px; height: 18px; }
.sl h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.02em; margin: 18px 0 12px; }
.sl-text > p { font-size: 17px; line-height: 1.5; margin: 0; color: rgba(255,255,255,.92); }
.sl-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px !important; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.16); backdrop-filter: blur(8px); font-size: 14.5px !important; }
.sl-tip .ic { flex: none; margin-top: 2px; }
.sl-cta { margin-top: 20px; }
.btn.light { background: #fff; color: var(--c2); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btn.light:hover { background: #fff; filter: brightness(.97); }

/* telefon maketi */
.sl-phone { position: relative; justify-self: center; perspective: 1200px; }
.ph { position: relative; width: 260px; border-radius: 42px; padding: 30px 9px 12px; background: #0d1117;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset, 0 40px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); transform-style: preserve-3d; }
.ph img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1169; object-fit: cover; border-radius: 10px 10px 32px 32px; background: #fff; }
.ph-island { position: absolute; z-index: 2; top: 9px; left: 50%; width: 70px; height: 14px; margin-left: -35px; background: #1f2630 !important; border-radius: 20px; background: #0d1117; }
.ph-shine { position: absolute; inset: 30px 9px 12px; border-radius: 10px 10px 32px 32px; pointer-events: none; overflow: hidden; }
.ph-shine::after { content: ""; position: absolute; top: -60%; left: -80%; width: 50%; height: 220%; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); }
.ph-chip { position: absolute; right: -22px; top: 70px; width: 58px; height: 58px; border-radius: 18px; background: #fff; color: var(--c2); display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,.35); opacity: 0; transition: color .9s; }
.ph-chip .ic { width: 28px; height: 28px; }

/* kirish animatsiyalari (slayd .on bo'lganda qayta ishga tushadi) */
.sl.on .sl-big { animation: hsBig 1s var(--ease) both; }
.sl.on .sl-num { animation: hsUp .6s var(--ease) .05s both; }
.sl.on h2 { animation: hsUp .7s var(--ease) .12s both; }
.sl.on .sl-text > p:not(.sl-tip) { animation: hsUp .7s var(--ease) .2s both; }
.sl.on .sl-tip { animation: hsUp .7s var(--ease) .3s both; }
.sl.on .sl-cta { animation: hsUp .7s var(--ease) .4s both; }
.sl.on .ph { animation: hsPhoneIn .9s var(--ease) both, hsFloat 6s ease-in-out .9s infinite; }
.sl.on .ph-shine::after { animation: hsShine 1.4s var(--ease) .5s both; }
.sl.on .ph-chip { animation: hsChip .7s var(--spring) .55s both, hsBob 3.2s ease-in-out 1.3s infinite; }
.sl.leave .sl-text { animation: hsOutText .45s var(--ease) both; }
.sl.leave .ph { animation: hsPhoneOut .55s var(--ease) both; }
.sl.leave .sl-big, .sl.leave .ph-chip { animation: hsFade .3s both; }
@keyframes hsUp { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
@keyframes hsBig { from { opacity: 0; transform: translateX(calc(var(--dir) * 80px)); } to { opacity: 1; } }
@keyframes hsPhoneIn { from { opacity: 0; transform: translateX(calc(var(--dir) * 140px)) rotateY(calc(var(--dir) * -28deg)) rotateZ(calc(var(--dir) * 4deg)) scale(.86); } }
@keyframes hsPhoneOut { to { opacity: 0; transform: translateX(calc(var(--dir) * -160px)) rotateY(calc(var(--dir) * 28deg)) scale(.84); } }
@keyframes hsOutText { to { opacity: 0; transform: translateX(calc(var(--dir) * -40px)); filter: blur(4px); } }
@keyframes hsFade { to { opacity: 0; } }
@keyframes hsFloat { 50% { transform: translateY(-10px) rotateZ(-.6deg); } }
@keyframes hsShine { to { left: 140%; } }
@keyframes hsChip { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; } }
@keyframes hsBob { 50% { transform: translateY(-8px) rotate(4deg); } }

/* boshqaruv */
.hs-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; position: relative; z-index: 2; }
.hs-arr, .hs-play { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px); transition: background .2s, transform .2s var(--spring); }
.hs-arr:hover, .hs-play:hover { background: rgba(255,255,255,.3); } .hs-arr:active, .hs-play:active { transform: scale(.9); }
.hs-play { width: 36px; height: 36px; display: flex; gap: 4px; justify-content: center; }
.hs-play i { width: 4px; height: 13px; border-radius: 2px; background: #fff; transition: all .2s; }
.hs.paused .hs-play i:first-child { width: 0; height: 0; border-radius: 0; background: none; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hs.paused .hs-play i:last-child { display: none; }
.hs-dots { display: flex; gap: 6px; }
.hs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .4s var(--ease), background .3s; }
.hs-dots button.on { width: 26px; background: #fff; }
.howto .how-jump { margin: 16px 0 0; }
.how-jump a { transition: background .3s, color .3s, transform .2s var(--spring); }
.how-jump a.on { background: var(--accent); color: #fff; }
.how-jump a.on span { background: rgba(255,255,255,.25); color: #fff; }

@media (max-width: 900px) {
  .hs { padding: 16px 16px 14px; border-radius: 24px; margin: 0 -4px; }
  .hs-bars { margin-bottom: 14px; gap: 4px; } .hs-bars i { height: 3px; }
  .sl { grid-template-columns: 1fr; gap: 18px; min-height: 0; align-content: start; }
  .sl-phone { order: -1; }
  .ph { width: min(168px, 46vw); border-radius: 34px; padding: 24px 7px 10px; } .ph img, .ph-shine { border-radius: 8px 8px 26px 26px; } .ph-shine { inset: 24px 7px 10px; }
  .ph-island { top: 7px; width: 56px; height: 12px; margin-left: -28px; }
  .ph-chip { right: -30px; top: 34px; width: 48px; height: 48px; border-radius: 15px; } .ph-chip .ic { width: 24px; height: 24px; }
  .sl-big { display: none; }
  .how-head p { margin-bottom: 14px; }
  .sl-num { font-size: 13px; } .sl-ic { width: 28px; height: 28px; }
  .sl h2 { margin: 10px 0 6px; font-size: 25px; } .sl-text > p { font-size: 15px; line-height: 1.45; }
  .sl-tip { font-size: 13.5px !important; margin-top: 12px !important; }
  .hs-ctrl { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs *, .hs *::before, .hs *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .hs { transition: none; }
}