@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    :root {
      --bg: #05080f;
      --panel: #0d1322;
      --panel-2: #0b1220;
      --panel-hover: #131b2f;
      --border: #1e293b;
      --border-soft: rgba(30, 41, 59, 0.55);
      --border-focus: #3b82f6;
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: rgba(148,163,184,.65);
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --ok: #10b981;
      --warn: #f59e0b;
      --bad: #ef4444;
      --purple: #8b5cf6;
      /* высота .topbar: padding 10+10 + строка поиска 30 + нижний бордер 1 */
      --topbar-h: 51px;
      --radius: 12px;
      --font: "Inter", sans-serif;
      --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Оболочку приложения держим на реальном вьюпорте, а не на единицах vh.
       Safari после выхода из полноэкранного режима отдаёт устаревшее значение vh,
       и оболочка остаётся ниже окна - снизу виден пустой фон. position:fixed + inset
       привязывает её к окну напрямую и пересчитывается при каждом изменении размера. */
    html { height: 100%; }
    body {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      inset: 0;
      font-family: var(--font);
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.18), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(139,92,246,.14), transparent 55%),
        var(--bg);
      color: var(--text);
      height: 100%;
      /* clip вместо hidden: hidden делает элемент прокручиваемым контейнером -
         его нельзя прокрутить мышью, но можно программно (focus, scrollIntoView),
         и тогда шапка/футер уезжают из виду без возможности вернуться.
         clip запрещает прокрутку вовсе. hidden оставлен запасным для старых браузеров. */
      overflow: hidden;
      overflow: clip;
      display: flex;
    }
    body.auth-locked .sidebar,
    body.auth-locked .main,
    body.auth-locked .right-panel {
      visibility: hidden;
      pointer-events: none;
    }

    /* Layout */
    .sidebar {
      width: 248px;
      background: linear-gradient(180deg, rgba(13,19,34,.98), rgba(9,14,26,.98));
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      /* padding-top = 0: высоту шапки держит .logo-title (см. --topbar-h) */
      padding: 0 14px 18px;
      flex-shrink: 0;
      z-index: 30;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      /* См. комментарий у body: скрытая .bulk-bar сдвинута на 130px вниз и создаёт
         110px прокручиваемой области. С overflow:hidden любой scrollIntoView внутри
         таблицы утягивал .main вниз и прятал шапку. clip это исключает. */
      overflow: hidden;
      overflow: clip;
    }
    .right-panel {
      width: min(420px, calc(100vw - 20px));
      background: rgba(13,19,34,.98);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 40;
      box-shadow: -10px 0 35px rgba(0,0,0,0.55);
    }
    .right-panel.open { transform: translateX(0); }

    /* UI */
    .btn {
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 9px 14px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      user-select: none;
    }
    .btn:hover:not(:disabled) {
      background: rgba(255,255,255,0.055);
      border-color: rgba(148,163,184,.7);
      transform: translateY(-1px);
    }
    .btn:active:not(:disabled) { transform: translateY(0); }
    .btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--purple));
      border-color: transparent;
      color: #fff;
      box-shadow: 0 12px 30px rgba(59,130,246,.18);
    }
    .btn.primary:hover:not(:disabled) {
      filter: brightness(1.05);
      box-shadow: 0 16px 36px rgba(59,130,246,.22);
    }
    .btn.danger {
      background: rgba(239, 68, 68, 0.08);
      color: var(--bad);
      border-color: rgba(239, 68, 68, 0.22);
    }
    .btn.success {
      background: rgba(16, 185, 129, 0.10);
      color: var(--ok);
      border-color: rgba(16, 185, 129, 0.26);
    }
    #btnAdminEdit {
      background: #10b981;
      border-color: #10b981;
      color: #fff;
      box-shadow: 0 12px 30px rgba(16, 185, 129, 0.22);
    }
    #btnAdminEdit:hover:not(:disabled) {
      background: #10b981;
      border-color: #10b981;
      filter: brightness(1.05);
      box-shadow: 0 16px 36px rgba(16, 185, 129, 0.28);
    }
    .btn.ghost {
      background: transparent;
      border-color: var(--border);
      color: var(--text-muted);
    }
    .btn.small { padding: 7px 10px; border-radius: 9px; font-size: 12px; }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

    input, select, textarea {
      background: rgba(8,12,23,0.9);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 10px;
      font-family: var(--font);
      font-size: 13px;
      outline: none;
      transition: var(--transition);
      width: 100%;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(30,41,59,.85); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.65); }

    /* Sidebar */
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
      padding: 8px 10px;
      border-radius: 14px;
    }
    .logo img {
      width: 64px;
      height: 34px;
      object-fit: contain;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
    }
    .logo-title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* Ровно высота .topbar, чтобы первый пункт меню начинался на уровне
         разделителя под шапкой. Если поменяется высота шапки (паддинги или
         высота строки поиска) - поправить --topbar-h. */
      height: var(--topbar-h);
      flex-shrink: 0;
      line-height: 1.1;
    }
    .logo-title .brand {
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -0.4px;
      color: #fff;
    }
    .logo-title .tag {
      font-size: 12px;
      color: var(--text-muted);
    }
    /* Плашка DEMO. Показывается только на демо-инстансе: класс demo-mode
       ставится на <body> по имени хоста, поэтому на боевом домене её нет. */
    .demo-badge {
      display: none;
      margin-left: 8px;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid rgba(16,185,129,.45);
      background: rgba(16,185,129,.14);
      color: #10b981;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .6px;
      vertical-align: middle;
      white-space: nowrap;
    }
    body.demo-mode .demo-badge { display: inline-block; }

    .role-box {
      background: rgba(0,0,0,0.22);
      border: 1px solid var(--border);
      padding: 14px;
      border-radius: var(--radius);
      margin: 10px 0 14px;
    }
    .role-box label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .pill {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.25);
      color: var(--text-muted);
      background: rgba(255,255,255,0.03);
    }

    .nav {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 0;
    }
    .nav-bottom {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid rgba(239,68,68,.14);
    }
    .nav-item.blacklist-nav {
      color: #fca5a5;
      border-color: rgba(239,68,68,.16);
      background: rgba(127,29,29,.10);
    }
    .nav-item.blacklist-nav:hover {
      color: #fecaca;
      background: rgba(127,29,29,.16);
      border-color: rgba(239,68,68,.24);
    }
    .nav-item.blacklist-nav.active {
      color: #fff;
      background: rgba(239,68,68,.16);
      border-color: rgba(239,68,68,.28);
    }
    .nav-item.blacklist-nav .nav-badge {
      background: rgba(127,29,29,.32);
      color: #fecaca;
      border-color: rgba(239,68,68,.22);
    }
    .nav-item {
      padding: 12px 12px;
      border-radius: 12px;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      border: 1px solid transparent;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
    }
    .nav-item:hover {
      background: rgba(255,255,255,0.04);
      color: var(--text);
      transform: translateX(1px);
    }
    .nav-item.active {
      background: rgba(59,130,246,0.12);
      color: var(--text);
      border-color: rgba(59,130,246,0.22);
    }
    .nav-badge {
      background: rgba(30,41,59,.9);
      color: var(--text-muted);
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 20px;
      border: 1px solid rgba(148,163,184,.15);
    }
    .nav-item.active .nav-badge {
      background: rgba(59,130,246,.25);
      color: #fff;
      border-color: rgba(59,130,246,.35);
    }

    .hint {
      margin-top: auto;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid rgba(148,163,184,.18);
      background: rgba(255,255,255,0.02);
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .hint kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 7px;
      border: 1px solid rgba(148,163,184,.25);
      background: rgba(0,0,0,.25);
      color: #fff;
    }

    /* Topbar */
    .topbar {
      padding: 10px 22px;
      border-bottom: 1px solid var(--border);
      display: block;
      background: rgba(13,19,34,.92);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      z-index: 10;
    }
    .title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 6px;
      line-height: 1.35;
    }
    .topbar-head {
      display: none;
    }
    .top-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-width: 0;
    }
    .session-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
    .search-wrap {
      position: relative;
      min-width: 0;
      margin-left: 38px;
      margin-right: 13px;
    }
    .search-wrap input {
      padding-left: 36px;
      padding-right: 112px;
      /* одна высота со всеми кнопками шапки (.btn.small = 30px) */
      height: 30px;
      padding-top: 4px;
      padding-bottom: 4px;
    }
    .search-ic {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 14px;
      pointer-events: none;
    }
    .search-meta {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .chip {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(255,255,255,0.03);
      color: var(--text-muted);
      user-select: none;
    }
    .chip strong { color: #fff; }

    .view-container {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      display: none;
    }
    .view-container.active {
      display: block;
      animation: fadeIn 0.24s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Table */
    .table-wrap {
      min-height: 100%;
      padding: 0;
      /* Без overflow: любое значение кроме visible делает эту обёртку контейнером
         для position:sticky у thead, и шапка таблицы перестаёт прилипать - она
         уезжает вместе со строками. Прокручивается .view-container, к нему и
         должен привязываться sticky. В мобильном блоке overflow-x задан отдельно:
         там таблица превращается в карточки и шапка скрыта. */
    }
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      min-width: 0;
    }
    #mainTable {
      --col-select: 52px;
      --col-candidate: 24%;
      --col-contacts: 16%;
      --col-status: 10%;
      --col-kyc: 24%;
      --col-route: 13%;
      --col-finance: 11%;
      --col-soldto: 10%;
    }
    #mainTable.cols-7 {
      --col-candidate: 24%;
      --col-contacts: 16%;
      --col-status: 10%;
      --col-kyc: 24%;
      --col-route: 13%;
      --col-finance: 11%;
    }
    #mainTable.cols-8 {
      --col-candidate: 21%;
      --col-contacts: 15%;
      --col-status: 10%;
      --col-kyc: 21%;
      --col-route: 11%;
      --col-finance: 10%;
      --col-soldto: 10%;
    }
    thead th {
      text-align: left;
      padding: 12px 10px;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      /* Плотный фон, а не полупрозрачный: строки уезжают прямо под шапку
         и при 93% просвечивали сквозь неё. */
      background: #0d1322;
      z-index: 5;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      overflow-wrap: anywhere;
    }
    tbody td {
      padding: 12px 10px;
      border-bottom: 1px solid var(--border-soft);
      font-size: 12px;
      vertical-align: top;
      transition: var(--transition);
      cursor: pointer;
      overflow-wrap: anywhere;
    }
    #mainTable th:nth-child(1),
    #mainTable td:nth-child(1) { width: var(--col-select); }
    #mainTable th:nth-child(2),
    #mainTable td:nth-child(2) { width: var(--col-candidate); }
    #mainTable th:nth-child(3),
    #mainTable td:nth-child(3) { width: var(--col-contacts); }
    #mainTable th:nth-child(4),
    #mainTable td:nth-child(4) { width: var(--col-status); }
    #mainTable th:nth-child(5),
    #mainTable td:nth-child(5) { width: var(--col-kyc); }
    #mainTable th:nth-child(6),
    #mainTable td:nth-child(6) { width: var(--col-route); }
    #mainTable th:nth-child(7),
    #mainTable td:nth-child(7) { width: var(--col-finance); }
    #mainTable th:nth-child(8),
    #mainTable td:nth-child(8) { width: var(--col-soldto); }
    #mainTable .fio {
      font-size: 13px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    /* Индикатор непрочитанного комментария (только CEO/SHIFT/HEAD) */
    .soldto-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    /* .comment-alert-mobile показывается только в мобильной раскладке (см. media-блок).
       Селектор с #mainTable - иначе правило .comment-alert ниже перебило бы display. */
    #mainTable .comment-alert-mobile { display: none; }
    /* у ролей без колонки "КОМУ" значок живёт в колонке "реал / бонус" */
    .fin-stack { min-width: 0; }
    .comment-alert {
      width: 18px;
      height: 18px;
      /* небольшой отступ от правого края колонки */
      margin-right: 5px;
      flex-shrink: 0;
      color: var(--bad);
      fill: currentColor;
      display: block;
      animation: commentAlertBounce 1.6s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes commentAlertBounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-3px); }
    }
    /* уважаем системную настройку "меньше движения" */
    @media (prefers-reduced-motion: reduce) {
      .comment-alert { animation: none; }
    }
    #mainTable .stage {
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    #mainTable .status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 5px 10px;
      font-size: 11px;
      max-width: 100%;
      white-space: nowrap;
    }
    #mainTable .money-real {
      font-size: 13px;
      margin-bottom: 3px;
    }
    #mainTable .money-bonus {
      font-size: 11px;
      padding: 0;
      max-width: 100%;
      white-space: nowrap;
    }
    #mainTable .tag {
      max-width: 100%;
      white-space: normal;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }
    tbody tr:hover td { background: rgba(255,255,255,0.02); }
    tbody tr.selected td {
      background: rgba(59,130,246,0.10);
      border-bottom-color: rgba(59,130,246,0.22);
    }
    tbody tr.focused td {
      outline: 1px solid rgba(59,130,246,0.35);
      outline-offset: -1px;
      background: rgba(59,130,246,0.06);
    }
    /* Строка лида, чья карточка сейчас открыта: полупрозрачная белая маска.
       Держится, пока карточка открыта, и переживает перерисовку списка. */
    tbody tr.lead-open td { background: rgba(255,255,255,0.06); }
    tbody tr.lead-open td:first-child { box-shadow: inset 3px 0 0 rgba(255,255,255,.55); }
    @keyframes leadFlash {
      0%, 100% { background: rgba(255,255,255,0.06); }
      50% { background: rgba(255,255,255,0.18); }
    }
    tbody tr.lead-flash td { animation: leadFlash .5s ease 3; }

    .fastlog-nav-label { display: inline-flex; align-items: center; gap: 7px; }
    /* Есть непрочитанное и вкладка свёрнута - счётчик пульсирует. */
    .nav-badge.fastlog-pulse {
      background: rgba(239,68,68,.22);
      color: #fecaca;
      animation: fastLogBadgePulse 1.6s ease-in-out infinite;
    }
    @keyframes fastLogBadgePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .35; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-badge.fastlog-pulse { animation: none; }
    }

    /* FAST LOG - лента непросмотренных комментариев прямо в сайдбаре (только SHIFT).
       Никакого position:fixed: блок живёт в потоке сайдбара и занимает свободное
       место между навигацией и строкой пользователя. */
    .fastlog {
      display: none;
      flex-direction: column;
      min-height: 0;
      flex: 1 1 auto;
      /* Минус один пиксель: верхняя граница блока ложится на нижнюю границу
         вкладки, и раскрытая вкладка читается как одно целое с лентой. */
      margin: -1px 0 10px;
      background: rgba(245,158,11,0.05);
      border: 1px solid rgba(245,158,11,.35);
      border-top-color: transparent;
      border-radius: 0 0 12px 12px;
      overflow: hidden;
    }
    .fastlog.active { display: flex; }
    /* Раскрытая вкладка: низ у неё становится прямым и сливается с лентой. */
    .nav-item.fastlog-open {
      background: rgba(245,158,11,0.10);
      border-color: rgba(245,158,11,.35);
      border-bottom-color: transparent;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      color: var(--text);
    }
    .nav-item.fastlog-open .nav-badge { background: rgba(245,158,11,.22); }
    /* У раскрытой вкладки hover отключён: смена фона и плавный переход подсвечивали
       стык с лентой и выглядели как сдвиг заголовка на пиксель. */
    /* У раскрытой вкладки hover не делает ничего: у остальных пунктов меню он
       сдвигает пункт на пиксель вправо (translateX), и раскрытая вкладка от этого
       уезжала относительно неподвижной ленты под ней. */
    .nav-item.fastlog-open,
    .nav-item.fastlog-open:hover {
      background: rgba(245,158,11,0.10);
      border-color: rgba(245,158,11,.35);
      border-bottom-color: transparent;
      color: var(--text);
      transform: none;
      transition: none;
    }
    /* Кнопка живёт в самой вкладке и появляется только когда лента раскрыта. */
    .fastlog-readall { display: none; }
    .nav-item.fastlog-open .fastlog-readall { display: inline-flex; }
    .fastlog-readall {
      background: rgba(245,158,11,.12);
      border: 1px solid rgba(245,158,11,.35);
      color: var(--warn);
      font-family: inherit;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .2px;
      padding: 3px 7px;
      border-radius: 999px;
      cursor: pointer;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .fastlog-readall:hover { background: rgba(245,158,11,.22); }
    .fastlog-readall:disabled { opacity: .5; cursor: default; }
    .fastlog-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 8px; }
    .fastlog-empty { text-align: center; color: var(--text-muted); font-size: 11px; margin-top: 16px; }
    .fastlog-item {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(148,163,184,.14);
      border-left: 3px solid var(--warn);
      border-radius: 10px;
      padding: 7px 8px;
      margin-bottom: 7px;
      cursor: pointer;
    }
    .fastlog-item:hover { background: rgba(255,255,255,0.07); }
    .fastlog-line1 {
      font-size: 10px; font-weight: 900; color: var(--warn);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .fastlog-time { color: var(--text-muted); font-weight: 700; }
    .fastlog-line2 {
      font-size: 11px; font-weight: 800; color: var(--text); margin-top: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .fastlog-text {
      font-size: 10px; color: var(--text-muted); margin-top: 4px; line-height: 1.35;
      overflow-wrap: anywhere;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    tbody tr.lead-fresh td:first-child {
      position: relative;
    }
    tbody tr.lead-fresh td:first-child::before {
      content: '';
      position: absolute;
      left: 0;
      top: -1px;
      bottom: -1px;
      width: 4px;
      border-radius: 0 4px 4px 0;
      background: #ef4444;
      pointer-events: none;
    }

    .chk {
      width: 18px;
      height: 18px;
      border: 1px solid rgba(148,163,184,.75);
      border-radius: 6px;
      display: grid;
      place-items: center;
      transition: var(--transition);
      cursor: pointer;
      background: rgba(0,0,0,.15);
      user-select: none;
    }
    tr.selected .chk {
      background: rgba(59,130,246,0.95);
      border-color: rgba(59,130,246,1);
    }
    tr.selected .chk::after {
      content: "✓";
      font-size: 12px;
      color: #fff;
      font-weight: 800;
    }

    .fio {
      font-weight: 800;
      font-size: 14px;
      color: #fff;
      margin-bottom: 3px;
      letter-spacing: -0.2px;
    }
    .stage {
      font-size: 12px;
      color: var(--text-muted);
    }
    .muted { color: var(--text-muted); }
    .dim { color: var(--text-dim); }

    .blur {
      filter: blur(4px);
      opacity: 0.30;
      user-select: none;
      transition: var(--transition);
    }
    .blur:hover { opacity: 0.45; }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid transparent;
      letter-spacing: -0.1px;
      user-select: none;
    }
    /* Клик по бейджу открывает то же окно смены статуса, что и кнопка в KYC.
       Класс ставится только там, где у роли реально есть право менять статус. */
    .status-clickable { cursor: pointer; }
    .status-clickable:hover { filter: brightness(1.18); }
    .status-clickable:active { transform: translateY(1px); }
    /* Переключатель языка интерфейса в сайдбаре */
    /* Кнопка языка прижата к низу и стоит вплотную над блоком «Черный список».
       Свободное место забирает .lang-row, поэтому у соседнего .nav-bottom
       собственный margin-top:auto снимается - иначе пустота делится пополам. */
    .lang-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: auto;
      padding: 2px 0 8px;
    }
    /* Учётка, под которой выполнен вход */
    .sidebar-user {
      min-width: 0;
      flex: 1;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.2px;
      color: rgba(226,232,240,.82);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lang-row + .nav-bottom { margin-top: 0; }
    .lang-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 9px;
      border: 1px solid var(--border-soft);
      background: rgba(255,255,255,0.03);
      color: var(--text-muted);
      cursor: pointer;
      transition: color .15s ease, border-color .15s ease, background .15s ease;
    }
    .lang-btn:hover {
      color: var(--text);
      border-color: rgba(148,163,184,.38);
      background: rgba(255,255,255,0.06);
    }
    .lang-icon { width: 16px; height: 16px; fill: currentColor; }
    /* Цвет у каждого статуса свой: раньше на 11 статусов было 4 класса и
       «Документы», «Релок», «Полик», «Отрабатывает» выглядели одинаково.
       Схема бейджа прежняя: цвет - текст и точка, фон - тот же оттенок ~12%,
       рамка ~24%. Исключение - ЧС: плотная подложка и светлая рамка, чтобы
       тёмно-серый статус не растворялся на почти чёрном фоне. */
    .s-new       { color: #38bdf8; background: rgba(56,189,248,.12);  border-color: rgba(56,189,248,.24); }
    .s-interview { color: #facc15; background: rgba(250,204,21,.12);  border-color: rgba(250,204,21,.24); }
    .s-offer     { color: #e2e8f0; background: rgba(226,232,240,.10); border-color: rgba(226,232,240,.22); }
    .s-docs      { color: #e8a06a; background: rgba(232,160,106,.12); border-color: rgba(232,160,106,.24); }
    .s-reloc     { color: #a78bfa; background: rgba(167,139,250,.13); border-color: rgba(167,139,250,.26); }
    .s-polic     { color: #f97316; background: rgba(249,115,22,.13);  border-color: rgba(249,115,22,.26); }
    .s-touch     { color: #fde68a; background: rgba(253,230,138,.11); border-color: rgba(253,230,138,.22); }
    .s-workoff   { color: #2f9e63; background: rgba(47,158,99,.14);   border-color: rgba(47,158,99,.30); }
    .s-working   { color: #6ee7b7; background: rgba(110,231,183,.12); border-color: rgba(110,231,183,.24); }
    .s-reject    { color: #ef4444; background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.24); }
    .s-blacklist { color: #cbd5e1; background: rgba(71,85,105,.30);   border-color: rgba(100,116,139,.55); }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    /* Смена статуса, которую эта роль ещё не смотрела: точка горит красным,
       пока роль не откроет анкету лида. */
    .status .dot.dot-unread { background: #ff5b5b; }

    .money-real { font-weight: 800; color: #fff; font-size: 14px; display: block; margin-bottom: 4px; }
    .money-bonus {
      font-size: 12px;
      color: var(--ok);
      background: none;
      padding: 0;
      border-radius: 0;
      display: block;
      border: none;
      font-weight: 700;
    }
    .tag {
      font-size: 11px;
      padding: 3px 7px;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,.2);
      background: rgba(255,255,255,0.02);
      color: var(--text-muted);
      display: inline-flex;
      gap: 6px;
      align-items: center;
      user-select: none;
    }
    .tag-hold {
      color: #fca5a5;
      background: rgba(239,68,68,0.14);
      border-color: rgba(239,68,68,0.34);
      box-shadow: inset 0 0 0 1px rgba(239,68,68,0.08);
    }

    /* Bulk Bar */
    .bulk-bar {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(130px);
      background: rgba(15, 23, 42, 0.88);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(59,130,246,0.28);
      padding: 12px 16px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      max-width: calc(100vw - 24px);
      box-shadow: 0 22px 50px rgba(0,0,0,0.6);
      opacity: 0;
      transition: var(--transition);
      z-index: 20;
      pointer-events: none;
    }
    .bulk-bar.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .badge {
      background: rgba(59,130,246,0.95);
      color: #fff;
      padding: 2px 10px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 13px;
      letter-spacing: -0.2px;
    }
    .sep { width: 1px; height: 18px; background: rgba(148,163,184,.2); margin: 0 2px; }

    /* Right panel */
    .rp-header {
      padding: 18px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      background: rgba(13, 19, 34, 0.72);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .rp-close {
      cursor: pointer;
      color: var(--text-muted);
      font-size: 20px;
      padding: 6px 8px;
      border-radius: 10px;
      transition: var(--transition);
      user-select: none;
      border: 1px solid transparent;
    }
    .rp-close:hover {
      color: #fff;
      transform: scale(1.06);
      border-color: rgba(148,163,184,.22);
      background: rgba(255,255,255,0.03);
    }
    .rp-topmeta {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: rgba(13,19,34,.95);
    }
    .tab {
      flex: 1;
      text-align: center;
      padding: 13px 10px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: var(--transition);
      user-select: none;
    }
    .tab:hover { background: rgba(255,255,255,0.03); color: #fff; }
    .tab.active {
      color: #fff;
      border-bottom-color: rgba(59,130,246,0.95);
      background: rgba(59, 130, 246, 0.08);
    }
    .rp-body {
      padding: 18px;
      overflow: auto;
      flex: 1;
    }
    .tab-content { display: none; }
    .tab-content.active { display: block; animation: fadeIn 0.2s ease; }

    .section-h {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      margin: 16px 0 10px;
      letter-spacing: 0.6px;
      display:flex;
      justify-content: space-between;
      align-items: center;
    }
    .kv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .kv-box {
      background: rgba(0,0,0,0.22);
      border: 1px solid rgba(148,163,184,.16);
      padding: 12px;
      border-radius: 12px;
    }
    .kv-box label {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.55px;
    }
    .kv-box div {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      word-break: break-word;
      line-height: 1.35;
    }
    .kv-box.kv-box-wide {
      grid-column: span 2;
    }
    .panel-mini-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .finance-card-title {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.55px;
      margin-bottom: 8px;
      font-weight: 800;
    }
    .kv-box .finance-card-label {
      display: block;
      font-size: 11px;
      color: #94a3b8;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.55px;
      font-weight: 400;
      line-height: 1.2;
    }
    .finance-input-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .panel-hidden-note {
      font-size: 12px;
      color: var(--text-muted);
    }

    .callout {
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.22);
      color: rgba(245, 158, 11, 0.95);
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.4;
      margin-bottom: 12px;
    }

    /* Timeline */
    .chat-msg {
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .chat-meta {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-muted);
      padding: 0 4px;
    }
    
    .chat-meta-right {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .comment-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .comment-delete-confirm {
      display: none;
      align-items: center;
      gap: 8px;
    }
    .chat-msg.confirm-delete .comment-edit,
    .chat-msg.confirm-delete .comment-del {
      display: none;
    }
    .chat-msg.confirm-delete .comment-delete-confirm {
      display: inline-flex;
    }
    .chat-msg.editing .comment-del,
    .chat-msg.editing .comment-delete-confirm {
      display: none !important;
    }
    .chat-edit {
      width: 100%;
      min-height: 86px;
      resize: vertical;
      margin: 0;
    }
.chat-bubble {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(148,163,184,.18);
      padding: 10px 12px;
      border-radius: 14px 14px 14px 6px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text);
      /* KYC-анкеты вставляют многострочный текст: сохраняем переносы строк
         и пустые строки автора, длинные ссылки переносим по границе блока. */
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
    .chat-msg.mine .chat-bubble {
      background: rgba(59, 130, 246, 0.12);
      border-color: rgba(59, 130, 246, 0.22);
      border-radius: 14px 14px 6px 14px;
    }

    /* Audit */
    .audit-wrap { padding: 22px; max-width: 980px; margin: 0 auto; }
    .audit-item {
      border-left: 2px solid rgba(245,158,11,.9);
      padding-left: 14px;
      margin: 0 0 16px;
      position: relative;
    }
    .audit-item::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(245,158,11,.95);
      border: 2px solid rgba(13,19,34,.95);
      box-shadow: 0 0 0 4px rgba(245,158,11,.08);
    }
    .audit-time { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .audit-actor { font-size: 12px; font-weight: 900; color: rgba(245,158,11,.95); margin-bottom: 4px; }
    /* Ответственный в шапке карточки лида - акцентом, как вкладка "Логи". */
    .rp-responsible { color: var(--warn); font-weight: 900; }
    .audit-text {
      font-size: 13px;
      color: var(--text);
      line-height: 1.4;
      background: rgba(245, 158, 11, 0.05);
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(245, 158, 11, 0.12);
    }
    .audit-headline {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .audit-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--text);
    }
    .audit-entity {
      margin-top: 2px;
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .audit-summary {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(226, 232, 240, 0.92);
    }
    .audit-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .audit-loadmore {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }
    .audit-filters {
      display: flex;
      gap: 12px;
      align-items: end;
      flex-wrap: wrap;
      margin-bottom: 16px;
      padding: 14px;
      background: rgba(13,19,34,.72);
      border: 1px solid rgba(148,163,184,.14);
      border-radius: 14px;
    }
    .audit-filter-field {
      display: grid;
      gap: 6px;
      min-width: 220px;
      flex: 1 1 220px;
    }
    .audit-filter-field span {
      font-size: 11px;
      font-weight: 900;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .audit-filter-actionsbar {
      display: flex;
      align-items: end;
      justify-content: flex-end;
      flex: 0 0 auto;
    }
    .audit-item.audit-compact {
      padding-left: 11px;
      margin: 0 0 8px;
    }
    .audit-item.audit-compact::before {
      left: -5px;
      top: 1px;
      width: 8px;
      height: 8px;
      box-shadow: 0 0 0 3px rgba(245,158,11,.08);
    }
    .audit-item.audit-compact .audit-text {
      padding: 7px 10px;
      border-radius: 10px;
    }
    .audit-meta-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
      margin-bottom: 3px;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.2;
    }
    .audit-time-inline {
      color: var(--text-muted);
    }
    .audit-actor-inline {
      color: rgba(245,158,11,.95);
      font-weight: 900;
    }
    .audit-dot {
      opacity: .55;
    }
    .audit-item.audit-compact .audit-headline {
      gap: 6px;
      align-items: flex-start;
    }
    .audit-title-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .audit-item.audit-compact .audit-title {
      font-size: 12px;
      line-height: 1.2;
    }
    .audit-item.audit-compact .audit-entity {
      margin-top: 0;
      font-size: 10px;
      letter-spacing: .04em;
    }
    .audit-item.audit-compact .audit-summary {
      margin-top: 3px;
      font-size: 11px;
      line-height: 1.32;
      color: rgba(226, 232, 240, 0.88);
    }
    .audit-item.audit-compact .audit-actions {
      gap: 6px;
      align-items: flex-start;
    }
    .audit-kcy-btn {
      padding: 3px 7px;
      min-height: 0;
      font-size: 10px;
      line-height: 1.1;
      border-radius: 999px;
    }

    /* Reports */
    .reports-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 240px));
      justify-content: center;
      gap: 18px;
      padding: 22px;
    }
    .sheet-card {
      background: rgba(13,19,34,.9);
      border: 1px solid rgba(148,163,184,.16);
      border-radius: 16px;
      padding: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
    }
    .sheet-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, rgba(16,185,129,.9), rgba(59,130,246,.9));
    }
    .sheet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .sheet-title {
      font-size: 14px;
      font-weight: 900;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sheet-form {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .sheet-field {
      display: grid;
      gap: 6px;
    }
    .sheet-field label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .sheet-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .sheet-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 10px;
    }
    @media (max-width: 1180px) {
      .reports-grid {
        grid-template-columns: repeat(2, minmax(0, 240px));
      }
    }
    @media (max-width: 760px) {
      .reports-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .admin-wrap {
      padding: 22px;
      max-width: 1180px;
      margin: 0 auto;
    }
    .admin-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 16px;
    }
    .admin-head-side {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .admin-head h2 {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.4px;
    }
    .admin-head p {
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-muted);
      max-width: 760px;
    }
    .admin-users-grid {
      display: grid;
      gap: 14px;
    }
    .admin-group {
      background: rgba(8,13,25,.56);
      border: 1px solid rgba(148,163,184,.14);
      border-radius: 18px;
      padding: 14px;
      box-shadow: 0 16px 34px rgba(0,0,0,.16);
    }
    .admin-group-top {
      background:
        radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 36%),
        rgba(8,13,25,.6);
    }
    .admin-group-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }
    .admin-group-head h3 {
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.2px;
    }
    .admin-group-head p {
      margin-top: 5px;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .admin-group-count {
      flex-shrink: 0;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.18);
      background: rgba(255,255,255,0.04);
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }
    .admin-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .admin-summary-block {
      min-width: 0;
      display: grid;
      gap: 8px;
      padding: 10px 11px;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,.14);
      background: rgba(13,19,34,.84);
    }
    .admin-summary-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }
    .admin-summary-titleline {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .admin-summary-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .admin-summary-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .admin-summary-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }
    .admin-team-lanes {
      display: grid;
      gap: 6px;
    }
    .admin-subsection {
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    .admin-subsection.team-lane {
      background: transparent;
    }
    .admin-subsection.agent-lane {
      margin-left: 18px;
      padding-left: 10px;
      border-left: 1px solid rgba(148,163,184,.14);
    }
    .admin-subsection-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }
    .admin-subsection-title {
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.65px;
    }
    .admin-subsection-count {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }
    .admin-subsection-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .admin-subsection-grid-team {
      grid-template-columns: 1fr;
    }
    .admin-user-row {
      display: grid;
      grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.95fr) auto;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      border-radius: 12px;
      border: 1px solid rgba(148,163,184,.14);
      background: rgba(13,19,34,.78);
      box-shadow: none;
    }
    .admin-user-row.team-row {
      border-color: rgba(245,158,11,.22);
      background:
        linear-gradient(90deg, rgba(245,158,11,.09), transparent 20%),
        rgba(13,19,34,.84);
    }
    .admin-user-row.agent-row {
      background: rgba(13,19,34,.68);
    }
    .admin-user-row-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .admin-user-row-text {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .admin-user-row-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .admin-user-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 20px;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.16);
      background: rgba(255,255,255,.04);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.35px;
      text-transform: uppercase;
    }
    .admin-user-chip.role {
      color: #dbeafe;
      border-color: rgba(59,130,246,.22);
      background: rgba(59,130,246,.1);
    }
    .admin-user-chip.team {
      color: #fde68a;
      border-color: rgba(245,158,11,.2);
      background: rgba(245,158,11,.1);
    }
    .admin-user-chip.active {
      color: #d1fae5;
      border-color: rgba(16,185,129,.22);
      background: rgba(16,185,129,.12);
    }
    .admin-user-chip.inactive {
      color: #fecaca;
      border-color: rgba(239,68,68,.22);
      background: rgba(239,68,68,.12);
    }
    .admin-user-card {
      background: rgba(13,19,34,.92);
      border: 1px solid rgba(148,163,184,.16);
      border-radius: 16px;
      padding: 15px;
      box-shadow: 0 18px 38px rgba(0,0,0,.28);
    }
    .admin-user-card.team-card {
      border-color: rgba(245,158,11,.22);
      background:
        linear-gradient(180deg, rgba(245,158,11,.06), transparent 38%),
        rgba(13,19,34,.94);
      box-shadow:
        0 18px 38px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(245,158,11,.04);
    }
    .admin-user-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }
    .admin-user-name {
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      line-height: 1.3;
      word-break: break-word;
    }
    .admin-user-login {
      font-size: 11px;
      color: var(--text-muted);
      word-break: break-all;
    }
    .admin-user-presence-state {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }
    .admin-user-last-seen {
      font-size: 10px;
      color: var(--text-muted);
    }
    .admin-user-presence {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 11px;
      color: var(--text-muted);
    }
    .admin-user-presence-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      flex-shrink: 0;
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14);
    }
    .admin-user-presence-dot.online {
      background: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
    }
    .admin-user-presence-dot.offline {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14);
    }
    .admin-user-presence-label {
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }
    .admin-user-presence-seen {
      color: var(--text-muted);
    }
    .admin-user-status {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 800;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.18);
      background: rgba(255,255,255,0.04);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .admin-user-status.active {
      color: #d1fae5;
      background: rgba(16,185,129,.12);
      border-color: rgba(16,185,129,.22);
    }
    .admin-user-status.inactive {
      color: #fecaca;
      background: rgba(239,68,68,.12);
      border-color: rgba(239,68,68,.22);
    }
    .admin-user-meta {
      display: grid;
      gap: 8px;
    }
    .admin-user-field {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding-top: 8px;
      border-top: 1px solid rgba(148,163,184,.12);
    }
    .admin-user-field span {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.55px;
    }
    .admin-user-field strong {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      text-align: right;
      word-break: break-word;
    }
    .admin-user-action {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .admin-user-toggle {
      min-width: 94px;
      padding: 6px 10px;
      border-radius: 9px;
      font-size: 12px;
      justify-content: center;
    }
    .admin-user-toggle[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .admin-user-toggle-note {
      flex-basis: 100%;
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.45px;
      text-align: right;
    }
    .admin-empty {
      padding: 28px;
      border-radius: 16px;
      border: 1px dashed rgba(148,163,184,.18);
      background: rgba(255,255,255,0.02);
      color: var(--text-muted);
      text-align: center;
      font-size: 13px;
      line-height: 1.5;
    }
    .admin-empty.compact {
      padding: 10px 12px;
      border-radius: 12px;
      text-align: left;
      font-size: 12px;
    }
    .modal-error {
      display: none;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(239, 68, 68, 0.24);
      background: rgba(127, 29, 29, 0.16);
      color: #fecaca;
      font-size: 12px;
      line-height: 1.45;
    }
    @media (max-width: 720px) {
      .admin-head {
        flex-direction: column;
      }
      .admin-head-side {
        width: 100%;
        justify-content: flex-start;
      }
      .admin-group-head,
      .admin-subsection-head {
        flex-direction: column;
        align-items: flex-start;
      }
      .admin-summary-grid {
        grid-template-columns: 1fr;
      }
      .admin-subsection.agent-lane {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
      }
      .admin-user-field {
        flex-direction: column;
      }
      .admin-user-field strong {
        text-align: left;
      }
    }
    @media (min-width: 721px) and (max-width: 920px) {
      .admin-user-row {
        grid-template-columns: 1fr;
      }
      .admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .admin-summary-actions,
      .admin-user-action {
        justify-content: flex-start;
      }
      .admin-user-toggle-note {
        text-align: left;
      }
    }
    .sheet-stat { font-size: 26px; font-weight: 900; margin-bottom: 8px; letter-spacing: -0.6px; }
    .sheet-meta {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }
    .sync-loader {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid rgba(16, 185, 129, 0.25);
      border-top-color: rgba(16, 185, 129, 1);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: none;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Modals */
    .overlay {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      inset: 0;
      background: rgba(0,0,0,0.76);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: var(--transition);
      z-index: 1000;
    }
    .overlay.active { opacity: 1; pointer-events: auto; }
    .modal {
      background: rgba(13,19,34,.98);
      border: 1px solid rgba(148,163,184,.18);
      border-radius: 18px;
      width: min(520px, calc(100vw - 32px));
      padding: 20px;
      transform: translateY(10px) scale(0.97);
      transition: var(--transition);
      box-shadow: 0 28px 70px rgba(0,0,0,0.6);
    }
    .overlay.active .modal { transform: translateY(0) scale(1); }
    .modal h3 { font-size: 16px; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 6px; }
    .modal .sub { margin-top: 0; margin-bottom: 14px; }
    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 14px;
    }
    .transfer-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .transfer-actions__left {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .transfer-actions__title {
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -0.3px;
      color: var(--text);
      justify-self: start;
    }
    .transfer-actions__buttons {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      justify-self: end;
    }
    .auth-screen {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background:
        radial-gradient(900px 420px at 20% 10%, rgba(59,130,246,.18), transparent 58%),
        radial-gradient(720px 360px at 85% 0%, rgba(139,92,246,.12), transparent 52%),
        rgba(3, 6, 12, 0.94);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      z-index: 1300;
    }
    .auth-screen.active { display: flex; }
    .auth-card {
      width: min(420px, calc(100vw - 32px));
      padding: 28px;
      border-radius: 20px;
      background: rgba(13,19,34,.98);
      border: 1px solid rgba(148,163,184,.18);
      box-shadow: 0 30px 80px rgba(0,0,0,.58);
    }
    .auth-brand {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -0.5px;
      color: #fff;
    }
    .auth-brand span {
      color: rgba(59,130,246,.95);
    }
    .auth-sub {
      margin-top: 8px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.45;
    }
    .auth-form {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }
    .auth-screen.booting .auth-form input,
    .auth-screen.booting .auth-form .auth-error,
    .auth-screen.booting .auth-form .btn {
      display: none;
    }
    .auth-form .btn {
      width: 100%;
      min-height: 44px;
    }
    .auth-status {
      min-height: 18px;
      font-size: 12px;
      color: var(--text-muted);
    }
    .auth-error {
      display: none;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(239, 68, 68, 0.24);
      background: rgba(127, 29, 29, 0.16);
      color: #fecaca;
      font-size: 12px;
      line-height: 1.45;
    }
    .row {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hr {
      height: 1px;
      background: rgba(148,163,184,.14);
      margin: 14px 0;
    }
  
    @media (max-width: 1366px) {
      .sidebar {
        width: 228px;
        padding: 0 12px 16px;
      }
      .logo-title .brand { font-size: 22px; }
      .nav-item {
        padding: 10px 10px;
        font-size: 13px;
      }
      .topbar {
        padding: 10px 14px;
      }
      thead th,
      tbody td {
        padding: 10px 9px;
      }
      #mainTable .status {
        padding-left: 9px;
        padding-right: 9px;
      }
      .kv-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 1180px) {
      .sidebar {
        width: 210px;
        padding: 0 10px 14px;
      }
      .topbar {
        display: block;
      }
      .top-actions {
        grid-template-columns: minmax(0, 1fr);
      }
      .top-actions > div:last-child {
        justify-content: flex-start !important;
      }
      .sub {
        margin-top: 4px;
      }
      thead th,
      tbody td {
        padding-left: 8px;
        padding-right: 8px;
      }
      #mainTable .status {
        font-size: 10px;
        padding-left: 8px;
        padding-right: 8px;
      }
      .rp-header,
      .rp-body {
        padding-left: 14px;
        padding-right: 14px;
      }
    }

    @media (max-width: 980px) {
      .sidebar {
        width: 188px;
      }
      .logo-title .brand {
        font-size: 19px;
      }
      .hint {
        display: none;
      }
      #mainTable .fio {
        font-size: 12px;
      }
      #mainTable .stage,
      #mainTable .money-bonus {
        font-size: 10px;
      }
      #mainTable .status {
        min-width: 0;
      }
    }

    /* Mobile / tablet adaptation (390px, 430px, 768px). Scoped to <=1023.98px so desktop (>=1024px) is unaffected. */
    .mobile-nav-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text);
      font-size: 15px;
      cursor: pointer;
    }
    .mobile-nav-btn:hover { border-color: rgba(148,163,184,.7); }
    .sidebar-close {
      display: none;
      align-items: center;
      justify-content: center;
      align-self: flex-end;
      width: 28px;
      height: 28px;
      margin-bottom: 4px;
      border-radius: 7px;
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      flex-shrink: 0;
      font-size: 13px;
    }
    .sidebar-backdrop { display: none; }
    /* Mobile-only holder for the session buttons (Пароль / Выйти) at the bottom of the
       drawer. On desktop they stay in the topbar, so this stays empty and hidden. */
    .sidebar-session { display: none; }

    @media (max-width: 1023.98px) {
      /* На мобильной раскладке ленты нет: сайдбар превращается в узкий drawer,
         читать её там нечем. SHIFT при необходимости смотрит обычные логи. */
      #navFastLog, .fastlog { display: none !important; }
      html { overflow-x: hidden; }
      body { overflow: hidden; height: 100%; }

      /* Off-canvas nav drawer instead of a squeezed inline sidebar */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(266px, 74vw);
        padding: 10px 9px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: 18px 0 40px rgba(0,0,0,.5);
        z-index: 210;
      }
      .sidebar.open { transform: translateX(0); }
      .sidebar-close { display: flex; }

      .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
      inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
      }
      .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }

      /* Denser drawer content: smaller logo, tighter nav rows and badges */
      .logo-title .brand { font-size: 16px; }
      .logo-title .tag { font-size: 11px; }
      .nav { gap: 2px; margin-top: 4px; }
      /* breathing room between the HR CRM logo and the first nav item */
      #nav { margin-top: 16px; }
      .nav-item { padding: 6px 9px; font-size: 12.5px; border-radius: 9px; }
      .nav-bottom { padding-top: 8px; }
      .nav-badge { font-size: 9.5px; padding: 1px 5px; }
      .role-box { padding: 7px; margin: 6px 0; }
      .sidebar-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        margin-bottom: 0;
      }
      .logo-title { padding-right: 34px; height: auto; }

      /* Session buttons move here from the topbar (see syncMobileSessionActions).
         Свободное место в колонке забирает .lang-row, поэтому своего
         margin-top:auto здесь быть не должно: на два таких элемента пустота
         делится поровну, и нижняя группа уезжает в середину drawer-а. */
      .sidebar-session {
        display: flex;
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
      }
      .sidebar-session .btn,
      .sidebar-session .btn.small {
        flex: 1;
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 9px;
      }

      /* Top bar: burger + search share row 1 (search gets all remaining width); actions wrap to row 2 */
      .topbar { padding: 5px 8px; }
      .top-actions {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
          "burger search"
          "actions actions";
        gap: 5px;
      }
      .mobile-nav-btn {
        display: inline-flex;
        grid-area: burger;
        width: 32px;
        height: 32px;
        font-size: 14px;
      }
      .search-wrap { grid-area: search; margin-left: 0; margin-right: 0; }
      .search-wrap input {
        height: 34px;
        min-height: 34px;
        padding: 6px 12px 6px 28px;
      }
      .search-ic { left: 9px; font-size: 12px; }
      .session-actions { grid-area: actions; gap: 5px; }
      .pill { font-size: 10px; padding: 2px 7px; }
      /* Header action row is the most compact button row: it is always on screen,
         so it gives up height to the lead list. KYC/modal buttons keep their size.
         Один размер для всех кнопок строки, включая .small и .primary. */
      .session-actions .btn,
      .session-actions .btn.small,
      .session-actions .btn.primary {
        min-height: 28px;
        padding: 4px 10px;
        font-size: 11.5px;
        border-radius: 9px;
      }
      .session-actions .btn.primary { box-shadow: 0 6px 16px rgba(59,130,246,.16); }

      /* Forms and KYC operation-button rows stack full width instead of 2 cramped columns */
      .row { grid-template-columns: 1fr; gap: 8px; }
      .panel-mini-grid { grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
      .finance-input-grid { gap: 6px; }
      .modal-actions { flex-wrap: wrap; }
      .chat-meta { flex-wrap: wrap; gap: 6px; }

      .admin-user-row { grid-template-columns: 1fr; }

      /* Compact controls. Inputs keep font-size 16px so iOS Safari does not auto-zoom on
         focus, but the box around them is tightened so forms/KYC are not oversized. */
      input, select, textarea { font-size: 16px; min-height: 34px; padding: 6px 10px; }
      textarea { min-height: 64px; }
      .btn:not(.small) { min-height: 32px; padding: 6px 11px; font-size: 12px; }
      .btn.primary:not(.small) { min-height: 32px; }
      .btn.small { padding: 5px 9px; font-size: 11px; }

      .modal { padding: 14px; }
      .modal h3 { font-size: 15px; }
      .modal .sub { margin-bottom: 10px; }

      /* KYC / right panel: edge-to-edge full-screen overlay, never wider than the viewport.
         position: fixed (not absolute) is important: while closed the panel is parked at
         translateX(100%), and an absolutely positioned box there makes the document twice
         as wide as the screen. Mobile browsers then let the user pan sideways (iOS Safari
         ignores overflow-x:hidden here), which shifted the login overlay off-centre. */
      .right-panel {
        position: fixed;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
      }

      /* Login overlay */
      .auth-screen { padding: 16px; }
      .auth-card { padding: 20px; border-radius: 16px; }
      .auth-brand { font-size: 24px; }
      .auth-sub { font-size: 13px; margin-top: 6px; }
      .auth-form { gap: 10px; margin-top: 14px; }
      /* .btn.primary:not(.small) above is more specific, so the login CTA restates it */
      .auth-form .btn.primary { min-height: 40px; font-size: 13px; }
      .rp-header { padding: 8px 10px; }
      .rp-header .title { font-size: 15px; }
      .rp-close { font-size: 17px; padding: 2px 6px; }
      .rp-topmeta { margin-top: 4px; gap: 4px; }
      .tab { padding: 8px 6px; font-size: 10.5px; }
      .rp-body { padding: 9px 10px; }
      .section-h { margin: 8px 0 4px; font-size: 10px; }
      /* Short KYC values stay two per row on the phone: same fields, half the panel height */
      .kv-grid { grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 6px; }
      .kv-box { padding: 6px 7px; border-radius: 9px; }
      .kv-box label,
      .kv-box .finance-card-label { font-size: 9.5px; margin-bottom: 2px; letter-spacing: .4px; }
      .kv-box div { font-size: 12.5px; line-height: 1.2; }
      .finance-card-title { font-size: 10px; margin-bottom: 4px; }
      .hr { margin: 8px 0; }
      /* KYC operation buttons have short labels - keep them two per row, not stacked */
      #rpOpsRow1, #rpOpsRow2 { grid-template-columns: 1fr 1fr; }
      /* KYC/contact cards: the card itself is the visual field and the <input> inside it
         is flattened (no own border/background/padding). Saves ~14px per field, so the
         whole form fits a phone screen without scrolling. Font stays 16px (no iOS zoom). */
      .kv-grid .kv-box { padding: 5px 8px; }
      .kv-grid .kv-box:focus-within { border-color: rgba(59,130,246,.55); }
      .kv-grid .kv-box input {
        min-height: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        font-weight: 600;
        line-height: 1.25;
      }
      .kv-grid .kv-box input:focus { box-shadow: none; }

      /* Finance/SoldTo cards hold two inputs per card, so those keep their own frame -
         only the padding is tightened. */
      #rpFinanceCards .kv-box { padding: 3px; }
      #rpFinanceCards input { min-height: 30px; padding: 5px 8px; }

      /* --- Lead list: real mobile cards, not a shrunk/scrolled desktop table ---
         Same <td> data and order as desktop; only reflowed via CSS grid, no DOM/JS change. */
      .table-wrap { overflow-x: hidden; }
      #mainTable,
      #mainTable tbody { display: block; width: auto; }
      #mainTable thead { display: none; }
      #mainTable tr {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) minmax(0, max-content);
        column-gap: 10px;
        row-gap: 4px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--border-soft);
        cursor: pointer;
      }
      #mainTable tr:hover td { background: none; }
      #mainTable td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: none;
        overflow-wrap: anywhere;
      }
      /* Reset the desktop's percentage column widths (--col-*) — same selector specificity as
         the desktop rules above, so these must restate width explicitly to actually win. */
      #mainTable td:nth-child(1),
      #mainTable td:nth-child(2),
      #mainTable td:nth-child(3),
      #mainTable td:nth-child(4),
      #mainTable td:nth-child(5),
      #mainTable td:nth-child(6),
      #mainTable td:nth-child(7),
      #mainTable td:nth-child(8) { width: auto; min-width: 0; }

      #mainTable .fio { font-size: 14px; }

      /* checkbox + значок непрочитанного комментария под ним.
         subgrid: ячейка занимает те же две строки, что и карточка, поэтому чекбокс
         встаёт напротив имени, а значок - напротив строки с Telegram. */
      #mainTable td:nth-child(1) {
        display: grid;
        grid-template-rows: subgrid;
        justify-items: center;
        align-items: start;
        padding-top: 2px;
        grid-column: 1;
        grid-row: 1 / span 2;
      }
      #mainTable .comment-alert-desk { display: none; }
      #mainTable .comment-alert-mobile {
        display: block;
        margin-right: 0;
        margin-top: 1px; /* оптическое выравнивание с текстом строки Telegram */
        pointer-events: none; /* клик по значку не должен выделять строку */
      }
      /* name + ID */
      #mainTable td:nth-child(2) { grid-column: 2; grid-row: 1; }
      /* status badge, same line as the name */
      #mainTable td:nth-child(4) { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
      /* contact */
      #mainTable td:nth-child(3) { grid-column: 2; grid-row: 2; }
      /* KYC summary - fills the rest of the left column */
      #mainTable td:nth-child(5) { grid-column: 2; grid-row: 3 / span 2; }

      /* Right rail: route / finance / sold-to stack next to the main info instead of
         under it, so the card reads as one block with no divider. */
      #mainTable td:nth-child(6),
      #mainTable td:nth-child(7),
      #mainTable td:nth-child(8) {
        grid-column: 3;
        justify-self: end;
        text-align: right;
        max-width: 140px;
      }
      /* route (team + agent) */
      #mainTable td:nth-child(6) { grid-row: 2; }
      /* finance: REAL + BONUS on one line */
      #mainTable td:nth-child(7) {
        grid-row: 3;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
      }
      #mainTable td:nth-child(7) .money-real,
      #mainTable td:nth-child(7) .money-bonus {
        display: inline-block;
        margin: 0;
      }
      /* sold to (optional column) */
      #mainTable td:nth-child(8) { grid-row: 4; }
      /* empty-state row ("Нет лидов" / "Ничего не найдено") spans the full card width */
      #mainTable td[colspan] { grid-column: 1 / -1; }
    }