@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   ONLAWYER THEME — «ON — ваш юрист онлайн»
   Дизайн-токены и компоненты. Единый файл для всего дизайна.
   ============================================================ */

:root {
    /* Цвета */
    --on-navy: #0A1F44;
    --on-navy-soft: #122B57;
    --on-ink: #1E293B;
    --on-slate: #64748B;
    --on-bg: #F8FAFC;
    --on-surface: #FFFFFF;
    --on-accent: #F59E0B;
    --on-accent-light: #FBBF24;
    --on-online: #10B981;
    --on-online-dark: #0E9F6E;
    --on-danger: #EF4444;
    --on-line: #E2E8F0;

    /* Радиусы */
    --on-radius-sm: 6px;
    --on-radius-md: 10px;
    --on-radius-lg: 14px;

    /* Тени */
    --on-shadow-sm: 0 1px 2px rgba(10, 31, 68, .06);
    --on-shadow-md: 0 4px 12px rgba(10, 31, 68, .08);
    --on-shadow-lg: 0 12px 32px rgba(10, 31, 68, .14);

    /* Отступы */
    --on-space-1: 4px;
    --on-space-2: 8px;
    --on-space-3: 12px;
    --on-space-4: 16px;
    --on-space-5: 24px;
    --on-space-6: 32px;
    --on-space-7: 48px;
    --on-space-8: 64px;

    /* Шрифты */
    --on-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --on-font-title: 'Lora', Georgia, 'Times New Roman', serif;
    --on-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ============================================================
   БАЗА
   ============================================================ */

body {
    font-family: var(--on-font-ui);
    color: var(--on-ink);
    background-color: var(--on-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--on-font-title);
    color: var(--on-navy);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--on-navy);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--on-accent);
    text-decoration: none;
}

::selection {
    background: rgba(245, 158, 11, .25);
}

:focus-visible {
    outline: 2px solid var(--on-accent);
    outline-offset: 2px;
}

/* ============================================================
   ТОПБАР «ON»
   ============================================================ */

.on-topbar {
    background: var(--on-navy);
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.4;
}

.on-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    gap: var(--on-space-4);
}

.on-topbar a {
    color: rgba(255, 255, 255, .85);
}

.on-topbar a:hover {
    color: var(--on-accent-light);
}

.on-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-2);
    color: rgba(255, 255, 255, .85);
}

.on-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--on-online);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .25);
    flex: none;
}

@media (max-width: 767.98px) {
    .on-topbar .container {
        justify-content: center;
        text-align: center;
    }
    .on-topbar-right {
        display: none;
    }
}

/* ============================================================
   ШАПКА
   ============================================================ */

.on-header {
    background: var(--on-surface);
    border-bottom: 1px solid var(--on-line);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--on-shadow-sm);
}

.on-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--on-space-4);
    min-height: 68px;
}

.on-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-3);
    font-family: var(--on-font-ui);
    font-weight: 700;
    font-size: 22px;
    color: var(--on-navy);
    flex: none;
}

.on-logo:hover {
    color: var(--on-navy);
}

.on-logo .on-logo-on {
    color: var(--on-accent);
}

.on-logo-tumbler {
    width: 34px;
    height: 34px;
    flex: none;
}

.on-nav {
    display: flex;
    align-items: center;
    gap: var(--on-space-1);
}

.on-nav-item {
    display: inline-flex;
    align-items: center;
    padding: var(--on-space-2) var(--on-space-3);
    font-weight: 500;
    font-size: 15px;
    color: var(--on-ink);
    border-radius: var(--on-radius-sm);
    transition: background .15s ease, color .15s ease;
}

.on-nav-item:hover {
    color: var(--on-navy);
    background: var(--on-bg);
}

.on-nav-item.active {
    color: var(--on-navy);
    background: rgba(245, 158, 11, .12);
}

.on-nav-item.active::after {
    content: "ON";
    margin-left: var(--on-space-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--on-accent);
}

.on-nav-more .dropdown-menu {
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    box-shadow: var(--on-shadow-md);
    padding: var(--on-space-2);
    min-width: 220px;
}

.on-nav-more .dropdown-item {
    border-radius: var(--on-radius-sm);
    padding: var(--on-space-2) var(--on-space-3);
    font-size: 14px;
    font-weight: 500;
    color: var(--on-ink);
}

