/* OM_Toolkit — тема по ТЗ редизайна (docs/TZ_redesign.md, этап 1): тёплая палитра, мягкие тени, токены движения.
   Подключается после material.css и задаёт значения его переменных (--md-*), поэтому общий блок om-tokens
   (совпадает с расширением побайтно) не меняется, а все страницы получают новый вид сразу. Контраст цветов
   посчитан по WCAG: текст ≥ 4,5, графика и рамки элементов управления ≥ 3. */

/* Шрифт не меняется: стек --om-font из app.css (Inter, если установлен в системе, иначе Segoe UI). */

/* ---- светлая тема ---- */
body {
  --md-surface: #FAF8F5; --md-card: #FFFFFF; --md-container-lowest: #FFFFFF; --md-container-low: #F6F2EE; --md-container: #F2ECE6; --md-container-high: #EAE2DA;
  --md-on-surface: #2A221D; --md-on-variant: #5E5047; --md-outline: #8C7D70; --md-outline-variant: #E0D6CC;
  --md-state: rgba(42, 34, 29, .055); --md-state-press: rgba(42, 34, 29, .10);
  --md-elev-1: 0 1px 2px rgba(42, 34, 29, .04), 0 2px 8px -2px rgba(42, 34, 29, .06);
  --md-elev-2: 0 2px 4px rgba(42, 34, 29, .05), 0 10px 24px -8px rgba(42, 34, 29, .12);
  --md-r-sm: 10px; --md-r-md: 14px; --md-r-lg: 20px;

  --bg-base: var(--md-surface); --bg-elevated: var(--md-card); --bg-subtle: var(--md-container);
  --bg-overlay: rgba(28, 22, 32, .45);
  --surface-lavender: #EDE8F7; --surface-sand: #F0E6DA; --surface-glass: rgba(255, 255, 255, .72);
  --border-subtle: #ECE4DC; --border-default: #E0D6CC; --border-strong: #C9BCAE; --border-control: #8C7D70;
  --text-primary: #2A221D; --text-secondary: #5E5047; --text-muted: #76685D;
  --on-accent: #FFFFFF;
  --danger: #A3423F; --danger-soft: #F6E3E1; --warning: #8C5A12; --warning-soft: #F6EAD6;
  --success: #2F7352; --success-soft: #E0EFE6; --info: #33609A; --info-soft: #E1E9F5;
  --viz-1: #6B4ED6; --viz-2: #1E8576; --viz-3: #B05A22; --viz-4: #3A69BD;
  --viz-5: #B23C74; --viz-6: #66801A; --viz-7: #86603F; --viz-8: #5A6680;
  --seq-1: #F3EEFB; --seq-2: #D9CCF3; --seq-3: #B39DE6; --seq-4: #8A6BD8; --seq-5: #5B3FB8;
  --elev-3: 0 1px 0 var(--border-subtle), 0 8px 20px -12px rgba(42, 34, 29, .14);
  --elev-4: 0 4px 8px rgba(42, 34, 29, .06), 0 24px 48px -12px rgba(42, 34, 29, .22);

  /* важность замечаний аудита — на смысловых цветах */
  --sev-critical: var(--danger); --sev-critical-bg: var(--danger-soft);
  --sev-high: #A34A1C; --sev-high-bg: #F8E5D8;
  --sev-medium: var(--warning); --sev-medium-bg: var(--warning-soft);
  --sev-low: #5A5260; --sev-low-bg: #EEE9EF;
  --sev-info: var(--info); --sev-info-bg: var(--info-soft);
  --om-ok: var(--success); --om-ok-bg: var(--success-soft);

  --om-sidebar-bg: var(--md-surface);
  --om-shadow-sm: var(--md-elev-1); --om-shadow: var(--md-elev-1); --om-shadow-lg: var(--elev-4);
  --om-ring: 0 0 0 2px var(--md-card), 0 0 0 4px var(--om-accent);

  /* движение */
  --dur-micro: 120ms; --dur-std: 200ms; --dur-emphasis: 320ms; --dur-page: 420ms;
  --ease-std: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --stagger: 40ms;
  --om-ease: var(--ease-std);
}
html { background: #FAF8F5; }

/* ---- тёмная тема ---- (:not(...) поднимает вес селектора до правила prefers-color-scheme в material.css) */
:root[data-bs-theme="dark"]:not([data-theme="light"]) body {
  --md-surface: #14111A; --md-card: #1C1824; --md-container-lowest: #110E16; --md-container-low: #1C1824; --md-container: #252030; --md-container-high: #2E2839;
  --md-on-surface: #F2EDF7; --md-on-variant: #B8AEC4; --md-outline: #857B93; --md-outline-variant: #35303F;
  --md-state: rgba(242, 237, 247, .07); --md-state-press: rgba(242, 237, 247, .11);
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .55);
  --bg-overlay: rgba(0, 0, 0, .65);
  --surface-lavender: #2A2338; --surface-sand: #2E2620; --surface-glass: rgba(36, 30, 44, .72);
  --border-subtle: #2A2532; --border-default: #35303F; --border-strong: #4B4457; --border-control: #857B93;
  --text-primary: #F2EDF7; --text-secondary: #B8AEC4; --text-muted: #9A90A8;
  --on-accent: #14111A;
  --danger: #E79A96; --danger-soft: #3A2224; --warning: #E8BF7A; --warning-soft: #3A2E1C;
  --success: #7FCDA5; --success-soft: #1E3328; --info: #93B4E6; --info-soft: #1E2A3C;
  --viz-1: #A58BF5; --viz-2: #4FC2AE; --viz-3: #E0915A; --viz-4: #7FA6EC;
  --viz-5: #E77EAF; --viz-6: #A9C25A; --viz-7: #C9A27F; --viz-8: #A3AEC6;
  --seq-1: #2A2338; --seq-2: #3F3266; --seq-3: #5E4AA0; --seq-4: #8C74E0; --seq-5: #C7B6FA;
  --elev-3: 0 1px 0 var(--border-default), 0 8px 20px -12px rgba(0, 0, 0, .6);
  --elev-4: 0 0 0 1px var(--border-default), 0 16px 40px -12px rgba(0, 0, 0, .6);
  --sev-high: #F0A77E; --sev-high-bg: #3A2418; --sev-low: #C9C0D2; --sev-low-bg: #2E2839;
  /* акцент из настроек тёмный — на тёмном фоне его осветляем (контраст ≥ 4,5), текст на нём тёмный */
  --om-accent: color-mix(in srgb, var(--om-accent-base, #542EC3) 58%, #fff);
  --om-accent-strong: color-mix(in srgb, var(--om-accent-base, #542EC3) 42%, #fff);
  --om-brand: var(--om-accent); --bs-primary: var(--om-accent); --bs-link-color: var(--om-accent); --bs-link-hover-color: var(--om-accent-strong);
}
html[data-bs-theme="dark"] { background: #14111A; }

/* ---- типографика ---- */
body { font-feature-settings: "cv11" 1, "ss01" 1; }
.om-num, .table td, .table th, .om-table td, .om-kpi .v, .om-kpi-value { font-variant-numeric: tabular-nums; }

/* ---- поверхности и элементы управления ---- */
.card, .om-panel { box-shadow: var(--md-elev-1); border-color: var(--border-subtle); }
.form-control, .form-select { border-color: var(--border-control); }
.form-check-input { border-color: var(--border-control); }
.form-control:focus, .form-select:focus { border-color: var(--om-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--om-accent); outline-offset: 2px; }
.btn:focus-visible { box-shadow: none; }
.dropdown-menu, .modal-content, .toast { box-shadow: var(--elev-4); border-color: var(--border-subtle); }
.btn-outline-primary { --bs-btn-color: var(--om-accent); --bs-btn-border-color: color-mix(in srgb, var(--om-accent) 55%, transparent);
  --bs-btn-hover-bg: var(--om-accent); --bs-btn-hover-border-color: var(--om-accent); --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: var(--om-accent-strong); --bs-btn-active-border-color: var(--om-accent-strong); --bs-btn-active-color: var(--on-accent);
  --bs-btn-disabled-color: var(--om-accent); --bs-btn-disabled-border-color: color-mix(in srgb, var(--om-accent) 40%, transparent); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: var(--on-accent); --bs-btn-hover-color: var(--on-accent); --bs-btn-active-color: var(--on-accent); }
.om-topbar { box-shadow: none; transition: box-shadow var(--dur-std) var(--ease-std); }
.om-topbar.is-scrolled { box-shadow: var(--elev-3); }
@media (prefers-contrast: more) { body { --border-subtle: var(--border-control); --border-default: var(--border-control); --md-outline-variant: var(--border-control); } }

/* ---- движение: кнопки, карточки, меню, окна ---- */
.btn { position: relative; overflow: hidden; transition: transform var(--dur-micro) var(--ease-std), background-color var(--dur-micro) var(--ease-std),
  border-color var(--dur-micro) var(--ease-std), color var(--dur-micro) var(--ease-std), box-shadow var(--dur-std) var(--ease-std); }
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }
.btn-primary:hover { box-shadow: var(--md-elev-2); }
.om-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0);
  animation: om-ripple var(--dur-page) var(--ease-out) forwards; }
@keyframes om-ripple { to { transform: scale(1); opacity: 0; } }

a.card, .om-card-link, .card.om-clickable { transition: transform var(--dur-std) var(--ease-std), box-shadow var(--dur-std) var(--ease-std), border-color var(--dur-std) var(--ease-std); }
a.card:hover, .om-card-link:hover, .card.om-clickable:hover { transform: translateY(-2px); box-shadow: var(--md-elev-2);
  border-color: color-mix(in srgb, var(--om-accent) 40%, var(--border-subtle)); }

.dropdown-menu.show { animation: om-pop 160ms var(--ease-out); transform-origin: top left; }
.dropdown-menu-end.show { transform-origin: top right; }
@keyframes om-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.modal.fade .modal-dialog { transform: scale(.96); opacity: 0; transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out); }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-backdrop.show { opacity: 1; background: var(--bg-overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.toast.showing, .toast.show { animation: om-toast-in var(--dur-emphasis) var(--ease-out); }
@keyframes om-toast-in { from { opacity: 0; transform: translateX(24px); } }
.nav-tabs .nav-link, .nav-pills .nav-link { transition: background-color var(--dur-std) var(--ease-std), color var(--dur-std) var(--ease-std); }
.tab-pane.active { animation: om-fade-up var(--dur-std) var(--ease-out); }
.form-switch .form-check-input { transition: background-position var(--dur-std) var(--ease-spring), background-color var(--dur-std) var(--ease-std); }

/* ---- оболочка (этап 2) ---- */
.om-nav a .ico { transition: transform var(--dur-micro) var(--ease-std); }
.om-nav a:hover .ico { transform: translateX(1px) scale(1.08); }
.om-nav a.active { transition: background-color var(--dur-std) var(--ease-std); }

/* палитра команд: стекло, появление «из глубины», исчезновение быстрее */
.om-palette { background: var(--bg-overlay); animation: om-fade var(--dur-std) var(--ease-out); }
.om-palette-box { background: var(--surface-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-color: var(--border-subtle); box-shadow: var(--elev-4); border-radius: var(--md-r-lg);
  animation: om-palette-in 260ms var(--ease-out); transform-origin: 50% 0; }
@keyframes om-palette-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.om-palette.closing { animation: om-fade-out 140ms var(--ease-in) forwards; }
.om-palette.closing .om-palette-box { animation: om-palette-out 140ms var(--ease-in) forwards; }
@keyframes om-fade-out { to { opacity: 0; } }
@keyframes om-palette-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.om-palette-item { transition: background-color var(--dur-micro) var(--ease-std); }
.om-palette-item .pi { transition: background-color var(--dur-micro) var(--ease-std), color var(--dur-micro) var(--ease-std); }
.om-palette-item[aria-selected="true"] .pi { color: var(--on-accent); }
.om-palette-item[aria-selected="true"] .go { opacity: 1; transition: opacity var(--dur-micro); }

/* уведомления: въезд справа, стопка сдвигается (motion.js FLIP), полоса оставшегося времени, пауза при наведении */
.om-toast { position: relative; overflow: hidden; box-shadow: var(--elev-4); border-color: var(--border-subtle);
  animation: om-toast-in var(--dur-emphasis) var(--ease-out); }
.om-toast.leaving { animation: om-toast-out 160ms var(--ease-in) forwards; }
@keyframes om-toast-out { to { opacity: 0; transform: translateX(16px); } }
.om-toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .35; transform-origin: left;
  animation: om-toast-bar linear forwards; }
.om-toast.success .bar { color: var(--success); } .om-toast.warning .bar { color: var(--warning); } .om-toast.info .bar { color: var(--info); }
.om-toast.paused .bar { animation-play-state: paused; }
@keyframes om-toast-bar { to { transform: scaleX(0); } }
.om-toast .act { margin-left: auto; background: none; border: 0; padding: 0 .25rem; font-weight: 650; color: var(--om-accent); white-space: nowrap; }
.om-toast .act + .x { margin-left: .25rem; }
.om-toast .x { min-width: 24px; min-height: 24px; }

/* вкладки: подчёркивание переезжает между вкладками (motion.js ставит .om-tab-ink) */
.om-tabs.has-ink { position: relative; }
.om-tabs.has-ink button[aria-selected="true"] { border-bottom-color: transparent; }
.om-tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--om-accent); border-radius: 2px 2px 0 0; pointer-events: none;
  transition: transform var(--dur-std) var(--ease-out), width var(--dur-std) var(--ease-out); }
.om-tabs button { transition: color var(--dur-micro) var(--ease-std); }

/* ---- графики и дашборды (этап 3) ---- */
@keyframes om-grow-x { from { transform: scaleX(0); } }
.om-bar .fill, .om-stack .bar { transform-origin: left center; animation: om-grow-x 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.om-repeat .om-bar .fill, .om-repeat .om-stack .bar { animation: om-fade var(--dur-std) var(--ease-out) both; }
button.om-bar, .om-stack-row .lbl { width: 100%; border: 0; background: none; padding: .15rem .3rem; margin: 0 -.3rem; border-radius: var(--md-r-xs); text-align: left; color: inherit; font: inherit; }
button.om-bar { width: calc(100% + .6rem); transition: background-color var(--dur-micro) var(--ease-std); }
button.om-bar:hover, .om-stack-row button.lbl:hover { background: var(--md-state); }
.om-stack { display: flex; flex-direction: column; gap: .45rem; }
.om-stack-row { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto; gap: .65rem; align-items: center; font-size: .8rem; }
.om-stack-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.om-stack-row .track { display: block; height: 12px; border-radius: 999px; background: var(--md-container); overflow: hidden; }
.om-stack-row .bar { display: flex; height: 100%; gap: 2px; }
.om-stack-row .seg { display: block; border: 0; padding: 0; min-width: 3px; height: 100%; transition: filter var(--dur-micro), transform var(--dur-micro) var(--ease-std); }
.om-stack-row button.seg { cursor: pointer; }
.om-stack-row button.seg:hover { filter: brightness(1.12) saturate(1.1); transform: scaleY(1.25); }
.om-stack-row .val { font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 3rem; text-align: right; }
.om-legend button.pick::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .45rem; background: var(--c); vertical-align: -1px; }
.om-legend button.pick { text-align: left; border: 0; background: none; padding: .1rem .3rem; border-radius: var(--md-r-xs); color: inherit; font: inherit; }
.om-legend button.pick:hover { background: var(--md-state); }
.om-donut .seg { transition: stroke-width var(--dur-std) var(--ease-std), opacity var(--dur-std) var(--ease-std); }
.om-donut.has-hot .seg:not(.hot), .om-donut.has-hot .om-legend > :not(.hot) { opacity: .4; }
.om-donut .seg.hot { stroke-width: 20; }

/* тепловая полоса (аудит, замечания по мультикубам): число в каждой ячейке, цвет дублирует его */
.om-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; }
.om-heat-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: .45rem .55rem; border: 0; border-radius: var(--md-r-xs);
  background: var(--h); color: var(--text-primary); text-align: left; animation: om-fade var(--dur-emphasis) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms);
  transition: transform var(--dur-micro) var(--ease-std), box-shadow var(--dur-micro) var(--ease-std); }
