/*
 * Baron Doors brendi — www.barondoors.uz bilan bir xil (docs/BRAND-BARONDOORS.md, sayt: src/app/globals.css).
 * Navy #0a1b34 — asosiy (tuzilma, tugma, matn); oq — fon; oltin — kam ishlatiladigan urg'u (faol belgi, ✓, chiziq).
 * Sayt color-mix(in oklch, navy N%, #fff) qiymatlari shu yerda hex ga hisoblangan (eski brauzerlar ham bir xil ko'rsin).
 * Uch ko'rinish (theme.js): yorug' = oq; qorong'i = sayt «.dark» bloki (navy fon, oq matn); tizim = telefon bo'yicha.
 * --navy — asosiy (brend) rang; qorong'ida asosiy tugma oq, ustidagi matn navy (sayt --primary kabi).
 * Holat ranglari ma'nosini saqlaydi: ok — yashil, warn — oltin-jigarrang, danger — saytning --destructive.
 * --device — Reekon ruletkasining o'zi (to'q sariq «+» tugma, lenta): rasmlarda haqiqiy rangda qoladi.
 * Kontrast (scratchpad/palette.py): matn ≥ 4.5:1, chegara/ikonka ≥ 3:1 — ikkala rejimda.
 */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5f6; /* navy 4% */
  --field: #ffffff;
  --ink: #0a1b34;
  --ink-2: #455468; /* navy 72% — text-secondary */
  --line: #d8dbe0; /* navy 14% — border */
  --line-strong: #758090; /* maydon chegarasi: ≥ 3:1 oq fonda */
  --navy: #0a1b34;
  --navy-2: #22324a; /* navy 88% — primary-hover */
  --navy-soft: #e9eaed; /* navy 8% */
  --accent: #b0872f; /* gold-on-light */
  --accent-soft: #f4eee3;
  --wall: #e3e5e9;
  --on-accent: #0a1b34;
  --device: #f5a524;
  --on-device: #2b1d00;
  --ok: #1c6b4a;
  --ok-soft: #e4ece8;
  --on-ok: #ffffff;
  --warn: #7a5810;
  --warn-soft: #f2ecdf;
  --danger: #cc2827; /* oklch(0.55 0.2 27) */
  --danger-soft: #fdebe9;
  --on-danger: #ffffff;
  --on-navy: #ffffff;
  --focus: #0a1b34;
  --top-bg: #ffffff;
  --top-ink: #0a1b34;
  --top-line: #d8dbe0;
  --scrim: rgb(10 27 52 / 0.5);
  --shadow-1: 0 1px 3px 0 rgb(19 16 8 / 0.06), 0 1px 2px -1px rgb(19 16 8 / 0.05);
  --shadow-2: 0 4px 10px -2px rgb(19 16 8 / 0.08), 0 2px 4px -2px rgb(19 16 8 / 0.05);
  /* qog'oz (blanka, eskiz varag'i) — har doim oq, qora siyoh */
  --paper: #ffffff;
  --paper-ink: #000000;
  --paper-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  /* o'lchamlar */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --tap: 48px;
  --fs-sm: 14px;
  --fs: 16px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Qorong'i — sayt «.dark»; ikki blok bir xil bo'lsin (tizim bo'yicha va qo'lda tanlangan) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1b34;
    --surface: #14253d; /* oq 5% — card */
    --surface-2: #1a2a43; /* oq 8% — muted */
    --field: #0a1b34;
    --ink: #ffffff;
    --ink-2: #c2c7cf; /* oq 78% */
    --line: #27364e; /* oq 14% */
    --line-strong: #6e798a; /* ≥ 3:1 navy fonda */
    --navy: #ffffff;
    --navy-2: #dee0e5;
    --navy-soft: #203048; /* oq 11% — accent */
    --accent: #d4a94a; /* gold-on-dark */
    --accent-soft: #363a39;
    --wall: #203048;
    --on-accent: #0a1b34;
    --device: #f5a524;
    --on-device: #2b1d00;
    --ok: #8fd9b4;
    --ok-soft: #1f3948;
    --on-ok: #0a1b34;
    --warn: #e8c574;
    --warn-soft: #2e3538;
    --danger: #ff645f; /* oklch(0.7 0.19 25) */
    --danger-soft: #3b2a3d;
    --on-danger: #0a1b34;
    --on-navy: #0a1b34;
    --focus: #d4a94a;
    --top-bg: #0a1b34;
    --top-ink: #ffffff;
    --top-line: #27364e;
    --scrim: rgb(2 8 18 / 0.7);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 6px 20px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1b34;
  --surface: #14253d;
  --surface-2: #1a2a43;
  --field: #0a1b34;
  --ink: #ffffff;
  --ink-2: #c2c7cf;
  --line: #27364e;
  --line-strong: #6e798a;
  --navy: #ffffff;
  --navy-2: #dee0e5;
  --navy-soft: #203048;
  --accent: #d4a94a;
  --accent-soft: #363a39;
  --wall: #203048;
  --on-accent: #0a1b34;
  --device: #f5a524;
  --on-device: #2b1d00;
  --ok: #8fd9b4;
  --ok-soft: #1f3948;
  --on-ok: #0a1b34;
  --warn: #e8c574;
  --warn-soft: #2e3538;
  --danger: #ff645f;
  --danger-soft: #3b2a3d;
  --on-danger: #0a1b34;
  --on-navy: #0a1b34;
  --focus: #d4a94a;
  --top-bg: #0a1b34;
  --top-ink: #ffffff;
  --top-line: #27364e;
  --scrim: rgb(2 8 18 / 0.7);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 6px 20px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
  color-scheme: dark;
}


* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs) / 1.45 var(--sans);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}
h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 22px 0 8px;
}
a {
  color: var(--navy);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.muted {
  color: var(--ink-2);
}
.small {
  font-size: 13px;
}
.hint {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  margin: 4px 0 10px;
}
.warn {
  background: var(--warn-soft);
  color: var(--warn);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border-left: 4px solid var(--warn);
  font-weight: 600;
}

/* ───── sarlavha: yorug'da oq (yashil matn), qorong'ida to'q yashil ───── */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  /* yon tugmalar o'z kengligida, uzun sarlavha qisqarib «…» bo'ladi — tugma ustiga chiqmaydi */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: calc(4px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  background: var(--top-bg);
  color: var(--top-ink);
  border-bottom: 1px solid var(--top-line);
}
.top-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: var(--r-sm);
  color: inherit;
  font-size: 15px;
  text-decoration: none;
  font-weight: 700;
  justify-self: start;
}
.top-link:last-child {
  text-align: right;
  justify-self: end;
}
.top-link:active {
  background: var(--navy-soft);
}
/* bosh ekran: logotipli sarlavha uzun — chap havola 2 qatorga, brend qolgan joyni oladi */
.top:has(> .brand) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.top:has(> .brand) > .top-link:first-child {
  max-width: 104px;
  font-size: 14px;
  line-height: 1.15;
}
.top .brand {
  font-size: 16px;
  min-width: 0;
}
.pad {
  padding: 4px 16px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  max-width: 720px;
  margin: 0 auto;
}