.on-nav-more .dropdown-item:hover {
    background: var(--on-bg);
    color: var(--on-navy);
}

.on-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-sm);
    padding: var(--on-space-2) var(--on-space-3);
    color: var(--on-navy);
    font-size: 14px;
    font-weight: 600;
}

.on-nav-toggle:hover {
    background: var(--on-bg);
}

@media (max-width: 991.98px) {
    .on-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--on-space-2);
    }

    .on-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--on-navy);
        padding: var(--on-space-4);
        gap: var(--on-space-2);
        box-shadow: var(--on-shadow-lg);
        border-radius: 0 0 var(--on-radius-lg) var(--on-radius-lg);
    }

    .on-nav.open {
        display: flex;
    }

    .on-nav-item {
        color: rgba(255, 255, 255, .9);
        font-size: 16px;
    }

    .on-nav-item:hover {
        color: #fff;
        background: var(--on-navy-soft);
    }

    .on-nav-item.active {
        color: var(--on-accent-light);
        background: rgba(255, 255, 255, .06);
    }

    .on-nav-more .dropdown-menu {
        background: var(--on-navy-soft);
        border-color: rgba(255, 255, 255, .1);
    }

    .on-nav-more .dropdown-item {
        color: rgba(255, 255, 255, .9);
    }

    .on-nav-more .dropdown-item:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }
}

/* ============================================================
   КНОПКИ
   ============================================================ */

.on-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--on-space-2);
    font-family: var(--on-font-ui);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 11px 24px;
    border-radius: var(--on-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.on-btn-primary {
    background: var(--on-accent);
    color: var(--on-navy);
    border-color: var(--on-accent);
}

.on-btn-primary:hover {
    background: var(--on-accent-light);
    border-color: var(--on-accent-light);
    color: var(--on-navy);
    box-shadow: var(--on-shadow-md);
}

.on-btn-navy {
    background: var(--on-navy);
    color: #fff;
    border-color: var(--on-navy);
}

.on-btn-navy:hover {
    background: var(--on-navy-soft);
    border-color: var(--on-navy-soft);
    color: #fff;
}

.on-btn-outline {
    background: transparent;
    color: var(--on-ink);
    border-color: var(--on-line);
}

.on-btn-outline:hover {
    background: var(--on-bg);
    color: var(--on-navy);
    border-color: var(--on-slate);
}

.on-btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.on-btn-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}

.on-btn-lg {
    padding: 14px 32px;
    font-size: 16px;
    border-radius: var(--on-radius-md);
}

.on-btn-sm {
    padding: 7px 14px;
    font-size: 13px;
}

/* ============================================================
   БЕЙДЖИ И СТАТУСЫ
   ============================================================ */

.on-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-2);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.on-badge-online {
    background: rgba(16, 185, 129, .14);
    color: var(--on-online-dark);
}

.on-badge-online .on-dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
}

.on-badge-muted {
    background: var(--on-bg);
    color: var(--on-slate);
    border: 1px solid var(--on-line);
}

.on-badge-danger {
    background: rgba(239, 68, 68, .12);
    color: var(--on-danger);
}

.on-badge-accent {
    background: rgba(245, 158, 11, .14);
    color: #B45309;
}

.on-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--on-space-2);
    justify-content: center;
}

.on-hero-badges .on-badge {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    backdrop-filter: blur(4px);
}

.on-hero-badges .on-badge .on-dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
}

/* ============================================================
   HERO
   ============================================================ */

.on-hero {
    position: relative;
    background: var(--on-navy);
    color: #fff;
    overflow: hidden;
    padding: var(--on-space-8) 0;
}

.on-hero::before {
    /* Декоративные «контакты выключателя» */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 160px,
            rgba(255, 255, 255, .035) 160px 164px),
        repeating-linear-gradient(0deg,
            transparent 0 90px,
            rgba(255, 255, 255, .025) 90px 93px);
    pointer-events: none;
}

.on-hero .container {
    position: relative;
    z-index: 1;
}

.on-hero h1,
.on-hero .on-hero-title {
    color: #fff;
    font-family: var(--on-font-title);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: var(--on-space-4);
}

