/* «Lavanda» tema — docs/superpowers/specs/2026-10-16-lavanda-ui-tatbiq-design.md §4.
   Sahifa tuzilishi «Sukunat»dan (spec 2026-09-07) qolgan, rang, fon va tugma yangi.
   Rang faqat shu faylda. Komponentga hex yozilmaydi (test buni tekshiradi).
   Faol holat — har doim --accent; boshqa joyda accent ishlatilmaydi. */

/* Kontrast qiymatlari o'lchangan, taxmin qilinmagan (WCAG 2.1):
   matn 4.5:1, bosiladigan element chegarasi 3:1. Testda tekshiriladi —
   `tools/test-next-yangi-foundation.mjs` har rolni hisoblab ko'radi. */
:root[data-lesson-theme="light"], [data-theme="light"], :root {
  color-scheme: light;
  --canvas: #faf9fc;            /* iliq oq, sof oq emas */
  --canvas-raised: #f1eff7;
  --text-primary: #221f2e;      /* 15.4:1 */
  --text-body: #353144;         /* 12.0:1 */
  --text-secondary: #5d5874;    /* 6.4:1  */
  --text-tertiary: #6c6784;     /* 5.1:1 — eng och matn, shundan pastga tushilmaydi */
  --border-subtle: #e8e5f0;     /* ajratish chizig'i, matn emas */
  --border-strong: #8c86a4;     /* 3.3:1 — bosiladigan element chegarasi */
  --accent: #5546ab;            /* 7.0:1 — havola matni sifatida ham ishlatiladi */
  /* Xira lavanda — «rejadan orqada» kabi hukm bo'lmagan holat matni: faol
     rangdan ko'zga ajraladi, lekin ogohlantirish rangi emas (2026-09-21). */
  --accent-muted: #6a5d97;      /* 5.5:1 */
  --text-on-accent: #ffffff;    /* 7.4:1 */
  --accent-soft: #efebfb;
  /* Asosiy tugma yumshoq lavanda (egasi 16.10, A varianti). Fondan 1.5:1 —
     tugma matni bilan taniladi (WCAG 1.4.11), shuning uchun faqat ikonkali
     tugma bu rolni olmaydi; test ruxsat ro'yxatini tekshiradi. */
  --button: #cfc6f2;
  --text-on-button: #1d1640;    /* 10.5:1 */
  /* Teskari yuza — suzuvchi xabar, ko'rsatma pufakchasi: fondan ajralib turadi. */
  --inverse: #221f2e;           /* fondan 15.4:1 */
  --text-on-inverse: #faf9fc;
  --success: #2f6f44;
  --warning: #9a6200;
  /* Qidiruvdan topilgan so'z: avval yorqin, keyin och (spec 2026-09-24). */
  --izla-strong: #f8d257;
  --izla-soft: #fcefc7;
  --izla-halo: rgba(214, 160, 20, .35);
  --danger: #ab3f38;
  --info: #335d84;
  /* Holat yuzasi: javob varianti to'ldiriladigan yengil rang. Matn ustida
     qoladigani uchun kontrast o'lchangan: --text-primary 13.9:1 / 13.2:1,
     --success 5.2:1, --danger 4.9:1. */
  --success-soft: #e5f1e8;
  --danger-soft: #f9e4e1;
  /* Ogohlantirish yuzasi (Telegram kirishidagi «avval ro'yxatdan
     o'tganmisiz?» eslatmasi). Matn --text-primary/--text-body da qoladi —
     14.7:1 / 11.4:1; --warning chegara va belgi uchun, 4.6:1. */
  --warning-soft: #fef3e4;
  /* Telegram (kabinetdagi «Telegram'ni ulash», 2026-09-30). Brend ko'ki
     #2aabee oq matn bilan 2.6:1 — o'tmaydi; #167bb8 4.6:1. Tugma foni,
     ramka va belgi doirasi; ustidagi matn --text-on-telegram. Fondan 4.4:1,
     matn --telegram-soft ustida 14.4:1 / 11.2:1. */
  --telegram: #167bb8;
  --text-on-telegram: #ffffff;
  --telegram-soft: #eaf4fb;
  /* Tasma banner-plitkasi (spec 2026-09-21 2-bosqich §1.1, §2.2): temaga
     bo'ysunmaydi — banner rasm kabi o'z rangini olib yuradi. Faqat home.css
     `.home-ad-live` ishlatadi. Oq matn: 7.4:1 / 13.8:1. */
  --banner-live-from: #5546ab;
  --banner-live-to: #2e2656;
  --banner-live-ink: #ffffff;
  /* Grafik kategoriyalari (2-bosqich §3.2) — validatordan o'tgan tartib,
     aylanmaydi; faqat identifikatsiya grafiklari (til, qurilma, kanal, bo'lim).
     Lavandaga hali moslanmagan — alohida ish (spec 2026-10-16 §7). */
  --chart-1: #0a7fae;
  --chart-2: #eb6834;
  --chart-3: #4a3aa7;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --focus-ring: #7a6ad6;        /* 4.1:1 */
  --shadow-float: 0 6px 24px rgba(34, 31, 46, .07);
  /* Ko'tarilgan yuza: ikonka konteyneri va bosh sahifadagi blok. Ikki qavat —
     birinchisi (1px) chekkani chizadi, ikkinchisi (3px) yuzani fondan uzadi.
     Chegara o'rniga ishlatiladi: chiziq qo'shsak yana «karta» bo'lib qolardi. */
  --shadow-raised: 0 1px 2px rgba(34, 31, 46, .05), 0 3px 10px rgba(34, 31, 46, .05);
  --shadow-raised-hover: 0 2px 4px rgba(34, 31, 46, .06), 0 8px 20px rgba(34, 31, 46, .07);
  --backdrop: rgba(34, 31, 46, .32);
  --image-opacity: 1;
  /* Asbob suratlari oq fonda ishlangan (jihozlar katalogi): rasm maydoni har temada oq qog'oz. */
  --plate: #ffffff;
  /* Sticky panel foni: matn to'liq o'qiladigan darajada qalin, lekin
     ostidan o'tayotgan kontent harakati sezilib turadi. */
  --panel-veil: rgba(250, 249, 252, .82);
  /* Kitob muqovasi (kutubxona) — bosma buyum, temaga bo'ysunmaydi: oq yozuv 7.4:1. */
  --cover-tone: #5546ab;
  /* Pastel juftlar (fon / ikonka): tezkor plitkalar, keyin bo'lim oilalari.
     Ikonka fonda 5.1–6.0:1, --text-primary fonda 13:1 dan yuqori. */
  --tint-orik-bg: #fde7d8;
  --tint-orik-ink: #9a4c22;
  --tint-shalfey-bg: #e2eee5;
  --tint-shalfey-ink: #386848;
  --tint-osmon-bg: #e1ecf6;
  --tint-osmon-ink: #335d84;
  --tint-lavanda-bg: #ebe6f6;
  --tint-lavanda-ink: #5a4c8f;
  --tint-sariq-bg: #f7eecd;
  --tint-sariq-ink: #735a10;
  --tint-gul-bg: #f8e3e6;
  --tint-gul-ink: #94404e;
  /* Qisqa belgi (logo, qo'lsiz) — sarlavhadagi «Imkonia» oldida. Manbasi
     docs/logo/imkonia-qisqa.svg; data URI bo'lgani uchun alohida so'rovsiz va
     oflayn ham chiziladi. */
  --brand-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-75.77 -21.5 146.6 146.6'%3E%3Cpath d='M0 95.554 V67.193 A23.416 23.416 0 0 1 46.833 67.193 V95.554' fill='none' stroke='%23abd3bf' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='23.416' cy='12.944' r='12.944' fill='%23f1d98c'/%3E%3Cpath d='M-46.833 95.554 V67.193 A23.416 23.416 0 0 1 -10.733 47.509' fill='none' stroke='%23a9c8e6' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='-46.833' cy='18.258' r='12.944' fill='%23f1d98c'/%3E%3C/svg%3E");
}

