/* MasterAI - komponent kitabxanası.
 * Flutter tətbiqində paylaşılan komponent qovluğu YOX idi - 21 ekran öz
 * düymə/kartını ayrıca qururdu, vizual uyğunsuzluğun kök səbəbi bu idi.
 * Burada hər komponent BİR dəfə təyin olunur.
 * Yalnız `tokens.css` dəyişənlərindən istifadə edir. */

/* ---- Kart ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.card--flat        { background: var(--color-surface-alt); border-color: transparent; }
.card--interactive { cursor: pointer; transition: border-color var(--motion-fast) var(--easing); }
.card--interactive:hover { border-color: var(--color-border-strong); }

/* Fənn rəngi kartın SOL kənarında - məzmunu işarələyir, doldurmur.
 * İşlədilməsi: <div class="card card--subject" style="--subject: var(--subject-mentiq)"> */
.card--subject { border-left: 3px solid var(--subject, var(--color-primary)); }

/* ---- Düymə ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primary       { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn--secondary     { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-alt); }

.btn--ghost         { background: transparent; color: var(--color-primary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-primary-soft); }

.btn--danger        { background: var(--color-danger); color: var(--color-on-primary); }

.btn--sm    { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg    { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn--block { width: 100%; }

/* ---- Nişan (badge) - mediapulse naxışı: açıq fon + tünd mətn ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge--neutral { background: var(--color-surface-alt);  color: var(--color-text-muted); }

/* Fənn çipi - rəng `--subject` ilə ötürülür. */
.chip-subject {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--subject, var(--color-primary));
  border-radius: var(--radius-full);
  color: var(--subject, var(--color-primary));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* ---- Form sahələri ---- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--motion-fast) var(--easing);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--color-primary); }

.field__input::placeholder { color: var(--color-text-faint); }
.field__textarea { min-height: var(--textarea-min); resize: vertical; }

.field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}
.field--invalid .field__input { border-color: var(--color-danger); }

/* ---- Statistika xanası ---- */
.metric {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.metric__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}
.metric__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ---- Tərəqqi zolağı ---- */
.progress {
  height: var(--space-2);
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--subject, var(--color-primary));
  border-radius: var(--radius-full);
  transition: width var(--motion-base) var(--easing);
}

/* ---- Bölmə başlığı ---- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Dar ekranda izah başlığın YANINDA sıxılıb pis sarılırdı (real
   * render testində görüldü) - sarılmağa icazə verilir ki, öz sətrinə
   * düşsün. */
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-header__hint { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Üç məcburi hal: boş / xəta / yüklənir ----
 * Flutter tətbiqində bunların çoxu sadə mətn idi. Hər siyahı üçün
 * üçü də olmalıdır (bax dizayn speci). */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}
.state__icon  { font-size: var(--text-4xl); line-height: 1; }
.state__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.state__text  { color: var(--color-text-muted); max-width: var(--width-form); }

/* Yüklənmə dairəsi - `currentColor` işlədir ki, hər kontekstdə uyğun
 * rəngdə olsun. */
.spinner {
  width: var(--space-6);
  height: var(--space-6);
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skelet - məzmun yüklənərkən yerini tutur (boş ekran sıçrayışının
 * qarşısını alır). */
.skeleton {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .5; } }

/* ---- Avatar ---- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}
.avatar--lg { width: var(--space-12); height: var(--space-12); font-size: var(--text-lg); }

/* ---- Xəbərdarlıq lövhəsi ---- */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.notice--info    { background: var(--color-info-soft);    color: var(--color-info); }
.notice--success { background: var(--color-success-soft); color: var(--color-success); }
.notice--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.notice--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }

/* ---- Brend ---- */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__accent { color: var(--color-primary); }

/* ---- Naviqasiya çərçivəsi ----
 * İki ölçü, bir struktur: geniş ekranda üst zolaqda üfüqi linklər,
 * dar ekranda ALT naviqasiya paneli (əsl mobil tətbiq hissi).
 * mediapulse üst zolaq + hamburger işlədir; burada alt panel seçildi,
 * çünki tələbələr telefonda bir əllə istifadə edir. */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--app-bar-height);
  padding: 0 var(--space-4);
  /* QARA LÖVHƏ. Brendin üç rəngindən biri qaradır; üst zolaq onun
   * daşıyıcısıdır. Funksional faydası da var: tətbiqin karkası
   * məzmundan aydın ayrılır, ağ sual kartları «lövhənin üstündə»
   * oturur. */
  background: var(--color-ink-surface);
  color: var(--color-on-ink);
  border-bottom: 1px solid var(--color-ink-surface);
}

