/* «Помощник»: тёмная тема по умолчанию и светлая. Спокойные нейтральные поверхности, один акцент (приглушённый индиго),
   статусы — мягкие тона без кислотных красного и зелёного. Цвета Bootstrap 5.3 переопределены под палитру. */
:root, [data-bs-theme="light"] {
    --hc-bg: #f4f5f7;
    --hc-surface: #ffffff;
    --hc-surface-2: #f3f4f6;
    --hc-surface-3: #eceef2;
    --hc-sidebar: #fbfbfc;
    --hc-border: #e5e7eb;
    --hc-line: #eef0f3;
    --hc-text: #1f2430;
    --hc-text-2: #424a5a;
    --hc-muted: #6b7280;
    --hc-accent: #5562d6;
    --hc-accent-hover: #4552c6;
    --hc-accent-soft: #eceefe;
    --hc-on-accent: #ffffff;
    --hc-ok: #23885f;
    --hc-ok-soft: #e7f5ee;
    --hc-warn: #a86b12;
    --hc-warn-soft: #fbf2e1;
    --hc-bad: #c2454f;
    --hc-bad-soft: #fbeced;
    --hc-info: #2f6fbf;
    --hc-info-soft: #e8f0fb;
    --hc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --hc-radius: 12px;
    --bs-body-bg: var(--hc-bg);
    --bs-body-color: var(--hc-text);
    --bs-emphasis-color: #11151d;
    --bs-border-color: var(--hc-border);
    --bs-border-color-translucent: var(--hc-border);
    --bs-secondary-color: var(--hc-muted);
    --bs-tertiary-bg: var(--hc-surface-2);
    --bs-link-color: var(--hc-accent);
    --bs-link-color-rgb: 85, 98, 214;
    --bs-link-hover-color: var(--hc-accent-hover);
    --bs-link-hover-color-rgb: 69, 82, 198;
    --bs-primary-rgb: 85, 98, 214;
    --bs-success-rgb: 35, 136, 95;
    --bs-danger-rgb: 194, 69, 79;
    --bs-warning-rgb: 168, 107, 18;
    --bs-focus-ring-color: rgba(85, 98, 214, .25);
}

/* тёмная: нейтральный графит без синевы, карточки чуть светлее фона и без рамок, акцент — фиолетовый,
   вторые цвета — оранжевый и голубой */
[data-bs-theme="dark"] {
    --hc-bg: #121215;
    --hc-surface: #222227;
    --hc-surface-2: #2b2b31;
    --hc-surface-3: #3a3a42;
    --hc-sidebar: #1a1a1e;
    --hc-border: #33333a;
    --hc-line: #34343c;
    --hc-text: #f6f6f8;
    --hc-text-2: #d6d6dc;
    --hc-muted: #9d9da8;
    --hc-accent: #8273ff;
    --hc-accent-hover: #9a8eff;
    --hc-accent-soft: rgba(130, 115, 255, .2);
    --hc-on-accent: #ffffff;
    --hc-ok: #55d39a;
    --hc-ok-soft: rgba(85, 211, 154, .16);
    --hc-warn: #ffa95c;
    --hc-warn-soft: rgba(255, 169, 92, .17);
    --hc-bad: #ff7a6b;
    --hc-bad-soft: rgba(255, 122, 107, .17);
    --hc-info: #4db4ef;
    --hc-info-soft: rgba(77, 180, 239, .17);
    --hc-shadow: none;
    --hc-radius: 18px;
    --bs-body-bg: var(--hc-bg);
    --bs-body-color: var(--hc-text);
    --bs-emphasis-color: #ffffff;
    --bs-border-color: var(--hc-border);
    --bs-border-color-translucent: var(--hc-border);
    --bs-secondary-color: var(--hc-muted);
    --bs-tertiary-bg: var(--hc-surface-2);
    --bs-link-color: var(--hc-accent-hover);
    --bs-link-color-rgb: 154, 142, 255;
    --bs-link-hover-color: #b3aaff;
    --bs-link-hover-color-rgb: 179, 170, 255;
    --bs-primary-rgb: 130, 115, 255;
    --bs-success-rgb: 85, 211, 154;
    --bs-danger-rgb: 255, 122, 107;
    --bs-warning-rgb: 255, 169, 92;
    --bs-focus-ring-color: rgba(130, 115, 255, .4);
}

body.hc {
    background: var(--hc-bg); color: var(--hc-text); font-size: 14px; line-height: 1.5;
    font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a.btn:hover, .page-link:hover, .dropdown-item:hover, a.kpi-link:hover { text-decoration: none; }
.text-secondary, .text-muted { color: var(--hc-muted) !important; }
.text-success { color: var(--hc-ok) !important; }
.text-danger { color: var(--hc-bad) !important; }
.text-warning { color: var(--hc-warn) !important; }
.small, small { font-size: 12.5px; }
.fs-4 { font-size: 1.35rem !important; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-emphasis-color); }
h5, .h5 { font-size: 15px; font-weight: 600; color: var(--bs-emphasis-color); }
code { color: var(--hc-accent); background: var(--hc-accent-soft); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }

