/* ==========================================================================
   5eedu portali — "Tungi o'rmon va shisha plastinalar"

   Yo'nalish bosh sahifaning foto-sahnasidan olingan: mijoz uni saytning eng
   yaxshi joyi deb topdi va qolgan hamma sahifani shunga moslashni so'radi.
   Shuning uchun har sahifa ortida o'sha o'rmon (xiralashtirilgan) turadi,
   mazmun esa shisha plastinalarda — orqasidagi manzarani xira ko'rsatib
   turadigan yarim shaffof panellarda — joylashadi.

   Ilgari bu yerda "ilmiy plastina" bor edi: och mineral qog'oz va mayda
   kulrang yozuv. U bosh sahifaning qorong'i sahnasidan uzilib, go'yo boshqa
   sayt bo'lib qolardi; dars sahifalari esa uchinchi — bolalar stikeri —
   uslubida edi. Endi hammasi bitta tizimda.

   Bo'yoqlar: beshta 5E bo'yog'i ikki registrda. To'q fonda ularning ochiq
   tusi (`--g1..5`) — urg'u, nishon, chiziq; och yuzalarda (topshiriq
   varaqlari) to'q tusi (`--e1..5`).
   ========================================================================== */

:root {
  /* — Bo'yoqlar: to'q registr (och yuzada chiziq va yozuv) — */
  --e1: #B4741F;   /* ENGAGE — zaʼfaron */
  --e2: #5E8436;   /* EXPLORE — barg */
  --e3: #176B81;   /* EXPLAIN — sirlangan ko'k */
  --e4: #454A93;   /* ELABORATE — indigo */
  --e5: #8B2F4D;   /* EVALUATE — marena */

  /* — Bo'yoqlar: ochiq registr (to'q fonda) — */
  --g1: #E3A43B;
  --g2: #9CC46A;
  --g3: #6FB6CC;
  --g4: #A4A9EC;
  --g5: #E08CA8;

  --night: #0C1A17;
  --saffron: #E3A43B;

  /* — Yozuv registrlari —
     grotesk: sarlavha, matn va boshqaruv — butun saytning asosiy ovozi
     serif:   sahifa sarlavhalari va ilmiy nomlar (bosh sahifadagi sarlavha kabi)
     mono:    kichik yorliqlar (bosh sahifadagi "PhD ilmiy tadqiqoti" kabi) */
  --p-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --p-serif: "Spectral", Georgia, "Times New Roman", serif;
  --p-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

/* Tungi registr. Portal sahifalari och (pastdagi "Ochiq registr" bo'limi),
   lekin bosh sahifadagi foto-sahna, yuqori panel, kolofon va PDF ko'rgich
   ularda ham to'q (yozuvi och) qoladi — shuning uchun bu qiymatlar o'sha
   qismlarga qayta beriladi. */
:root,
body.portal :is(.topbar, .pfoot, .pdfv, .phero-band) {
  /* — Tun va shisha —
     Shisha kartochkalarda `backdrop-filter` yo'q: ortidagi o'rmon allaqachon
     xira, uni yana xiralashtirish ko'zga deyarli bilinmaydi, maktabdagi
     kuchsiz kompyuter va telefonni esa sekinlashtiradi. Shisha hissini
     shaffof to'ldirish, tepasi yorqinroq nozik chegara va yumshoq soya beradi.
     Haqiqiy xiralashtirish faqat keskin surat ustida — yuqori panelda va bosh
     sahifadagi raqamlar tasmasida. */
  --glass:
    linear-gradient(180deg, rgba(250, 248, 241, .075), rgba(250, 248, 241, .03)),
    rgba(15, 31, 27, .58);
  --glass-deep: rgba(10, 22, 19, .82);
  --glass-tint: rgba(250, 248, 241, .055);
  --glass-hover: rgba(250, 248, 241, .1);
  --line: rgba(250, 248, 241, .13);
  --line-strong: rgba(250, 248, 241, .26);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  --lift: 0 30px 60px -32px rgba(0, 0, 0, .75);
  --blur: blur(18px) saturate(1.3);

  /* — Yozuv ranglari: to'q fonda kontrast 6:1 dan past tushmaydi — */
  --t1: #FAF8F1;
  --t2: rgba(250, 248, 241, .82);
  --t3: rgba(250, 248, 241, .64);
}

/* ==========================================================================
   Sahna: har sahifa ortida o'rmon
   `ambient.jpg` — bosh sahifadagi suratning o'ng (daraxtlar va yorug'lik)
   qismi, kuchli xiralashtirilgan. Qatlam `fixed`: sahifa sirg'alganda manzara
   joyida qoladi, kartochkalar uning ustidan o'tadi.
   ========================================================================== */

body.portal,
body.is-task { background: var(--night); }

body.portal { color: var(--t1); font-size: 17px; }

body.portal::before,
body.is-task:not(.space)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 75% 0%, rgba(12, 26, 23, .18), rgba(12, 26, 23, .72) 70%),
    linear-gradient(180deg, rgba(9, 20, 17, .30), rgba(9, 20, 17, .78) 55%, rgba(9, 20, 17, .9)),
    url("../img/portal/ambient.jpg") center top / cover no-repeat;
}

body.portal :focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }

body.portal h1,
body.portal h2,
body.portal h3 { letter-spacing: -.4px; }

body.portal ::selection { background: rgba(227, 164, 59, .38); color: var(--t1); }

/* --- Ikona va stiker --------------------------------------------------------
   `.ico` — `{% icon %}` tegi chizadigan SVG. Rangi yozuvdan (`currentColor`)
   olinadi, o'lchami yozuv o'lchamiga ergashadi.
   `.sticker` — ikona rangli plitkada: emoji o'rnidagi "stiker". Rangi `--c`
   (mavzu yoki bosqichning ochiq bo'yog'i), ikona siyoh rangida.
   ------------------------------------------------------------------------- */

.ico {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.2em;
}

.sticker {
  --s: 56px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) * .3);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--c, var(--g1)) 62%, #fff) 0%,
      var(--c, var(--g1)) 52%,
      color-mix(in srgb, var(--c, var(--g1)) 84%, #000) 100%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(0, 0, 0, .1),
    0 16px 30px -16px rgba(0, 0, 0, .85);
}

.sticker .ico { width: 50%; height: 50%; stroke-width: 1.7; }

.sticker--sm { --s: 40px; }
.sticker--xs { --s: 32px; }
.sticker--lg { --s: 76px; }
.sticker--xl { --s: 112px; }

/* ==========================================================================
   Yuqori panel
   Hamma sahifada barg yashili shisha (rangi "Ochiq registr" bo'limida).
   Kompyuterda yopishib turadi va ostidan o'tayotgan mazmunni
   xiralashtiradi — sahifadagi yagona haqiqiy "shisha" shu yerda.
   ========================================================================== */

/* Panel foni va chizig'i to'liq enga yoyiladi; ichidagi elementlar
   konteyner (--wrap) chizig'ida turadi — yon joy padding bilan hisoblanadi. */
.topbar {
  position: relative;
  z-index: 90;
  align-items: center;
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 20px max(24px, calc((100% - var(--wrap)) / 2 + 24px));
  background: rgba(9, 21, 18, .74);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

@media (min-width: 761px) {
  .topbar { position: sticky; top: 0; }
}

.logo { gap: 13px; }

/* Logotip — qog'oz rangli kvadrat plastinka, soyasiz. */
.logo-mark--5e {
  width: 40px;
  height: 40px;
  font-family: var(--p-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.5px;
  background: var(--t1);
  color: var(--ink);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.logo:hover .logo-mark--5e { transform: none; }

/* Yuqori paneldagi belgi pastki qismdagisidan kattaroq. */
.topbar .logo-mark--5e { width: 46px; height: 46px; font-size: 18px; border-radius: 8px; }

.logo-text { display: inline-flex; flex-direction: column; line-height: 1.1; }

.logo-name {
  font-family: var(--p-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -.7px;
  color: var(--t1);
}

.logo-tag {
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t3);
}

/* Navigatsiya: har bo'lim ostida o'z bo'yog'ining chizig'i. Ochiq bo'limda
   chiziq to'liq, qolganlarida sichqoncha kelganda chapdan o'ngga yoziladi. */
.pnav { display: flex; gap: 2px; flex-wrap: wrap; }

/* `style.css` dagi eski `.topbar-nav` bezagi (krem fon, halqa chegara) bu
   yerda butunlay o'chiriladi — ajratish faqat pastdagi rangli chiziq bilan. */
.pnav a {
  position: relative;
  padding: 10px 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--p-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--t2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

.pnav a:hover { background: transparent; border-color: transparent; color: var(--t1); }

.pnav a::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  background: var(--nc, var(--t1));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.pnav a:hover::after,
.pnav a.is-here::after { transform: scaleX(1); }

.pnav a.is-here { color: var(--t1); font-weight: 600; }

/* Virtual laboratoriya xonalari: kursor kelganda yoki klaviatura fokusi
   ichkariga tushganda ochiladi. Ro'yxat havoladan biroz pastda turadi —
   oraliq `padding-top` bilan qoplangan, aks holda kursor havoladan ro'yxatga
   tushayotganda u yopilib qolardi. Belgi (▾) ataylab yo'q. */
.pnav-drop { position: relative; display: flex; }

.pnav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 14px 0 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

.pnav-drop:hover .pnav-sub,
.pnav-drop:focus-within .pnav-sub {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .15s ease, transform .15s ease;
}

.pnav-sub::before {
  content: "";
  position: absolute;
  inset: 8px 0 0;
  z-index: -1;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--glass-deep);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7);
}

.topbar .pnav .pnav-sub a {
  margin: 0 6px;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--t2);
  font-size: 16px;
  font-weight: 500;
}

.topbar .pnav .pnav-sub a:first-child { margin-top: 6px; }
.topbar .pnav .pnav-sub a:last-child { margin-bottom: 6px; }
.topbar .pnav .pnav-sub a:hover { background: var(--glass-hover); color: var(--t1); }
.topbar .pnav .pnav-sub a::after { display: none; }

/* Navigatsiya JavaScript'siz ham ishlaydi; faqat telefondagi menyu yig'iladi. */
.pnav[hidden], .menu-toggle[hidden] { display: none; }
.menu-toggle {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--t1);
  background: var(--glass-tint);
  font: 600 15px var(--p-display);
  cursor: pointer;
}
.skip-content {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--t1);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-content:focus { transform: none; }
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--wrap);
  margin: 26px auto 0;
  padding: 0 24px;
  font: 15px var(--p-display);
  color: var(--t3);
}
.breadcrumbs a { color: var(--t2); text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.breadcrumbs a:hover { color: var(--t1); }
.breadcrumbs [aria-current] { color: var(--t1); }
.gate-return { color: var(--t3); font-size: 15px; }
.lesson-start { text-align: center; margin: 0 20px 30px; }
.lesson-start p { color: var(--t2); margin: 14px 0 0; }
.card--soon .card-btn { background: transparent; color: var(--t3); }
.reset-confirm { max-width: 350px; text-align: left; }
.reset-confirm summary { cursor: pointer; padding: 12px; text-underline-offset: 4px; text-decoration: underline; }
.reset-confirm p { font-size: 15px; line-height: 1.5; }
.resource-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--t3);
  font-size: 15px;
}
.plist-actions a { min-height: 44px; overflow-wrap: anywhere; }

