/* ──────────────────────────────────────────────────────────────────────────
   BoomVPN — оформление админ-панели: чёрная плоская тема.

   Правила, на которых держится и вид, и скорость:
   • Экран — чёрный фон, на нём меню и одна «плоскость» с содержимым раздела.
     Карточки и формы открываются частью этой плоскости (колонка справа, на
     телефоне — отдельный экран), а не окном поверх затемнения.
   • Никакого размытия и полупрозрачных слоёв: все поверхности непрозрачные,
     прокрутка ничего не пересчитывает.
   • Вёрстка списков и плиток зависит от ширины самой плоскости (container
     queries), а не окна: когда справа открыта карточка, список сам
     становится компактным.
   • Анимируются только transform и opacity.
   ────────────────────────────────────────────────────────────────────────── */

/*
 * Палитра. У каждого цвета три роли, иначе не получить и яркость, и читаемость:
 *   --X        яркий    — точки статусов, заливки, подсветка;
 *   --X-ink    чернила  — текст и значки со смыслом. Контраст с фоном ≥ 4.5:1;
 *   --X-solid  сплошной — фон под белым текстом (кнопки), тоже ≥ 4.5:1.
 * Акцент панели — бирюзовый; исторически он зовётся --blue.
 *
 * Тема задаётся атрибутом data-theme на <html> (его ставит theme.js ещё до
 * отрисовки): по умолчанию тёмная, «Светлая» и «Авто» — выбор вручную.
 */
:root {
  color-scheme: light;

  --bg:        #ececec;            /* фон за плоскостью и под меню */
  --plane:     #ffffff;            /* плоскость раздела и карточки справа */
  --bg2:       #f4f4f4;            /* карточки и списки на плоскости */
  --bg3:       #e8e8e8;
  --line:      #dcdcdc;            /* рамки на фоне */
  --fill:      rgba(0,0,0,.055);
  --fill2:     rgba(0,0,0,.10);
  --fill3:     rgba(0,0,0,.03);
  --hover:     rgba(0,0,0,.035);
  --press:     rgba(0,0,0,.075);

  --label:     #111111;
  --label2:    #5c5c5c;            /* вторичный текст — ≥ 4.5:1 на карточке */
  --label3:    #858585;            /* подсказки в полях — ≥ 3:1 */
  --label4:    #c2c2c2;            /* декор: шевроны */
  --sep:       rgba(0,0,0,.09);

  --blue:   #16b9cf;  --blue-ink:   #087a89;  --blue-solid:   #0b7f8f;
  --green:  #2cc04d;  --green-ink:  #177632;  --green-solid:  #1a7f38;
  --orange: #ff7a00;  --orange-ink: #a84500;  --orange-solid: #c25400;
  --red:    #f0383c;  --red-ink:    #c40627;  --red-solid:    #d70f25;
  --purple: #b455e0;  --purple-ink: #8e2fb0;
  --indigo: #6155f5;  --indigo-ink: #4a3fd0;
  --teal:   #00c3d0;  --teal-ink:   #006d78;
  --gray:   #9a9a9a;  --gray-ink:   #5c5c5c;
  --yellow: #ffcc00;  --pink: #ff2d55;
  --on-accent: #00252b;            /* текст на бирюзовой заливке */

  /* Графики: основной цвет ряда и цвет «сегодня». */
  --orange-bar: #f07400;  --orange-today: #111111;
  --blue-bar:   #10a7bb;  --blue-today:   #111111;

  --tag-pct:   14%;                /* насыщенность подложки меток */

  /* Главная кнопка — контрастная к теме, как в кабинете Aeza. */
  --btn:       #1f1f1f;  --btn-ink: #ffffff;  --btn-hi: #383838;
  --seg-on:    #ffffff;
  --seg-shadow: 0 1px 4px rgba(0,0,0,.14);
  --knob:      #ffffff;
  --bar:       #ffffff;            /* таббар на телефоне */
  --toast:     #1f1f1f;  --toast-ink: #ffffff;  --toast-line: #1f1f1f;
  --scrim:     rgba(0,0,0,.32);
  --picker-filter: none;

  --tg-bg:     #99b1c7;
  --tg-bubble: #effdde;
  --tg-text:   #000;
  --tg-link:   #2a7cc0;

  /* Геометрия */
  --r-card:    20px;
  --r-inner:   14px;
  --side:      256px;
  --pad:       24px;               /* поля раздела по бокам */
  --detail:    440px;              /* ширина колонки с карточкой */
  --tab-h:     62px;
  --tab-gap:   max(10px, calc(var(--safe-b) - 10px));
  --safe-t:    env(safe-area-inset-top, 0px);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-l:    env(safe-area-inset-left, 0px);
  --safe-r:    env(safe-area-inset-right, 0px);

  --ease:      cubic-bezier(.32,.72,0,1);
  --t-fast: .24s;  --t: .36s;  --t-slow: .52s;   /* длительности: отклик, смена, перемещение */
  /* Пружина Apple .smooth (без отскока) для всего, что перемещается. Ощущаемая
     длительность — 0,7 от заданной: .56s ощущается как 0,4 с. */
  --smooth: linear(0 0%, 0.0011 0.54%, 0.0096 1.65%, 0.0322 3.16%, 0.0727 5%, 0.1317 7.15%, 0.2066 9.57%, 0.293 12.25%, 0.3855 15.17%, 0.4789 18.32%, 0.5685 21.68%, 0.6508 25.25%, 0.7236 29.02%, 0.7859 32.99%, 0.8375 37.14%, 0.8791 41.48%, 0.9118 45.99%, 0.9368 50.67%, 0.9556 55.52%, 0.9693 60.54%, 0.9791 65.72%, 0.986 71.05%, 0.9908 76.55%, 0.9941 82.19%, 0.9962 87.98%, 0.9976 93.92%, 1 100%);
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --ease-glide: cubic-bezier(.33,1,.68,1);  /* мягкое торможение — для всего, что въезжает */
  --ease-in:   cubic-bezier(.45,0,.55,1);    /* плавный уход — для того, что исчезает */
  --spring:    cubic-bezier(.3,1.1,.5,1);    /* едва заметная отдача, без «пружины» */
  --fs:        15px;

  --font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: var(--font-display);   /* цифры — тем же шрифтом, без скруглённого */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #000000;
  --plane:     #131313;
  --bg2:       #1e1e1e;
  --bg3:       #2b2b2b;
  --line:      #272727;
  --fill:      rgba(255,255,255,.07);
  --fill2:     rgba(255,255,255,.13);
  --fill3:     rgba(255,255,255,.04);
  --hover:     rgba(255,255,255,.04);
  --press:     rgba(255,255,255,.09);

  --label:     #f4f4f4;
  --label2:    #a6a6a6;
  --label3:    #7d7d7d;
  --label4:    #4d4d4d;
  --sep:       rgba(255,255,255,.075);

  --blue:   #16b9cf;  --blue-ink:   #4cd3e5;  --blue-solid:   #0b7f8f;
  --green:  #2cc04d;  --green-ink:  #5fd97c;  --green-solid:  #1a7f38;
  --orange: #ff7a00;  --orange-ink: #ffa24d;  --orange-solid: #b85200;
  --red:    #ff4a4d;  --red-ink:    #ff8581;  --red-solid:    #d42430;
  --purple: #c873ee;  --purple-ink: #dc9cff;
  --indigo: #7580ff;  --indigo-ink: #a8b1ff;
  --teal:   #00d2e0;  --teal-ink:   #4fdce6;
  --gray:   #6f6f6f;  --gray-ink:   #a6a6a6;
  --yellow: #ffd600;  --pink: #ff375f;

  --orange-bar: #ff7a00;  --orange-today: #ffffff;
  --blue-bar:   #16b9cf;  --blue-today:   #ffffff;

  --tag-pct:   18%;

  --btn:       #f2f2f2;  --btn-ink: #131313;  --btn-hi: #ffffff;
  --seg-on:    #4d4d4d;
  --seg-shadow: none;
  --knob:      #8c8c8c;
  --bar:       #141414;
  --toast:     #252525;  --toast-ink: #f4f4f4;  --toast-line: #353535;
  --scrim:     rgba(0,0,0,.62);
  --picker-filter: invert(1);

  --tg-bg:     #0e1621;
  --tg-bubble: #2b5278;
  --tg-text:   #fff;
  --tg-link:   #71b7e6;
}

/* Телефон: рамки вокруг плоскости нет — содержимое лежит прямо на фоне. */
@media (max-width: 760px) {
  :root { --fs: 16px; --pad: 16px; --bg: #ffffff; }
  :root[data-theme="dark"] { --bg: #000000; --plane: #000000; --bg2: #161616; --bg3: #242424; }
}

/* ── База ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  height: 100%;
  background: var(--bg);
  color: var(--label);
  font: 400 var(--fs)/1.35 var(--font);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
a { color: var(--blue-ink); text-decoration: none; }
a.row { color: var(--label); }   /* строка-ссылка выглядит как строка, не как ссылка */
code, .mono { font-family: var(--mono); font-size: .88em; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sheet:focus-visible, .alert:focus-visible { outline: none; }

.ic {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Вход ─────────────────────────────────────────────────────────────── */
.login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l));
  background: var(--bg);
  overflow-y: auto;
}
.login-card {
  width: min(380px, 100%);
  padding: 32px 24px 20px; border-radius: 26px;
  background: var(--plane); border: 1px solid var(--line);
  text-align: center;
  display: flex; flex-direction: column; align-items: stretch;
}
.login-card p  { color: var(--label2); font-size: 15px; margin: 12px 0 24px; }
.login-card .btn { margin-top: 12px; }
.login-err { color: var(--red-ink); font-size: 14px; min-height: 20px; margin-top: 10px; }
.login-card.shake { animation: shake .42s var(--ease-out); }
@keyframes shake { 0%,100%{transform:none} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }

/* Надпись BoomVPN: наклонная, «VPN» — акцентным цветом. Обычный текст. */
.wordmark {
  display: inline-block;
  font: italic 700 20px/1 var(--font-display); letter-spacing: -.035em;
  color: var(--label); white-space: nowrap;
}
.wordmark span { color: var(--blue-ink); }
.wordmark-lg { font-size: 44px; letter-spacing: -.045em; margin: 4px auto 0; }

.field { position: relative; }
.input {
  width: 100%; height: 52px; padding: 0 18px;
  background: var(--bg2); border: 0; border-radius: 16px;
  font-size: 17px; color: var(--label);
  -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--t);
}
.input::placeholder { color: var(--label2); }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--blue); }
.pw-field .input { padding-right: 52px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  color: var(--label2); border-radius: 12px;
}

