/* Shriftlar (2026-11-04, foydalanuvchi talabi: hamma telefonda bir xil): loyiha ichida, tashqi so'rov yo'q. Manrope: ilova; STIX Two Text: savol matni (formulalar va PDF muqovasi bilan bir oila). ornatish/YUKLAMALAR.md */
@font-face { font-family: "Manrope"; src: url("vendor/fonts/manrope-5.3.0.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("vendor/fonts/stix-two-text-5.3.0.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
:root {
  --ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --qf: "STIX Two Text", "Times New Roman", Georgia, serif;
  /* Kobalt va oltin. Ko'zga yumshoq: sof oq/qora emas (matn/fon ~14:1), oltin faqat urg'u. */
  color-scheme: light;
  --bg: #FAF7F0;              /* iliq qog'oz rangi (2026-10-20, foydalanuvchi tanlovi; mindful.so uslubi) */
  --card: #FFFFFF;
  --text: #1B2033;
  --hint: #646A7E;
  --accent: #34498B;
  --on-accent: #FFFFFF;
  --line: #ECE4D2;
  --top: #EFE6D2;             /* yuqori qism va Telegram sarlavhasi: to'qroq qum rangi; ostidagi qog'oz varaq egri chiziq bilan chiqadi (kobaltdagidek ikki rang) */
  --on-top: #1B2033;
  --gold: #D9A94E;
  --on-gold: #2A1D00;
  --gold-deep: #6B4A0E;
  --promo-from: #FCEFCF;      /* oltin banner: yumshoq issiq gradient */
  --promo-to: #F2D58C;
  --promo-text: #5A3C05;
  --ok: #1A6B41;
  --bad: #9E342E;
  --shadow: 0 2px 10px rgba(30, 40, 90, .07);
  --soft: color-mix(in srgb, var(--accent) 12%, var(--card));
  --gold-soft: color-mix(in srgb, var(--gold) 28%, var(--card));
  --ok-soft: color-mix(in srgb, var(--ok) 16%, var(--card));
  --bad-soft: color-mix(in srgb, var(--bad) 14%, var(--card));
  --nav-h: 60px;
  /* To'liq ekran rejimida ilova tizim paneli (tepada holat qatori, pastda Android tugmalari) ostiga ham chiqadi: Telegram aytgan bo'sh joylar */
  --sat: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --sab: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1426;
  --card: #172038;
  --text: #E8EAF3;
  --hint: #9BA3BF;
  --accent: #9DB0E8;
  --on-accent: #10162A;
  --line: #26304F;
  --top: #172038;
  --on-top: #E8EAF3;
  --gold: #E3B965;
  --gold-deep: #F0CF8B;
  --promo-from: #3A3120;
  --promo-to: #2B2517;
  --promo-text: #F0CF8B;
  --ok: #7CD2A3;
  --bad: #F09B96;
  --shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0E1426; --card: #172038; --text: #E8EAF3; --hint: #9BA3BF; --accent: #9DB0E8; --on-accent: #10162A; --line: #26304F;
    --top: #172038; --on-top: #E8EAF3; --gold: #E3B965; --gold-deep: #F0CF8B; --promo-from: #3A3120; --promo-to: #2B2517; --promo-text: #F0CF8B;
    --ok: #7CD2A3; --bad: #F09B96; --shadow: 0 2px 10px rgba(0, 0, 0, .28);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 500 16px/1.45 var(--ui); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
p { margin: 0; }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--top); }

/* ---------- yuqori qism (Telegram sarlavhasi bilan bir xil rang) ---------- */
.top { position: relative; background: var(--top); color: var(--on-top); padding: calc(6px + var(--sat)) 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.top.compact { padding-bottom: 34px; }
/* Asosiy sahifa: ixcham tepa (salomlashishsiz), kobalt qism ~240 px dan ~150 px ga */
.top.home { gap: 12px; padding-bottom: 34px; }
/* Nom faqat to'liq ekran rejimida (Telegram o'z sarlavhasini chizmaganda): Telegram tugmalari («Yopish», ⌄ ⋮) orasida, ular bilan bir qatorda */
.ttl { display: none; position: absolute; left: 0; right: 0; top: var(--tg-safe-area-inset-top, 0px); height: var(--tg-content-safe-area-inset-top, 0px); padding: 0 92px; overflow: hidden; align-items: center; justify-content: center; pointer-events: none; }
.ttl span { font-size: clamp(12px, 3.8vw, 16px); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--on-top); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fs .ttl { display: flex; }
.brand { display: flex; align-items: center; justify-content: space-between; }
.logo { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--gold); color: var(--top); display: flex; align-items: center; justify-content: center; }
.logo .mark { width: 28px; height: 28px; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--on-top) 8%, transparent); color: var(--on-top); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; padding: 0; overflow: hidden; font-family: inherit; -webkit-appearance: none; appearance: none; }
button.avatar { cursor: pointer; }
button.avatar:active { opacity: .8; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.big { width: 76px; height: 76px; font-size: 26px; background: var(--soft); color: var(--accent); }
.hello { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.2px; }
.top .sub { font-size: 14px; color: var(--on-top); opacity: .78; margin-top: 2px; }

/* ---------- asosiy oq qism: yuqoridan yumaloq burchak bilan chiqib turadi ---------- */
.sheet { flex: 1; background: var(--bg); border-radius: 24px 24px 0 0; margin-top: -24px; padding: 18px 16px calc(var(--nav-h) + 26px + var(--sab)); display: flex; flex-direction: column; gap: 20px; position: relative; }
.page.full { flex: 1; background: var(--bg); padding: calc(24px + var(--sat)) 16px calc(24px + var(--sab)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; }

.sub { font-size: 14px; color: var(--hint); }
.label { font-size: 17px; font-weight: 700; letter-spacing: -.1px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.label::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--gold); }
.card { background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }

/* ---------- tugallanmagan test ---------- */
.ring { --p: 40; width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), color-mix(in srgb, var(--accent) 16%, var(--card)) 0); position: relative; font-weight: 700; font-size: 15px; color: var(--accent); }
.ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); }
.ring span { position: relative; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; font-weight: 600; cursor: pointer; background: var(--accent); color: var(--on-accent); }
.btn.gold { background: var(--gold); color: var(--on-gold); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.plain { background: var(--card); color: var(--text); font-weight: 500; box-shadow: var(--shadow); }
.btn:active { opacity: .8; }
.btns { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }

/* ---------- oltin banner (yangi test) ---------- */
  background: linear-gradient(100deg, var(--promo-from), var(--promo-to)); color: var(--promo-text); box-shadow: var(--shadow); }

/* ---------- fanlar (hikoya shaklidagi doiralar) ---------- */

/* ---------- testlar ro'yxati ---------- */
.list { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.item + .item { border-top: 1px solid var(--line); }
.item .tile { width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--soft); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.item .m { flex: 1; min-width: 0; }
.item .tt { font-weight: 600; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item .ss { font-size: 13px; color: var(--hint); }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 10px; white-space: nowrap; font-weight: 600; }
.pill.new { background: var(--gold); color: var(--on-gold); }
.pill.res { background: var(--gold-soft); color: var(--gold-deep); }
.pill.prog { background: var(--soft); color: var(--accent); }

/* «Testlar» bo'limi: qidiruv, fan chiplari, holat filtri */
.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); color: var(--hint); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.search input::placeholder { color: var(--hint); }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.chip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--soft); }
.seg button { flex: 1; padding: 8px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--hint); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.nw { white-space: nowrap; }
.count { margin: 0 2px 8px; font-size: 13px; color: var(--hint); }


.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bubble { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--soft); color: var(--accent); border: 2px solid var(--gold); }
.bubble.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.bubble .icon { width: 30px; height: 30px; }
.title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.note { font-size: 14px; color: var(--hint); max-width: 320px; }