/* ---- QARA ZOLAQ ÜZƏRİNDƏKİ ELEMENTLƏR ----
 * REAL BUG (2026-09-12): zolaq qara edildi, amma içindəki elementlərin
 * rəngi yenilənmədi. Nəticədə «Master» sözü qara fonda qara mətnlə
 * yazılırdı - kontrast 1.03:1, yəni GÖRÜNMÜRDÜ. Ekran şəklində
 * «Master» yoxa çıxmış, yalnız «AI» qalmışdı.
 *
 * Dərs: səthin rəngini dəyişəndə onun BÜTÜN uşaqları yoxlanmalıdır -
 * `--color-text` səhifə fonu üçün hesablanıb, səth üçün yox. */
.app-bar .brand { color: var(--color-on-ink); }
.app-bar .brand__accent { color: var(--color-primary-on-ink); }

/* Avatar zolaqda: solğun yaşıl fon qara üzərində yoxa çıxır. */
.app-bar .avatar {
  background: var(--color-ink-active);
  color: var(--color-on-ink);
}

/* «Çıxış» düyməsi zolaqda: ağ fonlu düymə qara zolaqda həddən artıq
 * qışqırır və diqqəti əsas məzmundan alır. Kontur variantı. */
.app-bar .btn--secondary {
  background: transparent;
  color: var(--color-on-ink);
  border-color: var(--color-on-ink-muted);
}
.app-bar .btn--secondary:hover:not(:disabled) {
  background: var(--color-ink-hover);
  border-color: var(--color-on-ink);
}

.app-nav { display: flex; gap: var(--space-1); }

.app-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-on-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.app-nav__link:hover {
  background: var(--color-ink-hover);
  color: var(--color-on-ink);
  text-decoration: none;
}

/* Cari səhifə - rəngdən ƏLAVƏ fon da verilir: yalnız rənglə fərq
 * rəng korluğu olan istifadəçilər üçün kifayət deyil.
 * Qara zolaqda SARI işlədilir: təbaşir kimi oxunur və brendin üçüncü
 * rəngini işə salır. */
.app-nav__link[aria-current="page"] {
  background: var(--color-ink-active);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.bottom-nav { display: none; }

.app-bar__user { display: flex; align-items: center; gap: var(--space-2); }

@media (max-width: 768px) {
  /* Dar ekranda üst zolaqda yalnız brend + istifadəçi qalır,
   * bölmələr aşağı köçür. */
  .app-nav { display: none; }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    /* iPhone-un aşağı "home" zolağı düymələri örtməsin. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    height: var(--bottom-nav-height);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-decoration: none;
  }
  .bottom-nav__link:hover { text-decoration: none; }
  .bottom-nav__link[aria-current="page"] {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
  }
  .bottom-nav__icon { font-size: var(--text-lg); line-height: 1; }

  /* Məzmun alt panelin ARXASINDA qalmamalıdır. */
  .app-shell { padding-bottom: calc(var(--bottom-nav-height) + var(--space-6)); }
}

/* ---- İkonlar ----
 * Tabler Icons (MIT), `assets/icons.svg` sprite-ından `<use>` ilə.
 * Emoji İŞLƏDİLMİR: hər platformada fərqli görünür, rəngi idarə
 * olunmur və ekran oxuyucusu onu mətn kimi oxuyur. */
.icon {
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: var(--space-4); height: var(--space-4); }
.icon--lg { width: var(--space-8); height: var(--space-8); }

/* Boş/xəta hallarındakı böyük ikon - əvvəl emoji idi. */
.state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.state__icon .icon { width: var(--space-6); height: var(--space-6); }

/* Xəbərdarlıq lövhəsindəki ikon mətn rəngini götürür. */
.notice .icon { width: var(--space-4); height: var(--space-4); margin-top: 2px; }

/* ---- Cavab variantı ----
 * Quiz ekranının ƏSAS elementi. Əvvəl canlı sessiya və ev tapşırığı
 * variantları `btn btn--secondary` ilə çəkirdi, yəni ekranda beş
 * BƏRABƏR BOZ DÜYMƏ görünürdü - «tədris tətbiqi hissi yoxdur»
 * şikayətinin birinci səbəbi məhz bu idi. `.option` onsuz da burada
 * təyin olunmuşdu və HEÇ YERDƏ işlədilmirdi (yalnız açılış
 * səhifəsindəki nümunə sualda).
 *
 * Anatomiya: [hərf nişanı] [variant mətni] [nəticə işarəsi]
 * Hərf nişanı A-E üçün beş ayrı rəngdədir (`--opt`), mətn isə sakit
 * qalır. Toxunma hədəfi 56px - mobil minimumu 44px-dən yuxarıdır. */
.option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing),
              background var(--motion-fast) var(--easing),
              transform var(--motion-fast) var(--easing);
}
.option:hover:not(:disabled) {
  border-color: var(--opt, var(--color-primary));
  background: var(--color-surface-alt);
}
/* Fiziki basma hissi. `translateY` işlədilir, `height` YOX - ölçü
 * dəyişikliyi layout-u yenidən hesablatdırır və mobildə büdrəyir. */