/* `is-stacked` ni navigation.js qo'yadi: bo'limlar logotip bilan hisob
   orasiga sig'masa, ular ikkinchi qatorga tushadi — aks holda flex-wrap
   hisob qismini logotip ostiga itarib yuborardi. */
.topbar.is-stacked .pnav { order: 3; flex-basis: 100%; }
@media (max-width: 1200px) {
  .topbar .pnav { order: 3; flex-basis: 100%; }
}
@media (max-width: 760px) {
  /* Kirgan foydalanuvchining nishonchasi "Menyu" yonida sig'sin. */
  .topbar { gap: 8px; padding: 14px 20px; }
  .topbar .logo-mark--5e { width: 40px; height: 40px; font-size: 16px; }
  .topbar .logo { margin-right: auto; }
  .topbar .who:not(.who--in) { order: 4; width: 100%; flex-wrap: wrap; gap: 10px; }
  .topbar .who-text { display: none; }
  .topbar .pnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .topbar .pnav[hidden] { display: none; }
  .pnav a { min-height: 44px; padding: 12px 8px; white-space: normal; }
  .pnav a::after { left: 8px; right: 8px; }
  .pnav-drop > a { flex: 1; }
  .pnav-sub { display: none; }
  .breadcrumbs { padding: 0 20px; }
}

/* Hisob qismi */
.who { gap: 10px; }

.who-badge {
  width: 40px;
  height: 40px;
  font-family: var(--p-display);
  font-size: 16px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.who-badge--student { --c: #BCD9E3; }
.who-badge--big { width: 64px; height: 64px; font-size: 26px; }
.who-badge--teacher { --c: #F0D3A4; }

.who-text b { font-family: var(--p-display); font-size: 16px; font-weight: 600; color: var(--t1); }
.who-text i { font-family: var(--p-mono); font-size: 11.5px; letter-spacing: .3px; color: var(--t3); }

/* Profil menyusi: nishoncha va ism bosilganda panel havolasi hamda chiqish
   tugmasi ochiladi. */
.who-menu { position: relative; }

.who-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
}

.who-sum::-webkit-details-marker { display: none; }
.who-sum:hover,
.who-menu[open] > .who-sum { background: var(--glass-hover); }

.who-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 95;
  width: max-content;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--glass-deep);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--t1);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7);
}

.who-panel-head {
  display: flex;
  flex-direction: column;
  margin: 0 0 6px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  line-height: 1.3;
}

.who-panel-head b { font-family: var(--p-display); font-size: 15.5px; font-weight: 600; }
.who-panel-head i { font-family: var(--p-mono); font-size: 11.5px; font-style: normal; color: var(--t3); }

.who-panel form { margin: 0; }

.who-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--t1);
  font: 500 15.5px var(--p-display);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.who-item:hover { background: var(--glass-hover); }
.who-item[aria-current="page"] { font-weight: 700; }
.who-item--out { color: var(--g5); }

.portal-home .topbar :focus-visible,
.topbar :focus-visible { outline-color: var(--saffron); }

/* ==========================================================================
   Tugmalar
   Asosiysi zaʼfaron — bosh sahifadagi "Multimedia darslarni ochish" kabi;
   ikkinchi darajalisi shisha. Ikkalasi ham hamma sahifada bir xil.
   ========================================================================== */

body.portal .btn,
body.is-task .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  background: var(--saffron);
  border: 1px solid var(--saffron);
  border-radius: 12px;
  box-shadow: 0 14px 28px -16px rgba(227, 164, 59, .9);
  color: var(--ink);
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.portal .btn:hover,
body.is-task .btn:hover {
  transform: translateY(-2px);
  background: #EDB24F;
  box-shadow: 0 18px 30px -14px rgba(227, 164, 59, .9);
}

body.portal .btn:active,
body.is-task .btn:active { transform: translateY(0); box-shadow: none; }

body.portal .btn--ghost {
  background: var(--glass-tint);
  border-color: var(--line-strong);
  color: var(--t1);
  box-shadow: var(--edge-hi);
}

body.portal .btn--ghost:hover { background: var(--glass-hover); box-shadow: var(--edge-hi); }

body.portal .btn--small { padding: 9px 16px; font-size: 14px; }
body.portal .btn--wide { display: flex; width: 100%; }
body.portal .btn .ico { width: 18px; height: 18px; }

/* Yuqori panel kattalashganda tugmalar ham unga mos o'sadi. Kengligi shunday
   tanlangan: 1240px konteynerda logotip, bo'limlar va tugmalar bir qatorga
   sig'adi. */
body.portal .topbar .btn--small { padding: 10px 17px; font-size: 15px; box-shadow: none; }

/* ==========================================================================
   Umumiy sahifa qolipi
   ========================================================================== */

.ppage {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 44px 24px 40px;
}

/* Sahifa sarlavhasi — bosh sahifadagi sarlavhaning kichik nusxasi: tepada
   mono yorliq (rangli nishon + bo'lim nomi + nozik chiziq), ostida serif
   sarlavha va izoh. */
.phead {
  max-width: 940px;
  padding-bottom: 34px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

.phead-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--t2);
}

.phead-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

.phead-eyebrow a { color: inherit; text-underline-offset: 4px; }

.phead-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--pc, var(--saffron));
  border-radius: 5px;
  color: var(--ink);
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.phead-chip .ico { width: 15px; height: 15px; stroke-width: 2; }

.phead h1 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -.8px;
  color: var(--t1);
  text-wrap: balance;
}

.phead-sub {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--t2);
}

.phead-sub a {
  color: var(--t1);
  text-decoration: underline;
  text-decoration-color: var(--pc);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.phead .phero-cta { margin-top: 28px; }

.ptitle {
  font-family: var(--p-display);
  font-weight: 600;
  font-size: clamp(25px, 2.8vw, 32px);
  letter-spacing: -.6px;
  color: var(--t1);
}

.ptitle--small { font-size: 23px; margin-top: 46px; }

.plead { max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--t2); margin: 14px 0 0; }

/* ==========================================================================
   Bosh sahifa — foto-sahna
   Hero to'liq enli fotosurat: o'rmonda lupa bilan tabiatni o'rganayotgan
   qiz (2026-10-28 da mijoz bergan yorug', quyoshli varianti — soy bo'yi,
   tog'lar). Suratning qahramoni chap yarmida turadi, shuning uchun qorong'i
   gradient faqat o'ngga quyiladi va matn o'sha yerda o'qiladi; chap yarmi
   bo'yalmaydi — quyoshli manzara xiralashmasin.
   ========================================================================== */

.phero-band {
  background-color: var(--ink);
  background-image:
    linear-gradient(0deg, #EDEBE1, rgba(237, 235, 225, 0) 44px),
    linear-gradient(97deg,
      rgba(13, 28, 25, 0) 0%,
      rgba(13, 28, 25, .04) 30%,
      rgba(13, 28, 25, .5) 48%,
      rgba(13, 28, 25, .7) 66%,
      rgba(13, 28, 25, .76) 100%),
    url("../img/portal/hero-photo.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--paper);
  /* Surat to'liq ekranni egallaydi (yuqori panel ~87px); och qism faqat
     scroll'dan keyin boshlanadi. Pastki cheti (raqamlar tasmasi ostidagi
     40px) sahifaning och foniga eriydi. */
  min-height: calc(100vh - 87px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.phero-band :focus-visible { outline-color: var(--paper); }

/* Matn o'ng ustunda — chap yarmi suratning o'ziga qoldiriladi. */
.phero {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 88px 24px 56px;
  width: 100%;
  flex: 1;
  align-content: center;
}

.phero-text { grid-column: 2; max-width: 700px; justify-self: end; }

.phero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--p-mono);
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(250, 248, 241, .72);
}

.phero-eyebrow::after { content: ""; flex: 1; height: 1px; background: rgba(250, 248, 241, .25); }

.phero-chip {
  padding: 5px 11px;
  color: var(--ink);
  background: var(--saffron);
  border-radius: 4px;
  letter-spacing: 1.2px;
}

/* Dissertatsiya mavzusi — ishning titul varag'idagidek. Ikkita tayanch
   ibora ostiga ilmiy izohdek nozik rangli chiziq tortiladi. */
.phero-title {
  margin: 0;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.22;
  letter-spacing: -.7px;
  text-wrap: balance;
  color: var(--paper);
}

/* Chiziq `border-bottom` emas, `text-decoration` bilan: chegara satr
   qutisining tagiga tushib, keyingi qatorning ustiga chiqib qolardi.
   Tag chiziq esa bazaviy chiziqqa bog'lanadi va harflarga yopishib turadi. */
.phero-title em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--g3);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.phero-title em:nth-of-type(2) { text-decoration-color: var(--g5); }

.phero-note {
  margin: 16px 0 0;
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(250, 248, 241, .78);
}

.phero-author {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 248, 241, .22);
  font-size: 16px;
  color: rgba(250, 248, 241, .72);
}

.phero-author a {
  font-family: var(--p-display);
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 248, 241, .6);
  padding-bottom: 1px;
}

.phero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Raqamlar tasmasi suratning pastida shisha plastina bo'lib turadi —
   orqasidagi manzara xiralashtiriladi (backdrop-filter). Tusi yuqori panel
   kabi barg yashili, lekin ancha shaffof: surat ranglari o'tib turadi. */
.portal-home .pstats { position: relative; width: 100%; padding-bottom: 40px; }
.portal-home .pstats-in {
  gap: 0;
  background: rgba(52, 70, 38, .42);
  border: 1px solid rgba(250, 248, 241, .22);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 48px -20px rgba(0, 0, 0, .5);
}
.portal-home .pstats-in p { background: transparent; border-right: 1px solid rgba(250, 248, 241, .16); padding: 24px 22px; }
.portal-home .pstats-in p:last-child { border-right: 0; }
.portal-home .pstats-in b { color: var(--paper); }
.portal-home .pstats-in span { color: rgba(250, 248, 241, .8); }

/* --- Imzo elementi: 5E halqasi ---------------------------------------------
   5E — ro'yxat emas, aylanma model: baholashdan keyin yangi savol tug'iladi.
   Shuning uchun u qator kartochka bo'lib emas, haqiqiy figura — yo'nalish
   ko'rsatkichlari bilan halqa bo'lib chiziladi. Yonida kalit turadi.
   ------------------------------------------------------------------------- */

.pcycle { display: grid; gap: 22px; justify-items: center; }

.pcycle-fig { width: min(100%, 380px); }

.pcycle-fig svg { display: block; width: 100%; height: auto; overflow: visible; }

