/* Fleet Inspector — Machine Inspector drawer (window.infraOpenMachine).
 *
 * Отдельный модуль: правый drawer поверх Fleet Inspector. Показывает один
 * снимок машины по табам (Overview/Hardware/Software/Services/Network/
 * Changes/Baseline). Данные — только существующий System Intelligence API
 * (/b2b/infra/fleet, /b2b/machines/{host}/snapshot|changes|baseline,
 * /b2b/infra/collect); своих состояний не выдумываем.
 *
 * Цвет — семантика, не украшение: зелёный = подтверждённо normal, amber =
 * внимание, red = critical, синий = информационное/текущее, серый = unknown.
 * Все значения — через CSS-переменные кабинета, локально добавляем только
 * семантические (--inm-ok/warn/bad/info/unknown).
 */

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

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

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

/* Resize handle на левой границе: 400 → 700px, COM-стиль «тянуть за край». */
.inm-resize {
    position: absolute;
    top: 0;
    left: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}
.inm-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;
}
.inm-resize:hover::after, .inm-resize.inm-dragging::after { background: var(--border2); }
body.inm-resizing { cursor: col-resize; user-select: none; }

/* ─── header ──────────────────────────────────────────────────────────── */
.inm-head {
    flex: none;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card);
}
.inm-head-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.inm-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inm-host {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.inm-dot::before { content: "·"; color: var(--muted2); margin-right: 8px; }
.inm-mono { font-family: Consolas, "SF Mono", monospace; font-size: 11px; letter-spacing: .2px; }
.inm-ident,
.inm-sysline {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
}
.inm-ident > span, .inm-sysline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inm-ident b, .inm-sysline b { color: var(--text); font-weight: 550; font-family: Consolas, "SF Mono", monospace; font-size: 11px; }
.inm-sysline .inm-tag { margin: 0; }
.inm-head-note { margin-top: 1px; font-size: 11px; color: var(--muted); }
.inm-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-top: 4px; }
.inm-head-actions .inm-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── buttons ─────────────────────────────────────────────────────────── */
.inm-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    border-radius: var(--radius);
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease;
}
.inm-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--border2); }
.inm-btn:disabled { opacity: .5; cursor: not-allowed; }
.inm-btn.inm-primary { border-color: var(--accent); color: var(--accent); }
.inm-btn.inm-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.inm-btn.inm-danger { border-color: var(--danger); color: var(--danger); }
.inm-btn.inm-icon { height: 30px; padding: 0 8px; font-size: 14px; line-height: 1; }
.inm-x { font-size: 16px; }

.inm-more { position: relative; }
.inm-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px var(--inm-shadow);
    padding: 4px;
    z-index: 5;
    display: none;
}
.inm-menu.inm-open { display: block; }
.inm-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    padding: 6px 8px;
    border-radius: var(--radius);
    cursor: pointer;
}
.inm-menu button:hover { background: var(--hover); }

/* ─── status indicator (thin: dot + text, no pill) ────────────────────── */
.inm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}
.inm-led { width: 7px; height: 7px; border-radius: 50%; background: var(--inm-unknown); flex: none; display: inline-block; }
.inm-status.inm-tone-ok      { color: var(--inm-ok); }
.inm-status.inm-tone-warn    { color: var(--inm-warn); }
.inm-status.inm-tone-bad     { color: var(--inm-bad); }
.inm-status.inm-tone-info    { color: var(--inm-info); }
.inm-status.inm-tone-muted   { color: var(--muted); }
.inm-status.inm-tone-unknown { color: var(--inm-unknown); }
.inm-ok    { color: var(--inm-ok); }
.inm-warn  { color: var(--inm-warn); }
.inm-bad   { color: var(--inm-bad); }
.inm-info  { color: var(--inm-info); }
.inm-muted { color: var(--muted); }
.inm-unknown-c { color: var(--inm-unknown); }
.inm-led.inm-tone-ok   { background: var(--inm-ok); }
.inm-led.inm-tone-warn { background: var(--inm-warn); }
.inm-led.inm-tone-bad  { background: var(--inm-bad); }
.inm-led.inm-tone-info { background: var(--inm-info); }

