/* ============================================================
   Dizayn tokenlari — shadcn/ui uslubida (neytral zinc palitra,
   Inter shrift, 0.75rem radius, ingichka border va yumshoq soya).
   Koreys matni uchun Noto Sans KR fallback sifatida ishlatiladi.
   Kunduzgi/tungi rejim [data-theme] orqali almashtiriladi.
   ============================================================ */
:root {
  /* ---- ZabonGo brend ranglari ----
     Yashil #4AC123 - logodan olingan, brendning belgisi. Lekin oq matn
     u bilan o'qilmaydi (kontrast 2.35, kerak 4.5). Shuning uchun
     tugmalarda to'qroq yashil (--primary), yorqin yashil esa belgi va
     urg'u uchun (--brand) ishlatiladi.
     Apelsin - faqat urg'u: tanga, unvon, ketma-ketlik. */
  --background: #f6f7f8;
  --foreground: #16211a;
  --card: #ffffff;
  --card-foreground: #16211a;
  --muted: #f0f1f3;
  --muted-foreground: #667065;
  --border: #e6e8ea;
  --input: #dcdfe2;
  --brand: #4AC123;                 /* logo yashili - belgi va bezak */
  --primary: #2F8516;               /* tugma foni (oq matn bilan 4.68) */
  --primary-foreground: #ffffff;
  --primary-hover: #27700f;
  --secondary: #eef2ea;
  --secondary-foreground: #16211a;
  --accent: #e6f6e0;
  --accent-foreground: #27700f;
  --destructive: #d93a3a;
  --destructive-foreground: #ffffff;
  --success: #2F8516;
  --gold: #B35309;                  /* brend apelsini (oq matn bilan 5.05) */
  --orange: #F5821F;                /* yorqin apelsin - belgilar uchun */
  --ring: #4AC123;
  --radius: 1rem;
  --shadow-sm: 0 1px 2px 0 rgb(20 20 31 / 0.04);
  --shadow: 0 4px 14px -2px rgb(20 20 31 / 0.08);
  --gradient-brand: linear-gradient(135deg, #4AC123, #2F8516);
  --glow: 0 8px 20px -6px rgb(74 193 35 / 0.45);

  /* Stat-chip belgi ranglari (bosh sahifadagi 4ta karta) */
  --chip-purple: #2F8516;           /* eski nom, endi brend yashili */
  --chip-purple-bg: #e6f6e0;
  --chip-green: #2F8516;
  --chip-green-bg: #e6f6e0;
  --chip-blue: #2F6FD0;
  --chip-blue-bg: #E9F1FC;
  --chip-orange: #C85E06;
  --chip-orange-bg: #fdefe2;

  /* Eski nomlar - HTML/JS o'zgarmasligi uchun yangi tokenlarga moslab qoldirilgan */
  --ink: var(--foreground);
  --paper: #f6f7f8;
  --paper-soft: var(--muted);
  --card-bg: var(--card);
  --celadon: var(--primary);
  --celadon-dark: var(--primary);
  --vermilion: var(--destructive);
  --line: var(--border);

  /* DIQQAT: "Noto Sans" birinchi turibdi. Ilgari ro'yxat telefonning
     o'z shriftidan boshlanardi va rus/qozoq/qirg'iz/tojik matnlar har
     xil telefonda har xil, ba'zan xunuk ko'rinardi. Noto Sans kirill
     harflari uchun maxsus chizilgan va koreyscha shrift bilan bir
     oiladan - shuning uchun til almashganda ilova o'zgarmaydi. */
  /* DIQQAT: "Noto Sans KR" ham ro'yxatda turishi SHART.
     Unvon nomlarida koreys harflari bor ("Покоритель 한글") va ular
     rus, qozoq, qirg'iz, tojik interfeysida ham chiqadi. Koreys shrifti
     bo'lmasa telefon o'sha harflar o'rniga bo'sh kvadrat ko'rsatadi.
     Ikkala shrift bir oiladan - aralash matn bir tekis ko'rinadi. */
  --font-display: "Noto Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* Arab alifbosi - dariy va pashtu uchun */
  --font-ar: "Noto Naskh Arabic", "Noto Sans Arabic", "Tahoma", sans-serif;
  --font-kr: "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", -apple-system, sans-serif;
  /* Yapon va xitoy so'zlari uchun. Koreys shrifti yapon kanasini va
     ba'zi ieroglif shakllarini to'g'ri chizmaydi - shuning uchun
     ro'yxatda JP va SC ham turadi. */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-sc: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ------------------------------------------------------------------
   OCH YASHIL - brend mavzusi. Fon brend yashilining eng och tusi,
   kartalar oq. Yorug' mavzudan aniq farq qiladi, shuning uchun
   "ikkita bir xil rejim" hissi qolmaydi.
   ------------------------------------------------------------------ */
[data-theme="green"] {
  --background: #e9f5e3;
  --foreground: #142116;
  --card: #ffffff;
  --card-foreground: #142116;
  --muted: #dcefd3;
  --muted-foreground: #5b6d58;
  --border: #cfe6c4;
  --input: #c6e0ba;
  --brand: #4AC123;
  --primary: #2F8516;
  --primary-foreground: #ffffff;
  --primary-hover: #27700f;
  --secondary: #dcefd3;
  --secondary-foreground: #142116;
  --accent: #d3edc8;
  --accent-foreground: #245f0d;
  --destructive: #cf3535;
  --destructive-foreground: #ffffff;
  --success: #2F8516;
  --gold: #A34C08;
  --orange: #F5821F;
  --ring: #4AC123;

  --gradient-brand: linear-gradient(135deg, #4AC123, #2F8516);
  --glow: 0 8px 20px -6px rgb(74 193 35 / 0.45);

  --chip-purple: #2F8516;
  --chip-purple-bg: #d3edc8;
  --chip-green: #2F8516;
  --chip-green-bg: #d3edc8;
  --chip-blue: #2F6FD0;
  --chip-blue-bg: #dfeafb;
  --chip-orange: #A34C08;
  --chip-orange-bg: #fae3cf;

  --ink: var(--foreground);
  --paper: #e9f5e3;
  --paper-soft: var(--muted);
  --card-bg: var(--card);
  --celadon: var(--primary);
  --celadon-dark: var(--primary);
  --vermilion: var(--destructive);
  --line: var(--border);
}

[data-theme="dark"] {
  /* Qorong'i rejimda yashil YORQINROQ bo'ladi - to'q fonda to'q yashil
     ko'rinmay ketardi. Tugma matni esa to'q rangda. */
  --background: #0b1210;
  --foreground: #eef4ec;
  --card: #131b17;
  --card-foreground: #eef4ec;
  --muted: #1b241f;
  --muted-foreground: #93a396;
  --border: #253028;
  --input: #253028;
  --brand: #5FD137;
  --primary: #5FD137;
  --primary-foreground: #08110c;
  --primary-hover: #7ade55;
  --secondary: #1b241f;
  --secondary-foreground: #eef4ec;
  --accent: #14301b;
  --accent-foreground: #86E463;
  --destructive: #f2637d;
  --destructive-foreground: #08110c;
  --success: #5FD137;
  --gold: #F5A623;
  --orange: #FB9A3C;
  --ring: #5FD137;

  --gradient-brand: linear-gradient(135deg, #5FD137, #2F8516);
  --glow: 0 8px 24px -6px rgb(95 209 55 / 0.45);

  --chip-purple: #5FD137;
  --chip-purple-bg: #14301b;
  --chip-green: #5FD137;
  --chip-green-bg: #14301b;
  --chip-blue: #5b9dff;
  --chip-blue-bg: #101f36;
  --chip-orange: #FB9A3C;
  --chip-orange-bg: #2c1c12;

  --ink: var(--foreground);
  --paper: #0b1210;
  --paper-soft: var(--muted);
  --card-bg: var(--card);
  --celadon: var(--primary);
  --celadon-dark: var(--primary);
  --vermilion: var(--destructive);
  --line: var(--border);
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.15s ease, color 0.15s ease;
}

/* `main` ning o'zi `#app`. U ustunga aylantirilgan va ekran balandligini
   TO'LIQ egallaydi - shunda ichidagi muallif yozuvi haqiqatan pastga
   yopishadi.

   `dvh` (dynamic viewport height) ishlatilgan, `vh` emas: telefonda
   brauzer paneli chiqib-kirganda `vh` noto'g'ri qiymat beradi va yozuv
   ekran o'rtasida osilib qolardi. Telegram ichida bu ayniqsa sezilardi. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Dekorativ chiziq - neytral, minimal */
.pattern-band {
  height: 3px;
  width: 100%;
  background: var(--primary);
  opacity: 0.9;
}

/* ---------- Fondagi uchuvchi zarralar ----------
   Zarralar butun ilova ortida sekin suzib yuradi. Faqat `transform` va
   `opacity` o'zgaradi - bularni brauzer GPU'da bajaradi, JavaScript
   har kadrda ishlamaydi. Shu sababli eski telefonlarda ham ilovani
   sekinlashtirmaydi.

   Zarralar app.js'da bir marta yaratiladi; agar telefon sozlamalarida
   "animatsiyani kamaytirish" yoqilgan bo'lsa - umuman yaratilmaydi. */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.particle {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: particleFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes particleFloat {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: var(--p-opacity, 0.5); }
  88%  { opacity: var(--p-opacity, 0.5); }
  100% { transform: translate3d(var(--p-drift, 20px), calc(-100vh - 40px), 0) scale(1); opacity: 0; }
}

/* Ilova mazmuni zarralar ustida turadi */
#app, .bottom-nav, .app-header {
  position: relative;
  z-index: 1;
}

/* Telefonda "animatsiyani kamaytirish" yoqilgan bo'lsa - hech qanday
   harakat bo'lmaydi (batareya va qulaylik uchun) */
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.app-header {
  text-align: center;
  padding: 12px 0 16px;
  position: relative;
}

/* Sarlavha USTIDAGI boshqaruv qatori: til tanlagich chapda, mavzu
   tugmasi o'ngda. `min-height` - til tugmasi yashirin bo'lganda ham
   qator balandligi o'zgarmasin (logo sakramasin). */
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 2px;
}

.theme-wrap { margin-left: auto; }

.theme-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  flex: none;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:active {
  background: var(--muted);
}

/* HOZIR QAYSI TILNI o'rganayotgani. Kengligi CHEKLANGAN: til nomi
   uzun bo'lsa ("Português", "O'zbekcha") tugma butun qatorni egallab
   olmasin - ortiqchasi uch nuqta bilan qisqartiriladi. */
.content-lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 62%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px 7px 9px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--card-foreground);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease;
}