.om-heat-cell.dark { color: #fff; }
[data-bs-theme="dark"] .om-heat-cell.dark { color: var(--bg-base); }
.om-heat-cell b { font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.om-heat-cell span { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; opacity: .9; }
.om-heat-cell:hover { transform: translateY(-1px); box-shadow: var(--md-elev-2); }

/* карточки важности замечаний (аудит): цвет + иконка + подпись */
.om-sevcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.om-sevcard { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; padding: .8rem 1rem; border-radius: var(--md-r-md);
  border: 1px solid var(--border-subtle); background: var(--md-card); box-shadow: var(--md-elev-1); color: var(--text-primary); position: relative; overflow: hidden;
  transition: transform var(--dur-std) var(--ease-std), box-shadow var(--dur-std) var(--ease-std), border-color var(--dur-std) var(--ease-std); }
.om-sevcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--om-accent)); }
.om-sevcard:hover { transform: translateY(-2px); box-shadow: var(--md-elev-2); border-color: color-mix(in srgb, var(--c, var(--om-accent)) 45%, var(--border-subtle)); }
.om-sevcard[aria-pressed="true"] { border-color: var(--c, var(--om-accent)); background: color-mix(in srgb, var(--c, var(--om-accent)) 8%, var(--md-card)); }
.om-sevcard .k { font-size: .78rem; color: var(--text-secondary); font-weight: 550; display: flex; align-items: center; gap: .4rem; }
.om-sevcard .k i { color: var(--c); font-size: .8rem; }
.om-sevcard .v { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.02em; }
.om-sevcard .h { font-size: .74rem; color: var(--text-muted); }
.om-sevcard .ring { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); }