.pcycle-arc {
  fill: none;
  stroke-width: 13;
  stroke-linecap: butt;
}

.js .pcycle-arc {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: arc-draw .8s cubic-bezier(.4, 0, .2, 1) forwards;
}

.js .pcycle-arc:nth-of-type(1) { animation-delay: .15s; }
.js .pcycle-arc:nth-of-type(2) { animation-delay: .30s; }
.js .pcycle-arc:nth-of-type(3) { animation-delay: .45s; }
.js .pcycle-arc:nth-of-type(4) { animation-delay: .60s; }
.js .pcycle-arc:nth-of-type(5) { animation-delay: .75s; }

@keyframes arc-draw { to { stroke-dashoffset: 0; } }

.js .pcycle-tip,
.js .pcycle-node { opacity: 0; animation: fig-in .5s ease forwards; }

.js .pcycle-node:nth-of-type(1) { animation-delay: .35s; }
.js .pcycle-node:nth-of-type(2) { animation-delay: .50s; }
.js .pcycle-node:nth-of-type(3) { animation-delay: .65s; }
.js .pcycle-node:nth-of-type(4) { animation-delay: .80s; }
.js .pcycle-node:nth-of-type(5) { animation-delay: .95s; }

.js .pcycle-tip { animation-delay: 1.05s; }

@keyframes fig-in { to { opacity: 1; } }

/* Doiracha halqasi kartochka foni rangida — yoy uning ortidan o'tadi. */
.pcycle-node circle { stroke: #15291F; stroke-width: 4; }

.pcycle-node text {
  font-family: var(--p-mono);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}

.pcycle-core-e {
  font-family: var(--p-display);
  font-size: 54px;
  font-weight: 700;
  fill: var(--t1);
  text-anchor: middle;
}

.pcycle-core-label {
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  fill: var(--t3);
  text-anchor: middle;
}

.pcycle-caption {
  margin: 0;
  font-family: var(--p-mono);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t3);
  text-align: center;
}

.pmodel .pcycle { margin: 34px 0 6px; justify-items: start; }
.pmodel .pcycle-fig { width: min(100%, 330px); }
.pmodel .pcycle-caption { width: min(100%, 330px); }

/* ==========================================================================
   Raqamlar qatori
   ========================================================================== */

.pstats { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.pstats-in {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
}

.pstats-in p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 22px 18px;
}

/* Raqam ham, yozuv ham yuqori paneldagi bo'lim nomlari bilan bir xil
   groteskda. O'lchamlar ixcham qoladi. */
.pstats-in b {
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: lining-nums tabular-nums;
}

.pstats-in span {
  font-family: var(--p-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
}

/* ==========================================================================
   Shisha plastina — portaldagi har bir kartochkaning umumiy qobig'i
   ========================================================================== */

.psec,
.pmodel-card,
.pauthor-contact,
.pthesis,
.pmarks,
.psuper-facts div,
.psuper-stats li,
.psuper-cv,
.plist,
.pbook,
.plab,
.ptask,
.pempty,
body.portal .card,
body.portal .steps li,
body.portal .gate-card,
body.portal .lesson-card,
body.portal .fact,
body.portal .folder,
body.portal .soon-note,
body.portal .tile,
body.portal .table-wrap,
body.portal .work,
body.portal .panel-note {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--edge-hi), var(--lift);
  color: var(--t1);
}

/* ==========================================================================
   Bosh sahifa: bo'lim plastinalari
   ========================================================================== */

.psections { max-width: var(--wrap); margin: 0 auto; padding: 72px 24px 0; }

.psections-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.psec-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.psec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 22px;
  border-radius: 20px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

/* Tepadagi chiziq bo'lim bo'yog'ida — kursor kelganda to'liq yoziladi. */
.psec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pc);
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.psec:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pc) 55%, transparent);
}

.psec:hover::before { transform: scaleX(1); }

.psec-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.psec-no {
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--t3);
}

.psec h3 {
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
}

.psec p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--t2); flex-grow: 1; }

.psec-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--pc);
}

.psec-go .ico { transition: transform .2s ease; }
.psec:hover .psec-go .ico { transform: translateX(4px); }

/* ==========================================================================
   5E modeli izohi
   ========================================================================== */

.pmodel { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 20px; }

.pmodel-card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 54px;
  padding: 44px 46px;
  border-radius: 26px;
}

.pmodel-list { margin: 0; padding: 0; list-style: none; counter-reset: pm; }

.pmodel-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--t2);
}

.pmodel-list li:first-child { padding-top: 0; }
.pmodel-list li:last-child { border-bottom: 0; }

.pmodel-list li::before {
  content: counter(pm, decimal-leading-zero);
  counter-increment: pm;
  font-family: var(--p-mono);
  font-size: 12.5px;
  color: var(--ec);
  padding-top: 4px;
}

.pmodel-list b {
  display: block;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--t1);
  margin-bottom: 3px;
}

.pmodel-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ==========================================================================
   Muallif sahifasi
   ========================================================================== */

/* Yon ustun eni ilmiy rahbarning emaili bir qatorga sig'adigan qilib olingan. */
.pauthor { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 46px; align-items: start; }

/* Yon ustun sahifa bo'ylab yopishib turadi: o'ngdagi matn sirg'alganda ham
   surat va aloqa ma'lumoti ko'z oldida qoladi. `align-self: start` shart —
   aks holda katak ustunni cho'zib yuboradi va yopishish ishlamaydi. Tepadagi
   oraliq yopishgan yuqori panel balandligini hisobga oladi. */
.pauthor-side {
  display: grid;
  gap: 22px;
  position: sticky;
  top: 112px;
  align-self: start;
}

.pauthor-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: var(--lift);
}

.pauthor-photo img { width: 100%; height: 100%; object-fit: cover; }

.pauthor-holder { color: var(--t3); }
.pauthor-holder .ico { width: 64px; height: 64px; stroke-width: 1.2; }

.pauthor-contact { display: grid; gap: 0; padding: 18px 20px 10px; border-radius: 18px; }

.pauthor-contact h2 {
  margin-bottom: 8px;
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--t3);
}

/* Email shu ustunga bir qatorda sig'adigan o'lchamda; sig'masa faqat «@»
   oldidan bo'linadi (`email_wrap` filtri). `anywhere` — oxirgi chora. */
.pauthor-contact a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.35;
  color: var(--t1);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .15s;
}

.pauthor-contact a > span { min-width: 0; }

.pauthor-contact a .ico { color: var(--pc); }
.pauthor-contact a:hover { color: var(--pc); }

/* Ish mavzusi — sahifadagi ilmiy muhr. Chap chetida bo'lim bo'yog'i. */
.pthesis {
  margin-bottom: 34px;
  padding: 28px 32px;
  border-radius: 20px;
  box-shadow: inset 3px 0 0 var(--pc), var(--edge-hi), var(--lift);
}

.pthesis-label {
  margin: 0 0 10px;
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--t3);
}

.pthesis-title {
  margin: 0;
  font-family: var(--p-serif);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  color: var(--t1);
}

.pprose p { margin: 0 0 18px; font-size: 18px; line-height: 1.75; max-width: 68ch; color: var(--t2); }

.pmarks {
  margin: 18px 0 0;
  padding: 6px 24px;
  list-style: none;
  border-radius: 18px;
  counter-reset: mk;
}

.pmarks li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.5;
}

.pmarks li:last-child { border-bottom: 0; }

.pmarks li::before {
  content: counter(mk, decimal-leading-zero);
  counter-increment: mk;
  font-family: var(--p-mono);
  font-size: 12.5px;
  color: var(--pc);
  padding-top: 4px;
}

/* Ilmiy rahbar — muallif katagini (`.pauthor`) qayta ishlatadi, bu yerda
   faqat bo'limga xos qismlar. */
.psuper { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--line); }
.psuper > .ptitle { margin-top: 4px; }
.psuper-intro { margin: 12px 0 34px; font-size: 18px; line-height: 1.6; color: var(--t2); max-width: 62ch; }

.psuper-name {
  margin: 0 0 6px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.25;
}
.psuper-role { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--t2); }

.psuper-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 32px;
}
.psuper-facts div { padding: 16px 18px; border-radius: 16px; }
.psuper-facts dt {
  margin-bottom: 5px;
  font-family: var(--p-mono);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t3);
}
.psuper-facts dd { margin: 0; font-size: 16.5px; line-height: 1.45; }

.psuper-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 12px;
  margin: 18px 0 6px;
  padding: 0;
  list-style: none;
}
.psuper-stats li { padding: 18px 18px 16px; border-radius: 16px; }
.psuper-stats b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--p-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.8px;
  color: var(--pc);
  font-variant-numeric: lining-nums tabular-nums;
}
.psuper-stats span { font-size: 14.5px; line-height: 1.35; color: var(--t2); }

.psuper-cv { margin: 18px 0 0; padding: 6px 24px; list-style: none; border-radius: 18px; }
.psuper-cv li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.5;
}
.psuper-cv li:last-child { border-bottom: 0; }
.psuper-cv span {
  padding-top: 4px;
  font-family: var(--p-mono);
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pc);
}

/* ==========================================================================
   Maqolalar — bibliografik ro'yxat
   ========================================================================== */

.pgroup { margin-bottom: 56px; }

.pgroup-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -.5px;
}

/* Sanoq — kichik shisha nishon. */
.pgroup-title span,
body.portal .row-title span {
  padding: 4px 11px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--p-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--t2);
}

.plist { margin: 0; padding: 0; list-style: none; border-radius: 22px; overflow: hidden; }

.plist-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 30px;
  border-bottom: 1px solid var(--line);
  transition: background-color .18s ease;
}

.plist-item:last-child { border-bottom: 0; }
.plist-item:hover { background: var(--glass-tint); }

.plist-year {
  align-self: start;
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent);
  border-radius: 999px;
  font-family: var(--p-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--pc);
  font-variant-numeric: tabular-nums;
}

.plist-body h3 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.38;
}

.plist-authors { margin: 10px 0 0; font-family: var(--p-display); font-weight: 500; font-size: 15.5px; color: var(--t2); }

.plist-venue { margin: 3px 0 0; font-family: var(--p-serif); font-style: italic; font-size: 16.5px; color: var(--t3); }

.plist-note { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; max-width: 72ch; color: var(--t2); }

.plist-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* Yuklab olish havolalari — kichik shisha tugma. */
.plink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: var(--glass-tint);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--t1);
  transition: border-color .15s, background-color .15s;
}

.plink:hover { border-color: var(--pc, var(--saffron)); background: var(--glass-hover); }

.plink--solid { background: var(--pc, var(--saffron)); border-color: var(--pc, var(--saffron)); color: var(--ink); }
.plink--solid:hover { background: color-mix(in srgb, var(--pc, var(--saffron)) 85%, #fff); color: var(--ink); }

/* ==========================================================================
   Darsliklar
   ========================================================================== */

.pbooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 18px; }

.pbook {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 22px;
  padding: 24px;
  border-radius: 20px;
}

.pbook-cover {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 10px;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .8);
}

