/* Network Inspector (window.infraOpenNetwork) + компактный блок
 * INFRASTRUCTURE CONTEXT в табе «Сеть» Machine Inspector.
 *
 * Отдельный модуль со своими классами .nin-*: правый drawer сетевой сущности
 * (подсеть/шлюз/DNS). UX-паттерн повторяет Machine Inspector
 * (web/cabinet-infra-machine.css) — панель 450px, overlay без blur, sticky
 * header + скролл только контента, resize-handle 400–700px, transform
 * .17s ease-out — но классы и файл свои, Machine Inspector не переиспользуем.
 *
 * Цвет — семантика: --nin-ok/warn/bad/info/unknown выводятся из общих
 * переменных кабинета (cabinet.css).
 */

/* ─── overlay / drawer ────────────────────────────────────────────────── */
.nin-overlay {
    --nin-overlay-bg: rgba(0, 0, 0, .18);
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: var(--nin-overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}
.nin-overlay.nin-open { opacity: 1; visibility: visible; }
body.light-theme .nin-overlay { --nin-overlay-bg: rgba(16, 24, 32, .16); }

.nin-drawer {
    --nin-ok: var(--accent);
    --nin-warn: #C99A2E;
    --nin-bad: var(--danger);
    --nin-info: #4C8DFF;
    --nin-unknown: var(--muted2);
    --nin-shadow: rgba(0, 0, 0, .28);
    --nin-shadow-strong: rgba(0, 0, 0, .4);

    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    /* Компактная панель свойств: 450px по умолчанию, resize 400–700px. */
    width: var(--nin-w, 450px);
    min-width: min(400px, 100vw);
    max-width: min(700px, 100vw);
    z-index: 1501;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    color: var(--text);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px var(--nin-shadow);
    transform: translateX(102%);
    transition: transform .17s ease-out;
    font-size: 12.5px;
    line-height: 1.3;
}
body.light-theme .nin-drawer {
    --nin-warn: #9A6700;
    --nin-info: #0969DA;
    --nin-shadow: rgba(16, 24, 32, .12);
    --nin-shadow-strong: rgba(16, 24, 32, .18);
}
.nin-drawer.nin-open { transform: translateX(0); }

/* Resize handle на левой границе: 400 → 700px, значение в localStorage. */
.nin-resize {
    position: absolute;
    top: 0;
    left: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}
.nin-resize::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 2px;
    height: 34px;
    margin-top: -17px;
    border-radius: 1px;
    background: transparent;
    transition: background .12s ease;
}
.nin-resize:hover::after, .nin-resize.nin-dragging::after { background: var(--border2); }
body.nin-resizing { cursor: col-resize; user-select: none; }

/* ─── header ──────────────────────────────────────────────────────────── */
.nin-head {
    flex: none;
    padding: 10px 12px 9px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--card);
}
.nin-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nin-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-family: Consolas, "SF Mono", monospace;
}
.nin-spacer { flex: 1; }
.nin-subline {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
}
.nin-subline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nin-dot::before { content: "·"; color: var(--muted2); margin-right: 8px; }
.nin-mono { font-family: Consolas, "SF Mono", monospace; font-size: 11px; letter-spacing: .2px; }

/* ─── buttons ─────────────────────────────────────────────────────────── */
.nin-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    border-radius: var(--radius);
    height: 30px;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.nin-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--border2); }
.nin-btn:disabled { opacity: .5; cursor: not-allowed; }
.nin-btn.nin-icon { height: 30px; padding: 0 8px; font-size: 14px; line-height: 1; }
.nin-x { font-size: 16px; }

/* ─── badges ──────────────────────────────────────────────────────────── */
.nin-badge {
    flex: none;
    font-size: 10.5px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--btn);
    white-space: nowrap;
}
.nin-badge.nin-tone-ok    { color: var(--nin-ok); border-color: color-mix(in srgb, var(--nin-ok) 38%, var(--border)); }
.nin-badge.nin-tone-info  { color: var(--nin-info); border-color: color-mix(in srgb, var(--nin-info) 38%, var(--border)); }
.nin-badge.nin-tone-warn  { color: var(--nin-warn); border-color: color-mix(in srgb, var(--nin-warn) 38%, var(--border)); }
.nin-badge-overlay { color: var(--nin-info); border-color: color-mix(in srgb, var(--nin-info) 38%, var(--border)); }