.content-lang-btn:active { background: var(--muted); }
.content-lang-btn .ic { width: 14px; height: 14px; opacity: 0.6; flex: none; }
.content-lang-btn .ic-caret { opacity: 0.45; }
#content_lang_flag { flex: none; }
#content_lang_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Til tanlash ro'yxatidagi har bir qator */
.content-lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--card-foreground);
  text-align: left;
  cursor: pointer;
}

.content-lang-row:last-child { border-bottom: none; }
.content-lang-row .flag { font-size: 1.375rem; }
.content-lang-row.active { color: var(--primary); }
.content-lang-row .check { margin-left: auto; color: var(--primary); }

/* Ro'yxatdan o'tishdagi til tanlash kartalari - kichik dropdown emas,
   chunki bu ENG MUHIM qaror: butun ilova shu tanlovga qarab o'zgaradi. */
.content-lang-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-lang-card {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.content-lang-card .flag { font-size: 1.75rem; }
.content-lang-card .name { font-size: 0.8125rem; font-weight: 700; color: var(--card-foreground); }

.content-lang-card.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.hangeul-mark {
  display: inline-block;
  font-family: var(--font-kr);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--accent-foreground);
  background: var(--accent);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.app-header h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 6px 0 3px;
  color: var(--foreground);
}

.subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Kartalar */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.card h2 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--card-foreground);
}

.hint {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0 0 16px;
}

/* Ro'yxatdan o'tishdagi naql - ajratib turish uchun kursiv va chap
   chegara chizig'i, lekin diqqatni asosiy shakldan chalg'itmaydigan
   darajada yumshoq. */
.onboarding-quote {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted-foreground);
  border-left: 2px solid var(--primary);
  padding: 2px 0 2px 12px;
  margin: 2px 0 20px;
  line-height: 1.5;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  margin-bottom: 14px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--foreground);
}

/* Forma elementlari */
.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--foreground);
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.875rem;
  font-family: var(--font-body);
  background: var(--background);
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}

.btn-primary, .btn-secondary, .btn-tiny {
  width: 100%;
  padding: 11px 16px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  margin-bottom: 8px;
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease,
              transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

/* ---------- Bosilish animatsiyasi ----------
   Bosganda tugma sal kichrayadi va qo'yib yuborganda joyiga qaytadi.
   Faqat `transform` ishlatiladi - bu GPU'da bajariladi va qayta
   chizishni talab qilmaydi, shuning uchun sekinlashtirmaydi. */
.btn-primary:active,
.btn-secondary:active,
.btn-tiny:active,
.lesson-btn:active,
.menu-row:active,
.tab:active,
.icon-btn:active,
.rank-card:active,
.choice-btn:active,
.battle-banner:active {
  transform: scale(0.97);
}

.avatar-option:active,
.theme-toggle:active {
  transform: scale(0.92);
}

/* Yuqoridagi elementlarda `transform` uchun o'tish (transition) qo'shamiz -
   aks holda kichrayish keskin bo'lib qolardi */
.lesson-btn,
.menu-row,
.tab,
.icon-btn,
.rank-card,
.choice-btn,
.battle-banner,
.avatar-option,
.theme-toggle {
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #ffffff;
  box-shadow: var(--glow);
}

.btn-primary:active { filter: brightness(0.92); transform: scale(0.99); }

.btn-secondary {
  background: var(--card);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}

.btn-secondary:active { background: var(--muted); }

.btn-tiny {
  width: auto;
  flex: 1;
  padding: 8px 10px;
  font-size: 0.75rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}

.danger {
  background: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
  border: 1px solid var(--destructive) !important;
}

.secondary {
  background: var(--card);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 7px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.error {
  color: var(--destructive);
  font-size: 0.75rem;
  margin-top: 4px;
}

.muted {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

/* Profil kartasi */
.profile-info {
  /* Uzun ism yoki uzun unvon bo'lsa bu blok qisqarishi kerak - aks
     holda o'ng tomondagi tugmalarni ekrandan itarib chiqarardi. */
  flex: 1;
  min-width: 0;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--primary-foreground);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 4px 0 18px;
}

.avatar-option {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 2px;
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.05s ease;
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-option.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.avatar-option:active {
  transform: scale(0.95);
}

/* ---------- Jins tanlash (ikki tugmali qator) ---------- */
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}

.choice-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.choice-btn.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

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

/* ---------- Majburiy kirish testi oynasi ---------- */
.intro-modal-card {
  text-align: center;
}

.intro-modal-mark {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Reytingda hudud/davlat yozuvi ---------- */
.lb-place {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-top: 1px;
}

.podium-place {
  font-size: 0.625rem;
  color: var(--muted-foreground);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.icon-btn {
  margin-left: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.icon-btn:first-of-type { margin-left: auto; }

.icon-btn svg { width: 18px; height: 18px; }

.icon-btn:active { background: var(--muted); }

/* Muallif yozuvi. `margin-top: auto` uni sahifaning ENG PASTIGA
   itaradi - kontent kalta bo'lsa ham (masalan yuklanish ekranida)
   ekranning quyi qismida turadi, uzun bo'lsa kontentdan keyin keladi.
   Pastdagi bo'sh joy taxminan 1 sm. */
/* Muallif yozuvi. `margin-top: auto` uni ustunning ENG PASTIGA suradi,
   pastdagi bo'shliq esa uni ekran chetiga yopishtirib qo'ymaydi -
   taxminan bir santimetr joy qoladi. */
.app-footer {
  margin-top: auto;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
  opacity: 0.75;
  padding: 26px 0 calc(38px + env(safe-area-inset-bottom));
}

/* Pastki menyu chiqqanda yozuv uning ostida qolib ketmasin */
body.has-nav .app-footer {
  padding-bottom: 18px;
}

.profile-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--card-foreground);
  /* Bu yerda vertikal joy bor - uzun unvon kesilmaydi, keyingi
     qatorga tushadi. Ammo hech qachon kartadan chiqib ketmaydi. */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.profile-region {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 1px;
}

.pin-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Statistika katakchalari */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.stat-box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.stat-chip {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-chip svg { width: 19px; height: 19px; }

.stat-chip-purple { background: var(--chip-purple-bg); color: var(--chip-purple); }
.stat-chip-green { background: var(--chip-green-bg); color: var(--chip-green); }
.stat-chip-blue { background: var(--chip-blue-bg); color: var(--chip-blue); }
.stat-chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange); }

.stat-text {
  min-width: 0;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* UZUN QIYMATLAR ("5750/37500") qutiga sig'masdi - uzunligiga qarab
   shrift kichrayadi (app.js: fitStatValues). */
.stat-value.stat-long { font-size: 1.0625rem; }
.stat-value.stat-xlong { font-size: 0.875rem; }

.stat-label {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-wave {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 46px;
  height: 8px;
  opacity: 0.6;
}

.stat-wave-purple { color: var(--chip-purple); }
.stat-wave-green { color: var(--chip-green); }
.stat-wave-blue { color: var(--chip-blue); }
.stat-wave-orange { color: var(--chip-orange); }

/* Reyting kartalari (tugma sifatida) */
.rank-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.rank-card {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  padding: 16px 12px 40px;
  text-align: center;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  min-height: 118px;
  box-shadow: var(--glow);
  transition: opacity 0.15s ease;
}

.rank-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  opacity: 0.35;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 120px 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='46' viewBox='0 0 120 46'%3E%3Cg fill='white'%3E%3Crect x='2' y='22' width='14' height='24'/%3E%3Cpolygon points='9,10 15,22 3,22'/%3E%3Crect x='20' y='16' width='10' height='30'/%3E%3Cpolygon points='25,6 30,16 20,16'/%3E%3Crect x='34' y='26' width='16' height='20'/%3E%3Crect x='54' y='12' width='9' height='34'/%3E%3Cpolygon points='58.5,4 63,12 54,12'/%3E%3Crect x='66' y='24' width='13' height='22'/%3E%3Crect x='83' y='18' width='11' height='28'/%3E%3Cpolygon points='88.5,8 94,18 83,18'/%3E%3Crect x='98' y='27' width='20' height='19'/%3E%3C/g%3E%3C/svg%3E");
}

.rank-card:active { opacity: 0.85; }

.rank-card-gold {
  background: linear-gradient(135deg, #f2c14e, #d69e1f);
  color: #2b1c00;
}

/* Dunyo bo'yicha reyting - viloyat/davlat kartalari ostida, butun enida */
.rank-card-world {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #2aa39a, #10716d);
  color: #ffffff;
  margin-bottom: 14px;
}

/* Dunyo kartasidagi belgi oltin emas, kartaning o'z rangida bo'lsin */
.rank-card-world .rank-badge svg {
  color: #10716d;
}

.rank-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.9;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.rank-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.rank-total {
  font-size: 0.6875rem;
  opacity: 0.9;
  margin-top: 2px;
}

.rank-badge {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--card);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.rank-badge svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
}

.rank-badge-num {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(6px);
  background: var(--primary);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Reyting jadvali */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--muted);
  padding: 4px;
  border-radius: calc(var(--radius) - 2px);
}

.tab {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  border-radius: calc(var(--radius) - 6px);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  /* Uchta tab bo'lganda uzun davlat nomi qatorni buzmasin */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.leaderboard-list li.me {
  background: var(--accent);
  border-radius: calc(var(--radius) - 4px);
  font-weight: 700;
  border-bottom-color: transparent;
}

.lb-rank {
  width: 22px;
  color: var(--muted-foreground);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  flex-shrink: 0;
  text-align: center;
}

.lb-rank.medal {
  font-size: 1rem;
}

.lb-name-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-row-progress {
  height: 4px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
  max-width: 120px;
}

.lb-row-progress-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 999px;
}

.lb-change {
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.lb-change.up { color: var(--success); }
.lb-change.down { color: var(--destructive); }
.lb-change.flat { color: var(--muted-foreground); }

/* ---------- Reyting "hero" kartasi ---------- */
.lb-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.lb-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.lb-hero-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  overflow: hidden;
}

.lb-hero-crown {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  line-height: 1;
  z-index: 1;
}

.lb-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lb-hero-info .muted {
  font-size: 0.75rem;
}

.lb-hero-rank {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.lb-hero-delta {
  font-size: 0.6875rem;
  font-weight: 700;
  margin-top: 2px;
}

.lb-hero-delta.up { color: var(--success); }
.lb-hero-delta.down { color: var(--destructive); }

.lb-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.lb-hero-stats div {
  display: flex;
  flex-direction: column;
}

.lb-hero-stats .muted {
  font-size: 0.6875rem;
}

.lb-hero-stats strong {
  font-size: 0.875rem;
  color: var(--foreground);
}

.lb-hero-gap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.lb-hero-gap strong {
  color: var(--primary);
  margin: 0 4px;
}

.lb-hero-progress {
  margin-top: 8px;
  height: 6px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
}

.lb-hero-progress-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 999px;
}

.lb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gradient-brand);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  overflow: hidden;
}

.lb-name {
  flex: 1;
  /* Flex elementi ham "min-width: auto" bilan keladi - unvon nishoni
     uzun bo'lsa qator kengayib, sahifa yon tomonga siljirdi. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-score {
  color: var(--foreground);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

/* Lug'at - darslar ro'yxati */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* KITOB KARTALARI - mavzular ro'yxatining o'zida, oddiy mavzu
   tugmalari bilan bir qatorda ko'rinadi. Kitoblar bo'lsa - eng
   tepada, avtomatik grid (necha ustun sig'sa shuncha) shaklida. */
.book-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  /* Kenglik USTUNDAN olinadi. Ilgari 104px qilib qotirilgan edi:
     tor telefonda uchinchi karta sig'masdan pastga tushar va
     qatorning o'ng tomonida bo'sh joy qolardi. */
  width: auto;
  min-width: 0;
}

/* Kitob kartalari shu o'ram ichida, gorizontal, ekran torlik qilsa
   qatorlab tushadi - qolgan (kitobsiz) mavzu tugmalari esa o'ramdan
   TASHQARIDA, avvalgidek ustunda davom etadi. */
.book-grid-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

/* Qatorda 2 ta - kattaroq muqova */
.book-grid-row.view-grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Muqova karta kengligiga moslashadi - 2 yoki 3 ustunda ham
   bo'sh joy qolmaydi. */
.book-cover, .book-cover-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
}

/* RO'YXAT - rasmsiz, avvalgi ko'rinish: har biri alohida qator. */
.book-grid-row.view-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.book-grid-row.view-list .book-card {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border-radius: calc(var(--radius) - 4px);
  text-align: left;
}

.book-grid-row.view-list .book-cover,
.book-grid-row.view-list .book-cover-placeholder {
  display: none;
}

.book-grid-row.view-list .book-card-name {
  max-width: none;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  min-width: 0;
}

.book-grid-row.view-list .book-card-count {
  margin-top: 0;
  flex: none;
}

/* Sarlavha qatori: nom chapda, ko'rinish tugmalari o'ngda */
.topics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.topics-head h2 { margin-right: auto; }

.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  flex: none;
}

