/* ══════════════════════════════════════════════════════════════════════════
   PEGGY USTOZ ISHXONASI — dizayn tizimi
   SHARTNOMA 6.1 (tokenlar) va 6.4 (class nomlari) bo'yicha.

   Fikr: rasmlar juda yorqin va rangli — interfeys ularni RAMKALAYDI,
   ular bilan bahslashmaydi. Shuning uchun to'q, iliq, xotirjam fon va
   bitta urg'u rangi: OLTIN. Yashil = tayyor, qizil = qolgan, ko'k = ma'lumot.

   Kontrast o'lchandi (WCAG 2.1, alfasiz — barcha fonlar QUYUQ va SHAFFOF EMAS):
     --matn   / --fon 15.00 · / --yuza 13.92 · / --yuza-2 12.54   → AA
     --matn-2 / --fon  7.84 · / --yuza  7.27 · / --yuza-2  6.55   → AA
     --matn-3 / --fon  3.85 · / --yuza  3.57 · / --yuza-2  3.21   → FAQAT
       katta matn yoki chegara/grafik uchun. Oddiy matnda ISHLATILMAYDI.
     --oltin fonda + --fon matn = 10.25 · --yashil fonda + --fon matn = 4.92
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palitra (SHARTNOMA 6.1 — o'zgartirilmaydi) ─────────────────────────── */
  --jun:      #F3E3C8;   /* krem jun */
  --oltin:    #F5B32E;   /* futbolka/oltin — BIRLAMCHI amal */
  --oltin-2:  #FFC94D;
  --qizil:    #D8452F;   /* bo'yinbog' — ogohlik/qolgan ish */
  --kok:      #3D74C7;   /* kombinezon — ma'lumot */
  --yashil:   #46915B;   /* doska — tayyor/tasdiq */
  --jigar:    #8A5A32;   /* quloq */

  --fon:      #14100C;   /* iliq deyarli qora */
  --yuza:     #1E1813;
  --yuza-2:   #29211A;
  --chegara:  #3A2F25;
  --matn:     #F3E3C8;
  --matn-2:   #B7A48A;
  /* ⚠ 2026-09-01 qorovul o'lchadi: #7E6E5A mayda matnda 3.21:1 bergan —
     WCAG 4.5:1 dan past. #9C8B74: fon ustida 5.79:1, yuza-2 ustida 4.86:1. */
  --matn-3:   #9C8B74;

  /* To'q fonda MATN uchun ochiq variantlar — o'lchangan, 4.5:1 dan yuqori.
     Asosiy ranglar (qizil 4.34, ko'k 4.08) matn sifatida yiqilar edi. */
  --qizil-2:  #F0836E;   /* 7.37 : 1 --fon ustida */
  --kok-2:    #7FA9E8;   /* 7.88 : 1 */
  --yashil-2: #79C48D;   /* 9.10 : 1 */

  /* ── O'lcham: premium = ZICH ────────────────────────────────────────────── */
  --oraliq: 20px;   /* bo'lim orasi */
  --ich:    14px;   /* karta ichi */
  --ost:    10px;   /* sarlavha ostida */
  --chet:   16px;   /* ekran cheti */
  --teg:    44px;   /* eng kichik bosiladigan o'lcham */
  --tab-boy: 58px;

  /* ── Radius: YUMSHOQ KVADRAT, dumaloq emas ──────────────────────────────── */
  --r-kichik: 10px;
  --r:        14px;
  --r-katta:  20px;
  --r-toliq:  999px;   /* faqat nuqta va varaq tutqichi uchun */

  /* ── Soya: juda yumshoq ─────────────────────────────────────────────────── */
  --soya-1: 0 1px 2px rgba(0, 0, 0, .45);
  --soya-2: 0 10px 30px rgba(0, 0, 0, .5);

  /* ── Harakat ────────────────────────────────────────────────────────────── */
  --tez:   160ms;
  --tez-2: 200ms;
  --egri:  cubic-bezier(.2, .7, .3, 1);

  --shrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
            system-ui, Roboto, "Helvetica Neue", sans-serif;
}

/* ══ RESET ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fon);
  color: var(--matn);
  font-family: var(--shrift);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--oltin);
  outline-offset: 2px;
  border-radius: 8px;
}

::selection { background: #4A3A1A; color: var(--matn); }

/* ══ TIPOGRAFIKA ══════════════════════════════════════════════════════════ */

.bosh-nom, .kirish-nom, .bolim-nom, .karta-bosh,
.halqa-son, .plitka-son, .harfkarta-harf {
  letter-spacing: -.02em;
}

.halqa-son, .plitka-son, .sahnakarta-nom, .maydon-pin {
  font-variant-numeric: tabular-nums;
}

/* Uzun matn (prompt, caption, stories, hujjat) — hech qachon eniga chiqmaydi */
.uzunmatn {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: 15px;
  line-height: 1.55;
  color: var(--matn-2);
}

/* ══ SKELETON ═════════════════════════════════════════════════════════════
   Balandlik SAKRAMAYDI: skeleton haqiqiy mazmun bilan bir xil o'lchamda. */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--yuza-2);
  border-radius: var(--r-kichik);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(243, 227, 200, .07), transparent);
  transform: translateX(-100%);
  animation: peggy-suriladi 1.4s var(--egri) infinite;
}

@keyframes peggy-suriladi { to { transform: translateX(100%); } }

.skeleton-matn {
  display: block;
  height: 13px;
  margin: 6px 0;
  border-radius: 7px;
}