/* виртуальная таблица (больше pageSize строк): прокрутка внутри блока, шапка прилипает */
.om-table-wrap.om-virtual { max-height: min(72vh, 900px); overflow: auto; overscroll-behavior: contain; }
.om-table-wrap.om-virtual thead th { position: sticky; top: 0; z-index: 2; }
.om-table tr.om-vspace td { padding: 0 !important; border: 0 !important; background: transparent !important; }

/* «Проверено»: строка уходит из таблицы */
.om-table tr.om-row-out { animation: om-row-out 280ms var(--ease-in) forwards; }
@keyframes om-row-out { to { opacity: 0; transform: translateX(12px); } }
.om-filter-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .25rem .15rem .65rem; font-size: .78rem; font-weight: 600;
  background: var(--om-accent-soft); color: var(--text-primary); animation: om-pop 160ms var(--ease-out); }
.om-filter-chip button { border: 0; background: none; color: var(--text-secondary); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.om-filter-chip button:hover { background: var(--md-state); color: var(--text-primary); }

/* ---- загрузка снимка: этапы и «Снимок готов» (этап 4) ---- */
.progress { background: var(--md-container); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar { background: var(--om-accent); border-radius: 999px; transition: width 700ms var(--ease-out); }
.om-load-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; }
.om-load-steps li { display: flex; align-items: center; gap: .55rem; color: var(--text-secondary); }
.om-load-steps .dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid var(--border-control); display: grid; place-items: center; transition: background-color var(--dur-std), border-color var(--dur-std); }
.om-load-steps li.active { color: var(--text-primary); font-weight: 600; }
.om-load-steps li.active .dot { border-color: var(--om-accent); animation: om-pulse 1.4s var(--ease-std) infinite; }
.om-load-steps li.done .dot { background: var(--success); border-color: var(--success); }
.om-load-steps li.done .dot::after { content: ""; width: 7px; height: 4px; border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
[data-bs-theme="dark"] .om-load-steps li.done .dot::after { border-color: var(--bg-base); }
@keyframes om-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--om-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.om-ready { border-color: color-mix(in srgb, var(--success) 40%, var(--border-subtle)); }
.om-ready-check { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); flex: none; }
.om-ready-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: om-draw 420ms 120ms var(--ease-out) forwards; }
@keyframes om-draw { to { stroke-dashoffset: 0; } }

