/* =========================================================
   ARTICLE PAGE / INTRO / GALLERY / CAPTIONS
   Собрано из рабочих файлов, чтобы убрать мелкие patch-CSS.
========================================================= */


/* ===== article.css ===== */
/* Article mobile-safe redesign */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, #2f80ed, #12b981);
    z-index: 9999;
}

.article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.article-page-main {
    min-width: 0;
}

.article-card-new,
.article-comments-new,
.article-side-card-new {
    background: rgba(255,255,255,.94);
    border: 1px solid #dfe7ef;
    border-radius: 28px;
    box-shadow: 0 12px 35px rgba(15,23,42,.06);
}

.article-card-new {
    padding: 34px;
    overflow: hidden;
}

.article-breadcrumbs-new {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.article-breadcrumbs-new a {
    color: #64748b;
}

.article-category-pill {
    display: inline-flex;
    width: fit-content;
    padding: 8px 13px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #2f80ed;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}

.article-title-new {
    max-width: 900px;
    margin: 18px 0 14px;
    color: #101827;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.article-intro-new {
    margin: 18px 0;
    padding: 20px 22px;
    border-left: 5px solid #2f80ed;
    border-radius: 0 22px 22px 0;
    background: #f6faff;
    color: #475569;
    font-size: 22px;
    line-height: 1.6;
}

.article-intro-new p:last-child {
    margin-bottom: 0;
}

.article-meta-new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 18px 0 22px;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.article-author-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #101827;
    text-decoration: none;
}

.article-author-new img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.article-edit-pencil-new {
    margin-left: auto;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf4ff;
    color: #0b5ed7;
    font-weight: 950;
    text-decoration: none;
}

.article-cover-new {
    margin: 24px 0;
}

.article-cover-new img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 14px 38px rgba(15,23,42,.12);
}

.article-rating-new {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 22px 0;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e1e8ef;
}

.article-rating-new form {
    margin: 0;
}

.article-rating-new button,
.article-rating-new span {
    border: 1px solid #d5e0ea;
    background: #fff;
    color: #101827;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
}

.article-content-new {
    max-width: 780px;
    margin: 0 auto;
    color: #1f2937;
    font-size: 19px;
    line-height: 1.78;
}

.article-content-new p {
    margin: 0 0 20px;
}

.article-content-new h2,
.article-content-new h3 {
    margin: 34px 0 16px;
    color: #101827;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.article-content-new h2 { font-size: 32px; }
.article-content-new h3 { font-size: 25px; }

.article-content-new img,
.article-content-new iframe,
.article-content-new video {
    max-width: 100%;
    height: auto;
}

.article-content-new img {
    display: block;
    margin: 22px auto;
    border-radius: 20px;
}

.article-content-new blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    border-left: 5px solid #2f80ed;
    background: #f6faff;
    border-radius: 0 18px 18px 0;
    color: #334155;
    font-weight: 800;
}

.article-gallery-new {
    margin-top: 30px;
}

.article-gallery-grid-new {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.article-gallery-grid-new figure {
    margin: 0;
}

.article-gallery-grid-new img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 18px;
}

.article-tags-new,
.article-share-new div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.article-tags-new a,
.article-share-new a,
.article-share-new button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #dbe4ee;
    background: #fff;
    color: #101827;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.article-share-new {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
}

.article-comments-new {
    margin-top: 20px;
    padding: 24px;
}

.article-comments-new h2 {
    margin-top: 0;
}

.article-comments-new textarea,
.article-comments-new input[type="text"],
.article-comments-new input[type="email"] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d5e0ea;
    padding: 12px 14px;
}

.article-comments-new button[type="submit"] {
    border: 0;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    padding: 12px 18px;
    font-weight: 950;
}

.article-sidebar-new {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.article-side-card-new {
    padding: 18px;
}

.article-side-card-new h3 {
    margin: 0 0 12px;
}

.article-side-author-new {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #101827;
    font-weight: 900;
    text-decoration: none;
}

.article-side-author-new img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.article-side-link-new,
#articleToc a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid #edf1f5;
    color: #101827;
    font-weight: 800;
    text-decoration: none;
}

#articleToc .toc-subitem {
    padding-left: 12px;
    color: #64748b;
    font-size: 14px;
}

@media (max-width: 980px) {
    .article-shell {
        grid-template-columns: 1fr;
    }
    .article-sidebar-new {
        position: static;
    }
}

@media (max-width: 760px) {
    .article-card-new {
        padding: 18px;
        border-radius: 24px;
    }

    .article-breadcrumbs-new {
        margin-bottom: 14px;
        font-size: 13px;
        gap: 6px;
    }

    .article-title-new {
        margin: 14px 0 12px;
        font-size: 42px;
        line-height: 1.04;
    }

    .article-intro-new {
        margin: 14px 0;
        padding: 15px 16px;
        border-left-width: 4px;
        border-radius: 0 18px 18px 0;
        font-size: 18px;
        line-height: 1.5;
    }

    .article-meta-new {
        gap: 9px;
        margin: 14px 0 18px;
        font-size: 13px;
    }

    .article-author-new img {
        width: 34px;
        height: 34px;
    }

    .article-edit-pencil-new {
        width: 34px;
        height: 34px;
    }

    .article-cover-new {
        margin: 18px -18px 18px;
    }

    .article-cover-new img {
        border-radius: 0;
        max-height: 430px;
    }

    .article-content-new {
        max-width: 100%;
        font-size: 17px;
        line-height: 1.65;
    }

    .article-content-new p {
        margin-bottom: 16px;
    }

    .article-content-new h2 {
        font-size: 27px;
    }

    .article-content-new h3 {
        font-size: 22px;
    }

    .article-content-new img {
        width: calc(100% + 36px);
        max-width: calc(100% + 36px);
        margin-left: -18px;
        margin-right: -18px;
        border-radius: 0;
    }

    .article-rating-new {
        margin: 16px 0;
    }

    .article-gallery-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-comments-new,
    .article-side-card-new {
        padding: 18px;
        border-radius: 22px;
    }
}


/* =========================================================
   FINAL: подписи под фото в галерее как у новостных сайтов
   ВАЖНО: этот блок должен быть в самом конце article.css
========================================================= */

.article-gallery-new {
    margin-top: 30px;
}

.article-gallery-grid-new {
    align-items: start;
}

