:root {
  --bg: #1e1e2e;
  --panel: #272739;
  --panel2: #2f2f45;
  --green: #16c47f;
  --dark-green: #0a6e47;
  --red: #ff6b6b;
  --text: #eaeaea;
  --muted: #9a9ab0;
  --accent: #ffd166;
  --code-bg: #15151f;       /* блоки кода всегда тёмные — в обеих темах */
  --code-text: #eaeaea;     /* текст на код-фоне всегда светлый (обе темы) */
  --line: #3a3a52;
  --heading: #ffd166;        /* цвет подзаголовков h3 */
  --topbar-bg: rgba(30,30,46,.92);
}
/* Светлая тема: переопределяем только фон/текст. Код оставляем тёмным,
   чтобы подсветка синтаксиса оставалась читаемой. */
:root[data-theme="light"] {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel2: #eef0f6;
  --green: #0e9d63;
  --dark-green: #0a6e47;
  --red: #e23b3b;
  --text: #1e1e2e;
  --muted: #5c6070;
  --line: #d7dae6;
  --heading: #b8860b;
  --topbar-bg: rgba(255,255,255,.9);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  transition: background .2s, color .2s;
}

/* ---- Верхняя навигация ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar .back {
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}
.topbar .back:hover { color: var(--text); }
.topbar .back::after { content: "›"; margin: 0 4px 0 8px; color: var(--line); }
.topbar .home {
  color: var(--green);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  margin-right: 6px;
}
.dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dot {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--panel2);
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid var(--line);
  transition: transform .1s;
}
.dot:hover { transform: scale(1.12); color: var(--text); }
.dot.active { background: var(--green); color: #06281a; border-color: var(--green); }

/* ---- Контент ---- */
.wrap { max-width: 820px; margin: 0 auto; padding: 28px 20px 60px; }

.hero {
  text-align: center;
  padding: 40px 20px 20px;
}
.hero h1 { font-size: 2.6rem; margin: 0 0 8px; letter-spacing: -1px; }
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0; }

.lesson-head {
  border-left: 5px solid var(--green);
  padding-left: 16px;
  margin-bottom: 8px;
}
.lesson-head .eyebrow { color: var(--green); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: .85rem; }
.lesson-head h1 { margin: 4px 0 0; font-size: 2rem; }

.goal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 22px 0;
}
.goal .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }

h2 { color: var(--green); margin-top: 34px; font-size: 1.4rem; }
h3 { color: var(--heading); margin-top: 24px; font-size: 1.1rem; }

pre {
  position: relative;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.55;
}
/* кнопка «Копировать» на блоке кода — всегда на тёмном фоне,
   поэтому цвета фиксированные (не зависят от темы) */
.copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: #2b2b40;
  color: #eaeaea;
  border: 1px solid #44445e;
  border-radius: 7px;
  font: 600 .72rem -apple-system, "Segoe UI", system-ui, sans-serif;
  padding: 4px 10px;
  cursor: pointer;
  opacity: .65;
  transition: opacity .12s, background .12s;
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: #3a3a52; }
.copy-btn.copied { background: var(--green); color: #06281a; border-color: var(--green); opacity: 1; }
code { font-family: "SF Mono", Menlo, Consolas, monospace; }
p code, li code, td code, .box code, .goal code {
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .88em;
  color: var(--accent);
}
.kw  { color: #c792ea; }
.str { color: #c3e88d; }
.num { color: #f78c6c; }

/* схемы (SVG) — тёмная «карточка», читаются в обеих темах */
.diagram { display: block; width: 100%; max-width: 540px; height: auto;
           margin: 18px auto; border-radius: 12px; border: 1px solid var(--line); }
.com { color: #5c6370; font-style: italic; }
.fn  { color: #82aaff; }

.box {
  border-left: 4px solid var(--green);
  background: var(--panel2);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 18px 0;
}
.box.warn { border-left-color: var(--red); }
.box.idea { border-left-color: var(--accent); }
.box.try  { border-left-color: #82aaff; }
.box .label { display: block; font-weight: 800; margin-bottom: 4px; }

.grid-demo {
  font-family: "SF Mono", Menlo, monospace;
  font-size: .82rem;
  color: var(--code-text);
  line-height: 1.5;
  background: var(--code-bg);
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
  white-space: pre;          /* сохраняем переносы строк в ASCII-схемах */
  tab-size: 2;
}
.pipe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.pill { background: var(--code-bg); color: var(--code-text); border: 1px solid var(--line); padding: 8px 12px; border-radius: 10px; }
.arrow { color: var(--green); font-weight: 800; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: .85rem; text-transform: uppercase; }

/* ---- Карточки уроков на главной ---- */
/* min(220px, 100%) — чтобы на узких экранах колонка сжималась, а не распирала */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-top: 24px; }
.card {
  min-width: 0;            /* разрешаем карточке сжиматься уже ширины картинки */
  overflow: hidden;        /* аккуратно обрезаем превью по скруглённым углам */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform .12s, border-color .12s;
  display: block;
}
.card:hover { transform: translateY(-3px); border-color: var(--green); }
.card .n {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: #06281a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; margin-bottom: 10px;
}
.card h3 { margin: 0 0 4px; color: var(--text); }
.card p { margin: 0; color: var(--muted); font-size: .9rem; }
.card .emoji { font-size: 2rem; line-height: 1; margin-bottom: 10px; display: block; }
/* скриншот игры в карточке — во всю ширину, скруглён сверху */
.card .preview {
  display: block;
  width: calc(100% + 36px);
  margin: -18px -18px 14px;
  height: 150px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 13px 13px 0 0;
  background: var(--code-bg);
}
/* большой скриншот в шапке курса */
.hero-shot {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 20px auto 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.card .meta { display: inline-block; margin-top: 10px; font-size: .78rem; color: var(--green);
              background: rgba(22,196,127,.14); padding: 2px 10px; border-radius: 20px; }

/* карточка игры, которой ещё нет */
.card.soon { opacity: .55; pointer-events: none; border-style: dashed; }
.card.soon .meta { color: var(--muted); background: var(--panel2); }
.card.soon:hover { transform: none; border-color: var(--line); }

/* ---- Нижняя навигация ---- */
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 50px; }
.pager a {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, background .12s;
}
.pager a:hover { border-color: var(--green); background: var(--panel2); }
.pager a.next { text-align: right; }
.pager a.disabled { opacity: .35; pointer-events: none; }
.pager .dir { display: block; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pager .ttl { font-weight: 700; }

footer { text-align: center; color: var(--muted); padding: 30px; font-size: .9rem; line-height: 1.8; }
footer a { color: var(--green); text-decoration: none; }
footer a:hover { text-decoration: underline; }

.run {
  display: inline-block;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: .85rem;
  color: var(--accent);
}

/* ---- Кнопка скачивания кода ---- */
.dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #06281a;
  text-decoration: none;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  margin: 6px 0;
  transition: transform .1s, filter .1s;
}
.dl:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dl.ghost { background: transparent; color: var(--green); border: 1px solid var(--green); }
.dl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.dl-list a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text); text-decoration: none; margin-bottom: 8px;
  transition: border-color .12s;
}
.dl-list a:hover { border-color: var(--green); }
.dl-list .fname { font-family: "SF Mono", Menlo, monospace; font-size: .88rem; }
.dl-list .ficon { color: var(--green); font-weight: 800; }

/* ---- Переключатель темы (тумблер в шапке) ---- */
.theme-switch {
  margin-left: auto;          /* прижимает тумблер к правому краю шапки */
  flex: none;
  position: relative;
  width: 58px; height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  cursor: pointer;
  transition: background .2s;
}
.theme-switch .icons {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 7px;
  font-size: .8rem; line-height: 1;
  pointer-events: none;
  opacity: .8;
}
.theme-switch .thumb {
  position: absolute; top: 50%; left: 3px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: left .18s ease;
  z-index: 1;
}
/* светлая тема — ползунок вправо (на солнышко) */
:root[data-theme="light"] .theme-switch .thumb { left: 33px; }
.theme-switch:hover { border-color: var(--green); }

/* запасной вариант, если на странице нет шапки */
.theme-switch.floating {
  position: fixed; bottom: 18px; right: 18px; margin: 0; z-index: 30;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}