.empty { text-align: center; padding: 26px 16px; border: 1.5px dashed var(--line); border-radius: 18px; background: var(--card); }
.empty .e { width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 50%; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.empty .title { font-size: 17px; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px; font-size: 15px; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv span:first-child { color: var(--hint); }
.me { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

/* ---------- pastki bo'lim paneli ---------- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: var(--sab); z-index: 4; }
.nav button { flex: 1; min-height: var(--nav-h); border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--hint); cursor: pointer; }
.nav button .pl { width: 54px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.nav button.on { color: var(--accent); font-weight: 600; }
.nav button.on .pl { background: var(--gold-soft); }

.skel { background: linear-gradient(90deg, var(--card) 25%, color-mix(in srgb, var(--card) 70%, var(--bg)) 50%, var(--card) 75%); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 18px; }
@keyframes sh { to { background-position: -200% 0; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px + var(--sab)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px); text-align: center; z-index: 6; }

/* ---------- Admin: test ko'rinishi (savollar, formulalar, chizmalar) ---------- */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); color: var(--text); font-size: 14px; line-height: 1.4; }
.banner .icon { color: var(--gold-deep); margin-top: 1px; }
.banner span { color: var(--hint); font-size: 13px; }
.qcard { background: var(--card); border-radius: 20px; padding: 16px 16px 18px; box-shadow: var(--shadow); }
.qcard + .qcard { margin-top: 12px; }
.qh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qn { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 16px; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.qn.wide { padding: 0 12px; }
.qn.sm { min-width: 28px; height: 28px; font-size: 14px; background: var(--gold-soft); color: var(--gold-deep); }
.qt { font-size: 13px; font-weight: 600; color: var(--hint); }
.qs { font-family: var(--qf); font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
.gt { margin: 0 0 8px; font-family: var(--qf); font-weight: 600; font-size: 18px; letter-spacing: 0; }
.dm { margin: 12px 0; padding: 2px 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.dm .katex-display { margin: 0; }
.qs .katex, .ov .katex, .mq .katex { font-size: 1.06em; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.opts.one { grid-template-columns: 1fr; }
.opt { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 14px; }
.ol { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--soft); color: var(--accent); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.ov { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; font-family: var(--qf); font-size: 17.5px; font-weight: 400; letter-spacing: 0; }
.fig { margin: 12px 0; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-align: center; }
.fig img { display: block; width: 100%; height: auto; margin: 0 auto; }
.fig.bad { color: var(--bad); font-size: 14px; }
.part { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pl { font-weight: 700; color: var(--accent); padding-top: 1px; }
.ps { flex: 1; min-width: 0; font-family: var(--qf); font-size: 17.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.ps .fld, .ps .inp, .ps button, .ps .kp { font-family: var(--ui); }
.inp { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); color: var(--hint); font-size: 14px; }
.ps .inp { display: block; }
.mlist { margin-top: 10px; }
.mrow { padding: 10px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.mq { font-family: var(--qf); font-size: 17.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.mchips { grid-column: 1 / -1; display: flex; gap: 6px; }
.mc { flex: 1; text-align: center; padding: 7px 0; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--accent); }
.lab { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--hint); }

/* ---------- Admin: javoblar kaliti (belgilash, saqlash, tasdiqlash) ---------- */
button.opt { width: 100%; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.opt:disabled, button.mc:disabled { cursor: default; opacity: .75; }
.opt.on { border-color: var(--gold); background: var(--gold-soft); }
.opt.on .ol { background: var(--gold); color: var(--on-gold); }
button.mc { background: transparent; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.mc.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.qcard.miss { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent), var(--shadow); }
.fld { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: 0; }
.fld:focus { border-color: var(--gold); }
.fld::placeholder { color: var(--hint); }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + var(--sab)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
.sbi { flex: 1; min-width: 0; font-size: 12px; color: var(--hint); line-height: 1.3; }
.sbi b { display: block; font-size: 15px; color: var(--text); }
.btn.sm { width: auto; flex: none; min-height: 42px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- «Testlar»: kategoriya (Hammasi / Original / Namunaviy) ---------- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cats button { padding: 10px 6px 9px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.cats button small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--hint); }
.cats button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); }
.cats button.on small { color: var(--gold-deep); opacity: .85; }
.khint { margin: -4px 2px 0; font-size: 13px; color: var(--hint); }
.kt { margin: 0 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.kt.s { color: var(--hint); font-weight: 700; }
.kt:empty { display: none; }

/* ---------- Talaba: test ishlash, natija, sharh ---------- */
.ex { background: var(--bg); }
.exh { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--sat)) 12px 8px; background: var(--top); color: var(--on-top); }
.exb { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--on-top) 8%, transparent); color: inherit; cursor: pointer; }
.ext { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.ext b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ext b.bad, .ext .bad { color: var(--bad); }
.ext span { font-size: 12px; opacity: .88; }
.ext span i { font-style: normal; }
.exbar { height: 4px; background: color-mix(in srgb, var(--top) 55%, var(--bg)); position: sticky; top: calc(56px + var(--sat)); z-index: 5; }
.exbar i { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.exinfo { margin: 10px 14px 0; padding: 8px 12px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-deep); font-size: 13px; font-weight: 600; text-align: center; }
.exm { padding: 14px 14px calc(104px + var(--sab)); }
.exf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: 1fr 52px auto 1fr; gap: 8px; align-items: center; padding: 10px 12px calc(10px + var(--sab)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
.exn { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 46px; border: 0; border-radius: 14px; background: var(--soft); color: var(--accent); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.exn:disabled { opacity: .4; cursor: default; }
.exfl { width: 52px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 14px; background: transparent; color: var(--hint); cursor: pointer; }
.exfl.on { background: color-mix(in srgb, var(--bad) 16%, var(--card)); border-color: var(--bad); color: var(--bad); }
.exg { min-height: 46px; padding: 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.exg b { font-size: 15px; }
.exg span { font-size: 11px; color: var(--hint); }
.bk { position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, .45); }
.pal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 78vh; overflow-y: auto; background: var(--card); border-radius: 22px 22px 0 0; padding: 14px 14px calc(18px + var(--sab)); }
.ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 17px; }
.ph .exb { background: var(--soft); color: var(--accent); }
.pg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pc { position: relative; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.pc.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); }
.pc.part { border-style: dashed; border-color: var(--gold); }
.pc.cur { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.pc.fl::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.plg { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; font-size: 12px; color: var(--hint); }
.plg span { display: flex; align-items: center; gap: 6px; }
.plg .pc { display: inline-block; width: 18px; height: 18px; border-radius: 6px; }
.kp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kpb { min-width: 40px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--soft); color: var(--accent); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.rules { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.rules li + li { margin-top: 8px; }
.det + .det { margin-top: 12px; }
.det .big { margin: 0; font-size: 28px; font-weight: 800; }
.det .big span { font-size: 15px; font-weight: 500; color: var(--hint); }
.sres { text-align: center; padding: 22px 16px; }
.ring.big { width: 132px; height: 132px; margin: 0 auto 12px; font-size: 30px; font-weight: 800; }
.ring.big::before { inset: 9px; }
.ring.big small { font-size: 15px; font-weight: 500; color: var(--hint); margin-left: 3px; }
.sres .n { margin: 0; font-size: 18px; font-weight: 700; }
.sres .ss { margin: 4px 0 0; font-size: 14px; color: var(--hint); }
.rv { border-left: 4px solid var(--line); }
.rv.ok { border-left-color: var(--ok); }
.rv.bad { border-left-color: var(--bad); }
.rvb { margin-left: auto; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--hint); }
.rvb.ok { background: var(--ok-soft); color: var(--ok); }
.rvb.bad { background: var(--bad-soft); color: var(--bad); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .ol { background: var(--ok); color: var(--card); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .ol { background: var(--bad); color: var(--card); }
.mc.right { background: var(--ok); border-color: var(--ok); color: var(--card); }
.mc.wrong { background: var(--bad); border-color: var(--bad); color: var(--card); }
.jv { margin-top: 8px; padding: 9px 12px; display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 14px; }
.jv span { color: var(--hint); }
.jv.ok { border-color: var(--ok); background: var(--ok-soft); }
.jv.bad { border-color: var(--bad); background: var(--bad-soft); }

/* ---------- Admin: sozlamalar kartasi ---------- */
.sozl { margin-top: 12px; }
.kv2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; }
.kv2 > span:first-child { color: var(--hint); }
.dur input { width: 74px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 16px; text-align: right; outline: 0; }
.dur input:focus { border-color: var(--gold); }
.seg2 { display: flex; gap: 6px; }
.seg2 button { padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg2 button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); }

/* ---------- Talaba faolligi: imtihon sanalari, maqsad, xatolar, statistika, sozlamalar ---------- */
.dr.ok { color: var(--ok); }
.dr.warn { color: var(--bad); font-weight: 700; }
.dr.off { color: var(--hint); }
.lnk { margin-top: 2px; padding: 6px 2px; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lnk .icon { width: 16px; height: 16px; }
.cta { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; text-align: left; border-radius: 14px; border: 1.5px dashed var(--gold); background: var(--gold-soft); color: var(--text); font: inherit; cursor: pointer; }
.cta b { display: block; font-size: 15px; }
.cta span { display: block; margin-top: 2px; font-size: 13px; color: var(--hint); }
.goal { display: flex; align-items: center; gap: 14px; }
.goal .gm { flex: 1; min-width: 0; }
.gt { margin: 0; font-weight: 700; font-size: 15px; }
.gs { margin: 2px 0 0; font-size: 13px; color: var(--hint); }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st { padding: 12px 8px; text-align: center; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.st b { display: block; font-size: 24px; }
.st span { font-size: 12px; color: var(--hint); }
.wk, .trend { display: flex; gap: 8px; margin-top: 4px; }
.wb, .tb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bw { height: 84px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bw i { display: block; width: 100%; max-width: 28px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--soft); }
.wb .bw i.ok { background: var(--gold); }
.tb .bw i { background: var(--accent); opacity: .85; }
.wb b, .tb b { font-size: 11px; color: var(--hint); min-height: 14px; }
.wb span { font-size: 11px; color: var(--hint); }
.fb + .fb { margin-top: 12px; }
.fh { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 15px; }
.tr { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.tr i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--accent)); }
.card .chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.sw { position: relative; width: 48px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 14px; background: var(--line); cursor: pointer; transition: background .2s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.sw.on { background: var(--gold); }
.sw.on i { transform: translateX(20px); }
.pal.big { max-height: 88vh; }
.item.sn { cursor: pointer; align-items: center; }
.item.sn.my { background: var(--gold-soft); }

/* ---------- Mashq rejimi, yechimlar, «Xato topdim» ---------- */
.chk { margin-top: 14px; }
.fbk { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); font-size: 15px; }
.fbk b { display: block; font-size: 17px; }
.fbk span { display: block; margin-top: 2px; font-size: 13px; color: var(--hint); }
.fbk.ok { border-color: var(--ok); background: var(--ok-soft); }
.fbk.ok b { color: var(--ok); }
.fbk.bad { border-color: var(--bad); background: var(--bad-soft); }
.fbk.bad b { color: var(--bad); }
details.yech { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
details.yech summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--accent); }
details.yech[open] summary { margin-bottom: 8px; }
details.yech .qs { font-size: 15px; line-height: 1.55; }
.rep { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 8px 2px; border: 0; background: transparent; color: var(--hint); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pc.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pc.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.rta, .ytxt { display: block; width: 100%; margin-top: 12px; padding: 10px 12px; resize: none; line-height: 1.4; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: 0; }
.rta:focus, .ytxt:focus { border-color: var(--gold); }
.fld:disabled { opacity: .85; }
.exf > span:empty { display: block; }

/* ---------- Admin: sanalar formasi, xabarlar, yechim tahrirlagichi ---------- */
.fl { display: block; margin-top: 12px; }
.card > .fl:first-child { margin-top: 0; }
.fl span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--hint); }
.tin { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: 0; }
.tin:focus { border-color: var(--gold); }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; align-items: end; }
.g2 > .fl { margin-top: 0; min-width: 0; }
.tin { min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.xb + .xb { margin-top: 10px; }
.xb .tt { margin: 0; font-weight: 700; }
.xb .ss { margin: 4px 0 0; font-size: 13px; color: var(--hint); }
.rn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--soft); font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.rb { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
details.yedit { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--line); }
details.yedit summary { cursor: pointer; font-size: 14px; font-weight: 600; }
details.yedit .yb { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--hint); }
details.yedit .ypre { margin-top: 8px; }
details.yedit .btn { margin-top: 8px; }
.item .tt.tw { display: block; overflow: visible; -webkit-line-clamp: unset; line-height: 1.5; }

/* ---------- Imtihon haqida ma'lumot; ro'yxatdan o'tish ochiq fanlar ajralib turadi ---------- */
/* Ro'yxatdan o'tish ochiq: oq karta, tepasida yashil chiziq (2026-10-20, foydalanuvchi tanlovi «B») */
.item.sn.reg { background: var(--ok-soft); box-shadow: inset 4px 0 0 var(--ok); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.hn { margin-left: 6px; font-size: 12px; color: var(--ok); font-weight: 600; }
.sdet { text-align: center; }
.sdet .sd { margin: 0; font-size: 26px; font-weight: 800; }
.sdet .sd span { font-size: 15px; font-weight: 600; color: var(--hint); }
.sdet .sk { margin: 4px 0 0; font-size: 14px; color: var(--gold-deep); font-weight: 700; }
.warnbox { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--gold); background: var(--gold-soft); font-size: 13px; line-height: 1.45; }
.warnbox b { display: block; margin-bottom: 3px; font-size: 14px; letter-spacing: .04em; color: var(--bad); }
.warnbox span { display: block; }
.sbar { position: sticky; bottom: calc(-18px - var(--sab)); margin: 14px -14px calc(-18px - var(--sab)); padding: 10px 14px calc(18px + var(--sab)); background: var(--card); border-top: 1px solid var(--line); }

/* ---------- Tanlangan fan ajralib turadi; fan tanlash kartasiga o'tilganda yoritiladi ---------- */
.item.sn.my { box-shadow: inset 4px 0 0 var(--gold); }
.card.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: var(--shadow); } }
.top.nobrand { padding-top: calc(20px + var(--sat)); padding-bottom: 30px; }