/* ── рамка сайта: меню + верхняя полоса + содержимое не шире --hc-site, на широком мониторе — по центру ── */
:root { --hc-site: 1600px; }
.hc-shell { max-width: var(--hc-site); margin: 0 auto; background: var(--hc-bg); }
@media (min-width: 1200px) { .hc-shell { display: flex; align-items: flex-start; } }
/* поле вокруг рамки — чуть темнее фона сайта, граница — линией */
@media (min-width: 1601px) {
    body.hc { background: color-mix(in srgb, var(--hc-bg) 88%, #000); }
    .hc-shell { min-height: 100vh; border-left: 1px solid var(--hc-border); border-right: 1px solid var(--hc-border); }
}

/* ── боковое меню ─────────────────────────────────────────── */
.hc-sidebar { position: sticky; top: 0; height: 100vh; flex: 0 0 232px; width: 232px; flex-direction: column; background: var(--hc-sidebar);
    border-right: 1px solid var(--hc-border); padding: 16px 12px; z-index: 1030; overflow-y: auto; }
.hc-offcanvas { width: 232px !important; background: var(--hc-sidebar); }
.hc-offcanvas .hc-sidebar { position: static; height: 100%; border: 0; }
.hc-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; font-size: 15px; font-weight: 600; color: var(--bs-emphasis-color); }
.hc-brand-mark { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 15px; }
.hc-nav { display: flex; flex-direction: column; gap: 1px; }
.hc-nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--hc-text-2);
    font-size: 13.5px; transition: background-color .12s, color .12s; }
.hc-nav-link .bi { font-size: 16px; width: 18px; text-align: center; color: var(--hc-muted); transition: color .12s; }
.hc-nav-link:hover { background: var(--hc-surface-2); color: var(--bs-emphasis-color); text-decoration: none; }
.hc-nav-link:hover .bi { color: var(--hc-text-2); }
.hc-nav-link.active { background: var(--hc-accent-soft); color: var(--hc-accent); font-weight: 500; }
.hc-nav-link.active .bi { color: var(--hc-accent); }
.hc-nav-sep { margin: 16px 10px 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--hc-muted); }
.hc-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hc-border); display: flex; flex-direction: column; gap: 1px; }

/* ── верхняя полоса и контент ─────────────────────────────── */
.hc-main { min-height: 100vh; }
@media (min-width: 1200px) { .hc-main { flex: 1 1 auto; min-width: 0; } }
.hc-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 10px; padding: 12px 24px;
    background: color-mix(in srgb, var(--hc-bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hc-border); }
.hc-title { font-size: 17px; font-weight: 600; margin: 0; color: var(--bs-emphasis-color); letter-spacing: -.01em; }
.hc-clock { color: var(--hc-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.hc-icon-btn { border: 1px solid var(--hc-border); color: var(--hc-text-2); background: var(--hc-surface); width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; }
.hc-icon-btn:hover { color: var(--hc-accent); border-color: var(--hc-accent); background: var(--hc-surface); }
.hc-content { padding: 22px 24px 48px; }
@media (max-width: 575px) { .hc-content { padding: 14px 12px 32px; } .hc-topbar { padding: 8px 12px; } }

/* ── карточки ─────────────────────────────────────────────── */
.card { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); box-shadow: var(--hc-shadow);
    --bs-card-bg: var(--hc-surface); --bs-card-border-color: var(--hc-border); --bs-card-cap-bg: transparent; overflow: hidden; }
.card-header { background: transparent; border-bottom: 1px solid var(--hc-line); font-weight: 600; font-size: 13.5px;
    color: var(--bs-emphasis-color); padding: 12px 16px; }
.card-header a { font-weight: 600; }
.card-header .small, .card-header small { font-weight: 400; }
.card-body { padding: 16px; }
.card-body + .card-body { border-top: 1px solid var(--hc-line); }
.hc-section-title { font-size: 13px; font-weight: 600; color: var(--hc-muted); margin: 24px 0 10px; letter-spacing: .01em; }

/* плитки показателей */
.kpi { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); padding: 14px 16px; height: 100%;
    box-shadow: var(--hc-shadow); transition: border-color .12s; }