/* ══ 1. KIRISH — PIN ekrani ═══════════════════════════════════════════════ */

.kirish {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(28px + env(safe-area-inset-top, 0px))
           calc(var(--chet) + env(safe-area-inset-right, 0px))
           calc(28px + env(safe-area-inset-bottom, 0px))
           calc(var(--chet) + env(safe-area-inset-left, 0px));
}

.kirish-ich {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.kirish-belgi {
  /* Yangi logo o'z shakliga ega (dumaloq yuz) — quti va soya kerak emas,
     ular belgini «tugma» ga o'xshatib qo'yardi. */
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--oraliq);
}
.peggy-logo { display: block; }

.kirish-nom {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
}

.kirish-izoh {
  color: var(--matn-2);
  font-size: 15px;
  margin-bottom: 24px;
}

.kirish-form {
  display: grid;
  gap: 14px;
  text-align: left;
}

.kirish-xato {
  margin-top: 2px;
  color: var(--qizil-2);        /* 7.37:1 — o'lchangan */
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ══ 2. BOSH — sarlavha ═══════════════════════════════════════════════════
   «Orqaga» ALOHIDA yuqori qatorda, kontent keyingi qatordan (6.5 / 7-band). */

.bosh {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--fon);       /* shaffof EMAS — kontrast o'lchovi aldamasin */
  border-bottom: 1px solid var(--chegara);
  padding: calc(6px + env(safe-area-inset-top, 0px))
           calc(var(--chet) + env(safe-area-inset-right, 0px))
           10px
           calc(var(--chet) + env(safe-area-inset-left, 0px));
}

.bosh-qator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--teg);
}

.bosh-orqa,
.bosh-amal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--teg);            /* 44 × 44 — ikonka kichik, maydon katta */
  height: var(--teg);
  border-radius: var(--r);
  color: var(--matn-2);
  transition: background-color var(--tez) var(--egri),
              color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.bosh-orqa { margin-left: -10px; }   /* ikonka optik jihatdan chetga tekis tursin */
.bosh-amal { margin-left: auto; margin-right: -10px; }

.bosh-orqa svg,
.bosh-amal svg { width: 22px; height: 22px; fill: currentColor; }

.bosh-orqa:active,
.bosh-amal:active {
  background: var(--yuza-2);
  color: var(--matn);
  transform: scale(.94);
}

.bosh-nom {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.22;
  padding-top: 2px;
  overflow-wrap: anywhere;
}

/* nozik progress chizig'i — sarlavha pastki qirrasida */
.bosh-yuk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--tez) var(--egri);
}

.bosh-yuk.faol { opacity: 1; }

.bosh-yuk::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--oltin);
  animation: peggy-yukchiziq 1.1s var(--egri) infinite;
}

@keyframes peggy-yukchiziq {
  from { transform: translateX(-110%); }
  to   { transform: translateX(310%); }
}

/* ══ 3. TAB — pastki menyu (5 ta) ═════════════════════════════════════════ */

.tab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--yuza);
  border-top: 1px solid var(--chegara);
  padding: 4px calc(env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px)) calc(env(safe-area-inset-left, 0px));
}

.tab-el {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: var(--tab-boy);   /* 58 > 44 */
  padding: 6px 2px;
  border-radius: 12px;
  color: var(--matn-2);         /* 7.27:1 */
  transition: color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.tab-el svg { width: 23px; height: 23px; fill: currentColor; }

.tab-el-nom {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-el.faol { color: var(--oltin); }          /* 9.51:1 */
.tab-el:active { transform: scale(.94); color: var(--matn); }
.tab-el.faol:active { color: var(--oltin-2); }

/* ══ 4. EKRAN va bo'limlar ════════════════════════════════════════════════ */

.ekran {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--oraliq)
           calc(var(--chet) + env(safe-area-inset-right, 0px))
           calc(var(--tab-boy) + var(--oraliq) + 12px + env(safe-area-inset-bottom, 0px))
           calc(var(--chet) + env(safe-area-inset-left, 0px));
}

.bolim { margin-top: var(--oraliq); }
.bolim:first-child { margin-top: 0; }

.bolim-nom {
  margin-bottom: var(--ost);
  font-size: 15px;
  font-weight: 700;
  color: var(--matn-2);
}

/* tugmalar qatori */
.qator {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--ost);
}

.qator > * { flex: 1 1 auto; }

/* ≥720px da ikki ustun (kadr: rasm | matn) */
.ikkiustun { display: block; }

/* ══ 5. HALQA — «87 dan nechtasi tayyor» ══════════════════════════════════ */

.halqa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

.halqa-doira {
  width: 172px;
  height: 172px;
  transform: rotate(-90deg);
}

.halqa-yol {
  fill: none;
  stroke: var(--chegara);       /* --yuza-2 fonda deyarli ko'rinmasdi (1.20) */
  stroke-width: 9;
}

.halqa-chiziq {
  fill: none;
  stroke: var(--oltin);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray 600ms var(--egri);
}

.halqa-son {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-10px);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.halqa-izoh {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(24px);
  font-size: 13px;
  color: var(--matn-2);
}

/* ══ 6. PLITKA — raqamli ko'rsatkichlar ═══════════════════════════════════ */

.plitkalar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--oraliq);
}

.plitka {
  min-width: 0;
  padding: 12px 10px;
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  box-shadow: var(--soya-1);
  text-align: center;
}

.plitka-son {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.plitka-nom {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--matn-2);
}

