/* ================================================================
   ПРОСТО УРОК · слой статей (раздел /articles/)
   Работает поверх style.css и premium.css, использует их токены.
   ================================================================ */

/* ── Хлебные крошки ── */
.crumbs {
  max-width: 900px; margin: 22px auto 0; padding: 0 20px;
  font-size: 13px; font-weight: 600; color: var(--label);
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.crumbs a { color: var(--text2); text-decoration: none; transition: color .2s ease; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--label); user-select: none; }
.crumbs [aria-current="page"] { color: var(--accent); }

/* ── Шапка статьи ── */
.art-main { max-width: 900px; margin: 0 auto; padding: 0 20px 40px; }
.art-hero { padding: 26px 0 8px; }
.art-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-xl);
  background: var(--accent-light); color: var(--accent);
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px;
}
.art-hero h1 {
  font-family: var(--font-display); font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 900; color: var(--ink); line-height: 1.18; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--label); margin-bottom: 18px;
}
.art-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--label); }
.art-lead {
  font-size: 17.5px; line-height: 1.7; color: var(--text);
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin-bottom: 26px;
}

/* ── Содержание ── */
.art-toc {
  background: var(--surface); border: 1.5px solid var(--hairline);
  border-radius: var(--r-md); padding: 20px 24px; margin: 0 0 34px;
  box-shadow: var(--shadow-sm);
}
.art-toc-title {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}
.art-toc ol { list-style: none; counter-reset: toc; }
.art-toc li { counter-increment: toc; padding: 5px 0; }
.art-toc li a {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text2);
  text-decoration: none; transition: color .2s ease;
}
.art-toc li a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent);
}
.art-toc li a:hover { color: var(--accent); }

/* ── Типографика статьи ── */
.art-body { font-size: 16.5px; line-height: 1.78; color: var(--text); }
.art-body h2 {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  color: var(--ink); line-height: 1.25; letter-spacing: -0.015em;
  margin: 40px 0 14px; padding-top: 10px;
}
.art-body h2::before {
  content: ''; display: block; width: 44px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #FF8A5C, #E8543F); margin-bottom: 12px;
}
.art-body h3 {
  font-family: var(--font-display); font-size: 18.5px; font-weight: 800;
  color: var(--ink); margin: 28px 0 10px;
}
.art-body p { margin-bottom: 14px; }
.art-body a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232,84,63,.35); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.art-body a:hover { text-decoration-color: var(--accent); }
.art-body ul, .art-body ol { margin: 0 0 16px 22px; }
.art-body li { margin-bottom: 7px; }
.art-body li::marker { color: var(--accent); font-weight: 700; }
.art-body strong { color: var(--ink); font-weight: 700; }
.art-body .formula {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--bg-alt); border: 1.5px solid var(--hairline);
  border-radius: 10px; padding: 10px 16px; display: inline-block; margin: 4px 0 14px;
}
.art-body table {
  width: 100%; border-collapse: collapse; margin: 18px 0 22px;
  font-size: 14px; background: var(--surface);
  border-radius: 12px; overflow: hidden; border: 1.5px solid var(--hairline);
}
.art-body th {
  background: var(--accent-light); color: var(--accent); text-align: left;
  font-weight: 800; padding: 10px 14px; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.art-body td { border-top: 1.5px solid var(--hairline); padding: 10px 14px; vertical-align: top; }
.art-body tr:nth-child(even) td { background: var(--bg-alt); }

/* ── Врезки ── */
.art-callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--accent-light); border-radius: var(--r-sm);
  padding: 16px 18px; margin: 20px 0;
}
.art-callout.warn { background: var(--yellow-light); }
.art-callout .co-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  color: var(--accent); border: 1.5px solid var(--hairline);
}
.art-callout .co-ic .ic { width: 18px; height: 18px; }
.art-callout .co-body b {
  display: block; font-size: 13px; font-weight: 800; color: var(--ink);
  letter-spacing: .02em; text-transform: uppercase; margin-bottom: 4px;
}
.art-callout .co-body p { font-size: 14.5px; line-height: 1.65; color: var(--text2); margin: 0; }

/* ── CTA-блок ── */
.art-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FF8A5C, #E24A33);
  border-radius: var(--r-lg); padding: 30px 30px 28px; margin: 34px 0;
  color: #fff;
}
.art-cta::before {
  content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.12); top: -110px; right: -60px;
}
.art-cta h3 { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 8px; position: relative; }
.art-cta p { font-size: 14.5px; line-height: 1.65; opacity: .92; margin-bottom: 18px; position: relative; }
.art-cta .art-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.art-cta .btn-white { background: #fff; color: #E24A33; border: none; }
.art-cta .btn-ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.55); background: transparent; }
.art-cta .btn-ghost:hover { color: #fff; border-color: #fff; }

/* ── FAQ ── */
.art-faq { margin: 36px 0 8px; }
.art-faq-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink);
  margin-bottom: 16px;
}
.art-faq .faq-answer { font-size: 14.5px; line-height: 1.7; }