/* ───── maydonlar ───── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  min-width: 0;
}
.field > span {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
}
input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  padding: 11px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--field);
  color: var(--ink);
  min-height: 50px;
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-2);
  opacity: 1;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  outline: 3px solid var(--focus);
  outline-offset: 0;
}
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

/* ───── ruletka maydonlari ───── */
.sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 10px;
}
/*
 * Yonma-yon maydonlar: yorliq uzunligi tilga qarab har xil (ru/en uzunroq, 2–3 qatorga o'tadi).
 * Har maydon 5 qatorli subgrid: yorliq | maydon | xato | izoh | oraliq. Yorliqlar pastga tekislanadi — maydonlar doim bir chiziqda,
 * xato chiqsa ham qo'shnisi siljimaydi. Subgrid yo'q eski brauzerda — kamida pastki chetlar bir chiziqda.
 */
.sizes,
.grid2 {
  align-items: end;
}
@supports (grid-template-rows: subgrid) {
  .sizes,
  .grid2 {
    align-items: stretch;
  }
  .sizes > .field,
  .grid2 > .field {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-bottom: 0; /* WebKit subgrid'dagi chetki margin'ni qutidan chiqarib yuboradi — oraliq 5-qatorda */
  }
  .sizes > .field::after,
  .grid2 > .field::after {
    content: "";
    grid-row: 5;
    height: 12px;
  }
  .sizes > .field > :first-child,
  .grid2 > .field > :first-child {
    align-self: end;
    margin-bottom: 6px;
  }
  .sizes > .field > :nth-child(n + 3),
  .grid2 > .field > :nth-child(n + 3) {
    margin-top: 6px;
  }
}
.tape {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
.tape-field.big .tape {
  font-size: 24px;
  min-height: 60px;
  padding: 8px 4px;
}
.tape:focus {
  background: var(--navy-soft);
  outline-width: 4px;
}
.tape[readonly] {
  background: var(--navy-soft);
}
.tape[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}
.tape-err {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  overflow-wrap: anywhere;
}
@keyframes tape-ok {
  from {
    background: var(--ok-soft);
    border-color: var(--ok);
  }
}
.tape.tape-ok {
  animation: tape-ok 0.9s ease-out;
}
.tape-field.act > span {
  color: var(--navy);
  font-weight: 700;
}
.tape-field.act > span {
  text-decoration: underline 3px var(--accent);
  text-underline-offset: 4px;
}
/* ruletka xabari: pastda suzuvchi karta */
.tape-banner {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 10;
  max-width: 696px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--shadow-2);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
body.has-tabs .tape-banner {
  bottom: calc(84px + env(safe-area-inset-bottom));
  bottom: calc(var(--tabbar-h, calc(72px + env(safe-area-inset-bottom))) + 12px);
}

/* ───── tugmalar ───── */
button {
  font: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
.btn-big {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r);
  background: var(--navy);
  color: var(--on-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  margin: 12px 0;
  box-shadow: var(--shadow-1);
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}
.btn-big:active:not(:disabled) {
  transform: scale(0.985);
  filter: brightness(0.92);
}
.btn-big:disabled {
  opacity: 0.5;
  box-shadow: none;
}
.btn-line {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.btn-line:active:not(:disabled) {
  background: var(--navy-soft);
}
.btn-line:disabled {
  opacity: 0.5;
}
.danger-btn {
  border-style: solid;
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 700;
}
.danger-btn:active:not(:disabled) {
  background: var(--danger-soft);
}
.danger {
  margin-top: 28px;
  padding-bottom: 96px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}
.chips button,
.seg button {
  min-height: 44px;
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.chips button:active,
.seg button:active {
  border-color: var(--line-strong);
}
.chips button[aria-pressed="true"],
.seg button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
  font-weight: 700;
}
.seg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.seg button {
  /* teng kenglik, kamida 44 px va yozuvidan tor emas — sig'masa keyingi qatorga o'tadi */
  flex: 1 0 44px;
  padding-inline: 8px;
  border-radius: var(--r-sm);
  min-height: 48px;
}
/* tor ustunda (320 px, 2 ustun) ham sig'adi: tugmalar 44–48 px, son o'rtada */
.stepper {
  display: grid;
  grid-template-columns: minmax(44px, var(--tap)) minmax(24px, max-content) minmax(44px, var(--tap));
  align-items: center;
  gap: 6px;
}
.stepper button {
  width: 100%;
  height: var(--tap);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
}
.stepper button:active {
  background: var(--navy-soft);
}
.stepper output {
  min-width: 24px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
.bottom-bar {
  position: sticky;
  bottom: 0;
  padding: 0 16px;
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(transparent, var(--bg) 30%);
}
.actions {
  display: grid;
  gap: 8px;
}

/* ───── ro'yxat ───── */
.zamer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.zamer-item {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-1);
}
.zamer-item:active {
  background: var(--surface-2);
}
.zi-main {
  font-size: 17px;
  font-weight: 700;
}
.zi-sub,
.zi-addr {
  font-size: 14px;
  color: var(--ink-2);
}

/* ───── proyom kartasi: yig'iladigan, chizmali ───── */
.row-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.row-no {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 700;
}
.row-no.done {
  background: var(--ok);
  color: var(--on-ok);
}
.row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
/* to'liq ko'rinadi (o'lchamlar kesilmasin) — tor ekranda 2 qatorga o'tadi */
.row-sum {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.row-sum i {
  font-weight: 400;
  color: var(--ink-2);
}
.row-state {
  flex: 1;
  font-size: 14px;
  color: var(--ink-2);
}
.row-state.ok {
  color: var(--ok);
  font-weight: 700;
}
.row-chev {
  color: var(--ink-2);
  transition: transform 0.2s ease-out;
}
.row-card.open .row-chev {
  transform: rotate(180deg);
}
.row-body {
  display: none;
  padding: 0 14px 14px;
}
.row-card.open .row-body {
  display: block;
}
.row-card.open {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy-soft), var(--shadow-1);
}
.btn-x {
  flex: none;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  font-size: 20px;
  width: 44px;
  height: 44px;
}
.btn-x:active {
  background: var(--surface-2);
}
.btn-x.small {
  width: auto;
  font-size: 14px;
  text-decoration: underline;
}
.more summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

/* ───── eshik/deraza chizmasi (proyom kartasida) ───── */
.door-viz {
  max-width: 260px;
  margin: 0 auto 6px;
}
.door-svg {
  width: 100%;
  height: auto;
  display: block;
}
.dv-wall {
  fill: var(--wall);
}
.dv-open {
  fill: var(--surface);
  stroke: var(--ink-2);
  stroke-width: 2;
}
.dv-jamb {
  fill: var(--accent-soft);
  stroke: var(--ink-2);
  stroke-width: 1;
}
.dv-floor {
  stroke: var(--ink-2);
  stroke-width: 3;
}
.dv-frame {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.dv-sill {
  fill: var(--ink-2);
}
.dv-hit {
  fill: transparent;
  cursor: pointer;
}
.dv-arrow {
  stroke: var(--ink-2);
  stroke-width: 2;
}
.dv-head {
  fill: var(--ink-2);
}
/* son chiziq ustida: atrofidagi «halo» chiziqni uzadi — o'qiladi, burilmaydi */
.dv-val {
  fill: var(--ink);
  font: 700 20px var(--sans);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 6px;
  stroke-linejoin: round;
}
/* ①②③ — maydon yorliqlaridagi raqam bilan bir xil; o'lchangani yashil (faqat rang emas: yonida son chiqadi) */
.dv-badge {
  fill: var(--navy);
  stroke: var(--surface);
  stroke-width: 2px;
}
.dv-no {
  fill: var(--on-navy);
  font: 700 15px var(--sans);
  pointer-events: none;
}
.dv-zone.done .dv-badge {
  fill: var(--ok);
}
.dv-zone.done .dv-no {
  fill: var(--on-ok);
}
.dv-zone.act .dv-arrow {
  stroke: var(--navy);
  stroke-width: 4;
  animation: dv-pulse 1s ease-in-out infinite;
}
.dv-zone.act .dv-head,
.dv-zone.act .dv-val {
  fill: var(--navy);
}
.dv-zone.act .dv-badge {
  stroke: var(--accent);
  stroke-width: 3px;
}
@keyframes dv-pulse {
  50% {
    opacity: 0.35;
  }
}

.step-no {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}
.next-wrap {
  margin: 4px 0 12px;
}
.next-wrap .ok-box {
  margin: 0;
  text-align: center;
}
.next-wrap .btn-big {
  margin: 8px 0 0;
}

.seg-ico button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 68px;
  padding: 6px;
}
.ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.ico circle {
  fill: currentColor;
  stroke: none;
}
.ico .arc {
  stroke-dasharray: 3 2;
}
.ico-t {
  font: 6px var(--sans);
  fill: currentColor;
  stroke: none;
  text-anchor: middle;
}
.small-del {
  margin-top: 12px;
  padding: 8px;
  font-size: 14px;
}

/* «Ruletka ✓» holati sarlavhada */
.tape-status.on {
  background: var(--ok) padding-box;
  color: var(--on-ok);
  padding: 4px 10px;
  margin: 0;
  min-height: 44px;
  border-block: 4px solid transparent;
  border-radius: var(--r-pill);
}

/* ish tartibi: raqamlangan bo'limlar */
.step-h {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.step-h > i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
}

/* ───── qo'llanma ───── */
.guide .lead {
  font-size: 17px;
}
.steps {
  padding-left: 22px;
}
.steps li {
  margin-bottom: 10px;
}
.faq {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}
.faq th,
.faq td {
  border-top: 1px solid var(--line);
  padding: 10px 6px;
  text-align: left;
  vertical-align: top;
}
.faq th {
  width: 40%;
}
.specs {
  padding-left: 20px;
  color: var(--ink-2);
}
.guide-img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  margin: 4px 0 8px;
  border: 1px solid var(--line);
}

/* ───── virtual blanka: Excel shablonning aynan nusxasi (shablon.html) — qog'oz: har doim oq ───── */
.sheet-wrap {
  overflow: hidden;
  padding: 0 8px 16px;
}
.sheet {
  display: inline-block;
  transform-origin: top left;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--paper-shadow);
  color-scheme: light;
}
.xl {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
}
.xl-t {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.xl-t td {
  padding: 0 2px;
  font-size: 11pt;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
}
.xl-t td > span:empty {
  display: none;
}
.xl .rot90 {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.xl .rot255 {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.xl img {
  position: absolute;
  pointer-events: none;
}
/* chizma varag'i (shablon-chizma.html) — blankadan keyin, qog'ozda alohida sahifa */
.xl-chizma {
  border-top: 2px dashed var(--line-strong);
}

@media print {
  @page {
    size: A4 landscape;
    margin: 7mm;
  }
  body {
    background: #fff;
  }
  /* menyu uchun joy qog'ozda kerak emas — 2-bo'sh varaq chiqardi (pastdagi has-tabs qoidasidan kuchli) */
  html body.has-tabs {
    padding-bottom: 0;
  }
  .no-print,
  .tape-banner,
  .no-print-summary > summary,
  .no-print-summary > .actions {
    display: none !important;
  }
  .sheet-wrap {
    padding: 0;
    height: auto !important;
  }
  .sheet {
    transform: none !important;
    box-shadow: none;
  }
  .guide {
    max-width: none;
  }
}
@media print {
  /* A4 albom, 7 mm chetlar: 1069×741 px. Har varaq (blanka, chizma) 1080×799 px → 0,92 bilan bitta sahifa */
  .sheet {
    zoom: 0.92;
    display: block;
    width: max-content;
  }
  .sheet-wrap {
    overflow: visible;
  }
  .xl-chizma {
    border-top: 0;
    break-before: page;
  }
}

/* ───── rasm, joylashuv, jurnal ───── */
.photo-row,
.geo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
}
.photo-btn,
.geo-row .btn-line {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  padding: 10px 16px;
  border-style: solid;
  cursor: pointer;
}
.photo-count,
#geo-out {
  font-size: 14px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.journal summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
}
.journal ol {
  padding-left: 20px;
  font-size: 14px;
  max-height: 320px;
  overflow: auto;
}
/* rasm ko'rish oynasi — har ikkala rejimda qora fon (surat rangini buzmaslik uchun) */
.photo-ov {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  gap: 8px;
}
/* Sahna qolgan joyni oladi, lekin hech qachon tugmalarni pastga itarmaydi (baland 9:20 surat ham);
   rasm ramkasi o'lchami photos.js da hisoblanadi — yorliqlar rasmga nisbatan turadi, sahnaga emas */
.photo-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
.photo-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-hint,
.photo-actions {
  flex: none;
}
.photo-ov .badge {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgb(10 27 52 / 0.92);
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.photo-hint {
  color: #d0d0d0;
  text-align: center;
  margin: 0;
  font-size: 14px;
}
.photo-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
}
.photo-actions .btn-big,
.photo-actions .btn-line {
  margin: 0;
}
.photo-actions .btn-big {
  background: #ffffff;
  color: #0a1b34;
}
.photo-actions .btn-line {
  color: #fff;
  border-color: #8a8a8a;
  border-style: solid;
}

/* ───── CRM ───── */
.me {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
button.zamer-item {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.crm-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.crm-card dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.crm-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}
/* telefon va manzil havolasi — barmoq bilan bosiladi: 44 px balandlik */
.crm-card dd > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.crm-card dt {
  align-self: center;
}
.ok-box {
  background: var(--ok-soft);
  color: var(--ok);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-weight: 700;
}
.crm-login {
  margin-top: 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r);
  padding: 4px 14px;
}
.crm-login summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 700;
}

/* ───── proyom rasmlari ───── */
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 10px;
}
.thumb {
  position: relative;
  margin: 0;
}
.thumb img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: block;
}
.thumb-del {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--danger);
  color: var(--on-danger);
  font-size: 14px;
}

