/* ==========================================================================
   Ruprograms.com — Контентный CSS (Softix redesign, 2026)
   Подключается ПОСЛЕ /css/style.css. Стилизует header/footer берёт style.css,
   здесь — только легаси Semantic-UI разметка контента (_mirror.php):
   ui segment, four connected items, compact table segment, divided selection
   list, star rating, бейджи и кнопки. Спокойный современный вид без Semantic UI.
   ========================================================================== */

/* ---------- 1. Переменные контента ---------- */
:root {
    --rp-bg:          #f4f6fa;
    --rp-surface:     #ffffff;
    --rp-surface-2:   #f5f7fb;
    --rp-ink:         #0f172a;
    --rp-text:        #313c4e;
    --rp-muted:       #64748b;
    --rp-line:        #e4e8ef;
    --rp-line-soft:   #eef1f6;
    --rp-primary:     #2563eb;
    --rp-primary-dark:#1d4ed8;
    --rp-primary-soft:#eef4ff;
    --rp-blue:        #2563eb;
    --rp-amber:       #f59e0b;
    --rp-shadow:      0 10px 30px rgba(15,23,42,.07);
    --rp-shadow-sm:   0 4px 14px rgba(15,23,42,.05);
}

[data-theme="dark"] {
    --rp-bg:          #0b1220;
    --rp-surface:     #131c33;
    --rp-surface-2:   #1a2540;
    --rp-ink:         #e8edf6;
    --rp-text:        #aab5c9;
    --rp-muted:       #7e8aa3;
    --rp-line:        #25324f;
    --rp-line-soft:   #1d2942;
    --rp-primary:     #5b9bff;
    --rp-primary-dark:#82b3ff;
    --rp-primary-soft:rgba(91,155,255,.12);
    --rp-blue:        #82b3ff;
    --rp-amber:       #fbbf24;
    --rp-shadow:      0 12px 34px rgba(0,0,0,.42);
    --rp-shadow-sm:   0 6px 18px rgba(0,0,0,.32);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --rp-bg:          #0b1220;
        --rp-surface:     #131c33;
        --rp-surface-2:   #1a2540;
        --rp-ink:         #e8edf6;
        --rp-text:        #aab5c9;
        --rp-muted:       #7e8aa3;
        --rp-line:        #25324f;
        --rp-line-soft:   #1d2942;
        --rp-primary:     #5b9bff;
        --rp-primary-dark:#82b3ff;
        --rp-primary-soft:rgba(91,155,255,.12);
        --rp-blue:        #82b3ff;
        --rp-amber:       #fbbf24;
        --rp-shadow:      0 12px 34px rgba(0,0,0,.42);
        --rp-shadow-sm:   0 6px 18px rgba(0,0,0,.32);
    }
}

/* ---------- 2. Базовый фон страницы ---------- */
body.rp-site {
    background: var(--rp-bg) !important;
    color: var(--rp-text);
}

/* Чуть заметнее разделение карточек на тёмном фоне */
[data-theme="dark"] #dle-content .ui.items > .item,
[data-theme="dark"] #dle-content .ui.divided.selection.list > .item,
[data-theme="dark"] #dle-content .ui.compact.table.segment,
[data-theme="dark"] #dle-content .ui.table {
    border-color: #2c3a5c !important;
}

/* ---------- 3. Навигация: активный пункт ---------- */
.nav.main-nav a.is-active {
    color: var(--rp-primary) !important;
    background: var(--rp-primary-soft) !important;
    font-weight: 700;
}

/* Прелоадер-д."dimmer" из старой темы — прячем */
.ui.page.dimmer { display: none !important; }

