/* ============================================================
   RuMetric 2.0 — UI-КИТ (core/ui/kit.css)
   Плагины строят интерфейс ТОЛЬКО из этих классов.
   Цвета/шрифты/радиусы здесь НЕ хардкодятся — только var(--rm-*).
   Свои кнопки/цвета в плагинах ЗАПРЕЩЕНЫ (паспорт §4).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-body);
  font-size: var(--rm-fs-md);
  line-height: var(--rm-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Каркас: сайдбар + контент ---------- */
.rm-app { display: flex; min-height: 100vh; }

.rm-sidebar {
  width: var(--rm-sidebar-w);
  flex-shrink: 0;
  background: var(--rm-side-bg);
  border-right: 1px solid var(--rm-border);
  color: var(--rm-side-text);
  display: flex;
  flex-direction: column;
  padding: var(--rm-gap-lg) var(--rm-gap-md);
  gap: var(--rm-gap-lg);
}

.rm-logo {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-fw-display, var(--rm-fw-bold));
  font-size: 20px;
  color: var(--rm-side-logo);
  letter-spacing: -.02em;
  padding: 0 var(--rm-gap-sm);
  text-decoration: none;
}
.rm-logo b { color: var(--rm-accent); font-weight: inherit; }

.rm-nav { display: flex; flex-direction: column; gap: 4px; }
.rm-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--rm-radius-md);
  color: inherit;
  text-decoration: none;
  font-size: var(--rm-fs-md);
  font-weight: var(--rm-fw-medium);
  transition: background var(--rm-t-fast), color var(--rm-t-fast);
}
.rm-nav a:hover { background: var(--rm-surface-2); color: var(--rm-side-text-strong); }
.rm-nav a.is-active {
  background: var(--rm-side-active);
  color: var(--rm-accent-strong);
  font-weight: var(--rm-fw-semi);
  box-shadow: inset 3px 0 0 var(--rm-side-accent);
}
:root[data-theme='dark'] .rm-nav a.is-active { color: var(--rm-accent); }
.rm-nav .rm-nav-icon {
  display: inline-flex;
  width: 20px;
  justify-content: center;
  opacity: .9;
}
.rm-nav .rm-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Клиентский раздел = группа (UX-SHELL-02A + Owner-UAT) ---------- */
/* Модуль С подразделами — это ГРУППА: вся строка это ОДНА disclosure-кнопка
   (.rm-nav-disclosure), клик по любой её части раскрывает/сворачивает подразделы.
   Отдельной root-ссылки и отдельного маленького тоггла больше нет. Модуль БЕЗ
   подразделов остаётся обычной прямой .rm-nav-link. Подразделы переносятся
   строкой ниже; их видимость регулирует data-open (accordion). */
.rm-nav-group { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rm-nav-group > .rm-nav-link { flex: 1 1 auto; min-width: 0; }
.rm-nav-group > .rm-subnav { flex-basis: 100%; }

/* Единая disclosure-кнопка модуля: визуально повторяет прежнюю строку —
   вся ширина кликабельна, прозрачный фон, текст слева, chevron справа,
   без нативной рамки, focus-visible через общий --rm-focus-ring. */
.rm-nav-disclosure {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--rm-radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--rm-fs-md);
  font-weight: var(--rm-fw-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--rm-t-fast), color var(--rm-t-fast);
}
.rm-nav-disclosure:hover { background: var(--rm-surface-2); color: var(--rm-side-text-strong); }
.rm-nav-disclosure:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-nav-disclosure.is-module-active {
  background: var(--rm-side-active);
  color: var(--rm-accent-strong);
  font-weight: var(--rm-fw-semi);
  box-shadow: inset 3px 0 0 var(--rm-side-accent);
}
:root[data-theme='dark'] .rm-nav-disclosure.is-module-active { color: var(--rm-accent); }
.rm-nav-disclosure .rm-nav-icon { flex-shrink: 0; }
.rm-nav-disclosure .rm-nav-label { flex: 1 1 auto; text-align: left; }
.rm-nav-chevron { display: inline-flex; flex-shrink: 0; color: var(--rm-text-soft); transition: transform var(--rm-t-fast); }
.rm-nav-group[data-open='false'] .rm-nav-chevron { transform: rotate(-90deg); } /* закрыто → стрелка вправо */
.rm-nav-group[data-open='false'] .rm-subnav { display: none; }

/* UX-SHELL-02E: mobile header / off-canvas drawer / backdrop — на desktop скрыты.
   Прежняя mobile-only fallback-ссылка модуля удалена (её заменил полноценный drawer). */
.rm-mobile-header { display: none; }
.rm-mobile-drawer-close { display: none; }
.rm-mobile-drawer-backdrop { display: none; }

/* ---------- Подразделы активного раздела (?tab=<id>) ---------- */
.rm-subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; padding-left: 30px; }
.rm-subnav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--rm-radius-sm);
  color: inherit;
  text-decoration: none;
  font-size: var(--rm-fs-sm);
  transition: background var(--rm-t-fast), color var(--rm-t-fast);
}
.rm-subnav a:hover { background: var(--rm-surface-2); color: var(--rm-side-text-strong); }
.rm-subnav a.is-active { color: var(--rm-accent-strong); font-weight: var(--rm-fw-semi); }
:root[data-theme='dark'] .rm-subnav a.is-active { color: var(--rm-accent); }

/* ---------- UX-SHELL-02D: rail-trigger и title-ссылка модуля (база) ---------- */
/* В полном sidebar скрыты; проявляются только в свёрнутой desktop-rail / flyout. */
.rm-rail-trigger {
  display: none;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--rm-radius-md);
  background: transparent;
  color: var(--rm-side-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--rm-t-fast), color var(--rm-t-fast);
}
.rm-rail-trigger:hover { background: var(--rm-surface-2); color: var(--rm-side-text-strong); }
.rm-rail-trigger:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-rail-trigger.is-active {
  background: var(--rm-side-active);
  color: var(--rm-accent-strong);
  box-shadow: inset 3px 0 0 var(--rm-side-accent);
}
:root[data-theme='dark'] .rm-rail-trigger.is-active { color: var(--rm-accent); }
.rm-rail-trigger .rm-nav-icon { display: inline-flex; }
.rm-rail-trigger .rm-nav-icon svg { width: 22px; height: 22px; }
.rm-subnav-title { display: none; }

/* ---------- Шапка сайдбара: логотип + кнопка свернуть ---------- */
.rm-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rm-side-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface);
  color: var(--rm-text-soft);
  cursor: pointer;
  transition: color var(--rm-t-fast), border-color var(--rm-t-fast);
}
.rm-side-collapse:hover { color: var(--rm-text); border-color: var(--rm-border-strong); }
.rm-side-collapse .rm-sc-in { display: inline-flex; transform: rotate(180deg); } /* стрелка влево = «свернуть» */

/* Owner-UAT repeat (issue 3): компактный бренд-элемент для свёрнутой rail.
   По умолчанию скрыт — в expanded desktop и на mobile бренд представляет .rm-logo;
   показывается только в свёрнутой desktop-rail (см. media ниже). Ссылка на «/»,
   клавиатурно доступна, отдельна от кнопки свернуть/развернуть. */
.rm-brand-mark { display: none; }