a:hover > .kpi { border-color: color-mix(in srgb, var(--hc-accent) 45%, var(--hc-border)); }
a:has(> .kpi):hover { text-decoration: none; }
.kpi-label { color: var(--hc-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 22px; font-weight: 600; color: var(--bs-emphasis-color); line-height: 1.3; margin-top: 4px; font-variant-numeric: tabular-nums;
    letter-spacing: -.01em; }
.kpi-sub { display: block; font-size: 12.5px; margin-top: 3px; color: var(--hc-muted); }
.kpi-sub.ok { color: var(--hc-ok); } .kpi-sub.warn { color: var(--hc-warn); } .kpi-sub.bad { color: var(--hc-bad); }
.kpi .bi { color: var(--hc-muted); }

/* строки «показатель — значение» внутри карточек */
.hc-facts { width: 100%; font-size: 13px; }
.hc-facts td { padding: 6px 0; border-bottom: 1px solid var(--hc-line); color: var(--hc-text-2); }
.hc-facts td:first-child { padding-right: 10px; }
.hc-facts td:last-child { text-align: right; color: var(--hc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-facts tr:last-child td { border-bottom: 0; }
.hc-stat-label { font-size: 12px; color: var(--hc-muted); }

/* ── таблицы ──────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-color: var(--hc-text); --bs-table-border-color: var(--hc-line);
    --bs-table-hover-bg: var(--hc-surface-2); --bs-table-hover-color: var(--hc-text); --bs-table-striped-bg: transparent;
    margin-bottom: 0; font-size: 13px; }
.table > :not(caption) > * > * { padding: 9px 12px; border-bottom-width: 1px; border-bottom-color: var(--hc-line); }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
/* шапка — отдельной полосой, подписи мелкими заглавными */
.table thead th, .table > thead > tr > th { color: var(--hc-muted); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap; background: var(--hc-surface-2); border-bottom: 1px solid var(--hc-border); padding-top: 8px; padding-bottom: 8px; }
.table thead th a { color: var(--hc-muted); }
/* строки различимы: лёгкая «зебра» (нижний слой фона), наведение — мягкий акцент (верхний слой); цифры одной ширины */
.table { font-variant-numeric: tabular-nums; --hc-zebra: color-mix(in srgb, var(--hc-text) 2.5%, transparent);
    --hc-row-hover: color-mix(in srgb, var(--hc-accent) 8%, transparent); }
.table > tbody > tr:nth-child(even) > * { --bs-table-accent-bg: var(--hc-zebra); }
/* в тёмной теме строки различимее */
[data-bs-theme="dark"] .table { --hc-zebra: color-mix(in srgb, var(--hc-text) 4%, transparent); --hc-row-hover: color-mix(in srgb, var(--hc-accent) 13%, transparent); }
.table > tbody > tr:hover > *:not(.hc-empty) { --bs-table-bg-state: var(--hc-row-hover); }
.table > tbody > tr > td:first-child { color: var(--bs-emphasis-color); }
.table > tbody > tr.is-muted > td:first-child { color: var(--hc-muted); }
.table-sm > :not(caption) > * > * { padding: 6px 10px; }
.table td, .table th { vertical-align: middle; }
.table td:first-child, .table th:first-child { padding-left: 16px; }
.table td:last-child, .table th:last-child { padding-right: 16px; }
.card .table-responsive { margin: 0; }
.table-responsive > .table thead th { position: sticky; top: 0; z-index: 1; }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: transparent; --bs-table-color: var(--hc-muted); }
/* подсветки строк — тонкие, без заливки ярким */
.table-danger, .table-warning, .table-info, .table-success { --bs-table-color: var(--hc-text); --bs-table-hover-color: var(--hc-text); }
.table-danger { --bs-table-bg: var(--hc-bad-soft); --bs-table-hover-bg: var(--hc-bad-soft); }
.table-warning { --bs-table-bg: var(--hc-warn-soft); --bs-table-hover-bg: var(--hc-warn-soft); }
.table-info { --bs-table-bg: var(--hc-info-soft); --bs-table-hover-bg: var(--hc-info-soft); }
.table-success { --bs-table-bg: var(--hc-ok-soft); --bs-table-hover-bg: var(--hc-ok-soft); }
/* метка состояния слева у строки — поверх фона ячейки (зебра, наведение, подкраска), а не вместо него */
tr.is-bad > :first-child, tr.is-warn > :first-child, tr.is-info > :first-child, tr.is-ok > :first-child {
    box-shadow: inset 3px 0 0 var(--hc-row-mark), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg, transparent))); }
tr.is-bad > :first-child { --hc-row-mark: var(--hc-bad); }
tr.is-warn > :first-child { --hc-row-mark: var(--hc-warn); }
tr.is-info > :first-child { --hc-row-mark: var(--hc-info); }
tr.is-ok > :first-child { --hc-row-mark: var(--hc-ok); }
tr.is-muted { color: var(--hc-muted); }
/* мягкая заливка строки, когда срок подходит (домены): заметно, но не пестро */
tr.tint-bad > * { --bs-table-bg-type: color-mix(in srgb, var(--hc-bad) 8%, transparent); }
tr.tint-warn > * { --bs-table-bg-type: color-mix(in srgb, var(--hc-warn) 7%, transparent); }
.hc-group-row > td { background: var(--hc-surface-2) !important; font-weight: 600; font-size: 12.5px; }
.hc-empty { padding: 28px 16px !important; text-align: center; color: var(--hc-muted); }
.detail-view th { width: 34%; color: var(--hc-muted); font-weight: 400; font-size: 12.5px; white-space: normal !important; }

/* подвал таблицы: «1–25 из 530», размер страницы, страницы */
.hc-table-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 16px; border-top: 1px solid var(--hc-line);
    font-size: 12.5px; color: var(--hc-muted); }
