/* Hujjat sayti qobig'i — faqat joylashuv (WDS: bo'lim CSS'i faqat to'r, oraliq, sahna yozadi). Qoidalar komponentlarniki bilan bir xil: faqat tokenlar. */
@layer fx.utilities {
  body { margin: 0; }
  .ds-top {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--fx-space-3);
    padding: var(--fx-space-3) var(--fx-space-6);
    background: var(--fx-bg-page);
    border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default);
  }
  .ds-top__brand { font-weight: var(--fx-font-weight-semibold); margin-inline-end: auto; color: var(--fx-text-primary); text-decoration: none; }
  .ds-top__group { display: grid; gap: var(--fx-space-1); font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); }
  .ds-top__now { font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
  /* Sozlamalar paneli (Ustoz 19.10 redizayn): sarlavha + Tiklash, jonli namuna, guruhlar — Rang (mavzu doirachalari),
     Shakl va chegara (koʻrinishli plitkalar: har plitka oʻz qiymatini ichma-ich atribut bilan oʻzi chizadi), Shrift, Qulaylik */
  /* 25.10 (Ustoz): ekranning öng çetida, tepadan pastgaça — sidebar kabi kengroq panel (suzib turuvçi oyna emas); telefonda töliq en */
  .ds-settings { inset: 0 0 0 auto; margin: 0; box-sizing: border-box; inline-size: min(100vw, calc(var(--fx-space-12) * 10)); block-size: 100dvh; max-block-size: none; align-content: start; overflow: auto; overscroll-behavior: contain; padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0; border-inline-start: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: 0; background: var(--fx-bg-surface); color: var(--fx-text-primary); box-shadow: var(--fx-shadow-lg); transition: translate var(--fx-motion-base) var(--fx-ease-enter), overlay var(--fx-motion-base) allow-discrete, display var(--fx-motion-base) allow-discrete; translate: 100% 0; }
  .ds-settings:popover-open { translate: 0 0; }
  @starting-style { .ds-settings:popover-open { translate: 100% 0; } }
  .ds-settings::backdrop { background: color-mix(in oklab, var(--fx-color-black) 18%, transparent); }
  @media (prefers-reduced-motion: reduce) { .ds-settings { transition: none; } }
  .ds-settings:popover-open { display: grid; }
  .ds-set__head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; gap: var(--fx-space-1); padding: var(--fx-space-4) var(--fx-space-3) var(--fx-space-3) var(--fx-space-5); background: var(--fx-bg-surface); }
  .ds-set__head > div { display: grid; flex: 1; min-inline-size: 0; }
  .ds-set__head b { font-size: var(--fx-font-size-md); }
  .ds-set__head small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ds-set__preview { margin-inline: var(--fx-space-5); padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--fx-bg-page); }
  .ds-set__pcard { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-sm); transition: border-radius var(--fx-motion-base) var(--fx-ease-standard), box-shadow var(--fx-motion-base) var(--fx-ease-standard); }
  .ds-set__ph { font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-xl); letter-spacing: -0.01em; }
  .ds-set__pt { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ds-set__prow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); margin-block-start: var(--fx-space-1); pointer-events: none; }
  .ds-set__sec { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-5); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-set__sec:last-child { border-block-end: 0; }
  .ds-set__h { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .ds-set__h svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); color: var(--fx-text-tertiary); }
  /* mavzular: doiracha (sahifa foni + brend yarim oy) va nomi */
  .ds-set__themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--fx-space-12) * 1.25), 1fr)); gap: var(--fx-space-2) var(--fx-space-1); }
  .ds-set__theme, .ds-set__tile { display: grid; justify-items: center; gap: var(--fx-space-2); padding: var(--fx-space-2) var(--fx-space-1); border: 0; border-radius: var(--fx-radius-control); background: none; color: var(--fx-text-secondary); font: inherit; font-size: var(--fx-font-size-xs); cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), color var(--fx-motion-fast) var(--fx-ease-standard); }
  .ds-set__theme:hover, .ds-set__tile:hover { background: var(--fx-bg-subtle); color: var(--fx-text-primary); }
  :is(.ds-set__theme, .ds-set__tile)[aria-pressed="true"] { color: var(--fx-text-primary); font-weight: 600; }
  :is(.ds-set__theme, .ds-set__tile):focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-focus) * -1); }
  .ds-set__sw { display: grid; inline-size: var(--fx-size-avatar-md); aspect-ratio: 1; overflow: hidden; border-radius: var(--fx-radius-circle); background: var(--fx-bg-page); outline: var(--fx-border-width-default) solid var(--fx-border-color-default); outline-offset: calc(var(--fx-border-width-focus) * 1.5); transition: outline-color var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-fast) var(--fx-ease-standard); }
  .ds-set__sw i { background: linear-gradient(135deg, var(--fx-bg-page) 0 46%, var(--fx-bg-brand-solid) 46%); }
  .ds-set__theme:hover .ds-set__sw { scale: 1.06; }
  .ds-set__theme[aria-pressed="true"] .ds-set__sw { outline: var(--fx-border-width-focus) solid var(--fx-text-primary); }
  /* shakl va chegara plitkalari: ichidagi mini chizma tanlangan qiymatni oʻzi koʻrsatadi */
  .ds-set__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-space-2); }
  .ds-set__tile { padding: var(--fx-space-2); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); }
  .ds-set__tile[aria-pressed="true"] { border-color: var(--fx-bg-brand-solid); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); }
  .ds-set__shape, .ds-set__edge { display: grid; inline-size: 100%; block-size: calc(var(--fx-space-12) * 0.9); place-content: center; }
  .ds-set__shape { grid-auto-flow: column; gap: var(--fx-space-1); align-items: center; }
  .ds-set__shape i:first-child { inline-size: calc(var(--fx-space-6) * 1.6); block-size: var(--fx-space-6); border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); }
  .ds-set__shape i:last-child { inline-size: var(--fx-space-6); block-size: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-strong); border-radius: var(--fx-radius-control); }
  .ds-set__edge { padding: var(--fx-space-2); border-radius: var(--fx-radius-control); background: var(--fx-bg-muted); }
  .ds-set__edge i { inline-size: calc(var(--fx-space-12) * 0.9); block-size: var(--fx-space-6); border: var(--fx-border-width-default) solid transparent; border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); }
  /* chegara plitkalari aniq chiziladi (bilim tokenlari ildizda hisoblanadi, ichma-ich atribut ularni qayta hisoblamaydi) */
  .ds-set__edge[data-edge="line"] { background: var(--fx-bg-surface); }
  .ds-set__edge[data-edge="line"] i { border-color: var(--fx-border-color-strong); }
  .ds-set__edge[data-edge="shadow"] i { box-shadow: var(--fx-shadow-md); }
  .ds-set__edge[data-edge="hybrid"] i { display: grid; align-content: center; padding-inline: var(--fx-space-1); }
  .ds-set__edge[data-edge="hybrid"] i::before { content: ""; block-size: calc(var(--fx-space-6) * 0.45); border: var(--fx-border-width-default) solid var(--fx-border-color-strong); border-radius: calc(var(--fx-radius-control) * 0.6); }
  .ds-set__edge[data-edge="auto"] i { border-color: var(--fx-border-color-default); box-shadow: var(--fx-shadow-sm); }
  /* liboslar — har plitkada oʻz rangi va shaklida kichik namuna (ichma-ich atributlar), nomi va xarakteri */
  .ds-set__libos { display: grid; gap: var(--fx-space-2); }
  /* brendlar ilhomidagi liboslar — ixcham roʻyxat (20.10) */
  .ds-set__brands { display: grid; gap: var(--fx-space-2); margin-block-start: var(--fx-space-2); }
  .ds-set__brands > summary { cursor: pointer; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .ds-set__bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-space-1); margin-block-start: var(--fx-space-2); }
  .ds-set__brand { display: flex; align-items: center; gap: var(--fx-space-2); min-inline-size: 0; min-block-size: var(--fx-control-h-sm); box-sizing: border-box; padding: var(--fx-space-1) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); color: inherit; font: inherit; font-size: var(--fx-font-size-xs); white-space: nowrap; overflow: hidden; cursor: pointer; }
  .ds-set__blogo { display: inline-grid; place-items: center; flex: none; inline-size: var(--fx-space-4); aspect-ratio: 1; color: var(--fx-text-primary); }
  .ds-set__blogo svg { inline-size: 100%; block-size: 100%; }
  .ds-set__blogo .fx-mono { font-size: var(--fx-font-size-xs); line-height: 1; }
  .ds-set__brand[aria-pressed="true"] { border-color: var(--fx-text-primary); }
  .ds-set__brand:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  .ds-set__note { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ds-set__lib { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--fx-space-3); align-items: center; padding: var(--fx-space-2) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); background: none; color: var(--fx-text-primary); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), border-color var(--fx-motion-fast) var(--fx-ease-standard); }
  .ds-set__lib:hover { background: var(--fx-bg-subtle); }
  .ds-set__lib[aria-pressed="true"] { border-color: var(--fx-bg-brand-solid); background: var(--fx-bg-brand-subtle); }
  .ds-set__lib:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  .ds-set__lib b { font-size: var(--fx-font-size-sm); }
  .ds-set__lib small { grid-column: 2; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); line-height: 1.35; }
  /* bitta qavat (Ustoz 20.10): karta ichida kulrang plitka va rangli «Aa» yoʻq — libos rangidagi belgi */
  .ds-set__lmini { grid-row: span 2; display: grid; place-items: center; inline-size: var(--fx-space-10); block-size: var(--fx-space-10); color: var(--fx-bg-brand-solid); }
  .ds-set__lmini > svg { inline-size: var(--fx-space-8); block-size: var(--fx-space-8); fill: currentColor; }
  .ds-crown { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-inline-start: var(--fx-space-1); vertical-align: -0.125em; fill: var(--fx-color-amber-600); }
  .ds-set__pro { display: flex; gap: var(--fx-space-2); align-items: start; margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ds-set__pro > .ds-crown { flex: none; margin: 0; }
  .ds-set__lmini i { display: none; }
  .ds-set__lmini .fx-btn { pointer-events: none; }
  .ds-set__adv { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-set__adv > summary { padding: var(--fx-space-4) var(--fx-space-5); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); cursor: pointer; }
  /* shrift juftliklari — plitkalar: nomi va shriftlar; tanlangani brend chegarasi bilan */
  .ds-set__pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-2); }
  .ds-set__pair { display: grid; justify-items: start; gap: calc(var(--fx-space-1) / 2); padding: var(--fx-space-2) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: none; color: var(--fx-text-primary); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), border-color var(--fx-motion-fast) var(--fx-ease-standard); }
  .ds-set__pair:hover { background: var(--fx-bg-subtle); }
  .ds-set__pair[aria-pressed="true"] { border-color: var(--fx-bg-brand-solid); background: var(--fx-bg-brand-subtle); }
  .ds-set__pair b { font-size: var(--fx-font-size-sm); }
  .ds-set__pair small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ds-set__pair:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  .ds-set__manual summary { color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); cursor: pointer; }
  .ds-set__manual[open] summary { margin-block-end: var(--fx-space-2); }
  /* /sozlamalar/ sahifasi: oʻsha mazmun, kengroq — namuna oʻngda yopishqoq, boʻlimlar chapda */
  .ds-set-page { display: grid; gap: var(--fx-space-6); max-inline-size: calc(var(--fx-space-12) * 20); }
  .ds-set-page__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--fx-space-6); align-items: start; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); }
  .ds-set-page__body > .ds-set__preview { grid-column: 2; grid-row: 1 / span 4; position: sticky; inset-block-start: var(--fx-space-6); margin: var(--fx-space-5); }
  .ds-set-page__body > .ds-set__sec { grid-column: 1; }
  .ds-set-page__body .ds-set__pairs { grid-template-columns: repeat(auto-fill, minmax(calc(var(--fx-space-12) * 3.5), 1fr)); }
  @media (max-width: 839.98px) { .ds-set-page__body { grid-template-columns: minmax(0, 1fr); } .ds-set-page__body > .ds-set__preview { grid-column: 1; grid-row: auto; position: static; } }
  .ds-set__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-3); }
  :is(.ds-settings, .ds-set-page) .fx-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-inline-size: 100%; }
  :is(.ds-settings, .ds-set-page) .fx-segment__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-space-1); }
  :is(.ds-settings, .ds-set-page) .fx-segment svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  :is(.ds-settings, .ds-set-page) :is(.fx-select-wrap, .fx-select) { inline-size: 100%; }
  @media (max-width: 599.98px) { .ds-set__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-set__two { grid-template-columns: minmax(0, 1fr); } }
  .ds-layout { display: grid; grid-template-columns: var(--fx-nav-width) minmax(0, 1fr); gap: var(--fx-space-8); padding: var(--fx-space-6); max-inline-size: 1280px; margin-inline: auto; }
  /* Atom menyusi ochiladigan guruhlarda (Ustoz 19.10: «liftni olib tashlab»): aylanish qoladi, chizigʻi koʻrinmaydi */
  #ds-side { scrollbar-width: none; }
  #ds-side::-webkit-scrollbar { display: none; }
  .ds-side { position: sticky; inset-block-start: var(--fx-space-12); align-self: start; }
  .ds-main { display: grid; gap: var(--fx-space-12); min-inline-size: 0; }
  /* keng namuna (admin andozasi oynasi, Ustoz 25.10: «kiçik körinadi»): sahifa matn ustuni (1120) çeklovidan çiqadi — iş maydonining töliq eni */
  :is(.ds-shell, body) .ds-main:has(.ds-keng) { max-inline-size: none; }
  .ds-main:has(.ds-keng) :is(header, section):not(:has(.ds-keng)) { max-inline-size: 1120px; }
  .ds-section { display: grid; gap: var(--fx-space-4); scroll-margin-block-start: var(--fx-space-12); }
  .ds-section > h2 { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-semibold); }
  .ds-lead { margin: 0; color: var(--fx-text-secondary); max-inline-size: 70ch; line-height: 1.6; }
  .ds-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); }
  .ds-demo--stack { display: grid; max-inline-size: 420px; }
  /* «Qarorlar navbati» shabloni namunasi (/namuna/qarorlar/) — boʻlimlar orasi */
  .qr-demo { display: grid; gap: var(--fx-space-10); margin-block-start: var(--fx-space-6); }
  /* «Telefonda koʻrish» (Ustoz 20.10, Figma prototipi kabi): shisha ramka, ichida 390 px enli sahifa — ichki aylantirish yoʻq, bo‘yiga uzun tushadi
     (balandlik iframe'dan postMessage bilan). Telefonda tanlov koʻrinmaydi — u yerda sahifaning oʻzi telefon. */
  .ds-view { justify-self: end; margin-block-end: var(--fx-space-3); }
  .cp-demo:has(> .ds-view) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ds-phone { justify-self: center; box-sizing: content-box; inline-size: 390px; padding: var(--fx-space-3); border: var(--fx-border-width-default) solid color-mix(in oklab, var(--fx-text-primary) 14%, transparent); border-radius: calc(var(--fx-space-12) + var(--fx-space-3)); background: color-mix(in oklab, var(--fx-bg-surface) 55%, transparent); backdrop-filter: blur(var(--fx-space-5)) saturate(1.4); box-shadow: var(--fx-shadow-lg); }
  .ds-phone__screen { position: relative; overflow: hidden; border-radius: var(--fx-space-12); background: var(--fx-bg-page); }
  .ds-phone__screen::before { content: ""; position: absolute; inset-block-start: var(--fx-space-3); inset-inline-start: 50%; z-index: 1; translate: -50% 0; inline-size: calc(var(--fx-space-12) * 2); block-size: var(--fx-space-6); border-radius: var(--fx-radius-pill); background: var(--fx-color-black); }
  .ds-phone__screen > iframe { display: block; inline-size: 100%; block-size: calc(var(--fx-space-12) * 14); border: 0; }
  .ds-phone-page { margin: 0; padding: calc(var(--fx-space-12) + var(--fx-space-2)) var(--fx-space-4) var(--fx-space-8); background: var(--fx-bg-page); }
  .ds-phone-page > .ds-demo { padding: 0; background: transparent; border: 0; box-shadow: none; }
  /* Laptop 1440 (Ustoz 25.10): namuna haqiqiy 1440 px oynada, joyga sığmasa mutanosib kiçrayadi (--ds-k, site.js); ekran ramkasi */
  .ds-laptop { justify-self: stretch; min-inline-size: 0; max-inline-size: 1440px; inline-size: 100%; margin-inline: auto; box-sizing: border-box; padding: var(--fx-space-2); border: var(--fx-border-width-default) solid color-mix(in oklab, var(--fx-text-primary) 14%, transparent); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); box-shadow: var(--fx-shadow-lg); }
  .ds-laptop__screen { position: relative; overflow: hidden; border-radius: calc(var(--fx-radius-surface) - var(--fx-space-2)); background: var(--fx-bg-page); block-size: calc(var(--fx-space-12) * 10); }
  .ds-laptop__screen > iframe { display: block; inline-size: 1440px; block-size: calc(var(--fx-space-12) * 14); border: 0; transform: scale(var(--ds-k, 1)); transform-origin: 0 0; }
  @media (max-width: 839.98px) { .ds-view { display: none; } }
  /* Ekranga qotiriladigan komponentlar (yordamchi, yuklash chizigʻi): namuna maydoni ular uchun «ekran» — transform qotishni shu maydonga bogʻlaydi,
     sahifa boʻsh koʻrinmaydi (Ustoz 20.10: «kirsa hech balo chiqmayapti»; test-ota DEMO-01) */
  .cp-demo .ds-demo:has(> :is(.fx-assistant, .fx-toploader)) { position: relative; transform: translateZ(0); overflow: hidden; min-block-size: calc(var(--fx-space-12) * 15.5); align-content: start; }
  .cp-demo .ds-demo:has(> .fx-toploader) { min-block-size: calc(var(--fx-space-12) * 3); }
  .ds-inline-input { max-inline-size: 240px; }
  .ds-code { margin: 0; padding: var(--fx-space-4); overflow-x: auto; border-radius: var(--fx-radius-surface); background: var(--fx-bg-muted); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); line-height: 1.6; white-space: pre; }
  .ds-meta { margin: 0; padding-inline-start: var(--fx-space-5); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--fx-space-4); }
  .ds-swatch { display: grid; gap: var(--fx-space-2); font-size: var(--fx-font-size-xs); color: var(--fx-text-secondary); }
  .ds-swatch__chip { block-size: var(--fx-space-12); border-radius: var(--fx-radius-control); border: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-swatch code { color: var(--fx-text-primary); }
  .ds-radius { display: grid; place-items: center; block-size: 96px; border: var(--fx-border-width-default) solid var(--fx-border-color-strong); background: var(--fx-bg-surface); font-size: var(--fx-font-size-xs); }
  .ds-release { display: grid; gap: var(--fx-space-3); padding-block-end: var(--fx-space-8); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-release h2 { margin: 0; font-size: var(--fx-font-size-xl); }
  .ds-release ul { margin: 0; padding-inline-start: var(--fx-space-5); display: grid; gap: var(--fx-space-2); color: var(--fx-text-secondary); }
  /* Footer — qora tasma (Ustoz 20.10): data-fx-scheme="dark" bilan tokenlar oʻzi qorongʻi; ish maydoni chetigacha choʻziladi */
  .ds-foot { display: grid; gap: var(--fx-space-10); margin-block-start: calc(var(--fx-space-12) * 1.5); padding: var(--fx-space-12) var(--fx-space-8) var(--fx-space-8); background: var(--fx-bg-page); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ds-foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--fx-space-8); }
  .ds-foot__logo { display: inline-flex; align-items: center; gap: var(--fx-space-2); color: var(--fx-text-primary); text-decoration: none; font-size: var(--fx-font-size-md); }
  .ds-foot__logo > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); }
  .ds-foot__brand p { max-inline-size: 36ch; margin: var(--fx-space-3) 0 0; }
  .ds-foot nav { display: grid; gap: var(--fx-space-2); align-content: start; }
  .ds-foot nav b { margin-block-end: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; }
  .ds-foot a { color: inherit; text-decoration: none; }
  .ds-foot nav a:hover { color: var(--fx-text-primary); }
  .ds-foot__low { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-3); padding-block-start: var(--fx-space-6); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  @media (max-width: 839.98px) { .ds-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-foot__brand { grid-column: 1 / -1; } }
  /* /aloqa formasi va /admin (server/index.mjs) — kulrang qolip */
  .ds-form { display: grid; gap: var(--fx-space-4); max-inline-size: 520px; }
  .ds-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .ds-admin { display: grid; gap: var(--fx-space-6); padding: var(--fx-space-6); max-inline-size: 1100px; margin-inline: auto; }
  .ds-admin .fx-segment__item, .ds-top a.fx-btn { text-decoration: none; }
  .ds-admin__login { display: grid; gap: var(--fx-space-4); max-inline-size: 360px; margin: var(--fx-space-12) auto; }
  .ds-admin__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-3); }
  .ds-admin__bar .fx-input { max-inline-size: 360px; }
  .ds-admin__table { overflow-x: auto; }
  .ds-admin__table table { inline-size: 100%; border-collapse: collapse; font-size: var(--fx-font-size-sm); }
  .ds-admin__table th, .ds-admin__table td { padding: var(--fx-space-3); text-align: start; border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); white-space: nowrap; }
  .ds-admin__table th { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-medium); }
  .ds-admin__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--fx-space-2) var(--fx-space-6); margin: 0; font-size: var(--fx-font-size-sm); }
  .ds-admin__facts dt { color: var(--fx-text-tertiary); }
  .ds-admin__facts dd { margin: 0; }
  .ds-admin__msg { margin: 0; padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--fx-bg-muted); font: inherit; font-size: var(--fx-font-size-sm); white-space: pre-wrap; }
  .ds-admin__form { display: grid; gap: var(--fx-space-4); }
  .ds-subhead { margin: var(--fx-space-4) 0 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .ds-theme { display: grid; gap: var(--fx-space-2); justify-items: start; padding: var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); color: var(--fx-text-primary); font: inherit; font-size: var(--fx-font-size-sm); text-align: start; cursor: pointer; }
  .ds-theme[aria-pressed="true"] { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .ds-theme code { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ds-theme__sw { display: flex; }
  .ds-theme__sw i { inline-size: var(--fx-space-6); block-size: var(--fx-space-6); border-radius: var(--fx-radius-circle); border: var(--fx-border-width-default) solid var(--fx-bg-surface); margin-inline-end: calc(var(--fx-space-2) * -1); }
  /* «Kod» paneli: odamga dizayn, kod — yopiq panelda (WDS «Hujjat sayti» r138, r142) */
  .ds-kod { display: grid; gap: var(--fx-space-3); }
  .ds-kod > summary { justify-self: start; list-style: none; }
  .ds-kod > summary::-webkit-details-marker { display: none; }
  /* chevron — ota shakl (accordion bilan bir xil), matn uchburchagi emas (Ustoz 20.10) */
  .ds-kod > summary::after { content: ""; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); background: currentColor; opacity: 0.55; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--fx-motion-fast) var(--fx-ease-standard); }
  .ds-kod[open] > summary::after { rotate: 180deg; }
  .ds-kod__body { display: grid; gap: var(--fx-space-3); }
  .ds-kod-all { display: flex; justify-content: flex-end; margin-block-end: calc(var(--fx-space-8) * -1); }
  .ds-passport { border-collapse: collapse; font-size: var(--fx-font-size-sm); }
  .ds-passport th { padding: var(--fx-space-2) var(--fx-space-4) var(--fx-space-2) 0; text-align: start; vertical-align: top; color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-medium); white-space: nowrap; }
  .ds-passport td { padding: var(--fx-space-2) 0; color: var(--fx-text-secondary); line-height: 1.6; }
  .ds-passport code, .ds-passport kbd { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); }
  .ds-opt { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ds-grid--chips { grid-template-columns: repeat(auto-fill, minmax(var(--fx-space-12), 1fr)); }
  /* crm:boshi — CRM namunasi toʻri. Bola loyihalar (RedFox admin) shu blokni oʻzgarmasdan oladi (scripts/foxui-yangila.mjs) — tahrir faqat shu yerda */
  /* CRM namunasi — faqat toʻr va oraliq; koʻrinish atomlarniki */
  .crm-page { display: grid; gap: var(--fx-space-6); min-inline-size: 0; }
  .crm-page > * { min-inline-size: 0; }
  .crm-kcard .crm-who { gap: var(--fx-space-2); font-size: var(--fx-font-size-sm); color: var(--fx-text-secondary); }
  .crm-page [hidden] { display: none !important; }
  .crm-page > .fx-page-header { margin-block-end: 0; }
  .crm-note { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .crm-note > svg, .crm-meta > svg, .fx-tabs__tab > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); flex: none; }
  .crm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--fx-space-4); }
  .crm-2col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--fx-space-6); align-items: start; }
  .crm-2col--card { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
  .crm-stack { display: grid; gap: var(--fx-space-4); align-content: start; min-inline-size: 0; }
  .crm-panel { display: grid; gap: var(--fx-space-4); align-content: start; }
  .crm-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); }
  .crm-panel__head .fx-card__title, .crm-group { margin: 0; }
  .crm-group { display: flex; align-items: center; gap: var(--fx-space-2); font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); }
  .crm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-3); }
  /* buyurtmalar jadvali filtrlari (GET forma, Fox OS 21.10): qidiruv keng, yil va holat — ixcham tanlov */
  .crm-filters { margin-block-end: var(--fx-space-4); }
  .crm-filters > .crm-search { flex: 1 1 calc(var(--fx-space-12) * 5); }
  .crm-filters > .fx-select-wrap { flex: 0 0 auto; inline-size: auto; }
  /* cheksiz filtrlar (fx-filterbar + varaq): maydonlar ochiladigan roʻyxat, qiymat yonida son; oraliqlar ikki ustun */
  .crm-filterbar { margin-block-end: var(--fx-space-4); }
  .crm-filterbar .fx-filterbar__search { flex: 1 1 calc(var(--fx-space-12) * 7); }
  .crm-filtr { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; block-size: 100%; margin: 0; }
  .crm-filtr__body { display: grid; gap: var(--fx-space-2); align-content: start; overflow-y: auto; }
  .crm-filtr__f > summary { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-2) 0; font-weight: var(--fx-font-weight-medium); cursor: pointer; }
  .crm-filtr__vals { display: grid; gap: var(--fx-space-1); max-block-size: calc(var(--fx-space-12) * 5); overflow-y: auto; padding-block-end: var(--fx-space-2); }
  .crm-filtr__vals .crm-meta { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  .crm-filtr__vals .fx-check { display: flex; }
  .crm-filtr__range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fx-space-2); margin: var(--fx-space-2) 0 0; padding: 0; border: 0; }
  .crm-filtr__range > legend { float: inline-start; inline-size: 100%; margin-block-end: var(--fx-space-1); padding: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .crm-chips, .crm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .crm-search { flex: 1 1 260px; max-inline-size: 360px; }
  .crm-meta { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  td .crm-meta, .crm-who .crm-meta { display: block; }
  .crm-late, .crm-late.crm-meta { color: var(--fx-fg-error); }
  .crm-num { font-variant-numeric: tabular-nums; font-weight: var(--fx-font-weight-medium); white-space: nowrap; }
  .crm-clip { max-inline-size: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crm-link { color: inherit; text-decoration: none; }
  .crm-link:hover { text-decoration: underline; }
  .crm-who { display: flex; align-items: center; gap: var(--fx-space-3); min-inline-size: 0; }
  .crm-who > span:last-child { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; }
  .crm-who--child { padding-inline-start: var(--fx-space-4); }
  .crm-who--lg { gap: var(--fx-space-4); }
  .crm-who--lg > span:last-child { gap: var(--fx-space-2); }
  .crm-branch { color: var(--fx-text-tertiary); }
  .crm-tasks { display: grid; margin: 0; padding: 0; list-style: none; }
  .crm-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--fx-space-3); padding-block: var(--fx-space-3); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .crm-task:last-child { border-block-end: 0; }
  /* vazifa qatori (Fox OS 21.10): matn oʻraladi, karta kesilmaydi; roʻyxatning oʻzi panel boʻlsa — ichki chekinish; torda oxiri matn ostiga */
  .crm-task__body { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .crm-task__text { overflow-wrap: anywhere; }
  .crm-tasks.crm-panel { gap: 0; padding: var(--fx-space-1) var(--fx-space-4); }
  @media (max-width: 599.98px) { .crm-task { grid-template-columns: auto minmax(0, 1fr); } .crm-task__end { grid-column: 2; flex-wrap: wrap; } }
  .crm-task__end { display: flex; align-items: center; gap: var(--fx-space-2); }
  .crm-task:has(:checked) .crm-task__text { color: var(--fx-text-tertiary); text-decoration: line-through; }
  .crm-funnel { display: grid; gap: var(--fx-space-3); margin: 0; }
  .crm-funnel__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--fx-space-3); }
  .crm-funnel dd { display: grid; grid-template-columns: minmax(0, 1fr) var(--fx-space-6); align-items: center; gap: var(--fx-space-3); margin: 0; text-align: end; }
  .crm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--fx-space-4); overflow-x: auto; padding-block-end: var(--fx-space-2); }
  .crm-col { display: grid; gap: var(--fx-space-3); align-content: start; padding: var(--fx-space-3); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); }
  .crm-col__head { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-1); }
  .crm-col__sum { margin-inline-start: auto; }
  .crm-kcard, .crm-order { display: grid; gap: var(--fx-space-3); }
  .crm-kcard__title { margin: 0; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .crm-order__head, .crm-order__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .crm-order__head { justify-content: space-between; }
  .crm-order .fx-card__title { margin: 0; }
  .crm-compose { display: grid; gap: var(--fx-space-3); }
  .crm-timeline { display: grid; gap: var(--fx-space-5); margin: 0; padding: 0; list-style: none; }
  /* Ilovadagi karkas (bola loyiha: .crm-shell) — ish maydoni oʻqiladigan kenglikda */
  body:has(> .crm-shell) { margin: 0; }
  .crm-shell .fx-shell__main { padding: var(--fx-space-8) var(--fx-space-8) var(--fx-space-12); }
  .crm-shell .crm-page { max-inline-size: 1180px; margin-inline: auto; }
  .crm-shell .fx-shell__top .fx-btn:not([data-shape="icon"]) > svg, .crm-page .fx-btn:not([data-shape="icon"]) > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .crm-user { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .crm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); margin: 0; }
  .crm-form { display: grid; gap: var(--fx-space-4); }
  .crm-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; gap: var(--fx-space-4); }
  .crm-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .crm-closed { color: var(--fx-text-tertiary); }
  .crm-closed summary { cursor: pointer; }
  @media (max-width: 839.98px) { .crm-2col, .crm-2col--card { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 839.98px) { .crm-shell .fx-shell__main { padding: var(--fx-space-5) var(--fx-space-4) var(--fx-space-10); } .crm-user { display: none; } }
  /* buyurtma kartasi: 6 faza chizigʻi, boʻlimlar, yopishqoq xulosa */
  .crm-phase { padding: var(--fx-space-4) var(--fx-space-5); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); overflow-x: auto; }
  .crm-phase a { color: inherit; text-decoration: none; }
  .crm-inline-field { display: flex; align-items: center; gap: var(--fx-space-3); }
  .crm-inline-field .fx-select-wrap { min-inline-size: calc(var(--fx-space-12) * 3.5); }
  .crm-pay { display: grid; gap: var(--fx-space-2); }
  .crm-channels { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fx-font-size-sm); }
  .crm-channels li { display: flex; align-items: center; gap: var(--fx-space-3); }
  .crm-channels li > span:first-child { min-inline-size: calc(var(--fx-space-12) * 2); }
  /* ---- buyurtma sahifasi v2 (maket, Ustoz 21.10): chapda holat, ish, moliya; oʻngda mijoz kartasi (yopishqoq); telefonda ustma-ust, mijoz — holatdan keyin ---- */
  .crm-b2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--fx-space-12) * 8)); gap: var(--fx-space-4); align-items: start; }
  .crm-b2 > * { grid-column: 1; }
  .crm-b2 > .crm-mk { grid-column: 2; grid-row: 1 / span 8; position: sticky; inset-block-start: var(--fx-space-4); }
  @media (max-width: 839.98px) { .crm-b2 { grid-template-columns: minmax(0, 1fr); } .crm-b2 > .crm-mk { grid-column: 1; grid-row: auto; position: static; } }
  .crm-panel__title { margin: 0; font-size: var(--fx-font-size-lg); }
  .crm-b2__ctl { display: grid; gap: var(--fx-space-2); min-inline-size: 0; }
  .crm-seg { justify-self: start; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .crm-seg .fx-segment__item { display: inline-flex; align-items: center; gap: var(--fx-space-2); white-space: nowrap; }
  .crm-b2__money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-space-4); }
  .crm-b2__money > div { display: grid; gap: var(--fx-space-1); }
  .crm-b2__big { font-size: var(--fx-font-size-xl); }
  .crm-b2__taq { display: grid; gap: var(--fx-space-3); justify-items: start; padding-block-start: var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .crm-b2__taq > .fx-barlist { justify-self: stretch; }
  .crm-b2__task { margin: 0; white-space: pre-line; }
  .crm-person { display: inline-flex; align-items: center; gap: var(--fx-space-2); margin-inline-end: var(--fx-space-3); }
  .crm-mk { display: grid; gap: var(--fx-space-5); }
  .crm-mk__head { display: flex; align-items: center; gap: var(--fx-space-3); }
  .crm-mk__t { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .crm-mk__name { margin: 0; font-size: var(--fx-font-size-xl); line-height: 1.2; }
  .crm-mk__sec { display: grid; gap: var(--fx-space-2); padding-block-start: var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .crm-mk__k { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  .crm-mk__dl { font-size: var(--fx-font-size-sm); }
  .crm-mk__ota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); margin: 0; font-weight: var(--fx-font-weight-semibold); }
  .crm-mk__people, .crm-mk__orders { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fx-font-size-sm); }
  .crm-mk__people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-2); }
  .crm-mk__people li > span { display: grid; min-inline-size: 0; }
  .crm-mk__people small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .crm-mk__orders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-2); }
  .crm-mk__orders a { display: inline-flex; align-items: center; gap: var(--fx-space-2); min-inline-size: 0; }
  .crm-mk__orders a > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .crm-mk__all { justify-self: start; font-size: var(--fx-font-size-sm); }
  .crm-stars { color: var(--fx-fg-warning); letter-spacing: 0.1em; } .crm-stars > span { color: var(--fx-border-color-strong); }
  /* boʻsh maydon — yashirilmaydi, toʻldirishga chaqiradi (mijoz tahrir formasini ochadi) */
  .crm-fill { display: inline-flex; align-items: center; gap: var(--fx-space-1); padding: 0; border: 0; background: none; color: var(--fx-text-brand); font: inherit; font-size: var(--fx-font-size-sm); cursor: pointer; }
  .crm-fill > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .crm-fill:hover { text-decoration: underline; }
  .crm-fill:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); border-radius: var(--fx-radius-badge); }
  @media (max-width: 599.98px) { .crm-b2__money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .crm-b2__money > div:first-child { grid-column: 1 / -1; } }
  .crm-sticky { position: sticky; inset-block-start: var(--fx-space-6); align-self: start; }
  .crm-page section[id^="b-"] { scroll-margin-block-start: var(--fx-space-8); }
  /* navbat roʻyxati (taqsimot) va yuklama qatorlari */
  .crm-queue, .crm-load { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .crm-queue > li, .crm-load > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--fx-space-4); padding: var(--fx-space-3) var(--fx-space-5); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .crm-queue > li:last-child, .crm-load > li:last-child { border-block-end: 0; }
  .crm-queue__main { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; }
  .crm-load > li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) var(--fx-space-8) minmax(0, 10rem); }
  .crm-load__orders { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); font-size: var(--fx-font-size-sm); }
  .crm-matrix tbody th { min-inline-size: calc(var(--fx-space-12) * 4.5); font-weight: var(--fx-font-weight-regular); }
  .crm-matrix td { white-space: nowrap; }
  .crm-more { display: flex; align-items: center; justify-content: center; gap: var(--fx-space-4); padding-block: var(--fx-space-4); }
  @media (max-width: 839.98px) { .crm-queue > li, .crm-load > li { grid-template-columns: minmax(0, 1fr) auto; } }
  /* CRM formalari dialogda: sarlavhadan keyin nafas */
  .fx-dialog > form.crm-stack { margin-block-start: var(--fx-space-4); }
  /* Figma havolasi (CRM v2.2): maydon + saqlash + ochish; jadval katagida ixcham (Enter saqlaydi) */
  .crm-figma { display: grid; gap: var(--fx-space-1); margin-block-end: var(--fx-space-3); }
  .crm-figma__row { display: flex; gap: var(--fx-space-2); align-items: center; }
  .crm-figma__row > .fx-input { flex: 1; min-inline-size: 0; }
  .crm-figma--compact { margin: 0; min-inline-size: calc(var(--fx-space-12) * 4); }
  /* crm:oxiri */
  /* dash:boshi — Dashboard namunasi toʻri (koʻrinish atomlarniki) */
  .dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-5); align-items: start; }
  .dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-hero { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
  .dash-hero__main { display: grid; gap: var(--fx-space-2); }
  .dash-label { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .dash-big { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-md, var(--fx-font-size-display-sm)); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .dash-big span { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-lg); }
  .dash-delta { display: inline-flex; align-items: center; gap: var(--fx-space-1); margin: 0; color: var(--fx-fg-success); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); font-variant-numeric: tabular-nums; }
  .dash-delta > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; }
  .dash-delta > span { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); }
  .dash-delta[data-dir="down-bad"] { color: var(--fx-fg-error); }
  .dash-delta[data-dir="flat"] { color: var(--fx-text-tertiary); }
  .dash-parts { grid-template-columns: auto auto; justify-content: start; column-gap: var(--fx-space-5); margin-block-start: var(--fx-space-3); }
  .dash-attn { display: grid; margin: 0; padding: 0; list-style: none; }
  .dash-attn > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-3); padding-block: var(--fx-space-3); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .dash-attn > li:last-child { border-block-end: 0; }
  .dash-attn__txt { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; }
  .dash-attn__ic { display: grid; place-items: center; inline-size: var(--fx-space-8); block-size: var(--fx-space-8); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); }
  .dash-attn__ic > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; }
  .dash-attn__ic[data-tone="error"] { background: var(--fx-bg-error-subtle); color: var(--fx-fg-error); }
  .dash-attn__ic[data-tone="warning"] { background: var(--fx-bg-warning-subtle); color: var(--fx-fg-warning); }
  .fx-stat > .dash-spark { margin-block-start: var(--fx-space-2); }
  @media (max-width: 1199.98px) { .dash-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 839.98px) { .dash-grid, .dash-grid--3, .dash-hero { grid-template-columns: minmax(0, 1fr); } }
  /* dash:oxiri */
  /* task:boshi — Task namunasi toʻri */
  .task-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--fx-space-5); align-items: start; }
  .task-list { display: grid; gap: var(--fx-space-2); min-inline-size: 0; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); overflow: hidden; }
  .task-pane { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); display: grid; gap: var(--fx-space-4); align-content: start; max-block-size: calc(100dvh - var(--fx-size-topbar) - var(--fx-space-8)); overflow: auto; }
  .task-pane__bar { display: flex; align-items: center; gap: var(--fx-space-2); }
  .task-pane__title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); line-height: 1.2; }
  .task-props dd { display: flex; align-items: center; gap: var(--fx-space-2); }
  .task-pane__sec { display: grid; gap: var(--fx-space-3); }
  .task-pane__h { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .task-checks { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fx-font-size-sm); }
  .task-checks :checked ~ * { color: var(--fx-text-tertiary); }
  .task-comment .fx-input-group { inline-size: 100%; }
  @media (max-width: 1199.98px) { .task-split { grid-template-columns: minmax(0, 1fr); } .task-pane { position: static; max-block-size: none; } }
  /* task:oxiri */
  /* chat:boshi — Chat namunasi toʻri: roʻyxat · suhbat · ma'lumot */
  .chat-app { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(240px, 280px); block-size: calc(100dvh - var(--fx-size-topbar) - var(--fx-space-8) * 2); min-block-size: calc(var(--fx-space-12) * 10); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); overflow: hidden; }
  .chat-list, .chat-aside { display: grid; align-content: start; gap: var(--fx-space-3); min-block-size: 0; overflow: auto; border-inline-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .chat-list__head { position: sticky; inset-block-start: 0; z-index: 1; padding: var(--fx-space-3); background: var(--fx-bg-surface); }
  .chat-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-inline-size: 0; min-block-size: 0; }
  .chat-head { display: flex; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-4); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .chat-head__txt { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; font-size: var(--fx-font-size-sm); }
  .chat-head__txt > span { font-size: var(--fx-font-size-xs); }
  .chat-pin { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-2) var(--fx-space-4); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); border-inline-start: calc(var(--fx-border-width-focus) * 1.25) solid var(--fx-text-brand); font-size: var(--fx-font-size-xs); }
  .chat-pin > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: var(--fx-text-brand); flex: none; }
  .chat-pin b { margin-inline-end: var(--fx-space-2); color: var(--fx-text-brand); }
  .chat-log { display: flex; flex-direction: column; min-block-size: 0; overflow: auto; padding: var(--fx-space-4) var(--fx-space-6); background: var(--fx-bg-page); }
  .chat-log > .fx-message { flex: none; }
  .chat-main > .fx-composer { margin: var(--fx-space-3) var(--fx-space-4); }
  .chat-compose { display: flex; align-items: end; gap: var(--fx-space-2); padding: var(--fx-space-3) var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .chat-compose .fx-textarea { flex: 1; min-block-size: var(--fx-control-h-md); resize: none; }
  .chat-aside { border-inline-end: 0; border-inline-start: var(--fx-border-width-default) solid var(--fx-border-color-default); gap: var(--fx-space-5); padding: var(--fx-space-5) var(--fx-space-3); }
  .chat-aside__top { display: grid; justify-items: center; gap: var(--fx-space-2); text-align: center; }
  .chat-aside__top > .fx-avatar { inline-size: var(--fx-size-avatar-lg); block-size: var(--fx-size-avatar-lg); }
  .chat-aside section { display: grid; gap: var(--fx-space-2); }
  @media (max-width: 1199.98px) { .chat-app { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } .chat-aside { display: none; } }
  @media (max-width: 839.98px) { .chat-app { grid-template-columns: minmax(0, 1fr); block-size: auto; } .chat-list { display: none; } }
  /* chat:oxiri */
  /* Rels karkasi (sayt qobigʻi): ish maydoni oʻqiladigan kenglikda, yon panel oʻz ichida aylanadi */
  /* sahifa qisqa boʻlsa ham footer ekran pastida (Ustoz 21.10: «footer fazoga uchib ketdi») — asosiy qism boʻsh joyni oladi */
  .ds-shell .fx-shell__main { display: flex; flex-direction: column; box-sizing: border-box; min-block-size: calc(100dvh - var(--fx-size-topbar)); padding: var(--fx-space-8) var(--fx-space-8) 0; }
  .ds-shell .ds-main { flex: 1 0 auto; inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; }
  .ds-shell .ds-foot { margin-inline: calc(var(--fx-space-8) * -1); padding-inline: var(--fx-space-8); }
  .ds-shell .ds-foot > * { box-sizing: border-box; inline-size: 100%; max-inline-size: 1120px; justify-self: center; }
  /* faqat ikonli tugmada ikon oʻlchamini ota beradi (button.css, ~55 %); yozuvli tugmada — ixcham 16 px */
  @media (min-width: 840px) { .ds-top .fx-btn:not([data-shape="icon"]) > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } }
  .ds-top__brand { margin-inline-end: 0; }
  .ds-top__mark { display: none; flex: none; color: var(--fx-text-primary); }
  .ds-top__mark > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); }
  .ds-top__menu > svg + svg { display: none; }
  .ds-top .fx-breadcrumbs li:not(:last-child) { flex: none; }
  .ds-side-foot { display: none; align-items: center; justify-content: space-between; gap: var(--fx-space-3); flex: none; margin-block-start: auto; padding: var(--fx-space-4) var(--fx-space-4) max(var(--fx-space-6), env(safe-area-inset-bottom, 0px)); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-demo > .fx-chart { flex: 1 1 280px; padding: var(--fx-space-5); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  /* Hujjatdagi karkas va rels namunalari — sahifaning oʻz karkasi bilan toʻqnashmasin */
  .ds-demo .fx-shell { flex: 1; min-block-size: 0; block-size: 420px; overflow: hidden; border-radius: var(--fx-radius-surface); border: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-demo .fx-shell :is(.fx-shell__side, .fx-shell__rail) { position: static; block-size: auto; }
  .ds-demo > .fx-rail { block-size: 360px; }
  @media (max-width: 839.98px) {
    .ds-shell .fx-shell__main { padding: var(--fx-space-5) var(--fx-space-4) 0; }
    .ds-top { padding: var(--fx-space-2) var(--fx-space-4); }
    .ds-top__label, .ds-top__now { display: none; }
    /* Telefonda faqat tepa menyu (Ustoz 20.10, Cursor kabi): belgi · joriy sahifa · qidiruv · sozlamalar · menyu */
    .ds-top { gap: var(--fx-space-2); }
    .ds-top__mark { display: inline-flex; }
    .ds-top__menu { order: 9; }
    .ds-top__menu > svg:first-child { display: none; }
    .ds-top__menu > svg + svg { display: block; }
    /* telefonda yuqori paneldagi ikonli tugmalar fonsiz (Ustoz 20.10: «fon bilan kattadek, fonsiz meyorida») — ghost koʻrinishi */
    .ds-top .fx-btn:not([data-variant]) { background: transparent; border-color: transparent; box-shadow: none; }
    .ds-top .fx-btn:not([data-variant]):hover { background: var(--fx-bg-muted); }
    .ds-shell .ds-foot { margin-inline: calc(var(--fx-space-4) * -1); padding-inline: var(--fx-space-4); }
    .ds-shell[data-mobile="top"] .fx-shell__side .fx-nav { inline-size: auto; }
    .ds-top .fx-breadcrumbs li:not(:last-child), .ds-top .fx-breadcrumbs li + li::before { display: none; }
    .ds-top__brand .fx-badge { display: none; }
    .ds-side-foot { display: flex; }
  }
}

/* gal:boshi — bosh sahifa «B · Galereya» (Ustoz 18.10): mavzu doirachalari, uslub chiplari, pastel kartalar */
@layer fx.utilities {
  .gal { display: grid; gap: var(--fx-space-5); padding: var(--fx-space-8); border-radius: var(--fx-radius-overlay); background: radial-gradient(120% 80% at 100% 0%, var(--fx-bg-category-purple-subtle), transparent 60%), var(--fx-bg-page); }
  .gal-kicker { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .gal-h { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: clamp(var(--fx-font-size-display-sm), 5vw, calc(var(--fx-font-size-display-md) * 1.3)); font-weight: var(--fx-font-weight-semibold); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
  .gal-sw { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .gal-sw__item { display: grid; place-items: center; inline-size: var(--fx-size-avatar-md); block-size: var(--fx-size-avatar-md); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: none; cursor: pointer; }
  .gal-sw__item > i { inline-size: 100%; block-size: 100%; border-radius: inherit; outline: var(--fx-border-width-default) solid var(--fx-border-color-default); outline-offset: calc(var(--fx-border-width-focus) * 1.5); transition: scale var(--fx-motion-fast) var(--fx-ease-standard); }
  .gal-sw__item:hover > i { scale: 1.08; }
  .gal-sw__item[aria-pressed="true"] > i { outline: var(--fx-border-width-focus) solid var(--fx-text-primary); }
  .gal-sw__item:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .gal-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .gal-row .fx-chip[aria-pressed="true"] { background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); }
  .gal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-space-3); }
  .gal-cards .fx-stat { text-decoration: none; color: inherit; }
  @media (max-width: 599.98px) { .gal { padding: var(--fx-space-5); } .gal-cards { grid-template-columns: minmax(0, 1fr); } }
}
/* gal:oxiri */

/* ix:boshi — Ishxona (vazifalar, DS sogʻlomligi, komponentlar holati), PDP «Ishxona/Vazifalar» tuzilmasi, FoxUI kalibri */
@layer fx.utilities {
  .ix-hero { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-8); border-radius: var(--fx-radius-overlay); background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--fx-bg-brand-solid) 55%, var(--fx-color-neutral-950)), var(--fx-color-neutral-950) 65%); color: var(--fx-color-neutral-50); }
  .ix-kicker { margin: 0; color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  .ix-hero .ix-kicker { color: color-mix(in oklab, var(--fx-bg-brand-solid) 45%, var(--fx-color-neutral-50)); }
  .ix-title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: clamp(var(--fx-font-size-display-sm), 4vw, calc(var(--fx-font-size-display-md) * 1.4)); font-weight: var(--fx-font-weight-semibold); letter-spacing: -0.02em; line-height: 1.08; }
  .ix-lead { margin: 0; max-inline-size: 70ch; color: var(--fx-color-neutral-300); line-height: 1.6; }
  .ix-card > *, .ix-over__text { min-inline-size: 0; }
  .ix-card { min-inline-size: 0; display: grid; gap: var(--fx-space-4); padding: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); }
  .ix-h2 { margin: 0; font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); }
  .ix-h2 small, .ix-over h2 small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-regular); }
  .ix-over { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--fx-space-8); }
  @media (max-width: 839.98px) { .ix-over { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
  .ix-over__text { display: grid; gap: var(--fx-space-2); }
  .ix-over__text h2 { margin: 0; font-size: var(--fx-font-size-display-sm); font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-weight: var(--fx-font-weight-semibold); letter-spacing: -0.01em; }
  .ix-over__text p { margin: 0; color: var(--fx-text-secondary); }
  /* foiz halqasi: conic-gradient, markazda raqam */
  .ix-ring { --p: 0; position: relative; display: grid; place-content: center; justify-items: center; inline-size: calc(var(--fx-space-12) * 3.6); aspect-ratio: 1; border-radius: var(--fx-radius-circle); background: conic-gradient(var(--fx-bg-brand-solid) calc(var(--p) * 1%), var(--fx-bg-muted) 0); }
  .ix-ring::before { content: ""; position: absolute; inset: var(--fx-space-4); border-radius: inherit; background: var(--fx-bg-surface); }
  .ix-ring > * { position: relative; }
  .ix-ring b { font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); letter-spacing: -0.02em; }
  .ix-ring span { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ix-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-space-3); margin-block-start: var(--fx-space-2); }
  .ix-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
  @media (max-width: 839.98px) { .ix-kpis, .ix-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* 8 bosqich */
  .ix-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-space-3); margin: 0; padding: 0; list-style: none; }
  @media (max-width: 839.98px) { .ix-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ix-step { display: grid; gap: var(--fx-space-2); align-content: start; padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); }
  .ix-step[data-state="cur"] { outline: var(--fx-border-width-focus) solid var(--fx-bg-brand-solid); background: var(--fx-bg-brand-subtle); }
  .ix-step__n { display: grid; place-items: center; inline-size: var(--fx-space-8); block-size: var(--fx-space-8); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .ix-step[data-state="done"] .ix-step__n, .ix-step[data-state="cur"] .ix-step__n { background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); }
  .ix-step__n svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; }
  .ix-step small, .ix-step__pct { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  /* vazifalar roʻyxati */
  .ix-tasks { display: grid; gap: var(--fx-space-2); margin: var(--fx-space-4) 0 0; padding: 0; list-style: none; }
  .ix-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-4); align-items: center; padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); }
  .ix-task code { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ix-task div { display: grid; gap: var(--fx-space-1); }
  .ix-task span:not(.fx-status) { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  @media (max-width: 599.98px) { .ix-task { grid-template-columns: minmax(0, 1fr); } }
  .ix-empty { margin: var(--fx-space-4) 0 0; color: var(--fx-text-tertiary); }
  .ix-bands { display: grid; gap: var(--fx-space-2); margin-block-start: var(--fx-space-2); max-inline-size: calc(var(--fx-space-12) * 10); }
  .ix-band { display: grid; grid-template-columns: calc(var(--fx-space-12) * 1.4) minmax(0, 1fr) var(--fx-space-8); gap: var(--fx-space-3); align-items: center; font-size: var(--fx-font-size-sm); }
  .ix-band b { text-align: end; font-variant-numeric: tabular-nums; }
  .ix-card .fx-table a { color: var(--fx-text-primary); font-weight: var(--fx-font-weight-medium); text-decoration: none; }
  .ix-card .fx-table a:hover { text-decoration: underline; }
  .ix-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ix-mute { color: var(--fx-text-tertiary); }
  .ix-sub { display: block; margin-block-start: var(--fx-space-1); max-inline-size: 60ch; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); line-height: 1.5; }
  .ix-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-space-3); }
  @media (max-width: 839.98px) { .ix-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ix-link { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: inherit; text-decoration: none; transition: translate var(--fx-motion-base) var(--fx-ease-standard), box-shadow var(--fx-motion-base) var(--fx-ease-standard); }
  .ix-link:hover { translate: 0 calc(var(--fx-space-1) * -1); box-shadow: var(--fx-shadow-md); }
  .ix-link svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); margin-block-end: var(--fx-space-2); fill: var(--fx-text-brand); }
  .ix-link span { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ix-gov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-6); }
  @media (max-width: 839.98px) { .ix-gov { grid-template-columns: minmax(0, 1fr); } }
  .ix-gov h3 { margin: 0 0 var(--fx-space-3); font-size: var(--fx-font-size-md); }
  .ix-raci { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-2) var(--fx-space-4); margin: 0; font-size: var(--fx-font-size-sm); }
  .ix-raci dt { font-weight: var(--fx-font-weight-semibold); }
  .ix-raci dd { margin: 0; color: var(--fx-text-secondary); }
  .ix-ol { display: grid; gap: var(--fx-space-2); margin: 0; padding-inline-start: var(--fx-space-5); font-size: var(--fx-font-size-sm); color: var(--fx-text-secondary); }
  .ix-ol b { color: var(--fx-text-primary); }
  .ix-check { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fx-font-size-sm); }
  .ix-check li { display: flex; gap: var(--fx-space-2); }
  .ix-check svg { flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: var(--fx-fg-success); }
}
/* ix:oxiri */