.option:active:not(:disabled) { transform: translateY(1px); }

.option:disabled { cursor: default; }
/* Cavab verildikdən sonra bütün variantlar `disabled` olur, amma
 * SOLĞUNLAŞMIR: tələbə hansı variantı seçdiyini və düzgününü
 * oxumalıdır. `.btn:disabled { opacity: .5 }` burada yanlış olardı. */
.option:disabled:not(.option--correct):not(.option--wrong):not(.option--chosen) {
  color: var(--color-text-muted);
}

.option__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  /* Fallback QƏSDƏN rənglidir: hərf `--opt-ink` (ağ) ilə yazılır, boz
     fon üzərində ağ hərf GÖRÜNMƏZ olardı. Açılış səhifəsində məhz bu
     baş verirdi - brauzer render-ində tutuldu. */
  background: var(--opt, var(--color-primary));
  color: var(--opt-ink);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: 1;
}
.option__text { flex: 1; min-width: 0; }
.option__mark {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: 1;
}

/* Seçilmiş, hələ nəticə gəlməmiş vəziyyət - server cavabı gözlənilir.
 * Bu addım əvvəl GÖRÜNMÜRDÜ: tələbə toxunurdu, heç nə dəyişmirdi. */
/* «Seçildi, server cavabı gözlənilir» - QƏSDƏN RƏNGSİZDİR.
 * Əvvəl brend rəngi ilə doldurulurdu. Brend mavi olanda bu işləyirdi,
 * amma brend YAŞIL olandan sonra «seçilmiş» ilə «düzgün» eyni ailədən
 * iki solğun yaşıl olardı - tələbə bir anlıq cavabın düzgün sayıldığını
 * zənn edərdi. Gözləmə vəziyyətinin rəngi YOXDUR: qalın qrafit kənar. */
.option--chosen {
  border-color: var(--color-text);
  border-width: 2px;
  background: var(--color-surface-alt);
  font-weight: var(--weight-semibold);
}

/* Düzgün/səhv İKİ siqnalla işarələnir: fon rəngi VƏ işarə (✓/✗).
 * Yalnız rənglə ayırmaq rəng korluğu olan istifadəçilər üçün kifayət
 * deyil - bu qayda əvvəlki versiyadan saxlanılır. */
.option--correct {
  border-color: var(--color-success);
  border-width: 2px;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}
.option--correct .option__letter { background: var(--color-success); color: var(--color-surface); }

.option--wrong {
  border-color: var(--color-danger);
  border-width: 2px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}
.option--wrong .option__letter { background: var(--color-danger); color: var(--color-surface); }

/* Quiz qabığı: geniş ekranda sual sətri 1000px uzanmasın.
 * Brauzer render-ində göründü - hərf nişanı ilə mətnin arası açılır və
 * göz variantları bir baxışda tuta bilmir. Mətn oxunaqlığı üçün
 * `--width-prose` onsuz da layihədə var. */
.quiz-shell {
  width: 100%;
  max-width: var(--width-prose);
  margin-inline: auto;
}

/* Variant siyahısı. `gap` boşluğu - toxunma hədəfləri arasında ən azı
 * 8px olmalıdır, yoxsa telefonda səhv variant seçilir. */