.view-btn {
  width: 30px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
}

.view-btn svg { width: 16px; height: 16px; }

.view-btn.active {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Muqova TO'LIQ ko'rinadi - chetlari kesilmaydi.
   Ilgari "cover" rejimi ramkaga sig'masa rasmni kesardi: kengroq muqovalar
   (masalan Shifohiya, nisbati 4:5) yon tomonlaridan qirqilib, siqilgandek
   ko'rinardi. Endi rasm butunligicha joylashadi, qolgan ingichka joy fon
   rangida qoladi. Ramka nisbati 3:4 - ko'pchilik kitob muqovasiga eng yaqin. */
.book-cover {
  object-fit: contain;
  background: var(--muted);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.book-cover-placeholder {
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
}

.book-card-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--card-foreground);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Mustaqil mavzu kartasidagi so'z soni - kitoblarda bu yo'q (ular
   ichida bir nechta dars bor, yagona son ma'nosiz), shuning uchun
   faqat mustaqil mavzularda ko'rinadi. */
.book-card-count {
  font-size: 0.6875rem;
  margin-top: -2px;
}

.lesson-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* "YODLANGAN" belgisi - dars testi xatosiz ishlangan bo'lsa chiqadi.
   Dars ochiqligicha qoladi, bu faqat ishora: ro'yxatga qarab qaysi
   darsga vaqt sarflashni tez tanlash uchun. */
.lesson-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  flex: none;
}

[data-theme="dark"] .lesson-done {
  background: rgba(95, 209, 55, 0.18);
  color: #7BD95A;
}

.lesson-btn:active {
  background: var(--muted);
}

/* Lug'at - yuqori qator (orqaga + audio) */
.dict-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.875rem;
  font-family: var(--font-body);
  margin-bottom: 12px;
  background: var(--background);
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}

.search-result-row {
  width: 100%;
  margin-bottom: 8px;
  font-size: 0.875rem;
}

.section-subhead {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 18px 0 10px;
  color: var(--muted-foreground);
}

.profile-lesson-row {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
}

.profile-lesson-name {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 4px;
  color: var(--card-foreground);
}

.profile-lesson-meta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.audio-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Lug'at - ustun sarlavhalari (ko'z belgisi bilan) */
.dict-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 10px;
}

.dict-col-header {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 8px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.15s ease;
}

.dict-col-header .eye {
  font-size: 0.8125rem;
}

.dict-col-header.hidden-state {
  opacity: 0.55;
}

/* Lug'at - so'zlar ro'yxati (har biri alohida quti) */
.dict-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dict-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

/* O'qilishi bor tillar (xitoy, yapon): so'z | o'qilishi | ma'no */
.dict-list.has-reading .dict-row,
.dict-header-row.has-reading {
  /* minmax(0, ...) - ustun matn uzunligidan qat'i nazar ekranga
     sig'adi. Ilgari uzun so'z (爱开玩笑) ustunni kengaytirib, uchinchi
     ustun ekrandan chiqib ketardi. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}
.dict-row, .dict-header-row { min-width: 0; }
.dict-row > .dict-cell { min-width: 0; overflow-wrap: anywhere; }

/* MA'NO USTUNI: so'z o'rtasidan tasodifiy kesilmaydi. U faqat
   bo'g'in chegarasidan ko'chiriladi ("tortin-masdan") - bo'g'inlar
   dastur tomonidan belgilanadi, chiziqchani brauzer o'zi qo'yadi.
   Ichki bo'shliq va shrift biroz kichraytirildi: ko'p so'z butunligicha
   sig'adi va umuman ko'chirilmaydi. */
.dict-row > .dict-cell.uz {
  overflow-wrap: break-word;   /* faqat bo'g'inga ham sig'masa - oxirgi chora */
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
  padding-left: 6px;
  padding-right: 6px;
}
.dict-list.has-reading .dict-cell.uz {
  font-size: calc(0.94rem * var(--dict-scale, 1));
}
.dict-cell.rd {
  font-size: calc(0.95rem * var(--dict-scale, 1));
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: 0.01em;
}
#toggle_rd_btn.hidden { display: none; }

/* PINYIN: so'z o'rtasidan tasodifiy kesilmaydi. Avval shrift kichrayadi
   (ilova o'zi hisoblaydi), shunda ham sig'masa - faqat bo'g'in
   chegarasidan ko'chadi ("zhōng-guó-cài"). */
.dict-row > .dict-cell.rd {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.tip-box {
  display: flex;
  gap: 10px;
  background: var(--accent);
  border-radius: calc(var(--radius) - 4px);
  padding: 12px 14px;
  margin-top: 14px;
}

.tip-box-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tip-box-icon svg { width: 15px; height: 15px; }

.tip-box strong {
  font-size: 0.8125rem;
  color: var(--accent-foreground);
}

.tip-box p {
  margin: 3px 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.dict-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 12px 10px;
  text-align: center;
  font-size: calc(1rem * var(--dict-scale, 1));
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  min-height: 52px;
  background: var(--card);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dict-cell.kr {
  font-family: var(--font-kr);
  font-weight: 600;
  border-color: var(--primary);
  color: var(--primary);
  /* So'z o'z o'lchamiga ega (har til uchun alohida, --word-scale) */
  font-size: calc(1rem * var(--dict-scale, 1) * var(--word-scale, 1));
}

/* So'zning o'qilishi (yapon: 学校 ostida がっこう) */
.dict-reading {
  display: block;
  margin-top: 2px;
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.75;
}

.dict-cell.uz {
  border-color: var(--border);
  color: var(--foreground);
}

.dict-cell.masked {
  background: var(--muted);
  color: var(--muted-foreground);
}

/* Xabarlar */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  max-height: 50vh;
  overflow-y: auto;
}

.message-bubble {
  padding: 9px 12px;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.8125rem;
  max-width: 85%;
}

.message-bubble.from-user {
  background: var(--primary);
  color: var(--primary-foreground);
  align-self: flex-end;
}

.message-bubble.from-admin {
  background: var(--muted);
  color: var(--foreground);
  align-self: flex-start;
}

.message-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-compose textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  background: var(--background);
  color: var(--foreground);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.message-compose textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}

/* Umumiy */
.hidden { display: none !important; }

/* ---------- Yuklanish ekrani ----------
   Ilgari bu shunchaki sahifaning yuqorisidagi "Yuklanmoqda..." yozuvi edi:
   ekranning tepasida osilib turar, hech qanday harakat bo'lmagani uchun
   dastur qotib qolgandek taassurot qoldirardi. Endi yozuv pastga tushdi
   va yonida jonli animatsiya bor. */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  min-height: 40vh;
  padding: 24px 0;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

/* `.hidden` bilan bir xil kuchda bo'lmasin uchun alohida yozamiz */
.loading.hidden { display: none !important; }

.loading-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* ---------- YUKLANISH BELGISI ----------
   Til-neytral: bitta harf ("Z") pulsatsiya qiladi, atrofida halqa
   tarqaladi. Hech qanday tilga bog'liq matn yo'q - Zabongo bir nechta
   tilni o'z ichiga oladi, shuning uchun yuklanish ekrani ham
   bitta tilga bog'lanmasligi kerak. */
.loading-mark {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  animation: loading-breathe 1.5s ease-in-out infinite;
}

.loading-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid var(--primary);
  animation: loading-ripple 1.5s ease-out infinite;
}