/* ─── body ────────────────────────────────────────────────────────────── */
.nin-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
}
.nin-body::-webkit-scrollbar { width: 8px; height: 8px; }
.nin-body::-webkit-scrollbar-track { background: transparent; }
.nin-body::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.nin-body::-webkit-scrollbar-thumb:hover { background: var(--muted2); background-clip: padding-box; }

.nin-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 11px 10px;
    margin-bottom: 8px;
    background: var(--card);
}
.nin-section:last-child { margin-bottom: 4px; }
.nin-sec-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted);
    margin: 0 0 6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nin-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--border2); }
.nin-count {
    order: 2;
    font-size: 10.5px;
    letter-spacing: 0;
    color: var(--muted2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 0 5px;
    line-height: 15px;
}

/* ─── property rows (label | value, 28px) ─────────────────────────────── */
.nin-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.nin-kv {
    display: flex;
    gap: 10px;
    align-items: baseline;
    min-height: 28px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border2);
    min-width: 0;
}
.nin-kv:last-child { border-bottom: 0; }
.nin-kv .nin-k { flex: none; width: 116px; color: var(--muted); font-size: 11.5px; }
.nin-kv .nin-v { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.nin-ellip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nin-na { color: var(--muted2); font-style: italic; }

/* Организационный контекст (клиент/объект) и действия подсети */
.nin-cdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted2); display: inline-block; }
.nin-orgv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.nin-orgv .nin-ellip { min-width: 0; }
.nin-health { display: inline-flex; align-items: center; gap: 6px; }
.nin-link {
    appearance: none; border: 0; background: none; color: var(--nin-info);
    font: inherit; font-size: 12px; padding: 0; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.nin-link:hover { text-decoration: underline; }
.nin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.nin-action { height: 28px; font-size: 11.5px; }

/* Блок «Организация»: список распределения машин по объектам (mixed-сеть).
 * Плотные строки, имя слева, счётчик справа; реальные объекты кликабельны. */
.nin-objlist { display: flex; flex-direction: column; margin-top: 6px; }
.nin-objlist-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    padding: 2px 2px 4px;
}
.nin-objrow {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 6px;
    border-radius: 6px;
    min-width: 0;
    cursor: pointer;
    transition: background .12s ease;
}
.nin-objrow:hover { background: var(--hover); }
.nin-objrow.is-static, .nin-objrow.is-none { cursor: default; }
.nin-objrow.is-static:hover, .nin-objrow.is-none:hover { background: none; }
.nin-objrow-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nin-objrow.is-none .nin-objrow-name { color: var(--muted); }
.nin-objrow-count {
    flex: none;
    color: var(--muted2);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ─── stacked-списки (машины / изменения) ─────────────────────────────── */
.nin-list { display: flex; flex-direction: column; }
.nin-more { margin-top: 6px; font-size: 11px; color: var(--muted2); }
.nin-machines-meta { margin: -2px 0 6px; font-size: 11px; color: var(--muted); }

.nin-mrow {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border2);
    color: inherit;
    font: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 6px 2px;
    cursor: pointer;
    min-width: 0;
    transition: background .12s ease;
}
.nin-mrow:hover { background: var(--hover); }
.nin-mrow:last-child { border-bottom: 0; }
.nin-mrow-main { flex: 1; min-width: 0; }
.nin-mrow-name { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nin-mrow-sub { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nin-mrow-sub.nin-org { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.nin-mrow-sub.nin-org .nin-org-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nin-mrow-state { flex: none; font-size: 11px; }

/* ─── online/offline точки и семантика ────────────────────────────────── */
.nin-led { width: 7px; height: 7px; border-radius: 50%; background: var(--nin-unknown); flex: none; display: inline-block; }
.nin-led.nin-tone-ok    { background: var(--nin-ok); }
.nin-led.nin-tone-warn  { background: var(--nin-warn); }
.nin-led.nin-tone-bad   { background: var(--nin-bad); }
.nin-led.nin-tone-info  { background: var(--nin-info); }
.nin-led.nin-tone-muted { background: var(--muted2); }
.nin-tone-ok    { color: var(--nin-ok); }
.nin-tone-warn  { color: var(--nin-warn); }
.nin-tone-bad   { color: var(--nin-bad); }
.nin-tone-info  { color: var(--nin-info); }
.nin-tone-muted { color: var(--muted); }
.nin-tone-unknown { color: var(--nin-unknown); }

/* ─── timeline изменений ──────────────────────────────────────────────── */
.nin-ev {
    border-bottom: 1px solid var(--border2);
    padding: 6px 4px 6px 2px;
    display: flex;
    gap: 8px;
}
.nin-ev:last-child { border-bottom: 0; }
.nin-ev-time { flex: none; width: 38px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 1px; }
.nin-ev-main { flex: 1; min-width: 0; }
.nin-ev-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.nin-ev-type { font-weight: 600; font-size: 12px; }
.nin-ev-entity { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nin-ev-delta {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    font-size: 11.5px;
    min-width: 0;
}
.nin-before { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted2); }
.nin-after { color: var(--text); }
.nin-arrow { color: var(--muted2); }

/* ─── notices / empty / loading ───────────────────────────────────────── */
.nin-notice {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: 8px 10px;
    background: var(--card);
    color: var(--muted);
    font-size: 12px;
}
.nin-notice.nin-tone-info { border-left-color: var(--nin-info); }
.nin-notice.nin-tone-warn { border-left-color: var(--nin-warn); }
.nin-notice.nin-tone-bad  { border-left-color: var(--nin-bad); }
.nin-notice b { color: var(--text); font-weight: 600; }
.nin-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}
.nin-empty .nin-empty-title { display: block; color: var(--text); font-weight: 600; margin-bottom: 3px; }
.nin-empty.nin-empty-slim {
    border: 0;
    padding: 6px 2px;
    text-align: left;
    font-size: 11.5px;
    color: var(--muted);
}
.nin-empty-actions { margin-top: 10px; display: flex; justify-content: center; }
.nin-empty.nin-empty-slim + .nin-empty-actions { justify-content: flex-start; }

.nin-skel { display: grid; gap: 8px; }
.nin-skel i {
    display: block;
    height: 14px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--input), var(--hover), var(--input));
    background-size: 200% 100%;
    animation: nin-shimmer 1.2s linear infinite;
}
.nin-skel i:nth-child(1) { width: 55%; }
.nin-skel i:nth-child(2) { width: 80%; }
.nin-skel i:nth-child(3) { width: 68%; }
.nin-skel i:nth-child(4) { width: 74%; }
.nin-skel i:nth-child(5) { width: 48%; }
@keyframes nin-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ─── INFRASTRUCTURE CONTEXT (таб «Сеть» Machine Inspector, §33) ────────
 * Компактный блок в самом верху таба: Network / Gateway / Managed peers +
 * кнопка «Открыть сеть». Разметку рисует cabinet-infra-machine.js
 * (netCtxBlock), стили держим здесь, чтобы не трогать CSS Machine Inspector. */