.article-gallery-grid-new figure,
.article-gallery-new figure,
.news-article-gallery figure,
.article-content-new .article-gallery-grid-new figure {
    display: block !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.article-gallery-grid-new img,
.article-gallery-new img,
.news-article-gallery img,
.article-content-new .article-gallery-grid-new img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 18px !important;
}

.article-gallery-grid-new figcaption,
.article-gallery-new figcaption,
.news-article-gallery figcaption,
.article-gallery-grid-new .image-credit-caption,
.article-gallery-new .image-credit-caption,
.news-article-gallery .image-credit-caption,
.article-gallery-grid-new .article-inline-caption,
.article-gallery-new .article-inline-caption {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    text-align: left !important;
}

.article-gallery-grid-new figcaption span,
.article-gallery-new figcaption span,
.news-article-gallery figcaption span,
.article-gallery-grid-new figcaption small,
.article-gallery-new figcaption small,
.news-article-gallery figcaption small,
.article-gallery-grid-new .image-credit-caption span,
.article-gallery-new .image-credit-caption span,
.news-article-gallery .image-credit-caption span,
.article-gallery-grid-new .image-credit-caption small,
.article-gallery-new .image-credit-caption small,
.news-article-gallery .image-credit-caption small {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
}

body.portal-dark .article-gallery-grid-new figcaption,
body.portal-dark .article-gallery-new figcaption,
body.portal-dark .news-article-gallery figcaption,
body.portal-dark .article-gallery-grid-new .image-credit-caption,
body.portal-dark .article-gallery-new .image-credit-caption,
body.portal-dark .news-article-gallery .image-credit-caption,
body.portal-dark .article-gallery-grid-new figcaption span,
body.portal-dark .article-gallery-new figcaption span,
body.portal-dark .news-article-gallery figcaption span,
body.portal-dark .article-gallery-grid-new figcaption small,
body.portal-dark .article-gallery-new figcaption small,
body.portal-dark .news-article-gallery figcaption small {
    color: #9ca8ba !important;
}

@media (max-width: 760px) {
    .article-gallery-grid-new {
        gap: 16px 18px;
    }

    .article-gallery-grid-new figure,
    .article-gallery-new figure,
    .news-article-gallery figure {
        margin-bottom: 18px !important;
    }

    .article-gallery-grid-new img,
    .article-gallery-new img,
    .news-article-gallery img {
        border-radius: 16px !important;
    }

    .article-gallery-grid-new figcaption,
    .article-gallery-new figcaption,
    .news-article-gallery figcaption,
    .article-gallery-grid-new .image-credit-caption,
    .article-gallery-new .image-credit-caption,
    .news-article-gallery .image-credit-caption {
        margin-top: 5px !important;
        padding: 0 1px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }

    .article-gallery-grid-new figcaption span,
    .article-gallery-new figcaption span,
    .news-article-gallery figcaption span,
    .article-gallery-grid-new figcaption small,
    .article-gallery-new figcaption small,
    .news-article-gallery figcaption small {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }
}


/* ===== image_captions_media.css ===== */
/* =========================================================
   Article image captions — как в нормальных медиа
   Подпись под картинкой: серый текст, без кнопок/плашек.
========================================================= */

.news-article-content figure,
.article-content figure,
.post-content figure,
.article-body figure,
.article-inline-figure {
    margin: 28px 0;
}

.news-article-content img,
.article-content img,
.post-content img,
.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 28px auto 8px;
    border-radius: 0;
}

/* Главное: подпись должна быть обычным текстом, а не карточкой/плашкой */
.image-credit-caption,
.news-article-content figcaption,
.article-content figcaption,
.post-content figcaption,
.article-body figcaption,
.article-inline-caption {
    display: block !important;
    margin: 8px 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8a8f98 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: left !important;
}

/* Если caption состоит из подписи + источника */
.image-credit-caption span,
.article-inline-caption span {
    display: inline !important;
    color: #8a8f98 !important;
    font-weight: 500 !important;
}

.image-credit-caption small,
.article-inline-caption small {
    display: inline !important;
    margin: 0 !important;
    color: #8a8f98 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 500 !important;
}

/* Убираем кнопку-пилюлю под галереей, если старые стили её сделали */
.news-article-gallery figcaption,
.news-article-gallery .image-credit-caption,
.article-gallery figcaption,
.article-gallery-new figcaption {
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    padding: 0 !important;
    margin: 7px 0 18px !important;
}

/* В галерее фото остаются красивыми, но подпись становится медийной */
.news-article-gallery figure,
.article-gallery figure,
.article-gallery-new figure {
    margin: 0 0 18px !important;
}

.news-article-gallery img,
.article-gallery img,
.article-gallery-new img {
    margin: 0 auto 7px !important;
    border-radius: 18px;
}

