/* Курс 2.0 — страница урока «всё в одном» (protected/pages/pro-NN.html). Тёмная тема по умолчанию, светлая —
   html[data-theme="light"] (переключатель сайта). Все цвета — через переменные ниже. */
:root {
  --c2-bg: #070b14; --c2-bg2: #0c1220; --c2-card: rgba(255,255,255,.035); --c2-card2: rgba(255,255,255,.06);
  --c2-line: rgba(255,255,255,.09); --c2-line2: rgba(255,255,255,.16);
  --c2-ink: #f1f5f9; --c2-ink2: #cbd5e1; --c2-mu: #8b98ab;
  --c2-cy: #22d3ee; --c2-cy2: #67e8f9; --c2-cyb: rgba(34,211,238,.1);
  --c2-am: #ff9f1c; --c2-am2: #ffc56b; --c2-amb: rgba(255,159,28,.1);
  --c2-gr: #10b981; --c2-gr2: #6ee7b7; --c2-grb: rgba(16,185,129,.1);
  --c2-rd: #ef4444; --c2-rd2: #fca5a5; --c2-rdb: rgba(239,68,68,.1);
  --c2-vi: #a78bfa; --c2-vib: rgba(167,139,250,.1);
  --c2-shadow: 0 18px 50px rgba(0,0,0,.35);
  --c2-r: 18px;
}
html[data-theme="light"] {
  --c2-bg: #f4f7fa; --c2-bg2: #ffffff; --c2-card: #ffffff; --c2-card2: #f1f5f9;
  --c2-line: #e2e8f0; --c2-line2: #cbd5e1;
  --c2-ink: #0f172a; --c2-ink2: #334155; --c2-mu: #64748b;
  --c2-cy: #0891b2; --c2-cy2: #0e7490; --c2-cyb: rgba(8,145,178,.08);
  --c2-am: #c2410c; --c2-am2: #b45309; --c2-amb: rgba(234,88,12,.08);
  --c2-gr: #059669; --c2-gr2: #047857; --c2-grb: rgba(5,150,105,.08);
  --c2-rd: #dc2626; --c2-rd2: #b91c1c; --c2-rdb: rgba(220,38,38,.07);
  --c2-vi: #7c3aed; --c2-vib: rgba(124,58,237,.07);
  --c2-shadow: 0 14px 40px rgba(15,23,42,.08);
}
html { scroll-behavior: smooth; overflow-x: hidden; }
html.c2-lock, html.c2-lock body { overflow: hidden; }
body.c2 { margin: 0; background: var(--c2-bg); color: var(--c2-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.c2 * { box-sizing: border-box; }
.c2 a { color: var(--c2-cy); }
.c2-wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.c2-col { max-width: 760px; margin: 0 auto; }

/* ── шапка урока ── */
.c2-hero { position: relative; padding: 112px 0 40px; overflow: hidden; }
.c2-hero-bg { position: absolute; inset: 0; z-index: 0; }
.c2-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.9); }
.c2-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,20,.55) 0%, var(--c2-bg) 96%); }
html[data-theme="light"] .c2-hero-bg img { opacity: .18; }
html[data-theme="light"] .c2-hero-bg::after { background: linear-gradient(180deg, rgba(244,247,250,.5) 0%, var(--c2-bg) 96%); }
.c2-hero .c2-wrap { position: relative; z-index: 1; }
.c2-kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-cy2); }
.c2-kicker span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--c2-line2); background: var(--c2-card); }
.c2-kicker a { padding: 5px 11px; border-radius: 999px; text-decoration: none; border: 1px solid var(--c2-line2); }
.c2-kicker span.is-acc, .c2-kicker a.is-acc { color: var(--c2-am2); border-color: rgba(255,159,28,.4); background: var(--c2-amb); }
.c2-h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.08; font-weight: 900; letter-spacing: -.025em; margin: 18px 0 16px; text-wrap: balance; }
.c2-h1 em { font-style: normal; background: linear-gradient(90deg, var(--c2-cy), var(--c2-gr)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c2-lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--c2-ink2); max-width: 720px; margin: 0; }
.c2-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--c2-mu); font-size: 15px; }
.c2-facts b { color: var(--c2-ink); font-weight: 800; font-size: 20px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.c2-learn { margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.c2-learn div { padding: 14px 16px; border-radius: 14px; background: var(--c2-card); border: 1px solid var(--c2-line); font-size: 15px; line-height: 1.5; display: flex; gap: 10px; color: var(--c2-ink2); }
.c2-learn div::before { content: '✓'; color: var(--c2-gr); font-weight: 900; }
.c2-credit { position: absolute; right: 12px; bottom: 8px; z-index: 1; font-size: 11px; color: var(--c2-mu); opacity: .8; }
.c2-credit a, .c2-photo figcaption small a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

/* ── оглавление и прогресс ── */
.c2-toc { position: sticky; top: 64px; z-index: 30; background: color-mix(in srgb, var(--c2-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c2-line); }
.c2-toc .c2-wrap { display: flex; align-items: center; gap: 14px; height: 52px; }
.c2-toc nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.c2-toc nav::-webkit-scrollbar { display: none; }
.c2-toc a { flex: 0 0 auto; text-decoration: none; color: var(--c2-mu); font-size: 13.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.c2-toc a i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--c2-card2); color: var(--c2-ink2); }
.c2-toc a.is-read i { background: var(--c2-gr); color: #fff; }
.c2-toc a.is-here { background: var(--c2-cyb); color: var(--c2-ink); }
.c2-progress { position: relative; width: 120px; height: 6px; border-radius: 3px; background: var(--c2-card2); flex: 0 0 auto; --p: 0%; }
.c2-progress::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 3px; background: linear-gradient(90deg, var(--c2-cy), var(--c2-gr)); transition: width .4s; }
.c2-progress-n { font-size: 13px; font-weight: 800; color: var(--c2-ink2); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
@media (max-width: 640px) { .c2-progress { width: 56px; } .c2-toc a span { display: none; } }

/* ── шаг ── */
.c2-step { padding: 72px 0 24px; scroll-margin-top: 120px; }
.c2-step + .c2-step { border-top: 1px solid var(--c2-line); }
.c2-step-h { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.c2-step-n { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px;
  color: #fff; background: linear-gradient(135deg, var(--c2-cy), #0284c7); box-shadow: 0 8px 24px rgba(34,211,238,.25); font-variant-numeric: tabular-nums; }
.c2-step-h small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-mu); }
.c2-h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15; font-weight: 850; letter-spacing: -.02em; margin: 4px 0 0; text-wrap: balance; }
.c2-h3 { font-size: 21px; line-height: 1.3; font-weight: 800; margin: 38px 0 12px; display: flex; gap: 10px; align-items: center; }
.c2-h3 .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: var(--c2-cyb); color: var(--c2-cy2); }
.c2-h3 .lbl.am { background: var(--c2-amb); color: var(--c2-am2); }
.c2-h3 .lbl.gr { background: var(--c2-grb); color: var(--c2-gr2); }
.c2-h3 .lbl.vi { background: var(--c2-vib); color: var(--c2-vi); }
.c2 p { margin: 0 0 16px; color: var(--c2-ink2); }
.c2 p b, .c2 li b { color: var(--c2-ink); }
.c2 ul.c2-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.c2 ul.c2-list li { position: relative; padding-left: 28px; color: var(--c2-ink2); }
.c2 ul.c2-list li::before { content: ''; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--c2-cy); }
.c2-step-end { height: 1px; }

