/* Общий стиль admstat. Подключение: <link rel="stylesheet" href="/css/admstat.css"> */

:root {
    /* пастельная палитра; контраст — по WCAG: текст ≥ 4.5:1 (основной ≥ 12:1), рамки полей ≥ 3:1 */
    --bg: #eaf0fb;
    --surface: #ffffff;
    --surface-2: #e2eafa;
    --border: #c2cde4;          /* рамки карточек, разделители */
    --border-strong: #6b7898;   /* рамки полей ввода */
    --text: #0e1426;
    --text-muted: #39425e;
    --accent: #2f45d6;
    --accent-soft: #d6defe;
    --on-accent: #ffffff;       /* текст на кнопках/значках цвета accent */
    --danger: #c8102e;
    --on-danger: #ffffff;
    --on-muted: #ffffff;        /* текст на серых метках */
    --highlight: #ffd54a;
    --svc-inet: #2456d9;
    --svc-phone: #0f7a3d;
    --svc-hosting: #c2410c;
    --svc-private: #6a2fd0;
    /* пастельные подложки и тёмный текст на них */
    --tint-blue: #c9dbff;  --ink-blue: #132c78;
    --tint-green: #bdeccf;  --ink-green: #0b4426;
    --tint-peach: #ffd6b8;  --ink-peach: #722a04;
    --tint-lilac: #ddd0ff;  --ink-lilac: #381a80;
    --tint-pink: #ffccd8;  --ink-pink: #7e0f2c;
    --tint-yellow: #ffe78f;  --ink-yellow: #523900;
    --tint-teal: #bcebea;  --ink-teal: #08403f;
    /* яркие цвета для сплошных плашек с белым текстом (контраст ≥ 4.5:1) */
    --vivid-blue: #2456d9;   --vivid-green: #0f7a3d;  --vivid-orange: #c2410c;
    --vivid-violet: #6a2fd0; --vivid-teal: #0b7270;   --vivid-rose: #c8103e;
    --on-vivid: #ffffff;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(40, 55, 110, .06), 0 2px 8px rgba(40, 55, 110, .06);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    /* старые GIF-иконки (синие стрелки, «?», «+», «x») на тёмном фоне не видны — светлая подложка */
    .legacy img[src*=".gif"], .ui.legacy img[src*=".gif"] { background: #e8edf3; border-radius: 2px; padding: 1px; }
    :root {
        --bg: #0d1124;
        --surface: #171d36;
        --surface-2: #212a4d;
        --border: #3a4577;
        --border-strong: #8290b8;
        --text: #f5f7ff;
        --text-muted: #c6cde8;
        --accent: #9fb0ff;
        --accent-soft: #2c3a80;
        --on-accent: #11152a;   /* светлая кнопка — тёмный текст */
        --danger: #fda4af;
        --on-danger: #11152a;
        --on-muted: #11152a;
        --highlight: #7a5c0c;
        --svc-inet: #93b4ff;
        --svc-phone: #86d9ac;
        --svc-hosting: #fbb885;
        --svc-private: #c9b3ff;
        --tint-blue: #233a86;  --ink-blue: #d6e2ff;
        --tint-green: #18503a;  --ink-green: #c4f5da;
        --tint-peach: #5e3016;  --ink-peach: #ffdcc4;
        --tint-lilac: #3f2a86;  --ink-lilac: #e5dbff;
        --tint-pink: #64213a;  --ink-pink: #ffd0dc;
        --tint-yellow: #54440f;  --ink-yellow: #fff0b3;
        --tint-teal: #154f55;  --ink-teal: #c2f4f4;
        --vivid-blue: #3d68e8;   --vivid-green: #13803f;  --vivid-orange: #c2410c;
        --vivid-violet: #7340d8; --vivid-teal: #0b7270;   --vivid-rose: #c8103e;
        --shadow: 0 1px 3px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body.ui {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ui a { color: var(--accent); text-decoration: none; }
.ui a:hover { text-decoration: underline; }

.ui input[type=text],
.ui input[type=search],
.ui input[type=number],
.ui select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.ui input[type=text]:focus,
.ui input[type=search]:focus,
.ui input[type=number]:focus,
.ui select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.ui button,
.ui input[type=submit] {
    padding: 6px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    cursor: pointer;
}
.ui button.secondary,
.ui a.button { background: var(--surface); color: var(--accent); }
.ui a.button { display: inline-block; padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--radius); }
.ui button[aria-expanded=true].secondary { background: var(--accent-soft); }
.ui .badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 2px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 16px; text-align: center; }

/* ---- шапка панели ---- */
.panel-head {
    padding: 10px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.panel-head .title { font-weight: 600; font-size: 15px; }
.panel-head .user { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.panel-head .warn { color: var(--danger); font-size: 13px; }
.panel-head nav { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }

/* ---- закреплённая строка поиска ---- */
.toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.toolbar .row { display: flex; gap: 6px; align-items: center; }
.toolbar .row input { flex: 1; }
/* скрытая панель фильтров (кнопка «Фильтры») */
.filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 13px;
    color: var(--text-muted);
}
.filters[hidden] { display: none; }
.filters label { display: flex; flex-direction: column; gap: 3px; }
.filters .range { display: flex; gap: 8px; }
.filters .range label { flex: 1; }
.toolbar .status { font-size: 13px; color: var(--text-muted); min-height: 16px; }
.note { margin: 8px 12px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); font-size: 14px; }

/* ---- группы (точки подключения) ---- */
.groups { padding: 6px 8px 24px; }
.group { margin-bottom: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ui .group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ui .group-head:hover { background: var(--surface-2); }
.group-head .chevron { width: 12px; color: var(--text-muted); transition: transform .15s; }
.group.open .group-head .chevron { transform: rotate(90deg); }
.group-head .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { font-weight: 400; font-size: 13px; color: var(--text-muted); background: var(--surface-2); border-radius: 10px; padding: 0 7px; }
.group.has-match .count { background: var(--highlight); color: var(--text); }
.group-body { display: none; border-top: 1px solid var(--border); }
.group.open .group-body { display: block; }
.group.empty-result { display: none; }

/* ---- клиенты ---- */
.client {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 28px;
    border-bottom: 1px solid var(--surface-2);
}
.client:last-child { border-bottom: 0; }
.client:hover { background: var(--surface-2); }
.client a { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client.private { background: var(--surface-2); }
.client.debtor a { color: var(--danger); }
.client.hidden { display: none; }
.client.match-data a::after { content: " \2022"; color: var(--accent); }
.client .amount { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.client mark { background: var(--highlight); color: inherit; border-radius: 2px; padding: 0 1px; }
.empty { padding: 4px 10px 4px 28px; color: var(--text-muted); }

/* ---- значки услуг ---- */
.svc { display: inline-flex; gap: 2px; }
.svc span {
    display: inline-block;
    min-width: 16px;
    padding: 0 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
.svc .inet { background: var(--svc-inet); }
.svc .ph { background: var(--svc-phone); }
.svc .hosting { background: var(--svc-hosting); }
.svc .private { background: var(--svc-private); }

/* ---- общие элементы ---- */
.ui button.danger { background: var(--danger); border-color: var(--danger); }
.ui mark { background: var(--highlight); color: inherit; border-radius: 2px; padding: 0 1px; }
.ui .tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 13px; font-weight: 500; vertical-align: middle; }
.ui .tag.private { background: var(--svc-private); color: #fff; }
.ui .denied { color: var(--danger); }

/* ---- карточка клиента (db/show_corp_se.php) ---- */
body.card { padding: 12px; }
.card-head {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-head .meta { font-size: 13px; color: var(--text-muted); }
.card-head h1 { margin: 4px 0 8px; font-size: 20px; font-weight: 600; }
.card-head .props { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.card-head .props .label { display: block; font-size: 13px; color: var(--text-muted); }
.card-head .alert { margin-top: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); font-weight: 600; }
.card-head .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card-head .actions:empty { display: none; }

.uslugi-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 6px; }
.uslugi-bar h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.uslugi .empty { padding: 8px 0; }
.usluga { margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ui .usluga-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ui .usluga-head:hover { background: var(--surface-2); }
.usluga-head .chevron { width: 12px; color: var(--text-muted); transition: transform .15s; }
.usluga.open .usluga-head .chevron { transform: rotate(90deg); }
.usluga-head .svc span { padding: 2px 10px; font-size: 14px; line-height: 18px; }
.usluga-body { display: none; padding: 10px 12px; border-top: 1px solid var(--border); overflow-x: auto; }
.usluga.open .usluga-body { display: block; }

.card-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; }
.card-actions .row { display: flex; gap: 6px; align-items: center; }
.card-actions select { width: auto; }

/* ---- старая разметка внутри нового оформления (.legacy): таблицы с bgcolor/border/<font color> ---- */
.legacy table { border-collapse: collapse; background: transparent; color: inherit; }
.legacy td, .legacy th { padding: 3px 6px; vertical-align: top; }
.legacy table[border]:not([border="0"]),
.legacy table[border]:not([border="0"]) > * > tr > td,
.legacy table[border]:not([border="0"]) > * > tr > th { border: 1px solid var(--border); }
.legacy [bgcolor] { background: transparent; }
.legacy [bgcolor=black] { background: var(--border); }
.legacy tr[bgcolor=black] > td { padding: 0; height: 1px; }
.legacy [bgcolor=red] { background: var(--danger); color: var(--on-danger); }
.legacy [bgcolor=yellow] { background: var(--highlight); }
.legacy [bgcolor=green] { background: var(--svc-phone); color: #fff; }
.legacy font[color] { color: inherit; }
.legacy font[color=red] { color: var(--danger); }
.legacy font[color=yellow], .legacy font[color=blue], .legacy font[color=lightgreen] { color: var(--accent); }
.legacy font[color=green] { color: var(--svc-phone); }
.legacy font[color=gray], .legacy font[color=lightgrey], .legacy font[color=lighgrey] { color: var(--text-muted); }
.legacy font[size] { font-size: inherit; }
.legacy hr { border: 0; border-top: 1px solid var(--border); }
.legacy h1 { font-size: 18px; }
.legacy img[src*="small_submit"], .legacy img[src*="question"] { cursor: pointer; vertical-align: middle; }
.ui .legacy input[type=text], .ui .legacy select,
.ui.legacy input[type=text], .ui.legacy select { width: auto; max-width: 100%; padding: 3px 6px; }
.ui .legacy button, .ui .legacy input[type=submit], .ui .legacy input[type=button],
.ui.legacy button, .ui.legacy input[type=submit], .ui.legacy input[type=button] { padding: 4px 10px; }
.legacy textarea { max-width: 100%; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.legacy input[type=password], .legacy input:not([type]) { padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.ui .legacy input[type=button], .ui.legacy input[type=button] { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface); color: var(--accent); font: inherit; cursor: pointer; }
.legacy [style*="#ffcc00"] { background: var(--highlight) !important; color: inherit !important; }

/* ---- панель «Изменить клиента» (db/client_edit.inc.php) ---- */
.card-head .notice { margin-top: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.edit-panel {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.edit-panel h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.edit-panel .alert { margin: 0 0 10px; }
.edit-panel .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.edit-panel .fields .wide { grid-column: 1 / -1; }
.edit-panel label, .edit-panel .fields > div { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.edit-panel .fields > div { color: var(--text); font-size: 14px; }
.edit-panel .label { font-size: 13px; color: var(--text-muted); }
.ui .edit-panel label input, .ui .edit-panel label select { font-size: 14px; color: var(--text); }
.edit-panel .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.edit-panel .row input[type=text], .edit-panel .row select { flex: 1; min-width: 160px; width: auto; }
.edit-panel .places { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.edit-panel .places summary { cursor: pointer; color: var(--accent); margin-bottom: 8px; }
.edit-panel .places form { margin-bottom: 6px; }
.edit-panel input:invalid:not(:placeholder-shown) { border-color: var(--danger); }

/* ---- встроенная панель вместо всплывающих окон (js/client-card.js, db/change.php) ---- */
.inline-panel {
    margin: 0 0 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.card-head .inline-panel { margin: 12px 0 0; }
.inline-panel-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--accent-soft); }
.inline-panel-head .title { flex: 1; font-weight: 600; }
.ui .inline-panel-head .close { padding: 2px 10px; border: 0; background: none; color: var(--text); font-size: 18px; line-height: 1; }
.ui .inline-panel-head .close:hover { background: var(--surface); }
.inline-panel iframe { display: block; width: 100%; height: 120px; border: 0; background: var(--surface); }
.inline-panel.loading iframe { opacity: .4; }
[data-panel] { cursor: pointer; }

/* страница внутри панели */
body.embed { padding: 8px 10px; background: var(--surface); }
html.in-panel body.embed { padding: 8px 12px 12px; }
html.in-panel img[src*="close.gif"] { display: none; }
.change-page { width: 100%; }

/* ---- «Данные по клиенту» (db/client_params.inc.php) ---- */
.params-page h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.params-page h2 .sub { color: var(--text-muted); font-weight: 400; }
.params-page .notice { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.params-page .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.params-page .params { display: flex; flex-direction: column; gap: 8px; }
.params-page .param { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 4px 10px; align-items: start; }
.params-page .param > label:first-child { padding-top: 5px; color: var(--text-muted); }
.params-page .param textarea { width: 100%; resize: vertical; }
.params-page .param .del { padding-top: 5px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.params-page .param:has(.del input:checked) textarea { opacity: .45; text-decoration: line-through; }
.params-page .param.add { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); grid-template-columns: minmax(140px, 220px) minmax(160px, 260px) 1fr; }
.params-page .param.add select { width: 100%; }
.params-page .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.params-page .row input[type=text], .params-page .row select { flex: 1; min-width: 160px; }
.params-page .places { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.params-page .places summary { cursor: pointer; color: var(--accent); }
.params-page .places .row { margin-top: 8px; }
.params-page .empty { color: var(--text-muted); }
@media (max-width: 560px) {
    .params-page .param, .params-page .param.add { grid-template-columns: 1fr; }
}
html.in-panel .params-page h2 { display: none; }

/* ---- «Дополнительные ежемесячные платежи» (db/client_add_payments.inc.php) ---- */
.payments-page .unit { font-weight: 400; color: var(--text-muted); }
.payments-page table.payments { width: 100%; border-collapse: collapse; }
.payments-page table.payments th { padding: 4px 6px; text-align: left; font-weight: 500; font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.payments-page table.payments td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.payments-page table.payments td:first-child { width: 1%; padding-top: 10px; color: var(--text-muted); }
.payments-page table.payments .num { width: 1%; white-space: nowrap; }
.payments-page table.payments textarea { width: 100%; min-width: 180px; resize: vertical; }
.ui .payments-page input[type=text] { width: 9em; text-align: right; }
.payments-page table.payments tr:has(.del input:checked) textarea,
.payments-page table.payments tr:has(.del input:checked) input[type=text] { opacity: .45; text-decoration: line-through; }
.payments-page h3 { margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.payments-page .new-payment { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.payments-page .new-payment label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.payments-page .new-payment textarea { width: 100%; resize: vertical; font-size: 14px; }
.payments-page .hint { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.payments-page code { padding: 0 3px; border-radius: 3px; background: var(--surface-2); }
@media (max-width: 560px) { .payments-page .new-payment { grid-template-columns: 1fr; } }

/* ---- главное меню (menu.php) ---- */
.panel-head .expired { color: var(--danger); font-weight: 600; }
.menu { padding: 8px 8px 24px; }
.menu .alert { margin: 4px 0 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.menu-section { margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-section h2 { margin: 0; padding: 7px 12px; font-size: 15px; font-weight: 600; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.menu-section ul { margin: 0; padding: 4px 0; list-style: none; }
.menu-section li a { display: block; padding: 5px 12px; color: var(--text); }
.menu-section li a:hover { background: var(--surface-2); text-decoration: none; color: var(--accent); }
.menu-section li.sub a { padding-left: 28px; font-size: 14px; color: var(--text-muted); }
.menu-section li.sub a:hover { color: var(--accent); }
.menu-section .ext { color: var(--text-muted); font-size: 13px; }
.ui.start { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: var(--text-muted); }

/* ---- «Упал канал» (alert.php) ---- */
body.info-page { padding: 12px 16px 32px; }
.info-page .page-head { position: sticky; top: 0; z-index: 2; margin: -12px -16px 12px; padding: 12px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.info-page h1 { margin: 0; font-size: 18px; font-weight: 600; }
.info-page .meta { margin: 2px 0 8px; font-size: 13px; color: var(--text-muted); }
.info-page .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.info-page .row input[type=search], .info-page .row input[type=text] { flex: 1; min-width: 180px; }
.info-page .notice { margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.info-page .alert { margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.alert-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-items: start; }
.alert-sections .empty { grid-column: 1 / -1; color: var(--text-muted); }
.alert-section { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.alert-section h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.alert-section .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.alert-edit .hint { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.alert-edit code { padding: 0 3px; border-radius: 3px; background: var(--surface-2); }
.alert-edit-section { margin: 0 0 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.alert-edit-section textarea { width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.ui .alert-edit-section button { padding: 4px 9px; }
.alert-edit-section .del { font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.alert-edit-section:has(.del input:checked) { opacity: .5; }
.alert-edit .actions { position: sticky; bottom: 0; margin-top: 10px; padding: 8px 0; background: var(--bg); }
.alert-sections[hidden] { display: none; }

/* ---- статистика (db/otchets/newstat.php) ---- */
body.stat-page { padding: 12px 16px 32px; }
.stat-page .page-head { margin: 0 0 12px; }
.stat-page h1 { margin: 0; font-size: 18px; font-weight: 600; }
.stat-page .page-head .meta { font-size: 13px; color: var(--text-muted); }
.stat-page .notice { margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.stat-page .alert { margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.stat-page .card { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-page h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.stat-page .by { display: flex; gap: 16px; margin-bottom: 10px; }
.stat-page .choice { cursor: pointer; }
.stat-page .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.stat-page .field { display: flex; flex-direction: column; gap: 4px; }
.stat-page .field[hidden] { display: none; }
.stat-page .field > label { font-size: 13px; color: var(--text-muted); }
.stat-page .by-client select + input { margin-top: 4px; }
.stat-page .period { display: flex; align-items: center; gap: 6px; }
.stat-page input[type=date] { flex: 1; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.stat-page .presets { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ui .stat-page button.link, .ui button.link { padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; }
.ui button.link:hover { text-decoration: underline; }
.stat-page .row { display: flex; gap: 6px; margin-top: 12px; }
.stat-page .reports-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.stat-page .reports-head h2 { flex: 1; margin: 0; }
.stat-page .queue { font-size: 13px; color: var(--text-muted); }
.stat-page .table-wrap { overflow-x: auto; }
.stat-page table.list { width: 100%; border-collapse: collapse; }
.stat-page table.list th { padding: 5px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.stat-page table.list td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.stat-page table.list tr:hover td { background: var(--surface-2); }
.stat-page .nowrap { white-space: nowrap; }
.stat-page .muted { color: var(--text-muted); }
.stat-page .reports-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.stat-page .pager { display: flex; align-items: center; gap: 4px; }
.stat-page .pager a, .stat-page .pager span { padding: 3px 9px; border-radius: var(--radius); }
.stat-page .pager span { color: var(--text-muted); }
.stat-page .pager a:hover { background: var(--surface-2); text-decoration: none; }
.stat-page .pager .cur { color: var(--text); }
.stat-page pre.report { padding: 12px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- WHO IS WHO (db/who.php) ---- */
body.who-page { padding: 12px 16px 32px; }
.who-page .page-head { margin-bottom: 12px; }
.who-page h1 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.who-page h1 a { color: var(--text); }
.who-page .row { display: flex; gap: 6px; }
.who-page .row input { flex: 1; }
.who-page .alert { margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.who-page .card { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.who-page h2 { margin: 0; font-size: 15px; font-weight: 600; }
.who-page h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.who-page .net-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.who-page .muted { color: var(--text-muted); font-size: 14px; }
.who-page .conflict { color: var(--danger); }
.who-page .only-used { margin-left: auto; font-size: 14px; cursor: pointer; }
.who-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap; }
.who-page .table-wrap { overflow-x: auto; }
.who-page table.list { width: 100%; border-collapse: collapse; }
.who-page table.list th { padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.who-page table.list td { padding: 4px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.who-page table.list tr.conflict td { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.who-page table.list tr.free td { color: var(--text-muted); }
.who-page table.addrs.only-used tr.unused { display: none; }
.who-page .tag.free { background: var(--svc-phone); color: #fff; font-size: 12px; }
.who-page .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.who-page .tile { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.who-page a.tile:hover { border-color: var(--accent); text-decoration: none; }
.who-page .tile .n { font-weight: 600; }
.who-page .tile.lvl0 { background: var(--surface); color: var(--text-muted); }
.who-page .tile.lvl1 { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.who-page .tile.lvl2 { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.who-page .tile.lvl3 { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.who-page .tile.lvl4 { background: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
.who-page .tile.has-conflict { border: 2px solid var(--danger); }
.who-page .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.who-page .legend .tile { display: inline-block; width: 16px; height: 12px; padding: 0; }

/* ---- итоговые счета (db/schet/schet_main.php) ---- */
body.schet-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.schet-top { display: flex; align-items: baseline; gap: 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.schet-top h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.schet-page .muted { color: var(--text-muted); font-size: 13px; }
.schet-layout { flex: 1; display: flex; min-height: 0; }
.schet-side { width: 330px; flex: none; overflow-y: auto; padding: 10px; border-right: 1px solid var(--border); }
.schet-side .card { margin-bottom: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.schet-side label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-muted); }
.schet-side h2 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.schet-side .rep-title { font-weight: 600; margin-bottom: 2px; }
.schet-side .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.schet-side .actions form { margin: 0; }
.schet-side .renumber { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.schet-side .renumber label { margin: 0; }
.schet-side .renumber input { width: 7em; }
.schet-side .notice { margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.schet-side .tag.locked { background: var(--danger); color: var(--on-danger); font-size: 12px; }
.schet-side .found { margin: 6px 0 0; padding: 0; list-style: none; max-height: 40vh; overflow-y: auto; }
.schet-side .found li { padding: 4px 0; border-bottom: 1px solid var(--surface-2); font-size: 14px; }
.schet-side .found .links { display: flex; gap: 10px; font-size: 13px; }
.schet-side .side-links { padding: 0 4px; font-size: 14px; }
.schet-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.doc-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.doc-bar #doc-title { flex: 1; font-size: 14px; }
.ui .doc-bar button, .ui .doc-bar a.button { padding: 3px 10px; font-size: 14px; }
.schet-main iframe { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 760px) {
    body.schet-page { height: auto; overflow: visible; }
    .schet-layout { flex-direction: column; }
    .schet-side { width: auto; border-right: 0; }
    .schet-main iframe { height: 80vh; }
}

/* ---- итоговые счета: просмотр и редактирование клиента (db/schet/view_and_edit.php) ---- */
.client-nav { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px -10px 14px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.client-nav form { flex: 1; min-width: 180px; margin: 0; }
.ui .client-nav select { width: 100%; padding: 4px 8px; }
.ui .client-nav .button { padding: 4px 10px; white-space: nowrap; }
.ui .client-nav .button.disabled { opacity: .4; cursor: default; }
.client-nav .pos { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.client-edit { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.client-edit.not-print { border-left-color: var(--text-muted); }
.client-edit > table > tbody > tr > td { padding: 6px 10px; border-bottom: 1px solid var(--surface-2); }
.client-edit > table > tbody > tr:first-child > td { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.client-edit > table > tbody > tr[height="6"] > td { padding: 0; border: 0; }
.client-edit-head { display: flex; align-items: center; gap: 10px; }
.client-edit-name { flex: 1; font-size: 16px; }
.client-edit .tag { background: var(--text-muted); color: var(--on-muted); font-size: 12px; }
.client-edit-note { margin: 10px 2px; font-size: 13px; color: var(--text-muted); }

/* ---- диагностика выгрузки в 1С (db/1sdiag/check.php) ---- */
body.diag-page { padding: 12px 16px 32px; }
.diag-page h1 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.diag-page h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.diag-page .card { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.diag-page label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-muted); }
.diag-page textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.diag-page .row { display: flex; gap: 6px; margin-top: 10px; }
.diag-page .muted { color: var(--text-muted); font-size: 14px; }
.diag-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.diag-page .notice { margin-bottom: 12px; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.diag-page .table-wrap { overflow-x: auto; }
.diag-page table.list { width: 100%; border-collapse: collapse; }
.diag-page table.list th { padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.diag-page table.list td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.diag-page tr.bad td:first-child { box-shadow: inset 3px 0 var(--danger); }
.diag-page tr.ok td:first-child { box-shadow: inset 3px 0 var(--svc-phone); }
.diag-page .dogovor { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.diag-page .dogovor legend { padding: 0 4px; font-weight: 600; }
.diag-page .choice { display: block; margin: 4px 0 0; font-size: 14px; color: var(--text); cursor: pointer; }
.schet-top > a[target="scheta_right"] { font-size: 14px; }

/* ---- счета телефонии (db/schet_pbx) ---- */
.pbx-run h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.pbx-run .progress { height: 8px; max-width: 520px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pbx-run .progress .bar { width: 0; height: 100%; background: var(--accent); transition: width .2s; }
.pbx-run .muted { color: var(--text-muted); font-size: 14px; }
.pbx-run .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ui .pbx-run a.button, .ui.pbx-run a.button { display: inline-block; padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--radius); }
.ui.pbx-run a.button:not(.secondary) { background: var(--accent); color: var(--on-accent); }
.pbx-run .table-wrap { overflow-x: auto; }
.pbx-run table.list { width: 100%; max-width: 760px; border-collapse: collapse; }
.pbx-run table.list th { padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.pbx-run table.list td { padding: 4px 8px; border-bottom: 1px solid var(--surface-2); }
.pbx-run .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.pbx-run .notice { margin: 10px 0; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.schet-side .ready { margin-top: 8px; font-size: 14px; }
.ui .schet-side .actions a.button { padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--radius); }
.ui .schet-side .actions a.button:not(.secondary) { background: var(--accent); color: var(--on-accent); }

/* ---- фирмы и реквизиты (db/schet/firms.php) ---- */
body.firms-page { padding: 12px 16px 32px; }
.firms-page h1 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.firms-page .muted { color: var(--text-muted); font-size: 14px; }
.firms-page .notice { margin: 10px 0; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); }
.firms-page .alert { margin: 8px 0; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.firms-page .card { margin: 10px 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.firms-page summary { cursor: pointer; }
.firms-page .fname { font-weight: 600; }
.firms-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin-top: 12px; }
.firms-page label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.firms-page label.wide { grid-column: 1 / -1; }
.firms-page label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.firms-page input[type=text], .firms-page textarea { font-size: 14px; color: var(--text); }
.firms-page textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-family: inherit; resize: vertical; }
.firms-page .row { margin-top: 12px; }
.firms-page .tag.warn { background: var(--svc-hosting); color: #fff; font-size: 12px; }
.firms-page .tag.off { background: var(--text-muted); color: var(--on-muted); font-size: 12px; }
.schet-side .alert-inline { margin: 4px 0; padding: 4px 8px; border-radius: var(--radius); background: color-mix(in srgb, var(--svc-hosting) 18%, transparent); font-size: 13px; }
.schet-top > a[target="scheta_right"] + a[target="scheta_right"] { margin-left: 12px; }

/* ==== пастельное оформление: общие акценты поверх правил выше ==== */
body.ui { background: var(--bg); }
.ui button, .ui input[type=submit] { transition: background .15s, box-shadow .15s; }
.ui button:hover, .ui input[type=submit]:hover { box-shadow: 0 2px 6px rgba(67, 83, 201, .25); }
.ui button.secondary, .ui a.button { background: var(--accent-soft); border-color: transparent; color: var(--ink-blue); }
.ui button.secondary:hover, .ui a.button:hover { background: var(--tint-lilac); text-decoration: none; }
.ui button[aria-expanded=true].secondary { background: var(--tint-lilac); color: var(--ink-lilac); }
.ui button.danger { background: var(--tint-pink); border-color: var(--danger); color: var(--ink-pink); }
.ui button.danger:hover { background: var(--danger); color: var(--on-danger); }
.ui.pbx-run a.button:not(.secondary), .ui .schet-side .actions a.button:not(.secondary) { border-color: var(--accent); }

/* шапки */
.panel-head { background: var(--vivid-blue); border-bottom: 0; color: var(--on-vivid); }
.panel-head .title { color: var(--on-vivid); font-weight: 700; }
.panel-head .user, .panel-head nav a, .ui .panel-head a { color: var(--on-vivid); }
.panel-head .user { opacity: .92; }
.panel-head .warn, .panel-head .expired { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--tint-pink); color: var(--ink-pink); }
.schet-top, .doc-bar { background: linear-gradient(135deg, var(--tint-blue), var(--surface) 70%); }
.info-page .page-head, .toolbar { background: var(--bg); }

/* сообщения */
.note, .notice, .card-head .notice, .params-page .notice, .info-page .notice, .stat-page .notice,
.schet-side .notice, .diag-page .notice, .pbx-run .notice, .firms-page .notice {
    background: var(--tint-green); color: var(--ink-green); border-left: 4px solid var(--svc-phone);
}
.card-head .alert, .menu .alert, .params-page .alert, .info-page .alert, .stat-page .alert,
.who-page .alert, .firms-page .alert, .edit-panel .alert {
    background: var(--tint-pink); color: var(--ink-pink); border-left: 4px solid var(--danger);
}
.schet-side .alert-inline { background: var(--tint-peach); color: var(--ink-peach); }

/* значки услуг и метки — пастельные */
.svc span { color: inherit; }
.svc .inet { background: var(--vivid-blue); color: var(--on-vivid); }
.svc .ph { background: var(--vivid-green); color: var(--on-vivid); }
.svc .hosting { background: var(--vivid-orange); color: var(--on-vivid); }
.svc .private { background: var(--vivid-violet); color: var(--on-vivid); }
.ui .tag.private { background: var(--vivid-violet); color: var(--on-vivid); }
.who-page .tag.free { background: var(--tint-green); color: var(--ink-green); }
.firms-page .tag.warn { background: var(--tint-peach); color: var(--ink-peach); }
.schet-side .tag.locked { background: var(--tint-pink); color: var(--ink-pink); }
.ui .badge { background: var(--tint-lilac); color: var(--ink-lilac); font-weight: 600; }
.count { background: var(--tint-blue); color: var(--ink-blue); }

/* главное меню: у каждого раздела свой пастельный цвет */
.menu-section { overflow: hidden; border-color: var(--border); }
/* меню — строго: один цвет для всех разделов */
.menu-section h2 { background: var(--tint-blue); color: var(--ink-blue); border-bottom: 1px solid var(--border); border-left: 4px solid var(--vivid-blue); font-weight: 700; }
.ui .menu-section li a:hover { background: var(--accent-soft); color: var(--ink-blue); }

/* списки и карточки */
.ui .group-head:hover, .client:hover, .ui .usluga-head:hover { background: var(--accent-soft); }
.client.private { background: color-mix(in srgb, var(--tint-lilac) 60%, var(--surface)); }
.usluga { border-left: 4px solid var(--border); }
.usluga:has(.svc .inet) { border-left-color: var(--svc-inet); }
.usluga:has(.svc .ph) { border-left-color: var(--svc-phone); }
.usluga:has(.svc .hosting) { border-left-color: var(--svc-hosting); }
.usluga:has(.svc .private) { border-left-color: var(--svc-private); }
.card-head { border-top: 4px solid var(--accent); }
.edit-panel { background: var(--tint-blue); border-color: transparent; }
.inline-panel-head { background: linear-gradient(135deg, var(--vivid-blue), var(--vivid-violet)); color: var(--on-vivid); }
.ui .inline-panel-head .close { color: var(--on-vivid); }
.ui .inline-panel-head .close:hover { background: rgba(255, 255, 255, .2); }
.client-nav { background: var(--tint-blue); }
.client-edit > table > tbody > tr:first-child > td { background: var(--tint-blue); }
.stat-page .card h2, .diag-page .card h2, .who-page .card h2 { color: var(--ink-blue); }

/* заголовки таблиц — пастельная полоса */
.stat-page table.list th, .who-page table.list th, .diag-page table.list th,
.pbx-run table.list th, .payments-page table.payments th { background: var(--tint-blue); color: var(--ink-blue); font-weight: 600; }
.stat-page table.list tr:hover td { background: var(--accent-soft); }
.pbx-run .progress .bar { background: linear-gradient(90deg, var(--svc-inet), var(--svc-private)); }

/* старая разметка */
.legacy [bgcolor=red] { background: var(--tint-pink); color: var(--ink-pink); }
.legacy [bgcolor=green] { background: var(--tint-green); color: var(--ink-green); }
.legacy [bgcolor=yellow], .legacy [style*="#ffcc00"] { background: var(--tint-yellow) !important; color: var(--ink-yellow) !important; }

/* ---- старые таблицы услуг в карточке клиента: пастель в цвет услуги ---- */
.usluga { --u-t: var(--tint-blue); --u-i: var(--ink-blue); --u-line: var(--svc-inet); }
.usluga:has(.svc .ph) { --u-t: var(--tint-green); --u-i: var(--ink-green); --u-line: var(--svc-phone); }
.usluga:has(.svc .hosting) { --u-t: var(--tint-peach); --u-i: var(--ink-peach); --u-line: var(--svc-hosting); }
.usluga:has(.svc .private) { --u-t: var(--tint-lilac); --u-i: var(--ink-lilac); --u-line: var(--svc-private); }
.usluga { --u-v: var(--vivid-blue); }
.usluga:has(.svc .ph) { --u-v: var(--vivid-green); }
.usluga:has(.svc .hosting) { --u-v: var(--vivid-orange); }
.usluga:has(.svc .private) { --u-v: var(--vivid-violet); }
.ui .usluga-head .svc span { background: var(--u-v); color: var(--on-vivid); }
.usluga.open .usluga-head { background: color-mix(in srgb, var(--u-t) 45%, var(--surface)); border-radius: var(--radius) var(--radius) 0 0; }
.usluga-body.legacy > table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.usluga-body.legacy > table > tbody > tr > td { border: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.usluga-body.legacy > table > tbody > tr > td:last-child { border-right: 0; }
.usluga-body.legacy > table > tbody > tr:last-child > td { border-bottom: 0; }
/* строки-заголовки блоков («Данные по клиенту», «Расценки», «IP адреса», «Email's»…) */
/* (только в таблицах, где есть строки данных valign=top — у телефонии и хостинга своя разметка) */
.usluga-body.legacy > table:has(> tbody > tr[valign]) > tbody > tr:not([valign]) > td { background: var(--u-t); color: var(--u-i); }
.usluga-body.legacy > table:has(> tbody > tr[valign]) > tbody > tr:not([valign]) > td b { color: var(--u-i); }
.usluga-body.legacy > table:has(> tbody > tr[valign]) > tbody > tr:not([valign]) > td i { color: var(--text-muted); }
/* строки с кнопками («Удалить услугу», перевод в частники) — нейтральные */
.usluga-body.legacy > table:has(> tbody > tr[valign]) > tbody > tr:not([valign]):has(input, select, button) > td { background: var(--surface-2); color: var(--text); }
/* таблицы внутри (линии телефонии и т.п.): шапка — пастель услуги, строки — зебра */
.usluga-body.legacy table[width="95%"] { border-collapse: collapse; }
.usluga-body.legacy table[width="95%"] > tbody > tr:first-child > td { background: var(--u-t); color: var(--u-i); font-weight: 600; }
.usluga-body.legacy table[width="95%"] > tbody > tr:nth-child(odd):not(:first-child) > td { background: color-mix(in srgb, var(--u-t) 35%, var(--surface)); }
/* счётчики «(2)» у заголовков — пастельные кружки */
.usluga-body.legacy td[width="100%"] > font[color=yellow] { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--surface); color: var(--u-i); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
/* строки данных: подписи приглушены, разделители мягкие, подсветка при наведении */
.usluga-body.legacy table[border="0"] > tbody > tr > td:first-child:not([colspan]) { color: var(--text-muted); font-weight: 500; }
.usluga-body.legacy table[border="0"] > tbody > tr:not([bgcolor]):hover > td { background: color-mix(in srgb, var(--u-t) 55%, transparent); }
.usluga-body.legacy table[border="0"] > tbody > tr[bgcolor=black] > td { height: 1px; background: color-mix(in srgb, var(--u-t) 80%, var(--border)); }
.usluga-body.legacy hr { border-top-color: color-mix(in srgb, var(--u-line) 30%, var(--border)); }
.usluga-body.legacy font[color=green] { color: var(--u-line); }

/* ---- история изменений (db/show_corp_history.php) ---- */
body.history-page { padding: 12px 16px 32px; }
.history-page .page-head { position: sticky; top: 0; z-index: 2; margin: -12px -16px 8px; padding: 12px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.history-page h1 { margin: 0; font-size: 18px; font-weight: 700; }
.history-page .meta { margin: 2px 0 8px; font-size: 13px; color: var(--text-muted); }
.history-page .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.history-page .row input[type=search] { flex: 1; min-width: 180px; }
.ui.history-page select, .history-page .row select { width: auto; }
.history-page .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ui.history-page .chip { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; }
.ui.history-page .chip:hover { box-shadow: none; background: var(--accent-soft); }
.ui.history-page .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.history-page .day { margin: 18px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-blue); text-transform: none; }
.history-page .day:first-child { margin-top: 6px; }
.history-page .ev { position: relative; margin: 0 0 8px; padding: 10px 14px 10px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--vivid-blue); border-radius: var(--radius); box-shadow: var(--shadow); }
.history-page .ev.kind-add { border-left-color: var(--vivid-green); }
.history-page .ev.kind-del { border-left-color: var(--vivid-rose); }
.history-page .ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-muted); }
.history-page .ev-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tint-blue); color: var(--ink-blue); font-weight: 700; font-size: 13px; }
.history-page .kind-add .ev-icon { background: var(--tint-green); color: var(--ink-green); }
.history-page .kind-del .ev-icon { background: var(--tint-pink); color: var(--ink-pink); }
.history-page .ev-head time { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.history-page .ev-head .who { font-weight: 600; color: var(--text); }
.history-page .ev-head .client { margin-left: auto; font-weight: 600; }
.history-page .tag.sys { background: var(--tint-yellow); color: var(--ink-yellow); font-size: 12px; }
.history-page .ev-text { margin-top: 6px; white-space: normal; overflow-wrap: anywhere; }
.history-page details.long > summary { margin-top: 6px; cursor: pointer; color: var(--text); }
.history-page details.long[open] > summary { color: var(--text-muted); }
.history-page .table-wrap { overflow-x: auto; }
.history-page table.diff { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; }
.history-page table.diff th { padding: 4px 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-blue); background: var(--surface-2); }
.history-page table.diff td { padding: 4px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); overflow-wrap: anywhere; }
.history-page table.diff td:first-child { width: 1%; white-space: nowrap; color: var(--text-muted); }
.history-page table.diff td:nth-child(2) { width: 22%; }
.history-page table.diff td.old { width: 32%; }
.history-page table.diff tr.edit td.old, .history-page table.diff tr.del td.old { background: color-mix(in srgb, var(--tint-pink) 60%, transparent); color: var(--ink-pink); }
.history-page table.diff tr.edit td.new, .history-page table.diff tr.add td.new { background: color-mix(in srgb, var(--tint-green) 60%, transparent); color: var(--ink-green); }
.history-page table.diff tr.edit td.old { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-pink) 50%, transparent); }
.history-page details.snap { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--tint-yellow); color: var(--ink-yellow); }
.history-page details.snap > summary { cursor: pointer; font-weight: 600; }
.history-page details.snap[open] { background: var(--surface); color: var(--text); }
.history-page details.snap[open] > summary { color: var(--ink-yellow); }
.history-page details.snap h3 { margin: 12px 0 4px; font-size: 14px; color: var(--ink-blue); }
.history-page table.kv { border-collapse: collapse; font-size: 14px; }
.history-page table.kv th { padding: 3px 12px 3px 0; text-align: left; font-weight: 400; color: var(--text-muted); vertical-align: top; white-space: nowrap; }
.history-page table.kv td { padding: 3px 0; }
.history-page table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-page table.list th { padding: 4px 6px; text-align: left; font-weight: 600; color: var(--ink-blue); background: var(--surface-2); }
.history-page table.list td { padding: 3px 6px; border-bottom: 1px solid var(--surface-2); }
.history-page .pager { display: flex; gap: 8px; margin-top: 14px; }
.history-page .empty { color: var(--text-muted); }
.history-page tr.more { display: none; }
.history-page .ev.expanded tr.more { display: table-row; }
.ui.history-page button.more-btn { margin-top: 4px; padding: 2px 10px; font-size: 13px; }
.history-page details.deleted-rows { margin-top: 8px; }
.history-page details.deleted-rows > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }

/* ---- результаты поиска (db/corporate.php?op=search) ---- */
body.search-page { padding: 12px 16px 32px; }
.search-page .page-head { position: sticky; top: 0; z-index: 2; margin: -12px -16px 8px; padding: 12px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.search-page h1 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.search-page .row { display: flex; gap: 6px; }
.search-page .row input { flex: 1; }
.search-page .meta { margin: 4px 0 10px; font-size: 14px; color: var(--text-muted); }
.search-page .meta b { color: var(--text); }
.search-page .notice { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.search-page .empty { color: var(--text-muted); }
.search-page .results { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.search-page .results li { padding: 8px 12px; border-bottom: 1px solid var(--surface-2); }
.search-page .results li:last-child { border-bottom: 0; }
.search-page .results li:hover { background: var(--accent-soft); }
.search-page .line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.search-page .line a { font-weight: 600; font-size: 15px; }
.search-page .line .id { font-size: 12px; color: var(--text-muted); }
.search-page .found { margin-top: 3px; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.search-page .found .where { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--tint-blue); color: var(--ink-blue); font-size: 12px; font-weight: 600; }
.search-page mark { background: var(--highlight); color: var(--text); border-radius: 2px; padding: 0 1px; }
.search-page .history-link { margin-top: 14px; }
.search-page .found .more { white-space: nowrap; }

/* ---- пользователи системы (change_pass.php) ---- */
body.users-page { padding: 12px 16px 32px; max-width: 1100px; }
.users-page h1 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.users-page h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink-blue); }
.users-page h3 { margin: 4px 0 6px; font-size: 14px; font-weight: 700; }
.users-page .card { margin-bottom: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.users-page .notice, .users-page .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.users-page .muted { color: var(--text-muted); font-size: 13px; }
.users-page .me { margin: 0 0 10px; }
.users-page .expired { color: var(--danger); font-weight: 600; }
.users-page .soon { color: var(--svc-hosting); font-weight: 600; }
.users-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.users-page .grid .wide { grid-column: 1 / -1; }
.users-page label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.users-page input[type=password], .users-page textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.ui.users-page label input, .ui.users-page label select { color: var(--text); font-size: 14px; }
.users-page .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.users-page .static { padding: 6px 0; color: var(--text); font-size: 14px; }
.users-page .list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.users-page .list-head h2 { flex: 1; margin: 0; }
.ui.users-page .list-head input { width: 220px; }
.ui.users-page .list-head select { width: auto; }
.users-page .add-user { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--tint-green); }
.users-page .users { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.users-page .user { border-bottom: 1px solid var(--surface-2); }
.users-page .user:last-child { border-bottom: 0; }
.users-page .user > summary { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto auto auto; gap: 4px 12px; align-items: center; padding: 7px 12px; cursor: pointer; list-style: none; }
.users-page .user > summary::-webkit-details-marker { display: none; }
.users-page .user > summary:hover { background: var(--accent-soft); }
.users-page .user[open] > summary { background: var(--tint-blue); }
.users-page .user .login { font-weight: 700; }
.users-page .user .name { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-page .tag.grp { background: var(--tint-lilac); color: var(--ink-lilac); font-size: 12px; }
.users-page .tag.me { background: var(--tint-green); color: var(--ink-green); font-size: 12px; }
.users-page .till { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.users-page .till.expired { color: var(--danger); }
.users-page .user-body { padding: 10px 12px 14px; background: color-mix(in srgb, var(--tint-blue) 35%, var(--surface)); }
.users-page .subform { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
    .users-page .user > summary { grid-template-columns: 1fr auto; }
    .users-page .user .name, .users-page .user .till { grid-column: 1 / -1; }
}

/* ---- группы доступа (change_group.php) ---- */
body.groups-page { margin: 0; }
.groups-layout { display: flex; min-height: 100vh; }
.groups-side { width: 280px; flex: none; padding: 12px; border-right: 1px solid var(--border); background: var(--surface); }
.groups-side h1 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.ui.groups-page .groups-side a.button { display: block; margin-bottom: 10px; text-align: center; }
.groups-side .group-list { margin: 0; padding: 0; list-style: none; }
.groups-side .group-list a { display: flex; flex-direction: column; padding: 6px 10px; border-radius: var(--radius); color: var(--text); }
.groups-side .group-list a:hover { background: var(--accent-soft); text-decoration: none; }
.groups-side .group-list .cur a { background: var(--vivid-blue); color: var(--on-vivid); }
.groups-side .gname { font-weight: 600; }
.groups-side .gmeta { font-size: 12px; opacity: .8; }
.groups-main { flex: 1; min-width: 0; padding: 12px 16px 32px; }
.groups-main .card { margin-bottom: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.groups-main h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--ink-blue); }
.groups-main .muted { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.groups-main .notice, .groups-main .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.groups-main .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; }
.groups-main .grid .wide { grid-column: 1 / -1; }
.groups-main label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.groups-main textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.ui.groups-page label input, .ui.groups-page label select { color: var(--text); font-size: 14px; }
.groups-main .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ui.groups-page .row select { width: auto; max-width: 260px; }
.groups-main .members { margin-top: 10px; }
.groups-main .member { display: inline-block; margin: 2px 2px; padding: 1px 8px; border-radius: 10px; background: var(--tint-lilac); color: var(--ink-lilac); font-size: 13px; }
.groups-main .group-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.groups-main .rights-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.groups-main .rights-head h2 { flex: 1; margin: 0; }
.ui.groups-page .rights-head input { width: 240px; }
.ui.groups-page .rights-head select { width: auto; }
.groups-main .legend { margin: 6px 0 8px; }
.groups-main .rights-table { width: 100%; border-collapse: collapse; }
.groups-main .rights-table td { padding: 4px 8px; border-bottom: 1px solid var(--surface-2); vertical-align: middle; }
.groups-main .rights-table tr:hover td { background: var(--accent-soft); }
.groups-main .rights-table tr.changed td { background: var(--tint-yellow); }
.groups-main .rights-table .pid { width: 1%; color: var(--text-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.groups-main .rights-table .lvl { width: 1%; white-space: nowrap; }
.groups-main .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.groups-main .seg label { flex-direction: row; gap: 0; cursor: pointer; }
.groups-main .seg input { position: absolute; opacity: 0; pointer-events: none; }
.groups-main .seg span { padding: 3px 12px; font-size: 13px; color: var(--text-muted); }
.groups-main .seg label + label span { border-left: 1px solid var(--border); }
.groups-main .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.groups-main .seg .l0 input:checked + span { background: var(--surface-2); color: var(--text); font-weight: 600; }
.groups-main .seg .l1 input:checked + span { background: var(--tint-blue); color: var(--ink-blue); font-weight: 600; }
.groups-main .seg .l2 input:checked + span { background: var(--vivid-green); color: var(--on-vivid); font-weight: 600; }
.groups-main .seg input:disabled + span { cursor: default; }
.groups-main .save-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px -14px -12px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.groups-main .save-bar span { flex: 1; }
.groups-main .empty { color: var(--text-muted); }
@media (max-width: 760px) {
    .groups-layout { flex-direction: column; }
    .groups-side { width: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .groups-side .group-list { display: flex; flex-wrap: wrap; gap: 4px; }
    .groups-main .rights-table .lvl { white-space: normal; }
}
.ui button:disabled, .ui input[type=submit]:disabled { opacity: .45; cursor: default; box-shadow: none; }
.users-page .user > summary .tag, .users-page .user > summary .till { justify-self: start; }
@media (min-width: 641px) { .users-page .user > summary .tag, .users-page .user > summary .till { justify-self: end; } }

/* ---- раздел «Частники» (db/chastniki_*.php) ---- */
body.chast-page { padding: 12px 16px 32px; }
.chast-page h1 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.chast-page h2 { display: inline; margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-blue); }
.chast-page h3 { margin: 14px 0 4px; font-size: 14px; font-weight: 700; }
.chast-page .card { display: block; margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.chast-page .card.flush { padding: 0; }
.chast-page section.card > h2 { display: block; margin-bottom: 10px; }
.chast-page details.card > summary { cursor: pointer; }
.chast-page details.card[open] > summary { margin-bottom: 10px; }
.chast-page .meta { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); }
.chast-page .meta b { color: var(--text); }
.chast-page .muted { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.chast-page .notice, .chast-page .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.chast-page .empty { color: var(--text-muted); margin: 4px 0; }
.chast-page code { padding: 0 3px; border-radius: 3px; background: var(--surface-2); }
.chast-page .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chast-page .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; }
.chast-page .chip:hover { background: var(--accent-soft); text-decoration: none; }
.chast-page .table-wrap { overflow-x: auto; }
.chast-page table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.chast-page table.list th { padding: 5px 8px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-blue); background: var(--tint-blue); }
.chast-page table.list td { padding: 5px 8px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
.chast-page table.list tbody tr:hover td { background: var(--accent-soft); }
.chast-page table.list tfoot td { padding: 6px 8px; font-weight: 700; border-top: 2px solid var(--border); }
.chast-page table.list tr.cur td { background: var(--tint-yellow); }
.chast-page .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chast-page td.num small { display: block; color: var(--text-muted); font-size: 11px; }
.chast-page .nowrap { white-space: nowrap; }
.chast-page .neg { color: var(--danger); }
.chast-page .pos { color: var(--svc-phone); }
.chast-page .old { color: var(--text-muted); }
.chast-page .new { color: var(--ink-green); font-weight: 600; }
.chast-page .bar-col { width: 30%; }
.chast-page .bar { display: block; height: 10px; min-width: 2px; border-radius: 5px; background: var(--vivid-blue); }
.chast-page .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.chast-page .filter-row { margin: 16px 0 10px; }
.ui.chast-page .filter-row input[type=search] { width: 280px; }
.chast-page label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
/* отчёт по платежам */
.ui.chast-page .month-bar select { width: auto; }
.chast-page .month-bar { margin-bottom: 12px; }
.chast-page .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 6px; }
.chast-page .stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.chast-page .stat .label { font-size: 13px; color: var(--text-muted); }
.chast-page .stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.chast-page .delta { font-size: 12px; font-weight: 600; }
.chast-page .delta.up { color: var(--svc-phone); }
.chast-page .delta.down { color: var(--danger); }
.chast-page .c1 { --c: var(--vivid-blue); fill: var(--vivid-blue); }
.chast-page .c2 { --c: var(--vivid-green); fill: var(--vivid-green); }
.chast-page .c3 { --c: var(--vivid-orange); fill: var(--vivid-orange); }
.chast-page .c4 { --c: var(--vivid-rose); fill: var(--vivid-rose); }
.chast-page .c5 { --c: var(--vivid-violet); fill: var(--vivid-violet); }
.chast-page .c6 { --c: var(--vivid-teal); fill: var(--vivid-teal); }
.chast-page .chart-wrap { overflow-x: auto; }
.chast-page svg.chart { display: block; width: 100%; height: auto; min-width: 600px; margin-top: 4px; }
.chast-page svg.chart .grid { stroke: var(--border); stroke-width: 1; }
.chast-page svg.chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.chast-page svg.chart text { fill: var(--text-muted); font-size: 11px; font-family: inherit; }
.chast-page svg.chart .ylab { text-anchor: end; }
.chast-page svg.chart .xlab { text-anchor: middle; }
.chast-page svg.chart rect:hover { opacity: .75; }
.chast-page .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 10px; font-size: 13px; color: var(--text-muted); }
.chast-page .legend i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; background: var(--c); }
.chast-page details.days > summary { cursor: pointer; margin: 8px 0; color: var(--accent); }
/* платежи */
.chast-page .filters-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.chast-page .filters-bar .wide { grid-column: span 2; }
.chast-page label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.chast-page input[type=date] { padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.ui.chast-page label input, .ui.chast-page label select { color: var(--text); font-size: 14px; }
.chast-page .op { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text); }
.chast-page .op.pay { background: var(--tint-green); color: var(--ink-green); }
.chast-page .op.ab { background: var(--tint-blue); color: var(--ink-blue); }
.chast-page .op.dop { background: var(--tint-peach); color: var(--ink-peach); }
.chast-page .op.corr { background: var(--tint-lilac); color: var(--ink-lilac); }
.chast-page .op.promise { background: var(--tint-yellow); color: var(--ink-yellow); }
.chast-page .ops .descr { color: var(--text-muted); font-size: 13px; }
.chast-page .ops a.only { font-size: 12px; color: var(--text-muted); }
.chast-page .pager { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
/* тарифы и допуслуги */
.chast-page .items { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chast-page .item { border-bottom: 1px solid var(--surface-2); }
.chast-page .item:last-child { border-bottom: 0; }
.chast-page .item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 12px; cursor: pointer; }
.chast-page .item > summary:hover { background: var(--accent-soft); }
.chast-page .item[open] > summary { background: var(--tint-blue); }
.chast-page .item .iname { flex: 1; min-width: 180px; font-weight: 600; }
.chast-page .item .ival { color: var(--text-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chast-page .item .clients { padding: 0 8px; border-radius: 10px; background: var(--tint-lilac); color: var(--ink-lilac); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chast-page .tag.off { background: var(--tint-peach); color: var(--ink-peach); font-size: 12px; }
.chast-page .item-body { padding: 10px 12px 12px; background: color-mix(in srgb, var(--tint-blue) 30%, var(--surface)); }
.chast-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; margin-bottom: 8px; }
.chast-page .grid .wide { grid-column: 1 / -1; }
.chast-page .grid .wide2 { grid-column: span 2; }
.chast-page .new-item > summary h2 { color: var(--accent); }
@media (max-width: 560px) {
    .chast-page .grid .wide2, .chast-page .filters-bar .wide { grid-column: 1 / -1; }
}

/* ---- NOC: сетевые устройства (netdevices.php) ---- */
body.noc-page { padding: 12px 16px 32px; }
.noc-page h1 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.noc-page h2 { display: inline; margin: 0; font-size: 16px; font-weight: 700; color: var(--accent); }
.noc-page .notice, .noc-page .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.noc-page .muted { color: var(--text-muted); font-size: 13px; }
.noc-page .card { margin-bottom: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.noc-page details.card > summary { cursor: pointer; }
.noc-page details.card[open] > summary { margin-bottom: 10px; }
.noc-page .toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ui.noc-page .toolbar-row input[type=search] { width: 300px; }
.ui.noc-page .toolbar-row select { width: auto; }
.noc-page .devs { --cols: minmax(110px, 130px) minmax(110px, 140px) minmax(120px, 1fr) minmax(90px, 140px) 90px minmax(160px, 2fr);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.noc-page .dev-head, .noc-page .dev > summary, .noc-page .dev-row { display: grid; grid-template-columns: var(--cols); gap: 4px 12px; align-items: baseline; padding: 6px 12px; }
.noc-page .dev-head { position: sticky; top: 0; z-index: 1; background: var(--tint-blue); padding-top: 4px; padding-bottom: 4px; }
.ui.noc-page .dev-head .sort { padding: 2px 0; border: 0; background: none; color: var(--ink-blue); font-size: 13px; font-weight: 600; text-align: left; box-shadow: none; }
.noc-page .dev-head .sort.asc::after { content: " ↑"; }
.noc-page .dev-head .sort.desc::after { content: " ↓"; }
.noc-page .dev { border-top: 1px solid var(--surface-2); font-size: 14px; }
.noc-page .dev > summary { cursor: pointer; list-style: none; }
.noc-page .dev > summary::-webkit-details-marker { display: none; }
.noc-page .dev > summary:hover, .noc-page .dev-row:hover { background: var(--accent-soft); }
.noc-page .dev[open] > summary { background: var(--tint-blue); }
.noc-page .c-ip { font-variant-numeric: tabular-nums; white-space: nowrap; }
.noc-page .c-name { font-weight: 600; overflow-wrap: anywhere; }
.noc-page .c-type .tag { background: var(--tint-lilac); color: var(--ink-lilac); font-size: 12px; }
.noc-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.noc-page .c-port { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.noc-page .c-descr { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.noc-page .dev-body { padding: 10px 12px 12px; background: color-mix(in srgb, var(--tint-blue) 30%, var(--surface)); }
.noc-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; margin-bottom: 8px; }
.noc-page .grid .wide { grid-column: 1 / -1; }
.noc-page label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.ui.noc-page label input, .ui.noc-page label select { color: var(--text); font-size: 14px; }
.noc-page textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.noc-page .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.noc-page .empty { color: var(--text-muted); }
@media (max-width: 760px) {
    .noc-page .dev-head { display: none; }
    .noc-page .dev > summary, .noc-page .dev-row { grid-template-columns: 1fr auto; grid-template-areas: "name ip" "type port" "comm comm" "descr descr"; }
    .noc-page .c-name { grid-area: name; }
    .noc-page .c-ip { grid-area: ip; text-align: right; }
    .noc-page .c-type { grid-area: type; }
    .noc-page .c-port { grid-area: port; text-align: right; }
    .noc-page .c-comm { grid-area: comm; }
    .noc-page .c-descr { grid-area: descr; }
}

/* ---- NOC: узлы доступа (db/noc_uzly.php) и VLAN (db/noc_vlans.php) ---- */
.noc-page .clients { padding: 0 8px; border-radius: 10px; background: var(--tint-lilac); color: var(--ink-lilac); font-size: 12px; font-weight: 600; white-space: nowrap; }
.noc-page .kids { padding: 0 8px; border-radius: 10px; background: var(--tint-teal); color: var(--ink-teal); font-size: 12px; font-weight: 600; white-space: nowrap; }
.noc-page label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.noc-page .grid .wide2 { grid-column: span 2; }
.noc-page .uz-tree { margin: 0; padding: 6px 8px; list-style: none; }
.noc-page .uz-kids { margin: 0 0 0 18px; padding: 0 0 0 10px; list-style: none; border-left: 2px solid var(--border); }
.noc-page li.uz.collapsed > .uz-kids { display: none; }
.noc-page li.uz.collapsed > details > summary .kids::after { content: " ▸"; }
.noc-page .uz-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 5px 8px; border-radius: var(--radius); cursor: pointer; }
.noc-page .uz-item > summary:hover { background: var(--accent-soft); }
.noc-page .uz-item[open] > summary { background: var(--tint-blue); }
.noc-page li.uz.match > details > summary .uz-name { background: var(--highlight); border-radius: 2px; }
.noc-page .uz-name { font-weight: 600; }
.noc-page .uz-comment { flex-basis: 100%; color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noc-page .uz-body { margin: 2px 0 8px; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--tint-blue) 30%, var(--surface)); }
.noc-page .vlans { --cols: 64px minmax(160px, 1fr) minmax(120px, 170px) minmax(160px, 2fr); }
.noc-page .dev-head > span { color: var(--ink-blue); font-size: 13px; font-weight: 600; }
.noc-page .c-vid { font-weight: 700; font-variant-numeric: tabular-nums; }
.noc-page .c-use { display: flex; flex-wrap: wrap; gap: 4px; }
.noc-page .vlan-actions { gap: 10px 20px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 760px) {
    .noc-page .vlans .dev > summary { grid-template-columns: 56px 1fr; grid-template-areas: "vid name" "use use" "descr descr"; }
    .noc-page .vlans .c-vid { grid-area: vid; }
    .noc-page .vlans .c-name { grid-area: name; }
    .noc-page .vlans .c-use { grid-area: use; }
    .noc-page .grid .wide2 { grid-column: 1 / -1; }
}
.menu-section li .disabled { display: block; padding: 5px 12px; color: var(--text-muted); text-decoration: line-through; cursor: not-allowed; }
.menu-section.disabled h2 { color: var(--text-muted); text-decoration: line-through; background: var(--surface-2); border-left-color: var(--border-strong); }

/* ---- телефония (phone/*.php) ---- */
/* страница — во всю высоту окна, таблица прокручивается внутри: горизонтальная полоса всегда видна внизу */
body.phone-page { display: flex; flex-direction: column; height: 100vh; padding: 12px 16px; }
.phone-page > * { flex: none; }
.phone-page > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.phone-page h1 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.phone-page .muted { color: var(--text-muted); font-size: 13px; }
.phone-page .toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.ui.phone-page .toolbar-row input[type=search] { width: 300px; }
.phone-page .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.phone-page .table-wrap { overflow-x: auto; }
.phone-page table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
.phone-page table.list thead th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--tint-blue); text-align: left; }
.phone-page table.list th.num { text-align: right; }
.ui.phone-page table.list th .sort { width: 100%; padding: 5px 6px; border: 0; border-radius: 0; background: none; color: var(--ink-blue); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: inherit; box-shadow: none; }
.ui.phone-page table.list th .sort:hover { background: var(--accent-soft); }
.phone-page table.list th .sort.asc::after { content: " ↑"; }
.phone-page table.list th .sort.desc::after { content: " ↓"; }
.phone-page table.list td { padding: 4px 6px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
.phone-page table.list tbody tr:hover td { background: var(--accent-soft); }
.phone-page .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phone-page .empty { color: var(--text-muted); }
.phone-page #ph td:nth-child(3) { min-width: 140px; }
.phone-page #ph td:nth-child(4) { min-width: 150px; }
.phone-page .toolbar-row label.check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.phone-page .notice, .phone-page .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.phone-page td.act, .phone-page th.act { width: 1%; white-space: nowrap; }
.ui.phone-page button.small { padding: 2px 10px; font-size: 13px; }
.phone-page tr[data-unsold] td { color: var(--text-muted); }
/* полосы прокрутки таблицы видны всегда (в т. ч. где браузер по умолчанию их скрывает) */
.phone-page > .table-wrap { scrollbar-width: auto; scrollbar-color: var(--border-strong) var(--surface-2); }
.phone-page > .table-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.phone-page > .table-wrap::-webkit-scrollbar-track { background: var(--surface-2); }
.phone-page > .table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--surface-2); }
.phone-page > .table-wrap::-webkit-scrollbar-corner { background: var(--surface-2); }
/* номера телефонов и лог — обычная прокрутка страницы */
body.phone-page.did-page, body.phone-page.log-page { display: block; height: auto; padding-bottom: 32px; }
.phone-page details.did-block { margin-bottom: 12px; padding: 10px 12px; }
.phone-page details.did-block > summary { cursor: pointer; }
.phone-page details.did-block > summary h2 { display: inline; margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-blue); }
.phone-page details.did-block[open] > summary { margin-bottom: 8px; }
.phone-page .did-block .table-wrap { overflow-x: auto; }
.phone-page .did-block table.list thead th { top: 0; }
.phone-page .did-block td:last-child { color: var(--text-muted); font-size: 12px; min-width: 260px; }
.phone-page .meta { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; }
.phone-page .meta b { color: var(--text); }
.phone-page tr.blocked td { background: color-mix(in srgb, var(--tint-pink) 70%, transparent); }
.phone-page .tag.reason { background: var(--surface-2); color: var(--text); font-size: 12px; }
.phone-page tr.blocked .tag.reason { background: var(--tint-pink); color: var(--ink-pink); }
.phone-page .nowrap { white-space: nowrap; }
.phone-page .did-block table.list { table-layout: fixed; }
.phone-page #did-free th:nth-child(1), .phone-page #did-busy th:nth-child(1) { width: 90px; }
.phone-page #did-free th:nth-child(2) { width: 25%; }
.phone-page #did-free th:nth-child(3) { width: 110px; }
.phone-page #did-free th:nth-child(4) { width: 70px; }
.phone-page #did-busy th:nth-child(2) { width: 28%; }
.phone-page #did-busy th:nth-child(3) { width: 14%; }
.phone-page #did-busy th:nth-child(4) { width: 16%; }
.phone-page #did-busy td:nth-child(3) { text-align: left; white-space: normal; }
.phone-page #did-busy th:nth-child(3) .sort { text-align: left; }
.phone-page .did-block td { overflow-wrap: anywhere; }
.phone-page .did-block td:last-child { min-width: 0; }
.phone-page details.hist > summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.phone-page details.hist ul { margin: 4px 0 0; padding-left: 16px; }
.log-page table.list thead th { padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--ink-blue); }
.phone-page details.new-item { margin-bottom: 12px; padding: 10px 14px; }
.phone-page details.new-item > summary { cursor: pointer; }
.phone-page details.new-item > summary h2 { display: inline; margin: 0; font-size: 16px; font-weight: 700; color: var(--accent); }
.phone-page details.new-item[open] > summary { margin-bottom: 8px; }
.phone-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.phone-page .grid .wide { grid-column: 1 / -1; }
.phone-page label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.ui.phone-page label input { color: var(--text); font-size: 14px; }
.phone-page .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.phone-page .tag.all { background: var(--tint-peach); color: var(--ink-peach); font-size: 12px; }
.bl-page table.list thead th { padding: 0; }
.stat-page .top-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* номерная ёмкость (phone/did_capacity.php) */
.cap-page .filter-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 10px; padding: 10px 12px; }
.cap-page .filter-panel .wide2 { grid-column: span 2; }
.cap-page .filter-panel .f-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cap-page .filter-panel .shown { font-size: 13px; color: var(--text-muted); }
.ui.cap-page .filter-panel select, .ui.cap-page .filter-panel input { width: 100%; }
.cap-page .prefixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 6px; margin: 0 0 10px; }
.ui.cap-page .pgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left; box-shadow: none; }
.ui.cap-page .pgroup:hover { background: var(--accent-soft); }
.cap-page .pgroup b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cap-page .pgroup span { font-size: 12px; color: var(--text-muted); }
.ui.cap-page .pgroup.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cap-page .pgroup.on span { color: inherit; opacity: .85; }
@media (max-width: 560px) { .cap-page .filter-panel .wide2, .cap-page .filter-panel .range { grid-column: 1 / -1; } }
.cap-page code { padding: 0 3px; border-radius: 3px; background: var(--surface-2); }
.cap-page textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.cap-page .tag.free { background: var(--tint-green); color: var(--ink-green); font-size: 12px; }
.cap-page table.list th.chk, .cap-page table.list td.chk { width: 28px; padding: 4px 6px; text-align: center; }
.cap-page td.ext { text-align: left; white-space: normal; }
.cap-page td.hist { color: var(--text-muted); font-size: 12px; min-width: 240px; }
.cap-page .uc-form { display: flex; gap: 4px; }
.ui.cap-page .uc-form input { width: 100%; min-width: 140px; padding: 2px 6px; font-size: 13px; }
.ui.cap-page button.link.edit-uc { padding: 0 4px; font-size: 13px; }
.cap-page .bulk-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--tint-yellow); color: var(--ink-yellow); }
.cap-page tr.flash td { background: var(--tint-yellow); }
.cap-page .uc-form[hidden], .cap-page .uc[hidden] { display: none; }
.cap-page .bulk-bar[hidden] { display: none; }
.cap-page .filter-panel .range { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.cap-page .filter-panel .range .rr { display: flex; align-items: center; gap: 6px; }
.cap-page .filter-panel .range .rr input { flex: 1; min-width: 0; }
.cap-page .star { color: var(--svc-hosting); cursor: help; }
/* настройка тарификации: оглавление (phone/phone_menu.php) */
.ph-hub .card.hub { margin-bottom: 12px; padding: 10px 14px; }
.ph-hub .card.hub h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink-blue); }
.ph-hub .hub-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.ph-hub .hub-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.ph-hub .hub-list li:hover { background: var(--accent-soft); }
.ph-hub .hub-list a { font-weight: 600; }
.ph-hub .check-cod { margin-top: 10px; align-items: flex-end; }
.ui.ph-hub .check-cod input { width: 220px; }
/* правила прохождения вызовов (traf-direct.php, traf-check.php) */
.traf-page .crumbs { margin-bottom: 8px; font-size: 13px; }
.traf-page .card.flush { padding: 0; }
.traf-page .ops-table tr.grp td { background: var(--surface-2); color: var(--ink-blue); font-weight: 700; font-size: 13px; }
.traf-page .ops-table tr.off td { color: var(--text-muted); }
.traf-page .ops-table tr.forced td { background: var(--tint-green); }
.traf-page label.switch, .traf-page label.radio { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.traf-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.traf-page .save-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.traf-page .check-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; padding: 10px 14px; }
.ui.traf-page .check-form input { width: 220px; }
.traf-page .verdict { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); font-size: 15px; }
.traf-page .verdict.ok { background: var(--tint-green); color: var(--ink-green); border-left: 4px solid var(--vivid-green); }
.traf-page .verdict.bad { background: var(--tint-pink); color: var(--ink-pink); border-left: 4px solid var(--vivid-rose); }
.traf-page #codes tr.win td { background: var(--tint-green); font-weight: 600; }
.traf-page #codes tr.blocked td { background: color-mix(in srgb, var(--tint-pink) 60%, transparent); }
.traf-page .tag.open { background: var(--tint-green); color: var(--ink-green); font-size: 12px; }
.traf-page .tag.closed { background: var(--tint-pink); color: var(--ink-pink); font-size: 12px; }
.traf-page #codes form { display: flex; align-items: center; gap: 6px; }
.st-page .st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.st-page .st-tab { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; }
.st-page .st-tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.st-page .st-tab:hover { text-decoration: none; }
.st-page tr.flash td { background: var(--tint-yellow); }
/* тарификация телефонии (phone/plan_*.php, zones.php, city.php, vids.php) */
.tf-page .tf-layout { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 12px; align-items: start; }
.tf-page .tf-list { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ui.tf-page .tf-list .tf-q { width: 100%; margin-bottom: 6px; }
.tf-page .tf-list ul { margin: 0; padding: 0; list-style: none; }
.tf-page .tf-list li a { display: flex; flex-direction: column; padding: 5px 8px; border-radius: var(--radius); color: var(--text); }
.tf-page .tf-list li a:hover { background: var(--accent-soft); text-decoration: none; }
.tf-page .tf-list li.on a { background: var(--accent); color: var(--on-accent); }
.tf-page .tf-list li a span { font-size: 12px; opacity: .8; }
.tf-page .tf-new { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tf-page .tf-main .card { margin-bottom: 12px; padding: 10px 14px; }
.tf-page .tf-main h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink-blue); }
.tf-page .tf-main h3 { margin: 10px 0 6px; font-size: 14px; font-weight: 700; }
.tf-page .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.tf-page .row label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.ui.tf-page .row input[type=text], .ui.tf-page .row select { width: auto; min-width: 160px; }
.tf-page .used { font-size: 13px; color: var(--text-muted); }
.tf-page .used b { color: var(--text); }
.tf-page .tag.warn { background: var(--tint-peach); color: var(--ink-peach); font-size: 12px; }
.tf-page .tag.ok { background: var(--tint-green); color: var(--ink-green); font-size: 12px; }
.tf-page .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tf-page .chip-x { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; }
.ui.tf-page .chip-x button { padding: 0 6px; border: 0; background: none; color: var(--text-muted); font-size: 14px; line-height: 1.2; box-shadow: none; }
.ui.tf-page .chip-x button:hover { color: var(--danger); }
.tf-page .zone-box { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.tf-page .zone-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.tf-page .zone-box h3 .count { font-weight: 400; }
.tf-page .num-in { width: 7em; text-align: right; }
@media (max-width: 760px) { .tf-page .tf-layout { grid-template-columns: 1fr; } .tf-page .tf-list { position: static; max-height: 240px; } }
.tf-page form.inline { display: inline; }
.ui.tf-page h3 .tbl-q { width: 200px; margin-left: 10px; font-weight: 400; }
.tf-page .zone-box.flash { background: var(--tint-yellow); }
.summ-page .card.summ { margin-bottom: 10px; padding: 10px 14px; }
.summ-page .summ-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.summ-page .summ-head h2 { margin: 0; font-size: 16px; color: var(--ink-blue); }
.summ-page .summ-check { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--tint-peach); color: var(--ink-peach); font-size: 13px; }
.summ-page .summ-check p { margin: 2px 0; }
.summ-page .summ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.summ-page .summ-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.summ-page .summ-grid .wide { grid-column: 1 / -1; }
.ui.summ-page .summ-grid select, .ui.summ-page .summ-grid input { width: 100%; color: var(--text); }
.summ-page .card.summ.flash { background: var(--tint-yellow); }
.summ-page .card.summ.new h2 { margin: 0 0 8px; font-size: 16px; color: var(--accent); }
.summ-page label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.tf-page td.codes { font-size: 12px; overflow-wrap: anywhere; }
.tf-page details.more-codes > summary { cursor: pointer; color: var(--accent); font-family: inherit; }
.ui.tf-page #zt input[type=text] { width: 100%; min-width: 220px; }
/* распечатка тарифного плана (phone/plan_print.php) */
.print-page .check-form .grow { flex: 1; min-width: 260px; }
.ui.print-page .check-form .grow input { width: 100%; }
.print-page .print-actions { margin-bottom: 10px; }
.print-page .print-sheet { max-width: 720px; padding: 20px 24px; background: #fff; color: #111; }
.print-page table.tariff { width: 100%; border-collapse: collapse; font-size: 14px; }
.print-page table.tariff caption { margin-bottom: 10px; font-size: 18px; font-weight: 700; text-align: left; color: #111; }
.print-page table.tariff th, .print-page table.tariff td { padding: 5px 10px; border: 1px solid #b8c0cc; text-align: left; color: #111; }
.print-page table.tariff thead th { background: #e8edf6; }
.print-page table.tariff tr.grp th { padding-top: 8px; background: #f3f5f9; font-size: 15px; }
.print-page table.tariff td.num, .print-page table.tariff thead th:last-child { width: 1%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.print-page .print-note { margin: 12px 0 0; font-size: 13px; color: #111; }
.print-page .print-date { margin: 6px 0 0; font-size: 12px; color: #555; }
@media print {
    .print-page .no-print, .print-page .crumbs, .print-page h1, .print-page .notice, .print-page .meta { display: none !important; }
    body.print-page { background: #fff; padding: 0; }
    .print-page .print-sheet { max-width: none; border: 0; box-shadow: none; padding: 0; }
}

/* ---- phone/phone_menu.php: плитки планов по зависимостям (слева направо) ---- */
.ph-hub .plan-flow { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); grid-auto-rows: auto; column-gap: 34px; row-gap: 8px; margin-bottom: 10px; }
.ph-hub .pf { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.ph-hub .pf:hover { background: var(--accent-soft); }
.ph-hub .pf b { color: var(--ink-blue); }
.ph-hub .pf-summ { grid-column: 1; grid-row: 1 / 5; align-self: center; border-width: 2px; border-color: var(--ink-blue); }
.ph-hub .pf-round { grid-column: 2; grid-row: 1; }
.ph-hub .pf-tarif { grid-column: 2; grid-row: 2; }
.ph-hub .pf-zplan { grid-column: 2; grid-row: 3; }
.ph-hub .pf-oper { grid-column: 2; grid-row: 4; }
.ph-hub .pf-zone { grid-column: 3; grid-row: 3; }
.ph-hub .pf-city { grid-column: 4; grid-row: 3; }
/* связи: от суммарного плана — к шине, от шины — к каждой составляющей; зональный → зоны → города */
.ph-hub .pf::before, .ph-hub .pf::after { content: ''; position: absolute; pointer-events: none; }
.ph-hub .pf-summ::after { right: -19px; top: 50%; width: 17px; border-top: 2px solid var(--border-strong); }
.ph-hub .pf-round::before, .ph-hub .pf-tarif::before, .ph-hub .pf-zplan::before, .ph-hub .pf-oper::before { left: -19px; top: -5px; bottom: -5px; border-left: 2px solid var(--border-strong); }
.ph-hub .pf-round::before { top: 50%; }
.ph-hub .pf-oper::before { bottom: 50%; }
.ph-hub .pf-round::after, .ph-hub .pf-tarif::after, .ph-hub .pf-zplan::after, .ph-hub .pf-oper::after { left: -18px; top: 50%; width: 15px; border-top: 2px solid var(--border-strong); }
.ph-hub .pf-zone::after, .ph-hub .pf-city::after { left: -35px; top: 50%; width: 33px; border-top: 2px solid var(--border-strong); }
.ph-hub .pf-round, .ph-hub .pf-tarif, .ph-hub .pf-zplan, .ph-hub .pf-oper, .ph-hub .pf-zone, .ph-hub .pf-city { border-left: 3px solid var(--border-strong); }
@media (max-width: 720px) {
    .ph-hub .plan-flow { grid-template-columns: 1fr; }
    .ph-hub .plan-flow .pf { grid-column: auto; grid-row: auto; }
    .ph-hub .plan-flow .pf::before, .ph-hub .plan-flow .pf::after { display: none; }
    .ph-hub .pf-round, .ph-hub .pf-tarif, .ph-hub .pf-zplan, .ph-hub .pf-oper { margin-left: 16px; }
    .ph-hub .pf-zone { margin-left: 32px; }
    .ph-hub .pf-city { margin-left: 48px; }
}

/* ---- «IP адреса» клиента (db/change_ip.inc.php) ---- */
.ip-page .ip-add { margin-bottom: 14px; }
.ip-page .ip-add > label { display: block; margin-bottom: 4px; font-weight: 600; }
.ip-page .ip-add .row { margin-top: 0; align-items: flex-start; }
.ip-page .ip-add textarea { flex: 1; min-width: 200px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ip-page .hint { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.ip-page .ip-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.ip-page .ip-bar > span:first-child { margin-right: auto; }
.ip-page table.ip-list { width: 100%; border-collapse: collapse; }
.ip-page table.ip-list td, .ip-page table.ip-list th { padding: 3px 6px; border-bottom: 1px solid var(--surface-2); text-align: left; }
.ip-page tr.ip-net th { padding-top: 10px; font-weight: 600; color: var(--ink-blue); border-bottom-color: var(--border); }
.ip-page tr.ip-net th .muted { font-weight: 400; }
.ip-page table.ip-list td.chk { width: 1%; }
.ip-page table.ip-list td label { font-family: ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.ip-page table.ip-list td.st { color: var(--text-muted); font-size: 13px; }
.ip-page table.ip-list tr.is-on td.st { color: var(--ink-green, #1c7c3a); }
.ip-page table.ip-list .act { width: 1%; text-align: right; white-space: nowrap; }
.ip-page a.del { font-size: 13px; color: var(--danger); }
.ip-page .ip-confirm { padding: 12px 14px; border: 2px solid var(--danger); border-radius: var(--radius); }
.ip-page .ip-confirm h3 { margin: 0 0 6px; }
.ip-page .ip-confirm .ip-what { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-word; }
.ip-page .ip-nets { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ip-page .ip-dirty { flex-basis: 100%; text-align: right; color: var(--danger); font-size: 13px; }
.ip-page tr.ip-net td { border-bottom-color: var(--border); vertical-align: bottom; }

/* панель «Изменение данных о клиенте»: заголовок с крестиком закрытия */
.edit-panel .edit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.edit-panel .edit-head h3 { margin: 0; }
.ui .edit-panel .edit-head .close { margin: -4px -6px 0 0; padding: 2px 8px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font-size: 18px; line-height: 1; }
.ui .edit-panel .edit-head .close:hover { background: var(--surface); }

/* ---- «E-mail» и «Пользователи статистики» клиента (db/change_email.inc.php, db/change_user.inc.php) ---- */
.email-page table.email-list td.addr, .cabinet-page .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.email-page tr.gone td.addr { color: var(--text-muted); }
.email-page .warn-text { color: var(--danger); font-size: 13px; }
.email-page .email-what { margin: 0 0 8px; padding-left: 18px; max-height: 40vh; overflow: auto; }
.cabinet-page table.users-list th { padding: 4px 6px; text-align: left; font-weight: 500; font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cabinet-page table.users-list td { vertical-align: top; }
.cabinet-page table.users-list td.act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 4px 12px; width: auto; }
.cabinet-page .pass-edit summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.cabinet-page .pass-edit[open] summary { margin-bottom: 4px; }
.cabinet-page .pass-edit .row { margin-top: 0; flex-wrap: nowrap; }
.ui .cabinet-page .pass-edit input[type=text] { width: 14em; min-width: 0; flex: none; }
.cabinet-page .users-add { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.cabinet-page .users-add h3 { margin: 0 0 6px; font-size: 14px; }
.cabinet-page .users-add .row { margin-top: 0; align-items: flex-end; }
.cabinet-page .users-add label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.ui .cabinet-page .users-add input[type=text] { width: 14em; min-width: 0; flex: none; }

/* подтверждение вторым нажатием (js/confirm.js, form[data-confirm]): кнопка в режиме «Вы уверены?» — красная */
.ui form.confirming button[type=submit] { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }

/* ---- отчёт по счёту частника (db/chastnik_payments.php) ---- */
.chast-account .print-sheet { max-width: 1100px; padding: 14px 16px; background: var(--surface); color: var(--text); }
.chast-account .acc-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.chast-account .acc-sum { margin: 0 0 10px; }
.chast-account .acc-filters .row { grid-column: span 2; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.chast-account .acc-filters .row button { white-space: nowrap; }
.chast-account .acc-msg { min-height: 1.2em; margin: 0 0 6px; }
.chast-account table.acc-ops td.num, .chast-account table.acc-ops th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chast-account table.acc-ops .op { white-space: nowrap; }
@media print {
    .chast-account .print-sheet { background: #fff; color: #111; }
    .chast-account table.acc-ops th { background: #e8edf6; color: #111; }
    .chast-account table.acc-ops td { border-bottom: 1px solid #ccc; }
    .chast-account table.acc-ops tr[hidden] { display: none; }
}

/* значок копирования названия клиента в шапке карточки */
.ui .card-head .copy-name { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 3px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); vertical-align: middle; cursor: pointer; }
.ui .card-head .copy-name:hover { background: var(--accent-soft); color: var(--accent); }
.ui .card-head .copy-name.copied { color: var(--ink-green); background: var(--tint-green); }
.ui .card-head .copy-name.failed { color: var(--danger); }
.card-head .copy-name.copied::after { content: 'Скопировано'; position: absolute; left: 100%; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius); background: var(--tint-green); color: var(--ink-green); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ---- файлы клиента: панель «Файлы» в шапке карточки (db/client_files.inc.php) ---- */
.card-head .actions button .count { display: inline-block; min-width: 1.4em; margin-left: 2px; padding: 0 5px; border-radius: 10px; background: var(--surface); font-size: 12px; font-weight: 600; text-align: center; }
.files-panel { margin-top: 10px; }
.files-panel .notice, .files-panel .alert { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius); }
.files-panel .notice { background: var(--surface); }
.files-panel ul.files { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.files-panel ul.files li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); background: var(--surface); }
.files-panel .thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; overflow: hidden; border-radius: 6px; background: var(--surface-2); }
.files-panel .thumb img { width: 100%; height: 100%; object-fit: cover; }
.files-panel .thumb.ext { font-size: 11px; font-weight: 700; color: var(--ink-blue); letter-spacing: .02em; }
.files-panel .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.files-panel .info .name { font-weight: 600; overflow-wrap: anywhere; }
.files-panel .info .open { font-size: 12px; }
.files-panel .info .comment { color: var(--text); font-size: 13px; }
.files-panel .info .muted { font-size: 12px; }
.files-panel li form { flex: none; }
.ui .files-panel button.del { color: var(--danger); font-size: 13px; }
.ui .files-panel form.confirming button.del { padding: 3px 8px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); text-decoration: none; }
.files-panel .files-upload { padding-top: 10px; border-top: 1px solid var(--border); }
.files-panel .drop { position: relative; display: block; padding: 14px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); font-size: 14px; text-align: center; cursor: pointer; }
.files-panel .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.files-panel .drop .pick { color: var(--accent); text-decoration: underline; }
.files-panel .drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.files-panel .chosen { min-height: 1.2em; margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.files-panel .chosen.bad { color: var(--danger); }
.files-panel .files-upload .row { display: flex; flex-wrap: wrap; gap: 6px; }
.ui .files-panel .files-upload .row input[type=text] { flex: 1; min-width: 200px; }
.files-panel .hint { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* значки-подсказки «?» (подсказка — в title, появляется при наведении) */
img.qhelp, .legacy img.qhelp { cursor: help; vertical-align: middle; }

/* диагностика выгрузки в 1С: одна кнопка сохранения для ИНН и договоров — внизу экрана */
.diag-page .save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 -16px 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); }
.diag-page .save-bar .pending { color: var(--danger); font-weight: 600; }
.diag-page tr.changed td { background: var(--tint-yellow); }
.diag-page .muted button.small { margin-left: 6px; vertical-align: baseline; }

/* ---- меню ☰ точки подключения в списке клиентов (corporate.php) и страница точки (db/place.php) ---- */
.group-bar { position: relative; display: flex; align-items: stretch; }
.group-bar .group-head { flex: 1; min-width: 0; }
.place-menu { position: relative; display: flex; align-items: center; padding-right: 4px; }
.ui .place-menu-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; }
.ui .place-menu-btn:hover, .place-menu.open .place-menu-btn { background: var(--accent-soft); color: var(--accent); }
.place-menu-list { position: absolute; top: calc(100% + 2px); right: 4px; z-index: 20; min-width: 220px; padding: 4px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.place-menu-list a { display: block; padding: 7px 12px; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.place-menu-list a:hover, .place-menu-list a:focus { background: var(--accent-soft); color: var(--accent); outline: none; }
body.place-page { padding: 12px 16px 32px; }
.place-page h1 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.place-page .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.place-page .tabs a { padding: 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--accent); text-decoration: none; }
.place-page .tabs a.on { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 600; margin-bottom: -1px; }
.place-page .notice, .place-page .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.place-page .notice { background: var(--accent-soft); }
.place-page .alert { background: var(--danger); color: var(--on-danger); }
.place-page .place-form { display: flex; flex-direction: column; gap: 10px; max-width: 760px; padding: 12px 14px; }
.place-page .place-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.ui .place-page .place-form input[type=text], .ui .place-page .place-form textarea { width: 100%; font-size: 14px; color: var(--text); }
.place-page .place-form textarea { resize: vertical; }
.place-page .place-form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.place-page .place-sheet { max-width: 1100px; padding: 14px 16px; background: var(--surface); color: var(--text); }
.place-page .sheet-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.place-page .sheet-sub { margin: 0 0 10px; color: var(--text-muted); }
.place-page table.place-clients { width: 100%; border-collapse: collapse; font-size: 14px; }
.place-page table.place-clients th { padding: 5px 8px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-blue); background: var(--tint-blue); }
.place-page table.place-clients td { padding: 5px 8px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
.place-page table.place-clients .num { text-align: right; white-space: nowrap; }
.place-page .print-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
@media print {
    .place-page .place-sheet { background: #fff; color: #111; }
    .place-page table.place-clients th { background: #e8edf6; color: #111; }
}
/* вкладка «Файлы» точки подключения (place.php) — та же разметка, что и панель файлов в карточке клиента */
.place-page .place-files { max-width: 900px; padding: 12px 14px; background: var(--tint-blue); border-color: transparent; }
/* загрузка файлов сразу после выбора (js/files.js): на телефоне — «Сфотографировать» и «Выбрать фото или файлы» */
.files-panel .files-upload .comment { width: 100%; margin-bottom: 8px; }
.files-panel .pickers { display: flex; gap: 8px; }
.files-panel .pickers .drop { flex: 1; }
.files-panel .camera { position: relative; display: none; align-items: center; justify-content: center; padding: 14px 16px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-align: center; cursor: pointer; }
.files-panel .camera input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.files-panel .drop .touch { display: none; }
@media (pointer: coarse) {
    .files-panel .camera { display: flex; flex: 1; }
    .files-panel .drop .desk { display: none; }
    .files-panel .drop .touch { display: inline; color: var(--accent); font-weight: 600; }
}
.files-panel .progress { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.files-panel .progress .bar { width: 0; height: 100%; background: var(--accent); transition: width .2s; }
.files-panel .files-upload.busy .pickers { opacity: .5; pointer-events: none; }
/* галерея снимков (js/files.js): просмотр поверх страницы */
html.lb-on, html.lb-on body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #0b0d14; color: #fff; }
.lb[hidden] { display: none; }
.lb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
.lb-title { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb-count { color: #b8c0d8; font-size: 14px; white-space: nowrap; }
.ui .lb-btn { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; text-decoration: none; cursor: pointer; }
.ui .lb-btn:hover { background: rgba(255, 255, 255, .2); }
.ui .lb-close { font-size: 18px; line-height: 1; }
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 56px; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 24px rgba(0, 0, 0, .5); background: #fff; }
.ui .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, .1); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.ui .lb-nav:hover { background: rgba(255, 255, 255, .25); }
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb.single .lb-nav { display: none; }
.lb-sub { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); color: #d6dbea; font-size: 14px; text-align: center; }
@media (max-width: 600px) {
    .lb-stage { padding: 0 4px; }
    .ui .lb-nav { width: 36px; height: 52px; font-size: 28px; background: rgba(0, 0, 0, .35); }
}

/* ---- администрирование файлов клиентов и точек (db/files_admin.php) ---- */
body.files-admin { padding: 12px 16px 32px; }
.files-admin h1 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.files-admin .meta { margin: 0 0 10px; color: var(--text-muted); }
.files-admin .meta b { color: var(--text); }
.files-admin .notice, .files-admin .alert { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius); }
.files-admin .notice { background: var(--accent-soft); }
.files-admin .alert { background: var(--danger); color: var(--on-danger); }
.files-admin .card { margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.files-admin .card.flush { padding: 0; }
.files-admin .filters-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; align-items: end; padding: 10px 12px; }
.files-admin .filters-bar .wide { grid-column: span 2; }
.files-admin .filters-bar label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.files-admin .filters-bar .row { display: flex; gap: 6px; }
.files-admin .bulk-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.files-admin .table-wrap { overflow-x: auto; }
.files-admin table.files-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.files-admin table.files-list th { padding: 5px 8px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-blue); background: var(--tint-blue); }
.files-admin table.files-list td { padding: 6px 8px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
.files-admin table.files-list tr.owner th { padding-top: 10px; background: var(--surface-2); color: var(--text); font-size: 14px; }
.files-admin table.files-list tr.deleted td { background: var(--tint-peach); }
.files-admin table.files-list tr.deleted td:nth-child(2) > a:first-child { text-decoration: line-through; }
.files-admin table.files-list .num { text-align: right; white-space: nowrap; }
.files-admin table.files-list .nowrap { white-space: nowrap; }
.files-admin table.files-list td.chk { width: 1%; }
.files-admin table.files-list td.act { white-space: nowrap; text-align: right; }
.files-admin table.files-list td.act button.link { display: block; margin: 0 0 4px auto; padding: 2px 0; }
.ui.files-admin button.del { color: var(--danger); }
.ui.files-admin button.confirming { padding: 2px 8px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); text-decoration: none; }
.files-admin .tag { display: inline-block; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; }
.files-admin .tag.ok { background: var(--tint-green); color: var(--ink-green); }
.files-admin .tag.warn { background: var(--danger); color: var(--on-danger); }
@media (max-width: 600px) { .files-admin .filters-bar .wide { grid-column: 1 / -1; } }

/* ---- данные для настройки подключения — памятка клиенту (db/show_ip_pref.php): лист A4, печать чёрно-белая ---- */
body.pref-page { padding: 16px; background: var(--surface-2); }
.pref-page .alert { max-width: 210mm; margin: 0 auto 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.pref-page .pref-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 210mm; margin: 0 auto 10px; }
.pref-page .pref-sheet { box-sizing: border-box; max-width: 210mm; min-height: 270mm; margin: 0 auto; padding: 16mm 18mm; background: #fff; color: #111; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); font-size: 15px; line-height: 1.45; }
.pref-page .pref-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #111; }
.pref-page .pref-head img { max-width: 45%; height: auto; }
.pref-page .pref-head .firm { margin-left: auto; text-align: right; font-size: 13px; color: #333; }
.pref-page .pref-head .firm b { font-size: 15px; color: #111; }
.pref-page h1 { margin: 22px 0 6px; font-size: 21px; font-weight: 700; color: #111; }
.pref-page .pref-client { margin: 0 0 14px; font-size: 16px; }
.pref-page section { margin-top: 16px; break-inside: avoid; page-break-inside: avoid; }
.pref-page h2 { margin: 0 0 8px; padding-bottom: 3px; border-bottom: 1px solid #111; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.pref-page table.pref-table { width: 100%; margin-bottom: 8px; border-collapse: collapse; font-size: 15px; }
.pref-page table.pref-table th, .pref-page table.pref-table td { padding: 5px 10px; border: 1px solid #111; text-align: left; }
.pref-page table.pref-table th { font-size: 13px; font-weight: 700; background: #f0f0f0; }
.pref-page table.pref-table td { font-family: ui-monospace, Menlo, Consolas, monospace; }
.pref-page .pref-dl { display: grid; grid-template-columns: minmax(180px, 38%) 1fr; gap: 4px 14px; margin: 0; }
.pref-page .pref-dl dt { color: #444; }
.pref-page .pref-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pref-page .pref-dl dd .desc { font-weight: 400; color: #444; }
.pref-page .pref-dl dd.cred, .pref-page .pref-dl dd.big { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; }
.pref-page .pref-note { margin: 8px 0 0; font-size: 13px; color: #444; }
.pref-page .pref-foot { margin-top: 26px; padding-top: 6px; border-top: 1px solid #999; font-size: 12px; color: #555; }
@media (max-width: 600px) {
    body.pref-page { padding: 8px; }
    .pref-page .pref-sheet { min-height: 0; padding: 16px; }
    .pref-page .pref-dl { grid-template-columns: 1fr; }
    .pref-page .pref-dl dd { margin-bottom: 6px; }
}
@media print {
    @page { size: A4; margin: 14mm 16mm; }
    body.pref-page { padding: 0; background: #fff; }
    .pref-page .no-print { display: none !important; }
    .pref-page .pref-sheet { max-width: none; min-height: 0; padding: 0; box-shadow: none; color: #000; }
    .pref-page .pref-sheet * { color: #000 !important; }
    .pref-page table.pref-table th { background: none; }
    .pref-page .pref-head img { filter: grayscale(1); }
    /* плотнее, чтобы обычная памятка помещалась на один лист */
    .pref-page .pref-sheet { font-size: 13.5px; line-height: 1.4; }
    .pref-page h1 { margin-top: 14px; font-size: 19px; }
    .pref-page .pref-client { margin-bottom: 8px; font-size: 15px; }
    .pref-page section { margin-top: 12px; }
    .pref-page table.pref-table { font-size: 13.5px; }
    .pref-page table.pref-table th, .pref-page table.pref-table td { padding: 3px 8px; }
    .pref-page table.pref-table thead { display: table-header-group; } /* шапка таблицы — на каждом листе */
    .pref-page table.pref-table tr { break-inside: avoid; page-break-inside: avoid; }
    .pref-page section:has(table.pref-table) { break-inside: auto; page-break-inside: auto; }
    .pref-page .pref-dl dd.cred, .pref-page .pref-dl dd.big { font-size: 15px; }
    .pref-page .pref-foot { margin-top: 14px; }
}

/* ---- временные изменения: скорость, включённые IP-адреса (db/temp_changes.inc.php) ---- */
.temp-page h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 700; }
.temp-page .hint { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.temp-page .temp-active { padding: 8px 12px; border-radius: var(--radius); background: var(--tint-yellow); }
.temp-page .temp-active h3 { margin-top: 0; }
.temp-page .temp-item { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.temp-page .temp-item:first-of-type { border-top: 0; }
.temp-page .temp-item .what { flex: 1 1 260px; }
.temp-page .temp-item .row { margin-top: 0; }
.temp-page label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.temp-page .temp-form { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.temp-page .temp-form > .row { align-items: flex-end; }
.temp-page .temp-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.temp-page .temp-form label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
.temp-page .temp-until { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.temp-page .temp-until .quick { display: flex; flex-wrap: wrap; gap: 4px; }
.temp-page .temp-ips { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.temp-page .temp-history { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.temp-page .temp-history li { margin-bottom: 4px; }
/* в карточке клиента */
.temp-badge { margin: 4px 0; padding: 4px 8px; border-radius: var(--radius); background: var(--tint-yellow); color: var(--ink-yellow); font-size: 13px; }
.temp-link { font-size: 13px; }

/* ---- NOC: конфиги коммутаторов (db/noc_switch_config.php, js/swcfg.js) ---- */
.swcfg-page .notice { background: var(--accent-soft); }
.swcfg-page .alert { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--danger); color: var(--on-danger); }
.swcfg-page .sw-warn { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--tint-yellow); color: var(--ink-yellow); }
.swcfg-page .sw-warn-inline { color: var(--ink-yellow); background: var(--tint-yellow); padding: 0 4px; border-radius: 3px; }
.swcfg-page .field-error { display: block; color: var(--danger); font-size: 13px; font-weight: 600; }
.swcfg-page .alert .field-error { color: inherit; }
.swcfg-page h2 { display: inline; }
.swcfg-page h3 { margin: 14px 0 6px; font-size: 15px; font-weight: 700; }
.swcfg-page .mono, .swcfg-page textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.4; }
.ui.swcfg-page button.small, .ui.swcfg-page a.button.small { padding: 2px 9px; font-size: 13px; }
.swcfg-page .sw-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; border-bottom: 2px solid var(--border); }
.swcfg-page .sw-tabs a { padding: 6px 14px; border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-blue); font-weight: 600; }
.swcfg-page .sw-tabs a.on { background: var(--tint-blue); }
.swcfg-page .sw-tabs a:hover { text-decoration: none; background: var(--accent-soft); }
.swcfg-page input.invalid, .swcfg-page .has-error { border-color: var(--danger) !important; outline: 2px solid var(--danger); outline-offset: 0; }
.swcfg-page .sw-netinfo { min-height: 18px; margin: 2px 0 6px; }
.swcfg-page .sw-netinfo button { margin-left: 4px; }
.swcfg-page .sw-uplink { gap: 8px 18px; margin-bottom: 8px; }
.swcfg-page .sw-uplink label:first-child { width: 160px; }
.swcfg-page .sw-picker { position: relative; max-width: 460px; margin-bottom: 8px; }
.swcfg-page .sw-vsug { position: absolute; z-index: 5; left: 0; right: 0; max-height: 320px; margin: 2px 0 0; padding: 4px 0; overflow-y: auto; list-style: none;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.swcfg-page .sw-vsug li { padding: 4px 10px; cursor: pointer; font-size: 14px; }
.swcfg-page .sw-vsug li.on, .swcfg-page .sw-vsug li:hover { background: var(--accent-soft); }
.swcfg-page .sw-vlans { --vcols: minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) auto; }
.swcfg-page .sw-vhead, .swcfg-page .sw-vrow { display: grid; grid-template-columns: var(--vcols); gap: 4px 10px; align-items: center; padding: 4px 6px; }
.swcfg-page .sw-vhead { color: var(--ink-blue); font-size: 13px; font-weight: 600; }
.swcfg-page .sw-vhead:only-child { display: none; }
.swcfg-page .sw-vrow { border-top: 1px solid var(--surface-2); }
.swcfg-page .sw-vrow.is-mgmt { background: color-mix(in srgb, var(--tint-teal) 45%, var(--surface)); border-radius: var(--radius); }
.swcfg-page .sw-vid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.swcfg-page .sw-vid .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.swcfg-page .sw-mgmt-badge { display: none; padding: 0 6px; border-radius: 8px; background: var(--vivid-teal); color: var(--on-vivid); font-size: 11px; font-weight: 600; }
.swcfg-page .is-mgmt .sw-mgmt-badge { display: inline-block; }
.swcfg-page .sw-vacts { display: flex; gap: 4px; white-space: nowrap; }
.swcfg-page input.range-active { box-shadow: 0 0 0 3px var(--accent-soft); }
.swcfg-page .sw-hint { margin: 6px 0; }
.swcfg-page .sw-face-wrap { overflow-x: auto; padding: 6px 0 2px; }
.swcfg-page .sw-face { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 4px; min-width: min-content; }
.ui.swcfg-page .sw-port { display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 2px 2px 3px; border: 2px solid var(--border); border-radius: 6px;
    background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 1.2; }
.swcfg-page .sw-port .pn { color: var(--text-muted); font-size: 11px; }
.swcfg-page .sw-port .pu { font-weight: 700; font-size: 13px; }
.swcfg-page .sw-port .pt { min-height: 14px; font-size: 11px; }
.ui.swcfg-page .sw-port.p-access, .swcfg-page .sw-legend .p-access { background: var(--tint-blue); color: var(--ink-blue); border-color: var(--tint-blue); }
.ui.swcfg-page .sw-port.p-trunk, .swcfg-page .sw-legend .p-trunk { background: var(--tint-lilac); color: var(--ink-lilac); border-color: var(--tint-lilac); }
.ui.swcfg-page .sw-port.p-hybrid, .swcfg-page .sw-legend .p-hybrid { background: var(--tint-teal); color: var(--ink-teal); border-color: var(--tint-teal); }
.ui.swcfg-page .sw-port.p-unused, .swcfg-page .sw-legend .p-unused { background: var(--surface-2); color: var(--text-muted); }
.swcfg-page .sw-port .pn, .swcfg-page .sw-port.p-access .pn, .swcfg-page .sw-port.p-trunk .pn, .swcfg-page .sw-port.p-hybrid .pn { color: inherit; opacity: .8; }
.ui.swcfg-page .sw-port.p-uplink { border-top: 4px solid var(--vivid-violet); }
.ui.swcfg-page .sw-port.p-conflict, .swcfg-page .sw-legend .p-conflict { border-color: var(--danger); background: var(--tint-pink); color: var(--ink-pink); }
.swcfg-page .sw-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.swcfg-page .sw-legend span { padding: 0 8px; border: 2px solid var(--border); border-radius: 6px; font-size: 12px; }
.swcfg-page .sw-actions { gap: 10px; margin-top: 10px; }
.swcfg-page .sw-result .sw-code, .swcfg-page .sw-preview .sw-code { margin-top: 8px; }
.swcfg-page .sw-summary { margin: 4px 0; font-weight: 600; }
.swcfg-page .sw-out-actions { gap: 10px; }
.swcfg-page .sw-history summary .muted, .swcfg-page .sw-log summary .muted, .swcfg-page .sw-versions summary .muted, .swcfg-page .sw-editor > .muted { font-size: 13px; }
.swcfg-page .sw-history input[type=search] { max-width: 300px; margin-bottom: 8px; }
.swcfg-page .table-wrap { overflow-x: auto; }
.swcfg-page .sw-htable { border-collapse: collapse; width: 100%; font-size: 14px; }
.swcfg-page .sw-htable th, .swcfg-page .sw-htable td { padding: 4px 8px; border-bottom: 1px solid var(--surface-2); text-align: left; vertical-align: top; }
.swcfg-page .sw-htable th { color: var(--ink-blue); font-size: 13px; }
.swcfg-page .sw-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.swcfg-page .sw-models .card { margin: 0; }
.swcfg-page .sw-mhead { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.swcfg-page .sw-mname { font-weight: 700; font-size: 15px; }
.swcfg-page .sw-mcomment { margin: 0 0 8px; overflow-wrap: anywhere; }
.swcfg-page .sw-mcard .row form { display: inline; }
.swcfg-page .sw-editor .grid { margin-top: 10px; }
.swcfg-page .sw-more { margin: 8px 0; }
.swcfg-page .sw-more > summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.swcfg-page .sw-fields { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px -14px; padding: 8px 14px;
    background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.swcfg-page .sw-fields-help { flex-basis: 100%; font-size: 13px; }
.swcfg-page .sw-fgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.swcfg-page .sw-fgroup .muted { font-size: 12px; }
.ui.swcfg-page .sw-fields button { padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.ui.swcfg-page .sw-fields button.off { opacity: .45; }
.swcfg-page #sw-own { width: 140px; padding: 2px 6px; font-size: 13px; }
.swcfg-page .sw-fmsg { flex-basis: 100%; min-height: 18px; font-size: 13px; color: var(--ink-green); }
.swcfg-page .sw-fmsg:empty { display: none; }
.swcfg-page label.sw-tpl { margin-top: 10px; color: var(--text); font-weight: 600; }
.swcfg-page label.sw-tpl .muted { font-weight: 400; }
.swcfg-page label.sw-tpl textarea { margin-top: 3px; }
.swcfg-page textarea.sw-cur { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.swcfg-page .sw-examples { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.ui.swcfg-page button.confirming { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.swcfg-page .sw-preview { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.swcfg-page .sw-help ul, .swcfg-page .sw-versions ul, .swcfg-page .sw-log ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.swcfg-page .sw-help li, .swcfg-page .sw-versions li, .swcfg-page .sw-log li { margin-bottom: 4px; overflow-wrap: anywhere; }
.swcfg-page code { padding: 0 3px; border-radius: 3px; background: var(--surface-2); font-size: 13px; }
/* поле с нумерацией строк (js/swcfg.js lineNumbers): высота строки — целая, одинаковая у номеров и текста */
.swcfg-page .sw-code { position: relative; display: block; width: 100%; margin-top: 3px; padding-left: 48px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.swcfg-page .sw-code[hidden] { display: none; }
.swcfg-page .sw-code:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.swcfg-page .sw-ln { position: absolute; top: 0; bottom: 0; left: 0; width: 48px; box-sizing: border-box; padding: 6px 6px 26px; overflow: hidden; white-space: pre; text-align: right; user-select: none;
    background: var(--surface-2); color: var(--text-muted); border-right: 1px solid var(--border); font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.swcfg-page .sw-code textarea, .swcfg-page .sw-code textarea.mono { display: block; width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 0; outline: none; box-shadow: none;
    font: 13px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.swcfg-page .sw-code textarea.sw-cur { box-shadow: none; }
.swcfg-page .sw-code:has(textarea.sw-cur) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.swcfg-page .sw-caret { display: block; min-height: 16px; font-size: 12px; font-weight: 400; text-align: right; }
.ui.swcfg-page button.sw-jump { margin-left: 4px; padding: 0 7px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; }
.ui.swcfg-page button.sw-jump:hover { background: var(--surface); color: var(--accent); }
@media (max-width: 760px) {
    .swcfg-page .sw-vhead { display: none; }
    .swcfg-page .sw-vrow { grid-template-columns: 1fr 1fr; padding: 8px 4px; }
    .swcfg-page .sw-vid { grid-column: 1 / -1; }
    .swcfg-page .sw-vacts { grid-column: 1 / -1; }
    .swcfg-page .sw-fields { position: static; }
    .swcfg-page .sw-examples { margin-left: 0; }
}

/* ---- текст с форматированием (func/richtext.php, js/richtext.js): параметры клиента ---- */
.rich-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 3px; }
.rich-wrap { min-width: 0; }
.rich-wrap textarea { display: block; width: 100%; }
.rich.ph-comment { margin: 2px 0 4px 1.6em; }
.ui .rich-bar button.small { padding: 1px 8px; font-size: 12px; }
.rich mark, .legacy .rich mark { padding: 0 1px; border-radius: 2px; background: var(--highlight); color: inherit; }

/* ---- список клиентов (db/corporate.php): итог по базе внизу ---- */
.list-totals { margin: 10px 8px 14px; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }

/* ---- почтовый сервер (mail/index.php) ---- */
.mail-page .notice { background: var(--accent-soft); }
.mail-page .alert { background: var(--danger); color: var(--on-danger); }
.mail-page h1 .muted { font-weight: 400; }
.mail-page .crumbs { margin: 0 0 8px; font-size: 13px; }
.mail-page .card > h2 { display: block; margin-bottom: 8px; }
.mail-page .count { margin-left: 4px; padding: 0 7px; border-radius: 10px; background: var(--tint-blue); color: var(--ink-blue); font-size: 12px; font-weight: 600; }
.mail-page .table-wrap { overflow-x: auto; }
.mail-page table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.mail-page table.list th { padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.mail-page table.list td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); overflow-wrap: anywhere; }
.mail-page table.list tr:hover td { background: var(--accent-soft); }
.mail-page table.list .num { width: 1%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-page .small { font-size: 12px; }
.mail-page b.off { color: var(--danger); font-weight: 600; }
.mail-page .mstate { padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mail-page .mstate.s1 { background: var(--tint-green); color: var(--ink-green); }
.mail-page .mstate.s0 { background: var(--surface-2); color: var(--text-muted); }
.mail-page .mstate.sa { background: var(--tint-lilac); color: var(--ink-lilac); }
.mail-page .pass-row, .mail-page .local-row { display: flex; align-items: center; gap: 6px; }
.mail-page .pass-row input, .mail-page .local-row input { flex: 1; min-width: 0; }
.ui.mail-page button.small { padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.ui.mail-page a.button.danger-link { border-color: var(--danger); color: var(--danger); }
.mail-page .ip-confirm { border: 2px solid var(--danger); }
.mail-page .mail-settings dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.mail-page .mail-settings dt { color: var(--text-muted); }
.mail-page .mail-settings dd { margin: 0; }
.mail-page .mail-log { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.mail-page .mail-log li { padding: 3px 0; border-bottom: 1px solid var(--surface-2); }
.mail-page tr.hidden { display: none; }
.ui.mail-page .copy-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; padding: 2px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); vertical-align: middle; cursor: pointer; box-shadow: none; }
.ui.mail-page .copy-btn:hover { background: var(--accent-soft); color: var(--accent); }
.ui.mail-page .copy-btn.copied { background: var(--tint-green); color: var(--ink-green); }
.ui.mail-page .copy-btn.failed { color: var(--danger); }
@media print {
    .mail-page .no-print { display: none !important; }
    .mail-print .mail-settings { break-inside: avoid; box-shadow: none; }
}
@media (max-width: 600px) {
    .mail-page .grid .wide2 { grid-column: 1 / -1; }
    .mail-page table.list td:first-child { overflow-wrap: normal; white-space: nowrap; }
}

/* ---- Телефония SIP (svoice): страница db/svoice.php и блок в карточке клиента ---- */
.svoice-page .notice { background: var(--accent-soft); }
.svoice-page .alert { background: var(--danger); color: var(--on-danger); }
.svoice-page .crumbs { margin: 0 0 8px; font-size: 13px; }
.svoice-page .sv-tabs { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 10px; padding: 6px 0; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 14px; }
.svoice-page .sv-tabs a { padding: 3px 10px; border-radius: var(--radius); color: var(--accent); text-decoration: none; white-space: nowrap; }
.svoice-page .sv-tabs a:hover { background: var(--accent-soft); }
.svoice-page .sv-tabs a.current { background: var(--accent); color: var(--on-accent); }
.svoice-page .sv-count { font-size: 12px; opacity: .75; }
.svoice-page .sv-back { margin: 0 0 10px; padding: 6px 10px; border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-size: 14px; }
.svoice-page .sv-links { margin: 6px 0; font-size: 13px; }
.svoice-page .sv-filter { margin: 4px 0 10px; }
.ui.svoice-page .sv-filter select, .ui.svoice-page .sv-filter input { width: auto; }
/* поля без типа, даты, почта, телефон — как текстовые поля .ui (иначе — вид браузера по умолчанию) */
.svoice-page input:not([type]), .svoice-page input[type=date], .svoice-page input[type=email],
.svoice-page input[type=tel], .svoice-page input[type=password] {
    padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: inherit;
}
.svoice-page input:not([type]):focus, .svoice-page input[type=date]:focus, .svoice-page input[type=email]:focus,
.svoice-page input[type=tel]:focus, .svoice-page input[type=password]:focus {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/* фильтры истории: поля, списки, флажок и кнопка — одной высоты, по одной линии */
.svoice-page .sv-filter input:not([type=checkbox]), .svoice-page .sv-filter select, .svoice-page .sv-filter button {
    box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0;
}
.svoice-page .sv-filter > label.check, .svoice-page .sv-filter > .row { height: 34px; margin: 0; align-items: center; }
.svoice-page details.sv-path summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.svoice-page details.sv-path ol { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.svoice-page .sv-pager { display: flex; gap: 14px; align-items: center; margin: 8px 0; font-size: 14px; }
.svoice-page th a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.svoice-page th a.sv-sorted { color: var(--accent); border-bottom-style: solid; }
.svoice-page .sv-reg { font-size: 13px; font-weight: 600; white-space: nowrap; }
.svoice-page .sv-reg.on { color: var(--ink-green); }
.svoice-page .sv-reg.off { color: var(--ink-peach); }
.svoice-page .sv-reg.ring { color: var(--ink-yellow); }
.svoice-page .sv-reg.busy { color: var(--ink-blue); }
.svoice-page .sv-reg-cell .muted { font-size: 12px; }
.svoice-page .tag.rec { border: 0; background: var(--tint-green); color: var(--ink-green); box-shadow: none; cursor: pointer; }
.svoice-page audio.sv-rec-player { display: block; width: 100%; min-width: 220px; height: 32px; margin-top: 4px; }
.svoice-page .card h3 { margin: 14px 0 0; font-size: 15px; }
.svoice-page .card > h2 { display: inline-block; margin-bottom: 8px; }
.svoice-page .card > h2 + a { margin-left: 10px; font-size: 13px; }
.svoice-page .mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.svoice-page .sv-summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.svoice-page .sv-summary dt { color: var(--text-muted); }
.svoice-page .sv-summary dd { margin: 0; }
.svoice-page .sv-secret { border: 2px solid var(--vivid-green); font-size: 15px; }
.svoice-page .sv-phone { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 6px 0; font-size: 14px; }
.svoice-page .sv-phone dt { color: var(--text-muted); }
.svoice-page .sv-phone dt.mono { color: var(--text); font-weight: 600; }
.svoice-page .sv-phone dd { margin: 0; }
.svoice-page .sv-secret p { margin: 8px 0 0; }
.svoice-page .sv-secret-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svoice-page .sv-copy { white-space: nowrap; }
/* очереди: сейчас (кто ждёт, операторы), отчёт за период, потерянные */
.svoice-page .sv-queue { padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.svoice-page .sv-queue:last-child { border-bottom: 0; }
.svoice-page .sv-queue h3 { margin: 10px 0 4px; }
.svoice-page .sv-q-now { margin: 4px 0 6px; font-size: 14px; }
.svoice-page .sv-q-now b { color: var(--ink-peach); }
.svoice-page table.sv-table.sv-q-callers { width: auto; min-width: 280px; margin-bottom: 8px; }
/* таблицы очередей на узком экране — прокрутка вбок, слова не рвутся */
.svoice-page .sv-scroll { overflow-x: auto; }
.svoice-page .sv-scroll table.sv-table td { overflow-wrap: normal; }
.svoice-page .sv-scroll table.sv-table td.mono { white-space: nowrap; }
.svoice-page .sv-scroll table.sv-table th { min-width: 4em; }
.svoice-page .sv-q-bad { color: var(--ink-peach); font-weight: 600; }
.svoice-page .sv-quick { font-size: 13px; margin-left: 8px; }
.svoice-page tr.sv-q-total td { border-top: 2px solid var(--border); }
.svoice-page details.sv-q-opsrep, .svoice-page details.sv-q-hours { margin: 10px 0 0; }
.svoice-page details.sv-q-opsrep summary, .svoice-page details.sv-q-hours summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.svoice-page td.sv-q-bar { width: 40%; white-space: nowrap; }
.svoice-page td.sv-q-bar span { display: inline-block; height: 10px; vertical-align: middle; }
.svoice-page td.sv-q-bar .ok { background: var(--vivid-green); }
.svoice-page td.sv-q-bar .lost { background: var(--vivid-orange); }
.svoice-page table.sv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.svoice-page table.sv-table th { padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.svoice-page table.sv-table td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); overflow-wrap: anywhere; }
.svoice-page table.sv-table tr.off td { color: var(--text-muted); }
.svoice-page table.sv-table td.actions { white-space: nowrap; text-align: right; }
.svoice-page tr.sv-edit td { padding-top: 0; border-bottom-width: 2px; }
.svoice-page tr.sv-edit summary { font-size: 13px; color: var(--accent); cursor: pointer; }
.svoice-page .tag { display: inline-block; padding: 0 7px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.svoice-page .tag.warn { background: var(--tint-peach); color: var(--ink-peach); }
.svoice-page form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ui.svoice-page form.inline select, .ui.svoice-page form.inline input { width: auto; }
.svoice-page .sv-did { min-width: 150px; }
.svoice-page .sv-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 8px 0; }
.svoice-page .sv-form > label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-muted); }
.svoice-page .sv-form > label.check, .svoice-page label.check { flex-direction: row; align-items: center; gap: 4px; color: var(--text); font-size: 14px; }
.svoice-page .sv-form > label.wide { flex-basis: 100%; }
.svoice-page .sv-form textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.svoice-page .sv-form fieldset { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.svoice-page .sv-form fieldset legend { font-size: 13px; color: var(--text-muted); }
.svoice-page .sv-form fieldset p { flex-basis: 100%; margin: 0; }
.svoice-page .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.svoice-page details.sv-new { margin-top: 10px; }
.svoice-page details.sv-new > summary, .svoice-page details.sv-scenario > summary { cursor: pointer; padding: 4px 0; }
.svoice-page details.sv-scenario { border-top: 1px solid var(--surface-2); }
.svoice-page .sv-number { padding: 6px 0; border-top: 1px solid var(--surface-2); }
.svoice-page .sv-number.removed { opacity: .6; }
.svoice-page .sv-number-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svoice-page .grade { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.svoice-page .grade.ok { background: var(--tint-green); color: var(--ink-green); }
.svoice-page .grade.noise { background: var(--tint-peach); color: var(--ink-peach); }
.svoice-page .grade.bad { background: var(--danger); color: var(--on-danger); }
.svoice-page .grade.little_data { background: var(--surface-2); color: var(--text-muted); }
/* сценарий «простым видом»: шаги по порядку, ветки — вложенными списками */
.ui .sv-chain { margin: 4px 0 4px 2px; padding-left: 22px; font-size: 14px; }
.ui .sv-chain > li { margin: 2px 0; }
.ui .sv-chain .muted { color: var(--text-muted); }
.ui .sv-branches { margin: 2px 0; padding-left: 14px; list-style: none; border-left: 2px solid var(--surface-2); }
.ui .sv-branches .branch { color: var(--ink-blue); font-size: 13px; }
.ui .sv-branches .sv-chain { margin-top: 0; }
/* блок «Телефония SIP» в карточке */
.ui .sv-card { margin: 6px 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; text-align: left; }
.ui .sv-card .muted { color: var(--text-muted); }
.ui .sv-card .mono { font-family: ui-monospace, Consolas, monospace; }
.ui .sv-card-number { padding: 4px 0; border-top: 1px solid var(--surface-2); }
/* конструктор сценария (js/svoice-builder.js) */
.ui .sv-builder { flex-basis: 100%; }
.ui .svb-summary .svb-msg { margin: 0 0 6px; }
.ui .svb-chain { margin: 4px 0; padding-left: 0; list-style: none; counter-reset: svb; }
.ui .svb-step { position: relative; margin: 6px 0; padding: 8px 10px 8px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.ui .svb-step.svb-play, .ui .svb-step.svb-menu { border-left-color: var(--vivid-green); }
.ui .svb-step.svb-time { border-left-color: var(--ink-lilac); }
.ui .svb-step.svb-forward { border-left-color: var(--vivid-orange); }
.ui .svb-step.svb-hangup, .ui .svb-step.svb-manual { border-left-color: var(--text-muted); }
.ui .svb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: var(--text); }
.ui .svb-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--text); }
.ui .svb-body > .svb-branch, .ui .svb-body > p, .ui .svb-body > .svb-checks { flex-basis: 100%; }
.ui .svb-body select, .ui .svb-body input[type=text], .ui .svb-body input[type=tel] { width: auto; }
.ui .svb-num { width: 64px; }
.ui .svb-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 13px; }
.ui .svb-checks, .ui .svb-days { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.ui .svb-days { gap: 2px 6px; }
.ui .svb-branch { margin-top: 4px; padding-left: 12px; border-left: 2px dashed var(--border); }
.ui .svb-branch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-blue); font-size: 13px; }
.ui .svb-add select { width: auto; color: var(--accent); }
.ui .svb-link { font-size: 13px; white-space: nowrap; }
.ui .svb-body > .svb-sub { flex-basis: 100%; color: var(--text-muted); font-size: 13px; }
.ui .svb-body > .svb-row { flex-basis: 100%; }
.ui .svb-insert { margin: -2px 0; }
.ui .svb-insert select { width: auto; padding: 0 6px; border-style: dashed; color: var(--text-muted); font-size: 12px; opacity: .7; }
.ui .svb-insert select:hover, .ui .svb-insert select:focus { color: var(--accent); opacity: 1; }
.ui .svb-restored { margin: 0 0 6px; }
.ui .sv-builder button.svb-del { padding: 0 8px; border: 0; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; box-shadow: none; }
.ui .sv-builder button.svb-del:hover { color: var(--danger); }
.ui .sv-builder button.small { padding: 2px 10px; font-size: 13px; }
.ui .svb-msg { padding: 3px 8px; border-radius: var(--radius); font-size: 13px; }
.ui .svb-msg.err { background: var(--danger); color: var(--on-danger); }
.ui .svb-msg.warn { background: var(--tint-peach); color: var(--ink-peach); }
.ui .svb-msg.ok { background: var(--tint-green); color: var(--ink-green); }
.ui .svb-msgs:not(:empty) { margin-top: 6px; }
.ui .svb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui .small { font-size: 12px; }
.ui details.sv-json { margin: 6px 0; font-size: 13px; }
.ui .sv-builder label.svb-inline { flex-direction: row; display: inline-flex; color: var(--text-muted); font-size: 13px; }
.ui .sv-builder .svb-num { padding: 2px 6px; }
.ui .sv-builder .svb-checks label, .ui .sv-builder .svb-days label, .ui .sv-builder label.check { flex-direction: row; display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 14px; }
.ui .sv-builder label.svb-inline { white-space: nowrap; }
.ui .sv-builder input.svb-num { width: 70px; }
.svoice-page .sv-media audio { height: 32px; vertical-align: middle; }

/* ---- телефонные линии клиента (db/change_phone_lines.inc.php): подсказка номера ---- */
.legacy .did-hint { font-size: 12px; line-height: 1.3; }
.legacy .did-hint:empty { display: none; }
.legacy .did-hint.ok { color: var(--ink-green); }
.legacy .did-hint.wait { color: var(--text-muted); }
.legacy .did-hint.bad { color: var(--danger); font-weight: 600; }
.legacy input[data-did-check] { min-width: 10em; }
.legacy input[data-did-check]:invalid:not(:placeholder-shown) { border-color: var(--danger); }
.legacy .did-box { position: relative; display: inline-block; }
.legacy .did-menu { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 18em; max-height: 260px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; }
.legacy .did-menu li { display: flex; gap: 10px; padding: 3px 10px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.legacy .did-menu li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.legacy .did-menu li span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.legacy .did-menu li:hover, .legacy .did-menu li.active { background: var(--accent-soft); }

/* ---- список клиентов: «Создать» — поле названия появляется после первого нажатия (js/client-list.js) ---- */
.create-client.collapsed input[name=name] { display: none; }
.create-client.collapsed { justify-content: flex-end; }

/* ---- NOC: проверка сетей (db/noc_nets_check.php) ---- */
.nets-check .notice { background: var(--accent-soft); }
.nets-check .alert { background: var(--danger); color: var(--on-danger); }
.nets-check .card > h2, .nets-check details.card > summary h2 { margin-bottom: 6px; }
.nets-check .card > h2 { display: block; }
.nets-check .count { margin-left: 4px; padding: 0 7px; border-radius: 10px; background: var(--tint-blue); color: var(--ink-blue); font-size: 12px; font-weight: 600; }
.nets-check .table-wrap { overflow-x: auto; margin: 6px 0 10px; }
.nets-check table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.nets-check table.list th { padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.nets-check table.list td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--surface-2); overflow-wrap: anywhere; }
.nets-check table.list tr:hover td { background: var(--accent-soft); }
.nets-check table.list .num { width: 1%; text-align: right; white-space: nowrap; }
.nets-check table.list td.mono { white-space: nowrap; }
.ui.nets-check .nc-filter { width: 320px; max-width: 100%; margin: 4px 0; }
.nets-check .ip-confirm { border: 2px solid var(--danger); }
.nets-check .tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.nets-check .tabs a { padding: 6px 14px; border-radius: var(--radius) var(--radius) 0 0; color: var(--text-muted); }
.nets-check .tabs a[aria-current=page] { background: var(--surface); color: var(--accent); font-weight: 600; border: 1px solid var(--border); border-bottom-color: var(--surface); margin-bottom: -1px; }
.nets-check .tag { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nets-check .tag.free { background: var(--tint-green); color: var(--ink-green); }
.nets-check .tag.busy { background: var(--surface-2); color: var(--text-muted); }
.nets-check .tag.svc { background: var(--tint-lilac); color: var(--ink-lilac); }
.nets-check .nt-tree { padding: 6px 10px; }
.nets-check .nt-group { border-bottom: 1px solid var(--surface-2); }
.nets-check .nt-group > summary { padding: 6px 4px; cursor: pointer; }
.nets-check .nt-group > summary:hover { background: var(--accent-soft); }
.nets-check .nt-root, .nets-check .nt-kids-list { margin: 0; padding: 0; list-style: none; }
.nets-check .nt-kids-list { margin-left: 16px; padding-left: 10px; border-left: 2px solid var(--border); }
.nets-check .nt-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 3px 6px; border-radius: var(--radius); cursor: pointer; font-size: 14px; list-style: none; }
.nets-check .nt-item > summary::-webkit-details-marker { display: none; }
.nets-check .nt-item > summary:hover { background: var(--accent-soft); }
.nets-check .nt-item[open] > summary { background: var(--tint-blue); }
.nets-check .nt-net { font-weight: 600; min-width: 9.5em; }
.nets-check .nt-vlan, .nets-check .nt-ips, .nets-check .nt-kids { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.nets-check .nt-comment { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.nets-check .nt-body { margin: 2px 0 8px; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--tint-blue) 30%, var(--surface)); }
.nets-check .nt-gap { padding: 2px 6px; font-size: 12px; }
.nets-check li.nt.hit > details > summary .nt-net { background: var(--highlight); border-radius: 2px; }
.ui.nets-check .toolbar-row input[type=search] { width: 320px; max-width: 100%; }
.ui.nets-check a.button.danger-link { border-color: var(--danger); color: var(--danger); }
.nets-check [hidden] { display: none !important; }
.who-page .test-ip { margin: 0 0 10px; }