/* Caligo 3.0 — «Ночная мгла». Система описана в docs/DESIGN.md.
   Что было не так в 2.x: белое на сером с одним синим акцентом, прямые рамки, сетка во всех таблицах —
   владелец назвал это «топорным» и «дашбордом из 1995 года». Теперь: фирменный Geologica с осью остроты
   (заголовки и цифры со срезами, текст мягкий), ночная рельса и ночной маркер меню с бирюзовым «зрачком»,
   холодная мгла вместо серого фона, таблицы без вертикальной сетки. Интерфейс по-прежнему только светлый,
   золота нет. Имена классов прежние — страницы не переписывались ради стилей. */

@font-face { font-family: "Geologica"; src: url(/fonts/geologica-latin.woff2) format("woff2"); font-weight: 100 900; font-style: oblique 0deg 12deg; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; src: url(/fonts/geologica-cyrillic.woff2) format("woff2"); font-weight: 100 900; font-style: oblique 0deg 12deg; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* палитра «Ночная мгла» */
  --night: #0E1230; --night-2: #171C45; --night-3: #252B5E; --night-text: #C9CEEE; --night-muted: #7D84B3;
  --ink: #1D2342; --ink-2: #3B4265; --haze: #EDF0F6; --haze-2: #E4E8F1; --paper: #FFFFFF; --paper-2: #F7F8FC;
  --line: #E2E5EE; --line-2: #D0D5E2; --iris: #4C4DFF; --iris-600: #3A3BE0; --iris-soft: #EEEEFF; --iris-line: #CDCEFF;
  --glint: #2FD4F5; --glint-soft: rgba(47, 212, 245, .16);

  /* прежние имена — ими пользуются страницы и встроенные стили */
  --bg: var(--haze); --surface: var(--paper); --surface-2: var(--paper-2); --hover: #F3F5FA; --head: var(--paper-2);
  --border: var(--line); --border-2: var(--line-2); --grid: #EDEFF5;
  --text: var(--ink); --text-2: var(--ink-2); --muted: #676E92; --faint: #9AA0BC;
  --primary: var(--iris); --primary-600: var(--iris-600); --primary-soft: var(--iris-soft); --primary-line: var(--iris-line);
  --ok: #0A8F68; --ok-soft: #E4F5EF; --ok-line: #BCE6D6;
  --warn: #D4600A; --warn-soft: #FFF1E5; --warn-line: #F6D3B6;
  --bad: #D63845; --bad-soft: #FDECEE; --bad-line: #F4C3C8;
  /* 5.54: текст бейджа на своей подложке — тон темнее, чтобы было ≥ 4,5:1 (был 3,6 / 3,5 / 4,1) */
  --ok-ink: #087755; --warn-ink: #A84C07; --bad-ink: #BC303C;
  --info: #7445F0; --info-soft: #F2EDFF; --idle: #5F6684; --idle-soft: #EFF1F6; --idle-line: #DDE1EB;

  --r: 12px; --r-sm: 9px; --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(14, 18, 48, .05);
  --shadow-2: 0 10px 30px -12px rgba(14, 18, 48, .22), 0 2px 6px rgba(14, 18, 48, .05);
  --shadow-3: 0 30px 80px -20px rgba(14, 18, 48, .45), 0 4px 14px rgba(14, 18, 48, .08);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--haze); color: var(--ink); font: 400 13.5px/1.5 var(--font); font-variation-settings: "SHRP" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(76, 77, 255, .18); }
a { color: var(--iris); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* острота Geologica — у заголовков и цифр: это «срезы в духе Kali», текст остаётся мягким */
h1, h2, .kpi .v, .num, .sharp { font-variation-settings: "SHRP" 100; }
h1 { font-size: 26px; line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -.02em; color: var(--night); }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; letter-spacing: -.01em; color: var(--night); }
h3 { font-size: 12.5px; margin: 18px 0 8px; font-weight: 600; color: var(--muted); }
code, pre, .mono { font-family: var(--mono); font-size: 12px; }
code { background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; margin: 6px 0; max-height: 380px; overflow: auto; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 14px; height: 14px; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }

/* ───────── каркас: рельса · меню · рабочая область ───────── */
.app { display: grid; grid-template-columns: 60px 248px minmax(0, 1fr); min-height: 100vh; }

/* рельса — одного цвета, как просил владелец: знак дистрибутора сверху, внизу тревоги, Global Settings, профиль.
   5.54: без свечения сверху (radial-gradient) — пятно как украшение, против правила DESIGN.md */
.rail { background: var(--night); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 12px 0 14px; gap: 6px; z-index: 30; }
.rail-logo { width: 38px; height: 38px; display: block; border-radius: 11px; margin-bottom: 10px; transition: transform .25s var(--ease); }
.rail-logo .mk { width: 38px; height: 38px; display: block; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .35); }
/* знак живой, но только по делу: раскрытие зрачка и блик на входе, в работе — моргание по наведению и на новый
   лид. Опора трансформаций — в координатах знака (view-box): у группы зрачка своя рамка включает луч света,
   и при fill-box зрачок сжимался бы не к своему центру. */
.mk .mk-eye, .mk .mk-sheen, .mk .mk-ray { transform-box: view-box; }
.mk .mk-eye { transform-origin: 27.6px 24px; }
.mk .mk-sheen, .mk .mk-ray { opacity: 0; }
@keyframes mk-blink { 0%, 100% { transform: none; } 14% { transform: scaleY(.07) scaleX(1.15); } 30% { transform: none; } }
@keyframes mk-sheen { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(84px); opacity: 0; } }
@keyframes mk-ray { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.rail-logo:hover .mk-eye, .mk.blink .mk-eye { animation: mk-blink 1.2s var(--ease); }
.rail-logo:hover .mk-ray, .mk.blink .mk-ray { animation: mk-ray .9s ease-in-out .3s; }
.mk.blink .mk-sheen { animation: mk-sheen 1.1s cubic-bezier(.45, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .mk .mk-eye, .mk .mk-sheen, .mk .mk-ray { animation: none !important; } }
.rail-logo:hover { transform: scale(1.05); }
.rail-logo { position: relative; }
.rail-logo.on::before { content: ""; position: absolute; left: -11px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--glint); box-shadow: 0 0 10px var(--glint); }
.rail .sp { flex: 1; }
/* 5.54: нити мглы у низа рельсы (web/rail-mist.svg, tools/menu_mist.py) — те же линии, что у низа меню, продолжены влево: мгла
   переходит из рельсы в меню без шва. Неподвижные. Было (5.17–5.53): два размытых пятна плыли по рельсе по кругу в 40 с — против
   правила DESIGN.md «мгла — только тонкими линиями», от пятен владелец отказывался дважды. Выключаются вместе с фоном меню (профиль) */
.rail::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: url(/rail-mist.svg) left bottom / 100% auto no-repeat; }
body.navart-off .rail::before { display: none; }
.rail > * { position: relative; z-index: 1; }
.rbtn { position: relative; width: 40px; height: 40px; border-radius: 11px; border: 0; background: none; color: var(--night-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.rbtn svg.i { width: 19px; height: 19px; stroke-width: 1.7; }
.rbtn:hover { background: var(--night-3); color: #fff; text-decoration: none; }
.rbtn.on { background: var(--night-3); color: #fff; }
.rbtn.on::before { content: ""; position: absolute; left: -10px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--glint); box-shadow: 0 0 10px var(--glint); }
.rbtn .cnt { position: absolute; top: -2px; right: -7px; box-shadow: 0 0 0 2px var(--night); }  /* 5.54: на углу кнопки, а не поверх значка */
.rbtn[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50px; top: 50%; transform: translateY(-50%); background: var(--night); color: #fff; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 7px; white-space: nowrap; box-shadow: var(--shadow-2); pointer-events: none; }
.ravatar { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; overflow: hidden; cursor: pointer; margin-top: 6px; background: var(--night); box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px rgba(47, 212, 245, .55); }
/* 5.52: аватар — богиня Мглы (web/avatar.jpg), а не инициалы */
.ravatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* меню */
.side { background: var(--paper); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; }
/* 5.22.1: фон меню — линии мглы у низа панели (web/menu-mist.svg, tools/menu_mist.py): тонкий вектор, а не фотография. Было
   (5.22.0): богиня бледным растром — на светлой панели полупрозрачный дым читался как грязь на экране. Фон элемента со
   скроллом стоит на месте, пока пункты прокручиваются. Выключается в профиле: Интерфейс → Фон меню */
.side { background: url(/menu-mist.svg) left bottom / 100% auto no-repeat, var(--paper); }
body.navart-off .side { background: var(--paper); }
.brand { display: flex; flex-direction: column; gap: 5px; padding: 20px 20px 14px; color: var(--night); }
.brand .wm { height: 15px; width: 64.5px; display: block; color: var(--night); }
.brand .bsub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.brand .bsub i { width: 6px; height: 6px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 0 3px var(--glint-soft); flex: none; }
.brand .bsub b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.navsearch { position: relative; padding: 4px 14px 10px; }
.navsearch input { width: 100%; padding: 7px 10px 7px 32px; font-size: 13px; background: var(--paper-2); border-color: var(--line); }
.navsearch svg { position: absolute; left: 25px; top: calc(50% - 3px); transform: translateY(-50%); color: var(--faint); }
#nav { padding: 2px 0 16px; position: relative; }
.ngroup { padding: 1px 0; position: relative; z-index: 1; }
.nhead { position: relative; display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 1px 10px; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-weight: 550; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; transition: color .15s; }
.nhead:hover { background: var(--hover); text-decoration: none; }
.nhead svg.i { color: var(--muted); }
.nhead .chev { margin-left: auto; color: var(--faint); transition: transform .2s var(--ease); width: 14px; height: 14px; }
.ngroup.closed .chev { transform: rotate(180deg); }
.nhead.on, .nhead.on:hover { color: #fff; background: none; }
.nhead.on svg.i { color: var(--glint); }
.nitems { padding: 0 0 4px; }
.ngroup.closed .nitems { display: none; }
.nitems a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 36px; margin: 1px 10px; color: var(--ink-2); font-size: 13px; white-space: nowrap; border-radius: var(--r-sm); transition: color .15s; }
.nitems a:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.nitems a.on, .nitems a.on:hover { color: #fff; background: none; font-weight: 550; }
.nitems + .nitems { border-top: 1px dashed var(--grid); margin-top: 3px; padding-top: 3px; }
/* ночной маркер выбранного пункта: переезжает к новому пункту, срезанные углы и бирюзовый зрачок */
.nmark { position: absolute; left: 10px; right: 10px; top: 0; height: 32px; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, var(--night) 55%, var(--night-3)); border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: transform .32s var(--ease), height .32s var(--ease), opacity .2s; }
.nmark.in { opacity: 1; }
.nmark::before { content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 8px 1px var(--glint); }
.nmark.head::before { display: none; }
.cnt { font-size: 10.5px; font-weight: 650; background: var(--idle-soft); color: var(--muted); border-radius: 9px; padding: 0 6px; min-width: 18px; text-align: center; line-height: 17px; font-variant-numeric: tabular-nums; }
.cnt.bad { background: var(--bad); color: #fff; }
.cnt.warn { background: var(--warn-soft); color: var(--warn-ink); }
.nitems a.on .cnt.warn { background: rgba(255, 255, 255, .14); color: #fff; }
.side .foot { margin-top: auto; padding: 12px 20px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.side .shead { display: flex; align-items: center; gap: 8px; padding: 18px 20px 10px; }
.side .shead h2 { margin: 0; font-size: 16px; }
.side .sback { display: flex; align-items: center; gap: 6px; margin: 0 14px 8px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); font-size: 12.5px; }
.side .sback span { white-space: nowrap; }   /* «Back to distribution» ломалось на две строки при свободном месте */
.side .sback:hover { background: var(--hover); color: var(--ink); text-decoration: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 0 32px; height: 56px; background: rgba(237, 240, 246, .82); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid rgba(208, 213, 226, .6); }
.crumbs { color: var(--muted); font-size: 13px; white-space: nowrap; }  /* Safari переносил «What's new» на вторую строку */
.crumbs b { color: var(--night); font-weight: 600; }
.topbar .grow { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 4px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(10, 143, 104, .5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 143, 104, .45); } 70% { box-shadow: 0 0 0 7px rgba(10, 143, 104, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 143, 104, 0); } }
.iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.iconbtn:hover { background: var(--hover); text-decoration: none; }
.iconbtn .cnt { position: absolute; top: -6px; right: -7px; }
.userchip { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); height: 34px; }
.userchip:hover { background: var(--hover); }
.avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--night); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 10.5px; }
.menu { position: fixed; left: 70px; bottom: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); padding: 6px; min-width: 250px; z-index: 60; }
.menu a, .menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; color: var(--ink-2); background: none; border: 0; border-radius: 8px; font: inherit; cursor: pointer; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.menu .who { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.menu .who b { display: block; color: var(--night); font-size: 14px; font-weight: 600; }
.menu .who .avatar { width: 34px; height: 34px; font-size: 12px; }
.content { padding: 26px 32px 72px; }
.head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.head .sub { width: 100%; margin-top: -2px; max-width: 860px; }
.grow { flex: 1; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.55; }

.section { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.section:first-child { margin-top: 4px; }
.section h2 { margin: 0; font-size: 15px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.section h2 svg.i { color: var(--iris); }
.section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* ───────── карточки ───────── */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-1); }
.card.tight { padding: 0; overflow: hidden; }
.card .ch { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card .ch h2 { margin: 0; }
.card.tight .ch { padding: 14px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.card.tight .ch h2 { font-size: 14.5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.g21 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid2 > .card, .grid3 > .card, .g21 > .card { margin-bottom: 0; }
/* ячейка сетки не сжималась уже своей таблицы — на 1000 px дашборд уезжал вбок */
.grid2 > *, .grid3 > *, .g21 > * { min-width: 0; }
.grid2, .grid3, .g21 { margin-bottom: 16px; }

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 16px; box-shadow: var(--shadow-1); }
/* 5.26: четыре KPI — классом, а не style у элемента. Было: Finance → Conversions задавал 6 колонок прямо в style, и это
   перебивало правило узких экранов — на 1000 px шесть KPI жались в строку, подписи обрезались */
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: 16px 20px; min-width: 0; border-right: 1px solid var(--grid); }
.kpi:last-child { border-right: 0; }
.kpi .l { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; display: flex; gap: 6px; align-items: center; }
.kpi .v { font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--night); line-height: 1.1; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.delta { font-weight: 600; font-size: 12px; }
.delta.up { color: var(--ok-ink); } .delta.down { color: var(--bad-ink); }  /* 5.65 (ревью интерфейса): здесь и в чипах ниже — тёмные тона. Было: зелёный на белом 4,1:1, на своей подложке 3,6:1, оранжевый 3,5:1 — ниже 4,5:1 */
.stat { display: flex; align-items: flex-start; gap: 12px; }
.stat .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--iris-soft); color: var(--iris); flex: none; }
.stat .ic.ok { background: var(--ok-soft); color: var(--ok); }
.stat .ic.warn { background: var(--warn-soft); color: var(--warn); }
.stat .ic.bad { background: var(--bad-soft); color: var(--bad); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px 20px; color: var(--ink); min-height: 128px; position: relative; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--iris-line); box-shadow: var(--shadow-2); text-decoration: none; }
.tile .t { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; padding-right: 20px; color: var(--night); font-variation-settings: "SHRP" 100; }
.tile .t svg.i { color: var(--iris); width: 18px; height: 18px; }
.tile p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.tile .q { position: absolute; top: 18px; right: 18px; width: 16px; height: 16px; border: 1.5px solid var(--faint); border-radius: 50%; color: var(--faint); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tile .n { position: absolute; top: 17px; right: 16px; }

/* ───────── таблицы: без вертикальной сетки, шапка тихая ───────── */
.tw { overflow-x: auto; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 550; font-size: 12px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--paper-2); }
th.n { white-space: normal; min-width: 50px; vertical-align: bottom; padding-left: 8px; padding-right: 8px; }
td.n { padding-left: 8px; padding-right: 8px; white-space: nowrap; }  /* 5.21: «50 USD», «11 ms» — в одну строку; было «50» над «USD» в Payout Summary */
td { padding: 10px 14px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th .arr { color: var(--iris); margin-left: 3px; }
tr.click { cursor: pointer; }
tbody tr:hover td { background: #F8F9FD; }
tr.sel td, tr.sel:hover td { background: var(--iris-soft) !important; }
tr.flash td { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: rgba(47, 212, 245, .18); } to { background: transparent; } }
tfoot td { font-weight: 650; border-top: 1px solid var(--line-2); background: var(--paper-2); }
td.n, th.n { text-align: right; }
.nowrap { white-space: nowrap; }
.small { font-size: 12px; }
/* 5.54 (ревью, контраст по WCAG): бледный --faint (#9AA0BC) — 2,6:1 на белом, мелкий текст им не читается; он остаётся только у «—» на месте
   пустого значения (.nil) и у значков. Подписи с .faint (вторая строка ячейки, «не отправлен», подсказки) — тоном --muted, 5,0:1 */
.muted { color: var(--muted); } .faint { color: var(--muted); } .nil { color: var(--faint); }
.ell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-toggle { border: 0; background: none; cursor: pointer; color: var(--muted); width: 20px; padding: 0; font-size: 11px; }
.lvl1 td:first-child { padding-left: 34px !important; } .lvl2 td:first-child { padding-left: 56px !important; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); background: var(--paper-2); }