/* ---------- Свёрнутый сайдбар (десктоп): только иконки ---------- */
@media (min-width: 769px) {
  /* Owner-UAT G: desktop sidebar привязан к высоте viewport. Верхняя зона и
     нижние блоки («Вид» + профиль) не двигаются; при длинном списке
     прокручивается только навигационная область, а не вся страница. */
  .rm-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    align-self: flex-start;
  }
  .rm-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* старый растягивающий spacer больше не выталкивает нижние блоки вниз */
  .rm-sidebar > .rm-spacer { display: none; }
  /* блок «Вид» и карточка пользователя не сжимаются */
  .rm-display-controls, .rm-sidebar .rm-user-card { flex-shrink: 0; }
  /* КРИТИЧНО: в свёрнутой rail flyout — потомок .rm-nav. Навигация НЕ должна
     быть scroll-контейнером, иначе flyout и 10px hover-мост обрежутся. */
  :root[data-sidebar='collapsed'] .rm-nav { overflow: visible; }
  /* Owner-UAT repeat (issue 1): пока открыт rail-flyout, поднимаем stacking
     context свёрнутого sidebar над main content. sticky-.rm-sidebar уже образует
     stacking context; явный z-index 500 (уровень самой flyout-панели) кладёт его
     выше контента (0) и ниже глобальных overlay (тосты 1000). Маркер
     data-rail-flyout ставит kit.js только на время открытого flyout. */
  :root[data-sidebar='collapsed'][data-rail-flyout='open'] .rm-sidebar { z-index: 500; }

  :root[data-sidebar='collapsed'] .rm-sidebar {
    width: var(--rm-sidebar-w-collapsed);
    padding-left: var(--rm-gap-sm);
    padding-right: var(--rm-gap-sm);
    align-items: center;
  }
  /* has-tabs модуль в свёрнутой rail представлен rail-trigger'ом: disclosure
     скрываем. Модуль без табов (data-has-tabs='false') сохраняет icon-only
     .rm-nav-link (см. ниже). */
  :root[data-sidebar='collapsed'] .rm-logo,
  :root[data-sidebar='collapsed'] .rm-nav-disclosure,
  :root[data-sidebar='collapsed'] .rm-sidebar .rm-side-block:not(.rm-user-card),
  :root[data-sidebar='collapsed'] .rm-user-card .rm-user-meta { display: none; }
  /* UX-SHELL-02D: в свёрнутой rail показываем компактный триггер модуля */
  :root[data-sidebar='collapsed'] .rm-rail-trigger { display: inline-flex; }
  /* UX-SHELL-02D fix: модуль без подразделов (data-has-tabs='false') не имеет
     rail-trigger — его обычная rm-nav-link остаётся прямой icon-only ссылкой:
     центрируем иконку, прячем текст. Hover/focus/active стили .rm-nav a не
     трогаем (active-подсветка .rm-nav a.is-active сохраняется). */
  :root[data-sidebar='collapsed'] .rm-nav-group[data-has-tabs='false'] > .rm-nav-link {
    width: 100%;
    justify-content: center;
    padding: 11px 0;
    gap: 0;
  }
  :root[data-sidebar='collapsed'] .rm-nav-group[data-has-tabs='false'] > .rm-nav-link .rm-nav-label {
    display: none;
  }
  /* свёрнутая rail: бренд-марк сверху, кнопка развернуть под ним (стек по центру) */
  :root[data-sidebar='collapsed'] .rm-side-top { flex-direction: column; justify-content: center; gap: 8px; }
  /* Owner-UAT repeat (audit fix): официальный фирменный symbol (inline SVG) —
     сам SVG НЕ перекрашиваем (без color/фоновой плитки под знак). Клик-область
     ~40px, фон прозрачный; hover — только нейтральный UI-feedback surface-2. */
  :root[data-sidebar='collapsed'] .rm-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--rm-radius-md);
    background: transparent;
    text-decoration: none;
    transition: background var(--rm-t-fast);
  }
  :root[data-sidebar='collapsed'] .rm-brand-mark svg { display: block; width: 28px; height: 28px; }
  :root[data-sidebar='collapsed'] .rm-brand-mark:hover { background: var(--rm-surface-2); }
  :root[data-sidebar='collapsed'] .rm-brand-mark:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
  :root[data-sidebar='collapsed'] .rm-side-collapse .rm-sc-in { transform: none; } /* стрелка вправо = «развернуть» */
  :root[data-sidebar='collapsed'] .rm-nav { align-self: stretch; }
  :root[data-sidebar='collapsed'] .rm-user-card { border: none; background: transparent; padding: 0; }
  /* AUTOREPLY-UX-03-FAST §3: в свёрнутой rail «Как начать» — только иконка
     (текст скрыт), tooltip через data-tip; клик-область по центру. */
  :root[data-sidebar='collapsed'] .rm-side-help { justify-content: center; padding: 8px 0; }
  :root[data-sidebar='collapsed'] .rm-side-help .rm-side-help-label { display: none; }

  /* UX-SHELL-02D: в свёрнутой rail .rm-subnav превращается во flyout-панель справа */
  :root[data-sidebar='collapsed'] .rm-subnav {
    display: none;                    /* скрыт по умолчанию, независимо от data-open */
    position: absolute;
    left: calc(100% + 10px);
    top: -6px;
    width: 270px;
    max-width: calc(100vw - var(--rm-sidebar-w-collapsed) - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-lg);
    background: var(--rm-surface);
    box-shadow: var(--rm-shadow-lg);
    z-index: 500;
  }
  /* показываем flyout только при открытии; специфичность перекрывает data-open='false' */
  :root[data-sidebar='collapsed'] .rm-nav-group[data-flyout-open='true'] > .rm-subnav { display: flex; }
  /* UX-SHELL-02D fix: прозрачный hover-bridge через 10px-зазор между rail и
     панелью. Мост живёт на самой .rm-nav-group (position: relative), НЕ внутри
     .rm-subnav: у subnav overflow-y:auto делает его scroll-контейнером, который
     обрезает выходящую за его границы область псевдоэлемента — зазор оставался
     пустым, курсор проваливался, срабатывал mouseleave и hover-flyout закрывался
     до входа в панель. На группе scroll-контекста нет — мост цел. z-index ниже
     flyout (500), без фона, flyout не перекрывает. */
  :root[data-sidebar='collapsed'] .rm-nav-group[data-flyout-open='true']::after {
    content: "";
    position: absolute;
    left: 100%;
    top: -6px;
    width: 10px;
    height: calc(100% + 12px);
    z-index: 499;
    pointer-events: auto;
  }
  /* title-ссылка модуля видна только во flyout */
  :root[data-sidebar='collapsed'] .rm-subnav-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rm-border);
    color: var(--rm-text);
    font-size: var(--rm-fs-md);
    font-weight: var(--rm-fw-semi);
  }
  :root[data-sidebar='collapsed'] .rm-subnav-title.is-module-active { color: var(--rm-accent-strong); }
  :root[data-theme='dark'][data-sidebar='collapsed'] .rm-subnav-title.is-module-active { color: var(--rm-accent); }
}

.rm-main {
  flex: 1;
  min-width: 0;
  padding: var(--rm-gap-lg) var(--rm-gap-xl);
}
.rm-content { max-width: var(--rm-content-max); margin: 0 auto; animation: rm-fade-up 320ms ease both; }

@keyframes rm-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Заголовки страниц ---------- */
.rm-page-head { margin: 0 0 var(--rm-gap-lg); }
.rm-page-head h1 {
  margin: 0;
  font-family: var(--rm-font-display);
  font-size: var(--rm-fs-xxl);
  font-weight: var(--rm-fw-display, var(--rm-fw-bold));
  letter-spacing: -.02em;
  line-height: 1.2;
}
.rm-page-head .rm-sub {
  margin-top: var(--rm-gap-xs);
  color: var(--rm-text-soft);
  font-size: var(--rm-fs-sm);
}

/* ---------- Карточка ---------- */
.rm-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);   /* 20px по ТЗ (карточки 18–22) */
  box-shadow: var(--rm-shadow-sm);
  padding: var(--rm-gap-lg);
  transition: box-shadow var(--rm-t-med), transform var(--rm-t-med), border-color var(--rm-t-med);
}
/* .rm-lift — навесить на кликабельные карточки: мягкий подъём при наведении */
.rm-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--rm-shadow-md);
  border-color: var(--rm-border-strong);
}
.rm-card + .rm-card { margin-top: var(--rm-gap-md); }
.rm-card h2 {
  margin: 0 0 var(--rm-gap-md);
  font-family: var(--rm-font-display);
  font-size: var(--rm-fs-lg);
  font-weight: var(--rm-fw-semi, var(--rm-fw-bold));
  letter-spacing: -.01em;
}
.rm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rm-gap-md); }
.rm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rm-gap-md); }

/* ---------- MetricCard: иконка в цветном круге + значение + статус ---------- */
.rm-metric {
  display: flex;
  align-items: flex-start;
  gap: var(--rm-gap-md);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  box-shadow: var(--rm-shadow-sm);
  padding: 18px var(--rm-gap-lg);
}
.rm-metric-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
}
.rm-metric-icon svg { width: 22px; height: 22px; }
.rm-metric-icon--accent { background: var(--rm-accent-soft); color: var(--rm-accent); }
.rm-metric-icon--ok     { background: var(--rm-ok-soft);     color: var(--rm-ok); }
.rm-metric-icon--info   { background: var(--rm-info-soft);   color: var(--rm-info); }
.rm-metric-icon--warn   { background: var(--rm-warn-soft);   color: var(--rm-warn); }
.rm-metric-icon--danger { background: var(--rm-danger-soft); color: var(--rm-danger); }
.rm-metric-body { min-width: 0; }
.rm-metric-label {
  font-size: var(--rm-fs-sm);
  color: var(--rm-text-soft);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-metric-value {
  font-size: 19px;
  font-weight: var(--rm-fw-bold);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.rm-metric-note { margin-top: 2px; font-size: var(--rm-fs-xs); color: var(--rm-text-soft); }
.rm-metric-note--ok     { color: var(--rm-ok); }
.rm-metric-note--info   { color: var(--rm-info); }
.rm-metric-note--warn   { color: var(--rm-warn); }
.rm-metric-note--danger { color: var(--rm-danger); }

/* ---------- Кнопки (44–48px, градиент, нажатие) ---------- */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-gap-sm);
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--rm-radius-md);
  font: inherit;
  font-size: var(--rm-fs-md);
  font-weight: var(--rm-fw-semi);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background var(--rm-t-fast), border-color var(--rm-t-fast),
              color var(--rm-t-fast), box-shadow var(--rm-t-fast),
              transform var(--rm-t-fast), filter var(--rm-t-fast);
}
.rm-btn svg { flex-shrink: 0; }
.rm-btn:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-btn:active:not([disabled]) { transform: translateY(1px); }
.rm-btn[disabled] { cursor: not-allowed; }