/* ---- снимки: строки и панель выбранных ---- */
.om-snap-row { background: var(--md-container-low); border: 1px solid transparent; transition: border-color var(--dur-std) var(--ease-std), background-color var(--dur-std) var(--ease-std); }
.om-snap-row:hover { border-color: var(--border-default); background: var(--md-card); }
.om-snap-row:has(input:checked) { border-color: var(--om-accent); background: color-mix(in srgb, var(--om-accent) 6%, var(--md-card)); }
.om-floatbar { position: fixed; left: 50%; bottom: 1.25rem; z-index: 1500; display: flex; align-items: center; gap: 1rem; padding: .6rem .7rem .6rem 1.1rem;
  border-radius: 999px; background: var(--md-card); border: 1px solid var(--border-subtle); box-shadow: var(--elev-4); font-size: .88rem;
  transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform var(--dur-emphasis) var(--ease-out), opacity var(--dur-std) var(--ease-std); }
.om-floatbar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (max-width: 640px) { .om-floatbar { left: 1rem; right: 1rem; transform: translateY(160%); justify-content: space-between; } .om-floatbar.show { transform: none; } }

/* «Настройки аудита» (перенесены из OM Lens) */
.om-as-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; }
.om-as-share { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .75rem; border-radius: var(--md-r-sm); background: var(--md-container-low);
  border-left: 3px solid var(--c); }
