:root {
  /* Sokin, "qimmat" palitra: chuqur qirmizi, iliq neytrallar, oltin urg'u */
  --red: #C41E2A;
  --red-dark: #8C1220;
  --red-soft: #FBF0F1;
  --teal: #0F8A6E;
  --teal-soft: #ECF6F2;
  --gold: #A88A5C;
  --gold-soft: #F7F2EA;
  --ink: #141416;
  --ink-2: #4A4A50;
  --muted: #8E8E95;
  --line: #EEEDEB;
  --hairline: rgba(20, 20, 22, .07);
  --bg: #F5F4F2;
  --card: #FFFFFF;
  --radius: 20px;
  --shadow: 0 1px 1px rgba(20, 20, 22, .03), 0 6px 20px -8px rgba(20, 20, 22, .10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* hidden atributi har doim ustun — display: flex/grid berilgan elementlarda ham */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.005em;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- Sarlavha (faqat brauzerda; ilovada ilova o'z sarlavhasini ko'rsatadi) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
}
.topbar h1 { margin: 0; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .back { font-size: 30px; line-height: 1; padding: 0 8px 4px 0; }

.page { max-width: 640px; margin: 0 auto; padding: 16px 16px 32px; }
.in-app .page { padding-top: 12px; }

/* ---------- Qidiruv ---------- */
.search {
  position: sticky; top: 8px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 16px; padding: 0 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.topbar + .page .search { top: 64px; }
.search-ico { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input[type=search] {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; padding: 15px 0; color: var(--ink); min-width: 0;
}

/* ---------- Viloyat chiplari ---------- */
.chips {
  display: flex; gap: 8px; overflow-x: auto; margin: 14px -16px 4px; padding: 2px 16px 6px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 0; font: inherit; font-size: 13px; font-weight: 500;
  padding: 9px 14px; border-radius: 999px; background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
}
.chip span { color: var(--muted); font-weight: 600; margin-left: 2px; }
.chip.active { background: var(--red); color: #fff; box-shadow: none; }
.chip.active span { color: rgba(255,255,255,.75); }

.count { color: var(--muted); font-size: 13px; margin: 10px 2px 12px; }

/* ---------- Saralash ---------- */
.sortbar {
  display: flex; gap: 4px; padding: 4px; margin: 8px 0 4px;
  background: #EBEBEF; border-radius: 14px;
}
.seg {
  flex: 1; border: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted);
  padding: 9px 4px; border-radius: 10px; background: transparent; cursor: pointer; white-space: nowrap;
}
.seg.active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ---------- Umumiy ko'rsatkichlar ---------- */
.summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 12px 0; padding: 14px 6px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; text-align: center;
}
.summary div + div { border-left: 1px solid rgba(255,255,255,.2); }
.summary b { display: block; font-size: 19px; font-weight: 700; }
.summary span { font-size: 11px; opacity: .8; }

/* ---------- Kartadagi do'konchi / foiz ---------- */
.metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
.metric {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border-radius: 14px; padding: 10px 12px;
}
.metric svg {
  flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px;
  background: #fff; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.metric b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.metric span { font-size: 11.5px; color: var(--muted); }
.metric-bonus { background: rgba(27,166,137,.09); }
.metric-bonus svg { stroke: var(--teal); }
.metric-bonus b { color: var(--teal); }

/* ---------- Do'konchilar ro'yxati ---------- */
.count b { color: var(--ink); }
.shops { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.shop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.shop + .shop { border-top: 1px solid var(--line); }
.shop .avatar { width: 42px; height: 42px; border-radius: 12px; font-size: 17px; }
.shop-name { flex: 1; min-width: 0; }
.shop-name b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-name span { font-size: 12px; color: var(--muted); }
.pct {
  flex: none; font-size: 16px; font-weight: 700; color: var(--teal);
  background: rgba(27,166,137,.1); padding: 7px 11px; border-radius: 12px;
}

.shop { color: inherit; }
.chev { flex: none; width: 18px; height: 18px; fill: none; stroke: #C4C4C8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hudud ---------- */
.regionbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius); padding: 14px 16px;
}
.regionbar svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--red-soft); fill: none; stroke: var(--red); stroke-width: 2; }
.regionbar-text { flex: 1; min-width: 0; }
.regionbar-text small { display: block; font-size: 12px; color: var(--muted); }
.regionbar-text b { font-size: 16px; font-weight: 600; }
.link-btn { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--red); cursor: pointer; padding: 6px 0; }
.picker { background: var(--card); border-radius: var(--radius); padding: 14px 16px; margin-top: 10px; display: grid; gap: 10px; }
.picker[hidden] { display: none; }
.picker label { font-size: 13px; color: var(--muted); }
.picker select { font: inherit; font-size: 15px; padding: 13px 12px; border-radius: 14px; border: 0; background: var(--bg); color: var(--ink); }
.picker .link-btn { justify-self: start; }

.skeleton { height: 66px; border-radius: 16px; margin-top: 12px; background: linear-gradient(90deg, #ececf0, #f6f6f8, #ececf0); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

.rank {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: #B8B8BE;
}
.rank-1 { background: linear-gradient(135deg, #F7C948, #E0A21B); }
.rank-2 { background: linear-gradient(135deg, #C9CCD3, #9EA3AD); }
.rank-3 { background: linear-gradient(135deg, #E3A36B, #B8743B); }

/* ---------- Pastki panel + skaner tugmasi (ilovadagi kabi) ---------- */
.has-bottom-bar .page { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #fff; box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  display: flex; justify-content: center;
}
.scan-fab {
  position: relative; top: -30px;
  width: 68px; height: 68px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--red); color: #fff;
  box-shadow: 0 8px 18px rgba(215,38,45,.38), 0 0 0 6px #fff;
  transition: transform .12s, background .15s;
}
.scan-fab:active { transform: scale(.94); background: var(--red-dark); }
.scan-fab svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Skaner oynasi ---------- */
.no-scroll { overflow: hidden; }
.scanner { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; color: #fff; }
.scanner[hidden] { display: none; }
.scanner-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px; font-size: 14px; font-weight: 500;
}
.scanner-x {
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
}
.scanner-x[hidden] { visibility: hidden; display: block; }
.scan-view { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.scan-view video { width: 100% !important; height: 100% !important; object-fit: cover; }
.scan-status { position: absolute; left: 16px; right: 16px; top: 42%; text-align: center; font-size: 15px; line-height: 1.5; }
.scan-status p { margin: 0 0 16px; }
.scan-status[hidden], .scan-retry[hidden] { display: none; }
.scan-retry { border: 0; cursor: pointer; font: inherit; padding: 12px 28px; }
/* Skaner ichidagi pastki panel: oxirgi o'qilgan kod + "Tayyor" */
.scan-tray {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: #fff; color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.3);
}
.scan-last { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); }
.scan-last b { display: block; color: #0F8F74; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-last small { font-size: 12px; color: var(--muted); }
.scan-ready { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 13px 20px; }
.scan-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 6px #2DD4A7; opacity: 0; }
.scan-flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* "O'qildi" oynasi — OK bosilguncha skaner to'xtab turadi */
.scan-read {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.scan-read[hidden] { display: none; }
.sr-card {
  width: 100%; max-width: 360px; padding: 26px 20px 20px; border-radius: 24px; text-align: center;
  background: #fff; color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35);
  animation: pop .22s cubic-bezier(.2,.9,.3,1.3);
}
.sr-check {
  width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: #1BA689; color: #fff; font-size: 34px; font-weight: 800; box-shadow: 0 0 0 8px rgba(27,166,137,.15);
}
.sr-card h3 { margin: 0; font-size: 22px; }
.sr-code {
  margin: 14px 0 18px; padding: 14px; border-radius: 16px; background: var(--bg);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.sr-code.show { opacity: 1; transform: none; }
.sr-code small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.sr-code b {
  display: block; margin: 4px 0; font-size: 20px; word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.sr-code span { font-size: 12.5px; color: #0F8F74; font-weight: 600; }
.sr-card.is-dup .sr-check { background: #F2A33A; box-shadow: 0 0 0 8px rgba(242,163,58,.18); }
.sr-card.is-dup h3 { color: #9A6300; }
.sr-card.is-dup .sr-code span { color: #B3161C; }
.sr-card.is-dup .sr-code b { text-decoration: line-through; text-decoration-color: rgba(179,22,28,.5); }
.sr-ok { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; padding: 15px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Skaner tugmasidagi sanoq */
.scan-fab { overflow: visible; }
.fab-badge {
  position: absolute; top: -2px; right: -2px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: #fff; color: var(--red); font-size: 12px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.fab-badge[hidden] { display: none; }

/* Sahifadagi "Skanerlangan kodlar" ro'yxati */
.scanlist { margin-top: 16px; background: var(--card); border-radius: var(--radius); padding: 16px; }
.scanlist[hidden] { display: none; }
.scanlist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.scanlist-head h2 { margin: 0; font-size: 16px; }
.scanlist-head h2 span {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 4px;
  border-radius: 12px; background: var(--red); color: #fff; font-size: 12px; vertical-align: 2px;
}
#scanItems { list-style: none; margin: 0 0 12px; padding: 0; max-height: 46vh; overflow-y: auto; }
#scanItems li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
#scanItems li:last-child { border-bottom: 0; }
.si-main { flex: 1; min-width: 0; }
.si-code {
  display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600;
  color: var(--ink); word-break: break-all;
}
a.si-code { color: #1A6FD8; }
.si-main small { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.si-num { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; }
.si-del { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.si-del:hover { background: #FDECEC; color: #C2181F; }
.scanlist-send { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 14px; }
.scanlist-send:disabled { opacity: .6; }
.scanlist-msg { margin: 0 0 10px; font-size: 13px; }
.scanlist-msg[hidden] { display: none; }
.scanlist-msg.bad { color: #C2181F; }
.scanlist-msg.ok { color: #0F6F5B; }
.scan-done { margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: #E3F5EF; color: #0B6B57; font-size: 14px; font-weight: 600; }
.scan-done[hidden] { display: none; }

/* ---------- Do'konchi sahifasi ---------- */
.pct-big { display: inline-block; margin-top: 6px; font-size: 15px; }
.phone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border-radius: var(--radius); padding: 12px 12px 12px 16px;
  font-size: 16px; font-weight: 600;
}
.btn-sm { flex: none; padding: 10px 14px; font-size: 14px; }
.stock { list-style: none; margin: 0; padding: 4px 16px; background: var(--card); border-radius: var(--radius); }
.stock li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 14px; }
.stock li + li { border-top: 1px solid var(--line); }
.stock b { flex: none; font-weight: 600; }
/* Qoldiq bo'limlari: Seksionniy / Panelniy / Kotyol */
.stock-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stock-sec {
  display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 14px;
  background: var(--card); border-radius: var(--radius); color: var(--ink);
}
.stock-sec:active { background: #FAFAFB; }
.sec-ico {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--sec-bg); color: var(--sec-fg);
}
.sec-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-ico.big { width: 60px; height: 60px; border-radius: 18px; }
.sec-ico.big svg { width: 34px; height: 34px; }
.sec-main { flex: 1; min-width: 0; }
.sec-main b { display: block; font-size: 15.5px; font-weight: 600; }
.sec-seksion { --sec-bg: #FDECEC; --sec-fg: #C2181F; }
.sec-panel { --sec-bg: #EAF1FE; --sec-fg: #1A5FC8; }
.sec-kotyol { --sec-bg: #FFF1DE; --sec-fg: #B4610A; }
.sec-hero { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: var(--radius); padding: 18px; }
.sec-hero small { font-size: 12.5px; color: var(--muted); }
.sec-hero h2 { margin: 2px 0 4px; font-size: 19px; }
.sec-hero p { margin: 0; font-size: 13.5px; color: #5B5E68; }
.sec-hero p b { color: var(--sec-fg); }

.muted-box { background: var(--card); border-radius: var(--radius); padding: 16px; margin: 0; color: var(--muted); font-size: 14px; }
.loc-row .loc-addr { font-size: 14.5px; font-weight: 500; line-height: 1.4; min-width: 0; }

.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tile { background: var(--card); border-radius: var(--radius); padding: 16px; text-align: center; }
.tile b { display: block; font-size: 26px; font-weight: 700; }
.tile span { font-size: 12.5px; color: var(--muted); }
.tile-bonus b { color: var(--teal); }
#results { transition: opacity .15s; }
#results.loading { opacity: .45; }

/* ---------- Diler kartasi ---------- */
.card {
  background: var(--card); border-radius: var(--radius); padding: 16px;
  margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card-main { display: flex; gap: 14px; }
.avatar {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 20px;
}
.avatar.big { width: 76px; height: 76px; border-radius: 24px; font-size: 32px; margin: 0 auto 12px; }
.info { min-width: 0; }
.info h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.loc { margin: 0 0 4px; color: var(--red); font-size: 13px; font-weight: 500; }
.addr, .hours { margin: 0 0 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.badge {
  display: inline-block; vertical-align: 2px; margin-left: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--teal); background: rgba(27,166,137,.1); padding: 3px 8px; border-radius: 999px;
}

.actions { display: flex; gap: 10px; margin-top: 14px; }
.btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; border-radius: 14px; font-weight: 600; font-size: 14px;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:active { background: var(--red-dark); }
.btn-light { background: var(--bg); color: var(--ink); }

/* ---------- Bo'sh holat ---------- */
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty-ico { font-size: 40px; margin-bottom: 8px; }
.empty p { color: var(--ink); font-weight: 600; margin: 0 0 6px; }

/* ---------- Diler sahifasi ---------- */
.hero { text-align: center; background: var(--card); border-radius: var(--radius); padding: 24px 16px; }
.hero h2 { margin: 0 0 6px; font-size: 20px; }
.hero .badge { margin: 6px 0 0; }
.actions.wide { margin: 12px 0 16px; }
.actions.wide .btn-light { background: var(--card); }
.facts { background: var(--card); border-radius: var(--radius); margin: 0; padding: 4px 16px; }
.facts div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.facts dd a { color: var(--red); }
.section-title { font-size: 15px; margin: 20px 2px 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--card); padding: 8px 12px; border-radius: 12px; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.link-back { display: block; text-align: center; margin-top: 24px; color: var(--red); font-weight: 600; }

/* =====================================================================
   PREMIUM QATLAM — emoji o'rniga chiziqli ikonkalar, nozik chegara va soyalar
   ===================================================================== */

/* Chiziqli ikonka (templates/dealers/_icons.html) */
.ic {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

h2, h3, .section-title { letter-spacing: -.015em; }
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 26px 4px 10px; }

/* Kartalar: oq, ingichka chegara, yumshoq qatlamli soya */
.regionbar, .picker, .shops, .card, .hero, .phone-row, .stock-sec, .stock, .sec-hero,
.muted-box, .scanlist, .search {
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.shops { border-radius: 22px; }
.shop { padding: 14px 18px; }
.shop + .shop { border-top-color: var(--line); }
.shop-name b { font-weight: 600; letter-spacing: -.01em; }

/* O'rin belgisi — medal emas, nafis halqa */
.rank {
  width: 32px; height: 32px; font-size: 13px; font-weight: 700;
  color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1.5px #DCDAD6;
}
.rank-1 { background: linear-gradient(145deg, #F4E7CB, #D9BC86); color: #5A4317; box-shadow: inset 0 0 0 1px rgba(90, 67, 23, .18); }
.rank-2 { background: linear-gradient(145deg, #F1F1F3, #D3D4D9); color: #45464C; box-shadow: inset 0 0 0 1px rgba(69, 70, 76, .14); }
.rank-3 { background: linear-gradient(145deg, #F2E1D2, #D4A985); color: #5E3A1E; box-shadow: inset 0 0 0 1px rgba(94, 58, 30, .16); }

.pct { background: var(--teal-soft); color: var(--teal); font-weight: 700; letter-spacing: -.01em; }

/* Bo'sh holat: emoji o'rniga halqa ichida ikonka */
.empty-ico {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0;
  background: #fff; color: var(--muted); border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.empty-ico .ic { width: 28px; height: 28px; }
.empty p { font-weight: 600; letter-spacing: -.01em; }

.link-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Tugmalar */
.btn { border-radius: 14px; letter-spacing: -.005em; }
.btn-red { background: var(--ink); color: #fff; }
.btn-red:active { background: #000; }
.phone-row .btn-red, .loc-row .btn-red { background: var(--red); }

/* Hudud qatori va qoldiq bo'limlari */
.regionbar svg { background: var(--red-soft); stroke: var(--red); stroke-width: 1.75; }
.stock-sec { padding: 16px; }
.sec-ico { border-radius: 14px; }
.sec-seksion { --sec-bg: #FBF0F1; --sec-fg: #A61B26; }
.sec-panel { --sec-bg: #EFF3FA; --sec-fg: #2F5596; }
.sec-kotyol { --sec-bg: #F7F2EA; --sec-fg: #8A6A3A; }

/* ---------- Skaner ---------- */
.scan-fab { background: var(--ink); box-shadow: 0 10px 24px -6px rgba(20,20,22,.45), 0 0 0 6px #fff; }
.scan-fab:active { background: #000; }
.fab-badge { color: var(--ink); }
.scanner-x { display: grid; place-items: center; }
.scanner-x .ic { width: 20px; height: 20px; }
.sr-check { background: var(--teal); box-shadow: 0 0 0 8px rgba(15,138,110,.12); }
.sr-check .ic { width: 30px; height: 30px; stroke-width: 2.25; }
.sr-card.is-dup .sr-check { background: var(--gold); box-shadow: 0 0 0 8px rgba(168,138,92,.16); }
.sr-card.is-dup h3 { color: #6E5530; }
.sr-ok { background: var(--ink); }
.scan-last b { display: flex; align-items: center; gap: 6px; color: var(--teal); }
.scan-ready { background: var(--ink); }
.si-del { display: grid; place-items: center; }
.si-del .ic { width: 16px; height: 16px; }
.scanlist-head h2 span { background: var(--ink); }
.scanlist-send { background: var(--ink); }
.scan-done { border: 1px solid rgba(15,138,110,.15); }
.scan-flash { box-shadow: inset 0 0 0 5px rgba(255,255,255,.85); }

/* Chiroq tugmasi yashirin bo'lsa ham joyi qoladi — sarlavha o'rtada tursin */
.scanner-bar #torchBtn[hidden] { display: grid !important; visibility: hidden; }

/* =====================================================================
   QIZIL TEMA — asosiy tugmalar va tanlov belgilari brend qizilida
   (yashil faqat ma'noli joyda: tasdiqlandi / bajarildi)
   ===================================================================== */
.btn-red, .sr-ok, .scan-ready, .scanlist-send { background: var(--red); }
.btn-red:active, .sr-ok:active, .scan-ready:active, .scanlist-send:active { background: var(--red-dark); }
.scan-fab { background: var(--red); box-shadow: 0 10px 24px -6px rgba(196,30,42,.5), 0 0 0 6px #fff; }
.scan-fab:active { background: var(--red-dark); }
.fab-badge { color: var(--red); }
.scanlist-head h2 span { background: var(--red); }

/* =====================================================================
   PRO IKONKALAR — duotone: ingichkaroq chiziq + ichki och sharpa (_icons.html)
   ===================================================================== */
.ic { stroke-width: 1.6; }
.sec-ico svg, .cat-tab-ico svg { stroke-width: 1.55; }
/* Ikonka "plitkalari": yumshoq gradient fon + ichki nozik halqa */
.sec-ico, .gl-ico, .action-ico, .cat-tab-ico, .regionbar svg {
  box-shadow: inset 0 0 0 1px rgba(20, 20, 22, .05), 0 1px 2px rgba(20, 20, 22, .04);
}