.rm-btn--primary {
  background: var(--rm-accent-grad);
  color: #fff;
  box-shadow: 0 1px 2px rgba(6, 42, 32, .18),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
.rm-btn--primary:hover:not([disabled]) { filter: brightness(1.05); }
.rm-btn--primary:active:not([disabled]) { filter: brightness(.96); box-shadow: 0 1px 1px rgba(6,42,32,.15); }
.rm-btn--primary[disabled] { background: var(--rm-accent); opacity: .45; box-shadow: none; }

.rm-btn--ghost {
  background: var(--rm-surface);
  border-color: var(--rm-border-strong);
  color: var(--rm-text);
}
.rm-btn--ghost:hover:not([disabled]) { border-color: var(--rm-accent); color: var(--rm-accent); }
.rm-btn--ghost[disabled] { opacity: .5; }

.rm-btn--soft { background: var(--rm-accent-soft); color: var(--rm-accent-strong); }
.rm-btn--soft:hover:not([disabled]) { filter: brightness(.97); }

.rm-btn--danger {
  background: linear-gradient(180deg, #e64a4a 0%, var(--rm-danger) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(80, 10, 10, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.rm-btn--danger:hover:not([disabled]) { filter: brightness(1.05); }
.rm-btn--danger[disabled] { opacity: .45; box-shadow: none; }

/* компактная — для плотных зон (таблицы, топбар) */
.rm-btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--rm-fs-sm); border-radius: var(--rm-radius-sm); }

/* квадратная иконко-кнопка (топбар: колокольчик, шестерёнка) */
.rm-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  background: var(--rm-surface);
  color: var(--rm-text-soft);
  cursor: pointer;
  transition: color var(--rm-t-fast), border-color var(--rm-t-fast), box-shadow var(--rm-t-fast);
}
.rm-icon-btn:hover { color: var(--rm-text); border-color: var(--rm-border-strong); box-shadow: var(--rm-shadow-sm); }
.rm-icon-btn:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-icon-btn .rm-dot-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  /* UI-TOUCH-03: счётчик уведомлений был белым по --rm-danger и не дотягивал до
     нормы читаемости ни в одной теме — 4.38 в светлой, 3.12 в тёмной при норме
     4.5 (кегль 11px). Общий цвет опасности не трогаем: он используется в рамках
     и текстах, где контраст в порядке. Меняем только сам бейдж.
     Светлая тема: белый по затемнённому красному — 5.75.
     Тёмная: тёмный текст по светлому красному — 5.97; для тёмных тем это
     обычный приём, инверсия здесь читается лучше белого. */
  background: #c62222;
  color: #fff;
  font-size: 11px;
  font-weight: var(--rm-fw-bold);
  line-height: 18px;
  text-align: center;
}

/* CREDITS-VISIBLE-01: остаток генераций рядом с иконкой баланса. Кнопка
   перестаёт быть квадратной ровно настолько, насколько нужно числу, и только
   когда число есть (:empty ничего не занимает) — пустой шов в шапке не
   появляется. Цвет обычный текстовый: тревогу несёт полоса, а не счётчик. */
.rm-icon-btn.rm-credit-chip { width: auto; min-width: 44px; padding: 0 10px; gap: 6px; }
#rm-credit-num { font-size: var(--rm-fs-sm); font-weight: var(--rm-fw-bold); }
#rm-credit-num:empty { display: none; }

/* ---------- Формы (поля 44–48px, мягкий зелёный focus-ring) ---------- */
.rm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--rm-gap-md); }
.rm-label { font-size: var(--rm-fs-sm); font-weight: var(--rm-fw-medium); color: var(--rm-text-soft); }
.rm-input, .rm-select, .rm-textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-md);
  background: var(--rm-surface);
  color: var(--rm-text);
  font: inherit;
  font-size: var(--rm-fs-md);
  transition: border-color var(--rm-t-fast), box-shadow var(--rm-t-fast);
}
.rm-textarea { min-height: 96px; resize: vertical; }
.rm-input:focus, .rm-select:focus, .rm-textarea:focus {
  outline: none;
  border-color: var(--rm-accent);
  box-shadow: var(--rm-focus-ring);
}
.rm-input::placeholder { color: var(--rm-text-faint); }
/* UI-CONTRAST-01: подсказки по всему сервису были нечитаемы. Замер обходом на
   кегле 11px: контраст 2.47 в светлой теме и 3.58 в тёмной при норме 4.5.
   --rm-text-faint задуман для НЕтекстовых мелочей (плейсхолдер, разделитель),
   а не для строк, которые человек должен прочесть. Замена на --rm-text-soft
   даёт 5.30 в светлой и 7.52 в тёмной. Одна строка чинит весь продукт: только
   на главной таких подсказок семь. */
.rm-hint { font-size: var(--rm-fs-xs); color: var(--rm-text-soft); }
/* UI-CONTRAST-01: ссылка внутри текста. Найдена обходом — на главной она стояла
   БЕЗ класса и получала стандартный синий браузера (rgb(0,0,238)): мимо всей
   системы цветов, мимо тёмной темы, высотой 14px. Отдельный класс, чтобы
   следующая такая ссылка не появилась снова безымянной. */
.rm-link {
  color: var(--rm-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rm-link:hover { color: var(--rm-accent); }
:root[data-theme='dark'] .rm-link { color: var(--rm-accent); }
@media (max-width: 768px) {
  /* внутри строки текста ссылка не может быть 44px в высоту — но область
     нажатия расширяется отступами, не ломая поток */
  .rm-link { padding: 6px 0; }
}

/* select со своей стрелкой */
.rm-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f6f69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* поле с кнопкой внутри (API-токен: показать/скрыть) */
.rm-input-wrap { position: relative; }
.rm-input-wrap .rm-input { padding-right: 46px; }
.rm-input-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: var(--rm-text-faint);
  cursor: pointer;
  transition: color var(--rm-t-fast), background var(--rm-t-fast);
}
.rm-input-eye:hover { color: var(--rm-text); background: var(--rm-surface-2); }
.rm-input-eye:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }

/* ---------- Таблица ---------- */
.rm-table { width: 100%; border-collapse: collapse; font-size: var(--rm-fs-sm); }
.rm-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--rm-text-soft);
  font-weight: var(--rm-fw-medium);
  border-bottom: 2px solid var(--rm-border);
  white-space: nowrap;
}
.rm-table td { padding: 8px 10px; border-bottom: 1px solid var(--rm-border); }
.rm-table tbody tr:nth-child(even) { background: var(--rm-surface-2); }
.rm-table tbody tr:hover { background: var(--rm-accent-soft); }
.rm-table .rm-num { text-align: right; font-family: var(--rm-font-mono); font-size: var(--rm-fs-xs); }

/* ---------- Бейджи / статусы ---------- */
.rm-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--rm-fs-xs);
  font-weight: var(--rm-fw-medium);
  background: var(--rm-surface-2);
  color: var(--rm-text-soft);
}
.rm-badge--ok     { background: var(--rm-ok-soft);     color: var(--rm-ok); }
.rm-badge--info   { background: var(--rm-info-soft);   color: var(--rm-info); }
.rm-badge--warn   { background: var(--rm-warn-soft);   color: var(--rm-warn); }
.rm-badge--danger { background: var(--rm-danger-soft); color: var(--rm-danger); }
.rm-badge--accent { background: var(--rm-accent-soft); color: var(--rm-accent-strong); }

/* StatusBadge — пилюля с точкой-индикатором (топбар: «Система работает штатно») */
.rm-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-surface);
  font-size: var(--rm-fs-sm);
  font-weight: var(--rm-fw-medium);
  color: var(--rm-text);
  box-shadow: var(--rm-shadow-sm);
}
.rm-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rm-ok);
  box-shadow: 0 0 0 3px var(--rm-ok-soft);
}
.rm-status--warn::before   { background: var(--rm-warn);   box-shadow: 0 0 0 3px var(--rm-warn-soft); }
.rm-status--danger::before { background: var(--rm-danger); box-shadow: 0 0 0 3px var(--rm-danger-soft); }

/* ---------- Алерты с иконками (вкл. красный баннер ошибок с мобилы) ---------- */
.rm-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--rm-radius-md);
  border: 1px solid transparent;
  font-size: var(--rm-fs-sm);
  margin-bottom: var(--rm-gap-md);
}
.rm-alert .rm-alert-icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
/* UI-CONTRAST-01: текст плашки берёт ТЕКСТОВЫЙ вариант цвета статуса — цвет
   заливки для набора слишком светлый, см. пояснение в theme.css. */
.rm-alert--info   { background: var(--rm-info-soft);   color: var(--rm-info-text); }
.rm-alert--ok     { background: var(--rm-ok-soft);     color: var(--rm-ok-text); }
.rm-alert--warn   { background: var(--rm-warn-soft);   color: var(--rm-warn-text); }
.rm-alert--danger { background: var(--rm-danger-soft); color: var(--rm-danger-text); }
/* нейтральный акцентный (подсказки, онбординг) */
.rm-alert--accent { background: var(--rm-accent-soft); color: var(--rm-accent-strong); }

/* ---------- Пустое состояние ---------- */
.rm-empty {
  text-align: center;
  padding: var(--rm-gap-xl) var(--rm-gap-lg);
  color: var(--rm-text-soft);
}
.rm-empty .rm-empty-icon { font-size: 40px; margin-bottom: var(--rm-gap-sm); }

/* ---------- Мелочи ---------- */
.rm-kbd {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-fs-xs);
  background: var(--rm-surface-2);
  border: 1px solid var(--rm-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
}
.rm-muted { color: var(--rm-text-soft); }
.rm-row { display: flex; align-items: center; gap: var(--rm-gap-sm); flex-wrap: wrap; }
.rm-spacer { flex: 1; }

/* ---------- Планшет ---------- */
@media (max-width: 1180px) {
  .rm-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .rm-grid-main { grid-template-columns: 1fr; }
}

