.shell { max-width: var(--w-content); margin: 0 auto; min-height: 100vh; padding: var(--sp-4) var(--sp-4) calc(var(--sp-7) + var(--tap) + var(--sp-4)); }
.card { border-radius: var(--r-lg); }

/* --- Sarlavha qatori --- */
.page-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.page-head h1 { margin: 0; font-size: var(--fs-xl); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: var(--tap); padding: 0; flex: none; border-radius: var(--r-full); background: var(--c-surface); box-shadow: var(--shadow-1); }
.icon-btn.saved { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-soft); }
.section-title { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-lg); }
.media-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --- Ikonka pufakchasi --- */
.bubble {
  display: inline-grid; place-items: center; flex: none;
  width: var(--icon-bubble); height: var(--icon-bubble); border-radius: var(--r-md);
  background: var(--c-primary-soft); color: var(--c-primary);
}
.bubble.green { background: var(--c-success-soft); color: var(--c-success); }
.bubble.red { background: var(--c-danger-soft); color: var(--c-danger); }
.bubble.amber { background: var(--c-warning-soft); color: var(--c-warning); }
.bubble.violet { background: rgba(155, 135, 245, 0.14); color: #a995f5; }
.bubble.cyan { background: rgba(44, 188, 212, 0.12); color: var(--c-brand-cyan); }
.bubble.sm { width: 30px; height: 30px; border-radius: var(--r-sm); }
.bubble.sm svg { width: 18px; height: 18px; }
.bubble.lg { width: 72px; height: 72px; border-radius: var(--r-full); margin: 0 auto var(--sp-2); }
.bubble.lg svg { width: 36px; height: 36px; }

/* --- Bosh sahifa: ko'k-yashil sarlavha --- */
.hero {
  position: relative; overflow: hidden;
  padding: var(--sp-5); border-radius: var(--r-xl);
  background: var(--grad-hero); color: var(--c-on-hero); box-shadow: var(--shadow-hero);
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
  border-radius: var(--r-full); background: var(--c-hero-glass); pointer-events: none;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); position: relative; z-index: 1; }
.hero-kicker { margin: 0; font-size: var(--fs-sm); color: var(--c-on-hero-muted); font-weight: var(--fw-medium); }
.hero h1 { margin: var(--sp-1) 0; font-size: var(--fs-xxl); }
.hero-sub { margin: 0; color: var(--c-on-hero-muted); font-size: var(--fs-sm); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); position: relative; z-index: 1; }
.stat { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-hero-glass); }
.stat b { display: block; font-size: var(--fs-lg); }
.stat span { font-size: var(--fs-xs); color: var(--c-on-hero-muted); }
.hero-cta {
  position: relative; z-index: 1; width: 100%; margin-top: var(--sp-4); min-height: 52px;
  border: 0; background: var(--c-surface); color: var(--c-primary); font-weight: var(--fw-bold); font-size: var(--fs-md);
}
.hero-cta:hover { background: var(--c-surface); filter: brightness(0.97); }
.hero-cta { justify-content: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); }
.cta-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; text-align: left; line-height: 1.25; }
.cta-text small { font-weight: var(--fw-normal); color: var(--c-text-muted); font-size: var(--fs-xs); }

/* Natija doirasi */
.ring { position: relative; width: var(--ring); height: var(--ring); flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .ring-bg { stroke: var(--c-surface-2); }
.ring .ring-fg { stroke: var(--c-accent); transition: stroke-dashoffset 600ms var(--ease); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.ring.on-hero .ring-bg { stroke: var(--c-hero-glass); }
.ring.on-hero .ring-fg { stroke: var(--c-on-hero); }

/* --- Rejim kartochkalari --- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mode {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3);
  color: inherit; text-decoration: none; min-width: 0;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mode:hover { border-color: var(--c-primary); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.mode-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mode-text strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-text span { font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-go { color: var(--c-text-muted); }
.mode-go svg { width: 18px; height: 18px; }
.mode.featured { margin-top: var(--sp-4); padding: var(--sp-4); border-color: var(--c-primary); background: var(--c-primary-soft); }
.mode.featured strong { font-size: var(--fs-lg); color: var(--c-primary); }
.mode.featured .bubble { background: var(--grad-accent); color: var(--c-on-hero); }
.mode.featured:hover { border-color: var(--c-primary-strong); }

/* --- Biletlar --- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--sp-2); }
.tcell {
  position: relative; display: grid; place-items: center; gap: var(--sp-1); padding: var(--sp-4) var(--sp-2);
  text-decoration: none; color: inherit; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tcell:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.tcell b { font-size: var(--fs-xl); color: var(--c-primary); }
.tcell small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.tcell .tstate { position: absolute; top: var(--sp-1); right: var(--sp-1); }
.tcell .tstate svg { width: 16px; height: 16px; }
/* Chala qolgan bilet: chap burchakda sariq nuqta — qaytib kirilsa shu joyidan davom etadi */
.tcell .tdraft { position: absolute; top: var(--sp-2); left: var(--sp-2); width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-warning, #f0b429); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-warning, #f0b429) 25%, transparent); }
.tcell.pass { border-color: var(--c-success); background: var(--c-success-soft); }
.tcell.pass b, .tcell.pass .tstate { color: var(--c-success); }
.tcell.fail { border-color: var(--c-danger); background: var(--c-danger-soft); }
.tcell.fail b, .tcell.fail .tstate { color: var(--c-danger); }

.list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.list a { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.list a:hover { border-color: var(--c-primary); }

/* --- Test ekrani --- */
.quiz-top { position: sticky; top: 0; z-index: 5; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-2); background: var(--c-bg); }
.quiz-top .page-head { margin-bottom: var(--sp-3); }
.qprogress { height: 6px; border-radius: var(--r-full); background: var(--c-surface-2); overflow: hidden; margin-bottom: var(--sp-3); }
.qprogress > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--grad-hero); transition: width 300ms var(--ease); }
.qnav { display: flex; gap: var(--sp-1); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
.qnav::-webkit-scrollbar { display: none; }
.qnav button {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-full); border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.qnav button.current { border-color: var(--c-primary); color: var(--c-primary); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1px var(--c-primary); }
.qnav button.ok { background: var(--c-success); border-color: var(--c-success); color: var(--c-primary-text); }
.qnav button.bad { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-primary-text); }
.qnav button.done { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }

.timer-wrap { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary); }
.timer-wrap .ico svg { width: 18px; height: 18px; }
.timer { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.timer-wrap:has(.timer.low) { background: var(--c-danger-soft); color: var(--c-danger); }

.qcard { padding: var(--sp-4); }
.qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.qnum { font-weight: var(--fw-bold); color: var(--c-primary); }
.qimg { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--r-md); background: var(--c-surface-2); margin-bottom: var(--sp-4); }
.qtitle { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.4; margin: 0 0 var(--sp-4); word-break: break-word; }
.answers { display: grid; gap: var(--sp-2); }
.answer {
  /* Belgi (✓/✗) faqat javobdan keyin chiqadi: unga oldindan bo'sh joy ajratilmaydi, matn kengroq turadi */
  display: grid; grid-template-columns: auto 1fr; grid-auto-flow: column; gap: var(--sp-3); align-items: center; text-align: left;
  min-height: 52px; padding: var(--sp-2) var(--sp-3); border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; word-break: break-word;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.answer:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.answer:active:not(:disabled) { transform: scale(0.99); }
.answer:disabled { cursor: default; }
.answer .key {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--c-surface-2); color: var(--c-text-muted); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.answer.chosen { border-color: var(--c-primary); background: var(--c-primary-soft); }
.answer.chosen .key { background: var(--c-primary); color: var(--c-primary-text); }
.answer.right { border-color: var(--c-success); background: var(--c-success-soft); }
.answer.right .key, .answer.right .amark { background: var(--c-success); color: var(--c-primary-text); }
.answer.wrong { border-color: var(--c-danger); background: var(--c-danger-soft); }
.answer.wrong .key, .answer.wrong .amark { background: var(--c-danger); color: var(--c-primary-text); }
.amark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); }
.amark svg { width: 16px; height: 16px; }

.verdict { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-weight: var(--fw-bold); }
.verdict.ok { background: var(--c-success); color: var(--c-primary-text); }
.verdict.bad { background: var(--c-danger-soft); color: var(--c-danger); }

.explain { margin-top: var(--sp-3); padding: var(--sp-4); display: grid; gap: var(--sp-4); border-left: 4px solid var(--c-primary); }
.explain h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.explain p { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.explain audio { width: 100%; }
.explain .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); }
.explain .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.explain video { width: 100%; border-radius: var(--r-md); }

.qfoot { display: flex; gap: var(--sp-2); justify-content: space-between; margin-top: var(--sp-4); }
.qfoot .btn { flex: 1; min-height: 50px; border-radius: var(--r-md); }

/* --- Natija --- */
.result { padding: var(--sp-6) var(--sp-5); text-align: center; }
.result h1 { margin: var(--sp-2) 0 0; font-size: var(--fs-xl); }
.result .big { font-size: 3.25rem; font-weight: var(--fw-bold); margin: var(--sp-1) 0; line-height: 1.1; }
.result.ok .big { color: var(--c-success); }
.result.bad .big { color: var(--c-danger); }
.result-bar { height: 10px; max-width: 320px; margin: var(--sp-3) auto 0; border-radius: var(--r-full); background: var(--c-surface-2); overflow: hidden; }
.result-bar span { display: block; height: 100%; border-radius: var(--r-full); background: var(--grad-accent); }
.result.bad .result-bar span { background: var(--c-danger); }
.stack-btns { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

.empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-text-muted); }
.empty p { margin: var(--sp-2) 0 0; }
.empty-ico { color: var(--c-primary); }
.empty-ico svg { width: 40px; height: 40px; }
.skeleton { height: 72px; border-radius: var(--r-lg); background: var(--c-surface-2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.notice { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-warning-soft); color: var(--c-warning); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

/* --- Sozlamalar --- */
.setting { padding: var(--sp-4); margin-bottom: var(--sp-3); }
.setting h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg .btn { border-radius: var(--r-full); }
.seg .btn[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-text); }

/* --- Shpargalkalar --- */
.page-lead { margin: calc(var(--sp-2) * -1) 0 var(--sp-4); font-size: var(--fs-sm); }
.cheat-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.mode.cheat { padding: var(--sp-3) var(--sp-4); }
.mode.cheat .mode-text strong, .mode.cheat .mode-text span { white-space: normal; }
.mode.cheat .mode-text span { margin-top: 2px; }
.cheat-soon { display: grid; justify-items: center; gap: var(--sp-1); }
.cheat-soon p { margin: 0; }
.cheat-soon b { color: var(--c-text); }
@media (min-width: 720px) {
  .cheat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
}

/* Shpargalka jadvali (masalan, tezliklar): telefonda ixcham — bir ekranga sig'adi, kompyuterda keng va yirik */
.cs-head-ico { flex: none; width: 36px; height: 36px; }
.cs-head-ico svg { width: 20px; height: 20px; }
.page-head:has(.cs-head-ico) { margin-bottom: var(--sp-2); }
.page-head:has(.cs-head-ico) + .page-lead { margin: 0 0 var(--sp-2); }
.cs-grid { display: grid; gap: var(--sp-2); }
.cs-sec { --tone: var(--c-primary); overflow: hidden; padding: 0; }
.cs-green { --tone: var(--c-success); }
.cs-amber { --tone: var(--c-warning); }
.cs-violet { --tone: #a995f5; }
.cs-red { --tone: var(--c-danger); }
.cs-cyan { --tone: var(--c-brand-cyan); }
.cs-head { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); box-shadow: inset 3px 0 0 var(--tone); }
.cs-head h2 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cs-head .bubble.sm { width: 26px; height: 26px; }
.cs-head .bubble.sm svg { width: 16px; height: 16px; }
.cs-rows { list-style: none; margin: 0; padding: 0; }
.cs-row { display: grid; grid-template-columns: 70px 20px 1fr; align-items: center; gap: 7px; min-height: 32px; padding: 2px var(--sp-3) 2px var(--sp-2); }
.cs-row + .cs-row { border-top: 1px solid var(--c-border); }
.cs-wide .cs-row { grid-template-columns: 98px 20px 1fr; }
.cs-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; color: var(--tone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-val b { font-size: 1.15rem; line-height: 1; font-weight: var(--fw-bold); }
.cs-val small { font-size: 0.62rem; opacity: 0.85; }
.cs-val.word b { font-size: 0.95rem; letter-spacing: 0.02em; }
.cs-ico { display: inline-flex; color: var(--c-text-muted); }
.cs-ico svg { width: 19px; height: 19px; }
.cs-label { font-size: 0.84rem; line-height: 1.25; }

/* Bitta jadvalli shpargalka: kompyuterda ham o'qishga qulay kenglikda */
.cs-single { max-width: 760px; }
@media (min-width: 900px) {
  .cs-grid.cs-single { grid-template-columns: 1fr; }
  .cs-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--sp-4); align-items: start; }
  .cs-main { grid-row: span 2; }
  .cs-head-ico { width: 48px; height: 48px; }
  .cs-head-ico svg { width: 26px; height: 26px; }
  .page-head:has(.cs-head-ico) { margin-bottom: var(--sp-3); }
  .page-head:has(.cs-head-ico) + .page-lead { margin: 0 0 var(--sp-5); font-size: var(--fs-md); }
  .cs-head { padding: var(--sp-3) var(--sp-4); }
  .cs-head h2 { font-size: var(--fs-md); }
  .cs-head .bubble.sm { width: 32px; height: 32px; }
  .cs-head .bubble.sm svg { width: 18px; height: 18px; }
  .cs-row { grid-template-columns: 120px 28px 1fr; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4); }
  .cs-wide .cs-row { grid-template-columns: 180px 28px 1fr; }
  .cs-val b { font-size: 1.75rem; }
  .cs-val small { font-size: 0.72rem; }
  .cs-val.word b { font-size: 1.3rem; }
  .cs-ico svg { width: 26px; height: 26px; }
  .cs-label { font-size: var(--fs-md); }
}