.on-hero .on-hero-on {
    color: var(--on-accent);
}

.on-hero-subtitle {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
    margin-bottom: var(--on-space-6);
    max-width: 560px;
}

.on-hero-tumbler {
    max-width: 360px;
    width: 100%;
    height: auto;
    opacity: .95;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35));
}

/* Поиск */
.on-search {
    display: flex;
    gap: var(--on-space-3);
    background: var(--on-surface);
    border-radius: var(--on-radius-lg);
    padding: var(--on-space-2);
    box-shadow: var(--on-shadow-lg);
    max-width: 620px;
}

.on-search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 12px;
    font-size: 15px;
    font-family: var(--on-font-ui);
    color: var(--on-ink);
    background: transparent;
    width: 100%;
}

.on-search input::placeholder {
    color: var(--on-slate);
}

@media (max-width: 575.98px) {
    .on-search {
        flex-direction: column;
    }
    .on-search .on-btn {
        width: 100%;
    }
}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */

.on-card {
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-lg);
    box-shadow: var(--on-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}

.on-card:hover {
    box-shadow: var(--on-shadow-md);
}

/* Контейнеры-обёртки внутри карточки (заголовок + таблица/сетка) */
.on-card > .d-flex {
    padding: var(--on-space-5) var(--on-space-5) var(--on-space-4);
}

.on-card > .table-responsive {
    padding: 0 var(--on-space-5) var(--on-space-5);
}

.on-card > .row {
    padding: 0 var(--on-space-5) var(--on-space-5);
    margin: 0;
}

.on-card-hover:hover {
    transform: translateY(-2px);
}

.on-section-card {
    padding: var(--on-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--on-space-4);
    height: 100%;
}

.on-section-card-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, .12);
    border-radius: var(--on-radius-md);
    color: var(--on-accent);
}

.on-section-card-icon svg {
    width: 30px;
    height: 30px;
}

.on-section-card h3 {
    margin-bottom: 0;
    font-family: var(--on-font-title);
    font-size: 1.3rem;
    color: var(--on-navy);
}

.on-section-card .on-card-desc {
    color: var(--on-slate);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.on-section-card .on-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--on-space-2);
    padding-top: var(--on-space-4);
    border-top: 1px solid var(--on-line);
    font-size: 13px;
    color: var(--on-slate);
}

.on-section-card .on-card-meta strong {
    color: var(--on-navy);
    font-weight: 600;
}

.on-section-card .on-card-meta .on-badge {
    flex: none;
}

/* ============================================================
   СЕТКА РЕГИОНОВ
   ============================================================ */

.on-region-grid {
    columns: 3;
    column-gap: var(--on-space-6);
}

.on-region-link {
    display: block;
    break-inside: avoid;
    padding: var(--on-space-3) var(--on-space-1);
    border-bottom: 1px solid var(--on-line);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--on-ink);
    transition: color .15s ease, padding-left .15s ease;
}

.on-region-link:hover {
    color: var(--on-accent);
    padding-left: var(--on-space-2);
    border-bottom-color: var(--on-accent);
}

@media (max-width: 991.98px) {
    .on-region-grid {
        columns: 2;
    }
}

@media (max-width: 575.98px) {
    .on-region-grid {
        columns: 1;
    }
}

/* ============================================================
   ТАБЛИЦЫ ДАННЫХ РЕЕСТРОВ
   ============================================================ */