@keyframes loading-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@keyframes loading-ripple {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Xatolik yozuvi (faqat server javob bermaganda chiqadi) */
.loading-text {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Harakat kamaytirilgan rejimda animatsiya to'xtaydi */
@media (prefers-reduced-motion: reduce) {
  .loading-mark, .loading-mark::after { animation: none; }
}

.loading-dots {
  display: flex;
  gap: 7px;
}

.loading-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  animation: loading-bounce 1.1s ease-in-out infinite;
}
.loading-dots i:nth-child(2) { animation-delay: 0.16s; }
.loading-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes loading-bounce {
  0%, 100% { transform: translateY(0);    opacity: 0.35; }
  40%      { transform: translateY(-7px); opacity: 1; }
}

/* Harakat kamaytirilgan rejim (telefon sozlamasi) - animatsiya o'chadi */
@media (prefers-reduced-motion: reduce) {
  .loading-dots i { animation: none; }
}

/* Server javob bermaganda chiqadigan "Qayta urinish" tugmasi.
   Ilgari bunday tugma yo'q edi: ilova "Yuklanmoqda..." da qotib
   qolardi va odam Telegram'ni yopishdan boshqa yo'l topmasdi. */
.retry-btn {
  margin-top: 14px;
  padding: 10px 22px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.retry-btn:active { transform: scale(0.97); }

/* ---------- Test (Quiz) ---------- */
.quiz-start-btn {
  margin-top: 16px;
  width: 100%;
  /* Belgi va yozuv BIRGA markazda turadi. Ilgari yozuv ikki qatorga
     tushganda belgi birinchi so'z bilan qolib, matn chetga surilgandek
     ko'rinardi. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.quiz-start-btn .ic { flex: none; }
.quiz-start-btn .btn-label { min-width: 0; line-height: 1.25; }

.quiz-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.quiz-top-row .back-link {
  margin-bottom: 0;
}

.quiz-progress-pill {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 5px 12px;
}

.quiz-dash-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}

.quiz-dash {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--muted);
}

.quiz-dash.filled {
  background: var(--primary);
}

.card h2.quiz-word {
  text-align: center;
  font-family: var(--font-kr);
  /* Tanlangan til so'z o'lchami testda ham (1.0 dan kichik bo'lmaydi) */
  font-size: calc(2.75rem * max(1, var(--word-scale, 1) * 0.8));
  font-weight: 700;
  line-height: 1.2;
  margin: 20px 0 0;
  color: var(--foreground);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.quiz-option-btn {
  position: relative;   /* halqa va ✓ belgisi shu tugmaga nisbatan joylashadi */
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent);
  border: 1px solid transparent;
  color: var(--accent-foreground);
  padding: 15px 16px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.quiz-option-btn.correct {
  background: color-mix(in srgb, var(--success) 15%, var(--card));
  border-color: var(--success);
  color: var(--success);
}

.quiz-option-btn.wrong {
  background: color-mix(in srgb, var(--destructive) 12%, var(--card));
  border-color: var(--destructive);
  color: var(--destructive);
}

/* =========================================================
   TO'G'RI JAVOB TABRIGI

   Maqsad: to'g'ri javob bergan o'quvchi buni ZAVQ bilan sezsin.
   Bir necha ta'sir bir vaqtda ishlaydi - alohida-alohida hech
   biri sezilmaydi, birgalikda esa kuchli taassurot qoldiradi.
   ========================================================= */

/* 1. Tugma sakrab qo'yadi */
.quiz-option-btn.answer-pop {
  animation: answer-pop 0.46s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes answer-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  60%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* 2. Tugmadan kengayib tarqaladigan halqa */
.answer-ring {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--success);
  pointer-events: none;
  animation: answer-ring 0.75s cubic-bezier(0.16, 0.7, 0.35, 1) forwards;
}

@keyframes answer-ring {
  0%   { transform: scale(1);    opacity: 0.9; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* 3. O'ng chetda prujinadek chiqadigan ✓ belgisi */
.answer-tick {
  position: absolute;
  right: 16px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  animation: answer-tick 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes answer-tick {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(6deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* 4. Ketma-ket javoblar hisobi - ko'tarilib ketadi */
.combo-badge {
  position: fixed;
  z-index: 210;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--warning, #F5A623);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: combo-rise 1.1s cubic-bezier(0.16, 0.7, 0.35, 1) forwards;
}

@keyframes combo-rise {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  25%  { transform: translate(-50%, -90%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -210%) scale(1);   opacity: 0; }
}

/* 5. Xato javob - tugma chayqaladi */
.quiz-option-btn.answer-shake {
  animation: answer-shake 0.42s ease;
}

@keyframes answer-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(6px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  80%      { transform: translateX(-2px); }
}

/* Telefon sozlamasida harakat kamaytirilgan bo'lsa - faqat rang qoladi */
@media (prefers-reduced-motion: reduce) {
  .quiz-option-btn.answer-pop,
  .quiz-option-btn.answer-shake,
  .answer-ring,
  .answer-tick,
  .combo-badge { animation: none; }
  .combo-badge, .answer-ring { display: none; }
}

/* "Tekshirilmoqda..." - server javobini kutayotgan payt.
   Faqat sekin tarmoqda ko'rinadi (400 ms dan keyin chiqadi), tez
   tarmoqda javob undan oldin keladi. */
.hint.quiz-hint-wait {
  color: var(--primary);
  animation: quiz-hint-blink 1.1s ease-in-out infinite;
}

@keyframes quiz-hint-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .hint.quiz-hint-wait { animation: none; }
}

/* TANLANDI, lekin javob hali kelmadi.
   To'g'ri javob endi serverda turadi - shuning uchun tanlov bilan yashil
   yoki qizil belgi orasida juda qisqa (odatda yarim soniyadan kam) oraliq
   bor. O'sha oraliqda tugma "bosildi" degan ko'rinishda turadi, shunda
   o'quvchi bosilganini ko'radi va yana bosmaydi. */
.quiz-option-btn.chosen {
  background: color-mix(in srgb, var(--primary) 16%, var(--card));
  border-color: var(--primary);
  animation: quiz-chosen-pulse 0.9s ease-in-out infinite;
}

@keyframes quiz-chosen-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-option-btn.chosen { animation: none; }
}

.quiz-score {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  margin: 16px 0 24px;
  letter-spacing: -0.02em;
}

.quiz-timer {
  text-align: center;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin: 4px 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.quiz-timer-warn {
  color: var(--destructive);
}

.quiz-review {
  margin: 8px 0 20px;
  text-align: left;
}

.quiz-review h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  color: var(--muted-foreground);
}

.quiz-review-row {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--card);
}

.quiz-review-word {
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--card-foreground);
}

.quiz-review-answers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
}

.quiz-review-correct {
  color: var(--success);
}

.quiz-review-wrong {
  color: var(--destructive);
}

.quiz-result-actions {
  display: flex;
  gap: 10px;
}

.quiz-result-actions .btn-secondary {
  flex: 1;
}

.quiz-result-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.btn-icon {
  flex: 1;
  padding: 12px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1.125rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}

.btn-icon:active {
  background: var(--muted);
}

.btn-icon:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Dars bo'yicha reyting ---------- */
.lesson-leaderboard-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ll-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
}

.ll-row.me {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--card));
}