/* Temaga bog'liq bo'lmagan tokenlar: shakl, o'lcham, shrift. */
:root {
  /* Banner gradienti — yagona gradient (2-bosqich §1.1); rang uchlari tema bloklarida. */
  --banner-live-gradient: linear-gradient(135deg, var(--banner-live-from), var(--banner-live-to));
  --radius-control: 12px;
  --radius-card: 14px;
  --radius-panel: 14px;
  --radius-pill: 999px;
  --content-width: 1040px;
  --reading-width: 640px;
  --search-width: 680px;
  --header-height: 80px;
  --bottom-nav-height: 58px;
  --font-sans: Onest, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* Ko'chish davri aliaslari. Eski sahifalar shu nomlarni ishlatadi; var()
     orqali har temada o'zi yechiladi. Sahifa yangi tilga o'tgach undan
     foydalanmaydi va oxirida o'chiriladi. */
  --surface-structural: var(--canvas);
  --surface-interactive: var(--canvas);
  --surface-hover: var(--canvas-raised);
  --surface-selected: var(--accent-soft);
  --accent-strong: var(--accent);
  --accent-secondary: var(--accent);
  --shadow-card: none;
}

[data-theme="dark"], :root[data-lesson-theme="dark"] {
  color-scheme: dark;
  --canvas: #15141b;            /* iliq to'q kulrang, sof qora emas */
  --canvas-raised: #1e1c27;
  --text-primary: #eeecf5;      /* 15.6:1 */
  --text-body: #d3d0e2;         /* 12.1:1 */
  --text-secondary: #aca8c2;    /* 8.0:1  */
  --text-tertiary: #918caa;     /* 5.7:1  */
  --border-subtle: #282634;
  --border-strong: #6b668e;     /* 3.4:1 — bosiladigan chegara */
  --accent: #cbc1f7;            /* 10.9:1 */
  --accent-muted: #aaa2cf;      /* 7.6:1 */
  --text-on-accent: #15141b;
  --accent-soft: #2a2545;
  --button: #cfc6f2;            /* fondan 11.3:1 */
  --text-on-button: #1d1640;
  --inverse: #eeecf5;
  --text-on-inverse: #15141b;
  --success: #8fd0a0;
  --warning: #e0a83a;
  --izla-strong: #6e5612;
  --izla-soft: #342c14;
  --izla-halo: rgba(236, 186, 64, .38);
  --danger: #f09a90;
  --info: #a0c6e8;
  /* --text-primary 12.3:1 / 12.6:1, --success 8.0:1, --danger 6.8:1. */
  --success-soft: #1b2e21;
  --danger-soft: #3a2220;
  --warning-soft: #33260f;     /* matn 12.6:1 / 9.7:1, --warning 6.9:1 */
  --telegram: #167bb8;         /* oq matn 4.6:1, fondan 4.0:1 */
  --text-on-telegram: #ffffff;
  --telegram-soft: #0f2433;    /* matn 13.6:1 / 10.5:1, --telegram 3.5:1 */
  --banner-live-from: #5546ab;
  --banner-live-to: #2e2656;
  --banner-live-ink: #ffffff;
  /* Qora fonda palitra to'qroq — `--accent` seriya sifatida juda och (validator rad etdi). */
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #9085e9;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --focus-ring: #b3a7f0;
  --shadow-float: 0 6px 24px rgba(0, 0, 0, .55);
  /* Qorong'ida soya fondan ajratmaydi — u allaqachon qora. Shuning uchun
     chuqurlik `--canvas-raised` ning ochroq bo'lishidan keladi, soya esa
     faqat chekkani biroz cho'ktiradi. */
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 12px rgba(0, 0, 0, .3);
  --shadow-raised-hover: 0 2px 4px rgba(0, 0, 0, .55), 0 8px 22px rgba(0, 0, 0, .38);
  --backdrop: rgba(0, 0, 0, .6);
  --image-opacity: .9;
  /* Asbob suratlari oq fonda ishlangan (jihozlar katalogi): rasm maydoni har temada oq qog'oz. */
  --plate: #ffffff;
  --panel-veil: rgba(21, 20, 27, .82);
  /* Kitob muqovasi (kutubxona) — bosma buyum, temaga bo'ysunmaydi: oq yozuv 7.4:1. */
  --cover-tone: #5546ab;
  /* Ikonka fonda 8.3–9.1:1, --text-primary fonda 11.9:1 dan yuqori. */
  --tint-orik-bg: #3a271c;
  --tint-orik-ink: #f5c09f;
  --tint-shalfey-bg: #1e2c23;
  --tint-shalfey-ink: #a2d2b0;
  --tint-osmon-bg: #1b2936;
  --tint-osmon-ink: #a0c6e8;
  --tint-lavanda-bg: #28233a;
  --tint-lavanda-ink: #c6bbf0;
  --tint-sariq-bg: #332c17;
  --tint-sariq-ink: #e6d08a;
  --tint-gul-bg: #37212a;
  --tint-gul-ink: #f0b4bf;
  --brand-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-75.77 -21.5 146.6 146.6'%3E%3Cpath d='M0 95.554 V67.193 A23.416 23.416 0 0 1 46.833 67.193 V95.554' fill='none' stroke='%2393c0a9' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='23.416' cy='12.944' r='12.944' fill='%23d6bd6f'/%3E%3Cpath d='M-46.833 95.554 V67.193 A23.416 23.416 0 0 1 -10.733 47.509' fill='none' stroke='%238fb1d3' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='-46.833' cy='18.258' r='12.944' fill='%23d6bd6f'/%3E%3C/svg%3E");
}