.on-data-table {
    width: 100%;
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    overflow: hidden;
    box-shadow: var(--on-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.on-data-table thead th {
    background: var(--on-navy);
    color: #fff;
    font-family: var(--on-font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
}

.on-data-table thead th.text-center {
    text-align: center;
}

.on-data-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--on-line);
    font-size: 14.5px;
    vertical-align: top;
}

.on-data-table tbody tr:first-child td {
    border-top: none;
}

.on-data-table tbody tr:hover {
    background: var(--on-bg);
}

.on-data-table td.mono {
    font-family: var(--on-font-mono);
    font-size: 13px;
    color: var(--on-slate);
}

.on-data-table a {
    color: var(--on-navy);
    font-weight: 500;
}

.on-data-table a:hover {
    color: var(--on-accent);
}

.on-table {
    width: 100%;
    background: var(--on-surface);
    border-radius: var(--on-radius-md);
    border: 1px solid var(--on-line);
    overflow: hidden;
    box-shadow: var(--on-shadow-sm);
}

.on-table tr + tr td,
.on-table tr + tr th {
    border-top: 1px solid var(--on-line);
}

.on-table td,
.on-table th {
    padding: 12px 16px;
    vertical-align: top;
    font-size: 14.5px;
}

.on-table-fixed td:first-child {
    width: 38%;
    color: var(--on-slate);
    background: var(--on-bg);
    font-weight: 500;
}

.on-table thead th {
    background: var(--on-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.on-table thead + tbody td:first-child {
    width: auto;
    color: inherit;
    background: transparent;
    font-weight: inherit;
}

.on-table th {
    font-weight: 600;
    color: var(--on-navy);
    background: var(--on-bg);
}

.on-table .mono {
    font-family: var(--on-font-mono);
    font-size: 13px;
}

/* ============================================================
   ЯКОРНАЯ НАВИГАЦИЯ
   ============================================================ */

.on-anchor-nav {
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    box-shadow: var(--on-shadow-sm);
    padding: var(--on-space-5);
}

.on-anchor-nav h2,
.on-anchor-nav h3 {
    font-size: 1.05rem;
    text-align: center;
    margin-bottom: var(--on-space-4);
}

.on-anchor-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.on-anchor-nav li {
    border-bottom: 1px solid var(--on-line);
}

.on-anchor-nav li:last-child {
    border-bottom: none;
}

.on-anchor-nav a {
    display: flex;
    align-items: center;
    gap: var(--on-space-3);
    padding: 10px 12px;
    font-weight: 500;
    font-size: 14px;
    color: var(--on-ink);
    transition: color .15s ease, background .15s ease;
}

.on-anchor-nav a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--on-accent);
    opacity: .5;
    transition: opacity .15s ease;
    flex: none;
}

.on-anchor-nav a:hover {
    color: var(--on-navy);
    background: var(--on-bg);
}

.on-anchor-nav a:hover::before {
    opacity: 1;
}

/* ============================================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================================ */

.on-breadcrumbs {
    padding: var(--on-space-4) 0;
}

.on-breadcrumbs .breadcrumb {
    margin: 0;
    font-size: 13.5px;
}

.on-breadcrumbs .breadcrumb-item a {
    color: var(--on-slate);
}

.on-breadcrumbs .breadcrumb-item a:hover {
    color: var(--on-accent);
}

.on-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: var(--on-line);
}

.on-breadcrumbs .breadcrumb-item.active {
    color: var(--on-ink);
}

/* ============================================================
   КАРТОЧКИ ЖУРНАЛА
   ============================================================ */

.on-article-card {
    display: flex;
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-lg);
    box-shadow: var(--on-shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.on-article-card:hover {
    box-shadow: var(--on-shadow-md);
    transform: translateY(-2px);
}

.on-article-card .on-article-img {
    flex: 0 0 320px;
    max-width: 320px;
    background: var(--on-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.on-article-card .on-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.on-article-body {
    padding: var(--on-space-5) var(--on-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--on-space-3);
}

.on-article-body .on-article-title {
    font-family: var(--on-font-title);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--on-navy);
    line-height: 1.4;
}

.on-article-body .on-article-title:hover {
    color: var(--on-accent);
}

.on-article-body .on-article-desc {
    color: var(--on-slate);
    font-size: 14.5px;
    line-height: 1.6;
    flex: 1;
}

.on-article-body .on-article-meta {
    font-size: 13px;
    color: var(--on-slate);
}

@media (max-width: 767.98px) {
    .on-article-card {
        flex-direction: column;
    }
    .on-article-card .on-article-img {
        flex-basis: auto;
        max-width: none;
        min-height: 180px;
    }
}

/* ============================================================
   СТАТЬЯ / ДОКУМЕНТ
   ============================================================ */

.on-article {
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-lg);
    box-shadow: var(--on-shadow-sm);
    padding: var(--on-space-6);
}

.on-article h1, .on-article h2, .on-article h3, .on-article h4 {
    color: var(--on-navy);
}

.on-article p, .on-article li {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--on-ink);
}