.hc-table-foot:empty, .hc-table-foot:not(:has(*)) { display: none; }
.hc-summary { margin-right: auto; font-variant-numeric: tabular-nums; }
.hc-summary b { font-weight: 500; color: var(--hc-text-2); }
.hc-sizes { display: inline-flex; align-items: center; gap: 2px; }
.hc-sizes a, .hc-sizes span { padding: 2px 7px; border-radius: 6px; color: var(--hc-text-2); margin-left: 2px; }
.hc-sizes a:hover { background: var(--hc-surface-2); text-decoration: none; }
.hc-sizes .active { background: var(--hc-accent-soft); color: var(--hc-accent); font-weight: 500; }
.pagination { --bs-pagination-padding-x: .6rem; --bs-pagination-padding-y: .25rem; --bs-pagination-font-size: 12.5px;
    --bs-pagination-color: var(--hc-text-2); --bs-pagination-bg: transparent; --bs-pagination-border-width: 0;
    --bs-pagination-border-radius: 7px; --bs-pagination-hover-color: var(--bs-emphasis-color); --bs-pagination-hover-bg: var(--hc-surface-2);
    --bs-pagination-focus-color: var(--hc-accent); --bs-pagination-focus-bg: var(--hc-surface-2); --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
    --bs-pagination-active-color: var(--hc-accent); --bs-pagination-active-bg: var(--hc-accent-soft); --bs-pagination-active-border-color: transparent;
    --bs-pagination-disabled-color: var(--hc-muted); --bs-pagination-disabled-bg: transparent; gap: 2px; margin: 0; }
.pagination .page-link { border-radius: 7px !important; min-width: 30px; text-align: center; }
.pagination .bi { font-size: 11px; }

/* ── кнопки ───────────────────────────────────────────────── */
.btn { --bs-btn-font-size: 13px; --bs-btn-font-weight: 500; --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .42rem; --bs-btn-border-radius: 8px;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); transition: background-color .12s, border-color .12s, color .12s; }
.btn-sm { --bs-btn-font-size: 12.5px; --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .28rem; --bs-btn-border-radius: 7px; }
.btn-lg { --bs-btn-font-size: 14px; }
.btn-primary, .btn-success { --bs-btn-color: var(--hc-on-accent); --bs-btn-bg: var(--hc-accent); --bs-btn-border-color: var(--hc-accent);
    --bs-btn-hover-color: var(--hc-on-accent); --bs-btn-hover-bg: var(--hc-accent-hover); --bs-btn-hover-border-color: var(--hc-accent-hover);
    --bs-btn-active-color: var(--hc-on-accent); --bs-btn-active-bg: var(--hc-accent-hover); --bs-btn-active-border-color: var(--hc-accent-hover);
    --bs-btn-disabled-color: var(--hc-on-accent); --bs-btn-disabled-bg: var(--hc-accent); --bs-btn-disabled-border-color: var(--hc-accent); }
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-light {
    --bs-btn-color: var(--hc-text-2); --bs-btn-bg: var(--hc-surface); --bs-btn-border-color: var(--hc-border);
    --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--hc-surface-2); --bs-btn-hover-border-color: var(--hc-border);
    --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--hc-surface-3); --bs-btn-active-border-color: var(--hc-border);
    --bs-btn-disabled-color: var(--hc-muted); --bs-btn-disabled-bg: var(--hc-surface); --bs-btn-disabled-border-color: var(--hc-border); }
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--hc-accent); --bs-btn-hover-color: var(--hc-accent); }
.btn-secondary.active, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary {
    color: var(--hc-accent); background: var(--hc-accent-soft); border-color: transparent; }
/* опасное действие — мягкое, яркое только по наведению */
.btn-danger { --bs-btn-color: var(--hc-bad); --bs-btn-bg: var(--hc-bad-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hc-bad); --bs-btn-hover-border-color: var(--hc-bad);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--hc-bad); --bs-btn-active-border-color: var(--hc-bad);
    --bs-btn-disabled-color: var(--hc-bad); --bs-btn-disabled-bg: var(--hc-bad-soft); --bs-btn-disabled-border-color: transparent; }
.btn-outline-danger { --bs-btn-color: var(--hc-text-2); --bs-btn-bg: transparent; --bs-btn-border-color: var(--hc-border);
    --bs-btn-hover-color: var(--hc-bad); --bs-btn-hover-bg: var(--hc-bad-soft); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--hc-bad); --bs-btn-active-bg: var(--hc-bad-soft); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--hc-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--hc-border); }
.btn-link { --bs-btn-color: var(--hc-accent); --bs-btn-hover-color: var(--hc-accent-hover); }
.btn .bi { margin-right: 6px; }
.btn-icon .bi, .hc-icon-btn .bi { margin-right: 0; }
.btn-group > .btn { --bs-btn-border-radius: 7px; }