.nin-ctx {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 11px 10px;
    margin-bottom: 10px;
    background: var(--card);
}
.nin-ctx-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.nin-ctx-head::after { content: ""; flex: 1; height: 1px; background: var(--border2); }
/* Строки блока строит общий машинный kv() (классы .inm-kv/.inm-k/.inm-v):
 * переопределяем только метрику, чтобы блок остался компактным. */
.nin-ctx .inm-kv { min-height: 26px; padding: 3px 0; }
.nin-ctx .inm-kv .inm-k { width: 132px; font-size: 11.5px; }
.nin-ctx .inm-kv .inm-v { font-size: 12px; }
.nin-ctx-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.nin-ctx-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    border-radius: var(--radius);
    height: 28px;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.nin-ctx-btn:hover { background: var(--hover); border-color: var(--border2); }
.nin-ctx-hint { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── классификация сети: ТИП / EVIDENCE / ПОЧЕМУ ─────────────────────── */
.nin-cls { font-weight: 600; }
.nin-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nin-hint { margin-top: 6px; font-size: 11px; color: var(--muted); }
.nin-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.2;
    vertical-align: 1px;
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    color: var(--muted);
    background: var(--btn);
}
.nin-ovl { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.nin-ovl-item {
    appearance: none;
    font-size: 11px;
    line-height: 1;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--btn);
    color: var(--nin-info);
    font-family: Consolas, "SF Mono", monospace;
}
button.nin-ovl-item { cursor: pointer; }
button.nin-ovl-item:hover { background: var(--hover); border-color: var(--border2); }
.nin-version { margin-top: 8px; font-size: 10.5px; color: var(--muted2); letter-spacing: .2px; }

