/*
  Chittak — yagona stil fayli.

  Bo'limlar:
  1) Dizayn tizimi (ranglar, shadow, radius — light va dark rejim)
  2) Reset va umumiy tipografika
  3) Qayta ishlatiladigan UI bloklari (card, button, input, jadval va h.k.)
  4) Animatsiyalar
*/

/* ========== 1) Dizayn tizimi ========== */

:root {
  --color-bg: #f4f5fb;
  --color-surface: #ffffff;
  --color-primary: #00a844;
  --color-primary-dark: #0a7d3a;
  --color-accent: #a8f063;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;

  --shadow-sm: 0 2px 10px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 10px 28px rgba(17, 24, 39, 0.10);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Telegramning qorong'i rejimida theme.js shu attributni belgilaydi */
[data-theme="dark"] {
  --color-bg: #0f1115;
  --color-surface: #1a1d24;
  --color-primary: #00c853;
  --color-primary-dark: #00a844;
  --color-accent: #a8f063;
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-border: #2a2d36;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* ========== 2) Reset va tipografika ========== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  transition: background-color 0.25s ease, color 0.25s ease;

  /* Yengil, sekin suzuvchi gradient fon — faqat CSS, og'ir kutubxonasiz */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0, 168, 68, 0.34), transparent 52%),
    radial-gradient(circle at 85% 15%, rgba(168, 240, 99, 0.30), transparent 52%),
    radial-gradient(circle at 50% 95%, rgba(0, 168, 68, 0.26), transparent 58%);
  background-size: 200% 200%;
  background-attachment: fixed;
  animation: drift-bg 18s ease-in-out infinite alternate;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0, 200, 83, 0.42), transparent 52%),
    radial-gradient(circle at 85% 15%, rgba(168, 240, 99, 0.34), transparent 52%),
    radial-gradient(circle at 50% 95%, rgba(0, 200, 83, 0.30), transparent 58%);
}

@keyframes drift-bg {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  100% {
    background-position: 12% 15%, 88% 12%, 55% 90%;
  }
}

/*
  Foydalanuvchi telefon sozlamalarida "harakatni kamaytirish" ni yoqqan bo'lsa
  (ba'zilarda animatsiya bosh og'rig'i yoki ko'ngil aynishiga sabab bo'ladi),
  barcha animatsiyalar o'chadi — lekin hamma narsa ko'rinib turadi.
*/
@media (prefers-reduced-motion: reduce) {
  body,
  .page,
  .toast,
  .fade-up,
  .card-entrance,
  .pop {
    animation: none !important;
  }

  #app {
    transition: none;
  }
}

#app {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  min-height: 100vh;
}

h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 4px 0 6px;
}

h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 14px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 2px;
}

p {
  margin: 0 0 8px;
}

.subtitle {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0 0 24px;
}

.status {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  margin-top: 28px;
}

/* ========== 3) UI bloklari ========== */

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-md);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  font-size: 26px;
  line-height: 1;
  border-radius: 14px;
  background: rgba(0, 168, 68, 0.14);
  color: var(--color-primary);
  transition: transform 0.15s ease;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.role-card h3 {
  letter-spacing: 0.6px;
}

h1 {
  line-height: 1.25;
}

.card:active .card-icon {
  transform: scale(1.12);
}

.card-body p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Ketma-ket turgan tugmalar bir-biriga yopishib qolmasin */
.btn + .btn {
  margin-top: 10px;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.back-button {
  background: none;
  border: 0;
  font-size: 22px;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px 8px 4px 0;
  margin-bottom: 4px;
}

.input,
textarea,
select {
  width: 100%;
  padding: 13px 14px;
  margin: 6px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 15px;
  font-family: var(--font-main);
}

/*
  Ro'yxatdan tanlash maydonlari (test turi, fan) — baland va yirikroq.

  Bular eng ko'p bosiladigan joylar, shuning uchun barmoq adashmasligi uchun
  boshqa maydonlardan kattaroq qilingan. 52px — telefonda qulay bosiladigan
  eng kichik o'lcham (Apple va Google tavsiyasi 44px dan boshlanadi).

  appearance:none — brauzerning o'z o'qchasi olib tashlanadi va o'rniga
  o'zimiznikini chizamiz, aks holda u balandlikka moslashmay, kichik bo'lib
  qolardi. Shuning uchun o'ng tomonda strelkaga joy qoldiramiz.
*/
/*
  Sana-vaqt maydonlari (testning boshlanish va tugash vaqti) ham xuddi
  ro'yxatdan tanlash maydonlaridek baland va qalin — bir sahifada yonma-yon
  turadi, shuning uchun bir xil ko'rinishi kerak.
*/
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  /* Aniq balandlik: sana maydonining ichki qatori brauzerga qarab 1-2px
     farq qiladi, shunda yonidagi tanlash maydonlari bilan bir tekis turadi */
  height: 52px;
  min-height: 52px;
  /* Tepa-pastdan teng bo'shliq: iPhone sana yozuvini ichki qismning TEPASIGA
     qo'yadi — padding 0 bo'lganda yozuv yuqoriga yopishib qolardi. 14+14+~22 ≈ 52 */
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  /* Ba'zi telefonlarda bu maydon matnga qarab torayib qoladi — to'liq kenglikda tursin */
  display: block;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

/* Sana-vaqt yozuvi maydon o'rtasida turadi (iPhone'da ham — u matnni shu ichki qismda chizadi).
   min-height — bo'sh maydon to'lganidan pastroq bo'lib qolmasligi uchun. */
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: center;
  min-height: 1.4em;
  line-height: 1.4em;
}

