/*
 * Тема доски WP Agent поверх Filament (макет «доска на новой дизайн-системе»).
 * Файл обычный, без сборки: Filament кладёт свои стили в cascade layers,
 * поэтому правила отсюда перекрывают их без !important.
 */

:root {
    --ks-surface: #ffffff;
    --ks-raised: #ffffff;
    --ks-side: #fafafa;
    --ks-card: #fbfbfc;
    --ks-soft: #f4f4f5;
    --ks-hover: #eeeef0;
    --ks-line: #e4e4e7;
    --ks-ink: #1c1c1e;
    --ks-mute: #55585e;
    --ks-faint: #6b6e75;
    --ks-blue: #0b57d0;
    --ks-blue-hover: #0842a0;
    --ks-blue-soft: #eaf1fd;
    --ks-accent: #0b57d0;
    --ks-on-accent: #ffffff;
    --ks-ok: #1d7a48;
    --ks-ok-soft: #e5f4eb;
    /* кнопки публикации («Опубликовать», «Применить», «Страница на сайте»): сплошной зелёный, белый текст */
    --ks-go: #188038;
    --ks-go-hover: #137333;
    --ks-warn: #9a5b00;
    --ks-warn-soft: #fff3dc;
    --ks-bad: #b42318;
    --ks-bad-soft: #fdecea;
    --ks-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.dark {
    --ks-surface: #141518;
    --ks-raised: #34363c;
    --ks-side: #1a1b1f;
    --ks-card: #1a1b1f;
    --ks-soft: #24262b;
    --ks-hover: #2a2c31;
    --ks-line: #2c2e33;
    --ks-ink: #ecedef;
    --ks-mute: #a7aab1;
    --ks-faint: #8e9199;
    --ks-blue: #8ab4ff;
    --ks-blue-hover: #b3ceff;
    --ks-blue-soft: #1c2a45;
    --ks-accent: #3b6fe0;
    --ks-ok: #5fcb8e;
    --ks-ok-soft: #16301f;
    --ks-go: #1e8e3e;
    --ks-go-hover: #26a14b;
    --ks-warn: #e8b04b;
    --ks-warn-soft: #33280f;
    --ks-bad: #ff8a80;
    --ks-bad-soft: #3a1a18;
    --ks-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- основа ---------- */

.fi-body {
    background: var(--ks-surface);
    color: var(--ks-ink);
}

.fi-main {
    padding-inline: 3rem;
}

@media (max-width: 1023px) {
    .fi-main {
        padding-inline: 1rem;
    }
}

code,
kbd,
.ks-mono {
    font-family: var(--mono-font-family, 'IBM Plex Mono'), ui-monospace, monospace;
}

/* ---------- логотип ---------- */

.ks-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.ks-brand-mark {
    width: 1.875rem;
    height: 1.875rem;
    flex-shrink: 0;
}

.ks-brand-mark-bg {
    fill: var(--ks-accent);
}

/* вход: знак крупнее */
.fi-simple-header .ks-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
}

.fi-simple-header .ks-brand-name {
    font-size: 1.25rem;
}

.ks-brand-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ks-ink);
    white-space: nowrap;
}

/* ---------- боковая панель ---------- */

.fi-sidebar {
    background: var(--ks-side);
    border-inline-end: 1px solid var(--ks-line);
}

.fi-sidebar-header {
    height: 4rem;
    background: var(--ks-side);
    border-bottom: 1px solid var(--ks-line);
    box-shadow: none;
}

.fi-sidebar-nav {
    padding: 1rem;
}

.fi-sidebar-nav-groups {
    gap: 0.25rem;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-btn {
    height: 2.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.75rem;
    border-radius: 0.5rem;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-group-btn:hover {
    background: var(--ks-hover);
}

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    font-size: 0.9375rem;
    font-weight: 450;
    color: var(--ks-ink);
}

.fi-sidebar-group-label {
    text-transform: none;
    letter-spacing: 0;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-group-btn > .fi-icon {
    color: var(--ks-mute);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--ks-soft);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--ks-ink);
    font-weight: 600;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--ks-ink);
}

/* группа выглядит как обычный пункт: вся строка кликабельна, стрелка справа —
   вправо, когда свёрнута, вниз, когда раскрыта */
.fi-sidebar-group-btn {
    cursor: pointer;
}

.fi-sidebar-group-collapse-btn {
    margin-inline-start: auto;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ks-faint);
    rotate: 180deg;
    transition: rotate 0.15s;
}

.fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    rotate: 90deg;
}

.fi-sidebar-group-collapse-btn .fi-icon {
    width: 1rem;
    height: 1rem;
}

/* дочерние пункты группы: отступ и тонкая линия слева, без «бусин» Filament */
.fi-sidebar-group:has(.fi-sidebar-group-btn > .fi-icon) .fi-sidebar-group-items {
    margin-inline-start: 1.25rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--ks-line);
}

.fi-sidebar-item-grouped-border {
    display: none;
}

.fi-sidebar-group:has(.fi-sidebar-group-btn > .fi-icon) .fi-sidebar-group-items .fi-sidebar-item-btn {
    height: 2.25rem;
    min-height: 2.25rem;
}

.fi-sidebar-group:has(.fi-sidebar-group-btn > .fi-icon) .fi-sidebar-group-items .fi-sidebar-item-label {
    font-size: 0.875rem;
}

/* ---------- верхняя панель ---------- */

.fi-topbar {
    min-height: 4rem;
    background: var(--ks-surface);
    border-bottom: 1px solid var(--ks-line);
    box-shadow: none;
}

.ks-topbar-theme .fi-theme-switcher {
    display: flex;
    gap: 0.125rem;
    padding: 0;
    margin-inline-end: 0.5rem;
}

.ks-topbar-theme .fi-theme-switcher-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    color: var(--ks-faint);
    background: transparent;
}

.ks-topbar-theme .fi-theme-switcher-btn:hover {
    color: var(--ks-ink);
}

.ks-topbar-theme .fi-theme-switcher-btn.fi-active {
    color: var(--ks-ink);
    background: var(--ks-soft);
}

/* Верхняя панель как в макете: логотип над сайдбаром, сразу у начала контента — сайт,
   справа поиск, тема, «Помощь» и профиль. */
@media (min-width: 1024px) {
    .fi-topbar-start {
        flex-shrink: 0;
    }

    .fi-topbar-start > a:first-child {
        width: calc(16.5rem - 1rem);
        flex-shrink: 0;
    }
}

.fi-topbar-end {
    gap: 0.5rem;
}

.fi-topbar .fi-global-search-field {
    width: 15rem;
}

/* Сайт, с которым работают на доске: точка связи, название, имя сервера, стрелки. */
.ks-site-switcher {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    max-width: 26rem;
    margin-inline-start: 2.25rem;
}

.ks-site-switcher .fi-dropdown,
.ks-site-switcher .fi-dropdown-trigger {
    min-width: 0;
    max-width: 100%;
}

.ks-site-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--ks-ink);
    font: inherit;
    cursor: pointer;
}

.ks-site-switcher-btn:hover {
    background: var(--ks-hover);
}

.ks-site-switcher-single,
.ks-site-switcher-single:hover {
    cursor: default;
    background: transparent;
}

.ks-site-switcher-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--ks-ok);
    flex: none;
}

.ks-site-switcher-dot.ks-off {
    background: var(--ks-faint);
}

.ks-site-switcher-name,
.ks-site-switcher-short {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
}

.ks-site-switcher-short {
    display: none;
}

/* сайт заведён, но не подключён к доске (нет секрета) — в списке выбора */

