/* ==========================================================================
   Kurs — umumiy uslublar (blueprint dark theme)
   Hech qanday tashqi framework ishlatilmaydi.
   ========================================================================== */

:root {
  /* Fon qatlamlari */
  --bg:            #0d1117;
  --bg-2:          #0f151d;
  --panel:         #131b24;
  --panel-2:       #172029;
  --line:          #1f2a37;
  --line-soft:     #1a232e;

  /* Matn */
  --text:          #d6dee8;
  --text-strong:   #f0f6fc;
  --muted:         #8b98a8;
  --faint:         #63707f;

  /* Urg'u ranglari */
  --accent:        #58a6ff;
  --accent-dim:    #2a4d7a;
  --accent-soft:   rgba(88, 166, 255, 0.10);
  --cyan:          #63e6e2;
  --green:         #6ee7a8;
  --amber:         #f2c661;
  --red:           #ff7b72;
  --violet:        #b392f0;

  /* O'lchamlar */
  --measure:       760px;   /* o'qish uchun qulay matn kengligi (sozlamadan o'zgaradi) */
  --text-size:     18px;    /* dars matni o'lchami (sozlamadan o'zgaradi) */
  --code-bg:       #0a0e14;
  --code-text:     #c9d4e0;
  --shadow:        rgba(0,0,0,.35);
  --grid-line:     rgba(88,166,255,0.045);
  --glow:          rgba(88,166,255,0.08);
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --wide:          1080px;
  --radius:        10px;
  --radius-sm:     6px;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
}


/* ---------- Yorug' mavzu ---------- */
:root[data-theme="light"] {
  --bg:            #f6f7f9;
  --bg-2:          #ffffff;
  --panel:         #ffffff;
  --panel-2:       #eef2f7;
  --line:          #d9e0e8;
  --line-soft:     #e6ebf1;
  --text:          #26313d;
  --text-strong:   #0f1720;
  --muted:         #5b6875;
  --faint:         #8a97a5;
  --accent:        #0b63d6;
  --accent-dim:    #9cc0ef;
  --accent-soft:   rgba(11, 99, 214, 0.08);
  --cyan:          #0a7f7a;
  --green:         #1f8a4c;
  --amber:         #9a6b00;
  --red:           #c8362e;
  --violet:        #6b46c1;
  --code-bg:       #f3f5f8;
  --code-text:     #1f2933;
  --shadow:        rgba(15, 23, 32, .12);
  --grid-line:     rgba(11, 99, 214, 0.06);
  --glow:          rgba(11, 99, 214, 0.06);
}

/* ---------- Sepiya (qog'oz) mavzu ---------- */
:root[data-theme="sepia"] {
  --bg:            #f3ead8;
  --bg-2:          #f8f1e3;
  --panel:         #faf4e8;
  --panel-2:       #ede3cf;
  --line:          #d8cbb2;
  --line-soft:     #e3d8c2;
  --text:          #3d3226;
  --text-strong:   #241c14;
  --muted:         #6e5f4c;
  --faint:         #9a8a74;
  --accent:        #8a4b0f;
  --accent-dim:    #d8b48c;
  --accent-soft:   rgba(138, 75, 15, 0.08);
  --cyan:          #2a6f6a;
  --green:         #3c7a3a;
  --amber:         #8a5f00;
  --red:           #b0402f;
  --violet:        #6a4a8f;
  --code-bg:       #efe5d0;
  --code-text:     #2d2419;
  --shadow:        rgba(60, 40, 10, .14);
  --grid-line:     rgba(138, 75, 15, 0.06);
  --glow:          rgba(138, 75, 15, 0.05);
}