/* atom:boshi — Atom katalogi (galereya kartalari) va komponent sahifasi (cp-*) */
@layer fx.utilities {
  /* keng namuna (jadval, gantt) ustunni kengaytirmasin — namuna ichida aylanadi */
  .ds-main, .ds-section, .cp-demo { min-inline-size: 0; }
  .ds-demo { max-inline-size: 100%; overflow-x: auto; }
  .ds-count { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-regular); }
  .ds-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--fx-space-12) * 5.4), 1fr)); gap: var(--fx-space-4); }
  .ds-tile { position: relative; display: grid; grid-template-rows: auto 1fr; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); overflow: hidden; transition: translate var(--fx-motion-base) var(--fx-ease-standard), box-shadow var(--fx-motion-base) var(--fx-ease-standard), border-color var(--fx-motion-base) var(--fx-ease-standard); }
  .ds-tile:hover { translate: 0 calc(var(--fx-space-1) * -1); box-shadow: var(--fx-shadow-md); border-color: var(--fx-border-color-strong); }
  .ds-tile:focus-within { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  /* kichik koʻrinish: transform — ichidagi fixed elementlar ham kartada qoladi */
  .ds-tile__pv { position: relative; block-size: calc(var(--fx-space-12) * 3.6); overflow: hidden; background: var(--fx-bg-subtle); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ds-tile__scale { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--fx-space-3); box-sizing: border-box; inline-size: 166.7%; block-size: 166.7%; padding: var(--fx-space-6); transform: scale(0.6); transform-origin: 0 0; pointer-events: none; }
  .ds-tile__scale > * { max-inline-size: 100%; }
  .ds-tile__meta { display: grid; gap: var(--fx-space-1); align-content: start; padding: var(--fx-space-4); }
  .ds-tile__meta h4 { margin: 0; font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); }
  .ds-tile__link { color: inherit; text-decoration: none; }
  .ds-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .ds-tile__link:focus-visible { outline: none; }
  .ds-tile__meta p { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* komponent sahifasi */
  .cp-head { display: grid; gap: var(--fx-space-3); }
  .cp-kicker { margin: 0; color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  .cp-title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: clamp(var(--fx-font-size-display-sm), 4vw, calc(var(--fx-font-size-display-md) * 1.3)); font-weight: var(--fx-font-weight-semibold); letter-spacing: -0.02em; line-height: 1.08; }
  .cp-lead { margin: 0; max-inline-size: 72ch; color: var(--fx-text-secondary); font-size: var(--fx-font-size-lg); line-height: 1.6; }
  .cp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .cp-cls { padding: calc(var(--fx-space-1) / 2) var(--fx-space-2); border-radius: var(--fx-radius-badge); background: var(--fx-bg-muted); font-size: var(--fx-font-size-xs); }
  .cp-demo { overflow-x: clip; }
  @media (max-width: 599.98px) { .cp-demo .ds-demo { padding: var(--fx-space-4) !important; } }
  .cp-demo .ds-demo { min-block-size: calc(var(--fx-space-12) * 4); padding: var(--fx-space-10); background: var(--fx-bg-subtle); }
  .cp-sec { display: grid; gap: var(--fx-space-4); }
  .cp-h2 { margin: 0; font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); }
  /* Manbaa chiziqli/chiziqsiz solishtiruvi (/namuna/manbaa-chiziqsiz/): har ustun — oʻz libosi va sahifa foni */
  .mbc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fx-space-12) * 9)), 1fr)); gap: var(--fx-space-6); }
  .mbc-col { display: grid; gap: var(--fx-space-4); align-content: start; padding: var(--fx-space-6); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-page); color: var(--fx-text-primary); }
  .mbc-k { margin: 0; font-weight: var(--fx-font-weight-semibold); }
  .mbc-i { margin: calc(var(--fx-space-3) * -1) 0 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .mbc-col .fx-search__hints { margin-block-start: calc(var(--fx-space-2) * -1); }
  .mbc-card { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-5); }
  .mbc-card h3 { margin: 0; font-size: var(--fx-font-size-xl); }
  .mbc-card p { margin: 0; color: var(--fx-text-secondary); }
  .mbc-chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .mbc-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-2) var(--fx-space-4); margin: 0; font-size: var(--fx-font-size-sm); }
  .mbc-dl dt { color: var(--fx-text-tertiary); } .mbc-dl dd { margin: 0; }
  .mbc-inner { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-3) var(--fx-space-4); } .mbc-inner small { color: var(--fx-text-tertiary); }
  .mbc-col .fx-letter { padding: var(--fx-space-6); }
  /* oq blok: sahifa fonida mazmun — chiziqsiz oq karta (gibrid chegara); faqat jadval boʻlsa — ingichka ichki chekinish, jadval toʻliq eniga */
  .cp-card { display: grid; gap: var(--fx-space-4); min-inline-size: 0; padding: var(--fx-space-5) var(--fx-space-6); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .cp-card:has(> .fx-table-scroll:first-child) { padding: var(--fx-space-2) var(--fx-space-3) var(--fx-space-3); }
  .cp-card > .fx-table-scroll + * { padding-inline: var(--fx-space-3); }
  .cp-p { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.6; }
  .cp-note { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .cp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-4); }
  @media (max-width: 839.98px) { .cp-two { grid-template-columns: minmax(0, 1fr); } }
  .cp-do, .cp-dont { display: grid; gap: var(--fx-space-3); align-content: start; padding: var(--fx-space-5); border-radius: var(--fx-radius-surface); }
  .cp-do { background: var(--fx-bg-success-subtle); }
  .cp-dont { background: var(--fx-bg-error-subtle); }
  .cp-do b, .cp-dont b { display: flex; align-items: center; gap: var(--fx-space-2); }
  .cp-do svg, .cp-dont svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); }
  .cp-do svg { fill: var(--fx-fg-success); }
  .cp-dont svg { fill: var(--fx-fg-error); }
  .cp-do ul, .cp-dont ul { display: grid; gap: var(--fx-space-2); margin: 0; padding-inline-start: var(--fx-space-5); font-size: var(--fx-font-size-sm); line-height: 1.55; }
  .cp-do a, .cp-dont a { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
  .cp-anat { display: grid; gap: var(--fx-space-2); margin: 0; padding-inline-start: var(--fx-space-5); }
  .cp-anat li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); }
  .cp-anat code { color: var(--fx-text-secondary); }
  .cp-chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .cp-kin { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--fx-space-12) * 5), 1fr)); gap: var(--fx-space-3); }
  .cp-kin__a { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); color: inherit; text-decoration: none; }
  .cp-kin__a:hover { border-color: var(--fx-border-color-strong); }
  .cp-kin__a span { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); line-height: 1.5; }
  .cp-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-3); padding-block-start: var(--fx-space-6); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .cp-pager a { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); color: inherit; text-decoration: none; }
  .cp-pager a[data-next] { text-align: end; }
  .cp-pager a:hover { border-color: var(--fx-border-color-strong); }
  .cp-pager span { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
}
/* atom:oxiri */