.ks-site-switcher-server {
    flex: none;
    padding: 0.1875rem 0.5625rem;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.75rem;
    color: var(--ks-mute);
}

.ks-site-switcher-chevron {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--ks-faint);
}

.ks-topbar-help {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ks-ink);
    text-decoration: none;
}

.ks-topbar-help:hover {
    background: var(--ks-hover);
}

.ks-topbar-help-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ks-mute);
}

@media (max-width: 1279px) {
    .ks-site-switcher-server,
    .ks-topbar-help span {
        display: none;
    }
}

/* Ниже 1024px Filament прячет .fi-topbar-start (логотип там в сайдбаре), а в ней — выбор сайта:
   показываем блок без ссылки-логотипа, чтобы сайт можно было сменить и на планшете, и на телефоне. */
@media (max-width: 1023px) {
    .fi-topbar-start {
        display: flex;
        align-items: center;
        min-width: 0;
        margin-inline-end: 0.5rem;
    }

    .fi-topbar-start > a:first-child {
        display: none;
    }

    .fi-topbar-end {
        flex: 1 1 auto;
        min-width: 0;
    }

    .fi-topbar .fi-global-search-ctn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .fi-topbar .fi-global-search-field {
        width: 100%;
        min-width: 0;
    }

    .fi-topbar-start {
        flex: 0 1 auto;
        max-width: 50%;
    }

    .ks-site-switcher {
        flex-shrink: 1;
        max-width: 100%;
        margin-inline-start: 0;
    }
}

@media (max-width: 639px) {
    .ks-site-switcher-name {
        display: none;
    }

    .ks-site-switcher-short {
        display: inline;
    }

    .ks-topbar-help {
        display: none;
    }
}

/* переключатель в меню профиля дублирует верхний: прячем весь его блок вместе с разделителями,
   иначе между «Профиль» и «Выйти» остаётся пустая полоса из двух линий */
.fi-dropdown-panel .fi-dropdown-list:has(> .fi-theme-switcher) {
    display: none;
}

/* На телефоне верхней панели тесно: тема — в меню профиля, в панели — сайт и поиск. */
@media (max-width: 639px) {
    .ks-topbar-theme {
        display: none;
    }

    .fi-user-menu .fi-dropdown-panel .fi-dropdown-list:has(> .fi-theme-switcher) {
        display: revert-layer;
    }
}

/* ---------- заголовок страницы ---------- */

.fi-header {
    padding-top: 0.5rem;
}

/* заголовок слева, кнопки справа внизу — как в макете, без переноса кнопок под описание */
@media (min-width: 1024px) {
    .fi-header {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    .fi-header > div:first-child {
        min-width: 0;
    }

    .fi-header-actions-ctn {
        align-self: flex-end;
    }
}

/* Карточка задания: кнопок много (применить, отклонить, указания…) — они идут сразу под
   заголовком, а не теснят его справа. */
.fi-resource-tasks.fi-resource-view-record-page .fi-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem;
}

.fi-resource-tasks.fi-resource-view-record-page .fi-header-actions-ctn {
    align-self: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.fi-header-heading {
    font-size: 2.125rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ks-ink);
}

.fi-header-subheading {
    margin-top: 0.625rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ks-mute);
    max-width: 45rem;
}

.fi-breadcrumbs {
    font-size: 0.875rem;
}

/* ---------- кнопки, бейджи, поля ---------- */

.fi-btn {
    border-radius: 0.5rem;
    min-height: 2.5rem;
    font-weight: 500;
}

/* акцентные кнопки: сплошной синий и белый текст (у Filament светлый оттенок 400 с тёмным текстом плохо читается) */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--ks-accent);
    color: var(--ks-on-accent);
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover {
    background: var(--ks-blue-hover);
}

.dark .fi-btn.fi-color-primary:not(.fi-outlined):hover {
    background: #4d7ee6;
}

.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-btn-label {
    color: var(--ks-on-accent);
}

.fi-btn.fi-color-success:not(.fi-outlined) {
    background: var(--ks-go);
    color: #fff;
}

.fi-btn.fi-color-success:not(.fi-outlined):hover {
    background: var(--ks-go-hover);
}

.fi-btn.fi-color-success:not(.fi-outlined) .fi-icon,
.fi-btn.fi-color-success:not(.fi-outlined) .fi-btn-label {
    color: #fff;
}

.fi-btn.fi-color-danger:not(.fi-outlined) {
    background: var(--ks-bad);
    color: #fff;
}

.dark .fi-btn.fi-color-danger:not(.fi-outlined) {
    background: #c9372c;
}

.fi-btn.fi-color-danger:not(.fi-outlined) .fi-icon {
    color: #fff;
}

.fi-btn.fi-size-sm,
.fi-btn.fi-size-xs {
    min-height: 2.125rem;
}

.fi-badge {
    border-radius: 999px;
    padding-inline: 0.625rem;
    font-weight: 500;
}

.fi-input-wrp {
    border-radius: 0.5rem;
}

/* ---------- карточки ---------- */

.fi-section:not(.fi-section-not-contained),
.fi-wi-chart,
.fi-account-widget {
    border-radius: 0.75rem;
    box-shadow: none;
    border: 1px solid var(--ks-line);
    background: var(--ks-surface);
}

.fi-section-header-heading {
    font-size: 1rem;
    font-weight: 600;
}

/* ---------- таблицы ---------- */

.fi-ta-ctn {
    border-radius: 0.75rem;
    box-shadow: none;
    border: 1px solid var(--ks-line);
    background: var(--ks-surface);
}

/* Без overflow: hidden у контейнера — иначе выпадающие фильтры обрезаются краем таблицы;
   скругление держат первый и последний блоки внутри. */
.fi-ta-main > :first-child,
.fi-ta-main > :first-child > :first-child {
    border-top-left-radius: calc(0.75rem - 1px);
    border-top-right-radius: calc(0.75rem - 1px);
}

.fi-ta-main > :last-child {
    border-bottom-left-radius: calc(0.75rem - 1px);
    border-bottom-right-radius: calc(0.75rem - 1px);
}

/* Активные фильтры: строка в тон таблице, фильтры — «пилюли» акцентного цвета, как вкладки. */
.fi-ta-filter-indicators {
    align-items: center;
    padding: 0.625rem 1.5rem;
    border-bottom: 1px solid var(--ks-line);
    background: var(--ks-side);
}

.fi-ta-filter-indicators > div:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.fi-ta-filter-indicators-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.75rem;
    color: var(--ks-mute);
}

.fi-ta-filter-indicators-badges-ctn {
    gap: 0.375rem;
}

/* Крестик — круг, вписанный в скруглённый конец плашки: отступ справа равен отступу сверху и снизу. */
.fi-ta-filter-indicators-badges-ctn .fi-badge {
    min-height: 1.75rem;
    gap: 0.25rem;
    padding: 0 0.1875rem 0 0.75rem;
    border: 1px solid color-mix(in oklab, var(--ks-accent) 30%, transparent);
    border-radius: 999px;
    background: var(--ks-blue-soft);
    box-shadow: none;
    color: var(--ks-accent);
    font-size: 0.8125rem;
    font-weight: 500;
}

.fi-ta-filter-indicators-badges-ctn .fi-badge .fi-badge-label {
    line-height: 1.625rem;
    color: var(--ks-accent);
}

/* У Filament у кнопки отрицательные отступы (-me-2): она вылезала за край плашки и обрезалась. */
.fi-ta-filter-indicators-badges-ctn .fi-badge-delete-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    color: var(--ks-accent);
    opacity: 0.7;
}