/* сегменты-переключатели (фильтры, диапазоны) */
.hc-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--hc-surface-2); border: 1px solid var(--hc-border); border-radius: 9px; flex-wrap: wrap; }
.hc-seg a, .hc-seg button { border: 0; background: transparent; color: var(--hc-text-2); font-size: 12.5px; font-weight: 500;
    padding: 4px 11px; border-radius: 6px; line-height: 1.4; white-space: nowrap; }
.hc-seg a:hover, .hc-seg button:hover { color: var(--bs-emphasis-color); text-decoration: none; }
.hc-seg .active { background: var(--hc-surface); color: var(--bs-emphasis-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
[data-bs-theme="dark"] .hc-seg .active { background: var(--hc-surface-3); }
.hc-seg .count { color: var(--hc-muted); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ── формы ────────────────────────────────────────────────── */
.form-control, .form-select { background-color: var(--hc-surface); border-color: var(--hc-border); color: var(--hc-text); border-radius: 8px; font-size: 13px; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--hc-surface-2); }
.form-control::placeholder { color: var(--hc-muted); opacity: .8; }
.form-control:focus, .form-select:focus { border-color: var(--hc-accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); background-color: var(--hc-surface); color: var(--hc-text); }
.form-control-sm, .form-select-sm { font-size: 12.5px; border-radius: 7px; }
.form-check-input { background-color: var(--hc-surface-2); border-color: var(--hc-border); }
.form-check-input:checked { background-color: var(--hc-accent); border-color: var(--hc-accent); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); border-color: var(--hc-accent); }
.form-switch .form-check-input { width: 2.3em; height: 1.25em; margin-top: .15em; background-color: var(--hc-surface-3); border-color: var(--hc-border);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23959cab'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--hc-accent); border-color: var(--hc-accent);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-label { padding-left: 4px; }
.form-label, .control-label { font-size: 12.5px; color: var(--hc-text-2); margin-bottom: 4px; }
.form-text, .hint-block { font-size: 12px; color: var(--hc-muted); }
.input-search { position: relative; }
.input-search .bi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--hc-muted); font-size: 13px; pointer-events: none; }
.input-search .form-control { padding-left: 30px; }

/* ── сообщения ────────────────────────────────────────────── */
.alert { border-radius: 10px; font-size: 13px; border: 1px solid transparent; padding: 10px 14px; }
.alert-danger { background: var(--hc-bad-soft); color: var(--hc-text); border-color: color-mix(in srgb, var(--hc-bad) 25%, transparent); }
.alert-warning { background: var(--hc-warn-soft); color: var(--hc-text); border-color: color-mix(in srgb, var(--hc-warn) 25%, transparent); }
.alert-success { background: var(--hc-ok-soft); color: var(--hc-text); border-color: color-mix(in srgb, var(--hc-ok) 25%, transparent); }
.alert-info { background: var(--hc-info-soft); color: var(--hc-text); border-color: color-mix(in srgb, var(--hc-info) 25%, transparent); }
.alert .btn-close { padding: 12px 14px; font-size: 11px; }
.alert .btn-close[data-alerts-hide] { padding: 4px; font-size: 10px; opacity: .55; }
.alert .btn-close[data-alerts-hide]:hover { opacity: .9; }
[data-bs-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(100%) brightness(160%); }
/* короткая заметка внутри карточки (ошибка опроса кабинета и т. п.) */
.hc-note { font-size: 12.5px; padding: 7px 10px; border-radius: 8px; background: var(--hc-surface-2); color: var(--hc-text-2); }
.hc-note.bad { background: var(--hc-bad-soft); color: var(--hc-bad); }
.hc-note.warn { background: var(--hc-warn-soft); color: var(--hc-warn); }
.hc-note.ok { background: var(--hc-ok-soft); color: var(--hc-ok); }