/* wn:boshi — «Nima yangi» E gibrid: bahaybat joriy versiya + kunlar lentasi (13.10 qarori) */
@layer fx.utilities {
  .wn-hero { display: grid; gap: var(--fx-space-5); padding: var(--fx-space-8); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: radial-gradient(60% 90% at 100% 0%, var(--fx-bg-category-purple-subtle), transparent 70%), var(--fx-bg-surface); }
  .wn-hero__top { display: flex; align-items: center; gap: var(--fx-space-3); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .wn-hero__mid { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-6); padding-block-end: var(--fx-space-5); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .wn-big { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: clamp(calc(var(--fx-font-size-display-md) * 1.6), 9vw, calc(var(--fx-font-size-display-md) * 3.2)); font-weight: var(--fx-font-weight-semibold); line-height: 0.95; letter-spacing: -0.04em; }
  .wn-big i { color: var(--fx-text-disabled); font-style: normal; }
  .wn-big b { color: var(--fx-text-brand); }
  .wn-facts { display: flex; flex-wrap: wrap; gap: var(--fx-space-8); margin: 0; }
  .wn-facts div { display: grid; gap: var(--fx-space-1); }
  .wn-facts dt { font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .wn-facts dd { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .wn-hero__bob { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-3); }
  .wn-mono { color: var(--fx-text-tertiary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); letter-spacing: 0.06em; }
  .wn-hero__cmd { margin-inline-start: auto; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .wn-hero__cmd a { color: inherit; }
  /* turi boʻyicha filtr — oddiy tablar (Ustoz 21.10: «tablaring juda kichik»): segment, har birida son */
  .wn-filter { justify-self: start; max-inline-size: 100%; font-size: var(--fx-font-size-md); }
  .wn-filter__n { margin-inline-start: var(--fx-space-2); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); font-variant-numeric: tabular-nums; }
  .wn-days { display: grid; gap: var(--fx-space-8); margin: 0; padding: 0; list-style: none; }
  .wn-day { display: grid; grid-template-columns: calc(var(--fx-space-12) * 3) minmax(0, 1fr); gap: var(--fx-space-6); }
  @media (max-width: 839.98px) { .wn-day { grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-3); } }
  .wn-day__date { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); display: grid; justify-items: end; align-content: start; gap: var(--fx-space-1); text-align: end; }
  @media (max-width: 839.98px) { .wn-day__date { position: static; justify-items: start; text-align: start; } }
  .wn-day__date b { font-size: calc(var(--fx-font-size-display-md) * 1.1); font-weight: var(--fx-font-weight-regular); line-height: 1; }
  .wn-day__date span { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .wn-day__date small { color: var(--fx-text-tertiary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); }
  .wn-day__body { display: grid; gap: var(--fx-space-3); }
  .wn-chap { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); }
  .wn-chap__head { display: flex; align-items: center; gap: var(--fx-space-3); }
  .wn-chap__v { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-semibold); }
  .wn-chap h3 { margin: 0; font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-medium); }
  .wn-chap__chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .wn-rows { margin: 0; padding: 0; list-style: none; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); overflow: hidden; }
  .wn-row { display: grid; grid-template-columns: calc(var(--fx-space-12) * 2) minmax(0, 1fr); gap: var(--fx-space-4); padding: var(--fx-space-4) var(--fx-space-5); scroll-margin-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); }
  .wn-row + .wn-row { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .wn-row:target { background: var(--fx-bg-brand-subtle); }
  .wn-row__v { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .wn-items { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
  .wn-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: baseline; font-size: var(--fx-font-size-sm); line-height: 1.5; }
  @media (max-width: 599.98px) { .wn-row { grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-2); } .wn-items li { grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-1); } }
  .wn-comp { padding: 0 var(--fx-space-2); border: var(--fx-border-width-default) solid var(--fx-border-color-strong); border-radius: var(--fx-radius-badge); color: var(--fx-text-secondary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); text-decoration: none; white-space: nowrap; }
  .wn-comp:hover { border-color: var(--fx-text-primary); color: var(--fx-text-primary); }
  .wn-days li[hidden], .wn-items li[hidden] { display: none; }
}
/* wn:oxiri */