.inm-tag {
    display: inline-block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 0 4px;
    line-height: 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border2);
    color: var(--muted2);
    vertical-align: middle;
}
.inm-tag.inm-tone-info { color: var(--inm-info); border-color: color-mix(in srgb, var(--inm-info) 40%, var(--border)); }
.inm-tag.inm-tone-warn { color: var(--inm-warn); border-color: color-mix(in srgb, var(--inm-warn) 40%, var(--border)); }
.inm-tag.inm-tone-bad  { color: var(--inm-bad); border-color: color-mix(in srgb, var(--inm-bad) 40%, var(--border)); }

/* ─── tabs ────────────────────────────────────────────────────────────── */
.inm-tabs {
    flex: none;
    display: flex;
    gap: 0;
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
.inm-tabs::-webkit-scrollbar { display: none; }
.inm-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    height: 36px;
    padding: 0 8px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .14s ease, border-color .14s ease;
}
.inm-tab:hover { color: var(--text); }
.inm-tab.inm-active { color: var(--text); font-weight: 550; border-bottom-color: var(--accent); }
.inm-tab .inm-count {
    font-size: 10.5px;
    color: var(--muted);
    background: var(--input);
    border-radius: 8px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
}
.inm-tab .inm-count.inm-tone-warn { color: var(--inm-warn); border-color: color-mix(in srgb, var(--inm-warn) 45%, var(--border)); }
.inm-tab .inm-count.inm-tone-bad  { color: var(--inm-bad); border-color: color-mix(in srgb, var(--inm-bad) 45%, var(--border)); }

/* ─── body ────────────────────────────────────────────────────────────── */
.inm-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px 20px;
    /* Тонкий ненавязчивый scrollbar в стиле кабинета (Firefox + WebKit ниже). */
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
}
.inm-body::-webkit-scrollbar { width: 8px; height: 8px; }
.inm-body::-webkit-scrollbar-track { background: transparent; }
.inm-body::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.inm-body::-webkit-scrollbar-thumb:hover { background: var(--muted2); background-clip: padding-box; }
.inm-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 11px 10px;
    margin-bottom: 8px;
    background: var(--card);
}
.inm-section:last-child { margin-bottom: 4px; }
.inm-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;
}
.inm-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--border2); }
.inm-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin-left: auto;
    order: 2;
    font: inherit;
    font-size: 10.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.inm-link:hover { color: var(--accent); }

/* Свойства — одна колонка label | value (двухколоночная сетка в узком
 * drawer даёт ощущение «растянутой страницы»). */
.inm-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.inm-kv {
    display: flex;
    gap: 10px;
    align-items: baseline;
    min-height: 28px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border2);
    min-width: 0;
}
.inm-kv:last-child { border-bottom: 0; }
.inm-kv .inm-k { flex: none; width: 116px; color: var(--muted); font-size: 11.5px; }
.inm-kv .inm-v { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.inm-ellip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inm-val-lg { font-size: 12.5px; font-weight: 550; overflow-wrap: anywhere; }
.inm-sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; overflow-wrap: anywhere; }