/* ── статусы, метки ───────────────────────────────────────── */
.status-ok { color: var(--hc-ok); }
.status-soon { color: var(--hc-warn); font-weight: 500; }
.status-urgent { color: var(--hc-bad); font-weight: 500; }
.status-unknown { color: var(--hc-muted); }
.badge { font-weight: 500; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; }
.badge-new { background: var(--hc-info-soft); color: var(--hc-info); }
.badge-processing { background: var(--hc-accent-soft); color: var(--hc-accent); }
.badge-done { background: var(--hc-ok-soft); color: var(--hc-ok); }
.badge-skipped { background: var(--hc-surface-3); color: var(--hc-muted); }
.badge-failed { background: var(--hc-bad-soft); color: var(--hc-bad); }
.text-bg-success { background: var(--hc-ok-soft) !important; color: var(--hc-ok) !important; }
.text-bg-secondary { background: var(--hc-surface-3) !important; color: var(--hc-muted) !important; }
.text-bg-warning, .bg-warning { background: var(--hc-warn-soft) !important; color: var(--hc-warn) !important; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
    background: var(--hc-surface-2); color: var(--hc-text-2); white-space: nowrap; line-height: 1.6; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip.plain::before { display: none; }
.chip.ok { background: var(--hc-ok-soft); color: var(--hc-ok); }
.chip.warn { background: var(--hc-warn-soft); color: var(--hc-warn); }
.chip.bad { background: var(--hc-bad-soft); color: var(--hc-bad); }
.chip.info { background: var(--hc-info-soft); color: var(--hc-info); }
.chip.accent { background: var(--hc-accent-soft); color: var(--hc-accent); }
a.chip:hover { text-decoration: none; filter: brightness(1.1); }
.chip .spinner-border { --bs-spinner-width: .75rem; --bs-spinner-height: .75rem; --bs-spinner-border-width: .12em; }
.chip:has(.spinner-border)::before { display: none; }

/* «Общая»: блок на ресурс (контекст, прокси, домены, капчи) — значок, название, состояние, ссылка в раздел */
.hc-res-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hc-res-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.hc-res-icon.tint-context { background: color-mix(in srgb, #8b7cf6 18%, transparent); color: #8b7cf6; }
.hc-res-icon.tint-proxy { background: color-mix(in srgb, #3fa7e0 18%, transparent); color: #3fa7e0; }
.hc-res-icon.tint-domain { background: color-mix(in srgb, #ff7a45 18%, transparent); color: #ff7a45; }
.hc-res-icon.tint-captcha { background: color-mix(in srgb, #e86fa5 18%, transparent); color: #e86fa5; }
.hc-res-icon.tint-log { background: var(--hc-surface-2); color: var(--hc-muted); }
.hc-res-title { font-weight: 600; font-size: 14px; color: var(--hc-text); }
.hc-res-link { margin-left: auto; font-size: 12.5px; font-weight: 400; white-space: nowrap; }
.hc-res-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hc-muted); margin: 0 0 8px; }
.hc-res-sub a { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 18px; }
.hc-stat-value { font-size: 20px; font-weight: 600; line-height: 1.25; margin-top: 2px; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.hc-stat-value.bad { color: var(--hc-bad); } .hc-stat-value.warn { color: var(--hc-warn); } .hc-stat-value.ok { color: var(--hc-ok); }
.hc-stat-of { font-size: 14px; font-weight: 400; color: var(--hc-muted); }
.hc-stat-sub { font-size: 12px; margin-top: 2px; color: var(--hc-muted); }
.hc-stat-sub.ok { color: var(--hc-ok); } .hc-stat-sub.warn { color: var(--hc-warn); } .hc-stat-sub.bad { color: var(--hc-bad); }
/* строка списка в блоке: заявка, кабинет с деньгами */
.hc-line, .hc-money { display: flex; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--hc-line); font-size: 13px; }
.hc-money { flex-wrap: wrap; }
.hc-line:last-child, .hc-money:last-of-type { border-bottom: 0; }
.hc-line-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* название не режется: если рядом не помещается, баланс и метка уходят на вторую строку вправо */
.hc-money-name { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-money-balance { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--hc-text-2); }
.hc-money-todo { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.hc-money .chip { flex: none; }
.hc-money-err { font-size: 12px; color: var(--hc-bad); margin: -2px 0 4px; }
/* итог к оплате над блоками */
.hc-paybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-radius: var(--hc-radius);
    background: var(--hc-surface); border: 1px solid var(--hc-border); font-size: 13.5px; }
.hc-paybar > .bi { color: var(--hc-muted); }

/* две кнопки — одна «таблетка»: снаружи скругление, на стыке прямые углы и тонкий разделитель; мягкий акцент */
.hc-pair > .btn { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 14px; --bs-btn-color: var(--hc-accent); --bs-btn-bg: var(--hc-accent-soft);
    --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--hc-on-accent, #fff); --bs-btn-hover-bg: var(--hc-accent);
    --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--hc-on-accent, #fff); --bs-btn-active-bg: var(--hc-accent-hover);
    --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--hc-accent); --bs-btn-disabled-bg: var(--hc-accent-soft);
    --bs-btn-disabled-border-color: transparent; font-weight: 500; }
.hc-pair > .btn + .btn { margin-left: 0; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--hc-accent) 35%, transparent); }
@media (max-width: 575.98px) {
    .hc-pair { width: 100%; }
    .hc-pair > .btn { flex: 1 1 0; }
}

/* полосы текущего состояния на «Графиках»: балансы, прокси против цели */
.hc-meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 28px; }
.hc-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.hc-meter-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hc-text-2); }
.hc-meter-value { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--hc-text); }
.hc-meter-of { font-weight: 400; color: var(--hc-muted); }
.hc-meter-bar { height: 6px; margin-top: 7px; border-radius: 999px; background: var(--hc-surface-3); overflow: hidden; }
.hc-meter-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--hc-accent); }
.hc-meter.is-ok .hc-meter-bar > span { background: var(--hc-ok); }
.hc-meter.is-warn .hc-meter-bar > span { background: var(--hc-warn); }
.hc-meter.is-bad .hc-meter-bar > span { background: var(--hc-bad); }
.hc-meter.is-bad .hc-meter-value, .hc-meter.is-bad .hc-meter-note { color: var(--hc-bad); }
.hc-meter-note { margin-top: 5px; font-size: 12px; color: var(--hc-muted); }