/* tepa qator: uzun «yoʻl» (breadcrumbs) qisqaradi — Sozlamalar tugmasini ekrandan itarmaydi */
@layer fx.utilities {
  .ds-top > nav { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; }
  .ds-top .fx-breadcrumbs { flex-wrap: nowrap; min-inline-size: 0; }
  .ds-top .fx-breadcrumbs li { min-inline-size: 0; }
  .ds-top .fx-breadcrumbs li:last-child { overflow: hidden; }
  .ds-top .fx-breadcrumbs li:last-child > * { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* «Koʻrib chiqish» rejimi (/ishxona/korib/, Ustoz 21.10): roʻyxat + oyna (bitta element — iframe, Kompyuter/Telefon, Yorugʻ/Qorongʻi) */
@layer fx.utilities {
  .kr { display: grid; gap: var(--fx-space-5); }
  .kr-login { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); margin: 0; padding: var(--fx-space-4) var(--fx-space-5); border-radius: var(--fx-radius-surface); background: var(--fx-bg-warning-subtle); }
  .kr-login > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); }
  .kr-progress { --fx-progress-value: 0%; }
  .kr-bar { display: flex; flex-wrap: wrap; gap: var(--fx-space-3); align-items: center; }
  .kr-q { flex: 1 1 calc(var(--fx-space-12) * 4); inline-size: auto; }
  .kr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 6)), 1fr)); gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
  .kr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fx-space-1) var(--fx-space-3); align-items: center; inline-size: 100%; padding: var(--fx-space-3) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .kr-item:hover { border-color: var(--fx-border-color-strong); }
  .kr-item:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  .kr-item b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .kr-item small { grid-column: 1; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .kr-item .fx-status { grid-row: 1 / span 2; grid-column: 2; }

  .kr-dlg { inline-size: min(100vw - var(--fx-space-8), 1240px); max-inline-size: none; block-size: min(100dvh - var(--fx-space-8), 960px); max-block-size: none; margin: auto; padding: 0; border: 0; border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: var(--fx-text-primary); box-shadow: var(--fx-shadow-lg); overflow: hidden; }
  .kr-dlg[open] { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .kr-dlg::backdrop { background: color-mix(in oklab, var(--fx-bg-overlay) 55%, transparent); }
  .kr-dlg__head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--fx-space-3); padding: var(--fx-space-5) var(--fx-space-6) var(--fx-space-3); }
  .kr-dlg__ttl { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .kr-dlg__ttl h2 { margin: 0; font-size: var(--fx-font-size-lg); }
  .kr-dlg__cat { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .kr-dlg__act, .kr-dlg__tools, .kr-dlg__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .kr-dlg__act [aria-pressed="true"] { background: var(--fx-bg-success-subtle); color: var(--fx-fg-success); }
  .kr-dlg__tools { padding: 0 var(--fx-space-6) var(--fx-space-3); }
  .kr-bad { display: grid; gap: var(--fx-space-3); margin: 0 var(--fx-space-6) var(--fx-space-3); padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--fx-bg-error-subtle); }
  .kr-bad__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .kr-bad__msg { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .kr-shot { display: flex; flex-wrap: wrap; align-items: end; gap: var(--fx-space-3); }
  .kr-shot img { max-inline-size: calc(var(--fx-space-12) * 6); max-block-size: calc(var(--fx-space-12) * 3); border-radius: var(--fx-radius-control); border: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .kr-dlg__view { overflow: auto; padding: var(--fx-space-4) var(--fx-space-6); background: var(--fx-bg-subtle); }
  .kr-dlg__view iframe { display: block; inline-size: 100%; block-size: calc(var(--fx-space-12) * 12); margin-inline: auto; border: 0; border-radius: var(--fx-radius-surface); background: var(--fx-bg-page); }
  .kr-dlg__view[data-ekran="telefon"] iframe { inline-size: 390px; max-inline-size: 100%; box-shadow: var(--fx-shadow-md); }
  .kr-dlg__foot { justify-content: flex-end; padding: var(--fx-space-3) var(--fx-space-6); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .kr-dlg__n { margin-inline-end: auto; color: var(--fx-text-secondary); font-variant-numeric: tabular-nums; }
  @media (max-width: 599.98px) {
    .kr-dlg { inline-size: 100vw; block-size: 100dvh; border-radius: 0; }
    .kr-dlg__head, .kr-dlg__tools, .kr-dlg__foot { padding-inline: var(--fx-space-4); }
    .kr-dlg__view { padding-inline: var(--fx-space-2); }
  }
}
/* Agentlar namunasi — peek paneli kartada (FoxOS'da yon panelda) */
.ag-demo-peek { max-inline-size: calc(var(--fx-space-12) * 9); padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }

/* erp:boshi — ERP namunasi («Zarafshon Tekstil») toʻri: faqat joylashuv, koʻrinish atomlarniki (crm-*, dash-* toʻri ustiga) */
@layer fx.utilities {
  .erp-grid--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .erp-meters { display: grid; gap: var(--fx-space-5); }
  .erp-meters .fx-meter__label .crm-meta { display: block; margin-block-start: calc(var(--fx-space-1) / 2); }
  .erp-prog { display: grid; grid-template-columns: minmax(var(--fx-space-12), 1fr) auto; align-items: center; gap: var(--fx-space-2); min-inline-size: calc(var(--fx-space-12) * 2); }
  .erp-cell { display: grid; gap: var(--fx-space-1); justify-items: start; }
  .erp-page .fx-tabs__panel { min-inline-size: 0; padding-block-start: var(--fx-space-4); }
  .erp-page .fx-timeline__content > .crm-meta { display: block; }
  .erp-page .fx-timeline__title .fx-badge { margin-inline-end: var(--fx-space-1); }
  @media (max-width: 839.98px) { .erp-grid--wide { grid-template-columns: minmax(0, 1fr); } }
}
/* erp:oxiri */

/* hd:boshi — Helpdesk namunasi toʻri («Mehr Klinikasi»): navbat · murojaat · hisobot. Faqat joylashuv; koʻrinish atomlarniki */
@layer fx.utilities {
  .hd-queue { min-inline-size: 0; overflow: hidden; }
  .hd-queue .fx-table-scroll { border: 0; border-radius: 0; }
  .hd-queue__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .hd-queue .crm-inline { flex-wrap: nowrap; }
  .hd-subj { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; max-inline-size: 44ch; }
  .hd-path { min-inline-size: 0; overflow-x: auto; }
  .hd-ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--fx-space-5); align-items: start; }
  .hd-thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-inline-size: 0; overflow: hidden; }
  .hd-thread__tabs { padding-inline: var(--fx-space-4); }
  .hd-log { display: flex; flex-direction: column; gap: var(--fx-space-1); min-inline-size: 0; padding: var(--fx-space-4) var(--fx-space-5); background: var(--fx-bg-page); }
  .hd-log[hidden] { display: none; }
  .hd-log > .fx-message { flex: none; }
  .hd-inote { align-self: stretch; margin-block: var(--fx-space-2); }
  .hd-reply { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-4) var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .hd-reply .fx-segment { justify-self: start; }
  .hd-side { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); display: grid; gap: var(--fx-space-4); align-content: start; min-inline-size: 0; }
  .hd-pad { padding: var(--fx-space-4) var(--fx-space-5) 0; }
  .hd-meter { min-inline-size: calc(var(--fx-space-12) * 3); }
  @media (max-width: 1199.98px) { .hd-ticket { grid-template-columns: minmax(0, 1fr); } .hd-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
  @media (max-width: 599.98px) { .hd-path { padding-block-end: var(--fx-space-2); } .hd-path > .fx-steps__item { flex: none; min-inline-size: calc(var(--fx-space-12) * 3); } .hd-log { padding-inline: var(--fx-space-3); } .hd-subj { max-inline-size: none; min-inline-size: calc(var(--fx-space-12) * 4); } }
}
/* hd:oxiri */

/* kb:boshi — Kabinet namunasi toʻri («Oqim CRM»): profil · jamoa · tarif · API · bildirishnomalar · xavfsizlik. Faqat joylashuv; koʻrinish atomlarniki (crm-*, dash-* toʻri ustiga) */
@layer fx.utilities {
  .kb-page .fx-settings__main { max-inline-size: none; }
  .kb-profile { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--fx-space-6); align-items: start; }
  .kb-me { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); display: grid; justify-items: center; gap: var(--fx-space-4); text-align: center; min-inline-size: 0; }
  .kb-me__text { display: grid; gap: var(--fx-space-1); }
  .kb-me__text .crm-meta { justify-content: center; }
  .kb-me__facts { display: grid; gap: var(--fx-space-3); inline-size: 100%; margin: 0; padding-block-start: var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); text-align: start; }
  .kb-me__facts > div { display: flex; justify-content: space-between; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); }
  .kb-me__facts dd { margin: 0; }
  .kb-form, .kb-prefs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-6); min-inline-size: 0; }
  .kb-form .fx-settings__row:not([data-stack]) > .fx-settings__label { flex: 1 1 0; }
  .kb-form .fx-settings__row:not([data-stack]) > .fx-settings__control { flex: 0 1 calc(var(--fx-space-12) * 7); min-inline-size: 0; }
  .kb-form .fx-settings__control > :is(.fx-input, .fx-select-wrap, .fx-phone, .fx-textarea) { inline-size: 100%; }
  .kb-crop .fx-imagecrop { min-inline-size: 0; }
  .kb-members { min-inline-size: 0; }
  .kb-yes { display: inline-flex; color: var(--fx-fg-success); }
  .kb-yes > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .kb-sum { display: grid; gap: var(--fx-space-2); margin: 0; padding-block-start: var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); font-size: var(--fx-font-size-sm); }
  .kb-sum > div { display: flex; justify-content: space-between; gap: var(--fx-space-3); }
  .kb-sum dd { margin: 0; }
  .kb-url { display: block; max-inline-size: 36ch; overflow-wrap: anywhere; }
  .kb-trackers { display: grid; gap: var(--fx-space-5); min-inline-size: 0; }
  .kb-page .fx-tabs__panel { min-inline-size: 0; padding-block-start: var(--fx-space-4); }
  .kb-page .fx-code { min-inline-size: 0; }
  .kb-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--fx-space-6); align-items: start; }
  .kb-dev { display: grid; gap: calc(var(--fx-space-1) / 2); justify-items: start; }
  .kb-dlg { display: grid; gap: var(--fx-space-4); }
  .kb-2fa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-5); }
  .kb-2fa__code { display: grid; gap: var(--fx-space-2); flex: 1 1 calc(var(--fx-space-12) * 4); min-inline-size: 0; }
  @media (max-width: 1199.98px) { .kb-sec { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 839.98px) { .kb-profile { grid-template-columns: minmax(0, 1fr); } .kb-me { position: static; } }
  @media (max-width: 839.98px) { .kb-form .fx-settings__row:not([data-stack]) > :is(.fx-settings__label, .fx-settings__control) { flex: none; } }
}
/* kb:oxiri */

/* Libos koʻrgazmasi — ichki sahifa /liboslar/korgazma/ (Ustoz 21.10: «home'ga sigʻmaydi — ichki sahifada keng; markaz blokining yonlaridagi
   boʻsh joyga liboslar»). Oyna (ld-frame) va roʻyxat (ld-room) uslubi bosh sahifadan koʻchdi; xulq — site.js (data-room-*). */
@layer fx.utilities {
  .ld-frame { margin-block-start: var(--fx-space-6); border: var(--fx-border-width-default) solid color-mix(in oklab, var(--fx-color-neutral-50) 14%, transparent); border-radius: var(--fx-radius-overlay); background: var(--fx-color-neutral-900); box-shadow: var(--fx-shadow-lg); overflow: hidden; position: relative; }
  .ld-frame__bar { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-3) var(--fx-space-4); border-block-end: var(--fx-border-width-default) solid color-mix(in oklab, var(--fx-color-neutral-50) 10%, transparent); }
  .ld-frame__bar > i { inline-size: var(--fx-size-status-dot); block-size: var(--fx-size-status-dot); border-radius: var(--fx-radius-circle); background: var(--fx-color-neutral-700); }
  .ld-frame__url { margin-inline: auto; padding: var(--fx-space-1) var(--fx-space-4); border-radius: var(--fx-radius-badge); background: color-mix(in oklab, var(--fx-color-neutral-50) 8%, transparent); color: var(--fx-color-neutral-400); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); }
  .ld-frame__url b { color: var(--fx-color-neutral-50); font-weight: var(--fx-font-weight-regular); }
  .ld-frame__open { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-color-neutral-300); font-size: var(--fx-font-size-xs); text-decoration: none; }
  /* tashqi/yangi oyna — oddiy strelka (qutili ikon emas, Ustoz 19.10); hover'da strelka yoʻnalishi boʻyicha siljiydi */
  .ld-frame__open svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; transition: translate var(--fx-motion-fast) var(--fx-ease-standard); }
  .ld-frame__open:hover svg { translate: calc(var(--fx-space-1) / 2) calc(var(--fx-space-1) / -2); }
  .ld-frame__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fx-color-neutral-50); }
  .ld-frame__view iframe { position: absolute; inset-block-start: 0; inset-inline-start: 0; border: 0; transform-origin: 0 0; transform: scale(var(--ld-scale, 0.6)); transition: opacity var(--fx-motion-base) var(--fx-ease-standard); }
  .ld-frame__view[data-loading] iframe { opacity: 0; }
  /* Libos tanlash oynasi (Ustoz 21.10): chapda roʻyxat, oʻngda koʻrgazma oynasi — tanlov faqat oynani kiyintiradi */
  .ld-room { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--fx-space-5); align-items: start;  }
  .ld-room__list { display: grid; gap: calc(var(--fx-space-1) / 2); max-block-size: calc(var(--fx-space-12) * 12.5); overflow-y: auto; overscroll-behavior: contain; padding: var(--fx-space-2); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); scrollbar-width: thin; }
  .ld-room__k { margin: var(--fx-space-3) var(--fx-space-2) var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  .ld-room__k:first-child { margin-block-start: var(--fx-space-1); }
  .ld-room__lib { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-3); align-items: center; padding: var(--fx-space-2); border: 0; border-radius: var(--fx-radius-control); background: transparent; color: var(--fx-text-primary); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard); }
  .ld-room__lib:hover { background: var(--fx-bg-subtle); }
  .ld-room__lib:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-focus) * -1); }
  .ld-room__lib[aria-pressed="true"] { background: var(--fx-bg-brand-subtle); }
  .ld-room__lib[aria-pressed="true"] .ld-room__t b { color: var(--fx-text-brand); }
  .ld-room__ic { display: grid; place-items: center; inline-size: var(--fx-space-8); block-size: var(--fx-space-8); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); color: var(--fx-text-secondary); }
  .ld-room__ic > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); }
  .ld-room__lib[aria-pressed="true"] .ld-room__ic { background: var(--fx-bg-surface); color: var(--fx-text-primary); }
  .ld-room__t { display: grid; min-inline-size: 0; }
  .ld-room__t b { font-size: var(--fx-font-size-sm); }
  .ld-room__t small { overflow: hidden; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); white-space: nowrap; text-overflow: ellipsis; }
  .ld-room__std { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-regular); }
  .ld-room__note { margin: var(--fx-space-2); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); line-height: 1.5; }
  .ld-room__stage { display: grid; gap: var(--fx-space-3); min-inline-size: 0; }
  .ld-room__tabs { justify-self: start; max-inline-size: 100%; }
  .ld-room__tabs .fx-segment__item > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .ld-room__tabs .fx-segment__item { display: inline-flex; align-items: center; gap: var(--fx-space-2); }
  .ld-room__now { margin-inline-start: auto; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-medium); }
  @media (max-width: 839.98px) {
    .ld-room { grid-template-columns: minmax(0, 1fr); }
    .ld-room__list { grid-auto-flow: column; grid-auto-columns: max-content; max-block-size: none; overflow-x: auto; overflow-y: hidden; }
    .ld-room__k, .ld-room__note { display: none; }
    .ld-room__lib { grid-template-columns: auto auto; }
    .ld-room__t small { display: none; }
  }
  /* yon menyuda roʻyxat: ramkasiz, cheklovsiz balandlik (menyu oʻzi aylanadi); markaz — toʻliq en */
  .lk-list { max-block-size: none; overflow: visible; padding: 0; border: 0; background: transparent; }
  .ds-main:has(.lk-page) { max-inline-size: none; }
  .lk-page { display: grid; gap: var(--fx-space-6); min-inline-size: 0; }
  .lk-page .ld-frame { margin-block-start: 0; }
  /* koʻrgazma sahifasida oyna — ekran balandligiga mos (16:10 keng ekranda juda baland boʻlardi) */
  .lk-page .ld-frame__view { aspect-ratio: auto; block-size: max(calc(var(--fx-space-12) * 10), calc(100dvh - var(--fx-space-12) * 5)); }
  @media (max-width: 839.98px) { .lk-list { grid-auto-flow: row; overflow: visible; } .lk-list .ld-room__t small { display: block; } }
}