.fi-ta-filter-indicators-badges-ctn .fi-badge-delete-btn-icon,
.fi-ta-filter-indicators-badges-ctn .fi-badge-delete-btn .fi-loading-indicator {
    width: 0.875rem;
    height: 0.875rem;
    color: inherit;
}

.fi-ta-filter-indicators-badges-ctn .fi-badge-delete-btn:hover,
.fi-ta-filter-indicators-badges-ctn .fi-badge-delete-btn:focus-visible {
    background: color-mix(in oklab, var(--ks-accent) 18%, transparent);
    opacity: 1;
}

.fi-ta-filter-indicators > .fi-icon-btn {
    border-radius: 0.5rem;
    color: var(--ks-mute);
}

.fi-ta-filter-indicators > .fi-icon-btn:hover {
    background: var(--ks-hover);
    color: var(--ks-ink);
}

.fi-ta-header,
.fi-ta-header-toolbar {
    background: var(--ks-surface);
}

.fi-ta-table > thead > tr,
.fi-ta-table > thead > tr > th {
    background: var(--ks-side);
}

.fi-ta-header-cell {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ks-mute);
    white-space: nowrap;
}

.fi-ta-table > tbody > tr.fi-ta-row > td {
    border-color: var(--ks-line);
}

.fi-ta-row:hover > td {
    background: var(--ks-side);
}

.fi-ta-text-description {
    color: var(--ks-mute);
}

.fi-ta-group-header {
    background: var(--ks-side);
}

.fi-ta-group-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ks-ink);
}

.fi-pagination {
    border-top: 1px solid var(--ks-line);
    background: var(--ks-side);
}

/* ---------- вкладки: отдельные «пилюли» ---------- */

.fi-tabs {
    justify-content: flex-start;
    margin-inline: 0;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
    flex-wrap: wrap;
}

.fi-tabs .fi-tabs-item {
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--ks-line);
    background: var(--ks-surface);
    color: var(--ks-ink);
    font-size: 0.875rem;
    font-weight: 500;
}

.fi-tabs .fi-tabs-item:hover {
    background: var(--ks-hover);
}

.fi-tabs .fi-tabs-item.fi-active {
    background: var(--ks-accent);
    border-color: var(--ks-accent);
    color: var(--ks-on-accent);
    font-weight: 600;
}

.fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs .fi-tabs-item.fi-active .fi-icon {
    color: var(--ks-on-accent);
}

.fi-tabs .fi-tabs-item.fi-active .fi-badge {
    background: rgba(255, 255, 255, 0.22);
    color: var(--ks-on-accent);
}

/* ---------- сводка: одна панель с разделителями ---------- */

/* только сетка самих показателей, не внешняя обёртка виджета с заголовком */
.fi-wi-stats-overview .fi-sc.fi-grid:has(> .fi-grid-col > .fi-sc-component > .fi-wi-stats-overview-stat) {
    gap: 0;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

.fi-wi-stats-overview .fi-grid-col:has(> .fi-sc-component > .fi-wi-stats-overview-stat) + .fi-grid-col {
    border-inline-start: 1px solid var(--ks-line);
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 1.375rem 1.5rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-mute);
}

.fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ks-ink);
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.fi-wi-stats-overview .fi-section-header {
    padding-inline: 0.25rem;
    margin-bottom: 0.25rem;
}

/* ---------- графики ---------- */

.fi-wi-chart .fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-mute);
}

/* ---------- модалки, выпадающие меню ---------- */

.fi-modal-window,
.fi-dropdown-panel {
    border-radius: 0.75rem;
}

/* ---------- вход ---------- */

.fi-simple-layout {
    background: var(--ks-side);
}

.fi-simple-main {
    border-radius: 0.75rem;
    box-shadow: none;
    border: 1px solid var(--ks-line);
    background: var(--ks-surface);
}

/* ---------- вики: статья и дерево разделов ---------- */

.ks-wiki {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 1023px) {
    .ks-wiki {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-wiki-nav {
        order: -1;
    }
}

.ks-wiki-main {
    min-width: 0;
    max-width: 48rem;
}

.ks-wiki-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--ks-mute);
}

.ks-wiki-lead {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-side);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ks-mute);
}

/* Сайты: версии страницы, «как видит агент сайта» и вставки «::: site» в тексте. */
.ks-wiki-versions {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--ks-mute);
}

.ks-wiki-versions a,
.ks-link {
    color: var(--ks-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ks-wiki-versions a.ks-active {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.ks-wiki-site {
    margin: 1rem 0;
    padding: 0.25rem 1rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--ks-warn) 35%, var(--ks-line));
    border-left-width: 4px;
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--ks-warn-soft) 55%, transparent);
}

.ks-wiki-site-off {
    opacity: 0.45;
}

.ks-wiki-site-label {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ks-warn);
}

.ks-wiki-nav-site {
    color: var(--ks-mute);
    font-size: 0.8125rem;
}

.ks-wiki-body {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
}

.ks-wiki-article-title {
    margin: 0 0 0.875rem;
    font-size: 2.125rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ks-wiki-article-title a {
    color: var(--ks-ink);
    text-decoration: none;
}

.ks-wiki-divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 3.5rem 0 1.75rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
    white-space: nowrap;
}

.ks-wiki-divider::before,
.ks-wiki-divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: var(--ks-line);
}

.ks-wiki-more,
.ks-wiki-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 3rem;
    padding: 1.5rem 0;
    font-size: 0.8125rem;
    color: var(--ks-faint);
}

.ks-wiki-spinner {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    border: 2px solid var(--ks-line);
    border-top-color: var(--ks-accent);
    animation: ks-spin 0.8s linear infinite;
}

@keyframes ks-spin {
    to {
        transform: rotate(360deg);
    }
}

.ks-wiki-nav {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.875rem;
    background: var(--ks-side);
}

.ks-wiki-nav-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-surface);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-ink);
    text-decoration: none;
}

.ks-wiki-nav-back-icon {
    width: 1rem;
    height: 1rem;
}

.ks-wiki-nav-section-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ks-ink);
    text-align: start;
    cursor: pointer;
}

.ks-wiki-nav-section-btn:hover,
.ks-wiki-nav-item:hover {
    background: var(--ks-hover);
}

.ks-wiki-nav-chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--ks-faint);
    transition: transform 0.15s;
}

.ks-wiki-nav-chevron.ks-open {
    transform: rotate(90deg);
}

.ks-wiki-nav-count {
    margin-inline-start: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ks-faint);
}

.ks-wiki-nav-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0.125rem 0 0.5rem 0.75rem;
}

.ks-wiki-nav-item {
    display: block;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--ks-mute);
    text-decoration: none;
}

.ks-wiki-nav-item.ks-active {
    background: var(--ks-surface);
    color: var(--ks-ink);
    font-weight: 600;
    box-shadow: var(--ks-shadow), inset 2px 0 0 var(--ks-accent);
}