/* Kalendar belgisi qorong'i fonda ham ko'rinsin */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
}

[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

select {
  min-height: 52px;
  padding: 14px 44px 14px 16px;
  font-size: 16px;
  font-weight: 600;

  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

textarea {
  min-height: 70px;
  resize: vertical;
}

.input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.stat-tile .stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 4px;
}

/* Test kartasidagi kichik yorliqlar: "Yopiq test", "Ochiq", "Yopilgan" */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-purple {
  background: rgba(139, 92, 246, 0.16);
  color: #7c3aed;
}

.badge-blue {
  background: rgba(59, 130, 246, 0.16);
  color: #2563eb;
}

.badge-green {
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
}

.badge-gray {
  background: rgba(107, 114, 128, 0.18);
  color: var(--color-text-muted);
}

[data-theme="dark"] .badge-purple {
  color: #c4b5fd;
}

[data-theme="dark"] .badge-blue {
  color: #93c5fd;
}

[data-theme="dark"] .badge-green {
  color: #86efac;
}

/* "Jarayondagi testlar" / "Yopilgan testlar" tablari */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* O'quvchilar ro'yxatining bitta qatori */
.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.icon-button {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.icon-button:active {
  transform: scale(0.9);
  background: var(--color-border);
}

.icon-button.danger:active {
  background: rgba(239, 68, 68, 0.15);
}

/* Diqqat qaratuvchi ogohlantirish qutisi */
.notice {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 14px;
  margin: 12px 0;
}

[data-theme="dark"] .notice {
  color: #fca5a5;
}

.progress-track {
  height: 10px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.4s ease;
}

.option {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 10px 0;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.option.selected {
  border-color: var(--color-accent);
  background: rgba(168, 240, 99, 0.12);
  transform: scale(1.01);
}

/* Input ustidagi kichik sarlavha */
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 12px 0 4px;
}

/* Sahifa pastida yopishib turadigan asosiy tugma */
/* Saqlash tugmasi: pastki menyu uni yopib qolmasligi uchun oddiy
   tugma sifatida, savollardan keyin turadi */
.sticky-footer {
  margin: 20px 0 8px;
}

/* Belgilanadigan sozlama (checkbox) kartasi */
.setting-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
}

.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.setting-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* Javoblar kalitidagi bitta savol: sarlavha, ostida harflar */
.key-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

/*
  Yozma javob maydoni — oddiy matn maydoni (.input) ustiga bir oz qo'shimcha:
  monospace emas, lekin raqam va belgilar aniq ajralib tursin.
*/
.math-input {
  font-size: 17px;
  letter-spacing: 0.3px;
}

/* MathLive maydoni — oddiy .input bilan bir xil ko'rinishda */
math-field.math-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  margin: 6px 0;
  font-size: 19px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);

  /* MathLive ichki ranglari */
  --caret-color: var(--color-primary);
  --selection-background-color: rgba(0, 168, 68, 0.25);
  --smart-fence-color: var(--color-primary);
  --placeholder-color: var(--color-text-muted);
}

math-field.math-input:focus-within {
  border-color: var(--color-primary);
  outline: none;
}

math-field.math-input::part(virtual-keyboard-toggle) {
  color: var(--color-primary);
}

/* Menyu tugmasi ("≡") Telegram ichida kerak emas */
math-field.math-input::part(menu-toggle) {
  display: none;
}

/* Yozma javob qanday yozilishini ko'rsatuvchi namuna */
.answer-hint {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.85;
}