/* ---------- 4. Центральная колонка ---------- */
.rp-page-column {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

#center_clmn {
    margin: 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#gen_box { margin-top: 0; }

/* Контейнер контента */
#dle-content.rp-mirror-content,
.rp-static-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    color: var(--rp-text);
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

#dle-content img { max-width: 100%; height: auto; }

/* ---------- 5. Сегмент-обёртка (ui segment) ---------- */
#dle-content .ui.segment {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------- 6. Типографика контента ---------- */
#dle-content h1,
.rp-static-page h1 {
    margin: 0 0 16px;
    color: var(--rp-ink);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
}

#dle-content h2,
#dle-content h3,
.rp-static-page h2,
.rp-static-page h3 {
    margin: 26px 0 12px;
    color: var(--rp-ink);
    font-weight: 700;
    line-height: 1.3;
}

#dle-content h2 { font-size: 23px; }
#dle-content h3 { font-size: 19px; }

#dle-content p,
.rp-static-page p {
    margin: 0 0 14px;
    color: var(--rp-text);
    font-size: 16px;
    line-height: 1.72;
}

#dle-content a { color: var(--rp-blue); }
#dle-content a:hover { color: var(--rp-primary-dark); text-decoration: underline; }

.rp-mirror-h1 { margin-bottom: 14px; }

/* ---------- 7. Заголовки секций (h4.ui inverted black block header) ---------- */
/* Semantic-заголовки несут класс `header` — страховка от широких `.header`
   правил, навешивающих sticky/fixed: секции скроллятся как обычный контент. */
#dle-content .ui.inverted.black.block.header,
#dle-content h4.ui.inverted.black.block.header,
#dle-content h2.ui.inverted.black.block.header,
.rp-download-group-title.ui.header {
    position: static !important;
    display: block;
    margin: 36px 0 16px !important;
    padding: 0 0 0 14px !important;
    border: 0 !important;
    border-left: 4px solid var(--rp-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rp-ink) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

#dle-content .ui.inverted.black.block.header:first-child {
    margin-top: 8px !important;
}

#dle-content .ui.inverted.black.block.header a,
.rp-download-group-title.ui.header a {
    color: var(--rp-ink) !important;
}
#dle-content .ui.inverted.black.block.header a:hover { text-decoration: none; }

/* ---------- 8. Hero на главной ---------- */
.rp-hero-lead {
    max-width: 760px;
    color: var(--rp-muted) !important;
    font-size: 17px;
    line-height: 1.62;
}

.rp-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 8px;
}

.rp-hero-facts span {
    padding: 6px 13px;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: var(--rp-surface);
    color: var(--rp-text);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- 9. Главная: сетка карточек (ui four connected items) ---------- */
#dle-content .ui.connected.items,
#dle-content .ui.four.connected.items,
#dle-content .ui.items {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 16px 0 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#dle-content .ui.items > .item {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--rp-line) !important;
    border-radius: 12px !important;
    background: var(--rp-surface) !important;
    box-shadow: var(--rp-shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

#dle-content .ui.items > .item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--rp-shadow);
    transform: translateY(-2px);
}

/* Картинка карточки */
#dle-content .ui.items > .item > .image {
    width: 100% !important;
    height: 132px !important;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--rp-surface-2);
    overflow: hidden;
}

#dle-content .ui.items > .item > .image img {
    width: auto !important;
    height: auto !important;
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
}

/* Контент карточки */
#dle-content .ui.items > .item > .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#dle-content .ui.items > .item .name,
#dle-content .ui.items > .item .name_h {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}

#dle-content .ui.items > .item .name a,
#dle-content .ui.items > .item .name_h a {
    color: var(--rp-ink) !important;
}
#dle-content .ui.items > .item .name a:hover { color: var(--rp-primary) !important; text-decoration: none; }

/* Список версий внутри карточки */
#dle-content .ui.items > .item .description {
    margin: 0;
    color: var(--rp-muted);
    font-size: 13px;
    line-height: 1.5;
}

#dle-content .ui.items > .item .description br:first-child { display: none; }

#dle-content .ui.items > .item .description a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 0;
    color: var(--rp-text) !important;
    font-size: 13px !important;
    font-weight: 600;
    border-top: 1px solid var(--rp-line-soft);
}
#dle-content .ui.items > .item .description a:first-of-type { border-top: 0; }
#dle-content .ui.items > .item .description a:hover { color: var(--rp-primary) !important; text-decoration: none; }

#dle-content .ui.items > .item .description a img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ---------- 10. Таблица программ (ui compact table segment) и обычные table ---------- */
#dle-content table {
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
}

#dle-content .ui.table,
#dle-content .ui.compact.table.segment {
    width: 100% !important;
    margin: 14px 0 28px !important;
    border: 1px solid var(--rp-line) !important;
    border-radius: 12px !important;
    background: var(--rp-surface) !important;
    box-shadow: var(--rp-shadow-sm);
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

#dle-content .ui.table th,
#dle-content .ui.compact.table.segment th {
    padding: 12px 16px !important;
    background: var(--rp-surface-2) !important;
    border-bottom: 1px solid var(--rp-line) !important;
    color: var(--rp-muted) !important;
    font-size: 12px !important;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .03em;
}

#dle-content .ui.table td,
#dle-content .ui.compact.table.segment td {
    padding: 12px 16px !important;
    border-top: 1px solid var(--rp-line-soft) !important;
    color: var(--rp-text);
    font-size: 14px;
    vertical-align: middle;
}