.pbook-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Muqovasi yo'q kitob — bo'lim bo'yog'idagi stiker-muqova. */
.pbook-holder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 75%, #000));
  color: var(--ink);
}

.pbook-holder .ico { width: 40%; height: 40%; stroke-width: 1.5; }

/* Ba'zi nomlar butunlay bosh harfda va bitta so'zi kartochka enidan uzun —
   ular bo'g'inga bo'linadi, chetdan chiqib ketmaydi. */
.pbook-body h3 { font-family: var(--p-serif); font-weight: 600; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }

.pbook-meta {
  margin: 9px 0 0;
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t3);
}

.pbook-text { margin: 11px 0 0; font-size: 16px; line-height: 1.6; color: var(--t2); }

/* ==========================================================================
   PDF'i bor kitob va maqolalar (templates/portal/_doc_card.html)
   Butun kartochka bosiladi: sarlavhadagi havolaning `::after` qatlami uni
   to'liq qoplaydi. Kursor kelganda muqova qorayib, ustida ko'z chiqadi.
   ========================================================================== */

.pdoc {
  position: relative;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.pdoc:hover {
  border-color: color-mix(in srgb, var(--pc) 55%, transparent);
  background-color: var(--glass-tint);
  transform: translateY(-2px);
}

.pdoc h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.pdoc-open { color: inherit; text-decoration: none; }
.pdoc-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pdoc-open:focus-visible { outline: none; }
.pdoc:has(.pdoc-open:focus-visible) { outline: 3px solid var(--pc); outline-offset: 3px; }

.pdoc-cover { position: relative; align-self: start; background: #fff; }
.pdoc-cover img { object-position: top center; }

.pdoc-eye {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  background: rgba(12, 26, 23, .62);
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--t1);
  opacity: 0;
  transition: opacity .2s ease;
}

.pdoc-eye-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pc);
  color: var(--ink);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .7);
  transform: scale(.6);
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}

.pdoc-eye-dot .ico { width: 22px; height: 22px; stroke-width: 2; }

.pdoc:hover .pdoc-eye,
.pdoc:focus-within .pdoc-eye { opacity: 1; }
.pdoc:hover .pdoc-eye-dot,
.pdoc:focus-within .pdoc-eye-dot { transform: scale(1); }

/* Sensorli ekranda "kursor keldi" holati yo'q — ko'z muqova burchagida doim turadi. */
@media (hover: none) {
  .pdoc-eye { inset: auto 6px 6px auto; background: none; font-size: 0; opacity: 1; }
  .pdoc-eye-dot { width: 30px; height: 30px; transform: none; }
  .pdoc-eye-dot .ico { width: 16px; height: 16px; }
}

.pdoc-authors { margin: 9px 0 0; font-weight: 500; font-size: 15px; color: var(--t2); }

.pdoc-venue {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 7px 0 0;
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--t3);
}

/* Kartochkadagi «Ko'rish» va «Yuklab olish» — kartochkani qoplagan havola
   qatlamidan yuqorida turadi, aks holda bosish modalga ketardi. */
.pdoc { row-gap: 0; }

/* Kompyuterda matn ostida; telefonda kartochkaning to'liq enida (tor
   ustunga ikki tugma sig'maydi). */
.pdoc-actions {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

@media (max-width: 660px) {
  .pdoc-actions { grid-column: 1 / -1; }
  .pdoc-actions .plink { flex: 1 1 0; justify-content: center; }
}

.pdoc-actions .plink { min-height: 40px; padding: 8px 13px; font-size: 14.5px; }

/* — Ilmiy manbalar bazasi: muallif ishlaridan alohida bo'lim — */
.pbase { margin-top: 8px; padding-top: 52px; border-top: 1px solid var(--line); }

.pbase-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  max-width: 900px;
  margin-bottom: 40px;
}

.pbase-eyebrow {
  margin: 4px 0 10px;
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pc);
}

.pbase-head h2 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -.5px;
}

.pbase-head p:last-child { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--t2); }

/* — Modal oyna: hujjat haqida — */
.pdoc-modal [hidden],
.pdfv [hidden] { display: none !important; }

.pdoc-modal {
  width: 100%;
  max-width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t1);
  overflow: visible;
}

.pdoc-modal::backdrop { background: rgba(5, 12, 10, .74); backdrop-filter: blur(4px); }

.pdoc-modal[open] { animation: pdoc-in .26s cubic-bezier(.2, .9, .3, 1); }

@keyframes pdoc-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
}

.pdoc-m {
  position: relative;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  max-height: calc(100dvh - 32px);
  padding: 34px;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, rgba(250, 248, 241, .07), rgba(250, 248, 241, .02)),
    #10231F;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  box-shadow: var(--edge-hi), 0 40px 90px -30px rgba(0, 0, 0, .95);
}

.pdoc-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--t1);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.pdoc-x:hover { border-color: var(--pc); background: var(--glass-hover); }

.pdoc-m-cover {
  align-self: start;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 26px 44px -18px rgba(0, 0, 0, .95);
}

.pdoc-m-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.pdoc-m-group {
  margin: 2px 0 12px;
  padding-right: 48px;
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc);
}

.pdoc-m-title {
  padding-right: 28px;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.26;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.pdoc-m-authors { margin: 14px 0 0; font-weight: 600; font-size: 16.5px; color: var(--t1); }

.pdoc-m-venue { margin: 4px 0 0; font-family: var(--p-serif); font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--t3); }

.pdoc-m-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }

.pdoc-m-facts li {
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--p-mono);
  font-size: 12.5px;
  color: var(--t2);
}

.pdoc-m-note {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--glass-tint);
  border-left: 3px solid var(--pc);
  border-radius: 4px 14px 14px 4px;
}

.pdoc-m-note h3 {
  margin: 0 0 8px;
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--t3);
}

.pdoc-m-note p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--t2); }

.pdoc-m-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }

button.plink { cursor: pointer; }

.pdoc-pdf { padding: 12px 24px; font-size: 17px; letter-spacing: .3px; }
.pdoc-pdf .ico { width: 20px; height: 20px; }

/* — PDF ko'rgich: butun ekran, sahifalar qorong'i stol ustida — */
html.pdfv-lock { overflow: hidden; }

.pdfv {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0A1513;
  color: var(--t1);
}

.pdfv[open] { display: flex; flex-direction: column; }
.pdfv::backdrop { background: #0A1513; }

.pdfv-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #10231F;
  border-bottom: 1px solid var(--line);
}

.pdfv-head { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.pdfv-title,
.pdfv-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.pdfv-title { font-family: var(--p-display); font-weight: 600; font-size: 16px; }
.pdfv-sub { font-size: 13px; color: var(--t3); }

.pdfv-tools { display: flex; align-items: center; gap: 10px; flex: none; }

.pdfv-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--t1);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.pdfv-btn:hover { border-color: var(--pc); background: var(--glass-hover); }

.pdfv-pager { display: flex; align-items: center; gap: 7px; font-family: var(--p-mono); font-size: 14px; color: var(--t2); }

.pdfv-pager input {
  width: 58px;
  height: 38px;
  padding: 0 4px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  text-align: center;
  color: var(--t1);
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdfv-pager input::-webkit-inner-spin-button,
.pdfv-pager input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pdfv-pager input:focus { outline: 2px solid var(--pc); outline-offset: 1px; }

.pdfv-zoom { display: flex; align-items: center; gap: 4px; }

.pdfv-zoomval {
  min-width: 60px;
  height: 38px;
  background: none;
  border: 0;
  border-radius: 8px;
  font-family: var(--p-mono);
  font-size: 14px;
  color: var(--t1);
  cursor: pointer;
}

.pdfv-zoomval:hover { background: var(--glass-tint); }

.pdfv-dl { padding: 9px 15px; }

.pdfv-progress { height: 3px; flex: none; }

.pdfv-progress span {
  display: block;
  height: 100%;
  background: var(--pc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease, opacity .4s ease .25s;
}

.pdfv-progress.is-done span { opacity: 0; }

.pdfv-scroll {
  position: relative;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  outline: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(250, 248, 241, .05), transparent 60%), #0A1513;
}

.pdfv-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: fit-content;
  padding: 16px 16px 48px;
}

/* Sahifa joyi: chizilguncha och varaq va uning raqami. */
.pdfv-page {
  position: relative;
  flex: none;
  background: #F4F2EA;
  border-radius: 3px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .85);
}

.pdfv-page::before {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--p-mono);
  font-size: 22px;
  color: rgba(22, 48, 44, .28);
}

.pdfv-page.is-drawn { background: #fff; }
.pdfv-page.is-drawn::before { display: none; }
.pdfv-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; }

.pdfv-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  font-size: 17px;
  color: var(--t2);
  pointer-events: none;
}

.pdfv-state p { max-width: 42ch; margin: 0; }
.pdfv-state.is-error { pointer-events: auto; }

@media (max-width: 760px) {
  .pdoc-m { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 20px 22px; }
  .pdoc-m-cover { width: 150px; }
  .pbase-head { flex-direction: column; gap: 16px; }

  /* Ko'rgich paneli ikki qatorda: tepada nom, ostida asboblar. */
  .pdfv-bar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
  .pdfv-head { flex-basis: 0; }
  .pdfv-sub { display: none; }
  .pdfv-x { order: 2; }
  .pdfv-tools { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
  .pdfv-zoomval { min-width: 50px; }
  .pdfv-dl span { display: none; }
  .pdfv-dl { padding: 9px 12px; }
  .pdfv-pages { padding: 10px 8px 40px; gap: 10px; }
}

/* ==========================================================================
   Virtual laboratoriya
   ========================================================================== */

.ptasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.ptask {
  display: flex;
  flex-direction: column;
  padding: 26px 30px;
  border-radius: 20px;
}

.ptask h3 { font-family: var(--p-display); font-weight: 600; font-size: 19.5px; line-height: 1.35; }

.ptask p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--t2); flex-grow: 1; }

.ptask .plist-actions { margin-top: 18px; }

/* Laboratoriya xonalari — uchta katta plastina. Ustidagi chiziq xonaning
   bo'yog'ida, kursor kelganda to'liq yoziladi (bosh sahifadagi `.psec` kabi). */
.plab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 60px;
}

.plab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  padding: 30px 30px 28px;
  border-radius: 24px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}

.plab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--lc);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

/* Burchakdagi yorug'lik — xona bo'yog'ida, juda yengil. */
.plab::after {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lc) 22%, transparent), transparent);
  pointer-events: none;
}

.plab:hover { border-color: color-mix(in srgb, var(--lc) 60%, transparent); transform: translateY(-4px); }
.plab:hover::before { transform: scaleX(1); }

.plab-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.plab-no {
  font-family: var(--p-mono);
  font-size: 12.5px;
  letter-spacing: 1.4px;
  color: var(--t3);
}

.plab h2 {
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.5px;
}

.plab p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--t2); flex-grow: 1; }

.plab-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--lc);
}