/* ══ 7. KARTA ═════════════════════════════════════════════════════════════ */

.karta {
  display: block;
  margin-bottom: 10px;
  padding: var(--ich);
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  /* ⚠ 2026-09-01: soya OLIB TASHLANDI — soya «bosiladi» degan taassurot
     beradi va karta tugmadan farqlanmay qolgan edi (Shaxzod: «bosishlar
     noaniq»). Endi soya FAQAT asosiy tugmada. */
  box-shadow: none;
  transition: background-color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.karta:last-child { margin-bottom: 0; }

a.karta:active,
button.karta:active {
  background: var(--yuza-2);
  transform: scale(.985);
}

.karta-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.karta-tan {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--matn-2);
  overflow-wrap: anywhere;
}

/* ══ 8. RASM QUTISI ═══════════════════════════════════════════════════════
   aspect-ratio bilan joy OLDINDAN band — rasm kelganda balandlik sakramaydi.
   Fon TOKEN (#fff YOZILMAYDI), rasm cho'zilmaydi: object-fit:contain. */

.rasmquti {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r-kichik);
}

.rasmquti img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rasmquti.skeleton { background: var(--yuza); }   /* qutining foni token bo'lib qolsin */

/* ══ 9. HARF TO'RI — alifbo ═══════════════════════════════════════════════
   Harf DIZAYN ELEMENTI: katta, oltin, qalin. Rasm ustida EMAS — quyuq
   yuzada, chunki rasm ustidagi shaffof qatlam kontrastni o'lchab bo'lmas
   qilib qo'yadi. */

.harfgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.harfkarta {
  display: block;
  min-width: 0;
  padding-bottom: 10px;
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--soya-1);
  transition: background-color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.harfkarta:active { background: var(--yuza-2); transform: scale(.975); }

.harfkarta-rasm {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* to'r zich tursin — kadr emas, muqova */
  overflow: hidden;
  background: var(--yuza);      /* token; #fff YOZILMAYDI */
  border-bottom: 1px solid var(--chegara);
}

.harfkarta-rasm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.harfkarta-rasm.skeleton { background: var(--yuza); border-radius: 0; }

.harfkarta-harf {
  padding: 8px 10px 0;
  color: var(--oltin);          /* 9.51:1 --yuza ustida */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
}

.harfkarta-misol {
  padding: 2px 10px 0;
  color: var(--matn-2);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.nuqtalar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px 0;
}

.nuqta {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--r-toliq);
  background: var(--matn-3);    /* 3.57:1 — grafik uchun yetarli */
}

.nuqta.tayyor { background: var(--yashil); }

/* ══ 10. SAHNA KARTASI — dars ichidagi 3 kadr ═════════════════════════════ */

.sahnakarta {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
  padding: var(--ich);
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  box-shadow: var(--soya-1);
  transition: background-color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.sahnakarta:last-child { margin-bottom: 0; }
.sahnakarta:active { background: var(--yuza-2); transform: scale(.985); }

.sahnakarta-rasm { grid-row: 1 / span 2; }

.sahnakarta-nom {
  align-self: start;
  font-size: 13px;
  font-weight: 700;
  color: var(--oltin);
}

.sahnakarta-dialog {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--matn);
  overflow-wrap: anywhere;
}

/* ══ 11. TUGMALAR ═════════════════════════════════════════════════════════
   -webkit-tap-highlight-color:transparent qo'yilgan — shuning uchun HAR
   BIRIDA :active belgisi bor (scale + fon o'zgarishi). */

.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;             /* ≥44 */
  min-width: var(--teg);
  padding: 12px 18px;
  background: var(--yuza-2);
  color: var(--matn);
  border: 1px solid var(--chegara);
  border-radius: 12px;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color var(--tez) var(--egri),
              border-color var(--tez) var(--egri),
              color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.tugma svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }

.tugma:active { background: var(--chegara); transform: scale(.97); }

.tugma.asosiy {
  background: var(--oltin);
  color: var(--fon);            /* 10.25:1 */
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(245, 179, 46, .14);
}

.tugma.asosiy:active { background: var(--oltin-2); transform: scale(.97); }

.tugma.ikkilamchi {
  background: var(--yuza-2);
  color: var(--matn);
  border-color: var(--chegara);
}

.tugma.ikkilamchi:active { background: var(--chegara); }

.tugma.jim {
  background: transparent;
  color: var(--matn-2);
  border-color: transparent;
  box-shadow: none;
}

.tugma.jim:active { background: var(--yuza-2); color: var(--matn); }

.tugma.xavf {
  background: var(--yuza-2);
  color: var(--qizil-2);        /* 6.16:1 — to'la qizil fon 4.34 da yiqilardi */
  border-color: var(--qizil);
}

.tugma.xavf:active { background: var(--chegara); border-color: var(--qizil-2); }

.tugma.katta {
  width: 100%;
  min-height: 54px;
  padding: 15px 20px;
  font-size: 17px;
}

/* «O'chiq» holat KO'Z BILAN ajralib tursin: botiq fon + uzuq chegara.
   (filter:saturate() kulrang tugmani umuman o'zgartirmas ekan — suratdan
   o'lchab topildi.) Rang --matn-2: 7.84:1 — o'chiq, lekin o'qiladi. */
.tugma[disabled],
.tugma:disabled {
  background: var(--fon);
  color: var(--matn-2);
  border: 1px dashed var(--chegara);
  box-shadow: none;
  font-weight: 600;
  transform: none;
  cursor: default;
  pointer-events: none;
}