/* уведомления о замене — внизу справа (на телефоне — во всю ширину), поверх окна */
.hc-toasts { position: fixed; right: max(16px, calc((100vw - var(--hc-site)) / 2 + 16px)); bottom: 16px; z-index: 1090; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.hc-toast { --bs-toast-max-width: 100%; width: 100%; padding: 12px 14px; font-size: 13px; color: var(--hc-text); background: var(--hc-surface);
    border: 1px solid var(--hc-border); border-left: 3px solid var(--hc-info); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.hc-toast > div > .bi { font-size: 16px; line-height: 1.2; color: var(--hc-info); }
.hc-toast.ok { border-left-color: var(--hc-ok); }
.hc-toast.ok > div > .bi { color: var(--hc-ok); }
.hc-toast.bad { border-left-color: var(--hc-bad); }
.hc-toast.bad > div > .bi { color: var(--hc-bad); }
.hc-toast .btn-close { font-size: 10px; margin-top: 3px; }
[data-bs-theme="dark"] .hc-toast .btn-close { filter: invert(1) grayscale(100%) brightness(160%); }
@media (max-width: 575.98px) { .hc-toasts { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; } }

/* строка, которую только что меняли, — вспышка подсветки */
@keyframes hc-flash { 0%, 35% { background-color: var(--hc-accent-soft); } 100% { background-color: transparent; } }
tr.hc-flash > td, #proxy-table tbody tr.hc-flash { animation: hc-flash 2.4s ease-out; }
a:hover > .chip { filter: brightness(1.1); }
/* длинная метка состояния переносится, а не раздвигает колонки */
#proxy-table .chip, .chip.wrap { white-space: normal; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; }
.chip::before { flex: none; }
#proxy-table td.pc-city { min-width: 170px; }
#proxy-table td.pc-state { max-width: 300px; }

pre.log { white-space: pre-wrap; font-size: 12px; line-height: 1.55; background: var(--hc-surface-2); color: var(--hc-text-2); padding: 12px 14px;
    border-radius: 10px; max-height: 480px; overflow: auto; border: 1px solid var(--hc-line); }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.setting-default { font-size: 11.5px; color: var(--hc-muted); margin-top: 2px; }
.hc-login .card { margin-top: 0; }
.hc-login-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: 18px; }
.hc-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--hc-text-2); }
.hc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* окна */
.modal { --bs-modal-bg: var(--hc-surface); --bs-modal-border-color: var(--hc-border); --bs-modal-border-radius: 14px;
    --bs-modal-header-border-color: var(--hc-line); --bs-modal-footer-border-color: var(--hc-line); --bs-modal-color: var(--hc-text); }
.modal-title { font-size: 15px; font-weight: 600; color: var(--bs-emphasis-color); }
.modal-backdrop { --bs-backdrop-opacity: .55; }
[data-bs-theme="dark"] .modal .btn-close { filter: invert(1) grayscale(100%) brightness(160%); }
optgroup { color: var(--hc-muted); font-style: normal; }