.on-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--on-radius-md);
}

.on-article table {
    width: 100%;
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    overflow: hidden;
}

.on-article table td, .on-article table th {
    border: none;
    border-bottom: 1px solid var(--on-line);
    padding: 10px 14px;
    font-size: 14.5px;
}

.on-article table tr:last-child td {
    border-bottom: none;
}

.on-toc {
    background: var(--on-bg);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    padding: var(--on-space-5);
}

.on-toc h4 {
    margin-bottom: var(--on-space-3);
}

.on-toc ul {
    margin: 0;
    padding-left: var(--on-space-4);
}

.on-toc li {
    margin-bottom: 6px;
    font-size: 14px;
}

/* ============================================================
   ПАГИНАЦИЯ
   ============================================================ */

.on-pagination {
    display: flex;
    justify-content: center;
    gap: var(--on-space-2);
    list-style: none;
    margin: var(--on-space-5) 0 0;
    padding: 0;
    flex-wrap: wrap;
}

.on-pagination li a,
.on-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--on-space-3);
    border: 1px solid var(--on-line);
    background: var(--on-surface);
    color: var(--on-ink);
    border-radius: var(--on-radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: all .15s ease;
}

.on-pagination li a:hover {
    border-color: var(--on-navy);
    color: var(--on-navy);
    background: var(--on-bg);
}

.on-pagination li.active span {
    background: var(--on-navy);
    border-color: var(--on-navy);
    color: #fff;
}

.on-pagination li.disabled span {
    opacity: .45;
    pointer-events: none;
}

/* Bootstrap-пагинация (LinkPager) в стиле ON */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--on-space-2);
    flex-wrap: wrap;
    margin: var(--on-space-5) 0 0;
}

.pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--on-space-3);
    border: 1px solid var(--on-line);
    background: var(--on-surface);
    color: var(--on-ink);
    border-radius: var(--on-radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: all .15s ease;
}

.pagination .page-item .page-link:hover {
    border-color: var(--on-navy);
    color: var(--on-navy);
    background: var(--on-bg);
    z-index: 0;
}

.pagination .page-item.active .page-link {
    background: var(--on-navy);
    border-color: var(--on-navy);
    color: #fff;
    z-index: 0;
}

.pagination .page-item.disabled .page-link {
    opacity: .45;
    pointer-events: none;
    background: var(--on-surface);
}

/* ============================================================
   ФОРМЫ
   ============================================================ */

.on-form-control,
.on-article textarea,
.on-article label textarea,
.on-table textarea,
textarea.form-control {
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--on-font-mono);
    color: var(--on-ink);
    background: var(--on-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

.on-form-control:focus,
.on-article textarea:focus,
.on-table textarea:focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--on-accent);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
    background: #fff;
}

/* ============================================================
   ФУТЕР
   ============================================================ */

.on-footer {
    background: var(--on-navy);
    color: rgba(255, 255, 255, .72);
    margin-top: var(--on-space-8);
}

.on-footer h5, .on-footer h6 {
    color: #fff;
    font-family: var(--on-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--on-space-4);
}

.on-footer a {
    color: rgba(255, 255, 255, .72);
}

.on-footer a:hover {
    color: var(--on-accent-light);
}

.on-footer .nav-link {
    padding: 4px 0;
    color: rgba(255, 255, 255, .72);
}

.on-footer .nav-link:hover {
    color: var(--on-accent-light);
}

.on-footer-top {
    padding: var(--on-space-7) 0 0;
}

.on-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: var(--on-space-5) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--on-space-4);
}

.on-footer-copyright {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .6);
}

.on-footer-social {
    display: flex;
    gap: var(--on-space-3);
}

.on-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--on-radius-sm);
    background: rgba(255, 255, 255, .08);
    transition: background .15s ease, transform .15s ease;
}

.on-footer-social a:hover {
    background: var(--on-accent);
    transform: translateY(-2px);
}

.on-footer-social img {
    width: 18px;
    height: 18px;
}

.on-footer-note {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-2);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

/* ============================================================
   СЕКЦИИ И ЗАГОЛОВКИ
   ============================================================ */

.on-section {
    padding: var(--on-space-7) 0;
}