/* Yorug' fonlarda SVG ichidagi qattiq ranglarni moslash */
:root[data-theme="light"] svg text[fill="#f2c661"], :root[data-theme="sepia"] svg text[fill="#f2c661"] { fill: var(--amber); }
:root[data-theme="light"] svg text[fill="#ff7b72"], :root[data-theme="sepia"] svg text[fill="#ff7b72"] { fill: var(--red); }
:root[data-theme="light"] svg text[fill="#8b98a8"], :root[data-theme="sepia"] svg text[fill="#8b98a8"] { fill: var(--muted); }
:root[data-theme="light"] svg [stroke="#58a6ff"], :root[data-theme="sepia"] svg [stroke="#58a6ff"] { stroke: var(--accent); }
:root[data-theme="light"] svg [stroke="#1f2a37"], :root[data-theme="sepia"] svg [stroke="#1f2a37"] { stroke: var(--line); }
:root[data-theme="light"] svg marker path, :root[data-theme="sepia"] svg marker path { fill: var(--accent-dim); }
:root[data-theme="light"] .svg-arrow, :root[data-theme="sepia"] .svg-arrow { stroke: var(--accent-dim); }
:root:not([data-theme="dark"]) .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); }

* { box-sizing: border-box; }

/* hidden atributi har doim kuchli bo'lsin (display: flex uni bekor qilmasin) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  /* blueprint to'r: juda past kontrastli chiziqlar */
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    radial-gradient(900px 500px at 50% -10%, var(--glow), transparent 70%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dars sahifalarida to'r fon o'qishga xalaqit beradi — o'chiramiz */
html[data-dars] body { background-image: none; }

img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Tuzilma ---------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px;
}
.wrap--wide { max-width: var(--wide); }

/* ---------- Yuqori panel (topbar) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 17, 23, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar__back {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.topbar__back:hover { color: var(--accent); }

.topbar__title {
  font-size: 13.5px;
  color: var(--faint);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 140px;
  min-width: 0;
}
.topbar__title b { color: var(--text); font-weight: 600; }

.topbar__nav { display: flex; gap: 8px; margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 13.5px;
  font-family: var(--font-mono);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent-dim); background: var(--panel-2); color: var(--text-strong); text-decoration: none; }
.btn[aria-disabled="true"], .btn.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.btn--primary { border-color: var(--accent-dim); background: var(--accent-soft); color: var(--accent); }
.btn--done { border-color: #2f6b4a; background: rgba(110,231,168,.08); color: var(--green); }

/* ---------- Progress bar ---------- */

.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.progress__track {
  flex: 1 1 120px;
  height: 6px;
  min-width: 80px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.progress > span { white-space: nowrap; }
.done-bar .progress { flex: 1 1 260px; }
.progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width .35s ease;
}

/* ---------- Sarlavha bloklari ---------- */

.hero {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 40px;
}
.hero h1 {
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.18;
  margin: 12px 0 14px;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.hero p { color: var(--muted); font-size: 17.5px; max-width: 640px; margin: 0 0 22px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* ---------- Kartochkalar (index) ---------- */

.module { margin-bottom: 52px; }
.module__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.module__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius-sm);
  padding: 1px 9px;
  font-weight: 700;
}
.module__title { font-size: 21px; margin: 0; color: var(--text-strong); letter-spacing: -0.01em; }
.module__count { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin-left: auto; }
.module__desc { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 2px; background: transparent;
  transition: background .16s;
}
.card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px var(--shadow);
  text-decoration: none;
}
.card:hover::before { background: var(--accent); }
.card.is-done::before { background: var(--green); }