/* ══ 12. NUSXA TUGMASI — kadr ekranining asosiy amali ═════════════════════
   ENI QOTIRILGAN: matn «Promptni nusxala» → «Nusxalandi» ga o'zgarganda
   tugma sakramasin. */

/* ══════════════════════════════════════════════════════════════════════════
   TUGMA TIZIMI v2 — 2026-09-01, Shaxzod: «bosishlar noaniq, fokus tarqoq»
   Instagram tartibi olindi (ko'rinish emas, TARTIB):
     · bir ekranda BITTA to'ldirilgan tugma — qolgani jim
     · amallar ikonka+yozuv qatorida, qutisiz
     · nusxalash — matn yonidagi kichik ikonka, to'liq kenglikdagi tasma EMAS
     · bo'limlar karta emas, nozik chiziq bilan ajraladi
   Karta va tugma endi BIR-BIRIGA O'XSHAMAYDI:
     karta — soyasiz yuza + 1px chegara + radius 14
     tugma — radius 12, qalin harf, bosilganda aniq javob
   ══════════════════════════════════════════════════════════════════════════ */

.nusxa-tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--teg);
  padding: 10px 16px;
  background: var(--yuza-2);
  color: var(--matn);
  border: 1px solid var(--chegara);
  border-radius: 12px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  transition: background-color var(--tez) var(--egri),
              color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}
.nusxa-tugma:active { transform: scale(.97); background: var(--chegara); }
.nusxa-tugma.bajarildi { color: var(--yashil-2); border-color: var(--yashil-2); }

/* ── Matn-amal: quti yo'q, ikonka + yozuv ──────────────────────────────── */
.amal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--teg);
  padding: 9px 12px;
  background: transparent;
  color: var(--matn);
  border: 0;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}
.amal .bel { flex: 0 0 20px; width: 20px; height: 20px; color: var(--oltin); }
.amal:active { background: var(--yuza-2); transform: scale(.97); }
.amal[disabled] { opacity: .45; }
@media (hover: none) { .amal:hover { background: transparent; } }

/* Amal qatori — teng taqsimlanadi, orasida nozik ajratgich */
.amalqator {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 4px;
}
.amalqator .amal { flex: 1 1 0; min-width: 0; }
.amalqator .amal + .amal { border-left: 1px solid var(--chegara); border-radius: 0 11px 11px 0; }
.amalqator .amal:first-child { border-radius: 11px 0 0 11px; }

/* ── Nusxa ikonkasi — bo'lim sarlavhasining o'ng chekkasida ────────────── */
.nusxa-bel {
  flex: 0 0 auto;
  width: var(--teg);
  height: var(--teg);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--matn-3);
  border: 0;
  border-radius: 11px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tez) var(--egri),
              color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}
.nusxa-bel .bel { width: 20px; height: 20px; }
.nusxa-bel:active { background: var(--yuza-2); color: var(--oltin); transform: scale(.92); }
.nusxa-bel.bajarildi { color: var(--yashil-2); }
@media (hover: none) { .nusxa-bel:hover { background: transparent; } }

/* ── Bo'lim: karta emas, chiziq bilan ajratilgan ───────────────────────── */
.qism { padding: 14px 0 16px; border-top: 1px solid var(--chegara); }
.qism:first-child { border-top: 0; }
.qism-bosh {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}
.qism-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--matn-3);
}
.qism-son { font-size: 12px; color: var(--matn-3); font-variant-numeric: tabular-nums; }
.qism-tan { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--matn); }

/* ── Segmentli tanlov (holat) — bitta qatorda, aniq faol holat ─────────── */
.segment {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--yuza-2);
  border: 1px solid var(--chegara);
  border-radius: 13px;
}
.segment button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  background: transparent;
  color: var(--matn-3);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tez) var(--egri),
              color var(--tez) var(--egri);
}
.segment button .bel { width: 18px; height: 18px; flex: 0 0 18px; }
.segment button:active { background: var(--chegara); }
.segment button.faol {
  background: var(--yuza);
  color: var(--matn);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.segment button.faol.tayyor { color: var(--yashil-2); }
.segment button.faol.nuqson { color: var(--qizil-2); }
@media (hover: none) { .segment button:hover { background: transparent; } }


.nusxa-tugma:active { background: var(--oltin-2); transform: scale(.97); }

.nusxa-tugma.bajarildi {
  background: var(--yashil);
  color: var(--fon);            /* 4.92:1 */
}

.nusxa-tugma.bajarildi:active { background: var(--yashil); transform: scale(.97); }

.nusxa-tugma[disabled] {
  background: var(--fon);
  color: var(--matn-2);
  border: 1px dashed var(--chegara);
  box-shadow: none;
  font-weight: 600;
  pointer-events: none;
}

/* ══ 13. HOLAT TUGMASI — montaj / joylandi / video ════════════════════════ */

.holat-tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 14px;
  background: var(--yuza-2);
  color: var(--matn-2);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color var(--tez) var(--egri),
              border-color var(--tez) var(--egri),
              color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.holat-tugma::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: var(--r-toliq);
  background: var(--matn-3);
  transition: background-color var(--tez) var(--egri);
}

.holat-tugma:active { background: var(--chegara); transform: scale(.97); }

.holat-tugma.yoqilgan {
  color: var(--yashil-2);       /* 7.61:1 */
  border-color: var(--yashil);
}

.holat-tugma.yoqilgan::before { background: var(--yashil); }