.on-section-title {
    text-align: center;
    font-family: var(--on-font-title);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--on-navy);
    margin-bottom: var(--on-space-2);
}

.on-section-subtitle {
    text-align: center;
    color: var(--on-slate);
    font-size: 15px;
    max-width: 640px;
    margin: 0 auto var(--on-space-6);
    line-height: 1.6;
}

.on-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--on-space-2);
    margin: var(--on-space-2) 0 var(--on-space-5);
}

/* «Контакты выключателя» — декоративный разделитель */
.on-divider .on-divider-contact {
    width: 64px;
    height: 2px;
    background: var(--on-accent);
    position: relative;
}

.on-divider .on-divider-contact::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--on-accent);
}

/* ============================================================
   ФЛЕШ-СООБЩЕНИЯ
   ============================================================ */

.on-alert {
    border-radius: var(--on-radius-md);
    border: 1px solid;
    padding: var(--on-space-4) var(--on-space-5);
    margin-bottom: var(--on-space-4);
    font-size: 14.5px;
}

.on-alert-success {
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .3);
    color: var(--on-online-dark);
}

.on-alert-danger {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
    color: var(--on-danger);
}

/* ============================================================
   СТРАНИЦА ОШИБКИ
   ============================================================ */

.on-error-page {
    text-align: center;
    padding: var(--on-space-8) 0;
}

.on-error-page .on-error-code {
    font-family: var(--on-font-title);
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 600;
    color: var(--on-navy);
    line-height: 1;
}

.on-error-tumbler {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-3);
    background: var(--on-navy);
    color: #fff;
    border-radius: var(--on-radius-lg);
    padding: var(--on-space-5) var(--on-space-6);
    margin-bottom: var(--on-space-5);
}

.on-error-tumbler svg {
    width: 40px;
    height: 40px;
}

.on-error-tumbler span {
    font-family: var(--on-font-ui);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .04em;
}

.on-error-tumbler .on-error-on {
    color: var(--on-accent);
}

/* ============================================================
   БЛОК ШЕРИНГА
   ============================================================ */

.on-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--on-space-3);
    margin: var(--on-space-4) 0;
}

.on-share .ya-share2 {
    display: inline-flex !important;
}

/* ============================================================
   СЛУЖЕБНОЕ: НАВИГАЦИЯ ПО СТРАНИЦЕ (СПИСКИ СТРАНИЦ С ДАННЫМИ)
   ============================================================ */

.portfolio-item {
    padding: var(--on-space-2) 0;
}

.portfolio-item a {
    font-weight: 500;
    font-size: 14.5px;
    color: var(--on-ink);
}

.portfolio-item a:hover {
    color: var(--on-accent);
}

/* ============================================================
   ПРОЧЕЕ / КОМПАТИБИЛЬНОСТЬ
   ============================================================ */

.on-page-title {
    margin-bottom: var(--on-space-4);
}

.on-page-desc {
    color: var(--on-slate);
    line-height: 1.6;
    max-width: 720px;
}

.on-mb-0 { margin-bottom: 0; }
.on-mt-2 { margin-top: var(--on-space-2); }
.on-mt-4 { margin-top: var(--on-space-4); }
.on-mt-5 { margin-top: var(--on-space-5); }
.on-mt-6 { margin-top: var(--on-space-6); }
.on-mb-5 { margin-bottom: var(--on-space-5); }

.on-text-center { text-align: center; }
.on-text-slate { color: var(--on-slate); }

/* Сброс bootstrap-стилей карточек, используемых в журнале */
.card {
    border: none;
    background: transparent;
}

/* ============================================================
   НАДЗАГОЛОВКИ И ЗАГОЛОВОЧНЫЕ БЛОКИ СТРАНИЦ
   ============================================================ */

.on-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-2);
    font-family: var(--on-font-ui);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--on-accent);
    margin-bottom: var(--on-space-3);
}

.on-eyebrow-light {
    color: var(--on-accent-light);
}

.on-page-header {
    background: var(--on-surface);
    border-bottom: 1px solid var(--on-line);
    padding: var(--on-space-7) 0;
}

.on-page-header h1 {
    font-family: var(--on-font-title);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    color: var(--on-navy);
    margin-bottom: var(--on-space-3);
}