/* ── Оболочка ─────────────────────────────────────────────────────────── */
.app { position: fixed; inset: 0; display: flex; background: var(--bg); }

/* Плоскость раздела: одна на весь экран, со скруглёнными углами. */
.pages {
  position: relative; flex: 1; min-width: 0;
  margin: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) 0;
  background: var(--plane); border-radius: 18px; overflow: hidden;
}

/* Меню — просто список на чёрном фоне: подпись слева, значок справа. */
.sidebar {
  width: var(--side); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  min-height: 0; overflow: hidden;
}
/* Анимация сворачивания — только после первой отрисовки (класс ставит
   скрипт), чтобы при загрузке свёрнутое меню не «складывалось» на глазах. */
.sb-anim .sidebar { transition: width .56s var(--smooth); }
.sb-anim .sb-item, .sb-anim .sb-card-row { transition: padding .56s var(--smooth), gap .56s var(--smooth), background-color var(--t-fast), color var(--t-fast); }
.sb-card { border: 1px solid var(--line); border-radius: 20px; flex-shrink: 0; }
.sb-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 50px; padding: 10px 14px; text-align: left; color: var(--label);
}
/* Название в шапке меню — крупное: рамка держится на нём одном. */
.sb-card .wordmark { font-size: 34px; letter-spacing: -.045em; padding: 14px 4px 12px; }
.sb-card-row { position: relative; overflow: hidden; }
.sb-wm > span { color: var(--label); transition: opacity var(--t) ease; }
/* Свёрнутое: «BV» по центру рамки, полное название гаснет и обрезается. */
.sb-wm-mini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; font-size: 26px; letter-spacing: -.06em; }
.sb-wm-mini span { color: var(--blue-ink); }

.sb-nav { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; }
/* Подсветка раздела — один бегунок, он переезжает к выбранному пункту. */
.sb-ind {
  position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 44px;
  border-radius: 14px; background: var(--fill2); pointer-events: none; opacity: 0;
}
.sb-ind.on { opacity: 1; }
.sb-ind.ready { transition: transform .56s var(--smooth), opacity var(--t); }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-gap { height: 10px; flex-shrink: 0; }
.sb-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  height: 44px; flex-shrink: 0; padding: 0 12px 0 14px; border-radius: 14px;
  color: var(--label2); font-size: 15px; font-weight: 500; text-align: left;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sb-item .ic { width: 20px; height: 20px; flex-shrink: 0; }
.sb-l { min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .2s ease; }
.sb-theme-btn { display: none; }
.sb-fold .ic { transition: transform .56s var(--smooth); }

/* Свёрнутое меню: остаются значки, подписи — подсказкой при наведении.
   Значок стоит по центру; подписи гаснут и обрезаются краем. */
:root[data-sb="folded"] { --side: 76px; }
:root[data-sb="folded"] .sb-l { opacity: 0; }
/* Без промежутка: у скрытой подписи нулевая ширина, и значок встаёт ровно посередине. */
:root[data-sb="folded"] .sb-item { padding: 0 16px; gap: 0; }
:root[data-sb="folded"] .sb-wm-full { opacity: 0; }
:root[data-sb="folded"] .sb-wm-mini { opacity: 1; }
:root[data-sb="folded"] .sb-theme { display: none; }
:root[data-sb="folded"] .sb-theme-btn { display: flex; }
:root[data-sb="folded"] .sb-fold .ic { transform: scaleX(-1); }
@media (hover: hover) { .sb-item:hover { background: var(--fill2); color: var(--label); } }
.sb-item:active { background: var(--fill2); }
.sb-item { position: relative; z-index: 1; }
.sb-item.on { color: var(--label); }
.sb-nav:not(:has(.sb-ind.on)) .sb-item.on { background: var(--fill2); }
@media (hover: hover) { .sb-item.on:hover { background: none; } }
.sb-foot { flex-shrink: 0; }
.sb-theme { padding: 0 0 8px; }
.seg-theme { width: 100%; }
.row[data-theme-slot] { padding-top: 10px; padding-bottom: 10px; }
/* Смена темы: короткий перекрёстный переход вместо резкой вспышки. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: ease-in-out; }
.sb-logout { color: var(--label2); }
@media (hover: hover) { .sb-logout:hover { color: var(--red-ink); } }

/* Колонка справа: карточка пользователя, формы, списки по шагу. Слои лежат
   стопкой — видно верхний, под ним ждут предыдущие. */
.detail { display: none; position: relative; flex: 0 0 var(--detail); min-width: 0;
  margin: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) 0; }
.app.has-detail .detail { display: block; }
.app.has-detail .pages { margin-right: 12px; }
/* Колонка в пути (движение ведёт скрипт, см. setDetailOpen): плоскость
   меняет ширину на каждом кадре, а колонка лежит поверх неё на своём
   месте и сдвигается transform'ом; уходя — растворяется. */
.app.col-moving .sheet { transition: none; }
@media (min-width: 1200px) {
  .detail.floating { display: block; position: fixed; z-index: 3; margin: 0; width: var(--detail); will-change: transform, opacity;
    top: calc(12px + var(--safe-t)); bottom: calc(12px + var(--safe-b)); right: calc(12px + var(--safe-r)); }
}
.dl { position: absolute; inset: 0; }
.dl.closing { pointer-events: none; }
.sheet {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--plane); color: var(--label);
  border-radius: 18px; overflow: hidden;
  opacity: 0; transform: translateX(20px);
  transition: transform .6s var(--smooth), opacity var(--t) ease-out;
}
.dl.open .sheet { opacity: 1; transform: none; }
/* Под новым слоем прежний уходит чуть влево и гаснет, при «назад» — возвращается. */
.dl.open.covered .sheet { opacity: 0; transform: translateX(-14px); transition: transform .6s var(--smooth), opacity var(--t) ease-out; }
.dl.closing .sheet { opacity: 0; transform: translateX(14px); transition: transform var(--t) var(--ease-in), opacity .3s var(--ease-in); }
.dl-edge { display: none; }

/* Экран поуже: колонка не помещается рядом — занимает всю плоскость. */
@media (max-width: 1199px) {
  .detail { position: fixed; z-index: 50; margin: 0;
    top: calc(12px + var(--safe-t)); bottom: calc(12px + var(--safe-b)); right: calc(12px + var(--safe-r));
    left: calc(var(--side) + var(--safe-l)); }
  .app.has-detail .pages { margin-right: calc(12px + var(--safe-r)); }
  .sh-head, .sheet-body { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; }
}

/* Таббар (телефон) — плотная плавающая панель с бегунком под активной вкладкой */
.tabbar {
  display: none;
  position: fixed; z-index: 40;
  left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: var(--tab-gap);
  height: var(--tab-h); padding: 4px;
  border-radius: 22px; background: var(--bar); border: 1px solid var(--line);
}
.tab-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 5);
  border-radius: 17px;
  background: var(--fill2);
  transform: translateX(calc(var(--ti, 0) * 100%));
  transition: transform .56s var(--smooth);
}
.tab {
  position: relative; z-index: 1;
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-radius: 17px;
  color: var(--label2); font-size: 10px; font-weight: 600; letter-spacing: -.025em;
  transition: color var(--t), transform var(--t) var(--ease-glide);
}
.tab:active { transform: scale(.94); }
.tab .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.tab.on { color: var(--label); }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Узкий телефон (360–375 px): «Пользователи» помещается целиком. */
@media (max-width: 380px) { .tab { font-size: 9.5px; letter-spacing: -.04em; } .tabbar { left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); } }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .tabbar { display: flex; }
  /* Под таббаром содержимое плавно гаснет, а не выглядывает из-под панели. */
  .app::after {
    content: ""; position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; pointer-events: none;
    height: calc(var(--tab-h) + var(--tab-gap) + 22px);
    background: linear-gradient(to bottom, transparent, var(--bg) 42%);
  }
  .pages { margin: 0; border-radius: 0; }
  .app.has-detail .pages { margin: 0; }
  /* Карточка — отдельный экран: выезжает справа и закрывает всё, включая таббар. */
  .detail { inset: 0; z-index: 60; }
  .sheet { border-radius: 0; opacity: 1; transform: translateX(100%); transition: transform .62s var(--smooth); will-change: transform; }
  .dl.closing .sheet { opacity: 1; transform: translateX(100%); transition: transform .36s cubic-bezier(.4,0,.7,.4); }
  .sheet.dragging { transition: none; }
  /* Как в iOS: то, что под карточкой, отъезжает на четверть влево и темнеет,
     а при смахивании возвращается вслед за пальцем (--sp — доля пути). */
  .sheet::before, .pages::after {
    content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none;
    background: #000; opacity: 0; transition: opacity .5s var(--ease);
  }
  .dl.open.covered .sheet { opacity: 1; transform: translateX(calc(-24% * (1 - var(--sp, 0)))); transition: transform .62s var(--smooth); }
  .dl.covered .sheet::before, .app.covered .pages::after { opacity: calc(.32 * (1 - var(--sp, 0))); }
  .pages { transition: transform .62s var(--smooth); }
  .app.covered .pages { transform: translateX(calc(-24% * (1 - var(--sp, 0)))); }
  .app.swiping .pages, .app.swiping .pages::after, .app.swiping .dl.covered .sheet, .app.swiping .dl.covered .sheet::before { transition: none; }
  /* Узкая полоска у левого края: за неё экран смахивается назад. */
  .dl-edge { display: block; position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: 14px; touch-action: none; }
}