/* ---------- SEO · Ссылки (как в макете) ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ks-links {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ks-links-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-card);
}

.ks-links-progress-title {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.ks-links-progress-bar {
    flex-grow: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--ks-soft);
    overflow: hidden;
}

.ks-links-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--ks-accent);
    transition: width 0.4s;
}

.ks-links-progress-count {
    font-size: 0.8125rem;
    color: var(--ks-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ks-links-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

.ks-links-summary-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.375rem 1.5rem;
    border: 0;
    border-inline-start: 1px solid var(--ks-line);
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    min-width: 0;
}

.ks-links-summary-cell:first-child {
    border-inline-start: 0;
}

.ks-links-summary-cell:hover {
    background: var(--ks-side);
}

.ks-links-summary-cell.ks-active {
    background: var(--ks-blue-soft);
    box-shadow: inset 0 -3px 0 var(--ks-accent);
}

.ks-links-summary-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-mute);
}

.ks-links-summary-count {
    margin-top: 0.375rem;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ks-ink);
}

.ks-tone-bad .ks-links-summary-count {
    color: var(--ks-bad);
}

.ks-tone-warn .ks-links-summary-count {
    color: var(--ks-warn);
}

.ks-links-summary-note {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ks-mute);
}

.ks-links-seg-bar {
    display: flex;
    gap: 2px;
    height: 0.5rem;
    margin-top: 0.875rem;
    border-radius: 999px;
    overflow: hidden;
}

.ks-seg-ok {
    background: var(--ks-accent);
}

.ks-seg-issues {
    background: var(--ks-bad);
}

.ks-seg-other {
    background: var(--ks-line);
}

.ks-links-seg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-links-seg-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ks-links-seg-legend i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
}

.ks-links-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.ks-links-seg {
    display: flex;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: var(--ks-soft);
}

.ks-links-seg button {
    height: 2.25rem;
    white-space: nowrap;
    padding: 0 0.875rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ks-mute);
    cursor: pointer;
}

.ks-links-seg button.ks-active {
    background: var(--ks-raised);
    color: var(--ks-ink);
    font-weight: 600;
    box-shadow: var(--ks-shadow);
}

.ks-links-source {
    width: 13rem;
}

.ks-links-search {
    width: 18rem;
    max-width: 100%;
}

.ks-links-toolbar-note {
    margin-inline-start: auto;
    font-size: 0.875rem;
    color: var(--ks-mute);
}

.ks-links-table-wrap {
    position: relative;
    margin-top: 1rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

/* Смена вкладки «Ссылок» — несколько секунд у сайта: видно, что клик принят и идёт загрузка. */
.ks-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    border: 2px solid var(--ks-line);
    border-top-color: var(--ks-accent);
    animation: ks-spin 0.8s linear infinite;
}

.ks-links-loading .ks-links-table {
    opacity: 0.4;
    transition: opacity 0.15s;
}

.ks-links-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3.5rem;
    cursor: progress;
}

.ks-links-loader-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-raised);
    box-shadow: var(--ks-shadow);
    font-size: 0.875rem;
    color: var(--ks-ink);
}

.ks-links-seg button[data-loading] {
    background: var(--ks-raised);
    color: var(--ks-ink);
    font-weight: 600;
    box-shadow: var(--ks-shadow);
    cursor: progress;
}

.ks-links-seg:has(button[data-loading]) button.ks-active:not([data-loading]),
.ks-links-summary:has(.ks-links-summary-cell[data-loading]) .ks-links-summary-cell.ks-active:not([data-loading]) {
    background: transparent;
    box-shadow: none;
    font-weight: inherit;
    color: var(--ks-mute);
}

.ks-links-summary-cell[data-loading] {
    background: var(--ks-blue-soft);
    box-shadow: inset 0 -3px 0 var(--ks-accent);
    cursor: progress;
}

.ks-links-seg button[data-loading]::after,
.ks-links-summary-cell[data-loading] .ks-links-summary-label::after {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-inline-start: 0.45rem;
    vertical-align: -0.1em;
    border-radius: 999px;
    border: 2px solid var(--ks-line);
    border-top-color: var(--ks-accent);
    animation: ks-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ks-spinner,
    .ks-links-seg button[data-loading]::after,
    .ks-links-summary-cell[data-loading] .ks-links-summary-label::after {
        animation-duration: 2s;
    }
}

.ks-links-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ks-links-table th {
    height: 2.75rem;
    padding: 0 1rem;
    background: var(--ks-side);
    border-bottom: 1px solid var(--ks-line);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ks-mute);
    text-align: start;
    white-space: nowrap;
}

.ks-links-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ks-line);
    vertical-align: top;
}

.ks-links-table tbody tr:hover > td {
    background: var(--ks-side);
}

.ks-links-td-where {
    width: 22%;
    min-width: 12rem;
}

.ks-links-where-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ks-ink);
    text-decoration: none;
}

a.ks-links-where-title:hover {
    color: var(--ks-blue);
}

.ks-links-where-kind {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-links-url {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.ks-links-url > a {
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.8125rem;
    color: var(--ks-ink);
    text-decoration: none;
}

.ks-links-url > a:hover {
    color: var(--ks-blue);
    text-decoration: underline;
}

.ks-links-final {
    margin-top: 0.25rem;
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-links-final-ok {
    color: var(--ks-ok);
}

.ks-links-hint {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-links-where {
    width: 20%;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.ks-links-anchor {
    color: var(--ks-mute);
}

.ks-links-location {
    margin-top: 0.125rem;
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.75rem;
    color: var(--ks-faint);
}

.ks-links-table td:nth-child(4) {
    white-space: nowrap;
}

.ks-links-table td:nth-child(4) .fi-badge,
.ks-links-table td:nth-child(4) .fi-badge-label {
    overflow: visible;
}

.ks-links-td-action {
    width: 1%;
    text-align: end;
    white-space: nowrap;
}

.ks-links-empty {
    padding: 2rem !important;
    text-align: center;
    color: var(--ks-mute);
}

.ks-links-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--ks-side);
    font-size: 0.875rem;
    color: var(--ks-mute);
}

.ks-links-menus summary {
    cursor: pointer;
    color: var(--ks-blue);
}

.ks-links-menus p {
    margin: 0.375rem 0 0;
    max-width: 60rem;
}

@media (max-width: 1023px) {
    .ks-links-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-links-table thead {
        display: none;
    }

    .ks-links-table,
    .ks-links-table tbody,
    .ks-links-table tr,
    .ks-links-table td {
        display: block;
        width: auto;
    }

    .ks-links-table td {
        border-bottom: 0;
        padding: 0.375rem 1rem;
    }

    .ks-links-table tr {
        border-bottom: 1px solid var(--ks-line);
        padding: 0.5rem 0;
    }
}

/* ---------- сводка «одной панелью» (components/ks/strip) ---------- */

.ks-strip {
    display: grid;
    grid-template-columns: repeat(var(--ks-strip-cols, 4), minmax(0, 1fr));
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

@media (max-width: 1023px) {
    .ks-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Две колонки: у первой ячейки строки нет линии слева, строки разделены линией сверху. */
    .ks-strip-cell:nth-child(odd) {
        border-inline-start: 0;
    }

    .ks-strip-cell:nth-child(n + 3) {
        border-top: 1px solid var(--ks-line);
    }
}

.ks-strip-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.375rem 1.5rem;
    border-inline-start: 1px solid var(--ks-line);
    color: inherit;
    text-decoration: none;
}

.ks-strip-cell:first-child {
    border-inline-start: 0;
}

a.ks-strip-cell:hover {
    background: var(--ks-side);
}

.ks-strip-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-mute);
}

.ks-strip-value {
    margin-top: 0.375rem;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ks-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-tone-bad .ks-strip-value {
    color: var(--ks-bad);
}

.ks-tone-warn .ks-strip-value {
    color: var(--ks-warn);
}

.ks-tone-ok .ks-strip-value {
    color: var(--ks-ok);
}

.ks-tone-accent .ks-strip-value {
    color: var(--ks-blue);
}

.ks-strip-note {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ks-mute);
}

.ks-strip-seg {
    display: flex;
    gap: 2px;
    height: 0.5rem;
    margin-top: 0.875rem;
    border-radius: 999px;
    overflow: hidden;
}

.ks-strip-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-strip-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ks-strip-legend i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
}