.on-page-lead {
    font-size: 1.05rem;
    color: var(--on-slate);
    line-height: 1.65;
    max-width: 640px;
    margin: 0;
}

/* ============================================================
   HERO: КОМПАКТНЫЙ, ОШИБКИ, ИСТОЧНИКИ, КНОПКИ
   ============================================================ */

.on-hero-compact {
    padding: var(--on-space-6) 0;
    background: linear-gradient(135deg, var(--on-navy) 0%, var(--on-navy-soft) 50%, var(--on-navy) 100%);
}

.on-hero-compact::before {
    /* Едва заметный тёмный градиент вместо декоративной сетки */
    background: radial-gradient(120% 120% at 85% 15%, rgba(255, 255, 255, .05) 0%, transparent 55%),
                linear-gradient(135deg, rgba(255, 255, 255, .02) 0%, transparent 50%);
    opacity: .8;
}

.on-hero-compact h1 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: var(--on-space-3);
}

.on-hero-compact .on-hero-subtitle {
    margin-bottom: 0;
    font-size: 1rem;
}

.on-hero-error {
    display: flex;
    align-items: center;
    min-height: 320px;
}

.on-hero-source {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}

.on-hero-source p {
    margin-bottom: var(--on-space-1);
}

.on-hero-link {
    color: var(--on-accent-light);
    border-bottom: 1px solid rgba(245, 158, 11, .4);
}

.on-hero-link:hover {
    color: #fff;
    border-bottom-color: var(--on-accent);
}

.on-btn-light {
    background: #fff;
    color: var(--on-navy);
    border-color: #fff;
}

.on-btn-light:hover {
    background: var(--on-accent-light);
    border-color: var(--on-accent-light);
    color: var(--on-navy);
    box-shadow: var(--on-shadow-md);
}

.on-link-strong {
    color: var(--on-navy);
    font-weight: 600;
    border-bottom: 1px solid rgba(10, 31, 68, .25);
}

.on-link-strong:hover {
    color: var(--on-accent);
    border-bottom-color: var(--on-accent);
}

/* ============================================================
   КАРТОЧКА СТАТИСТИКИ (САЙДБАР ПЕРСОН)
   ============================================================ */

.on-card-stat {
    padding: var(--on-space-5);
}

.on-card-stat .stat-list {
    display: flex;
    flex-direction: column;
    gap: var(--on-space-4);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--on-space-1);
}

.stat-key {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--on-slate);
}

.stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--on-navy);
    line-height: 1.45;
    word-break: break-word;
}

.stat-empty {
    font-size: 14.5px;
    color: var(--on-slate);
    line-height: 1.65;
}

.stat-empty p {
    margin: 0;
}

/* ============================================================
   ЯКОРНАЯ НАВИГАЦИЯ ПО СТРАНИЦЕ (ГОРИЗОНТАЛЬНАЯ)
   ============================================================ */

.on-anchors {
    padding: var(--on-space-4) var(--on-space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--on-space-1);
}

.on-anchor {
    display: inline-flex;
    align-items: center;
    padding: var(--on-space-2) var(--on-space-3);
    font-weight: 500;
    font-size: 14px;
    color: var(--on-ink);
    border-radius: var(--on-radius-sm);
    transition: background .15s ease, color .15s ease;
}

.on-anchor:hover {
    background: var(--on-bg);
    color: var(--on-navy);
}

.on-anchor::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--on-accent);
    opacity: .4;
    margin-right: var(--on-space-2);
}

.on-anchor:hover::before {
    opacity: 1;
}

/* ============================================================
   СПИСОК ПЕРСОН (СУДЬИ И ДР.)
   ============================================================ */

.on-list-item {
    display: flex;
    align-items: center;
    gap: var(--on-space-3);
    padding: var(--on-space-3) var(--on-space-4);
    background: var(--on-surface);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 56px;
}

.on-list-item:hover {
    border-color: var(--on-accent);
    box-shadow: var(--on-shadow-md);
}

.on-list-item-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--on-radius-sm);
    background: rgba(245, 158, 11, .12);
    color: var(--on-accent);
    flex: none;
}

.on-list-item-title {
    font-weight: 500;
    font-size: 15px;
    color: var(--on-ink);
}