/* ───────── метки ───────── */
.b { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; background: var(--idle-soft); color: var(--idle); line-height: 17px; border: 1px solid transparent; }
.b.new, .b.sent, .b.job, .b.pri { background: var(--iris-soft); color: var(--iris-600); }
.b.queue, .b.hold, .b.warn { background: var(--warn-soft); color: var(--warn-ink); }
.b.approved, .b.ok { background: var(--ok-soft); color: var(--ok-ink); }
.b.rejected, .b.error, .b.fail, .b.bad { background: var(--bad-soft); color: var(--bad-ink); }
.b.plain { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.b.info { background: var(--info-soft); color: var(--info); }
.b.night { background: var(--night); color: #fff; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); }
.flagtag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--warn); border: 1px dashed var(--warn-line); background: var(--warn-soft); border-radius: 6px; padding: 0 6px; line-height: 17px; margin-top: 2px; }

/* 3.6: флаги — маленькие яркие круги. Было: прямоугольники 20×15 с серой рамкой — владелец: «серые и уебищные».
   Круг из квадратного флага (flag-icons 1x1), насыщенность +25%, белый кант и тонкий ночной обвод — флаг читается и
   на белом, и на цветной строке, а рядом код страны. */
.cc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 12.5px; color: var(--night); letter-spacing: .01em; }
img.flag { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; vertical-align: -2px;
  filter: saturate(1.25) contrast(1.04); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(14, 18, 48, .14), 0 1px 3px rgba(14, 18, 48, .18); }
.cc.big img.flag { width: 18px; height: 18px; }

.bar { height: 5px; background: var(--haze-2); border-radius: 3px; overflow: hidden; min-width: 80px; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--iris); border-radius: 3px; }
.bar i.full { background: var(--warn); }
.faint.warn-t { color: var(--warn); }