/* «Почему так определено?» — collapsible-секция (details/summary). */
.nin-why { padding: 0; }
.nin-why-sum {
    list-style: none;
    cursor: pointer;
    padding: 9px 11px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nin-why-sum::-webkit-details-marker { display: none; }
.nin-why-sum::after {
    content: "▾";
    margin-left: auto;
    color: var(--muted2);
    transition: transform .12s ease;
}
.nin-why[open] .nin-why-sum::after { transform: rotate(180deg); }
.nin-why-sum:hover { color: var(--text); }
.nin-why-list {
    list-style: none;
    margin: 0;
    padding: 0 11px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.nin-why-list li { display: flex; gap: 7px; font-size: 12px; }
.nin-why-mark { flex: none; color: var(--nin-ok); }
.nin-why-note { color: var(--muted); font-style: italic; }

/* ─── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .nin-drawer { width: 100vw; min-width: 0; }
}
@media (max-width: 380px) {
    .nin-kv .nin-k { width: 92px; }
    .nin-ctx .inm-kv .inm-k { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
    .nin-drawer, .nin-overlay, .nin-mrow, .nin-btn { transition: none; }
    .nin-skel i { animation: none; }
}

/* ─── Network Domain Inspector (window.infraNetDomainOpen) ──────────────
 * Домен Ландшафта — network-centric drawer. Общий каркас и секции/строки
 * берём из .nin-* (см. выше), добавляем только .ndm-*: ширину 340–640px,
 * поиск устройств, строку scope с флагами и счётчик «Показано N из M». */
.nin-drawer.ndm-drawer {
    width: var(--ndm-w, 380px);
    min-width: min(340px, 100vw);
    max-width: min(640px, 100vw);
}
.ndm-search { margin: 0 0 8px; }
.ndm-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 12.5px;
    font-family: inherit;
    padding: 6px 9px;
}
.ndm-input::placeholder { color: var(--muted2); }
.ndm-input:focus { outline: none; border-color: var(--accent); }
.ndm-mrow { align-items: flex-start; }
.ndm-mrow-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ndm-mrow-sub .nin-mono { flex: none; }
.ndm-mrow-sub .ndm-obj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndm-sep { color: var(--muted2); }
.ndm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.ndm-counter { color: var(--muted2); font-size: 11px; font-variant-numeric: tabular-nums; }
.ndm-scope { flex-wrap: wrap; row-gap: 3px; margin-bottom: 1px; }
.ndm-scope-cidr { font-weight: 600; }
.ndm-scope-meta { color: var(--muted2); font-size: 11px; }
.ndm-flags { display: inline-flex; gap: 5px; margin-left: auto; }
.ndm-why { margin-top: 8px; }
@media (max-width: 560px) {
    .nin-drawer.ndm-drawer { width: 100vw; min-width: 0; }
}

/* ─── Logical Network Inspector (window.infraNetLogicalOpen) ────────────
 * Логическая сеть Ландшафта — network-centric drawer поверх Domain
 * Inspector. Каркас/секции/строки берём из .nin-* (см. выше), добавляем
 * только .nlg-*: ширину 340–640px, крупный CIDR, строку scope со шлюзом,
 * состояние, поиск устройств и счётчик «Показано N из M». */
.nin-drawer.nlg-drawer {
    width: var(--nlg-w, 420px);
    min-width: min(340px, 100vw);
    max-width: min(640px, 100vw);
}
.nlg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 0 0 8px; }
.nlg-cidr { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.nlg-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.nlg-flags { display: inline-flex; gap: 5px; margin-left: auto; }
/* Пояснение к смешанной принадлежности в блоке «Организация» (§7/§12). */
.nlg-org-note { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin: 0 0 6px; }
.nlg-details { margin-bottom: 8px; }
.nlg-details-body { padding: 0 11px 10px; }
.nlg-search { margin: 0 0 8px; }
.nlg-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 12.5px;
    font-family: inherit;
    padding: 6px 9px;
}
.nlg-input::placeholder { color: var(--muted2); }
.nlg-input:focus { outline: none; border-color: var(--accent); }
.nlg-mrow { align-items: flex-start; }
.nlg-mrow-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nlg-mrow-sub .nin-mono { flex: none; }
.nlg-mrow-sub .nlg-obj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlg-sep { color: var(--muted2); }
.nlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.nlg-counter { color: var(--muted2); font-size: 11px; font-variant-numeric: tabular-nums; }
.nlg-scope { flex-wrap: wrap; row-gap: 3px; margin-bottom: 1px; }
.nlg-scope-cidr { font-weight: 600; }
.nlg-scope-meta { color: var(--muted2); font-size: 11px; }
.nlg-scope-gw { color: var(--muted); font-size: 11px; }
.nlg-scope-state { font-size: 11px; margin-left: auto; }
@media (max-width: 560px) {
    .nin-drawer.nlg-drawer { width: 100vw; min-width: 0; }
}