/* O'qish fonlari — sayt temasidan mustaqil to'plamlar.
   Kitob o'quvchisida subtree'ga (`data-reader-theme`), mavzu sahifasida
   `<html>` ga (`data-lesson-theme`) tushadi. Mavzu atributi sayt
   `data-theme` si bilan bir elementda turadi, shuning uchun har to'plam
   holat yuzasi va backdrop'gacha TO'LIQ yoziladi — yozilmagan rol sayt
   temasidan sizib chiqadi. Oq va qora to'plam yuqoridagi bloklarda,
   `:root[...]` selektori bilan: kuchliroq bo'lgani uchun sayt temasini yengadi. */
[data-reader-theme="sepia"], [data-lesson-theme="sepia"] {
  color-scheme: light;
  --canvas: #f3ead6;
  --canvas-raised: #eadfc5;
  --text-primary: #43321c;
  --text-body: #4f3d26;
  --text-secondary: #6d5738;  /* 5.7:1 */
  --text-tertiary: #7a6446;   /* 4.7:1 — iliq fon och matnni yutadi, to'qroq kerak */
  --border-subtle: #e0d3b4;
  --border-strong: #917c50;   /* 3.2:1 — bosiladigan chegara */
  --accent: #8a5a12;
  --accent-muted: #4a6076;    /* 5.4:1 */
  --text-on-accent: #fbf5e8;
  --accent-soft: #eadcbc;
  --button: #43321c;
  --text-on-button: #fbf5e8;
  --success: #44692a;         /* 5.3:1 — avvalgi #4f7a2a 4.2:1 edi */
  --warning: #a35e0a;
  --izla-strong: #ecc253;
  --izla-soft: #e9d49c;
  --izla-halo: rgba(160, 108, 14, .35);
  --danger: #a8403c;
  --info: #4b6b8f;
  /* --text-primary 10.0:1 / 9.6:1, --success 5.2:1, --danger 4.8:1. */
  --success-soft: #e9ead2;
  --danger-soft: #f5e0d4;
  --warning-soft: #faf0dd;     /* matn 10.9:1 / 9.2:1, --warning 4.4:1 (faqat chegara) */
  --telegram: #167bb8;         /* oq matn 4.6:1, fondan 3.9:1 */
  --text-on-telegram: #ffffff;
  --telegram-soft: #e3ebe6;    /* matn 10.1:1 / 8.5:1, --telegram 3.8:1 */
  /* Tasma banner-plitkasi (spec 2026-09-21 2-bosqich §1.1, §2.2): temaga
     bo'ysunmaydi — banner rasm kabi o'z rangini olib yuradi. Faqat home.css
     `.home-ad-live` ishlatadi. Oq matn: 6.0:1 / 10.7:1. */
  --banner-live-from: #086a92;
  --banner-live-to: #12406b;
  --banner-live-ink: #ffffff;
  /* Grafik kategoriyalari (2-bosqich §3.2) — validatordan o'tgan tartib,
     aylanmaydi; faqat identifikatsiya grafiklari (til, qurilma, kanal, bo'lim). */
  --chart-1: #0a7fae;
  --chart-2: #eb6834;
  --chart-3: #4a3aa7;
  --chart-4: #c98500;   /* qog'oz fonda sariq to'qroq: 2.6:1, validator PASS */
  --chart-5: #e87ba4;
  --focus-ring: #8a5a12;
  --shadow-float: 0 6px 24px rgba(84, 60, 20, .16);
  --shadow-raised: 0 1px 2px rgba(84, 60, 20, .07), 0 3px 10px rgba(84, 60, 20, .07);
  --shadow-raised-hover: 0 2px 4px rgba(84, 60, 20, .09), 0 8px 20px rgba(84, 60, 20, .1);
  --backdrop: rgba(67, 50, 28, .32);
  --panel-veil: rgba(243, 234, 214, .84);
  /* Kitob muqovasi (kutubxona) — bosma buyum, temaga bo'ysunmaydi: oq yozuv 7.4:1. */
  --cover-tone: #5546ab;
  --image-opacity: 1;
  /* Asbob suratlari oq fonda ishlangan (jihozlar katalogi): rasm maydoni har temada oq qog'oz. */
  --plate: #ffffff;
  /* Lavanda tema rollari (spec 2026-10-16 §4.2). Teskari yuza bu to'plamning
     o'z tugmasi rangida qoladi, pastel juft va belgi yorug' temadan olinadi. */
  --inverse: #43321c;
  --text-on-inverse: #fbf5e8;
  --tint-orik-bg: #fde7d8;
  --tint-orik-ink: #9a4c22;
  --tint-shalfey-bg: #e2eee5;
  --tint-shalfey-ink: #386848;
  --tint-osmon-bg: #e1ecf6;
  --tint-osmon-ink: #335d84;
  --tint-lavanda-bg: #ebe6f6;
  --tint-lavanda-ink: #5a4c8f;
  --tint-sariq-bg: #f7eecd;
  --tint-sariq-ink: #735a10;
  --tint-gul-bg: #f8e3e6;
  --tint-gul-ink: #94404e;
  --brand-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-75.77 -21.5 146.6 146.6'%3E%3Cpath d='M0 95.554 V67.193 A23.416 23.416 0 0 1 46.833 67.193 V95.554' fill='none' stroke='%23abd3bf' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='23.416' cy='12.944' r='12.944' fill='%23f1d98c'/%3E%3Cpath d='M-46.833 95.554 V67.193 A23.416 23.416 0 0 1 -10.733 47.509' fill='none' stroke='%23a9c8e6' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='-46.833' cy='18.258' r='12.944' fill='%23f1d98c'/%3E%3C/svg%3E");
}