.holat-tugma[disabled] {
  background: var(--fon);
  color: var(--matn-2);
  border-style: dashed;
  pointer-events: none;
}

.holat-tugma[disabled]::before { background: var(--chegara); }

/* ══ 14. MAYDON — kiritish ════════════════════════════════════════════════
   Shrift 16px dan KICHIK EMAS: iOS o'zi kattalashtirib yubormasin. */

.maydon { display: block; }

.maydon-nom {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--matn-2);
}

.maydon input,
.maydon textarea,
.maydon select,
.maydon-pin {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--yuza-2);
  color: var(--matn);
  border: 1px solid var(--matn-3);   /* 3.21:1 — chegara ko'rinadi (WCAG 1.4.11) */
  border-radius: var(--r);
  font-size: 16px;                   /* ⛔ bundan kichik YOZILMAYDI */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--tez) var(--egri),
              box-shadow var(--tez) var(--egri);
}

.maydon textarea {
  min-height: 92px;
  line-height: 1.5;
  resize: vertical;
  overflow-wrap: anywhere;
}

.maydon input::placeholder,
.maydon textarea::placeholder,
.maydon-pin::placeholder {
  color: var(--matn-2);              /* 6.55:1 — matn-3 bu yerda past bo'lardi */
  opacity: 1;
}

.maydon input:focus,
.maydon textarea:focus,
.maydon select:focus,
.maydon-pin:focus {
  outline: none;
  border-color: var(--oltin);
  box-shadow: 0 0 0 3px rgba(245, 179, 46, .18);
}

/* ⚠️ `.maydon .maydon-pin` — `.maydon input` (0,1,1) dan kuchliroq bo'lishi shart,
   aks holda quyidagi 20px yuqoridagi 16px ga yutqazadi (o'lchab topilgan). */
.maydon .maydon-pin {
  min-height: 56px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* raqam kiritilgandagina keng oraliq — «placeholder» yoyilib ketmasin */
.maydon .maydon-pin:not(:placeholder-shown) { letter-spacing: .3em; text-indent: .3em; }

/* ══ 15. XABAR — toast ════════════════════════════════════════════════════ */

.xabar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tab-boy) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: fit-content;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--yuza-2);
  color: var(--matn);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  box-shadow: var(--soya-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--tez-2) var(--egri),
              transform var(--tez-2) var(--egri),
              visibility 0s linear var(--tez-2);
}

.xabar.kor {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.xabar.xato { border-color: var(--qizil); color: var(--qizil-2); }

/* ══ 16. VARAQ — pastdan chiqadigan panel ═════════════════════════════════ */

.varaq {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 6, 4, .62);
}

.varaq-ich {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--chet) calc(var(--oraliq) + env(safe-area-inset-bottom, 0px));
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-bottom: 0;
  border-radius: var(--r-katta) var(--r-katta) 0 0;
  box-shadow: var(--soya-2);
  animation: peggy-varaq var(--tez-2) var(--egri);
}

@keyframes peggy-varaq {
  from { transform: translateY(22px); opacity: .5; }
  to   { transform: none; opacity: 1; }
}

.varaq-tut {
  width: 44px;
  height: 5px;
  margin: 4px auto 12px;
  border-radius: var(--r-toliq);
  background: var(--chegara);
}

/* ══ 17. RASMKOR — to'liq ekran rasm ══════════════════════════════════════
   Zoom: `.kattalash` holatida rasm 200% bo'ladi, quti o'zi suriladi
   (touch-action bloklanmaydi — barmoq bilan surish ishlaydi). */

.rasmkor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--fon);
  padding: calc(env(safe-area-inset-top, 0px)) 0 calc(env(safe-area-inset-bottom, 0px));
}

.rasmkor-img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  background: var(--yuza);
}

.rasmkor.kattalash { align-items: flex-start; justify-content: flex-start; }

.rasmkor.kattalash .rasmkor-img {
  max-width: none;
  max-height: none;
  width: 200%;
  height: auto;
  margin: 0;
}

.rasmkor-yop {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--teg);
  height: var(--teg);
  background: var(--yuza-2);
  color: var(--matn);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  box-shadow: var(--soya-2);
  transition: background-color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.rasmkor-yop svg { width: 22px; height: 22px; fill: currentColor; }
.rasmkor-yop:active { background: var(--chegara); transform: scale(.94); }

.rasmkor-yuk {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 420px;
  min-height: 48px;
  margin: 0 auto;
  padding: 13px 20px;
  background: var(--oltin);
  color: var(--fon);
  border-radius: var(--r);
  box-shadow: var(--soya-2);
  font-size: 16px;
  font-weight: 800;
  transition: background-color var(--tez) var(--egri),
              transform var(--tez) var(--egri);
}

.rasmkor-yuk:active { background: var(--oltin-2); transform: scale(.97); }

/* ══ 18. KENG EKRAN (≥720px) ══════════════════════════════════════════════ */

@media (min-width: 720px) {
  .ekran,
  .bosh {
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
  }

  .bosh-nom { font-size: 26px; }

  .harfgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* kadr ekrani: rasm chapda, matn o'ngda */
  .ikkiustun {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--oraliq);
    align-items: start;
  }

  .sahnakarta { grid-template-columns: 92px minmax(0, 1fr); }
}

/* ══ 19. SENSORLI EKRAN — :hover bekor qilinadi ═══════════════════════════
   Telefonda «yopishib qolgan hover» bo'lmasin: bosgandan keyin element
   hover holatida qotib qolmaydi. */