/* термин по нажатию */
.c2 .t { border-bottom: 1.5px dashed color-mix(in srgb, var(--c2-cy) 70%, transparent); cursor: help; color: inherit; outline-offset: 3px; }
.c2 .t:hover, .c2 .t[aria-expanded="true"] { background: var(--c2-cyb); border-bottom-style: solid; }
.c2-pop { position: absolute; z-index: 1000; padding: 14px 16px; border-radius: 14px; background: var(--c2-bg2); border: 1px solid var(--c2-line2); box-shadow: var(--c2-shadow); font-size: 15px; line-height: 1.55; color: var(--c2-ink2); }
.c2-pop b { display: block; color: var(--c2-ink); font-size: 16px; }
.c2-pop i { display: block; font-style: normal; color: var(--c2-cy2); font-size: 13px; margin-top: 2px; }
.c2-pop p { margin: 8px 0 0; }

/* карточки-сетки */
.c2-cards { display: grid; gap: 14px; margin: 8px 0 22px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.c2-card { padding: 18px 18px 16px; border-radius: var(--c2-r); background: var(--c2-card); border: 1px solid var(--c2-line); min-width: 0; }
.c2-card .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--c2-cyb); color: var(--c2-cy); margin-bottom: 12px; }
.c2-card .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c2-card.am .ic { background: var(--c2-amb); color: var(--c2-am); } .c2-card.gr .ic { background: var(--c2-grb); color: var(--c2-gr); } .c2-card.vi .ic { background: var(--c2-vib); color: var(--c2-vi); } .c2-card.rd .ic { background: var(--c2-rdb); color: var(--c2-rd); }
.c2-card h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--c2-ink); }
.c2-card p { margin: 0; font-size: 15px; line-height: 1.55; }
.c2-card .num { font-size: 34px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--c2-ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.c2-card .src { display: block; margin-top: 8px; font-size: 12px; color: var(--c2-mu); }

/* таблицы */
.c2-table { margin: 8px 0 24px; border-radius: var(--c2-r); border: 1px solid var(--c2-line); overflow-x: auto; background: var(--c2-card); }
.c2-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
.c2-table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-mu); font-weight: 800; padding: 13px 16px; background: var(--c2-card2); }
.c2-table td { padding: 13px 16px; border-top: 1px solid var(--c2-line); color: var(--c2-ink2); vertical-align: top; }
.c2-table td:first-child { color: var(--c2-ink); font-weight: 700; }
.c2-table .yes { color: var(--c2-gr); font-weight: 800; } .c2-table .no { color: var(--c2-rd); font-weight: 800; }
.c2-table .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.c2-table tr.hl td { background: var(--c2-cyb); }
.c2-table caption { caption-side: bottom; text-align: left; padding: 10px 16px; font-size: 12.5px; color: var(--c2-mu); border-top: 1px solid var(--c2-line); }
@media (max-width: 600px) {
  .c2-table { overflow: visible; }
  .c2-table table { min-width: 0; font-size: 15px; }
  .c2-table thead { display: none; }
  .c2-table tbody, .c2-table tr, .c2-table td { display: block; }
  .c2-table tr { padding: 12px 16px 14px; border-top: 1px solid var(--c2-line); }
  .c2-table tbody tr:first-child { border-top: 0; }
  .c2-table td { padding: 0; border: 0; }
  .c2-table td:first-child { font-size: 16px; }
  .c2-table td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c2-mu); }
  .c2-table tr.hl { background: var(--c2-cyb); }
  .c2-table tr.hl td { background: none; }
  .c2-table caption { display: block; }
}