/* ---------- Мобилка (≤768): off-canvas drawer (UX-SHELL-02E) ---------- */
@media (max-width: 768px) {
  /* .rm-app больше не колонка с горизонтальной шапкой; drawer — fixed overlay,
     mobile header остаётся в потоке сверху. */
  .rm-app { display: block; }

  /* компактная mobile header, закреплена сверху; ниже drawer/backdrop по stacking */
  .rm-mobile-header {
    display: flex;
    align-items: center;
    gap: var(--rm-gap-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 52px;
    padding: 6px var(--rm-gap-md);
    background: var(--rm-side-bg);
    border-bottom: 1px solid var(--rm-border);
  }
  .rm-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--rm-radius-sm);
    background: transparent;
    color: var(--rm-side-text);
    cursor: pointer;
  }
  .rm-mobile-menu-btn:hover { background: var(--rm-surface-2); }
  .rm-mobile-menu-btn:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
  .rm-mobile-logo {
    font-family: var(--rm-font-display);
    font-weight: var(--rm-fw-display, var(--rm-fw-bold));
    font-size: 19px;
    color: var(--rm-side-logo);
    letter-spacing: -.02em;
    text-decoration: none;
  }
  .rm-mobile-logo b { color: var(--rm-accent); font-weight: inherit; }

  /* backdrop: выше контента, ниже drawer; в закрытом состоянии не перехватывает */
  .rm-mobile-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(2, 6, 23, .5);
  }
  .rm-mobile-drawer-backdrop[hidden] { display: none; }

  /* единый .rm-sidebar → выезжающий слева off-canvas drawer */
  .rm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: min(360px, 86vw);          /* bounded ≤360px и доля viewport */
    max-width: 360px;
    height: 100vh;
    height: 100dvh;                   /* modern: динамический viewport */
    max-height: 100vh;
    max-height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--rm-gap-md);
    padding: var(--rm-gap-md);
    border-right: 1px solid var(--rm-border);
    box-shadow: var(--rm-shadow-lg);
    overflow: hidden;                 /* внутренний скролл — у .rm-nav */
    transform: translateX(-100%);     /* закрыт: за левой границей */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--rm-t-med), visibility var(--rm-t-med);
  }
  :root[data-mobile-drawer='open'] .rm-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  /* CSS-страховка scroll-lock по эфемерному marker (основной механизм — body-fixed
     в kit.js). Без блокировки touch-action (иначе сломался бы внутренний scroll
     drawer). Marker удалён → страховка исчезает автоматически. */
  :root[data-mobile-drawer='open'],
  :root[data-mobile-drawer='open'] body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* шапка drawer фиксирована сверху; desktop collapse/brand/rail скрыты; close виден */
  .rm-side-top { flex: 0 0 auto; justify-content: space-between; }
  .rm-logo { padding: 0; }
  .rm-side-collapse { display: none; }
  .rm-brand-mark { display: none; }
  .rm-rail-trigger { display: none; }
  .rm-mobile-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--rm-radius-sm);
    background: transparent;
    color: var(--rm-side-text);
    cursor: pointer;
  }
  .rm-mobile-drawer-close:hover { background: var(--rm-surface-2); color: var(--rm-side-text-strong); }
  .rm-mobile-drawer-close:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }

  /* навигация — вертикальная, собственный вертикальный скролл, без горизонтали */
  .rm-nav {
    order: 0;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 4px;
  }
  .rm-nav-group { flex: 0 0 auto; }
  /* disclosure и subnav работают как на desktop (accordion по data-open) */

  /* блоки «Вид» и user-card видимы внутри drawer и не сжимаются */
  .rm-side-block { display: block; }
  .rm-display-controls, .rm-sidebar .rm-user-card { flex-shrink: 0; }
  .rm-user-card {
    display: flex;
    border: 1px solid var(--rm-border);
    background: var(--rm-surface);
    padding: 12px;
  }
  .rm-user-card .rm-user-meta { display: block; }

  /* старая mobile-панель «Aa Вид» в новом shell не показывается */
  .rm-view-mobile-wrap { display: none; }
  /* прежний растягивающий spacer в column-drawer не нужен */
  .rm-sidebar > .rm-spacer { display: none; }

  /* топбар и заголовки компактнее; защита от horizontal overflow */
  .rm-topbar { flex-wrap: wrap; }
  .rm-topbar-actions { flex-basis: 100%; flex-wrap: wrap; gap: 8px; }
  .rm-page-head h1 { font-size: 22px; }
  .rm-page-head .rm-sub { font-size: var(--rm-fs-xs); }
  .rm-main { padding: var(--rm-gap-md); min-width: 0; }
  .rm-content { min-width: 0; }
  .rm-card { min-width: 0; }
  .rm-grid-2 { grid-template-columns: 1fr; }
  .rm-grid-4 { grid-template-columns: 1fr 1fr; }
  .rm-grid-2 > *, .rm-grid-4 > *, .rm-grid-main > * { min-width: 0; }
  .rm-status { max-width: 100%; }

  /* таблицы скроллятся ТОЛЬКО внутри wrapper; страница/drawer — без горизонтали */
  .rm-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rm-table { min-width: 520px; }

  /* тосты на всю ширину снизу */
  .rm-toasts { left: 16px; right: 16px; bottom: 16px; }
  .rm-toast { max-width: none; }
}

/* reduced-motion: drawer без анимации выезда */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .rm-sidebar { transition: none; }
}

/* ---------- Телефон (≤480, целевая 390) ---------- */
@media (max-width: 480px) {
  .rm-grid-4 { grid-template-columns: 1fr; }
  .rm-metric { padding: 14px 16px; }
  .rm-main { padding: 12px; }
  .rm-card { padding: var(--rm-gap-md); }
  .rm-btn { padding: 0 16px; }
  .rm-row .rm-btn { flex: 1 1 auto; }
  .rm-chart-stats .rm-chart-stat-value { font-size: 18px; }
  .rm-sysrow { padding: var(--rm-gap-md); }
}

/* ============================================================
   UX-SHELL-02C — кнопочные настройки вида (тема + размер).
   Сегментированные кнопки вместо select; мобильная панель «Вид».
   Никакого масштабирования страницы — только размеры компонентов.
   ============================================================ */
.rm-display-section + .rm-display-section { margin-top: 10px; }
.rm-display-label {
  margin-bottom: 5px;
  font-size: var(--rm-fs-xs);
  color: var(--rm-text-soft);
  font-weight: var(--rm-fw-medium);
}
.rm-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  background: var(--rm-surface-2);
}
.rm-segment-btn {
  min-width: 0;
  min-height: 42px;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: var(--rm-text-soft);
  font: inherit;
  font-size: var(--rm-fs-xs);
  line-height: 1.15;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: background var(--rm-t-fast), color var(--rm-t-fast), box-shadow var(--rm-t-fast);
}
.rm-segment-btn:hover { color: var(--rm-text); }
.rm-segment-btn:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-segment-btn[aria-pressed="true"],
.rm-segment-btn.is-active {
  background: var(--rm-surface);
  color: var(--rm-accent-strong);
  box-shadow: var(--rm-shadow-sm);
}
:root[data-theme='dark'] .rm-segment-btn[aria-pressed="true"],
:root[data-theme='dark'] .rm-segment-btn.is-active { color: var(--rm-accent); }
.rm-segment-icon { display: inline-flex; }
.rm-segment-main { font-size: var(--rm-fs-sm); font-weight: var(--rm-fw-bold); }
.rm-segment-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--rm-text-faint);
}
.rm-segment-btn[aria-pressed="true"] .rm-segment-sub,
.rm-segment-btn.is-active .rm-segment-sub { color: inherit; }
.rm-density-segments .rm-segment-btn { min-height: 48px; }

/* Мобильная панель «Вид»: на десктопе скрыта (показывается в мобильном медиа выше) */
.rm-view-mobile-wrap { display: none; }
.rm-view-mobile-btn {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface);
  color: var(--rm-side-text);
  font: inherit;
  font-size: var(--rm-fs-sm);
  font-weight: var(--rm-fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.rm-view-aa { font-weight: var(--rm-fw-bold); color: var(--rm-accent); }
.rm-view-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(330px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-lg);
  z-index: 400;
}
.rm-view-panel[hidden] { display: none; }
.rm-view-panel-title {
  margin-bottom: 10px;
  font-size: var(--rm-fs-sm);
  font-weight: var(--rm-fw-semi);
  color: var(--rm-text);
}


/* ---------- Скелетоны загрузки ---------- */
.rm-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--rm-surface-2);
  border-radius: var(--rm-radius-sm);
  min-height: 14px;
}
.rm-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: rm-shimmer 1.4s infinite;
}
:root[data-theme='dark'] .rm-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
@keyframes rm-shimmer { to { transform: translateX(100%); } }