.card__top { display: flex; align-items: center; gap: 10px; }
.card__id {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  padding: 0 7px;
}
.card__check {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--green);
  border: 1px solid #2f6b4a;
  background: rgba(110,231,168,.08);
  border-radius: 99px;
  padding: 1px 8px;
}
.card__title { font-size: 17px; font-weight: 600; color: var(--text-strong); line-height: 1.4; }
.card__desc { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.card__meta { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: auto; padding-top: 6px; }

/* ---------- Dars matni (tipografika) ---------- */

.lesson { padding: 36px 0 20px; font-size: var(--text-size); line-height: 1.8; }
:root[data-font="serif"] .lesson p,
:root[data-font="serif"] .lesson li,
:root[data-font="serif"] .lesson .lead,
:root[data-font="serif"] .lesson td { font-family: var(--font-serif); }
:root[data-font="serif"] .lesson p { line-height: 1.75; }
.lesson h1 {
  font-size: clamp(26px, 4.6vw, 36px);
  line-height: 1.22;
  margin: 10px 0 16px;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.lesson .lead {
  font-size: 18.5px;
  color: var(--muted);
  line-height: 1.7;
  border-left: 2px solid var(--accent-dim);
  padding-left: 16px;
  margin: 0 0 8px;
}
.lesson h2 {
  font-size: 27px;
  line-height: 1.3;
  margin: 56px 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-strong);
  letter-spacing: -0.015em;
  scroll-margin-top: 80px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.lesson h2 .h2num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  padding: 2px 9px;
  line-height: 1.6;
  flex: 0 0 auto;
}
.lesson h3 {
  font-size: 18px;
  margin: 32px 0 10px;
  color: var(--cyan);
  letter-spacing: -0.005em;
  scroll-margin-top: 70px;
}
.lesson h4 { font-size: 16px; margin: 22px 0 8px; color: var(--text-strong); }
.lesson p { margin: 0 0 20px; }
.lesson ul, .lesson ol { margin: 0 0 18px; padding-left: 22px; }
.lesson li { margin-bottom: 9px; }
.lesson li::marker { color: var(--accent-dim); }
.lesson strong { color: var(--text-strong); font-weight: 600; }
.lesson em { color: var(--cyan); font-style: normal; }

.term {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--cyan);
  white-space: nowrap;
}

/* Kod */
code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}
pre {
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.62;
}
pre code {
  background: none; border: 0; padding: 0;
  font-size: inherit; color: var(--code-text); white-space: pre;
}
.code-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 6px;
}

/* Eslatma bloklari */
.note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: rgba(88,166,255,.05);
  font-size: 15.5px;
  line-height: 1.65;
}
.note p:last-child { margin-bottom: 0; }
.note__title {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.note--warn { border-left-color: var(--amber); background: rgba(242,198,97,.05); }
.note--warn .note__title { color: var(--amber); }
.note--danger { border-left-color: var(--red); background: rgba(255,123,114,.05); }
.note--danger .note__title { color: var(--red); }
.note--ok { border-left-color: var(--green); background: rgba(110,231,168,.05); }
.note--ok .note__title { color: var(--green); }

/* Xatolar ro'yxati */
.mistakes { list-style: none; padding: 0; margin: 0 0 22px; }
.mistakes > li {
  position: relative;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.65;
}
.mistakes > li::before {
  content: "✕";
  position: absolute;
  left: 14px; top: 12px;
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
}
.mistakes b { display: block; color: var(--text-strong); margin-bottom: 2px; }
.mistakes .fix { color: var(--green); }
.mistakes .fix::before { content: "→ "; }

/* Jadval */
.table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 460px; }
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  background: var(--panel);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(88,166,255,.03); }
td.num { font-family: var(--font-mono); color: var(--cyan); white-space: nowrap; }

/* Sxema (SVG konteyner) */
.figure {
  margin: 0 0 24px;
  padding: 18px 14px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.figure svg { display: block; margin: 0 auto; width: 100%; height: auto; }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}
.svg-label { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.svg-label--strong { fill: var(--text-strong); font-size: 12px; }
.svg-label--accent { fill: var(--accent); }
.svg-box { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.svg-box--accent { fill: rgba(88,166,255,.10); stroke: var(--accent-dim); }
.svg-arrow { stroke: var(--accent-dim); stroke-width: 1.4; fill: none; }

/* Mundarija (dars ichida) */
.toc {
  margin: 26px 0 34px;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(19,27,36,.5);
}
.toc__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 4px; font-size: 15px; }
.toc a { color: var(--text); }
.toc a:hover { color: var(--accent); }

/* Xulosa bloki */
.summary {
  margin: 44px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(88,166,255,.07), rgba(88,166,255,.02));
}
.summary h2 { border: 0; margin: 0 0 12px; padding: 0; font-size: 19px; }
.summary ul { margin-bottom: 0; }