.om-as-cat { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-secondary); }
.om-as-cat .n { font-variant-numeric: tabular-nums; background: var(--md-container); border-radius: 999px; padding: 0 .45rem; letter-spacing: 0; }
.om-as-rule { border: 1px solid var(--border-subtle); border-radius: var(--md-r-sm); margin-bottom: .35rem; background: var(--md-card);
  transition: border-color var(--dur-micro) var(--ease-std), opacity var(--dur-std) var(--ease-std); }
.om-as-rule[open] { border-color: var(--border-default); box-shadow: var(--md-elev-1); }
.om-as-rule.off { opacity: .6; }
.om-as-rule > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(150px, 220px); gap: .65rem; align-items: center;
  padding: .45rem .7rem; cursor: pointer; list-style: none; }
.om-as-rule > summary::-webkit-details-marker { display: none; }
.om-as-rule > summary:hover { background: var(--md-state); }
.om-as-rule .t { min-width: 0; }
.om-as-rule .t b { font-weight: 600; }
.om-as-body { padding: .2rem .9rem .8rem 2.6rem; animation: om-fade-up var(--dur-std) var(--ease-out); }
.om-as-params, .om-as-naming { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem .9rem; }
.om-as-params label, .om-as-naming label { display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.om-as-params .wide { grid-column: 1 / -1; }
.om-as-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem .9rem; font-size: .82rem; }
.om-as-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .5rem; padding: .7rem 1rem;
  border-radius: var(--md-r-md); background: var(--md-card); border: 1px solid var(--border-default); box-shadow: var(--elev-4); animation: om-fade-up var(--dur-std) var(--ease-out); }