.ll-rank {
  grid-row: 1 / 3;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-name {
  font-weight: 600;
  color: var(--card-foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ll-score {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.ll-meta {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.message-image {
  max-width: 100%;
  border-radius: calc(var(--radius) - 6px);
  margin-bottom: 6px;
  display: block;
}

/* ---------- Bildirishnoma belgisi ---------- */
.message-icon-wrap {
  position: relative;
}

.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ---------- Pastki navigatsiya paneli ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  /* Sirg'aluvchi kursor shu qutiga nisbatan joylashadi */
  position: fixed;
}

/* Sirg'aluvchi kursor: bo'limlar orasida silliq suzib o'tadi.
   Faqat transform o'zgaradi - brauzer buni GPU'da bajaradi, shuning
   uchun eski telefonlarda ham sekinlashtirmaydi. */
.nav-cursor {
  position: absolute;
  top: 8px;
  left: 0;
  height: calc(100% - 16px - env(safe-area-inset-bottom));
  border-radius: calc(var(--radius) - 4px);
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
}

.nav-cursor.ready {
  opacity: 1;
}

.nav-item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 1px solid transparent;
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: color 0.22s ease, transform 0.12s ease;
}

/* OLTI TUGMA bo'lganda joy tor qoladi: "Yozma" qo'shilgach yozuvlar
   bir-biriga tegib ketardi. Shuning uchun tugmalar ichidagi bo'shliq
   va yozuv o'lchami biroz kichraytirildi. Belgilar o'z o'lchamida
   qoladi - ular bosish nishoni, kichraytirilsa tegish qiyinlashadi. */
.bottom-nav {
  gap: 2px;
  padding-left: 6px;
  padding-right: 6px;
}

.nav-item {
  font-size: 0.625rem;
  padding: 6px 2px;
  min-width: 0;
}

.nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item:active {
  transform: scale(0.94);
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active svg {
  transform: translateY(-2px) scale(1.08);
}

body.has-nav #app {
  padding-bottom: 92px;
}

/* Matn maydoni pastki menyu ostiga tushib qolmasin.
   `scrollIntoView` shu chetni hisobga oladi: maydon menyudan yuqorida
   to'xtaydi. Menyu o'z joyida qoladi - tezkor o'tish uchun kerak. */
body.has-nav input,
body.has-nav textarea {
  scroll-margin-bottom: 110px;
}

/* ---------- Han coin ---------- */
.han-coin {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.han-coin-lg {
  width: 58px;
  height: 58px;
}

/* Bosh sahifadagi tanga hisobi */
.coin-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, #F5A623 34%, transparent);
  background: linear-gradient(135deg,
      color-mix(in srgb, #F5A623 14%, transparent),
      color-mix(in srgb, #F5A623 5%, transparent));
  color: var(--foreground);
  font-family: var(--font-body);
  cursor: pointer;
  box-sizing: border-box;
}

.coin-bar-value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: #E08A12;
}

.coin-bar-label {
  flex: 1;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* Profil bo'limidagi katta tanga bloki */
.coin-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, #F5A623 32%, transparent);
  background: linear-gradient(135deg,
      color-mix(in srgb, #F5A623 16%, transparent),
      color-mix(in srgb, #F5A623 5%, transparent));
}

.coin-hero-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #E08A12;
}

.coin-hero-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.coin-hero-hint {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  border-top: 1px solid color-mix(in srgb, #F5A623 22%, transparent);
  padding-top: 9px;
}

/* Battl o'rinlari */
.battle-places {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.place-box {
  text-align: center;
  padding: 12px 6px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
  border: 1px solid var(--border);
}

.place-medal { font-size: 1.375rem; line-height: 1; }

.place-count {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 4px;
  color: var(--foreground);
}

.place-label {
  font-size: 0.625rem;
  color: var(--muted-foreground);
  margin-top: 1px;
}

/* Yodlangan mavzular ro'yxati */
.mastered-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
  border: 1px solid var(--border);
}

.mastered-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mastered-topic {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

.mastered-date {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Tanga qo'lga kiritilganda chiqadigan xabar */
.coin-toast {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  transform: translate(-50%, -140%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, #F5A623 45%, transparent);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.coin-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.coin-toast .han-coin {
  width: 30px;
  height: 30px;
  animation: coinSpin 1.1s ease-in-out;
}

@keyframes coinSpin {
  from { transform: rotateY(0deg) scale(0.5); }
  to   { transform: rotateY(720deg) scale(1); }
}

.coin-toast-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.coin-toast-text strong {
  font-size: 0.875rem;
  color: #E08A12;
}

.coin-toast-text span {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

/* ---------- Do'kon bezaklari ----------
   Ramkalar va ism ranglari KOD BILAN chiziladi - rasm fayli yo'q.
   Har biri `conic-gradient` yoki `linear-gradient` bilan yasalgan,
   shuning uchun istalgan o'lchamda tiniq ko'rinadi. */

/* Avatar + ramka o'ramasi */
.fr {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 3px;
  background: var(--border);
}

.fr > .avatar { margin: 0; }

/* Ramka tanlanmagan bo'lsa o'rama ko'rinmaydi (oddiy avatar qoladi) */
.fr:not([class*="fr-"]) {
  padding: 0;
  background: none;
}

/* Ramka turlari */
.fr-gold    { background: conic-gradient(#FFEFC2, #D98E12, #FFEFC2, #b87b13, #FFEFC2); }
.fr-fire    { background: conic-gradient(#FFD24A, #ff6b2c, #e02f1d, #ff6b2c, #FFD24A); }
.fr-neon    { background: conic-gradient(#54f5ff, #7a5cff, #ff5cf0, #7a5cff, #54f5ff); }
.fr-hanok   { background: conic-gradient(#0b3d91, #ffffff, #cd2e3a, #ffffff, #0b3d91); }
.fr-emerald { background: conic-gradient(#b6ffd8, #12b981, #0a7f57, #12b981, #b6ffd8); }
.fr-rainbow { background: conic-gradient(#ff5c5c, #FFC24A, #6ee36e, #54d3ff, #a06bff, #ff5c5c); }

/* Aylanadigan ramkalar - faqat eng qimmatlarida, e'tiborni tortsin */
.fr-rainbow, .fr-neon, .fr-fire { animation: frSpin 6s linear infinite; }

@keyframes frSpin { to { transform: rotate(360deg); } }
/* Ramka aylanganda ichidagi rasm aylanmasin */
.fr-rainbow > .avatar,
.fr-neon > .avatar,
.fr-fire > .avatar { animation: frSpin 6s linear infinite reverse; }

/* Ism ranglari */
.nc-gold {
  background: linear-gradient(90deg, #fff0b0, #D98E12, #fff0b0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nc-emerald {
  background: linear-gradient(90deg, #9dffd0, #12b981, #9dffd0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nc-rose {
  background: linear-gradient(90deg, #ffc2d6, #e8425f, #ffc2d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nc-sky {
  background: linear-gradient(90deg, #bfeaff, #2aa8f0, #bfeaff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nc-rainbow {
  background: linear-gradient(90deg, #ff5c5c, #FFC24A, #6ee36e, #54d3ff, #a06bff, #ff5c5c);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ncFlow 5s linear infinite;
}

@keyframes ncFlow { to { background-position: 220% 0; } }

/* Unvon nishoni */
.title-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: middle;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--primary);
  white-space: nowrap;
  /* Nishon hech qanday holatda o'zi turgan joydan kengroq bo'lmaydi */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ---------- Do'kon ekrani ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Grid ustuni ichidagi karta O'ZIDAN-O'ZI qisqarmaydi. Uzun unvon
     nomi kartani kengaytirib, ikki ustunli do'konni ekrandan chiqarib
     yuborardi (sahifa yon tomonga siljirdi). */
  min-width: 0;
  padding: 14px 10px 12px;
  border-radius: var(--radius);
  background: var(--muted);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

.shop-card.owned { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

.shop-card.equipped {
  border-color: #E08A12;
  background: color-mix(in srgb, #F5A623 12%, transparent);
}

.shop-card-name {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.shop-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #E08A12;
}

.shop-price .han-coin { width: 16px; height: 16px; }

.shop-btn {
  width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--gradient-brand);
  color: #fff;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

.shop-btn:active { transform: scale(0.95); }
.shop-btn:disabled { opacity: 0.5; cursor: default; }

.shop-btn.own {
  background: none;
  border-color: var(--border);
  color: var(--foreground);
}

.shop-btn.on {
  background: linear-gradient(135deg, #FFC24A, #E08A12);
  color: #3b2606;
}

/* Do'kondagi namunalar */
.shop-preview-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-preview-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--primary);
  font-weight: 700;
}

/* ---------- Han coin sahifasi ---------- */
.coin-big {
  text-align: center;
  padding: 22px 16px 18px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, #F5A623 32%, transparent);
  background: linear-gradient(135deg,
      color-mix(in srgb, #F5A623 18%, transparent),
      color-mix(in srgb, #F5A623 5%, transparent));
}

.coin-big-icon {
  width: 76px;
  height: 76px;
  animation: dailyCoinBob 3s ease-in-out infinite;
}

.coin-big-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.05;
  color: #E08A12;
  margin-top: 6px;
}

.coin-big-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* "Qanday ko'paytirish" qatorlari */
.howto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
  border: 1px solid var(--border);
}

.howto-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.howto-text strong {
  font-size: 0.875rem;
  color: #E08A12;
}

.howto-text > span {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Taklif havolasi */
.invite-box {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--muted);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}

.invite-box p { margin: 0 0 10px; font-size: 0.8125rem; }

.invite-link {
  font-family: monospace;
  font-size: 0.75rem;
  word-break: break-all;
  padding: 9px 11px;
  border-radius: calc(var(--radius) - 6px);
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  margin-bottom: 10px;
  user-select: all;
}

/* Tanga tarixi */
.coin-log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 4px;
  border-radius: calc(var(--radius) - 6px);
  background: var(--muted);
  font-size: 0.8125rem;
}

.coin-log-label { flex: 1; min-width: 0; }

.coin-log-date {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.coin-log-amount {
  font-family: var(--font-display);
  font-weight: 800;
  color: #E08A12;
  min-width: 34px;
  text-align: right;
}

.coin-log-amount.minus { color: var(--muted-foreground); }

/* Profildagi yurakcha soni */
.likes-chip {
  float: right;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Kunlik tashrif tangasi ---------- */
.daily-claim {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, #F5A623 40%, transparent);
  background: linear-gradient(135deg,
      color-mix(in srgb, #F5A623 20%, transparent),
      color-mix(in srgb, #F5A623 6%, transparent));
}

.daily-claim-coin {
  width: 34px;
  height: 34px;
  animation: dailyCoinBob 2.4s ease-in-out infinite;
}

@keyframes dailyCoinBob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-4px) rotate(6deg); }
}

.daily-claim-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.daily-claim-text strong { font-size: 0.8125rem; }

.daily-claim-text span {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.daily-claim-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #FFC24A, #E08A12);
  color: #3b2606;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

.daily-claim-btn:active { transform: scale(0.94); }
.daily-claim-btn:disabled { opacity: 0.55; }

/* ---------- Xabar vaqti ---------- */
.message-time {
  font-size: 0.625rem;
  opacity: 0.65;
  margin-top: 4px;
  text-align: right;
}

/* ---------- Mehmon bo'lish: boshqa odamning profili ---------- */
/* Mehmon profilidagi qisqacha raqamlar */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.pp-stats > div {
  text-align: center;
  padding: 11px 6px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
  border: 1px solid var(--border);
}

.pp-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--foreground);
}

.pp-stats span {
  display: block;
  font-size: 0.625rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

/* Bosiladigan qatorlar - bosilishi mumkinligini bildiradi */
.clickable { cursor: pointer; }

.leaderboard-list li.clickable:active,
.ll-row.clickable:active,
.podium-spot.clickable:active {
  transform: scale(0.98);
}

.leaderboard-list li.clickable,
.ll-row.clickable,
.podium-spot.clickable {
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
}

.pp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pp-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.375rem;
}

.pp-info {
  flex: 1;
  min-width: 0;
}

/* Yurakcha tugmasi */
.like-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.like-btn svg {
  width: 20px;
  height: 20px;
}

.like-btn.liked {
  color: #e8425f;
  background: color-mix(in srgb, #e8425f 14%, transparent);
  border-color: color-mix(in srgb, #e8425f 40%, transparent);
}

.like-btn:active { transform: scale(0.92); }
.like-btn:disabled { opacity: 0.6; }

.like-btn.pop svg {
  animation: likePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes likePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Mehmonlar ro'yxati - yon tomonga suriladi */
.visitor-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.visitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.625rem;
  color: var(--muted-foreground);
  max-width: 58px;
  flex-shrink: 0;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.visitor span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-avatar {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

/* ---------- Reyting podiumi ---------- */
.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 8px;
  margin-bottom: 18px;
  padding-top: 20px;
}

.podium-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* DIQQAT: grid ustuni ichidagi element O'Z-O'ZIDAN qisqarmaydi -
     brauzer unga "min-width: auto" beradi, ya'ni "ichingdagi eng keng
     narsadan tor bo'lma". Unvon nishoni esa bo'linmaydigan (nowrap)
     bitta bo'lak. Natijada uzun unvonli odam podiumga chiqsa, ustun
     kengayib ketardi: butun sahifa yon tomonga siljib, 3-o'rin
     ekrandan chiqib qolardi. `min-width: 0` shu zanjirni uzadi. */
  min-width: 0;
}

.podium-crown {
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-bottom: 2px;
}

.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  border: 3px solid var(--card);
  box-shadow: 0 0 0 2px var(--primary);
  overflow: hidden;
}

.podium-spot-1 .podium-avatar {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  box-shadow: 0 0 0 2px var(--gold);
}

.podium-name {
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 6px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--card-foreground);
}

/* Podiumda joy tor - unvon ism YONIDA emas, OSTIDA turadi va
   sig'masa nuqta bilan qisqaradi. Ilgari u yonma-yon turib butun
   ustunni kengaytirib yuborardi. */
.podium-name .title-badge {
  display: block;
  margin: 3px auto 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-score {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.podium-block {
  width: 100%;
  border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
}

.podium-spot-1 .podium-block { height: 64px; background: linear-gradient(180deg, var(--gold), #a16207); }
.podium-spot-2 .podium-block { height: 46px; background: linear-gradient(180deg, #a1a1aa, #71717a); }
.podium-spot-3 .podium-block { height: 34px; background: linear-gradient(180deg, #c2703d, #92400e); }

.podium-spot.me .podium-name { color: var(--primary); }

/* ---------- Shrift o'lchami boshqaruvi ---------- */
.font-size-control {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--muted);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.font-size-control-compact {
  margin: 10px 0 14px;
}

.font-size-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 6px);
  width: 38px;
  height: 34px;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  flex-shrink: 0;
}

.font-size-btn:active { background: var(--secondary); }

.font-size-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.font-size-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 999px;
  transition: width 0.15s ease;
}

/* ---------- Natijani qayta ishlash tugmasi (profil) ---------- */
.profile-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-lesson-info {
  flex: 1;
  min-width: 0;
}

.retake-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-foreground);
  border: none;
  border-radius: calc(var(--radius) - 6px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.profile-lesson-progress {
  height: 5px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.profile-lesson-progress-fill {
  height: 100%;
  border-radius: 999px;
}

.fill-purple { background: var(--chip-purple); }
.fill-green { background: var(--chip-green); }
.fill-orange { background: var(--chip-orange); }

/* ---------- Profil xulosa kartasi ---------- */
.profile-summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.profile-summary-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.profile-summary-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.25rem;
}

.profile-summary-info {
  flex: 1;
  min-width: 0;
}

.profile-summary-info .profile-name {
  font-size: 1.0625rem;
}

.profile-member-since {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 4px;
}

.profile-summary-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.profile-summary-stats div {
  display: flex;
  flex-direction: column;
}

.profile-summary-stats strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--foreground);
}

.profile-summary-stats span {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.mistakes-alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: color-mix(in srgb, var(--destructive) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--destructive) 25%, var(--border));
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 18px;
  cursor: pointer;
  text-align: left;
}

.mistakes-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--destructive);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mistakes-alert-icon svg { width: 18px; height: 18px; }

.mistakes-alert-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mistakes-alert-text strong {
  font-size: 0.9375rem;
  color: var(--foreground);
}

.mistakes-alert-text span {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.retake-btn svg {
  width: 17px;
  height: 17px;
}

/* ---------- Yuklanish indikatori (barcha bo'limlarda) ---------- */
/* Spinner sahifa ustida turadi, lekin orqa fonni XIRA QILMAYDI -
   foydalanuvchi nima yuklanayotganini ko'rib turadi. Shu sababli
   butun ekranni egallamaydi, faqat yuqori o'ng burchakda turadi. */
.top-progress {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  z-index: 100;
  display: none;
  pointer-events: none;
}

.top-progress.active {
  display: block;
  animation: topProgressIn 0.2s ease;
}

@keyframes topProgressIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.top-progress-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-top-color: var(--primary);
  box-shadow: var(--glow);
  animation: topProgressSpin 0.8s linear infinite;
}

@keyframes topProgressSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Xush kelibsiz ekrani ---------- */
.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.welcome-splash.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.welcome-splash-inner {
  text-align: center;
}

.welcome-splash-mark {
  min-width: 68px;
  height: 56px;
  margin: 0 auto 14px;
  padding: 0 18px;
  border-radius: 18px;
  background: var(--gradient-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-kr);
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--glow);
}

.welcome-splash-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}

/* ---------- Qo'llanma oynasi ---------- */
.guide-modal {
  position: fixed;
  inset: 0;
  /* bottom-nav (z-index: 40) dan SEZILARLI yuqori - hech qanday
     shubhaga o'rin qoldirmaslik uchun. */
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(0 0 0 / 0.5);
}

.guide-modal-card {
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px -6px rgb(0 0 0 / 0.3);
}

.guide-modal-header h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--card-foreground);
}

.guide-modal-header .hint {
  margin: 0 0 14px;
}

.guide-modal-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 6px;
}

.guide-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.guide-item-icon {
  flex-shrink: 0;
}

.guide-item-text strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--card-foreground);
  margin-bottom: 2px;
}

.guide-item-text p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.guide-modal-close-btn {
  margin-top: 16px;
}

/* ---------- Sarlavhadagi son belgisi ---------- */
.count-badge {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* ---------- Battl ---------- */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.menu-row span {
  flex: 1;
  text-align: left;
}

.menu-chevron {
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.battle-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--gradient-brand);
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: var(--glow);
  text-align: left;
}

.battle-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.battle-banner-icon svg { width: 20px; height: 20px; }

.battle-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}

.battle-banner-text strong {
  font-size: 0.9375rem;
  font-weight: 800;
}

.battle-banner-text span {
  font-size: 0.75rem;
  opacity: 0.9;
  line-height: 1.3;
}

.battle-banner-cta {
  flex-shrink: 0;
  background: #fff;
  color: var(--primary);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 8px 14px;
  border-radius: 999px;
}

.close-app-link {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--muted-foreground);
  font-weight: 500;
}

.battle-row {
  display: block;
}

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

.battle-status {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.battle-topic-heading {
  margin-top: 14px;
}

.battle-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.battle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
}

.battle-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8125rem;
}

.battle-step.active .battle-step-circle {
  background: var(--primary);
  color: #fff;
}

.battle-step.active span {
  color: var(--primary);
  font-weight: 700;
}

.battle-step span {
  font-size: 0.6875rem;
  white-space: nowrap;
}

.battle-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 15px 6px 0;
}

.battle-lesson-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.selected-lessons-box {
  background: var(--accent);
  border-radius: calc(var(--radius) - 4px);
  padding: 12px 14px;
  margin: 12px 0 4px;
}

.selected-lessons-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-foreground);
  margin-bottom: 8px;
}

.selected-lessons-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}

.lesson-chip button {
  background: var(--muted);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--muted-foreground);
  cursor: pointer;
}

.battle-lesson-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 6px;
  background: var(--card);
  cursor: pointer;
  font-size: 0.875rem;
}

.battle-lesson-check input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.battle-mode-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.battle-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: var(--card);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.battle-mode-option input {
  margin-top: 3px;
  accent-color: var(--primary);
}

.battle-info-card {
  background: var(--muted);
  border-radius: calc(var(--radius) - 4px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  margin-bottom: 14px;
}

/* "E'lon nechta odamga yetdi" - faqat battlni boshlagan odam ko'radi */
.battle-notice {
  font-size: 0.75rem;
  line-height: 1.5;
  margin: -6px 0 14px;
}

.battle-action {
  margin-bottom: 16px;
}

/* ---------- Test turini tanlash (ikkita katta tugma) ---------- */
.test-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.test-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.05s ease;
}

.test-type-btn:active {
  transform: scale(0.98);
  border-color: var(--primary);
}

.test-type-btn strong {
  font-size: 0.9375rem;
  color: var(--foreground);
}

.test-type-btn span {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.3;
}

/* Mavzuli testlarda savol matni uzun bo'lishi mumkin - kichikroq shrift */
.card h2.quiz-word.quiz-word-text {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  /* Dialogli savollar bir necha qatordan iborat bo'lishi mumkin -
     qator sinishlari saqlanadi */
  white-space: pre-line;
  text-align: left;
}

/* =========================================================
   YOZMA MASHQ + 한글 KLAVIATURA
   ========================================================= */

/* Tugmalar qatori. Ilgari qat'iy 2 ustunli jadval edi: yozma mashq
   yo'q tillarda (xitoy) "Test boshlash" chap ustunda yolg'iz qolib,
   bir tomonga surilib turardi. Endi ko'rinib turgan tugmalar qatorni
   teng bo'lishib oladi - bitta qolsa, butun kenglikni egallaydi. */
.dict-action-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.dict-action-row .quiz-start-btn { margin-top: 0; flex: 1 1 0; min-width: 0; }
.dict-action-row > .hidden { display: none !important; }

@media (max-width: 380px) {
  .dict-action-row { flex-direction: column; }
}

.writing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.writing-row {
  display: grid;
  grid-template-columns: 26px 1fr 1.1fr 42px;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  background: var(--card-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* Klaviatura tugmasi yo'q tillarda (ingliz, arab, ...) - 4-ustun
   butunlay olib tashlanadi, bo'sh joy qolmaydi. */
.writing-row.no-kb {
  grid-template-columns: 26px 1fr 1.1fr;
}

.writing-num {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.5;
  text-align: center;
}

.writing-uz {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.writing-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--input-bg, rgba(0, 0, 0, 0.25));
  color: inherit;
  font-size: 17px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.writing-input::placeholder { opacity: 0.28; letter-spacing: 2px; }
.writing-input:focus { border-color: var(--accent, #7c5cff); }
.writing-input.kb-active {
  border-color: var(--accent, #7c5cff);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
}
.writing-input.right { border-color: #2ecc71; }
.writing-input.wrong { border-color: #ff5f57; }

.writing-kb-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: rgba(124, 92, 255, 0.16);
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* Klaviatura ochilganda pastdagi qatorlar tugmalar ostida qolmasin va
   pastki menyu klaviaturani to'sib qo'ymasin */
body.kb-open { padding-bottom: 320px; }
body.kb-open .bottom-nav,
body.kb-open .nav-cursor { display: none !important; }

.kb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--kb-bg, #14151c);
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  animation: kb-up 0.18s ease-out;
}

@keyframes kb-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.kb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 6px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}

.kb-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}

.kb-rows { display: flex; flex-direction: column; gap: 6px; }

.kb-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.kb-key {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s ease, transform 0.08s ease;
}
.kb-key:active { background: rgba(124, 92, 255, 0.55); transform: scale(0.94); }
.kb-key-wide { flex: 1.4 1 0; font-size: 15px; }
.kb-key-space { flex: 3 1 0; font-size: 13px; }
.kb-key-next { background: rgba(124, 92, 255, 0.28); font-size: 13px; }
.kb-shift.active { background: rgba(124, 92, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .kb { animation: none; }
  .kb-key:active { transform: none; }
}

/* =========================================================
   ICONLAR
   Butun dasturda bitta uslub: chiziqli 24x24 belgilar.
   O'lchami matn o'lchamiga qarab o'zgaradi, rangi matn rangidan olinadi.
   ========================================================= */
.ic {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
}

/* Tugma ichida matn bilan yonma-yon turganda oraliq beradi */
.btn-primary .ic,
.btn-secondary .ic,
.audio-btn .ic,
.tab .ic,
.likes-chip .ic,
h2 .ic {
  margin-right: 5px;
}

.btn-icon .ic {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0;
}

.theme-toggle .ic { width: 17px; height: 17px; vertical-align: middle; }

.dict-col-header .eye .ic { width: 15px; height: 15px; vertical-align: -0.2em; }

/* 1-2-3 o'rin medallari */
.ic-gold { color: #F5A623; }
.ic-silver { color: #a8b3c0; }
.ic-bronze { color: #c8813f; }

.place-medal .ic { width: 26px; height: 26px; vertical-align: middle; }
.ll-rank .ic, .lb-rank .ic { width: 20px; height: 20px; vertical-align: middle; }

/* Yurak - yoqtirma */
.ic-heart { color: #ff5f7a; }

/* Toj - reyting yetakchisi */
.lb-hero-crown .ic { width: 18px; height: 18px; color: #F5A623; }

/* Holat belgilari */
.ic-live { color: #22c55e; }
.ic-ok { color: #22c55e; }

/* =========================================================
   KETMA-KET KUNLAR (STREAK)
   ========================================================= */
.streak-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(234, 88, 12, 0.06));
  border: 1px solid rgba(249, 115, 22, 0.28);
}

.streak-flame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.18);
  color: #f97316;
}
.streak-flame svg { width: 19px; height: 19px; }

.streak-text { flex: 1; min-width: 0; line-height: 1.3; }
.streak-text strong { display: block; font-size: 0.9375rem; font-weight: 800; }
.streak-text span {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.streak-dots { display: flex; gap: 4px; flex: none; }

.streak-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.streak-dot.on {
  background: #f97316;
  box-shadow: 0 0 5px rgba(249, 115, 22, 0.55);
}

/* =========================================================
   TABRIK EFFEKTLARI VA UNVONLAR
   Animatsiyalar faqat transform/opacity bilan - videokartada
   bajariladi, sahifani qayta chizmaydi.
   ========================================================= */

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

.confetti-bit {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: confetti-fly 1.5s cubic-bezier(0.16, 0.7, 0.35, 1) forwards;
}

@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.4); opacity: 1; }
  25%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* ---------- 100% natija yozuvi ---------- */
.perfect-note {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  margin: 4px 0 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(249, 115, 22, 0.07));
  border: 1px solid rgba(234, 179, 8, 0.32);
  animation: perfect-in 0.4s ease-out;
}
.perfect-note svg { width: 26px; height: 26px; flex: none; color: #F5A623; }
.perfect-note strong { display: block; font-size: 0.9375rem; font-weight: 800; }
.perfect-note span { font-size: 0.75rem; color: var(--muted-foreground); }

@keyframes perfect-in {
  from { transform: translateY(-6px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

h2.perfect { color: #F5A623; }

/* ---------- Yangi unvon oynasi ---------- */
.title-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}

.title-modal-card {
  width: 100%;
  max-width: 330px;
  padding: 26px 22px 20px;
  border-radius: 22px;
  text-align: center;
  background: var(--card);
  border: 1px solid rgba(234, 179, 8, 0.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: title-pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
}

@keyframes title-pop {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.title-modal-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(234, 179, 8, 0.3), rgba(234, 179, 8, 0.08));
  border: 1px solid rgba(234, 179, 8, 0.4);
}
.title-modal-icon .ic { width: 38px; height: 38px; }

.title-modal-kicker {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #F5A623;
}

.title-modal-card h2 { margin: 0 0 8px; font-size: 1.375rem; }
.title-modal-desc {
  margin: 0 0 18px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* ---------- Unvonlar sahifasi ---------- */
.titles-list { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }

.title-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
}
.title-card.locked { opacity: 0.62; }
.title-card.on { border-color: rgba(234, 179, 8, 0.55); }

.title-card-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--muted);
}
.title-card-icon .ic { width: 22px; height: 22px; }

.title-card-text { flex: 1; min-width: 0; line-height: 1.35; }
.title-card-text strong { display: block; font-size: 0.9375rem; }
.title-card-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.title-card-date { font-size: 0.6875rem !important; opacity: 0.8; margin-top: 2px; }

.title-card-lock { flex: none; color: var(--muted-foreground); }
.title-card-lock .ic { width: 18px; height: 18px; }

/* XATO TUZATILDI: `.shop-btn` do'kon kartalari uchun `width: 100%` bilan
   yozilgan. Unvonlar ro'yxatida esa u QATOR ichidagi flex elementi -
   shuning uchun butun enni o'ziga tortib olar, unvon nomi va tavsifi
   bir harfdan qatorga tushib ketardi ("Kiyilgan" tugmasi matnni bosib
   qolgandek ko'rinardi). Bu yerda tugma enini o'z matniga tenglaymiz. */
.title-card .shop-btn {
  flex: none;
  width: auto;
  min-width: 82px;
  max-width: 42%;
  white-space: nowrap;
  padding: 8px 14px;
}

/* Uzun unvon nomi (masalan koreyscha) kartadan chiqib ketmasin */
.title-card-text strong,
.title-card-text span { overflow-wrap: anywhere; }

/* Unvon nishonchasidagi belgi */
.title-badge .ic {
  width: 0.95em;
  height: 0.95em;
  margin-right: 3px;
  vertical-align: -0.14em;
}

.titles-alert-icon { color: #F5A623; background: rgba(234, 179, 8, 0.15) !important; }

@media (prefers-reduced-motion: reduce) {
  .confetti-layer { display: none !important; }
  .perfect-note, .title-modal-card { animation: none; }
}

/* =========================================================
   USTOZ GURUHLARI VA OTA-ONA NAZORATI
   ========================================================= */
.group-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }

.group-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.group-row.static { cursor: default; }
.group-row:disabled { opacity: 0.6; cursor: default; }

/* Guruh qatori + yonidagi "so'rovni bekor qilish" tugmasi bir qatorda.
   `min-width: 0` bo'lmasa uzun guruh nomi qatorni ekrandan chiqarib
   yuboradi - flex bolasi o'z matnidan tor bo'lishga rozi emas. */
.group-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.group-row-wrap .group-row { min-width: 0; }
.group-row-wrap > .icon-btn { flex: 0 0 auto; }

.group-row-main { flex: 1; min-width: 0; line-height: 1.35; }
.group-row-main strong { display: block; font-size: 0.9375rem; }
.group-row-main span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  word-break: break-word;
}
.group-row-main code {
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--foreground);
}

.group-chip {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.group-chip.ok { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
.group-chip.wait { background: rgba(234, 179, 8, 0.16); color: #F5A623; }
.group-chip.late { background: rgba(255, 95, 87, 0.16); color: #ff5f57; }

/* Qo'shilish kodi qutisi */
.group-code-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin: 12px 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.14), rgba(124, 92, 255, 0.04));
  border: 1px solid rgba(124, 92, 255, 0.3);
}
.group-code-box > div { flex: 1; min-width: 0; }
.group-code-box span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.group-code-box strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 3px;
}

/* O'quvchi qatori */
.student-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
}

.student-avatar { width: 38px; height: 38px; flex: none; font-size: 0.875rem; }

.student-away { font-size: 0.6875rem !important; }
.student-away.warn { color: #f97316 !important; font-weight: 700; }

.student-nums { display: flex; gap: 12px; flex: none; text-align: center; }
.student-nums > div { min-width: 34px; line-height: 1.2; }
.student-nums strong { display: block; font-size: 0.9375rem; font-weight: 800; }
.student-nums span { font-size: 0.625rem; color: var(--muted-foreground); }
.student-nums .bad strong { color: #ff5f57; }

/* Vazifalar */
.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
}
.task-row.done { border-color: rgba(34, 197, 94, 0.4); }

.assign-box {
  padding: 14px;
  margin: 16px 0;
  border-radius: var(--radius);
  background: var(--muted);
  border: 1px solid var(--border);
}
.assign-box .section-subhead { margin-top: 0; }
.assign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.join-row { display: flex; gap: 8px; align-items: stretch; }
.join-row input { flex: 1; min-width: 0; }
.join-row button { flex: none; white-space: nowrap; }

.my-progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.my-progress > div {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  text-align: center;
}
.my-progress strong { display: block; font-size: 1.375rem; font-weight: 800; }
.my-progress span { font-size: 0.6875rem; color: var(--muted-foreground); }

.danger-btn { flex: none; color: #ff5f57; }
.danger-text { color: #ff5f57; }
.group-danger { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }

.groups-alert-icon { color: #38bdf8; background: rgba(56, 189, 248, 0.15) !important; }

/* Guruh sahifasidagi tugmalar do'kondagidek butun kenglikni egallamasin */
.group-code-box .shop-btn,
.group-row .shop-btn,
.student-row .shop-btn {
  width: auto;
  flex: none;
  white-space: nowrap;
  align-self: center;
}

/* Belgi matn oqimida qolsin - butun qatorni egallamasin */
.group-row-main .group-chip {
  display: inline-block;
  margin-top: 3px;
}

.group-code-box span { line-height: 1.3; }
.group-code-box strong { font-size: 1.3125rem; letter-spacing: 2px; }

/* Vazifa berish qutisi: tor ekranda ustma-ust joylashadi */
.assign-box select,
.assign-box input { width: 100%; }
@media (max-width: 400px) {
  .assign-row { grid-template-columns: 1fr; }
}

/* Kod kiritish qatorida tugma matn kengligicha qolsin */
.join-row .btn-primary,
.join-row .btn-secondary {
  width: auto;
  flex: none;
  margin: 0;
  padding: 11px 16px;
}
.join-row input { margin: 0; }

/* =========================================================
   TUGMA RANGI
   Brauzer <button> ga o'zining standart rangini beradi (color: buttontext).
   Shu sabab ichidagi SVG belgilar "currentColor" ni o'sha qora rangdan
   olib, tungi rejimda ko'rinmay qolgan edi. Endi tugma matn rangini
   sahifadan oladi - o'z rangini belgilagan tugmalar (btn-primary kabi)
   o'zgarmaydi, chunki ular ustunroq (class) qoida bilan yozilgan.
   ========================================================= */
button {
  color: inherit;
}

.btn-icon,
.theme-toggle,
.icon-btn,
.kb-close,
.dict-col-header,
.font-size-btn,
.back-link {
  color: var(--foreground);
}

/* Natija sahifasidagi oldingi/qayta/keyingi tugmalari pastdagi
   yozuvlar bilan bir xil rangda bo'lsin */
.btn-icon .ic { color: var(--foreground); }
.btn-icon:disabled { color: var(--muted-foreground); }

/* Kunduzgi rejimda medal ranglari och fonda yo'qolib ketmasin -
   ayniqsa kumush rang. Ular biroz to'qroq qilinadi. */
[data-theme="green"] .ic-gold { color: #A8620A; }
[data-theme="green"] .ic-silver { color: #6b7684; }
[data-theme="green"] .ic-bronze { color: #a0602c; }
[data-theme="green"] .lb-hero-crown .ic { color: #A8620A; }
[data-theme="green"] .title-modal-kicker { color: #A8620A; }
[data-theme="green"] .perfect-note svg { color: #A8620A; }

/* =========================================================
   TIL TANLASH
   ========================================================= */
.lang-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.lang-btn {
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lang-btn strong { display: block; font-size: 0.875rem; font-weight: 700; }
.lang-btn span { font-size: 0.6875rem; color: var(--muted-foreground); }
.lang-btn.on {
  border-color: var(--primary);
  background: rgba(124, 92, 255, 0.12);
}
.lang-btn:disabled { opacity: 0.45; cursor: default; }
.lang-btn:active:not(:disabled) { transform: scale(0.98); }


/* =========================================================
   KOREYS SHRIFTI
   Koreyscha matn alohida shriftda ko'rsatiladi - lotin
   shriftida koreys harflari xunuk va tor chiqadi.
   ========================================================= */
.quiz-word,
.dict-kr,
.writing-input,
.kb-key,
.title-badge {
  font-family: var(--font-kr);
}

/* Ilova koreys tilida bo'lsa - butun matn koreys shriftida */
body.lang-ko,
body.lang-ko button,
body.lang-ko input,
body.lang-ko select,
body.lang-ko textarea {
  font-family: var(--font-kr);
}

/* Yapon interfeysi - yapon shrifti. Koreys shrifti kana belgilarini
   va ba'zi ieroglif shakllarini boshqacha chizadi. */
body.lang-ja,
body.lang-ja button,
body.lang-ja input,
body.lang-ja select,
body.lang-ja textarea {
  font-family: var(--font-jp);
}

/* Xitoy interfeysi - soddalashtirilgan xitoy shrifti */
body.lang-zh,
body.lang-zh button,
body.lang-zh input,
body.lang-zh select,
body.lang-zh textarea {
  font-family: var(--font-sc);
}

/* Yozma mashqda: bir xil ma'noli so'zlar bo'lsa ogohlantirish */
.writing-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 700;
  color: #f97316;
}

/* ==========================================================================
   KICHIK TASDIQ XABARI
   "Saqlandi" kabi xabarlar uchun. Sahifani qayta yuklash o'rniga pastda
   bir zumga chiqib ketadi. Faqat transform va opacity - videokartada
   bajariladi, sahifani sekinlatmaydi.
   ========================================================================== */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 900;
  padding: 11px 20px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  max-width: 88vw;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition-duration: 0.001ms; }
}

/* Tugma serverdan javob kutayotgan holat */
.btn-primary.is-busy,
button.is-busy {
  opacity: 0.75;
  cursor: progress;
}


/* ==========================================================================
   O'NGDAN CHAPGA YOZILADIGAN TILLAR (dariy, pashtu)
   ==========================================================================
   `<html dir="rtl">` qo'yilishi bilan brauzer matnni, ro'yxatlarni va
   `margin-inline`/`padding-inline` o'lchovlarini o'zi aylantiradi.
   Quyida faqat brauzer O'ZI hal qila olmaydigan joylar to'g'rilanadi:
   qat'iy chap/o'ng qiymatlar va yo'nalishi bor belgilar.
   ========================================================================== */

/* Arab alifbosidagi matn uchun shrift */
body.lang-fa,
body.lang-fa button,
body.lang-fa input,
body.lang-fa select,
body.lang-fa textarea,
body.lang-ps,
body.lang-ps button,
body.lang-ps input,
body.lang-ps select,
body.lang-ps textarea,
body.lang-ar,
body.lang-ar button,
body.lang-ar input,
body.lang-ar select,
body.lang-ar textarea {
  font-family: var(--font-ar);
}

/* Sarlavhalar ham - aks holda arabcha matn lotin shriftida buzilib chiqadi */
body.lang-fa h1, body.lang-fa h2, body.lang-fa h3,
body.lang-ps h1, body.lang-ps h2, body.lang-ps h3,
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3 {
  font-family: var(--font-ar);
}

/* Koreyscha so'zlar HAR DOIM koreys shriftida - dariy interfeysda ham.
   Bu koreys tili ilovasi: 한글 harflari arab shriftida chiqmasligi kerak. */
body.lang-fa .kr, body.lang-ps .kr, body.lang-ar .kr,
body.lang-fa .word-kr, body.lang-ps .word-kr, body.lang-ar .word-kr,
body.lang-fa .quiz-word, body.lang-ps .quiz-word, body.lang-ar .quiz-word {
  font-family: var(--font-kr);
}

/* Orqaga qaytish o'qi teskari tomonga qaraydi */
body.rtl .back-link {
  direction: rtl;
}

/* Progress chiziqlari o'ngdan to'ladi */
body.rtl .profile-lesson-progress-fill,
body.rtl .streak-progress-fill,
body.rtl .rank-progress-fill {
  margin-left: auto;
  margin-right: 0;
}

/* Raqamlar va vaqt HAR DOIM chapdan o'ngga - "01:23" teskari
   ko'rinmasligi uchun */
body.rtl .lb-score,
body.rtl .podium-score,
body.rtl .ll-score,
body.rtl .coin-hero-value,
body.rtl .profile-summary-stats strong {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Unvon nishoni ismning CHAP tomonida turadi */
body.rtl .title-badge {
  margin-left: 0;
  margin-right: 6px;
}

/* Bildirishnoma belgisi teskari burchakda */
body.rtl .unread-badge {
  right: auto;
  left: -4px;
}


/* Natija serverga yetib bormaganda chiqadigan qator. */
.quiz-save-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent);
}

.quiz-save-fail.hidden { display: none; }

/* ==========================================================================
   SO'ZNING O'QILISHI (xitoy - pinyin, yapon - kana)
   O'quvchi tugma bilan yashiradi yoki ko'rsatadi. Tanlov saqlanadi.
   ========================================================================== */
.reading-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.reading-toggle .ic { width: 16px; height: 16px; }
.reading-toggle.is-off { opacity: 0.6; }
.reading-toggle.hidden { display: none; }

/* Lug'atda tugma o'ng tomonda turadi */
#dict_reading_toggle { display: flex; width: max-content; }
#dict_reading_toggle.hidden { display: none; }

/* Testda so'z ostida */
.quiz-reading {
  margin: -4px 0 6px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted-foreground);
  min-height: 1.4em;
}
.reading-toggle-small {
  display: flex;
  margin: 0 auto 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
}
.reading-toggle-small.hidden { display: none; }

/* Yashirilganda: joy saqlanadi, matn ko'rinmaydi (ekran sakramasin) */
body.hide-reading .quiz-reading { visibility: hidden; }
body.hide-reading .dict-reading { display: none; }

/* Til belgisi (한, A, ع, Я, Ç, あ, 汉) - bayroq emoji o'rniga.
   Bayroq Windowsda "CN", "KR" harflari bo'lib chiqardi. */
.lang-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.25em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-family: var(--font-kr), var(--font-ar), sans-serif;
  font-weight: 800;
  line-height: 1;
}
#content_lang_flag.lang-mark { font-size: 0.8125rem; }
.content-lang-row .flag.lang-mark { font-size: 1rem; }
.content-lang-card .flag.lang-mark { font-size: 1.25rem; }

/* So'z o'lchami boshqaruvi: chapda til belgisi */
.word-scale-control { gap: 8px; margin-top: 8px; }
.word-scale-control .lang-mark { font-size: 0.8125rem; flex: none; }

/* Reyting yuklanayotganda - bo'sh joy o'rniga skelet (sakrash bo'lmaydi) */
.lb-skeleton {
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in srgb, var(--muted) 60%, var(--card)) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: lb-shimmer 1.2s ease-in-out infinite;
}
.lb-skeleton-hero { height: 150px; }
.lb-skeleton-podium { height: 170px; margin-top: 12px; }
@keyframes lb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Yuklanish ekrani: bitta "Z" harfi o'rniga to'liq brend nomi */
.loading-mark.loading-wordmark {
  width: auto;
  height: auto;
  padding: 14px 24px;
  border-radius: 20px;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.loading-mark.loading-wordmark b { font-weight: 800; color: var(--orange, #F5A623); }
.loading-mark.loading-wordmark::after { border-radius: 20px; }

/* Ochiq profil: unvonlarning til guruhi sarlavhasi */
.pp-title-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted-foreground);
}
.pp-title-lang .flag { font-size: 1.05rem; }

/* Test natijasi: xato so'z ostida o'qilishi (pinyin / kana) */
.quiz-review-reading {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
body.hide-reading .quiz-review-reading { display: none; }


/* ==========================================================================
   BELGILAR (ikonalar)
   Chiziq qalinligi 1.75 px - nozik va zamonaviy. Mayda o'lchamda toza
   ko'rinishi uchun barcha belgilar bir xil qalinlikda.
   ========================================================================== */
.ic { stroke-width: 1.75; }
.ic circle, .ic rect, .ic path { vector-effect: non-scaling-stroke; }

/* Pastdagi menyu belgilari biroz qalinroq - ular kichik va uzoqdan
   ko'rinishi kerak */
.tabbar .ic { stroke-width: 2; }