/* ───── mahsulot turi ───── */
.kind-seg {
  margin: 4px 0 10px;
}
.kind-seg button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 64px;
  padding-inline: 4px;
  font-weight: 700;
}
.kind-ico {
  font-size: 22px;
  line-height: 1;
}

/* ───── brend logotipi sarlavhada ───── */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
/* Baron Doors so'z-belgisi (821×180): yorug' fonda — bd-logo-light, navy fonda — bd-logo-dark (theme.js data-theme) */
.brand img {
  flex: none;
  width: auto;
  height: 26px;
}
.brand .logo-dark {
  display: none;
}
:root[data-theme="dark"] .brand .logo-light {
  display: none;
}
:root[data-theme="dark"] .brand .logo-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light {
    display: none;
  }
  :root:not([data-theme="light"]) .brand .logo-dark {
    display: block;
  }
}
.brand-app {
  font-weight: 500;
  color: var(--ink-2);
}

/* ───── pastki menyu (zamer ichida) ───── */
/* --tabbar-h app.js da o'lchanadi (yozuv 2 qatorga o'tsa ~75 px); o'lchanmaguncha — zaxira qiymat */
body.has-tabs {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  padding-bottom: calc(var(--tabbar-h, calc(72px + env(safe-area-inset-bottom))) + 8px);
}
/* yopishqoq pastki panel (O'lchovlar: tanlash) menyu ostida qolmasin */
body.has-tabs .bottom-bar {
  bottom: var(--tabbar-h, 0px);
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--top-bg);
  border-top: 1px solid var(--top-line);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  padding: 8px 1px 6px;
  /* iOS tab-bar kabi 10,5–12 px: 375 px da «Инструменты» butun sig'adi */
  font-size: clamp(10.5px, 2.9vw, 12px);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-2);
  text-decoration: none;
  /* «Инструменты» 5 ustunli menyuga sig'masa — bo'g'in ko'chiriladi, chetdan chiqmaydi */
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* «⌨ Klaviatura» paneli (klaviatura.js, fixed) ochiq turganda sahifa oxiri uning ostida qolmasin —
   masalan ulashdagi «O'tkazib yuborish» tugmasi */