#dle-content .ui.table tbody tr:first-child td,
#dle-content .ui.compact.table.segment tbody tr:first-child td {
    border-top: 0 !important;
}

#dle-content .ui.compact.table.segment tbody tr:hover td {
    background: var(--rp-surface-2);
}

#dle-content .ui.compact.table.segment td:first-child a {
    color: var(--rp-ink);
    font-weight: 700;
}
#dle-content .ui.compact.table.segment td:first-child a:hover { color: var(--rp-primary); }

#dle-content .ui.compact.table.segment td:first-child img,
#dle-content .ui.table td:first-child img {
    width: 22px !important;
    height: 22px !important;
    margin: 0 8px 0 0 !important;
    border-radius: 4px;
    vertical-align: middle;
}

/* Маленькая таблица-описание секции (table без класса) */
#dle-content table:not(.ui) td img {
    border-radius: 8px;
    border: 1px solid var(--rp-line);
}
#dle-content table:not(.ui) td { padding: 6px 10px; vertical-align: top; }
#dle-content table:not(.ui) { box-shadow: none; }

/* ---------- 11. App-страница: список версий (ui divided selection list) ---------- */
#dle-content .ui.divided.selection.list,
#dle-content .ui.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 28px;
    padding: 0;
}

#dle-content .ui.divided.selection.list > .item,
#dle-content .ui.list > .item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    background: var(--rp-surface);
    box-shadow: var(--rp-shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease;
}

#dle-content .ui.divided.selection.list > .item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--rp-shadow);
}

#dle-content .ui.divided.selection.list > .item > img.ui.image,
#dle-content .ui.list > .item > img.ui.image {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: contain;
    background: var(--rp-surface-2);
    padding: 4px;
}

#dle-content .ui.divided.selection.list > .item > .content {
    flex: 1;
    min-width: 0;
}

#dle-content .ui.divided.selection.list .content .header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#dle-content .ui.divided.selection.list .content .header a {
    color: var(--rp-ink) !important;
    font-size: 17px !important;
    font-weight: 800;
}
#dle-content .ui.divided.selection.list .content .header a:hover { color: var(--rp-primary) !important; text-decoration: none; }
#dle-content .ui.divided.selection.list .content .header b { font-weight: 800; }

/* Гасим border/фон из подгружаемого контентом engine.css */
#dle-content .ui.divided.selection.list .content,
#dle-content .ui.divided.selection.list .content .header {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Блок справа: кнопка скачать + размер */
.mod__flr {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* ---------- 12. Кнопки и бейджи ---------- */
#dle-content .ui.button,
#dle-content a.ui.button,
#dle-content a.ui.teal.button,
#dle-content a.right.floated.mini.teal.ui.button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 9px 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--rp-primary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
    box-shadow: 0 6px 16px rgba(37,99,235,.22);
}

#dle-content .ui.button:hover,
#dle-content a.ui.button:hover,
#dle-content a.right.floated.mini.teal.ui.button:hover {
    background: var(--rp-primary-dark) !important;
    transform: translateY(-1px);
    color: #fff !important;
    text-decoration: none !important;
}

#dle-content .ui.button.mini,
#dle-content a.mini.ui.button {
    padding: 7px 14px !important;
    font-size: 13px !important;
}

/* "Скачать"-бейдж в таблице (ui teal label) */
#dle-content a.ui.teal.label,
#dle-content a.ui.label,
#dle-content a.ui.teal.label.small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 7px 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--rp-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .18s ease;
}
#dle-content a.ui.teal.label:hover,
#dle-content a.ui.label:hover {
    background: var(--rp-primary-dark) !important;
    color: #fff !important;
}

/* Нейтральный бейдж размера (ui label без ссылки) */
#dle-content .ui.label:not(a) {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--rp-surface-2);
    border: 1px solid var(--rp-line);
    color: var(--rp-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.rp-download-current-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Иконка "download disk" из Semantic — заменяем на стрелку */
#dle-content i.download.disk.icon,
#dle-content i.download.icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ---------- 13. Рейтинг (ui star rating) ---------- */
#dle-content .ui.star.rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 18px;
    margin: 2px 0;
    vertical-align: middle;
}