.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---- Quiz başlığı: sayğac + vaxt ---- */
.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.quiz-counter {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Vaxt sayğacı - rəqəmlər eyni enli olmalıdır, yoxsa hər saniyə
 * zolaq titrəyir. */
.quiz-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.quiz-timer--urgent { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---- Sual mətni ----
 * Quiz ekranında sual EN BÖYÜK elementdir. Əvvəl adi `<p>` idi və
 * ekranda variantlardan seçilmirdi. */
.quiz-question {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* ---- Sual-sual tərəqqi ----
 * Zolaq yerinə SEQMENT: tələbə neçə sual qaldığını dərhal görür.
 * Zolaq «70%» deyir, seqment «7-dən 5-ini bitirdin» deyir - ikincisi
 * imtahan hazırlığında daha faydalıdır. */
.quiz-steps {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.quiz-steps__item {
  flex: 1;
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  transition: background var(--motion-base) var(--easing);
}
/* Tərəqqi ADAÇAYI (struktur), xal dairəsi SARI (nailiyyət). Əvvəl hər
 * ikisi fənn rəngini götürürdü - brend yaşıl-sarı-qara olandan sonra
 * ekranda təsadüfi bənövşəyi halqa görünürdü. Fənn rəngi öz yerində
 * (kart kənarı, fənn çipi) qalır. */
.quiz-steps__item--done    { background: var(--color-primary); }
.quiz-steps__item--current { background: var(--color-primary); opacity: .45; }

/* ---- Nəticə vəziyyəti (verdict) ----
 * Cavabdan sonra ekranın ƏSAS mesajı. Əvvəl kiçik bir `badge` idi -
 * doğru/səhv hissi ötürmürdü. */
.verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}
.verdict__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1;
}
.verdict__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}
.verdict__note { font-size: var(--text-sm); }

.verdict--correct { background: var(--color-success-soft); color: var(--color-success); }
.verdict--correct .verdict__icon { background: var(--color-success); color: var(--color-surface); }
.verdict--wrong { background: var(--color-danger-soft); color: var(--color-danger); }
.verdict--wrong .verdict__icon { background: var(--color-danger); color: var(--color-surface); }

/* ---- Ardıcıl düzgün cavab ----
 * Kiçik, amma tədris tətbiqlərində ən güclü motivasiya elementi.
 * İKİ və daha çox ardıcıl cavabdan sonra görünür - birdən sonra
 * «seriya» demək mənasızdır. */
.streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  /* SARI aksent - «afərin» siqnalı. Əvvəl xəbərdarlıq rəngi idi, yəni
   * müvəffəqiyyət nişanı «diqqət» rəngi ilə çəkilirdi. */
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* ---- Yekun xal dairəsi ----
 * `conic-gradient` ilə - SVG və ya kitabxana LAZIM DEYİL.
 * `--pct` 0-100 arası JS-dən verilir. */
.score-ring {
  --pct: 0;
  display: grid;
  place-items: center;
  width: var(--score-ring-size);
  height: var(--score-ring-size);
  border-radius: var(--radius-full);
  background:
    conic-gradient(var(--color-accent) calc(var(--pct) * 1%),
                   var(--color-surface-alt) 0);
}
.score-ring__inner {
  display: grid;
  place-items: center;
  width: calc(var(--score-ring-size) - var(--space-4));
  height: calc(var(--score-ring-size) - var(--space-4));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  text-align: center;
}
.score-ring__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Faiz mətni dairənin İÇİNDƏ DEYİL, ALTINDADIR.
 * Brauzer render-ində göründü: dairənin mərkəzindən aşağıda enişən
 * sahə daralır, ona görə «80% düzgün» halqanın üstünə düşürdü. Dairənin
 * içində yalnız qısa rəqəm qalır. */
.score-ring__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Sıralama sətri ----
 * İlk üç yer nişanla işarələnir. Ad UZUN ola bilər - kəsilmir, sıxılır;
 * xal sütunu isə eyni enli rəqəmlərlə düz durur. */
.rank {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.rank--podium { border-color: var(--color-border-strong); }
.rank--me { border-color: var(--color-primary); border-width: 2px; background: var(--color-primary-soft); }
.rank__place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.rank--podium .rank__place {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* Birinci yer SARIDIR - sıralamada tək bir qalib var və o, bir
 * baxışda seçilməlidir. İkinci/üçüncü yaşıl qalır. */
.rank--first .rank__place {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.rank__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank__score {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ---- Açılış paneli (tərəqqi ilə açılma) ----
 * Nadir edilən iş (yeni sual bankı yaratmaq) səhifəni tutmasın, amma
 * bir klik məsafəsində qalsın. Müəllim adətən MÖVCUD bankı işlətmək
 * üçün gəlir. */
.disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  list-style: none;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--color-text-muted);
}
.disclosure[open] .disclosure__summary::after { content: '−'; }
.disclosure[open] .disclosure__summary { border-bottom: 1px solid var(--color-border); }
.disclosure__body { padding: var(--space-4); }

/* ---- Bankların vəziyyət sətri ----
 * Rəqəmlər burada dekorasiya deyil: «uğursuz» sayı müəllimin dərhal
 * görməli olduğu şeydir. Ona görə üç böyük rəqəm kartı yox, bir sətir. */
.banks-summary {
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.banks-summary--attention { color: var(--color-danger); font-weight: var(--weight-medium); }


/* ---- Sual bankı kartları ----
 * Render testində göründü: 240px-lik defolt sütunda iki düymə yan-yana
 * sığmır və alt-alta düşür, kart isə yarımçıq görünür. Bankın iki
 * hərəkəti (sualları yoxla / sessiya başlat) BİR sətirdə olmalıdır.
 * Kartların hündürlüyü bərabərləşir, hərəkətlər aşağıya sabitlənir -
 * əks halda «hazırlanır» kartı boş qutu kimi qalır. */
.grid--banks { grid-template-columns: repeat(auto-fill, minmax(var(--grid-bank-min), 1fr)); }
.bank { display: flex; flex-direction: column; gap: var(--space-2); }
.bank__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.bank__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); text-wrap: pretty; }
.bank__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.bank__error { font-size: var(--text-xs); color: var(--color-danger); text-wrap: pretty; }
/* Hərəkətlər həmişə aşağıda: kartlar müxtəlif məzmunda olsa da
 * düymələr eyni xətdə dayanır. */
.bank__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* ---- İş xülasəsi paneli ----
 * Müəllimin dərhal görməli olduğu bir-iki fakt. Böyük rəqəm kartları
 * QƏSDƏN seçilmədi: burada dəyər rəqəmdə yox, VƏZİYYƏTDƏ və ona aparan
 * keçiddədir. Panel məlumat yoxdursa ümumiyyətlə göstərilmir. */
.brief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-bank-min), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.brief__item { display: flex; flex-direction: column; gap: var(--space-1); }
.brief__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.brief__value { font-size: var(--text-base); text-wrap: pretty; }
.brief__link { font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---- Xülasə paneli (`suallar.html`, `tarixce.html`) ----
 * Siyahıdan ƏVVƏL gələn bir-iki sətirlik nəticə: «hansı sualdan
 * başlamalıyam», «hansı fənndə geridəyəm». Siyahının özü «nə oldu»nu
 * deyir, bu panel «nə etməliyəm»i. */
.audit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.audit__set-finding { color: var(--color-warning); text-wrap: pretty; }

.qcard__question {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-wrap: pretty;
}
/* Tapıntı XƏBƏRDARLIQDIR, xəta deyil: sual səhv olmaya da bilər,
 * sadəcə yoxlanmalıdır. Qırmızı rəng müəllimi yanlış yönləndirərdi. */
.qcard__finding { color: var(--color-warning); text-wrap: pretty; }
.qcard__saved   { color: var(--color-success); }

/* Dəvət kodu - müəllim onu ekrandan oxuyub sinifə deyir, tələbə isə
   əl ilə yazır. Ona görə mono şrift və geniş simvol arası: `K7M3QX`
   adi mətn şriftində sıxışıq və qarışıq oxunur. */
.invite-code {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-code);
  color: var(--color-text);
  /* `user-select: all` bir kliklə tam kodu seçir - müəllim onu
     kopyalayıb WhatsApp qrupuna atır. */
  user-select: all;
}

/* Gözləyən istək sətri. Kart İÇİNDƏ siyahıdır, ona görə öz çərçivəsi
   yoxdur - yalnız sətirlər arası ayırıcı. */
.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.request-row:first-of-type { border-top: none; }

/* Dar ekranda ad və düymələr alt-alta düşür, yoxsa düymələr sıxılır. */
@media (max-width: 480px) {
  .request-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Sinif lövhəsi sətri. Kart içində siyahıdır, ona görə öz çərçivəsi
   yoxdur - yalnız ayırıcı. */
.board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.board-row:first-child { border-top: none; }

/* Öz sətrini vurğula - uzun siyahıda tələbə özünü axtarmamalıdır. */
.board-row--me {
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

/* ---- Reading mətni (ev tapşırığı, spec 2026-09-29 §5) ----
 * Sənəd şrifti: bu, tələbənin OXUDUĞU mətndir, interfeys yazısı deyil.
 * `pre-line`: materialdakı abzaslar qorunur (mətn textContent ilə gəlir). */
.passage__text {
  font-family: var(--font-document);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  white-space: pre-line;
}