.ks-seg-accent {
    background: var(--ks-accent);
}

.ks-seg-light {
    background: #b7ccf5;
}

.dark .ks-seg-light {
    background: #34507f;
}

.ks-seg-warn {
    background: #e0a030;
}

.ks-seg-bad {
    background: var(--ks-bad);
}

.ks-seg-muted {
    background: var(--ks-line);
}

/* ---------- Главная ---------- */

.ks-dash {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ks-dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.25rem;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 1279px) {
    .ks-dash-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-dash-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ks-dash-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ks-dash-span {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-mute);
}

.ks-chart {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem 1rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-card);
}

.ks-chart-stat {
    display: flex;
    flex-direction: column;
    width: 9.5rem;
    flex-shrink: 0;
}

.ks-chart-label {
    font-size: 0.875rem;
    color: var(--ks-mute);
}

.ks-chart-value {
    margin-top: 0.25rem;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ks-chart-agg {
    font-size: 0.75rem;
    color: var(--ks-faint);
}

.ks-chart-plot {
    display: flex;
    gap: 0.625rem;
    flex-grow: 1;
    min-width: 0;
}

.ks-chart-ticks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 3rem;
    height: 150px;
    margin-top: -0.4rem;
    padding-bottom: 0.1rem;
    text-align: end;
    font-size: 0.75rem;
    color: var(--ks-faint);
    font-variant-numeric: tabular-nums;
}

.ks-chart-canvas {
    flex-grow: 1;
    min-width: 0;
}

.ks-chart-canvas svg {
    display: block;
    width: 100%;
    height: 150px;
    overflow: visible;
}

.ks-chart-grid {
    stroke: var(--ks-line);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.ks-chart-axis {
    stroke: var(--ks-line);
    stroke-width: 1;
}

.ks-chart-area {
    fill: #edf3fe;
}

.dark .ks-chart-area {
    fill: #1b2638;
}

.ks-chart-line {
    fill: none;
    stroke: #6c9cf0;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.ks-chart-x {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--ks-faint);
}

.ks-chart-ticks,
.ks-chart-x {
    white-space: nowrap;
}

/* Телефон: число над графиком, график на всю ширину — иначе подписи осей слипаются. */
@media (max-width: 767px) {
    .ks-chart {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem 1.125rem 0.875rem;
    }

    .ks-chart-stat {
        width: auto;
    }
}

.ks-dash-latest {
    margin-top: 1.25rem;
}

/* карточка-список с подвалом (макет: «Сайты», «Службы») */
.ks-list-card {
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

.ks-list-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.ks-list-card-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ks-list-card-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 1.25rem;
    border-top: 1px solid var(--ks-line);
    font-size: 0.875rem;
}

.ks-list-card-name {
    font-weight: 500;
}

.ks-list-card-name code {
    margin-inline-start: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ks-faint);
}

.ks-list-card-meta {
    margin-inline-start: auto;
    font-size: 0.8125rem;
    color: var(--ks-mute);
    text-align: end;
}

.ks-list-card-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.875rem;
    border-top: 1px solid var(--ks-line);
    background: var(--ks-side);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-ink);
    text-decoration: none;
}

.ks-list-card-foot:hover {
    background: var(--ks-hover);
}

.ks-list-card-foot-icon {
    width: 1rem;
    height: 1rem;
}

.ks-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.ks-dot-ok {
    background: var(--ks-ok);
}

.ks-dot-off {
    background: var(--ks-line);
}

/* ---------- общие блоки SEO-страниц ---------- */

.ks-mono {
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.8125rem;
}

.ks-muted {
    color: var(--ks-mute);
}

.ks-empty-card {
    padding: 2rem;
    border: 1px dashed var(--ks-line);
    border-radius: 0.75rem;
    color: var(--ks-mute);
    text-align: center;
}

.ks-block-title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.ks-two-cols {
    display: grid;
    grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 0.5rem;
}

.ks-two-cols-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28.75rem);
}

@media (max-width: 1279px) {
    .ks-two-cols,
    .ks-two-cols-wide {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-two-cols .ks-links-table-wrap {
    margin-top: 0;
}

.ks-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.ks-findings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ks-finding {
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

.ks-finding-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.ks-finding-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.ks-finding-hint {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ks-mute);
}

.ks-finding-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.5625rem 1.25rem;
    border-top: 1px solid var(--ks-line);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ks-finding > .ks-finding-row:first-child {
    border-top: 0;
}

.ks-finding-row a {
    color: var(--ks-ink);
    text-decoration: none;
}

.ks-finding-row a:hover {
    color: var(--ks-blue);
    text-decoration: underline;
}

.ks-finding-row-title {
    font-weight: 500;
}

.ks-banner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    border-radius: 0.75rem;
}

.ks-banner-ok {
    background: var(--ks-ok-soft);
}

.ks-banner-warn {
    background: var(--ks-warn-soft);
}

.ks-banner-bad {
    background: var(--ks-bad-soft);
}

.ks-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--ks-surface);
    flex-shrink: 0;
}

.ks-banner-icon .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.ks-banner-ok .ks-banner-icon,
.ks-banner-ok .ks-banner-title {
    color: var(--ks-ok);
}

.ks-banner-warn .ks-banner-icon,
.ks-banner-warn .ks-banner-title {
    color: var(--ks-warn);
}

.ks-banner-bad .ks-banner-icon,
.ks-banner-bad .ks-banner-title {
    color: var(--ks-bad);
}

.ks-banner-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.ks-banner-text {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--ks-ink);
}

.ks-rule-deny {
    color: var(--ks-bad);
}

.ks-rule-allow {
    color: var(--ks-ok);
}

.ks-code-card {
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    overflow: hidden;
}

.ks-code-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--ks-line);
}

.ks-code-card h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ks-code-card header a {
    font-size: 0.8125rem;
    text-decoration: none;
}

.ks-code {
    margin: 0;
    padding: 0.875rem 1.25rem 1.125rem 3.25rem;
    max-height: 40rem;
    overflow: auto;
    background: var(--ks-card);
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    list-style: decimal;
    color: var(--ks-ink);
}

.ks-code li {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ks-code li::marker {
    color: var(--ks-faint);
}

.ks-code .ks-code-key {
    color: var(--ks-blue);
}

/* ---------- Подключение ---------- */

.ks-connect {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.25rem;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 1279px) {
    .ks-connect {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-connect-main,
.ks-connect-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.ks-note {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--ks-blue-soft);
    font-size: 0.875rem;
    line-height: 1.55;
}

.ks-note-icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    color: var(--ks-blue);
    flex-shrink: 0;
}

.ks-note a {
    color: var(--ks-blue);
}

.ks-connect-card {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding: 1.5rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
}

.ks-connect-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ks-connect-card-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.ks-connect-warn {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--ks-warn);
}

.ks-connect-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 767px) {
    .ks-connect-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-connect-field-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-connect-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.375rem 0 0.875rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-side);
}

.ks-connect-field code {
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
}

.ks-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--ks-mute);
    cursor: pointer;
    flex-shrink: 0;
}

.ks-icon-btn:hover {
    background: var(--ks-hover);
    color: var(--ks-ink);
}

.ks-icon-btn .fi-icon {
    width: 1rem;
    height: 1rem;
}

.ks-icon-btn-danger:hover {
    color: var(--ks-bad);
}