/* Запасной стиль, если SoftixRating не отрисовал SVG: показываем точки-звёзды */
#dle-content .ui.star.rating > i.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: var(--rp-line);
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.78L10 14.77 4.8 17.5l.99-5.78L1.58 7.62l5.82-.85z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.78L10 14.77 4.8 17.5l.99-5.78L1.58 7.62l5.82-.85z"/></svg>');
}
#dle-content .ui.star.rating[data-rating="1"] > i.icon:nth-child(-n+1),
#dle-content .ui.star.rating[data-rating="2"] > i.icon:nth-child(-n+2),
#dle-content .ui.star.rating[data-rating="3"] > i.icon:nth-child(-n+3),
#dle-content .ui.star.rating[data-rating="4"] > i.icon:nth-child(-n+4),
#dle-content .ui.star.rating[data-rating="5"] > i.icon:nth-child(-n+5) {
    background: var(--rp-amber);
}
/* Когда SoftixRating отрисовал реальные SVG — прячем запасные иконки */
#dle-content .ui.star.rating svg ~ i.icon,
#dle-content .ui.star.rating.rp-rating-rendered > i.icon { display: none; }
#dle-content .ui.star.rating svg { display: inline-block; vertical-align: middle; }

/* ---------- 14. Списки / divider / engine.css остатки ---------- */
#dle-content ul,
#dle-content ol { margin: 0 0 14px; padding-left: 22px; }
#dle-content ul li,
#dle-content ol li { list-style: disc; margin-bottom: 4px; }
#dle-content ol li { list-style: decimal; }
#dle-content hr { border: 0; border-top: 1px solid var(--rp-line); margin: 22px 0; }
#dle-content .ui.divider { display: none; }

/* ---------- 15. Статические и error-страницы ---------- */
.rp-static-page {
    border: 1px solid var(--rp-line) !important;
    border-radius: 12px !important;
    background: var(--rp-surface) !important;
    box-shadow: var(--rp-shadow-sm) !important;
    padding: 40px 32px !important;
}
body.rp-page-error .rp-static-page {
    display: grid;
    place-items: center;
    min-height: 360px;
    text-align: center;
}
body.rp-page-error .rp-static-page h1 {
    color: var(--rp-muted);
    font-size: clamp(64px, 12vw, 120px);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    #dle-content .ui.four.connected.items,
    #dle-content .ui.connected.items,
    #dle-content .ui.items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #dle-content.rp-mirror-content,
    .rp-static-page { padding: 24px 14px 48px; }

    #dle-content h1,
    .rp-static-page h1 { font-size: 26px; }

    #dle-content .ui.four.connected.items,
    #dle-content .ui.connected.items,
    #dle-content .ui.items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Карточная раскладка таблицы программ */
    #dle-content .ui.compact.table.segment,
    #dle-content .ui.compact.table.segment tbody,
    #dle-content .ui.compact.table.segment tr {
        display: block;
        width: 100%;
    }
    #dle-content .ui.compact.table.segment thead { display: none; }
    #dle-content .ui.compact.table.segment tr {
        margin: 0 0 12px;
        border: 1px solid var(--rp-line);
        border-radius: 12px;
        background: var(--rp-surface);
        overflow: hidden;
    }
    #dle-content .ui.compact.table.segment td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        border-top: 1px solid var(--rp-line-soft) !important;
        padding: 10px 14px !important;
    }
    #dle-content .ui.compact.table.segment td:first-child { border-top: 0 !important; }
    #dle-content .ui.compact.table.segment td:before {
        content: attr(data-label);
        color: var(--rp-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    #dle-content .ui.compact.table.segment td:nth-child(1):before { content: "Программа"; }
    #dle-content .ui.compact.table.segment td:nth-child(2):before { content: "Разработчик"; }
    #dle-content .ui.compact.table.segment td:nth-child(3):before { content: "Оценка"; }
    #dle-content .ui.compact.table.segment td:nth-child(4):before { content: "Загрузка"; }

    /* App-страница: список версий в столбик */
    #dle-content .ui.divided.selection.list > .item {
        flex-wrap: wrap;
    }
    .mod__flr {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        margin-top: 6px;
    }
}

@media (max-width: 420px) {
    #dle-content .ui.four.connected.items,
    #dle-content .ui.connected.items,
    #dle-content .ui.items {
        grid-template-columns: 1fr;
    }
}