.on-list-item:hover .on-list-item-title {
    color: var(--on-navy);
}

/* ============================================================
   ЖУРНАЛ — СПИСОК ПУБЛИКАЦИЙ
   ============================================================ */

.on-entry {
    margin-bottom: var(--on-space-5);
    padding: var(--on-space-5);
}

.on-article-thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--on-radius-md);
    background: var(--on-bg);
}

.on-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.on-article-thumb:hover img {
    transform: scale(1.02);
}

.on-article-title {
    font-family: var(--on-font-title);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--on-navy);
    line-height: 1.4;
    margin-bottom: var(--on-space-2);
}

.on-article-title a {
    color: var(--on-navy);
}

.on-article-title a:hover {
    color: var(--on-accent);
}

.on-article-excerpt {
    color: var(--on-slate) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: var(--on-space-3) !important;
}

.on-article-date {
    display: inline-flex;
    align-items: center;
    gap: var(--on-space-2);
    font-size: 13px;
    color: var(--on-slate);
    margin-bottom: var(--on-space-3);
}

/* ============================================================
   НАВИГАЦИЯ ПО ПУБЛИКАЦИЯМ (ПРЕД / СЛЕД)
   ============================================================ */

.on-card-nav {
    padding: var(--on-space-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--on-space-2);
}

.on-card-nav-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--on-slate);
}

.on-card-nav-title {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--on-navy);
    line-height: 1.5;
}

.on-card-nav-title:hover {
    color: var(--on-accent);
}

/* ============================================================
   СТРАНИЦА ОШИБКИ — ШАГИ
   ============================================================ */

.on-feature-on {
    text-align: center;
    padding: var(--on-space-5);
    border: 1px solid var(--on-line);
    border-radius: var(--on-radius-lg);
    background: var(--on-bg);
    height: 100%;
}

.on-feature-on-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--on-navy);
    color: #fff;
    font-family: var(--on-font-ui);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: var(--on-space-3);
}

.on-feature-on-title {
    font-family: var(--on-font-title);
    font-size: 1.05rem;
    color: var(--on-navy);
    margin-bottom: var(--on-space-2);
}

.on-feature-on-text {
    font-size: 14px;
    color: var(--on-slate);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   ТИПОГРАФИКА ПРОЗЫ
   ============================================================ */

.on-prose {
    font-size: 16px;
    line-height: 1.8;
    color: var(--on-ink);
}

.on-prose p {
    margin-bottom: var(--on-space-4);
}

.on-prose h2 {
    font-size: 1.4rem;
    margin-top: var(--on-space-6);
    margin-bottom: var(--on-space-3);
}

.on-prose h3 {
    font-size: 1.2rem;
    margin-top: var(--on-space-5);
    margin-bottom: var(--on-space-2);
}

.on-prose ul,
.on-prose ol {
    margin-bottom: var(--on-space-4);
    padding-left: var(--on-space-5);
}

.on-prose li {
    margin-bottom: var(--on-space-1);
}

.on-prose a {
    color: var(--on-navy);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(245, 158, 11, .5);
    text-underline-offset: 3px;
}

.on-prose a:hover {
    color: var(--on-accent);
}

.on-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--on-radius-md);
}

.on-prose table {
    width: 100%;
    margin-bottom: var(--on-space-4);
}

.on-prose blockquote {
    border-left: 3px solid var(--on-accent);
    padding-left: var(--on-space-4);
    color: var(--on-slate);
    font-style: italic;
    margin: var(--on-space-4) 0;
}

.on-prose-lg {
    font-size: 16.5px;
}

.on-toc-title {
    text-align: left;
    font-size: 1.1rem;
    margin-bottom: var(--on-space-2);
}

.on-toc-links {
    font-size: 14px;
}

.on-toc-links a {
    color: var(--on-ink);
    display: inline-block;
    padding: 2px 0;
}

.on-toc-links a:hover {
    color: var(--on-accent);
}

/* ============================================================
   ШЕРИНГ НА ТЁМНОМ ФОНЕ
   ============================================================ */

.on-share-light {
    justify-content: flex-start;
}

.on-share-light .on-share-label {
    color: rgba(255, 255, 255, .72);
}