/* ── Страница ─────────────────────────────────────────────────────────── */
.page {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--label4) transparent;
  container: page / inline-size;
  --wrap-max: 1320px;              /* ширина колонки содержимого; она по центру плоскости */
}
/* Разделы-настройки — узкой колонкой: длинные строки на всю ширину читать трудно. */
.page[data-page="groups"], .page[data-page="ratings"], .page[data-page="interface"], .page[data-page="servers"] { --wrap-max: 880px; }
.page[data-page="journey"] { --wrap-max: 1000px; }
.page[data-page="broadcast"] { --wrap-max: 1200px; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Шапка раздела — строка с его кнопками. Заголовка нет: раздел подсвечен в
   меню. Когда содержимое уезжает под шапку, под кнопками появляется подложка.
   На телефоне меню нет, поэтому там название стоит маленьким по центру. */
.navbar {
  position: sticky; top: 0; z-index: 20;
  height: calc(60px + var(--safe-t));
  /* Кнопки стоят над правым краем колонки содержимого, а не у края плоскости. */
  --edge: max(0px, calc((100cqw - var(--wrap-max)) / 2));
  padding: var(--safe-t) calc(var(--pad) + var(--edge) + var(--safe-r)) 0 calc(var(--pad) + var(--edge) + var(--safe-l));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
}
.navbar > * { position: relative; pointer-events: auto; }
.navbar::before {
  content: ""; position: absolute; inset: 0;
  background: var(--plane); border-bottom: 1px solid var(--sep);
  opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.navbar.scrolled::before { opacity: 1; }
.nb-sent { height: 1px; margin-bottom: -1px; }
.nb-title {
  grid-column: 2; display: none;
  font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw;
}
.nb-left  { grid-column: 1; display: none; gap: 8px; justify-self: start; }
.nb-right { grid-column: 3; display: flex; align-items: center; gap: 8px; justify-self: end; }
.nb-btn {
  position: relative;
  min-width: 40px; height: 40px; padding: 0 9px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  background: var(--bg2); color: var(--label); font-size: 16px; font-weight: 500;
  transition: transform var(--t-fast) var(--ease-glide), background-color var(--t-fast);
}
.nb-btn .ic { width: 20px; height: 20px; stroke-width: 2; }
@media (hover: hover) { .nb-btn:hover { background: var(--bg3); } }
.nb-btn:active { transform: scale(.92); }
.nb-btn .dot {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 2px var(--bg2);
}
.nb-btn.spin .ic { animation: spin .8s linear infinite; }
.nb-back { padding: 0 12px 0 6px; }
.nb-back .ic { width: 22px; height: 22px; stroke-width: 2.3; }
/* Сколько нашлось — рядом с кнопками списка. */
.nb-count { margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-count::before { content: "Найдено "; font-weight: 400; color: var(--label2); }
.nb-count:empty { display: none; }

.wrap {
  position: relative;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: 4px calc(var(--pad) + var(--safe-r)) calc(40px + var(--safe-b)) var(--pad);
}

@media (max-width: 760px) {
  .navbar { height: calc(56px + var(--safe-t)); }
  .nb-title { display: block; }
  .nb-left { display: flex; }
  .nb-btn { min-width: 44px; height: 44px; border-radius: 14px; }
  .nb-count::before { content: none; }
  .nb-count { color: var(--label2); }
  .wrap { padding: 4px calc(var(--pad) + var(--safe-r)) calc(var(--tab-h) + var(--tab-gap) + 28px) calc(var(--pad) + var(--safe-l)); }
}

/* ── Секции и сгруппированные списки ─────────────────────────────────── */
.sec { margin-top: 28px; }
.sec:first-child { margin-top: 0; }
/* Скрытый первым блок (ход операции, пока её нет) не даёт следующему лишний отступ сверху. */
.sec[hidden]:first-child + .sec { margin-top: 0; }
.sec-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 4px 10px;
  font: 700 18px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--label);
}
.sec-h .btn-link { font: 500 14px var(--font); letter-spacing: 0; }
.sec-f { padding: 8px 6px 0; font-size: 13px; color: var(--label2); line-height: 1.4; }

.list {
  background: var(--bg2);
  border-radius: var(--r-card);
  overflow: hidden;
}
.row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 11px 16px;
  width: 100%; text-align: left;
  transition: background-color var(--t-fast);
}
.row + .row::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--sep-inset, 16px);
  border-top: 1px solid var(--sep);
}
.row.tap { cursor: pointer; }
@media (hover: hover) { .row.tap:hover { background: var(--hover); } }
.row.tap:active { background: var(--press); }
.row-main { flex: 1; min-width: 0; }
.row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: .82em; color: var(--label2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-val { color: var(--label2); text-align: right; flex-shrink: 0; max-width: 60%; overflow-wrap: anywhere; }
.row .chev { width: 14px; height: 14px; stroke-width: 2.6; color: var(--label4); flex-shrink: 0; margin-right: -4px; }
/* Значок строки: плоский квадрат с подложкой в цвет значка. */
.row-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tint, var(--blue)) var(--tag-pct), transparent);
  color: var(--ink, var(--blue-ink));
}
.row-ico .ic { width: 19px; height: 19px; stroke-width: 2; }
.row.danger { color: var(--red-ink); justify-content: center; font-weight: 500; }
.row.accent { color: var(--blue-ink); font-weight: 500; }
.row .check { color: var(--blue); width: 20px; height: 20px; stroke-width: 2.6; flex-shrink: 0; opacity: 0; transform: scale(.4); transition: opacity var(--t), transform var(--t-slow) var(--spring); }
.row.sel .check { opacity: 1; transform: none; }

/* Статус — везде одинаково: цветная точка и подпись обычным текстом. Так
   «Активна», «Истекла» и «Оплачен» стоят на одной линии и одного размера. */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 14px/1.3 var(--font); white-space: nowrap; letter-spacing: 0;
  color: var(--label); vertical-align: middle; font-variant-numeric: tabular-nums;
}
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tint, var(--gray)); }
.tag:has(> .ic)::before, .tag:has(> .spinner)::before { display: none; }
.tag .ic { width: 15px; height: 15px; stroke-width: 2.3; color: var(--ink, var(--gray-ink)); margin-right: -1px; }
/* Короткая метка-уточнение («Семья», «Бан», «Мост») — маленькая плашка. */
.tag-sm {
  height: 20px; padding: 0 7px; border-radius: 6px; gap: 4px;
  font: 600 11px/1 var(--font); color: var(--ink, var(--gray-ink));
  background: color-mix(in srgb, var(--tint, var(--gray)) var(--tag-pct), transparent);
}
.tag-sm::before { display: none; }
/* Класс цвета задаёт сразу все три роли: яркий, чернила, сплошной. */
.t-blue   { --tint: var(--blue);   --ink: var(--blue-ink);   --solid: var(--blue-solid); }
.t-green  { --tint: var(--green);  --ink: var(--green-ink);  --solid: var(--green-solid); }
.t-red    { --tint: var(--red);    --ink: var(--red-ink);    --solid: var(--red-solid); }
.t-orange { --tint: var(--orange); --ink: var(--orange-ink); --solid: var(--orange-solid); }
.t-purple { --tint: var(--purple); --ink: var(--purple-ink); --solid: var(--purple-ink); }
.t-indigo { --tint: var(--indigo); --ink: var(--indigo-ink); --solid: var(--indigo-ink); }
.t-teal   { --tint: var(--teal);   --ink: var(--teal-ink);   --solid: var(--teal-ink); }
.t-gray   { --tint: var(--gray);   --ink: var(--gray-ink);   --solid: var(--gray-ink); }

/* Аватары-монограммы: ровная цветная заливка, поверх — фото из Telegram */
.av {
  --h: 210;
  position: relative;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--font-display); color: #fff;
  background: linear-gradient(160deg, oklch(0.62 0.11 var(--h)), oklch(0.5 0.12 calc(var(--h) + 20)));
  text-transform: uppercase; overflow: hidden;
}
.av-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  opacity: 0; transition: opacity .45s ease-out;
}
.av-img.on { opacity: 1; }
.av-lg { width: 68px; height: 68px; font-size: 25px; }
.av-emoji { font-size: 20px; }
.av-lg.av-emoji { font-size: 34px; }
.av-sm.av-emoji { font-size: 17px; }
.av-sm { width: 34px; height: 34px; font-size: 13px; }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 15px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-glide), opacity var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.btn .ic { width: 18px; height: 18px; stroke-width: 2.1; }
.btn:disabled { opacity: .38; cursor: default; }
.btn:not(:disabled):active { transform: scale(.965); }
/* Главная кнопка — светлая на тёмном (и наоборот), без цветной заливки. */
.btn-filled { color: var(--btn-ink); background: var(--btn); }
@media (hover: hover) { .btn-filled:not(:disabled):hover { background: var(--btn-hi); } }
.btn-filled.t-green, .btn-filled.t-red, .btn-filled.t-orange { color: #fff; background: var(--solid); }
@media (hover: hover) { .btn-filled.t-green:not(:disabled):hover, .btn-filled.t-red:not(:disabled):hover, .btn-filled.t-orange:not(:disabled):hover { background: color-mix(in srgb, var(--solid) 88%, #fff); } }
.btn-tinted { background: color-mix(in srgb, var(--tint, var(--blue)) var(--tag-pct), transparent); color: var(--ink, var(--blue-ink)); }
@media (hover: hover) { .btn-tinted:not(:disabled):hover { background: color-mix(in srgb, var(--tint, var(--blue)) 26%, transparent); } }
.btn-gray { background: var(--fill2); color: var(--label); }
@media (hover: hover) { .btn-gray:not(:disabled):hover { background: color-mix(in srgb, var(--label) 20%, transparent); } }
.btn-plain { background: none; color: var(--ink, var(--blue-ink)); padding: 0 6px; }
.btn-large { height: 54px; border-radius: 16px; font-size: 16px; padding: 0 22px; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 10px; }
.btn-sm .ic { width: 15px; height: 15px; }
.btn-icon { width: 32px; padding: 0; }
.btn-link { color: var(--blue-ink); padding: 0; height: auto; border-radius: 4px; }
.btn-link:active { opacity: .5; }
.btn.busy { pointer-events: none; color: transparent !important; }
.btn.busy .ic { visibility: hidden; }
.btn.busy .spinner { position: absolute; color: var(--ink, var(--blue-ink)); }
.btn-filled.busy .spinner { color: var(--btn-ink); }
.btn-filled.t-green.busy .spinner, .btn-filled.t-red.busy .spinner { color: #fff; }
.btn-gray.busy .spinner { color: var(--label); }

.spinner {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2.2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  animation: spin .75s linear infinite;
}
.spinner-lg { width: 30px; height: 30px; border-width: 2.8px; color: var(--label2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Поиск, чипы, сегменты ────────────────────────────────────────────── */
.search {
  position: relative; display: flex; align-items: center;
  height: 46px; border-radius: 14px; background: var(--bg2);
  margin-bottom: 14px; max-width: 460px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--t);
}
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue); }
.search > .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--label2); stroke-width: 2.2; pointer-events: none; }
.search input {
  width: 100%; height: 100%; border: 0; background: none;
  padding: 0 42px 0 42px; font-size: 16px; color: var(--label);
  -webkit-appearance: none; appearance: none; border-radius: 14px;
}
.search input::placeholder { color: var(--label3); }
/* Поля типа search без системных крестиков: у поиска свой, в остальных не нужен. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search-x {
  position: absolute; right: 6px; width: 34px; height: 34px; border-radius: 10px;
  display: none; align-items: center; justify-content: center; color: var(--label2);
}
.search-x .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.search.has-text .search-x { display: flex; }
@media (max-width: 760px) { .search { max-width: none; } }

.chips {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad) - var(--safe-r)) 16px calc(-1 * var(--pad));
  padding: 2px calc(var(--pad) + var(--safe-r)) 2px var(--pad);
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 760px) { .chips { margin-left: calc(-1 * var(--pad) - var(--safe-l)); padding-left: calc(var(--pad) + var(--safe-l)); } }
.chips::-webkit-scrollbar { display: none; }
/* С мышью горизонтально не прокрутить — фильтры переносятся на новую строку,
   а не прячутся за правым краем. */
@media (hover: hover) and (pointer: fine) {
  .chips { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; row-gap: 8px; }
}
.chip {
  flex-shrink: 0; height: 36px; padding: 0 15px; border-radius: 18px;
  background: var(--bg2); color: var(--label2);
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--t), color var(--t), transform var(--t-fast) var(--ease-glide);
}
@media (hover: hover) { .chip:not(.on):hover { background: var(--bg3); color: var(--label); } }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--btn); color: var(--btn-ink); font-weight: 600; }