/* Dars oxiridagi navigatsiya */
.lesson-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 36px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.lesson-nav__link {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.lesson-nav__link:hover { border-color: var(--accent-dim); background: var(--panel-2); text-decoration: none; }
.lesson-nav__link--next { border-color: var(--accent-dim); background: var(--accent-soft); }
.lesson-nav__dir { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.lesson-nav__name { color: var(--text-strong); font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.lesson-nav__link--next .lesson-nav__dir { color: var(--accent); }

.done-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 30px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-size: 14.5px;
  color: var(--muted);
}

/* Footer */
.site-footer {
  margin-top: 60px;
  padding: 26px 0 50px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 13.5px;
  font-family: var(--font-mono);
}
.site-footer .wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Index sahifasi uchun statistika */
.stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.stat {
  flex: 1 1 150px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.stat__num { font-family: var(--font-mono); font-size: 24px; color: var(--accent); line-height: 1.2; }
.stat__label { font-size: 13px; color: var(--muted); }

.empty-state {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 15px;
}
.empty-state code { white-space: nowrap; }


/* ==========================================================================
   O'qish tajribasi: bo'limma-bo'lim rejim, yon mundarija, sozlamalar
   ========================================================================== */

/* Yuqoridagi ingichka o'qish progressi */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width .12s linear;
  pointer-events: none;
}

/* Bo'limma-bo'lim rejimida ichki mundarija ko'rinmaydi — yon panel bor */
:root[data-mode="bolim"] .lesson .toc { display: none; }

/* Bo'lim boshidagi kichik ko'rsatkich */
.chapter-kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 40px 0 -38px;
}
.chapter-kicker b { color: var(--accent); font-weight: 600; }
:root[data-mode="tolik"] .chapter-kicker { display: none; }
/* Bo'limma-bo'lim rejimida bitta bo'lim ko'rinadi — sarlavha ustidagi ajratuvchi chiziq kerak emas */
:root[data-mode="bolim"] .chapter-kicker { margin: 8px 0 0; }
:root[data-mode="bolim"] .chapter:first-child .chapter-kicker { margin-top: 30px; }
:root[data-mode="bolim"] .chapter > h2,
:root[data-mode="bolim"] .chapter > .summary { margin-top: 10px; }
:root[data-mode="bolim"] .chapter > h2 { border-top: 0; padding-top: 0; }

/* Bo'lim oxiridagi navigatsiya */
.chapter-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 40px 0 8px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
:root[data-mode="tolik"] .chapter-nav { display: none; }
.chapter-nav__btn {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, background .15s;
}
.chapter-nav__btn:hover { border-color: var(--accent-dim); background: var(--panel-2); }
.chapter-nav__btn--next { border-color: var(--accent-dim); background: var(--accent-soft); }
.chapter-nav__dir { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.chapter-nav__btn--next .chapter-nav__dir { color: var(--accent); }
.chapter-nav__name { color: var(--text-strong); font-weight: 600; font-size: 15px; line-height: 1.4; }

/* Yon mundarija (keng ekranda chapda) */
.side-toc {
  position: fixed;
  top: 84px;
  left: calc(50% - var(--measure) / 2 - 254px);
  width: 224px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 14px 14px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  z-index: 40;
  font-size: 14px;
  line-height: 1.45;
}
.side-toc__title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px 6px;
}
.side-toc ol { list-style: none; margin: 0; padding: 0; }
.side-toc li { margin: 0; }
.side-toc button {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}
.side-toc button:hover { background: var(--panel-2); color: var(--text-strong); }
.side-toc__num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  margin-top: 1px;
}
.side-toc li.is-seen .side-toc__num { border-color: var(--green); color: var(--green); }
.side-toc li.is-active button { background: var(--accent-soft); color: var(--text-strong); }
.side-toc li.is-active .side-toc__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.side-toc__foot {
  margin: 10px 6px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}