/* --- Yo'l belgilari --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Yuqori qator: filtr + kartochkalar + natija */
.sign-bar { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.sign-filter { position: relative; display: flex; align-items: center; min-height: 50px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-1); transition: border-color var(--t-fast) var(--ease); }
.sign-filter:hover, .sign-filter:focus-within { border-color: var(--c-primary); }
.sign-filter.active { border-color: var(--c-primary); background: var(--c-primary-soft); }
.sign-filter-ico, .sign-filter-chev { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; pointer-events: none; color: var(--c-primary); }
.sign-filter-ico { left: var(--sp-3); }
.sign-filter-chev { right: var(--sp-3); transform: translateY(-50%) rotate(90deg); color: var(--c-text-muted); }
.sign-filter select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 48px; padding: 0 44px 0 46px; border: 0; background: transparent; color: var(--c-text); font: inherit; font-weight: var(--fw-medium); cursor: pointer; text-overflow: ellipsis; }
.sign-filter select:focus { outline: none; }
.sign-filter option { background: var(--c-surface); color: var(--c-text); }
.btn-cards { min-height: 50px; border: 0; color: #fff; font-weight: var(--fw-bold); background: var(--grad-accent); box-shadow: 0 6px 18px rgba(24, 195, 221, 0.28); }
.btn-cards:hover { background: var(--grad-accent); filter: brightness(1.08); }
.sign-progress { font-size: var(--fs-sm); }
/* Telefon: filtr to'liq kenglikda, ostida natija (chapda) va kartochkalar (o'ngda) */
.sign-bar:has(.btn-cards) { grid-template-columns: 1fr auto; align-items: center; }
.sign-bar:has(.btn-cards) .sign-filter { grid-column: 1 / -1; }
.sign-bar .sign-progress { order: 1; }
.sign-bar .btn-cards { order: 2; padding: 0 var(--sp-5); }
/* Kompyuter: filtr va uning yonida ajralib turuvchi kartochkalar tugmasi, natija o'ng chetda */
@media (min-width: 720px) {
  .sign-bar:has(.btn-cards) { grid-template-columns: minmax(280px, 400px) auto 1fr; gap: var(--sp-3); }
  .sign-bar:has(.btn-cards) .sign-filter { grid-column: auto; }
  .sign-bar .btn-cards { order: 0; }
  .sign-bar .sign-progress { order: 0; justify-self: end; }
  .sign-bar:not(:has(.btn-cards)) { max-width: 400px; margin-left: auto; margin-right: auto; width: 100%; }
}
/* Ro'yxat: faqat kichik rasm, raqam va nom */
.sign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); }
.sign-item { display: grid; grid-template-columns: var(--thumb) 1fr; gap: var(--sp-3); align-items: center; width: 100%; padding: var(--sp-3); text-align: left; font: inherit; color: var(--c-text); cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.sign-item:hover { border-color: var(--c-primary); }
.sign-item:active { transform: scale(0.99); }
.sign-name { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.sign-name b { color: var(--c-primary); font-size: var(--fs-sm); }
.sign-thumb, .noimg { width: var(--thumb); height: var(--thumb); object-fit: contain; border-radius: var(--r-sm); }
/* Belgi rasmi kartochka foniga qo'shilib turadi (alohida katak foni yo'q) */
.sign-thumb { background: transparent; }
.noimg { background: rgba(255, 255, 255, .05); }
.noimg { display: grid; place-items: center; font-weight: var(--fw-bold); color: var(--c-primary); }
.sign-item.known { border-color: var(--c-success); background: var(--c-success-soft); }
.sign-item.known .sign-name > span::after { content: " ✓"; color: var(--c-success); font-weight: var(--fw-bold); }
/* Belgi oynasi */
.sign-modal { width: min(460px, 100%); padding: var(--sp-5); }
.sign-modal-img { display: grid; place-items: center; padding: var(--sp-4); border-radius: var(--r-lg); background: #f4f7f9; }
.sign-big { width: 100%; max-width: 240px; height: 220px; object-fit: contain; }
.noimg.sign-big { background: transparent; font-size: var(--fs-xxl); }
.sign-code { display: inline-block; margin-top: var(--sp-4); padding: 2px var(--sp-3); border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.sign-modal h2 { margin-top: var(--sp-2); }
.sign-modal p { text-align: left; white-space: pre-wrap; word-break: break-word; }
.sign-modal-close { width: 100%; min-height: 50px; margin-top: var(--sp-5); font-weight: var(--fw-bold); }
/* Kartochkalar */
.flash-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.flash-count { text-align: center; margin: 0 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.flash-stage { overflow-x: clip; padding: var(--sp-1) 0; }
.flash { position: relative; max-width: 560px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); text-align: center; display: grid; gap: var(--sp-4); justify-items: center; border-top: 4px solid var(--c-primary); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; --swipe: 0; }
.flash:active { cursor: grabbing; }
.flash img { pointer-events: none; -webkit-user-drag: none; }
.flash-img { width: 100%; max-width: 240px; height: 220px; object-fit: contain; padding: var(--sp-3); border-radius: var(--r-lg); background: #f4f7f9; }
.noimg.flash-img { font-size: var(--fs-xxl); }
.flash-tap { margin: 0; font-size: var(--fs-sm); }
.flash-back h2 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-xl); }
.flash-back .sign-code { margin: 0 var(--sp-2) 0 0; vertical-align: middle; }
.flash-back p { margin: 0; white-space: pre-wrap; color: var(--c-text-muted); text-align: left; }
.swipe-tag { position: absolute; top: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border: 2px solid; border-radius: var(--r-md); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-sm); pointer-events: none; opacity: 0; }
.swipe-tag.yes { left: var(--sp-4); color: var(--c-success); background: var(--c-success-soft); transform: rotate(-10deg); opacity: max(0, var(--swipe)); }
.swipe-tag.no { right: var(--sp-4); color: var(--c-danger); background: var(--c-danger-soft); transform: rotate(10deg); opacity: max(0, calc(var(--swipe) * -1)); }
.flash.to-yes .swipe-tag.yes, .flash.to-no .swipe-tag.no { opacity: 1; }
/* Pastki tugmalar: «Javobni ko'rish» alohida qatorda, ostida chap — bilmayman, o'ng — bilaman */
.flash-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); max-width: 560px; margin-left: auto; margin-right: auto; }
.flash-foot .btn { min-width: 0; font-weight: var(--fw-bold); }
.flash-foot .btn-primary { grid-column: 1 / -1; order: -1; }
.flash-foot .btn-danger { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }
.flash-foot .btn-success { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success); box-shadow: none; }
.flash-foot .btn-success:hover { background: var(--c-success); color: #fff; filter: none; }
.flash-foot .btn-danger:hover { background: var(--c-danger); color: #fff; }
.swipe-hint { text-align: center; font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }

.reason { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--r-full); font-size: var(--fs-xs); background: var(--c-surface-2); }
.reason.reasonWrong { background: var(--c-danger-soft); color: var(--c-danger); }
.reason.reasonDue { background: var(--c-warning-soft); color: var(--c-warning); }
.reason.reasonNew { background: var(--c-primary-soft); color: var(--c-primary); }

/* --- Kirish / ro'yxatdan o'tish --- */
.linklike { border: 0; padding: 0; background: none; color: var(--c-primary); font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.field .label { margin-bottom: var(--sp-1); }
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 104px; }
.pass-toggle { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); color: var(--c-primary); }
.hint { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.error-box, .ok-box { margin: 0; padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); }
.error-box { background: var(--c-danger-soft); color: var(--c-danger); }
.ok-box { background: var(--c-success-soft); color: var(--c-success); }

/* Sozlamalardagi akkaunt */
.account-head { display: flex; align-items: center; gap: var(--sp-3); }
.account-head > div { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--grad-hero); color: var(--c-on-hero); font-weight: var(--fw-bold); font-size: var(--fs-lg); flex: none; }
.account details { margin-top: var(--sp-3); }
.account summary { cursor: pointer; color: var(--c-primary); font-weight: var(--fw-medium); }
.stack-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }

/* --- Pastki menyu --- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center; padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: 0 -4px 20px rgba(16, 35, 61, 0.06);
}
.tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: var(--w-content); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: var(--sp-1) 0; color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-xs); }
.tab-ico { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--r-full); transition: background var(--t-fast) var(--ease); }
.tabbar a[aria-current="page"] { color: var(--c-primary); font-weight: var(--fw-bold); }
.tabbar a[aria-current="page"] .tab-ico { background: var(--c-primary-soft); }

@media (max-width: 420px) {
  .modes { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--fs-xl); }
  .ring { --ring: 80px; }
  /* Kichik telefon: chetlardagi bo'sh joy kamroq, matnga ko'proq joy */
  .shell { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .qcard { padding: var(--sp-3); }
  .qtitle { font-size: var(--fs-md); line-height: 1.45; }
  .answer { gap: var(--sp-2); padding: var(--sp-2); }
  .answer .key { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* Bosh sahifa sarlavhasidagi kichik belgi: to'q fonda oq "plashka" ustida */
.hero-brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-brand); }
.hero-emblem { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.hero-emblem img { width: 30px; height: 30px; }

/* ===== Kirish sahifasi: to'q fon, tungi yo'l manzarasi, logotip va ixcham kirish oynasi ===== */
.shell.shell-auth { max-width: none; min-height: 100vh; min-height: 100dvh; padding: 0; }
.auth-bg { position: fixed; inset: 0; z-index: 0; background: #17202b; }
.auth-bg svg { width: 100%; height: 100%; display: block; }
.auth {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
  display: grid; align-content: center; gap: var(--sp-5);
  max-width: 440px; margin: 0 auto; padding: calc(var(--sp-6) + 8px) var(--sp-4) var(--sp-5);
  color: #fff;
}
.auth-langs { position: absolute; top: var(--sp-3); right: var(--sp-4); display: flex; gap: 2px; padding: 3px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); }
.auth-lang { min-height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-full); background: transparent; color: rgba(255, 255, 255, 0.75); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; }
.auth-lang[aria-pressed="true"] { background: #fff; color: #1f2a38; }

.auth-brand { display: grid; justify-items: center; text-align: center; gap: var(--sp-2); }
.auth-emblem { width: 92px; height: 92px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45)); }
.wordmark { margin: 0; font-family: var(--font-brand); font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: 0.01em; color: #fff; }
.wm-accent { color: #3cc4dc; }
.wm-sub { margin: 4px 0 0; font-family: var(--font-brand); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.22em; text-transform: uppercase; color: #9fe3ef; }
.wm-line { display: none; margin: 6px 0 0; font-family: var(--font-brand); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.auth-slogan { margin: var(--sp-2) 0 0; font-family: var(--font-brand); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.82); }
.auth-slogan b { font-weight: 700; color: #fff; }
.auth-mottos { display: none; list-style: none; margin: var(--sp-5) 0 0; padding: 0; gap: var(--sp-3); }
.auth-mottos li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.auth-mottos li b { color: #fff; }
.motto-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-md); background: rgba(24, 195, 221, 0.14); color: #6fd4e6; border: 1px solid rgba(111, 212, 230, 0.25); }
.motto-ico svg { width: 18px; height: 18px; }

.auth-card { padding: var(--sp-5); border: 0; border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); color: var(--c-text); }
.auth-card-title { margin: 0 0 var(--sp-4); font-family: var(--font-brand); font-size: var(--fs-xl); }
.auth-form { display: grid; gap: var(--sp-3); }
.auth-submit { width: 100%; min-height: 50px; margin-top: var(--sp-1); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.auth-switch { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--fs-xs); }

/* Past bo'yli telefonlar: belgi kichikroq */
@media (max-height: 700px) {
  .auth { gap: var(--sp-4); padding-top: var(--sp-6); }
  .auth-emblem { width: 68px; height: 68px; }
  .wordmark { font-size: 1.7rem; }
}
/* Kompyuter: chapda brend va afzalliklar, o'ngda kirish oynasi */
@media (min-width: 900px) {
  .auth { max-width: 1040px; grid-template-columns: 1fr 400px; align-items: center; gap: var(--sp-7); padding: var(--sp-7) var(--sp-6); }
  .auth-langs { top: var(--sp-5); right: var(--sp-6); }
  .auth-brand { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: var(--sp-5); }
  .auth-emblem { width: 150px; height: 150px; }
  .wordmark { font-size: 3rem; }
  .wm-sub { font-size: var(--fs-md); }
  .wm-line { display: block; }
  .auth-slogan { font-size: var(--fs-md); }
  .auth-mottos { display: grid; }
  .auth-card { padding: var(--sp-6); }
}

/* Kirish oynasi: yarim shaffof "shisha" — orqadagi yo'l ko'rinib turadi */
.auth-emblem { width: 120px; height: 120px; }
.auth-slogan { display: grid; gap: 2px; }
.auth-card {
  background: rgba(16, 26, 36, 0.55); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff;
}
.auth-card .label { color: rgba(255, 255, 255, 0.78); }
.auth-card .input { background: rgba(255, 255, 255, 0.96); border-color: transparent; color: #222b38; }
.auth-card .pass-toggle { color: #0b7189; }
.auth-card .auth-switch { color: rgba(255, 255, 255, 0.62); }
.auth-card .error-box { background: rgba(207, 64, 64, 0.18); color: #ffb4b4; border: 1px solid rgba(255, 120, 120, 0.35); }
.auth-card .auth-submit { background: linear-gradient(90deg, #0b7189 0%, #0b8fa8 100%); border: 0; box-shadow: 0 8px 22px rgba(11, 143, 168, 0.35); }
.auth-card .auth-submit:hover { filter: brightness(1.08); }
@media (max-height: 700px) { .auth-emblem { width: 84px; height: 84px; } }
@media (min-width: 900px) { .auth-emblem { width: 170px; height: 170px; } }
@media (min-width: 900px) {
  .auth { max-width: 1140px; grid-template-columns: minmax(0, 1fr) 400px; }
  .auth-brand { grid-template-columns: 1fr; gap: var(--sp-3); }
  .auth-emblem { width: 120px; height: 120px; }
  .wordmark { white-space: nowrap; font-size: clamp(2.4rem, 4.2vw, 3.4rem); }
  .wm-line { max-width: 34em; }
}

/* Kompyuter: logotip va yozuv ufqdan pastda, to'q yer fonida turadi (GARANT so'zi osmon rangiga qo'shilib ketmasin) */
@media (min-width: 900px) {
  .auth { align-content: stretch; grid-template-rows: 1fr; padding-top: calc(var(--sp-7) + var(--sp-4)); padding-bottom: var(--sp-6); }
  .auth-brand { align-self: end; padding-bottom: 2vh; }
  .auth-card { align-self: center; }
  .auth-emblem { width: 140px; height: 140px; margin-bottom: var(--sp-1); }
}
/* Yozuv har qanday fonda aniq o'qilsin */
.wordmark { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }

/* Kompyuter: "PRAVA GARANT" yozuvining tepasi aynan ufq chizig'iga (qora fon boshlanishiga) tushadi,
   logotip esa undan yuqorida, osmon qismida turadi. Ufq o'rni fon rasmining masshtabidan hisoblanadi:
   rasm 1200x800, ufq pastdan 345 birlikda, rasm ekranni to'liq qoplaydi (slice). */
@media (min-width: 900px) {
  .auth {
    --bg-scale: max(calc(100vw / 1200), calc(100vh / 800));
    --horizon: calc(100vh - 345 * var(--bg-scale));
    --emblem: 170px;
  }
  .auth-emblem { width: var(--emblem); height: var(--emblem); margin-bottom: 0; }
  .auth-brand {
    align-self: start; padding-bottom: 0; gap: var(--sp-3);
    /* 64px — .auth ning yuqori ichki chegarasi; 12px — logotip va yozuv orasi; 10px — ufqdan keyingi kichik bo'shliq */
    margin-top: max(0px, calc(var(--horizon) + 10px - var(--emblem) - 12px - 64px));
  }
}
@media (min-width: 900px) and (max-height: 700px) {
  .auth { --emblem: 130px; }
}
@media (min-width: 900px) {
  .auth { padding-bottom: var(--sp-4); }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .auth-mottos { gap: var(--sp-2); margin-top: var(--sp-4); }
}

/* Mavzular ro'yxati: nomi, ostida submavzular soni, o'ngda natija va o'q */
.topic-link { align-items: center; }
.topic-text { display: grid; gap: 2px; min-width: 0; }
.topic-text small { font-size: var(--fs-xs); }
.topic-meta { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; color: var(--c-text-muted); }
.topic-meta .ico svg { width: 18px; height: 18px; }

/* ===== Faol bo'lmagan akkaunt ekranlari ===== */
.status-screen {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4);
  overflow: hidden; color: #fff; text-align: center;
}
.status-screen .fx { position: absolute; inset: 0; pointer-events: none; }
.status-box { position: relative; z-index: 1; max-width: 460px; display: grid; justify-items: center; gap: var(--sp-3); }
.status-box h1 { margin: 0; font-family: var(--font-brand); font-size: 2.2rem; line-height: 1.15; }
.status-box p { margin: 0; font-size: var(--fs-lg); line-height: 1.55; font-weight: var(--fw-medium); }
.status-back { margin-top: var(--sp-4); min-height: 48px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-full); background: #fff; color: #1f2a38; font-weight: var(--fw-bold); }
.status-back:hover { background: #f1f5f8; }
.st-emojis { display: flex; gap: var(--sp-2); font-size: 44px; line-height: 1; }
.st-emojis span { display: inline-block; animation: st-bob 1.6s ease-in-out infinite alternate; }
@keyframes st-bob { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-12px) rotate(6deg); } }

/* Faxriy: yashil fon va salyut */
.st-archived { background: radial-gradient(circle at 50% 30%, #1fbf78 0%, #13915a 45%, #0b6440 100%); }
.burst { position: absolute; width: 0; height: 0; }
.spark {
  position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 8px var(--c); opacity: 0; animation: st-spark 2.7s ease-out infinite; animation-delay: var(--d);
}
@keyframes st-spark {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(0.2); opacity: 0; }
}

/* Muzlatilgan: muzlagan fon va qor */
.st-frozen { background: linear-gradient(180deg, #e8f6ff 0%, #b9def4 45%, #7fb6dc 100%); color: #12324a; }
.st-frozen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.8), transparent 30%), radial-gradient(circle at 85% 75%, rgba(255,255,255,.6), transparent 35%);
}
.st-frozen .status-box { padding: var(--sp-5); border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.8); backdrop-filter: blur(6px); box-shadow: 0 20px 50px rgba(30, 80, 120, 0.25); }
.st-frozen .status-back { background: #2b6a99; color: #fff; }
.flake { position: absolute; top: -40px; color: #fff; text-shadow: 0 0 3px #3f7fb0, 0 0 10px rgba(63, 127, 176, .7); animation: st-fall linear infinite; }
@keyframes st-fall { from { transform: translateY(-5vh) rotate(0); } to { transform: translateY(110vh) rotate(360deg); } }

/* Haydalgan: qizil fon va tepib yuborish */
.st-expelled { background: radial-gradient(circle at 50% 35%, #d33a3a 0%, #a51d1d 50%, #6d0f0f 100%); }
/* Sahna kengligi etik+smaylik guruhiga teng: zarba nuqtasi matnning aynan o'rtasiga to'g'ri keladi */
.kick-stage { position: relative; width: 206px; height: 140px; margin: var(--sp-2) auto 0; }
/* Etik qo'njining tepasidan aylanadi: orqaga siltanadi, so'ng uchi bilan oldinga tepadi */
.kick-boot { position: absolute; left: -10px; bottom: 10px; width: 92px; height: 83px; transform-origin: 30% 4%; animation: st-kick 3.4s ease-in-out infinite; }
.kick-boot svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.kick-victim { position: absolute; left: 88px; bottom: 12px; font-size: 54px; line-height: 1; animation: st-fly 3.4s ease-out infinite; }
.kick-pow { position: absolute; left: 72px; bottom: 34px; font-size: 34px; opacity: 0; animation: st-pow 3.4s ease-out infinite; }
/* 0–40%: etik turadi, smaylik qaltiraydi; 40–48%: etik orqaga siltanadi; 52%: uchi bilan tepadi; so'ng smaylik aylanib uchib ketadi */
@keyframes st-kick {
  0%, 40% { transform: rotate(0deg); }
  48% { transform: rotate(22deg); }
  53% { transform: rotate(-38deg); }
  60% { transform: rotate(-30deg); }
  72%, 100% { transform: rotate(0deg); }
}
@keyframes st-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  5%, 15%, 25%, 35%, 45% { transform: translate(-2px, 0) rotate(-5deg); opacity: 1; }
  10%, 20%, 30%, 40%, 50% { transform: translate(2px, 0) rotate(5deg); opacity: 1; }
  53% { transform: translate(8px, -8px) rotate(15deg); opacity: 1; }
  90% { transform: translate(230px, -180px) rotate(720deg) scale(0.35); opacity: 0; }
  100% { transform: translate(230px, -180px) scale(0.35); opacity: 0; }
}
@keyframes st-pow { 0%, 51% { opacity: 0; transform: scale(0.4); } 54% { opacity: 1; transform: scale(1.25); } 68%, 100% { opacity: 0; transform: scale(1.5); } }

@media (max-width: 420px) {
  .status-box h1 { font-size: 1.8rem; }
  .status-box p { font-size: var(--fs-md); }
  .st-emojis { font-size: 36px; }
}

/* ===== Kompyuter (1024px dan keng): ekran to'liq ishlatiladi =====
   Telefondagi ko'rinish o'zgarmaydi. Pastki menyu chapdagi yon panelga aylanadi,
   mazmun keng maydonga yoyiladi, savol rasmi va javoblar yonma-yon turadi. */
@media (min-width: 1024px) {
  .shell { --side: 248px; --gutter: clamp(24px, 3.5vw, 64px); max-width: none; padding: var(--sp-6) var(--gutter) var(--sp-7); }
  .shell:has(> .tabbar) { padding-left: calc(var(--side) + var(--gutter)); }
  .shell:not(.shell-auth) > :not(.tabbar):not(.status-screen):not(.qz-overlay):not(.qz) { max-width: 1320px; margin-left: auto; margin-right: auto; }

  /* Yon panel */
  .tabbar {
    top: 0; bottom: 0; right: auto; width: var(--side);
    flex-direction: column; justify-content: flex-start; padding: var(--sp-5) var(--sp-3);
    border-top: 0; border-right: 1px solid var(--c-border); box-shadow: 4px 0 24px rgba(16, 35, 61, 0.05);
  }
  .tabbar::before {
    content: "Prava Garant"; display: block; padding: 0 var(--sp-2) 0 60px; margin-bottom: var(--sp-5);
    min-height: 48px; line-height: 48px; font-family: var(--font-brand); font-weight: 800; font-size: var(--fs-lg); color: var(--c-text);
    background: url("/brand/emblem-64.png") no-repeat var(--sp-2) center / 44px;
  }
  .tabbar nav { display: flex; flex-direction: column; gap: var(--sp-1); max-width: none; }
  .tabbar a {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md); font-size: var(--fs-md); transition: background var(--t-fast) var(--ease);
  }
  .tabbar a:hover { background: var(--c-surface-2); color: var(--c-text); }
  .tabbar a[aria-current="page"] { background: var(--c-primary-soft); }
  .tabbar a[aria-current="page"] .tab-ico { background: transparent; }
  .tab-ico { width: 30px; height: 30px; }

  /* Sarlavhalar */
  .page-head { margin-bottom: var(--sp-5); }
  .page-head h1 { font-size: var(--fs-xxl); }
  .section-title { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-xl); }

  /* Bosh sahifa */
  .hero { padding: var(--sp-6) var(--sp-7); }
  .hero::after { width: 340px; height: 340px; right: -90px; top: -120px; }
  .hero h1 { font-size: 2.25rem; }
  .ring { --ring: 128px; }
  .stats { gap: var(--sp-3); max-width: 760px; }
  .stat { padding: var(--sp-3) var(--sp-4); }
  .stat b { font-size: var(--fs-xl); }
  .hero-cta { max-width: 520px; min-height: 60px; }
  .modes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
  .mode { padding: var(--sp-4); }
  .mode.featured { padding: var(--sp-5); }

  /* Biletlar va ro'yxatlar */
  .tgrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--sp-3); }
  .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .sign-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); }
  .flash-foot .btn { flex: none; }
  .setting { max-width: 860px; }

  /* Test ekrani: yuqori panel, rasm chapda, savol va javoblar o'ngda */
  .quiz-top { margin: 0 auto var(--sp-4); padding: var(--sp-3) 0 var(--sp-2); }
  .qnav { flex-wrap: wrap; overflow: visible; }
  .qnav button { width: 40px; height: 40px; }
  .qcard { padding: var(--sp-6); }
  .qcard:has(> .qimg) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--sp-6); align-items: start; }
  .qcard:has(> .qimg) > * { grid-column: 2; }
  .qcard:has(> .qimg) > .qmeta { grid-column: 1 / -1; }
  .qcard:has(> .qimg) > .qimg { grid-column: 1; grid-row: 2 / span 3; max-height: 62vh; margin: 0; }
  .qtitle { font-size: var(--fs-xl); }
  .answer { min-height: 60px; padding: var(--sp-3) var(--sp-4); }
  .qfoot { justify-content: flex-end; }
  .qfoot .btn { flex: 0 1 240px; }
  .explain { padding: var(--sp-5); }
  .explain .frame, .explain video { max-width: 860px; }

  /* Natija sahifasi */
  .result { padding: var(--sp-7); }
  .result .big { font-size: 4rem; }
  .stack-btns { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ===== To'q ko'k mavzu: o'quvchi ilovasiga xos aniqlashtirishlar ===== */
.tabbar { background: #101a27; border-color: var(--c-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35); }
.hero-cta { background: #f2f6f9; color: #0b6f86; }
.hero-cta:hover { background: #ffffff; }
.hero-cta .cta-text small { color: #4f6273; }
.hero-cta .bubble { background: #dcedf2; color: #0b6f86; }
.answer, .qnav button { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.answer .key { background: var(--c-surface-3); color: var(--c-text); }
.icon-btn { background: var(--c-surface-2); }
.quiz-top { background: var(--c-bg); }
.mode .bubble, .bubble { border: 1px solid rgba(44, 188, 212, 0.18); }
.section-title { color: var(--c-text); }
@media (min-width: 1024px) {
  .tabbar { border-right: 1px solid var(--c-border); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); }
  .tabbar a[aria-current="page"] { background: var(--c-btn); color: #fff; }
  .tabbar a[aria-current="page"] .tab-ico { color: #fff; }
}

/* ===================================================================
   TEST OYNASI — standart qolip (barcha bo'limlar uchun bir xil)
   Telefon: ustma-ust. Kompyuter: chapda javoblar, o'ngda rasm.
   =================================================================== */
.qz { display: grid; gap: var(--sp-3); }

/* Yuqori qator: taymer | bo'lim nomi | Ortga */
.qz-head {
  position: sticky; top: 0; z-index: 6;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; background: var(--c-bg); border-bottom: 1px solid var(--c-border);
}
.qz-title { min-width: 0; text-align: center; }
.qz-title h1 { margin: 0; font-family: var(--font-brand); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-title p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.qz-back { min-height: 40px; padding: 0 var(--sp-3); gap: 6px; }
.qz-back .ico svg { width: 18px; height: 18px; }

/* Taymer: halqa (imtihonda — qolgan vaqt, mashqda — yechilgan qism) va vaqt */
.qz-timer { display: flex; align-items: center; gap: var(--sp-2); }
.qz-ring { position: relative; width: 42px; height: 42px; flex: none; }
.qz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.qz-ring circle { fill: none; stroke-width: 3.5; }
.qz-ring .bg { stroke: var(--c-surface-3); }
.qz-ring .fg { stroke: var(--c-accent); stroke-linecap: round; stroke-dasharray: 119.38; transition: stroke-dashoffset 1s linear, stroke .3s; }
.qz-ring .ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-primary); }
.qz-ring .ico svg { width: 17px; height: 17px; transform: none; }
.qz-timer-text { display: grid; line-height: 1.1; }
.qz-timer-text small { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.qz-timer-text b { font-family: var(--font-brand); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.qz-timer.low .fg { stroke: var(--c-danger); }
.qz-timer.low b, .qz-timer.low .ico { color: var(--c-danger); }
.qz-timer.low .qz-ring { animation: qz-pulse 1s ease-in-out infinite; }
@keyframes qz-pulse { 50% { transform: scale(1.07); } }

/* Savol bloki: alohida, ko'zga tashlanadigan */
.qz-question {
  position: relative; padding: var(--sp-4) calc(var(--sp-4) + 40px) var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg); border: 1px solid #234f68; border-left: 4px solid var(--c-accent);
  background: linear-gradient(135deg, #16384d 0%, #11263a 100%); box-shadow: var(--shadow-1);
}
.qz-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: #8fc3d6; }
.qz-qtext { margin: 0; font-size: 1.2rem; font-weight: var(--fw-bold); line-height: 1.45; color: #f4f8fb; word-break: break-word; }
/* Savol raqami (bilet/savol): kartaning yuqori chizig'i ustiga "o'tirgan" ixcham nishon —
   savol matnidan tashqarida turadi, shuning uchun u bilan birga o'qilmaydi. */
.qz-question.has-num { margin-top: 10px; }
.qz-num {
  position: absolute; top: 0; left: var(--sp-4); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px;
  border-radius: var(--r-full); border: 1px solid rgba(24, 195, 221, .45);
  background: linear-gradient(180deg, #123247 0%, #0d1f2e 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 3px rgba(13, 21, 32, .9);
  color: #9fd6e6; font-size: 12px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; user-select: none; -webkit-user-select: none; pointer-events: none;
}
.qz-num::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 6px rgba(24, 195, 221, .8); }
.qz-num b { color: #fff; }
.qz-num i { font-style: normal; color: rgba(159, 214, 230, .55); font-weight: var(--fw-medium); }
.qz-save { position: absolute; top: var(--sp-3); right: var(--sp-3); display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); color: #8fc3d6; cursor: pointer; }
.qz-save:hover { color: #fff; border-color: var(--c-accent); }
.qz-save.on { color: var(--c-accent); border-color: var(--c-accent); }
.qz-save .ico svg { width: 18px; height: 18px; }

/* Tana: javoblar va rasm */
.qz-body { display: grid; gap: var(--sp-3); }
.qz-side { display: grid; gap: var(--sp-2); align-content: start; }
.qz-media { order: -1; position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 7 / 5; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--c-border); background: #0a111a; }
/* Rasm ramkaga to'liq sig'adi (kesilmaydi): ramkaning eni va bo'yini egallab, nisbatini saqlaydi */
.qz-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.qz-media.empty .qz-brand img { position: static; }
.qz-media.empty { aspect-ratio: 2 / 1; background: radial-gradient(circle at 50% 38%, #17384d 0%, #0c1622 72%); }
.qz-brand { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-4); text-align: center; }
.qz-brand img { width: auto; height: clamp(64px, 18vw, 96px); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.qz-brand b { font-family: var(--font-brand); font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.7rem); letter-spacing: .02em; color: #fff; }
.qz-brand small { font-family: var(--font-brand); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase; color: #9fe3ef; }

.qz-hint { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.qz-answers { display: grid; gap: var(--sp-2); }
.qz-ans {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-3); text-align: left;
  border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text);
  font: inherit; font-size: 1.06rem; font-weight: var(--fw-medium); line-height: 1.4; word-break: break-word; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.qz-ans:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-surface-3); }
.qz-ans:disabled { cursor: default; }
.qz-key { display: grid; place-items: center; min-width: 38px; height: 32px; padding: 0 6px; border-radius: var(--r-sm);
  background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-primary); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.qz-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.qz-mark svg { width: 16px; height: 16px; }
/* Birinchi bosish — belgilangan; ikkinchi bosish — javob */
.qz-ans.pre { border-color: var(--c-accent); background: var(--c-primary-soft); box-shadow: 0 0 0 3px rgba(24, 195, 221, .16); }
.qz-ans.pre .qz-key { background: var(--c-btn); border-color: var(--c-btn); color: #fff; }
.qz-ans.right { border-color: #2fae6f; background: #15432f; color: #effff6; }
.qz-ans.right .qz-key, .qz-ans.right .qz-mark { background: #2fae6f; border-color: #2fae6f; color: #fff; }
.qz-ans.wrong { border-color: #d65b5b; background: #4b2027; color: #fff0f0; }
.qz-ans.wrong .qz-key, .qz-ans.wrong .qz-mark { background: #d65b5b; border-color: #d65b5b; color: #fff; }
.qz-ans.dim { opacity: .55; }


.qz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.qz-learn { color: var(--c-primary-strong); }
.qz-learn .ico svg, .qz-next .ico svg { width: 18px; height: 18px; }
.qz-next { margin-left: auto; }

/* Savol raqamlari */
.qz-cells { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--sp-3); max-height: 150px; overflow-y: auto;
  border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.qz-cell { width: 40px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); background: var(--c-surface-2);
  color: var(--c-text-muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; cursor: pointer; }
.qz-cell:hover { border-color: var(--c-primary); color: var(--c-text); }
.qz-cell.ok { background: #1f9a5f; border-color: #1f9a5f; color: #fff; }
.qz-cell.bad { background: #c94b4b; border-color: #c94b4b; color: #fff; }
.qz-cell.current { outline: 2px solid var(--c-accent); outline-offset: 2px; color: var(--c-text); }
.qz-cell.ok.current, .qz-cell.bad.current { color: #fff; }

/* Submavzu kartochkalari: tepada rasm, pastda nom */
.sub-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.sub-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; color: inherit; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.sub-card:hover { border-color: var(--c-primary); transform: translateY(-2px); }
.sub-art { --tone: #2f74d8; position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-2);
  border-bottom: 3px solid var(--tone); }
.sub-art svg { display: block; width: 100%; height: 100%; transition: transform .35s var(--ease); }
.sub-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 35%, rgba(0, 0, 0, .18)); }
.sub-card:hover .sub-art svg { transform: scale(1.05); }
.sub-art.red { --tone: #e5484d; } .sub-art.amber { --tone: #f0a020; } .sub-art.blue { --tone: #2f80ed; }
.sub-art.green { --tone: #22b573; } .sub-art.violet { --tone: #8b6cf0; } .sub-art.cyan { --tone: #19b5d0; } .sub-art.night { --tone: #4a5fb0; }
.sub-info { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; padding: var(--sp-3); }
.sub-name { flex: 1; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.sub-prog { display: flex; align-items: center; gap: var(--sp-2); }
.sub-prog small { color: var(--c-text-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.sub-bar { flex: 1; height: 5px; border-radius: 99px; background: var(--c-surface-2); overflow: hidden; }
.sub-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }
.sub-card.done .sub-bar i { background: var(--c-success); }
@media (min-width: 720px) { .sub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sub-name { font-size: var(--fs-md); } }
@media (min-width: 1100px) { .sub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (prefers-reduced-motion: reduce) { .sub-card, .sub-art svg { transition: none; } .sub-card:hover { transform: none; } }

/* Mavzu: o'rganish rejimi (yo'riqnoma va javobli savollar) */
.qz-cell.qz-cell-intro { display: inline-grid; place-items: center; color: var(--c-primary); background: var(--c-primary-soft); border-color: var(--c-primary); }
.qz-cell.qz-cell-intro svg { width: 18px; height: 18px; }
.qz-study-note { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-lg);
  border: 1px solid var(--c-primary); background: var(--c-primary-soft); color: var(--c-text); line-height: 1.55; }
.qz-study-note b { display: block; margin-bottom: var(--sp-1); color: var(--c-primary); font-size: var(--fs-md); }
.qz-study-note p { margin: 0; }
.qz-study-ico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--c-surface); color: var(--c-primary); }
.qz-study-ico svg { width: 22px; height: 22px; }
.qz-study .qz-ans.dim { opacity: .8; }
@media (max-width: 1023px) { .qz-intro .qz-media { display: none; } } /* telefonda yo'riqnoma sahifasida logotip kerak emas */
.qz-study-go { animation: qz-study-in .35s ease-out; }
@keyframes qz-study-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qz-study-go { animation: none; } }

/* Qalqib chiquvchi oynalar */
.qz-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(4, 8, 14, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: qz-fade .18s ease-out; }
@keyframes qz-fade { from { opacity: 0; } }
.qz-modal { width: min(500px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-xl); border: 1px solid var(--c-border-strong); background: var(--c-surface); text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: qz-pop .22s var(--ease); }
@keyframes qz-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.qz-modal h2 { margin: var(--sp-3) 0 var(--sp-2); font-family: var(--font-brand); font-size: var(--fs-xl); line-height: 1.25; }
.qz-modal p { margin: 0; line-height: 1.55; color: var(--c-text-muted); }
.qz-modal-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-warning-soft); color: var(--c-warning); }
.qz-modal-ico svg { width: 30px; height: 30px; }
.qz-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-5); }
.qz-modal-actions .btn { min-height: 50px; font-weight: var(--fw-bold); }
.qz-danger { background: #c94b4b; border-color: #c94b4b; color: #fff; }
.qz-danger:hover { background: #d95858; border-color: #d95858; }

/* Natija: o'tdi — yashil, o'tmadi — qizil */
.qz-modal.pass { background: linear-gradient(160deg, #1f9a5f 0%, #11603b 100%); border-color: #3cc483; color: #fff; }
.qz-modal.fail { background: linear-gradient(160deg, #bd4141 0%, #7c2026 100%); border-color: #e57373; color: #fff; }
.qz-modal.pass p, .qz-modal.fail p { color: rgba(255, 255, 255, .88); }
.qz-modal.pass .qz-modal-ico, .qz-modal.fail .qz-modal-ico { width: 78px; height: 78px; background: rgba(255, 255, 255, .16); color: #fff; }
.qz-modal.pass .qz-modal-ico svg, .qz-modal.fail .qz-modal-ico svg { width: 38px; height: 38px; }
.qz-modal.pass h2, .qz-modal.fail h2 { font-size: 1.6rem; }
.qz-timeup { margin-top: var(--sp-2) !important; font-weight: var(--fw-bold); }
.qz-score { margin-top: var(--sp-4); font-family: var(--font-brand); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.qz-score small { display: block; margin-top: var(--sp-2); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-medium); opacity: .88; }
.qz-modal.pass .btn, .qz-modal.fail .btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }
.qz-modal.pass .btn:hover, .qz-modal.fail .btn:hover { background: rgba(255, 255, 255, .2); }
.qz-modal.pass .btn.solid, .qz-modal.fail .btn.solid { background: #fff; border-color: #fff; }
.qz-modal.pass .btn.solid { color: #11603b; }
.qz-modal.fail .btn.solid { color: #8a2328; }

/* O'rganish oynasi */
.qz-learn-modal { width: min(640px, 100%); padding-top: var(--sp-4); text-align: left; }
.qz-modal-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.qz-modal-top h2 { flex: 1; margin: 0; font-size: var(--fs-lg); }
.qz-x { width: 40px; min-height: 40px; padding: 0; }
.qz-choose { margin-bottom: var(--sp-3) !important; font-size: var(--fs-sm); }
.qz-choices { display: grid; gap: var(--sp-2); }
.qz-choice { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); text-align: left;
  border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); font: inherit; cursor: pointer; }
.qz-choice > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.qz-choice small { color: var(--c-text-muted); font-size: var(--fs-xs); }
.qz-choice small:empty { display: none; }
.qz-choice:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-surface-3); }
.qz-choice:disabled { opacity: .45; cursor: not-allowed; }
.qz-expl p { margin: 0; white-space: pre-wrap; line-height: 1.7; color: var(--c-text); }
.qz-expl audio, .qz-expl video { display: block; width: 100%; border-radius: var(--r-md); }
.qz-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md); background: #000; }
.qz-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 420px) {
  .qz-timer-text small { display: none; }
  .qz-back > span:not(.ico) { display: none; }
  .qz-back { width: 40px; padding: 0; }
  .qz-qtext { font-size: 1.08rem; }
  .qz-ans { gap: var(--sp-2); }
  .qz-cell { width: 36px; height: 34px; }
}

/* Kompyuter: suratdagi qolip — chapda javoblar, o'ngda rasm */
@media (min-width: 1024px) {
  .qz { gap: var(--sp-4); }
  .qz-head { position: static; padding: 0 0 var(--sp-3); background: none; }
  .qz-title h1 { font-size: var(--fs-xxl); }
  .qz-title p { font-size: var(--fs-sm); }
  .qz-ring { width: 52px; height: 52px; }
  .qz-timer-text b { font-size: var(--fs-xl); }
  .qz-back { min-height: 46px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
  .qz-question { padding: var(--sp-5) calc(var(--sp-6) + 40px); text-align: center; }
  .qz-qmeta { justify-content: center; }
  .qz-qtext { font-size: 1.5rem; }
  .qz-num { left: var(--sp-6); height: 26px; padding: 0 13px; font-size: 13.5px; }
  .qz-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-5); align-items: start; }
  .qz-media, .qz-media.empty { order: 0; grid-column: 2; grid-row: 1; aspect-ratio: 7 / 5; }
  .qz-side { grid-column: 1; grid-row: 1; }
  .qz-ans { min-height: 64px; padding: var(--sp-3) var(--sp-4); font-size: 1.1rem; }
  .qz-brand img { height: clamp(110px, 12vw, 170px); }
  .qz-brand b { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
  .qz-cells { justify-content: center; max-height: none; padding: var(--sp-4); }
  .qz-cell { width: 46px; height: 40px; font-size: var(--fs-md); }
}

/* Kompyuter: test oynasi butun ekranni egallaydi (eni va bo'yi bo'yicha) */
@media (min-width: 1024px) {
  .shell:has(> .qz) { padding: var(--sp-4) clamp(20px, 2.2vw, 44px); }
  .qz { min-height: calc(100vh - 2 * var(--sp-4)); min-height: calc(100dvh - 2 * var(--sp-4)); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .qz-question { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .qz-body { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.45fr); align-items: stretch; }
  .qz-media, .qz-media.empty { aspect-ratio: auto; height: 100%; min-height: 380px; }
  .qz-media img { position: absolute; inset: 0; }
  .qz-media.empty .qz-brand img { position: static; }
}

/* Savol raqamlari: har doim bitta qator, yon tomonga suriladi; chetlarida surish o'qlari */
.qz-cells { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); max-height: none; overflow: visible; }
.qz-track { overflow-x: auto; overflow-y: hidden; padding: 5px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.qz-track::-webkit-scrollbar { display: none; }
.qz-row { display: flex; flex-wrap: nowrap; gap: 6px; width: max-content; margin: 0 auto; }
.qz-cell { flex: none; }
.qz-slide { display: grid; place-items: center; width: 34px; height: 36px; padding: 0; border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text-muted); cursor: pointer; }
.qz-slide:hover { color: var(--c-text); border-color: var(--c-primary); }
.qz-slide .ico svg { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .qz-cells { padding: var(--sp-3); }
  .qz-slide { width: 42px; height: 42px; }
}
.admin-link { display: block; margin-top: var(--sp-3); text-align: center; }

/* --- Arena: test rejimlari --- */
.arena-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.arena-list .mode .mode-text strong, .arena-list .mode .mode-text span { white-space: normal; }
@media (min-width: 720px) { .arena-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
@media (min-width: 1100px) { .arena-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Qoidalar oynasi */
.arena-intro { position: relative; width: min(460px, 100%); }
.arena-x { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.arena-intro .bubble.lg { width: 76px; height: 76px; border-radius: var(--r-full); margin: 0 auto; }
.arena-intro .bubble.lg svg { width: 36px; height: 36px; }
.arena-intro h2 { margin: var(--sp-3) 0 var(--sp-2); font-family: var(--font-brand); font-size: var(--fs-xl); }
.arena-rules { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); text-align: left; }
.arena-rules li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); line-height: 1.4; }
.arena-rule-ico { display: inline-flex; flex: none; color: var(--c-text-muted); }
.arena-rule-ico svg { width: 22px; height: 22px; }
.arena-rules li.ok .arena-rule-ico { color: var(--c-success); }
.arena-rules li.bad .arena-rule-ico { color: var(--c-danger); }
.arena-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.arena-times .btn { min-height: 48px; padding: 0 var(--sp-2); font-weight: var(--fw-bold); white-space: nowrap; }
.arena-times .btn[aria-checked="true"] { border-color: var(--c-success); color: var(--c-success); background: var(--c-success-soft); }
.arena-start { width: 100%; min-height: 52px; margin-top: var(--sp-4); font-weight: var(--fw-bold); font-size: var(--fs-md); }
/* Test oynasida: o'tgan vaqt, +/− soniya, yakunlash */
.qz-timer { position: relative; }
.qz-timer.up .fg { stroke: var(--c-success); }
.qz-bump { position: absolute; left: 30px; top: -10px; padding: 1px 7px; border-radius: var(--r-full); font-weight: var(--fw-bold); font-size: var(--fs-sm); pointer-events: none; animation: qz-bump 1.6s ease-out forwards; }
.qz-bump.up { background: var(--c-success); color: #fff; }
.qz-bump.down { background: var(--c-danger); color: #fff; }
@keyframes qz-bump { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.qz-finish { border-color: var(--c-warning); color: var(--c-warning); }
.qz-finish .ico svg { width: 18px; height: 18px; }
/* Arena natijasi */
.qz-modal.run .qz-modal-ico { background: var(--c-primary-soft); color: var(--c-primary); }
.run-score { display: grid; justify-items: center; margin: var(--sp-3) 0 0 !important; }
.run-score b { font-family: var(--font-brand); font-size: 3.4rem; line-height: 1; color: var(--c-success); }
.run-score span { color: var(--c-text-muted); font-weight: var(--fw-medium); }
.run-meta { margin-top: var(--sp-2) !important; font-size: var(--fs-sm); }

/* Imtihon natijasi: o'tdi — butun ekran yashil va salyut; yiqildi — faqat oyna qizil (fon odatdagidek) */
.qz-overlay.exam-pass { background: radial-gradient(circle at 50% 30%, #1fbf78 0%, #13915a 45%, #0b6440 100%); overflow: hidden; }
.qz-overlay .fx { position: absolute; inset: 0; pointer-events: none; }
.qz-modal.exam-res { position: relative; z-index: 1; }
.qz-overlay.exam-pass .qz-modal.exam-res { background: rgba(6, 60, 36, .62); border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.qz-modal.exam-res h2 { font-size: 1.75rem; }
.qz-modal.exam-res p { font-size: var(--fs-lg); font-weight: var(--fw-medium); }

/* Imtihon: javobni tasdiqlash oynasi */
.qz-confirm { width: min(560px, 100%); }
.qz-confirm-ans { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); text-align: left;
  border-radius: var(--r-lg); border: 2px solid var(--c-primary); background: var(--c-primary-soft);
  font-size: 1.3rem; font-weight: var(--fw-bold); line-height: 1.4; color: var(--c-text); animation: qz-grow .25s var(--ease); }
.qz-confirm-ans .qz-key { flex: none; }
@keyframes qz-grow { from { transform: scale(.85); opacity: 0; } }
.qz-confirm h2 { margin-top: var(--sp-5); font-size: var(--fs-lg); }
.qz-confirm .qz-modal-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.qz-confirm .btn .ico svg { width: 18px; height: 18px; }
.qz-ok { background: #1f9a5f; border-color: #1f9a5f; color: #fff; }
.qz-ok:hover { background: #24ad6b; border-color: #24ad6b; }
.qz-confirm .qz-modal-actions .btn { white-space: nowrap; padding: 0 var(--sp-2); }
@media (max-width: 480px) { .qz-confirm-ans { font-size: 1.12rem; } .qz-confirm .btn .ico { display: none; } }

/* Imtihondan yiqilganda: fon odatdagidek (qorong'i), faqat qizil oyna — yozuvlar erkin joylashadi */
.qz-overlay.exam-fail .qz-modal.exam-res { width: min(540px, 100%); padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.qz-overlay.exam-fail .qz-modal.exam-res .qz-modal-ico { width: 68px; height: 68px; }
.qz-overlay.exam-fail .qz-modal.exam-res .qz-modal-ico svg { width: 32px; height: 32px; }
.qz-overlay.exam-fail .qz-modal.exam-res h2 { margin: var(--sp-4) 0 var(--sp-3); font-size: 1.5rem; line-height: 1.3; }
.qz-overlay.exam-fail .qz-modal.exam-res p { font-size: 1.05rem; line-height: 1.6; }
.qz-overlay.exam-fail .qz-modal.exam-res .qz-modal-actions { margin-top: var(--sp-6); gap: var(--sp-3); }
@media (max-width: 480px) {
  .qz-overlay.exam-fail .qz-modal.exam-res { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .qz-overlay.exam-fail .qz-modal.exam-res h2 { font-size: 1.35rem; }
}

/* --- O'quvchi darajasi --- */
.bubble.gold { background: rgba(232, 176, 44, 0.16); color: #d9a21c; }
/* Ism ostidagi status: bosh sahifada (rangli fon ustida) oq, sozlamalarda — daraja rangida */
.level-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 4px 10px 4px 8px;
  border-radius: var(--r-full); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: var(--c-on-hero); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; letter-spacing: .01em; }
.level-chip:hover { background: rgba(255, 255, 255, .24); }
.level-chip .ico svg, .level-chip > svg { width: 16px; height: 16px; }
.level-chip .level-chip-go { opacity: .75; }
.level-chip.plain { margin-top: 8px; background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary); }
.level-chip.plain.tone-amber { background: var(--c-warning-soft); color: var(--c-warning); }
.level-chip.plain.tone-green { background: var(--c-success-soft); color: var(--c-success); }
.level-chip.plain.tone-violet { background: rgba(155, 135, 245, 0.14); color: #a995f5; }
.level-chip.plain.tone-cyan { background: rgba(44, 188, 212, 0.12); color: var(--c-brand-cyan); }
.level-chip.plain.tone-gold { background: rgba(232, 176, 44, 0.16); color: #d9a21c; }

/* Darajalar sahifasi */
.level-hero { padding: var(--sp-6) var(--sp-5) var(--sp-5); text-align: center; }
.level-hero h2 { margin: 2px 0 var(--sp-1); font-family: var(--font-brand); font-size: 1.6rem; }
.level-hero > p { margin: 0; }
.level-kicker { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.level-pct { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.level-pct b { font-family: var(--font-brand); font-size: 2.4rem; line-height: 1; }
.level-pct span { color: var(--c-text-muted); font-size: var(--fs-sm); }
.level-bar { height: 10px; margin: var(--sp-3) auto 0; max-width: 420px; border-radius: var(--r-full); background: var(--c-surface-3); overflow: hidden; }
.level-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); transition: width .4s var(--ease); }
.level-hero.tone-amber .level-bar span { background: var(--c-warning); }
.level-hero.tone-green .level-bar span { background: var(--c-success); }
.level-hero.tone-violet .level-bar span { background: #a995f5; }
.level-hero.tone-cyan .level-bar span { background: var(--c-brand-cyan); }
.level-hero.tone-gold .level-bar span { background: #d9a21c; }
.level-next { margin-top: var(--sp-3) !important; font-weight: var(--fw-medium); }
.level-list { list-style: none; margin: 0; padding: var(--sp-2); }
.level-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); }
.level-row + .level-row { border-top: 1px solid var(--c-border); }
.level-row.current { background: var(--c-primary-soft); border-top-color: transparent; }
.level-row.current + .level-row { border-top-color: transparent; }
.level-row.locked { opacity: .55; }
.level-row.locked .bubble { background: var(--c-surface-3); color: var(--c-text-muted); }
.level-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.level-row-text small { color: var(--c-text-muted); }
.level-row-mark { flex: none; display: inline-flex; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.level-row-mark svg { width: 18px; height: 18px; }
.level-row.done .level-row-mark { color: var(--c-success); }
.level-row.current .level-row-mark { color: var(--c-primary); }
.level-how { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.level-how h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md, 1rem); }
.level-how ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); color: var(--c-text-muted); line-height: 1.55; }

/* Daraja o'zgargani haqida xabar */
.level-news .fx { position: absolute; inset: 0; pointer-events: none; }
.level-news-box { position: relative; z-index: 1; width: min(460px, 100%); }
.level-news-box .bubble.lg { margin-bottom: var(--sp-1); }
.level-news-box .qz-modal-actions .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 480px) { .level-news-box .qz-modal-actions { grid-template-columns: 1fr; } }

/* ===== Bosh sahifa: profil va statistika kartochkalari ===== */
.profile {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--r-xl); background: var(--grad-hero); color: var(--c-on-hero);
  box-shadow: var(--shadow-hero); border: 1px solid rgba(255, 255, 255, .06);
}
.profile::after { content: ""; position: absolute; right: -70px; top: -90px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 195, 221, .22), transparent 70%); pointer-events: none; }
.profile-text { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; justify-items: start; gap: 6px; }
.profile-name { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }

/* O'quvchi rasmi */
.uavatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: var(--grad-accent); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lg); position: relative; z-index: 1; }
.uavatar.face { background: #cfeaf2; }
.uavatar svg { width: 100%; height: 100%; display: block; }
.uavatar.lg { width: 76px; height: 76px; font-size: 1.6rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 6px rgba(24, 195, 221, .35), 0 8px 22px rgba(0, 0, 0, .35); }

/* Status (ism ostida) */
.level-chip { margin: 0; padding: 4px 12px 4px 4px; gap: 8px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); font-size: var(--fs-md); }
.level-chip.plain { margin-top: 8px; padding: 3px 10px 3px 3px; font-size: var(--fs-sm); }

/* Daraja ikonkasi: rangli gradientli doira */
.lv-badge { --a: #3fd3ea; --b: #0a8fa8; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, var(--a), var(--b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 4px rgba(0, 0, 0, .15), 0 4px 12px -4px var(--b); }
.lv-badge svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.lv-badge.sm { width: 28px; height: 28px; }
.lv-badge.sm svg { width: 16px; height: 16px; }
.lv-badge.lg { width: 84px; height: 84px; margin: 0 auto var(--sp-2); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .15), 0 0 0 6px color-mix(in srgb, var(--b) 22%, transparent), 0 10px 26px -8px var(--b); }
.lv-badge.lg svg { width: 40px; height: 40px; }
.lv-badge.tone-blue { --a: #6cb4ff; --b: #2f6fd6; }
.lv-badge.tone-amber { --a: #ffc871; --b: #dd8616; }
.lv-badge.tone-violet { --a: #bba8ff; --b: #7457e8; }
.lv-badge.tone-green { --a: #5fe0a3; --b: #14955c; }
.lv-badge.tone-gold { --a: #ffe28f; --b: #d99a12; }
.lv-badge.locked { background: var(--c-surface-3); color: var(--c-text-muted); box-shadow: none; }
.lv-badge.locked svg { filter: none; }
.level-news-box .lv-badge.lg { margin-bottom: var(--sp-1); }

/* Statistika: har biri alohida rangli kartochka */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.kpi { --k: #2cbcd4; position: relative; overflow: hidden; display: grid; align-content: start; gap: 4px;
  padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--k) 30%, var(--c-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--k) 16%, var(--c-surface)) 0%, var(--c-surface) 75%); }
.kpi-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--k) 20%, transparent); color: var(--k); }
.kpi-ico svg { width: 21px; height: 21px; }
.kpi-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; line-height: 1.1; }
.kpi-val b { font-family: var(--font-brand); font-size: 1.75rem; color: #fff; letter-spacing: -.01em; }
.kpi-val small { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.kpi-label { color: color-mix(in srgb, var(--k) 45%, var(--c-text)); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.3; }
.kpi-bar { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.kpi-bar span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--k); transition: width .5s var(--ease); }
.kpi.tone-cyan { --k: #2cc9e0; }
.kpi.tone-green { --k: #3fcf8a; }
.kpi.tone-red { --k: #f2707a; }
.kpi.tone-amber { --k: #f0b44c; }
.mode.home-arena { margin-top: var(--sp-4); }

@media (max-width: 380px) {
  .profile { padding: var(--sp-4); gap: var(--sp-3); }
  .uavatar.lg { width: 64px; height: 64px; }
  .profile-name { font-size: 1.3rem; }
  .kpi { padding: var(--sp-3); }
  .kpi-val b { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .profile { padding: var(--sp-6) var(--sp-7); gap: var(--sp-5); }
  .uavatar.lg { width: 96px; height: 96px; font-size: 2rem; }
  .profile-name { font-size: 2rem; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  .kpi { padding: var(--sp-5); }
  .kpi-val b { font-size: 2rem; }
}
/* Bo'lim kartochkalarida yozuvlar kesilmasin — kerak bo'lsa ikkinchi qatorga o'tsin */
.modes .mode-text strong, .modes .mode-text span, .home-arena .mode-text strong, .home-arena .mode-text span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.3; }
.modes .mode-text span { margin-top: 2px; }
.level-row.locked { opacity: .62; }
.level-row.locked .lv-badge { filter: saturate(.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ===== Darajalar: sakkiz burchakli kartalar karuseli ===== */
.lv-sheet { padding: var(--sp-4) 0 var(--sp-5); border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-border); text-align: center; overflow: hidden; }
.lv-now { margin: 0 0 var(--sp-2); color: var(--c-text-muted); font-weight: var(--fw-medium); }
.lv-stage { position: relative; }
.lv-track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--sp-4) calc(50% - 115px) var(--sp-2); outline: none; }
.lv-track::-webkit-scrollbar { display: none; }
.lv-slide { flex: 0 0 230px; scroll-snap-align: center; display: grid; justify-items: center; gap: var(--sp-2); padding: 0 6px;
  transform: scale(.84); opacity: .55; transition: transform .35s var(--ease), opacity .35s var(--ease); cursor: pointer; }
.lv-slide.active { transform: none; opacity: 1; cursor: default; }
.lv-card { --a: #3fd3ea; --b: #0a8fa8; position: relative; width: 218px; height: 240px; display: grid; place-items: center; }
.lv-card.tone-blue { --a: #6cb4ff; --b: #2f6fd6; }
.lv-card.tone-amber { --a: #ffc871; --b: #dd8616; }
.lv-card.tone-violet { --a: #bba8ff; --b: #7457e8; }
.lv-card.tone-green { --a: #5fe0a3; --b: #14955c; }
.lv-card.tone-gold { --a: #ffe28f; --b: #d99a12; }
.lv-oct { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv-slide.active .lv-card:not(.locked) .lv-oct { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--b) 55%, transparent)); }
.lv-card-body { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 var(--sp-4); }
.lv-card-ico { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, var(--a), var(--b));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .15), 0 0 0 6px color-mix(in srgb, var(--b) 20%, transparent); }
.lv-card-ico svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.lv-card h2 { margin: 6px 0 0; font-family: var(--font-brand); font-size: 1.3rem; line-height: 1.2; color: #fff; }
.lv-card p { margin: 0; font-size: var(--fs-sm); line-height: 1.35; font-weight: var(--fw-medium); color: color-mix(in srgb, var(--a) 80%, #fff); }
.lv-you { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px;
  background: linear-gradient(145deg, var(--a), var(--b)); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; }
/* Ochilmagan daraja: mazmuni xira, ustida qulf */
.lv-card.locked { --a: #8fa2b6; --b: #4b5d71; }
.lv-card.locked .lv-card-body { filter: blur(6px) saturate(.6); opacity: .7; }
.lv-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; }
.lv-lock-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #e8eef4;
  background: rgba(20, 30, 44, .55); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.lv-lock-ico svg { width: 30px; height: 30px; }
.lv-lock small { padding: 3px 10px; border-radius: 99px; background: rgba(20, 30, 44, .7); color: #dfe7ef; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.lv-range { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.lv-prog { display: flex; align-items: center; gap: 8px; width: 180px; }
.lv-prog-bar { flex: 1; height: 7px; border-radius: 99px; background: var(--c-surface-3); overflow: hidden; }
.lv-prog-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }
.lv-prog b { font-size: var(--fs-xs); color: var(--c-text-muted); min-width: 34px; text-align: right; }
.lv-slide:not(.active) .lv-range, .lv-slide:not(.active) .lv-prog { visibility: hidden; }
.lv-dots { display: flex; justify-content: center; gap: 6px; margin: var(--sp-3) 0 var(--sp-4); }
.lv-dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--c-surface-3); transition: width .25s var(--ease), background .25s; cursor: pointer; }
.lv-dots span.on { width: 26px; background: var(--c-primary); }
.lv-dots span.on.tone-amber { background: #e3a84f; }
.lv-dots span.on.tone-green { background: #3fcf8a; }
.lv-dots span.on.tone-violet { background: #a995f5; }
.lv-dots span.on.tone-gold { background: #e6b43a; }
.lv-dots span.on.tone-blue { background: #5aa0f5; }
.lv-when { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 2 * var(--sp-4)); max-width: 440px; min-height: 50px;
  border-radius: var(--r-lg); background: var(--c-success-soft); color: #5fe0a3; border: 1px solid rgba(63, 207, 138, .3); font-weight: var(--fw-bold); text-decoration: none; }
.lv-when:hover { background: #164634; }
.lv-arrow { position: absolute; top: 135px; z-index: 2; display: none; }
.lv-arrow.prev { left: var(--sp-3); }
.lv-arrow.next { right: var(--sp-3); }
@media (min-width: 720px) { .lv-arrow { display: inline-grid; place-items: center; } }
.level-how { margin-top: var(--sp-4); }

/* Imtihonga qachon borish mumkinligi oynasi */
.when-box { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; text-align: left; }
.when-box h2 { margin: 0 0 var(--sp-2); text-align: center; color: #5fe0a3; font-family: var(--font-brand); }
.when-box h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); }
.when-intro { margin: 0; color: var(--c-text-muted); line-height: 1.5; text-align: center; }
.when-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.when-checks li { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.when-checks li.ok { border-color: rgba(63, 207, 138, .35); background: color-mix(in srgb, #3fcf8a 10%, var(--c-surface-2)); }
.when-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-surface-3); color: var(--c-text-muted); }
.when-mark svg { width: 16px; height: 16px; }
.when-checks li.ok .when-mark { background: #3fcf8a; color: #0d1520; }
.when-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.when-text b { font-size: var(--fs-sm); line-height: 1.35; }
.when-text small { color: var(--c-text-muted); }
.when-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--c-primary); background: var(--c-primary-soft); flex: none; }
.when-go svg { width: 18px; height: 18px; }
.when-sum { margin: var(--sp-3) 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary-strong); font-weight: var(--fw-medium); line-height: 1.45; }
.when-sum.ready { background: var(--c-success-soft); color: #5fe0a3; }
.when-tips { margin-top: var(--sp-2); padding: 2px var(--sp-4) var(--sp-3); border-radius: var(--r-md); background: color-mix(in srgb, #2cbcd4 10%, var(--c-surface-2)); }
.when-tips ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--c-text-muted); line-height: 1.45; font-size: var(--fs-sm); }
.when-wish { margin: var(--sp-4) 0 0; text-align: center; color: #e6b43a; font-weight: var(--fw-bold); }
.when-box .qz-modal-actions .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 480px) { .when-box .qz-modal-actions { grid-template-columns: 1fr; } }
.lv-when { font-size: var(--fs-md); padding: 0 var(--sp-3); }
.lv-when .ico svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .lv-when .ico { display: none; } }
.lv-slide.tone-cyan .lv-prog-bar span { background: #2cc9e0; }
.lv-slide.tone-blue .lv-prog-bar span { background: #5aa0f5; }
.lv-slide.tone-amber .lv-prog-bar span { background: #f0b44c; }
.lv-slide.tone-violet .lv-prog-bar span { background: #a995f5; }
.lv-slide.tone-green .lv-prog-bar span { background: #3fcf8a; }
.lv-slide.tone-gold .lv-prog-bar span { background: #e6b43a; }
.when-box .when-wish { color: #e6b43a; }
.when-box .when-sum { color: #7fdcec; }
.when-box .when-sum.ready { color: #5fe0a3; }
.when-box .when-intro { color: var(--c-text-muted); }

/* --- Shpargalka: tartibga soluvchining ishoralari (regulator.js) --- */
.rg { display: grid; gap: var(--sp-3); --tone: var(--c-primary); }
.rg-cyan { --tone: var(--c-brand-cyan, var(--c-primary)); }
.rg-amber { --tone: var(--c-warning); }
.rg-red { --tone: var(--c-danger); }
.rg-card { padding: 0; overflow: hidden; }
.rg-head { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.rg-head h2 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rg-head .bubble.sm { width: 26px; height: 26px; }
.rg-head .bubble.sm svg { width: 16px; height: 16px; }
.rg-note { margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); font-size: 0.82rem; color: var(--c-text-muted); line-height: 1.4; }

/* Bo'ysunish tartibi */
.rg-chain { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-3) var(--sp-1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rg-chain-i { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 3px; border-radius: var(--r-md); text-align: center;
  background: color-mix(in srgb, var(--c-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 30%, transparent); }
.rg-chain-i b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); color: var(--c-primary-text); font-size: 0.75rem; }
.rg-chain-i span { font-size: 0.72rem; line-height: 1.2; font-weight: 600; }
.rg-chain-i.p0 { background: color-mix(in srgb, var(--c-success) 18%, transparent); border-color: var(--c-success); }
.rg-chain-i.p0 b { background: var(--c-success); color: #fff; }
.rg-chain-i + .rg-chain-i::before { content: '\203A'; position: absolute; left: -5px; top: 50%; transform: translate(-50%, -50%); color: var(--c-text-muted); font-size: 1rem; }

.rg-list { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); display: grid; gap: 8px; }
.rg-list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; font-size: 0.86rem; line-height: 1.35; }
.rg-list .ico { color: var(--c-primary); padding-top: 1px; }
.rg-list .ico svg { width: 18px; height: 18px; }

/* Rang izohi */
.rg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--c-text-muted); padding: 0 2px; }
.rg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rg-legend i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; }
.rg-legend .lg-go { background: #3cc483; }
.rg-legend .lg-stop { background: #f07070; }
.rg-legend .lg-ped { height: 10px; background: repeating-linear-gradient(90deg, #3cc483 0 3px, transparent 3px 5px); border-radius: 2px; }

/* Ishora kartochkasi */
.rg-gestures { display: grid; gap: var(--sp-3); }
.rg-g { padding: 0; overflow: hidden; border-top: 3px solid var(--tone); }
.rg-g-head { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3); }
.rg-g-head h2 { margin: 0; font-size: 1rem; line-height: 1.25; }
.rg-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: var(--fw-bold);
  background: color-mix(in srgb, var(--tone) 20%, transparent); color: var(--tone); border: 1.5px solid var(--tone); }
.rg-num.sm { width: 22px; height: 22px; font-size: 0.72rem; border-width: 1px; }
.rg-g-body { display: grid; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.rg-vis { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.6fr); gap: var(--sp-2); align-items: center; }
.rg-figs { display: grid; gap: 4px; align-content: center; }
.rg-fig, .rg-cross-wrap { margin: 0; display: grid; justify-items: center; gap: 3px; }
.rg-fig figcaption, .rg-cross-wrap figcaption { font-size: 0.68rem; color: var(--c-text-muted); text-align: center; line-height: 1.2; }
.rg-person { width: 100%; max-width: 120px; height: auto; display: block; }
.rg-figs.n2 .rg-person { max-width: 84px; }
.rg-cross { width: 100%; max-width: 290px; height: auto; display: block; }
.rg-grass { fill: var(--c-surface-2); }
.rg-side-txt { font-size: 8.5px; font-weight: 700; fill: #fff; letter-spacing: .6px; opacity: .92; }

.rg-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rg-row { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; padding: 6px 0; font-size: 0.86rem; line-height: 1.35; }
.rg-row + .rg-row { border-top: 1px solid var(--c-border); }
.rg-st { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.rg-st svg { width: 14px; height: 14px; }
.rg-row.k-go .rg-st, .rg-row.k-turn .rg-st { background: var(--c-success-soft); color: var(--c-success); }
.rg-row.k-no .rg-st { background: var(--c-danger-soft); color: var(--c-danger); }
.rg-row.k-walk .rg-st { background: var(--c-primary-soft); color: var(--c-primary); }
.rg-row.k-warn .rg-st { background: var(--c-warning-soft); color: var(--c-warning); }
.rg-row.k-no b { color: var(--c-danger); }
.rg-row.k-go b, .rg-row.k-turn b { color: var(--c-success); }
.rg-row.k-walk b { color: var(--c-primary); }
.rg-tram { display: grid; grid-template-columns: 20px 1fr; gap: 8px; margin: 0; font-size: 0.8rem; color: var(--c-text-muted); }
.rg-tram .ico svg { width: 16px; height: 16px; }
.rg-tip { display: grid; grid-template-columns: 20px 1fr; gap: 8px; margin: 2px 0 0; padding: 9px 10px; border-radius: var(--r-md); font-size: 0.85rem; line-height: 1.4;
  background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--tone) 55%, transparent); }
.rg-tip .ico { color: var(--tone); }
.rg-tip .ico svg { width: 17px; height: 17px; }
.rg-tip b { color: var(--tone); }

/* Tezkor jadval */
.rg-table-wrap { padding: var(--sp-2) var(--sp-2) 0; overflow-x: auto; }
.rg-table { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 0.74rem; table-layout: fixed; }
.rg-table th, .rg-table td { padding: 6px 3px; text-align: center; border-radius: 6px; line-height: 1.2; }
.rg-table thead th { color: var(--c-text-muted); font-weight: 600; font-size: 0.7rem; }
.rg-table thead th:first-child { width: 24%; }
.rg-table thead .ico svg { width: 16px; height: 16px; }
.rg-table tbody th { text-align: left; font-weight: 600; font-size: 0.72rem; }
.rg-table tbody th > span:last-child { display: block; margin-top: 3px; }
.rg-table td { font-weight: 700; font-size: 0.68rem; padding-inline: 1px; }
.rg-table .c-stop, .rg-table .c-pedNo { background: var(--c-danger-soft); color: var(--c-danger); }
.rg-table .c-sr, .rg-table .c-all, .rg-table .c-right { background: var(--c-success-soft); color: var(--c-success); }
.rg-table .c-pedCB, .rg-table .c-pedB { background: var(--c-primary-soft); color: var(--c-primary); }

/* Oxiridagi qizil eslatma */
.rg-alert { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg, 14px);
  background: #b93a3a; color: #fff; border: 1px solid #d65555; box-shadow: 0 6px 18px rgba(185, 58, 58, 0.28); }
.rg-alert-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.rg-alert-ico svg { width: 20px; height: 20px; }
.rg-alert p { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.rg-alert b { font-weight: 800; letter-spacing: 0.02em; }

@media (min-width: 720px) {
  .rg-top, .rg-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .rg-chain-i span { font-size: 0.8rem; }
}
@media (min-width: 900px) {
  .rg-g-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
  .rg-g-head h2 { font-size: 1.1rem; }
  .rg-row { font-size: 0.92rem; }
  .rg-bottom { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .rg-table { font-size: 0.82rem; }
  .rg-table tbody th > span:last-child { display: inline; margin: 0 0 0 6px; }
}

/* Bosqichli test: tanlash oynasi va mavzular sahifasidagi tugma */
.stage-test-btn { margin-top: var(--sp-4); }
.stage-pick-label { margin: var(--sp-4) 0 0; text-align: left; font-size: var(--fs-sm); }
.stage-pick-label b { color: var(--c-primary); }
.stage-pick { grid-template-columns: repeat(2, 1fr); }
.stage-pick .btn { flex-direction: column; gap: 2px; min-height: 58px; }
.stage-pick .btn small { font-weight: 400; color: var(--c-text-muted); font-size: 12px; }
.stage-pick .btn[aria-pressed="true"] { border-color: var(--c-success); color: var(--c-success); background: var(--c-success-soft); }
.stage-size { grid-template-columns: repeat(2, 1fr); }
.stage-note { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.arena-intro { max-height: calc(100dvh - 32px); overflow-y: auto; }
.stage-test-btn .mode-text strong, .stage-test-btn .mode-text span { white-space: normal; overflow: visible; line-height: 1.3; }
.stage-test-btn .mode-text span { margin-top: 2px; }
/* Bosqichli test: birin-ketin chiqadigan oynalar */
.arena-back { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.stage-q { margin: var(--sp-2) 0 0; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.stage-step { display: inline-block; margin: 0; padding: 2px 12px; border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.stage-choices { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.stage-choice { justify-content: space-between; min-height: 60px; padding: 0 var(--sp-4); text-align: left; }
.stage-choice > span { display: flex; flex-direction: column; gap: 2px; }
.stage-choice b { font-size: var(--fs-md); }
.stage-choice small { font-weight: 400; color: var(--c-text-muted); font-size: 12px; }
.stage-choice:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }

/* «Yangi» yorlig'i: bilet kartochkasining yuqori chegarasiga qo'nib turadigan porloq lenta */
.tcell.has-new { overflow: visible; border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); }
.tcell.has-new::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 35%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.new-badge { position: absolute; top: 0; left: 50%; z-index: 2; transform: translate(-50%, -55%);
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px 3px 8px; border-radius: 999px; overflow: hidden;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, #18c3dd 0%, #2f80ed 55%, #8b6cf0 100%);
  box-shadow: 0 2px 8px -2px rgba(24, 195, 221, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
.new-badge svg { width: 13px; height: 13px; fill: #fff; flex: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }
.new-badge svg .s2 { opacity: .75; transform-origin: 19px 18.5px; }
/* Yaltirash: lenta ustidan yorug'lik o'tadi, yulduzcha miltillaydi */
.new-badge::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: nb-shine 3.6s ease-in-out infinite; }
.new-badge svg path:first-child { transform-origin: 12px 10px; animation: nb-twinkle 2.4s ease-in-out infinite; }
.new-badge svg .s2 { animation: nb-twinkle 2.4s ease-in-out .9s infinite; }
@keyframes nb-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes nb-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(25deg); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .new-badge::after, .new-badge svg path { animation: none; } }
.tgrid { row-gap: 18px; padding-top: 10px; }
/* Aralash test: hajm tanlash */
.random-q { margin: var(--sp-2) 0 0; font-weight: var(--fw-bold); font-size: var(--fs-md); text-align: center; }

/* --- Kurs kompyuteri: bosh sahifa (logotip + shior) va biletlardagi eslatma --- */
.pc-hero { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-2); border-radius: var(--r-lg); text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, rgba(60, 196, 220, 0.16), transparent 60%), linear-gradient(160deg, #0f2236, #0a1624);
  border: 1px solid rgba(60, 196, 220, 0.22); }
.pc-emblem { width: 96px; height: 96px; flex: none; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45)); }
.pc-hero-text { display: grid; gap: var(--sp-1); min-width: 0; }
.pc-hero .wordmark { font-size: 2.1rem; }
.pc-slogan { margin: 0; font-family: var(--font-brand); font-weight: 700; font-size: var(--fs-lg); color: #3cc4dc; letter-spacing: 0.01em; }
@media (max-width: 480px) {
  .pc-hero { flex-direction: column; text-align: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3); }
  .pc-emblem { width: 84px; height: 84px; }
  .pc-hero .wordmark { font-size: 1.75rem; }
}
@media (min-width: 900px) {
  .pc-emblem { width: 130px; height: 130px; }
  .pc-hero .wordmark { font-size: 2.8rem; }
  .pc-slogan { font-size: 1.35rem; }
}

.pc-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r-md);
  background: #b3261e; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 20px rgba(179, 38, 30, 0.28); }
.pc-note-ico svg { width: 26px; height: 26px; }
.pc-note p { margin: 0; line-height: 1.45; }
.pc-note p b { text-transform: uppercase; letter-spacing: 0.03em; }
.pc-clear { grid-column: 1 / -1; justify-self: start; background: #fff; color: #b3261e; border-color: #fff; font-weight: var(--fw-bold); gap: 6px; }
.pc-clear:hover:not(:disabled) { background: #ffe9e7; }
.pc-clear:disabled { opacity: 0.6; cursor: default; }
@media (min-width: 640px) {
  .pc-note { grid-template-columns: auto 1fr auto; }
  .pc-clear { grid-column: auto; justify-self: end; }
}

/* Kompyuter bosh sahifasi: katta kartochkalar (katta ekran uchun) */
.pc-tiles { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.pc-tile { --t: var(--c-primary); --t-soft: rgba(60, 196, 220, 0.12);
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4); color: inherit; text-decoration: none; border: 1px solid color-mix(in srgb, var(--t) 28%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--t) 13%, var(--c-surface)) 0%, var(--c-surface) 58%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pc-tile.tone-violet { --t: #a995f5; }
.pc-tile.tone-green { --t: var(--c-success); }
.pc-tile.tone-amber { --t: var(--c-warning); }
.pc-tile.tone-blue { --t: #5b8def; }
.pc-tile.tone-cyan { --t: var(--c-brand-cyan); }
.pc-tile.tone-red { --t: #e5534b; }
.pc-tile.tone-pink { --t: #e2629a; }
.pc-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--t) 60%, transparent);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--t) 55%, transparent); }
.pc-tile:focus-visible { outline: 3px solid var(--t); outline-offset: 2px; }
.pc-tile-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--t) 92%, #fff), color-mix(in srgb, var(--t) 78%, #000));
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--t) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.pc-tile-ico svg { width: 30px; height: 30px; }
.pc-tile-text { display: grid; gap: 4px; min-width: 0; }
.pc-tile-text strong { font-size: var(--fs-lg); line-height: 1.2; }
.pc-tile-text span { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.4; }
.pc-tile-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.pc-tile-count { padding: 3px 12px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); }
.pc-tile-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); color: var(--t);
  background: color-mix(in srgb, var(--t) 12%, transparent); transition: transform .18s ease, background .18s ease; }
.pc-tile:hover .pc-tile-go { transform: translateX(3px); background: var(--t); color: #fff; }
.pc-tile-bg { position: absolute; right: -18px; bottom: -22px; z-index: -1; color: var(--t); opacity: 0.08; pointer-events: none; }
.pc-tile-bg svg { width: 150px; height: 150px; stroke-width: 1.4; }
@media (min-width: 640px) {
  .pc-tiles.three { grid-template-columns: repeat(3, 1fr); }
  .pc-tiles.two { grid-template-columns: repeat(2, 1fr); }
  .pc-tile { grid-template-columns: 1fr; align-content: start; min-height: 230px; padding: var(--sp-5); gap: var(--sp-3); }
  .pc-tile-ico { width: 72px; height: 72px; border-radius: 20px; }
  .pc-tile-ico svg { width: 38px; height: 38px; }
  .pc-tile-text strong { font-size: 1.45rem; }
  .pc-tile-text span { font-size: var(--fs-md); }
  .pc-tile-foot { margin-top: auto; }
  .pc-tile-bg svg { width: 200px; height: 200px; }
  .pc-tiles.two .pc-tile { min-height: 210px; grid-template-columns: auto 1fr; align-items: start; }
  .pc-tiles.two .pc-tile-foot { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .pc-tile { min-height: 260px; }
  .pc-tile-ico { width: 84px; height: 84px; border-radius: 24px; }
  .pc-tile-ico svg { width: 44px; height: 44px; }
  .pc-tile-text strong { font-size: 1.7rem; }
  .pc-tiles.two .pc-tile { min-height: 220px; }
}

/* Bo'lim sarlavhasi: ikonkasiz, hamma bo'limda bir xil — logotipdagi to'q ko'k-moviy fon, kartochkalardan aniq ajralib turadi */
.pc-band { position: relative; overflow: hidden; display: flex; align-items: center;
  margin: var(--sp-5) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: linear-gradient(100deg, #1b2c3d 0%, #173a4d 60%, #0f5266 100%);
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.6); }
.pc-band-text { display: grid; gap: 2px; min-width: 0; }
.pc-band-text h2 { margin: 0; font-family: var(--font-brand); font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.01em; color: #fff; }
.pc-band-text p { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }
@media (min-width: 900px) {
  .pc-band { padding: var(--sp-4) var(--sp-5); }
  .pc-band-text h2 { font-size: 1.65rem; }
  .pc-band-text p { font-size: var(--fs-md); }
}
.page-head + .pc-band { margin-top: 0; }

/* Arena: katta kartochkalar. Telefonda ixcham — izoh yashiriladi */
@media (max-width: 639px) {
  .arena-tiles .pc-tile { padding: var(--sp-3) var(--sp-4); }
  .arena-tiles .pc-tile-text span { display: none; }
  .arena-tiles .pc-tile-ico { width: 48px; height: 48px; border-radius: 14px; }
  .arena-tiles .pc-tile-ico svg { width: 26px; height: 26px; }
  .arena-tiles .pc-tile-foot { margin-top: 0; }
}
@media (min-width: 640px) {
  .pc-tiles.arena-tiles { grid-template-columns: repeat(2, 1fr); }
  .arena-tiles .pc-tile { min-height: 250px; }
}
@media (min-width: 1000px) {
  .pc-tiles.arena-tiles { grid-template-columns: repeat(3, 1fr); }
}
/* Uzun yorliq ikki qatorga tushsa ham tekis turadi */
.pc-tile-foot { gap: var(--sp-2); align-items: flex-end; }
.pc-tile-count { border-radius: 10px; line-height: 1.35; padding: 4px 12px; }
.pc-tile-go { flex: none; }

/* Kurs kompyuteri: yon panelsiz, mazmun ekranning butun kengligida */
.shell.pc-mode { padding-bottom: var(--sp-6); }
@media (min-width: 1024px) {
  .shell.no-side { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: var(--sp-6); }
  .shell.no-side:not(.shell-auth) > :not(.status-screen):not(.qz-overlay):not(.qz) { max-width: none; }
  .pc-hero { padding: var(--sp-5) var(--sp-6); }
}
.pc-hero-text { flex: 1; }

/* Sozlamalar tugmasi: logotip qatorining o'ng chetida, shishasimon kvadrat ichida tishli g'ildirak */
.pc-gear { flex: none; align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
  color: #dff7fc; text-decoration: none;
  background: linear-gradient(145deg, rgba(60, 196, 220, 0.22), rgba(60, 196, 220, 0.06));
  border: 1px solid rgba(60, 196, 220, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px -10px rgba(60, 196, 220, 0.6);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pc-gear svg { width: 28px; height: 28px; transition: transform .5s ease; }
.pc-gear:hover { background: linear-gradient(145deg, #3cc4dc, #1d8ea3); border-color: #3cc4dc; color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(60, 196, 220, 0.85); }
.pc-gear:hover svg { transform: rotate(90deg); }
.pc-gear:focus-visible { outline: 3px solid #3cc4dc; outline-offset: 3px; }
@media (min-width: 900px) {
  .pc-gear { width: 64px; height: 64px; border-radius: 20px; }
  .pc-gear svg { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .pc-gear { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 46px; height: 46px; border-radius: 14px; }
  .pc-gear svg { width: 24px; height: 24px; }
}

/* O'quvchi profili qatorida sozlamalar tugmasi: o'ng chetda, telefonda ham qator ichida (ism ustiga chiqmaydi) */
.profile .pc-gear { position: relative; top: auto; right: auto; z-index: 1; }
@media (max-width: 1023px) {
  .profile .pc-gear { width: 46px; height: 46px; border-radius: 14px; }
  .profile .pc-gear svg { width: 24px; height: 24px; }
}

/* --- Matnni nusxalashdan himoya: belgilab bo'lmaydi (yozish maydonlaridan tashqari), chop etilmaydi --- */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }
@media print { body { display: none !important; } }

/* --- Kirish sahifasi: captcha --- */
.auth-captcha { display: grid; gap: var(--sp-2); }
.captcha-row { display: flex; align-items: stretch; gap: var(--sp-2); }
.captcha-img { flex: 1; display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(60, 196, 220, 0.35); line-height: 0; }
.captcha-img svg { display: block; width: 100%; height: auto; }
.captcha-new { flex: none; width: 52px; padding: 0; }
.auth-captcha .input { text-align: center; letter-spacing: 0.4em; font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* Kirish oynasi pastida aloqa: sarlavha, ostida telefon, ostida Telegram — hammasi o'rtada */
.auth-contacts { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.auth-contacts-title { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.auth-phone, .auth-tg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 260px; min-height: 42px; padding: 0 var(--sp-4); border-radius: 999px; font-weight: var(--fw-bold); text-decoration: none; transition: background 0.15s, color 0.15s; }
.auth-phone { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--fs-md); letter-spacing: 0.02em; }
.auth-phone .ico { width: 18px; height: 18px; color: #5fd0e6; }
.auth-phone:hover { background: rgba(255, 255, 255, 0.12); }
.auth-tg { background: rgba(42, 171, 238, 0.16); border: 1px solid rgba(42, 171, 238, 0.4); color: #bfe8fb; font-size: var(--fs-sm); }
.auth-tg .ico { width: 18px; height: 18px; color: #2aabee; }
.auth-tg:hover { background: rgba(42, 171, 238, 0.26); color: #fff; }

/* Kompyuter: logotip va yozuvlar biroz chapga — yo'l (ekran o'rtasi) ustiga tushmasin.
   Faqat ekran chetidagi bo'sh joy hisobiga suriladi (ko'pi bilan 96px), tor ekranda 16px */
@media (min-width: 900px) {
  .auth-brand { margin-left: calc(-1 * clamp(16px, (100vw - 1140px) / 2 + 16px, 96px)); }
}

/* Kompyuter bosh sahifasi: bo'limda bitta kartochka qolsa (qolganlari admin tomonidan o'chirilgan) — yarim kenglikda, «ikki ustunli» ko'rinishda */
@media (min-width: 640px) {
  .pc-tiles.one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pc-tiles.one .pc-tile { min-height: 210px; grid-template-columns: auto 1fr; align-items: start; }
  .pc-tiles.one .pc-tile-foot { grid-column: 1 / -1; }
}

/* Bosh sahifa raqamlari: admin ba'zi bo'limlarni o'chirsa (masalan, Yo'l belgilari) — qolganlari ekranni teng to'ldiradi */
@media (min-width: 1024px) {
  .kpis:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- E'lonlar va Telegram tugmalari (bosh sahifa) --- */
.news { display: grid; gap: var(--sp-2); }
.news-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary); background: var(--c-surface); color: var(--c-text);
}
.news-card.imp { border-left-color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 8%, var(--c-surface)); }
.news-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); }
.news-card.imp .news-ico { background: var(--c-warning-soft); color: var(--c-warning); }
.news-ico svg { width: 18px; height: 18px; }
.news-body { display: grid; gap: 2px; min-width: 0; }
.news-body b { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); }
.news-body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.news-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0 0; border: 0; border-radius: 50%; background: none; color: var(--c-text-muted); cursor: pointer; }
.news-x:hover { background: var(--c-primary-soft); color: var(--c-text); }
.news-x svg { width: 16px; height: 16px; }
.news-tg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.news-tg-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.news-tg-btn svg { width: 18px; height: 18px; color: #29a9eb; }
.news-tg-btn:hover { border-color: #29a9eb; }

/* ===== Matn o'lchami (Sozlamalar → Ko'rinish): butun ilova bir tekis kattalashadi (hamma o'lchamlar rem'da) ===== */
html[data-fs="sm"] { font-size: 93.75%; }
html[data-fs="lg"] { font-size: 112.5%; }
html[data-fs="xl"] { font-size: 125%; }

/* ===== Sozlamalar: guruhlangan ro'yxat ===== */
.set-flash { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: 10px 14px; border-radius: var(--r-md);
  background: var(--c-success-soft); color: var(--c-success); font-weight: 600; font-size: var(--fs-sm); }
.set-flash svg { width: 18px; height: 18px; flex: none; }
.set-profile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.set-profile-text { display: grid; justify-items: start; gap: 4px; flex: 1; min-width: 0; }
.set-profile-text b { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.set-profile-text .muted { font-size: var(--fs-sm); }
.sgroup { margin-bottom: var(--sp-4); }
.sgroup-title { margin: 0 0 var(--sp-2) var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-muted); }
.sgroup-list { padding: 0; overflow: hidden; }
.sgroup-list > * + * { border-top: 1px solid var(--c-border); }

.srow { display: flex; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4); min-height: 60px; color: var(--c-text); text-decoration: none; }
.srow.block { display: grid; gap: var(--sp-3); align-items: stretch; }
.srow-top { display: flex; align-items: center; gap: var(--sp-3); }
.srow-ico { --t: var(--c-primary); display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: color-mix(in srgb, var(--t) 15%, transparent); color: var(--t); }
.srow-ico svg { width: 19px; height: 19px; }
.srow-ico.tone-violet { --t: #a995f5; }
.srow-ico.tone-amber { --t: #f0b44c; }
.srow-ico.tone-green { --t: #3fcf8a; }
.srow-ico.tone-red { --t: #f2707a; }
.srow-ico.tone-cyan { --t: #2cc9e0; }
[data-theme="light"] .srow-ico.tone-violet { --t: #7457e8; }
[data-theme="light"] .srow-ico.tone-amber { --t: #b7791f; }
[data-theme="light"] .srow-ico.tone-green { --t: #1f9d63; }
[data-theme="light"] .srow-ico.tone-red { --t: #d64550; }
[data-theme="light"] .srow-ico.tone-cyan { --t: #0b8aa3; }
.srow-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.srow-text b { font-weight: 600; line-height: 1.3; }
.srow-text small { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.srow-ctl { flex: none; }
.srow-chev { width: 18px; height: 18px; flex: none; color: var(--c-text-muted); transition: transform .2s var(--ease, ease); }
.srow.link:hover, .srow-fold > summary:hover { background: color-mix(in srgb, var(--c-primary) 6%, transparent); }
.srow-body { min-width: 0; }
.srow.block > .srow-body { padding-left: calc(36px + var(--sp-3)); }

/* Bosilsa ochiladigan qator */
.srow-fold > summary { list-style: none; cursor: pointer; }
.srow-fold > summary::-webkit-details-marker { display: none; }
.srow-fold[open] .srow-chev { transform: rotate(90deg); }
.srow-fold > .srow-body { padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 36px + var(--sp-3)); }
.srow-fold .stack-form { max-width: 420px; }

/* Yoqib-o'chirgich */
.switch { position: relative; width: 50px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--c-border-strong); cursor: pointer; transition: background .2s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease, ease); }
.switch[aria-checked="true"] { background: var(--c-btn, var(--c-primary)); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Tugmalar to'plami (til, matn o'lchami, maqsad) */
.seg-goal .btn, .seg-font .btn { min-width: 64px; }
.font-preview { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); line-height: 1.5; }

/* Dizayn kartochkalari */
.th-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); max-width: 520px; }
.th-card { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px 6px 10px; border: 2px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; }
.th-card[aria-checked="true"] { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); }
.th-sw { display: grid; align-content: center; gap: 4px; width: 100%; height: 44px; padding: 6px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .25); }
.th-sw i { display: block; height: 7px; border-radius: 4px; }
.th-sw i:last-child { width: 55%; }
.th-split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 8px; overflow: hidden; }
.th-split .th-sw { border-radius: 0; }
.th-name { font-size: var(--fs-xs); font-weight: 600; text-align: center; line-height: 1.25; }
.th-tick { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-primary); color: #fff; }
.th-tick svg { width: 13px; height: 13px; }

/* Internetsiz ishlash */
.off-box { display: grid; gap: var(--sp-2); }
.off-status { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.off-bar { height: 6px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.off-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-success); transition: width .3s; }
.off-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Kurs ma'lumotlari */
.course-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.course-kv dt { color: var(--c-text-muted); }
.course-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.course-note { grid-column: 1 / -1; display: flex; gap: 8px; margin: var(--sp-2) 0 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-primary-soft); color: var(--c-text); line-height: 1.45; }
.course-note svg { width: 18px; height: 18px; flex: none; color: var(--c-primary); margin-top: 1px; }

/* Ustoz bilan bog'lanish */
.ct-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2); }
.ct-btn { justify-content: flex-start; }
.ct-phone { grid-column: 1 / -1; margin: 0; font-weight: 700; font-size: var(--fs-lg); letter-spacing: .02em; }
.ct-btn svg { width: 17px; height: 17px; }
.ct-btn.tg svg { color: #29a9eb; }

/* Chiqish va oynalar */
.set-logout { width: 100%; margin-top: var(--sp-2); border-color: color-mix(in srgb, var(--c-danger) 45%, transparent) !important; color: var(--c-danger) !important; }
.set-logout:hover { background: var(--c-danger-soft) !important; }
.set-logout svg { width: 18px; height: 18px; }
.set-foot { margin: var(--sp-4) 0 var(--sp-2); text-align: center; font-size: var(--fs-xs); }
.set-modal { display: grid; gap: var(--sp-3); text-align: left; }
.set-modal h2 { margin: 0; font-size: var(--fs-xl); }
.set-modal p { margin: 0; line-height: 1.5; }
.set-modal-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); }
.set-modal-ico.danger { background: var(--c-danger-soft); color: var(--c-danger); }
.set-modal-ico svg { width: 26px; height: 26px; }
.set-modal-acts { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--sp-2); }
.set-modal-acts .btn { flex: 1 1 140px; }
.btn-danger-solid { background: var(--c-danger) !important; border-color: var(--c-danger) !important; color: #fff !important; }
.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }
.rs-list { display: grid; gap: 4px; }
.rs-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; }
.rs-item:hover { background: var(--c-surface-2); }
.rs-item input { width: 20px; height: 20px; flex: none; accent-color: var(--c-danger); }
.rs-item span { flex: 1; }
.rs-item.all { border-bottom: 1px solid var(--c-border); border-radius: var(--r-md) var(--r-md) 0 0; padding-bottom: 12px; margin-bottom: 4px; }

/* Bosh sahifa: kunlik maqsad */
.goal-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.goal-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--c-danger-soft); color: var(--c-danger); }
.goal-card.done .goal-ico { background: var(--c-success-soft); color: var(--c-success); }
.goal-ico svg { width: 22px; height: 22px; }
.goal-body { display: grid; gap: 6px; flex: 1; min-width: 0; }
.goal-top { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.goal-top span { font-weight: 700; font-variant-numeric: tabular-nums; }
.goal-bar { height: 8px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.goal-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f2707a, #f0b44c); transition: width .4s; }
.goal-card.done .goal-bar span { background: var(--c-success); }
.goal-body small { color: var(--c-text-muted); font-size: var(--fs-sm); }
.goal-card.done .goal-body small { color: var(--c-success); font-weight: 600; }
.goal-streak { color: #f0a03c; font-weight: 600; }

/* Qo'llanma */
.help-sub { margin: 0 0 var(--sp-3); }
.help-list { display: grid; gap: var(--sp-3); }
.help-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); }
.help-item h2 { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: var(--fs-md); }
.help-item p { margin: 0; color: var(--c-text-muted); line-height: 1.55; }
.help-no { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: var(--fs-xs); }

@media (max-width: 560px) {
  .srow.block > .srow-body { padding-left: 0; }
  .srow-fold > .srow-body { padding-left: var(--sp-4); }
  .seg-goal .btn, .seg-font .btn { min-width: 0; flex: 1 1 auto; }
}
@media (min-width: 1024px) {
  .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Kompyuterda sozlamalar guruhlari ikki ustunda (har guruh bo'linmaydi) */
@media (min-width: 1024px) {
  .set-cols { columns: 2; column-gap: var(--sp-5); }
  .set-cols .sgroup { break-inside: avoid; display: inline-block; width: 100%; }
  .set-logout { max-width: 420px !important; display: flex; margin-left: auto; margin-right: auto; }
}

/* Til tanlash: telefonda 2×2, kengroq ekranda 4 ta yonma-yon; hamma kartochka bir xil o'lchamda */
/* Kartochka eni matn o'lchamiga bog'liq (rem): matn juda katta bo'lsa, tillar bittadan qatorga tushadi */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(9.25rem, calc(50% - var(--sp-2))), 1fr)); gap: var(--sp-2); max-width: 520px; }
.lang-card { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 2px solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s; }
.lang-card:hover { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); }
.lang-card[aria-checked="true"] { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 9%, var(--c-surface)); }
.lang-badge { display: grid; place-items: center; width: 34px; height: 26px; flex: none; border-radius: 7px; background: var(--c-surface-2);
  color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; }
.lang-card[aria-checked="true"] .lang-badge { background: var(--c-primary); color: #fff; }
.lang-name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; line-height: 1.25; }