body:has(> .kb-bar):not(.kb-open) {
  padding-bottom: max(calc(96px + env(safe-area-inset-bottom)), calc(var(--tabbar-h, 0px) + 8px));
}
html.kb-open .tabbar {
  display: none;
}
html.kb-open body.has-tabs .tape-banner {
  bottom: calc(12px + env(safe-area-inset-bottom));
}
/* telefon yotqizilganda (balandlik kichik): menyu ixcham — ikonka yonida yozuv, sarlavha past */
@media (orientation: landscape) and (max-height: 500px) {
  .tab {
    flex-direction: row;
    gap: 6px;
    min-height: 48px;
    padding: 4px 4px;
  }
  .tab span {
    padding: 2px 10px;
  }
  .top {
    min-height: 48px;
  }
  /* uchinchi yopishqoq qatlam (tanlash paneli) past ekranning yarmini yeydi — oddiy oqimda qoladi */
  body.has-tabs .bottom-bar {
    position: static;
  }
}
.tab span {
  font-size: 20px;
  line-height: 1;
  padding: 4px 16px;
  border-radius: var(--r-pill);
  transition: background-color 0.16s ease-out;
}
/* tanlangan: yashil «hap» ikonka ortida + qalin yozuv (faqat rang emas) */
.tab[aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
}
.tab[aria-current="page"] span {
  background: var(--navy-soft);
}
.wz-start {
  margin: 12px 0 0;
}
/* matn oqimida: ikonka matn boshida, tugma oxirida (flex'da ikonka yolg'iz qatorda qolardi) */
.full-note .btn-x.small {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  min-width: 44px;
}

/* ───── asboblar ro'yxati ───── */
.tool-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tool {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  min-height: 76px;
  box-shadow: var(--shadow-1);
}
.tool:active {
  background: var(--surface-2);
}
.tool-ico {
  font-size: 28px;
}
.tool b {
  display: block;
  font-size: 17px;
  font-weight: 700;
}
.tool small {
  color: var(--ink-2);
  font-size: 14px;
}

/* ───── yo'l-yo'riq (bosqichma-bosqich) ───── */
.wz {
  padding-top: 8px;
}
.wz-back,
.wz-voice {
  min-height: 44px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.wz-voice {
  min-width: 44px;
  font-size: 22px;
  text-align: right;
}
.wz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  max-width: 720px;
  margin: 0 auto;
  font-weight: 700;
  color: var(--ink-2);
}
.wz-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
/* qilinmagan — bo'sh halqa, qilingan — to'la yashil, hozirgi — uzun hap */
.wz-dots i {
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line-strong);
  background: transparent;
}
.wz-dots i.ok {
  border-color: var(--ok);
  background: var(--ok);
}
.wz-dots i.cur {
  width: 24px;
  border-color: var(--navy);
  background: var(--navy);
}
.wz-say {
  font-size: 19px;
  line-height: 1.45;
  margin: 8px 0 14px;
}
.wz-say.big {
  font-size: 22px;
  font-weight: 700;
}
.wz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.wz-cards.two {
  grid-template-columns: 1fr 1fr;
}
.wz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 12px 8px;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 0.12s ease-out;
}
.wz-card small {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
/* tanlangan karta: qalin yashil ramka + burchakda ✓ (faqat rang emas) */
.wz-card[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy-soft);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.wz-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.wz-card:active {
  transform: scale(0.98);
}
.wz-ico {
  display: flex;
  gap: 2px;
  color: var(--navy);
  font-size: 40px;
  line-height: 1;
}
.wz-ico .pic {
  width: 80px;
  height: 80px;
}
.wz-card[aria-pressed="true"] .wz-ico {
  color: var(--navy);
}
.wz-chips button {
  min-height: 48px;
  font-size: 16px;
}
.wz-value {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
}
.wz-value .tape {
  font-size: 44px;
  min-height: 84px;
  text-align: center;
  border-width: 3px;
  border-radius: var(--r);
}
.wz-value small {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-2);
}
.wz-value .tape-err {
  grid-column: 1 / -1;
  font-size: 15px;
}
.wz-row {
  display: flex;
  gap: 10px;
}
.wz-row .btn-line {
  flex: 1;
}
/* o'lchov tekshiruvi: har xulosa o'z darajasida — to'g'ri / ogohlantirish / qayta o'lchash (rang + chap chiziq + matn) */
.wz-checks {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.wz-check {
  margin: 0;
  padding: 10px 14px;
  border-left: 4px solid;
  border-radius: var(--r-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wz-check.ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok);
}
.wz-check.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn);
}
.wz-check.redo {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 700;
}
.wz-photo {
  cursor: pointer;
}
.wz-done {
  margin: 4px 0 8px;
}
.wz-finish {
  background: var(--ok);
  color: var(--on-ok);
}
.wz-foot {
  max-width: 720px;
  margin: 8px auto 0;
  padding: 0 16px 16px;
}
/* jadval ko'rinishi — ikkinchi darajali yo'l: asosiy tugmalar bilan raqobat qilmasin */
.wz-detail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wz-voice .ico-svg,
.wz-geo .ico-svg,
.wz-photo .ico-svg {
  vertical-align: -5px;
}