/* ---------- Спиннер ---------- */
.rm-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--rm-accent-soft);
  border-top-color: var(--rm-accent);
  border-radius: 50%;
  animation: rm-spin .7s linear infinite;
  vertical-align: -3px;
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* ---------- Тосты ---------- */
.rm-toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--rm-gap-sm);
}
.rm-toast {
  padding: 10px 16px;
  border-radius: var(--rm-radius-md);
  background: var(--rm-text);
  color: var(--rm-bg);
  font-size: var(--rm-fs-sm);
  box-shadow: var(--rm-shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--rm-t-med), transform var(--rm-t-med);
  max-width: 320px;
}
.rm-toast.is-in { opacity: 1; transform: none; }
.rm-toast--ok     { background: var(--rm-ok);     color: #fff; }
.rm-toast--warn   { background: var(--rm-warn);   color: #fff; }
.rm-toast--danger { background: var(--rm-danger); color: #fff; }

/* ---------- Топбар ---------- */
.rm-topbar {
  display: flex;
  align-items: flex-start;
  gap: var(--rm-gap-md);
  margin-bottom: var(--rm-gap-lg);
}
.rm-topbar .rm-page-head { margin: 0; flex: 1; min-width: 0; }
.rm-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 2px; }
/* MOBILE-LANDSCAPE-01 (05.09.2026): телефон в альбомной ориентации (iPhone —
   812×375, Android — 800–900×360…412) попадает в «настольный» диапазон
   ≥769px: сайдбар уже показан и съедает ~240px, а ряд действий шапки
   (статус, кабинет, уведомления, кредиты, настройки) с flex-shrink:0 не
   умеет ни сжиматься, ни переноситься. Итог — горизонтальный скролл на
   КАЖДОЙ странице. Проверено в эмуляторе: 928px контента при 812px экрана.
   В этом диапазоне разрешаем шапке переноситься; на широких экранах правило
   не срабатывает, там места хватает. */
@media (min-width: 769px) and (max-width: 1100px) {
  .rm-topbar { flex-wrap: wrap; }
  .rm-topbar-actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
}

/* ---------- Низ сайдбара: тема / версия кита / юзер ---------- */
.rm-side-block {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  background: var(--rm-surface);
  padding: 12px;
  font-size: var(--rm-fs-sm);
}
.rm-side-block + .rm-side-block { margin-top: 10px; }
.rm-side-block .rm-side-block-title {
  font-size: var(--rm-fs-xs);
  color: var(--rm-text-faint);
  margin-bottom: 6px;
}

.rm-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rm-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rm-accent-grad);
  color: #fff;
  font-size: var(--rm-fs-sm);
  font-weight: var(--rm-fw-bold);
  letter-spacing: .02em;
}
.rm-user-card .rm-user-meta { min-width: 0; flex: 1; }
.rm-user-card .rm-user-name {
  color: var(--rm-side-text-strong);
  font-weight: var(--rm-fw-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-user-card .rm-user-mail {
  font-size: var(--rm-fs-xs);
  color: var(--rm-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Dropdown ---------- */
.rm-dropdown { position: relative; display: inline-block; }
.rm-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  box-shadow: var(--rm-shadow-lg);
  padding: 6px;
  z-index: 100;
  display: none;
}
.rm-dropdown.is-open .rm-dropdown-menu { display: block; animation: rm-fade-up 140ms ease both; }
.rm-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: var(--rm-text);
  font: inherit;
  font-size: var(--rm-fs-sm);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rm-t-fast);
}
.rm-dropdown-item:hover { background: var(--rm-surface-2); }

/* ---------- Модалка ---------- */
.rm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 17, .45);
  backdrop-filter: blur(2px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--rm-gap-md);
}
.rm-modal-backdrop.is-open { display: flex; }
.rm-modal {
  width: 100%;
  max-width: 480px;
  background: var(--rm-surface);
  border-radius: var(--rm-radius-lg);
  box-shadow: var(--rm-shadow-lg);
  padding: var(--rm-gap-lg);
  animation: rm-fade-up 180ms ease both;
}
.rm-modal-head {
  display: flex;
  align-items: center;
  gap: var(--rm-gap-sm);
  margin-bottom: var(--rm-gap-md);
}
.rm-modal-head h3 { margin: 0; flex: 1; font-size: var(--rm-fs-lg); font-weight: var(--rm-fw-semi); letter-spacing: -.01em; }
.rm-modal-close {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--rm-text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--rm-radius-sm);
  transition: color var(--rm-t-fast), background var(--rm-t-fast);
}
.rm-modal-close:hover { color: var(--rm-text); background: var(--rm-surface-2); }

/* ---------- Tooltip (CSS-only, data-tip) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--rm-text);
  color: var(--rm-bg);
  font-size: var(--rm-fs-xs);
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--rm-radius-sm);
  white-space: nowrap;
  box-shadow: var(--rm-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rm-t-fast), transform var(--rm-t-fast);
  z-index: 200;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Уважение к reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rm-content { animation: none; }
  .rm-skeleton::after { animation: none; }
  .rm-spinner { animation-duration: 1.5s; }
}

/* ============================================================
   ЭТАП 3 — компоненты дашборда
   ============================================================ */

/* ---------- Сетки дашборда ---------- */
.rm-grid-main {                    /* форма+щит | статусы */
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--rm-gap-md);
  align-items: start;
}
.rm-grid-bottom {                  /* график | события | подсказки */
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1fr;
  gap: var(--rm-gap-md);
  align-items: start;
}
.rm-stack { display: flex; flex-direction: column; gap: var(--rm-gap-md); }
.rm-stack > * { margin: 0 !important; }

/* ---------- Шапка карточки (заголовок + действие справа) ---------- */
.rm-card-head {
  display: flex;
  align-items: center;
  gap: var(--rm-gap-sm);
  margin-bottom: var(--rm-gap-md);
}
.rm-card-head h2 { margin: 0; flex: 1; min-width: 0; }
.rm-card-head .rm-select { width: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: var(--rm-fs-sm); }

/* ---------- ChartCard: статистика под графиком ---------- */
.rm-chart-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rm-gap-sm);
  margin-top: var(--rm-gap-md);
  padding-top: var(--rm-gap-md);
  border-top: 1px solid var(--rm-border);
}
.rm-chart-stat .rm-chart-stat-label { font-size: var(--rm-fs-xs); color: var(--rm-text-soft); }
.rm-chart-stat .rm-chart-stat-value {
  font-size: var(--rm-fs-xl);
  font-weight: var(--rm-fw-bold);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.rm-chart-stat .rm-delta { font-size: var(--rm-fs-xs); font-weight: var(--rm-fw-semi); margin-left: 6px; }
.rm-delta--up   { color: var(--rm-ok); }
.rm-delta--down { color: var(--rm-danger); }
.rm-delta--muted{ color: var(--rm-text-faint); }

/* ---------- EventList ---------- */
.rm-events { list-style: none; margin: 0; padding: 0; }
.rm-events li { border-bottom: 1px solid var(--rm-border); }
.rm-events li:last-child { border-bottom: none; }
.rm-events a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--rm-radius-sm);
  transition: background var(--rm-t-fast);
}
.rm-events a:hover { background: var(--rm-surface-2); }
.rm-event-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.rm-event-ico--ok     { background: var(--rm-ok-soft);     color: var(--rm-ok); }
.rm-event-ico--info   { background: var(--rm-info-soft);   color: var(--rm-info); }
.rm-event-ico--warn   { background: var(--rm-warn-soft);   color: var(--rm-warn); }
.rm-event-ico--danger { background: var(--rm-danger-soft); color: var(--rm-danger); }
.rm-event-text { flex: 1; min-width: 0; font-size: var(--rm-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-event-time { flex-shrink: 0; font-size: var(--rm-fs-xs); color: var(--rm-text-soft); }
.rm-event-chev { flex-shrink: 0; color: var(--rm-text-faint); display: inline-flex; }

/* ---------- Подсказки (карусель) ---------- */
.rm-hints { position: relative; }
.rm-hints .rm-hint-slide { display: none; }
.rm-hints .rm-hint-slide.is-active { display: block; animation: rm-fade-up 220ms ease both; }
.rm-hint-body {
  background: var(--rm-surface-2);
  border-radius: var(--rm-radius-md);
  padding: var(--rm-gap-md);
  font-size: var(--rm-fs-sm);
  line-height: 1.6;
  min-height: 96px;
}
.rm-hint-sparkle { color: var(--rm-accent); display: inline-flex; margin-bottom: 8px; }
.rm-hint-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--rm-gap-md); }
.rm-hint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--rm-border-strong);
  cursor: pointer;
  transition: background var(--rm-t-fast), transform var(--rm-t-fast);
}
.rm-hint-dot.is-active { background: var(--rm-accent); transform: scale(1.25); }

/* ---------- Системная строка (низ дашборда) ---------- */
.rm-sysrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rm-gap-md);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  box-shadow: var(--rm-shadow-sm);
  padding: 14px var(--rm-gap-lg);
  margin-top: var(--rm-gap-md);
}
.rm-sysrow-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rm-sysrow-item + .rm-sysrow-item { border-left: 1px solid var(--rm-border); padding-left: var(--rm-gap-md); }
.rm-sysrow-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rm-accent-soft);
  color: var(--rm-accent);
}
.rm-sysrow-item b { display: block; font-size: var(--rm-fs-sm); }
.rm-sysrow-item .rm-muted { font-size: var(--rm-fs-xs); }