/* ─── stacked-списки (Hardware/Software/Services/Network) ─────────────── */
.inm-list { display: flex; flex-direction: column; }
.inm-li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid var(--border2);
    min-width: 0;
}
.inm-li:last-child { border-bottom: 0; }
.inm-li-main { flex: 1; min-width: 0; }
.inm-li-t { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.inm-li-s { font-size: 11px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.inm-li-v { color: var(--muted); }
.inm-li-p { color: var(--muted2); }
.inm-li-r { flex: none; font-size: 11.5px; text-align: right; white-space: nowrap; }

/* ─── network interfaces / collapsible groups ─────────────────────────── */
.inm-iface { padding: 6px 0 7px; border-bottom: 1px solid var(--border2); }
.inm-iface:last-child { border-bottom: 0; }
.inm-iface-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 2px; }
.inm-iface-name {
    font-size: 12px;
    font-weight: 550;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inm-iface-status { flex: none; font-size: 11px; }
.inm-iface .inm-kv { min-height: 22px; padding: 2px 0; border-bottom: 0; }
.inm-iface .inm-kv .inm-k { width: 62px; font-size: 11px; }
.inm-iface .inm-kv .inm-v { font-size: 11.5px; }

.inm-fold { margin-top: 4px; }
.inm-fold > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--muted);
    padding: 5px 0 5px 12px;
    position: relative;
    user-select: none;
}
.inm-fold > summary::-webkit-details-marker { display: none; }
.inm-fold > summary::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--muted2);
    font-size: 10px;
    transition: transform .12s ease;
}
.inm-fold[open] > summary::before { content: "▾"; }
.inm-fold > summary:hover { color: var(--text); }
.inm-fold-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inm-fold-less { display: none; }
.inm-fold[open] .inm-fold-more { display: none; }
.inm-fold[open] .inm-fold-less { display: inline; }
.inm-fold-body { padding-top: 2px; }

/* Широких таблиц в узкой панели нет: Hardware/Software/Services/Network —
 * stacked-списки (.inm-list/.inm-li). */
.inm-select { flex: 0 1 auto; max-width: 42%; cursor: pointer; }

/* ─── filters / sort ──────────────────────────────────────────────────── */
.inm-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.inm-input {
    background: var(--input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0 8px;
    height: 30px;
    font: inherit;
    font-size: 12px;
    min-width: 0;
    flex: 1 1 160px;
}
.inm-input:focus { outline: none; border-color: var(--accent); }
.inm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.inm-seg button {
    appearance: none;
    background: var(--btn);
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    height: 28px;
    padding: 0 8px;
    cursor: pointer;
}
.inm-seg button:last-child { border-right: 0; }
.inm-seg button.inm-active { background: var(--hover); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.inm-spacer { flex: 1; }
.inm-hint { color: var(--muted); font-size: 11px; }

/* ─── notices / empty states ──────────────────────────────────────────── */
.inm-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;
}
.inm-notice.inm-tone-info { border-left-color: var(--inm-info); }
.inm-notice.inm-tone-warn { border-left-color: var(--inm-warn); }
.inm-notice.inm-tone-bad  { border-left-color: var(--inm-bad); }
.inm-notice b { color: var(--text); font-weight: 600; }
.inm-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}
.inm-empty .inm-empty-title { display: block; color: var(--text); font-weight: 600; margin-bottom: 3px; }
/* Короткое пустое состояние без «большой карточки» (Changes, последние события). */
.inm-empty.inm-empty-slim {
    border: 0;
    padding: 6px 2px;
    text-align: left;
    font-size: 11.5px;
    color: var(--muted);
}
.inm-empty.inm-empty-slim .inm-empty-title { color: var(--muted); font-weight: 550; font-size: 12px; margin-bottom: 2px; }
.inm-partial {
    display: inline-block;
    font-size: 10.5px;
    padding: 0 5px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--inm-warn) 45%, var(--border));
    color: var(--inm-warn);
    margin-left: 6px;
}
.inm-na { color: var(--muted2); font-style: italic; }