/* ---------- RTL ---------- */
html[dir="rtl"] #dle-content .ui.inverted.black.block.header,
html[dir="rtl"] #dle-content h4.ui.inverted.black.block.header {
    padding: 0 14px 0 0 !important;
    border-left: 0 !important;
    border-right: 4px solid var(--rp-primary) !important;
}
html[dir="rtl"] #dle-content .ui.compact.table.segment td:first-child img,
html[dir="rtl"] #dle-content .ui.table td:first-child img { margin: 0 0 0 8px !important; }
html[dir="rtl"] .rp-download-current-badge { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .mod__flr { align-items: flex-start; }


/* ==========================================================================
   APP-СТРАНИЦА (страница программы, body.rp-page-app)
   Восстановлено после Softix-редизайна. Все правила изолированы под
   body.rp-page-app, чтобы не задеть главную и категории.
   homepage.css подключается ПОСЛЕ style.css — здесь финальное слово.
   ========================================================================== */

/* ---------- A1. Контейнер контента app-страницы ---------- */
body.rp-page-app #dle-content.rp-mirror-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}

/* Первый сегмент-обёртка: hero. Гасим inline min-height/border/фон.
   ВАЖНО: исходный DLE-контент НЕ закрывает <div class="rp-product-layout">,
   поэтому grid нельзя вешать на сам layout — в него «провалился» бы весь
   контент ниже. Решение: layout = display:contents (он «растворяется»),
   а двухколоночную сетку визуал+детали держит этот сегмент. */
body.rp-page-app #dle-content.rp-mirror-content > span > .ui.segment,
body.rp-page-app #dle-content.rp-mirror-content > .ui.segment {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.rp-page-app #dle-content.rp-mirror-content > span { display: block; }

/* ---------- A2. Хлебные крошки ---------- */
body.rp-page-app .ui.breadcrumb.small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin: 0 0 18px !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rp-muted);
    font-size: 13px;
    line-height: 1.5;
}

body.rp-page-app .ui.breadcrumb.small > span {
    display: inline-flex;
    align-items: center;
    gap: 2px 4px;
}

body.rp-page-app .ui.breadcrumb .section {
    display: inline-flex;
    align-items: center;
    color: var(--rp-muted);
    font-weight: 600;
}

body.rp-page-app .ui.breadcrumb a.section { color: var(--rp-muted); }
body.rp-page-app .ui.breadcrumb a.section:hover { color: var(--rp-primary); text-decoration: none; }
body.rp-page-app .ui.breadcrumb div.section { color: var(--rp-ink); font-weight: 700; }

/* Semantic-иконки нет — заменяем стрелку-разделитель на CSS-символ */
body.rp-page-app .ui.breadcrumb i.divider,
body.rp-page-app .ui.breadcrumb i.icon.divider {
    width: auto;
    height: auto;
    margin: 0 2px;
    font-size: 0;
}
body.rp-page-app .ui.breadcrumb i.divider:before {
    content: "\203A";
    font-size: 15px;
    font-weight: 400;
    color: #9aa6b8;
    line-height: 1;
}

/* ---------- A3. Верхний блок (rp-product-header) ---------- */
body.rp-page-app .rp-product-header {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin: 0 0 6px;
}

body.rp-page-app .rp-product-header__icon {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    padding: 12px;
    border: 1px solid var(--rp-line);
    border-radius: 18px;
    background: var(--rp-surface);
    object-fit: contain;
    box-shadow: var(--rp-shadow-sm);
}

body.rp-page-app .rp-product-header__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

body.rp-page-app .rp-product-header__title {
    margin: 0 !important;
    color: var(--rp-ink) !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -.015em;
}

body.rp-page-app .rp-product-lead {
    max-width: 720px;
    margin: 0 !important;
    color: var(--rp-muted) !important;
    font-size: 16px;
    line-height: 1.62;
}

/* Характеристики-чипы под заголовком */
body.rp-page-app .rp-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
}

body.rp-page-app .rp-product-meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: var(--rp-surface);
    color: var(--rp-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

body.rp-page-app .rp-product-meta b {
    color: var(--rp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Ссылка-якорь на скачивание */
body.rp-page-app .rp-product-header__subtitle {
    margin-top: 2px;
}

body.rp-page-app .rp-product-header__subtitle a[href="#download"],
body.rp-page-app .rp-product-header__subtitle a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--rp-primary);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(37,99,235,.22);
    transition: background .18s ease, transform .18s ease;
}

body.rp-page-app .rp-product-header__subtitle a:hover {
    background: var(--rp-primary-dark);
    transform: translateY(-1px);
    color: #fff !important;
}

/* ---------- A4. Раскладка: визуал + детали ----------
   rp-product-layout НЕ закрыт в исходном DLE-контенте — поэтому он
   объявлен display:contents («растворяется»), а две колонки делаем
   через float у визуальной панели. Контент ниже идёт обычным потоком. */
body.rp-page-app .rp-product-layout {
    display: contents;
}

/* Визуальная панель — карточка-подложка с preview/poster, узкая колонка слева */
body.rp-page-app .rp-product-visual-panel {
    float: left;
    width: 320px;
    box-sizing: border-box;
    margin: 26px 22px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1px solid var(--rp-line);
    border-radius: 14px;
    background: var(--rp-surface);
    box-shadow: var(--rp-shadow-sm);
}

body.rp-page-app .rp-product-mockup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

body.rp-page-app .rp-product-mockup__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 276px;
    border: 1px solid var(--rp-line-soft);
    border-radius: 14px;
    background: var(--rp-surface-2);
    overflow: hidden;
}