/* ── Навигация по соседним статьям ── */
.art-next { display: grid; gap: 12px; margin: 30px 0 10px; }
.art-next a {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm); padding: 16px 20px;
  text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.art-next a:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.art-next .an-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.art-next .an-title { font-size: 15px; font-weight: 700; color: var(--ink); }

/* ── Хаб статей ── */
.art-hub { margin: 0; }
.art-hub-head { max-width: 1000px; margin: 0 auto; padding: 42px 20px 8px; text-align: center; }
.art-hub-head h1 {
  font-family: var(--font-display); font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 900; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px;
}
.art-hub-head p { font-size: 16.5px; color: var(--text2); line-height: 1.7; max-width: 640px; margin: 0 auto; }
.art-hub-grid {
  max-width: 1280px; margin: 34px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.art-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--hairline);
  border-radius: var(--r-md); padding: 22px;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.art-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(44,40,51,.10); border-color: var(--border); }
.art-card .ac-tag {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-xl);
  background: var(--accent-light); color: var(--accent);
}
.art-card .ac-tag.t2 { background: var(--cyan-light); color: var(--cyan); }
.art-card .ac-tag.t3 { background: var(--yellow-light); color: #B97A12; }
.art-card h2 { font-family: var(--font-display); font-size: 17.5px; font-weight: 800; color: var(--ink); line-height: 1.35; letter-spacing: -0.01em; }
.art-card p { font-size: 13.5px; color: var(--text2); line-height: 1.6; flex-grow: 1; }
.art-card .ac-meta { font-size: 12px; font-weight: 600; color: var(--label); }
.art-hub-cta { max-width: 900px; margin: 40px auto 0; padding: 0 20px; }
.art-hub-seo { max-width: 900px; margin: 26px auto 0; padding: 0 20px; font-size: 14.5px; color: var(--text2); line-height: 1.75; }
.art-hub-seo a { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  .art-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .art-hub-grid { grid-template-columns: 1fr; }
  .art-hero h1 { font-size: 25px; }
  .art-body { font-size: 15.5px; }
  .art-body h2 { font-size: 21px; }
  .art-cta { padding: 24px 20px; }
  .crumbs { font-size: 12px; }
}

/* --- рисованные иллюстрации (SVG + нейрокартинки) --- */
.art-fig{margin:26px 0;background:#fffdf7;border:1px solid #e7e2da;border-radius:14px;padding:16px 12px 6px;text-align:center}
.art-fig svg{max-width:100%;height:auto}
.art-fig img{max-width:100%;height:auto;border-radius:10px;display:inline-block}
.art-fig figcaption{font-size:13px;color:#6f6a63;padding:8px 6px 8px;text-align:center;line-height:1.45}

/* --- фильтры хаба --- */
.hub-filters{max-width:1280px;margin:20px auto 8px;padding:0 20px;display:flex;flex-direction:column;gap:10px}
.hub-search{position:relative;max-width:640px}
.hub-search input{width:100%;padding:12px 16px 12px 44px;border:2px solid #e7e2da;border-radius:12px;font:inherit;font-size:15px;background:#fff;color:#1d1c1a;outline:none}
.hub-search input:focus{border-color:#E8543F}
.hub-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#6f6a63}
.hub-chips{display:flex;flex-wrap:wrap;gap:8px}
.hub-chip{cursor:pointer;border:2px solid #e7e2da;background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:13.5px;font-weight:600;color:#1d1c1a;transition:all .15s}
.hub-chip:hover{border-color:#E8543F}
.hub-chip.active{background:#E8543F;border-color:#E8543F;color:#fff}
.hub-chip.active .n{opacity:.85}
.hub-chip .n{opacity:.55;font-weight:500;margin-left:4px}
.hub-meta{display:flex;align-items:center;gap:14px;font-size:14px;color:#6f6a63}
.hub-reset{border:none;background:none;color:#E8543F;font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0}
.hub-extra{display:none!important}
.hub-after{display:flex;justify-content:center;margin:26px 0 0}
.hub-btn{border:2px solid #1d1c1a;background:#fff;color:#1d1c1a;border-radius:12px;padding:10px 24px;font:inherit;font-weight:700;cursor:pointer;transition:all .15s}
.hub-btn:hover{background:#1d1c1a;color:#fff}
.hub-none{color:#6f6a63;font-size:15px}
.hub-none button{border:none;background:none;color:#E8543F;font:inherit;font-weight:700;cursor:pointer;padding:0 4px}

/* Правовая плашка внизу статьи */
.art-disclaimer{max-width:1280px;margin:0 auto;padding:16px 24px 20px;font-size:12.5px;line-height:1.65;color:var(--label,#6b7280);border-top:1px solid var(--line,rgba(0,0,0,.08))}
.art-disclaimer a{color:inherit;text-decoration:underline}

/* Нижняя строка карточки: время чтения + призыв к чтению */
.ac-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.ac-foot .ac-meta{font-size:12px;font-weight:600;color:var(--label)}
.ac-go{font-size:13px;font-weight:800;color:var(--accent);white-space:nowrap}
.art-card:hover .ac-go{text-decoration:underline}

/* --- редизайн тулбара хаба: группы, экзамен-чипы, бейджи --- */
.hub-filters{background:var(--surface);border:1.5px solid var(--hairline);border-radius:var(--r-md);padding:18px 20px;gap:14px;margin-top:14px;box-shadow:var(--shadow-sm)}
.hub-search{max-width:100%}
.hub-search input{border-radius:14px;padding:13px 16px 13px 44px;font-size:15px}
.hub-group{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hub-group-label{flex:0 0 76px;padding-top:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.hub-group-exam{padding-bottom:12px;border-bottom:1px dashed var(--hairline);margin-bottom:2px}
.hub-hint{flex-basis:100%;font-size:12.5px;color:var(--label);padding-left:88px;margin-top:-2px}
.hub-chip{background:#fff}
.hub-chip .n{display:inline-block;min-width:20px;text-align:center;background:rgba(0,0,0,.06);border-radius:999px;padding:1px 7px;margin-left:6px;font-size:11.5px}
.hub-chip:hover{border-color:#E8543F;transform:translateY(-1px)}
.hub-chip-exam{border-color:#1d1c1a;background:#1d1c1a;color:#fff;border-radius:12px;padding:7px 14px}
.hub-chip-exam:hover{border-color:#E8543F;transform:translateY(-1px)}
.hub-chip-exam .n{background:rgba(255,255,255,.18);color:#fff}
.hub-chip-exam svg{width:15px;height:15px;stroke:currentColor;margin-right:5px;vertical-align:-2px}
.hub-chip-exam.active{background:#E8543F;border-color:#E8543F;color:#fff}
@media(max-width:720px){.hub-group{flex-direction:column;gap:6px}.hub-group-label{flex:none;padding-top:0}.hub-hint{padding-left:0}}

/* ═══ Этап 5: простые формулы — CSS-вёрстка (Вариант B, без библиотек) ═══════════ */
.formula{display:block;text-align:center;font-family:inherit;font-size:15.5px;font-weight:600;color:var(--ink);background:var(--bg-alt);border:1px solid var(--hairline);border-radius:10px;padding:12px 18px;margin:12px 0;line-height:2}
.fx-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .16em;line-height:1.15;transform:translateY(-.08em)}
.fx-frac .fx-num{padding:0 .26em .05em}
.fx-frac .fx-den{border-top:1.3px solid currentColor;padding:.05em .26em 0}
.fx-sqrt{display:inline-block;white-space:nowrap}
.fx-sqrt .fx-rad{border-top:1.3px solid currentColor;padding:.06em .14em 0;margin-left:.04em}
@media (max-width:600px){.formula{font-size:15px;padding:11px 12px;line-height:1.9}}

/* ═══ ROUND 13: контраст и «взрослый» вид CTA-блока в статьях ═══════════ */
.art-cta{background:linear-gradient(160deg,#26232C,#1C1A22);border:1px solid #2E2B35}
.art-cta::before{background:rgba(255,255,255,.06)}
.art-cta h3{font-weight:700;letter-spacing:-.012em}
.art-cta p{color:rgba(255,255,255,.78)}
.art-cta p a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.art-cta p a:hover{color:#FFB4A4}
.art-cta .btn-white{background:#fff;color:#C9371F;font-weight:650}
.art-cta .btn-white:hover{background:#F6F4F0}

/* ═══ ROUND 13 (часть 2): единый вид чипов, врезок и заголовков ═══════════ */
.ac-tag,.ac-tag.t2,.ac-tag.t3,.tc-tag{background:var(--chip-bg,#F2F0EC);color:var(--chip-text,#5D5768);font-weight:700;letter-spacing:.06em}
.ac-tag.exam,.ac-tag.t1,.tc-tag.exam{background:#26232C;color:#fff}
.art-callout{background:var(--block-bg,#F7F6F3);border:1px solid var(--hairline);border-left:3px solid var(--info,#1E3A8A);border-radius:10px}
.art-callout.warn{border-left-color:#B8791F}
.co-ic{background:var(--surface);color:var(--chip-text,#5D5768);border:1px solid var(--hairline)}
.co-body b{color:var(--ink);font-weight:700}
.co-body p{color:var(--text2)}
.art-toc-title{color:var(--muted,#6F697B);font-weight:700;letter-spacing:.08em}
.art-faq-title{font-weight:650;letter-spacing:-.012em}
.art-tag{background:var(--chip-bg,#F2F0EC);color:var(--chip-text,#5D5768)}