/* yo'riq rasmlari (eshik, ilgak, xona) — currentColor + tokenlar */
.pic .p-door {
  fill: var(--navy-soft);
  stroke: currentColor;
  stroke-width: 2;
}
.pic .p-hinge {
  fill: var(--device);
  stroke: currentColor;
}
.pic .p-handle {
  fill: currentColor;
}
.pic .p-room {
  fill: var(--navy-soft);
}
.pic .p-t {
  font: 8px var(--sans);
  fill: currentColor;
}
.pic .p-wall {
  stroke: currentColor;
  stroke-width: 4;
}
.pic .p-leaf {
  stroke: currentColor;
  stroke-width: 3;
}
.pic .p-arc {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 3 2;
}
.pic .p-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* eshik ochilishi — tepadan ko'rinish */
.door-cards .wz-card {
  min-height: 0;
  padding: 10px 6px 12px;
}
.door-cards .wz-card small {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.pic.door-open {
  width: 100%;
  max-width: 150px;
  height: auto;
  color: var(--ink);
}
.pic.door-open .p-room-t {
  font-size: 12px;
  font-weight: 700;
}
.pic.door-open .p-hinge {
  fill: var(--device);
  stroke: currentColor;
  stroke-width: 1.2;
}
.pic.door-open .p-leaf {
  stroke-width: 4;
  stroke-linecap: round;
}
.pic.door-open .p-arc {
  stroke-width: 1.5;
}
.pic.door-open .p-me {
  fill: var(--navy);
}
.pic.door-open .p-arrow {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* oldidan ko'rinish: yopiq eshik, oshiq-moshiq (sariq) ochiladigan tomonda ko'rinadi */
.pic.door-hand {
  width: 100%;
  max-width: 96px;
  height: auto;
  color: var(--ink);
}
.pic.door-hand .p-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.pic.door-hand .p-door {
  stroke-width: 1.5;
}
.pic.door-hand .p-hinge {
  fill: var(--device);
  stroke: currentColor;
  stroke-width: 1.2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.onboard {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--navy-soft);
  color: var(--ink);
}
.onboard ol {
  margin: 6px 0 0;
  padding-left: 20px;
}
.onboard li {
  margin: 4px 0;
}

/* ───── sozlamalar (sozlama.js): katta qatorli ro'yxat, tanlangan — to'la doira ichida ✓ ───── */
.set-group {
  margin: 8px 0 24px;
}
.set-group h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 6px;
}
.set-group h2 .ico-svg {
  width: 22px;
  height: 22px;
  color: var(--navy);
}
.set-group .hint {
  margin-top: 0;
}
.set-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.set-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background-color 0.16s ease-out;
}
.set-opt:first-child {
  border-top: 0;
}
.set-opt:active {
  background: var(--surface-2);
}
.set-opt:focus-visible {
  outline-offset: -3px;
  border-radius: var(--r-lg);
}
.set-opt[aria-pressed="true"] {
  background: var(--navy-soft);
}
.set-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--navy);
}
.set-ico .ico-svg {
  width: 26px;
  height: 26px;
}
.set-opt[aria-pressed="true"] .set-ico {
  background: var(--navy);
  color: var(--on-navy);
}
.set-badge {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.set-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.set-txt b {
  font-size: 17px;
  font-weight: 700;
}
.set-opt[aria-pressed="true"] .set-txt b {
  font-weight: 700;
}
.set-txt small {
  font-size: 14px;
  color: var(--ink-2);
}
/* radio kabi: bo'sh halqa / to'la doira + ✓ */
.set-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
}
.set-opt[aria-pressed="true"] .set-check {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--on-navy);
}