body.rp-page-app .rp-product-mockup__wrapper--preview {
    aspect-ratio: 16 / 10;
}

body.rp-page-app .rp-product-mockup__wrapper--icon {
    width: 168px;
    height: 168px;
    border-radius: 22px;
}

body.rp-page-app .rp-product-mockup__icon {
    width: 104px;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(15,23,42,.10));
}

body.rp-page-app .rp-product-mockup__preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Панель деталей — обтекает визуальную панель справа */
body.rp-page-app .rp-product-details-panel {
    overflow: hidden;
    margin-top: 26px;
    min-width: 0;
}

/* Виджет шаринга под таблицей характеристик */
body.rp-page-app .rp-product-share-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* ---------- A5. Таблица характеристик (#details_table) ---------- */
body.rp-page-app #details_table.ui.table,
body.rp-page-app #details_table {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--rp-line) !important;
    border-radius: 12px !important;
    background: var(--rp-surface) !important;
    box-shadow: var(--rp-shadow-sm);
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

body.rp-page-app #details_table tr { display: table-row; }

body.rp-page-app #details_table td {
    display: table-cell;
    padding: 11px 16px !important;
    border: 0 !important;
    border-top: 1px solid var(--rp-line-soft) !important;
    color: var(--rp-text);
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

body.rp-page-app #details_table tr:first-child td { border-top: 0 !important; }

body.rp-page-app #details_table td:first-child {
    width: 240px;
    color: var(--rp-muted);
    font-size: 13px;
    font-weight: 700;
}

body.rp-page-app #details_table td:last-child {
    color: var(--rp-ink);
    font-weight: 600;
}

/* Semantic-шрифта нет — пустые иконки в подписях скрываем,
   единообразно с тем, как .ui.divider гасится на остальных страницах */
body.rp-page-app #details_table td i.icon { display: none; }

/* Рейтинг внутри ячейки таблицы не должен ломать высоту строки */
body.rp-page-app #details_table .rating { display: flex; align-items: center; gap: 6px; }
body.rp-page-app #details_table .rating > span:not([class]) { display: none; }

/* ---------- A6. Заголовки секций (h2 ui inverted black block header) ----------
   clear:both — снимает обтекание визуальной панели, секции идут на всю ширину */
body.rp-page-app #dle-content h2.ui.inverted.black.block.header,
body.rp-page-app #dle-content .ui.inverted.black.block.header {
    display: block;
    clear: both;
    margin: 34px 0 14px !important;
    padding: 0 0 0 14px !important;
    border: 0 !important;
    border-left: 4px solid var(--rp-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rp-ink) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

/* ---------- A7. Таблицы загрузки (rp-download-table) ---------- */
body.rp-page-app .rp-download-table-wrap {
    margin: 14px 0 26px;
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    background: var(--rp-surface);
    box-shadow: var(--rp-shadow-sm);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.rp-page-app table.rp-download-table,
body.rp-page-app table.rp-download-table.ui.table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-collapse: collapse !important;
    table-layout: fixed;
}

body.rp-page-app .rp-download-table col.rp-download-col-version  { width: 30%; }
body.rp-page-app .rp-download-table col.rp-download-col-platform { width: 16%; }
body.rp-page-app .rp-download-table col.rp-download-col-language { width: 14%; }
body.rp-page-app .rp-download-table col.rp-download-col-size     { width: 12%; }
body.rp-page-app .rp-download-table col.rp-download-col-format   { width: 12%; }
body.rp-page-app .rp-download-table col.rp-download-col-action   { width: 16%; }