/* Tungi ko'k — kechqurun o'qish uchun. Qoradan yumshoqroq: fon ko'kimtir,
   matn sof oq emas, shuning uchun uzoq o'qishda ko'z qamashmaydi. */
[data-reader-theme="navy"], [data-lesson-theme="navy"] {
  color-scheme: dark;
  --canvas: #0f1b2d;
  --canvas-raised: #172740;
  --text-primary: #edf2f8;      /* 15.4:1 */
  --text-body: #d0d9e4;         /* 12.1:1 */
  --text-secondary: #a8b6c8;    /* 8.4:1  */
  --text-tertiary: #8898ae;     /* 5.9:1  */
  --border-subtle: #223350;
  --border-strong: #5f7896;     /* 3.8:1 — bosiladigan chegara */
  --accent: #6ccaf2;            /* 9.4:1 */
  --accent-muted: #8fb0c8;      /* 7.6:1 */
  --text-on-accent: #0f1b2d;
  --accent-soft: #15354f;
  --button: #edf2f8;
  --text-on-button: #0f1b2d;
  --success: #6fcf9a;
  --warning: #e5b04a;
  --izla-strong: #665412;
  --izla-soft: #2e3322;
  --izla-halo: rgba(236, 186, 64, .36);
  --danger: #f28b8b;
  --info: #6ccaf2;
  /* --text-primary 12.6:1 / 13.0:1, --success 7.5:1, --danger 6.1:1. */
  --success-soft: #12302b;
  --danger-soft: #3a2130;
  --warning-soft: #302a1f;     /* matn 12.6:1 / 10.0:1, --warning 7.2:1 */
  --telegram: #167bb8;         /* oq matn 4.6:1, fondan 3.8:1 */
  --text-on-telegram: #ffffff;
  --telegram-soft: #0c2640;    /* matn 13.7:1 / 10.8:1, --telegram 3.3:1 */
  --banner-live-from: #086a92;
  --banner-live-to: #12406b;
  --banner-live-ink: #ffffff;
  /* Qora fonda palitra to'qroq — `--accent` seriya sifatida juda och (validator rad etdi). */
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #9085e9;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --focus-ring: #6ccaf2;
  --shadow-float: 0 6px 24px rgba(2, 8, 18, .55);
  --shadow-raised: 0 1px 2px rgba(2, 8, 18, .5), 0 3px 12px rgba(2, 8, 18, .3);
  --shadow-raised-hover: 0 2px 4px rgba(2, 8, 18, .55), 0 8px 22px rgba(2, 8, 18, .38);
  --backdrop: rgba(2, 8, 18, .6);
  --image-opacity: .9;
  /* Asbob suratlari oq fonda ishlangan (jihozlar katalogi): rasm maydoni har temada oq qog'oz. */
  --plate: #ffffff;
  --panel-veil: rgba(15, 27, 45, .82);
  /* Kitob muqovasi (kutubxona) — bosma buyum, temaga bo'ysunmaydi: oq yozuv 7.4:1. */
  --cover-tone: #5546ab;
  /* Lavanda tema rollari (spec 2026-10-16 §4.2). Teskari yuza bu to'plamning
     o'z tugmasi rangida qoladi, pastel juft va belgi qorong'i temadan olinadi. */
  --inverse: #edf2f8;
  --text-on-inverse: #0f1b2d;
  --tint-orik-bg: #3a271c;
  --tint-orik-ink: #f5c09f;
  --tint-shalfey-bg: #1e2c23;
  --tint-shalfey-ink: #a2d2b0;
  --tint-osmon-bg: #1b2936;
  --tint-osmon-ink: #a0c6e8;
  --tint-lavanda-bg: #28233a;
  --tint-lavanda-ink: #c6bbf0;
  --tint-sariq-bg: #332c17;
  --tint-sariq-ink: #e6d08a;
  --tint-gul-bg: #37212a;
  --tint-gul-ink: #f0b4bf;
  --brand-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-75.77 -21.5 146.6 146.6'%3E%3Cpath d='M0 95.554 V67.193 A23.416 23.416 0 0 1 46.833 67.193 V95.554' fill='none' stroke='%2393c0a9' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='23.416' cy='12.944' r='12.944' fill='%23d6bd6f'/%3E%3Cpath d='M-46.833 95.554 V67.193 A23.416 23.416 0 0 1 -10.733 47.509' fill='none' stroke='%238fb1d3' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='-46.833' cy='18.258' r='12.944' fill='%23d6bd6f'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text-primary);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; height: auto; opacity: var(--image-opacity); }
::selection { background: var(--accent-soft); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  :root { --header-height: 52px; }
}

/* Til chaqnashi. Sahifa HTML da o'zbekcha matn bilan keladi; saqlangan til
   ru yoki en bo'lsa `<head>` dagi kichik skript `data-i18n-pending` qo'yadi
   va tarjima qilinadigan satrlar chizilmaydi. Bayroqni `shell.js` tarjimadan
   keyin oladi — o'quvchi o'zbekchasini umuman ko'rmaydi. Joy `visibility`
   bilan saqlanadi, shuning uchun sahifa sakramaydi. */
html[data-i18n-pending] [data-i18n] { visibility: hidden; }

/* Statik ro'yxat (tools/build-yangi-seo.mjs, spec 2026-09-21 §3.3). JS
   ishlaydigan brauzerda u birinchi bo'yoqdan yashirin: `mavzular.js` uni
   skelet bilan almashtiradi va `rise` bilan ko'taradi — bugungidek. JSsiz
   brauzer va qidiruv robotida `data-js` yo'q, ro'yxat ko'rinadi. JS moduli
   kelmasa (tarmoq) 2,5 s dan keyin CSS o'zi ochadi; JS kelgan bo'lsa
   `data-prerendered` olib tashlangan — qoida ishlamaydi. */
html[data-js] [data-prerendered] > li { opacity: 0; transform: translateY(14px); animation: seo-zaxira 0s linear 2.5s forwards; }
@keyframes seo-zaxira { to { opacity: 1; transform: none; } }