/* цепочка */
.c2-flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 10px 0 26px; align-items: stretch; }
.c2-flow .node { position: relative; padding: 16px 12px; border-radius: 16px; border: 1px solid var(--c2-line); background: var(--c2-card); text-align: center; margin-right: 26px; }
.c2-flow .node:last-child { margin-right: 0; }
.c2-flow .node:not(:last-child)::after { content: ''; position: absolute; right: -22px; top: 50%; width: 18px; height: 2px; background: var(--c2-line2); }
.c2-flow .node:not(:last-child)::before { content: ''; position: absolute; right: -22px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 6px solid var(--c2-line2); transform: translateX(6px); }
.c2-flow .node b { display: block; font-size: 15px; color: var(--c2-ink); }
.c2-flow .node span { display: block; font-size: 12.5px; color: var(--c2-mu); line-height: 1.4; margin-top: 4px; }
.c2-flow .node .ic { font-size: 26px; line-height: 1; margin-bottom: 8px; display: block; }
.c2-flow .node.me { border-color: var(--c2-am); background: var(--c2-amb); }
.c2-flow .node.me b { color: var(--c2-am2); }
@media (max-width: 720px) {
  .c2-flow { grid-auto-flow: row; gap: 22px; }
  .c2-flow .node { margin-right: 0; text-align: left; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
  .c2-flow .node .ic { grid-row: span 2; margin: 0; }
  .c2-flow .node:not(:last-child)::after { right: auto; left: 31px; top: auto; bottom: -20px; width: 2px; height: 18px; }
  .c2-flow .node:not(:last-child)::before { right: auto; left: 27px; top: auto; bottom: -24px; border: 5px solid transparent; border-top: 6px solid var(--c2-line2); transform: none; }
}

/* блоки-выноски */
.c2-box { margin: 10px 0 24px; padding: 18px 20px; border-radius: var(--c2-r); border: 1px solid var(--c2-line); background: var(--c2-card); }
.c2-box > :last-child { margin-bottom: 0; }
.c2-box h5 { margin: 0 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--c2-mu); display: flex; gap: 8px; align-items: center; }
.c2-box.remember { border-color: rgba(16,185,129,.35); background: var(--c2-grb); }
.c2-box.remember h5 { color: var(--c2-gr2); }
.c2-box.example { border-color: rgba(255,159,28,.35); background: var(--c2-amb); }
.c2-box.example h5 { color: var(--c2-am2); }
.c2-box.warn { border-color: rgba(239,68,68,.35); background: var(--c2-rdb); }
.c2-box.warn h5 { color: var(--c2-rd2); }
.c2-box.note h5 { color: var(--c2-cy2); }
.c2-box ul.c2-list { margin-bottom: 0; }