.ks-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ks-step;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.ks-steps li {
    position: relative;
    padding-inline-start: 2.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ks-mute);
    counter-increment: ks-step;
}

.ks-steps li b {
    color: var(--ks-ink);
    font-weight: 500;
}

.ks-steps li::before {
    content: counter(ks-step);
    position: absolute;
    inset-inline-start: 0;
    top: -0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--ks-blue-soft);
    color: var(--ks-blue);
    font-size: 0.875rem;
    font-weight: 600;
}

.ks-connect-cli pre {
    margin: 0;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: var(--ks-side);
    border: 1px solid var(--ks-line);
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ks-connect-cli p {
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    color: var(--ks-mute);
}

.ks-connect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ks-connect-actions > * {
    flex: 1;
}

.ks-list-card-foot {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.ks-list-card-foot-danger {
    color: var(--ks-bad);
}

.ks-dot-bad {
    background: var(--ks-bad);
}

/* ---------- загрузка: полоса вверху, нажатая вкладка, притухшие таблицы и графики ---------- */
/* Класс ks-busy ставит filament/busy-indicator, пока идёт запрос, начатый человеком (> 150 мс). */

html.ks-busy body::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 3px;
    background: linear-gradient(90deg, transparent 0, var(--ks-accent) 50%, transparent 100%) no-repeat;
    background-size: 40% 100%;
    animation: ks-progress 1.1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ks-progress {
    from {
        background-position: -60% 0;
    }

    to {
        background-position: 160% 0;
    }
}

html.ks-busy .fi-main {
    cursor: progress;
}

/* Вкладки Filament (разделы вики, «Страница / История»): нажатая сразу активна и с крутилкой,
   прежняя активная гаснет — Livewire ставит data-loading на элемент, начавший запрос. */
.fi-tabs .fi-tabs-item[data-loading] {
    background: var(--ks-accent);
    border-color: var(--ks-accent);
    color: var(--ks-on-accent);
    cursor: progress;
}

.fi-tabs .fi-tabs-item[data-loading] .fi-tabs-item-label,
.fi-tabs .fi-tabs-item[data-loading] .fi-icon {
    color: var(--ks-on-accent);
}

.fi-tabs:has(.fi-tabs-item[data-loading]) .fi-tabs-item.fi-active:not([data-loading]) {
    background: var(--ks-surface);
    border-color: var(--ks-line);
    color: var(--ks-ink);
    font-weight: 500;
}

.fi-tabs:has(.fi-tabs-item[data-loading]) .fi-tabs-item.fi-active:not([data-loading]) .fi-tabs-item-label,
.fi-tabs:has(.fi-tabs-item[data-loading]) .fi-tabs-item.fi-active:not([data-loading]) .fi-icon {
    color: var(--ks-ink);
}

.fi-tabs .fi-tabs-item[data-loading]::after {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-inline-start: 0.45rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--ks-on-accent);
    animation: ks-spin 0.8s linear infinite;
}

/* Таблицы Filament и графики главной: пока идёт запрос — притухают, у таблицы подпись. */
.fi-ta-ctn {
    position: relative;
}

html.ks-busy .fi-ta-content-ctn,
html.ks-busy .ks-dash-main .ks-chart {
    opacity: 0.45;
    transition: opacity 0.15s;
}

html.ks-busy .fi-ta-ctn::after {
    content: 'Загружаем…';
    position: absolute;
    top: 4.25rem;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-raised);
    box-shadow: var(--ks-shadow);
    font-size: 0.875rem;
    color: var(--ks-ink);
    white-space: nowrap;
    pointer-events: none;
    animation: ks-pulse 1s ease-in-out infinite alternate;
}

@keyframes ks-pulse {
    from {
        opacity: 0.65;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.ks-busy body::before,
    html.ks-busy .fi-ta-ctn::after,
    .fi-tabs .fi-tabs-item[data-loading]::after {
        animation-duration: 2.5s;
    }
}

/* ---------- календарь публикаций ---------- */

.ks-cal {
    position: relative;
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
}

.ks-cal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.ks-cal-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: var(--ks-soft);
}

.ks-cal-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--ks-ink);
    cursor: pointer;
}

.ks-cal-nav:hover:not(:disabled) {
    background: var(--ks-raised);
    box-shadow: var(--ks-shadow);
}

.ks-cal-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.ks-cal-nav .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* выбор месяца: кнопка → окно с годом и сеткой 12 месяцев (число публикаций, насыщенность) */
.ks-cal-picker {
    position: relative;
}

.ks-cal-month-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 12.5rem;
    height: 2.25rem;
    padding: 0 0.625rem 0 0.875rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-raised);
    color: var(--ks-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.ks-cal-month-count {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ks-blue-soft);
    color: var(--ks-accent);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4rem;
}

.ks-cal-month-chevron {
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    color: var(--ks-mute);
}

.ks-cal-pop {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 20;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.75rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-raised);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.ks-cal-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.ks-cal-pop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
}

.ks-cal-pop-month {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-surface);
    color: var(--ks-ink);
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
}

.ks-cal-pop-month:hover:not(:disabled) {
    box-shadow: inset 0 0 0 1px var(--ks-accent);
}

.ks-cal-pop-month:disabled {
    opacity: 0.35;
    cursor: default;
}

.ks-cal-pop-count {
    font-size: 0.75rem;
    color: var(--ks-mute);
    font-variant-numeric: tabular-nums;
}

.ks-cal-pop-selected {
    box-shadow: inset 0 0 0 2px var(--ks-accent);
}

.ks-cal-pop-current > span:first-child {
    font-weight: 600;
    color: var(--ks-accent);
}

.ks-cal-summary {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ks-ink);
}

.ks-cal-faint {
    font-size: 0.8125rem;
    color: var(--ks-faint);
}

.ks-cal-hint {
    margin: 0.75rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-cal-body {
    position: relative;
}

.ks-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.375rem;
}

.ks-cal-weekday {
    padding-bottom: 0.15rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ks-faint);
}

.ks-cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-surface);
    color: var(--ks-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}

.ks-cal-day:hover {
    box-shadow: inset 0 0 0 1px var(--ks-accent);
}

.ks-cal-num {
    font-size: 0.75rem;
    color: var(--ks-mute);
}

.ks-cal-count {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* насыщенность — сколько опубликовано в этот день относительно самого загруженного дня месяца */
.ks-cal-level-1 {
    background: color-mix(in oklab, var(--ks-accent) 12%, var(--ks-surface));
}

.ks-cal-level-2 {
    background: color-mix(in oklab, var(--ks-accent) 24%, var(--ks-surface));
}

.ks-cal-level-3 {
    background: color-mix(in oklab, var(--ks-accent) 38%, var(--ks-surface));
}

.ks-cal-level-4 {
    background: color-mix(in oklab, var(--ks-accent) 54%, var(--ks-surface));
}

.ks-cal-out {
    opacity: 0.35;
}

.ks-cal-future {
    border-style: dashed;
    background: transparent;
}

.ks-cal-today .ks-cal-num {
    font-weight: 700;
    color: var(--ks-accent);
}

.ks-cal-today::after {
    content: 'сегодня';
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ks-accent);
}

/* выбранные дни: период — рамкой, его края — плотной рамкой; при выборе второго дня — пунктир */
.ks-cal-selected {
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ks-accent) 50%, transparent);
}

.ks-cal-selected.ks-cal-level-0 {
    background: color-mix(in oklab, var(--ks-accent) 7%, var(--ks-surface));
}

.ks-cal-edge {
    box-shadow: inset 0 0 0 2px var(--ks-accent);
}