/* ---------- Зона щита (форма кабинета) ---------- */
.rm-form-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--rm-gap-lg);
  align-items: center;
}
.rm-shield-zone { text-align: center; }
.rm-shield-zone img { width: min(190px, 70%); height: auto; }
.rm-shield-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--rm-fs-sm);
  color: var(--rm-text-soft);
}
.rm-shield-caption .rm-shield-check { color: var(--rm-ok); display: inline-flex; }
.rm-float { animation: rm-float 4.5s ease-in-out infinite; }
@keyframes rm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Адаптив компонентов этапа 3 ---------- */
@media (max-width: 1180px) {
  .rm-grid-bottom { grid-template-columns: 1fr 1fr; }
  .rm-grid-bottom > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .rm-grid-main, .rm-form-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rm-grid-bottom { grid-template-columns: 1fr; }
  .rm-grid-bottom > :last-child { grid-column: auto; }
  .rm-sysrow { grid-template-columns: 1fr; }
  .rm-sysrow-item + .rm-sysrow-item { border-left: none; padding-left: 0; border-top: 1px solid var(--rm-border); padding-top: var(--rm-gap-md); }
}

@media (prefers-reduced-motion: reduce) {
  .rm-float { animation: none; }
  .rm-hints .rm-hint-slide.is-active { animation: none; }
}

/* ============================================================
   UX-SHELL-02B — плотность интерфейса (размеры компонентов).
   Токены (fs/gap/line-height) переопределяются в theme.css; здесь —
   размеры и интервалы конкретных компонентов. Страница НЕ масштабируется —
   меняются только размеры и отступы, без изменения области просмотра.
   ============================================================ */

/* ---------- Мини (55%) — новый нижний уровень, заметно компактнее ---------- */
:root[data-density='compact'] .rm-logo { font-size: 16px; }
:root[data-density='compact'] .rm-nav a,
:root[data-density='compact'] .rm-nav-disclosure { gap: 8px; padding: 6px 8px; }
:root[data-density='compact'] .rm-subnav a { padding: 3px 6px; }
:root[data-density='compact'] .rm-metric { padding: 10px 14px; }
:root[data-density='compact'] .rm-metric-icon { width: 36px; height: 36px; }
:root[data-density='compact'] .rm-metric-icon svg { width: 18px; height: 18px; }
:root[data-density='compact'] .rm-metric-value { font-size: 16px; }
:root[data-density='compact'] .rm-btn { min-height: 34px; padding: 0 12px; }
:root[data-density='compact'] .rm-btn--sm { min-height: 30px; padding: 0 10px; }
:root[data-density='compact'] .rm-icon-btn { width: 34px; height: 34px; }
:root[data-density='compact'] .rm-input,
:root[data-density='compact'] .rm-select,
:root[data-density='compact'] .rm-textarea { min-height: 36px; padding: 6px 10px; }
:root[data-density='compact'] .rm-textarea { min-height: 72px; }
:root[data-density='compact'] .rm-select {
  padding-right: 40px; /* padding shorthand выше сбросил место под SVG-стрелку — вернуть */
}
:root[data-density='compact'] .rm-table th,
:root[data-density='compact'] .rm-table td { padding: 5px 6px; }
:root[data-density='compact'] .rm-status { min-height: 32px; padding: 0 10px; gap: 5px; }
:root[data-density='compact'] .rm-alert { gap: 6px; padding: 8px 10px; }
:root[data-density='compact'] .rm-side-block { padding: 8px; }
:root[data-density='compact'] .rm-avatar { width: 30px; height: 30px; }
:root[data-density='compact'] .rm-dropdown-item { padding: 6px 8px; }
:root[data-density='compact'] .rm-topbar-actions { gap: 6px; }

/* ---------- Компактно (70%, DEFAULT) — уровень прежнего compact ---------- */
:root[data-density='standard'] .rm-logo { font-size: 18px; }
:root[data-density='standard'] .rm-nav a,
:root[data-density='standard'] .rm-nav-disclosure { gap: 10px; padding: 8px 10px; }
:root[data-density='standard'] .rm-subnav a { padding: 4px 8px; }
:root[data-density='standard'] .rm-metric { padding: 14px 18px; }
:root[data-density='standard'] .rm-metric-icon { width: 42px; height: 42px; }
:root[data-density='standard'] .rm-metric-icon svg { width: 20px; height: 20px; }
:root[data-density='standard'] .rm-metric-value { font-size: 18px; }
:root[data-density='standard'] .rm-btn { min-height: 40px; padding: 0 16px; }
:root[data-density='standard'] .rm-btn--sm { min-height: 34px; padding: 0 12px; }
:root[data-density='standard'] .rm-icon-btn { width: 40px; height: 40px; }
:root[data-density='standard'] .rm-input,
:root[data-density='standard'] .rm-select,
:root[data-density='standard'] .rm-textarea { min-height: 42px; padding: 8px 12px; }
:root[data-density='standard'] .rm-textarea { min-height: 84px; }
:root[data-density='standard'] .rm-select {
  padding-right: 40px; /* padding shorthand выше сбросил место под SVG-стрелку — вернуть */
}
:root[data-density='standard'] .rm-table th,
:root[data-density='standard'] .rm-table td { padding: 6px 8px; }
:root[data-density='standard'] .rm-status { min-height: 36px; padding: 0 12px; gap: 6px; }
:root[data-density='standard'] .rm-alert { gap: 8px; padding: 10px 12px; }
:root[data-density='standard'] .rm-side-block { padding: 10px; }
:root[data-density='standard'] .rm-avatar { width: 34px; height: 34px; }
:root[data-density='standard'] .rm-dropdown-item { padding: 8px 10px; }
:root[data-density='standard'] .rm-topbar-actions { gap: 8px; }

/* ---------- Крупно ---------- */
:root[data-density='large'] .rm-logo { font-size: 22px; }
:root[data-density='large'] .rm-nav a,
:root[data-density='large'] .rm-nav-disclosure { gap: 14px; padding: 13px 14px; }
:root[data-density='large'] .rm-side-collapse { width: 32px; height: 32px; }
:root[data-density='large'] .rm-subnav a { padding: 8px 12px; }
:root[data-density='large'] .rm-metric { padding: 22px 30px; }
:root[data-density='large'] .rm-metric-icon { width: 54px; height: 54px; }
:root[data-density='large'] .rm-metric-icon svg { width: 24px; height: 24px; }
:root[data-density='large'] .rm-metric-value { font-size: 22px; }
:root[data-density='large'] .rm-btn { min-height: 50px; padding: 0 24px; }
:root[data-density='large'] .rm-btn--sm { min-height: 42px; padding: 0 16px; }
:root[data-density='large'] .rm-icon-btn { width: 50px; height: 50px; }
:root[data-density='large'] .rm-input,
:root[data-density='large'] .rm-select,
:root[data-density='large'] .rm-textarea { min-height: 52px; padding: 12px 16px; }
:root[data-density='large'] .rm-textarea { min-height: 112px; }
:root[data-density='large'] .rm-select {
  padding-right: 40px; /* padding shorthand выше сбросил место под SVG-стрелку — вернуть */
}
:root[data-density='large'] .rm-table th,
:root[data-density='large'] .rm-table td { padding: 11px 12px; }
:root[data-density='large'] .rm-status { min-height: 46px; padding: 0 18px; gap: 10px; }
:root[data-density='large'] .rm-alert { gap: 12px; padding: 16px 20px; }
:root[data-density='large'] .rm-side-block { padding: 14px; }
:root[data-density='large'] .rm-avatar { width: 44px; height: 44px; }
:root[data-density='large'] .rm-dropdown-item { padding: 12px 14px; }
:root[data-density='large'] .rm-topbar-actions { gap: 12px; }

/* ---------- Свёрнутый сайдбар (десктоп): выравнивание иконок по плотности ---------- */
@media (min-width: 769px) {
  /* UX-SHELL-02D: rail-специфичные размеры триггера по плотности (rm-density contract не меняется) */
  :root[data-density='compact'][data-sidebar='collapsed'] .rm-rail-trigger { min-height: 40px; }
  /* Owner-UAT repeat (issue 2): large rail-trigger мягче — было 50px */
  :root[data-density='large'][data-sidebar='collapsed'] .rm-rail-trigger { min-height: 46px; }
  /* UX-SHELL-02D fix: вертикальный ритм icon-only ссылки no-tabs модуля по плотности */
  :root[data-density='compact'][data-sidebar='collapsed'] .rm-nav-group[data-has-tabs='false'] > .rm-nav-link { padding: 8px 0; }
  :root[data-density='large'][data-sidebar='collapsed'] .rm-nav-group[data-has-tabs='false'] > .rm-nav-link { padding: 13px 0; }
}

/* ---------- Плотность: размер заголовка страницы на мобильной ширине ---------- */
@media (max-width: 768px) {
  :root[data-density='compact'] .rm-page-head h1 { font-size: 20px; }
  :root[data-density='standard'] .rm-page-head h1 { font-size: 22px; }
  :root[data-density='large'] .rm-page-head h1 { font-size: 28px; }

  /* AUTOREPLY-UX-03-FAST §1: mobile нижние границы кликабельных размеров.
     Даже в «Мини» (55%) на телефоне кнопки/поля не должны становиться мельче
     пальца — интерактивные контролы получают отдельный mobile-минимум
     (десктопные значения выше остаются мельче). */
  :root[data-density='compact'] .rm-btn { min-height: 42px; }
  :root[data-density='compact'] .rm-btn--sm { min-height: 38px; }
  :root[data-density='compact'] .rm-icon-btn { width: 42px; height: 42px; }
  :root[data-density='compact'] .rm-input,
  :root[data-density='compact'] .rm-select,
  :root[data-density='compact'] .rm-textarea { min-height: 44px; }
}