/* Выбранные фильтры — в той же прокручиваемой ленте, что и чипы, после
   разделителя: их появление не сдвигает список. */
.chips-group, .tokens { display: contents; }
.tokens::before { content: ""; flex-shrink: 0; width: 1px; margin: 7px 4px; background: var(--sep); }
.token {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; white-space: nowrap;
  height: 36px; padding: 0 6px 0 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--blue) var(--tag-pct), transparent); color: var(--blue-ink);
  font-size: 13px; font-weight: 600;
}
.token button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: inherit; }
.token button .ic { width: 12px; height: 12px; stroke-width: 2.8; }
.token button:hover { background: color-mix(in srgb, var(--blue) 18%, transparent); }

/* Сегменты — «таблетка» с бегунком под выбранным пунктом */
.seg {
  --n: 2; --i: 0;
  position: relative; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column;
  height: 38px; padding: 3px; border-radius: 19px; background: var(--fill);
  isolation: isolate;
}
.seg::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 16px; background: var(--seg-on); box-shadow: var(--seg-shadow);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .56s var(--smooth);
}
.seg button {
  font-size: 13.5px; font-weight: 500; color: var(--label2); border-radius: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px;
  transition: color var(--t), opacity var(--t-fast);
}
.seg button.on { font-weight: 600; color: var(--label); }
.seg button:not(.on):active { opacity: .5; }

/* Переключатель: крупный, бирюзовый во включённом положении */
.switch {
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
  position: relative; width: 52px; height: 30px; border-radius: 15px;
  background: var(--fill2); cursor: pointer;
  transition: background-color var(--t);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--knob); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .5s var(--smooth), background-color var(--t);
}
.switch:active::after { transform: scaleX(1.12); }
.switch:checked { background: var(--blue); }
.switch:checked::after { transform: translateX(22px); background: #fff; }
.switch:checked:active::after { transform: translateX(20px) scaleX(1.12); }

.date-in {
  height: 38px; padding: 0 12px; border-radius: 12px; border: 0;
  background: var(--fill2); color: var(--label); font-size: 15px;
  -webkit-appearance: none; appearance: none; min-width: 0;
}
.date-in::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; filter: var(--picker-filter); }

/* ── Скелетоны и состояния ───────────────────────────────────────────── */
.sk {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--fill3) 25%, var(--fill2) 50%, var(--fill3) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-line { height: 12px; }
.sk-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 56px 24px; text-align: center; color: var(--label2);
}
.empty .ic { width: 44px; height: 44px; stroke-width: 1.4; color: var(--label4); margin-bottom: 6px; }
.empty-title { font: 700 19px/1.2 var(--font-display); color: var(--label); letter-spacing: -.02em; }
.empty .btn { margin-top: 14px; }

.list-foot { display: flex; justify-content: center; align-items: center; min-height: 60px; color: var(--label2); font-size: 13px; }
.loading-dim { opacity: .55; transition: opacity var(--t) .4s; pointer-events: none; }   /* быстрый ответ — без притемнения */

/* ── Обзор: плитки ───────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px 16px 14px; border-radius: var(--r-card);
  background: var(--bg2);
  text-align: left; min-width: 0;
  transition: transform var(--t-slow) var(--ease-glide), background-color var(--t);
}
@media (hover: hover) { .tile:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--bg2), var(--label) 3%); } }
.tile:active { transform: scale(.975); }
.tile-head { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; color: var(--label2); font-size: 14px; font-weight: 600; }
.tile-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: color-mix(in srgb, var(--tint) var(--tag-pct), transparent);
}
.tile-ico .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.tile-head .chev { margin-left: auto; width: 13px; height: 13px; stroke-width: 2.6; color: var(--label4); }
.tile-val { font: 700 30px/1.1 var(--font-display); letter-spacing: -.03em; margin-top: 14px; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sub { font-size: 13px; color: var(--label2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile-viz { width: 100%; height: 34px; margin-top: 12px; display: block; overflow: visible; }
.tile-viz .spark-line { fill: none; stroke: var(--tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.meter { width: 100%; margin-top: 12px; height: 34px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.meter-top { display: flex; justify-content: space-between; font: 600 12px/1 var(--font); color: var(--label2); font-variant-numeric: tabular-nums; }
.meter-bar { height: 4px; border-radius: 2px; background: var(--fill2); overflow: hidden; }
.meter-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--tint); }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.card { background: var(--bg2); border-radius: var(--r-card); padding: 18px; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cc-label { font-size: 14px; font-weight: 600; color: var(--label2); }
.cc-aside { text-align: right; font-size: 13px; color: var(--label2); }
.cc-aside b { display: block; font: 600 17px/1.3 var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; }
.cc-value { font: 700 30px/1.2 var(--font-display); letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Строка под суммой: изменение к прошлой неделе и подпись линии среднего. */
.cc-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 22px; margin-top: 6px; font-size: 13px; color: var(--label2); font-variant-numeric: tabular-nums; }
.cc-delta { font-weight: 600; color: var(--ink, var(--label2)); }
.cc-avg { display: inline-flex; align-items: center; gap: 7px; }
.cc-avg::before { content: ""; width: 16px; border-top: 2px dashed var(--label3); }
.chart-box { position: relative; height: 200px; margin-top: 10px; }
.dash-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.dash-lists .sec { margin-top: 0; min-width: 0; }
.empty-sm { padding: 26px 20px; gap: 8px; font-size: 14px; }
.empty-sm .ic { width: 26px; height: 26px; margin: 0; stroke-width: 2; color: var(--green-ink); }

@container page (max-width: 940px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 820px) {
  .charts, .dash-lists { grid-template-columns: 1fr; }
  .dash-lists { gap: 28px; }
}
@container page (max-width: 560px) {
  .tile-head .chev { display: none; }
  .tile-val { font-size: clamp(21px, 6.4cqw, 30px); }
  .tile { padding: 14px 13px 12px; }
  .tiles { gap: 10px; }
  .chart-box { height: 180px; }
}
@container page (max-width: 330px) { .tiles { grid-template-columns: 1fr; } }

/* ── Таблицы-списки (пользователи, платежи) ──────────────────────────── */
/* Шапка и строки — одна и та же сетка с теми же полями: каждый столбец
   начинается с одной вертикали, статусы и даты одного вида и размера. */
