/* ==========================================================================
   MULTILEV — theme.css (dizayn v3: tiniq matn + yumshoq ranglar)
   styles.css dan KEYIN ulanadi. Faqat ustiga yozadi, hech narsani buzmaydi.
   Tamoyil: uzoq o'qishda ko'z charchamasin — to'q (lekin sof qora emas) matn,
   kattaroq shrift, keng qator oralig'i; ranglar faqat yumshoq urg'u sifatida.
   ========================================================================== */

:root {
  --bg: #F3F5F9;
  --ink: #141B2D;
  --ink-2: #2F3A4F;
  --ink-soft: #4F5A6E;
  --faint: #8993A6;
  --border: #E1E6EE;
  --read-size: 18px;          /* imtihon matni; A− / A+ bilan o'zgaradi */
  --q-size: 16.5px;           /* savol va variantlar */
  --sk: var(--brand); --sk-2: #818CF8; --sk-bg: var(--brand-light); --sk-ink: var(--brand-dark);
}

body[data-skill="listening"] { --sk: #2563EB; --sk-2: #38BDF8; --sk-bg: #EAF2FF; --sk-ink: #1D4ED8; }
body[data-skill="reading"]   { --sk: #059669; --sk-2: #2DD4BF; --sk-bg: #E7F8F1; --sk-ink: #047857; }
body[data-skill="writing"]   { --sk: #EA580C; --sk-2: #FBBF24; --sk-bg: #FFF1E6; --sk-ink: #C2410C; }
body[data-skill="speaking"]  { --sk: #DB2777; --sk-2: #A78BFA; --sk-bg: #FCEAF3; --sk-ink: #BE185D; }

body { font-size: 15.5px; color: var(--ink); }
p { color: var(--ink-2); }

/* Sahifa foni: tepada ko'nikma rangining juda yumshoq tusi */
body[data-skill] .app-main {
  background:
    radial-gradient(1200px 380px at 70% -120px, color-mix(in srgb, var(--sk) 12%, transparent), transparent 70%),
    var(--bg);
}

/* Yon menyu: faol bo'lim o'z rangida */
.side-link.active { color: var(--sk); }
.side-link.active .side-ico:not([class*="c-"]) { background: var(--sk-bg); color: var(--sk); }

/* ---------- Ko'nikma sarlavhasi: rangli banner ---------- */
body[data-skill] .skill-head {
  background: linear-gradient(120deg, var(--sk) 0%, color-mix(in srgb, var(--sk) 55%, var(--sk-2)) 100%);
  border-radius: 24px; padding: 26px 28px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--sk) 55%, transparent);
}
body[data-skill] .skill-head::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
body[data-skill] .skill-head::before {
  content: ""; position: absolute; right: 90px; bottom: -110px; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
body[data-skill] .skill-head h1, body[data-skill] .skill-head h2 { color: #fff; }
body[data-skill] .skill-head p { color: rgba(255,255,255,.9); }
body[data-skill] .skill-head .eyebrow { color: rgba(255,255,255,.85); }
body[data-skill] .skill-head .ico { background: rgba(255,255,255,.2); color: #fff; }

/* Daraja va part kartalari */
.level-card { border-radius: 18px; }
.level-card .lv-name { font-size: 1.75rem; }
.part-row:hover, .exercise-card:hover { border-color: color-mix(in srgb, var(--sk) 45%, #fff); }
.part-row.active, .exercise-card.active { border-color: var(--sk); box-shadow: 0 0 0 3px var(--sk-bg); }
.part-row.active .part-num { background: var(--sk); }
.part-progress-fill { background: var(--sk) !important; }
.crumb-pill { background: var(--sk-bg); color: var(--sk-ink); }
.crumb-back:hover { color: var(--sk); border-color: color-mix(in srgb, var(--sk) 45%, #fff); }

/* ---------- Mashq ichidagi matn: TINIQ va O'QISH OSON ---------- */
#viewExam .card p, #viewMockExam .card p,
#viewExam .question-block p, #viewMockExam .question-block p {
  color: var(--ink);
  font-size: var(--read-size);
  line-height: 1.8;
  font-weight: 450;
  letter-spacing: .002em;
}
:is(#viewExam, #viewMockExam) .split-panel-ref .card p { max-width: 68ch; }
:is(#viewExam, #viewMockExam) .split-panel-ref .card { padding: 28px 30px; }

/* Xulosa bloki: och binafsha o'rniga oq karta, chapda rangli chiziq */
:is(#viewExam, #viewMockExam) .card[style*="brand-light"] {
  background: #fff !important; border: 1px solid var(--border) !important;
  box-shadow: inset 4px 0 0 var(--sk), var(--shadow);
}
:is(#viewExam, #viewMockExam) .card h4 { color: var(--ink); font-size: 1.05rem; }

/* Savol raqami: rangli belgi */
.question-block { border-radius: 18px; padding: 22px 22px 14px; }
.question-block .qnum {
  display: inline-flex; align-items: center; width: fit-content;
  background: var(--sk-bg); color: var(--sk-ink);
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.question-block > p:first-of-type, .question-block .q-text { font-weight: 600; font-size: var(--q-size) !important; line-height: 1.55 !important; }

/* Variantlar: kattaroq, aniq tanlov holati */
.option {
  padding: 14px 16px; font-size: var(--q-size); color: var(--ink); font-weight: 500;
  border-color: #DCE2EB; border-radius: 14px; line-height: 1.45;
}
.option:hover { border-color: color-mix(in srgb, var(--sk) 40%, #fff); background: #FBFCFE; }
.option.selected {
  border-color: var(--sk); background: var(--sk-bg);
  box-shadow: inset 4px 0 0 var(--sk);
}
.option input { accent-color: var(--sk); }
.option.correct { border-color: #34D399; background: #ECFDF5; box-shadow: inset 4px 0 0 #10B981; }
.option.incorrect { border-color: #FCA5A5; background: #FEF2F2; box-shadow: inset 4px 0 0 #EF4444; }

/* Matn ichidagi bo'sh kataklar */
.gapfill-input, .summary-input, .mock-gapfill-input, .mock-summary-input, .ga-input, .sa-input {
  background: #F7F9FC; border: 2px solid #C9D2DF; border-radius: 9px !important;
  font-weight: 600 !important; color: var(--sk-ink) !important; font-size: 16px !important;
}
.gapfill-input:focus, .summary-input:focus, .mock-gapfill-input:focus, .mock-summary-input:focus, .ga-input:focus, .sa-input:focus {
  background: #fff; border-color: var(--sk); box-shadow: 0 0 0 4px var(--sk-bg);
}
.gapfill-input::placeholder, .summary-input::placeholder { color: #98A2B3; font-weight: 600; }

/* Tanlov (select) va matn maydonlari */
:is(#viewExam, #viewMockExam) select { font-size: 16px; color: var(--ink); }
textarea:focus, input:focus, select:focus { border-color: var(--sk); box-shadow: 0 0 0 4px var(--sk-bg); }

/* Asosiy tugma: ko'nikma sahifasida o'z rangida */
body[data-skill] .btn-primary {
  background: linear-gradient(135deg, var(--sk), color-mix(in srgb, var(--sk) 70%, var(--sk-2)));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--sk) 70%, transparent);
}

/* A− / A+ matn o'lchami tugmalari */
.font-ctl { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.font-ctl button { border: 0; background: transparent; font-weight: 800; color: var(--ink-2); width: 34px; height: 30px; border-radius: 999px; cursor: pointer; }
.font-ctl button:hover { background: var(--sk-bg); color: var(--sk); }
.font-ctl .fs-lbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); padding: 0 6px; }

/* ---------- Bosh sahifa: jonliroq, lekin tinch ---------- */
body[data-page="home"] .app-main {
  background:
    radial-gradient(520px 320px at 12% 0%, rgba(99,102,241,.20), transparent 70%),
    radial-gradient(520px 320px at 88% 6%, rgba(20,184,166,.18), transparent 70%),
    radial-gradient(600px 360px at 50% 38%, rgba(244,114,182,.12), transparent 70%),
    var(--bg);
}
.skill-card { position: relative; overflow: hidden; border-top: 0; }
.skill-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.skill-card.listening { background: linear-gradient(180deg, #F2F7FF 0%, #fff 55%); }
.skill-card.reading   { background: linear-gradient(180deg, #EFFBF6 0%, #fff 55%); }
.skill-card.writing   { background: linear-gradient(180deg, #FFF6EE 0%, #fff 55%); }
.skill-card.speaking  { background: linear-gradient(180deg, #FEF1F7 0%, #fff 55%); }
.skill-card.listening::before { background: linear-gradient(90deg, #2563EB, #38BDF8); }
.skill-card.reading::before   { background: linear-gradient(90deg, #059669, #2DD4BF); }
.skill-card.writing::before   { background: linear-gradient(90deg, #EA580C, #FBBF24); }
.skill-card.speaking::before  { background: linear-gradient(90deg, #DB2777, #A78BFA); }
.skill-card .skill-icon { width: 50px; height: 50px; border-radius: 15px; }

@media (max-width: 720px) {
  :root { --read-size: 17px; --q-size: 16px; }
  .exam-header .font-ctl .fs-lbl { display: none; }
  body[data-skill] .skill-head { padding: 20px; border-radius: 20px; }
  :is(#viewExam, #viewMockExam) .split-panel-ref .card { padding: 20px; }
}

/* Mashq sarlavhasi (yopishqoq) — yangi fon bilan bir xil */
#viewExam .exam-header { background: color-mix(in srgb, var(--bg) 92%, transparent); }
input[type="range"] { accent-color: var(--sk); }

/* Daraja kartalari: o'z rangining yumshoq tusi */
.level-card { background: linear-gradient(135deg, color-mix(in srgb, var(--lv, var(--brand)) 11%, #fff) 0%, #fff 62%) !important; }
.level-card .bar > i, .level-card .lv-bar > i { background: var(--lv, var(--sk)); }

/* So'zlar banki: ko'nikma rangida */
.word-bank { background: var(--sk-bg); border: 1px dashed color-mix(in srgb, var(--sk) 45%, #fff); }
.word-bank-h { color: var(--sk-ink); }
.wb-chip { border-color: color-mix(in srgb, var(--sk) 25%, #fff); color: var(--ink); font-size: 15.5px; }

/* Writing va Speaking: topshiriq matni ham tiniq */
#wrBody .wr-task-text, #wrBody .wr-task p { color: var(--ink); font-size: var(--q-size); line-height: 1.7; }
#wrBody textarea { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.sp-q p { font-size: var(--q-size); }

/* Mashq sarlavhasidagi asboblar (A−/A+ va taymer) */
.exam-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Listening Part 2: eslatmalar varag'i — har bir qator alohida */
.notes-card { padding: 10px 28px; }
.notes-line {
  color: var(--ink); font-size: var(--read-size); line-height: 1.6; font-weight: 450;
  padding: 12px 0; border-bottom: 1px dashed #DCE2EB;
}
.notes-line:last-child { border-bottom: 0; }

/* ---------- AI baholash limiti va modal oynalar ---------- */
.ml-quota-row { margin: -6px 0 18px; }
.ml-quota { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
.ml-quota svg { width: 16px; height: 16px; color: var(--sk); }
.ml-quota b { color: var(--sk-ink); }
.ml-quota a { font-weight: 700; color: var(--sk); }
.ml-quota.prem { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.ml-quota.prem svg { color: #D97706; }
.ml-quota.out { background: #FFF7ED; border-color: #FED7AA; color: #9A3412; }
.ml-quota.out svg { color: #EA580C; }
.ml-quota-inline:empty { display: none; }
.ml-quota-inline .ml-quota { font-size: 13px; }
.ml-modal { text-align: center; max-width: 460px; }
.ml-modal h3 { margin: 12px 0 8px; font-size: 1.3rem; }
.ml-modal p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }
.ml-modal .ml-modal-note { font-size: 13.5px; color: var(--ink-soft); }
.ml-modal-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto; }
.ml-modal-ico svg { width: 28px; height: 28px; }
.ml-modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ml-modal-actions .btn { width: 100%; justify-content: center; }

/* ---------- Xato ustida ishlash ---------- */
.ml-review { margin-top: 18px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow); }
.ml-review-h h4 { margin: 0 0 4px; font-size: 1.1rem; }
.ml-review-h p { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }
.ml-rv-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #EEF1F6; }
.ml-rv-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--sk-bg); color: var(--sk-ink); }
.ml-rv-main { flex: 1; min-width: 0; }
.ml-rv-ans { font-size: 15.5px; color: var(--ink); }
.ml-rv-ans b { color: #047857; }
.ml-rv-why { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ml-rv-show { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--sk) 35%, #fff); background: var(--sk-bg); color: var(--sk-ink); font-weight: 700; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.ml-rv-show svg { width: 15px; height: 15px; }
.ml-rv-show.done { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
mark.ml-ev { background: #FDE68A; color: inherit; border-radius: 4px; padding: 1px 2px; box-shadow: 0 0 0 2px #FDE68A; }
.ml-transcript { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 14px; background: #FBFCFE; }
.ml-transcript summary { cursor: pointer; font-weight: 700; padding: 12px 16px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.ml-transcript summary svg { width: 18px; height: 18px; color: var(--sk); }
.ml-transcript .tr-body { padding: 0 18px 12px; }
.tr-p { color: var(--ink); font-size: var(--q-size); line-height: 1.75; margin: 0 0 10px; }
.tr-sp { padding: 8px 0; border-top: 1px dashed #DCE2EB; }
.tr-sp:first-child { border-top: 0; }
.tr-sp > b { display: block; margin-bottom: 4px; color: var(--sk-ink); font-size: 14px; }
.tr-who { font-weight: 700; color: var(--ink-soft); }