/* ============================================================
   Owner-UAT repeat (issue 2) — sidebar-specific density contract.
   Sidebar масштабируется МЯГЧЕ основного контента: в режиме «Крупно» меню
   не должно раздуваться так же, как страница. Sidebar-scoped переопределения
   (специфичность +1 класс .rm-sidebar) перекрывают общий large-growth. «Крупно»
   остаётся крупнее standard, но без раздутых paddings/heights и лишнего скролла.
   ============================================================ */
:root[data-density='large'] .rm-sidebar .rm-nav a,
:root[data-density='large'] .rm-sidebar .rm-nav-disclosure {
  gap: 12px;
  padding: 11px 13px;            /* было 13px 14px — мягче */
  font-size: 15px;              /* крупнее standard (14px), мягче page-large */
}
:root[data-density='large'] .rm-sidebar .rm-nav-label,
:root[data-density='large'] .rm-sidebar .rm-user-name { font-size: 15px; }
:root[data-density='large'] .rm-sidebar .rm-subnav a { padding: 6px 10px; }   /* было 8px 12px */
:root[data-density='large'] .rm-sidebar .rm-side-block { padding: 12px; }      /* было 14px */
:root[data-density='large'] .rm-sidebar .rm-avatar { width: 40px; height: 40px; } /* было 44px */

/* ============================================================
   PRODUCT-FINISH-01 — общая оболочка:
   глобальный выбор кабинета, popover (колокольчик + выход), главная.
   Только существующие токены кита; ширины viewport-safe (без h-overflow).
   ============================================================ */

/* --- Глобальный выбор кабинета WB (топбар, desktop+mobile) --- */
.rm-cabinet-switch { display: inline-flex; align-items: center; min-width: 0; }
.rm-cabinet-switch[hidden] { display: none; }
.rm-cab-chip, .rm-cab-select-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px; max-width: 240px;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-md);
  background: var(--rm-surface);
}
.rm-cab-select-wrap { padding-right: 8px; cursor: pointer; }
.rm-cab-select-wrap:focus-within { border-color: var(--rm-accent); box-shadow: var(--rm-focus-ring); }
/* UI-TOUCH-03: было --rm-text-faint при кегле 11px — контраст ниже нормы
   читаемости. Подпись мелкая, поэтому берём следующий по насыщенности токен. */
.rm-cab-chip-label {
  font-size: var(--rm-fs-xs); color: var(--rm-text-soft);
  letter-spacing: .02em; flex-shrink: 0;
}
.rm-cab-chip-name {
  font-weight: var(--rm-fw-semi); color: var(--rm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-cab-select {
  border: none; background: transparent; box-shadow: none;
  min-height: 0; height: 40px; width: auto; max-width: 170px;
  padding: 0 4px; color: var(--rm-text); font: inherit; font-weight: var(--rm-fw-semi);
}
.rm-cab-select:focus { outline: none; box-shadow: none; }
.rm-cab-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--rm-radius-md);
  background: var(--rm-accent-soft); color: var(--rm-accent-strong);
  font-weight: var(--rm-fw-semi); font-size: var(--rm-fs-sm);
  white-space: nowrap; text-decoration: none;
}
.rm-cab-cta:hover { border-color: var(--rm-accent); }
.rm-cab-cta:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }

/* PRODUCT-FINISH-01: единый глобальный selector заменяет legacy in-page
   селекторы кабинета (#cabsel) в модулях — прячем их, чтобы не дублировать
   выбор (они читают тот же 'rm_cab', поведение согласовано). */
.rm-content #cabsel { display: none !important; }

/* --- Обобщённый popover (колокольчик, подтверждение выхода) --- */
.rm-pop { position: relative; display: inline-flex; }
.rm-pop-panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0;
  width: min(300px, calc(100vw - 24px)); padding: 14px;
  background: var(--rm-surface); border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg); box-shadow: var(--rm-shadow-lg);
}
.rm-pop-panel[hidden] { display: none; }
.rm-pop-title { font-weight: var(--rm-fw-bold); color: var(--rm-text); margin-bottom: 8px; }
.rm-pop-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
:root[data-theme='dark'] .rm-icon-btn .rm-dot-badge {
  background: var(--rm-danger);
  color: var(--rm-bg);
}
.rm-icon-btn .rm-dot-badge[hidden] { display: none; }
.rm-bell-body .rm-alert { margin: 0; }
.rm-bell-item { display: block; text-decoration: none; }
.rm-bell-item + .rm-bell-item { margin-top: 8px; }

/* Выход: панель в user-card открывается ВВЕРХ (карточка внизу сайдбара). */
.rm-logout-pop { flex-shrink: 0; }
.rm-logout-btn { width: 40px; height: 40px; }
.rm-logout-panel { top: auto; bottom: calc(100% + 8px); width: min(240px, calc(100vw - 24px)); }

/* --- Общая главная (/dashboard) --- */
.rm-db { display: flex; flex-direction: column; gap: var(--rm-gap-lg); }
.rm-db-h2 { font-size: var(--rm-fs-lg); font-weight: var(--rm-fw-bold); color: var(--rm-text); margin: 0 0 12px; }
.rm-db-cab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rm-db-cab-head .rm-db-h2 { margin: 0; }
.rm-db-cab-hint { font-size: var(--rm-fs-xs); color: var(--rm-text-soft); }
.rm-db-cab-name { font-size: var(--rm-fs-xl); font-weight: var(--rm-fw-bold); color: var(--rm-text); margin: 10px 0 12px; }
.rm-db-cab-actions { margin-top: 4px; }
.rm-db-modules {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.rm-db-module {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg);
  background: var(--rm-surface); text-decoration: none; color: var(--rm-text);
  transition: border-color var(--rm-t-fast), box-shadow var(--rm-t-fast);
}
.rm-db-module:hover { border-color: var(--rm-border-strong); box-shadow: var(--rm-shadow-md); }
.rm-db-module:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-db-module-ic {
  display: inline-flex; width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center; border-radius: var(--rm-radius-md);
  background: var(--rm-accent-soft); color: var(--rm-accent-strong);
}
.rm-db-module--muted .rm-db-module-ic { background: var(--rm-surface-2); color: var(--rm-text-soft); }
.rm-db-module-body { display: flex; flex-direction: column; min-width: 0; }
.rm-db-module-title { font-weight: var(--rm-fw-semi); }
/* «Открыть →» — это призыв к действию, читать его обязательно. */
.rm-db-module-open { font-size: var(--rm-fs-xs); color: var(--rm-text-soft); }
.rm-db-cabinet .rm-alert { margin: 0 0 12px; }
.rm-db-system .rm-alert { margin: 0; }

/* ============================================================
   LAUNCH-FINAL-FAST — ранний доступ, onboarding, auth-страницы, help.
   Только существующие токены кита; ширины viewport-safe.
   ============================================================ */
.rm-hint--danger { color: var(--rm-danger); }

/* Бейдж раннего доступа (без цен/оплаты) */
.rm-ea-badge {
  display: inline-block; align-self: flex-start;
  font-size: var(--rm-fs-xs); font-weight: var(--rm-fw-semi);
  color: var(--rm-accent-strong); background: var(--rm-accent-soft);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 4px;
}

/* Onboarding-чеклист */
.rm-ob-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rm-ob-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-ob-step { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-ob-mark { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--rm-surface-2); color: var(--rm-text-soft); font-weight: var(--rm-fw-bold); }
.rm-ob-step.rm-ob-done .rm-ob-mark { background: var(--rm-ok-soft); color: var(--rm-ok-text); }
.rm-ob-step.rm-ob-active .rm-ob-mark { background: var(--rm-accent-soft); color: var(--rm-accent-strong); }
/* MOBILE-CHECKLIST-01 (05.09.2026): заголовок шага — гибкий элемент. Раньше
   у него не было flex-basis, поэтому на узком экране длинный текст целиком
   уезжал на следующую строку ПОД галочку, и галочка висела одна. Теперь
   заголовок занимает остаток строки рядом с меткой и переносится внутри
   себя; кнопка действия по-прежнему может уйти на новую строку. */
.rm-ob-title { color: var(--rm-text); flex: 1 1 12ch; min-width: 0; }
.rm-ob-step.rm-ob-done .rm-ob-title { color: var(--rm-text-soft); }
.rm-ob-action { margin-left: auto; }

/* Auth-страницы (login/register): аккуратная карточка по центру */
.rm-auth .rm-content { max-width: 440px; margin: 0 auto; padding-top: 6vh; }
.rm-auth-card { width: 100%; }
.rm-auth-brand { margin-bottom: 6px; }
.rm-auth-brand .rm-logo { font-size: 22px; font-weight: var(--rm-fw-bold); color: var(--rm-text); text-decoration: none; }
.rm-auth-brand .rm-logo b { color: var(--rm-accent); }

/* Ссылка «Помощь» внизу сайдбара */
/* AUTOREPLY-UX-03-FAST §3: заметная «Как начать» — лёгкая accent-плашка с
   иконкой. Не ярче активного модуля (мягкий accent-soft фон, обычный вес). */
.rm-side-help {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rm-fs-sm);
  font-weight: var(--rm-fw-medium);
  color: var(--rm-accent-strong);
  text-decoration: none;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-accent-soft);
  transition: background var(--rm-t-fast), color var(--rm-t-fast);
}
.rm-side-help:hover { background: var(--rm-side-active); color: var(--rm-accent); }
.rm-side-help:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-side-help-ic { display: inline-flex; flex-shrink: 0; }
:root[data-theme='dark'] .rm-side-help { color: var(--rm-accent); }