.ks-cal-preview {
    outline: 2px dashed var(--ks-accent);
    outline-offset: -2px;
}

/* загрузка: нажатый день или стрелка — с крутилкой, сетка притухает с подписью */
.ks-cal-day[data-loading] {
    box-shadow: inset 0 0 0 2px var(--ks-accent);
    cursor: progress;
}

.ks-cal-day[data-loading]::before,
.ks-cal-nav[data-loading]::after,
.ks-period-btn[data-loading]::after {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    border: 2px solid var(--ks-line);
    border-top-color: var(--ks-accent);
    animation: ks-spin 0.8s linear infinite;
}

.ks-cal-day[data-loading]::before {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
}

.ks-cal-nav[data-loading] .fi-icon {
    opacity: 0;
}

.ks-cal-nav[data-loading]::after {
    position: absolute;
}

.ks-period-btn[data-loading]::after {
    margin-inline-start: 0.45rem;
    vertical-align: -0.1em;
}

.ks-cal-busy .ks-cal-grid,
.ks-cal-busy .ks-cal-people {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.ks-cal-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: progress;
}

.ks-cal-people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.ks-cal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

/* строка «В таблице»: что сейчас в таблице, период полями дат, весь месяц, всё время */
.ks-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ks-period-now {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.ks-period-busy {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-period-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ks-period-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-period-field input {
    height: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-raised);
    color: var(--ks-ink);
    font: inherit;
    font-size: 0.875rem;
    color-scheme: light dark;
}

.ks-period-btn {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.5rem;
    background: var(--ks-surface);
    color: var(--ks-ink);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.ks-period-btn:hover {
    background: var(--ks-hover);
}

@media (max-width: 639px) {
    .ks-cal {
        padding: 1rem;
    }

    .ks-cal-switch {
        width: 100%;
    }

    .ks-cal-picker {
        flex: 1;
    }

    .ks-cal-month-btn {
        width: 100%;
        min-width: 0;
    }

    .ks-cal-day {
        min-height: 2.75rem;
        padding: 0.25rem 0.3rem;
    }

    .ks-cal-count {
        font-size: 0.95rem;
    }

    .ks-cal-today::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-cal-day[data-loading]::before,
    .ks-cal-nav[data-loading]::after,
    .ks-period-btn[data-loading]::after {
        animation-duration: 2s;
    }
}

/* ---------- задания: тип и SEO-блок (структура заголовков) ---------- */

/* Тип задания в форме: варианты — карточки, выбранная подсвечена. */
.ks-type-picker.fi-fo-radio,
.ks-type-picker .fi-fo-radio {
    gap: 0.625rem;
}

.ks-type-picker .fi-fo-radio-label {
    height: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.ks-type-picker .fi-fo-radio-label:hover {
    background: var(--ks-hover);
}

.ks-type-picker .fi-fo-radio-label:has(input:checked) {
    border-color: var(--ks-accent);
    background: var(--ks-blue-soft);
}

.ks-type-picker .fi-fo-radio-label:has(input:focus-visible) {
    outline: 2px solid var(--ks-accent);
    outline-offset: 2px;
}

/* Карточка тянется по высоте ряда — текст остаётся наверху, без зазора между строками. */
.ks-type-picker .fi-fo-radio-label-text {
    align-content: start;
}

.ks-type-picker .fi-fo-radio-label-text > p:first-child {
    font-weight: 600;
}

/* SEO задания — группа карточек: сводка, «Title и description», «Линтер темы», «Структура заголовков». */
.ks-seo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* Шапка карточки SEO: итог темы плашкой и короткая справка — видно и в свёрнутой карточке. */
.ks-seo .fi-section-header-description {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.ks-seo-overview .fi-section-header-description {
    display: block;
}

.ks-seo .fi-section-header-description a {
    color: var(--ks-blue);
}

.ks-seo .fi-section-header-description a:hover {
    text-decoration: underline;
}

.ks-seo-chip-sm {
    min-height: 1.375rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.ks-seo-head-note {
    font-size: 0.75rem;
    color: var(--ks-faint);
}

.ks-seo-rule-line {
    margin: 0 0 0.875rem;
}





.ks-seo-level {
    display: inline-block;
    margin: 0;
    padding: 0 0.4rem;
    border-radius: 0.3rem;
    background: var(--ks-blue-soft);
    color: var(--ks-accent);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.ks-seo-level-template {
    background: var(--ks-soft);
    color: var(--ks-faint);
}

.ks-seo-issues-top {
    margin-bottom: 1rem;
}

.ks-seo-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ks-seo-tools .ks-links-seg button {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
}

.ks-seo-busy .fi-section-content-ctn {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s;
}

.ks-seo-loading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--ks-mute);
}


.ks-seo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.75rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: var(--ks-soft);
    color: var(--ks-mute);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.ks-seo-chip .fi-icon {
    width: 1rem;
    height: 1rem;
}

.ks-seo-chip-ok {
    background: var(--ks-ok-soft);
    color: var(--ks-ok);
}

.ks-seo-chip-warn {
    background: var(--ks-warn-soft);
    color: var(--ks-warn);
}

.ks-seo-chip-bad {
    background: var(--ks-bad-soft);
    color: var(--ks-bad);
}






.ks-seo-meta {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ks-seo-meta + .ks-seo-issues {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ks-line);
}

.ks-seo-meta dt {
    font-weight: 500;
    color: var(--ks-mute);
}

.ks-seo-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.ks-seo-meta-text {
    margin-right: 0.5rem;
}

.ks-seo-len {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ks-seo-len-ok {
    background: var(--ks-ok-soft);
    color: var(--ks-ok);
}

.ks-seo-len-warn {
    background: var(--ks-warn-soft);
    color: var(--ks-warn);
}

.ks-seo-len-bad {
    background: var(--ks-bad-soft);
    color: var(--ks-bad);
}

.ks-seo-hint {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    color: var(--ks-faint);
}

/* Дерево заголовков: отступ по уровню, как в SEO-карточке KS SEO Inspector. */
.ks-outline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Длинная страница (40+ заголовков) не растягивает карточку: на широком экране — своя прокрутка. */
@media (min-width: 1024px) {
    .ks-outline {
        max-height: 30rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.25rem;
    }
}

.ks-outline-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: calc(var(--lvl, 0) * 1.25rem);
    padding: 0.25rem 0 0.25rem 0.625rem;
    border-left: 2px solid var(--ks-line);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ks-ink);
}

.ks-outline-tag {
    flex: none;
    min-width: 1.75rem;
    padding: 0 0.3rem;
    border-radius: 0.3rem;
    background: var(--ks-blue-soft);
    color: var(--ks-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.ks-outline-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ks-outline-h1 {
    border-left-color: var(--ks-accent);
    font-weight: 600;
}

.ks-outline-h1 .ks-outline-tag {
    background: var(--ks-accent);
    color: var(--ks-on-accent);
}

.ks-outline-template {
    color: var(--ks-faint);
}

.ks-outline-template .ks-outline-tag {
    background: var(--ks-soft);
    color: var(--ks-faint);
}

.ks-outline-skip {
    border-left-color: var(--ks-warn);
}

.ks-outline-skip .ks-outline-tag {
    background: var(--ks-warn-soft);
    color: var(--ks-warn);
}

.ks-outline-bad {
    border-left-color: var(--ks-bad);
}

.ks-outline-bad .ks-outline-tag {
    background: var(--ks-bad-soft);
    color: var(--ks-bad);
}

.ks-outline-flag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.375rem;
    border-radius: 0.3rem;
    background: var(--ks-warn-soft);
    color: var(--ks-warn);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ks-outline-flag-bad {
    background: var(--ks-bad-soft);
    color: var(--ks-bad);
}

.ks-outline-note {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ks-faint);
}

.ks-seo-legend {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--ks-faint);
}




.ks-seo-issues,
.ks-seo-lint {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.45;
}

.ks-seo-issue {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ks-seo-issue .fi-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1rem;
}

.ks-seo-issue-error .fi-icon {
    color: var(--ks-bad);
}

.ks-seo-issue-warning .fi-icon {
    color: var(--ks-warn);
}

.ks-seo-issue-notice .fi-icon {
    color: var(--ks-faint);
}

.ks-seo-issue-ok .fi-icon {
    color: var(--ks-ok);
}

.ks-seo-lint-total {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
}

/* Правило линтера: номер, название, сколько нарушений, под ним — сами нарушения. */
.ks-seo-lint {
    gap: 0.875rem;
}

.ks-seo-lint-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.ks-seo-lint-name {
    flex: 1;
    min-width: 0;
}

.ks-seo-lint-count {
    flex: none;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--ks-warn-soft);
    color: var(--ks-warn);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

.ks-seo-lint-count-bad {
    background: var(--ks-bad-soft);
    color: var(--ks-bad);
}

.ks-seo-lint-hits {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.375rem 0 0 2.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ks-mute);
}

.ks-seo-lint-hits li {
    overflow-wrap: anywhere;
}

.ks-seo-lint-rule .ks-seo-legend {
    margin: 0.375rem 0 0 2.75rem;
}

.ks-seo-more {
    margin: 0.375rem 0 0 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ks-blue);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ks-seo-more:hover {
    text-decoration: underline;
}

.ks-seo-lint-id {
    flex: none;
    min-width: 2.25rem;
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.75rem;
    color: var(--ks-mute);
}

.ks-seo-lint-bad {
    color: var(--ks-bad);
    font-weight: 600;
}

/* Тип задания в карточке и в списке. */
.ks-task-type {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-task-type .fi-icon {
    width: 1rem;
    height: 1rem;
}

/* ---------- задания: правка агента (что меняет) и разница текста ---------- */

.ks-changes-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ks-changes-label {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-mute);
}

.ks-changes-label-warn {
    color: var(--ks-warn);
}

.ks-changes-note {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
}

.ks-changes-text {
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ks-changes-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ks-changes-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--ks-line);
    border-radius: 0.625rem;
    background: var(--ks-surface);
    font-size: 0.8125rem;
    color: var(--ks-mute);
}

.ks-changes-stat strong {
    color: var(--ks-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ks-changes-stat em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--ks-faint);
}

.ks-changes-del {
    color: var(--ks-bad);
}

.ks-changes-add {
    color: var(--ks-ok);
}

.ks-changes-list ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ks-ink);
}