.plab-go .ico { transition: transform .2s ease; }
.plab:hover .plab-go .ico { transform: translateX(4px); }

/* Uch xona tor ekranda bir ustunga tushadi — 2+1 tartibda yolg'iz qolgan
   kartochka chalkash ko'rinardi. */
@media (max-width: 980px) {
  .plab-grid { grid-template-columns: minmax(0, 1fr); }
  .plab { min-height: 0; }
}

@media (max-width: 660px) {
  .plab-grid,
  .ptasks { grid-template-columns: minmax(0, 1fr); }
  .ptask { padding: 22px; }
  .plab { padding: 26px 22px 24px; }
  .plab h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .plab, .plab::before, .pnav-sub { transition: none; }
  .plab:hover { transform: none; }
}

/* ==========================================================================
   Bo'sh holat
   ========================================================================== */

.pempty {
  display: grid;
  justify-items: start;
  gap: 4px;
  max-width: 560px;
  margin: 20px 0;
  padding: 36px 34px;
  border-radius: 22px;
}

.pempty .sticker { margin-bottom: 14px; }

.pempty h2 { font-family: var(--p-display); font-weight: 600; font-size: 22px; }

.pempty p { margin: 8px 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--t2); }

.pempty b { font-family: var(--p-mono); font-size: 14px; font-weight: 500; color: var(--t1); }

/* ==========================================================================
   Multimedia — mavzular va 5 qadam
   Kartochkalar `style.css` dagi bolalar qolipidan keladi; bu yerda ular
   portal ovoziga o'tadi: shisha, mavzu bo'yog'idagi stiker va yengil nur.
   ========================================================================== */

body.portal .row-title {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--wrap);
  margin: 0 auto 22px;
  padding: 0 24px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 29px);
  letter-spacing: -.5px;
  color: var(--t1);
}

body.portal .cards { gap: 18px; }

body.portal .card {
  gap: 0;
  min-height: 310px;
  padding: 24px 22px 22px;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%),
    var(--glass);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}

body.portal a.card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: var(--edge-hi), 0 34px 60px -28px rgba(0, 0, 0, .85);
}

body.portal a.card:active { transform: translateY(-1px); }

body.portal .card-no {
  top: 18px;
  right: 18px;
  width: auto;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--t2);
}

body.portal .card .sticker { margin-bottom: 20px; transition: transform .25s ease; }
body.portal a.card:hover .sticker { transform: rotate(-6deg) scale(1.06); }

body.portal .card-title {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.3px;
}

body.portal .card-text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--t2); }

body.portal .card-progress {
  display: block;
  margin-top: 14px;
  font-family: var(--p-mono);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--c);
}

body.portal .card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 16px;
  background: var(--saffron);
  border: 0;
  border-radius: 10px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

/* Tayyorlanayotgan mavzu: kartochka xiraroq, tugma o'rnida soat. */
body.portal .card--soon { opacity: .78; }
body.portal .card--soon .sticker { filter: saturate(.55); }
body.portal .card--soon .card-btn {
  padding: 9px 14px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  color: var(--t3);
}

body.portal .cards-empty { border: 1px dashed var(--line-strong); border-radius: 18px; background: var(--glass-tint); color: var(--t2); }

body.portal .how { padding: 72px 0 10px; }

body.portal .steps { gap: 14px; }

body.portal .steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 14px 22px;
  border-radius: 20px;
}

body.portal .steps li .sticker { margin-bottom: 12px; }
body.portal .steps li:hover .sticker { transform: translateY(-4px) rotate(-6deg); }
body.portal .steps .sticker { transition: transform .2s ease; }

body.portal .steps b { font-family: var(--p-display); font-weight: 600; font-size: 18px; color: var(--t1); }
body.portal .steps b small { margin-right: 6px; font-family: var(--p-mono); font-size: 12px; font-weight: 500; color: var(--t3); }
body.portal .steps i { font-family: var(--p-display); font-size: 14.5px; color: var(--t2); }

/* ==========================================================================
   Kirish va ro'yxatdan o'tish varag'i (va 404)
   ========================================================================== */

body.portal .gate { padding: 54px 24px 40px; }

body.portal .gate-card {
  max-width: 480px;
  padding: 38px 36px 30px;
  background: linear-gradient(180deg, rgba(250, 248, 241, .08), rgba(250, 248, 241, .03)), rgba(12, 26, 23, .72);
  border-radius: 26px;
  border-top: 1px solid var(--line-strong);
}

body.portal .gate-card--wide { max-width: 640px; }

body.portal .gate-card .sticker { margin-bottom: 18px; }

body.portal .gate-card h1 {
  margin: 0;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -.6px;
}

body.portal .gate-code {
  margin: 0 0 6px;
  font-family: var(--p-mono);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--saffron);
}

body.portal .gate-lead { margin: 10px 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--t2); }

body.portal .gate-card > p:not([class]) { margin: 12px 0 24px; font-size: 16.5px; line-height: 1.65; color: var(--t2); }

body.portal .gate-foot {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--t2);
}

body.portal .gate-foot a { color: var(--t1); text-decoration-color: var(--saffron); text-underline-offset: 4px; }

body.portal .gate-alert {
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  background: rgba(224, 140, 168, .12);
  border: 1px solid rgba(224, 140, 168, .45);
  border-radius: 12px;
  color: var(--t1);
  font-weight: 500;
}

body.portal .field > label,
body.portal .roles legend {
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--t2);
}

body.portal .roles legend { margin-bottom: 12px; }

body.portal .input {
  padding: 14px 16px;
  background: rgba(250, 248, 241, .06);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--t1);
  font-family: var(--p-display);
  font-size: 17px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.portal .input::placeholder { color: rgba(250, 248, 241, .42); }

body.portal .input:focus-visible { outline: none; }

body.portal .input:focus {
  background: rgba(250, 248, 241, .09);
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(227, 164, 59, .2);
}

/* Brauzer saqlangan loginni qo'yganda maydonni och sariqqa bo'yab
   yuboradi — to'q fonda u oq dog' bo'lib qolardi. */
body.portal .input:-webkit-autofill {
  -webkit-text-fill-color: var(--t1);
  box-shadow: 0 0 0 40px #1A2E28 inset;
  caret-color: var(--t1);
}

body.portal .field--bad .input { border-color: #F08AA0; background: rgba(240, 138, 160, .08); }
body.portal .field--bad .input:focus { box-shadow: 0 0 0 4px rgba(240, 138, 160, .22); }
body.portal .field-error { color: #F7A9B9; font-weight: 600; }
body.portal .field-hint { color: var(--t3); font-size: 14px; }

body.portal .peek-btn { color: var(--t3); }
body.portal .peek-btn:hover,
body.portal .peek-btn[aria-pressed="true"] { background: var(--glass-hover); color: var(--t1); }
body.portal .peek-btn:focus-visible { outline-color: var(--saffron); }

/* Rol tanlash — ikkita shisha kartochka, tanlangani zaʼfaron hoshiyada. */
body.portal .roles-grid { gap: 14px; }

body.portal .role {
  padding: 18px 16px 16px;
  background: var(--glass-tint);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  transition: border-color .15s, background-color .15s, transform .15s;
}

body.portal .role:hover { transform: translateY(-2px); box-shadow: none; background: var(--glass-hover); }

body.portal .role .sticker { margin-bottom: 12px; }
body.portal .role-name { margin-top: 0; font-family: var(--p-display); font-weight: 600; font-size: 19px; color: var(--t1); }
body.portal .role-text { margin-top: 4px; font-size: 14.5px; color: var(--t2); }

body.portal .role:has(input:checked) {
  background: rgba(227, 164, 59, .12);
  border-color: var(--saffron);
  box-shadow: 0 0 0 1px var(--saffron);
}

body.portal .role:has(input:checked) .role-text { color: var(--t2); }
body.portal .role-tick { top: 14px; right: 14px; background: var(--saffron); color: var(--ink); }
body.portal .role-tick .ico { width: 15px; height: 15px; stroke-width: 2.4; }
body.portal .role:has(input:focus-visible) { outline-color: var(--saffron); }
body.portal .roles--bad .role { border-color: #F08AA0; }

/* ==========================================================================
   Dars sahifalari (mavzu, natijalar, o'qituvchi paneli)
   Komponentlar `style.css` dagi bolalar qolipidan; bu yerda ular shishaga
   o'tadi: qalin qora chegara va qattiq soya o'rniga nozik chiziq va nur,
   emoji o'rniga stiker.
   ========================================================================== */

/* — Orqaga havolasi — */
body.portal .back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 10px 18px 10px 14px;
  background: var(--glass-tint);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--p-display);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--t1);
  transition: background-color .15s ease;
}

body.portal .back:hover { background: var(--glass-hover); color: var(--t1); }

/* — Mavzu sahifasi — */
body.portal .lesson { max-width: var(--wrap); padding: 36px 24px 30px; }

body.portal .lesson-card {
  column-gap: 34px;
  padding: 38px 40px;
  background:
    radial-gradient(90% 120% at 0% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%),
    var(--glass);
  border-radius: 28px;
  animation: none;
}

body.portal .lesson-card .sticker { grid-row: 1 / 3; align-self: center; }

body.portal .lesson-card h1 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -.9px;
}

body.portal .lesson-card p { margin-top: 14px; font-size: 18.5px; line-height: 1.6; color: var(--t2); }

body.portal .lesson-card .card-no { top: 22px; right: 22px; }

body.portal .facts { gap: 14px; margin: 22px 0 0; }

body.portal .fact {
  min-width: 140px;
  padding: 18px 24px 16px;
  border-radius: 18px;
  text-align: left;
}

body.portal .fact b { font-family: var(--p-display); font-size: 34px; letter-spacing: -1px; }
body.portal .fact span { font-size: 15px; color: var(--t2); }

body.portal .stages-title {
  margin: 54px 0 22px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 29px);
  letter-spacing: -.5px;
}

body.portal .lesson-start { margin: 0 0 30px; }

/* 5E papkalari endi shisha kartochka: tepada bosqich stikeri va raqam
   nishoni, ostida nomi, vazifasi va holati. */
body.portal .folders { gap: 14px; margin: 0 0 30px; }

body.portal .folder {
  margin-top: 0;
  padding: 22px 20px 20px;
  background:
    radial-gradient(110% 60% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 65%),
    var(--glass);
  border-radius: 22px;
  color: var(--t1);
  animation: none;
}

body.portal .folder--open:hover,
body.portal .folder--open:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c) 65%, transparent);
  box-shadow: var(--edge-hi), 0 34px 60px -28px rgba(0, 0, 0, .85);
}

body.portal .folder--shut,
body.portal .folder--soon { filter: none; opacity: .62; }

body.portal .folder--shut:hover { opacity: .8; }

body.portal .folder-tab {
  left: auto;
  right: 18px;
  top: 20px;
  width: auto;
  min-width: 32px;
  height: 30px;
  padding: 0 10px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--t2);
}