/* AUTOREPLY-UX-03-FAST §2: компактный desktop-блок «Вид» (заметно плотнее). */
.rm-display-controls.rm-side-block { padding: 8px 10px; }
.rm-display-controls .rm-side-block-title { font-size: var(--rm-fs-xs); margin-bottom: 6px; }
.rm-display-controls .rm-display-section + .rm-display-section { margin-top: 7px; }
.rm-display-controls .rm-display-label { margin-bottom: 3px; }
/* Иконочные сегменты темы: одна иконка, без подписи; ниже и квадратнее. */
.rm-segment-btn--icon { min-height: 32px; padding: 4px; gap: 0; }
/* Сегменты размера 55/70/85 одним рядом (без второго ряда подписей). */
.rm-density-segments--compact .rm-segment-btn { min-height: 32px; gap: 0; }
.rm-density-segments--compact .rm-segment-main { font-size: var(--rm-fs-sm); }

/* UI-COMPACT-01: блок «Вид» отъедал высоту у навигации — на среднем экране
   список разделов приходилось прокручивать, хотя пунктов в нём немного.
   Ужимаем ТОЛЬКО там, где ввод мышью: правило заперто в min-width: 769px,
   потому что на узком экране действует пол цели касания 44px (UI-TOUCH-02),
   и глобальное сжатие обнулило бы тот этап. */
@media (min-width: 769px) {
  .rm-display-controls.rm-side-block { padding: 6px 8px; }
  .rm-display-controls .rm-side-block-title { margin-bottom: 4px; }
  .rm-display-controls .rm-display-section + .rm-display-section { margin-top: 5px; }
  .rm-display-controls .rm-display-label { margin-bottom: 2px; font-size: 10.5px; }
  .rm-display-controls .rm-segmented { gap: 3px; padding: 2px; }
  .rm-display-controls .rm-segment-btn { min-height: 26px; padding: 2px; }
  .rm-display-controls .rm-segment-btn--icon .rm-segment-icon svg { width: 15px; height: 15px; }
  .rm-display-controls .rm-density-segments--compact .rm-segment-main { font-size: 12px; }
}

/* Мобильная панель «Вид» — палец, а не мышь: пол цели касания 44px. */
@media (max-width: 768px) {
  .rm-view-panel .rm-segment-btn { min-height: 44px; }
}

/* Help-страница */
.rm-help { max-width: 760px; }

/* ===================================================================
 * UI-TOUCH-02: пол цели касания на узких экранах.
 *
 * Замерено на 375 px по живым страницам: кнопки приходили высотой 34 px
 * («Подключить кабинет», «В настройки», «Скопировать») и 40 px. Пальцем это и
 * читается как «слипшиеся кнопки» — дело было не только в зазорах между ними,
 * но и в самой высоте.
 *
 * Откуда 34 px: их задаёт РЕЖИМ ПЛОТНОСТИ (:root[data-density] .rm-btn--sm),
 * и правило меньшей специфичности его не перебивает — проверено в браузере,
 * а не выведено из чтения файла. Поэтому селектор здесь повторяет ту же форму
 * с data-density, а не давит !important: важность нужна там, где иначе никак,
 * а здесь достаточно честной специфичности.
 *
 * Плотность при этом НЕ отменяется: она по-прежнему управляет отступами,
 * типографикой и плотностью списков. Ограничен ровно один параметр — высота
 * того, во что человек целится пальцем, и только пока экран узкий. На
 * десктопе 34 px это осознанная компактность, там ничего не меняется.
 * =================================================================== */
/* UI-TOUCH-03: граница пола касания приведена к границе МОБИЛЬНОЙ РАСКЛАДКИ.
   Замер обходом показал полосу 601–768px, где интерфейс уже считает себя
   сенсорным (выдвижное меню, мобильная шапка), но размеры контролов остаются
   мышиными: на 600px кнопка 44px, на 601px — 30px. В эту полосу попадает iPad
   в портрете (768) и телефон в альбомной ориентации. Одно понятие «сенсорный
   экран» не может иметь три разные границы — 600, 760 и 768. */
@media (max-width: 768px) {
  :root[data-density] .rm-btn,
  :root[data-density] .rm-btn--sm,
  :root[data-density] .rm-select {
    min-height: 44px;
  }
  /* Иконки шапки: 40px при обычной плотности и 34px при мелкой — обе ниже пола.
     Задаём явно для всех режимов плотности сразу. */
  :root[data-density] .rm-icon-btn { width: 44px; height: 44px; }
  /* Логотип в мобильной шапке — это ссылка на главную, то есть цель касания;
     28px по высоте промахивается пальцем. */
  .rm-mobile-logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* То же на анонимных страницах (вход, оферта) — там логотип свой. */
  .rm-logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* UI-CONTRAST-01: раскрывающийся блок — цель касания на любой странице, а не
     только в автоответах. Замер обходом: «Войти по паролю» на экране входа —
     22px. Высоту даём отступами: display:flex убрал бы стандартный треугольник. */
  summary { min-height: 44px; padding-top: 11px; padding-bottom: 11px; box-sizing: border-box; }
}

/* ============================================================
   RM-DATE — выбор даты (DATE-PICKER-01).
   Нативный календарь браузера заменён своим: он не поддавался ни теме, ни
   тёмному режиму. Всё внутри собрано на токенах кита, поэтому popover
   выглядит одинаково в обеих темах и в трёх режимах плотности.
   ============================================================ */
.rm-date { position: relative; display: inline-flex; }
.rm-date > input { cursor: pointer; }
.rm-date-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 252px;
  padding: 10px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  box-shadow: 0 12px 34px rgba(10, 20, 16, .18);
}
.rm-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
/* Заглавная буква месяца ставится в JS, а не свойством регистра: структурный
   guard «во внешнем виде страницы нет масштабирования» ищет подстроку по
   тексту файла и не отличает свойство регистра от настоящего масштабирования.
   Слово намеренно не написано — иначе его поймает сам комментарий. */
.rm-date-head b { font-size: 13px; font-weight: 700; }
.rm-date-nav {
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--rm-border);
  background: var(--rm-bg);
  color: var(--rm-text);
  border-radius: var(--rm-radius-sm);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.rm-date-nav:hover { border-color: var(--rm-accent); color: var(--rm-accent); }
.rm-date-nav:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.rm-date-dow {
  font-size: 10.5px;
  color: var(--rm-text-faint);
  padding-bottom: 4px;
}
.rm-date-day {
  border: 1px solid transparent;
  background: transparent;
  color: var(--rm-text);
  border-radius: var(--rm-radius-sm);
  padding: 5px 0;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.rm-date-day:hover:not(:disabled) { background: var(--rm-accent-soft); }
.rm-date-day:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-date-day:disabled { opacity: .3; cursor: default; }
/* сегодня — только рамка: это ориентир, а не выбор */
.rm-date-day.is-today { border-color: var(--rm-border-strong, var(--rm-border)); font-weight: 700; }
.rm-date-day.is-sel {
  background: var(--rm-accent);
  border-color: var(--rm-accent);
  color: var(--rm-text-invert);
  font-weight: 700;
}
.rm-date-foot {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rm-border);
}
.rm-date-act {
  flex: 1;
  border: 1px solid var(--rm-border);
  background: transparent;
  color: var(--rm-text-soft);
  border-radius: var(--rm-radius-sm);
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rm-date-act:hover { background: var(--rm-accent-soft); color: var(--rm-accent-strong); }
.rm-date-act:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
:root[data-theme='dark'] .rm-date-act:hover { color: var(--rm-accent); }
/* На телефоне действует пол цели касания 44px из UI-TOUCH-02. Замер на 375px
   показал 39/36/41 — поэтому высоты заданы явно, а сама панель расширена до
   320px: при 280px на ячейку дня остаётся 40px ширины, и семь колонок в
   44px просто не помещаются. Ширина ограничена вьюпортом, чтобы календарь не
   вылезал за экран на самых узких устройствах. */
@media (max-width: 768px) {
  .rm-date-pop { width: min(320px, calc(100vw - 28px)); }
  .rm-date-day { min-height: 44px; font-size: 13.5px; }
  .rm-date-nav { width: 44px; height: 44px; font-size: 17px; }
  .rm-date-act { min-height: 44px; font-size: 13px; }
}

/* MOBILE-INPUT-16PX-01 (05.09.2026, тестирование с телефона): защита от авто-приближения
   iOS на уровне ОБОЛОЧКИ, а не только внутри плагинов. Переключатель кабинета
   в шапке (13px) стоит на каждой странице и зумил при каждом тапе; общий
   гард закрывает и его, и любое будущее поле любого плагина. Порог 960px —
   тот же, что у правил 16px в плагинах: телефон в альбомной ориентации остаётся
   сенсорным. Специфичность (0,3,1) бьёт density-правила .rm-select (0,3,0);
   плагины со своими #id-правилами держат собственный такой же блок.
   Стоит ПОСЛЕДНИМ в файле намеренно. */
@media (max-width: 960px) {
  :root[data-density] .rm-app select,
  :root[data-density] .rm-app input[type=search],
  :root[data-density] .rm-app input[type=text],
  :root[data-density] .rm-app input[type=email],
  :root[data-density] .rm-app textarea { font-size: 16px; }
}