/* liboslar:boshi — har libos sahifasi (/liboslar/<id>/, Ustoz 20.10): identitet, ranglar, tipografiya, jonli UI, kontrast */
@layer fx.utilities {
  .lb-page { display: grid; gap: var(--fx-space-10); min-inline-size: 0; }
  .lb-page > * { min-inline-size: 0; }
  .lb-kicker { margin: 0; color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
  .lb-title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: clamp(var(--fx-font-size-display-sm), 4vw, var(--fx-font-size-display-lg)); font-weight: var(--fx-font-weight-bold); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
  .lb-lead { margin: 0; max-inline-size: 60ch; color: var(--fx-text-secondary); font-size: var(--fx-font-size-lg); line-height: 1.55; }
  .lb-head { display: grid; gap: var(--fx-space-3); padding-block-start: var(--fx-space-4); }
  .lb-sec { display: grid; gap: var(--fx-space-4); }
  .lb-h2 { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-2xl); font-weight: var(--fx-font-weight-semibold); }
  .lb-h3 { margin: var(--fx-space-2) 0 0; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .lb-h3 small { margin-inline-start: var(--fx-space-2); color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); }
  .lb-p { margin: 0; max-inline-size: 70ch; color: var(--fx-text-secondary); line-height: 1.6; }
  .lb-note { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  /* roʻyxat */
  .lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--fx-space-4); }
  .lb-card { display: grid; overflow: hidden; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: inherit; text-decoration: none; transition: border-color var(--fx-motion-fast) var(--fx-ease-standard), translate var(--fx-motion-fast) var(--fx-ease-standard); }
  .lb-card:hover { border-color: var(--fx-border-color-strong); translate: 0 calc(var(--fx-space-1) * -1); }
  .lb-card:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-space-1); }
  .lb-strip { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr; block-size: calc(var(--fx-space-12) * 1.5); }
  .lb-strip i { background: var(--c); }
  .lb-card__body { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-4) var(--fx-space-5) var(--fx-space-5); }
  .lb-card__body b { display: flex; align-items: center; gap: var(--fx-space-2); font-size: var(--fx-font-size-lg); }
  .lb-logo { display: inline-grid; place-items: center; flex: none; color: var(--fx-text-primary); }
  .lb-logo svg { inline-size: 0.9em; block-size: 0.9em; }
  .lb-title .lb-logo { margin-inline-end: var(--fx-space-3); vertical-align: -0.05em; }
  .lb-title .lb-logo svg { inline-size: 0.8em; block-size: 0.8em; }
  .lb-card__body small { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.45; }
  .lb-card__axes { margin-block-start: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .lb-own { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--fx-space-6); border: var(--fx-border-width-default) dashed var(--fx-border-color-strong); border-radius: var(--fx-radius-overlay); }
  .lb-own p { margin: var(--fx-space-2) 0 0; color: var(--fx-text-secondary); }
  .lb-own__acts { display: grid; justify-items: end; gap: var(--fx-space-2); }
  .lb-own__acts .fx-btn svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .lb-own__acts code { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  @media (max-width: 839.98px) { .lb-own { grid-template-columns: minmax(0, 1fr); } .lb-own__acts { justify-items: start; } }
  /* libos sahifasi: sarlavha — libosning oʻzida kiyingan */
  .lb-hero { display: grid; gap: var(--fx-space-4); padding: var(--fx-space-8); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: radial-gradient(120% 140% at 100% 0%, var(--fx-bg-brand-subtle), var(--fx-bg-surface) 60%); color: var(--fx-text-primary); }
  .lb-axes { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
  .lb-axes li { display: grid; gap: calc(var(--fx-space-1) / 2); padding: var(--fx-space-2) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); }
  .lb-axes span { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .lb-axes b { display: inline-flex; align-items: center; gap: var(--fx-space-2); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .lb-axes b i { inline-size: var(--fx-space-3); aspect-ratio: 1; border-radius: var(--fx-radius-circle); background: var(--c); }
  .lb-hero__acts { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .lb-hero__acts .fx-btn svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* ranglar */
  .lb-sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.5rem), 1fr)); gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
  .lb-sws--6 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
  .lb-sws li { display: grid; gap: calc(var(--fx-space-1) / 2); font-size: var(--fx-font-size-xs); }
  .lb-sws i { block-size: calc(var(--fx-space-12) * 1.2); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--c); }
  .lb-sws code { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  /* tipografiya */
  .lb-type { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-8); align-items: center; padding: var(--fx-space-8); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: var(--fx-text-primary); }
  .lb-type__aa { font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: calc(var(--fx-font-size-display-lg) * 2); font-weight: var(--fx-font-weight-bold); line-height: 1; color: var(--fx-text-brand); }
  .lb-type__lines { display: grid; gap: var(--fx-space-2); }
  .lb-type__lines p { margin: 0; }
  .lb-type__d { font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-bold); letter-spacing: -0.02em; line-height: 1.1; }
  .lb-type__h { font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); }
  .lb-type__b { max-inline-size: 60ch; color: var(--fx-text-secondary); line-height: 1.6; }
  .lb-type__s { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  @media (max-width: 839.98px) { .lb-type { grid-template-columns: minmax(0, 1fr); } }
  /* jonli namuna: yorugʻ + qorongʻi */
  .lb-uis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-4); }
  @media (max-width: 839.98px) { .lb-uis { grid-template-columns: minmax(0, 1fr); } }
  .lb-ui { display: grid; gap: var(--fx-space-4); align-content: start; padding: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-page); color: var(--fx-text-primary); }
  .lb-ui__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .lb-ui__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-3); }
  /* kontrast */
  /* jadval — oq blokda, chiziqsiz (Ustoz 21.10: fonli karkasda oq bloklar; test-ota BARE-01) */
  .lb-table { overflow-x: auto; padding: var(--fx-space-2) var(--fx-space-3) var(--fx-space-3); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .lb-ready th[scope="row"] a { display: inline-flex; align-items: center; gap: var(--fx-space-2); color: var(--fx-text-primary); font-weight: var(--fx-font-weight-semibold); text-decoration: none; white-space: nowrap; }
  .lb-ready th[scope="row"] a:hover { color: var(--fx-text-brand); }
  .lb-ready__p { display: grid; grid-template-columns: minmax(calc(var(--fx-space-12) * 1.5), 1fr) auto; align-items: center; gap: var(--fx-space-2); }
  .lb-ready__p b { font-variant-numeric: tabular-nums; }
  .lb-ready td small { display: block; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); white-space: nowrap; }
  .lb-mark { display: inline-block; inline-size: var(--fx-space-3); block-size: var(--fx-space-3); box-sizing: border-box; border: var(--fx-border-width-focus) solid var(--fx-border-color-strong); border-radius: var(--fx-radius-circle); vertical-align: middle; }
  .lb-mark[data-v="done"] { border-color: var(--fx-fg-success); background: var(--fx-fg-success); }
  .lb-mark[data-v="half"] { border-color: var(--fx-fg-warning); background: linear-gradient(90deg, var(--fx-fg-warning) 50%, transparent 50%); }
  .lb-card__ready { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
  .lb-hero__ready { font-size: var(--fx-font-size-sm); }
  .lb-hero__ready a { color: inherit; font-weight: var(--fx-font-weight-semibold); }
  .lb-table .fx-table { inline-size: 100%; }
  .lb-rules { display: grid; gap: var(--fx-space-2); margin: 0; padding-inline-start: var(--fx-space-5); color: var(--fx-text-secondary); line-height: 1.55; }
}
/* liboslar:oxiri */

/* lms:boshi — LMS namunasi toʻri («Tong maktabi»): oʻquvchi paneli · video dars · jurnal. Faqat joylashuv; koʻrinish atomlarniki */
@layer fx.utilities {
  .lms-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--fx-space-5); align-items: stretch; }
  .lms-next { align-content: space-between; }
  .lms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lms-next__main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--fx-space-5); }
  .lms-next__art { display: grid; place-items: center; inline-size: calc(var(--fx-space-12) * 2); aspect-ratio: 4 / 3; border-radius: var(--fx-radius-surface); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); }
  .lms-next__art > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); fill: currentColor; transform: scale(1.6); }
  .lms-next__title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); line-height: 1.25; }
  .lms-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--fx-space-4); }
  .lms-course .fx-card__header > .crm-meta { white-space: nowrap; }
  .lms-course .fx-card__heading { display: grid; justify-items: start; gap: var(--fx-space-2); }
  .lms-course .fx-card__text { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; }
  .lms-course .fx-card__text > svg, .lms-next .crm-meta > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; flex: none; }
  .lms-lesson { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--fx-space-5); align-items: start; }
  .lms-lesson__main { gap: var(--fx-space-5); }
  .lms-lesson__main .fx-videoplayer { inline-size: 100%; }
  .lms-lesson__side { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); max-block-size: calc(100dvh - var(--fx-size-topbar) - var(--fx-space-8)); overflow: auto; }
  .lms-lesson__side .fx-list__lead > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: var(--fx-text-tertiary); }
  @media (max-width: 1199.98px) { .lms-top, .lms-lesson { grid-template-columns: minmax(0, 1fr); } .lms-lesson__side { position: static; max-block-size: none; } }
  @media (max-width: 599.98px) { .lms-next__main { grid-template-columns: minmax(0, 1fr); } .lms-next__art { display: none; } }
}
/* lms:oxiri */

/* loyihalar:boshi — «Real loyihalar» (meros tekshiruvi) toʻri: faqat joylashuv; ota/shablon/yetim ranglari tokenlardan */
@layer fx.utilities {
  .ly-page { display: grid; gap: var(--fx-space-8); min-inline-size: 0; }
  .ly-page > * { min-inline-size: 0; }
  .ly-page [data-g="ota"] { --g: var(--fx-bg-brand-solid); }
  .ly-page [data-g="shablon"] { --g: var(--fx-bg-category-blue); }
  .ly-page [data-g="yetim"] { --g: var(--fx-bg-category-coral); }

  .ly-hero { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-8); border-radius: var(--fx-radius-overlay); background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--fx-bg-brand-solid) 55%, var(--fx-color-neutral-950)), var(--fx-color-neutral-950) 65%); color: var(--fx-color-neutral-50); }
  .ly-hero .ly-lead, .ly-hero .ly-note { color: color-mix(in oklab, var(--fx-color-neutral-50) 78%, transparent); }
  .ly-hero__sum { display: grid; gap: var(--fx-space-2); max-inline-size: 40rem; margin-block-start: var(--fx-space-2); }
  .ly-kicker { margin: 0; color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .ly-hero .ly-kicker { color: color-mix(in oklab, var(--fx-bg-brand-solid) 45%, var(--fx-color-neutral-50)); }
  .ly-title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-md); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
  .ly-lead { margin: 0; max-inline-size: 62ch; color: var(--fx-text-secondary); font-size: var(--fx-font-size-lg); line-height: 1.55; }
  .ly-note { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }

  /* meros chizigʻi: uch boʻlak, kenglik foizdan */
  .ly-bar { display: flex; gap: var(--fx-space-1); block-size: var(--fx-space-2); overflow: hidden; border-radius: var(--fx-radius-pill); background: var(--fx-bg-muted); }
  .ly-bar > span { flex: var(--w) 0 0; min-inline-size: 0; border-radius: var(--fx-radius-pill); background: var(--g); }
  .ly-bar > span[style="--w:0"] { display: none; }
  .ly-legend { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fx-font-size-sm); }
  .ly-legend li { display: inline-flex; align-items: center; gap: var(--fx-space-1); }
  .ly-legend li::before { content: ""; inline-size: var(--fx-space-2); aspect-ratio: 1; border-radius: var(--fx-radius-circle); background: var(--g); }

  .ly-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--fx-space-4); }
  .ly-rule { display: grid; align-content: start; gap: var(--fx-space-2); padding: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-block-start: var(--fx-space-1) solid var(--g); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .ly-rule h2 { margin: 0; font-size: var(--fx-font-size-lg); }
  .ly-rule p { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.55; }

  .ly-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--fx-space-5); }
  .ly-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: inherit; text-decoration: none; transition: border-color var(--fx-motion-fast) var(--fx-ease-standard), translate var(--fx-motion-fast) var(--fx-ease-standard); }
  .ly-card:hover { border-color: var(--fx-border-color-strong); translate: 0 calc(var(--fx-space-1) * -1); }
  .ly-card:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-space-1); }
  .ly-card__body { display: grid; align-content: start; gap: var(--fx-space-3); padding: var(--fx-space-5); }
  .ly-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-2); }
  .ly-card__title { margin: 0; font-size: var(--fx-font-size-lg); }
  .ly-card__kind { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }

  .ly-shot { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--fx-bg-muted); }
  .ly-shot[data-private] { display: grid; place-content: center; justify-items: center; gap: var(--fx-space-2); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .ly-shot[data-private] svg { inline-size: var(--fx-space-8); block-size: var(--fx-space-8); }

  .ly-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--fx-space-8); }
  .ly-head__text { display: grid; gap: var(--fx-space-3); }
  .ly-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .ly-head .ly-shot { border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); }
  @media (max-width: 839.98px) { .ly-head { grid-template-columns: minmax(0, 1fr); } }

  .ly-sec { display: grid; gap: var(--fx-space-4); }
  .ly-h2 { display: flex; align-items: center; gap: var(--fx-space-3); margin: 0; font-size: var(--fx-font-size-xl); }
  .ly-q { display: inline-grid; place-content: center; inline-size: var(--fx-space-8); aspect-ratio: 1; border-radius: var(--fx-radius-circle); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); font-size: var(--fx-font-size-sm); }
  .ly-p { margin: 0; max-inline-size: 70ch; color: var(--fx-text-secondary); line-height: 1.6; }
  .ly-table { overflow-x: auto; }
  .ly-num { text-align: end; font-variant-numeric: tabular-nums; }
  .ly-dim { color: var(--fx-text-tertiary); }
  .ly-list { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
  .ly-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fx-space-2); padding: var(--fx-space-3) var(--fx-space-4); border-inline-start: var(--fx-space-1) solid var(--fx-bg-category-coral); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); overflow-wrap: anywhere; }
  .ly-chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .ly-chips a { text-decoration: none; }

  .ly-tpl { display: grid; gap: var(--fx-space-4); padding: var(--fx-space-6); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .ly-tpl .ds-code { overflow-x: auto; }
  .ly-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--fx-space-4); margin: 0; }
  .ly-dl dt { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ly-dl dd { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-weight: 600; }
  .ly-sw { inline-size: var(--fx-space-4); aspect-ratio: 1; border-radius: var(--fx-radius-circle); background: var(--c); border: var(--fx-border-width-default) solid var(--fx-border-color-default); }

  .ly-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--fx-space-3); margin: 0; padding: 0; list-style: none; }
  .ly-road li { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-4); border: var(--fx-border-width-default) dashed var(--fx-border-color-default); border-radius: var(--fx-radius-surface); }
  .ly-road li[data-done] { border-style: solid; background: var(--fx-bg-success-subtle); }
  .ly-road li > span:last-child { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ly-road__dot svg { inline-size: var(--fx-space-5); block-size: var(--fx-space-5); color: var(--fx-text-tertiary); }
  .ly-road li[data-done] .ly-road__dot svg { color: var(--fx-text-brand); }
  /* ---------- loyiha dizayn tizimi (/loyihalar/<id>/dizayn-tizimi/ va …/embed/) — asl nusxa shu yerda (Ustoz 19.10) ---------- */
  .lyd { display: grid; gap: calc(var(--fx-space-12) * 0.9); }
  .lyd-head { display: grid; gap: var(--fx-space-3); }
  .lyd-head .ly-lead a { color: var(--fx-text-brand); }
  .lyd-sum { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); margin-block-start: var(--fx-space-2); }
  .lyd-sum > span { display: inline-flex; align-items: baseline; gap: var(--fx-space-1); padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .lyd-sum b { color: var(--fx-text-primary); font-size: var(--fx-font-size-lg); font-variant-numeric: tabular-nums; }
  /* brend ranglari — eng tepada, katta namunalar (Ustoz 21.10); qorongʻi panel — haqiqiy qorongʻi rejimda (data-fx-scheme="dark") */
  .lyd-brand__asos { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--fx-space-6); padding: var(--fx-space-6); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); }
  .lyd-brand__asos > i { inline-size: calc(var(--fx-space-12) * 3); aspect-ratio: 1; border-radius: var(--fx-radius-overlay); background: var(--c); }
  .lyd-brand__asos > div { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .lyd-brand__asos b { font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); line-height: 1.1; }
  .lyd-brand__asos code { color: var(--fx-text-secondary); font-size: var(--fx-font-size-md); }
  .lyd-brand__asos span { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .lyd-brand__modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-4); }
  .lyd-brand__mode { display: grid; gap: var(--fx-space-4); align-content: start; padding: var(--fx-space-6); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: var(--fx-text-primary); }
  .lyd-brand__mode h3 { margin: 0; font-size: var(--fx-font-size-lg); }
  .lyd-brand__mode ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 3.2)), 1fr)); gap: var(--fx-space-4); margin: 0; padding: 0; list-style: none; }
  .lyd-bsw { display: grid; gap: calc(var(--fx-space-1) / 2); align-content: start; font-size: var(--fx-font-size-sm); }
  .lyd-bsw > i { block-size: calc(var(--fx-space-12) * 1.6); margin-block-end: var(--fx-space-2); border-radius: var(--fx-radius-surface); background: var(--c); outline: var(--fx-border-width-default) solid color-mix(in oklab, var(--fx-text-primary) 8%, transparent); outline-offset: calc(var(--fx-border-width-default) * -1); }
  .lyd-bsw code { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .lyd-bsw small { overflow-wrap: anywhere; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .lyd-bsw em { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-style: normal; }
  .lyd-brand__rules { display: grid; gap: var(--fx-space-2); margin: 0; padding: var(--fx-space-5) var(--fx-space-6) var(--fx-space-5) calc(var(--fx-space-6) + var(--fx-space-4)); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); color: var(--fx-text-secondary); }
  /* logo holatlari: har variant — yorugʻ va qorongʻi plitkada (vektor aynan, oʻzgartirilmaydi) */
  .lyd-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 6)), 1fr)); gap: var(--fx-space-4); }
  .lyd-logo-v { display: grid; gap: var(--fx-space-3); place-items: center; margin: 0; padding: var(--fx-space-8) var(--fx-space-6) var(--fx-space-4); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .lyd-logo-v img { block-size: calc(var(--fx-space-12) * 1.5); inline-size: auto; max-inline-size: 100%; }
  .lyd-logo-izoh { margin: 0; }
  .lyd-logo-c { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 3.2)), 1fr)); gap: var(--fx-space-4); margin: 0; padding: var(--fx-space-6); list-style: none; border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); }
  @media (max-width: 839.98px) { .lyd-brand__modes { grid-template-columns: minmax(0, 1fr); } .lyd-brand__asos { grid-template-columns: minmax(0, 1fr); } .lyd-brand__asos > i { inline-size: 100%; aspect-ratio: 3 / 1; } }
  .lyd-asos, .lyd-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-4); }
  .lyd-card { display: grid; align-content: start; gap: var(--fx-space-3); padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); color: var(--fx-text-primary); }
  .lyd-card h3 { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-md); }
  .lyd-card p { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.55; }
  .lyd-logo { display: flex; align-items: center; gap: var(--fx-space-4); }
  .lyd-logo img { inline-size: var(--fx-size-avatar-lg); block-size: auto; border-radius: var(--fx-radius-control); }
  .lyd-word { font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-bold); letter-spacing: -0.01em; }
  .lyd-word b { color: var(--fx-text-brand); }
  .lyd-type { display: grid; gap: var(--fx-space-1); }
  .lyd-card .lyd-warn { padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-warning-subtle); color: var(--fx-text-primary); }
  .lyd-type__rol { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; }
  .lyd-card .lyd-type__h { color: var(--fx-text-primary); font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-bold); line-height: 1.25; }
  .lyd-colors ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-2) var(--fx-space-3); margin: 0; padding: 0; list-style: none; }
  .lyd-sw { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--fx-space-2); align-items: center; font-size: var(--fx-font-size-sm); }
  .lyd-sw i { grid-row: span 2; inline-size: var(--fx-size-avatar-md); aspect-ratio: 1; border-radius: var(--fx-radius-control); outline: var(--fx-border-width-default) solid var(--fx-border-color-default); outline-offset: calc(var(--fx-border-width-default) * -1); }
  .lyd-sw code { overflow: hidden; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
  .lyd-note { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.55; }
  .lyd-comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 6)), 1fr)); gap: var(--fx-space-3); margin: 0; padding: 0; list-style: none; }
  .lyd-comp { display: grid; align-content: start; gap: var(--fx-space-2); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .lyd-comp[data-holat="topshirildi"] { border-color: var(--fx-fg-success); }
  .lyd-comp[data-holat="nomzod"] { background: color-mix(in oklab, var(--fx-bg-warning-subtle) 50%, var(--fx-bg-surface)); }
  .lyd-comp__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-space-2); }
  .lyd-comp__n { flex: none; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .lyd-comp__tags { display: flex; flex-wrap: wrap; gap: var(--fx-space-1); }
  .lyd-comp p { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.5; }
  .lyd-comp__links { display: flex; flex-wrap: wrap; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); }
  .lyd-comp__links a { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-brand); font-weight: var(--fx-font-weight-medium); text-decoration: none; }
  .lyd-comp__links svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .lyd-rules, .lyd-log { display: grid; margin: 0; padding: 0; list-style: none; }
  .lyd-rules li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fx-space-4); padding-block: var(--fx-space-3); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); line-height: 1.55; }
  .lyd-rules time, .lyd-log time { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lyd-log li { display: grid; grid-template-columns: calc(var(--fx-space-12) * 2) minmax(0, 1fr); gap: var(--fx-space-1) var(--fx-space-4); padding-block: var(--fx-space-3); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .lyd-log time { grid-row: span 2; padding-block-start: calc(var(--fx-space-1) / 2); }
  .lyd-log span { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .lyd-embed { margin: 0; padding: var(--fx-space-6) max(var(--fx-space-4), env(safe-area-inset-left)); background: var(--fx-bg-page); color: var(--fx-text-primary); font-family: var(--fx-font-family-sans); }
  @media (max-width: 839.98px) { .lyd-asos, .lyd-colors { grid-template-columns: minmax(0, 1fr); } .lyd-colors ul { grid-template-columns: minmax(0, 1fr); } }
}
/* loyihalar:oxiri */

/* sayt:boshi — «Sayt» namunasi toʻri («Ipak Yoʻli Pay» marketing sayti): faqat joylashuv va landing ritmi; koʻrinish — FoxUI bloklariniki */
@layer fx.utilities {
  .st-page { display: grid; gap: var(--fx-space-4); min-inline-size: 0; }
  .st-page > * { min-inline-size: 0; }
  /* sayt «oynasi»: rels ichida alohida sahifa boʻlib turadi */
  .st-site { display: grid; gap: calc(var(--fx-space-12) * 2); min-inline-size: 0; overflow: clip; padding-block-end: 0; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-page); }
  .st-site > * { min-inline-size: 0; }
  .st-site > .st-sec { margin-inline: var(--fx-space-8); }
  .st-site > .st-head { position: relative; background: transparent; }
  .st-site > .st-head:has(+ dialog + .st-hero) { margin-block-end: calc(var(--fx-space-12) * -2); }
  .st-site > .st-foot { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .st-site > .st-404 { border: 0; }
  .st-mark { display: inline-grid; place-items: center; inline-size: var(--fx-size-control-sm); block-size: var(--fx-size-control-sm); border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); }
  .st-mark > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); fill: currentColor; }
  .st-404__brand { color: inherit; }
  .st-site .fx-btn:not([data-shape="icon"], .fx-site-header__burger) > svg, .st-site .fx-site-footer__social .fx-btn > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; flex: none; }
  .st-site :is(.fx-bento__icon, .fx-logos__item) > svg { fill: currentColor; }

  /* hero: toʻlov oynasi + suzuvchi kartalar */
  .st-hero { padding-inline: var(--fx-space-8); }
  .st-stage { position: relative; display: grid; justify-items: center; padding: var(--fx-space-8) var(--fx-space-6); }
  .st-pay { display: grid; gap: var(--fx-space-4); inline-size: min(100%, calc(var(--fx-space-12) * 8)); padding: var(--fx-space-6); box-shadow: var(--fx-shadow-lg); }
  .st-pay__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-3); }
  .st-pay__who { display: grid; min-inline-size: 0; line-height: 1.3; }
  .st-pay__sum { display: grid; gap: var(--fx-space-1); margin: 0; }
  .st-pay__label { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .st-pay__sum strong { font-family: var(--fx-font-family-numeric); font-size-adjust: var(--fx-font-adjust-numeric); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
  .st-pay__sum small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-medium); }
  .st-pay__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-3); }
  .st-pay__secure { display: flex; align-items: center; justify-content: center; gap: var(--fx-space-2); margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .st-pay__secure > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; flex: none; }
  .st-float { position: absolute; padding: var(--fx-space-4); box-shadow: var(--fx-shadow-md); }
  .st-stage > .st-pay { margin-block: var(--fx-space-10) var(--fx-space-8); }
  .st-float--stat { inset-block-start: 0; inset-inline-start: calc(var(--fx-space-10) * -1); padding: 0; }
  .st-float--stat .fx-stat { border: 0; box-shadow: none; }
  .st-float--ok { inset-block-end: 0; inset-inline-end: calc(var(--fx-space-6) * -1); display: flex; align-items: center; gap: var(--fx-space-3); }
  .st-float--ok > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); fill: var(--fx-fg-success); flex: none; }
  .st-float--ok > span { display: grid; line-height: 1.3; }

  /* logolar */
  .st-logos { margin-inline: var(--fx-space-8); }
  .st-logos .fx-logos__item > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); }

  /* bento ichki media */
  .st-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fx-space-2); }
  .st-bento .fx-qr { margin: 0; }
  .st-bento [data-tone="brand"] .fx-qr { color: inherit; }
  .st-bento__chart { place-items: stretch; background: var(--fx-bg-subtle); }
  .st-bento__chart .fx-chart { inline-size: 100%; }

  /* xususiyat qatorlari: terminal va solishtirish media ichida toʻliq en */
  .st-media { padding: var(--fx-space-5); }
  .st-media > :is(.st-term, .st-compare) { inline-size: 100%; }
  .st-term .fx-terminal__body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .st-cmp { display: grid; align-content: center; gap: var(--fx-space-4); padding: var(--fx-space-8); }
  .st-cmp--before { background: var(--fx-bg-surface); }
  .st-cmp--after { background: var(--fx-bg-brand-subtle); }
  .st-cmp__who { display: flex; align-items: center; justify-content: center; gap: var(--fx-space-2); block-size: var(--fx-size-control-lg); margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .st-cmp--after .st-cmp__who { color: var(--fx-text-primary); font-size: var(--fx-font-size-md); }
  .st-cmp__sum { display: flex; align-items: baseline; justify-content: center; gap: var(--fx-space-1); block-size: var(--fx-size-control-lg); margin: 0; line-height: var(--fx-size-control-lg); white-space: nowrap; font-size: var(--fx-font-size-lg); }
  .st-cmp__sum--brand { font-family: var(--fx-font-family-numeric); font-size-adjust: var(--fx-font-adjust-numeric); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-semibold); letter-spacing: -0.02em; }
  .st-cmp__sum small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-medium); }

  /* raqamlar */
  .st-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-stats .fx-stat__value { white-space: nowrap; }

  @media (max-width: 1199.98px) {
    .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-float--stat { inset-inline-start: 0; }
    .st-float--ok { inset-inline-end: 0; }
  }
  @media (max-width: 599.98px) {
    .st-site { gap: calc(var(--fx-space-12) * 1.25); border-radius: var(--fx-radius-surface); }
    .st-site > .st-sec, .st-logos { margin-inline: var(--fx-space-4); }
    .st-site > .st-head:has(+ dialog + .st-hero) { margin-block-end: calc(var(--fx-space-12) * -1.25); }
    .st-hero { padding-inline: var(--fx-space-4); }
    .st-stage { padding: 0; gap: var(--fx-space-3); }
    .st-float { position: static; inline-size: min(100%, calc(var(--fx-space-12) * 8)); }
    .st-float--stat { order: -1; }
    .st-stage > .st-pay { margin: 0; }
    .st-pay { padding: var(--fx-space-5); }
    .st-cmp { padding: var(--fx-space-4); gap: var(--fx-space-2); }
    .st-cmp .fx-field .fx-label { display: none; }
    .st-media { padding: var(--fx-space-3); }
    .st-stats { grid-template-columns: minmax(0, 1fr); }
  }
}
/* sayt:oxiri */