.grid-head, .grid-row { display: grid; align-items: center; column-gap: 16px; }
.grid-head { padding: 0 12px 9px; font-size: 13px; font-weight: 500; color: var(--label3); border-bottom: 1px solid var(--sep); }
.grid-head > * { white-space: nowrap; }
.grid-head .sortable { justify-self: start; display: inline-flex; align-items: center; gap: 3px; color: var(--label3); font-size: 13px; font-weight: 500; }
.grid-head .sortable:hover { color: var(--label); }
.grid-head .sortable.on { color: var(--label); font-weight: 600; }
.grid-row { padding: 9px 12px; }
.grid-row > * { min-width: 0; }
.cell-muted { color: var(--label2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-num { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-dim { color: var(--label4); }
.acts { display: flex; gap: 6px; justify-content: flex-end; }
/* С мышью кнопки строки проявляются при наведении: список спокойнее. */
@media (hover: hover) and (pointer: fine) {
  .grid-row .acts { opacity: 0; transform: translateX(6px); transition: opacity .18s, transform .22s var(--ease-out); }
  .grid-row:hover .acts, .grid-row:focus-within .acts { opacity: 1; transform: none; }
}
/* Эти два списка — таблицы прямо на плоскости, без подложки-карточки. */
#u-rows, #p-rows { background: none; border-radius: 0; overflow: visible; }
#u-rows > .row + .row::before, #p-rows > .row + .row::before { left: 0; }
#u-rows > .row, #p-rows > .row { border-radius: 12px; }
.row.cur { background: var(--fill); }                      /* открыт в карточке справа */

.users-grid { grid-template-columns: 40px minmax(0, 2.2fr) 108px 78px 104px 124px 148px; }
.pays-grid  { grid-template-columns: 40px minmax(0, 2fr) 108px 96px 150px minmax(0, 1.1fr); }

/* Показываем по ширине плоскости: m-only — компактная строка, d-only —
   таблица, w-only — столбцы, которым нужна широкая таблица. */
.m-only { display: none !important; }
@container page (max-width: 1040px) {
  .w-only { display: none !important; }
  .users-grid { grid-template-columns: 40px minmax(0, 2.2fr) 108px 78px 148px; }
  .pays-grid  { grid-template-columns: 40px minmax(0, 2fr) 108px 96px 150px; }
}
@container page (max-width: 760px) {
  .grid-head { display: none; }
  .d-only { display: none !important; }
  .m-only { display: revert !important; }
  .users-grid, .pays-grid { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; }
  .grid-row { padding: 10px 6px; min-height: 60px; }
}
/* Строки длинных списков за пределами экрана браузер не верстает и не
   рисует, пока до них не долистали. Высоту строки он запоминает (auto),
   поэтому полоса прокрутки не прыгает. */
#u-rows > .row, #p-rows > .row { content-visibility: auto; contain-intrinsic-size: auto 59px; }
/* Открыта карточка справа (широкий экран): таблица остаётся таблицей с той
   же шапкой — видны только имя и статус, остальные столбцы исчезают. Без
   перестройки в компактный список: так при открытии и закрытии ничего не
   прыгает. Пока колонка уезжает, вид тот же — столбцы возвращаются, когда
   плоскость уже раскрылась. */
@media (min-width: 1200px) {
  /* Имя — той же ширины, что в полной таблице (её замеряет скрипт перед
     открытием): статус стоит на месте, справа просто нет остальных столбцов. */
  .app:is(.has-detail, .col-moving) .users-grid { grid-template-columns: 40px minmax(0, var(--u-name-w, 1fr)) 108px; column-gap: 16px; }
  .app:is(.has-detail, .col-moving) .pays-grid { grid-template-columns: 40px minmax(0, var(--p-name-w, 1fr)) 108px; column-gap: 16px; }
  .app:is(.has-detail, .col-moving) .grid-head.users-grid, .app:is(.has-detail, .col-moving) .grid-head.pays-grid { display: grid !important; }
  .app:is(.has-detail, .col-moving) .users-grid > :nth-child(3), .app:is(.has-detail, .col-moving) .pays-grid > :nth-child(3) { display: revert !important; }
  .app:is(.has-detail, .col-moving) .users-grid > :nth-child(n+4), .app:is(.has-detail, .col-moving) .pays-grid > :nth-child(n+4),
  .app:is(.has-detail, .col-moving) .users-grid .m-only, .app:is(.has-detail, .col-moving) .pays-grid .m-only { display: none !important; }
  .app:is(.has-detail, .col-moving) .pays-grid .row-sub .d-only { display: revert !important; }
  .app:is(.has-detail, .col-moving) .grid-row { padding: 9px 12px; min-height: 0; }
  /* Закрытие: столбцы полной таблицы уже на месте, справа от статуса, и
     открываются краем плоскости по мере того, как она расширяется. */
  .app.col-closing .users-grid { grid-template-columns: var(--u-close-tpl); }
  .app.col-closing .pays-grid { grid-template-columns: var(--p-close-tpl); }
  .app.col-closing .users-grid > :nth-child(4), .app.col-closing .pays-grid > :nth-child(4),
  .app.col-closing .pays-grid > :nth-child(5),
  .app.col-closing.u-wide .users-grid > :is(:nth-child(5), :nth-child(6)),
  .app.col-closing.p-wide .pays-grid > :nth-child(6) { display: block !important; }
  .app.col-closing .users-grid > .acts { display: flex !important; }
}
.name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name-line .row-title { min-width: 0; font-weight: 600; }
.pay-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); background: color-mix(in srgb, var(--tint) var(--tag-pct), transparent); }
.pay-ico .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.pay-amt { font: 600 1em/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-id { font-family: var(--mono); font-size: 12px; color: var(--label3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Правый край компактной строки: две строки одной высоты, по правому краю. */
.m-right { display: flex !important; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.m-right.m-only { display: none !important; }
@container page (max-width: 760px) { .m-right.m-only { display: flex !important; } }
.m-right .tag { font-size: 13.5px; }
.m-right .row-sub { margin-top: 0; }

/* ── Рассылка ─────────────────────────────────────────────────────────── */
.bc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }
/* Прилипает ровно там, где стоит без прокрутки (шапка 60 px + отступ 4 px): иначе предпросмотр съезжал ниже «Сообщения». */
.bc-side { position: sticky; top: calc(64px + var(--safe-t)); }
@container page (max-width: 980px) { .bc-layout { grid-template-columns: 1fr; } .bc-side { position: static; } }

.editor-card { background: var(--bg2); border-radius: var(--r-card); overflow: hidden; }
.toolbar { display: flex; gap: 2px; padding: 8px 8px 6px; overflow-x: auto; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.tb-btn {
  min-width: 38px; height: 36px; padding: 0 9px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--label); font-size: 16px;
  transition: background-color .15s, transform .18s var(--ease-out);
}
.tb-btn .ic { width: 19px; height: 19px; }
.tb-btn:hover { background: var(--fill); }
.tb-btn:active { background: var(--fill2); transform: scale(.92); }
.tb-sep { width: 1px; background: var(--sep); margin: 8px 4px; flex-shrink: 0; }
.editor {
  min-height: 150px; max-height: 46vh; overflow-y: auto;
  padding: 6px 16px 14px; font-size: var(--fs); line-height: 1.45;
  outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}
.editor:empty::before { content: attr(data-placeholder); color: var(--label3); pointer-events: none; }
.editor code, .tg-bubble code { font-family: var(--mono); font-size: .9em; background: var(--fill2); padding: 1px 5px; border-radius: 5px; }
.editor a { color: var(--blue-ink); text-decoration: underline; }
.emoji-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 16%, transparent); font-size: .92em;
  -webkit-user-select: none; user-select: none; vertical-align: baseline;
}
.emoji-chip small { font: 10px var(--mono); color: var(--blue-ink); }

.attach { display: flex; align-items: center; gap: 12px; margin: 0 8px 8px; padding: 8px 10px; border-radius: 14px; background: var(--fill); min-height: 52px; transition: background-color .2s; }
.attach-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--fill2); }
.attach.drag { background: color-mix(in srgb, var(--blue) 16%, transparent); }

.tg-window {
  border-radius: var(--r-card); padding: 16px 12px; min-height: 130px;
  background: var(--tg-bg);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
}
.tg-bubble {
  max-width: 88%; border-radius: 18px 18px 5px 18px; overflow: hidden;
  background: var(--tg-bubble); color: var(--tg-text);
  font-size: 15px; line-height: 1.38; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.tg-bubble img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.tg-text { padding: 7px 12px 8px; white-space: pre-wrap; }
.tg-text:empty { display: none; }
.tg-bubble a { color: var(--tg-link); }
.tg-bubble tg-emoji { font-style: normal; }
.tg-placeholder { color: color-mix(in srgb, var(--tg-text) 45%, transparent); font-style: italic; }

#g-list .row-sub, #bc-aud .row-sub, #if-list .row-sub { white-space: normal; }
.tg-bubble blockquote { margin: 2px 0; padding-left: 9px; border-left: 3px solid var(--tg-link); }
.tg-spoiler-prev { background: color-mix(in srgb, var(--tg-text) 22%, transparent); border-radius: 4px; }

/* ── Тексты ───────────────────────────────────────────────────────────── */
.tx-hint { font-size: 14px; color: var(--label2); line-height: 1.45; margin: 0 4px 22px; }
.tx-count { font: 500 13px var(--font); letter-spacing: 0; color: var(--label2); font-variant-numeric: tabular-nums; }
.tx-count.over { color: var(--red-ink); }
.tx-area {
  display: block; width: 100%; min-height: 180px; resize: none; overflow: hidden;
  padding: 14px 16px; border: 0; background: none; outline: none;
  font: 14px/1.5 var(--mono); color: var(--label); overflow-wrap: anywhere;
}
.tx-vars { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--sep); }
.tx-var {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 10px; border-radius: 9px;
  background: var(--fill); font-size: 13px; color: var(--label2); text-align: left;
  transition: background-color .15s, transform .18s var(--ease-out);
}
.tx-var code { color: var(--blue-ink); font-size: 12.5px; }
.tx-var:hover { background: var(--fill2); }
.tx-var:active { transform: scale(.96); }
.tx-err {
  margin-top: 10px; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-ink);
}
.aud-count { font: 500 1em/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--label2); }

.progress { height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; margin: 14px 0 12px; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--tint, var(--blue)); transition: width .8s var(--ease-glide); }
.bc-status-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bc-status-head .ic { color: var(--ink); }
.bc-nums { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--label2); font-variant-numeric: tabular-nums; }
.bc-nums b { color: var(--label); font-weight: 600; }

.inline-form { display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; }
.inline-form input { flex: 1; min-width: 0; height: 38px; border: 0; background: none; font-size: var(--fs); color: var(--label); }
.inline-form input::placeholder { color: var(--label3); }

/* ── Группы ───────────────────────────────────────────────────────────── */
.op-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.stepper { display: inline-flex; align-items: center; background: var(--fill2); border-radius: 12px; height: 38px; }
.stepper button { width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--label); border-radius: 12px; transition: transform .18s var(--ease-out); }
.stepper button:active { background: var(--fill2); transform: scale(.92); }
.stepper button .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.stepper input {
  width: 58px; height: 100%; border: 0; background: none; text-align: center;
  font: 600 17px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--label);
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.op-foot { padding: 0 14px 14px; }