.ks-changes-list li {
    overflow-wrap: anywhere;
}

.ks-changes-list .ks-seo-more {
    margin-left: 0;
}

.ks-changes-warn {
    color: var(--ks-warn);
}

.ks-changes-fields table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ks-changes-fields th,
.ks-changes-fields td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--ks-line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ks-changes-fields th {
    font-weight: 600;
    color: var(--ks-mute);
    background: var(--ks-side);
}

.ks-changes-fields td:first-child {
    width: 11rem;
    color: var(--ks-mute);
}

.ks-changes-before {
    color: var(--ks-mute);
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--ks-bad) 55%, transparent);
}

.ks-changes-after {
    background: var(--ks-ok-soft);
}

/* Пустое SEO-поле: сайт выводит шаблон Yoast — пометка под значением, не зачёркнута (inline-block). */
.ks-changes-default {
    display: inline-block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ks-mute);
}

/* Отчёт агента: в таблицах «было → стало» (две колонки) колонки поровну — цитаты удобно сравнивать. */
.ks-report table:not(:has(th:nth-child(3))) {
    table-layout: fixed;
    width: 100%;
}

/* Разница «сейчас → предложение»: убранное красным, добавленное зелёным, пропуск — ⋯. */
.ks-diff {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ks-line);
    border-radius: 0.625rem;
    overflow: hidden;
    font-family: var(--mono-font-family, 'IBM Plex Mono'), monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

@media (min-width: 1024px) {
    .ks-diff {
        max-height: 36rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.ks-diff-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.125rem 0.75rem;
    color: var(--ks-mute);
}

.ks-diff-sign {
    flex: none;
    width: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.ks-diff-text {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ks-diff-del {
    background: var(--ks-bad-soft);
    color: var(--ks-ink);
}

.ks-diff-del .ks-diff-sign {
    color: var(--ks-bad);
}

.ks-diff-add {
    background: var(--ks-ok-soft);
    color: var(--ks-ink);
}

.ks-diff-add .ks-diff-sign {
    color: var(--ks-ok);
}

.ks-diff-gap {
    background: var(--ks-side);
    color: var(--ks-faint);
}

/* Качество текста: замечания отступают от пояснения, как в «Линтере темы». */
#ks-seo-quality .ks-seo-rule-line + .ks-seo-lint {
    margin-top: 0.875rem;
}

/* Код из приложения-аутентификатора: клетки цифр, подпись и подсказка — по центру окна. */
.fi-one-time-code-input-ctn {
    margin-inline: auto;
}

.fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-ctn,
.fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-col {
    justify-content: center;
    text-align: center;
}

.fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-content-col,
.fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-wrp-error-message {
    text-align: center;
}

/* Окна 2FA (подключение приложения, коды восстановления): пояснение, QR-код и код для ручного
   ввода — по центру, как поле для кода ниже. В Filament такие блоки — плотная схема (dense). */
.fi-modal .fi-sc.fi-sc-has-gap.fi-sc-dense {
    justify-items: center;
    text-align: center;
}

.fi-modal .fi-sc.fi-sc-has-gap.fi-sc-dense .fi-sc-flex {
    justify-content: center;
}

/* ---------- выпадающие списки (меню, выбор сайта, поля Select) ---------- */

.fi-dropdown-panel {
    border: 1px solid var(--ks-line);
    border-radius: 0.75rem;
    background: var(--ks-surface);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.dark .fi-dropdown-panel {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.fi-dropdown-list {
    padding: 0.3125rem;
}

.fi-dropdown-list + .fi-dropdown-list {
    border-top: 1px solid var(--ks-line);
}

.fi-dropdown-list-item {
    min-height: 2.25rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--ks-ink);
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible,
.fi-select-input-option.fi-focused {
    background: var(--ks-hover);
}

.fi-dropdown-header {
    padding: 0.625rem 0.9375rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-faint);
}

/* выбранный вариант в поле Select — подсветка и галочка справа, как в выборе сайта */
.fi-select-input-option.fi-selected {
    background: var(--ks-blue-soft);
    color: var(--ks-blue);
    font-weight: 500;
}

.fi-select-input-option.fi-selected::after {
    content: '';
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fi-select-input .fi-dropdown-panel {
    margin-top: 0.25rem;
}

/* поиск внутри длинных списков */
.fi-select-input-search-ctn {
    border-bottom: 1px solid var(--ks-line);
}

/* список сайтов в шапке: кружок статуса и название, текущий — жирным на светло-синем */
.ks-site-list .fi-dropdown-list-item-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ks-site-list .ks-current > .fi-dropdown-list-item {
    background: var(--ks-blue-soft);
}

.ks-site-list .ks-current .fi-dropdown-list-item-label {
    font-weight: 600;
    color: var(--ks-ink);
}