/* ── телефоны и планшеты, обе ориентации ────────────────────── */
/* планшеты в обеих ориентациях и уже: меню — в шторке, таблицам вся ширина */
@media (max-width: 1199.98px) {
    .hc-content { padding: 18px 16px 40px; }
    .hc-topbar { padding: 10px 16px; }
}
/* телефон и узкий планшет: плотнее, фильтры в шапках карточек — на всю ширину */
@media (max-width: 767.98px) {
    body.hc { font-size: 13.5px; }
    .hc-title { font-size: 16px; }
    .card-header { padding: 10px 12px; }
    .card-body { padding: 12px; }
    .table > :not(caption) > * > * { padding: 8px; }
    .table td:first-child, .table th:first-child { padding-left: 12px; }
    .table td:last-child, .table th:last-child { padding-right: 12px; }
    .kpi { padding: 12px 14px; }
    .kpi-value { font-size: 19px; }
    .fs-4 { font-size: 1.15rem !important; }
    .hc-table-foot { padding: 10px 12px; }
    .card-header > .hc-toolbar, .card-header > form.hc-toolbar { width: 100%; }
    .card-header .hc-toolbar > .form-select, .card-header .hc-toolbar > .input-search { flex: 1 1 150px; width: auto !important; }
    .input-search .form-control { width: 100% !important; }
    .card-header .input-search { flex: 1 1 160px; }
    /* сегменты не переносятся, а листаются */
    .hc-seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .hc-seg::-webkit-scrollbar { display: none; }
    .modal-footer .btn { flex: 1 1 auto; }
    .hc-toolbar > .ms-auto { margin-left: 0 !important; }
}
/* телефон вертикально */
@media (max-width: 575.98px) {
    .hc-content { padding: 12px 10px 32px; }
    .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .hc-sizes { display: none; }
    .hc-summary { margin-right: 0; }
    .hc-table-foot { justify-content: center; }
    .hc-brand { padding-bottom: 12px; }
    /* прокси — карточками: адрес и «Сменить», ниже город · оператор, ниже состояние */
    #proxy-table, #proxy-table tbody { display: block; }
    #proxy-table thead { display: none; }
    #proxy-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 10px 12px; border-bottom: 1px solid var(--hc-line); }
    #proxy-table tbody tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
    #proxy-table tbody td { display: block; padding: 0 !important; border: 0; box-shadow: none !important; background: none; }
    #proxy-table tbody td.d-none { display: none !important; }
    #proxy-table tbody td.pc-addr { order: 0; flex: 1 1 auto; min-width: 0; }
    #proxy-table tbody td.pc-act { order: 1; }
    #proxy-table tbody td.pc-city { order: 3; min-width: 0; color: var(--hc-text-2); }
    #proxy-table tbody td.pc-op { order: 4; color: var(--hc-muted); }
    #proxy-table tbody td.pc-op::before { content: "· "; }
    #proxy-table tbody td.pc-age { display: block !important; order: 5; color: var(--hc-muted); }
    #proxy-table tbody td.pc-age::before { content: "· в работе "; }
    #proxy-table tbody td.pc-state { order: 6; flex-basis: 100%; max-width: none; margin-top: 3px; }
    #proxy-table tbody td.pc-state:empty { display: none; }
    #proxy-table tbody td.hc-empty, #proxy-table tbody td[colspan] { flex-basis: 100%; padding: 16px 0 !important; }
    #proxy-table tr.is-bad { box-shadow: inset 3px 0 0 var(--hc-bad); }
    #proxy-table tr.is-warn { box-shadow: inset 3px 0 0 var(--hc-warn); }
    #proxy-table tr.is-info { box-shadow: inset 3px 0 0 var(--hc-info); }
    #proxy-table tr.is-ok { box-shadow: inset 3px 0 0 var(--hc-ok); }
}
/* телефон горизонтально: экран низкий — шапка не липнет, отступы меньше */
@media (max-height: 520px) and (orientation: landscape) {
    .hc-topbar { position: static; padding: 6px 16px; }
    .hc-content { padding-top: 12px; }
    .hc-sidebar { padding-top: 10px; }
    .hc-nav-link { padding-top: 5px; padding-bottom: 5px; }
    .modal-dialog { margin: 8px auto; }
    .modal-body { max-height: calc(100vh - 140px); overflow-y: auto; }
}
/* сенсорные экраны: цели нажатия крупнее */
@media (pointer: coarse) {
    .btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .75rem; }
    .hc-nav-link { padding-top: 10px; padding-bottom: 10px; }
    .hc-seg a, .hc-seg button { padding: 6px 12px; }
    .pagination .page-link { min-width: 36px; padding: .4rem .5rem; }
    .hc-sizes a, .hc-sizes span { padding: 5px 9px; }
    .form-select, .form-control { min-height: 38px; }
}
/* вырезы экрана у телефонов в альбомной ориентации */
@media (max-width: 1199.98px) {
    @supports (padding: env(safe-area-inset-left)) {
        .hc-topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
        .hc-content { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
    }
}

/* прокрутка — тонкая */
* { scrollbar-width: thin; scrollbar-color: var(--hc-surface-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hc-surface-3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* строка-ссылка в блоке «Общей»: заявка открывает окно замены */
a.hc-line-link { color: inherit; text-decoration: none; border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
a.hc-line-link:hover { background: var(--hc-accent-soft); text-decoration: none; }
a.hc-line-link:hover .hc-line-main { color: var(--hc-accent-hover); }

/* «Контекст»: компактные карточки графиков, разделы сворачиваются */
details.hc-sect > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; margin-top: 8px; }
details.hc-sect > summary::-webkit-details-marker { display: none; }
details.hc-sect > summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: 11px; transition: transform .15s; color: var(--hc-muted); }
details.hc-sect[open] > summary::before { transform: rotate(90deg); }
.hc-mini > .card-header { padding: 8px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-mini > .card-body { padding: 8px 10px; }
.hc-mini .kpi-value { font-size: 20px; }
/* плитка в узкой карточке: значения одной строкой, длинные подписи переносятся под своим числом */
.hc-mini .panel-body[data-type="stat"] > .d-flex { flex-wrap: nowrap; gap: 14px !important; }
.hc-mini .panel-body[data-type="stat"] > .d-flex > div { padding: 0 !important; min-width: 0; }
/* сетка графиков «Контекста»: все одной ширины — 1 / 2 / 4 в ряд; плитки «Сейчас» — ровной полосой */
.hc-chart-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .hc-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .hc-chart-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-chart-grid.is-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-chart-grid.is-stats > .hc-mini:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .hc-chart-grid.is-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .hc-chart-grid.is-stats > .hc-mini:last-child:nth-child(odd) { grid-column: auto; }
}
.hc-chart-grid > .hc-mini { min-width: 0; margin: 0; }
details.hc-sect > summary.hc-section-title { margin: 18px 0 10px; }