/* ── Рейтинги ─────────────────────────────────────────────────────────── */
.rank { width: 28px; flex-shrink: 0; text-align: center; font: 600 15px/1 var(--font-display); color: var(--label2); font-variant-numeric: tabular-nums; }
.medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font: 700 14px/1 var(--font-display); color: #fff;
}
.medal-1 { background: linear-gradient(160deg, #ffe07a, #f5b300 55%, #d68f00); color: #6b4300; }
.medal-2 { background: linear-gradient(160deg, #f1f3f6, #c3c9d2 55%, #9aa3ae); color: #3e4550; }
.medal-3 { background: linear-gradient(160deg, #ffc39a, #e08a4f 55%, #b8642d); color: #5a2a0b; }
.rat-val { text-align: right; flex-shrink: 0; }
.rat-val b { display: block; font: 600 1em/1.25 var(--font-display); font-variant-numeric: tabular-nums; }
.rat-val small { font-size: 12px; color: var(--label2); }

/* ── Шапка и тело карточки (слой в колонке справа) ───────────────────── */
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(24px + var(--safe-b));
  scrollbar-width: thin; scrollbar-color: var(--label4) transparent;
  container: page / inline-size;
}
.sh-head {
  position: relative; flex-shrink: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 64px; padding: 10px 14px 8px;
}
.sh-title { grid-column: 2; align-self: end; font: 700 18px/1.2 var(--font-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-head:not(:has(.sh-sub)) .sh-title { grid-row: 1 / span 2; align-self: center; }
.sh-sub { grid-column: 2; grid-row: 2; align-self: start; font-size: 13px; color: var(--label2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-l { grid-column: 1; grid-row: 1 / span 2; }
.sh-r { grid-column: 3; grid-row: 1 / span 2; }
.sh-close {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--label);
  transition: transform .18s var(--ease-out), background-color .15s;
}
.sh-close .ic { width: 17px; height: 17px; stroke-width: 2.4; }
@media (hover: hover) { .sh-close:hover { background: var(--bg3); } }
.sh-close:active { transform: scale(.9); }
/* Крестик закрывает колонку; стрелка — возвращает к предыдущему слою
   (и стоит всегда там, где карточка занимает весь экран). */
.sh-close .ic-back { display: none; width: 21px; height: 21px; }
.dl:not(:first-child) .sh-close .ic-x { display: none; }
.dl:not(:first-child) .sh-close .ic-back { display: block; }
@media (max-width: 1199px) { .sh-close .ic-x { display: none; } .sh-close .ic-back { display: block; } }
.sh-text-btn {
  height: 44px; padding: 0 16px; border-radius: 14px;
  background: var(--bg2); color: var(--label); font-size: 15px; font-weight: 600;
  transition: transform .18s var(--ease-out), background-color .15s;
}
.sh-text-btn.strong { color: var(--btn-ink); background: var(--btn); }
.sh-text-btn:active { transform: scale(.95); }
@media (max-width: 760px) {
  .sh-head { padding-top: calc(8px + var(--safe-t)); padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); min-height: calc(60px + var(--safe-t)); touch-action: pan-y; }
  .sheet-body { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); }
}

/* ── Подтверждение: небольшое окно по центру ─────────────────────────── */
.ov {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim);
  opacity: 0; transition: opacity var(--t) ease-out;
}
.ov.open { opacity: 1; }
.ov.closing { opacity: 0; transition: opacity .3s var(--ease-in); pointer-events: none; }
.alert {
  width: min(340px, 100%); border-radius: 24px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--line);
  text-align: left;
  transform: translateY(10px) scale(.97); opacity: 0;
  transition: transform .56s var(--smooth), opacity var(--t) ease-out;
}
.ov.open .alert { transform: none; opacity: 1; }
.ov.closing .alert { transform: translateY(4px) scale(.985); opacity: 0; transition: transform .3s var(--ease-in), opacity .26s var(--ease-in); }
.alert-body { padding: 22px 22px 18px; }
.alert-title { font: 700 18px/1.3 var(--font-display); letter-spacing: -.02em; }
.alert-msg { font-size: 15px; line-height: 1.4; margin-top: 6px; color: var(--label2); }
.alert-msg b { color: var(--label); font-weight: 600; }
.alert-msg .muted { color: var(--label2); }
.alert-extra { margin-top: 14px; }
.alert-extra .row { padding: 6px 0; min-height: 44px; font-size: 15px; }
.alert-extra .row::before { display: none; }
.alert-input {
  width: 100%; height: 46px; border-radius: 14px; border: 0;
  background: var(--fill2); padding: 0 14px; font-size: 16px; color: var(--label); margin-top: 16px;
}
.alert-btns { display: flex; gap: 8px; padding: 0 14px 14px; }
.alert-btns button {
  flex: 1; min-height: 48px; padding: 0 12px; border-radius: 14px;
  font-size: 15px; font-weight: 600; color: var(--label); background: var(--fill2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .18s var(--ease-out), background-color .15s;
}
.alert-btns button.strong { color: var(--btn-ink); background: var(--btn); }
.alert-btns button.destructive { color: #fff; background: var(--red-solid); }
.alert-btns button:active { transform: scale(.96); }
.alert-btns button:disabled { opacity: .7; }
.alert-btns .spinner { width: 18px; height: 18px; }

/* ── Карточка пользователя ───────────────────────────────────────────── */
.hero, .hero-skel { display: flex; align-items: center; gap: 14px; padding: 4px 2px 16px; }
.hero-main { flex: 1; min-width: 0; }
.hero-name { font: 700 23px/1.2 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.hero-sub { color: var(--label2); font-size: 14px; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-tags { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.copy-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--blue-ink); font-size: 14px; border-radius: 6px; padding: 0 2px; }
.copy-btn .ic { width: 14px; height: 14px; stroke-width: 2.1; }
.copy-btn:active { opacity: .5; }

/* Статус в карточке: при наведении слово приподнимается, под ним проявляется
   остаток дней. Высота строки не меняется. */
.st-flip { position: relative; display: inline-flex; justify-content: flex-end; cursor: default; border-radius: 6px; }
.st-flip > .tag { transition: transform .24s var(--ease-out); }
.st-flip-sub {
  position: absolute; right: 0; top: 50%; margin-top: -1px;
  font-size: 12.5px; line-height: 1.3; color: var(--label2); white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .18s, transform .24s var(--ease-out);
}
@media (hover: hover) { .st-flip:hover > .tag { transform: translateY(-9px); } .st-flip:hover > .st-flip-sub { opacity: 1; transform: none; } }
@media (hover: none) { .st-flip.on > .tag { transform: translateY(-9px); } .st-flip.on > .st-flip-sub { opacity: 1; transform: none; } }
.st-flip:focus-visible > .tag { transform: translateY(-9px); }
.st-flip:focus-visible > .st-flip-sub { opacity: 1; transform: none; }

/* Сводка одной строкой: оплачено, платежей, друзей, осталось дней. */
.u-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.u-stat { padding: 10px 12px; border-radius: 14px; background: var(--bg2); min-width: 0; }
.u-stat b { display: block; font: 700 16px/1.25 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-stat span { display: block; font-size: 12px; color: var(--label2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container page (max-width: 350px) { .u-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Действия: подпись слева, значок справа; главное действие — на всю ширину. */
.act-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.act-tile {
  flex: 1 1 150px; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 50px; padding: 0 14px; border-radius: 14px;
  background: var(--bg3); color: var(--label);
  font-size: 15px; font-weight: 600; text-align: left;
  transition: transform .18s var(--ease-out), background-color .15s, color .15s;
}
.act-tile .ic { width: 20px; height: 20px; stroke-width: 2; opacity: .75; }
.act-tile.primary { flex-basis: 100%; background: var(--btn); color: var(--btn-ink); }
@media (hover: hover) {
  .act-tile:hover { background: color-mix(in srgb, var(--bg3), var(--label) 8%); }
  .act-tile.primary:hover { background: var(--btn-hi); }
}
.act-tile:active { transform: scale(.97); }
.act-tile:disabled { opacity: .35; }

/* Вкладки карточки: «Профиль», «Ссылки», «Устройства» */
.u-tabs { margin: 0 0 16px; }
.u-pane { min-height: 240px; }
.u-empty { padding: 44px 24px; }
.sec-h-n { font: 600 14px/1 var(--font-display); color: var(--label2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.link-row { align-items: flex-start; padding-top: 13px; padding-bottom: 13px; }
.link-row .chev { margin-top: 9px; }
.link-url { margin-top: 7px; color: var(--blue-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-del {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; margin-right: -4px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--red) var(--tag-pct), transparent); color: var(--red-ink);
  transition: transform .18s var(--ease-out), background-color .15s;
}
.dev-del .ic { width: 17px; height: 17px; stroke-width: 2; }
@media (hover: hover) { .dev-del:hover { background: color-mix(in srgb, var(--red) 26%, transparent); } }
.dev-del:active { transform: scale(.9); }

.seg-inline { width: auto; flex-shrink: 1; min-width: 0; }
/* Подпись рядом с сегментом («Тариф», «Порядок») не сжимается под него на узком экране. */
.row:has(> .seg-inline) > .row-main { flex: 0 0 auto; }
.seg-inline button { padding: 0 12px; }

/* Изменение срока */
.big-days { text-align: center; font: 700 60px/1.1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 18px; transition: color .25s; }
.big-days-sub { text-align: center; color: var(--label2); font-size: 15px; margin-bottom: 16px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--blue) var(--p, 50%), var(--fill2) var(--p, 50%)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill2); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--blue); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .2s var(--ease-out); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--label2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 16px; }
.compare .lbl { font-size: 13px; color: var(--label2); }
.compare .val { font: 600 17px/1.25 var(--font-display); margin-top: 3px; font-variant-numeric: tabular-nums; }
.compare .arrow { color: var(--label4); }
.compare > :last-child { text-align: right; }

/* Проверка рефералов */
.gauge { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge .g-track { stroke: var(--fill2); }
.gauge .g-bar { stroke: var(--tint); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); }
.gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-c b { font: 700 28px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gauge-c small { font-size: 11px; color: var(--label2); margin-top: 3px; }
.fraud-top { display: flex; align-items: center; gap: 20px; padding: 18px; }
.fraud-stats { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.fraud-stats div { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.fraud-stats b { font: 600 1em/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.verdict { padding: 14px 16px; border-radius: var(--r-inner); background: color-mix(in srgb, var(--tint) var(--tag-pct), var(--bg2)); margin-top: 12px; }
.verdict b { color: var(--ink); }
.verdict p { font-size: 14px; color: var(--label2); margin-top: 3px; line-height: 1.4; }

/* ── Тост и баннер «нет связи» ───────────────────────────────────────── */
.toast {
  position: fixed; z-index: 200; left: 50%; top: calc(12px + var(--safe-t));
  max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 16px;
  background: var(--toast); color: var(--toast-ink); border: 1px solid var(--toast-line);
  font-size: 15px; font-weight: 600; line-height: 1.3;
  /* Въезжает на пару сантиметров, а не из-за края экрана; уходит быстрее. */
  transform: translate(-50%, -12px) scale(.97);
  opacity: 0; pointer-events: none;
  transition: transform var(--t) var(--ease-in), opacity .3s var(--ease-in);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; transition: transform .63s var(--smooth), opacity var(--t) ease-out; }
.toast .ic { width: 22px; height: 22px; stroke-width: 2.3; color: var(--tint); }
.toast-msg { overflow-wrap: anywhere; }

.offline {
  position: fixed; z-index: 150; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%);
  padding: 9px 16px; border-radius: 12px; background: var(--red-solid); color: #fff;
  font-size: 13px; font-weight: 600;
  animation: pageIn .3s var(--ease-out);
}
@media (max-width: 760px) { .offline { bottom: calc(var(--tab-h) + var(--tab-gap) + 12px); } }

/* ── Полосы вырастают при первом показе (класс .grow ставит скрипт) ──── */
.grow .meter-bar > span, .grow .j-sc-bar > span, .grow .j-bar > span, .grow .j-wk-bar > span {
  transform-origin: left center; animation: bar-grow 1.2s .1s var(--ease-glide) both;
}
@keyframes bar-grow { from { transform: scaleX(0); } }

/* ── Меньше движения ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spinner, .nb-btn.spin .ic { animation: spin 1.5s linear infinite !important; }
}

/* ── Серверы ─────────────────────────────────────────────────────────── */
.srv-flag { width: 34px; flex-shrink: 0; font-size: 26px; line-height: 1; text-align: center; }
.srv-flag-lg { width: auto; font-size: 50px; }
.srv-add-btn { height: 40px; border-radius: 12px; padding: 0 14px; }
@media (max-width: 760px) { .srv-add-btn { width: 44px; height: 44px; padding: 0; border-radius: 14px; } .srv-add-btn span { display: none; } }

/* Таблица серверов: подписи столбцов стоят в строке заголовка группы, каждая
   строка — в одну линию. Статус — точкой на флаге; словами — только беда
   («нет связи», красным) или работа («настройка», синим). */
.srv-sech, .srv-grid { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 96px minmax(0, 1fr) 32px; column-gap: 16px; }
.srv-sech { align-items: baseline; padding: 0 16px 10px; }
.srv-sech-t { grid-column: 1 / span 2; margin-left: -12px; font: 700 18px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.srv-sech > span:not(.srv-sech-t) { font-size: 13px; font-weight: 500; color: var(--label3); white-space: nowrap; }
.row.srv-grid { display: grid; align-items: center; min-height: 54px; padding-top: 9px; padding-bottom: 9px; }
.srv-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-sub-d { margin-top: 1px; line-height: 1.2; }
.srv-sub-m { display: none; }
.srv-st { font-size: 13px; font-weight: 600; color: var(--ink); }
.srv-cell { font-size: 14px; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-cell b { color: var(--label); font-weight: 500; }
.srv-yes .ic { width: 17px; height: 17px; stroke-width: 2.4; color: var(--blue-ink); vertical-align: -3px; }
.srv-no { color: var(--label4); }
.srv-fb { position: relative; display: block; width: 34px; flex-shrink: 0; }
.srv-fb .srv-flag { display: block; }
.srv-dot {
  position: absolute; right: -3px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 0 2.5px var(--bg2); transition: background-color var(--t);
}
.srv-dot.busy { animation: srv-pulse 1.8s ease-in-out infinite; }
@keyframes srv-pulse { 50% { opacity: .3; } }
.srv-term {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--label2); background: var(--fill); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-glide);
}
.srv-term .ic { width: 18px; height: 18px; stroke-width: 1.9; }
@media (hover: hover) { .srv-term:hover { background: var(--fill2); color: var(--label); } }
.srv-term:active { transform: scale(.92); }
@container page (max-width: 700px) {
  .srv-sech { display: block; padding: 0 4px 10px; }
  .srv-sech-t { margin: 0; }
  .srv-sech > span:not(.srv-sech-t) { display: none; }
  .srv-grid { grid-template-columns: 34px minmax(0, 1fr) 32px; }
  .srv-grid .c-a, .srv-grid .c-g, .srv-sub-d { display: none; }
  .srv-sub-m { display: block; }
}

/* Карточка сервера */
.srv-hero { display: flex; align-items: center; gap: 16px; padding: 2px 2px 16px; }
.srv-hero-main { min-width: 0; }
.srv-hero-name { font: 700 23px/1.2 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.srv-hero-sub { color: var(--label2); font-size: 14px; margin: 3px 0 8px; overflow-wrap: anywhere; }
.srv-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
.srv-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px;
  background: var(--bg2); color: var(--label); font-size: 13px; font-weight: 600;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-glide);
}
.srv-act .ic { width: 22px; height: 22px; color: var(--label2); }
@media (hover: hover) { .srv-act:hover { background: var(--bg3); } }
.srv-act:active { transform: scale(.97); }
.srv-warn { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px; font-size: 14px; line-height: 1.4; color: var(--orange-ink); }
.srv-warn .ic { width: 20px; height: 20px; flex-shrink: 0; }
.tag .spinner { width: 12px; height: 12px; border-width: 1.6px; color: var(--ink, var(--label2)); }

/* Поля формы — строками списка. */
.srv-row { gap: 14px; cursor: text; }
.srv-lbl { flex: 0 0 96px; color: var(--label); }
.srv-in {
  flex: 1; min-width: 0; height: 30px; padding: 0;
  background: none; border: 0; outline: 0;
  font-size: 16px; color: var(--label); text-align: right;
  -webkit-appearance: none; appearance: none;
}
.srv-in::placeholder { color: var(--label3); }
select.srv-in { cursor: pointer; text-align-last: right; }
.srv-hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--label2); white-space: normal; }
.srv-row:focus-within { background: color-mix(in srgb, var(--blue) 8%, transparent); }

/* ── Сайты и VPN ─────────────────────────────────────────────────────── */
.rt-t { display: block; }
.rt-tag { margin-top: 3px; font-size: 13px; }
.rt-wrap { white-space: normal; }
.rt-av {
  --h: 210;
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--font-display); color: #fff;
  background: linear-gradient(160deg, oklch(0.6 0.1 var(--h)), oklch(0.48 0.11 calc(var(--h) + 20)));
}
.rt-row .btn { flex-shrink: 0; }
.rt-row .btn-icon .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.rt-row .tag-sm { flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.rt-new .rt-av { box-shadow: 0 0 0 2px var(--green); }
.rt-del .row-title, .rt-del .row-sub { text-decoration: line-through; color: var(--label3); }
.rt-del .rt-av { opacity: .4; }
.rt-add .row { min-height: 56px; }
.rt-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 6px 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.rt-note .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; stroke-width: 2.3; }
#rt-seg { grid-auto-columns: minmax(0, 1fr); }
.rt-bar[hidden] { display: none; }
/* С плашкой нижний отступ слоя не нужен: иначе под ней просвечивает список. */
.sheet-body:has(> .rt-bar:not([hidden])) { padding-bottom: 0; }
.rt-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  margin: 24px -16px 0; padding: 12px 16px calc(12px + var(--safe-b));
  background: color-mix(in srgb, var(--plane) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  animation: rt-up .22s var(--ease-out);
}
@keyframes rt-up { from { transform: translateY(100%); opacity: 0; } }
.rt-bar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.rt-bar-txt span { color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-chg { margin-top: 6px; }
.rt-chg-list { margin-top: 4px; font-size: 13px; color: var(--label2); line-height: 1.45; overflow-wrap: anywhere; }
.rt-warn { padding: 14px 16px; margin-bottom: 10px; }
.rt-warn-h { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.rt-warn-h b { flex: 1; min-width: 0; color: var(--label); font-weight: 600; font-size: 15px; }
.rt-warn-h .ic { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2.3; }
.rt-warn-t { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--label2); }
.rt-warn-i { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-inner); background: var(--bg3); font: 12.5px/1.55 var(--mono); color: var(--label); overflow-wrap: anywhere; }

/* ── Обход белых списков ─────────────────────────────────────────────── */
.wl-wrap { white-space: normal; overflow-wrap: anywhere; }
.wl-rec { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wl-rec code { flex: 1; min-width: 0; font: 13px/1.4 var(--mono); overflow-wrap: anywhere; color: var(--label); }
.wl-arrow { color: var(--label3); }
.wl-cred {
  width: 100%; min-height: 76px; resize: vertical; padding: 0; border: 0; outline: 0; background: none;
  font: 13px/1.45 var(--mono); color: var(--label);
}
.wl-cred::placeholder { color: var(--label3); font-family: var(--font); }

/* ── Gemini ──────────────────────────────────────────────────────────── */
.gm-sub { white-space: normal; }
.gm-val { flex-shrink: 0; max-width: 50%; font-size: 14px; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.gm-val b { color: var(--label); font-weight: 600; }
.gm-ok { color: var(--green-ink); }
.gm-bad { color: var(--red-ink); }
.gm-warn { color: var(--orange-ink); }
.gm-mute { color: var(--label3); }

.job-state { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 12px; padding: 0 4px; color: var(--label2); font-size: 14px; }
.joblog {
  margin: 0; padding: 16px; border-radius: var(--r-inner);
  background: #0a0a0a; color: #d6d6da; border: 1px solid var(--line);
  font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  min-height: 120px; user-select: text; -webkit-user-select: text;
}
.joblog .jl-step { color: #fff; font-weight: 700; }
.joblog .jl-sub  { color: #6fd8e6; }
.joblog .jl-err  { color: #ff7b7f; font-weight: 600; }
.joblog .jl-ok   { color: #5fd47f; font-weight: 600; }

/* Терминал — отдельный слой поверх всего: ему нужны свои жесты прокрутки
   и весь экран. */
.term-ov {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: max(10px, var(--safe-t)) max(10px, var(--safe-r)) max(10px, var(--safe-b)) max(10px, var(--safe-l));
  background: rgba(0,0,0,.7);
}
.term-win {
  display: flex; flex-direction: column;
  width: 100%; max-width: 1180px; height: 100%; max-height: 860px;
  background: #0a0a0a; color: #e6e6e9;
  border-radius: 18px; overflow: hidden; border: 1px solid #272727;
}
.term-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: #161616; flex-shrink: 0; }
.term-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.term-title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-title small { font: 12px var(--mono); color: #9a9aa2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-head .tag { color: #e6e6e9; }
.term-close { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #e6e6e9; flex-shrink: 0; }
.term-close:hover { background: rgba(255,255,255,.18); }
.term-close .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.term-box { flex: 1; min-height: 0; padding: 8px 10px 4px 10px; }
/* Трекинг страницы (body: -.005em) в терминале обнуляем: xterm считает сетку
   без него, и унаследованный сдвиг растягивал строку за правый край. */
.term-in { width: 100%; height: 100%; letter-spacing: 0; }
.term-box .xterm { height: 100%; }
.term-keys { display: flex; gap: 6px; padding: 8px 10px; background: #161616; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.term-keys::-webkit-scrollbar { display: none; }
.term-keys button { flex-shrink: 0; height: 34px; min-width: 42px; padding: 0 11px; border-radius: 9px; background: rgba(255,255,255,.1); color: #e6e6e9; font: 500 13px var(--mono); }
.term-keys button:active { background: rgba(255,255,255,.22); }
@media (max-width: 760px) {
  .term-ov { padding: 0; }
  .term-win { max-height: none; border-radius: 0; border: 0; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
}

/* ── Путь клиента ────────────────────────────────────────────────────── */
.chips-sep { flex-shrink: 0; width: 1px; margin: 7px 4px; background: var(--sep); }

/* Итог одной фразой и выручка рядом. */
.j-lead {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--r-card); background: var(--bg2);
}
.j-lead p { flex: 1 1 360px; font-size: 18px; line-height: 1.5; color: var(--label2); letter-spacing: -.01em; }
.j-lead p b { color: var(--label); font-weight: 700; font-variant-numeric: tabular-nums; }
.j-pct { color: var(--label3); font-size: .85em; font-variant-numeric: tabular-nums; }
.j-pct::before { content: "("; } .j-pct::after { content: ")"; }
.j-lead-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.j-lead-side span { font-size: 13px; color: var(--label2); }
.j-lead-side b { font: 700 28px/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.j-lead-side small { font-size: 13px; color: var(--label2); }

/* Четыре этапа со стрелками между ними. */
.j-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.j-sc {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; padding: 16px; border-radius: var(--r-card); background: var(--bg2);
}
.j-sc + .j-sc::before {                 /* стрелка от предыдущего этапа */
  content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--label4);
  clip-path: polygon(25% 15%, 75% 50%, 25% 85%);
}
.j-sc-top { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--label2); }
.j-sc-n {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  font: 700 12px/1 var(--font-display); color: var(--ink);
  background: color-mix(in srgb, var(--tint) var(--tag-pct), transparent);
}
.j-sc-val { font: 700 34px/1.1 var(--font-display); letter-spacing: -.03em; margin-top: 12px; font-variant-numeric: tabular-nums; }
.j-sc-sub { font-size: 13px; color: var(--label2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-sc-bar { height: 4px; border-radius: 2px; background: var(--fill2); overflow: hidden; margin-top: 14px; }
.j-sc-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--tint); }
.j-sc-foot { font-size: 12.5px; color: var(--label2); margin-top: 8px; line-height: 1.35; }
@container page (max-width: 860px) {
  .j-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .j-sc + .j-sc::before { display: none; }
}

.j-worst {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  margin-top: 12px; padding: 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--orange) 9%, var(--bg2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 26%, transparent);
  transition: background-color .15s;
}
@media (hover: hover) { .j-worst:hover { background: color-mix(in srgb, var(--orange) 14%, var(--bg2)); } }
.j-worst-k { font-size: 12px; font-weight: 700; color: var(--orange-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.j-worst .row-title { font-weight: 600; white-space: normal; }
.j-worst .row-sub { white-space: normal; font-size: 13px; }
.j-worst .chev { width: 14px; height: 14px; stroke-width: 2.6; color: var(--label4); flex-shrink: 0; }

/* Шаги по этапам: полоса — доля от запустивших бота, цвет — этап. */
.j-stage + .j-stage { margin-top: 18px; }
.j-stage-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 4px 9px; font-size: 15px; font-weight: 600; color: var(--label);
}
.j-stage-name { display: inline-flex; align-items: center; gap: 8px; }
.j-stage-n { font-weight: 400; font-size: 13px; color: var(--label2); white-space: nowrap; }
.j-stage-n b { font: 700 14px/1 var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; margin-left: 2px; }

.j-step, .j-sub {
  position: relative; display: grid; align-items: center; column-gap: 12px;
  width: 100%; padding: 14px 16px; text-align: left;
  transition: background-color .15s;
}
.j-step { grid-template-columns: minmax(0, 1fr) 14px; row-gap: 8px; }
.j-step > :not(.chev) { grid-column: 1; }
.j-step > .chev { grid-column: 2; grid-row: 1 / span 3; }
.j-sub { grid-template-columns: 28px minmax(0, 1fr) 14px; }
.j-step + .j-step::before, .j-step + .j-sub::before, .j-sub + .j-step::before {
  content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: 1px solid var(--sep);
}
@media (hover: hover) { .j-step:hover, .j-sub:hover { background: var(--hover); } }
.j-step:active, .j-sub:active { background: var(--press); }
.j-step .chev, .j-sub .chev { width: 14px; height: 14px; stroke-width: 2.6; color: var(--label4); }
.j-step-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.j-label { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-val { flex-shrink: 0; font: 500 13px/1 var(--font-display); color: var(--label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.j-val b { font: 700 17px/1 var(--font-display); color: var(--label); margin-right: 8px; }
.j-bar { height: 10px; border-radius: 5px; background: var(--fill2); overflow: hidden; }
.j-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--tint, var(--blue)); }
.j-bar-thin { height: 6px; border-radius: 3px; }
.j-meta { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--label2); }
.j-meta:not(:has(.j-loss)):has(> span:empty) { display: none; }
.j-loss { margin-left: auto; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.j-loss .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.j-loss:not(.worst) .ic { transform: rotate(90deg); opacity: .7; }
.j-loss.worst { color: var(--orange-ink); font-weight: 600; }
/* Отписавшиеся — строка-примечание под шагом «Подписался на канал». */
.j-sub .row-ico { width: 28px; height: 28px; border-radius: 9px; }
.j-sub .row-ico .ic { width: 16px; height: 16px; }
.j-sub .row-title { font-size: 14.5px; font-weight: 500; white-space: normal; }
.j-sub .row-sub { font-size: 12.5px; white-space: normal; }
/* Номер шага в карточке пользователя («Путь по шагам»). */
.j-n {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--fill2);
  font: 600 12px/1 var(--font-display); color: var(--label2); font-variant-numeric: tabular-nums;
}

/* Что ещё делают: та же полоса, относительно самого частого действия. */
.j-xs { padding: 4px 0; }
.j-x { position: relative; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.j-x + .j-x::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--sep); }
.j-x-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.j-x-label { min-width: 0; }
.j-x .j-val b { font-size: 15px; }
.j-x .j-bar > span { background: var(--label3); }
.j-x-note { font-size: 12.5px; color: var(--label2); }

.j-weeks { padding: 6px 16px; overflow-x: auto; }
.j-weeks table { width: 100%; border-collapse: collapse; font-size: 14px; }
.j-weeks th, .j-weeks td { padding: 11px 0; text-align: left; font-weight: 400; vertical-align: middle; }
.j-weeks th + th, .j-weeks td { padding-left: 14px; }
.j-weeks thead th { font-size: 12.5px; font-weight: 600; color: var(--label2); white-space: nowrap; }
.j-weeks tbody tr { border-top: 1px solid var(--sep); }
.j-weeks tbody th { white-space: nowrap; }
.j-weeks tbody th small { display: block; font-size: 11.5px; color: var(--label2); margin-top: 2px; }
.j-weeks .num { text-align: right; font-variant-numeric: tabular-nums; }
.j-wk { display: flex; align-items: center; gap: 10px; min-width: 96px; }
.j-wk b { font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.j-wk-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; }
.j-wk-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--tint, var(--blue)); }

/* Как считается — свёрнуто, чтобы не мешать читать цифры. */
.j-how { margin-top: 24px; border-radius: var(--r-card); background: var(--bg2); }
.j-how summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--label2);
}
.j-how summary::-webkit-details-marker { display: none; }
.j-how summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease-out); }
.j-how[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.j-how p { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.5; color: var(--label2); }
.j-how { interpolate-size: allow-keywords; }
.j-how::details-content { height: 0; opacity: 0; overflow: clip; transition: height var(--t-slow) var(--ease-glide), opacity var(--t), content-visibility var(--t-slow) allow-discrete; }
.j-how[open]::details-content { height: auto; opacity: 1; }

@container page (max-width: 560px) {
  .j-legend { display: none; }
  .j-lead { padding: 16px; gap: 14px; }
  .j-lead p { font-size: 16px; flex-basis: 100%; }
  .j-lead-side { align-items: flex-start; text-align: left; }
  .j-sc { padding: 14px; }
  .j-sc-val { font-size: clamp(24px, 7.5cqw, 34px); }
  .j-sc-sub { white-space: normal; }
  .j-weeks { padding: 4px 14px; }
  .j-wk { min-width: 0; justify-content: flex-end; }
  .j-wk-bar { display: none; }
  .j-weeks th:nth-child(n+3) { text-align: right; }
  .j-weeks table { font-size: 13px; }
  .j-weeks thead th { font-size: 11.5px; }
  .j-weeks th + th, .j-weeks td { padding-left: 8px; }
  .j-wk b { min-width: 0; font-size: 13px; }
}