@media (hover: hover) and (pointer: fine) {
  .tugma:hover { background: var(--chegara); }
  .tugma.asosiy:hover { background: var(--oltin-2); }
  .tugma.jim:hover { background: var(--yuza-2); color: var(--matn); }
  .tugma.xavf:hover { border-color: var(--qizil-2); }
  .nusxa-tugma:hover { background: var(--oltin-2); }
  .holat-tugma:hover { background: var(--chegara); }
  .karta:hover, .harfkarta:hover, .sahnakarta:hover { background: var(--yuza-2); }
  .tab-el:hover { color: var(--matn); }
  .bosh-orqa:hover, .bosh-amal:hover { background: var(--yuza-2); color: var(--matn); }
  .rasmkor-yop:hover { background: var(--chegara); }
  .rasmkor-yuk:hover { background: var(--oltin-2); }
}

@media (hover: none) {
  .tugma:hover { background: var(--yuza-2); }
  .tugma.asosiy:hover { background: var(--oltin); }
  .tugma.ikkilamchi:hover { background: var(--yuza-2); }
  .tugma.jim:hover { background: transparent; color: var(--matn-2); }
  .tugma.xavf:hover { background: var(--yuza-2); border-color: var(--qizil); }
  .nusxa-tugma:hover { background: var(--oltin); }
  .nusxa-tugma.bajarildi:hover { background: var(--yashil); }
  .holat-tugma:hover { background: var(--yuza-2); }
  .karta:hover, .harfkarta:hover, .sahnakarta:hover { background: var(--yuza); }
  .tab-el:hover { color: var(--matn-2); }
  .tab-el.faol:hover { color: var(--oltin); }
  .bosh-orqa:hover, .bosh-amal:hover { background: transparent; color: var(--matn-2); }
  .rasmkor-yop:hover { background: var(--yuza-2); }
  .rasmkor-yuk:hover { background: var(--oltin); }
}

/* ══ 20. HARAKATNI KAMAYTIRISH ════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton::after { animation: none; opacity: 0; }
  .bosh-yuk::after { animation: none; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QAYSI CLASS QAYERDA ISHLATILADI (app.js uchun qisqa xarita)

   KIRISH ekrani (index.html da tayyor turadi, app.js faqat `hidden` ni oladi):
     .kirish > .kirish-ich > .kirish-belgi · .kirish-nom · .kirish-izoh ·
     .kirish-form > .maydon > .maydon-nom + .maydon-pin ,
                    .tugma.asosiy.katta , .kirish-xato

   QOBIQ:
     #bosh.bosh > .bosh-yuk(.faol=yuklanmoqda) ,
                  .bosh-qator > .bosh-orqa + .bosh-amal ,
                  .bosh-nom
     #ekran.ekran > .bolim > .bolim-nom + mazmun
     #tab.tab > .tab-el (5 ta) ; faol sahifada .tab-el.faol

   BOSH ekrani (#/):
     .halqa > svg.halqa-doira(circle.halqa-yol + circle.halqa-chiziq) +
              .halqa-son + .halqa-izoh
       → foizni `stroke-dasharray: <bajarilgan> <qolgan>` bilan qo'y (r=52,
         to'liq aylana = 326.7).
     .plitkalar > .plitka > .plitka-son + .plitka-nom   (3 ta)
     .bolim > .bolim-nom + a.karta > .karta-bosh + .karta-tan

   ALIFBO (#/alifbo):
     .harfgrid > a.harfkarta > .harfkarta-rasm(.rasmquti emas — 1:1 muqova) +
                 .harfkarta-harf + .harfkarta-misol +
                 .nuqtalar > .nuqta (3 ta; tayyorlariga .tayyor)

   DARS (#/dars/:id):
     a.sahnakarta > .sahnakarta-rasm.rasmquti > img ,
                    .sahnakarta-nom , .sahnakarta-dialog
     .karta ichida Instagram to'plami; matnlar .uzunmatn bilan
     .qator > .holat-tugma (montaj/joylandi; yoqilganiga .yoqilgan)

   KADR (#/kadr/:kalit):
     .ikkiustun > (.rasmquti > img)  +  (.nusxa-tugma , .tugma.ikkilamchi ,
                   .uzunmatn , .maydon > .maydon-nom + textarea)
     Nusxalangach: .nusxa-tugma.bajarildi 1.6 s ga (eni qotirilgan — sakramaydi)

   UMUMIY:
     .tugma [.asosiy|.ikkilamchi|.jim|.katta|.xavf] · [disabled] ham uslublangan
     .skeleton (+ .skeleton-matn) — mazmun kelmaguncha, AYNAN shu o'lchamda
     #xabar.xabar → ko'rsatish uchun .kor qo'shiladi, xato bo'lsa .xato ham
     #varaq.varaq > .varaq-ich > .varaq-tut + mazmun
     #rasmkor.rasmkor > .rasmkor-img + .rasmkor-yop + .rasmkor-yuk ;
       ikki barmoq/ikki bosish bilan .kattalash qo'shiladi

   O'LCHOV QOIDALARI (buzilmasin — qorovul o'lchaydi):
     • bosiladigan element ≥44×44 · maydon shrifti ≥16px
     • har bosiladiganda :active belgisi bor · hover faqat (hover:hover) da
     • rasm qutisida aspect-ratio bor · foni token, #fff emas
     • matnda --matn-3 ISHLATILMAYDI (3.85:1) — --matn-2 dan past tushma
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   INSTAGRAM'GA JOYLASH — QADAMBAQADAM  (SHARTNOMA 6.4b)
   Shaxzod bergan infografika ishlaydigan bo'limga aylantirildi.
   Qoida: holat FAQAT rangda emas — raqam, shakl va so'z bilan ham ko'rinadi
   (WCAG 1.4.1). Bajarilgan qadam ✓ ga aylanadi va rangi ham o'zgaradi.
   ══════════════════════════════════════════════════════════════════════════ */