body.rp-page-app .rp-download-table thead th {
    padding: 12px 16px !important;
    background: var(--rp-surface-2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rp-line) !important;
    color: var(--rp-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

body.rp-page-app .rp-download-table tbody td {
    padding: 12px 16px !important;
    border: 0 !important;
    border-top: 1px solid var(--rp-line-soft) !important;
    color: var(--rp-text);
    font-size: 14px;
    line-height: 1.4;
    vertical-align: middle;
}

body.rp-page-app .rp-download-table tbody tr:first-child td { border-top: 0 !important; }
body.rp-page-app .rp-download-table tbody tr:hover td { background: var(--rp-surface-2); }

body.rp-page-app .rp-download-table td:first-child {
    color: var(--rp-ink);
    font-weight: 700;
}

body.rp-page-app .rp-download-table td:first-child img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    border-radius: 3px;
    vertical-align: middle;
}

body.rp-page-app .rp-download-table td:first-child span { vertical-align: middle; }

/* Бейдж-ссылка скачивания / статус */
body.rp-page-app .rp-file-reference,
body.rp-page-app span.ui.teal.basic.label.rp-file-reference {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: var(--rp-surface-2);
    color: var(--rp-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.rp-page-app a.rp-file-reference,
body.rp-page-app .rp-file-reference[href] {
    border: 0;
    background: var(--rp-primary);
    color: #fff;
    text-decoration: none;
}
body.rp-page-app a.rp-file-reference:hover { background: var(--rp-primary-dark); color: #fff; }

body.rp-page-app .rp-file-reference[data-download-status="unavailable"] {
    border-color: var(--rp-line);
    background: var(--rp-surface-2);
    color: var(--rp-muted);
}

/* Скрытый служебный ряд рекламного слота */
body.rp-page-app .rp-download-table tr#d_ad_slot { display: none !important; }

/* ---------- A8. Блок описания (up_tabs / sc_tab) ---------- */
body.rp-page-app .up_tabs {
    clear: both;
    margin: 28px 0 !important;
}

body.rp-page-app .up_tabs > div[style],
body.rp-page-app .up_tabs > div[style] > div[style] {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--rp-text) !important;
    font-size: 16px !important;
}

body.rp-page-app .sc_tab h3 {
    margin: 0 0 14px !important;
    color: var(--rp-ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

body.rp-page-app .sc_tab h4 {
    margin: 26px 0 10px !important;
    color: var(--rp-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

body.rp-page-app .sc_tab p {
    margin: 0 0 14px !important;
    color: var(--rp-text);
    font-size: 16px;
    line-height: 1.72;
}

body.rp-page-app .sc_tab b { color: var(--rp-ink); font-weight: 700; }
body.rp-page-app .sc_tab br + br { display: none; }

/* ---------- A9. Сегменты-блоки (down_block_mh + ih2) ---------- */
body.rp-page-app #dle-content .ui.segment.down_block_mh {
    clear: both;
    min-height: 0 !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.rp-page-app .ih2 {
    display: flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 0 0 0 14px;
    border-left: 4px solid var(--rp-primary);
    color: var(--rp-ink);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
}

/* Пустая Semantic-иконка в заголовке блока — скрыть */
body.rp-page-app .ih2 i.icon { display: none; }

/* ---------- A10. Ссылки "скачать для Windows" ---------- */
body.rp-page-app .rp-os-links-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.rp-page-app .rp-os-link-item a {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: var(--rp-surface);
    color: var(--rp-text) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body.rp-page-app .rp-os-link-item a:hover {
    background: var(--rp-primary-soft);
    border-color: #cbd5e1;
    color: var(--rp-primary) !important;
}

/* ---------- A11. Похожие программы (rp-similar-grid) ---------- */
body.rp-page-app .rp-similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

body.rp-page-app .rp-similar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--rp-line);
    border-radius: 10px;
    background: var(--rp-surface);
    box-shadow: var(--rp-shadow-sm);
    color: var(--rp-muted);
    font-size: 14px;
    font-weight: 600;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

body.rp-page-app .rp-similar-item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--rp-shadow);
    transform: translateY(-1px);
}

body.rp-page-app .rp-similar-item img {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    border-radius: 3px;
}

body.rp-page-app .rp-similar-item a {
    color: var(--rp-ink) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}
body.rp-page-app .rp-similar-item a:hover { color: var(--rp-primary) !important; }

/* ---------- A12. Нижняя плашка-примечание ---------- */
body.rp-page-app .rp-download-note {
    clear: both;
    margin: 30px 0 0;
    padding: 14px 18px;
    border: 1px solid #fde9c8;
    border-left: 4px solid var(--rp-amber);
    border-radius: 10px;
    background: #fffdf5;
    color: #78350f;
    font-size: 14px;
    line-height: 1.6;
}

body.rp-page-app .rp-download-note strong { color: #92400e; font-weight: 800; }

[data-theme="dark"] body.rp-page-app .rp-download-note {
    border-color: rgba(251,191,36,.28);
    background: rgba(251,191,36,.07);
    color: #f4d9a8;
}
[data-theme="dark"] body.rp-page-app .rp-download-note strong { color: #fbbf24; }

/* ---------- A13. Скрываем виджет шаринга-плейсхолдер если пуст ---------- */
body.rp-page-app .ya-share2:empty { display: none; }

/* ================================================================
   APP-СТРАНИЦА — RESPONSIVE
   ================================================================ */
@media (max-width: 880px) {
    /* Визуал больше не обтекается — становится отдельным блоком сверху */
    body.rp-page-app .rp-product-visual-panel {
        float: none;
        width: auto;
        margin: 22px 0 0;
        padding: 22px;
    }
    body.rp-page-app .rp-product-details-panel { margin-top: 18px; }
}

@media (max-width: 760px) {
    body.rp-page-app #dle-content.rp-mirror-content { padding: 22px 14px 48px; }

    body.rp-page-app .rp-product-header {
        flex-direction: column;
        gap: 16px;
    }
    body.rp-page-app .rp-product-header__icon { width: 80px; height: 80px; }
    body.rp-page-app .rp-product-header__title { font-size: 28px !important; }

    /* Таблица характеристик — карточная раскладка */
    body.rp-page-app #details_table,
    body.rp-page-app #details_table tbody,
    body.rp-page-app #details_table tr,
    body.rp-page-app #details_table td {
        display: block;
        width: 100% !important;
    }
    body.rp-page-app #details_table tr {
        padding: 10px 16px;
        border-top: 1px solid var(--rp-line-soft);
    }
    body.rp-page-app #details_table tr:first-child { border-top: 0; }
    body.rp-page-app #details_table td {
        padding: 2px 0 !important;
        border-top: 0 !important;
    }
    body.rp-page-app #details_table td:first-child { width: auto; }

    /* Таблицы загрузки — карточная раскладка */
    body.rp-page-app .rp-download-table-wrap { overflow: visible; }
    body.rp-page-app .rp-download-table,
    body.rp-page-app .rp-download-table tbody,
    body.rp-page-app .rp-download-table tr,
    body.rp-page-app .rp-download-table td {
        display: block;
        width: 100% !important;
    }
    body.rp-page-app .rp-download-table colgroup,
    body.rp-page-app .rp-download-table thead { display: none; }
    body.rp-page-app .rp-download-table tr {
        padding: 12px 16px;
        border-top: 1px solid var(--rp-line-soft);
    }
    body.rp-page-app .rp-download-table tbody tr:first-child { border-top: 0; }
    body.rp-page-app .rp-download-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 0 !important;
        border-top: 0 !important;
        text-align: right;
    }
    body.rp-page-app .rp-download-table td:before {
        color: var(--rp-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
        text-align: left;
    }
    body.rp-page-app .rp-download-table td:nth-child(1):before { content: "Версия"; }
    body.rp-page-app .rp-download-table td:nth-child(2):before { content: "Платформа"; }
    body.rp-page-app .rp-download-table td:nth-child(3):before { content: "Язык"; }
    body.rp-page-app .rp-download-table td:nth-child(4):before { content: "Размер"; }
    body.rp-page-app .rp-download-table td:nth-child(5):before { content: "Формат"; }
    body.rp-page-app .rp-download-table td:nth-child(6):before { content: "Загрузка"; }
    body.rp-page-app .rp-download-table td:first-child { font-weight: 700; }

    body.rp-page-app .rp-similar-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    body.rp-page-app .rp-product-header__title { font-size: 24px !important; }
    body.rp-page-app .rp-product-mockup__wrapper--icon { width: 140px; height: 140px; }
    body.rp-page-app .rp-product-mockup__icon { width: 88px; height: 88px; }
    body.rp-page-app .rp-product-header__subtitle a { width: 100%; justify-content: center; }
}

/* ---------- APP-СТРАНИЦА — RTL ---------- */
html[dir="rtl"] body.rp-page-app .rp-product-header { flex-direction: row; }
html[dir="rtl"] body.rp-page-app .rp-product-meta b { letter-spacing: 0; }
html[dir="rtl"] body.rp-page-app #dle-content h2.ui.inverted.black.block.header,
html[dir="rtl"] body.rp-page-app .ih2 {
    padding: 0 14px 0 0;
    border-left: 0;
    border-right: 4px solid var(--rp-primary);
}
html[dir="rtl"] body.rp-page-app .rp-download-table thead th { text-align: right; }
html[dir="rtl"] body.rp-page-app .rp-download-table td:first-child img { margin: 0 0 0 8px !important; }