/* yechimlar:boshi — «Tayyor yechimlar» (/yechimlar/, Ustoz 20.10): rasm — patnisdagi oyna, ostida nom, belgi, izoh, real joylar */
@layer fx.utilities {
  .yc-page { display: grid; gap: var(--fx-space-8); min-inline-size: 0; }
  .yc-page > * { min-inline-size: 0; }
  .yc-kicker { margin: 0; color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
  .yc-head { display: grid; gap: var(--fx-space-3); max-inline-size: 60rem; padding-block-start: var(--fx-space-4); }
  .yc-title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: clamp(var(--fx-font-size-display-sm), 4vw, var(--fx-font-size-display-lg)); font-weight: var(--fx-font-weight-bold); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
  .yc-h2 { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-bold); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
  .yc-lead { margin: 0; max-inline-size: 62ch; color: var(--fx-text-secondary); font-size: var(--fx-font-size-lg); line-height: 1.55; }
  /* raqamlar — build'da sanaladi */
  .yc-stats { display: flex; flex-wrap: wrap; gap: var(--fx-space-2) var(--fx-space-8); margin: var(--fx-space-2) 0 0; }
  .yc-stats div { display: grid; gap: var(--fx-space-1); }
  .yc-stats dt { order: 2; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .yc-stats dd { order: 1; margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
  .yc-filter { justify-self: start; max-inline-size: 100%; overflow-x: auto; }
  .yc-n { color: var(--fx-text-tertiary); font-variant-numeric: tabular-nums; }
  .yc-filter .fx-segment__item { white-space: nowrap; }

  .yc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--fx-space-8) var(--fx-space-6); }
  .yc-card { display: grid; grid-template-rows: auto 1fr; gap: var(--fx-space-4); min-inline-size: 0; scroll-margin-block-start: calc(var(--fx-space-8) * 2); }
  /* rasm: neytral patnis, ichida sahifa — yuqori chap burchakdan, hover'da biroz koʻtariladi */
  .yc-card__shot { display: block; overflow: hidden; aspect-ratio: 16 / 10; padding: var(--fx-space-4) 0 0 var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: linear-gradient(160deg, var(--fx-bg-subtle), color-mix(in oklab, var(--fx-bg-brand-subtle) 60%, var(--fx-bg-subtle))); }
  .yc-card__shot img { display: block; inline-size: 160%; max-inline-size: none; block-size: auto; border-start-start-radius: var(--fx-radius-surface); box-shadow: var(--fx-shadow-md); transform-origin: 0 0; transition: translate var(--fx-motion-base) var(--fx-ease-standard), scale var(--fx-motion-base) var(--fx-ease-standard); }
  /* kesim «past-ong» — rasmning oʻng pastki burchagi koʻrinadi (Guli oynasi ekran burchagida ochiladi) */
  .yc-card[data-crop="past-ong"] .yc-card__shot { display: flex; justify-content: end; align-items: end; padding: 0 var(--fx-space-4) var(--fx-space-4) 0; }
  .yc-card[data-crop="past-ong"] .yc-card__shot img { flex: none; border-radius: 0 0 var(--fx-radius-surface) 0; transform-origin: 100% 100%; }
  .yc-card[data-crop="past-ong"]:hover .yc-card__shot img { translate: var(--fx-space-1) var(--fx-space-1); }
  .yc-card:hover .yc-card__shot img { translate: calc(var(--fx-space-1) * -1) calc(var(--fx-space-1) * -1); scale: 1.02; }
  .yc-card__ph { display: grid; place-items: center; block-size: 100%; margin: 0 0 0 calc(var(--fx-space-4) * -1); color: var(--fx-text-tertiary); }
  .yc-card__ph svg { inline-size: var(--fx-space-12); block-size: var(--fx-space-12); }
  .yc-card__body { display: grid; align-content: start; gap: var(--fx-space-2); }
  .yc-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .yc-card__h { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .yc-card__h a { color: inherit; text-decoration: none; }
  .yc-card__h a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .yc-card__text { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.55; }
  .yc-card__meta { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
  .yc-card__real { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-sm); line-height: 1.5; }
  .yc-card__real svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); translate: 0 0.15em; color: var(--fx-fg-success); }
  .yc-card__real a { color: inherit; text-underline-offset: 0.2em; }
  .yc-card__real small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .yc-card__acts { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); margin-block-start: var(--fx-space-2); }

  /* real loyihalar */
  .yc-real { display: grid; gap: var(--fx-space-6); padding-block-start: var(--fx-space-8); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); scroll-margin-block-start: calc(var(--fx-space-8) * 2); }
  .yc-real__head { display: grid; gap: var(--fx-space-3); }
  .yc-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--fx-space-5); }
  .yc-site { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); }
  .yc-site__shot { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--fx-bg-muted); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .yc-site__shot[data-private] { display: grid; place-content: center; justify-items: center; gap: var(--fx-space-2); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .yc-site__shot[data-private] > svg { inline-size: var(--fx-space-8); block-size: var(--fx-space-8); }
  .yc-site__shot[data-private]:has(img) { display: block; position: relative; overflow: hidden; }
  .yc-site__shot[data-private] img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top left; filter: saturate(0.6); opacity: 0.55; }
  .yc-site__shot[data-private] .fx-badge { position: absolute; inset-block-end: var(--fx-space-3); inset-inline-start: var(--fx-space-3); }
  .yc-site__shot[data-private] .fx-badge svg { inline-size: 1em; block-size: 1em; }
  .yc-site__body { display: grid; align-content: start; gap: var(--fx-space-3); padding: var(--fx-space-5); }
  .yc-site__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--fx-space-1) var(--fx-space-3); }
  .yc-site__h { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .yc-site__host { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .yc-site__uses { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
  .yc-site__uses .fx-chip { text-decoration: none; }
  .yc-site__acts { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); margin-block-start: var(--fx-space-1); }
}
/* yechimlar:oxiri */

/* «Qarorlar navbati» shabloni (templates/qarorlar.mjs) — faqat --fx-* tokenlar. Telefonda bir qo'lda: karta butun enda,
   Ha / Yo'q — pastda teng ikki ustun, «Boshqacha» — ostida matn maydoni bilan ochiladi; kengda kartalar to'rga tushadi. */
@layer fx.utilities {
  .qr { display: grid; gap: var(--fx-space-4); container-type: inline-size; }
  /* navbat va «Hal qilindi» ketma-ket kelsa — bo'limlar orasida nafas (Fox OS 21.10); t.sahifa() ikkalasini bitta to'rda qaytaradi */
  .qr + .qr { margin-block-start: var(--fx-space-10); }
  .qr-page { display: grid; gap: var(--fx-space-10); }
  .qr-page > .qr + .qr { margin-block-start: 0; }
  .qr__head { display: flex; align-items: center; gap: var(--fx-space-2); }
  .qr__title { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .qr__empty { margin: 0; padding: var(--fx-space-6); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); color: var(--fx-text-secondary); text-align: center; }
  .qr__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 8)), 1fr)); gap: var(--fx-space-4); align-items: start; }

  .qr-card { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); scroll-margin-block-start: var(--fx-space-12); }
  .qr-card:target { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .qr-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-2); }
  .qr-card__meta { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .qr-card__from { display: flex; align-items: center; gap: var(--fx-space-2); min-inline-size: 0; }
  .qr-card__who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .qr-card__title { margin: 0; font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); line-height: 1.35; text-wrap: pretty; }
  .qr-nega { display: flex; gap: var(--fx-space-2); align-items: start; margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .qr-nega > svg { flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-block-start: calc(var(--fx-space-1) / 2); color: var(--fx-text-brand); }
  .qr-taklif { display: grid; gap: var(--fx-space-1); padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); font-size: var(--fx-font-size-sm); }
  .qr-taklif__k { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-medium); }
  .qr-taklif p { margin: 0; }
  .qr-var { display: grid; gap: var(--fx-space-1); margin: var(--fx-space-1) 0 0; padding-inline-start: var(--fx-space-5); color: var(--fx-text-secondary); }

  .qr-iz > summary { color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); }
  .qr-iz__list { display: grid; gap: var(--fx-space-2); margin: var(--fx-space-2) 0 0; padding: 0; list-style: none; font-size: var(--fx-font-size-xs); }
  .qr-iz__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-2); align-items: start; color: var(--fx-text-secondary); }
  .qr-iz__step b { color: var(--fx-text-primary); }
  .qr-iz__step p { margin: calc(var(--fx-space-1) / 2) 0 0; }
  .qr-iz__matn { color: var(--fx-text-primary); }
  /* elak raqami — doira (Aylana: qovun yo'q) */
  .qr-iz__lvl { display: inline-grid; place-items: center; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); color: var(--fx-text-primary); font-weight: var(--fx-font-weight-semibold); font-variant-numeric: tabular-nums; }
  .qr-iz__step[data-amal="yubordi"] .qr-iz__lvl { background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); }

  /* amallar: telefonda bosh barmoq yetadigan joyda — pastda, teng ikki ustun, butun enda */
  .qr-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-2); margin-block-start: var(--fx-space-1); }
  .qr-act > .fx-btn, .qr-boshqa > summary.fx-btn { inline-size: 100%; }
  .qr-boshqa > summary { list-style: none; }
  .qr-boshqa > summary::-webkit-details-marker { display: none; }
  .qr-boshqa[open] > summary { display: none; }
  .qr-boshqa__form { display: grid; gap: var(--fx-space-2); }
  .qr-boshqa__form > .fx-btn { inline-size: 100%; }
  .qr-natija { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-1) var(--fx-space-2); margin: 0; padding-block-start: var(--fx-space-3); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .qr-natija__matn { flex-basis: 100%; color: var(--fx-text-primary); }

  /* Loyiha filtri (21.10): chiplar bir qatorda, telefonda yonga suriladi */
  .qr-filtr { display: flex; gap: var(--fx-space-2); overflow-x: auto; scrollbar-width: none; padding-block-end: calc(var(--fx-space-1) / 2); }
  .qr-filtr::-webkit-scrollbar { display: none; }
  .qr-filtr > .fx-chip { flex: none; }
  .qr-card[hidden] { display: none; }
  /* Rasmlar (Ustoz 21.10: «marketplace kartasidek, bossam ochilsin») — 1 ta — butun enda, 2–4 — teng ustun; tor kartada yonga surish */
  .qr-media { grid-template-columns: repeat(var(--_n, 1), minmax(0, 1fr)); gap: var(--fx-space-1); }
  .qr-media[data-n="2"] { --_n: 2; } .qr-media[data-n="3"] { --_n: 3; } .qr-media[data-n="4"] { --_n: 4; }
  .qr-media .fx-gallery__item { border-radius: var(--fx-radius-control); }
  @container (max-width: 480px) {
    .qr-media:not([data-n="1"]) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .qr-media:not([data-n="1"]) > li { scroll-snap-align: start; }
  }
  .qr-links { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .qr-links .fx-btn > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* «Ha desangiz nima boʻladi» — qaytarib boʻlmaydigani ogohlantirish tusida */
  .qr-oqibat { display: flex; gap: var(--fx-space-2); align-items: start; margin: 0; padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .qr-oqibat > svg { flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-block-start: calc(var(--fx-space-1) / 2); }
  .qr-oqibat b { color: var(--fx-text-primary); font-weight: var(--fx-font-weight-semibold); }
  .qr-oqibat[data-qaytmas] { background: var(--fx-bg-warning-subtle); color: var(--fx-text-primary); }
  .qr-oqibat[data-qaytmas] > svg { color: var(--fx-fg-warning); }
  /* Variantlar — bosiladigan kartochkalar (birini bosish = javob); tavsiya etilgani brend chegarasida */
  .qr-pick { display: grid; gap: var(--fx-space-2); }
  .qr-pick__opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: center; inline-size: 100%; min-block-size: var(--fx-control-h-lg); margin: 0; padding: var(--fx-space-2) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); color: var(--fx-text-primary); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--fx-motion-fast) var(--fx-ease-standard), background-color var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-instant) var(--fx-ease-standard); }
  .qr-pick__opt:hover { border-color: var(--fx-bg-brand-solid); background: var(--fx-bg-brand-subtle); }
  .qr-pick__opt:active { scale: var(--fx-motion-press); }
  /* hover'da raqam doirasi oq, raqam brend rangida — och binafsha fonda kulrang doira xira koʻrinardi (Ustoz 21.10) */
  .qr-pick__opt:not([data-tavsiya]):hover .qr-pick__n { background: var(--fx-bg-surface); color: var(--fx-text-brand); }
  .qr-pick__opt:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  /* tavsiya — «Ha» tugmasidek toʻla brend rangida (Ustoz 21.10: bir qarashda topilsin), qolganlari chiziqli */
  .qr-pick__opt[data-tavsiya] { border-color: var(--fx-bg-brand-solid); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); }
  .qr-pick__opt[data-tavsiya]:hover { border-color: var(--fx-bg-brand-solid-hover); background: var(--fx-bg-brand-solid-hover); }
  .qr-pick__opt[data-tavsiya] > svg, .qr-pick__opt[data-tavsiya] .qr-pick__o { color: color-mix(in oklab, var(--fx-text-on-brand) 80%, transparent); }
  .qr-pick__opt[data-tavsiya] .fx-badge { background: color-mix(in oklab, var(--fx-text-on-brand) 20%, transparent); color: var(--fx-text-on-brand); }
  .qr-pick__opt > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); color: var(--fx-text-tertiary); }
  .qr-pick__n { display: inline-grid; place-items: center; inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); font-variant-numeric: tabular-nums; }
  .qr-pick__opt[data-tavsiya] .qr-pick__n { background: var(--fx-text-on-brand); color: var(--fx-bg-brand-solid); }
  .qr-pick__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-1) var(--fx-space-2); min-inline-size: 0; }
  .qr-pick__t { font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .qr-pick__o { flex-basis: 100%; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); }

  /* «Hal qilindi» jurnali — faqat ko'rish */
  .qr-hal { display: grid; margin: 0; padding: 0; list-style: none; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .qr-hal__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: start; padding: var(--fx-space-3) var(--fx-space-4); font-size: var(--fx-font-size-sm); }
  .qr-hal__row + .qr-hal__row { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .qr-hal__row > .fx-badge { justify-self: start; }
  .qr-hal__body { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; }
  .qr-hal__body > span { color: var(--fx-text-secondary); }
  .qr-hal__kim { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); text-align: end; }
  @container (max-width: 480px) {
    .qr-hal__row { grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-1); }
    .qr-hal__kim { text-align: start; }
  }
}