@media (max-width: 640px) { .om-as-rule > summary { grid-template-columns: auto minmax(0, 1fr); } .om-as-rule > summary .sel, .om-as-rule > summary .om-sev { grid-column: 2; } .om-as-body { padding-left: .9rem; } }

/* каталог отчётов: карточки приподнимаются */
.om-rc-card { transition: transform var(--dur-std) var(--ease-std), box-shadow var(--dur-std) var(--ease-std), border-color var(--dur-std) var(--ease-std); }
.om-rc-card:hover { transform: translateY(-2px); box-shadow: var(--md-elev-2); border-color: color-mix(in srgb, var(--om-accent) 40%, var(--border-subtle)); }

/* фирменный мотив и страницы ошибок / нет доступа (этап 6) */
.om-motif { width: min(320px, 80%); height: auto; display: block; margin: 0 auto 1rem; }
.om-motif .ln { stroke: color-mix(in srgb, var(--om-accent) 55%, var(--border-default)); stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: om-draw 1.4s var(--ease-out) forwards; }
.om-motif .ln:nth-child(2) { animation-delay: .15s; } .om-motif .ln:nth-child(3) { animation-delay: .35s; }
.om-motif .ln:nth-child(4) { animation-delay: .5s; } .om-motif .ln:nth-child(5) { animation-delay: .6s; }
.om-motif .nd rect { fill: var(--md-card); stroke: var(--border-control); stroke-width: 1.4; animation: om-fade var(--dur-emphasis) var(--ease-out) both; }
.om-motif .nd .hub { fill: var(--om-accent-soft); stroke: var(--om-accent); }
.om-errpage { max-width: 560px; margin: 8vh auto 0; text-align: center; animation: om-fade-up var(--dur-emphasis) var(--ease-out) both; }
.om-errpage .code { font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--om-accent); font-variant-numeric: tabular-nums; margin-bottom: .5rem; }
.om-errpage h1 { font-size: 1.5rem; margin-bottom: .5rem; }