/* Yozma savol bloki: sarlavha + a/b qatorlari */
.key-question {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.key-question .key-row {
  border-bottom: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.key-question .part-letter {
  min-width: 24px;
  color: var(--color-text-muted);
}

.key-question .variant-list {
  flex: 1;
  min-width: 0;
}

.key-question .variant-list .math-input {
  margin: 4px 0;
}

.key-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 15px;
}

.option-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.option-stepper button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.option-stepper button:active {
  background: var(--color-border);
}

.letter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.letter-option {
  flex: 1;
  min-width: 42px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.letter-option:active {
  transform: scale(0.92);
}

.letter-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.question-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 12px 0;
}

.result-number {
  font-size: 60px;
  font-weight: 800;
  text-align: center;
  margin: 8px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}

table th,
table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/*
  Xabar banneri ("✅ Saqlandi" kabi).

  Markazga qo'yish uchun ilgari "left:50% + translateX(-50%)" ishlatilardi.
  Lekin animatsiya ham "transform" ni o'zgartiradi va uni BEKOR QILIB yuborardi —
  natijada banner avval chapga siljib chiqib, keyin markazga sakrab o'tardi.
  Endi markazlashtirish "left/right + margin:auto" orqali, ya'ni transform
  faqat animatsiyaga qoladi va sakrash yo'qoladi.
*/
.toast {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  /* Hamma narsadan ustida — ochiq oyna (sheet, 60) va matematik klaviatura (10050) ustida ham ko'rinsin */
  z-index: 10100;
  box-shadow: var(--shadow-md);
  animation: banner-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Yo'qolayotganda ham silliq: joyida turib, asta so'nadi */
.toast.is-leaving {
  animation: banner-fade 0.22s ease forwards;
}

/* ========== 4) Animatsiyalar ========== */

.page {
  animation: fade-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-entrance {
  animation: card-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* nth-of-type: faqat "div" turidagi birodarlar orasida sanaydi,
   shu sabab h1/p matnlariga ta'sir qilmay, aynan 2-kartani kechiktiradi. */
.card-entrance:nth-of-type(2) {
  animation-delay: 0.08s;
}

/* Kartalar ham xuddi bannerlar kabi — 5 piksel ko'tarilib paydo bo'ladi */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  Barcha bannerlar va kartalar uchun yagona chiqish animatsiyasi.

  Harakat ataylab juda kichik — 5 piksel. Katta sakrash ko'zni charchatadi,
  5 piksel esa "paydo bo'ldi" degan tuyg'uni beradi-yu, sezilmaydi.
  cubic-bezier(.22,1,.36,1) — oxiriga borib sekinlashadi, shuning uchun
  harakat to'xtagani bilinmaydi.
*/
@keyframes banner-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes banner-fade {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-2px);
  }
}

.fade-up {
  animation: banner-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Skeleton (yuklanish) animatsiyasi */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface) 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
}

.skeleton-card {
  height: 78px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

/* Test yakunlanganda chiqadigan 🎉 uchun */
.pop {
  animation: pop 0.6s ease;
}

@keyframes pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bir bosishda nusxalanadigan test kodi */
.copy-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 168, 68, 0.14);
  border: 1px solid rgba(0, 168, 68, 0.35);
  color: var(--color-primary);
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.copy-code svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.copy-code:active {
  transform: scale(0.94);
  background: rgba(0, 168, 68, 0.3);
}

/* O'chirish tugmasi — qizil, yorqin */
.delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.38);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.delete-button svg {
  width: 19px;
  height: 19px;
}

.delete-button:active {
  transform: scale(0.88);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5);
}

[data-theme="dark"] .delete-button {
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.5);
}

/* O'quvchi ekranidagi savol qismi (a, b) */
.quiz-part {
  margin-bottom: 14px;
}

.quiz-part .part-letter {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
}

/* O'quvchining har bir savol bo'yicha javobi */
.answer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.answer-row b {
  min-width: 76px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.answer-row.wrong {
  background: rgba(239, 68, 68, 0.07);
  border-radius: var(--radius-sm);
}

.answer-row .right-answer {
  color: #16a34a;
  font-weight: 600;
}

[data-theme="dark"] .answer-row .right-answer {
  color: #86efac;
}

.student-summary {
  cursor: pointer;
}

/* ========== Yangi ko'rinish: sarlavha, panel, pastki menyu ========== */

.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.page-header h2 {
  font-size: 22px;
}

.page-header .back-button {
  flex-shrink: 0;
}

/* Ichki bloklarni ajratib turuvchi quti */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--color-text-muted);
  margin: 18px 0 8px;
}

/* Pastki menyu */
/* "hidden" har doim yashiradi — elementning o'z display uslubi (masalan, chek
   rasmidagi display:block) uni bekor qilib, bo'sh "buzilgan rasm" ko'rsatmasin */
[hidden] {
  display: none !important;
}

.bottom-nav[hidden] {
  display: none;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-item .nav-icon {
  font-size: 18px;
  line-height: 1;
}

.nav-item.active {
  color: var(--color-primary);
  background: rgba(0, 168, 68, 0.12);
}

/*
  Pastki menyu sahifa tagini yopib qo'ymasligi uchun. Matematik klaviatura
  ochiq bo'lsa, uning balandligi ham qo'shiladi (--keyboard-height'ni app.js
  o'lchab beradi) — shunda eng pastdagi maydon ham klaviatura ustiga chiqadi.
*/
#app {
  padding-bottom: calc(96px + var(--keyboard-height, 0px));
}