/* ───────── формы ───────── */
input, select, textarea { font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 7px 11px; min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #BCC2D3; }
input:focus, select:focus, textarea:focus { border-color: var(--iris); box-shadow: 0 0 0 3px rgba(76, 77, 255, .14); }
input::placeholder, textarea::placeholder { color: var(--faint); }
/* 5.52: flex: none — в строке-флексе (списки с галками, .chk) галка у длинной подписи в две строки сжималась до 9–11 px: в окне правила
   Auto Injections три соседние галки «Error Codes» были трёх разных размеров */
input[type=checkbox], input[type=radio] { width: 15px; height: 15px; flex: none; accent-color: var(--night); vertical-align: -3px; padding: 0; box-shadow: none; }
textarea { width: 100%; min-height: 76px; font-family: var(--mono); font-size: 12px; }
.f { display: block; margin-bottom: 14px; }
.f > span { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 550; margin-bottom: 5px; }
.f input:not([type=checkbox]):not([type=radio]), .f select, .f textarea { width: 100%; }
label.chk { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; margin-right: 16px; color: var(--ink-2); max-width: 100%; }
label.chk input { margin-top: 1px; flex: none; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.filters input[type=date] { width: 140px; }
.filters select { max-width: 200px; }
.search { position: relative; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search input { padding-left: 32px; width: 240px; }
.kv { width: 100%; }
.kv td { padding: 3px 6px 3px 0 !important; border: none !important; background: none !important; }
.kv th { background: none !important; border: none !important; padding-left: 0 !important; }
.kv input, .kv select { width: 100%; }
.kv .x { width: 30px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); padding: 2px; gap: 2px; }
.seg button { border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; padding: 5px 12px; color: var(--muted); cursor: pointer; font-weight: 550; }
.seg button:hover { color: var(--ink); background: var(--hover); }
.seg button.on { background: var(--night); color: #fff; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: var(--line-2); border-radius: 20px; transition: background .2s; cursor: pointer; }
.switch i::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .2s var(--ease); box-shadow: 0 1px 2px rgba(14, 18, 48, .25); }
.switch input:checked + i { background: var(--night); }
.switch input:checked + i::before { transform: translateX(14px); box-shadow: 0 0 0 2px var(--glint-soft), 0 1px 2px rgba(14, 18, 48, .25); }
.switch input:focus-visible + i { outline: 2px solid var(--iris); outline-offset: 2px; }

/* ───────── кнопки: главная — ночная, не индиго ───────── */
.btn { font: inherit; font-weight: 550; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; white-space: nowrap; line-height: 1.35; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s; box-shadow: var(--shadow-1); }
.btn:hover { background: var(--hover); text-decoration: none; border-color: #BCC2D3; }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--night); border-color: var(--night); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 12px -4px rgba(14, 18, 48, .5); }
.btn.pri:hover { background: var(--night-2); border-color: var(--night-2); box-shadow: 0 0 0 3px var(--glint-soft), 0 6px 16px -6px rgba(14, 18, 48, .55); }
.btn.pri svg.i { color: var(--glint); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad-line); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.xbtn { border: none; background: none; cursor: pointer; color: var(--faint); padding: 2px 6px; font-size: 16px; line-height: 1; border-radius: 6px; }
.xbtn:hover { color: var(--bad); background: var(--bad-soft); }

/* ───────── вкладки ───────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { font: inherit; font-size: 13px; background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 14px; color: var(--muted); margin-bottom: -1px; font-weight: 550; white-space: nowrap; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--night); border-bottom-color: var(--night); }

/* ───────── модалки, выезжающая панель ───────── */
.shade { position: fixed; inset: 0; background: rgba(14, 18, 48, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px; overflow-y: auto; animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--paper); border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-3); width: 100%; max-width: 560px; padding: 0; overflow: hidden; animation: rise .22s var(--ease); }
@keyframes rise { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
/* поля — у самой модалки, а не у каждого потомка: иначе встроенный style="margin:…" у блока выталкивал его к краю */
.modal { padding: 0 24px; }
.modal > h2:first-child { font-size: 18px; margin: 0 -24px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.modal > h2 + * { margin-top: 16px; }
.modal.wide { max-width: 920px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin: 20px -24px 0; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--paper-2); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(860px, 100vw); background: var(--paper); z-index: 40; border-left: 1px solid var(--line); box-shadow: var(--shadow-3); overflow-y: auto; padding: 22px 28px 40px; animation: slidein .24s var(--ease); }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .x { position: absolute; top: 16px; right: 18px; }
.dl { display: grid; grid-template-columns: 160px 1fr; gap: 0; font-size: 13px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dl dt { color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--grid); background: var(--paper-2); }
.dl dd { margin: 0; word-break: break-word; padding: 7px 12px; border-bottom: 1px solid var(--grid); }
.dl dt:nth-last-child(2), .dl dd:last-child { border-bottom: 0; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { padding: 6px 0 6px 18px; border-left: 2px solid var(--line); position: relative; font-size: 13px; }
.tl li::before { content: ""; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; background: var(--paper); border: 2px solid var(--line-2); border-radius: 50%; }
.tl li.bad::before { border-color: var(--bad); } .tl li.ok::before { border-color: var(--ok); }
.tl time { color: var(--muted); font-size: 12px; margin-right: 8px; }
details.att { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 13px; margin-bottom: 8px; }
details.att summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; list-style: none; }

#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--night); color: #fff; padding: 11px 16px 11px 34px; border-radius: 12px; max-width: 440px; font-size: 13px; position: relative; box-shadow: var(--shadow-3); animation: rise .22s var(--ease); }
.toast::before { content: ""; position: absolute; left: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 8px var(--glint); }
.toast.bad::before { background: #FF6B76; box-shadow: 0 0 8px #FF6B76; }
.toast.undo { display: flex; align-items: center; gap: 14px; }
.toast.undo span { min-width: 0; }
.toast.undo button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; border-radius: 8px; padding: 4px 11px; font: inherit; font-weight: 600; cursor: pointer; flex: none; }
.toast.undo button:hover { background: rgba(255, 255, 255, .24); }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.empty b { display: block; color: var(--night); font-size: 15px; margin-bottom: 6px; font-weight: 600; }
.empty svg.i { width: 30px; height: 30px; color: var(--iris); margin-bottom: 10px; stroke-width: 1.5; opacity: .7; }
.note { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.note.warn { background: var(--warn-soft); border-color: var(--warn-line); color: #7A3A06; }
.note.bad { background: var(--bad-soft); border-color: var(--bad-line); color: #7A1A22; }
.note.ok { background: var(--ok-soft); border-color: var(--ok-line); color: #0B5540; }
.note.pri { background: var(--iris-soft); border-color: var(--iris-line); color: #26288F; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; font-size: 12px; background: var(--paper); white-space: nowrap; color: var(--ink-2); }
.chip .p { color: var(--muted); font-size: 11px; font-weight: 600; }
.chip.off { opacity: .5; text-decoration: line-through; }
.chip.btnchip { cursor: pointer; white-space: normal; max-width: 100%; }
.chip.btnchip:hover { border-color: var(--iris); color: var(--iris); text-decoration: none; }
.chip.on { border-color: var(--night); color: #fff; background: var(--night); }
.secret { font-family: var(--mono); font-size: 12px; background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 8px 11px; word-break: break-all; }

.sched td { padding: 3px 8px 3px 0 !important; border: none !important; background: none !important; }
.sched td:first-child { width: 40px; color: var(--muted); font-weight: 600; }
.sched input[type=text] { width: 100%; }

.flowcard { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: start; }
.ord { display: flex; flex-direction: column; gap: 2px; align-items: center; color: var(--faint); font-weight: 700; border-right: 1px solid var(--grid); padding-right: 10px; }
.ord button { border: none; background: none; cursor: pointer; color: var(--faint); padding: 0 6px; font-size: 11px; }
.ord button:hover:not(:disabled) { color: var(--iris); }

/* ───────── графики ───────── */
.chart { width: 100%; height: 200px; display: block; overflow: visible; }
.chart .gl { stroke: var(--grid); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
.chart .b1 { fill: #DCDFF7; } .chart .b2 { fill: var(--night); }
.chart .ln { fill: none; stroke: var(--glint); stroke-width: 2.2; }
.chart .pt { fill: var(--paper); stroke: #13A9C9; stroke-width: 1.8; }
.chart .area { fill: url(#haze-fill); }
.chart .aline { fill: none; stroke: var(--iris); stroke-width: 2; }
.chart .aline2 { fill: none; stroke: var(--night); stroke-width: 2; stroke-dasharray: 3 3; }
.chart .aline3 { fill: none; stroke: #10A8C8; stroke-width: 2; }
.chart .hot { fill: var(--night); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ───────── вход: ночная панель со знаком и мглой + светлая форма ───────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr); background: var(--paper); }
.auth .night { position: relative; overflow: hidden; background: #07090F; color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
/* фиолетовые пятна мглы с панели убраны: под картинку не подходили — фон теперь почти чёрный, как у неё */
.auth .night > * { position: relative; z-index: 1; }
.auth .night .wm { height: 18px; width: 77.4px; color: #fff; display: block; }
/* богиня Мглы: холст WebGL на всю панель (web/goddess.js), под текстом. Без WebGL — неподвижная картинка .gd-still,
   тонированная фильтром в то же холодное серебро. */
.auth .night > .gd { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.auth .night .gd-still { position: absolute; right: 0; top: 0; height: 100%; mix-blend-mode: screen;
  filter: sepia(1) hue-rotate(185deg) saturate(.7) brightness(.95);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
/* цитата Гигина — латынь антиквой: римская надпись просится в засечки, Geologica тут чужая. Шрифты системные
   (Didot/Bodoni на Mac, Georgia на Windows): внешние шрифты закрыты CSP. */
.auth .night .gd-quote { margin: auto 0 0; max-width: 460px; position: relative; font-family: "Didot", "Bodoni 72", "Bodoni MT", "Baskerville", "Iowan Old Style", "Palatino", Georgia, serif; }
.auth .night .gd-quote::before { content: ""; position: absolute; z-index: -1; inset: -70px -60px -60px -80px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 9, 15, .85), rgba(7, 9, 15, .5) 60%, transparent); }
.auth .night .gd-quote blockquote { margin: 0; }
.auth .night .gd-quote p { margin: 0; color: #EEF1FA; font-style: italic; }
.auth .night .gd-quote .q1 { font-size: 44px; line-height: 1.05; letter-spacing: .005em; }
.auth .night .gd-quote .q2 { margin-top: 14px; font-size: 19px; line-height: 1.45; color: #B8C0D8; }
.auth .night .gd-quote figcaption { margin-top: 18px; font-size: 13px; letter-spacing: .06em; color: #6E7690; font-variant: small-caps; }
/* одна колонка — только на телефоне: богиня сверху, форма под ней, цитата мельче */
@media (max-width: 720px) { .auth { grid-template-columns: 1fr; } .auth .night { padding: 28px 24px; min-height: 380px; }
  .auth .night .gd-quote .q1 { font-size: 30px; } .auth .night .gd-quote .q2 { font-size: 15px; } }
.auth .formside { display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative; overflow: hidden; }
.auth .box { width: 100%; max-width: 380px; position: relative; z-index: 1; }
/* 5.33: мгла у формы (web/mist.js) — холст под формой; без WebGL — дымка градиентом у шва, шире по мере вписанного */
.auth .formside > .mist { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.auth .formside > .mist-still { --mist: .12; background: radial-gradient(ellipse calc(40% + 90% * var(--mist)) 42% at 0 100%, rgba(14, 18, 48, .16), transparent 70%);
  transition: background-size .8s var(--ease); }
@media (max-width: 720px) { .auth .formside > .mist-still { background: radial-gradient(ellipse 90% calc(20% + 60% * var(--mist)) at 50% 0, rgba(14, 18, 48, .14), transparent 70%); } }
.auth .box .brand { display: none; }
.auth form h2, .auth .pad h2 { font-size: 24px; margin-bottom: 6px; }
.auth .err { color: var(--bad); min-height: 18px; font-size: 12.5px; margin: 2px 0 10px; }
.auth .foot-note { margin-top: 28px; font-size: 12px; color: var(--muted); }
.auth .btn.pri { padding: 11px; font-size: 14px; }
.auth input { padding: 10px 12px; font-size: 14px; }
.codein { font-size: 26px !important; letter-spacing: .5em; text-align: center; font-family: var(--mono); padding: 12px !important; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--iris-soft); border-top-color: var(--iris); animation: spin 1s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.colpick { position: absolute; z-index: 25; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: 8px 12px; min-width: 200px; }
.colpick label.chk { display: flex; margin: 5px 0; }

.burger { display: none; }
.sidescrim { display: none; }

/* ───────── списки: панель, период, быстрый поиск, фильтры ───────── */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .search input { width: 280px; }
.period { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.period input[type=date] { width: 138px; }
.btn.icon { width: 36px; padding: 7px 0; position: relative; }
.btn .badge { position: absolute; top: -7px; right: -7px; background: var(--night); color: #fff; border-radius: 9px; font-size: 10.5px; min-width: 18px; line-height: 18px; padding: 0 5px; font-weight: 650; box-shadow: 0 0 0 2px var(--haze); }
.btn.link { border-color: transparent; background: none; box-shadow: none; }
.btn.link:hover { background: none; text-decoration: underline; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.fchips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 2px; background: var(--paper); color: var(--night); border: 1px solid var(--iris-line); border-radius: 20px; padding: 2px 4px 2px 11px; font-size: 12.5px; font-weight: 550; }
.fchip button { border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; padding: 3px; border-radius: 50%; }
.fchip button:hover { background: var(--bad-soft); color: var(--bad); }
.tabs2 { display: flex; gap: 2px; flex-wrap: wrap; margin: -6px 0 18px; border-bottom: 1px solid var(--line); }
.tabs2 a { padding: 9px 12px; color: var(--muted); font-weight: 550; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.tabs2 a:hover { color: var(--ink); text-decoration: none; }
.tabs2 a.on { color: var(--night); border-bottom-color: var(--night); }

.pshade { position: fixed; inset: 0; z-index: 55; background: rgba(14, 18, 48, 0); transition: background .2s; }
.pshade.in { background: rgba(14, 18, 48, .22); }
.fpanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); display: flex; flex-direction: column; transform: translateX(28px); opacity: 0; transition: transform .24s var(--ease), opacity .2s; }
.pshade.in .fpanel { transform: none; opacity: 1; }
.fp-h { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.fp-h h2 { margin: 0; font-size: 19px; }
.fp-h .search input { width: 100%; }
.fp-b { flex: 1; overflow-y: auto; padding: 4px 0 24px; }
.fp-g { border-bottom: 1px solid var(--grid); padding: 6px 0 8px; }
.fp-gt { display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-weight: 600; font-size: 15px; padding: 12px 22px 6px; cursor: pointer; color: var(--night); font-variation-settings: "SHRP" 100; }
.fp-gt svg { transition: transform .2s var(--ease); color: var(--muted); }
.fp-g.shut .fp-gt svg { transform: rotate(180deg); }
.fp-g.shut .fp-i { display: none; }
.fp-it { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 14px; padding: 10px 22px; cursor: pointer; color: var(--ink); text-align: left; }
.fp-it:hover { background: var(--hover); }
.fp-it span { flex: 1; }
.fp-i.on .fp-it span { font-weight: 600; }
.fp-n { background: var(--night); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; line-height: 18px; }
.pm { width: 14px; height: 14px; position: relative; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--iris); }
.pm::after { transform: rotate(90deg); transition: transform .18s var(--ease); }
.fp-i.open .pm::after { transform: rotate(0); }
.fp-c { display: none; padding: 0 22px 14px; }
.fp-i.open .fp-c { display: block; }
.fp-c > input { width: 100%; }
/* 5.0: Include / Exclude и Empty у поля фильтра */
.fp-c .seg { margin-bottom: 8px; }
.fp-c .seg.ie span { min-width: 72px; text-align: center; }
.fp-x { color: var(--bad); font-weight: 700; font-size: 13px; }
.fchip.neg { background: var(--bad-soft, #fdecec); }
/* карточки выбора (радио-карточки: Fake / Manual) */
.rcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcard { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 12px 38px; cursor: pointer; }
.rcard input { position: absolute; left: 14px; top: 15px; }
.rcard span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rcard:has(input:checked) { border-color: var(--iris); box-shadow: 0 0 0 1px var(--iris) inset; background: var(--hover); }
@media (max-width: 720px) { .rcards { grid-template-columns: 1fr; } }
.fp-f { padding: 14px 22px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.fp-f .btn.pri { width: 100%; padding: 11px; font-size: 14px; }
.fp-f .btn.link { font-size: 14px; }

.ms { border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.ms-s { position: relative; border-bottom: 1px solid var(--grid); }
.ms-s svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.ms-s input { border: 0; border-radius: 0; width: 100%; padding: 9px 10px 9px 32px; box-shadow: none !important; }
.ms-all { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--grid); font-weight: 600; cursor: pointer; }
.ms-l { max-height: 250px; overflow-y: auto; }
.ms-o { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--grid); cursor: pointer; }
.ms-o:last-child { border-bottom: 0; }
.ms-o:hover { background: var(--iris-soft); }
.ms-o img.flag { width: 14px; height: 14px; }
.seg label { display: inline-flex; margin: 0; }
.seg label input { display: none; }
.seg label span { padding: 5px 12px; font-size: 12.5px; color: var(--muted); cursor: pointer; font-weight: 550; border-radius: 7px; }
.seg label input:checked + span { background: var(--night); color: #fff; }

.pop { position: absolute; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); padding: 14px 16px 6px; }
.pop-h { font-weight: 600; font-size: 14px; margin-bottom: 12px; color: var(--night); font-variation-settings: "SHRP" 100; }
.pop.menu { right: auto; left: auto; bottom: auto; padding: 6px; min-width: 230px; }
.pop.menu button { border-radius: 8px; padding: 8px 10px; }
.pop.menu button.danger { color: var(--bad); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
div.tl { display: grid; grid-template-columns: 12px 1fr; gap: 10px; position: relative; padding-bottom: 12px; font-size: 13px; }
div.tl > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: 4px; box-shadow: 0 0 0 3px var(--paper); position: relative; z-index: 1; }
div.tl:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: -2px; width: 2px; background: var(--grid); }
.tlbox { margin-bottom: 8px; }

.cs { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; font-size: 13px; color: var(--ink); white-space: nowrap; }
.cs i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.cs.unk { color: var(--muted); font-weight: 500; }
.cs.unk i { background: transparent; border: 1.5px solid var(--faint); box-shadow: none; box-sizing: border-box; width: 9px; height: 9px; }  /* 5.22: пунктир на 8 px выглядел битым значком */
.csline { display: flex; align-items: center; gap: 4px; }
.eye { border: 0; background: none; color: var(--iris); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; }
.eye:hover { background: var(--iris-soft); }
.dot.big { width: 10px; height: 10px; margin: 0; flex: none; }
.dot.st-new, .dot.st-sent, .dot.st-job { background: var(--iris); }
.dot.st-queue, .dot.st-hold { background: var(--warn); }
.dot.st-approved { background: var(--ok); }
.dot.st-rejected, .dot.st-error { background: var(--bad); }
.dot.st-trash, .dot.st-duplicate, .dot.st-invalid, .dot.st-expired { background: var(--idle); }
tr.unk td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; }
.sw.on { box-shadow: 0 0 0 2px var(--night); }
.swatches input[type=color] { width: 36px; height: 28px; padding: 2px; }
#actbtn svg.i, #la-menu svg.i { transform: rotate(180deg); }
/* 5.56: chev нарисован вверх — у Back на странице лида он смотрит влево, как у «Back to distribution» (там — в shell.js). Было: стрелка вверх */
.jr-head > a.btn.icon svg.i { transform: rotate(-90deg); }
.f .swatches input[type=color] { width: 36px; height: 28px; padding: 2px; flex: none; }

.lhead { gap: 8px; }
.lhead h1 { margin-right: 4px; }
.btn.icon.ghost { border-color: transparent; color: var(--muted); }
.btn.icon.ghost:hover { color: var(--ink); background: var(--paper); border-color: var(--line); }
.pbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pb { font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.pb:hover { background: var(--hover); }
.pb.on { background: var(--night); color: #fff; border-color: var(--night); }
.pbar .dates { display: inline-flex; align-items: center; gap: 4px; }
.pbar input[type=date] { width: 136px; }
.qsearch { display: flex; }
.qsearch select { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; max-width: 130px; background: var(--paper-2); }
.qsearch input { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 240px; }
.fstrip { display: flex; align-items: center; gap: 8px; background: rgba(76, 77, 255, .06); border: 1px solid var(--iris-line); border-radius: var(--r); padding: 8px 12px; margin-bottom: 12px; }
.fstrip .fchips { margin: 0; }
img.flag.sm { width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; }
.lng { display: inline-flex; align-items: center; font-weight: 550; font-size: 12.5px; color: var(--ink-2); }
.review td { padding: 4px 6px; }
.review input { padding: 5px 7px; font-size: 12.5px; min-width: 90px; }
.review input.changed { border-color: var(--iris); background: var(--iris-soft); }
.review tr.dropped td { opacity: .4; text-decoration: line-through; }
.permgrid { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 4px 0 8px; }
.permgrid label.chk { align-items: center; margin: 0; }
.permgrid select { width: 92px; padding: 4px 6px; font-size: 12px; }
.neg { color: var(--bad); }
.tabs2.big a { font-size: 13.5px; padding: 10px 14px; gap: 8px; }
.tabs2.big a svg.i { color: currentColor; }
select.sm { padding: 4px 8px; font-size: 12.5px; }
.colgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.colgrid label.chk { margin: 0; }

/* ───────── дашборд: поток дня (гео → рекламодатель → итог) ───────── */
.flowhero { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 18px; margin-bottom: 16px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.flowhero .fh-top { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 14px; }
.flowhero .fh-top h2 { margin: 0; font-size: 17px; }
.flowhero .fh-top .sub { margin-top: 2px; }
.fh-steps { display: flex; gap: 0; margin-left: auto; align-items: stretch; }
.fh-step { padding: 2px 20px; border-left: 1px solid var(--grid); min-width: 104px; }
.fh-step:first-child { border-left: 0; }
.fh-step .v { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--night); font-variant-numeric: tabular-nums; font-variation-settings: "SHRP" 100; line-height: 1.1; }
.fh-step .l { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.fh-step .l b { color: var(--ok); font-weight: 600; }
.fh-step.ftd .v { color: var(--ok); }
.sankey { width: 100%; display: block; overflow: visible; }
.sankey .node { fill: var(--night); }
.sankey .node.ok { fill: var(--ok); } .sankey .node.bad { fill: var(--bad); } .sankey .node.hold { fill: var(--warn); } .sankey .node.idle { fill: var(--idle); }
.sankey .lnk { fill: none; stroke-opacity: .2; transition: stroke-opacity .2s; }
.sankey .lnk:hover { stroke-opacity: .45; }
.sankey .lbl { font-size: 12px; fill: var(--ink); font-family: var(--font); }
.sankey .lbl tspan.n { fill: var(--muted); font-variant-numeric: tabular-nums; }
.sankey .col { font-size: 11.5px; fill: var(--muted); font-family: var(--font); }
.sankey.draw .lnk { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: drawin 1.3s var(--ease) forwards; }
@keyframes drawin { to { stroke-dashoffset: 0; } }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 58px 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.feed .who { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); }
/* 5.21: многоточие — только у имени, бейдж Test целиком. Было: бейдж жил внутри обрезаемой строки и у длинного имени
   («Test Advertiser (fallback)») на 1440 срезался целиком — тестовый лид в ленте выглядел настоящим */
.feed .who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.feed .who .b { flex-shrink: 0; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.mini > div { padding: 2px 16px; border-left: 1px solid var(--grid); }
.mini > div:first-child { border-left: 0; padding-left: 0; }
.mini .v { font-size: 20px; font-weight: 600; color: var(--night); font-variation-settings: "SHRP" 100; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mini .l { font-size: 12px; color: var(--muted); }

/* ───────── Rotation Control: дерево папок строками ───────── */
.rtree { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.rt-head, .rt-row { display: grid; grid-template-columns: minmax(280px, 2.2fr) minmax(170px, 1.4fr) 150px 170px 132px; align-items: center; gap: 0; }
.rt-head { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 550; color: var(--muted); }
.rt-head > div { padding: 10px 14px; white-space: nowrap; }
.rt-row { border-bottom: 1px solid var(--grid); min-height: 50px; position: relative; transition: background .12s; }
.rt-row:last-child { border-bottom: 0; }
.rt-row:hover { background: #F8F9FD; }
.rt-row > div { padding: 8px 14px; min-width: 0; }
.rt-row.off { opacity: .55; }
.rt-row.drop-before { box-shadow: inset 0 2px 0 var(--iris); }
.rt-row.drop-in { background: var(--iris-soft); }
.rt-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* «терминальные» линии дерева: у каждого уровня своя вертикаль, у строки — отвод */
.rt-ind { display: flex; align-self: stretch; flex: none; margin: -8px 0; }
.rt-ind i { width: 22px; position: relative; flex: none; }
.rt-ind i.v::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.rt-ind i.t::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.rt-ind i.l::before { content: ""; position: absolute; left: 10px; top: 0; height: 50%; border-left: 1px solid var(--line-2); }
.rt-ind i.t::after, .rt-ind i.l::after { content: ""; position: absolute; left: 10px; top: 50%; width: 11px; border-top: 1px solid var(--line-2); }
.rt-tog { width: 22px; height: 22px; border: 0; background: none; border-radius: 6px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: transform .2s var(--ease), background .12s; }
.rt-tog:hover { background: var(--haze); color: var(--ink); }
.rt-tog svg.i { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s var(--ease); }
.rt-row.open .rt-tog svg.i { transform: rotate(180deg); }
.rt-tog.none { visibility: hidden; }
.rt-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 650; font-size: 12px; font-variation-settings: "SHRP" 100; }
.rt-ico.folder { background: var(--night); color: var(--glint); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); border-radius: 3px; }
.rt-ico.folder svg.i { width: 15px; height: 15px; }
.rt-ico.adv { background: var(--iris-soft); color: var(--iris-600); }
.rt-ico.adv.bad { background: var(--bad-soft); color: var(--bad); }
.rt-t { min-width: 0; }
.rt-t b { display: block; font-weight: 600; color: var(--night); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: "SHRP" 100; }
.rt-t span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-pos { font-size: 11px; font-weight: 650; color: var(--muted); width: 18px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.rt-rule { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-rule .chip { padding: 1px 8px; font-size: 11.5px; gap: 5px; }
.rt-rule .chip img.flag { width: 13px; height: 13px; }
.rt-cap { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rt-cap b { font-weight: 600; color: var(--night); }
.rt-cap .bar { min-width: 0; width: 110px; margin-top: 5px; }
.rt-now { font-size: 12.5px; line-height: 1.35; }
.rt-now .faint { font-size: 11.5px; }
.rt-act { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.rt-act .btn.sm { padding: 4px 7px; }
.rt-act .switch { margin-right: 4px; }
.rt-add { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px dashed var(--line); background: var(--paper-2); }
.rt-child-add { font-size: 12.5px; color: var(--iris); display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; border: 0; background: none; font: inherit; }
.rt-child-add:hover { text-decoration: underline; }
.rt-row.addrow { min-height: 38px; }
.rt-row.addrow:hover { background: none; }
.rt-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.rt-bar .search input { width: 260px; }
.rt-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-left: auto; }

/* ───────── адаптив ───────── */
@media (max-width: 1320px) { .rt-head, .rt-row { grid-template-columns: minmax(250px, 2fr) minmax(150px, 1.2fr) 130px 150px 120px; } }
@media (max-width: 1280px) { .kpis:not(.k4) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis:not(.k4) .kpi:nth-child(3) { border-right: 0; } .kpis:not(.k4) .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--grid); } .grid3 { grid-template-columns: 1fr 1fr; } .g21 { grid-template-columns: 1fr; } .fh-steps { margin-left: 0; } }
/* 5.65 (ревью интерфейса): колонку деревьев на ≤1180 больше не прячем. Было: правило писалось для старого дерева, а теперь все деревья
   (Rotation, Lead Forwarding, деньги) пятиколоночные, и четвёртой колонкой у них идёт переключатель Active — на ноутбуке 1180 им было
   нечем включить или выключить узел */
@media (max-width: 1180px) { .qsearch input { width: 180px; } .rtree.money .rt-head, .rtree.money .rt-row { grid-template-columns: minmax(200px, 2fr) minmax(130px, 1.1fr) minmax(150px, 1.1fr) 64px 112px; } }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: 60px; z-index: 46; transform: translateX(-100%); transition: transform .2s var(--ease); }
  .side { position: fixed; left: 60px; top: 0; bottom: 0; width: 270px; z-index: 45; transform: translateX(calc(-100% - 60px)); transition: transform .2s var(--ease); }
  .app.navopen .rail, .app.navopen .side { transform: none; }
  .app.navopen .side { box-shadow: 8px 0 24px rgba(14, 18, 48, .15); }
  .app.navopen .sidescrim { display: block; position: fixed; inset: 0; background: rgba(14, 18, 48, .3); z-index: 44; }
  .burger { display: inline-flex; }
  .live span { display: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .content { padding-left: 16px; padding-right: 16px; } .topbar { padding: 0 16px; }
  .kpis, .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { border-bottom: 1px solid var(--grid); } .kpi:nth-child(2n) { border-right: 0; } .kpi:nth-child(3) { border-right: 1px solid var(--grid); }
  .dl { grid-template-columns: 110px 1fr; }
  .toolbar .search input { width: 100%; } .toolbar .search { flex: 1 1 100%; }
  .qsearch { flex: 1 1 100%; } .qsearch input { width: 100%; }
.rtree { overflow-x: auto; } .rt-head, .rt-row { min-width: 640px; }
  .menu { left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sankey.draw .lnk { stroke-dashoffset: 0; }
}

/* выбор чипами: выбранное — чипами над списком «+ Add» */
.cpick { display: flex; flex-direction: column; gap: 6px; }
.cpick .chips:empty { display: none; }
.cpick .chip { padding: 2px 4px 2px 9px; gap: 6px; font-size: 12.5px; }
.cpick .chip img.flag { width: 13px; height: 13px; }
.cpick select { color: var(--muted); }
.cx { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 50%; }
.cx:hover { color: var(--bad); background: var(--bad-soft); }
.fold { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 6px 0 14px; background: var(--paper-2); }
.fold > summary { cursor: pointer; font-weight: 600; color: var(--night); list-style: none; display: flex; align-items: center; gap: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { margin-bottom: 12px; }
.rt-now .faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-now { min-width: 0; }

/* код реджекта — точка цвета группы, как у статусов */
.b.errc { background: color-mix(in srgb, var(--c) 10%, #fff); color: color-mix(in srgb, var(--c) 72%, #000); font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.b.errc i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.border-order { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; font-size: 12.5px; }
.border-order .step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.border-order .step b { font-weight: 600; }
.border-order .arr { color: var(--faint); }

/* конструктор правил */
.rb-grp { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--paper-2); }
.rb-grp .rb-grp { background: var(--paper); margin: 6px 0; }
.rb-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rb-gh select { width: auto; font-weight: 600; }
.rb-items { display: flex; flex-direction: column; gap: 6px; }
.rb-row { display: grid; grid-template-columns: 180px 130px minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.rb-row .rb-v input:not([type=checkbox]) { width: 100%; }
@media (max-width: 980px) { .rb-row { grid-template-columns: 1fr 1fr; } .rb-row .rb-v { grid-column: 1 / -1; } }

/* 3.4: полоса статуса слева у строки лида — статус виден боковым зрением, не читая бейджи;
   пунктир — тестовый лид (не идёт в отчёты и выплаты) */
tr[data-st] > td:first-child { box-shadow: inset 3px 0 0 var(--st, transparent); }
tr[data-st=new], tr[data-st=sent] { --st: var(--iris-line); }
tr[data-st=approved] { --st: var(--ok); }
tr[data-st=hold], tr[data-st=queue] { --st: var(--warn-line); }
tr[data-st=rejected], tr[data-st=error], tr[data-st=invalid], tr[data-st=expired] { --st: var(--bad-line); }
tr[data-st=trash], tr[data-st=duplicate] { --st: var(--idle-line); }
tr.test > td:first-child { box-shadow: none; background-image: repeating-linear-gradient(180deg, var(--warn) 0 4px, transparent 4px 8px);
  background-size: 3px 100%; background-repeat: no-repeat; }
.seg.wide { display: flex; flex-wrap: wrap; }
.seg.wide label { flex: 1 1 auto; }
.seg.wide label span { display: block; text-align: center; }
/* карточка рекламодателя: подмена доступов */
.ovr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--paper); }
.ovr .ovr-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ovr .ovr-h input { max-width: 280px; font-weight: 600; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 22px 130px 1fr; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.steps li:last-child { border-bottom: 0; }
.steps li b { font-weight: 600; }
.steps .ok { color: var(--ok); } .steps .bad { color: var(--bad); }

/* 3.5: CRM Deduplication — отдельная карточка над правилами; включённая светится «ночной» полосой */
.card.crm { position: relative; overflow: hidden; }
.card.crm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--idle-line); }
.card.crm.on::before { background: linear-gradient(180deg, var(--iris), var(--ok)); }
.crm-t { display: flex; align-items: center; gap: 10px; }
.crm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle-line); box-shadow: 0 0 0 3px var(--idle-soft); }
.card.crm.on .crm-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft), 0 0 12px rgba(10, 143, 104, .55); }
.crm-ex { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.crm-ex > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.crm-ex .small.muted { flex-basis: 100%; }
.crm-ex .chip b.ok { color: var(--ok); } .crm-ex .chip b.bad { color: var(--bad); }
@media (max-width: 900px) { .crm-ex { grid-template-columns: 1fr; } }
/* белый список ключа: адреса строками, подсказки «откуда реально стучались» */
.ipl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ipr { display: flex; gap: 6px; align-items: center; } .ipr input { max-width: 320px; }
.seen-r { display: flex; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.seen-r:last-child { border-bottom: 0; }
.card.egress { background: linear-gradient(135deg, var(--paper) 60%, var(--iris-soft)); }
.ipchip .mono { font-weight: 600; letter-spacing: .01em; }

/* 3.6: карта «Откуда лиды» — точечная сетка мира; суша без лидов — чуть темнее мглы, страны с лидами — от Iris к Night */
.card.geo .ch { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.geo-body { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 22px; align-items: start; }
.geo-map { position: relative; min-width: 0; }
.geo-map svg { display: block; width: 100%; height: auto; }
.geo-map path { fill: #E1E5EF; transition: fill .35s var(--ease); cursor: default; }
.geo-map path.t1 { fill: #D2D7E6; } .geo-map path.t2 { fill: #EAEDF4; } .geo-map path.t3 { fill: #D9DEEA; }
.geo-map path.on { cursor: pointer; }
.geo-map path:hover { stroke: var(--night); stroke-width: .9; }
.geo-map path.ping { animation: geoPing 1.8s var(--ease) 1; }
@keyframes geoPing { 0% { stroke: var(--glint); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(47, 212, 245, .95)); }
  100% { stroke: transparent; stroke-width: 0; filter: none; } }
@media (prefers-reduced-motion: reduce) { .geo-map path.ping { animation: none; } .geo-map path { transition: none; } }
.geo-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 168px; background: var(--night); color: #fff; border-radius: 10px;
  padding: 9px 12px 8px; box-shadow: var(--shadow-3); font-size: 12.5px; }
.geo-tip .gt-h { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-variation-settings: "SHRP" 100; }
.geo-tip .gt-r { display: flex; justify-content: space-between; gap: 14px; color: var(--night-text); }
.geo-tip .gt-r b { color: #fff; font-variation-settings: "SHRP" 100; font-weight: 600; }
.geo-leg { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.geo-leg i { width: 22px; height: 7px; border-radius: 2px; }
.geo-leg span { margin: 0 5px; }
.geo-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.geo-top button { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  background: none; border: 0; border-radius: var(--r-sm); padding: 7px 8px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.geo-top button:hover { background: var(--hover); }
.geo-top .cc { grid-row: 1 / span 2; font-size: 0; gap: 0; }
.geo-top .gn { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-top .gv { font-variation-settings: "SHRP" 100; font-weight: 600; color: var(--night); }
.geo-top .gb { grid-column: 2; height: 4px; background: var(--idle-soft); border-radius: 2px; overflow: hidden; }
.geo-top .gb i { display: block; height: 100%; background: linear-gradient(90deg, var(--iris), var(--night)); border-radius: 2px; }
.geo-top .gc { grid-column: 3; font-size: 11.5px; color: var(--muted); text-align: right; }
.geo-none { color: var(--muted); font-size: 12.5px; padding: 8px; }
@media (max-width: 1180px) { .geo-body { grid-template-columns: 1fr; } .geo-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .geo-top { grid-template-columns: 1fr; } }
.geo-tip .cc { font-size: 0; gap: 0; }

/* 3.6: What's new — лента версий слева (линия и узлы: это последовательность), выпуск справа */
.side .foot .relink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; min-width: 0; }
.side .foot .relink .rl { color: var(--iris); font-weight: 550; }
.side .foot .relink span { white-space: nowrap; }   /* «What's new» ломалось на две строки рядом с версией и поясом */
.side .foot .relink:hover .rl { text-decoration: underline; text-underline-offset: 3px; }
.side .foot .relink i { width: 7px; height: 7px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 0 3px var(--glint-soft); flex: none; }
/* 5.50.1: список версий и запись — два окна прокрутки на высоту экрана (высоту ставит p_releases.js); страница целиком не листается */
.rel { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; }
.rel-side, .rel-main { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }  /* min-width: 0 — на узком экране строка версий иначе раздувает колонку на всю свою длину */
.rel-side { padding-left: 8px; }  /* место под точки линии времени — иначе их срезает край прокрутки */
.rel-main { padding: 0 3px 3px 0; }
.content:has(> .rel) { padding-bottom: 20px; }
.rel-tl { list-style: none; margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--line-2); }
.rel-tl li { position: relative; }
.rel-tl a { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.rel-tl a::before { content: ""; position: absolute; left: -24px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); }
.rel-tl a:hover { background: var(--hover); }
.rel-tl a.on { background: var(--night); color: #fff; }
.rel-tl a.on::before { background: var(--glint); border-color: var(--night); box-shadow: 0 0 0 3px var(--glint-soft); }
.rel-tl .rv { font-variation-settings: "SHRP" 100; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.rel-tl .b { justify-self: start; align-self: center; }
.rel-tl .rt { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.rel-tl a.on .rt { color: var(--night-text); }
.rel-tl .rd { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.rel-card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-1); border: 1px solid var(--line); overflow: hidden; }
.rel-art { background: radial-gradient(120% 90% at 20% 10%, var(--iris-soft), var(--haze) 60%); border-bottom: 1px solid var(--line); padding: 10px 0; }
.rel-art svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: var(--font); }
.rel-h { padding: 22px 28px 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.rel-v { font-variation-settings: "SHRP" 100; font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--night); }
.rel-h h2 { margin: 0; font-size: 19px; flex-basis: 100%; }
.rel-was, .rel-p, .rel-ul { margin: 12px 28px; max-width: 76ch; }
.rel-was { color: var(--ink-2); background: var(--bad-soft); border-left: 3px solid var(--bad-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 11px 14px; }
.rel-ul { padding-left: 18px; }
.rel-ul li { margin: 7px 0; line-height: 1.55; }
.rel-ul li::marker { color: var(--iris); }
.rel-card > :last-child { margin-bottom: 26px; }
@media (max-width: 1000px) { .rel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .rel-side, .rel-main { overflow: visible; padding: 0; } .rel-tl { position: static; display: flex; overflow-x: auto; border-left: 0; border-bottom: 2px solid var(--line-2); padding: 0 0 6px; gap: 4px; }
  .rel-tl a { white-space: nowrap; } .rel-tl a::before { display: none; } .rel-tl .rt, .rel-tl .rd { display: none; } }
.cm-r { display: grid; grid-template-columns: 150px 1fr 1.6fr 110px 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
@media (max-width: 900px) { .cm-r { grid-template-columns: 1fr 1fr; } }

/* 3.7: Data Exporter — колонки группами (карточки с галочкой группы), режим Arrange — порядок колонок в файле */
.cgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cgroup { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--paper-2); display: flex; flex-direction: column; gap: 2px; }
.cgroup .cg-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; cursor: pointer; }
.cgroup .cg-h .faint { margin-left: auto; }
.arr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.arr li { display: grid; grid-template-columns: 18px 26px 1fr 28px 28px; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 8px; cursor: grab; }
.arr li .grip { color: var(--faint); letter-spacing: -2px; }
.arr li .n { font-variation-settings: "SHRP" 100; font-weight: 600; color: var(--muted); font-size: 12px; }
.arr li:active { cursor: grabbing; box-shadow: var(--shadow-2); }

/* 3.7: Insights — строки с цветной меткой серьёзности; действие одно — перейти и поправить */
.ins-l { list-style: none; margin: 0; padding: 0; }
.ins-l li { display: grid; grid-template-columns: 10px 1fr auto 26px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ins-l li:last-child { border-bottom: 0; }
.ins-l li > i { width: 8px; height: 8px; border-radius: 50%; background: var(--iris); }
.ins-l li.bad > i { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.ins-l li.warn > i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.ins-l li.pri > i { box-shadow: 0 0 0 3px var(--iris-soft); }
.ins-l .t { line-height: 1.5; }
.card.ins.compact { padding-top: 12px; padding-bottom: 8px; }
.card.ins.compact .ch { margin-bottom: 2px; }
/* 3.8: раскрытие контакта по клику */
.rvbtn { border: 0; background: none; padding: 0 0 0 4px; color: var(--iris); cursor: pointer; vertical-align: -2px; }
.rvbtn:hover { color: var(--night); }
.revealed { background: var(--warn-soft); border-radius: 4px; padding: 0 3px; }
/* 3.8: меню свёрнуто — остаётся только рельса */
/* скрытая боковая панель выпадает из сетки — поэтому колонок две, а не «60px 0 1fr» (иначе контент уезжал в нулевую колонку) */
@media (min-width: 981px) { .app.navhide { grid-template-columns: 60px minmax(0, 1fr); } .app.navhide .side { display: none; } }
@media (max-width: 980px) { #r-hide { display: none; } }
/* 3.9: плейсхолдеры по клику */
.phbox .phg { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; }
.phbox .phg > .small { width: 64px; flex: none; }
.phbox .chip { font-family: var(--mono); font-size: 11.5px; cursor: pointer; }

/* 4.1 — Security: состояние сервера. Точка слева — статус проверки; сетка сама перестраивается под ширину */
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.hl { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.hl > div { min-width: 0; }
.hl i { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.hl.warn i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.hl.crit i { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

/* 4.3 — строки счёта: описание забирает всё место, количество и сумма — узкие колонки справа */
.inv-lines { table-layout: fixed; width: 100%; }
.inv-lines th:nth-child(2), .inv-lines td:nth-child(2) { width: 96px; }
.inv-lines th:nth-child(3), .inv-lines td:nth-child(3) { width: 160px; }
.inv-lines th:nth-child(4), .inv-lines td:nth-child(4) { width: 36px; }
.inv-lines td input { width: 100%; box-sizing: border-box; }
.inv-lines td input.n { text-align: right; }
.inv-lines td:first-child { overflow-wrap: anywhere; }

/* 4.3 — страница лида: путь одной лентой. Время слева, рельс с точкой цвета исхода, справа — что случилось */
a.lk { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line-2); }
a.lk:hover { color: var(--iris); border-bottom-color: var(--iris); }
.jr-head { flex-wrap: wrap; gap: 8px; align-items: center; }
.jr-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }   /* 5.44: email и UUID переносятся, а не растягивают страницу */
.jr-head h1 .jr-nm { overflow-wrap: anywhere; }
.jr-uuid { font-size: 12.5px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.jr-nm { font-weight: 500; color: var(--muted); }   /* 5.43: имя лида в заголовке карточки — рядом с номером */
.jr-meta { color: var(--muted); font-size: 13px; margin: -6px 0 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.jr-actions { flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.jr-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.jr-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.jr-step > b { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; background: var(--haze); color: var(--ink-2); }
.jr-step.ok { border-color: var(--ok); } .jr-step.ok > b { background: var(--ok); color: #fff; }
.jr-step.fail > b { background: var(--bad); color: #fff; } .jr-step.unknown > b { background: var(--warn); color: #fff; }
.jr-arr { color: var(--faint); }
.jr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.jr-side { position: sticky; top: 12px; }
.jr-side .dl dd { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .jr-grid { grid-template-columns: minmax(0, 1fr); } .jr-side { position: static; } }
ol.jr { list-style: none; margin: 14px 0 0; padding: 0; }
.jr-it { display: grid; grid-template-columns: 112px 18px minmax(0, 1fr); gap: 0 10px; position: relative; padding-bottom: 14px; }
.jr-it::before { content: ""; position: absolute; left: 130px; top: 14px; bottom: -2px; width: 2px; background: var(--line); }
.jr-it:last-child::before { display: none; }
.jr-t { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.35; padding-top: 2px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.jr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin: 4px 0 0 3px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--c); position: relative; z-index: 1; }
.jr-it.info .jr-dot { background: var(--paper); border: 2px solid var(--c); box-shadow: 0 0 0 3px var(--paper); width: 12px; height: 12px; box-sizing: border-box; }
.jr-title { font-weight: 600; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jr-it.bad .jr-title { color: var(--bad); } .jr-it.ok .jr-title { color: var(--ok); }
.jr-text { font-size: 13px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.jr-det { margin-top: 6px; }
.jr-det > summary { cursor: pointer; font-size: 12px; color: var(--iris); }
.jr-det pre { max-height: 360px; overflow: auto; }
@media (max-width: 720px) { .jr-it { grid-template-columns: 70px 18px minmax(0, 1fr); } .jr-it::before { left: 88px; } }
/* 5.0: значки в заголовке колонки (Protected / Editable) и правка в ячейке */
th .thic { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--muted); }
th .thic svg { width: 13px; height: 13px; }
/* правка в ячейке: у узких колонок (.ell — max-width 240, overflow hidden) кнопка «×» уезжала за край и резалась —
   на время правки ячейка снимает свои ограничения, а поле берёт ширину от ячейки, а не своё size=20 */
td:has(> .ied) { max-width: none; overflow: visible; white-space: nowrap; }
.ied { display: flex; align-items: center; gap: 4px; min-width: 240px; }
.ied input { flex: 1; width: 0; min-width: 120px; padding: 4px 8px; font-size: 13px; }
td[data-ed] { cursor: text; }
.pager .pg { display: inline-flex; align-items: center; gap: 6px; }
.pager .pg-n { width: 46px; text-align: center; padding: 4px 6px; }
.navmore .nmore-h { font-size: 11px; text-transform: none; color: var(--muted); padding: 10px 14px 4px; }
.fchip.lock { background: var(--paper-2); color: var(--muted); }
.fchip.lock svg { width: 12px; height: 12px; margin-right: 2px; }
/* 5.0: страница лида — вкладки, четыре карточки, Lead Profile по группам, Last Statuses, Log Meta */
.ltabs { margin: 4px 0 14px; }
/* карточки 2×2: четыре в ряд на 1440 давали колонку ~240 px, подпись «Is AutoLogin Successful» (auto) съедала её,
   и значения ломались по букве в строку («E m pt y»). Четыре в ряд — только когда места хватает на всех. */
.lcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.lcards .card { margin: 0; }
.lcards h3 { margin: 0 0 10px; font-size: 14px; }
.lcards .dl { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); }
.lcards .dl dd { overflow-wrap: break-word; min-width: 0; }
@media (min-width: 2100px) { .lcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .lcards { grid-template-columns: minmax(0, 1fr); } }
.lprof { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; }
.lprof-g { font-weight: 600; font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; }
table.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kv td { padding: 6px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.kv td:first-child { width: 46%; color: var(--ink-2); }
table.kv td:last-child { overflow-wrap: anywhere; }
.lstat { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.lstat-c { min-width: 170px; max-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.jr-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 12.5px; }
.lmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lmeta pre { max-height: 60vh; overflow: auto; }
@media (max-width: 900px) { .lmeta { grid-template-columns: 1fr; } }
.netbar { position: fixed; left: 0; right: 0; top: 0; z-index: 400; background: var(--warn); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 12px; }

/* 5.1: Rotation Control — бейджи узлов, колонки NAME / PASSING RULE / SETTINGS / ACTIVE, полосы кап, плашки правил.
   Цвета — только из «Ночной мглы»: папка — ночь со свечением, Split — ирис, SMART — фиолетовый, Comparing — бирюза,
   рекламодатель — туман, капа — оранжевый (про лимит). Без золота. */
.nb { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; flex: none; font-variation-settings: "SHRP" 100; }
.nb.ro { background: var(--night); color: var(--glint); }
.nb.sp { background: var(--iris-soft); color: var(--iris-600); box-shadow: inset 0 0 0 1px var(--iris-line); }
.nb.sm { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px #DCD0FF; }
.nb.co { background: var(--glint-soft); color: #0A7A91; box-shadow: inset 0 0 0 1px #A9E9F7; }
.nb.ad { background: var(--haze-2); color: var(--ink-2); }
.nb.ca { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.nb.tc { background: var(--iris-soft); color: var(--iris-600); }
.rt2 .rt-head, .rt2 .rt-row { grid-template-columns: minmax(300px, 2.3fr) minmax(190px, 1.6fr) minmax(170px, 1.3fr) 76px 112px; }
.rt2 .rt-row.cap { min-height: 42px; background: #FBFBFE; }
.rt2 .rt-row.cap:hover { background: #F6F7FC; }
.rt-dep { display: inline-block; flex: none; height: 1px; }
.rt-t { color: var(--night); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-t:hover { color: var(--iris); }
.rt-row.adv .rt-t, .rt-row.cap .rt-t { font-weight: 550; }
.rt-pct { font-size: 11px; font-weight: 650; color: var(--iris-600); background: var(--iris-soft); border-radius: 999px; padding: 1px 6px; flex: none; font-variant-numeric: tabular-nums; }
.rt-set { font-size: 12px; line-height: 1.4; }
.rt-set b { color: var(--night); font-weight: 600; }
.rt-on { display: flex; align-items: center; gap: 6px; }
.rt-idle { color: var(--warn); display: inline-flex; }
.rt2 .rt-now { font-size: 11.5px; margin-top: 3px; color: var(--muted); }
.cbar { margin: 2px 0 4px; }
.cbar-t { font-size: 11.5px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cbar .bar { width: 120px; margin-top: 3px; height: 5px; }
.cbar.sm .bar { width: 80px; }
.bar i.warn { background: var(--warn); }
.cbar.bad .bar i { background: var(--bad); }
.rchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: var(--paper-2);
  border: 1px solid var(--line); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rchip b { font-weight: 650; font-size: 10.5px; color: var(--muted); }
.rchip.pass { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok-line); }
.rchip.pql b { color: var(--info); }
.rchip.cc img.flag { width: 13px; height: 13px; }
.rchip.day b, .rchip.hour b { color: var(--iris-600); }
.rt-fpop { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; width: 260px; }
/* каталог правил (Passing Rule) и Free PQL */
.rk-tabs { margin-bottom: 10px; }
.rk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.rk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); }
.rk-card:hover { border-color: var(--iris-line); background: var(--hover); }
.rk-card.on { border-color: var(--iris); box-shadow: inset 0 0 0 1px var(--iris); background: var(--iris-soft); }
.rk-card b { font-size: 13px; font-weight: 600; }
.rk-card > span:last-child { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.rk-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--haze); color: var(--iris-600); display: inline-flex; align-items: center; justify-content: center; }
.rk-card.on .rk-ic { background: var(--paper); }
.rk-form { border-top: 1px solid var(--grid); padding-top: 12px; }
.rk-ta { position: relative; }
.rk-ta textarea { width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; min-height: 110px; }
.rk-ac { position: absolute; left: 8px; top: 100%; z-index: 5; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-2);
  max-height: 240px; overflow: auto; min-width: 260px; padding: 4px; }
.rk-ac button { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 6px; cursor: pointer; font: inherit; }
.rk-ac button:hover { background: var(--hover); }
.rk-ac button b { font-family: var(--mono); font-size: 12px; color: var(--night); }
.rk-ac button span { font-size: 12px; color: var(--muted); }
.rk-err { color: var(--bad); font-size: 12.5px; min-height: 0; margin-top: 4px; }
.ntypes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ntype { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); }
.ntype:hover { border-color: var(--iris); background: var(--hover); }
.ntype b { font-size: 14px; }
.ntype > span:last-child { font-size: 12px; color: var(--muted); }
.wtab { margin-top: 8px; }
.wtab input[type=number] { width: 90px; }
.sstat { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sst { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.pie { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.sst .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.rc-m { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.rc-i { font-size: 13px; padding: 5px 0; border-top: 1px solid var(--grid); }
.rc-i:first-of-type { border-top: 0; }
h2.tp-ok { color: var(--ok); }
h2.tp-bad { color: var(--bad); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.lmeta-pre { max-height: 300px; }
/* Capacity Management */
.cm-empty h2 { margin-bottom: 16px; }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper-2); cursor: pointer; font: inherit; color: var(--ink); }
.cm-opt:hover { border-color: var(--iris); background: var(--iris-soft); }
.cm-opt b { font-size: 14px; }
.cm-opt span { font-size: 12.5px; color: var(--muted); }
.cm-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) 1fr 1fr 110px 28px; gap: 10px; align-items: end; }
/* WhatsApp: зелёный / красный / серый */
.wa { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.wa i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.wa.available i, .dot.wa-available { background: var(--ok); }
.wa.not_available i, .dot.wa-not_available { background: var(--bad); }
.dot.wa-not_checked { background: var(--faint); }
.dd-side { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 12px; margin-top: 12px; }
@media (max-width: 1100px) { .rt2 .rt-head, .rt2 .rt-row { grid-template-columns: minmax(240px, 2fr) minmax(150px, 1.4fr) minmax(150px, 1.2fr) 64px 104px; } }
@media (max-width: 720px) { .ntypes, .cm-two { grid-template-columns: 1fr; } .cm-row { grid-template-columns: 1fr 1fr; } }
.rt-plus { font-size: 11px; font-weight: 650; color: var(--iris-600); background: var(--iris-soft); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.cnt-pill { font-size: 11px; font-weight: 650; color: var(--muted); background: var(--haze); border-radius: 999px; padding: 0 7px; margin-left: 6px; }

/* ───────── 5.2: заведение рекламодателя и Sale Statuses ───────── */
/* API Connection Settings — ключи карточками по секциям провайдера */
.keyg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kgrp { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 14px 10px; background: var(--paper-2); min-width: 0; }
.kgrp h3 { margin: 8px 0 6px; }
.kvr { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--line); min-width: 0; }
.kgrp .kvr:first-of-type { border-top: 0; }
.kvr .k { font-size: 12px; color: var(--muted); font-weight: 550; flex: none; max-width: 48%; overflow-wrap: anywhere; }
.kvr .v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.phc { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); margin: 6px 0 4px; }
.phc .chip { cursor: pointer; font-family: var(--mono); font-size: 11.5px; }
.phc .chip:hover { border-color: var(--iris-line); color: var(--iris); }
.goalrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.goalrow .b { justify-self: start; }
/* 5.50.1: глаз в поле пароля (web/ui.js pwEyes) — одна система для всех полей пароля */
.pw { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.f .pw { display: block; }
.pw > input { padding-right: 38px; }
.f .pw > input { width: 100%; }
.pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--faint); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--hover); }
.pw-eye:focus-visible { outline: 2px solid var(--iris); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--night); }
input.bad, textarea.bad { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-soft); }
.exv { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--paper-2); }
.exv > .row { gap: 8px; margin-bottom: 8px; min-width: 0; }
.exv table td.acc { color: var(--iris); font-weight: 550; }
.exnotes { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
.exnotes li { margin: 2px 0; }
h3.hrow { display: flex; align-items: center; gap: 10px; }
.gscols { display: flex; flex-wrap: wrap; gap: 6px; }
.gscols .chip b { color: var(--iris); font-family: var(--mono); }
/* готовность к ротации */
.card.ready { border-left: 3px solid var(--warn); }
.card.ready.ok { border-left-color: var(--ok); }
.rbar { height: 6px; border-radius: 3px; background: var(--haze-2); overflow: hidden; margin: -4px 0 10px; }
.rbar i { display: block; height: 100%; background: var(--iris); border-radius: 3px; }
.card.ready.ok .rbar i { background: var(--ok); }
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--grid); min-height: 34px; }
.rlist li:first-child { border-top: 0; }
.rlist .rk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
  background: var(--idle-soft); color: var(--idle); }
.rlist li.ok .rk { background: var(--ok-soft); color: var(--ok); }
.rlist li.must .rk { background: var(--bad-soft); color: var(--bad); }
.rlist li.should .rk { background: var(--warn-soft); color: var(--warn); }
.rlist .rt { flex: 1; min-width: 0; }
.rlist li.ok .rt { color: var(--muted); }

/* Sale Statuses: CRM-статус слева, написания брокеров справа */
.ssmap .ssh { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; padding: 10px 20px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--paper-2); border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.ssrow { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; border-top: 1px solid var(--grid); transition: background .15s var(--ease); }
.ssrow:first-child { border-top: 0; }
.ssl { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 20px; min-width: 0; flex-wrap: wrap; }
.ssl b { font-weight: 600; }
.ssr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 20px 10px 12px; min-width: 0; }
.sscnt { border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.sscnt:hover { color: var(--ink); }
.aschip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 8px 3px 4px; font-size: 12.5px;
  background: var(--paper); cursor: pointer; user-select: none; max-width: 100%; min-width: 0; }
.aschip:hover { border-color: var(--iris-line); }
.aschip.sel { background: var(--iris-soft); border-color: var(--iris); color: #26288F; }
.aschip .grip { font-style: normal; color: var(--faint); font-size: 11px; letter-spacing: -2px; cursor: grab; padding: 0 2px; }
.aschip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aschip .p { font-size: 11px; color: var(--muted); white-space: nowrap; }
.aschip .n { font-size: 11px; color: var(--muted); background: var(--haze); border-radius: 6px; padding: 0 5px; }
.aschip .x { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.aschip .x:hover { color: var(--bad); }
.ssun { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 16px; min-height: 44px; }
.ssun .empty { width: 100%; }
.ssg { padding: 8px 20px 12px; border-top: 1px solid var(--grid); }
.ssg .row { gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.dropon { background: var(--iris-soft) !important; box-shadow: inset 0 0 0 2px var(--iris-line); }
.swc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.swatches .swc input[type=color] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: none; cursor: pointer; }
.modal .ch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.modal .ch h2 { margin: 0; }
.exv > .row code.grow { display: block; flex: 1; min-width: 0; max-width: none; }
.ekg { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px; }
.ekg .f.wide, .fgrid .f.wide { grid-column: 1 / -1; }
.ekg .f input, .ekg .f textarea { width: 100%; }
.ekx { gap: 8px; margin-bottom: 8px; }
/* лоток неразобранных прижат к низу экрана: чипы тащат вверх на строку статуса, не прокручивая страницу туда-обратно */
.sstray { position: sticky; bottom: 12px; z-index: 5; max-height: 38vh; overflow: auto; border-radius: var(--r); box-shadow: var(--shadow-2); margin-top: 16px; }
.sstray .card { margin-bottom: 0; box-shadow: none; }
.sstray #ss-sugbox .card { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.sstray #ss-sugbox:not(:empty) + .card { border-radius: 0 0 var(--r) var(--r); }
/* на невысоком или узком экране лоток не прилипает — иначе закрывает сами статусы */
@media (max-height: 760px), (max-width: 900px) { .sstray { position: static; max-height: none; box-shadow: none; } }
.advtr { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .advtr { grid-template-columns: minmax(0, 1fr); } }
.convpie { display: flex; align-items: center; gap: 18px; }
.convpie .row { gap: 8px; margin: 4px 0; }
.pie.big { width: 110px; height: 110px; display: grid; place-items: center; position: relative; }
.pie.big::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--paper); }
.pie.big b { position: relative; z-index: 1; font-size: 18px; font-variation-settings: "SHRP" 100; color: var(--night); }

/* ───────── 5.3: Injector ───────── */
.b.job { background: var(--iris-soft); color: var(--iris-600); }
.b.glint { background: var(--glint-soft); color: #0B6F85; }
/* цветная полоса строки = статус инъекции (зелёная — идёт, оранжевая — стоит) */
table.stripes tbody tr td:first-child { box-shadow: inset 3px 0 0 var(--line-2); }
table.stripes tr.st-in_progress td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
table.stripes tr.st-stopped td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.stripes tr.st-new td:first-child { box-shadow: inset 3px 0 0 var(--info); }
table.stripes tr.st-scheduled td:first-child, table.stripes tr.st-delayed td:first-child { box-shadow: inset 3px 0 0 var(--glint); }
.wbar { display: flex; gap: 6px; margin: 4px 0 2px; }
.wbar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.wbar i.on { background: var(--iris); }
.ivrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ivrow input { width: 90px; }
.owr { gap: 8px; margin: 8px 0; flex-wrap: nowrap; }
.owr select { width: 170px; flex: none; }
.owr input { flex: 1; min-width: 0; }
.injcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.injcards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1250px) { .injcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .injcards, .injcards.two { grid-template-columns: minmax(0, 1fr); } }
.injcards .card { margin-bottom: 0; }
.injcards + .card { margin-top: 16px; }
.loghist { list-style: none; margin: 0; padding: 0; }
.loghist li { padding: 3px 0; border-top: 1px solid var(--grid); }
.loghist li:first-child { border-top: 0; }
details#w-sch > summary { cursor: pointer; font-weight: 650; margin: 10px 0; }
.f .ivrow input[type=number] { width: 90px; flex: none; }
.f .ivrow select { width: auto; flex: none; }
.wchk { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px; }

/* ───────── 5.4: Postbacks деревом ───────── */
.pbt .rh, .pbt .rr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.6fr) 60px 186px; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--grid); }
.pbt .rh { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--paper-2); border-top: 0; border-radius: var(--r) var(--r) 0 0; }
.pbt .rr:hover { background: var(--hover); }
.pbt .rr.off > span:not(:nth-child(4)) { opacity: .55; }
.pbt .rn { display: flex; align-items: center; gap: 7px; padding-left: calc(var(--d) * 24px); min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.pbt .pnum { width: 22px; height: 22px; border-radius: 6px; background: var(--haze); color: var(--ink-2); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pbt .ptg { width: 16px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 11px; flex: none; }
.pbt .pk { width: 22px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pbt .pk.p { background: var(--iris-soft); color: var(--iris-600); }
.pbt .pk.f { background: var(--night); color: var(--glint); }
.pbt .rp { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pbt .rs { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.pbt .rs .mono.ell { max-width: 100%; }
.pbt .ra { display: flex; justify-content: flex-end; gap: 2px; }
.rchip.ev { background: var(--ok-soft); color: var(--ok-ink); border-color: transparent; }
.evs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 1100px) { .pbt .rh, .pbt .rr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 52px 176px; } }
.pbt .ra .btn.icon.sm { width: 28px; height: 28px; padding: 0; justify-content: center; flex: none; }
/* воронки, ссылки, формы SDK, Lead Flow (5.4) */
.flr, .lir, .ffr { gap: 8px; margin: 6px 0; flex-wrap: nowrap; }
.lir select { width: 150px; flex: none; }
.ffr select.ff-k { width: 140px; flex: none; }
.ffr select.ff-s { width: 90px; flex: none; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); gap: 12px 6px; align-items: stretch; }
.fst { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fst-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fst-h b { min-width: 0; }
.fst > code { align-self: flex-start; font-size: 10.5px; }
.fst-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--night); color: var(--glint); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.fst.lead-declined .fst-n { background: var(--bad); color: #fff; }
.fst-c { font-size: 26px; font-weight: 650; color: var(--night); font-variation-settings: "SHRP" 100; }
.fst-in { display: flex; flex-wrap: wrap; gap: 4px; }
.fst.ftd { border-color: var(--ok-line); } .fst.lead-declined { border-color: var(--bad-line); } .fst.lead-pushed { border-color: var(--iris-line); }
.fst-arrow { align-self: center; justify-self: center; color: var(--faint); font-size: 13px; }
.fst-or { align-self: start; margin-top: 18px; white-space: nowrap; }
/* узко: две колонки подряд, без стрелок — порядок карточек в разметке и есть порядок пути */
@media (max-width: 1000px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow > * { grid-area: auto !important; }
  .fst-arrow { display: none; }
}

/* CRG-отчёт — плательщик → контракт → страны (5.59: суммы в деревьях денег — цветом текста, не зелёным) */
.crg-payer td { background: var(--haze); font-weight: 600; }
.crg-c td:first-child { padding-left: 28px; }
.crg-cc td:first-child { padding-left: 52px; color: var(--ink-2); }
.dealgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.dealgrid .f select[multiple] { height: auto; }
@media (max-width: 1100px) { .dealgrid { grid-template-columns: 1fr; } }
.stepbar { display: flex; gap: 6px; margin-bottom: 16px; }
.stepbar span { flex: 1; padding: 8px 10px; border-radius: 8px; background: var(--haze); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.stepbar span.on { background: var(--night); color: #fff; }
/* деревья денег: у них нет колонки «сейчас» (капа, часы) — место отдано Settings, где сумма, CRG и сроки контракта */
.rtree.money .rt-head, .rtree.money .rt-row { grid-template-columns: minmax(260px, 2fr) minmax(160px, 1.3fr) minmax(210px, 1.2fr) 70px 132px; }
/* 5.7: CRM Metrics — карточки метрик (Primary — тёмная, как главная карточка дашборда), сетка иконок, калькулятор формулы */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; cursor: default; }
.mcard[data-m] { cursor: pointer; } .mcard[data-m]:hover { border-color: var(--iris-line); }
.mcard.primary { background: var(--night); color: #fff; border-color: var(--night); } .mcard.primary .faint, .mcard.primary .muted { color: var(--night-text); }
.mc-h { display: flex; gap: 10px; align-items: center; } .mc-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--haze); display: grid; place-items: center; color: var(--iris-600); flex: none; }
.mcard.primary .mc-ic { background: rgba(255,255,255,.08); color: var(--glint); }
.icgrid { display: grid; grid-template-columns: repeat(4, 34px); gap: 4px; } .icgrid button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.icgrid button.on { border-color: var(--night); background: var(--haze); }
.calc { display: grid; grid-template-columns: 196px 1fr; gap: 12px; margin-top: 8px; } .calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.calc .keys button { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: inherit; cursor: pointer; } .calc .keys button:hover { background: var(--haze); }
.mchips { max-height: 150px; overflow: auto; align-content: flex-start; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
/* 5.7: Company Overview — ряд карточек метрик (Primary — «ночная»), графики сеткой в две колонки; места в рейтинге — цветами
   системы, без медального золота */
.ov { margin-bottom: 16px; }
.ov-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .ov-head h2 { margin: 0; font-size: 17px; } .ov-head .seg { flex: none; }
/* 5.17: карточки — сеткой, переносятся на следующий ряд. Было: лента с прокруткой вбок, и последняя карточка стояла
   обрезанной по краю экрана («Payout 4 100 ↗ 1…») — выглядело как поломка вёрстки */
.ovcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); padding-bottom: 4px; }
.ovc { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; scroll-snap-align: start; box-shadow: var(--shadow-1); }
.ovc.prim { background: var(--night); border-color: var(--night); color: #fff; }
.ovc-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-height: 20px; }
.ovc.prim .ovc-h { color: var(--night-text); }
.ovc-h button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 3px; font: inherit; line-height: 1; }
.ovc-v { font-size: 26px; font-weight: 650; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.ovc-l { display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--muted); margin-top: 3px; } .ovc-l span { flex: 1; }
.ovc.prim .ovc-l { color: var(--night-text); } .ovc-l b { color: var(--ink); font-weight: 600; } .ovc.prim .ovc-l b { color: #fff; }
.ovspark { width: 100%; height: 36px; margin-top: 6px; }
.ovcards.edit .ovc { outline: 1px dashed var(--iris-line); outline-offset: 2px; }
.ovcharts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ovch.wide { grid-column: 1 / -1; } .ovch .ch { gap: 8px; }
.ovchart { width: 100%; height: auto; } .ovgrid { stroke: var(--grid); stroke-width: 1; } .ovax { font-size: 10px; fill: var(--muted); }
.ovleg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 4px; } .ovleg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.ovtop td, .ovtop th { padding: 7px 10px; } .rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--haze); color: var(--ink-2); }
.rank.r1 { background: var(--night); color: var(--glint); } .rank.r2 { background: var(--iris); color: #fff; } .rank.r3 { background: var(--iris-soft); color: var(--iris-600); }
.swatches { display: flex; gap: 4px; } .swatches button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .swatches button.on { border-color: var(--ink); }
@media (max-width: 1100px) { .ovcharts { grid-template-columns: 1fr; } }

/* 5.7 Comparing Analytics: чипы метрик, группы колонок по метрике, минус красным в скобках */
button.chip { cursor: pointer; font: inherit; font-size: 12px; }
button.chip:hover:not(.on) { border-color: var(--iris); color: var(--iris); }
table.cmp th.grp { text-align: center; border-left: 1px solid var(--line); }
table.cmp thead tr:last-child th:nth-child(3n+1) { border-left: 1px solid var(--line); }
table.cmp td:nth-child(3n+2) { border-left: 1px solid var(--line); }
table.cmp .neg { color: var(--bad); white-space: nowrap; }
table.cmp .pos { color: var(--ok); white-space: nowrap; }
.icgrid.wide { grid-template-columns: repeat(auto-fill, 34px); max-width: 420px; }
/* 5.7 Retention Report: тепловая заливка клеток (iris по доле от максимума), не наступившие периоды — штриховка */
table.rett td.ret { transition: background .2s; }
table.rett td.ret-none { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); }
table.rett tr.grp { cursor: pointer; }
table.rett tr.grp .tog { display: inline-block; width: 14px; color: var(--faint); }
table.rett tr.kid td:first-child { padding-left: 30px; }
/* даты внутри поля формы (.f): без этого .f растягивает каждый input на 100% и ставит «с» и «по» друг под другом */
.f > span.dates, .f .dates { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.f .dates input[type=date] { width: 148px; flex: none; }
.f .rng select { width: auto; min-width: 140px; flex: none; }
table.rett th, table.rett td { white-space: nowrap; }
table.rett td.ret { min-width: 64px; }
/* 5.7 Drilldown: «глаз» и ⇕ у строки — видны при наведении (и всегда на тач-экране) */
.rowtools { display: inline-flex; gap: 2px; margin-left: 8px; opacity: 0; transition: opacity .15s; vertical-align: middle; }
tr:hover > td .rowtools, .rowtools:focus-within { opacity: 1; }
@media (hover: none) { .rowtools { opacity: .7; } }
.rowtools .xbtn { width: 22px; height: 22px; font-size: 12px; }
table.peek { width: 100%; } table.peek td { padding: 4px 6px; border: 0; } table.peek tr + tr td { border-top: 1px solid var(--line); }

/* 5.8 Notifications: карточки уведомлений, строки фильтров, превью шаблона как в Telegram, журнал */
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ncard { margin: 0; } .ncard.off { opacity: .6; }
.ncard-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ncard-h b { font-size: 15px; color: var(--night); }
.ncard .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--line); }
.ncard .kv span { color: var(--muted); } .ncard .kv b { font-weight: 600; text-align: right; }
.nfrow { display: grid; grid-template-columns: 160px auto 1fr 26px; gap: 8px; align-items: start; margin-bottom: 8px; }
.nfrow .ms { max-height: 160px; }
.tgpv { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--haze); font-size: 13.5px; line-height: 1.5; min-height: 110px; }
.tgpv a { color: var(--iris-600); }
.nlog .nmsg { max-width: 420px; max-height: 84px; overflow: auto; white-space: pre-wrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.pop.menu { max-height: 60vh; overflow: auto; }
@media (max-width: 900px) { .nfrow { grid-template-columns: 1fr; } }
.inbox .inb { padding: 12px 18px; border-bottom: 1px solid var(--line); } .inbox .inb:last-child { border-bottom: 0; }
.inbox .inb.new { background: var(--iris-soft); }
.inb-t { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .inb-x { white-space: pre-wrap; font-size: 13px; color: var(--ink-2); }
/* 5.8 мастер группы: разделы прав аккордеонами */
details.acc { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: var(--paper); }
details.acc > summary { cursor: pointer; font-weight: 600; color: var(--night); padding: 2px 0; }
details.acc[open] > summary { margin-bottom: 8px; }
/* 5.8 Unsecured Mode: оранжевый бейдж с отсчётом в шапке — видно всегда, пока контакты открыты */
.unsec { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 4px 6px 4px 10px; border-radius: 20px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; border: 1px solid var(--warn-line); }
.unsec b { font-variant-numeric: tabular-nums; color: var(--warn); }
.unsec button { border: 0; background: var(--warn); color: #fff; border-radius: 14px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.fgrid.two { grid-template-columns: 1fr 1fr; } @media (max-width: 760px) { .fgrid.two { grid-template-columns: 1fr; } }

/* 5.54: продукты в рельсе — плитки «значок + подпись» (Leads / Network) вместо букв LD / PP / CP: подпись читается без подсказки.
   Выбранная — ночная плашка с бирюзовым значком и полоской слева, как кнопки рельсы */
.rtile { position: relative; width: 52px; padding: 7px 0 6px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--night-muted); text-decoration: none; transition: background .15s, color .15s; }
.rtile svg.i { width: 18px; height: 18px; stroke-width: 1.7; }
.rtile span { font-size: 11.5px; font-weight: 550; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.rtile:hover { background: var(--night-3); color: #fff; text-decoration: none; }
.rtile.on { background: var(--night-3); color: #fff; }
.rtile.on svg.i { color: var(--glint); }
.rtile.on::before { content: ""; position: absolute; left: -4px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--glint); box-shadow: 0 0 10px var(--glint); }
.rtile.off { opacity: .55; }
.rtile[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 58px; top: 50%; transform: translateY(-50%); background: var(--night); color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 9px; border-radius: 7px; white-space: nowrap; box-shadow: var(--shadow-2); pointer-events: none; z-index: 5; }
/* 5.9 Partner Platform: полосы кап, карточки оффера, цели в мастере */
.ppbar { height: 6px; border-radius: 3px; background: var(--haze); overflow: hidden; margin: 3px 0; } .ppbar i { display: block; height: 100%; background: var(--iris); border-radius: 3px; }
.ppbar.over i { background: var(--bad); }
.ppcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ppcards .card { margin: 0; }
/* 5.64: деньги сети по валютам в карточке — столбиком, каждая сумма своей строкой (в таблицах и строках — через точку) */
.ppcards .kv b .curamt { display: block; text-align: right; color: inherit; }
.ncard .kv b .curamt { color: inherit; }  /* правило «.ncard .kv span — серым» — для подписи, не для суммы */
.ppcards .kv b .cursep { display: none; }
.ppg { margin-bottom: 10px; padding: 12px 14px; } .ppg .row { gap: 10px 16px; }
.nfrow.ppfree { display: flex; gap: 8px; align-items: center; } .nfrow.ppfree > * { flex: 1; min-width: 0; } .nfrow.ppfree > .xbtn { flex: none; }

/* 5.11 Billing PP: правленая строка листа начислений — мягкий фон, правленая сумма — ярче */
tr.edited td { background: var(--warn-soft); }
td.chg { font-weight: 600; color: var(--warn); }
.chkcol { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.dealgrid .f .dates { display: flex; }
.dealgrid .f .dates input[type=date] { width: auto; flex: 1 1 0; min-width: 0; }  /* 5.11: узкая колонка фильтра — даты делят ширину, а не вылезают за карточку */

/* 5.12: Tier Plans — две колонки (настройки | уровни), строка уровня; реферальные уровни; дашборд PP; кабинет аффилиата */
.tiergrid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .tiergrid { grid-template-columns: 1fr; } }
.tierrow { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) auto minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tierrow .f { margin: 0; } .tierrow .chk { padding-bottom: 8px; white-space: nowrap; }
.reflevel { margin: 10px 0; } .refrule { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 6px 14px; }
.refrule .f { margin: 0; }
.chipbtn { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; font-size: 12.5px; color: var(--ink-2); background: var(--paper); text-decoration: none; }
.chipbtn:hover { border-color: var(--iris-line); color: var(--iris); } .chipbtn.on { background: var(--night); border-color: var(--night); color: #fff; }
tr.tot td { font-weight: 650; border-top: 2px solid var(--line-2); background: var(--haze); }
.ppdash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; align-items: start; }
@media (max-width: 1100px) { .ppdash { grid-template-columns: 1fr; } }
.notlist { display: flex; flex-direction: column; } .notrow { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.notrow:first-child { border-top: 0; } .notrow span { flex: 1; min-width: 0; } .notrow em { font-style: normal; color: var(--muted); font-size: 12px; white-space: nowrap; } .notrow:hover span { color: var(--iris); }
/* лидерборд: места без «золота» — ночь, ирис, дымка */
.medal { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: var(--haze); color: var(--ink-2); }
.medal.m1 { background: var(--night); color: #fff; } .medal.m2 { background: var(--iris); color: #fff; } .medal.m3 { background: var(--iris-soft); color: var(--iris-600); }
table.pftree tr.lv0 td:first-child { font-weight: 600; } table.pftree tr.lv1 td { background: #FAFBFE; } table.pftree tr.lv2 td { background: #F5F6FC; }
.tgl { border: 0; background: transparent; padding: 0 4px 0 0; cursor: pointer; color: var(--muted); vertical-align: middle; } .tgl svg { transition: transform .15s; transform: rotate(-90deg); } .tgl.on svg { transform: none; }
.offergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.offercard { display: flex; flex-direction: column; gap: 6px; margin: 0; } .offercard .odesc { color: var(--ink-2); max-height: 60px; overflow: hidden; }
.ogoals { border-top: 1px solid var(--line); padding-top: 4px; }
.tiercard { display: flex; flex-direction: column; gap: 8px; } .tbadge { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: var(--night); color: #fff; font-weight: 700; font-size: 12px; }
.tiersteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tstep { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.tstep span { color: var(--muted); } .tstep em { font-style: normal; color: var(--ink-2); } .tstep.on { border-color: var(--night); box-shadow: 0 0 0 1px var(--night); } .tstep.lock { opacity: .6; }
.kycrow { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .kycrow:first-of-type { border-top: 0; } .kycrow .btn { align-self: flex-start; }
.pptops { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .pptops .card { margin: 0; }
table.pftree td, table.pftree th, .pptops td { white-space: nowrap; }  /* суммы в отчётах PP не переносятся — таблица уходит в прокрутку */
/* 5.12: строка «подпись — значение» вне ncard (KYC и T&C в карточке аффилиата, баланс в кабинете, окна) — тоже в две стороны.
   Было: вне .ncard подпись и значение слипались («Available0»), так было и во вкладке Other с 5.10 */
div.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
div.kv > span { min-width: 0; } div.kv > b { text-align: right; }
td.pos { color: var(--ok-ink); }  /* 5.13: сумма конверсии зелёным */
/* 5.13: Clicks (LD) — полоса строки по состоянию: голубая click, жёлтая click-landed, зелёная — стал лидом */
tr.st-info > td:first-child { box-shadow: inset 3px 0 0 var(--iris-line); }
tr.st-warn > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.st-ok > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
/* 5.13: группы пользователей плитками */
.grptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.grptile { margin: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--line); background: var(--paper); }
.grptile:hover { border-color: var(--iris-line); }
.grpav { width: 38px; height: 38px; border-radius: 50%; background: var(--night); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.grpnote { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flg { display: inline-flex; gap: 6px; align-items: center; } .flg select { max-width: 220px; }

/* 5.14: причина отказа — две строки в ячейке и разбор по рекламодателям в попапе */
td.rsn { max-width: 280px; min-width: 180px; cursor: help; }
.rsn-h { display: flex; align-items: center; gap: 6px; }
.rsn-h .eye { opacity: .55; }
tr:hover .rsn-h .eye, .rsn-h .eye:focus-visible { opacity: 1; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.35; }
.pop.why { padding: 14px 16px 12px; animation: popIn .14s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pop.why { animation: none; } }
.why-r { font-size: 13px; line-height: 1.45; color: var(--ink-2); padding: 2px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; white-space: pre-line; overflow-wrap: anywhere; }
.why-l { display: grid; gap: 10px; max-height: 320px; overflow: auto; padding: 2px 0 8px; }
.why-a { display: grid; grid-template-columns: 10px 1fr; gap: 8px; font-size: 13px; }
.why-a > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-top: 6px; }
.why-s { font-size: 11px; font-weight: 600; color: var(--c); margin-left: 6px; }
.why-m { color: var(--ink-2); overflow-wrap: anywhere; margin: 2px 0; }
.why-go { display: inline-block; font-size: 12.5px; font-weight: 600; margin-top: 4px; }

/* 5.15: журнал обновления баз IP */
.iplog { font: 11.5px/1.5 var(--mono); background: var(--haze); border-radius: 10px; padding: 8px 10px; max-height: 160px; overflow: auto; margin: 10px 0 0; white-space: pre-wrap; }
/* 5.53: обновление базы IP файлом — кнопка и подсказка под ней; выходы брокера списком (основной + запасные) */
.ipup { margin: 6px 0 12px; } .ipup .hint { margin-top: 4px; }
.exits { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.exit-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); }
.exit-row .grow { flex: 1; min-width: 0; }
.exit-row .role { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.seen-c { display: inline-flex; align-items: center; gap: 4px; }

/* 5.15: Integration Test — шаги «тестовый лид → FTD у брокера → FTD у нас» */
.ftd-steps { list-style: none; counter-reset: fs; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.ftd-steps > li { counter-increment: fs; position: relative; padding-left: 38px; }
.ftd-steps > li::before { content: counter(fs); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; background: var(--haze); color: var(--muted); }
.ftd-steps > li.cur::before { background: var(--night); color: var(--glint); }
.ftd-steps > li.ok::before { content: '✓'; background: var(--ok); color: #fff; }
.ftd-steps > li.bad::before { content: '!'; background: var(--bad); color: #fff; }
.ftd-steps > li.todo { opacity: .55; }
.ftd-msg { font-size: 13px; line-height: 1.45; background: var(--haze); border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px; max-width: 640px; }

/* 5.16: Control Center — статус на плитке; полоса слева — состояние (ok / warn / bad) */
.tile.ctile { min-height: 118px; }
.tile.ctile::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.tile.ctile.ok::before { background: var(--ok); } .tile.ctile.warn::before { background: var(--warn); } .tile.ctile.bad::before { background: var(--bad); }
.cc-st { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: -2px 0 8px; }
.cc-st i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--idle); margin-right: 7px; vertical-align: 1px; }
.tile.ctile.ok .cc-st i { background: var(--ok); } .tile.ctile.warn .cc-st i { background: var(--warn); } .tile.ctile.bad .cc-st i { background: var(--bad); }

/* ───────── 5.17: таблицы — плотность, липкие колонки, порядок перетаскиванием, виды ───────── */
/* Было: строка списка лидов высотой ~60 px при одной строке текста — на экране помещалось 12 лидов. «Compact» — личная
   настройка (Profile → Interface) или стандарт от админа; по умолчанию — «Comfortable», как было */
body.dense td { padding-top: 6px; padding-bottom: 6px; }
body.dense th { padding-top: 8px; padding-bottom: 8px; }
body.dense td .faint.small, body.dense td .clamp2 { line-height: 1.3; }
/* галка выбора и первая колонка стоят на месте при прокрутке вбок; тень — только когда таблица уже прокручена */
.tw table.stick th.ck, .tw table.stick td.ck { width: 40px; min-width: 40px; }
.tw table.stick th:first-child, .tw table.stick td:first-child,
.tw table.stick2 th:nth-child(2), .tw table.stick2 td:nth-child(2) { position: sticky; left: 0; z-index: 2; }
.tw table.stick2 th:nth-child(2), .tw table.stick2 td:nth-child(2) { left: 40px; }
.tw table.stick td:first-child, .tw table.stick2 td:nth-child(2) { background: var(--paper); }
.tw table.stick tbody tr:hover td:first-child, .tw table.stick2 tbody tr:hover td:nth-child(2) { background: #F8F9FD; }
.tw table.stick tr.sel td:first-child, .tw table.stick2 tr.sel td:nth-child(2) { background: var(--iris-soft); }
.tw.scrolled table.stick:not(.stick2) th:first-child, .tw.scrolled table.stick:not(.stick2) td:first-child,
.tw.scrolled table.stick2 th:nth-child(2), .tw.scrolled table.stick2 td:nth-child(2) { box-shadow: 6px 0 8px -6px rgba(14, 18, 48, .18); }
.tw.scrolled table.stick:not(.stick2) tr[data-st] > td:first-child { box-shadow: inset 3px 0 0 var(--st, transparent), 6px 0 8px -6px rgba(14, 18, 48, .18); }
/* 5.56: вторая закреплённая колонка — Email за ID (stickn); отступ --stk считает список после отрисовки. Тень при прокрутке — у неё, а не у ID */
.tw table.stickn:not(.stick2) th:nth-child(2), .tw table.stickn:not(.stick2) td:nth-child(2),
.tw table.stickn.stick2 th:nth-child(3), .tw table.stickn.stick2 td:nth-child(3) { position: sticky; left: var(--stk, 0); z-index: 2; max-width: 240px; }
.tw table.stickn:not(.stick2) td:nth-child(2), .tw table.stickn.stick2 td:nth-child(3) { background: var(--paper); }
.tw table.stickn:not(.stick2) tbody tr:hover td:nth-child(2), .tw table.stickn.stick2 tbody tr:hover td:nth-child(3) { background: #F8F9FD; }
.tw table.stickn:not(.stick2) tr.sel td:nth-child(2), .tw table.stickn.stick2 tr.sel td:nth-child(3) { background: var(--iris-soft); }
.tw.scrolled table.stickn:not(.stick2) th:first-child, .tw.scrolled table.stickn:not(.stick2) td:first-child,
.tw.scrolled table.stickn.stick2 th:nth-child(2), .tw.scrolled table.stickn.stick2 td:nth-child(2) { box-shadow: none; }
.tw.scrolled table.stickn:not(.stick2) tr[data-st] > td:first-child { box-shadow: inset 3px 0 0 var(--st, transparent); }
.tw.scrolled table.stickn:not(.stick2) th:nth-child(2), .tw.scrolled table.stickn:not(.stick2) td:nth-child(2),
.tw.scrolled table.stickn.stick2 th:nth-child(3), .tw.scrolled table.stickn.stick2 td:nth-child(3) { box-shadow: 6px 0 8px -6px rgba(14, 18, 48, .18); }
/* ссылка на лид в таблице — без пунктира в каждой строке: подчёркивание по наведению */
td a.lk { border-bottom-color: transparent; font-weight: 550; color: var(--night); }
td a.lk:hover { border-bottom-color: var(--iris); color: var(--iris); }
/* заголовок перетаскивается: метка места вставки слева или справа */
th[draggable=true] { cursor: grab; }
th[draggable=true].sortable { cursor: pointer; }
th.drag { opacity: .45; }
th.dl { box-shadow: inset 2px 0 0 var(--iris); }
th.dr { box-shadow: inset -2px 0 0 var(--iris); }
/* Settings List: ручка, строка поднимается при перетаскивании */
.sp-b { padding: 12px 20px 24px; }
.sp-per { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--grid); margin-bottom: 6px; font-weight: 550; }
.sp-per select { width: 96px; }
.sp-allr { border: 0; padding: 8px 0 8px 26px; }
.sp-list { display: grid; gap: 2px; }
.sp-o { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; transition: background .12s, box-shadow .12s; }
.sp-o:hover { background: var(--paper-2); }
.sp-o .grip { display: inline-flex; color: var(--faint); cursor: grab; padding: 2px; }
.sp-o .grip svg { fill: currentColor; stroke-width: 1; }
.sp-o:hover .grip { color: var(--muted); }
.sp-o .chk { display: flex; flex: 1; margin: 0; cursor: pointer; }
.sp-o.drag { background: var(--paper); box-shadow: 0 0 0 1px var(--iris-line), var(--shadow-2); opacity: .9; }
/* период — одной группой-переключателем: ряд пилюль занимал всю строку */
.pseg { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.pseg .pb { border: 0; border-radius: 8px; padding: 4px 11px; background: transparent; }
.pseg .pb:hover { background: var(--haze); }
.pseg .pb.on, .pseg .pb.on:hover { background: var(--night); color: #fff; }
.lhead .qsearch { margin-right: 4px; }
.lhead .qsearch input { width: 220px; }
/* виды — сохранённые фильтры: чипы над таблицей, закладка в шапке */
.vbar { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 4px 12px 4px 10px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.vchip svg { color: var(--muted); }
.vchip:hover { border-color: var(--iris-line); color: var(--night); }
.vchip.on { background: var(--iris-soft); border-color: var(--iris-line); color: var(--night); }
.vchip.on svg { color: var(--iris); }
.vmenu { min-width: 260px; max-width: 320px; }
.vmenu .vrow { display: flex; align-items: center; gap: 2px; }
.vmenu .vrow .vname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .lhead .qsearch input { width: 170px; } }
@media (max-width: 1000px) { .lhead { flex-wrap: wrap; } .lhead .qsearch { order: 10; flex: 1 1 100%; margin: 4px 0 0; } .lhead .qsearch input { width: 100%; } }
.udv { padding: 10px 0; border-bottom: 1px solid var(--grid); }
.udv:last-of-type { border-bottom: 0; }
.udv .chips { margin-top: 6px; }
.net-org { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* 5.17: у широкой таблицы — тень у края, за которым есть ещё колонки (раньше таблица просто обрывалась на краю карточки) */
.card .tw, .modal .tw { background: linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
  linear-gradient(to left, var(--paper) 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(14, 18, 48, .16), transparent) 0 0 / 12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(14, 18, 48, .16), transparent) 100% 0 / 12px 100% no-repeat scroll; }
td.an { min-width: 150px; }
.convpie .row { flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
.btn.icon.sm.inl { vertical-align: middle; margin: -6px 0 -4px 2px; }
@keyframes pageIn { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#content.enter { animation: pageIn .18s var(--ease); }
/* 5.18: оценка риска — число и уровень одним чипом; разбор в карточке лида — весами */
.risk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 9px 2px 3px; background: var(--idle-soft); color: var(--ink-2); cursor: help; }
.risk b { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 11.5px; color: #fff; background: var(--idle); font-variant-numeric: tabular-nums; }
.risk.ok b { background: var(--ok); } .risk.warn b { background: var(--warn); } .risk.bad b { background: var(--bad); }
.risk.warn { background: var(--warn-soft); color: var(--warn-ink); } .risk.bad { background: var(--bad-soft); color: var(--bad-ink); }
/* 5.36: прогноз FTD — тот же вид, что у риска, но свои цвета: зелёный — лучшие лиды, Iris — средние, серый — остальные */
.fc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 9px 2px 3px; background: var(--idle-soft); color: var(--ink-2); }
.fc b { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 11.5px; color: #fff; background: var(--idle); font-variant-numeric: tabular-nums; }
.fc.ok { background: var(--ok-soft); color: var(--ok-ink); } .fc.ok b { background: var(--ok); }
/* 5.37: Money Leaks — строка на потерю: сколько, что и где исправить, справа — сколько примерно денег */
.leaks { display: flex; flex-direction: column; }
.leak { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--grid); color: var(--ink); text-decoration: none; }
.leak:first-child { border-top: 0; }
.leak:hover { background: var(--hover); }
.leak-n { font-size: 22px; font-weight: 600; color: var(--night); font-variant-numeric: tabular-nums; text-align: right; }
.leak-t b { display: block; font-size: 14px; }
.leak-t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.leak-m { font-weight: 600; color: var(--bad); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 5.37: готовность к запуску (Control Center) */
.launch summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.launch summary::-webkit-details-marker { display: none; }
.launch summary h2 { margin: 0; }
.launch-bar { flex: 1; max-width: 240px; height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.launch-bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; margin-top: 14px; }
.launch-grid h3 { font-size: 12.5px; color: var(--muted); margin: 6px 0 4px; font-weight: 600; }
.launch-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.launch-row:hover { background: var(--hover); }
.launch-row .dot { margin-top: 5px; flex: none; }
.launch-row b { display: block; font-size: 13px; font-weight: 600; }
.launch-row small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
@media (max-width: 1180px) { .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .launch-grid { grid-template-columns: 1fr; } }
.fc-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.fc-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 52px; gap: 10px; align-items: center; font-size: 13px; }
.fc-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-bar { height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; } .fc-bar i { display: block; height: 100%; border-radius: 3px; }
.fc-row .ok { color: var(--ok); } .fc-row .neg { color: var(--bad); }
@media (max-width: 1000px) { .fc-top { grid-template-columns: 1fr; } }
.fc.iris { background: var(--iris-soft); color: var(--iris-600); } .fc.iris b { background: var(--iris); }
.risk-why { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12px; color: var(--muted); }
i.dot.risk-high { background: var(--bad); } i.dot.risk-medium { background: var(--warn); } i.dot.risk-low { background: var(--ok); }
/* 5.19: прогноз капы в дереве */
.rt-eta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rt-eta.soon { color: var(--warn); font-weight: 600; }
/* 5.19: Advertiser Health */
.ah-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 18px; margin-bottom: 12px; }
.ah-sum > div:not(.ah-alert) { display: flex; flex-direction: column; }
.ah-sum b { font-size: 20px; font-weight: 650; font-variation-settings: "SHRP" 100; color: var(--night); }
.ah-sum span { font-size: 12px; color: var(--muted); }
.ah-alert { display: inline-flex; align-items: center; gap: 6px; color: var(--bad); font-weight: 600; font-size: 13px; margin-left: auto; }
svg.hspark { display: block; }

/* 5.21: форма данных тестового лида — три колонки: у email поле шире (в четверть ширины «sophie_schneider226@web.de»
   не влезал), подсказки под телефоном и IP (оператор, провайдер и город) — в одну строку */
.fgrid.tl-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .fgrid.tl-form { grid-template-columns: 1fr 1fr; } }

/* 5.21: заголовок страницы — в одну строку. Было: ширину заголовка браузер мерил на доли пикселя уже, чем нужно шрифту
   с осью SHRP, и двухсловные заголовки («What's new», «Rotation Control») ломались на две строки при свободном месте рядом */
.head h1 { white-space: nowrap; }
/* 5.21: период Comparing Analytics на телефоне переносится под список, а не уезжает за экран (было: страница шире 375 px) */
.f .rng { flex-wrap: wrap; }
.f .rng .dates { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
@media (max-width: 520px) { .f .rng .dates input { width: 132px; min-width: 0; } }
.fgrid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 5.23: заголовки групп и пункты меню — в одну строку. Было: на снимке карточки рекламодателя «Traffic Data» сломался
   на две строки при свободных 150px — span во flex-строке переносил слова, пока шла отрисовка меню. Теперь перенос
   запрещён, а если название пункта (свои таблицы, пресеты) и правда длинное — многоточие вместо второй строки */
.nhead > span, .nitems a > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 5.24: Preview инъекции — четыре цифры в один ряд (сетка PP-карточек ставила их 3 + 1) */
.ppcards.pv4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 5.24: быстрый переход Ctrl+K / ⌘K */
.navsearch input { padding-right: 58px; }
.navkbd { position: absolute; right: 24px; top: calc(50% - 3px); transform: translateY(-50%); pointer-events: none; }
kbd { font: 600 11px/1 var(--mono); color: var(--muted); background: var(--paper); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; white-space: nowrap; }
.cmdk-shade { padding-top: 12vh; }
.cmdk { width: min(620px, 100%); background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(14, 18, 48, .28); overflow: hidden; align-self: flex-start; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--faint); }
.cmdk-in input { flex: 1; border: 0; background: none; padding: 4px 0; font-size: 16px; color: var(--ink); box-shadow: none; outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-it { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.cmdk-it > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cmdk-it .faint { flex: none; }
.cmdk-it.on, .cmdk-it:hover { background: var(--hover); }
.cmdk-it.on > span:first-child { color: var(--night); font-weight: 600; }
.cmdk-none { padding: 14px 12px; }

/* 5.24: капа по баерам — строки «баер · лидов в день · ×». Селекторы с .f: общее правило .f input {width:100%} иначе
   растягивало число на всю строку, а список баера сжимался в ноль */
.bcap-r { gap: 8px; margin-bottom: 6px; flex-wrap: nowrap; }
.f .bcap-r select { flex: 1 1 220px; width: auto; min-width: 160px; }
.f .bcap-r input:not([type=checkbox]) { flex: 0 0 140px; width: 140px; }
.bcap-r .xbtn { flex: none; }

/* 5.24: окно Auto Import — настройки слева, сводка справа */
.aim { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.aim-sum { position: sticky; top: 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 16px 14px; }
.ai-days { gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
@media (max-width: 900px) { .aim { grid-template-columns: minmax(0, 1fr); } }

/* 5.37: проверка настроек интеграции */
.lint-row { display: grid; grid-template-columns: 84px minmax(120px, 240px) 1fr; gap: 10px; align-items: baseline; padding: 6px 0;
  border-top: 1px solid var(--line); }
.lint-row:first-of-type { border-top: 0; }
.lint-row .mono { color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 900px) { .lint-row { grid-template-columns: auto 1fr; } .lint-row > span:last-child { grid-column: 1 / -1; } }
/* 5.37: доктор интеграции — что не так и что сделать */
.doctor { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--iris-soft); border: 1px solid var(--iris-line); font-size: 13px; }
.doctor ul { margin: 6px 0 0; padding-left: 18px; }
.doctor li + li { margin-top: 4px; }

/* 5.43: папка ротации, где никто из брокеров сейчас не берёт лиды */
.rt-set.rt-none { color: var(--bad); font-weight: 550; }
.rt-set .dot { margin-right: 6px; }
.captbl .capnow { min-width: 230px; }
.captbl .capnow .faint { margin-top: 3px; }
.captbl .capnow .faint .dot { display: none; }
/* 5.43: чип кампании в списке брокеров, у которой капа на сегодня выбрана */
.chip.capfull { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.chip.capfull .p { color: var(--warn); font-weight: 600; }
/* 5.43: сгруппированные подсказки Insights */
.ins-l li.ins-sub { display: block; padding: 0 0 0 22px; border: 0; }
.ins-l li.ins-sub > .ins-l { margin: 0; }
.ins-l li.grp .btn.link { margin-left: 6px; }
/* 5.43: колонка Settings дерева ротации на узких экранах — текст переносится внутри ячейки, а не наезжает на «+» и карандаш */
.rt-row > .rt-cap { min-width: 0; padding-right: 10px; }
.rt-row > .rt-cap .rt-set { overflow-wrap: anywhere; }
.rt-row > .rt-cap .bar { max-width: 100%; }
/* 5.43: дерево ротации (rt2) на ≤1180 — четыре колонки, как у старого дерева: колонка Active там скрыта, а пять дорожек rt2 с
   минимумами 300+190+170+76+112 не помещались, и текст Settings наезжал на «+» и карандаш */
@media (max-width: 1180px) { .rt2 .rt-head, .rt2 .rt-row { grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(140px, 1.1fr) 64px 104px; } }
/* 5.44: белый список IP ключа выключен — список виден, но бледный */
.ipl.off { opacity: .45; }
/* 5.44: лиды в Telegram — три колонки настроек */
.tgf-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 22px; margin: 6px 0 16px; }
.tgf-grid h3 { margin-top: 0; }
@media (max-width: 1180px) { .tgf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .tgf-grid { grid-template-columns: 1fr; } }
/* 5.44: ролики поворота богини — источник кадров для шейдера (web/goddess.js), сами не видны; в документе — чтобы браузер их играл */
.gd-src { position: absolute; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.gd-src video { width: 2px; height: 2px; }
/* 5.44.1: нити мглы в выделении выбранного пункта меню (web/nmark-mist.svg, tools/menu_mist.py) — тонкие линии медленно плывут по
   ночной плашке, петля 26 с без шва; у левого края гаснут, чтобы не спорить с бирюзовой точкой. Двигается фон, а не слой — срезанные
   углы плашки его обрезают. Было: ровный тёмно-синий градиент; размытые свечения вместо нитей владелец отверг («как в Paint»). */
.nmark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(/nmark-mist.svg) 0 50% / 496px 32px repeat-x;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 100%);
  animation: nmark-lines 26s linear infinite; }
@keyframes nmark-lines { to { background-position: -248px 50%; } }
@media (prefers-reduced-motion: reduce) { .nmark::after { animation: none; } }
/* 5.45: события постбека в дереве — цветом самого статуса. Было: «Rejected» и «Trash» зелёными плашками рядом с «Approved» — по цвету казалось,
   что постбек шлёт одни успехи. Цвета — те же, что у статуса лида в списках. */
.rchip.ev.ev-rejected, .rchip.ev.ev-invalid, .rchip.ev.ev-duplicate { background: var(--bad-soft); color: var(--bad-ink); }
.rchip.ev.ev-trash, .rchip.ev.ev-expired { background: var(--paper-2); color: var(--muted); border-color: var(--line-2); }
.rchip.ev.ev-sent, .rchip.ev.ev-cs, .rchip.ev.ev-new, .rchip.ev.ev-hold { background: var(--info-soft); color: var(--info); }
/* 5.45: карточка инъекции — «Task Statuses» стояла одна во втором ряду, справа от неё пустело две трети экрана, а таблица задач уезжала вниз.
   Теперь кольцо статусов — в третьей колонке под короткой «Auto Import». */
.injcol { display: grid; gap: 16px; min-width: 0; }
/* 5.46: липкая первая колонка в отчётах — у строки итога и шапки свой фон, иначе под липкой ячейкой просвечивали соседние колонки */
.tw table.stick thead th:first-child { background: var(--paper-2); z-index: 3; }
.tw table.stick tfoot td:first-child, .tw table.stick tr.tot td:first-child { position: sticky; left: 0; z-index: 2; background: var(--paper-2); }
table.cmp.stick thead tr:first-child th:first-child { z-index: 4; }
/* 5.46: окна. Десять окон начинаются не с <h2>, а со строки .ch (заголовок, «?», подпись справа) — у них не было верхнего отступа и линии:
   «Create Injection», «Auto Injector Tasks», «Edit API Settings», «Import from docs» упирались буквами в верхний край окна. */
.modal > .ch:first-child { margin: 0 -24px 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.modal > .ch:first-child h2 { font-size: 18px; }
/* Team и Note в одной строке окна New User: пятое поле сетки переносилось на свой ряд и висело одно */
.fgrid-tn { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 0 14px; }
@media (max-width: 760px) { .fgrid-tn { grid-template-columns: 1fr; } }
/* подсказка под полем, за которой сразу идёт следующее поле: без зазора подпись следующего поля читалась как продолжение подсказки */
.modal .hint + label.f, .modal .hint + .f, .modal label.chk + .f, .modal label.chk + label.f { margin-top: 12px; }
.pager:empty { display: none; }   /* пустая полоса листания под таблицей в окне (Auto Injector Tasks) выглядела как обрезанная строка */
/* 5.46: «Top …» на дашборде PP — узкие карточки: поля ячеек меньше, имя сжимается с многоточием, цифры всегда на месте */
table.tops th, table.tops td { padding-left: 8px; padding-right: 8px; }
table.tops { table-layout: fixed; width: 100%; }
table.tops th:first-child, table.tops td:first-child { width: 44px; }
table.tops th.n, table.tops td.n { width: 84px; }

/* 5.46: в карточке «подпись — значение» первая строка начиналась с линии под самым краем карточки (окно клика PP) */
.ncard .kv:first-child { border-top: 0; }

/* 5.46: «Traffic D…» в меню баера на снимке обхода. Подпись группы — flex-элемент шириной ровно по тексту; WebKit считал эту ширину на
   долю пикселя меньше нужной (76,23 px при тексте 76,4) — и ставил многоточие при 150 px свободного места. Подпись теперь занимает всё
   место до стрелки или счётчика: многоточие — только когда название и правда не помещается */
.nhead > span, .nitems a > span:first-child { flex: 1 1 auto; text-align: left; }

/* 5.55: первый экран дашборда — «сейчас»: кто из брокеров не берёт и почему, отказы ротации за сегодня, капы от 80 % */
.nowrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.nowrow .card { margin: 0; min-width: 0; }
.nowrow .ch h2 { white-space: nowrap; }
.nowl { list-style: none; margin: 0; padding: 0; }
.nowl li { padding: 8px 0; border-top: 1px solid var(--grid); min-width: 0; }
.nowl li:first-child { border-top: 0; padding-top: 2px; }
.nowl li.click { cursor: pointer; } .nowl li.click:hover .nl1 b { color: var(--iris); }
.nowl .nl1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowl .nl2 { color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.nowl .nlcap { display: flex; align-items: center; gap: 10px; }
.nowl .nlcap .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowl .nlcap .bar { flex: 1; min-width: 60px; margin: 0; }
.nowl .flag, .nownone .flag { margin-right: 6px; vertical-align: -2px; }
.nownone { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.nowmore { display: inline-block; margin-top: 8px; }

/* 5.55: Caps & Schedule по папкам — строка папки, часы кнопкой; капа в строке дерева открывает Cap & Hours */
.capbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.captbl.fcap tr.grp td { background: var(--paper-2); font-size: 12.5px; padding: 8px 14px; }
.captbl.fcap tr.grp .flag { margin-right: 7px; vertical-align: -2px; }
.captbl .qsched { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-capq { cursor: pointer; border-radius: 8px; }
.rt-capq:hover { background: var(--hover); }
.rt-rule .rchip[data-qcap] { cursor: pointer; }

/* 5.55: готовность брокера — полосой над вкладками карточки: счёт, прогресс, следующий шаг с Fix, «Put in rotation» */
.readybar { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r); padding: 10px 14px; margin: 0 0 14px; }
.readybar.ok { border-left-color: var(--ok); }
.readybar .rb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.readybar .rbar { display: inline-block; width: 120px; margin: 0; flex: none; }
.readybar.ok .rbar i { background: var(--ok); }
.readybar .rb-next { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.readybar .rb-next.must::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-right: 6px;
  background: var(--bad-soft); color: var(--bad-ink); font-size: 11px; font-weight: 700; }
.readybar .rlist { margin-top: 8px; border-top: 1px solid var(--grid); }
.trfl { max-height: 320px; overflow: auto; }
.trfl .flag { margin-right: 6px; vertical-align: -2px; }

/* 5.56: числа на вкладках Rejected Leads; пустая вкладка — тише. Поля вкладки уже: с числами девять вкладок на 1440 переносились */
.tabs2.cn a { padding: 9px 9px; gap: 5px; }
.tabs2 a.zero:not(.on) { color: var(--muted); }
.tabs2 a.zero:not(.on) .cnt { opacity: .7; }

/* 5.56: быстрые фильтры над таблицей лидов — кнопка поля; с выбором — значение на кнопке и крестик */
.qfbar { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.qfbar:empty { display: none; }
.qf { display: inline-flex; align-items: center; max-width: 300px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--paper); color: var(--muted); font-size: 12.5px; font-weight: 550; }
.qf:hover { border-color: var(--iris-line); color: var(--ink); }
.qf > button[data-qf] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 4px 10px 4px 12px; cursor: pointer; border-radius: 20px; }
.qf .qt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf svg { flex: none; }
.qf > button[data-qf] svg.i { transform: rotate(180deg); }  /* chev нарисован вверх — у выпадающего вниз, как у Actions */
.qf.on { border-color: var(--iris-line); background: rgba(76, 77, 255, .06); color: var(--night); }
.qf.on > button[data-qf] { padding-right: 4px; }
.qf.on.neg { background: var(--bad-soft); }
.qf .qx { display: inline-flex; border: 0; background: none; color: var(--muted); padding: 3px; margin-right: 4px; border-radius: 50%; cursor: pointer; }
.qf .qx:hover { background: var(--bad-soft); color: var(--bad); }
.qfpop { width: 300px; padding: 12px; }
.qfpop .seg.ie { margin-bottom: 8px; }
.qfpop .seg.ie span { min-width: 72px; text-align: center; }
.qf-f { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
/* 5.56: редкие поля группы в панели Filters (Aff Sub 6–20) — под «Show N more»; по поиску видны */
.fp-b:not(.q) .fp-g:not(.all) .fp-i.more { display: none; }
.fp-mb { margin: 2px 22px 4px; }
.fp-b.q .fp-mb, .fp-g.all .fp-mb, .fp-g.shut .fp-mb { display: none; }

/* 5.58: закреплённые строки дерева денег — что решает до правил (сумма брокера) и после них (правило не подошло); не перетаскиваются */
.rtree .rt-row.pin { background: var(--paper-2); cursor: default; }
.rtree .rt-row.pin .rt-t b { font-weight: 600; color: var(--ink-2); }
/* подпись и заголовок закреплённой строки переносятся, а не режутся: на 1180 и уже обход находил «ни одно правило выше не подошло» и «Broker amount from postback» с многоточием, а прочесть их больше негде */
.rtree .rt-row.pin .rt-t, .rtree .rt-row.pin .rt-t b, .rtree .rt-row.pin .rt-t span { white-space: normal; overflow: visible; text-overflow: clip; }
.rtree .rt-ico.pin { background: var(--haze-2); color: var(--muted); }
.rtree .rt-ico.pin svg { width: 14px; height: 14px; }

/* 5.59 (ревью денег): валюта — строкой под названием денежной колонки, одна на колонку. Цвет сумм: красным — только где плохо
   (отрицательный профит, переплата); выплаты, ставки в дереве и поправки CRG — цветом текста. Было: выплаты (наш расход) зелёные,
   а недобор CRG по выплатам (наша экономия) — красный */
.thcur { display: block; font-size: 11px; font-weight: 450; color: var(--muted); }