/* ───── yo'l-yo'riq: o'lchov ekrani — ruletka holati, sahna (wizard.js sceneSvg), 3 qadam, «Diqqat» ───── */
.wz-progress:has(.wz-tape-row) {
  flex-wrap: wrap;
  row-gap: 6px;
}
.wz-prog-l {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wz-tape-row {
  display: flex;
  margin-left: auto;
}
.wz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* «Ulash →» havola — barmoq nishoni */
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.wz-chip.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.wz-chip.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 2px solid var(--warn);
}
.wz-mb {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0 0 8px;
}
.wz-scene {
  margin: 0 0 12px;
}
.wz-how > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 700;
  cursor: pointer;
}
.wz-how > summary::after { content: "⌄"; margin-left: auto; }
.wz-how[open] > summary::after { content: "⌃"; }
.wz-how { margin-bottom: 12px; }
.wz-card b { overflow-wrap: normal; word-break: normal; hyphens: none; }
.wz-card:focus:not(:focus-visible) { outline: none; }
.wz-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.ul a[href="#/qollanma"] { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 4px; }
.btn-line[hidden], .btn-big[hidden] { display: none; }
.lin-err:not([hidden]) { color: var(--danger); background: var(--danger-soft); padding: 10px; border-radius: var(--r-sm); }
.lin [aria-invalid="true"] { border: 2px solid var(--danger); }
.wz-field-error { color: var(--danger); }
.wz-field-error[hidden] { display: none; }
.wz .field input[aria-invalid="true"] { border-color: var(--danger); }
.wz-correction { padding: 10px 12px; margin-bottom: 12px; background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); }
.wz-correction p { margin: 0 0 8px; font-weight: 700; }
.wz-correction .btn-line { min-height: 48px; margin: 4px 4px 0 0; }
.wz-accepted[hidden], .wz-correction[hidden] { display: none; }
.wz-value .tape-err:not([hidden]) { color: var(--danger); background: var(--danger-soft); padding: 8px; border-radius: var(--r-sm); }
.wz-value .tape-err:not([hidden])::before { content: "⚠ "; }
.wz-scene figcaption {
  font-size: 15px;
  line-height: 1.4;
  margin-top: 8px;
}
.wz-why {
  color: var(--ink-2);
}
.wz-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.wz-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.wz-step-k {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.wz-step-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 17px;
  font-weight: 700;
}
.wz-step-t small {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.wz-cap {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--device);
  color: var(--on-device);
}
.wz-hand {
  margin: -6px 0 10px;
}
.wz-tip {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  font-size: 15px;
  line-height: 1.4;
}
.wz-tip b {
  color: var(--warn);
}
/* qadam belgilari */
.si {
  margin-top: 2px;
}
.si-wall {
  fill: var(--ink-2);
}
.si-body,
.si-hook {
  fill: var(--ink);
}
.si-back {
  fill: var(--ok);
}
.si-blade {
  fill: var(--line-strong);
}
.si-btn {
  fill: var(--device);
  stroke: var(--on-accent);
  stroke-width: 1;
}
.si-hand {
  fill: var(--accent-soft);
  stroke: var(--ink);
  stroke-width: 1.5;
}
/* sahna */
.sc-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(31vh, 300px);
  margin: 0 auto;
  border-radius: var(--r);
}
/* past ekran: rasm kichrayadi — qadamlar va maydon yaqinroq */
@media (max-height: 700px) {
  .sc-svg {
    max-height: 25vh;
  }
}
.sc-wall,
.sc-cut {
  fill: var(--wall);
}
.sc-hole,
.sc-ceil {
  fill: var(--surface);
}
.sc-side {
  fill: var(--surface-2);
}
.sc-floor {
  fill: var(--line);
}
.sc-edge {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.sc-hole,
.sc-cut-r {
  stroke: var(--ink-2);
  stroke-width: 1.6;
}
.sc-sill {
  fill: var(--ink-2);
}
.sc-hatch-l {
  stroke: var(--line-strong);
  stroke-width: 1.4;
}
.sc-dash {
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
}
.sc-contact {
  fill: none;
  stroke: var(--ok);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-case,
.sc-hook {
  fill: var(--ink);
}
.sc-screen {
  fill: var(--surface-2);
}
.sc-blade {
  fill: var(--line-strong);
  stroke: var(--ink);
  stroke-width: 0.6;
}
.sc-btn {
  fill: var(--device);
  stroke: var(--on-device);
  stroke-width: 0.8;
}
.sc-ring {
  fill: none;
  stroke: var(--device);
  stroke-width: 2.2;
}
.sc-hand {
  fill: var(--accent-soft);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.sc-nail {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1;
}
.sc-lead {
  stroke: var(--navy);
  stroke-width: 1.4;
}
.sc-mk {
  fill: var(--navy);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.sc-mk-t {
  fill: var(--on-navy);
  font: 700 12px var(--sans);
  text-anchor: middle;
}
.sc-t {
  fill: var(--ink-2);
  font: 700 10px var(--sans);
  text-anchor: middle;
}
.sc-cap {
  fill: var(--ink);
  font: 700 10px var(--sans);
}
.sc-end {
  text-anchor: end;
}
.sc-on-cut {
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--wall);
  stroke-width: 4px;
}
.sc-me {
  fill: var(--navy);
}
/* harakat: qo'yiladi → lenta chiqadi → barmoq bosadi (5 s); harakatsiz holat — oxirgi kadr */
.sc-body {
  animation: sc-place 5s ease-out infinite;
}
.sc-blade {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: sc-extend 5s ease-out infinite;
}
.sc-hook-g {
  animation: sc-hook 5s ease-out infinite;
}
.sc-finger {
  animation: sc-press 5s ease-in-out infinite;
}
.sc-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-ring 5s ease-out infinite;
}
@keyframes sc-place {
  0% {
    transform: translateX(16px);
    opacity: 0;
  }
  10%,
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes sc-extend {
  0%,
  12% {
    transform: scaleX(0.03);
  }
  42%,
  100% {
    transform: none;
  }
}
@keyframes sc-hook {
  0% {
    transform: translateX(calc(var(--run) * -1));
    opacity: 0;
  }
  10%,
  12% {
    transform: translateX(calc(var(--run) * -1));
    opacity: 1;
  }
  42%,
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes sc-press {
  0%,
  48% {
    transform: translateY(-14px);
    opacity: 0;
  }
  56% {
    transform: translateY(-4px);
    opacity: 1;
  }
  62%,
  72% {
    transform: none;
    opacity: 1;
  }
  82%,
  100% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
@keyframes sc-ring {
  0%,
  62% {
    transform: scale(0.6);
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  86%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sc-svg * {
    animation: none !important;
  }
}

/* ───── harakatni kamaytirish ───── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn-big:active:not(:disabled),
  .wz-card:active {
    transform: none;
  }
}

/* Sotuvchi: rol belgisi, havola tugmalari, o'zgarmas o'lcham kartalari */
.role-tag{justify-self:end;padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;white-space:nowrap}
.seller-row .row-head{cursor:default}
.seller-row .row-state{color:var(--ink-2)}
.seller-link-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.seller-link-row .btn-line{flex:1 1 140px;min-height:44px}
.seller-note b{white-space:nowrap}

/* Codex frontend: field-first workspace. Existing brand tokens cover both themes.
   No hidden actions, no motion required to understand a measurement. */
:root {
  /* sayt: tugma/maydon rounded-md 0.5rem, karta rounded-xl 0.75rem, oyna/varaq 1rem */
  --r-sm: 0.5rem;
  --r: 0.75rem;
  --r-lg: 1rem;
  --content-wide: 960px;
}
body { line-height: 1.5; }
input, select, textarea { scroll-margin-block: 100px; }
button, a, summary { touch-action: manipulation; }
button, .btn-big, .btn-line { overflow-wrap: anywhere; }
.top { min-height: 68px; }
.top-link { border: 1px solid transparent; }
.top-link:focus-visible { border-color: var(--focus); }
.top .brand { gap: 10px; letter-spacing: -.025em; }
.brand img { width: auto; height: 28px; }
.pad { padding-top: 12px; }
h2 { letter-spacing: -.025em; line-height: 1.3; }
.field > span { line-height: 1.4; }
input, select, textarea { border-width: 1px; box-shadow: var(--shadow-1); }
input:focus, select:focus, textarea:focus { outline-width: 2px; outline-offset: 2px; }
.btn-big { min-height: 56px; letter-spacing: -.015em; }
.btn-line { border-style: solid; border-width: 1px; background: var(--surface); }
.home-workspace { padding-top: 24px; }
.home-intro { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.home-intro > div:first-child { flex: 1; min-width: 0; }
.home-eyebrow { color: var(--ink-2); font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.home-intro h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0 0 10px; color: var(--navy); }
.home-intro .hint { max-width: 46ch; margin-bottom: 0; }
.home-count { display: grid; justify-items: center; align-content: center; flex: none; min-width: 72px; min-height: 80px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.home-count b { font-size: 28px; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.home-count span { color: var(--ink-2); font-size: 12px; margin-top: 4px; }
.home-help { font-size: 14px; color: var(--ink-2); margin: 18px 0 8px; }
.home-workspace > .onboard { border: 1px solid var(--line); padding: 18px; margin: 0 0 16px; background: var(--surface-2); }
.home-workspace > .onboard b { display: block; font-size: 17px; }
.home-workspace > .onboard p { color: var(--ink-2); margin: 8px 0 14px; font-size: 14px; }
.home-workspace > .onboard .btn-big { margin-bottom: 0; }
.home-workspace > [data-act="new"] { margin: 10px 0 20px; }
.home-workspace > .field { margin-bottom: 24px; }
.home-workspace > .muted { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 24px 16px; text-align: center; font-size: 14px; }
.home-workspace .crm-login { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin: 16px 0; }
.home-workspace .crm-login summary { min-height: 48px; padding-block: 14px; line-height: 1.5; }
.zamer-list { gap: 12px; }
.zamer-item { padding: 18px; gap: 6px; border-radius: var(--r); }
.zi-main, .zi-sub, .zi-addr { overflow-wrap: anywhere; }
.zi-main { font-size: 18px; line-height: 1.35; }
.zi-sub { font-size: 13px; }
.row-head { min-height: 76px; padding: 16px; }
.row-no { border-radius: var(--r-sm); width: 38px; height: 38px; }
.row-main { gap: 5px; }
.row-body { padding: 0 16px 16px; }
.seller-row.open { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.seller-row .row-head { background: var(--surface-2); border-bottom: 1px solid var(--line); align-items: flex-start; }
.seller-row .row-body { padding: 18px 16px 6px; }
.seller-row .row-sum { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.seller-size-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.seller-row .field > span { color: var(--navy); }
.role-tag { border: 1px solid var(--line-strong); line-height: 1.3; }
.step-h { padding-bottom: 12px; border-bottom: 1px solid var(--line); gap: 12px; }
.set-list { border-radius: var(--r); }
.set-opt { padding-block: 16px; }
.set-opt[aria-pressed="true"] { background: var(--navy-soft); }
.wz-progress { padding-block: 14px; }
.wz-say.big { font-size: clamp(23px, 5.5vw, 30px); letter-spacing: -.025em; line-height: 1.3; }
.wz-card { min-height: 136px; padding-block: 16px; box-shadow: none; }
.wz-card small { line-height: 1.4; }
.wz-value { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.wz-value .tape { font-variant-numeric: tabular-nums; min-width: 0; background: var(--field); }
.wz-value .tape:focus { background: var(--navy-soft); }
.wz-scene { border-radius: var(--r); }
.tab { min-height: 68px; padding-block: 10px; }
.tab:focus-visible { outline-offset: -4px; }
.tab[aria-current="page"] span { box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) {
  .zamer-item:hover, .tool-list a:hover { border-color: var(--navy); background: var(--surface-2); }
  .wz-card:hover { border-color: var(--line-strong); }
  .btn-line:hover:not(:disabled), .top-link:hover { background: var(--navy-soft); }
}
@media (min-width: 900px) {
  body { background: var(--surface-2); }
  .top { padding-inline: max(24px, calc((100vw - var(--content-wide)) / 2)); }
  .pad { max-width: 820px; }
  .home-workspace { max-width: var(--content-wide); margin: 28px auto; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-1); }
  .home-workspace .zamer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-workspace .zamer-item { height: 100%; }
  .home-intro { margin-bottom: 28px; }
  .home-count { min-width: 88px; min-height: 88px; }
  .tabbar { max-width: 820px; margin-inline: auto; bottom: 12px; border: 1px solid var(--top-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
  body.has-tabs { padding-bottom: calc(var(--tabbar-h, 80px) + 32px); }
  body.has-tabs .bottom-bar { bottom: calc(var(--tabbar-h, 80px) + 20px); }
  body.has-tabs .tape-banner { bottom: calc(var(--tabbar-h, 80px) + 28px); }
  .tab { font-size: 13px; }
}
@media (max-width: 359px) {
  .home-intro { gap: 12px; }
  .home-count { min-width: 60px; padding: 8px; }
  .home-intro h2 { font-size: 25px; }
  .wz-cards { gap: 8px; }
  .wz-card { font-size: 16px; min-height: 128px; }
  .wz-value { padding: 10px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Keep the compact landscape layout after the enlarged shared-control rules. */
@media (orientation: landscape) and (max-height: 500px) {
  .top { min-height: 48px; }
  .tab { min-height: 48px; padding-block: 4px; }
}
@media (forced-colors: active) {
  .wz-card[aria-pressed="true"], .set-opt[aria-pressed="true"], .tab[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -3px; }
}
@media print {
  body { background: var(--paper); }
  .home-workspace { border: 0; box-shadow: none; padding: 0; }
}

/* Keep native file selection reachable with Tab as well as touch. The input
   covers its labelled action but is visually transparent; the label shows focus. */
.wz-photo, .photo-btn { position: relative; }
.wz-photo input[type="file"][hidden],
.photo-btn input[type="file"][hidden] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.wz-photo:has(input:focus-visible), .photo-btn:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.set-reset { border-top: 1px solid var(--line); padding-top: 16px; }
#reset-app .pad { padding-top: 24px; padding-bottom: 32px; }
#reset-app h1 { white-space: normal; font-size: 16px; }
#reset-status { scroll-margin-block: 100px; overflow-wrap: anywhere; }
button.row-head {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: start;
}
button.row-head:focus-visible { outline-offset: -4px; }

/* Yo'l-yo'riq: «o'lchab bo'lmaydi», dobor natijasi, yakun kartalari (Claude; dizaynni Codex yaxshilashi mumkin) */
.wz-na { margin: 10px 0; }
/* «O'lchab bo'lmayaptimi?» — sarlavha emas, bosiladigan tugma (ochiladi/yopiladi) */
.wz-na > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  list-style: none;
}
.wz-na > summary::-webkit-details-marker { display: none; }
.wz-na > summary::after { content: "⌄"; margin-left: auto; font-size: var(--fs-lg); }
.wz-na[open] > summary::after { content: "⌃"; }
.wz-na > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wz-na > summary .ico-svg { color: var(--warn); flex: none; }
.wz-na-yoq { display: flex; align-items: center; gap: 8px; justify-content: center; width: 100%; margin: 10px 0; }
.wz-na-yoq[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.wz-res { width: 100%; border-collapse: collapse; margin: 8px 0; }
.wz-res th, .wz-res td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.wz-sum { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; background: var(--surface); }
.wz-sum.open { border-color: var(--danger); }
.wz-sum h3 { margin: 0 0 6px; font-size: 17px; }
.wz-sum-m { list-style: none; padding: 0; margin: 0 0 6px; }
.wz-sum-m li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.wz-ready { font-weight: 700; }
/* Yakun tepasidagi qisqa masalalar ro'yxati — har biri o'z kartasiga olib boradi */
.wz-jumps ol { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.wz-jump {
  width: 100%;
  min-height: var(--tap);
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--ink);
  font: 600 var(--fs) var(--sans);
  cursor: pointer;
}
.wz-jump::after { content: " ↓"; }
.wz-jump:focus-visible, .wz-sum:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wz-sum { scroll-margin-top: 72px; }
.wz-qty-q { border: 2px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); padding: 10px; margin: 0 0 8px; }
.wz-qty-q p { margin: 0 0 8px; }
.wz-qty-q .wz-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wz-qty-q .wz-row button { flex: 1 1 40%; margin: 0; }
.wz-from-door p { margin: 0 0 8px; }
.wz-from-door .btn-line { margin: 0; }

/* ───── o'lchov ekrani: kontekst → ① ② harakat → rasm → maydon → Saqlash (390×844 da pastki menyudan yuqorida) ───── */
.wz-context { margin: 0 0 6px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700; }
.wz-action { list-style: none; display: grid; gap: var(--s1); margin: 0 0 var(--s2); padding: 0; }
.wz-action li { display: grid; grid-template-columns: 24px 1fr; gap: 6px; font-size: var(--fs); line-height: 1.35; }
.wz-action b { color: var(--navy); font-size: var(--fs-lg); line-height: 1.1; }
.wz-measuring .wz-scene { margin-bottom: var(--s2); }
.wz-measuring .sc-svg { max-height: min(22vh, 190px); }
.wz-measuring .wz-scene figcaption { margin-top: var(--s1); font-size: 13px; text-align: center; color: var(--ink-2); }
.wz-measuring .wz-value { margin: var(--s1) 0 var(--s2); }
.wz-measuring .wz-value .tape { min-height: 68px; font-size: 38px; }
.wz-save { margin: var(--s2) 0; }
.wz-measuring .wz-hand { margin: 0 0 var(--s3); font-size: var(--fs-sm); }
.wz-correction-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.wz-correction-actions .btn-big, .wz-correction-actions .btn-line { margin: 0; min-height: 52px; padding: 10px 8px; font-size: var(--fs); }
.wz-correction { border-left: 4px solid var(--warn); }
.wz-chip.plain { border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
@media (max-height: 700px) {
  .wz-measuring .sc-svg { max-height: 18vh; }
}
@media (max-width: 359px) {
  .wz-action li { font-size: 15px; }
  .wz-correction-actions { grid-template-columns: 1fr; }
}

/* ───── tez / to'liq: tavsiya — bitta katta tugma, tez — ikkinchi darajali ───── */
.wz-mode-main, .wz-mode-alt { display: flex; align-items: center; gap: var(--s3); text-align: left; }
.wz-mode-main span, .wz-mode-alt span { display: grid; gap: 2px; }
.wz-mode-main small, .wz-mode-alt small { font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; }
.wz-mode-main svg { flex: none; }
.wz-mode-alt { border-style: solid; border-color: var(--line); color: var(--ink); }
.wz-mode-alt small { color: var(--ink-2); }

/* ───── oddiy ruletka: lentani o'qish mashqi ───── */
.wz-ruler { display: block; width: 100%; max-height: 130px; margin: var(--s2) 0; }
.wz-ruler rect { fill: var(--device); }
.wz-ruler g { stroke: var(--on-device); stroke-width: 1.5; }
.wz-ruler text { fill: var(--on-device); text-anchor: middle; font-size: 18px; font-weight: 700; }
.wz-ruler-pointer { fill: none; stroke: var(--danger); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wz-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.wz-answers .btn-line { border-style: solid; min-height: 56px; padding: 8px 4px; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.wz-answers .btn-line[aria-pressed="true"] { border-color: var(--navy); background: var(--navy-soft); }
.wz-lesson:empty { display: none; }
.wz-lesson { margin-top: var(--s3); }
.sc-manual-blade > rect { fill: var(--device); stroke: var(--on-device); stroke-width: 0.6; }
.sc-manual-ticks { stroke: var(--on-device); stroke-width: 0.6; }
.sc-manual-zero { stroke: var(--ink); stroke-width: 3; }
.sc-read-point { fill: none; stroke: var(--danger); stroke-width: 2.5; }
.wz-check.seller { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); font-weight: 500; }
.wz-amount { margin-bottom: var(--s3); }
.wz-amount .field { margin-bottom: var(--s1); }
.wz-amount .chips button { min-height: 44px; }
.wz-amount-err:not([hidden]) { color: var(--danger); background: var(--danger-soft); padding: 10px; border-radius: var(--r-sm); }

/* ───── Baron Doors tipografiyasi (sayt): SF, sarlavhalar 600 (sayt 500 — telefonda ko'chada o'qilishi uchun bir pog'ona qalin),
   tugmalar 600, salbiy harf oralig'i; tugma bosilganda — primary-hover, filtr emas ───── */
h1, h2, h3, .home-intro h2 { font-weight: 600; letter-spacing: -0.01em; }
.btn-big, .btn-line, .wz-card b, .tab { font-weight: 600; }
.btn-big, .btn-line { border-radius: var(--r-sm); }
.btn-big:hover:not(:disabled) { background: var(--navy-2); }
.btn-big:active:not(:disabled) { filter: none; background: var(--navy-2); }
code, kbd, .mono { font-family: var(--mono); }
::selection { background: var(--accent-soft); color: var(--ink); }
/* «Tanlanmagan» ro'yxati (sotuvchi blankasi): har band — katakka olib boruvchi tugma */
.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 6px 6px 0 0;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font: 600 var(--fs-sm) / 1.2 var(--sans);
  cursor: pointer;
}
.chip-link:hover { background: var(--navy-soft); }
.chip-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ───── bir qarashda tushunarli: bitta asosiy harakat ───── */
/* o'lchov savoli ochiq bo'lsa — javob tugmalari asosiy; «Saqlash» ikkinchi qora tugma bo'lib chalg'itmasin */
.wz-correction:not([hidden]) ~ .wz-save { display: none; }
/* «Sotuvchi uchun fayl» — boshqa ochiladigan bo'limlar kabi, uchburchak chetdan chiqib ketmasin */
details.sheet-box > summary {
  margin: 12px 16px 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r);
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
}
.wz-finish + .wz-say { margin-top: 20px; }
#crm-out .btn-big { margin-top: 12px; text-align: center; }