/* ---------- Profil rasmi: katta, ustida kamera belgisi (sichqoncha olib borilganda galereya belgisi, telefonda doim ko'rinadigan tugma) ---------- */
.avatar.big { width: 112px; height: 112px; border-width: 3px; font-size: 30px; }
.avwrap { position: relative; width: 112px; height: 112px; margin: 2px auto 4px; }
.avatar.pic { position: relative; width: 112px; height: 112px; }
.avatar.pic .avov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(12, 20, 48, .58); color: #fff; opacity: 0; transition: opacity .18s ease; }
.avatar.pic .avov .icon { width: 28px; height: 28px; }
.avatar.pic .avov small { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
@media (hover: hover) { .avatar.pic:hover .avov, .avatar.pic:focus-visible .avov { opacity: 1; } }
.camb { position: absolute; right: -2px; bottom: 2px; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--bg); background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow); cursor: pointer; }
.camb .icon { width: 18px; height: 18px; }
.camb:active { transform: scale(.94); }
.rpre { display: flex; justify-content: center; margin: 4px 0 12px; }
.kv.ed { width: 100%; align-items: center; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kv.ed > span:last-child { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.kv.ed .icon { width: 16px; height: 16px; color: var(--hint); }
.kv.ed:active { background: var(--soft); }
.kv + .kv.ed { border-top: 1px solid var(--line); }

/* ---------- Server so'rovi cho'zilganda tepada ingichka yuklanish chizig'i ---------- */
.topbar { position: fixed; left: 0; right: 0; top: var(--sat, 0px); height: 3px; z-index: 50; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--gold) 25%, transparent); }
.topbar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--gold); border-radius: 0 2px 2px 0; animation: topbar 1s ease-in-out infinite; }
@keyframes topbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Xabardan ochilgan savol: panel va yoritish ---------- */
.card.repbar { margin-top: 12px; border: 1.5px solid var(--bad); }
.card.repbar .tt { margin: 0; font-weight: 700; }
.card.repbar .ss { margin: 4px 0 0; font-size: 13px; color: var(--hint); }
.qcard.flash { animation: qflash 2.2s ease-out; }
@keyframes qflash { 0%, 65% { box-shadow: 0 0 0 3px var(--bad), var(--shadow); } 100% { box-shadow: var(--shadow); } }

/* ---------- Sarlavha qatori: chapda sarlavha, o'ngda ixtiyoriy tugma (kunduzgi/kechki rejim) ---------- */
.trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.thb { width: 40px; height: 40px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--on-top) 8%, transparent); color: var(--on-top); cursor: pointer; }
.thb .icon { width: 22px; height: 22px; }
.thb:active { opacity: .75; }
.chip.zero { opacity: .62; }
.chip.zero.on { opacity: 1; }