.bolim-izoh {
  margin: 6px 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--matn-2);
  overflow-wrap: anywhere;
}

.qadamlar {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: qadam;
}

.qadam {
  position: relative;
  margin-bottom: 10px;
  padding: var(--ich);
  padding-left: calc(var(--ich) + 4px);
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  box-shadow: var(--soya-1);
  overflow: hidden;
}

/* Chap chekkadagi rangli chiziq — QO'SHIMCHA belgi, yagona emas */
.qadam::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--chegara);
  transition: background-color var(--tez) var(--egri);
}
.qadam[data-qadam="1"]::before { background: #8C6BC8; }
.qadam[data-qadam="2"]::before { background: var(--kok-2); }
.qadam[data-qadam="3"]::before { background: var(--yashil-2); }
.qadam[data-qadam="4"]::before { background: var(--oltin); }
.qadam[data-qadam="5"]::before { background: var(--qizil-2); }

.qadam-bosh {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Raqam doirasi — 28px, bosiladigan emas, shuning uchun 44px shart emas */
.qadam-raqam {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-toliq);
  background: var(--yuza-2);
  border: 1px solid var(--chegara);
  color: var(--matn);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--tez) var(--egri),
              border-color var(--tez) var(--egri);
}

.qadam-matn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.qadam-nom {
  font-size: 17px;
  font-weight: 650;
  color: var(--matn);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.qadam-joy {
  font-size: 13px;
  line-height: 1.4;
  color: var(--matn-2);
  overflow-wrap: anywhere;
}

.qadam-tan { margin-top: 10px; }

.qadam-ogoh {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-kichik);
  background: rgba(216, 69, 47, .14);
  border: 1px solid rgba(240, 131, 110, .35);
  color: var(--qizil-2);
  font-size: 13px;
  line-height: 1.45;
}

.qadam-olchov {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--matn-3);
}

.qadam-son {
  font-variant-numeric: tabular-nums;
  color: var(--matn-2);
  font-weight: 600;
}
.qadam-son.toladi { color: var(--qizil-2); }

.qadam-eslatma { color: var(--matn-3); }

.qadam-muqova {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.qadam-muqova .rasmquti {
  flex: 0 0 110px;
  width: 110px;
  border-radius: var(--r-kichik);
}

/* ── Bajarilgan qadam: rang + belgi + fon — uchtasi birga ───────────────── */
.qadam.bajarildi { background: var(--yuza-2); }
.qadam.bajarildi::before { background: var(--yashil-2); }
.qadam.bajarildi .qadam-raqam {
  background: var(--yashil-2);
  border-color: var(--yashil-2);
  color: #11301B;
}
.qadam.bajarildi .qadam-nom { color: var(--matn-2); }

/* ══ O'ZBEKISTONDA JOYLASH VAQTI — ma'lumot jadvali ═══════════════════════ */

.vaqt-jadval {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vaqt-qator {
  display: grid;
  grid-template-columns: 24px 96px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-kichik);
  background: var(--yuza-2);
  border-left: 3px solid var(--chegara);
  font-size: 13px;
  line-height: 1.35;
}

.vaqt-emoji { font-size: 15px; text-align: center; }

.vaqt-soat {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--matn);
  white-space: nowrap;
}

.vaqt-izoh { color: var(--matn-2); overflow-wrap: anywhere; }

/* Daraja: rang + chegara qalinligi + matn og'irligi — rangga yolg'iz tayanmaydi */
.vaqt-qator.daraja-yuqori {
  border-left-color: var(--yashil-2);
  border-left-width: 5px;
  background: rgba(70, 145, 91, .16);
}
.vaqt-qator.daraja-yuqori .vaqt-izoh { color: var(--matn); font-weight: 600; }
.vaqt-qator.daraja-orta { border-left-color: var(--oltin); }
.vaqt-qator.daraja-past { border-left-color: var(--chegara); opacity: .72; }

@media (max-width: 359px) {
  .vaqt-qator { grid-template-columns: 22px 84px 1fr; gap: 6px; }
}

/* ══ YIG'ILADIGAN BO'LIM (details) ════════════════════════════════════════ */

.yigma {
  margin-top: 10px;
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  overflow: hidden;
}

.yigma > summary {
  min-height: var(--teg);
  display: flex;
  align-items: center;
  padding: 0 var(--ich);
  font-size: 15px;
  font-weight: 600;
  color: var(--matn);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tez) var(--egri);
}
.yigma > summary::-webkit-details-marker { display: none; }
.yigma > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--matn-2);
  transition: transform var(--tez) var(--egri);
}
.yigma[open] > summary::after { transform: rotate(180deg); }
.yigma > summary:active { background: var(--yuza-2); }

.yigma-ich { padding: 0 var(--ich) var(--ich); }
.yigma-ich .karta { background: var(--yuza-2); }

@media (hover: none) {
  .yigma > summary:hover { background: transparent; }
}