/* «Vazifalar» shabloni (templates/task.mjs) — faqat --fx-* tokenlar. Telefon birinchi: qator oʻraladi, forma toʻri bitta ustunga tushadi,
   select matni bir qatorda (…), sana maydoni kartadan chiqmaydi (min-width 0) — Fox OS 21.10 topilmalari. */
@layer fx.utilities {
  .tk { display: grid; gap: var(--fx-space-4); container-type: inline-size; }
  .tk-group { border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); }
  .tk-group__head { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-3) var(--fx-space-4); font-weight: var(--fx-font-weight-semibold); cursor: pointer; list-style: none; }
  .tk-group__head::-webkit-details-marker { display: none; }
  .tk-group__dot { inline-size: var(--fx-space-2); block-size: var(--fx-space-2); border-radius: var(--fx-radius-circle); background: var(--fx-text-tertiary); }
  .tk-group__dot[data-tone="error"] { background: var(--fx-fg-error); }
  .tk-group__dot[data-tone="brand"] { background: var(--fx-bg-brand-solid); }
  .tk-group__dot[data-tone="success"] { background: var(--fx-fg-success); }
  .tk-group__n { margin-inline-start: auto; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-regular); font-variant-numeric: tabular-nums; }
  .tk-list { display: grid; margin: 0; padding: 0 var(--fx-space-4) var(--fx-space-2); list-style: none; }
  .tk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: start; padding-block: var(--fx-space-3); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .tk-row__chk { margin-block-start: calc(var(--fx-space-1) / 2); }
  .tk-row__body { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .tk-row__text { overflow-wrap: anywhere; }
  .tk-row[data-state="done"] .tk-row__text { color: var(--fx-text-tertiary); text-decoration: line-through; }
  .tk-row__meta { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-3); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .tk-row__meta > span { display: inline-flex; align-items: center; gap: var(--fx-space-1); }
  .tk-row__meta svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .tk-late { color: var(--fx-fg-error); }
  .tk-loy i, .tk-side__item i { inline-size: var(--fx-space-2); block-size: var(--fx-space-2); border-radius: var(--fx-radius-circle); background: var(--c); }
  .tk-row__end { display: inline-flex; align-items: center; gap: var(--fx-space-2); }
  @container (max-width: 420px) { .tk-row { grid-template-columns: auto minmax(0, 1fr); } .tk-row__end { grid-column: 2; } }

  /* forma: toʻr oʻraladi; select bir qatorda, sana/vaqt maydoni qisqaradi */
  .tk-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fx-space-12) * 3.6)), 1fr)); gap: var(--fx-space-4); container-type: inline-size; }
  .tk-form > * { min-inline-size: 0; }
  .tk-form__wide { grid-column: 1 / -1; }
  .tk-form .fx-input, .tk-form .fx-select-wrap, .tk-form .fx-select { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
  .tk-form .fx-select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tk-form__act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--fx-space-2); }
  .tk-form__act > .fx-btn:not([data-shape="icon"]) > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  @container (max-width: 420px) { .tk-form__act > .fx-btn { flex: 1; } }

  .tk-side { display: grid; gap: calc(var(--fx-space-1) / 2); }
  .tk-side__item { display: flex; align-items: center; gap: var(--fx-space-2); min-block-size: var(--fx-control-h-sm); padding-inline: var(--fx-space-3); border-radius: var(--fx-radius-control); color: var(--fx-text-secondary); text-decoration: none; }
  .tk-side__item:hover { background: var(--fx-bg-muted); color: var(--fx-text-primary); }
  .tk-side__item[aria-current="page"] { background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); font-weight: var(--fx-font-weight-medium); }
  .tk-side__n { margin-inline-start: auto; font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
}
@layer fx.utilities {
  /* sarlavha va «Yangi vazifa» dialogi; sahifa toʻri (yon menyu + roʻyxat) — boshqa loyihalar ham shu bilan (Fox OS 21.10) */
  .tk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-3); }
  .tk-head__t { margin: 0; font-size: var(--fx-font-size-xl); }
  .tk-head__n { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); font-variant-numeric: tabular-nums; }
  .tk-head .fx-btn:not([data-shape="icon"]) > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .tk-dlg { inline-size: min(100vw - var(--fx-space-8), calc(var(--fx-space-12) * 12)); }
  .tk-layout { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--fx-space-6); align-items: start; }
  .tk-layout > * { min-inline-size: 0; }
  @media (max-width: 839.98px) { .tk-layout { grid-template-columns: minmax(0, 1fr); } }
  .tk-dot { flex: none; inline-size: var(--fx-space-2); block-size: var(--fx-space-2); border-radius: var(--fx-radius-circle); background: var(--c); }
}
/* ---- Vazifalar v2 (Fox OS 21.10; Ustoz: «Todoist'dan yaxshiroq») — koʻrinish almashtirgich, tez kiritish, qator, kanban, kalendar, panel ---- */
@layer fx.utilities {
  .tk-views .fx-segment__item { display: inline-flex; align-items: center; gap: var(--fx-space-2); text-decoration: none; }
  .tk-views .fx-segment__item > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* tez kiritish: bitta qator, ostida chiplar va maslahat; # va @ roʻyxati maydon ostida */
  .tk-tez { position: relative; display: grid; gap: var(--fx-space-2); padding: var(--fx-space-2) var(--fx-space-2) var(--fx-space-2) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); transition: border-color var(--fx-motion-fast) var(--fx-ease-standard); }
  .tk-tez:focus-within { border-color: var(--fx-border-color-focus); outline: var(--fx-border-width-default) solid var(--fx-border-color-focus); }
  .tk-tez__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: center; }
  .tk-tez__row > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); color: var(--fx-text-brand); }
  .tk-tez__input { min-inline-size: 0; block-size: var(--fx-control-h-md); padding: 0; border: 0; background: transparent; color: var(--fx-text-primary); font: inherit; font-size: var(--fx-font-size-md); }
  .tk-tez__input:focus { outline: none; }
  .tk-tez__input::placeholder { color: var(--fx-text-tertiary); }
  .tk-tez:not([data-filled]) .tk-tez__go { opacity: 0.5; }
  .tk-tez__chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .tk-tez__chips:empty { display: none; }
  .tk-chip { display: inline-flex; align-items: center; gap: var(--fx-space-1); block-size: calc(var(--fx-space-6) + var(--fx-space-1)); padding: 0 var(--fx-space-3) 0 var(--fx-space-2); border-radius: var(--fx-radius-pill); background: var(--fx-bg-subtle); color: var(--fx-text-primary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-medium); }
  .tk-tez__hint { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .tk-tez__hint kbd { padding: 0 var(--fx-space-1); border-radius: var(--fx-radius-badge); background: var(--fx-bg-subtle); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); }
  .tk-tez__pop { position: absolute; z-index: 5; inset-block-start: calc(var(--fx-control-h-md) + var(--fx-space-2)); inset-inline-start: var(--fx-space-8); min-inline-size: calc(var(--fx-space-12) * 5); max-block-size: calc(var(--fx-space-12) * 6); margin: 0; padding: var(--fx-space-1); overflow-y: auto; border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-lg); list-style: none; }
  .tk-tez__pop .fx-option[aria-selected="true"] { background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); }
  .tk-tez__pop .fx-option { display: flex; align-items: center; gap: var(--fx-space-2); }
  /* qator: matn — tugma (panelni ochadi), bosqich belgisi, izohlar soni */
  .tk-row__text { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .tk-row__text:hover { color: var(--fx-text-brand); }
  .tk-row__text:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); border-radius: var(--fx-radius-badge); }
  .tk-bosq, .tk-cnt { display: inline-flex; align-items: center; gap: var(--fx-space-1); }
  .tk-bosq .fx-flow { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* «Bajarilgan» — yigʻiq ekani aniq: chevron + son + «Koʻrsatish / Yashirish» */
  .tk-group > .tk-group__head::after { content: ""; flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-inline-start: var(--fx-space-1); background: currentColor; color: var(--fx-text-tertiary); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: rotate var(--fx-motion-fast) var(--fx-ease-standard); }
  .tk-group[open] > .tk-group__head::after { rotate: 180deg; }
  .tk-group__toggle { color: var(--fx-text-brand); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .tk-group:not([open]) .tk-group__toggle > span + span, .tk-group[open] .tk-group__toggle > span:first-child { display: none; }
  .tk-group[data-group="bajarildi"]:not([open]) { background: var(--fx-bg-subtle); }
  /* kanban */
  .tk-kanban { --_col: calc(var(--fx-space-12) * 6); }
  .tk-kanban .fx-board__top .tk-loy { display: inline-flex; align-items: center; gap: var(--fx-space-1); font-family: var(--fx-font-family-sans); font-size-adjust: var(--fx-font-adjust-sans); color: var(--fx-text-secondary); }
  .tk-card__open { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .tk-card__open:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  .tk-card__meta { display: inline-flex; flex-wrap: wrap; gap: var(--fx-space-2); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .tk-card__meta > span { display: inline-flex; align-items: center; gap: var(--fx-space-1); }
  .tk-card__meta svg, .tk-cnt svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* kalendar */
  .tk-cal { display: grid; gap: var(--fx-space-3); }
  .tk-cal__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2) var(--fx-space-4); }
  .tk-cal__t { margin: 0; font-size: var(--fx-font-size-lg); }
  .tk-cal__nav { display: inline-flex; gap: var(--fx-space-1); margin-inline-end: auto; }
  .tk-cal__nav .fx-btn:not([data-shape="icon"]) > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .tk-cal__chip[data-done] { opacity: 0.55; text-decoration: line-through; }
  .tk-cal__g { border: var(--fx-border-width-default) dashed var(--fx-border-color-strong) !important; background: var(--fx-bg-surface) !important; color: var(--fx-text-secondary) !important; cursor: default; }
  /* panel (Linear kabi oʻngda): sarlavha, xususiyatlar toʻri, tavsif, izohlar ipi va yozish paneli */
  .tk-panel { display: grid; gap: var(--fx-space-5); align-content: start; min-inline-size: 0; }
  .tk-panel__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: start; }
  .tk-panel__t { margin: 0; font-size: var(--fx-font-size-lg); line-height: 1.35; text-wrap: pretty; }
  .tk-props { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--fx-space-2) var(--fx-space-3); align-items: center; }
  .tk-props__k { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .tk-props .fx-select-wrap, .tk-props .fx-select { inline-size: 100%; min-inline-size: 0; }
  .tk-props__dt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); gap: var(--fx-space-2); }
  .tk-props__wide { grid-column: 1 / -1; display: grid; gap: var(--fx-space-1); }
  .tk-props__act { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--fx-space-2); }
  /* ustuvorlik bayrogʻi (Todoist, Ustoz 21.10): p1–p3 toʻla, --fx-priority-N rangida; p4 — konturli, rangsiz. Tanlovda ham, kartada ham bir xil */
  .tk-flag { display: inline-grid; place-items: center; flex: none; color: var(--fx-priority-4); }
  .tk-flag[data-priority="1"] { color: var(--fx-priority-1); }
  .tk-flag[data-priority="2"] { color: var(--fx-priority-2); }
  .tk-flag[data-priority="3"] { color: var(--fx-priority-3); }
  .tk-flag[data-priority="4"] { color: var(--fx-text-tertiary); }
  .tk-flag > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .tk-ust-sel option { gap: var(--fx-space-2); }
  .tk-izohlar { display: grid; gap: var(--fx-space-3); padding-block-start: var(--fx-space-4); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .tk-izohlar__h { margin: 0; font-size: var(--fx-font-size-sm); }
  .tk-izohlar__h span { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); }
  .tk-izohlar__list { display: grid; gap: var(--fx-space-4); margin: 0; padding: 0; list-style: none; }
  .tk-izohlar__bosh { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .tk-izoh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-3); }
  .tk-izoh__main { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .tk-izoh__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-sm); }
  .tk-izoh__head time { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .tk-izoh__t { margin: 0; font-size: var(--fx-font-size-sm); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
  .tk-at { padding: 0 calc(var(--fx-space-1) / 2); border-radius: var(--fx-radius-badge); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); font-weight: var(--fx-font-weight-medium); }
  .tk-izoh__to { display: flex; flex-wrap: wrap; gap: var(--fx-space-1); margin: 0; }
  .tk-yet { display: inline-flex; align-items: center; gap: calc(var(--fx-space-1) / 2); padding: 0 var(--fx-space-2); border-radius: var(--fx-radius-pill); background: var(--fx-bg-subtle); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .tk-yet[data-ok] { background: var(--fx-bg-success-subtle); color: var(--fx-text-primary); }
  .tk-yet[data-ok] > svg { inline-size: var(--fx-space-3); block-size: var(--fx-space-3); color: var(--fx-fg-success); }
  .tk-yet[data-err] { background: var(--fx-bg-error-subtle); color: var(--fx-text-error); }
  @container (max-width: 560px) { .tk-props { grid-template-columns: minmax(0, 1fr); } .tk-props__k { margin-block-end: calc(var(--fx-space-1) * -1); } }
}

/* «Agentlar» shabloni (templates/agentlar.mjs) — faqat --fx-* tokenlar. Telefon birinchi: qator kesilmaydi — torda xulosa, chiziq va
   bosqichlar ism ostiga tushadi; «Sizni kutyapti» — ogohlantirish holati (fx-status), alohida rang ixtiro qilinmaydi. */
@layer fx.utilities {
  .ags { display: grid; gap: var(--fx-space-6); }
  .ags__group { display: grid; gap: var(--fx-space-2); }
  .ags__head { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  .ags__n { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); font-variant-numeric: tabular-nums; }
  /* har agent oʻzi konteyner — shablondan tashqari (flex, oʻz oʻrami) qoʻyilsa ham qator kontent boʻyicha choʻzilmaydi (Fox OS 21.10: 1440 da xulosa kartadan chiqardi) */
  .ag { container-type: inline-size; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; }
  .ags-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-3); }
  .ags-head__t { margin: 0; font-size: var(--fx-font-size-xl); }
  .ags-head__p { margin: var(--fx-space-1) 0 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ags-head__f { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .ags-head__f .fx-chip { text-decoration: none; }
  .ags__list { display: grid; border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); overflow: hidden; }
  .ag + .ag { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .ag__row { display: grid; grid-template-columns: auto minmax(0, 11rem) minmax(0, 1fr) minmax(0, 7rem) calc(var(--fx-space-2) * 5) auto; grid-template-areas: "av who sum bar steps time"; gap: var(--fx-space-3); align-items: center; padding: var(--fx-space-3) var(--fx-space-4); cursor: pointer; list-style: none; }
  .ag__row::-webkit-details-marker { display: none; }
  .ag__row:hover { background: var(--fx-bg-subtle); }
  .ag__row:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-focus) * -1); }
  .ag__av { grid-area: av; } .ag__who { grid-area: who; } .ag__sum { grid-area: sum; } .ag__bar { grid-area: bar; } .ag__steps { grid-area: steps; } .ag__time { grid-area: time; }
  .ag__who { display: grid; min-inline-size: 0; }
  .ag__name, .ag__rol { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ag__rol { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ag__sum { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ag__wait { color: var(--fx-fg-warning); }
  .ag__bar { display: block; block-size: var(--fx-space-1); border-radius: var(--fx-radius-pill); background: var(--fx-bg-muted); overflow: hidden; }
  .ag__bar > i { display: block; block-size: 100%; inline-size: var(--w); background: var(--fx-bg-brand-solid); }
  .ag__steps { display: inline-flex; gap: calc(var(--fx-space-1) / 2); }
  .ag__step { inline-size: var(--fx-space-2); block-size: var(--fx-space-2); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); }
  .ag__step[data-holat="bitdi"] { background: var(--fx-fg-success); }
  .ag__step[data-holat="jarayonda"] { background: var(--fx-bg-brand-solid); }
  .ag__time { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ag[data-holat="xato"] .ag__sum { color: var(--fx-fg-error); }
  .ag__peek { display: grid; gap: var(--fx-space-3); padding: 0 var(--fx-space-4) var(--fx-space-4) calc(var(--fx-space-4) + var(--fx-size-avatar-sm) + var(--fx-space-3)); }
  .ag__full { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ag__list, .ag__log { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fx-font-size-sm); }
  .ag__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
  .ag__log li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-3); color: var(--fx-text-secondary); }
  .ag__log time { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
  @container (max-width: 640px) {
    /* 1-qator: avatar · ism va rol · vaqt; 2-qator: xulosa (2 qator); 3-qator: jarayon va bosqichlar (Fox OS 21.10) */
    .ag__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av who time" ". sum sum" ". bar steps"; row-gap: var(--fx-space-1); align-items: start; }
    .ag__sum { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ag__bar { align-self: center; } .ag__steps { justify-self: end; }
    .ag__peek { padding-inline-start: var(--fx-space-4); }
  }

  /* Yon panel (peek): sarlavha · meta · Faoliyat (fx-timeline, bitta oʻq) · pastda yozish formasi */
  .agp { display: grid; gap: var(--fx-space-4); align-content: start; min-inline-size: 0; }
  .agp__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--fx-space-3); align-items: center; }
  .agp__yop { margin-inline-end: calc(var(--fx-space-2) * -1); }
  .agp__who { display: grid; min-inline-size: 0; }
  .agp__name { font-size: var(--fx-font-size-md); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .agp__rol { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .agp__meta { display: flex; flex-wrap: wrap; gap: var(--fx-space-2) var(--fx-space-5); margin: 0; font-size: var(--fx-font-size-xs); }
  .agp__meta dt { color: var(--fx-text-tertiary); }
  .agp__meta dd { margin: 0; color: var(--fx-text-primary); }
  .agp__meta code { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); }
  .agp__wait { margin: 0; padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-warning-subtle); font-size: var(--fx-font-size-sm); }
  .agp__sec { display: grid; gap: var(--fx-space-3); }
  .agp__h { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); }
  .agp__javob { margin-block-start: var(--fx-space-1); color: var(--fx-text-primary); white-space: pre-line; }
  .agp__empty { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .agp__composer { margin-block-start: var(--fx-space-2); }
  /* diqqat: agent ruxsat yoki javob kutyapti — ogohlantirish tusida, tugmalar bir qatorda */
  .agp__diqqat { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-control); background: var(--fx-bg-warning-subtle); font-size: var(--fx-font-size-sm); }
  .agp__diqqat p { margin: 0; color: var(--fx-text-secondary); white-space: pre-line; }
  .agp__ruxsat { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
  .agp__task-nom { margin: 0; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .agp__bar { display: block; block-size: var(--fx-space-1); border-radius: var(--fx-radius-pill); background: var(--fx-bg-muted); overflow: hidden; }
  .agp__bar > i { display: block; block-size: 100%; inline-size: var(--w); background: var(--fx-bg-brand-solid); }
  /* Ochiq «ish kartasi» (data-ish, Ustoz 21.10): chapda topshiriq, hozirgi harakat va jarayon; oʻngda bosqichli timeline; «Batafsil» — burchakda */
  .ag[data-ish] .ag__peek { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fx-space-8); align-items: start; padding-block-start: var(--fx-space-1); }
  .ag__work { display: grid; gap: var(--fx-space-3); align-content: start; min-inline-size: 0; }
  .ag__task { display: grid; gap: var(--fx-space-1); }
  .ag__task-k { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .ag__task-t { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--fx-font-size-sm); line-height: 1.5; }
  .ag__now { display: flex; gap: var(--fx-space-2); align-items: baseline; margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .ag__now b { color: var(--fx-text-brand); font-weight: var(--fx-font-weight-semibold); }
  .ag__live { flex: none; inline-size: var(--fx-space-2); block-size: var(--fx-space-2); translate: 0 calc(var(--fx-space-1) * -0.25); border-radius: var(--fx-radius-circle); background: var(--fx-bg-brand-solid); outline: var(--fx-border-width-default) solid color-mix(in oklab, var(--fx-bg-brand-solid) 40%, transparent); animation: ag-live calc(var(--fx-duration-spin) * 2) var(--fx-ease-standard) infinite; }
  @keyframes ag-live { 80%, 100% { outline-offset: var(--fx-space-1); outline-color: transparent; } }
  @media (prefers-reduced-motion: reduce) { .ag__live { animation: none; } }
  .ag__prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: center; }
  .ag__prog > .ag__bar { grid-area: auto; }
  .ag__pct { color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ag[data-ish] .ag__more { position: absolute; inset-block-start: calc(var(--fx-space-1) * -1); inset-inline-end: var(--fx-space-2); }
  .ag:not([data-ish]) .ag__more { justify-self: start; }
  .ag[data-ish] .ag__tl { padding-block-start: var(--fx-space-8); }
  @container (max-width: 640px) {
    .ag[data-ish] .ag__peek { grid-template-columns: minmax(0, 1fr); row-gap: var(--fx-space-4); }
    .ag[data-ish] .ag__more { position: static; justify-self: start; }
    .ag[data-ish] .ag__tl { padding-block-start: 0; }
  }
}

/* «Rejalar» shabloni (templates/rejalar.mjs) — faqat --fx-* tokenlar. Kartalar toʻri: kengda bir necha ustun, telefonda bitta.
   Holat doirasi fx-flow (shakl — holat, rang — ustuvorlik), yorliq fx-prio-tag, «Sizdan kutilmoqda» — fx-status warning. */
@layer fx.utilities {
  .rj { display: grid; gap: var(--fx-space-4); }
  .rj__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-2) var(--fx-space-4); }
  .rj__title { margin: 0; font-size: var(--fx-font-size-xl); }
  .rj__n { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); font-variant-numeric: tabular-nums; }
  .rj__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 7)), 1fr)); gap: var(--fx-space-4); align-items: start; }
  .rj-card { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); scroll-margin-block-start: var(--fx-space-12); }
  .rj-card:target { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .rj-card[data-holat="done"], .rj-card[data-holat="cancelled"] { background: var(--fx-bg-subtle); }
  .rj-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: center; }
  .rj-card__nom { min-inline-size: 0; color: var(--fx-text-primary); font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); line-height: 1.3; text-decoration: none; text-wrap: pretty; }
  .rj-card__nom:hover { color: var(--fx-text-brand); }
  .rj-card__nom:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); border-radius: var(--fx-radius-badge); }
  .rj-card__meta { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-3); margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .rj-card__prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: center; }
  .rj-bar { display: block; block-size: var(--fx-space-1); border-radius: var(--fx-radius-pill); background: var(--fx-bg-muted); overflow: hidden; }
  .rj-bar > i { display: block; block-size: 100%; inline-size: var(--w); border-radius: inherit; background: var(--fx-bg-brand-solid); }
  .rj-card__n, .rj-sec__n { color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rj-card__wait { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-sm); }
  .rj-card__sec > summary { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); cursor: pointer; }
  .rj-card__count { color: var(--fx-text-tertiary); font-variant-numeric: tabular-nums; }
  .rj-sec { display: grid; gap: var(--fx-space-2); margin: var(--fx-space-2) 0 0; padding: 0; list-style: none; }
  .rj-sec > li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--fx-space-3); align-items: center; font-size: var(--fx-font-size-sm); }
  .rj-sec__nom { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* «Oqimlar» shabloni (templates/oqimlar.mjs) — faqat --fx-* tokenlar. Kanvas — fx-graph (ota komponent), holat — fx-status.
   Roʻyxat: kartalar toʻri, har kartada zanjir chizigʻi (qadamlar nuqtalari, uzilgani qizil). Kanvas: kengda graf + oʻngda tafsilot paneli, torda ustma-ust. */
@layer fx.utilities {
  .oq-list { display: grid; gap: var(--fx-space-4); }
  .oq-list__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-2) var(--fx-space-4); }
  .oq-list__t { margin: 0; font-size: var(--fx-font-size-xl); }
  .oq-list__t > span { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); font-variant-numeric: tabular-nums; }
  .oq-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 6.5)), 1fr)); gap: var(--fx-space-4); align-items: start; }
  .oq-card { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); position: relative; }
  .oq-card:has(.oq-card__nom:hover) { border-color: var(--fx-border-color-strong); }
  .oq-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2) var(--fx-space-3); }
  .oq-card__nom { color: var(--fx-text-primary); font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); text-decoration: none; }
  /* butun karta bosiladi — havola qoplamasi */
  .oq-card__nom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .oq-card__nom:focus-visible { outline: none; }
  .oq-card:has(.oq-card__nom:focus-visible) { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .oq-card__maqsad { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); text-wrap: pretty; }
  .oq-card__meta { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-3); margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .oq-card__bad { color: var(--fx-text-error); font-weight: var(--fx-font-weight-medium); }
  /* zanjir chizigʻi: qadamlar orasida chiziq, bir qadamda bir nechta — ustma-ust nuqtalar */
  .oq-chain { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
  .oq-chain > li { display: grid; gap: calc(var(--fx-space-1) / 2); }
  .oq-chain > li + li { position: relative; margin-inline-start: var(--fx-space-6); }
  .oq-chain > li + li::before { content: ""; position: absolute; inset-inline-end: calc(100% + var(--fx-space-1)); inset-block-start: 50%; inline-size: var(--fx-space-4); border-block-start: var(--fx-border-width-focus) solid var(--fx-border-color-strong); }
  .oq-chain i { display: block; inline-size: var(--fx-space-3); block-size: var(--fx-space-3); box-sizing: border-box; border-radius: var(--fx-radius-circle); background: var(--fx-fg-success); }
  .oq-chain i[data-state="warn"] { background: var(--fx-fg-warning); }
  .oq-chain i[data-state="error"] { background: var(--fx-fg-error); }
  .oq-chain i[data-end] { outline: var(--fx-border-width-focus) dashed var(--fx-fg-error); outline-offset: var(--fx-border-width-focus); }

  .oq { display: grid; gap: var(--fx-space-4); scroll-margin-block-start: var(--fx-space-12); }
  .oq__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-3) var(--fx-space-6); }
  .oq__h { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .oq__kicker { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  .oq__nom { margin: 0; font-size: var(--fx-font-size-2xl); line-height: 1.15; text-wrap: balance; }
  .oq__maqsad { margin: 0; color: var(--fx-text-secondary); }
  .oq__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2) var(--fx-space-3); }
  .oq__count { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .oq__count b { color: var(--fx-text-error); font-weight: var(--fx-font-weight-semibold); }
  .oq__body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--fx-space-12) * 6.5); gap: var(--fx-space-4); align-items: stretch; /* panel graf balandligida (Fox OS 21.10) */ }
  @media (max-width: 839.98px) { .oq__body { grid-template-columns: minmax(0, 1fr); } }
  .oq-panel { display: grid; gap: var(--fx-space-3); align-content: start; padding: var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); scroll-margin-block: var(--fx-space-12); }
  .oq-panel > * { margin: 0; }
  .oq-panel__kicker { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  .oq-panel__t { font-size: var(--fx-font-size-lg); line-height: 1.3; text-wrap: pretty; }
  .oq-panel__st { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .oq-panel__warn { padding: var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-error-subtle); color: var(--fx-text-error); font-size: var(--fx-font-size-sm); }
  .oq-panel__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-2) var(--fx-space-4); font-size: var(--fx-font-size-sm); }
  .oq-panel__dl dt { color: var(--fx-text-tertiary); }
  .oq-panel__dl dd { display: grid; gap: var(--fx-space-1); margin: 0; min-inline-size: 0; }
  .oq-panel__dl code { overflow-wrap: anywhere; font-size: var(--fx-font-size-xs); }
  .oq-panel__dt { color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); }
  .oq-panel__none { color: var(--fx-text-error); font-weight: var(--fx-font-weight-medium); }
  .oq-panel__ok { color: var(--fx-fg-success); font-weight: var(--fx-font-weight-medium); }
  .oq-panel__hint { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .oq-panel__bad { display: grid; gap: var(--fx-space-1); padding: 0; list-style: none; }
  .oq-panel__bad button { display: flex; align-items: center; gap: var(--fx-space-2); inline-size: 100%; min-block-size: var(--fx-control-h-sm); padding: var(--fx-space-1) var(--fx-space-2); border: 0; border-radius: var(--fx-radius-control); background: none; color: var(--fx-text-primary); font: inherit; font-size: var(--fx-font-size-sm); text-align: start; cursor: pointer; }
  .oq-panel__bad button:hover { background: var(--fx-bg-muted); }
  .oq-panel__bad button:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); }
  .oq-panel__bad button > span:last-child { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* «A'zolar» shabloni (templates/azolar.mjs) — faqat --fx-* tokenlar. Ruxsatlar xaritasi (jadval) + a'zo kartalari (matritsa — segment).
   Kompyuterda matritsa ikki ustun, telefonda kartaning ichida ustma-ust. */
@layer fx.utilities {
  .az { display: grid; gap: var(--fx-space-6); }
  .az-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-3) var(--fx-space-6); }
  .az-title { margin: 0; font-size: var(--fx-font-size-2xl); }
  .az-title > span { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); font-variant-numeric: tabular-nums; }
  .az-lead { margin: var(--fx-space-1) 0 0; color: var(--fx-text-secondary); }
  .az-h { margin: 0 0 var(--fx-space-3); font-size: var(--fx-font-size-lg); }
  .az-map { padding: var(--fx-space-5); }
  .az-col { display: grid; gap: calc(var(--fx-space-1) / 2); }
  .az-col small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-regular); }
  .az-lvl { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); white-space: nowrap; }
  .az-lvl > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .az-lvl[data-lvl="kor"] { color: var(--fx-text-primary); }
  .az-lvl[data-lvl="tahrir"] { color: var(--fx-text-brand); font-weight: var(--fx-font-weight-medium); }
  .az-list { display: grid; gap: var(--fx-space-4); }
  .az-card { display: grid; gap: var(--fx-space-4); padding: var(--fx-space-5); scroll-margin-block-start: var(--fx-space-12); }
  .az-card[data-faolsiz] { background: var(--fx-bg-subtle); }
  .az-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-3); }
  .az-card__t { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: 0; }
  .az-card__t b { font-size: var(--fx-font-size-md); }
  .az-meta { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-3); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .az-card__tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: var(--fx-space-2); }
  .az-facts { display: flex; flex-wrap: wrap; gap: var(--fx-space-2) var(--fx-space-8); margin: 0; font-size: var(--fx-font-size-sm); }
  .az-facts dt { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .az-facts dd { margin: 0; }
  .az-full { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .az-full > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); color: var(--fx-fg-warning); }
  .az-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 9)), 1fr)); gap: var(--fx-space-3) var(--fx-space-6); }
  .az-matrix__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-3); padding-block: var(--fx-space-2); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .az-matrix__k { display: grid; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); }
  .az-matrix__k small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-regular); }
  .az-seg .fx-segment__item { display: inline-flex; align-items: center; gap: var(--fx-space-1); white-space: nowrap; }
  .az-seg .fx-segment__item > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .az-form { display: grid; gap: var(--fx-space-4); }
  .az-fs { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; border: 0; }
  .az-fs > legend { float: inline-start; inline-size: 100%; margin-block-end: var(--fx-space-1); padding: 0; font-weight: var(--fx-font-weight-medium); }
  .az-choices { display: grid; gap: var(--fx-space-2); }
  .az-choices small { margin-inline-start: auto; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .az-choices .fx-check { display: flex; }
  .az-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fx-space-2); }
  @media (max-width: 599.98px) {
    .az-card__head { grid-template-columns: auto minmax(0, 1fr); }
    .az-card__tags { grid-column: 1 / -1; justify-content: start; }
    .az-matrix__row { grid-template-columns: minmax(0, 1fr); }
    .az-seg { inline-size: 100%; } .az-seg .fx-segment__item { flex: 1; justify-content: center; }
  }
}