body.portal .folder--done .folder-tab { background: var(--c); border-color: var(--c); color: var(--ink); }
body.portal .folder-tab .ico { width: 15px; height: 15px; stroke-width: 2.4; }

body.portal .folder-name {
  margin-top: 18px;
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--c);
}

body.portal .folder-sheet { margin-top: 6px; padding: 0; background: transparent; border: 0; border-radius: 0; }
body.portal .folder-sheet b { font-family: var(--p-display); font-weight: 600; font-size: 19px; color: var(--t1); }
body.portal .folder-sheet span { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--t2); }

body.portal .folder-go {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 18px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--c);
}

body.portal .folder-go--shut,
body.portal .folder-go--soon { opacity: 1; color: var(--t3); font-weight: 500; }

body.portal .soon-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  font-family: var(--p-display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.5;
}

body.portal .soon-note--go { box-shadow: inset 3px 0 0 var(--saffron), var(--edge-hi), var(--lift); }
body.portal .soon-note > .ico { width: 24px; height: 24px; color: var(--saffron); }
body.portal .soon-note b { color: var(--saffron); }

/* — Natijalar va panel — */
body.portal .panel { padding: 40px 24px 30px; }

body.portal .panel-head { margin: 0 0 34px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }

body.portal .panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--p-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--t2);
}

body.portal .panel-eyebrow .phead-chip { padding: 5px 9px; }

body.portal .panel-head h1 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 50px);
  letter-spacing: -.8px;
}

body.portal .panel-lead { margin-top: 12px; font-size: 18px; color: var(--t2); }
body.portal .panel-lead b { color: var(--t1); }

body.portal .panel .row-title { padding: 0; margin: 0 0 18px; }

body.portal .tiles { gap: 14px; margin-bottom: 44px; }

body.portal .tile {
  position: relative;
  padding: 22px 22px 18px;
  border-radius: 20px;
  overflow: hidden;
}

/* Tepadagi rangli chiziq — kafel qaysi o'lchov ekanini bir qarashda ajratadi. */
body.portal .tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c);
}

body.portal .tile b { font-family: var(--p-display); font-weight: 700; font-size: 42px; color: var(--t1); }
body.portal .tile b i { font-size: 22px; color: var(--t3); opacity: 1; }
body.portal .tile span { margin-top: 8px; font-family: var(--p-display); font-size: 15.5px; color: var(--t2); }

body.portal .works { gap: 20px; }

body.portal .work { margin-bottom: 24px; border-radius: 24px; }
body.portal .work--mine { margin-bottom: 0; }

body.portal .work-head {
  gap: 16px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border-bottom: 1px solid var(--line);
}

body.portal .work-title h2 { font-family: var(--p-display); font-weight: 600; font-size: 22px; color: var(--t1); }
body.portal .work-title h2 a { color: var(--t1); text-decoration-color: var(--c); text-underline-offset: 4px; }
body.portal .work-title p { margin-top: 4px; font-size: 15px; color: var(--t2); }
body.portal .work-title p .ico { color: var(--saffron); }

body.portal .work-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: var(--saffron);
  border-radius: 10px;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
}

body.portal .stage-rows { padding: 8px 14px 12px; gap: 0; }

body.portal .stage-row {
  gap: 14px;
  padding: 13px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

body.portal .stage-row:last-child { border-bottom: 0; }
body.portal .stage-row.is-done { background: transparent; }

body.portal .stage-row-name b { font-family: var(--p-mono); font-weight: 500; font-size: 12.5px; letter-spacing: 1.2px; color: var(--c); }
body.portal .stage-row-name i { font-size: 15px; color: var(--t1); }

body.portal .meter {
  height: 8px;
  background: rgba(250, 248, 241, .1);
  border: 0;
}

body.portal .meter-fill { border-radius: 999px; }

body.portal .stage-row-num { font-family: var(--p-mono); font-weight: 500; font-size: 13px; color: var(--t2); }

body.portal .stage-row-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--p-display);
  font-size: 15px;
  color: var(--t1);
}

body.portal .stage-row-go:hover { color: var(--c); text-decoration: none; }

body.portal .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass-tint);
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--t1);
}

body.portal .pill .ico { width: 14px; height: 14px; }
body.portal .pill--warn,
body.portal .pill--score { background: rgba(227, 164, 59, .16); border-color: rgba(227, 164, 59, .5); color: #F4C77E; }
body.portal .pill--ok,
body.portal .pill--practice { background: rgba(156, 196, 106, .14); border-color: rgba(156, 196, 106, .45); color: #BFDC98; }
body.portal .pill--soft { color: var(--t3); border-color: var(--line); }

body.portal .welcome-nav { margin-top: 36px; }

/* O'qituvchi paneli */
body.portal .panel-bar { margin-bottom: 18px; }
body.portal .panel-bar .row-title { margin: 0; }

body.portal .sorts {
  gap: 4px;
  padding: 4px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
}

body.portal .sort-link {
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: var(--p-display);
  font-size: 14.5px;
  color: var(--t2);
}

body.portal .sort-link:hover { color: var(--t1); }
body.portal .sort-link.is-on { background: var(--saffron); color: var(--ink); }

body.portal .table-wrap { margin-bottom: 44px; border-radius: 22px; }

body.portal .grid-table { font-size: 15.5px; }

body.portal .grid-table th,
body.portal .grid-table td { padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--t1); }

body.portal .grid-table thead th {
  background: rgba(250, 248, 241, .04);
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
}

body.portal .grid-table tbody tr:hover { background: var(--glass-tint); }
body.portal .grid-table td { color: var(--t2); }
body.portal .table-empty { color: var(--t3); }

body.portal .who-link { gap: 12px; color: var(--t1); }
body.portal .who-link b { font-family: var(--p-display); font-weight: 600; font-size: 16px; }
body.portal .who-link i { color: var(--t3); }
body.portal .who-link:hover b { text-decoration-color: var(--saffron); text-underline-offset: 3px; }

body.portal .panel-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 15.5px;
  color: var(--t2);
}

body.portal .panel-note > .ico { width: 22px; height: 22px; color: var(--g3); }
body.portal .panel-note b { color: var(--t1); }
body.portal .panel-note a { color: var(--t1); text-decoration-color: var(--saffron); }

/* O'quvchi ishi (panel ichida) */
body.portal .work-stages { gap: 8px; }

body.portal .work-stage {
  gap: 2px;
  min-width: 70px;
  padding: 8px 10px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}

body.portal .work-stage.is-done { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
body.portal .work-stage b { color: var(--c); }
body.portal .work-stage b .ico { width: 18px; height: 18px; }
body.portal .work-stage span { font-family: var(--p-display); color: var(--t1); }
body.portal .work-stage i { color: var(--t3); }

body.portal .work-block { padding: 20px 24px; border-bottom: 1px solid var(--line); }

body.portal .work-block-head {
  align-items: center;
  padding-left: 0;
  border-left: 0;
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--t1);
}

body.portal .work-block-head > .ico { color: var(--c); }
body.portal .work-block-head span { color: var(--t3); font-family: var(--p-display); font-size: 14px; }

body.portal .qstep-head { font-family: var(--p-mono); font-weight: 500; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }

body.portal .qrow {
  padding: 16px 18px;
  background: var(--glass-tint);
  border: 1px solid var(--line);
  border-radius: 16px;
}

/* Tekshirilmagan javob — chap chetida zaʼfaron chiziq. */
body.portal .qrow--new { background: rgba(227, 164, 59, .07); border-color: rgba(227, 164, 59, .35); box-shadow: inset 3px 0 0 var(--saffron); }

body.portal .qrow-q { font-family: var(--p-display); font-size: 15.5px; color: var(--t1); }
body.portal .qrow-a { margin-top: 8px; font-size: 16.5px; color: var(--t2); }
body.portal .qrow-key { color: var(--t3); }
body.portal .qrow-key b { color: var(--t1); }
body.portal .qrow-key--right { color: #BFDC98; }
body.portal .qrow-key--wrong { color: #F7A9B9; }
body.portal .qrow-pic { border: 1px solid var(--line-strong); }
body.portal .qrow-tools { border-top: 1px solid var(--line); }
body.portal .qcheck { font-family: var(--p-display); color: var(--t1); }
body.portal .qcheck input { accent-color: var(--saffron); }
body.portal .input--note { padding: 9px 13px; font-size: 15px; border-width: 1px; }

body.portal .save-bar {
  bottom: 16px;
  padding: 12px 14px 12px 24px;
  background: var(--glass-deep);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .8);
}

body.portal .save-bar p { color: var(--t2); }

/* Xabarcha (masalan, "Saqlandi") — yopishgan yuqori panel ustida turadi. */
body.portal .toasts { z-index: 120; top: 98px; }

body.portal .toast {
  padding: 11px 22px 11px 12px;
  background: var(--glass-deep);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8);
  font-family: var(--p-display);
  color: var(--t1);
}

body.portal .toast-mark { background: var(--saffron); color: var(--ink); }

/* ==========================================================================
   Topshiriq ekranlari (bosqich muqovasi, topshiriq, yakun, sertifikat)
   Ortida o'sha o'rmon, tepadagi asboblar qatori to'q shisha — portal bilan
   bir xil. Ish varaqlari esa OCH shisha: ichidagi o'yinlar, rasmlar va
   bolalar o'qiydigan matn och qog'ozga mo'ljallangan, to'q fonda ular
   kontrastini yo'qotardi. Qalin qora chegara va qattiq soya o'rniga nozik
   oq hoshiya va chuqur yumshoq soya — varaq o'rmon ustida suzib turadi.
   "Sirli sayyora" (`body.space`) o'z fazo sahnasida qoladi.
   ========================================================================== */

/* O'yin ichidagi kartochkalarning qattiq siyoh soyasi (`style.css` dagi
   `var(--pop, ...)`) yumshoq nurga, qalin chegarasi nozikroqqa almashadi.
   Fazo ekranida (`.space`) ular o'zgarmaydi. */
body.portal,
body.is-task:not(.space) {
  --pop: 0 12px 26px -14px rgba(22, 48, 44, .55);
  --edge: 1.5px;
}

body.is-task {
  --sheet: rgba(250, 250, 246, .96);
  --sheet-line: rgba(22, 48, 44, .14);
  --sheet-lift: 0 44px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .35);
}

/* — Asboblar qatori (to'q fonda) — */
body.is-task:not(.space) .lesson-menu > summary,
body.is-task:not(.space) .back--tight,
body.is-task:not(.space) .stage-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  background: rgba(9, 21, 18, .62);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: none;
  color: var(--t1);
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 15px;
}

body.is-task:not(.space) .back--tight:hover,
body.is-task:not(.space) .lesson-menu > summary:hover,
body.is-task:not(.space) .lesson-menu[open] > summary { background: rgba(30, 50, 44, .8); color: var(--t1); }

body.is-task:not(.space) .stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--c);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  color: var(--ink);
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 15px;
}

body.is-task:not(.space) .stage-who--peek { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }

body.is-task :focus-visible { outline-color: var(--ink); }
body.is-task:not(.space) .stage-bar :focus-visible { outline-color: var(--saffron); }

/* Qadamlar chizig'i to'q fonda */
body.is-task:not(.space) .rail-step::before { background: var(--t1); opacity: .22; height: 2px; }
body.is-task:not(.space) .rail-step.is-done::before,
body.is-task:not(.space) .rail-step.is-current::before { background: var(--c); opacity: .9; }

body.is-task:not(.space) .rail-dot {
  background: rgba(9, 21, 18, .7);
  border: 1px solid var(--line-strong);
  color: var(--t1);
  font-family: var(--p-display);
  font-size: 15px;
}

body.is-task:not(.space) .rail-step.is-done .rail-dot,
body.is-task:not(.space) .rail-step.is-current .rail-dot { background: var(--c); border-color: var(--c); color: var(--ink); }
body.is-task:not(.space) .rail-step.is-current .rail-dot { box-shadow: 0 0 0 5px rgba(250, 248, 241, .14); }
body.is-task .rail-dot .ico { width: 16px; height: 16px; stroke-width: 2.4; }

body.is-task:not(.space) .rail-label { color: var(--t3); font-size: 12.5px; }
body.is-task:not(.space) .rail-step.is-current .rail-label { color: var(--t1); }

/* Dars yo'li menyusi — to'q shisha panel */
.lesson-menu > summary .ico { width: 18px; height: 18px; }

body.is-task:not(.space) .lesson-menu-panel,
body.portal .lesson-menu-panel {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--glass-deep);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--t1);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}

body.is-task:not(.space) .lesson-menu-panel a { color: var(--t1); }
body.is-task:not(.space) .lesson-menu-panel a:hover { background: var(--glass-hover); }
body.is-task:not(.space) .lesson-menu-panel a[aria-current] { background: rgba(227, 164, 59, .16); color: var(--t1); }
body.is-task:not(.space) .lesson-menu-topic { border-bottom-color: var(--line); }
body.is-task:not(.space) .lesson-menu-stages small { color: var(--t3); }
body.is-task:not(.space) .lesson-menu-locked { color: var(--t3); }
body.is-task:not(.space) .lesson-menu-steps { border-left-color: var(--line-strong); }

/* — Ish varaqlari — */
body.is-task .cover,
body.is-task .done,
body.is-task .cover-panel,
body.is-task:not(.space) .task,
body.is-task .review-panel,
body.is-task .cert {
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 26px;
  box-shadow: var(--sheet-lift);
}

body.is-task .cover-panel,
body.is-task:not(.space) .task { background: var(--sheet); }

/* Bosqich rangidagi varaq — tepasi yorqinroq, xuddi nur tushgandek. */
body.is-task .cover,
body.is-task .done {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%),
    var(--c);
}

@supports (background: color-mix(in srgb, red 14%, white)) {
  body.is-task .review-panel { --panel: color-mix(in srgb, var(--c) 22%, #FAFAF6); }
}

/* 5E yo'lakchasi muqova ustida */
body.is-task .rail5-item + .rail5-item::before { height: 2px; background: rgba(22, 48, 44, .28); }

body.is-task .rail5-mark {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(22, 48, 44, .22);
  color: var(--ink);
}

body.is-task .rail5-mark .ico { width: 50%; height: 50%; }
body.is-task .rail5-item a:hover .rail5-mark { box-shadow: 0 8px 16px -8px rgba(22, 48, 44, .6); }
body.is-task .rail5-item.is-done .rail5-mark { background: var(--ink); border-color: var(--ink); color: var(--t1); }
body.is-task .rail5-item.is-current .rail5-mark { background: #fff; box-shadow: 0 0 0 5px rgba(22, 48, 44, .1); }

/* Bosqich belgisi — oq medalyon ichida ikona */
body.is-task .cover-emoji,
body.is-task .done-seal {
  background: radial-gradient(circle at 35% 25%, #fff, rgba(255, 255, 255, .6));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 22px 40px -18px rgba(22, 48, 44, .55), inset 0 -3px 0 rgba(22, 48, 44, .06);
  color: var(--ink);
}

body.is-task .cover-emoji .ico { width: 46%; height: 46%; stroke-width: 1.6; }
body.is-task .done-seal .ico { width: 44%; height: 44%; stroke-width: 1.6; }

body.is-task .cover-eyebrow,
body.is-task .done-eyebrow {
  font-family: var(--p-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(22, 48, 44, .72);
}

body.is-task .cover h1 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -.8px;
}

body.is-task .done h1 { font-family: var(--p-serif); font-weight: 600; letter-spacing: -.6px; }

body.is-task .cover-lead,
body.is-task .done-lead { font-size: 17px; color: rgba(22, 48, 44, .82); }

/* Varaq ichidagi kichik kartochkalar: qattiq soya o'rniga yengil hoshiya. */
body.is-task .cover-facts li,
body.is-task .cover-progress,
body.is-task .cover-note,
body.is-task .done-facts li,
body.is-task .done-status {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(22, 48, 44, .14);
  border-radius: 16px;
  box-shadow: 0 14px 26px -18px rgba(22, 48, 44, .55);
}

body.is-task .cover-note,
body.is-task .done-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; }
body.is-task .cover-note .ico { color: var(--e1); }

body.is-task .meter--cover {
  height: 10px;
  background: rgba(22, 48, 44, .12);
  border: 0;
}

body.is-task .meter--cover .meter-fill { border-radius: 999px; }

/* O'ng panel: topshiriqlar ro'yxati va boshlash kartochkasi */
body.is-task .cover-head,
body.is-task .review-head { font-family: var(--p-display); font-weight: 600; font-size: 22px; }

body.is-task .preview-item {
  background: #fff;
  border: 1px solid var(--sheet-line);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(22, 48, 44, .04);
}

body.is-task .preview-item.is-done { background: color-mix(in srgb, var(--c) 18%, #fff); }

body.is-task .preview-item:has(a):hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 70%, var(--ink));
  box-shadow: 0 16px 28px -18px rgba(22, 48, 44, .6);
}

body.is-task .preview-no {
  background: rgba(22, 48, 44, .05);
  border: 1px solid rgba(22, 48, 44, .2);
  font-family: var(--p-display);
}

body.is-task .preview-item.is-done .preview-no { background: var(--c); border-color: transparent; }
body.is-task .preview-no .ico { width: 16px; height: 16px; stroke-width: 2.4; }
body.is-task .preview-go { display: inline-flex; color: rgba(22, 48, 44, .5); }

body.is-task .start-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 32%, #fff), #fff 70%);
  border: 1px solid var(--sheet-line);
  border-radius: 20px;
}

body.is-task .start-card h2 { display: flex; align-items: center; gap: 10px; font-family: var(--p-display); font-weight: 600; font-size: 21px; }
body.is-task .start-card--done { background: linear-gradient(160deg, #DDF3D2, #fff 70%); }
body.is-task .start-card--peek { border-style: dashed; }

/* Topshiriq varag'ining sarlavhasi */
body.is-task:not(.space) .task-eyebrow {
  padding: 6px 14px;
  background: var(--c);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  font-family: var(--p-display);
  font-weight: 600;
  font-size: 13.5px;
}

body.is-task .task-title { font-family: var(--p-display); font-weight: 700; letter-spacing: -.7px; }
body.is-task .task-lead { font-size: 17px; }

body.is-task .task-saved,
body.is-task .task-alert b { display: inline-flex; align-items: center; gap: 8px; }

body.is-task .task-saved { border-width: 1px; border-color: rgba(22, 48, 44, .2); }

/* Varaq ichidagi tugmalar: asosiysi zaʼfaron (portal bilan bir xil),
   ikkinchi darajalisi — siyoh hoshiyali shaffof tugma. */
body.is-task:not(.space) .btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(22, 48, 44, .35);
  box-shadow: none;
  color: var(--ink);
}

body.is-task:not(.space) .btn--ghost:hover { background: rgba(22, 48, 44, .06); border-color: var(--ink); box-shadow: none; }

body.is-task .btn .ico { width: 18px; height: 18px; }

body.space .btn { border-radius: 12px; }

body.is-task .task-skip { border-width: 1.5px; }

/* Yakun va sertifikat */
body.is-task .review { background: #fff; border: 1px solid var(--sheet-line); border-radius: 18px; }
body.is-task .review-edit,
body.is-task .review-empty { display: inline-flex; align-items: center; gap: 6px; }
body.is-task .done-missing b { display: inline-flex; align-items: center; gap: 8px; }
body.is-task .done-practice .ico,
body.is-task .score-row-name .ico { color: var(--e1); }
body.is-task .done-missing a { display: inline-flex; align-items: center; gap: 6px; }

body.is-task .cert-head h1 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--t1);
}

body.is-task .cert-head h1 .ico { color: var(--saffron); }

/* Sertifikat ostidagi tugmalar varaqda emas, to'q fonda turadi. */
body.is-task .cert-page .btn--ghost {
  background: rgba(9, 21, 18, .62);
  border-color: var(--line-strong);
  color: var(--t1);
}

body.is-task .cert-page .btn--ghost:hover { background: rgba(30, 50, 44, .8); border-color: var(--line-strong); }
body.is-task .cert-head p { color: var(--t2); font-size: 17px; }

/* Xabarcha to'q fonda ham, och varaq ustida ham o'qiladi. */
body.is-task:not(.space) .snack {
  background: var(--glass-deep);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8);
  color: var(--t1);
}

body.is-task:not(.space) .snack-mark { background: var(--saffron); color: var(--ink); }
body.is-task:not(.space) .snack--info .snack-mark { background: none; color: var(--saffron); }
body.is-task .snack-mark .ico { width: 18px; height: 18px; }

/* ==========================================================================
   Ochiq registr — hamma portal sahifasi (bosh sahifa ham)
   Mijoz to'q sahifalarni avtoreferatga (skrinshot, chop etish) xunuk chiqadi
   deb topdi va ochroq qilishni so'radi; keyin bosh sahifaning hero'dan
   pastki qismi ham shunga o'tkazildi. Ortidagi o'rmon och tuman ostida,
   kartochkalar oq shisha, yozuv qarag'ay-siyoh. Bosh sahifadagi foto-sahna,
   PDF ko'rgich (to'q) va yuqori panel bilan kolofon (suratning barg
   yashili) o'z registrida qoladi — yuqoridagi tungi tokenlar ularga qayta
   beriladi.

   Bo'lim bo'yog'i `--pc` och tusda keladi (to'q fon uchun tanlangan) — och
   yuzada u yozuv bo'lsa, siyoh bilan aralashtirib to'qlashtiriladi.
   ========================================================================== */

body.portal {
  --glass:
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .4)),
    rgba(250, 248, 241, .8);
  --glass-deep: rgba(251, 250, 245, .97);
  --glass-tint: rgba(22, 48, 44, .04);
  --glass-hover: rgba(22, 48, 44, .08);
  --line: rgba(22, 48, 44, .12);
  --line-strong: rgba(22, 48, 44, .24);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --lift: 0 26px 50px -34px rgba(22, 48, 44, .5);
  --t1: #13261F;
  --t2: rgba(19, 38, 31, .8);
  --t3: rgba(19, 38, 31, .64);
  --pc-ink: color-mix(in srgb, var(--pc, var(--saffron)) 42%, #13261F);
}