/* Joylash vaqti — dars sahifasidagi qisqa qator (to'liq jadval Qo'llanmada) */
.vaqt-qisqa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px var(--ich);
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-left: 3px solid var(--oltin);
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.45;
  color: var(--matn-2);
}
.vaqt-qisqa b { color: var(--matn); font-variant-numeric: tabular-nums; }
.vaqt-qisqa > span:nth-child(2) { flex: 1 1 200px; min-width: 0; }
.vaqt-qisqa .tugma { flex: 0 0 auto; }

/* «Gemini'ga yuborish» — birlamchi emas, lekin kuchli: konturli oltin.
   Sabab: bir ekranda ikkita to'ldirilgan oltin tugma bo'lsa qaysi biri
   asosiy ekani ko'rinmay qoladi. «Promptni nusxala» — birlamchi. */
.tugma.ulash {
  background: transparent;
  color: var(--oltin-2);
  border: 1.5px solid var(--oltin);
  font-weight: 650;
}
.tugma.ulash:active { background: rgba(245, 179, 46, .14); }
@media (hover: none) { .tugma.ulash:hover { background: transparent; } }

/* Codex uchun tuzatish so'rovi — nusxalanadigan texnik matn */
.kodkarta { margin-top: 10px; border-left: 3px solid var(--kok-2); }
.kodmatn {
  margin-top: 10px;
  padding: 10px 12px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fon);
  border: 1px solid var(--chegara);
  border-radius: var(--r-kichik);
  font-size: 13px;
  line-height: 1.5;
  color: var(--matn-2);
}

/* ══ BELGI (ikonka o'rami) ════════════════════════════════════════════════
   Emoji ham, SVG ham shu o'ramda keladi — o'lcham bir joyda boshqariladi. */
.bel {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 17px;
  line-height: 1;
}
.bel svg { width: 100%; height: 100%; display: block; }

/* ══ Yig'iladigan matn (details) — chiziqsiz, yengil ═════════════════════ */
.ochgich > summary {
  min-height: var(--teg);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--oltin);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.ochgich > summary::-webkit-details-marker { display: none; }
.ochgich > summary::before { content: "▸"; color: var(--matn-3); transition: transform var(--tez) var(--egri); }
.ochgich[open] > summary::before { transform: rotate(90deg); }
.ochgich > summary:active { color: var(--oltin-2); }

/* ══ Mayda izoh matni ════════════════════════════════════════════════════ */
.mayda {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--matn-3);
  overflow-wrap: anywhere;
}

/* ══ Amal ko'rinishlari ══════════════════════════════════════════════════ */
.amal.keng { width: 100%; justify-content: center; border: 1px dashed var(--chegara); }
.amal.jimroq { color: var(--matn-2); font-size: 14px; padding: 8px 10px; }
.amal.xavfli { color: var(--qizil-2); }

/* ══ Nuqson satri ════════════════════════════════════════════════════════ */
.nuqson-satr {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--qizil-2);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.nuqson-satr > .amal { margin-left: auto; }

/* ══ Video satri ═════════════════════════════════════════════════════════ */
.video-satr {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--chegara);
}
.video-nom { font-size: 14px; font-weight: 600; color: var(--matn); overflow-wrap: anywhere; }
.video-nom .mayda { display: inline; margin: 0; }

/* ══ Kezish (oldingi / keyingi) ══════════════════════════════════════════ */
.kezish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--chegara);
}
.kezish-son {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--matn-3);
  white-space: nowrap;
}
/* O'chirilgan kezish tugmasi: shaffoflik EMAS (u kontrastni 2.78:1 ga
   tushirgan edi) — o'rniga xiraroq TOKEN rang. Farq ko'rinadi, o'qiladi. */
.kezish .amal[aria-disabled="true"] { color: var(--matn-3); pointer-events: none; }
.kezish .amal[aria-disabled="true"] .bel { color: var(--matn-3); }

/* Kodli matn maydoni yangi joyda ham ishlasin */
.qism-tan .kodmatn { margin-top: 8px; }

/* ══ Kadr rasmi — balandligi cheklangan ══════════════════════════════════
   9:16 rasm to'liq kenglikda chizilsa telefon ekranini butunlay egallaydi va
   asosiy tugma pastda qolib ketadi. Ish tezligi uchun rasm 46vh gacha
   kichrayadi; to'liq ko'rish uchun bosiladi (yoki «Kattalashtir»). */
.kadr-rasm {
  /* Quti rasmning O'ZIGA moslashadi — aks holda 9:16 rasm keng qora quti
     ichida suzib turadi (2026-09-01 da o'lchandi). */
  display: block;
  width: fit-content;
  max-width: 100%;
  height: 46vh;
  max-height: 46vh;
  padding: 0;
  /* ⚠ margin-inline: auto shu qatordan KEYIN turishi shart — aks holda
     `margin: 0 0 10px` uni bekor qiladi va rasm chapga yopishib qoladi. */
  margin: 0 auto 10px;
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--r);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: transform var(--tez) var(--egri);
}
.kadr-rasm img {
  /* Joy OLDINDAN band: quti aspect-ratio bilan o'lchamini biladi, rasm esa
     uning ichini to'ldiradi. Aks holda rasm kelgunча kontent siljiydi
     (qorovul CLS 0.0944 o'lchagan edi, chegara 0.02). */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--yuza);
}
.kadr-rasm:active { transform: scale(.995); }
/* «Kattalashtirish mumkin» belgisi — o'ng pastda, xira */
.kadr-rasm::after {
  content: "⤢";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(20, 16, 12, .68);
  color: var(--jun);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
@media (hover: none) { .kadr-rasm:hover { transform: none; } }