/* «Imtihon» şabloni (templates/imtihon.mjs) — faqat --fx-* tokenlar. Kunlar röyxati va 10 ta savol kartasi.
   «Saqlandi · sana» belgisi bölinmaydi: tor ekranda (390 px) sarlavha ostiga tuşadi (Fox OS, 22.10). */
@layer fx.utilities {
  .im { display: grid; gap: var(--fx-space-6); }
  .im-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-3) var(--fx-space-6); }
  .im-title { margin: 0; font-size: var(--fx-font-size-2xl); }
  .im-lead { margin: var(--fx-space-1) 0 0; color: var(--fx-text-secondary); }
  .im-head__prog { display: grid; gap: var(--fx-space-1); inline-size: min(100%, calc(var(--fx-space-12) * 5)); }
  .im-head__count { font-size: var(--fx-font-size-sm); color: var(--fx-text-secondary); font-variant-numeric: tabular-nums; }
  .im-list { display: grid; gap: var(--fx-space-4); }

  /* kunlar röyxati */
  .im-days { display: grid; gap: var(--fx-space-3); margin: 0; padding: 0; list-style: none; }
  .im-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-1) var(--fx-space-4); padding: var(--fx-space-4) var(--fx-space-5); color: inherit; text-decoration: none; }
  .im-day:hover { background: var(--fx-bg-subtle); }
  .im-day:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .im-day__date { font-weight: var(--fx-font-weight-semibold); }
  .im-day__note { grid-column: 1; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .im-day__tags { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: end; gap: var(--fx-space-2); }

  /* savol kartasi */
  .im-q { display: grid; gap: var(--fx-space-4); padding: var(--fx-space-5); scroll-margin-block-start: var(--fx-space-12); }
  .im-q__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2) var(--fx-space-3); }
  .im-q__title { display: inline-flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-size: var(--fx-font-size-md); }
  .im-q__n { display: inline-grid; place-items: center; inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
  .im-q__tags { display: inline-flex; gap: var(--fx-space-2); }
  .im-q__saved { display: inline-flex; align-items: center; gap: var(--fx-space-1); margin-inline-start: auto; white-space: nowrap; color: var(--fx-fg-success); font-size: var(--fx-font-size-sm); }
  .im-q__saved > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  .im-q[data-state="saqlandi"] { background: var(--fx-bg-subtle); }
  .im-chat { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-page); }
  .im-msg--asosiy .fx-message__body { font-weight: var(--fx-font-weight-medium); }
  .im-q__note { margin: 0; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .im-q__goal, .im-q__savol { margin: 0; }
  .im-q__goal { color: var(--fx-text-secondary); }
  .im-q__savol { font-size: var(--fx-font-size-md); }
  .im-q__form { display: grid; gap: var(--fx-space-3); }
  .im-q__fs { display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .im-q__fs > legend { float: inline-start; inline-size: 100%; margin-block-end: var(--fx-space-1); padding: 0; }
  .im-baho { justify-self: start; }
  .im-variant { display: grid; gap: var(--fx-space-2); }
  .im-q__actions { display: flex; justify-content: end; }

  @media (max-width: 599.98px) {
    .im-q { padding: var(--fx-space-4); }
    .im-q__saved { flex-basis: 100%; margin-inline-start: 0; }
    .im-day { grid-template-columns: minmax(0, 1fr); }
    .im-day__tags { grid-column: 1; grid-row: auto; justify-content: start; }
    .im-baho { justify-self: stretch; inline-size: 100%; } .im-baho > .fx-segment__item { flex: 1; }
    .im-q__actions > .fx-btn { inline-size: 100%; }
  }
}

@layer fx.components {
  /* «Domenlar» şabloni (templates/domenlar.mjs, Ustoz 25.10): har domen — karta: tepada nom va holat, ostida jonli teskari sanagiç va sana.
     Desktop-first (Ustoz: «dashboard'ni 90 % kompyuterdan boşqaraman»): kartalar töri keng ekranda 2–3 ustun, telefonda bitta.
     Tus (data-tone) çap çiziq bilan: error — 30 kundan kam, warning — 90 kundan kam. */
  .dm { display: grid; gap: var(--fx-space-4); }
  .dm__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-3); }
  .dm__title { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .dm__n { color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); }
  .dm__guruh { display: grid; gap: var(--fx-space-3); }
  .dm__gtitle { margin: 0; font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); }
  .dm__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fx-space-12) * 8)), 1fr)); gap: var(--fx-space-3); margin: 0; padding: 0; list-style: none; }
  .dm-item { display: grid; align-content: start; gap: var(--fx-space-3); padding: var(--fx-space-4) var(--fx-space-5); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-inline-start: var(--fx-border-width-focus) solid var(--_ton, transparent); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .dm-item[data-tone="error"] { --_ton: var(--fx-fg-error); }
  .dm-item[data-tone="warning"] { --_ton: var(--fx-fg-warning); }
  .dm-item__main { display: grid; gap: var(--fx-space-1); min-inline-size: 0; }
  .dm-item__nom { font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); overflow-wrap: anywhere; }
  .dm-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2) var(--fx-space-3); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .dm-item__izoh { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
  .dm-item__vaqt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--fx-space-2) var(--fx-space-4); }
  .dm-item__sana { color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); font-variant-numeric: tabular-nums; }
}