/* ---- телефон и планшет (этап 6): без горизонтальной прокрутки страницы, широкие таблицы и карта прокручиваются в своём блоке ---- */
.om-main { overflow-x: clip; }
.om-content { min-width: 0; }
@media (max-width: 960px) {
  .om-sevcards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .om-page-head { flex-wrap: wrap; gap: .75rem; }
  .om-actions { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  :root { --om-pad: 1rem; }
  .om-content h1, .om-page-head h1 { font-size: 1.35rem; }
  .om-sevcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .om-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .om-score { flex-wrap: wrap; justify-content: center; text-align: center; }
  .om-grid, .om-grid-2, .om-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .om-stack-row, .om-bar { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto; }
  .om-heat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-filterbar { flex-wrap: wrap; }
  .om-tabs { scrollbar-width: none; }
  .om-toasts { left: 1rem; right: 1rem; max-width: none; }
}
/* сенсорные экраны: цели нажатия не меньше 40 px */
@media (pointer: coarse) {
  .btn, .om-icon-btn, .form-control, .form-select, .om-tabs button, .dropdown-item { min-height: 40px; }
  .om-filter-chip button, .om-toast .x { min-width: 32px; min-height: 32px; }
}

/* пустые состояния: иконка мягко «дышит» */
.om-empty > i:first-child { animation: om-breathe 4s ease-in-out infinite; }
@keyframes om-breathe { 50% { transform: scale(1.06); } }

/* появление: каскад для [data-stagger] > *, однократно; om-enter — для отдельных блоков */
@keyframes om-fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes om-fade { from { opacity: 0; } }
.om-enter { animation: om-fade-up var(--dur-emphasis) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.om-enter-quiet { animation: om-fade var(--dur-std) var(--ease-out) both; }
.om-repeat .om-enter { animation: om-fade var(--dur-std) var(--ease-out) both; animation-delay: 0ms; }

/* скелетон */
.om-skeleton { position: relative; overflow: hidden; background: var(--md-container); border-radius: var(--md-r-xs); color: transparent !important; }
.om-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--md-card) 70%, transparent), transparent);
  animation: om-shimmer 1.4s infinite; }
@keyframes om-shimmer { to { transform: translateX(100%); } }

/* ---- переходы между страницами и смена темы (View Transitions) ---- */
@view-transition { navigation: auto; }
.om-sidebar { view-transition-name: om-sidebar; }
.om-topbar { view-transition-name: om-topbar; }
::view-transition-old(root) { animation: om-vt-out 180ms var(--ease-in) both; }
::view-transition-new(root) { animation: om-vt-in var(--dur-page) var(--ease-out) both; }
@keyframes om-vt-out { to { opacity: 0; } }
@keyframes om-vt-in { from { opacity: 0; transform: translateY(8px); } }
::view-transition-group(om-sidebar), ::view-transition-group(om-topbar) { animation: none; }
/* при переходах страниц собственное появление содержимого (app.css, om-page) не нужно — иначе анимация двойная */
@supports (view-transition-name: none) { .om-content { animation: none; } }
/* смена темы: круг новой темы от точки клика (motion.js задаёт --vt-x/--vt-y) */
html.om-theme-vt::view-transition-old(root) { animation: none; }
html.om-theme-vt::view-transition-new(root) { animation: om-vt-wave var(--dur-page) var(--ease-out) both; }
@keyframes om-vt-wave { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); } }

/* ---- без анимаций: системная настройка и настройка программы ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .om-enter { animation: om-fade 120ms linear both !important; animation-delay: 0ms !important; }
  .om-skeleton::after { display: none; }
  @view-transition { navigation: none; }
}
[data-animations="off"] body { --dur-micro: 0ms; --dur-std: 0ms; --dur-emphasis: 0ms; --dur-page: 0ms; }
[data-animations="off"] .om-skeleton::after { display: none; }

/* Перетаскивание .zip бэкапа на блок моделей (Управление БД) */
.om-drop-over { outline: 2px dashed var(--om-accent); outline-offset: 6px; border-radius: var(--md-r-lg); }