body.portal { background: #EDEBE1; }

/* `--pc` ichki `section` da beriladi, shuning uchun `--pc-ink` u yerda qayta
   hisoblanadi (body'dagi qiymat bo'lim bo'yog'ini ko'rmaydi). */
body.portal [style*="--pc"] {
  --pc-ink: color-mix(in srgb, var(--pc) 42%, #13261F);
}

body.portal::before {
  background:
    linear-gradient(180deg, rgba(240, 238, 228, .8), rgba(237, 235, 225, .9) 45%, rgba(237, 235, 225, .95)),
    url("../img/portal/ambient.jpg") center top / cover no-repeat;
}

body.portal ::selection { background: rgba(227, 164, 59, .35); color: var(--t1); }
body.portal :focus-visible { outline-color: #B4741F; }
body.portal .topbar :focus-visible { outline-color: var(--saffron); }

/* Bo'lim bo'yog'idagi yozuv va belgilar */
body.portal :is(
  .pauthor-contact a .ico, .pauthor-contact a:hover,
  .psuper-stats b, .psuper-cv span,
  .plist-year, .pbase-eyebrow, .pdoc-m-group
) { color: var(--pc-ink); }

body.portal .pmarks li::before { color: var(--pc-ink); }
body.portal .psec-go { color: var(--pc-ink); }
body.portal .pmodel-list li::before { color: color-mix(in srgb, var(--ec) 42%, #13261F); }
/* 5E halqasidagi doirachalar halqasi kartochka foni rangida */
body.portal .pcycle-node circle { stroke: #F8F7F1; }

body.portal :is(.pdoc-x, .plink):hover { border-color: var(--pc-ink); }

/* Xona, mavzu va bosqich bo'yoqlari (`--lc`, `--c`) ham shunday */
body.portal .plab-go { color: color-mix(in srgb, var(--lc) 42%, #13261F); }
body.portal :is(
  .card-progress, .folder-name, .folder-go, .stage-row-name b,
  .stage-row-go:hover, .work-stage b, .work-block-head > .ico
) { color: color-mix(in srgb, var(--c) 42%, #13261F); }

/* Yuqori panel — hamma sahifada (bosh sahifada ham) hero suratining barg
   yashili: na tungi qora, na oq. Rang suratning o'zidan olingan (soyadagi
   barglar #343B21 va mox #64815A orasi); shaffof va xiralashtirilgan, shuning
   uchun ostidan o'tgan surat ranglari biroz ko'rinib turadi. Yozuvlar
   tungi registrda (och) qoladi. */
body.portal .topbar {
  background: rgba(44, 64, 37, .88);
  border-bottom-color: rgba(250, 248, 241, .14);
  box-shadow: 0 12px 30px -24px rgba(20, 30, 14, .7);
}
body.portal .topbar .pnav-sub::before,
body.portal .topbar .who-panel { background: rgba(40, 58, 34, .96); }

body.portal .phead-sub a { text-decoration-color: var(--pc-ink); }

/* Soyalar: qora emas, siyoh tusidagi yumshoq soya */
body.portal .pbook-cover { box-shadow: 0 14px 26px -14px rgba(22, 48, 44, .55); }
body.portal .pdoc-eye { background: rgba(19, 38, 31, .5); color: #FAF8F1; }
body.portal .pdoc-eye-dot { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45); }

/* Hujjat modali */
body.portal .pdoc-modal::backdrop { background: rgba(19, 38, 31, .55); }
body.portal .pdoc-m {
  background: #FBFAF5;
  box-shadow: 0 40px 90px -30px rgba(19, 38, 31, .6);
}
body.portal .pdoc-m-cover { box-shadow: 0 22px 40px -20px rgba(19, 38, 31, .55); }

/* Kirish, ro'yxatdan o'tish, 404 */
body.portal .gate-card { background: rgba(251, 250, 245, .9); }
body.portal .gate-code { color: #B4741F; }
body.portal .gate-alert { background: rgba(139, 47, 77, .08); border-color: rgba(139, 47, 77, .35); }
body.portal .input { background: #fff; }
body.portal .input::placeholder { color: rgba(19, 38, 31, .42); }
body.portal .input:focus { background: #fff; }
body.portal .input:-webkit-autofill { box-shadow: 0 0 0 40px #FFF8E8 inset; }
body.portal .field--bad .input { border-color: #B8466A; background: #FFF6F8; }
body.portal .field-error { color: #A3324F; }
body.portal .roles--bad .role { border-color: #B8466A; }
body.portal .role:has(input:checked) { background: rgba(227, 164, 59, .14); }

/* Dars sahifalari */
body.portal :is(.soon-note b, .soon-note > .ico, .work-title p .ico) { color: #B4741F; }
body.portal .panel-note > .ico { color: var(--e3); }
body.portal .pill--warn,
body.portal .pill--score { background: rgba(227, 164, 59, .16); border-color: rgba(180, 116, 31, .45); color: #8A5512; }
body.portal .pill--ok,
body.portal .pill--practice { background: rgba(94, 132, 54, .12); border-color: rgba(94, 132, 54, .4); color: #46672A; }
body.portal .qrow-key--right { color: #46672A; }
body.portal .qrow-key--wrong { color: #A3324F; }

/* Kolofon yuqori panel bilan bir xil — hero suratining barg yashili */
body.portal .pfoot { background: #2C4025; border-top-color: rgba(250, 248, 241, .14); }

/* ==========================================================================
   Kolofon
   ========================================================================== */

.pfoot {
  margin-top: 80px;
  padding: 56px 24px 30px;
  background: rgba(7, 16, 14, .72);
  border-top: 1px solid var(--line);
  color: var(--t2);
}

.pfoot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 44px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.pfoot-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--p-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--t1);
}

.pfoot-about p { margin: 18px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.7; }

.pfoot-about i { font-style: italic; }

.pfoot-nav { display: grid; gap: 0; align-content: start; }

.pfoot-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--p-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--t1);
  text-decoration: none;
  transition: padding-left .18s ease, color .18s ease;
}

.pfoot-nav a:first-child { border-top: 1px solid var(--line); }
.pfoot-nav a:hover { padding-left: 8px; color: var(--saffron); }

.pfoot-line {
  max-width: var(--wrap);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--t3);
}

/* ==========================================================================
   Moslashuv
   ========================================================================== */

@media (max-width: 1080px) {
  /* Tor ekranda matn butun enni oladi — gradient bir tekis quyuqlashadi,
     aks holda matn suratning yorug' joyiga tushib qolardi. */
  .phero { grid-template-columns: minmax(0, 1fr); padding: 64px 24px 48px; }
  .phero-text { grid-column: auto; justify-self: start; max-width: 680px; }
  .phero-band {
    background-image:
      linear-gradient(0deg, #EDEBE1, rgba(237, 235, 225, 0) 44px),
      linear-gradient(rgba(13, 28, 25, .66), rgba(13, 28, 25, .72)),
      url("../img/portal/hero-photo.jpg");
  }
  .psec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pmodel-card { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  body.portal .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.portal .folders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .pauthor { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* Tor ekranda yon ustun matnning tepasiga o'tadi — yopishtirishning
     ma'nosi qolmaydi, aksincha ekranning yarmini egallab turardi. */
  .pauthor-side {
    position: static;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    align-items: start;
  }
  .pstats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-home .pstats-in p { border-right: 0; border-bottom: 1px solid rgba(250, 248, 241, .16); }
  .topbar { gap: 12px; }
  .pnav { order: 3; width: 100%; border-top: 1px solid var(--line); padding-top: 6px; }
  body.portal .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.portal .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.portal .lesson-card { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  body.portal .lesson-card .sticker { grid-row: auto; margin-bottom: 20px; --s: 84px; }
}

@media (max-width: 660px) {
  .ppage { padding: 30px 20px 30px; }
  .phead { padding-bottom: 26px; margin-bottom: 32px; }
  .phead-sub { font-size: 17.5px; }
  .pauthor-side { grid-template-columns: minmax(0, 1fr); }
  .psec-grid { grid-template-columns: minmax(0, 1fr); }
  .pmodel-card { padding: 28px 22px; }
  .psuper-cv { padding: 4px 18px; }
  .psuper-cv li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pmarks { padding: 4px 18px; }
  .plist-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 20px; }
  .pbooks { grid-template-columns: minmax(0, 1fr); }
  .pbook { grid-template-columns: 88px minmax(0, 1fr); padding: 18px; gap: 16px; }
  .pthesis { padding: 22px 22px; }
  .pstats-in { grid-template-columns: minmax(0, 1fr); }
  .pfoot-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .phero-title { font-size: clamp(28px, 7.6vw, 36px); }
  body.portal .cards { grid-template-columns: minmax(0, 1fr); }
  body.portal .card { min-height: 0; }
  body.portal .card-btn { margin-top: 20px; }
  body.portal .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.portal .gate { padding: 28px 16px 30px; }
  body.portal .gate-card { padding: 28px 22px 24px; }
  body.portal .lesson { padding: 26px 16px 20px; }
  body.portal .lesson-card { padding: 28px 24px; }
  body.portal .folders { grid-template-columns: minmax(0, 1fr); }
  body.portal .panel { padding: 28px 16px 20px; }
  body.portal .save-bar { border-radius: 20px; }
  body.portal .steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Bosqich qatori ikki satrda: tepada belgi, nomi va havola; ostida
     chiziq, sanoq va ball. Ilgari har biri alohida satrga tushib, qator
     ekranning yarmini egallardi. */
  body.portal .stage-row { row-gap: 10px; }
  body.portal .stage-row .sticker { order: 1; }
  body.portal .stage-row-name { order: 2; flex: 1 1 0; }
  body.portal .stage-row-go { order: 3; margin-left: auto; }
  body.portal .meter { order: 4; flex: 1 1 100%; min-width: 0; }
  body.portal .stage-row-num { order: 5; }
  body.portal .stage-row .pill { order: 6; margin-left: auto; }
}

/* Telefonda asboblar qatori qisqaradi (lesson-navigation.css): ism va
   orqaga havolasi yashiriladi — mavzu nomi "Dars yo'li" ichida qoladi. */
@media (max-width: 620px) {
  body.is-task .stage-bar .stage-who,
  body.is-task .stage-bar > .back { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pcycle-arc { animation: none; stroke-dashoffset: 0; }
  .js .pcycle-node,
  .js .pcycle-tip { animation: none; opacity: 1; }
  .psec::before,
  .pnav a::after { transition: none; }
  body.portal .btn:hover,
  body.portal a.card:hover,
  .psec:hover,
  body.portal .folder--open:hover { transform: none; }
  .pfoot-nav a:hover { padding-left: 0; }
}