/* ---------- Savolni joyida tahrirlash ---------- */
.edb { margin-left: auto; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--accent); cursor: pointer; }
.edb .icon { width: 18px; height: 18px; }
.qh .qt + .edb { margin-left: auto; }
.tpv { margin: 6px 0 0; padding: 10px 12px; min-height: 40px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--soft); font-size: 15px; line-height: 1.55; overflow-x: auto; }
.tpv.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); font-size: 13px; }
.tpv.v { margin: 0; min-width: 0; flex: 1; display: block; padding: 6px 10px; min-height: 36px; }
.vrow { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.vrow > b { flex: none; width: 24px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.vrow .vin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Chizma (TikZ) kodi tahrirlagichda: kod maydoni, oq fonli ko'rinish (chizma qora chiziqlar bilan), eskirgan ko'rinish */
.ytxt.fcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.35; white-space: pre; overflow: auto; tab-size: 2; }
.tpv.fig:not(.bad) { background: #fff; color: #5b6472; text-align: center; }
.tpv.fig img { display: block; width: 100%; height: auto; margin: 0 auto; }
.tpv.stale img { opacity: .35; }
.mut { opacity: .65; font-size: 13px; }

/* Test yuklash (admin): fayl tanlash maydoni va progress chizig'i */
.upl { position: relative; display: block; margin-top: 10px; padding: 16px 12px; border-radius: 12px; border: 1.5px dashed var(--line); text-align: center; font-weight: 600; cursor: pointer; }
.upl input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ibar { height: 8px; margin: 14px 0 4px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.ibar i { display: block; height: 100%; border-radius: 99px; background: var(--gold); transition: width .3s ease; }

/* Video yechim (YouTube, bosilganda ochiladi) */
.vid { margin-top: 10px; }
.vid .btn { width: 100%; }
.vfr { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }

/* Statistika (stat.js): 3 xil ko'rinish (Panel, Raqam, Reyting). Ranglar faqat ma'no uchun: yashil = o'sish, qizil = pasayish, oltin = tanlangan */
:root { --c1: #34498B; --c2: #D9A94E; --c3: #2E9E8F; --c4: #D9684E; --c5: #8B5CC6; --c6: #9AA3B8; }
:root[data-theme="dark"] { --c1: #9DB0E8; --c2: #E3B965; --c3: #5CC9B8; --c4: #F08E78; --c5: #B993EE; --c6: #7C86A2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --c1: #9DB0E8; --c2: #E3B965; --c3: #5CC9B8; --c4: #F08E78; --c5: #B993EE; --c6: #7C86A2; } }
.fbar { height: 8px; margin: 8px 0 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.fbar i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.sx { padding-bottom: 28px; }
.st-body { display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.sx .g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 0; align-items: stretch; }
.st-body.loading { opacity: .55; }
.sheet.sx { gap: 10px; }
.st-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-nav > div { flex: 1; text-align: center; }
.st-nav b { font-size: 17px; }
.st-nav > button { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.st-nav > button:disabled { opacity: .35; cursor: default; }
.st-bugun { display: block; margin: 2px auto 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.st-opt { display: flex; gap: 8px; align-items: stretch; }
.st-opt .seg { flex: 1.15; }
.st-opt .seg button { padding: 7px 4px; font-size: 12.5px; }
.st-var { flex: 1; display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--soft); }
.st-var button { flex: 1; min-width: 26px; padding: 7px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--hint); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.st-var button.on { flex: 2.6; background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow); }
.st-kpi { margin-top: 0; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); min-width: 0; text-align: left; }
.st-kpi.big { padding: 18px; }
.st-l { margin: 0; font-size: 13px; font-weight: 600; color: var(--hint); }
.st-n { margin: 4px 0 8px; font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.st-n.sm { font-size: 30px; margin-bottom: 6px; }
.st-s { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--hint); }
.st-fan { margin: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 13px; font-weight: 800; }
.dl.up { background: var(--ok-soft); color: var(--ok); }
.dl.down { background: var(--bad-soft); color: var(--bad); }
.dl.flat { background: var(--soft); color: var(--hint); }
.dl.sm { padding: 1px 7px; margin-top: 3px; font-size: 11.5px; }
.st-card { margin-top: 0; padding: 14px 14px 12px; text-align: left; }
.st-u { font-weight: 500; font-size: 12px; color: var(--hint); }
.st-svg { display: block; width: 100%; height: auto; margin-top: 8px; touch-action: manipulation; }
.st-svg rect.b { fill: color-mix(in srgb, var(--accent) 38%, var(--card)); transition: fill .15s; }
.st-svg rect.b.zero { fill: var(--line); }
.st-svg rect.b.sel { fill: var(--gold); }
.st-svg rect.b.now { stroke: var(--gold); stroke-width: 1.5; }
.st-svg text { fill: var(--hint); font-size: 10px; text-anchor: middle; }
.st-svg rect.hit { fill: transparent; cursor: pointer; }
.st-cap { min-height: 20px; margin: 6px 0 0; font-size: 13.5px; text-align: center; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.st-card .label + .st-row { border-top: 0; }
.st-rk { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent); font-size: 12px; }
.st-row .m { flex: 1; min-width: 0; }
.st-rt { display: flex; flex-direction: column; align-items: flex-end; min-width: 54px; }
.st-rt b { font-size: 17px; }
.st-hero { margin-top: 0; text-align: left; padding: 20px 18px 14px; border-radius: 22px; color: #fff; overflow: hidden; background: linear-gradient(145deg, #3B55A8 0%, #263B78 55%, #1B2A5C 100%); box-shadow: 0 8px 24px rgba(30, 45, 110, .28); }
.st-hl { margin: 0; font-size: 13px; font-weight: 600; opacity: .8; }
.st-hn { margin: 6px 0 10px; font-size: 62px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.st-hrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-hs { flex-basis: 100%; font-size: 12px; opacity: .88; }
.st-hero .dl { background: rgba(255, 255, 255, .18); color: #fff; }
.st-svg.area { margin-top: 12px; }
.st-svg.area .ln { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.st-svg.area .mk { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 3 3; }
.st-svg.area .dot { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.st-svg.area text { fill: rgba(255, 255, 255, .72); }
.st-cap.hero { color: #fff; }
.st-mini { display: flex; gap: 8px; }
.st-mini > div { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.st-mini span { display: block; font-size: 11.5px; color: var(--hint); }
.st-mini b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 3px; font-size: 14px; line-height: 1.25; overflow: hidden; }
.st-donut { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.st-donut svg { flex: none; width: 150px; height: 150px; }
.st-donut .dn { fill: var(--text); font-size: 26px; font-weight: 800; text-anchor: middle; }
.st-donut .ds { fill: var(--hint); font-size: 11px; text-anchor: middle; }
.st-leg { flex: 1; min-width: 140px; margin: 0; padding: 0; list-style: none; }
.st-leg li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.st-leg i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.st-leg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-leg b { font-size: 13px; }
.st-strip { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.st-strip > div { display: flex; flex-direction: column; }
.st-strip b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.st-strip span { font-size: 12px; color: var(--hint); }
.st-strip .dd { margin-left: auto; flex-direction: row; }
.st-insight { margin: 0 2px; padding: 9px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-deep); font-size: 13.5px; }
.st-podium { display: flex; align-items: flex-end; gap: 8px; }
.st-pod { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.st-pod.p1 { padding: 20px 6px 16px; border: 1.5px solid var(--gold); background: linear-gradient(180deg, var(--gold-soft), var(--card)); }
.st-pod.p2 { padding-top: 16px; }
.st-pod .md { font-size: 22px; }
.st-pod .em { font-size: 30px; line-height: 1.2; }
.st-pod.p1 .em { font-size: 38px; }
.st-pod .fn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.st-pod .nn { font-size: 12px; color: var(--hint); }
.st-pod .pp { font-size: 15px; font-weight: 800; }
.st-foot { margin: 14px 2px 0; font-size: 12px; text-align: center; color: var(--hint); }
.st-how, .st-zero { margin-top: 10px; }
.st-cap b, .st-insight b, .st-how b, .st-s b { display: inline; font-size: inherit; }
.st-row .tt { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.st-row .ss { margin: 0; font-size: 12.5px; color: var(--hint); }
.st-row .tt.tw { display: block; }

/* Test PDF kartasi (admin): fayl tanlash tugmasi */
.pdfk { margin-top: 12px; padding: 14px; }
/* Admin (2026-11-03): PRO belgisi, PRO cheklovlari kaliti, testni o'chirish tugmasi va bitta test statistikasi */
.pro-t { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--gold-soft); color: var(--gold-deep); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.prok { margin: 12px 0 14px; }
.prok .kv2 { padding-top: 0; }
.prok .kv2 > span:first-child { color: var(--text); }
.prok .ss { font-size: 13px; color: var(--hint); line-height: 1.45; }
.btn.del { color: var(--bad); }
.tst { margin-top: 12px; }
.tst .ss { font-size: 13px; color: var(--hint); line-height: 1.45; margin-top: 8px; }
.tst-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tst-k div { padding: 10px 6px; border-radius: 12px; background: var(--soft); text-align: center; min-width: 0; }
.tst-k b { display: block; font-size: 18px; font-weight: 800; color: var(--accent); }
.tst-k span { display: block; font-size: 11.5px; color: var(--hint); }
.tst-l { margin: 14px 0 8px; font-size: 13px; font-weight: 700; }
.tst-b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 96px; }
.tst-b div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.tst-b i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent); opacity: .8; }
.tst-b b { font-size: 12px; margin-top: 4px; }
.tst-b span { font-size: 10.5px; color: var(--hint); white-space: nowrap; }
.tst-m { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
.tst-m span { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 9px; font-size: 10.5px; color: var(--hint); background: var(--soft); }
.tst-m span b { font-size: 13px; color: var(--text); }
.tst-m .a { background: var(--ok-soft); }
.tst-m .b { background: var(--gold-soft); }
.tst-m .c { background: color-mix(in srgb, var(--bad) 10%, var(--card)); }
.tst-m .d { background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent); }
/* Ustozlar va hisob-kitob (2026-11-03): pul ko'rsatkichlari 2 ustunda, test qatorlari */
.tst-k.ust-k { grid-template-columns: repeat(2, 1fr); }
.tst-k.ust-k b { font-size: 16px; }
.ust-t { cursor: default; }
.ust-t .tt { font-size: 15px; }
.upl2 { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.upl2 input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* AI tushuntirish (PRO): sharhdagi tugma va suhbat oynasi */
.aib { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aib .btn { color: var(--accent); }
.pal.ai { display: flex; flex-direction: column; }
.alog { flex: 1; min-height: 120px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; }
.am { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.am.u { align-self: flex-end; background: var(--soft); color: var(--text); border-bottom-right-radius: 4px; }
.am.a { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.am.a.wait { color: var(--hint); font-style: italic; }
.am .dm { overflow-x: auto; }
.aqol { margin: 4px 0 8px; font-size: 12.5px; color: var(--hint); text-align: center; }
.am.yechm { align-self: stretch; max-width: 100%; background: var(--soft); border: 0; }
.am.yechm b { display: block; margin-bottom: 4px; color: var(--accent); }

/* ---------- Pastki menyu: 5 bo'lim (2026-10-20); o'rtadagi «Imtihon» boshqalar bilan bir xil ---------- */
.nav button { min-width: 0; padding: 0 2px; font-size: 11.5px; }
.nav button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav button .pl { width: 44px; height: 28px; }
.nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 12px; }

/* «Imtihon» bo'limi (soatli imtihonlar hali e'lon qilinmagan holat) */
.exsoon { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 18px 16px 6px; }
.exsoon .title { font-size: 18px; }
.exsoon .note { margin-top: 4px; max-width: none; }
.exrules { list-style: none; margin: 14px 0 0; padding: 0; }
.exrules li { padding: 12px 0; border-top: 1px solid var(--line); }
.exrules b { display: block; font-size: 15px; }
.exrules span { display: block; margin-top: 2px; font-size: 14px; color: var(--hint); line-height: 1.4; }

/* ---------- Qog'oz tepa (2026-10-20, foydalanuvchi tanlovi «4», mindful.so uslubi): qum rangi tepa + egri chiziq bilan chiqadigan qog'oz varaq (kobaltdagidek ikki rang) ---------- */
html[data-theme], html[data-theme] body { background: var(--bg); }
.top .logo { background: #263B78; color: var(--gold); }
.top .sub { color: var(--hint); opacity: 1; }

/* ---------- Tepa fon (2026-11-03, foydalanuvchi qarori: sinov yakunlandi): HAMMA sahifada kobalt GRADIENT (Testlar bo'limidagidek nuqtali), asos oq.
   html[data-tepa="kobalt"] har doim qo'yiladi (index.html va app.js). Eski qog'oz/och ko'k variantlari olib tashlandi. ---------- */
html[data-tepa="kobalt"] { --top: #263B78; --on-top: #FFFFFF; --bg: #FFFFFF; --card: #FFFFFF; --line: #E6E8EE; --hint: #61677A;
  --top-grad: radial-gradient(rgba(255, 255, 255, .15) 1.2px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(155deg, #2F4CA3 0%, #263B78 48%, #1B1F5E 100%); }
html[data-tepa="kobalt"][data-theme="dark"] { --top: #1B2650; --on-top: #F2F4FC; --bg: #0E1426; --card: #172038; --line: #26304F;
  --top-grad: radial-gradient(rgba(255, 255, 255, .1) 1.2px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(155deg, #2A3F86 0%, #1C2A5C 50%, #11163A 100%); }
html[data-tepa="kobalt"] .top { background: var(--top-grad); }
html[data-tepa="kobalt"] .top .ttl, html[data-tepa="kobalt"] .top .hello { color: var(--on-top); }
html[data-tepa="kobalt"] .sheet .card, html[data-tepa="kobalt"] .sheet .list { box-shadow: 0 6px 20px rgba(24, 39, 86, .08), 0 0 0 1px var(--line); }
html[data-tepa="kobalt"] .top .logo { background: var(--gold); color: var(--top); }
html[data-tepa="kobalt"] .top .sub { color: var(--on-top); opacity: .78; }

/* ---------- Testlar bo'limi va undan keyingi ekranlar (tanlangan dizayn, 2026-11-04) ----------
   html[data-dz="grad"]: kobalt gradient tepa (nuqtalar: javob varaqasi doirachalari), ustida suzuvchi oq kartalar.
   html[data-fr="rangli"]: har fanning o'z rangi. Klasslar tz- bilan boshlanadi. */
.tz-app {
  --tz-bg: #F5F6FA; --tz-card: #FFFFFF; --tz-card-on: #FFFFFF; --tz-soft: #F1F3F8; --tz-ink: #141B33; --tz-hint: #6A7189; --tz-line: #E8EBF2;
  --tz-k: #263B78; --tz-kd: #1B2A5C; --tz-kt: #EEF2FB; --tz-kt2: #DDE5F7; --tz-link: #263B78; --tz-bf: #263B78;
  --tz-g: #D9A94E; --tz-gs: #FBF1DB; --tz-gd: #8A6316; --tz-bad: #C9443F; --tz-bads: #FBECEB; --tz-badl: #EDB9B6; --tz-hero: #EEF2FB;
  --tz-sh: 0 8px 24px rgba(24, 39, 86, .09);
  --tz-grad: radial-gradient(rgba(255, 255, 255, .15) 1.2px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(155deg, #2F4CA3 0%, #263B78 48%, #1B1F5E 100%);
  background: var(--tz-bg); color: var(--tz-ink);
}
html[data-theme="dark"] .tz-app {
  --tz-bg: #0E1426; --tz-card: #172038; --tz-card-on: #22305A; --tz-soft: #1D2846; --tz-ink: #E8EAF3; --tz-hint: #9BA3BF; --tz-line: #26304F;
  --tz-k: #3A55A8; --tz-kd: #C9D5F7; --tz-kt: rgba(157, 176, 232, .14); --tz-kt2: rgba(157, 176, 232, .3); --tz-link: #A9BBEE; --tz-bf: #7E97E0;
  --tz-g: #E3B965; --tz-gs: rgba(227, 185, 101, .16); --tz-gd: #F0CF8B; --tz-bad: #F09B96; --tz-bads: rgba(240, 155, 150, .14); --tz-badl: rgba(240, 155, 150, .4); --tz-hero: #1A2547;
  --tz-sh: 0 8px 24px rgba(0, 0, 0, .28);
  --tz-grad: radial-gradient(rgba(255, 255, 255, .1) 1.2px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(155deg, #2A3F86 0%, #1C2A5C 50%, #11163A 100%);
}

/* fan ranglari: har fan elementida data-s; o'zgaruvchilar shu elementning o'zida hisoblanadi */
[data-s="mat"] { --c: #3D5BA9; } [data-s="fiz"] { --c: #6A55B0; } [data-s="kim"] { --c: #2E8C83; } [data-s="bio"] { --c: #4E8A4F; } [data-s="tar"] { --c: #A0613B; }
[data-s="geo"] { --c: #2F7FA6; } [data-s="ona"] { --c: #B04A6A; } [data-s="huq"] { --c: #5E6B85; } [data-s="mus"] { --c: #9A4E9C; } [data-s="bosh"] { --c: #C08A2E; } [data-s="boshqa"] { --c: #5E6B85; }
html[data-fr="rangli"] [data-s] { --hb: var(--c); --hi: #FFFFFF; --tb: color-mix(in srgb, var(--c) 13%, var(--tz-card)); --ti: var(--c); --st: var(--c); }
html[data-theme="dark"][data-fr="rangli"] [data-s] { --tb: color-mix(in srgb, var(--c) 28%, var(--tz-card)); --ti: color-mix(in srgb, var(--c) 45%, #FFFFFF); --st: color-mix(in srgb, var(--c) 45%, #FFFFFF); }

/* tepa qism */
.tz-hd { position: relative; padding: calc(10px + var(--sat)) 20px 0; }
.tz-app .ttl span { color: inherit; }
html[data-dz="grad"] .tz-hd { color: #FFFFFF; background: var(--tz-grad); padding-bottom: 74px; }
.tz-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.tz-bar b { font-size: 17px; font-weight: 700; letter-spacing: -.1px; }
.tz-btns { display: flex; gap: 8px; margin-left: auto; }            /* «Testlar» yozuvi olib tashlandi (2026-11-03): qidiruv o'ngda qoladi */
.tz-ib { position: relative; width: 40px; height: 40px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--tz-soft); color: var(--tz-link); }
.tz-ib .icon { width: 20px; height: 20px; }
.tz-ib.on { background: var(--tz-k); color: #FFFFFF; }
.tz-ib.dot::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tz-g); box-shadow: 0 0 0 2px var(--tz-bg); }
html[data-dz="grad"] .tz-ib { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
html[data-dz="grad"] .tz-ib.on { background: #FFFFFF; color: #263B78; }
html[data-dz="grad"] .tz-ib.dot::after { box-shadow: 0 0 0 2px #2C4594; }
.tz-h { margin: 14px 0 0; font-size: 29px; line-height: 1.12; font-weight: 750; letter-spacing: -.6px; }
.tz-h em { font-style: normal; color: var(--tz-g); }
.tz-hero { margin-top: 10px; padding: 18px; border-radius: 24px; background: var(--tz-hero); display: flex; align-items: center; gap: 12px; }
.tz-hero .tz-h { margin: 0; font-size: 20px; line-height: 1.22; letter-spacing: -.3px; color: var(--tz-kd); }
.tz-hero p { margin-top: 5px; font-size: 13px; color: var(--tz-hint); }
.tz-ill { width: 84px; height: 84px; flex: none; }
.tz-ill .b { fill: var(--tz-kt2); } .tz-ill .k { fill: #263B78; } .tz-ill .k2 { fill: #34498B; } .tz-ill .g { stroke: #D9A94E; fill: none; } .tz-ill .gf { fill: #D9A94E; }
html[data-theme="dark"] .tz-ill .k { fill: #8FA6E6; } html[data-theme="dark"] .tz-ill .k2 { fill: #6F8AD8; }
.tz-q { margin-top: 14px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--tz-soft); color: var(--tz-hint); }
.tz-q .icon { width: 18px; height: 18px; }
.tz-q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--tz-ink); font: inherit; font-size: 16px; }
.tz-q input::placeholder { color: var(--tz-hint); }
html[data-dz="grad"] .tz-q { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); }
html[data-dz="grad"] .tz-q input { color: #FFFFFF; }
html[data-dz="grad"] .tz-q input::placeholder { color: rgba(255, 255, 255, .6); }
.tz-seg { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 12px; background: var(--tz-soft); }
.tz-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--tz-hint); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tz-seg button small { font-size: 12px; font-weight: 500; opacity: .7; }
.tz-seg button.on { background: var(--tz-card-on); color: var(--tz-link); box-shadow: 0 1px 3px rgba(20, 28, 60, .1); }
html[data-dz="grad"] .tz-seg { background: rgba(255, 255, 255, .12); }
html[data-dz="grad"] .tz-seg button { color: rgba(255, 255, 255, .78); }
html[data-dz="grad"] .tz-seg button.on { background: #FFFFFF; color: #263B78; }
.tz-izoh { margin: 8px 2px 0; font-size: 12.5px; opacity: .8; }
.tz-chips { display: flex; gap: 8px; margin: 16px -20px 0; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; }
.tz-chips::-webkit-scrollbar { display: none; }
.tz-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 6px; border: 0; border-radius: 999px; background: var(--tz-soft); color: var(--tz-ink); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tz-chip[data-id="0"] { padding: 0 16px; }
.tz-chip small { font-size: 12px; font-weight: 500; opacity: .6; }
.tz-chip.on { background: var(--tz-k); color: #FFFFFF; }
.tz-chip.zero { opacity: .55; }
.tz-chip.zero.on { opacity: 1; }
html[data-dz="grad"] .tz-chip { background: rgba(255, 255, 255, .13); color: #FFFFFF; }
html[data-dz="grad"] .tz-chip.on { background: #FFFFFF; color: #263B78; }
.tz-ci { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--hb); color: var(--hi); }
.tz-ci .icon { width: 14px; height: 14px; stroke-width: 2; }

/* ro'yxat */
.tz-body { position: relative; padding: 0 16px calc(var(--nav-h) + 26px + var(--sab)); }
html[data-dz="grad"] .tz-body { margin-top: -52px; }
.tz-det .tz-body { padding-bottom: calc(28px + var(--sab)); }
.tz-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 14px; background: var(--tz-card); box-shadow: var(--tz-sh); }
.tz-tabs button { flex: 1; padding: 8px 0; border: 0; border-radius: 10px; background: none; color: var(--tz-hint); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tz-tabs button.on { background: var(--tz-kt); color: var(--tz-link); }
.tz-son { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 4px 8px; font-size: 13px; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.tz-toza { padding: 4px 0; border: 0; background: none; color: var(--tz-link); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tz-sk { margin-bottom: 12px; border-radius: 20px; }
.tz-yana { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-bottom: 12px; border: 0; border-radius: 14px; background: var(--tz-card); color: var(--tz-link); font: inherit; font-size: 14px; font-weight: 700; box-shadow: var(--tz-sh); cursor: pointer; }
.tz-yana small { font-size: 12.5px; font-weight: 500; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.tz-c { display: block; margin-bottom: 12px; padding: 16px; border-radius: 20px; background: var(--tz-card); box-shadow: var(--tz-sh); text-align: left; cursor: pointer; transition: transform .12s; }
.tz-c:active { transform: scale(.985); }
.tz-c:focus-visible, .tz-yana:focus-visible, .tz-chip:focus-visible, .tz-tabs button:focus-visible, .tz-ib:focus-visible, .tz-b:focus-visible, .tz-lk:focus-visible, .tz-pl:focus-visible { outline: 2px solid var(--tz-link); outline-offset: 2px; }
.tz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 26px; font-size: 12.5px; }
.tz-fan { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--st); }
.tz-fi { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb); color: var(--ti); }
.tz-fi .icon { width: 15px; height: 15px; stroke-width: 2; }
.tz-kat { padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--tz-hint); background: var(--tz-soft); white-space: nowrap; }
.tz-kat.org { color: var(--tz-gd); background: var(--tz-gs); }
.tz-bd { margin-left: auto; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tz-bd.new { background: var(--tz-g); color: #2A1D00; }
.tz-bd.prog, .tz-bd.res { background: var(--tz-kt); color: var(--tz-link); }
.tz-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 9px 0 5px; font-size: 17px; font-weight: 700; line-height: 1.28; letter-spacing: -.2px; color: var(--tz-ink); }
.tz-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.tz-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tz-meta .icon { width: 15px; height: 15px; }
.tz-b { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 44px; margin-top: 14px; border: 0; border-radius: 13px; background: var(--tz-k); color: #FFFFFF; font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; }
.tz-b .icon { width: 15px; height: 15px; }
.tz-b.l { background: var(--tz-kt); color: var(--tz-link); }
.tz-b:active, .tz-pl:active { opacity: .85; }
.tz-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.tz-ft b { font-size: 16px; color: var(--tz-ink); }
.tz-lnk { display: inline-flex; align-items: center; gap: 6px; color: var(--tz-link); font-weight: 650; }
.tz-cnt { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tz-bads); color: var(--tz-bad); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* yumshoq: kartalar qator ko'rinishida, chapda fan belgisi, o'ngda tugma */
.tz-tile { width: 48px; height: 48px; flex: none; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb); color: var(--ti); box-shadow: 0 2px 6px rgba(38, 59, 120, .08); }
.tz-tile .icon { width: 24px; height: 24px; }
.tz-tile.lg { width: 56px; height: 56px; border-radius: 18px; }
.tz-tile.lg .icon { width: 28px; height: 28px; }
.tz-m { flex: 1; min-width: 0; }
.tz-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: 12px; font-weight: 600; color: var(--tz-hint); }
.tz-sub .tz-kat { padding: 1px 6px; font-size: 11px; }
.tz-sub .tz-bd { margin-left: 0; padding: 1px 6px; font-size: 11px; }
.tz-res { display: inline-flex; align-items: baseline; gap: 2px; font-size: 13px; font-weight: 600; color: var(--tz-link); font-variant-numeric: tabular-nums; }
.tz-res b { font-size: 15px; }
.tz-res em { margin-left: 8px; font-style: normal; font-weight: 500; color: var(--tz-hint); }
.tz-pl { flex: none; padding: 9px 15px; border: 0; border-radius: 999px; background: var(--tz-k); color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tz-pl.l { background: var(--tz-card-on); color: var(--tz-link); box-shadow: inset 0 0 0 1.5px var(--tz-kt2); }

.tz-bos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 20px 24px; border-radius: 20px; background: var(--tz-card); box-shadow: var(--tz-sh); text-align: center; }
.tz-bos-i { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tz-kt); color: var(--tz-link); }
.tz-bos-t { font-size: 16px; font-weight: 650; }
.tz-bos-n { max-width: 280px; font-size: 14px; color: var(--tz-hint); }
.tz-bos .tz-toza, .tz-bos .btn { margin-top: 10px; }

/* pastki menyu Testlar ekranlarida: fon va faol belgi kobalt tusida */
.tz-app .nav { background: var(--tz-card-on); border-top-color: var(--tz-line); }
.tz-app .nav button { color: var(--tz-hint); }
.tz-app .nav button.on { color: var(--tz-link); }
.tz-app .nav button.on .pl { background: var(--tz-kt); }
.tz-ym { display: flex; gap: 10px; font-size: 13px; color: var(--tz-hint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* test tafsiloti */
html[data-dz="grad"] .tz-det .tz-hd { padding-bottom: 72px; }
.tz-back { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 6px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 600; opacity: .9; cursor: pointer; }
.tz-back .icon { width: 20px; height: 20px; }
.tz-dhead { margin-top: 8px; display: flex; align-items: flex-start; gap: 14px; }
.tz-dm { flex: 1; min-width: 0; }
.tz-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tz-dt { margin: 10px 0 8px; font-size: 25px; line-height: 1.18; font-weight: 750; letter-spacing: -.4px; text-wrap: balance; }
html[data-dz="grad"] .tz-tags .tz-fan { height: 27px; padding: 0 10px 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 12.5px; }
html[data-dz="grad"] .tz-tags .tz-fi { width: 20px; height: 20px; border-radius: 50%; background: var(--hb); color: var(--hi); }
html[data-dz="grad"] .tz-tags .tz-fi .icon { width: 12px; height: 12px; }
html[data-dz="grad"] .tz-tags .tz-kat { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); }
html[data-dz="grad"] .tz-tags .tz-kat.org { background: rgba(217, 169, 78, .22); color: #F2D28F; }
html[data-dz="grad"] .tz-hd .tz-meta { color: rgba(255, 255, 255, .74); }
.tz-card { margin-bottom: 12px; padding: 16px; border-radius: 20px; background: var(--tz-card); box-shadow: var(--tz-sh); }
.tz-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tz-r1 h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.tz-r1 span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tz-hint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tz-r1 .icon { width: 14px; height: 14px; align-self: center; }
.tz-ds { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--tz-hint); }
.tz-lk { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px; margin-top: 8px; border: 0; border-radius: 10px; background: none; color: var(--tz-link); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.tz-lk .icon { width: 17px; height: 17px; }
.tz-lk:active { background: var(--tz-kt); }
.tz-st3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tz-line); text-align: center; }
.tz-st3 b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.tz-st3 span { font-size: 12px; color: var(--tz-hint); }
.tz-st3 .ok { color: var(--tz-link); } .tz-st3 .no { color: var(--tz-bad); }
.tz-qoida { margin-top: 8px; border-top: 1px solid var(--tz-line); }
.tz-qoida summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 0; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--tz-hint); cursor: pointer; }
.tz-qoida summary::-webkit-details-marker { display: none; }
.tz-qoida summary::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.tz-qoida[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.tz-qoida ul { margin: 10px 0 2px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--tz-ink); }
.tz-qoida li + li { margin-top: 6px; }
.tz-qoida li::marker { color: var(--tz-g); }

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .tz-c, .tz-qoida summary::after { transition: none; }
  .tz-c:active { transform: none; }
}

/* PRO (2026-11-03, foydalanuvchi tanlovi: karta — 1-variant «Oltin toj», bosilganda — 2-variant pastdan oyna, «Batafsil» — 1-variant to'liq sahifa).
   Klasslar pr- bilan boshlanadi. Faqat ko'rinish: kirishni server tekshiradi. */
.pr-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1.5; white-space: nowrap; }
.pr-tag .icon { width: 12px; height: 12px; stroke-width: 2.3; }
.pr-tag.sm { margin-right: 6px; padding: 0 6px; font-size: 10.5px; vertical-align: 1px; }
.tz-app { --pr-ch: color-mix(in srgb, var(--tz-g) 55%, transparent); }
.tz-c.pr { box-shadow: 0 0 0 1.5px var(--pr-ch), var(--tz-sh); }
.tz-c.pr .tz-bd.new { background: var(--tz-kt); color: var(--tz-link); }
.tz-b.pr, .tz-b.pr.l { background: var(--tz-gs); color: var(--tz-gd); box-shadow: inset 0 0 0 1.5px var(--pr-ch); }
.tz-pl.pr { display: inline-flex; align-items: center; gap: 4px; background: var(--tz-gs); color: var(--tz-gd); box-shadow: inset 0 0 0 1.5px var(--pr-ch); }
.tz-pl.pr .icon { width: 13px; height: 13px; }
/* pastdan chiqadigan oyna */
.pr-shh { display: flex; align-items: center; gap: 12px; }
.pr-shh .m { flex: 1; min-width: 0; }
.pr-shh b { display: block; font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.pr-shh small { display: block; margin-top: 2px; color: var(--hint); font-size: 12.5px; }
.pr-ic { width: 48px; height: 48px; flex: none; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: #263B78; color: #E3B965; }
.pr-ic .icon { width: 24px; height: 24px; }
.pr-li { list-style: none; display: grid; gap: 9px; margin: 14px 0 0; padding: 0; font-size: 14px; }
.pr-li li { display: flex; align-items: center; gap: 10px; }
.pr-li .icon { width: 19px; height: 19px; flex: none; color: var(--accent); }
.pr-tez { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--accent); font-size: 13px; }
.pr-tez > span:first-child { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 800; }
.pr-lnk { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
/* to'liq sahifa */
html .tz-app .pr-hd { color: #FFFFFF; background: var(--tz-grad); padding-bottom: 64px; }
.pr-hd .tz-back { color: #FFFFFF; }
.pr-hero { padding: 4px 0 0; text-align: center; }
.pr-big { width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: #D9A94E; color: #1B1F5E; }
.pr-big .icon { width: 32px; height: 32px; }
.pr-hero h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.pr-hero h1 em { font-style: normal; color: #E3B965; }
.pr-hero p { margin: 4px 0 0; font-size: 13.5px; opacity: .85; }
html .pr-page .tz-body { margin-top: -46px; }
.pr-li.katta { gap: 14px; margin: 2px 0 4px; }
.pr-li.katta li { align-items: flex-start; }
.pr-li.katta .icon { width: 21px; height: 21px; color: #B8872A; }
html[data-theme="dark"] .pr-li.katta .icon { color: var(--tz-g); }
.pr-li.katta b { display: block; font-size: 14.5px; }
.pr-li.katta small { display: block; margin-top: 1px; color: var(--tz-hint); font-size: 12.5px; }
.pr-tez.katta { align-items: flex-start; padding: 12px; background: var(--tz-gs); color: var(--tz-gd); }
.pr-tez.katta .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pr-tez.katta > span:first-child, .pr-tez.katta span { flex: 1; padding: 0; background: none; color: inherit; font-size: 13px; font-weight: 400; }
.pr-faol { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 12px; border-radius: 12px; background: var(--tz-kt); color: var(--tz-link); font-size: 14px; }
.pr-faol .icon { width: 20px; height: 20px; flex: none; }
.pr-not { margin: 12px 0 0; color: var(--tz-hint); font-size: 12.5px; }
/* Profilim: PRO kartasi */
.pr-me { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #2F4CA3, #263B78 55%, #1B1F5E); color: #FFFFFF; text-align: left; font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.pr-me .pr-ic { width: 44px; height: 44px; border-radius: 14px; background: #D9A94E; color: #1B1F5E; }
.pr-me .m { flex: 1; min-width: 0; }
.pr-me b { display: block; font-size: 15.5px; font-weight: 750; }
.pr-me small { display: block; margin-top: 2px; color: #E3B965; font-size: 12.5px; }
.pr-me > .icon { width: 18px; height: 18px; opacity: .8; }
.pr-me:active { opacity: .9; }

/* Asosiy ekran tepasi (2026-11-03): ko'rsatkichlar o'rniga almashuvchi motivatsion yozuv, «Sahna» usuli (foydalanuvchi tanlovi):
   so'zlar pastdan birma-bir ko'tariladi (--i: so'z tartibi), keyin yuqoriga so'nadi. Klasslar hm- bilan. */
.top.home { gap: 10px; padding-bottom: 42px; }
.hm-h { display: grid; margin: 8px 0 0; min-height: 2.24em; font-size: 28px; line-height: 1.12; font-weight: 750; letter-spacing: -.6px; color: var(--on-top); }   /* grid: qatlamlar (.q) ustma-ust */
.hm-h em { font-style: normal; color: var(--gold); }
.hm-h > .q { grid-area: 1 / 1; }
.hm-w { display: inline-block; will-change: transform, opacity; }  /* harakat app.js sahna() da (Web Animations, faqat transform/opacity) */
@media (prefers-reduced-motion: reduce) { .hm-dots i { transition: none; } }
.hm-dots { display: flex; gap: 5px; }
.hm-dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--on-top) 30%, transparent); transition: width .3s, background .3s; }
.hm-dots i.on { width: 18px; background: var(--gold); }

/* Avatar yonida PRO (2026-11-03, «Toj avatarda»): faol — avatar toj kiyadi va ostida «PRO»; aks holda toj tugmasi (PRO sahifasiga) */
.brand.pro { padding-top: 8px; }
.brand-r { display: flex; align-items: center; gap: 10px; }
.av-w { position: relative; display: inline-flex; }
.brand.pro .avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.av-toj { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-8deg); line-height: 0; pointer-events: none; }
.av-toj .icon { width: 17px; height: 17px; fill: #E3B965; stroke: #B8872A; stroke-width: 1.4; }
.av-pro { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 5px; background: var(--gold); color: var(--on-gold); font-size: 8.5px; font-weight: 800; font-style: normal; letter-spacing: .05em; line-height: 1.55; pointer-events: none; }
.toj-b { position: relative; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--on-top) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 65%, transparent); color: var(--gold); cursor: pointer; }
.toj-b .icon { width: 19px; height: 19px; }
.toj-b i { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #2A3F8F; }
.toj-b:active { opacity: .8; }

/* Asosiy ekran (2026-11-03 qayta dizayn, foydalanuvchi tasdiqladi): Testlar bo'limi uslubi — kobalt tepaga suzib chiqqan oq kartalar. Klasslar hm- bilan. */
.hm-app .top.home { padding-bottom: 66px; }
.hm-body { position: relative; margin-top: -46px; padding: 0 16px calc(var(--nav-h) + 26px + var(--sab)); }
.hm-c { display: block; width: 100%; margin-bottom: 12px; padding: 14px; border: 0; border-radius: 20px; background: var(--tz-card); box-shadow: var(--tz-sh); color: var(--tz-ink); text-align: left; font: inherit; }
button.hm-c { cursor: pointer; transition: transform .12s; }
button.hm-c:active, .hm-fan:active { transform: scale(.985); }
.hm-row { display: flex; align-items: center; gap: 12px; }
.hm-row .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-row .m small { font-size: 12px; font-weight: 600; color: var(--tz-hint); }
.hm-row .m b { font-size: 15px; font-weight: 750; line-height: 1.3; }
.hm-row .m .s { font-size: 12.5px; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.hm-row .m .s.f { display: inline-flex; align-items: center; gap: 4px; color: #B8872A; font-weight: 650; }
html[data-theme="dark"] .hm-row .m .s.f { color: var(--tz-g); }
.hm-row .m .s .icon { width: 14px; height: 14px; }
.hm-btn > .icon:last-child { width: 18px; height: 18px; flex: none; color: var(--tz-hint); }
.hm-ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--tz-kt); color: var(--tz-link); }
.hm-ic .icon { width: 21px; height: 21px; }
.hm-ic.g { background: var(--tz-gs); color: var(--tz-gd); }
.hm-cnt { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--tz-bads); color: var(--tz-bad); font-size: 12px; font-weight: 700; }
.hm-ring { width: 54px; height: 54px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--tz-k) calc(var(--p) * 1%), var(--tz-kt) 0); }
.hm-ring.g { background: conic-gradient(var(--tz-g) calc(var(--p) * 1%), var(--tz-gs) 0); }
.hm-ring > span { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tz-card); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hm-ring small { font-size: 10px; font-weight: 650; color: var(--tz-hint); }
.hm-pill { flex: none; padding: 9px 15px; border: 0; border-radius: 999px; background: var(--tz-k); color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.hm-sh { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.hm-sh h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.2px; color: var(--tz-ink); }
.hm-lnk { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none; color: var(--tz-link); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.hm-lnk .icon { width: 15px; height: 15px; }
.hm-fanlar, .hm-strip { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 14px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
.hm-fanlar::-webkit-scrollbar, .hm-strip::-webkit-scrollbar { display: none; }
.hm-fan { flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border: 0; border-radius: 18px; background: var(--tz-card); box-shadow: var(--tz-sh); color: var(--tz-ink); font: inherit; cursor: pointer; scroll-snap-align: start; transition: transform .12s; }
.hm-fan b { margin-top: 4px; min-height: 2.4em; font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-fan small { font-size: 10.5px; color: var(--tz-hint); }
.hm-fan.zero { opacity: .55; }
.hm-fi { width: 40px; height: 40px; flex: none; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb); color: var(--ti); }
.hm-fi .icon { width: 21px; height: 21px; stroke-width: 2; }
.hm-fi.sm { width: 26px; height: 26px; border-radius: 8px; }
.hm-fi.sm .icon { width: 15px; height: 15px; }
.hm-ex { flex: none; width: 236px; margin: 0; display: flex; flex-direction: column; gap: 6px; scroll-snap-align: start; }
.hm-ex.my { box-shadow: 0 0 0 1.5px var(--pr-ch), var(--tz-sh); }
.hm-ext { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; }
.hm-ext b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.hm-ext em { flex: none; margin-left: auto; padding: 2px 6px; border-radius: 6px; background: var(--tz-kt); color: var(--tz-link); font-size: 10.5px; font-style: normal; font-weight: 650; }
.hm-exd { margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.hm-kun { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--tz-kt); color: var(--tz-link); font-size: 12px; font-weight: 700; }
.hm-reg { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tz-hint); }
.hm-reg .icon { width: 14px; height: 14px; flex: none; }
.hm-reg.ok { color: var(--ok); }
.hm-reg.warn { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { button.hm-c, .hm-fan { transition: none; } }

/* Testlar va asosiy sahifa sarlavhasi bo'limga kirganda chiqib keladi (2026-11-03): so'zlar pastdan birma-bir; --t: kirishdan beri o'tgan vaqt (manfiy kechikish) —
   ekran qayta chizilsa ham animatsiya o'sha joyidan davom etadi. Faqat transform va opacity. */
@keyframes tz-kir { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
.tz-h.kir .hm-w, .hm-h.kir .hm-w { animation: tz-kir .64s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--t, 0ms) + 120ms + var(--i) * 70ms); }
@media (prefers-reduced-motion: reduce) { .tz-h.kir .hm-w, .hm-h.kir .hm-w { animation: none; } }

/* Javob varaqasi (2026-11-03, foydalanuvchi tanlovi «Chiziqlar»): har maydon bitta ingichka chiziq O'Z JOYIDA, bo'limlar orasida oraliq (.tz-sp),
   ostida bo'lim raqamlari (.tz-bubl) va izoh (.tz-bubk); mayin ranglar. */
.tz-app { --bub-o: #4A66B8; --bub-x: #F08A82; --bub-e: #E7EAF1; }
html[data-theme="dark"] .tz-app { --bub-o: #7E97E0; --bub-x: #E8807A; --bub-e: rgba(157, 176, 232, .18); }
.tz-bub { display: flex; align-items: stretch; gap: 2px; height: 18px; margin-top: 14px; }
.tz-bub i { flex: 1 1 0; min-width: 2px; border-radius: 3px; }
.tz-bub .tz-sp { flex: 0 0 5px; }
.tz-bub i.f, .tz-bubk i.f { background: var(--bub-o); }
.tz-bub i.x, .tz-bubk i.x { background: var(--bub-x); }
.tz-bub i.e, .tz-bubk i.e { background: var(--bub-e); }
.tz-det .tz-bub { height: 22px; }
.tz-bubl { display: flex; gap: 2px; margin-top: 4px; font-size: 10px; font-weight: 600; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.tz-bubl > span { min-width: 0; white-space: nowrap; }
.tz-bubl .ox { display: flex; justify-content: space-between; }
.tz-bubl > span + span { padding-left: 7px; }
.tz-bubk { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--tz-hint); }
.tz-bubk span { display: inline-flex; align-items: center; gap: 4px; }
.tz-bubk i { width: 8px; height: 8px; border-radius: 50%; }

/* Soatli imtihonlar (2026-11-04, imtihon.js): kobalt tepa va oq kartalar saqlanadi; asosiy element: hozir ketmoqda kartasi (katta sanoq) va natijadagi daraja shkalasi. */
.im-h { font-size: 27px; text-wrap: balance; }
.im-body { min-height: 120px; }
.im-live { margin-bottom: 12px; padding: 18px 18px 16px; border-radius: 22px; background: var(--tz-card); box-shadow: var(--tz-sh), inset 0 0 0 1.5px var(--tz-g); cursor: pointer; }
.im-lh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--tz-gd); }
.im-lh .pr-tag { margin-left: auto; }
.im-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tz-bad); animation: im-puls 1.6s ease-in-out infinite; }
@keyframes im-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tz-bad) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.im-live h3 { margin: 10px 0 2px; font-size: 20px; line-height: 1.22; font-weight: 750; letter-spacing: -.3px; text-wrap: balance; }
.im-lm { font-size: 13.5px; color: var(--tz-hint); }
.im-cd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 14px; }
.im-cd.l { margin-top: 0; }
.im-cdn { font-size: 40px; line-height: 1; font-weight: 750; letter-spacing: -1.6px; color: var(--tz-kd); font-variant-numeric: tabular-nums; }
.im-cdn.kun { font-size: 30px; letter-spacing: -.6px; white-space: nowrap; }
.im-cd small { font-size: 13px; color: var(--tz-hint); }
.im-qb { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin-top: 14px; padding: 8px 12px; border-radius: 13px; background: var(--tz-kt); color: var(--tz-link); font-size: 14px; font-weight: 650; text-align: center; }
.im-qb .icon { width: 17px; height: 17px; flex: none; }
.im-qb.off { background: var(--tz-soft); color: var(--tz-hint); }
.im-c { display: flex; align-items: flex-start; gap: 14px; }
.im-c.im-y { align-items: center; }
.im-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.im-t { font-size: 15.5px; line-height: 1.28; font-weight: 700; letter-spacing: -.15px; }
.im-s { display: block; font-size: 13px; color: var(--tz-hint); font-variant-numeric: tabular-nums; }
.im-s .pr-tag { margin-left: 6px; vertical-align: 1px; }
.im-q { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; font-weight: 650; color: var(--tz-link); font-variant-numeric: tabular-nums; }
.im-q .icon { width: 14px; height: 14px; }
.im-bg { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 8px; padding: 0 12px; border: 1.5px solid var(--tz-kt2); border-radius: 11px; background: none; color: var(--tz-link); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.im-bg .icon { width: 15px; height: 15px; }
.im-bg.on { border-color: transparent; background: var(--tz-kt); }
.im-bg:active { opacity: .8; }
.im-bg:focus-visible { outline: 2px solid var(--tz-link); outline-offset: 2px; }
.im-bg.keng { display: flex; width: 100%; height: 44px; margin-top: 14px; border-radius: 13px; font-size: 14.5px; }
.im-cal { flex: none; width: 58px; padding: 9px 0 8px; border-radius: 15px; background: var(--tz-k); color: #FFFFFF; text-align: center; }
.im-cal b { display: block; font-size: 23px; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
.im-cal small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; opacity: .85; }
.im-y > .icon { width: 18px; height: 18px; flex: none; color: var(--tz-hint); }
.im-kut { flex: none; font-size: 12px; line-height: 1.25; font-weight: 650; color: var(--tz-gd); text-align: right; }
.im-pball { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.im-pball b { font-size: 21px; line-height: 1.05; font-weight: 750; letter-spacing: -.4px; color: var(--tz-kd); font-variant-numeric: tabular-nums; }
.im-pball small { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--tz-gd); }
.im-bos { text-align: center; padding: 22px 18px; }
.im-bos .t { font-size: 17px; font-weight: 700; }
.im-bos p:not(.t) { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--tz-hint); }
.im-okb { display: inline-flex; margin-bottom: 8px; color: var(--tz-link); }
.im-okb .icon { width: 44px; height: 44px; stroke-width: 1.6; }
.im-bos .im-sarf { margin-top: 12px; color: var(--tz-ink); }
.im-q2 { margin-top: 4px; }
.im-q2 + .hm-sh { margin-top: 18px; }
.tz-card > .tz-b:first-child { margin-top: 0; }
.im-yon { padding: 4px 16px; }
.im-yon .tz-lk { margin-top: 0; }
/* natija */
.im-ntop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.im-big { font-size: 58px; line-height: 1; font-weight: 750; letter-spacing: -2px; color: var(--tz-kd); font-variant-numeric: tabular-nums; }
.im-big small { margin-left: 6px; font-size: 22px; font-weight: 650; letter-spacing: -.3px; color: var(--tz-hint); }
.im-izoh { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--tz-hint); }
.im-seal { flex: none; width: 74px; height: 74px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--tz-kt); color: var(--tz-kd); box-shadow: inset 0 0 0 2px var(--tz-kt2), inset 0 0 0 5px var(--tz-card), inset 0 0 0 6px var(--tz-kt2); }
.im-seal b { font-size: 25px; line-height: 1; font-weight: 800; letter-spacing: -.5px; }
.im-seal small { margin-top: 2px; font-size: 10.5px; font-weight: 600; opacity: .8; }
.im-seal.g { background: var(--tz-gs); color: var(--tz-gd); box-shadow: inset 0 0 0 2px var(--tz-g), inset 0 0 0 5px var(--tz-card), inset 0 0 0 6px var(--tz-g); }
.im-seal.no { background: var(--tz-soft); color: var(--tz-hint); box-shadow: none; }
.im-tx { display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: 8px; background: var(--tz-gs); color: var(--tz-gd); font-size: 12px; font-weight: 650; }
.im-sk { margin-top: 18px; }
.im-skt { position: relative; display: flex; gap: 2px; height: 10px; }
.im-skt .z { min-width: 0; border-radius: 2px; background: var(--tz-soft); }
.im-skt .z.d { background: var(--tz-kt2); }
.im-skt .z.g { background: color-mix(in srgb, var(--tz-g) 45%, var(--tz-card)); }
.im-skt .z.on { background: var(--tz-k); }
.im-skt .z.g.on { background: var(--tz-g); }
.im-skt b { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--tz-kd); box-shadow: 0 0 0 2px var(--tz-card); }
.im-skl { display: flex; gap: 2px; margin-top: 7px; font-size: 11px; font-weight: 600; color: var(--tz-hint); }
.im-skl span { min-width: 0; text-align: center; white-space: nowrap; }
.im-skl span:first-child { text-align: left; }
.im-skl .on { color: var(--tz-kd); font-weight: 800; }
.im-nat .tz-st3 small { font-size: 13px; font-weight: 600; color: var(--tz-hint); }
.im-nat .tz-st3 b { font-size: 18px; }
/* jadval */
.im-jd { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--tz-line); }
.im-jd span { display: block; font-size: 12px; color: var(--tz-hint); }
.im-jd b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
/* reyting */
.im-rl { list-style: none; margin: 10px 0 0; padding: 0; }
.im-rl.pin { margin-bottom: 8px; }
.im-rr { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--tz-line, var(--line)); }
.im-rl li:first-child { border-top: 0; }
.im-rr.men { margin: 0 -8px; padding: 9px 8px; border-top-color: transparent; border-radius: 12px; background: var(--tz-kt); }
.im-rr.men + .im-rr { border-top-color: transparent; }
.im-o { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; color: var(--tz-hint, var(--hint)); font-variant-numeric: tabular-nums; }
.im-o.t1 { background: #E9C46A; color: #3A2A05; }
.im-o.t2 { background: #D5DAE4; color: #2B3245; }
.im-o.t3 { background: #E0B48C; color: #3D2410; }
.im-rn { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.im-rn em { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--tz-k); color: #FFFFFF; font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.im-rn small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--tz-hint, var(--hint)); font-variant-numeric: tabular-nums; }
.im-rb { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.im-rb b { font-size: 16px; font-weight: 750; letter-spacing: -.2px; }
.im-rb small { font-size: 12px; color: var(--tz-hint, var(--hint)); }
/* admin */
.im-3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.im-3 b { display: block; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.im-3 span { font-size: 12px; color: var(--hint); }
.im-svl { margin-top: 10px; }
.im-sv { display: grid; grid-template-columns: 38px minmax(0, 1fr) 40px 52px 36px; align-items: center; gap: 7px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.im-sv:first-child { border-top: 0; }
.im-sv b { font-weight: 700; }
.im-sv em { font-style: normal; text-align: right; color: var(--hint); }
.im-sv small { color: var(--hint); font-size: 12px; text-align: right; }
.im-bar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.im-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.im-sv.sh b, .im-sv.sh em { color: var(--bad); }
.im-sv.sh .im-bar i { background: var(--bad); }
.im-lv { padding: 1px 0; border-radius: 6px; font-size: 11.5px; font-weight: 700; text-align: center; }
.im-lv.o { background: var(--ok-soft); color: var(--ok); }
.im-lv.r { background: var(--soft); color: var(--accent); }
.im-lv.q { background: var(--bad-soft); color: var(--bad); }
.im-rl.adm .im-rr { --tz-line: var(--line); --tz-hint: var(--hint); }
@media (prefers-reduced-motion: reduce) { .im-dot { animation: none; } }
/* Guruh uchun statistika rasmi (ulashish.js) */
.ul-c { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 20px rgba(24, 39, 86, .14); }
/* Tasdiq oynasi: faqat Telegramdan tashqarida (brauzerda sinash) */
.tsd { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14, 20, 38, .55); }
.tsd-q { width: 100%; max-width: 340px; padding: 20px; border-radius: 20px; background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.tsd-q p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.45; }
.tsd-b { display: flex; flex-direction: column; gap: 8px; }
.ul-pdf { margin-top: 14px; }

/* Natijalar kartasi (2026-11-09): Testlar kartasi (.tz-c) asosida; imtihon natijasi oltin «Imtihon» belgisi va daraja bilan */
.nr-k .tz-t { overflow-wrap: anywhere; }
.nr-imt { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; background: var(--tz-gs); color: var(--tz-gd); font-size: 12px; font-weight: 700; }
.nr-imt .icon { width: 14px; height: 14px; }
.tz-bd.nr-dar { background: var(--tz-gs); color: var(--tz-gd); }
.nr-kut { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--tz-soft); font-size: 13px; line-height: 1.4; color: var(--tz-hint); }
.nr-kut .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--tz-gd); }
.nr-sana { font-size: 12.5px; color: var(--tz-hint); }
.tz-tabs button small { margin-left: 5px; font-size: 11.5px; font-weight: 600; opacity: .65; font-variant-numeric: tabular-nums; }
.nr-skel { height: 86px; }
.nr-skel-um { height: 150px; }
/* Umumiy natija kartasi (Statistikadagi «Umumiy faollik» uslubida, ustida o'rtacha natija chizig'i) */
.nr-um .nr-trek { height: 8px; margin: 14px 0 0; }
.nr-um .nr-trek i { background: linear-gradient(90deg, var(--tz-bf), var(--tz-g)); }
.nr-um .tz-st3 b.ok { color: var(--tz-link); }
.nr-um + .tz-son { margin-top: 4px; }

/* O'quvchining faollik va natija grafiklari */
.nr-graf { list-style: none; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; margin: 16px 0 0; padding: 0; }
.nr-graf li { min-width: 0; display: grid; grid-template-rows: auto 66px auto; gap: 5px; justify-items: center; color: var(--tz-hint); font-size: 11px; font-variant-numeric: tabular-nums; }
.nr-graf b { grid-row: 1; color: var(--tz-ink); font-size: 12px; }
.nr-ustun { grid-row: 2; display: flex; align-items: flex-end; width: min(100%, 20px); border-radius: 5px; background: var(--tz-soft); overflow: hidden; }
.nr-ustun i { width: 100%; background: var(--tz-bf); border-radius: 4px; }
.nr-ustun i.ok { background: var(--tz-g); }
.nr-trek { display: block; height: 6px; margin: 6px 0; overflow: hidden; border-radius: 4px; background: var(--tz-soft); }
.nr-trek i { display: block; height: 100%; border-radius: inherit; background: var(--st); }
/* Xatolar kartasi: xatolar soni Testlardagi «Xatolar» belgisi kabi qizil; PRO test oltin chegara bilan (Testlar kartasidagidek) */
.tz-bd.bad { background: var(--tz-bads); color: var(--tz-bad); }
.tz-card.pr { box-shadow: 0 0 0 1.5px var(--pr-ch), var(--tz-sh); }
.tz-st3 .nw { white-space: nowrap; }
/* Natijalar bo'limi tanlagichi (2026-11-09, «ostida oltin chiziq»): ko'k tepa qism ichida belgi + yozuv, tanlanganining ostida oltin chiziq */
.nr-ust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px -6px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.nr-ust button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 10px 0 12px; border: 0; background: none; color: rgba(255, 255, 255, .68); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s; }
.nr-ust button .icon { width: 17px; height: 17px; flex: none; }
.nr-ust button.on { color: #FFFFFF; font-weight: 700; }
.nr-ust button.on::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tz-g); }
.nr-ust button:focus-visible { outline: 2px solid var(--tz-g); outline-offset: -2px; border-radius: 8px; }
/* Statistika: faollik kartasi */
.nr-faol-r { display: flex; align-items: center; gap: 14px; }
.nr-olov { width: 52px; height: 52px; flex: none; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; background: var(--tz-soft); color: var(--tz-hint); }
.nr-olov .icon { width: 26px; height: 26px; }
.nr-olov.on { background: var(--tz-gs); color: var(--tz-g); }
.nr-faol-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nr-faol-m b { font-size: 24px; line-height: 1.1; font-weight: 750; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.nr-faol-m small { font-size: 12.5px; line-height: 1.35; color: var(--tz-hint); }
.nr-bugun { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nr-bugun > small { font-size: 11px; font-weight: 600; color: var(--tz-hint); }
/* Grafiklar: maqsad / o'rtacha chizig'i (oltin uzuq), bugungi kun */
.nr-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.nr-leg span { display: inline-flex; align-items: center; gap: 6px; }
.nr-leg i.nr-ch { width: 16px; border-top: 2px dashed var(--tz-g); }
.nr-leg i.ok { width: 10px; height: 10px; border-radius: 3px; background: var(--tz-g); }
.nr-graf.nr-chiz .nr-ustun { position: relative; }
.nr-graf.nr-chiz .nr-ustun::after { content: ''; position: absolute; left: 0; right: 0; bottom: min(calc(var(--m) * 1%), calc(100% - 2px)); border-top: 2px dashed var(--tz-g); opacity: .9; }
.nr-graf li.bugun > span:not(.nr-ustun) { color: var(--tz-link); font-weight: 700; }
/* Xatolar kartasi (2026-11-09): hali xato turgan topshiriq raqamlari; natija sharhidan kelinganda karta oltin halqa bilan ajraladi */
.nr-xl { margin: 12px 0 8px; font-size: 12px; font-weight: 600; color: var(--tz-hint); }
.nr-xr { display: flex; flex-wrap: wrap; gap: 6px; }
.nr-xr span { min-width: 32px; height: 30px; padding: 0 8px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tz-bads); color: var(--tz-bad); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nr-xr span.k { background: var(--tz-soft); color: var(--tz-hint); }
.nr-xk.fokus { box-shadow: 0 0 0 2px var(--tz-g), var(--tz-sh); }
/* Profilim (2026-11-09, uchala variant birlashtirildi): ko'k tepada rasm, ism, telefon va belgilar; rangli yutuq kartalari; «Profil» va
   «Sozlamalar» guruhlari (qator: belgi, nom, qiymat). Rasm kamerasi va oltin halqa saqlangan. */
.pf-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.pf-lb { font-size: 17px; font-weight: 700; letter-spacing: -.1px; }
.pf-hero { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.pf-av.avwrap { width: 84px; height: 84px; margin: 0; flex: none; }
.pf-av .avatar.big { width: 84px; height: 84px; border: 3px solid var(--tz-g); font-size: 24px; }
.pf-av .camb { width: 30px; height: 30px; right: -4px; bottom: -2px; border: 2px solid #263B78; }
.pf-av .camb .icon { width: 15px; height: 15px; }
.pf-av .avatar.pic .avov .icon { width: 22px; height: 22px; }
.pf-hm { flex: 1; min-width: 0; }
.pf-ism { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 750; letter-spacing: -.4px; overflow-wrap: anywhere; }
.pf-tel { margin: 4px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-tgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.pf-tg { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 12px; font-weight: 650; }
.pf-tg .icon { width: 13px; height: 13px; }
.pf-tg.pr { background: var(--tz-g); color: #2A1D00; }
/* yutuqlar: tepaga chiqib turgan uchta rangli karta */
.pf-yut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pf-y { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px; border: 0; border-radius: 18px; background: var(--tz-card); box-shadow: var(--tz-sh); color: var(--tz-ink); font: inherit; text-align: left; cursor: pointer; }
.pf-y:active { transform: scale(.97); }
.pf-yi { width: 32px; height: 32px; margin-bottom: 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.pf-yi .icon { width: 18px; height: 18px; }
.pf-y b { font-size: 21px; line-height: 1.1; font-weight: 750; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.pf-y small { font-size: 11.5px; line-height: 1.25; color: var(--tz-hint); }
.pf-y.g .pf-yi { background: var(--tz-gs); color: var(--tz-gd); }
.pf-y.k .pf-yi { background: var(--tz-kt); color: var(--tz-link); }
.pf-y.y .pf-yi { background: #E1F5EE; color: #0F6E56; }
html[data-theme="dark"] .pf-y.y .pf-yi { background: rgba(93, 202, 165, .16); color: #7FD8B8; }
/* guruhlar */
.pf-body .pr-me { margin-bottom: 4px; }
.pf-gh { margin: 18px 4px 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--tz-hint); }
.pf-gr { padding: 4px 16px; }
.pf-q { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-top: 1px solid var(--tz-line); background: none; color: var(--tz-ink); font: inherit; text-align: left; }
.pf-q:first-child { border-top: 0; }
button.pf-q { cursor: pointer; }
button.pf-q:active { opacity: .65; }
.pf-qi { width: 34px; height: 34px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--tz-kt); color: var(--tz-link); font-size: 17px; }
.pf-qi .icon { width: 18px; height: 18px; }
.pf-qn { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.pf-qv { max-width: 52%; font-size: 14.5px; color: var(--tz-hint); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pf-q > .icon { width: 17px; height: 17px; flex: none; color: var(--tz-hint); }
.pf-q .sw { margin-left: 4px; }
.pf-q .sw.on { background: var(--tz-g); }
.pf-iz { margin: 8px 4px 0; font-size: 12.5px; line-height: 1.4; color: var(--tz-hint); }
/* Natijalar davr filtri (2026-11-09): Hammasi · Kun · Hafta · Oy · Davr; ‹ › bilan davr almashtirish yoki «dan / gacha» sanalari */
.nr-davr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.nr-davr button { height: 34px; padding: 0; border: 1.5px solid var(--tz-line); border-radius: 999px; background: var(--tz-card); color: var(--tz-hint); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.nr-davr button.on { border-color: var(--tz-k); background: var(--tz-k); color: #FFFFFF; }
.nr-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 6px; border-radius: 16px; background: var(--tz-card); box-shadow: var(--tz-sh); }
.nr-nav b { flex: 1; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nr-nav .tz-ib { width: 38px; height: 38px; }
.nr-nav .tz-ib[disabled] { opacity: .35; cursor: default; }
.nr-kel .icon { transform: rotate(180deg); }
.nr-or { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.nr-or label { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--tz-card); box-shadow: var(--tz-sh); }
.nr-or span { font-size: 12px; font-weight: 600; color: var(--tz-hint); }
.nr-or .tin { width: 100%; min-width: 0; height: 34px; padding: 0 6px; border: 1px solid var(--tz-line); border-radius: 10px; background: var(--tz-bg); color: var(--tz-ink); font: inherit; font-size: 14px; }
html[data-dz="grad"] .nr-nav .tz-ib { background: var(--tz-soft); color: var(--tz-link); }
/* Testlarni boshqarish (2026-11-09): qatordagi holat va kirish belgilari nom ostida */
.bq-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.bq-h .pill { margin: 0; }
/* Testlarni boshqarish va test sahifasi (2026-11-09): filtrlar, oxirgi harakat, holat belgilari, test tarixi (vaqt chizig'i), imtihonlar, kalit ogohlantirishi */
.ts-fl { font-size: 13px; font-weight: 700; color: var(--hint); margin: 2px 2px 6px; }
.ts-son { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: var(--hint); margin: 4px 2px 8px; }
.ts-toz { border: 0; background: transparent; padding: 4px 0; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.item .ts-last { font-size: 12.5px; color: var(--hint); margin: 3px 0 0; line-height: 1.35; }
.item .ts-last em { font-style: normal; color: var(--text); font-weight: 600; }
.ts-hb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ts-hb .pill { font-size: 13px; padding: 6px 10px; }
.ts-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ts-g2 .btn { min-height: 44px; padding: 0 10px; font-size: 14px; }
.ts-iz { margin: 8px 2px 0; font-size: 13px; line-height: 1.45; color: var(--hint); }
.ts-im { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ts-im + .ts-im { border-top: 1px solid var(--line); }
.ts-im .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ts-im b { font-size: 15px; }
.ts-im small { font-size: 13px; color: var(--hint); line-height: 1.4; }
.ts-im .icon { width: 20px; height: 20px; color: var(--hint); flex: none; }
.ts-tl { list-style: none; margin: 6px 0 0; padding: 0; }
.ts-tl li { position: relative; padding: 0 0 16px 28px; }
.ts-tl li::before { content: ''; position: absolute; left: 7px; top: 9px; bottom: -9px; width: 2px; background: var(--line); }
.ts-tl li:last-child { padding-bottom: 0; }
.ts-tl li:last-child::before { display: none; }
.ts-tl li > i { position: absolute; left: 1px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.ts-tl li.k > i { left: 3px; top: 5px; width: 10px; height: 10px; background: var(--card); border: 2px dashed var(--gold); box-shadow: none; }
.ts-tl li.jo > i { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.ts-tl li.og > i { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
.ts-tl .d { margin: 0; font-size: 12.5px; color: var(--hint); font-weight: 600; }
.ts-tl .t { margin: 1px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.ts-tl .t .pill, .ts-tl .t .pro-t { margin-left: 4px; vertical-align: 1px; font-size: 11.5px; padding: 2px 7px; }
.ts-tl .x { margin: 1px 0 0; font-size: 13px; color: var(--hint); line-height: 1.45; }
.ts-orq { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border: 0; background: transparent; padding: 2px 0; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ts-orq .icon { width: 18px; height: 18px; }
.ts-og-p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.ts-og { margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.6; }