/* Klaviatura ochiq paytda pastki menyu uning ostida chalkashtirmasin */
body.keyboard-open .bottom-nav {
  visibility: hidden;
}

/* ========== Javoblar panjarasi ========== */

.answer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.answer-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  font-family: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.answer-cell:active {
  transform: scale(0.92);
  border-color: var(--color-primary);
}

.answer-cell .cell-number {
  font-size: 11px;
  color: var(--color-text-muted);
}

.answer-cell .cell-letter {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
}

/* ========== Yozma javoblar jadvali ========== */

/* Yozma javoblar: har bir qism alohida qatorda (36a, 36b, 37a ...) */
.written-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.written-row-gap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.written-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
}

.written-cell .math-input {
  margin: 0 0 6px;
  padding: 8px 10px;
  background: var(--color-bg);
}

.written-cell .math-input:last-child {
  margin-bottom: 0;
}

/* ========== Ball taqsimoti diagrammasi ========== */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
}

.chart-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 100%;
}

.chart-value {
  font-size: 12px;
  color: var(--color-text-muted);
}

.chart-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
}

.chart-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ========== Ishtirokchilar ro'yxati ========== */

.result-line {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 14px;
}

.result-line:last-child {
  border-bottom: none;
}

.result-line:active {
  background: var(--color-border);
}

.result-rank,
.result-score {
  color: var(--color-text-muted);
}

.result-line {
  grid-template-columns: 26px 1fr auto;
}

.result-percent {
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}

/* Ism ostida: to'g'ri • xato • foiz */
.result-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.result-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Ball ostida daraja (A+, A, B+ ...) */
.result-grade {
  display: block;
  font-size: 12px;
  color: var(--color-primary);
}