/* ─── timeline (changes) ──────────────────────────────────────────────── */
.inm-day { margin-bottom: 10px; }
.inm-day-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
    padding: 3px 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    border-bottom: 1px solid var(--border2);
    display: flex;
    gap: 8px;
    align-items: center;
}
.inm-ev {
    border-bottom: 1px solid var(--border2);
    padding: 6px 4px 6px 2px;
    display: flex;
    gap: 8px;
    transition: background .12s ease;
}
.inm-ev:hover { background: var(--hover); }
.inm-ev:last-child { border-bottom: 0; }
.inm-ev-time { flex: none; width: 38px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 1px; }
.inm-ev-main { flex: 1; min-width: 0; }
.inm-ev-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inm-ev-type { font-weight: 600; font-size: 12px; }
.inm-ev-entity { color: var(--text); overflow-wrap: anywhere; font-size: 12px; }
/* before/after — стек, а не «два конца широкого экрана» */
.inm-ev-delta {
    margin-top: 2px;
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.inm-before { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted2); overflow-wrap: anywhere; }
.inm-after { color: var(--text); overflow-wrap: anywhere; }
.inm-arrow { color: var(--muted2); line-height: 1; }
.inm-ev-toggle {
    appearance: none;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline dotted;
}
.inm-ev-toggle:hover { color: var(--text); }
.inm-ev-foot { margin-top: 4px; }
.inm-details { margin-top: 7px; display: grid; gap: 6px; animation: inm-fade .16s ease; }
@keyframes inm-fade { from { opacity: 0; } to { opacity: 1; } }
.inm-diff-cols { display: grid; grid-template-columns: 1fr; gap: 6px; }
.inm-diff-col { border: 1px solid var(--border); border-radius: var(--radius); background: var(--input); padding: 6px 8px; }
.inm-diff-col h5 { margin: 0 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted2); font-weight: 600; }
.inm-diff-col pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "SF Mono", monospace; font-size: 11px; color: var(--text); }
.inm-json { background: var(--input); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; overflow-x: auto; }
.inm-json pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "SF Mono", monospace; font-size: 11px; color: var(--muted); }
.inm-json summary { cursor: pointer; color: var(--muted); font-size: 11px; }

/* ─── rules / notes ───────────────────────────────────────────────────── */
.inm-note-list { margin: 5px 0 0; padding-left: 18px; color: var(--muted); font-size: 11.5px; }
.inm-note-list li { margin: 2px 0; overflow-wrap: anywhere; }
.inm-sub-tbl-title { font-size: 12px; font-weight: 600; margin: 12px 0 5px; display: flex; align-items: center; gap: 8px; }
.inm-sub-tbl-title:first-child { margin-top: 0; }
.inm-inline-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.inm-code { font-family: Consolas, "SF Mono", monospace; font-size: 11.5px; color: var(--muted); }

/* ─── confirm ─────────────────────────────────────────────────────────── */
.inm-confirm {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--inm-shadow-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.inm-confirm-box {
    width: min(440px, 100%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 12px 40px var(--inm-shadow-strong);
}
.inm-confirm-box h3 { margin: 0 0 8px; font-size: 14px; }
.inm-confirm-box p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.inm-confirm-box textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 7px 9px;
    font: inherit;
    font-size: 12px;
    resize: vertical;
    min-height: 54px;
    margin-bottom: 12px;
}
.inm-confirm-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* ─── loading ─────────────────────────────────────────────────────────── */
.inm-skel { display: grid; gap: 8px; }
.inm-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: inm-shimmer 1.2s linear infinite;
}
.inm-skel i:nth-child(1) { width: 55%; }
.inm-skel i:nth-child(2) { width: 80%; }
.inm-skel i:nth-child(3) { width: 68%; }
.inm-skel i:nth-child(4) { width: 74%; }
.inm-skel i:nth-child(5) { width: 48%; }
@keyframes inm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.inm-spin { display: inline-block; animation: inm-rot 1s linear infinite; }
@keyframes inm-rot { to { transform: rotate(360deg); } }

/* ─── responsive ──────────────────────────────────────────────────────── */
/* Панель НЕ растягивается вслед за viewport: на широких мониторах остаётся
 * 450px по умолчанию (пользователь может тянуть до 700px). На узких —
 * занимает доступную ширину. */
@media (max-width: 560px) {
    .inm-drawer { width: 100vw; min-width: 0; }
    .inm-diff-cols { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .inm-kv .inm-k { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
    .inm-drawer, .inm-overlay, .inm-ev, .inm-tab, .inm-ev-toggle, .inm-btn { transition: none; }
    .inm-skel i, .inm-spin, .inm-details { animation: none; }
}