/* Mobil / tor ekranda: pastki panel + ochiladigan ro'yxat */
.reader-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.reader-bar__mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.reader-bar__mid small { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.reader-bar__mid span { font-size: 13.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-reader-bar { padding-bottom: 76px; }
body.has-reader-bar .site-footer { padding-bottom: 30px; }

.side-toc.is-sheet {
  left: 12px; right: 12px; width: auto;
  top: auto; bottom: 74px;
  max-height: 60vh;
  box-shadow: 0 -8px 30px var(--shadow);
}

/* Sozlamalar tugmasi va paneli */
.btn--prefs { font-family: var(--font-sans); font-weight: 700; letter-spacing: .02em; }
.prefs {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 70;
  width: min(340px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px var(--shadow);
  font-size: 14px;
}
.prefs__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prefs__row:last-child { margin-bottom: 0; }
.prefs__label { flex: 0 0 82px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.seg { display: inline-flex; flex: 1 1 auto; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  flex: 1 1 0;
  padding: 6px 8px;
  border: 0;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--text-strong); }
.seg button.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.prefs__hint { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* ---------- PWA: o'rnatish tugmasi, toast, iOS ko'rsatmasi ---------- */

.install-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(88,166,255,.08), rgba(88,166,255,.02));
}
.install-card__icon { border-radius: 12px; border: 1px solid var(--line); flex: 0 0 auto; }
.install-card__text { flex: 1 1 260px; min-width: 0; }
.install-card__text b { display: block; color: var(--text-strong); font-size: 16px; margin-bottom: 3px; }
.install-card__text p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.install-card .btn { flex: 0 0 auto; }

.btn--install {
  border-color: var(--accent-dim);
  background: var(--accent-soft);
  color: var(--accent);
}
.btn--install:hover { background: rgba(88,166,255,.18); color: var(--text-strong); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: 14.5px;
  line-height: 1.5;
  animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

.toast__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.toast__close:hover { color: var(--text-strong); }

.ios-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(440px, calc(100vw - 32px));
  padding: 16px 18px;
  background: var(--panel-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: 14.5px;
  line-height: 1.6;
  animation: toast-in .25s ease-out;
}
.ios-hint b { color: var(--text-strong); }
.ios-hint ol { margin: 8px 0 0; padding-left: 20px; }
.ios-hint li { margin-bottom: 6px; }
.ios-hint .toast__close { position: absolute; top: 8px; right: 10px; margin: 0; }

/* Ilova rejimida (standalone) ochilganda — telefon "notch" hududini hisobga olish */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Mobil ---------- */

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .lesson h2 { font-size: 23px; }
  .wrap { padding: 0 16px; }
  .hero { padding: 40px 0 28px; margin-bottom: 30px; }
  .lesson h2 { margin-top: 42px; font-size: 21px; }
  .cards { grid-template-columns: 1fr; }
  .topbar__title { display: none; }
  .topbar__inner { padding: 8px 16px; gap: 10px; }
  .topbar__nav { gap: 6px; }
  .btn { padding: 6px 10px; font-size: 13px; }
  .btn--install .btn__text { display: none; }
  .btn--install::after { content: "O'rnatish"; }
  .toast, .ios-hint { left: 16px; right: 16px; bottom: 16px; transform: none; max-width: none; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
  pre { font-size: 12.5px; padding: 13px 14px; }
  .lesson-nav { flex-direction: column; }
}

@media print {
  body { background: #fff; color: #111; }
  .topbar, .lesson-nav, .done-bar, .site-footer { display: none; }
}