/* Matematik klaviaturani yopish tugmasi — har doim klaviatura ustida turadi */
.keyboard-close {
  position: fixed;
  right: 12px;
  bottom: calc(var(--keyboard-height, 280px) + 8px);
  z-index: 10050;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background: var(--color-primary-dark, #0a7d3a);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
}

.keyboard-close[hidden] {
  display: none;
}

.keyboard-close:active {
  transform: scale(0.94);
}

/* ========== Javob varaqasi (test bitta sahifada) ========== */

/* Taymer va belgilangan savollar soni varaq aylantirilganda ham ko'rinib turadi */
.quiz-sticky {
  position: sticky;
  top: 0;
  z-index: 15;
  margin: -8px -4px 8px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.answer-sheet {
  padding-top: 4px;
  padding-bottom: 4px;
}

.sheet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.sheet-row:last-child {
  border-bottom: none;
}

.sheet-row-text {
  align-items: flex-start;
}

.sheet-number {
  min-width: 34px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: right;
}

.sheet-row-text .sheet-number {
  padding-top: 18px;
}

.sheet-options {
  flex: 1;
  display: flex;
  gap: 6px;
}

.sheet-option {
  flex: 1;
  max-width: 52px;
  height: 42px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.sheet-option:active {
  transform: scale(0.94);
}

.sheet-option.selected {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.sheet-text-parts {
  flex: 1;
  min-width: 0;
}

.sheet-text-part {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-part {
  min-width: 18px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.sheet-text-part .math-input {
  flex: 1;
  min-width: 0;
}

/* ========== Xususiy maktab ========== */

/* Viloyat / tuman tanlash ro'yxati */
.pick-list {
  padding: 4px 0;
}

.pick-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.pick-item:last-child {
  border-bottom: none;
}

.pick-item span {
  color: var(--color-text-muted);
  font-size: 20px;
}

.pick-item:active {
  background: var(--color-border);
}

/* Fanlarni tanlash "chip"lari */
.subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
}

.subject-chip {
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.subject-chip.selected {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Maktab o'qituvchilari ro'yxati */
.member-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
}

.member-line:last-child {
  border-bottom: none;
}

.member-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(0, 168, 68, 0.12);
  border-radius: 50%;
}

.member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-info small {
  color: var(--color-text-muted);
  font-size: 12.5px;
}

/* Tuman sahifasidagi maktab qatori: nomi va o'qituvchilar soni */
.pick-item .pick-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text);
  font-size: 15px;
}

.pick-item .pick-title small {
  color: var(--color-text-muted);
  font-size: 12.5px;
}

/* Tuman tanlash viloyat tanlanguncha o'chiq ko'rinsin */
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Ochiluvchi ro'yxat qatorlari qorong'i temada ham o'qilsin */
select option {
  color: var(--color-text);
  background: var(--color-surface);
}

/* O'qituvchi fanlari — ochiluvchi ro'yxatlar */
.subject-row {
  margin: 6px 0 0;
}

.subject-row[hidden] {
  display: none;
}

.subject-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subject-row-main select {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.subject-remove {
  flex-shrink: 0;
  width: 44px;
  height: 52px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.subject-custom[hidden] {
  display: none;
}

/* Yashirilgan tugma (hidden) .btn uslubiga qaramay ko'rinmasin */
.btn[hidden] {
  display: none;
}

/* Profil sahifasidagi ma'lumotlar qatori */
.profile-facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}

.profile-facts b {
  text-align: right;
}

/* Sarlavha burchagidagi kichik tugma (masalan, maktabni ulashish) */
.icon-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.icon-button:active {
  transform: scale(0.92);
}

/* ========== Davomat ========== */

.att-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.att-count {
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.att-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.att-row:focus {
  outline: none;
}

.att-row:last-child {
  border-bottom: none;
}

.att-number {
  min-width: 22px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.att-name {
  flex: 1;
  min-width: 0;
}

.att-status {
  flex-shrink: 0;
  min-width: 108px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  transition: background-color 0.15s ease;
}

.att-status.present {
  background: #1e9e4a;
}

.att-status.absent {
  background: #d93636;
}

.att-status.excused {
  background: #e0a800;
  color: #1f2937;
}

.att-status.late {
  background: #2e75b6;
}

/* Saqlash tugmasi pastda doim ko'rinib tursin */
.att-save-bar {
  position: sticky;
  bottom: 0;
  margin: 14px -4px 0;
  padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--color-bg) 70%, transparent);
}

/* Sarlavha burchagidagi "📤 Ulashish" — kichik, lekin yozuvli */
.share-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.share-pill:active {
  transform: scale(0.95);
}

/* Uzun maktab nomi tugmani siqib chiqarmasin */
.page-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Sinf markazi ========== */

.att-take-button {
  min-height: 58px;
  font-size: 17px;
  margin-top: 4px;
}

/* O'quvchilar ro'yxati — kartalar */
.student-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.student-card:active {
  transform: scale(0.98);
}

.student-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
}

.student-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.student-info small {
  color: var(--color-text-muted);
  font-size: 12.5px;
}

/* Davomat foizi: yashil 90+, sariq 70+, qizil — past */
.rate-badge {
  flex-shrink: 0;
  min-width: 52px;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
}

.rate-badge.good {
  color: #ffffff;
  background: #1e9e4a;
}

.rate-badge.mid {
  color: #1f2937;
  background: #e0a800;
}

.rate-badge.low {
  color: #ffffff;
  background: #d93636;
}

.rate-badge.none {
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.empty-state {
  margin-top: 30px;
  text-align: center;
}

/* Pastdan ochiladigan oyna (bottom sheet) */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease;
}

.sheet-backdrop.open {
  background: rgba(0, 0, 0, 0.45);
}

.sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--color-bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet-backdrop.open .sheet {
  transform: translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  background: var(--color-border);
  border-radius: 999px;
}

/* Majburiy maydon belgisi */
.required-mark {
  color: #d93636;
  font-weight: 700;
}

/* Diqqat talab qiladigan karta (masalan, fan kiritilmagan) */
.warning-card {
  border-color: #e0a800;
  background: rgba(224, 168, 0, 0.12);
}

/* Xavfli amal (o'chirish) ogohlantirishi */
.danger-panel {
  padding: 16px;
  margin-top: 4px;
  line-height: 1.5;
  background: rgba(217, 54, 54, 0.1);
  border: 1.5px solid rgba(217, 54, 54, 0.55);
  border-radius: var(--radius-md);
}

.danger-panel ul {
  margin: 6px 0 10px;
  padding-left: 20px;
}

.danger-panel li {
  margin: 4px 0;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14.5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.consent-row input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: #d93636;
}

.btn-danger {
  color: #ffffff;
  background: #d93636;
  border-color: #d93636;
}

.btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Davomat qaysi dars uchun olinayotgani (o'qituvchi profilidagi fan) */
.lesson-chip {
  display: inline-block;
  margin: 10px 0 0;
  padding: 8px 14px;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(0, 168, 68, 0.12);
  border-radius: 999px;
}

/* O'quvchilarni import qilish */
.import-actions {
  display: flex;
  gap: 8px;
}

.import-actions .btn {
  flex: 1;
  margin: 0;
  padding: 12px 8px;
  font-size: 14px;
  text-align: center;
}

.import-file-label {
  cursor: pointer;
}

.import-list {
  max-height: 42vh;
  overflow-y: auto;
  margin: 0;
  padding: 10px 14px 10px 34px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.import-list li {
  padding: 3px 0;
}

#paste-students {
  width: 100%;
  font-size: 15px;
  line-height: 1.5;
}

/* Murojaat uchun adminlar kartasi */
.support-card {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.support-title {
  font-weight: 700;
}

.support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-link {
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-primary);
  background: rgba(0, 168, 68, 0.12);
  border: 1px solid rgba(0, 168, 68, 0.35);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.support-link:active {
  transform: scale(0.95);
}

/* Sinf sarlavhasi ostida kurator */
.class-curator-line {
  margin: -6px 0 10px;
}

/* Kichkina "Murojaat uchun" tugmasi */
.support-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.support-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.support-avatars {
  display: inline-flex;
}

.support-avatars img,
.support-avatars .support-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  object-fit: cover;
}

.support-avatars > * + * {
  margin-left: -8px;
}

.support-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* Adminlar profillari (oynada) */
.support-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.support-photo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 20px;
}

.support-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.support-profile-info small {
  color: var(--color-text-muted);
}

.support-write {
  width: auto;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
}

/* Ha / Yo'q tanlovi */
.choice-toggle {
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;
}

.choice-toggle button {
  flex: 1;
  padding: 12px 10px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.choice-toggle button.active {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Admin rasmi: ostida bosh harf, ustida Telegram rasmi */
.support-avatar {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
}

.support-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-avatar.support-mini {
  width: 26px;
  height: 26px;
  font-size: 12px;
  border: 2px solid var(--color-surface);
}

.support-avatar.support-photo {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

/* "Murojaat uchun" — kichikroq */
.support-pill {
  gap: 6px;
  padding: 4px 11px 4px 4px;
  font-size: 12px;
}

.support-avatar.support-mini {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

/* Bosh sahifada — ekranning eng pastida */
.support-row-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(32px + env(safe-area-inset-bottom));
  z-index: 5;
  margin: 0;
  pointer-events: none;
}

.support-row-bottom .support-pill {
  pointer-events: auto;
  opacity: 0.92;
}

/* Davomat: dars boshlanish — tugash vaqti */
.lesson-time {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 12px 0 4px;
}

.lesson-time label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.lesson-time input {
  width: 100%;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.lesson-time-dash {
  padding-bottom: 12px;
  color: var(--color-text-muted);
}

/* Suzuvchi "O'qituvchi qo'shish" tugmasi — sahifa aylantirilsa ham joyida turadi */
.fab {
  position: fixed;
  right: max(18px, calc((100vw - 520px) / 2 + 18px));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 25;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #00c853, #00a844);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45);
  cursor: pointer;
  touch-action: manipulation;
}

.fab svg {
  width: 26px;
  height: 26px;
}

.fab:active {
  transform: scale(0.92);
}

body.keyboard-open .fab {
  visibility: hidden;
}

/* Admin o'qituvchini bosib lavozim beradi */
.member-line.is-tappable {
  cursor: pointer;
}

.member-line.is-tappable:active {
  background: rgba(0, 168, 68, 0.08);
}

.pick-item.is-selected .pick-title {
  color: var(--color-primary);
}

/* Test kartasidagi "Shartlar" ro'yxati */
.conditions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.condition-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.06);
}

.condition-row.ok {
  border-color: rgba(34, 197, 94, 0.45);
}

.condition-row.bad {
  border-color: rgba(239, 68, 68, 0.45);
}

.condition-state {
  font-size: 18px;
  line-height: 1.3;
}

.condition-text {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.condition-text small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.condition-action {
  margin-top: 8px;
}

/* Sinflar ro'yxati: chapda o'quvchilar soni, o'rtada nom va kurator */
.class-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.class-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  touch-action: manipulation;
}

.class-row:active {
  background: rgba(0, 168, 68, 0.08);
}

.class-count {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 168, 68, 0.14);
  color: var(--color-primary);
}

.class-count b {
  font-size: 19px;
  line-height: 1.1;
}

.class-count small {
  font-size: 10px;
  color: var(--color-text-muted);
}

.class-row.is-mine .class-count {
  background: linear-gradient(135deg, #00c853, #00a844);
  color: #fff;
}

.class-row.is-mine .class-count small {
  color: rgba(255, 255, 255, 0.85);
}

.class-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.class-info b {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-info small {
  font-size: 13px;
  color: var(--color-text-muted);
}

.class-row.is-mine .class-info small {
  color: var(--color-primary);
  font-weight: 600;
}

.class-arrow {
  color: var(--color-text-muted);
  font-size: 20px;
}

/* Maktab ekranidagi sinflar soni — oddiy izoh matni */
.menu-count {
  font-style: normal;
}

/* Maktab ekrani: bo'limlar alohida kartochkalarda, yonma-yon */
.school-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.school-tile.is-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px;
  text-align: left;
}

.school-tile.is-wide .school-tile-icon {
  margin: 0;
}

.school-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 132px;
  padding: 18px 10px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  font-family: inherit;
  text-align: center;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease;
}

.school-tile:active {
  transform: scale(0.95);
}

.school-tile-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
  font-size: 26px;
  border-radius: 16px;
  background: rgba(0, 168, 68, 0.14);
}

.school-tile b {
  font-size: 15px;
  line-height: 1.25;
}

.school-tile small {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.school-tile-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Xodimni chiqarish tugmasi — qizil matn */
.danger-text {
  color: #ef4444;
}

/* Telefon raqam maydoni + "Telegram'dan" tugmasi */
.phone-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-field .input {
  flex: 1;
}

/* Xodimlar ro'yxatida telefon (faqat rahbariyatga) */
.member-phone {
  display: inline-block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.member-phone.missing {
  font-weight: 400;
  color: #d97706;
}

/* Davomat va test natijasi ichidagi katta foiz (o'quvchi kartasidagi kichik .rate-badge'ga tegmaydi) */
.rate-badge-lg {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 8px 10px;
  font-size: 22px;
  font-weight: 800;
  border-radius: 14px;
  color: #fff;
}

.rate-badge-lg small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
}

.rate-badge-lg.good {
  background: #16a34a;
}

.rate-badge-lg.mid {
  background: #d97706;
}

.rate-badge-lg.low {
  background: #dc2626;
}

/* Xodim rasmi (Telegram profil rasmi) */
.member-avatar {
  overflow: hidden;
}

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

/* Xodim sahifasi */
.staff-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 16px;
  text-align: center;
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.contact-actions .btn {
  margin: 0;
  text-decoration: none;
}

.muted-value {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Sinf test natijalari jadvali */
.score-table {
  margin-top: 14px;
  padding: 4px 0;
}

.score-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px 52px 44px;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.score-row:last-child {
  border-bottom: 0;
}

.score-row > span:not(.score-name) {
  text-align: center;
}

.score-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.score-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.score-row.is-absent {
  opacity: 0.55;
}

/* Sinf testi darajasi (A+ … NC) — kichik rangli belgi */
.grade-chip {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  border-radius: 8px;
}

.grade-chip.none {
  color: var(--color-text-muted);
  background: none;
}

/* Natija kiritish formasi */
.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.score-input-row .score-input {
  flex: 0 0 76px;
  width: 76px;
  margin: 0;
  padding: 10px 8px;
  text-align: center;
  font-weight: 700;
}

/* ===== Yuklanish belgilari ===== */

/* Ekran tepasidagi yuguruvchi chiziq */
#top-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#top-loader.active {
  opacity: 1;
}

#top-loader::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #00c853, #00a844, transparent);
  animation: top-loader-run 1s ease-in-out infinite;
}

@keyframes top-loader-run {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}

/* Bosilgan tugma yoki karta — aylanuvchi doiracha */
.is-loading {
  position: relative;
}

.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2.5px solid rgba(0, 200, 83, 0.35);
  border-top-color: #00c853;
  border-radius: 50%;
  animation: spin-loader 0.7s linear infinite;
}

.btn.is-loading:disabled {
  opacity: 0.85;
}

.btn.is-loading::after {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

@keyframes spin-loader {
  to {
    transform: rotate(360deg);
  }
}

/* Maksimaldan oshgan ball — qisqa qizil belgi */
.score-input.is-over {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Davomat tarixi — fan bo'yicha filtr */
.subject-filter {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}

.filter-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #00c853, #00a844);
  border-color: transparent;
}

/* Xodimlar — har biri alohida kartochkada */
.member-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-cards .member-line {
  padding: 13px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

.member-cards .member-line:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* Aylantirilganda kartochkalar pastdan silliq chiqadi */
/* Ekranga kirib kelguncha yashirin; chiqishi — JS (Web Animations) bilan */
.reveal {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
  }
}

/* Test kartasi: ixcham kanal qatorlari */
.test-blocked {
  margin: 10px 0 0;
  font-weight: 600;
  color: var(--color-primary);
}

.channel-rows {
  display: flex;
  flex-direction: column;
  margin: 12px 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.channel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px 6px 12px;
  border-bottom: 1px solid var(--color-border);
}

.channel-row:last-child {
  border-bottom: 0;
}

.channel-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
}

.channel-dot.ok {
  background: #16a34a;
}

.channel-dot.bad {
  background: #dc2626;
}

.channel-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-action {
  display: flex;
  align-items: center;
  gap: 6px;
}

.channel-action .share-pill {
  padding: 7px 12px;
}

.channel-ok {
  font-size: 13px;
  font-weight: 700;
  color: #16a34a;
}

/* Bo'limlar: savol raqamlari tugmachalari */
.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  max-height: 46vh;
  margin-top: 12px;
  overflow-y: auto;
}

.number-chip {
  height: 44px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.number-chip.is-picked {
  color: #ffffff;
  background: linear-gradient(135deg, #00c853, #00a844);
  border-color: transparent;
}

/* ===== Ro'yxatlar — har element alohida kartochkada (yopishib turmasin) ===== */
.panel.pick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
}

.panel.pick-list .pick-item,
.panel.pick-list .pick-item:last-child {
  padding: 15px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.panel.pick-list .pick-item:active {
  transform: scale(0.98);
}

.result-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-cards .result-line,
.result-cards .result-line:last-child {
  padding: 13px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

/* Savol statistikasi: har savol bitta ixcham qator (41b · 🟢 25 · 🔴 22) */
.question-stats {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 6px 14px;
}

.question-stats-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.question-stats-legend .stat-dot:last-of-type {
  margin-left: 8px;
}

.question-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.question-stat:last-child {
  border-bottom: none;
}

.question-stat-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-stat-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}

.stat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-dot.is-correct {
  background: #22c55e;
}

.stat-dot.is-wrong {
  background: #ef4444;
}

.question-stat-share {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Ruxsat so'rovi: o'quvchi profili, chek va tugmalar bitta konteynerda */
.payment-student {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-receipt {
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: 8px;
  text-align: center;
}

.payment-receipt img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 10px;
  cursor: zoom-in;
}

/* Yozma ish bandlari: "bandlar: [−] 3 [+]" — bitta qatorda */
.band-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.band-stepper .icon-button {
  width: 34px;
  height: 34px;
  margin: 0;
}

/* ---------- Test ishlash ekrani: belgilanganlar, "Javobsiz", taymer, tanlash ---------- */

.answer-sheet .sheet-row .sheet-number {
  transition: color 0.2s ease;
}

.answer-sheet .sheet-row.is-answered .sheet-number {
  color: var(--color-primary);
}

.answer-sheet .sheet-row.is-answered .sheet-number::after {
  content: " ✓";
  font-size: 11px;
}

.answer-sheet .sheet-row.is-flash {
  animation: row-flash 1.4s ease;
  border-radius: 10px;
}

@keyframes row-flash {
  0%, 100% { background: transparent; }
  25%, 60% { background: rgba(0, 168, 68, 0.18); background: color-mix(in srgb, var(--color-primary) 18%, transparent); }
}

.jump-unanswered {
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(0, 168, 68, 0.12); /* eski WebView uchun zaxira */
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}

.quiz-timer {
  padding: 2px 8px;
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.quiz-timer.is-warning {
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
}

.quiz-timer.is-danger {
  color: #ffffff;
  background: #dc2626;
  animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.sheet-option.just-picked {
  animation: option-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes option-pop {
  0% { transform: scale(0.86); }
  100% { transform: scale(1); }
}

.sheet-option.selected {
  box-shadow: 0 4px 12px rgba(0, 168, 68, 0.35);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .sheet-option.just-picked,
  .quiz-timer.is-danger,
  .answer-sheet .sheet-row.is-flash {
    animation: none;
  }
}

/* ---------- Test yakunlandi: chiziladigan ✓, statistika, konfetti ---------- */

.finish-hero {
  text-align: center;
  padding: 12px 0 6px;
}

.finish-hero h2 {
  margin: 10px 0 4px;
}

.finish-check {
  width: 96px;
  height: 96px;
}

.finish-check-ring {
  fill: none;
  stroke: #22c55e;
  stroke-width: 6;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  animation: check-draw 0.6s ease-out forwards;
}

.finish-check-mark {
  fill: none;
  stroke: #22c55e;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: check-draw 0.35s 0.5s ease-out forwards;
}

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

.finish-stat {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  animation: fade-up 0.4s 0.7s ease-out both;
}

.finish-stat b {
  color: var(--color-primary);
  font-size: 18px;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 60;
}

.confetti-layer i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1);
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  to { transform: translate(var(--drift, 0), 105vh) rotate(540deg); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .finish-check-ring,
  .finish-check-mark {
    animation: none;
    stroke-dashoffset: 0;
  }
  .finish-stat {
    animation: none;
  }
}

/* ---------- O'quvchi natijasi: daraja nishoni va bo'limlar chizig'i ---------- */

.review-hero {
  text-align: center;
  padding: 4px 0 8px;
}

.grade-badge {
  --grade-color: var(--color-primary);
  width: 104px;
  height: 104px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--grade-color);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 0 0 6px rgba(255, 255, 255, 0.25);
  animation: badge-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.grade-badge span {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.grade-badge small {
  font-size: 11px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes badge-in {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

.section-bars .section-bar + .section-bar {
  margin-top: 10px;
}

.section-bars .progress-fill {
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .grade-badge {
    animation: none;
  }
  .section-bars .progress-fill {
    transition: none;
  }
}

/* Tugmalar sahifa shriftini meros oladi (ba'zi WebView'larda <button> o'z shriftida chiqardi) */
.btn,
.share-pill,
.icon-button,
button {
  font-family: inherit;
}

/* Test ekranining tepa paneli: hisob, "Javobsiz", taymer — bitta qatorda, bo'linmaydi */
.quiz-sticky .row-between {
  gap: 8px;
  flex-wrap: nowrap;
}

#answered-counter,
.quiz-timer,
.jump-unanswered {
  white-space: nowrap;
}

#answered-counter {
  font-size: 15px;
}

.quiz-timer {
  font-size: 15px;
}

/* Test yaratish: tepada — pullik/bepul tanlovi */
.test-kind-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.test-kind-banner.is-paid {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.10);
}

.test-kind-banner.is-free {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
}