/* Главное фото статьи */
.news-article-cover .image-credit-caption,
.article-cover .image-credit-caption,
.article-cover-new .image-credit-caption {
    margin: 10px 0 24px !important;
    padding: 0 4px !important;
    color: #8a8f98 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Мобильная версия — как на скрине */
@media (max-width: 760px) {
    .news-article-content figure,
    .article-content figure,
    .post-content figure,
    .article-body figure,
    .article-inline-figure {
        margin: 24px 0;
    }

    .news-article-content img,
    .article-content img,
    .post-content img,
    .article-body img {
        width: 100%;
        margin: 24px auto 8px;
        border-radius: 0;
    }

    .image-credit-caption,
    .news-article-content figcaption,
    .article-content figcaption,
    .post-content figcaption,
    .article-body figcaption,
    .article-inline-caption {
        margin: 8px 0 22px !important;
        padding: 0 !important;
        font-size: 15px !important;
        color: #8a8f98 !important;
    }

    .news-article-cover .image-credit-caption,
    .article-cover .image-credit-caption,
    .article-cover-new .image-credit-caption {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ===== image_credits.css ===== */
/* Image captions / credits */

.image-credit-field input {
    font-weight: 700;
}

.image-credit-caption {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
}

.image-credit-caption span {
    display: block;
    color: #334155;
    font-weight: 800;
}

.image-credit-caption small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-weight: 850;
}

.news-article-gallery .image-credit-caption,
.article-gallery-new .image-credit-caption,
.article-gallery .image-credit-caption {
    margin-top: 8px;
    font-size: 13px;
}

@media (max-width: 760px) {
    .image-credit-caption {
        border-radius: 14px;
        font-size: 13px;
        margin-left: 12px;
        margin-right: 12px;
    }
}


/* ===== post_detail_polish.css ===== */
/* =========================================================
   SzczecinTut — clean article detail
   Спокойный новостной вид: лид без «дорого-богато», подписи как у СМИ,
   горизонтальная галерея + лайтбокс.
========================================================= */

.np-article-page-clean {
    align-items: start;
}

.np-article-clean {
    overflow: hidden;
    background: rgba(255,255,255,.97);
}

.np-breadcrumbs-clean {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 750;
}

.np-article-category-pill {
    margin-top: 2px;
    padding: 7px 12px;
    background: #eef5ff;
    color: #2563eb;
    font-size: 11px;
    letter-spacing: .055em;
}

.np-article-title-clean {
    max-width: 900px;
    margin: 16px 0 12px;
    color: #111827;
    font-size: clamp(34px, 5.5vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.np-article-meta-clean {
    margin: 14px 0 18px;
    gap: 10px 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 750;
}

.np-article-meta-clean .np-author strong {
    color: #111827;
}

/* Лид: простая подводка, без карточки/кавычек/плашки */
.np-article-lead-clean {
    max-width: 820px;
    margin: 18px 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #374151 !important;
    font-size: clamp(19px, 2.1vw, 22px) !important;
    line-height: 1.58 !important;
    font-weight: 520 !important;
}

.np-article-lead-clean p {
    margin: 0 0 12px;
}

.np-article-lead-clean p:last-child {
    margin-bottom: 0;
}

/* Обложка */
.np-cover-clean {
    margin: 22px -6px 18px;
}

.np-cover-clean img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: none;
    cursor: zoom-in;
}

/* Подписи как на новостных сайтах */
.np-cover-clean figcaption,
.np-gallery-card figcaption,
.article-inline-caption {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 1px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #7b8492 !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    font-weight: 450 !important;
    text-align: left !important;
}

.np-cover-clean figcaption span,
.np-cover-clean figcaption small,
.np-gallery-card figcaption span,
.np-gallery-card figcaption small,
.article-inline-caption span,
.article-inline-caption small {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #7b8492 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 450 !important;
}

.np-cover-clean figcaption small::before,
.np-gallery-card figcaption small::before {
    content: " · ";
}

.np-rating-clean {
    margin: 18px 0 24px;
    padding: 10px;
    background: #f8fafc;
    border-color: #e5e7eb;
}

.np-rating-clean button,
.np-rating-clean span {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 13px;
}

/* Текст статьи */
.np-article-content-clean {
    max-width: 780px;
    margin: 0 auto;
    color: #1f2937;
    font-size: 19px;
    line-height: 1.78;
}

.np-article-content-clean p {
    margin: 0 0 21px;
}

.np-article-content-clean h2 {
    margin: 36px 0 15px;
    color: #111827;
    font-size: clamp(28px, 3.6vw, 36px);
    line-height: 1.16;
    letter-spacing: -.03em;
}

.np-article-content-clean h3 {
    margin: 30px 0 13px;
    color: #111827;
    font-size: clamp(23px, 3vw, 28px);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.np-article-content-clean img,
.np-article-content-clean iframe,
.np-article-content-clean video {
    max-width: 100%;
    height: auto;
}

.np-article-content-clean img {
    display: block;
    margin: 22px auto 0;
    border-radius: 16px;
    cursor: zoom-in;
}

.article-inline-figure {
    margin: 24px 0 24px !important;
}

.article-inline-figure img {
    margin: 0 auto !important;
}

.np-article-content-clean blockquote {
    margin: 28px 0;
    padding: 16px 18px;
    border-left: 3px solid #94a3b8;
    border-radius: 0;
    background: #f8fafc;
    color: #374151;
    font-weight: 520;
}

/* Горизонтальная галерея */
.np-gallery-clean {
    max-width: none;
    margin: 34px 0 4px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.np-gallery-head-clean {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.np-gallery-head-clean h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(24px, 3.5vw, 34px);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.np-gallery-head-clean span {
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.np-gallery-strip {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.np-gallery-card {
    flex: 0 0 min(78%, 360px);
    scroll-snap-align: start;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.np-gallery-open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #eef2f7;
    cursor: zoom-in;
}

.np-gallery-open img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 16px !important;
    transition: transform .22s ease, filter .22s ease;
}

.np-gallery-open:hover img {
    transform: scale(1.025);
    filter: saturate(1.04);
}

.np-gallery-open span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(17,24,39,.72);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    backdrop-filter: blur(8px);
}

.np-share-clean {
    margin-top: 30px;
}

/* Лайтбокс */
.st-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5,10,20,.92);
}

.st-lightbox.is-open {
    display: flex;
}

.st-lightbox__inner {
    position: relative;
    width: min(1180px, 100%);
    height: min(820px, 100%);
    display: grid;
    grid-template-rows: minmax(0,1fr) auto;
    gap: 10px;
}

.st-lightbox__stage {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    user-select: none;
    -webkit-user-drag: none;
}

.st-lightbox__caption {
    min-height: 22px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
}

.st-lightbox__btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.st-lightbox__btn:hover {
    background: rgba(255,255,255,.22);
}

.st-lightbox__close {
    top: 4px;
    right: 4px;
}

.st-lightbox__prev {
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.st-lightbox__next {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.st-lightbox__counter {
    position: absolute;
    top: 8px;
    left: 8px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    backdrop-filter: blur(10px);
}

body.st-lightbox-lock {
    overflow: hidden;
}

/* Dark mode */
body.portal-dark .np-article-clean {
    background: rgba(15,23,42,.96);
}

body.portal-dark .np-article-title-clean,
body.portal-dark .np-gallery-head-clean h2,
body.portal-dark .np-article-content-clean h2,
body.portal-dark .np-article-content-clean h3 {
    color: #f8fbff !important;
}

body.portal-dark .np-article-lead-clean,
body.portal-dark .np-article-content-clean {
    color: #d7e0ee !important;
}

body.portal-dark .np-article-content-clean blockquote {
    background: rgba(148,163,184,.10);
    color: #d7e0ee;
}

body.portal-dark .np-cover-clean figcaption,
body.portal-dark .np-cover-clean figcaption span,
body.portal-dark .np-cover-clean figcaption small,
body.portal-dark .np-gallery-card figcaption,
body.portal-dark .np-gallery-card figcaption span,
body.portal-dark .np-gallery-card figcaption small,
body.portal-dark .article-inline-caption {
    color: #9ca8ba !important;
}

@media (max-width: 980px) {
    .np-article-page-clean {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .np-article-page-clean {
        padding-top: 8px;
    }

    .np-article-clean {
        padding: 18px;
        border-radius: 24px;
    }

    .np-breadcrumbs-clean {
        margin-bottom: 12px;
        font-size: 12px;
        gap: 6px;
    }

    .np-article-title-clean {
        margin: 14px 0 10px;
        font-size: clamp(36px, 11vw, 44px);
        line-height: 1.04;
        letter-spacing: -.045em;
    }

    .np-article-meta-clean {
        margin: 12px 0 16px;
        font-size: 13px;
    }

    .np-article-lead-clean {
        margin: 14px 0 20px !important;
        font-size: 18px !important;
        line-height: 1.55 !important;
    }

    .np-cover-clean {
        margin: 18px -18px 16px;
    }

    .np-cover-clean img {
        max-height: none;
        border-radius: 0;
    }

    .np-cover-clean figcaption {
        padding: 0 18px !important;
        margin-top: 6px !important;
        font-size: 12.5px !important;
    }

    .np-rating-clean {
        margin: 16px 0 20px;
    }

    .np-article-content-clean {
        max-width: 100%;
        font-size: 18px;
        line-height: 1.72;
    }

    .np-article-content-clean p {
        margin-bottom: 18px;
    }

    .np-article-content-clean img {
        width: calc(100% + 36px);
        max-width: calc(100% + 36px);
        margin-left: -18px;
        margin-right: -18px;
        border-radius: 0;
    }

    .article-inline-caption {
        padding: 0 18px !important;
        font-size: 12.5px !important;
    }

    .np-gallery-clean {
        margin-top: 30px;
    }

    .np-gallery-card {
        flex-basis: 82%;
    }

    .np-gallery-open,
    .np-gallery-open img {
        border-radius: 14px !important;
    }

    .np-gallery-card figcaption {
        font-size: 12.5px !important;
        line-height: 1.28 !important;
    }

    .st-lightbox {
        padding: 8px;
    }

    .st-lightbox__btn {
        width: 40px;
        height: 40px;
        font-size: 25px;
    }

    .st-lightbox__prev {
        left: 8px;
    }

    .st-lightbox__next {
        right: 8px;
    }
}


/* ===== post_detail_next_polish.css ===== */

/* Post Detail NEXT Polish */

.np-article-content,
.news-article-content,
.article-content-new {
    font-size: 20px;
    line-height: 1.82;
}

.np-article-content p,
.news-article-content p,
.article-content-new p {
    margin-bottom: 22px;
}

.np-article-content h2,
.news-article-content h2,
.article-content-new h2 {
    position: relative;
    margin-top: 44px;
    padding-top: 8px;
}

.np-article-content h2::before,
.news-article-content h2::before,
.article-content-new h2::before {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #22c55e);
}

.np-article-content blockquote,
.news-article-content blockquote,
.article-content-new blockquote {
    position: relative;
    margin: 34px 0;
    padding: 22px 24px 22px 28px;
    border-left: 5px solid #2563eb;
    border-radius: 0 24px 24px 0;
    background: radial-gradient(circle at 92% 18%, rgba(37,99,235,.12), transparent 34%), #f6faff;
    color: #334155;
    font-size: 20px;
    line-height: 1.62;
    font-weight: 750;
}

.np-reading-tools {
    position: fixed;
    left: max(14px, calc((100vw - 1240px) / 2 - 72px));
    top: 210px;
    z-index: 70;
    display: grid;
    gap: 8px;
}

.np-reading-tools button,
.np-reading-tools a {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe7f3;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(15,23,42,.08);
    backdrop-filter: blur(14px);
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
}

.np-gallery-grid-pro {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.np-gallery-item-pro {
    grid-column: span 3;
}

.np-gallery-item-pro:first-child {
    grid-column: span 6;
}

.np-gallery-item-pro:first-child .np-gallery-open img {
    aspect-ratio: 16 / 8.5;
}

.np-gallery-open::after {
    content: "Увеличить";
    position: absolute;
    left: 10px;
    bottom: 10px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(10px);
}

.np-gallery-open:hover::after {
    opacity: 1;
    transform: translateY(0);
}

body.portal-dark .np-article-content h2::before,
body.portal-dark .news-article-content h2::before,
body.portal-dark .article-content-new h2::before {
    background: linear-gradient(90deg, #7db2ff, #34d399);
}

body.portal-dark .np-article-content blockquote,
body.portal-dark .news-article-content blockquote,
body.portal-dark .article-content-new blockquote {
    background: radial-gradient(circle at 92% 18%, rgba(125,178,255,.12), transparent 34%), #16243a !important;
    border-color: rgba(148,163,184,.24) !important;
    color: #cbd8ea !important;
}

body.portal-dark .np-reading-tools button,
body.portal-dark .np-reading-tools a {
    background: rgba(17,28,46,.92) !important;
    border-color: rgba(148,163,184,.24) !important;
    color: #f8fbff !important;
}

@media (max-width: 980px) {
    .np-reading-tools {
        position: static;
        display: flex;
        margin: 12px 0 18px;
        padding: 8px;
        border-radius: 20px;
        background: rgba(248,250,252,.9);
        border: 1px solid #e2e8f0;
        overflow-x: auto;
    }

    .np-reading-tools button,
    .np-reading-tools a {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        box-shadow: none;
    }
}

@media (max-width: 760px) {
    .np-article-content,
    .news-article-content,
    .article-content-new {
        font-size: 18px;
        line-height: 1.72;
    }

    .np-gallery-grid-pro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .np-gallery-item-pro,
    .np-gallery-item-pro:first-child {
        grid-column: span 1;
    }

    .np-gallery-item-pro:first-child .np-gallery-open img {
        aspect-ratio: 4 / 3;
    }

    .np-gallery-open::after {
        display: none;
    }
}


/* =========================================================
   REPAIR LAYER after cleanup
   Поддержка текущего post_detail.html:
   .article-layout / .media-article / .article-content / .article-gallery
   Держать в конце article.css.
========================================================= */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
}

.article-main {
    min-width: 0;
}

.media-article,
.comments,
.sidebar-card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid #dfe7ef;
    border-radius: 28px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}

.media-article {
    padding: 34px;
    overflow: hidden;
}

.comments {
    margin-top: 22px;
    padding: 26px;
}

.article-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.sidebar-card {
    padding: 18px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.breadcrumbs a {
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-kicker {
    margin: 0 0 10px;
}

.article-kicker a {
    display: inline-flex;
    width: fit-content;
    padding: 8px 13px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}

.article-title {
    max-width: 900px;
    margin: 14px 0 16px;
    color: #101827;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.article-lead {
    position: relative;
    margin: 18px 0 22px;
    padding: 20px 22px 20px 24px;
    border-left: 5px solid #2563eb;
    border-radius: 0 24px 24px 0;
    background:
        radial-gradient(circle at 92% 18%, rgba(37, 99, 235, .12), transparent 34%),
        linear-gradient(135deg, #f6faff, #ffffff);
    color: #475569;
    font-size: clamp(19px, 2.2vw, 23px);
    line-height: 1.58;
    font-weight: 550;
    box-shadow: inset 0 0 0 1px rgba(219, 228, 238, .75);
}

.article-lead p {
    margin: 0 0 12px;
}

.article-lead p:last-child {
    margin-bottom: 0;
}

.article-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 18px 0 24px;
    color: #64748b;
    font-size: 14px;
    font-weight: 850;
}

.article-author {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #101827;
    text-decoration: none;
}

.article-author img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.article-edit-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    background: #eef6ff;
    color: #2563eb;
    font-weight: 950;
    text-decoration: none;
}

.article-cover {
    margin: 24px -6px 22px;
}

.article-cover img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
}

.article-cover figcaption {
    margin: 8px 0 0;
    padding: 0 4px;
    color: #8a8f98;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

.article-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin: 22px 0;
    padding: 12px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.article-rating form {
    margin: 0;
}

.article-rating button,
.article-rating span {
    min-height: 38px;
    border: 1px solid #dbe7f3;
    border-radius: 999px;
    background: #ffffff;
    color: #101827;
    padding: 7px 12px;
    font-weight: 950;
}

.article-content {
    max-width: 780px;
    margin: 0 auto;
    color: #1f2937;
    font-size: 19px;
    line-height: 1.78;
}

.article-content p {
    margin: 0 0 21px;
}

.article-content h2,
.article-content h3 {
    margin: 34px 0 16px;
    color: #101827;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.article-content h2 {
    font-size: 32px;
}

.article-content h3 {
    font-size: 25px;
}

.article-content h2::before {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #22c55e);
}

.article-content img,
.article-content iframe,
.article-content video {
    max-width: 100%;
    height: auto;
}

.article-content img {
    display: block;
    margin: 24px auto 8px;
    border-radius: 20px;
}

.article-content blockquote {
    position: relative;
    margin: 28px 0;
    padding: 18px 22px;
    border-left: 5px solid #2563eb;
    border-radius: 0 18px 18px 0;
    background: #f3f7ff;
    color: #334155;
    font-weight: 850;
}

.article-gallery {
    margin-top: 34px;
}

.article-gallery > h2 {
    margin: 0 0 18px;
    color: #101827;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.article-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
}

.article-gallery-item {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.article-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0;
    border-radius: 18px;
    cursor: zoom-in;
}

.article-gallery-item figcaption {
    display: block;
    margin: 6px 0 0;
    padding: 0 2px;
    color: #8a8f98;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.28;
    text-align: left;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.article-tags a,
.share-link,
.np-tags a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f3f7ff;
    border: 1px solid #dbe7f3;
    color: #2563eb;
    font-weight: 900;
    text-decoration: none;
}

.share-box {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #edf2f7;
}

.share-box__title {
    margin: 0 0 10px;
    color: #101827;
    font-size: 22px;
    font-weight: 950;
}

.share-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share-box__note {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 14px;
}

.sidebar-card h3 {
    margin: 0 0 12px;
    color: #101827;
    font-size: 20px;
}

.sidebar-card a,
.sidebar-post {
    display: block;
    padding: 10px 0;
    border-top: 1px solid rgba(148, 163, 184, .22);
    color: #101827;
    font-weight: 850;
    text-decoration: none;
}

.sidebar-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

#articleToc {
    display: grid;
    gap: 7px;
}

#articleToc a {
    display: block;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    color: #101827;
    text-decoration: none;
    font-weight: 850;
}

#articleToc a.toc-subitem {
    margin-left: 12px;
    color: #64748b;
    font-size: 14px;
}

/* dark mode compatibility */
body.portal-dark .media-article,
body.portal-dark .comments,
body.portal-dark .sidebar-card {
    background: #101b2d !important;
    border-color: rgba(148, 163, 184, .24) !important;
    color: #e8f0fb !important;
}

body.portal-dark .article-title,
body.portal-dark .article-content h2,
body.portal-dark .article-content h3,
body.portal-dark .share-box__title,
body.portal-dark .sidebar-card h3,
body.portal-dark .sidebar-card a,
body.portal-dark .sidebar-post,
body.portal-dark .article-author {
    color: #f8fbff !important;
}

body.portal-dark .article-content,
body.portal-dark .article-lead,
body.portal-dark .article-meta-row,
body.portal-dark .share-box__note {
    color: #cbd8ea !important;
}

body.portal-dark .article-lead,
body.portal-dark .article-content blockquote,
body.portal-dark .article-rating,
body.portal-dark #articleToc a {
    background: #16243a !important;
    border-color: rgba(148, 163, 184, .25) !important;
}

body.portal-dark .article-gallery-item figcaption,
body.portal-dark .article-cover figcaption {
    color: #9ca8ba !important;
}

@media (max-width: 980px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }
}

@media (max-width: 760px) {
    .article-layout {
        display: block;
    }

    .media-article,
    .comments {
        padding: 18px;
        border-radius: 24px;
    }

    .article-title {
        font-size: 42px;
        line-height: 1.02;
    }

    .article-lead {
        padding: 16px;
        font-size: 18px;
        line-height: 1.55;
        border-radius: 0 20px 20px 0;
    }

    .article-cover {
        margin: 20px -18px 20px;
    }

    .article-cover img {
        border-radius: 0;
        max-height: none;
    }

    .article-content {
        font-size: 18px;
        line-height: 1.72;
    }

    .article-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 16px;
    }

    .article-gallery-item img {
        border-radius: 16px;
    }

    .article-gallery-item figcaption {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.25;
    }

    .share-links {
        gap: 7px;
    }
}

@media (max-width: 420px) {
    .article-title {
        font-size: 38px;
    }
}


/* =========================================================
   VISUAL REPAIR V2 — Статья
   Горизонтальная галерея + нормальный A+/A−.
   Держать в конце article.css.
========================================================= */

.np-reading-tools {
    display: flex !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
}

.np-reading-tools button,
.np-reading-tools a {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid #dbe7f3 !important;
    background: rgba(255,255,255,.94) !important;
    color: #0f172a !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

.media-article {
    padding-top: 28px !important;
}

.article-title {
    margin-top: 16px !important;
}

.article-lead {
    font-weight: 600 !important;
}

.article-gallery {
    margin-top: 34px !important;
}

.article-gallery > h2 {
    margin-bottom: 16px !important;
}

.article-gallery-grid,
.np-gallery-strip,
.np-gallery-grid-pro,
.np-gallery-clean .np-gallery-strip {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
}

.article-gallery-grid::-webkit-scrollbar,
.np-gallery-strip::-webkit-scrollbar,
.np-gallery-grid-pro::-webkit-scrollbar {
    height: 8px;
}

.article-gallery-grid::-webkit-scrollbar-thumb,
.np-gallery-strip::-webkit-scrollbar-thumb,
.np-gallery-grid-pro::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.article-gallery-item,
.np-gallery-card,
.np-gallery-item-pro {
    flex: 0 0 min(78vw, 360px) !important;
    width: min(78vw, 360px) !important;
    max-width: min(78vw, 360px) !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.article-gallery-item:first-child,
.np-gallery-card:first-child,
.np-gallery-item-pro:first-child {
    flex-basis: min(86vw, 520px) !important;
    width: min(86vw, 520px) !important;
    max-width: min(86vw, 520px) !important;
}

.article-gallery-item img,
.np-gallery-card img,
.np-gallery-item-pro img,
.np-gallery-open img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    margin: 0 !important;
}

.article-gallery-item figcaption,
.np-gallery-card figcaption,
.np-gallery-item-pro figcaption {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    text-align: left !important;
}

.article-gallery-item figcaption span,
.article-gallery-item figcaption small,
.np-gallery-card figcaption span,
.np-gallery-card figcaption small,
.np-gallery-item-pro figcaption span,
.np-gallery-item-pro figcaption small {
    display: inline !important;
    color: #8a8f98 !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    line-height: inherit !important;
}

.np-gallery-open {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    cursor: zoom-in;
}

.np-gallery-open > span,
.article-gallery-counter {
    position: absolute !important;
    right: 9px !important;
    bottom: 9px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(15,23,42,.72) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.portal-dark .np-reading-tools button,
body.portal-dark .np-reading-tools a {
    background: #16243a !important;
    color: #f8fbff !important;
    border-color: rgba(148,163,184,.25) !important;
}

body.portal-dark .article-gallery-item figcaption,
body.portal-dark .np-gallery-card figcaption,
body.portal-dark .np-gallery-item-pro figcaption,
body.portal-dark .article-gallery-item figcaption span,
body.portal-dark .article-gallery-item figcaption small,
body.portal-dark .np-gallery-card figcaption span,
body.portal-dark .np-gallery-card figcaption small {
    color: #9ca8ba !important;
}

@media (max-width: 760px) {
    .media-article {
        padding-top: 18px !important;
    }

    .np-reading-tools {
        margin-bottom: 18px !important;
    }

    .np-reading-tools button,
    .np-reading-tools a {
        width: 42px !important;
        height: 42px !important;
        font-size: 15px !important;
    }

    .article-gallery-grid,
    .np-gallery-strip,
    .np-gallery-grid-pro {
        gap: 14px !important;
        padding-bottom: 10px !important;
    }

    .article-gallery-item,
    .np-gallery-card,
    .np-gallery-item-pro {
        flex-basis: 72vw !important;
        width: 72vw !important;
        max-width: 72vw !important;
    }

    .article-gallery-item:first-child,
    .np-gallery-card:first-child,
    .np-gallery-item-pro:first-child {
        flex-basis: 82vw !important;
        width: 82vw !important;
        max-width: 82vw !important;
    }

    .article-gallery-item img,
    .np-gallery-card img,
    .np-gallery-item-pro img,
    .np-gallery-open img {
        border-radius: 18px !important;
    }

    .article-gallery-item figcaption,
    .np-gallery-card figcaption,
    .np-gallery-item-pro figcaption {
        margin-top: 5px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
   VISUAL REPAIR V3 — Статья
========================================================= */

.media-article {
    --article-font-scale: 1;
}

.article-lead,
.np-article-lead,
.news-article-lead {
    position: relative !important;
    margin: 18px 0 22px !important;
    padding: 20px 22px 20px 24px !important;
    border-left: 5px solid #2563eb !important;
    border-radius: 0 24px 24px 0 !important;
    background:
        radial-gradient(circle at 92% 18%, rgba(37,99,235,.12), transparent 34%),
        linear-gradient(135deg, #f6faff, #ffffff) !important;
    box-shadow: inset 0 0 0 1px rgba(219,228,238,.75) !important;
    color: #475569 !important;
    font-size: calc(21px * var(--article-font-scale, 1)) !important;
    line-height: 1.58 !important;
    font-weight: 550 !important;
}

.article-lead::after,
.np-article-lead::after,
.news-article-lead::after {
    content: "”";
    position: absolute;
    right: 16px;
    top: -8px;
    color: rgba(37,99,235,.13);
    font-size: 82px;
    line-height: 1;
    font-weight: 950;
    pointer-events: none;
}

.article-lead p,
.np-article-lead p,
.news-article-lead p {
    margin: 0 0 12px !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.article-content,
.np-article-content,
.news-article-content,
.article-content-new {
    font-size: calc(19px * var(--article-font-scale, 1)) !important;
}

.np-reading-tools {
    display: flex !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
}

.np-reading-tools button,
.np-reading-tools a {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid #dbe7f3 !important;
    background: rgba(255,255,255,.94) !important;
    color: #0f172a !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

.article-gallery,
.np-gallery-pro,
.news-article-gallery {
    margin-top: 34px !important;
}

.article-gallery > h2,
.np-gallery-pro h2,
.news-article-gallery h2 {
    margin: 0 0 18px !important;
    color: #101827 !important;
    font-size: clamp(32px, 4vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
}

.article-gallery-grid,
.np-gallery-strip,
.np-gallery-grid-pro,
.news-article-gallery > div {
    display: flex !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
}

.article-gallery-grid::-webkit-scrollbar,
.np-gallery-strip::-webkit-scrollbar,
.np-gallery-grid-pro::-webkit-scrollbar,
.news-article-gallery > div::-webkit-scrollbar {
    height: 8px;
}

.article-gallery-grid::-webkit-scrollbar-thumb,
.np-gallery-strip::-webkit-scrollbar-thumb,
.np-gallery-grid-pro::-webkit-scrollbar-thumb,
.news-article-gallery > div::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.article-gallery-item,
.np-gallery-card,
.np-gallery-item-pro,
.news-article-gallery figure {
    flex: 0 0 76vw !important;
    width: 76vw !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.article-gallery-item img,
.np-gallery-card img,
.np-gallery-item-pro img,
.news-article-gallery figure img,
.np-gallery-open img {
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    margin: 0 !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}

.article-gallery-item figcaption,
.np-gallery-card figcaption,
.np-gallery-item-pro figcaption,
.news-article-gallery figure figcaption {
    display: block !important;
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    text-align: left !important;
}

body.portal-dark .article-lead,
body.portal-dark .np-article-lead,
body.portal-dark .news-article-lead {
    background:
        radial-gradient(circle at 92% 18%, rgba(125,178,255,.12), transparent 34%),
        linear-gradient(135deg, #16243a, #101b2d) !important;
    color: #cbd8ea !important;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.22) !important;
}

body.portal-dark .article-gallery > h2,
body.portal-dark .np-gallery-pro h2,
body.portal-dark .news-article-gallery h2 {
    color: #f8fbff !important;
}

body.portal-dark .np-reading-tools button,
body.portal-dark .np-reading-tools a {
    background: #16243a !important;
    color: #f8fbff !important;
    border-color: rgba(148,163,184,.25) !important;
}

body.portal-dark .article-gallery-item figcaption,
body.portal-dark .np-gallery-card figcaption,
body.portal-dark .np-gallery-item-pro figcaption,
body.portal-dark .news-article-gallery figure figcaption {
    color: #9ca8ba !important;
}

@media (max-width: 760px) {
    .article-lead,
    .np-article-lead,
    .news-article-lead {
        padding: 17px 17px 17px 18px !important;
        border-left-width: 4px !important;
        border-radius: 0 20px 20px 0 !important;
        font-size: calc(18px * var(--article-font-scale, 1)) !important;
        line-height: 1.55 !important;
    }

    .article-lead::after,
    .np-article-lead::after,
    .news-article-lead::after {
        right: 11px;
        top: -4px;
        font-size: 64px;
    }

    .article-content,
    .np-article-content,
    .news-article-content,
    .article-content-new {
        font-size: calc(18px * var(--article-font-scale, 1)) !important;
    }

    .article-gallery-grid,
    .np-gallery-strip,
    .np-gallery-grid-pro,
    .news-article-gallery > div {
        gap: 14px !important;
        padding-bottom: 12px !important;
    }

    .article-gallery-item,
    .np-gallery-card,
    .np-gallery-item-pro,
    .news-article-gallery figure {
        flex-basis: 74vw !important;
        width: 74vw !important;
        max-width: 74vw !important;
    }

    .article-gallery-item img,
    .np-gallery-card img,
    .np-gallery-item-pro img,
    .news-article-gallery figure img,
    .np-gallery-open img {
        height: 220px !important;
        border-radius: 18px !important;
    }

    .article-gallery-item figcaption,
    .np-gallery-card figcaption,
    .np-gallery-item-pro figcaption,
    .news-article-gallery figure figcaption {
        margin-top: 5px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
}


/* =========================================================
   FINAL FIX: red accents, simple intro, clean gallery, spoiler
========================================================= */

:root { --pl-red: #dc143c; }

.article-kicker a,
.article-edit-link,
.article-tags a,
.share-link {
    background: #fff1f3 !important;
    color: var(--pl-red) !important;
    border-color: rgba(220,20,60,.18) !important;
}

.article-content h2::before,
.reading-progress {
    background: linear-gradient(90deg, var(--pl-red), #ffffff) !important;
}

.article-lead {
    margin: 22px 0 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #39465a !important;
    font-size: calc(21px * var(--article-font-scale, 1)) !important;
    font-weight: 500 !important;
    line-height: 1.68 !important;
}
.article-lead::before,
.article-lead::after { display: none !important; content: none !important; }
.article-lead p { color: inherit !important; font: inherit !important; margin: 0 0 14px !important; }

.article-cover figcaption,
.article-inline-figure figcaption,
.article-inline-caption {
    display: block !important;
    margin: 7px 34px 0 !important;
    padding: 0 2px !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}
.article-cover figcaption small::before,
.article-gallery-item figcaption small::before { content: " · "; }

.article-inline-figure,
.article-content figure { margin: 30px 0 !important; }
.article-inline-figure img,
.article-content figure img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}

.article-gallery-grid {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
}
.article-gallery-grid::-webkit-scrollbar { height: 8px !important; }
.article-gallery-grid::-webkit-scrollbar-thumb { border-radius: 999px !important; background: #cbd5e1 !important; }
.article-gallery-item {
    position: relative !important;
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.article-gallery-item::after {
    content: "🔍";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    box-shadow: 0 8px 20px rgba(15,23,42,.12);
    font-size: 15px;
    pointer-events: none;
}
.article-gallery-item img {
    display: block !important;
    width: 360px !important;
    height: 230px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}
.article-gallery-item figcaption {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    color: #8a8f98 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
}
.article-gallery::after {
    content: "Листайте фото в сторону →";
    display: inline-flex;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.article-content details.article-spoiler {
    margin: 24px 0 !important;
    border: 1px solid #e0e8f0 !important;
    border-radius: 18px !important;
    background: #f8fbff !important;
    overflow: hidden !important;
}
.article-content details.article-spoiler summary {
    cursor: pointer !important;
    padding: 15px 18px !important;
    color: #101827 !important;
    font-weight: 950 !important;
    list-style: none !important;
}
.article-content details.article-spoiler summary::-webkit-details-marker { display: none !important; }
.article-content details.article-spoiler summary::before { content: "＋"; margin-right: 8px; color: var(--pl-red); }
.article-content details.article-spoiler[open] summary::before { content: "−"; }
.article-content details.article-spoiler .article-spoiler__body { padding: 0 18px 18px !important; color: #334155 !important; }

@media (max-width: 760px) {
    .article-lead { font-size: calc(18px * var(--article-font-scale, 1)) !important; line-height: 1.66 !important; }
    .article-cover figcaption { margin-left: 18px !important; margin-right: 18px !important; }
    .article-gallery-item { flex-basis: 78vw !important; width: 78vw !important; min-width: 78vw !important; max-width: 78vw !important; }
    .article-gallery-item img { width: 78vw !important; height: 220px !important; border-radius: 18px !important; }
}


/* =========================================================
   ARTICLE TYPOGRAPHY DESIGN KIT
   Playfair заголовок + Georgia intro + аккуратный красный карандаш.
   Держать в самом конце article.css.
========================================================= */

:root {
    --article-red: #ef3340;
    --article-red-dark: #d71920;
    --article-red-soft: #fff1f3;
    --article-ink: #111827;
    --article-soft-text: #49566f;
}

.article-title,
.post-title,
.article-page h1,
.article-detail h1,
.post-detail h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
    font-size: clamp(42px, 7vw, 64px) !important;
    line-height: 1.04 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--article-ink) !important;
    margin-top: 20px !important;
    margin-bottom: 22px !important;
    text-wrap: balance;
}

.article-lead,
.post-intro,
.article-intro,
.lead,
.intro {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(20px, 3.7vw, 24px) !important;
    line-height: 1.78 !important;
    font-weight: 400 !important;
    letter-spacing: -0.004em !important;
    color: var(--article-soft-text) !important;
    margin: 0 0 34px !important;
    padding: 0 0 28px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .26) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.article-lead::before,
.article-lead::after,
.post-intro::before,
.post-intro::after,
.article-intro::before,
.article-intro::after,
.lead::before,
.lead::after,
.intro::before,
.intro::after {
    display: none !important;
    content: none !important;
}

.article-lead p,
.post-intro p,
.article-intro p,
.lead p,
.intro p {
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
}

.article-lead strong,
.post-intro strong,
.article-intro strong,
.lead strong,
.intro strong {
    font-weight: 400 !important;
}

.article-content,
.post-content {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #2b3445 !important;
}

.article-content p,
.post-content p {
    font-size: calc(19px * var(--article-font-scale, 1)) !important;
    line-height: 1.86 !important;
    font-weight: 400 !important;
}

.article-kicker a,
.category-badge,
.post-category,
.article-category {
    background: var(--article-red-soft) !important;
    color: var(--article-red-dark) !important;
    border-color: rgba(239, 51, 64, .16) !important;
    box-shadow: none !important;
}

.article-edit-link,
.edit-btn,
.post-edit-link {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--article-red-soft) !important;
    color: var(--article-red) !important;
    border: 1px solid rgba(239, 51, 64, .16) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.article-edit-link::before,
.edit-btn::before,
.post-edit-link::before {
    content: "✎" !important;
    font-size: 25px !important;
    line-height: 1 !important;
    color: var(--article-red) !important;
}

.article-edit-link:hover,
.edit-btn:hover,
.post-edit-link:hover {
    transform: translateY(-1px) !important;
    background: #ffe6ea !important;
    border-color: rgba(239, 51, 64, .28) !important;
}

.article-meta,
.post-meta,
.article-author-row {
    border-bottom: 1px solid rgba(148, 163, 184, .24) !important;
    padding-bottom: 22px !important;
    margin-bottom: 28px !important;
}

.article-meta,
.article-meta *,
.post-meta,
.post-meta *,
.article-author-row,
.article-author-row * {
    color: #64748b !important;
}

.article-meta strong,
.post-meta strong,
.article-author-row strong,
.article-author-row b {
    color: #111827 !important;
}

.share-link:hover,
.article-tags a:hover,
.article-tools button:hover {
    color: var(--article-red) !important;
    border-color: rgba(239,51,64,.25) !important;
}

body.portal-dark .article-title,
body.portal-dark .post-title,
body.portal-dark .article-page h1,
body.portal-dark .article-detail h1,
body.portal-dark .post-detail h1 {
    color: #f8fafc !important;
}

body.portal-dark .article-lead,
body.portal-dark .post-intro,
body.portal-dark .article-intro,
body.portal-dark .lead,
body.portal-dark .intro {
    color: #cbd5e1 !important;
    border-bottom-color: rgba(148,163,184,.24) !important;
}

body.portal-dark .article-content,
body.portal-dark .post-content {
    color: #dbe4ef !important;
}

@media (max-width: 760px) {
    .article-title,
    .post-title,
    .article-page h1,
    .article-detail h1,
    .post-detail h1 {
        font-size: clamp(38px, 11vw, 52px) !important;
        line-height: 1.03 !important;
        margin-bottom: 20px !important;
    }

    .article-lead,
    .post-intro,
    .article-intro,
    .lead,
    .intro {
        font-size: clamp(18px, 5.2vw, 21px) !important;
        line-height: 1.75 !important;
        margin-bottom: 28px !important;
        padding-bottom: 24px !important;
    }

    .article-content p,
    .post-content p {
        font-size: calc(18px * var(--article-font-scale, 1)) !important;
        line-height: 1.84 !important;
    }

    .article-edit-link,
    .edit-btn,
    .post-edit-link {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .article-edit-link::before,
    .edit-btn::before,
    .post-edit-link::before {
        font-size: 23px !important;
    }
}


/* === FINAL CONTROL: reading tools must never float on desktop === */
.np-reading-tools {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.np-reading-tools button,
.np-reading-tools a {
    position: static !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 981px) {
    .clean-article > .np-reading-tools,
    .article-card-new > .np-reading-tools,
    article > .np-reading-tools {
        margin-top: 0 !important;
        margin-bottom: 26px !important;
    }
}

/* Step57: server-rendered sidebar TOC; JS no longer owns #articleToc on article pages. */
.articleTocServer {
    display: grid;
    gap: 8px;
}
.articleTocServer a {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.35;
}
.articleTocServer a:hover {
    color: var(--accent, #2563eb);
}