/* фото */
.c2-photo { margin: 10px 0 26px; }
.c2-photo img { display: block; width: 100%; height: auto; border-radius: var(--c2-r); border: 1px solid var(--c2-line); aspect-ratio: 16/9; object-fit: cover; background: var(--c2-card2); }
.c2-photo figcaption { margin-top: 8px; font-size: 13px; color: var(--c2-mu); line-height: 1.45; }
.c2-photo figcaption small { display: block; font-size: 11.5px; opacity: .85; }
.c2-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 26px; }
.c2-photos .c2-photo { margin: 0; }
@media (max-width: 640px) { .c2-photos { grid-template-columns: 1fr; } }

/* ── короткое видео шага ── */
.c2v { margin: 18px 0 30px; }
.c2v-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: var(--c2-mu); }
.c2v-head b { color: var(--c2-ink); font-weight: 800; font-size: 15px; }
.c2v-head .tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: var(--c2-amb); color: var(--c2-am2); }
.c2v-head .dur { margin-left: auto; font-variant-numeric: tabular-nums; }
.c2v.is-watched .c2v-head .dur::before { content: '✓ '; color: var(--c2-gr); font-weight: 900; }
.c2v-stage { position: relative; aspect-ratio: 16/9; border-radius: var(--c2-r); overflow: hidden; background: #070b14; border: 1px solid var(--c2-line); box-shadow: var(--c2-shadow); user-select: none; -webkit-user-select: none; }
.c2v-frame { position: absolute; inset: 0; cursor: pointer; }
.c2v-ui { position: absolute; inset: 0; pointer-events: none; }
.c2v-ui > * { pointer-events: auto; }
.c2v-big { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(7,11,20,.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 10px 40px rgba(0,0,0,.4); transition: transform .18s, opacity .2s; }
.c2v-big svg { width: 40px; height: 40px; margin-left: 4px; }
.c2v-big:hover { transform: scale(1.06); }
.c2v.is-playing .c2v-big { opacity: 0; pointer-events: none; }
.c2v-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); color: #fff; opacity: 1; transition: opacity .25s; }
.c2v.is-playing .c2v-stage:not(:hover):not(:focus-within) .c2v-bar { opacity: 0; }
.c2v:not(.is-started) .c2v-bar { opacity: 0; pointer-events: none; }
.c2v-b { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font: 800 14px/1 Inter, sans-serif; }
.c2v-b:hover, .c2v-b:focus-visible { background: rgba(255,255,255,.14); }
.c2v-b svg { width: 22px; height: 22px; }
.c2v-cc[aria-pressed="true"] { color: #67e8f9; }
.c2v-time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
.c2v-track { position: relative; flex: 1; height: 28px; cursor: pointer; display: flex; align-items: center; touch-action: none; }
.c2v-rail { position: relative; width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.c2v-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #22d3ee; }
.c2v-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(34,211,238,.45); left: 0; }
.c2v-sub { position: absolute; left: 5%; right: 5%; bottom: 62px; text-align: center; pointer-events: none !important; transition: bottom .25s; }
.c2v.is-playing .c2v-stage:not(:hover) .c2v-sub { bottom: 18px; }
.c2v-sub span { display: inline; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: clamp(13px, 1.9vw, 20px); line-height: 1.6; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.c2v-sub span:empty, .c2v.no-cc .c2v-sub { display: none; }
.c2v-stage.fake-fs { position: fixed; inset: 0; z-index: 2000; border-radius: 0; aspect-ratio: auto; border: 0; }
.c2v-stage:fullscreen { border-radius: 0; border: 0; }
@media (max-width: 560px) {
  .c2v-time { display: none; }
  .c2v-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .c2v-big svg { width: 30px; height: 30px; }
  .c2v-sub { bottom: 52px; }
}
.c2v-note { margin-top: 10px; font-size: 14px; color: var(--c2-mu); }

/* ── «Что сделаешь?» ── */
.c2-decide { margin: 22px 0 30px; padding: 22px 22px 18px; border-radius: var(--c2-r); border: 1px solid rgba(167,139,250,.35); background: var(--c2-vib); }
.c2-decide h5 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--c2-vi); }
.c2-decide .q { font-size: 18px; font-weight: 700; color: var(--c2-ink); margin: 0 0 14px; line-height: 1.5; }
.c2-opts { display: grid; gap: 10px; }
.c2-opt { text-align: left; font: inherit; font-size: 16px; line-height: 1.5; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--c2-line2); background: var(--c2-bg2); color: var(--c2-ink); cursor: pointer; display: flex; gap: 12px; align-items: flex-start; transition: border-color .15s, background .15s; }
.c2-opt:hover:not(:disabled) { border-color: var(--c2-vi); }
.c2-opt i { font-style: normal; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--c2-card2); color: var(--c2-ink2); }
.c2-opt:disabled { cursor: default; }
.c2-opt.is-ok { border-color: var(--c2-gr); background: var(--c2-grb); }
.c2-opt.is-ok i { background: var(--c2-gr); color: #fff; }
.c2-opt.is-picked:not(.is-ok) { border-color: var(--c2-rd); background: var(--c2-rdb); }
.c2-opt.is-picked:not(.is-ok) i { background: var(--c2-rd); color: #fff; }
.c2-decide.is-answered .c2-opt:not(.is-ok):not(.is-picked) { opacity: .55; }
.c2-why { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--c2-bg2); border: 1px solid var(--c2-line); }
.c2-why-h { display: block; font-weight: 900; margin-bottom: 4px; }
.c2-decide.is-right .c2-why-h { color: var(--c2-gr); } .c2-decide.is-wrong .c2-why-h { color: var(--c2-rd); }
.c2-why p { margin: 0 0 8px; font-size: 15.5px; }
.c2-retry { font: inherit; font-size: 14px; font-weight: 700; color: var(--c2-vi); background: none; border: 0; padding: 0; cursor: pointer; }

/* ── калькулятор ── */
.c2-calc { margin: 14px 0 28px; padding: 22px; border-radius: var(--c2-r); border: 1px solid var(--c2-line2); background: var(--c2-card); display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.c2-calc label { display: block; font-size: 14px; font-weight: 700; color: var(--c2-ink2); margin-bottom: 18px; }
.c2-calc label span { float: right; color: var(--c2-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.c2-calc input[type=range] { width: 100%; margin-top: 10px; accent-color: var(--c2-cy); }
.c2-calc .res { display: grid; gap: 12px; align-content: start; }
.c2-calc .res div { padding: 14px 16px; border-radius: 14px; background: var(--c2-bg2); border: 1px solid var(--c2-line); }
.c2-calc .res small { display: block; font-size: 12.5px; color: var(--c2-mu); font-weight: 600; }
.c2-calc .res b { font-size: 28px; font-weight: 900; color: var(--c2-ink); font-variant-numeric: tabular-nums; }
.c2-calc .res .big b { color: var(--c2-gr); font-size: 34px; }
.c2-calc .fine { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--c2-mu); }
@media (max-width: 680px) { .c2-calc { grid-template-columns: 1fr; } }

/* ── практика и проверка ── */
.c2-section { padding: 72px 0 24px; border-top: 1px solid var(--c2-line); scroll-margin-top: 120px; }
.c2-section > .c2-col > .c2-h2 { margin-bottom: 10px; }
.c2-q { padding: 20px 0; border-top: 1px solid var(--c2-line); }
.c2-q:first-of-type { border-top: 0; }
.c2-q .qt { font-size: 17.5px; font-weight: 700; color: var(--c2-ink); margin: 0 0 12px; display: flex; gap: 12px; }
.c2-q .qt i { font-style: normal; color: var(--c2-mu); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.c2-qopts { display: grid; gap: 8px; }
.c2-qo { text-align: left; font: inherit; font-size: 15.5px; line-height: 1.5; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--c2-line2); background: var(--c2-bg2); color: var(--c2-ink); cursor: pointer; }
.c2-qo.is-picked { border-color: var(--c2-cy); background: var(--c2-cyb); }
#c2-quiz.is-checked .c2-qo { cursor: default; }
#c2-quiz.is-checked .c2-qo.is-ok { border-color: var(--c2-gr); background: var(--c2-grb); }
#c2-quiz.is-checked .c2-qo.is-picked:not(.is-ok) { border-color: var(--c2-rd); background: var(--c2-rdb); }
.c2-q .ex { display: none; margin: 10px 0 0; font-size: 15px; color: var(--c2-ink2); padding: 12px 14px; border-radius: 12px; background: var(--c2-card2); }
#c2-quiz.is-checked .c2-q .ex { display: block; }
.c2-q.is-right .qt i { color: var(--c2-gr); } .c2-q.is-wrong .qt i { color: var(--c2-rd); }
.c2-quiz-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.c2-btn { font: inherit; font-size: 16px; font-weight: 800; padding: 14px 24px; border-radius: 14px; border: 0; cursor: pointer; color: #04111a; background: linear-gradient(135deg, #22d3ee, #10b981); box-shadow: 0 10px 30px rgba(34,211,238,.25); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.c2-btn.ghost { background: var(--c2-card2); color: var(--c2-ink); box-shadow: none; border: 1px solid var(--c2-line2); }
.c2-quiz-res { font-weight: 700; padding: 12px 16px; border-radius: 12px; background: var(--c2-card2); color: var(--c2-ink2); }
.c2-quiz-res.is-pass { background: var(--c2-grb); color: var(--c2-gr2); } .c2-quiz-res.is-fail { background: var(--c2-rdb); color: var(--c2-rd2); }

/* шпаргалка */
.c2-cheat { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 14px 0 0; }
.c2-cheat div { padding: 16px 18px; border-radius: 16px; background: var(--c2-card); border: 1px solid var(--c2-line); font-size: 15px; line-height: 1.55; color: var(--c2-ink2); }
.c2-cheat div b { display: block; color: var(--c2-ink); margin-bottom: 4px; font-size: 15.5px; }

/* следующий урок */
.c2-next { margin: 60px 0 90px; padding: 26px; border-radius: 22px; border: 1px solid var(--c2-line2); background: linear-gradient(135deg, var(--c2-cyb), var(--c2-grb)); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.c2-next small { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-mu); }
.c2-next b { font-size: 21px; color: var(--c2-ink); }
.c2-next p { margin: 4px 0 0; font-size: 15px; }
.c2-sources { margin: 40px 0 0; font-size: 13px; color: var(--c2-mu); }
.c2-sources p { color: var(--c2-mu); margin: 0 0 6px; }
.c2-sources a { color: var(--c2-mu); }

@media (max-width: 640px) {
  body.c2 { font-size: 16.5px; }
  .c2-hero { padding-top: 96px; }
  .c2-step, .c2-section { padding-top: 54px; }
  .c2-step-n { width: 44px; height: 44px; font-size: 18px; border-radius: 13px; }
  .c2-decide, .c2-calc { padding: 18px 16px; }
}
/* ── оглавление курса (/course-2.html): кнопки в шапке, программа блоками ── */
.c2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.c2 .c2-hero-cta a.c2-btn:not(.ghost), .c2 .c2-next a.c2-btn:not(.ghost) { color: #04111a; }
.c2 .c2-hero-cta a.c2-btn.ghost, .c2 .c2-next a.c2-btn.ghost { color: var(--c2-ink); }
.c2-hub-hero { padding-bottom: 56px; }
.c2-tag, .c2-les em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--c2-amb); color: var(--c2-am2); vertical-align: 2px; white-space: nowrap; }
.c2-prog { display: grid; gap: 12px; margin-top: 22px; }
.c2-blk { border: 1px solid var(--c2-line); border-radius: var(--c2-r); background: var(--c2-card); overflow: hidden; }
.c2-blk[open] { border-color: var(--c2-line2); }
.c2-blk summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.c2-blk summary::-webkit-details-marker { display: none; }
.c2-blk summary:focus-visible { outline: 2px solid var(--c2-cy); outline-offset: -2px; border-radius: var(--c2-r); }
.c2-blk-n { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: var(--c2-cy2); background: var(--c2-cyb); border: 1px solid rgba(34,211,238,.25); }
.c2-blk-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.c2-blk-t small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c2-mu); }
.c2-blk-t b { font-size: 19px; line-height: 1.3; }
.c2-blk-x { flex: 0 0 auto; width: 12px; height: 12px; border-right: 2.5px solid var(--c2-mu); border-bottom: 2.5px solid var(--c2-mu); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.c2-blk[open] .c2-blk-x { transform: rotate(225deg) translate(-3px, -3px); }
.c2-les { list-style: none; margin: 0; padding: 0 8px 8px; }
.c2-les li > a, .c2-les li > div { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 10px; border-top: 1px solid var(--c2-line); color: inherit; text-decoration: none; border-radius: 10px; }
.c2-les li > a:hover { background: var(--c2-card2); }
.c2-les .n { font-weight: 800; font-size: 14px; color: var(--c2-mu); font-variant-numeric: tabular-nums; }
.c2-les .lt { min-width: 0; display: grid; gap: 2px; }
.c2-les .lt b { font-size: 16.5px; line-height: 1.35; font-weight: 700; }
.c2-les .lt small { font-size: 14.5px; line-height: 1.45; color: var(--c2-mu); }
.c2-les .st { font-size: 13px; font-weight: 700; color: var(--c2-mu); white-space: nowrap; }
.c2-les .st.on { color: var(--c2-gr); }
.c2-les li.is-out .n { color: var(--c2-gr); }
@media (max-width: 560px) {
  .c2-les li > a, .c2-les li > div { grid-template-columns: 30px 1fr; }
  .c2-les .st { grid-column: 2; }
  .c2-blk summary { padding: 14px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }