/* ——— тон страницы блога ——— */
 :root{
    --bg:#f7f9fc; --card:#fff; --text:#2f3a4a; --muted:#7a8899; --line:#e6e9ef;
    --brand:#28a745; --brand-ink:#1f7e35; --shadow:0 10px 24px rgba(0,0,0,.08);
  }
  body{background:var(--bg); color:var(--text); font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;}
  a{color:var(--brand); text-decoration:none}
  a:hover{text-decoration:underline}
  .container.reading{max-width:760px}

  /* ——— шапка как в blog.html ——— */
  .navbar.navbar-default,
  .navbar-default.affix,
  .navbar-default.navbar-shrink{background:#fff!important;border-bottom:1px solid var(--line)!important;box-shadow:0 4px 12px rgba(0,0,0,.06)!important;}
  .navbar-default .navbar-nav>li>a{color:#2f3a4a}
  .navbar-default .navbar-nav>li>a:hover{color:#28a745;background:transparent}

  /* ——— хлебные ——— */
  .breadcrumbs{font-size:13px;color:var(--muted);padding: 15px 0 0}
  .breadcrumbs a{color:var(--muted)}
  .breadcrumbs .sep{opacity:.5;padding:0 6px}

  /* ——— hero и обложка ——— */
  .hero{padding:22px 0 6px}
  .title{font-size:36px;line-height:1.15;margin:10px 0 8px}
  .meta{color:var(--muted);font-size:14px}
  .article-cover{position:relative;margin:18px 0 10px;border-radius:16px;overflow:hidden;background:#eef2f7;box-shadow:var(--shadow);aspect-ratio:16/9}
  .article-cover img{
position:absolute;
inset:0;
width:100%;
height:110%;
object-fit:cover;
display:block;
}
  /* ——— оглавление ——— */
  .toc{background:#f6f8fb;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:18px 0}
  .toc h3{margin:0 0 8px;font-size:16px}
  .toc a{display:block;padding:4px 0;color:#3d566e}

  /* ——— тело статьи ——— */
  .article{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px}
  .article h2{font-size:26px;margin:24px 0 6px}
  .article h3{font-size:20px;margin:18px 0 6px}
  .callout{border-left:4px solid var(--brand);background:#f6fbf7;padding:12px 14px;border-radius:10px;margin:16px 0}

  /* ——— автор / share / навигация ——— */
  .author{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
  .author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
  .share{display:flex;gap:10px;flex-wrap:wrap}
  .share a{display:inline-block;padding:8px 10px;border:1px solid var(--line);border-radius:10px;color:#2f3a4a}
  .share a:hover{background:#f6f8fb;text-decoration:none}
  .postnav{display:flex;gap:12px;margin:20px 0 0}
  .postnav a{flex:1;display:block;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;color:#2f3a4a}
  .postnav a:hover{background:#f6f8fb;text-decoration:none}

  /* ——— смотрите также ——— */
  .related{padding:26px 0 6px}
  .post-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .post-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
  .post-cover{height:150px;background:#eef2f7;position:relative; display:block;}
  .post-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .post-body{padding:12px 14px}
  .post-title{font-size:17px;margin:0}
  .post-title a{color:#2f3a4a;font-weight:700}
  .post-title a:hover{color:var(--brand)}

  /* тёмное меню при скролле */
  .navbar.navbar-default,
  .navbar-default.affix,
  .navbar-default.navbar-shrink,
  .navbar.navbar-default.top-nav-collapse,
  .navbar.navbar-default.scrolled{
    background:#111 !important;
    border-bottom:1px solid #1c1f24 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.35) !important;
  }

  /* ——— футер ——— */
  #copyright{color:#68778a;font-size:14px;padding:26px 0}

  /* высота фиксированной шапки */
:root{
  --header-offset-desktop: 112px; /* topbar + navbar */
  --header-offset-mobile: 56px;
  --nav-h: var(--header-offset-desktop);
}

@media (max-width: 991.98px){
  :root{
    --nav-h: var(--header-offset-mobile);
  }
}

.with-fixed-nav{
  padding-top: var(--nav-h);
}

/* якоря */
.article h2[id],
.article h3[id],
#blog h2[id]{
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

  /* изображения + лайтбокс */
  .img-block{margin:18px 0;border-radius:14px;overflow:hidden;background:#eef2f7;border:1px solid var(--line)}
  .img-block img{display:block;width:100%;height:auto;cursor:zoom-in}
  .img-block figcaption{font-size:13px;color:#7a8899;padding:8px 12px;background:#fafbfc;border-top:1px solid var(--line)}
  .lightbox-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}
  .lightbox-backdrop.open{display:flex}
  .lightbox-img{max-width:92vw;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .lightbox-close{position:fixed;top:14px;right:16px;color:#fff;font-size:26px;line-height:1;cursor:pointer;user-select:none}